Welcome to my Weekly Digest #17 of this year.

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 combined CSS-aspect-ratio-grid

Recently I was faced with the following problem. I had to build a layout that consists of several rows. In each row are two images with a fixed aspect ratio. The two images should have the same height and fill the entire row.

Building a combined CSS-aspect-ratio-grid

Figma plugin for Storybook

Integrate design and code to speed up your team

Figma plugin for Storybook

Some great videos I watched this week

TypeScript Congress 2022

Live stream of TypeScript Congress 2022

by GitNation

Perl in 100 Seconds

Perl is a dynamic scripting language popular among system administrators and web developers. It is syntactically similar to the C Programming Language, but designed for efficient text processing tasks.

by Fireship

Useful GitHub repositories

click-to-component

Option+Click a Component in the browser to instantly go to the source in your editor.

ericclemmons / click-to-component

Option+Click React components in your browser to instantly open the source in VS Code

Option+Click a Component in the browser to instantly goto the source in your editor.

Features

Option+Click opens the immediate Component's source
Option+Right-click opens a context menu with the parent Components' props, fileName, columnNumber, and lineNumber
Works with frameworks like Next.js Create React App & Vite that use @babel/plugin-transform-react-jsx-source
Supports vscode & vscode-insiders' URL handling
Automatically tree-shaken from production builds
Keyboard navigation in context menu (e.g. ←, →, ⏎)
More context & faster than using React DevTools:

Installation

npm

npm install click-to-react-component

pnpm

pnpm add click-to-react-component

yarn

yarn add click-to-react-component

Even though click-to-react-component is added to dependencies, tree-shaking will remove click-to-react-component from production builds.

Usage

Create React App

/src/index.js

+import { ClickToComponent } from 'click-to-react-component';
 import React from 'react'
 import ReactDOM from 'react-dom/client';
 import './index.css';
@@ -8,7 +7,6 @@ import reportWebVitals from './reportWebVitals';
 const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(
   <React.StrictMode>
+

…

View on GitHub

Yank Note

A Hackable Markdown Note Application for Programmers. Version control, AI completion, mind map, documents encryption, code snippet running, integrated terminal, chart embedding, HTML applets, plug-in, and macro replacement.

purocean / yn

A Hackable Markdown Note Application for Programmers. Version control, AI completion, mind map, documents encryption, code snippet running, integrated terminal, chart embedding, HTML applets, plug-in, and macro replacement.

Yank Note

A hackable markdown note application for programmers Download | Try it Online >>>

Not ecommended

English | 中文说明

[toc]{level: [2]}

Highlights

Easy to use: Use Monaco kernel, optimize for Markdown editing, and have the same editing experience as VSCode.
Powerful: Support version control; Applets, runnable code blocks, tables, PlantUML, Drawio, macro replacements, etc., can be embedded in the document; support for OpenAI auto completion.
High compatibility: Data is saved as local Markdown files, and the extension functions are implemented in the original syntax of Markdown as far as possible.
Plug-in extension: Support users to write their own plug-ins to expand the functionality of the editor.
Encryption supported: Use encryption to save private files such as account number, and the password can be set separately for each file.

Attention

For more extendable, Yank Note sacrifices security protection (command execution, arbitrary file reading and writing). If you want to use…

View on GitHub

Wireit

Wireit upgrades your npm scripts to make them smarter and more efficient.

google / wireit

Wireit upgrades your npm scripts to make them smarter and more efficient.

Wireit upgrades your npm scripts to make them smarter and more efficient.

Features

🙂 Use the npm run commands you already know
⛓️ Automatically run dependencies between npm scripts in parallel
👀 Watch any script and continuously re-run on changes
🥬 Skip scripts that are already fresh
♻️ Cache output locally and remotely on GitHub Actions for free
🛠️ Works with single packages, npm workspaces, and other monorepos

Alpha

🚧 Wireit is alpha software — in active but early development. You are welcome to try it out, but note there a number of missing features and issues that you may run into! 🚧

Install

…

View on GitHub

dribbble shots

Tweets

Nx

@nxdevtools

Yesterday @lernajs updated their README to highlight the fact that the project is not actively maintained anymore.
Lerna has been a pioneer in the JS monorepo space.

Thanks to all maintainers for all the hard open source work & for pushing monorepos forward ❤️
#monorepo #lernajs

15:00 PM - 28 Apr 2022

Stefan Judis

@stefanjudis

Yes please! 👇🙇‍♂️

03:38 AM - 29 Apr 2022

Addy Osmani

@addyosmani

The "Software Engineering at Google" book is now free to read online: bit.ly/swe-book. Great insights on improving code quality & scaling engineering teams.

06:43 AM - 01 May 2022

Picked Pens

Linear-style Cursor Glow

by David Khourshid

3D Range Slider

by Jon Kantner

Podcasts worth listening

Syntax – JavaScript × STUMP’D

In this episode of Syntax, Wes and Scott ask each other hiring questions asked of JavaScript developers in job interviews.

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

Weekly Digest 17/2022

Marco Biedermann

Interesting articles to read

Building a combined CSS-aspect-ratio-grid

Figma plugin for Storybook

Some great videos I watched this week

TypeScript Congress 2022

Perl in 100 Seconds

Useful GitHub repositories

click-to-component

ericclemmons / click-to-component

Option+Click React components in your browser to instantly open the source in VS Code

Features

Installation

Usage

Yank Note

purocean / yn

A Hackable Markdown Note Application for Programmers. Version control, AI completion, mind map, documents encryption, code snippet running, integrated terminal, chart embedding, HTML applets, plug-in, and macro replacement.

Yank Note

Highlights

Attention

Wireit

google / wireit

Wireit upgrades your npm scripts to make them smarter and more efficient.

Features

Alpha

🚧 Wireit is alpha software — in active but early development. You are welcome to try it out, but note there a number of missing features and issues that you may run into! 🚧

Contents

Install

dribbble shots

Tricks.ai Mobile

NFT Website Page

Navigation UI design templates

Tweets

Picked Pens

Linear-style Cursor Glow

3D Range Slider

Podcasts worth listening

Syntax – JavaScript × STUMP’D

Join Our Newsletter. No Spam, Only the good stuff.

Related