DEV Community

Cover image for Weekly Digest 36/2021
Marco Biedermann
Marco Biedermann

Posted on

Weekly Digest 36/2021

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.

EyeDropper API Dropped

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.

GitHub logo developit / microbundle

📦 Zero-configuration bundler for tiny modules.

microbundle

Microbundle npm travis

The zero-configuration bundler for tiny modules, powered by Rollup.


Guide → SetupFormatsModern ModeUsage & ConfigurationAll 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

1️⃣ Install by running: npm i -D microbundle

2️⃣ Set up your 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
Enter fullscreen mode Exit fullscreen mode

TSDX

Build production-ready TypeScript packages. The world's leading companies use TSDX to build and test TypeScript packages

GitHub logo formium / tsdx

Zero-config CLI for TypeScript package development

tsdx

Blazing Fast Blazing Fast Blazing Fast Discord

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

https://cdn.dribbble.com/users/1549225/screenshots/16412114/media/f4516ed9826e093bcf460adf85affe85.png

by prajil

loja CUPS.

https://cdn.dribbble.com/users/3306546/screenshots/16418381/media/bc34d1e6dd0bb012ea09c807020b6d0f.png

by Pablo Galvão

Social Media App

https://cdn.dribbble.com/users/7514969/screenshots/16138528/media/82d409aaed80a267b297fe80f5cff509.png

by Julius Branding

eCommerce Mobile App Design

https://cdn.dribbble.com/users/2399102/screenshots/16412950/media/a5733cfd4dfb9cb09ba3935874cfd62d.jpg

by CMARIX TechnoLabs


Tweets


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! 👋

Discussion (0)