larslo's frontend techniques roadmap

many methods but only a few principles

Doing frontend development since 2006, I got in contact with many different tools and concepts. But since a couple of years the number of frameworks and tools exploded.
Its not easy at all to keep up to date with all frontend-tools.
In 2020 I am focusing: on preact and the technologies around it.

As to methods there may be a million and then some, but principles are few. The man who grasps principles can successfully select his own methods. The man who tries methods, ignoring principles, is sure to have trouble

Harrington Emerson

Roadmap

The following roadmap shows my view on the topics and outlines the preferred technologies. With the following buttons you can set high-lightning

Its a wild mixture of methods, technologies, product-names and buzz-words. Work-in-Progress

1 2 3 4 5 6 no single trail through frontend jungle! Legends Personally prefered Good to know Possibilities HTML Semantic HTML Conventions and Best Practices Basic SEO Accessibility CSS Layouts (Float, Positioning, Display, Box Model, Grid, Flex Box) Responsive Webdesign, Media Queries CSS Frameworks (Zurb Foundation, Bootstrap) CSS Architekture / Methodology : BEM JavaScript Syntax and basic operations DOM manipulation, Jquery Hoisting, Event, Prototyping, Scope, Shadow DOM, strict Fetch, AJAX (XHR) Modular JS, ES6+ async, promises, generators chaining, currying, arrow functions, closures, pure, side-effects, iife Internet / Browsers HTTP(S): Headers, Request, Response, preflight Browsers, DOM, Browser DevTools Security: CORS, CSP, OWASP Security Risks, XSS Browser-Differences, caniuse, meta-tags Web Performance (browser caching, preloading, lazy-loading, image srcset, etc) General Development Skills GIT – Version Control (GitHub) HTTP/HTTPS protocol Know your text-editor / IDE Terminal usage Data Structures and Algorithms Design patterns Build Tools Package Managers npm Yarn Bundler Webpack Rollup Task Runners gulp npm scripts Styling Sass/SCSS PostCSS Browserlist CSS in JS: CCS-Modules JS Frameworks React Build/Bundle with react-create-app custom webpack config for Single Page Applications only State Management Redux Compoent State / Hooks Preact use react ecosystem Web Components Micro-Frontends HTML Templates Custom Elements Shadow DOM Progressive Web Apps PWA Storage Web Sockets Service Workers Manifests other browser APIs lighthouse 100% waiting for Apple Websites Routing Hydrating, Server-Side-Rendering (SSR) Universal Rendering Performance Optimization Conditional Loading Polyfills, conditional loading, precaching Static Site Generation Extend HTML Canvas Web Components Micro-Frontends SVG lazy design space Animation simple visualizations filters, clipping D3s Unity Web Assembly Testing if algorithms get more complex, put them in a pure function and unit test them in (p)react write functional components, better to test jest, react-testing-library, enzyme test your api calls, expect them to fail use a Cross Browser Testing service, e.g. saucelabs test state with redux dev tools selenium, puppeteer Keep Learning 🙂

1 Basic Frontend

coming soon. (note: provide some curated lists)
maybe this https://eloquentjavascript.net/
Internet Explorer is no longer the enemy (death), but Apple’s old safaris are starting to make some trouble.

Responsive Web Design Performance CMS Responsive art-directed Images ProgressiveEnhancement Conditional Loading ContentStrategy Polyfills Ergonomics

to overview

2 General Development

Well there is too much to say.
Maybe a word on IDE’s: I use sublime text.
Maybe this polemic peace.

to overview

3 Build-Tools

Build-Tools are made for productivity or maybe also developer experience. If you once tried to configure your own build-pipeline with all packages, loaders, modules, concepts etc… you know that this can be a very daunting task if you don’t have your own DevOps-Engineer….(link)
Interesting article about tree-shaking, code-splitting, lazy/conditional-loading, maybe this.
And about CSS in JS, maybe this

to overview

4 JS-Frameworks, React, Preact

more on this here.
too much letters to explain all these.
Like the concept of micro-frontends, and webcomponents
Apple’s backward oriented native App centered policy is blocking the bright future of PWA.

to overview

5 Extended xHTML

too much letters to explain all these.
I’m a big fan of SVG.

to overview

6 Testing

so many good article everywhere about this.
having automated browsers (selenium), can not only be used for testing, but also many other tasks, e.g gdpr-monitoring.