- Week 1, Let's Get Started
- Week 2, ReactJS, A Game Changer
- Week 3, Learning Your Sidearms
- Week 4, Rocket Science Behind The Web Server APIs
We recognize the awesomeness of Javascript. Apart from it being the universal language for web we are a huge fan of ReactJS on client side and Node JS environment for server side.
First and foremost world lives in browsers so there isn't any way around it! But that's not it, Javascript has become a sane and automatic choice for client applications other than web, especially mobile as well as desktop. To make things even more interesting JS has become a sane choice on servers, IOT and even used in ML albeit for learning purposes.
If you want to look more into the "Why's?". Mr Google says "Hi!" to you and please keep asking Google till you believe that Javascript enables you to communicate with supernatural and extraterrestrial forces.
Still not satisfied? Please doubt your research skills!
You are a next level programmer, problem solver and algorithm designer. We acknowledge and respect that and it's not why you are here, you are here to fix colors and buttons(Pun intended :P). Humor aside, learning the tools to communicate and express awesomeness inside you, should be plain, simple and fast and which is exactly what this guide tries to do.
If you are expert at some topic beforehand then talk with your mentor and move on to advanced stuff. You don't have to be a "Lakeer ka faqeer" by following everything written here but when you say you know some topic we assume your understanding lies above 8/10 and to make it more interesting you will be tested accordingly.
This document will tell you what to learn, from where to learn and the practice assignments to do after you learn. The effort will be your own, what this document cannot do is, sit and code in your seat.
P.S. Motive of this manual is not to make you obey but to help you learn and if you think of any improvements, another effective procedure or a missing resource then please create an issue at this repository with the information and assign it to @ahmed.waleed. We are good people who appreciate feedback and suggestions, trust me :)!
You may think what's below this section isn't important for you but this is the stuff that usually differentiates between good and mediocre programmers. So, don't take this lightly.
We would love to say a few words on this subject however there is nothing we can say that could come close to this masterpiece video from two Googleans. It's a must watch and please do share it with your programmer friends as well!
- Check out these eMumba coding comandments, everything in it mayn't be relevant for you at the start, but that's okay you can study it as it becomes relevant through your training period
- Before any formal review, you should review your own code per the guidelines above and believe me, you will find lots of improvements plus this will make your mentor happy.
Share the code on Facebook, Skype, Slack? Nah! That's not what real programmers do! It's been long since Git won the version control systems war and Github became the preferred choice for open source repositories and code.
If you have no idea what Git and Github is, see this and this or if you think that wasn't enough and need to solidify your understanding, you can watch this video series.
Once you have enough understanding, here are the steps you need to follow
- Create a new repository for any assignment or task on Github
- Push your code to repo
- Add instructions on how to run or test the application in readme.md file
- Share the link to your mentor
- Create a new branch with appropriate name(it's a test as well :)) and push the code to the remote branch on Github
- Add a new file named as Code Review (Markdown format preferred) and add the feedback / improvements suggested by mentor
- Open a merge/pull request back to the main branch however please don't merge it. Share the request with your mentor to review
Managing yourself and your time is immensely important to do work. And every successful person manages himself very well. This article by Peter Drucker is a must read by anyone working in any industry.
In case, you are not aware of any modern text editors for WEB technologies (Yes! we see you vim users!), let us name a few and you can choose whatever sounds cool to you because they are all quite comparable.
The recommendation, however, is to choose an electron based editor so you can tweak it the way you want using technologies you work in i.e. HTML/CSS or JS.
- Microsoft always impresses with tools for developers and this time its Electron based VS Code which is, surprisingly, open source, free to use and with a huge community echosystem and extensions. Plus i believe VS code can be declared as eMumba's official Editor because everyone i know uses it. Recommended by Author.
- Atom is an Electron based open source Editor from GitHub with a lot of users and extensions. It's a sound choice if you hate microsoft for some reason.
- Then, there is the Sublime Text which revolutionized the modern code editors. It is built on python so it is faster than the above two, with of course a lot of extensions. Downside to it is that it is not open source although it is free to use if you are okay with it bugging you sometimes to pay for it.
- There are many others but the above three are the trending ones on tech scene and Cross Platform as well. Best editor is the one you are comfortable working in! You will spend major part of your day looking at your editor so make sure you like living in it!
- Reintroduction to HTML and CSS if required
- Modern CSS
- Reintroduction to Javascript if required
- Getting hang of the basic concepts of Javascript
- Learning the syntax sugar of the language along with understanding the ES6 / newer developments on top of basic JS
This is where the web started so this is where we start. There is no shame in taking the 101 courses as long as you get better however what would make you look bad is if you are found lacking in these basic concepts at some point after this training.
Register your account on Freecodecamp which is an interactive learning platform. You will be using it intensively for learning.
If you are out of touch skipping through may hurt you while working on the upcoming Tasks or real life projects. And somewhere down the road you can complete all the sections on freecodecamp and earn the certificate. It has some reputation internationally.
You are not supposed to remember every tag or property. And often you will find yourself searching for a specific tag or styling property on Google so it helps saving time and avoiding extra keystrokes if you have a reference cheat sheet on your PC.
- HTML Cheat Sheet
- CSS Cheat Sheet
- Need a filler text? Visit Lorem Ipsum.
- See the image named as Task to see resulting snapshot of your task
- Your website needs to be responsive in design. Make sure you test it on mobile, iPad and Desktop.
- You cannot use bootstrap, instead use the latest CSS features such as Grids.
- You can reuse images included in the folder.
Get ready for a complete hands-on programming day. You will learn the JavaScript by doing. You will be working through the Freecodecamp exercises interactively again.
Topics to cover from "Javascript Algorithms and Data structures Certification" portion of curriculum:
- Basic Javascript
- ES6
- Debugging
- Basic Data Structures
- Basic Algorithm scripting
- Object Oriented Programming What this will do is help you get started with syntax while without being hard on your cognitive memory.
Ask your mentor to assign you one of the assignments
Once done with the assignment, reach out your mentor and do a code review session for the tasks you did. Make improvements per the guidelines and update the code in repository.
Learning the JS you are actually going to use is a lot different than what we just learned its because of how language keeps evolving over the time although the basics you learned remain the same and you can fallback to them any time but that's not fashionable.
You will be programming in multiple paradigms and using different semantics which can be overwhelming at the start. Our goal is to raise your bar to the point where you are excited to explore more instead of being overwhelmed.
- Learn Functional Programming paradigm
- Code practice in Functional style
- Learn ReactJS
Don't worry if you don't understand the heading yet, you will vouch on this by the end of the day. If not don't say we didn't warn:
Again, we will be utilizing the Freecodecamp to start with Functional Programming.
You need to complete the Functional Programming section.
Getting the correct output via Functional Programming approaches you learned above is the goal.
Learn and use Functional programming practices.
Once done with the assignment, reach out your mentor and do a code review session for the tasks you just did. Make improvements per the guidelines and update the code in repository.
- Learn React
- Learn about Async nature of JS and how to handle the Asynchronous stuff
- Start with react on local environment
- Learn how to think in React
ReactJS has revolutionized the way web client applications are developed and created a whole new ecosystem of tools, frameworks and transpilers/compilers on top of JavaScript. We start by learning the basics of react via react section on freeCodeCamp.
- The first step is to understand the problem very well, this guide from pluralsight does a fine job of laying out the problems that come with Async nature and presenting you with basic solutions.
- To understand Promises better and how they work, see this video.
- Trust me watching this guy on Monday morning does make you feel better :). For some people error handling is the most boring thing but for our guy its not. We really think error handling ability differentiates between real programmers and script kiddos. Watch Error Handling with Promises.
- How to fetch data from server using fetch API. This is the recommended way of doing API calls.
You have been writing Code in the browser till now but how do you start in the local environment? Follow these instructions from official react docs to get started in the local dev environment.
Go through this awesome video to solidify your React understanding and build the application alongside the tutorial:
Ask your mentor to assign you one of the assignments
Done with the Task? Let's learn how to think better in component based frameworks such as React and verify if you did it the right way? Below are some highly recommended documents from React JS documentation which will help you in understanding and working in react better:
It's time to reiterate the lessons learned and make sure that you did it the way it should be done using the concepts explained. In your next code review your mentor will check for best practices you read above.
Once done with the assignment, reach out your mentor and do a code review session for the tasks you just did. Make improvements per the guidelines and update the code in repository.
- State management and why its an important and hard problem to solve
- How Redux fits in the puzzle
- Learning Redux
- Static Type Systems in JS
- Utility Libraries
Key to solving any problem is in understanding the problem to its very core. Previous Assignment you did should have given you some context of what is the problem of State Management. If you aren't able to figure out the problem yet, no worries, let's explore the problem and possible solutions.
- State Management and solutions
- How does Redux work?
- How to use it and the advanced concept of Redux Thunk via official documentation. It's very well written and you will know it once you read it.
You will have to implement state management via Redux in the assignment you did using React before this. To start working on the task, create a new branch in your Github repo and push it to the Github. This is to ensure we can do comparisons and preserve your previous work.
New Requirement : Add a spinner / loading animation where appropriate.
Once done with the assignment, reach out your mentor and do a code review session for the tasks you just did. Make improvements per the guidelines and update the code in repository.
- Learning basics of Static Types and why use them in an artificial way? This 4 part series will make sure that you are properly introduced.
- To get started with Flow types, consult this link. For any advanced learning, i would suggest to dig in to official documentation. Type system is a world on its own
- How to integrate Types in React Components? See official documentation.
Lets identify the flow of data in the Application you worked on previously and add types to your application.
Introduction and how to think in Ramda(Functional Utility Library). This 3 part series of articles will help you learn its semantics.
Task Due :
Replace the data manipulation functions you are using in your assignment as you go through the series with corresponding functions from Ramda.
- Ramda is also a world on its own, you don't need to remember every function name however its documentation is a very handy reference to have opened as a pinned tab in your browser
Once done with the assignment, reach out your mentor and do a code review session for the tasks you just did. Make improvements per the guidelines and update the code in repository.
Any Technical Debt you want to clear? Any topic you think is left unclear or any thing made you intrigued you can dig deeper or perhaps you want to polish your table tennis skills? This is the time to do that!
However, you need to report your mentor on how you are going to spend the slack time.
Let's get started with Node and Express so that you can easily create basic server applications and APIs,
- Learn basics of Node using this tutorial.
- Get started with ExpressJS using this tutorial
- Need anything else? Checkout NodeJS and expressJS documentation
Remember, you created a book application once and you had to store the data in localStorage? Well look at you all grown up, let's create a basic express application so that you can receive the data and store it in a json file using Node and Express.
You know the drill!