Keystone Static Blog Template on GitHub

Design system boilerplate

Progressive Rendering — The Key to Faster Web

Top 10 features in React Dev Tools in 10 tweets

Google is one of the most powerful tools, and believe it or not, Googling is one of the most important skills out there. Here are some handy tips to master it.

Tip #1: Search for an exact word or phrase

The minus sign allows you to specify words that shouldn’t appear in your results. Use 

The site: operator allows you to perform a search within the specified site.

Tired of seeing Wikipedia articles on your search results?
Use 

 before your search term to remove results from that site.

The asterisk is a wildcard that can match any word. Use 

 operator allows you to search for files specific to a type.
Some available types: 

![Screen Shot 2021-10-22 at 11.58.09 am.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1634864295404/JQbC76Tml.png)

Use the following search trick to find an inline definition:

![Screen Shot 2021-10-22 at 11.50.32 pm.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1634907038686/mJMMkxlpf.png)

 to search for a word and all its synonyms

How to increase font-size of paragraph ~tag

how to code in C# OR how to program in C#

 to finding sites that are similar to the specified site.

![Screen Shot 2021-10-22 at 11.54.39 pm.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1634907286761/RwDNG0nsA.png)


![Screen Shot 2021-10-23 at 12.05.01 am.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1634907907846/n_ad-uiXp.png)

 will return pages that contain both words

![Screen Shot 2021-10-23 at 12.12.12 am.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1634908341520/YVXGLXH9-.png)

Use to get results that must contain some given words.

![Screen Shot 2021-10-23 at 12.13.24 am.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1634908411342/U0Hcb0a39.png)

If you want to find a web page that includes every word of your search query, you can put 

 followed by the words and/or phrases you want to search.

allintext: CSS fundamentals like the box model, cascade and specificity

You can use Google search to translate words and phrases from one language to another.

You can pull up a timer within Google by typing an amount of time followed by the word timer.

You can also pull up a stopwatch within Google simply by typing stopwatch.

Thanks for reading, hope you all enjoyed this post. Stay tuned for more tips and tricks 🥳

14 tips to Google like a pro

First Way:

function capitalizeFirstLetter(string) {
  return string.charAt(0).toUpperCase() + string.slice(1);
}

Second Way (Regex):

^ ==> 'Start of the string'
let str = 'the quick green alligator...';
let regex = /\w\S*/g;
// Breaking down regex

\w ==> 'Character'
\S ==> 'Non-whitespace character'
* ==> zero or many occurences
str.match(regex)    // ["the", "quick", "green", "alligator..."]

str.replace(/\w\S*/g, (w) => (w.replace(/^\w/, (c) => c.toUpperCase())))

How to capitalize a string in JS

const map = {"a" => 3, "b" => 1, "c" => 2, "d" => 4, "e" => 5};

const arr = Array.from(map);

console.log(arr)

// [["a", 3], ["b", 1], ["c", 2], ["d", 4], ["e", 5]]

How to convert a map into an array in JS

str
  .replace(/(?:^|\.?)([A-Z0-9])/g, function (x, y) {
    return "*" + y.toLowerCase();
  })
  .replace(/^*/, "");

How to convert PascalCase/CamelCase to underscore_case in JS?

As you can see, there are completely different mechanisms for trying to convert a value into a string. So how do we choose?

function isPlainObject(obj) {
  return Object.prototype.toString.call(obj) === "[object Object]";
}

function toString(val) {
  if (val === null || val === undefined) return "";
  if (Array.isArray(val)) return JSON.stringify(val);
  if (isPlainObject(val) && val.toString === Object.prototype.toString)
    return JSON.stringify(val); // other cases
  return String(val);
}

Also to join the elements in an array, instead of using 

How to convert a value into String in JS?

const fs = require("fs");
const createDirIfNotExists = (dir) =>
  !fs.existsSync(dir) ? fs.mkdirSync(dir) : undefined;

// Example
createDirIfNotExists("test"); // creates the directory 'test', if it doesn't exist

How to create a directory, if it does not exist?

How to create an object containing the parameters of the current URL?

✨ The human body is designed for continuous activity.

✨ Loss of muscle tissue or its breakdown is associated with aging and the one thing that will turn exercise into an anti-aging activity is protein. Because amino acids help us repair our tissues and recover from the stress that exercises place on our body.

This book gives the most fundamental understanding of how the diet and stomach work and how the human body functions with regular exercise and a healthy diet.

Diet has become a scary thing for everybody out there. People have come to the conclusion that diet is a means to harm your body to lose weight, that’s how diet is being marketed.

The truth is that diet is just the consumption of healthy food necessary for our body which includes all kinds of nutrients needed for it.

People follow intense diet plans, which is absolutely unnecessary when you understand how your stomach works. We care about our heart, lungs and liver and etc, oftentimes we forget about the stomach.

According to Ayurveda, the mind, and body are connected, if the mind accepts a healthy diet, the body does. If your mind is healthy and positive, your body will glow with good vibes and stay healthy.

Exercise is non-negotiable. Unless you exercise, you’ll never see enough results.

⭐️ Don’t ever go on extreme diets - they’re not sustainable and just do what works in a long run.

⭐️ Dieting should not involve starving yourself, you should eat to lose weight.

⭐️ Never go on a diet - change your lifestyle.

⭐️ Information without awareness is useless.

Don’t lose your mind, lose your weight

This is a warm, cozy book to read on a nice day. 

The protagonist would have sacrificed her whole life for others, she keeps everybody around her happy and at one time, she doesn’t know how to make herself happy.

It’s sweet to take care of your parents, but don’t let them control your life, draw a line there. Since we have one life, try making something out of it, something you want.

It’s never too late to live for yourself, you can always start your life, age is just a state of mind.

It’s good to protect children with lies, it shows how much the parents love the kid, but it’s important to let them know everything and let them decide what they want in their life.

If one thing I can take from this book, is breaking the chains, we’ve all got just one life, live as you wish, do the right thing, learn to say no, never hurt your self-esteem, and never let people take you for granted.

Keep reading books, and keep growing your imaginative space, it helps you escape/overcome tough times.

The library of Lost and Found

A strategy for acquiring skills and knowledge that is both self-directed and intense.

Your deepest moment of happiness doesn’t come from doing easy things, they come from realizing your potential and overcoming your own limiting beliefs about yourself.

As long as you stick with a process, you’re bound to learn something new.

One thing I learned: Ultralearning is all about self-learning with intense hands-on. Stick to a strict schedule, quickly learn and quickly build. It’s jumping right inside the well and starting to learn swimming.

The Unschooled Mind: How children think and how schools should teach

Ultralearning

This book is more philosophical emphasizing life. 

Never underestimate the importance of small things in life.

It’s important to live a life that’s more satisfying for oneself than living for others. 

The Midnight Library

» You should know all the entrances and secret passageways of your fort, aka 

 or reveal all your vulnerabilities. Don’t trick yourself into believing that you’re obligated to share everything with everyone. It’s up to you to decide what to reveal and when.

 - Everything you want is just outside your comfort zone

 - Seek out situations that make you uncomfortable and then throw yourself into them

three things you know you need to do in order to succeed

» Have fewer emotions - Emotions can cloud your judgment and reduce productivity.

» Have fewer emotions - Productivity over pride. Elevation over ego.

» You’re a bawse now, you need to spend less energy stalking your ex on Instagram and more energy making phenomenal first impressions.

How to be a bawse

This has been written over a hundred times before and probably holds more than a hundred answers on StackOverflow. But over time, going through different articles and answers, I curated the important parts and wrote them down in this post.

There are 3 ways to attach a handler to an event in JavaScript.

This is the old-school way of attaching a handler to an event by adding an attribute to the DOM element.

Remember, a node can only have one onclick attribute. So with this approach, only one handler can be registered for an event.

 way of creating a DOM node on the fly, adding an attribute to it and attaching a handler to the attribute. Since this is almost the same as the previous approach, 

only one handler can be registered to an event

This is the modern way of binding handlers to the event. We can bind any number of handlers with the event and all these handlers will be invoked when that event happens.

There are a handful or pre-defined events that have default actions associated with them. For example,

custom handlers associated with these elements will get invoked before the default actions

 are followed by the default actions. If you want to completely unbind this default behavior from the element, you can call the 

Note: This has got nothing to stop the event from bubbling up the DOM.

Events in DOM usually get propagated as a stack of events nested in the web browser.

Event bubbling can be better explained with an example.

Let's take a nested DOM structure like this

Event capturing is more of capturing the event in the DOM and handing it over to event handlers for execution. Events are captured from the top-down, meaning the outermost element is captured first and propagated to the inner elements. Once the events are captured, the bubbling of events starts from the innermost elements.

You can stop the bubbling of events from child to parent by calling 

You can remove an event listener from an element by invoking 

 on the event, which accepts the event name and handler name as arguments.

That's it, folks. Pl drop a comment if you think this post could be improved in any way.

Everything about Event Handlers and Event Propagation

const list = "a a a  b  c c  d d d d  e e e e e";
const words = list.split(/\s{1,}/);

console.log(words);

// ["a", "a", "a", "b", "c", "c", "d", "d", "d", "d", "e", "e", "e", "e", "e"]

How to use array split with regex in JS

How to copy a string to the clipboard?

How to create a counter with the specified range, step and duration for the specified selector?

const currentURL = () => window.location.href;

// Example
currentURL(); // 'https://google.com'

How to get the current URL?

Iterate through the array, and find the item you want to delete and then do 

list.forEach((index, item) ⇒ if(item.name == 'No entry') delete list[item])

This will delete the item in the array but it leaves a void meaning - the array length will still remain the same → will be like final list length 5 - [1,2,3,4,empty]

list.forEach((index, item) ⇒ if(item.name == 'No entry') list.splice(index, 1))

This will actually the remove the item and it's space from the array so the length of the array will be Initial(5) ⇒ Final(4)

How to delete a specific item from an array in JS?

How to deploy an app using AWS Amplify

- [x] Write the press release
- [ ] Update the website
- [ ] Contact the media

Task lists allow you to create a list of items with checkboxes. In Markdown applications that support task lists, checkboxes will be displayed next to the content. 

To create a task list, add dashes (-) and brackets with a space () in front of task list items. To select a checkbox, add an x in between the brackets ().

How to add task list or checkbox list in markdown

Every developer should have come across this task of centering a div in their lifetime at least once or every single day. We all have our handy technique but for beginners, it might be frustrating at times.
 
In this article, I have compiled a list of different CSS tricks to center a div horizontally and vertically center on a page, choose a trick or two, and make it your favorite.

I wanted this technique to be on top since it's my favorite of all. In this trick, all the CSS properties are defined under the parent container.

(vertical placement by default) center. These properties come with Flex specifications. One glitch to make this work is by providing a fixed width and height to the parent.

Using CSS Grid, we can achieve our goal in two ways. First, using 

. Yet again, these properties are exclusive to CSS Grid.

, we provide the rules to the parent, and it alone does the magic. We give the parent 

 and there you go, things get super centered.

property, and the main properties are given to the child container - 

(horizontal placement) props are given center as value.

Method 3: Using CSS Positioning and CSS transform

This is one of the old school methods we follow to center elements on a page. We make the child container's position 

 to the parent container and move the child container to 50% from the top and left of the parent.

A gradient image with mix of multiple colors

Yet another old school method works like a charm in all the browsers. All we have to do is define 

 style to the child container. I've personally faced some inconsistencies while trying this method, so I always add extra properties to center the elements.

This is one of the common methods followed since the birth of 

 to the parent and define top, left, right, and bottom properties '0' along with 

 widely across our application, which comes with plenty of table properties. I was surprised to find that we can use table property to center the content and elements in a container and it gets better we can do that in two ways.

 to the wrapper(which is a level above the parent), then we use 

The difference in two ways comes with child properties - one, is by using 

We have reached the end of this article. I have attached a Codepen below, where you can find all of the above-mentioned tricks in one place, play around with it and share over here if you follow any cool tricks to center things.

I hope you find this article helpful and informative. If you like this article, give me a thumbs up 👍 Don't forget to bookmark it for future reference 🔖

5 ways to center a div vertically and horizontally using CSS

My blogging has been quite infrequent. I used to publish a post once a year. That's it. That's not the whole, I list down around 100 ideas every year, which never come out in any form. This year, I took a resolution to break this jinx. I will be turning all my tech notes, tips, and tricks I learn every day into blog posts.

This place will be the curation of my learnings and I can get back to it anytime when I want to have a glance at the topics.

Recently, I found this interesting article 

. This one post was enough to shun away my fears in writing down my thoughts. I also found 

 motivating to start my blogging journey.

I have still got the rest of the year in front of me to enrich my writing experience. I will be consistently blogging and will be sharing my upcoming posts every week. 

I'm figuring out the ways to start my blogging journey actively, there are 50–50 chances of me either getting successful or dropping off the blogging midway. Either way, let's face it, three things are not gonna change - Consistent writing, planning the ideas up front, and building up a writing routine.

I'm gonna list down the upcoming posts that I've been writing and will be coming out soon. Some posts might be teeny tiny ones and some might be bigger than dumbledore's beard, but I will try my best to not bore the audience.

Hopefully, I stay consistent in my writing journey. Thanks for reading! 😀

Follow me for more interesting articles. If you like this post, give me a thumbs up 🙌

Stop Waiting and Start Writing ✍🏻

Something amazing is about to happen to grid layouts. The level 2 specification of CSS grid, called 

, is coming to browsers soon and it's gonna take the already awesome CSS Grid to a whole new level.

's article where she introduced CSS Subgrid and I got super excited and thrilled about the possibilities that come along with CSS Subgrid.

In short — CSS Subgrid makes is possible to construct nested grids within CSS Grid.

Right now (without subgrid) the tracks of the nested grids have no relationship to the tracks on the parent grid. To put it in simple terms — we have a parent container with 

 property, therefore its children become grid items. These grid items can also be made the grid containers. But 

the grid tracks defined for the parent grid container won't be aligned with the grid tracks of the child grid containers since they both are independent of the layout

it is necessary for the content and layout of multiple grid items to align with each other.

a grid container can inherit the definition of its rows and columns from its parent grid container

, by making the grid item a subgrid. Subgrid provides the ability to pass the properties of the grid to its nested elements and content-based sizing information back to the parent grid.

These are the two main wins of CSS Subgrid —

Here's an example of how nested grid works without subgrid —

But what if we wanted the tracks of nested grid items to be aligned with the tracks of the parent grid?

This is where subgrid comes to the rescue. When we add the property 

 to the nested grid items, they inherit the row property of the parent grid and align with each other automatically.

This is how it should look if the property is applied.

![CSS Subgrid](https://i.ibb.co/2Pr78Mk/Screen-Shot-2019-04-20-at-7-30-26-PM.png)

Note: Currently, there is no browser support for subgrid so I have created an illustration to explain the behavior.

In this case, subgrid will be on both columns and rows. This means that both dimensions are aligned to the tracks of the parent grid.
![Subgrid-Column-Row](https://i.ibb.co/4WnLP9N/subgrid-row-column.png)

In this case, subgrid is used on columns, meaning there will be an implicit track for rows alone in the grid item but its column tracks are aligned with the parent grid.
![Subgrid-Column](https://i.ibb.co/6BnvdcG/subgrid-column.png)

In this case, subgrid is applied on rows, which aligns with the row tracks of the parent grid, but its column sizing is independent of the parent grid.
![Subgrid-Row](https://i.ibb.co/crDPjkh/subgrid-row.png)

I am eagerly waiting for browsers to support subgrid 

 so I can play around with it and figure out interesting use cases.

CSS Subgrid — Level 2 of CSS Grid

Hacktoberfest is a month-long worldwide open-source festival, run by DigitalOcean and open to everyone in our global community. Anybody can participate in Hacktoberfest, not necessarily have any experience or knowledge in coding. Let's dive more into it.

Basic knowledge of Git and GitHub since the contributions for Hacktoberfest takes place through it.

Learn Git and GitHub in no time with these resources:

 website and register yourself with Github or Gitlab.

Step 2: Find repositories for contributions

![Screen Shot 2021-10-17 at 10.31.52 am.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1634472676133/5N8q7DmAP.png)

Step 3: Make 4 Hacktoberfest Pull Requests

Step 4: Check and see whether you’ve qualified

Once you’ve signed up for Hacktoberfest, you can check your progress on the 

By participating in Hacktoberfest, you'll gain more open source experience and get the chance to earn some Hacktoberfest swags like t-shirts and yes, they'll be internationally delivered for free.

In Hacktoberfest 2021, DigitalOcean is offering an alternative to their traditional t-shirt prize: a 

 alternative! While those Hacktoberfest t-shirts are amazing, it always feels good to save the planet.

1) What if my pull requests aren't accepted?

Even if your pull requests aren’t accepted, as long as you open at least 4 pull requests, you’ll earn the shirt.
The only exception would be if the project maintainer chooses to mark your pull request as “invalid”. They may do this if they perceive your pull request to be low effort, or if it contains plagiarism.

2) What kinds of pull requests count toward earning the Hacktoberfest shirt?

Any pull request made to a public repo on GitHub will count. The pull request must contain commits you personally made yourself — not automated commits from bots.

4) What if I don’t make at least 4 pull requests by midnight October 31?

As long as you're registered for Hacktoberfest, you’ll still get free stickers in the mail. It’s still worth registering, even if you’re too busy to participate.

8 open source projects to contribute to Hacktoberfest:

Ruphaa Ganesan

Blog

Notes

Book notes