Frontends with Curves and Lines
when HTML is not enough
and some more svg drawing here
React Site with Scroll Effects and an interactive data-visualization
made the frontend for this site some time ago
SVG Roadmap (2018)
just to keep an archive of all the stuff I made. this is a work from 2018.
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
Animated Logos and an iceberg
well the code is old (jQuery, GSAP) and a bit bloated, but its still working
Responsive Web Design Performance CMS Responsive art-directed Images Progressive Enhancement Conditional Loading Content Strategy Polyfills Ergonomics
