I was in fourth grade when I decided I wanted to be a web developer. By that, I mean I liked writing HTML with inline styles on Neopets (apparently, the same as all developers my age did). Of course, as a 10 year old, that path was muddled and forgotten, replaced by other typical careers kids know about. Luckily, I rediscovered that passion in college, except by the time I did, I was halfway done with a degree in Graphic Communications. I finished my college education while I taught myself how to write frontend code in my free time. After graduating, I started working as a Frontend Design Apprentice at Sparkbox and was hired as a Full Stack Developer afterward.
Full Stack Development Onboarding
Leaping so quickly into what I love to do was exhilarating. It was also a bit intimidating as someone who came from a design background and had only written frontend code before. Those intimidating, imposter syndrome type feelings caused me to think about all the things I needed and wanted to learn. Similarly to how I’ve learned to write code, I broke down this huge development journey into smaller, more manageable pieces. I narrowed down my list of topics to a few specific areas that I felt passionate about learning, which helped me turn that feeling of intimidation into motivation that allowed me to stay excited about coding. This approach also made it clear that I may need some guidance in my learning, so I was excited to find out about the Sparkbox mentorship program where each new hire is assigned a mentor on the team.
I narrowed down my list of topics to a few specific areas that I felt passionate about learning, which helped me turn that feeling of intimidation into motivation that allowed me to stay excited about coding.
Mentors at Sparkbox
Sparkbox’s mentorship can look different for everyone because we’re given the opportunity to decide how to best use the pairing time for what we need. I wanted to use the time to learn about topics that would make me a more effective and confident developer. The first time I met with my mentor, Byron Delpinal, we talked about my interest in understanding how all the pieces of a project fit together. Byron came up with the idea of spinning up a modern development environment in a few different languages, like NodeJS on Express, Ruby on Rails, and PHP on Laravel. This gave me the opportunity to actually work through setting up a project and getting all the pieces to talk to each other. That was when we realized we needed to define what a modern development environment should look like.
Our Definition of a Modern Dev Environment
This definition is constantly changing, but right now we’re moving towards more modular, performant, and resilient architectures for web apps. Byron and I worked together to break down what these higher level goals really mean.
Modular
Modular architecture is important because it allows us to break up our code into reusable pieces that serve smaller purposes, like making code more manageable to review and test and making team collaboration with Git easier. For HTML, we accomplish this by using a templating system, like Handlebars.js or Pug. In CSS, we can use a preprocessor, like SCSS or LESS. And for JavaScript, we can break up the code by using the export and import syntax available to us when we use a transpiler like Babel. In all three of these languages, maintaining a modular code base gives us access to emerging technologies without sacrificing browser support.
Maintaining a modular code base gives us access to emerging technologies without sacrificing browser support.
Performant
Some great resources for educating yourself on the need for a more performant web are the case studies at WPO Stats. A more performant web app greatly impacts user experience and business metrics. For example, by reducing page load speed from around 2 seconds to around 1 second, Sparkbox helped Driver Solutions double their conversion rate for organic traffic. There are many things we can do to optimize the performance of our web apps. For our sample project, Byron and I chose to implement HTTP/2, which allows us to do things like server pushing (for server side rendering of resources a client may need in the future) and using only one TCP connection to load the site, giving us the ability to use multiplexing (making multiple requests at the same time on the same connection). Since major browsers today only support HTTP/2 over HTTPS, we can secure our traffic by using SSL.
Resilient
Getting a bunch of errors when trying to navigate a web app is super frustrating. If we’re going to put something on the web, we want our users to have a positive and accessible experience. This means we need to test our code to ensure it works as expected so we avoid those pesky errors. It also needs to be accessible to keyboard and screen reader users to ensure that everyone has access to the experience we’re providing. To add resiliency to a web app, we should test both our frontend and backend code to ensure its resilience and ability to fail gracefully when necessary. On a JavaScript project, we might use Mocha as our testing framework to allow us to write our tests and Chai as our assertion library, which mostly provides us with helpers we can use while we write tests in Mocha.
What’s Next?
As Byron and I worked through these criteria for pairings like NodeJS on Express, Ruby on Rails, and PHP on Laravel, we realized there was even more value in the information I was learning than we originally expected. Yes, I was getting a good understanding of how to spin up a development environment, but as we went through that, I also started to learn about things like the MVC pattern, how we can use RESTful APIs, and what a database migration looks like. Coming from a design background, I hadn’t had the opportunity to dig into these ideas before, and Byron and I knew I couldn’t be the only one in that situation. We decided to start documenting our process and developing a conference workshop so that we can share what we’ve learned.
Not only did Sparkbox’s mentorship program help me become a better developer as I learned about these concepts, but now Byron and I can use our combined knowledge to give back to the community through a conference workshop. Workshopping will solidify the knowledge we have about these topics while contributing to Sparkbox’s vision to build a better web, and it’s all because a couple of developers were given the opportunity to pair and learn new things.
