Entries in css3 (2)


CSS: a programmable language?

Yesterday I attended the London Web meetup organised by Nathan O'Hanlon. The evening before a long bank holiday weekend and with a number of other web related things happening in town there was a good turn out to hear Peter Gasston talk, The CSS3 Of Tomorrow.

Peter began his talk comparing most CSS3 presentations to the story of Superman as portrayed in many comics – they all start off with the origin, where CSS came from, the basic features, some of the "new" stuff that has really been around for years. The stuff you already know. Peter promised his talk would be different and in All Star Superman comic style it'd fly past the things we already know about (stuff even I'm familiar with) and then dive into the truly new stuff.

True to his word Peter flew through the syntax of border-radius, box and text shadow, backgrounds and borders, selectors, opacity, web fonts and media queries. In this section there were a few nuggets of information that I took away – in particular hearing about using hsla (hue, saturation, lightness, alpha/opacity) to provide a greater level of flexibility in defining colours.

p { color: hsla(240, 100%, 50%, 0.5) } /* semi-transparent solid blue */
p { color: hsla(30, 100%, 50%, 0.1) } /* very transparent solid orange */

Also mentioned was the ability to target web pages being viewed on iOS4 and utilising the higher resolution display. Using the media query (webkit-pixel-ratio:2) you're able to call a separate set of CSS rules which contain higher resolution images specifically for that device.

Next Peter moved onto some of the newer things such as linear and radial gradients making reference to Lea Verou's CSS3 patterns. Before covering transitions, transformations (2D and 3D) as well as animations. Some great examples where shown, many have been doing the rounds on the internet but in case you've missed them take a look at:

So far the talk was pretty good. It had clarified a few things I'd been uncertain of, introduced some new concepts and provided some great reference material to take away.

Before going into the final section of the upcoming CSS3 features Peter gave a short intermission where he described some of the practises he uses when writing CSS. There were some useful tips around performance such as listing your mobile specific CSS first and using media queries to ensure that the heavier stuff isn't loaded when it's not being used. Peter also spoke highly of Modernizr to help detect browser support for CSS features.

To close the talk Peter described some of the new features coming into the CSS3 specification as well as some which are in the very early stages of being worked on right now. There was a strong focus on layout with things like being able to define multiple columns, flexible box layouts, grid positioning and template layouts. Something being lead on by Adobe is CSS Regions. This if successful will allow you to have flows of content around a page, these flows could be in simple column layouts or extremely complicated shape layouts. There are some examples of what can be done here.

Finally Peter talked about the ability to declare variables and mixins in CSS. The simple example that Peter gave was being able to declare a colour at the start of the CSS which could then be referenced throughout making it easy to change the colour in a single place without having to trawl through all the CSS:

@var $myColor #f00;
h1 {color: $myColor;}

The introduction of things like variables, mixins, animations and transformations raised the question, is CSS becoming a programmable language? The answered seemed to be yes and this left another question, where do you draw the line between what should be done in CSS and when should you use JavaScript?


London Web Standards – Fun & Games

This evening I went along to the London Web Standards meet up – a monthly event focusing on well, web standard type stuff.

These are my notes from the evening which I've tidied up a little bit but quite probably contain some inaccuracies that I'll try and iron out later!

David Powers – Adobe Dreamweaver

The first of the three speakers was David Powers who took the 5 minute 'micro-slot' to enthuse about the merits of the recently announced Dreamweaver CS 5.5.  At the outset David stated that "those people who say they don't like Dreamweaver have either not used it for a while or they're using it incorrectly" – I've not used Dreamweaver partly through never having had the need (a caveat to any inaccuracies in this post is that I'm not a developer) and partly due to fear of what the likes of Paul Downey might say if I were to use it!

In his talk David stated that Dreamweaver has made great advancements in becoming more compliant with web standards, although it was not 100% of the way there.  The latest version would allow you to work fully in code view and had support for CSS3 functionality such as font-face and drop shadows.  Within the code view there's an option to switch to a dialogue box of sliders allowing you to change values with great ease whilst simultaneously viewing the effects of those changes on a live page.  This combined with the code-hint functionality (which auto-suggested IDs and Classes from the project along with CSS Selectors) looked pretty cool, although from my limited experience I'm not sure what value it gave over say a browser plugin such as Firebug?

I'm not sure that Dreamweaver is for me but I can certainly see there's an audience for it.  David's closing remark was "if you've not used Dreamweaver for a while I reckon it's worth a quick look, you may be surprised".

Rob Hawkes – HTML5 Multiplayer Gaming

Next up was Rob Hawkes who announced as of next month will be joining the team at Mozilla.  Rob gave the talk "Multiplayer Gaming with HTML5 & JavaScript" and asked the question "are we ready?" 

Rob covered some of the technologies available for HTML5 multiplayer gaming, talked about some of the current issues and identified potential solutions.  I have to admit that a lot of what Rob covered went over my head but I certainly felt excited about the future possibilities and in particular the open-web nature was of great appeal.

In term of the technologies Rob spoke of three main elements:

  1. Canvas – a part of HTML5 allowing for dynamic, scriptable rendering of shapes and images
  2. WebSockets – facilitates a real time two-way stream of data between the client and the server
  3. node.js – server side JavaScript to process and stream information

It is through identifying these technologies that some of the issues become apparent.  For example;

  • WebSockets has recently been pulled from the latest Firefox build and is only supported by webkit browsers.
  • slow internet connections cause latency issues which render multiplayer gaming impossible
  • even the simplest of games can quickly evolve to having a huge amount of data communicated between the server and client which quickly causes issues with rate limiting
  • being based on open web technologies this does leave your game vulnerable to hacking/cheating

Thankfully Rob was able to offer some advise as to potential solutions to some of these problems;

  • the use of Socket.IO provides a useful fallback to Flash or Comet whenever WebSockets is not available.  This may not be ideal but will help get you out of some tricky situations
  • look at where you can compress your data.  As WebSockets only sends data as text you can afford to cut strings down through removing things like fullstops and replacing certain characters.
  • when it comes to people trying to cheat or manipulate your game you should view this as a positive thing! Think of it as free testing and use it as an opportunity to identify loopholes in your game.
  • If you are concerned about people manipulating your game moving the logic to the server side will help (providing of course that your server is secure).  In doing this you should also apply "server authority" rules, i.e. whatever the server says is right and whatever the client says cannot be trusted.

Rob summarised by going back to his initial question - are we ready?  The answer – sort of.  The technology and know how are both there but there is also so much that can be improved upon.

Seb Lee-Delisle – Creating JavaScript Visual Effects

Image from: Seb Lee-DelisleSeb is someone whom I'd not heard talk before and having managed to miss him at SXSW this year I was delighted in seeing him at the meetup this evening.

His talk was really a teaser for what you'd get from attending his two day workshop "Creative JavaScript" – and based on this evening its a course I'd love to attend.

Although best known as a Flash guy, Seb's passion is around creating things of a visual and interactive nature regardless of the technology.  This evening through a combination of some previously built demonstrators and some live coding Seb demo'd some of the advanced particle effects you can do with canvas.

We moved at quite a pace and the focus was more on showing rather than telling so I'll simply point to some of the demo's available online:

  1. An array of particles
  2. Image particles – move the mouse around and click to make pretty things happen
  3. Smoke effect
  4. Smoke effect with rotating images
  5. Particle forces – click to add more circles
  6. 3D particle forces

Incase you're interested in taking a close look Seb has the source code for these demos are up on Github.

Seb's final message were some very wise words: "warning: with great pixel power comes great responsibility, just because you can do it with JavaScript doesn't mean you should".