Introducing head.js to My Studio

Posted on 5/31/2011 by rasx()

These are the advantages of adding Head JS, specifically head.load.min.js, to my new Web designs:

Measurable and perceived performance boost: Head JS loads scripts in parallel, decoupled from the loading of document visuals. In effect, the conventional jQuery event for $(document).ready() fires before all of the scripts are loaded.
Loading of JavaScript libraries can be maintained from an external file instead of locking files into hard <script /> elements.

So here is my Head JS document pattern based on three <script /> elements:

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script src="./Scripts/head.load.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        head.js('./Scripts/jquery-1.5.1.min.js')
            .js('./Scripts/jquery.tmpl.min.js')
            .js('./Scripts/jquery.extensions.rx.js');
    </script>
    <title>My Document</title>
</head>
<body>
    <div>
    //document...
    </div>
    <script type="text/javascript">
        /*jslint browser: true, cap: false, passfail: false, undef: false, white: false */
        /*global window head jQuery */
        head.ready(function () {
            (function ($) {
            // document script...
            } (jQuery));
        });
    </script>
</body>
</html>

What’s the big change for me (besides the switch to HTML 5) is that the both the second and third script blocks can be ‘sourced’ to an external file. This should be a great help for kintespace.com as it runs proudly on primal, static *.html files.

Remote Desktop for the Songhay Studio

Posted on 4/26/2011 by rasx()

Using Remote Desktop with my virtual machines was not possible because their network adapters were set to NAT instead of Bridged. I’m sure I made this setting because some version of VMware Workstation <=7 did not properly support Bridged networking.

Ubuntu’s supposed support for Remote Desktop begins at version 10. So I spent most of the day yesterday upgrading to Ubuntu 10.04 LTS. This turns out to be great idea in general because it seems to run faster within the same memory limits as the previous LTS version of Ubuntu. As a Microsoft guy, this revelation is quite impressive!

However, there was one VMware-related bug with this upgrade. The keyboard was not recognized by Ubuntu 10.04—this is documented in “Ubuntu 10.04 doesn’t accept keyboard input when running under VMware on Windows 7.” What worked for me was logging into Ubuntu from putty and installing the VMware client tools (before I could do this I had to make sure the appropriate Linux headers were installed, sudo apt-get install cpp gcc build-essential linux-headers-$(uname -r)).

Multiple Monitors and Remote Desktop

The use of VMware and Remote Desktop among two or more computers is a quantum leap toward “extreme” flexibility for working in the Songhay Studio. I have a few situations right off the top:

Using Remote Desktop against VMware on the host machine is a prudent work habit that allows me to move to another machine without having to log out of my session.
Using Remote Desktop against the host machine from another machine with a bigger monitor simply allows me to work on another machine with a bigger monitor. Here in my studio living room, the bigger monitor is connected to my Mini-ITX “media center.” I can take advantage of the larger screen without having to install a bunch of crap on the “media center.”
Using Remote Desktop (or just VMware) on the host machine and using a web browser connecting to the VM web server on another machine with a bigger monitor. Because my work with jQuery or Silverlight is usually accessible from a server, I effectively have a dual monitor experience without having to connect two monitors to the host machine—which is just a notebook. This is now possible because of Bridged networking working.

Relevant Links

@denisejacobs CSS Links

Posted on 3/22/2011 by rasx()

“Text Depth of Field Effect”

Sawyer Hollenshead: “Best viewed in a WebKit browser…” Uses the Web Font Loader…

“Demo: CSS drop-shadows without images”

Nicolas Gallagher: “Using CSS pseudo-elements, box-shadows, and transforms to create drop-shadow effects without images from semantic HTML…”

“Checkerboard pattern with CSS3”

Lea Verou: “Webkit seems to have an odd rendering bug, so it needed a background-size override and it still doesn’t look perfect. Oh well, reported the bug and moved on.”

“Useful Web Services, Tools and Resources For Web Designers”

Smashing Magazine: “This tool is a bookmarklet that lets you turn any Web page into a wireframe with a single click. The bookmarklet helps you get rid of all distractions by blocking out copy, images and ads, letting you take a closer look at the website’s building blocks. Wirify is a useful tool that shows the balance of a website that the eye perceives only unconsciously.”

“CSS: Innovative Techniques and Practical Solutions”

Vitaly Friedman: “The main goal of the article is to present powerful new CSS techniques, encourage experimentation in the design community and push CSS forward. Please notice that we feature both experimental demos and practical techniques in this article.”

“CSS coding conventions”

Stoyan Stefanov: “The important thing to remember is—it’s not that important what exactly is a chosen standard or convention, the most important is that there is one. The rest, the details, is just common sense, and since ‘the common sense is not common to everybody’, pick whatever makes sense for you.”

“CSS organization tip 1: Flags”

Douglas Bowman: “I briefly touched on CSS organization a couple months ago. As a bit of background, if you’ve ever taken a look at any of my style sheets, you’ve probably noticed that I always divide them into key sections.”

“Why Is Chinese Web Design So Bad?” and other links…

Posted on 3/2/2011 by rasx()

Nick Johnson: “I think this insight into how most Chinese learn might be a key component to how most Chinese read and interact with websites as well. As Westerners, we desire and expect enlightenment, an ‘ah-hah’ moment, an understanding, even entertainment (whether that is the intent of the website or not). Easterners don’t operate that way. They acquire data first; they indulge in it later. The premise of my theory is that when Chinese are accessing a website, they are in data acquisition mode. It’s all about input from the site to the brain, and not nearly as much about interaction, reaction or understanding.”

“The Demise of Plain CSS: Why Sass and Languages Like It Will Triumph”

Harry Roberts: “Sass is essentially a programming language for designers. It is extremely limited when compared with other languages, but it does a magnificent job of translating the core concepts of a programming language in a way that makes sense for styling a document.”

“New JavaScript library for OData and beyond”

WCF Data Services Team: “Today we are announcing a new project called ‘datajs’, a cross-browser JavaScript library that enables web applications to do more with data. datajs leverages modern protocols such as JSON and OData as well as HTML5-enabled browser features. ‘datajs’ is an open source project, released under MIT.”

“Stealing content was never easier than with HTML5”

Serge Jespers: “HTML5 makes adding video and audio content to your site very easy but there is currently no way to protect that content. If we’re all completely honest we know that content protection is still a big deal for record companies, movie studios, and TV channels, yet HTML5 puts their content just up for grabs.”

“LESS, CSS Frameworks, and Rails”

Geoffrey Dagley: “I recently came across LESS, a Ruby gem similar to SASS. The idea is that you can write .less files that are CSS-like and they will be translated into CSS. The advantage, as I see it, is that you can use existing .css files as .less files since the syntax is so similar. In addition to the standard CSS syntax, you also get nested rules, variables, and mixins, just like SASS, but without the extra dependency. You can also import other CSS files as-is, like the CSS frameworks, and mix those styles into your semantic styles. This eliminates the need for Compass to provide the SASS-ified version of the framework.”

“Adiós flash charts” and other plotted links…

Posted on 1/19/2011 by rasx()

Dave Martin: “Not only does the page look better, it also loads faster thanks to flot.js. Flot is a great little open source chart library for jQuery. Flot give us complete flexibility over how we display stats, and it allows you to view stats on any device that supports JS.”

“Create an Exploding Moon Orbiting a Gas Giant in Photoshop”

“…Ed Lopez will demonstrate several techniques including how to break apart a planetary object, create a star field, dust and clouds, and even how to create a gas giant from scratch. This is a written tutorial but it also includes over 800 MB of video instruction.”

“Five Ways To Know Your Photos Aren’t Cutting It”

Scott Bourne: “Your Photos Aren’t Cutting It if nobody is attacking your work. This will surprise you, but the first sign your photos aren’t cutting it is that nobody has ever told you that your work is horrible. If you stick with safe, plain vanilla photos, nobody will care. If nobody cares enough to complain, you probably aren’t taking enough risks.”

“ImageOptim”

Chris Coyier: “Why do you need this? If you are ‘Save for Web’ing from Photoshop, that just isn’t as good as you can do. I’ve been using it and saving 8% on average of lots of different images. That’s a significant speed boost on the web.”

Knockout.js

“Knockout is a JavaScript library that helps you to create rich, responsive display and editor user interfaces with a clean underlying data model. Any time you have sections of UI that update dynamically (e.g., changing depending on the user’s actions or when an external data source changes), KO can help you implement it more simply and maintainably.”

“The Mystery Of CSS Sprites”

Sven Lennartz: “Digg has quite an esoteric sprite, with small arrows and brackets. The large empty space between the images is used to make sure that text resizing doesn’t display multiple images as the background image. You can [explicitly] define width and height in pixels, so that this problem does not occur—however, in this case the resized text will never break out of the defined box, thus possibly making the text unreadable. Consequently, you must be cautious when using spriting for buttons with variable text labels. For those buttons, you should define font size in pixels also. Or just use the large empty space in the sprite (thanks, daftie!).”

“Welcome to Google Body”

Google Labs: “Google Body is a detailed 3D model of the human body. You can peel back anatomical layers,zoom in, click to identify anatomy, or search for muscles, organs, bones and more. You can also share the exact scene you are viewing by copying and pasting the URL.”

“Pirates Love Daisies”

Larry Larsen: “Here is an introduction to a new Tower Defense game called Pirates Love Daisies. If you like TD games, I think it could keep you very busy over the holiday break. It was written by Grant Skinner at GSkinner.com. Grant is a Flash developer and this was his for project for HTML5. That’s right, the whole game runs in HTML5, CSS3, and Javascript—no plugins.”

David Mccandless

davidmccandless.com: “I’m an award-winning writer, designer and author based in London. My work has appeared in over 40 publications worldwide including Wired and The Guardian.”

the rasx() context

I preach these Blues, then choose my seat and sit down.

Category Archives: Adobe Studio