In October 2018 I investigated why nodemon was emitting a strange deprecation warning, leading to the eventual discovery of the now infamous event-stream npm package compromise. This post shares a unique perspective of the events that unfolded, along with downloadable forensic evidence that has since been purged from the npm registry.
For context, see:
Replace {domain} with your domain:
# Allows you to receive email at standard addresses, e.g. user@{domain}.
now dns add {domain} @ MX in1-smtp.messagingengine.com 10
⚠️ This article is outdated: Don’t use jQuery. Also, this JS technique does not work well when server side rendering.
Responsive images are pretty intuitive; apply max-width: 100% and voila. But what to do about those pesky iframes (video embeds!) whose height does not remain in ratio to width when responding down? The most common technique you will come across dates back years and involves wrappers styled to preserve a hard-coded intrinsic aspect ratio (typically 16:9). Most of the popular scripts such as fitvids.js utilize this technique.
This approach sucks for few reasons:
⚠️ This article is outdated: CSS in JS is far superior to Sass, and font icons are no longer a good idea. Use inline SVG React components and in certain situations plain old.svgfiles inimgtags.
Icon fonts have been been best-practice for a while now. They allow us to use tons of fully styleable cross-browser vector icons with one lightweight HTTP request.
Folk typically use font icons via non-semantic presentational markup such as class="icon icon-happy-face" that should be avoided. With a pinch of Sass you can add icons to elements purely via your stylesheet using easy to remember names, without polluting your markup. Yay!
Finally a Mozilla equivalent to -webkit-font-smoothing: antialiased is on the way in Firefox 25: -moz-osx-font-smoothing: grayscale. No more chunky font icons in Firefox for Mac!
Unfortunately we will have to wait a few weeks for this to be useful as Firefox 25 is currently in Aurora phase; according to the rapid release schedule it will be hit Beta September 17 for an October 29 2013 release.
It’s a good idea to begin using it now, IcoMoon has stealthily adopted it already. You can always download Firefox 25 and take it for a spin first.
Ever tried sudo gem cleanup in OS X Mavericks only to be hit with errors like this?
Attempting to uninstall sqlite3-1.3.7
Unable to uninstall sqlite3-1.3.7:
Gem::InstallError: sqlite3 is not installed in GEM_HOME, try:
gem uninstall -i /System/Library/Frameworks/Ruby.framework/Versions/2.0/usr/lib/ruby/gems/2.0.0 sqlite3
⚠️ This article is outdated: For some reason the ImageMagickconvertCLI no longer generates smaller.icofiles when the source.pngfiles have been optimized. After a few hours investigating I can’t workout why, or even with what versions everything worked. Here is a related StackOverflow question.
Learn how to manually create optimized website favicon.ico files as much as 60%+ smaller in file size without sacrificing content or quality.
This is something very few people seem to do, probably because no single tool exists. A pity since a favicon.ico file in the website root (still best practice) is one of the few things guaranteed to be downloaded by every first-time visitor. The smaller it is, the sooner it can appear.
The savings can be particularly juicy for icons containing multiple sizes, which is also best practice given the variety of ways favicons are used.
⚠️ This article is outdated: First I moved on to a custom Gulp workflow, then for a while I used SVG symbols and external references with a polyfill. Now I use inline SVG React components, and occasionally plain old.svgfiles inimgtags.
Here we take “Fun with Sass & font icons” to the next level by automating the tedious stuff, including the actual font generation.
Manage all your project’s font icons in one folder as nicely named SVG files. Add icons to this folder to have your fonts magically rebuilt and your Sass automatically set up for you to start using the icons via their nice names; without touching your markup or dealing with non-semantic class names.
What are the perks?
⚠️ This article is outdated: Global CSS is an anti-pattern; components should be individually styled using tools such as styled-components. See Fix for the most recent, though still outdated styles from this article.
Most start their front end styles by throwing in a reset such as Eric Myer’s or the more fashionable normalize.css. I will say a few nasty things about both approaches before I present to you the perfectionist alternative: Your own custom foundation.
Foundation is a good word for a different approach. Resets strip user agent default styles back. Normalizing attempts to even out the differences and fix a few things. A foundation strips and adds style
Editors like Illustrator can save out some really dumb SVG code sometimes. Properly optimized SVG files can be as much as 80% smaller. Bunches of empty groups, pointless attributes and many other inefficiencies decrease readability and reliability.
Every SVG file should be manually optimized in 3 passes using: