Reverse clip path with blend modes

Nice example on applying an SVG-defined clipPath using CSS. Note that’s it no simple triangle in the example, but a triangle with an inner triangle cut out, created using the reverse clip path approach by Ana Tudor.

The gif and the extra background-blend-mode: screen; also give it a nice touch 🙂

Reverse clip path with blend modes →
Cutting out the inner part of an element using clip-path

Elsewhere , , , Leave a comment

Disable all Keyboard and Trackpad Input with Little Fingers

If you have a toddler running around, Little Fingers by Shaun Inman – who created it for his own need – will come in handy.

Little fingers want to explore. Press Shift + Control + Option + Command + L to lock down your Keyboard, Trackpad, Touch Bar, and/or Mouse.

Press it again to unlock.

The source is available on GitHub.

Little Fingers →
Little Fingers Source (GitHub) →

Related: AlphaBaby also comes in handy when having babies/toddlers around 🙂

Elsewhere , , Leave a comment

Portal in Augmented Reality with HoloLens

Fun side project I decided to do with the HoloLens!

Side Projects are the bestest projects 🙂

Elsewhere , , , Leave a comment

Form Design for Complex Applications

From complex ERP systems to Facebook, applications make meaning out of input. The form — in its many manifestations — provides a gateway for user submission. This article illustrates 13 different ways to present forms, and explores the future of data input.

Good overview and good naming conventions used: Modal, Multi-modal, Slideout, Popover, Inline, …

Form Design for Complex Applications →

👉 Whilst your at it, you might also want to check out 10 Rules For Efficient Form Design and Mobile Form Usability to properly layouting the elements of your forms, not doing stupid things (like using placeholders for labels), etc.

Elsewhere , , Leave a comment

ES2015 (ES6): Easily remove duplicates from an Array

Say you have a JavaScript Array containing duplicate values. By creating a Set – which only stores unique values (primitive values or object references) – and then spreading that Set into a new Array you can easily dedupe the given Array:

// Array with duplicates
const arr = [7, 3, 1, 3, 3, 7];

// Dedupe using a Set, which is then spread into a new Array
const deduped = [...new Set(arr)];

// -> [ 7, 3, 1 ]

I really dig the spread operator. There’s some more interesting stuff you can do with it.

Elsewhere , , Leave a comment

Saturday Night Live: Sean Spicer Press Conference

Haha, brilliant stuff:

White House press secretary Sean Spicer (Melissa McCarthy) and secretary of education nominee Betsy DeVos (Kate McKinnon) take questions from the press (Bobby Moynihan, Kristen Stewart, Cecily Strong, Vanessa Bayer, Alex Moffat, Mikey Day).

Elsewhere , , Leave a comment

Easily manipulate images in PHP with spatie/image

Great new package by the folks at Spatie to working with images in PHP, powered by Glide. Glide itself is great, but uses an URL based approach (which has its benefits); yet in most cases I find myself using a code based approach. This is where spatie/image comes into play:

spatie/image wraps up Glide so all its methods can be used using PHP code.

Like so:

Image::load('new-york.jpg')
    ->sepia()
    ->blur(50)
    ->save();

Easy peasy 🙂

spatie/image
spatie/image Documentation →
spatie/image introductory post →

Elsewhere , , Leave a comment

Microsoft GVFS (Git Virtual File System)

Interesting stuff by Microsoft. to handling big repositories such as their Windows code base which “has over 3.5 million files and is over 270 GB in size”. Instead of splitting the code into several manageable submodules, they’ve created a virtual filesystem to support big repositories:

GVFS (Git Virtual File System) virtualizes the file system beneath your repo and makes it appear as though all the files in your repo are present, but in reality only downloads a file the first time it is opened.

GVFS also actively manages how much of the repo Git has to consider in operations like checkout and status, since any file that has not been hydrated can be safely ignored. And because we do this all at the file system level, your IDEs and build tools don’t need to change at all!

Announcing GVFS (Git Virtual File System) →

(via Mattias)

Elsewhere , , Leave a comment

MoonMail – Send e-mail marketing campaigns using AWS, SES, and Lambda

Send email marketing campaigns with Amazon SES. Let Amazon Lambda compose email by email and literaly scale it to infinite.

With MoonMail you can: create & edit lists of recipients (email addresses) and store them within a DynamoDB. Create & edit html email marketing campaigns, send them and track their opens and clicks.

MoonMail →

(via cron.weekly)

Elsewhere , , , , Leave a comment

Why does Chrome show a T-Rex when it’s offline?

With the previous post touching the offline subject, I was reminded of the T-Rex that Chrome shows when it’s offline.

Most of us think it’s just a fun little pixel dinosaur that acts as facade for a little game, but there’s more to it.

The T-Rex is actually a reference to a scene from Meet the Robinsons, in which a T-Rex tries snapping up a boy but fails at it due to its big head an little arms:

So the T-Rex is in Chrome not because it’s a fun little pixel dinosaur, but BECAUSE IT CANNOT REACH THE BOY PAGE.

My inner geek rejoices 🙂

Elsewhere , Leave a comment