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.
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.
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
Discover seven of the best free Tailwind component and template collections that you can use to rapidly build custom user interfaces.
Testing techniques used by leading engineering teams
Learn the most common speed issues caused by CSS and how to avoid them.
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.
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.
Learn how to set up React with TypeScript. Compare the pros and cons of using TypeScript in a React project.
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
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.
Most commonly used git tips and tricks.
git-tips, want to add your tips? Checkout contributing.md
P.S: All these commands are tested on
git version 2.7.4 (Apple Git-66).
- Everyday Git in twenty commands or so
- Show helpful guides that come with Git
- Search change by content
- Show changes over time for specific file
- Remove sensitive data from history, after a push
- Sync with remote, overwrite local changes
- List of all files till a commit
- Git reset first commit
- Reset: preserve uncommitted local changes
- List all the conflicted files
- List of all files changed in a commit
- Unstaged changes since last commit
- Changes staged for commit
- Show both staged and unstaged changes
- List all branches that are…
An algorithmic human-computer techno jam
The Endless Acid Banger
An algorithmic human-computer techno jam
Built in Typescript with the WebAudio API.
Live version running at www.vitling.xyz/toys/acid-banger
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…
46 pre-built drop-in CSS transitions
46 pre-built transitions!
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>
npm i transition-style
- import from CSS
- or import from JS
Individual Category Bundles
Import category bundles from NPM too
👉 The Hackpack
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!
Custom properties ship with each
Try transition.css on almost any existing site! Just copy
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...
- You can then copy and paste this in the Private Key…
by Wildan Wari
by Zaib Ali
Wes BosFirefox dev tools always complains if you dont have a favicon. (I think Chrome silences this).
Quick lil fix if you want to silence the error. I often find myself using this instead of having to add another file to little HTML demos.20:20 PM - 21 Apr 2021
by Adam Kuhn
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.
In this Hasty Treat, Scott and Wes talk about CSS container queries, what they are and how to use them.
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! 👋