Comme on nous l’avait promis pour cette Google I/O, cette conférence est vraiment dédiée aux développeurs ! Android Studio est le dernier environnement de développement de l’entreprise pour Android et apporte beaucoup de changements qui devraient profiter tant aux développeurs qu’aux utilisateurs. Android Studio, basé sur IntelliJ, fonctionne tel un éditeur WYSIWYG pour la création d’applications. Vous pouvez apporter des modifications telles que la disposition et la langue, tout en voyant le changement dans la vue de prévisualisation en temps réel sur la droite, et ce pendant que vous peaufiner les réglages. Google espère que cela aidera les développeurs à créer des applications plus belles avec un minimum d’effort.

L’une des caractéristiques les plus intéressantes présentées a été un moyen simple pour les développeurs d’adapter des applications pour différentes tailles d’écran, qui pourraient conduire (et profiter) à de nombreuses applications davantage optimisées pour les tablettes sur Android. Le manque d’applications de qualité sur les tablettes est aujourd’hui une plaie pour Android et est souvent la raison la plus convaincante pour choisir un iPad que n’importe quelle tablette concurrente embarquant l’OS mobile du géant de la recherche.

De plus, l’équipe derrière ce nouveau projet a également dévoilé une nouvelle console de développement, qui s’avère être un moyen pour les développeurs d’en apprendre davantage au sujet de la performance de leurs applications sur le Google Play Store. La console proposera des techniques d’optimisation, dans le but d’aider les développeurs à atteindre un public plus large telles que la traduction de l’application dans une langue supplémentaire ou la conception pour une utilisation aussi bien sur des tablettes.

L’avantage ici pour les développeurs est évident, mais les utilisateurs disposeront également de quelques avantages, dont la principale sera des applications bien conçues afin que Android puisse fonctionner à la fois sur un smartphone et une tablette.

Google a annoncé la semaine dernière le lancement de Discover DevTools, un cours interactif de l’école de formation – Code School – qui enseignent aux développeurs comment tirer profit de suite de la puissance des outils de développement de Chrome, et des différentes ressources pour accélérer le développement et le débogage de vos applications Web.

Le cours est divisé en sept chapitres, dont chacun couvre un ensemble spécifique de caractéristiques dans les DevTools de Chrome. Chaque chapitre dispose d’un didacticiel vidéo qui est suivi par une série de « défis » qui vous mettront à l’épreuve, et ainsi venir valider ce que vous venez d’apprendre. Les DevTools Chrome seront intégrés dans les challenges eux-mêmes afin que les développeurs puissent se faire une idée de la façon de les utiliser tout en apprenant.

Alors que le cours est destiné à ceux qui ne connaissent pas les outils de développement de Chrome, Google affirme que les développeurs plus expérimentés voudront peut-être prendre des cours pour parfaire leurs compétences. La société affirme que les développeurs peuvent même trouver quelques fonctionnalités moins connues dans ces cours qui peuvent vraiment améliorer leur productivité.

Parmi quelques-unes des choses auxquelles vous pouvez vous attendre à apprendre au sein du premier cours, vous allez pouvoir comprendre comment gérer un flux de débogage pour passer d’une exception non interceptée à sa correction sans jamais rafraîchir votre application. En outre, le cours offrira un gain de temps en vous fournissant des astuces pour améliorer votre efficacité pendant le débogage CSS, et l’interprétation de votre réseau et les goulots d’étranglement JavaScript.

Vous pouvez consulter le premier tutoriel vidéo ci-dessous. Pendant que vous y êtes, n’hésitez pas à naviguer sur le site Web du cours pour commencer à en apprendre d’avantage sur les DevTools.

Mais, si vous avez déjà connaissance de ce qu’est l’HTML, c’est là que Google va vous venir en aide ! En effet, non pas en vous proposant de taper des mots-clés au sein de son moteur de recherche mais bien en vous proposant un nouveau tutoriel dans lequel la firme de Moutain View aborde les problématiques de ce langage.

Comme vous allez le découvrir dans la vidéo ci-dessous, les ingénieurs de Google ont de nouveau publié une vidéo, dans laquelle ils vous expliquent comment utiliser au mieux l’HTML5 et Google cloud Endpoint pour créer des Web Apps modernes qui peuvent fonctionner en mode déconnecté, tout en soutenant toutes les dernières technologies HTML5. Regardez le tutoriel vidéo ci-dessous, et suivez-le avec les diapositives disponibles depuis ce lien.

Annoncé lors de la Google I/O de 2012, Google cloud Endpoint permet de construire aisément des API scalables et optimisées au-dessus des application Google AppEngine pour les clients web et mobiles.

Connaissiez-vous cette technologie ? L’avez-vous déjà mise en œuvre dans des projets ? Quelques retours à faire concernant cette dernière ?

Un code optimisé pourquoi et comment ?

L’optimisation est aujourd’hui devenue un enjeu majeur pour les développeurs. Non pas qu’elle n’intéressait personne avant, mais elle s’est réellement démocratisée depuis que Google s’est fâché. En effet, en souhaitant un Web plus rapide, le géant de la recherche a pris des mesures radicales contre les sites qui ne disposent pas d’un chargement rapide. Autrement dit, il est nécessaire d’optimiser à 100% nos pages Web. Qu’il s’agisse des images, des scripts, ou encore du CSS tout y passe.

C’est d’ailleurs sur ce dernier point que l’article du jour se consacre. Afin de garder votre CSS « propre » il existe de nombreux outils tels que ProCSSor, une application de bureau pour Mac qui nettoie et compresse votre code, ou encore CSS Compressor, Code Beautifier et CSS Beautify.

Cependant, aucune de ces options ne peut nettoyer votre code CSS dans le but de supprimer les sélecteurs inutilisés afin de vous aider à garder un code allégé. C’est là que mincss entre en jeu.

Comme son créateur Peter Bengtsson l’explique, mincss est un outil qui, lorsqu’on lui donne une URL – ou plusieurs – télécharger la ou les page(s) et tout le code CSS associé afin de comparer chaque sélecteur dans le CSS pour savoir ce qui n’est pas utilisé. Le résultat final est le fichier d’origine avec ces sélecteurs CSS inutilisés – pas trouvé dans votre code HTML – retirés.

Dit plus simplement, si j’ajoute un style à un paragraphe de ma page HTML, puis je finis par remplacer ce paragraphe par une vidéo, je pense que les styles appliqués à mon paragraphe resteront inutilisés dans mon code CSS. Mincss permet de s’assurer que vous avez supprimé ces styles inutilisés pour garder au plus propre votre fichier de styles.

Bengtsson note que mincss est également particulièrement utile lorsque vous utilisez un lourd framework non personnalisé comme Bootstrap. Cependant, cet outil ne permet pas de prendre en considération les éléments créés par du code JavaScript.

Découvrez comment utiliser mincss depuis ce lien et pour en apprendre davantage sur le projet suivez ce lien.

Avez-vous d’autres outils pour gérer votre code CSS et plus particulièrement pour optimiser votre code ?

Il y a eu environ sept talks lors de la Edge Conference de cette année, et des questions importantes ont été abordées, donc si vous êtes un développeur Web il serait sage d’y jeter un œil. Vous pourriez même apprendre de nouvelles choses sur la façon de rendre votre site Web plus rapide, plus stable et plus accessible.

Franchement il y en a pour tout le monde alors c’est à écouter et également à partager sans limite !

Selon Yafoy, Timehub cible des « pigistes qui ont besoin de soumettre les factures basées sur le temps qu’ils passent sur GitHub ». Étant donné que GitHub a passé les 3 millions d’utilisateurs le mois dernier, il s’agit clairement d’une grande base d’utilisateurs potentiels.

Pour commencer, vous aurez besoin de vous connecter à votre compte GitHub, afin que Timehub puisse lire vos informations publiques, ou encore mettre à jour votre profil d’utilisateur et vos dépôts publics et privés.

Puis, une fois autorisée, vous allez pouvoir récupérer vos différents dépôts, et annoter vos commits avec le temps que vous avez passé sur chacun d’eux, remplissez les informations de votre société, telles que le nom, l’adresse ainsi que votre taux horaire, etc … Une fois ces étapes renseignées, générez votre facture. Vous pourrez l’envoyer par e-mail ou la télécharger au format PDF directement depuis la plateforme.

En faisant le suivi du temps passé sur chaque commit, si vous êtes un développeur vous voici un moyen facile de surveiller et de synthétiser vos travaux. Timehub se vante aussi comme être un moyen pour les développeurs – aka généralement les non-designers – de créer de belles « factures » avec peu de travail.

Qu’en pensez-vous ?

Cette fois-ci, le géant de la technologie s’adresse directement aux développeurs avec le lancement de Modern.IE, un service qui offre une collection d’outils libres destinés à aider les développeurs Web à « passer plus de temps à innover et moins de temps à tester ».

Modern.IE s’articule autour de trois outils : un « assistant » – report – qui scanne les sites afin de déceler les problèmes en fonctions des bonnes pratiques de codage, trois mois d’abonnement offerts chez BrowserStack afin de tester en live les sites – vous pouvez lire l’article dédié à ce service en cliquant sur ce lien, et un choix éditorial des meilleures pratiques. En outre, la société a également rassemblé des outils de virtualisation locaux et développé des add-ons pour BrowserStack sur Chrome et Firefox.

Selon le Directeur d’Internet Explorer, Ryan Gavin, le partenariat avec BrowserStack « is more of an opening note » qu’un accord final, qui fait allusion à la possibilité à plus long terme d’une offre libre qui est généralement de plus de 20 dollars par mois aujourd’hui.

D’autre part, il est à noter que l’outil de scan de Modern.IE est plutôt vague dans les résultats qu’il affiche, en partie pour des raisons de sécurité. Cependant, les développeurs peuvent contacter Microsoft pour obtenir plus de détails, comme la société le mentionne :

Pour des raisons de sécurité et de confidentialité, nous ne divulguons pas ces détails techniques sur le site. Au lieu de cela, les développeurs peuvent facilement nous contacter, recevoir ces informations, et obtenir de l’équipe d’IE un soutien technique sans frais

Le service met l’accent sur Internet Explorer, mais touche également d’autres navigateurs Web modernes. Mais quand il s’agit de navigateurs vieillissants, Gavin mentionne que l’attention de Microsoft de mettre l’accent sur IE était intentionnel. Les développeurs Web peuvent en apprendre davantage sur le site Modern.IE de Microsoft via ce lien.

Pour résoudre ce problème, les designers Wells Riley et Kevin Xu ont lancé Hack Design, un cours de design conçu spécialement pour les « hackers ». Alors que le site vient tout juste d’être lancé et que celui-ci a déjà lancé ces premières leçons, celui-ci compte aujourd’hui plus de 10 000 utilisateurs.
Le site a également décroché quelques partenariats intéressants afin de proposer des cours de qualités, tels que le fondateur de The Designer Fund, Enrique Allen, ou encore un ancien designer de Fitbit et Pinterest, Kerem Suer et le créateur de Skimm Luke Beard. Vraiment des talents confirmés et expérimentés.

À bien des égards, Hack Design est l’inverse de Codecademy Code Year, car il prévoit d’enseigner aux développeurs de quoi apprendre par la pratique le design avec des énigmes et des jeux stimulants. En bref, Riley veut faire de 2013, l’année du design pour tous les hackers.

Tous ces cours resteront disponibles et gratuits pour les utilisateurs et du contenu continuera d’être ajouté chaque semaine. Pour les non-développeurs qui cherchent à se plonger dans le design, ce cours est également intéressant de bien des manières !

Si vous souhaitez revivre les cours des deux dernière semaines, il vous suffit de vous diriger sur cette page. Au programme de la première semaine, « Qu’est-ce que le design ?, Pourquoi est-il important ? ». Vous y retrouverez une sélection pointue de ressources pour bien démarrer. Riley vient ainsi répondre à des questions existentielles sur le design, et notamment à quoi il sert ? « Ce n’est pas purement esthétique, ni totalement analytique et fonctionnel », mentionne t-il. Lorsque vous planchez sur l’élaboration du design de votre projet, « vous devez penser à l’harmonie de celui-ci – ce que certains appellent une approche globale », ajoute Riley. Comme il l’indique dans son cours, c’est vraiment la seule façon pratique d’aborder les problèmes de design.

La seconde leçon créée par Kerem Suer nous permet de nous plonger dans les règles de la typographie, et ce qui est vraiment important. Ainsi nous allons découvrir rapidement ce qu’est la typographie, et comment celle-ci doit être pensée que ce soit en termes de font, de taille ou encore de lisibilité. Vraiment intéressant !

Le prochain cours vient d’être dévoilé aujourd’hui : The Amazing New Mobile Web ! En attendant ce dernier, vous avez quelques lectures à rattraper

Que pensez-vous de ce service ? A t-il de l’avenir ? Ne serait-il pas judicieux de lancer un équivalent en France ?

Les futurs travaux permettront d’apporter d’autres outils de test, et se grefferont au projet sous la forme de plugins, permettant ainsi de garder un « noyau dur ».

La Fondation Mozilla a commencé le développement du framework avec sa propre équipe, comme le souligne Yvan Boily, développeur en sécurité : « Nous voulons que nos développeurs puissent faire des choses horribles aux applications et aux services qu’ils développent, et nous voulons que ce soit aussi facile que la pression d’un bouton ».

En termes pratiques, Mozilla envisage de créer un outil qui permettra l’automatisation de base pour une gamme d’outils de sécurité, avec des configurations intelligemment sélectionnées afin de facilité son utilisation. De plus, la Fondation souhaite également bien penser les options de configuration pour permettre à l’utilisateur de configurer toute une gamme d’outils en modifiant un petit ensemble de valeurs.

Bien sûr, un inconvénient potentiel d’un outil qui trouve des faiblesses dans une application web, c’est que les informations retournées pourraient être utilisées par des personnes malveillantes qui voudraient pirater le site. Pour cette raison, Minion – le nom qu’à donné Mozilla à ce projet – est conçu pour être très sûr, et quand une requête est faite pour analyser un site Web, le service demandera aux exploitants des sites Web s’ils ont demandé celle-ci.
Par ailleurs, il est essentiel que le framework soit très sécurisé, puisque ce dernier contiendra des données sensibles comme des informations sur les problèmes de sécurité les plus répandus.

Si vous voulez en savoir plus sur l’utilisation de Minion et écrire quelques plugins pour apporter vos compétences et votre savoir à ce projet, je vous recommande de visionner cette vidéo donnant des détails sur le framework :

Selon la Fondation, Minion a été développé pour combler le fossé entre les développeurs et les testeurs de sécurité. Actuellement Minion est disponible uniquement pour une utilisation interne au sein de Mozilla, mais comme il s’agit d’un projet open source, son code source est disponible sur Github.

Outre le fait que c’est une excellente nouvelle pour tous les développeurs qui souhaitent sécuriser leur application Web ou même leur site tout au long du développement de celui-ci afin d’être conscient le plus tôt possible des éventuels problèmes, c’est aussi un formidable point de départ pour sensibiliser et s’informer sur les problématiques de sécurité.

Que pensez-vous de Minion ? Est-ce un projet sur lequel vous allez pouvoir vous appuyer ?

GitHub est un service web d’hébergement et de gestion de développement de logiciels, utilisant le programme Git. Ce dernier est un élément crucial de la conception Web, que ce soit en terme de flux, de développement. Malheureusement, il y a encore beaucoup trop de gens qui ne le connaissent pas.

Même si vous utilisez une interface utilisateur pour GitHub – je recommande Gitbox sous Mac – alors quoi de mieux que de disposer d’un cheat sheet Git ? C’est en tout cas ce que je vais vous proposer ci-dessous. Il s’agit d’un ensemble concis de notes utilisées pour une référence rapide.

Si vous aimez la saisie en ligne de commande, c’est indéniablement un must have, incluant les termes tels que clone, branch, push, etc … C’est vraiment un univers de termes qu’il est important d’acquérir afin d’avoir une compréhension conceptuelle de ce qui se passe avec GitHub, et comment vous l’utilisez.

Assez de mes divagations SEO, voici l’infographie en question :

Cette grille visuelle est facile à parcourir, et va être un excellent moyen de mémorisation pour tous… L’aspect le plus utile de tous, est qu’elle est prête à être imprimée pour vous permettre de l’épingler sur votre mur afin de les parcourir rapidement et facilement…

Outre cette cheat sheet, sachez qu’il existe également tryGit, qui va s’avérer indispensable pour tous les développeurs qui veulent en apprendre davantage sur le développement, et plus particulièrement tout ce qui tourne autour de Git.
De plus, vous pouvez retrouver un mémento « Git à 100% » chez Eyrolles dans lequel les auteurs Raphaël Hertzog et Pierre Habouzit abordent la gestion de versions et l’évolution de données. L’essentiel à savoir est abordé : de la configuration, aux principales commandes et enfin des conseils sur les bonnes pratiques. Également à garder sous le coude !

Voilà de quoi vous occuper efficacement et comme toujours en apprenant ! Autrement dit, indispensable pour tous ceux qui souhaitent progresser individuellement…