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', 'text-base', 'leading-relaxed']);

// using a string
const Wrapper = cc('section')('container mx-auto px-4');

// using an object
const Button = cc('button')({
  'color-gray-500': true,
  'font-serif': true,
});

const MyComponent = () => (
  <Wrapper>
    <Header>A title</Header>
    <Intro>A nice intro</Intro>
    <Button>Ok</Button>
  </Wrapper>
);

export default MyComponent;

The classnames-components package itself utilizes classnames under the hood. Currently limited to HTML elements, but one of the upcoming features is to allow you to extend existing classnames-component-created components.

Installation per NPM/Yarn:

# NPM
npm i classnames-components

# Yarn
yarn add classnames-components

classnames-components (GitHub) →

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 the browser how to apply CSS during a render process.

Houdini’s browser support is improving and some APIs are available for use today, so it’s a good time to become familiar with them and experiment. We are going to take a look at each part of Houdini, its current browser support and see how they can be used today using progressive enhancement.

Smashing Magazine: A Practical Overview Of CSS Houdini →

🖥 New to Houdini and not a big fan of all that text? This 2018 Houdini Slidedeck by Ibe Vanmeenen was very nice to see.

📈 Now’s a good time to compare Is Houdini Ready Yet‽ with the version from 2016. That’s a lot of green that got added since then 🙂

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 to see why: an element can be placed anywhere along the path, with or without motion – its position (or offset-distance value) doesn’t have to be animated.

And since offset-distance also is a CSS property, it can be animated 🙂

Positioning Text Along a Path with CSS →

💡 This technique is not the same as outlined in Moving Text on a Curved Path on CSS-Tricks. That technique uses SVG as its layout engine.

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 to gain access to any and all modules we could think of. Tag management enables folks to very quickly add another third-party service.

All of these things, on the surface, provide some value, but the consequences are tremendous. Because these processes remove friction, they don’t ever really give us a chance to pause and consider what we’re doing.

Re-introducing some healthy friction, some moments of pause, in our processes is critical to ensuring a higher level of quality overall.

Examples would be installers that prevent you from installing large bundles, or build pipelines that mark the build as failed when the total bundle size exceeds a certain goal.

Tim Kaldec →

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 🙂

Beware of potential clipping on various platforms though, as emoji differ per platform.

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 npm link and later on symlink it into your project using npm link package:

cd ~/projects/node-redis    # go into the package directory
npm link                    # creates global link

cd ~/projects/node-bloggy   # go into some project directory
npm link redis              # link-install the redis package (by its name)

This methods works fine and – above all – allows you to have a package.json that has no record of that link. That way you can check it into Git and push it, while still using the local version.

A downside however is that this way of working change is not explicit: by checking your package.json you can’t really tell whether you’re using a locally linked version or not.

~

A more easy quick and dirty way of achieving this is to directly install a package by simply referring to its directory:

cd ~/projects/node-bloggy   # go into some project directory
npm install ../node-redis   # install the redis package by referring to its directory

Apart from symlinking the package into your project, your package.json will have been adjusted like this:

{
  …
  "dependencies": {
    "redis": "file:../node-redis"
  }
}

This change is explicit: a look at your package.json clearly tells you that you’re using a locally installed package.

⚠️ Do note that this way of working comes with a big caveat though: you may not commit this change into Git. While this change Works Fine on my Machine™ it won’t in your build system, your colleague their machine, …

~

So which technique to use when? Personally I go for:

  • npm link when adjusting an existing library (most likely a clone/fork to land a bugfix) while testing it in an existing project
  • npm install ../path when splitting off a new library from an existing project

~

Did this help you out? Like what you see?
Thank me with a coffee.

I don't do this for profit but a small one-time donation would always put a smile on my face. Thanks!

☕️ Buy me a Coffee ($3)

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 as Subscription IDs), email addresses, keys, and connection strings with a blur. The intention of the extension is to make it easier to do screen recordings without revealing sensitive, personal, account information that may show up on screen. It will only run and apply against Azure portal URLs. It’s available in Chrome and Firefox.

Looks really handy!

azure-mask (GitHub) →

⚠️ Unfortunately you can’t install it from the Chrome Web Store due to a “trademark infringement on the name” but you can always grap a .zip from the releases page and load it as an unpacked extension.

👀 If you’re using Visual Studio Code and recording that, you can use Cloak to conceal secrets in ENV files.

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 consumed in the component:

gqless
gqless-movies-demo – A demo movies app using Hasura and gqless →

Video by @thesamdd