Some ideas for web dev related topics

[ice799]

Hi:

After we met last week I spent some time thinking about different web dev related topics. Here's a list of things I came up with (I can make a separate issue for CS stuff next)... let me know what you think:

web dev topics:

• advanced css

• advanced JS / node

• asset pipelines Why this is important: Asset pipelines help with versioning and optimizing assets. Versioning your assets (html, CSS, JS, PNGs, ...) is useful so that when those assets are cached on browsers, proxy servers, CDNs, etc the cache can be properly invalidated when updates to the assets are made. Also, most asset pipelines perform optimizations (like compression, minification, tree shaking, and more) to help reduce the size of the content sent to the client, which speeds up page loads time. In addition, using a CDN to serve your assets can greatly reduce page load time because CDNs help to move content from the original server (origin) out to servers much closer (physically) to the client -- this also helps to greatly improve page load times.

  • webpack
  • CDNs
    • speeding up static assets
    • understand cache-control headers
    • project idea: setup a simple AWS CloudFront distribution for some static assets. Use curl against the URLs and check the headers returned by CloudFront.

• persistence / storage Why this is important: Understanding different data persistence methods (databases, S3, key-value stores) and their trade offs around complexity, fail-over, backup strategies, and management overhead will help you to choose the appropriate storage method for a particular use case. Most web-apps use more than one storage technology,

  • data storage
  • AWS S3
    • public objects / private objects
    • signed URLs (what they are, how to use them, when to use them)
    • project idea: write a simple web app that accepts file uploads (maybe images). images can be specified as either "public" or "private". Display the files (private files using signed URLs).
  • databases
  • mysql
  • postgres
  • aurora
    • don't need to know all 3 of the above in depth, just useful to know what they, how they differ at a high level, what pros/cons generally are.
    • probably want decent operational experience around at least one of the above
    • project idea: research how the database you learned about in the code academy (postgres) deals with the questions listed below (scaling, sharding, failure, backups, replication, ...).
  • redis
  • memcache
    • again, don't need to know both in depth, but knowing what they are and when you might use them (in addition to, or in lieu of, SQL databases) is very useful knowledge.
  • for all of the above: how do they scale?
    • how would you scale read/write throughput
    • how would you shard
    • what are the failure scenarios
    • replication/disaster recovery
    • backups
    • how do you query them
  • for SQL databases:
    • transactions
    • pagination
    • joins
    • migrations
    • indexes
    • what columns to add indexes on
    • project idea: write a simple web app (maybe a fake ATM machine?) that uses transactions, pagination, joins, and indexes to track money in bank accounts and debit cash correctly/safely.
  • secret storage Why this is important: Understanding how to safely store passwords, API keys, etc can help prevent your web-app from being hacked :)
  • how do you store passwords securely? (hint: bcrypt)
  • how do you store secret values (API keys, credentials, ...)?
  • project idea: Try using AWS Secret Manager or AWS SSM parameter store to securely store an API key. Retrieve that API key from a simple node.JS app. Understand why it's OK to use bcrypt for passwords, but not for API keys.

• authentication Why this is important: Building secure, usable authentication systems is critical to building secure apps that users can actually use. Understanding how sessions, cookies, 2factor auth, etc work means you will be able to build web apps with BETTER authentication systems that actually work and won't get easily hacked.

  • within your own app
  • sessions
  • cookies
  • encrypted cookies
  • jwt
  • 2factor auth
  • oauth
  • SAML (don't need to know how to implement it, but knowing what it is, what it is used for, etc)
  • project idea: build a node.js app with 2-factor auth.

• APIs Why this is important: Building stable, usable APIs and knowing how to query them with graphql is foundational knowledge that all webapp developers should learn to master. You will need to use other REST APIs in your career and you will likely need to expose a REST API for a service you build, yourself.

  • REST API design (don't forget about pagination)
  • graphql
    • project idea: build a simple node.js app that exposes a simple REST API. Query that API with graphql.

• misc web app concepts Why this is important: Understanding different web app architectures can help you become more effective when you look at a foreign code base you have never seen before or when evaluating how to build a new, greenfield project.

  • ORMs vs Raw SQL
  • MVC
  • backend template rendering (a la Rails) vs API + reactJS frontend
  • websockets

• testing complex apps Why this is important: Fast tests are critically important for speeding up the developer feedback loop during iteration on webapps. If tests take too long, it makes working on the app more difficult and painful. Stable webapps have lots of tests and run their test suites automatically with every commit. Learning how to parallelize tests and speed them up is crucial to helping tests run faster.

  • parallel tests
  • speeding up testing pipelines

• development and deployment Why this is important: Learning how to deploy web apps is important if you want to learn more about devops and get your apps up and running. It is also important for engineers to know how the deployment process works so they can build better services that are easier to deploy, faster to recover, and easy to decouple.

  • docker
    • project idea: dockerize a node app and deploy it on heroku (or AWS)
  • DNS
    • project idea: setup some DNS records! Learn about A records, MX records, CNAMEs.
  • deployment
    • what is zero downtime deployment?
    • what services can you use which will provide zero downtime deployment?
  • heroku
  • AWS / GCP

• security Why this is important: Building secure webapps is difficult, but important. You should be aware of different common attack vectors, how they are exploited, and how to fix them.

  • secure password storage (bcrypt, always)
  • SSL
    • project idea: deploy a simple site with SSL certificates.
  • XSS
    • project idea: build a simple site with an XSS vulnerability, exploit it, learn how to fix it.
  • SQL injection
    • project idea: build a simple site with an XSS vulnerability, exploit it, learn how to fix it.

• monitoring && alerting

  • Why this is important Learning to monitor your apps will help you gain visibility into why your website is working (or not working) and how changes you make affect the uptime of your app.
  • pingdom
  • APM stuff (new relic, data dog, etc...)

• advanced web app topics (probably not necessary for now)

  • load balancers
  • auto scalers
  • serverless
  • terraform

[ice799]

Let me know what you think about these -- happy to discuss in more detail if you have questions about any of these.

I ran this list of topics by some friends, as well, and they all seemed to agree that this list of topics was pretty comprehensive for building and deploying more complex web apps.

[ice799]

Added a bit more context above and some project ideas, as well. Let me know if we should discuss this more.

[ashatat]

Thank you @ice799 We reviewed the topics together and there were a lot of things that we weren't aware of, and we need to read more about it and discuss how to start with it. then we can get back to you if we have any further questions. We are looking forward for the CS topics.

[ice799]

Added some more project ideas and explanations for each section on why learning each set of topics is important and matters for web developers.