📝 Today I Learned
The fit-content property can be used in order to allow smaller reserved space than the column track.
grid-template-columns: fit-content(250px) 1fr;https://codepen.io/rachelandrew/pen/KZyaBj
trackBy modifies the behavior so that it compares new data to old based on the return value of the supplied trackBy method.
This allows Angular to reduce the amount of DOM update needed.
<!-- instructor-list.component.html.html -->
<ul>
<li *ngFor="let instructor of instructorList: trackBy: trackByName" >
<span>Instructor Name {{ instructor.name }}</span>
</li>
</ul>/* instructor-list.component.ts */
import { Component } from '@angular/core';
import { ListService } from '../list.service';
@Component({
selector: 'app-instructor-list',
templateUrl: './instructor-list.component.html'
})
export class InstructorListComponent {
instructorList = {name: string}[];
constructor(private ls: ListService){
// In this example let's assume the list service provides the
// instructors as a realtime list of filtered instructors.
// New updates are sent at regular intervals regardless of content change.
// As a result the object references change with each update.
ls.getList()
.subscribe(list => this.instructorList = list);
}
trackByName(index, instructor) {
return instructor.name;
}
}You can use render functions instead of templates for single slot components to avoid the extra wrapper element
Vue.component('element-query', {
// use a render function to grab the slot directly!
render() {
return this.$scopedSlots.default({
width: this.width,
height: this.height,
})
},
data() {
return {
width: null,
height: null,
}
},
mounted(){
erd.listenTo(this.$el, (el) => {
this.width = el.offsetWidth;
this.height = el.offsetHeight;
})
},
})You can provide a second argument to Array.from that is a map function.
Array.from(Array(20), (item, index) => index + 1);It is possible to mock the current date with the mockDate function of Jasmine.
// with native Date
const today = new Date('2015-10-19');
jasmine.clock().mockDate(today);
// with moment.js
const today = moment('2015-10-19').toDate();
jasmine.clock().mockDate(today);Press [ctrl] + [shift] + p or [cmd] + [shift] + p then type code "show coverage". You can then reload the page to see how much code is being unused on the page.
It is possible to get unique values from an array with Set() and the rest operator.
const uniqueArray = (arr) => [...new Set(arr)];Use curly brackets in the command line to cut down on typing the same thing over and over
$ touch component.{ts,css,html}With Pure pipe, we can optimize expression re-evaluation and get the caching that Angular provides.
@Pipe({
name: 'purePipe',
pure: true,
})
export class PurePipe {
transform(input: string, param: string) {
return input + param;
}
}The mix-blend-mode CSS property describes how an element's content should blend with the content of the element's direct parent and the element's background. For instance we can set a text to white and the mix-blend-mode property to difference. That would result in the text being always readable no matter the background.
.readable-text {
color: white;
mix-blend-mode: difference;
}It is possible to have a DOM element keep a fixed aspect ratio with a combination of CSS grid and SVG.
<style>
.aspectRatioSizer {
display: grid;
}
.aspectRatioSizer > * {
grid-area: 1 / 1 / 2 / 2;
}
</style>
<div class="aspectRatioSizer">
<svg viewBox="0 0 7 2"></svg>
<div>
Content goes here
</div>
</div>https://codepen.io/noamr/pen/mpamVN
We can add preconnect hints for any hosts that you will be requesting assets from so the browser can then prep things by establishing all the necessary connections for those resources.
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>You can use a specific version of node so any time you do npm test or npm start, it will use this one, regardless of what your global node version is.
$ npm install node@7You can use tagged template strings to get many editors to syntax-highlight the strings
const html = String.raw;
const wired = html`
<div class="wow">
html, yay
</div>
`;You can use toLocaleString to format currency
100.42.toLocaleString('fr-FR', { style: 'currency', currency: 'EUR' });
// "100,42 €"
100.42.toLocaleString('en-US', { style: 'currency', currency: 'USD' });
// "$100.42"You can use git log to generate a changelog since a given tag.
$ git log --oneline --no-merges [last tag]..
$ git log --oneline --no-merges v1.10.0..You can make your layout fast and static by default by turning on content-based sizing on a per-element basis.
* {
box-sizing: border-box;
contain: strict;
}
[autosize] {
contain: layout style paint;
}addEventListener() supports an once option.
target.addEventListener('click', () => console.log('once'), { once: true })To rotate a shape witout using the center of the SVG canvas as the origin of the rotation but its own center, you can add transform-box: fill-box to the shape you're rotating.
.triangle {
animation-name: rotation;
animation-duration: 1s;
transform-origin: center;
transform-box: fill-box;
}
@keyframes rotate {
from { transform: rotate(90deg); }
to { transform: rotate(0deg); }
}