From zero to lead UI developer

As I was sharing some dev advice today, I paused. "How did I get here?" "What did I learn first?" This is my journey:

TL;DR? Scroll down to the recap.

High School

Nothing. I never took so much as an Intro to Computers course. I didn't know that web development was a job. I didn't know that any of this was an option.

College

I didn't decide on a major until halfway through my Junior year. By then, I had taken so many slack-off classes like Comic Book Illustration, Creative Marketing, and African Weaving that the only ONLY way to graduate on time was to declare a Graphic Design major. I don't usually admit that, but yes. It was an accident. My senior year I needed 3 courses in computer "stuff" to fulfill my major. So this brings us to the very first time I coded anything in "Web Design 101" The class focused on the design part, but I did get a very basic intro to HTML and CSS. I thought it was pretty cool and wanted to learn more, but for whatever reason the Computer Science course in "Web Development" required a prerequisite of "Java I" and "Java II" which... I took. So then I knew basic Java. So at this point, I realized that I actually loved this and wished I had been a Computer Science major, but what could I do... I was in my last semester, so I took that "Web "Development" class and learned the basics of JavaScript and PHP

Summer after College

I started hearing a lot about JQuery and I guess I sort of taught myself a few basics.

First Few Jobs

I worked in marketing doing design stuff, but I kept wanted to learn more about programming things. I remember attempting to learn Ruby on Rails and starting to learn the basics of using a terminal for the first time. I found out about this thing called HUGO and made my first markdown static site. I also used GitHub for the first time even though I had no idea how to use git. I didn't have any foundation to my knowledge. It was all just bits and pieces --articles and YouTube.

First Web Design Job

I think I should note that my graphic design job sometimes wanted me to design for web, and through that experience I got some exposure to the basics of Agile and JIRA. Also this was the first time that I found out about tools like Sketch and Zeplin and the concept of modular design and also the first time I had heard of React. I wanted IN.

Back to School

I went back to school and took an intro to web technologies class - this time at a graduate level... at Harvard. Everything I had ever learned was taught in the first 2 weeks. Let me repeat that. EVERYTHING I HAD EVER LEARNED ABOUT WEB WAS TAUGHT IN THE FIRST 2 WEEKS. I realized that I knew nothing, but I was excited to learn. So then I learned again, but more in detail HTML, CSS, JavaScript, JQuery, and PHP. But in addition, I learned about JavaScript Libraries --that such things as NPM and CDN exist--and about JavaScript templates, Data Queries, JSON, and the basics of hosting.

I was hooked. I had to take another class. I decided on a class that went even more into detail with JavaScript through a processing library called p5.js. This was my introduction to the concept of Object-Oriented JavaScript.

My next two classes were intensely focused on advanced HTML and CSS where I learned about how to correctly use floats, flexbox, CSSGrids, and CSS Variables, and that there are many many more tags and selectors than I will ever remember and also I learned about SASS and SVG as code for the first time.

But what about React?

Yeah, so I did still want to learn React, so on my own I made an attempt. Two attempts. Three attempts. Four attempts to sit down and just LEARN it. I was about to give up, when I read that Vue was easier. So I took a deep breath and... learned all the basics of Vue in a single week. I was excited!

New UI Job

So then I landed my first official UI design job. The second month that I was there, they wanted this interactive prototype thing and they said I could use whatever tools I wanted. So I thought it would be a fun opportunity to put my new Vue skills to the test. And that's when I learned Vue again at an intermediate level and became much more proficient with the terminal. I also got a chance to learn how to use the anime.js library. When I was finished, my team was like "lol, you're not a designer, you're a developer" and then I was a UI developer. And this was around the same time I just learned about how to actually use git

But this story has only just begun

My boss says, "so this software team is planning on using Angular, but we've got our other software team using React, they asked if you can provide UI as web components?" and I was like "Yes, Absolutely!" without any idea about what a web component was. After a bit of googling, I had Open-WC installed. So then I quickly learned about web components and how to use lit-element previous versions known as Polymer and packages and Storybook and Karma / Mocha testing. But then I needed a place to put all of this stuff, so my work told me to use Azure DevOps and soon I was writing automated test scripts in YAML, package version control scripts, and pipelines to an Azure cloud service.

The team had some existing designs that needed to be converted into a web components, so then I did some investigation and wrote my first Node.js script. They also wanted a documentation site about their design system and I learned how to use Vuepress static site. Then I became the lead UI developer, and that's kind of where I'm at right now. It's hard to remember everything. I might be missing something. ¯_(ツ)_/¯

RECAP Order that I learned stuff...

1. Basic HTML
2. Basic CSS
3. Basic Java
4. Intermediate Java
5. Basic JavaScript
6. Basic PHP
7. Attempt at JQuery
8. Attempt at Ruby on Rails
9. Using a Terminal for the first time
10. Basic HUGO (markdown static site)
11. Basic GitHub use
12. Basic Agile Method
13. Basic JIRA use
14. Concept of Modular Design and Development
15. Intermediate HTML
16. Intermediate CSS
17. Intermediate JavaScript
18. Intermediate JQuery
19. JavaScript Libraries (NPM / CDN)
20. JavaScript Templates
21. Data Queries
22. JSON
23. Basics of Hosting
24. p5.js
25. Object-Oriented JavaScript
26. Advanced HTML
27. Advanced CSS
28. SASS
29. SVG as code
30. Attempt at React
31. Basic Vue
32. Intermediate Vue
33. Anime.js
34. Comfortable with the terminal
35. git
36. lit-element (previous versions known as Polymer)
37. setting up package.json files
38. Storybook
39. Karma/Mocha unit testing
40. Azure DevOps
41. YAML scripting
42. package version control systems
43. basics of Azure cloud service
44. Basic Node.js
45. Vuepress (markdown static site)

Conclusion

Everyone learns at their own pace and in a different order. Don't compare yourself with me or anyone else. As long as you know more than you did yesterday, you're doing fine. Never stop learning.

P.S. I think the Java from college helped me a lot actually. It set up a lot of concepts for me like variables, types, parameters, encapsulation, abstraction, inheritance, polymorphism, private and public classes and variables, shared network of code, development environments, etc...