Weekly Links For 19-25/06/2020

#webdev #weekly

Articles

There is a aside HTML element.
Single responsibility - add more HTML elements if your current element has several roles.
Avoid shorthand properties that may override longhand properties.
Using !important is good for utility classes.
display: contents; removes the box of the element from the CSS flow.

It is better to write tests from the user perspective, and not check implementation details.
You can use the screen.debug API to print to the console the whole HTML that is currently rendered or the HTML of a specific element.
There are a lot of query APIs that you can use, but getByRole is the favored one. You can know the role by this table. You can specify a name parameter which contains the text of the element.
If there is no role(div for example), you can use getByText.
It is recommended to use the user-event library for simulating real user events.
You should use the getBy queries when the element to search should be seen right away on the render, and findBy queries when the element should be seen asynchronously.

When a scrolling is executed, you may want a certain behavior. For example, sticky elements(position: sticky), move elements in a different speed(parallex), and snapping to a specific scroll position(scroll-snap)
Different techniques for listening to scroll: IntersectionObserver API and the onScroll event.
Scrolling libraries: ScrollMagic, ScrollScene(a wrapper of ScrollMagic) and ScrollTrigger.

There are a lot of selection controls - need to carefully think when to use each one
Should handle states of the controls - enabled/disabled/hover/focus when they are selected or not selected.
A checkbox is better than a toggle when the action doesn’t take effect immediately.
A radio group is better than a dropdown when the number of options is small.

WWDC 2020

Things to notice:

The full keynote with most of the announcements.
OSX series is done.
You can read about the new macOS11 Big Sur here and here.
Apple is starting to use its processors instead of Intel processors.
Safari will adopt an API similar to WebExtensions API so you can write one code for a browser extension which will work on all the major browsers.

This is a popular library that handles fetching and caching of remote data in React.
Last week a new major version was released with a cleaner API and some new features.
There is another popular library, swr, which competes with it. You can read more about the swr library here.

It has improved responsive layout and mobile web experience
There is a new sidebar on the right side of the repository homepage which contains some general data about it.
As a repository owner, you can configure what information will be shown in the new repository sidebar.