Welcome to my Weekly Digest #36 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
EyeDropper API Dropped
Chrome has shipped the EyeDropper API in v95.
Build an Instagram-like infinite scrolling feed with React Query
Learn how to build an Instagram-like infinite scrolling feed in a React application with React Query’s useInifiniteQuery() Hook.
Build an Instagram-like infinite scrolling feed with React Query - LogRocket Blog
An Interactive Guide to Keyframe Animations
CSS keyframe animations are incredibly flexible and powerful, but they’re also a bit weird. In this deep-dive tutorial, we'll learn how CSS keyframes work from the ground up, and see how to use them to build high-quality animations.
An Interactive Guide to Keyframe Animations
Some great videos I watched this week
13 Advanced Git Techniques and Shortcuts
Productive programmers tend to be really good at Git. Take a look at 13 advanced git tips and tricks to supercharge your development workflow.
by Fireship
What Is Fastify?
by LevelUpTuts
Thinking on ways to solve split buttons
In today's GUI challenge I share my thinking on a way to solve split buttons. A staple component for condensed interfaces, it allows a single button to feature secondary actions. Lots of great tips about theming, shadows, color, layouts, interaction UX, and more.
by Adam Argyle
Machine Learning Explained in 100 Seconds
Machine Learning is the process of teaching a computer how to perform a task without explicitly programming it. The process feeds algorithms with large amounts of data to gradually improve predictive performance.
by Fireship
Meet an Extension: Shorten URLs
Wish your app could automatically shorten those large, ungainly URLs into something more… uh… gainly? Well, with the Shorten URLs extension, we can take any URL you store in a Firestore collection, send it over to bit.ly, and convert those URLs into something a lot shorter and a lot easier to share with your friends!
by Firebase
CSS Modules in CSS Modules
There is a newly-dropped Chromium feature to import stylesheets, which turns them into a constructible Stylesheet. Dave shows Chris how it works, the clutch feature being that you have a real JavaScript object of the stylesheet to potentially manipulate before using.
by Chris Coyier
Useful GitHub repositories
Women World Wide Dev
WomenWorldWide.dev is a map of coding and tech groups around the world for all who identify as women.
Women World Wide Dev 🗺 👩🏾💻👩🏿💻👩🏻💻👩🏽💻👩🏼💻
WomenWorldWide.dev is a map of coding and tech groups around the world for all who identify as women.
This map represents just a tiny sliver of the great organizations that share this focus.
If you know of a local group that should be on the map, please submit a pull request, so that we can be sure to add it!
Running the repo locally
If you'd like to submit a pull request, you can run the project locally:
git clone git@github.com:prisma/women-world-wide.git
cd women-world-wide
yarn
yarn develop
Contributions 🤝
We are actively seeking to add additional organizations for the map. To add your group, please add each of the organization's locations as a separate JSON file in the src/data/orgs directory.
You can see an example below (using the Women Who Code Atlanta organization):
{
"image": "https://pbs.twimg.com/profile_images/1016008941757718528/tCnG03WW_400x400.jpg"
"name": "Women Who Code Atlanta",
"country": "usa",
"city": "atlanta",Microbundle
The zero-configuration bundler for tiny modules, powered by Rollup.
developit
/
microbundle
📦 Zero-configuration bundler for tiny modules.
Microbundle
The zero-configuration bundler for tiny modules, powered by Rollup.
Guide → Setup ✯ Formats ✯ Modern Mode ✯ Usage & Configuration ✯ All Options
✨ Features
-
One dependency to bundle your library using only a
package.json - Support for ESnext & async/await (via Babel & async-to-promises)
- Produces tiny, optimized code for all inputs
- Supports multiple entry modules (
cli.js+index.js, etc) - Creates multiple output formats for each entry (CJS, UMD & ESM)
- 0 configuration TypeScript support
- Built-in Terser compression & gzipped bundle size tracking
🔧 Installation & Setup
npm i -D microbundle
package.json:
{
"name": "foo", // your package name
"type": "module",
"source": "src/foo.js", // your source code
"exports": "./dist/foo.modern.js", // where to generate the modern bundle (see below)
"main": "./dist/foo.cjs", // where to generate the…TSDX
Build production-ready TypeScript packages. The world's leading companies use TSDX to build and test TypeScript packages
Despite all the recent hype, setting up a new TypeScript (x React) library can be tough. Between Rollup, Jest, tsconfig, Yarn resolutions, ESLint, and getting VSCode to play nicely....there is just a whole lot of stuff to do (and things to screw up). TSDX is a zero-config CLI that helps you develop, test, and publish modern TypeScript packages with ease--so you can focus on your awesome new library and not waste another afternoon on the configuration.
dribbble shots
Illustration and Hero section concept
by prajil
loja CUPS.
by Pablo Galvão
Social Media App
eCommerce Mobile App Design
Tweets
Miriam (But Terrible)@terriblemia
✨ You can now play with Cascade Layers in two browsers (behind flags):
- Firefox Nightly » about:config » layout.css.cascade-layers.enabled
- Chrome Canary » runtime flag » --enable-blink-features=CSSCascadeLayers
codepen.io/miriamsuzanne/…20:22 PM - 09 Sep 2021
Chrome Developers@chromiumdev📢 Full control with the VirtualKeyboard API:
👉 web.dev/virtualkeyboar…
Check out @tomayac's latest article to learn how to manage yourself how the browser deals with content occlusion when a touch device's virtual keyboard ⌨️ appears.17:15 PM - 10 Sep 2021
Freya Holmér@freyaholmerbtw these large scary math symbols are just for-loops14:21 PM - 11 Sep 2021
Picked Pens
Pure CSS logarithmic spiral
by Ana Tudor
SVG Debit Card Animation 4
by Tom Miller
Podcasts worth listening
Syntax – TypeScripts Strict Explained
In this Hasty Treat, Scott and Wes talk about the Typescript strict flag — what it does and why you might use it.
Syntax – Sass × Houdini × No JS? × Solid Project × First Dev Job Tips × Bartering × DRM × Dev Laptops × Databases × Frontity
It's another Potluck! In this episode, Scott and Wes answer your questions about Sass, Houdini, JS requirements, tips for your first dev job, dev laptops, databases, Frontity, and more!
Thank you for reading, talk to you next week, and stay safe! 👋
Latest comments (0)