Don’t read any further if you dislike techy talk or mild complaining.
I have a large Amazon wish list of 550+ books, and it gets pretty darn difficult when I’m in a real-world book (print rules!) store and need to check if the store has a book on the list. There’s no option to “see all” entries, so I have to schlep through the pagination—it’s up to around 26 pages now—to see if something is on the list. There’s no option to export it and download and too compound the roadblocks, Amazon had disabled their public API for their wish lists some time ago, so I couldn’t even write a script to grab any data. What to do?
I used doitlikejustin’s Amazon Wish Lister to scrape the data. I grabbed the XML and exported it to an Excel document using an online converter, but for some reason each entry on the list had their own sheet on the document, instead of just listing them in rows on the same sheet. I was looking into how to compile them all into one sheet when I realized only half of the entries exported.
Back to square one. I searched around some more and found Andy Langton’s Amazon Wishlist Exporter. It worked well and I could sort it by title, and it had options to export, but I really just wanted the HTML. There was no option to view all except in the print view, so I was able to grab the HTML from that, but with a lot of unnecessary tag attributes and styling, not to mention it was minified. I used zubrag.com’s HTML stripper to clean it up, then Dirty Markup to de-minify for readability.
Another issue, but one easily remedied: I just needed the title and author, and the print page included a lot of extraneous info columns. jQuery to the rescue—just had to hide some of the table cells in each row, and that was that. I have it uploaded to my server space as a plain text HTML
The only issue I really have now is that the HTML file crashes the native editor on my server space, I think because of its size…though it’s not unusually large—remember that I stripped all of the style declarations and attributes. So for now I have to download the file from my server, edit it locally, and re-upload it.
Below are some screens from a post on the jQuery blog, that I received in my RSS reader. Looks like they were hacked, but the post has been taken down. Interesting.
EDIT: Google search results for “jquery hacked” lists the hacked blog post as the fifth search result (yours truly comes in as the ninth result). Weird how that got listed so high, but Google’s results logarithm is as mysterious to me as their hiring process. If only there were a website where I could “search” for information like that…
If you would permit me a wholly web development-related post, I recently finished a translate jQuery script for my friends’ charity site, Mission to El Salvador. Technically, the script doesn’t translate the English to Spanish, but it replaces the English text and (sometimes) HTML markup.
I was forced to do it this way because WordPress isn’t really set up for different “versions” its pages. I’m sure there may be a plugin to help with that but I’m sure this was easier. The main advantage is that there’s no page reload—when you click on the language flag the translation is instant. Since the theme we use, DonateNow, already calls in jQuery, I didn’t have to worry about adding more load time. The file itself adds 65k.
I also added a cookie for the translation preference, so that your selection is remembered as you navigate through the site, and if you close the browser out. I’ve never used cookies before but the cookie scripts I found at Quirksmode worked very well for my purposes.
There was some schlepping I had to do with the content, and I probably could’ve leveraged a unique class that’s given to every page. In order to do that I would have to use regEx and I generally avoid that when I can. To save time, if you’re going from English to Spanish, in some cases I could grab the English content before switching to Spanish, set a variable, and redeploy the variable value if the user switches back over to English. The variable value is then switched out with the Spanish content.
There’s no upkeep except for updating the “Recent Blog Post” content on the lower left of the index page. Whenever a new blog post is added I would just have to change a few numbers and a whole line. Nothing huge. The blog posts, by the way, are translated with Google Translate, so there’s no script updates needed in that area. There are probably some bugs in there still but the majority of the site passes.
For those interested, the .js file is here: translate_MTES.js.
I decided to take out the jQuery I mentioned in my last design post and just the plain Okay theme with a few small UI changes in an external CSS file.
I installed a plugin that will automatically add the Creative Commons footer to every blog post. I noticed that plenty of colophons on personal websites that aren’t blogs have outdated copyright years. It’s probably hardcoded when the site gets first designed and it’s just forgotten from that point on.
After clicking around and reading for ten minutes on how copyright law apply to non-corporate/personal websites (I’m more confused now than before the research), this probably isn’t a huge issue.
If you have a WordPress install, check here on how to insert the current year into your footer. If you’re doing normal HTML, this stackoverflow thread is a good, albeit more technical, place to start.
Decided to deploy a new WordPress template: Typo from Okay Themes. I was angling for a minimal one column layout and this is closest to what I wanted. I didn’t want to hack away too much at a an existing theme like I had in the past.
Read on for more techy UI details. Otherwise, I hear a football game is on.
I tried something new with the customizations: putting the styling and extra content using jQuery. Schlepping a child theme wasn’t worth it because my changes and additions weren’t that much to warrant it, but I also didn’t really want to touch the theme CSS nor the template file in question (the footer).
Since the theme called the jQuery base script already, I thought I would write my own separate script with my customizations and just inserting a call in the header. That way if there’s ever a theme update I’ll just need to insert the call into the header again:
I realize that doing all of your styling (and inserting content) with jQuery is clunky but I didn’t have much to do to begin with. There’s an issue with the load order because the pre-styled content can sometimes flash before it is rendered—similar to FOUC phenomenon when you don’t call CSS correctly. I have an idea of what’s going on but research is needed.
To do list:
Aaaand I wanted a good excuse to use jQuery’s Colorbox functionality.
Image stolen from e-strategyblog.com.
* Not really “hot on the heels”. That last post was weeks ago, which is ancient history in Internet chronology.
The thing that really bugged me was the search bar, which seemed to be just plonked up in the header arbitrarily. It stuck out more on mobile devices. So I decided to put it in the footer, where I keep all the sidebar type of things, and I added a link to it from my main menu.
The new problem was that it was an anchor tag, which is really disorienting native functionality and in this case creates another click (it seems petty but it will get noticed…design minutia is the heart and soul of UI/UX). So I solved it by using jQuery’s fun scroll function and set the focus on the search field. So now it operates as click-type and not click-click-type. I also used this scroll for the “Contact” first tier link and the “More>>” sub-link.
Additionally I added a nice “Scroll To Top” button that appears when you…scroll down from the top. It zips the user to (surprise!) the top. It works fine in every browser but it’s wonky on my Android (Gingerbread) phone. So there’s something else to think about.
To do list:
01 Make better header – doesn’t look fun on mobile
02 Dewonkified version of scroll to top function for mobile
03 Fix width of Google ads? It causes horizontal scrolling on mobile. Seems to come “as is” from Google so I don’t know if I can really customize.
Note: I made some of the explanations clearer and images more contextual, and the images now load via fancybox instead of a new window. Now change that favicon!
You know that little picture next to your web address in the URL locator? That’s a favicon, and it shows up in important places like right next to the name of your site when someone bookmarks it. Here’s how my favicon looks in Chrome’s bookmarks list:
If you host your account with Bluehost like I do, you’ll get their default favicon when you first set everything up, and it stays that way unless you change it:
Not bad looking, but it’s hardly personalized, especially when dozens of other bloggers and websites have it. And it’s another small but important piece you can burn your brand onto.
Below is a beginner’s step-by-step guide on how to change your favicon image. Those of you no on Bluehost can follow this as well, and this is all assuming you do not FTP to file manage on your Bluehost server, or don’t know much about Photoshop or hosting in general.