Envato Tuts+ Code

How to create an SVG viewer in HTML, CSS, and JavaScript

noemail@noemail.org (Esther Vaati) — Sun, 15 Jun 2025 19:34:15 GMT

Our SVG viewer will have the following features:

An editor that allows us to write, paste, and edit SVG code
A validation mechanism that checks if the SVG Code is valid
A preview area where we’ll see the SVG in real-time
An export feature that will allow us to export the SVG

So, by the end of this tutorial, we’ll have something like this:

The SVG editor will have a text area to add, edit, or paste the SVG code.

<div class="editor">
   <div class="editor-header">SVG Code Editor</div>
   <textarea
      id="svgInput"
      placeholder="Paste your SVG code here and watch the magic happen..."
      ></textarea>
</div>

The preview area will have a preview container where the current SVG code will be injected for preview.

<div class="preview">
   <div class="preview-header">SVG Preview</div>
   <div class="preview-content">
      <div id="previewContainer" class="preview-container"></div>
   </div>
</div>

HTML Markup

Okay, let’s start with the building blocks. The HTML markup will look like this:

<div class="main">
  <header>
    <h1>SVG Preview Tool</h1>
    <p>Edit, preview, and export clean, scalable vector art</p>
  </header>
  <div class="container">
    <div class="editor">
      <div class="editor-header">SVG Code Editor</div>
      
      <textarea
        id="svgInput"
        placeholder="Paste your SVG code here and watch the magic happen..."
      ></textarea>
      
    </div>
    <div class="preview">
      <div class="preview-header">SVG Preview</div>
      <div class="preview-content">
        <div id="previewContainer" class="preview-container"></div>
      </div>
    </div>
  </div>

  <button id="exportBtn">Export SVG</button>
</div>

Styling with CSS

As you saw from the final demo, we want the editor and the preview to appear side by side on large screens and stack vertically on small devices. We'll achieve this layout using Flexbox and media queries.

Let's begin by applying some basic styles to the <body> and <header> elements as shown below.

@import url("https://fonts.googleapis.com/css2?family=DM+Mono:ital,wght@0,300;0,400;0,500;1,300;1,400;1,500&display=swap");

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  display: flex;
  min-height: 100vh;
  justify-content: center;
  padding: 20px;
  font-family: "DM Mono", monospace;
}

header {
  max-width: 420px;
  text-align: center;
  margin-bottom: 40px;
}

h1 {
  font-size: 30px;
  font-weight: 700;
  margin-bottom: 8px;
}

header p {
  font-size: 18px;
}

We'll apply the following styles to ensure all elements are stacked vertically.

.main {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  width: 100%;
  max-width: 1000px;
  height: 90vh;
  min-height: 700px;
  margin-top: 50px;
}
.container {
  display: flex;
  height: calc(100% - 84px);
  gap: 20px;
  width: 100%;
}

We also want the text editor and the preview container to fill the available height of their parent containers.

.editor {
  border: 1px solid #7287f2;
}

.editor,
.preview {
  width: 50%;
  display: flex;
  flex-direction: column;
  border-radius: 16px;
  overflow: hidden;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.editor-header,
.preview-header {
  padding: 12px 20px;
  font-weight: 600;
  font-size: 14px;
  text-align: center;
  width: 100%;
  color: white;

}

textarea {
  /* width: 100%; */
  height: 100%;
  border: none;
  padding: 20px;
  font-size: 13px;
  resize: none;
  background: #2e3138;
  color: white;
  overflow-y: auto;
}

textarea:focus {
  outline: none;
}

.preview-container {
  width: 100%;
  height: 100%;
  border-radius: 16px;
  background-color: #f9fafb;
  overflow-y: auto;
}

.preview-content {
  flex: 1;
  padding: 16px;
  overflow: hidden;
}

.svg-container {
  display: flex;
  justify-content: center;
  overflow: hidden;
}

Finally, let's style the export button, add styles for displaying error messages, and apply media queries for responsiveness.

.error-message {
  color: #dc2626;
  background: #fef2f2;
  border: 1px solid #fca5a5;
  padding: 16px;
  margin: 20px;
  border-radius: 6px;
  font-size: 13px;
}

button {
  margin-top: 40px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 12px 30px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  width: 150px;
}

@media (max-width: 768px) {
  body {
    padding: 20px;
  }

  .main {
    width: 100%;
    height: 100vh;
  }

  .container {
    flex-direction: column;
    height: 100%;
  }

  .editor,
  .preview {
    width: 100%;
    height: 50%;
  }
}

Now the SVG tool interface looks like this:

JavaScript functionality

In this section, we'll perform some SVG code validation to ensure that any SVG code added to the editor is parsed before being displayed.

We'll also add a sample SVG code in the editor and display it in the preview area by default.

Let's start by getting the elements from the DOM and assigning them to variables for easy access.

1	const svgInput = document.getElementById("svgInput");
2	const previewContainer = document.getElementById("previewContainer");
3	const exportBtn = document.getElementById("exportBtn");

SVG Code Validation

The next step is to ensure that the SVG code is valid before adding it for preview. Create a function called loadSVG() that takes an SVG string as an argument.

Inside this function, we will first check if the SVG string is empty. If its empty, we'll display an error message.

function loadSVG(svgCode) {
previewContainer.innerHTML = "";
if (!svgCode.trim()) {
  showErrorMessage("Enter SVG code to see preview");
  return;
}}

The second form of validation will be done using the DOMParser to ensure the SVG Code is well formatted XML code.

DOMParser is an inbuilt interface in JavaScript that allows us to convert XML or HTML strings into a DOM Document object. Once the string is parsed into a DOM, you can query it using standard DOM methods like querySelector, etc.

To parse the XML, first create an instance of the DOMParser API. Then, parse the SVG string using the ParseFromString() method and set "image/svg+xml" as the MIME type.

1	const parser = new DOMParser();
2	const doc = parser.parseFromString(svgCode, "image/svg+xml");

Check for errors by querying the <parserror> element. If there are no errors, we will extract the <svg> element and inject it into the preview.

function loadSVG(svgCode) {
    previewContainer.innerHTML = "";
    if (!svgCode.trim()) {
        showErrorMessage("Enter SVG code to see preview");
        return;
    }

    try {
        const parser = new DOMParser();
        const doc = parser.parseFromString(svgCode, "image/svg+xml");
        const parserError = doc.querySelector("parsererror");
        if (parserError)
            throw new Error("XML parsing error: " + parserError.textContent);
        const svgElement = doc.querySelector("svg");
        if (!svgElement) throw new Error("No valid SVG element found");

        const container = document.createElement("div");
        container.className = "svg-container";
        container.innerHTML = svgCode;
        previewContainer.appendChild(container);
    } catch (error) {

        showErrorMessage("Invalid SVG code: " + error.message);
    }
}

Add event listeners

We now have a function that validates and displays the SVG code, so the next step is to ensure it runs before the SVG code in the input changes.

Add two event listeners to the textarea element as shown below:

svgInput.addEventListener("input", function () {
    loadSVG(this.value);
  });
  svgInput.addEventListener("paste", function () {
    loadSVG(this.value);
  });

The input event will be triggered whenever you type, delete, or change the contents of the text area, while the paste event will be triggered when you paste the content to the text area.

Load sample SVG and export SVG

The final step is to ensure that we have a default SVG when the tool opens. This is great to ensure the user sees how the tool works.

Create a function called loadDefaultSVG() which looks like this:

1	function loadDefaultSVG() {
2	const sampleSvg = `<svg xmlns="https://www.w3.org/2000/svg" width="160" height="190" viewBox="0 0 60 60"><defs><style>.cls-1{fill:#87e64b;}</style></defs><circle class="cls-1" cx="25.56" cy="61.15" r="2.86"/><path class="cls-1" d="M42,41.65l-16.13,1.73c-.3.03-.45-.34-.21-.53l15.78-12.29c1.02-.84,1.68-2.14,1.4-3.54-.28-2.14-2.05-3.54-4.29-3.26l-17.15,2.51c-.3.04-.46-.34-.22-.53l17-12.98c3.35-2.61,3.63-7.73.56-10.71-2.79-2.79-7.27-2.7-10.06.09L1.29,30.01c-1.02,1.12-1.49,2.61-1.21,4.19.47,2.52,2.98,4.19,5.5,3.73l14.77-3.01c.32-.07.49.36.22.54l-16.38,10.49c-2.05,1.3-2.98,3.63-2.33,5.96.65,3.07,3.73,4.84,6.71,4.1l24.49-6.03c.28-.07.48.25.3.47l-3.82,4.72c-1.02,1.3.65,3.07,2.05,2.05l12.58-10.34c2.24-1.86.75-5.5-2.14-5.22h-.03Z"/></svg>`;
3
4	svgInput.value = sampleSvg;
5	loadSVG(sampleSvg);
6	}
7
8	window.addEventListener("load", loadDefaultSVG);

In the code above, we set a default SVG string as the value of the editor (in the textarea), then we call the loadSVG() function which in turn renders the SVG in the preview area.

I’ve used the Envato “creative spark” for this example, but you can choose any default SVG you like

Export SVG

To export the SVG, we'll package it as an SVG file and trigger a download when the export button is clicked.

function exportSVG() {
    const blob = new Blob([svgInput.value], {
        type: "image/svg+xml"
    });
    const url = URL.createObjectURL(blob);
    const a = document.createElement("a");
    a.href = url;
    a.download = "svg-viewer.svg";
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
    URL.revokeObjectURL(url);
}
exportBtn.addEventListener("click", exportSVG);

Final demo

And we’re done! Here’s a reminder of the final codepen demo:

We built a fully functional SVG viewer using HTML, CSS, and JavaScript. This simple, yet powerful tool will allow you to preview and export your SVG graphics for use in your projects.

Create a color contrast checker with HTML, CSS, and JavaScript

noemail@noemail.org (Esther Vaati) — Mon, 26 May 2025 20:57:29 GMT

By “color contrast” we’re referring to the difference in brightness between foreground and background colors. In simpler terms, it defines how easy it is for the human eye to recognize text or images on a coloured background.

The Web Content Accessibility Guidelines (WCAG) provide specific recommendations regarding color contrast for text to make web content accessible and visible to people with impaired vision.

It recommends a minimum contrast ratio of 4.5:1 for normal text. For larger text, the minimum recommended contrast ratio is 3:1. According to the WCAG, larger text is defined as 24px or larger for normal-weight fonts and 18.66px or larger for bold text.

For example, if you have a dark background with dark-colored text, the text will not be easily readable, as seen below.

How is contrast ratio calculated?

The contrast ratio between two colors is calculated using the following formula.

1	contrast ratio = (L1 + 0.05) /( L2+0.05)

L1 is the relative luminance of the lighter color, and L2 is the relative luminance of the darker color. While higher contrast is generally recommended to meet accessibility standards, moderate contrast is the best as it reduces eye strain.

Luminance, on the other hand, is the perceived brightness of a color, and it's calculated based on RGB values of that color as shown below:

1	R0 = R/255
2	G0 = G/255
3	B0 = B/255

Once we obtain these values, we linearise each component as follows:

let r = R0 <= 0.03928 ? R0 / 12.92 : Math.pow((R0 + 0.055) / 1.055, 2.4);

let g = G0 <= 0.03928 ? G0 / 12.92 : Math.pow((G0 + 0.055) / 1.055, 2.4);

let b = B0 <= 0.03928 ? B0 / 12.92 : Math.pow((B0 + 0.055) / 1.055, 2.4);

Finally, we compute the relative luminance like so:

1	Luminance = 0.2126 * R0+0.07152* G0+0.0722*B0

Now that we know how to calculate the contrast ratio, let’s build our own color contrast tool!

Here’s what we’re working towards

HTML Structure

The HTML structure will have the following elements:

Color pickers for selecting the foreground and background colors
A display area to indicate whether the selected color combination meets the WCAG guidelines.
A preview area that displays sample text to visually demonstrate readability.
A paragraph displaying the contrast ratio of the selected colors.

The code for the HTML markup will look like this:

<div class="container">
  <h1>Color Contrast Checker</h1>
  <div class="color-pickers">
    <div class="color-picker">
      <label for="text-color">Text Color:</label>
      <input type="color" id="text-color" value="#000000" />
      <input type="text" id="text-color-hex" value="#000000" />
      <p id="text-color-error" class="error-message"></p>
    </div>

    <div class="color-picker">
      <label for="bg-color">Background Color:</label>
      <input type="color" id="bg-color" value="#FFFFFF" />
      <input type="text" id="bg-color-hex" value="#FFFFFF" />
      <p id="bg-color-error" class="error-message"></p>
    </div>
  </div>

  <div class="output">
    <div class="results">
      <div class="results-item">
        <h3>WCAG AA</h3>
        <p>Normal Text: <span id="normal_text_aa">Pass</span></p>
        <p>Large Text: <span id="large_text_aa">Pass</span></p>
      </div>
      <div class="results-item">
        <h3>WCAG AAA</h3>
        <p>Normal Text: <span id="normal_text_aaa">Pass</span></p>
        <p>Large Text: <span id="large_text_aaa">Pass</span></p>
      </div>
    </div>

    <div id="preview" class="preview">
      <p>This is a preview text</p>
    </div>

    <div class="ratio">
      <h2>Contrast Ratio: <span id="contrast-ratio"></span></h2>
    </div>
  </div>

  <div class="error">
    <p id="error-message"></p>
  </div>
</div>

Styling with CSS

We'll start by adding some basic styles to the body, the enclosing container, and the title.

body {
  background-color: #fff;
  padding: 20px;
}
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 800px;
  margin: 0 auto;
  gap: 8px;
  border-radius: 8px;
  
}
h1 {
  text-align: center;
  margin-bottom: 32px;
  color: #333;
}

Align the color picker elements using Flexbox to ensure child elements (i.e. the input and label) are stacked vertically.

.color-pickers {
  display: flex;
  gap: 20px;
  justify-content: center;
  margin-bottom: 20px;
}
.color-picker {
  display: flex;
  flex-direction: column;
  width: 160px;
  gap: 4px;
}

Style the inputs and labels as shown below:

label {
  font-weight: 600;
  color: rgb(0, 0, 0, 0.7);
}
input[type="color"] {
  width: 100%;
  height: 40px;
  border: 1px solid rgb(0, 0, 0, 0.05);
  border-radius: 4px;
  cursor: pointer;
}
input[type="text"] {
  padding: 8px 12px;
  border: 1px solid rgb(0, 0, 0, 0.05);
  border-radius: 4px;
  text-transform: uppercase;
}

The display area will indicate whether the selected colors have passed the minimum contrast ratio requirement. If they fail, we will show a fail message, otherwise a pass message will be displayed.

Here are the styles for the display area.

.results {
  margin-bottom: 20px;
  display: flex;
  gap: 20px;
  justify-content: center;
}
.results-item {
  text-align: center;
  padding: 15px;
  min-width: 130px;
  border: 1px solid rgb(0, 0, 0, 0.05);
  border-radius: 8px;
}
.results-item h3 {
  margin-bottom: 10px;
  text-align: center;
  color: #333;
}
.results-item p {
  margin-bottom: 5px;
}
.pass {
  color: #38a169;
  font-weight: bold;
}
.fail,
.error-message {
  color: #e53e3e;
  font-weight: bold;
}

Add these styles to the preview and contrast ratio elements .

.preview {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100px;
  margin-bottom: 20px;
  font-size: 24px;
  border: 1px solid rgb(0, 0, 0, 0.05);
  width: 100%;
  max-width: 600px;
}

.ratio {
  text-align: center;
  font-style: italic;
  color: #333;
}

We'll also have styles for error messages.

.error {
  color: #e53e3e;
}
.error-message {
  display: none;
}

Our simple interface now looks like this:

Color contrast functionality with JavaScript

To get accurate color contrast ratios, we'll use the WCAG contrast checker API, which provides an easy way to check the contrast between any two colors. The color contrast ratio is obtained by providing the foreground and background color values to the API, as shown below.

1	https://webaim.org/resources/contrastchecker/?fcolor=0000FF&bcolor=FFFFFF&api

Here we are using black for the text and white for the background.

The output is a JSON object that looks something like this:

{
  "ratio": "8.59",
  "AA": "pass",
  "AALarge": "pass",
  "AAA": "pass",
  "AAALarge": "pass"
}

A ratio of 8.59 means the two colors pass the minimum color contrast guidelines. The pass status means the colors also pass the WCAG requirements for both normal text (AA) and large text (AA).

The pass on AAA means the contrast ratio passes the most strict compliance level.

Select all the elements we'll be working with.

const textColorInput = document.getElementById("text-color");
const bgColorInput = document.getElementById("bg-color");

const textColorHex = document.getElementById("text-color-hex");
const bgColorHex = document.getElementById("bg-color-hex");
const textColorError = document.getElementById("text-color-error");
const bgColorError = document.getElementById("bg-color-error");
const normal_text_aa = document.getElementById("normal_text_aa");
const large_text_aa = document.getElementById("large_text_aa");
const normal_text_aaa = document.getElementById("normal_text_aaa");
const large_text_aaa = document.getElementById("large_text_aaa");
const preview = document.getElementById("preview");
const contrastRatio = document.getElementById("contrast-ratio");

Next, we'll get the currently selected color values from each of the color picker inputs. Create a function called updateColors which looks like this:

 function updateColors() {
    const textColor = textColorInput.value;
    const bgColor = bgColorInput.value;

    preview.style.color = textColor;
    preview.style.backgroundColor = bgColor;

  }

This function gets the current values and applies them to the preview. The selected background color is used as the preview's background while the selected foreground color is applied to the text.

Invoke the updateColors function to ensure the preview visually reflects how the text appears on the chosen background.

1	updateColors();

Color validation

Before calculating the contrast ratio of the selected colors, we'll first need to validate and sync the color values. This will ensure that when a color is selected using the color picker, the corresponding HEX input value is updated and vice versa.

To do that, we'll create two functions, one for validating the foreground and another for validating the background color.

Create a function called updateTextColorFromHex .

1	function updateTextColorFromHex() {}

Get the current hex value from the text color input.

1	let hexValue = textColorHex.value;

Check if the value provided starts with the # symbol, if it doesn't, append the symbol at the start of the value.

1	if (hexValue.charAt(0) !== "#") {
2	hexValue = "#" + hexValue;
3	}

Perform another validation to ensure the provided HEX value is a valid and existing color.

1	if (!isValidHex(hexValue)) {
2	textColorError.textContent = "incorrect color";
3	return;
4	}

If the hex value of the color provided is invalid, show a message and exit the function. If it's a valid color, clear the error message and sync the input value and the color picker to ensure the text input and the color input both show the same color.

1	textColorError.textContent = "";
2	textColorError.style.display = "block";
3	textColorInput.value = hexValue;
4	textColorHex.value = hexValue;

The helper isValidHex function uses a regular expression to test the input value and it looks like this:

1	function isValidHex(hex) {
2	return /^#([A-Fa-f0-9]{6}\|[A-Fa-f0-9]{3})$/.test(hex);
3	}

We'll perform a similar validation for the background color.

  function updateBgColorFromHex() {
    let hexValue = bgColorHex.value;
    if (hexValue.charAt(0) !== "#") {
      hexValue = "#" + hexValue;
    }

    if (!isValidHex(hexValue)) {
      bgColorError.textContent = "incorrect color";
      bgColorError.style.display = "block";


      return;
    }
    bgColorError.textContent = "";
    bgColorInput.value = hexValue;
    bgColorHex.value = hexValue;
    updateColors()
  }

Event listeners

It is also important to ensure that when the color or text input change, the corresponding values are updated. We do this by adding input event listeners to the elements.

textColorHex.addEventListener("input", updateTextColorFromHex);
bgColorHex.addEventListener("input", updateBgColorFromHex);

textColorInput.addEventListener("input", function () {
  textColorHex.value = textColorInput.value;
  updateColors();
});

bgColorInput.addEventListener("input", function () {
  bgColorHex.value = bgColorInput.value;
  updateColors();
});

An Introduction to JavaScript Event Listeners for Web Designers

Anna Monus

25 Jul 2023

Contrast checker

The next step is to pass the current foreground and background hex color values to the API.

Create a function called getContrastRatio, which takes two arguments namely, foreground and background.

1	function getContrastRatio(foreground, background) {
2	//logic goes here
3
4	}

Since the API takes the values without the # symbol, we'll remove the # character using the replace() method, as shown below.

1	const fcolor = foreground.replace("#", "");
2	const bcolor = background.replace("#", "");

Here, we are replacing the # symbol with an empty string. For example, if the hex value is #FFFFFF, the output will be FFFFFF.

Append the values to the API string.

1	const apiUrl = `https://webaim.org/resources/contrastchecker/?
2	fcolor=${fcolor}&bcolor=${bcolor}&api`;

Using fetch(), make a network request to the WebAIMi API and handle any occurring errors gracefully.

fetch(apiUrl)
  .then((response) => {
    if (!response.ok) {
      throw new Error("Network response was not ok");
    }
    return response.json();
  })

Update the results

If the API response is successful, we'll get a JSON object containing the contrast ratio and the output of the contrast check, either a fail or a pass in this format.

{
  "ratio": "8.59",
  "AA": "pass",
  "AALarge": "pass",
  "AAA": "pass",
  "AAALarge": "pass"
}

where:

AA - normal text
AALarge - large text
AAA - strict compliance for normal text
AAALarge - strict compliance for large text

We'll then update the results to the page by appending them to the appropriate elements.

normal_text_aa.textContent = data.AA === "pass" ? "Pass" : "Fail";
normal_text_aa.className = data.AA === "pass" ? "pass" : "fail";

large_text_aa.textContent = data.AALarge === "pass" ? "Pass" : "Fail";
large_text_aa.className = data.AALarge === "pass" ? "pass" : "fail";

normal_text_aaa.textContent = data.AAA === "pass" ? "Pass" : "Fail";
normal_text_aaa.className = data.AAA === "pass" ? "pass" : "fail";

large_text_aaa.textContent = data.AAALarge === "pass" ? "Pass" : "Fail";
large_text_aaa.className = data.AAALarge === "pass" ? "pass" : "fail";

Here, each result is displayed as either a Pass or Fail, accompanied by styling that uses red for fail and green for pass.

The final step is to update the updateColors() function to ensure the selected colors are passed to the getContrastRatio() function.

function updateColors() {
  const textColor = textColorInput.value;
  const bgColor = bgColorInput.value;
  preview.style.color = textColor;
  preview.style.backgroundColor = bgColor;
  getContrastRatio(textColor, bgColor);
}

Don’t forget to update the contrast ratio by setting the ratio value as the text content.

1	contrastRatio.textContent = parseFloat(data.ratio);

The final demo

Here is the final demo!

Conclusion

That's a wrap for this tutorial! We have learned how to build a tool that checks contrast ratios to help adhere to WCAG guidelines. Hopefully, you now feel equipped to create more accessible and user-friendly designs.

How to use Lotties in Figma

noemail@noemail.org (Andrei Marius) — Mon, 2 Jun 2025 12:33:50 GMT

In the following tutorial, I will show you how to create Lottie animations in Figma. We'll use two colorful designs to exmplify how you can animate in Figma, and then I'll show you how to go from Figma to Lottie animations. All you need is a free Figma account. If you're ready to learn how to use Lottie in Figma, let's dive in.

How to create the starting frames and shapes of the Lottie animation
How to add a star shape to an animation in Figma
How to properly organize assets when you animate in Figma
How to create an animation in Figma
How to create Lottie animations in Figma
How to use text in Lottie animations with Figma
How to make Lottie animations in Figma using a component set
How to create a text animation in Figma
How to add Lottie to Figma

1. How to create the starting frames and shapes of the Lottie animation

Step 1

Start with the Frame Tool (F) and create an 850 x 850 px frame.

Continue with the Ellipse Tool (O) and use it to add a 500 px circle. Set the Fill color of this shape to #383955. Make sure that your circle is selected, and press Control-D to duplicate it. Change the color of this second circle to #FFB400.

In the Layers panel, rename your two circles as shown below.

Step 2

Select your frame and press Control-D four times, which will add four copies of your selected frame. To make things less congested, you can select all the frames and set the Spacing to about 150 px.

Step 3

Adjust the size of the yellow circles from the first three frames as shown below, and remember to move them to the center of the frames that they are part of. Select the yellow circles from the first and the fifth frame, and replace the yellow with the darker color.

This will help with the animation as it sets the main stages of your animation. Later, the Smart Animate feature will fill in the missing frames.

2. How to add a star shape to an animation in Figma

Step 1

Use the Star Tool to add a 350 px star shape in the center of your first frame. Make it white, keep the default 5 points, and set the Ratio to 50% and the Radius to 20.

Step 2

Make sure that your star shape is still selected, and press Control-C to copy it. Select your other four frames and simply press Control-V to add the same star shape.

Select the star shapes from your second and third frames, and then change the Fill color from white to yellow. Select only the star shape from the second frame, shrink it to 250 px, and lower its Radius to 16.

3. How to properly organize assets when you animate in Figma

Step 1

Focus on your third frame and use the Ellipse Tool (O) to add several yellow circles around your star shape, roughly as shown below.

Step 2

Select the circles from your third frame and copy them (Control-C). Select Frame 4 and press Control-V to paste the circles, and then make them white.

Step 3

Move to Frame 2, select it, and press Control-V again to paste that set of yellow circles. Select the circles one by one and move them behind the star shape.

Again, moving these circles will help with the animation. The circles will start moving from behind the star toward their final destinations, specified in Frame 3.

Step 4

Select all those tiny circles from your second frame and copy them (Control-C). Select Frame 1 and Frame 5, and press Control-V.

As I’ve said before, the tiny circles need to sit behind the star shapes. To do this easily, just select all the star shapes across your five frames and press the ] key to bring them to the front of their respective layers.

Step 5

Let's do a quick recap before you learn how to make a Lottie animation in Figma. First things first: names matter. Make sure the elements you’re animating have the same names across all layers. Also, changes in the order of objects can disrupt your animation, so try to maintain the same order throughout the layers.

4. How to create an animation in Figma

Step 1

Now that the design is complete, let's move to the prototype and learn how to animate in Figma. Start by switching from Design mode to Prototype mode.

Select the first frame and connect it with the second one. Set the Interaction settings as shown below. As I've said before, Smart Animate does most of the magic as it fills in the missing frames from your animation.

Step 2

Select the second frame and connect it with the third one. Set the Interaction settings as shown in the following image.

Step 3

Select the third frame and connect it with the fourth one. Set the Interaction settings as shown below.

Step 4

Select the fourth frame and connect it with the fifth one. Set the Interaction settings as indicated below.

Step 5

Finally, connect the fifth frame with the first one and set the Interaction settings as you can see below.

5. How to create Lottie animations in Figma

Step 1

To convert a Figma animation to Lottie, you will need the LottieFiles plugin.

Press Control-/ to open the Quick Actions menu. Select the Plugins & widgets section and search for the LottieFiles plugin.

Step 2

Click the Run button to add the LottieFiles plugin to Figma. You'll need to set up an account with LottieFiles before you can export a Lottie from Figma.

Step 3

Once you've set up your account and opened the LottieFiles plugin, you'll notice that you need to select a flow to go from Figma to a Lottie animation.

If you don't have one already, make sure that you're still in Prototype mode and add a Flow for your first frame.

Step 4

Select the preferred Flow from the dropdown menu. In this case, there's only one, so you won't have much trouble finding it, but for larger designs, it's a good practice to name your flows.

Step 5

Once you select a flow, you'll get a nice preview of your Lottie animation. Clicking the Save to button will save the animation in your Projects folder at lottiefiles.com. Before you do it, be aware that there's a limit of 10 animations before you have to pay to save your Lottie animations. Don't make the same mistake as I did, and be sure that the animation that you choose to save is the final version. And no, deleting a saved animation won't reset the limit.

6. How to use text in Lottie animations with Figma

Step 1

Pick the Text Tool (T) and use it to add the "Loading" text. Feel free to use any font and set the Size to about 80, and then open the Type settings fly-out menu to check the Cap height to baseline button.

Step 2

Pick the Ellipse Tool (O) and use it to add three 10 px circles, as shown below. Use the fill colors indicated in the following image, and then focus on the Layers panel.

As a good practice, you can rename each circle based on its color. Place the orange circle below the yellow one and the red one below the orange one.

Step 3

Select your circles along with the text, and turn your selection into a compound path (Alt-Control-K). Rename it "Loading Text".

Step 4

Select the circles and align them all to the left edge of the yellow one.

7. How to make Lottie animations in Figma using a component set

Step 1

Make sure that your main component is selected, and add a variant. Select the three circles inside your default variant, and make them invisible by lowering the Opacity of the Fill colors to 0%.

Step 2

Add a third variant to your component set. Select the orange circle inside this new variant, and move it to the right using the Right Arrow key. Leave an 8 px gap between your orange circle and the yellow one.

Step 3

Add a fourth variant to your component set. Select the red circle inside this new variant and move it to the right using the Right Arrow key. Leave an 8 px gap between this red circle and the orange one.

Step 4

Add a fifth variant to your component set. Select the red circle inside this new variant and move it behind the orange one.

Add one last variant to your component set. Select the orange circle inside this new variant and move it behind the yellow one.

8. How to create a text animation in Figma

Step 1

Switch from Design mode to Prototype mode. First, connect each consecutive variant, and then connect the last variant with the first one. Select all connections and set the Interaction settings as shown below. Again, Smart animate will do the magic.

Step 2

Create a new frame, make it purple, and drag in the "Loading" text component from the Assets panel. Don't forget to add a Flow to this new frame.

Step 3

Finally, you can press Control-/ to open the Quick Actions, search for the LottieFiles plugin, and open it to preview your Lottie animation.

Here's how your Lottie animation should look. Check out this tutorial if you want to learn how to create the "loading dots" animation: How to create a Lottie loading animation.

9. How to add Lottie to Figma

Step 1

You can add Lottie to Figma, but there are some limitations as Figma does not support playing JSON Lottie files directly. You can only add Lottie animations as GIF or MP4 files, but keep in mind that you need a subscription to import an MP4 file in Figma.

You can insert your saved Lottie animations as GIFs using the LottieFiles plugin, but if you don't have a LottieFiles subscription, there will be a limit on the size of the imported GIF.

The same limitation applies if you choose to export your saved Lottie animation as an MP4 file.

If your Lottie animation was created in After Effects and you have that file, you could save that animation as a larger GIF and then import it in Figma.

Congratulations! You're done

Here is how your Lottie animation should look. I hope you've enjoyed this tutorial and can apply these techniques in your future projects.

Feel free to adjust the final Lottie animation and make it your own. Now that you've learned how to use Lottie in Figma, you can head over to Envato, where you can find interesting solutions to improve your animation.

Want to learn more?

We have loads of tutorials on Envato Tuts+, from beginner to intermediate level. Take a look!

How to create a glassmorphism generator tool

noemail@noemail.org (Esther Vaati) — Fri, 18 Apr 2025 08:44:10 GMT

Glassmorphism is a pretty resilient design style (it’s been around a long while now!) achieved by a combination of background blur transparency, a semi-transparent border, and sometimes subtle border shadows.

Our glassmorphism generator

Here’s what we’re going to build.

How glassmorphism is created with CSS

With CSS we can apply a background blur and a transparent background to an element and then place it over a background (typically an image, a gradient, or another layered element) to create the illusion of frosted glass.

As you can see from the demo, we are using an image as our background, and the card element on top features a transparent background, a blur effect, a border, and a subtle box shadow. All these properties, when combined, create the frosted glass effect.

Let's get started!

Build a Glassmorphism generator

HTML Structure

The HTML structure will be minimal, with the following elements:

A preview section to display the glass morphism effect in real-time.
A settings section for customizing the color, blur, and opacity values.
A <pre><code> element to display the CSS for the current glass effect.
A button for copying the generated CSS.

Here is all the HTML needed:

<main>
  <h1>Glassmorphism Generator</h1>

  <section class="preview-section">
    <div class="preview-container">
      <div class="glass-card">
        <h3>Glassmorphism Effect</h3>
        <p>
          This is how your glassmorphism element will look with the current settings.
        </p>
      </div>
    </div>
  </section>

  <section class="settings-container">
    <div class="settings">
      <label for="colorPicker">Color:</label>
      <input
        type="color"
        id="colorPicker"
        class="color-picker"
        value="#3abb16"
      />
    </div>

    <div class="settings">
      <label for="opacity" class="slider-label">Opacity:</label>
      <input
        type="range"
        id="opacity"
        class="slider"
        min="0"
        max="1"
        step="0.01"
        value="0.25"
      />
    </div>

    <div class="settings">
      <label for="blur" class="slider-label">Blur:</label>
      <input
        type="range"
        id="blur"
        class="slider"
        min="0"
        max="20"
        step="0.5"
        value="10"
      />
    </div>
  </section>

  <div class="code-card">
    <pre><code id="output"></code></pre>
  </div>

  <button id="copyCssButton" class="copy-css">Copy CSS</button>
</main>

The values you use on the form elements here will be applied to the glassmorphism card when it first loads

Styling with CSS

Let's start by using flex to align everything at the center. Here are the styles for the body and the main container.

body {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 100vh;
    padding: 20px;
    font-family: "DM Mono", monospace;
  }
  main {
    max-width: 600px;
    display: flex;
    gap: 20px;
    flex-direction: column;
    align-items: center;
  }

The preview section has a background image and a card on top showing the frosted glass effect. Add these styles to the preview container.

.preview-container {
    color: #ffffff;
    height: 320px;
    border-radius: 0.5rem;
    padding: 16px;
    background-image: url("image url here");
    background-size: cover;
    background-position: center;
  }

The Default Glassmorphism effect

The first time you open the tool, we want a default frosted effect already applied to the glass card. As we mentioned, earlier, the frosted glass effect is achieved by a combination of 4 key CSS properties.

Transparent background - makes the card partially see-through.
Backdrop blur -This applies a blur to the background element. In our case, the background image will be blurred.
Transparent Border - Adds a subtle semi-transparent outline defining the card's edges.
Box shadow - Adds depth by using a soft shadow, making the card appear as though it's floating over the background image.

In CSS, if you need to apply transparency to an element, you can use the rgba() or the hsla() color functions. These functions allow you to define a color with an alpha (transparency) value, where:

0 means fully transparent
1 means fully opaque.

The lower the alpha value, the more transparent the effect, which is important for creating a glass effect.

Add the following properties to the glass card.

.glass-card {
    width: 75%;
    height: 160px;
    margin: 4rem auto 0;
    padding: 24px;
  background: rgba(254,245,238,0.2);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  }
  

Here, we are applying a transparent background, a blur, a border, and a box shadow using the RGBA color function. The backdrop blur is the secret weapon behind the frosted effect. It blurs everything behind the card, creating the signature glass effect. Without this value, the background would be plain transparent.

The thin semitransparent white border gives the card a shiny edge, while the box shadow will make it appear like it's floating above the background. The default effect will now look like this:

Styling the other elements

Let’s style the rest of the elements:

.settings-container {
    width: 100%;
  }
  input[type="color"] {
    width: 100%;
    border: none;
    padding: 4px;
    border-radius: 4px;
    cursor: pointer;
  }

  .slider {
    width: 100%;
    height: 4px;
    background: #e0e0e0;
    border-radius: 2px;
    appearance: none;
  }
  .settings {
    margin-bottom: 12px;
  }
  .slider::-webkit-slider-thumb {
    appearance: none;
    width: 16px;
    height: 16px;
    background: #147ccb;
    border-radius: 50%;
    cursor: pointer;
  }
  .slider::-moz-range-thumb {
    width: 16px;
    height: 16px;
    background: #147ccb;
    border-radius: 50%;
    cursor: pointer;
    border: none;
  }
  .code-card {
    width: 95%;
    background-color: #e0e0e0;
    color: #021120;
    padding: 16px;
    border-radius: 8px;
    overflow-x: auto;
  }

  pre {
    font-size: 0.875rem;
    white-space: pre-wrap;
  }
  .copy-css {
    margin-top: 24px;
    cursor: pointer;
    text-transform: uppercase;

    color: #fff;
    font-size: 0.875rem;
    width: 100%;
    height: 45px;
    background-color: #167cbb;
    border-radius: 8px;
    font-weight: 600;
    border: none;
  }

Glassmorphism generation

In this part of the tutorial, we want to have a customization option where you can choose your own color, transparency, and blur values to create a unique glass effect.

Let's start by getting all the elements

const colorElement = document.getElementById("colorPicker");
const opacityElement = document.getElementById("opacity");
const blurElement = document.getElementById("blur");
const cssOutput = document.getElementById("output");
const copyCssButton = document.getElementById("copyCssButton");
const glassCard = document.querySelector(".glass-card");

When you select a color from the color picker element, its usually in the hex format, so we need to convert the selected color to the RGBA color format. To do that, let's create a function called hextoRGB, which will take in the hex color and opacity values chosen by the user and returns the corresponding RGBA format.

function hexToRGB(hex, opacity) {
    const r = parseInt(hex.slice(1, 3), 16);
    const g = parseInt(hex.slice(3, 5), 16);
    const b = parseInt(hex.slice(5, 7), 16);
    return `rgba(${r},${g},${b},${opacity})`;
}

For example, if the selected color is #3498db, the corresponding color in RGBA format will be: rgba(52,152,219,0.6).

The next step is to update the glass card to reflect the selected color, blur, and opacity values. Create a function called updatePreview() that gets the selected values and applies them as styles to the glass card.

function updatePreview() {
  const color = colorElement.value;
  const transparency = opacityElement.value;
  const blur = blurElement.value;

  const backgroundColor = hexToRGB(color, transparency);
  glassCard.style.backgroundColor = backgroundColor;
  glassCard.style.backdropFilter = `blur(${blur}px)`;
}

In the code, the preview section will dynamically update the appearance based on the values from the inputs.

glassCard.style.backgroundColor = backgroundColor:updates the background color using an RGBA value.
glassCard.style.backdropFilter = `blur(${blur}px)`;: applies a blur effect to the background behind the card, creating the frosted glass look.

We also need to add event listeners to the inputs, to ensure any change in the values updates the preview.

1	colorElement.addEventListener("input", updatePreview);
2	opacityElement.addEventListener("input", updatePreview);
3	blurElement.addEventListener("input", updatePreview);

Generate and copy CSS values

So far, we are able to create customized frosted glass effects, the next step is to generate the CSS used to achieve the glass effect and allow for easy copying as shown in the image below.

In the updatePreview () function, create a CSS string using the currently selected color, blur, and opacity values and add the string as the text content of the CSS output element. Every time you change a value, the CSS will also change and update the preview.

function updatePreview() {
  const color = colorElement.value;
  const transparency = opacityElement.value;
  const blur = blurElement.value;

  const backgroundColor = hexToRGB(color, transparency);
  glassCard.style.backgroundColor = backgroundColor;
  glassCard.style.backdropFilter = `blur(${blur}px)`;

  const css = `.card {
  background: ${backgroundColor};
  backdrop-filter: blur(${blur}px);
  -webkit-backdrop-filter: blur(${blur}px);
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, ${transparency});
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
}`;

  output.textContent = css;
}

The last feature is to copy the CSS values, making it easy to copy the generated CSS values with just one click. Add an event listener to the copy CSS button.

copyCssButton.addEventListener("click", function () {
    navigator.clipboard
      .writeText(cssOutput.textContent)
      .then(() => {
        alert("Css copied");
      })
      .catch((error) => {
        alert("error copying CSS");
      });
  });

Here we are using the navigator.clipboard API, a built-in browser tool that allows us to copy things to the clipboard. The writeText() method is used to copy the contents of the CSS output element directly to the clipboard.

Our final glassmorphism tool

Let’s remind ourselves of what we’ve built!

Conclusion

That's a wrap for this tutorial. Adding a frosted glass effect to your designs can enhance the overall aesthetic and give your UI a modern touch. To improve on this tool you can add support for different backgrounds such as shapes and gradients.

How to create infinite text scrolling in HTML, CSS, and JavaScript

noemail@noemail.org (Esther Vaati) — Mon, 21 Apr 2025 20:38:04 GMT

It’s worth noting that a horizontal marquee brings many accessibility challenges. Moving text can be distracting and difficult to read. Consider carefully the kind of content you wish to display in this way!

Basics: How the text scroll effect works

This text scroll effect can be achieved using simple CSS animation properties. To make text scroll horizontally on a webpage, we’ll add sample text in a container element and apply the transform:translateX() CSS property to the text as shown below ↓

The text is moved using transform:translateX() property inside a @keyframes animation. The animation starts with the text at 0% (initial position) and moves to -100% (text moves out of view to the left).

The scroll animation is applied using:

1	animation: scrollText 25s linear infinite;

where:

scrollText is the name of the animation
25s is the duration of the animation
linear makes the scrolll speed consistent
inifinite means the animation will repeat forever

To scroll text vertically, we use transform:translateY property inside a @keyframe animation. In the next example, we have duplicated the text and made the container taller to accommodate the scrolling text.

How to create an infinite horizontal and vertical text scroll effect

Let’s combine all the tricks we have learned so far and create a stylish infinite vertical and horizontal text scroll effect.

HTML structure

In our HTML structure, we have separate containers for each scroll direction. The horizontal scroll will occupy the main content area while the vertical scroll will be in a sidebar. By the end of this tutorial, we will have something like this:

The HTML structure will look like this:

 <div class="main-container">
      <div class="scroll-container">
        <div class="text-row">
          <div class="infinite-scroll">
            <div class="text-scroll">
              <!-- text added here -->
            </div>

            <div class="text-scroll">
              <!-- text added here -->
            </div>
          </div>
        </div>
      </div>

      <div class="vertical-scroll-container">
        <div class="vertical-infinite-scroll">
          <div class="vertical-text-scroll">
            <!-- text added here -->
          </div>
          <div class="vertical-text-scroll">
            <!-- text added here -->
          </div>
        </div>
      </div>
    </div>

The scrolling text will be added dynamically using JavaScript. For each scroll direction, we will duplicate each pair of scrolling text elements to create a seamless looping animation.

Main CSS styles

Firstly, let’s remove the default spacing on the body, so set overflowX: hidden to prevent horizontal scrolling. We’ll also apply a custom font.

@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@800&display=swap");
body {
font-family: "Montserrat", sans-serif;
margin: 0;
padding: 0;
overflow-x: hidden;
display: flex;
min-height: 100vh;
color: #000;
background-color: #adea74;
}

We have also applied a bright Envato green background to provide contrast with the “soft serve” of the scrolling text containers.

Align the sections side by side using flexbox and set the main container to full width.

1	.main-container {
2	display: flex;
3	width: 100%;
4	}

The horizontal scroll container will take the full width of the webpage, while the vertical scroll container will have a width of 200px.

.scroll-container {
  flex-grow: 1;
  overflow: hidden;
}

.vertical-scroll-container {
  width: 200px;
  background-color: #fef5ee;
  border-left: 2px solid rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

Add scroll text to the webpage with JavaScript

Before we start animating, let’s inject the text to be animated to the Dom with JavaScript. This could be done manually too, but adding text dynamically like this gives us more flexibility.

Get the horizontal and vertical text scroll elements, in our case, these two elements.

1	const horizontalTextScroll = document.querySelectorAll(".text-scroll");
2	const verticalTextScroll = document.querySelectorAll(
3	".vertical-text-scroll"
4	);

Define a list of phrases that will appear in our scroll animation.

const items = [
    "Digital Strategy",
    "Design System",
    "Brand Strategy",
    "Website Design",
    "SEO Optimization",
    "Content Strategy",
  ];

We will then loop through each phrase in the items array and pass it as an argument to the addScrollItem function. This function is responsible for adding the text and star to both the horizontal and vertical scrolling containers on the webpage.

1	items.forEach((item) => {
2	addItemToScrolls(item);
3	});

To create an infinite horizontal scrolling effect, we loop through each element defined by horizontalTextScroll and since there are two of them, we insert the same set of text items into both.

The duplication is important to ensure that when one set scrolls out of view, the next scrolls in ensuring a seamless loop.

The function look like this:

function addItemToScrolls(text) {
  
  horizontalTextScroll.forEach((scrollItem) => {
    const textItem = document.createElement("span");
    textItem.classList.add("text-item");
    textItem.innerHTML = text;
    scrollItem.appendChild(textItem);

  });
}

In the same loop, we will also add a star (★) between each phrase to enhance the visual experience. Update the code as shown below.

function addItemToScrolls(text) {

  horizontalTextScroll.forEach((scrollItem) => {
    const textItem = document.createElement("span");
    textItem.classList.add("text-item");
    textItem.innerHTML = text;
    scrollItem.appendChild(textItem);

    const star = createStar();
    star.classList.add("star");
    scrollItem.appendChild(star);
  });
}

function createStar() {
    const star = document.createElement("span");
    star.textContent = "★";
    return star;
  }

To create an infinite vertical scrolling effect, follow the same steps as the horizontal scroll except rather than adding the full phrase, for example, "Digital Stategy", we only take the first word, in this case, "Digital" and add it to the scroll element.

We will also perform duplication to ensure a continuous loop.

function addItemToScrolls(text) {
    
  horizontalTextScroll.forEach((scrollItem) => {
    const textItem = document.createElement("span");
    textItem.classList.add("text-item");
    textItem.innerHTML = text;
    scrollItem.appendChild(textItem);

    const star = createStar();
    star.classList.add("star");
    scrollItem.appendChild(star);
  });

  verticalTextScroll.forEach((scrollItem) => {
    const textItem = document.createElement("span");
    textItem.classList.add("vertical-text-item");
    const firstWord = text.split(" ")[0];
    textItem.textContent = firstWord;
    scrollItem.appendChild(textItem);

    const star = createStar();
    scrollItem.appendChild(star);
  });
}

Animating the text with CSS

We'll start with the horizontal section. Define the animations using CSS @keyframes.

@keyframes scroll {
    0% {
      transform: translateX(0);
    }
    100% {
      transform: translateX(-50%);
    }
  }

The element will have no movement at 0% (its original position), and by the end of the animation, the text will have moved by 50% of its width. This means the text will slide halfway off the left side of its parent container.

Since we are duplicating the content inside the same container, we use translateX(-50%) so that when the first half moves out of view, the second half takes its place, creating a seamless scrolling loop.

To ensure the animation repeats infinitely and runs at a constant speed, set the animation to 25s linear infinite .

1	.infinite-scroll {
2	animation: scroll 25s linear infinite;
3
4	}

Set display:flex to ensure the duplicated text elements are displayed in a row.

.infinite-scroll {
    display: flex;
    animation: scroll 25s linear infinite;
    
  }

To draw attention to the content as it moves across the webpage, increase the font size of the text and the star and add a bigger font weight to the text.

.text-item {
  font-size: 2rem;
  font-weight: 800;
}

.star {
  font-size: 2rem;
  margin: 10px 30px;
}

Vertical scrolling animation

To create the vertical scrolling effect, we will follow the same animation steps, but this time, instead of moving the content sideways using translateX, we will use translateY to move the content vertically. We’re also presented with some interesting challenges with the way the text is laid out—we’ll solve those with Flexbox and another unusual CSS property.

Define another keyframe animation similar to the previous one for the vertical infinite scroll.

@keyframes scrollVertical {
    0% {
      transform: translateY(0);
    }
    100% {
      transform: translateY(-50%);
    }
  }

Add the animation to the vertical scroll container.

.vertical-infinite-scroll {
  display: flex;
  flex-direction: column;
  animation: scrollVertical 25s linear infinite;
}

The text on the vertical scroll needs to be flipped to ensure the characters are arranged from top to bottom. In CSS, we use the writing-mode property which allows us to define the direction in which text is laid out.

1	.vertical-text-item {
2	writing-mode: vertical-rl;
3
4	}

After setting the writing mode, we also need to flip the text so it appears upright from top to bottom using the transform: rotate(360) property.

.vertical-text-item {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
   
  } 

Now we have this effect on the vertical scroll.

Apply flex:display to ensure the two pairs of text are arranged in a column and set flex-direction: column to stack them vertically. Additionally, set flex-shrink: 0; to stop the items from shrinking when there is insufficient space.

.vertical-text-scroll {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
  }

Final scrolling text demo

Here is a reminder of the final scroll demo.

If you are looking for more advanced effects, check out our tutorial on How to Build Horizontal Marquee Effects with GSAP, and take your animations to the next level with GSAP.

Conclusion

In this tutorial, we have used simple CSS properties to achieve horizontal and vertical text scroll effects. These effects can easily be integrated into any design, making it an eye-catching addition to any webpage.

25 ridiculously impressive HTML5 canvas experiments

noemail@noemail.org (Abhin Sharma) — Mon, 20 Jan 2014 02:02:38 GMT

HTML5 is the thing to talk about these days. Today, we have a collection of ridiculously impressive HTML5 canvas-based experiments that will make you say, "Wow!" Let's take a peek at some of the latest, cutting-edge examples out there.

The animations in some of these canvas experiments may potentially trigger seizures for people with photosensitive epilepsy. Viewer discretion is advised.

Now for the experiments!

25 extremely cool HTML5 canvas animations!

Get inspired and ready for greatness with these impressive HTML5 canvas samples! Let's go!

1. Orbital Trails

This top HTML5 animation features beautiful swirling rainbow particles!

2. Neon Hexagon Patterns

Glowing lights and particles trace this hexagonal, honey-comb pattern in this HTML5 canvas sample.

3. Long Shadow

This canvas in HTML5 example simulates a movable light source amongst boxes.

4. Animated Particle Background

A cosmic network of nodes and lines, with an HTML5 animation and a spotlight effect.

5. Click Response

Click anywhere on this example of canvas in HTML5 to see a cute explosion of circles.

6. Heart Particles

A vast cloud of shining falling hearts appear in this HTML5 canvas example.

7. Colorful Ribbons

Watch these colorful bands of light fill the screen thanks to this HTML5 canvas animation.

8. Draw With Text

Click and keep dragging on the canvas HTML5 animation to draw with random words.

9. Rotating Spiral

A 3D spiral, rendered with lines. You can even rotate this HTML5 canvas sample with the mouse!

10. Shape Shifting Text

View this canvas in HTML5 example in full-screen mode. Type in text and watch it appear in a cool particle effect.

11. Falling Confetti

A pretty falling confetti effect. This example of canvas in HTML5 is perfect for a background!

12. Parallax Skyline

A minimalist side-scrolling parallax. This HTML5 canvas example would be perfect for an old-school video game.

13. Ambient Background

Fuzzy bokeh spots swirling around. View this canvas animation in full-page mode for the best effect.

14. Fizzy Sparks

Just hover the mouse over the HTML5 canvas sample and see shiny sparks go off everywhere.

15. Anime.js Fireworks

Click this canvas in HTML5 example for a simple, but stylish and colorful fireworks effect.

16. Mechanical Grass

Watch the "grass" grow wherever you move your mouse. Be sure to view this example of canvas in HTML5 in full screen to see the effect.

17. Interactive Stars

Watch stars and constellations appear in the night sky as you move your mouse through this HTML5 canvas example.

18. Gravity Points

Click anywhere on the HTML5 canvas animation and see all the particles gravitate towards that point.

19. Particle Swarm

Simulated particles swirl around in the simulated magnetic field of this HTML5 canvas sample.

20. Crowd Simulator

This amusing canvas in HTML5 example simulates a busy crowd of people walking.

21. Birds of a Feather

The canvas animation features a beautiful and serene animated flocking simulation.

22. Lightning

Connect two points anywhere on the screen with this HTML5 canvas example and watch the electricity arc!

23. Noise Abstraction

This canvas in HTML5 example comes with a unique animated algorithm for generating stylish and colorful abstract backgrounds.

24. Liquid Lights

With this HTML5 canvas example, you get a screen full of animated flashing lights, reminiscent of a nightclub or concert.

25. Rainbow Spider

Can you move quickly enough to make the spider fall down from the web? Give this a HTML5 canvas animation a try.

Elevate your HTML5 canvas animation game with Envato!

So what do you think? Getting your own ideas for a neat canvas application? Well, now you have more than one reason to create HTML5 apps: CodeCanyon has an HTML5 category! Browse through it and see what's available, or have a look at our HTML5 Templates on ThemeForest.

And, if you want to take your projects to the stratosphere, Envato is where it's at! For a low monthly subscription fee, you get unlimited downloads of millions of premium digital assets. So, if you want top-notch web templates, video templates, and add-ons, this is where you need to go.

This post has been updated with contributions from Monty Shokeen. Monty is a full-stack developer who also loves to write tutorials, and to learn about new JavaScript libraries.

Easy CSS slider (carousel with pure CSS)

noemail@noemail.org (Jemima Abu) — Tue, 22 Aug 2023 20:44:17 GMT

You might be thinking “CSS is used for styling while JavaScript is used for interactivity, that’s just the way the web works.”

But CSS loads on a webpage faster than JavaScript. And CSS also causes less reflow on a page (which improves performance). So, it’s fair to say we should use CSS for interactivity wherever possible.

Our easy CSS slider

Let’s take a look at the slider (CSS carousel) we’ll be building today. Scroll through to see the scroll-snap effect:

While we'll be using mostly CSS language for the carousel, we first need to set the layout applying HTML.

1. Layout with HTML

The layout of our easy slider is simple. We’ll create a carousel-container div to hold the carousel-slide elements.

1	<div class="carousel-container">
2	<div class="carousel-slide">1</div>
3	...
4	</div>

That’s all we need so let’s move on to the styling of our carousel in HTML and CSS.

2. CSS Carousel behaviour

Once we have our carousel slides set up, we’ll style the CSS slider to have the following features:

Scrollable content
Snap to next slide
Progress bar indicating slide progress

Scrollable content

For the scrollable content, we’ll use the display:flex and overflow-x: auto properties. We’ll also style slides so we can see 3 slides on the desktop screen and 1 slide on mobile.

.carousel-container {
  display: flex;
  overflow-x: auto;
}

.carousel-slide {
  flex: 1 0 30%;
}

@media (max-width: 600px) {
  .carousel-slide {
    flex: 1 0 90%;
  }
}

Snap to slide

Next, to achieve the snapping effect on the slides, we’ll use the CSS scroll-snap properties.

The scroll snap properties allow us define “snapping” points on an element. These are the points of the element that we want to be fully visible once scrolling.

The updated code of our carousel in CSS looks like this:

.carousel-container {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
}

.carousel-slide {
  flex: 1 0 30%;
  scroll-snap-align: center;
}

@media (max-width: 600px) {
  .carousel-slide {
    flex: 1 0 90%;
  }
}

We can get a better understanding of how the scroll-snap property works using this demo:

Let’s break down what’s happening:

1. The first property is the scroll-snap-type. This property is applied to the parent container and accepts two keywords:

The first keyword determines which axis the scroll snap should be applied to - x, y, both or none.
The second keyword determines the behaviour of the scroll snap. If set to proximity, the scroll will only snap to the nearest element if it’s close enough to the edges of the container. Mandatory means the container will always snap to whichever element is closest.

2. The second property is the scroll-snap-align. This applies to the children of the scroll snap type container. It determines which part of the element is snapped into view.

Optional: CSS-only progress bar

Let's keep inline with our CSS-only interactivity. We can take advantage of native browser features to create a progress bar for our carousel in CSS.

We’ll do this by styling the carousel container scrollbar to give the appearance of a progress bar. This is what the code looks like:

.carousel-container::-webkit-scrollbar {
  height: 8px;
}

.carousel-container::-webkit-scrollbar-thumb {
  background: #29AB87;
}

.carousel-container::-webkit-scrollbar-track {
  background: #b1b3b399;
}

.carousel-container::-webkit-scrollbar-track-piece:start {
  background: #29AB87;
}

Learn more about the display, flex, overflow, and background CSS properties on out dedicated tutorials.

Let’s look at the properties we’re using:

::webkit-scrollbar: the entire scrollbar element
::webkit-scrollbar-thumb: the draggable bar on the scrollbar
::webkit-scrollbar-track: the path that the scrollbar thumb is on
::webkit-scrollbar-track-piece:start: the path of the track not covered by the scrollbar thumb, the :start CSS selector targets only the path behind the scrollbar thumb

In the diagram above, we can see what parts of the scrollbar are being targeted. By making the -webkit-scrollbar-thumb and ::webkit-scrollbar-track-piece:start the same color in CSS, the scrollbar gives the impression of being filled in as it’s being scrolled. This creates a progress bar.

Since our progress bar is actually a scrollbar, it can also be used to scroll through the CSS carousel. It results in an additional feature: it’s a win/win!

The ::webkit-scrollbar properties are non-standard, pretty sketchy, and not supported by all browsers. That's why it’s not recommended to use this in a production environment. Our progress bar will look like a regular scrollbar on non-supported browsers. This also happens if you choose not to include these ::webkit-scrollbar rules.

That’s all there is to our easy slider! We've built a scrollable container with a nifty snapping feature. We even added a progress bar using only CSS:

3. More features with JavaScript

We’ve gotten the basic feature of the CSS carousel out of the way. Now we can go on to add even more features, using JavaScript this time.

One of those features is using arrows to handle the carousel navigation. In a previous tutorial, we looked into building a carousel with JavaScript (less than 14 lines of code!). We can combine that tutorial with this one to add even more features to our easy slider.

How To Build a Simple Carousel With Vanilla JavaScript (14 Lines of Code!)

Jemima Abu

16 Aug 2023

This is what our combined CSS carousel looks like:

In this demo of a carousel in CSS and HTML, just for fun, the code has been refactored to use even fewer lines of JavaScript. This is what our updated carousel arrow function looks like:

const carousel = document.querySelector(".carousel-container");
const slide = document.querySelector(".carousel-slide");

function handleCarouselMove(positive = true) {
  const slideWidth = slide.clientWidth;
  carousel.scrollLeft = positive ? carousel.scrollLeft + slideWidth : carousel.scrollLeft - slideWidth;
}

Then we pass that function to our HTML arrows:

<button class="carousel-arrow carousel-arrow--prev" onclick="handleCarouselMove(false)">
  &#8249;
</button>

<button class="carousel-arrow carousel-arrow--next" onclick="handleCarouselMove()">
  &#8250;
</button>

And with that, we’ll call it a day on our modded-up carousel in CSS and HTML!

What's next?

You just learned how to create an easy carousel in HTML and CSS. There's a ton of useful tips and tricks yet for you to learn. Check out some of our tutorials and get closer to become a CSS master!

Create a currency converter with HTML, CSS, and vanilla JavaScript

noemail@noemail.org (Esther Vaati) — Thu, 28 Dec 2023 18:37:50 GMT

By the end of this tutorial, you’ll have learned how to build a responsive currency app that fetches real-time data with the Exchange Rate API in a user-friendly interface. Let’s get to it!

Our currency converter demo

To create your own currency converter, you’ll first need to register your own API key from exchangerate-api.com.

I based this design loosely on the excellent Crypto exchange platform by Yev Ledenov on Dribbble.

Currency converter code in HTML

We'll begin with the HTML part of our app. The currency converter code in HTML will give our application a simple interface containing:

An input field for the amount to be converted
A drop-down to select the from Currency value
A second drop-down to select the to currency value
A convert button
A <p> tag to show the converted amount
A <p> tag to show any errors that might occur during the conversion process

The currency converter HTML code will look like this:

<div class="container">

  <div class="currency-container">
    <h1>Currency converter</h1>
    <div class="input-box">
      <label for="amount">Enter amount</label>
      <input type="text" id="amount" placeholder="100"  required/>
    </div>
    <div class="currency">
      <div class="box">
        <select
          class="select-option"
          name="from-currency"
          id="fromCurrency"
        >
          <option value="USD">United States Dollar</option>
        </select>
      </div>
      <div>
        <span>TO</span>
      </div>
      <div class="box">
        <select class="select-option" name="to-currency" id="toCurrency">
          <option value="USD">United States Dollar</option>
        </select>
      </div>
      <button class="convert">Convert</button>
      <p class="result"></p>
      <p class="error"></p>

    </div>
  </div>
</div>

Currently, we are using the option value as a placeholder. We will replace and add more option data dynamically to our currency converter with JavaScript.

Styling with CSS

All the greatest currency converter apps start with nice, basic styles. We’ve pulled in the rather excellent Bricolage Grotesque font from Google fonts too:

      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        font-family: 'Bricolage Grotesque', sans-serif;
      }

      h1 {
        font-size: 5em;
        font-weight: bold;
        text-align: center;
        margin: .5em 0;
        line-height: .8;
      }

      .container {
        margin: auto;
        min-height: 100vh;
        background-color: #202020;
        padding: 2em 0;
        color: #040203;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
      }

      .currency-container {
        height: fit-content;
        background-color: #7cb889;
        padding: 3em;
        border-radius: 40px;
      }

For the input and label (including the placeholder in the input) they will have the following styles:

      .input-box {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
      }

      label {
        font-size: 1.5em;
        margin-bottom: .4em;
      }

      #amount {
        width: 300px;
        padding: 20px;
        border-radius: 30px;
        font-size: 3em;
        border: 3px solid black;
        background: transparent;
        color: black;
        
      }
      #amount:focus {
        border: 3px solid white;
        outline: none;
      }

      ::placeholder {
        color: rgba(0,0,0,0.6);
        opacity: 1; /* Firefox */
      }

Next, we will apply styling to the box elements containing the From and To currency drop-downs. The drop-down elements will be arranged in a column layout using Flexbox. They'll be centered vertically and horizontally.

We also have a gap between the box elements, some padding, and a border radius:

      .currency {
        margin-top: 50px;
        padding: 20px 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        gap: 1.5rem;
      }

      .box {
        display: flex;
        align-items: center;
        justify-content: center;
      }

The select-option will have the following styles:

      .select-option {
        font-size: 16px;
        color: #333;
        padding: 20px;
        display: block;
        font-weight: 700;
        line-height: 1.3;
        width: 100%;
        max-width: 100%;
        margin: 0;
        outline: none;
        border-radius: 20px;
        border: 3px solid black;
      }

Finally, the convert button, the result, and the error message elements will have the following styles:

      button {
        width: 100%;
        height: 100px;
        padding: 10px;
        border-radius: 30px;
        border: none;
        font-size: 1.5em;
        align-items: center;
        background-color: black;
        color: #fff;
        margin-top: 30px;
      }
      .result {
        color: black;
        font-size: 2.5em;
      }
      .error {
        color: #800020;
        font-size: 12px;
      }

We're getting there! Now, let's convert currency with the JavaScript functionality.

JavaScript currency functionality

The JavaScript currency functionality will have two key parts:

Getting the currency code, currency name, and flag from the REST countries API
Getting conversion rate from the Exchange Rate API

REST countries API

The REST countries API provides an API with the endpoint https://restcountries.com/v3.1/all. There, you can filter results by providing the fields you are interested in. In our case, we want the country flag, currency name, and currency code.

The endpoint will look like this:

1	https://restcountries.com/v3.1/all?fields=currencies,flag

And here's how the resulting sample data will look like:

{
    "name": {
      "common": "Eritrea",
      "official": "State of Eritrea",
      "nativeName": {
        "ara": {
          "official": "دولة إرتريا",
          "common": "إرتريا‎"
        },
        "eng": {
          "official": "State of Eritrea",
          "common": "Eritrea"
        },
        "tir": {
          "official": "ሃገረ ኤርትራ",
          "common": "ኤርትራ"
        }
      }
    },
    "currencies": {
      "ERN": {
        "name": "Eritrean nakfa",
        "symbol": "Nfk"
      }
    },
    "flag": "🇪🇷"
  },

To make it easier to display our currencies, we will fetch the data and store it in a JavaScript file.

The script for fetching the data will look like this:

const url =
  "https://restcountries.com/v3.1/all?fields=name,currencies,flag";
fetch(url)
  .then((response) => response.json())
  .then((data) => {
    
    const result = [];
    data.forEach((country) => {
      if (Object.keys(country.currencies).length >0) {
        result.push({
          countryname: country.name.common,
          name: Object.values(country.currencies)[0].name,
          code: Object.keys(country.currencies)[0],
          flag: country.flag,
        });
      }
    });

    result.sort((a, b) => a.code.localeCompare(b.code));
    const jsonString = JSON.stringify(result, null);
    console.log(jsonString);

  });

The code above does the following:

We use the fetch() method to make an HTTP request to the REST countries API.
Then, we convert the response to JSON format and start processing the data.
From the response JSON, we first check if each country has a currency code—since not all countries have one.
If a country has a currency, we create an object with its name, code, and currency name and push it to the empty result array.
Next, we sort the currency code alphabetically.
Finally, we convert the result to JSON and print the stringified data to the console.

When you run the script in a browser environment, you should be able to copy the data to your JavaScript currency file. The data looks like this:

Another options is to add this link to your script using the src attribute.

Next, let’s get the select elements:

1	let fromCurrency = document.getElementById("fromCurrency");
2	let toCurrency = document.getElementById("toCurrency");

We have the data in an array, so it’s easier to append the currencies to the option elements of the fromCurrency and toCurrency select elements.

Create a function called addCurrency(). Inside the addCurrency() function, we use the forEach() function to loop through the currencies array. For each iteration, we want to add the currency code to the option element and append the option element to both the select elements:

 const result = currencies.forEach((currency) => {

    const optionFrom = document.createElement("option");
    optionFrom.classList.add("select-option");
    optionFrom.value = currency.code;
    if (currency.code === "USD") {
      optionFrom.selected = true;
    }
    optionFrom.text =`${currency.flag} ${currency.code} - ${currency.name}`;

    fromCurrency.appendChild(optionFrom);

    const optionTO = document.createElement("option");
    optionTO.classList.add("select-option");
    optionTO.value = currency.code;
    if (currency.code === "EUR") {
      optionTO.selected = true;
    }
    optionTO.text =`${currency.flag} ${currency.code} - ${currency.name}`;
    toCurrency.appendChild(optionTO);
  });

In the code above, we use the ForEach() function to iterate on each the currencies array data and do the following:

Extracts the currency key from the currencies array for each currency.
Gets the flag.
Gets the currency name.
Creates an HTML option element for the "fromCurrency" select dropdown.
Sets the option value to the currency code.
Sets the option text to a combination of the flag, the currency name, and the currency code.
Appends the created option element to the "fromCurrency" select dropdown.
Creates another option element for the "toCurrency" select dropdown with the same data as the fromCurrency.
Appends the created option element to the "toCurrency" select dropdown.
Finally, we invoke the addCurrency() function to apply the functionality.

The option value will be the currency code. The option text will be the currency flag, currency code, and currency name separated by a hyphen.

We also set the default currency in the fromCurrency option element to USD. We set EUR as the default currency for the toCurrency option element.

Now, our drop down is showing the currencies.

Code refactoring

From the addCurrency() function, you can see that we are repeating the same code to add the option values. Let’s create another function for generating the options for each currency element.

The function will look like this:

function createOption(country, defaultCode, element ){
    // console.log(country);
    const option = document.createElement("option");
    option.classList.add("select-option");
    option.value = country.code;
    if (country.code === defaultCode) {
      option.selected = true;
    }
    option.text = `${country.flag} ${country.code} - ${country.name}`;
    element.appendChild(option);


}

The createOption() function takes three parameters:

the country object
the default code
the element where the options will be appended

Next, update the addCurrency() function as follows:

function addCurrency() {
  const result = countries.map((country) => {
      createOption(country, "USD", fromCurrency );
      createOption(country, "EUR", toCurrency )

  });
}

The function is now easier to read since we don’t have any repetitive code.

Currency conversion

We will use the ExchangeRate API for currency conversion. The ExchangeRate API provides currency conversion rates for 161 currencies.

Head over to www.exchangerate-api.com and get a Free API key.

The API allows developers to convert currencies by providing a pair of currency codes in the request. For example, if you want to convert USD to EUR, your API call will look like this:

1	https://v6.exchangerate-api.com/v6/24faec6b42da4a96ceea41d3/pair/USD/EUR

The endpoint will give us the following result:

{
  "result": "success",
  "documentation": "https://www.exchangerate-api.com/docs",
  "terms_of_use": "https://www.exchangerate-api.com/terms",
  "time_last_update_unix": 1703721602,
  "time_last_update_utc": "Thu, 28 Dec 2023 00:00:02 +0000",
  "time_next_update_unix": 1703808002,
  "time_next_update_utc": "Fri, 29 Dec 2023 00:00:02 +0000",
  "base_code": "USD",
  "target_code": "EUR",
  "conversion_rate": 0.9015
}

Since we already have the codes in our select options, we will pass the values in the API and multiply the conversion rate by the amount to get the result.

Create a function called convertCurrency() function. In the function:

Get the display element
Get the values from the selected options
Store the url in a variable

const BASE_URL = `https://v6.exchangerate-api.com/v6/${apiKey}`;
const fromCurrrencyCode = document.getElementById("fromCurrency").value;
const toCurrencyCode = document.getElementById("toCurrency").value;
const result = document.querySelector(".result");
const error = document.querySelector(".error");

Ensure you supply your API key from the Exchange Rate API. You can obtain one for free here.

In the convertCurrency() function, we first check if a valid amount has been entered. If true, we perform a GET request to the exchange rate API with the currency pairs.

The response will contain the conversion rate. Finally we update the result with a formatted converted amount:

function convertCurrency() {
  const BASE_URL = `https://v6.exchangerate-api.com/v6/${apiKey}`;

  const fromCurrrencyCode = document.getElementById("fromCurrency").value;
  const toCurrencyCode = document.getElementById("toCurrency").value;
  const result = document.querySelector(".result");
  const error = document.querySelector(".error");

  console.log(fromCurrrencyCode);
  console.log(toCurrencyCode);

  const amount = input.value;

  if (amount !== "" && parseFloat(amount) >= 1) {
    const url = `${BASE_URL}/pair/${fromCurrrencyCode}/${toCurrencyCode}`;
    console.log(url);
    fetch(url)
      .then((resp) => resp.json())
      .then((data) => {
        console.log(data.conversion_rate);

        const conversionResult = (amount * data.conversion_rate).toFixed(
          2
        );
        const formattedResult = conversionResult.replace(
          /\B(?=(\d{3})+(?!\d))/g,
          ","
        );

        result.innerHTML = `${amount} ${fromCurrrencyCode} = ${formattedResult} ${toCurrencyCode}`;
        amount.innerHTML = " ";
      })
      .catch(() => {
        error.textContent = "An error occured, please try again later ";
      });
  } else {
    alert("Please enter an amount");
  }
}

If an error occurs, we display a message to the user, letting them know something went wrong.

For the conversion to work, let’s add an event listener to the convert button and invoke the convertCurrency() function, as shown below:

1	const convertBtn = document.querySelector(".convert");
2	convertBtn.addEventListener("click", () => {
3	convertCurrency();
4	});

Final result

Congratulations! You just created a nice and easy currency converter app. Here is the final result:

Keep learning, keep creating!

There you go! This tutorial has covered how to build an easy currency converter app that fetches real-time data from the Exchange Rate API.

You can add other functionalities to your website with plugins and templates designed by the pros. That's where Envato comes in! For a low monthly fee, you'll get unlimited downloads of web templates, WordPress plugins, CMS themes, and so much more.

Ensure you get your free API key from the ExchangeRateAPI, explore the Envato library, and have fun building things!

What to do when one of your WordPress plugins gets compromised

noemail@noemail.org (Suzanne Scacca) — Thu, 19 Dec 2024 23:39:51 GMT

There are over a billion websites. It’s much easier for hackers to exploit a single vulnerable resource that connects to countless websites than to go after them one at a time. This is why WordPress plugins are a popular way in which hackers break into websites.

So, let’s talk about what happens when one of your installed WordPress plugins is compromised. We’ll look at:

Some recent examples of hacked plugins.
The ramifications of having one of them on your website.
What steps you can take to re-secure your site and reduce the chances of your site being infected or exploited again.

The far-reaching effects of a WordPress plugin breach

Here are some examples of hacked plugins from 2024 and the wide-ranging impact they had on the WordPress community.

In June 2024, it was discovered that a supply chain attack breached not one, but nine WordPress plugins.

The malware distributed during this supply chain attack did a number of things to websites with these plugins installed.

For starters, it added a new admin account to the website, which gave the attacker full control. Also, it added malicious JavaScript to the footer, which distributed SEO spam throughout each site.

On June 22, 2024, the WordPress plugin review team posted a message to the board of the Social Warfare social media sharing plugin. It read:

“The WordPress.org Plugin Review Team was notified that a malicious actor had taken over Social Sharing Plugin – Social Warfare. As a result, versions 4.4.6.4 to 4.4.7.1 of the plugin created users with administrative privileges.

The Plugin Review Team has disabled it and released a ‘clean’ updated version: 4.4.7.3. Please update immediately.

If you have used versions 4.4.6.4 to 4.4.7.1 of the Social Warfare plugin, we strongly recommend you do an in-depth review of your site’s activity and user account details.”

This alert caught the attention of Wordfence two days later. The team analyzed the infected file and checked it against their Threat Intelligence platform. They discovered that four other WordPress plugins contained the same malicious code:

Blaze Widget
Wrapper Link Element
Contact Form 7 Multi-Step Addon
Simply Show Hooks

That wasn’t the end of this saga. On June 28, Wordfence discovered four more compromised plugins:

WP Server Health Stats
Ad Invalid Click Protector (AICP)
PowerPress Podcasting plugin by Blubrry (powerpress)
Seo Optimized Images (seo-optimized-images)

Unlike Social Warfare which was patched, some of these plugins have been delisted. For instance, this is what the plugin page looks like for BLAZE widget:

There’s a warning at the top of the screen that reads:

“This plugin has been closed as of June 24, 2024 and is not available for download. This closure is permanent. Reason: Security Issue.”

Although you can still see these plugin pages in the repository, no one will be able to install or use them in the future.

The Really Simple Security critical authentication bypass vulnerability

Unlike the supply chain attack which didn’t impact any super popular plugins, the Really Simple Security plugin exploit affected over 4 million websites. Yikes.

On November 6, 2024, Wordfence discovered the critical authentication bypass vulnerability.

It gave the hacker the ability to access and exploit any users’ accounts (including the admin) when Really Simple Security’s two-factor authentication was enabled.

Wordfence contacted the plugin author the same day and received a response back on November 7. The patched update was released to Pro users on November 12 and Free users on November 14. In conjunction with WordPress, they attempted to force-install the critical update on anyone’s site who had the vulnerable version of the plugin.

In addition, the author emailed its users early on the morning of November:

This type of swift and widespread response was critical, considering the threat level of this particular exploit.

Although WordPress has long been able to force critical security updates like this one, it doesn’t always work as intended.

In fact, I learned about this attack because one of my WordPress students received the email above. When we went into her site, I saw that she still had the vulnerable version of the plugin installed. For some reason, the force-patch didn’t work. To make matters worse, her web developer was unaware of the vulnerability, too. So, it was this email that brought her attention to the matter.

When and why WordPress plugins become a problem: The facts

According to Patchstack’s State of WordPress Security in 2024, 97% of the WordPress software vulnerabilities they discovered were attributed to plugins. WordPress themes accounted for 3% and the WordPress core for 0.2%.

This doesn’t mean that WordPress plugins are generally unsafe to use. Nor does it mean that having a vulnerable plugin installed automatically means your website has been infected.

Most plugin authors do a great job of monitoring their software, removing bugs and malware, and quickly sending patches out to end users via updates. However, unless those updates are set to automatically go through on every WordPress website, that’s when it becomes an issue.

According to Patchstack:

42% of WordPress sites in 2023 had at least one vulnerable piece of software installed

So, running outdated versions of WordPress plugins is a problem. But that’s not at all. Abandoned plugins are hugely problematic as well.

According to WPScan’s 2024 Website Threat Report, they informed WordPress about 827 plugins and themes that had been abandoned by their developers. Only 58.16% of them were permanently removed from the repository on wordpress.org. What’s more, many of those that remained contained vulnerabilities.

As the report notes:

“We reported 404 of those plugins in a single day to draw attention to the ‘zombie plugin pandemic’ in WordPress. Such ‘zombie’ plugins are components that seem safe and up-to-date at first glance, but may contain unpatched security issues. Furthermore, such plugins remain active on user sites even if they are removed from the WordPress plugins repository.”

As a result, this puts a lot of the responsibility of ensuring plugin integrity on website designers, developers, and owners.

With how pervasive of an issue this is, unpatched, unmanaged, and abandoned WordPress plugins create tons of work and headaches for web developers and designers. Not only do they force you to drop everything to manage the plugin patch and website repair, but they can put you in a tenuous position with the website owner (i.e. your client or employer).

Because, let’s face it, they’re not going to get mad that a plugin was poorly coded or managed. They’re going to care that you vetted it and then used it on their site. They’re especially going to care if their website is defaced, taken offline, or blacklisted as a result. And they’re going to be even more irate if their end users’ private data is stolen and exploited.

What to do if one of your WordPress plugins is compromised

WordPress plugins are not the problem. We’re able to accomplish incredible things in web design and development—and easily, too—thanks to plugins.

The problem is that WordPress is the most popular content management system in the world.

Owing to WordPress’ widespread use, its vulnerabilities are well-known to bad actors. All it takes is one small misstep when coding a plugin to let one of them in. Or for a plugin to go unmanaged for so long that someone with bad intentions finally manages a way to exploit it.

As someone who uses WordPress plugins, you can’t stress about that. Instead, what you need to focus on is what to do if or when one of your installed plugins has been compromised:

Step 1: Review the vulnerability report

If you learn that one of the plugins you use has a vulnerability, see if you can find information on what it is and how it works.

Your plugin author may send you a notice (as Really Simple Security did) explaining the incident. It’s also a good idea to refer to WordPress security sources like Patchstack, WPScan, and Wordfence which regularly monitor and report on vulnerabilities.

For example, Wordfence regularly updates its vulnerability database and organizes it by plugins, themes, and core:

By educating yourself on the nature of the vulnerability, you’ll know what to look for when cleaning up and repairing your website.

Step 2: Update the plugin in question

Unless a WordPress plugin has been abandoned, the plugin author should have a patch ready soon after the vulnerability is detected.

While WordPress has had the ability to force a critical security update since around 2015, it isn’t always a foolproof method (as evidenced by my student’s website).

If you don’t have automated plugin updates set up, then you’ll need to log into WordPress and manually push through the patch as soon as it’s available. It’s a good idea to log in and confirm it happened regardless.

For reference, you can enable auto-updates from the WordPress Plugins screen. There’s a button that appears directly to the right of your plugins that looks like this:

Step 3: Find an alternative (optional)

Depending on the severity of the vulnerability or the history you have with the plugin, you might decide it’s best to deactivate and delete it altogether.

If that’s the case, go to your preferred plugin repository like WordPress.org or CodeCanyon.

There are certain things to look for when vetting WordPress plugins. For instance, Simply Show Hooks was one of the impacted plugins in the supply chain attack.

The red warning at the top of the page is a clear sign to stay away. However, if you look at the data on the right, there are a couple more red flags.

For instance, the last time the plugin was updated was 8 years ago. Also, it was only tested up to WordPress version 4.6.29. We’re currently at 6.7.1.

If you’re purchasing premium WordPress plugins from CodeCanyon, there are other things to look for. Let’s look at this example of Filter Everything:

Here’s what you should pay attention to:

Reviews and Comments: The overall rating is important as it tells you a lot about the quality of the plugin and support provided. However, you can also search the Comments for keywords like “security” and “vulnerability” to see if there have been issues in the past and to see how they were handled.

Live Preview: Take a look at how the landing page or the plugin demo work. If the page is broken or severely outdated, then that’s a good sign to stay away.

“Quality checked by Envato”: In the licensing/pricing box in the top-right, you’ll see this notice. Having Envato’s seal of approval on a plugin is a must.

Author Status: On the right, you’ll not only see the author’s status, but also their accolades. For instance, Stepasyuk has the following:

Elite Author
Featured Item
Top Monthly Author
Trendsetter
Weekly Top Seller
Author Level 9
Collector Level 1
Exclusive Author
11 Years of Membership

If you want to know if you can trust the integrity of the plugin and author, this section will provide you with proof.

Last Update: The last bit of info to check out is the last plugin update date. Ideally, it should be within the last three months. Six months maximum.

Step 4: Perform a security scan and cleanup

According to Sucuri’s 2021 Hacked Website Report:

“Website owners are often averse to taking all the necessary post-infection steps, but if measures aren’t taken the attackers are likely to return.”

Updating an insecure plugin is an essential step. But even if your website seems fine, post-incident steps are necessary, too.

Start by visiting your website. Go through as many pages as you can (this includes the page source code where possible) seeing if you spot any differences. Malware can take lots of forms, including SEO spam, redirects, defacing, code comments, or even the white screen of death. They’re not always obvious, but some you can spot on your own.

Next, do a security scan. Most WordPress security plugins have them. Not only can they tell you if malware is detected, but they often have a log containing recent file changes. If anything there looks suspicious, dig into it.

Also, review your list of administrative users. Any that weren’t there before the incident or that you don’t recognize should be followed up on or deleted.

You’ll want to remove unauthorized user access as well as to delete any malicious code and content injected into your site. If you’re not able to do that easily enough, consider rolling back your website to before the security breach date. You can do this with the help of a WordPress backup plugin or with any backups saved by your web hosting service.

Step 5: Create a stronger plugin management process

To reduce the chances of another vulnerable plugin threatening your site or wreaking havoc on your workload, put a plugin auditing and management system into place. Here are some things to include:

Use a WordPress security plugin to fortify your site from within.
Take advantage of your web host’s security features, including security scanners.
Only install trusted, well-rated, and regularly maintained plugins.
Automate updates for WordPress plugins you know you can trust.
Log into your site and check on available updates every few days (at least).
Back up your website before every major update.
Audit your plugin list every three to six months.
Delete unused plugins along with any data they stored on your server.
Watch for outdated or abandoned plugin warnings and find suitable replacements ASAP.

It’s also a good idea to subscribe to at least one WordPress security blog, like Sucuri and Wordfence. Also, WordPress state-of-security reports (like the ones mentioned earlier in this post) are important reads. This way, you’ll be aware of common threats, know when one of your plugins has been hacked, and know which plugins to avoid as you look for new ones to try.

Conclusion

Knowing how vulnerable WordPress plugins can be to attack, there are certain steps you can take to ensure your website and end users aren’t seriously impacted if one of the plugins you use gets exploited.

In addition to being more mindful about which plugins you install and keeping them updated, it’s a good idea to make security a priority in general when working with WordPress.

For reference, while WordPress plugins are responsible for 97% of software-based vulnerabilities, Sucuri found that only 36% of the compromised websites they discovered in 2022 had a vulnerable theme or plugin installed. So, securing your site from as many angles as possible is a must.

Here’s some further reading with best practices to help you keep your WordPress website secure:

How to build horizontal marquee effects with GSAP

noemail@noemail.org (George Martsoukos) — Tue, 18 Jun 2024 17:48:29 GMT

New to GSAP?

First things first: did you get here 'cause you're curious about GSAP, but don't know exactly what it is? Let's give it a quick overview.

So, what is GSAP?

GSAP is a JavaScript animation library from GreenSock. You can create high-quality GSAP animations. These will perform well in every browser you're using.

There are also GSAP plugins that will help you achieve more, by expanding the GSAP library capabilities.

Previous GSAP tutorials

In the past, I’ve shown you how to use GSAP to build different effects. From cursor hovers and a page loading GSAP animation to a draggable image gallery.

The process

You can certainly create a marquee effect in CSS only by animating the transform property. However, in this tutorial, we’ll discuss how to build them using GSAP. This way, we can take advantage of all the extra goodies of this library.

In its simplest form, all we need to create marquees with GSAP are the horizontalLoop() and verticalLoop() helper functions.

In our case, we’ll only focus on horizontal GSAP marquee animations as they’re more popular.

Basic horizontal marquee

In the most straightforward implementation, consider the following demo. We'll infinitely animate some logos:

The required JavaScript marquee code is as follows:

window.addEventListener("load", function () {
  horizontalLoop(".marquee-item", {
    repeat: -1,
    paddingRight: 40,
    speed: 0.5,
  });
});

Let’s pay attention to the paddingRight configuration property. We use a value that matches the gap (40px) between the GSAP marquee items.

We do this to prevent the overlapping between the first and last elements. Also, to give them a space that matches the other elements. That said, if you put paddingRight: 0, you’ll end up with this result:

Horizontal marquee with stops

In this case, each marquee item contains the same text and a Lottie animation. To avoid bloating our HTML, we generate the horizontal marquee items using JavaScript. In a real-world scenario, we can also put ARIA attributes to improve the accessibility.

Each time we hover over an item, the HTML marquee effect pauses. To achieve this, we use the pause() and play() methods that are available to a GSAP timeline. Scroll down to the footer in this demo to see the effect:

Horizontal marquees with reversed directions

Let’s now work on a more complicated example. Consider the following demo. In this one, we have two horizontal marquee effects that run in opposite directions:

Their direction is determined by the value of the data-reversed HTML attribute.

So, what makes this demo interesting? We use GSAP’s matchmedia() method to apply different paddingRight and speed property values depending on the screen size. Be sure to test it by resizing your browser window.

Play horizontal marquees when in view

In the following demo, we put GSAP’s ScrollTrigger plugin into play. We play the marquees only when they are in view. This way we do our best to ensure that the site visitors will see all our animated items.

Again, use your browser inspector to test how the GSAP animations stop when the related html marquee exits the viewport.

Horizontal marquee like slider

In this example, our marquee behaves like a slider. It autoplays, and there are arrows for navigating back and forth.

Additionally, we use GSAP’s Draggable plugin to enable drag functionality. This happens by passing the draggable: true configuration property to the horizontalLoop() function.

If you’re a GSAP Premium or Business member, you can make the dragging smoother using the Inertia plugin.

As a bonus, the HTML marquee stops each time we hover over an image. At that moment, its corresponding overlay appears with a slide GSAP animation.

Once again, resize your browser window to test how the layout changes.

There you go, GSAP guru!

Hopefully, you enjoyed the GSAP marquees we built. Now you have enough knowledge and inspiration to start building your own.

On the other hand, if you'd like to try professionally designed web templates to save you some time, try out an Envato subscription. It gives you access to millions of high-quality creative assets that you can use to improve your site.

Last but not least, I have added all the demos of this tutorial to a CodePen Collection. Be sure to check it out and give it some love!

As always, thanks a lot for reading!

Send email in Python with the API method: A step-by-step guide

noemail@noemail.org (Veljko Ristić) — Fri, 6 Sep 2024 08:33:24 GMT

If you want to send emails in Python, use a reliable and secure email API solution. In this article, you’ll learn the step-by-step process of sending emails in Python using the API method.

Setting up the email API

To streamline email sending in Python, you can use a transactional email service such as Mailtrap, Gmail API, Sendgrid, etc. And, an API also allows you to automate much of email sending

Now, I’ll show you how to send different types of emails (plain text, email with attachments, HTML emails) and email multiple recipients in Python using an email API Before that, let’s understand how to set up an email API:

Choose an email API: To get started, choose an email API according to your preferences. Make sure it offers Python SDKs to send automated emails (for example Mailtrap’s Python SDK).
Sign up: Sign up to the chosen email API provider.
Connect and verify your domain: Next, connect and verify your domain with the email API service provider you’ve chosen. If not verified, you will be able to send emails to the account owner’s email address only.

This ensures recipients only receive genuine emails, avoiding spam. Based on the service provider, complete domain authentication.

Install email API library: Let’s call our email API - “MyEmailAPI”. Ensure the Python app is installed in your system and then install MyEmailAPI’s Python SDK using the below command:

pip install myemailapi

Send a plain text email

Step 1: Create your mail object and fill in the variables

import myemailapi

# Create a mail object

mailobj = Mail(
        newsender= Address(email1=“testmail@domain.com”, name=“Test Sender”),
        to=[Address(email1=“reciever@example.com”, name=“Test Receiver”)], 
        newsubject=“Test email”,
        newtext=“This is a plain-text email.”,
)

Now, create the email client using your API tokens by:

Opening your email API account
Finding API tokens and copying the credentials

Step 2: Send your message

# Define email API client and send email

1	emailclient = MyEmailAPIClient(newtoken=“new-api-key”)
2	emailclient.send(mailobj)

Here’s the complete code snippet:

from myemailapi import Mail, EAddress, MyEmailAPIClient     
mailobj = Mail(
             # Define sender address and name
             newsender=Address(email1=“testmail@domain.com”, name=“Test Sender”),
             # Define receivers
             to=[Address(email1=“receiver@example.com”, name=“Test Receiver”)], 
             # Email subject
            newsubject=“Test email”,
            # Define plain text
            newtext=“Hi,/nThis is a plain-text email.”,
 )

# Define MyEmailAPIClient using your API keys 
emailclient = MyEmailAPIClient(newtoken=“new-api-key”)

# Send your plain-text email
emailclient.send(mailobj)

print(“Congrats! You’ve successfully sent your first plain text email in Python.”)

Send an HTML email

Follow the instructions to send an HTML email:

Specify the HTML Parameter: Specify the ‘html’ parameter for the object - “Mail”. This is where you’ll keep the HTML content you create. Email clients that can display HTML will render this email section.
Fallback Text Content: If an email client can’t render HTML content, the plain text you’ll define inside the email will be used as the fallback. This is also useful for end-users preferring pure text-based emails.

Here’s the full code snippet for sending a Python email with HTML content:

from myemailapi import Mail, EAddress, MyEmailAPIClient     

mailobj = Mail(                         # Create the Mail object for the HTML email
             # Define sender address and name
             newsender=Address(emailaddress=“testmail@domain.com”, name=“Test Sender”),
             # Define receivers
             to=[Address(emailaddress=“receiver@example.com”, name=“Test Receiver”)], 
             # Define email subject
            newsubject=“HTML email”,
            # Define text
            newtext=“Hi,/nEmail client can’t render HTML? Use this fallback text.”,
            html_text=“””
            <html>
                      <head>
                                 <title>Title</title>
                      </head>
                                 
                      <body>
                                <h1>Hi, there!</h1>
                                 <p>This is text HTML content sent using MyEmailAPI.</p>
                      </body>
            </html>
            “””,
 )

# Define MyEmailAPIClient using your API keys 
emailclient = MyEmailAPIClient(newtoken=“new-api-key”)

# Send your HTML email
emailclient.send(mailobj)

print(“Congrats! You’ve successfully sent your first HTML email.”)

Send an email to multiple recipients

Follow the below instructions:

Multiple Recipients Configuration: I’ll change the recipient section to set up the email for more recipients. Instead of using only one ‘to’ address, we’ll use multiple addresses.

Setting the ‘To’ field: In the below code, we’ll define two recipient addresses for the ‘To’ field- receiver1@example.com and receiver2@example.com. In addition, we’ll define names for each recipient - Test Receiver 1 and Test Receiver 2.

Here’s the complete code for sending an email to multiple recipients in Python:

from myemailapi import Mail, EAddress, MyEmailAPIClient     

# Create the Mail object for multiple recipients 
mailobj = Mail(  
               # Define sender address and name
               newsender=Address(emailaddress=“testmail@domain.com”, name=“Test Sender”),
               # Define receivers
              to=[
                    Address(emailaddress=“receiver1@example.com”, name=“Test Receiver 1”)],
                    Address(emailaddress=“receiver2@example.com”, name=“Test Receiver 2”)], 
              ],
             # Define email subject
             newsubject=“ This is email subject”,
             # Define text
             newtext=“Hello, /nThis email has multiple recipients.”,
 )

# Define MyEmailAPIClient using your API keys 
emailclient = MyEmailAPIClient(newtoken=“new-api-key”)

# Send email
emailclient.send(mailobj)

print(“Congrats! You’ve successfully sent emails to multiple recipients in Python.”)

Send an email with attachments

Follow the below instructions:

Specify the file path: First, specify the file path for the attachments. The code will read the file content as bytes to ensure each attachment has proper encoding. This way, attachments are transmitted securely over the network.

Encode in Base64: Ensure to encode the file content in base64 to protect it from malicious actors as email protocols lack binary-safe features. When you encode your file content, the binary data will be converted into text for secure transmission. Use the following method to encode the file content:

base64.b64encode

Create the file Attachment: Create the Attachment class instance with the following parameters:

disposition_new: To indicate the file as an attachment, the ‘disposition_new’ is set to ‘Disposition.ATTACHMENT’.
content_new: It represents the file content encoded in base64
mimetype_new: The parameter signals email clients about the file type.

Here’s the complete code:

from myemailapi import Mail, EAddress, MyEmailAPIClient Attachment, Disposition
import base64
from pathlib import Path

# Define files to attach 
filepath = Path(“thisis/your/filepath/abc.pdf”)           # Insert your file’s name 
filecontent = filepath.read_bytes()   

# Base64 is used to encode the content of the file 
encodedcontent = base64.b64encode(filecontent)

# Specify the email object with an attachment 
mailobj = Mail(
               # Define sender address and name
               newsender=Address(emailaddress=“testmail@domain.com”, name=“Test Sender”),
               # Define receiver
              to=[Address(emailaddress=“receiver@example.com”, name=“Test Receiver”)],
              # Define email subject
             newsubject=“ Attachment inside!”,
             # Define text
             newtext=“Hello, /nThis email has an important attachment.”,
             # Define email attachment
             attachments_new=[
                 Attachment(
                       content_new=encodedcontent,                        
                       filename_new=filepath.name,                      # The file name 
                      disposition_new=Disposition.ATTACHMENT,      
                      mimetype_new= “application/pdf”,                       # The file type used here is PDF
               )
         ],
   )

# Define MyEmailAPIClient using your API keys 
emailclient = MyEmailAPIClient(newtoken=“new-api-key”)

# Send email
emailclient.send(mailobj)

print(“Congrats! You’ve successfully sent emails with an attachment.”)

Test the email before sending

Before you send bulk emails using an email API service, make sure you test it beforehand on a test server. This is similar to testing a new application or rolling out a new feature in your app.

An email testing API will work like a third-party web server. You’ll get a secure staging environment where you can handle your email traffic internally and check if the email sending functionality is working fine. You can also detect and resolve bugs and errors before sending your emails to targeted recipients. In addition, you can preview and evaluate your email content across different devices and email clients in order to optimize your message.

As a result, you’ll be able to:

Send emails to the right recipients and enhance email deliverability
Avoid spamming recipients with too many test emails
Prevent sending emails with broken links, especially in transactional emails like subscription confirmation emails
Safeguard your domain reputation by preventing domain blacklisting or getting higher spam scores

Thus, before you send your emails, send them to a designated email address using an email testing API. View the email content, check links, fix issues, and then only send your emails to the target audience.

In the below section, I’ll show you how to test an email using a hypothetical email testing API - ‘EtestAPI’. Here’s how to get started step-by-step:

Connect to the EtestAPI client
Define email content - subject, text, attachments (if any), sender, and receiver(s)
Generate a POST request to EtestAPI using your data and API token.

Here’s the full code to test your email using EtestAPI:

# Import ‘json’ and ‘requests’ libraries for handling JSON data and HTTP requests
import requests
import json

# Define a function ‘test_my_email’ with parameters for email testing
def test_my_email(etestapi_token1, inbox_id1, sender_email1, recipient_email1, subject, text):
    url = f"https://api.etestapi.com/v1/inboxes/{inbox_id1}/messages"
    headers = {
        "Authorization": f"Bearer {etestapi_token1}",
        "Content-Type": "application/json",
    }
    
    data = {
        "from": [{“sender_email1”: “sender@domain.com”, “name”: “Test Sender”}],
        "to": [{“recipient_email1”: “receiver@example.com”, “name”: “Test Receiver”}],
        "subject": “Email Test”,
        "text": “Hi,/nLet’s perform email testing”,
    }
    

    # Convert data to a JSON string
    json_data = json.dumps(data)

    # make a POST request using ‘requests.post’ to send your email to EtestAPI and get the response in JSON
    response = requests.post(url, headers=headers, json_data)

    if response.status_code == 200:
        print("Congrats! Your email test is successful!")
        print("The test email is sent to EtestAPI inbox.")
    else:
        print(f"Test email failed: {response.status_code}")
        print(response.text)

Explanation:

‘url’: API endpoint URL is constructed
‘headers’: Headers are set up, defining the type of content and API token
response.status.code: It helps you check whether your email was successfully sent to the email test API.

Summing up

Using a reliable and secure email API solution allows you to send emails faster, without hassles. If you run a business, an email API will help you automate the process. Thus, you can send highly personalized and bulk emails quickly with a few lines of code as we’ve mentioned above.

We also recommend you refer to the Python documentation and the email API solution you prefer. Keep experimenting with new code and exploring email-sending functionalities.

How to clear the WordPress cache

noemail@noemail.org (Suzanne Scacca) — Fri, 27 Dec 2019 17:05:21 GMT

In this post, we’re going to briefly cover what the WordPress cache is along with 5 methods you can use (and when to use each) to clear your cache.

Caching is an integral process for the performance of a website. However, there are times when caching can cause problems for us. So knowing how to clear the WordPress cache, when to do it, and the different methods is just as important as understanding what caching does in the first place.

Here are the 5 methods we’ll be covering:

Method 1: Clear the Browser Cache
Method 2: Clear the Cache with a WordPress Plugin
Method 3: Clear the Cache from Your Firewall
Method 4: Clear the Cache from Your Web Hosting Account
Method 5: Clear the Cache Using Your CDN

What Is Caching?

Caching refers to a process where information from a web page gets saved to a temporary storage location. When caching is enabled, the browser retrieves a copy of this saved data to quickly serve up the requested URL to the user’s screen.

This is important because, without caching enabled, visitors would have to wait for the web server to transmit all of the related HTTP requests (including text, media files, scripts, stylesheets, and more) to the browser. Web pages with dozens of assets and drawing on lots of resources would take far too long to load without the efficiency of caching.

While this process may still need to happen upon their first visit, subsequent visits to the same pages should load significantly faster thanks to the cached content.

Here’s a basic illustration of how a server handles HTTP requests from a browser without caching enabled:

Each asset and script represents an individual HTTP request. So the more content on a page there is and the more stuff that’s happening in the background, the longer it’s going to take for the server to deliver it and the browser to display the page.

Here’s a basic illustration of how it looks when caching is enabled:

It’s not always the case that every asset is stored in the cache (especially when it comes to dynamic content). Nor is it always the case that the browser is the resource with the cached copy of the web page. In some cases, it’s WordPress (and the web server) delivering a static HTML file to the browser.

Regardless of where the cache lives, the process is greatly simplified and your web visitors reap the benefits.

Why You Might Need to Clear the WordPress Cache

While caching is super helpful for speeding up resource-heavy web pages, it can sometimes cause issues for us.

For instance, let’s say you’ve made some edits to a web page. You open the preview from WordPress to see how it looks on the frontend of your site. However, nothing appears to have changed. This is likely because it’s stuck in the cache.

This problem can also occur within certain plugins. Slider Revolution, for instance, has its own live editing and preview modes. However, if the older version of the design you’re working on gets stuck in the plugin’s cache, the preview may appear outdated.

Caching is supposed to make the process of loading web pages in the browser more efficient. However, if the browser or your server don’t receive the message that the content has been updated, then you might end up seeing old data that’s stored in the cache.

How to Clear the WordPress Cache

So, the question becomes, how do you manage the cache in WordPress?

There are five methods you can use to clear the WordPress cache with a plugin and without a plugin. Let’s go through them one at a time along with the best use case for each.

Method 1: Clear the Browser Cache

Let’s say you type your domain name into the browser and then nothing appears except for a vague 500 internal server error message.

The first thing you’ll probably try is refreshing your screen. If that doesn’t work, then manually clearing your browser cache would be a good idea. This is something your hosting support will recommend as well if you still can’t access the site after troubleshooting the issue on the backend.

To clear your browser cache, open the Settings panel. In most browsers, it’s tucked away under a hamburger menu or kebab menu icon in the far-right corner.

Here’s where it is in Brave:

The Settings panel will usually load in a new tab.

If it’s not obvious where the browsing history or caching settings are, use the search bar to find them by typing in “cache”.

Go to the Delete browsing data section. A pop-up or new screen will appear that allows you to select which actions you need.

Unselect Browsing history and Cookies and other site data. Keep Cached images and files selected. Then click Delete data.

This will clear your browser cache. Return to your website to see if the page is restored or the new content is there. If not, you may want to try again after closing and reopening your browser.

Method 2: Clear the Cache With a WordPress Plugin

If you’ve encountered a problem with your website not reflecting the changes you’ve made in WordPress, then the best solution is to clear the cache with a WordPress performance plugin. LiteSpeed Cache, WP-Optimize, and WP Fastest Cache are the most popular and highest rated.

Most of these performance plugins add a purge button to the WordPress toolbar. Regardless, I’m going to walk you through each of these top-rated solutions so you can see where all the cache clearing options are.

Clearing the WordPress Cache With LiteSpeed Cache Plugin

To clear the cache, located the LiteSpeed icon in the toolbar:

Hover over it and you’ll find settings to:

Purge All
Purge All - LSCache
Purge All - CSS/JS Cache
Purge All - Opcode Cache

LSCache refers to purging the plugin’s server cache. CSS/JS refers to purging just the cached CSS and JavaScript. And OpCode refers to clearing the object caching, which stores database queries and is an optional setting.

Clearing the WordPress Cache With WP-Optimize Plugin

With WP-Optimize caching enabled, there are two places where you can clear the WordPress cache. The first is in the toolbar. Click Purge cache to instantly clear it.

The other place to do this is within the plugin screen. Locate WP-Optimize on the sidebar. Then go to the Cache screen.

Click the Purge cache button. It will tell you exactly how many files and bytes are about to be removed from the cache.

Clearing the WordPress Cache with WP Fastest Cache

There are two places within this plugin to manage the WordPress cache. The first is the Delete Cache button in the toolbar.

From here, you can:

Clear All Cache
Delete Cache and Minified CSS/JS
Go to the settings

From the plugin panel, you’ll be able to delete the entire cache plus any minified CSS and JavaScript you have.

With this plugin, if you clear only the cached files, it won’t include the minified CSS or JavaScript. So be sure to use the second cache clearing option to remove all the saved data from the server.

Method 3: Clear the Cache From Your Firewall

If clearing the cache in your WordPress performance plugin doesn’t help, the next place to check is your firewall (if you have one installed).

Sucuri Security is one such WordPress firewall plugin that will cache your pages. When content isn’t updating on the frontend, clearing the cache inside this plugin might help.

To do this, locate Sucuri Security on the sidebar. Then go to the Clear Cache tab.

Click the Clear Global Cache button at the bottom. Or if it’s just one page that you’re having problems with, enter the path into the field and then hit Clear Cache.

Method 4: Clear the Cache From Your Web Hosting Account

Usually, clearing the cache inside of WordPress and/or your browser should be enough to fix whatever problem you’re experiencing. However, if there still seems to be a disconnect between the content in WordPress and what’s showing on your website, log into your hosting account.

With SiteGround hosting, for instance, there’s a section under Site Tools called Speed. Within it, there’s a Caching tool.

For the most part, you’ll use this tool to enable the following types of server caching:

NGINX Direct Delivery
Dynamic Cache
Memcached

You won’t be able to clear the NGINX cache. However, you can manage both the dynamic cache as well as memcached, which both cache dynamic content.

To clear either of these caching settings, go to the respective tabs, hover over the Actions icon on the right, and select Flush Cache.

When you’re done, return to your website to check that the issue has resolved.

Method 5: Clear the Cache Using Your CDN

There’s one other place where your content may be getting stuck. And that would be your content delivery network (CDN).

If you have a CDN enabled in your web hosting account, open it up and look for a setting that allows you to purge the cache. In SiteGround, for instance, this setting is under Site Tools > Speed > CDN.

Various WordPress security plugins as well as image optimization plugins include CDNs as well. If these CDNs are activated, open up your plugin to see if there’s an option to clear the cache from there.

Frequently Asked Questions About Clearing the WordPress Cache

Before wrapping up, let’s quickly address the most common questions and concerns when it comes to clearing the cache.

Is It Safe To Clear the Cache in WordPress?

Yes. Manually clearing the WordPress cache deletes data saved in a temporary location, not from your actual website or server.

Eventually, all cached data gets cleared. WordPress caching plugins enable us to set an automated schedule for cache clearing or to define rules for when it should happen (like when a page has updated). When we manually clear it, we’re just doing it earlier than expected.

Where Are the Cache Settings in WordPress?

When you have a performance or caching plugin installed, there’s usually a Clear cache / Purge cache / Delete cache quick-action link in the top toolbar.

You can also access these settings from within your caching plugin’s settings.

How Often Should You Clear the WordPress Cache?

The nice thing about using a WordPress caching plugin is that you can automate this process. How frequently this plugin clears the cache, however, depends on how frequently you update your content.

For example, a small business website with a Home page, About page, some Services pages, and a Contact page won’t need the cache cleared frequently because the content won’t change much (if at all). If you can keep your server from having to reprocess the same files and content, that’s ideal. So you could probably get away with clearing the cache once every week or two.

On the other hand, let’s say you have an ecommerce site or a blog. New content is likely published daily or weekly. So your cache should be cleared at a similar interval. This will ensure that visitors always see the latest information on your site.

Conclusion

Without caching, you’d have two choices:

You could create smaller web pages, resembling the basic HTML-based pages of Web 1.0. This would limit the amount of data your server would need to process and transmit browsers. Or you could keep on creating beautiful, modern web pages, but leave your visitors waiting far too long for them to load every time they visit them.

It’s important to remember, though, that caching can cause some issues if it’s not cleared automatically or frequently enough. So understanding how to manage the WordPress cache and when and where to delete this stored data is critical.

1	<div class="editor">
2	<div class="editor-header">SVG Code Editor</div>
3	<textarea
4	id="svgInput"
5	placeholder="Paste your SVG code here and watch the magic happen..."
6	></textarea>
7	</div>

1	<div class="preview">
2	<div class="preview-header">SVG Preview</div>
3	<div class="preview-content">
4	<div id="previewContainer" class="preview-container"></div>
5	</div>
6	</div>

1	<div class="main">
2	<header>
3	<h1>SVG Preview Tool</h1>
4	<p>Edit, preview, and export clean, scalable vector art</p>
5	</header>
6	<div class="container">
7	<div class="editor">
8	<div class="editor-header">SVG Code Editor</div>
9
10	<textarea
11	id="svgInput"
12	placeholder="Paste your SVG code here and watch the magic happen..."
13	></textarea>
14
15	</div>
16	<div class="preview">
17	<div class="preview-header">SVG Preview</div>
18	<div class="preview-content">
19	<div id="previewContainer" class="preview-container"></div>
20	</div>
21	</div>
22	</div>
23
24	<button id="exportBtn">Export SVG</button>
25	</div>

1	@import url("https://fonts.googleapis.com/css2?family=DM+Mono:ital,wght@0,300;0,400;0,500;1,300;1,400;1,500&display=swap");
2
3	* {
4	margin: 0;
5	padding: 0;
6	box-sizing: border-box;
7	}
8
9	body {
10	display: flex;
11	min-height: 100vh;
12	justify-content: center;
13	padding: 20px;
14	font-family: "DM Mono", monospace;
15	}
16
17	header {
18	max-width: 420px;
19	text-align: center;
20	margin-bottom: 40px;
21	}
22
23	h1 {
24	font-size: 30px;
25	font-weight: 700;
26	margin-bottom: 8px;
27	}
28
29	header p {
30	font-size: 18px;
31	}

1	.main {
2	display: flex;
3	flex-direction: column;
4	align-items: center;
5	gap: 24px;
6	width: 100%;
7	max-width: 1000px;
8	height: 90vh;
9	min-height: 700px;
10	margin-top: 50px;
11	}
12	.container {
13	display: flex;
14	height: calc(100% - 84px);
15	gap: 20px;
16	width: 100%;
17	}

1	.editor {
2	border: 1px solid #7287f2;
3	}
4
5	.editor,
6	.preview {
7	width: 50%;
8	display: flex;
9	flex-direction: column;
10	border-radius: 16px;
11	overflow: hidden;
12	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
13	}
14
15	.editor-header,
16	.preview-header {
17	padding: 12px 20px;
18	font-weight: 600;
19	font-size: 14px;
20	text-align: center;
21	width: 100%;
22	color: white;
23
24	}
25
26	textarea {
27	/* width: 100%; */
28	height: 100%;
29	border: none;
30	padding: 20px;
31	font-size: 13px;
32	resize: none;
33	background: #2e3138;
34	color: white;
35	overflow-y: auto;
36	}
37
38	textarea:focus {
39	outline: none;
40	}
41
42	.preview-container {
43	width: 100%;
44	height: 100%;
45	border-radius: 16px;
46	background-color: #f9fafb;
47	overflow-y: auto;
48	}
49
50	.preview-content {
51	flex: 1;
52	padding: 16px;
53	overflow: hidden;
54	}
55
56	.svg-container {
57	display: flex;
58	justify-content: center;
59	overflow: hidden;
60	}

1	.error-message {
2	color: #dc2626;
3	background: #fef2f2;
4	border: 1px solid #fca5a5;
5	padding: 16px;
6	margin: 20px;
7	border-radius: 6px;
8	font-size: 13px;
9	}
10
11	button {
12	margin-top: 40px;
13	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
14	color: white;
15	padding: 12px 30px;
16	border: none;
17	border-radius: 8px;
18	cursor: pointer;
19	width: 150px;
20	}
21
22	@media (max-width: 768px) {
23	body {
24	padding: 20px;
25	}
26
27	.main {
28	width: 100%;
29	height: 100vh;
30	}
31
32	.container {
33	flex-direction: column;
34	height: 100%;
35	}
36
37	.editor,
38	.preview {
39	width: 100%;
40	height: 50%;
41	}
42	}

1	function loadSVG(svgCode) {
2	previewContainer.innerHTML = "";
3	if (!svgCode.trim()) {
4	showErrorMessage("Enter SVG code to see preview");
5	return;
6	}}

1	svgInput.addEventListener("input", function () {
2	loadSVG(this.value);
3	});
4	svgInput.addEventListener("paste", function () {
5	loadSVG(this.value);
6	});

1	function exportSVG() {
2	const blob = new Blob([svgInput.value], {
3	type: "image/svg+xml"
4	});
5	const url = URL.createObjectURL(blob);
6	const a = document.createElement("a");
7	a.href = url;
8	a.download = "svg-viewer.svg";
9	document.body.appendChild(a);
10	a.click();
11	document.body.removeChild(a);
12	URL.revokeObjectURL(url);
13	}
14	exportBtn.addEventListener("click", exportSVG);

1	<div class="container">
2	<h1>Color Contrast Checker</h1>
3	<div class="color-pickers">
4	<div class="color-picker">
5	<label for="text-color">Text Color:</label>
6	<input type="color" id="text-color" value="#000000" />
7	<input type="text" id="text-color-hex" value="#000000" />
8	<p id="text-color-error" class="error-message"></p>
9	</div>
10
11	<div class="color-picker">
12	<label for="bg-color">Background Color:</label>
13	<input type="color" id="bg-color" value="#FFFFFF" />
14	<input type="text" id="bg-color-hex" value="#FFFFFF" />
15	<p id="bg-color-error" class="error-message"></p>
16	</div>
17	</div>
18
19	<div class="output">
20	<div class="results">
21	<div class="results-item">
22	<h3>WCAG AA</h3>
23	<p>Normal Text: <span id="normal_text_aa">Pass</span></p>
24	<p>Large Text: <span id="large_text_aa">Pass</span></p>
25	</div>
26	<div class="results-item">
27	<h3>WCAG AAA</h3>
28	<p>Normal Text: <span id="normal_text_aaa">Pass</span></p>
29	<p>Large Text: <span id="large_text_aaa">Pass</span></p>
30	</div>
31	</div>
32
33	<div id="preview" class="preview">
34	<p>This is a preview text</p>
35	</div>
36
37	<div class="ratio">
38	<h2>Contrast Ratio: <span id="contrast-ratio"></span></h2>
39	</div>
40	</div>
41
42	<div class="error">
43	<p id="error-message"></p>
44	</div>
45	</div>

1	body {
2	background-color: #fff;
3	padding: 20px;
4	}
5	.container {
6	display: flex;
7	flex-direction: column;
8	align-items: center;
9	max-width: 800px;
10	margin: 0 auto;
11	gap: 8px;
12	border-radius: 8px;
13
14	}
15	h1 {
16	text-align: center;
17	margin-bottom: 32px;
18	color: #333;
19	}

1	.color-pickers {
2	display: flex;
3	gap: 20px;
4	justify-content: center;
5	margin-bottom: 20px;
6	}
7	.color-picker {
8	display: flex;
9	flex-direction: column;
10	width: 160px;
11	gap: 4px;
12	}

1	label {
2	font-weight: 600;
3	color: rgb(0, 0, 0, 0.7);
4	}
5	input[type="color"] {
6	width: 100%;
7	height: 40px;
8	border: 1px solid rgb(0, 0, 0, 0.05);
9	border-radius: 4px;
10	cursor: pointer;
11	}
12	input[type="text"] {
13	padding: 8px 12px;
14	border: 1px solid rgb(0, 0, 0, 0.05);
15	border-radius: 4px;
16	text-transform: uppercase;
17	}

1	.results {
2	margin-bottom: 20px;
3	display: flex;
4	gap: 20px;
5	justify-content: center;
6	}
7	.results-item {
8	text-align: center;
9	padding: 15px;
10	min-width: 130px;
11	border: 1px solid rgb(0, 0, 0, 0.05);
12	border-radius: 8px;
13	}
14	.results-item h3 {
15	margin-bottom: 10px;
16	text-align: center;
17	color: #333;
18	}
19	.results-item p {
20	margin-bottom: 5px;
21	}
22	.pass {
23	color: #38a169;
24	font-weight: bold;
25	}
26	.fail,
27	.error-message {
28	color: #e53e3e;
29	font-weight: bold;
30	}

1	.error {
2	color: #e53e3e;
3	}
4	.error-message {
5	display: none;
6	}

1	{
2	"ratio": "8.59",
3	"AA": "pass",
4	"AALarge": "pass",
5	"AAA": "pass",
6	"AAALarge": "pass"
7	}

1	const textColorInput = document.getElementById("text-color");
2	const bgColorInput = document.getElementById("bg-color");
3
4	const textColorHex = document.getElementById("text-color-hex");
5	const bgColorHex = document.getElementById("bg-color-hex");
6	const textColorError = document.getElementById("text-color-error");
7	const bgColorError = document.getElementById("bg-color-error");
8	const normal_text_aa = document.getElementById("normal_text_aa");
9	const large_text_aa = document.getElementById("large_text_aa");
10	const normal_text_aaa = document.getElementById("normal_text_aaa");
11	const large_text_aaa = document.getElementById("large_text_aaa");
12	const preview = document.getElementById("preview");
13	const contrastRatio = document.getElementById("contrast-ratio");

1	function updateColors() {
2	const textColor = textColorInput.value;
3	const bgColor = bgColorInput.value;
4
5	preview.style.color = textColor;
6	preview.style.backgroundColor = bgColor;
7
8	}

1	function updateBgColorFromHex() {
2	let hexValue = bgColorHex.value;
3	if (hexValue.charAt(0) !== "#") {
4	hexValue = "#" + hexValue;
5	}
6
7	if (!isValidHex(hexValue)) {
8	bgColorError.textContent = "incorrect color";
9	bgColorError.style.display = "block";
10
11
12	return;
13	}
14	bgColorError.textContent = "";
15	bgColorInput.value = hexValue;
16	bgColorHex.value = hexValue;
17	updateColors()
18	}

1	textColorHex.addEventListener("input", updateTextColorFromHex);
2	bgColorHex.addEventListener("input", updateBgColorFromHex);
3
4	textColorInput.addEventListener("input", function () {
5	textColorHex.value = textColorInput.value;
6	updateColors();
7	});
8
9	bgColorInput.addEventListener("input", function () {
10	bgColorHex.value = bgColorInput.value;
11	updateColors();
12	});

1	fetch(apiUrl)
2	.then((response) => {
3	if (!response.ok) {
4	throw new Error("Network response was not ok");
5	}
6	return response.json();
7	})

1	normal_text_aa.textContent = data.AA === "pass" ? "Pass" : "Fail";
2	normal_text_aa.className = data.AA === "pass" ? "pass" : "fail";
3
4	large_text_aa.textContent = data.AALarge === "pass" ? "Pass" : "Fail";
5	large_text_aa.className = data.AALarge === "pass" ? "pass" : "fail";
6
7	normal_text_aaa.textContent = data.AAA === "pass" ? "Pass" : "Fail";
8	normal_text_aaa.className = data.AAA === "pass" ? "pass" : "fail";
9
10	large_text_aaa.textContent = data.AAALarge === "pass" ? "Pass" : "Fail";
11	large_text_aaa.className = data.AAALarge === "pass" ? "pass" : "fail";

1	<main>
2	<h1>Glassmorphism Generator</h1>
3
4	<section class="preview-section">
5	<div class="preview-container">
6	<div class="glass-card">
7	<h3>Glassmorphism Effect</h3>
8	<p>
9	This is how your glassmorphism element will look with the current settings.
10	</p>
11	</div>
12	</div>
13	</section>
14
15	<section class="settings-container">
16	<div class="settings">
17	<label for="colorPicker">Color:</label>
18	<input
19	type="color"
20	id="colorPicker"
21	class="color-picker"
22	value="#3abb16"
23	/>
24	</div>
25
26	<div class="settings">
27	<label for="opacity" class="slider-label">Opacity:</label>
28	<input
29	type="range"
30	id="opacity"
31	class="slider"
32	min="0"
33	max="1"
34	step="0.01"
35	value="0.25"
36	/>
37	</div>
38
39	<div class="settings">
40	<label for="blur" class="slider-label">Blur:</label>
41	<input
42	type="range"
43	id="blur"
44	class="slider"
45	min="0"
46	max="20"
47	step="0.5"
48	value="10"
49	/>
50	</div>
51	</section>
52
53	<div class="code-card">
54	<pre><code id="output"></code></pre>
55	</div>
56
57	<button id="copyCssButton" class="copy-css">Copy CSS</button>
58	</main>

1	.preview-container {
2	color: #ffffff;
3	height: 320px;
4	border-radius: 0.5rem;
5	padding: 16px;
6	background-image: url("image url here");
7	background-size: cover;
8	background-position: center;
9	}

1	.glass-card {
2	width: 75%;
3	height: 160px;
4	margin: 4rem auto 0;
5	padding: 24px;
6	background: rgba(254,245,238,0.2);
7	backdrop-filter: blur(5px);
8	-webkit-backdrop-filter: blur(5px);
9	border-radius: 10px;
10	border: 1px solid rgba(255, 255, 255, 0.2);
11	box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
12	}
13

1	.settings-container {
2	width: 100%;
3	}
4	input[type="color"] {
5	width: 100%;
6	border: none;
7	padding: 4px;
8	border-radius: 4px;
9	cursor: pointer;
10	}
11
12	.slider {
13	width: 100%;
14	height: 4px;
15	background: #e0e0e0;
16	border-radius: 2px;
17	appearance: none;
18	}
19	.settings {
20	margin-bottom: 12px;
21	}
22	.slider::-webkit-slider-thumb {
23	appearance: none;
24	width: 16px;
25	height: 16px;
26	background: #147ccb;
27	border-radius: 50%;
28	cursor: pointer;
29	}
30	.slider::-moz-range-thumb {
31	width: 16px;
32	height: 16px;
33	background: #147ccb;
34	border-radius: 50%;
35	cursor: pointer;
36	border: none;
37	}
38	.code-card {
39	width: 95%;
40	background-color: #e0e0e0;
41	color: #021120;
42	padding: 16px;
43	border-radius: 8px;
44	overflow-x: auto;
45	}
46
47	pre {
48	font-size: 0.875rem;
49	white-space: pre-wrap;
50	}
51	.copy-css {
52	margin-top: 24px;
53	cursor: pointer;
54	text-transform: uppercase;
55
56	color: #fff;
57	font-size: 0.875rem;
58	width: 100%;
59	height: 45px;
60	background-color: #167cbb;
61	border-radius: 8px;
62	font-weight: 600;
63	border: none;
64	}

1	const colorElement = document.getElementById("colorPicker");
2	const opacityElement = document.getElementById("opacity");
3	const blurElement = document.getElementById("blur");
4	const cssOutput = document.getElementById("output");
5	const copyCssButton = document.getElementById("copyCssButton");
6	const glassCard = document.querySelector(".glass-card");

1	function hexToRGB(hex, opacity) {
2	const r = parseInt(hex.slice(1, 3), 16);
3	const g = parseInt(hex.slice(3, 5), 16);
4	const b = parseInt(hex.slice(5, 7), 16);
5	return `rgba(${r},${g},${b},${opacity})`;
6	}

1	function updatePreview() {
2	const color = colorElement.value;
3	const transparency = opacityElement.value;
4	const blur = blurElement.value;
5
6	const backgroundColor = hexToRGB(color, transparency);
7	glassCard.style.backgroundColor = backgroundColor;
8	glassCard.style.backdropFilter = `blur(${blur}px)`;
9	}