DEV Community: Ojebiyi Fulness

React 18: The Features and The Future

Ojebiyi Fulness — Sat, 07 Oct 2023 18:28:39 +0000

React 18: The Features and The Future

All about the exciting release of React 18 and exploring its new features

The web development space is in a constant state of evolution, with technologies needing to adapt to frequent changes. In this dynamic environment, there is an ever-increasing demand for greater efficiency and optimized performance. Popular frameworks like React have evolved over the years to meet these demands, providing developers with enhanced tools for productivity and effectiveness. In this article, we’ll look at the latest development in the React ecosystem and the benefits it brings for both developers and users alike.

What is React?
React v18.0
How to upgrade to React 18
Conclusion

PS: This will be a lengthy read, so grab your juice, relax on your couch and let’s get this going. 😉

What is React?

React also known as React JS is a popular open-source JavaScript library for building user interfaces. React helps developers create interactive and dynamic web applications through the use of a component-based architecture and a virtual DOM. This means that the user interface is broken down into reusable and self-contained building blocks. React helps build fast and modern web applications.

React was developed by Facebook in 2011 and released to the public in 2013. React 16.0 was released in September 2017, while React 17.0 was released in August 2020. On March 29, 2022, React 18 was released, which introduced new features.

React v18.0

As earlier stated, on March 29, 2022, React 18 was rolled out with some key updates and new features. React 18 is focused on improving the performance of React applications and concurrent rendering features. You can check out the official release document here.

There is an improvement to concurrency in React and new features added, which include:

Automatic Batching
Transitions
Suspense on the server
New Strict Mode Behaviors
New Hooks

We’ll look at these improvements and features in detail.

Concurrent React

Concurrent React is a feature that allows applications to stay responsive and gracefully adjust to varying workloads and priorities. It helps React prioritize updates and rendering based on the importance and urgency of different tasks, ensuring that high-priority updates are processed more quickly.

In previous versions of React, once rendering started, it could not be interrupted until it was completed.

Dan Abramov from the React 18 working group discussions gives a good example that simplifies the concept of concurrency.

Let’s say we need to call two people, Bob and Alice. In a non-concurrent setting, we’ll place the calls to each of them one after the other; that is, I call Bob first, and after ending the call with him, I call Alice.

Let’s imagine a scenario where we are talking with Alice and an urgent call from Bob comes in. We put the call with Alice on hold and then answer the more urgent call from Bob before going back to our call with Alice. This is what concurrency is.

In React 18, React can either interrupt, pause, or resume a render. It can even go as far as abandoning it to quickly respond to user interactions. It does not matter the magnitude of the task at hand; when there is a more urgent task, React will treat that as a priority.

Automatic Batching

Automatic batching is one of the features of React 18. To understand batching, an example is given from the React 18 working group discussion. Let’s say five of your friends are around on a visit, and you want to get food for them from a nearby restaurant. To ensure your trip is efficient, you get a list of what each person wants to eat, take a trip to the restaurant, and buy the food, all in a single trip. This is batching.

Without batching, you would get the order of the first person, go to the restaurant, purchase the food, and come back to take the order of the second person, go to the restaurant, purchase the food... until you do so for the last person. You would be so frustrated.

React uses batching to group multiple state updates into a single re-render for better performance. By doing this, unnecessary re-renders are avoided. Previously, React batched state updates in event handlers during browser events, as shown below:

function App() {
  const [count, setCount] = useState(0);
  const [alert, setAlert] = useState(false);

  const handleClick =()=>{
    setCount(count => count + 1); 
    setAlert(alert => !alert); 
    // React re-renders once at the end. This is batching!
  }

  return (
    <div>
      <button onClick={handleClick}>Increment</button>
      <h1 classname={`${alert ? "bg-blue " : "bg-black"}`}>
      {count}</h1>
    </div>
  );
}

However, there were some exceptions to this, such as updating the state after an event has been handled. For example, if you need to fetch data and then update the state in the event handler handleClick above, React would not batch the updates but do them independently.

function App() {
  const [count, setCount] = useState(0);
  const [alert, setAlert] = useState(false);

  const handleClick =()=>{
    fetch().then(() => {
    setCount(count => count + 1); // React re-renders this!
    setAlert(alert => !alert); // React re-renders this!
    });
  }

  return (
    <div>
      <button onClick={handleClick}>Increment</button>
      <h1 classname={`${alert ? "bg-blue " : "bg-black"}`}>{count}</h1>
    </div>
  );
}

Updates inside of promises, setTimeout, native event handlers, or any other event were not batched in React by default.

In React 18, createRoot helps to automatically batch all updates, irrespective of whether they are in event handlers or not.

Automatic batching comes with React 18. UseReactDOM.flushSync() to opt out of batching.

Transitions

Transition is a newly introduced feature that helps React distinguish urgent from non-urgent updates.

Urgent updates are from the direct interaction of the user, such as pressing, typing, clicking, and more.
Transition updates or non-urgent updates switch the UI from one view to another.

Transition ensures that the user interface remains responsive even during a re-render. For example, you may have done this before. You click a button, and before the information is fully loaded, you change your mind and click on another button to do another task.

What did you notice? The action you took caused the user interface to freeze briefly. This happens when the state update is not set to a transition. Transition interrupts an ongoing render in favour of a more urgent one.

Updates are marked with the useTransition() hook. Here’s an example of how transition works, as adapted from the React blog.

function SlidesContainer() {
  const [isPending, startTransition] = useTransition();
  const [slide, setSlide] = useState('about');

  function selectSlide(nextSlide) {
    startTransition(() => {
      setSlide(nextSlide);
    });
  }
  // ...
}

Also, the React blog explains what isPending and do.

“The *isPending* flag that tells you whether there is a pending transition.”
“The *startTransition* function that lets you mark a state update as a transition”

The startTransition function can be used to start transitions whenever the useTransition() hook cannot be used. Here’s an example from the React blog.

import { startTransition } from 'react';

// Urgent: Show what was typed
setInputValue(input);

// Mark any state updates inside as transitions
startTransition(() => {
  // Transition: Show the results
  setSearchQuery(input);
});

You can learn more about transitions in the transition documentation.

Suspense on the Server

When rendering your client-side application, you first fetch the HTML of the page from the server and the required JavaScript resources necessary to run the page. However, if you’re faced with challenges such as a large JavaScript bundle size or a slow network connection, delays occur, preventing the user from effectively interacting with the page.

Server-side rendering (SSR) takes care of this and ensures the user experience is enjoyable.

Server rendering, also known as server-side rendering (SSR), is a web development technique where a web server processes a request for a web page and generates the initial HTML content. This HTML is sent to the user’s browser, which can then render the page faster since it already has some content to display.

This is done while JavaScript content is still loading, hence, the pages are static and will only become interactive after the necessary JavaScript contents have loaded.

Shaundai Person’s React Conf 2021 talk gives a detailed overview of client vs. server-side rendering.

Previously, in React, one slow component meant the entire page would also render slowly. There was no way you could tell React to defer the loading of a slow component. This caused bottlenecks in React apps.

In React 18, you can “suspend” slow parts or components of your app by wrapping them in the Suspense components. For example, you can show a loading state for a component that would take a bit of time to load.

As explained on the React blog, “suspense lets you declaratively specify the loading state for a part of the component tree if it’s not yet ready to be displayed”

When a component is “suspended”, it means it is not ready to load, so HTML is sent directly from the server to display on the page while the component gets ready to be displayed. The user is then able to see a skeleton of the page immediately before it gradually loads.

Since HTML is lightweight, it is displayed before JavaScript; hence, there will be HTML components on display while the JavaScript components are gradually loading, improving the user experience.

New Strict Mode Behaviours

In React 18, strict mode will simulate the mounting, unmounting, and remounting of components with a previous state. What does this mean? For example, when a user tabs away from a screen and back, the previous screen should be immediately seen. I’ll explain the process:

When the user gets to the screen at first, React mounts the component
When the user tabs away from the screen, React dismounts the component
When the user goes back to the screen, React mounts the component again.

This is done over and over again. Strict mode will make sure that components are not affected by being mounted and unmounted over and over again.

New Hooks

React 18 introduces new hooks, such as

You can read more about them.

How to Upgrade to React 18

To install React 18 and React DOM from npm, type this in your terminal:

npm install react react-dom

If you’re using yarn, type the following into your terminal:

yarn add react react-dom

Then, you’ll use createRoot instead of render.

In your index.js file, update ReactDOM.render to ReactDOM.createRoot to create a root and render your app using root.

In React 17, this was the format:

import ReactDOM from 'react-dom';
import App from 'App';

const container = document.getElementById('app');
// render app to ReactDOM directly
ReactDOM.render(<App />, container);

In React 18, this has been updated to:

import ReactDOM from 'react-dom';
import App from 'App';

const container = document.getElementById('app');
// create a root
const root = ReactDOM.createRoot(container);
//render app to root
root.render(<App />);

Your React app will continue to be recognized as version 17 until you apply the updates.

Conclusion

Whew! That was quite a lot, and so much more. These improvements and features in React bode well for developers and users alike. It ensures a smoother developer's experience and eliminates performance bottlenecks, leading to faster React applications.

The user experience has also been improved. No more looking at blank screens waiting for the components of a page to load (hehehe). There’s also improved interactivity and seamless running of tasks for the users. So, this is a win-win situation. The future of React looks very bright. Long may React continue!

Tailwind CSS vs. Styled-Components for Styling in React JS

Ojebiyi Fulness — Fri, 06 Oct 2023 07:45:54 +0000

Knowing each framework, their features, and the right one to choose for your React project

Have you ever visited a poorly designed website and wondered what you were doing there? I have, and I didn’t enjoy the experience. Those kinds of websites put you off.

This is why creating aesthetically pleasing web pages and applications is essential in web development for a good user experience. This leads to greater interactivity and engagement, hence more lead conversion.

CSS, or Cascading Style Sheets, is the main tool for styling web pages. We’ll consider the differences between two popular CSS libraries: Tailwind CSS and Styled Components. You’ll get to know the main features of each library and which one to choose for your project.

Table of content

What CSS libraries and frameworks are
What Tailwind CSS and Styled-Components are
Features of Tailwind CSS and Styled-Components
Which framework should you choose?

Prerequisites

Styled Components are mainly used in the React ecosystem, so you need to have knowledge of React to be able to use it
Tailwind does not require prior knowledge of React, JavaScript, or even CSS to be used to create custom components.
If you’re familiar with Bootstrap, you’ll be able to pick up Tailwind CSS relatively easily.
Tailwind CSS is categorized as a framework but is sometimes referred to as a library because it is different from other CSS frameworks. In this article, we’ll be referring to it as a framework.

What are CSS libraries and frameworks?

CSS libraries are collections of pre-written CSS styles and components that you can include in your project. They are modular, meaning you can pick and choose specific styles or components to use rather than adopting the entire framework.

CSS frameworks are comprehensive packages that include a set of predefined styles, layout systems, components, and often JavaScript functionality. They provide a structured and fixed way to build web interfaces.

Tailwind CSS and Styled-Components

Tailwind CSS is a utility-first CSS framework. It provides a set of pre-defined utility classes that you can apply directly to your HTML elements to style them. Tailwind CSS promotes a declarative approach to styling, where you describe the styles you want directly in your HTML markup.

Styled Components is a CSS-in-JS library that allows you to write your CSS styles using JavaScript within your React components. It supports a more component-focused approach to styling, where you create Styled Components as reusable building blocks for your User Interface (UI).

Features of Tailwind CSS and Styled Components

Here, we proceed to look at some features of these two wonderful styling tools.

Features of Tailwind CSS

You write styles in the HTML markup by applying classes to elements, such as shown below:

function MyComponent() {
  return (
    <div>
      <button type="button" className="text-white rounded-md 
          bg-orange-400 font-medium px-4 py-3 text-center cursor-pointer">
        Get started
      </button>
    </div>
  );
}

The code above specifies the button should have white text on an orange background with a normal font thickness, a padding of 16 pixels on the left and right axes, and 12 pixels on the top and bottom axes.

You can customize utility classes, colors, fonts, and more from the configuration file that comes with the Tailwind installation. You can extend or modify the default configuration to suit your project’s needs, as shown below.

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    extend: {
      screens: {
        'md': '950px',
      },
      colors: {
        'brown': '#fe9446',
        'bronze': '#98582a',
        'base': '#fff4f2',
        'origin': '#fb9333',
      },
      gridTemplateColumns: {
        'footer': '2fr repeat(2, 1.2fr) 1.5fr  2fr'
      }
    },
  },
}

Tailwind CSS primarily focuses on individual utility classes rather than creating reusable components.
Tailwind CSS helps developers create a consistent way to style elements, making it easy for them to work with pre-defined classes. This improves the developer experience.

Features of Styled Components

You write styles using JavaScript template literals within your React components; that is, you define a styled component and use it as a normal React component, as shown below.

import styled from 'styled-components';

const Button = styled.button`
  background-color: #fb923c; 
  color: white;
  border: none;
  border-radius: 0.25rem;
  font-weight: 500;
  padding: 0.75rem 1rem;
  text-align: center;
`;


 function App() {
   return (
     <div>
       <Button>Get started</Button>
     </div>
   );
 }

Styles are defined directly in the JavaScript files. You write the styles yourself from scratch.
Styled Components are designed to create reusable components that can be used throughout your application.
Styled Components offer a more dynamic and programmatic approach to styling, making it flexible and easy to retain control over the codebase.

The Right Framework to Choose

Now, a bit of the author’s story (haha). I started using styled components near the end of 2021 and throughout 2022 until March 2023.

I first discovered Tailwind CSS when a more experienced developer noticed that I was coding slowly. I decided to give it a try, and I haven’t regretted that decision. Tailwind CSS has significantly increased my coding speed. If a situation arises where Styled Components are needed, I wouldn’t hesitate to use them again. Also, Tailwind CSS provides better performance as compared to CSS-in-JS frameworks.

Despite its many advantages, Tailwind CSS can become cluttered due to the sheer number of classes it generates if not handled properly, which many developers don’t. I’ve encountered difficulties with this in the past, but I’m getting better at structuring it. On the other hand, Styled Components help maintain tidy project files and code, offering greater control over the overall structure when compared to Tailwind CSS.

Conclusion

As a final piece of advice, it is better to select a framework based on the type of project.

For small-scale projects or those that require speed, Tailwind CSS would be a better option. Personally, there’s just something exciting about crafting styles alongside the elements themselves.

For projects that would need a lot of maintenance and control from the developer, it is better to use Styled Components. It is also necessary in projects where you have a lot of dynamic rendering, nested styling, and reusable components.

Below are some resources that you may find useful:

https://tailwindcss.com/docs/installation

https://styled-components.com/docs

https://css-tricks.com/a-thorough-analysis-of-css-in-js/

https://medium.com/dailyjs/what-is-actually-css-in-js-f2f529a2757

https://www.dhiwise.com/post/styled-components-vs-tailwind-css-finding-the-perfect-style-for-your-react-project

5 Main Features of React JS That Developers Must Know

Ojebiyi Fulness — Thu, 05 Oct 2023 11:05:44 +0000

In the ever-evolving field of web development, it is essential to be ahead of the crowd. With rising user expectations and constantly advancing technology, developers need tools that empower them to create dynamic and responsive user interfaces effectively. Here is where React JS comes in.

What is React JS? React JS, or React, is an open-source JavaScript library developed and maintained by Facebook. It was designed with a singular purpose - to build user interfaces (UIs) that are both efficient and easy to develop and maintain.

In this article, we explore five main features of React JS that underpin its popularity and effectiveness and make it the most popular JavaScript library. Whether you’re a seasoned developer looking to expand your toolkit or someone just stepping into the field of front-end development, understanding what React brings to the table is pivotal.

Virtual DOM
JSX
Component-Based Structure
One-way Data Binding
Performance and Simplicity

1. Virtual DOM

The Document Object Model (DOM) is like a structured map of a web page. It is the interface in programming that allows programs (like web browsers) to understand, access, and update the content, structure, and style of a webpage. The Virtual DOM is the representation of the real DOM. When there are changes or modifications to the web app, the Virtual DOM is updated and checked for differences from the real DOM. If there are any, the DOM will update only the part that has changed, while leaving the unchanged part the same. This makes React very fast.

2. JSX

JSX is JavaScript Syntax Extension, or JavaScript XML. It is a syntax that allows the combination of HTML and JavaScript in coding. It enables developers to use HTML in JavaScript easily. It helps to convert HTML tags to elements in React. It is optional but very popular with developers. It is named with the extension .jsx. Below is an example of JSX syntax.

  const HeroSection = () => {
    const a = 25;
    const b = 75;

    return (
      <div>
        <h1>{ a + b }</h1>
      </div>
    );
  }

3. Component-Based Structure

React is built on the logic of components. It is all about components. React allows developers to split the User Interface (UI) into independent and reusable components. These components are like building blocks that can be assembled to create complex user interfaces. This promotes code reusability and maintainability. Components always start with capital letters.

4. One-way Data Binding

React logic flows in one direction. That’s how it was designed. This is called one-way data binding. The data flows from top to bottom only, i.e., from the parent elements to the child elements. Having data flow in one direction gives better control and increases efficiency because data is constrained in only one direction. This makes it easier to understand how data changes propagate through the application, making debugging and maintenance more straightforward.

5. Extensions

React supports server-side rendering and mobile app development. React uses extensions to aid application building, such as Redux, Flux, and React Native, and others. React Native makes it possible for React to be used in mobile app development. With React Native, you can use React concepts and components to build native mobile applications for iOS and Android platforms, sharing a significant amount of code between platforms.

These features are some of the key reasons why React.js is widely used in modern web development for creating dynamic and interactive user interfaces. Understanding how these features work will make a React developer stand out and have access to better opportunities.

Beginner’s Guide to Frontend Web Development — Part 3

Ojebiyi Fulness — Wed, 04 Oct 2023 08:17:28 +0000

Exploring the intricacies of JavaScript for interaction and dynamism

In the last part of this series on the introduction to front-end web development, we’ll look at a very fundamental tool, probably the most important if you aim to build interactive and engaging websites for users.

In this article, we will be introduced to JavaScript. In all your interactions with webpages, you must have heard of or come across JavaScript in use and probably wonder what it does. We’ll look at the intricacies of JavaScript in detail.

JavaScript: The Tool for Interaction and Dynamism
History of JavaScript
Adding JavaScript to HTML
JavaScript Syntax
JavaScript in use
JavaScript Frameworks
Conclusion

JavaScript: The Tool for Interaction and Dynamism

When you fill out and submit a form on a webpage, have you thought about what handles the form submission? Or when you want to switch between light and dark modes, do you ever wonder, “What makes this work?” These questions and more are answered by one word. JavaScript.

JavaScript is a scripting language that is used to make webpages “come alive”. It is used to improve a website’s functionality, making it more interactive and dynamic. JavaScript is the powerhouse that performs actions such as submitting a form and getting a response, displaying updates to content, basically, anything that makes a website more interesting and purposeful to interact with.

History of JavaScript

JavaScript was created in 1995 by Brendan Eich. It was initially developed for the Netscape Navigator, a popular web browser at the time. JavaScript was made an ECMA standard in 1997.

JavaScript is formally known as ECMAScript. The latest version of ECMAScript is ES6 (abbreviated). There have been further updates every year from 2016 to the current updated version of ES6, which is ES14, as of June 2023.

JavaScript and Java are two different languages. Though they have similar syntax, they are very different from one another in design and application.

Adding JavaScript to HTML

JavaScript can be incorporated into HTML texts using the script tag in either the head or body tags. It is bad practice to use the script tag at the bottom of the body tag.

JavaScript files must be saved in .js format to import them with the script tag to HTML, e.g. script.js, as shown below:

    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, 
        initial-scale=1.0">
        <title>Document</title>
        <link rel="stylesheet" href="style.css">
        <script src="script.js">
        </script>
      </head>
      <body>
      </body>
    </html>

JavaScript Syntax

JavaScript is a scripting language, therefore it is written differently from HTML and CSS.

JavaScript is case-sensitive; for example, frame is different from Frame

JavaScript doesn’t read any meaning to whitespace.
JavaScript defines two value types, which are literals and variables
The use of semicolons to terminate lines of code in JavaScript is not compulsory but is advisable.
JavaScript supports comments both on a single line and spanning several lines
JavaScript identifiers are characters used to identify a variable, function, or keyword. It can only start with an underscore, a dollar sign, or a letter (uppercase or lowercase).

JavaScript in Practice

Variable

A variable can be described as a store of data. It is the value that is assigned to an identifier. There are two ways to define a variable.

Using let : This allows you to assign a new value to an already-defined value
Using const : This defines a constant value. A new value can’t be assigned to it.

A variable can also be undeclared. These kinds of variables will be declared when they’re used. Demonstrating the use of variables in an external JavaScript file

The code on line 6 above targets a paragraph tag with the “output” id in the HTML document and displays the result there.

The result of the javascript code is shown below

Function

A function is a block of JavaScript code that is designed to perform a particular task. A function in practice will be demonstrated below.

    let a = 20;
    let b = 22;
    let c = a + b;

    function calculate() {
      // let a = 52;
      // let b = 76;
      sum = a + b;
      return sum;
    }

    document.getElementById('output').innerHTML = "The sum of both numbers is " + calculate();

This will give the result shown below:

Notice the commented-out part inside the function? If the comment slash is removed, the values of a and b inside the function will replace those declared outside the function, and the result will be 128 as shown below.

The values of a and b declared outside the function are called global variables, and they will be applied at every instance called in any function. You can override global variables if they are reassigned inside the function.

JavaScript Frameworks

JavaScript frameworks are libraries that are written in JavaScript code to provide an easier development process for software developers. Building coding projects with HTML, CSS, and vanilla JavaScript from scratch takes a lot of time to complete. It also involves writing a lot of code.

JavaScript frameworks help developers build complex apps faster and easier. Read more about frameworks here.

JavaScript frameworks are numerous, and examples include React, Angular, Vue, and Svelte, among others.

Learning a framework is a necessity as a frontend developer because a lot of companies require it and it helps in the faster and less strenuous building of projects.

For a deeper insight into JavaScript, the following platforms will be of use:

https://developer.mozilla.org/en-US/docs/Web/JavaScript

https://www.w3schools.com/js/default.asp

Conclusion

This guide has covered the basics of the tools needed to kick-start a career in front-end web development.

Frontend web development is a lucrative field with room for flexibility and upskilling. There is room to apply your creative potential in great working conditions. Moreover, having tech skills will ensure an individual is better placed for a future filled with technological innovations.

Having a deep understanding of how these different languages work will make you very valuable in the frontend development field, provide access to the best opportunities, and reward you financially. Cool, isn’t it?

Have an exciting and wonderful tech journey ahead!

https://developer.mozilla.org/en-US/docs/Learn

Beginner’s Guide to Frontend Web Development — Part 2

Ojebiyi Fulness — Tue, 03 Oct 2023 08:05:10 +0000

Exploring the role of Cascading Style Sheets (CSS) in creating stunning webpages

In the previous section of this guide, we talked about what frontend web development is all about and the tools to get you started in your web development journey. In this article, we will talk about the second tool you need, CSS.

What is CSS? Why do I need it? You may ask. Well, this is precisely what we will discuss in this article. Prepare your mind for an exciting journey. Whoohoo!

CSS: The Styling and Layout Tool
History of CSS
Adding CSS to HTML pages
CSS Syntax
CSS in practical application

CSS: The Styling and Layout Tool

Take a look at the webpage below.

Beautiful, right? Negative! This is the result of building our webpage with HTML only. Just imagine if all websites were designed with HTML only; then, we'd have a bunch of unattractive, clustered pieces of elements lumped together. This shows the need for CSS.

CSS is used to define how a webpage’s layout should look. It is used to add styling to an HTML document, instructing the web browser how to display HTML elements. CSS makes websites appealing to the eye, well-organized, and have a solid structure.

History of CSS

CSS is the abbreviation for Cascading Style Sheets. It was first introduced by Håkon Wium Lie in 1994. CSS 3, the current version, was released in 2005 with several updates.

There are different methods of styling web pages. They include:

Using the style tag in the head or body tag
Using an external stylesheet
Using inline styles.

The recommended method for styling is using an external stylesheet. It guarantees better code and leaner, uncluttered files.

Adding CSS to an HTML Document

To link a CSS file to HTML, the CSS file must first be saved in the .css format, e.g. style.css. A link to the CSS file is provided using the link element, which is a component of the metadata inside the head tag, and the href attribute, as shown below, to link to the file name.

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, 
      initial-scale=1.0">
      <title>Document</title>
      <link rel="stylesheet" href="style.css">
    </head>
    <body>

    </body>
    </html>

Now the HTML document can be styled. Hurray!

CSS Syntax

The format of writing CSS code is very different from that of HTML. CSS code is written in a selector-declaration format. The declaration comprises two parts: a property and a value. This is demonstrated below.

The background-color and text-color properties of the body selector are both set to a grey value in the example above. The biggest heading is set to red. As the stylesheet has been linked to the HTML file containing the heading examples, the changes will be reflected on the webpage, as seen below.

Easy.

Selectors are very powerful. A selector can be used to target all instances of a particular tag in HTML and give it the same formatting. For example in the code snippet below, there are three paragraph and div tags.

    <div>
      <p>This is the first paragraph</p>
    </div>
    <div>
      <p>This is the second paragraph</p>
    </div>
    <div>
      <p>This is the third paragraph</p>
    </div>

The reason for styling with CSS is to change the background colour of the div tags to gray and the text colour of the paragraph tag to blue.

    div {
      background-color: gray;
    }

    p {
      color: blue;
    }

The result in the browser is shown below:

These styles will be used for all div and p tags in the document until a higher hierarchy of specificity overrides them.

Specificity is likened to a kind of hierarchy for which style will be applied to an element when multiple rules target it.

CSS supports shorthand forms of properties. A shorthand form of a property allows for the application of different properties under that property at the same time.

CSS in Practice

In this section, some examples of CSS styling will be shown

CSS Font and Typography

Font deals with the specific styling and appropriate sizing of text. There are several properties for styling text with font. They are font-family, font-weight, font-stretch, font-style, font-size

An example of these in use is shown below.

    p {
      color: blue;
      font-family: 'Courier New', Courier, monospace;
      font-weight: 500;
      font-stretch: extra-condensed;
      font-style: italic;
      font-size: 24px;
    }

Applying these styles to the p tag from the previous example will give the result below:

Apart from fonts, several properties can be used to style text. Some of them include text-decoration, text-align, text-transform,letter-spacing, text-shadow.

CSS Box Model

In CSS, every element is in a box form. The box model deals with sizing elements based on CSS properties. A visualization of the box model as shown by Chrome is shown below.

There are four parts to the box model, moving from the outside to the inner part.

The area of the content: The area outside and around the margin
Margin: This is a CSS property used to create space around an element
Border: This is a CSS property used to draw a defined perimeter around elements.
Padding: This is a CSS property used to create space in the inner part of an element

Using the paragraph example from above, the way these properties work will be shown below:

        div {
          background-color: gray;
          padding: 4px;
          margin: 10px;
          width: 500px;
          border: 2px solid yellow;
        }

        p {
          color: blue;
          padding: 4px;
          margin: 10px;
          border: 2px solid red;
        }

Note: The px short form of pixel, is a unit used in measurement in CSS and is the most commonly used. It works based on some convention that makes it consistent across several devices. There are some other units of measurement, such as percentage, relative units such as em, rem, and viewport units such as vh, vw, among others.

The above code will give this result in the browser.

In the snippet that contains the CSS code above,

The padding of 4px for both elements is used to create space between the element and the border.
The margin of 10px for both elements is used to create space around the outer part of the border.
The border with a thick, solid line of 2px is used to separate the padding and the margin.

For more information on CSS and an in-depth study, The following links will be of tremendous assistance in teaching more about the basic and advanced components of CSS.

https://developer.mozilla.org/en-US/docs/Web/CSS

https://www.w3schools.com/css/default.asp

Beginner’s Guide to Frontend Web Development — Part 1

Ojebiyi Fulness — Sun, 01 Oct 2023 23:00:00 +0000

Web development is the design and development of web pages.

A webpage is a visual representation of a document written in HTML on a web browser. It is the part of the website that users can view and interact with, such as submitting a form, checking an image gallery, or using a social media platform. This is also called the frontend.

A front-end developer’s job is to build the user-interactive elements of a website or an application. This article will serve as a helpful guide for anyone interested in becoming a fantastic web developer. Let us start this adventure together.

This guide is in three parts, the first of which will be considered here.

The following sections will be considered in this guide.

HTML: The Backbone of a Webpage
History of HTML
HTML Syntax
HTML Tags
HTML in use
Conclusion

HTML: The Backbone of a Webpage

Imagine the human body: smooth and beautiful skin with all the muscles and flesh in perfect condition… there’s just one issue: there are no bones. Even though the external components are perfect, there’s no structure - which is the skeleton - to hold them in place.

As the skeleton is to the human body, so is HTML to a webpage. HTML is the building block of a webpage. It is the language in which documents are written and determines how they appear on a website.

History of HTML

HTML is fully written as HyperText Markup Language. It was created by Tim Berners-Lee in 1993.

Markup language refers to a system of encoded texts having a set of symbols inserted in a text document to control its structure, formatting, or the relationship between its parts.

HTML Syntax

In programming, syntax is a set of guidelines that specify how code in a language should be written.

HTML code is written in tags. When the browser serves an HTML page, it interprets the tags’ functions and renders the elements according to the rules that define their visual appearance.

HTML code consists of three parts. An HTML element is the sum of these parts. The parts of an element include:

Opening Tag: This defines where the code starts. It is wrapped inside the open and close angle brackets <>
Text: This consists of two parts. The first is the text that defines how the tag will be displayed on a webpage. The second is the information that the tag will display.
Closing Tag: This defines where the code ends. It has the same structure as the closing tag but with the addition of a forward slash </>

Using this structure to display paragraph text, we have:

<p>I identify as a paragraph, amigo!</p>

Nested elements

These are elements that can contain other elements. Nesting is a characteristic common to all HTML documents. An example is shown below:

<body>
  <div>
    <section>
      <h1>H1 is the largest heading</h1>
      <p>Hello! I'm the first paragraph</p>
      <p>Hello! I'm the second paragraph</p>
    </section>
  </div>
</body>

A few key points to remember when writing HTML code include:

All HTML documents should always end with a .html extension
All HTML documents must start with a <!DOCTYPE html> declaration. This makes the browser identify it as an HTML document.
Nested elements should be indented with 2 or 4 characters, as shown in the example above. Indentation is a space that is put at the beginning of a line of code.
HTML tags are not case-sensitive; that is, they can be written in uppercase or lowercase format.

HTML Tags

Categories of HTML tags include:

a. Heading Tags

b. Body Tags

Heading Tags

These tags define the characteristics of an HTML document. These tags include:

The <head> tag
This is a container for the metadata of a page. Metadata is information about the data in a web document. The head tag contains some tags, such as:

The <script> tag This tag is used to write JavaScript in an HTML document, as shown below:

<head>
  <script type="text/javascript">
    let one = 1;
    let three = 3;
    let minus = one - three;
  </script>
</head>

The <style> tag This tag is used to write CSS styles in an HTML document, as shown below:

<style>
  h1 {
    color: red;
  }
</style>

The <meta> tag This tag is used to define the page’s metadata, as shown below:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,
    initial-scale=1.0">
    <title>First HTML Document</title>
  </head>
  <body>
  </body>
</html>

Body Tags

These tags display the part of the webpage that the user can see.

The <body> tag

It contains all the tags that define a page’s content. An HTML document can only contain one body tag.

<!DOCTYPE html>
<html lang="en">
  <head>
  </head>
  <body>
  </body>
</html>

The two categories of elements in the body tag are:

a. Block elements

These elements take up the full width of the line they are written on. They do not permit any other element to be placed beside them. Think of it as a president’s podium. No one shares it with him/her. Examples include:

<figcaption> <header> <section> <article> <div> <figure> <hr> 
<table> <aside> <footer> <li> <output> <blockquote> <form> 
<main> <p> <ul> <fieldset> <h1>-<h6> <nav> <pre> <video>

An example of block elements in practice will be shown using the heading tags.

The heading tags are represented by the <h1> to <h6> tags. These tags are ranked from most important to least important.

<div>
  <h1>Largest Heading</h1>
  <h2>Second Largest Heading</h2>
  <h3>Third Largest Heading</h3>
  <h4>Fourth Largest Heading</h4>
  <h5>Fifth Largest Heading</h5>
  <h6>Smallest Heading</h6>
</div>

Here’s how the headings are displayed in the browser:

To demonstrate why these are block elements, rearranging the order of the headings as shown below gives the same result

<div>
  <h1>Largest Heading</h1> <h2>Second Largest Heading</h2> 
  <h3>Third Largest Heading</h3> <h4>Fourth Largest 
  Heading</h4>
  <h5>Fifth Largest Heading</h5> <h6>Smallest Heading</h6>
</div>

b. Inline elements

These elements can stay next to each other on a line, hence the name inline elements. They are way more accommodating compared to body tags (hehehe!). Examples include the following:

<a> <strong> <abbr> <br> <em> <label> <script> <sub> <var> 
<acronym> <button> <i> <map> <select> <sup> <b> <cite> <img> 
<object> <small> <textarea> <input> <q> <span> <time>

The button tag is used to define a button that can be clicked on in the webpage. It is used to show an example of inline elements in practice below:

<div>
  <button>Hello! It's me</button>
  <button>I'm another button</button>
  <button>Another one!</button>  
</div>

This will be displayed in the browser as shown below:

The buttons remain on the same line despite the separate lines in the code. A feature of inline elements.

HTML Attributes

These snippets provide more information about HTML documents. They are usually defined in the opening tag and come in key/value pairs. The syntax is key=”value”.

The two most common attributes are:

a. Class attribute

This defines one or several class names for an HTML element. There can be multiple class names for an element, separated by a space.

b. Id attribute

This defines a special identifier for a particular HTML element. There can only be one id used for each element, and it cannot be duplicated.

Furthermore, HTML has various elements for structuring and organizing the webpage, such as:

Text-formatting elements
Quotation elements
List elements
Container elements
Page Structuring elements
Form Elements
Link elements
Image elements
Multimedia tags
Iframes

For more information on these elements and a more in-depth look into HTML, check out these links:

https://www.w3schools.com/html/default.asp

https://developer.mozilla.org/en-US/docs/Web/HTML

Conclusion

This article has covered the basics of HTML, which is one of the tools needed to kickstart a career in front-end web development.

Learning HTML is the first step on your way to becoming an awesome front-end web developer.

Do well to check out the second part of this guide, which gives a comprehensive introduction to CSS. See ya!

DEV Community: Ojebiyi Fulness

React 18: The Features and The Future

React 18: The Features and The Future

Table of Contents

What is React?

React v18.0

Concurrent React

Automatic Batching

Transitions

Suspense on the Server

New Strict Mode Behaviours

New Hooks

How to Upgrade to React 18

Conclusion

Tailwind CSS vs. Styled-Components for Styling in React JS

Table of content

Prerequisites

What are CSS libraries and frameworks?

Tailwind CSS and Styled-Components

Features of Tailwind CSS and Styled Components

Features of Tailwind CSS

Features of Styled Components

The Right Framework to Choose

Conclusion

5 Main Features of React JS That Developers Must Know

Table of Contents

1. Virtual DOM

2. JSX

3. Component-Based Structure

4. One-way Data Binding

5. Extensions

Beginner’s Guide to Frontend Web Development — Part 3

Table of Contents

JavaScript: The Tool for Interaction and Dynamism

History of JavaScript

Adding JavaScript to HTML

JavaScript Syntax

JavaScript in Practice

Variable

Function

JavaScript Frameworks

Conclusion

Beginner’s Guide to Frontend Web Development — Part 2

Table of contents

CSS: The Styling and Layout Tool

History of CSS

Adding CSS to an HTML Document

CSS Syntax

CSS in Practice

CSS Font and Typography

CSS Box Model

Beginner’s Guide to Frontend Web Development — Part 1

Table of Contents

HTML: The Backbone of a Webpage

History of HTML

HTML Syntax

Nested elements

HTML Tags

Heading Tags

Body Tags

HTML Attributes

Conclusion