Blending Modes 101

Now this sounds familiar: When it comes to Blending Modes (in Sketch), my bulletproof method has always been: try one, if it didn’t work, try another one. So, I recently decided to learn more about those techniques and I’d love to share my findings with you. Multiply, Screen, Lighten, and Overlay are covered. Sketch: Blending …

Progressive Web Apps

Progressive Web Apps use modern web capabilities to deliver an app-like user experience. They evolve from pages in browser tabs to immersive, top-level apps, maintaining the web’s low friction at every moment. Fast loading, Push Notifications, Icon on the home screen, Full screen experiences, … the web truly has most of the things you need …

How to write your own Virtual DOM

The main part of Virtual DOM can be written in less than ~50 lines of code. […] When we change something in our Virtual DOM Tree, we get a new Virtual Tree. Algorithm compares these two trees (old and new), finds differences and makes only necessary small changes to real DOM so it reflects virtual. …

Down the Rabbit Hole: Javascript in Wonderland

Talk by Claudia Hernández, on a few of Javascript’s oddities and (un)expected behaviors: There’s a presentation embedded in this post. View it on Speaker Deck. For a language originally created in 10 days it surely has a lot of quirks and perks many JS developers are unaware of. Sometimes, it might even seem like we …

Image diffing using PHP

PHP package by Undemanding to calculate how much difference (in percent) there is between two images: use Undemanding\Difference\Image; use Undemanding\Difference\Method\EuclideanDistance; $image1 = new Image("/path/to/image1.png"); $image2 = new Image("/path/to/image2.png"); $difference = $image1->difference($image2, new EuclideanDistance()); $boundary = $difference->boundary(); // → ["left" => …, "top" => …] $percentage = $difference->percentage(); // → 14.03… Undemanding Difference → Did you …

Easily interact with Google Calendar from PHP with spatie/laravel-google-calendar

Great new package by spatie: use Spatie\GoogleCalendar\Event; //create a new event $event = new Event; $event->name = 'A new event'; $event->startDateTime = Carbon\Carbon::now(); $event->endDateTime = Carbon\Carbon::now()->addHour(); $event->save(); // get all future events on a calendar $events = Event::get(); $firstEvent = $events->first(); $firstEvent->name = 'updated name'; $firstEvent->save(); // create a new event Event::create([ 'name' => 'A …

GE’s Predix Design System

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 …