Weekly Digest 01/2021
Happy New Year and welcome to my first weekly digest of this year 🎉🍾
This weekly digest contains a lot of interesting and inspiring articles, videos, tweets, and designs I consumed during this week.
Interesting articles to read
Gatsby 2.30.2
- 🌅 Gatsby Image (beta) improvements
- 🚧 SSR during development
- ⚡ 30% faster image transformations
- 🔍 Query on Demand & Lazy Images during development
https://www.gatsbyjs.com/docs/reference/release-notes/v2.30/
Advancing developer freedom: GitHub is fully available in Iran
All developers should be free to use GitHub, no matter where they live. At the same time, GitHub respects and abides by US law, which means government sanctions have limited our ability to provide developers
https://github.blog/2021-01-05-advancing-developer-freedom-github-is-fully-available-in-iran/
Node.js January 2021 Security Releases
Updates are now available for v10,x, v12.x, v14.x, and v15.x Node.js release lines for the following issues.
In addition to the vulnerabilities listed below, these releases also include an update to npm in order to resolve an issue that was reported against npm by security scanners even though it was not vulnerable.
https://nodejs.org/en/blog/vulnerability/january-2021-security-releases/
Don’t be the bad cop in pull request reviews — Let software do that job
And try to celebrate achievements!
When was the last time you reviewed a pull request and reminded the author to add a link to your bug tracking system? How about adding a missing label? Maybe you found an open PR that had no reviewer/assignee set.
Some great videos and courses I watched this week
Deno, a Secure Runtime for JavaScript and TypeScript
Deno is a runtime for JavaScript and TypeScript that is based on the V8 JavaScript engine and the Rust programming language. It was created by Ryan Dahl, original creator of Node.js, and is focused on productivity.
https://www.youtube.com/watch?v=doug6st5vAs
by Ryan Dahl
React Server Components (with Next.js Demo)
React Server Components allow developers to build apps that span the server and client, combining the rich interactivity of client-side apps with the improved performance of traditional server rendering.
by Lee Robinson
Parts of Speech(POS) Tagging with HMM
Testing React with Jest and Enzyme series
Video course that covered how to set-up and test your React applications with the test runner Jest and the React testing library Enzyme.
Useful GitHub repositories
Figma Design Tokens
Export Figma styles and custom design tokens to a style dictionary ready JSON or sync to GitHub.
The Design Tokens plugin for Figma allows you to export design tokens into a JSON format that can be used with the Amazon style dictionary package. This allows you to transform your tokens to different languages/platforms like web, iOS, or Android.
https://github.com/lukasoppermann/design-tokens/
gatsby-source-instagram
Source plugin for sourcing data from Instagram. There are four ways to get information from Instagram.
https://github.com/oorestisime/gatsby-source-instagram
gatsby-remark-embedder
Gatsby Remark plugin to embed well known services by their URL.
Trying to embed well-known services (like CodePen, CodeSandbox, GIPHY, Instagram, Lichess, Pinterest, Slides, SoundCloud, Spotify, Streamable, Testing Playground, Twitch, Twitter, or YouTube) into your Gatsby website can be hard since you have to know how this needs to be done for all of these different services.
dribbble shots
Gumroad Concept
by Shakuro https://dribbble.com/shots/14842365-Gumroad-Concept
There are other delicious foods rather than the “Hamburger” icon
by Arifin Yeasin https://dribbble.com/shots/14880132-There-are-other-delicious-foods-rather-than-the-Hamburger-icon
Online shoes store
by Hesam Mousavi https://dribbble.com/shots/14878021-Online-shoes-store
Icons set
by Santi Gatti https://dribbble.com/shots/14877486-Icons-set
Tweets
Trigger CI
If you ever have to trigger your CI pipeline without pushing a new change, you can use the --allow-empty flag to create an empty commit without any changes.
Source: https://twitter.com/SatyaRohith_/status/1345755762623086592 by @Satya Rohith
https://twitter.com/SatyaRohith_/status/1345755762623086592
Usually recording a commit that has the exact same tree as its sole parent commit is a mistake, and the command prevents you from making such a commit. This option bypasses the safety, and is primarily for use by foreign SCM interface scripts.
Source: https://git-scm.com/docs/git-commit#Documentation/git-commit.txt---allow-empty
Copy styles in Chrome Developer Tools
In Google Chrome Developer Tools, you can now copy all authored CSS styles by right-clicking and element and copy its styles.
https://twitter.com/addyosmani/status/1346365824320163840
Package exports for modern JavaScript
You can add the exports field to your package.json to include the second version of your bundle to add support for modern environments.
https://twitter.com/_developit/status/1347296236282523648
Performance issues stylesheet
Simple CSS stylesheet to show potential performance issues on a website.
https://twitter.com/tkadlec/status/1346531963348381704
Naming of TypeScript generic types
Please use meaningful and pronounceable variable names for your generic types with TypeScript
https://twitter.com/kentcdodds/status/1348016701632221184
Design for performance
Try making use of space and color to create hierarchy in your UI design instead of loading more font-weights which will reduce your page load.
Picked Pens
Talk to you next week and stay safe! 👋
