Weekly Digest 19/2022

Welcome to my Weekly Digest #19.

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

Building a Design System from scratch

A deep dive into Maxime’s experience building his own design system that documents his process of defining tokens, creating efficient components, and shipping them as a package.

Building a Design System from scratch - Maxime Heckel's Blog

You Don’t Need A UI Framework

Developers often reach for UI frameworks like Bootstrap or Material UI, hoping that they’ll save a bunch of time and quickly build a professional-looking app. Unfortunately, things rarely work out this way. Let’s talk about it.

You Don't Need A UI Framework - Smashing Magazine

---

Some great videos I watched this week

7 Essential Command Line Tools

Introducing seven command-line tools.

by Tech Craft

NextJS Rendering Methods - Explained (CSR vs SSR vs SSG vs ISR)

There are lots of ways you can render components in NextJS. In this tutorial, we explain and demystify the different methods, SSG vs CSR vs SSR vs ISR, and give you a simple mental model to make a choice.

by Basarat

What's new for the web platform

Una and Jake dive into recently-cross-browser features, and some experimental stuff that's on its way to make web development easier and more powerful.

by Google Chrome Developers

State of CSS

Styling on the web has been moving fast, bringing rich features for container-based styles and layouts, managing color contrast, leveraging device vibrant colors, gradients, and new color spaces for mixing, orchestrating stylesheets, subgrid, inert, :has() selector, and much more. With each browser working in unison to improve stability while also delivering fan-favorite features, 2022 is shaping up to be a huge year for styling.

by Google Chrome Developers

DevTools: State of the Union 2022

See a demo tour of new DevTools features that allow web developers to generate site performance insights, automate user flows, debug design issues, and more.

by Google Chrome Developers

Bringing page transitions to the web

Native apps often feature transitions between states that both look great and help communicate the type of navigation to the user. The bad news: creating transitions between pages on the web is impossible. In-page transitions are possible, but complex. The good news: new APIs are coming to simplify this process, building on top of CSS animations and the web animation API, and it works across navigations!

by Google Chrome Developers

---

Useful GitHub repositories

fklill

Fabulously kill processes. Cross-platform.

sindresorhus / fkill-cli

Fabulously kill processes. Cross-platform.

Fabulously kill processes. Cross-platform.

Works on macOS, Linux, and Windows.

---

^{My open source work is supported by the community}

^{Special thanks to:}

Instant, shareable cloud PostgreSQL database

^{Import any dataset in seconds, share with anyone with a click, try without signing up}

---

Install

npm install --global fkill-cli

Usage

$ fkill --help
    Usage
        $ fkill [<pid|name|:port> …]

    Options
        --force, -f                  Force kill
        --verbose, -v                Show process arguments
        --silent, -s                 Silently kill and always exit with code 0
        --force-timeout <N>, -t <N>  Force kill processes which didn't exit after N seconds

    Examples
        $ fkill 1337
        $ fkill safari
        $ fkill :8080
        $ fkill 1337 safari :8080
        $ fkill

    To kill a port, prefix it with a colon. For example: :8080.

    Run without arguments to use the interactive interface.
    In interactive mode, 🚦n% indicates high CPU usage and 🐏n% indicates high memory usage.
    Supports fuzzy search in the interactive mode.

    The process name

…

View on GitHub

Scrollex

Build beautiful scroll experiences using minimal code

malerba118 / scrollex

Build beautiful scroll experiences using minimal code

Scrollex

A library to help you make beautiful scroll experiences using minimal code.

Docs

https://scrollex-docs.vercel.app/

Demos

https://scrollex-docs.vercel.app/examples

58M67EYSs_T9AnmA.mp4

View on GitHub

Markdoc

A powerful, flexible, Markdown-based authoring framework.

markdoc / markdoc

A Markdown-based authoring system

A powerful, flexible, Markdown-based authoring framework.

Markdoc is a Markdown-based syntax and toolchain for creating custom documentation sites and experiences.
We designed Markdoc to power Stripe's public docs, our largest and most complex content site.

Installation

To get started with Markdoc, first install the library:

npm install @markdoc/markdoc

or

yarn add @markdoc/markdoc

and import it in your app:

const Markdoc = require('@markdoc/markdoc');

or if you are using ESM

import Markdoc from '@markdoc/markdoc';

then use Markdoc in your app or tool:

const doc = `
# Markdoc README

{% image src="/logo.svg" /%}
`;

const ast = Markdoc.parse(doc);
const content = Markdoc.transform(ast);
return Markdoc.renderers.react(content, React);

Check out our docs for more guidance on how to use Markdoc.

Contributing

Contributions and feedback are welcome…

View on GitHub

---

dribbble shots

Timeline Project Management Interface

by Happy Tri Milliarta

Bettermotion Project

by Sepide Moqadasi

Cluster | Team management dashboard

by Zahra Saedi

---

Tweets

Axel Rauschmayer

@rauschma

Web search keyboard shortcut (Google, DuckDuckGo): Press / to jump to the search box.

19:29 PM - 07 May 2022

Jecelyn Yeen

@jecfish

Search files, jump to symbol and line quicker with the command menu + prefix (@ : > !). @ChromeDevTools

Here is how. 👇🏼

23:53 PM - 08 May 2022

Jhey 🔨🐻✨

@jh3yy

⚡️ Speedy CSS Tip! ⚡️

Create funky animated block reveals 🧱

Have a play with ✨ Logical Properties ✨ and use scoped custom properties in your animations 🔥

Hope it's useful! 🤞 Thank you for the feedback 🙏

What shall we do next? 🧐

CodePen link below 👇

18:06 PM - 10 May 2022

Lennart

@lekoarts_de

A feature I worked on for the last bit (with help from @KrComet) shipped in @GatsbyJS 4.14 now 🎉

TypeScript type generation for your GraphQL queries, more details in the release notes: gatsbyjs.com/docs/reference…

12:50 PM - 11 May 2022

Pawel Grzybek

@pawelgrzybek

A quick reminder to all @nodejs async fans. The timers/promises API provides an alternative set of timer functions that return Promise objects. Look!

#nodejs

09:29 AM - 13 May 2022

---

Picked Pens

Cyberpunk(ish) Button

by Nazanin Ashrafi

Another Datepicker

by Aaron Iker

---

Podcasts worth listening

Syntax – 10 Nifty Browser APIs

In this episode of Syntax, Wes and Scott talk about 10 browser APIs you might not be familiar with including getUserMedia, Resize Observer, SpeechRecognition, and more!

10 Nifty Browser APIs

CodePen Radio – *With Micah Godbolt*

Chris got to talk with Micah Godbolt this week! Micah is is a long-hauler at Microsoft working on Design Systems and such.

---

Syntax – NX Monorepos with Victor Savkin

In this supper club episode of Syntax, Wes and Scott talk with Victor Savkin about NX Monorepo development.

---

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