CodePen and CanIUse embeds that are often used on blog posts require the load of a lot of resources, and usually, this is done on the initial page load. Problem with embeds Solution is to lazy load Problem with embeds This poses a significant performance issue, particularly when the embed isn’t immediately visible on the page. And I’m not just referring to CodePen and CanIUse; this applies to any third-party embed on the page. While CodePen offers some optimization options, such as using the Click-to-Load feature on an embed or employing the loading="lazy" attribute on an iframe to defer the ..read more

I recently encountered an Unterminated string literal error, which turned out to be totally unexpected for me, as the string looked completely fine to me. Usually, the Unterminated string literal error occurs when the string is not enclosed inside the single (') or double (") quotes. In my case, the string looked as follows: var str = "<script></script>"; Immediately I was notified by the code editor that there was an issue with this string. Unterminated string literal error Since I’ve ensured that the string was closed by the double quote, I was confused a bit, to say the least ..read more

It’s a good idea to place the cursor at the end of the text field when it gains focus, especially if the field already contains a value. I’m referring to both input elements (which can hold text values) and textarea elements. However, the focus() method alone doesn’t achieve this. Since there are no native solutions to set the cursor position, we can employ a small JavaScript trick. Let’s assume we have the following search input element, which already contains a value: <input id="search-field" type="search" value="How to"> Next we’ll need to use the setSelectionRange method to set th ..read more

When implementing an instant update preview area with the WordPress Classic Editor, an appearance issue arises when working in different modes. This problem, its causes, and the solution are explained below. Problem How it works in WordPress Solution Problem When utilizing the WordPress Classic Editor for implementing an instant update of a specific preview area, the content renders differently based on the editing mode. This discrepancy arises because the Classic Editor in WordPress has two modes, each with a separate text editor: Visual mode uses the TinyMCE editor Text mode uses the Quic ..read more

While working on a project for a “Make a Spotify Clone from Scratch: JavaScript PHP and MySQL” course that I’m learning, I encountered an issue with making a query to the database. The task was to set user-provided data like username, name, email, etc. into the database table. But the query provided in the course didn’t work for me. I’ve struggled a bit but managed to find a solution. My setup: MAMP version 6.8 PHP version 7.4.33 mySQL version 5.7.39 What I had: The database was set via the phpMyAdmin tool. There were 8 columns in the database’s users table. The first column is id with a ty ..read more

Adding a cool outline effect to your text is quite simple with just a few lines of CSS. Previously, you needed to use hacks, such as adding several box-shadow properties, to achieve such a result. But with modern CSS to add an outline effect you’ll need to use only three CSS properties -webkit-text-fill-color, -webkit-text-stroke-width and -webkit-text-stroke-color. .outline-text { -webkit-text-fill-color: #fff; -webkit-text-stroke-width: 1px; -webkit-text-stroke-color: #262626; } Result: Outline Text These properties are pretty self-explanatory: -webkit-text-fill-color - adds a fill ..read more

By default, the appearance of the number input is not very user-friendly, particularly the arrows. In this article, I will demonstrate how you can customize it to make it more appealing and easier to use. Contents: Hide default arrows Add custom buttons Styling the input Demo Hide default arrows The default number input arrows are often considered suboptimal because of their unappealing design and limited usability, making them less intuitive and user-friendly for individuals interacting with the input field. Not to mention the lack of consistency accross different browsers. The arrows will ..read more

Dealing with clipboard operations in JavaScript can present certain challenges. In this guide, I’ll clarify the process and walk you through the fundamental clipboard tasks and addressing related nuances. Contents: How users can copy content to clipboard Native clipboard Clipboard API in JavaScript Security concerns Handling events Conclusions How users can copy content to clipboard Before we get into details, it’s important to understand that there are a couple of ways how users can perform clipboard commands, which can affect the work with the clipboard. Natively via keyboard/mouse. By cl ..read more

YouTube embeds are a great addition to a web page. In this guide, I’ll show you how to make them responsive with a sprinkle of CSS. By default, YouTube provides the following HTML code for video embeds. <iframe width="560" height="315" src="https://www.youtube.com/embed/Ukg_U3CnJWI?si=9aST45sr3a1mrjKJ" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen > </iframe> YouTube embed code If you use the code above in your code, the YouTube video will rema ..read more

A dark mode is almost a must-have feature for modern-day web apps. In this guide, I’ll show you how to implement a dark mode for your project. The dark mode can provide several benefits and enhance the user experience. However, not all users like the dark mode, so it’s also important to provide them with the option to switch between dark and light modes. Handle color theme with CSS only To begin, you can handle the basic color theme with CSS. For that, there is a prefers-color-scheme media query. It detects if a user agent has requested a color theme. The code below will open a page with a whi ..read more