Here’s To The Power Of Dreams…

Starting again.

It’s never easy.

When I thought about writing this post on the morning of my first day at my new gig I was filled with so much joy. The sky was brighter, birds sang louder and “she” looked even more radiant than usual.

But sitting at my desk at the close of day one, I realized afresh just how hard it is to start anything over again. No, I did not just realize it, but I had somehow forgotten. The worst part was having to look the dummy as everyone traded ideas and lingo I do not yet grasp fully. on Day one I spent hours just trying to set up a workflow in which to carry out my tasks – “Learner!”.

And really, is it not that fear that keeps us rooted. The fear of being in uncharted waters.  of being a “Learner”. Many of us have experienced the feeling of utter helplessness that comes with being thrust in the deep end of the ocean and we run far from it. We end up doing the same things over and over again, year in, year out while the things we long to do the most slip away from our grasp a little more each day.

I’ve always loved software development. Since I was a teen playing with Microsoft FrontPage with my childhood best-friend. We dreamed at the time of building a website to connect teens all around the world.

From those early days I was hooked. The feeling of making things happen with a few keystrokes and clicks was intoxicating. I saw how lives had been changed and whole systems altered across vast geographical spaces because some people somewhere thought, typed and made magic happen. I wanted to be a wizard too.

But somehow, someway, life happened. I ended up in Arts Class in Secondary School. And if you were a brilliant and eloquent kid like I was (yes, allow me this one toot of my own horn, it’s been a long day) then there was only one path from Arts – Law.

So off to study Law I went. And yet even in school, the thrill of technology drew me. I remember starting a side hustle that involved sourcing movies and cracking Nintendo Wiis and PS3s for busy working class folks looking to save some stress and some money. After Law was done, I knew without a doubt that practice was out of the question for me, so while my mates went off to Law School I started a transport business and a dry cleaning business, made some nice money and just as promptly went out of business.

Realising that perhaps I needed to broaden my horizons and become a man on someone else’s payroll, I decided to get a job. I had always been intrigued by the Co-Creation Hub ever since I’d heard of them immediately after leaving school. The thought of being at the forefront of tech in Nigeria seemed at once so near and yet so far. How to begin? Where to start? What skills to learn?

Luckily, being less creatively challenged than average, I was able to leverage what little drawing skill I had into a job at a mobile game design company  as a Graphic Artist… I was in!

From my short stint at mobile gaming, I moved on to Head Media and Marketing and subsequently Head operations at an online shopping company. (Worst working experience ever, but moving on). After that, I got lucky to be part of a great little start up with big dreams first as Community Manager and later on as Programme Director. (Best working experience so far – shoutout to Truppr!).

It was a great period with lots of growth both personally and in terms of skill. And yet, at the back of my mind the germ of an idea had begun to form… could I not be a software developer? This thing which called my name, which filled me with joy each time I did it, could I not make a happy living from that?

All my waking hours for the past 18 months that were not spent on work, family and loved-ones has been spent learning this fascinating craft. I’ve spent countless late nights and early mornings and lunch breaks trying to get myself hireable. And here I am – Hired!

Two months ago I made the decision to pull the plug, stay home (read: become unemployed) and focus full time on software development. The strain on me between what I wanted to do and what I was doing was getting too much to bear. I am glad I made that decision because from nowhere came the opportunity to join a small but fast paced team where I can learn and earn under a good balance of stress and eustress.

It’s been a crazy less-than-one-week but every day when I wake up I know I made the right decision. The crazy buzz in my head asking – “What new thing are we going to learn today?”.

So I am not afraid to start over. To start again. To be the newbie, the novice. From Team Lead to Team Rookie. As hard as it is, for once I have no fear because I am doing that which I love and which makes me happy. Ultimately, the lesson I want to take away from this life experience is not just technical coding skills but the epiphany that it’s never too late or too hard to start again. Here’s to the power of dreams…

Productivity Picks Of The Moment 2.0

Time for another productivity pick of the moment!

Honestly there’s been so much to choose from. I just discovered WebStorm IDE (“A-maaziiing!” *in Oprah’s voice*), Ulysses notepad is still blowing my mind and Boom 2 is just perfect for an audiophile like me. I’ve really been on a downloading and testing spree to find what really, really works for me and my personal “cyberspace”

Today though, I’ll be talking about two tools called “Rulers, Guides, Eye Dropper and Color Picker” and “Refresh Monkey” – both of them are Chrome extensions (if you’re in web dev and not using Chrome extensively, I have no words for you).

Refresh Monkey is an amazing Chrome extension that refreshes any page at set intervals. It’s great for mini web dev work/testing where you don’t want to go through the hassle of setting up a gulp or other auto browser-sync workflow, but need to refresh the page regularly to view changes and what not. You can select it for multiple pages or for just one page and each page can be set to it’s own unique timer running independently of the rest. It’s really cool but a bit redundant for me since I started using WebStorm IDE (I’ll have a post on using WebStorm as soon as I’ve used it for a while).

The other is by far my favourite of the moment and sooo useful. Say you’re on a website and maybe you want to copy said website or maybe you want to have a deeper understanding of the layout choices the designers made, well, enter Gridify (called “Rulers, Guides, Eye Dropper and Color Picker” on the Chrome store) a fully customizable grid, ruler, color picker tool that does just what is says.

Need to measure the display or some element, boom – ruler tool. Need to place guides across a website? – boom! Set up horizontal, vertical or both guides and drag ’em, slide ’em and add as many as you want. Need a grid on the screen every 60px or 100px or 150px? great – select it! Need to see what colour that font is? Sure thing, just pick the eye dropper tool and you’re good to go.

This 89kb tool is like the Swiss Army knife of web design allowing me to immediately pick apart a website to the pixel rather than depending on eyeballing it. Life before it was like trying to open those old-timey cans of sardines without the key… doable, but who really wants to live like that.

Do check out these tools on the Chrome store and give them a spin. Let me know what you think in the comments, and also, if there are any other chrome extensions you find useful in your workflow and would like to share.

Till next time… and like always… keep coding!

Landing Page Design: blindates.xyz

So I’m working with a team of friends on a new idea we think is going to be the best thing to hit Nigeria since sliced bread (shoprite bread??).

It’s a web app called blindates.xyz and it will link people together on blind dates. The whole point is to make dating fun, secure and a little less superficial by matching people based on interests and what they need in a partner rather than on looks.

Hmmm… does this sound like the anti-Tinder?

Anyways, before going into full development, we’ve decided to validate the concept with a landing page which announces the app and asks people to sign up to a waiting list if interested.

The aim is to send traffic to the site and if we get a certain number of hits and a certain percentage of those hits are interested enough in dropping their email addresses, then we know we’re on to something.

Here’s the first section of the two-section design:

Screenshot 2016-07-15 18.24.43.png

I went for a purple feel because purple is associated with luxury, chocolates, night time and is a sensual but unisex colour. The logo design was inspired by the masks people wear at masquerade balls. I was hoping to evoke a sense of mystery and excitement and even a hint of the forbidden which is always fun.

Above the fold, I wanted the message to be clear. There’s only one thing to do. Enter your email if you’re interested in being part of the waiting list. The button color is also intended to contrast with the purple scheme.

For the second section, I wanted to maintain a clean look with lots of white space and also pick the color of the CTA (Call To Action) button of the previous section as an accent color in this section.

Screenshot 2016-07-15 18.24.52

In addition, I wanted to describe the three main values we offer to our target demo of busy professionals which is being convenient and easy to use, being fun and being safe and anonymous.

For now the page is hosted on my firebase at https://blindates.firebaseapp.com but it should be up in a bit at blindates.xyz where the app itself will reside when we’re done.

It’s exciting times for me to be working on an actual product that is going to be released to the general public soon. Wow. I just thought that out loud to myself. Oh well, back to coding…

Productivity Picks of The Moment 1.0

So, I’ve decided that every so often I’ll rave about the productivity apps that I’m finding useful in my coding workflow or even in my life in general.

The pick of the moment are these two awesome apps that are two sides of the same coin and complement each other perfectly.

The first is Boom 2 for Mac and iOS. I am a lover of music. Any music, any singer, any genre so long as my ears find it pleasant and my soul agrees with the story in the song.

I’ve got a pair of Audio Techinca ATH-M30x’s and they are great to listen to music or ambient sounds (more on this later) while I work. The ATH Mxx series is already a great choice for music aficionados like me who understand that bass isn’t everything (yes, I consider myself a budding audiophile). They’re clear on the mid ranges and sufficient on the bass – even if they’re tuned a bit flat. What the Boom 2 app does is take the sound quality of the headphones and dial it up to 220.

It takes over the Mac’s sound system and recalibrates it, giving you a wider range of presets and equalizer options. Seriously, you need to try it to understand. The sound experience is much richer and fuller. I usually have my Apple Music set to 90% and the system volume set to 75%. With Boom 2, I can hardly go above 50% system volume. Feeling my Audio Technicas, which are not built for bass, actually vibrate around my ears is a fantastic feeling.

The second app is the Noizio app. It’s an ambient noise app which is great for washing out distracting noises. What I like most about Noizio is that you can preset mixes depending on your mood. Say you want the ambient sounds of a farm on a windy day – A farm that’s right by the seaside too. Done. Another day you may want the sounds of a coffee shop with a fire crackling in the corner. Done and done. Save the mixes and you can switch back and forth between your favorite sounds. The sounds range from farm noises, to October rain, to night time sounds, to deep space.

Ambient sounds are great for me because I tend to sing along with songs a lot which can be distracting for tasks requiring my full attention. Ambient sounds give me the benefit of drowning out the noise in my immediate environment while being undistracted by music or lyrics.

Combine Boom 2’s sound boost with the Noizio app’s ambient sound and who needs noise cancellation?

Those are my two picks productivity picks of the moment. I’ll be raving about more tools as I discover them in upcoming posts.

Salut!

My Two Cents On Mentors

In a previous post I alluded to a “Mentor A” which invariably raises the question, “How many letters of the alphabet do my mentors go through?” (Answer: Just up to B for now). Today I want to talk about them a bit and how they influence my journey.

Mentor A is someone who works with me at my day job. He’s got 13 years of experience writing code and keeps me on my toes as we are around the same age and I probably have only one tenth his experience combined when you count my fits and starts along this journey.

He’s a verifiable bad-ass and every day I work with him, I get a glimpse of the mastery that is possible with enough dedication and a deliberate approach to getting projects shipped – be it for money or for a portfolio or practice (all of which still lead to money – “cha-ching!”)

Mentor B is more laid-back but he’s also a bad-ass in his right. Quite a bit younger than I am, he keeps me on my toes regarding my age. Hey, at 29 I am not getting any younger. He’s also the more critical of my work and takes a little more time out to assess what I’ve done. He’ll shower me with praise and then land with 5 things I could have done better.

Last week, when I was slipping with my Clone-A-Week challenge, a conversation with both of them, Mentor A in person and Mentor B via WhatsApp chat, got me back on track almost immediately. Imagine the hours that could have been lost if I had not done anything at all last week.

The point is this – we all need mentors. It doesn’t matter what you’re doing or learning, someone has gone before and can inspire, guide, lead, shepherd – whatever you want to call it. The journey is easier and faster when you have them with you.

And nothing says you have to make it a formal thing. Anyone you have access to for at least 15 minutes each week to share ideas with and who possesses sufficiently advanced knowledge in your area is worth looking at as a mentor. In fact this is one relationship that works even when it’s one sided. And you don’t always need technical advice. Sometimes I find that an anecdote from Mentor A is just what the doctor ordered.

So long as every interaction with them gets you closer to that version of you that’s on the inside, then they’re a mentor. Cherish them, grow the relationship and in time, let them know.

And even if what you’re doing is so new, novel, super-secret or whatever, you can always find an area that is parallel to what you are doing and get yourself a mentor from that area.

With all the tech available to us the barriers to getting quality mentorship are removed. Now you don’t even have to meet them physically, it could be via Skype or other online communication service. It could be a blog of theirs that you follow or a social media account you – stalk – study. They could even be in another country or on another continent. And if you think age is a factor to be considered – well, I won’t even discuss it here because I do not think I can help you.

The wayI see it, it’s an important part of growing and of this waka I’m on. Mentor A and Mentor B, I salute you sirs.

Clone-A-Week Challenge: Google Landing Page

So this week I got challenged by Mentor A to build a Google Landing page for my next clone. I was originally going to go with an airbnb clone but he promised me I would have a challenging time creating a faithful replica of the Google landing page.

So here goes.

Step One: Project Setup (10:18am)

I’ll be using the same project set up as my last project. It’s a Gulp-Sass-Jade-Jekyll workflow I learnt from Travis Neilson creator of DevTips (Yup, I linked to the entire channel, thank me later). I’ve got the workflow set up on my Mac and should be up and running by 2pm today.

Step Two: Wire-framing, Header (Day Two – 9:00am)

I did the wire-framing in my head. I analyzed the original page and decided how I wanted to tackle the alignment problems. With the header, I made everything exactly the same – hover effects, the padding around some linked icons and so on. If you go over to google.com and try to click the chrome app icon and the bell icon, you’ll find out that at about 3px out, those links become active. I’m sure it is a user experience choice because the icons are so small (which I’m sure is a UI design choice) and they don’t want the users playing target practice every time they try to click on those links.

I finished the header in about 3 hours and moved on the main content which is mostly the logo, the search box and the buttons. As soon as I had the HTML elements on the page, I understood immediately what Mentor A was talking about. Reproducing the elements themselves is not the challenge in this clone project, aligning them to stay in place while being responsive is the issue, and I’d have to think long and hard before writing any code, because a misstep at any stage could have me rewriting sections later on. This is one of the reasons why I have adopted the Gulp-Sass-Jade-Jekyll workflow. I write the code in sections, so barring any real major issues, I can focus on a section at a time and keep my code separate.

Here’s the work in progress so far:

Screenshot 2016-05-28 12.25.50

The header is almost pixel perfect, I might play with the margins a bit later on to try to get things in exactly the same space, though I suspect that as I am not using the same font as the Google page, the difference in the font kerning is to blame for the ~2 pixel difference in alignment.

Work continues today, I hope I can get the main body aligned and the hover effects sorted. Then I can wrap up with the footer – which seems like the easiest part – later in the evening.

We’ll see how it goes.

Step Three: Main content (Day Two – 3:08pm)

I am too brain-tired to write much of an update. I just finished the main content section. Here’s what it looks like. More on this later.

Screenshot 2016-05-29 15.04.01

Step Four: Finish The Body And Footer (Day Two: 5:14pm)

I’m done. Hosted it up on firebase at google-clone.firebaseapp.com. It was every bit as challenging as Mentor A said it would be, but it was a good exercise. It gave me a lot to think about in terms of alignment and arrangement of elements on a page and also that the size of elements don’t really matter even. Smaller elements could be more stressful to arrange than larger elements.

Here’s the finished product:

Screenshot 2016-05-29 17.14.19

 

 

Clone-A-Week Challenge Update: Planning For Success

So I promised to make a fully hosted clone webpage, once a week and since that time I have faltered on my pledge. My excuse, as usual, is that I simply do not have the time due to my day job or the mental capacity when I do have the time due to the problems I’ve been solving during the day.

Excuses, excuses…

So, what I need right now is a plan to tackle those excuses because I hate sounding like a whiny pants to myself and my mentors (who I give informal but nonetheless important status updates fairly regularly). And I’ve come up with something I believe will work – Break the challenge into smaller bite sized pieces and also use some mental models I picked up this week.

The first mental model is from an awesome article on how humans naturally think in If/Then terms. The article advocates making plans like so; “If I haven’t finished the report by noon Then I’ll prioritize it when I get back from lunch.”

The rationale is that we are hardwired to think in terms of contingencies. So my plan for ensuring that I take time aside each weekday to code is thus:

If I get home before 6pm Then I’ll start coding from 9pm for at least 3 hours straight. But if I get home after 9pm, Then I’ll take an hour for myself and start coding an hour after whatever time I got home for at least 2 hours straight.

So that’s that.

The second model looks at a way to tackle time intensive or looming tasks – just tell yourself you’ll spend 5 minutes on it right now. Just 5 minutes. The premise is that once you get into the flow of things you’ll end up spending more than 5 minutes at it. So for instance, you want to exercise but you’re like “Yo, who has 30 minutes for that?”. Well, tell yourself you’ll spend just 5 minutes on press ups and you may find yourself finishing a whole workout. And even if you don’t finish, at least you’d have done your pecs some good rather than spending a total of zero minutes on the task.

The takeaway for me is that when I notice I have gone a day without coding or I’m too tired to contemplate putting in the energy and time, I’ll just commit to 5 minutes learning something new or creating something. Could be creating a certain type of button, understanding a new concept or anything at all.

Now, tying these two mental models together and applying it to the Clone-A-Week challenge this is my plan of action:

“If I get home before 6pm Then I’ll start coding from 9pm for 3 hours straight. But if I get home after 9pm, Then I’ll take an hour for myself and start coding an hour after I get home for 2 hours straight. During this time I’ll spend at least 5 minutes of my coding time on my Clone-A-Week challenge. Also, I’ll keep a blogpost open in WordPress and update in realtime as I tackle the different pieces of my project.”

By breaking down the project into milestones (a header here, a navigation bar there) I will be able to tackle the projects one bite sized chunk at a time. Also, by keeping a blog post open I’m holding myself accountable to finishing the project.

That’s it. My plan of action for ensuring I always have a Clone-Of-The-Week.

Now to go start that blog post.