TIL – Today I learned
Keep learning, learning, learning...
JavaScript
- 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
- Element.prototype.matches can be used to check if an element includes a certain class
- 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
CSS
- 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
- 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 is an upcoming shorthand for the top, right, bottom and left CSS atributes
- 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 will soon be the shortest way to center elements
- Viewport units for font sizes destroy zooming
- Overflow ellipsis after x lines
- 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
Tools
- 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
Bash
- 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
HTML
- 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
NodeJS
- 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())
Accessibility
- 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'?
Performance
git
- 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
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
Web
Productivity
RegularExpressions
SVG
Unicode
VSCode
GraphQL