Lors de gros projets web, nous avons beaucoup de fichiers css. Le SASS est une alternative, un moyen pour « simplifier » notre css, pour n’avoir a coder qu’une seule fois. Techniquement, a quoi ça sert ? le sass est un langage de programmation basé sur le css. Avec sass, vous pouvez créer autant de feuilles de style que vous le voudrez. Toutes ces pages seront ensuite compilée par la suite pour générer un seul et unique fichier CSS (gain de temps)….
Introduction to Pug Pug is a template engine implemented in JavaScript that allows you to dynamically generate HTML, like Thymeleaf in Java and Twig in PHP. Its syntax is inspired by Haml. It is therefore minimalist and based on indentations. I have never used pug but my first impressions are rather mixed. Previously « Jade » Before, Pug was called Jade. Only Jade has become a registered trademark and as the domain of the trademark is very close (both refer to the…
La propriété position en CSS permet de positionner les éléments différemment du cours normal du document. Il existe 5 principaux types de positionnement différents :1/ Static2/ Relative3/ Absolute4/ Fixed5/ Sticky 1/ StaticIl s’agit de la valeur par défaut. L’élément suivra le cours normal du document. Ici le second carré est positionné en « static ». 2/ RelativeIl s’agit d’un positionnement assez proche du « static« . L’élément est positionné tout d’abord dans le cours normal du document. Par la suite, il est possible de…
<canvas> is an HTML5 element that allows the creation and manipulation of graphical elements (paths, shapes, text, bitmap images) via a scripting language, most often JavaScript. All modern browsers support it natively, and can render it using hardware acceleration. To start, we add the following tag to the page, specifying the width and height attributes: Drawing lines Let’s draw a primitive C using two lines: Drawing a shape Now, let’s add a D using the context method arc. It accepts the following arguments: Drawing text Next up, we’ll write an A using…
The W3C has published the HTML 5.2 specification. Among the main features: The Payment Request API (facilitates web commerce), reducing risks. Browsers will act as an intermediary between the parties of a transaction. The allowpaymentrequest attribute is <iframe> , for integration with the Payment Request API. Concerning security : Content Security Policy (CSP). The CSP defines, for example, a mechanism by which Web developers can control the resources that a particular page can use. Accessible Rich Internet Applications (ARIA) help…
Stylus is a dynamic stylesheet preprocessor language that is compiled into CSS. It aims to add functionality to CSS without breaking compatibility across web browsers. It does this using variables, nesting, mixins, functions and more. Stylus syntax is very flexible. You can use standard CSS syntax and leave the semicolon (;), colon (:) and even the ({) and (}) optional, making your code even more readable. Stylus does not provide new style options, but gives functionality that lets you make…
1- Introduction Les usages des icônes sont multiples, elles peuvent être utilisées pour diriger vers des rubriques de votre site, pour agrémenter les titres ou les articles, pour créer des infographies…etc. On peut différencier plusieurs types d’icônes : l’icône contour, l’icône remplie, l’icône de glyphe, l’icône à plat (ou flat design icon), l’icône dessinée à la main, l’icône skeuomorphique, qui vise à reproduire le plus fidèlement possible la réalité et le favicon qui est une utilisation d’une icône pour représenter un…
L’attribut Charset, c’est quoi ? L’attribut « charset » défini dans la balise <meta> elle-même située dans la balise <head> du code HTML, est une chaîne de caractères indiquant l’encodage qui doit être utilisé. Cette valeur doit correspondre à un nom d’encodage valide pour le Web. Unicode Unicode est un standard informatique qui permet des échanges de textes dans différentes langues, à un niveau mondial. Il est développé par le Consortium Unicode, qui vise au codage de texte écrit en donnant à…
Pour la mise en page d’un site, les développeurs ont connu plusieurs méthodes : l’utilisation de tableau en HTML Puis le CSS a pris la place dans les années 2000 et on utilisait les propriétés « float » ou « inline-block ». Ces méthodes ont désormais largement fait la place à ce qu’on appelle maintenant « les Flexbox ». Flexbox : qu’est-ce que ca veut dire? Le module des boîtes flexibles, aussi appelé « flexbox », a été conçu comme un modèle de disposition unidimensionnel et comme une…
« Build fast, responsive sites with Bootstrap » Voila la proposition de Bootstrap » Créer rapidement des sites responsives ! » Si je veux faire cette exemple : Je vais devoir coder beaucoup beaucoup de CSS, pour que le titre soit centré avec un fond qui prend toute la page. Avoir trois containers alignés avec leur texte et surtout que ces trois containers passent l’un en dessous de l’autre à partir d’une taille d’écran plus petite… Boostrap va me permettre de faire cela…