DEV Community

Cover image for Weekly Digest 27/2021 - Top of the Week
Marco Biedermann for World In Dev

Posted on

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:

  1. 👍 React to this post
  2. ✉️ 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…

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

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

SVG Favicons in Action

npm audit: Broken by Design

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

npm audit: Broken by Design


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.

GitHub logo internetwache / GitTools

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

GitHub stars GitHub license

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 [*]

Geist

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

GitHub logo geist-org / react

Modern and minimalist React UI library.

Codecov CircleCI npm (scoped)

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

Quick Start

  1. run yarn add @geist-ui/react or npm i @geist-ui/react install it.

  2. import into project:

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

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

Documentation


Development


Showcases


LICENSE

MIT


dribbble shots

Recipe App Design

https://cdn.dribbble.com/users/554465/screenshots/16012961/media/2da8dcb9937c426d2ef5ba7c10af79ea.png

by Hadi Altaf

Furniture Landing Page

https://cdn.dribbble.com/users/4898370/screenshots/16018403/media/2419f9fbb71ac0d98d01039c2bafca31.png

Recipe App

https://cdn.dribbble.com/users/554465/screenshots/16016464/media/1cdd68212f3016daac30b935c676d75a.png

by Hadi Altaf

Cryptocurrency Market Landing

https://cdn.dribbble.com/users/2187824/screenshots/16015626/media/feaa09e74288b990dd51150d1073e772.png

by Sigit Setyo Nugroho

Web Header

https://cdn.dribbble.com/users/6682392/screenshots/16017767/media/93879f224ab4a2a45063f2bc0579b171.png

by Orix Agency

Marova - Virtual Art Gallery

https://cdn.dribbble.com/users/3962119/screenshots/16018613/media/2b6e662514e261f4d483db3dc4ab5f87.png

by Zumur Deb


Tweets


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!


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

Discussion (0)