Forem: nikhil sharma

Get JavaScript Objects from a JSON File

nikhil sharma — Tue, 11 Jan 2022 06:44:09 +0000

Introduction

JSON stands for JavaScript Object Notation.JSON is a lightweight format for storing and transporting data.JSON is often used when data is sent from a server to a web page.JSON is "self-describing" and easy to understand. JavaScript objects are an integral part of the React app, so they need to get accessed from JSON files/data to be uses in components.

This blog will demonstrate how to get a JavaScript object from a JSON file or access it using a fetch() HTTP request.

Rendering Values from a JSON File

Create one sample JSON file as given below, and save it as data.json

{
"employees":{
"employee1": {"firstName":"John", "lastName":"Doe"},
"employee2": {"firstName":"Anna", "lastName":"Smith"},
"employee3": {"firstName":"Peter", "lastName":"Jones"}
}
}

Now, if you want to render any of the key-value pairs from the JSON, the .map() function would be useful to iterate the objects; the example is below.

import React, { Component } from "react";
// Import local JSON file
import Data from "./data";

export class Sample extends Component {
  render() {
    return (
      <>
        <div>
          <h3>Using local JSON file</h3>
          {Object.keys(Data.employees).map((item, i) => (
            <li key={i}>
              <span>Key name : {item}</span>
            </li>
          ))}
        </div>
      </>
    );
  }
}

export default Sample;

In the above example, to use the local JSON file needs to be consumed using the import statement.

import Data from "./data";

After that, you can access all the JSON data using Data in your component by using Object.keys() along with the .map() function.

{Object.keys(Data.employees).map((item, i) => ())}

Using a local JSON file in the React app is a common approach when you want to render some static data, maintain server config, etc.

Rendering JSON Objects from an API Call

You have seen the example where a local JSON file is used, but at the same time you may need to access JSON data from the server.

Implement the API call as demonstrated below.

componentDidMount() {
    fetch("https://jsonplaceholder.typicode.com/users")
      .then(res => res.json())
      .then(
        result => {
          this.setState({
            data: result
          });
        },
        error => {
          console.log(error);
        }
      );
}

After implementing the API call, you can access the JSON data for the rendering as below.

render() {
    return (
      <>
        <div>
          <h3>Using API call</h3>
          {this.state.data &&
            this.state.data.length > 0 &&
            this.state.data.map((item, i) => (
              <li key={i}>
                <span>Email : {item.email}</span>
              </li>
            ))}
        </div>
      </>
    );
}

Along with the state this.state.data, the additional function used is .map(), which iterates the array items from the state and renders them into the DOM.

Hope ou enjoyed the blog post!!

Please feel free to like, save and comment your thoughts!!

Happy Reading!!!

Making Sustainable Websites

nikhil sharma — Sat, 08 Jan 2022 07:32:27 +0000

Over the past few years, hundreds of people have died in climate change-related natural disasters all over the world and experts say it will only keep getting worse if measures are not taken.

From summer of fire and record floods to freak frosts and locust invasions, experts say man-made climate change is wreaking havoc on the world's weather.

But what does that have to do with web development?

Should you as a web developer do anything, apart from putting your PC/Mac to sleep, when you leave it for lunch?

Well, it's relevant for everyone, but it's important for web developers, because we develop websites for the internet — that currently consumes 416.2TWh annually.

That's more energy than the entire UK!

According to Website Carbon :

The average web page tested produces 1.76 grams CO2 per page view. For a website with 10,000 monthly page views, that's 211 kg CO2 per year.

When you think of the major industries contributing to those emissions, few suspects that come to mind are energy, aviation, agriculture etc. But you will be surprised that global internet usage contributes to ~3% of global carbon emissions which is equivalent to carbon emissions of the entire aviation industry.

Did you know we need to cut by 60% of our net global emissions by 2060 to stabilize the climate and prevent catastrophic effects from global climate change? And that’s a conservative estimate.

Power Of Compounding

In February of 2020, a web developer named Danny Von Kooten decided to update a popular Wordpress plugin that he created and maintains, Mailchimp for Wordpress . The change? Remove one, 20kb javascript dependency. The impact? An estimated reduction in global emissions of 59kg CO2 per month.

when you reduce complexity in one area, it compounds into others — a 20kb reduction in javascript isn’t just _20kbs less for the end user — it’s 20kb less on the server, 20kb less on the CDN, 20kb less for the user, _and, in the case of Javascript (one of the most CPU-intensive assets we can serve on the web), many saved computational cycles. The net effect is far larger than the initial reduction.

Measure To Reduce Carbon Emissions

Let's have a look at some of the things we can easily do:

Choose a green hosting provider

To know whether you are using green hosting provider or not, you can visit The Green Web Foundation

If your website is green, you receive a flair!

Choose a green CDN

For CDN's, almost the same principles apply, as when choosing a hosting provider.

You shouldn't have to worry about the location of the CDN, as most of them have locations all over the world, and thus will place your data close to it's core user base.

Prevent battery-drain

If the website is heavy on Javascript and assets that will lead to faster discharge of battery. Here is where web developers can actually do something !

Try to use Javascript only when needed.

Javascript provides Observers that can greatly impact website like IntersectionObserver, MutationObserver, ResizeObserver, PerformanceObserver. Try to use these observers in scenarios applicable.

Reduce network-traffic

The most important thing you can do to lower your website carbon emissions, is by reducing the network-traffic on your site.

Some of the implementations that we can do are use of lazy loading images, responsive images correctly, lazy loading videos, do not auto play videos, caching strategies.

Simplify the user-journey

I think everyone have tried to look for "shipping cost" on an ecommerce-site, and, not being able to find any relevant information, added an item to the basket.

With _still _no info on "shipping-cost", I've personally then filled out dummy contact-details until I _finally _reached a page with the calculated shipping-cost — which were then too high, and I abandoned the site!

I've no idea what the carbon emission footprint is for all these sites with miserable user-journeys, but I assume it's a lot!

So, focus on simplifying the user journey and provide insights and information as easily as possible!

The web can be sustainable, and in making it sustainable, we can ensure that its treasures are available and accessible to all, now and into the future. The web is the largest, publicly-accessible library we have ever known. It’s worth asking ourselves — what can we do to make sure that it lasts, for generations to come?

Resources

Test your own website at websitecarbon.com
Sustainablewebdesign.org is a fantastic resource, with detailed strategies you can employ as a designer, developer, or company leader.
A Book Apart has a whole book on it!

Thanks for reading!

Please comment your thoughts on the same topic and how did you like the blog post!!

Do like and save in case you find it interesting and helpful!!

Why Is Website Performance Important And Tricks To Improve Front End Performance

nikhil sharma — Thu, 06 Jan 2022 10:04:08 +0000

WHY DOES PERFORMANCE MATTER:

The performance of your website is important for accessibility and for other metrics that serve the goals of an organization or business. Web performance has a direct correlation to user experience, as well as the overall effectiveness of your site. A slow website can deter users and drive them to your competition. With this fast-evolving consumer behavior, one cannot risk overlooking the importance of website speed. You should care about web performance.

Millions of different websites are browsed every day, and half of them users close in a few seconds without giving them a possibility to impress, share the content, or sell the goods they advertise. Why does it happen so? A big percentage of websites are sluggish, user-unfriendly, and browser-incompatible. Modern users are unlikely to spend their time on slow loading pages or poorly optimized websites. In the context of web services, such problems relate to poor front-end optimization. The goal of front-end performance is to give users an ability to get what they want from a website or an application at a very limited time and ensure that they have a smooth experience while interacting with it.

Consider an example that you are running an e-commerce website. Performance is of major consideration as it is found that faster websites have lower shopping cart abandonment rates and higher conversion rates. For e-commerce websites, milliseconds in extra load time can result in loss of revenue.

Similarly, in case of content websites like wikis or blogs, audience is everything. If your website is slow it results in higher bounce rates and lower search engine ranking. Now consider an example of intranet application like timesheet or internal portal a few seconds of load time might not be a big concern.

Below are some interesting facts on business impacts and conversions:

Etsy found that adding 160kb of hidden images to their mobile site increased their bounce rate by 12%.
Walmart found that for every 1 second of improvement they experienced 2% increase in conversions.
Amazon found that every 100 milliseconds in load time on amazon website resulted in 1% decrease in sales.
Google found that when they increased the search results from 10 to 30, the load time increased by half a second and resulted in a 20% decrease in ad revenues.

Google has admitted that performance is one of the factors in their page rank algorithm. They recently began experimenting with red warning tags in search results, which is essentially a digital performance-based scarlet letter.

Reference: https://searchengineland.com/google-testing-red-slow-label-search-results-slower-sites-215483

Lastly, let's consider the needs of our users and how performance fits into that.

Users expect the software to be functional, reliable, usable, performant and pleasurable.

Below are a few statistics related to website speed. Hopefully this will help you understand why page speed plays an important role in meeting the website performance standards:

40% of internet users are likely to abandon a website if it takes more than 3 seconds to load.
50% of users expect a website to load in 2 seconds or less.
70% of users that find your website to be slow will likely not return to your website again.
45% of the users will share their poor experience with the page speed and website loading with others

PERFORMANCE METRICS:

Performance metrics are the new standards of performance. There is no single metric or test that can be run on a site to evaluate how a user "feels". However, there are several metrics that can be "helpful indicators":

First paint - The time to start of first paint operation. Note that this change may not be visible; it can be a simple background color update or something even less noticeable.

First Contentful Paint (FCP) - The time until first significant rendering (e.g. of text, foreground or background image, canvas or SVG, etc.). Note that this content is not necessarily useful or meaningful.

First Meaningful Paint (FMP) - The time at which useful content is rendered to the screen.

Largest Contentful Paint (LCP) - The render time of the largest content element visible in the viewport.

Speed index - Measures the average time for pixels on the visible screen to be painted.

Time to interactive - Time until the UI is available for user interaction (i.e. the last long task of the load process finishes).

Reference: https://business.trustedshops.com/blog/what-is-google-lighthouse

TOOLS TO MEASURE PERFORMANCE:

There are plenty of front-end performance tools out there (free and subscription-based) which allow you to audit the performance of your website and collect metrics covered in the previous section. Below are two tools I have used and highly recommend.

1) LIGHTHOUSE:

Google Lighthouse is a tool with which you can perform an audit on your website. You can use it as a simple Google Chrome extension or together with Chrome DevTools (this is a collection of web developer tools, directly in Chrome).

Reference: https://developers.google.com/web/tools/lighthouse#:~:text=Lighthouse%20bookmark_border&text=Lighthouse%20is%20an%20open%2Dsource,web%20apps%2C%20SEO%20and%20more

2) WEB PAGE TEST:

WebPageTest.org is an open-source website performance testing tool that allows you to benchmark your website from one of their 40 locations and a wide range of devices. You can also choose to simulate your tests over a slow mobile network or a fast 4G network. The result will be graded from F to A and will include information on compression, time to first byte (TTFB), caching, waterfall charts for the resources load speed and more.

It also features an option where it can run a test 3 times and display all three data sets. This helps figure out if the DNS or CDN might cause any delay and if the server can respond to all requests.

It’s a great tool to get results on how your website is performing. It gives a detailed report and insights on several metrics and provides waterfall graph. We can monitor for trends and spikes. The waterfall chart gives insight into how assets and XHR calls are loading. Once we get the report, we can prioritize the impact and work towards addressing any issues.

URL: webpagetest.org

3) GTmetrix

GTmetrix allows you to get detailed information on your page speed, timings, performance score, and much more. GTmetrix also provides information about how to fix the issues that were exposed by the test.

Without registering you can only run a test from one location Vancouver, Canada but after you sign up for a free account you’ll get to choose your location, different browsers, and even the connection type. This should paint a better picture of how your website works in different scenarios.

There are several other open source and paid tools that can be used to measure performance. Here is a link that provides details of those - https://sematext.com/blog/website-performance-speed-test-tools/#toc-3-google-pagespeed-insights-8

TRICKS TO IMPROVE THE FRONT-END PERFORMANCE:

This blog reveals front-end performance optimization tips that will definitely be useful to drastically improve front-end performance and enhance website speed to make sure the users won’t cut short their visit.

1) Minification Minification removes unnecessary characters from a file to reduce its size, thereby improving load times. When a file is minified, comments and unnecessary white space characters (space, newline, and tab) are removed. This improves response time since the size of the download is reduced.

2) Image Optimization Images take up approximately 51% of the average web page size which can make websites heavy and slow. To reduce the image delivery time and boost the performance of a website, we recommend using responsive images. Responsive image techniques namely srcset, sizes, and elements allow the delivery of different scaled images based on the size and resolution of the accessing device. Check waterfall and identify ‘heavy’ assets taking the longest to load. Optimize the assets by compressing images and use of “srcset” attribute. WebP formatted images are approximately up to 30% smaller than JPEG and 25% smaller than PNG formatted images. Simply put, just converting the image into WebP format can significantly decrease the size of the web page. Just bear in mind that WebP format is not supported by Safari and iOS Safari.

3) Reduce number of requests Latency has a substantial impact on mobile application performance. Reducing the number of unique objects on the page will help reduce sensitivity to latency. Waterfall of network requests shows various requests. Create sprite images that has images and use of SVG for vector assets.

4) Limit blocking requests Browser is waiting for requests before initially rendering (blocking requests). JavaScript/CSS assets look to be the main offenders. Make use of “defer” or “async”. Use of media queries in CSS. When loading a page, during HTML parse, if the browser comes across an external script, like this …

<script src="third-party-script.js"></script>

… the browser fetches the script asynchronously and then pauses rendering so it can be executed. This is bad because it slows the critical rendering path, which will result in a worse first contentful paint metric.

The solution is to use the defer attribute, like below:

<script src="third-party-script.js" defer></script>

This instructs the browser to download the script as soon as it’s found, but it defers execution until after the HTML parsing is complete. This sidesteps the problem of delaying the critical rendering path and is the recommended way to load 3rd party scripts that manipulate the DOM.

5) Increase the speed with caching Caching stores a copy of the asset that a user has requested and later accesses the cached copy instead of the original copy. There are different types of caching that help to improve delivery speed: Browser cache. Files are stored in the browser local cache so when one wants to access them, there is no need to download them from a server. Cache server. Cache servers are located in different geographic regions so that the user’s requests don’t have to travel far. Memory cache. Memory cache helps to speed up the data delivery process within an application by storing certain parts of data in SRAM. Disc cache. Like a memory cache, disc cache stores data for it to be accessed faster within an application though it makes use of conventional RAM.

6) Use a content delivery network (CDN) The proximity of the mobile carrier's Internet gateway to web servers can impact response times. Using a CDN brings content to servers that are closer to the user, reducing latency and improving performance.

7) Remove unused CSS and JS While loading or running a page, the coverage table in Google Chrome shows how much code was loaded and how much of it was actually used. The size of the pages can be reduced by only shipping the needed code. The process is the following: first, you load a page on Google Chrome, then use a coverage tool (in Dev Tools press Ctrl+Shift+P, type “Coverage”, press Drawer: Coverage). As soon as the page is reloaded, you can see how much unused code is there so you can find those modules and lazy load with import (). Then go to the coverage profile once again and confirm that it carries less code on initial load.

8) Lazy loading Usually, when you load a web page, the browser requests all of its images regardless of whether they’re in the viewport or further down the page and out of sight. Lazy loading allows us to only load the images which are visible and asynchronously load the rest on-demand as the user scrolls. This reduces the number of requests on load and can speed up the process considerably. Trigger events/animation only once you scroll & lazy load the images.

9) Reduce the number of DOM elements complex page means more bytes to download, and it also means slower DOM access in JavaScript. Httparchive.org reports an average of 1,300 DOM elements per page. Reduce the number of DOM elements on the page to improve performance.

10) Avoid empty SRC or HREF You may expect a browser to do nothing when it encounters an empty image SRC tag. However, this isn't the case in most browsers. Safari will make a request to the actual page itself. This behavior could corrupt user data, waste server computing cycles generating a page that will never be viewed, and in the worst case, cripple your servers by sending a large amount of unexpected traffic.

References: 1) https://buttercms.com/blog/front-end-performance-optimization-techniques

2) https://medium.com/@inverita/frontend-optimization-8-tips-to-improve-web-performance-29af4b00efe7

3) https://techbeacon.com/app-dev-testing/23-front-end-performance-rules-web-applications

FINAL THOUGHTS:

Hopefully, you now know a little more about why optimizing front-end web performance is important and how to accomplish it. Now you can make this a part of your standard workflow and see the considerable benefits for yourself. As you can probably there are a lot of options to choose from, each with its unique feature and it’s up to you to test them and figure out which one works best for you. And like Yoda once said to Luke:

Lastly, there are also a whole list of other things you can do to improve performance that are specific to the framework you’re using (Ex: React, Angular, VUE). The list mentioned in the article is not an all-inclusive list.