icodesido

<div id="app">
	<h1>Vue Router Focus</h1>
	<ul class="nav">
		<li>
			<router-link to="/">Home</router-link>
		</li>
		<li>
			<router-link to="/cat">Cat Ipsum</router-link>
		</li>
		<li>

icodesido

var aboutEdward = {
  info: ['Edward', 30],
  favColor: 'blue',
  favSushiRoll: 'Squidy squid squid'
}

function profilePage({favColor} = {favColor: 'vintage pink'}, [name, age] = ['Bunny', 24]) {
  console.log(`My name is ${name}. I am ${age} years old and my favorite color is ${favColor}!`)
}

icodesido

function loadFonts() {
  if ("fonts" in document) {
    var font = new FontFace(
      "Noto Serif",
      "url(notoserif.woff2) format('woff2'), url(notoserif.woff) format('woff')"
    );

    var fontBold = new FontFace(
      "Noto Serif",
      "url(notoserif-bold.woff2) format('woff2'), url(notoserif-bold.woff) format('woff')",

icodesido

<div id="app">
  <h1>Lazy-Loading Image:<br /> Easily Editable Aspect Ratio<br /> In Vue</h1>
  <lazy-load data-src="https://images.unsplash.com/photo-1524654458049-e36be0721fa2?ixlib=rb-0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=1a6782be5cdb94b780ed9d4a79de7041" width="600" height="400" alt="sample image" />
</div>

Vue.component('lazy-load', {
  data: function() {
    return {
      unloaded: true,
      src: this.placeholderSrc(this.width, this.height)

icodesido

// this applies to touch devices, beware of those which emulate hover with a long press action
@media not all and (hover: none)

icodesido

.system-font-stack {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu,
    Cantarell, 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

icodesido

input[type="checkbox"]:checked + label {
  color: steelblue;
}

icodesido

var isNumeric = function (n) {
  return !isNaN(parseFloat(n)) && isFinite(n);
}

icodesido

window.onclick = function(e) {
    console.log(e.target.className);
}

icodesido

/**
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */

@function between($to, $from, $toWidth, $fromWidth) {
  $slope: ($to - $from) / ($toWidth - $fromWidth);
  $base: $from - $slope * $fromWidth;