Findings, tutorials, & thoughts about building websites
Lately I’ve learning more about web accessibility, with the goal of taking the WAS exam and becoming certified. In order to practice by looking at a real website, I decided that it was about time to take an accessibility audit of my own developer site (this one) to see what I can learn and what […]
After recently unzipping a folder filled with dozens of SVGs, I noticed that the current version of Windows 10 (as of January 2021) does not let you preview SVG files in File Explorer. This was disappointing. Opening them one by one was going to be tedious. So naturally I looked around to see if there […]
When the placeholder attribute made its way into HTML5 and usage of it became commonplace and fully supported by web browsers, a bad trend started—using them in place of labels in web forms. The temptation for designers to do this is understandable. In the process of laying out a design, keeping a UI as simple […]
The 3.1 update to Yoast’s WordPress SEO plugin brought with it a new feature—the ability to set a “Primary” category for a post. You’ll now see a “Make Primary” link when selecting categories (or a bold “Primary” label if one has been set). It's possible to use this primary category in a custom theme...
Yoast's WordPress SEO plugin will automatically "ping" search engines that your existing XML sitemap is updated. But what if you want to disable this? The plugin settings do not have an option for this at the moment, but luckily there is a filter that can be hooked into with a line of code.
Say you want to create a button whose background in the top left is one color, and a different color in the bottom right. The color is basically split with a diagonal line from the bottom left corner to the top right corner. It seems simple, yet a lot of the CSS techniques I came […]
Oh my Glob! BMO in the Web Thingey. All the visuals are done entirely with CSS. The buttons also do some mysterious things when you press them. The making of 3D BMO grew out of following a tutorial creating an old Macintosh Plus in 3D with CSS. I wanted to better understand the CSS properties that were being used for 3D, and create something myself. In doing so, I ended up figuring out some math to create some beveled/rounded edges.
High ratings in the Google Play Store or iOS App Store are critical to an app’s success. And they’re beneficial to find out what the problems are when an app needs improvement. So, it’s very common to have a simple link/button that allows the end user to submit their review from inside the app. The less hoops to […]
Sublime Text has become my primary web coding tool. It’s built with efficiency in mind, giving you keyboard shortcuts to avoid slowdowns with the mouse, and the ability to have multiple cursors. There are many extensions available that can be instantly found and installed via the Package Manager. Plus, it’s visually pleasing. And fast. The overall […]
Facebook’s sharer.php is officially back. Not that most people had stopped using it anyway! Along with the new Share button, you can safely use the sharer.php syntax to create a link that shares a URL on one’s Facebook timeline. As there are still many articles/answers out there that have outdated answers to questions about this, […]
For those of us working in fields that reside within the digital realm, becoming a freelancer is very enticing. Especially for web developers and designers. The start-up expenses are negligible, and the path to transitioning away from a full-time job looks fairly natural. Making the switch is the hardest part. People call it, “The Plunge“, […]
Follow these installation instructions to start using SASS with Sublime Text. You'll be able to save your SASS (.scss) file, and it will compile to a CSS file automatically. There are a few more extensive guides out there on this, but they skipped over a few minor things that you may miss. This boils it down to the essentials that you need to get up and running.
I’ve recently started using SASS and LESS with Sublime Text. The most popular recommended extensions for SASS were “SASS” for highlighting, “SASS Build” for compiling, and “SublimeOnSaveBuild” to auto build whenever you save. The problem with the build on save is that it currently does not ignore partials. Partials are additional files starting with an […]
Using Twitter Bootstrap 3.0, I wanted to use its modal window to open YouTube videos. Rather than manually placing the HTML for each video's modal, or creating a line of JavaScript for each separate video, I wanted any YouTube link to pop up embedded in a modal window, without extra code. The modal is a progressive enhancement. The link should work normally without any JavaScript. You could also disable the modal functionality for small devices on a responsive design.
When I couldn’t find any themes for the popular Colorbox jQuery lightbox, I decided to create a handful of them. This pack includes 12 themes for Colorbox by Jack Moore. The themes are contained in folders, similar to the example1, example2, etc that come with the script. Each theme has a colorbox.css file, sometimes images, and […]
The way in which I was writing comments for my functions was consistent, but entirely in my own style. I knew there must be a better way of creating this documentation using a more standard coding convention. Indeed there is. Using triple slashes and the format for XML comments, your explanation will be viewable when you using […]
When you first start using Sublime Text, the way in which projects work may not immediately make sense. What is a project? Wait, I have to save a file? Where do I save the file? I’ll cover the basics below, to get to you started. So what do I need to know? 1. You Are Always in a Project...
After developing my first theme using Shopify, I've found that it is not all it's cracked up to be. There are major flaws and missing features that limit what can be done by the web developer and designer. This was a little disappointing to me, because the Shopify e-commerce platform appeared at first glance to be a beacon of current web standards and modern development, amidst other lumbering options filled with outdated code for the front-end developer...
The SVG (Scalable Vector Graphic) file-format is an XML-based vector in that can be used on the web right now. Not only are they crisp at any size they are scaled to, but they are supported by IE9+, Firefox, Chrome, and Safari. For IE8 and below, you can provide a fallback PNG. Simple icons and logos are good candidates for the format, as they are often the first noticeable elements of a design that will look blurry on a retina display...
Designing a video game is hard, and usually it takes a long time. Sometimes you need a little inspiration to help form new ideas or to motivate yourself. Maybe you're working on a game right now, and are trying to make it more ... immersive, fun, rewarding, joyful, etc. I've been searching the web to find game design talks, audio and video, that are freely available, and have found them to be pretty scattered and harder to find than I would have thought, so I decided to do a round-up to help spark the creative pathways.