honsa

// Welcome! require() some modules from npm (like you were using browserify)
// and then hit Run Code to run your code on the right side.
// Modules get downloaded from browserify-cdn and bundled in your browser.
require('vue-tables-2');

honsa

// Welcome! require() some modules from npm (like you were using browserify)
// and then hit Run Code to run your code on the right side.
// Modules get downloaded from browserify-cdn and bundled in your browser.
require('vue-tables-2')

honsa

// Welcome! require() some modules from npm (like you were using browserify)
// and then hit Run Code to run your code on the right side.
// Modules get downloaded from browserify-cdn and bundled in your browser.
require('vue-tables-2')

honsa

Stuff I wish I'd known sooner about service workers

I recently had several days of extremely frustrating experiences with service workers. Here are a few things I've since learned which would have made my life much easier but which isn't particularly obvious from most of the blog posts and videos I've seen.

I'll add to this list over time – suggested additions welcome in the comments or via twitter.com/rich_harris.

Use Canary for development instead of Chrome stable

Chrome 51 has some pretty wild behaviour related to console.log in service workers. Canary doesn't, and it has a load of really good service worker related stuff in devtools.

honsa

window.addEventListener('scroll', function(e) {
    var elements = document.querySelectorAll('gf-content-editable');
    [].forEach.call(elements, function(element) {
      element.textContent = 'I am a funny sentence';
    });
});

honsa

@keyframes fadeToVisible {
  1% {
    visibility: visible;
  }
  100% {
    visibility: visible;
    opacity: 1;
  }
}

honsa

javascript:(function() {!function(t,e){"object"==typeof exports&&"string"!=typeof exports.nodeName?module.exports=e():t.FauxPas=e()}(this,function(){var t="faux-pas",e=function(t,e,o){this.level=t,this.message=e,this.element=o,this.output=this.toString()};e.prototype.isError=function(){return"error"===this.level},e.prototype.isWarning=function(){return"warn"===this.level},e.prototype.printElement=function(){if(!this.element)return"";for(var t=this.element.cloneNode(!0),e=t.childNodes,o=e.length-1;o>=0;o--)t.removeChild(e[o]);return t.outerHTML.replace(/ style\=\"[^\"]*\"/,"")},e.prototype.toString=function(){var e=this.printElement();return t+" "+this.level+": "+this.message+(e?" "+e:"")},e.prototype.console=function(){this.element?console[this.level](this.message,this.element):console[this.level](this.message)};var o=function(){this.title=t+" Results",this.lines=[],this.errorCount=0,this.warningCount=0,this.declaredCount=0,this.usedCount=0};o.prototype.log=function(t,o){this.lines.push(new e("log",t,o))},o.p

honsa

module.exports = function(grunt) { // The general grunt function that is run

    //local folders
    const srcSassFolder = 'sass';
    const srcJsFolder = 'js';

    const publicCssFolder = 'public/css';
    const publicJsFolder = 'public/js';

    grunt.initConfig({ // Here we setup our config object with package.json and all the tasks

honsa

/*
 https://gist.github.com/honsa/98c25b18b773e2944e32a2f3fdc9a9d7
*/

@mixin font-big($additionalValue: 0%, $op: '+') {

  @if($op == '+'){
    font-size: calc(60px + #{$additionalValue});
  } @else {
    font-size: calc(60px - #{$additionalValue});

honsa

plugins:
- cleanupIDs: true
- removeStyleElement: true
- removeUselessStrokeAndFill: true
- removeEmptyText: true
- removeEmptyContainers: true
- removeScriptElement: true
- removeUnusedNS: true
- removeEmptyAttrs: true