Category Archives: web dev

  • Things I’ve been doing all weekend(s)

    1

    I’ve burned some serious midnight oil these past few months on a couple side projects I recently launched. I also went camping at Big Sur two weeks ago. That was fun. But back to the web projects.

    I created a philanthropic URL shortener to generate passive income for important organizations. It accepts Amazon.com URLs and appends the affiliate ID of a non-profit organization before shortening them. Anyone who follows the shortened link and buys something makes Amazon give ~ 4% of the order total to a non-profit org. The URL parser under the hood is super smart and fully ajaxed-out (while failing gracefully with javascript disabled). The goal of the site was to make it as simple and straightforward as possible to encourage people to use the service. It also generates Open Search browser plugins so Firefox and IE7+ users can replace their default Amazon search engine with a feel-good version.

    I’ve been helping a local art gallery increase their support base by building out a website. It sports a custom Drupal theme and is stupidly easy to update. They shouldn’t have a hard time keeping their content fresh. The artist boxes on the homepage load in a random order on each page refresh to prevent sibling rivalry. Unfortunately, it makes caching impossible. :/

    I spent all of half an hour setting up Gallery 2 at memedump.com. It helps me keep track of all the funny and profane things on the Internet. The website looks like crap and is loaded with crap. Thus, it makes total sense that it’s way more popular than my other projects and already reports 50,000+ page views. I later created memeaday.com for those people who want just one meme a day.

    There are a couple other things in the bucket including a video mash-up website but online video editing is, well, hellza problematic. So that one’s going to take a while.

    Lastly, my housemates and I had a blast acting out scene 330 of Star Wars: New Hope. Star Wars Uncut is a great project and you should sign up to film a scene right now. Let me know how it goes. Our shoot was a lot of fun.

    Posted in me me me, web dev and tagged , , on Oct 9, 2009 at 2:38 am #

  • Fixing MySQL max_allowed_packet error in MAMP

    1

    If you get a packet bigger than ‘max_allowed_packet’ bytes error when importing into a MySQL database on a MAMP system, you need to edit your max_allowed_packet variable. It defaults to 1MB.

    There are two ways to do this:

    • Create a my.cnf file and set the variable.
    • Add --max_allowed_packet=32M to /Applications/mamp/bin/startMysql.sh. Restart MAMP.

    The latter method is easier but if you’re going to be editing other variables it’s best to create a my.cnf file. MAMP ships with five my.cnf configuration files.

    You should be safe with my-small.cnf

/Applications/MAMP/Library/share/mysql/my-huge.cnf
/Applications/MAMP/Library/share/mysql/my-innodb-heavy-4G.cnf
/Applications/MAMP/Library/share/mysql/my-large.cnf
/Applications/MAMP/Library/share/mysql/my-medium.cnf
/Applications/MAMP/Library/share/mysql/my-small.cnf

    Copy it to /Applications/MAMP/Library/ and name it my.cnf.

    Choose one that works for you and copy it to /Applications/MAMP/Library/my.cnf. Find the max_allowed_packet = 1M line and change it to 32M (or whatever you prefer). Save the file and restart MAMP.

    Phew.

    Posted in web dev and tagged , on Aug 11, 2009 at 2:36 pm #

  • How to import UTF-8 encoded files into MySQL without outputting garbage

    0

    A recent Drupal localization project proved relatively painless until we moved the data from a local machine to a staging server. Importing thousands of lines of Bulgarian into a MySQL database went smoothly BUT when Drupal pulled the data it looked like gibberish.

    The database’s collation was properly set to UTF-8 but it refused to output Cyrillic instead of garbage. The solution? Edit your MySQL options file to change the server’s character set to UTF-8. Adding character-set-server = utf8 to my.cnf should do the trick.

    Posted in web dev and tagged on Jul 1, 2009 at 12:00 pm #

  • Keyword stuffing Craigslist: still an easy task

    1

    Note: Craigslist has since patched this hole.

    Back in the heyday of Craigslist spam, exploiters found simple methods of circumventing the site’s reliance upon community moderation. Keyword stuffing, the act of loading a page with keywords to increase its visibility in search results, was super easy because Craigslist stripped few HTML elements (and attributes) from posts.

    A user could create a post to sell, for example, a Squier Stratocaster, and pump related keywords into a hidden div. Craigslist would index the hidden words even though they were kept from visitors’ eyes. Someone searching Craigslist for a les paul would find the squier posting because “les paul” was found inside the hidden div.

    Keyword stuffing is both annoying and ineffective. Anyone looking to buy a Les Paul is not going to be interested in a low-end Squier. But, it’s a cheap and easy way to push content toward thousands of eyes. For this reason, spammers and scammers love it.

    Eventually, enough users smelled something fishy in their SERP and complained to Craigslist. A year ago Craigslist rolled out an update that blocked most HTML elements and attributes, permitting only a select few.

    The update stopped keyword stuffing dead in its tracks. Nowadays, most Craigslist keyword stuffing occurs through use of font elements with a color attribute set to a very light color, often lightyellow or honeydew. People notice this text and flag the ads. Community moderation defeats it.

    But there is still a gaping hole in Craigslist’s search engine: the values of attributes are indexed. Attribute value types that aren’t checked for integrity, such as uri, can be keyword stuffed.

    Instead of hiding keywords in a div, they can be hidden in the values of href and src. Craigslist checks for whitespace so slashes must be inserted, but slashes are conveniently treated as spaces when pulling search results.

    Here’s a live example I made to demonstrate keyword stuffing an HTML attribute on Craigslist (Note: This link has since expired.). The queried words don’t appear anywhere in the post. Viewing the page’s source code reveals their location.

    Craigslist needs to either check the integrity of attribute values or stop indexing them. Novice users don’t flag keyword stuffed posts because they chalk their SERP appearance up to bad search engine technology and not malicious posters. Either way, the blame is on Craigslist.

    Posted in web dev and tagged , on Jun 17, 2009 at 11:03 pm #

  • If javascript affects your UI, load it ASAP

    0

    The javascript focus() method is often used to place a user’s cursor in the username field of a login form on page load. Twitter uses this technique. After everything is loaded, a blinking cursor appears in the username field and you can begin typing your login credentials. Viewing Twitter’s source code, you can see the jquery snippet that shifts the focus. It’s at the very bottom of the page and is loaded after several javascript libraries (why the hell do they use three separate javascript libraries?).

      jQuery(function($) {
    $('#username').focus();
  });

    It is advisable to place a script just before the closing tag </body> tag unless the script affects the user’s experience on load. The javascript focus() method affects ux. When I visit twitter from a shotty connection (like when my housemates are all bittorrenting at the same time), focus is shifted to the username field after I have already typed in my username and I’m halfway through the password field. I have to re-click the password field to finish what I started. It’s annoying. Load the script in the <head> or directly after the corresponding element. Or just don’t shift focus.

    Seriously, though, why does Twitter jQuery, Prototype and Scriptaculous? Old code? Or maybe they’re just really indecisive and like to keep their options open.

    Edit: They have since redesigned the homepage and now only use jQuery.

    Posted in web dev and tagged , on May 13, 2009 at 5:02 pm #

  • Don’t let keyboard shortcuts hijack user experience

    1

    One of the most frustrating aspects of myspace (and there a llloooottt of frustrating aspects) is the use of javascript keyboard shortcuts within their image viewing platform. When viewing an image from a user’s profile, hitting the left or right arrow on your keyboard will load the previous or following image, respectively.

    Here’s the problem: it prevents users’ from using their arrow keys for purposes other than browsing images. This is problematic because the thumb buttons on modern mice navigate backward and forward through browser history by emulating keystrokes (alt/cmd + arrow).

    Once a user clicks through to a myspace photo, attempts to traverse backward through browser history by clicking the ‘back’ thumb button prove fruitless. They have to manually click the ‘back’ arrow in their browser. This confuses the user and interrupts her experience.

    To make matters worse, some users (myself included) don’t have a ‘back’ arrow in their browser. I removed mine because I became so dependent on firefox’s keyboard shortcuts I found myself never using the ‘back’/'forward’ buttons. It allows more space for the location bar so I can read longer urls.

    The result is a blackhole. I navigate to a myspace photo album and can’t exit. I’m forced to open my browser history or right click > ‘back.’ It’s annoying and adds to the aggro myspace loves to evoke.

    All I ask for is an option to disable it. If you’re going to experiment with javascript keyboard shortcuts, please make them opt-out at the very least. Opt-in (a la gmail) is ideal, and whatever you do, do not require them. What is helpful to one person can be a pain in the ass to another.

    Posted in web dev and tagged , on May 2, 2009 at 11:28 am #

  • CSS tip: Use :after pseudo-element to append copyright notices to printed material

    1

    Here’s some simple CSS code that’s useful if people frequently print portions of your website. When added to your print stylesheet it will append your site’s copyright notice to the end of any printed page. #content should be replaced with whatever element wraps your content.

    #content:after {
margin-top: 40px;
content: "Printed Material Notice: Any and all original material on this website may be freely distributed at will under the Creative Commons Attribution-NonCommercial License, unless otherwise noted."
}

    I don’t recommend you append copyright notices unless your content is frequently printed and distributed. eff churns out tons of original, quotable material and I often have visitors email me asking what permission they have to cite and distribute our work.

    check out eff’s print stylesheet to see it in action. In the rest of the stylesheet we strip extraneous material (sidebars, navigation, etc.), change the formatting of blockquotes and anchors so they’re not color-dependent, and print the page’s url after the ‘permalink’ anchor using this snippet.

    a.perm:after {
  font-size: 90%;
  content: ": http://www.eff.org" attr(href);
}

    Over in print-notie.css we replace our header image with a printer-friendly version using a list-style hack.

    #logo img {
  display: none !important
}
 
#logo {
  display: list-item;
  line-height: 70px;
  list-style-image: url(images/print_logo.jpg);
  list-style-position: inside;
  width: 99%
}

    This keeps everything kosher for the most part. Here’s a screenshot of a blog post in a browser, the same post after printing, and the post after printing without a print stylesheet. Without a print stylesheet it spans five pages and the only usable content is on page four.

    While EFF’s print stylesheet is not perfect, it does a good job prepping web content for printing. The :after pseudo-element, while not fully supported in all browsers, fails gracefully and can add helpful features to alternative media.

    It’s feels odd referring to paper as an alternative medium…

    Posted in web dev and tagged on Apr 25, 2009 at 5:25 pm #