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.
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.
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.
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.
NocoDB
🎃 The Open Source Airtable Alternative 🎃
Turns any MySQL, PostgreSQL, SQL Server, SQLite & MariaDB into a smart-spreadsheet
Website • Discord • Twitter • Documentation
Quick try
1-Click Deploy
Heroku
Using Docker
docker run -d --name nocodb -p 8080:8080 nocodb/nocodb:latest
To persist data you can mount volume at
/usr/app/data/.
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
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, Viewer, Commenter, Custom Roles. -
⚡ Access Control : Fine-grained access control even at database, table & column…
utterances
A lightweight comments widget built on GitHub issues. Use GitHub issues for blog comments, wiki pages and more!
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!
photoprism
/
photoprism
Open Source Photos App powered by Go and Google TensorFlow 🌈
PhotoPrism: Browse Your Life in Pictures
PhotoPrism® is an AI-powered app for browsing, organizing & sharing your photo collection It makes use of the latest technologies to tag and find pictures automatically without getting in your way You can run it at home, on a private server, or in the cloud.
To get a first impression, you're welcome to play with our public demo at demo.photoprism.org.
Feature Overview
- Browse all your photos and videos without worrying about RAW conversion, duplicates or video formats
- Easily find specific pictures using powerful search filters
- Play Live Photos™ by hovering over them in albums and search results
- Since the user interface is a Progressive Web App it provides a native app-like experience, and you can conveniently install it on the home screen of all major operating systems and mobile devices
- Includes four high-resolution world maps to bring back the memories of your…
dribbble shots
Task Management App
Spatu - Shoe Market App
Smart Home Mobile App
by Hira Riaz
My Orders
by Wahab
Dario App
by Ramon
NFT Marketplace Web Mobile
by Adalahreza
Tweets
Current stage 3 proposal is an `at` method! For use on arrays, strings, and typed arrays.
Looking forward to this one.
gist.github.com/laurieontech/c…20:51 PM - 01 Jun 2021
Today I'm launching my Beginner JavaScript text guide!
These notes are totally free and have been modeled after the content in my Beginner JavaScript course.
This is a huge resource I've been working on for over a year and I'm so excied to share it!
wesbos.com/javascript16:20 PM - 01 Jun 2021
Lighthouse@____lighthouse
Lighthouse 8.0 is here! ⚡️
Improved CWV balance for the Performance Score, Lighthouse Treemap and metric filtering now in PSI and Canary DevTools, and a brand new CSP audit!
All that and more, detailed in the changelog: goo.gle/lh819:17 PM - 02 Jun 2021
Visualize Value@visualizevalue“The more you know, the less you diversify.” — @naval17:09 PM - 04 Jun 2021
Picked Pens
CSS morphing
by Amit Sheen
Viewport gradient rotation
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.
Thank you for reading, talk to you next week, and stay safe! 👋
Top comments (0)