We're growing into something new. Read More
imakewebthings

Caleb Troughton


Discussion

jQuery Waypoints 2.0

It's been a couple years since I wrote [a Forrst post](http://forrst.com/posts/jQuery_Waypoints-gg1) announcing the release of Waypoints 1.0. I'm happy to be able to say that 2.0 has now hit, and I'd love everyone's suggestions, feedback, or scathing criticisms. Here are the big changes to the library: - Support for horizontal scrolling waypoints. - Can create multiple waypoints on the same HTMLElement. - Whole thing rewritten in CoffeeScript. - A bunch of new methods. - "Shortcut" methods for implementing sticky elements and infinite scrolling. - Brand new project page. - No more jQuery event backing (no more `event` parameter in the callbacks). Thanks in advance for taking a look.

Discussion

z-index on pseudo-elements of CSS transformed elements

I have a situation that looks like a bug in current browser implementations. Except this happens in all the different browsers that support CSS Transformations (I haven't tested IE9 though.) Here's the rundown. If you want to skip reading it, I've boiled it down to a simple test case. Take a look. A relative position div has an :after pseudo-element that is absolutely positioned and z-index:-1 so that the pseudo is rendered behind the div. Works as expected. If you apply any CSS Transform to the div, the pseudo appears in front of the div. Even a transform that visually does nothing as is the case in the link above, translate(0,0). My question is: Is there anything I've missed in the spec draft that would indicate that this is correct behaviour, or is it actually a bug in 3 (maybe 4) different rendering engines? New question below! Edit: Ok, so I found the answer to my first question. CSS Transforms create a new stacking context, the same way that setting a z-index creates a new stacking context. And yea, it's right there in the spec. You'll get the same results on the top div by setting an explicit z-index without any transform at all. So my new question becomes: Is there a way to get this pseudo-element to render behind the div even though the div is the root of a stacking context.

Discussion

deck.js

Hey there campers. I've just released a library for making HTML presentations and I'd love to get your feedback. You can go to the link and look around to get the scoop, but here's the basic nerdy breakdown: Modules The core module for deck.js does as little as possible. It keeps track of the slides, where the user is at, applies a bunch of classes, exposes a bunch of methods for interacting with the deck, and fires some events. Other pieces of a given deck are handled by modules that use the core API and events to do what they do. Transitions are Transitions CSS Transitions. Any movement between slides is a CSS transition. If the browser doesn't support transitions, slides just cut between each other. But honestly, who's giving a presentation, wants to do it in HTML, and uses IE? Themes & the Standard Template So not everyone is going to know CSS3 and JavaScript or want to use the API to build some crazy slide deck. The package comes with a standard template for doing your run-of-the-mill slideshow, along with style themes and transition themes. Style themes determine how an individual slide looks, while transition themes define how to transition between slides. That's about it folks. More can be read on the page. Again, any feedback, concerns, critiques, etc. would be most appreciated.

Discussion

Flipping in NOT Flex

Not to be a hater on @sabeau's post (and his code here), but here's a Webkit CSS3 version of card flipping. Ya know, for if you ever want your code to work on iOS devices. ;)

Discussion

Stanford's Free Online Databases Course

Stanford University, which has been releasing limited free course material for some years now, is offering a full blown online class on Introduction to Databases this fall, no charge and open to anyone. If you've been meaning to learn this stuff, now's a great time. They're also doing classes on Introduction to AI and Machine Learning for anyone interested in those subjects.

Texture/Lighting/Extras Iteration

Third and final iteration on this grayscale design and the colored followup. Just a couple shadows and a background texture.

Color Splash Iteration

This is a continuation of my last post. I've taken the grayscale design and added a touch of color. A rather small touch, mostly to indicate high level active states within the page and navigation, as well as in the syntax highlighting. The next iteration will add any textures, lighting, depth, or any other progressive CSS enhancements that might be helpful.

Grayscale Iterative Design

Trying something new for the first time. (New for me, not a new concept.) I'm not allowing myself to add color or texture until I've figured out the rest of the layout. The browser cap above is the result at the moment. Making yourself design everything in grayscale forces you to focus on using typography (particularly font weights), padding, and grayscale contrast to create a visual hierarchy. Now that I'm done with this stage I'll add color to further create contrast and promote a visual hierarchy. Critique encouraged and welcome.