Weekly Digest 27/2021 - Top of the Week

Welcome to my Weekly Digest #27.

This weekly digest contains a lot of interesting and inspiring articles, videos, tweets, podcasts, and designs I consumed during this week.

🎉 Giveaway

We are giving away any course you need on Udemy. Any price any course.
To enter you have to do the following:

👍 React to this post
✉️ Subscribe to our newsletter

You will receive our articles directly to your inbox 📬.

Interesting articles to read

`export default thing` is different to `export { thing as default }`

Here's how they differ, and when it matters…

SVG Favicons in Action

Ever heard of favicons made with SVG? If you are a regular reader of CSS-Tricks, you probably have. But does your website actually use one? The task is

npm audit: Broken by Design

Found 99 vulnerabilities (84 moderately irrelevant, 15 highly irrelevant)

Some great videos I watched this week

React's Automatic State Batching

Little known fact React batches your state state changes to result in only a single render (DOM) update. Except when it didn't, But now it does.

by Basarat

Building a Data-Backed Next.js Site with Prisma & App Platform

Chris is joined by Chris Sev from Digital Ocean to talk about their new App Platform. They're going to use it to build a little website: The site will be blog-like: Posts with IDs, titles, content, and the more dynamic bit: “likes”. They're going to use some pretty modern tech to get it done.

by Chris Coyier

Type safe GraphQL with TypeScript

When building with GraphQL you define the schema up front and this can be really handy go use when it comes to writing the queries, resolvers, etc., especially if it’s in TypeScript. So, how do you go about doing the type generation? We’ll take a look at a tool that can generate you the TypeScript types, then implement our backend using them before looking at how they can plug into the front end with React Hooks.

by Aaron Powell

Are You Making This Mistake With CSS Colors?

Every developer needs to define colors in CSS at some point and generally when a developer defines colors in CSS they use RGB or HEX to write out those colors. Technically there is nothing wrong with doing this, but it is far from the best way to write colors in CSS.

by Web Dev Simplified

VS Code tips: JSDoc links

Use @ link tags in JSDoc comments to link to symbols in your JavaScript or TypeScript project.

by Matt Bierner

Useful GitHub repositories

GitTools

This repository contains three small python/bash scripts used for the Git research.

internetwache / GitTools

A repository with 3 tools for pwn'ing websites with .git repositories available

GitTools

This repository contains three small python/bash scripts used for the Git research. Read about it here

Finder

You can use this tool to find websites with their .git repository available to the public

Usage

This python script identifies websites with publicly accessible .git repositories It checks if the .git/HEAD file contains refs/heads.

$ ./gitfinder.py -h

###########
# Finder is part of https://github.com/internetwache/GitTools
#
# Developed and maintained by @gehaxelt from @internetwache
#
# Use at your own risk. Usage might be illegal in certain circumstances.
# Only for educational purposes!
###########

usage: gitfinder.py [-h] [-i INPUTFILE] [-o OUTPUTFILE] [-t THREADS]

optional arguments:
  -h, --help            show this help message and exit
  -i INPUTFILE, --inputfile INPUTFILE
                        input file
  -o OUTPUTFILE, --outputfile OUTPUTFILE
                        output file
  -t THREADS, --threads THREADS
                        threads

The input file should contain the targets one per line The script will output discovered domains in the form of [*]…

View on GitHub

Geist

Modern and minimalist React UI library, originating from Vercel's design.

geist-org / react

Modern and minimalist React UI library.

Modern and minimalist React UI library, originating from Vercel's design.

Quick Start

run yarn add @geist-ui/react or npm i @geist-ui/react install it.
import into project:

import { GeistProvider, CssBaseline } from '@geist-ui/react'

const Application = () => (
  <GeistProvider>
    <CssBaseline /> // ---> Normalize styles
    <AppComponent /> // ---> Your App Component
  </GeistProvider>
)

Documentation

Development

Contributing Guide

Showcases

LICENSE

MIT

View on GitHub

dribbble shots

Recipe App Design

by Hadi Altaf

Furniture Landing Page

Tweets

Addy Osmani

@addyosmani

The CSS :is() pseudo-class is useful for writing repetitive selectors in a more compact form: goo.gle/cssis by @argyleink covers it well!

07:00 AM - 05 Jul 2021

Lee Robinson

@leeerob

transform.tools is so incredible.

◾️CSS → Tailwind
◾️SVG → JSX
◾️HTML → JSX
◾️JSON → GraphQL
◾️JSON → TypeScript
◾️Mardown → HTML

And more! Built with Next.js and @vercel 🔥

17:00 PM - 06 Jul 2021

StackBlitz

@stackblitz

💡 Forms tip! (6)

Checkbox can be indeterminate, but you have to set that with JavaScript.

14:13 PM - 06 Jul 2021

Michael Shilman

@mshilman

Excited for @storybookjs Component Story Format v3!

📓 Automatic titles
🌈 Default render functions
♻️ Spreadable story objects
▶️ Play functions for interaction
✅ 100% back compat

Love reading? RFC 👉 storybook.js.org/blog/component…

Hate reading? Check my demo 🎥

13:15 PM - 07 Jul 2021

GitHub

@github

Issues are where you’re doing all your work so we’re making it easier to keep track of your progress with task lists ✅ Try it out in any repo today! github.blog/changelog/2021…

20:00 PM - 08 Jul 2021

Adam Argyle

@argyleink

#CSS `color-contrast()`
can't be available soon enough!
soooo nice, from DX to UX

here I use it to ensure the text selection highlight contrasts against 🤷‍♂️, don't care. CSS will figure it out.

(only in Safari TP for now)

CSS Color Level 5 spec
w3.org/TR/css-color-5…

13:02 PM - 09 Jul 2021

Picked Pens

Generative parallelogram covering

by Zach Saucier

Podcasts worth listening

Syntax - JavaScript Event Buzzwords

In this Hasty Treat, Scott and Wes define some JavaScript Buzzwords and talk about what they mean!

Ladybug Podcast - Python

Normally, we talk about frontend development -- but there’s so many other niches within programming out there. Today we’re going to talk about Python what it’s used for, why it’s great, and how it’s different than JavaScript.

The CSS Podcast - Accessibility

Today we are breaking down accessibility related styling choices to ensure a better user experience for all of your users. These include focus visibility, keyboard navigation, and more!