You know it’s a good day

You know it’s a good day when you sleep in, roll out of bed to put on a fresh pot of coffee, sit back on the couch with a delicious bowl of fresh fruit and open the newspaper for a leisurely read only to find A GINORMOUS PHOTO OF YOU PRESENTING YOUR THESIS ABOVE THE FOLD!

No podría estar más de acuerdo. Aprovechando la ocasión, vean foldup, un pequeño plugin por Russ, que dobla las letras con CSS3.

Navegadores mexicanos

Hice un descubrimiento curioso indagando en los reportes de google analytics de ttamayo.com.

/* Smaller than 1024, Mobile phone for sure */
@media only screen and (max-width: 1023px) {

}

/* 1024, Windows 96%, IE 50% */
@media only screen and (min-width: 1024px) {

}

/* 1280, Safari 60%, IE 20% */
@media only screen and (min-width: 1280px) {

}

/* 1440, Windows 70%, IE 40% */
@media only screen and (min-width: 1440px) {

}

/* 1680, Mac 70%, IE 8% */
@media only screen and (min-width: 1680px) {

}

/* 1920, Mac 90%, no IE */
@media only screen and (min-width: 1920px) {

}

Resulta que 1280 es en 60% usuarios de Mac, mientras que la resolución mayor de 1440 es en 70% Windows. Supongo que tiene que ver con que la mayoría de usuarios de Apple en México tienen MacBooks o MacBook Pro de esa resolución (gama baja). En 1680 se pasa de nuevo a Mac (la segunda resolución más encontrada en equipos Apple). Arriba de esta resolución es casi exclusiva de usuarios de Apple.

Diseñadores con target en México quizás les sea útil esta información :D

On how DesignShack.co.uk steals code from other developers and websites

I made a troll comment in a DesignShack article some two weeks ago. This is an open letter for David Appleyard and Jake Rochleau,

I’ve always thought reutilizing code is the single best practice a developer can do if he knows how to (considering it would be the best option). Not only Heinemeier’s wisdom has taught me that lesson. It’s something I do every day.

But ONLY, as long as I cite!

Please DesignShack, don’t screw up your rep. Avoid plagiarism!

I know how difficult is to control plagiarism having so many contributors, that’s why I’ll try to spot some of those problems here (all quotes taken from the original article).

Full CSS Transparency

This small code snippet will allow any frontend developer to create transparent divisions. Note these CSS properties could be applied to any class or ID, but for this example it’s a containing div element.

.transparent {
filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
}
...
<div class="box transparent">larger content</div>

Was clearly taken from: CSS-Tricks.

X-UA-Compatible

The biggest problem with Internet Explorer comes with how choppy the rendering engine performs. In fact, for many versions of the browser there are multiple engines built-in! It’s an incredible confusing circumstance. This short meta tag will force IE to use the most recent version of its rendering engine.

<!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

Internet Explorer Conditionals

From Microsoft’s many releases of the modern day web browser Internet Explorer includes some fantastic bits of code. These conditional comments added below are just a few examples of the many choices you can have when coding an HTML5 document. If you’d like to apply specific CSS styles to a document based on the vesion of IE these conditional comments allow for the extremes. Customization is huge in web development, and when it comes to Internet Explorer the ideology is no different.

<!--[if lt IE 7 ]> <body class="ie6"> <![endif]-->
<!--[if IE 7 ]>    <body class="ie7"> <![endif]-->
<!--[if IE 8 ]>    <body class="ie8"> <![endif]-->
<!--[if IE 9 ]>    <body class="ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]> for higher than IE9 or non-IE <![endif]-->

Display Pointer Cursor over Input Fields

Oddly enough modern browsers will not display a new mouse cursor when hovering over an input field. This has been the case for some time now, but the rules for web development have also been changing. This CSS hack will display a pointer over any clickable input field. This offers great user experience and fixes the mentality of rudimentary forms.

/** label CSS pointer reset **/
label, input[type=button], input[type=submit], button { cursor: pointer; }

Properly Aligned HTML5 Labels

It can become a war zone attempting to align form inputs with their proper labels. This is especially true with checkboxes and radio buttons which seems to float off into pages without notice. The CSS3 code below allows targeting specifically for input fields with radio and checkboxes typeset. There are other ways of accomplishing the same alignment, although this CSS group has been trimmed to just 3 lines of code!

/* @group align radio, labels, forms */
input[type="radio"] { vertical-align: text-bottom; }
input[type="checkbox"] { vertical-align: bottom; *vertical-align: baseline; }
.ie6 input { vertical-align: text-bottom; }

Was clearly taken from: Paul Irish’s HTML5 Boilerplate. See the “Walk with me” code section.

Force Browser Scrollbar

It’s very common for smaller websites powered with Flash or jQuery effects to mess with browsers. This is especially prudent with older versions of Internet Explorer. When your site won’t display a scrollbar initially it’s possible your visitors will see content jump the page and work around small pixel gaps. The CSS code below will always force a scrollbar which fixes the issue entirely.

html { overflow-y: scroll; }

Once more, stolen from CSS-Tricks

Pure CSS3 Rounded Corners

In the early 2000 it was a requirement to use images for rounded corners. This effect was most notably used on Digg, before they changed their entire design. Nowadays rounded corners are seen prevalent all around the world wide web. And with the small code snippet below you too can apply these styles into your own web design.

.round{
   -moz-border-radius: 10px;
   -webkit-border-radius: 10px;
   border-radius: 10px; /* future proofing */
   -khtml-border-radius: 10px; /* for old Konqueror browsers */
}

Stolen from CSS-Tricks

Min-Height Fix for IE

Up Until IE8/9 the browser hasn’t supported the CSS min-height property. This is huge since it’s a common way for addressing the minimum height a website may fall to — and both Mozilla and Chrome fully support this, along with Opera and others. However with the following rule we set the div height to auto and marked with !important so nothing may override it! This forces IE to accept our min-height, a sneaky workaround.

.box {
   min-height:500px;
   height:auto !important;
   height:500px;
}

Stolen from Queeness, Perishable Press, CSS-Tricks, and else.

Vertical Align Center

It’s a pretty simple task to horizontally center any part of your web page. This practice has gone on for years, and CSS has made things much easier. However vertical alignments have always caused problems for web developers. Except with the code below it’s a peice of cake! The vertical-align attribute will work wonders and doesn’t require any extra code for perfect vertical alignment.

.vcontainer {
   min-height: 10em;
   display: table-cell;
   vertical-align: middle;
}

Stolen from the W3C.

Fancy Ampersands

The CSS code below is unique for creating fancy ampersands. The & symbol can stand out in your writing and behaves as typographic decorations in blog posts. Although this is very useful, the code can become tiresome if applied to every symbol on your site. That’s why we’ve set the properties to a .amp class which should be used on a span wrapping your ampersands. You can use a similar effect on the first letter of your paragraphs, for example.

.amp {
    font-family: Baskerville, 'Goudy Old Style', Georgia Palatino, 'Book Antiqua', serif;
    font-style: italic;
    font-weight: normal;
}

Taken from the CSS Font Stack.

Not to say, maybe ALL the damn article was “inspired” by other article… Shame on you.

UPDATE: Please read David’s comment below.