I recently took my first foray into converting colors with JavaScript. I found myself constantly searching Google for a good online color conversion between RGB and hex. Opening up PhotoShop or another image editor every time I needed a color converted was unrealistic, and if I was developing in the browser it made sense to… Continue reading Color Conversion Tool
Category: Web Development
Using Bootstrap-select (selectpicker) and jQuery Validate
At work we build most websites using Bootstrap as the base for the responsive grid, Bootstrap-select to style HTML <select>'s and jQuery Validate for form validation. Turns out, the three of these don't necessarily play well together out of the box. jQuery Validate works in two ways. It starts off lazy by waiting for the user to submit a… Continue reading Using Bootstrap-select (selectpicker) and jQuery Validate
Installing Adaptive Images on WordPress
Responsive Images are one of the next hurdles in making the web truly accessible to everyone. Without responsive images, even if we have a responsive site and the images 'scale' using CSS, if our visitor is using a phone or tablet they will receive the full resolution image that a visitor on a desktop would… Continue reading Installing Adaptive Images on WordPress
Match the Heights of Multiple Elements with jQuery
When it comes to responsive grid-based layouts, we often find the need to match the heights of multiple columns or boxes that are all in a row. In these cases, a css height property won't do the trick for a couple reasons. The content will likely be dynamic, and will change depending on the given… Continue reading Match the Heights of Multiple Elements with jQuery
CSS Retina Sprites
This topic can be easily avoided by using SVG instead of sprites, since SVG icons will always appear crisp and non-pixelated. However, if we have to support browsers such as IE8 and older, using SVG isn't reasonable without using things like polyfills. That's where sprites can come in handy. CSS sprites are great for things… Continue reading CSS Retina Sprites
Restarting CSS Animations with JavaScript
It's old news by now that the second season of House of Cards is out on Netflix, but last night I decided to pay homage to it by animating the title sequence logo in HTML/CSS/JavaScript. You can see a working demo on Codepen. In the process of creating both a JavaScript and an (almost) pure… Continue reading Restarting CSS Animations with JavaScript
3 Simple Tips to Increase your eCommerce Conversion Rate
There isn't anything overtly 'simple' about increasing conversion rates, so let's forget about that right off of the bat. Most sites we visit have a list of 3-7 'simple' ways to increase your conversion rates 'overnight.' If you're looking for a list like that, this isn't the place to be. That said, if you're looking… Continue reading 3 Simple Tips to Increase your eCommerce Conversion Rate
Working with Sass’s config.rb
Something I noticed recently while writing up some sassy Sass was that if I'm polling for changes with Compass and make edits to the config.rb, those changes won't be reflected in the compiled code. It might just be my inexperience with Ruby but I anticipated that compass would be watching config.rb for changes as well,… Continue reading Working with Sass’s config.rb
Fixing SVG Mime-Type/CSS Errors
Websites can sometimes be picky about the file-types that they are served. One issue that I recently discovered was that a stylesheet was using an .svg file as a background image for a few elements, but the elements would always have the 'Broken Image' icon displayed rather than the image. This was happening even though… Continue reading Fixing SVG Mime-Type/CSS Errors
On Responsive Design
Responsive Web Design, if you haven't heard of it yet, is a style of web design and development created by Ethan Marcotte. The core principle of Responsive Web Design (RWD) is a simple one. Accessibility. If this is your first time hearing about Responsive Design, I'll cover it very briefly, but I highly recommend reading… Continue reading On Responsive Design