CrEv's blog

Aller au contenu | Aller au menu | Aller à la recherche

Mot-clé - html

Fil des billets

2012 déc. 6

Ecrire une page web de nos jours, suite des aventures

Il faut croire que l'épisode précédent vous a intéressé (mon petit doigt me dit qu'il est même passé sur un incubateur d'excellence aux dires des mytiloïdes qui s'y trouvent). Voici donc la suite tant attendue.

    Comment ça une suite ?

Ben vous croyez quoi ?! On fait de la page oueb monsieur ! C'est un sujet sérieux ! Pas question de s'arrêter avec juste un peu de Haml, Sass, Ruby, Rake et git. Cela suffirait à des développeurs inexpérimentés, pas pour des vrais bons comme nous !

Lire la suite...

2012 déc. 4

Ecrire une page web de nos jours

Edit: allez voir en fin d'article, il y a du bonus !

J'aurais aussi pu l'appeler Le html c'est surfait !

Ces derniers jours, je me suis mis à la création d'une page web. En gros, il s'agit d'une simple page, totalement statique (pas de code serveur ni de code côté client). Allez, on va quand même mettre un peu de css histoire d'avoir un peu de style, et pour que ça reste relativement sobre, pas d'images.

Logiquement j'aurais pu prendre un éditeur de texte tout simple et écrire mon css et mon html (la page est vraiment petite).

Mais non, malheureux ! Tout le monde sait bien que l'html c'est surfait aujourd'hui !

Voici donc dans la suite comment créer une petite page web tout simple en utilisant Haml, Sass, solarized, Font Awesome, ruby, rake et git, le tout en utilisant Sublime Text 2.

Ha oui, et histoire que ce soit drôle, vous verrez que j'ai collé pleins de liens partout pour faire genre, spéciale dédicace à... heu non, allez, restons sympa ;-)

Lire la suite...

2012 sept. 20

De tout, de rien, des bookmarks, du bla bla

Introduction

Pfiou, la dernière news remonte à un moment quand même.... Bon, je vais essayé de reprendre le rythme même si mon nouveau boulot ne m'en laisse pas vraiment le temps pour le moment...

Quoi qu'il en soit voici quelques news en vrac, il y a probablement des choses qui datent un peu mais ça devrait le faire quand même.

Bonne lecture !

Un peu de contenu

Développement

Vous connaissez probablement tous atom. S'il est plutôt souvent utilisé il reste relativement lourd et complexe. Voici donc hAtom qui est un microformat basé sur un sous ensemble d'atom mais en étant plus orienté vers les articles de news, les blogs, etc. Je ne sais pas si ça a un intérêt réel mais je trouve l'idée assez intéressante tout en prenant en compte l'existant (atom) plutôt que de vouloir tout réinventer.

En tant que sujet quelque peu récurrent, voici des articles au sujet de go (le langage). Tout d'abord un petit exemple, une petite introduction au langage et quelques libs : quick and clean in go. Ce que je trouve vraiment intéressant est la facilité, rapidité avec laquelle on se retrouve avec un serveur web, un moteur de template, une connexion à mongodb, etc. Plutôt pas mal pour un langage initialement plutôt système.

Deuxième article, cette fois expliquant comment créer un chat avec go et les websockets HTML5.

Ensuite, un petit retour de la part de bitly et de leur usage de go, Go go gadget.

Et enfin, voici un ensemble d'outils (un framework ?) web pour go, Gorilla.

Tout ceci me donne sacrément envie de tester Go. Je pense que ça va être, vraiment, le prochain langage que je vais apprendre (outre le fait que je recommence le php, le ruby et que je début en coffeescript...).

Pour continuer dans les langages de développement, voici une petite partie dédiée à javascript et au web (je ne pouvais pas faire sans ;) )

Tout d'abord voici un article qui parle de garbage collector en javascript. En gros, comment écrire du code qui va permettre d'être bien pris en compte par le garbage collector. C'est un sujet qui est peu abordé en javascript, mais avec l'augmentation des performances et l'augmentation de l'usage de ce langage, ça devient vraiment intéressant de s'en préocuper.

D'ailleurs, si vous souhaitez vous améliorer en javascript, deux ressources peuvent vous intéresser. Tout d'abord un superbe bouquin (en CC NC-ND) sur les design patterns en javascript. Ce livre est plutôt complet, et plus qu'un livre à lire d'un bloc c'est je pense une bonne référence à garder sous le coude en cas de besoin. Si jamais vous souhaitez lire d'autres livres sur javascript, voici par contre la référence ultime : JSbooks. Il liste une belle petite collection de livres (libres/gratuits) sur javascript ou coffeescript. J'aimerais vraiment pouvoir faire des doubles journées pour avoir le temps de tout lire...

Maintenant que vous êtes au fait de javascript, vous vous demandez probablement comment packager vos applications web ? Non ? Heu... Bon c'est pas grave, twitter s'est un peu posé la question et ils ont sorti bower. Bower est un outil générique pour résoudre des dépendances. Il peut récupérer directement depuis git et n'est pas spécifique à javascript (même si c'est l'une des cibles privilégiées). Un package peut aussi bien contenir du javascript que du css, de l'html, des images, etc. Il est plutôt bas niveau, utilise node.js (et donc npm node package manager pour s'installer). Je ne l'ai pas encore testé mais ça me semble plutôt intéressant. Twitter est entrain de migrer son frontend pour utiliser bower. Comme outil utilisant déjà bower, on retrouve yeoman dont j'avais déjà parlé et qui est désormais public. Je n'ai pas non plus eu le temps de le tester (doubles journées, toussa) mais ça figure en très bonne position sur ma todo list. Quelqu'un l'a-t-il déjà testé et pourrait faire un retour ?

Mais il n'y a pas que le javascript sur le web. Il y a aussi le CSS ! Voici donc quelques liens plutôt sympa sur le sujet. Tout d'abord, une mine d'information sur linear-gradient. Si vous ne saviez pas comment utiliser cette propriété vous n'avez désormais plus aucune excuse. Voici également une présentation des nouvelles possibilités des régions CSS. J'attends réellement ça avec impatience tant le gain est important. Pour avoir bosé pendant un temps du côté de l'édition et donc avoir eu à cotoyer ce type de bloc, c'est vraiment une très bonne avancée pour la publication sur le web. Et si vous voulez avoir des designs qui ont de la gueulle, voici une présentation sur les possibilités typographiques en CSS. Allez la voir, ça prend pas longtemps mais c'est vraiment instructif.

Maintenant, il faut dire que de plus en plus on utilise des préprocesseurs CSS. L'un des plus connus est SASS, qui vient de passer en version 3.2. Vous trouverez pas mal de ressources sur le net, dont par exemple cette liste de mixins à garder sous le coude pour ne pas réinventer tout le temps la roue.

Misc

Et sinon, en vrac, voici une présentation sur le fonctionnement de github, Google qui prévoit d'arrêter le support d'IE8, une présentation sur la CLI. Voici également une explication du design de la page de status d'heroku

Graphisme & co

Voici un article réellement intéressant sur les couleurs. J'ai hésité un peu à le placer dans les liens de développement mais finalement il a plus sa place ici car traite du choix de couleurs à partir d'algorithmes. Un très bon article à lire, vraiment.

Je ne résiste vraiment pas à vous partager ce dessin réalisé au stylo à bille, c'est juste impressionnant !

Liste des liens présentés

Développement

Misc

Graphisme & co

2012 mai 24

Liens (en vrac)

L'intégration continue saybien !

Oué, mais si on a un serveur|cluster d'intégration et qu'on utilise un DCVS, avec des branches, ben c'est pas si simple à mettre en place. Pourtant, l'usage des branches est quelque chose de très important pour développer, c'est vraiment une bonne manière de faire les choses. Mais souvent on se retrouve avec des branches qui ne sont pas sur le serveur d'intégration car il faudrait dupliquer tous les projets, ça devient très vite le bordel. En gros, jankins (en l'occurrence) n'est pas super adapté à ça.

Mais v'la't'y pas que certains se sont attaqués au problème. Ce qui a donc donné naissance à Jenkins Khan ! L'objectif étant vraiment de gérer l'ensemble des branches d'un même projet (enfin de plusieurs quoi) pour avoir un meilleur suivi de ces branches et favoriser ce fonctionnement.

Il faudrait vraiment que je le teste rapidement, ça me semble particulièrement intéressant !

Un article très intéressant autour de l'agilité chez Google. C'est toujours enrichissant de savoir comment ces entreprises mettent en oeuvre de type de méthode, et de voir entre autre à quel point ils adaptent les méthodes et surtout ne s'enferment pas dans des carcans rigides (y compris en appliquant "bêtement" une méthode agile précise sans l'adapter)

Si c'est pas beau le monde des SSII... Mais au delà de ces sociétés, que penser de leurs "clients". Oui, vous savez, toutes les entreprises (souvent grosses) qui sont clientes des SSII. Car c'est aussi là une part du problème, ces entreprises qui pensent que l'informatique c'est comme réparer un pc, qu'il n'y a pas besoin de payer cher un développement et qui se plaint que le logiciel ne fonctionne pas correctement. Les SSII c'est, de la manière dont c'est réalisé aujourd'hui, clairement pas la bonne chose à faire de mon point de vue. Mais ce ne sont pas les seuls fautifs.

Pour finir : vive les vrais éditeurs de logiciels, petits ou grands !

Facebook entre en bourse... oué ben je pense qu'on va en entendre parler pendant un bon moment :)

o_O

Vous croyez Yahoo! mort ? Il n'en est rien, ils viennent d'ailleurs de sortir un nouveau navigateur web, Axis. Entre autre chose il y aurait une fonctionnalité bookmark type "read it later" qui pourrait être intéressante. Bon, va falloir tester, même si je crains un peu sur le succès réel d'un nouveau navigateur dans l'écosystème actuel (enfin je veux dire un nouveau navigateur doit apporter des choses réellement nouvelles, et pour le coup Yahoo! ne bénéficie pas non plus de l'aura que Google a pu avoir)

Edit : Oué bon, pas la peine. C'est pas un vrai navigateur, c'est "juste" une extension qui vient se greffer au browser courant. Ca te vire la page par défaut pour les nouveaux onglets sous chrome sans vraiment te demander ton avis. Franchement, aussitôt installé, aussitôt supprimé.

Vous voulez recruter un informaticien en France ? Allez lire ce petit article !

Nan mais vraiment, allez le lire et vous comprendrez pourquoi c'est pas simple, pourquoi vous avez des personnes peu motivées, des produits pas toujours bien finis, etc.

Une liste de 6 points, plutôt simples, sur ce qui fait un bon environnement pour un développeur.

Pour ma part j'apprécie particulièrement le choix de clavier/souris. Il y a tellement de modèles, mais aussi tellement de ressenti différent suivant les personnes, le tout pour un coût somme toute modique (comparativement à un salaire de développeur) que je ne comprend pas qu'on fournisse si souvent du matériel basique inergonomique et relativement ... inconfortable. Faut pas oublier que c'est quand même une composante primordiale des outils nécessaires.

Vous faites du BDD vous ? Non ? Pourquoi ? Voici un document intéressant montrant quelques causes d'échec du BDD.

Comment avoir des ressources en cache tout en permettant de les recharger au besoin... la réponse dans l'article.

Une infographie bien sympa qui liste les avantages à travailler dans les "grandes" boites d'informatique comme Google. Il serait intéressant de pouvoir rajouter Microsoft par exemple. Y'a pas à dire, ça donne plutôt envie !

Un article, long, complet et intéressant sur l'interface de Windows 8. Mieux que ça, ça présente rapidement l'historique de l'interface de Windows, depuis les toutes premières versions.

On peut ne pas aimer l'interface de Windows, mais ils essaient (c'est assez récent) d'améliorer petit à petit les choses, et c'est cool (et Windows 7, bien que pas du tout révolutionnaire, est ma fois pas si inintéressant que ça).

Sublime Text 2 est un très bon éditeur de texte (malheureusement pas libre) multiplateforme (un vrai concurrent à TextMate). Atoum est un framework de tests unitaires pour PHP. Ben voici simplement un plugin pour ST2 permettant d'exécuter atoum ! Intéressant, faudrait vraiment que j'essai tout ça (enfin atoum surtout)

Ce site comporte une collection de schémas, de tags html, que les webmasteurs peuvent utiliser pour créer leurs pages. Le tout est organisé de manière hiérarchique, pensée entre autre pour le référencement et les moteurs de recherche. Plutôt bien foutu, intéressant, orienté html5. A avoir de côté lorsqu'on crée de nouvelles pages, notamment avec des données bien organisées (telles qu'un annuaire, des agences, des adresses, etc).

2012 mar. 30

Links

Petite liste de liens des trois derniers jours :

Ca c'est une technique CSS qu'elle est bien ! Comment faire un menu déroulant, au click, uniquement en CSS ! Bon, c'est évidemment pas compatible IE, mais par contre c'est vraiment bien. La non utilisation de javascript fait que la page est plus légère, et fonctionne même pour ceux qui le désactive (oui ça existe). Dans tous les cas c'est vraiment sympa.

Deux très très bons articles sur comment créer une application web, pour iphone, qui mime le plus fidèlement possible l'apparence d'une application native. Vraiment passionnant !

Tron, en javascript, en 219 octets. Qui dit mieux ?

Un peu de CSS, cette fois sur la gestion de l'espace minimum autorisé pour du texte lorsqu'on insère une image (en float).

On a supprimé les tableaux de la mise en page web... pour finalement faire arriver la mise en page sous forme de grille ! Bon ok, y'a pas à dire c'est quand même mieux, et ça respecte surtout la différence entre données et style/mise en page. Maintenant, faudrait que tout le monde supporte ce mode de positionnement...

Une superbe implémentation de "timeline" en javascript. Vraiment bien réalisée, vous noterez la possibilité de donner en entrée ... un google doc !

Une petite surcouche à git afin d'avoir une utilisation un peu plus simple.

Les "sources map" permettent de faire le lien entre code source javascript initial et la version compilée. Autrement : ça permet de debugger du code minifié / compilé !

Et si bientôt on n'avait plus besoin de less, google stylesheet, sass, etc. Car désormais on peut faire des calculs dans les feuilles de style. Qui n'a jamais voulu écrire par exemple : width: calc(50% - 10px) De mon point de vue une avancée majeur pour CSS

Vous aimez le JS ? Vous aimerez alors cette présentation ;-)

Ca tombe bien, on en a en partie parlé en Réunion d'itération. En résumé, en quoi le jour homme est contraire aux principes agile (oui c'est vraiment très résumé)

Un "émulateur" d'android pour PC. Ca fait appel à la virtualisation, et ça permet d'exécuter les applications Android. A tester, ça peut être sympa si les performances et la fidélité sont au rendez-vous.

Ha ha ! la surréflexion ! A lire, j'en dis pas plus sinon ce ne sera pas drôle.

Petite histoire de l'utilisation du Space Pen

Impossible de passer sous silence cette information capitale : Go, le langage de programmation de Google, vient de passer en version 1. Maintenant, à voir où cela va vraiment mener, quels projets vont petit à petit l'utiliser, etc.

Un article assez sympa sur les transitions effectuées au niveau design web. En gros, on a des écrans avec une bien meilleur précision, des résolutions de plus en plus grande. Que faire, comment adapter les pratiques pour exploiter au mieux ces changements et anticiper l'augmentation encore probable des résolutions.

2012 mar. 26

Links of the day

Voici quelques effets présentant le titre et la description d'une image lors du survol. A noter que ces effets sont entièrement réalisés en CSS3, en utilisant les transitions et les animations. Plutôt sympa et bien réalisé, pas disponible sur tous les navigateurs mais ça peut être vu comme un mode "avancé" bien sympa.

Combien de seconde durera la dernière minute du 30 juin 2012 ? - mouarf, trop facile, tu nous prends vraiment pour des billes, 60 secondes et puis c'est tout ! - FAUX !

Et oui, cette minute durera 61 secondes ! Ha ha !
Pour tout savoir sur cette seconde intercalaire (qui d'ailleurs pourrait être négative bien que ce ne soit pas produit) suivez le lien ;-)

Redis est une base 'NoSQL'. Voici un article présentant le fonctionnement de la persistances des données dans Redis. Plutôt intéressant, ça permet de comprendre tous les mécanismes mis en oeuvre afin d'être sur que les données sont bien correctement écrites et persistées afin de pouvoir être relues après.

Et si changer de police pouvait aider les dyslexiques à lire ?

Ha ha, vous aussi vous ne comprenez pas comment on peut, encore aujourd'hui, planter son passage à l'heure d'été ?
Comment Free (mais aussi Orange) font des boxes qui ne se mettent pas à l'heure correctement ? (et par la même font foirer les enregistrements). Selon free, il ne s'agit pas d'un dysfonctionnement (heu oué, mais on appelle comment un fonctionnement incorrect alors ?)
Alors, d'où ça vient cette histoire ?
Il s'agit, en réalité, d'un bug dans µClibc, la bibliothèque C standard destiné à l'embarquée, qui serait présente dans les boxes de free et orange. Le problème c'est qu'un "correctif" a été intégré pour régler un problème de changement d'heure les années bissextiles. Cool, un correctif ? Et non, car il amène son propre bug. Mais en vous inquiétez pas, il ne se produit que tous les 28 ans... dont cette année ! En gros, si le changement d'heure intervient pile 7 jours avant la fin du mois, c'est mort. Bon, il reste deux solutions : soit ils corrigent le bug, passent une mise à jour et on en parle plus. Soit ils attendent 7 jours, et nous prennent un peu pour les pigeons qu'ils aiment dénoncer lorsque ça les arranges...
http://old.nabble.com/-PATCH--libc%...

2012 mar. 21

Vrac

Et si on collait quelques news ? Peut-être qu'un jour je tiendrai se blog en vie sur une période suffisamment intéressante ;-)