Author: tpryan

CSS Variables Draft

Thanks to Molly Holzschlag’s tweet yesterday, I learned there was an Editor’s Draft of CSS Variables.

Let me first say that I think it’s awesome that the W3C is taking this on. I think that variables in CSS will ultimately be a good thing.  It will make it easy to reuse colors and other CSS properties.  It will make large amounts of redundancy go away.  It will make CSS files smaller, and therefore give less toe-holds to bugs.

That being said I have a major complaint with the implementation–in a word “data.”

See, here is how CSS variables are supposed to work according to the draft.

I create a property in the root named “data-header-color.”

https://gist.github.com/2136922.js?file=variableset.css

Then to refer to that color elsewhere, I use a construct that looks like a function named “data()” to retrieve it as so:

https://gist.github.com/2136922.js?file=variableget.css

As far as I can tell, the only explanation in the draft for why this is, is that it is trying to match the HTML specification for “data”:

The naming here is loosely based on the form of custom data attributes in HTML5. However, as defined here, the syntax for variable usage is different from the syntax for variable definition (i.e. data-foo for definition, data(foo) for usage). Some have suggested that the syntaxes should should match, using functional syntax in both cases. Others have suggested using a prefixed symbol instead of functional syntax (e.g. $foo) for both the property and usage.

Well at least they are aware that some might object to this format.  So let me add my voice.  I object. Variables are a pretty standard construct, people know how they work. Make them work like variables in other languages.  I have a bunch of reasons here:

  • Two different syntaxes for creation and consumption seems confusing
  • It looks like you’re calling a function, but you’re not.  You’re referring to a variable.  That’s confusing.
  • CSS and HTML don’t have a lot of overlap in syntax, why is adding some a good thing?

My preference here is that I can just use plain old words as a variable, then consume them as plain old words. That being said I would be okay with a prefixed symbol, like a $ if it comes down to some sort of parsing issue.

That’s my major problem with the draft, but I have one other issue with the behavior on invalid variables. Like if you set the margin to #FFFFFF. Basically if you have this code:

https://gist.github.com/2136922.js?file=errorwithoutvariables.css

Then the p comes out as red, but if you have this code:

https://gist.github.com/2136922.js?file=errorwithvariables.css

The p comes out transparent.

This sort of change in behavior might be pretty confusing. The explanation makes some sense:

The invalid at computed-value time concept exists because variables can’t “fail early” like other syntax errors can, so by the time the user agent realizes a property value is invalid, it’s already thrown away the other cascaded values. I think “attr()” needs to rely on it as well, as its behavior is almost identical to variables.

But I imagine this is something that browser manufacturers can handle as they control the behavior of “throw[ing] away the other cascaded values.” They could hold on to cascaded values until they are done computing variables.  But maybe I’m missing something here. But it’s also worth considering if this will make invalid CSS easier to track down. I doubt it, but until a browser implements these, it will be hard to determine if that is true.

Anyway.  The good news here is that this is the editor’s draft, not the recommendation. This means that now is the time to start analyzing this spec and commenting on it. So what do you think?

 

 

 

 

Search, Hold the Server

Being a content site, it was pretty important that whichElement.com have search–which was pretty hard considering that I didn’t want to have any server-side components involved.

At first I thought I would just let Google index the site, and hook up a Google search box on the site to solve the problem. That was certainly an option.  I thought I would have to do some SEO magic to make it happen correctly, but it was doable. In fact, Ray had solved this problem already.

But then I got to thinking, wouldn’t be cooler to rise to the challenge of a search without a server? Why, yes, yes it would. I broke up my needs into two parts:

  • An index of the site’s content
  • A mechanism for searching the index and displaying the results.

I kicked around a few ideas, but finally settled on the idea of creating a JSON file that had an array of objects with title, url, summary, and condensed content info. If I had such a file, all I would have to do is search through the JSON to find results. So the second part of my search was a snap.  All I had to do was:

  • Pull down the JSON file
  • Run searches against that JSON file
  • Present the results

All of this was pretty easy to do, and not revolutionary.

The difficult part was making the index in the first place.  The added difficulty is that I wanted to use JavaScript for everything.  So I couldn’t just use a shell script or some other easy way of indexing the files. Basically I wanted to remove barriers to entry, so an OS X shell script would create an obstacle for Windows based HTML developers to get involved.

Trying to do this with JavaScript in a browser was very hard. While there is a File API for the browser, you can’t use it to point at arbitrary directories on the file system like the site itself, you can only really point it at a sandboxed space. This made indexing kinda impossible.

I said I had to use JavaScript; but I didn’t say I had to use a browser. Enter Rhino the Java interpreter for JavaScript. Rhino gave me the ability to call Java File IO classes from JavaScript.  This allowed for easy indexing of the content. Now this might be a bit of a cheat since I am basically calling Java, which is a decidedly server-side technology in this case.  I rationalized my way out of it. ANT is required to build the project, but knowing how to fire off an ANT build and being forced to right full Java are two different things.  I’d love to hear if any of you are put off by this.

Rhino gave me the ability to run JavaScript from the command line, or from ANT.  Since we publish whatever gets checked in to the github repository, and we publish that code through ANT, I could just reindex as part of the build whenever new content comes in. New content causes a reindex, the index is always up to date, and generated on my terms – only JavaScript.

What it actually does:

  • Reads in all HTML files in the site
  • Filters ones that I don’t want in search results.
  • Grabs the title, url, and content from each
  • Writes out this content to JSON on disk

It’s not perfect. Search is pretty primitive – I don’t know how far it will scale. But for now, I have a pretty cool solution to my problem.

Here’s the indexer code:

http://snipplr.com/js/embed.js
http://snipplr.com/json/63962

First New Contributor on whichElement.com

Wow, I’m happy to say we have our first new contribution to whichElement.com.  Adam Tuttle fired off a pull request to me this morning to fix some grammatical and spelling issues. I was happy to bring his changes in.

This is a great example of how you contribute to Open Source projects you like without necessarily spending a tremendous amount of time or writing a crap ton of code.  Adam noticed some spelling and grammar issues, probably because I have the spelling ability of a Russian Sex Spammer. Awesome. He fixed it. He contributed it back.

I cannot tell you how happy I am to have someone correct me.  Feel free to pitch in.

WhichElement.com

I’m pleased to unveil a little project I’ve been working on for a few weeks now: whichElement.com. WhichElement.com is a reference site for answering the question “Which elements should I use to mark up this HTML semantically?” I’ve been joined in this effort by my coworker, Ray Camden. We’re pleased to put this out there, and eager to see what you can do with it.

The Story Behind It

I was (and still am) incredibly impressed by HTML5 Please.  I think it’s a fantastically on-target site. It showcases its technology and hits on a specific need and fills it brilliantly. I wanted to do something in the same vein without just copying it.  Around the time that I was feeling this, I got into an argument on semantics with someone. Specifically they were asking questions about when they should use article versus
div. Basically I explained what I knew of the spec for article. I gave some analysis, and made a recommendation.

When I was done with the argument I had an idea for a site:  A reference that would help people choose for themselves which tags to use semantically without being authoritarian.  I also wanted to set the tone that there isn’t one right answer to these things – that “semantically correct” isn’t a binary thing, but a position on a continuum.

The Technology Behind It

Another important thing for us in doing this was choice of technology. We placed a couple of constraints on the project:

  • We wanted to be open to other people contributing and offer a few channels for that.
  • No content management or wiki software
  • All code and content would be in HTML/JavaScript/CSS; no server-side technology

To achieve this we made a few choices.  To go open and collaborative without having a wiki, we went with github. Not the usual answer for a content site, but I think we can make it work.  The choice of no server-side tech (other than a vanilla web server) came about so as to not discourage contributions from anyone.  PHP, Ruby, ColdFusion, some JVM language, Python – whatever your back end, you have to know HTML/JavaScript/CSS. So let’s not skew one way, when most of the contributions can be made very simply with the front-end stack.

Working in those constraints wasn’t always easy. Ray got tired of copying and pasting template code around despite my incredibly stupid protestations that “No, it will be okay; we can work that way.” So he came up with a cool way to handle that with some JavaScript and .htaccess magic. I had to come up with a way to provide search without having any sort of server-side tech. We’re not sure if other people will be cool contributing under these constraints, but obviously I hope so.

Get Involved

We’re open to contributions.  We do all of the publishing through an automated build process that looks at the github repository for the project. So git is the path to getting on production.  We’re open to forks and pull requests.  We’re also open to contributions through email.  Basically if you want to contribute, drop us a line, we’ll figure out how to work with you to get you in.

 

Directory Listing in Rhino

This is pretty simple, but I couldn’t find it via searching, so I thought a little write up was in order.

I’m fooling around with Rhino, which is a JavaScript engine written in Java.  It allows you to do a lot, but in my case I am using it to write JavaScript helper scripts for ANT.  I’m working on a project for which I want to only write in HMTL/JavaScript/CSS.  I have to write some ANT scripts, but anything that I can’t accomplish with ANT, which means I need a scripting language to do, I decided to do in JavaScript.  Rhino allows me to accomplish that.

I’ll post more about what I’m trying to do when I release more about the project.  For this step, I needed to get a list of all of my files in my project so I could manipulate them in JavaScript.  I looked for a directoryList function, but only found this post on Directory Traversal. So I whipped up my own script for DirectoryList in JavaScript using Java on Rhino:

http://snipplr.com/js/embed.jshttp://snipplr.com/json/63696

Say Yes, And!

A friend and mentor of mine, Avish Parashar has a new book out named Say Yes, And! Avish has a ton of great advice to give you, and I highly recommend the book. Go forth and pick it up from Amazon.

Still here? Okay, let me tell you why I think this is a great book.

Improv Comedy

Avish’s philosophy has it’s roots in improv comedy. Improv comedy imparts a great deal of skills that can be useful in the work world:

  • Creative Thinking
  • Effective Collaboration
  • Public Speaking

One of the core concepts of improv comedy is the offer.  An offer is an attempt to create or develop a scene it is vital to creative thinking and collaboration.  For example a group of improv players get the location of a bathroom from the audience. Player 1 steps out, mimes slapping a wet mop down on the floor, and announces in a terrible Scottish accent that “Accckkk the lavatory has been invaded by the filth again!”

That’s an offer, he’s created a reality: he is a Scottish janitor in a filthy bathroom and it’s his job to clean it up.

Now Player 2 has the ability to do three things:

  • Block
  • Accept
  • Build

Blocking is bad.

Player 2 steps out and says, “What do you mean filth, this bathroom is a monument to cleanliness”.

See what he did there? He completely invalidated what Player 1 said. It completely derails the scene, the two of them have to start building from scratch. It doesn’t bode well for the scene.

Accepting is better

Player 2 steps out and says, “Well if you cleaned them more often, they would’t get this bad.”

This is better, he accepted the reality that player 1 offered and didn’t just bring the scene to a halt. The two of them can go on from there. But Player 2 didn’t make it any better. Nothing was added.

Building is best

Player 2 steps out and says, “Yes, and I need to get home fast today. I noticed that there is an emergency fire hose in the hallway. I bet it would blast the grime away.”

That is the beginning of a scene where something happens. Something dumb and disastrous, but that’s comedy.

Yes, And! is the name of an exercise that teaches you to build instead of blocking or merely accepting. Basically someone says something and you have to start your response with “Yes and.” It forces you to accept and add, which is building.

Back to work

How many times have you been brainstorming trying to solve issues or come up with something new and confronted by people blocking you:

  • Offer: Let’s build a full featured version of PhotoShop for tablets!
  • Block: But even the most powerful tablets are still not powerful enough to run desktop PhotoShop.
  • Accept: Okay, what would that look like?
  • Build: Yes, and we could use the camera to pull photos directly into the app, something that doesn’t make sense on desktops.

One response stymies progress, one doesn’t help it, and the last advances it.  Our goal should be to get to a place where the building response is our first instinct.  It doesn’t make the statement put forth in the block any less true, but most of the facts that get put forth to block ideas are obstacles to overcome, not reasons to prematurely abandon ideas. (PhotoShop Touch is doing very well thank you. )

Say Yes, And! by Avish Parashar is a book that will give you the tools and training to get yourself to think of building instead of just accepting or even blocking in the business world. Avish is a great teacher, and you can get a lot out of it.  Go get it!

Inception Score Easter Egg with Web Audio API

There’s a great video on YouTube detailing an Easter Egg in the score for the movie Inception.  Basically Inception is about dreams and the slowing down of time. Likewise the score is based on the slowing down of music that is played inside the plot of the movie.  Pretty cool. Feel free to check out the video before continuing.

I wanted to use this concept to show off the Audio capabilities in HTML5. Basically I want to:

  • Play the Inception Score
  • Play the Edith Piaf song
  • Play the Edit Piaf song slowed down
  • Play the Inception score over the slowed down Edith Piaf song.

But the vanilla tag didn’t work for me. The tag does have the ability to be slowed down, but it seems that in Chrome and Safari, I could not get the rate below 50% of the original. On Chrome the sound stopped playing if the rate was below 50%, and on Safari the sound just never got slower even though the rate was below 50%.

I figured I would give the Web Audio API a try and see what it could do. So I wrote a function that could play back a sound at a given rate:

http://snipplr.com/js/embed.js
http://snipplr.com/json/63363

That worked. All I had to do was set up some HTML to display it, some CSS to make it look less plain, and some buttons to make it work.

There’s a working demo here:

Audio API Demo

Oh before you click on that link – It only works on Chrome. And sometimes it has the tendency to stop working all together. The fix is to empty your browser cache, and restart Chrome. But hey, still a cool proof of concept.

Web Audio API: setting playbackRate

I was working on a little demo showing the manipulation of playback rates of audio clips.  The Audio tag failed miserably.  On Safari and Chrome (both for Mac) the audio tag couldn’t playback the audio any slower than half speed.

For what I was working on, this meant trying out the Web Audio API.  I stole some code that allowed for playback, got it working, then tried to manipulate the playbackRate for the clip. But no joy, no Chipmunks singing for me.

I looked up a couple of things, and many of them pointed at this statement from the HTML5Rocks Web Audio API FAQ:

Q: HOW CAN I CHANGE THE PITCH OF A SOUND USING THE WEB AUDIO API?
A: Change the playbackRate on the source node.

I tried and I tried for an hour to get this to work using this syntax:

source.playbackRate = 2.0;

Turns out you have to set it as:

source.playbackRate.value = 2.0;

Hopefully, this spares you some time.

Github Ribbons in CSS

Github has these cool ribbon images that you can use if you want to encourage forking your project on your site. They’re great and I wanted to use them on a little project I am working on. However, one of my goals was not to use any images, but rather produce all display elements with CSS.

It was a little bit of trial and error but I got it working. Basically you do the following:

  • Create a link in a div with an id of “banner”
  • Force div#banner to be 149px x 149px.
  • Set overflow to “hidden”

This creates a square display area that won’t show things that stretch out past the bounds of the box.

  • Create an A link
  • Tilt it using a CSS transform
  • Use relative positioning to pull the ribbon into place
  • Use CSS shadows to tweak the text and ribbon shadows
  • Finally I use a CSS gradient in the background of the ribbon to give it the bands that run along the edge.

https://gist.github.com/1679040.js

Issues:

  • It’s not a pixel perfect representation.
  • It doesn’ work on IE before 9. It doesn’t appear at all.

I’m not sure if I’m going to use this. I’ll sound judgmental here, but the fact that it doesn’t show up on IE less than 9 seems like a good thing. Do I want a developer on my project that isn’t using the latest browser? Probably not.

Demo
See the live demo here.

Update

A couple people pointed out that there was a weird doubling of the letters on their browser (Chrome on Windows, and Safari on iPad.) Looks like it was caused by a slight text-shadow I had on the text. The text on the original banner has some anti-aliasing going on, and on some browsers, the text shadow helps it look a little smoother, but on others you get that doubling. So I’ve removed the text shadow.  Display should be a little more consistent.