Sharing my everyday learnings

This page will contain all the learnings and related resources which might be helpful for me in future as a quick reference. Sharing in public, in case anyone else finds it useful.

• 4 July 2021

  By default, when we deploy our websites to netlify or similar platforms, the source code can be seen in the sources tab of devtools.
  If you want to hide it from the users, you can do that by adding a flag to .env file in the project root: GENERATE_SOURCEMAP=false

• 15 June 2021

  Today I learned that we can subscribe to RSS feeds in slack itself and we can create good channels with quality content right there.
  
  Below are the steps on how we can work with RSS feeds in slack:

  To add a feed:

  /feed
  
  For example: /feed https://www.a11yproject.com/feed/feed.xml

  To check which feeds are added currently:

  /feed list
  
  It lists all feeds along with their IDs - this ID is very useful if we want to remove any particular feed
  

  To remove any feed:

  /feed remove
  

  Learned from: How to geek blog

• 30 May 2021

  We can bulk choose which packages to upgrade to latest version while using yarn:
  yarn upgrade-interactive --latest

  Learned from: debs_obrien's tweet

• 30 May 2021

  We can do git commit --allow-empty to make a new commit with no actual changes to any files. So we do not need any random whitespace changes to trigger new builds.

  Learned from: Megan Sullivan's tweet

• 30 May 2021

  Run command yarn link in the repositories which we want to link, let say repo1.
  Run command yarn link repo1 in the repository where we want to link repo1.
  Run command yarn unlink repo1 if we want to unlink the repository. Also need to run yarn install after unlinking any repostory so that it can fetch it from the packages now.

• 30 May 2021

  git clone <> --branch master --depth 1

• 29 May 2021

  1. Open task manager and end the VPN session.
  2. Go to command prompt (cmd) and follow the next commands
  3. ipconfig /flushdns ( It will flush your DNS entry )
  4. ipconfig /release ( Your internet will disconnect )
  5. ipconfig /renew ( internet will connect again)
  6. Open RUN window ( Windows button + R ).
  7. type services.msc
  8. Services window will open > find the vpn service. > restart that service.
  9. Connect VPN now. It should connect successfully after entering proper id and password.

• 29 May 2021

  When we are using VS Code, we can press CTRL + Shift + L. This will highlight the text as well as find every copy of it in that file. This enables us to edit multiple lines at same time.

• 11 February 2021

  Today I came across a neat trick on how to read the github public repository using an 1s in the github url.

  For example - Let say I want to read the code for my repo at UnitTestingReactUsingJestAndEnzyme

  But I will have to open files one by one, and then go back to root level to access any other file. But today I learned that by altering the URL slightly, we can get experience of an online VSCode editor. The code is readonly, but it is very helpful as it helps us navigate through code and folder structure the way we actually use while coding on any IDE.

  Check the new URL below:
  http://github1s.com/anuk79/UnitTestingReactUsingJestAndEnzyme

  Notice the extra 1s after github in the URL. That, dear friends, is the trick. So neat, and super helpful, right?

  Reference: Danny Thompson tweet showing the trick

• 15 January 2021

  Today I came across a git command named `git checkout .` and since I had never used or saw it before, I googled to understand the usage for it.

  Resource: The stackoverflow answer has a very good explanation.

• 24 November 2020

  Today I came across a css property called caret-color. It is such a cool little feature, and it is supported by all major browsers.

  This caret-color CSS property changes the color of the cursor (or caret) in any editable element, like inputs, texareas, or a contenteditable div. For example, PFB the div which is content editable and I have changed it's caret-color to be hexcode - #3ed372.

  Try editing it and see the magic. ✨

  Hello there, I am an editable div. Look at my caret-color. Isn't it pretty?

  References:

  • tweet of Álvaro Trigo mentioning this property
  • css tricks article on caret color

• 14 November 2020

  Today I Practised how to configure the prettier and eslint plugins for a React project from scratch. I have documented the step-by-step process at prettier-eslint-configuration-for-react website.

• 4 November 2020

  Continuing my concepts refresher journey, I went through all the features added in ES8. The link with details is listed in the references section.

  References:

  • The ES2017 Guide

• 3 November 2020

  Every year, as the year end approaches, I try to refresh my knowledge of technical topics I am working on, and the ones I love. This year too, as November began, so did my refresher journey. I started by going through the JavaScript concepts.

  I came across template literals concept. As a React developer, I have been using this feature extensively and this is certainly one of the most useful features to come in ES6. It is used for string substitution and for creating multiline strings.

  On further read, I found something called as tagged templates. As I never read it before, this intrigued me and I dig deeper to understand its syntax and usage.

  Tagged templates are basically a special type of function call where function name is placed before the template string. PFB code sample: function showOrderDetails(stringVals, ...values) { /** * stringVals contains all the strings in array form, * the second onwards parameters of this function contain * all the individual string interpolated values * and we are gathering them in 'values' using rest operator. */ let resultStr = ''; for (let i = 0; i < stringVals.length; i++) { if (i > 0) { if (typeof values[i - 1] === "number") { resultStr += `$${values[i-1].toFixed(2)}`; } else { resultStr += values[i-1] } } resultStr += stringVals[i] } return resultStr; } let name = "Anu"; let price = 2500; showOrderDetails`Congratulations ${name}! Your order for ${price} has been successfully placed` /** output -> Congratulations Anu! Your order for $2500.00 has been successfully placed */

  This is such a powerful tool, and can be used for a wide range of scenarios, like formatting, localization, automatic escaping of any interpolated variables, etc.. You can go through links in references section to read details about template literals and tagged templates.

  References:

  • MDN documentation on Template literals
  • MDN documentation on Template literals
  • Tagged Template Literals by Wes bos

• 2 November 2020

  Today I stumbled across figure tag which is one of the lesser known semantic tags which got introduced in HTML5. It tells the browser that figure is a container that holds elements that have a relation to each other. While most common examples use an image to explain this tag, it's worth noting that it does not need to contain only image. It can also contain tables, audio, video, etc. To explain this, I am also going to use an image element with some related text content.

  Let's say we have an image and some text content that associates with it (some kind of caption). One way of creating it could be using image and paragraph elements wrapped within a div container.

  HTML Code:

  <div> <img src="https://c4.wallpaperflare.com/wallpaper/392/664/919/toothless-night-fury-how-to-train-your-dragon-how-to-train-your-dragon-2-wallpaper-preview.jpg" alt="Night fury dragon" width="300" height="200" /> <p> How to train your dragon is one of my favorite movies and Night fury is the most adorable and amazing dragon I have ever met (through the movie, of course) </p> </div>

  And the result is as shown below:

  

  How to train your dragon is one of my favorite movies and Night fury is the most adorable and amazing dragon I have ever met (through the movie, of course)

  Now let's use figure element and see how we can get the same results.

  HTML5 Code: <figure> <img src="https://c4.wallpaperflare.com/wallpaper/392/664/919/toothless-night-fury-how-to-train-your-dragon-how-to-train-your-dragon-2-wallpaper-preview.jpg" alt="Night fury dragon" width="300" height="200" /> <figcaption> How to train your dragon is one of my favorite movies and Night fury is the most adorable and amazing dragon I have ever met (through the movie, of course) </figcaption> </figure>

  And, the result is as shown below:

  

  How to train your dragon is one of my favorite movies and Night fury is the most adorable and amazing dragon I have ever met (through the movie, of course)

  Now, if we compare results, we see same visual result, but using a figure tag adds the semantic to our elements and hence helps with accessibility and SEO.

  You can also check Codepen for above example.

  References:

  • Why use the figure element?

• 12 October 2020

  Today I did some research on sitemaps. I had a vague idea about them - that they contain the information of all the pages on our website and how to reach those links. But, i had never created any sitemap before. I read most of the content on google search console help and created one basic sitemap for my existing website - Explore accessibility.

  Read more: Learn about sitemaps

• 8 October 2020

  Today I learnt about the details tag in HTML which can be used for creating a coolapsible widget with a label and information. Pretty similar to the widget which I created for this current view using JavaScript. I would have used it if I knew about it earlier. It has a good browser support with only exceptions of Internet Explorer and Edge versions before 79.

  Codepen link for a demo on details tag with some custom styling

  Read more: MDN documentation on the Details disclosure element

• 23 September 2020

  Today I came across term Blue-Green deployment while reading through some articles and this is a perfect TIL. In a nutshell, Blue-Green Deployment is a technique of running two identical production environments called Blue and Green. At any time, only one of the environments is live, with the live environment serving all production traffic.

  For e.g - let say we have the Blue environment currently live. As we prepare a new version of software, the deployment and final stage of testing takes place in the environment that is not live: in this example, Green. Once we have deployed and fully tested the software in Green, we switch the router so all incoming requests now go to Green instead of Blue. Green is now live, and Blue is idle.

  This technique can eliminate downtime due to app deployment. In addition, blue-green deployment reduces risk: if something unexpected happens with the new version on Green, we can immediately roll back to the last version by switching back to Blue.

  References:

  • Martin Fowler article on Blue-Green deployment
  • Cloud foundary guide on Blue-Green deployment
  • Article on colorful deployments

• 22 September 2020

  I am crying with happiness as I found out today that we can use a shortcut to open emoji palatte anywhere in windows. Just press the keys Windows and dot together and you can witness a emoji palatte opening right up for you. Type name of any emoji to search for it and press enter to select it. It's very convenient to navigate through keyboard (the right way to implement 👍).

  This will come in handy for me as I am a very emoji extensive person 💕. Also, the ease of using it anywhere, especially in VSCode is so damn helpful. Till now, I used to search for emojies on internet and copy paste it into the code, if I ever needed to use it. Not to mention, when you have to use emojis in any conference chat window, and you cannot see any handy emoji option (as is available in applications like Microsoft Teams, skype, etc.)

  Credits: dotnetcatch article on Visual Studio QuickTip: Add Emoji to your source code!

• 18 September 2020

  Today I came across a use-case where-in i needed to convert and Array into an Object for one of my tasks. I found many solutions for it on google, some of them are listed below for sample array of var arr = [ { color: 'purple' }, { color: 'green'}, { color: 'yellow' } ];

  • When we need index as the key for the resulting object, we can use any of following approach: // ES6 var obj = { ...arr }; or // ES5 var obj = Object.assign({}, arr); or var obj = {}; arr.reduce(function(obj, item, index, arr) { obj[index] = item; return obj; }, {}) /** result -> { 0: {color: "purple"} 1: {color: "green"} 2: {color: "yellow"} } */
  • When we need any custom as the key for the resulting object, we can use any of following approach: var obj = Object.assign( {}, ...arr.map(val => ({ [val.color]: val })) ); or var obj = {}; arr.reduce(function(obj, item, index, arr) { obj[item.color] = item; return obj; }, {}); /** result -> { 'purple': {color: "purple"} 'green': {color: "green"} 'yellow': {color: "yellow"} } */

  Reference: :Stackoverflow link

• 12 September 2020

  Today I learnt about Event listener breakpoints in google chrome devtools.

  This is really useful for scenarios where we would like to debug out code when any particular event gets fired. The code execution is paused at that point and we can take a look at the variables values at that moment, and anything else that we would like to debug.

  Credit :Linkedin post by Minko Gechev

• 8 September 2020

  Today I discovered Jest snippet extension for Visual Studio Code.

  As I am an advocate of writing unit test cases, I find myself writing unit tests pretty frequently. Currently I am working in a project which uses React for development and Jest for unit testing the code. When writing test cases, we add each test case under it. But when typing it VS Code always autocompletes to instanceof and I had to rename it. So I googled on how to fix that and hit the stackoverflow link with exact issue solved with help of the extension vscode-jest-snippets.

  Reference: Stack overflow link

• 26 August 2020

  Today I learnt about transient props in Styled Components.

  Issue: When creating a styled component with a prop which is similar to an existing HTML attribute, that prop gets passed through to the underlying DOM element as a corresponding attribute. We could handle it by renaming that prop to not match any existing HTML attribute. This new props now enables us to pass the same props with $ prefixed to them, and styled components will know not to pass these to the rendered DOM element nor pass it further down the component hierarchy.

  Reference:

  • Styled component github issues
  • Read the detailed proposal on Medium

• 17 August 2020

  Today I learnt that we have a HTML tag for abbreviations. As per MDN, The HTML Abbreviation element (<abbr>) represents an abbreviation or acronym; the optional title attribute can provide an expansion or description for the abbreviation. If present, title must contain this full description and nothing else.

  By default, the text under this element has a style set to text-decoration: underline dotted;
  We can have custom styles on it and can set the text-decoration to none to remove that dotted underline on it. I created a simple codepen example to see how this element works.

  Read more: MDN documentation on abbr tag

• 14 August 2020

  Today I learnt that we have css properties - font-variant-numeric and font-feature-setting which allow us to enable same width on the numbers for a font.

  Source: Twitter post on it

  There are some cool things we can achieve using these.

  Read more on font-feature-settings and font-variant-numeric

• 11 August 2020

  What was the issue?
  

  One of the sub-dependencies of my project got updated unintentionally to incorrect version (after running yarn upgrade on a dependency). To fix this, we had to add a resolution for the sub-dependecy to prevent it from causing any issues the release.

  Now, I heard this term add resolution for the first time, and had no idea what to do. So I followed the (dev) religious practice and googled about it. Thankfully, I got the helpful link in the first attempt itself (what a relief!)

  The solution I found:
  In a nutshell, I followed below steps:

  1. Deleted the package lock file created
  2. Added a resolutions entry in the package.json for the sub-dependency { "dependencies": { "package-1": "2.3.1", "package-2": "3.1.7", } "resolutions": { /** because I upgraded package-1 and it had package-2 as dependency * which got upgraded to a higher version which we did not want */ "package-2": "3.1.7" } }
  3. Re-run yarn upgrade command for package-1, and this time it does not increment the sub-dependency version. Problem solved!

  
  Reference link: Read about selective dependency resolutions here