Learning Front-End PART 2: Tools, Styles and Best Practices

When I started out in the front end world, I was overwhelmed by the amount of new technologies and concepts. I made a lot of mistakes, but that was key to learning. In this Second part, I'll share the tools, practices and little tricks that helped me grow as a frontend. It's not a definitive guide, just recommendations based on my experience, so you can avoid some of the bumps I had along the way.

1. Essential Developer Tools

Configuration Example in Visual Studio Code

Imagine that you're writing code and you make a syntax error without realizing it. The extension ESLint it will alert you in real time with a red underline and a suggestion to correct it. This way, you avoid common errors and keep your code clean.

For example, in the following image, ESLint detects a type error in TypeScript, indicating that a type argument cannot be assigned String to a type parameter setStateAction <null>:

As you can see, ESLint not only flags the error, but it also offers the option to see the problem in more detail and, in some cases, suggestions for quick correction.

Another useful tool is Prettier, which formats your code automatically. For example, if you type this out of order

When saving the file with Prettier, will become:

Another longer code example

After saving or running the formatting, Prettier will organize the code in a coherent way, maintaining a uniform and easy-to-read structure.

In addition to ESLint and Prettier, another very useful extension is GitLens. This tool allows you to view the history of changes to your code directly in the editor. With GitLens, you can learn who made a change, when it was made, and a brief description of the associated commit.

Here's an example of how this information is displayed in Visual Studio Code:

As you can see, GitLens shows details such as “5 days ago • Code update”, making it easy to track changes to your project without having to open the terminal or consult Git manually.

Not only do these tools improve the readability of your code, but they also allow you to focus on logic without worrying so much about style or minor errors.

2. Styles and Advanced Design

Advanced CSS Example: Flexbox

Let's say you have three buttons that should be aligned horizontally and evenly distributed. Instead of manually adjusting the margins, use Flexbox:

HTML:

This will ensure that the buttons are evenly distributed without the need to manually adjust their positions.

Responsive Design Example

To make a website look good on mobile and on computers, use Media Queries. For example:

This will cause the buttons to be stacked in a column when the screen is less than 600 pixels wide.

3. Advanced Techniques in React

Example of State Management with Context API

Suppose you have an application with a dark and a light theme, and you want the user to be able to change it. Instead of passing this information to each component, use Context API:

Example of Routes with React Router

If you have an application with different pages (Home, About, Contact), instead of reloading the entire page each time the user browses, use React Router:

This allows for faster and smoother browsing.

4. Optimization and Good Practices

Lazy Loading Example

Suppose you have an application with a lot of images, but you don't want them all to load at the same time, as it would slow down the page. Usa Lazy Loading:

This means that the image is only loaded when the user needs it.

Bundle Splitting Example

If your application is large, it's best to divide the code into smaller parts so that it loads faster. With React.lazy (), you can do this:

Here, the page only loads when the user visits it, instead of loading it from the start.

5. Construction of Complex Projects

Example of a Blog with Authentication

Imagine that you want to create a blog where users can publish articles. Usa Firebase Authentication to manage logins:

With this, users can sign in with Google to your blog.

6. Quick Tips or Express Tips

• Usa Keyboard Shortcuts in VS Code:
  • Ctrl + D: Select multiple occurrences of the same text.

• • Alt + Shift + F: Format your code automatically (if you have Prettier configured).
• Recommended extensions:
• *Bracket Pair Colorizer: *for easy identification of key pairs.
• *Path Intellisense: *for autofilling file paths in VS Code.
• Productivity Tip:
• Don't get obsessed with finding “the best solution” on the first try. Build something functional first, then improve.

To continue learning, review the official documentation.

• Official React documentation
• GitHub
• MDN Web Docs for JavaScript and CSS.
• FreeCodeCamp for free interactive courses.

Front-end development is a constant learning journey. It's not about knowing everything right away, but about moving step by step. Make mistakes, try, break things and build again. Every line of code written is a lesson learned.

Don't be afraid to feel lost sometimes, that means you're exploring something new. The important thing is to never stop. Keep creating, keep learning! 💙