Building The New Facebook With React and Relay

With the new Facebook design that got anounced just a few days ago, this video by Ashley Watkins is worth a look: Ashley discusses some of the technologies and strategies powering FB5, the new facebook.com. Topics covered include Facebook’s approach to CSS-in-JS, data-driven dependencies, phased code downloading, and more.

classnames-components – A classnames component wrapper to speed up styling React components

Geoffrey has created a handy package to quickly create React components that are built of an element with some CSS classes applied to them. Handy for when you’re working with CSS libraries such as Tailwind. import cc from 'classnames-components'; // using arguments const Header = cc('h1')('font-sans', 'text-3xl'); // using an array const Intro = cc('p')(['font-serif', […]

A Practical Overview Of CSS Houdini

Adrian Bece writing for Smashing Magazine: Houdini, an umbrella term for the collection of browser APIs, aims to bring significant improvements to the web development process and the development of CSS standards in general. Frontend developers will be able to extend the CSS with new features using JavaScript, hook into CSS rendering engine and tell […]

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 […]

Using 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. To work with local NPM packages on can reside to using npm link. You make a package available locally with […]

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 […]