On a 4-core machine, running all our tests sequentially would take 3 days, 15 hours, 10 minutes, and 3 seconds. It’s extremely difficult to run a subset of tests since we’ve built a pure monolith with deeply interwoven concerns, so we run every test on every push of every PR … in only 18 minutes!

CSS specificity as image 👍

You're encountering a flexbox default setting.

A flex item cannot be smaller than the size of its content along the main axis.

The defaults are...

• min-width: auto
• min-height: auto
  ...for flex items in row-direction and column-direction, respectively.

display: contents is underrated: it removes the box layout of the element!

grid-row or grid-column only works on explicit layout: workaround at 18:55

#idea #project make a UI for it !

Headings are not focusable because they are not interactive, as long as the headings are not links… ;)

Here an example of how to make focused element transition on focus:

section:focus {
  outline: 0;
  animation: yellowFade 3s forwards;
}
@keyframes yellowFade {
  from { background: lightYellow; }
  to   { background: white; }
}

and the code example: https://codesandbox.io/s/css-grid-blog-bonus-v2-nn7t2

You can put the capture attribute on inputs with the type of file, and you can give it a value of “user” or “environment“. The interesting thing about the capture attribute is for users coming to your website on a mobile device. If they interact with that input, instead of opening up the default file picker, it will actually open up one of their cameras.

Read the reference: https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/capture

Search through code source of Github, crates.io, JVM, ChakraUI, ...

👍

Séparer les dépendances au maximum

Improved list designs. It's refreshing.

I was also struggling with it:
const multilineStrings = 'This is a\n' + 'multiline\n' + 'strings';
or
const multilineStrings = ['This is a', 'multiline', 'strings'].join('\n');
or
``const multilineStrings =This is a
multiline
strings`;

It's hard to debate about the best technologies. So here are a summary of the arguments of the author.

Main Argument: React isn't great at anything except being popular.

• React is good.
• React laid down the groundwork for other web frameworks. Vue 3 and React hooks, Svelte's conventions from React, Nuxt from Next, ... The component based-model owes much to React-
• React’s greatness is more in what it meant at the time than what it currently is today, absent that context
• React has aged. And I don't think most people—particularly those using it regularly—realize how much or how poorly. → when you live in the React world, you only see improvements. It shields you from React's velocity compared to other frameworks.
• React doesn’t do anything better than other frameworks.

On a greenfield project, how do you make the call on the front-end framework you'll use for the next several years? Things to consider:

• Performance → Vue, Svelte, Solid, Inferno and a host of others generally provide markedly better performance than React.
• Learning curve → JSX allows HTML into a JS function. The only thing worse than using JSX with React is not using JSX with React. Many things other front-end frameworks handle for you or make trivially easy require manual intervention or significant boilerplate. React is built for Facebook, others frameworks for the world.
• Bundle size: not the smallest
• Scalability: React doesn’t have anything special here; it just has the most examples.
• Community and support: does not mean a better choice. A big community can be a downside, too, especially in the case of a so-called “unopinionated” framework such as React. It can mean too many packages to choose from, and too many different, competing opinions that you’ll have to decide between and take a stance on.
• Financial backing: Vue is one of the most successful and well-funded open-source projects in history. [Through examples] backing is not an issue among major front-end frameworks
• Developer experience: React placed behind both Solid and Svelte in terms of satisfaction in this year’s State of JS Survey results. React also placed behind Svelte, Solid and Vue in terms of interest React's satisfaction and interest have been declining steadily for years, while its usage has flatlined.
• Hireability: This is the one area where React definitively comes out ahead. If you need to hire a dev who knows your thing already, React is clearly the choice.
• vs Competitors: But bear in mind that choice also gives you absolutely no tech advantage over your competitors. They’re all (mostly) using React, too.

Why react stays on top?
Because we don’t always value the strongest choice as much as we value consensus.
One other thought here: it’s possible we’re already moving past React, but we just can’t see it at a high level yet.

Create Beautiful Fullscreen Scrolling Websites

fullPage.js is designed to be easy to use and customize. It includes tens of examples, great documentation, and both community and personal support.

The project is useful websites similar to slides or demos.

Avoiding media queries is possible but unreadable.

Some SCSS mixins make it more readable though: https://github.com/ryevych/adaptiveValueFunction/blob/main/scss/adaptiveValueFunction.scss

Web Content Accessibility Guidelines Success Criterion 2.4.4: Link Purpose (In Context) instructs us to ensure that a link’s accessible name makes sense when separated from its surrounding context. It’s why “learn more about elephants” is a far more effective link name than “click here.”

Cool to know.

This is all about maintaining an equivalent experience by not over-describing something for only a certain subset of people. Here, the goal is to preserve the author’s intentional act of creating a sense of curiosity, regardless of the way someone interacts with technology.

User-facing state is what someone experiences when they interact with (or try to interact with) an element in some capacity. It is reactive, helping to communicate the ways in which something can be manipulated.

It is also worth noting that on the web, the majority of user-facing state can be communicated programatically. This means that there is an HTML attribute or ARIA declaration that can ensure people who can’t see the content can understand the state something has been set to.

It is different from the application state.

The states:

• resting: the status of something before someone has interacted with it, or other content affects it. Oftentimes referred to as “Base” or “Default.”
• hovered
• active
• focused
• visited
• loading / loaded
• disabled
• hidden
• readonly
• enabled
• checked: marked for sending as data to another internal or external resource. Can be focused, but keeps it's selected state after focus is moved
• unchecked
• undeterminate
• selected / deselected
• dragged / dropped
• collapsed / expanded
• resizing
• dirty: an editable element that has been manipulated on one or more occurences
• pristine: editable element has yet to be manipulated by someone
• saving
• overflowing
• scrolling
• playing / paused / stopped
• sticky
• unstuck: sticky element removed from a side of the viewport back it its original position

Find unused dependencies: npx depcheck

Or install the package and run the command.

There is also npm-check that checks for outdated, incorrect, and unused dependencies.

Two good examples are provided :)