The Happy Developer

Mastering Back-End Development - Stage 4: More On JS

Rami Mo — Mon, 30 Sep 2024 19:44:35 GMT

After learning the basics of computer science and the JavaScript ecosystem, and generally exploring, it's finally time to invest heavily in JavaScript. This investment will be rewarding in terms of the skills you will gain and the value it will add to you as a web developer and to your resume as a job seeker.

We are going to build a solid knowledge in JavaScript so that in the future you won't have skill issues. This will help you learn the technology and frameworks faster and more deeply.

Object oriented programming in JavaScript

Before we dive into implementing object-oriented principles in JavaScript, we need to understand what it is. To do so, please watch the following videos:

Since OOP is widely used in the industry and can be a bit complicated, feel free to explore more about it and ask question. here is a list of useful videos

After you did your researches get back to the track and start learning from the following resource.

The Modern JavaScript Tutorial
Previously, we learned some basics about JavaScript using the same source here. Its time to continue reading through this source again.
- Advanced working with functions
  We left this subject previously. It's now time to learn more about functions.
- Object properties configuration
  This subject is a little bit advanced and may be confusing, but you will learn enough for now. We will dive deeper into this topic at the appropriate time. Feel free to research more about the subjects introduced in this section.
- Prototypes, inheritance
- Classes

After you read through these resources, please consider watching the following videos as well. They are great for learning and practicing the harder and more complicated parts of OOP:

OOP programming is a broad and extensive subject. Keep in mind that we will return for more in-depth learning about this topic. For now, what we have learned here is more than enough for the foreseeable future.

Debugging and error handling

Well, shit happens, prod environment will break, database tables will drop. and there is always a developer who needs to fix the issue and save the day. Besides that, we need to be prepared for unexpected errors and bugs. We have to anticipate potential issues and put safeguards in place so that, in case of an emergency, we don't overwhelm the system and break it.

Promises, Event Loops, Modules

These concepts are fundamental to asynchronous programming in JavaScript, which is essential for building responsive and efficient back-end applications. You'll learn how to work with promises, understand the event loop, and organize your code using modules.

Modules

💡

Asynchronicity is a very important topic in web development. Please give it more attention because what you learn now will determine how far you can go. Please dont move on to the next steps without a deep understanding of asynchronous programming.

Typescript

TypeScript is a superset of JavaScript that adds static typing. You'll learn the benefits of using TypeScript, its syntax, and how it can improve your code quality and maintainability. For now, we won't spend a lot of time learning TypeScript, but we will definitely return to this topic later to explore it further.

JavaScript Run Times

Understanding how JavaScript actually runs is key to writing efficient code.

The V8 JavaScript Engine

]]>

Mastering Front-End Development - Stage 3: JavaScript Basics - Adding Interactivity

Rami Mo — Wed, 21 Aug 2024 14:07:35 GMT

Now that we have learned the fundamentals of HTML and basic CSS, we will move on to the next crucial step in web development: learning JavaScript. JavaScript is a programming language that allows us to create dynamic and interactive web pages. It enables us to add functionality such as form validation, interactive sliders, animated graphics, and much more. By learning JavaScript, we can enhance the user experience and make our websites more engaging and responsive.

For front-end developers, there are two aspects of JavaScript they should learn. The first part is JavaScript itself, and the other part is the DOM API.

JavaScript - The Basic Parts

In the first part, we will cover the basics of JavaScript, including its syntax and general programming concepts.

JavaScript syntax and structure

Since we are not covering a wide range of topics, this guide will use just two sources for learning. One is MDN, and the other is javascript.info.

JavaScript Tutorial by MDN 🆓

If you open this tutorial, you will see that HTML and CSS are listed as Prerequisites. We will ignore them for now since we are focusing on learning JavaScript for back-end development.

Reading these two modules is necessary for us.

pay attention that each module has its own sub modules which you should read and learn from.

The Modern JavaScript Tutorial by javascript.info 🆓

Don't panic yet. This website's resources are extensive, but for now, you only need to focus on five modules. Read them thoroughly and understand what you are learning. Don't forget to practice everything you learn.

💡

Learning about objects is necessary to understand other data types. For now, we will just scratch the surface of object-oriented programming (focusing on getting familiar with the syntax).

DOM And JavaScript DOM Api

After learning the basics of JavaScript, we need to learn about the DOM. DOM is the data structure that represents the web page you are viewing. It is an interface that allows you to view, change, or listen to events that happen there. Before we go deeper, let's read more about the DOM.

Introduction to the DOM by MDN 🆓
Using the Document Object Model by MDN 🆓
Locating DOM elements using selectors by MDN 🆓
Traversing an HTML table with JavaScript and DOM Interfaces by MDN 🆓
Introduction to events by MDN 🆓

After reading through this list, continue with these resources, which are more detailed and in-depth.

Document by javascript.info 🆓
Introduction to Events by javascript.info 🆓
UI Events by javascript.info 🆓

Where to practice

You can open up your browser console and start writing code there (see this guide and this one) or you can simply run your codes in this JavaScript playground.

To be continued

In this post, we covered the fundamentals about JavaScript. In the upcoming parts, we will dive deeper into more advanced topics. Stay tuned for the next part, where we will continue to expand our knowledge and explore these exciting topics in greater detail.

Don't miss the next part by subscribing to my newsletter.

]]>

Mastering Back-End Development - Stage 3: JS World Essentials

Rami Mo — Thu, 18 Jul 2024 09:48:01 GMT

Before we dive deeper into the world of JavaScript and Node.js, we will first focus on learning some essential skills that will be crucial for our journey. These skills include package management, where we will explore tools like npm and Yarn to handle project dependencies efficiently. We will also dive into script runners, understanding how they can automate repetitive tasks and improve our workflow. Additionally, we will cover Git, the version control system that allows us to track changes, collaborate with others, and manage our codebase effectively. Lastly, we will get familiar with Integrated Development Environments (IDEs), exploring their features and how they can enhance our coding experience. By mastering these foundational skills, we will be well-prepared to tackle more advanced topics in JavaScript and Node.js.

Package Managers And Scripts

There are several package managers (also known as dependency managers) like NPM, Yarn, and PNPM. These tools help you pack your dependencies in a single file, making it easy to run in other environments. They also help you run scripts to automate repetitive tasks. they all perform similar functions but use different approaches.Follow the links in the list below to read and watch the recommended resources.

An Absolute Beginner's Guide to Using npm By Nodesource
npm Tutorial for Beginners By Freecodecamp
What is NPM, and why do we need it? By Coder Coder
What is the role of "package-lock.json" in npm? By mend.io
PNPM Vs. NPM Vs. Yarn By Dhiwise
An Introduction to Package JSON Scripts in Node.js By Knowledgehut

Git And Version Controlling

Git is a distributed version control system that helps developers manage and track changes in their codebase. It allows multiple developers to work on a project simultaneously. Version control systems like Git are essential for collaboration, enabling developers to revert to previous versions, compare changes, and merge contributions from different team members efficiently. developers can achieve this Key features by branching and merging.

What is version control? By Gitlab
A Fun article about other version control systems!
Git Tutorial for Beginners By Mosh

VS Code And Its Ecosystem

VS Code is an amazing IDE with many features and great extensibility. You can customize its appearance to your liking and add extensions and language servers to get syntax highlighting, auto-completion, linting, and many other features. these two videos are just a starting point for you. Feel free to explore more about your chosen code editor.

VS Code Editor Customization Guide By QiroLab
Code Customization 101 By Visual Studio Code

To be continued

In this post, we covered the fundamental concepts about Package mangers, git and VS code customization. In the upcoming parts, we will dive deeper into more advanced topics. Stay tuned for the next part, where we will continue to expand our knowledge and explore these exciting topics in greater detail.

Don't miss the next part by subscribing to my newsletter.

]]>

Mastering Front-End Development - Stage 2: CSS - Bringing Life to Web Pages

Rami Mo — Tue, 16 Jul 2024 09:37:56 GMT

After learning about HTML and scratching the surface of front-end development, we are going to take a step deeper and learn how to style or beautify our HTML pages by using css.

CSS Tutorial By w3schools

Start learning css by reading through this two lists: CSS Tutorial & CSS Advanced

Notice that each list contains many items that you should read and practice.

Don't forget there is a button that says "Try it Yourself ". Don't hesitate to click on it and practice what you are reading.

CSS Styling the web By MDN

This tutorial has 4 sections. For now, we are going to learn the first three parts. CSS first steps, CSS building blocks and CSS styling text. notice that each list contains many items that you should read and practice.

CSS Tutorial By freecodecamp

If you are a video tutorial person then you can also try by watching this amazing and detailed tutorial by freecodecamp

To be continued

In this post, we covered the fundamentals about CSS and Styling. In the upcoming parts, we will dive deeper into more advanced topics. Stay tuned for the next part, where we will continue to expand our knowledge and explore these exciting topics in greater detail.

Don't miss the next part by subscribing to my newsletter.

]]>

Mastering Back-End Development - stage 2: Computers Basics

Rami Mo — Tue, 16 Jul 2024 09:08:45 GMT

Before we dig deeper into the specifics, it is essential to establish a solid foundation for our general computer knowledge. By grasping these fundamental principles, we will be better equipped to tackle more complex topics and understand the intricate workings of modern computing systems. This groundwork will serve as a stepping stone, enabling us to explore advanced subjects with confidence and clarity.

Basics of Computers by toppr 🆓

This guide provides plenty of resources to learn the basics about the hardware and software of your computer. Feel free to explore it and don't hesitate to open the links on that page and the following pages.

CS50x by Harvard university 🆓

This course is one of the best for those who want to enter programming-related jobs. It covers many subjects and provides a solid starting point for your career. It's a long course with more than 20 hours of well-taught material.

Although it is important to watch and learn from this course, I recommend starting it alongside your other activities. I encourage you to watch one or preferably two lectures each week until you finished all lectures.

💡

If you prefer to complete it quickly, please go ahead and watch lectures 0 to 8 (the first nine lectures).

JavaScript Algorithms by Codevolution 🆓

What are we developers without algorithms? bunch of illiterate savages how can click on a keyboard and mouse.

The path to learning algorithms is long and challenging, but it is achievable through time and practice. for now, we are going to learn some basic algorithms and solve some challenging questions.

💡

We will return to algorithms later since it is a big and critical subject that every developer should learn to a minimum extent.

JavaScript Data Structures by Codevolution 🆓

A data structure is a specialized format for organizing and managing data efficiently. It helps with operations like accessing, modifying, and deleting data. Common data structures include arrays, linked lists, stacks, queues, trees, graphs, and hash tables. Each has its own strengths and weaknesses, making them suitable for different applications. Understanding data structures is key to designing efficient algorithms and writing optimized code.

This path is also long and challenging, and we will learn it over time. For now, we are going to learn some basic data structures. We need to watch and practice the first 11 videos (from the beginning to circular queues). We will return to this topic to dive deeper later.

To be continued

In this post, we covered the fundamental concepts about computers, algorithms and data structures. In the upcoming parts, we will dive deeper into more advanced topics. Stay tuned for the next part, where we will continue to expand our knowledge and explore these exciting topics in greater detail.

Don't miss the next part by subscribing to my newsletter.

]]>

Mastering Back-End Development - stage 1: JavaScript Basics

Rami Mo — Sat, 22 Jun 2024 12:45:49 GMT

After gaining an understanding of web technologies, web infrastructure, and the basics of what happens behind the scenes, we are ready to move on to the next step.

We are going to learn JavaScript, the first step in becoming a back-end developer. We will cover the basics of JavaScript, including variables, conditions, loops, functions, and more. Pay attention to these topics and learn them well, as a good understanding of them is crucial for the next steps we will take.

JavaScript syntax and structure

Since we are not covering a wide range of topics, this guide will use just two sources for learning. One is MDN, and the other is javascript.info.

JavaScript Tutorial by MDN 🆓

If you open this tutorial, you will see that HTML and CSS are listed as Prerequisites. We will ignore them for now since we are focusing on learning JavaScript for back-end development.

Reading these two modules is necessary for us.

pay attention that each module has its own sub modules which you should read and learn from.

The Modern JavaScript Tutorial by javascript.info 🆓

💡

Learning about objects is necessary to understand other data types. For now, we will just scratch the surface of object-oriented programming (focusing on getting familiar with the syntax).

Where to practice

You can open up your browser console and start writing code there (see this guide and this one) or you can simply run your codes in this JavaScript playground.

To be continued

Don't miss the next part by subscribing to my newsletter.

]]>

Mastering Back-End Development - Stage 0: Foundations of Web Development

Rami Mo — Mon, 10 Jun 2024 19:01:04 GMT

Here we are at the beginning of our journey, where we will dive into the fundamental aspects of the web and the internet itself. In this first part, we will cover the basics, laying a solid foundation for more advanced topics later on. We will explore how the internet works, the role of web servers and browsers, and the protocols that enable communication between them. I hope you find this introduction helpful.

This post won't be very long or detailed since the subject isn't that extensive. However, pay attention to the keywords in the resources I've provided. If you're interested and want to learn more, feel free to do additional research. (If you're a nerd, you'll definitely find some interesting stuff here!)

1) How the web works and Web mechanics by MDN 🆓

Start with the "How the web works" guide. This article gives a basic overview of the web's functionality. After understanding the basics, read the "Web mechanics" guide. This guide dive deeper into web mechanics, providing detailed explanations on more topics.

2) How Does the Internet Work? and How Internet Infrastructure Works? by Stanford 🆓

These two guides are also about the basic aspects of the web and internet infrastructure. "How Does the Internet Work?" explains the underlying principles of internet communication, including IP addresses, data packets, and the role of Internet Service Providers (ISPs). "How Internet Infrastructure Works?" goes further into the physical and technical components that make up the internet.

Also feel free to wonder around the links provide in Related "How Stuff Works Articles" links. they contain valuable information.

3) Introduction to DNS and Comparison of DNS Server Types by DigitalOcean 🆓

these two articles will give you enough understanding on what a dns is, how it work and so on.

These two articles will provide you a good understanding of what DNS is and how it functions. The first article, "Introduction to DNS", covers the basics of the Domain Name System, explaining its purpose, how it translates domain names into IP addresses, and its role in internet navigation. The second article, "Comparison of DNS Server Types", dives deeper into the different types of DNS servers.

Additionally, if you prefer learning through videos, you might find this video (DNS Explained) to be an excellent resource.

https://www.youtube.com/watch?v=72snZctFFtA

4) What is a content delivery network (CDN)? by Cloudflare 🆓

These article is written by Cloudflare, one of the biggest DNS service providers. Read this article and feel free to click on the keywords you see on the page. It contains a lot of information on topics like caching, security, and edge computing.

5) how browsers work by MDN 🆓

After understanding DNS and CDNs, we'll dive into "how browsers work". Browsers are essential tools for accessing and navigating the web, and understanding their functionality can greatly enhance your web development skills.

To be continued

In this post, we covered the fundamental concepts necessary to begin our learning journey. In the upcoming parts, we will dive deeper into more advanced topics. Stay tuned for the next part, where we will continue to expand our knowledge and explore these exciting topics in greater detail.

Don't miss the next part by subscribing to my newsletter.

]]>

Mastering Back-End Development: A Complete Guide

Rami Mo — Fri, 07 Jun 2024 14:56:34 GMT

Your Back-End Development Journey Begins Here

Welcome to the start of an exciting journey in back-end development! I'm thrilled guiding you step-by-step from the very basics to advanced concepts and frameworks. In this blog series, I will break down complex topics into manageable, easy-to-understand posts published weekly. (For more Context please read this post).

Each post is designed to build on the previous one, ensuring you develop a solid foundation before moving on to more advanced topics. Together, we'll explore the essential skills and knowledge needed to become a proficient back-end developer.

There are numerous programming languages available for back-end development, such as Python, PHP, Go, and many others. Each of these languages has its own strengths and capabilities for building robust back-end systems. However, in this series, I will focus on the JavaScript stack, which I am most proficient in. JavaScript's popularity in the back-end development world has been steadily increasing, especially with the rise of powerful frameworks like Express, NestJS and Next.js.

Get ready to dive deep, ask questions, and apply what you learn. By the end of this series, you'll not only have a comprehensive understanding of back-end development but also the confidence to create your own web projects. Let's embark on this learning adventure together!

Stage 0: Foundations Of Web Development

Before we start learning Express or PostgreSQL and before we dive into meta frameworks, we need to build a foundation for our journey. How can you be a good back-end developer if you don't know what HTTP is? How will you handle caching if you've never heard of a CDN? Hypothetically, if you build a website, how will the world find a route to your servers? These foundational topics are essential for becoming a skilled back-end developer, yet they are often overlooked in favor of popular choices.

This might seem a bit tedious at times, but this is where the distinction between a good and a bad back-end developer is made. I assure you, this line becomes more bold and significant as you progress in your journey. As you get deeper into back-end development, the importance of these basics will become increasingly clear.

How does the internet work? - (web pages, networking and web servers)
How we talk to each other? - (ip, dns, tcp, HTTP, browsers)
Who are you? - (protocol, domain, tld, url)
Where are you? - (vps/v ds hosting, edge computing)

Stage 1: JavaScript Basics

Alright, now that we have a basic understanding of how the web works, we can move on to learning a programming language. In our case, that language is JavaScript.

To get started, we will:

Basics of JavaScript syntax and structure
Reading & writing to files
Event handling

Stage 2: Let's give Computer Science a chance

While there are many back-end developers who lack basic knowledge about computers, such as algorithms, databases, and the general workings of computers, we are not going to skip these crucial topics. Understanding these fundamentals is essential for becoming a proficient back-end developer. We will dive into the basics of computer science to ensure you have a solid foundation.

We will learn the basics about the following subjects in this part:

General computer knowledge (cpus, storage, memory, ...)
Algorithms
Data structures
SQL & NO-SQL Data bases

By the end of this stage, you will have a comprehensive understanding of these core computer science concepts. And you will thank me later when its time to decide between different technologies in your use cases.

Stage 3: Essentials Before We Dive Deeper

Before we start learning more about JavaScript and especially Node.js, we need a basic understanding of tools widely used in the industry, such as coding environments, dependency management, and code automation.

Package managers (npm, yarn, ...)
Scripts
GIT
VS code and its ecosystem

Stage 4: More On JS

As we progress we need to go deeper on javascript and its ecosystem. we will learn about typescript, Object-Oriented programming, asynchronous programming and many more!

In this step we will learn about:

OOP
Error handling & Debugging
Promises, Event loops, Modules, ...
TypeScript
JavaScript run times

Stage 5: JS Run Times

JavaScript was initially created as a scripting language meant to run on web pages, allowing developers to add interactive elements and enhance user experience. However, its potential expanded significantly when web developers could run JavaScript on servers by leveraging Googles V8 engine and Node.js. after that JS community saw an explosion of ideas and possibilities.

In this part we will learn about:

V8 Engine
Node.js
Call stack and heap
Basics of edge computing
Web servers

Stage 6: NodeJS Frameworks

While there are many frameworks for Node.js, the concepts behind them are quite similar (While there are many similarities, there are some differences in concepts and features among them). by learning one of them, you can expect to know a lot about other frameworks discussed.

While building everything is possible without these frameworks, learning and using them is highly recommended since they make you more efficient and your job much simpler.

We will mainly focus on Express.js and its stack since it is more widely adopted and used.

In this part we will learn about:

Express.js/Fastify/adonisjs
Routing
Middlewares
Security & Authentication
Error handling

Stage 7: Nestjs Basics

NestJS is a Node.js framework designed for building efficient, reliable, and scalable server-side applications. It leverages TypeScript and incorporates elements from Object-Oriented Programming (OOP) and use a framework like Express.js under the hood. With its modular architecture, NestJS allows developers to create well-structured and maintainable codebases. The framework also provides built-in support for a wide range of tools and libraries, making it easier to integrate various features into your applications.

in this stage we will learn about:

NestJS Cli
Modules, Controllers, Providers
Middlewares
Dependency Injection
Life cycles
Guards

Stage 8: More On Databases

Databases are the backbone of any back-end system, storing and organizing data in a way that allows for efficient retrieval and manipulation. There are several types of databases, each suited to different use cases.

Learning about different types of databases is crucial for any aspiring back-end developer. Understanding the strengths and limitations of each type enables you to make informed decisions based on the specific needs of your application.

We will also learn about ORMs, which make working with databases significantly better and easier. They provide a more developer-friendly experience when working with databases.

in this stage we will learn about:

SQL data bases
NO-SQL data bases
ORMs and modern DB tools (typeorm, prisma, drizzle, ...)
Migrations

Stage 9: Advanced Frameworks Concepts

After we have learned enough about NestJS and databases, we will dive into deeper subjects listed below. Keep in mind that these subjects are not tied to a specific framework or programming language, so learning them will give us a significant advantage over time.

Security, Authentication, ...
Serialization
Logging & debugging
Websocket & Streaming
Events & Queues (Kafka/RabitmQ/NATS)
caching (Redis)

Stage 10: Design patterns

In this step, we will learn about common solutions to common problems that have been around since programming began. we will learn to use these solutions elegantly in appropriate places.

Creational patterns
Structural patterns
Behavioral patterns

Learning this techniques requires lots of reading and practicing over time.

Stage 11: Deployment

In this section, we will dive into the concepts of Deployment, Docker, and Nginx. We will start by understanding the fundamentals of CI/CD, Deploying to servers and platforms, exploring how these practices help automate the integration and deployment of code, ensuring that software can be released reliably at any time. we will learn about Docker, a platform that enables us to create, deploy, and run applications in isolated containers.

What we will learn in this stage:

Basics of Linux
Docker
CI/CD (tools & platforms)
Nginx
Deploying and maintenance

The learning materials in this section are not strictly necessary for securing a job but significantly enhance your chances of getting hired.

Stage 12: Architectures

What do we know about answering questions regarding the big picture of the project or solution we are going to work on? Is it suitable? Is it scalable? These are some of the questions you will face soon in your job as a back-end developer, and we are going to be prepared.

Model-View-Controller (MVC)
Service Oriented Architecture (SOA)
Command and Query Responsibility Segregation (CQRS)
Microservices
Domain-Driven Design Approach(DDD)

Continuous Learning and Future Steps

Learning JavaScript, Nodejs, and other back-end topics is an ongoing journey. This guide is a comprehensive starting point, but web development is vast and always changing.

In the near future, I will dive deeper into each topic, providing more detailed tutorials and insights. As we progress, I may add or remove subjects based on the latest industry trends and best practices.

We will explore specific libraries and tools that I believe are beneficial for your development journey. Stay tuned for more in-depth content, and remember, the key to becoming a proficient developer is continuous learning and adaptation. Together, we will navigate the complexities of modern web development and enhance our skills, one step at a time.

At the end, please consider subscribing to my newsletter. In this weekly newsletter, I will share everything you need to learn about web development. You can expect detailed articles, tutorials, and tips on a wide range of topics.

]]>

Mastering Front-End Development - Stage 1: The Backbone of Web Pages (Html and accessibility)

Rami Mo — Tue, 04 Jun 2024 16:38:40 GMT

After gaining an understanding of web technologies in our journey, web infrastructure, and the basics of what happens behind the scenes, we are ready to move on to the next step.

This step is one of the easier ones, but we should not neglect its importance since it will create a solid foundation for building web pages and learning a bit about accessibility in web development. in this part we will learn about HTML, forms and accessibility.

💡

Bear in mind, each section usually has several links that you should read through. If there is no link in the body of the sections, then the heading is the link to the resource you should learn.

Basics of HTML

HTML Tutorial by w3schools 🆓

w3schools is a solid resource that every web developer should read through at least once. Its articles are easy to understand and filled with various examples. It doesn't go very deep, but it's a good starting point.

This page has many sections, but for now, reading the HTML Tutorial section is enough. After you opened the link (), take a look at the left sidebar and read all the parts in the HTML Tutorial section (From HTML Home To HTML Vs. XHTML).

Structuring the web with HTML by MDN 🆓

MDN is one of the best resources on the web, and when you find something from MDN, you should read and learn it thoroughly.This tutorial consists of three modules, and each one has sub-modules.

These are the three modules. Please read each module and its sub-modules carefully.

Semantic HTML by tutsplus 🆓

After you learn the basics of HTML, it's important to use elements in their appropriate and meaningful places. Now, it's time to learn about HTML semantics. Go ahead and watch this tutorial, which is short (around 40 minutes).

Forms

HTML Forms by w3schools 🆓

In this section we will learn about forms and different form inputs. This tutorial consists of 6 parts, and you should read them all.

Web form by MDN 🆓

Here we are again with another amazing tutorial from MDN. Just read the following links, as we only need these ones for now.

Accessibility in html

It's important to use these technologies responsibly to ensure accessibility for all users. so we are going to scratch the surface of accessibility by learning accessibility in HTML.

Accessibility Guidelines by w3schools 🆓

This tutorial is excellent for building a solid understanding and foundation of accessibility and what it is.

Accessibility by MDN 🆓

This is a more in depth and practical tutorial about accessibility by MDN. (Skip the CSS and JavaScript sections for now)

References for what you learned

HTML is a language with numerous elements and attributes that can be easy to forget over time. To help you keep track of these, here are some valuable references, feel free to give them a visit every now and then.

HTML elements reference by MDN 🆓
HTML Reference by htmlreference.io 🆓
HTML References by w3schools 🆓

To be continued

In this post, we covered the fundamentals about HTML, Forms and Accessibility. In the upcoming parts, we will dive deeper into more advanced topics. Stay tuned for the next part, where we will continue to expand our knowledge and explore these exciting topics in greater detail.

Don't miss the next part by subscribing to my newsletter.

]]>

Mastering Web Development: Join My Free Mentorship Program and Transform Your Career

Rami Mo — Wed, 29 May 2024 17:00:15 GMT

Hi everyone! Last week I launched an online mentoring program. I shared my website on platforms like Reddit and Hacker News, which may have caused some confusion about my intentions. So, I'm here to clarify what I'm doing and why you should consider following and joining my program, which is free of charge.

This program is designed for individuals who want to become web developers, whether they are interested in front-end, back-end, or full-stack development. It covers various pathways to achieve this goal, including fast-track methods for those who want to quickly enter the field and more detailed, in-depth approaches for those who prefer a comprehensive understanding or want to deepen their knowledge.

So, if you are interested in building a career in web development or want to gain more skills and knowledge, keep reading. I will guide you through this challenging and exciting journey, providing you with valuable insights and practical tips.

Who I Am?

I'm Rami. I studied computer science in university and have been building web applications for the last 7 years. I've been a programmer at heart for the past 15 years. I have worked with back-end frameworks such as Node.js, Express, and NestJS. In front-end development, I have experience with jQuery, Angular, React, Backbone, and many others. I have also worked with databases like SQLite, PostgreSQL, MongoDB, Redis, and so on.

I self-studied my entire life because I had no other options. I was living in a less developed region in a chaotic country. I found my way through web development and life, which is why I'm a happy developer, sometimes even an ultra-happy developer. I learned a lot about becoming a web developer on my own and have helped and inspired many others to find their path. To date, I have mentored over 20 people and consulted countless others to become better developers.

20 is not a big number, but I mentor them in my own way. My program usually takes a full year to complete. During this time, I try to teach them everything they need, deepen their knowledge, help them network in the tech industry, and finally assist them in finding their dream job.

Why Im Launching This Now?

Well, I had plans to write about web development for ages. I started mentoring people around 3 years ago. Right now, I have started a new program where I will mentor 6 people (they are already chosen, so this is not an offer for you guys at the moment). I wanted to document the whole process to make it easier for the next round of mentoring. The stars lined up and I felt confident enough to begin this blog and program.

In the meantime, I expanded my network and knowledge on essential topics, accessed more learning materials, worked hard, gained a lot of experience, and discovered my methods for mentoring others to become web developers.

Now, I'm ready to pass this knowledge on to the next generation of web developers and to those who can't access a mentor or afford premium courses. This includes people living in difficult conditions, whom I empathize with deeply.

So for now I have nothing to sell. It's all free, including everything you need to learn to become a programmer.

Why You Should Try What I'm Cooking ?

As I said, I'm an experienced self-taught developer who has worked with developers and companies from Germany, the Netherlands, Switzerland, Canada, Australia, and many more. I have seen the evolution of web development firsthand, witnessing the rise and fall of numerous web frameworks. This experience has given me a unique perspective on the industry and a deep understanding of what works and what doesn't. I have navigated through the ever-changing landscape of web technologies, adapting to new trends and best practices as they emerged.

Since I was passionate about programming and didn't have much of an actual life, I usually dedicated at least 80+ hours a month to reading posts and documents, watching courses, and following web development industry bloggers on various platforms like Twitter, YouTube, LinkedIn and many other platforms.

So, I get what you're aiming for, and I'm confident I can help you reach your goals. I've got the knowledge and skills to offer valuable guidance. Plus, you can check out my work by following my updates or subscribing to my newsletter. This way, you can see the impact of my work firsthand and decide if it meets your needs. I'm dedicated to sharing my expertise and helping you succeed in your web development journey.

Unlock Your Potential with Me

As I mentioned before, I will document the entire process of mentoring someone with little experience and prior knowledge until they become skilled enough to find a job or pursue other opportunities.

I will provide detailed roadmaps with all the necessary resources you need to read, watch or practice. Each section of this journey will include one or more detailed posts (documents) where I will carefully organize the resources into different levels (These resources will be updated to fit today's trends and requirements.). These levels will progressively dive deeper into each subject, ensuring that you gain enough knowledge and insight to confidently move on to the next topic.

By following this structured approach, you will be able to build a solid understanding of each topic, step by step. This methodical progression will not only help you master the necessary skills but also ensure that you are well-prepared to tackle real-world challenges. My goal is to provide you with a clear and effective learning path that will guide you from a beginner to a proficient professional.

For now, I am planning to create two detailed roadmaps (aka slow-paced): one for front-end development and another for back-end development. Each roadmap will be carefully crafted to cover all the essential topics and skills you need in these areas.

I will extend these roadmaps in the near future based on your feedback and the evolving trends in the industry. By continuously updating the content, I aim to provide you with the most relevant and up-to-date information, ensuring that you stay ahead in your web development journey.

💡

A note about this roadmaps: The big picture in my mind is to create roadmaps tailored to the needs of different groups of people. For example, one of you might want to become a front-end developer quickly. I will create a faster roadmap that skips some of the less necessary details to help you get ready for the market sooner. Later, you can return to deepen your knowledge, giving you the opportunity to advance faster.

💡

Currently, the Front-End program has been launched, and you can explore it here: Mastering Front-End Development: A Complete Guide

How to Get Started and Stay Updated

To get started, follow me or subscribe to my newsletter. For now, I will post updates at the necessary times to provide a learning list with specific objectives for a given period. You will study these materials, and by the time you finish learning and practicing, I will have prepared the next step for you. This way, you can continue learning without interruptions.

Alternatively, you can provide your email in the form below the post, and I will notify you when the next guide is released to help you avoid procrastination.

I know, the last thing you want is another blamer in your life, I will provide motivation and encouragement. My goal is to inspire you to take action and make progress. I want to be a positive force that helps you stay focused and driven, even when challenges arise.

And who knows, someday you might join me in helping others navigate the same path you have traveled. By sharing your experiences, insights and success story, you can inspire others who are just starting out.

One more thing

Let me know about your specific needs in the comments section below. Your feedback will help me tailor the content to better meet your learning needs.

]]>

Mastering Front-End Development - Stage 0-1: Foundations of Web Development

Rami Mo — Fri, 24 May 2024 10:52:36 GMT

1) How the web works and Web mechanics by MDN 🆓

2) How Does the Internet Work? and How Internet Infrastructure Works? by Stanford 🆓

Also feel free to wonder around the links provide in Related "HowStuffWorks Articles" links. they contain valuable information.

3) Introduction to DNS and Comparison of DNS Server Types by DigitalOcean 🆓

these two articles will give you enough understanding on what a dns is, how it work and so on.

Additionally, if you prefer learning through videos, you might find this video (DNS Explained) to be an excellent resource.

https://www.youtube.com/watch?v=72snZctFFtA

4) What is a content delivery network (CDN)? by Cloudflare 🆓

5) how browsers work by MDN 🆓

To be continued

Don't miss the next part by subscribing to my newsletter.

]]>

Mastering Front-End Development: A Complete Guide

Rami Mo — Thu, 23 May 2024 15:06:16 GMT

Your Front-End Development Journey Begins Here

Welcome to the start of an exciting journey in front-end development! I'm thrilled guiding you step-by-step from the very basics to advanced concepts and frameworks. In this blog series, I will break down complex topics into manageable, easy-to-understand posts published weekly. (For more Context please read this post).

Get ready to dive deep, ask questions, and apply what you learn. By the end of this series, you'll not only have a comprehensive understanding of front-end development but also the confidence to create your own web projects. Let's embark on this learning adventure together!

Stage 0: Foundations of Web Development

Before we start learning HTML or CSS and before we dive into meta frameworks, we need to build a foundation for our journey. How can you be a good front-end developer if you don't know what HTTP is? How will you handle caching if you've never heard of a CDN? Hypothetically, if you build a website, how will the world find a route to your servers?

Unfortunately, many new front-end developers today jump straight into learning React. They often skip the basic concepts that are crucial for a solid understanding of web development. These foundational topics are essential for becoming a skilled front-end developer, yet they are often overlooked in favor of popular choices.

This might seem a bit tedious at times, but this is where the distinction between a good and a bad front-end developer is made. I assure you, this line becomes more bold and significant as you progress in your journey. As you get deeper into front-end development, the importance of these basics will become increasingly clear.

How does the internet work? - (web pages, networking and web servers)
How we talk to each other? - (ip, dns, tcp, HTTP, browsers)
Who are you? - (protocol, domain, tld, url)
Where are you? - (vps/v ds hosting, edge computing)

Stage 1: HTML - The Backbone of Web Pages

We, as front-end developers, are responsible for creating user-friendly and accessible interfaces. Our journey begins with HTML, which serves as the backbone of any web page. HTML provides the fundamental structure, much like the skeleton of a body, upon which everything else is built. It defines the layout and organizes the content, ensuring that the page is both readable and navigable. This initial step is crucial, as it sets the stage for creating well-structured, accessible, and efficient web pages that meet the needs of all users.

Html basics
Html tags
Semantic elements (plus a little bit of seo)
Accessibility
Forms and validation

Well, it's not a lot, but it's crucial, especially accessibility. Later, you will understand what I'm talking about and why I'm emphasizing it so much.

Stage 2: CSS - Bringing Life to Web Pages

Without CSS, it is possible to have web pages, but they would look like primitive cave paintings. CSS, or Cascading Style Sheets, brings life and vibrancy to web pages by allowing us to style and layout our HTML content. It enables us to define colors, fonts, spacing, and positioning, transforming a plain HTML structure into a visually appealing and human-friendly interface.

CSS also plays an important role in ensuring that web pages are responsive and adaptable to different screen sizes and devices, providing a consistent experience for all users.

CSS basics
Selectors and naming conventions
Units and variables
Box sizing and positioning

At this point, we won't worry about the responsiveness of our pages yet. We will practice and create some beautiful web pages.

Stage 3: JavaScript Basics - Adding Interactivity

Alright, now that we have a basic understanding of how the web works, along with foundational knowledge of HTML and CSS, we can move on to creating our first interactive web page. This is where JavaScript (JS) comes into play. JavaScript is a powerful scripting language that allows us to add interactivity and dynamic behavior to our web pages.

With JavaScript, we can create features like image sliders, interactive maps and much more. It enables us to manipulate the page content (HTML or CSS), respond to user actions, and communicate with servers to fetch or send data.

To get started, we will:

Basics of JavaScript syntax and structure
Dom and Dom manipulation
Fetch and Fetch api
Event handling in respond to user actions

By the end of this stage, you will be able to build web pages that not only look good but also engage users with interactive features. This will set the foundation for more advanced JavaScript concepts and frameworks that we will explore later.

Stage 4: Advanced CSS - Enhancing Styling Skills

Now that we have a solid foundation in HTML, CSS, and JavaScript, it's time to further enhance our skills. In this step, we will focus more on styling. As a front-end developer, being skilled in styling is essential.

We will also cover responsive design, ensuring you can create pages that look good on any screen size or device. This means your web pages will automatically adjust and rearrange their layout to provide an optimal viewing experience, whether they are viewed on a desktop, tablet, or smartphone.

In this stage, we will dive deeper into CSS by learning:

Flex and Grid
Animations and Transitions:
Responsive Design
Advanced Selectors and Pseudo-Classes

By the end of this stage, you will have a comprehensive understanding of advanced CSS techniques. You will be able to create web pages that are not only aesthetically pleasing but also highly functional and responsive. This will significantly improve your front-end development skills and prepare you for tackling more complex projects in the future.

💡

For historical context, we might also learn about CSS preprocessors like Sass and Less. They are still widely used in the industry, even though modern tools like Tailwind are more popular.

Stage 5: Advanced JavaScript - Deepening Your Knowledge

Alright, here we are. We have reached the gates of modern front-end development. Learning React or Next.js begins here. In this stage, we will move beyond just templates (HTML & CSS) and dive deep into JavaScript. before we start learning modern frameworks its necessary to learn more about JS.

in this stage we will learn about:

Asynchronousity
Class and objects (OOP)
Modules
Scripts (Npm, Yarn, ...)
JS runtime environments (like v8)
Debugging
DOM diffing
State and stitching state to DOM

I should mention that these topics are not all you should learn. There are many other subjects like TypeScript, bundling, and more that we will cover later at the appropriate time.

💡

Learning TypeScript is beneficial for new web developers because it adds static types to JavaScript, helping catch errors early and making code easier to maintain. Its strong typing system and tools improve productivity and code quality, and it's widely used in the industry, enhancing job opportunities. Mastering TypeScript leads to more robust, scalable, and professional code, setting you apart in web development.

While I admit that these subjects may seem overwhelming (and let's be honest, a bit strange and scary), learning them is essential.

This is going to be challenging, but you are going to become a fantastic front-end developer.

Stage 6: Pre-React Essentials

In this step, we will dive into and practice several important subjects that are crucial before starting to learn React. These subjects include GIT, Tailwind CSS, and a bit of VSCode customization (don't be worry by the way, i will convert you to that guy who lives in arch and codes in neovim, just give me the required amount of time and you will be the wizard)

In this stage we will learn more about the following subjects

Tailwind CSS
GIT
VS code and its ecosystem

Stage 7: Mastering React

React is a web development library. For many years it was just a front-end library, but in recent year, with the introduction of many server-side features, it is becoming more and more of a full-stack framework.

If you choose to step in this road, next years of your life would get dedicated to learning and digging deeper in react ecosystem.

Heads up!

React is a library with over a decade of history. It's widely used in the industry, and many solutions and use cases have developed around it. Today, React is not just a web framework. By learning React, you can create web apps, mobile apps, and even desktop apps that can run on most operating systems. However, it's important to note that learning React alone is not enough to develop apps for other platforms. You also need to learn other tools like React Native, Expo, Electron and many more!

This are going to be the subjects that we will learn:

Components and their life cycle
JSX and templates in react
Hooks and state management
Different Styling methods
Rendering
Routing
Forms
Testing and bundling
UI libraries (Shadcn, Headless UI, ...)

Stage 8: Exploring Meta Frameworks - Next.js

After we learned about react we will continue our journey with Next. Next.js is built on top of React, enhancing it with additional features and optimizations. It is often considered the next step for React developers who want to build more robust and scalable applications.

Next.js provides server-side rendering, static site generation, and API routes, making it a powerful tool for creating dynamic and high-performance web applications. It simplifies many of the complexities involved in setting up a React project, offering built-in support for routing, data fetching, and more.

By mastering Next.js, you will be able to build full-fledged applications that are not only efficient but also SEO-friendly and fast. This stage of learning will involve diving deep into the features and capabilities of Next.js, understanding how it extends React, and exploring best practices for building modern web applications.

💡

There are many other alternatives to Next.js, like Remix.js. I personally prefer Remix because it relies on standard web APIs and has fewer magical elements. However, since Next.js is widely adopted across the industry, you have more access to learning materials and better chances of finding a job.

in this stage we will learn about the following subjects:

Routing, Navigation and pages (api, layouts, middlewares, ...)
Data fetching and catching
Rendering paradigms (CSR, SSR, SSG, ISR)
Client/Server paradigms
Authentication and security
Asset optimization (images, fonts, ...)
Streaming, Error handling and debugging
SEO
internationalization
Edge runtime

Continuous Learning and Future Steps

Learning React, Next.js, and other front-end topics is an ongoing journey. This guide is a good starting point, but web development is vast and always changing.

]]>

From Passion to Profession: My Journey in Mentoring Future Developers

Rami Mo — Sun, 19 May 2024 06:02:50 GMT

How It Began

I was born in a remote area where I had no idea what programming was. My first encounter with a computer was love at first sight. From that moment on, I dedicated the following years of my life to becoming a programmer.

I pursued a degree in computer science in college, where I quickly learned about Python, C++, and other programming languages. During this time, I started looking for an internship, marking the beginning of my career.

Years later, I visited my hometown and noticed that many talented people there had the potential to achieve more but weren't able to. Why was this the case? This topic deserves a detailed article, which I might write later.

This realization inspired me to help others improve their lives and their futures through programming.

The First Mentorship Attempt

After some time, I asked a friend of mine, who was a teacher, to help me find talented individuals to mentor. After a month of searching and preparing, I found my audience. Fifteen young people gathered around. I spoke with each one of them, leveraging my experience to identify their talents and determine where they would fit best. I categorized them into three groups: Front End, Back End, and UI Design.

At that time, I had a designer friend who was ready to assist. We had six front-end students, six back-end students, and three UI design students. Thus, we began our journey. I created a roadmap for the front-end and back-end students. As I lacked sufficient knowledge and experience in UI/UX design to create a roadmap, my friend took care of that.

For a year, I held meetings twice a week for each group, addressing their problems and issues, assigning projects, and forming teams (UI + FE + BE) to collaborate on projects. I taught them industry standards and best practices, helped them build professional resumes, prepared them for interviews, and assisted them in landing their first jobs.

They put in the effort and worked hard, and eventually, some of them found success. Today, out of the original fifteen, two are working as front-end developers, two as back-end developers, and one as a designer (although she didn't become a UI designer, her job still involves design).

Unfortunately, some of them gave up during the process, but overall, I am satisfied with the results.

Needless to say, this process significantly improved my abilities and taught me many new things, as they asked me all kinds of questions! I learned how to lead, motivate, and guide them. I can't recall how many times I encouraged them to stick to their plan.

The Journey Continues

After the first year of mentoring, a lot changed in my personal life. I moved to another city, got married, and experienced many other significant events. Originally, I had planned to continue mentoring, perhaps even multiple times. However, I paused for three years due to these life changes.

Now, I'm excited to restart this rewarding journey. Mentoring has always brought me immense joy and satisfaction, and I've had a lot of fun along the way. Many of my previous students have become great friends, and weve stayed in touch over the past three years. I'm now leveraging their help to start another round of mentoring. This time, I have even more support.

With more experience and assistance, I am confident that this new phase will be even more successful. I'm eager to guide a new group of talented individuals, helping them develop their skills and achieve their potential.

Stay Updated on Our Mentorship Journey!

I'm excited to share that I will be reporting weekly on the progress of my students, including what they will learn in the upcoming week. This will cover learning materials, exams, projects, and more.

If you're interested in becoming a front-end or back-end developer, you might find these updates incredibly useful. Follow along to gain insights, tips, and a sneak peek into the curriculum and projects that my students are working on.

💡

Update: Front end roadmap is released here: Mastering Front-End Development: A Complete Guide

💡

Update: Back end roadmap is released here: Mastering Back-End Development: A Complete Guide

]]>