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, border-top-right-radius: 1.60em translates to .border-top-right-radius-1-dot-60em

Here’s a full example:

Before:

<!-- index.html -->
<div class="sidebar">
    <!-- sidebar content -->
</div>
/* main.css */
.sidebar {
    border-top: 1.04em dotted lightgrey;
    border-bottom: 12px solid cornflowerblue;
    border-top-right-radius: 1.60em;
    padding: 5px;
    margin-left: 10px;
    background-color: fuchsia;
}

After:

<!-- index.html -->
<div class="
  border-top-width-1-dot-04em
  border-top-style-dotted
  border-top-color-lightgrey
  border-bottom-width-12px
  border-bottom-style-solid
  border-bottom-color-cornflowerblue
  border-top-right-radius-1-dot-60em
  padding-5px
  margin-left-10px
  background-color-fuchsia
">
    <!-- sidebar content -->
</div>
/* main.css */
/* Nothing! */

Just awesome 🙂

universal.css

Elsewhere , , , Leave a comment

Easily create new CLI aliases with `new-alias`

I love stuff like this:

1-uE8FMv0eWNQChRKyBrWR8Q

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
}

Usage: new-alias name-for-the-alias

An alias for new aliases →

Elsewhere , , Leave a comment

Designers will design, developers will develop, and why you must stop them

derailed

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 the developers to dictate to me the “best practices” and I had allowed them to go their merry way, which meant many sprints iterating on perfecting the architecture but not actually shipping the product. I failed to communicate the real business and time constraints and acquiesced to their push back, wanting to create beautiful code.

At work I sometimes question why we are about to do a project using a specific technology. It’s not because some technology is the new kid on the block, that we need to use said technology (although we might). Don’t get me wrong: it’s not about taking shortcuts, it’s about keeping things simple as – sometimes – something simple will really do. KISS & YAGNI & MSP & (in due time, if need be) git commit -am 'Refactoring'.

Designers will design, developers will develop, and why you must stop them →

Elsewhere , , Leave a comment

Flexbugs – Flexbox issues and cross-browser workarounds for them.

flexbugs

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 😛

philipwalton/flexbugs →

Elsewhere , , , Leave a comment

Redux DevTools Chrome Extension

A Chrome DevTools Extension, wrapping around Redux DevTools:

redux-devtools-extension

The Redux DevTools themselves are a live-editing time travel environment for Redux:

Redux DevTools

  • 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 see during which action this happened, and what the error was
  • With persistState() store enhancer, you can persist debug sessions across page reloads

Redux DevTools →
Redux DevTools Chrome Extension (Source) →
Redux DevTools Chrome Extension (Chrome Web Store) →

Elsewhere , , , Leave a comment

Gboard

Searching and sending stuff on your phone shouldn’t be that difficult. Gboard makes it easier: Search. GIFs. Emojis & more. Right from your keyboard.

Gboard (App Store) →

Elsewhere , , , Leave a comment

Prevent overscroll/bounce in iOS MobileSafari (CSS only)

elastic-scrolling No need to hijack touchstart via JavaScript as this little CSS snippet, preventing the rubber band scrolling (as shown on the left), works just fine:

body,
html {
  position: fixed;
}

Tested with iOS8, and iOS9.

Note that your mileage may vary. Other pure CSS solutions do exist (untested though)

Elsewhere , , , Leave a comment

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 via conductive foam on brass bars.

Elsewhere , , Leave a comment

Lumberjack vs. Web Developer

eatsleepwork_2016-Apr-27

(via)

Elsewhere , , , Leave a comment

Game of Thrones Season 5 Recap

A refresher, now that season 6 has started:

Elsewhere , Leave a comment