DEV Community: Mary Ojo

10 useful CSS tools for Developers

Mary Ojo — Sun, 02 Feb 2025 18:16:14 +0000

CSS layout generator: https://layout.bradwoods.io/

Useful for : Anyone who wants to level up their CSS layout skills (flexbox and grids)

This website is all about helping developers get better at CSS layouts in a fun, hands-on way. Its like a playground where you can practice using CSS Grid and Flexbox to create cool, responsive layouts. You write code, see the results instantly, and tackle challenges that mimic real-world layout problems and whether youre just starting out or brushing up on your skills, its a great way to learn by doing.

2. CSS Clip path generator: https://bennettfeely.com/clippy/

Useful for : Getting quick and clean clip-path CSS code.

This website is for creating cool shapes on the web. Made by Bennett Feely , this tool lets you easily generate CSS clip-path code for all kinds of shapespolygons, circles, stars, and more. Instead of struggling with complex code, you can just tweak a few settings, copy the code, and voil! Youve got a unique shape ready to use in your design.

3. CSS Backgrounds https://superdesigner.co/tools/css-backgrounds

Useful for : Adding quick background patterns to the UI.

This website contains a collection of over 100 free pattern backgrounds created using CSS, these patterns can be used to add textures to hero sections, as background layers/overlays, used in the footer design or hover effects for creating beautiful CSS backgrounds. Its part of the Super Designer toolkit and makes it really easy to customize the patterns and texturesall with just a few clicks. You can play around with colors, and styles to create something truly unique, and you get the clean CSS code ready to use in your project.

4. Grid garden: https://cssgridgarden.com/

Useful for : Beginners who want to learn more about CSS Grids

This website is a playful and interactive way to learn CSS Grid. Created by Thomas Park , it turns CSS grids into a game where you grow a garden by the code. Each level introduces new concepts, like aligning plants or watering specific plots, making it a fun and engaging way to get comfortable with CSS Grid.

5. Typescale: https://typescale.com/

Useful for : Designers and developers who want to ensure their typography is balanced and professional.

This website is a great tool for creating balanced and visually appealing typography scales for your projects. It allows you to experiment with different font sizes, ratios, and scales (like the golden ratio, perfect fifth, or modular scale) to find the perfect typography hierarchy. You can preview how your text will look, adjust settings, and get the corresponding CSS code to implement it seamlessly into your website.

6. Keyframes: https://keyframes.app/animate

Useful for : Creating CSS animations to add to your websites

This website is like a shortcut for creating smooth CSS animations. Its super easy to usejust tweak settings like timing, easing, and movement, and it spits out clean CSS code for you. Whether youre adding a subtle hover effect or a full-blown animation, this tool makes it really easy.

7. Haikei App: https://haikei.app/

Useful for : Modifying unique patterns & visuals to add to the user interface.

This is a very useful tool for generating unique, customizable SVG shapes, blobs, waves, and other design elements. Its perfect for adding visual flair to your projects. With a simple interface, you can tweak colors, shapes, and patterns, and then download the assets as SVG or PNG files. Whether you need a background, a divider, or a decorative element, Haikei makes it quick and easy to create something eye-catching.

8. CSS loaders: https://css-loaders.com/

Useful for : Getting simple loading animations.

This is a handy resource for finding and customizing simple, ready-to-use CSS loading animations. It offers a wide variety of pre-built loaders, from simple spinners to more complex animations, all made with pure CSS. You can preview the animations, tweak the code, and easily copy it into your project to keep users engaged while content loads.

9. Pure CSS Icons: https://css.gg/

Useful for : Adding scalable icons to projects without the hassle of managing image files or external libraries. Its perfect for anyone looking for a lightweight, customizable icon solution.

This is a minimalist icon library built entirely with CSS. It offers over 700 customizable, open-source icons that are lightweight and easy to use in your projects. Each icon is designed with pure CSS, meaning no images or external dependencies are required. You can easily copy the code, adjust the size and color, and integrate the icons seamlessly into your website or app.

10. CSS filters: https://www.cssfilters.co/

Useful for : Applying and testing cool effects to images using CSS filters.

This is a visual playground for experimenting with CSS filter effects. It lets you apply and customize filters like blur, grayscale, brightness, and contrast directly on an image, showing the results in real time. Once you've tweaked the effects to your liking, you can grab the CSS code and use it in your own projects. Its a simple and fun way to add creative touches to your images without needing any design software.

Thanks for reading!

I hope you found this list helpful! You can bookmark and share with others. If you have any other CSS tools you consistently use, you can add it in the comments below!

Overriding & Extending Global styles in Chakra UI

Mary Ojo — Fri, 28 Apr 2023 09:44:54 +0000

What is Chakra UI

Chakra UI is an open-source library of pre-built user interface components that simplifies web development for developers by allowing them to create functional websites quickly and easily without writing custom CSS or HTML code. These components, such as buttons, forms, and modals, are customizable and follow accessibility, usability, and responsive design best practices, making them user-friendly and accessible.

Chakra UI works well with popular front-end frameworks such as React and Next.js, but it can also be integrated with other tools and libraries. Although it provides several React-specific features, it is still built on top of CSS and HTML, allowing its CSS styles and components to be used with non-React web frameworks.

However, some of Chakra UI's features may not work optimally with non-React web frameworks. For example, its responsive design system relies on React's useState hook to detect screen size, so it may not work as expected without React. Additionally, Chakra UI's theming system relies on emotion, a CSS-in-JS library, so it may not work as expected.

Benefits of Chakra UI

Theming system: With ChakraUI, you can easily customize the look and feel of your application. This means you can quickly and easily change the colour scheme, typography, and other design elements of your site to suit your style guide without having to rewrite any code.
Accessibility: Chakra UI is designed with accessibility in mind, and it provides several accessibility features out of the box. For example, all components have proper aria attributes, the keyboard navigation is supported, and the colour contrast ratios comply with WCAG 2.1 guidelines. This ensures that websites built using Chakra UI are user-friendly and accessible to everyone.
Use of best practices: Chakra UI is designed to follow best practices in accessibility, usability, and responsive design.
Performance: Best practices integrated into this library ensure your application runs quickly and efficiently. Chakra UI uses a modern and lightweight design system based on styled-components. This allows the library to avoid heavy dependencies and ensures the CSS code is optimized for performance.
Extensive features: Lazy loading and code splitting are part of the unique features ChakraUI gives developers access to. These features help to reduce the amount of code that needs to be loaded and executed by the browser, which can significantly improve page load times.

Global Styles in ChakraUI

Since ChakraUI is built with a theming system, default styling exists for all components and elements in the library. This can help ensure consistency in the appearance and behaviour of your UI components.

This tutorial will guide you through the process of modifying the default ChakraUI styling of any React application utilising this library by extending or overriding the global styles provided.

How to modify Global Styles in Chakra UI

The Project

To demonstrate how to modify ChakraUI, I'll be building a simple one-page website containing an Order summary component as shown in the image below.

Setting up ChakraUI

In React.js, there are two ways to install ChakraUI:

a. In a new folder:

Simply run the following command in terminal

npx create-react-app <APPNAME> --template @chakra-ui

b. Or, in a newly installed create-react-app:

Install react app
Inside the project directory, run the following in the terminal
Setup Provider: You need to set up the ChakraProvider at the root of your application. This should be in your index.js file

Using ChakraUI's default styling

Setup the project and developed using CharaUI's default styling and this is what the codebase looks like https://github.com/maryojo/order-summary-chakra-tutorial/blob/d0a00421de81a43760e93c0ba547d033c1adf658/src/App.js
Result: https://644b7458337d8467791f868c--lambent-llama-1b74cc.netlify.app/

Modifying global styles in ChakraUI

Theming in Chakra UI follows the Styled System Theme Specification approach, where a theme object defines the applications colour palette, font, breakpoints, spacing, and more.

To modify the existing codebase to suit the application's theme, we'll be overriding the default font family and colours of some components

Create a file named Theme.js in the src folder
Import extendTheme module in Theme.js file
Create a theme object which would contain the formatted styles as shown below:
Export theme
Call the theme as a prop in ChakraProvider in the index.js file

Final result

Any more custom styling could be added to the Theme.js file in the format shown. ChakraUI's styling could also be used to create custom styles for components.

Code: https://github.com/maryojo/order-summary-chakra-tutorial

Live site: https://lambent-llama-1b74cc.netlify.app/

Further steps

Read more about ChakraUI's global styles from the documentation

Web accessibility: Semantics

Mary Ojo — Sat, 22 Apr 2023 11:23:06 +0000

Introduction

Accessibility matters even on the web!

The goal of web accessibility is to ensure that everyone has equal access to information, services, and a good user experience irrespective of their abilities or disabilities. Web accessibility refers to measures taken to ensure that all individuals inclusive of those with disabilities can access and use websites and digital content with ease. To achieve this, websites should be created in a way that is perceivable, operable, understandable, and robust, providing access for everyone. This approach fosters inclusivity and equal opportunities for all users.

Semantics

The word 'semantic' means the study of the meaning of language 😵. It helps to ensure that communication is clear and accurate by providing context and meaning to language. In the same vein, semantic HTML is the use of HTML markup in a way that accurately conveys the meaning and purpose of the content on a web page. Semantic HTML is a backbone for web accessibility. It is how accessibility is incorporated into websites.

Why do we need Semantic web content?

It adds meaning to your HTML content, which lets web browsers, search engines, screen readers, RSS readers, and ultimately users understand it and easily navigate and interact.
It improves SEO. Semantic HTML makes it easier for search engines to understand the flow and content of a page. This makes your website easier to discover.
Code written in semantic HTML makes it easier for other developers to maintain and update.

Using Semantic HTML

There are 2 major ways to give HTML content more meaning.

### The proper use of HTML tags

The proper use of HTML tags is crucial for providing structure and meaning to web content, making it easily understandable to both humans and machines. It is essential to use HTML tags in a semantically correct manner, where they accurately reflect the content and purpose of the element they are applied to.

For instance, it is semantically correct to use the <h1> tag to mark up the main heading of a web page. In contrast, using a <div> tag with a large font size is not semantically correct and should be avoided.

By using HTML tags correctly, web content becomes more accessible to users with disabilities. An example is using the <img> tag to include alternative text descriptions for images helps users with visual impairments understand the content of the image. Similarly, using the <label> tag with form elements such as text inputs and checkboxes makes it easier for screen reader users to understand the purpose of the form element and how to interact with it.

In addition to the <h1>, <img>, and <label> tags, several other semantic HTML tags are commonly used to provide structure and meaning to web content.

The <nav> tag is used to mark up the navigation section of a web page, while the <article> tag is used to define a self-contained piece of content, such as a blog post or news article. The <header> and <footer> tags are used to define the header and footer sections of a web page, respectively. The <main> tag is used to define the main content of a web page, while the <aside> tag is used to define content that is tangentially related to the main content, such as a sidebar or a call-to-action section.

Using these tags correctly helps to make web content more accessible and understandable for all users, including those with disabilities. A comprehensive list of semantic HTML tags and their uses can be found on the MDN website, which provides a reference for web developers to follow when creating accessible and semantically correct web content.

### ARIA attributes

ARIA stands for Accessible Rich Internet Applications. These attributes are a set of HTML attributes used to define accessibility features for web content. Assistive technologies such as screen readers use the additional information provided by ARIA attributes. ARIA attributes can be used along with semantic HTML tags or whenever semantic HTML cannot be used. ARIA attributes can be used to provide additional information about the elements on a web page, specifically in four ways:

- Roles : ARIA roles define the type of element and its purpose. For example, an element can have a role="button" to indicate that it is a clickable button.

This webpage provides a list of all ARIA roles, properties, states and labels, which have been defined by W3C (the organization that develops web standards).

Example showing the use of ARIA attributes

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>About Us</title>
</head>
<body>

  <div>
    <div role="banner">
      <h1>About Us</h1>
      <nav role="navigation">
        <ul role="menu">
          <li role="menuitem"><a href="/" role="link">Home</a></li>
          <li role="menuitem" aria-current="page"><a href="/about" role="link">About</a></li>
          <li role="menuitem"><a href="/contact" role="link">Contact Us</a></li>
        </ul>
      </nav>
    </div>
  </div>

  <main>
    <div>
      <div role="region">
        <h2>Our Mission</h2>
        <p role="paragraph">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam auctor nisl eget augue laoreet vestibulum. Sed sit amet orci bibendum, tincidunt ex ac, euismod velit. </p>
      </div>
    </div>
  </main>

</body>
</html>

Testing web semantics using accessibility tools and resources

There are many tools and resources which range from simple web browser extensions to accessibility testing suites that help developers create semantic and accessible web content for all users.

Tools

HTML validators:
Screen reader emulators:
Accessibility testing tools:

Resources

In addition to tools, there are also many online resources available.

The MDN doc mentioned above.
The Web Content Accessibility Guidelines (WCAG) by the World Wide Web Consortium (W3C).
The ARIA Authoring Practices Guide, which guides on how to use ARIA attributes to improve the accessibility of web content.
The HTML Living Standard

Conclusion

Web accessibility is a critical aspect of development that ensures everyone can access and use digital content. Semantic HTML is one of the fundamental building blocks of web accessibility, as it provides structure and meaning to web content. Using HTML tags in a semantically correct way is important because it helps both humans and machines understand the purpose and function of different elements on a web page. In addition to using semantic HTML tags, developers can utilize ARIA attributes to further enhance web accessibility. These attributes can define roles, states, properties, and labels for elements on a web page, making it easier for users with disabilities to interact with web content.

To create more accessible web content, developers and designers can use a variety of tools and resources available online. By prioritizing web accessibility in their development or design practices, they can help ensure that everyone has equal access to digital content.

Create an image analysis app using Azure Computer Vision with React App

Mary Ojo — Thu, 18 Aug 2022 18:38:09 +0000

Introduction

In this tutorial, I will be creating a simple image recognition app in order to explain how to integrate Azure Computer Vision into client-side applications. You could also adapt the steps here to build similar applications using other services in Azure Computer Vision.

Prerequisites: Knowledge of React.js, An Azure account (you can get it free here), Github, Hosting service e.g. Netlify

Links: Code Live Site

Steps:

Step 1. Create and setup React App, then install dependencies

Start by creating the react project:

npx create-react-app <APP_NAME>
cd <APP_NAME>

Delete unused default files in boilerplate e.g. App.test.js, App.css
Install Azure Computer Vision & MS Rest Azure npm package

npm i @azure/ms-rest-azure-js @azure/cognitiveservices-computervision

Step 2. Setup resources on Azure

Log in to the Azure Portal
Create a new Computer Vision resource in Azure
Fill out the form with the required information
Click on 'Review+Create'
The screen below shows after the resource has been deployed
Click on manage keys to copy the API key and endpoint

Step 3. Add Azure details to the local React App

In the react app root folder, create a new file called .env to store Azure access information in your local environment i.e. <APP_NAME>/.env
Open the .gitignore file and add .env to the list
Open the .env file and save the API key and endpoint here

// <APP_NAME>/.env
REACT_APP_apiKey = <YOUR_API_KEY>
REACT_APP_endPoint = <YOUR_ENDPOINT>

In the terminal, run the command npm start to view the app in your browser

Step 4. Creating the Azure Vision Component

Create a new folder called components in ./src
Create a new file called AzureVisionService.js
In the new file, copy and paste the code below, it contains information for requesting from the API. The documentation to better understand this part of the code is here. The describeImage method used is one of the available Azure Vision API methods. It describes an image with complete English sentences. Another similar method is the analyzeImage method which extracts a rich set of visual features based on the image content.

// ./scr/components/AzureVisionService

// Importing the Azure SDK client libraries
import { ComputerVisionClient } from '@azure/cognitiveservices-computervision';
import { ApiKeyCredentials } from '@azure/ms-rest-js';

// Authentication requirements
const key = process.env.REACT_APP_apiKey;
const endpoint = process.env.REACT_APP_endPoint;

// Cognitive service features
const options = {
    maxCandidates: 5,
    language: "en"
  };

// Describe Image from URL
export const computerVision = async (url) => {

    // authenticate to Azure service
    const computerVisionClient = new ComputerVisionClient(
        new ApiKeyCredentials({ inHeader: { 'Ocp-Apim-Subscription-Key': key } }), endpoint);

    // describe image using the describeImage method
    const analysis = await computerVisionClient.describeImage(url, options)
    .then((result) => {
        console.log("The result is:");
        console.log(result);
        return { "URL": url, ...result};
      })
      .catch((err) => {
        console.log("An error occurred:");
        console.error(err);
        alert(err + "Upload an image with a smaller size");
      });

    // all information about image
    console.log("This is:" +analysis);
    if(analysis === undefined){
        return "There is something wrong with the image"
    }
    return { "URL": url, ...analysis};
}

Step 5: Connect the AzureVision Component with the rest of the app.

Import the required functions from the AzureVIsion Component into App.js

// ./src/App.js
import React, { useState } from 'react';
import { computerVision } from './components/AzureVisionService';

function App() {
  const [file, setFile] = useState(null);
  const [analysis, setAnalysis] = useState(null);
  const [processing, setProcessing] = useState(false);

  const handleChange = (e) => {
    setFile(e.target.value)
  }
  const onFileUrlEntered = () => {

    // hold UI
    setProcessing(true);
    setAnalysis(null);

    computerVision(file).then((item) => {

      // reset state/form
      setAnalysis(item);
      setFile("");
      setProcessing(false);
    });

  };

  // Display JSON data in readable format
  const PrettyPrintJson = (data) => {
    return (<div><pre>{JSON.stringify(data, null, 2)}</pre></div>);
  }

  const DisplayResults = () => {
    return (
      <div>
        <h2>Computer Vision Analysis</h2>
        <div><img src={analysis.URL} height="200" border="1" alt={(analysis.description && analysis.description.captions && analysis.description.captions[0].text ? analysis.description.captions[0].text : "can't find caption")} /></div>
        {PrettyPrintJson(analysis)}
      </div>
    )
  };

  //Describe image
  const Describe = () => {
    return (
    <div>
      <h1>Describe image</h1>
      {!processing &&
        <div>
          <div>
            <label>URL</label>
            <input type="text" placeholder="Enter an image URL" size="50" onChange={handleChange}></input>
          <button onClick={onFileUrlEntered}>Describe</button>
          </div>
        </div>
      }
      {processing && <div>Processing...</div>}
      <hr />
      {analysis && DisplayResults()}
      </div>
    )
  }

  return (
    <div>
      <Describe/>
    </div>

  );
}

export default App;

Step 6: Hosting your web app

You could use any preferred hosting service like Azure Static Web Apps, Netlify, Vercel, Firebase or Heroku. For this tutorial, I'll make use of Netlify. One important thing to note is that whichever hosting platform you use, remember to add the REACT_APP_apiKey and the REACT_APP_endPoint to the host environment variables.

The first step here is to push the local react app to Github. Create a new empty repository in Github, you should get the screen shown below
In your local react app folder, open a new terminal. Then run the following commands

// In bash terminal
git init
git add .
git commit -m "first commit"
git branch -M main
git remote add origin https://github.com/<USERNAME>/<REPO_NAME>.git
git push -u origin main

Your code is now pushed to Github. Next, open your hosting website and import the existing project from Github.
In the build and deploy setup interface, click on 'Advanced Settings' then 'Add New Variable' to store the secret keys
Then deploy your site

Your site is deployed!!

References:

An Easy Way to Center a DIV both Vertically and Horizontally

Mary Ojo — Fri, 13 Nov 2020 23:52:43 +0000

This is a common problem that beginners face which seems to have no particular solution because there are many ways to achieve this. For almost every project I did, when starting out, I was searching the internet whenever I wanted to centre a div both horizontally and/or vertically. I came across one really easy way to achieve this while I was doing an online course, and I have since decided to stick to this method(using the flexbox) except in distinct cases.

In this article, I would describe how a div which is on a page, inside another element or div can be:

Centred vertically
Centered horizontally
Centred both vertically and horizontally

Centering a div vertically

To center a div vertically, you do this:

<!-- I want to center the div with a class of shape-->
<html>
  <head>
        <style>
           .shape{
                 width: 100px;
                 height: 100px;
                 background: green;
            }
        </style>
  </head>
  <body class="container"><!--This is the parent element-->
            <div class="shape"></div><!-- This is the div to center-->
  </body>
</html>

The code above gives this as an output:

From the image above, we see that the 'shape' div is not centered vertically, to achieve this:

Add 'display: flex' and
Add 'align-items: center' to the parent element which is the '.container' , as shown below:

  <head>
        <style>
           .shape{
              background: green;
            }
           .container{
                  display: flex;
                  align-items: center;
             } 
         /* The properties are added to the 'container' parent element */
        </style>
  </head>
  <body class="container"><!--This is the parent element-->
            <div class="shape"></div><!-- This is the div to center-->
  </body>

This is the output:

The 'shape' div has been centered vertically. Next, we horizontally center the div.

Centering the div horizontally

We follow the same steps above to horizontally center the div except that we now use 'justify-content: center' instead of 'align-items: center'

Adding the 'display: flex' and
Adding 'justify-content: center' to the CSS properties of the parent element which is '.container' here.

This is shown in the code below:

  <head>
        <style>
           .shape{
              background: green;
            }
           .container{
                  display: flex;
                  justify-content: center;
             } 
         /* The properties are added to the 'container' parent element */
        </style>
  </head>
  <body class="container"><!--This is the parent element-->
            <div class="shape"></div><!-- This is the div to center-->
  </body>

The output below shows a div which has been centered horizontally:

Next, we center the div both horizontally and vertically

Centering the div both horizontally and vertically

This is a combination of the two initial steps, we achieve this by:

Adding the 'display: flex'
Adding the 'align-items: center'
Adding the 'justify-content: center'

This is shown below:

  <head>
        <style>
           .shape{
              background: green;
            }
           .container{
                  display: flex;
                  align-items: center;
                  justify-content: center;
             } 
         /* The properties are added to the 'container' parent element */
        </style>
  </head>
  <body class="container"><!--This is the parent element-->
            <div class="shape"></div><!-- This is the div to center-->
  </body>

The output is shown here:

We see that the div is now centered both vertically and horizontally.

Thanks for reading this! I hope it was really helpful, I would love to hear your comments.