Skip to content
tinytip

Learn something new in 30 seconds tinytip is a growing collection of tiny tips for frontend developers

Latest tips

RxJS combineLatest() accepts a selector function

July 12, 2022
#rxjs

The RxJS function combineLatest() accepts a selector function as last parameter. This selector function receives the latest value of each observable as argument and can be used to return a new value that will be emitted.

combineLatest(
// Array of observables
[stream1$, stream2$, stream3$],

// Selector function
(val1, val2, val3) => val1 + val2 + val3 // Return value will be emitted
).subscribe();

Try the example above in the online playground.

Import Markdown files in your Storybook MDX docs

June 23, 2022
#storybook #markdown

Storybook allows you to import existing Markdown files your MDX docs. You just need configure the transcludeMarkdown option in your storybook config:

// .storybook/main.js
module.exports = {
addons: [
{
name: "@storybook/addon-docs",
options: { transcludeMarkdown: true },
},
],
// ...
};

Then you can import your Markdown file in your MDX file and render it as a component:

import Example from "./Example.md";

# Hello World

<Example />

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