Keith D Commiskey KDCinfo

Migration to Front-End Engineer 2017-2018

Order of tech: From most recent, to when I began. 67 resources provided at bottom.

The following is a light extract of some resources I used whilst migrating from a Front-End Developer to a Front-End Engineer (aspiring Full-Stack) throughout 2017 and 2018.

Background: Most Front-End Developer positions now require Design experience. And because I have little aptitude for Design, I found the Engineering path goes through deeper JavaScript, frameworks, libraries, and a vast span of technologies and paradigms (the fun truly never ends).

PWA

Pros and Cons of Visual Studio Code vs. Sublime Text 3

VS Code vs. ST3 - Overview

VS Code: A lightweight IDE

Visual Studio Code (VS Code/VSCode)

Sublime Text: A customizable code editor

Code for: CSS Grid Changes EVERYTHING

Coding Tech - Published on Jul 16, 2017

* Grid container display: grid;

Grid item 1st level child
Grid line

Code for: CSS Grid Layout - Rachel Andrew | February 2017

Frontend NE - Published on Feb 16, 2017

.cards {
	display: grid;
	grid-gap: 20px;
	grid-template-columns: repeat(3,1fr);

MobX Uber-Simplified (mostly stripped) Boilerplate

Based on: YouTube: Easy MobX and Redux Comparison (Mar 2018)

MobX: Basic Flow

Action: Functions 
	--> (updates)
		--> Observable Properties: State
			|--> (updates / to render current dom)

Simon 20 (React + TypeScript / Responsive)

Demos and Source Code

CodePen
Gists

Simon 20 (React / Responsive)

Demos and Source Code

CodePen
Gists

Simon 20 (JavaScript / Responsive)

Demos and Source Code

CodePen
Gists

	// Codewars Kata [4 kyu] Vending Machine (JavaScript)

	// My 3-day (albeit 32-hour) Solution
	// Development history details at bottom.
	// I may be a bit slower than some, but I'm persistent :), and I pick up on many underlying nuances.

	// I got my (final) base model for the 'combination algorithm' from:
	// Code Review Stack Exchange: Answer: https://codereview.stackexchange.com/a/7042
	// https://codereview.stackexchange.com/questions/7001/generating-all-combinations-of-an-array

	const response = await fetch(`https://catappapi.herokuapp.com/users/${userId}`)
	const data = await response.json()
	return data.imageUrl
	}