Tag Archives: Sean DeButts

Celebrating the non-legacy of “Fight Club”

fight-club-2-social-thumbnail

fight-club-2In August 2001, the world seemed to be settling down to be a pleasant, boring place. America had won the Cold War, and Russia was a democracy. The economy was fundamentally sound, and most Westerners were not questioning civilization’s survival. Only in such a pre-9/11 bubble could one treat the movie “Fight Club” (1999) as more than entertainment. Now that “Fight Club 2” is pending rollout as a comic-book series starting May 28, Americans should be thankful the franchise’s impact upon society is minimal.

“Fight Club” was “The Catcher in the Rye” for Generation X: The story of a well-to-do, alienated young man rebelling against a phony existence. Taking cues from “A Clockwork Orange”, the anonymous protagonist, a 30-year-old desk jockey, sought distraction through increasingly extreme violence and gang activity. Complaining he was addicted to effeminate consumerism and the “IKEA nesting instinct,” he established illegal, bare-knuckle “fight clubs” to reclaim masculinity, and then recruited converts into “Project Mayhem,” a covert, nationwide campaign to destroy corporate capitalism.

To its credit, “Fight Club” was visually impressive, and director David Fincher (“The Social Network”, “Se7en”) improved upon Chuck Palahniuk’s 1996 novel. Fight scenes were realistic, and the movie had a few stunning monologues, the greatest of which was delivered by Brad Pitt:

We’re the middle children of history, man. No purpose or place. We have no Great War. No Great Depression. Our Great War is a spiritual war. Our Great Depression is our lives. We’ve all been raised on television to believe that one day we’d all be millionaires, and movie gods and rock stars. But we won’t. We’re slowly learning that fact. And we’re very, very pissed off.

He raised a legitimate … Read the rest

Posted in Sean's Posts | Also tagged , , , , , , | Comments closed

My eye-friendly Visual Studio color Theme: ReMix

After two years of using the default Visual Studios theme, I decided it was time to create one that was easier on the eyes and more readable. The result was ReMix: https://studiostyl.es/schemes/remix

C-Sharp-Remix-Screenshot

Goals

  • Minimize strain on eyes with a jet-black background.
  • Guide users’ eyes about the page by assigning bright colors to the most important parts of code, such as HTML elements, XML elements, script tags, and keywords. Many of these are located on the left-hand of the design window, which facilitates z-reading.
  • Don’t let colors “clash” with one another. Assign a mix of bright colors and muted colors to reduce visual competition. Using only primaries and whites would drag the eye every which way.
  • Avoid using too many colors at once. Limit the number of colors for each language (e.g., C#, JS, XML), and to have a decent amount of white code.
  • Assign a different sub-theme to every language type to immediately differentiate them in the user’s mind. However, maintain certain commonalities among language types (e.g., the markup languages will tend to use brighter reds for attributes and whites for attribute values, while script languages will tend to use purples for keywords).

Screenshots (Click to Expand)

C# Code

C-Sharp-Remix-Screenshot

XML Code

XML-Remix-Screenshot

HTML / ASP.NET (with CSS)

HTML-CSS-Remix-Screenshot

Creation

I started by perusing existing studiostyles color schemes, and choosing the best to modify and combine. I downloaded the vssettings file for the EasyEyes theme, and used that as my schema to modify piecemeal. The StudioStyles Website has an excellent editing tool. I changed the element names for XML and XAML to be a brighter blue, and gave their attributes somewhat muted blues to give the element names visual … Read the rest

Posted in Sean's Posts | Also tagged , , | Comments closed

Delay loading images with HTML5 data- Attributes

html5-logo

| View Code on JS Bin |

Purpose

Intro animations (e.g., my Pure CSS3 Sliding Title) can appear jerky on pages loading a large amount of external data. If numerous images or Iframes immediately compete for resources, they initially can can bog down the page. Fortunately, you can delay the loading of those resources with a special combination of pure JavaScript, jQuery.data() (jQuery 1.4+) and the HTML5 custom data attributes. This solution requires no AJAX.

Code

HTML and jQuery Library:

< !DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
    <meta charset="utf-8" />
    <title>Pure CSS3 Sliding Title</title>
</head>
<body>
  <h1>Loading-Delayed Image</h1>
  <img class="load-delay" src="http://i.imgur.com/7ZMlu3C.gif" data-original="http://oi42.tinypic.com/9sqmaf.jpg" />
</body>
</html>

JavaScript:

$(document).ready(function () {
      setTimeout(function () {
        $('.load-delay').each(function () {
            var imagex = $(this);
            var imgOriginal = imagex.data('original');
            $(imagex).attr('src', imgOriginal);
        });
    }, 3000);
});

Explanation

Read the rest
Posted in HTML5, jQuery, Web Design | Also tagged , , , , , | Comments closed

Pure CSS3 Sliding Title

CSS3 Logo

| View Code on JS Bin |

What it Does

This professional sliding title uses only CSS3 and HTML. CSS3 animation moves the title from left to right, while CSS3 -linear-gradient properties create a partially transparent css3color gradient. The slider floats over other contents (paragraphs, headers, divs, etc.) if they have a z-index of less than 1000.

How to install It

Read the rest
Posted in CSS3, Sean's Posts, Web Design | Also tagged , , , | Comments closed

Making a Webpage fade-in with jQuery (Cross-Browser Compatible)

jQuery logo

jQuery logoGoal

Using lessons from my jQuery class, I added a jQuery fade-in effect to my company’s homepage: It greets visitors with a white page quickly resolving into a site menu. This fade-in effect works on every browser version I tested, including the earlier, opacity-challenged versions of Internet Explorer (IE). It also gracefully degrades if the visitor has disabled JavaScript.

Challenge

Initial searches on Google and Stack Overflow presented a host of possible solutions, but not all combinations of them worked. Some suggested

Read the rest
Posted in jQuery, Sean's Posts, Web Design | Also tagged , , | Comments closed
  • Currently Reading:

  •   
  •