Author: tpryan

Speaking in Philly this Week

I’ll be speaking in my hometown this week. I’ll be presenting at the Philadelphia Area New Media Association (PANMA) meeting for January.

Topics:

  • jQuery Mobile
  • PhoneGap
  • Typekit
  • Edge
  • CSS Shaders

Description:

Adobe and HTML5

In the past few months, there has been a number of new tools and new services from Adobe for HTML5. Some of these tools, like PhoneGap Build and jQuery contributions are aimed at developers and some, such as Edge, are more focused on designers. Adobe Evangelist Terry Ryan will give an overview and demos of these and other tools.

The meeting is on Thursday, January 26th at 6:00PM. It will be at the Huntsman Building at 38th and Walnut on Penn’s Campus.

Venn Diagram entirely in CSS

A friend of mine alerted me this weekend to just how much I have a weird fascination with Venn diagrams. I decided to roll with it. So yeah, I have an irrational love of Venn diagrams. But that begs the question, can I make a Venn diagram with just CSS?

I found a couple of examples out there:

But I felt like they had a bit too much fluff in the HTML markup. Not that there is anything technically wrong with their implementations. I prefer complexity in my CSS and not in my HTML. It’s probably just a subjective thing, but I do.

So how do you do it?

First you create 3 divs. 1 for each Venn circle, and 1 for the overlap section. Each div contains a p with content in it.

https://gist.github.com/1664396.js?file=htmlportion.html

Then you go to style each of the circles. Give them matching heights and widths, and a border radius of half of the height. This creates the circle. Then give each one an opacity below 1. This will ensure that when they overlap they will form a new color.

https://gist.github.com/1664396.js?file=circles.css

I then created two rules based on the nth child css selector to color each of the circles. I also padded to ensure that there would be a space to write in the overlap section.

https://gist.github.com/1664396.js?file=eachcircle.css

Finally I styled the overlap section using relative positioning and pulled it back towards the center.

https://gist.github.com/1664396.js?file=overlap.css

The real trick is to watch the pixel counts because a couple are directly related.

To create a circle:

  • width must equal height
  • border radius must equal 50% of width.

To overlap circles:

  • Circle 2 must have negative x left margin
  • (Or Circle 1 must have negative x right margin)
  • Each circle must have x padding-left or x padding-right to ensure its text doesn’t spill over borders

It looks like the example works across modern browsers, including IE 9, but not previous versions.

Speaking at Webvisions Next Week in NYC

I was originally scheduled to help out my colleague Kevin Hoyt as a TA. Turns out that there was a slight scheduling SNAFU and I’m taking a full slot. My topic:

The Future of HTML5 Motion Design

HTML5 and CSS3 are hot, driven by an explosion of new, Internet connected devices. While they offer many new features that should allow you to do the types of things that you previously did in Flash, actually making it happen is really hard. Until now.

If you weren’t sure, I’ll be talking about Adobe Edge, our HTML5 animation tool. It’s currently in beta, and looking pretty cool.

So if you’re in NYC, and want to get some dirt on where Adobe is going with HTML animation or just to get close to some of the foremost experts on the web, you really got to check out Webvisions.

Chameleon

Just because some skeptics are irrational about something, doesn’t mean that they don’t know they are being irrational. They know that if they gave the real reason for their resistance that people would find their objections unacceptable. In short if someone’s reason for not accepting that your company should support the iPhone and invest in iOS apps is that they think “Apple users are obnoxious hipsters,” they’re going to get dismissed out of hand. They know it, so they resist by bringing up “the Evil Walled Garden” argument. If you are able to mount a solid case against the “Walled Garden” argument, they switch to opposing Apple because “Android hardware would be cheaper”

Now to be clear, I’m not saying any objection to Apple is irrational. I’m saying if you specifically are going to resist Apple in an honest business focused decision for the specific reason “Apple users are obnoxious hipsters,” you are being irrational. I’m also not saying “the Evil Walled Garden” or “Android hardware is cheaper” are right or wrong arguments. I’m saying they can be rational arguments (with evidence and justificaiton) but that arguing those things without believing or weakly believing in them to cover up for an irrational objection is the problem here. 

Scenario
I worked with a guy who stated “I don’t believe in indices [in a relational database].”

I know. We can argue many things: what columns to index, clustered or unclustered, whether we should even be using relational databases… But we can all agree that if you are using relational databases at some point you need to use indices.

But that was this guy’s beef. He resisted any sort of argument that he needed an index on any of his tables. He showed us articles that said “YOU DON’T HAVE TO USE INDEXES… on tables with many more writes than reads“. When performance was effected by a lack of an index, he said the performance was acceptable. When performance was still an issue he went into a long diatribe about how hardware upgrades on the server side would make his performance issues go away in an acceptable timeframe.

Then we introduced ORM (object relational mapping) into the environment. He objected…. loudly. Why? “The performance tradeoffs are too great.”

Clearly his issue with ORM wasn’t really performance. He had no problem waiting for performance to be enhanced by hardware upgrades, which is itself kinda silly.  And his acceptance of poor performing SQL was not because he hated indices. It was because his real resistance was based on something else.

What was that real reason? I don’t know but I have my theories. (I became much friendlier with him later, and it never came up.) I think in general the truth had more to do with trying to limit the number of new technologies and techniques so that he could keep a handle on the environment as he was also doing a fair amount of managerial, administrative, and business work as well. When you’re stretched so thin, you have to figure out a way to contain complexity. But that’s just my theory.

Ultimately his real reason doesn’t matter. Because like all of the Irrational types, you should ignore them.

It’s tough though, because these guys masquerade as rational types before you realize what’s going on. So how do you spot them?

A few signs:

  • Drastically changing objections, did these guys start out as Burned, and then change to Time Crunched when confronted with evidence?
  • Dramatic reversals of objections raised in previous discussions, did they go from indifference to performance to performance being the only thing?
  • Being a Chameleon in the past, if they have done this to you before, and you haven’t figured out a root cause then it is likely that they are repeating.

In general these guys and gals suck. They waste a lot of time because you are fooled into arguing with them rationally since they act rational. But if you suspect you’re face to face with a chameleon: cut your losses – move on to try and convert someone else. Either they are Irrational, and you saved yourself some grief, or they aren’t, but they’ll be easier to bring around with more converts on your side.

A Custom Textarea for Finicky in HTML5

I’m doing more work on bringing Finicky to HTML. Another interface that I wanted to reproduce was a custom input for note fields. It’s basically a hand-drawn top and bottom to user editable notes with a hand writing font. As you fill the notes, the area expands and the bottom moves with the expansion. It’s another cool UI tweak that my designer came up with that I want to honor in this version.

My first pass at it tried to use border images to fill the images as border-top and border-bottom on a textarea. I had one giant problem with that: CSS Border images are very unsupported. I couldn’t get them to work on Chrome, and they don’t appear to be accessible on a lot of browsers yet including the mobile browsers I am targeting.

My next pass was using a textarea. I got a little further along, but textareas are static. They don’t expand to fit the content. In fact, that’s sort of the opposite of their intent. They are supposed to stay static to accommodate large amounts of content. I’m sure I could do something with JavaScript to make that happen, but I hate doing that. No rational reason for that. I just feel that every time I use JavaScript to handle a display/style issue, I die a little on the inside. If I can do it in CSS, so be it.

My next attempt used the new HTML5 attribute “contenteditable.” Contenteditable basically says that the content in a given element is editable by the user. This means that I can just create a div that is user editable. The div has the added benefit of being able to dynamically resize itself when new content comes in. This is exactly what I am looking for.

It works perfectly until I actually go to use it in my mobile app. Surprise, surprise, contenteditable isn’t supported on Android yet.

So it’s back to textarea and JavaScript manipulation. (And a little piece of me dies.) There is a jQuery plugin that will make a text area expand with more content, but it seemed a little heavy since I’m not using jQuery in this application. The basic method is pretty straightforward:

  • Create a placeholder for a mirror of the textarea content
  • Create a function for onkeyup for the textarea that:
    • Sets the mirror content to be the content of the textarea
    • Grabs the height of the mirror
    • Sets the textarea height to that height

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

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

The basic solution is spelled out in this post on the textArea jQuery Plugin.

I went one step further and created a CSS transition that smooths out the height change of the textarea.

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

That’s a long road to getting it done, but it works. Here’s a working demo of it.

Circular Button with Photo Mask Using CSS

I’m currently working on porting Finicky over to HTML5 as a training exercise for building real applications (as opposed to more demoware) with HTML5 for mobile. It’s going fairly well, but there was one piece of UI that I was really worried about. It was a little complicated to render in ActionScript, and I feared it might be impossible in HTML. In fact it’s one of the few things I found much easier.

On the edit page there is a button for prompting you to take a picture of an item that you want to save. When you haven’t taken a picture, you see a little camera icon on the button. When you have already selected an image, you see a circular mask of the picture inside a circular frame created by the button. Look at the picture; it’s a lot easier to show than to explain. My designer really did a cool job there on that piece of UI, and I wanted to replicate it.

My first instinct should have been to look up “css mask” as it would probably be the easiest way if it was implemented. I didn’t. I instead went with using border radius to shape my button into a perfect circle and positioning it on top of the original button. In reviewing information on CSS Masking, I don’t think it would be the perfect solution. The images that I’ll be using in my final product are going to come from source images of different sizes. My method allows me to drop in any size/proportioned image into the background-image CSS property of my link and have it still work as a perfect circle. However, my research there makes me want to explore CSS masks more.

Anyway, back to the main point, how did I accomplish this?

First, I make an a link that I’ll use an a as the interactive part of the UI, as well as the holder for my picture. And I’ll wrap it in a div that will hold the button graphics.

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

I give the containing div a background-image containing the button graphic and I hard set the size to match the image size.

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

Once the container is done, I turn the a link into a circle by giving it a border radius of 50% of the height and width of the element. (I also used a background-color to see where I was putting it. )

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

Then I set the positioning to relative, to offset it within the containing div. I then fiddled with the top and left until the circle link was pretty equidistant from all sides of the containing div. It wasn’t just straight math because the drop shadow in the graphic made the blue circle of the button not completely in the center of the png file.

Finally I made a class with the picture I wanted to place in the background-image of the button.

Couple things to note here:

  • I hard coded the CSS for demonstration purposes, in my app, I’ll just add the background-image dynamically via the DOM.
  • This, like all awesome things, won’t work in versions of IE earlier than 9.
  • However, it has much more support than using masks, so I think it also wins on that account.

Here’s a demo with the full source.

CSS Tables and Responsive Design

It’s been more than a decade since the call to abolish table-based layouts was started. Many, if not most, designers and developers have come over to the CSS way of doing things (or at least doing it most of the time while occasionally resorting to a table layout when they couldn’t get the CSS to work.) Mixed in with the pragmatic use of tables is the occasional person pointing out the advantages of table-based layouts.

Tables do things when laying out that CSS designs with floats and padding and negative margins haven’t been able to duplicate with the same simplicity: dynamic grids, rows that are all the same height, and vertical centering. There are grid systems, and frameworks that have handled this problem for awhile but they have their warts. CSS-based tables are a good solution to this problem, and have a lot of other benefits. But even then I’ve heard angst about CSS-based solutions (frameworks or CSS tables) basically being the same amount of work and angst as a table for the same result.

Here’s a colleague (Greg Rewis) of mine complaining about the main angst of all of these solutions:

@garazi: Okay, CSS Grids, can we just go back to tables…?! I mean, really?! #nodiff

On the other hand objections to using tables are usually based on semantics, SEO, and accessibility:

  • tables are for tabular data
  • tables in layout are incredibly hard for screen readers to deal with
  • table markup adds a lot of cruft to markup

The problem with these issues is that for many people they just aren’t compelling enough. Correct semantics is a lofty goal, but it’s not a goal that clients care about. Accessibility takes a back seat because most of us never bother to fire up a screen reader. Cruft is usually seen as bad, there are other ways to improve page performance and SEO, so this argument sometimes helps but not enough.

Therefore, I’ve added a new reason not to use tables focusing on the current zeitgeist around responsive design:

Once you go table, you cannot go back.

Once you wrap your stuff in tables you cede a lot of control of the presentation to the browser. And most browsers don’t linearize info in a table well because by wrapping it in table markup, you’ve effectively said “don’t linearize this content”. So if you are going to display this info on a mobile device with a smaller width you get scrunched content that is hard to read. Either that, or the mobile browser keeps it wide, but allows you to horizontally scroll, which as you know is a fate worse than death.

Live Demo: Table Design

Your first attempt to deal with this is to handle this with floats and padding and whatnot. You set everything to float left, so when the screen contracts, things slip under each other. This works very well if you know or hard-set the dimensions of your content beforehand. Otherwise you end up with weird outcomes and odd configurations of your grid. Even if it does work well, typically you’ve needed to add extra structural markup to make it work. Adding the cruft that not doing tables was supposed to take away. And it’s all div’s so it gets hard to keep track of where you are.

Live Demo: Float Design

Ideally, you want something that acts like a table when you have a wide screen and acts like simple block divs when you are on a small screen. So you take some good semantic HTML, combine it with CSS tables and boom, you have a layout that acts like tables when you are wide, and acts linear when you are small. It also lacks the weird layout issues you get from floating.

Live Demo: CSS Table Design

There are issues with this approach as well. IE 7 and below doesn’t support it. So that is something to contend with. I choose not to. In browsers that don’t support this, it just looks like the linearized version, which I’m pretty cool with as it is suboptimal, not broken. I’ve also seen a weird issue with it not laying out things correctly when I resize the screen. (If you refresh after resizing, it draws it correctly.) Still tracking this down.

Further Reading

Table Layouts vs. Div Layouts: From Hell to Hell?
Everything You Know About CSS Is Wrong

I Just Contributed CFExecute to CFScript-Community-Components

A few weeks back, Adam Tuttle posted about his new project to get CFScript service CFCs created for all of the appropriate missing tags. It’s a great project, I tweeted about it. So did others. But I wanted to do more. So today I made a contribution. I added CFExecute support for CFScript.

It’s a pretty mundane thing to add, and it took me about an hour from start to finish. All I had to do was:

  • Fork the CFScript-Community-Components to my github account.
  • Clone it to my Mac
  • Write the code.
  • Push changes back to my repository.
  • Make a pull request for my changes to be added back to CFScript-Community-Components.

That might sound like a lot, but I did it entirely within one hour. It was a great learning experience as I had never forked and pull requested someone’s project before. That being said I couldn’t have done it without GitHub for Mac, which I highly recommend.

Links:

 

You Are Not Your Technology

Do you see you have a “friend” that sees themselves as an X developer?

  • I’m a JavaScript Developer…
  • I’m a Flash Developer…
  • I’m a PHP Developer…
  • I’m a ColdFusion Developer
  • I’m an iOS Developer…
  • I’m an Android Developer…

This statement usually indicates that this person will be very resistant to any sort of technical change you are driving that in any way competes with those technologies. Why? Because they have worked their technology into their identity.

When one makes a technology part of their identity instead of a tool they use, they see any competition, replacement, or massive alteration of it as an existential threat. Keep in mind, they see this as a threat to themselves, not just the technology. People get crazy irrational about existential threats. It’s not their fault. Fight or flight is built into us; carefully understand and weigh your options is not.

In the long run this is a bad thing.

  • Viewing change as a threat makes you fight it.
  • Viewing change as an obstacle makes you rise to overcome it.
  • Viewing change as a challenge makes you expand to face it with pride.
  • Viewing change as an opportunity makes you seek to capitalize on it.

The goal should be to move your reaction to further down this list.

Oh yeah, I know you don’t really have a “friend” with this problem.

What’s the Fix?

What do you do to fix working your technology into your identity?

Immediately start talking about yourself by what you do, not what you use:

  • I’m an Interactive Developer (thanks Lee Brimelow)…
  • I’m a Web Developer…
  • I’m a Mobile Developer…

Even if you don’t believe it, even if it is uncomfortable, even if you have to ditch business cards and domains, do it. Identity is about perception, both yours and others. You won’t believe it till it’s rote for you. Others won’t believe it until you do.

Start learning about the competing technology. Figure out why people chose it over your technology. Figure out what parts of its philosophy you can absorb to make you better in whatever technology you use.

Why bother?

There are a lot of excuses you can use to prevent yourself from fixing this:

  • This technology has a lot of life left in it.
  • This technology is dominant, and will be forever.
  • I’m too old to change.
  • I don’t have time to change.

Bullshit

We are on the cusp of yet another major shift in computing, the post PC era. The post PC era has more significance than I can wrap my mind around, but one thing is glaringly obvious: The device, the browser, the platform is being swapped out much faster than in the past.

User adoption is a major brake to technology advancement. The 3 to 5 year cycle in swapping out technology is dropping. What will happen to the rate of technology change when people are swapping out their major information device every 2 years? Well it has the potential to be at least twice as fast, if not faster. Technologies are going to rise and fall faster. Those who see technologies are tools to be swapped will fare better than those who think they are their technology.

Finally, your technology is not special or safe. 1 year ago BlackBerry was still the dominant smartphone manufacturer. 2 years ago WebOS still had a shot. 3 years ago there was no iPad. Will JavaScript be dominant 5 years from now? Maybe Dart will gain traction? Maybe browser makers will make the jQuery DOM API native to the browser? Maybe Apps will win? Maybe NodeJS usage will eclipse PHP? The point is nobody really knows what the future will look like exactly. But those who will have the best shot at facing the future and succeeding will be those who view it more as an opportunity and less as an existential threat.

Android Toast-like Alerts in HTML using CSS

One of the little things I like about Android is the “toast.” If you are not familiar with the toast, it is the little transparent notice you get that operations are done. The best example is the toast that tells you how long you will have to sleep before your alarm goes off. (Pictured here.)

I really like the concept. It usually short-circuits the whole item editing process.

Without toasts:

  1. Click save button.
  2. Get feedback that item has been saved.
  3. Manually go back to previous screen.

 

With toasts:

  1. Click save button & go back & get feedback.

 

I wanted to implement toasts in an HTML PhoneGap application. Now I know I could do this with just JavaScript, or with jQuery, but I really wanted to give CSS transitions a try. CSS transitions allow you to alter a CSS property over a set period of time. They work really well for this sort of case.

So the first thing I have to do is apply the transition.

You’ll notice a couple of things here. One the syntax for the transform is pretty simple:

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

[browser css keyword]: [property to animate] [duration] [easing method]

Once you do that, the rest is really simple. Basically, all you have to do is change the value for the property you have added a transform to, and the browser takes care of the rest. So to fade out my toast, I set the opacity to 0. That’s it.

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

See the demo.

Why do I like this:

  • I always prefer doing visual things in CSS.
  • This seems to me to be simpler than using JavaScript animations
  • CSS transitions will be hardware accelerated on environments that support doing so.

 

Now, I have to tell you there are caveats:

  • It doesn’t work in IE
  • I’m sure someone who knows more than I will put more in the comments

But it does work within the mobile browsers I tested on iOS and Android, which means I’m free to use this in my PhoneGap application.