Sign in Subscribe

Arthur

Arthur

Hi, I am Art. I am a fullstack engineer. I have been working on the web professionally since 2000, and unprofessionally since 1998 when I made my first web page.

How to Copy Text to Clipboard

How to Copy Text to Clipboard

Copying text to the clipboard is a common requirement in modern web applications. While many vanilla JavaScript solutions exist, today we’ll use Clipboard.js, a lightweight library, and Hint.css, a simple tooltip library, to create an elegant copy-to-clipboard feature. Step 1: HTML Structure The HTML remains the same.

Building a 6-Digit Passcode Input in Plain JavaScript

Building a 6-Digit Passcode Input in Plain JavaScript

In this tutorial, we’ll create a seamless passcode input system for a 6-digit activation code. This setup ensures user-friendliness, supports direct typing or pasting of the code, and triggers a verification function when all digits are entered. Part 1: HTML Structure Start with a form that includes: * A placeholder

Adding a "Shaking" Effect to Login Popovers for a Visual Error Cue

Adding a "Shaking" Effect to Login Popovers for a Visual Error Cue

Sometimes, subtle design elements can make a huge difference in user experience. Instead of displaying traditional error messages, a "shaking" effect on a login popover provides a clear and immediate indication that something went wrong. This tutorial will guide you through implementing this functionality using vanilla JavaScript, CSS

Part 2 - Enhancing Repository Descriptions with OpenAI for Maximum Impact

Part 2 - Enhancing Repository Descriptions with OpenAI for Maximum Impact

In case you missed it, here is Part 1 So, you’ve built a GitHub crawler that fetches JavaScript repositories working with AI. Impressive! But what if we could go one step further and give those descriptions a sensational makeover? Imagine turning a bland description like “A library for machine

Part 1 - Building a Web Crawler in Node.js to Discover AI-Powered JavaScript Repos on GitHub

Part 1 - Building a Web Crawler in Node.js to Discover AI-Powered JavaScript Repos on GitHub

GitHub is a treasure trove of innovative projects, especially in the ever-evolving world of artificial intelligence. But sifting through the countless repositories to find those that combine AI and JavaScript? That’s like finding gems in a vast sea of code. Enter our Node.js web crawler—a script that

How to encourage signups with a "Join the Club" modal and fading content

How to encourage signups with a "Join the Club" modal and fading content

Imagine browsing a website, catching a glimpse of intriguing content just out of reach, with a simple modal enticing you to "join the club" for unlimited access. This subtle yet effective design piques curiosity while encouraging action. In this tutorial, we’ll build such an experience using PrimeVue’

Part 2 - Building the Frontend for Screenshot Generation with Nuxt 3

Part 2 - Building the Frontend for Screenshot Generation with Nuxt 3

Welcome to part two of our tutorial on integrating Puppeteer into your Nuxt 3 app. In part one, we set up the backend to capture website screenshots by passing a URL to Puppeteer. Now, it’s time to create the frontend—a sleek and interactive interface where users can input