Weekly Links For 19-25/06/2020
Tags: webdev, weekly
Published: 2020-06-27 14:26:57

---
title: Weekly Links For 19-25/06/2020
published: true
date: 2020-06-27 00:00:00 UTC
tags: webdev, weekly
canonical_url: https://yearn2learn.netlify.app/weekly-links/2020-06-27/
---

## Articles  


**[Styling Layout Wrappers In CSS](https://ishadeed.com/article/styling-wrappers-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](https://jkettmann.com/beginners-guide-to-testing-react/)**  
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](https://github.com/A11yance/aria-query#elements-to-roles). 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](https://github.com/testing-library/user-event) 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](https://css-tricks.com/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`](https://css-tricks.com/creating-sliding-effects-using-sticky-positioning/)), move elements in a different speed([parallex](https://alligator.io/css/pure-css-parallax/)), and snapping to a specific scroll position([`scroll-snap`](https://css-tricks.com/practical-css-scroll-snapping/))
  - Different techniques for listening to scroll: `IntersectionObserver` API and the `onScroll` event.
  - Scrolling libraries: [ScrollMagic](https://github.com/janpaepke/ScrollMagic), [ScrollScene](https://github.com/jonkwheeler/ScrollScene)(a wrapper of ScrollMagic) and [ScrollTrigger](https://greensock.com/scrolltrigger/).


**[Selection controls — UI component series](https://uxdesign.cc/selection-controls-ui-component-series-3badc0bdb546)**  
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.

## News

**[WWDC 2020](https://developer.apple.com/wwdc20/)**  
Things to notice:

  - The [full keynote](https://developer.apple.com/videos/play/wwdc2020/101/) with most of the announcements.
  - [OSX series is done](https://stratechery.com/2020/the-end-of-os-x/).
  - You can read about the new macOS11 Big Sur [here](https://www.apple.com/macos/big-sur-preview/) and [here](https://developer.apple.com/design/human-interface-guidelines/macos/overview/whats-new-in-macos/).
  - [Apple is starting to use its processors instead of Intel processors](https://www.theverge.com/2020/6/22/21295475/apple-mac-processors-arm-silicon-chips-wwdc-2020).
  - [Safari will adopt an API similar to WebExtensions API](https://hacks.mozilla.org/2020/06/welcoming-safari-to-the-webextensions-community/) so you can write one code for a browser extension which will work on all the major browsers.  


**[Release v2.0.0 · react-query](https://github.com/tannerlinsley/react-query/releases/tag/v2.0.0)**  
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](https://github.com/vercel/swr), which competes with it. You can read more about the swr library [here](https://www.smashingmagazine.com/2020/06/introduction-swr-react-hooks-remote-data-fetching/).


**[What’s New In DevTools (Chrome 85)](https://developers.google.com/web/updates/2020/06/devtools)**  
Things to notice:

  - You can now edit styles that were written by CSS-in-JS.
  - There is a [new lighthouse version](https://web.dev/lighthouse-whats-new-6.0/).
  - 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](https://github.blog/changelog/2020-06-23-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.