Welcome to my Weekly Digest #21.
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
A New Way To Reduce Font Loading Impact: CSS Font Descriptors
Font loading has long been a bugbear of web performance, and there really are no good choices here. If you want to use web fonts your choices are basically Flash of Invisible Text (aka FOIT) where the text is hidden until the font downloads or Flash of Unstyled Text (FOUT) where you use the fallback system font initially and then upgrade it to the web font when it downloads.
A New Way To Reduce Font Loading Impact: CSS Font Descriptors - Smashing Magazine
A Guide To Undoing Mistakes With Git
Mistakes. These cruel villains do not even stop at the beautiful world of software development. But although we cannot avoid making mistakes, we can learn to undo them! This article will show the right tools for your daily work with Git.
A Guide To Undoing Mistakes With Git (Part 1) - Smashing Magazine
A Guide To Undoing Mistakes With Git (Part 2) - Smashing Magazine
Converting tables to grids with React compound components
Using React compound components, learn how to dynamically switch from a table to grid layout for an interactive interface.
Converting tables to grids with React compound components - LogRocket Blog
State Management: How to tell a bad boolean from a good boolean
Bad booleans represent state. Good booleans are derived from state.
When you're managing state in your app, it's easy to fall prey to bad booleans
State Management: How to tell a bad boolean from a good boolean
A couple of ways to highlight code syntax in Apple Keynote slides
Apple Keynote doesn’t come with code syntax highlighting built in. I really wish it did, and hope that Apple would at some point add this feature, especially considering how many developers and engineers use Keynote to create talk slides.
A couple of ways to highlight code syntax in Apple Keynote slides
Some great videos I watched this week
React useState hook (with TypeScript)
React Hooks are amazing. A key feature that allows Function components to be THE WAY to create new React Projects.
by Basarat Ali
CI #2 - Starting out with GitHub Actions
Github Actions are an easy way to get started with Continuous Integration. You used to have to rely on services like Travis CI, Circle CI, etc. but now the main repository hosts have CI built into their platform.
New in Chrome 91: File System Access API improvements, Google IO, and more
Chrome 91 is rolling out now. Web apps that interact with files, can now suggest file names and directories when using the file system access API. Plus, you can now read files from the clipboard. If your site has more than one domain, and shares the same account management backend, you can tell Chrome they’re the same, allowing the password manager to suggest the right credentials. All the videos from I/O are now available. And there’s plenty more.
Chrome 91 - What’s New in DevTools
Web vitals information pop up, visualize CSS scroll-snap, new Memory inspector and more.
Requesting color from CSS in 2021 and beyond
From a limited set of web safe colors to more colors than your eye can distinguish, follow me as we play and toy with color from CSS and reach into the most vibrant colors of your screens.
by Adam Argyle
Useful GitHub repositories
Awesome Privacy
List of free, open source and privacy respecting services and alternatives to privative services.
pluja / awesome-privacy
Awesome Privacy - A curated list of services and alternatives that respect your privacy because PRIVACY MATTERS.
Awesome Privacy
List of free, open source and privacy respecting services and alternatives to privative services.
About | Contributing | Quotes
Contents
- Search Engines
- Web Browser
- Photo Storage
- Photo Editing and Management
- Cloud Storage
- Encryption
- 2FA
- File Management and Sharing
- Maps and Navigation
- Location tracking
- Translation
- Android Keyboard
- Android App Store
- Android Launcher
- Social Networks and Platforms
- Teamworking Tools
- Instant Messaging
- Password Managers
- Mail Services
- Notes and Tasks
- Video Conferencing
- Remote Access and Control
- Fitness and Health
- Media Streaming Platforms
- Operating Systems
- Analytics
- Captchas
- Cloaking
- Office
- Fonts
- Payments
- Personal Finances
- Databases
- Utilities
- Developer Tools
- Domain Registrar
- Uncategorized
Search Engines
- Google Search
- Yahoo Search
- Bing
- Yandex
- Whoogle Search - A self-hosted, ad-free, privacy-respecting Google metasearch engine.
- Qwant - A privacy oriented search engine made…
Boring Avatars
Boring avatars is a tiny JavaScript React library that generates custom, SVG-based, round avatars from any username and color palette.
boringdesigners / boring-avatars
Boring avatars is a tiny JavaScript React library that generates custom, SVG-based, round avatars from any username and color palette.
Boring Avatars
Boring avatars is a tiny JavaScript React library that generates custom, SVG-based, round avatars from any username and color palette.
Install
yarn add boring-avatars
or
npm install boring-avatars
Usage
import Avatar from "boring-avatars";
<Avatar
size={40}
name="Maria Mitchell"
variant="marble"
colors={["#92A1C6", "#146A7C", "#F0AB3D", "#C271B4", "#C20D90"]}
/>;
Props
Prop | Type |
---|---|
size | number or string |
square | boolean |
name | string |
variant | oneOf: marble , beam , pixel ,sunset , ring , bauhaus
|
colors | array of colors |
Source
You can embed your boring avatars using the boring avatars source.
To choose a random avatar from a specific user and a color palette, the format follows:
https://source.boringavatars.com/marble/120/Maria%20Mitchell?colors=264653,2a9d8f,e9c46a,f4a261,e76f51
For more information, check out the README
dribbble shots
Trickle Landing Page
by Pizzathehut
Digital Banking Dashboard Clean UI
by AR Shakir
Home Rent
by Andri.
mujer
by Shayan Umar
Shoes App
Tweets
jbnj🪐@iamnottheway✨Weekend launch✨
👋Yesterday I wanted to use some noise textures in my designs but couldn't find any noise generators that's why I made one🎉
it's called 👉 noiseisnice.com
5 hrs ago I didn't know I was gonna launch this lol14:15 PM - 23 May 2021
npm-check-updates is a great package to check for and update your package.json dependencies.
I just learned aboutt he interactive mode, which allows you to yes/no each update. Super handy!
Just run ncu -i14:54 PM - 24 May 2021
[■,■,■,■].map(■→●) ⇒ [●,●,●,●]
[■,●,■,▲].filter(■→true) ⇒ [■,■]
[■,●,■,▲].find(●→true) ⇒ ●
[■,●,■,▲].findIndex(●→true) ⇒ 1
[■,●,■,▲].fill(●) ⇒ [●,●,●,●]
[■,●,■,▲].some(●→true) ⇒ true
[■,●,■,▲].every(●→true) ⇒ false15:53 PM - 29 May 2021
Picked Pens
CSS mouse-out transition effect
by Adam Argyle
Colorful Noise
by ZIM
The Very Hungry Caterpillar
by Adam Kuhn
Podcasts worth listening
The CSS Podcast - Containment
The CSS contain property can give you some serious performance gains by adjusting how and when the browser renders elements. In this episode, we go over all the different types of containment, and where you might use them.
Syntax - JavaScript's Drag and Drop API
In this Hasty Treat, Scott and Wes talk about JavaScript's drag and drop API — how it works, concerns, best practices, and more!
3 Minutes with Kent - Fixating on fixing rerenders
Thank you for reading, talk to you next week, and stay safe! 👋
Top comments (3)
Great content!
As always, great post. I honestly enjoy Weekly Digest posts as the have become my source of cool resources.
Thanks
@keithmngadi Thank you very much. Great to hear that! Highly appreciated