Forem: Ashutosh Rath

Maximizing Your Web Development Efficiency: A Deep Dive into Chrome DevTools' Elements Section

Ashutosh Rath — Thu, 04 May 2023 12:29:48 +0000

Introduction

Hola developers and learners 👋👋!! We are going to start a new blog series on Chrome Developer Tools. As a web developer, you know that having the right tools can make all the difference when it comes to building high-quality, efficient websites. But fear not! Chrome DevTools Elements section is here to save the day, like a superhero swooping in to solve all your web development woes 🦹.

One of the most useful and versatile parts of Chrome DevTools is the Elements section. It allows you to troubleshoot a specific issue, fine-tune the layout of your site, or just learn more about how web pages are constructed, the Elements section is an incredibly powerful tool. DevTools is like your trusty utility belt, packed full of tools and gadgets to help you create and optimize your websites. And the Elements section is like a magical x-ray vision that lets you see inside any webpage and manipulate its inner workings.

But even if you're already familiar with the basics of DevTools and the Elements section, you might be surprised at just how much more you can do with it. In this blog post, we're going to take a closer look at the Elements section of Chrome DevTools and explore some of the many ways you can use it to improve your web development workflow. Be assured you are surely gonna learn something new today!!

How to open DevTools😑

Duhh!! You must be wondering what a dumb thing I am trying to show you but let's start from the beginning. There are a few ways to open DevTools in Chrome:

Using the Chrome menu: Click the three dots icon in the top-right corner of Chrome, then select "More tools" > "Developer tools".
You can press the F12 key on your keyboard to open inspect elements.
Using the keyboard shortcut: Press Ctrl+Shift+I (Windows, Linux) or Cmd+Opt+I (Mac).
Right-clicking on the page: Right-click on any element on the page, then select "Inspect" or "Inspect element" from the context menu.
You can directly open the Elements section by pressing Ctrl+Shift+C (Windows) or Cmd+Opt+C *(Mac). You can open the Console section by pressing *Ctrl+Shift+J (Windows) or Cmd+Opt+J (Mac) (Remember C for CSS and J for Javascript😉).

Getting to Know the Elements Section

The Elements section is a powerful set of tools for inspecting, editing, and debugging the HTML and CSS code of any web page.
The HTML tree structure is displayed in DevTools as a hierarchical tree, with each element represented by a node in the tree. The tree is organized in a parent-child relationship, where each node can have one or more child nodes and may also have a parent node.
The Styles tab of the Elements section allows you to view and manipulate the CSS rules that apply to each element on a web page. You can experiment with different CSS properties and values, and see the changes in real-time as they're applied to the page.
By understanding the underlying structure and hierarchy of the HTML tree and the rules and properties defined in the CSS, you can gain a deeper understanding of how web pages are constructed and optimized for performance and usability.

Viewing and changing the DOM

To open the Elements section, right-click on any element on a web page and select "Inspect" from the context menu. Each node in the DOM(Document Object Model) represents a different HTML element, such as a heading, paragraph, image, or link. You can expand and collapse each node in the tree to view its child elements, and you can also select individual nodes to view and modify their properties and attributes.

To select an element in the DOM, simply click on it in the Elements panel. This will highlight the corresponding element on the web page, as well as display its properties and attributes in the right-hand pane. Click the Inspect icon in the top-left corner of DevTools. Now you can choose any item from your screen to check it out in the DOM.

Once you've selected a node in the DOM Tree, you can navigate the DOM Tree with your keyboard. You can press the arrow keys to navigated throught the elements in the tree.
In addition to selecting elements in the DOM tree, the Elements panel in Chrome DevTools also provides a powerful search functionality that allows you to quickly find specific elements based on their attributes, text content, or other properties. While in the DevTools press Ctrl/Cmd+F to open the search tab.

Now we are going to see some methods to edit the DOM using the Elements section of Chrome DevTools:

Edit attributes: To change the value of an attribute, simply double-click on the attribute name in the Elements panel and enter a new value. You can also right-click on the element and select "Edit attribute" to access this functionality. Content can be edited the same way.
Edit node type: You can change the type of an element (e.g. from a
to a ) by right-clicking on the element, selecting "Edit as HTML", and making the necessary changes.
Reorder DOM nodes: To move an element to a different location in the DOM tree, simply click and drag it to the desired location. You can also use the up and down arrow keys to move the element up or down within its parent element.
Force state: In some cases, you may need to force an element to appear a certain way (e.g. to test how the page behaves under different conditions). You can do this by right-clicking on the element, selecting "Force element state", and choosing the desired state from the menu.
Hide a node: If you want to temporarily hide an element from the page, you can right-click on the element and select "Hide element" or simply press 'H'.
Delete a node: To remove an element from the DOM tree entirely, simply right-click on the element and select "Delete element".

CSS of the elements

To view the CSS properties of an element, click on the "Styles" tab in the right-hand pane. Here, you will see a list of all the CSS properties that are currently applied to the selected element. Each property is displayed with its name, value, and a toggle button that you can use to enable or disable it. In addition to editing individual properties, you can also add new properties and even entire CSS rules to an element. To do this, click on the "+" icon in the Styles pane and select either "New Rule" or "New Property". This will open a new field where you can enter the name and value of the new property or rule.

Here are some different aspects of CSS in the Styles pane of the Elements section of Chrome DevTools:

Invalid values and declarations: If a CSS property value is invalid or a declaration itself is invalid, the value will be displayed in red in the Styles pane. This can help you quickly identify errors in your CSS and fix them.

Overridden: If a CSS property is overridden by another rule or declaration, it will be displayed with a line through it in the Styles pane. This can help you troubleshoot issues with your CSS and identify conflicts between different rules.

Inactive: If a CSS property is not currently applied to an element, it will be displayed as grayed out in the Styles pane. This can help you understand which properties are affecting the look and feel of an element and which ones are not.
Inherited and non-inherited: Some CSS properties are inherited by child elements, while others are not. In the Styles pane, inherited properties will be displayed with a small arrow to the right of the property name, indicating that the property is inherited. Non-inherited properties will not have this arrow.
Shorthand: CSS shorthand properties allow you to set multiple values for a single property using a shorter syntax. In the Styles pane, shorthand properties will be displayed with a small arrow to the left of the property name, indicating that the property is shorthand. Clicking on the arrow will expand the shorthand property to show all of its component parts.
Non-editable: Some CSS properties cannot be edited directly in the Styles pane. Instead, you may need to edit the HTML or CSS source code to make changes to these properties. Non-editable properties will be displayed with a lock icon next to the property value in the Styles pane.

Now we will learn about CSS Grid Debugging Tools:

Click on the "Styles" tab in the DevTools panel.
Select the "Grid" option in the Styles pane to visually inspect the CSS Grid layout of the webpage.
Click on the "Grid" overlay button to show the grid overlay on the webpage.
Use the "Overlay Display Settings" option to customize the grid overlay display settings by showing/hiding line numbers, line labels, line names, track sizes, and area names.
Use the "Extend Grid Lines" option to extend the grid lines to the full height or width of the grid container for a clearer view in the grid overlay.

We have the following properties that we can use to make the debugging more accurate:

Show Line Numbers: Displays the line numbers for rows and columns in the grid overlay.
Hide Line Labels: Hides the line labels in the grid overlay.
Show Line Names: Displays the names of the grid lines in the grid overlay.
Show Track Sizes: Displays the sizes of rows and columns in the grid overlay.
Show Area Names: Displays the names of the grid areas in the grid overlay.

We've covered everything from grid layouts to DOM manipulation, but we still have one more tool to explore before we wrap up. It's time to put on our detective hats and dive into the world of CSS flexbox debugging tools! Don't worry, it's not as intimidating as it sounds, and I promise to make it just as entertaining as our previous adventures. So let's jump right in and uncover the mysteries of flexbox debugging!

Discover CSS flexbox: Use the Styles pane in DevTools to locate CSS rules that use flexbox. You can also use the Elements pane to inspect individual elements and see their flexbox properties.
Modify layouts with the flexbox editor: The flexbox editor allows you to experiment with different flexbox settings and see the changes in real-time. You can access it by selecting an element with a flexbox rule and clicking on the "Toggle the flexbox editor" icon in the Styles pane.

Examine the flexbox layout: Use the "Flexbox" tab in the Computed pane to see a visual representation of the flexbox layout. This can help you understand how flexbox properties are affecting the layout.
Adjust the flexbox overlay color: The flexbox overlay is a transparent color grid that shows the alignment and spacing of flexbox items. You can change the color of the overlay in the DevTools settings under "Elements" > "Styles" > "Flexbox Overlay Color".

Well, that wraps up our journey through the Elements section of Chrome DevTools. I hope you enjoyed learning about the various features and functions, and that you feel empowered to take your web development skills to the next level.

And for those of you who made it all the way to the end of this (somewhat lengthy) blog, my sincerest apologies for any wrist cramps, eye strain, or other ailments you may have suffered as a result. But hey, at least you can now impress your friends with your newfound DevTools knowledge, right?😉😂

Now to lighten your humor part here are some quick and funny examples of how DevTools can be used:

Create custom cursor: Want a cute cat or unicorn cursor? Use DevTools! In Styles section, find body element, add: "cursor: url(your-image-url), auto;" with your image URL.
Remove annoying pop-ups: Using the "Delete Node" feature in the "Elements" pane, you can remove those pesky pop-ups that interrupt your browsing experience.
Change the text on a website: Using the "Edit as HTML" feature in the "Elements" pane, you can change any text on a website to say whatever you want. Don't change the score on your grade cards!!

Conclusion

And that's it, folks! We've come to the end of our journey through the wacky and wonderful first part of Chrome DevTools: Elements section. Whether you're a seasoned developer or a curious newbie, we hope that you've learned something new and had some fun along the way.

Remember, with great power (and DevTools) comes great responsibility. So go forth and debug with confidence, knowing that you have the tools to tame even the wildest of bugs. And who knows? Maybe you'll even find some new and exciting ways to use DevTools that we haven't even thought of yet.

External References

Chrome Developer Tools documentation
DevTool Tips by Jecelyn Yeen

I will be coming up with the next part of the blog series soon that will be on Console section!! Any edits or suggestions are welcome.
Thank you!🦚

Memoization : Making Your Code Smarter So You Don’t Have to Be

Ashutosh Rath — Fri, 14 Apr 2023 02:29:43 +0000

Memoization - Even the text-editor feels that the word is incorrect. If you are seeing this word for the first time you may confuse it with “memorization” but yeah there’s no “r” in it. Memoization is a fancy way of saying “remembering stuff so you don’t have to do it again.” And who doesn’t like a good shortcut? In this article we are going to learn about where to use, how to use and when to use memoization along with some code snippets to get clear about what we are learning. Let’s Start🚀🚀!!

Understanding Memoization

First things first, what is memoization? Memoization is a technique used in programming to store the results of expensive function calls and return the cached result when the same inputs occur again. It’s like having a mental note of the answer to a problem, so you don’t have to do the calculations every single time.

To understand this more clearly let us take a very common example, fibonacci series:

let cache = {};

function fibonacci(num) {
  if (num <= 1) {
    return num;
  } else if (cache[num]) {
    return cache[num];
  } else {
    cache[num] = fibonacci(num - 1) + fibonacci(num - 2);
    return cache[num];
  }
}

In this case, the fibonacci() function generates Fibonacci numbers recursively. However, the recursive nature of the function means that it can quickly become very slow for larger values of num. By using memoization, we can cache the results of the function and avoid redundant . Here we are using an object called cache to store the results of the function. If the function is called with a number that already exists in the cache, we can return the cached result instead of recalculating it.

We can see a real world application of memoization in javascript where we are going to make an API fetch request,

let cache = {};

function getDataFromAPI(endpoint) {
  if (cache[endpoint]) {
    return Promise.resolve(cache[endpoint]);
  } else {
    return fetch(endpoint)
      .then(response => response.json())
      .then(data => {
        cache[endpoint] = data;
        return data;
      });
  }
}

In this example, we’re using memoization to optimize a function that makes requests to an API. The getDataFromAPI() function first checks if the result for the given endpoint is already cached. If it is, it immediately returns a resolved Promise with the cached data. If it's not, it makes a request to the API using the fetch() method and stores the result in the cache for future use.

Caching vs Memoization: The Battle for the Cache-ius Throne!

Memoization and caching — two concepts that can be as confusing as trying to order a cup of coffee at a cafe in a foreign country. Memoization is like a bartender who remembers your favorite drink order and has it ready for you before you even ask, while caching is like a secret storage room where you keep all your precious data safe and accessible. So, put on your programming hats and let’s explore these two mystical… I mean, technical techniques together.

Purpose: Memoization caches the results of a specific function to optimize its performance, while caching stores frequently used data throughout an application.
Implementation: Memoization can be implemented with a simple function wrapper, while caching may require complex data structures and algorithms.
Time-to-live: Memoized results are typically stored in memory for the duration of a single function call, while cached data can be stored for longer periods of time and may need to be periodically refreshed or invalidated.
Scope: Memoization is typically used within a single function or module, while caching can be used across multiple functions or modules.
Cache Invalidation: Memoization does not offer automatic cache invalidation, while caching can be invalidated manually or automatically based on defined criteria.
Automatic Caching: Memoization requires explicit caching, while caching can be automatic and performed by the language or framework being used.
Understanding the distinction between memoization and caching is essential for any developer looking to improve the speed of their code. You may dramatically enhance the speed and efficiency of your applications by selecting the proper strategy for the right scenario.

Here’s a joke for you!!Why did the memoized function break up with the caching algorithm?Because it realized that it was just using it for its cache!😂😂

Best Practices for Using Memoization in JavaScript

In previous section, we understood what memoization is and how is memoization used by us in real world application. In this section, we’ll go over some best practices for using memoization effectively in your code. Some of them are:

Memoize only pure functions that always return the same output given the same input
Test the performance of your memoized functions against the original version to ensure that the optimization is worth it
Be mindful of memory usage and clear the cache object if it becomes too large
Avoid memoizing functions with side effects, such as functions that modify external state or perform I/O operations
Document your memoized functions and cache object to make it easier for other developers to understand and work with your code
Avoid memoizing functions with side effects, such as functions that modify external state or perform I/O operations

Memoization in ReactJS

Memoization is a powerful technique for improving the performance of JavaScript functions by caching their results. In React, memoization is used in two main ways: through the use of React.memo(now memo), which memoizes the result of a component’s render method, and the useMemo hook, which memoizes the result of a function. By using memoization in React, you can avoid unnecessary re-renders and re-computations, and build faster, more responsive user interfaces.

Memoization in few other places

Memoization is a technique commonly used in dynamic programming to optimize recursive algorithms that have overlapping subproblems. In dynamic programming, you solve a problem by breaking it down into smaller subproblems, and then solve each subproblem only once and store the solution in a table for future use. This is where memoization comes in handy. By using memoization, you can store the solutions to subproblems that have already been solved and retrieve them when needed, without having to recalculate them every time.

Memoization is commonly used in functional programming languages like Haskell, where it is a built-in feature. In functional programming, functions are pure and don’t have side effects, which makes them ideal for memoization.

Conclusion

In this blog, we’ve explored the basics of memoization in JavaScript, and looked at how it can be implemented using simple examples. We’ve also discussed best practices for using memoization in your code, and highlighted some of the common pitfalls to avoid. Overall, memoization is a powerful technique that can help you build faster and more efficient applications, but it’s important to use it correctly and with care. By following the best practices outlined in this blog, you can take advantage of memoization to optimize your code and improve your application’s performance.

You can learn more about memoization from the below sources:

What is Memoization? How and When to Memoize in JavaScript and React by freecodecamp.org
Learn JavaScript by Implementing Memoization by Edgar Abgaryan

Any suggestions or corrections are always welcome!!🦚

Thank you!!