Tips For Beginners from a Front-End Developer
David is a front-end developer for Empirisys, currently completing his MSc in Computing. Here, he shares some of the tips he’s picked up while learning web development over the last few years. If you’re new to web development, or coding in general, these tips will help with some of the common pitfalls.
Expect the confidence rollercoaster
In the early stages of their web development career, beginners commonly experience a confidence rollercoaster. There is nothing unusual about this. There is an early sense of accomplishment when you begin learning HTML (Hyper-Text-Markup-Language) and CSS (Cascading-Style-Sheets) and seeing your webpage rendered on the browser for the first time. Nevertheless, if we want more than just paragraphs of static text and images (such as capturing webpage visitor’s details on a registration form or allowing them to interact with the page in various ways) then scripting languages like JavaScript are required.
While JavaScript tends to be the most exciting part of web development, it can also be the most daunting, especially when you start seeing a list of errors (and on occasion, errors on every line of code you write). The degree of error complexity can vary significantly, from simple syntax errors caused by typos or missing brackets, to more challenging logic errors. Eventually, syntax becomes so repetitive that it becomes ingrained, like a reflex. Writing a “for loop” becomes as memorable as writing your address. Still, even the most senior engineers repeat these syntax mistakes, especially when coding creeps into the later hours nearing a project’s deadline and attention span starts to fade.
Resist going down the rabbit hole
This point leads to another important rule, which could also be called “Stop chasing rabbits”. In Alice in Wonderland, Alice travelled down the rabbit hole in search of answers; she found a confusing and complicated world that didn’t make any sense. As time goes by all developers will hear and experience the term “going down the rabbit hole” quite often, when digging for information online about why their code isn’t running as expected. While being stubborn and eager to solve problems are necessary character traits in this field, it is also important to understand when alternative solutions should be explored or simply have some downtime and revisit the issue with a fresh mind.
Establish good habits with the right Arrows in the Quiver
As mentioned above, the more challenging errors are commonly referred to as ‘Logic Errors’. This is where the beginner’s confidence, tenacity and genuine interest in the field get tested the most. These errors are frustrating because theoretically, the written code syntax is correct, however, the developer has not programmed the computer to perform the right behaviour.
- Debugging
While later in a career web developers can make ‘magical things’ there is no ‘magic’ in coding, only the illusion that an error originates from thin air. Errors don’t happen without something executing in the incorrect way it was intended. These logical mysteries can often be solved with debugging skills. The ‘Old School’ way, that is very common to this day is to ‘console.log ()’ all your errors. This practical method refers to displaying things like function returns or what’s stored in variables inside the browser’s console. Step by step, line by line, we can track our code and ‘zoom in’ on what is missing in our logic that does not yield the wanted behaviour.
Relying on standard ‘console.log’ isn’t bad if it works, however it is advisable to work smarter and not harder by exploring different free tools available to make debugging easier. A lot of modern browsers support debugging tools. Using Chrome (“Chrome Dev Tools”), we can view our files, actual code, and impose breakpoints, where the debugger stops JavaScript execution at a specific line of code and shows developers what’s going on without having to add extra lines to console.log, and to remove them once the error has been fixed.
Furthermore, there are plenty of third-party debuggers, tailored to different JavaScript frameworks, such as “React Developer Tools”, which will show you how components communicate and what data they share. When working with back-end frameworks, such as Node.js, it can be helpful to test your end-points with an application such as Postman, which allows you to send requests to your Node.js application without having a front-end ready and see if the server is responding with the proper information. It is important to get into the habit of using tools available to you and then debugging becomes second nature through time and practice.
- Clean codebase
To make debugging even easier, it is important to keep your codebase clean and structured. It is not apparent at first when dealing with a file or two, but that quickly changes when multiple pages and features get involved in our application and the file amount rapidly increases. Other important practices include such as writing clean code, understanding that the first solution is not always the best, and some iterative refactoring should be expected.
- Reading documentation
Another important habit is to spend time reading online and understanding documentation, instead of trying to “re-invent the wheel” and make the library or codebase you’re using try to behave in a way it has never been designed for. This may work sometimes but creates bottlenecks for the future.
Remember, it takes two to tango
Finally, junior developers need to take responsibility for their work, but also avoid having too much pride to ask for help. In practice, a lot of meaningful projects are achieved only through transparent teamwork. Thus, using GitHub forums, being part of various programmer online communities, as well as looking for answers and suggesting solutions on StackOverflow is a great habit to speed up the learning curve.
In addition, sensible commenting on code is useful not just for the rest of the team to understand but for yourself as well, especially when you leave the written code for months and months to check later. Learning to work in a team, respecting team members’ time when requesting assistance and understanding code version control is crucial for every competent developer.
An iterative approach and repeating these habits will bring confidence to one’s skill set, as well as more comfort in not knowing the answer on the spot but trusting the ability to search and try various methods for the right solution.
If you found this useful, please let us know by getting in touch, give us a clap or a follow. You can find more about us at empirisys.io or on Twitter at @empirisys or on LinkedIn. And you can drop us an e-mail at info@empirisys.io, or directly to the author of this article, david@empirisys.io.
