Archive for the ‘technology’ Category
Monday, March 28th, 2011 
I love the feature of the e Text Editor to highlight all instances of the word that your cursor is currently on. This is a difficult feature to describe, but see in the screen capture to the right that I have my cursor on one instance of “sel” and all other instances of the word are highlighted in yellow.
I recently heard about the new version of Sublime Text 2, a text editor that promises to become “a text editor you’ll fall in love with.” It does not, however, have this feature that I have come to depend on in e. Luckily, as they are building this new version of Sublime Text, the development team is using User Echo to allow feature requests to be generated by the community. I found this feature in a request – Upon selecting a word, highlight all occurrences.
In this post, a user had posted a plugin to take care of this feature, but in this plugin you had to select the word to get it to be highlighted. My request was for any word that you have your cursor on to be highlighted across the entire document. I requested this change, and less than 4 hours later, the plugin author had responded with an update to his plugin.
I have copied the plugin below, but the latest version can always be found at GitHub. Thanks a lot to adzenith for his plugin and service to the community.
word_highlight.py – with highlight when selection is empty
Posted in technology | 2 Comments »
Wednesday, March 9th, 2011 Sometimes instead of the standard image fader as the center of your website you need an accordion type image slider. I recently was in this bind, and found a great solution – the Horizontal JavaScript Accordion by ScripTiny. It’s a great little CSS-JS combination that will allow you to put an accordion image slider anywhere on your website with ease.
How to Install
To use this script, first download the zip file from the ScripTiny website. The zip file contains the two required files: slidemenu.js and slidemenu.css. The other files make up the example page.
Step 1
Upload those two files to your webserver. Next, include the following lines between the <head> … </head> tags in your page:
<link rel="stylesheet" type="text/css" href="FULL/PATH/TO/slidemenu.css" />
<script type="text/javascript" src="FULL/PATH/TO/slidemenu.js"></script>
Step 2
Next you have to add this tag to the body tag of the page:
onload="slideMenu.build('sm',200,10,10,1)"
Customize the parameters to meet your needs:
- The first parameter is the id of the unordered list you would like to bind the accordion to (default sm is used throughout this tutorial)
- The second parameter is the width you would like the accordion selection to expand to. If you change this, make sure you change the width of “.sm” in the slidemenu.css file (line 2).
- The third parameter is the timeout variable to control how quickly the sliding function is called.
- The fourth parameter is the speed of the accordion with 1 being the fastest. 20 is average, and 40 is very slow.
- The fifth parameter optional and is the integer that corresponds to the section you would like to be expanded when the accordion is loaded. If you want the fourth slide to be expanded when the page is loaded, this should be set to 4, etc.
Step 3
Finally, in the body of your HTML document, add the actual content:
<ul id="sm" class="sm">
<li><img src="IMAGE/1.png" alt="" /></li>
<li><img src="IMAGE/1.png" alt="" /></li>
<li><img src="IMAGE/1.png" alt="" /></li>
<li><img src="IMAGE/1.png" alt="" /></li>
</ul>
Now check out the page you created and marvel in the accordion awesomeness. It even works on many Smartphones (like the iPhone!)
Update: Another good option is ImageMenu by Samuel Birch – a MooTools plugin.
Posted in technology | 5 Comments »
Thursday, February 24th, 2011 As a web software engineer, I am often creating websites that need to work and look correct on a variety of browsers. Of all the browsers out there to code for, Internet Explorer is by far the worst. There are entire websites devoted to this fact (http://ihateinternetexplorer.com). YouTube does not even work on IE6. Although not as bad as IE6, IE7 is now the worst browser in terms of standards compliance and display issues. As the new “most despised” browser, and with IE6 practically dead with only 2.5% of global pageviews, IE7 is the new IE6.
I recently solved a particularly hairy IE7 bug, and created this image to commemorate the occasion. Feel free to use it.
Posted in technology | 1 Comment »
Wednesday, January 5th, 2011 With the recent release of Remember the Umbrella, I wanted to create an informational graphic of where our users are located across the United States.
I was first going to dynamically create a Scaled Vector Graphic (SVG) that would change the color of the state based on the number of users currently signed up for Remember the Umbrella in that state. That was the plan until I saw a site that uses the Google Graph API to dynamically create a map of where users are logged in from. “Cool,” I thought to myself – ready to dive into creating this feature.
The Base Data
Remember the Umbrella is a fairly simple service with a fairly simple database. Basically there’s a table that has one column with all the zip codes of the users. I begin by getting all of those zip codes. These zip codes will need to be converted to states (the state that the zip code is in).
Convert Zip Codes to States
I convert each zip code into a state using the Google Maps API. I get back JSON encoded data using this URL structure:
http://maps.googleapis.com/maps/api/geocode/json?address=[ZIPCODE]&sensor=false
And my code takes that JSON and gets the state code. So you use this URL, for example, to get the geographical data for 90210.
Arrange the Data
After I have the state for each zip code, I have to assemble this into an array in the format Array([State] => Qty, …). So the data may look like this:
Array ( [WA] => 60 [MD] => 22 [NY] => 18 [TX] => 16 [CA] => 10 [MS] => 50 [WI] => 11 [MO] => 21 [NJ] => 30 [KS] => 80 [IL] => 147 )
This data is what will go into the Chart API.
Using the Google Chart API to Create the Image URL
The Google Chart API allows you to create a chart by specifying the parameters in a URL in the form:
https://chart.googleapis.com/chart?[Parameters]
I am using the map chart, so the first parameter is cht=map. This specifies the chart as a map.
The next parameter goes right after the word map, and is the coordinates of how to zoom in on the United States. This parameter is :fixed=20,-160,55,-35.
Then we add the size of the image that we want our map to be. This is done by the parameter chs=600×400.
So far we have:
https://chart.googleapis.com/chart?cht=map:fixed=20,-160,55,-35&chs=600×400
… and now is the time that we add the colors and the states. To do this, for each state I add a color to the chco parameter (exception: the first color in chco is the color of the background) and the state ID to the chld parameter. So these parameters:
chco=cccccc|ffcccc|ffffcc&chld=US-IL|US-MO
… would create a background that is gray (#cccccc) and color Illinois and Missouri #ffcccc and #ffffcc, respectively. My code loops though the states and assigns colors appropriately. A final URL for the image could look something like this:
https://chart.googleapis.com/chart?cht=map:fixed=20,-160,55,-35&chs=600×400&chco=cccccc|ffcccc|ff6666|990000&chld=US-WI|US-MO|US-IL
The final product is here:
Update 6/6/2011 – jVectorMap seems to be a good way to do this as well.
Posted in technology | No Comments »
Monday, December 20th, 2010 
The start menu of my computer is fully-opaque gray. My windows are not transparent. The menus do not slide in. My Windows 7 theme is Windows Classic.
Many people are confused by this. They wonder why I don’t opt for a more visually-appealing user experience when Windows can provide one.
I like my computers to be workhorses – no frills. My personal laptop is a ThinkPad, what is traditionally a very boring, workplace computer. I like that it gets the job done and does not necessarily waste resources toward looking good.
I reflect this utilitarian view in my operating system too. I don’t need my OS to be a show of opening and closing applications – I want it to get me to my final destination (my applications) quicker. And if visual effects are turned off I can achieve that goal.
The fact that the Classic Windows theme is more like the old versions of Windows 98 and Windows 2000 – the versions I had grown to know and love when I was younger – is just a positive byproduct of the decision.
Long live the Windows Classic theme.
Posted in Opinion, technology | 2 Comments »
