rikschennink

zwarte pieten, zwarte piet, democracy, @realDonaldTrump, referendum, Vote Leave, women in tech, lgbt+, lgbt, she-ra, #remain, NHS, russians, russian, politics, milo, kardashian, sarah sanders, capitalist, Socialist, socialism, capitalism, linkedin, politician, Russia, Musk's, Mansplainers, Mansplains, Mansplain, Mansplainer, government, musk, Cambridge Analytica, handmaids, soccer, football, mansplaining, west world, dolores, westworld, conservatives, Nigel Farage, men, harassment, health care, Tory, flat earth, feminist, feminism, religious, religion, republican, republicans, white house, comey, climate change, trans, pizzagate, ar-15, Putin, NRA, trans people, Cis people, vagina, blackmirror, Black Mirror, healthcare, tories, tax bill, white supremacy, male colleague, white men, PoC, white walker, #GameOfThrones, game of thrones, ukip, nazism, fascism, fascis, fascist, racial, Nazis, Trump's, bitcoin, Brexiters, diversity, brexit, confederate, antifa, nazi, sexism, supremist, racist, racism, sexist, Trump

rikschennink

const easeInOutSine = t => -0.5 * (Math.cos(Math.PI * t) - 1);

export const addGradientSteps = ( 
        // the gradient to add the steps to
        gradient, 
        
        // the color of the gradient (in rgb) and target alpha value
        color = [0, 0, 0], alpha = 1, 
        
        // the ease function to use and the amount of steps to render (higher is more precision)

rikschennink

<div data-module="/ui/component.js" 
     data-context="@media (min-width:30em) and was @visible">

</div>

rikschennink

• src
  • main.js
  • ui
    • foo.js
    • bar.js

This command generates modules where identifiers have been set to absolute module paths:

browserify ./src/**/*.js -o ./dist/bundle.js --full-paths

rikschennink

const arrow = (str, i) => str[i] === '-' && str[i+1] === '>';

const string = (c) => c === "'" || c === '"';

const comma = (c) => c === ',';

const opener = (c) => c === '(';

const closer = (c) => c === ')';

rikschennink

Assumption: Next button is most clicked button in a pagination control.

The trap is to layout the HTML to match the design of the control. With the next button last and the previous button first.

By reformatting the HTML we can make things easier for everyone:

• Visual users still see the classic paging (CSS takes care of that);
• Tab focus for keyboard users is immidiately brought to next button, no need to tab over all pages;
• Screenreader users have the same benefit and also hear which page is currently active;

Any suggestions on what more we could improve?

rikschennink

Sass OO Mixins: OOCSS without the HTML clutter

• Less HTML clutter (caused by all those fragmented class names).

<button class="btn btn-primary btn-large btn-outline">Buy!</button>

• Descriptive classes (or no classes at all) in the HTML results in cleaner and easier to read HTML.

Buy!

rikschennink

var animate = (function(){

    'use strict';
    
    var PI = Math.PI;
    var PI_HALF = Math.PI/2;

    var deltas = {
        linear:function(p) {return p;},
        easeInSine:function(p) {return Math.cos(p * PI_HALF);},

rikschennink

// Default button style
StyleCollection.addStyle("btn-default", paint: {(view) -> Void in
    
    // These buttons should all have rounded corners and a dropshadow
    view.layer.cornerRadius = view.frame.height * 0.5
    view.layer.backgroundColor = UIColor(hex:0x294A5F).CGColor
    
    view.layer.shadowColor = UIColor.blackColor().CGColor
    view.layer.shadowOffset = CGSizeMake(0, 2)
    view.layer.shadowRadius = 2

rikschennink

import UIKit

extension UIView {
    
    func hide() {
        hidden = true
    }
    
    func show() {
        hidden = false