• amomynous (unregistered)

    Bitmasks and CSS? That's a frist!

  • PlutoPlanet (unregistered)

    public function frist( $wtf ) { echo $wtf; }

  • amomynous (unregistered) in reply to amomynous

    Although different, the CSS in our 10 years old site is quite similar. We have tons of classes like "verdana10black" and "arial12boldgreen", and they're used on each element required. No inheritance to be seen.

  • Ronan (unregistered)

    background-color: #$CSS_color; color: #$CSS_background_color;

    was it reversed in the orginal story?

  • Warren (unregistered)

    Noticed the typo "There there's the code...."

    But perhaps we do need to console George: "there, there".

  • jima (unregistered)
    echo "$what.";
    My thoughts exactly!
  • amomynous (unregistered) in reply to jima

    WAT

  • QJo (unregistered) in reply to Warren
    Warren:
    Noticed the typo "There there's the code...."

    But perhaps we do need to console George: "there, there".

    "Over there, there exists the code ..." Perfectly cromulent.

  • Black Bart (unregistered)

    I admit, I had to run this to understand the logic

  • anonymous (unregistered)

    Actually I had hard time to think what did php do. Only after time I realized that it generates 256 CSS classes using bitmask, something like rwx permission on unix systems....

  • Jim (unregistered) in reply to amomynous
    amomynous:
    Bitmasks and CSS? That's a frist!
    No, no, this is a frist { border-width: 1px 0px 1px 0px; background-color: #$CSS_color; color: #$CSS_background_color; font-style: italic; font-variant: small-caps; vertical-align: top; }
  • nmclean (unregistered) in reply to amomynous
    amomynous:
    Although different, the CSS in our 10 years old site is quite similar. We have tons of classes like "verdana10black" and "arial12boldgreen", and they're used on each element required. No inheritance to be seen.
    It's not that similar. The primary WTF is that they used PHP to solve a problem that could have been solved by writing class="f b" instead of class="fb". It's a workflow WTF, but not really a stylesheet maintenance WTF. They can still edit the "class" definitions in one spot in the PHP script relatively easily, whereas you'd be in trouble if you had to redefine "bold".
  • anonymous (unregistered)

    ....and do the website designer realized that CSS classes are additive? They simply need to define 8 CSS classes and just use as many classes as they like...

  • (cs) in reply to Jim
    Jim:
    amomynous:
    Bitmasks and CSS? That's a frist!
    No, no, this is a frist { border-width: 1px 0px 1px 0px; background-color: #$CSS_color; color: #$CSS_background_color; font-style: italic; font-variant: small-caps; vertical-align: top; }

    I think this wins.

  • (cs)

    Why not have a CSS file that any "adobe certified designer" can change?

  • JW (unregistered)

    for those who want to see this technique taken to it's still unrealized conclusion

    While we're talking style, that should be the possessive "its", with no apostrophe.

  • noname (unregistered)

    Wait ... This thing prints out every possible combination of the 8 identifiers, resulting in 255 CSS clauses?

    I appellatio to your common sense.

  • eman_ruoy (unregistered)

    I saw this: 

    function CSS_print_srnbi( $what){
    and thought... "TURN DOWN FOR WHAT?!!"

  • eman_ruoy (unregistered) in reply to anonymous
    anonymous:
    ....and do the website designer realized that CSS classes are additive? They simply need to define 8 CSS classes and just use as many classes as they like...
    They probably don't understand the word "Cascading"
  • anonymous (unregistered)

    Okay, but... ftcsrunbi?

    Ahhhhhhhhhhh...

    frame (top & bottom border), top-aligned, centered, small caps, red?, narrow, bold, italic.

    I'm assuming the r stands for red. I can't think what else it would mean, unless it's descriptive of the items they're highlighting that way (reminders).

  • amomynous (unregistered) in reply to Jim
    Jim:
    amomynous:
    Bitmasks and CSS? That's a frist!
    No, no, this is a frist { border-width: 1px 0px 1px 0px; background-color: #$CSS_color; color: #$CSS_background_color; font-style: italic; font-variant: small-caps; vertical-align: top; }
    Error, class not found. Did you mean 'ftsri' ?
  • roadrunner (unregistered)

    Um, yeah, ... cascading, dude.

    While this particular piece of code is pretty WTF, it does illustrate the need for CSS preprocessors. All hail LESS and SASS!

    CAPCHA: abbas - abbas dabba doo!

  • Steven (unregistered)

    I see they're using the MORE css transpiler!

  • nmclean (unregistered) in reply to amomynous
    amomynous:
    Jim:
    amomynous:
    Bitmasks and CSS? That's a frist!
    No, no, this is a frist { border-width: 1px 0px 1px 0px; background-color: #$CSS_color; color: #$CSS_background_color; font-style: italic; font-variant: small-caps; vertical-align: top; }
    Error, class not found. Did you mean 'ftsri' ?
    But then a brilliant intern wrote CSS_print_rnibs, and duplicated all calls to CSS_print_srnbi. Now frist.html and cribs.html work as expected.
  • Cranky Old Fart (unregistered)

    Am I missing something here? The main loop in that function is using nothing but static values, it's going to spit out the same 8 lines of crap for anything that is passed in.

    Holy misuse of bitmap values and loops, wtf.

  • nmclean (unregistered) in reply to roadrunner
    roadrunner:
    While this particular piece of code is pretty WTF, it does illustrate the need for CSS preprocessors. All hail LESS and SASS!
    This code is an implementation of a completely unnecessary CSS preprocessor. It does the opposite of illustrating a need.
  • nmclean (unregistered) in reply to Cranky Old Fart
    Cranky Old Fart:
    Am I missing something here? The main loop in that function is using nothing but static values, it's going to spit out the same 8 lines of crap for anything that is passed in.

    Holy misuse of bitmap values and loops, wtf.

    You did miss something. The difference between & and ==, specifically.

  • Card (unregistered)

    I think they could use a couple more components, it's a good thing they thought about scalability while writing this.

  • J (unregistered) in reply to Black Bart

    This is pure engineering. a complicated solution to a problem that never existed.

    example: http://ideone.com/m6BCkb

  • quexactly (unregistered) in reply to nmclean
    nmclean:
    Cranky Old Fart:
    Am I missing something here? The main loop in that function is using nothing but static values, it's going to spit out the same 8 lines of crap for anything that is passed in.

    Holy misuse of bitmap values and loops, wtf.

    You did miss something. The difference between & and ==, specifically.

    Something's still missing. Instead of 8 lines of crap I see this spitting out 128 lines of crap where $i & 1 is TRUE, 64 for $i & 2, etc. As read, "for ($i = 1, $i < 256, ++$i)" is not dependent on the value of $what. So $what did I miss?

  • (cs) in reply to JW
    JW:
    for those who want to see this technique taken to it's still unrealized conclusion

    While we're talking style, that should be the possessive "its", with no apostrophe.

    "style" ' You keep using that word. I don't think it means what you think it means.'

    ("its" vs. "it's" is basic grammar, not style.)

  • (cs) in reply to Cranky Old Fart
    Cranky Old Fart:
    Am I missing something here? The main loop in that function is using nothing but static values, it's going to spit out the same 255 lines of crap for anything that is passed in.

    Holy misuse of bitmap values and loops, wtf.

    FTFY!

    Edit: Well, it's not the same 255 lines, as each line starts with the parameter. But it always will output 255 lines.

  • (cs)

    It's a shame that t and f are defined in the wrong order to make a $what.tf style.

    It's also apparent from the srnbi in the name of this function that they probably originally only had those 5 attributes and added c, t, and f later.

    Best of luck to whoever develops documents against this style sheet to (a) remember the right order for all these letters if they ever have to use a complicated style, if they are typing in names by hand or (b) find the style they want from the enormous list, if they are using some sort of GUI editor. Of course, if they had just defined 8 individual styles, they could have applied all the styles they wanted in any order and solved both problems, as long as (c) they weren't using some crappy GUI editor that didn't allow them to apply more than one style to an element, which is probably the actual cause for doing this horrible thing.

  • (cs) in reply to anonymous
    anonymous:
    Okay, but... ftcsrunbi?

    Ahhhhhhhhhhh...

    frame (top & bottom border), top-aligned, centered, small caps, red?, narrow, bold, italic.

    I'm assuming the r stands for red. I can't think what else it would mean, unless it's descriptive of the items they're highlighting that way (reminders).

    I suspect it's for reversed; that is, background becomes foreground and foreground becomes background.

  • (cs)
    Behold. Elegant beauty personified in 25 sublime lines of code.

    Code is human now?

  • nmclean (unregistered) in reply to quexactly
    quexactly:
    nmclean:
    Cranky Old Fart:
    Am I missing something here? The main loop in that function is using nothing but static values, it's going to spit out the same 8 lines of crap for anything that is passed in.

    Holy misuse of bitmap values and loops, wtf.

    You did miss something. The difference between & and ==, specifically.

    Something's still missing. Instead of 8 lines of crap I see this spitting out 128 lines of crap where $i & 1 is TRUE, 64 for $i & 2, etc. As read, "for ($i = 1, $i < 256, ++$i)" is not dependent on the value of $what. So $what did I miss?

    Yes it spits out 255 lines. $what is the tag name and a style rule for each of the 255 classes is generated for that tag with that class: TD.f, TD.ft, and so on.

  • (cs)
  • SztupY (unregistered) in reply to nmclean

    Note that multiple classes were not that okay in IE5.5 and partially also in IE6, so maybe this was the reason they did this type of workaround.

  • Norman Diamond (unregistered) in reply to chubertdev
    chubertdev:
    Behold. Elegant beauty personified in 25 sublime lines of code.
    Code is human now?
    That makes sense. After all, beauty contests take persons and turn them into objects.
  • (cs) in reply to Norman Diamond
    Norman Diamond:
    chubertdev:
    Behold. Elegant beauty personified in 25 sublime lines of code.
    Code is human now?
    That makes sense. After all, beauty contests take persons and turn them into objects.

    If you objectify a person, isn't that a widening conversion?

  • TenshiNo (unregistered) in reply to chubertdev
    chubertdev:
    Behold. Elegant beauty personified in 25 sublime lines of code.

    Code is human now?

    Nope.

    Personification: the act of attaching human-like characteristics or behavior to an inanimate object.

  • (cs) in reply to TenshiNo
    TenshiNo:
    chubertdev:
    Behold. Elegant beauty personified in 25 sublime lines of code.

    Code is human now?

    Nope.

    Personification: the act of attaching human-like characteristics or behavior to an inanimate object.

    More accurately: anthropomorphize

  • nmclean (unregistered) in reply to TenshiNo
    TenshiNo:
    chubertdev:
    Behold. Elegant beauty personified in 25 sublime lines of code.

    Code is human now?

    Nope.

    Personification: the act of attaching human-like characteristics or behavior to an inanimate object.

    Yes, but the subject of personify in that sentence is beauty, not code: Beauty becomes human-like in the form of code -- implying code is human.

  • Old Fart (unregistered) in reply to Black Bart

    That..., that thing is ludicrous!

  • Old Fart (unregistered) in reply to J

    Thread just keeps on delivering!

    odio. -Sure makes me feel. Yeah.

  • (cs) in reply to chubertdev
    chubertdev:
    [If you objectify a person, isn't that a widening conversion?
    Not if you like 'em thin.
  • (cs) in reply to nmclean
    nmclean:
    TenshiNo:
    chubertdev:
    Behold. Elegant beauty personified in 25 sublime lines of code.

    Code is human now?

    Nope.

    Personification: the act of attaching human-like characteristics or behavior to an inanimate object.

    Yes, but the subject of personify in that sentence is beauty, not code: Beauty becomes human-like in the form of code -- implying code is human.
    Not necessarily. "Person" is somewhat more general than human. All humans are persons, but not all persons are human. For example, a spirit can be a person, but not a human.

  • (cs)

    OK, so we have

    "t" - Top "c" - Center "s" - Small Caps "r" - "Reverse" colors "n" - Narrow "b" - Bold "i" - Italics

    But what's "f" for ? Frame?

Leave a comment on “Going Out of Style”

Log In or post as a guest

Replying to comment #:

Log Out

« Return to Article