Earlier today Chris Coyier tweeted that he was in the process of rewriting one of his pens without jQuery: Been trying to re-write this without jQuery: https://t.co/xvsZMKsfvL I’m like 70% there but haven’t quite gotten it. jQuery is doing so much helpful DOM traversal here it’s a pain in the ass without it. — Chris […]
Tag Archives: javascript
pagemap, a mini map navigation for web pages
Many text editors nowadays sport a minimap on the right hand side of the screen. Pagemap is like that, but for webpages: To use it, position a canvas element fixed on your screen, and tell pagemap which elements to include in the map: <canvas id="map"></canvas> #map { position: fixed; top: 0; right: 0; width: 200px; […]
Stop Apple Spotlight from slowing down your Mac by preventing it to index node_modules folders
Speaking of node_modules folders, this tip by Roel Van Gils came to mind: Does your Mac becomes slow/unresponsive (fans kicking in etc.) when you `npm install` a huge project with a million tiny dependencies? I learned that adding an empty `.metadata_never_index` in /node_modules *beforehand* will prevent Spotlight from indexing all that crap. — Roel Van […]
Easily find and remove old and heavy node_modules/vendor folders with npkill
When working in web, you can be left with several lost node_modules (JS) and vendor (PHP) folders spread across your filesystem, unnecessarily taking up space. To find these, I use the following command: # List all node_modules (from current directory down) and their size $ find . -name ‘node_modules’ -type d -prune -print | xargs […]
Old Typewriter Text Effect
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.
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 […]