On mac:
- Download the latest release.
- Extract the binary and place it in
/usr/local/bin
.
On mac:
/usr/local/bin
.<figure class="video-player"> | |
<video preload="none" width="1280" height="720" poster="video.jpg"> | |
<source src="video.webm" type="video/webm" /> | |
<source src="video.mp4" type="video/mp4" /> | |
</video> | |
<button class="play-toggle">Toggle play</button> | |
<button class="mute-toggle">Toggle mute</button> | |
</figure> | |
<script> | |
// Initialize video player |
import classNameProp from 'class-name-prop'; | |
import { useRouter } from 'next/router'; | |
import React from 'react'; | |
import styles from './RouteIndicator.module.css'; | |
const DONE_DURATION = 250; | |
export default function RouteIndicator() { | |
const router = useRouter(); |
⚠️ 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:
import React from 'react' | |
export const useIsMounted = () => { | |
const ref = React.useRef(false) | |
const [, setIsMounted] = React.useState(false) | |
React.useEffect(() => { | |
ref.current = true | |
setIsMounted(true) | |
return () => (ref.current = false) | |
}, []) |
/Applications/ImageAlpha.app/Contents/MacOS/pngquant 64 *.png --ext .png --force |
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: