jaydinitto.com

Tag Archives: jQuery


The Amazon Wish List Chronicles

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.

Share this post:

Was the jQuery Blog Hacked?

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…

jquery_blog_hacked

jquery_blog_hacked2

Share this post:

Using jQuery To Translate Websites

mtes_translated

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.

Share this post:

Unnecessary Blog Design Update

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.

Share this post:

New Blog Template Is A Go. You May Rest Easy.

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:

<script src="http://jaydinitto.com/scripts/blog.js"></script>

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:

  • Update favicon
  • Fix jd logo in header
  • Figure out jQuery script load order for immediate styling
  • Fix for Youtube videos (they activate horizontal scrolling on narrow device views)
  • Browser test
Share this post:
Aqua Teen Hunger Force banner ads

A Blog Design Update of Some Interest

It still works kinda like this.

It still works kinda like this.

I got rid of the annoying Google ad in the sidebar, for no other reason that I just didn’t like the aesthetics of it. I was actually starting to make some money off of it but it would be another few decades until I would see some return from it.

In its stead I replaced it with donation links. I know no one will donate but it feels right to have them there because Bitcoin and Gittip are interesting little bits of services.

Aaaand I wanted a good excuse to use jQuery’s Colorbox functionality.

Image stolen from e-strategyblog.com.

Share this post:

Another Blog Design Update, Maybe a Little More Interesting

Taking out the trash.

Taking out the trash.

Hot on the heels* of my last update about the design tomfoolery on this blog, I’ve made some further mods.

  1. The jQuery scroll to top/bottom animation was ditched. I couldn’t make it work on mobile the way it does on normal OS browsers. I’d rather have a consistent experience, cross-device, than a fancy-pants experience on only half of them.
  2. The “Scroll to Top” button that appears on the right was also cut out for the same reasons. Now I just have a simple button in the footer to hop up to the browser top.
  3. Mostly little changes/additions to the UI, the most obvious were the large blocky page-level navigation type of things. They look good in the mobile version and are a lot easier to see and tap. It doesn’t hurt the desktop experience either. Gently “guiding” user with obvious UI can be a good idea.
  4. No more side scroll on mobile! Both on landscape and portrait orientations. The Adsense ads were causing it and it bugged me to no end. Now they are mobile-sized. There is side-scrolling if I embed some videos but I don’t have the inclination to regression fix all of that.
  5. I’ve had them for a while, but I don’t think I mentioned the social media icons you see in the footer. They were modified a bit from the original, which were taken from Pink Mustache, a design site whose ill-conceived name will not live past the two awful trends it references. The vector art on there can’t be beat with a stick, though.
  6. For some reason WordPress blanked out my 404 page, so I decided to make error pages a step back, at the server level, using the .htaccess file. Go ahead, try it out. You receive my undying admiration if you understand the reference there.
  7. There was a seventh thing I wanted to mention but I forget what it was. Go have a beer!

* Not really “hot on the heels”. That last post was weeks ago, which is ancient history in Internet chronology.

Share this post:

An Uninteresting Update About This Blog’s Design

"yo dawg i herd you like blogs..."

“yo dawg i herd you like blogs…”

Ever since entering the smartphone world recently I’ve been more aware of how this site looks on mobile viewports. On the whole it transfers well; I use my own child theme, based on WordPress’ Twenty Eleven theme with only a few CSS adjustments and stuff like custom PHP functions for the ads.

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.

Share this post:

A Post for All the Bloggers on Bluehost

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:

jaydinitto.com favicon

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:

Bluehost's favicon

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.

  1. Assuming you don’t have your own favicon yet, you can get a favicon generated at a site like this or this or just Google it. If you have some sort of logo or photo it helps, or you can kind of doodle your own if you think you have some artistic ability. It has to have square dimensions and some there are some color limitations. It can be animated too, but please don’t get too annoying with things like that.
  2. Log into your Bluehost control panel here. [screenshot]
  3. Under the “Files” section (by default it’s halfway down the page) on the right hand side, click “File Manager”. [screenshot]
  4. You’ll get an interstitial about choosing the directory. Just hit “Go”. [screenshot]
  5. The file manager will load with the public root directory (folder) for your site. That means that you’re basically going to see the files and folders contained inside the trailing slash at http://www.yourdumbdomainname.com/. This is where your favicon.ico file is held (it applies to the entire site). You don’t need to do anything with that file. [screenshot]
  6. At the top navigation of the file manager, hit “Upload”. [screenshot]
  7. Upload that fabulous new favicon by hitting “Choose File” [screenshot]. If you didn’t delete Bluehost’s default icon (there’s no need to, really), you’ll get this popup. [screenshot]. Overwriting it won’t kill anyone, so don’t be scared—it’s why you’re doing this in the first place. Note: the favicon must be named “favicon.ico” or browsers will not recognize it. If you use a generator to make one it will be named that way automatically so you probably don’t need to fret over it.
  8. It might take some time for the new favicon to show up on your browser. You can force it to show the new one by doing this.
  9. Grab a cup of coffee because you look great.
Share this post: