DEV Community

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

Weekly Digest 22/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.
・5 min read

Welcome to my Weekly Digest #22 of this year, which is the first one of June. Finally, summer has arrived ☀️

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

Trigonometry in CSS and JavaScript

In this series of articles we’ll get an overview of trigonometry, understand how it can be useful, and delve into some creative applications in CSS and JavaScript.

Trigonometry in CSS and JavaScript: Introduction to Trigonometry | Codrops

A better segmented control

A few years ago, we built a segmented control component for the Lyft Product Language (LPL) design system. However, when we recently looked at our component adoption and usage metrics, we found very few teams actually used our segmented control when building products and features.

A better segmented control

Creating a CLI tool with Node.js

In this article, you'll learn how to create a CLI tool using Node.js, test it, and then publish it on NPM.

Creating a CLI tool with Node.js - LogRocket Blog

The Testing Trophy and Testing Classifications

How to interpret the testing trophy for optimal clarity

The Testing Trophy and Testing Classifications


Some great videos I watched this week

The option you want to enable beyond strict

strict (and its sub flag strictNullChecks) can really help prevent null and undefined errors in your runtime JavaScript. However, it doesn't defend against invalid array and object access.

by Basarat

Speed Up Jobs with npm ci

npm ci is a special command for installing node packages in a continuous integration environment. In this video I show Github Actions with npm ci in a JavaScript project, after showing npm i for the same code. I also talk about some of the differences of the command, and show some benchmarks as a project scales and adds more packages so you can know how useful it is in the real world.

by Jimmy Cleveland

Test-Driven Development

Test-Driven Development (TDD) is a proven prevent bugs and improve the quality of your code - and it's fun! Learn the fundamentals of JavaScript testing in this beginner's tutorial.

by Fireship

VS Code tips: The Git: Auto stash setting

With auto stash enabled, VS Code automatically stashes changes on git pull and restore them once the pull completes.

by Matt Bierner


Useful GitHub repositories

NocoDB

Free & Open Source Airtable alternative. Turns any SQL database into a smart spreadsheet. Supports MySQL, Postgres, SQL server, MariaDB & SQLite.

GitHub logo nocodb / nocodb

🔥 🔥 The Open Source Airtable alternative.

NocoDB
The Open Source Airtable Alternative

Turns any MySQL, PostgreSQL, SQL Server, SQLite & MariaDB into a smart-spreadsheet

Build Status Node version Twitter

WebsiteDiscordTwitter



NocoDB - The Open Source Airtable alternative | Product Hunt

Quick try

1-Click Deploy

Deploy NocoDB to Heroku with 1-Click

Using Docker

docker run -d --name nocodb -p 8080:8080 nocodb/nocodb
Enter fullscreen mode Exit fullscreen mode

Using Npm

npx create-nocodb-app

Using Git

git clone https://github.com/nocodb/nocodb-seed
cd nocodb-seed
npm install
npm start

GUI

Access Dashboard using : http://localhost:8080/dashboard

Join Our Community

Join NocoDB : Free & Open Source Airtable Alternative

Screenshots












Features

Rich Spreadsheet Interface

  •  Search, sort, filter, hide columns with uber ease
  •  Create Views : Grid, Gallery, Kanban, Gantt, Form
  •  Share Views : public & password protected
  •  Personal & locked Views
  •  Upload images to cells (Works with S3, Minio, GCP, Azure, DigitalOcean, Linode, OVH, BackBlaze)!!
  •  Roles : Owner, Creator, Editor, Commenter, Viewer, Commenter, Custom Roles.
  •  Access Control : Fine-grained access control even at database, table & column level.

App Store for workflow automations :

  •  Chat : Microsoft Teams…

utterances

A lightweight comments widget built on GitHub issues. Use GitHub issues for blog comments, wiki pages and more!

GitHub logo utterance / utterances

🔮 A lightweight comments widget built on GitHub issues

utterances 🔮

A lightweight comments widget built on GitHub issues. Use GitHub issues for blog comments, wiki pages and more!

  • Open source. 🙌
  • No tracking, no ads, always free. 📡🚫
  • No lock-in. All data stored in GitHub issues. 🔓
  • Styled with Primer, the css toolkit that powers GitHub. 💅
  • Dark theme. 🌘
  • Lightweight. Vanilla TypeScript. No font downloads, JavaScript frameworks or polyfills for evergreen browsers. 🐦🌲

how it works

When Utterances loads, the GitHub issue search API is used to find the issue associated with the page based on url, pathname or title. If we cannot find an issue that matches the page, no problem, utterances-bot will automatically create an issue the first time someone comments.

To comment, users must authorize the utterances app to post on their behalf using the GitHub OAuth flow. Alternatively, users can comment on the GitHub issue directly.

PhotoPrism

Open-Source Personal Photo Management. Say goodbye to solutions that force you to upload your visual memories to the cloud!

GitHub logo photoprism / photoprism

Open-Source Photo Management powered by Go and Google TensorFlow

PhotoPrism: Browse Your Life in Pictures

License: AGPL Code Quality Build Status GitHub contributors Documentation Community Chat Twitter

PhotoPrism® is a privately hosted app for browsing, organizing, and sharing your photo collection It makes use of the latest technologies to tag and find pictures automatically without getting in your way Say goodbye to solutions that force you to upload your visual memories to the cloud!

To get a first impression, you're welcome to play with our public demo at demo.photoprism.org.

Key Features

  • Our intuitive user interface makes browsing and organizing your photo collection as easy as it should be — whether it’s on a phone, tablet, or desktop computer.
  • Index everything without worrying about duplicates or RAW to JPEG conversion.
  • Automatic image classification based on Google TensorFlow. In addition, our indexer detects colors, chroma, luminance, quality, panoramic projection location type, and many other properties.
  • Includes four high-resolution world maps to see where you've been…

dribbble shots

Task Management App

https://cdn.dribbble.com/users/3040223/screenshots/15768337/media/6561c5d3cdd0f847d4490d0c6d4db62d.jpg

by Rizqi Adi Surya

Spatu - Shoe Market App

https://cdn.dribbble.com/users/6100873/screenshots/15762112/media/5764e283a3d0e8dc65d5ab36a21aec46.png

by Dhimas Rasyad

Smart Home Mobile App

https://cdn.dribbble.com/users/5261465/screenshots/15769004/media/93275e6904fd4d2178c649e4c129a9a4.jpg

by Hira Riaz

My Orders

https://cdn.dribbble.com/users/2530474/screenshots/15774402/media/a35825f3ca036cf620da5d7d8775edcb.png

by Wahab

Dario App

https://cdn.dribbble.com/users/729161/screenshots/15790951/media/de3917c59cc6109b63a6de6fafbb6418.png

by Ramon

NFT Marketplace Web Mobile

https://cdn.dribbble.com/users/2302891/screenshots/15787927/media/70bf7a8a5b868a1d49cda8e697a37651.jpg

by Adalahreza


Tweets


Picked Pens

CSS morphing

by Amit Sheen

Viewport gradient rotation

by Ryan Mulligan


Podcasts worth listening

The CSS Podcast - Transitions

In this episode, it's all about transitions. What you can and can't transition its limits, and its superpowers. We'll finish up with ways to trigger transitions and a few tips and tricks.

3 Minutes with Kent - Make your DB schema as restrictive as possible for easier migrations

Smashing Podcast - Why is my React app slow?

We’re talking about React performance. What factors slow our React apps down, and how can we fix it? Drew McLellan talks to expert Ivan Akulov to find out.

Syntax - React + TypeScript

In this episode of Syntax, Scott and Wes talk about using React with Typescript — how to set it up, components, state, props, passing data, custom hooks, and more!


Tools and Resources

Reactive Resume

A free and open source resume builder that’s built to make the mundane tasks of creating, updating and sharing your resume as easy as 1, 2, 3.

Reactive Resume


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)