Les nouveautés HTML 5.1

Le W3C (World Wide Web Consortium) à officialisé le 1er novembre 2016 la version 5.1 du HTML. Le développement de cette version 5.1 avait débuté le 17 décembre 2012 et été validé le 1er novembre 2016. Nous allons voir dans ce post les principales nouveautés disponibles avec la version 5.1.

Tout d'abord vous pouvez accéder ici à un tableau qui récapitule les nouveautés et les améliorations sur les anciens composants.

Devoxx 2017 : Retour sur « Building Secure Angular Applications »

J’ai eu la chance de participer cette année à la 6ème édition du Devoxx France. Je vous propose dans cet article de revenir sur une des conférences que j’ai particulièrement appréciée dont le thème était "Building Secure Angular Applications" présentée par Philippe De Ryck. Philippe De Ryck est expert en sécurité, a un doctorat en sécurité web côté client et est l'auteur du livre "Primer on client-side web security". Il est par ailleurs membre de l'organisation SecAppDev.org.

De plus en plus d'applications utilisent aujourd'hui les frameworks AngularJS et Angular 2 pour le développement du front-end. Philippe De Ryck nous a donc présenté comment sécuriser ces applications en 4 parties :

  • Que faire contre le cross-site scripting (XSS)
  • Se protéger contre le code non-vérifié récupéré via d'autres serveurs
  • Reprendre le contrôle avec le Content Security Policy (CSP)
  • Sandboxer le code non-vérifié intégré dans une iframe

Best Practices AngularJS

AngularJS-large

 

Bien que la première version stable d’Angular2 soit sortie mi-septembre 2016, AngularJS reste très populaire parmi les développeurs front-end. Sa stabilité et sa puissance ne sont plus à démontrer et sont des alliés de poids dans la création d’applications à l’interface riche et aux nombreuses interactions avec l’utilisateur.

Néanmoins, la prise en main de cette technologie peut s’avérer longue et frustrante, notamment à cause de concepts tels que les directives ou encore le « two-way data binding ». Lorsque le framework n’est pas complètement maîtrisé, il en résulte une application peu optimisée voire trop lente dans certains cas, et dont le code n’est pas clair.

Nous allons donc voir dans cet article quelques best practices permettant d’optimiser les performances et la maintenabilité d’une application utilisant AngularJS.

Introduction au Framework Cappuccino

Le Framework

Le Framework Cappuccino, développé par la société 280north, est l’un des nombreux Frameworks à proposer une approche orientée application pour le web. Il a pour but de proposer un langage et une façon de travailler en adéquation avec l’esprit « Application desktop », dans le sens où le développeur n’aura jamais à manipuler directement de HTML ou de CSS, le langage fourni par l’application se chargeant de générer l’interface.

Simplifiez vos vues avec KnockoutJS

Pour beaucoup d'entre nous, la réalisation de sites Web n'est pas très complexe à mettre en oeuvre. L'utilisation classique de MVC rend l'industrialisation de sites Web plus facile. Cependant, nombre d'entre nous se confronte à leur pire ennemi : Le JavaScript. En réalité, personne ne peut y échapper, ne serait-ce que pour la manipulation des éléments du DOM. De plus, aujourd’hui, de nombreux Frameworks JS existent pour faciliter la prise en main et le développement de pages web. KnockoutJs (KO) fait partie de ces Frameworks.

Mini-site (un site monopage à onglets) html – css3

Une application web monopage (en anglais single-page application ou SPA) est une application web accessible via une page web unique. Le but est d'éviter le chargement d'une nouvelle page à chaque action demandée, et de fluidifier ainsi l'expérience utilisateur. Deux méthodes existent pour ce faire : soit on charge l'ensemble des éléments de l'application (contenu, images, CSS et JavaScript) dans un unique fichier HTML, soit on récupère et affiche dynamiquement les ressources nécessaires en fonction des actions de l'utilisateur. Le terme a été introduit par Steve Yen en 2005. (Wikipédia)

Nous n'avons qu'une seule page html contenant plusieurs onglets.

Utiliser fullcalendar avec Angular 2

logo

Fullcalendar est un plugin jQuery très célèbre pour la gestion des rendez-vous du côté client. Il peut interagir avec des frameworks Javascript. Avec les fonctionnalités fournis par AngularJs 1, nous pouvons facilement interagir avec fullcalendar, enregistrer des dates de rendez-vous via un Web Service en utilisant l’Ajax. Mais dans notre article, nous allons voir comment le faire avec Angular 2. (Télécharger ou cloner les exemples)

Il y a deux approches que nous allons étudier avec le plugin Fullcalendar de jQuery:

  • La séparation de la logique de jQuery et Angular 2
  • L’utilisation d’Angular 2 seulement. 

Ajouter des effets de transitions sur les contenus avec un Slider

slider-image

Le fait

Aujourd'hui, toute page d'accueil d'un site qui se respecte contient un slider (ou carrousel) qui montre des produits phares, des actualités mises en avant ou simplement des activités maitrisés, selon sa vocation (e-commerce, blog, corporate ….). En plus, les contenus des slides s'affichent progressivement avec des effets de transitions qui nous éblouissent parfois. Nous pouvons obtenir ce résultat en utilisant un plugin. Un des plus populaires est par exemple Slider revolution : très complet, puissant et existe en plugin WordPress, mais payant.

Dans notre article, nous allons vous montrer comment nous pouvons obtenir à peu près le même résultat en utilisant des composants gratuits disponibles sur la toile.