By randomly changing the opacity and adding a little text-shadow, one can create this old typewriter effect: Makes good use of currentColor for the shadow, so it can be applied on any coloured text. Old Typewriter Text Effect → 💁♂️ Don’t confuse this effect with a typing carousel which types the letters one-by-one.
Tag Archives: javascript
Hermes, a JavaScript engine optimized for running React Native on Android
Interesting announcement from Facebook: Hermes is an open-source JavaScript engine optimized for running React Native apps on Android. For many apps, simply enabling Hermes will result in improved start-up time, decreased memory usage and smaller app size. At this time Hermes is an opt-in React Native feature, and this guide explains how to enable it. […]
Clock Experiments by Vasilis
Vasilis had some fun and created these experimental clock interfaces. First up is the “Decimal Clock”: If we had ten hours in a day, instead of 24, and if each of these hours had 100 minutes instead of 60, and if every minute had 100 seconds, our clocks would look like this, and the time […]
Pika CDN – A CDN for modern JavaScript
Yesterday the aforementioned Pika announced some new things. One of the things that stood out is Pika CDN: The Pika CDN was built to serve the 60,000+ npm packages written in ES Module (ESM) syntax. This module syntax runs natively in the browser, so you can build for the web without a bundler. With our […]
create-es-react-app – A create-react-app like template using only es-modules (no build step).
create-es-react-app is a create-react-app like template demonstrating how far you can get creating progressive web apps (using react) with no build step. It takes advantage of static and dynamic imports which enables you to break up your app into small reusable ES modules that are compiled for you by the browser at run time. TIL: […]
React Hooks: When to useMemo and useCallback
Insightful post by Kent C. Dodds on the costs and benefits of React’s useMemo and useCallback. We hear a lot that you should use React.useCallback to improve performance and that “inline functions can be problematic for performance,” so how could it ever be better to not useCallback? Just take a step back from React and […]
The Economics of Open Source // Introducing Entropic, a federated package registry
At JSConf EU 2019, CJ Silverio – former CTO at NPM Inc – gave this talk on why a VC-funded private package registry (read: the one ran by NPM Inc) holds many dangers. The JS package commons is in the hands of a for-profit entity. We trust NPM Inc with our shared code, but we […]
useDimensions – a React Hook to measure DOM nodes
import React from 'react' import useDimensions from 'react-use-dimensions' const MeasuredNode = () => { const [ref, { x, y, width, height }] = useDimensions(); return ( <p ref={ref}> I am a paragraph at ({x}px, {y}px) position with a width of {width}px and height of {height}px </p> ); }; Handy. Uses window.resize+window.scroll internally, yet I’m quite […]
JavaScript Mouse Trail Effect
I like this mouse trail effect by Noah Yamamoto. Implementation is in React, but don’t let that put you off … “you got this” 😉 JavaScript Mouse Trail Effect →
Optimizing JavaScript packages for tree shaking
Geoffrey Dhuyvetters from madewithlove on how authors of (open source) JavaScript packages can optimize their builds for tree shaking: How do we create a package that exposes both CommonJS & ES modules while making sure we don’t break cross-platform support? Publishing 2 separate packages is an option (e.g. lodash/lodash-es). But there is a nicer, more […]