DEV Community


Weekly Links For 19-25/06/2020

lgutweter profile image Lior Gutweter Originally published at on ・3 min read


Styling Layout Wrappers In CSS

Things to notice:

  • 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.

An in-depth beginner’s guide to testing React applications

Things to notice:

  • 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.

An Overview of Scroll Technologies

Things to notice:

  • 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.

Selection controls — UI component series

Things to notice:

  • 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:

Release v2.0.0 · react-query

Things to notice:

  • 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.

What’s New In DevTools (Chrome 85)

Things to notice:

  • You can now edit styles that were written by CSS-in-JS.
  • There is a new lighthouse version.
  • It supports some new JavaScript features like optional chaining.
  • You can copy the entire current line on the console without selecting it.

Design updates to repositories and GitHub UI

Things to notice:

  • 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.

Discussion (0)

Forem Open with the Forem app