Latest tips / 5

After switching to another branch, you can use the git switch - command to switch back to the previous branch without having to reenter the name:

# Feature branch is active
$ git branch --show-current
feature/some-feature

# Switch to another branch
$ git switch main

# Do some work ...

# Switch back to "feature/some-feature"
$ git switch -

Angular generates a unique id for your app which is available via APP_ID injection token. This is useful if you are in a micro-frontend with multiple Angular apps on the same page and you need a unique value.

import { APP_ID } from "@angular/core";

@Component()
export class MyComponent {
  constructor(@Inject(APP_ID) private appId: string) {
    console.log("App id:", appId); // Example: "pvu"
  }
}

Angular uses the app id for prefixing your CSS selectors when using ViewEncapsulation.Emulated. You can define your own id by providing the token as a provider in your app module:

import { APP_ID } from "@angular/core";

@NgModule({
  // ...
  providers: [
    {
      provide: APP_ID,
      useValue: "42",
    },
  ],
})
export class AppModule {}

Eleventy v1.0.0 (and above) supports Nunjucks globals. This lets you register a global value or function that is available in all Nunjucks templates.

module.exports = (eleventyConfig) {
  // Register two globals, a static value and a function
  eleventyConfig.addNunjucksGlobal("message", "Hello World");
  eleventyConfig.addNunjucksGlobal("greeting", (name) => `Hello ${name}`);
}

Now you can use {{ message }} and {{ greeting('John') }} in your Nunjucks templates.

A more useful example is a global function that generates a unique id. You may need this if you want to connect a label with its input or for aria-labelledby and aria-describedby. Here I use the nanoid package to generate the id:

const { nanoid } = require("nanoid");
module.exports = (eleventyConfig) =>
  eleventyConfig.addNunjucksGlobal("nanoid", () => nanoid());
};

Now you can create a new unique id, assign it to a local variable and use it to connect two HTML elements:

{% set id = nanoid() %}
<article aria-labelledby="{{ id }}">
  <h2 id="{{ id }}">...</h2>
  <p>...</p>
</article>

In the example above we connect the h2 with the article element using aria-labelledby.

When creating a CSS grid with grid-template-columns you can give your grid lines a name using the square brackets syntax [name]. Child elements can be positioned using this name.

.grid {
  display: grid;
  /* Lines named "firstline", "secondline" and "thirdline" */
  /* Last line has no name */
  grid-template-columns: [firstline] 1fr [secondline] 1fr [thirdline] 1fr;
}

.child {
  /* Use the line name to set the position */
  grid-column: secondline;
}

A line can have multiple names by separating them with a space:

.grid {
  grid-template-columns: [someline] 1fr [somename anothername thirdname] 1fr;
}

And using -start and -end suffixes you can let a line name span over multiple columns. In the example below left spans over the first two columns, center is used for the column in the middle and right spans over the last two columns.

.grid {
  grid-template-columns:
    [left-start] 1fr
    [right-start center] 2fr 
    [left-end] 1fr [right-end];
}

.cell-left   { grid-column: left; }   /* 1fr + 2fr */
.cell-center { grid-column: center; } /* 2fr */
.cell-right  { grid-column: right; }  /* 2fr + 1fr */

And here is how this looks like:

Your child elements don't need to know the exact number of columns anymore and can instead use the line name. And if your grid is responsive and changes the number of columns dynamically, your child elements will still be positioned correctly without an additional media query to update grid-column.

Update: Beginning with React 18 you don't need the VFC or VoidFunctionComponent interfaces anymore. The children property has been removed from the FC and FunctionComponent interfaces.

If you create a function component in React using TypeScript, there's the FC or FunctionComponent interface that you can use to define the type of your component. The interface automatically adds the children property to let the parent component pass child elements to your component.

If your component does not accept children, you can use the VCF or VoidFunctionComponent interface instead. It does not add the children property.

import { FC, VFC } from "react";

export interface Props {
  msg: string;
}

export const MyCompWithChildren: FC<Props> = (props) => {
  return <div>...</div>;
};

export const MyCompWithoutChildren: VFC<Props> = (props) => {
  return <div>...</div>;
};