# WebDeveloper.FYI [[About]] --- ## Species What kind of web developer are you (today)? ```javascript ['front', 'back', 'full'][Math.floor(Math.random() * 3)]; ``` [[Front-End Development|Front-end]] developers suffer from a [split personality](https://css-tricks.com/the-great-divide/). Back-end developers suffer from a paradox of abundance of possible [[Languages|languages]] (half a dozen commonly used) , cloud services (hundreds per [[Cloud Platforms|cloud platform]], and [[Databases|databases]] (over 300 and counting). Full-stack developers… well, it must be nice to be a magical 🦄, but [does such a beast really exist](https://www.google.com/search?q=full-stack+developer+myth)? - [[Front-End Development|Front-end]] - [[UX Engineer]] (aka [Front of the Front](https://bradfrost.com/blog/post/front-of-the-front-end-and-back-of-the-front-end-web-development/)) - [[JavaScript Engineer]] (aka [Back of the Front](https://bradfrost.com/blog/post/front-of-the-front-end-and-back-of-the-front-end-web-development/)) - [[Back-End Development|Back-end]] - [[Solutions Architect]] - Cloud - [[Amazon Web Services]] - [[Azure]] - [[Google Cloud Platform]] - Language - [[Java]] - [[Node]] - [[Ruby]] - [[Python]] - [[DotNet|.Net]] - [[PHP]] - [[Golang]] - [[DevOps]] - [[Databases|Database]] and [[Data Science]] - [[Web Development - Full-Stack|Full-stack]] ## Practices and Specializations Do you go deep? ```javascript recurse(webdev, { depth: Infinity }); ``` Web development is *very* broad. These practices, under the pervue of web development, are extraordinarily deep. They're so deep in fact, that they are often supported by, or outsourced entirely to, specialists and vendor services. - [[Accessibility]] - [[Analytics]] - [[API Development]] - [[Web App Architectures|Architecture]] - [[Content Management]] - [[Data Science]] - [[Data Visualization]] - [[DevOps]] - [[Web Graphics and Animation|Graphics and Animation]] - [[Web Internationalization|Internationalization]] - [[Machine Learning and AI]] - [[Web Performance|Performance]] - [[Web App Security|Security]] - [[SEO]] - [[Testing]] - [[Web UX Design|UX Design]] ## Web App Project Lifecycle What does it take to make a web site or web app, from first steps to first site visitors? ```javascript Promise.all(gitInit, npmInstall, ...magic, release); ``` - [[Web Project Setup]] - [[Package Management]] - [[Versioning and Source Control]] - [[Building and Bundling]] - [[Testing]] - [[Continuous Integration]] - [[Hosting]] and [[Web App Deployment|Deployment]] - [[Application Performance Monitoring]] (See also: [[Publishing an NPM Package]]) ## Key Web App Subsystems BYO SDK, FTW! ```javascript const miracle = compose(framework, router, state, etc) try { // The docs said it was "zero-config" 🤞 miracle(initialState) } catch(error) { throw TantrumError(`(╯°□°）╯︵ ┻━┻`) } ``` These are the underlying mechanisms driving web site/app behavior. Building a website or web app can often seem like a matter of stitching together solutions for these. And these solutions often require making tough choices among many possible approaches, tools, and services. - [[Tools - API Servers|API Server]] - [[Auth]] - [[Web Caching]] - [[Content Delivery Networks|CDN]] - [[Tools - Content Management Systems|CMS]] - [[Web UI Components|Components]] - [[Databases|Database]] - [[Web Graphics and Animation|Graphics and Animation]] - [[State Management]] - [[Routing]] - [[Web Servers|HTTP Server]] - [[Web App Rendering|Rendering]] - [[Domain Name System]] - [[Web Application Firewall|WAF]] or [[Run-Time Application Self-Protection|RASP]] - [[Analytics]] ## Key Aspects of Web App Quality Details matter, but there are soooo many 😩. ```javascript describe("My App", function() { it("does not break because I forgot something important", function() { const app = new App(); expect(app).to.not.throw() ; expect(app).to.be.attractive; expect(app).to.be.accessible; expect(app).to.not.be.slow; expect(app).to.have.property('good seo'); // yadda, yadda... }) }) ``` In the rush to next release, be sure to not overlook these. Most can be measured, audited, and tested through automation. - [[Accessibility]] - [[Code Quality]] - [[Cross-Browser Compatibility]] - [[JavaScript Error Handling|Error Handling]] - [[Web Performance|Performance]] (speed and resource usage) - [[Responsive Development|Responsiveness]] - [[Web App Security|Security]] - [[SEO]] - [[Traffic Analytics|Traffic]] - [[Web UX Design|User Experience]] ## Non-Website Development Using Web Skills ```javascript for (const skill of ['html', 'css', 'javascript']) { applications.find(otherUses) } ``` - [[Browser Extension Development]] - [[CLI Development]] - [[Data Visualization]] - [[Machine Learning and AI]] - [[Data Science]] - [[Hybrid App Development]] ## Movements ```javascript const agenda = { construct() { return new Way(this); } } const Movement = new Proxy(WebDev, agenda); ``` - [[Web Standards]] - [[Accessibility]] - [[Progressive Web App]] - [[Frameworkless Web Development|Frameworkless Web Development]] (aka "vanilla") - [[Decentralized Web|Decentralized Web]] - [[Serverless]] - [[Microservices]] - [[Mobile-First]] - [[Micro-Frontends]] - [[Containerization]]