DEV Community: Collin Ballou

Building Bridges

Collin Ballou — Fri, 20 Nov 2020 03:48:28 +0000

Building bridges for what?

Recently, in Lambda School I have been working on a small team of web developers and data scientists to help a small organization with parts of their website. The organization is called Bridges To Prosperity. They build bridges in Rwanda to improve access to critical infrastructure.

Our role in the project was building out a single page application for their engineers to visualize current bridges, and bridges in planning as well as clearing displaying their current and projected impact.

What do you mean, there is already a site?

When we first started the project, my team and I created user stories, and wrote up an engineering outline to understand the full scope of what we needed in order to build the site from the ground up. Later, we were given more insight into the project, we learned that our job was to improve an existing website, not create one from scratch. This was challenging for our team who had developed a vision already of what the project would be.

Re-design

Now that we had access to the existing code base, the first thing we did was try to break it. If there is nothing else we can do to improve an existing software, maybe there are problems with it that affect a user's experience using it. We clicked on EVERYTHING. Very quickly we learned about parts of the website that needed to be re-designed. There was a drop down menu that hardly resembled one and would only work if you clicked an item in specific spots. There were filters in the map display that wouldn't show if you switched to a satellite view. Each problem and was an improvement to be made. We wrote them all down and made them into tasks and cards on our Trello project planning board.

Above is an example of one of our tasks. The site has a map, much like Google Maps only we implemented it using MapBox. The map displays bridges for the engineers, it has a filter to select between which types of bridges are being displayed. When we started the project, the text for these filters was colored to match qualities of the bridges being shown and it was very difficult to see. Furthermore, you needed to click the checkbox to toggle the filter. I made the text more visible by creating buttons for each filter property, now you can click the button to toggle it. This improves the touch screen usability. Each button uses the same colors as before but it appears less jarring, and more readable.

Project overview

Much of our work on this site consisted of graphical overhauls but many parts of the code needed cleaning as well. While planning this project we created an API contract with out data scientists so we could agree on what data we could get from them and what the data would look like. Despite this, it was still unclear what data if it would be possible to implement on their end as we arranged. That being said, most of our teams improvements were graphically/functionally oriented.

My contributions were as follows:

Refactor React components to break up the size of RenderMap.js
Install Material UI and remove AntD styling library.
Create color theme in Material UI to match company colors.
Overhaul filter styles for readability and usability.
Host the project on AWS Amplify.
Connect the host with a custom domain.
Replace the province selection drop down menu with radio buttons.

Broken menu

As I said above, the drop down menu would only work if you clicked to open it, and then you needed to click the name of the province. If the user didn't click the province text, and they clicked the selection anywhere else, the menu would close and nothing else would happen.

This was quite easy to fix and creating the radio buttons in Material UI was quite easy. All the developer has to do is render a handful of pre-made components as part of the styling library and as you can see below I was able to simply set the state based on a user selection.

The results on the site:

Take me to your leader

No, seriously? Who are they? As a team, we started out with hardly any direction. We spent the first week planning and when half the week had passed we learned that most of our designs were already implemented in the existing site. While everyone working on the project met together several times each day, the web team had to meet with now established leader and try to coordinate our efforts. This created a communication challenge early on, at first we expected to receive more direction. Over time, we realized that it was in our hands. When this happened I messaged the web team and arranged some pair programming to get us all started since none of us really knew where to start on our own.

This became the start of it all. Our first pull request on GitHub was issued as a team. We all learned the review process together then as well as we reviewed the request during the call. I think taking the initiative to coordinate the team kicked us off and gave us the momentum to get work done.

Final thoughts

As it stands, the Bridges to Prosperity Bridge visualization site works. We very quickly eliminated all bugs that we found. We updated many of the styles with a more modern feel. We even added a tweaks to usability.

Features Shipped:

Refactor React components to break up the size of RenderMap.js
Install Material UI and remove AntD styling library.
Create color theme in Material UI to match company colors.
Overhaul filter styles for readability and usability.
Host the project on AWS Amplify.
Connect the host with a custom domain.
Replace the province selection drop down menu with radio buttons.
All buttons replaced with Material UI.
Satellite view now renders bridges on the map.
Graphs at the bottom of the page have been moved into a tab based view, a user can select which one they prefer.
The default map has been replaced with a topographic one.
Bridge details are now conditionally rendered.
Bridge details now show images where available.
The new data science API has been connected and is used for bridge data.
The broken newsletter sign up section has been removed from the footer.

Looking forward

In the future of this project. I would like to see the components rendered inside the map view moved around to better accommodate different screen sizes. The table displaying bridge stats can be styled to be easier on your eyes, while retaining the meaning of the colors it uses. The newsletter could be fixed and added back to the footer as well. I noticed that the original footer had been an exactly copy of the one listed on https://www.bridgestoprosperity.org/

We talked as a team as well about moving the map filters outside the map view. While this may have been possible, it was not our priority. Moving it might help with responsiveness. Other challenges you could come across are adding more meaningful nodes on the map like hospitals or other infrastructure near bridges. Another feature we didn't have the data for until the final moment was a heat map to visualize areas which would receive greatest projected impact from a bridge.

A place of learning

Working on a small team of other developers to make the best out of this website was a fantastic learning experience. I can only predict that many developers are thrown into existing projects to learn the code base and have all their expectations shattered. Having this experience early with no "senior dev" to refer to helped me learn how to deal with little to no direction and still be productive. I learned how to turn from sitting ducks to a collaborative environment. The next time I'm working in a group of people like this, I will lead them to create a product worthwhile. During this project, this is what I think we accomplished.

My Path to DEV.to

Collin Ballou — Tue, 17 Nov 2020 16:53:44 +0000

It started many years ago

A journey to find my home on the internet. The place I trust to house my blog. Here's the long story behind why I selected DEV.to.

Let's go back to the beginning. Many years ago, as a child between 8-10 years old I discovered MySpace. It was all the rage at this time. I remember it seemed that EVERYONE had a MySpace account. Each person's page was a portal into their world! I remember the playlists that would sometimes obnoxiously play the moment the site loaded. The widgets, and toys people would embed to their page were in my mind, early ancestors of the modern day app. This is even seen in the app Talking Tom Cat. Like a modern Tamagotchi, this cat responds to user interaction and lives in a small virtual box. Believe it or not, this app in some variant has existed all the way back to when it too was an embedded frame on people's MySpace pages.

The concept of a totally open world, a creative space for self expression and interaction was mind expanding to me as a child. I realized that this was only possible because of the lightning fast systems we have in modern computers. I thought as a child, if someone can create a site like MySpace, what else can be created in this world of seemingly infinite possibility?

I began researching how websites were made

As a child I wanted to start with something I could learn quickly and get online as fast as possible. This is when I discovered FreeWebs.com. It has since changed to Webs.com but they still own the old domain. Try it out! Using FreeWebs.com to make a website was cool, but my next sudden realization is that I didn't have anything to put on my site. I had no concept at what I could meaningfully publish.

Despite having no meaningful content on my sites, word quickly got around the elementary school that I was the kid who makes websites. Instant nerd. This was okay though. If being a nerd meant being a magician like MySpace Tom, I just needed to learn a LOT more to get my magic skills up to speed.

At this point I fully invested myself in programming. I began watching all the programming videos on Youtube at the time. My research as a kid taught me that C/C++ were the most widely respected and valuable programming languages. While I believe this is still true today, learning C/C++ online led me down a native development experience. While I originally envisioned making things online, it quickly dawned on me that maybe I would enjoy the nitty gritty aspects of native software development. Making automation programs was cool. Writing things that perform well and yield greater power from my computer was impressive to me.

This journey led me for many years until now. Up until about this time last year I had little understanding of what composes a full stack website. I knew how to use Apache to host small HTML/CSS websites I made in High School for my programming club. I also learned very quickly about network security when my little raspberry pi server was taken offline.

The world almost got away from me

Stuck in the fascination of native software development I realized that most software was moving online. My programs would all require some kind of install to run them, meanwhile, anyone can load a website in their browser and there is a world of free software they can run instantly. Many average use cases for a computer are very browser heavy and many people don't even use a full personal computing station, but a cell phone. I was becoming outdated.

The decision was made for me. I needed to finally learn web development. Research brought me to Lambda School, which is a young school with aspirational goals to in many ways, revolutionize the tech education system. Liking many aspects of their program and investment in students, I learned with them to become a full stack web developer.

My own world

For months I made an effort to blog, or rant on my website. The feeling of accomplishment from having my own personal world and having ultimate control over it was overwhelming. Now knowing React, and Node, and many other technologies I can build what I want. Sometimes the hard lessons can only come from experience however. While I COULD just make a robust system for blogging on my site, I have friends who are publishing professional looking material and filling it out with posts right away. I imagine building out an editor for my blogs, just for my personal site and what a waste of time it would be. Surely there must be a better way to do this.

Wordpress, while beautiful seemed like a little too much for me. While I could have used it to make a blog, I was sure there was a platform that was built more specifically for my purpose.

Medium is a great blogging platform. For the most part, it has everything that I need. At the same time, I don't want users to ever have to worry about a paywall, and I want my blogging platform to be as unobtrusive as possible for the user.

Ghost might have been the best platform I saw. While they offered many, if not all of the features of Medium, they remained lightweight with an option to host the service through them or else use my own host. While I strongly considered using Ghost, I didn't particularly want to use one of my hosts for it.

When I found DEV.to, the decision to try it out was mostly based on the experience. The ease of use was amazing. I created an account in seconds and was ready to write a post right of the box. No need to worry about hosting, or paywall complications, it also wasn't trying to be a fully website creation platform. The cherry on top for me was the easily viewable comment section so writers can interact with their people.

So far, my limited experience on this site is going smoothly. I like the ease of use and options provided by the editor. While I understand I'm not the authority on platforms, this is my choice for now.

What are your thoughts about DEV.to?