Post image
Strategy

COVID-19 accountability website. How they treat us now shoul…


I am developing a non-commercial website to hold accountable the companies, organizations, politicians, and individuals who put their profits above life during this COVID-19 crisis.

Twitter posts and press notes fade with time and get lost. My project is to create a portal that works as a permanent database of their actions so that society can have access to this information now and specially after this crisis is over. How they treat us now should guide how we treat them.

It would be a collaborative, international website, where people all over the world can upload actions taken by local and global companies. In order to ensure transparency and trustworthiness, users must also upload links from major local or global news portals describing the actions.

To keep it simple my idea is to create a type of table with the entries and filters. I have attached a simple layout I made.

My background is in international humanitarian work, I know very little about web development. I’m looking for activist (or bored) web developers, designers, journalists and others interested in contributing to this cause, please reach out here or at tlcl@protonmail.com.

Also, please be so kind as to share with others who you think might be interested 🙂

Post image
Post image



Source link

Post image
Strategy

How to print yesterday’s date in UTC format using React? : w…


Hey Fellas,

I’ve been trying to build a COVID tracker in React among the bazillion ones already there. I filtered the API objects using a date range in the state to print yesterday’s data only. Right now I am using a manual placeholder date like so:

Post image

How do I write a function to create a variable with yesterday’s date in this format: 2020-04-20T00:00:00Z

Thank you!



Source link

Building a Scalable CSS Architecture With BEM and Utility Cl...
Strategy

Building a Scalable CSS Architecture With BEM and Utility Cl…


Maintaining a large-scale CSS project is hard. Over the years, we’ve witnessed different approaches aimed at easing the process of writing scalable CSS. In the end, we all try to meet the following two goals:

  1. Efficiency: we want to reduce the time spent thinking about how things should be done and increase the time doing things.
  2. Consistency: we want to make sure all developers are on the same page.

For the past year and a half, I’ve been working on a component library and a front-end framework called CodyFrame. We currently have 220+ components. These components are not isolated modules: they’re reusable patterns, often merged into each other to create complex templates.

The challenges of this project have forced our team to develop a way of building scalable CSS architectures. This method relies on CSS globals, BEM, and utility classes.

I’m happy to share it! 👇

CSS Globals in 30 seconds

Globals are CSS files containing rules that apply crosswise to all components (e.g., spacing scale, typography scale, colors, etc.). Globals use tokens to keep the design consistent across all components and reduce the size of their CSS.

Here’s an example of typography global rules:

/* Typography | Global */
:root {
  /* body font size */
  --text-base-size: 1em;


  /* type scale */
  --text-scale-ratio: 1.2;
  --text-xs: calc((1em / var(--text-scale-ratio)) / var(--text-scale-ratio));
  --text-sm: calc(var(--text-xs) * var(--text-scale-ratio));
  --text-md: calc(var(--text-sm) * var(--text-scale-ratio) * var(--text-scale-ratio));
  --text-lg: calc(var(--text-md) * var(--text-scale-ratio));
  --text-xl: calc(var(--text-lg) * var(--text-scale-ratio));
  --text-xxl: calc(var(--text-xl) * var(--text-scale-ratio));
}


@media (min-width: 64rem) { /* responsive decision applied to all text elements */
  :root {
    --text-base-size: 1.25em;
    --text-scale-ratio: 1.25;
  }
}


h1, .text-xxl   { font-size: var(--text-xxl, 2.074em); }
h2, .text-xl    { font-size: var(--text-xl, 1.728em); }
h3, .text-lg    { font-size: var(--text-lg, 1.44em); }
h4, .text-md    { font-size: var(--text-md, 1.2em); }
.text-base      { font-size: 1em; }
small, .text-sm { font-size: var(--text-sm, 0.833em); }
.text-xs        { font-size: var(--text-xs, 0.694em); }

BEM in 30 seconds

BEM (Blocks, Elements, Modifiers) is a naming methodology aimed at creating reusable components.

Here’s an example:

<header class="header">
  <a href="https://css-tricks.com/#0" class="header__logo"><!-- ... --></a>
  <nav class="header__nav">
    <ul>
      <li><a href="https://css-tricks.com/#0" class="header__link header__link--active">Homepage</a></li>
      <li><a href="https://css-tricks.com/#0" class="header__link">About</a></li>
      <li><a href="https://css-tricks.com/#0" class="header__link">Contact</a></li>
    </ul>
  </nav>
</header>
  • A block is a reusable component
  • An element is a child of the block (e.g., .block__element)
  • A modifier is a variation of a block/element (e.g., .block--modifier, .block__element--modifier).

Utility classes in 30 seconds

A utility class is a CSS class meant to do only one thing. For example:

<section class="padding-md">
  <h1>Title</h1>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
</section>


<style>
  .padding-sm { padding: 0.75em; }
  .padding-md { padding: 1.25em; }
  .padding-lg { padding: 2em; }
</style>

You can potentially build entire components out of utility classes:

<article class="padding-md bg radius-md shadow-md">
  <h1 class="text-lg color-contrast-higher">Title</h1>
  <p class="text-sm color-contrast-medium">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
</article>

You can connect utility classes to CSS globals:

/* Spacing | Global */
:root {
  --space-unit: 1em;
  --space-xs:   calc(0.5 * var(--space-unit));
  --space-sm:   calc(0.75 * var(--space-unit));
  --space-md:   calc(1.25 * var(--space-unit));
  --space-lg:   calc(2 * var(--space-unit));
  --space-xl:   calc(3.25 * var(--space-unit));
}

/* responsive rule affecting all spacing variables */
@media (min-width: 64rem) {
  :root {
    --space-unit:  1.25em; /* 👇 this responsive decision affects all margins and paddings */
  }
}

/* margin and padding util classes - apply spacing variables */
.margin-xs { margin: var(--space-xs); }
.margin-sm { margin: var(--space-sm); }
.margin-md { margin: var(--space-md); }
.margin-lg { margin: var(--space-lg); }
.margin-xl { margin: var(--space-xl); }

.padding-xs { padding: var(--space-xs); }
.padding-sm { padding: var(--space-sm); }
.padding-md { padding: var(--space-md); }
.padding-lg { padding: var(--space-lg); }
.padding-xl { padding: var(--space-xl); }

A real-life example

Explaining a methodology using basic examples doesn’t bring up the real issues nor the advantages of the method itself.

Let’s build something together! 

We’ll create a gallery of card elements. First, we’ll do it using only the BEM approach, and we’ll point out the issues you may face by going BEM only. Next, we’ll see how Globals reduce the size of your CSS. Finally, we’ll make the component customizable introducing utility classes to the mix.

Here’s a look at the final result:

Let’s start this experiment by creating the gallery using only BEM:

<div class="grid">
  <article class="card">
    <a class="card__link" href="https://css-tricks.com/#0">
      <figure>
        <img class="card__img" src="https://css-tricks.com/image.jpg" alt="Image description">
      </figure>


      <div class="card__content">
        <h1 class="card__title-wrapper"><span class="card__title">Title of the card</span></h1>


        <p class="card__description">Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore, totam?</p>
      </div>


      <div class="card__icon-wrapper" aria-hidden="true">
        <svg class="card__icon" viewBox="0 0 24 24"><!-- icon --></svg>
      </div>
    </a>
  </article>


  <article class="card"><!-- card --></article>
  <article class="card"><!-- card --></article>
  <article class="card"><!-- card --></article>
</div>

In this example, we have two components: .grid and .card. The first one is used to create the gallery layout. The second one is the card component.

First of all, let me point out the main advantages of using BEM: low specificity and scope.

/* without BEM */
.grid {}
.card {}
.card > a {}
.card img {}
.card-content {}
.card .title {}
.card .description {}


/* with BEM */
.grid {}
.card {}
.card__link {}
.card__img {}
.card__content {}
.card__title {}
.card__description {}

If you don’t use BEM (or a similar naming method), you end up creating inheritance relationships (.card > a).

/* without BEM */
.card > a.active {} /* high specificity */


/* without BEM, when things go really bad */
div.container main .card.is-featured > a.active {} /* good luck with that 😦 */


/* with BEM */
.card__link--active {} /* low specificity */

Dealing with inheritance and specificity in big projects is painful. That feeling when your CSS doesn’t seem to be working, and you find out it’s been overwritten by another class 😡! BEM, on the other hand, creates some kind of scope for your components and keeps specificity low.

But… there are two main downsides of using only BEM:

  1. Naming too many things is frustrating
  2. Minor customizations are not easy to do or maintain

In our example, to stylize the components, we’ve created the following classes:

.grid {}
.card {}
.card__link {}
.card__img {}
.card__content {}
.card__title-wrapper {}
.card__title {}
.card__description {}
.card__icon-wrapper {}
.card__icon {}

The number of classes is not the issue. The issue is coming up with so many meaningful names (and having all your teammates use the same naming criteria).

For example, imagine you have to modify the card component by including an additional, smaller paragraph:

<div class="card__content">
  <h1 class="card__title-wrapper"><span class="card__title">Title of the card</span></h1>
  <p class="card__description">Lorem ipsum dolor...</p>
  <p class="card__description card__description--small">Lorem ipsum dolor...</p> <!-- 👈 -->
</div>

How do you call it? You could consider it a variation of the .card__description element and go for .card__description .card__description--small. Or, you could create a new element, something like .card__small, .card__small-p, or .card__tag. See where I’m going? No one wants to spend time thinking about class names. BEM is great as long as you don’t have to name too many things.

The second issue is dealing with minor customizations. For example, imagine you have to create a variation of the card component where the text is center-aligned.

You’ll probably do something like this:

<div class="card__content card__content--center"> <!-- 👈 -->
  <h1 class="card__title-wrapper"><span class="card__title">Title of the card</span></h1>
  <p class="card__description">Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore, totam?</p>
</div>


<style>
  .card__content--center { text-align: center; }
</style>

One of your teammates, working on another component (.banner), is facing the same problem. They create a variation for their component as well:

<div class="banner banner--text-center"></div>


<style>
  .banner--text-center { text-align: center; }
</style>

Now imagine you have to include the banner component into a page. You need the variation where the text is aligned in the center. Without checking the CSS of the banner component, you may instinctively write something like banner banner--center in your HTML, because you always use --center when you create variations where the text is center-aligned. Not working! Your only option is to open the CSS file of the banner component, inspect the code, and find out what class should be applied to align the text in the center.

How long would it take, 5 minutes? Multiply 5 minutes by all the times this happens in a day, to you and all your teammates, and you realize how much time is wasted. Plus, adding new classes that do the same thing contributes to bloating your CSS.

CSS Globals and utility classes to the rescue

The first advantage of setting global styles is having a set of CSS rules that apply to all the components.

For example, if we set responsive rules in the spacing and typography globals, these rules will affect the grid and card components as well. In CodyFrame, we increase the body font size at a specific breakpoint; because we use “em” units for all margins and paddings, the whole spacing system is updated at once generating a cascade effect.

Spacing and typography responsive rules — no media queries on a component level 

As a consequence, in most cases, you won’t need to use media queries to increase the font size or the values of margins and paddings!

/* without globals */
.card { padding: 1em; }


@media (min-width: 48rem) {
  .card { padding: 2em; }
  .card__content { font-size: 1.25em; }
}


/* with globals (responsive rules intrinsically applied) */
.card { padding: var(--space-md); }

Not just that! You can use the globals to store behavioral components that can be combined with all other components. For example, in CodyFrame, we define a .text-component class that is used as a “text wrapper.” It takes care of line height, vertical spacing, basic styling, and other things.

If we go back to our card example, the .card__content element could be replaced with the following:

<!-- without globals -->
<div class="card__content">
  <h1 class="card__title-wrapper"><span class="card__title">Title of the card</span></h1>
  <p class="card__description">Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore, totam?</p>
</div>


<!-- with globals -->
<div class="text-component">
  <h1 class="text-lg"><span class="card__title">Title of the card</span></h1>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore, totam?</p>
</div>

The text component will take care of the text formatting, and make it consistent across all the text blocks in your project. Plus, we’ve already eliminated a couple of BEM classes.

Finally, let’s introduce the utility classes to the mix!

Utility classes are particularly useful if you want the ability to customize the component later on without having to check its CSS.

Here’s how the structure of the card component changes if we swap some BEM classes with utility classes:

<article class="card radius-lg">
  <a href="https://css-tricks.com/#0" class="block color-inherit text-decoration-none">
    <figure>
      <img class="block width-100%" src="https://css-tricks.com/image.jpg" alt="Image description">
    </figure>


    <div class="text-component padding-md">
      <h1 class="text-lg"><span class="card__title">Title of the card</span></h1>
      <p class="color-contrast-medium">Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore, totam?</p>
    </div>


    <div class="card__icon-wrapper" aria-hidden="true">
      <svg class="icon icon--sm color-white" viewBox="0 0 24 24"><!-- icon --></svg>
    </div>
  </a>
</article>

The number of BEM (component) classes has shrunk from 9 to 3:

.card {}
.card__title {}
.card__icon-wrapper {}

That means you won’t deal much with naming things. That said, we can’t avoid the naming issue entirely: even if you create Vue/React/SomeOtherFramework components out of utility classes, you still have to name the components.

All the other BEM classes have been replaced by utility classes. What if you have to make a card variation with a bigger title? Replace text-lg with text-xl. What if you want to change the icon color? Replace color-white with color-primary. How about aligning the text in the center? Add text-center to the text-component element. Less time thinking, more time doing!

Why don’t we just use utility classes?

Utility classes speed-up the design process and make it easier to customize things. So why don’t we forget about BEM and use only utility classes? Two main reasons:

By using BEM together with utility classes, the HTML is easier to read and customize.

Use BEM for:

  • DRY-ing the HTML from the CSS you don’t plan on customizing (e.g., behavioral CSS-like transitions, positioning, hover/focus effects),
  • advanced animations/effects.

Use utility classes for:

  • the “frequently-customized” properties, often used to create component variations (like padding, margin, text-alignment, etc.),
  • elements that are hard to identify with a new, meaningful class name (e.g., you need a parent element with a position: relative → create <div class="position-relative"><div class="my-component"></div></div>).

Example: 

<!-- use only Utility classes -->
<article class="position-relative overflow-hidden bg radius-lg transition-all duration-300 hover:shadow-md [email protected] [email protected]">
  <!-- card content -->
</article>


<!-- use BEM + Utility classes -->
<article class="card radius-lg [email protected] [email protected]">
  <!-- card content -->
</article>

For these reasons, we suggest that you don’t add the !important rule to your utility classes. Using utility classes doesn’t need to be like using a hammer. Do you think it would be beneficial to access and modify a CSS property in the HTML? Use a utility class. Do you need a bunch of rules that won’t need editing? Write them in your CSS. This process doesn’t need to be perfect the first time you do it: you can tweak the component later on if required. It may sound laborious “having to decide” but it’s quite straightforward when you put it to practice.

Utility classes are not your best ally when it comes to creating unique effects/animations.

Think about working with pseudo-elements, or crafting unique motion effects that require custom bezier curves. For those, you still need to open your CSS file.

Consider, for example, the animated background effect of the card we’ve designed. How hard would it be to create such an effect using utility classes?

The same goes for the icon animation, which requires animation keyframes to work:

.card:hover .card__title {
  background-size: 100% 100%;
}


.card:hover .card__icon-wrapper .icon {
  animation: card-icon-animation .3s;
}


.card__title {
  background-image: linear-gradient(transparent 50%, alpha(var(--color-primary), 0.2) 50%);
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 0% 100%;
  transition: background .3s;
}


.card__icon-wrapper {
  position: absolute;
  top: 0;
  right: 0;
  width: 3em;
  height: 3em;
  background-color: alpha(var(--color-black), 0.85);
  border-bottom-left-radius: var(--radius-lg);
  display: flex;
  justify-content: center;
  align-items: center;
}


@keyframes card-icon-animation {
  0%, 100% {
    opacity: 1;
    transform: translateX(0%);
  }
  50% {
    opacity: 0;
    transform: translateX(100%);
  }
  51% {
    opacity: 0;
    transform: translateX(-100%);
  }
}

Final result

Here’s the final version of the cards gallery. It also includes grid utility classes to customize the layout.

File structure

Here’s how the structure of a project built using the method described in this article would look like:

project/
└── main/
    ├── assets/
    │   ├── css/
    │   │   ├── components/
    │   │   │   ├── _card.scss
    │   │   │   ├── _footer.scss
    │   │   │   └── _header.scss
    │   │   ├── globals/
    │   │   │   ├── _accessibility.scss
    │   │   │   ├── _breakpoints.scss
    │   │   │   ├── _buttons.scss
    │   │   │   ├── _colors.scss
    │   │   │   ├── _forms.scss
    │   │   │   ├── _grid-layout.scss
    │   │   │   ├── _icons.scss
    │   │   │   ├── _reset.scss
    │   │   │   ├── _spacing.scss
    │   │   │   ├── _typography.scss
    │   │   │   ├── _util.scss
    │   │   │   ├── _visibility.scss
    │   │   │   └── _z-index.scss
    │   │   ├── _globals.scss
    │   │   ├── style.css
    │   │   └── style.scss
    │   └── js/
    │       ├── components/
    │       │   └── _header.js
    │       └── util.js
    └── index.html

You can store the CSS (or SCSS) of each component into a separate file (and, optionally, use PostCSS plugins to compile each new /component/componentName.css file into style.css). Feel free to organize the globals as you prefer; you could also create a single globals.css file and avoid separating the globals in different files.

Conclusion

Working on large-scale projects requires a solid architecture if you want to open your files months later and don’t get lost. There are many methods out there that tackle this issue (CSS-in-JS, utility-first, atomic design, etc.).

The method I’ve shared with you today relies on creating crosswise rules (globals), using utility classes for rapid development, and BEM for modular (behavioral) classes.

You can learn in more detail about this method on CodyHouse. Any feedback is welcome!



Source link

photograph of a woman with a woven indistinct face
Strategy

Coders Who Survived Human Trafficking Rewrite Their Identiti…


At a family center in downtown Oakland, 11 students are training with two lecturers and two teaching assistants. Toys are strewn on the floor; the school, called AnnieCannons, offers childcare onsite. For the first six weeks, students spin up on basic digital literacy, then they spend up to six months learning programming languages—JavaScript, HTML, CSS—at times working on clients’ projects. The coders are also encouraged to pitch products of their own, and they often come up with ones to help victims of abuse and exploitation. Coding is about identifying problems and finding solutions, says Jessica Hubley, one of the founders of AnnieCannons, a nonprofit that teaches coding to survivors of human trafficking and gender-based violence, and that is something these students have had a lot of experience doing.

Rev tells me she’s worked on CSS animation, CLI GIFs, and a handful of other tech for clients: “DQaaS—data quality as a service—projects were quite regular last year.” Those, she adds, were pretty valuable to stabilizing her income as she got more coding experience. Magical has been at AnnieCannons for a year. “My first web project was EasyTRO, an app that helps survivors of domestic abuse and human trafficking access the documentation needed to file a temporary restraining order.” Voyager was a student in the nonprofit’s third class; she now manages the bulk of the company’s data project work.

In recent years, Catie Hart has spent her time both as a lecturer at AnnieCannons and as a human trafficking adviser to places like the San Francisco Police Department, Shasta County, and UC Davis. But when she was 18, Hart was coerced into sex work by a man she met just after she had arrived in San Francisco. After more than seven years, she broke away, found her way to UC Berkeley, and got a degree in sociology.

“I’ve completed over 200 data management projects, created the donation page for AnnieCannons’ EasyTRO, and cocreated a website for ARC facilities,” says Magical.

Artwork by Alma Haser; Photograph by Maria del Rio

To photograph Rev, Magical, Voyager, Tia, and Maeflower, photographer Maria del Rio shot images from a low angle; she—and collaborator Alma Haser—wanted to create a halo effect, reminiscent of Renaissance paintings. Del Rio then sent the files to Haser in East Sussex, UK, who printed the portraits in her studio and wove pieces of the images together to make a collage that would preserve the coders’ anonymity. Most of the developers at AnnieCannons assume a pseudonym—as a safety precaution, as well as a symbol of a new identity.

“I was part of cohort 3 in 2017,” Voyager says. “I worked as a contractor in 2018. I became an employee in 2019.”

Artwork by Alma Haser; Photograph by Maria del Rio

Tia recently graduated from AnnieCannons and is now a teacher’s assistant for the current class. She hopes to start working on clients’ projects soon.

Artwork by Alma Haser; Photograph by Maria del Rio

These days Hart, who is now 40, is cutting back from speaking engagements and spending more time at AnnieCannons. “For the first time in my life,” she tells me, “I have shed survivor or victim as my identity. I was having to survive on being a ‘survivor,’ because that’s how I was making money, speaking about what happened to me. Now I want to talk about coding.”

“Because I’m an independent contractor, I pretty much make my hours depending on project deadlines. So I can work anywhere from 5 to 8 hours on a good coding day. That being if nothing breaks,” says Maeflower.

Artwork by Alma Haser; Photograph by Maria del Rio


LYDIA HORNE (@lyderature) is the editorial business manager at WIRED.

This article appears in the May issue. Subscribe now.

Let us know what you think about this article. Submit a letter to the editor at mail@wired.com.





Source link

Thermonuclear Experimental Reactor
Strategy

Fusion Energy Gets Ready to Shine—Finally


Until 1920, humans had no real sense of how the sun and stars create their vast amounts of energy. Then, in October of that year, Arthur Stanley Eddington, an English astrophysicist, penned an essay elegantly titled “ The Internal Constitution of the Stars.” “A star is drawing on some vast reservoir of energy by means unknown,” he wrote. “This reservoir can scarcely be other than the sub-atomic energy which, it is known, exists abundantly in all matter; we sometimes dream that man will one day learn how to release it and use it for his service.”

From that moment, scientists began the quest to harness unlimited, carbon-free power on earth. They’ve built more than 200 reactors that have tried to slam hydrogen atoms together and release fusion energy. It’s a dream perennially called delusional, impossible, and “always 20 years away.” In 1985, recognizing that no country had the will to solve the world’s most complicated puzzle alone, Ronald Reagan and Mikhail Gorbachev called for an international effort to give it a go.

In 1988, engineers began designing the International Thermonuclear Experimental Reactor, now just ITER. Along the way, 35 nations have split the $23.7 billion price tag to construct its 10 million parts. Now, surrounded by vineyards in France’s Saint-Paul-lès-Durance, the 25,000-ton machine is set to be flipped on in 2025.

This Poloidal Field Coil Winding Facility is one of 39 buildings on ITER’s 445-acre campus. Since the isotopes creating the fusion energy will be 10 times hotter than the sun, two layers of magnetic coils ringing the machine will keep them caged within. That silver doughnut is a cryogenic chamber that will stress-test the coils.

Photograph: ALASTAIR PHILIP WIPER

The isotopes butting heads will be deuterium and tritium. To get the atoms whipping around the inner chamber of the Russian-nesting-doll-like machine, a magnet will drive 15 million amperes of electricity through them. They’ll also be zapped by 24 microwave generators and three semitruck-sized particle guns, until they reach 270 million degrees F and, avec optimisme, crash into each other, releasing heaps of energy. There’s no guarantee ITER will achieve fusion by 2035, as scheduled. But Edward Morse, who teaches nuclear engineering at UC Berkeley, says it’s the “only viable” hope we have to secure the energy we’ll need over the next millennia: “It’s Rosemary’s baby. We have to pray for Rosemary’s baby.” And if it fails? As Eddington wrote, if man “is not yet destined to reach the sun and solve for all time the riddle of its constitution, yet he may hope to learn from his journey some hints to build a better machine.”


LAURA MALLONEE (@LauraMallonee) writes about photography for WIRED.

This article appears in the May issue. Subscribe now.


More Great WIRED Stories





Source link

Post image
Strategy

Designed and created this website that lets you spend Jeff B…


Hey all. I created this website that lets you spend Jeff Bezos’ money on expensive items.

link: https://3pic.github.io/money

Examples of items:

– Supercars – Mansions – Houses – Falcon 9 Rocket – Tesla – Etc

You can even end homelessness & world hunger

Anyways, I was wondering. How does the design look on the website? I’m mostly a backend person and only recently have started focusing on how my websites look in the internet.

Let me know of any suggestions.

And .. tell me what you bought!

Post image

Screenshot excerpt



Source link