drwpow

SVG Icons

SVGs are the future. SVG icon manifests are now widely-supported by all major browsers, but svg4everybody is still available as a polyfill if needed.

Manifest

The SVG Manifest looks something like this (we’ll call this icons.svg):

<svg xmlns="http://www.w3.org/2000/svg">

drwpow

●○◯◦⚪︎⚫︎⦿◉◎▶︎▷▸▹►▻◀︎◁◂◃◄◅▼▽▾▿▲△▴▵■□▪︎▫︎◾︎◽︎◼︎◻︎⬛︎⬜︎▢▣◆◇◊◈❖

❍◌◍◖◗◐◑◒◔◕◴◵◶◷

◘◙◚◛▤▥▦▧▨▩◧◨◩◪◫◰◱◲◳◬◭◮

⧀⧁⧄⧅⧆⧇⧈⧉

⧋⧑⧒⧮⧰⧲⧭⧨⧩⚀⚁⚂⚃⚄⚅☆★☂☗⚈⚉⚆⚇

🀇🀈🀉🀊🀋🀌🀍

🀲🀳🁁🁂🁐🁞🁟🁓🁔🁕🁖🁊🁤🂀🂋🁴🂄🂅

𝇇𝇈𝇉𝇊𝇋𝇌

𐂠𐂡𐃢𐂶𐂷𐂪𐂩𐂊𐂉𐂅𐂄𐂃𐂂𐂁𐂑𐃪𐃶

🂻🂼🂽🂾

drwpow

• Dead code elimination?
• SSR for progressive enhancement?
• Minimum page weight?
• Can you load CSS via JS?
• CSS Modules?
• Webpack for Ember? (or if not possible, can Ember allow PostCSS, et al?)
• Builder app: 1.8MB JS / Player app: 1.3MB JS
• Nesting components?
• Managing functions within Handlebars messy?
• Local ESLint?

drwpow

<strong>this is some bold text!</strong>

drwpow

<div id="my-container">
  <img />
</div>

<script>
var sizeContainer = function() {
  // console.log(subtractPixels);
  var subtractPixels = 24;
  // console.log(subtractPixels);
  document.querySelector('#my-container')

drwpow

module.exports = {
  config: {
    // default font size in pixels for all tabs
    fontSize: 13,

    // font family with optional fallbacks
    fontFamily: '"Meslo LG M for Powerline", Papyrus',

    // terminal cursor background color and opacity (hex, rgb, hsl, hsv, hwb or cmyk)
    cursorColor: 'rgba(248,28,229,0.8)',

drwpow

• course
  • course code should be 10 characters
  • keywords tag field
  • language (English, English Canadian, French Canadian, LA Spanish, Brazilian)
  • Content Update Reminder Date (CURD™🎉)
  • Learning objectives: sentence, followed by a bulleted list; can information in that box be formatted?
  • computed
    • has audio?
    • has video?
• has webcast?

drwpow

if(e.isFinal) {
  if (e.velocityX > 1) {
    slider.goTo(slider.activeSlide - 1);
  } else if (e.velocityX < -1) {
    slider.goTo(slider.activeSlide + 1)
  } else {
    if (percentage <= -(slider.sensitivity / slider.slideCount)) {
      slider.goTo(slider.activeSlide + 1);
    } else if (percentage >= (slider.sensitivity / slider.slideCount)) {
      slider.goTo(slider.activeSlide - 1);

drwpow

var sliderEl = document.querySelector('.slider');
var slideCount = 3;
var activeSlide = 0; // NEW: the current slide # (0 = first)
var sliderManager = new Hammer.Manager(sliderEl);
sliderManager.add( new Hammer.Pan({ threshold: 0, pointers: 0 }) );
sliderManager.on('pan', function(e) {
  var percentage = 100 / slideCount * e.deltaX / window.innerWidth;
  var transformPercentage = percentage - 100 / slideCount * activeSlide; // NEW
  sliderEl.style.transform = 'translateX( ' + transformPercentage + '% )';
  if(e.isFinal) { // NEW: this only runs on event end

drwpow

var sliderEl = document.querySelector('.slider'); // NEW: our element
var slideCount = 3; // NEW: the total # of slides
var sliderManager = new Hammer.Manager(sliderEl);
sliderManager.add(new Hammer.Pan({ threshold: 0, pointers: 0 }) );
sliderManager.on('pan', function(e) {
  var percentage = 100 / slideCount * e.deltaX / window.innerWidth; // NEW: our % calc
  sliderEl.style.transform = 'translateX(' + percentage + '%)'; // NEW: our CSS transform
});