August 2011 Entries

CSS Tricks and the Alternate Universe of Graphics Primitives

Someone asked about the circular div I used for magnification in an earlier post. There are no primitives in CSS for building arbitrary shapes, but like most things on the web, that doesn't stop anyone from trying. For example: don't think of a circular div as a circle. Think of a circular div as a square with heavily rounded corners. Given this markup: <div class="circle-small"> <p>Hello!</p> </div> And this CSS: .circle-small { width:100px; height:100px; border-radius: 50px; background-color: #cccc99; } .circle-small p { text-align:center; ...

posted @ Thursday, August 25, 2011 9:12 AM | Feedback (3)

The Three Phases of OOP Matter

Gas public static class Logger { public static void Log(string message, LogTypeEnum type) { // ... } } Liquid public class Logger { public void LogError(Exception ex) { // ... } } Solid public class Logger : ILog, IAudit { public Logger(IExceptionFormatter exceptionFormatter, IStackTraceFormatter stackTraceFormatter, ...

posted @ Wednesday, August 24, 2011 9:12 AM | Feedback (10)

A Magnifying Lens using Script and CSS

Magno is a something I put together because … well, just because. The idea is to provide a magnifying lens effect using a background image and background position animation. The lens tracks the position of the mouse, with a slight delay (debouncing, to be exact). You can try it here: http://jsbin.com/adobuv (thanks to @austegard for putting up the jsbin). The "magnifier" is an absolutely positioned div with borders curved to perfection. function makeMagnifier() { var src = settings.src || img.attr("src"); magnifier = makeEmptyDiv(); magnifier.css({ ...

posted @ Tuesday, August 23, 2011 9:12 AM | Feedback (1)

A Simple 2-Column Layout in Razor

2 column layouts are rather popular on the web, and there are 1,001 ways to make them work. The approach you choose really depends on the type of content you have, and how you want images and backgrounds to work. What I'll show is the Razor _Layout and CSS to achieve the following look: The Razor _Layout file can rely on partial views to handle each of the primary sections: top, navigation, sidebar, and footer. RenderBody will produce the primary content area. <!DOCTYPE html> <html> <head> <title>@ViewBag.Title</title> ...

posted @ Monday, August 22, 2011 9:12 AM | Feedback (0)

A Tale of Backgrounds, Absolutes, mouseleave, and mouseenter

mouseleave is simple to understand: Bind an event handler to be fired when the mouse leaves an element, or trigger that handler on an element. How hard could it be? http://jsfiddle.net/JP6aV/ $(function () { var output = $("#output"); $("#content") .mouseenter(function (e) { output.text("I'm in!"); }).mouseout(function (e) { output.text("I'm out!"); }); }); Like many simple things there are some traps under...

posted @ Thursday, August 18, 2011 9:12 AM | Feedback (5)

Underscore.js

Liam told me about Underscore.js some time ago. From the home page: Underscore is a utility-belt library for JavaScript that provides a lot of the functional programming support that you would expect in Prototype.js (or Ruby), but without extending any of the built-in JavaScript objects. It's the tie to go along with jQuery's tux. The functional programming support from Underscore includes, but is not limited to, the standard map, filter, reduce functionality. var data = [1, 2, 3, 4, 5, 6, 7, 8, 9]; var result = _.filter(data, function...

posted @ Wednesday, August 17, 2011 9:12 AM | Feedback (3)

Clojure and the CLR

From the Clojure home page: Clojure is a dialect of Lisp, and shares with Lisp the code-as-data philosophy and a powerful macro system. Clojure is predominantly a functional programming language, and features a rich set of immutable, persistent data structures. When mutable state is needed, Clojure offers a software transactional memory system and reactive Agent system that ensure clean, correct, multithreaded designs. I’ve had an interest in Clojure ever since I saw Craig Andera do a talk on the topic in D.C. (Craig also has a set of Clojure videos @ Pluralsight). It was...

posted @ Tuesday, August 16, 2011 9:12 AM | Feedback (6)

What's Wrong With This Code? (#28)

Victor Brumble is writing code again, and this time he's writing a jQuery plugin. His plugin makes alert boxes easy, because Victor loves pointless, modal dialogs. (function ($) { var settings = { text: 'Thank you for clicking!' }; $.fn.alerter = function (options) { return this.each(function () { if (options) { ...

posted @ Monday, August 15, 2011 9:12 AM | Feedback (11)

Disabling jQuery UI Widgets

It's easy to make a DOM element draggable and droppable with jQuery, but it's not as obvious how to make it stop. It turns out every widget includes a set of standard methods, and one of the standard methods is disable. The only trick you'll learn once you read the documentation is how you invoke the method by passing the method name as a string to the widget's constructor function. As an example, consider a div you want to be draggable until something happens, like a button click. <div id="draggable">Drag me around</div> <input type="button" id="stop" value="Stop!" /> <script...

posted @ Thursday, August 11, 2011 9:12 AM | Feedback (0)

Use a ReSharper Template for Script Files

Using Alt+Ins in the Solution Explorer window is one of those ReSharper shortcuts that probably saves me hours over the course of a year (Alt+Ins is the "Create File From Template" command). There is no template out of the box for JavaScript files, but it is easy to add one (or more). 1. Go to ReSharper menu in Visual Studio and select "Live Templates...". 2. In the Templates Explorer dialog, go to the File Templates tab. 3. Right click the User Templates node and select New Template. 4. In the template that...

posted @ Wednesday, August 10, 2011 9:11 AM | Feedback (0)