5 things I Learned on the Journey To Meet the Dragon Queen: Front End development

On coding my new Website.

Disclaimer: Images used in this post are snippets from the must watch American fantasy drama television series “Game of Thrones”. My obsession with the show has led to me finding a way to make it a theme for this post. If you are a GOT fan, you will love this one. Enjoy the read!

Today, I’m excited to let you know that my new website and of course, projects had unbelievable reviews and overwhelming feedback. Thanks to everyone.

This is for anyone who has a similar dream. The deep longing to build something for the web. To code it all from scratch. It could be a website, a Shazam for boobs, or a game that simulates Daenerys riding on Drogon.

Dracarys

I know a lot of designers long to code. There’s been this fight between heroes and villains about designers learning to code or not? I’ve gotten a lot of questions since I launched my website. Cool ones like — how did you animate the SVG? And stinking ones like: “What template/WordPress theme did you use?”

My new website happens to be the very first website I single-handedly coded from scratch. No Wordpress, no buggy plugins, no drag and drop, no limitations. It gives me joy and some sort of fulfillment. I really felt I should share a few things I have learned during this journey. I believe it will be of great insight to some people.

The last winter was 12 years ago

Folks know me as a Designer, but probably do not know that I met the beautiful Princess “Design” at the shores of Programming.

Almost 12 years ago, the dot com winter had just begun. Cyber cafes were the brothels, computers guaranteed mental orgasms! Nothing stimulated me more than buttons on keyboards, and what appeared on those vintage monitors. There was this selfish longing to do the pretty things I saw on screen.

In 2005, I got this huge book called, “Front Page 2000”. It was as big as the Oxford dictionary. I plunged into it, studying basic HTML, CSS and how the web works even though I had no computer of my own to practice. You will agree with me that at that time, Google & Youtube were not popular sources for learning. These limitations hindered my progress. Over time, I got stuck and dumped the book.

Well in between the mix, I stumbled upon Photoshop, and my journey as a Designer begun. While I had the passion for Design, the passion to build for the web was always somewhere around the cliff of my fantasies, more like oil kept on ice waiting to be heated up.

The Fire

About a year ago, I had built my first ever website using WordPress. While working as a Lead Designer at a design agency, I was given the task of designing websites using WordPress. It was an invaluable learning curve for me as I was writing some custom CSS (directly on the browser) and understanding how the web works.

We used a page builder which was pretty much a drag and drop thing. Technically, the builder generates the codes, and because I wasn’t responsible for writing those codes, I would get lost trying to fix things or do things my own way. It was limiting, (probably because WordPress and its relationship with so many allies make it complex) and most times annoying. I knew I needed to have total control of my code If I wanted to do things my own way and be more creative.

As a Designer, Front End Development really appealed to me. I signed up for HTML, CSS and JavaScript courses on Freecodecamp and Codecademy. I also complimented it with some Youtube videos. I would go to Codepen and try out the pretty things I saw there.

Like they always say, coding is hard. Really, it is hard! I knew the syntaxes, but knowing how to put them together to achieve an outcome was a blow to my guts. The gang leader was JavaScript.

Thanks for Quora. Reading answers and asking questions quickly changed my perspective, and soon, I began to understand these things. This brings me to the main point of this article — what I have learned.

What I learned

1. Know the basics. Stop!

Stop entering different routes finding the way. Create your own route.

Because I was finding coding difficult to grasp, I would download lots of youtube videos, e-books, PDFs, take several online lessons from different vendors, yet the concept of programming was hard to grasp.

My determination to really understand led me to discover this awesome platform Quora, where I had my questions answered.
Two answers on Quora changed my perspective.

I got to understand that:

For you to learn to code, you have to work on actual projects, and not just reading tutorials and following online courses which only teaches the basics.> Learning to code is different from learning a programming language. You don’t learn Arabic by reading a book written in Arabic.

Al Klein made me understand that programming was not the JavaScript I was struggling to understand, rather it was problem-solving by knowing how to structure data and algorithms. Knowing this changed everything. I wrote my first app, a ToDo list app using JavaScript. (Don’t waste your time to go check it, it’s Reek.)

So my advice when learning to code is, have an idea or project to work on. Something you wish to build with the new things you learn along the way. (In my own case, it was the crappy Todo list and my website. The challenge being that my website had to look like a professional had coded it.)

You will only learn by doing and — using the courses, videos, books & websites as R_avens_ along the way.

2. You don’t need a fucking Bootstrap

As widely known, Bootstrap is one of those frameworks they say a Front End Developer must know. Well, I doubt if I will ever use it! Yes, no matter how large the project is.

I don’t know why, but I never saw Bootstrap as something really important for me to learn as an aspiring Front End Developer. Oh yeah, I needed my website to be damn responsive, even on wearables and voice.😜

Oh, thou faithful Media Queries! Yes, media queries and layouts were what I needed to know. I had also learned about Flexbox, I tried it out and was in awe with how effectively it commanded layouts.

So, while sipping coffee one morning, I had to make my website fit perfectly into every possible screen that exists (People using a Blackberry phone weren’t my target audience).😛

I figured out specific breaking points, but I got confused on where, when and how to use either “min-width” or “max-width”.

On a curious search, I found this amazing God-sent guy “Zell Liew” who knows how to break down things simply so it’s easily understood. I got it after I read his article: “How to write mobile first CSS.” I also learned how to use REMs and EMs.

I exchanged emails with him about responsive CSS and Bootstrap and here’s what he had to say:

“Bootstrap is just for Developers who are either lazy, just don’t want to learn how to do it with CSS or don’t believe they can do better than bootstrap. Ask any established frontend Dev and they’ll recommend you to stop using bootstrap.”

He further went on to tell me what to learn instead:

• Layouts.
• How to style components.
• Javascript and how to manipulate the dom.

My website isn’t only responsive, it’s also adaptive. I used media queries and flexbox. No bootstrap!

3. Jpegs/PNGs have been rebelled against. SVG is the king in the north

Winter has come

During the days I was held hostage in the cell of WordPress, I did a lot of “inspect element” on anything that caught my attention on the walls of the web. I always wanted to know what’s under the hood. SVG animations were one of the things I checked out. I would see complex codes like this:

SVG code for my logo icon

I would just close the console and say to myself: “Damn! whoever writes these codes must be mad! Let me be using images.”

Bro, this thing was not as difficult as I imagined it. In fact is was as easy as saving a file with Illustrator or Sketch as SVG, dragging the file to your text editor and applying CSS animation to paths.

You see?

If I hadn’t worked on actual projects, I would never have known this.

SVGs are the way to go if you want to include graphic elements like logos, icons, and animations on your website or app. SVGs are very light in file size compared to Jpegs, GIFs, PNGs and even Sprites. They are also crisp and sharp. Of course, SVG stands for Scalable Vector Graphics.

4. Design in the browser not in Sketch😜

I had read Peter Assentorp’s article: “Stop Designing in Sketch. Design in the Browser” but never agreed to bend the knee, not until I got to experience it myself.

Bend the knee

You see, the problem is that that we as designers are still making static designs for an interactive experience.

As I was always testing my code on various devices during the process, I realized that what I had done in Sketch wasn’t the reality on devices. Would I have created numerous art boards on Sketch to cater for these screens? No!

Chrome Developer Tools has this awesome feature — “Toggle device toolbar”. I could see how my code was doing on about 30 screens/devices. I got this awesome Grid Ruler plugin that was really helpful.

Most of my paddings, margins, breakpoints, font-sizes, height/width etc were decided in the browser even though I had a Sketch design I was looking at.

Here’s a quote from Peter’s article:

“I believe that in order to know how it works and where it breaks, you should see and interact with the material in the environment, in which it will live.”

5. Perfection is stagnation

You are already familiar with the famous quote — “perfection is the enemy of good.” Actually, a candid quote would be “PERFECTION IS STAGNATION.”

For most of my life, I have been a perfectionist, of some sort. Every project that I worked on, and the kisses I made to my exes, I wanted to keep my errors limited to zero. Sometimes, this turned out great for me. Most times, it kept me depressed and STAGNATED.

This was a huge problem during the process of building my website. But one day I thought; what if I see my website as a product, an app? They are never perfect, there’s always an update.

Realizing that helped me to focus on the things that matter the most. Call my website an MVP! 😂

I learned that aiming for perfection can lead to stagnation or a complete lack of progress.> I found out that progress is more important than perfection.> As long as I am getting better than what I did before, I am on the right track.> You are never going to build the perfect website or app; for perfection is an infinite pursuit.

So essentially, my website will continue to get upgrades like apps do.😉

Some final words

I’ve just met the Queen. Each time I talk or write about learning to code, I flinch a little. I know I have only scratched the surface of what it takes to truly learn and write production level code.

That said, there is this “sitting on the iron throne” feeling you get from understanding how these fascinating things are built.

Lastly, let me address one question I’m certain a lot of people might want to ask.

Should Designers learn how to code?

In case you don’t know;

coding = designing

In fact, I’m already learning how to design algorithms. 😜

Not all Designers must know how to code. In my opinion, I would say code if you think you should. In my own case, I had always wanted to code even before I started designing.

That said, Learning to code will make you a better teammate and a better designer of digital products.

Like design, coding is about solving problems. Which is why I’m passionate about design in the first place.

Now, go learn something new!

Clap 👏🏻 a million times for this post if you like it, and please share.

Website
Twitter

In case you missed one of the projects that has been the talk of the town.

Rethinking hotels.ng
_A Case for Design in African Start-ups_medium.com