Data, Maps, Usability, and Performance
I have been importing some posts into WordPress and wanted to share an example of simple XML code that you can use for Import. It has just the essential fields and lets you add a post, category, and tag in XML format. When importing, select the WordPress option because RSS option will not add categories and tags.
Read more
Have you ever tried to retrieve the source code of a page with PhantomJS or CasperJS? Sure, there is a method in the API to save the source to a file but what if you wanted to work with it inside your script? One way to approach this would be to work on the DOM with the page evaluate method. After all, you can retrieve the source code of any page from the DOM by finding the HTML object. Here’s how to do it with PhantomJS or CasperJS.
Read more
My last post highlighted how you can quickly visualize JSON data with a free online JSON viewer. But, most likely, you actually want to find something in a JSON file or string programmatically. So, how do you search through JSON? How do you find an object by looking for a value or key or both? If we focus on JavaScript we have some native functions which allow us to parse JSON format (JSON.parse()) and turn JSON notation into a string (JSON.stringify()), but you still need to look through all those deeply nested objects to find what you need.
Read more
Alot of data these days is sent over via JSON, a JavaScript Object Notation and alternative to XML. JSON format is really great, but how do you read JSON files? The spacing and structure in XML is just easier to decode with your eyes so if you are looking at JSON and just want to quickly get some data, it often makes sense to utilize a JSON viewer. Luckily, there are a bunch of great free online JSON viewers where you can paste the JSON code and visualize the data. Here are 5 that I like the most:
Read more
Have you used Dabblet yet? It is a similar service to jsfiddle and codepen but just focused on CSS and HTML. It describes itself as an interactive CSS playground and code sharing tool that saves to GitHub. It looks pretty cool but I don’t really understand why you wouldn’t just use JSfiddle or another service that also allows HTML and CSS plus more, like JavaScript. I doubt it will take off but I would like to share 10 cool examples that I have found on Dabblet:
Read more
I have mentioned using CasperJS for screenshots previously, the awesome navigation scripting and testing utility for PhantomJS (headless webkit browser for NodeJS), but I wanted to cover something that can be a bit painful at times: installation. You can install all three of these on your MAC or Windows OS but I would recommend grabbing a free VM via VirtualBox, loading Ubuntu on it, and doing it in Linux. It’s actually a really simple approach and you will be working in a separate environment.
Read more
I have recently filled out an address form and realized that HTML5 GeoLocation could really improve this user experience. Why do I have to fill in my city, state and zip when the browser can figure this all out with the GeoLocation API. Actually, the browser can only retrieve your Geo coordinates but I have already blogged about converting latitude and longitude coordinates to a street address via various APIs. So, it only makes sense to put in a button on an address form which would allow the end user to retrieve that information programmatically. Sure, the street address could be off sometimes but you can always correct the form instead of writing everything from scratch. So, let’s do it.
Read more
How do you detect a progressive jpeg? I have been searching for a way to easily check if a JPG image is progressive or not without installing extra libraries (like imageMagick) and I did not find many results. It would be ideal if progressive JPEGs just had a different mime type or something you can quickly retrieve via bash (file -mime-type p.jpg gives me p.jpg: image/jpeg) but this type of information is not easily available. I did find a php script to determine if a jpeg is progressive, C# code to detect if a JPEG is progressive, and other scripts that leverage third-party libraries, as well as an image metadata extractor written in Java, but I really just want something that I can run in bash or in JavaScript.
Read more
This article and demo includes implementation of HTML5 File API, FormReader, FormData, Web Workers, Drag and Drop, and Cross-Domain XHR via Imgur API
Recently, I was impressed with the simple and clean implementation of Paul Rouget’s imgur uploader. You get drag and drop, changing body classes to indicate upload state, and your file gets pushed to Imgur via Cross-Domain XHR. Pretty cool and done in a couple lines of code. I have also recently stumbled upon zip.js and it made me want to enhance Paul Rouget’s example with the ability to upload an archive of images. And, in that spirit, let’s also allow multiple files, any images found on the internet, multiple zip archives, and a directory or multiple directories of images.
Read more