The successor to the aforementioned ngCordova: Ionic Native is a curated set of ES6/TypeScript wrappers for Cordova/PhoneGap plugins that make adding any native functionality you need to your Ionic, Cordova, or Web View mobile app easy. import {Geolocation} from 'ionic-native'; Geolocation.getCurrentPosition().then(pos => { console.log('lat: ' + pos.coords.latitude + ', lon: ' + pos.coords.longitude); }); let …
Enhancing Optimistically
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 …
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. …
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 …
Continue reading “Down the Rabbit Hole: Javascript in Wonderland”
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 …
McDonald’s McTrax: Play the Placemat
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“