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:
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:
To check which feeds are added currently:
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:
Learned from: How to geek blog
We can bulk choose which packages to upgrade to latest version while using yarn:
yarn upgrade-interactive --latest
Learned 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?
Reference: 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.
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:
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 that
figureis 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: