I consider myself a bit of a computer generalist. I have a career in Web Development, I have a degree in Computer Animation, a certificate in Hardware Support Specialist, and I took three semesters of Computer Networking. On top of being a 90s kid who had to go through figuring out how the internet works and how this onslaught of new technology was to incorporate into my life.

Childhood Geek

When I was nine or ten my dad brought home our first computer, an Apple II. It was probably outdated at the time and it had the large floppy disks that were actually floppy.

I, of course, only cared about the games we could play on it - most of all were Swashbuckler.

The next computer my dad brought home was a Windows PC. Don’t ask me what version because he said if I could get it working I could use it. I immediately took it apart and then everything went into paper bags and to the trash. I was not the technician I am today.

But the first PC that entered the house that we actually used was in 1998. With a massive Pentium3 processor, that is where my journey really began. With not much to do on it and only dial-up internet to use, I took to building my own homepages to have a collection of links to navigate to when the browser started up. I also had to hand-make my images going pixel by pixel in MS Paint.

Young Developer

I started with Microsoft FrontPage and created simple web pages that were done with a GUI and then I made a home page using Homestead.com. It had a pretty impressive collection of Dragon Ball Z gifs if I do say so myself.

I never got into Geocities however, and I think that is okay and an indicator of where I was going to go with my career. I have been more interested in the visual aspect of websites than the code portion.

My first webpage is saved on The Internet Archive and is part of the reason why I donate to this project whenever I get the chance. I decided to “remake” it on CodePen so I can have a more accurate depiction of what it was supposed to look like. I know I had different fonts and images in there but I don’t have the motivation to make it exactly like it. It’s funny, I made this webpage before I knew border-radius was even a thing or the :hover in CSS. Still, I had them on the page, using images to make rounded corners and JavaScript to make hover states.

See the Pen My 2005 website - remixed by Bruce Brotherton (@brucebrotherton) on CodePen.

In high school, I was also responsible for the JROTC webpage and did all the updates for that. It was my first “real” project I think - but being in high school I didn’t give it as much effort as it needed. I was still updating HTML tables with code so it was a bit of work to do anything.

And that is where my web journey ended. In my senior year of high school, I also discovered Bryce 3d on the school computers and thought it would be so cool to make video games and 3d graphics. So my friend and I signed up to go to Full Sail University to make video games. We originally signed up to be a programmer for games but we talked to a Music student who said he spent all his time making music now that he never listened to it. My friend and I looked at each other and thought we didn’t want that - to spend all our time making video games that we never got to play them. We changed our major to Computer Animator, his advisor took that degree and he still was playing video games. Yeah, it was a silly reason but we were just 18 and it was enough for us and we still were getting a degree that could work in the industry.

3D Artist

In this degree, we learned all kinds of stuff. Color composition, rigging, MEL programming, 3d modeling, animation principles, camera properties, how a 3d rendering engine works, compositing, art composition, timing, using 3d software packages, and many other things. I spent three years getting a bachelor’s degree and produced a demo reel I’m still proud of to this day. I even have some of the art I’ve made from Full Sail on my blog post about quitting being an artist.

I did have to put together a new webpage for my portfolio and I think it pulled off its goal really well. Granted it was in 2008 and I didn’t learn a whole bunch of webpage development since my time in high school.

It’s worth noting that I still didn’t have any type of IDE at this point, I was doing this all in Notepad.

Then after college, I got a job doing architectural rendering at Edese Doret. I worked way over in New York, New York. I tell you what, big city life isn’t for this country mouse. I was able to stick it out for 9 months and then had to go home. The work was great and I wish it was something I continued to do professionally. Right now though, using 3d as a hobby and making 3d banners for my website is plenty.

After that job ended I was stuck trying to find ways to bay my student loans. I ended up going back to school to defer them.

Learning and Leaving Web Dev

I moved in with my aunt and started classes. With my bachelor’s degree, I was able to get all the general education classes completed. I started my web development courses and was finally on my way to becoming a web programmer. I met some great people and was tutoring for Adobe Flash helping others figure out Action Script 3. I was doing well with all my courses and enjoyed being at the college.

I was learning things about the box-model, how floats worked, getting familiar with HTML and CSS.

However, one class ruined that for me. I was tasked to find a job in my field in 2012 and when I looked for jobs doing web development in the Midwest the selection was grim.

I decided to switch my coursework and transition to Hardware Support and Networking Specialist

I was convinced I’d never get a job doing websites and I thought Help Desk is needed everywhere. I learned, and have forgotten, a lot about computers. From how to write VB script to subnetting a network. From setting up a DHCP server to how a web page is retrieved from the Internet. How to write batch files and what the IP address 169.254.15.101 means. I think the most relevant thing I learned is how a packet of data is transferred between servers.

These courses got me engrossed in the terminal and using Linux in a production environment. I got the comfort of troubleshooting problems with my scripts so I could get the computer to do what I need it to. How I can make a bootable hard drive and install or troubleshoot Linux on my computer.

I was able to complete the Certificate program for Hardware Support Specialist but before I could finish my final courses for Networking Specialist a friend I made at the school asked if I was interested in a job working for American Girl as a web developer.

A Start to a Career

After a short debate, I decided to go for it and sent in my resume and cover letter. The worst thing they could do is say yes, right? After I sent it in I waited a few weeks and got a call offering me a temporary position that could turn into a full-time position. I was ecstatic. However, it required me to move to Madison to start. Off I went, I worked with three other developers, one who was switching careers to become a teacher. As he was the senior developer, I was tasked with documenting as much of his workflow as I could. Our manager was trying to get as much information out of our heads and onto the Sharepoint so we don’t have a repeat of someone who knew all of the intimate workings inside the company left and took it with them.

This started my enjoyment of writing documentation and sharing knowledge this way.

Most of my duties were writing HTML emails, getting images prepped to be online, and writing up code to be used on the Thomas the Tank Wooden Railway website. The other developers were in charge of keeping the American Girl website running and supporting each other in the process. Here I was also introduced to UTM tracking and the idea of analytics. I never had to work with the data but I needed to make sure the emails had the codes.

It was a good thing I spent so much time in the late 90s working on my web pages. The only way for you to make something that had structure was with tables and that was all emails can be.

Because emails are pretty much permanent and the website itself could only be updated once every 24 hours, perfection was the name of the game. Unfortunately, perfection is not my middle name. I had a hard time at the place one typo ended up being a big deal because it lived at least for 24 hours. It didn’t help that the IDE I was introduced to was Brackets before it had spellcheck built-in.

I think my biggest achievement there was making a batch script that would take images that were named like image-1-1, image-1-2, image-2-1. image-2-2. And build an HTML that would stick them into rows and columns automatically. It saved me a lot of time when writing the HTML emails there. Also, emails are super tough to make. I learned a lot building them and getting things that work across platforms. It was a mini-lesson that I missed when I started making websites after the Browser wars were hot.

However, this job too was brought to a close when the company had to downsize. And I was looking forward to some time in unemployment and enjoying the severance package that they provided.

A Mentor Changes Everything

Months of relaxation were not on the plate. A couple of weeks later after looking for jobs and submitting resumes I ended up getting an interview at a place called Ad-Lit Inc. The interview may have been a little unconventional but the people who were conducting it were great and they ended up liking me enough to let me join the team. I was paired up with the other programmer there who was brilliant and introduced me to the 21st century of web development. She got me started on Gulp, WordPress, NodeJS, Bower. Real tools inside the terminal. My skills as a developer increased 100 fold because she was willing to step me through the processes and include me as she developed more. Every time I had a question about my code, she was able to look at and also see the whole picture of what I was trying to do and ask probing questions on why I chose to do a part of code I wasn’t even questioning.

It was apparent I wasn’t on the same level technically as her. Though because of my path from doing computer graphics and knowing more general computer things we made a good team. I approached each problem from a different angle and was able to help her now and again to get her through tricky parts. Usually, I was a sounding board for her to be able to talk through a problem, and I hope my input was helpful.

During my time at Ad-Lit, they did a rebrand to Vector & Ink. I got exposed to a bunch of different types of websites and created documentation to support the backend of them that was running on WordPress.

I also met an awesome designer and relied on her heavily for input on how things should look for webpages and she kept me on my toes when the spacing was off. She was crucial in my development in learning anything about UX or UI.

I learned a lot from my team at Vector & Ink and I will be forever grateful for that. However, there was an opening at Michigan Technological University that I couldn’t afford to pass up and I applied.

Me and My Career Today

After the longest interview process, I’ve ever encountered, I was offered the job at Michigan Tech and began in 2018. Working here I’ve had to lean in on all of my other disciplines to do my job correctly. I’ve borrowed from my Computer Animation background when making animations and bringing up color combos to work with. I even ended up making a couple of Snapchat filters, one where mascot’s head to be put on yours.

I borrowed from my networking side when I have to use PuTTy to remote into my Mac at work during the pandemic and being instantly comfortable when accessing the share files. Or when I have to SSH into a server to modify files and use VIM to make changes.

And of course, my time as a web developer at Vector & Ink has made the largest impact, it is the reason why I’m able to pull from other experiences and network them into my current career to assimilate what I do daily.

CodePen Card Challenge.

This pen was part of the CodePen card text challenge and actually ended up getting featured on the email newsletter the following week.

See the Pen Card Text by Bruce Brotherton (@brucebrotherton) on CodePen.

I really wanted to play with the 12 Principles of animation. Primarily Timing and Anticipation. I wanted it to be interactive so the main idea was to make the title stand out. I used the idea of anticipation to make it work. So when the title goes sliding out the slight delay made you anticipate it sliding back in. But of course that also keys into timing, the whole animation is half a second or about 12frames. When I create animations I like to think of them in frames, like it is done in films and cartoons. Historically an animated film was drawn at 24 frames per second and a cartoon was 12 frames per second or as the term goes, on 2s. There is a really good example of this done by Wired: How Animators Created the Spider-Verse. I also wanted to give this a little bit of overlapping action - whereas the title zoomed out the card grew a little to give the interaction more impact.

It was another similar idea when making this CSS-only tooltip. The animation had to be keyed just right so that it felt comfortable when it popped up and went away. I often use two different transitions for the hover state and the not hovered state. I feel having them be slightly different helps with the illusion that they are behaving according to the context of the animation.

Tying up the Loose Ends

If you have read this far you can tell, my journey into web development wasn’t a straight path. It started when I was just curious about what made up websites and I built out as little as I could understand. Then life happened and I went and gained other experience in other fields. I never really gave myself the opportunity to learn website stuff - a lot of what I learned was because I needed to make something specific to the task. And honestly, that is still responsible for a lot of my learning. That additional experience though gives me a unique lens through which to view how I approach my career. I have insights into the inner workings of computers and graphics that inform my decisions on what to do on a webpage or how to influence its interactivity. Above all, the reason why I am on this path and able to succeed is due to the people I met along the way.

They were responsible for my first gig and also for guiding me to better heights. I hope that my foray into blogging here will help others as well. That’s all for now.