DEV Community

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

Posted on

Weekly Digest 31/2021

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

On the

The semantics you didn't know you needed.

On the ‹dl›

Writing great alt text: Emotion matters

Jake recently got stuck trying to figure out the right alt text for a particular image…

Writing great alt text: Emotion matters

You probably shouldn't ignore react-hooks/exhaustive-deps linting warnings

It's tempting to ignore these warnings, but I highly recommend against it.

You probably shouldn't ignore react-hooks/exhaustive-deps linting warnings


Some great videos I watched this week

You can't console.log in React

Apparently, if you pass the console.log function to some event handler or other kind of prop in React it won't work. I mean it won't log anything.

by Maksim Ivanov

The Decline of Firebase (bundle sizes)

The latest Firebase JavaScript SDK (version 9.0) has been rewritten as a functional library resulting in far smaller bundle sizes for better web performance.

by Fireship

A Netflix Clone with DataStax Astra & Netlify

Chris paired up with David Jones-Gilardi of DataStax to go through one of the workshops they have put together that does a good job of showcasing how nicely DataStax Astra pairs up with the Jamstack approach.

by Chris Coyier


Useful GitHub repositories

Node.js Integration Tests Best Practices

Master the art of the most powerful testing technique for Node.js.

GitHub logo testjavascript / nodejs-integration-tests-best-practices

✅ Master the art of the most powerful testing technique for Node.js: Component tests. Including super-comprehensive best practices list and an example app (August 2021)

Header


Master the art of the most powerful testing technique for backend

3 things to your benefit

Component/integration test is an hybrid between E2E and unit tets. It's gaining a lot of popularity and going by the testing diamond model it is considered as the default technique for modern backend. Its main idea is testing an entire component (e.g., Microservice) as-is, through the API, with all the layers including database but fake anything exterenous. This brings both high confidence and great developer experience. However, doing it right, fast, exhaustive and maximing the value demand some learning and skills. This is the mission statement of this repo. Warning: You might fall in love with testing 💚

This repository contains:

1. 40+ Best Practices List - Detailed instructions on how to write component tests in the RIGHT way including code example and reference to the example application

2. 📊 Example application -

Awesome CTF

A curated list of Capture The Flag (CTF) frameworks, libraries, resources, software, and tutorials.

GitHub logo apsdehal / awesome-ctf

A curated list of CTF frameworks, libraries, resources and softwares

Awesome CTF Build Status Awesome

A curated list of Capture The Flag (CTF) frameworks, libraries, resources, softwares and tutorials. This list aims to help starters as well as seasoned CTF players to find everything related to CTFs at one place.

Contributing

Please take a quick look at the contribution guidelines first.

If you know a tool that isn't present here, feel free to open a pull request.

Why?

It takes time to build up collection of tools used in CTF and remember them all. This repo helps to keep all these scattered tools at one place.

Contents

Create

Tools used for creating CTF challenges

Forensics

Tools

HTML to Image

Generates an image from a DOM node using HTML5 canvas and SVG.

GitHub logo bubkoo / html-to-image

✂️ Generates an image from a DOM node using HTML5 canvas and SVG.

html-to-image

✂️ Generates an image from a DOM node using HTML5 canvas and SVG.

Fork from dom-to-image with more maintainable code and some new features.

MIT License Language build coverage Language grade: JavaScript

NPM Package NPM Downloads devDependencies Status

Install

npm install --save html-to-image
Enter fullscreen mode Exit fullscreen mode

Usage

/* ES6 */
import * as htmlToImage from 'html-to-image';
import { toPng, toJpeg, toBlob, toPixelData, toSvg } from 'html-to-image';

/* ES5 */
var htmlToImage = require('html-to-image');
Enter fullscreen mode Exit fullscreen mode

All the top level functions accept DOM node and rendering options, and return a promise fulfilled with corresponding dataURL:

Go with the following examples.

toPng

Get a PNG image base64-encoded data URL and display it right away:

var node = document.getElementById('my-node');
htmlToImage.toPng(node)
  .then(function (dataUrl) {
    var img = new Image();
    img.src = dataUrl;
    document.
Enter fullscreen mode Exit fullscreen mode

dribbble shots

Blog Photo

https://cdn.dribbble.com/users/472201/screenshots/15993980/media/b30b0cd6a97b703a2a5d722223a036be.jpg

by Tomasz Mazurczak

Medicine Reminder App

https://cdn.dribbble.com/users/8279166/screenshots/15909745/media/fe367af31c8513119c1786e65e7ed5f6.jpg

by Farrel Paperpillar

Music App

https://cdn.dribbble.com/users/7514969/screenshots/16199568/media/7c669ffd94af5fc808d81689c305eba9.png

by Julius Branding

Plant Care Assistant

https://cdn.dribbble.com/users/4095567/screenshots/16199592/media/d89a3da3d4376cefbb56ca169694cf46.png

by Irfan Fanen


Tweets


Picked Pens

Horizontal scrolling in a centered max-width container

by Ryan Mulligan

Irregular Image Gallery Layout

by Marco Biedermann


Podcasts worth listening

Ladybug Podcast – How To Choose A Tech Stack

In this episode, we’ll be chatting about choosing a tech stack for your project is one of the most important decisions you’ll make as an engineer. It will determine many aspects of your app, from development speed, to scalability, to the cost to run it.

CodePen Radio – 99.999% Uptime

Chris & Alex talk about DevOps, servers, and keeping CodePen online at all times. We were are 100% for the year until a few weeks ago when we had a 10 minute drop. That still keeps us in the realm of 99.99% uptime.

The CSS Podcast – Season 2 wrap up

We’ve reached the end of season 2 of the CSS Podcast. In this closing episode, we recap every episode by sharing our favorite tips and learnings from the last few months!


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

Discussion (0)