DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Marco Biedermann
Marco Biedermann

Posted on

Weekly Digest 27/2022

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

GitHub logo 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…

massCode

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

GitHub logo 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

GitHub package.json version GitHub All Releases GitHub

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…

*Playwright*

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

GitHub logo microsoft / playwright

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

🎭 Playwright

npm version Chromium version Firefox version WebKit version

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
Enter fullscreen mode Exit fullscreen mode

This will create a configuration file…


dribbble shots

Marketplace Platform

by [Stanislav Lebedev](https://dribbble.com/shots/18739540-Marketplace-Platform)

by Stanislav Lebedev

Detku - Finance Mobile App

by [Arfi Maulana](https://dribbble.com/shots/18741399-Detku-Finance-Mobile-App)

by Arfi Maulana

Track your parcel now!

by [Saber Ali](https://dribbble.com/shots/18708075--Track-your-parcel-now)

by Saber Ali


Tweets


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! πŸ‘‹

Top comments (0)

🌚 Browsing with dark mode makes you a better developer by a factor of exactly 40.

It's a scientific fact.