Forem: Marco Biedermann

Weekly Digest 33/2022

Marco Biedermann — Sun, 21 Aug 2022 18:43:58 +0000

Welcome to my Weekly Digest #33.

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

Communicating Effectively As A Tech Lead

Here are Addy’s tips for communicating effectively as a technical lead, including tips for how to talk to your teams and stakeholders.

Communicating Effectively As A Tech Lead

How and why we removed jQuery from GOV.UK

Removing jQuery from GOV.UK was a huge yet manageable task that led to improved code and performance gains across the site. This is how and why we did this work.

How and why we removed jQuery from GOV.UK

Some great videos I watched this week

What are Chrome's origin trials?

Origin trials are a way to test a new or experimental web platform feature. A third-party origin trial makes it possible for providers of embedded content to try out a new feature across multiple sites.

by Google Chrome Developers

Getting Creative with Keyframes

Working with keyframes can be difficult even if you only have one animation, but the real problems begin when you have 3 objects with 5 animations, each of which has different keyframes, duration, timing-function… and yet they all need to be exactly synchronized. So how do we do that?!

by Amit Sheen

Safely Handling Dynamic Data with TypeScript

TypeScript makes JavaScript safer by adding static type definitions. Static definitions are wonderful; they prevent developers from making trivial mistakes by ensuring every assignment and invocation is done correctly.

by Ethan Arrowood

Useful GitHub repositories

Zodios

Zodios is a TypeScript API client with auto-completion features backed by Axios and zod

ecyrbe / zodios

typescript http client with zod validation

Zodios

Zodios is a typescript api client with auto-completion features backed by axios and zod
Documentation

What is it ?

It's an axios compatible API client, with the following features:

really simple centralized API declaration
typescript autocompletion in your favorite IDE for URL and parameters
typescript response types
parameters and responses schema thanks to zod
response schema validation
bearer token injection and token renewal with simple token provider interface
all axios features available

Table of contents:

View on GitHub

The PBR Database API

A database of physically based values for CG artists.

AntonPalmqvist / physically-based-api

A database of physically based values for CG artists.

The PBR Database API

A database of physically based values for CG artists.

Access the API here: https://api.physicallybased.info

Implementations

Web https://physicallybased.info

Accuracy

These reference values are based on the most accurate data available at the time, and are continually updated whenever new measurements are available. Depending on the material and the property you're after, there is more or less variability to take into account. Use these values as a starting point, or as validation for your existing materials, and then tweak further using your artistic freedom.

View on GitHub

tsx

TypeScript Execute (tsx): Node.js enhanced with esbuild to run TypeScript & ESM

esbuild-kit / tsx

⚡️ TypeScript Execute (tsx): Node.js enhanced with esbuild to run TypeScript & ESM

tsx

TypeScript Execute (tsx): Node.js enhanced with esbuild to run TypeScript & ESM files

Features

Blazing fast on-demand TypeScript & ESM compilation
Works in both CommonJS and ESM packages
Supports next-gen TypeScript extensions (.cts & .mts)
Supports node: import prefixes
Hides experimental feature warnings
TypeScript REPL
Resolves tsconfig.json paths
Tested on Linux & Windows with Node.js v12~18

Support this project by ⭐️ starring and sharing it. Follow me to see what other cool projects I'm working on! ❤️

About

tsx is a CLI command (alternative to node) for seamlessly running TypeScript & ESM, in both commonjs & module package types.

It's powered by esbuild so it's insanely fast.

Want to just run TypeScript code? Try tsx:

npx tsx ./script.ts

How does it compare to ts-node? Checkout the comparison.

Install

Local installation

If you're using it in an npm project, install it as…

View on GitHub

dribbble shots

Tweets

Stefan Judis

@stefanjudis

TIL you can force push git branches with `+`.

14:35 PM - 14 Aug 2022

Elijah Manor

@elijahmanor

⚡️ Quick 2-minute video!

✅ Check out a PR from the terminal with search functionality and a live preview!

📹 Video builds the command piece by piece using:

• gh: GitHub CLI
• fzf: command-line fuzzy finder
• awk: text parsing tool
• xargs: converts stdin into arguments

13:00 PM - 16 Aug 2022

Pawel Grzybek

@pawelgrzybek

There is no better way to craft multi-line terminal commands than Composer in iTerm2.

1. ⌘ + ⇧ + . to open a Composer
2. Type some cool multi-line command
3. ⇧ + Return to execute

Nice, right? 😃

15:57 PM - 17 Aug 2022

Sarah Dayan

@frontstuff_io

Do we really need more swag at tech events? A lot of it eventually becomes plastic waste after years gathering dust on a cluttered shelf.

Could be nice for attendees to have options: either get your swag bag or have a donation in your name to an OSS project of your choice.

11:30 AM - 18 Aug 2022

Picked Pens

Animated Star Rating

by Jon Kantner

Custom Tooltip

by Adir

Podcasts worth listening

Syntax – CSS Proposals @when, CSS Masonry, Carets

In this episode of Syntax, Wes and Scott talk about proposals to CSS including @when, CSS Masonry, CSS Caret, ENV Vars, and Media Query Ranges.

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

Weekly Digest 32/2022

Marco Biedermann — Sun, 14 Aug 2022 16:29:11 +0000

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

How Our Organization Improved Web Accessibility (Case Study)

In this article, Catherine Houle and Ilknur Eren share how their organization “Understood” removes barriers for people who learn and think differently by combining accessibility and usability in their processes.

How Our Organization Improved Web Accessibility (Case Study) - Smashing Magazine

The Study of Shaders with React Three Fiber

A complete guide on how to use shaders with React Three Fiber, work with uniforms and varyings, and build dynamic, interactive and composable materials with them through 8 unique 3D scenes.

The Study of Shaders with React Three Fiber - Maxime Heckel's Blog

Some great videos I watched this week

Unicode, in friendly terms: ASCII, UTF-8, code points, character encodings, and more

Ever been bit by a Unicode bug? Maybe you weren't treating UTF-8 encoded data correctly, or tried to read it as ASCII? Maybe you mixed up UTF-8 vs UTF-16? Unicode and character encoding might seem like a tricky topic, but let's break them down and learn about them piece by piece, from ASCII to code points to graphemes to combining character modifiers and more.

by Alex

How to inspect animations

You can use the Animations tab in DevTools to inspect, scrub and modify animations.

by Google Chrome Developers

Creative CSS Layout

CSS layout has moved along in leaps and bounds in the past few years. Beyond flexbox and Grid, there is aspect-ratio, min, max and clamp functions, custom properties, and logical properties, all of which can help us solve common layout challenges.

by Michelle Barker

Hugo in 100 Seconds

Hugo is an extremely fast static site generator for building websites with markdown. It is written in the Go programming language and provides a large collection of content management tools for developers.

by Fireship

Useful GitHub repositories

Lyra

Fast, in-memory, typo-tolerant, full-text search engine written in TypeScript.

nearform / lyra

🌌 Fast, in-memory, typo-tolerant, full-text search engine written in TypeScript.

Try the live demo

Installation

You can install Lyra using npm, yarn, pnpm:

npm i @nearform/lyra

yarn add @nearform/lyra

pnpm add @nearform/lyra

Usage

Lyra is quite simple to use. The first thing to do is to create a new database instance and set an indexing schema:

import { create, insert, search, remove } from '@nearform/lyra';
const db = create({
  schema: {
    author: 'string',
    quote: 'string'
  }
});

Lyra will only index string properties, but will allow you to set and store additional data if needed.

Once the db instance is created, you can start adding some documents:

insert(db, {
  quote: 'It is during our darkest moments that we must focus to see the light.',
  author: 'Aristotle'
});
insert(db, {
  quote: 'If you really

…

View on GitHub

Fluent Emoji

Fluent Emoji are a collection of familiar, friendly, and modern emoji from Microsoft.

microsoft / fluentui-emoji

Fluent Emoji

Fluent Emoji are a collection of familiar, friendly, and modern emoji from Microsoft.

Contact

Please feel free to open a GitHub issue and assign to the following points of contact with questions or requests.

Jason Custer(@jasoncuster) / Spencer Nelson(@spencer-nelson) - Design

Code of Conduct

This project has adopted the Microsoft Open Source Code of Conduct. For more information see the Code of Conduct FAQ or contact opencode@microsoft.com with any additional questions or comments.

View on GitHub

dribbble shots

Birdies: Dream Team

by Anna Kirilenko

CosyPOS – restaurant POS system

by Dmitry Lauretsky

Niafty - NFT mobile app

by Azhar Dwi

Tweets

Daniel Velasquez

@anemolito

This is one of my favorite executions of motion in Webgl by @hellomondaycom

Not only it's satifying to flip pages, but it supports and guides you through a powerful message!

See it here: howtotalktowhitekidsaboutracism.com

14:12 PM - 08 Aug 2022

Marco Biedermann

@biedermannmarco

Another great use-case for using the CSS `:has` selector: Adding an asterisk to a form label if the input field is required. No need to add any additional markup

#web #webdevelopment #html #css

09:02 AM - 12 Aug 2022

Picked Pens

Sparkly Shiny Text

by Jhey

CSS Portal Ring

by Jhey

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

Weekly Digest 31/2022

Marco Biedermann — Sun, 07 Aug 2022 16:51:53 +0000

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

Exploring CSS Grid’s Implicit Grid and Auto-Placement Powers

When working with CSS Grid there is an approach for creating grids without any explicit definition. We call this the implicit grid.

Exploring CSS Grid's Implicit Grid and Auto-Placement Powers | CSS-Tricks

CSS border animations

Looking at several ways to animate a border in CSS

CSS border animations

Some great videos I watched this week

New in Chrome 104: Region Capture, Media Queries, Shared Element Transitions, and more!

Chrome 104 is rolling out now! With region capture, you can now specify a crop area when using getDisplayMedia to capture the current tab. Media query syntax can be written using mathematical comparison operators. Shared Element Transitions start a new origin trial. And there's plenty more.

by Google Chrome Developers

TensorFlow in 100 Seconds

TensorFlow is a tool for machine learning capable of building deep neural networks with high-level Python code. It provides developer-friendly APIs that help software engineers train, analyze, and deploy ML models.

by Fireship

What are Chrome release channels?

Chrome has four release channels: Canary, Dev, Beta, and Stable. This video explains why, and shows how you can make the most of each channel.

by Google Chrome Developers

Oh, Snap! | CSS Day 2022

CSS scroll-snap is a classic CSS property; a small, innocent-looking API with huge potential. Learn the basics and value essentials of CSS scroll-snap, the ancillary properties scroll-padding, and scroll-margin, debugging with DevTools, plus a bag of snap tricks and a glimpse into supporting future properties.

by Adam Argyle

Useful GitHub repositories

GitHub City

Create a 3D city from your GitHub contributions

honzaap / GithubCity

Create a 3D city from your GitHub contributions 🏙

GitHub City

What would Your city look like?

Create a 3D city from your GitHub contributions 🏙

About

GitHub City uses ThreeJS to generate a 3D city from your GitHub contribution graph.

Using hardware acceleration is highly recommended!

Installation

Clone repository to your local machine
Open terminal and cd into repository folder
run npm install
run npm run dev

View on GitHub

dribbble shots

Finance App

by Rakib Kowshar

Food City Dashboard

by Ella Moodi

Joki - Job Finder App

by Rizal

Tweets

Chris Staud

@chrisstaud

📌 Git Workflow 🎨✨

13:07 PM - 01 Aug 2022

Programmer Humor

@pr0grammerhum0r

Some book recommendations for software engineers reddit.com/r/programmerhu…

09:00 AM - 02 Aug 2022

Pawel Grzybek

@pawelgrzybek

🧠 TIL: There is a `brew autoremove` command that removes no longer needed formulas.

02:58 AM - 05 Aug 2022

Stefan Judis

@stefanjudis

The new VS Code version comes with an experimental "sticky" mode and I quite like it! 👏

`"editor.experimental.stickyScroll.enabled": true`

Video alt: Scrolling in VS Code showing that function signatures are sticky.

08:10 AM - 05 Aug 2022

Picked Pens

Glowing Marbles

by KrautGTI

Footer sorrow

by Steve Gardner

Hover Glide Image Gallery

by Hyperplexed

Podcasts worth listening

The Call Kent Podcast – Using userEvent vs fireEvent

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

Weekly Digest 30/2022

Marco Biedermann — Sun, 31 Jul 2022 17:11:16 +0000

Welcome to my Weekly Digest #30.

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

Solving “The Dangler” Conundrum with Container Queries and `:has()`

Solving "The Dangler" Conundrum with Container Queries and :has()

Statements Vs. Expressions

One of the most foundational things to understand about JavaScript is that programs are made up of statements, and statements have slots for expressions. In this blog post, we'll dig into how these two structures work, and see how building an intuition about this can help us solve practical problems.

Statements Vs. Expressions

Some great videos I watched this week

Thinking on ways to solve carousels

In today's GUI Challenge, @Adam Argyle shares the features and aspects of a carousel component: adaptive theming, adaptive to various user input types, adaptive to author time options, and adaptive to user preferences.

by Google Chrome Developers

Chrome 104 - What’s New in DevTools

Restart frame during debugging, slow replay options in the Recorder panel, and more.

by Google Chrome Developers

I pressed ⌘B. You wouldn’t believe what happened next

Whenever you press ⌘B in Figma, what happens is a choreography of events of surprising complexity. It’s a collision of two worlds – keyboard shortcuts and typography – each one with hundreds of years of history.

by Marcin Wichary

How to log messages in the Console | DevTools Tips

In this episode, Bramus and Jecelyn walk you through the different ways of logging and filtering messages in the Console.

by Google Chrome Developers

Useful GitHub repositories

magic-regexp

A compiled-away, type-safe, readable RegExp alternative

danielroe / magic-regexp

A compiled-away, type-safe, readable RegExp alternative

🦄 magic-regexp

A compiled-away, type-safe, readable RegExp alternative

Features

Runtime is zero-dependency and ultra-minimal
Ships with transform to compile to pure RegExp
Automatically typed capture groups
Natural language syntax
Generated RegExp displays on hover

📖 Read more

💻 Development

Clone this repository
Enable Corepack using corepack enable (use npm i -g corepack for Node.js < 16.10)
Install dependencies using pnpm install
Run interactive tests using pnpm dev

Similar packages

License

Made with ❤️

Published under MIT License.

View on GitHub

Plop

Consistency Made Simple

plopjs / plop

Consistency Made Simple

Plop

Micro-generator framework that makes it easy for an entire team to create files with a level of uniformity

Documentation also available on plopjs.com

Getting Started

What is Plop?

Plop is what I like to call a "micro-generator framework." Now, I call it that because it is a small tool that gives you a simple way to generate code or any other type of flat text files in a consistent way. You see, we all create structures and patterns in our code (routes, controllers, components, helpers, etc). These patterns change and improve over time so when you need to create a NEW insert-name-of-pattern-here, it's not always easy to locate the files in your codebase that represent the current "best practice." That's where plop saves you. With plop, you have your "best practice" method of creating any given pattern in CODE. Code that can easily be run from the terminal…

View on GitHub

Gum

A tool for glamorous shell scripts

charmbracelet / gum

A tool for glamorous shell scripts 🎀

Gum

A tool for glamorous shell scripts. Leverage the power of Bubbles and Lip Gloss in your scripts and aliases without writing any Go code!

The above example is running from a single shell script (source).

Tutorial

Gum provides highly configurable, ready-to-use utilities to help you write useful shell scripts and dotfiles aliases with just a few lines of code.

Let's build a simple script to help you write Conventional Commits for your dotfiles.

Start with a #!/bin/sh.

#!/bin/sh

Ask for the commit type with gum choose:

gum choose "fix" "feat" "docs" "style" "refactor" "test" "chore" "revert"

Tip: this command itself will print to stdout which is not all that useful To make use of the command later on you can save the stdout to a $VARIABLE or file.txt…

View on GitHub

dribbble shots

Cyberpunk Dystopia 3D Icon Set

by Krafted

Food Delivery Maemlur - Mobile Apps.

by Habibi

Agriculture Assistant App

by Conceptzilla

Tweets

Stefan Judis

@stefanjudis

I feel like I saw a wild and complex CSS selector the last 5 days in a row.

Today's edition – do you remember the quantity query, which allows to style elements only if there's X of them. 😲🙈

19:10 PM - 27 Jul 2022

Chris Heilmann

@codepo8

Want to see all IDs in the current document in the Console?
console.table($$('*[id]'),['tagName','id'])

07:47 AM - 28 Jul 2022

Stefan Judis

@stefanjudis

Every time I discover that zsh/oh-my-zsh has auto path expansion on TAB, I'm so amazed.

But it somehow doesn't stick. Maybe this time!

Video alt: terminal command "cd p/g/s/d" which expands to "cd Projects/github.com/stefanjudis/dotfiles" after pressing tab.

14:30 PM - 28 Jul 2022

Picked Pens

Responsive Faux 3D Content Scroller

by Jhey

CSS only back to top button

by Temani Afif

Cascading CSS Text Effects

by Jhey

Podcasts worth listening

Syntax – What is Bun? The New JS Runtime

In this Hasty Treat, Scott and Wes talk about Bun, a new all-in-one JavaScript runtime. What makes Bun so fast? What's on Bun's roadmap? And why do we need another JavaScript runtime?

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

Weekly Digest 29/2022

Marco Biedermann — Sun, 24 Jul 2022 17:04:34 +0000

Welcome to my Weekly Digest #29 ☀️

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

The case for using Sass in 2022

With CSS adding a lot of equivalent features, is Sass relevant? The answer is still Yes, it is far from obsolete, despite what some folks might tell you.

The case for using Sass in 2022

Help Me Help You: A Guide to Asking for Help

It’s not overly difficult at the end of the day: be kind and provide relevant information so people have a good overview of the context. Then be patient until someone picks it up.

Help Me Help You: A Guide to Asking for Help

Some great videos I watched this week

CSS Variable Secrets

By now most developers use CSS custom properties on the regular, but few understand them deeply enough to harness their full power. Lea will take you on a journey from the practical to the mind-blowing, and from the widely implemented to the cutting edge, demonstrating a host of tips, tricks, and gotchas relating to CSS variables.

by Lea Verou

Overloads vs generics: which is better?

by Matt Pocock

Carbon Lang… The C++ killer?

Carbon is a new early-stage programming language from Google designed as a successor to C++ for low level systems development. It has full interoperability with Cpp, along with improved memory safety, generics, and a cleaner syntax.

by Fireship

Useful GitHub repositories

ML Course Notes

Sharing course notes on all topics related to machine learning, NLP, and AI.

dair-ai / ML-Course-Notes

🎓 Sharing machine learning course / lecture notes.

🎓 Machine Learning Course Notes

A place to collaborate and share lecture notes on all topics related to machine learning, NLP, and AI.

WIP denotes work in progress.

Machine Learning Specialization (2022)

Website | Instructor: Andrew Ng

Lecture	Description	Video	Notes	Author
Introduction to Machine Learning	Supervised Machine Learning: Regression and Classification	Videos	Notes	Elvis
Advanced Learning Algorithms	Advanced Learning Algorithms	Videos	WIP	Elvis
Unsupervised Learning, Recommenders, Reinforcement Learning	Unsupervised Learning, Recommenders, Reinforcement Learning	Videos	WIP	Elvis

MIT 6.S191 Introduction to Deep Learning (2022)

Website | Lectures by: Alexander Amini and Ava Soleimany

Lecture	Description	Video	Notes	Author
Introduction to Deep Learning	Basic fundamentals of neural networks and deep learning.	Video	Notes	Elvis
RNNs and Transformers	Introduction to recurrent neural networks and transformers.	Video	Notes	Elvis
Deep Computer Vision	Deep Neural Networks for Computer Vision.	Video	Notes	Elvis
Deep Generative Modeling	Autoencoders and GANs.	Video	Notes	Elvis
Deep Reinforcement Learning

…

View on GitHub

fireworks.js

A simple fireworks library! Ready to use components available for React, Vue 3, Svelte, Angular, Preact, Solid, and Web Components.

crashmax-dev / fireworks-js

🎆 A simple fireworks library! Ready to use components available for React, Vue 3, Svelte, Angular, Preact, Solid, and Web Components.

A simple fireworks library! | fireworks.js.org

Warning
This readme refers to upcoming v2 version, read here for v1 documentation.

Features

🔥 Zero dependencies
⚙️ Flexible configuration
📦 Lightweight (~3.0kB gzipped)
📜 Supports TypeScript type definition

Browsers support

Edge	Firefox	Chrome	Safari	iOS Safari	Opera	Yandex
✔	✔	✔	✔	✔	✔	✔

Demo

You can play with fireworks-js at fireworks.js.org or stackblitz.com

Installation

npm install fireworks-js

yarn add fireworks-js

pnpm add fireworks-js

Package	Status	Description
fireworks-js		Vanilla JS
@fireworks-js/react		React component
@fireworks-js/preact		Preact component
@fireworks-js/solid		Solid component
@fireworks-js/vue		Vue 3 component
@fireworks-js/svelte		Svelte component
@fireworks-js/angular		Angular component
@fireworks-js/web		Web components

CDN

<!-- jsDelivr  -->
<script src="https://cdn.jsdelivr.net/npm/fireworks-js@2.x/dist/index.umd.js"></script>
<!-- UNPKG -->
<script src="https://unpkg.com/fireworks-js@2.x/dist/index.umd.js"></script

…

View on GitHub

dribbble shots

Torial :: E-Learning Dashboard

by UnArshia

Bumdek - Dating App

by Habibi

Social Media App

by Sajon

Tweets

// Detect dark theme var iframe = document.getElementById('tweet-1549415708928274434-701'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1549415708928274434&theme=dark" }

// Detect dark theme var iframe = document.getElementById('tweet-1549785943837515776-381'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1549785943837515776&theme=dark" }

// Detect dark theme var iframe = document.getElementById('tweet-1550061076594806785-623'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1550061076594806785&theme=dark" }

Picked Pens

Pure CSS Woman With Long Earrings

by Asyraf Hussin

What's really going on?

by Jhey

Podcasts worth listening

Call with Kent – Lack of experience when problem solving

Is there anything that helped you "think better" or "think clearer" to solve issues?

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

Weekly Digest 28/222

Marco Biedermann — Sun, 17 Jul 2022 17:32:06 +0000

Welcome to my Weekly Digest #28

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

Holograms, light-leaks, and how to build CSS-only shaders.

Get a shiny WebGL look without actually using WebGL. In this article we take a look at how CSS blend modes unleash the potential of cool compositing effects without the need for JavaScript

Holograms, light-leaks and how to build CSS-only shaders - Robb Owen

Avoiding `<img>` layout shifts: `aspect-ratio` vs `width` & `height` attributes

By default, an <img> takes up zero space until the browser loads enough of the image to know its dimensions

Avoiding img layout shifts: aspect-ratio vs width & height attributes

A Previous Sibling Selector

Some great videos I watched this week

Demystifyingish SVG paths

Cassie Evans chats to Jake about SVG paths, and what that mess of letters and numbers actually means.

by Google Chrome Developers

Cassandra in 100 Seconds

Apache Cassandra is a wide-column store NoSQL database designed to scale globally with extreme speed and reliability. Try it out for free with the serverless AstraDB

by Fireship

How to emulate CSS user preference media features

You can use DevTools to emulate user preferences like device orientation, light/dark themes, color contrast, reduced motion and more. DevTools is your best friend in building user adaptive interfaces.

by Google Chrome Developers

gzip file compression in 100 Seconds

Gzip is a file compression tool and popular Linux utility used to make files smaller. Learn how file compression works in 100 seconds.

by Fireship

Useful GitHub repositories

jqq

jq Querier: an interactive wrapper around jq

jcsalterego / jqq

jq Querier: an interactive wrapper around jq

jqq

jq Querier: an interactive wrapper around jq

Requirements

jq
Modern-ish Ruby and Bundler

Installation

Clone this repository
bundle install
Optionally: add a nice alias to your ~/.profile or equivalent:

alias jqq="/path/to/jqq.rb"

Usage

Usage: jqq <expr> <file>

Demo

Keybindings

jqq uses readline-like keybindings:

Keybinding	Action
Enter	re-evaluate expression
`ctrl-a`	goto beginning of line
`ctrl-e`	goto end of line
`ctrl-k`	kill line (delete to end of line)
`ctrl-d`	delete next character

Future Work

smart window resize support (re-run only if needed)
stdin support
rewrite in another language
colors!

License

BSD

View on GitHub

React Hook Form Devtools

Chrome extension devtools to help debug forms.

react-hook-form / devtools-extension

📋 Chrome extension devtools to help debug forms.

Requirement

react-hook-form >= 7.33.1
@hookform/devtools >= 4.2.0

Usage

Install extension in Chrome Web Store Or build it yourself / download the release file (then goto Development Run third step)
Install devtools in your project

npm install @hookform/devtools -D

Add DevTool component in your code This won't show devtool component anymore! Just for extension detect your form
(Optional) Add custom form id: <DevTool id="YourFormId" control={control} /> If you don't add it manually, it will be auto generated by uuid
Enjoy!

Development

Install

Note use pnpm only

pnpm install

Run

Run example webpage
Run extension in development mode

pnpm run dev

Open Chrome and navigate to chrome://extensions
Enable Developer mode
Click Load unpacked button and select /dist

Messaging Flow

sequenceDiagram
  participant Webpage
  participant Content Script
  participant Background
  participant Devtools
  participant Popup
  Background-&gt;&gt;Background: Cleanup Cache
  Content Script-&gt;&gt;Webpage: INIT
  Note left of Webpage: Browser has devtools extension
  Webpage-&gt;&gt;Content Script: WELCOME
  Content Script-&gt;&gt;Background: WELCOME

…

View on GitHub

dribbble shots

Outcloud - Cloud Storage Dashboard

by Amirhosein Panahi

Travel App Design

by Hasnur Alam Ujjol

Music Streaming Web App

by 11Daniyal

Tweets

James Ide

@ji

With the newest version of Git 2.37.0, you can run just "git push" to push new branches. No more "--set-upstream origin". Enable with:

git config --global --add --bool push.autoSetupRemote true

20:05 PM - 12 Jul 2022

Tim van der Lippe

@timvdlippe

It's been 0 days since I used @DasSurma's trick to remember the tar arguments to extract it:

eXtract Zhe File (`tar -xzf file.tar.gz`)

09:34 AM - 15 Jul 2022

Picked Pens

This site "has" a Dark Side

by Jhey

Pure CSS Desk Fan

by Jhey

Podcasts worth listening

MobiTech – Graph Theory - from maths to MaaS

This episode of our MobiTech podcast is all about graph theory. The hosts Sarah, and Mahmoud, talk to their colleagues and Björn and Daniel, about how we understand graph theory and how graphs and algorithms like Dijkstra's algorithm can be applied to plan users' routes from A to B. Sounds interesting?

Syntax – 70,000 Serverless Functions with Kristi Perreault of Liberty Mutual

In this supper club episode of Syntax, Wes and Scott talk with Kristi Perreault of Liberty Mutual about why they're using serverless functions, what languages they write in, managing security and montoring, and Kristi's journey into tech as a career.

Call with Kent – Thinking process when reviewing code

Code review is an important practice and increases code quality as well as develops your dev team. What's your thinking process when starting to review a new pull request?

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

Weekly Digest 27/2022

Marco Biedermann — Sun, 10 Jul 2022 16:13:00 +0000

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.

Interesting articles to read

An Accessibility-First Approach To Chart Visual Design

Using a data visualization case study, we will explore how an accessibility-first approach led us down the path of creating a better visual design for charts.

An Accessibility-First Approach To Chart Visual Design - Smashing Magazine

Conditionally Styling Selected Elements in a Grid Container

Conditionally Styling Selected Elements in a Grid Container | CSS-Tricks

Some great videos I watched this week

Horizontal Directional Drilling

This is Daniel's attempt to code a simulation of Horizontal Directional Drilling, laparoscopic surgery for the earth!

by Daniel Shiffman

JavaScript just got way faster

First look at Bun - a fast new JavaScript runtime like Node.js or Deno. Explore the core features of Bun.js and how they might affect full-stack web developers in the future.

by Fireship

What Is Just

by LevelUpTuts

Useful GitHub repositories

Infracost VSCode Extension

See cost estimates for Terraform right in your editor

infracost / vscode-infracost

See cost estimates for Terraform right in your editor💰📉

Infracost VSCode Extension

Infracost's VSCode extension shows you cost estimates for Terraform right in your editor! Prevent costly infrastructure changes before they get into production.

Features

Infracost's extension shows a snapshot of the total cost of resources right above their Terraform definitions. Infracost's output updates on file save. This helps with a few use-cases:

Compare configs, instance types, regions etc: copy/paste a code block, make changes and compare them.
Quick cost estimate: write a code block and get a cost estimate without having to use AWS, Google or Azure cost calculators, or read the long/complicated pricing web pages.
Catch costly typos: if you accidentally type 22 instead of 2 as the instance count, or 1000GB volume size instead of 100, the cost estimate will immediately pick that up and let you know.

Both resource and module blocks support showing cost estimates. Infracost's VSCode extension even supports showing…

View on GitHub

massCode

Next version of massCode. A free and open-source code snippets manager for developers

massCodeIO / massCode

Next version of massCode. A free and open source code snippets manager for developers

massCode

Built with Electron, Vue 3 & Ace Editor.
Inspired by applications like SnippetsLab and Quiver

Latest Release | Documentation | Change Log

Extensions VS Code | Raycast | Alfred

Support

massCode need your support, give a star on this repo or donate. All of this is valuable and will inspire further development.

Features

Organization

massCode allows you to organize snippets using multi-level folders as well as tags. Each snippet has fragments - tabs, which gives even greater level of organization.

Editor

A snippet manager must not only provide organization of snippets but also have a good code editor. That's why under the hood of massCode there's Ace. Ace is a high performance code editor which supports syntax highlighting for over 170 languages. We also added a Prettier to code formatter.

Markdown

massCode allows you to write in Markdown and provide support to syntax highlighting, tables, list and…

View on GitHub

Playwright

Playwright is a framework for Web Testing and Automation. It allows testing Chromium, Firefox and WebKit with a single API.

microsoft / playwright

Playwright is a framework for Web Testing and Automation. It allows testing Chromium, Firefox and WebKit with a single API.

🎭 Playwright

Documentation | API reference

Playwright is a framework for Web Testing and Automation. It allows testing Chromium, Firefox and WebKit with a single API. Playwright is built to enable cross-browser web automation that is ever-green, capable, reliable and fast.

Linux	macOS	Windows
Chromium 104.0.5112.39	✅	✅	✅
WebKit 15.4	✅	✅	✅
Firefox 102.0	✅	✅	✅

Headless execution is supported for all the browsers on all platforms. Check out system requirements for details.

Looking for Playwright for Python, .NET, or Java?

Installation

Playwright has its own test runner for end-to-end tests, we call it Playwright Test.

Using init command

The easiest way to get started with Playwright Test is to run the init command.

# Run from your project's root directory
npm init playwright@latest
# Or create a new project
npm init playwright@latest new-project

This will create a configuration file…

View on GitHub

dribbble shots

Marketplace Platform

by Stanislav Lebedev

Detku - Finance Mobile App

by Arfi Maulana

Track your parcel now!

by Saber Ali

Tweets

Jhey 🔨🐻✨

@jh3yy

HTML/CSS Tips for <img> 🤳

– Use "onerror" to catch and set a fallback "src" ✨
– Set a "subtle" background-color so users know something is coming 💀
– Use CSS aspect-ratio to avoid layout shifts 🖼️
- Remember your "alt" attribute where necessary 🙏

20:56 PM - 03 Jul 2022

Mark Erikson

@acemarke

Bundlephobia has been the "JS bundle size report" tool of choice for years, but bundlejs.com is now _wayyy_ better:

- Define exactly what to export from packages
- Generates treemap analysis
- Configure ESBuild, incl externals and minification

Highly recommended!

22:28 PM - 07 Jul 2022

Stefan Judis

@stefanjudis

Quick CSS tip.🙈

If you use `clamp` with `calc` for things like fluid typography, you can drop the `calc`.

It's baked in! 💪

1️⃣ font-size: clamp(1rem, calc(5vw + 1rem), 5rem);
2️⃣ font-size: clamp(1rem, 5vw + 1rem, 5rem);

Video alt: Example showing that you can drop `calc`.

18:31 PM - 09 Jul 2022

Sam Dutton

@sw12

🧐 To avoid seeing errors from extensions in Chrome DevTools, check 'Selected context only'.

18:29 PM - 08 Jul 2022

Picked Pens

Noisy ghost

by Ksenia Kondrashova

Checkbox Accent Color Pixel Art

by Shaw

Podcasts worth listening

Syntax – CSS5 Color Functions

In this Hasty Treat, Scott and Wes talk about new CSS color functions, and tips for viewing the different options and ways of presenting color that are coming.

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

Weekly Digest 26/2022

Marco Biedermann — Sun, 03 Jul 2022 17:09:24 +0000

Welcome to my Weekly Digest #26 which is the first one in July.

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

Cleaning up deploys you no longer need

Learn how to manually delete old deploys on Netlify to clean up your account history and prevent teammates from rolling back to undesirable states. Netlify automatically deletes errored and failed deploys after 6 months.

How to delete deploys on Netlify | Netlify Blog

My Wonderful HTML Email Workflow

A potent combination of MDX and MJML

My Wonderful HTML Email Workflow

Some great videos I watched this week

Storybook in 100 Seconds

Storybook is a tool used for testing UI components in isolation that works with JS frameworks like React, Angular, Vue, and Svelte. It is especially useful for web developers building design systems and shared libraries.

by Fireship

How to inspect CSS container queries

What are CSS container queries and why do we need them? Learn now on today’s episode of DevTools Tips with Jecelyn Yeen and Una Kravets.

by Google Chrome Developers

Thinking on ways to solve FABs

In today's GUI Challenge, @Adam Argyle builds a couple of floating action buttons (FABs) and talks about the UX and CSS considerations for fixed position buttons on the web.

by Google Chrome Developers

Useful GitHub repositories

m-cli

Swiss Army Knife for macOS

rgcr / m-cli

 Swiss Army Knife for macOS

 m-cli

💥 Swiss Army Knife for macOS !

Overview
Install
Uninstall
How To Use
All Commands
Contributing

Overview

m-cli is a macOS command line tool that lets you interact with utilities and applications entirely in Terminal. It differs from other macOS command line tools in the following ways:

You can easily manage administrative tasks
It doesn't install 3rd party tools since it doesn't have dependencies
Installation is easy and doesn't require intervention
It only uses macOS commands

Install

You can install m-cli using Homebrew, or you can manually install it.

Homebrew install

If you have Homebrew installed, run:

brew install m-cli

Manual install

If you want to manually install m-cli, run:

curl -fsSL https://raw.githubusercontent.com/rgcr/m-cli/master/install.sh | sudo sh

You can also install it to a different path, shown below:

INSTALL_DIR=$HOME/.m-cli sh <(curl -fsSL https://raw.githubusercontent.com/rgcr/m-cli/master/install.sh)

Note: Certain plugins, such as that for the "gatekeeper" command, will not work…

View on GitHub

cheat.sh

the only cheat sheet you need

chubin / cheat.sh

the only cheat sheet you need

Unified access to the best community driven cheat sheets repositories of the world.

Let's imagine for a moment that there is such a thing as an ideal cheat sheet What should it look like What features should it have?

Concise — It should only contain the things you need, and nothing else.
Fast — It should be possible to use it instantly.
Comprehensive — It should contain answers for every possible question.
Universal — It should be available everywhere, anytime, without any preparations.
Unobtrusive — It should not distract you from your main task.
Tutoring — It should help you to learn the subject.
Inconspicuous — It should be possible to use it completely unnoticed.

Such a thing exists! It's easy to install and there's even auto-complete.

Features

cheat.sh

Has a simple curl/browser/editor interface.
Covers 56 programming languages, several DBMSes, and more than 1000 most important UNIX/Linux commands.
Provides…

View on GitHub

dribbble shots

Health App - Track daily steps

by Wahab

Plant Shop App

by Rakib Kowshar

Electricity Bill Pay App

by Md. Nazmul Hasan

Tweets

Jamon

@jamonholmgren

How some developers think “separation of concerns” works.

20:30 PM - 25 Jun 2022

Matan Borenkraout 🥬

@matanbobi

New #CSS feature is rolling out in @googlechrome 104, Individual properties for CSS Transforms!

drafts.csswg.org/css-transforms…

09:14 AM - 27 Jun 2022

Jonathan Neal

@jon_neal

The fastest way to build DOM is just a few lines?

Usage looks like:
let template = html(`<label></label><input />`);

See the benchmarks: jsben.ch/JxusT

04:15 AM - 28 Jun 2022

Russell Goldenberg

@codenberg

just realized i can use a css variable for all transition durations to easily tap into the reduced motion media query!

13:58 PM - 30 Jun 2022

Pawel Grzybek

@pawelgrzybek

🧠 TIL 🧠

Most of the Node.js fs methods take a file path as an argument. Did you know it also accepts an instance of URL? Now you know!

Thanks @rauschma

08:24 AM - 02 Jul 2022

Picked Pens

CSS Rooster Animation

by Md Usman Ansari

SVG play buttons

by Adir

Podcasts worth listening

Syntax – Browser CSS Page Transitions

In this Hasty Treat, Scott and Wes talk about the new Browser CSS Page Transitions API proposal and what features it opens up for developers on the web.

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

Weekly Digest 25/2022

Marco Biedermann — Sun, 26 Jun 2022 16:57:27 +0000

Welcome to my Weekly Digest #25.

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

Different Ways to Write CSS in React

We’re all familiar with the standard way of linking up a stylesheet to the head of an HTML doc, right? That’s just one of several ways we’re able to write CSS. But what does it look like to style things in a single-page application?

Different Ways to Write CSS in React | CSS-Tricks

How to add a theme switcher to Storybook

Learn to control how a story renders by wiring it to a decorator and toolbar items

How to add a theme switcher to Storybook

Some great videos I watched this week

ReactJS `useId` Hook

React 18 brings a lot of exciting features but one of the less celebrated but still extremely useful addition is the new useId hook and that’s exactly what we will cover in this complete tutorial

by Basarat

New in Chrome 103: HTTP 103 early hints, Local Font Access, AbortSignal.timeout, and more!

Chrome 103 is rolling out now! There’s a new HTTP status code that helps the browser decide what content to preload before the page has even started to arrive. The Local Font Access API gives web applications the ability to enumerate and use fonts installed on the user’s computer. There’s an easier way to implement timeouts on asynchronous APIs.

by Google Chrome Developers

The Power of JS Generators

Generators have been around in JavaScript since ES2015, yet remain largely ignored by many JS devs, who don’t see why or how they’d use them in their day-to-day work.

by Anjana Vakil

Every Beginner React Developer Makes This Mistake With State

By far one of the biggest beginner React mistakes I see is developers storing derived state. This is a huge problem that is incredibly hard to detect unless you know what you are looking for.

by Web Dev Simplified

Useful GitHub repositories

Data Structure & Algorithms 101 with doodles

I am trying to describe complex matters in simple doodles!

girliemac / a-picture-is-worth-a-1000-words

I am trying to describe complex matters in simple doodles!

Doodles-as-A-Service Repo

👋 Aloha, this is where you can grab most of my tech doodles and sketchnotes.

I have been posting my tech doodles on Twitter and Microsoft open-source projects and I am repeatedly asked where to get the original images, especially from people who saw some of my works out of context on some social media, so I decided to put all together on one GitHub repo.

Here are some of the latest giditally created handdrawn doodles, as well as photos of analog ones.

All my doodles are under Creative Commons license. So please share with attributions. And I definitely don't want you to NFT them without my permission (and I won't permit you because you don't own them. They are open-sourced to be freely available for educational purpose only!)

Enjoy 🌺

Algorithms

/algorithms

└── 📁algorithms
    ├── 📁png
    │   ├── 📄algorithm101_file.png
    │   └── 📄
    └── 📁tiff
        ├── 📄algorithm101_file.tiff
        └──

…

View on GitHub

Dolt

Dolt – It's Git for Data

dolthub / dolt

Dolt – It's Git for Data

Dolt is Git for Data!

Dolt is a SQL database that you can fork, clone, branch, merge, push and pull just like a git repository. Connect to Dolt just like any MySQL database to run queries or update the data using SQL commands. Use the command line interface to import CSV files, commit your changes, push them to a remote, or merge your teammate's changes.

All the commands you know for Git work exactly the same for Dolt. Git versions files, Dolt versions tables. It's like Git and MySQL had a baby.

We also built DoltHub, a place to share Dolt databases. We host public data for free. If you want to host your own version of DoltHub, we have DoltLab. If you want us to run a Dolt server for you, we have Hosted Dolt.

Join us on Discord to say hi and ask questions.

What's

…

View on GitHub

React Native Elements

Cross-Platform React Native UI Toolkit

react-native-elements / react-native-elements

Cross-Platform React Native UI Toolkit

Cross Platform React Native UI Toolkit

Getting Started 🚀 - Documentation 📚 - Expo demo - Blog - Releases

Installation

npm install @rneui/themed @rneui/base

Follow these instructions to install React Native Elements!

Packages

Package	Version	Downloads
@rneui/base
@rneui/themed

Quick Start

Start using the components or try it on Snack.

import { Button } from '@rneui/base';
const App = () => <Button title="Hello World!" />;

React Native Web support

As a cross platform UI Toolkit, you can now use RNE on the web & share your codebase between your React Native + React web apps. RNE components are rendered perfectly on browser. You can achieve this to target iOS, Android and Web by collaborating RNE and React Native for Web.

Click here for a full walkthrough using React Native Elements + React Native Web.

Expo demo app

Checkout the official React Native…

View on GitHub

dribbble shots

Finance Dashboard

by Rakib Kowshar

Improving health app

by Taras Migulko

Fusen-System

by Jabel Ahmed

Tweets

Chad

@dotdude

Making a happy little input component in @figma using variants, component properties, auto layout, and absolute positioning.

18:06 PM - 21 Jun 2022

Bramus

@bramus

At today’s @csswg meeting we unblocked the path forward to style based container queries. With these you can apply extra CSS based on a property value.

drafts.csswg.org/css-contain-3/…

Initial value of `container-type` will be `none` and all elements will be style containers by default.

18:39 PM - 22 Jun 2022

Bryan Robinson

@brob

This is your regular reminder that you can import your environment variables from your .env file directly into your @Netlify config with the Netlify CLI.

I regularly see this shock folks. It's possible and amazing

Just run `netlify env:import .env` and save yourself a headache

13:41 PM - 23 Jun 2022

Jamon

@jamonholmgren

How some developers think “separation of concerns” works.

20:30 PM - 25 Jun 2022

Picked Pens

Generative Kong Summit Patterns

by Adam Kuhn

Squiggly Pencils

by Jhey

CSS House from "Up"

by Jhey

Podcasts worth listening

Syntax – New Viewport Units

In this episode of Syntax, Wes and Scott talk about the new viewport units coming to the web - what are they and when can we use them?

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

Weekly Digest 24/2022

Marco Biedermann — Sun, 19 Jun 2022 17:49:00 +0000

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

Accelerating GitHub theme creation with color tooling

Learn why the GitHub Design Infrastructure team built a dedicated color tool and how they use it to create new color palettes for GitHub.

Accelerating GitHub theme creation with color tooling | The GitHub Blog

Go ahead, delete your .env.example file

Learn how 1Password Developer Tools give you an alternative way to collaborate on configuration.

Go ahead, delete your .env.example file | 1Password

Some great videos I watched this week

The ins and outs of Core Web Vitals by Dan Shappir

Ever since Google announced the webpage performance, as measured by Core Web Vitals (CWV) is a ranking factor starting May 2021, it has become the de-facto standard for measuring performance on the web.

by Dan Shappir

Dry up your generic signatures with default generics

by Matt Pocock

Chrome 103 - What’s New in DevTools

Record double-click and right-click events, new options to measure user flow in Lighthouse and more.

by Google Chrome Developers

Useful GitHub repositories

Jest-Image-Snapshot

Jest matcher for image comparisons. Most commonly used for visual regression testing.

americanexpress / jest-image-snapshot

✨ Jest matcher for image comparisons. Most commonly used for visual regression testing.

Jest matcher that performs image comparisons using pixelmatch and behaves just like Jest snapshots do! Very useful for visual regression testing.

👩‍💻 Hiring 👨‍💻

Want to get paid for your contributions to jest-image-snapshot?

Send your resume to oneamex.careers@aexp.com

📖 Table of Contents

✨ Features

Take image snapshots of your application
Ability to compare snapshots from a baseline
Update snapshots when you're good with changes
Customize a difference threshold
Add a Gaussian blur for noise
Adjust the diff layout horizontal vs vertical

How it works

Given an image (Buffer instance with PNG image data) the toMatchImageSnapshot() matcher will create a __image_snapshots__ directory in the directory the test is in and will store the baseline snapshot image there on the first run. Note that if customSnapshotsDir option is given then it will store baseline snapshot there instead.

On subsequent test runs the matcher will compare the image…

View on GitHub

Vale

A syntax-aware linter for prose built with speed and extensibility in mind.

errata-ai / vale

📝 A syntax-aware linter for prose built with speed and extensibility in mind.

Vale: Your style, our editor

Vale is a command-line tool that brings code-like linting to prose. It's fast, cross-platform (Windows, macOS, and Linux), and highly customizable

Documentation	Case Studies	Package Hub	Rule Explorer	Config Generator

❤️ Sponsors

Hi there! I'm @jdkato, the sole developer of Vale. If you'd like to help me dedicate more time to developing, documenting, and supporting Vale, feel free to donate through the Open Collective. Any donation—big, small, one-time, or recurring—is greatly appreciated!

Organizations

Individuals

💥 Key Features

Support for markup: Vale has a rich understanding of many markup formats, allowing it to avoid syntax-related false positives and intelligently exclude code snippets from prose-related rules.
A highly customizable extension system: Vale is capable of enforcing your style—be it a standard editorial style guide or a custom in-house set of rules (such as those created by GitLab…

View on GitHub

SVG Spinners

A collection of 24 x 24 dp SVG spinners!

n3r4zzurr0 / svg-spinners

A collection of 24 x 24 dp SVG spinners!

SVG Spinners

All spinners are displayed as 24 x 24 dp. The main content rests inside the live area of 22 dp with a padding of 1dp.

Browser Support

Preview	File Name	Size (Bytes)
	12-dots-scale-rotate.svg	2450
	180-ring-with-bg.svg	493
	180-ring.svg	390
	270-ring-with-bg.svg	542
	270-ring.svg	439
	3-dots-bounce.svg	631
	3-dots-fade.svg	544
	3-dots-moving.svg	2654
	3-dots-rotate.svg	375
	3-dots-scale-middle.svg	459
	3-dots-scale.svg	448
	6-dots-rotate.svg	692
	6-dots-scale-middle.svg	2323
	6-dots-scale.svg	2611
	90-ring-with-bg.svg	487
	90-ring.svg	384
	bars-fade.svg	570
	bars-rotate-fade.svg	894
	bars-scale-fade.svg	1123
	bars-scale-middle.svg	1759
	bars-scale.svg	1759
	blocks-scale.svg	1935
	blocks-shuffle-2.svg	906
	blocks-shuffle-3.svg	1315
	blocks-wave.svg	3688
	bouncing-ball.svg	798
	clock.svg	530
	dot-revolve.svg	357
	eclipse-half.svg	341
	eclipse.svg	333
	gooey-balls-1.svg	1006
	gooey-balls-2.svg	831
	pulse-2.svg	731
	pulse-3.svg	1050
	pulse-multiple.svg	1036
	pulse-ring.svg	683
	pulse-rings-2.svg	1273
	pulse-rings-3.svg	1862
	pulse-rings-multiple.svg	1841
	pulse.svg	381
	tadpole.svg	354
	wifi-fade.svg	1062
	wifi.svg	1128
	wind-toy.svg	1276

View on GitHub

dribbble shots

Troovē - Landing Page Mobile Responsive

by Ihya Fathurr

Food Delivery App

by Lasha Monaselidze

Mobile App Design.

by Mishu

Sekuterin - Scooter Rental App

by Asal Design

Tweets

Jesper van Haaren

@jhaaren

Nice detail on Ikea. When you open another product from the same series in a new tab, the page titles change from the name to the measurements.

21:08 PM - 13 Jun 2022

☄︎

@0xca0a

added pointer events and clicking action, almost getting tempted adding real scrollable html to the phone screen now 😑

codesandbox.io/s/interactive-…

23:14 PM - 14 Jun 2022

Axel Rauschmayer

@rauschma

MacOS: You can copy ESM code (including top-level `await`) to the clipboard and execute it via Node.js as follows.

pbpaste | node --input-type=module

10:18 AM - 16 Jun 2022

Picked Pens

Kill Internet Explorer but don't touch Chrome

by Temani Afif

SVG Image Mask

by Stephanie Eckles

Pure CSS The Queen's Gambit

by Asyraf Hussin

Podcasts worth listening

Syntax – Edge Functions and Deno with Eduardo Bouças of Netlify

In this supper club episode of Syntax, Wes and Scott talk edge functions and Deno with Eduardo Bouças of Netlify.

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

Weekly Digest 23/2022

Marco Biedermann — Sun, 12 Jun 2022 19:32:35 +0000

Welcome to my Weekly Digest #23.

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

Better scrolling through modern CSS

There's more to scrollbars than you might expect

Better scrolling through modern CSS

How to pick the least wrong colors

An algorithm for creating color palettes for data visualization

How to pick the least wrong colors

Monorepos in JavaScript & TypeScript

This is a comprehensive tutorial on Monorepos in JavaScript/TypeScript --- which is using state of the art tools for these kind of architectures in frontend applications.

Monorepos in JavaScript & TypeScript

Some great videos I watched this week

Redwood in 100 Seconds

RedwoodJS is a full-stack JavaScript framework that combines the power of React, GraphQL, and Prisma into a single package. It is used to build serverless web applications with a relational SQL database for the storage layer.

by Fireship

New in Chrome 102: PWAs as File Handlers, inert, the navigation API, and more!

Chrome 102 is rolling out now! Installed PWAs can register as file handlers, making it easy for users to open files directly from disk. The inert attribute allows you to mark parts of the DOM as inert. The navigation API makes it easier for single-page apps to handle navigation and updates to the URL.

by Google Chrome Developers

Lerna 5 Walkthrough

A quick walkthrough of the latest release of Lerna 5 on an example repository with a Remix application and a couple of libraries. We're going to see how to set up Lerna, make tasks running in Lerna extremely fast (powered by Nx), and how to publish packages to an npm registry.

by Nrwl

Why Vitest Is Better Than Jest

Vitest is a simple testing library built on top of Vite which takes everything I love about Jest and brings it to the modern age of JavaScript. Everyone that has worked with Jest knows how much of a pain it is to work with ES modules, but Vitest makes it trivial. Vitest also adds many additional features and quality of life changes that make it better than Jest in my opinion.

by Web Dev Simplified

Useful GitHub repositories

Can I DevTools

Can I DevTools is like Can I Use but for the browser devtools.

pankajparashar / canidev.tools

It's like @CanIUse but for the browser devtools. Created by @pankajparashar & curated by the community.

How to Contribute?

The data is maintained in Airtable exposed at the endpoint data.json. Use the "Add" or "File Issue" links in the web app to propose addition of new features or improve existing features using the Github issue tracker.

View on GitHub

DALL·E

PyTorch package for the discrete VAE used for DALL·E.

openai / DALL-E

PyTorch package for the discrete VAE used for DALL·E.

Overview

[Blog] [Paper] [Model Card] [Usage]

This is the official PyTorch package for the discrete VAE used for DALL·E. The transformer used to generate the images from the text is not part of this code release.

Installation

Before running the example notebook, you will need to install the package using

pip install DALL-E

View on GitHub

1LOC

What's your favorite JavaScript single LOC (line of code)?

1milligram / 1loc

What's your favorite JavaScript single LOC (line of code)?

Favorite single line of code

What's your favorite JavaScript single LOC (line of code)? Let me know!

Running it on local

Clone the project:

$ git clone git@github.com:1milligram/1loc.git

Install the dependencies:

$ cd 1loc
$ npm install

Run it on the local:

$ npm run dev

Look at the console to see the Local URL. Open it in your browser to see it in action.

Contributing

Pull requests are welcomed. To submit your favorite JavaScript single line of code, please create a markdown file, and put it in a particular category of the snippets folder.

About

This project is developed by Nguyen Huu Phuoc. I love building products and sharing knowledge.

Be my friend on

View on GitHub

dribbble shots

Travel Mobile App

by Wahab

Task Management App

by Rakib Kowshar

Plant Shop Mobile App Design

by Mahmudul Hasan

Tweets

Matt Pocock

@mattpocockuk

Doing some thinking about my TS course - I'm leaning towards a creating a 'circle of types'.

You can transform from (nearly) every type to every other type in TypeScript - but knowing how is tough.

This would be an AMAZING visual reference for when you're doing TS in the wild.

12:44 PM - 05 Jun 2022

Alvin Bryan

@alvinbnet

TIL: How to "reveal in finder" with the terminal

Be mindful of the uppercase, otherwise it will scream at you

17:23 PM - 05 Jun 2022

CodeMirror

@codemirror

Over 4 years in the making, a stable release of CodeMirror 6 🌟is now available🌟

discuss.codemirror.net/t/codemirror-6…

08:14 AM - 08 Jun 2022

Álvaro Trigo 🐦🔥

@imac2

I couldn't find a CSS generator to create gradient shadows.

So, I created one! 👇
alvarotrigo.com/shadow-gradien…

11:39 AM - 09 Jun 2022

Josh Tumath

@joshtumath

CSS IS A PROGRAMMING LANGUAGE. BOOLEAN ALGEBRA. BOOM. #cssday

10:39 AM - 09 Jun 2022

Picked Pens

Configurable `<input type="range" mode="circular"/>`

by Jhey

Podcasts worth listening

Syntax – Syntax Live at Reactathon

In this episode of Syntax, Wes and Scott are live from Reactathon 2022!

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

Weekly Digest 22/2022

Marco Biedermann — Sun, 05 Jun 2022 15:17:03 +0000

Welcome to my Weekly Digest #22.

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

Don’t Sink Your Website With Third Parties

In this article, Ken Harker explains what third-party resource requests really are and which common optimization strategies can help reduce the impact on the user experience.

Don't Sink Your Website With Third Parties - Smashing Magazine

Event-Driven Architecture. Part 1: Pros and cons with examples

In this multipart series, we will go step by step in creating a simple event-driven system. In Part 1 we compare this approach with a classic point-to-point communication and look at the advantages and disadvantages of both.

Event-Driven Architecture. Part 1: Pros and cons with examples

Some great videos I watched this week

Chrome 102 - What’s New in DevTools

New Performance insights panel, shortcuts to emulate light/dark themes, and more.

by Google Chrome Developers

Functional programming with 'compose’

by Matt Pocock

Using `extends` to constrain generics

by Matt Pocock

When To Fetch: Remixing React Router

We've learned that fetching in components is the quickest way to the worst UX. But it's not just the UX that suffers, the developer experience of fetching in components creates a lot of incidental complexity too

by Ryan Florence

Useful GitHub repositories

AutoAnimate

A zero-config, drop-in animation utility that adds smooth transitions to your web app. You can use it with React, Vue, or any other JavaScript application.

formkit / auto-animate

A zero-config, drop-in animation utility that adds smooth transitions to your web app. You can use it with React, Vue, or any other JavaScript application.

Add motion to your apps with a single line of code.

AutoAnimate is a zero-config, drop-in animation utility that adds smooth transitions to your web app. You can use it with Vue, React, or any other JavaScript application.

With one line of code, you can improve your interfaces, for example:

Installation

Install using your package manager of choice.

#yarn
yarn add @formkit/auto-animate
#npm
npm install @formkit/auto-animate
#pnpm
pnpm add @formkit/auto-animate

Boom! Done. That was fast! 🐇

Usage

📖 View the documentation site for usage instructions.

Examples

📖 View the documentation site for examples.

Plugins

📖 View the documentation site for plugin instructions.

Support us

Is AutoAnimate saving you time?

Please consider supporting us with a recurring or one-time donation! 🙏

Contributing

Thank you for your willingness to contribute to this free and open source project! When contributing, consider first discussing your desired change…

View on GitHub

Videogrep

Videogrep is a command-line tool that searches through dialog in video files and makes supercuts based on what it finds.

antiboredom / videogrep

automatic video supercuts with python

Videogrep

Videogrep is a command line tool that searches through dialog in video files and makes supercuts based on what it finds. It will recognize .srt or .vtt subtitle tracks, or transcriptions that can be generated with vosk, pocketsphinx, and other tools.

Examples

Tutorial

See my blog for a short tutorial on videogrep and yt-dlp.

Installation

Videogrep is compatible with Python versions 3.6 to 3.10.

pip install videogrep

If you want to transcribe videos, you also need to install ffmpeg and vosk.

If you're on a mac with homebrew you install ffmpeg with:

brew install ffmpeg

To install vosk:

pip install vosk

Note: the previous version of videogrep supported pocketsphinx for speech-to-text…

View on GitHub

dribbble shots

Simple Food Delivery App Concept

by Giorgi

Travel App

by App Ninja

Restaurant Waiter App

by Alexandr V

Tweets

GitHub

@github

GitHub is free for teams of any size working on private as well as open source projects. What cool things you are building? github.blog/2020-04-14-git…

15:08 PM - 28 May 2022

Alex Xu

@alexxubyte

Linux file permission illustrated.

To understand Linux file permissions, we need to understand Ownership and Permission.

15:50 PM - 01 Jun 2022

Khuyen Tran

@khuyentran16

If you want to quickly extract a table on a website and turn it into a Pandas DataFrame, use pd.read_html. In the code below, I extracted the table from a Wikipedia page in one line of code.

#Python

13:56 PM - 02 Jun 2022

Picked Pens

Pure CSS/SVG Tic Tac Toe

by Jhey

Pure CSS Animated Image Zoom

by Jhey

Podcasts worth listening

Syntax – Cache Control Headers Explained

In this Hasty Treat, Scott and Wes answer a question about caching, cache control headers, an explanation of the fields for caching.

Smashing Podcast – Why does accessibility matter?

We ask why accessibility really matters, and why is it so important to get it right? Smashing’s Vitaly Friedman talks in depth to Sara Soueidan to find out.

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

Forem: Marco Biedermann

Weekly Digest 33/2022

Interesting articles to read

Communicating Effectively As A Tech Lead

How and why we removed jQuery from GOV.UK

Some great videos I watched this week

What are Chrome's origin trials?

Getting Creative with Keyframes

Safely Handling Dynamic Data with TypeScript

Useful GitHub repositories

Zodios

ecyrbe / zodios

typescript http client with zod validation

Zodios

What is it ?

The PBR Database API

AntonPalmqvist / physically-based-api

A database of physically based values for CG artists.

The PBR Database API

Implementations

Accuracy

tsx

esbuild-kit / tsx

⚡️ TypeScript Execute (tsx): Node.js enhanced with esbuild to run TypeScript & ESM

tsx

Features

About

Install

Local installation

dribbble shots

Phoveus Team Management Dashboard Design

Restaurant food ordering dashboard

Food Delivery Mobile Apps

Tweets

Picked Pens

Animated Star Rating

Custom Tooltip

Podcasts worth listening

Syntax – CSS Proposals @when, CSS Masonry, Carets

Weekly Digest 32/2022

Interesting articles to read

How Our Organization Improved Web Accessibility (Case Study)

The Study of Shaders with React Three Fiber

Some great videos I watched this week

Unicode, in friendly terms: ASCII, UTF-8, code points, character encodings, and more

How to inspect animations

Creative CSS Layout

Hugo in 100 Seconds

Useful GitHub repositories

Lyra

nearform / lyra

🌌 Fast, in-memory, typo-tolerant, full-text search engine written in TypeScript.

Installation

Usage

Fluent Emoji

microsoft / fluentui-emoji

Fluent Emoji

Contact

Code of Conduct

dribbble shots

Birdies: Dream Team

CosyPOS – restaurant POS system

Niafty - NFT mobile app

Tweets

Picked Pens

Sparkly Shiny Text

CSS Portal Ring

Weekly Digest 31/2022

Interesting articles to read

Exploring CSS Grid’s Implicit Grid and Auto-Placement Powers

CSS border animations

Some great videos I watched this week

New in Chrome 104: Region Capture, Media Queries, Shared Element Transitions, and more!

TensorFlow in 100 Seconds

*What are Chrome release channels?*

Oh, Snap! | CSS Day 2022

Useful GitHub repositories

GitHub City

honzaap / GithubCity

Create a 3D city from your GitHub contributions 🏙

What are Chrome release channels?

Finance App

Solving “The Dangler” Conundrum with Container Queries and `:has()`