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…
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
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.
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 [*]
…
Geist
Modern and minimalist React UI library, originating from Vercel's design.
Modern and minimalist React UI library, originating from Vercel's design.
NOTE: This is a COMMUNITY PROJECT, not associated with Vercel.
Quick Start
-
run
yarn add @geist-ui/core
ornpm i @geist-ui/core
install it. -
import into project:
import { GeistProvider, CssBaseline } from '@geist-ui/core'
const Application = () => (
<GeistProvider>
<CssBaseline /> // ---> Normalize styles
<AppComponent /> // ---> Your App Component
</GeistProvider>
)
Documentation
Development
Showcases
- Secret
- Article view count
- Tree viewer for CDN
- Better social image
- SentiNEO: Near-Earth Objects Viewer
- Dashboard Design
- Regex-Vis: Regex visualizer & editor
- Add here
LICENSE
dribbble shots
Recipe App Design
by Hadi Altaf
Furniture Landing Page
Recipe App
by Hadi Altaf
Cryptocurrency Market Landing
Web Header
by Orix Agency
Marova - Virtual Art Gallery
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! 👋
Top comments (0)