<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: Aakansha Doshi</title>
    <description>The latest articles on DEV Community by Aakansha Doshi (@aakansha1216).</description>
    <link>https://dev.to/aakansha1216</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F78617%2Fb4159c1d-fba5-4f4a-b01e-f98ebd2b77af.jpeg</url>
      <title>DEV Community: Aakansha Doshi</title>
      <link>https://dev.to/aakansha1216</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/aakansha1216"/>
    <language>en</language>
    <item>
      <title>Announcing Canvas X React Workshop in January 2025</title>
      <dc:creator>Aakansha Doshi</dc:creator>
      <pubDate>Tue, 26 Nov 2024 15:18:00 +0000</pubDate>
      <link>https://dev.to/aakansha1216/announcing-canvas-x-react-workshop-in-january-2025-4o54</link>
      <guid>https://dev.to/aakansha1216/announcing-canvas-x-react-workshop-in-january-2025-4o54</guid>
      <description>&lt;h2&gt;
  
  
  My Canvas Journey: From Novice to Builder
&lt;/h2&gt;

&lt;p&gt;Canvas often feels like a mystery box - we use tools built on top of canvas, but few of us truly understand how it works. If you're a JavaScript developer, this might sound familiar 😊.&lt;/p&gt;

&lt;p&gt;Back in May 2020, when I was at &lt;a href="https://www.hackerrank.com/" rel="noopener noreferrer"&gt;HackerRank&lt;/a&gt; and we were looking for a whiteboard to integrate, we chose &lt;a href="https://excalidraw.com/" rel="noopener noreferrer"&gt;Excalidraw&lt;/a&gt; for its simplicity after reviewing many options.&lt;br&gt;&lt;br&gt;
Back then, I was very familiar with &lt;em&gt;React, Webpack, and other tools&lt;/em&gt; as I used them daily at work. So, I proposed to the excalidraw team that we could build an &lt;a href="https://github.com/excalidraw/excalidraw/issues/1196#issuecomment-613674922" rel="noopener noreferrer"&gt;npm package.&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Since Excalidraw was at a very early stage and supporting the npm package would introduce a huge change in the codebase, it took me some time to convince them. Meanwhile, I forked the repo, and we shipped the editor at HackerRank.&lt;/p&gt;

&lt;p&gt;However, I was aware of the nightmare it would introduce to keep the forked codebase up to date if we don’t push the changes to the base repository so I was having back-and-forth conversations with the Excalidraw team regarding the npm package.&lt;br&gt;&lt;br&gt;
Finally, after &lt;em&gt;~8 months&lt;/em&gt;, &lt;a href="https://x.com/excalidraw/status/1337081622731116550" rel="noopener noreferrer"&gt;WE DID IT!&lt;/a&gt; This was my &lt;em&gt;AHA&lt;/em&gt; moment! Thus, I started maintaining the npm package.&lt;/p&gt;

&lt;p&gt;However, I knew nothing about Canvas, but I was really curious about how these drawing tools worked inside. It seemed so cool that you could draw any shape and interact with it.&lt;/p&gt;

&lt;p&gt;As a maintainer of the NPM package, I had the chance to dive deep into the codebase. However, the canvas was still a puzzle I was trying to solve.&lt;/p&gt;

&lt;p&gt;Over time I learned a lot (&lt;em&gt;I am still learning as learning can never end :p&lt;/em&gt;) and started building core canvas features, some of which were &lt;a href="https://x.com/aakansha1216/status/1471509326674030592" rel="noopener noreferrer"&gt;Text containers&lt;/a&gt;, &lt;a href="https://x.com/excalidraw/status/1599792132725669888" rel="noopener noreferrer"&gt;Labeled arrows&lt;/a&gt;, &lt;a href="https://x.com/excalidraw/status/1570059398881636354" rel="noopener noreferrer"&gt;adding points in line segments&lt;/a&gt;, &lt;a href="https://x.com/aakansha1216/status/1489256535817854977" rel="noopener noreferrer"&gt;hyperlinks&lt;/a&gt;, and more, and every time I realized there weren’t enough resources on the web about Canvas.&lt;/p&gt;

&lt;h2&gt;
  
  
  Why this workshop?
&lt;/h2&gt;

&lt;p&gt;Besides my passion for open source, I love sharing what I've learned and experienced. As there aren’t enough resources on the web regarding Canvas, I want to make it more accessible so anyone can easily learn about it.&lt;/p&gt;

&lt;p&gt;That's how I started speaking at conferences three years ago. I always aim to share my insights in my talks, and I enjoy doing it.&lt;/p&gt;

&lt;p&gt;I’ve delivered &lt;em&gt;talks&lt;/em&gt; and &lt;em&gt;podcasts&lt;/em&gt; on Canvas, where I discuss building features like &lt;em&gt;text containers, labeled arrows,&lt;/em&gt; and other &lt;em&gt;whiteboard functionalities&lt;/em&gt;, along with how they are implemented in &lt;em&gt;Excalidraw&lt;/em&gt;. You can check out my &lt;a href="https://blog.aakansha.dev/talks" rel="noopener noreferrer"&gt;talks&lt;/a&gt; and &lt;a href="https://blog.aakansha.dev/appearances" rel="noopener noreferrer"&gt;podcasts&lt;/a&gt; (&lt;em&gt;I will be adding the 2024 ones soon&lt;/em&gt;).&lt;/p&gt;

&lt;p&gt;While giving these talks, I noticed that although not many people explore Canvas-related topics, the audience is curious and enjoys learning about the unknown and how things work behind the scenes. &lt;em&gt;This inspired me to do it even more!&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;Since then I wanted to dive in one level deeper and do a workshop where we not only dive into the concepts but also build this stuff together - yes that’s the &lt;strong&gt;IDEA&lt;/strong&gt; - A deep dive Hands-on workshop where we start from the basics and deep dive into internals turning these implementations into reality.&lt;/p&gt;

&lt;p&gt;I have been thinking of doing this workshop for months and years. Last year I gave a workshop about &lt;em&gt;“Building a whiteboard from scratch”&lt;/em&gt; at &lt;a href="https://x.com/aakansha1216/status/1707464056930496608" rel="noopener noreferrer"&gt;React Alicante&lt;/a&gt; and wanted to do more. But I couldn’t prioritize it but &lt;strong&gt;&lt;em&gt;why am I finally doing it?&lt;/em&gt;&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Recently at &lt;a href="https://www.reactindia.io/" rel="noopener noreferrer"&gt;React India&lt;/a&gt; in Goa, &lt;a href="https://x.com/TejasKumar_" rel="noopener noreferrer"&gt;Tejas&lt;/a&gt; and I were having a casual conversation, and suddenly this topic came up: "&lt;em&gt;Hey Aakansha, why don’t you run a workshop on Canvas?&lt;/em&gt;", I replied, "&lt;em&gt;Really? Do you think people will be interested? I have been thinking about this for a long time&lt;/em&gt;".&lt;br&gt;&lt;br&gt;
Tejas is an awesome community member and an amazing friend. He strongly encouraged me to go for it, and the following week, I launched the website with the workshop announcement✨.&lt;/p&gt;

&lt;p&gt;Hence here I am doing the workshop On &lt;strong&gt;January 25, 2025.&lt;/strong&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  What will you learn?
&lt;/h2&gt;

&lt;p&gt;The workshop will start with the &lt;em&gt;basics&lt;/em&gt;, keeping it &lt;em&gt;beginner-friendly&lt;/em&gt;, right from how to render the Canvas and then take a deep dive into the internals.&lt;/p&gt;

&lt;p&gt;And the best part is it’s not just theory but &lt;em&gt;lots and&lt;/em&gt; &lt;em&gt;lots of hands-on&lt;/em&gt;. Here is a quick overview 👇&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;HTML Canvas Fundamentals&lt;/strong&gt; - Learn how to use &lt;em&gt;Canvas APIs&lt;/em&gt; for &lt;em&gt;drawing&lt;/em&gt; &lt;em&gt;shapes and paths.&lt;/em&gt; This will ensure the workshop is completely &lt;em&gt;beginner friendly&lt;/em&gt; and slowly we deep deeper into internals.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Hit Testing and Interactive Canvas -&lt;/strong&gt; Have you wondered how &lt;em&gt;user interactions&lt;/em&gt; work in Canvas? To understand this will be diving into techniques like &lt;em&gt;Hit Testing&lt;/em&gt; to enable the &lt;em&gt;selection, movement,&lt;/em&gt; and &lt;em&gt;resizing&lt;/em&gt; of Canvas shapes.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Navigating the Infinite Canvas&lt;/strong&gt; - Building &lt;em&gt;Infinite Canvas&lt;/em&gt; and learning how to manage the viewport to make it interactive. This might be your favorite part as everyone loves endless Canvases, isn’t it?&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Text and HTML Rendering&lt;/strong&gt; - Rendering &lt;em&gt;Text&lt;/em&gt; in Canvas and making it &lt;em&gt;interactive&lt;/em&gt; with HTML elements. This might sound simple but there is a lot to explore when it comes to text rendering and making it in sync with the HTML Input element used for updating the text element.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Performance Optimizations&lt;/strong&gt; - Learn how to improve &lt;em&gt;performance&lt;/em&gt; with complex Canvas applications. During the workshop, we will come across cases where we need to improve the performance for rendering the Canvas shapes and this will help us understand the techniques which can be used to improve the performance of Canvas-based applications.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Build a Mini Whiteboard&lt;/strong&gt; - This is the best part as together, we will build a &lt;strong&gt;mini Canvas-based whiteboard editor&lt;/strong&gt; using all the concepts learned above.&lt;/p&gt;&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;You can find more details about my workshop &lt;a href="https://aakansha.dev/workshops/canvas" rel="noopener noreferrer"&gt;here&lt;/a&gt;.&lt;/p&gt;

&lt;h2&gt;
  
  
  Register with an Early bird discount
&lt;/h2&gt;

&lt;p&gt;If any of this sounds interesting and exciting to you, sign up for my &lt;a href="https://aakansha.dev/workshops/canvas" rel="noopener noreferrer"&gt;workshop&lt;/a&gt; with a special &lt;strong&gt;early bird discount of&lt;/strong&gt; &lt;strong&gt;40%&lt;/strong&gt;. I would love to see you there!.&lt;br&gt;&lt;br&gt;
If you know someone who might be interested, please do share it with them :).&lt;/p&gt;

&lt;p&gt;Since it's a live workshop, &lt;strong&gt;seats are limited&lt;/strong&gt;, so the sooner you register, the better :). The &lt;em&gt;recordings&lt;/em&gt; will also be provided after the workshop.&lt;/p&gt;

&lt;p&gt;I am still working on the &lt;em&gt;exact time&lt;/em&gt; of the workshop, based on the registrants across the world and I will soon share more details on the same.&lt;/p&gt;

&lt;p&gt;If you have any questions or suggestions, please comment or contact me on &lt;a href="https://www.linkedin.com/in/aa1992/" rel="noopener noreferrer"&gt;LinkedIn&lt;/a&gt;, &lt;a href="https://twitter.com/aakansha1216" rel="noopener noreferrer"&gt;Twitter&lt;/a&gt;, or &lt;a href="https://bsky.app/profile/aakansha.dev" rel="noopener noreferrer"&gt;Bluesky&lt;/a&gt;. I'd love to hear from you!&lt;/p&gt;

&lt;p&gt;If anything is stopping you from joining the workshop, my DMs are open. Let me know, and I'll do my best to help :)&lt;/p&gt;

&lt;h2&gt;
  
  
  Closing thoughts
&lt;/h2&gt;

&lt;p&gt;I am very excited about the workshop. I'm learning a lot during this process, though I must admit some things are quite challenging! I will document all my learnings and experiences from this workshop.&lt;/p&gt;

&lt;p&gt;Until then, goodbye and have a great day and see you soon!&lt;/p&gt;

</description>
      <category>canvas</category>
      <category>react</category>
      <category>workshop</category>
      <category>excalidraw</category>
    </item>
    <item>
      <title>My First Talk</title>
      <dc:creator>Aakansha Doshi</dc:creator>
      <pubDate>Sun, 11 Sep 2022 13:56:44 +0000</pubDate>
      <link>https://dev.to/aakansha1216/my-first-talk-3k2b</link>
      <guid>https://dev.to/aakansha1216/my-first-talk-3k2b</guid>
      <description>&lt;p&gt;Hello everyone 👋🏻. The "First" in everything we do has its own importance, isn't it? Throughout my career, I have mentored a lot of people and I have seen this hesitation in a lot of them too to get started with public speaking. I believe it's very natural and all of us faced this at some stage. So why exactly am I writing this blog? Well, I am one of you who always had hesitation, stage fear, and self-doubt about getting started with public speaking! How does one exactly start to give talks? Should I actually give a talk? Should I submit CFP? What if it doesn't get selected? And a lot more of these kinda questions crossed my mind and I always resisted to start speaking. I have given a few talks till now but &lt;em&gt;The First Four Talks&lt;/em&gt; I gave have been very special for me and each with different learning. In this blog, I will share my experience of my &lt;strong&gt;First&lt;/strong&gt; talk and I am sure a lot of you will be able to relate to it as well 😊&lt;/p&gt;

&lt;h3&gt;
  
  
  Convincing myself
&lt;/h3&gt;

&lt;p&gt;I wanted to start giving talks but I was too worried and self-doubting about how and where to start. This is very natural and must be happening to most of us. I was working at &lt;a href="https://twitter.com/hackerrank"&gt;HackerRank&lt;/a&gt; and as part of the quarterly review, this was one of the feedback I had gotten multiple times as well that I should start giving talks!&lt;br&gt;&lt;br&gt;
In 2019 I finally decided to put it as one of my goals on my personal road map. Till now I had no idea what topic, or where to give but yeah I wanted to start to finally be able to &lt;em&gt;break this ice&lt;/em&gt;.&lt;/p&gt;

&lt;h3&gt;
  
  
  Deciding the topic
&lt;/h3&gt;

&lt;p&gt;There were a couple of topics like &lt;em&gt;Testing&lt;/em&gt;, &lt;em&gt;Code review&lt;/em&gt;, &lt;em&gt;React related topics&lt;/em&gt; in my mind but I wasn't sure which to pick as I was totally confused. I had been reading "You don't know JS" By &lt;em&gt;Kyle Sympson&lt;/em&gt; and I just the book.&lt;br&gt;&lt;br&gt;
So I thought let me try giving a talk about &lt;strong&gt;Scope&lt;/strong&gt; as I was very inspired with the way Kyle approaches a topic and conveys it to the audience.&lt;br&gt;&lt;br&gt;
After a number of iterations, I finally decided on the talk title &lt;em&gt;Do you understand Scope in Javascript ?&lt;/em&gt;.&lt;/p&gt;

&lt;h3&gt;
  
  
  Where should I give the talk?
&lt;/h3&gt;

&lt;p&gt;The option to give a talk at the office was always there. We used to have Tech talks every Friday but here is one theory that I believe in since I was so anxious about giving the talk and also worried about what will happen if something goes wrong. I was worried about how will I face my colleagues so I decided to give my first talk outside where less / no one will know me and it might be easier for me to give the talk then as I would have less pressure.&lt;/p&gt;

&lt;h3&gt;
  
  
  Submitting the CFP
&lt;/h3&gt;

&lt;p&gt;Since I decided to give my talk outside the office, I started to look for places that I could explore. Bangalore is a very active place with meetups and you will pretty much find meetups for all categories. So I came across &lt;strong&gt;&lt;a href="https://twitter.com/ReactBangalore"&gt;ReactJS Bangalore Meetup&lt;/a&gt;&lt;/strong&gt; and decided to submit my CFP in this one. It took me a lot of courage to submit my first CFP and finally submitted the topic for September 2019 meetup. It's weird that though I was aware I am not going to lose anything if the CFP gets rejected but still I don't know why I had this fear of rejection 😞. Well Within an hour I get a reply from &lt;a href="https://twitter.com/kiran_abburi"&gt;Kiran&lt;/a&gt; (the organizer of the meetup)&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--XVbR0J9Y--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://cdn.hashnode.com/res/hashnode/image/upload/v1662802878930/IldwE3nRW.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--XVbR0J9Y--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://cdn.hashnode.com/res/hashnode/image/upload/v1662802878930/IldwE3nRW.png" alt="screely-1662802867907.png" width="880" height="357"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;And reading this I was shocked, happy, excited..... all mixed emotions! But of course, I wasn't ready to give it in just a few days. So I had to come up with an excuse that I might not be available on the coming Saturday and hence submitted it for the next month's meetup. Sorry Kiran if you are reading this, I am sure you will understand 😃.&lt;br&gt;&lt;br&gt;
And now I was the first speaker for the September meetup. So this was First Talk + First speaker!&lt;/p&gt;

&lt;h3&gt;
  
  
  Preparing the talk
&lt;/h3&gt;

&lt;p&gt;I started looking into how to prepare talk slides, the format, and template everything during the weekends. I had almost a month so I thought I have a lot of time so I went on a slow pace until I had just one week to go.&lt;br&gt;&lt;br&gt;
Probably that's how most of us "Devs" function 😂 ? So finally I had the draft ready (well I thought it was ready :p)&lt;/p&gt;

&lt;h3&gt;
  
  
  Reviewing the slides
&lt;/h3&gt;

&lt;p&gt;Since this was my first talk I wanted to get it reviewed and fortunately I had mentors at HackerRank whom I could always reach out to for any assistance. So I started getting it reviewed from &lt;a href="https://twitter.com/_syadav"&gt;Sudhanshu&lt;/a&gt;, &lt;a href="https://twitter.com/akshay3004"&gt;Akshay&lt;/a&gt;, and &lt;a href="https://twitter.com/sp2hari"&gt;Hari&lt;/a&gt;.&lt;/p&gt;

&lt;p&gt;A couple of important points I received as feedback&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;When talking about a broad topic - better to have an Agenda so the audience knows what I am going to cover&lt;/li&gt;
&lt;li&gt;Slide for Takeaways from the talk towards the end&lt;/li&gt;
&lt;li&gt;Font size big enough to be visible&lt;/li&gt;
&lt;li&gt;Not too much content on a slide and better to have bullet points&lt;/li&gt;
&lt;li&gt;Don't write on the slide what you are going to speak to avoid repetition&lt;/li&gt;
&lt;li&gt;Avoid grammatical errors&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;So I started working on the feedback and the slides were mostly ready by now. I had 2 days to go before my talk.&lt;/p&gt;

&lt;h3&gt;
  
  
  One day to go
&lt;/h3&gt;

&lt;p&gt;It was Friday late evening and my talk was the next day but I hadn't practiced in front of anyone so I tried practicing in front of a few of my colleagues at HackerRank so I could gain some confidence.&lt;/p&gt;

&lt;p&gt;A few important things I got to know when practicing was&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;As the topic name was "Do you understand Scope in Javascript" - give a brief outline of "Scope" being one of the trickiest yet important concepts to understand&lt;/li&gt;
&lt;li&gt;I was speaking at a fast pace so take a pause in between&lt;/li&gt;
&lt;li&gt;Ask the audience if they have any questions&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;One good thing I liked about my talk is I tried to make it interactive by asking questions so that I can engage people. Practicing with my colleagues really helped me in gaining confidence. I know I should have rehearsed a few days earlier but I am glad that I managed to practice before giving the talk.&lt;/p&gt;

&lt;p&gt;The night before the talk was just crazy, I was still making changes in my slides, tweaking design, and whatnot! This I think is normal when it comes to giving talks 😂. I still don't remember If I slept that night, it was too much anxiety 😨&lt;/p&gt;

&lt;h3&gt;
  
  
  The talk day
&lt;/h3&gt;

&lt;p&gt;I got ready and left for the venue. It was &lt;em&gt;21st September 2019&lt;/em&gt; and my talk was the first one at &lt;em&gt;2 pm IST.&lt;/em&gt; I left with my partner and reached the venue and we waited for some time for people to join in. &lt;a href="https://twitter.com/harshithb4h"&gt;Harshith&lt;/a&gt;, one of my close friends, and Hari also came to attend my talk and this boosted my confidence to a great extent. And then yes the moment came and I started my talk. As I started speaking for the first couple of seconds I was very conscious but then I just went with the flow and it actually went well 😍 The audience was very interactive, after my talk as well I got a couple of questions and during break time as well I interacted with a lot of folks, got a lot of valuable feedback, and had a great great time.&lt;/p&gt;

&lt;h3&gt;
  
  
  The AHA moment 😍
&lt;/h3&gt;

&lt;p&gt;I was so so relieved, it was no less than winning a war 😂. I had decided that if my talk went well, I will party so in the evening I was ordering some dessert to celebrate and suddenly I get a notification 🔔&lt;/p&gt;

&lt;p&gt;&lt;a href="https://twitter.com/kiran_abburi/status/1175420141196021761"&gt;https://twitter.com/kiran_abburi/status/1175420141196021761&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;This made my entire day and I was so so exhilarated that I can't put that into words! Kiran is such an incredible person and this coming from him was really a huge thing and motivated me so much.&lt;/p&gt;

&lt;h3&gt;
  
  
  Thank you 🙏
&lt;/h3&gt;

&lt;p&gt;I am fortunate to have a few people in my life who always support me and push me to go beyond my limits. Throughout my career, there is one person Hari who has always pushed me to do better. My family has always been very supportive and always been there whenever I needed it.&lt;br&gt;&lt;br&gt;
You can find the list of my talks &lt;a href="https://aakansha.dev/talks"&gt;here&lt;/a&gt; and more coming soon 😊.&lt;br&gt;&lt;br&gt;
So yes this was my first talk experience, and as I said "First" talk is always special. Would like to know your experience so share them below If you haven't yet written then write it, it's never late 🙂.&lt;/p&gt;

</description>
      <category>talk</category>
      <category>experience</category>
      <category>javascript</category>
      <category>personal</category>
    </item>
    <item>
      <title>Hacking Javascript Objects - I</title>
      <dc:creator>Aakansha Doshi</dc:creator>
      <pubDate>Mon, 18 Jul 2022 17:07:04 +0000</pubDate>
      <link>https://dev.to/aakansha1216/hacking-javascript-objects-i-2hl5</link>
      <guid>https://dev.to/aakansha1216/hacking-javascript-objects-i-2hl5</guid>
      <description>&lt;p&gt;Most of us deal with &lt;code&gt;Objects&lt;/code&gt; pretty much every day and it's one of the most commonly used data structures. But few of us might know that it's also possible to control the behaviour of the properties in an object or you can say "Hack" the properties of Objects 😂.&lt;/p&gt;

&lt;p&gt;In this post, we will be diving into some of the internals of the Objects that can help in achieving the same and we will also have a fun Quiz towards the end of the post 😉.&lt;/p&gt;

&lt;p&gt;Before we dive into the internals of &lt;code&gt;object&lt;/code&gt;, let's start with some basics.&lt;/p&gt;

&lt;h2&gt;
  
  
  What are objects?
&lt;/h2&gt;

&lt;p&gt;&lt;code&gt;Objects&lt;/code&gt; are a collection of properties where each property has a &lt;code&gt;key&lt;/code&gt; and a &lt;code&gt;value&lt;/code&gt;.&lt;/p&gt;

&lt;p&gt;Objects can be created in three forms👇🏻&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;&lt;p&gt;The &lt;code&gt;literal&lt;/code&gt; notation with &lt;code&gt;curly braces {}&lt;/code&gt;. This is the most commonly used syntax.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Using the &lt;code&gt;Object&lt;/code&gt; constructor. &lt;code&gt;Object&lt;/code&gt; class represents one of the data structures in &lt;code&gt;Javascript&lt;/code&gt;. There would be hardly any need to use this form when creating objects but still good to know 🙂&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;We will not be going into details about the third form but will share it later in this post 🙂&lt;/p&gt;&lt;/li&gt;
&lt;/ol&gt;

&lt;h2&gt;
  
  
  Customising the behaviour of properties in an object
&lt;/h2&gt;

&lt;p&gt;So it's fairly easy to get started with objects, but here comes the interesting fact, it's also possible to customise the behaviour of the properties in an object.&lt;/p&gt;

&lt;p&gt;Let's see what all customisations are possible 👀.&lt;/p&gt;

&lt;p&gt;&lt;code&gt;Object&lt;/code&gt; class has a &lt;code&gt;static&lt;/code&gt; method &lt;code&gt;defineProperty&lt;/code&gt; which allows to &lt;code&gt;add&lt;/code&gt; a new property or &lt;code&gt;update&lt;/code&gt; an existing property of an &lt;code&gt;object&lt;/code&gt; and also control the behaviour of the property. The &lt;code&gt;static&lt;/code&gt; properties are directly accessed using the &lt;code&gt;class&lt;/code&gt;, instances need not be created to access the &lt;code&gt;static&lt;/code&gt; properties.&lt;/p&gt;

&lt;h2&gt;
  
  
  Object.defineProperty
&lt;/h2&gt;

&lt;h4&gt;
  
  
  Usage
&lt;/h4&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="nb"&gt;Object&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;defineProperty&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;obj&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;property&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;descriptor&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ul&gt;
&lt;li&gt;
&lt;code&gt;obj&lt;/code&gt;: The &lt;code&gt;object&lt;/code&gt; whose properties need to be updated.&lt;/li&gt;
&lt;li&gt;
&lt;code&gt;property&lt;/code&gt;: Name or &lt;a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Symbol"&gt;Symbol&lt;/a&gt; of the property which needs to be added/updated. Since &lt;a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Symbol"&gt;Symbol&lt;/a&gt; is not covered in this post so we will be using &lt;code&gt;Name&lt;/code&gt;.&lt;/li&gt;
&lt;li&gt;
&lt;code&gt;descriptor&lt;/code&gt;: An &lt;code&gt;object&lt;/code&gt; denoting the &lt;code&gt;attributes&lt;/code&gt; for the property. This is going to help us in controlling the behaviour of a property in an object 😉.
Going further we will be referring to these attributes as &lt;code&gt;descriptors&lt;/code&gt;.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;There are two types of &lt;code&gt;descriptors&lt;/code&gt;&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;
&lt;code&gt;Data Descriptors&lt;/code&gt; - The property descriptor has a &lt;code&gt;value&lt;/code&gt; and may or may not be modifiable.&lt;/li&gt;
&lt;li&gt;
&lt;code&gt;Accessor Descriptors&lt;/code&gt; - The property descriptor has &lt;code&gt;get&lt;/code&gt; and &lt;code&gt;set&lt;/code&gt; methods with which the value of the property can be retrieved and updated respectively.&lt;/li&gt;
&lt;/ol&gt;

&lt;h3&gt;
  
  
  Data descriptors
&lt;/h3&gt;

&lt;div class="table-wrapper-paragraph"&gt;&lt;table&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;&lt;code&gt;Name&lt;/code&gt;&lt;/th&gt;
&lt;th&gt;&lt;code&gt;Type&lt;/code&gt;&lt;/th&gt;
&lt;th&gt;&lt;code&gt;Default&lt;/code&gt;&lt;/th&gt;
&lt;th&gt;&lt;code&gt;Description&lt;/code&gt;&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;&lt;code&gt;value&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;Any valid &lt;a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#data_and_structure_types"&gt;javascript type&lt;/a&gt;
&lt;/td&gt;
&lt;td&gt;&lt;code&gt;undefined&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;This denotes the value of the &lt;code&gt;property&lt;/code&gt;. Defaults to &lt;code&gt;undefined&lt;/code&gt;.&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;code&gt;writeable&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;&lt;code&gt;boolean&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;&lt;code&gt;true&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;Implies whether the &lt;code&gt;value&lt;/code&gt; of the &lt;code&gt;property&lt;/code&gt; can be updated with an &lt;code&gt;assignment operator(=)&lt;/code&gt;.&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;&lt;/div&gt;

&lt;h4&gt;
  
  
  value
&lt;/h4&gt;

&lt;p&gt;This denotes the value of the property. Defaults to &lt;code&gt;undefined&lt;/code&gt;.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;var&lt;/span&gt; &lt;span class="nx"&gt;myObj&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nb"&gt;Object&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;defineProperty&lt;/span&gt;&lt;span class="p"&gt;({},&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;id&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="na"&gt;value&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="mi"&gt;1&lt;/span&gt; &lt;span class="p"&gt;});&lt;/span&gt; &lt;span class="c1"&gt;// value is passed&lt;/span&gt;
&lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;myObj&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt; &lt;span class="c1"&gt;// { id: 1 }&lt;/span&gt;
&lt;span class="nx"&gt;myObj&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nb"&gt;Object&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;defineProperty&lt;/span&gt;&lt;span class="p"&gt;({},&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;id&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="p"&gt;{});&lt;/span&gt; &lt;span class="c1"&gt;// value not passed&lt;/span&gt;
&lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;myObj&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt; &lt;span class="c1"&gt;// {id: undefined}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h4&gt;
  
  
  writeable
&lt;/h4&gt;

&lt;p&gt;Implies whether the &lt;code&gt;value&lt;/code&gt; of the &lt;code&gt;property&lt;/code&gt; can be updated with an &lt;code&gt;assignment operator(=)&lt;/code&gt;. Defaults to &lt;code&gt;true&lt;/code&gt;.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="c1"&gt;// writeable will be set to true since not passed&lt;/span&gt;
&lt;span class="kd"&gt;var&lt;/span&gt; &lt;span class="nx"&gt;myObj&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nb"&gt;Object&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;defineProperty&lt;/span&gt;&lt;span class="p"&gt;({},&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;id&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="na"&gt;value&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="mi"&gt;1&lt;/span&gt; &lt;span class="p"&gt;});&lt;/span&gt; 
&lt;span class="nx"&gt;myObj&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;id&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="mi"&gt;10&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="nx"&gt;myObj&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;id&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt; &lt;span class="c1"&gt;// 10&lt;/span&gt;

&lt;span class="c1"&gt;// writeable is false&lt;/span&gt;
&lt;span class="nx"&gt;myObj&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nb"&gt;Object&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;defineProperty&lt;/span&gt;&lt;span class="p"&gt;({},&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;id&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="na"&gt;value&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="mi"&gt;1&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="na"&gt;writeable&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kc"&gt;false&lt;/span&gt; &lt;span class="p"&gt;});&lt;/span&gt; 
&lt;span class="nx"&gt;myObj&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;id&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="mi"&gt;10&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="nx"&gt;myObj&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;id&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt; &lt;span class="c1"&gt;// 1, as the value couldn't be updated&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  Accessor descriptors
&lt;/h3&gt;

&lt;div class="table-wrapper-paragraph"&gt;&lt;table&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;&lt;code&gt;Name&lt;/code&gt;&lt;/th&gt;
&lt;th&gt;&lt;code&gt;Type&lt;/code&gt;&lt;/th&gt;
&lt;th&gt;&lt;code&gt;Default&lt;/code&gt;&lt;/th&gt;
&lt;th&gt;&lt;code&gt;Description&lt;/code&gt;&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;&lt;code&gt;get&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;&lt;code&gt;function&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;&lt;code&gt;undefined&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;A &lt;code&gt;function&lt;/code&gt; which returns the &lt;code&gt;value&lt;/code&gt; of the property. This &lt;code&gt;function&lt;/code&gt; gets called when the property is accessed.&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;code&gt;set&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;&lt;code&gt;function&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;&lt;code&gt;undefined&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;A &lt;code&gt;function&lt;/code&gt; which sets the &lt;code&gt;value&lt;/code&gt; of the &lt;code&gt;property&lt;/code&gt;. This function gets called when the property value is set using &lt;code&gt;assignment operator(=)&lt;/code&gt;.&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;&lt;/div&gt;

&lt;h4&gt;
  
  
  get
&lt;/h4&gt;

&lt;p&gt;A &lt;code&gt;function&lt;/code&gt; returns the &lt;code&gt;value&lt;/code&gt; of the property. This &lt;code&gt;function&lt;/code&gt; gets called when the property is accessed using &lt;code&gt;dot(.)&lt;/code&gt; or &lt;code&gt;square brackets([])&lt;/code&gt;.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;var&lt;/span&gt; &lt;span class="nx"&gt;myObj&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nb"&gt;Object&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;defineProperty&lt;/span&gt;&lt;span class="p"&gt;({},&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;id&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="na"&gt;get&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="mi"&gt;10&lt;/span&gt; &lt;span class="p"&gt;});&lt;/span&gt;
&lt;span class="nx"&gt;myObj&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;id&lt;/span&gt; &lt;span class="c1"&gt;// 10&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h4&gt;
  
  
  set
&lt;/h4&gt;

&lt;p&gt;A &lt;code&gt;function&lt;/code&gt; that sets the &lt;code&gt;value&lt;/code&gt; of the property. This function gets called when the property value is set using &lt;code&gt;assignment operator(=)&lt;/code&gt;.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;var&lt;/span&gt; &lt;span class="nx"&gt;myObj&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nb"&gt;Object&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;defineProperty&lt;/span&gt;&lt;span class="p"&gt;({},&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;id&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="na"&gt;set&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;val&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;id&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;val&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;});&lt;/span&gt;
&lt;span class="nx"&gt;myObj&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;id&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="mi"&gt;20&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="nx"&gt;myObj&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;id&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="mi"&gt;20&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

&lt;span class="nx"&gt;myObj&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nb"&gt;Object&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;defineProperty&lt;/span&gt;&lt;span class="p"&gt;({},&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;id&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="na"&gt;set&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;val&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;id&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;val&lt;/span&gt;&lt;span class="p"&gt;),&lt;/span&gt;
  &lt;span class="na"&gt;get&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="nx"&gt;id&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
&lt;span class="p"&gt;});&lt;/span&gt;
&lt;span class="nx"&gt;myObj&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;id&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="mi"&gt;20&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="nx"&gt;myObj&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;id&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt; &lt;span class="c1"&gt;// 20&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;em&gt;Note: An object can have either &lt;code&gt;Data Descriptors&lt;/code&gt; or &lt;code&gt;Accessor Descriptors&lt;/code&gt; but not both.&lt;/em&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="nx"&gt;myObj&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nb"&gt;Object&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;defineProperty&lt;/span&gt;&lt;span class="p"&gt;({},&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;id&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="na"&gt;value&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="mi"&gt;10&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="na"&gt;set&lt;/span&gt;&lt;span class="p"&gt;:()&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="nx"&gt;id&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="mi"&gt;10&lt;/span&gt; &lt;span class="p"&gt;});&lt;/span&gt;
&lt;span class="c1"&gt;// Throws error as we are using both Data and Accessor descriptors&lt;/span&gt;
&lt;span class="c1"&gt;// value is a Data descriptor whereas set is an accessor descriptor&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  Additional attributes for descriptors
&lt;/h3&gt;

&lt;p&gt;Apart from &lt;code&gt;data descriptors&lt;/code&gt; and &lt;code&gt;accessor descriptors&lt;/code&gt;, there are additional attributes common to both the descriptors👇🏻 that can be used to control the behavior as well.&lt;/p&gt;

&lt;div class="table-wrapper-paragraph"&gt;&lt;table&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;Name&lt;/th&gt;
&lt;th&gt;Type&lt;/th&gt;
&lt;th&gt;Default&lt;/th&gt;
&lt;th&gt;Description&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;&lt;code&gt;configurable&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;&lt;code&gt;boolean&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;&lt;code&gt;false&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;Implies whether the property can be deleted from the object.&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;code&gt;enumerable&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;&lt;code&gt;boolean&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;&lt;code&gt;false&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;Implies whether the property will show during &lt;code&gt;enumeration&lt;/code&gt; of the keys of the object.&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;/td&gt;
&lt;td&gt;&lt;/td&gt;
&lt;td&gt;&lt;/td&gt;
&lt;td&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;&lt;/div&gt;

&lt;h4&gt;
  
  
  configurable
&lt;/h4&gt;

&lt;p&gt;Implies whether the property can be deleted from the object. Defaults to &lt;code&gt;false&lt;/code&gt;.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;var&lt;/span&gt; &lt;span class="nx"&gt;myObj&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nb"&gt;Object&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;defineProperty&lt;/span&gt;&lt;span class="p"&gt;({},&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;id&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="na"&gt;value&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="mi"&gt;10&lt;/span&gt; &lt;span class="p"&gt;});&lt;/span&gt;
&lt;span class="k"&gt;delete&lt;/span&gt; &lt;span class="nx"&gt;myObj&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;id&lt;/span&gt;
&lt;span class="nx"&gt;myObj&lt;/span&gt; &lt;span class="c1"&gt;// { id: 10 } as its not configurable&lt;/span&gt;

&lt;span class="nx"&gt;myObj&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nb"&gt;Object&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;defineProperty&lt;/span&gt;&lt;span class="p"&gt;({},&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;id&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="na"&gt;value&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="mi"&gt;10&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="na"&gt;configurable&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kc"&gt;true&lt;/span&gt; &lt;span class="p"&gt;});&lt;/span&gt;
&lt;span class="k"&gt;delete&lt;/span&gt; &lt;span class="nx"&gt;myObj&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;id&lt;/span&gt;
&lt;span class="nx"&gt;myObj&lt;/span&gt; &lt;span class="c1"&gt;// {} as its configurable&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h4&gt;
  
  
  enumerable
&lt;/h4&gt;

&lt;p&gt;Implies whether the property will show during &lt;code&gt;enumeration&lt;/code&gt; of the keys of the object eg when using &lt;a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/keys"&gt;&lt;code&gt;Object.keys&lt;/code&gt;&lt;/a&gt; or &lt;a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...in"&gt;&lt;code&gt;for...in&lt;/code&gt;&lt;/a&gt;. Defaults to &lt;code&gt;false&lt;/code&gt;.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;var&lt;/span&gt; &lt;span class="nx"&gt;myObj&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nb"&gt;Object&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;defineProperty&lt;/span&gt;&lt;span class="p"&gt;({},&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;id&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="na"&gt;value&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="mi"&gt;10&lt;/span&gt; &lt;span class="p"&gt;});&lt;/span&gt;
&lt;span class="nb"&gt;Object&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;keys&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;myObj&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="c1"&gt;// [] as the key "id" is not enumerable&lt;/span&gt;

&lt;span class="nx"&gt;myObj&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nb"&gt;Object&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;defineProperty&lt;/span&gt;&lt;span class="p"&gt;({},&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;id&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="na"&gt;value&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="mi"&gt;10&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="na"&gt;enumerable&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kc"&gt;true&lt;/span&gt; &lt;span class="p"&gt;});&lt;/span&gt;
&lt;span class="nb"&gt;Object&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;keys&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;myObj&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="c1"&gt;// ["id"] as the key "id" is enumerable&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;For updating &lt;code&gt;multiple properties&lt;/code&gt;, we can use &lt;code&gt;Object.defineProperties&lt;/code&gt;.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="nb"&gt;Object&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;defineProperties&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;obj&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="na"&gt;property1&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;descriptor&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
  &lt;span class="na"&gt;property2&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;descriptor&lt;/span&gt;
&lt;span class="p"&gt;});&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;As mentioned earlier, there is a third way to create an object as well and that is &lt;a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/create"&gt;&lt;code&gt;Object.create&lt;/code&gt;&lt;/a&gt; which helps to create an object with the specified prototype object and descriptors.&lt;/p&gt;

&lt;p&gt;Now since you know about the &lt;code&gt;descriptors&lt;/code&gt; with the help of which the behavior of the properties can be controlled, can you guess why 👇🏻 is possible?&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;var&lt;/span&gt; &lt;span class="nx"&gt;myObj&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="na"&gt;id&lt;/span&gt; &lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="mi"&gt;10&lt;/span&gt; &lt;span class="p"&gt;};&lt;/span&gt;
&lt;span class="nx"&gt;myObj&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;id&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt; &lt;span class="c1"&gt;// 10&lt;/span&gt;
&lt;span class="nx"&gt;myObj&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;id&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="mi"&gt;100&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="nx"&gt;myObj&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;id&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt; &lt;span class="c1"&gt;// 100&lt;/span&gt;
&lt;span class="nb"&gt;Object&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;keys&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;id&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt; &lt;span class="c1"&gt;// ["id"];&lt;/span&gt;
&lt;span class="k"&gt;delete&lt;/span&gt; &lt;span class="nx"&gt;myObj&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;id&lt;/span&gt;
&lt;span class="nx"&gt;myObj&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt; &lt;span class="c1"&gt;// {}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;This means when the &lt;code&gt;objects&lt;/code&gt; are created using &lt;code&gt;literal notation&lt;/code&gt; / &lt;code&gt;Object()&lt;/code&gt; constructor or even a new property is added via &lt;code&gt;assignment operator(.)&lt;/code&gt;, the descriptors are set to 👇🏻&lt;/p&gt;

&lt;div class="table-wrapper-paragraph"&gt;&lt;table&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;Name&lt;/th&gt;
&lt;th&gt;Value&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;&lt;code&gt;value&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;The value which is set when creating / updating the object.&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;code&gt;writeable&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;
&lt;code&gt;true&lt;/code&gt;, hence update is possible&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;code&gt;enumerable&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;
&lt;code&gt;true&lt;/code&gt;, hence the keys are enumerable&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;code&gt;configurable&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;
&lt;code&gt;true&lt;/code&gt;, hence &lt;code&gt;delete&lt;/code&gt; works&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;&lt;/div&gt;

&lt;h2&gt;
  
  
  Retrieve descriptors of an existing Object?
&lt;/h2&gt;

&lt;p&gt;Using &lt;code&gt;descriptors&lt;/code&gt; we have a lot more control, but there should be some way to retrieve the descriptors of properties in an existing object as well. Well yes, there is a static method &lt;code&gt;getOwnPropertyDescriptor&lt;/code&gt; in the &lt;code&gt;Object&lt;/code&gt; class which helps in achieving the same 😍.&lt;/p&gt;

&lt;h2&gt;
  
  
  Object.getOwnPropertyDescriptor
&lt;/h2&gt;

&lt;h4&gt;
  
  
  Usage
&lt;/h4&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="nb"&gt;Object&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;getOwnPropertyDescriptor&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;obj&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;property&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ul&gt;
&lt;li&gt;
&lt;code&gt;obj&lt;/code&gt;: The &lt;code&gt;object&lt;/code&gt; whose property descriptors need to be retrieved.&lt;/li&gt;
&lt;li&gt;
&lt;code&gt;property&lt;/code&gt;: Name or &lt;a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Symbol"&gt;Symbol&lt;/a&gt; of the property whose descriptors needs to be retrieved. Since &lt;a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Symbol"&gt;Symbol&lt;/a&gt; is not covered in this post so we will be using &lt;code&gt;Name&lt;/code&gt;.
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;var&lt;/span&gt; &lt;span class="nx"&gt;myObj&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="na"&gt;id&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="mi"&gt;10&lt;/span&gt; &lt;span class="p"&gt;};&lt;/span&gt;
&lt;span class="nb"&gt;Object&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;getOwnPropertyDescriptor&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;myObj&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;id&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;&lt;span class="c1"&gt;// {value: 10, writable: true, enumerable: true, configurable: true}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;To retrieve &lt;code&gt;descriptors&lt;/code&gt; of all &lt;code&gt;properties&lt;/code&gt; of an object we can use &lt;code&gt;Object.getOwnPropertyDescriptors&lt;/code&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="nb"&gt;Object&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;getOwnPropertyDescriptors&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;obj&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  Quiz time
&lt;/h2&gt;

&lt;p&gt;It's time to have some fun quiz now 😉. Take the quiz &lt;a href="https://forms.gle/nG7ZXfbGyvPthRNZ7"&gt;here&lt;/a&gt; . Good luck!&lt;/p&gt;

&lt;h2&gt;
  
  
  Closing Thoughts
&lt;/h2&gt;

&lt;p&gt;If you have used some of the methods like &lt;a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/freeze"&gt;&lt;code&gt;Object.freeze&lt;/code&gt;&lt;/a&gt;, &lt;a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/seal"&gt;&lt;code&gt;Object.sealed&lt;/code&gt;&lt;/a&gt;, now you know what it does behind the scenes 🙂, it modifies the &lt;code&gt;descriptors&lt;/code&gt; for the properties of the object.&lt;br&gt;&lt;br&gt;
Most of the time these utilities do help but there might be cases where you want more control over the properties and that's where you will need to use it. Hope you enjoyed the post 😍.&lt;/p&gt;

</description>
      <category>javascript</category>
      <category>beginners</category>
      <category>frontend</category>
      <category>webdev</category>
    </item>
    <item>
      <title>My Journey from a novice to a Front-end Engineer</title>
      <dc:creator>Aakansha Doshi</dc:creator>
      <pubDate>Sun, 27 Jun 2021 15:32:33 +0000</pubDate>
      <link>https://dev.to/aakansha1216/my-journey-from-a-novice-to-a-front-end-engineer-2945</link>
      <guid>https://dev.to/aakansha1216/my-journey-from-a-novice-to-a-front-end-engineer-2945</guid>
      <description>&lt;p&gt;How? How exactly does one start a damn Blog?!??? Maybe I should introduce myself. Maybe I can jump in straight away and talk about... No, the introduction sounds better! CLEARLY, I AIN'T A PRO AT WRITING BLOGS 😆, but I do write code though 😂. I have a story to share, one I believe many of you will be able to resonate with!&lt;/p&gt;

&lt;p&gt;Here's me Aakansha Doshi, venturing yet again into something new. Blogging. This is my first blog. And why exactly am I writing this? Ummmm... At work, I have gotten the opportunity to interview and mentor people, and looking back I could relate to many of them. I could relate to what they were feeling, the anxiety, the excitement, and the curiosity of the unknown. I want to be able to share my journey today so that someone, somewhere, reading this can relate to it, and feel "It's okay, I am doing fine". It's great to be able to walk down memory lane and give myself a pat on the back. Sometimes we need to give ourselves credit. It's good to be reminded of the path, of the journey, completed, and of the long road, that still lies ahead!&lt;/p&gt;

&lt;h2&gt;
  
  
  Background
&lt;/h2&gt;

&lt;p&gt;I was never sure of what I wanted to do. I was confused amongst various subjects like &lt;em&gt;Computer&lt;/em&gt;, &lt;em&gt;Mathematics&lt;/em&gt;, and &lt;em&gt;Chemistry&lt;/em&gt; during my school days. &lt;em&gt;Engineering&lt;/em&gt; was never in my mind but my friends pushed me to give the entrance exams. So, I went for it.&lt;/p&gt;

&lt;p&gt;It takes years to prepare and get a decent rank to get into good engineering colleges. Since I had given only 2 months for the preparation I had no hopes. Nevertheless, I wanted to do something with Computers so I decided on BCA, but things turned out differently. As per my rank in the entrance exams, I managed to get into one of the private engineering colleges.&lt;/p&gt;

&lt;h2&gt;
  
  
  College Life
&lt;/h2&gt;

&lt;p&gt;I hardly knew anything about web development in my college days! To be honest, I was one of those 'studious' students whose only goal was to score a good CGPA thereby securing a job at a decent software company. There were very few MNCs like &lt;em&gt;TCS&lt;/em&gt;, &lt;em&gt;Infosys&lt;/em&gt;, &lt;em&gt;IBM&lt;/em&gt; which use to visit our college for campus. Fortunately, I got placed at &lt;em&gt;TCS&lt;/em&gt;, but I always wanted to join a startup so I can get more exposure. Hence I started browsing about the prerequisites required to be able to get into a good startup. And, the first thing was &lt;strong&gt;A good understanding of Data Structures And Algorithms&lt;/strong&gt;. I knew the theory as I had studied that as part of the college syllabus but wasn't sure about how to implement it. So I started browsing how to improve my DS/Algo skills and came across few platforms where I started practicing 24*7 on each DS/Algo topic during my 4th year. A few of those platforms are listed 👇🏻&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;a href="https://www.hackerrank.com"&gt;HackerRank&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://www.hackerearth.com"&gt;HackerEarth&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://www.codechef.com"&gt;Codechef&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://www.codeforces.com"&gt;Codeforces&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Participating in contests and code sprints became an addiction for me. As a result, my college grades started deteriorating but I WAS ENJOYING CODING 😊.&lt;/p&gt;

&lt;h2&gt;
  
  
  How I became a challenge curator
&lt;/h2&gt;

&lt;p&gt;One day after participating in &lt;a href="https://www.hackerrank.com/epiccode"&gt;HackerRank EpiCode&lt;/a&gt; where I ranked &lt;a href="https://www.hackerrank.com/results/epiccode/aa1992?h_r=profile"&gt;638/5855&lt;/a&gt;, I received an email from &lt;a href="https://in.linkedin.com/in/sp2hari"&gt;Hari&lt;/a&gt;, The CTO of &lt;a href="https://www.hackerrank.com"&gt;HackerRank&lt;/a&gt; and thereby my interview process began. As I had started competitive coding only a few months back, I lacked confidence! And there was a lot to learn but there was no harm in trying since I had nothing to lose😉.&lt;/p&gt;

&lt;p&gt;Fortunately, I cleared my first round where I was asked to solve a challenge with one of the graph search algorithms. The next round with Hari didn't go very well as I didn't have any experience/projects to show as a developer but luckily, there was a requirement for a &lt;em&gt;Challenge Curator&lt;/em&gt; and that sounded interesting to me so I decided to move ahead.&lt;/p&gt;

&lt;p&gt;The role of a &lt;code&gt;challenge Curator&lt;/code&gt; is to create &lt;em&gt;challenges&lt;/em&gt; based on different &lt;code&gt;DS/Algo/frameworks&lt;/code&gt;, etc topics that could be used in contests and hiring as well. Few interviews went well, few didn't and I was aware that I had so much to learn and improve in lots of areas.&lt;/p&gt;

&lt;p&gt;Finally, I got the offer! Since I was not technically very strong for the role, I was put on probation for &lt;code&gt;6 months&lt;/code&gt;, and if everything was to go well I would be then hired as a full-time.&lt;/p&gt;

&lt;p&gt;You might be wondering even though not being technically very strong for the role, why was I offered probation? The interviewers noticed my persistent efforts and were quite impressed! And woopie I got the offer. I started learning, practicing extensively, and finally got converted to a full-time &lt;code&gt;Challenge Curator&lt;/code&gt; after 6 months.&lt;/p&gt;

&lt;h2&gt;
  
  
  🤔 about Development
&lt;/h2&gt;

&lt;p&gt;Everything was going smoothly but soon after a year, I started getting inclined towards web development. I didn't even know how to use &lt;code&gt;git&lt;/code&gt; properly, so that was the first step as that's where the code base resides. The culture at HackerRank has always been amazing and everyone has always been amicable. I started picking up small tasks- mostly bug fixes in the back-end(Ruby on Rails) at HackerRank to get an overview of the codebase in my leisure time.&lt;/p&gt;

&lt;h2&gt;
  
  
  Moving to Development
&lt;/h2&gt;

&lt;p&gt;I continued taking dev tasks on the side even though it sometimes affected my performance review as a &lt;code&gt;curator&lt;/code&gt; but I wanted to move to development soon, so I had to take the risk.&lt;/p&gt;

&lt;p&gt;Hari always gave me side projects to work on especially during weekends so I could progress faster. Things were difficult during this time but soon after a year, I got the opportunity to be interviewed for a fresher(backend) at HackerRank. To be honest the interview went 'Okayish' so I wasn't sure if I will get a chance to move to the dev team. It was a full pressure situation and I wasn't sure what would be my next step if I get rejected.&lt;/p&gt;

&lt;p&gt;And guess what- I was not rejected and was moved to the dev team in &lt;strong&gt;April 2017&lt;/strong&gt;.&lt;/p&gt;

&lt;h2&gt;
  
  
  Bad times
&lt;/h2&gt;

&lt;p&gt;Being a part of the Dev team I thought things would get easier but it was the other way round. My first project was to rewrite one of the routes from &lt;code&gt;backbone&lt;/code&gt; to &lt;code&gt;react&lt;/code&gt;. I had an overall idea about &lt;code&gt;react&lt;/code&gt; since I had to create &lt;code&gt;react&lt;/code&gt; challenges as part of previous role. Of course, that wasn't enough to rewrite an entire route! The next step was to start learning &lt;code&gt;react&lt;/code&gt;, &lt;code&gt;redux&lt;/code&gt; in-depth and the courses by &lt;a href="https://twitter.com/ste_grider?lang=en"&gt;Stephen Grider&lt;/a&gt; at &lt;a href="http://udemy.com"&gt;udemy&lt;/a&gt; really helped me in understanding &lt;em&gt;react&lt;/em&gt;. This was a big rewrite (~4k lines of code) and the deadline was getting nearer, and I was not even close to completing it. I was trying hard to finish it as soon as possible and ended up getting fully burned out for months. Can you guess the number of comments on my pull request? Let me give you a hint, it broke &lt;a href="http://github.com"&gt;github&lt;/a&gt;, and even today if I open the pull request it doesn't load 😂 &lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--2FRokDdq--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://i.imgur.com/JUmeawj.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--2FRokDdq--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://i.imgur.com/JUmeawj.png" alt="uploaded image" width="880" height="657"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Ok, I will tell you it was &lt;strong&gt;~500&lt;/strong&gt; comments 😱&lt;/p&gt;

&lt;p&gt;After &lt;code&gt;~9&lt;/code&gt; months my code went to prod. It took &lt;code&gt;~3&lt;/code&gt; quarters to finish this which was earlier estimated to within &lt;code&gt;1&lt;/code&gt; quarter. Due to my poor performance, my appraisal didn't go well. This year had been very difficult for me. More so because of the doubts, I had inflicted upon my own self.&lt;/p&gt;

&lt;h2&gt;
  
  
  Critical Feedbacks
&lt;/h2&gt;

&lt;p&gt;I had received a lot of critical feedback when working on the previous project. Trust me on this- critical feedbacks if taken in the right spirit can get the best out of you. And it really helped me in my journey.&lt;/p&gt;

&lt;h3&gt;
  
  
  Learn to Debug
&lt;/h3&gt;

&lt;p&gt;As I tried to finish the project faster, I became further dependent on others rather than learning to do it myself. This doesn't mean you shouldn't take help but first, one needs to try on their own. This is the only way one would become independent, and let me tell you the joy of fixing it yourself is priceless😍.&lt;/p&gt;

&lt;h3&gt;
  
  
  Planning before Implementation
&lt;/h3&gt;

&lt;p&gt;I was trying to jump into implementation even before thinking how I should be breaking it into &lt;code&gt;components&lt;/code&gt;, what should be the flow etc. It's ok to take more time to complete the task instead of finishing it in haste. No one is going to judge you based on that, rather if you take a little buffer and finish it before time then it would be commendable. Remember to take some time in planning so you estimate better as well as, execute it well.&lt;/p&gt;

&lt;h3&gt;
  
  
  Have 💪 Basics
&lt;/h3&gt;

&lt;p&gt;I was lacking basics and that was causing trouble in understanding the core concepts. So I started fixing my basics first and &lt;code&gt;You don't know JS&lt;/code&gt; by &lt;a href="https://github.com/getify"&gt;Kyle Simpson&lt;/a&gt;, there is also &lt;a href="https://github.com/getify/You-Dont-Know-JS"&gt;an online version&lt;/a&gt; for the same. These are the best series of books for anyone who wants to get into the core of &lt;code&gt;Javascript&lt;/code&gt; from &lt;code&gt;basic&lt;/code&gt; to &lt;code&gt;advanced&lt;/code&gt; as it assumes you are a &lt;strong&gt;complete beginner&lt;/strong&gt;.&lt;/p&gt;

&lt;h2&gt;
  
  
  Persistence
&lt;/h2&gt;

&lt;p&gt;I started working on all my weaknesses and aimed towards becoming a better developer. Soon within a year, I had shown a significant amount of improvement. I also took the responsibility to set the right coding standards and high coverage. Everything went well and I was promoted to &lt;em&gt;SDE 2&lt;/em&gt; by next year. I started mentoring my juniors, leading more projects and executed them well. I was applauded for being so hands-on and taking complete ownership of the projects I was working on. Soon I was promoted to &lt;em&gt;Senior Software Engineer&lt;/em&gt;.&lt;/p&gt;

&lt;p&gt;The most important realization for me was that I need to have the right amount of patience. Only then can I ensure my understanding of the core and thereby plan, and execute things accordingly. It's never too late to learn or start with something new. The time you start is always the right time 😊&lt;/p&gt;

&lt;h2&gt;
  
  
  OpenSource
&lt;/h2&gt;

&lt;p&gt;Contributing to &lt;em&gt;OSS&lt;/em&gt; is something that has always helped me grow professionally and personally. There is a lot of exposure and learning you get while working with the community. And once you start contributing, trust me you will get addicted to it . I will soon write a blog on how opensource helped me become a better developer.&lt;/p&gt;

&lt;p&gt;Well, this is how my journey has been so far and I believe there will be so much more to it in the time that is yet to come! But I can't be ending without expressing gratitude to the ones whose guidance shaped me. Thank you &lt;a href="https://in.linkedin.com/in/sp2hari"&gt;Hari&lt;/a&gt; for being my pillar, for always pushing me beyond my limits, &lt;a href="https://in.linkedin.com/in/yadavsudhanshu"&gt;Sudhanshu&lt;/a&gt; for mentoring me, &lt;a href="https://in.linkedin.com/in/akshay3004"&gt;Akshay&lt;/a&gt; for the support and guidance without whom this wouldn't have been possible. I also have tremendous gratitude for everyone with whom I got the chance to work. It's so important to be surrounded by people who believe in you and keep inspiring you to be better.&lt;/p&gt;

</description>
      <category>beginners</category>
      <category>frontend</category>
      <category>webdev</category>
    </item>
  </channel>
</rss>
