DEV Community

Edward Ezekiel
Edward Ezekiel

Posted on • Originally published at Medium on

2 1

Coding Tips For New Web Developers

If you follow my blog you know that I recently graduated from a coding bootcamp and started work as a web developer.

I can’t believe I’ve been on the job about a month already! Here are some of the tips and pitfalls I’ve come across during my first month.

React Hooks are Amazing

The first project I worked at at web3devs used React Hooks extensively. Before working at web3devs I had been putting off learning hooks. I didn’t see the point of adding Hooks when React already seemed to work fine.

After using hooks for a few weeks, I intend on using them in every React project moving forward. I love being able to forget about class components. My favorite part about JavaScript is the emphasis on functional programming. React hooks do a great job of building on top of this programming style.

I find that my components are more composable, flexible, and fun to use.

HTML5 has a Built-in API for Form Validation, But Use Cases Are Limited.

If you’ve ever added required to an input field, then you've used HTML5's built-in api for form validation. required is a simple way to prevent a user from submitting a form if they, e.g., forgot to enter their email in the form. If the use clicks submit, a standard message will pop up telling the user that the field is required.

However, using the native HTML5 form validation causes some issues when you’re working in a react project. Specifically, it gives the browser’s DOM control over input fields (making it an uncontrolled component), whereas most react forms should use the virtual DOM (making it a controlled component).

One of my favorite bloggers, Flavio Copes, eloquently explains the importance of controlled components:

There are two main ways of handling forms in React, which differ on a fundamental level: how data is managed.

  • if the data is handled by the DOM, we call them uncontrolled components
  • if the data is handled by the components we call them controlled components

As you can imagine, controlled components is what you will use most of the time.

Sonny Recio explains that “[w]e’re potentially violating React’s design patterns while doing so as we’re accessing the DOM properties using native javascript.”

My personal approach is to add required to a form input, then use the .checkValidity() api in the handleSubmit function.

Use git mv To Rename and Move Files

The toughest bug I’ve ran into so far was a git merge issue caused because I didn't use git mv. Using git mv to rename and move files lets you be explicit about your intention and helps to avoid some errors.

Here is a fantastic article on git mv explaining this issue. And no I didn’t find this article until after I resolved the bug. 😞.

Git projects are case-insensitive by Default.

When you initialize git in a project directory it automatically creates a config file. In that config file, you will see a line that says ignorecase = true. This means that if you rename a folder from "Components" to "components", on GitHub the folder will still be called "Components."

This issue came up simultaneously with my git mv bug, which lead to some very interesting behavior.

Top comments (0)

Sentry image

See why 4M developers consider Sentry, “not bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more

👋 Kindness is contagious

Explore a sea of insights with this enlightening post, highly esteemed within the nurturing DEV Community. Coders of all stripes are invited to participate and contribute to our shared knowledge.

Expressing gratitude with a simple "thank you" can make a big impact. Leave your thanks in the comments!

On DEV, exchanging ideas smooths our way and strengthens our community bonds. Found this useful? A quick note of thanks to the author can mean a lot.

Okay