Positioning Text Along a Path with CSS

Michelle Barker has used CSS Motion Path to align text along a path: The “Motion Path” name is a little misleading, as it doesn’t only relate to movement. In fact, although the specification still goes by the name “Motion Path”, the property used to define the path was changed from motion-path to offset-path. It’s easy …

Building with Friction

Tim Kaldec takes a look at our modern workflow – in which lots of tools have removed friction – and makes the case to add some “healthy friction”: A lot of modern workflow improvements have been around removing friction. We want to make it easier to deploy rapidly. Tools like npm make it very easy …

Use an Emoji as a Favicon

Great “hack” popularized by Lea Verou (but first discovered by Leandro): if you place an emoji inside <text> in an SVG Favicon you instantly have an Emoji Favicon 🙂 Now that all modern browsers support SVG favicons, here's how to turn any emoji into a favicon.svg: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><text y=".9em" font-size="90">💩</text></svg> Useful …

Easily install local NPM packages by simply referring to their local path

Directly installing a package with npm install and referring to its local path is a quick way to work with a local package. To be safe though, the usage of npm link is still recommended. The npm link way To work with local NPM packages on can reside to using npm link. You make a …

Conceal sensitive information in the Azure Portal with the “Azure Mask” browser extension

If you’re ever doing a livestream you might run into the problem that you’re about to expose sensitive information on your screen, such as UUIDs, emails, passwords, etc. For Azure Portal specifically there’s a browser extension called Azure Mask that does it all for you: This is a browser extension that will mask GUIDs (such …

gqless – A GraphQL client without queries

Now this is a step forward: gqless is a fundamentally new approach to a GraphQL client. It makes using your API enjoyable, by generating queries at runtime based upon the data your app consumes. Here’s an example app of it in action. Notice how the data it fetched automagically, depending on what is to be …

Listen to your Web Pages

Always notice how in sci-fi movies the computers make those weird bleepy sounds? Tom Hicks has created a JavaScript snippet that combines MutationObserver with AudioContext to recreate that effect. Copy this into the console of any web page that is interactive and doesn’t do hard reloads. You will hear your DOM changes as different pitches …

Introducing a fresh, simpler Facebook

Just out: a new layout for Facebook. You might recognize the style they’ve been pushing out in Messenger and the Facebook App. Also comes with Dark Mode. The new layout will be rolled out to everyone over the next few months, but you can already opt-in manually by clicking the arrow on the right in …

Crafting a Cutout Collage Layout with CSS Grid and clip-path

On Codrops there’s a tutorial on how to create a Cutout Collage Layout using CSS Grid and Clip Path. The result looks quite nice I must say: What I’m not too excited about in this implementation is the fact that it requires you to manually cut up the image into parts beforehand, even though clip-path …

Convert between Symfony HttpFoundation Request / Response and Swoole Request / Response classes with swoole-http-message-bridge

Today I was implementing an HTTP Server using Swoole. At its core, the code looks just like the Swoole HTTP Server example: <?php $http = new \Swoole\HTTP\Server("127.0.0.1", 9501); $http->on('request', function (\Swoole\HTTP\Request $request, \Swoole\HTTP\Response $response) { // … $response->end(); }); $http->start(); In that same project I was also looking to use a package that evolves around …