“Modern Redux” Learning the new features

Introduction

I have no strong opinions when it comes to; redux / flux / state management patterns in general. However I like to see whats out there, and have found redux quite useful with data heavy apps in the past. I personally find a repo easier/quicker to pick up when a common state management pattern has been used, and I like the fact the state is immutable, and time travel provides a nice dev experience.

Recently I was quite surprised to discover how much redux had moved on, I herd/read the term “Modern Redux” bounded…


History of courses watched

Last updated: 12 July 2021

{
"data": [
{
"course": "GraphQL: The Big Picture",
"lastViewed": "8 Jul 2021",
"viewTime": "19 minutes",
"duration": "1 hour, 18 minutes",
"percentComplete": 24
},
{
"course": "Getting Started with Puppet",
"lastViewed": "11 Jun 2021",
"viewTime": "3 hours, 8 minutes",
"duration": "3 hours, 8 minutes"…

Course notes from Dan Wahlin’s excellent pluralsight course titled: Kubernetes from Developers: Core Concepts

Introduction

A way to manage containers.
Alternative to docker-swarm.
Locally, using docker compose is fine, but not ideal for production. For production we can scale, self-heal, update containers better, better networking capabilities, etc…
Works by having one master node which manages a number of other nodes.

Running locally

Run via docker desktop. Turn on kubernetes in dashboard. In terminal run commands to master node via the kubectl command.

Web UI dashboard

UI view of kubernetes clusters.

Run locally

https://kubernetes.io/docs/tasks/access-application-cluster/web-ui-dashboard/

kubectl apply -f https://raw.githubusercontent.com/kubernetes/dashboard/v2.2.0/aio/deploy/recommended.yamlkubectl describe secret -n kube-system
# copy first token which is of…

An in depth example of partially applying functions, composing map and inverting function arguments.

Introduction

Please see Partial Application and map post for an introduction. It’s relatively easy to get started with these core concepts. But the real power comes when composing them together. This post uses ramda and explores some of the ways functions can be extracted.

Scenario

I have a function, which I want to apply to each property in an array, nested within an object. …


Setup of the csurf ExpressJs middleware in a React application

Introduction

I was recently tasked with adding an extra layer of security to prevent cross site request forgery attacks to an application. This would involve setting up the expressJs csurf middleware to protect POST routes made from the client.

What is a CSRF attack

To summarise, an attacker could create an AJAX button or form on their own site, and trick the user into submitting it, that creates a request against your own API.

More information can be found within the Cross site request forgery (CSRF) section of this blog post and pillarjs Understanding CSRF readme.

How to prevent this type of attack using a CSRF token

Overview


Installing a free letsencrypt certificate using certbot, to nginx running in a docker container, authenticating using webroot

Introduction

I recently migrated a site over to use docker containers on digital ocean. This included a section where an SSL certificate was applied to the site. During the installation process of the certificate you need to verify that you own the domain. At the time I used DNS and added a new TXT DNS record. In my opinion this is the simplest and quickest way to get up and running. The problem arrises when the certificate expires, (every 3 months), and you have to renew. This involves updating your TXT DNS record before hand which would be a manual process…


Documenting known web security issues, and ways to counteract them. Notes from Mike North’s frontend masters course on web security.

Cross site scripting (XSS)

Injecting code into an app, say through an input field, which will affect the behaviour of say another page in an adverse way.

Different types of XSS

  • Stored XSS — Code that gets stored against a record in the database.
  • Reflected XSS — Code that gets executed on the page, (say when a field validates and accepts user input in the validation response).
  • DOM Based XSS — No server, e.g. code accepted through query string params.
  • Blind XSS — Code that gets executed on…


Introduction

I recently worked on re-writing an old website over the Christmas period. Once MVP had been achieved I released that I needed a new web provider, capable of hosting my node JS app. Having previously deployed small personal applications to Heroku and Azure, I decided to give Google App Engine a try. After reviewing the cost of hosting over a period of weeks I decided I needed to look for an alternative, cheaper solution. I eventually settled on DigitalOceans Docker Droplet.

Google App Engine

As with everything Google, this is an amazing platform, with a great “getting started” tutorial. …


Introduction to virtual reality and the web

Ada Rose Cannon, Samsung

Examples of VR using google cardboard:

  • fast-sync.glitch.me
  • ada-a-frame.glitch.me

Libraries used of VR

  • WebGl — low level, quite complex to program in
  • three.js — mid level, JS lib which uses web.gl
  • aframe.io — high level, easy to get started with, uses HTML, (live demo)

Empowering Web Applications with Speech Recognition

Mihai Cîrlănaru

Originally developed for mozilla os (mobile), speech recognition in the browser in JS.

Demo showing how you can say numbers and it add them together, (possibly used to input data into text inputs).

Google speech API, (seems to be market leader), available in 32 languages:

Practical browser automation for fun and profit

Forbes Lindesay, Changepage

Testing triangle: unit, integration, e2e

Similar setup to current projects:


Intro

I recently decided to watch a FrontEnd Masters course by Shirley Wu on data visualisations with the d3 library version 4. This blogpost documents my key takeaways from this course.

Editor ‘Block Builder’ blockbuilder.org

Selection

Select the three rect svg elements and assign the data to create a bar graph.

<svg>
<rect />
<rect />
<rect />
</svg>
const data = [10,20,30];
const rectWidth = 100;
const height = 40;
d3.selectAll(‘rect’) //select the three elements
.data(data) //map the data values to each of the rects
.attr(‘x’, (d, i) => i * rectWidth) //set the X coordinate to the index plus the…

dbillinghamuk

Software dev — Javascript, node, express, mongo, react, redux, rxjs, es6, ramda

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store