botmaster

// State object
const state = {
    variable1: 0,
    variable2: 'value2',
    variable3: 'value3',

    _internalTimeout: null,

    isLoading: false,
    hasError: false,

botmaster

SASS/SCSS/CSS Spacing Utility Classes

Following @ilicmarko's comment, here's my spacing.scss file…

(see spacing.scss)

…which generates the following spacing utility classes…

(see spacing.css)

botmaster

const inBrowser = typeof window !== 'undefined'

// get user agent
const UA = inBrowser && window.navigator.userAgent.toLowerCase()

// detect browser
const isIE = UA && /msie|trident/.test(UA)
const isIE9 = UA && UA.indexOf('msie 9.0') > 0
const isEdge = UA && UA.indexOf('edge/') > 0
const isChrome = UA && /chrome\/\d+/.test(UA) && !isEdge

botmaster

// ----
// Sass (v3.4.21)
// Compass (v1.0.3)
// ----

// Sass modifiers mixin by Sarah Dayan
// Generate All Your Utility Classes with Sass Maps: frontstuff.io/generate-all-your-utility-classes-with-sass-maps
// http://frontstuff.io
// https://github.com/sarahdayan

botmaster

// ----
// libsass (v3.3.2)
// ----

$spacer: 1rem;
$spacer-x: $spacer;
$spacer-y: $spacer;

$spacers: ();

botmaster

<?xml version="1.0"?>
<!DOCTYPE fontconfig SYSTEM "fonts.dtd">
<!--
You need Noto Color Emoji installed in your machine. 
Save this file in ~/.config/fontconfig/conf.d/ or /etc/fonts/conf.d/ (system-wide)
-->
<fontconfig>

  <match target="scan">
    <test name="family">

botmaster

// clearfix
@mixin clearfix {
	&::after {
        content: "";
        display: block;
        clear: both;
    }
}

// edit font rendering -> tip: use for light text on dark backgrounds

botmaster

⇐ back to the gist-blog at jrw.fi

Advanced SCSS

Or, 16 cool things you may not have known your stylesheets could do. I'd rather have kept it to a nice round number like 10, but they just kept coming. Sorry.

I've been using SCSS/SASS for most of my styling work since 2009, and I'm a huge fan of Compass (by the great @chriseppstein). It really helped many of us through the darkest cross-browser crap. Even though browsers are increasingly playing nice with CSS, another problem has become very topical: managing the complexity in stylesheets as our in-browser apps get larger and larger. SCSS is an indispensable tool for dealing with this.

This isn't an introduction to the language by a long shot; many things probably won't make sense unless you have some SCSS under your belt already. That said, if you're not yet comfy with the basics, check out the aweso

botmaster

function loadImage(url, callback) {
  var image = new Image();
  image.onload = function() {
    callback(null, image);
  };
  image.onerror = function() {
    callback(new Error('Could not load image at ' + url));
  };
  image.src = url;
}

botmaster

Cordova Plugin Development Guide (iOS and Android)

Version: 0.0.1 updated 7/1/2016

Cordova Plugins are the magic that enable our mobile web app content to access the full power of Native SDKs underneath, but through clean JavaScript APIs that work the same across all platforms we target.

Building Cordova plugins is scary for many Cordova and Ionic developers, but it doesn't have to be. This simple guide walks through the what, when, why, and how of Cordova plugin development for iOS and Android.

Introduction