DEV Community

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

Posted on

Weekly Digest 18/2022

Welcome to my Weekly Digest #18 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

Roboto … But Make It Flex

Google’s most popular font gets customizable with the launch of Roboto Flex

Roboto Flex now on Google Fonts - Material Design

Learn CSS Subgrid

A deep-dive into the new CSS subgrid feature with real-life examples and use-cases.

Learn CSS Subgrid - Ahmad Shadeed

Why I don't miss React: a story about using the platform

https://www.jackfranklin.co.uk/blog/working-with-react-and-the-web-platform/


Some great videos I watched this week

TypeScript tips and Tricks with Matt

Special guest and TypeScript guru Matt Pocock joins the stream to teach you the ways of the TypeScript ninja.

by Visual Studio Code

How To Create Your Own Implementation Of JavaScript Promises

One of the most common types of interview questions is to recreate a common feature in JavaScript. This may be as simple as recreating some higher-order array methods or as complex as creating an entire promise library from scratch.

by Web Dev Simplified

100+ Computer Science Concepts Explained

Learn the fundamentals of Computer Science with a quick breakdown of jargon that every software engineer should know. Over 100 technical concepts from the CS curriculum are explained to provide a foundation for programmers.

by Fireship

Convert Markdown & CMS Content Into Type-Safe JSON

Contentlayer is an SDK that transforms content from any source (including Markdown) into type-safe JSON. Johannes Schickling will teach us how it works and how we can use it in our own projects.

by Jason Lengstorf


Useful GitHub repositories

WebPageTest GitHub Action

Automatically test code changes in WebPageTest and enforce performance budgets

GitHub logo WPO-Foundation / webpagetest-github-action

Automatically test code changes in WebPageTest and enforce performance budgets

WebPageTest Logo

Learn about more WebPageTest API Integrations in our docs

WebPageTest GitHub Action

License

WebPageTest's GitHub Action lets you automatically run tests against WebPageTest on code changes. You can set and enforce performance budgets, and have performance data automatically added to your pull requets to move the performance conversation directly into your existing development workflow.

Features:

  • Automatically run WebPageTest against code changes
  • Set and enforce budgets for any metric WebPageTest can surface (spoiler alert: there are a lot)
  • Complete control over WebPageTest test settings (authentication, custom metrics, scripting, etc)
  • Automatically create comments on new pull requests with key metrics, waterfall and more.

Using the Action

  1. Get a WebPageTest API Key and store it as a secret in your repository's settings.

WPT_API_KEY Secret in repo settings

  1. Create a .github/workflows/webpagetest-action.yml file in your repository with the following settings:
on: [pull_request]
jobs:
  build:
    runs-on: ubuntu-latest
    name: WebPageTest Action
    steps:
      - name: Checkout
Enter fullscreen mode Exit fullscreen mode

dribbble shots

Bettermotion Project

by [Arman Rokni](https://dribbble.com/shots/18151754-Bettermotion-Project)

by Arman Rokni

Food Delivery Mobile App UI

by [Shahriar Sultan](https://dribbble.com/shots/18185569-Food-Delivery-Mobile-App-UI)

by Shahriar Sultan

E-Wallet App

by [Md. Rakibul Hasan](https://dribbble.com/shots/18189441-E-Wallet-App)

by Md. Rakibul Hasan


Tweets


Picked Pens

Draggable LightSaber

by Jhey

CSS-Only Pokémon Quest Icon Sorter

by Gabrielle Wee

Robot Vacuum Simulator 5000

by Kit Jenson

Bump - Agressive Toggle

by Yeshua Emanuel Braz


Podcasts worth listening

Syntax – WTF is the Edge? Edge Compute / Functions

In this episode of Syntax, Wes and Scott talk about what edge functions are, the upsides and downsides of edge functions, and what they're used for.


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

Discussion (0)