Skip to content
  • Home
  • Articles
  • Screencasts
  • Projects
  • About
  • Resources
  • Screencasts
  • Today I learned
  • Things I use
  • Talks
  • Newsletter
  • Home Home
  • Articles Articles
  • Screencasts Screencasts
  • Projects Projects
  • About About
  • Newsletter
  • Other Stuff
    • Blogroll People blogging great stuff.
    • Resources Bookmarks I want to keep for later.
    • Show some love Support my blog and newsletter.
    • Talks Talks I've given at conferences.
    • Things I use My hardware and software setup.
    • Today I learned 213 #TIL posts.
Stefan on Mastodon Stefan on Twitter RSS

TIL – Today I learned

All the 213 learnings I bothered writing down
  • Accessibility

    • 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

    • 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

    • 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

    • The relative font weight axis — how variable fonts ease font weight transitions
  • git

    • How to safely remove untracked files from Git repos
    • How to force push git branches without the --force flag
    • How to exclude commits from git blame
    • 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

    • GraphQL Playground offers a protocol handler
  • HTML

    • Self-closing tags are mostly meaningless in HTML
    • Safari allows to configure password autofilling
    • Disabled JavaScript turns off native lazy loading
    • How specify the starting number 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

    • Cross-origin module scripts require CORS response headers
    • How to refresh a page in an interval (without JavaScript)
    • Downloads can be triggered via HTTP headers
  • JavaScript

    • 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
    • You can configure the logged 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
    • Interfere Constructor calls with ES6 Proxies
  • macOS

    • 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

    • 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

    • How to preload responsive images with imagesizes and imagesrcset
    • The navigation timing API includes the type of the current navigation
  • Productivity

    • 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

    • Google displays table of contents and anchor links
    • How to define your relationship to sites you link to
  • SVG

    • How to disable scaling for stroke width
    • SVGs filters can be inlined in CSS
    • The paint order of SVG elements and their stroke and fill is configurable
    • You can nest SVG elements
    • SVGs have additional pointer-events properties
  • Tools

    • 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

    • How to narrow and secure types with const assertions
    • VS Code supports JSDoc-powered type checking
  • Unicode

    • There is a Unicode mode in JavaScript regular expressions
    • Equality of object property names depends on code units
    • String.prototype.normalize for safer string comparison
    • U+202E - RIGHT-TO-LEFT OVERRIDE
  • VSCode

    • VS Code supports JSDoc-powered type checking
    • How to enable semantic highlighting in VS Code
  • Web

    • How to enforce pinch-to-zoom in Android browsers
    • Downloads can be triggered via HTTP headers
    • There is a format called 'mhtml' that inlines assets

Other stuff

Topics

  • JavaScript (117 posts)
  • CSS (89 posts)
  • Tools (56 posts)
  • HTML (41 posts)
  • Bash (40 posts)
  • NodeJS (35 posts)
  • Accessibility (27 posts)
  • Web (22 posts)
  • git (20 posts)
  • Performance (19 posts)
  • macOS (15 posts)

Web Dev Learnings

  • How to force push git branches without the --force flag
  • The output HTML element is an aria-live region
  • git has an auto-correct flag
  • Check if an element includes a certain class with "matches"
  • How to disable Google sign-in prompts on other sites
  • How to find all internal pages in Chromiums and Firefox

Popular articles

  • A new method to validate URLs in JavaScript (2023 edition)
  • How to import JSON files in ES modules (Node.js)
  • APIs to generate random user avatars

Recently updated resources

  • Timeless articles
  • Job hunt and interviewing
  • A Firefox-only minimap
© 2023 Copyright Stefan Judis. All rights reserved.
♥️