Tips and tricks by Brian Shim for web developers, bloggers, and WordPress users
Tips, tricks, and cool features for your website or blog
I didn’t find a working example of how to create an HTML select input in Alpine.js online, so I’m presenting it here. Select Input in Alpine.js Basically, you create a “for” loop to generate the option values. One of the keys to making this work with stored values is to set the “:selected” property to … Read more
As I was learning Alpine.js for a new project I came across a problem when using HTML inputs in nested x-for loops. Data binding was working great in a single x-for loop wrapped around an HTML input tag. But, when I nest nested loops, the data entered in the inner loop inputs is not binding … Read more
I had a site with a pre-roll fade-in animation on the home page. It worked great, but it soon got really tiresome to have to wait for the animation to complete every time I returned to the site’s home page. I needed a way to detect if the user got to the home page from … Read more
Compliance with web accessibility regulations is super important these days. The accessibility compliance of websites built on Squarespace varies depending on which template you’re using. Here are some tips and tricks to fix the accessibility errors that you might find in various Squarespace templates. As part of my testing, I use the WAVE browser extension … Read more
While reviewing a new client’s site, I noticed that their chatbot widget was not accessible using the keyboard. By “chatbot widget”, I mean the icon in the lower right corner of the site that you click on to either get canned answers or speak to a live agent. So, I did a bunch of research. … Read more
There may be cases where you want to show an animated pre-roll splash page that people see for a few seconds when they visit your website’s home page. For example, maybe you want to show a background image with your logo in the foreground and zoom in very gently over a period of five seconds … Read more
Here’s a cheat sheet on how to display referrer URLs (URLs of sites where someone clicked a link to get to your site) in Google Analytics 4. Like so many things in GA4, you need to create an Exploration to do this. 1. Log into Google Analytics and create a new Exploration Click the Explore … Read more
I had a request from a client who saw this on a competitor’s site. Basically, they had an auto-playing video that was muted, with a big unmute button in the center, like this: I wasn’t sure how to do it at first, but I figured it out. The code is in this article! How to … Read more
Google Analytics 4 has the ability to natively track outbound link clicks without the use of JavaScript or Google Tag Manager. Unfortunately, it makes you jump through some hoops to see the data. In the article, I’ll explain how to set up a Google Analytics 4 Exploration to track outbound link clicks on your website. … Read more
I was working on a web app that allowed users to submit comments anywhere in a long feed of events. After submitting a comment, the page would refresh, bringing you back to the top. I found that to be annoying because I had to scroll back down to my comment to make sure it had … Read more
I was happy to find out that Google Analytics 4 can track file downloads. However, I didn’t find any native report in the interface to display the downloaded file names, other than for the last thirty minutes. It actually requires jumping through a lot of hoops to set up a report to do this. After … Read more
A PHP web app that I created using the Zoho Analytics (formerly Zoho Reports) API suddenly stopped working one day. Digging into the Zoho documentation, I discovered that they ended support for their “authtoken” authentication method (basically a password) and switched to OAuth 2.0. Hmmm… After looking into it, upgrading my app to be compatible … Read more
I was working on a web application that required a sliding toggle switch like this one, but was also compliant with accessibility standards: Sliding Switch I had known of this HTML/CSS solution with no JavaScript at W3 Schools. But, it’s not accessible. When you tab to it using the keyboard, you can turn it on … Read more
I recently had to figure out how to generate PDFs using PHP. There are tons of solutions out there, free and paid, with pros and cons. This is a summary of what I found out during my research, however, it’s by no means comprehensive. I basically stopped when I found solutions that satisfied my requirements. … Read more
Website accessibility is getting more and more important these days. One of the key factors in web accessibility is the ability to access all of the features of the website with the keyboard. If any element is clickable with a mouse, it needs to be reachable by keyboard using the tab key and return/enter to … Read more
Note, since writing this article, I have switched to LocalWP, which is superior to MAMP in practically every way and has clean URLs from the get-go. I’ve kept the article below for those still using MAMP, but rather than messing with these settings, I’d recommend that you check out LocalWP. It’s totally free! If you … Read more
Moving a domain name from one registrar to another can be tricky, especially if it’s something you don’t do often. If the domain is attached to a live site, doing it wrong could result in downtime. I wrote this guide for myself, to remind me of some of the gotchas associated with migrating a domain … Read more
I had a very common problem for which I could not find a good CSS solution. Namely, I wanted my website footer to extend to the bottom of the browser window, regardless of how much (or little) main body content I had. What I wanted was this: What I was getting was this: There are … Read more
Let’s say you have two completely different primary domains, say, example.com, and purchase.com, and you want to track them as a single property on Google Analytics. For example, if a user goes from one site to the other, you want that visitor to show up on the same Google Analytics report and not count as … Read more
I recently had a project where I wanted to stop the “Go” button on the Android and iOS popup keyboard from submitting a form on my web application. Why would anyone want to do this? In my case, I wanted to prevent accidental form submission (or “butt-dialing”) on my app. I had implemented a “swipe-to-save” … Read more
A client requested a “slot machine” hover effect for their social network buttons. When you hover on the icon, it moves up, sort of like in a slot machine, and changes color. Here’s an example of what I’m talking about: It turns out that this effect can be accomplished with some clever CSS! No JavaScript … Read more
My “go-to” desktop browser for doing web development is the Chrome browser. However, it has one annoying problem for people like me who do responsive web development: It won’t resize down to 320 pixels wide, the width of an iPhone. With my Chrome browser on Windows, the minimum width is 500px. On Mac, the minimum … Read more
This is a list of items to check before and after launching your site. It’s not necessarily an exhaustive list for every type of website, but it is a good starting point for most sites. Getting Your Site Known 1. SEO 2. Social Media Appearance With the importance of social media, you should check to … Read more
I developed a website for a client that would display different photos based on a query string in the URL. An example of this type of URL would be “http://mysite.com/album.php?photo=ab12345”. But, that is an ugly URL. Not only that, some people claim it’s not ideal for SEO. Much better would be “http://mysite.com/ab12345”. Here’s how to … Read more
The conventional wisdom is that you have no visibility on what goes on inside an iframe on your site. That is mostly true but it turns out that you can detect when a form is submitted inside an iframe. My Goal I was given the task to fix a website bug of the following nature: … Read more
The little icon that shows up in each web page’s browser tab is called a “favicon”. Adding this tiny detail really gives your website a professional appearance in the browser. Here’s how to do it. If You’re Using WordPress… WordPress provides a way to specify the favicon. Log into your site and go to Appearance … Read more
Oftentimes you’ll have an image, perhaps a logo, that you want to use on a website, and you’ll want that image to have a transparent background. Here’s how to make an image have a transparent background using a free drawing program called Paint.net (note this solution works on Windows only). 1. Download and Install Paint.net … Read more