Making web apps are pretty complicated
State of the Art - Web Development is constantly changing, what’s the current State of the Art?
New Browser Features - modules, async/await, generators, decorators, promises, etc.
Legacy Suport - polyfills, shims, vendor prefixes for older browsers that don’t support current JavaScript standards.
Backend Programming - JavaScript isn’t the only language that can server HTTP requests, C/C++, Rust, OCaml, Scala, and many more can too.
Automation - streaming tasks like compiling our apps and compressing our images and making icon fonts.
Dev Ops - Using tools like Docker to deploy to cloud providers like AWS, DigitalOcean, etc. Load balancing your app, working with micro-services and a polyglot architecture.
Testing - Speeding up new updates to the site through automated testing, linting, type checking, etc.
how to learn web technologies
Willing to change, to learn new things. Keep up with the latest trends, updates, etc. Though this can eventually lead to Tooling Fatigue.
Be a good communicator and collaborator, so try contributing to open source projects!
Talk with recruiters and apply like crazy! Facebook, Twitter, Tumblr, Nvidia, you name the company, they’re hiring! Even if just for an internship, a few 10Ks doesn’t hurt. 😉
Enjoy it. You’ll never get anywhere if you don’t like what you’re doing.
Javascript
TypeScript - The latest JavaScript + Types
CoffeeScript - Tiny JavaScript
NativeScript - JavaScript + Native Objects
PureScript - JavaScript + Functional Programming
Frameworks
React - Facebook’s simple rendering library. Used by Instagram, Wordpress, Capital One, DeviantArt and way more.
Vue - A very Tiny view library developed as a side project from Evan You, a Meteor Dev.
Angular - Angular has gone through a rewrite, adopting new standards like @decorator, class, ES6 modules, etc.
Ember - One of the first MVC frameworks for front end development. In use in places like Groupon or for the Ghost CMS.
CSS
PostCSS - Converts CSS to an abstract syntax tree that can be modified very quickly, Benchmarks put PostCSS as even faster than LibSass, the C++ Sass implementation.
CSSNext - A PostCSS plugin that adds CSS4 features.
BEM - A design methodology as an acronym, Block, Element, Modifier.
File Structure
Sorted By File Type - Game Maker Studio
Sorted by Component - Wordpress Calypso
Sorted by Task - Angular 2.0 Beta Structure
Generators & Boilerplates
Yeoman - Scaffold out your application with some yeoman generators, making say, angular directives from one command vs googling an implementation and forking that.
SlushJS - Another Scaffolding tool based on GulpJS.
Routes
Deployment | The Web Obesity Crisis
System Design
These questions are typically vague and open-ended, such as “Design Twitter” or “How would you build a shopping checkout service?” Below are some topics to consider:
- Rendering: client-side, server-side, and universal rendering
- Layout: when designing a system used by multiple development teams, you think about building components and whether you require teams to follow a markup to use those components.
- State Management such as unidirectional data flow or two-way data binding
- Async flow: the components you build may need to communicate with the server in real-time and the design you propose should consider XHR vs bidirectional calls. If you’re asked to support modern browsers, you could use websockets or server-sent events; if asked to support older browsers, you’ll need to choose between IFrames, JSONP, etc for your design.
- Separation of concerns
- Multi-device support: Will your design use separate implementations or the same implementation across web, mobile, and hybrid applications?
- Asset delivery: Your design should consider how assets are built with dependencies, tested, and deployed.
reference:
