TIL – Today I learned
All the 246 learnings I bothered writing down
Accessibility
- A "section" without an accessible name is nothing but a "div"
- The order of accessible name computation steps
- Forms without an accessible name are not exposed as ARIA landmarks
- Local link targets must be focusable to prevent accessibility issues
- Overwriting an element's accessible name can break speech recognition
- em and strong are not announced by screen readers
- Table cells support a "headers" HTML attribute
- Keyboard button clicks with Space and Enter behave differently
- Chrome and Edge provide a highly visible focus outlines
- How to visualize the tab order without using an extension in Firefox
- How to define Open Graph / Twitter image alt text (and why it might not matter...)
- How to read an entire document using VoiceOver
- The output HTML element is an aria-live region
- The CSS "content" property accepts alternative text
- text-transforms affect screen readers, too!
- Viewport units for font sizes destroy zooming
- The for accessibility required `caption` element in HTML tables
- What's 'roving tabindex'?
Bash
- Rerun commands with the built-in "r" command
- Navigate your shell history with CTRL keys
- A shortcut to edit long shell commands in your $EDITOR
- How to do math in shell environments (bash, zsh, ...)
- Suffix aliases (-s) in Zsh
- How to measure network quality (download/upload) on macOS
- How parameter expansion helps to not accidentally delete all the files on your machine
- How to force yourself to leave the computer using the leave command
- How to use brace expansion ({}) to spread shell command arguments
- How to quickly fail bash scripts using set
- A preceding space prevents dangerous commands from going into history
- How to add interactive questions to bash scripts
- How to automatically respond to confirmations in CLI tools
- [ is an actual bash command
- Write data to files and pipe it into other programs the same time
- The power of cat and stdin
- Process substitution in bash
- Powerful history command shortcuts in bash
CSS
- Duplicated CSS @keyframes properties are valid
- Auto-margin works with absolute positioned elements
- oklch() retains perceived lightness for different hue angles
- How to style element descendants with Tailwind CSS
- How to escape CSS selectors in JavaScript
- Size container queries can detect landscape / portrait orientation
- Viewport units can consider the writing mode
- Elements can be visible even though their parent has set "visibility: hidden"
- CSS clip-path can go outside of an element
- Why custom properties don't work with the url() CSS function
- All browsers adopted :focus-visible in their UA stylesheets
- How to match HTML elements with an indeterminate state
- How to align the text of the last paragraph line
- You can't override !important user agent CSS declarations
- The surprising behavior of "important CSS custom properties"
- rgba() and hsla() are legacy functions and aliases in modern browsers
- User preference feature queries have a boolean context
- Automatic hyphenation depends on the defined document language
- CSS defines color values that follow system preferences
- How to style the select button of file inputs
- CSS defines functions to repeat gradients
- CSS Text transforms support capilization
- How to display language-specific quotes in CSS
- CSS media queries can be nested
- SVGs filters can be inlined in CSS
- How to tell browsers that your site supports color-schemes
- Elements with overflow: hidden are scrollable
- The ex unit in CSS
- :defined can be used to target not yet defined custom elements
- Custom properties affect how invalid CSS declarations are handled
- Safe/unsafe alignment in CSS flexbox
- The CSS "content" property accepts alternative text
- inset – the shorthand for top, right, bottom and left CSS properties
- text-transforms affect screen readers, too!
- "Hard CSS gradients" can be shortened to not include redundant values
- CSS Grid can be used to stack elements
- text-justify defines where space is added in justified text
- box-decoration-break helps to define how elements should be rendered across lines
- backdrop-filter lets you apply visual effects to the area behind an element
- caption-side controls the position of a table caption
- overflow hidden only hides elements going over the padding-box
- word-spacing controls the gap between words
- The hover media query can help to remove hover styles on touch devices (but may include false positives)
- background clip is configurable for every background gradient separately
- color-adjust trumps user agent setting about background printing
- Stylesheets do not only block rendering but also JavaScript execution
- The CSS attribute selector has a case-insensitive mode
- SVGs have additional pointer-events properties
- CSS grid is the shortest way to center elements
- Viewport units for font sizes destroy zooming
- Overflow ellipsis after x lines with line-clamp
- Labels trigger states for associated inputs
- Interaction media queries in CSS
- A use case for CSS min-content and max-content
- Useful background-repeat options other than repeat
Fonts
git
- How to apply a global Git commit template
- How to search for strings in Git commit additions or deletions
- How to safely remove untracked files from Git repos
- How to exclude commits from git blame
- How to force push git branches without the --force flag
- git supports global gitignore files
- How to apply directory dependent git configuration using conditional imports
- git commit accepts several message flags (-m) to allow multiline commits
- git branch can show more than only the name of branches
- git has an auto-correct flag
- You can clone repositories without the whole history
- Force pushing git branches with a safety net
- The short version of 'git status' and the close but different '--porcelain' mode
- Finding git tags with the git describe command
- Improved git workflow with fixup and autosquash
- Time based git logging
GraphQL
HTML
- A "section" without an accessible name is nothing but a "div"
- Use "translate" to turn off element translations
- Forms without an accessible name are not exposed as ARIA landmarks
- Target=_blank implies rel=noopener
- How to exclude elements from being shown in Google Search results
- Local link targets must be focusable to prevent accessibility issues
- Self-closing tags are mostly meaningless in HTML
- Safari allows to configure password autofilling
- Disabled JavaScript turns off native lazy loading
- How to specify the start of an ordered HTML list
- Table cells support a "headers" HTML attribute
- How to match HTML elements with an indeterminate state
- How to define your relationship to sites you link to
- Automatic hyphenation depends on the defined document language
- How to define Open Graph / Twitter image alt text (and why it might not matter...)
- HTML defines a ping attribute on anchor elements (links)
- The output HTML element is an aria-live region
- Email inputs can accept multiple email addresses
- How to refresh a page in an interval (without JavaScript)
- Inputs of type date support min, max and step attributes
- How to tell browsers that your site supports color-schemes
- How to preload responsive images with imagesizes and imagesrcset
- button elements offer attributes to change form behavior
- requestSubmit offers a way to validate a form before submit
- Input elements hold references to their labels
- Datalist elements can have values and labels
- divs are valid elements inside of a description list
- The hr element is more than a horizontal line
- The for accessibility required `caption` element in HTML tables
- Labels trigger states for associated inputs
- Implicit form submission doesn't work always
HTTP
JavaScript
- Forbidden headers can't be set in "fetch" requests
- parseInt parses anything starting with a number
- Static initialization blocks in JavaScript classes
- Hide object properties with JavaScript symbols
- Earlier function parameters are available to default parameters
- How to escape CSS selectors in JavaScript
- How to use EventTarget as a web-native event emitter
- How to split JavaScript strings into sentences, words or graphemes with "Intl.Segmenter"
- "fetch" supports a "keepAlive" option to make it outlive page navigations
- Keyboard button clicks with Space and Enter behave differently
- VS Code supports JSDoc-powered type checking
- Array.prototype.reduce's initial value is optional
- How to preserve separators in the result of String.prototype.split()
- Multiline mode in JavaScript regular expressions
- Cross-origin module scripts require CORS response headers
- How to log JavaScript stack traces and objects using console.trace
- addEventListener accepts functions and objects
- The navigation timing API includes the type of the current navigation
- Define where an element should be scrolled to using elem.scrollIntoView
- requestSubmit offers a way to validate a form before submit
- Optional chaining helps to avoid "undefined is not a function" exceptions
- Backreferences in JavaScript regular expressions
- Input elements hold references to their labels
- Focus events include a relatedTarget property
- String.prototype.replace supports replacement patterns
- Error catch-bindings are finally optional
- JSON.stringify takes toJSON methods into consideration
- Array.from has a second argument
- A deep-dive into promise resolution with objects including a then property
- Configure the logged JavaScript error stack trace length in certain environments
- Stylesheets do not only block rendering but also JavaScript execution
- Property order is predictable in JavaScript objects since ES2015
- Check if an element includes a certain class with "matches"
- Non-capturing groups in JavaScript regular expressions
- +-0, NaN and Object.is in JavaScript
- lookaheads (and lookbehinds) in JavaScript regular expressions
- You can't set new properties on JavaScript Symbols
- How the rest operator and default values affect the function length property
- The global `Reflect` object, its use cases and things to watch out for
- Not every JavaScript function is constructable
- Measuring execution time more precisely in the Browser and Node.js
- Await in async functions works for any thenable
- isNaN is not equal Number.isNaN
- includes really is the better indexOf
- localeCompare helps to compare strings in a sane manner
- IntersectionObserver accepts several threshold values
- There is a Unicode mode in JavaScript regular expressions
- Equality of object property names depends on code units
- The dot in RegExp doesn't match all characters in JavaScript
- Proper Tail Calls (PTC) in JavaScript
- Implicit form submission doesn't work always
- String.prototype.normalize for safer string comparison
- Conditional properties with object spread
- Completion values in JavaScript
- var let = 12 is valid JavaScript
- finally in a try/catch statements really goes over everything
- Skipped holes in JavaScript Arrays
- Intercept JavaScript constructor calls with ES6 Proxies
macOS
- The macOS inline dictionary has a shortcut
- How to open a local file from the URL bar in VS Code
- macOS offers a tool to remove backgrounds from images
- How to measure network quality (download/upload) on macOS
- How to run apps in low-resolution on macOS
- Copy screenshots directly to the clipboard
- The macOS screenshot area is draggable
- How to change the output image format of macOS screenshots
- Faster forward deletion on macOS
- A quick way to take pretty window screenshots on macOS
- Double-click the edges of a window in macOS to expand it
NodeJS
- Set the default time zone in Node.js
- Top-level promise handling in Node.js ES modules
- How to override your dependency's dependencies (Node.js)
- "npm root" locates the global node modules directory
- Top-level await is available in Node.js modules
- npm init uses npx under the hood
- Prevent npm install for not supported Node.js versions
- npm install supports local packages and dependencies
- The fs module includes promisified methods since Node 11
- How to create your custom Node.js REPL
- How to control log messages without a dependency in Node.js
- isTTY can be used to tailor appropriate Node process output
- Package.json values are accessible in npm/yarn scripts
- The NPM_CONFIG_PRODUCTION flag sets the NOVE_ENV variable to production in npm scripts
- You can pipe into Node.js
- Node.js sends warnings when you add too many listeners to an event emitter
- How to figure out the Node.js entry script with process.mainModule or require.main
- How to quickly perform a syntax check of a JavaScript file
- Measuring execution time more precisely in the Browser and Node.js
- Commands in the Node.js REPL
- console.dir() is short for console.log(util.inspect())
Performance
Playwright
Productivity
- How to load images in a spreadsheet
- There is an MDN short URL to access the docs
- Quick access to document actions in Google docs
- Select multiple tabs in Firefox and Chrome
- Faster forward deletion on macOS
- cmd/ctrl + shift + click opens a new tabs focuses it
- A quick way to take pretty window screenshots on macOS
RegularExpressions
- Multiline mode in JavaScript regular expressions
- Backreferences in JavaScript regular expressions
- Non-capturing groups in JavaScript regular expressions
- lookaheads (and lookbehinds) in JavaScript regular expressions
- There is a Unicode mode in JavaScript regular expressions
- The dot in RegExp doesn't match all characters in JavaScript
SEO
SVG
Tailwind
Tools
- How to load images in a spreadsheet
- How to show more than ten results per page on Google Search
- YAML provides 9 ways to handle strings
- How to disable Google sign-in prompts on other sites
- Firefox DevTools provide a multiline JavaScript console
- How to control the used Gmail account when using slides.new, docs.new, etc.
- How to disable Chrome's URL bar autosuggestions
- How to discard tabs to save resources in Chrome, Edge and Firefox
- How to access the your sites' Google cache from the URL bar
- How to visualize the tab order without using an extension in Firefox
- How to find all internal pages in Chromiums and Firefox
- Firefox support selection of multiple text areas
- How to read an entire document using VoiceOver
- Online RSS readers send follower counts in their user agent string
- iTerm2 offers a way to notify you when a long-running command has finished
- How to extract images (and media files) from Word and Keynote documents
- YouTube offers RSS feeds for channels
- Quick access to document actions in Google docs
- Gmail has more than one star
- Select multiple tabs in Firefox and Chrome
- You can import Google Analytics Stats in caniuse.com
TypeScript
Unicode
VSCode
Web