# 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]]