IcodeNet

import axios from 'axios'

let mockingEnabled = false

const mocks = {}

export function addMock(url, data) {
  mocks[url] = data
}

IcodeNet

import React from 'react'
import { BrowserRouter as Router, Switch } from 'react-router-dom'
import routes from './routes'
import FancyRoute from './components/tools/FancyRoute'

const App = props =>
  <Router>
    <Switch>
      {routes.map((route, i) =>
        <FancyRoute key={i} {...route} />

IcodeNet

⇐ 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

IcodeNet

⇐ 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

IcodeNet

Folder Structure

Motivations

• Clear feature ownership
• Module usage predictibility (refactoring, maintainence, you know what's shared, what's not, prevents accidental regressions, avoids huge directories of not-actually-reusable modules, etc)

IcodeNet

##Sass Functions Cheat Sheet

1. RGB Functions
2. HSL Functions
3. Opacity Functions
4. Other Color Functions
5. List Functions
6. Map Functions
7. Selector Functions
8. String Functions

IcodeNet

let gaScriptStripped = false;

Cypress.on('window:before:load', function(win) {
    let createElement = win.document.createElement;

    win.document.createElement = function(tag) {
        if (tag === 'script' && win.document.currentScript.innerHTML.includes('google-analytics.com')) {
            tag = 'custom_script';

            gaScriptStripped = true;

IcodeNet

End-to-end Testing with Shadow DOM

As the web component specs continue to be developed, there has been little information on how to test them. In particular the /deep/ combinator has been deprecated in Shadow DOM 1.0. This is particularly painful since most end-to-end testing frameworks rely on elements being discoverable by XPath or calls to querySelector. Elements in Shadow DOM are selectable by neither.

WebDriver.io

Webdriver.io has the standard actions by selectors, but also allows browser executable scripts to return an element

IcodeNet

// https://gist.github.com/mhevery/4b1bdb59a8c16f9cbe76


/// <reference path="probe.d.ts" />

///////////////////////
/// WORK IN PROGRESS //
///////////////////////

var appRef: ApplicationRef = ng.platform.applications[0];

IcodeNet

/**
 * Zone is a mechanism for intercepting and keeping track of asynchronous work.
 *
 * A Zone is a global object which is configured with rules about how to intercept and keep track
 * of the asynchronous callbacks. Zone has these responsibilities:
 *
 * 1. Intercept asynchronous task scheduling
 * 2. Wrap callbacks for error-handling and zone tracking across async operations.
 * 3. Provide a way to attach data to zones
 * 4. Provide a context specific last frame error handling