Weekly Digest 14/2022

marcobiedermann

Marco Biedermann

Posted on April 10, 2022

Weekly Digest 14/2022

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

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…

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! 👋

💖 💪 🙅 🚩
marcobiedermann
Marco Biedermann

Posted on April 10, 2022

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related

Change navbar color on mouse scroll in React
Weekly Digest 32/2022
javascript Weekly Digest 32/2022

August 14, 2022