Restauranteur
Photographer
Cynic
Post with 4 notes
CSS-Only Hot Tracking
Hot tracking means the UI gives feedback about the current cursor position, such as a menu tab, button or link changing color, so that you know you are hovering over something functional. It makes for a more responsive UI.
In JavaScript, this can easily be achieved with onmouseover and onmouseout:
<img class='navImg' id='firstbutton' alt='first' src='images/btnfirstinactive.png' onmouseover='buttonDown(this)' onmouseout='buttonUp(this)' />Then, in buttonDown and buttonUp, you can swap out the image’s source, or do whatever you want. The problems with this approach are:
- Requires JavaScript to be enabled - I personally feel that this is a somewhat weak argument, but it is always a good idea to be as widely-compatible as possible. Here’s an article regarding the percentage of users who disable JavaScript.
- Every line of code you write is one more line that could break. Not having to write code simplifies maintenance.
- In order to ensure your images are available when the user takes action, you have to pre-fetch them with JavaScript, too.
- Multiple image files - more files to stick in your images folder. You probably will follow a naming convention so you know which “active” image goes with which “inactive” image. I also suspect (but haven’t verified) performance of swapping images is worse than cropping a larger image.
CSS provides an alternative, with the :hover selector, background-image, and background-position. Here is an example of a “?” help icon I created. Note you could have up to 4 variations of the image, if you needed to for the active and visited states.
/* This is the "inactive" version of the link */
a.helpRollover { display: inline-block; vertical-align: middle; width: 30px; height: 30px;
/* This is the image shown above, with the top 30 pixels being cropped out */
background: url(../images/helpsmall.png) no-repeat 0 -30px;
/* This is just so we can hide the link text */ overflow: hidden; text-indent: -10000px; font-size: 0px; line-height: 0px; }
/* When we hover, we move the image back down so that the "highlighted" version is displayed */ a:hover.helpRollover { background-position: 0 0; }
Free Web Hosting for Students →
If you have a .edu email address, you can get 1 year free web hosting (must pay $12 to register your URL). If your school doesn’t use .edu email addresses, you can contact them to work it out, too.
AJAX & Twitter
If someone read an article with this title 20 years ago, they would probably think it was a lost story from Greek mythology. These days, I think everyone but my grandma has heard the terms.
If you don’t know what AJAX is, it stands for Asynchronous JavaScript and XML, but it really just means dynamically loading web content client-side (the programming world loves nothing more than nebulous buzzwords about “new” paradigms). You don’t necessarily have to use XML or make asynchronous calls.
Traditionally, when you click from webpage to webpage, the entire page is transferred from the server to your client. The drawbacks of this are threefold:
- Requires user to take action to update the page
- Server has to do extra work to continually resend static content
- Client and network performance suffers because you are transmitting more data than you really need to
Twitter API Intro
I’ve made my first foray into the Twitter API. My initial plan was just to grab the user’s current Twitter avatar and show it as a link on their profile page, but I also got their most recent tweet with the same API call, so I decided to display that, as well.
Wikipedia API Revisited
A while ago, I added an “on this day” feature to my high school reunion site, using the Wikipedia API. The first time around, I used the front page filtered-down list as my source, and I highlighted any events from our formative years. What I really had in mind when I first came up with the idea was to ONLY show events from our school years, but filtering down their list further would often mean having NO events listed on a given day.
So, I went back to work on a more robust solution. Now, I pull down all the events for a given day (and cache it). I allow the user to filter the list by type of event ( event, birth, death ) and year range, along with the option of displaying holidays. By default, I show events from 1977-1996, along with holidays. I also integrate Wikipedia’s 3 standard sections into a single chronological list, and highlight events by bolding them.
Free Training for Leap Day →
PluralSight is offering their entire course library to the public for 2/29 for free.
Custom Attributes in HTML5
HTML5 finally allows you to use custom HTML attributes in a validator-compliant way. You could always add custom attributes to your HTML tags, and get or set the values through JavaScript like:
<div id='MyDiv' year='2007'>Something that happened in 2007.</div>
...
var o=document.getElementById("MyDiv");
var year=o.getAttribute("year");However, if you ran your HTML through an HTML validator, it would complain about your custom attributes. In HTML5, you can simply preface your custom attributes with “data-“, such as data-year. You can then use get/set/removeAttribute or the new dataset property to get/set the custom attribute’s value. Note that dataset is not fully supported by all browsers, so get/setAttribute is a more browser-independent solution. You can see a list of which browsers support dataset here.
var year=o.getAttribute("data-year"); // this should work cross-browsers
var year=o.dataset.year; // this might not work on all browsers
o.dataset.year=null; // removes custom attributeColor Scheme Designer →
This is a cool site for helping to generate complimentary colors for web or application design, with several options, and even shows what a sample site would look like. Pretty cool!
Caching Generated HTML Pages
If you’re a web developer and work with fairly complex pages that are somewhat static in nature, where content is generated from a database or other “slow” resource, it’s probably worth implementing a caching mechanism. Basically, after you generate the page the first time, you write the content to a text file somewhere. Then, when future requests roll in, you read the file from disc instead of requerying your database. When some triggering event happens and you know you need to regenerate the document, you clear the cached file.
The benefits are less work for your database server and faster response time for your users. The drawbacks are a little more complexity, additional storage needed for cached files, and security concerns ( you don’t want to cache private information and leave the cache document visible to the public ). The good news is if you have a good templating class structure, you can add it to your base class and any page can take advantage of it.
Post with 1 note
Wikipedia API : On This Day
As I’ve mentioned before, I maintain a website for my high school graduating class as a pet project. I’ve had the idea for a LONG time to add a section about events that occurred during our childhoods, to sort of reminisce and reflect. For example, I still distinctly remember watching the Challenger disaster live on TV in school, and the OJ Simpson trial was a big topic of debate (literally, as in Speech class!) in high school.
My first thought was just to data-enter a bunch of event info with dates into my database and query that. The nice thing about that is I could put in whatever I wanted … local events, national events, and world events. I could just add more and more whenever I got around to it, or even give administrative users a form to add events themselves.
Well, like most programmers, I get tired of repetitive activities real quickly, and look for a more efficient way to accomplish what I want. As a Wikipedia editor and user, I was familiar with their huge database of historical events by day, so I decided to leverage that, and starting digging into the Wikipedia API.
Page 1 of 2
