DEV Community

Marco Biedermann
Marco Biedermann

Posted on • Updated on

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
    • Remote image support
    • AVIF support
  • 🚧 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.

$ nvm install 15.5.1
$ nvm install 14.15.4
$ nvm install 12.20.1
$ nvm install 10.23.1
Enter fullscreen mode Exit fullscreen mode

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.

https://hackernoon.com/dont-be-the-bad-cop-in-pull-request-reviews-let-software-do-that-job-1eb9e574c2d1


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.

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.

by Jack Franklin


Useful GitHub repositories

Figma Design Tokens

Export Figma styles and custom design tokens to a style dictionary ready json or sync to GitHub.

https://raw.githubusercontent.com/lukasoppermann/design-tokens/main/_resources/Design%20Tokens%20Plugin%20Cover.png

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.

GitHub logo lukasoppermann / design-tokens

🎨 Figma plugin to export design tokens to json in an amazon style dictionary compatible format.

Design Tokens plugin for figma

Design Tokens

Figma Design Tokens - Export & convert design tokens or sync with github repo. | Product Hunt

Test status Coverage Status

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.

Table of content

Installation

  1. Go to the design tokens plugin page
  2. Click on install in the top right corner

Plugin usage

The plugin has a couple options in the menu items:

Design Tokens > Export Design Token File

This creates a .json file with all design tokens from your Figma project. A dialog will open allowing you to save the file on your hard drive.

Design Tokens > Send Design Tokens to

…

gatsby-source-instagram

Source plugin for sourcing data from Instagram. There are four ways to get information from Instagram.

GitHub logo oorestisime / gatsby-source-instagram

Create nodes from instagram posts hashtags and profiles

gatsby-source-instagram

npm version npm PRs Welcome Average time to resolve an issue NPM Netlify Status

Source plugin for sourcing data from Instagram. There are four ways to get information from instagram:

  • scraping the posts of an Instagram account. It can only get last 50 photos.
  • scraping a hashtag page.
  • scraping a user profile's informations.
  • querying the Instagram Graph Api using a provided access_token

Table of Contents

Install

npm install --save gatsby-source-instagram

How to use

Public scraping for posts

If you intend to use the public scraping method then you need to pass the concerning username id You can determine it by taking the following steps:

  1. Open a browser and go to the Instagram page of the user – e.g. https://www.instagram.com/oasome.blog/
  2. Right-click on the web page to open the right-click context menu and select…

gatsby-remark-embedder

Gatsby Remark plugin to embed well known services by their URL.

https://github.com/MichaelDeBoey/gatsby-remark-embedder/blob/master/art/logo.png?raw=true

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.

GitHub logo MichaelDeBoey / gatsby-remark-embedder

Gatsby Remark plugin to embed well known services by their URL.

gatsby-remark-embedder logo

gatsby-remark-embedder

Gatsby Remark plugin to embed well known services by their URL.


Build Status Code Coverage version downloads MIT License All Contributors PRs Welcome Code of Conduct

The problem

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.

This solution

gatsby-remark-embedder tries to solve this problem for you by letting you just copy-paste the link to the gif/pen/pin/player/playground/post/sandbox/tweet/video you want to embed right from within your browser onto a separate line (surrounded by empty lines) and replace it with the proper embed-code.

Table of Contents


dribbble shots

Gumroad Concept

https://cdn.dribbble.com/users/110372/screenshots/14842365/media/75d0465a5a09e7ae73030c3446dca2a7.png?compress=1&resize=1600x1200

by Shakuro https://dribbble.com/shots/14842365-Gumroad-Concept

There are other delicious foods rather than the "Hamburger" icon

https://cdn.dribbble.com/users/4001713/screenshots/14880132/media/f267b68950dda6374dfd8998fef058ca.png?compress=1&resize=1600x1200

by Arifin Yeasin https://dribbble.com/shots/14880132-There-are-other-delicious-foods-rather-than-the-Hamburger-icon

Online shoes store

https://cdn.dribbble.com/users/2478245/screenshots/14878021/media/301a0926795de01d0decead6a2a8a725.jpg?compress=1&resize=1600x1200

by Hesam Mousavi https://dribbble.com/shots/14878021-Online-shoes-store

Icons set

https://cdn.dribbble.com/users/371697/screenshots/14877486/media/1a13339c6d799e43071770d841722b2e.jpg?compress=1&resize=1600x1200

by Santi Gatti https://dribbble.com/shots/14877486-Icons-set


Tweets


Picked Pens

Home React HSL Slider

by JHEY

CSS paper snowflake

by Michelle Barker

12.

by ycw


Talk to you next week and stay safe! πŸ‘‹

Top comments (0)