Weekly Digest 16/2021

marcobiedermann

Marco Biedermann

Posted on April 25, 2021

Weekly Digest 16/2021

Welcome to my Weekly Digest #16, which is the last one for April.

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

How I Built My Blog

An in-depth look at the technical stack behind this very blog! We'll see how Josh uses Next's API routes to implement my hit and like counters, how he uses MDX to add interaction and customization, and how he organizes his codebase, among others.

How I Built My Blog

How to remember JavaScript

JavaScript contains many things — lots of different methods and ways to do things. How do you remember them all?

How to remember JavaScript

DevTools for CSS layouts 2021 edition

As someone who loves and works with CSS on an almost daily basis, DevTools are something near and dear to your heart. Recently, Chen has been seeing updates from both the Webkit and Chrome team about updates to layout-related DevTools features

DevTools for CSS layouts 2021 edition

Best Tailwind CSS components and template collections

Discover seven of the best free Tailwind component and template collections that you can use to rapidly build custom user interfaces.

Best Tailwind CSS components and template collections - LogRocket Blog

How to actually test UIs

Testing techniques used by leading engineering teams

How to actually test UIs

How to Improve CSS Performance

Learn the most common speed issues caused by CSS and how to avoid them.

How to Improve CSS Performance | Calibre


Some great videos I watched this week

Reveal testing weakspots in your JavaScript code with Jest Coverage

If you've ever been stuck on what tests to write for your code, Jest's coverage reports can be a great tool for showing what sections of your codebase are not tested yet. It becomes even more powerful when used in combination with Continuous Integration (CI), as it can be automated and even block pull requests from merging, which we'll show in this video.

by Jimmy Cleveland

Visual Regression Testing with Storybook's Chromatic

When building a design system or component UI it becomes more and more difficult to catch visual bugs as the project scales. This is especially true when changing one component affects other components that use it, and QA doesn't know to check every component it's related to.

Visual regression testing is an extra layer of security there, and Storybook's Chromatic is the most polished one I have tried. So let's set a new project up and show off some of the features Chromatic offers.

by Jimmy Cleveland

How to use TypeScript with React... But should you?

Learn how to set up React with TypeScript. Compare the pros and cons of using TypeScript in a React project.

by Fireship

Thinking on ways to solve split text

In today’s GUI challenge, Adam Argyle will be responding to your comments for the first 30 minutes after the episode releases. Connect with us here, ask questions, or submit your own code!

by Adam Argyle

How Slow is JavaScript Really? JavaScript vs C++

Is JavaScript really that slow? Or is that just a leftover impression from the old days?

by Simon

Conducting tech interviews

In this episode Jake and Surma chat about interviewing for web dev roles, drawing on their good and bad experiences as candidates, and mistakes they've made as interviewers. Covering prep, probing questions, coding tasks, and rating candidates.

by Jake Archibald and Surma


Useful GitHub repositories

git-tips

Most commonly used git tips and tricks.

The Endless Acid Banger

An algorithmic human-computer techno jam

GitHub logo vitling / acid-banger

The Endless Acid Banger

The Endless Acid Banger

An algorithmic human-computer techno jam

Screenshot

Built in Typescript with the WebAudio API.

Live version running at www.vitling.xyz/toys/acid-banger

Support

You can support my work by Sponsoring me on GitHub or buying my music

License & Intended use

This is an art project, not a software tool for music creation. I consider it to be finished, and as such I will likely not be accepting feature requests or feature-driven PRs. Please feel encouraged to fork the project and do something else with it if you would like - I love to see further creative work built on top of it.

This work is licensed under a Creative Commons Attribution 4.0 International License. I am aware that this is an unusual choice for code, but it reflects its status as an art project. IANAL, so I'm not sure how this stands up legally, but in my mind this…

transition.css

46 pre-built drop-in CSS transitions

GitHub logo argyleink / transition.css

:octocat: Drop-in CSS transitions

Total Downloads Latest Release License Netlify Status

46 pre-built transitions!

Hands on at Codepen or preview all @ transition.style

Basics

Import the CSS and set an attribute on some HTML: try on Codepen

<link rel="stylesheet" href="https://unpkg.com/transition-style">

<div transition-style="in:wipe:up">
  👍
</div>
Enter fullscreen mode Exit fullscreen mode


Installation

NPM

  1. npm i transition-style
  2. import from CSS
@import "transition-style";
Enter fullscreen mode Exit fullscreen mode
  1. or import from JS
import 'transition-style';
Enter fullscreen mode Exit fullscreen mode

CDN

https://unpkg.com/transition-style


Individual Category Bundles

  • Circles https://unpkg.com/transition-style/transition.circles.min.css
  • Squares https://unpkg.com/transition-style/transition.squares.min.css
  • Polygons https://unpkg.com/transition-style/transition.polygons.min.css
  • Wipes https://unpkg.com/transition-style/transition.wipes.min.css

Import category bundles from NPM too import "transition-style/transition.circles.min.css"


👉 The Hackpack

https://unpkg.com/transition-style/transition.hackpack.min.css

More options, more control, smaller import
by importing only the custom properties and base styles:

  • compose custom transition combinations
  • create multi-part transitions
  • bring your own architecture with classes or CSS-in-JS or anything!

The Hackpack Sandbox

Custom properties ship with each .min.css as well


🔗 Bookmarklet

Try transition.css on almost any existing site! Just copy 📋 the following, create a…

JSEncrypt

A Javascript library to perform OpenSSL RSA Encryption, Decryption, and Key Generation.

GitHub logo travist / jsencrypt

A zero-dependency Javascript library to perform OpenSSL RSA Encryption, Decryption, and Key Generation.

Website

http://travistidwell.com/jsencrypt

Introduction

When browsing the internet looking for a good solution to RSA Javascript encryption, there is a whole slew of libraries that basically take the fantastic work done by Tom Wu @ http://www-cs-students.stanford.edu/~tjw/jsbn/ and then modify that code to do what they want.

What I couldn't find, however, was a simple wrapper around this library that basically uses the library practically untouched, but adds a wrapper to provide parsing of actual Private and Public key-pairs generated with OpenSSL.

This library is the result of these efforts.

How to use this library.

This library should work hand-in-hand with openssl. With that said, here is how to use this library.

  • Within your terminal (Unix based OS) type the following.
openssl genrsa -out rsa_1024_priv.pem 1024
  • This generates a private key, which you can see by doing the following...
cat rsa_1024_priv.pem
  • You can then copy and paste this in the Private Key…

dribbble shots

Sidebar Navigation Web App

https://cdn.dribbble.com/users/1259559/screenshots/15501941/media/82ada084b98855816211d20e88e63fc8.jpg

by Golo

Mobile Banking - Dashboard

https://cdn.dribbble.com/users/1756963/screenshots/15514410/media/3209aa9eed69e15f709c36471b39c11e.png

by Wildan Wari

Icons

https://cdn.dribbble.com/users/594158/screenshots/15521114/media/0d6ad2a24cafb45edc49c1c227ead4e6.png

by Zaib Ali

Doku - Digital Wallet App

https://cdn.dribbble.com/users/2713351/screenshots/15531167/media/e2c3796cbcb6031a5412a3db8fee595f.png

by Regi Pangestu

Avatar Maker App Concept

https://cdn.dribbble.com/users/1787150/screenshots/15532934/media/4c2d04bbf1731795866b337889bec622.png

by Sajjad Mohammadi Nia


Tweets


Picked Pens

Tuggable Lamp

by Jhey

Buttoggle

by Adam Kuhn


Podcasts worth listening

The CSS Podcast: Paths, shapes, clipping and masking

Paths, shapes, clipping, masking, oh my! There’s so much you can do with CSS shapes — from creating transition effects to creating interesting and organic typographic layouts. In this episode, we dive into how to wrangle shape effects in CSS.

Container Queries

Hasty Treat - Container Queries Are Here

In this Hasty Treat, Scott and Wes talk about CSS container queries, what they are and how to use them.

Matt Pinner - Software Engineer at Amazon

Matt and David talk about building your community, finding passion in your freelance work, and utilizing your professional experience to grow your career.


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

💖 💪 🙅 🚩
marcobiedermann
Marco Biedermann

Posted on April 25, 2021

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related

CSS Cheat Codes
javascript CSS Cheat Codes

December 24, 2021

Weekly Digest 46/2021
css Weekly Digest 46/2021

November 21, 2021

Weekly Digest 45/2021
css Weekly Digest 45/2021

November 14, 2021

Weekly Digest 43/2021
css Weekly Digest 43/2021

October 31, 2021