DEV Community: Garv Nanwani

Introduction To Testing In React

Garv Nanwani — Wed, 07 Oct 2020 17:23:02 +0000

Consider a situation, You build out an entire application, and now you want to release it on the web so that other people can use it. But you are scared that your application may fail in some conditions, and your users may start complaining.

Some Bugs may reproduce, or some end cases may cause your application to fail. It might not affect you as a beginner, but in large-scale production applications, you can't only take the risk of your app failing when it goes live.
So how do you make sure this never happens to you...
The answer is Testing.

So what exactly is testing?

Testing is a line-by-line review of how your code is going to execute. You write some piece of code that executes the script you have written for your app and makes sure the results match the desired output in ideal condition.
Testing comes in handy when you make some updates to your code or when you contribute to open source, for example. After updating a piece of code, you can run a test to ensure that the update does not break functionality already in the application.
In specific, you test for end cases or boundary conditions that may or may not occur when a real-world user it.
How your application behaves when the user enters some invalid data; Or is there any security issue and things like that.
You can say that testing is an integral part of any development process. You just can't ignore it.

I know it can be tedious sometimes to write a piece of code that checks whether your previous written code works appropriately or not, but I guarantee once you get the hold of it, you will love the concept of testing.

Testing helps you:

Save the time of manually checking each part of the application. Just write some piece of code and automate the process.
Make sure a bug doesn't reproduce itself. Whenever you fix a bug, you can write some test cases so that it never repeats itself.
Improve the flexibility of your code and makes it more maintainable otherwise, you would manually have to find the survey the whole code-base just to fix a small bug

And a lot more...

Lets quickly go over the types of testing:

1. Unit tests

Unit testing refers to testing individual pieces of your code or, as the name suggests, unit parts of your code to make sure the pieces fit together perfectly.
Talking specifically about React, unit tests typically do not require a browser. You test the rendering output. Like what happens when a state changs or a given set of input changes, and do the changes affect the DOM or not.

2. Functional testing

Functional testing is more focused on testing the behavior of our component.
For example, whether or not the component renders properly or not as an individual, the onClick function on a component works fine or not, or the Navbar shows the name of the logged-in person correctly.

Functional tests usually run in isolation (i.e., testing the component functionality without the rest of the application).

3. Integration testing

Integration testing tests the entire service of our application and attempts to replicate the experience an end-user would experience when using our application.
Integration testing is generally slower than the unit and functional testing, as it is quite hard to match a user experience.

There are many other terminologies that you may encounter like a smoke test and shallow rendering but let's keep things simple for this.

Introduction to Jest and Enzyme

Jest is a node-based test runner used for fast parallel running of tests in a node environment. It is one of the most used frameworks for testing purposes.
Jest focuses a lot on simplicity. It can be installed with npm or Yarn. It works excellent for React as well as other applications.

After installing it, What you do is you write some tests and then run the command npm test in a terminal window within your app directory. It will initialize Jest and start testing in watch mode, which will then automatically run tests whenever you make changes to associated files.

Enzyme is a library that is used to test React applications. It's designed to test components, and it makes it possible to write assertions that simulate actions that confirm whether the UI is working correctly.
Jest and Enzyme complement each other so well, so in this article, we will be using both.

There are other testing frameworks also such as Mocha, which you can give a try.
But for the moment, let's get started with setting up Jest.

Setting up jest

If you use Create React App for setting up any new react app, then you don't need to install it because it comes with Jest preinstalled.
If you want to install Jest manually, just type

npm install --save-dev jest

in the terminal. And in the package.json file, set up the command for running tests.

...
scripts: {
 "test": "jest",
 ...
}

Writing your first test with Jest

Okay, now, all you need to do is create a file where you will write the tests.
But how does Jest know what is a test file?
There are generally two ways you tell Jest that this is a test file.

If any files in your directory have the name test, it's considered a test.
If your file has suffix .spec.js or .test.js, it is marked as a test file.

So, Jest scans through your directory looking for such files and runs the code inside them that's your tests.

Let's see some code in action,

Make a file called Home.test.js and all the following code to it

describe('Our first test', () => {

  it('Multiplies numbers', () => {
      expect(5 * 10).toEqual(50);
      expect(20 * 50).toEqual(1000);
   });

Let's understand this piece of code.

describe() is used to wrap up tests that are of a similar type, and you can describe what you are testing for or what this is the purpose of these groups of tests.
it() is used to define a single test. It describes what you are trying to achieve with that particular test or what the function does. You can also use the test() method in place of it.
expect() and .toEqual() is where we actually perform the test. We put the function inside expect(), which gets the actual result of the function, and the expected result goes in toEqual(). If both match, the tests pass, or else they fail.

Run the following piece of code with node test command. You will notice a beautiful table like the layout on the console, which gives you a lot of information related to the tests. For example: whether it passed or failed, failed at which line, the amount of time it took, and many other things as well.

For now, let's focus on PASS and FAIL. The above code is no doubt correct. but what if we pass something like this,

describe('Our second test', () => {

  it('Multiplies numbers', () => {
      expect(5 * 10).toEqual(25);
   });

This will result in a failed test, and you will see the word FAIL flashing in the console.

Hurray, You wrote your first test.

Of course, real-world tests won't be this simple, but this will surely give you a general overview of what testing actually looks like and a brief introduction of Jest as well.

Jest is a very friendly framework. It tells you exactly where your tests failed and gave you inner insights as well.

Now, you can play around with Jest and start testing your javascript code.

If you want to try testing out React Component, then there is this Enzyme framework, making testing react components a lot easier.

Testing React Components using Enzyme

Enzyme doesn't come preinstalled with create-react-app, so you will have to install it using the command manually.

npm install --save-dev enzyme enzyme-adapter-react-16 react-test-renderer
//or with yarn
yarn add --dev enzyme enzyme-adapter-react-16 react-test-renderer

Note- Installation of enzyme depends on the version of React you are using, here we will be using react-16

To use Enzyme, we have to configure the package that we just installed to use react, so make a file named setupTests.js in the src folder and add the following code.
It uses the adapter we just installed with the enzyme package.

// src/setupTests.js
import { configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';

configure({ adapter: new Adapter() });

We can now use Enzyme for our tests.

Create a file with the name of the component you want to test and add .test.js after it.
Please write down the following code in it.

// MyComponent.test.js
import React from 'react';
import { shallow } from 'enzyme';
import MyComponent from './MyComponent';

describe("MyComponent Render Test", () => {
  it("should render my component properly", () => {
    const wrapper = shallow(<MyComponent />);
  });
})

Once again, describe is used to describe the purpose of a group of tests, and the it() function specifies what a particular test is defined for.

The shallow() assertion method is a part of enzyme, shallow() is used to test the component it is provided, whether it renders properly or not. One thing to note here is that it ignores any child components that may be present in the component, so it is a type of unit test which tests a particular piece of code.
If you want to test out the children as well, use the mount() function instead, which performs an integration test on the entire component and its children.

This is the simplest example of testing a component using enzyme. The journey doesn't end here. You will probably need to know much other stuff before you start writing tests for real-world applications, but that was a good start.

If you want to learn more about testing and, in particular, testing in react, then do check out the documentation of Jest and React. You will find a lot of useful stuff there.

Making An Awesome Developer Portfolio

Garv Nanwani — Mon, 21 Sep 2020 10:36:41 +0000

Recently, I posted about my portfolio on twitter and got a fantastic response to that.

Just completed my portfolio website, made it just with Html and CSS. Give it a look.
Any suggestions are welcome 🤗🤭https://t.co/cuCbRJcNo3 #100DaysOfCode #DEVCommunity #CodeNewbie #programming #javascript pic.twitter.com/j03iTm2RBz
— Garv Nanwani (@thisisgarv) September 17, 2020

I received many messages from you guys asking how to build a portfolio and what things to focus on.

So I decided to write an article giving some of my best tips on building a developer portfolio for yourself.

First of all, why you should have a developer portfolio?

The two main things that can help you get that job are the necessary skills, projects, and a place to showcase them.
That's where you need a killer portfolio.

A portfolio not only shows your works or what you know, but it represents your journey. You can have a great twitter profile or a good number of GitHub repositories. Still, when an employer needs to see your work collected in a single place, he won't go through your entire profile, spending hours studying you and finding your best repositories to get to know you. Having a developer portfolio gives him an excellent little summary of your journey, and he can judge that.

Enough talk, now lets jump straight to the things you should and should not do to make your portfolio stand out:

1) Have a primary focus

First, Clear why you want to make a developer portfolio.
It can be to get a job or to show off your skills.
Depending on your focus, try to write the things that are relevant to the job needs or the things you want people to know about you.

Don't add everything you have tried in your life; for example, just add MERN stack to get a MERN job. Don't be like I have done some angular, some Vue, and all that. Be specific and confident in the things you mention.

2) A Clean UI

The design and overall look of your site are the first things that anyone sees in your portfolio. It may seem obvious at first, but most people don't take their portfolio seriously. They think a portfolio is just a place to show your skills, but no, your portfolio itself is your biggest work.

So, do spend some time planning out what to include in your portfolio and what to not; the color scheme, layout, responsiveness, everything combined lead to an outstanding developer portfolio.

3) Put a smiling photo of yours in the portfolio

Your portfolio should have a photo of yours, no matter what. It's one of the essential tips and has a massive impact on the person seeing your portfolio. It should be a smiling photo of you, no matter how you look.

Don't try to put a smiling photo working on a laptop or something like your side profile. Try to be real. A genuine smile makes a difference, be proud of you and your smile. It will help you build trust, and people will feel comfortable connecting with you.

4) Your portfolio should tell a story

What every human being understands are emotions and stories. When your portfolio conveys your story, people will be able to see your struggle and will appreciate your work. It can be a timeline or the journey behind the projects you made, the problems you faced, what you learned, etc.

Now, Don't write long essays that people find hard to read. Mention everything in points, and bring attention to the crucial parts.

5) Put high-quality projects on your portfolio

Let them be two or three only, but they should represent your experience. Three high-quality projects are enough to get you that edge from others, don't just put a picture and link. Add a story to that like tell:

how you felt before going to that project
what you learned out of it
what was its benefit, your skill level before and after
what problems you faced
What steps did you take to get to that point
screenshot of some code sample in that project that you liked
how that part of code made you learn something new
how you made that better Again, be real and tell your journey through it.

6) Creativity shines through boundaries

Do not be creative, and by that, I mean to have something different, but don't overdo things or try to act cool.
Research portfolios of top developers and learn from them. Learn how they mention so many things in such a lovely little short format and get impressed by their simplicity.
Don't get too many animations or other hi-fi stuff on the site. Not only will they decrease the website's performance, but most people find these too fancy, and it gets irritating sometimes.

7) Lastly, be yourself

By that, I mean, don't try to act smart or put some cheesing lines. Just use your own words. Your language will help you connect better. Don't use cursing or BS words ;). Please keep it clean, keep it relevant, and there you go. Remember, nobody can write your story better than you.

Some extra tips

Don't put a form on your website. Nobody fills it. Just place an email icon and make it big enough for people to see and reach you.
Avoid using percentage bars in your skills section. Just write proficient in and comfortable with, and that's it. Percentages can be relative, and you really can't judge how good you are unless you have real-world experience.
Have a well-maintained Linkedin and twitter profile and keep all the social links updated on the website so that people find it easy to reach out to you.

If you want to check out my portfolio, here's a link to that-
My Portfolio Garv Nanwani

It's still a work in progress, but I will be happy to know your thoughts and suggestions.

daily.dev delivers the best programming news every new tab. We will rank hundreds of qualified sources for you so that you can hack the future.

Submission for the actions hackathon

Garv Nanwani — Thu, 17 Sep 2020 07:17:22 +0000

This is the post for the submission of my action for the actionshackathon on DEV.

My Workflow

The GitHub Actions for pushing to GitHub repository local changes authorizing using GitHub token.

Submission Category:

I am submitting my action under the Wacky Wildcards category.

Yaml File or Link to Code

Repository link

Additional Resources / Info

8 Tips for Optimizing Your Website’s Speed

Garv Nanwani — Tue, 15 Sep 2020 10:05:46 +0000

Have you ever considered the performance of your website, how fast your content loads, and what is the response time of your page?

All these things should be your priority whenever building any product for real-world users.

Even a one to two seconds delay on your website can drastically affect the user experience and your site traffic.
Consider any big company such as Amazon or Uber, just a 1-second delay on their website can make them lose hundreds and thousands of customers, a considerable number I know. Now try to apply the same for your website or app.

Just by taking care of few things and following some best practices, you can make your site a lot faster, and you will see a massive improvement in your product performance.

So, now let's see what those small details that you can focus on to increase the performance of your website are.

1. Optimize your media files size and format

We all put images and media files in our page to make it more appealing, but the images and gif files that you put on your site have to be downloaded by the browser to show to your users, so if you put large-sized images on your site, it will surely make your website slow.

So it is recommended to use some external picture tools to resize your image and also decrease their size without degrading the quality of your files. For the optimized loading time of your page, it is best to stick to some standard file formats such as jpg, png for images.

And also, don't try to use images for showing some text stuff; prefer to use text instead because the image will increase unnecessary loading time and won't even help in SEO.

These tools can help you achieve this:

2. Avoid using inline JS and CSS files

It is an excellent practice to write the JS and CSS code for your website in external files. Not only the external files are easier to maintain, but they are also cached by the browsers to save time on further loads.

If you define everything in a separate CSS and JS file, the browser will find it easier to apply the styles and functionality to your page.

3. Write Cleaner HTML

Most of the time, what we do is add unnecessary HTML on our page and fill it with different types of headings, strong and italics tags when we can quickly achieve the same effect with CSS. So rather than putting a lot of code on your HTML file, try to keep it simpler and use CSS alternatives, which will make your page cleaner and more comfortable to load. But it comes on a cost that some old browsers may not support some CSS properties, so make sure you take care of all browsers while writing CSS.

4. Load JavaScript files asynchronously or at the end of the page

It's always a good practice to put your script tags just before the body tag closes so that your javascript files load after the whole content part of your webpage is loaded. Or, if you want to put these above the body, then make sure to put defer attribute inside the script tag to make sure the file loads after everything is done loading. It allows the browser to render everything before getting started with JS.

Also, you can use asynchronous javascript so that it loads parallelly with the content and doesn't disturb the flow of the website. Ajax can help you achieve that so that instead of reloading an entire page when a user acts, we can update parts of that page. You can also put an async attribute on your script tags to load the file asynchronously.

5. Utilizing the Browser Caching Feature

A lot of files on your website don't often change with time,
Web caching is when files are cached by the web browser for later use so that when a user revisits your site, the browser doesn't have to load everything from scratch. Things that browsers can cache include CSS files, JavaScript files, and images.

So, make sure you make a website that takes maximum benefit of the caching feature, the local storage, cookies, and server cache.

This highly reduces the server response time, and a user can visit your website again and again, and the user experience gets better every time.

If you want to learn more about how to leverage browser caching, then check out these articles.

6. Minify and Combine your files

All the files that you put on your page have to be downloaded by the browser to render, so by reducing the number of files, and you automatically make the rendering faster. Take into consideration the number of Html, CSS, and JavaScript files on your page. They all add to the number of requests your site makes every time a user visits your page.

You can reduce this number by "minifying" and combining your files. Minifying the files reduces the size of each file, and combining the files reduces the number of files.

Minifying a file involves removing unnecessary formatting, whitespace, and code. There are a lot of online tools that can help you achieve the result. Every unnecessary piece of code adds to the size of your page, so it's essential to use minified files to load your page. This ensures that your pages are as clean as possible.

If your site uses multiple CSS and JavaScript files, you can combine them into one and achieve the same result.

Check out these fantastic tools if you want to optimize your files:

I highly recommend using Gulp for minimization and optimization of your files, so do check it out.
YUI compressor
UglifyJS
cssnano

7. Using the right hosting option and service for your product

When you are doing projects for yourself or demo purposes, it's good to go for free hosting options rather than paying for a domain name and hosting services. Still, once you start making apps for the real world that attracts a significant amount of traffic, it's better to move to a good paid hosting service rather than choosing the cheapest option. Read for reviews of different platforms and choose what suits your needs best.

Some popular hosting services are:

Bluehost
HostGator Cloud
DreamHost
GoDaddy Hosting
SiteGround

8. Use an online tool like Lighthouse

Once your website is complete, you can go and use any page speed analytics tool available online. If you are using chrome, then there is a lighthouse tool present in chrome dev tools, it gives you analytics about your webpage performance and also provides you some tips with which you can increase your page's performance, so give it a try.

And that's it. These were some best practices that, if you start using your webpage, will perform a lot better.

Daily delivers the best programming news every new tab. We will rank hundreds of qualified sources for you so that you can hack the future.

Semantic HTML And Why Does it Matter

Garv Nanwani — Thu, 03 Sep 2020 15:11:26 +0000

Do you use a div tag for enclosing every significant section of your webpage and are tired of maintaining the whole codebase afterward, then I highly suggest you to start using Semantic HTML in your code.

So, What is Semantic HTML

Semantic HTML is a way of writing HTML code that's readable, that gives meaning to the webpage rather than just the presentation part.

It does not affect the way your web page will look, but it certainly will make your code more accessible, making it easier to read for the humans as well as for the machines.

For example, A <p> tag states that it is a paragraph, so you can guess the content is gonna be a paragraph for sure.

But on the other side, a <div> tag it can be a navbar, footer, or a hero section. You can't guess this just by looking at it, and that's where the concept of semantic tags comes into place.

You write tags that convey something, such as

<strong>
<em>
<nav>
<header>
<section>

And a lot more...

But what's the impact of this?

You might have a question that when there is no major effect on the way my page will look to the audience, then why have an extra headache of caring about the tags I use?
Yeah, it won't matter much for a part of your audience, but for people using a screen reader or for someone going through your code and even for the web crawlers, it matters.

Benefits of using semantic tags

Increases the readability and accessibility of your code
Helps you rank higher in search engine results
Easier to maintain in a large codebase

How do you shift to writing Semantic HTML

There are some basic semantic tags that you should start using from now onwards every time you build a new website replacing the old way of enclosing everything inside a div or span.

For example, instead of writing a navbar like this:

<div class="nav"> ...... </div>

Prefer to use this whenever possible

<nav> ..... < /nav>

Seeing at it anyone can tell this is the nav section of the page and similarily you can use other semantic tags like to breaking the code into different parts that will be easier to manage -

<header> .... </header> will contain the header part of your page
<footer> .... </footer> the footer of your page
You can use a <section> tag to break the content of your page into various sections
The <article> tag whenever you need to write an article or a long paragraph
The <aside> tag for the additional information alongside the content or as a sidebar
The <figure> for wrapping your image content, and <figcaption> to write a caption for that image.

Now let's talk about some lesser-known HTML tags that may be helpful to you in various scenarios -

<pre> - pre stands for preformatted text. Sometimes you want to have spaces or line breaks in between your text, which you cant achieve simply using a paragraph tag, so the text inside a pre element preserves both spaces and line breaks and will be displayed exactly as written in the HTML source code.
<picture> - This tag is used when you want to have different images for different media queries; it's most commonly used for responsive designs. Instead of having one image that is scaled up or down based on the viewport, multiple images can be put up to fit the browser viewport.
<details> & <Summary> - Used to Show/hide content under a collapsible heading without having to use JS. The details tag allows you to put additional details that the user can open and close on demand.
And the summary tag is used with the details to specify a visible heading for the details.

For e.g
<details open> <summary>Heading</summary> <p>The content will go here…</p> </details>

<datalist> & <option>- Used to specify a list of predefined options for an input element.So it is used to provide an autocomplete feature to input elements.

For e.g.
<datalist> <option value="Option 1"> <option value="Option 2"> <option value="Option 3"> <datalist>

<dialog> - Used to display a popup or modal window This element makes it easy to create popup dialogs and modals on any web page.

For e.g.
<dialog open> <p>Content goes here...</p> </dialog>

<cite> and <q> - the <q> tag is used to specify a quote, and the cite tag defines the title of the work. Often we have to quote something, and simply wrapping the quote inside " " won't give it meaning, so it's best to put the quote inside a <q>tag and the title inside the cite tag.
<time> - The time tag is used to define a specific time or date.
Dates and times are formatted differently across the world, and so it becomes difficult to parse through a search engine or email client. So, by enclosing the time information on your page inside a time tag, you make the code machine-readable.

You see how the use of div's and spans is highly reduced, and the code is now much cleaner. That's the power of semantic HTML.

Writing HTML is easy, but the way you structure your code matters much more than the content, in a way that it's more accessible to everyone and maintainable when the size of the codebase increases on your page. So, Semantic HTML isn't just an option, but it's a necessity, and more people should start considering this when building any web project.

daily.dev delivers the best programming news every new tab. We will rank hundreds of qualified sources for you so that you can hack the future.

What is a PWA and why you should know about it

Garv Nanwani — Tue, 18 Aug 2020 10:33:27 +0000

Have you ever wondered how you can convert your webpage to an app that can run on a mobile phone no matter its Android or iOS?

Or have you seen that little + (plus) icon at the top of a website, and it makes you wonder how this website is installable? Well, PWA is the answer to your questions.

What is PWA?

PWA's or Progressive Web Apps are a hybrid or say a mix of your regular websites or web pages and a mobile application; they provide you the power of both worlds. And PWA's are getting quite popular these days a significant reason being you don't need to learn another language like Kotlin or flutter to build a mobile app for your product, you can convert your existing website into a mobile application. You can even submit to Google Play and App store.
Of course, you can't compete with a language specifically designed for mobile apps, but still, PWA's come in handy a lot of time, you don't have to code separately for android, ios and browsers.
PWA's have access to all native app features like local storage, cache, push notifications, offline access, and a lot of cool features, so if all this gets you excited, let's dive deeper into it.

Benefits of PWA

Cross Platform Support

PWA is browser build and not os build so it can run on any machine, whether it is Android, ios, or your laptop.

Speed

PWA is quite faster compared to your standard websites because of the use of service workers, which helps to store the contents of the website in the form of cache on the first time load, making all your further loads significantly faster.

Offline Mode

That's the biggest feature standard websites lack, but through the use of service workers, you can load an offline version of your app, or you can cache the data for the first time and provide it for the later loads giving a better user experience.

SEO Friendly

In simple words, SEO is a way to make your websites get ranked higher in the search page results, e.g., Google. So, because PWA is technically a website, its content can get indexed and are discoverable on search engines, and because of this, your app can reach a broader audience.

Low cost of development

You don't need to hire a web developer and an app developer separately for your project, and you can convert your existing website to a PWA in no time.

And a lot of others.

Yes, there are quite a few disadvantages of using a PWA like the browser compatibility issues and the inability to control all features of mobile phones fully, but still, its plus points kind of pay off for all its costs.

Okay, So enough talk now, let's see what the things that make up a PWA are.

A manifest.json file: This is a JSON file which contains all the information about how your app will look, which initial page to load when your app starts, all the icons which the app should use and it also tells the browser that it's a PWA and how it should behave after being installed.
A service worker: A service worker is just a javascript file that runs as soon as your app loads and keeps running in the background. It helps you to control all the network requests, push notifications, cache items, etc.. In short, this script takes care of all the functionality part of your app and thus is the core of any PWA.
A secure HTTPS connection: As, by now, you must have realized PWA's are highly robust, so they only work on trusted connections, to make sure there is no harm to user's data and overall security, and in general to user experience.

That's it, add these three features to your code, make sure to connect the manifest and service worker file to your HTML. You are good to go. Most browsers detect that your app is a PWA and they give an option of installing it to the home screen when a user visits your site, else you can generate a .apk file for it and publish it to the well known PWA Store or the App Store.

PWA is a vast topic in itself. There's a lot more to it, but for getting started, these three things are essential, and rest your curiosity will figure it out by itself.

daily.dev delivers the best programming news every new tab. We will rank hundreds of qualified sources for you so that you can hack the future.

Getting Started With Responsive Web Design

Garv Nanwani — Sat, 08 Aug 2020 09:03:29 +0000

Whenever you create any website, you often see the desktop version of it, but what if someone sees it on a smaller screen size like a mobile phone or a tablet, in that case, the design and look of your website can drastically change.

The main idea behind Responsive Web Design is to make a website that can adapt to any device that is being used to display it. Not only on larger screen sizes but also mobile phones and tablets.

Most of the users that will visit your website will be using a mobile phone just quickly to go through it, so it becomes necessary for you to make sure your website looks fine in either case otherwise what will happen is your navbar will be going somewhere else, and your main section somewhere else, and at the end the user experience decreases drastically.

So, here are somethings that you should keep in mind while making any website so that it looks good no matter what the screen size is -

One and the most important thing, to begin with, is websites are responsive by default, it's you who makes them unresponsive. For example, you created a div added some text to it, no matter what the screen size is, it will automatically adapt to it. But the moment you add a definite width or height to it, it becomes restricted and thus looks good on some screens and ugly on others, and then what you do is apply a lot of breakpoints and make the code even messier, same goes with images and every other thing.

So now let's get started with what the things you should keep in mind while creating a responsive website -

1) Viewport

Viewport is the region within the browser that displays the webpage, the viewport changes with the change in screen-size.
If you don't apply the viewport meta tag or any other property, the mobile browsers will render the page at a desktop screen width, and then what will happen is the user will have to zoom in, zoom out to get a perfect fit and the site dimensions will vary from user to user, giving a bad user experience.

What you can do is apply this meta tag in your head tag,

<meta name="viewport" content="width=device-width, initial-scale=1">

Using this meta viewport tag will make the width=device-width to match the screen's width. This will make sure your content renders properly no matter its a mobile phone or a laptop.

2) The layout and flow

Now there are quite a few layout designs in CSS, and understanding the flow of your website and using the best-suited layout for it matters, you can go for a flexbox or a grid layout. Prefers not to use float as it can cause some side effects and then you have to clear and all that, but yeah choose the best layout for your site and design the website such that the elements can stack one after another on smaller screen sizes and you can get smooth user experience.

3) Relative Units

This is an essential aspect of responsive web design, the problem with units like pixels is that it is definite, doesn't matter you view it on a mobile or a laptop, the size will remain the same and its a negative point because 700 px width may be small for a laptop. Still, it won't fit on a mobile phone ever, and your content will overflow here and there.

So rather than using values in pixels try to use units like em, rem, vw, vh, % which are relative units and have a tendency to adapt to different screens for eg, vw that is viewport width is relative to viewport width of the screen that the website is being viewed on, so its a good practice to use units like these, but make sure you understand the basics of how these units work and where to use which, otherwise it can cause issues.

4) Breakpoints

Now, breakpoints are useful in most of the scenarios, but make sure you are using them when required and not unnecessarily using them here and there.

What you can do is define few media queries, and initially start with bigger breakdowns, open the chrome dev tools go to the device menu and there you can check the responsiveness of your website at a given width and height of the viewport, try to play around with it and find areas where your site is losing responsiveness and mark the breakpoints and apply this method till you get that perfect look on all screen sizes.

5) Mobile First or Desktop First

There is a great debate that goes on as to whether to use the mobile-first approach or the desktop first approach while building any website. I believe most of the people coming on your website will be going through your website in mobile so it's better to stick to a mobile-first approach website so that you get the perfect looking website on a mobile and then you can easily set the layout for desktop, and a lot of people say mobile-first is a better way of creating websites, but in some use cases the desktop first website may seem good and at last, it varies according to the project needs and your preference, but if responsiveness is your first priority, then the mobile-first approach will give better results.

6) Frameworks

Okay, so what if you are in a hurry, and you cant take all the pain of responsive websites from scratch? You can use a responsive framework like bootstrap, which works on the grid system or Bulma, etc.

You can use the pre-build components in bootstrap and can get started with a nice looking responsive website without any issue. But on a condition that you know how things work under the hood, for beginners, it is not advised to jump directly to frameworks until you have a solid foundation of CSS; otherwise, there is no benefit of using frameworks, and you will struggle with CSS afterward.

Well, that's it, there are a lot more things to responsive web design, but for a beginner level you can get started with these, and as you dive deeper into the concepts, you can learn many such more things ;)

If you liked this article, don't forget to follow me on Twitter, where I share my journey with the world.

My twitter handle - @thisisgarv

daily.dev delivers the best programming news every new tab. We will rank hundreds of qualified sources for you so that you can hack the future.

DEV Community: Garv Nanwani

Introduction To Testing In React

So what exactly is testing?

Testing helps you:

1. Unit tests

2. Functional testing

3. Integration testing

Introduction to Jest and Enzyme

Setting up jest

Writing your first test with Jest

Testing React Components using Enzyme

Further Reading

Making An Awesome Developer Portfolio

First of all, why you should have a developer portfolio?

1) Have a primary focus

2) A Clean UI

3) Put a smiling photo of yours in the portfolio

4) Your portfolio should tell a story

5) Put high-quality projects on your portfolio

6) Creativity shines through boundaries

7) Lastly, be yourself

Some extra tips

Submission for the actions hackathon

My Workflow

Submission Category:

Yaml File or Link to Code

Additional Resources / Info

8 Tips for Optimizing Your Website’s Speed

1. Optimize your media files size and format

2. Avoid using inline JS and CSS files

3. Write Cleaner HTML

4. Load JavaScript files asynchronously or at the end of the page

5. Utilizing the Browser Caching Feature

6. Minify and Combine your files

7. Using the right hosting option and service for your product

8. Use an online tool like Lighthouse

Semantic HTML And Why Does it Matter

So, What is Semantic HTML

But what's the impact of this?

Benefits of using semantic tags

How do you shift to writing Semantic HTML

What is a PWA and why you should know about it

What is PWA?

Benefits of PWA

Cross Platform Support

Speed

Offline Mode

SEO Friendly

Low cost of development

Getting Started With Responsive Web Design

1) Viewport

2) The layout and flow

3) Relative Units

4) Breakpoints

5) Mobile First or Desktop First

6) Frameworks