How to Aim for the Front End

One caveat first.

What I have written in this article is my personal opinion.

It’s not a sure thing with the information you get here.

Ask a lot of people, look at different places, and decide what you want to achieve.

The role of a front-end engineer.

The role of a front-end engineer varies quite a bit depending on where you work.

With that in mind, let’s make a list.

• Coding (HTML, CSS, JavaScript)
• Customizing and building a CMS
• Fetching data from APIs and databases for customization
• Building a front-end development environment
• Tuning Page Performance
• UI/UX Design

What you need to know to get to the next level

Now, let’s take a look at what exactly you need to do to achieve this goal.

The keywords to search for are listed at the end of the section.

Markup with HTML and CSS

Front-end engineers, of course, also use HTML and CSS to code.

They say it’s easy, but it takes a very deep knowledge to mark up semantically.

Don’t forget about SEO as well, since websites are more effective when someone sees them.

In the workplace, we follow the coding rules that have been set and do the coding smoothly and strictly, so remember CSS design as well, which may help you to understand the essence of the coding rules.

CSS frameworks include Bootstrap4 and Bulma, but let’s focus on learning how they’re organized rather than mastering the frameworks.

• Semantic HTML
• SEO Strategy
• CSS Design
• CSS Framework

Making a Page in Motion with JS

Recently, Vue/React is very popular and I sometimes hear people say they don’t use jQuery because it’s old, but I think I’ll still use jQuery.

It would be a good idea to learn JQuery and Vue or React.

Vue, React, and Angular are often likened to Pokémon when you can choose the first one.

What I also found important is to have a proper understanding of pure JavaScript.

You may be using Vue, React, etc., but what’s actually working is JavaScirpt.

Make sure you have a solid understanding of ES6 notation so that you can develop smoothly.

• jQuery
• Vue
• React
• ES6 JavaScript

Using Browser Developer Tools.

The browser comes with tools for web developers.

It is an essential tool for debugging and testing, so you should learn how to use it.

Let’s get familiar with the browser.

• Developer Tool
• Lighthouse

Understanding the Basics of Linux Commands

When building a development environment, technology to work with the CUI, such as a terminal or command prompt, is essential.

If you stumble over something as basic as building JavaScript or navigating to the current directory of a project, you’ll lose track of what you’re doing.

The CUI also uses Git, npm, and yarn, which I’ll discuss later in this article.

• CUI
• Linux commands

Using CSS meta-languages such as SASS and Less

I think the biggest advantage of the CSS meta language is the ability to import external files.

This allows you to use SCSS files for each part, and to include the CSS framework and resetting CSS in the same file.

There are other functions that are very useful to learn, such as for to reduce the amount of text you need to write, and functions that allow you to adjust the brightness of colors.

• CSS meta-language
• SASS
• SCSS notation
• Stylus

Use npm and yarn to manage packages

npm is the Node Package Manager

As the name suggests, it manages packages built in Node. The package.json contains information about the packages installed by npm.

package.json contains information about the packages you install with npm.

In package.json, you can register the npm scirpt and add the commands you want to use to You can register it, name it and run it on npm.

Webpack and Gulp (discussed below) will also be managed here.

• Node
• npm
• yarn
• Package Management
• npm scripts

Building a Development Environment with Webpack, Gulp, etc.

The front-end development environment is evolving rapidly over time.

You can compile SASS, monitor your JavaScirpt and CSS files and reload the browser for changes, and much more.

These days, more and more people are using Webpack for fine-tuning and complex processing.

Webpack and Gulp require you to create a configuration file in order to use it, but I won’t tell you how to write it.

If you want to try building SASS easily, there is also a build tool called Parcel, which you can use without creating a configuration file. It can be used without creating a configuration file.

• Webpack
• Gulp
• Parcel

ESLint and Prettier to make your code easier to read

ESLint is a Linter for JavaScirpt.

It allows you to create validation rules and issue errors and alerts when there are obvious bugs or badly written code.

This allows you to make adjustments to ensure that your code is rigorous.

Linter also has other tools such as StyleLint and MarkupLint.

Prettir is a code formatter.

When writing code as a team, if you write out code for each person, it can get confusing and confusing.

To prevent this from happening, Prettir works by parsing your code and transforming it into a rule-based writing style.

Make the most of Linter and the code formatter for strict and beautiful coding.

• Linter
• code formatter
• ESLint
• Prettier

Version Control with Git

Git is an efficient system for managing your source code.

It eliminates the problem of accidentally deleting source code but not having a backup, or overwriting it but not knowing what you’ve overwritten.

Use GitHub, Backlog, etc. to make sure you can develop with your team.

It’s often misunderstood by some that GitHub is a service that hosts source code and supports team development, but it’s not the same thing as Git.

• Git
• GitHub
• Backlog
• Source code version control

Get to know about UI and UX

What would you think if the Yes and No buttons were both the same color?

No matter how great your website is, if your UI is bad, your UX will go down and users will leave.

Add animations to slow-loading pages to show that they are loading, or change the style of the buttons when they are pressed.

Users aren’t as patient as you think, so care about UI/UX so that you can create web content that’s easy to use.

Web creators should be able to talk to users and guide them. UI and UX design is very important for this.

• UI and UX
• interaction
• Web Design

Knowing Accessibility.

Not everyone viewing web content will be able to perceive colors, hear sounds, or recognize text correctly.

Try reading the web page with machine translation or read the page with color correction.

If you don’t fill in the alt attribute of the img tag, or you don’t fill in the aria-label if the button tag doesn’t contain any text, machine translation won’t be able to convey it.

Don’t you think it’s a shame if your great web content doesn’t communicate what you want it to say and people don’t want to leave the site?

Following accessibility is of interest because it touches on UI/UX and leads to creating semantic HTML.

Lighthouse also has accessibility evaluation parameters, so take a peek.

• Accessibility
• WAI-ARIA

Learn About Performance Improvement

According to Google’s research, if a mobile site takes 3 seconds to load, 53% of people will leave.

That’s a lot of great content, but you don’t want people to leave.

Be concerned about techniques to speed up your web pages, such as compressing images and CSS/JavaScirpt files, implementing lazy loading in iframes, and only inlining CSS in the first view.

Also, if your pages are slow and clunky, your UX will suffer. Review your code and images to make them as light as possible.

You can’t hurt the web by making it faster. It doesn’t hurt to make the web faster, so let’s try it out.

I’ve also written an article on the next generation of image formats.

• Lazy loading
• Accelerate your web pages
• WebP

Get to know the PWA

PWA (Progressive Web Apps)

This is a technology that allows you to build websites/web applications like a native app.

It can be placed on your phone’s home screen or desktop with icons.

With ServiceWorker, you can control the cache with code, which I think is going to be essential for the future of the web to make web pages faster.

There are evaluation parameters in Lighthouse.

For more information, please read this article.

Get to know your website testing.

Don’t forget to test your website to reduce the risk after you release it.

Layout is broken in certain browsers. The date selection fall is not working properly. The link doesn’t jump to the link, or if it does, it’s wrong.

There are many things, but it’s very important to test so that your users don’t have to face bugs.

Web.