Here’s how Filament Group enhances (or: used to) their website for browsers that “Cut the Mustard”: if( "querySelector" in window.document && "addEventListener" in window ){ // This is a capable browser, let's improve the UI further! window.document.documentElement.className += " enhanced"; // load the enhanced scripting loadJS( "/path/to/enhancements.js" ); } But what if a browser is …
Tag Archives: link
lint-staged: Lint JS and CSS files staged by Git
Running a lint process on a whole project is slow and linting results can be irrelevant. Ultimately you want to lint only files that are staged/will be committed. This project contains a script that will run arbitary npm tasks against staged files, filtered by a spicified glob pattern. lint-staged introductory blogpost: Make Linting Great Again …
Continue reading “lint-staged: Lint JS and CSS files staged by Git”
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. …
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 …
Continue reading “Easily interact with Google Calendar from PHP with spatie/laravel-google-calendar“
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, …
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”