Olivier Wietrich

[bredele-blog]

Better widgets with Shadow DOM and CSS scoped

One fundamental problem you may encounter when you create widgets built out of HTML and JavaScript is that the DOM tree inside your widget isn't isolated from the rest of the page (aka encapsulation). It means that the document stylesheet can override your widget stylesheet (and back and forth). Same thing for the IDs or the JavaScript that can modify your application behaviour.

A solution exists to isolate parts of your application from others : Iframes. Currently I'm working on a requirejs plugin to sandbox your application with iframes (and privileges separation) and a framework using this solution. I'll probably write a post about that :)

But there is better and something I'm really excited about : Shadow DOM and CSS scoped. Both address the lack of encapsulation I explained.

What is Shadow DOM?

W3C says:

The shadow DOM allows multiple DOM trees (in addition to the document tree) to be composed into one larger tree when rendered...

To sum up, you can create shadow roots. A shadow roots associated to an element is called shadow host which can contains child nodes. Those child nodes aren't exposed in the traditional DOM tree and can't be modified!

With shadow host you can easily separate the content from the presentation and some other stuff. I invite you to read this tutorial.

What is CSS scoped?

WHATWG says:

The scoped attribute is a boolean attribute. If set, it indicates that the styles are intended just for the subtree rooted at the style element's parent element, as opposed to the whole Document.

It allows developers to apply styles to only the host element and descendant elements (it overrides the document stylesheet but not inline styles). Here's some useful links: 

Scoped css : http://davidwalsh.name/scoped-css

Saving the day with scoped css : http://css-tricks.com/saving-the-day-with-scoped-css/

The scoped attribute : http://html5doctor.com/the-scoped-attribute/

I will update my css-bundle github repo with an example of scoped css.

[bredele-blog]

CSS hardware acceleration and Translate3d

Refer to my previous post I updated my github repo (bredele css-bundle) with an example of facebook-like navigation using the CSS translate3d property.

Here's a screenshot of what it looks like.

The translate3d property is a sure way to use the GPU for your CSS animations. 

Here's an other article about performance of your HTML5 apps.

[bredele-blog]

HTML5 , Dom and CSS3 High performance

I rely heavily on the latest web API (HTML5, CSS3, JavaScript, etc) to build cool interactive and quick-responding web applications. Even if most of the time performance is not the main concern...

...it's still good to be aware of techniques and strategies to help you avoid performance bottlenecks (especially when you are doing mobile development). Here's a video of Paul irish who walks through techniques to improve your apps. 

    He describes in this video CSS reflows, hardware accelerated CSS, animation optimization, web workers, requestAnimationFrame, benchmarking and build scripts.

You should also take a look at this book High Performance JavaScript by Niicholas C. Zakas if you want to know more about DOM interaction, page life cycle, etc. 

[bredele-blog]

Sticky footer with no clearfix

Here's a cross-browser solution (works since IE8) based on display:table. No extra markup, no clearfix, a flexible content height and just a couple of lines.

html, body { margin: 0; padding: 0; height: 100%; } .wrapper { display : table; height: 100%; width:100%; behavior: url(display-table.min.htc); } header, footer{ display : table-row; height: 100px; } .content { display : table-row; }

This css use the behavior attribute to load a polyfill library intended to emulate CSS properties of display: table* family in Internet Explorer 6 and 7.

You will find examples in my css-bundle github repo.

[bredele-blog]

Vertical and Horizontal centering

That's my first post about CSS and probably not the last one. A clean code respects the separation of concerns, i.e let the CSS do it's job and not try to do something in JavaScript that can be done with CSS. To sum up, a good JavaScript developer is also a good CSS developer.

That being said, this post is about how to center an element horizontally and vertically in your window body...something I'm sure most of you have already tried.

Here the snippet code I use:

html { display: table; table-layout: fixed; width: 100%; height: 100%; } body { display: table-cell; width: 100%; height: 100%; vertical-align: middle; margin:0; } /* the element to center */ .vertical { margin: auto; }

No relative or absolute positioning (with the famous top 25%), no table markups...so what do you think? :)

Here's an other version but this time with a flexible box layout:

html, body { height:100%; } body{ display:-webkit-flex; display:flex; -webkit-align-items: center; align-items: center; } .vertical { margin:0 auto; }

  You will find examples in my css-bundle github repo.

[bredele-blog]

Level up on the Javascript console

Level up on the Javascript console in the Chrome DevTools. Our friend Paul Irish from the Chrome team gives you a rundown. 

[bredele-blog]

Canadian's journey

Today I started a new life! I formally resigned from Alcatel-Lucent Enterprise in order to tempt my chances in Canada! Some would say it's risky, but I consider it time to move on. Canada is a country I fell in love with! My girlfriend is from Southern Alberta, and so Calgary is my destination.

This is the reason I'm starting a new blog. It's my goal to share my Canadian adventure with you, without forgetting to blog about HTML5, JavaScript etc! Will my profile please? It's still a mystery but I hope that will be the case! That being said, I'd like to thank my former team, with whom the atmosphere was really great (I will miss you guys!). Hopefully the next will be just as good :)