Tag: JavaScript

Better Web Security Means Less Convenience – For Now

The web makes our lives more convenient. We can order a T-shirt or a pizza with a few clicks. We can conduct global research without leaving our seats. It has changed the way we do just about everything. As web designers, we seek to add even more convenience. We employ systems to “remember” users. We… Continue reading Better Web Security Means Less Convenience – For Now

How to Create an “AI Quotes Generator” With OpenAI and JavaScript

In this tutorial, we’ll learn how to create an “AI Quotes Generator” app with JavaScript. This app will demonstrate how to fetch data from the OpenAI API and generate engaging quotes for different categories or custom moods. HTML Structure The HTML structure will consist of the following elements: A button at the top right will… Continue reading How to Create an “AI Quotes Generator” With OpenAI and JavaScript

How to Create an “AI Quotes Generator” With OpenAI and JavaScript

In this tutorial, we’ll learn how to create an “AI Quotes Generator” app with JavaScript. This app will demonstrate how to fetch data from the OpenAI API and generate engaging quotes for different categories or custom moods. HTML Structure The HTML structure will consist of the following elements: A button at the top right… Continue reading How to Create an “AI Quotes Generator” With OpenAI and JavaScript

Distinguishing between ARIA and native HTML attributes

As a developer, you want to create more inclusive and accessible digital experiences for your users. Great! It’s possible, however, that you might be feeling a bit confused or overwhelmed by the element attributes that can affect the usability for users of assistive technology. ARIA (or WAI-ARIA, Web Accessibility Initiative-Accessible Rich Internet Applications) defines some… Continue reading Distinguishing between ARIA and native HTML attributes

Create a Rotating Text Animation Effect With CSS Variables and JavaScript

In this new tutorial, we’ll learn how to create a rotating text animation effect using CSS variables and JavaScript. Although we can certainly build a simple text-changing animation in pure CSS, we’ll put in the loop JavaScript to make things more maintainable and effective.  Basic Text Rotating Animation We’ll define a h1 element where we’ll… Continue reading Create a Rotating Text Animation Effect With CSS Variables and JavaScript

How to Create an Expanding Search Input with HTML, CSS, and JavaScript

As a designer, you can enhance the user experience of a website or mobile application by adding subtle animations to its components. One such component is a search input box. This tutorial will cover how to create an expanding search input; one which expands when a user clicks on a search icon. You’ll find this… Continue reading How to Create an Expanding Search Input with HTML, CSS, and JavaScript

Largest Contentful Paint: What It Is and How To Optimize It

In this guide, I’ll explain how to optimize Largest Contentful Paint using HTML and CSS. I’ll explain what LCP is, then before going into the details, I’ll quickly recap the most important things you need to know about LCP. So, What is Largest Contentful Paint (LCP)? Largest Contentful Paint (LCP) is one of the three… Continue reading Largest Contentful Paint: What It Is and How To Optimize It

Three Ways to Handle Events in JavaScript

JavaScript is a versatile and powerful programming language that is widely used for creating dynamic and interactive web pages and applications. One essential aspect of building these  applications is handling events. Events are actions that take place in the browser, such as mouse clicks, keyboard inputs, or the loading of a webpage. By handling events,… Continue reading Three Ways to Handle Events in JavaScript

Make A FullScreen Button with JavaScript (for Video and Other HTML Elements)

In this tutorial, you’ll learn how to make an element enter fullscreen mode in any browser using the JavaScript FullScreen API. “The Fullscreen API adds methods to present a specific element and its descendants in fullscreen mode, and to exit fullscreen mode once it is no longer needed” – MDN Fullscreen mode removes… Continue reading Make A FullScreen Button with JavaScript (for Video and Other HTML Elements)

Make A FullScreen Button with JavaScript (for Video and Other HTML Elements)

In this tutorial, you’ll learn how to make an element enter fullscreen mode in any browser using the JavaScript FullScreen API. “The Fullscreen API adds methods to present a specific element and its descendants in fullscreen mode, and to exit fullscreen mode once it is no longer needed” – MDN Fullscreen mode removes… Continue reading Make A FullScreen Button with JavaScript (for Video and Other HTML Elements)

Learn Functional Programming in JavaScript

JavaScript is one of the most interesting programming languages, simply because you can write software in a variety of different ways. We primarily live in an object-oriented world, but we’re not bound to that paradigm. We can also take a functional programming approach. This course is 1 hours 35 minutes long, and it’s split into… Continue reading Learn Functional Programming in JavaScript

JavaScript for Web Designers (Free Course)

We’ll start off simple by discussing variables, data types, and loops. Then, we’ll move on to more complicated concepts like functions, selectors, and events. You’ll even get a chance to apply the skills you’ve learned by putting together some examples – perfect for any web designer! What You’ll Learn What JavaScript is and how it… Continue reading JavaScript for Web Designers (Free Course)

Build an Infinite Blinking Text Animation With CSS and a Touch of JavaScript

In this new tutorial, we’ll learn how to create an infinite blinking/flashing text effect with CSS animations and a bit of JavaScript. Specifically, selected text parts will switch colors after a certain period. After that, the animation will reinitialize.  Our Text Effect Here’s what we’re going to create. It’s a great addition to a portfolio… Continue reading Build an Infinite Blinking Text Animation With CSS and a Touch of JavaScript

Understanding Python Regex Functions, with Examples

Regular expressions (regex) are special sequences of characters used to find or match patterns in strings, as this introduction to regex explains. We’ve previously shown how to use regular expressions with JavaScript and PHP. The focus of this article is Python regex, with the goal of helping you better understand how to manipulate regular expressions… Continue reading Understanding Python Regex Functions, with Examples

How to Animate a “Twisting Text Effect” With CSS and JavaScript

In this tutorial, we’ll learn how to split an element’s text into separate characters, which we’ll then animate to give us a twisting effect. What We’ll be Building Without further intro, let’s check out what we’ll be building: In our case, there will be two types of animations: The first animation will happen each… Continue reading How to Animate a “Twisting Text Effect” With CSS and JavaScript

How to Create a Sortable HTML Table with JavaScript

1. Placing Content With HTML The <table> tag is the semantic HTML tag used for displaying data on a webpage. We’ll be placing our <table> tag within a table-container div which will allow us include some responsive styling in CSS. <div class=”table-container”> <table class=”data-table”> </table> </div> Our table will contain the table header, thead and… Continue reading How to Create a Sortable HTML Table with JavaScript

WordPress Product Founders on What They’d Do Differently

Incredible as it sounds, WordPress was initially released back in 2003. And it has evolved quite a bit during that time. It has become a mature, if ever-changing, platform for building websites. Its massive theme and plugin ecosystem have also seen its share of changes. We’ve witnessed solo entrepreneurs launching products, nurturing their growth, and… Continue reading WordPress Product Founders on What They’d Do Differently

How to Update UIkit Components

Here’s the demo page that we’re going to create to demonstrate things: Be sure to scroll down the page to notice how specific elements become sticky. As with other UIkit tutorials, familiarity with this framework will be beneficial to follow along. The Demo Project Our page will consist of the following sections: The header… Continue reading How to Update UIkit Components

How to Implement Infinite Scrolling With JavaScript

What is Infinite Scrolling? Infinite scrolling is a feature used to dynamically load more content on a page once a user scrolls to the end of the page. The concept of infinite scrolling is used to load data from a server in a way that feels “seamless” to a user but doesn’t overload the server… Continue reading How to Implement Infinite Scrolling With JavaScript

How to Let Users Dynamically Change the Number of Posts per Page in WordPress

Consider the following scenario: you have a WordPress blog with hundreds of posts. On your blog archive page, six posts appear at a time. Of course, there’s pagination for moving between older and newer posts. But what if you want to give users the option to choose the number of posts they want to display… Continue reading How to Let Users Dynamically Change the Number of Posts per Page in WordPress

Create a Simple Math CAPTCHA for Your Forms With PHP and JavaScript

In this new tutorial we’ll discuss a straightforward approach for reducing spam from form submissions. This technique will use PHP and JavaScript to block form submission until the user provides the correct answer to a simple math CAPTCHA. Here’s a quick video that demonstrates the expected functionality: It’s important to note that this is just… Continue reading Create a Simple Math CAPTCHA for Your Forms With PHP and JavaScript

Analyzing Code With Code Detection API

The world runs on code. Nearly every single aspect of our lives is in some way, shape, or form handled by code. It may be hidden and running behind the scenes, but it is ever-present in our daily activities. Waking in the morning thanks to our alarm clock or phone app, consuming news and media… Continue reading Analyzing Code With Code Detection API