Work

2017: A year in review

A year in review article for 2017, sharing my learnings as a front-end developer

Prashant Sani

• 13 min read
2017: A year in review

Happy New Year!

Last year was one of the most exceptional years of my life. From Launching my portfolio website to being recognised in design galleries, to running a half-marathon, to working for ClearTax and Purepoint. An idea to document some of the most memorable events and gratify all the achievements emerged through a thoughtful conversation with a friend. The stories, the learnings, the experiences are written in a non-linear way, with no degree of importance. They are meant to serve as an inspiration for setting up higher goals for 2018. The post also covers some of the travel stories, recommendations, marathon-tips, coupon codes and more to encourage fellow developers to spend more time offline and live a balanced life.

Work

html5-css-website-developer-portfolio-website-india

Portfolio site: (Awards, Mentions & Recognitions)

During mid-February 2017, I launched my portfolio website and an accompanying blog-post noting down tips & tricks used to load the website in less than 3 seconds. The website and the post gained a lot of appreciation, tweets and recognition. Some of the most notable ones are as follows:

  1. CreativeBloq: 10 great examples of web design portfolios for 2017

  2. I got listed in showcase section of Greensock's website. Greensock is the libarary used along with ScrollMagic to animate sections of website.

  3. Mindsparkle Magazine: Website of the Day

  4. My Case study for the website got listed in newsletters, notably Responsive Design Weekly and CSS Animation Weekly

  5. The developer of ScrollMagic animation libarary, Jan Paepke tweeted the link appreciating case study written for the website.

  6. WebDesignDev: 10 Great Web Designer Portfolio Websites

  7. Trazo's Magazine: 6 Portfolio Website Inspiration

  8. The website also received mentions from design blogs and galleries like Web Design Inspiration, Creative Portfolios, Design Shack, Kiwi Blog, Boostlizer, etc.

  9. Best CSS Best Award: Site of the day

  10. CSS Nectar: Site of the day

  11. Design Nominees: Site of the day

  12. Here are some of the tweets from recognised and well respected designers and developers:

Freelance Projects

I launched some of my best work during this year. Because of the success of my portfolio website, I got to work with some of the most talented professionals from the industry.

Hackerbay

creative-svg-website-html5-css

creative-mobile-optimised-website

mobile-website-development

(Image Credits)

Hackerbay is a technology consulting company based out of Berlin and San-Francisco. During April 2017, Hackerbay approached me to have their responsive website developed. I worked on the front-end code for the site. The content and design were managed by their team.

html5-custom-accordion

I built a custom HTML5 accordion for the People and Service pages. The HTML5 History API fires up every time a button is clicked to open up an accordion. A user can share the URL and the respective accordion opens up on page load. Also, user can navigate to the respective accordian item using browser’s forward/back buttons.

psd-to-html5-website-development

One of the most noticeable features of the site includes a creative SVG Text Masking for videos on Home and Culture Pages. We used a static image for mobile to save user bandwidth and also, for most of the devices, video auto-buffering is disabled. Neither Mobile loads the video nor the mobile image is loaded on desktop.

The subtle SVG animations on Culture and Service page definitely lights up the mood for the user.

Nerdio - Resources

I was contacted by Adar, Inc for front-end development of the Resources and NFA sections of one of their websites, Nerdio. Since the website was already built on WordPress, I was asked to extend the theme by creating a "page-type" for the new pages. I had to write the code in a much unobtrusive way. The content sections of the new pages had a very different look and feel, but shared the same header and footer.
Locally, I copy-pasted the entire code from their server and made sure I am including not only the existing CSS & JavaScript files but also including the header and footer sections. We extended the theme by creating a separate "layout type" for each page. Some of the CSS classes were borrowed from the existing website for reusability and code optimisation. After the front-end was developed in plain HTML/CSS/JS, the back-end team extended the code by including PHP tags and making respective 'page templates' out of them.
Here are the pages I developed:

  1. Resources List
  2. Resources Template
  3. NFA

ClearTax

I was hired by ClearTax during July and August 2017. ClearTax is a Fintech focussed on helping people and companies to pay their taxes with ease. They are known for their excellence in an online GST web-app they have built. Most of my work was focussed primarily on bridging the gap between design and front-end website code by laying down the foundation of a style guide. In terms of technologies, my focus was on writing maintainable CSS and creating style-only ReactJS components. The design and development team were very supportive and helpful, which facilitated smooth and thoughtful integration of code.

art-of-good-life-book-self-help-year-in-review

Purepoint

Last year in November, I was hired as a front-end developer for Purepoint, a web and software company based out of UK. I found the job through StackOverflow's website. It feels good to be working with a team of very talented technology enthusiasts. Since I had not previously worked on Jekyll and rails, the team was considerate enough to onboard me and help me out with the basics.

Digital Ocean

Since I was moving my blog to Ghost platform instead of WordPress, I was looking for a VPS or a similar hosting alternative. I switched from my Bigrock's shared hosting to Digital Ocean last year. Digital Ocean provides SSD-based cloud hosting. Even though I wasn't aware of any Linux Commands and setting up servers. The community and blog section maintained by Digital Ocean became a valuable resource for setting up my own droplet through terminal [Linux Commands].

Digital Ocean held a conference in Mumbai on October 6, 2017. Some of the key highlights from the conference are mentioned below as a series of tweets.

The conference talked about the start-up culture and stories behind some of the emerging start-ups along with what ways Digital Ocean can help them in building a reliable infrastructure. Of course, there was networking and good food :)

Digital Ocean Free Credits

If you would love to try out their service, you can avail a free 10 USD credit by clicking on this link and registering a new account https://m.do.co/c/06dd430f4b06

(Note: this is only for first-time users)

Co-working at 91Springboard

91 springboard co-working space Bangalore

I have been working from 91Springboard, a co-working space in
Koramangala, Bangalore since November 2017. I have chosen to work from a dedicated desk, with which I get a permanent desk space along with a cabinet. For the absolute love of books, I am using this cabinet to store my books. In comparison to other co-working spaces:

  1. They have a great start-up culture
  2. No lock-in period, unlike some spaces which have a minimum of 6-12 months
  3. Open 24 x 7, (Except national holidays)
  4. If one wishes to work in any of the other branches; they can simply do so for 12 days, every month. They have branches all over Mumbai, Bangalore, Delhi, Gurgaon, Hyderabad, Noida, Navi-Mumbai and Goa.
  5. They have tied up with many companies like AWS, Google Cloud Platform, Digital Ocean, Treebo, Oyo Rooms, Hotjar, etc. to offer discounts and/or free services. I am currently applied for the credits form AWS and will soon apply for Digital Ocean as well.
  6. Every Hub(branch) of 91Springboard has community managers, who take care of building up the community and helping individuals and start-ups to connect with each other. The community managers help to address business requests and requirements as well.
  7. Currently, they offer 10 hours of meeting rooms (can be booked directly through their community website) for a dedicated desk.
  8. They conduct many community-driven events, most of which are free for members. Last week they had one on Cryptocurrencies

91-springboard-co-working-space

If you wish to get a 20% off for the first month (in addition to any other discount), for any of the plans, you can use the following form and fill in your details.

JSFoo

I have previously shared my experience of attending the annual JavaScript Conference, JSFoo through a series of posts written during 2015 and 2016. This year, I chose to include the same as a part of this post itself.
Like every year, this year's JSFoo was held during September. But, unlike previous editions of the conference, this year they arranged a week of conferences starting from mobile development conference Fragments, followed by ReactJS conference (ReactFoo), followed by JSFoo. Since I am not working much on Android, iOS or ReactJS; I was only a part of JSFoo. All the conferences were held at MLR Convention Center.

Some of my favourite talks were:

  1. "Demystifying Web Components as the Weapon for Web Convergence" By Rahat Khanna

  2. "Tiny Computers, JavaScript and MIDI" by George Mandis

  3. "Panel on Progressive Web Apps"

  4. "Background tasks in JavaScript for performance at scale" by Vivek Jagtap

  5. "Life of a JavaScript Developer"(Flash Talk) by Souvik Basu

Networking

Like previous editions of JSFoo, the code of conduct was strictly maintained. This facilitated in intellectual conversations with like-minded developers. One of the speakers, Shivang happened to be staying in the same hotel as mine and we became great buddies over the VR Un-conference. Shivang Shekhar and Ram did justify their address at the VR Uncoference and VR Workshop. Our shared interests in VR made us great buddies over the unconference sessions and we are still in contact with each other.

JSFoo2017-Memories

I was also a part of the Google Cloud Platform Onboarding Conference held in April 2017. The highlights of which were shared as a post on this blog

Travel Stories

aeroplane-travelling-

aeroplane-shot-clouds-travel-iphoneography-iphoneSE-photo

Travelling solo can give new perspectives towards everything and help an individual grow from within. I have been living solo in Bangalore since July and have been flying between the two cities: my home-town, Mumbai and Bangalore.

dhyanlinga-shiv-isha-foundation

I travelled to Coimbatore during December for a rejuvenating stay at Isha Foundation's Dhyanalinga Ashram. The place is very peaceful, and the blissful experience of visiting the place could not be expressed in words.

Last year we saw the tragic demise of Chester Bennington. I came across this beautiful wall paint near Jotinivas collage, Koramangala, Bangalore. As someone who has grown up listening to Linkin Park, I thought of mentioning this tribute painting and including the same in this post.

bangalore-Koramangala-chester-tribute

If you are in Bangalore, you must visit the Sound Garden at Indian Music Experience. As of now, only a few installations have been put up, and there is a sound museum which is under construction. The museum would be opened up sometime in 2018.

For the love of travelling, I had been through a couple of small travels, including a stay in Lonavala with my buddies. In 2018, I plan to have more of such mini-vacations.

lonavala-scenes-nature-beauty-valley

The only real wealth you can carry through life and death is profoundness of experience.

Health & Fitness

Marathon

I ran my life's first marathon on the 24th of September. It was organised by Forum Mall, Bangalore with an intent to spread awareness on Alzheimer.

I completed 3 more runs over the last few months (2x 5km, a 10km and an 8km run). I will be running my first 21km on the 7th of January, 2018.

happiest-minds-marathon-8km

Marathon Tips for first-timers:

  1. If you are running for the first time, ideally go for a 3/5 km run
  2. Jog at a constant pace, do not try to run or compete with a fellow marathoner, you are competing yourself not others
  3. Keep a record of time so that you can use it to set your goals for next run
  4. Don't read too many listicles like these, don't get too obsessed with it
  5. Have Fun! and make friends and smile. (Smiling can be contagious)

Marathon Tips for first 10km run:

  1. Unlike a 5km run, this could need a bit of practice
  2. Try keeping a constant pace throughout the race
  3. Once you feel confident about yourself for future runs, you can safely go for a 20km run
  4. Hydrate yourself

Most of the people would be much appreciative of your effort towards keeping yourself fit and healthy (even if it means running short distance races like 3km/5km/10km) and those who are not, just ignore them. Be motivated, go for as many marathons as possible and keep improving your time-score and distances.

A journey of 1000 miles starts with a single step

I ran my first 21KM run last week and finished in 2 hours and 55 minutes. A couple of pointers

  1. Have a fruit like a banana or an apple with an energy drink before the run. Don't run empty stomach.
  2. Try to finish in 3 hours.
  3. For distances such as a half marathon, one of the most effective training methods is ‘Fartlek’ training which is a Swedish word for ‘speed play’. 'Fartlek' training is also performed while training for sports like Football, Boxing, etc.

Fitbit

I bought a fitness smartwatch, Fitbit Blaze, through July's Amazon Sale. Its been almost 5 months since I am wearing Fitbit Blaze, and I would highly recommend buying it for the following reasons:

  1. Accurately tracks steps, sleep, exercise and fitness goals.
  2. A Mobile app helps to evaluate all of the above, and a weekly report is generated and sent through email. This is very helpful and motivating if you have a specific fitness goal to achieve.
  3. The Fitbit Mobile App has pre-built exercises like Ab workouts, 10-minute warm-ups, etc.
  4. There is a "Relax" feature which helps to take control of breath. Through watch's vibrations, this activity is targeted to make the user more relaxed and calm using breathing exercises guided by a series of vibration-based instructions. You can have a 2 or a 5-minute breathing session. I usually prefer a 2-minute relax session during the day to help me focus and be calmer at work.
  5. A single charge lasts for around 3-4 days on average, which is good enough comparing it to competitors. Charging the battery full takes less than 40minutes.
  6. Economical, considering I bought it for ₹14000
  7. Last but not the least show time and has multiple faces 😉

design-systems-smashing-book-developer-html5-css3

SPIDER

Last but not the least, Although the main focus of this blog was book-reviews and tutorials, I am planning to add a couple of posts on leading a happy, contentful and positive developer life with ways to achieve a work-life balance. Many surprises are coming to this blog in 2018, so stay tuned!

Goals for 2018

I don't believe in new year resolutions. I celebrate each day with equal zest and excitement as the first day of the year.
Nevertheless, in terms of the plan for 2018: it would be more travel, more learning, and making new friends along the way!

Do what you love, Love what you do, and do it with style!