DEV Community: Suborna

5 Questions I asked myself before starting my very first role as a junior developer

Suborna — Tue, 19 Jul 2022 15:25:48 +0000

Hey dev community,

It's been over 2 years since I last posted on Dev so I will first introduce myself with a short description.

In November, 2019, I started my journey as a #codenewbie on Twitter and completed my first #100daysofcode challenge by 6th March 2020. On 8th May, 2020 I landed on my first job as a Software Designer and in time slowly transitioned into a front-end developer role.

If you are a codenewbie, as exciting as it might be to get a job, its also equally scary to imagine what it's like working as a junior developer, what to expect, what's the work culture like etc. The experience of course varies from person to person working at different companies but here I would like to share the top 5 questions I wondered about before joining and how they actually went.

What will my first day of work look like?

The very first day I joined, I started my day by joining the team daily standup where I introduced myself to everyone together with an interesting fact about myself. The rest of them then welcomed me to the team, introduced themselves, shared in interesting fact and let the team leader know what they have been working on as that is the main purpose of the team daily standup.

After the daily standup, I was given a Github link directed to the documentation of "How to get started". I was also asked to check for areas of improvements within the documentations such as spelling errors, broken link etc. So the very first pull request (PR) I created for the codebase was minor improvements related to punctuations and broken link for the documentation. Again nothing scary!

I wonder what tools will I be using?

Usually, one of the developers are in charge of explaining the tools used within the company and in my case I had a meeting with the lead Product Designer, who explained in details what each tools are and how they are used. Below are the few tools I use on a day to day basis:

A task management tool - Target Process --> Azure DevOps
IDE - [WebStorm] Yeah, not VS Code. Surprise, Surprise!
Design tool - Sketch --> Figma
Screenshot tool - Monosnap
End to end testing - Cypress
General Communication - Slack
Formal communication - Outlook

After installing some of the above, I spent some time learning about each, which was a slow progress because getting used to new tools takes time and effort. But, the best part is everyone in the team knows that so you are not expected to know how the tools operate since day 1, specially moving from VS Code to WebStorm was a tough transition for me.

What would be my daily schedules?

As a junior developer, I didn't really have a ton of meetings everyday. The highest number of meetings I had in one day was 4 but that was very rare. Here is how much schedules looked like:

All team standup (3 days a week) - Where only the team leaders speak and let the upper management know what we have been working on.
Team standup (3 days a week) - Where we explain what we have been working on to our team leaders.
Sprint planning (once every 2 weeks) - Let the Scrum Master know, what stories we will be working on in the next 2 weeks.
Retrospective (once every 2 weeks) - ups & downs of the sprint, comments, improvements, appreciations etc.

Who will I be working with?

So this changed a lot based on a lot of ongoing factors occurring within the company but here is the general idea:

There were 4 teams within the organisation:

Integration
Features
On-call
Performance and security

Each team except performance and security had at least 3/4 developers, 1 team leader, 1 designer, 1/2 QA engineer, 1 scrum master and 1 product owner. It is important to note that, even if you are assigned to a specific team at the beginning of your job, you should always keep an open mind towards moving between teams to teams, adjusting to their work culture and moving forward with a fast pace if needed.

What if I need help?

I think this question really keeps us awake at night because we rarely feel confident to apply to jobs as a junior developer because we create imaginary situation where we are stuck at a problem for 2 weeks with no solution what so ever. Here is what I did to overcome this after I joined:

I made very good use of a Slack channel called dev-help where everyone is allowed to share their concerns and issues and there are always developers who would just jump in and help.
Another trick I used to receive help was by checking the code authorship (GitLens extension) and sending them messages directly to see if they can help with the issue I was facing. This doesn't always work but it's worth a shot sometimes.
And the last one is by pair programming. Almost all senior developers will be happy to do a pair programming session with you where they will either demonstrate it for you or ask you to do it yourself with their help. Pair programming always helps to ask questions to the experienced developers, discuss the advantages/disadvantages of certain methods and learn new ways of solving problems which is amazing.

if you are a codenewbie and is currently looking forward to exciting opportunities as a junior developer in the future, I hope you found the above q&a helpful and informative. Thank you for reading

Codiamo, a code journal platform built for code newbies!

Suborna — Mon, 27 Apr 2020 18:09:04 +0000

Codiamo Site | Codiamo web app

Hello dev community 👋 How are you all doing this week?
Some of you may know me from Twitter, but for those of you who don't, I am a code newbie who started learning programming in November 2019. I started with HTML -> CSS -> JavaScript -> React and took part in #100DaysOfCode challenge which finished in 8th of March.

For those of you who don't know what this challenge is all about should read more about it from here

Besides learning how to code, staying motivated while learning to code was one of my biggest challenges, which is why I always recommend absolute newbies to start this challenge. The Twitter dev community is amazing at keeping each other motivated, helping out with bugs, resources & advice. You will never feel alone in the journey and will constantly have other newbies around you who are at the same level as you.

Okay so what is Codiamo?

Most of the experienced developers on Twitter recommends code newbies to, first of all, do the #100daysofcode challenge and secondly, document their journey. Why? Because since we are new to development, we easily lose track, feel unmotivated, lose focus and go through a phase I like to call the "dark zone" when after doing learning to code for a few weeks you start doubting if coding is actually for you because JavaScript is nothing close to what HTML/CSS is like (Rainbows & Unicorns).

Codiamo is a coding journal platform designed by me and developed by my husband, Foysal to allow newbies to keep track of their daily coding activities and stay on track of their progress. You will have 24 hours to add the activities and 24 hours to edit them. So there is no way to cheat!

On top, I believe keeping a diary of our activities will allow us to show our future employers what we have been up to in a more organised way. As a beginner, it's always hard to convince our employers that we are hard workers and have been active in the learning process everyday. Sure Github does it for us but it takes some time to learn how Github works and we don't always write code to learn how to code. We read books, play coding games, watch interesting tutorials, listen to podcasts and so on.

Import

If you have already started your challenge on Twitter and would like to use Codiamo to track your progress, then the good news is we allow you 3 days to import your previous activities from Twitter to Codiamo but the bad news is you will have to import your days manually due to Twitter restrictions.

Features

Currently, Codiamo has these features:

Different type of activities

A statistics page

Reacting to other's activities

A heatmap like GitHub with 3 different activity shades.

Choosing courses from different platforms & will be added more per user's request

Twitter share

Dark mode

Option to also make an activity private
Search
Little Animations - hehe! It's not a feature but I am so excited that I have learnt how to do small animations on webpages! I had to mention that it exists!

Upcoming features

A news feed where users can see everyone's activities altogether on one page should be coming very soon.

I started my second round of the challenge today and using Codiamo to document my journey. Check it here

You can also check out my brother's Codiamo profile who is currently 15 years old and learning programming and was my personal guinea pig ❤️. Thanks to him for being my own personal Codiamo tester. Link

Let us know what you think of the platform and the kind of features you would like to see. Looking forward to hearing your feedback!

Note: The app does not intend to replace Twitter for new developers but rather encourages to use it as a great resource and social platform. The only intention of Codiamo is to never lose the hard work we put into our challenges and keep our day to day activities in one place.

Happy Coding everyone!

What I am currently doing as a code newbie and possibly you should do too

Suborna — Sun, 05 Jan 2020 16:13:37 +0000

Originally published here

A little about myself

As mentioned before in my previous blog posts, I am a code newbie with just over 2 months of experience in HTML, CSS & JavaScript. I am currently playing around with ReactJS by following "The Complete React Developer Course (w/ Hooks and Redux)" course by Andrew Mead on Udemy. Other than learning how to code, here are a few things I am currently doing that I believe will help me become a successful web developer.

1. Commit to 100DaysOfCode challenge on Twitter

Committing to the 100DaysofCode challenge will allow you to stay on track, meet people with the same level of experience as you and receive help whenever necessary. But most important of all, you will start to realise you are not alone in this. This is a feeling I had to keep fighting because I thought being 27 is way to late to start programming as my husband Foysal wrote his first line of code when he was 19 and now he is 27 with 8 years of experience. But if you surround yourself with people who are also committed to the same challenge, you will realise people of all ages are learning how to code and it's never too late. I am currently on my 49th day and as soon I finish my first round I am hoping to start a second because I really feel like it just keeps me going!

2. Reduce procrastination

I have come across people who look for excuses to delay their learning process. Some of the scenarios are like the followings:

I will start on New Year
I will start on my Birthday
I will start from the beginning of the month

By the time the day of your choice arrives, you are more likely to loose motivation than gain it. So I highly recommend you to just start, it's as simple as that! Whether you are planning to change your career or look for a job in this sector, today is the day to start learning, not tomorrow, not on your birthday, not at the beginning of the month! It's Today! So let's get going!

3. Consistency

You may have a part-time/full-time job, university, kids, cooking, chores or other things to do in your day to day life and that's okay. In the very beginning, try not to overwhelm yourself with too much information instead do less but stay consistent. The way I am currently learning is by coding for 2-3 hours everyday without any break. I make sure I write at least a few lines of code everyday instead of working for a longer period within a day and end up taking a break the next day. This way the information I receive from tutorials stays short and memorable.

4. Apply to jobs

I don't have a job yet but I am constantly applying and I believe you should do the same even if you are not ready yet. Applying to jobs at an early stage was highly recommended by an author in an article I was reading through once. Sure, you/I are more likely to get rejected than to get hired but at least we get to learn the process of applying as early as possible. Also we both think that we don't know enough to apply to jobs just yet but once we do know enough, it's not like we will land on a job within a week. So why not apply as early as possible and learn both the language and process of job application simultaneously?

5. Join Meetups

I know, I know! We are very shy and we hate meeting people and talking to them about languages we just have basic ideas on makes it even harder but I believe this will extremely come in handy specially when it comes to our first job. A word of mouth always gets you a quicker job than applying online. But that is not the only advantage! We also get to meet people with similar experience as ours, discuss about our projects and most of all make new friends in our local area.

6. Write Blog posts

This is what I am doing right now! I am feeling like everything I have written so far in this post might be useless and wouldn't help anyone but I am still here writing about it. I have been coding for over two months and I have already received a few emails from companies asking me if I am interested in a certain position. Unfortunately all the positions require on-site presence and I will not be able to relocate at the moment but the first thing they mention when they reach out is "hey I have read your blog posts on dev.to....." and that gave me a huge confidence boost so I decided to write more blog posts and would ask you to do the same.

7. Be active on Twitter

Of course within a certain limit so that you don't get carried away. Follow experienced developers as well as developers that are currently learning just like you. If you come across anything that's interesting to you or you have learnt something new from someone's post, make sure you let them know by leaving a comment every once in a while, which can be a starting point to make friends with someone. Don't be afraid to send them a personal message asking more about the current projects they are working on and if they would like to stay in contact. YES! I know it gets awkward at times but that's just how it is!

Now I possibly wouldn't have put this as a point unless I have made a very good friend through Twitter. On November 7th, 2019 Mikey sent me a message asking if we should start our 100DaysOfcode challenge together. I was on vacation in Denmark back then so I asked if he would mind waiting until 18th as I will be back from vacation on 17th Nov, 2019. So we started the challenge together straight away on 18th! Now this was unexpected but me and Foysal had to go to Frankfurt in December and Mikey happens to be living only an hour away from Frankfurt, so we planned for a get together and he was kind enough to come to Frankfurt to meet us both. Right now we are extremely good friends and we share our knowledge about food, country, culture, religion and programming all the time, which is amazing.

That is all from me today and what I am doing currently on my day to day life. I would love to add more to this so let me know if you are doing anything else other than the ones I have mentioned above to become a successful developer.

Tips for code newbies from an experienced programmer

Suborna — Wed, 11 Dec 2019 19:10:58 +0000

ABOUT ME [The Code Newbie]

As mentioned before in my previous blog posts, I am a codeNewBie who has started learning front-end development for just over a month. I am currently learning HTML, CSS and Javascript on FreeCodeCamp, Udemy, CodeCademy and Youtube.

ABOUT FOYSAL [The Programmer]

Also this has been mentioned before but I am extremely lucky to have my husband, Foysal beside me who also happens to be a programmer with 8 years of experience in web development and the solution to all my programming related issues. Through him, I have received a lot of coding related advices which I feel other code newbies may not be privileged enough to receive or not at least until they start a job or find a mentor.

Hence I have decided to share those advises with you code newbies to fill in the gaps earlier rather than at a later stage of their programming career.

1. SHORTCUTS

Try to stay on the keyboard as much as possible which means learning the shortcuts of the code editor you are using and avoid using the mouse as much as possible to perform an action. This may not feel like a big deal at the moment but when you actually start building a project and you have to add, edit or delete certain block of code on a massive project with hundreds of lines of code, those shortcuts will extremely come in handy. So start practising the shortcuts as early as possible.

If you are not familiar with a lot of shortcuts I have a post here on dev.to that might help you get started.

2. INDENTATIONS

Programming language such as Python relies on indentations meaning the program might break altogether based on your indentations. However, even if that's not the case for other languages such as: JavaScript, it is equally as important to practice getting the indentations right to improve readability and to be able to easily maintain and navigate through the code you have written over time.

3. NAMING CONVENTIONS

This one is my favourite one! Foysal's advice is to name our functions with a 'verb' and name our variables with a 'noun'. The reason behind this logic is that, functions always perform an action which is a 'do'. Anything you do is a verb so name your functions with a verb. On the other hand, noun is just names used to identify people, places or things.

DO

function checkAuthentication () {
    // get authentication info from database/browser storage etc.
    const authenticationInfo = getAuthenticationInfoFromDatabase();

    if (authenticationInfo)
        return true;

    return false;
}

DON'T

function authentication () {
    // get authentication info from database/browser storage etc.
    const auth = authenticationInfo();

    if (auth)
        return true;

    return false;
}

It is more than okay to have very long names for functions and variables as long as it helps you understand the action you are performing very well. So you/I should stop being lazy or reduce the urge to shorten function/variable names (e.g. auth instead of authentication) because apparently our future self will thank us for appropriate naming conventions.

4. COMMENTS

Always practice leaving a comment next to your code which again, will improve the readability and help you maintain the code at a later stage. Comments and naming your functions/variables appropriately work together to jog your memory and it will eventually reduce stress and time consumption as you won't have to spend any extra time figuring out your own code.

5. CONSISTENCY

There are many rules programmer follow to stay consistent within/across their projects. I am just trying to follow Foysal's recommended way of staying consistent but that does not necessarily mean you have to do too. You can build your own rules as long as the rules remain consistent. A few of his recommendations look like the following:

Naming Files/Images - kebab-casing
Naming Objects - PascalCasing
Naming Variables/Functions - camelCasing

If you don't know the casing types used in programming, then read my blog on casing types here

READING CODE

Try looking through experienced programmer's code on Github to see how they write/organise their code and what you can do as a developer to improve your writing. Look through their files to understand more about coding structures, file names, indentations and so on.

ADDITIONAL TIPS

USERNAME

Always try to use the same username everywhere you sign-up to allow others to find you easily. This will not only build your self-identity but also allow others to recognise you easily in different platforms. Examples where you may sign up as a developer includes:

Github
Twitter
Stack Overflow
Dev
Medium
Envato

BROWSER

Internet is like a unicorn and not getting distracted by a unicorn is always almost impossible, which is why while programming whether you are learning or working you should always separate your browsers into two sections: Programming & Personal. For example, use Chrome for programming related purposes and Firefox for Amazon purchases, redditing, 9gagging or anything else that gives you joy. This will allow you to stay focused and not open other websites that may distract you from learning or focusing on your work.

Most of the above recommendations/tips are personal opinions formed through personal experiences and programmers working with different tools under different conditions might form opinions that differ from the above.

If you are an experienced programmer and have other recommendations/tips, please let me know on the comment below. I would love to hear your opinion regarding this. Thank you for reading!

Common casing types in programming

Suborna — Tue, 10 Dec 2019 18:13:41 +0000

Casing is such an important idea in programming that languages usually include various case conversion functionality out of the box. Such as .toLowerCase() or .toUpperCase() in JavaScript.

As I have mentioned before I am very new to programming, it's only been more than a month and within this period I have been practicing HTML, CSS and the basics of JavaScript and I have come across new casing terminologies that I have never heard before and would like to share them with other code newbies.

While learning JavaScript I have seen programmers use different types of casing in order to name their variables, functions and file names but I did not know they had specific names. Here is what I have discovered recently about casing:

PascalCase

In PascalCasing, all the words used to name a variable or a function starts with capital letters. For example:

ThingsToDo
MoviesWatched
FoodsSoldToday

camelCase

In camelCasing, the first letter of the word is always small letter and the rest of the words are always capital letter. so for example:

thingsToDo
moviesWatched
placesToGo

kebab-case

In kebab-casing, every word will be followed by a hyphen with all small letters. I believe the name comes from how a stick in inserted through a shish kebab. Usually you wouldn't be able to use kebab-casing for variables and functions. For example:

things-to-do
places-to-go
movies-to-watch

snake_case

In snake_casing the cases will have an underscore after each word which would look like a snake walking or a snake just snaking around. Examples would look like the following:

things_to_do
places_to_go
movies_to_watch

VS Code Shortcuts for code newbies [mac/windows][GIF]

Suborna — Sun, 08 Dec 2019 21:29:14 +0000

As a codeNewBie I realised the importance of shortcuts as soon as I started programming. Shortcuts not only allowed me to code quicker but it also helped me stay on my keyboard instead of reaching out to my mouse every time, which at times does start to get annoying. If you are a codeNewBie like me then I would highly suggest you to learn the shortcuts below:

Basic shortcuts

You should know the following shortcuts regardless of whether you are learning how to code or not. These shortcuts work everywhere and not particular to VS Code.

Select All

Mac - ⌘ + A
Windows - Ctrl + A

Copy

Mac - ⌘ C
Windows - Ctrl C

Paste

Mac - ⌘ + V -
Windows - Ctrl + V

Save current file

Mac - ⌘ + S
Windows - Ctrl + S

Undo last action

Mac - ⌘ + Z
Windows - Ctrl + Z

Open file

Mac - ⌘ + O
Windows - Ctrl + O

Close window/tab

Mac ⌘ + W
Windows - Ctrl + W

Search for keywords on your current document

Mac ⌘ + F
Windows - Ctrl + F

VS code specific shortcuts

As soon as I open my VS code editor I always try to make sure I practice the following shortcuts:

Sidebar open/close

Mac - ⌘ + B
Windows- Ctrl + B

Open new tab

Mac - ⌘ + N
Windows - Ctrl + N

Cut line (copies the line and removes it)

Mac - ⌘ + X
Windows - Ctrl + X

Quick Fix [Suggests spelling correction if code spell checker plugin is installed]

Mac - ⌘ + .
Windows - Ctrl + .

The beginning/end of a code line

Mac - ⌘ + ←/→
Windows - Ctrl + ←/→

The beginning/end of the file

Mac - ⌘ + ↑/↓
Windows - Ctrl + ↑/↓

Move from one window to another window

Mac - ⌘ + Tab
Windows - Alt + Tab

Split the code editor

Mac - *⌘\*
Windows - *Ctrl\*

Go to line (e.g. 6, would take you to line 6 of your code file)

Mac - ⇧ + G
Windows - Ctrl + G

Delete an entire line

Mac - ⇧ + ⌘ + K
Windows - Ctrl + Shift + K

Move current line up/down

Mac - ⌥ + ↓ / ⌥ + ↑
Windows - Alt + ↓/↑

Create multiple cursors

Mac - ⌥ + click
Windows - Ctrl + click

Opens the last tab you closed

Mac - ⇧ +⌘ + T
Windows - Ctrl + Shift + T

Select each character right or left

Mac - ⇧ + ←/→
Windows - Shift + ←/→

Select each word right or left

Mac - ⌥ + ←/→
Windows - Alt + ←/→

Redo last action

Mac - ⇧ + ⌘ + Z
Windows - Ctrl + Shift + Z

These are all I can remember off the top of my head at the moment but if you have any other recommendations or useful shortcut suggestions please let me know.

CSS style hierarchy

Suborna — Sat, 07 Dec 2019 12:14:50 +0000

I am a codeNewBie who has started learning HTML, CSS and JavaScript since October 2019 and have completed the "Basic CSS" course from freecodecamp very recently. Learning CSS has been an amazing journey so far power but the power of classes and IDs and who overrides whom still remained confusing to me, hence I have decided to write this post to allow myself and you to understand the hierarchy a little better and in-depth using scenarios.

Override hierarchy

There are many ways we can style our html element tags using CSS. We can override style rules by using different type of selectors. Below is a demonstration of which CSS selector has precedence over other css selectors:

SCENARIO 1

<h1>
    Cat Shop
</h1>

body {
    color: green;
}

Output: Cat Shop is green.
Reason: Because we have assigned the color green to the body element.

SCENARIO 2

<h1>
    Cat Shop
</h1>

body {
    color: green;
} 
h1 {
    color: red;
}

Output: Cat shop is red.
Reason: Even though our parent container element body sets the color to be green, we are overriding the parent style rule with child element selector.

SCENARIO 3

<h1 class="blue-text">
    Cat Shop
</h1>

body {
    color: green;
} 
h1 {
    color: red;
}
.blue-text {
    color: blue;
}

Output: Cat Shop is blue.
Reason: A class can override the style rule set through the element selector.

SCENARIO 4

<h1 class="blue-text pink-text">
    Cat Shop
</h1>

body {
    color: green;
} 
h1 {
    color: red;
}
.blue-text {
    color: blue;
}
.pink-text {
    color: pink;
}

Output: Cat Shop is pink.
Reason: The order of the classes listed inside the <h1> element is irrelevant. However, in CSS, the second declaration will always override the first declaration because browsers always read CSS from top to bottom in order of their declaration. Since pink-text is below the blue-text, the text of Cat Shop changed to Pink.

SCENARIO 5

<h1 id="orange-text" class="blue-text pink-text">
    Cat Shop
</h1>

body {
    color: green;
}
h1 {
    color: red;
}
.blue-text {
    color: blue;
}
#orange-text {
    color: orange;
}
.pink-text {
    color: pink;
}

Output: Cat Shop is orange.
Reason: ID selector always takes precedence over class selector regardless of whether it was declared above or below the class style.

SCENARIO 6

<h1 style="color: black;" id="orange-text" class="blue-text pink-text">
    Cat Shop
</h1>

Output: Cat Shop is black.
Reason: Notice how we added style="color: black;" to our h1 element. Inline HTML style attribute overrides the element, class and the ID selectors altogether.

SCENARIO 7

<h1 style="color: black;" id="orange-text" class="blue-text pink-text">
    Cat Shop
</h1>

body {
    color: green;
} 
h1 {
    color: red;
}
.blue-text {
    color: blue !important;
}
#orange-text {
    color: orange;
}
.pink-text {
    color: pink;
}

Output: Cat Shop is blue.
Reason: !important is the most powerful of all. So when you absolutely need to be sure that an element has specific CSS, you can use !important which overrides all of element, class, ID selectors and inline style attribute. Using !important should be last resort when attempting to override a previously defined style rule.

I hope the scenarios were helpful to you and if you have suggestions regarding other scenarios please let me know in the comment. Also like I mentioned before I am very new to programming as as well writing blog posts, so if any mistakes were found please feel free to correct me. Thank you for reading!

VS Code plugins for code newbies

Suborna — Fri, 06 Dec 2019 20:51:50 +0000

I have started coding very recently (about 1-2 months) and have been using Visual Studio (VS) code as my primary code editor since day one. VS code is currently available on all major operating systems: Windows, Linux and macOS and if you are not familiar with it and would like to know a bit more, then click here.

VS code as well as the plugins I mentioned below was recommended to me by my husband Foysal who has 8 years of experience in full stack development. He had other plugin recommendations too but I, as a codeNewBie did not feel the need of those plugins just yet. The plugins below not only made my life as a codeNewBie a lot easier but it also allowed me get things done quicker in a less frustrated way as well as made my editor feel more like a home I decorated myself.

In order to install the plugins, you can click on extensions icon found on the side menu and just type in the plugin names.

Plugin 1 - Live Server

I found this plugin incredibly helpful when working with HTML & CSS especially when I try to, suppose: practice building a webpage or a sign-up form. It runs a web server for you and gives you a browser accessible localhost address and will automatically refresh the browser every time you update the code on your code editor so you don't have to manually click on the refresh button.

Link: Live Server

Plugin 2 - Browser Preview

This plugin is particularly helpful when you don't want to go back and forth from editor to browsers such as Chrome or Firefox to check the changes you have made in your code. After installing the plugin it will create its own button on the side menu and when the button is clicked the editor will split and a browser will open on the right hand side.

Also do not forget to open the html file on browser, copy the file path link and paste it onto the preview browser. If live server is installed, copy the localhost link and paste it onto the browser to get live updates.

If this section confuses you please feel free to get in contact with me via Twitter. I will be happy to tell you more in details.

Link: Browser Preview

Plugin 3 - Carbon-now-sh

Since I am currently working towards the #100DaysOfCode challenge on twitter, I often share a screenshot of my code together with the updates of my everyday progress until I found this plugin. This plugin will allow you to create beautiful images of your code and directly share it on twitter. In order to use it:

Install the plugin
Select the lines of code you would like to share
Press [option + cmd + a] which will take you to a browser where you can edit the code however you like.

If you are like me and you struggle to remember shortcuts, then do the followings below:

Press [cmd + shift + p] to open up the VS code terminal
Type carbon, and just click on the highlighted selection of carbon which will then take me to the browser.

Link: Carbon-now-sh

Plugin 4 - Code Spell Checker

This plugin will underline any mistakes such as spellings you have made in your code which might end up causing an error. Instead of going through the code and figuring out yourself what might be causing it, you can just skim through the code very quickly to see if any of your code is underlined red before you look for the other reasons why your code might not be working as it should.

Link: Code Spell Checker

Plugin 5 - Rainbow Brackets

I find this plugin particularly helpful when playing around with JavaScript. Mainly because JavaScript coding requires the use of brackets a lot. This plugin will allow you to visualise the brackets a lot better and will highlight the end bracket of a code block if the bracket of the beginning code block is missing or accidentally removed (ref: second image).

Link: Rainbow Brackets

Plugin 6 - Theme

If you are someone like me who spent like a whole day playing around with plugins, installing and uninstalling various types of theme and so on to make the codes look more colourful and presentable 😛 (I know I know I am crazy!) then here are a few VS code themes I would suggest:

Horizon - This one is my current favourite one at the moment.

Plugin 7 - Icons

At the moment I am using Material Icon Theme as my default. I feel like these icons are a lot more representable, highly contrasted and eye catching and gives meaning to each of your files. I have provided the Material Icon Theme link here but feel free to explore others.

Link: Material Icon Theme