Year: 2012


Dec
2012

Iterations in Less

categories: programming magic

Part of the beauty of Less and other CSS ‘compilers’ is to enable the author to automate tedious functions that normally must be coded by hand.

Cut Copy Paste

Cut Copy Paste (Photo credit: arthit)

Suppose you needed several classes that specified padding/margins:

.mRight50{margin-right:50px}
.mLeft50{margin-left:50px}
.pRight50{padding-right:50px}
.pLeft50{padding-left:50px}
.mRight25{margin-right:25px}
.mLeft25{margin-left:25px}
.pRight25{padding-right:25px}
.pLeft25{padding-left:25px}

No big deal, right? It wouldn’t take that long to type in; just cut and paste a bit.

Well, what if you needed them from 0-100 by 5s? (Never mind WHY you’d want to do this; this is a simple example.)

.mRight100{margin-right:100px}
.mLeft100{margin-left:100px}
.pRight100{padding-right:100px}
.pLeft100{padding-left:100px}
.mRight95{margin-right:95px}
.mLeft95{margin-left:95px}
.pRight95{padding-right:95px}
.pLeft95{padding-left:95px}
.mRight90{margin-right:90px}
.mLeft90{margin-left:90px}
.pRight90{padding-right:90px}
.pLeft90{padding-left:90px}
.mRight85{margin-right:85px}
.mLeft85{margin-left:85px}
.pRight85{padding-right:85px}
.pLeft85{padding-left:85px}
.mRight80{margin-right:80px}
.mLeft80{margin-left:80px}
.pRight80{padding-right:80px}
.pLeft80{padding-left:80px}
.mRight75{margin-right:75px}
.mLeft75{margin-left:75px}
.pRight75{padding-right:75px}
.pLeft75{padding-left:75px}
.mRight70{margin-right:70px}
.mLeft70{margin-left:70px}
.pRight70{padding-right:70px}
.pLeft70{padding-left:70px}
.mRight65{margin-right:65px}
.mLeft65{margin-left:65px}
.pRight65{padding-right:65px}
.pLeft65{padding-left:65px}
.mRight60{margin-right:60px}
.mLeft60{margin-left:60px}
.pRight60{padding-right:60px}
.pLeft60{padding-left:60px}
.mRight55{margin-right:55px}
.mLeft55{margin-left:55px}
.pRight55{padding-right:55px}
.pLeft55{padding-left:55px}
...

Ugh.

There’s a better way:

@steps: 100;

// Main Loop
.sidesX( @index ) when ( @index > 0 ) {
 (~".mRight@{index}") { .mRightX(@index); }
 (~".mLeft@{index}") { .mLeftX(@index); }
 (~".pRight@{index}") { .pRightX(@index); }
 (~".pLeft@{index}") { .pLeftX(@index); }

 .sidesX(@index - 5);
}

// End iteration at index zero
.sidesX( 0 ) {}<

// Individual class rendering
.mRightX( @offsetsize ) {
  margin-right: (~"@{offsetsize}px");
}
.mLeftX( @offsetsize ) {
 margin-left: (~"@{offsetsize}px");
}
.pRightX( @offsetsize ) {
 padding-right: (~"@{offsetsize}px");
}
.pLeftX( @offsetsize ) {
 padding-left: (~"@{offsetsize}px");
}

// Generate the CSS
.sidesX( @steps );
Enhanced by Zemanta

  • Comments Off on Iterations in Less

Oct
2012

Why Flash Intros are bad and you should feel bad for using them

categories: web development

Remember when flash introduction pages were all the rage? They were ‘cool’ from the web designer‘s standpoint, but utterly annoying and off-putting to the visitor. Fortunately, most people figured out that people visited their site for the content, not the snappy graphics (unless it was a gallery site), and certainly not for the mandatory intro pages.

Yet, some people still haven’t gotten the clue that the 80s called and they want their flash intros back.

xkcd: the seventies called

For those who remember with revulsion, here’s the old SkipIntro parody. The site is long gone, but it would be a shame to let it fade away!

SkipIntro

If you haven’t clicked on it, do it now! Relive the pain of the never-ending flash intro to the sound of weird Indian music and gunfire!

The OG SWF

For those who somehow can still play flash file (via a plugin or whatever), here is the original SWF:


Sep
2012

The Importance of Not “Designing” your own Security

categories: web development

Recently, at a client, I had the opportunity to review their security implementation on their website. I realized that it is very important to never try to design one’s own security, because of the Dunning Kruger effect. In a nutshell, folks who don’t know very much about security think they know “enough,” and folks who are very knowledgable (e.g., Bruce Schneier) realize they don’t know all that much.

So what does this mean? It means simply this:

Broken bike lock
Not so secure now, is it?

If you design your own security system, you’re going to get it wrong.

Here are some examples of how to get things wrong.

Storing passwords in plaintext so you can send the person the password if they forget.

When (not if) someone breaks into your database, they instantly own every single account. They can log in, view your user’s details and change them. Since most people reuse the same password for multiple systems, the attacker can try those passwords on other popular services, such as Facebook, GMail, LinkedIn, Twitter, etc.

Relying on application-level security to protect your data.

This is dangerous because it is hard to ensure 100% coverage. EVERY access point—of many—to your data must be secure. Failing to cover one point leaves the system wide open. A better solution is to apply security at the data-store level. Typically, this is done using triggers and stored procedures. Your RDBMS doesn’t support those (or weakly supports them)? Find another RDBMS.

Using the same salt for every password in the system.

You don’t understand what salts are for and how to use them properly.

Requiring “complex” (a number, upper- and lower-case letters and symbols but not very long) passwords.

Nope. Ineffective.

Relying on Two-Factor Authentication.

For now it is working, somewhat, but crackers are rapidly finding ways to circumvent this technique.

Relying on a “security question” in case the person forgets his/her password.

Oh, you’ll love this. You’re creating a weak password as a backup to a (hopefully) strong password. Fail.

Assuming by keeping the details of your implementation secret, you will be secure.

This is dangerous because you think you’re secure. In fact, you are less secure. Kerckhoffs’s Principle is always a good starting point for security implementation: if an attacker could see all of my code and had a copy of my database, could she/he break into my system?

Getting it right

The first step is admitting that you don’t know what you’re doing.

Now go find someone who does: there are plenty of security libraries out there for every language. Find one that is mature and widely used and implement it. Keep up to date on the library’s mailing list so you will receive alerts, and update whenever there’s a new version.

Security is hard to do. It is extremely hard to do correctly. Don’t fall into the trap of thinking you can get it right without years and years of study and experience.

Related articles

Edit (30 Jan 2026) – Formatting, fixed links, added missing image

  • Comments Off on The Importance of Not “Designing” your own Security

Sep
2012

Find Something You Like and Dissect It

categories: programming magic, web development
Image representing Wikipedia as depicted in Cr...

Image via CrunchBase

I’m always on the lookout for a new technique or Better Mousetrap. I admit I don’t know all that much, so I’m happy to learn.

I was playing around with Wikify @ appointment.net (a nifty tool that goes through a block of text and ‘wikifies’ it–that is, links all the words it can find to relavant Wikipedia articles) when I noticed the behavior seemed rather…odd. I could see it go through the word list as it created links, and every time it linked up a word, every duplicate word was linked.

Let’s take some example text (from the now-defunct Dilbert Mission Statement Generator) and run it through the site:

“We have committed to synergistically fashion high-quality products so that we may collaboratively provide access to inexpensive leadership skills in order to solve business problems“

Our mission is to continually leverage existing seven-habits-conforming catalysts for change as well as to competently leverage other’s error-free materials.

We globally leverage other’s professional meta-services as well as to conveniently integrate competitive solutions in order to solve business problems.

“It is our job to continually foster world-class infrastructures as well as to quickly create principle-centered sources to meet our customer‘s needs”

“Our challenge is to assertively network economically sound methods of empowerment so that we may continually negotiate performance based infrastructures“

For example, the additional instances of “leverage,” “problems,” and “business” were quickly linked, once the first one was completed. Poking around their code, I noticed all the action takes place in wikify.js. There are a few gems in there. For example, the function call to reduce an array to only unique values:

function array_unique( array ) {
    // http://kevin.vanzonneveld.net
    // +   original by: Carlos R. L. Rodrigues (http://www.jsfromhell.com)
    // +      input by: duncan
    // +   bugfixed by: Kevin van Zonneveld (http://kevin.vanzonneveld.net)
    // +   bugfixed by: Nate
    // +      input by: Brett Zamir (http://brettz9.blogspot.com)
    // +   bugfixed by: Kevin van Zonneveld (http://kevin.vanzonneveld.net)
    // +   improved by: Michael Grier
  // %          note 1: the second argument, sort_flags is not implemented
    // *     example 1: array_unique(['Kevin','Kevin','van','Zonneveld','Kevin']);
    // *     returns 1: ['Kevin','van','Zonneveld']
    // *     example 2: array_unique({'a': 'green', 0: 'red', 'b': 'green', 1: 'blue', 2: 'red'});
    // *     returns 2: {'a': 'green', 0: 'red', 1: 'blue'}

    var key = '', tmp_arr1 = {}, tmp_arr2 = [];
    var val = '';
    tmp_arr1 = array;

    var __array_search = function (needle, haystack) {
        var fkey = '';
        for (fkey in haystack) {
            if ((haystack[fkey] + '') === (needle + '')) {
                return fkey;
            }
        }
        return false;
    };

    for (key in tmp_arr1) {
        val = tmp_arr1[key];
        if (false === __array_search(val, tmp_arr2)) {
            tmp_arr2[key] = val;
        }
        delete tmp_arr1[key];
    }
    return tmp_arr2;
}

Aha! See how that works?

Related articles
Enhanced by Zemanta

  • Comments Off on Find Something You Like and Dissect It

Aug
2012

Wicked Cool FizzBuzz in Perl

categories: programming magic

The FizzBuzz problem is a simple coding demonstration to write an application in any language that counts from 1 to 100:

Update: See special instructions below 👇🏼

Write a program that prints the numbers from 1 to 100. But for multiples of three print “Fizz” instead of the number and for the multiples of five print “Buzz”. For numbers which are multiples of both three and five print “FizzBuzz”.

I found the following on Stackprinter (deleted Stackoverflow questions) by  “ysth”; probably the best example of wicked-cool code obsfucation, ever.

(                       (
''))=~('('.'?'.'{'.("\`"|
'%').('['^'-').('`'|'!').
('`'|',').'"'.('['^'+').(
         ((            (
         (             ((
         (             ((
         '['         ))))
          )))))^(')')).(
           '`'|"\)").(
         (              (
         '`'))|'.').('['^
         '/').'+'.('(').(
         '`'^'&').(('`')|
                     ((
                      ((
                    ')'))
                   ))).+(
                   "\["^

         (              (
         '!'))).('['^'!')    .')'
         .'['.'\\'.('$').    '_'.
         '%'.('^'^(('`')|     ((
         (              (
         '-')))))).(']').
         '.'.'('.('`'^'"'
         ).('['^'.').('['
                       ^
                       ((
                       ((
         '!'))))).(('[')^
         '!').')'.('[').
         '\\'.'$'.'_'
                        .
            '%'.('^'^('`'|'+'
         )).']'.'|'.'|'.'\\'.
         '$'.'_'.','.'\\'.'$'
         .+             (
         ((
           (
                  (
                  (
                  (
                  (
            '/')))))))).(
                  (
                  (
                  (
                   '`')))|
              '&').('`'|"\/").(
           '['^')').('{'^'[').('^'
         ^('`'|'/'         ))."\.".
         ((                      '.'

         )                         )
         .                         (
         '^'^('`'|'/')).('^'^(('`')|
         '.')).('^'^('`'|'.')).('!'^
         (              (          (
         (              (          (
                        (          (
                        (          (
                       '+'         )
                      )))))        )
                                   )
                                  ))
                               ).'"'

         .              (
         '}').')');$:='.'    ^'~'
         ;$~='@'|"\(";$^=    ')'^
         '[';$/='`'|"\.";     $,
                     ='('
         ^+           '}'
         ;($\)         =(
         ('`'))|        (
         (  "\!"));     (
         (    $:))=')'  ^
         (       '}');$~=
         (          '*')|
         ((            ((
         '`')
                     )));
         $^           =((
         '+'))         ^+
         '_';$/=        (
         (  "\&"))|     (
         (    '@'));$,  =
         (       '[')&'~'
         ;          ($\)=
         ((            ((
         ',')

         )))^                   '|';
         $:=('.')^         "\~";$~=
           '@'|'(';$^=')'^"\[";$/=
               '`'|'.';$,='('

                   ^'}';$\
              ='`'|'!';$:="\)"^
           '}';$~='*'|'`';$^="\+"^
         ('_');$/=         '&'|'@';
         $,                      =((

           (             "\[")))&
          ((           ('~')));$\=
         ((           ','))^    '|'
         ;           ($:)=        ((
        '.'))^'~';$~='@'|'(';$^="\)"^
         (          '[');          (
         (          $/))=          (
        '`')|'.';$,='('^'}';$\=('`')|
         ((        '!')            )
         ;$:=    (')')^           (
           ('}'));$~=            (

         (
         (
         (
         (
         (
         (
         (
         (

         (                     ((
         '*')                ))  ))
            )))             )      )
               ))|          (      (
                   '`'       ));$^=
           '+'       ^((
         ((   ((        '_'
         )                  )))
         )     )              ;$/
          ='&'|                  '@'

          ;$,                    =
         '['                     &+
         ((                       ((
         (                         (
         (                         (
         (             ((          (
         '~'         ))))))      )))
         )));(    ($\))  =','^"\|";
          $:='.'^"\~";    $~="\@"|
            "\(";$^=


         ')'^                   '[';
         $/=('`')|         "\.";$,=
           '('^'}';$\='`'|"\!";$:=
               ')'^'}';$~='*'

          |+
         '`';
         ($^)

                   =('+')^
              '_';$/='&'|'@';$,
           ='['&'~';$\=','^'|';$:=
         '.'^"\~";         $~="\@"|
         ((                      '('

         )                         )
         ;                         (
         $^)=')'^'[';$/='`'|"\.";$,=
         '('^'}';$\='`'|'!';$:="\)"^
         (              (          (
         (              (          (
         (              (          (
         (              (          (
         (             '}'        ))
         ))           ))))       )))
         ));(       $~)= '*'|'`';$^
          ='+'^"\_";$/=   '&'|'@';
            $,='['&'~'      ;$\=
              "\,"^
                        (
           '|');$:=('.')^
         '~';$~='@'|"\(";
         $^=')'^('[');$/=
         ((
         ((
          (
         '`')))))|'.';$,=
         '('^'}';$\="\`"|
         '!';$:=')'^"\}";
                     ($~)
         =(           '*'
         )|'`'         ;(
         $^)='+'        ^
         (  '_');$/     =
         (    '&')|'@'  ;
         (       $,)='['&
         (          '~');
         $\            =(
         ',')
                     ^'|'
         ;(           $:)
         ='.'^         ((
         "\~"));        (
         (  ($~)))=     (
         (    ('@')))|  (
         (       '('));$^
         =          "\)"^
         ((            ((
         '[')

         )));                   ($/)
         ='`'|'.';         $,="\("^
           '}';$\='`'|'!';$:="\)"^
               '}';$~='*'|'`'

                   ;$^='+'
              ^'_';$/='&'|"\@";
           $,='['&'~';$\=','^"\|";
         $:=('.')^         "\~";$~=
         ((                      '@'

           )             )|'(';$^
          =(           ')')^'[';$/
         =(           "\`")|    '.'
         ;           ($,)=        ((
        '('))^'}';$\='`'|'!';$:="\)"^
         (          '}');          (
         (          $~))=          (
        '*')|'`';$^='+'^'_';$/=('&')|
         ((        '@')            )
         ;$,=    ('[')&           (
           ('~'));$\=            (

         (
         (
         (
         (
         (
         (
         (
         (

         (                     ((
         ',')                ))  ))
            )))             )      )
               ))^          (      (
                   '|'       ));$:=
           '.'       ^((
         ((   ((        '~'
         )                  )))
         )     )              ;$~
          ='@'|                  '('

          ;(           ($^))=
         ((             (  (')'))))^
         (              ((      '[')
         )              );      ($/)
         =              ((      '`')
         )|            '.'      ;$,=
         "\("^      '}';$\      ='`'
          |'!';$:=')'^'}'       ;$~=
            '*'|'`';$^=         '+'^


         '_';                   ($/)
         ='&'|'@';         $,="\["&
           '~';$\=','^'|';$:="\."^
               '~';$~='@'|'('

          ;(               ($^))=
         ')'^   '[';$/='`'|('.');$,=
         '('^      '}';$\='`'|"\!";

          $:               ="\)"^
         '}';   $~='*'|'`';$^=('+')^
         '_';      $/='&'|('@');$,=

           (             '[')&'~'
          ;(           $\)=','^'|'
         ;(           ($:))=    '.'
         ^           "\~";        $~
        ='@'|'(';$^=')'^'[';$/=('`')|
         (          '.');          (
         (          $,))=          (
        '(')^'}';$\='`'|'!';$:=(')')^
         ((        '}')            )
         ;$~=    ('*')|           (
           ('`'));$^=            (

         (
         (
         (
         (
         (
         (
         (
         (

          ((
         '+')
       ))))))

           )             )))^'_';
          $/           ='&'|'@';$,
         =(           "\[")&    '~'
         ;           ($\)=        ((
        ','))^'|';$:='.'^'~';$~="\@"|
         (          '(');          (
         (          $^))=          (
        ')')^'[';$/='`'|'.';$,=('(')^
         ((        '}')            )
         ;$\=    ('`')|           (
           ('!'));$:=            (

         (
         ')')
            )^+
               '}'
                   ;$~
                     =((
                        '*'
                            ))|
                              '`'
                                 ;$^
                        =
         '+'^'_';$/='&'|"\@";$,=
         '['&'~';$\=','^'|';$:='.'^
         '~';$~='@'|'(';$^=')'^"\[";
                        (      $/  )
                        =     ('`')|
                              "\.";
              ($,)=
           '('^'}';$\=
          '`'|'!';$:=')'
         ^+           ((
         (              (
         (              (
         (             ((
         '}')       ))))
           ))));$~='*'|
             "\`";$^=
         (              (
         '+'))^'_';$/='&'
         |'@';$,='['&'~';
         $\=','^('|');$:=
                     ((
                      ((
                    '.'))
                   ))^'~'
                   ;($~)












         =
         (                    (
         '@'))|'(';$^=')'^'[';$/=
         '`'|'.';$,='('^'}';$\='`'
         |
         (
          ((
         '!')
         ));(

          $:
         )=((
         ')')

         )
         ^                    (
         '}');$~='*'|'`';$^="\+"^
         '_';$/='&'|'@';$,='['&'~'
         ;
         (
                  $\)="\,"^
             '|';$:='.'^'~';$~=
           '@'|'(';$^=')'^'[';$/=
          "\`"|               "\.";
         $,                       =(
         (                         (
         (                         (
         ((                      '('
          )))))               ))^((
           '}'));$\='`'|('!');$:=
              ')'^'}';$~="\*"|

                  ('`');$^=
             '+'^'_';$/='&'|'@'
           ;$,='['&'~';$\=','^'|'
          ;($:)               ='.'^
         ((                       ((
         (                         (
         (                         (
         ((                      '~'
          )))))               )))))
           ;$~='@'|'(';$^=')'^'['
              ;$/='`'|"\.";#;#

Save the above Asciiart into a file called, for example, fizz.pl.

Then run it: 

perl fizz.pl

Related articles

Edit (30 Jan 2026) – formatted and added instructions to run on modern perl

  • Comments Off on Wicked Cool FizzBuzz in Perl