Angular-cli et Sass

Angular Cli

Démarrer un projet Angular sous Sass

Angular Cli

Pour tous ceux qui souhaitent utiliser Angular-cli avec Sass facilement voir la démarche:

Lorsqu’on travaille avec le cli, la feuille de style par défaut se termine par .css. Ce qui nous intéresse c’est d’utiliser l’extension scss sur nos fichiers.

Tout d’abord, pour démarrer un nouveau projet angular utilisant .sass , il nous suffit d’utiliser le flag –style

ng new mon-projet-sous-sass --style=scss

On pourrait aussi utiliser du sass ou less mais ce n’est pas ce qui nous intéresse : –style =less

Convertir un projet angular vers Sass

Si vous aviez déjà créé un projet utilisant simplement .css. Cela va nécéssiter un tout petit plus de travail pour le convertir en scss.

Tout d’abord on demande à angular de convertir notre projet pour utiliser le scss

ng set default.styleExt scss

On peut aussi le faire en modifiant le fichier .angular-cli.json

"defaults": {
    "styleExt": "scss",
    "component": {}
  }

Malheusement cela ne modifiera pas les fichier créés. Pour les anciens fichier .css pour devrez les modifier à la main, chager l’extension .css en .scss et penser à modifier dans le component le stylesUrls

@Component({
  styleUrls: ['./mon-component.scss'],
})

Utiliser l’import Sass plus simplement

Si vous créer des mixins ou des variables, le plus souvent , ceux ci sont dans des fichiers externes dans votre dossier sass

par exemple:
|- src/
|- assets/
|- sass/
|- _variables.scss
|- _mixins.scss
|- styles.scss

Pour utiliser nos mixins et variables dans le fichiers styles.scss, on les importe:

/ fichier styles.scss
  
@import './assets/sass/variable';
@import './assets/sass/mixins';

Rien de fou ici, ca commence à devenir plus contraignant lorsqu’on souhaite utiliser ses mêmes variables dans des composants angular qu’on aurait créé.
Exemple de cas
|- src/
|- app/
|- header
|- social/
|- social.component.html
|- social.component.scss
|- social.component.ts
|- menu/
|- menu.component.html
|- menu.component.scss
|- menu.component.ts
|- search/
|- search.component.html
|- search.component.scss
|- search.component.ts
|- assets/
|- sass/
|- _variables.scss
|- _mixins.scss
|- styles.scss

Si nous devions importer variables et mixins dans nos 3 fichiers de styles, il aurait fallu y accéder en prenant en compte le chemin relatif du dossier sass par rapport au component.

// fichier component.scss
  
@import "../../../assets/sass/mixins";
@import "../../../assets/sass/variables";

Heureusement Angular-cli propose une manière simplifié d’importer des fichiers sass: il faut utiliser ~

// fichier component.scss
  
@import "~assets/sass/mixins";
@import "~assets/sass/variables";

Angular cli + Bootstrap 4

Bootstrap 4

Pour ceux qui utilisent bootstrap.
On installe d’abord bootstrap via npm

npm install --save boostrap@4.0.0-beta

Ajout du css bootstrap dans le fichier config : .angular-cli.json

"styles": [
  "../node_modules/bootstrap/dist/css/bootstrap.css",
  "./styles.scss"
],

On utilise ../node_modules car le point de départ du cli est le dossier src/

Ajout des fichiers sass

Nous n’avons pas toujours besoin d’importer tous les fichiers .
Dans le dossier bootstrap, nous avons tous ces fichiers :

      Bootstrap
      /*!
       * Bootstrap v4.0.0-beta (https://getbootstrap.com)
       * Copyright 2011-2017 The Bootstrap Authors
       * Copyright 2011-2017 Twitter, Inc.
       * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
       */

      @import "functions";
      @import "variables";
      @import "mixins";
      @import "print";
      @import "reboot";
      @import "type";
      @import "images";
      @import "code";
      @import "grid";
      @import "tables";
      @import "forms";
      @import "buttons";
      @import "transitions";
      @import "dropdown";
      @import "button-group";
      @import "input-group";
      @import "custom-forms";
      @import "nav";
      @import "navbar";
      @import "card";
      @import "breadcrumb";
      @import "pagination";
      @import "badge";
      @import "jumbotron";
      @import "alert";
      @import "progress";
      @import "media";
      @import "list-group";
      @import "close";
      @import "modal";
      @import "tooltip";
      @import "popover";
      @import "carousel";
      @import "utilities";

Beaucoup de fichiers non nécéssaire pour vos projets

Pour utiliser bootstrap, nous n’avons besoin que de ce strict minimum

// src/styles.scss
 
@import
  '~bootstrap/scss/functions',
  '~bootstrap/scss/variables',
  '~bootstrap/scss/grid',
  '~bootstrap/scss/mixins',
  '~bootstrap/scss/print',
  '~bootstrap/scss/reboot',
  '~bootstrap/scss/type';

Avec le ~, importé des fichiers sass devient très facile.
+++

 

sass

Flash c’est le mal !!! Oui c’est Steeve qui le dit. Here comes a new challenger : HTML5


Avec Flash

Depuis que j’utilise Mac OS X, j’ai enfin compris pourquoi certains détestent tant flash : le lecteur n’est pas vraiment optimisé pour cet environnement.

Depuis ses débuts, Flash a toujours eu ses détracteurs. Au départ, certains trouvaient que c’était une techno jeune qui ne permettait pas grand chose. Par la suite, on a vu l’apparition de « faux » développeurs : des débutants ou des graphistes qui ont profité de l’accessibilité d’actionscript pour s’y mettre. Mais voilà, ils avaient plus tendance à coder avec leurs pieds qu’avec leurs mains (et je mentirais si j’disais ne jamais en avoir fait partie). Cependant, avec AS3 ce côté langage accessible aux  « faux » développeurs est en train de disparaitre, il me semble…

Enfin, il y a toujours eu des personnes associant uniquement flash aux sites full flash et à la publicité. Puis certains se sont rappelé qu’il avait la gestion des médias (vidéos, images et sons), d’autres se sont souvenus des jeux, et ainsi de suite…

Pourquoi Apple ne veut pas de flash sur ses plateformes

AppleEt c’est sur ce point qu’entre en jeu notre Cher Steeve Jobs. Celui-ci avait au départ officiellement expliqué  que flash ne pouvait pas être lisible sur Iphone pour « raison technique ». On aurait donc pu espérer le voir sur Ipad… mais ce n’est toujours pas le cas.
Officieusement, Apple ne veut pas de flash sur sa plateforme mobile pour des raisons valables : la non optimisation du lecteur, le fait que flash bouffe de la batterie (quand même), mais aussi et surtout parce qu’avec flash on peut créer des jeux ! Et donc, si le PDG  d’Apple ne protège pas l’écosystème de l’Appstore des « mauvais » développeurs flash, il risque de perdre beaucoup d’argent. Il a donc tout intérêt à ce que l’Appstore soit la seule et unique porte d’entrée des nouvelles applications sur les terminaux Apple.
Officiellement et plus récemment, « Apple croit fortement que tous les standards concernant le web doivent être ouverts », d’où l’adoption de HTML 5, css et javascript. Et comme flash est le premier facteur de plantage des mac, pour des raisons de techniques (de nouveau), de stabilité,  de performance et d’autonomie, le plugin ne sera toujours pas intégré sur ses plateformes mobiles.

Bref, on l’aura compris : il n’est pas question d’installer le plugin pour les versions ultra mobile de la firme à la pomme. Et il n’est pas non plus question pour Apple de prendre en compte flash 10.1, une version apparemment revue et corrigée en fonction des critiques.

Apple n’en veut donc pas sur sa plateforme et cela peut se comprendre. Mais là ou l’explication devient bancale, c’est lorsqu’on apprend que  Jobs prône le format H.264 pour le HTML  5  (HTML 5 n’est pas un format vidéo contrairement à ce que pensent beaucoup d’internautes, mais il a une balise video). Le H.264 est un format fermé, qui, soit dit en passant, peut être lu par flash. Et à chaque fois qu’on utilise ce format, on donne des royalties à Apple. Et oui ! Le H.264 est basé sur un certain nombre de brevets logiciels, appartenant à diverses sociétés, dont Apple. Toutes ont décidé de s’unir pour en faire un « patent tool » confié à la MPEG LA (organisme qui gère les droits sur ces brevets logiciels). Les sociétés propriétaires du H.264 peuvent ainsi demander des royalties à ceux qui l’utilisent (à l’exception des membres du comité, bien entendu).
C’est sûrement à ces fins commerciales qu’Apple souhaite l’adoption rapide du HTML 5.
Autre information, le H.264 est le seul codec qui peut être accéléré par le hardware pour Apple.

Steeve Jobs nous apprend aussi que le flash n’est pas adapté au format mobile et aux écrans tactile. Les raisons ? Le flash ne gèrerait que les actions de la souris (survol). Mais la nouvelle version de flash  apporte une meilleure prise en charge du tactile. De plus, Adobe CS5 aurait pu permettre de compiler directement au format Iphone.

Aparté : il est possible de faire du flash sans Adobe flash cs et donc de générer un swf. Pour y parvenir, il existe des logiciels gratuits ou payants (bien moins cher que flash cs) : Swish, MTASC, Haxe, Eclipse…

Pourquoi interdire l’utilisation de logiciels tiers pour créer du contenu Iphone ou Ipad alors ?

Steve-Jobs-AppleAvec son article 3.3.1, Apple a récemment changé les conditions d’utilisation destinées aux développeurs. Ceux-ci doivent impérativement écrire leurs applications, dès l’origine, en C, C++, Objective C ou en javascript.

Il sera donc impossible de créer des contenus Iphone ou Ipad depuis flash CS5, iSpectrum, MonoTouch, Titanium ou Unity. Une raison tout à fait légitime puisque cela permettrait d’avoir des applications optimisées et « mieux » codées.

3.3.1 — Applications may only use Documented APIs in the manner prescribed by Apple and must not use or call any private APIs. Applications must be originally written in Objective-C, C, C++, or JavaScript as executed by the iPhone OS WebKit engine, and only code written in C, C++, and Objective-C may compile and directly link against the Documented APIs (e.g., Applications that link to Documented APIs through an intermediary translation or compatibility layer or tool are prohibited).

Mais il pourrait bien y avoir une autre raison… commerciale bien sûr !!! Avec flash CS5 on peut créer du contenu multiplateforme et apparemment ce n’est pas du goût d’Apple. On pourrait aussi se dire que ce n’est pas que pour fermer la porte aux développeur flash mais aussi pour empêcher les développeurs sous Cocoa ou autre d’aller voir ailleurs…

Quand Microsoft s’en mêle…

windows-mobileMicrosoft, quant à lui, ne veut pas non plus du plugin d’Adobe sous Windows mobile 7. En revanche, il aimerait pousser sa techno Silverlight. En cas d’échec, pas de souci : il pourra toujours toucher des royalties avec le H.264 puisqu’il est lui aussi détenteur du brevet (et ne s’en cache pas).

html5

Ce qu’on ne vous a pas dit sur le HTML 5

A force de lire les commentaires sur certains sites, je tenais juste à rappeler que, HTML 5 n’est pas un plugin, ni un format vidéo.  HTML 5 est la « suite » de HTML, qui est, pour rappel, un langage de description de page et un conteneur. Le langage a évolué et embarque à présent des API, de nouvelles balises dont la fameuse balise <video> ou encore <canvas> (permettant la création  d’éléments graphiques) et de nouveaux attributs.

Successeur de html 4.01, HTML 5 n’est toutefois pas encore finalisé. A l’heure actuelle il n’est pas prudent de l’utiliser car tous les navigateurs ne l’interprètent pas correctement (suivez-mon regard…)

La manière dont se profile l’avenir de la vidéo avec le HTML5 (si on ne garde pas qu’un seul codec) prend des airs de régression. En effet, si on se projette plusieurs années en arrière, on se rappellera de notre manière de regarder les vidéos en ligne :  Quick time player, windows media player, real one player… pas très pratique tout ca.
Actuellement, si je ne dis pas de bêtise en ce qui concerne le HTML 5 on a cette « fragmentation ». Il y a plusieurs codecs pour la lecture des vidéos : le H.264, Ogg Vorbis, Theora (on2 vp3), on2 vp8 et sûrement d’autres.

Faire des animations avec HTML 5, ce sera toujours moins « bien » qu’avec du flash ou d’autres outils spécialisés. Mais ne réduisons pas le HTML 5 à la vidéo et aux animations.
En tant que Webdesigner, tout ce qui peut permettre une meilleur adoption d’HTML 5 ne peut être qu’encouragé.
Mais en tant qu’internaute qui peut bloquer facilement les pubs (car, en flash), je me dis que je serai dans la m#ù*% quand il faudra bloquer les pubs en HTML 5.

Flash c’est lourd quand même, mais ca peut servir

Flash

Flash est à la base prévu pour créer des animations vectorielles. Mais il a, avec le temps, été « amélioré » pour être utilisé à d’autres fins. Il y a quelques années on voyait en « AJAX » la solution miracle, le flash Killer… Mais, les animations en javascript ne sont pas aussi fluide et complexe que celle en flash. La récupération des données en restant sur la même page a les mêmes désavantages que le flash en termes de référencement et de navigation (possibilité comme pour flash d’utiliser swf adress pour palier cela).
Pour l’heure les animations en 2D et 3D ne valent pas celles de flash mais ce n’est certainement qu’une question de temps.

D’un côté, certaines personnes (le grand public) réduisent l’utilisation de flash  à la vidéo, les jeux et les pubs alors qu’on peut s’en servir pour des applications exécutables (ne nécessitant pas de plugin), des animations, des BD en ligne,  applications multimédia, des module web interagissant avec une base de données.

D’un autre coté le flash player n’est pas optimisé et son développement est assez lent. De plus, il à tendance à faire planter le navigateur quand on a plusieurs onglets contenant du flash (le mélange firefox/safari + flash est pas mal). Adobe améliore les choses avec son système de mise en pause des applications flash contenues dans un onglet masqué. Par ailleurs, il s’associe avec différents producteurs de hardware pour optimiser le flash player pour ces hardware. En termes de référencement, il ne faut pas utiliser flash pour du contenu purement textuel. En termes de mobilité, pour l’instant, le flash player n’est clairement pas adapté aux appareils mobiles. Mais n’est-ce qu’une question de temps ?

Flash est la plaie de beaucoup d’internautes mais on oublie souvent qu’avant, on avait droit aux gifs animés et que flash a quand même fait changer les choses. Oui oui on a tous eu droit au site avec une animation d’intro qu’on a voulu sauter !-)

Enfin moi ce que j’en dis hein !

AndroidPour finir je dirais que j’ai un Ipod  touch et que le fait de ne pas avoir flash ne m’a pas dérangé. Maintenant, sous Android, avec un HTC Desire, j’ai flash mais je ne vais pas sur les sites en flash car inadapté.
Cette histoire de flash ou pas flash sur le mobile est je pense la partie visible de l’iceberg. Le véritable enjeu est économique et de ce côté, Apple n’est pas très clair et Adobe ne veut surement pas être mis de coté non plus.

De toute manière je pense qu’on va encore bouffer du flash pendant au moins 5 ans si ce n’est plus… mais Adobe devrait réagir s’il veut rester un acteur important du net.

Et pour ceux qui en ont marre des pubs attendez vous prochainement à voir : « BLOCK HTML 5 content » !

Sans Flash

Flash et javascript : externalInterface – appeler une boite modal contenant une vidéo youtube depuis flash

Dans cette exemple, nous allons créer une animation flash dans laquelle nous allons écrire l’identifiant youtube de la vidéo.
Ensuite au click après vérification du nombre de caractères, une boite modal, genre « lightbox », va s’ouvrir avec la vidéo Youtube voulu.

Voila l’exemple

Mais avant ca, une petite explication sur ExternalInterface Continuer la lecture de « Flash et javascript : externalInterface – appeler une boite modal contenant une vidéo youtube depuis flash »

Afficher masquer une image au dessus d’un flash

Il y a quelques jours on m’a demandé comment faire en sorte d’afficher une image par dessus un flash et qu’au clic sur l’image, le flash apparaisse… et ceci le plus simplement possible : juste du javascript pas de jquery.

Je pense que cela peut avoir un intérêt si vous avez par exemple une vidéo sur dailymotion et que vous souhaitez mettre une image d’accroche par dessus. Sinon si vous avez le flash, ça n’a vraiment aucun intérêt : vous pouvez le faire via flash et c’est plus simple.

Et l’exemple est par la.

Et voilà le code ci-dessous.

Continuer la lecture de « Afficher masquer une image au dessus d’un flash »