Tags

Accessibility
- The CSS list-style property affects screen readers
- Data binding to aria attributes in Angular
- VoiceOver reads the title of external SVGs even if the alt text is empty
- Let VoiceOver on iOS read a split element as a single element with the text role
Alpine.js
- Alpine.js accepts a custom prefix for directives
Angular
- Listen for specific keys in Angular Templates
- Style Angular Components based on their context
- Angular HttpClient accepts query params as object
- Data binding to aria attributes in Angular
- Angular Outputs can be RxJS Observables
- Inject the unique app id of your Angular app
- Type-safe factory deps in Angular with inject()
array
- Create an array with the map function of Array.from
Bash
- Generate strings with brace expansion
chrome
- Empty Cache and Hard Reload in Chrome
- Create QR codes in Chrome to send URLs to your smartphone
color
- Get the current text color with currentColor in CSS
console
- Use $0 in the browser console to get the current element
- Find elements in the browser console with $$
- Copy text in the browser console with the copy() function
CSS
- Get the current text color with currentColor in CSS
- Enable smooth scrolling with scroll-behavior in CSS
- CSS has a turn unit to rotate elements
- Style Angular Components based on their context
- CSS calc() requires unit
- CSS content-visibility hides the content of an element
- Named lines in CSS grid
DevTools
- Use $0 in the browser console to get the current element
- Find elements in the browser console with $$
- Copy text in the browser console with the copy() function
- Emulate a focused page in DevTools to debug overlay elements
- Observe values in Browser DevTools with Live Expressions
- Empty Cache and Hard Reload in Chrome
Eleventy (11ty)
- Eleventy supports Nunjucks globals
- Create collections from folders in Eleventy
events
- Listen for specific keys in Angular Templates
- How to get the event target inside Shadow DOM
Git
- Amend the previous commit and keep the commit message
- Configure default branch name in Git
- Switch to the previous git branch with git switch
- Find the gitignore rule that excludes a file from git
GitHub
- Find files by name on GitHub
- Open GitHub repositories in VS Code directly in your browser
grid
- Named lines in CSS grid
HTML
- Edit any website in design mode
- The CSS list-style property affects screen readers
- Customize the PDF viewer when embedding a PDF
- Let VoiceOver on iOS read a split element as a single element with the text role
HTTP
- Angular HttpClient accepts query params as object
jasmine
- Create clearer tests by nesting describe()
JavaScript
- Insert multiple HTML elements at once with DocumentFragment
- Style console log outputs in JavaScript
- Edit any website in design mode
- Function parameters can have default values based on other parameters
- setTimeout accepts arguments for the function
- Create an array with the map function of Array.from
- How to use Array.map() with objects
- Keep the separators when splitting a string in JavaScript
- How to get the event target inside Shadow DOM
- Get IANA timezone of user
- Query selectors are applied to the whole document, unless you use :scope
- Get translated display names with Intl.DisplayNames
jest
- Create clearer tests by nesting describe()
- Run the same test with different data in Jest
markdown
- Import Markdown files in your Storybook MDX docs
Nunjucks
- Eleventy supports Nunjucks globals
npm
- Generate strings with brace expansion
- Use npm ci for a clean installation of your dependencies
PDF
- Customize the PDF viewer when embedding a PDF
React
- React function component without children in TypeScript
- Custom hooks should return named tuples and not use "as const"
- Show DOM nodes in React DevTools
- React Context without default value
RxJS
- Unsubscribe multiple RxJS subscriptions with Subscription.add()
- Map an RxJS stream to a static value with the mapTo operator
- Angular Outputs can be RxJS Observables
- RxJS combineLatest() accepts a selector function
SCSS / SASS
- Use @at-root in SCSS to break out of nesting
- Scope your CSS imports with meta.load-css in Sass
Shadow DOM
- How to get the event target inside Shadow DOM
storybook
- Import Markdown files in your Storybook MDX docs
svg
- VoiceOver reads the title of external SVGs even if the alt text is empty
terminal
- Find previous commands in the terminal
testing
- Create clearer tests by nesting describe()
- Run the same test with different data in Jest
TypeScript
- Separate large numbers in TypeScript with underscore
- Assert that all possible cases in a switch statement are handled
- Define an array with a min length in TypeScript
- TypeScript supports arrays with the rest syntax at the beginning
- Check if a string is a valid enum value in TypeScript
- Create a string type in a specific format in TypeScript
- Extract types in TypeScript
- Exclude certain types in TypeScript
- React function component without children in TypeScript
- Custom hooks should return named tuples and not use "as const"
- Replace any with generics, not with unknown (in many cases)
Visual Studio Code
- Restart TypeScript server in VS Code with a command
- Navigate easier in large files via symbols in VS Code
- Generate code with Emmet in VS Code
- Reuse the last git commit message in VS Code
- Enable Screencast Mode in VS Code
- Move VS Code Side Bar to the right
- Search & replace with RegEx groups in VS Code