├── .gitignore ├── README.md ├── analytics └── analytics.md ├── backend ├── architecture │ └── architecture.md ├── backend.md ├── client_validation │ └── client_validation.md ├── databases │ └── databases.md ├── message_queues │ └── message_queues.md └── node │ └── node.md ├── editors └── editors.md ├── faq └── faq.md ├── frontend ├── browser │ └── browser.md ├── bundling │ └── bundling.md ├── css │ └── css.md ├── frontend.md ├── html │ └── html.md ├── javascript │ └── javascript.md ├── resources │ └── resources.md └── single_page_applications │ └── single_page_applications.md ├── getting_a_job └── getting_a_job.md ├── infrastructure └── infrastructure.md ├── linting └── linting.md ├── logging └── logging.md ├── networks └── networks.md ├── package_management └── package_management.md ├── project_workflow └── project_workflow.md ├── task_runners └── task_runners.md ├── testing └── testing.md ├── typescript └── typescript.md └── version_control └── version_control.md /.gitignore: -------------------------------------------------------------------------------- 1 | .vscode/ 2 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Full stack JavaScript roadmap 2 | 3 | ## Description 4 | 5 | This is a roadmap for becoming a full stack [JavaScript](./frontend/javascript/javascript.md) developer with [React](./frontend/single_page_applications/single_page_applications.md) focus, below you will find some of the most relevant topics for building professional grade web applications at the time of writing this document. 6 | 7 | ### [FAQ](./faq/faq.md) 8 | 9 | ## Topics 10 | 11 | * [Analytics](./analytics/analytics.md) 12 | 13 | * [Backend](./backend/backend.md) 14 | * [Architecture](./backend/architecture/architecture.md) 15 | * [Client validation](./backend/client_validation/client_validation.md) 16 | * [Databases](./backend/databases/databases.md) 17 | * [Message queues](./backend/message_queues/message_queues.md) 18 | * [Node](./backend/node/node.md) 19 | 20 | * [Editors](./editors/editors.md) 21 | 22 | * [Frontend](./frontend/frontend.md) 23 | * [Bundling](./frontend/bundling/bundling.md) 24 | * [Browser](./frontend/browser/browser.md) 25 | * [CSS](./frontend/css/css.md) 26 | * [HTML](./frontend/html/html.md) 27 | * [JavaScript](./frontend/javascript/javascript.md) 28 | * [Resources](./frontend/resources/resources.md) 29 | * [Single page applications (SPA)](./frontend/single_page_applications/single_page_applications.md) 30 | 31 | * [Getting a job](./getting_a_job/getting_a_job.md) 32 | * [Infrastructure](./infrastructure/infrastructure.md) 33 | * [Linting](./linting/linting.md) 34 | * [Logging](./logging/logging.md) 35 | * [Networks](./networks/networks.md) 36 | * [Package management](./package_management/package_management.md) 37 | * [Project workflow](./project_workflow/project_workflow.md) 38 | * [Task runners](./task_runners/task_runners.md) 39 | * [Testing](./testing/testing.md) 40 | * [TypeScript](./typescript/typescript.md) 41 | * [Version control](./version_control/version_control.md) 42 | -------------------------------------------------------------------------------- /analytics/analytics.md: -------------------------------------------------------------------------------- 1 | # Analytics 2 | 3 | ## General 4 | 5 | Analytics is part of almost all enterprise applications and it comes down to the company wanting to know various things about the users using the application. 6 | 7 | The information that is desired can vary but the basics are what device was used, what pages were visited, what buttons were clicked and how long the user stayed before leaving. 8 | 9 | ## Common tools 10 | 11 | * [Google analytics](https://analytics.google.com/analytics/web/) 12 | 13 | ## Useful tools 14 | 15 | The following tools are not used by every company but are very useful if you plan on doing your own metrics tracking. 16 | 17 | * [Prometheus](https://prometheus.io/) 18 | * [Grafana](https://grafana.com/) 19 | 20 | **[back](../README.md)** 21 | -------------------------------------------------------------------------------- /backend/architecture/architecture.md: -------------------------------------------------------------------------------- 1 | # Architecture 2 | 3 | ## General 4 | 5 | Architecture is the essence of all backend development and it is vital for any software developer to have a strong understanding of the most common ways to build professional grade applications. 6 | 7 | This is the main focus area for interview questions related to backend work and with right because this is where good programmers distinguish themselves from the bad ones and where you will spend most of your time. 8 | 9 | ## Common coding principles 10 | 11 | A coding principle is a good rule of thumb to follow when writing code and should be considered basic training. 12 | 13 | The following is a list of popular principles. 14 | 15 | * [Clean code](https://www.amazon.com/Clean-Code-Handbook-Software-Craftsmanship/dp/0132350882) 16 | * [Premature optimization](https://en.wikipedia.org/wiki/Program_optimization#When_to_optimize) 17 | * [Don't repeat yourself (DRY)](https://en.wikipedia.org/wiki/Don%27t_repeat_yourself) 18 | * [SOLID principles](https://en.wikipedia.org/wiki/SOLID) 19 | * [Loose coupling](https://en.wikipedia.org/wiki/Loose_coupling) 20 | 21 | ## Coding styles 22 | 23 | At the time of writing this document [OOP](https://en.wikipedia.org/wiki/Object-oriented_programming) is the most common style of writing software and will likely be the choice style of most projects. 24 | 25 | Mastering at least [OOP](https://en.wikipedia.org/wiki/Object-oriented_programming) should be considered basic training. 26 | 27 | * [Object oriented programming (OOP)](https://en.wikipedia.org/wiki/Object-oriented_programming) 28 | * [Functional programming (FP)](https://en.wikipedia.org/wiki/Functional_programming) 29 | * [Procedural programming](https://en.wikipedia.org/wiki/Procedural_programming) 30 | 31 | ## Common concepts 32 | 33 | The following are common concepts that should be considered basic training. 34 | 35 | * [CRUD](https://en.wikipedia.org/wiki/Create,_read,_update_and_delete) 36 | * [Design patterns](https://en.wikipedia.org/wiki/Software_design_pattern) 37 | * [Model view controller (MVC)](https://en.wikipedia.org/wiki/Model%E2%80%93view%E2%80%93controller) 38 | * [Domain driven design (DDD)](https://en.wikipedia.org/wiki/Domain-driven_design) 39 | 40 | ## System architectures 41 | 42 | The following are common application architectures and understanding [the monolithic application](https://en.wikipedia.org/wiki/Monolithic_application) and [SOA](https://en.wikipedia.org/wiki/Service-oriented_architecture) should be considered basic training. 43 | 44 | * [The monolithic application](https://en.wikipedia.org/wiki/Monolithic_application) 45 | * [Service oriented architecture (SOA)](https://en.wikipedia.org/wiki/Service-oriented_architecture) 46 | * [Microservices](https://en.wikipedia.org/wiki/Microservices) 47 | 48 | ## Network communication patterns 49 | 50 | The following are common network communication patterns, [REST](https://en.wikipedia.org/wiki/Representational_state_transfer) and [RPC](https://en.wikipedia.org/wiki/Remote_procedure_call) should be considered basic training. 51 | 52 | * [Representational State Transfer (REST)](https://en.wikipedia.org/wiki/Representational_state_transfer) 53 | * [Remote procedure call (RPC)](https://en.wikipedia.org/wiki/Remote_procedure_call) 54 | * [GraphQL](https://en.wikipedia.org/wiki/GraphQL) 55 | 56 | **[back](../../README.md)** 57 | -------------------------------------------------------------------------------- /backend/backend.md: -------------------------------------------------------------------------------- 1 | # Backend 2 | 3 | ## General 4 | 5 | Backend is at the time of writing this document the popular term used to refer to application development that takes place on the server part of a web application. 6 | 7 | #### [back](../README.md) -------------------------------------------------------------------------------- /backend/client_validation/client_validation.md: -------------------------------------------------------------------------------- 1 | # Client validation 2 | 3 | ## General 4 | 5 | Client validation is a vital part of almost every enterprise application and should be considered basic training. 6 | 7 | ### Session 8 | 9 | [Sessions](https://en.wikipedia.org/wiki/Session_(computer_science)) are at the time of writing this document the most common way to login a user to a application and allow them access to private pages. 10 | 11 | ### Json web tokens (JWT) 12 | 13 | [JWT](https://en.wikipedia.org/wiki/JSON_Web_Token) is at the time of writing this document a popular way to allow stateless validation for a client connecting to a server. 14 | 15 | ### OAuth 16 | 17 | [OAuth](https://en.wikipedia.org/wiki/OAuth) is at the time of writing this document a popular way to let users provide access to information provided by a provider to a third party application. 18 | 19 | ## Common tools 20 | 21 | * [Express session](https://www.npmjs.com/package/express-session) 22 | * [Passport](http://www.passportjs.org/) 23 | 24 | **[back](../../README.md)** 25 | -------------------------------------------------------------------------------- /backend/databases/databases.md: -------------------------------------------------------------------------------- 1 | # Databases 2 | 3 | ## General 4 | 5 | Databases are a core part of most enterprise applications and understanding them should be considered basic training. 6 | 7 | ## Common databases 8 | 9 | ### Redis 10 | 11 | [Redis](https://redis.io/) is what we call a [in memory database](https://en.wikipedia.org/wiki/In-memory_database) and it is at the time of writing this document one of the most common databases for storing data such as [sessions](https://en.wikipedia.org/wiki/Session_(computer_science)) or other data that can be stored in memory. 12 | 13 | ### MongoDB 14 | 15 | [MongoDB](https://www.mongodb.com/) is at the time of writing this document the most popular [document database](https://en.wikipedia.org/wiki/Document-oriented_database) and is very commonly used as the default database for [Node](../node/node.md) 16 | 17 | ### MySQL 18 | 19 | [MySQL](https://www.mysql.com/) is at the time of writing this document one of the most common [relational databases](https://en.wikipedia.org/wiki/Relational_database) and although not as commonly used for [Node](../node/node.md) development is a lot more common in the industry than most other databases. 20 | 21 | ### PostgreSQL 22 | 23 | [PostgreSQL](https://www.postgresql.org/) is a more modern relational database and also very common in the industry. 24 | 25 | ### Elasticsearch 26 | 27 | [Elasticsearch](https://www.elastic.co/products/elasticsearch) is at the time of writing the most common database used for searching and analytics. 28 | 29 | ## Common tools 30 | 31 | * [ElasticsearchJS](https://www.elastic.co/guide/en/elasticsearch/client/javascript-api/current/index.html) 32 | * [Sequelize](http://docs.sequelizejs.com/) 33 | * [Mongoose](https://mongoosejs.com/) 34 | 35 | **[back](../../README.md)** 36 | -------------------------------------------------------------------------------- /backend/message_queues/message_queues.md: -------------------------------------------------------------------------------- 1 | # Message queues 2 | 3 | ## General 4 | 5 | Message queues are used to send messages between applications usually in a [SOA](https://en.wikipedia.org/wiki/Service-oriented_architecture) and although not part of every application is a common concept in large systems. 6 | 7 | ## Common message queues 8 | 9 | * [RabbitMQ](https://www.rabbitmq.com/) 10 | * [Kafka](https://kafka.apache.org/) 11 | * [ActiveMQ](http://activemq.apache.org/) 12 | 13 | **[back](../../README.md)** 14 | -------------------------------------------------------------------------------- /backend/node/node.md: -------------------------------------------------------------------------------- 1 | # Node 2 | 3 | ## General 4 | 5 | Node is the tool that you will use in order to run [JavaScript](../../frontend/javascript/javascript.md) outside the browser and it is the core technology for doing full stack [JavaScript](../../frontend/javascript/javascript.md). 6 | 7 | ## Common tools 8 | 9 | * [Express](https://expressjs.com/) 10 | * [PM2](http://pm2.keymetrics.io/) 11 | 12 | **[back](../../README.md)** 13 | -------------------------------------------------------------------------------- /editors/editors.md: -------------------------------------------------------------------------------- 1 | # Editors 2 | 3 | ## General 4 | 5 | There are plenty of editors to choose from and they will be your primary tools for writing code so finding one that you like is an important step. 6 | 7 | It is a silly thing but most professionals use the same editors and if you don't want to stand out it is a good idea to pick one that is popular among the professionals, it is not a big deal if you pick something else but it will be something that will be noticed, how it comes off depends on the person making the observation. 8 | 9 | The following editors are very popular at the time of writing this document: 10 | 11 | * [Visual studio code (VSC)](https://code.visualstudio.com/) 12 | * [Atom](https://atom.io/) 13 | * [Sublime text](https://www.sublimetext.com/) 14 | * [Vim](https://www.vim.org/about.php) 15 | 16 | **[back](../README.md)** 17 | -------------------------------------------------------------------------------- /faq/faq.md: -------------------------------------------------------------------------------- 1 | # FAQ 2 | 3 | * [How do I know what tool to pick?](#how-do-I-know-what-tool-to-pick) 4 | * [How well do I have to know the topics?](#how-well-do-I-have-to-know-the-topics) 5 | 6 | **[back](../README.md)** 7 | 8 | ## How do I know what tool to pick 9 | 10 | Unless specified lists of common tools are either fairly equal in relevancy or may vary a lot in popularity in region to region. 11 | 12 | In order to figure out which one is a good choice to invest in consider looking at the [trends](https://trends.google.com) and cross referencing that with the job requirements in the region you want to work in. 13 | 14 | ## How well do I have to know the topics 15 | 16 | It depends on the company and the position you want, some topics you need to have a high level of proficiency in while others only require you to have a working understanding of and which is which is mostly decided by your given situation. 17 | 18 | A good rule of thumb is that core skills you need to know fairly well and remaining topics are useful to have a working understanding of. 19 | 20 | **[back](../README.md)** -------------------------------------------------------------------------------- /frontend/browser/browser.md: -------------------------------------------------------------------------------- 1 | # Browser 2 | 3 | ## General 4 | 5 | The browser is the way users interact with the internet and for frontend developers it is important to pick a browser that you like, you will spend a lot of time working in it. 6 | 7 | The rest of this document will assume that you are using [chrome](https://www.google.com/chrome/). 8 | 9 | ## Developer tools 10 | 11 | Developer tools are provided to you by the browser and you will use them every day. 12 | 13 | You can read more about developer tools [here](https://developers.google.com/web/tools/chrome-devtools/). 14 | 15 | ## Document object model (DOM) 16 | 17 | The DOM is what the browser creates from the [html](../html/html.md) on the page and it is what you use to interact with the browser from [JavaScript](../javascript/javascript.md). 18 | 19 | You can read more about the DOM [here](https://www.w3schools.com/js/js_htmldom.asp). 20 | 21 | ## Cookies 22 | 23 | Cookies are a way for developers to store information in the users browser and they are a vital part of making web applications. 24 | 25 | You can read more about cookies [here](https://www.w3schools.com/js/js_cookies.asp). 26 | 27 | **[back](../../README.md)** 28 | -------------------------------------------------------------------------------- /frontend/bundling/bundling.md: -------------------------------------------------------------------------------- 1 | # Bundling 2 | 3 | ## General 4 | 5 | Bundling allows us to load one [JavaScript](../javascript/javascript.md) file in to another [JavaScript](../javascript/javascript.md) file so we can separate code in to different files. 6 | 7 | Bundling is standard practice for most large projects today and the idea is that instead of loading multiple [JavaScript](../javascript/javascript.md) files or concatenating script files together in order to create a single large file we use tools to do this for us. 8 | 9 | The benefit of this is that we can write large [JavaScript](../javascript/javascript.md) applications without having to keep all the code in one file or manually tracking what code needs to be loaded before other code. 10 | 11 | ## CommonJS 12 | 13 | CommonJS is at the time of writing this document the most common way of loading one [JavaScript](../javascript/javascript.md) file in to another [JavaScript](../javascript/javascript.md) file. 14 | 15 | You can read more about CommonJS [here](http://www.commonjs.org/). 16 | 17 | ## Asynchronous Module Definition (AMD) 18 | 19 | AMD is another common module loading system and you should be aware of it even if it is less common in the industry at the time of writing this document. 20 | 21 | You can read more about AMD [here](https://en.wikipedia.org/wiki/Asynchronous_module_definition). 22 | 23 | ## Webpack 24 | 25 | Webpack is a bundling tool that allows you to build large scale [JavaScript](../javascript/javascript.md) applications and it is at the time of writing this document the best supported and most widely used bundling tool in the industry. 26 | 27 | You can read more about Webpack [here](https://webpack.js.org/). 28 | 29 | ## Common Webpack loaders 30 | 31 | * [Style loader](https://github.com/webpack-contrib/style-loader) 32 | * [Css loader](https://github.com/webpack-contrib/css-loader) 33 | * [Sass loader](https://github.com/webpack-contrib/sass-loader) 34 | * [Postcss loader](https://github.com/postcss/postcss-loader) 35 | * [Babel loader](https://github.com/babel/babel-loader) 36 | 37 | ## Common Webpack plugins 38 | 39 | * [HtmlWebpackPlugin](https://webpack.js.org/plugins/html-webpack-plugin/) 40 | 41 | ## Common Webpack additions 42 | 43 | * [Hot module Replacement (HMR)](https://webpack.js.org/concepts/hot-module-replacement/) 44 | 45 | **[back](../../README.md)** 46 | -------------------------------------------------------------------------------- /frontend/css/css.md: -------------------------------------------------------------------------------- 1 | # CSS - Cascading style sheets 2 | 3 | ## General 4 | 5 | CSS is a core technology of the web and is a must know for everyone who wants to make web applications. 6 | 7 | You can read more about css [here](https://www.w3schools.com/css/css_intro.asp). 8 | 9 | ## Responsive design 10 | 11 | When doing web development responsive design is a standard practice and it means that your layout should look good on any device a user may use to visit your web application. 12 | 13 | You can read more about responsive design [here](https://www.w3schools.com/css/css_rwd_intro.asp). 14 | 15 | ## Architectures 16 | 17 | The following is a list of the main css architectures and you should be aware of them: 18 | 19 | * [BEM](http://getbem.com/introduction/) 20 | * [OOCSS](https://www.smashingmagazine.com/2011/12/an-introduction-to-object-oriented-css-oocss/) 21 | * [SMACSS](https://smacss.com/) 22 | 23 | ## Vendor prefixes 24 | 25 | CSS will behave in different ways in different browser so it is important to understand how to make your styles work in every browser. 26 | 27 | A good starting point is to learn about [vendor prefixes](https://developer.mozilla.org/en-US/docs/Glossary/Vendor_Prefix). 28 | 29 | ## Preprocessing 30 | 31 | Preprocessing css is standard practice for most projects and it allows you to use features that are not part of standard css, the following is a list of the most common preprocessing styles. 32 | 33 | * [Sass](https://sass-lang.com/) 34 | * [Less](http://lesscss.org/) 35 | * [Postcss](https://postcss.org/) 36 | 37 | ## Common frameworks 38 | 39 | The following are some of the most popular css frameworks and you are very likely to come across them when working. 40 | 41 | * [Bootstrap](https://getbootstrap.com/docs/3.3/getting-started/) 42 | * [Foundation](https://foundation.zurb.com/) 43 | 44 | ## Resources 45 | 46 | The following is a list of useful resources to learn more about css. 47 | 48 | * [css-tricks](https://css-tricks.com/snippets/css) 49 | * [codepen](https://codepen.io/search/pens?q=css&page=1&order=popularity&depth=everything&show_forks=false) 50 | 51 | **[back](../../README.md)** -------------------------------------------------------------------------------- /frontend/frontend.md: -------------------------------------------------------------------------------- 1 | # Frontend 2 | 3 | ## General 4 | 5 | Frontend is a term at the time of writing this document that is popularly used to refer to web development focused on the interface of a web application. 6 | 7 | A frontend developer is commonly defined as a programmer with a strong understanding of the following: 8 | 9 | * [Html](./html/html.md) 10 | * [Css](./css/css.md) 11 | * [JavaScript](./javascript/javascript.md) 12 | * [Single page applications](./single_page_applications/single_page_applications.md) 13 | 14 | #### [back](../README.md) 15 | -------------------------------------------------------------------------------- /frontend/html/html.md: -------------------------------------------------------------------------------- 1 | # Html - Hyper text markup language 2 | 3 | ## General 4 | 5 | Html is a core technology of the web and is a must know for everyone who wants to make web applications. 6 | 7 | You can read more about html [here](https://www.w3schools.com/tags/tag_html.asp). 8 | 9 | ## Semantic markup 10 | 11 | Semantic markup means that the tags you use represent their meaning e.g you write `` and not ``. 12 | 13 | You can read more about semantic markup [here](https://html.com/semantic-markup). 14 | 15 | **[back](../../README.md)** -------------------------------------------------------------------------------- /frontend/javascript/javascript.md: -------------------------------------------------------------------------------- 1 | # JavaScript 2 | 3 | ## General 4 | 5 | JavaScript is a core technology for a frontend developer and it is at the time of writing this document the world most popular programming language. 6 | 7 | It is used in the browser to do everything from changing the document, animating elements, tracking users, fetching data from the server and the list goes on. 8 | 9 | With technology like [Node](../../backend/node/node.md) JavaScript is used to build the [backend](../../backend/backend.md) part of a web application. 10 | 11 | With technology like [Electron](https://electronjs.org/) it is possible to build desktop applications with JavaScript, at the time of writing this document this is not a common practice in the industry but very high end applications like [Slack](https://slack.com/) and [Visual studio code](https://code.visualstudio.com/) are made with it. 12 | 13 | Frameworks like [React native](https://facebook.github.io/react-native/) allow you to build mobile applications with JavaScript as well and the framework has at the time of writing this document reach a fair amount of popularity. 14 | 15 | You can read more about JavaScript [here](https://developer.mozilla.org/en-US/docs/Web/JavaScript). 16 | 17 | ## Asynchronous JavaScript And XML (Ajax) 18 | 19 | Asynchronous JavaScript And XML is a collective name to call out to the network from JavaScript and it is a core concept every frontend developer needs to understand. 20 | 21 | You can read more about Ajax [here](https://en.wikipedia.org/wiki/Ajax_(programming)). 22 | 23 | ## Common libraries 24 | 25 | * [Lodash](https://lodash.com/) 26 | * [Underscore](https://underscorejs.org/) 27 | * [Jquery](https://jquery.com/) 28 | 29 | **[back](../../README.md)** 30 | -------------------------------------------------------------------------------- /frontend/resources/resources.md: -------------------------------------------------------------------------------- 1 | # Resources 2 | 3 | The following resources are very important to a frontend developer: 4 | 5 | * [caniuse](https://caniuse.com/) 6 | * [MDN](https://developer.mozilla.org) 7 | * [w3schools](https://www.w3schools.com) 8 | 9 | **[back](../../README.md)** -------------------------------------------------------------------------------- /frontend/single_page_applications/single_page_applications.md: -------------------------------------------------------------------------------- 1 | # Single page applications 2 | 3 | ## General 4 | 5 | Single page applications or SPA's are at the time of writing this document one of the most in demand web application types and the basic idea behind the application style is to make a web application feel like a native application. 6 | 7 | You can read more about SPA's [here](https://en.wikipedia.org/wiki/Single-page_application). 8 | 9 | ## React 10 | 11 | React is at the time of writing this document the most in demand SPA framework and although it is not the only one it is by far the most developed and well established. 12 | 13 | You can read more about React [here](https://reactjs.org/). 14 | 15 | ## Core React concepts 16 | 17 | The following is a list of the most core concepts for React development and you are likely to find each of these in most projects. 18 | 19 | * [React router](https://reacttraining.com/react-router/) 20 | * [Redux](https://redux.js.org/) 21 | * [React redux](https://redux.js.org/basics/usagewithreact) 22 | * [Babel](https://babeljs.io/) 23 | 24 | **[back](../../README.md)** 25 | -------------------------------------------------------------------------------- /getting_a_job/getting_a_job.md: -------------------------------------------------------------------------------- 1 | # Getting a job 2 | 3 | ## General 4 | 5 | Going through a interview process as a professional developer has at the time of writing this document a few common steps that you should be aware of. 6 | 7 | Each process will start with initial contact where your CV is reviewed by a recruiter or a member of the company. 8 | 9 | You will be asked to complete one or several tests to prove that you have the skills you claim and social skills valued by the company. 10 | 11 | You will be asked to perform a personal interview where you have a conversation with a representative of the company. 12 | 13 | If you pass the screening process you will receive a salary offer which you can accept or negotiate. 14 | 15 | Once you have agreed on a starting salary you will be given a employment contract to sign and that concludes the hiring process. 16 | 17 | ## CV 18 | 19 | The CV is your first contact with the company and you should make sure that it looks good and has the relevant information and if you neglect it your are likely to see less interest from recruiters. 20 | 21 | It is very important that you take the time to structure it well. 22 | 23 | ## Networking 24 | 25 | Once your CV is done you should sign up with career networks so that recruiters can find your CV. 26 | 27 | At the time of writing this document [LinkedIn](https://linkedin.com) is the worlds most popular network and you should at the very least have a well made profile on this network. 28 | 29 | It is a good idea to attend events where you will find other professionals so you have a chance to see what's going on in your region and have the chance to introduce yourself to potential employers. 30 | 31 | ## Interviews 32 | 33 | Performing well in a interview comes down to showing the right level of transparency and having good social skills. 34 | 35 | Be honest without damaging your own value in front of the interviewer and don't lie. 36 | 37 | Make sure that you dress appropriate and that you can handle talking to people who are going to make an evaluation of you. 38 | 39 | Interviews are meant to give you and the employer a chance to ask questions of each other and it is a good idea to have your own questions for the interviewer as this shows that you are interested in the work the company does. 40 | 41 | By the end of the interview you want to leave the interviewer with one specific feeling and that is "I think this person would fit in well here". 42 | 43 | ## Code tests 44 | 45 | Code tests and the way they are performed will vary from company to company. 46 | 47 | Some companies will send you online tests, some will send you a project repository that you are expected to clone and some will ask you to perform a live code test at the company. 48 | 49 | The complexity and nature of the tests vary and the time you have to complete them also vary. 50 | 51 | It is worth noting that completing a test is not always the real objective and you should always focus on getting the code working instead of finding a perfect solution. 52 | 53 | It is not uncommon that a interviewer wants to see what your process for solving the problem is and how well you can reason about what went well and what could be improved. 54 | 55 | Remember that you have no idea what the interviewer is testing so don't assume that you do and simply do what you can to solve the problem within the time you have. 56 | 57 | ## Fitting in at work 58 | 59 | Once you have the job you are going to be part of a so called on boarding period which is the process the company has in place to help a new employee get productive. 60 | 61 | The quality of this process may vary but at the very least you have a timeframe in which it is considered ok for you to not have the answer to your stakeholders questions so use this time wisely and ask for help when you need it. 62 | 63 | The best investments you can make is to be pragmatic about the code at the company, no codebase is perfect and it is always more important to get code that does the job on time than it is to have code that is perfect too late. 64 | 65 | In order for you to increase your value in the company your focus should be to learn the companies system as well as you can, the company doesn't care if you can solve other companies problems or how many other tools you know, they care that you know their system inside and out so you can answer stakeholder questions and make their system the best that it can be give the restrictions it has. 66 | 67 | As a new employee it is important to have the right attitude at work and to understand that you need to adjust to the environment you are in, what you used to do at your last company can be good to mention but you are not going to stay hired for very long if you belittle or ridicule your current company and the processes that you use. 68 | 69 | Come with your own suggestions but be flexible and feel the room, some ideas you have will be appreciated and some will not. 70 | 71 | Do the best with what you have and remember that everything will train you. 72 | 73 | **[back](../README.md)** 74 | -------------------------------------------------------------------------------- /infrastructure/infrastructure.md: -------------------------------------------------------------------------------- 1 | # Infrastructure 2 | 3 | ## General 4 | 5 | Infrastructure or at the time of writing this document "operations" is the work that is related to managing a deployed system. 6 | 7 | This is the area where application monitoring, network configuration and application deployment among other things are managed. 8 | 9 | This area is very big and large companies usually hire staff that focus only on operations but it is not uncommon to find that a basic understanding of operations related work is needed for developers. 10 | 11 | ## DevOps 12 | 13 | DevOps is at the time of writing a company culture where the fundamental idea is that the development team responsible for feature delivery is also in charge of maintaining the running system. 14 | 15 | You can read more about DevOps [here](https://en.wikipedia.org/wiki/DevOps). 16 | 17 | ## Containers 18 | 19 | At the time of writing this document container based application deployment is one of the most common strategies for deploying a application. 20 | 21 | Below you will find the most common tools for this deployment strategy. 22 | 23 | * [Docker](https://www.docker.com/get-started) 24 | * [Docker compose](https://docs.docker.com/compose/) 25 | * [Kubernetes](https://kubernetes.io/) 26 | 27 | ## Cloud providers 28 | 29 | At the time of writing this document using cloud providers to host your application is a common strategy for making applications of varying sizes available without the need to maintain your own hardware. 30 | 31 | Below are the most common cloud-providers for large scale systems. 32 | 33 | * [Amazon web service (AWS)](https://aws.amazon.com/) 34 | * [Google cloud platform (GCP)](https://cloud.google.com/) 35 | * [Microsoft Azure](https://azure.microsoft.com/en-us/) 36 | 37 | ## Environment provisioning 38 | 39 | At the time of writing this document it is common that companies use a deployment framework that contains a suite of tools that allow for provisioning [virtual machine instances](https://en.wikipedia.org/wiki/Virtual_machine) in their system. 40 | 41 | It is worth to note that at the time of writing this document companies favor either container based solutions or one of the following frameworks but it is less common that both solutions have an equal focus in the same company. 42 | 43 | * [Chef](https://www.chef.io) 44 | * [Puppet](https://puppet.com/) 45 | * [Ansible](https://www.ansible.com/) 46 | * [Salt](http://saltstack.com/) 47 | 48 | ## Useful tools 49 | 50 | Below are at the time of writing this document a few common tools for infrastructure related work. 51 | 52 | * [Terraform](https://www.terraform.io/) 53 | 54 | **[back](../README.md)** 55 | -------------------------------------------------------------------------------- /linting/linting.md: -------------------------------------------------------------------------------- 1 | # Linting 2 | 3 | ## General 4 | 5 | Linting is the process of alerting programmers of "lint" in the code which just means that there is a certain style the code should be written in and if you are writing it in some other way a linting tool will highlight how you should write it to stay consistent with how other programmers are writing code on the project you are working on. 6 | 7 | The goal of this process is to write code that looks the same across the entire project. 8 | 9 | All big projects are likely using a linter tool. 10 | 11 | At the time of writing this document the following linters are very common: 12 | 13 | * [Stylelint](https://stylelint.io/) 14 | * [Eslint](https://eslint.org) 15 | 16 | **[back](../README.md)** 17 | -------------------------------------------------------------------------------- /logging/logging.md: -------------------------------------------------------------------------------- 1 | # Logging 2 | 3 | ## General 4 | 5 | As a system is running it is important to gather logging information for tasks the are executed or errors that may occur and having a basic understanding of logging should be considered basic training. 6 | 7 | ## Log levels 8 | 9 | Log levels are a set of common labels given to logs to indicate the type of event that has taken place. 10 | 11 | You can read more about log levels [here](https://blog.scalyr.com/2017/12/logging-levels/). 12 | 13 | ## Common logging tools 14 | 15 | * [Bunyan](https://github.com/trentm/node-bunyan) 16 | * [Winston](https://github.com/winstonjs/winston#readme) 17 | 18 | **[back](../README.md)** 19 | -------------------------------------------------------------------------------- /networks/networks.md: -------------------------------------------------------------------------------- 1 | # Networks 2 | 3 | ## General 4 | 5 | Networks are a big topic and is the fundamental building blocks of how the web works. 6 | 7 | The following should be considered basic training. 8 | 9 | * [Domain name system (DNS)](https://en.wikipedia.org/wiki/Domain_Name_System) 10 | * [Ip address](https://en.wikipedia.org/wiki/IP_address) 11 | * [Ports](https://en.wikipedia.org/wiki/Port_(computer_networking)) 12 | * [Host](https://en.wikipedia.org/wiki/Host_(network)) 13 | * [Domain name](https://en.wikipedia.org/wiki/Domain_name) 14 | * [Subdomain](https://en.wikipedia.org/wiki/Subdomain) 15 | * [Url](https://en.wikipedia.org/wiki/URL) 16 | * [Http](https://en.wikipedia.org/wiki/Hypertext_Transfer_Protocol) 17 | * [Https](https://en.wikipedia.org/wiki/HTTPS) 18 | * [TLS](https://en.wikipedia.org/wiki/Transport_Layer_Security) 19 | * [Http headers](https://en.wikipedia.org/wiki/List_of_HTTP_header_fields) 20 | * [Http status codes](https://en.wikipedia.org/wiki/List_of_HTTP_status_codes) 21 | * [Json](https://en.wikipedia.org/wiki/JSON) 22 | * [Xml](https://en.wikipedia.org/wiki/XML) 23 | 24 | **[back](../README.md)** -------------------------------------------------------------------------------- /package_management/package_management.md: -------------------------------------------------------------------------------- 1 | # Package management 2 | 3 | ## General 4 | 5 | Package managers are tools that allow you to download and include code from other developer to your own project and it is standard practice in almost every project. 6 | 7 | At the time of writing this document the most popular package managers are: 8 | 9 | * [Npm](https://npmjs.com) 10 | * [Yarn](https://yarnpkg.com/en/) 11 | 12 | **[back](../README.md)** 13 | -------------------------------------------------------------------------------- /project_workflow/project_workflow.md: -------------------------------------------------------------------------------- 1 | # Project workflow 2 | 3 | ## General 4 | 5 | When working on a large project you will have to find a way to coordinate the work effort so each person contributing to the delivery has a system of rules to follow that makes it possible to have multiple people working together at the same time. 6 | 7 | ## Agile development 8 | 9 | At the time of writing this document agile development is the main work process for most companies. 10 | 11 | You can read more about agile development [here](https://en.wikipedia.org/wiki/Agile_software_development). 12 | 13 | ## Common agile development styles 14 | 15 | * [Scrum](https://en.wikipedia.org/wiki/Scrum_(software_development)) 16 | * [Kanban](https://en.wikipedia.org/wiki/Kanban_(development)) 17 | 18 | ## Waterfall development 19 | 20 | At the time of writing this document the waterfall method is a bit outdated but the concepts in the method can still be found in many companies. 21 | 22 | You can read more about waterfall development [here](https://en.wikipedia.org/wiki/Waterfall_model). 23 | 24 | ## Continuous integration (CI) 25 | 26 | Continuous integration or CI is the process of having a delivery strategy that allows developers to deploy code on a frequent basis. 27 | 28 | You can read more about CI [here](https://en.wikipedia.org/wiki/Continuous_integration). 29 | 30 | ## Common project tools 31 | 32 | At the time of writing this document the following tools are very common to find in IT companies. 33 | 34 | * [Jenkins](https://jenkins.io/) 35 | * [Gitlab](https://about.gitlab.com/) 36 | * [Jira](https://jira.atlassian.com/) 37 | 38 | **[back](../README.md)** 39 | -------------------------------------------------------------------------------- /task_runners/task_runners.md: -------------------------------------------------------------------------------- 1 | # Task runners 2 | 3 | ## General 4 | 5 | Task runners are tools that will let you create commands for common tasks like copying files, running tests, removing old files or start the server. 6 | 7 | It is very common that a big project has a task-runner or at the very least uses [npm scripts](https://docs.npmjs.com/misc/scripts) to run tasks. 8 | 9 | The following task runners are at the time of writing this document the most common: 10 | 11 | * [Gulp](https://gulpjs.com/) 12 | * [Grunt](https://gruntjs.com/) 13 | 14 | **[back](../README.md)** -------------------------------------------------------------------------------- /testing/testing.md: -------------------------------------------------------------------------------- 1 | # Testing 2 | 3 | ## General 4 | 5 | Testing applications is a daily task for professional grade software developers and should be considered basic training. 6 | 7 | ## Manual testing 8 | 9 | Manual testing is the process of using the feature that is under development and in order to do this in a modern web application you will need to know the browsers your company is supporting and the oldest version of that browser, each of these browsers should be part of your testing process if you are testing a user facing interface. 10 | 11 | It is not uncommon that you will need to test on a range of devices as well. 12 | 13 | You can read more about manual testing [here](https://en.wikipedia.org/wiki/Manual_testing). 14 | 15 | ## Regression testing 16 | 17 | It is often a risk that a new feature being created will cause another part of the system to stop working correctly and the process of testing a new feature should always be followed by a regression test where you verify that you didn't break something that used to work correctly. 18 | 19 | You can read more about regression testing [here](https://en.wikipedia.org/wiki/Regression_testing). 20 | 21 | ## Unit testing 22 | 23 | Unit testing is the process of writing a test for a function in your code so you can verify that the function behaves as you expect. 24 | 25 | You can read more about unit testing [here](https://en.wikipedia.org/wiki/Unit_testing). 26 | 27 | ## Test driven development (TDD) 28 | 29 | TDD is a work process where you start by writing your test before you write your function and once the test is failing you write the logic that is needed to make the test pass. 30 | 31 | You can read more about TDD [here](https://en.wikipedia.org/wiki/Test-driven_development). 32 | 33 | ## Integration testing 34 | 35 | Integration testing is the process of testing a module of features or a flow of features e.g making a network call to the server and verifying that the correct functions are called. 36 | 37 | You can read more about integration test [here](https://en.wikipedia.org/wiki/Integration_testing). 38 | 39 | ## Common testing libraries 40 | 41 | * [Jest](https://jestjs.io/) 42 | * [Mocha](https://mochajs.org/) 43 | * [Sinon](https://sinonjs.org/) 44 | * [Chai](https://www.chaijs.com/) 45 | * [Enzyme](https://airbnb.io/enzyme/) 46 | 47 | ## Test automation 48 | 49 | Test automation is the process of creating automated tests that verify that your system works. 50 | 51 | At the time of writing this document this is a popular way to describe a automated test that interacts with the application as if a user was using it. 52 | 53 | You can read more about test automation [here](https://en.wikipedia.org/wiki/Test_automation). 54 | 55 | ## Test automation tools 56 | 57 | At the time of writing this document the following tools are useful to creating automated tests in [Node](../backend/node/node.md). 58 | 59 | * [Cypress](https://www.cypress.io/) 60 | * [Puppeteer](https://pptr.dev/) 61 | 62 | ## Behavior driven development (BDD) 63 | 64 | BDD is the process of describing the desired behavior of a feature and implementing a automated test that can be used to verify when the feature has been completed. 65 | 66 | This style of working is not as common in the industry but very effective for large application development. 67 | 68 | You can read more about BDD [here](https://en.wikipedia.org/wiki/Behavior-driven_development). 69 | 70 | ## Useful BDD tools 71 | 72 | * [CucumberJS](https://cucumber.io/) 73 | * [Puppeteer](https://pptr.dev/) 74 | 75 | ## A/B testing 76 | 77 | A/B testing is the process of creating a variant of a feature and only releasing it to a portion of the users who are using the application. 78 | 79 | This is very common in large companies when the company wants to know if a new feature improvement will produce a better result than an already existing feature. 80 | 81 | You can read more about A/B testing [here](https://en.wikipedia.org/wiki/A/B_testing). 82 | 83 | **[back](../README.md)** 84 | -------------------------------------------------------------------------------- /typescript/typescript.md: -------------------------------------------------------------------------------- 1 | # TypeScript 2 | 3 | ## General 4 | 5 | TypeScript is a language built on top of [JavaScript](../frontend/javascript/javascript.md) and although it is not used for every project using it becomes one of the best strategies to maintain a large [JavaScript](../frontend/javascript/javascript.md) codebase so if you are looking for a way to increase the scalability of your project this should be the next step. 6 | 7 | A good rule of thumb is to use TypeScript for enterprise level projects. 8 | 9 | ## Useful tools 10 | 11 | * [TSLint](https://palantir.github.io/tslint/) 12 | * [ts-loader](https://webpack.js.org/guides/typescript/) 13 | 14 | **[back](../README.md)** -------------------------------------------------------------------------------- /version_control/version_control.md: -------------------------------------------------------------------------------- 1 | # Version control 2 | 3 | ## General 4 | 5 | Version control is standard practice in almost every project in programming and it by this way of working you are able to create saves for each change you make to your code so you have the ability to see a history of the changes you have made. 6 | 7 | At the time of writing this document the most popular version control system is [Git](https://git-scm.com/) 8 | 9 | It is worth mentioning that you may encounter the following version control systems but they are not as common. 10 | 11 | * [Mercurial](https://www.mercurial-scm.org/) 12 | * [Subversion](https://subversion.apache.org/) 13 | 14 | ## Gitflow 15 | 16 | [Gitflow](https://www.atlassian.com/git/tutorials/comparing-workflows/gitflow-workflow) is at the time of writing this document the version control work process most companies borrow concepts from for their own process, not everyone follows the method 100% but rather use the core concepts with their own deviations. 17 | 18 | ## Code repositories 19 | 20 | At the time of writing this document some of the most common hosting services for version controlled projects are: 21 | 22 | * [Github](https://github.com/) 23 | * [Bitbucket](https://bitbucket.org) 24 | 25 | **[back](../README.md)** 26 | --------------------------------------------------------------------------------