CanvasConf Excitement!
  • by Jay

CanvasConf Excitement!

Cool and exciting stuff that was at Canvas Conf on 7th September!

On Friday 7th September I was lucky enough to go to the Canvas Conf in Birmingham where seven interesting people gave talks about all things web related. The day itself was spread from 9am which started with bacon to 5pm which ended with beer.

Although I now look back and realise how much of a 'brain overload' it all was I learnt a lot of useful and exciting stuff! The day was packed with so much wonderful and upcoming excitement it was difficult to come away afterwards remembering everything! Luckily enough all of the slides are online and I managed to take notes throughout the day. So below is a brief summary from some of the talks during the day.

Richard Caudle - Pusher

Richard works at Pusher to develop their API. Pusher is an API for building realtime web and mobile apps making use of websockets. The API is in place to help developers build quick realtime collaborative apps. This can be used for...

  • Chats
  • Activity Streams
  • Notifications
  • Collaboration
  • Multiplayer Games
  • Realtime Data Updates
  • Dashboards
  • 2nd Screen Experiences

An example used at the conference was a collaborative whiteboard. When one user adds a square to the canvas all users see the square appear on their canvas too. The ease of use and quick development times make pusher a great solution.

Richard's slides.

Peter Gasston - Freelancer - CSS of Tomorrow

One of the most exciting talks at Canvas Conf was Peter Gasston's, "CSS of Tomorrow". This talk included some great upcoming CSS, along with new relative units, selectors, media queries, image attributes, layouts and native filters. Some of which will take away the need for Javascript and heavy image files as it will all be possible using native CSS.

Relative Units

Some new width and height units are being added so that the user can define width and height percentages relative to the viewport width and height.

vw = Viewport Width vh = Viewport Height .box { width: 75vw; height: 30vh; }

The example above will set the .box class to a width of 75% and a height of 30% of the viewport regardless of what its parent div width and height is set to.

The same can be done using em values, replacing em with rem forces the attribute to ignore parent divs and size relative to the root.

Selectors

Along with new relative units are some new CSS selectors. The simplest being :any-link which can be used to style any link on the page ignoring if it has been visited or not, whilst :local-link can be used to style links that are local links and not external.

An exciting selector is :hover /for/ input {} which can be used to change the style of an element based on the hover of an entirely different one. For example...

#box:hover /for/ #tooltip { visibility:visible; }

This will show the #tooltip element when the #box element hover state is active. Very cool!

The most useful selector for me which was shown is the position: sticky; selector which is similar to the position: fixed; selector but will allow the element to scroll before it is fixed to a position. For example the navigation menu could start 100px from the top. When the user scrolls the navigation will stick to top: 0px (top of the page). This will remove the need to do this with Javascript.

CSS can also now work backwards too. You can style stuff based on elements that are not a specific class...

li:not .red { color: green; }

This will style all li elements that do not have the .red class!

Media Queries

Some new media queies also made an appearance at the talk. These included...

@media (script:0) {} - if javascript is not enabled @media (hover:0) {} - if hover feature is not available @media (pointer:0) {} - if a precise pointing device is available.

Each of these can be changed to a 1 to switch the query to a "if it is available" query.

Another impressive feature shown is the ability to detect if certain features are available within CSS. Like a mini modernizer inside the browser. Depending on the support you can then apply a different style.

@supports (columns) {}

This will check that the current user can support columns on the screen if so apply a specific style. Or...

@supports (transform) {}

will check that the browser can support transforms and apply style and transforms based on the result.

Images / Filters

There are also a lot of changes to what can be applied to images within CSS too!

Background images can have fallbacks, if one image fails to load or cannot be loaded on the specific device. Fallback can either be a lower resolution image or a static colour. Another interesting background addition is the ability to take a 'screenshot' of an element and apply it to the background of different element.

#divA { background: element(#divB); }

This will take a screen shot of divB and apply it to the background of divA. This will come in useful for things like heroes & carousels. You don't want to show the actual content of divB just show a little preview in a smaller div (divA) to the right of the screen.

Conic Gradients will also be added. Along with native filters in CSS such as greyscales:

filter:greyscale(1);

Tags!

The ability to mask an image will also be available in a later version of CSS.

One last feature which I am looking forward to is an addition to the overflow styling. A new feature being added is overflow:pages; this will allow the user to create a div which automatically paginates if the content inside is too big. So you could load multiple articles into the div along the x or y axis then have the browser and CSS handle pagination automatically. Cool!

Peter's slides.

/* $RESET...................... Undo Defaults $MEDIA...................... The Media Object $MAIN....................... HTML/BODY and wrappers $NAV........................ Page's Navigation Bar $FOOTER..................... Disclaimer, links and footer icons etc */ ... /* $NAV */ .site-nav {}

The reason for the $ is to make it easy to search, putting $NAV before all of the sites navigation allows other developers to open the file and simply search for $NAV, knowing that this is where the sites main navigation is kept. Genius!

Using tags in the CSS stylesheet can also be beneficial to other developers. Allowing them to search for tags like ^navigation or ^hero can speed up finding specific styles for an element.

Again the use of ^ is to specify that it's a tag.

/* ^navigation ^lists ^links */ .nav {}

Now any developer can open up the CSS and instantly search for ^links to find all tags in the CSS which refer to any links on the HTML page. Perfect!

In some instances where the CSS may be difficult to locate it might be worth pasting a commented HTML snippet from the page itself. This way the new developer can easily see which bit of HTML the following CSS refers to! Such as the snippet below...

/* <ul class="nav"> <li><a href="/">Home </a> </ul> */ .nav {} .nav li {} .nav .li a {}

Harry Roberts - CSS Wizardry - Big CSS

Harry Roberts works on the SkyBet website and had some interesting tips on how to handle large CSS documents and ensure that the CSS is kept minimal and user-friendly.

The most interesting point Harry made was to never style IDs - only ever style classes. The idea behind this approach is that if you use IDs you actually end up writing lots of CSS to undo what you have already applied to IDs. Using classes is much neater and produces much easier and cleaner CSS. The skybet site doesn't use any IDs for styling, it's all classes.

Another tip was to try to keep your CSS so that you never have to undo any styles already applied - only add. For example, you may use margin-left: 20px; on a class. If you then have to use margin-left: -20px; later on this is a waste of resource and can be done more efficiently. Along with this it was advised to avoid unnecessary nesting!

The easiest way to make CSS maintainable is to avoid writing it.

Harry Roberts, CSS Wizardry

Comments

Harry finished off by giving some great tips on how to comment and document your CSS stylesheets. I believe this method is best and would suit any team where there maybe more than one developer using a CSS stylesheet!

First of all it's important to include a contents section at the start of the CSS. One example he used is below...

Andy Davies - Speed is Essential

Andy focuses on web performance and how to increase website performance. The human perception of time is interesting when it comes to loading times. If a page loads within 100ms the user sees this as instant, even 1 second is considered seamless in terms of load times. 3 seconds is classed as smooth and is the recommended target time to get pages to load in. Fortune 500 websites take a little longer at an average of around 6-7 seconds. (Wouldn't we all like to see Facebook load in 100ms!) Anything over 10 seconds and the user starts yawning and getting bored. Potentially leaving the website considering it broken!

An experiment revealed that using a slow website takes 50% more concentration and effort than using a faster loading website! Bing also carried out experiments to show how important load times are on e-commerce sites. By manually slowing down their websites load times by 1 second revealed that they lost revenue and visits by 2.8%! When Walmart improved their load times by 1 second this increased conversion by 2%. Even better Shopzilla cut page load times by 5 seconds and saw a lovely 12% increase in revenue!

Shopzilla improve conversion
Shopzilla improve conversion

80% of the load time is down to the front-end. An important point is to ensure that you only call javascript that you need for the page load at the top! Loading the CSS before JS too! If you can get as much JS after the body on an onload function. This way javascript that isn't needed for load doesn't affect the page loading times! As Andy quoted, "You can't Facebook like a page until the page has loaded!" So don't increase load times by loading in the Facebook Like button when the user can't even click it yet! Push the button onto the page after the important content has loaded!

Some other smaller tips can be used such as...

  • Use JPGs for photos, PNGs for icon sprites and GIFs for animated loaders.
  • Don't use images for gradients and rounded corners! Use CSS!
  • You could even make a custom font for icons instead of using image sprites. These are scalable and can be coloured easily!
  • With things like carousels. Only load the next slide in advanced. Not all the slides in one go on load (the slides are hidden anyway!).
  • Set cache dates to things that never change to 'forever'!

Andy's slides.

Summary

The day was a fun and enjoyable experience and I would recommend anyone to go next years CanvasConf! We all got to meet and talk with some great people and came home with some great tips and new ideas! Along with some excitement for future features!

Please note that everything I have written in this article is based on mostly my memory, quick notes and the way I interpreted it. All credit goes to the talkers on the day for any examples and content I have used. But also note that some of this stuff is still in concept and won't work yet in production, stuff may never happen or be different in final versions of CSS.

If you're interested in all this sort of stuff please do go and follow the speakers...

Jay Smith
This blog's author

Jay is a developer. He likes soldering, tinkering, and Toyota GT86s.