Weekly Digest 14/2021

marcobiedermann

Marco Biedermann

Posted on April 11, 2021

Weekly Digest 14/2021

Welcome to my Weekly Digest #14 🌱

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

Top-level await is available in Node.js modules

Node.js' top-level is available in ES modules. Find out about three ways to enable it and untangle your code.

Top-level await is available in Node.js modules

From Express to Fastify in Node.js

It has been almost two years since Express has been updated, and a lot of new great tools came around since then. I recently tried Fastify for the first time, and it took me no longer than a few minutes to decide to make a switch. Let me share with you a few main reasons.

Sass Guidelines improvements

Kitty Giraudel recently came back to Sass Guidelines. Not to update the content, but to work on the site itself. It turns out they learned a lot in the last few years and found many improvements worth doing. They thought it would be interesting to discuss them in this post. Here are the different topics we’ll go through.

Sass Guidelines improvements

Dark mode in 5 minutes, with inverted lightness variables

By now, you probably know that you can use custom properties for individual color components, to avoid repeating the same color coordinates multiple times throughout your theme. You may even know that you can use the same variable for multiple components, e.g. HSL hue and lightness

Dark mode in 5 minutes, with inverted lightness variables

Top React toast libraries compared

The top React toast libraries for when it's more trouble than it's worth to create your own custom toast components.

Top React toast libraries compared - LogRocket Blog


Some great videos I watched this week

Fix Your Mistakes, Don't Commit Them! Pre-Commit Git Hook Checks with Husky and Lint Staged.

It's time to stop committing broken tests, ugly code, type errors and lint errors to your git repository. With Husky, we can hook into git's pre-commit hook to only allow code into our git repository that passes all of those above checks. Using lint-staged we can make it more efficient to focus our energy on the changed files.

by Leigh Halliday

5 Quick Tips about TypeScript

In this lesson we look at 5 simple ways TypeScript can describe your JavaScript code.
The examples are taken from https://typescript-exercises.github.io/ and you can use this website to play around with the code yourself

by Basarat Ali

Responsible JavaScript

While the performance of JavaScript engines in browsers have seen continued improvement, the amount of JavaScript we serve increases unabated. We need to use JavaScript more responsibly, which means we must rely on native browser features where prudent, use HTML and CSS when appropriate, and know when too much JavaScript is just that: Too much.

by Jeremy Wagner

10 CSS Pro Tips - Code this, NOT that!

Top 10 CSS Pro Tips to make your life as a web developer more productive. Some of the best programmers say CSS is too hard… but you might be surprised at how modern techniques can dramatically improve your code.

by Fireship

Chrome 90 - What’s New in DevTools

Debugging support for CSS Flexbox, performance heads-up display on page, issues tab updates and more.

by Google Chrome Developers


Useful GitHub repositories

forgit

πŸ’€ A utility tool powered by fzf for using git interactively.

GitHub logo wfxr / forgit

πŸ’€ A utility tool powered by fzf for using git interactively.

πŸ’€ forgit

Utility tool for using git interactively. Powered by junegunn/fzf.

pre-commit Contributors

This tool is designed to help you use git more efficiently It's lightweight and easy to use.

πŸ“₯ Installation

Make sure you have fzf installed.

# for zplug
zplug 'wfxr/forgit'

# for zgen
zgen load 'wfxr/forgit'

# for antigen
antigen bundle 'wfxr/forgit'

# for fisher (requires fisher v4.4.3 or higher)
fisher install wfxr/forgit

# for omf
omf install https://github.com/wfxr/forgit

# for zinit
zinit load wfxr/forgit

# for oh-my-zsh
git clone https://github.com/wfxr/forgit.git ${ZSH_CUSTOM:-~/.oh-my-zsh/custom}/plugins/forgit

# manually
# Clone the repository and source it in your shell's rc file or put bin/git-forgit into your $PATH
Enter fullscreen mode Exit fullscreen mode

Homebrew

To install using brew

brew install forgit
Enter fullscreen mode Exit fullscreen mode

Then add the following to your shell's config file:

# Fish:
# ~/.config/fish/config.fish:
[ -f $HOMEBREW_PREFIX/share/forgit/forgit.plugin.fish ]; and source $HOMEBREW_PREFIX/share/forgit/forgit.plugin.fish
#
…
Enter fullscreen mode Exit fullscreen mode

Vite

Vite is a new breed of frontend build tool that significantly improves the frontend development experience.

GitHub logo vitejs / vite

Next generation frontend tooling. It's fast!

Vite logo

npm package node compatibility build status Start new PR in StackBlitz Codeflow discord chat

Vite ⚑

Next Generation Frontend Tooling

  • πŸ’‘ Instant Server Start
  • ⚑️ Lightning Fast HMR
  • πŸ› οΈ Rich Features
  • πŸ“¦ Optimized Build
  • πŸ”© Universal Plugin Interface
  • πŸ”‘ Fully Typed APIs

Vite (French word for "quick", pronounced /vit/, like "veet") is a new breed of frontend build tooling that significantly improves the frontend development experience. It consists of two major parts:

In addition, Vite is highly extensible via its Plugin API and JavaScript API with full typing support.

Read the Docs to Learn More.

Packages






















Package Version (click for changelogs)
vite vite version
@vitejs/plugin-legacy plugin-legacy version
create-vite create-vite version

Contribution

See Contributing Guide.

License

MIT.

Sponsors

sponsors






Photopea

Photopea.com is a free online tool for editing raster and vector graphics with support for PSD, AI, and Sketch files.

GitHub logo photopea / photopea

Photopea is online image editor

photopea-logo

Photopea.com is a free online tool for editing raster and vector graphics with support for PSD, AI, and Sketch files.

Since Photopea is not fully open-source, this repository serves as a place for bug reports, feature requests, and general discussion.


Supported Formats

  • Complex: PSD, AI, INDD, XCF, Sketch, XD, FIG, KRI, CLIP, PXD, PXZ, CDR, UFO, Fireworks PNG, AFPHOTO, SVG, EPS, PDF, PDN, WMF, EMF.
  • Raster: PNG (APNG), JPG, GIF, WebP, ICO, ICNS, BMP, AVIF, HEIC, JXL, PPM/PGM/PBM, TIFF, DDS, IFF, ANIM, TGA.
  • Raw: DNG, NEF, CR2, CR3, ARW, RW2, RAF, ORF, GPR, 3FR, FFF.
  • Animated: GIF, APNG, MP4, WEBM, MKV (each frame becomes a layer, can be exported back to GIF or MP4).

Where You Can Find Us

Other




You Don't Need GUI

Graphical user interfaces are super friendly to computer users. They were introduced in reaction to the perceived steep learning curve of command-line interfaces (CLIs).

GitHub logo you-dont-need / You-Dont-Need-GUI

Stop relying on GUI; CLI **ROCKS**

You Don't Need GUI

Join the community on Spectrum

δΈ­ζ–‡η‰ˆθ―·ηœ‹θΏ™ι‡Œ

It's for noobs :)

Graphical user interfaces are super friendly to computer users. They were introduced in reaction to the perceived steep learning curve of command-line interfaces (CLIs).

Xerox Star 8010 workstations

However, they often require more resources, are less powerful and hard to automate via scripting.

As a computer expert, we want to be more efficient and do our jobs better. We know that command words may not be easily discoverable or mnemonic, so we try to list some common tasks that you might be tempted to do in GUI.

Quick links

  1. copy a file
  2. duplicate a file
  3. copy a directory
  4. duplicate a directory
  5. move a file
  6. rename a file
  7. move a directory
  8. rename a directory
  9. merge directories
  10. create a new file
  11. create a new directory
  12. show file/directory size
  13. show file/directory info
  14. open a file with the default program
  15. open a file in any application
  16. zip a directory
  17. …

dribbble shots

Campus - Meetup App

https://cdn.dribbble.com/users/1390816/screenshots/15456943/media/c75d0711256222e2d4c13c895052f1a6.jpg

by Jabel

Dompet - Wallet app design

https://cdn.dribbble.com/users/4328335/screenshots/15456630/media/235128fb0489a375569911aa2423448a.png

by voxy St

Job Finder App

https://cdn.dribbble.com/users/2576266/screenshots/15453226/media/83afa19c2f42864287d0901fd16f682d.png

by Musmuliady Jahi

Ven.

https://cdn.dribbble.com/users/5324199/screenshots/15453649/media/9101ff21a8abe87effc5689033364ba2.png

by Bernice Johnson


Tweets


Picked Pens

Smash to submit button

by Aaron Iker

Cool Text

by Christine Banlawi


Podcasts worth listening

Hasty Treat - VSCode Extensions and Tips

In this Hasty Treat, Scott and Wes talk about their favorite VSCode extensions, tips, and workflows!

Cursors and Pointers

What do mouse pointers, potatoes, and your fingers have in common? They can all interact with a screen! With CSS we can define how active our web boxes are, which areas are interactive, and what style the cursor should be. Maybe that means your mouse arrow becomes an animated magic wand, or maybe not.

Front-End Monorepo

We talked about our transition to a monorepo back in episode 305. This move has all sorts of advantages for us, like the simplicity of having a single repo to pull and be up to date with and linting/formatting code in a consistent way across the entire code base of CodePen.


Thank you for reading, talk to you next week, and stay safe! πŸ‘‹

πŸ’– πŸ’ͺ πŸ™… 🚩
marcobiedermann
Marco Biedermann

Posted on April 11, 2021

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

Sign up to receive the latest update from our blog.

Related

CSS Cheat Codes
javascript CSS Cheat Codes

December 24, 2021

Weekly Digest 46/2021
css Weekly Digest 46/2021

November 21, 2021

Weekly Digest 45/2021
css Weekly Digest 45/2021

November 14, 2021

Weekly Digest 43/2021
css Weekly Digest 43/2021

October 31, 2021