Front-end Developer Year in Review: 2019

Continuing my tradition of publishing an annul year review, I am sharing this post to look back how I grew as a website front-end developer. The post addresses some of the new skillsets learnt for the projects and also sheds light on some of the tricks and techniques used to tackle problems. All work and no fun would make 2019 a dull year, so I wouldn't shy away in discussing some of the hobbies I learnt over the year and how sometimes hobbies can inspire your creativity and work.

Since 2017, I have been reviewing every year, journaling as way to reflect back on my thought process and the things I did for living. It's a great way of gratifying the achievements and appreciating things that went well during the year.

Work 👨🏻‍💻

For most of the year, I worked from my home office. During month of June and August, I worked out of Social (Which is a chain of restaurants in India). They have outlets in Mumbai, Bangalore, Delhi, Pune, Chandigarh, Chennai and their monthly fees is 5000 Indian Rupees which is redeemable on food and drinks.

Munching snacks while trying to solve real world code problems 😋😛 #coworking #coworkingspaces #FridayMotivation pic.twitter.com/hkfih3ASSw

— Prashant Sani (@prashantsani) June 21, 2019

During my brief stay in Mumbai, I had also worked out of WeWork, Mumbai for a week (thanks to Cred App).

The year brought in a lot of variety of work, from a technological stand-point. From building static websites in Gatsby (ReactJS) to building static HTML (one for a Restaurant & one for Gamers) to adding features to an existing React JS App. I also built an Infographic using SVG, HTML5, Scroll Magic and GSAP.

1) A Gaming Website

Fortnite is an online game with over a million users worldwide. It has been one of the most popular games played on almost all the available gaming platforms.

I was contacted by the team of Fortnite enthusiasts to develop front-end for the website which they were working on.  The website would later be developed in WordPress.

The biggest challenge faced here was managing irregular shapes in such a way that varying content does not break or make the UI look broken.

Bootstrap 4 was used for utility classes like flex-, text-center, d-none, etc. Since we worked extensively on jQuery, I used slick for carousel and some Ajax functionality on admin.

All the SVG icons were added as a separate SVG sprite file and loaded via Ajax

<div id="svg-sprite"></div>
<script>
    (function(){
        var ajax = new XMLHttpRequest();
        ajax.open("GET", "images/sprite.svg", true);
        ajax.send();
        ajax.onload = function(e) {
            var div = document.getElementById('svg-sprite');
            div.innerHTML = ajax.responseText;
        }
    })();
</script>

Each icon was then added as a symbol in an SVG sprite file. Changing colors on icons is done using a simple CSS currentColor value on fill and stroke. currentColor simply takes the color value and assigns it to any property like fill, stroke, border, etc; basically any place color can be set as a value. The short snippet from the SVG Sprite  shows how a Twitter icon is added in a SVG file.

<svg class="hidden" width="0" height="0">

    <symbol viewBox="0 0 50 40" id="icon-twitter">
        <path fill="currentColor" d="M32.1,16.4l0,0.5c0,4.8-3.7,10.4-10.4,10.4c-2.1,0-4-0.6-5.6-1.6c0.3,0,0.6,0,0.9,0c1.7,0,3.3-0.6,4.5-1.6 c-1.6,0-3-1.1-3.4-2.5c0.2,0,0.5,0.1,0.7,0.1c0.3,0,0.7,0,1-0.1c-1.7-0.3-2.9-1.8-2.9-3.6v0c0.5,0.3,1.1,0.4,1.7,0.5 c-1-0.7-1.6-1.8-1.6-3c0-0.7,0.2-1.3,0.5-1.8c1.8,2.2,4.5,3.7,7.5,3.8c-0.1-0.3-0.1-0.5-0.1-0.8c0-2,1.6-3.7,3.7-3.7 c1.1,0,2,0.4,2.7,1.2c0.8-0.2,1.6-0.5,2.3-0.9c-0.3,0.9-0.9,1.6-1.6,2c0.7-0.1,1.4-0.3,2.1-0.6C33.4,15.2,32.8,15.8,32.1,16.4z"/>
    </symbol>

<!-- Other <symbol> tags will go here  -->    

</svg>

Since the above SVG sprite file is imported (and added to our HTML inside DOM using Ajax), we can use the icon in any div like follows

<svg class="icon"><use xlink:href="#icon-twitter"></use></svg>

For Animating the Banner, I used SequenceJS and the SVG Animations (done in above video) are done using SVG.JS.

2) A website for an Indian NBFC

I was contacted by FlexiLoans, a Non-Banking Financial Company (NBFC) to build an interactive Home Page for their newly redesigned website. Also, I helped them to build a style guide which would later be used in other pages of the website.

There are many JavaScript libraries which enable users to snap into sections of website (normally 100% of browser height/Viewport) instead of a normal scroll. This is a great UX strategy used to make sure that the users do see the each section entirely on each scroll and enables them to go to the next section of the screen with just a single scroll.

There are many ways of achieving this, and one of the simplest way of doing this would be using a native CSS properties like scroll-snap-type and scroll-snap-align.

It does seem very impressive that the whole library can be replaced with just a few lines of CSS, but do take following things into consideration:-

1. The CSS Scroll Snap Module intentionally does not specify nor mandate any precise animations or physics used to enforce snap positions; this is left up to the user agent. (As per specification)
2. As of the publish date of this article I could not find much references to any easing and timing for the animation. (going from one section to another)
3. The property scroll-padding (along with scroll-padding-top, scroll-padding-right and so on)  specifies (for all scroll containers, not just scroll snap containers) offsets that define the optimal viewing region of a scroll-port(the region used as the target region for placing things in view of the user).
4. A Similar property scroll-margin  can be used on any box to adjust its visual area for the purpose of scroll-into-view operations.

Another interesting API used for this project was Interface Observer API. This is a good replacement for scrolling and Element-in-view libraries. In simple english, it's an API that throws an event on element visibility. It throws an event not only when element comes in view, but also when element becomes hidden or is scrolled away from the viewport (browser window).

The element can come into view because of many factors:-

1. Element scrolls into view
2. Change of Parent Element visibility

Another interesting use-case for InterfaceObserver API would be to lazy-load images. Lazy-loading images is a technique in which the images are loaded only when the user scrolls into a section containing the respective image. Until we have a native lazy loading attribute on images, this technique is the best one we can use.

I also used the magic of position:sticky along with SVG Path Animations (ScrollMagic + GSAP) to showcase an interactive features section of the website.

4) Front-end for an Austrian Restaurant

The very well recognised Austrian design firm Florrianmatthias contacted me to develop the front-end code for one of their projects.

I first created a style guide in terms of standardising fonts for h1, h2, h3, h4, h5, h6, p, .display-1,  .display-2, and so on. One of the best advantages of creating a style guide instead of adding additional classes is consistency. Wether it is a heading font on Home Page or About page, it will always have more or less the same style and will always scale in size when the browser viewport changes. It makes much more sense to build a system in which most of the styles can be accessed without use of special classes and with use of utility classes. Bootstrap, in one way gives us the best mechanism to build a style guide and I customised and used the CSS Framework to include only the things necessary for the project. (For instance, I removed most of the files like card, tables, forms, etc).

Some of the sections of the page were built in a way that they can be removed or added to another section of the page without breaking the content.

I am planning to use Tailwind in upcoming projects. I really like the approach of using utility classes (instead of writing custom CSS every time we need things like text-align: center. Also, Tailwind is built on configuration-first approach.

4) Undisclosed Project: ReactJS Gatsby Website

During June last year I developed a Gatsby Website for an Event. Gatsby is a static website generator built on React JS.  

Instead of using CMS, Contentful API was used to add a series of key-value pairs. The Gatsby fetches all the content from Contentful API and crates static assets ( html, css, js files) which get auto-deployed on server.

5) Undisclosed Project: SVG Infographic

I built an infographic using Greensock 3.0 and ScrollMagic. These are the same JavaScript libraries used to build my own portfolio website. In my opinion Greensock is one of the best libraries for Web Animations and ScrollMagic is my all time preferred library for scroll animations.

I really love the syntax of Greensock 3 (which was released during first week of November last year) and the library is literally half the size of its predecessor.

Thoughts on ReactJS

Gone are the days when a front-end developer can safely choose to ignore JavaScript Frameworks and build websites primarily using only HTML, CSS and JS. As a front-end developer, one must not only know how to build websites that run across browsers but also to integrate the mechanism making them perform like a Web-App using JavaScript Frameworks.  Modern libraries have taken over front-end development and learning at least one of them is imperative for a developer seeking a UI role.

So, out of Vue, React and Angular, I choose to become as much proficient with ReactJS for many reasons,

1. I had previously worked on React (Storybook) with ClearTax and a couple of demo projects (back in 2018)
2. Popular amongst the developer community
3. Extensive Resources for learning
4. According to state of JS, it was one of the best JS Libraries to learn in 2019 (Along with Vue)
5. React is more like a VIEW library and not a full-blown framework

Finally, I begin to dive-in deep with ReactJS, in and out, starting with a course with WesBos back in March 2019. I finished the course within a couple of days and got assigned to two consecutive Projects in React (Both of which are complete and mentioned in Work Section Above)

Currently, I am pursuing a course from WesBoss on Advanced React and Graph QL.

Getting Started with ReactJS

Everything in React is a Component and it is basically reusable piece of website. HTML has various tags like h1, h2 and so on; React takes this concept further by allowing us to create our own components and allow us to attach data and event-listeners (like onClick, onChange, etc)  to the same.  Suppose we wish to copy an entire section of one page (lets take <header> for an example)  to another, we don't need to copy the entire section, we just need to make it as a Header component and import it into the respective page.

One of the best ways to debug React Apps to use React Dev Tools available on all modern browsers (as extension). This is how we can inspect the respective Components and the state/props for the same.

One of the best ways to bootstrap an app using React is to use any of the following tools:-

1. Story Book (to build a style guide/design system)
2. Gatsby (to build static websites, much similar to ones created by Eleventy, Jekyll, etc)
3. Create React App (for everything else)

Once the set up for React is done using one of the tools mentioned above, we can get started with creating apps on React. The src folder is where all the code for building applications would be added. The public folder contains all the files which should be deployed on server. Once anything changes in src folder, the public folder is recreated by React. Please note that any changes made on public folder will eventually be lost during this process.

One of the simplest examples of React Component is as follows:-

import React from 'react';

class SimpleHello extends React.Component {
	render () {
    	return <p>Hello</p>
    }
}

The above component will not show up unless we mount it on the page using react-dom library and include it in DOM. One of the reasons for react-dom being a different library is because React can be used to build iOS apps, Andriod Apps and even build VR and not just work with DOM. So, React team decided to move DOM part of the library as a separate package.

import React from 'react';
import { render } from 'react-dom';

class SimpleHello extends React.Component {
	render () {
    	return <p>Hello</p>
    }
}

// Render the compoenent on element with an id of 'main'
render(<SimpleHello />, document.querySelector('#main')) ;

Books 📚

CommitStrip - The Summer of Code: a book about love 📗

ComitStrip is a site which publishes comic books on lives of designers and programmers / developers. They launched a kickstarter campaign last year for their second printed book and I pledged their campaign. They have released a similar book back in 2017 and I liked it a lot.

So, I pledged €49 and I got the hard-cover book, 8 stickers, 3 badges, 1 pair of socks and 5 posters. They campaign was successfully funded for €135,944. The shipment arrived somewhere in December and so far all I can say that every page brings in a smile on my face.

I would be reviewing the book, in detail in an upcoming post.

Smashing Book 6 📘

Every 1.5-2 years, Smashing Magazine releases a thick essay-styled book usually with a title of "Smashing Book". The sixth book was released and delivered somewhere in mid 2018 and had 10 essays explaining the best practices for Front-end development and User Experience.

I was lucky enough to have my name featured on the "Smashing Community" page from the book. The page featured names of some of the avid readers of the online magazine.

I would be reviewing the book, in an upcoming post.

Celebrating one year as a Smashing Member 🎉

I also finished one year as a Smashing Magazine Member. They were very kind to send me a T-shirt, a couple of stickers and a hand-written note to celebrate my membership-anniversary.

The membership gives access to all recordings of webinars, Free Smashing eBooks, Early bird tickets and Access to Smashing TV. Smashing TV is more like a podcast from Smashing Magazine held every week. The membership also grants special discounts on printed books, job postings, conference tickets, tools, etc. You can know more about membership here.

Other Books:

• Smashing Book - Design Systems
• User Experience - Revolution

Hobbies & Personal Life

Comic-Con Cosplay

Comic con is an annual convention with a primary focus on comic book lovers and movie enthusiasts. Cosplays(portmanteau of the words "costume" & "play") is a performance art in which participants called "cosplayers" wear costumes and fashion accessories to represent a specific character. The attendees can choose to dress up like a cosplay in Comic con or they can  . Also, Comic Con hosts a lot of stalls from which we can buy merchandise like Keychains, Cups, Action Figures, Collectable Toys, etc.

For the first time in my life, I got dressed as a cosplay in Comic-Con Bangalore. It was a fun experience (although I did not go to the competition, just cosplayed for the fun of being one). I was dressed up as one of my favourite cartoon Minion. The Minion goggles were custom made by me using PV Pipes (with a little help from a local hardware shop, silver paint, black duct tape and a elastic band).

21kms Marathon Finisher

Unlike 2017 and 2018, I just ran for one half marathon and a 10km run this year. With much of my time and attention spent on work, leaning and some personal commitments; I managed to spend lesser time on physical fitness this year.

I manage to finish the marathon without much of practice and the goal this year was to finish instead of achieving a better time score, but rather finishing the run.

Hot Wheels Collection 🏎

I started a new hobby of collecting Die-cast cars from Hot Wheels last year. I started a blog documenting my journey as a die-cast collector. The blog shares my review, photos and stories behind collecting toy cars as a hobby.

Goals for 2020 🎯

1. 👨🏻‍💻 Take blogging seriously
2. 👨🏻‍💻 Repeat point 1
3. 🚦 Learn more about JavaScript testing
4. 💻 Make more open-source projects
5. 🎤 Get back into public speaking (and/or create Youtube tutorials)
6. 💪🏻 Take fitness seriously
7. 📚 Read More

Well, I am not too sure about wether I would achieve all of my goals, but in the end I wish to be more happy, skilful and a better person than I am while writing this post.

It is always good to gratify the good things life has given us and cherish them. And what we think are bad experiences are just lessons to be learnt!