How To Set Up A Print Style Sheet - Smashing Coding
►http://coding.smashingmagazine.com/2011/11/24/how-to-set-up-a-print-style-sheet
We’ve limited this technique to links within <p> elements as a precaution. To go a step further, we could choose to show only the URLs of external links. An attribute selector is perfect for this
Lessons From A Review Of JavaScript Code - Smashing Coding
►http://coding.smashingmagazine.com/2011/10/27/lessons-from-a-review-of-javascript-code
Problem: An uncached array length is being used in all for loops. This is particularly bad because you’re using it when iterating through an HTMLCollection.
Here’s an example:
for ( var i=0; i<myArray.length;i++ ) {
/ do stuff /
}
Feedback: The problem with this approach (which I still see a number of developers using) is that the array length is unnecessarily re-accessed on each loop’s iteration. This can be very slow, especially when working with HTMLCollections (in which case, caching the length can be anywhere up to 190 times faster than repeatedly accessing it, as Nicholas C. Zakas mentions in his book High-Performance JavaScript). Below are some options for caching the array length.
The Guide To CSS Animation: Principles and Examples - Smashing Coding
►http://coding.smashingmagazine.com/2011/09/14/the-guide-to-css-animation-principles-and-examples
With CSS animation now supported in both Firefox and Webkit browsers, there is no better time to give it a try. Regardless of its technical form, whether traditional, computer-generated 3-D, Flash or CSS, animation always follows the same basic principles.
#css3
En gros, le même principe que les filtres de traitement d’images de SPIP, mais côté client en Javascript. L’exemple est farfelu, mais le principe est intéressant.
Optimize Images With HTML5 Canvas - Smashing Magazine
►http://coding.smashingmagazine.com/2011/08/30/optimize-images-with-html5-canvas
And keep i mind that modern Web browsers have enough power to enhance images right on the user’s computer. In this article, I’ll demonstrate one possible solution.
Vu que le js est la ressource la plus lourde et celle qui ralentit le plus les pages sur un nombre important de sites, en rajouter encore me parait innoportun…
Cela suppose en effet que le client soit plus intelligent que bête. On va effectivement se retrouver face à des problèmes de performances, surtout avec les nouveaux clients, tels les accessoires mobiles en particuliers, particulièrement hétérogènes, y compris dans leurs résolutions d’écran, en plus de leurs processeurs ou mémoire locale, cache navigateur, etc.
En matière de performance, outre le JavaScript, Chrome supporte Native Client, permettant au navigateur d’exécuter du code C/C++ compilé (ou même du code assembleur) dans l’architecture matérielle (processeur) du client à la vitesse native (passage par un SDK nécessaire). Cela suppose cependant que ce principe soit adopté par les clients, et à ma connaissance, seul Chrome l’intègre. Cela permettrait de se passer de JavaScript, dont le principe de fonctionnement reste lent (quoi que, quand on voit les applications que fait tourner node.js, lui-même basé sur le moteur d’exécution JavaScript V8 de Chrome...)
HTML5 And The Document Outlining Algorithm
►http://coding.smashingmagazine.com/2011/08/16/html5-and-the-document-outlining-algorithm
By now, we all know that we should be using HTML5 to build websites. The discussion now is moving on to how to use HTML5 correctly. One important part of HTML5 that is still not widely understood is sectioning content: section, article, aside and nav. To understand sectioning content, we need to grasp the document outlining algorithm.
Understanding the document outlining algorithm can be a challenge, but the rewards are well worth it. No longer will you agonize over whether to use a section or div element — you will know straight away. Moreover, you will know why these elements are used, and this knowledge of semantics is the biggest benefit of learning how the algorithm works.
Create An HTML/CSS Mobile Web App Using Sencha Touch
►http://coding.smashingmagazine.com/2011/07/19/create-an-html-and-css-mobile-web-app-using-sencha-touch
Those of you who have designed iOS native apps are used to fixed-width and -height images that are positioned and aligned in the Interface Builder (or using code). Designing mobile Web apps is different: you’re designing for the browser again, just as you would for a typical website.
What does this mean? It means you can take advantage of a lot of cool CSS design tricks. In many cases, you can design an entire interface using CSS instead of images.
Learning To Use The :before And :after Pseudo-Elements In CSS - Smashing Magazine
►http://coding.smashingmagazine.com/2011/07/13/learning-to-use-the-before-and-after-pseudo-elements-in-css
If you’ve been keeping tabs on various Web design blogs, you’ve probably noticed that the :before and :after pseudo-elements have been getting quite a bit of attention in the front-end development scene — and for good reason. In particular, the experiments of one blogger — namely, London-based developer Nicolas Gallagher — have given pseudo-elements quite a bit of exposure of late.
Sur Seenthis, c’est utilisé par exemple pour afficher la langue de la destination d’un lien (hreflang).
Bizarre, j’ai un bug sur ton lien quand je clique dessus (sur 2 ordis et 2 navigateurs différents), erreur 403 puis c’est ok si je recalcule la page... Oo
Je suspecte que Smashing Mag bloque le referer Seenthis (juste nous ?).
En effet, il semblerait bien que ce soit un filtre sur le référant. :-(
How To Build A Media Site On WordPress (Part 1)
►http://coding.smashingmagazine.com/2011/06/02/how-to-build-a-media-site-on-wordpress-part-1
WordPress is amazing. With its growing popularity and continual development, it is becoming the tool of choice for many designers and developers. WordPress projects, though, are pushing well beyond the confines of mere “posts” and “pages”. How do you go about adding and organizing media and all its complexities? With the introduction of WordPress 3.1, several new features were added that make using WordPress to manage media even more practical and in this tutorial, we’re going to dive in and show you how.