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).
My current (2018) training begins with PWAs (various sources), and some core fundamental refresher courses (offered by Google via Udacity).
Vue
started me off learning someES6
and Babel (and Axios) in Jan-Mar 2017.- Then React and Redux taught me a lot more JavaScript from Apr-Jul.
- So then did TypeScript in Aug.
They all helped compound knowledge, which I married with all of the following:
Object Literals (one-offs), Functional Objects (prototypes / prototypal inheritance), Object Concatenation, Scope, and all the various ES6 (and ES7) features like Maps, array and object traversing methods, and also learning that for
loops are still valuable (despite sayings to the contrary).
Lots of relevant links provided at bottom of file.
Taken after Vue and React, I set out for a solid foundational understanding of programming: Something I'd only ever caught the gist of being self-taught.
I'm currently going through (July/Aug 2018).
Certification: "This certifies that Keith D Commiskey has successfully completed freeCodeCamp's Front End Development Certification, representing approximately 400 hours of coursework.
This has since been split into 3 certifications, all of which I aim to complete by Aug/Sep 2018.
I got up to 640 Hackos. Site was good and functional, but I don't really do .
I'm at 522; but don't do it much anymore.
I really enjoyed CodeWars, but can't do Level 4 Katas (Level 1 Kata is highest: I got lucky and completed one level 4; but I stick to Level 5+ now).
...from the FrontEndDevelopers.org Slack group throughtout 2017 (I'd sometimes spend 6-8 hours catching up on all the threads, and they were all quite active). Not everything was perfect, but gave me tons of topics to research and crisscross multiple references.
I initially memorized how to use
XMLHttpRequest
, then learned on the FED Slack thatfetch
was the up-and-comer, so I memorizedfetch
as well (and haven't usedXMLHttpRequest
since).
I researched every little thing I didn't understand (and even a lot I did) on just about every topic on the...
I actually learned a lot of React from their documentation (as well as Redux, and React-Router, but they both needed additional (random) resources for getting them to work correctly (and even then, my router endpoints didn't share state - I don't know routing well).
I also went through about 3 to 5 YouTube series courses (~5-20 videos each; but they're all dated now; they were on 15.3; current is 16.4)
- //www.typescriptlang.org/docs/handbook/typescript-in-5-minutes.html
- //www.typescriptlang.org/docs/handbook/migrating-from-javascript.html
- //www.typescriptlang.org/docs/handbook/react-&-webpack.html
--> Laracasts
--> Some are free; most require subscription: $15/mo (as of 2018-07-26)
The Vue and Laravel series I took were well worth it!
Learned: 2.0
Having not gone back through Vue since Jan-Mar 2017, the latest Vue and Web Components are on my schedule for later this year (I really need to redo my "Guess Right" game at some point.)
//laracasts.com/series/learn-vue-2-step-by-step
Learned: 5.2
I completed my Laravel learning in Dec 2016. I only learned Laravel throughout 2016 (while employed; but during my own time) to get an understanding of how MVC works. I worked with migrations, controllers, made my own models, and worked a lot with Blade. Although fun, I'm still a ways from being a Back-End Dev with any stack.
- Laravel 5.4 From Scratch - Series: 32 Episodes
- What's New in Laravel 5.5 - Series: 20 Episodes
- What's New in Laravel 5.6 - Series: 8 Episodes
Learned: 1.something
I learned Angular in late 2015 from Dan Wahlin on Udemy, but it's way outdated now.
- javascript - top.location.href doesn't work in IE 8 - Stack Overflow
- Trying Out LAB.js For Asynchronous JavaScript (Script) Loading
- JavaScript Cookies
- jsaes: AES in JavaScript
- JavaScript Closure-Class Pattern | Amplifi Bridge
- JMerge - JavaScript File Merger
- JavaScript Loaders | Nettuts
- Combining multiple external .js files into one?
- JavaScript Loaders: Essential JavaScript: the top five script loaders | Feature | .net magazine
- Javascript ES6: Learn important features in a few minutes
- Getting started with ECMAScript 6
- Real JavaScript Ajax - Laravel User Authentication with Ajax Validation
- JavaScript 30 - Dashboard | 30-Day Vanilla JS Challenge
- Rotating Clip-Path - A Pen by Callum Macrae
- Rotating Text Clip - A Code Pen by Dustin Dowell
- scrabblemojier
- ES6 - 18. New Array features
- Date References - JavaScript
- Design Patterns in Javascript v.ES6
- JavaScript Design Patterns - doFactory.com
- airbnb/javascript: JavaScript Style Guide
- JavaScript Scope – Lexical Scoping, Closures, & Controlling Context
- Closures - JavaScript | MDN
- Understand promises before you start using async/await
- Scheduling: setTimeout and setInterval
- Tips for using async functions (ES2017)
- Understand JavaScript’s “this” With Clarity, and Master It | JavaScript is Sexy
- KeyboardEvent.key - Web APIs | MDN
- Simplifying Asynchronous Coding with Async Functions — SitePoint
- Async-Await Explained in 10 Minutes | Tutorialzine
- Regex tester and debugger
- Coding Forums - JavaScript
- Bubbling and capturing: Events
- 10. Destructuring
- Master the JavaScript Interview: What’s the Difference Between Class & Prototypal Inheritance?
- Object Composition in Javascript – Code Monkey – Medium
- 4 JavaScript Design Patterns You Should Know ― Scotch
- Comprehensive Guide to JavaScript Design Patterns | Toptal
- Learning JavaScript Design Patterns
- Composing Software: An Introduction – JavaScript Scene – Medium
- Why Composition is Harder with Classes – JavaScript Scene – Medium
- A Functional Programmer’s Introduction to JavaScript (Composing Software) – JavaScript Scene – Medium
- Master the JavaScript Interview: What is a Closure?
- Master the JavaScript Interview: What is a Pure Function?
- Master the JavaScript Interview: What is a Promise?
- 7 Surprising Things I Learned Writing a Fibonacci Generator in JavaScript
- The Hidden Power of ES6 Generators: Observable Async Flow Control
- Román Cortés » How I did the 1kb Christmas Tree
- DOM Tree
- Microdata - schema.org
- Rich snippets - Breadcrumbs - Webmaster Tools Help
- HTML5 Reference
- Using Google Web Fonts | Design Shack
- Creating a Mobile-First Responsive Web Design - HTML5 Rocks
- Codrops - Freaking Awesome
- 3D Flip Cards // CSS3 Playground
- Hands On: 3D Transforms
- Intel Dev Zone - Develop Apps for Mobile
- An Advanced Guide to HTML & CSS
- html5 - HTML 5 Browser Compatibility Chart - HTML 5 in Old Browsers? - Stack Overflow
- CSS3 3D Transforms
- HTML5 in IE and Firefox 2 | HTML5 Doctor
- Voxel Rain - Visual Random
- The HTML5 logo - K3D demo in HTML5 Canvas and JavaScript (no Flash!)
- Andrew Hoyer
- XHTML Alternative to HTML5 Data Attributes - CodeProject®
- Snow Fall: The Avalanche at Tunnel Creek - Multimedia Feature - NYTimes.com