Getting Your Feet Wet
Here are some other resources that you’ll find helpful too:
Once you read the ones above, the following books can supplement your knowledge:
- ES6 Features
Digging Into the Mildly-Confusing
might want to pay extra attention to:
- Constructors Considered Mildly Confusing
- Promise A+ Specification (historical)
- Promise (MDN)
- How Do Promises Work
- Callbacks, Listeners, and Promises
- Learn async/await By Example
The resources marked as “historical” might have outdated examples and recommendations, so read them with a grain of salt. Though they still are worth reading, don’t skip them.
Patterns and Practices
Along with those, diving further into Functional Programming will change the way you look at the world—in a good way.
When it comes to adopting new features into the language standards, that is how it has been so far: If something gains enough popularity, it finds itself > in the next version of the language.
For example, first Bluebird and other libraries came up with a Promise implementation, and after its widespread adoption, the native `Promise` constructor got itself merged into the language.
- First-class Function
- Immediately-Invoked Function Expression (historical)
- Why Ramda?
- A Beginner’s Guide to Ramda
- Functional Programming Patterns With Ramda
DOM and Virtual DOM
That being said, it's so widespread that it will be helpful for you to learn virtual dom along with dom. Here are some resources to get you started:
Learn Your Timers
Related to flow control, one concept that’s important and most do not pay
enough attention is how the event loop, the main thread, the
compositor thread, and various task queues and timers in
Here’s, again, a list of study material to shed some light on it:
- Tasks, Microtasks, Queues, and Schedules
- What the Heck is Event Loop Anyway
- In the Loop
- The Node.js Event Loops, Timers, and
- Timers, Immediates, and
- In the Loop
- What the Heck Is the Event Loop Anyway?
- How Node Event Loop Really Works
- Leaner Meaner Faster Animations with requestAnimationFrame
Learn Various Methods of Communicating With the Server
If you are writing a web application, you’ll probably find yourself consuming external resources and data streams. You’ll need to know various ways to communicate with the remote endpoints. Here are a few articles and references that can help you with that:
- Cross-Origin Resource Sharing
- the Fetch API
- Web Messaging
- Web Sockets
- Server-Sent Events
- Web Workers
- What is a Webhook?
- Beacon API
- JSONP (historical)
- Cross-Origin Communication with a Klein Bottle (historical)
In this section, the techniques marked “historical” in this section are –indeed— historical. Never resort to them unless there is no other option because you are dealing with some legacy system.
Know Your Local Stores
Sooner or later, you are going to need to persist your data somewhere on the client too. There are several options that you can try, each with its pros and cons. Learn them, and understand which API, tool or technique is the best fit for what types of scenarios.
Here is a non-exhaustive list of client-side storage technologies:
- Progressive Web Apps
- Offline Storage for Progressive Web Apps
There are also storage API wrappers that can make your life easier.
Here are a few of my selections—PouchDB is my favorite, by the way:
If it were a couple of years ago, I’d have said “you can live without
using a type system”; however, the world is leaning towards a strongly-typed
Currently, there are two popular options: FlowType and TypeScript.
Technicalities aside, both of them are functionally equivalent. They are syntactically similar too:
TypeScript or FlowType?
As of almost 2022, there is a lot more inclination in the community
towards TypeScript. Even parts of the the React community
have begun using TypeScript in lieu of FlowType.
That said, both of the technologies are solid choices if you want to
Dialects and Runtimes
Here are several dialects and runtimes that you will likely encounter sooner or later:
Want More Node? Keep on Reading
I’ll provide resources related to learning Node, for the interested, in separate section near the end of this article.
React, or Vue, or Angular, or Alpine, or… Oh my… 🤯
Well, there is a very simple solution to this:
Choose one framework, and stick with it until you master it.
Here’s more on that in a Twitter thread:
There are a lot of web frameworks out there, and when it comes to picking one to study most of the time you’ll find yourself choosing between React and Angular.
Both React and Angular are useful tools that solve similar problems that have robust open-source ecosystems behind them. So, learning either one will suffice.
However, if I were you, I’d pick React, and only after I master React, would I look at Angular.
I have several reasons for that:
- First and foremost, once you learn **React**, it’s easier to learn the rest—The contrary is not always true.
- React is (often) not opinionated, you can bend it to your will.
- React is well-supported, and well-documented.
- React is (most of the time) fool-proof. Unless you try hard to shoot yourself in the foot, you can always create a React application that will perform well.
If you want to drill down deeper, MDN has a curated list of learning resources on various client-side libraries and frameworks.
Each framework comes with a performance baggage. Although it is very fast, React is no exception: Virtual DOM is fantastic; however, it is not free. The same is true for all the abstraction layers that React provides over native DOM and Document fragment usage.
In very rare edge cases, you might find yourself opting out from using React and Virtual DOM and managing your apps’ performance yourself by using your own caching and DOM-manipulation strategies at a lower level by using the DOM API, Document fragments and all sorts of other clever tricks and black magic. I’ve been there; trust me, it’s not as easy as it looks.
Why not Both?
You don’t have to take an all-or-nothing approach:
With APIs like
Your Hard Work Will Pay Off
You’ll be able to see the similarities and differences between various frameworks, understand them at the core architecture level. You will better understand which framework is a better fit for what kinds of problems.
Trust me, it’s totally worth the opportunity cost of your time.
The Source of Truth
A new specification version is released every year. In-between these releases, the latest specification draft is at https://tc39.es/ecma262.
To read about new bleeding-edge features, including those that are “almost standard” (Stage 3), see proposals at https://github.com/tc39/proposals.
Know Your Web Fundamentals
Web Fundamentals In General
- Interneting Is Hard
- MDN: Front-End Developer Learning Path
- MDN: Web Technology for Developers
- GDN: Web Fundamentals
Learn Your HTML Like a Pro
Become a CSS Master
- MDN: Learn CSS
- Learn to Code HTML and CSS
- Learn to Style HTML Using CSS
- Box Model
- CSS Specificity: Things You Should Know
- A Complete Guide to Flexbox
- Learn CSS Grid
- Using CSS Animations
- Using CSS Transitions
- CSS Guidelines
- CSS Tricks
CSS Frameworks, Tools, and Paradigms
- Scalable and Modern Architecture for CSS (an oldie, but still the best conceptual framework)
- Sass: Syntactically Awesome Stylesheets
- Styled Components
- Tailwind CSS
- Atomic CSS
Get Better at Visualization
Again, sooner or later you’ll need to visualize things. That can be a
simple dashboard, or a real-time histogram, or a time series data visualization.
Knowing of a couple of visualization libraries will be helpful.
Here are a few libraries that you can take a stab at:
Get Comfortable with Developer Tools
When it comes to web development, browser tooling is something that you definitely need to get yourself familiar with. Here are a few pointers that can help you in that area:
- MDN: Understanding Client-Side Tools
- Chrome Developer Tools
- Firefox Developer Tools
- Developer Tools Secrets that Shouldn’t Be Secrets
Knowing your tools will help a great deal when you need to debug web user interfaces and code.
Know Your Bundlers
Related to developer tooling is bundlers and builders. The most popular ones are Webpack, parcel, rollup, and gulp.
If you are not sure where to start, I’d suggest you master Webpack first, and take a stab at other tools later. But, regardless, all of these tools serve more-or-less similar purposes (with some variations in how you configure them); so once you know how one of them work conceptually, the others will just make sense.
Browsers And Performance Optimization
This section is the last section, and there’s a reason for that. Performance optimization is so tempting that once you get the poison, you’ll want to optimize everything all the time.
There’s an old (and quite correct) saying about performance optimization:
“The first rule of program optimization: Don’t do it. The second rule of program optimization (for experts only!): Don’t do it yet.
There’s no need to prematurely optimize your code until you feel enough pain to justify the cause. Remember, everything is fast for small n.
If you don’t take my word for it, maybe you can listen to Donald Knuth:
“Programmers waste enormous amounts of time thinking about, or worrying about, the speed of noncritical parts of their programs, and these attempts at efficiency actually have a strong negative impact when debugging and maintenance are considered. We should forget about small efficiencies, say about 97% of the time: premature optimization is the root of all evil. Yet we should not pass up our opportunities in that critical 3%.”
One quick tip before giving performance pointers: Write code for humans to read. When you need to choose between performance and readability, always choose readability.
To quote it differently…
“Always code as if the guy who ends up maintaining your code will be a
violent psychopath who knows where you live.”
— John Woods, Software Engineer, Google
- Jank Free
- Jank Busters: Building Performant Web Apps
- Time to First Byte
- First Meaningful Paint
- Extract Critical CSS
- Rendering Performance Case Studies
- How not to Trigger a Layout in Webkit (historical)
- Profiling Node.js
- Debugging and Profiling Node.js
- v8 CPU and Memory Profiling
- Top Node.js Metrics to Watch
- Performance Testing Guidance for Web Applications
- The Art of Application Performance Testing: Help for Programmers and QA
- How Do You Load Test a Web Application
- Application Performance Testing Tutorial
- Software Performance Testing
- YouTube: Google Chrome Developers Channel
- How Browsers Work: Behind the Scenes of Modern Web Browsers
- v8 wiki
- High-Performance Browser Networking
- Learning v8
- v8 internals: an Illustrative Primer
- Hidden Classes and Inline Caching in v8
- Optimization Tricks in v8
- A Tour of v8 Compiler
- How the v8 Engine Works
Have Something to Share?
If you have anything to add to the list, just shoot me an email at email@example.com and I will update this page.
Until next time… May the source be with you 🦄.
\ \\, \\\,^,.,,. “Zero to Hero” ,;7~((\))`;;,, <zerotohero.dev> ,(@') ;)`))\;;', stay up to date, be curious: learn ) . ),(( ))\;, /;`,,/7),)) )) )\,, (& )` (,((,((;( ))\,