Online College Courses for Credit

+
Daily Work of a Web Developer

Daily Work of a Web Developer

Rating:
Rating
(0)
Author: Devmountain Tutorials
Description:

Describe the common daily activities of a web developer.

(more)
See More
Fast, Free College Credit

Developing Effective Teams

Let's Ride
*No strings attached. This college course is 100% free and is worth 1 semester credit.

46 Sophia partners guarantee credit transfer.

299 Institutions have accepted or given pre-approval for credit transfer.

* The American Council on Education's College Credit Recommendation Service (ACE Credit®) has evaluated and recommended college credit for 33 of Sophia’s online courses. Many different colleges and universities consider ACE CREDIT recommendations in determining the applicability to their course and degree programs.

Tutorial
what's covered
This section will explore the daily work of a web developer by discussing:
  1. DAILY TASKS DIFFER
  2. WEBSITE DESIGN

1. DAILY TASKS DIFFER

Depending on organizational goals, the tasks I work on from day to day can change. That’s one of the best parts of the job! No two days are the same.

Sometimes I get to build new features, other times, I update existing code or fix bugs. Working on code you didn’t create can be overwhelming at first. You have to spend the time to read through it and figure out what it does before you can jump in and change things.

When there’s a new feature to be built, we’ll have a few meetings to make sure everyone involved understands what is being built. As a web developer, you’ll be involved in more meetings than you probably anticipate. If you’re passionate about writing good code and making good products, you can leverage those meetings as an opportunity to raise risks or discuss limitations or hurdles you anticipate. My dad used to say, “Prior proper planning prevents poor performance.” And it’s true! Planning details out ahead of time can save some major headaches.

When everyone understands what needs to be developed, I break the feature down into small tasks. This helps keep me focused, but also helps my team see the progress I’m making. I make the code changes in files on my computer. When I’m confident I’ve completed a task and it is working as expected, I merge my code to the shared repository for the team to access.

At this point, users can’t see my changes yet. Monique, our Software Engineer, takes these changes from our development repository and puts them on the live server so all users see the new version. Commonly, a batch of changes will go live at once; we call this a release. Some releases are large, but they can be small and simple changes too. Releases changes for websites can be quick and easy; it doesn’t take nearly as long as it does for Camilla to update the iOS app.

With any software, there are bound to be bugs. Amanda told you about her process as a Quality Assurance Engineer. When she reports a bug on the website, it is my responsibility to figure out why it is happening and fix it. Some bugs can break the entire experience, so they are urgent and need to be addressed right away. When this happens, I drop everything else and focus on a fix. Less urgent bugs usually go into our backlog of work and are planned to be fixed in the future. Working with QA is crucial for avoiding and preventing bugs.


2. WEBSITE DESIGN

Camilla (iOS) mentioned how she has to build views to work on different mobile devices. Web developers have a similar challenge with making our websites usable on tiny phones and large high-resolution monitors. For websites, this is called responsive design.

Image shows the Sophia.org website in a phone-sized browser
This is the Sophia.org website in a small browser size. Notice how the text and images fit the screen. The user doesn’t have to pan and zoom to see content, they simply scroll.

Image shows the Sophia.org website in a laptop-sized browser.
This is the Sophia.org website on a laptop. The same text and images are now spaced out to fit the screen. There is some white space balanced on each side, but still feels like this website was designed for computers. This is a great example of responsive design

In addition to making sure my websites look good on any device, I need to make sure my website loads quickly. While networking bandwidth and devices have increased performance dramatically over the last decade, websites have had to up their game to do the same.

The speed of a website plays an important role in the priority of its position in search results. But most importantly, the speed of a website has a direct impact on the number of users that abandon or leave a site, and that can mean big money for some companies.

A 2016 report cited a study that revealed a single delay in web pages or videos increased the heart rate of participants by 38%. Talk about stress! The same report showed that the cognitive load for delays on mobile devices was comparable to watching a horror movie!

While we may teach our children that patience is a virtue, that isn’t true for our expectations of technology. Luckily, there are a few tricks, or best practices, for developers to use while trying to optimize their websites.

think about it
Have you ever noticed a website that displays pieces of content at a time? It almost feels like a wave of display. It usually starts with the navigation, then moves to the main content, and then ends with images or videos. This is one strategy developers use to give users content as soon as possible and reduce the time they spend waiting.

At the foundation of every website is a server, and usually a database. Optimizing the performance of these foundational components is a great place to start. Next, I make sure the structure of my website starts with the most important sections first. When a browser displays a website, it does it in the order of the HTML structure. I can minimize or compress the CSS and JavaScript. The less code a website has to process, the faster it will be. Images and videos can be a killer to any website if not handled properly. Selecting the right format and file size for an image will decrease the load time. I can also use the “lazy loading” technique to load images as a user scrolls, instead of loading everything at once.

 image shows two men building a website. A man is sitting on top of the website with a computer while the other man is standing on a ladder and reaching for a section of the website.
Website Development

Browsers allow websites to store files to improve the performance of a website. This is called a cache. This lets me save resources like images, CCS, or JavaScript on your device, so when you return to our website, it doesn’t need to download that content again. This saves networking bandwidth and loading time.

When a website caches resources, we have to define how long it should be saved. We call this the time to live, or TTL. Save it for too long, and users won’t see changes when you make them. If you don’t save it for long enough, it will have to be downloaded again. Getting the balance right can be tricky.

A website cookie is another form of data a website can store on your device. HTTP cookies were created for websites to be able to remember things about a user or a session. Cookies are critical for letting a user stay logged in to a website. Cookies have been a growing concern for user privacy. In addition to the information you enter on a website, cookies can save your browsing history and search terms. To try and address these privacy concerns, a European law requires that websites that target European Union member states explicitly gain consent for users before storing non-essential cookies. This is why you see so many websites with messages about cookies.

big idea
Have you ever had a customer support rep ask you to delete the cache and cookies in your browser? This is a way to restart a website. As a web developer, our goal is to prevent users from having to think about this, but issues can come from this saved data if the web developer isn’t aware of how it works when they make an update.

term to know

Responsive design
An approach to building websites that focuses on creating pages that look good on any device.

Terms to Know
Responsive design

An approach to building websites that focuses on creating pages that look good on any device.