Jeff Crossman, Product Designer at GEDesign: A design system should not simply be a collection of user interface components along with some design theory. It should demonstrate how design patterns have been applied in real products and document how other teams have extended patterns for specific use cases. Our goal with this design system is …
universal.css
The only .css file you’ll ever need, following the most recent CSS methodologies where you define just about everything in separate classes. Usage is really easy: Take any CSS rule you want to apply, replace : by -, and dots by -dot-, and you get the name of the corresponding universal css classname. For instance, …
Easily create new CLI aliases with `new-alias`
I love stuff like this: It’s a handy little alias to create aliases for commands you just ran … an “alias-generating alias”; my inner geek rejoices 🙂 Here’s the code (add it to your .bash_profile): new-alias() { local last_command=$(echo `history |tail -n2 |head -n1` | sed ‘s/[0-9]* //’) echo alias $1=”‘””$last_command””‘” >> ~/.bash_profile . ~/.bash_profile …
Continue reading “Easily create new CLI aliases with `new-alias`”
Designers will design, developers will develop, and why you must stop them
Leonard Teo, CEO of ArtStation, on how he almost killed the project before – eventually – successfully launching it: We were far behind schedule with a product I had allowed to become too complex. Whenever I needed a change that should have taken 5 minutes, it took days or even weeks. […] I had allowed …
Continue reading “Designers will design, developers will develop, and why you must stop them”
Flexbugs – Flexbox issues and cross-browser workarounds for them.
This repository is a community-curated list of flexbox issues and cross-browser workarounds for them. The goal is that if you’re building a website using flexbox and something isn’t working as you’d expect, you can find the solution here. Truth be told, most of the time “something is not as I’d expect” when using flexbox 😛 …
Continue reading “Flexbugs – Flexbox issues and cross-browser workarounds for them.”
Redux DevTools Chrome Extension
A Chrome DevTools Extension, wrapping around Redux DevTools: The Redux DevTools themselves are a live-editing time travel environment for Redux: Lets you inspect every state and action payload Lets you go back in time by “cancelling” actions If you change the reducer code, each “staged” action will be re-evaluated If the reducers throw, you will …
Gboard
Prevent overscroll/bounce in iOS MobileSafari and Chrome (CSS only)
UPDATE 2017.12: For non-Safari browsers (e.g. Chrome, Firefox) you can use overscroll-behavior to solve exactly this. Simply apply overscroll-behavior-y: none; on html, body and be done with it. html, body { overscroll-behavior-y: none; } Safari however does not support it … UPDATE 2021.06: The workaround below no longer seems to work in recent iOS/MobileSafari versions …
Continue reading “Prevent overscroll/bounce in iOS MobileSafari and Chrome (CSS only)”
Piano Tiles 2 Robot
How to set the Piano Tiles 2 record? Build a robot: Overhead iPhone 6+ processes video of the iPad screen at 120 fps. iPhone tracks tile speed and sends timing info via MIDI over USB through the camera connection kit. Teensy 3.2 receives tile data and sends step/direction to stepper drivers, which smash the tiles …