RichardBray

#Stratabot Commands

##Airfield Searches

stratabot airfield search - search for airfields by icao/iata, name or city

stratabot fly from to <leaving|arriving> <today|tomorrow|on YYYYMMDD> at <local|zulu>

where is <icao/iata> - get information and a map about an airfield

RichardBray

A Beginner's Guide to Ngrx/store

As someone who is fairly new to the world of Redux and to a certain extent Angular (not AngularJS), the thought of having to implement Redux to our app was very daunting. Not because it wasn't the right thing to do, our initial app was built quite quickly without much knowledge of Angular and in doing so it wasn't very testable, so Redux would help with that situation, the main difficulty was the learning curve.

Reducers; actions, states, the store, this vernacular was familiar to someone who had experience with Redux but not me, and the whole process is quite verbose, I mean–why would you split your code which was originally in one file, the component into multiple, the reducer, action and state? There are however, a lot of companies who use and find a lot of benefits form it, so I decided to do a deep dive into how and why it works and documented my find

RichardBray

const path = require('path');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');

var extractPlugin = new ExtractTextPlugin({
  filename: 'main.css'
});

module.exports = {

RichardBray

var gulp = require('gulp'),
  gutil = require('gulp-util'),
  sass = require('gulp-ruby-sass'),
  minifyCSS = require('gulp-minify-css'),
  concat = require('gulp-concat'),
  webserver = require('gulp-webserver'),
  uglify = require('gulp-uglify'),
  rename = require('gulp-rename'),
  minifyHTML = require('gulp-minify-html'),
  imagemin = require('gulp-imagemin'),

RichardBray

Moving from Gulp to webpack

I've been avoiding learning Webpack for a while now as I never thought I needed to learn another build tool, Gulp does everything I'd ever need from a build tool now or in the future. However, ever since we've moved from AngularJS to Angular (or Angular 2+) as well as introducing standards such as; TypeScript instead of Javascript and a Jasmine/Karma combo for UI testing, but also Webpack as an initial build tool. I've avoided it for long enough and now, in September 2017, I thought it's time to finally move on from my old friend Gulp.

Good Old Gulpfile

If you've never heard of Gulp before, this isn't the post to learn, there are plenty of good tutorials out there a Google search away. Then again, you don't really need to know Gulp to understand what's going on so feel free to continue reading nevertheless.

[Here's wh

RichardBray

Why should you write tests?

Coming to web development from a design background I understand the need to test the part of the site or web app that the user interacts with which involves testing things like; browser compatibility, usability, regression, and accessibility. However, I wasn't really well diverse in the realm of automated code testing. Terms like 'unit testing', 'integration testing' and '100% test coverage' flew over my head. I didn't see the need to essentially write two times the code to do a test that you could do manually.

As my role (and what is required from a front end dev) has evolved, I've had to delve more into the Javascript side of things and I've seen the benefits of writing tests. There are multiple types of tests one could write and knowing the benefits and disadvantages of them are importan

RichardBray

module.exports = {
  entry: "",
  output: {},
  module: {},
  plugins: []
}

RichardBray

const path = require("path");

module.exports = {
  entry: "./src/index.tsx",
  output: {
    path: path.resolve(__dirname, "build"),
    filename: "bundle.js"
  },
  module: {},
  plugins: []

RichardBray

import * as React from "react";
import * as ReactDOM from "react-dom";

const ROOT = document.querySelector(".container");

ReactDOM.render(<h1>Hello</h1>, ROOT);

RichardBray

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>React Typescript</title>
  </head>
  <body>
    <div class="container"></div>
    <script src="/bundle.js"></script>
  </body>