Fixed Canvas Backgrounds

I’ve talked a bit about separating our semantic and non-semantic content within websites. We can take our rich non-semantic content and throw it onto a canvas. This provides a number of benefits, cleaning up our markup, reducing DOM elements and optimizes performance. I’ve put together some examples of how this can be used in both Fixed Canvas Backgrounds

Tiny Javascript Libraries

I used to do a lot of flash banner ads. Banner ads have tight requirements around file size so as not to bloat the hosting page’s download. With banner ads migrating to HTML this is even more of an issue with often lack of compression. Jack Doyle of Greensock wrote a great article talking about Tiny Javascript Libraries

SVG Calendar

Happy New Year! I like to make a calendar for our family each year and doing the layout in illustrator can be rather tedious. So last year I decided to write some code to do it in SVG utilizing Snap.svg. I added a vector illustration noting some of the vacations we had planned for the SVG Calendar

Animate SVG with the Flash Timeline

Here’s an introduction video to Snap.SVG Animator, allowing you to publish animated SVG from the Flash Animation tool. Scalable Vector Graphics (SVG) is a powerful tool in the web developer’s arsenal. But web creators have been rather limited by how they can create and manipulate this content. Vector tools like Adobe Illustrator have been able Animate SVG with the Flash Timeline

Digital Reading Experiences

I was fortunate to have the opportunity to speak at W3Conf in San Francisco this year. My talk was about reading experiences on the web, ways we can improve them and where we see this going in the future. In the talk I show off how we can use Regions for visually stunning magazine layout Digital Reading Experiences

CSS Blend Modes

Blend Modes is one of the new specifications coming to CSS, you can test this in certain recent builds of webkit with: -webkit-blend-mode Values include traditional blend modes like multiply, screen, overlay, and more. This brings natively to the web effects that could previously only be done in flash or with pre-rendered images from photoshop. CSS Blend Modes

three.js custom shader material

This post is going to assume you have used three.js to set up a basic scene with a camera and objects. The shaders can go in a script tag within the page and then can be referenced using the id of the script elements. Vertex Shader: [code lang=”glsl”] varying vec2 vUv; uniform float delta; uniform three.js custom shader material