DEV Community

Cover image for Weekly Digest 14/2022
Marco Biedermann
Marco Biedermann

Posted on

Weekly Digest 14/2022

#javascript #webdev #react #css

Welcome to my Weekly Digest #14 of this year.

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

Designing Better Breadcrumbs

Designing Better Breadcrumbs - Smashing Magazine

Exciting Times for Browsers

It’s certainly an exciting time to be working on the web right now, with browser support for new features moving along at a lightning-fast pace!

CSS { In Real Life } | Exciting Times for Browsers (and CSS)

Some great videos I watched this week

Fluid Typography and Layouts with Andy Bell

We're going to learn how to create with consistent, fluidly scaling typography and spacing, all using CSS. Andy will show us some great techniques so that our website is consistent and looks great at every screen size.

by Alex Trost

Structuring Request Handlers — Mock Service Worker

In this recipe, you'll learn about the best practices to structure your request handlers.

by Mock Service Worker

Learn Vitest and Testing Library

Vitest is an amazing fast unit-test testing framework for Vue, React, and Svelte. In this video, Erik discusses how to set it up, how to create some tests, and some cool features of it, including in-source testing and mocking responses with msw.

by Erik Hanchett

DALL-E is coming... World-changing AI image generator

OpenAI just announced a new AI Text-to-Image model based on GPT-3 called DALL-E 2. It is capable of turning a text description into a unique image or work of art that has never been seen before.

by Fireship

Useful GitHub repositories

google-webfonts-helper

A Hassle-Free Way to Self-Host Google Fonts. Get eot, ttf, svg, woff, and woff2 files + CSS snippets

GitHub logo majodev / google-webfonts-helper

A Hassle-Free Way to Self-Host Google Fonts. Get eot, ttf, svg, woff and woff2 files + CSS snippets

google-webfonts-helper

A Hassle-Free Way to Self-Host Google Fonts

This service might be handy if you want to directly download all .eot, .woff, .woff2, .svg, .ttf files of a Google font (normally your User-Agent would determine the best format at Google's CSS API). Furthermore it provides charset customization and CSS snippets, hence getting your fonts ready for local hosting should be finally a breeze.

Give it a try: google-webfonts-helper hosted on Heroku

pic running

REST API

The API is public, feel free to use it directly.

GET /api/fonts

Returns a list of all fonts, sorted by popularity. E.g. curl https://google-webfonts-helper.herokuapp.com/api/fonts:

[{
  "id": "open-sans"
  "family": "Open Sans",
  "variants": ["300", "300italic", "regular", "italic", "600", "600italic", "700", "700italic"
…
Enter fullscreen mode Exit fullscreen mode
View on GitHub

gh-dash

gh CLI extension to display a dashboard of PRs and issues - configurable with a beautiful UI.

GitHub logo dlvhdr / gh-dash

gh cli extension to display a dashboard of PRs and issues - configurable with a beautiful UI.

gh-dash

✨ A GitHub (gh) CLI extension to display a dashboard with pull requests and issues by filters you care about.

Installation

  1. Install the gh CLI - see the installation

    Installation requires a minimum version (2.0.0) of the the GitHub CLI that supports extensions.

  2. Install this extension:

    gh extension install dlvhdr/gh-dash
    Enter fullscreen mode Exit fullscreen mode

  3. To get the icons to render properly you should download and install a Nerd font from https://www.nerdfonts.com/ Then, select that font as your font for the terminal.

Installing Manually

If you want to install this extension manually, follow these steps:

  1. Clone the repo

    # git
git clone https://github.com/dlvhdr/gh-dash
# GitHub CLI
gh repo clone dlvhdr/gh-dash
    Enter fullscreen mode Exit fullscreen mode

  2. Cd into it

    cd gh-dash
    Enter fullscreen mode Exit fullscreen mode

  3. Install it locally

    gh extension install .
    Enter fullscreen mode Exit fullscreen mode
🌈 How do I get these exact colors and font?

I'm using Alacritty with the tokyonight theme and the Fira Code Nerd Font For my full setup check…

View on GitHub

dribbble shots

E-Commerce App - ClockBase

by Ali Husni

by Ali Husni

Task Management App UI Design

by [Rifat Sarkar](https://dribbble.com/shots/17982564-Task-Management-App-UI-Design-To-do-list-Task-Schedule)

by Rifat Sarkar

Electric Skateboard

by [Rylic Studio](https://dribbble.com/shots/17983807-Electric-Skateboard-Product-Landing-Page)

by Rylic Studio

Tweets

Picked Pens

"think" outside the box toggle

by Jhey

Checkbox Animations

by Jon Kantner

Podcasts worth listening

Syntax – Types in JS?

In this Hasty Treat, Scott and Wes talk about a proposal for type syntax in JavaScript.

CodePen Radio – *Chris Nager*

This week Chris got to speak with Chris Nager!

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

Top comments (2)

Collapse
 
vulcanwm profile image
Medea •

It's amazing how you've been doing this since the starting of 2021!

Collapse
 
marcobiedermann profile image
Marco Biedermann • • Edited

Thank you very much. Yeah, it's quite some effort but it also enforces me to stay up to date

Read next

amitkumar13 profile image

Memory Leak Detection in React Native with LeakCanary

Amit Kumar -

whiskeygerman profile image

Web canvas with generative neural networks with elements of visual programming.

German Whiskey -

siisee11 profile image

Langgraph - Human In the Loop

Jaeyoun Nam -

chintanonweb profile image

Step-by-Step Guide to Using React Components as Props Like a Pro

chintanonweb -