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.
-
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.envfile in the project root:GENERATE_SOURCEMAP=false -
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.xmlTo 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
-
We can bulk choose which packages to upgrade to latest version while using yarn:
yarn upgrade-interactive --latestLearned from: debs_obrien's tweet
-
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
-
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. -
git clone <
> --branch master --depth 1 -
- Open task manager and end the VPN session.
- Go to command prompt (cmd) and follow the next commands
- ipconfig /flushdns ( It will flush your DNS entry )
- ipconfig /release ( Your internet will disconnect )
- ipconfig /renew ( internet will connect again)
- Open RUN window ( Windows button + R ).
- type services.msc
- Services window will open > find the vpn service. > restart that service.
- Connect VPN now. It should connect successfully after entering proper id and password.
-
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.
-
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:
Notice the extra 1s after github in the URL. That, dear friends, is the trick. So neat, and super helpful, right?
http://github1s.com/anuk79/UnitTestingReactUsingJestAndEnzymeReference: Danny Thompson tweet showing the trick
-
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.
-
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? -
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.
-
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: -
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 literalsconcept. 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:
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.
-
Today I stumbled across
figuretag which is one of the lesser known semantic tags which got introduced in HTML5. It tells the browser thatfigureis 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: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: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: -
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 -
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
-
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.
-
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.)
-
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
- When we need index as the key for the resulting object, we can use any of following approach:
- When we need any custom as the key for the resulting object, we can use any of following approach:
Reference: :Stackoverflow link -
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 -
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 -
Today I learnt about
transient propsin 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. -
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 tononeto 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 -
Today I learnt that we have css properties -
font-variant-numericandfont-feature-settingwhich 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 -
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:- Deleted the package lock file created
- Added a resolutions entry in the package.json for the sub-dependency
- 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