DEV Community

Cover image for Weekly Digest 45/2021
Marco Biedermann
Marco Biedermann

Posted on

Weekly Digest 45/2021

Welcome to my Weekly Digest #45.

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

Rust Is The Future of JavaScript Infrastructure

Why is Rust being used to replace parts of the JavaScript web ecosystem like minification (Terser), transpilation (Babel), formatting (Prettier), bundling (webpack), linting (ESLint), and more?

Rust Is The Future of JavaScript Infrastructure - Lee Robinson

The Golden Ratio and User-Interface Design

Although traditionally used in art and architecture, the golden ratio can be referenced to design aesthetically pleasing interfaces.

The Golden Ratio and User-Interface Design

Interactive Rebase: Clean up your Commit History

Interactive Rebase is the Swiss Army knife of Git commands: lots of use cases and lots of possibilities!

Interactive Rebase: Clean up your Commit History


Some great videos I watched this week

Cleaning Up Copilot Code

GitHub Copilot is a great helper, but you it's just the copilot. Let's take the pilot's chair and turn some not-so-great Copilot code and turn it into high-quality production-ready TypeScript code.

by Jack Herrington

Knobs!

Yair Even Or has a neat project called Knobs that adds UI controls that adjust CSS Custom Properties instantly any way you need them to. There is more to the project than that, but that's how we use them here to control some generative art.

by Chris Coyier

Webpack alternative: ESBuild

by Clem Tech

Shopify built a JS Framework

Shopify just announced a React-based JavaScript framework called Hydrogen. It is similar to Next.js but has extra features for e-commerce and data fetching with GraphQL.

by Fireship

Chrome 96 - What’s New in DevTools

New CSS Overview panel, emulate CSS prefers-contrast media and Chrome’s auto dark mode, and more.

by Google Chrome Developers


Useful GitHub repositories

Fantasy Map Generator

Fantasy Map Generator is a free web application generating interactive and highly customizable svg maps based on voronoi diagram.

GitHub logo Azgaar / Fantasy-Map-Generator

Web application generating interactive and highly customizable maps

Fantasy Map Generator

Azgaar's Fantasy Map Generator is a free web application generating interactive and highly customizable svg maps based on voronoi diagram.

Project is under development, the current version is available on Github Pages.

Refer to the project wiki for guidance. The current progress is tracked in Trello. Some details are covered in my old blog Fantasy Maps for fun and glory.

preview

preview

preview

Join our Discord server and Reddit community to share your creations, discuss the Generator, suggest ideas and get the most recent updates.

Contact me via email if you have non-public suggestions. For bug reports please use GitHub issues or #bugs channel on Discord. If you are facing performance issues, please read the tips.

Electron desktop application is available in releases. Download archive for your architecture, unzip and run.

Pull requests are highly welcomed. The codebase is messy and requires re-design, but I…

GitHub Pages Deploy Action

This GitHub Action will automatically deploy your project to GitHub Pages. It can be configured to push your production-ready code into any branch you'd like, including gh-pages and docs.

GitHub logo JamesIves / github-pages-deploy-action

Automatically deploy your project to GitHub Pages using GitHub Actions. This action can be configured to push your production-ready code into any branch you'd like.

GitHub Pages Deploy Action 🚀

Unit test status badge Integration test status badge Code coverage status badge Release version badge Github marketplace badge

This GitHub Action will automatically deploy your project to GitHub Pages. It can be configured to push your production-ready code into any branch you'd like, including gh-pages and docs. It can also handle cross repository deployments and works with GitHub Enterprise too

Getting Started ✈️

You can include the action in your workflow to trigger on any event that GitHub actions supports. If the remote branch that you wish to deploy to doesn't already exist the action will create it for you. Your workflow will also need to include the actions/checkout step before this workflow runs in order for the deployment to work.

You can view an example of this below.

name: Build and Deploy
on: [push]
jobs
  build-and-deploy:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout 🛎️
        uses: actions/checkout@v2.3.1

      - name: Install and Build
Enter fullscreen mode Exit fullscreen mode

quicktype

quicktype generates strongly-typed models and serializers from JSON, JSON Schema, TypeScript, and GraphQL queries, making it a breeze to work with JSON type-safely in many programming languages.

GitHub logo quicktype / quicktype

Generate types and converters from JSON, Schema, and GraphQL

npm version Build status Join us in Slack

quicktype generates strongly-typed models and serializers from JSON, JSON Schema, TypeScript, and GraphQL queries, making it a breeze to work with JSON type-safely in many programming languages.

Supported Inputs

JSON JSON API URLs JSON Schema
TypeScript GraphQL queries

Target Languages

Missing your favorite language? Please implement it!

Installation

There are many ways to use quicktype. app.quicktype.io is the most powerful and complete UI. The web app also works offline and doesn't send your sample data over the Internet, so paste away!

For the best CLI, we recommend installing quicktype globally via npm:

npm install -g quicktype
Enter fullscreen mode Exit fullscreen mode

Other options:


dribbble shots

Money transfer app mock-ups

by [Prakhar Neel Sharma](https://dribbble.com/shots/16836057-Money-transfer-app-mock-ups)

by Prakhar Neel Sharma

Cinely Streaming Real Project

by [Arshia Amin Javahery](https://dribbble.com/shots/16852940-Cinely-Streaming-Real-Project)

by Arshia Amin Javahery

Fitness App UI Exploration

by [Saber Ali](https://dribbble.com/shots/16851920-Fitness-App-UI-Exploration)

by Saber Ali


Tweets


Picked Pens

Paper plane

by Temani Afif

Generative Bauhaus Grid Patterns

by George Francis

Diagonal Page Transitions

by Chris Coyier


Podcasts worth listening

CodePen Radio – Challenges

Marie and Chris talk about CodePen Challenges, which have been going strong for many years now.

Call with Kent – Learning Gaps & Cluelessness as a Developer

Hello Kent, I learnt software development in a self-taught path and I really didn't do a good job because when I hear words like Serverless and others, I don't have the first clue what they are talking about.

Syntax – Web Containers, StackBlitz, and Node.js in the Browser

In this episode of Syntax, Scott and Wes talk with Tomek Sulkowski about web containers, StackBlitz and more!


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

Discussion (0)