Practically for regular web development it can be reduced to two rules:
Never write to the DOM outside of an animation frame
Only write to the DOM in an animation frame
This comment explains it in a bit more detail:
/*
The general rule is:
- do not read from the DOM inside of an animation frame
- do not write to the DOM outside of an animation frame
The reason for this is that reads from the DOM could cause a trigger of expensive layout
calculations. This is because the browser will ensure that the values you read are actually
correct. The expensive calculation will only be triggered if the related values are actually
changed since the last paint.
So to ensure we never have this problem, we ensure the writes (changing values) to be in the
part of the frame that is executed right before the layout / paint. Reads should never be done
from inside of an animation frame; you never know what other animation frames have been requested
and have performed writes already.
This shows the effect of calling `requestAnimationFrame` at different positions:
| non animation frame | animation frame | layout / paint | non animation frame | animation frame |
| 1-> | ->1 2-> | -------------- | | ->2 |
Calling `requestAnimationFrame` from a non animation frame causes the code to be executed in the
same frame, but at the end of the frame, right before layout / paint.
Calling `requestAnimationFrame` from an animation frame casues the code the be executed at the
end of the next frame.
*/
array.reduce
Another great challenge that helps with learning is the following: "implement all Array methods using array.reduce"
I recommend adding algorithms to your list. It's on mine. I know it falls in the basic part, but it is necessary in two ways. Firstly, it helps you write better code. Secondly, most interviews start with algorithm challenges.
I know this is way back when, but in case anyone finds this article the OP mentions the Computer Science path from Frontend Masters which is sufficient as an intro to algorithms, especially for interviewing. Even covering some of the more complex ones not used in interviews but useful on-the-job. You only need to supplement with practice on the algorithms/data structures taught (Leetcode or neetcode.io).
Seeing that now I have sufficient time to learn things, I want to update my plan
according to the things mentioned in this fine article.
Back To Basics :
Number 1,3,6
The main reason is I am not a single full-stack developer anymore.
That means it is likely that I will be working in a team where codes will be reviewed by others.
I would add Closure, some methods like Call, Apply that relates to the this operator.
Refreshers :
Number 1: ReactJS documentation
Context, Render Props, HOC for Class Components
Hooks :
I have just resumed my learning on this after long suspension, started yesterday
Well, after reading fundamental topics in State and Effect Hooks, I think I will still like class components that have been working quite nicely in my last project. I will use Hooks only whenever I think they are suitable for those similar cases which are
explained in the doc.
Number 3 and 4: Unit Testing and E2E with Cypress
Well, due to lack of time, I ignored all things about testing during my development of my last project which was also my 1st real project, except end to end (E2E) testing.
I only did E2E in my own way, not according to any standard or popular ways.
Now that I will have time, my mind is also on testing; when reading topic on testing in React doc, I find the tools for testing like you mentioned, including Jest which is supported by React by default when using Create-React-App.
Number 6 Typescript
Like I said elsewhere, this is necessary, because I have just got started with Angular a couple days ago, in more serious way. My mind is towards large scale/enterprise apps, in which according to experienced developers, Angular is more suitable.
I think I am starting to like the way, the paradigm, the approach Angular takes in building a SPA.
For me, having skills in both frameworks/libs will be useful as well as satisfying, like driving both automatic and manual transmittion cars.
Going outside of my comfort zone
Number 3 REST APIs :
This is always on my mind, as I haven't had used it in a real project. All of the backend code for routing in my last project using Laravel were done by my own way.
Now, even as for using Laravel itself, I need to do it in a correct way, according to best practices.
Number 4 Sequelize :
In this case, I will apply it for MySQL
Beyond those mentioned in the article for this backend section, I will explore the following things :
Node.Js :
Read thoroughly about fundamental concepts. Maybe I will try some APIs like filesystems, buffers, etc
Continue learning Express, esp Middleware and writting a CRUD database app
Resume exploring NestJs to see whether it will be the framework of choice among all available Node.js frameworks
I am not really fond of NextJs for serverside rendering; it is NestJs that I am looking for. Both have similar names : Next and Nest, but serve for different purposes.
After all these things are covered, I plan to get started with Microservices. Prior to it, I want to resume my learning on Software Architecture.
Uh... actually I still have interest in mobile dev using React Native, Flutter or Java.
That's why Java is still always on my mind, not only for Android, but also for enterprise app. And .Net Core with C# are also very interesting. Not to mention Python, especially for AI, Machine Learning.
No mention for picking and learning Node.js frameworks or even Node.js its self ?
I myself currently use PHP for backend, so I still need to learn Apache and Nginx, esp their complex configuration to handle concurrent users.
As for React dev, we know for bundling it usually uses Webpack, although there are others like Parcel. Create-React-App tools handles webpack configuration for us. But when we are forced to config Webpack ourselves, we have to learn it.
I am interested to learn and use Nest.js (not Next.js) for backend. But to integrate React frontend with Nest.js for a standalone app seems to require enough skill in Webpack.
The permission to move unfinished topics into a later year makes this plan feel workable. Looking back at the 2021 list, which learning goal became a finished project, and which stayed a topic to revisit? That reflection could help readers turn their own lists into smaller commitments.
Hello! I’m Obieda Ananbeh.
Software Engineer with 8 years of strong experience in Software Analysis, Design, Development and Integration of Enterprise Applications
Eat healthier and workout, don't forget 😂
Haha every year that is the plan 😂😂
Hey! Welcome to DEV community! 😁
Great to see your plans for learning!
It's very good to learn about the details! This video helped me a lot: youtube.com/watch?v=cCOL7MC4Pl0
Practically for regular web development it can be reduced to two rules:
This comment explains it in a bit more detail:
Another great challenge that helps with learning is the following: "implement all Array methods using
array.reduce"Thanks! I've already watched that video sometime, I agree it's great! This one is also really good youtu.be/8aGhZQkoFbQ
what are your suggestions for, "How to write good content"?
I sometimes write some articles and don't post some of them because I don't like them or it seems like there is already enough content on it.
I don't really know, that's why it's on my list 😅
right 😂😅
I recommend adding algorithms to your list. It's on mine. I know it falls in the basic part, but it is necessary in two ways. Firstly, it helps you write better code. Secondly, most interviews start with algorithm challenges.
I know this is way back when, but in case anyone finds this article the OP mentions the Computer Science path from Frontend Masters which is sufficient as an intro to algorithms, especially for interviewing. Even covering some of the more complex ones not used in interviews but useful on-the-job. You only need to supplement with practice on the algorithms/data structures taught (Leetcode or neetcode.io).
Seeing that now I have sufficient time to learn things, I want to update my plan
according to the things mentioned in this fine article.
Back To Basics :
Number 1,3,6
The main reason is I am not a single full-stack developer anymore.
That means it is likely that I will be working in a team where codes will be reviewed by others.
I would add Closure, some methods like Call, Apply that relates to the this operator.
Refreshers :
Number 1: ReactJS documentation
Number 3 and 4: Unit Testing and E2E with Cypress
Well, due to lack of time, I ignored all things about testing during my development of my last project which was also my 1st real project, except end to end (E2E) testing.
I only did E2E in my own way, not according to any standard or popular ways.
Now that I will have time, my mind is also on testing; when reading topic on testing in React doc, I find the tools for testing like you mentioned, including Jest which is supported by React by default when using Create-React-App.
Number 6 Typescript
Like I said elsewhere, this is necessary, because I have just got started with Angular a couple days ago, in more serious way. My mind is towards large scale/enterprise apps, in which according to experienced developers, Angular is more suitable.
I think I am starting to like the way, the paradigm, the approach Angular takes in building a SPA.
For me, having skills in both frameworks/libs will be useful as well as satisfying, like driving both automatic and manual transmittion cars.
Going outside of my comfort zone
Number 3 REST APIs :
This is always on my mind, as I haven't had used it in a real project. All of the backend code for routing in my last project using Laravel were done by my own way.
Now, even as for using Laravel itself, I need to do it in a correct way, according to best practices.
Number 4 Sequelize :
In this case, I will apply it for MySQL
Beyond those mentioned in the article for this backend section, I will explore the following things :
Node.Js :
Read thoroughly about fundamental concepts. Maybe I will try some APIs like filesystems, buffers, etc
Continue learning Express, esp Middleware and writting a CRUD database app
Resume exploring NestJs to see whether it will be the framework of choice among all available Node.js frameworks
I am not really fond of NextJs for serverside rendering; it is NestJs that I am looking for. Both have similar names : Next and Nest, but serve for different purposes.
After all these things are covered, I plan to get started with Microservices. Prior to it, I want to resume my learning on Software Architecture.
Uh... actually I still have interest in mobile dev using React Native, Flutter or Java.
That's why Java is still always on my mind, not only for Android, but also for enterprise app. And .Net Core with C# are also very interesting. Not to mention Python, especially for AI, Machine Learning.
Well, sorry for lengthy response.
Back to basics :
number 3, 6, 7 (HTTP deeply)
Refreshers :
number 1 is a regular activity, while number 6 is necessary
for learning Angular and Nest.Js
Going outside of my comfort zone :
number 1, 3, and 8 (but OAuth in general, not only in JS domain)
No mention for picking and learning Node.js frameworks or even Node.js its self ?
I myself currently use PHP for backend, so I still need to learn Apache and Nginx, esp their complex configuration to handle concurrent users.
As for React dev, we know for bundling it usually uses Webpack, although there are others like Parcel. Create-React-App tools handles webpack configuration for us. But when we are forced to config Webpack ourselves, we have to learn it.
I am interested to learn and use Nest.js (not Next.js) for backend. But to integrate React frontend with Nest.js for a standalone app seems to require enough skill in Webpack.
The permission to move unfinished topics into a later year makes this plan feel workable. Looking back at the 2021 list, which learning goal became a finished project, and which stayed a topic to revisit? That reflection could help readers turn their own lists into smaller commitments.
really nice plan!
Thanks Jaime! Glad you like it
I loved reading this.
Thank you!
Great stuff Eddy! Love it!
Thanks Danny! Appreciate you checking it out
Good luck with your plan! taking action is the best medicine for learning.
This is the most important part “ Going outside of my comfort zone”
Nice plan 👍
Thank you Obieda 🙂