Speaking of Rogue One: Maple Films have released a fan edit of Rogue One, entitled “Rogue One: The Battle of Scarif”. If you’re in the mood to watch Rogue One but would rather skip the attempts at character development and Forest Whitaker’s pet tentacle monster, pull up Rogue One: The Battle of Scarif and jump …
Tag Archives: link
Hide menu bar icons on your Mac with Vanilla
45% Faster React Stateless (Functional) Components
When using Stateless Components throughout your React app, the lifecycle events (componentWillMount, componentDidMount, etc.) are still executed. Developer Philippe Lehoux found a way to bypass these, resulting in a 45% speed improvement: What if we could skip React internals for these components? Instead of mounting them as components, let’s just call them as what they …
Continue reading “45% Faster React Stateless (Functional) Components”
Pure CSS Crossword (CSS Grid)
Nice demo of a pure CSS Crossword Puzzle, built using CSS Grid. Be sure to check out the validation rules too, they’re built using the General Sibling Selector (e.g. ~): #item1-1:valid ~ #item1-2:valid ~ #item1-3:valid ~ #item1-4:valid ~ #item1-5:valid ~ #item1-6:valid ~ .crossword-board–highlight .crossword-board__item-highlight–across-1 { opacity: 1; } UPDATE 2017.06.22: There’s a blogpost available, describing …
Phonetic Custom LEGO Heads for Stopmotion Animation
Now this is great; A set of 12 custom LEGO heads to create moving lips, mimicking natural speech, in your stopmotion animation: We worked with professional animators to create a set of 12 high grade phonic heads, each with the mouth in the correct shape for a different phonetic sound. By swapping these heads during …
Continue reading “Phonetic Custom LEGO Heads for Stopmotion Animation”
Render React Components directly to Sketch with React Sketch.app
AirBnB Design: Today, we’re excited to share a tool we built to help bridge the gap between designers and engineers working on design systems at scale. React-sketchapp is an open-source library that allows you to write React components that render to Sketch documents. With it, it’s also possible to bring real data into the designs. …
Continue reading “Render React Components directly to Sketch with React Sketch.app“
“Beau teaches JavaScript” — Learn JavaScript with this huge collection of free videos
Beau Carnes has released a massive collection of videos on JavaScript. My JavaScript Basics course is now live on freeCodeCamp’s YouTube channel. These videos are designed to quickly give you key information on each topic. Also, I designed them to be as modular as possible. They work fine as stand-alone videos, if you just want …
How Reddit built r/Place
Each year for April Fools’, rather than a prank, we like to create a project that explores the way that humans interact at large scales. This year we came up with Place, a collaborative canvas on which a single user could only place a single tile every five minutes. This limitation de-emphasized the importance of …
Typical display: flow-root; use case
Good display: flow-root; use case by Paul Bakaus: flow-root establishes a new block formatting context, but most have dismissed it as simply replacing clearfix hacks. But consider this extremely common case, where you have a few paragraphs of text, some bullet points and a floating image. In the image above you can see that the …
Faking node_modules in CodePen Projects
Update 2020.11.24: with Skypack being around and CodePen suggesting to rewrite your imports, there’s no need to use this hacky workaround anymore. With CodePen Projects you have a web IDE right in your browser, with preprocessing built-in. But what about installing dependencies via the npm ecosystem? With some minimal effort it’s possible: All you need …