Posts in "General"

7 awesome Visual Studio Code extensions to supercharge your React & React Native development

Visual Studio Code is the editor of choice for a lot of React & React Native developers including me, deservingly so, it’s an amazing editor with a great ecosystem of extensions. Here are some of the extensions I personally use and recommend:

Live Share

The first one is live share, this is very useful when working remotely, it allows you and your teammates to collaborate and code at the same time, this is really useful for that pesky bugs that you can’t wrap your head around. as they say, two heads are better than one!

Animated gif of 2 people highlighting editing code in real-time together.

Extension link

File Utils

File Utils is pretty simple, it provides a much better way to work with files, you can easily create, duplicate, move, rename, delete files and directories.

howto

Extension link

GitLens

Gitlens adds a lot of Git capabilities to visual studio code, including my favorite git blame, which tells you who edited a piece of code last time so you can ask them for more context if needed or blame them for any mess-ups 😉 it also allows you to seamlessly navigate and explore Git repositories, adds powerful comparison commands, and so much more.

If you just want the git blame functionality, check out the appropriately titled Git Blame.

Current Line Blame

Extension link

Color Highlight

Color Highlight gives you a preview of any color written in your code, for example, if you write #FF0000, it will highlight that text in red color. It’s pretty nifty and works with React Native styles too in addition to CSS, SASS, etc.

Extension link

Code Spell Checker

This one does what it says, checks your code for spelling errors, it even supports camelCase. it adds a little more polish to your code and helps you avoid silly mistakes due to wrong variable names.

Example

Extension link

Markdown Preview Enhanced

Very useful to write readmes for GitHub and for writing documentation, shows a preview for your markdown on the right. way better than browser-based online tools

intro

Extension link

Bracket Pair Colorizer

This is pretty nifty as well, it basically makes it easy to differentiate between different blocks of code by changing the color of each pair of opening and closing brackets.

Screenshot

Extension link

Tips for people working from home during the lockdown

With COVID 19 wreaking havoc on the social order, a lot more people are working from home. While not having to commute to work and working in your PJs may sound great, it is not always easy.

As someone who has worked remotely for a significant chunk of my career, it took me a lot of trial and error to get good at it. Below are some tips that help me stay productive, and avoid burnout, while working from home.

Have a routine

It is tempting to wake up and start working from bed (Trust me, I know), but it is very important to maintain a good routine. Get out of bed, shower, get dressed (even if it is your PJs) and have a healthy breakfast before you start your work day.

It is ideal to have consistent set of hours to work. Its best to follow your regular 9-5, even if your company doesn’t require it and make sure you take a midday break for lunch so it keeps you fresh and motivated for the rest of the day.

Do not let your work spill over to the next day, especially over to weekends even if your company allows it. That’s an easy way to feel like you never get a break, and get burnt out.

Know when to switch it off

It is easy to get carried away and keep working beyond your usual hours, especially if you are stuck at a problem, but it’s important to remember to switch off.

You are less likely to fix the issue at hand because you are already drained, and if you keep working late, you won’t be fresh the next day. Instead, stop working when your hours are up, have a relaxing evening and come back at it fresh the next morning.

Block distractions

Try to minimize distractions as much as possible. For digital distractions, I use a Google Chrome extension called block site, which basically does what it says. You can define a list of websites that you want to block while working e.g Youtube, Reddit, Facebook, etc, and it will not let you open those sites.

On the other hand, eliminating offline distractions is a bit more difficult, but not impossible. While having a separate office in your house is not always possible, I recommend keeping your desk in an isolated area in the house, away from everyone.

Using noise isolating headphones is an easy way to block out sounds or voices of family members talking so you don’t get distracted by them. There have been studies that prove that if you hear someone you know talking, you are more likely to get distracted.

Get Comfortable, but not too comfortable

Being comfortable is important, but there is a difference between being comfortable enough to work, and comfortable enough to fall asleep. Make sure it’s not the latter. Have a nice, ergonomic desk and a chair with great back support, and avoid working from your bed at all costs, that is a recipe for disaster and can also affect your sleep pattern.

Stay organized

Create a to-do list for your tasks, apart from your project management software, to breakdown the task into smaller chunks. It helps you stay focused, and it’s very satisfying to tick off the boxes as you get done with things.

Additionally, you can use something like Pomodoro timer to help boost your productivity.

And for the sake of your sanity, keep a clean desk. It’s easy to get messy because no one is watching.

Communicate more

At an office, communicating is easy because you can do it face to face, that is why having good communication skills become even more important when you’re working remotely. My favorite tool to stay in touch with my team is Slack. Use it when you have complex questions that can not be answered through text. I encourage calls among my team, even if it is a 5 minute quick call. A 5 minute call can be way more effective than typing for half an hour.

I hope these tips are helpful. Feel free to share tips that work for you in the comments, I’d love to read them!

Stay safe!

The very first Facebook Developer Event in Dubai.

Few days back I had the opportunity to go to the first ever Facebook Developer event in Dubai.

It was an invite only event where they had three topics to choose from, Messenger Bots, Account Kit and React Native. I chose React Native because I started working with it a few months back and have been enjoying it quite a lot.

My badge.

They told everyone to come prepared with a development environment setup for React Native development in advance which I had already setup for my own projects.

They had a Hands on Code Lab in which they asked everyone to initialize a React Native project do a simple task, I was able to get going pretty quick as I knew how to set it up so I took the opportunity to help other folks who were new to React Native.

What I found the most helpful was that they talked about how to build React Native apps for emerging markets, under powered phones and talked about all the tools facebook has made that help you build apps for under powered phones especially budget Android phones.

During the event.

The event was hosted at INKED inside Alserkal Avenue in Dubai and they even had delicious food.

All in all it was a great experience, I met some like minded folks who I wouldn’t have met otherwise, I am glad I was invited and I hope Facebook does it ever year.