Hi, I’m Ruben. I’m the Web Developer for Poodle Jumper and I’ve been working here for two months. Before I started here, I worked as a Junior Web Developer for a year alongside multiple Senior Web Developers who helped me get the hang of things. Now I’m comfortable making more decisions about how to get from point A to point B within the code, though I still leave the big picture architectural decisions to more experienced developers within the company. When I’m not working, I’m with my family. I have two sons that love Minecraft and we have a blast playing together. I’m also a grilling enthusiast and I make the best ribs in town
Web developers are responsible for writing the code that powers websites and web applications. Websites and web applications are similar in that you get to build them through a browser like Chrome or Edge. Websites tend to be simple and static; they provide information for a user to read, but there isn’t much functionality to them.
A web application is a software program that allows users to interact with features without having to download an app to their computer or mobile device.
Web apps tend to be more sophisticated and complex. For a user, it is mostly semantics, but the development time, effort, and costs are substantially different. The good news is once you learn the fundamentals of web development, you can create either.
I use CSS (cascading style sheets) to make the website look and interact as they should on mobile devices as well as computers or laptops. I work with Mori, the UX Designer, to make sure we’re delivering a consistent style.
Together we’ve created a customizable component library that matches our branding standards. A component library has the tiny building blocks of a website, things like a button, checkbox, menu, and form fields. The benefit of using a component library is that we know every button on our site looks the same every time. They are like little building blocks I can reuse wherever I need them.
I use HTML (hypertext markup language) to build the structure of the website. HTML is usually the first thing that new web developers learn because it is the foundation. You can think of HTML as the framing of a house, and the CSS as the paint, wallpaper, and flooring.
Without the structure, my CSS wouldn’t have anything to decorate. HTML uses tags to define the structures of different elements on the page. HTML is so effective at structuring elements that it is used in emails, documents, and even some games. Of course, this means that I use HTML every day in almost everything I do.
The last part of bringing a website to life is using a technology called JavaScript. This is what makes the website interact and do things when a user clicks a button, hides a menu, or submits a form. JavaScript is like the electrical, gas, and water of a house. It’s what powers things to work. All of the technology I’ve talked about so far are the foundational elements to front-end development. It’s called this because it is the part of a website that a user sees and interacts with.
The other part of my job is developing the things behind the scenes, or the back-end development. As you’ve likely guessed, this is where we program what happens with all the data the user is sending and updating.
For example, when you click “Add to Cart” on your new favorite pair of shoes, something has to connect between the website you’re seeing and all the data that keeps track of the store’s inventory system, purchasing information, and eventually shipping. Monique, our Software Engineer, is the lead on these systems, so I’ll let her tell you more about it.
One of the joys of being a Web Developer is that we get to bring ideas to life. Whether Mary, our CEO, has a brilliant idea one morning, or if Mori (UX) brings a fresh new layout for the company blog, it’s the Web Developer who gets to make that idea a reality. When you do this well, the whole company notices and appreciates your work.
While some parts of my job are attractive and fun, it isn’t always sunshine and rainbows. Writing code can be tricky. Programming languages are precise, and getting every character correct is a struggle when you start. The syntax, or the structure, of code gets easier the more you do it, but when you’re a developer, it seems like you’re always struggling with something.
Problems I run into include the environment on your machine, your computer acting weird, merging your code with a co-worker’s changes, causing an error, or the requirements are wrong for something you’ve already built. My advice is to embrace the struggle. The more you look at the challenges as opportunities to learn, the better developer you’re going to be.
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.
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.
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.
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.
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.
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.
