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!

The social media share buttons are a very important part of your website. They allow you and your users to quickly share your content across social media, expanding your audience in seconds with just a few clicks. While it is a small feature to be implemented, you can be creative with it and make the social share buttons interactive in a way that adds a unique experience for your visitors.

One of the ways of doing it is simply using the CSS hover feature. In this tutorial, we’ll show you how to do that.

You can use any kind of image file you want for your icons such as PNG or SVG. In this tutorial, we wanted to keep things simple and used an icon font, FontAwesome.

This method saves time as you don’t have to individually download icon images and set their sizes individually. It also cuts down the lines of code on your HTML or CSS file. With FontAwesome, you can simply add the CDN below to add icons to your website.

We’re also using Bootstrap to organize our grid layout. Please insert the external links below on your HTML file to get started:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

HTML

The code below is straightforward.

We have a ul list that contains each of the social media links as a list item. If you’d like to add more social media links, all you have to do is create another li item and add your icon inside the i tag.

We’re using Bootstrap’s list-inline class which automatically makes a list horizontal so we don’t have to add additional lines on the CSS file to make our list items inline.

<div class="col-sm-5 col-md-4 col-lg-3 social-links text-center">
    <ul class="list-inline mt-5">
        <li class="list-inline-item"><a href="#"><i class="fa fa-facebook social-icon" aria-hidden="true"></i></a></li>
        <li class="list-inline-item"><a href="#"><i class="fa fa-twitter social-icon" aria-hidden="true"></i></a></li>
        <li class="list-inline-item"><a href="#"><i class="fa fa-linkedin social-icon" aria-hidden="true"></i></a></li>
        <li class="list-inline-item"><a href="#"><i class="fa fa-envelope social-icon" aria-hidden="true"></i></a></li>
    </ul>
</div>

CSS

After we’re done with building the structure of the social media share list, let’s get to how we can display them beautifully with interesting hover effects. Copy and paste the code below in your CSS file:

.fa,
.fas {
    font-family: 'FontAwesome';
}

.social-icon {
    color: #fff;
    background: #221B14;
    font-size: 1em;
    border-radius: 50%;
    line-height: 2.2em;
    width: 2.1em;
    height: 2.1em;
    text-align: center;
    display: inline-block;
}

li:hover {
    transform: translateY(-4px);
    transition: 0.3s;
}

FontAwesome comes with the default .fa or .fas classes. We need to select those classes and set their font-family as “Font Awesome”, otherwise, the icons will show up as blank squares. 

In order to put the icons in a circular border background, we need to give a specific value to the icon font-size, line-height, and the circle width and height. First, we make the border circle by giving setting its radius as 50%. The icon font size is up to you. Just make sure that the line-height, width, and height values are about as twice as big as the font-size. That way your icon will be well placed in the center, both horizontally and vertically.

Once we ensure that every element in our list is aligned nicely, we can get to the fun part, the hover effect. We’re making each of the icons move up 4px on hover. All we need to do is select each list item add a :hover after it and write transform: translateY(-4px).Then, while this is optional, we set the transition to 0.3s to so that when we hover over the icon, it will move up gradually in a smooth way rather than move up abruptly.

There we have it. You can hover over the icons on JSFiddle below to see how they move on hover:

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.

Regardless of your industry, communicating with your audience in a timely manner has never been more important. Over the years, we’ve developed a library of simple yet highly effective tools for transforming your website into a crisis communications resource – and we’re sharing them with you to help fight COVID-19.

This will be a series of articles with each installment focusing on a separate tool and teaching you how to implement it. In Part 1, we’ll show you how to add an alert bar to promote breaking news, updates, instructions, and other key information to your customers during a crisis situation.

Adding an Alert Bar to the Top of Your Website

Alert bars – also known as sticky bars, floating bars, notification bars, or hello bars – are a flexible, easy-to-use tool that span the whole width of a webpage. Adding an alert bar is a perfect way to capture your visitors’ attention and keep audiences about your COVID-19 response strategy. A few tips on the usability of alert bars:

• Place the alert bar on top of the page where it will always be visible
• Make sure the color of the alert bar is different than your website’s main colors so that it immediately stands out
• Once an emergency is over, turn off your alert bar so it provides a disruptive presence when used in the future

While ideal for communicating your COVID-19 news and updates, alert bars can also be used for a variety of non-emergency applications, including:

• Changes to hours of operation or contact info
• Service changes for transportation authorities
• Limited-time sales promotions or offers
• Scheduled website maintenance

Regardless of your message, an alert bar is incredibly effective because it grabs a visitor’s attention without interfering with the rest of your website content.

This tutorial walks you through how to build out and customize an alert bar on your website. Below are the HTML and CSS required.

HTML

Add the HTML snippet to your templates or webpage, preferably at the top above any navigation or header so that it has prominent positioning.

<div class="covid-alert">
    CORONAVIRUS (COVID-19) ALERTS: <a href="#">Click here for the latest information</a>
</div>

CSS

Customize the background color and text/link colors by modifying the hexidecimal colors.

body {
    margin: 0px;
    min-height: 75px;
    overflow: hidden;
}

.covid-alert {
    background: #cc0202;
    color: #fff;
    width: 100%;
    padding: 15px;
    font-size: 16px;
    text-align: center;
    font-weight: bold;
    font-family: Inter, sans-serif;
}

.covid-alert a {
    color: #fff;
    text-decoration: underline;
    font-weight: 400;
}

Result

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.

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.

But there are times when a little extra money on the side is much appreciated. Be it because you are still in college or university, you want to start to work for yourself rather than for others, you have a child and want to spend more time with them, you still need to make some cash or you’re doing it just for the fun of it.

Here is the good thing: As a programmer, you have everything you need to increase the cash flow. Your brain, your laptop — that’s all you really need. Interested? Check out the following strategies and decide what fits best for you.

Start to Freelance

Freelancing can be a great thing. No (real) boss, a tremendous amount of projects to choose from, high daily rates for specialists, as many holidays as you want…the list goes on.

However, it requires a lot of discipline and effort to find clients and projects. The biggest advantage to me is that you can start freelancing next to your permanent job, be it in the evenings or on the weekends.

Platforms like Upwork or Fiverr seem to offer a lot of opportunities especially for doing things on the sidelines but be aware of the competition over there.

Additionally, rates are pretty low so I would only recommend this if you just want to dip your toes into the water for the first time or are satisfied with only a little bit of additional income.

A better strategy would be to work on your LinkedIn profile, contact recruiters and past clients from your network, go to conferences and meetups, and look out for platforms that match up remote workers with companies.

Participate in Coding Contests

Yes, this is a real thing. There are dedicated platforms that organize programming contests for real prize money.

One of the biggest is Topcoder with more than a million members and a lot of competitions. They have three main focus areas: design, data science, and development.

You would work on real projects initiated by more than 2000 companies or single matches against opponents. Fun is guaranteed, so is a fast learning curve.

And other lots of sites available like, CodersRank, HackerRank, CodeChef and lot more.

If you like challenges, this might be something for you. However, there is competition and you cannot count on a steady flow of income so make this one a lower priority.

Start to Write

In my opinion, writing still is one of the best ways to reach a broad audience. There are plenty of opportunities for you to start writing and make money out of it:

• You can start your own blog and monetize with ad revenue.
• You can write books or ebooks and sell them online.
• You can write on platforms such as Medium and participate in their Partnership Programs.
• You can write guest posts for established sites like CSS-Tricks that will pay you a fixed amount if your article is accepted.

There is nothing wrong with trying things out and seeing how people react to what you write.

However, some things that you should consider are to choose a niche where you have a special interest in (keeps you motivated), to keep writing consistently (it takes time to get recognized), and to constantly improve your writing skills to deliver high-quality articles (people will thank you, there is more than enough low-quality stuff out there….).

Record and Sell Online Courses

Being able to teach people online is one of the best things that emerged over the last decade and will be around for at least another decade if not longer, in my opinion.

The benefits for both students and teachers are massive. Students can choose from a wide range of offerings and learn on their own schedule. Teachers reach 1000s or 100,000s of people with their content.

If you have experience with programming, ideally expert knowledge in a language like JavaScript or Python (or any other popular language or framework) or even in niche penetration testing and you are able to and have fun teaching others, creating online courses could be your thing.

There are many platforms available for your courses to be published on. Udemy, for example, has round about 75 million visitors a month and anyone can join them.

Other platforms like Frontend Masters or Pluralsight are invite-only but if you have a reputation or a good network — why not?

However, there are a few things to consider when recording your courses:

• Invest in good gear: good microphone and webcam are a must!
• High-quality content is king. Competition is increasing steadily so you need to convince people that you can teach them valuable things.
• Practice speaking loud and clearly.
• Always rework your recordings.
• Create additional material like a GitHub project, presentations, coding examples…

And even if it seems appealing that once a course has been recorded and people start buying it, it will create passive income for you, that is only true to some extent. The best teachers constantly update their courses because technology changes all the time!

Conclusion

There is one last thing I want to tell you that is relevant for each of the above options:

Consistency is king.

No matter what you start — pursue it, stick with it. Most things won’t work overnight. It is hard work, you have to invest time and energy. 99% give up too early. Be among the 1% that are successful!

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.

There are countless definitions of what computer programming is, but the one I use is:

“Programming is how you get computers to solve problems.”

In the basic terms there are two key phrases here which are important:

• You: Without the programmer (you), the computer is useless. It does what you tell it to do.
• Solve Problems: Computers are tools. They are complex tools, admittedly, but they are not mysterious or magical: they exist to make tasks easier by programmer (you) help and it’s own complex structures.

Computer programs (or software) are what makes computers work. Without software, modern computers are just complicated machines for turning electricity into heat. It’s software on your computer that runs your operating system, browser, email, games, movie player – just about everything.

When you create a program for a computer, you give it a set of instructions, which will run one at a time in order, precisely as given. If you told a computer to jump off a cliff, it would!

1. turn and face the cliff
2. walk towards the cliff
3. stop at the edge of the cliff
4. jump off the cliff

To stop computers constantly falling off cliffs, they can also make choices about what to do next:

If I wont survive the fall, don't jump off the cliff

Computers never get bored and are really good at doing the same thing over and over again. Instruction 2 above might look in more detail like this:

2a. left foot forward
2b. right foot forward
2c. go back to 2a

These three concepts are the basic logical structures in computer programming:

1. Sequence: running instructions in order
2. Selection: making choices
3. Repetition: doing the same thing more than once

Add to these concepts the ability to deal with inputs and outputs and to store data, and you have the tools to solve the majority of all computing problems.

Programming Languages

Unfortunately, computers don’t understand languages like English or Spanish, so we have to use a programming language they understand to give them instructions.

There are many different programming languages, all of which have their own merits, and certain languages are better suited to particular types of task, but there is no one language which is the ‘best’.

In this course you will be programming using a language called Python. Python is one of a group of languages called “general-purpose programming languages”, which can be used to solve a wide variety of problems. Other popular languages in this category are C, Ruby, Java and BASIC.

This is a small Python program which asks the user to enter their name and says “Hi” to them:

print("Hello and welcome.")
name = input("Whats your name?")
if name == "Martin":
    print("Thats my name too!")
print("Hi " + name)

You don’t need to be a computer programmer to be able to read this code. It contains English words and it is readable (if not perhaps understandable). However, by the end of this course you will understand this code, what it does, and the concepts it uses.

Programs are often referred to as code and hence programming is also known as coding.