The Sea Serpent of Ancient Sailing Legends

There's always a surprise in the ocean as marine biologist Jasmine Santana snorkeling off the coast of Catalina found out.

Data Security in Cloud Computing

Christian Science Monitor article discusses the impact of the government surveillance programs on the American cloud computing industry. A recent report estimates an average $30 Billion Dollar loss in the next three years for US based companies.

Image Captioning Tool Enhancements

There's a new version of the Image Captioning Tool, my jQuery plug-in. I've added capabilities to truncate a larger image and also play an MP3 audio when the user hovers over an image. Move your mouse over the example image above to see how it works. To try it out on one of your images, see the Captioning Tool. Music by Coldplay.

Read more »

The Ultimate

In a 21', single handed, all the way to Hawaii.

• July 7 - You can see the drift when the wind died down. They are further along today. One boat turned back (small triangle on map). My favorite for the race is Daisy Cutter.
• July 7 Evening - Race favorite Sammarcelli is coming back to the Marina. Daisy Cutter is currently the only boat out in the ocean.
• July 18 - Daisy Cutter is getting very close to Hawaii.
• July 21 - Almost there..
• Sean McGinn sailed Daisy Cutter, his TransAt 6.50 from California to Hawaii in 17 days. Similar trip, larger boat, broken self-steering, 24 days.
• Info on Open 650 boats

MacBook Pro with Retina Display

Apple's 15" machine with a 5 million pixel "retina" display became available last year. Although not as thin as a MacBook Air, it has a slim profile with 3/8 ths of an inch or ~1cm thickness. It runs quiet with a solid state drive (flash memory). Quick and responsive, there's no waiting on the OS when you flip the top open to start the machine.

The keyboard gets a little hot towards the top where the hinges are but that's a price you pay for a quieter machine. Only 2 USB ports, SD card slot and no DVD drive. Lack of an optical drive should not be a deterrent because you can install software over a network. If you are looking to switch to the Apple platform, MacBook Pro with Retina Display is a compelling choice. Background image is Seattle skyline by Rattlhed, sharing it via Creative Commons.

A Small Library

If you have a lot of books that you lend to members of an organization, students or co-workers, library cards and self-adhesive pockets is an easy, inexpensive way of keeping track.

Elusive Beauty

Chasing Aphrodite documents the story of looted ancient artifacts that found their way to the Getty and the tenure of curator Marion True at the museum. Among other pieces, a million dollar, vine-like, delicate golden funerary wreath, and a $20 Million, 1,300 Ib statue of a woman in a flowing gown carved in limestone were returned to their source countries voluntarily by the Getty. Sharing the sepia image of the Getty Center by Michael Gäbler through Creative Commons.

Leaving Gadgets Behind

Disruptions: Tech Elites Leave Gadgets Behind, a NY Times article from their Bits section.

Popular Programming Languages

A visualization for the most popular programming languages of 2012 on CodeEval.

Yogurt Biscuit

This is a different take on a recipe I posted a while back.

Read more »

CSS Image Grid by Floating Different Sized Elements

• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 

Ansel Adams Wilderness

© Copyright by Steve Dunleavy | Creative Commons Share-Alike License 2.0

The picture shows a mountain range on the Pacific Crest Trail. This is a follow up to a question in a previous image grid post. In this post, I have the first image displaying larger than the rest. The only significant difference in the code between this and that earlier post is the CSS rule that allows the first image in the list to be larger (CSS selector: #grid li:first-child img). The same thing could have been accomplished by giving the first li an id and targeting that id with the CSS rule. e.g. id="big-image" and #big-image. The other modification was to change the widths and heights in the CSS to reflect the different image sizes I am using here. Your grid images will likely be self-descriptive and distinct. The reason I used cutups from a single image was for simplicity.

Read more »

Converting Microsoft Word Docs to XML and Processing with PHP's SimpleXML

In this post, I'll describe how to do automated processing on a set of Microsoft Word documents. The task is to compare an old version of a document to a new version section by section, and generate an output table listing sections that were modified, added, deleted, or stayed the same.

You can do this sort of thing manually in Word by opening up the document and telling Word to compare it with the older version of the document.  Word will show you the diff marks and you could then scroll through the document and record all the section numbers and whether there are changes or not.  Very labor intensive and tedious.  In this case there are dozens of pairs of documents to be compared, and the whole process will need to be repeated every month as new versions of each document are created.  Clearly the manual approach would not work - this has to be automated.

Read more »

Windows 8

My HP laptop which has a 17" HD screen is not easy on the eyes. When I run Firefox, it renders a lot of the web too small. Make that very small. My blog was one of those sites until I updated the CSS to conditionally render based on screen resolution. Ideally, we shouldn't have to do anything so I was looking forward to Microsoft taking care of the high DPI problem in Windows 8. No such luck. In fact, the new operating system with its convoluted design and very slow startup made me regret the upgrade. "Metro"? Full screen browsing makes sense on a tablet or cell phone but not on a large laptop screen. They've taken tools like the calculator and squirrelled them away. Tired of playing hide and seek, I docked it to the taskbar which is configured to display on the right side of my screen. If you upgrade, don't fail to create recovery disks for version 7. You may want to go back. Sales so far? 40 million Windows 8 licenses since its recent release. Making Windows 8 more bearable.

A Simple CSS Blockquote Class

Painted in 1865 for an exhibition where it was rejected by the jury, Bread and Eggs is a still life by Paul Cezanne.

Cezanne ignores the laws of classical perspective, allowing each object to be independent within the space of a picture while the relationship of one object to another takes precedence over traditional single-point perspective.

Metropolitan Museum of Art

Read more »

9-Slice Scaling

The CSS3 Backgrounds and Borders spec defines a new property called border-image. This is a powerful new way to draw borders of an element, using an image instead of a fixed color. But the usefulness of this property goes beyond just replacing border colors with parts of an image. It can be used to perform 9-slice scaling. This is a scaling technique where you divide an image into a grid of 9 images, like a tic-tac-toe grid. Then when you perform scaling, some of the 9 sub-images are scaled and others are not. Specifically, the corners are not scaled at all, whereas the non-corner images (the center and four sides) are scaled. This is shown in the diagram above.

Read more »

The Shallows: What the Internet is Doing to Our Brains

I'm reading "The Shallows: What the Internet is Doing to Our Brains", by Pulitzer Prize Finalist Nicholas Carr who says that the Internet is having a different type of effect, "a much stronger and broader influence" on him than a stand-alone PC ever had in the earlier days of computers (Carr 16). I know what he is thinking, a PC with a word processor and a spreadsheet running locally just did not waste as much of your time as today's wirelessly connected computers can :)

Seriously, it's astonishing how fast and how much the interactive web - and all the devices small and large that are connected to it - have become a part of our lives. When I walk past neighbors, I see as many computer screens as TV's flickering hues of blue in the evening darkness.

Read more »

Replacing CSS List Bullets with Images Using Sprites

• To create a CSS list like this one, include the styles for numberedlist class and write your markup as shown in the blue box. You can switch to an ol from a ul if you think it'll help your code semantically
• You can build your own sprite image in an image editor such as Adobe Photoshop or use this image which goes up to number 9
• If you create your own image, compute the new offsets for the background-position property which is where the spriting is done
• Good luck!   

Read more »

HP Envy Laptops & HP Touchsmart Desktop

I replaced my home computers this summer. You can find great reviews of these machines on the web so I'll just point out some of the issues I encountered along the way. The HP desktop has the entire computer built into the back of its HD quality, touch sensitive, 23" screen. Fan stays on but is on the quiet side.

Read more »

Visual Depth: CSS Box Shadow Property

I added a thin line of shadow to two divs in my footer using the CSS box-shadow property which takes 6 parameters, h-shadow, v-shadow, blur, spread, color of shadow and inset. First two parameters are required, the rest are optional. Since I want the shadow to appear as a horizontal line, I'm going to be moving the v-shadow 2 pixels and doing nothing in the x-axis which is the h-shadow. So far, box-shadow: 0 2px. My blur is 2 pixels for the first div, color is self-explanatory, I chose inset to have the shadow fall inside the div. [box-shadow: 0 2px 2px #397896 inset;] To see the effect, scroll down to the footer below or click here.

Poor Man's Whiteboard

Or, poor woman's board in my case. I think I actually prefer it to a dry erase board because of the way I can move the Post-it notes around.

Kraft Paper + Post-it Notes + Sharpie Pen + Hardware Store Masking Tape is the recipe :)

Amazon Kindle, Well Made?

When I talked about e-ink devices last year, I mentioned being happy with my Amazon Kindle. I have the larger version. It was slow when paging through PDF files but I didn't have any other complaints. Just recently I discovered that the left side of its frame where it's attached to the Amazon cover is peeling off from the device. Specs: 1 year old, light use

CSS Frameworks

CSS FRAMEWORKS

• 960 Grid System
• Blueprint
• YUI Grids

The individual 960 Grid and Blueprint bitmaps that appear in the icon compositions (above and also on the main page) belong to the respective websites.

960 Grid System: A CSS Framework

After working with Blueprint last week, I want to generate the same layouts using the 960 Grid System, which is a CSS framework based on a width of 960 pixels with either 12, 16, or 24 columns. The column widths for these difference schemes are 80, 60 and 40 pixels respectively. In this post I am only going to focus on the 24 column layout of 960 grid.

Read more »

Using Blueprint CSS Framework

You can use the Bluprint CSS framework to easily create complex multi-column layouts. Some people are against using CSS frameworks because the class names are not semantic, and are instead used to specify the layout. In that sense the frameworks are mixing presentation into the markup. But even if you don't want to use it on a production site, you might still find it useful for rapidly prototyping a layout.

Read more »

Embedding JWPlayer in Your Web Page

jwplayer - Alternate content

Using a popular media player called JW Player, I'm going to show you how to change your markup to embed a video player. The video shows a dolphin that swam alongside my kayak. You can hear his breathing clearly. The best part was when he would swim away, turn around, lift his head slightly out of the water so his eyes and the top of his nose were visible and then swim straight back to the kayak at a fast pace, looking at me at the same time. I would start laughing nervously, thinking we were about to have a collision.

Read more »