When working with maps and JavaScript, if you need to outline or shade states or counties on a map you need a huge list of coordinates that make up that shape. Sometimes it's a single polygon but sometimes, like in the case of Alaska, it's a MultiPolygon. I've worked on more maps in the last… Continue reading geoJSON US States and Counties
Category: Web Development
Comparing IP Location with Latitude, Longitude and PHP
Full disclosure, I did not write the following distance() PHP function. It's based on this answer on Stack Overflow. The last few sites I've worked on have needed to return the closest location to the users IP based on an array of latitudes and longitudes. In order to do this we need to do two… Continue reading Comparing IP Location with Latitude, Longitude and PHP
Adding re(no)CAPTCHA to forms
Last week I wrote about adding reCAPTCHA to jQuery Validator but what if you just want to add it to a regular form? It's significantly easier to just add re/noCAPTCHA to a form without trying to integrate jQuery Validator. The first few steps are very similar: Include jQuery on the page. Log into a Google… Continue reading Adding re(no)CAPTCHA to forms
Combining Google’s re(no)CAPTCHA and jQuery Validate
As I've mentioned before, we use jQuery Validate on most sites that we build at work. When validating forms it's important to do more than just verify that the fields contain values that you'd expect. We should also be testing to verify that the form isn't spam with a server-side solution like Akismet. That works great… Continue reading Combining Google’s re(no)CAPTCHA and jQuery Validate
Sorting alphabetically with mixed case letters
When using JavaScript's .sort() to sort an array of objects alphabetically, remember to set each string to lowercase or uppercase before you compare it. This will correct the priority that JavaScript gives capitalized letters over lowercase letters. For example, instead of: var defaultParent = $('.default-sort'); var defaultItems = defaultParent.children('li'); defaultItems.sort(function(a, b) { x = a.getAttribute('data-sort'); y… Continue reading Sorting alphabetically with mixed case letters
When Margins Collapse
Margin collapsing is a tricky thing that usually pops up at the worst time. I've had issues with it when laying out content for a something like a slideshow hero where there will be multiple images and text containers per slide and the content below the slide needs to be brought up to lay over top… Continue reading When Margins Collapse
Slide To Download Mobile UI
We live in an increasingly mobile world but most elements and interactions on the web are still predominantly designed for desktop. One such interaction is clicking to download. Using an anchor or button to click to download works great on the desktop. It's easy to quickly target the area with your mouse and click and you need… Continue reading Slide To Download Mobile UI
Resizing Images Based on Other Image Heights
The problem: Create a function such that each row on a page has a static number of images (let's say 3) of unknown dimensions where the images are resized such that the widths are equal to a dynamically defined width and the heights of each image are equal to all other images in the row… Continue reading Resizing Images Based on Other Image Heights
Variable CSS Perspectives and Transform-Functions
When working with 3D animations with CSS, one thing that is rarely mentioned is that CSS3's perspective property is largely linked to the element height. This is likely because it normally wouldn't be an issue. Applying perspective to an element wrapping a transformed element or group of transformed elements forces the elements to behave similarly and all 'start' from… Continue reading Variable CSS Perspectives and Transform-Functions
Explaining the Hex Color Format (and how to convert to it)
It's actually easier than it sounds, and once you understand the basics you can likely do most conversions mentally. The goal is to take a color in the RGB format, 3 groups of integers 3 digits long (eg: 111, 222, 123) and convert it to the hexadecimal equivalent. Hexadecimal is essentially a different way to… Continue reading Explaining the Hex Color Format (and how to convert to it)