Learnings

Use the relURL fn in Hugo templates — Given a string, relUrl prepends the relative URL according to a page’s position in the project directory structure.

Hugo

Jun 11, 2019

Auto-focus an input element — pretty much exactly what it sounds like, no JS necessary

HTML5
Code

Jun 11, 2019

Babel.js: what is it? — travel through time to a future where Javascript is different!

Jun 11, 2019

Stylelint — A mighty, modern linter helping you avoid errors and enforce style conventions.

Jun 10, 2019

Axios: what is it? — a Promises-based HTTP client for the browser and Node

Javascript

Jun 10, 2019

Find security vulnerabilities in libraries with Lighthouse — Don’t get XSS’d

Jun 10, 2019

HTML nerd terminology — Self closing tags are called void elements

HTML5

Jun 9, 2019

Format HTML + CSS with JS-beautify — JS-Beautify doesn’t just beautify JS

HTML5

Jun 9, 2019

Hugo archetypes define post templates — template your markdown content creation

Hugo

Jun 9, 2019

Javascript template literals — interpolate expressions within strings

Javascript

Jun 8, 2019

AWS Amplify Console for CI/CD pipelines — glue to unify the AWS service zoo for front-end devs

Jun 8, 2019

Create + reference a native CSS variable — CSS now has variables — it only took 20 years! 😲

Jun 8, 2019

Save or apply a git patch — git diff > foo.patch; git reset; echo do stuff; git apply foo.patch Learn more about git patches

Command Line

Jun 7, 2019

Bind DOM elements to data - 2-way binding — in Vue.js

Vue.js

Jun 7, 2019

Stylelint on the command line — Stylelint isn’t just for editors.

Jun 6, 2019

Bind DOM elements to data - 1-way binding — in Vue.js

Vue.js

Jun 6, 2019

CSS selector performance — Prefer class-attribute to element-attribute selectors

Jun 6, 2019

Flag risky CSS with the 'no-unsupported-browser-features' stylelint plugin — Find and fix browser compatibility issues before you go live

Jun 5, 2019

Emmet — an editor’s helper for web-developers

Editor
tools

Jun 5, 2019

Scale inline SVG proportionally using calc() and var() — Now this one is subtle!

Jun 5, 2019

Vue ViewModel instances — the five elements

Vue.js

Jun 4, 2019

Target content to grid areas by named area — AKA using the ASCII-art syntax for CSS Grid

Jun 4, 2019

Vue templating gotchas — Some tips and common mistakes when writing Vue.js templates

Jun 4, 2019

WebM video files — An open source container video format

Jun 3, 2019

Using the "even" and "odd" keywords in CSS selectors — Alternating, zebra-row styling

CSS3
Code

Jun 3, 2019

Vue template syntactic sugar — Some shortcuts that can save time but also obfuscate meaning.

Vue.js

Jun 3, 2019

Vue's magical key mapping — …from ‘CamelCase’ to ‘kebab-case’ in bind object expressions

Vue.js

Jun 2, 2019

Computed properties in Vue — cached by reactive dependencies

Vue.js

Jun 2, 2019

Style HTML <select> menus in CSS — with :after and content:

HTML5
CSS3

Jun 2, 2019

Vue template directives — the basics

Vue.js

Jun 2, 2019

nth-last-child(num) - the reverse (Polish) selector — selecting from the last element backwards

CSS3

Jun 1, 2019

Bundle simply with Parcel, a webpack alternative — Do you value convention over configuration? Do you strive for simplicity? then Parcel may be for you.

Jun 1, 2019

FlexBox 101 — one-dimensional (linear) layouts

Jun 1, 2019

Splice using Array.splice — The swiss-army knife of arrays

Jun 1, 2019

The nth-of-type(num) CSS element selector — They say you’re not supposed to have a favorite child. But what if you do?

CSS3

Jun 1, 2019

Use the -root {} CSS pseudo-class — like the html {} selector, but with even higher precedence

CSS3

Jan 1, 0001

Responsive image markup — A strange and wonderful confluence of new elements and attributes

#todayilearned

by @jm3 · aka John Manoogian³

Frequent, bite-size mini-milestone updates as I fast-forward merge* my front-end web development skills up to 2019 levels. Learn more

All learnings