subblue

Women Who Code Meetup 26 June 2018

Links from the talks at the KPV LAB Edinburgh office

Building Static Websites with Next.js & CSS Grid

Demo site see the contact page for links.

An Intro to React Native

Slides

The Wonders of WebGL

subblue

in vec2 v_texcoord; // texture coords
in vec3 v_normal;   // normal
in vec3 v_binormal; // binormal (for TBN basis calc)
in vec3 v_pos;      // pixel view space position

out vec4 color;

layout(std140) uniform Transforms
{
    mat4x4 world_matrix;  // object's world position

subblue

Development Resources

This is intended to be a growing library of useful links for documentation and articles specific to the different technologies and libraries we use for our projects.

To keep ahead of the curve it is a good idea to use the Google Chrome dev channel version of the browser where many of the ES6 features can be used within the dev console without transpiling via Babel.
Chrome Canary build can also be used, but it tends to break things rather too often!

Javascript ES6

Learn ES2015 - Babel's detailed overview which was developed from the ES6 features guide.
Essential JS links - the list to end all lists! Curated by Eric Elliot who also has many very g

subblue

{
  "root": true,
  "parser": "babel-eslint",
  "plugins": ["react"],
  "extends": ["eslint:recommended", "plugin:react/recommended"],
  "env": {
    "browser": true,
    "node": true,
    "es6": true,
    "jasmine": true,

subblue

'use strict';
/* eslint "react/prop-types": 0 */
// import Immutable from 'immutable';
import React, { PropTypes, Component } from 'react';
import { Editor, EditorState, ContentState, RichUtils, convertFromHTML, convertFromRaw } from 'draft-js';
import { stateToHTML } from 'draft-js-export-html';


// based on this example:
// https://github.com/facebook/draft-js/tree/master/examples/rich

subblue

{
  "name": "test-app",
  "version": "0.0.1",
  "description": "Test App",
  "main": "index.js",
  "scripts": {
    "start": "clear && NODE_ENV=development webpack-dev-server --config webpack-dev.js --devtool cheap-module-source-map --inline --hot",
    "test": "clear && watch 'npm run --silent mocha' ./src -d -u",
    "mocha": "clear && mocha --opts mocha.opts ./src/**/*-test.js",
  },

subblue

'use strict';
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const npmPackage = require('./package.json');
const host = '0.0.0.0';
const port = 3000;

const config = {
  entry: [
    'babel-polyfill',

subblue

perf = window.performance || Date

class Resizer
  
  
  constructor: (srcImg, @options = {}) ->
    if typeof srcImg == 'string'
      @loadImage(srcImg)
    
    if srcImg.toString().indexOf('Blob') > -1

subblue

# node modules
fs           = require 'fs'
path         = require 'path'
url          = require 'url'
browserSync  = require 'browser-sync'
browserify   = require 'browserify'
watchify     = require 'watchify'
source       = require 'vinyl-source-stream'
del          = require 'del'

subblue

((window.devicePixelRatio || 1) * Math.max(window.outerWidth / window.innerWidth, 1)).toFixed(3) * 1