Learning through Links 🔗

Mohil Zalavadiya — Sat, 21 Nov 2020 16:24:41 +0000

Spoiler alert: You may get to read more than you came here to read for. It's not just 2 min read.

If you're here, then it most probably means that you reached after clicking a bunch of links. And from here, you may end up somewhere else to read something even more interesting😛. Well, that's what happened when I went to read the React docs.

A few days back, I wanted to start learning the basics of React library. I think there isn't a better place other than Getting Started to do that. There I found my first link React Tutorial: An Overview and Walkthrough By Tania Rascia. As mentioned in React docs, the concepts written in the article were detailed and beginner-friendly.

Scrolling further leads to Javascript overview from MDN. I thought let's take a quick look. It wasn't so quick, though😅. Because the first line itself has a link to The World's Most Misunderstood Programming Language. The title itself is catchy. How can one not click that😄?

Well, it doesn't end there. At the end of that article, there were two more links.

JavaScript objects can have private variables and private methods. Private variables and methods are achieved using Closures.
JavaScript supports not only classical inheritance, but other code reuse patterns as well. He has explained inheritance through sugar methods to make it resemble classical inheritance.

We often use popular tools for development not knowing their creators. But through this, I got to know about Douglas Crockford, creator of JSLint and JSON.

For knowing Javascript in detail, apart from MDN, you can also refer to javascript.info

On reaching the 'Create a New React App section', I found a list of toolchains. I went to look at Gatsby.js's home page as I heard that name before. In the 'WHAT GATSBY USERS ARE SAYING' section, I saw that Codebrahma was hired by Serverless to do their new site. So, being curious by name, to Codebrahma blogs I went. Among recent, I got attracted to below two

After reading all these, I was back on track to learn more about React, finally😂. I hope you found some useful links along the way 😉. Feel free to share if you had a similar experience.

Cover Photo by Avi Richards on Unsplash.

Chrome dev tools feature I wish I knew before

Mohil Zalavadiya — Wed, 11 Nov 2020 17:46:15 +0000

As a web developer, one will often spend a lot of time using developer tools provided in the browser to inspect the DOM, do some style tweaking, debugging the code, and various other tasks.

I've been using Chrome for debugging for a long time. If you've noticed after updating the Chrome, when you open the dev tools then it may have What's new section giving us a summary and link to the full article. So, once I opened the link and found that there are many features that I've never used. And for some of them, I was using workarounds 😅. So, I thought let's do some reading and found many useful things from their docs. I'll be sharing a few of them here.

Accessing DOM element from Console

Select any element from the DOM tree available under the Elements tab. You'll see a == $0 being displayed at the end of your selection. It means that you can directly refer to that element from your Console. No need to make a querySelector call for that.

Also, Chrome keeps track of the last five selected elements. So, you can access them using $0 to $4.

Add/remove classes of an element

We often want to add or remove classes for an element to see how it affects before making those changes in the code. Under Elements > Styles tab there's a .cls button. On click, it'll open a list of classes with checkboxes to quickly add and remove it. A new class can be added from the provided input too.

Preserve log and Log XHR (Console settings)

The debugging and other related logs are cleared on page reloads. It may be required across page reloads for comparison. Log preserving can be enabled from Console settings. It can be accessed from the top right corner of the Console tab.
Similarly, XHR logging can be enabled from there. It is helpful when a stack trace is needed for XHR calls.

Watch expressions

While debugging it may be required to keep an eye on the value changes for some variables. You can add watch expressions in the Console tab by clicking on an eye icon.

Change element sizing

To apply some padding or margin changes to the element, we can write them under the element.style block. But there's a quicker way. Just double-click on any of the values displayed in the CSS box model and change the value. It'll add the appropriate style property for sizing.

Copy object in JSON format

If you want to take note of object values or share it with someone then a long way to do that will be to call JSON.stringify and then copy that manually. Dev tools console exposes copy function to do just the same. Call copy with the object as an argument. It'll copy the JSON format of the provided object to the clipboard.

Come to the Dark side

You might've noticed my dev tools in Dark theme, if you don't know that you can do the same. Open the settings from the top right corner of the dev tools window. Select Dark under Preferences > Appearance > Theme.

Well, these are some of the basic features that I come across. To know more about what you can do with dev tools, do visit full docs.

DEV Community: Mohil Zalavadiya