DEV Community

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

Posted on

Weekly Digest 41/2021

Welcome to my Weekly Digest #41 of this year.

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

Interesting articles to read

Storybook on-demand architecture

3x smaller builds & faster load times for built Storybooks

Storybook on-demand architecture

Smart CSS Solutions For Common UI Challenges

Writing CSS has probably never been more fun and exciting than it is today. In this post we’ll take a look at common problems and use cases we all have to face in our work and how to solve them with modern CSS.

Smart CSS Solutions For Common UI Challenges - Smashing Magazine

Some great videos I watched this week

Dart in 100 Seconds

Dart is high-productivity statically-typed programming language capable of targeting multiple platforms. It's used by Flutter to produce fast client apps with an awesome developer experience.

by Fireship

Chrome 95 - What’s New in DevTools

New CSS length authoring tools, hide issues in the Issues tab, improved the display of properties, and more.

by Google Chrome Developers

Vector Dot Product

This video covers the dot product and scalar projection with p5.js and vectors, concepts that Daniel will need for finding the distance between a point and a line which will lead to the path following steering behavior in the next video!

by Daniel Shiffman

Thinking on ways to solve multi-select

In today's GUI challenge I share my thinking on a way to enable users to multi-select. To demonstrate multi-select I've prepared a filterable grid which accepts input from both a -select multiple- and a set of -fieldset- elements. Two multi-select methods yep, each tailored for their use case.

by Adam Argyle

Using ES Modules on CodePen

import and export! They seem like such simple things, but having them in the native language of JavaScript is very powerful. CodePen tries to be helpful with them, and in conjunction with services like Skypack, there is an awful lot you can do.

by CodePen

Useful GitHub repositories

Awesome New

A list of .new domains to perform online actions in one quick action.

GitHub logo yjose / awesome-new

A list of `.new` domains to perform online actions in one quick action.

A list of .new domain to perform online actions in one quick step.


swc-node

Fast TypeScript/JavaScript transformer without node-gyp and postinstall script.

GitHub logo Brooooooklyn / swc-node

Faster ts-node without typecheck

swc-node

🚀 Help me to become a full-time open-source developer by sponsoring me on Github

Fast TypeScript/JavaScript transformer without node-gyp and postinstall script.

Build Status Downloads License

Support matrix

node10 node12 node14 node16
Windows x64
Windows x32
Windows arm64
macOS x64
macOS arm64
Linux x64 gnu
Linux x64 musl
Linux arm gnueabihf
Linux arm64 gnu
Linux arm64 musl
Android arm64
FreeBSD x64

@swc-node/core

Fastest TypeScript transformer.

Detail: @swc-node/core

Benchmark

transform RxJS AjaxObservable.ts to ES2015 & CommonJS JavaScript. Benchmark code: bench

Hardware info:

Model Name: MacBook Pro
Model Identifier: MacBookPro15,1
Processor Name: 6-Core Intel Core i7
Processor Speed: 2.6 GHz
Number of Processors: 1

Bootstrap Icons

Official open source SVG icon library for Bootstrap with over 1,400 icons.

GitHub logo twbs / icons

Official open source SVG icon library for Bootstrap.

Bootstrap logo

Bootstrap Icons

Official open source SVG icon library for Bootstrap with over 1,400 icons
Explore Bootstrap Icons »

Bootstrap · Themes · Blog

Bootstrap Icons preview

Install

Bootstrap Icons are packaged up and published to npm. We only include the processed SVGs in this package—it's up to you and your team to implement. Read our docs for usage instructions.

npm i bootstrap-icons
Enter fullscreen mode Exit fullscreen mode

For those using Packagist, you can also install Bootstrap Icons via Composer:

composer require twbs/bootstrap-icons
Enter fullscreen mode Exit fullscreen mode

Also available in Figma.

Usage

Depending on your setup, you can include Bootstrap Icons in a handful of ways.

  • Copy-paste SVGs as embedded HTML
  • Reference via <img> element
  • Use the SVG sprite
  • Include via CSS

See the docs for more information.

Development

Build Status

Clone the repo, install dependencies, and start the Hugo server locally.

git clone https://github.com/twbs/icons/
cd icons
npm i
npm start
Enter fullscreen mode Exit fullscreen mode

Then open http://localhost:4000 in your browser.

npm scripts

Here are some key scripts…

dribbble shots

T-Ket app

https://cdn.dribbble.com/users/2039805/screenshots/16664248/media/59536129d192b460b056c16789282004.png

by 11Daniyal

Travel App

https://cdn.dribbble.com/users/1684108/screenshots/16668499/media/74d5ea5d1744ac5662580f41b72cb477.jpeg

by QClay

Scooter mobile app

https://cdn.dribbble.com/users/6081502/screenshots/16668775/media/09c737d38f9f26af35d4ce0bb35c37ba.jpg

by Design Hub

Tweets

Picked Pens

one div snow - divtober

by Temani Afif

Single div CSS items that float

by Lynn Fisher

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

Discussion (0)