I wanted to share a CSS and webcomponent layout that I’ve been pretty happy with in a few projects. With webcomponents now widely supported, I was able to remove one of the last bit of inline scripts I had left in docket converting it to a webcomponent. The layout offers a layout with a 250px sidebar and content area.

If you’ve ever built a web application that wanted access to the visitor’s camera you know what a painful experience that can be. If used to involve flash or silverlight plugins or clunky java. Thankfully, browsers have started providing new API’s which are collectively referred to as WebRTC or Web Real Time Chat.

Myself and the rest of the CakePHP team recently embarked on a journey to refresh and redesign the CakePHP website and brand. I wanted to delve into my process and thinking around the changes.

The cakephp.org website has been around for quite sometime. Its previous incarnation served the project amazingly well.

One of the new features in CakePHP 2.1 I am excited about are view blocks and view inheritance. Both are concepts borrowed from Jinja2 and other templating systems. Template inheritance allows you to create skeleton views, and define blocks to populate that skeleton in a child template.

I’ve been working all day everyday with Monaco for the last 6 years. Monaco is a great typeface, it has a number of really great properties. It has a large x-height, and a large m-width. This make it great typeface at small sizes. While monaco is a perfectly good typeface, I wanted experiment and see if there is another typeface that would be even better.

While working on tweaking a notification box design, I wanted to include the element’s heading in a folded ribbon element. I also wanted to avoid using any images and just use CSS. Mostly to try my hand at using generated content and some CSS that I don’t normally get to use.

Its been a few weeks of working in the evenings but its pretty much done. I’ve been wanting to do this redesign for a while now. 2 years ago when I built the version of this domain you’ve all come to know, I attempted to create a design that was different from other programming blogs, and fused my interests in both design and programming. I feel it turned out well.

You may have seen the Analog.coop site recently and found some of the easter eggs, like the grid hot keys. I loved the concept, and made a mental note to spend some time reverse engineering/rebuilding it for my own uses. Well it just so happens that the guys at Analog have released the #grid on Github, which is great because it made it easier for me to adapt the code and do some small improvements.

Creating meaningful semantic HTML identifiers is something I always aim to do in my markup. I also thought this was something that other designers did as well. This past week I’ve found out just how wrong I was in that assumption.

I like many webdevelopers build a lot of forms. Forms are the bread and butter of web applications, and while making forms is getting easier for developers, users often still have a hard time with them. In these circumstances it is necessary to give them a help above and beyond ‘password’.

Creating gracefully degrading Javascript and CSS is pretty simple these days. I’m sure this has been written about a million times over as well. However, I thought it would be worthwhile to share how I do it as well. Mainly, because in addition to AJAX and effects I use Javascript as a way of enabling different CSS selectors for elements.

All versions of Internet Explorer from 5.5 forward support CSS expressions. If you are not familiar with CSS expressions in IE, they are a powerful and non-standard way commonly used to plug the gaping and vast holes in IE’s CSS support.

I’ve been a bit out of the loop due to the awesome weather we’ve been having in toronto as of late. I’ve just read through Jonathan Snook’s article about CSS resets and how he doesn’t use them and while I can totally understand his position and how he is okay with browser variances and typographic quirks.

Well Merry Christmas and Happy New Year to everyone. I’ve been busy as always and have put up a new character painting in the Digital Section. This is the first painting that I’ve done in Photoshop that is approaching the quality and feel of my oil work. As time is always at a premium these days, I will probably be doing a few more digital paintings. They are easier and less fussy to work on than oils.

Well its almost done. As you can see, the main interface is done and the content has been reformatted and appended to. Futhermore, there are more images to look at. An entirely new section makes it debut as well. The clothing section has my t-shirt designs and will expand over time to other apparel. The shop section is still under construction, but should be done soon.