Don't use flexbox for overall page layout When I was building this blog I tried to use flexbox for the overall page layout because I wanted to look cool and modern in front of my peers. However, like all of my other attempts to look cool and modern, it didn't really work. Why? Well, take my hand and follow me into the next section… Update: Don't let this post scare you off flexbox, it's one of the best layout systems we have on the web today. Flexbox vs Grid Here's a basic three column design: Here it is mocked up using flexbox (works in all modern browsers), and here it is using grid layout (works in IE10+). Browsers can progressively render content as it's streamed from the server, this is great because it means users can start consuming content before it's all arrived. It's difficult to spot too, you're unlikely to notice it while developing locally, or via a super-fast connection. Flexbox: content dictates layout Here's a simplified version of the layout: Grid: container dictates layout (to some extent) Further reading
Online CSS Unminifier - Peter Coles You may be aware of js unminifiers or beautifiers (such as jsbeautifier). I found myself wanting something similar for making minified CSS legible, so I built a simple tool using javascript to unminify CSS. It uses several regular expressions (and sometimes a split followed by a join) to generate the clean code and it also lets you specify tab width. <p>*The css unminifier requires javascript to work. Note: the easiest way to look a site’s CSS is to use a tool like firebug on firefox, but sometimes you still might want to view the full source to see any browser-specific hacks that won’t appear in firebug or to just take a peak at how someone may organize his or her code. Update: June 2011—It’s now all the rage to drop the semicolon from the last declaration in a CSS rule (right before the closing brace), so I updated the unminifier to handle this case and put an example in the sample CSS.
3 plateformes pour démarrer, apprendre ou vous perfectionner dans les technologies Web Que vous soyez un total novice souhaitant se réorienter professionnellement, un intégrateur voulant acquérir des bases en Javascript, ou un développeur cherchant des cours de qualité pour aller plus loin, l'article du jour devrait vous intéresser ! Le développement Web est une discipline assez dure à prendre en main, et exigeante avec les professionnels voulant se maintenir à jour. Si malgré tout c'est une branche qui vous attire, j'ai sélectionné pour vous 3 plateformes qui vous permettront d'apprendre, diversifier ou perfectionner vos connaissances en développement web. Codecademy Je ne sais pas si j'ai encore besoin de présenter codecademy vu le succès de cette plateforme. Gratuite, bien faite et vous permettant de vous mettre à la page sûr de nombreux langages, codecademy est sans doute un des meilleurs endroits sur le Web pour commencer à apprendre la programmation. CodeSchool Egghead Le moins que l'on puisse dire est que la plateforme n'a pas de cours pour "débutant" en programmation.
Online Python Tutor - Learn programming by visualizing code execution Wakkos/CSS-Guidelines G CSS Grid Layout introduces a two-dimensional grid system to CSS. Grids can be used to lay out major page areas or small user interface elements. This article introduces the CSS Grid Layout and the new terminology that is part of the CSS Grid Layout Level 1 specification. The features shown in this overview will then be explained in greater detail in the rest of this guide. What is a grid? A grid is an intersecting set of horizontal and vertical lines – one set defining columns, and the other, rows. Fixed and flexible track sizes You can create a grid with fixed track sizes – using pixels for example. Item placement You can place items into a precise location on the grid using line numbers, names or by targeting an area of the grid. Creation of additional tracks to hold content You can define an explicit grid with grid layout. Alignment control Grid contains alignment features so we can control how the items align once placed into a grid area, and how the entire grid is aligned. Grid Tracks
Icon Font & SVG Icon Sets ❍ IcoMoon JavaScript Tools of the Trade: JSBin We've all been there. There are times when you simply want to throw some JavaScript code up and see how it works. Sure, you could go through the hassle of: Setting up a dedicated directoryCreate a file with markupFinding the latest version of your favorite libraries, downloading them and including them in your codeCreating your stylesheetConfiguring your webserver That seems like an awful lot of work just do do some simple code testing. In this tutorial, I'd like to go over one of my favorite tools for interactive JavaScript testing, JSBin. As I mentioned previously, in many cases you simply need to test a small subset of JavaScript code. What JSBin offers is a browser-based user interface where you can enter: HTML markupCSSJavaScript ... and get immediate feedback based on your code. Let's look at these tools a little more closely. JSBin was created and is actively maintained by well-respected developer Remy Sharp. ... provides the following results: it: jQueryDojoModernizrBootstrap
Enlazando Hojas de estilo con HTML Hay muchas maneras de enlazar hojas de estilo a HTML, cada una con sus ventajas y desventajas. Se han introducido nuevos elementos y atributos HTML para permitir la fácil incorporación de hojas de estilo en documentos HTML. Enlazándose a una hoja de estilo externa Una hoja de estilo externa puede ser enlazada a un documento HTML mediante el elemento LINK de HTML: La etiqueta <LINK> se coloca en la cabecera HEAD del documento. Las hoja de estilo externas no debrían contener ninguna etiqueta HTML como <HEAD> o <STYLE>. podría usarse como una hoja de estilo externa. La etiqueta <LINK> también toma un atributo opcional MEDIA, que especifica el medio o medios en que debería aplicarse la hoja de estilo. Medios múltiples se especifican mediante una lista separada por comas, o por el valor all. Netscape Navigator 4. ignora incorrectamente cualquier hoja de estilo enlazada o incrustada declarada con valores MEDIA diferentes de screen. persistente Un estilo preferido alterno Estilo en línea Atributo CLASS