As you dive deeper into the world of React, it’s important to continually strive for excellence in your code. To assist you in this endeavor, I’d like to share four tips that have been invaluable in helping me write better React code. Whether you’re a seasoned developer or just starting out, I believe you’ll find something of value in these tips. So, let’s dive in and take your React skills to the next level!

1. Return functions from handlers

For those of you who have a background in functional programming, you’ll likely recognize the concept of “currying”. Essentially, it involves setting some parameters for a function ahead of time. By implementing this technique in React, you can streamline your code and make it more efficient. So, let’s delve into the world of currying and see how it can improve your React code.

We have an explicit problem with the boilerplate code below. That technique will help us!

export default function App() {
  const [user, setUser] = useState({
    firstName: "",
    lastName: "",
    address: ""
  });

  // First handler
  const handleFirstNameChange = (e) => {
    setUser((prev) => ({
      ...prev,
      firstName: e.target.value
    }));
  };

  // Second handler!
  const handleLastNameChange = (e) => {
    setUser((prev) => ({
      ...prev,
      lastName: e.target.value
    }));
  };

  // Third handler!!!
  const handleAddressChange = (e) => {
    setUser((prev) => ({
      ...prev,
      address: e.target.value
    }));
  };

  // What if we need one more input? Should we create another handler for it?

  return (
    <>
      <input value={user.fisrtName} onChange={handleFirstNameChange} />
      <input value={user.lastName} onChange={handleLastNameChange} />
      <input value={user.address} onChange={handleAddressChange} />
    </>
  );
}

Solution

export default function App() {
  const [user, setUser] = useState({
    firstName: "",
    lastName: "",
    address: ""
  });

  const handleInputChange = (field) => {
    return (e) => {
      setUser((prev) => ({
        ...prev,
        [field]: e.target.value
      }));
    };
  };

  return (
    <>
      <input value={user.firstName} onChange={handleInputChange("fistName")} />
      <input value={user.lastName} onChange={handleInputChange("lastName")} />
      <input value={user.address} onChange={handleInputChange("address")} />

      {JSON.stringify(user)}
    </>
  );
}

2. Separate responsibilities

Making a “God” component is a common mistake that developers make. It’s called “God” because it contains many lines of code that are hard to understand and maintain. I strongly recommend dividing components into sets of independent sub-modules.

A typical structure for this would be:

• UI module, responsible for visual representation only.
• Model module, containing only business logic. An example of this is a custom hook.
• Lib module, containing all required utilities for the component.

Here’s a small demo example to help illustrate this concept.

export function ListComponent() {
  // Our local state
  const [list, setList] = useState([]);

  // Handler to load data from the server
  const fetchList = async () => {
    try {
      const resp = await fetch("https://www.example.com/list");
      const data = await resp.json();

      setList(data);
    } catch {
      showAlert({ text: "Something went wrong!" });
    }
  };

  // We want to fetch only on mount
  useEffect(() => {
    fetchList();
  }, []);

  // Handler responsible for deleting items
  const handleDeleteItem = (id) => {
    return () => {
      try {
        fetch(`https://www.example.com/list/${id}`, {
          method: "DELETE"
        });
        setList((prev) => prev.filter((x) => x.id !== id));
      } catch {
        showAlert({ text: "Something went wrong!" });
      }
    };
  };

  // Here we just render our data items
  return (
    <div className="list-component">
      {list.map(({ id, name }) => (
        <div key={id} className="list-component__item>">
          {/* We want to trim long name with ellipsis */}
          {name.slice(0, 30) + (name.length > 30 ? "..." : "")}

          <div onClick={handleDeleteItem(id)} className="list-component__icon">
            <DeleteIcon />
          </div>
        </div>
      ))}
    </div>
  );
}

We should start by writing our utils that will be used in the model and UI modules.

export async function getList(onSuccess) {
  try {
    const resp = await fetch("https://www.example.com/list");
    const data = await resp.json();

    onSuccess(data)
  } catch {
    showAlert({ text: "Something went wrong!" });
  }
}

export async function deleteListItem(id, onSuccess) {
  try {
    fetch(`https://www.example.com/list/${id}`, {
      method: "DELETE"
    });
    onSuccess()
  } catch {
    showAlert({ text: "Something went wrong!" });
  }
}

export function trimName(name) {
  return name.slice(0, 30) + (name.lenght > 30 ? '...' : '')
}

Now we need to implement our business logic. It simply will be a custom hook returning things we need.

export function useList() {
  const [list, setList] = useState([]);

  const handleDeleteItem = useCallback((id) => {
    return () => {
      deleteListItem(id, () => {
        setList((prev) => prev.filter((x) => x.id !== id));
      })
    };
  }, []);

  useEffect(() => {
    getList(setList);
  }, []);

  return useMemo(
    () => ({
      list,
      handleDeleteItem
    }),
    [list, handleDeleteItem]
  );
}

The final step is to write our UI module and then combine it all together.

export function ListComponentItem({ name, onDelete }) {
  return (
    <div className="list-component__item>">
      {trimName(name)}

      <div onClick={onDelete} className="list-component__icon">
        <DeleteIcon />
      </div>
    </div>
  );
}

export function ListComponent() {
  const { list, handleDeleteItem } = useList();

  return (
    <div className="list-component">
      {list.map(({ id, name }) => (
        <ListComponentItem
          key={id}
          name={name}
          onDelete={handleDeleteItem(id)}
        />
      ))}
    </div>
  );
}

3. Use objects map instead of conditions

When it comes to displaying elements based on specific variables, you can use this powerful tip to simplify your code and make it more intuitive. This approach helps make your components more declarative and easier to understand, while also making it easier to extend their functionality in the future. So, whether you’re working on a complex project or just starting out, implementing this strategy can have a significant impact on the overall quality of your React code.

Problem

Don’t forget to subscribe and stay up-to-date with the latest tips and tricks for Frontend development! With new information being shared regularly, you won’t want to miss out on the opportunity to continue improving your skills and producing high-quality React code.

function Roles({type}) {
  let Component = UsualAccount

  if (type === 'vip') {
    Component = VipAccount
  }

  if (type === 'admin') {
    Component = AdminAccount
  }

  if (type === 'superadmin') {
    Component = SuperAdminAccount
  }

  return (
    <div className='roles'>
      <Component />
      <RolesStatistics />
    </div>
  )
}

Solution

const ROLES_MAP = {
  'vip': VipAccount,
  'usual': UsualAccount,
  'admin': AdminAccount,
  'superadmin': SuperAdminAccount,
}

function Roles({type}) {
  const Component = ROLES_MAP[type]

  return (
    <div className='roles'>
      <Component />
      <RolesStatistics />
    </div>
  )
}

4. Put independent variables outside of React lifecycle

One important concept to keep in mind is separating logic that doesn’t require the React component lifecycle methods from the component itself. This approach can greatly improve the clarity of your code by making dependencies more explicit. As a result, it becomes much easier to read and understand your components, leading to more efficient and effective development. So, make sure to keep this technique in mind as you continue to work with React and improve your code.

Problem

function useItemsList() {
  const defaultItems = [10, 20, 30, 40, 50]
  const [items, setItems] = useState(defaultItems)

  const toggleArrayItem = (arr, val) => {
    return arr.includes(val) ? arr.filter(el => el !== val) : [...arr, val];
  }

  const handleToggleItem = (num) => {
    return () => {
      setItems(toggleArrayItem(items, num))
    }
  }

  return {
    items,
    handleToggleItem,
  }
}

Solution

const DEFAULT_ITEMS = [
  10, 20, 30, 40, 50
]

const toggleArrayItem = (arr, val) => {
  return arr.includes(val) ? arr.filter(el => el !== val) : [...arr, val];
}

function useItemsList() {
  const [items, setItems] = useState(DEFAULT_ITEMS)

  const handleToggleItem = (num) => {
    return () => {
      setItems(toggleArrayItem(items, num))
    }
  }

  return {
    items,
    handleToggleItem,
  }
}

In conclusion, there are many ways to improve your React code and make it more efficient, effective, and user-friendly. Whether it’s through currying, separating logic from components, using variables to display elements or some other technique, it’s important to stay up-to-date with the latest tips and tricks in the world of Frontend development.

I hope, you found this article useful. If you have any questions or suggestions, please leave comments. Your feedback helps me to become better.

Keep these tips in mind, and never stop striving for excellence in your code.
Don’t forget to subscribe
Happy coding!

Every website should have an FAQ, and there are three big reasons why:

First, the concept of an FAQ is well-recognized across the web. The “Frequently Asked Questions” format originated in 1982 and has matured from offline to online. People know what it is, and they seek it out when they need information in a simple, easy-to-digest format. But it’s also well-understood by Google and other search engines, allowing them to index your content more effectively. As a result, just having an FAQ page can be an instant rocket booster for your SEO.

Second, an FAQ page can help improve your overall customer experience. The more helpful your FAQ content is, the fewer clicks a website visitor needs to convert. This also translates into greater productivity for you and your team by reducing the number of calls, chat sessions, or e-mails you receive with basic questions. 

Finally, having an FAQ gives your website visitors a rapid resource for information during an emergency. As we’ve seen with the COVID-19 pandemic, websites have become an essential tool for keeping audiences up to date on guidance, instructions, and other critical information. A good FAQ page can help support your strategy and should have an easy-to-use backend manager for making quick revisions about closures, hours of operation, online services, and more.

In this article, we’ll give you the code and guidance to add an efficient FAQ section on your website. We’ll be using an accordion, which allows you to feature lots of questions while “hiding” the content below each entry, making it less cumbersome. This lets your audience browse questions and view answers on the same page with a single click.

Getting Started

To build this FAQ section, we’re using Bootstrap and FontAwesome for the icons. Copy and paste the links below in the head section of your HTML file:

<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<!-- FontAwesome CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css">
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>

HTML

The main structure below is made with Bootstrap’s accordion component. Bootstrap’s accordions are simple JavaScript enabled card components that enable showing and hiding elements with a click.

They restrict the card components to only open one at a time. That means when a user clicks on a question, the answer will be revealed but when they click on another question, all other answers will be collapsed. By using the accordion-style, your users can easily scan through many questions and find the information they’re looking since there will be much less clutter on the page.

The other benefit is the users won’t have to go to another page to see the answer. In the code below, we only included a paragraph as an answer but you’re free to replace and supplement the answer content with any content you’d like such as text, images, or even videos.

<div class="text-center">
    <h2 class="mt-5 mb-5">FAQ</h2>
</div>
<section class="container my-5" id="maincontent">
    <section id="accordion">
        <a class="py-3 d-block h-100 w-100 position-relative z-index-1 pr-1 text-secondary border-top" aria-controls="faq-17" aria-expanded="false" data-toggle="collapse" href="#faq-17" role="button">
            <div class="position-relative">
                <h2 class="h4 m-0 pr-3">
                    What if I want custom gear?
                </h2>
                <div class="position-absolute top-0 right-0 h-100 d-flex align-items-center">
                    <i class="fa fa-plus"></i>
                </div>
            </div>
        </a>
        <div class="collapse" id="faq-17" style="">
            <div class="card card-body border-0 p-0">
                <p>Custom gear can be ordered through our contact form. Additional fees may apply.</p>

            </div>
        </div>

        <a class="py-3 d-block h-100 w-100 position-relative z-index-1 pr-1 text-secondary  border-top" aria-controls="faq-20" aria-expanded="false" data-toggle="collapse" href="#faq-20" role="button">
            <div class="position-relative">
                <h2 class="h4 m-0 pr-3">
                    What is the best email to reach you at?
                </h2>
                <div class="position-absolute top-0 right-0 h-100 d-flex align-items-center">
                    <i class="fa fa-plus"></i>
                </div>
            </div>
        </a>
        <div class="collapse" id="faq-20">
            <div class="card card-body border-0 p-0">
                <p>The best email for any inquiries is email@email.com!</p>
                <p>
                </p>
            </div>
        </div>

        <a class="py-3 d-block h-100 w-100 position-relative z-index-1 pr-1 text-secondary  border-top" aria-controls="faq-21" aria-expanded="false" data-toggle="collapse" href="#faq-21" role="button">
            <div class="position-relative">
                <h2 class="h4 m-0 pr-3">
                    Where can I read more about this company?
                </h2>
                <div class="position-absolute top-0 right-0 h-100 d-flex align-items-center">
                    <i class="fa fa-plus"></i>
                </div>
            </div>
        </a>
        <div class="collapse" id="faq-21">
            <div class="card card-body border-0 p-0">
                <p>Lorem ipsum dolor sit!</p>
                <p>
                </p>
            </div>
        </div>

        <a class="py-3 d-block h-100 w-100 position-relative z-index-1 pr-1 text-secondary  border-top" aria-controls="faq-22" aria-expanded="false" data-toggle="collapse" href="#faq-22" role="button">
            <div class="position-relative">
                <h2 class="h4 m-0 pr-3">
                    What is the best time to call?
                </h2>
                <div class="position-absolute top-0 right-0 h-100 d-flex align-items-center">
                    <i class="fa fa-plus"></i>
                </div>
            </div>
        </a>
        <div class="collapse" id="faq-22">
            <div class="card card-body border-0 p-0">
                <p>The best time to call is 24/7! We are always available to answer any questions.</p>
                <p>
                </p>
            </div>
        </div>
    </section>
</section>

CSS

The CSS code adds colors, font type, and size. Copy and paste it in your stylesheet and change the styling to match your own website:

.text-secondary {
    color: #3d5d6f;
}

.h4,
h4 {
    font-size: 1.2rem;
}

h2 {
    color: #333;
}

.fa,
.fas {
    font-family: 'FontAwesome';
    font-weight: 400;
    font-size: 1.2rem;
    font-style: normal;
}

.right-0 {
    right: 0;
}

.top-0 {
    top: 0;
}

.h-100 {
    height: 100%;
}

a.text-secondary:focus,
a.text-secondary:hover {
    text-decoration: none;
    color: #22343e;
}

#accordion .fa-plus {
    transition: -webkit-transform 0.25s ease-in-out;
    transition: transform 0.25s ease-in-out;
    transition: transform 0.25s ease-in-out, -webkit-transform 0.25s ease-in-out;
}

#accordion a[aria-expanded=true] .fa-plus {
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}

And here it is. Check out the JSFiddle below and click on the FAQ questions to reveal the answer:

Thank you for reading, and let’s connect!

Thank you for reading my blog, feel free to subscribe to my email newsletter, and ask questions and give your valuable suggestions.

All too often, the path for visitors is less than straight – and that impacts everything from page bounce rates to the overall customer experience.

You only have a few seconds to grab a user’s attention and guide them to the next step in their journey. That’s why Quick Links are a great way to connect your visitors to the most frequented or highly trafficked pages on your website. They’re simple, intuitive, visual, and more clickable than your average link. 

By utilizing Bootstrap’s column structure capabilities, you can dynamically handle the styling of your Quick Links, making it easy to add new links in a well-organized grid that’s easy on the eyes.

In this tutorial, we’ll show you how easy it is to create a Quick Links section using Bootstrap, HTML, and CSS.

Getting Started

Since we’ll be using Bootstrap, copy and paste the Bootstrap CDN links below in the head section of your HTML file:

<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>

HTML

Below, we have a Bootstrap grid structure and 8 boxes for links. Each box is sized using Bootstrap’s column structure and have the classnames col-xl-3 col-lg-4 col-sm-6 col-12 meaning in large desktop screens, there will be four boxes laid out horizontally, in regular desktop screens three, on smaller screens two and on mobile screens, each column will take up the entire width.

The total width is made up of 12-columns. You can adjust the number of columns by changing the numbers, for example, if you’d like to display only three columns on large screens, you can change the col-xl-3 value to col-xl-4 and have three equal-width columns across.

<section class="section mt-5 mb-5">
    <div class="container">
        <div class="row">
            <div class="col-12">
                <h1 class="text-center mb-5">More Information</h1>

                <div class="row">
                    <div class="col-xl-3 col-lg-4 col-sm-6 col-12">
                        <div class="box-information mx-0">
                            <a href="">Asteroid <br>packages</a>
                        </div>
                        <!-- .box-information-->
                    </div>

                    <div class="col-xl-3 col-lg-4 col-sm-6 col-12">
                        <div class="box-information mx-0">
                            <a href="">Space excursions</a>
                        </div>
                        <!-- .box-information-->
                    </div>

                    <div class="col-xl-3 col-lg-4 col-sm-6 col-12">
                        <div class="box-information mx-0">
                            <a href="">Five-star & <br>menu options</a>
                        </div>
                        <!-- .box-information-->
                    </div>

                    <div class="col-xl-3 col-lg-4 col-sm-6 col-12">
                        <div class="box-information mx-0">
                            <a href="">Orbital entertainment</a>
                        </div>
                        <!-- .box-information-->
                    </div>

                    <div class="col-xl-3 col-lg-4 col-sm-6 col-12">
                        <div class="box-information mx-0">
                            <a href="">SpaceJet Flex <br>ticketing</a>
                        </div>
                        <!-- .box-information-->
                    </div>

                    <div class="col-xl-3 col-lg-4 col-sm-6 col-12">
                        <div class="box-information mx-0">
                            <a href="">Shuttle <br>Locations</a>
                        </div>
                        <!-- .box-information-->
                    </div>

                    <div class="col-xl-3 col-lg-4 col-sm-6 col-12">
                        <div class="box-information mx-0">
                            <a href="">Transit Services</a>
                        </div>
                        <!-- .box-information-->
                    </div>

                    <div class="col-xl-3 col-lg-4 col-sm-6 col-12">
                        <div class="box-information mx-0">
                            <a href="">JetPet program</a>
                        </div>
                        <!-- .box-information-->
                    </div>
                </div>
                <!-- .row-->
            </div>
        </div>
    </div>
</section>

CSS

Customize the background color, hover color, and text/link colors by modifying the hex values.

.section h1 {
    font-size: 37px;
}

.section .box-information {
    height: 115px;
    border: 1px solid #dbdbdb;
    margin-bottom: 30px;
}

.section .box-information a {
    font-size: 21px;
    line-height: 29px;
    font-weight: 600;
    padding-left: 20px;
    padding-right: 20px;
    display: flex;
    align-items: center;
    height: 100%;
    position: relative;
    color: #222;
    border-bottom: 4px solid #d60e96;
}

.section .box-information a:hover {
    transition: all, 0.4s, ease;
    background: linear-gradient(135deg, #ff9024 1%, #ff705e 44%, #ff5a85 55%, #ff2cd6 100%);
    color: #fff;
    text-decoration: none;
}


/* Media Queries */

@media (min-width: 768px) {
    .section h1 {
        margin-bottom: 8px;
    }
}

@media (min-width: 992px) {
    .section .box-information {
        margin: 0 5px 30px;
    }
}

@media (max-width: 767.98px) {
    .section .box-information {
        height: 85px;
        margin-bottom: 15px;
    }
}

And there it is! Check out the JSFiddle below to see how the quick links look before committing to its use.

Thank you for reading, and let’s connect!

Thank you for reading my blog, feel free to subscribe to my email newsletter, and ask questions and give your valuable suggestions.

Video remains one of the most popular forms of content marketing around — and it’s certainly one of the most beneficial for a website.

Here are some of the key benefits to adding video to your website: 

– Increased engagement. By the very nature of the video, it invites engagement. Study after study has shown that people are more likely to watch a video about a topic rather than read a blog about the same topic. People simply love visual elements — especially if those elements move and capture a viewer’s attention. 

– Excellent ROI. Video content elements aren’t always a priority for content marketing teams, but organizations that use them swear they’re worth it. Over 83% of businesses report that their investment in video elements are worth it.

– Improved SEO. This goes back to our first point. Videos naturally increase the time people spend on your website. Longer exposure builds trust with your website — and not just for the human viewers engaging with your content. Longer times and lower bounce rates tell Google that your site probably has viable, relevant content to certain queries. Some studies have indicated that websites are 53% more likely to show up on page one results if they have embedded videos.

– Boosted conversions. Studies have shown that putting a video on a landing page can improve conversions by nearly 80%.

Here’s how to create a popup video element utilizing Magnific Popup is a responsive lightbox:

So, We start with the coding of HTML

HTML

The HTML uses just some default bootstrap classes, including the Bootstrap responsive embed classes:

<div class="container">
  <div class="row">
    <div class="col-sm-12">
      <h1 class="text-center display-4 mt-5">
        Solodev Web Design & Content Management Software
      </h1>
      <p class="text-center mt-5">
        <a href="#headerPopup" id="headerVideoLink" target="_blank" class="btn btn-outline-danger popup-modal">See Why Solodev WXP</a>
      </p>
      <div id="headerPopup" class="mfp-hide embed-responsive embed-responsive-21by9">
        <iframe class="embed-responsive-item" width="854" height="480" src="https://www.youtube.com/embed/qN3OueBm9F4?autoplay=1" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
      </div>
    </div>
  </div>
</div>

CSS

We only need some CSS to control how the embed and popup overlay interact:

#headerPopup{
  width:75%;
  margin:0 auto;
}

#headerPopup iframe{
  width:100%;
  margin:0 auto;
}

JS

Some simple JavaScript that initializes Magnific Popup on click:

$(document).ready(function() {
  $('#headerVideoLink').magnificPopup({
    type:'inline',
    midClick: true // Allow opening popup on middle mouse click. Always set it to true if you don't provide alternative source in href.
  });         
});

Want to see how it all looks before committing to its use? Check out the JSFiddle below.

Thank you for reading, and let’s connect!

Thank you for reading my blog, feel free to subscribe to my email newsletter, and ask questions and give your valuable suggestions.

The internet has a lot of tools developed by the community to ease our lives as front-end devs. Here is a list of my favourite go-to tools that have personally helped me with my work.

1. EnjoyCSS

To be honest, although I do a lot of front-end dev, I am too much good with CSS but instead of doing custom CSS styles I prefer this tool to work smart & fast. This very simple tool is my savior in hard times. It lets you design your elements with a simple UI and gives you the relevant CSS output.

2. Prettier Playground

Prettier is a code formatter with support for JavaScript, including ES2017, JSX, Angular, Vue, Flow, TypeScript, and more. It removes your original styling and replaces it with standard consistent styling adhering to the best practices. This handy tool has been very popular in our IDEs, but it also has an online version — a playground where you can prettify your code.

3. Postman

Postman is a tool that has been in my developer toolset since the beginning of my dev career. It has been very useful to check my endpoints in the back end. It has definitely earned its position on this list. Endpoints such as GET, POST, DELETE, OPTIONS, and PUT are included. You should definitely use this tool.

4. StackBlitz

StackBlitz allows you to set up your Angular, React, Ionic, TypeScript, RxJS, Svelte, and other JavaScript frameworks with just one click. You can start coding in less than five seconds because of this handy feature.

I have found this tool quite useful, especially when trying out sample code snippets or libraries online. You would not have the time to create a new project from scratch just to try out a new feature. With StackBlitz, you can simply try out the new NPM package in less than a few minutes without creating a project locally from scratch. Nice, right?

5. Bit.dev

One basic principle of software development is code reusability. This enables you to reduce your development, as you’re not required to build components from scratch.

This is exactly what Bit.dev does. It allows you to share reusable code components and snippets and thereby allows you to reduce your overhead and speed up your development process.

It also allows for components to be shared among teams, which lets your team collaborate with others.

Components are your design system. Build better together.

Bit.dev

As quoted by Bit.dev, this component hub is also suitable to be used as a design system builder. By allowing your team of developers and designers to work together, Bit.dev is the perfect tool for building a design system from scratch.

Bit.dev now supports React, Vue, Angular, Node, and other JavaScript frameworks.

6. CanIUse

This online tool can be very handy, as it allows you to find out whether the feature you are implementing is compatible with the browsers you are expecting to cater to.

I have had many experiences where some of the functionalities used in my application were not supported on other browsers. I learned the hard way that you have to check for browser compatibility. One instance was that a particular feature wasn’t supported in my portfolio project on Safari devices. I figured that out a few months after deployment.

To see this in action, let’s check which browsers support the WebP image format.

As you can see, Safari and IE are not currently supported. This means you should have a fallback option for incompatible browsers. The code snippet below is the most commonly used implementation of WebP images to support all browsers.

Conclusion

I have tried to fit the best tools I have encountered in my dev career. If you think there are any worthy additions, please do comment below. Happy coding!

Thank you for reading, and let’s connect!

Thank you for reading my blog, feel free to subscribe to my email newsletter, and ask questions and give your valuable suggestions.

As we all know JS stands for JavaScript.

It is a lightweight, cross-platform, an interpreted scripting language. It is well-known for the development of web pages, many non-browser environments also use it.

JavaScript can be used for Client-side developments as well as Server-side developments. JavaScript contains a standard library of objects, like Array, Date, and Math, and a core set of language elements like operators, control structures, and statements.

JS version release year chart:

JS Structure:

<script type="text/javascript">  
    // Your javaScript code 
</script>

Characteristics of JS:

• Dynamically typed languages: This language can receive different data types over time.
• Case Sensitive Format: JavaScript is case sensitive so you have to aware of that.
• Light Weight: It is so lightweight, and all the browsers are supported by JS.
• Handling: Handling events is the main feature of JS, it can easily response on the website when the user tries to perform any operation.
• Interpreter Centered: Java Script is built with interpreter centered that allows the user to get the output without the use of the compiler.

Advantages of JS:

• JavaScript executed on the user’s browsers not on the webserver so it saves bandwidth and load on the webserver.
• The JavaScript language is easy to learn it offers syntax that is close to the English language.
• In javaScript, if you ever need any certain feature then you can write it by yourself and use an add-on like Greasemonkey to implement it on the web page.
• It doe’s not require compilation process so no compiler is needed user’s browsers do the task.
• JavaScript is easy to debug, and there are lots of frameworks available that you can use and become master on that.

Disadvantages of JS:

• JavaScript codes are visible to the user so the user can place some code into the site that compromises the security of data over the website. That will be a security issue.
• All browsers interpret JavaScript that is correct but they interpret differently to each other.
• It only supports single inheritance, so in few cases may require the object-oriented language characteristic.
• A single error in code can totally stop the website’s code rendering on the website.
• JavaScript stores number as a 64-bit floating-point number but operators operate on 32-bit bitwise operands.

Thank you for reading, and let’s connect!

Thank you for reading my blog, feel free to subscribe to my email newsletter, and ask questions and give your valuable suggestions.

1. What is the problem?

Suppose you have a list of divs on your page and you query them via document.querySelectorAll.

let rows = document.querySelectorAll('img')
NodeList(11) 

However, rows is not an array that you can manipulate with all of the handy array methods, like map(), filter()etc.

That is because

NodeList object is a list (collection) of nodes extracted from a document.

So after this the question is “What can We do?”

2. What can I do?

The easiest, fastest way to convert it into an array is just using the es6 spread operator.

let rows = document.querySelectorAll('img');
rows = [...rows]

Now, you can start applying all of the array methods to this rows

3. Other ways to solve the problem here

1. use es6 spread operator […arrayLikeObject]
2. usees6 Array.from(arrayLikeObject)
3. [].slice.call(arrayLikeObject)
4. use the good old for loop, code snippet is below, feel free to copy it, LOL

let trueArray = []
for(let i = 0; i < rows.length; i++) {
   trueArray.push(rows[i])
}

If you know any other ways, feel free to leave a comment below!

After lots of research & case studies, some question coming into screen related to programming. So I decide to make one simple and easy RoadMap of Coding for beginners.

Frequently asked questions of programming.

• Should I learn Python or JavaScript?
• Data Science vs Web Development vs App Development, which one should I choose?
• Why should I learn Web Development when there are popular Web Developing tools like Wix & WordPress?
• Is NodeJS better than Django(python)?
• All these points made me confused ? about what should I do?

So before starting with the questions Here’s something about who I am and What makes me qualified to answer such questions?

I’m a gradiot (an idiot who did his graduation and who has wasted money and time getting zero skills from college while there’s an actual opportunity to learn everything online for free).

Yes, I am a CS graduate. During my college years I came across multiple technologies from PHP to JavaScript, Python, flutter you name it. I tried to learn and understand various technologies not due to college curriculum, but due to my desire to learn more and google ?.

Should I learn Python or JavaScript?

This is the Clash of the Titans!!

To understand the above question correctly, it is important to know more about JavaScript and Python as well as the reasons for their popularity. So let’s start with JavaScript first!

Why is JavaScript so popular?

JavaScript is a high-level, interpreted programming language that is most popular as a scripting language for Web pages. This means that if a web page is not just sitting there and displaying static information, then JavaScript is probably behind that. And that’s not all, there are even advanced versions of the language such as Node.js which is used for server-side scripting.

JavaScript is an extremely popular language. And if my word doesn’t convince you, here are the facts!!!

According to StackOverflow Developer Survey Results 2019, JavaScript is the most commonly used programming language, used by 69.7 % of professional developers. And this is a title it has claimed the past seven years in a row.

In addition to that, the most commonly used Web Frameworks are jQuery, Angular.js, and React.js (All of which incidentally use JavaScript). Now if that doesn’t demonstrate JavaScript’s popularity, what does?!

So now the question arises… Why is JavaScript so popular?

Well, some of the reasons for that are:

• JavaScript is used both on the client-side and the server-side. This means that it runs practically everywhere from browsers to powerful servers. This gives it an edge over other languages that are not so versatile.
• JavaScript implements multiple paradigms ranging from OOP to procedural. This allows developers the freedom to experiment as they want.
• JavaScript has a large community of enthusiasts that actively back the language. Without this, it would have been tough for JavaScript to establish the number one position it has.

Can Python Replace JavaScript in Popularity?

Python is an interpreted, general-purpose programming language that has multiple uses ranging from web applications to data analysis. This means that Python can be seen in complex websites such as YouTube or Instagram, in cloud computing projects such as OpenStack, in Machine Learning, etc. (basically everywhere!)

Python has been steadily increasing in popularity so much so that it is the fastest-growing major programming language today according to StackOverflow Developer Survey Results 2019.

This is further demonstrated by this Google Trends chart showing the growth of Python as compared to JavaScript over the last 5 years:

As shown in the above data, Python recorded increased search interest as compared to JavaScript for the first time around November 2017 and it has maintained its lead ever since. This shows remarkable growth in Python as compared to 5 years ago.

In fact, Stack Overflow created a model to forecast its future traffic based on a model called STL and guess what…the prediction is that Python could potentially stay in the lead against JavaScript till 2020 at the least.

All these trends indicate that Python is extremely popular and getting even more popular with time. Some of the reasons for this incredible performance of Python are given as follows:

• Python is Easy To Use
  No one likes excessively complicated things and that’s one of the reasons for the growing popularity of Python. It is simple with an easily readable syntax and that makes it well-loved by both seasoned developers and experimental students. In addition to this, Python is also supremely efficient. It allows developers to complete more work using fewer lines of code. With all these advantages, what’s not to love?!!
• Python has a Supportive Community
  Python has been around since 1990 and that is ample time to create a supportive community. Because of this support, Python learners can easily improve their knowledge, which only leads to increasing popularity. And that’s not all! There are many resources available online to promote Python, ranging from official documentation to YouTube tutorials that are a big help for learners.
• Python has multiple Libraries and Frameworks
  Python is already quite popular and consequently, it has hundreds of different libraries and frameworks that can be used by developers. These libraries and frameworks are really useful in saving time which in turn makes Python even more popular. Some of the popular libraries of Python are NumPy and SciPy for scientific computing, Django for web development, BeautifulSoup for XML and HTML parsing, sci-kit-learn for machine learning applications, nltk for natural language processing, etc.

Data Science vs Web Development vs App Development, which one should I choose?

If you are reading this, you might be knowing very well the pay of a Data Science and ML engineers as compared to a Web Developer or an App Developer.

All this huge burst about AI is the future and might very well draw you towards thinking that even I should learn Data Science for a huge package and a job opportunity.

Here’s the ugly truth, it’s hard to get a job in Data Science since companies will prefer a person having the Domain knowledge and usually majoring in Mathematics and statistics, you should at least have Masters or Ph.D. for getting a job in this field.

For Example – A fintech company will choose a CFA or Finance major rather than a CS engineer and teach them Data Science since python is easy and it’s the efficiency that counts. So, the person with finance knowledge is well suited for the job. However, As I said It’s hard to get a job, not impossible.

Some CS grads have got into data science and are earning handful. All you need to learn is python and some libraries and mathematics.

Now, As I said before, data science is a service-based skill you are not technically a developer you’re an engineer who is figuring out solutions for a given problem.

On the other hand, being a web or app developer means developing products. You can create applications and websites and release them to earn using ad revenue, selling them, or even creating and maintain them for companies that way you don’t have to rely on companies to give your services.

I suggest you to first, learn web development and then Data Science while earning through your web dev skills. That way you will have a decent skill set, portfolio, and a budget to start experimenting into the world of machine learning where processing power is everything.

Why should I learn Web Development when there are popular Web Developing tools like Wix & WordPress?

WordPress and Wix are popular content management systems.

They are best for creating small websites and blogs. Yes, they made it easy for anyone to create websites but that doesn’t mean web developers’ jobs are gone.

You can’t create Amazon, Netflix, Twitter, and large fully functional websites using them. So, if you are trying to be a low-level web developer, you can pretty much say goodbye to developing websites.

You can google top trending tech skills in demand and you will find AngularJS, ReactJS, NodeJS developers in demand.

Not only websites but you can also create native applications for android and iOS using React-native and games using ThreeJS a JavaScript library.

Possibilities are endless, all you have to do is START. I’ll suggest you start with MERN stack just my personal opinion but you can research and pick whichever stack you like.

Is NodeJS better than Django(python)?

The two best tools which are quite helpful in building a powerful web application in Node JS and Django.

Compared to Node.js, Django is a beginner-friendly tool, if compared to Node.js. The main reason behind putting this statement is the programming language upon which the frameworks are based.

You will get a comfortable experience in both JavaScript & Python, but for an impressive, stable, scalable work you can use Django over Node.JS.

Node JS and Django, they both are the free framework to use! Moreover, you will not face any kind of licensing issues as they both are open-source software in web development application industry.

Both web development frameworks are great to create web applications; however, there use cases makes them different from each other.

For example, Django is an excellent choice for your web development project when you use a relational database. The presence of extensive external libraries and top-class security build the web application project quickly.

In the case of Node JS, whenever you require an asynchronous stack, a great performance, and web building features from scratch for the server-side, Node.js helps you a lot and does the heavy client-side processing.

Here are some of the big fishes and the backend tech they preferred for their development.

Uber, Twitter, eBay, Netflix, Duckduckgo, PayPal, LinkedIn, Trello, Mozilla, GoDaddy are some big names using Node JS as their backend technology.

Pinterest, Instagram, Eventbrite, Sentry, Zapier, Dropbox, Spotify, YouTube are also some big names using Django as their backend technology.

Notice the trend here, Uber, Twitter, and Netflix are some of the applications that priorities performance whereas Pinterest, Instagram, YouTube requires a lot of space and thus scalability is their priority.

So, the choice is upon you what you want scalability or performance.

All these points made me confused ? about what should I do?

First, ask yourself what do you enjoy doing. Do you like to create games, apps, websites? What intrigues you? What sparks your curiosity? I have listed some of the questions depending upon the choices you make.

• GAME Development – If you want to get into the game development industry, you will have to learn C# or C++ for hardcore game development. You can create web games using ThreeJS or any other library but you won’t be exactly a game developer.

• App Development – You can create an application using JAVA for android or Swift for iOS. Further, you can use React-native (by Facebook Inc) or Flutter (by Google Inc) for creating apps that would run on both android and iOS. If you want web apps, you can use Ionic as well.

• Web Development – There are many stacks (a set of technologies that suits well with each other) you could choose to learn like MEAN stack, MERN stack, LAMP stack, etc. You can create a website from WordPress or Wix as well. Develop an interactive portfolio for yourself with the stack you find interesting.

• Data Science, ML, AI – Start with python and take courses on data science, mathematics, machine learning, from popular websites like Udemy or LinkedIn. Start competing on Kaggle and maintain your Kaggle profile.
  
  Second, do yourself a favor and start learning algorithms and data structures in the language that fits your answer to the above question.
  
  Third, Start applying for internships with some projects and try to make an exemplary portfolio. Maintain your GitHub, LeetCode or HackerRank or any other profiles which you can include on your resume.