DEV Community: Pavan Chindukuri

Best and Must - 3 Practices For Optimizing Your Website

Pavan Chindukuri — Sun, 25 Apr 2021 13:53:09 +0000

Introduction

The speed of the website will directly depend on how longer the user is going to spend time on the website. So, For an E-Commerce website it directly increases revenue. Believe me or not, Speed of the website also builds trust no one wants to spend their time and money in straggling website.

There are and may be many ways to it but here we are going for the Best and Must ways.

1.Use Content Delivery Network (CDN)

A content distribution network is a set of web servers spread around different geographical areas, that deliver web content to end-users based on their location. Yeah this the formal definition, but in short as your website is hosted on CDN they will be delivered very fast.
If you ever used Gatsby.JS you might have known about static sites, when these static sites combined with CDN = 🔥 Super Fast Website. Many such websites or web apps feel like native apps.

Top 3 CDN's -

Cloudfare
Fastly
CloudFront

2.Optimize Images

All enjoy visually appealing images. As you know photos play a critical role in the popularity of E-commerce pages. So, using the required dimensions of the image is highly necessary.
On Page load you can use set of images to render on different screen sizes.
Read More About Responsive Images

3.Reduce the Number of Packages/Plugins

Plugins are essential components of every website. They have third-party-suggested features. So, The more plugins more code to run which eventually decreases the performance of the site and they need to be updated making sure site still works without breaking it. If not updated website may be vulnerable for attacks.

Conclusion

That is it for this blog, make sure your next website follows these Best and Must Rules.

peace ✌

Embedding Code Editor In Your React App

Pavan Chindukuri — Fri, 23 Apr 2021 15:32:17 +0000

Welcome

Ever wanted to insert a beautiful code editor in your react app? Answer is probably yes. So, let's get started.

Step 1 - Installing dependencies

npm i react-ace
or if you are using yarn
yarn add react-ace

Step 2 - Creating a Component

Now, we should create a react component that renders the code editor. Here, I am going to use Functional Components (recommended)



import AceEditor from 'react-ace'

function App() {
    return <AceEditor />
}

export default App

And there you get a basic editor

Step 3 - Styling And Configuring it.

For now I am assuming you need this editor for editing JavaScript code.



import {useState} from 'react'
import AceEditor from 'react-ace'

// import mode-<language> , this imports the style and colors for the selected language.
import 'ace-builds/src-noconflict/mode-javascript'
// there are many themes to import, I liked monokai.
import 'ace-builds/src-noconflict/theme-monokai'
// this is an optional import just improved the interaction.
import 'ace-builds/src-noconflict/ext-language_tools'
import 'ace-builds/src-noconflict/ext-beautify'

function App() {
    const [code, setCode] = useState(`function hello() {
  console.log("Hello World!");
}`)

    return (
        <AceEditor
            style={{
                height: '100vh',
                width: '100%',
            }}
            placeholder='Start Coding'
            mode='javascript'
            theme='monokai'
            name='basic-code-editor'
            onChange={currentCode => setCode(currentCode)}
            fontSize={18}
            showPrintMargin={true}
            showGutter={true}
            highlightActiveLine={true}
            value={code}
            setOptions={{
                enableBasicAutocompletion: true,
                enableLiveAutocompletion: true,
                enableSnippets: true,
                showLineNumbers: true,
                tabSize: 4,
            }}
        />
    )
}

export default App

You can explore further here -> React Ace Docs

Conclusion

This is a basic setup, for further modifications you can check the above provided link, you can generate the code interactively here

Peace ✌

Getting started with Jest in just 5 minutes

Pavan Chindukuri — Mon, 19 Apr 2021 13:00:40 +0000

Testing with Jest, this may sound overwhelming but in fact getting started is very simple.

To get started let us test a simple function

const celsiusToFahrenheit = (temp) => {
    return (temp * 1.8) + 32
}

Here we declared a function named celsiusToFahrenheit which takes in a parameter temp which is temperature and is of type number. It returns the Fahrenheit value of celsius temp.

Now let us test this!

Yeah, this our first test
First npm i -D jest here -D parameter to add it to dev dependency.
Next create a file name called anything.test.js, anything I mean literally anything.

test('Should convert 0 C to 32 F', () => {
    const temp = celsiusToFahrenheit(0)
    if(temp!==32) throw new Error("This Test Failed")
})

Just paste this code and Voila! first test is done, Now let's dive into the code test() is a function that is made available globally by jest library when we installed. It takes two parameters, first one being simple the name of the test and second one being the testing function itself.
The testing function when finds an error then shows the output as failed this means a function with nothing inside still shows as a passed test

test('Dummy', () => {})

The above test still passes.
But wait, what if there are many conditions to check or some asynchronous code?
Jest got our back

test('Should convert 0 C to 32 F', () => {
    const temp = celsiusToFahrenheit(0)
    expect(temp).toBe(32)
})

Yes, expect is also a function provided in-built with jest package, now what that line means is - expect the temp variable to be a number 32 if not throw an error.
Now in terminal root project folder just run jest and see the passing test.

That's all and by the way this is my first blog post