DEV Community

Cover image for Weekly Digest 32/2021
Marco Biedermann
Marco Biedermann

Posted on

Weekly Digest 32/2021

Welcome to my Weekly Digest #32 which will be a little shorter this time.

This weekly digest contains a lot of interesting and inspiring articles, videos, tweets, podcasts, and designs I consumed during this week.


Interesting articles to read

A guide to designing accessible, WCAG-compliant focus indicators

This guide is aimed at both designers who want to learn about accessibility considerations for designing focus indicators, as well as developers who want to implement them.

A guide to designing accessible, WCAG-compliant focus indicators

JavaScript needs more helper functions for iteration – where should we put them?

Iteration is a standard that connects operations with data containers: Each operation that follows this standard can be applied to each data container that implements this standard.

JavaScript needs more helper functions for iteration (map, filter, etc.) - where should we put them?

The World of CSS Transforms

The “transform” property is such a powerful part of the CSS language! In this blog post, we'll take a deep look at this property and see some of the nifty things it can do.

The World of CSS Transforms


Some great videos I watched this week

Supercharge GitHub Issues with this new feature

Create issues, break them into tasks, track relationships, add custom fields, and have conversations. Visualize large projects as spreadsheets or boards, and automate everything with code.

by GitHub

Understanding Semantic Versioning with Real-World Examples

Semantic Versioning, or semver for short, is one of those systems that's used all the time by developers but often not understood. It's one of those systems that just sorta works and you don't have to think about it too much, but it actually helps a lot to take some time and understand what the numbers mean and the implications of updating to a new version.

by Jimmy Cleveland

Centering with Negative Transforms… and Sensible Wrapping!

As we'll see at the end of this quick video: fit-content is our friend for sizing content that is no larger than the intrinsic width but also can shrink without forcing anything with weird side effects like preventing line-wrapping.

by Chris Coyier

Weird URL Protocols

Ever wondered what URL protocols are out there?

by ThioJoe

Thinking on ways to solve SWITCHES

In today's GUI challenge I share my thinking on a way to solve a switch. A tiny, UX-packed component that ended up being one of the most involved challenges so far. Tons of great layouts, accessibility, animations, and interactions to share, which means tons of places for you to have a style preference

by Adam Argyle


Useful GitHub repositories

PostCSS Custom Media

PostCSS Custom Media lets you use Custom Media Queries in CSS, following the CSS Media Queries specification.

GitHub logo postcss / postcss-custom-media

Use Custom Media Queries in CSS, following the CSS Media Queries specification

PostCSS Custom Media PostCSS

NPM Version CSS Standard Status Build Status Support Chat

PostCSS Custom Media lets you use Custom Media Queries in CSS, following the CSS Media Queries specification.

@custom-media --small-viewport (max-width: 30em);

@media (--small-viewport) {
  /* styles for small viewport */
}

/* becomes */

@media (max-width: 30em) {
  /* styles for small viewport */
}
Enter fullscreen mode Exit fullscreen mode

Usage

Add PostCSS Custom Media to your project:

npm install postcss-custom-media --save-dev
Enter fullscreen mode Exit fullscreen mode

Use PostCSS Custom Media to process your CSS:

const postcssCustomMedia = require('postcss-custom-media');

postcssCustomMedia.process(YOUR_CSS /*, processOptions, pluginOptions */);
Enter fullscreen mode Exit fullscreen mode

Or use it as a PostCSS plugin:

const postcss = require('postcss');
const postcssCustomMedia = require('postcss-custom-media');

postcss([
  postcssCustomMedia(/* pluginOptions */)
]).process(YOUR_CSS /*, processOptions */);
Enter fullscreen mode Exit fullscreen mode

PostCSS Custom Media runs in all Node environments, with special…


dribbble shots

Skinclean website design

https://cdn.dribbble.com/users/1998175/screenshots/16245410/media/e9828288d4a834322b1b838e952cc552.jpg

by Taras Migulko

Mobile App - Lamp Product

https://cdn.dribbble.com/users/4588540/screenshots/16243929/media/430745b49a20f462bbfbdabc77b542f9.png

by Raffialdo Bayu

Web Header Design

https://cdn.dribbble.com/users/6682392/screenshots/16245344/media/554f62823c25a6bd29c215e43c3d224e.png

by Orix Agency

Modern Logo And Branding

https://cdn.dribbble.com/users/6513549/screenshots/16243936/media/d90ffad434decc7b941d7852c859bbee.jpg

by Majarul


Tweets


Picked Pens

Generative SVG Noise Pattern Maker 🎨

by George Francis


Podcasts worth listening

Syntax – TypeScript Utility Types

In this Hasty Treat, Scott and Wes talk about TypeScript utility types — what they are, why you might use them, why they exist, and more!

Syntax – How to Build a Website

In this episode of Syntax, Scott and Wes talk about the basics of building a website — how to get started for beginners!

CodePen Radio – Large Scale Planning

Chris and Klare chat about the incredibly daunting task of planning a project that is huge and long-term.


Thank you for reading, talk to you next week, and stay safe! 👋

Discussion (0)