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
Tag: 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
Wordle is a masterclass in product design simplicity
Some of the most fun I’ve had this year is playing Wordle with my friends and family. But I’m a product designer and a programmer, so as I played, I couldn’t help but notice some strange things about how it was constructed. I was right in the middle of making my own product School Morning Routine,… Continue reading Wordle is a masterclass in product design simplicity
How to Create a Sticky Toolbar With CSS and a Bit of JavaScript
In this new tutorial we’ll learn how to create a sticky (or fixed) toolbar—also referred to as a vertical navigation menu—with animated tooltips that you can use on your sites for all sorts of things. For example, if you are a store owner, you can use it to include a quick links feature for promoting… Continue reading How to Create a Sticky Toolbar With CSS and a Bit of JavaScript
How Long Does it Take to Learn JavaScript
According to “The State of the Octoverse” by GitHub, the statistics show that JavaScript is the most popular language globally. It is good investment to learn JavaScript for front-end or back-end programming. How Long Will it Take? In the book Outliers by Malcolm Gladwell, there is the 10,000 hours rule. This rule states that there… Continue reading How Long Does it Take to Learn JavaScript
How to Crop or Resize an Image With JavaScript
It’s very easy to show a resized or cropped version of an image on a website using CSS. However, this doesn’t change the original image data. What if you want to create an actual cropped or resized version of an image for your visitors or clients? We’ve already published a couple of tutorials on how… Continue reading How to Crop or Resize an Image With JavaScript
10 Best Cross-Browser Testing Tools for Testing Websites in 2022
* { box-sizing: border-box; } body {margin: 0;}*{box-sizing:border-box;}body{margin-top:0px;margin-right:0px;margin-bottom:0px;margin-left:0px;} If you’ve recently designed or redesigned your website, you’re probably planning for a big launch. But before you launch or relaunch your website, it’s important to test your website across various browsers. Now, this may sound intimidating, given how many browsers there are on the market. The… Continue reading 10 Best Cross-Browser Testing Tools for Testing Websites in 2022
How to Build a Responsive Slider With Swiper.js
* { box-sizing: border-box; } body {margin: 0;}*{box-sizing:border-box;}body{margin-top:0px;margin-right:0px;margin-bottom:0px;margin-left:0px;} Have you ever built an advanced slider for a project? If so, you might have taken advantage of any one of a number of JavaScript carousels. In the past, I’ve covered two of them: slick and Owl. Today, I’ll introduce another well-known one: Swiper. Ready to learn… Continue reading How to Build a Responsive Slider With Swiper.js
What is HTML Email?
* { box-sizing: border-box; } body {margin: 0;}*{box-sizing:border-box;}body{margin-top:0px;margin-right:0px;margin-bottom:0px;margin-left:0px;} In this quick explainer, I’ll clear up any doubts or questions you have about HTML emails, how to create them, and how to send them. What is HTML Email? Your email program or service can send and receive emails in two formats; plain text and HTML. Plain… Continue reading What is HTML Email?
How to Build a UIkit Lightbox With Dot Navigation
* { box-sizing: border-box; } body {margin: 0;}*{box-sizing:border-box;}body{margin-top:0px;margin-right:0px;margin-bottom:0px;margin-left:0px;} Have you ever worked with the UIkit front-end framework? Its current version at the time of writing is 3.9.4, and in the next few months, YOOtheme (the team behind it) plan to release v4. This isn’t the first time I’ve written about UIkit; some years ago, while still… Continue reading How to Build a UIkit Lightbox With Dot Navigation
Easy Steps to Convert Photoshop Designs Into a Website
Here’s a simple guide to solving the troublesome task of turning Photoshop designs into a website. Or, in more technical terms, convert PSD files into responsive HTML. Modern business cannot operate without the Internet today. Therefore, it is very important to have a high-quality presence in it, for example, in the form of websites that… Continue reading Easy Steps to Convert Photoshop Designs Into a Website
JavaScript map vs. forEach: When to Use Each One
In this article, we’ll discuss the map and forEach methods in JavaScript, and we’ll also go through the differences between them to understand when to use each one. JavaScript is one of the core technologies of the web. The majority of websites use it, and all modern web browsers support it without the need for… Continue reading JavaScript map vs. forEach: When to Use Each One
A Look at Its Impact on the Web
In the web design industry, it’s rare that a tool stays relevant for a decade or more. Things tend to change so quickly that the useful life of an app or framework usually isn’t very long. However, Twitter’s Bootstrap has defied those odds. Now in existence for over 10 years, the self-described “front-end open source… Continue reading A Look at Its Impact on the Web
What is React Native?
React Native is a cross-platform mobile application development framework that Facebook created in 2015. React Natives uses JavaScript as the underlying programming language, and it aims to help developers can build native mobile apps for both Android and IOS devices with a single codebase. In this post, I’ll introduce some of the key concepts and… Continue reading What is React Native?
Practice Makes Perfect: 4 Reasons You Struggle Learning JavaScript
However much information you process when studying anything, there will be no results unless you start applying it in real life. To master a language, people usually practice writing, speaking, and listening to strengthen their knowledge after learning theory. With a programming language, it’s not quite the same. You can read the code and write… Continue reading Practice Makes Perfect: 4 Reasons You Struggle Learning JavaScript
How to Enable or Disable a Button With JavaScript: jQuery vs Vanilla
In this article, we’ll discuss how you can enable or disable a button with JavaScript. First, we’ll go through how it works in vanilla JavaScript and later on we’ll see how to do it with jQuery. JavaScript is one of the core technologies of the web. The majority of websites use it, and all modern… Continue reading How to Enable or Disable a Button With JavaScript: jQuery vs Vanilla