DEV Community

Cover image for Weekly Digest 17/2022
Marco Biedermann
Marco Biedermann

Posted on

Weekly Digest 17/2022

#javascript #webdev #react #weeklyretro

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.

GitHub logo ericclemmons / click-to-component

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

npm Release

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

Next.js Demo

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

    props

  • 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:

    React DevTools

Installation

npm 
npm install click-to-react-component
Enter fullscreen mode Exit fullscreen mode
pnpm 
pnpm add click-to-react-component
Enter fullscreen mode Exit fullscreen mode
yarn 
yarn add click-to-react-component
Enter fullscreen mode Exit fullscreen mode

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>
+
…
Enter fullscreen mode Exit fullscreen mode
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.

GitHub logo 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 >>>

Download Not ecommended

English | 中文说明

[toc]{level: [2]}

Screenshot

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.

GitHub logo google / wireit

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

wireit

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

Published on npm Build Status

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! 🚧

Contents

Install

…
Enter fullscreen mode Exit fullscreen mode
View on GitHub

dribbble shots

Tricks.ai Mobile

by [Halo Mobile](https://dribbble.com/shots/18145438-Tricks-ai-Mobile)

by Halo Mobile

NFT Website Page

by [Mohammad Reza Farahzad](https://dribbble.com/shots/18143907-NFT-Website-Page-Light)

by Mohammad Reza Farahzad

Navigation UI design templates

by [Roman Kamushken](https://dribbble.com/shots/18142168-Navigation-UI-design-templates-XELA-Dashboard-kit)

by Roman Kamushken

Tweets

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! 👋

Top comments (0)

Read next

paharihacker profile image

React Performance Optimization Techniques: Memoization, Lazy Loading, and More

Rajesh Dhiman -

preethi_p_gowda profile image

Future-Proofing Your Auth0 Integration: Moving from Rules and Hooks to Actions

Preethi Puttegowda -

mywillandprobate profile image

Navigating inheritance disputes: Why you need estate planning solicitors in London

My Will And Probate -

michelledey4you profile image

Created a Npm package for Vite, React Tailwindcss starter code with configuration.

Plain -