In this section, I’m going to show you more of the details that go into a web page. I’m coding a new version of the page that service providers use to sign up and manage their profiles. Camila mentioned that we are expanding services for other animals. The new version I’m creating will allow the providers to add additional details about the services they offer and the types of pets they can provide service to.
Before I start coding, I review the requirement wiki to see the new fields we are adding and then Monique (Software Engineer) and I quickly sketch out how she will structure the data. I create a mock version of the web service that will connect to the website. This allows me to make my development changes without waiting for her part of the changes.
I make those changes to the service and then focus on the HTML changes. I look at the existing webpage to see if there are any components or modules that I can repurpose or reuse. The design Mori (UX) gave me is different from what we already have. The navigation of the site stays the same, but the profile section will just need some tweaks and then it can be repurposed. I told you a little bit about how HTML uses tags to structure the elements. There are specific tags to use when you’re building different things.
Looking at a Sophia page with search results for HTML, how many of the HTML tags on the right do you recognize now? Kind of fun, huh? HTML tags are an easy way to structure documents and websites, but there are other benefits too. Screen readers and other device accessibility software use the HTML tags to assist users in navigating sites. Developers can use the alt attribute to provide alternative text for visual elements like images.
Let’s return to my work on the Poodle Jumper website. Once the HTML elements are in place, I work on a few tweaks to the CSS. CSS is where we define the details about the font, spacing, styles, and colors for the page. The style of the new page is very similar, so I don’t have to do too many changes, but getting them to look just right takes attention to detail.
That’s the beauty of CSS, the styles cascade or flow from page to page once you’ve established the formatting. Not every web developer likes this part of building a website, but it is my favorite. The satisfaction I get when I see a beautifully executed web page is the best. Many web developers underestimate how much work it takes to get everything just right.
Every time you write new code, errors can happen. Errors can come from typos, syntax errors, or making an error in the logic. When a developer searches for issues and fixes them, it is called debugging. When I started developing websites, I dreaded the process of debugging. It can be difficult to know what the different error messages mean and how to fix them. I’ll talk about debugging more in the next section.
I’m still waiting on the database changes from Monique (Software Engineer), she’s been busy with another task, so I take the opportunity to show Mori (UX) and Jose (Product Manager) what I’ve I’ve built so far. They like the progress, but had a suggestion on changing the order of the fields. When requirements change, it can be frustrating. I’ve learned it is part of the process, so I structure my work in small chunks to make it easier when things need to be changed. Once the database changes are complete, we’ll be ready to wire it up and finish testing.
We’ve discussed a bit about how speed and accessibility can be challenging for Web Developers. I’m going to share a little bit more about other challenges and opportunities Web Developers face. The first big challenge is managing JavaScript frameworks and libraries. How developers leverage JavaScript has dramatically changed in the last ten years. These frameworks provide features and templates to make coding with JavaScript faster and easier, but there is some work required.
First, you have to make sure the architecture of your website matches the framework. Some frameworks like Angular are fairly strict, while React is pretty flexible. Both have their advantages and disadvantages depending on what you’re trying to do.
Once you have a framework in place, you have to make sure you keep it up to date. Angular releases a large update every six months, but between the updates, the best practices can change.
The tools developers use have also seen significant changes in the last few years. Creating a development environment on a developer’s computer is complex. Tools like Vagrant and Docker provide different ways of creating and managing these environments. Usually, a company will pick one tool and all the developers will learn how to use it.
Let me walk you through a recent bug I encountered. One of our customers reported the browser showed them ‘$NaN’ when they tried to use our new feature for calculating the estimated cost of services. Hmm.
Since I wasn’t there and didn’t see this happen, I have to try to recreate it. The best first step for me is to ask the client details about what happened. What buttons did they press, what were they doing, and in what order?
The reason this is helpful to me is that software is logic-based. Meaning, if this happens, then do this. So, if I can understand the exact steps the customer took to make this bug occur, I have a better chance of making it happen myself in my local environment.
The customer told me they selected a product marked at $150. The field indicating the estimated price showed $150. Then, they clicked the quantity dropdown and selected 2. Right after the estimated price showed $NaN! To a non-developer, this might not mean much. But to me, this is a breadcrumb I can follow. I know that piece of functionality takes a number value from our database and then multiplies that number by the quantity the customer inputs. So my next logical step is to go look at that code and see if I can spot the problem.
Once I looked at the code, I saw that the service cost is a number coming from the database. Maybe the data type was set incorrectly? Upon review though, it looks fine. The number is an integer like I expected. The next thing to do then is spin up my local dev environment and see if I can replicate. After selecting a product and multiplying by 2, I get the same as the client; ‘$NaN’! I haven’t solved the bug yet, but I can replicate it consistently, and that’s a good place to be.
The final step was adding in some logging. I want the computer to tell me what the value is at each step. When the value is first retrieved from the server, it’s a number. But then it looks like we are doing some formatting of that value by taking the number and turning it into a string so it can have the ‘$’ character in front. It looks like that’s the problem! The computer doesn’t know how to multiply the number 2 by a string. I make a quick change to make sure that the multiplication uses a numeric value, and we’re good to go.
Now I need to update my unit tests. Unit testing allows us to test the individual parts or components of software to make sure they work. It is like testing your car battery if your car won’t start. The battery is just one part of a larger system that starts your car, but it is pretty easy to test individually to make sure it is working. Before I push my code live, I need to make sure my unit tests are set up to ensure that the multiplication function takes in the correct values and always returns a correctly formatted multiplied number. That’s what testing does. It gives the team peace of mind because our tests make sure that the code we write acts the way we intended it to.
In this case, I’m going to write a quick unit test and check for some returned values. I write the test using the test condition that multiplyProduct() should return a number formatted with a ‘$’ character in front.
There is one more test to write. I want to make sure that the users will see the correct value as well. Unit testing is great for testing isolated pieces of code, but it doesn’t test the software as a whole. I’m going to write an integration test now. Integration tests let you take multiple pieces of the program and combine them to make sure they all work together seamlessly. I know several steps the user must take to get to the point where they can see the multiplied values. So I will write an integration test that combines all those parts of the program, checking for correct values along the way.
One challenge you might not think about is how websites work in different browsers. A browser is a software application you use for accessing web content on the internet. All modern operating systems come with a browser already built-in.
You probably didn’t realize that there are different options and that browsers can behave differently. Chrome is the most widely used browser currently, but Safari, Firefox, and Edge are also popular options. Edge is Microsoft’s new built-in browser that replaces Internet Explorer for better performance.
Web development can be a great stepping stone to other IT careers. I’m really interested in server management, so I’ve been learning more about Linux, which is an open-source operating system used by most servers. Monique (Software Engineer) has shown me what she’s learned and how she makes the servers scale when the traffic increases, but also how she shrinks it back down to manage costs. It’s some pretty cool technology.
I’ve also been learning more about security best practices and how to code my sites to prevent malicious activity or hacking. It seems like a data breach is in the news all the time. I’m working to keep Poodle Jumper off that list by learning how hackers exploit vulnerabilities and preventing it wherever possible.
