MDN web docs

The most recognized JavaScript resource is MDN web docs (MDN stands for Mozilla Developer Network) provided and maintained by Mozilla Corporation. While other programming languages usually have their official documentation, JS doesn’t have one (It actually depends od how do you treat ECMAScript, because it has official documetation). And the reason behind it is that a few teams worked on developing JS. But nevertheless, we have MDN web docs website, which is almost treated like official documentation for the JavaScript community. Information provided by maintainers is truly comprehensive. In my developer career, I have never experienced lack of crucial information on subjects of interest. What is more, this website provides sufficient tutorials for web development including JavaScript, HTML and CSS, divided into different levels of expertise.

Links:
MDN: https://developer.mozilla.org/pl/
Tutorials: https://developer.mozilla.org/pl/docs/Web/Tutorials

ECMAScript docs

ECMAScript was created to simply standardize JavaScript, because maintaining multiple independent implementations would be unbelievably hard without some sort of a standard. In ECMAScript docs you can find what JavaScript should look like and in almost every case it does. For example the latest official release of ECMAScript is named ES2020. Ecma international also provides information about future additions to the standard under the name ESNext. Technically the ECMAscript docs are the closest you can get to the official JavaScript docs. I personally wouldn’t recommend reading them for beginners, because complicated language and covered subjects might seem a little underwhelming.

Links:
Newest ECMAScript Docs: https://tc39.es/ecma262/#sec-fundamental-objects

Javascript.info

Javascript.info is a great and clearly made tutorial website. The tutorial itself covers JavaScript as a programming language and matter of working with a browser. The amount of information crucial to gain essential knowledge is perfect. I would say, if you want to maximize your learning speed, javascript.info is a right choice. In comparison to MDN docs, it is easier to get essentials and don’t get overloaded with information. Additionally, almost every topic has some bonus, usually it is some trick that is hard to invent on your own or explanation of unusual JavaScript behaviour. In my honest opinion, this site is the best way to start learning JavaScript – In my case it was a turning point.

Links:
Javascript.info: https://javascript.info/

Codecademy

Codecademy is an interactive learning site. You can take courses on a large amount of languages, but we are interested in JavaScript. If you are starting from scratch it is a way to go. Easy and well explained tasks will softly inaugurate you. The biggest advantage of this site is that you don’t need any code environment, you just write your code inside a special container right on the website. At the beginning, you already have some code written and you just have to change something or insert some variable or value, which sets the entry threshold really low. The downside of codecademy is “PRO” content, if you want to have access to everything, you must upgrade your account to PRO status and the lowest-priced upgrade costs 19.99$ a month.

Links:
Codecademy: https://www.codecademy.com/

Udemy

Video based tutorials have gained huge popularity in recent years. This form of studying is known as the easiest and really effective, so the huge increase in popularity is understandable. Udemy is a great online learning platform with a wide range of courses. It doesn’t only have videos, online tests, zip packages with source code and community conversations are a huge part of Udemy success. There are some free courses, but the better ones are paid. The prices are really high, but you can encounter 90% discounts almost every two weeks.

Links:
Udemy: https://www.udemy.com/

Some valuable udemy courses:
https://www.udemy.com/course/modern-javascript/
https://www.udemy.com/course/modern-javascript-from-the-beginning/
https://www.udemy.com/course/js-algorithms-and-data-structures-masterclass/
https://www.udemy.com/course/javascript-beginners-complete-tutorial/

Codewars

Learning by doing is pretty good, but if you ask me, learning by doing and competing is just amazing! Codewars is an online learning site, where you can complete challenges, get points for it and compare your solution to others. The challenges are divided into different levels of expertise and your account has a level itself to give you proper tasks. You can get better by completing challenges, but the amount of knowledge gained through studying solutions made by more advanced people is huge. Some code pieces you will find there will change your way of thinking and present you unthinkable actions. You can’t miss codewars!

Links:
Codewars: https://www.codewars.com/

W3Schools

W3Schools is an old-school tutorial page. You can start your web development path using this webpage, but you will run out of resources quickly. Topics are explained quite well for beginners, but explanations are simple and minimalistic. Lack of crucial topics are enough to say W3Schools is insufficient for more advanced people. Nevertheless, this webpage is worth checking.

Links:
W3Schools: https://www.w3schools.com/
JS tutorial: https://www.w3schools.com/js/default.asp

Youtube channels

It is an unlimited source of knowledge. You can find a huge amount of tutorials, explanations and examples on youtube. Some youtubers even upload some of their content from Udemy, so it is good to pay attention to several channels. I personally really enjoy crash courses on youtube, you can choose some technology and get essentials in under two hours.

Good channels:

Fun Fun Function: https://www.youtube.com/channel/UCO1cgjhGzsSYb1rsB4bFe4Q
Traversy Media: https://www.youtube.com/user/TechGuyWeb
freeCdeCamp.org: https://www.youtube.com/channel/UC8butISFwT-Wl7EV0hUK0BQ
Udemy Tech: https://www.youtube.com/channel/UCU6e4MJtvlcX5DBLP1cq8hQ
Academind: https://www.youtube.com/channel/UCSJbGtTlrDami-tDGPUV9-w
Dev Ed: https://www.youtube.com/channel/UClb90NQQcskPUGDIXsQEz5Q
The Net Ninja: https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg
Techsith: https://www.youtube.com/user/techSithTube

Summary

There are a lot of javascript resources. They may vary within the quality, but all of them are worth trying. In my opinion, dividing your time into different resources gives the best results in the studying process, because you avoid monotony. I will try to pick the best choices in some categories and write them below.

Most comprehensive docs and tutorials: MDN web docs / ECMAScript docs
Most efficient tutorial: Javascript.info
Best for beginners: Codecademy

The post Resources to learn JavaScript appeared first on Yumasoft.

Last couple of years we’ve seen a huge growth of webpage apps written mainly in JavaScript (at least the front-end). We can extract two approaches of implementation. One is the Client-Side rendered static website. The second is server rendered javascript (SSR). I will try to explain both of them and present the pros and cons.

Client-Side

This approach in general is easier. We just have to serve static js files (and some assets like stylesheets, images). The code is being interpreted by engine in client browser. Hosting of such project can be done for example on AWS S3 service.

Pros

• + Cheaper (Less development work)
• + Easier to implement
• + Cheaper and easier hosting
• + Easier to deploy

Cons

• – Less secure
• – Harder to update clients (cache in browsers)
• – Client browser cache problems
• – High requirements of resources on client browser
• – Browsers are not equal
• – SEO problems (still even google has problems with understanding full js client side websites,
  this may cause a drop-off of the visits. Companies now participate with search engines creators to upgrade this matter, but it’s still a problem)

Server Side Rendering

This way our server is the „engine” which runs the code. Such project requires specialized hosting that can run js code and serve static assets. In general search engines prefer such apps. The bots that analyze our website have problems with interpreting the js code.

Pros

• + Security (for example clients have no access to keys and tokens for api authentication)
• + Performance (Such apps do not require so huge resources on a device)
• + SEO (as said on ClientSide con: Server side rendering is better interpreted by search engines
  bots)
• + Easier “client” upgrades

Cons

• – More expensive to implement
• – Harder to implement (I will talk about easy approach in next section)
• – More expensive to host and maintain (more expensive servers)
• – Requires more knowledge

SSR-Static

There is also another approach that idea is in middle of static serving and server side rendering. We create a webapp which we compile into static files. Those files we can host like an SSR app but it’s way lighter and easier to write and maintain. It requires recompilation of static files each time we change data on CMS. This solution is very simple and the implementation can be very easy.

Summary

When we want to create a small website we can go to Client-Side solution or SSR-Static (for ex. react- static). If our main focus is SEO and performance of the website we go with SSR. Also if we are building bigger application (and more secure) we have to consider SSR.

Our company can help you decide which option suits you best and what technologies we should use to achieve the goal.

The post Server-side vs client-side rendering: which one is best for me? appeared first on Yumasoft.