DEV Community

Marco Biedermann
Marco Biedermann

Posted on • Updated on

Weekly Digest 05/2021

#css #javascript #typescript #layout

Welcome to my first weekly digest of February 🌨️.

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

Interesting articles to read

4 Weird Tricks To Become A 10x Flexbox Engineer

Do you ever find yourself trying stuff out until they work? Did you make css-tricks’ guide to flexbox your default new-tab page (or even better, purchase the poster)?

If so, these tricks are for you!

Maybe you’re not going to become a 10x engineer like I promised. I do promise, however, that you’ll get more confident when authoring and debugging flexbox layouts in DevTools.

patrick / articles

v2.32 (February 2021 #1)

Gatsby v2.32

✨Stable API, art direction support, and improved defaults in beta image plugin.
✨Support for beta image plugin with Contentful.
✨Performance improvements for larger sites (10,000+ pages).

Gatsby

10 bad TypeScript habits to break this year

TypeScript and JavaScript have steadily evolved over the last years, and some of the habits we built over the last decades have become obsolete. Some might never have been meaningful. Here's a list of 10 habits that we all should break.

10 bad TypeScript habits to break this year

Designing Better Tooltips For Mobile User Interfaces

Tooltips are powerful design patterns implemented to enhance the design experience by providing additional information precisely when users need it. In this article, we show you how to design tooltips that will amplify your mobile designs and explain where mobile tooltips are most effective.

Designing Better Tooltips For Mobile User Interfaces - Smashing Magazine

What's new in ECMAScript 2021

This week’s TC39 meeting concluded with a complete list of ECMAScript 2021 features. Similarly, how I do it every year, let’s have a look at what’s coming this year. I also prepared for you a few code examples.

What's new in ECMAScript 2021 | pawelgrzybek.com

Some great videos I watched this week

The Past, Present, and Future of CSS-in-JS

Max Stoiber, creator of styled-components and react-boilerplate, talks about what is CSS-in-JS, why do people use it, how has it come as far as it has and where is it going.

by Max Stoiber

Angles and Vectors - Nature of Code

In this video, I tackle a common question, how do you make an object point in the direction it's moving? I demonstrate how to get the angle of a vector and create an vector from an angle in p5.js.

by Daniel Shiffman

unknown, never, and void in TypeScript

by William Candillon

A New Way to Look at Fibonacci Numbers

A look at how Pisano periods and the modulo function can turn the Fibonacci sequence into strange and fun visual designs.

by Jacob Yatsko

Useful GitHub repositories

Type

High-quality types can help improving projects' maintainability while avoiding potential bugs.

There are a bunch of awesome type utility libraries may boosting your works on types, like ts-toolbelt, utility-types, SimplyTyped, etc, which you can already use.

https://raw.githubusercontent.com/type-challenges/type-challenges/master/screenshots/logo-light.png

GitHub logo type-challenges / type-challenges

Collection of TypeScript type challenges with online judge

Collection of TypeScript type challenges
Now supports TypeScript 4.1 🎉


English | 简体中文 | 日本語

Intro

by the power of TypeScript's well-known Turing Completed type system

High-quality types can help improving projects' maintainability while avoiding potential bugs.

There are a bunch of awesome type utility libraries may boosting your works on types, like ts-toolbelt, utility-types, SimplyTyped, etc, which you can already use.

This project is aimed at helping you better understand how the type system works, writing your own utilities, or just having fun with the challenges. We are also trying to form a community that you can ask questions and get answers you have faced in the real world - they may become part of the challenges!

Challenges

Click the following badges to see details of the challenges.

1
13・Hello World

10
4・Pick 7・Readonly 11・Tuple to Object 14・First of Array 18・Length of Tuple 43・Exclude 189・Awaited 268・If 533・Concat 898・Includes

30
2・Get Return Type 3・Omit 8・Readonly 2 9・Deep Readonly 10・Tuple to Union 12・Chainable Options 15・Last of Array 16・Pop 20・Promise.all 62・Type Lookup 106・Trim Left 108・Trim 110・Capitalize 116・Replace 119・ReplaceAll 191・Append Argument 296・Permutation 298・Length of String 459・Flatten 527・Append to object 529・Absolute 531・String to Union 599・Merge 610・CamelCase 612・KebabCase 645・Diff 949・AnyOf 1042・IsNever 1097・IsUnion 1130・ReplaceKeys

22
6・Simple Vue 17・Currying 1 55・Union to Intersection 57・Get Required 59・Get Optional 89・Required Keys 90・Optional Keys 112・Capitalize Words 114・CamelCase 147・C-printf Parser 213・Vue Basic Props 223・IsAny 270・Typed Get 300・String to Number 399・Tuple Filter 472・Tuple to Enum Object 545・printf 553・Deep object to unique 651・Length of String 2 730・Union to Tuple 847・String Join 956・DeepPick

12
5・Get Readonly Keys 151・Query String Parser 216・Slice 274・Integers Comparator 462・Currying 2 476・Sum 517・Multiply 697・Tag 734・Inclusive Range 741・Sort 869・DistributeUnions 925・Assert Array Index

By Tags
#application 12・Chainable Options 6・Simple Vue 213・Vue Basic Props
#arguments 191・Append Argument
#array 14・First of Array 533・Concat 898・Includes 15・Last of Array 16・Pop 20・Promise.all 459・Flatten 949・AnyOf 17・Currying 1 216・Slice 734・Inclusive Range 741・Sort 925・Assert Array Index
#built-in 4・Pick 7・Readonly 43・Exclude 2・Get Return Type 3・Omit 20・Promise.all
#deep 9・Deep Readonly 553・Deep object to unique 956・DeepPick
#infer 2・Get Return Type 10・Tuple to Union 55・Union to Intersection 57・Get Required 59・Get Optional 399・Tuple Filter 730・Union to Tuple 734・Inclusive Range 741・Sort
#map 62・Type Lookup
#math 529・Absolute 274・Integers Comparator 476・Sum 517・Multiply
#object 599・Merge 645・Diff
#object-keys 7・Readonly 8・Readonly 2 9・Deep Readonly 527・Append to object 5・Get Readonly Keys
#promise 189・Awaited
#readonly 7・Readonly 8・Readonly 2 9・Deep Readonly
#string 531・String to Union
#template-literal 106・Trim Left 108・Trim 110・Capitalize 116・Replace 119・ReplaceAll 298・Length of String 529・Absolute 610・CamelCase 612・KebabCase 112・Capitalize Words 114・CamelCase 147・C-printf Parser 270・Typed Get 300・String to Number 472・Tuple to Enum Object 545・printf 651・Length of String 2 151・Query String Parser 274・Integers Comparator 476・Sum 517・Multiply
#this 6・Simple Vue
#tuple 18・Length of Tuple 10・Tuple to Union 399・Tuple Filter 472・Tuple to Enum Object 730・Union to Tuple
#union 4・Pick 3・Omit 10・Tuple to Union 62・Type Lookup 296・Permutation 531・String to Union 1042・IsNever 730・Union to Tuple
#utils 268・If 1042・IsNever 55・Union to Intersection 57・Get Required 59・Get Optional 89・Required Keys 90・Optional Keys 223・IsAny 270・Typed Get 5・Get Readonly Keys
#vue 6・Simple Vue 213・Vue Basic Props
          

✨ Upcoming challenges

Recommended Readings

Official

View on GitHub

tooling.report

It's a quick way to determine the best build tool for your next web project, or if tooling migration is worth it, or how to adopt a tool's best practice into your existing configuration and code base.

GitHub logo GoogleChromeLabs / tooling.report

tooling.report a quick way to determine the best build tool for your next web project, or if tooling migration is worth it, or how to adopt a tool's best practice into your existing configuration and code base.

What is tooling.report?

It's a quick way to determine the best build tool for your next web project, or if tooling migration is worth it, or how to adopt a tool's best practice into your existing configuration and code base.

To get set up

npm install
Enter fullscreen mode Exit fullscreen mode

To dev

npm run dev
Enter fullscreen mode Exit fullscreen mode

This starts the build in watch mode, and starts an HTTP server.

To build for production

npm run build
Enter fullscreen mode Exit fullscreen mode

Project shape

  • lib - Various scripts and plugins for the build.
  • static-build - this script runs at the end of the build process and generates HTML.
  • client - All client-side JS goes here. It doesn't need to go here, but it keeps it separate from the static generation JS.
  • tests - Markdown for all the tests and results - see below.

Test structure

A test directory contains:

  • index.md - Describes the test or test category. Must include title in the…
View on GitHub

dribbble shots

Rungon - Music Streaming Dashboard

https://cdn.dribbble.com/users/3860505/screenshots/15060139/media/bdec93527b1e4f8442fa1b02cb5740c4.png

by Choirul Syafril

Photo Gallery App

https://cdn.dribbble.com/users/5031392/screenshots/15046479/media/08720cc5f8607bbdd40d90cac21626db.png

by Purrweb UI

Flight Ticket Booking App | Part 3

https://cdn.dribbble.com/users/6462782/screenshots/15067562/media/ac091faa796e89910ec43ee74b181a7e.png

by Armin Mohammadi

Hammer Construction Logo

https://cdn.dribbble.com/users/6898095/screenshots/15066663/media/6a71393836a207e16b7ce2809431055c.png

by GRAFAST DESIGN

Tweets

Picked Pens

#PureCSS - Responsive Elon Musk Portrait

by Asyraf Hussin

Lockdown Fun: Pascal’s Triangle

by Mads Stoumann

Inverted Colors

by Marco Biedermann

Talk to you next week and stay safe! 👋

Top comments (0)

Read next

jenlooper profile image

Build a 'Green' Browser Extension

Jen Looper -

leemeganj profile image

Building web-based terminal components with Termino.js

Megan Lee -

chaoocharles profile image

🎉🎉 E-commerce product page in HTML, CSS and JavaScript - Frontend Mentor Challenge

Chaoo Charles -

jarvisscript profile image

Total Eclipse JavaScript

Chris Jarvis -