The Path to Becoming a Front End Developer in 2019

A bit of my own foreshadowing

This article focuses more on the front end of the approach, for those who hesitate to start do not know how to start the front of the small friends a little tips.

It can also be regarded as my own in the gap period before graduation for myself to find something to do for recreation, incidentally review my English, but also to see what others are doing and thinking what, many mistakes and far-fetched translation, forgive me, don’t hesitate to give advice.

Some links in this article may require ladders.

matting

As 2019 kicks off, New Year’s resolutions are once again flooding in, as usual.

Lose weight, eat healthier, get an offer from a front-end developer.

Look, it’s not much, it’s easy, it’s not so hard.

I’m kidding, of course. These big life goals are never that easy to say. You may not think it’s hard to go to the gym once a day, have a salad for lunch, and go home every night to code, but evaluate objectively how hard it is to actually do these things every day from your own experience.

Results never come as quickly as we expect. Day in and day out, you’ll see how demanding it is. No, sometimes it’s even hard.

However, if we want to achieve some results on our goals, daily effort will accelerate the progress. The most important decision then becomes what to focus on. What are the key skills you need to master, and in what order do you tackle them?

I’ll try to give you some ideas and a concrete plan of action.

Learning is a jigsaw puzzle

It’s more likely that you’ll start at the corners and edges and work your way up. In short, start in the way you know for sure.

Along the way, you’ll find that you now have a handful of puzzle pieces that fit into a small piece of the puzzle, maybe two, maybe three, maybe five. You don’t know where to put this part, and you may find it later in the puzzle.

This is how learning web development works.

You’re constantly collecting bits and pieces of knowledge, some of which you probably use every day and some of which you rarely use (but if you know it, it’ll come in handy one day, say, when your server crashes at 2 a.m., and you remember using grep once, You can easily use this command to search the server logs to find the problem. These are all large pieces of the web development puzzle.

Disassembly learning

At any time, you can break down the topic you want to learn into the smallest possible pieces, individual techniques.

If there is a trick to learning Web development, it is the ability to look at a problem or project not as an indivisible entity, but as a set of techniques that can be broken down and then put together.

Stack React application: Break it up

For example, let’s say you want to learn how to build a production-grade app based on the React suite of technologies to develop for yourself or your boss.

There are many parts to such an app.

On the front end, JavaScript will most likely be used. React will probably involve Redux or MobX. You may also need to configure Webpack, which will definitely use JSX, or CSS or Sass, or even CSS-in-JS. It might also involve sending HTTP requests via FETCH or AXIos, or it might use GraphQL.

The back-end might use Node + Express or Ruby on Rails, Elixir, Phoenix, etc. The backend may also interact with a database, either a relational database PostgreSQL or MySQL, or a non-relational database MongoDB.

All of these techniques mentioned above are too many to learn at the same time. If you treat it as a big project, when you are ready to learn it, you will find that it is a mess in your mind, and it is even more difficult to remember the direction of each knowledge point, can not help but wonder who I am, where I am, why I want to learn the front end. Even if you just try to separate out the front end, that’s a lot of work.

So, ask yourself, can I segment it by technology? Can I learn one technique at a time?

Learn each of these skills separately

Can you learn JavaScript alone? Sure, there’s the great You Don’t Know JS series (free online) and many other resources to use.

Can you learn React alone? (The author recommends his own book.) Based on my personal learning experience, I prefer the React website and ReactJS small books.

JSX looks a lot like HTML, so it’s relatively easy to understand how HTML works before learning React+JSX.

You can write an app that doesn’t look pretty without touching CSS at all, so you can definitely learn React without knowing CSS, and vice versa. Similarly, csS-in-JS libraries such as Styled – Components can also be styled after mastering CSS.

Redux is a React plugin. Once you know React, take a look at how Redux works.

If you find Redux a bit difficult, check out the React Context API built into React. It also solves many of the problems Redux can solve. I also wrote a tutorial on React Context for State Management.

The Webpack configuration is independent of the React app you want to build, so you can use the Create React App until you know what Webpack is.

Regardless of whether your external data comes from a REST API or GraphQL, that’s another story. If you want to understand how React works, you can start with static data instead. Open DevTools in your browser, go to the Network TAB, select an HTTP request, view the data in response, and copy the JSON data of the interface response into a variable. How to get data asynchronously can be learned later.

The back-end part can be disassembled in the same way.

Always be suspicious of projects that are perceived as having to be studied or built as a whole. To see if we can take it apart, strip it out of each individual part or level. Learn everything you can at the moment. Even if you have a hard time doing this, remember: Peel off as much as you can.

A learning program for Web development

All that said, you can’t learn to swim standing on shore.

I want to make a suggestion here to be as linear as possible. Keep the habit of “learning in time” at all times.

It’s great to read blogs and watch tutorials when you learn something new, but without practice, your brain won’t retain it for long. If you don’t have an exercise, design one yourself. I have some ideas for design practice projects for you to look at.

For each of the techniques and terms mentioned in this article that you don’t understand, learn just how to solve your problem, and then move on.

You don’t need to know every SINGLE HTML element, CSS selector, JS feature, or command-line tool, otherwise what’s the point of sites like Google and Stack Overflow? Even those of us who have been doing this for years are surprised when we suddenly learn something very basic. (That’s when I learned that there was an HTML element called

, oh my God).

Master some command lines

Many times, the first step to getting started with a project is to clone it locally from the GitHub repository, or to create a new project using the create-react-app command. Then you need to run NPM or YARN to install the dependencies, while guiding you to create your project on the file system.

Knowing a little bit about the command line can help you avoid feeling like you’re typing magic commands in a magic box.

You don’t have to be crazy about this, but it pays to understand the basics of booting file systems, displaying files, and the like. Read Learn Enough Command Line to Be Dangerous and The Shell Introduction I Wish I Had.

Use Git for version control

Imagine a scenario where you know your code has a minor problem, but it works fine now, and then you make a minor change to one of your code and it crashes for no reason.

You undo the changes, but the program still doesn’t start, what’s wrong?

This is the true worst-case scenario.

Version control solves this problem, and I’m sorry I didn’t learn it sooner (I wish people would see it as a good thing and not a chore, because the benefits are so great, and Git makes it so much easier).

This Parable, The Git Parable, is a story that explains how Git works. The article is worth a read, and I bet that even if you know a little about Git commands, you’ll learn something new.

Git is just one of many version control systems, but it is currently unrivaled in the field, popularized by GitHub.

Interestingly, Git and GitHub are not the same thing. GitHub provides a hosting service for Git repositories, but Git has been around since long before GitHub came along and can run independently. You can use Git to manage native code even when you are not connected to a network, which is one of the reasons why Git 🐂🍺.

So once you’ve learned a little bit about the command line, go ahead and install Git so that whenever you want to create a project directory, you can use these commands:

git init .
git add .
git commit -m "Initial commit"
Copy the code

Commit your code every time it is running properly, or before committing a change that might crash the program:

git add .
git commit -m "Saving this before I break it."
Copy the code

Each submission is equivalent to a checkpoint. You can jump back to any previously committed version in time (back to when your code was working). One small problem is that all of this is stored locally on your computer, so if your computer gets burned in a fire, there’s nothing left. So, GitHub is here to stay.

Learn Enough Git to Be Dangerous if you want to Learn more about Git, such as how to retrieve a previously committed version to restore your code, or how to push code to GitHub. The tutorial isn’t long, and at the end of the lesson you can build a web page that will be deployed on Github Pages. This is another sandbox…

Web language

When building Web applications, HTML, CSS, and JavaScript are pretty much all you need.

You can write HTML without any CSS and JS, but you can’t do much with CSS without HTML. So learn a little HTML before you learn CSS.

JavaScript can be added to HTML documents, you can write interactive apps… You can even use NodeJS outside of the browser to do a lot of interesting things, like developing servers, creating command-line apps, controlling iot devices, or doing machine learning.

Which one looks more interesting? Implement something in the browser? Or do some separate exercises in the Node environment to learn JS? It depends on your personal goals and preferences.

If you want to move forward in development, I would recommend that you start by writing JS from the browser, starting with MDN, forget React, Webpack, etc., etc. I don’t need to worry about it at this stage.

Remember, the most important thing here is that you don’t have to master every single skill, just that you feel comfortable enough to handle the next one.

I’ll probably get criticized for saying the following, but I don’t think you need to know regular JS and DOM before you can learn technologies like React, of course, if you just want to use frameworks. I do think it’s good to have a little practice and practice with normal JS and DOM, knowing that they exist and knowing where to look for details of their use (e.g. MDN) when you need them.

Learn to Debug

Debug is a skill that can be learned. Fortunately, if you’re like me or most others just getting started, you’ll encounter a lot of bugs to fix.

Of course, the easiest way is to copy and paste the error message into Google.

Although there are times when Google can’t help you, maybe the error is only in your code, such as a syntax error.

There are also cases where Google gives you irrelevant results, which means there’s a good chance you’ve made a simple or even silly mistake. For example, “I forgot to save the file” or “I forgot to restart the service”.

Once, I encountered an editor error in some versions of Eclipse where the Save function didn’t work.

I changed file, the title bar shows the AbstractFactoryObserverPatternImpl. Java * (asterisk represent files have changed), I the point lead save, also almost broke the Ctrl + S keys, but the asterisk are all the time. I thought it might be a UI bug, so I opened the file using Vim and confirmed that there was no change in the file.

This tells us 1) absurdity, text editors basically only have two functions, edit text and save text, and you still have one function that doesn’t work well… 2) Ring the alarm bell and be skeptical of everything, even the most unlikely factors.

So, the next time you’re faced with a strange problem, take it apart, consider multiple aspects, list every hypothesis to check, and brainstorm every possible cause of failure.

For example, if you change the code and nothing happens, you might consider:

  • Did that piece of code you modified work at all? Can you add aconsole.logFunction to print it out, okay?
  • Is the auto-build feature running? (If you built it manually, did you run it?)
  • If the code is part of a running server, have you ever restarted the service?
  • Is the service you started the one you want to change?
  • Did you change the file correctly?
  • Are you changing the project you are currently testing? You may have copied the project code and called it myproject-7, but your editor does open myProject-6. Ding, this reminds us how important Git is.
  • Did the file really change? Does your editor’s save function work?

After you’ve asked yourself all of the above questions, you’ve checked everything out, ruled out every possible factor and still haven’t solved the problem, it’s time to reboot something without having to turn to anything or anyone else.

You will start to see problems and solutions in higher resolution. No more generic “application hung”, but “server threw an exception while preparing some data”, or “JS code failed to parse JSON causing application to stop running”

Learn how the Web works

In general, understanding how the Web works will help you along the way. The big picture stored in your head is a huge help when you’re developing and debugging.

To learn when you enter the URL in your browser and hit return after what happened, in fact, in the place where you can’t see there are many links in together, most of them also have something wrong, if you understand the every step of the process, you will be able to diagnose the server hang up, or the DNS entry is wrong, or the server no problem. But the web service has a problem, or the adblocker adblocker is preventing your icon font from loading, and all the other weird things that can happen.

Developer tools can be a great help in learning how the Web works. Open DevTools in your browser, look at the Network TAB, refresh the page, and pick out the failed requests from all the incoming requests and click in to see the data it returns. By the way, this is great for discovering and working with interfaces that have no documentation.

Learn a framework

React is a popular framework right now, and the job market is friendly to React developers, thanks to a plethora of great online learning resources.

The official React tutorial is also perfect for getting started. The tutorial is written in a very friendly way, from installing setup to building a usable React app. I also put together a free 5-day tutorial on React to learn the basics of React. If you want to learn React in more depth, you can refer to my Pure React tutorial, which has lots of exercises and examples to reinforce React.

If you’ve tried React and don’t like it, try vue.js. Vue is an alternative to React and is also popular with many developers.

Let’s start today

If learning Web development is one of your goals this year, I suggest you start now. Looking, fantasizing, and hoping won’t get you closer to your goals. Reaching out and typing code is the way to go.

Even though this article can’t cover every aspect of learning Web development and doesn’t suggest a learning path for developers with different starting points, I hope it gives you some direction on your web development journey. If this article has been helpful to you, or if you’ve done something special that has helped you move forward, feel free to leave a comment.