DEV Community

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

Posted on

Weekly Digest 38/2021

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

Systems for z-index

Say you have a z-index bug. Something is being covered up by something else. A typical solution is to put position: relative on the thing so z-index works in the first place.

Systems for z-index

In Quest of Search

The idea is to create a semantic HTML element for the ARIA search role, which represents a landmark region “that contains a collection of items and objects that, as a whole, combine to create a search facility.”

In Quest of Search

Video optimization for the web simplified with ImageKit

Learn how you can resize and optimize video assets using ImageKit's URL-based video APIs.

Video optimization for the web simplified with ImageKit | Codrops


Some great videos I watched this week

Images are hard.

Putting an image on a website is pretty easy. Except that there is a massive checklist of things to do in order to do it right.

by Chris Coyier

How to view raw markdown files and permalink to code snippets

Did you know you can permanently link to any piece of code? This includes markdown files, but you'll need the raw version.

by GitHub

New in Chrome 94

Chrome 94 is rolling out now! The default color space for canvas elements is now formally defined as sRBG, and you can change it to Display P3. There’s a new, low-level way to access built-in audio and video codecs, important for streaming games, video editors, and such.

by Google Chrome Developers

D3.js in 100 Seconds

Data-Driven Documents or D3 is a JavaScript library for drawing SVGs with data. It's the magic behind many of the graphs, charts, and other data visualizations you see on the web today.

by Fireship

petite-vue

Dave gives us a look at petite-vue, a special (and extra small) version of Vue that is designed to be used directly in the browser, requires no build step, and allows us to build pleasantly interactive apps very declaratively.

https://www.youtube.com/watch?v=MYJynMWJlFM

by Chris Coyier


Useful GitHub repositories

Awesome Guidelines

A curated list of high-quality coding style conventions and standards.

GitHub logo Kristories / awesome-guidelines

A curated list of high quality coding style conventions and standards.

Awesome Guidelines

Awesome Guidelines Awesome

A set of guidelines for a specific programming language that recommend programming style, practices, and methods for each aspect of a program written in that language.

Contributions welcome. Please read the contribution guidelines before contributing. Add links through pull requests or create an issue to start a discussion.

Make a small donation to help us fight Covid19

Visit kitabisa.com and dompetdhuafa.org Your small help goes a long way. ❤️

Contents

Programming Languages

Brainfuck

C

C#

C++

Clojure

Miniflare

Fully-local simulator for Cloudflare Workers

GitHub logo cloudflare / miniflare

🔥 Fully-local simulator for Cloudflare Workers

🔥 Miniflare

Miniflare is a simulator for developing and testing Cloudflare Workers.

  • 🎉 Fun: develop workers easily with detailed logging, file watching and pretty error pages supporting source maps.
  • 🔋 Full-featured: supports most Workers features, including KV, Durable Objects, WebSockets, modules and more.
  • Fully-local: test and develop Workers without an internet connection Reload code on change quickly.

It's an alternative to wrangler dev, written in TypeScript, that runs your workers in a sandbox implementing Workers' runtime APIs.

See https://miniflare.dev for more detailed documentation.

Features

  • 📨 Fetch Events (with HTTP(S) server and manual dispatch)
  • Scheduled Events (with cron triggering and manual dispatch)
  • 🔑 Variables and Secrets with .env Files
  • 📚 Modules Support
  • 📦 KV (with optional persistence)
  • Cache (with optional persistence)
  • 📌 Durable Objects (with optional persistence)
  • 🌐 Workers Sites
  • ✉️ WebSockets
  • 🛠 Custom & Wrangler Builds Support
  • ⚙️ WebAssembly Support
  • 🗺 Source Map Support
  • 🕸

dribbble shots

Clothing Store - Website Concept

https://cdn.dribbble.com/users/4621751/screenshots/16527704/media/8330ea7e0d51bec6b11e36e6b3d85b48.jpg

by Suzauddoula Bappy

Relaxation App - Mobile Design

https://cdn.dribbble.com/users/7514969/screenshots/16138413/media/105d865b95c978c3da01abcb1e70b55c.png

by Julius Branding

3D Weather Icons

https://cdn.dribbble.com/users/1383138/screenshots/16526395/media/4a279d200e0ac448333f9cc10200d624.png

by Mikolaj

Interior Plant Shop Landing Page

https://cdn.dribbble.com/users/2048680/screenshots/16522956/media/25c6b9bdb5207e1067638cc4ddd58b11.png

by Saddam Hosen


Tweets


Picked Pens

HEXplorer

by Rob DiMarzo

Feedback Reactions

by Aaron Iker


Podcasts worth listening

Syntax – Webhooks

In this Hasty Treat, Scott and Wes talk about webhooks — one of those concepts that seems a lot scarier than it actually is.

CodePen Radio – Custom Properties

Chris & Shaw talk about a big ol’ conversion to getting CodePen’s color system to use --custom-properties all the way through, rather than Sass variables.

Syntax – From React To SvelteKit

In this episode of Syntax, Scott talks with Wes about moving Level Up Tutorials from React to SvelteKit — why he did it, how, benefits, things to watch out for, and more!

Ladybug – All About Agile

The definition of Agile is the ability to create and respond to change. Ultimately dealing with and succeeding in an uncertain or turbulent environment.


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

Discussion (0)