Skip to content
tinytip

Latest tips / 4

Use @at-root in SCSS to break out of nesting

June 23, 2022
#scss

In SCSS, selectors can be deeply nested. In some situations you may want to break out of the current selector hierarchy and emit some styles at the root of the document. SCSS provides the @at-root rule for this use case:

/* styles.scss */
@mixin some-mixin() {
color: black;

@at-root body {
background: lightgray;
}
}

.some-class {
@include some-mixin();
}

This will move body out of the parent selector:

/* styles.css */
.some-class {
color: black;
}

body {
background-color: lightgray;
}

Create collections from folders in Eleventy

June 23, 2022
#eleventy

If you want to create a collection from a folder in your Eleventy project, like a collection of blog posts in the posts folder, you could manually add a post tag to every post. But there is an easier way.

The Collection API in Eleventy lets you filter your pages by glob patterns:

module.exports = (eleventyConfig) => {
eleventyConfig.addCollection("posts", function (collectionApi) {
return collectionApi.getFilteredByGlob("posts/*.md");
});
};

This will create a collection "posts" that contains all the markdown files in the posts folder.

Type-safe factory deps in Angular with inject()

June 5, 2022
#angular

A factory function provider in Angular can have dependencies using the deps property.

@NgModule({
providers: [
{
provide: SOME_INJECTION_TOKEN,
deps: [MyService],
useFactory: (myService: myService) => {
return myService.someMethod();
},
},
],
})
export class MyModule {}

The problem is that you need to write the dependencies twice: once for the deps property and once as arguments of the useFactory function. Thanks to the new inject() function in Angular 14 there is now a better way to inject dependencies.

Call the inject() function and pass your dependency (here MyService) as argument. It will provide you the dependency and the return value is type-safe.

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

@NgModule({
providers: [
{
provide: SOME_INJECTION_TOKEN,
useFactory: () => {
const myService = inject(MyService);
return myService.someMethod();

// Or as a one-liner:
// return inject(MyService).someMethod();
},
},
],
})
export class MyModule {}

Switch to the previous git branch with git switch

May 31, 2022
#git

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 -

Inject the unique app id of your Angular app

May 31, 2022
#angular

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 {}