Creative Coding Essentials Video Course

Tim Rodenbröker: After more than 7 months of experimentation, planning and creating i am finally abled to release a first Alpha-version of my brand new course “Creative Coding Essentials”. I have decided to open the first chunk of videos to the world, because i believe that the current Corona-crisis is a great oppurtunity to get […]

Flip Counter Plugin

Flip is an advanced and beautiful flip counter plugin. Easy to use and highly flexible, you can set up a custom counter on your website in minutes. Display visitor counts, countdown to a special date or celebrate progress. Whatever you’re planning, the options are endless. Here’s a counter example <div class="tick" data-value="1234" data-did-init="setupFlip"> <div data-repeat="true" […]

React: You May Not Need Controlled Form Components

To work with forms in React two approaches are to either use Controlled Components or use Uncontrolled Components (as detailed here). Swyx shares a third way of working with forms: A lower friction way to handle form inputs is to use HTML name attributes. As a bonus, your code often turns out less React specific! […]

Worth It: Modern JS edition

“Worth It: Modern JS edition” is a small tool to analyze how much less JavaScript is downloaded in modern browsers as a result of it using the module/nomodule pattern. Worth It: Modern JS edition → 💡 The module/nomodule pattern is a technique to ship ES2015 modules to browsers that support, whilst also keeping older browsers […]

Extract URLs, usernames, hashtags, etc. from tweets with twitter-text-js

If you ever have to work with Tweets, then twitter-text-js will surely come in handy: A JavaScript utility that provides text processing routines for Tweets. The library provides autolinking and extraction for URLs, usernames, lists, and hashtags. The following snippet for example will autolink the hashtag and the mentioned username: twitter.autoLink(twitter.htmlEscape('#hello < @world >')) Installation […]

React: Hooks vs. Render Props vs. Higher-Order Components

Nice post comparing these three approaches and detailing why you should use the version with hooks. // #1 – Hooks const MyComponent = () => { const mousePosition = useMouse(); // mousePosition.x, mousePosition.y } // #2 – Render Props const MyComponent = () => { return ( <Mouse> {({ x, y }) => { // […]

Component Variations: Considerations for Creating a Card Component

Chris Coyier wants to create a Card Component in React. But then he suddenly finds himself down the rabbit hole: how flexible does he make it? What is configurable and what is not? Where to draw the line? It sounds very familiar, as I’m always pondering over things like this when writing libraries/reusable things in […]

ESNext: Get localized language, currency, and region names with Intl.DisplayNames

An ECMAScript Language Feature that currently is in Stage-3 and that has already landed in V8 version 8.1 is Intl.DisplayNames. It’s a way to get localized display names for languages, scripts, regions and others. Stage-3? 💁‍♂️ The TC39 Committee has a 5 stage process in place, ranging from stage-0 to stage-4, by which it develops […]