DEV Community

loading...
Cover image for Weekly Digest 23/2021 - Top of the Week
World In Dev

Weekly Digest 23/2021 - Top of the Week

Marco Biedermann
Full-Stack JavaScript Engineer passionate about TypeScript, Node.js, React and Open Source working @mobimeo based in Berlin.
・4 min read

Welcome to my Weekly Digest #23.

This weekly digest contains a lot of interesting and inspiring articles, videos, tweets, podcasts, and designs I consumed during this week.


 

🎉 Giveaway

We are giving away any course you need on Udemy. Any price any course.
To enter you have to do the following:

  1. 👍 React to this post
  2. ✉️ Subscribe to our newsletter

You will receive our articles directly to your inbox 📬.

 


Interesting articles to read

How to create NFTs with JavaScript

Learn to code an NFT (non-fungible token) using the Ethereum blockchain, the Ropsten Testnet, and a series of JavaScript libraries.

How to create NFTs with JavaScript - LogRocket Blog

Serving sharp images to high density screens

Why compressing images for dense screens is different, and how to serve them.

Serving sharp images to high density screens

How to update nested state in React

State is a cornerstone of React components. In this post, we learn how to update nested state properties.

How to update nested state in React

Media Queries in Times of @container

With container queries now on the horizon - will we need media queries at all?

Media Queries in Times of @container

Some great videos I watched this week

Automating Tests with Jest

When I think about Continuous Integration, one of the first things that comes to my mind is testing. It's amazing how much more confident you can be about changes to your codebase when you have a good suite of tests, and you know they run before every merge.

by Jimmy Cleveland

How to use TypeScript on big projects

We met with Nikita Kabardin, who works as a front-end developer at Spotify. He also worked on several Battlefield projects.

by Maksim Ivanov

Thinking on ways to solve color schemes

In today’s GUI challenge, we’re building dark, light and dim color schemes with HSL. The CSS works across modern browsers, establishes foundational architecture for more themes, and is accessible.

by Adam Argyle

Hasura in 100 Seconds

Learn how Hasura can instantly turn your SQL database into a GraphQL API.

by Fireship

Self-Avoiding Walk

It's finally time to attempt a Self-Avoiding Walk! In this video, I quickly visualize a simple JavaScript p5.js implementation of a self-avoiding walk. I then tackle the more complex problem of backtracking to find a solution to a space-filling self-avoiding walk.

by Daniel Shiffman


Useful GitHub repositories

React 18 Working Group

This is the working group for React 18 release. It was formed to provide support to the community through the release.

GitHub logo reactwg / react-18

Workgroup for React 18 release.

React 18 Working Group

This is the working group for React 18 release. It was formed to provide support to the community through the release. The working group is focused around online conversations which you can access by going to the GitHub Discussions tab.

The working group is currently structured to help manage discussions yet make the information available to everyone. If you're looking for the first discussion to read, Introducing React 18 is a good starting point.

Working group participants come from a representative set of the React community including educators, developers, and library authors. Participants can start GitHub discussions to ask questions and provide feedback on React 18. They can also comment on existing discussion threads. All discussions are public and available for everyone to follow along.

To learn more about the React 18 Working Group and its mission, check out The Plan for React 18.

React Hook Form

Performant, flexible and extensible forms with easy-to-use validation.

GitHub logo react-hook-form / react-hook-form

📋 React Hooks for forms validation (Web + React Native)

npm downloads npm npm Discord

Version 7 | Version 6

Features

Install

npm install react-hook-form

Links

Quickstart

import React from 'react';
import { useForm } from 'react-hook-form';
function App() {
  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm();
  const onSubmit = (data) => console.log(data);

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input {...register('firstName')} /> {/* register an input */}
      <input {
Enter fullscreen mode Exit fullscreen mode

Prisma

Next-generation ORM for Node.js & TypeScript | PostgreSQL, MySQL, MariaDB, SQL Server & SQLite

GitHub logo prisma / prisma

Next-generation ORM for Node.js & TypeScript | PostgreSQL, MySQL, MariaDB, SQL Server & SQLite

Prisma

Prisma



Quickstart   •   Website   •   Docs   •   Examples   •   Blog   •   Slack   •   Twitter   •   Prisma 1

What is Prisma?

Prisma is a next-generation ORM that consists of these tools:

  • Prisma Client: Auto-generated and type-safe query builder for Node.js & TypeScript
  • Prisma Migrate: Declarative data modeling & migration system
  • Prisma Studio: GUI to view and edit data in your database

Prisma Client can be used in any Node.js or TypeScript backend application (including serverless applications and microservices). This can be a REST API, a GraphQL API a gRPC API, or anything else that needs a database.

Are you looking for Prisma 1? The Prisma 1 repository has been renamed to prisma/prisma1.

Getting started

The fastest way to get started with Prisma is by following the Quickstart (5 min).

The Quickstart is based on a preconfigured SQLite database. You can also get started with your…

cuid

Collision-resistant ids optimized for horizontal scaling and binary search lookup performance.

GitHub logo ericelliott / cuid

Collision-resistant ids optimized for horizontal scaling and performance.

cuid

Travis-CI

Collision-resistant ids optimized for horizontal scaling and binary search lookup performance.

Currently available for Node, browsers, Java, Ruby, .Net, Go, and many other languages (see ports below — more ports are welcome).

cuid() returns a short random string with some collision-busting measures. Safe to use as HTML element ID's, and unique server-side record lookups.

Example

ESM:

import cuid from 'cuid';
console.log( cuid() );

// cjld2cjxh0000qzrmn831i7rn
Enter fullscreen mode Exit fullscreen mode

Node style:

var cuid = require('cuid');
console.log( cuid() );

// cjld2cyuq0000t3rmniod1foy
Enter fullscreen mode Exit fullscreen mode

Installing

$ npm install --save cuid

Broken down

** c - h72gsb32 - 0000 - udoc - l363eofy **

The groups, in order, are:

  • 'c' - identifies this as a cuid, and allows you to use it in html entity ids.
  • Timestamp
  • Counter - a single process might generate the same random string. The weaker the…

dribbble shots

Fleet – Travel Shopping UI Kit

https://cdn.dribbble.com/users/427857/screenshots/15798306/media/3013474d55f68b39623b44f80caf12f3.png

by Tran Mau Tri Tam

Podcast Dashboard

https://cdn.dribbble.com/users/1182822/screenshots/15832006/media/41307dcd7e4d407c79b15b6c1d5175b7.png

by Umar Aji Pratama

Fashion Store Mobile App

https://cdn.dribbble.com/users/4684322/screenshots/15833079/media/9b7571e8c16d6590f34d2cde6edc5a07.jpg

by Andri.

Music Mobile App

https://cdn.dribbble.com/users/6286128/screenshots/15828946/media/b9f0e859841dce1bfc8888c77a0623cd.png

by Didarul islam

Instax - Mobile App Design

https://cdn.dribbble.com/users/1445352/screenshots/15826920/media/01d2b2a601da4316ac07909618a83fc9.png

by Anastasia Marinicheva

Cargo Transportation Application Design

https://cdn.dribbble.com/users/77531/screenshots/15826132/media/7f7b78b8affc304ff266c90d33d514b8.png

by RD UX/UI


Tweets


Picked Pens

Bringing text to life

by Kyle Shook


Podcasts worth listening

The CSS Podcast - Scroll timeline

In this episode we deep dive the experimental Scroll Animations spec to bring you the breakdown on @scroll-timeline powered CSS animation. Learn about scroll-linked animations vs scroll-triggered animations and how to orchestrate scroll interactions with elements of the page.

Syntax - Making a Vaccine Bot with JavaScript

In this Hasty Treat, Scott and Wes talk about Wes' experiment building a vaccine bot!

Hasty Treat - Making a Vaccine Bot with JavaScript

3 Minutes with Kent - Prisma is amazing

The Changelog - Exploring Deno Land

This week we’re joined by Ryan Dahl, Node.js creator, and now the creator of Deno - a simple, modern and secure runtime for JavaScript and TypeScript that uses V8 and is built in Rust.

CodePen Radio - Pattern Library

Stephen and Chris talk about cplibrary the Pattern Library that the CodePen Monorepo can use to share components. What goes in there and what doesn’t? What are common and not-so-common components? Can components be combinations of other components?


Thank you for reading, talk to you next week, and stay safe! 👋


 

Make sure to subscribe to our newsletter 💌 to receive our weekly recap directly on your email and react to this post to automatically participate in our giveaway 🎁

If you would like to join our discussions, you can find us on Discord 📣.

 

Discussion (0)