Skip to content

Instantly share code, notes, and snippets.

384400 384400

  • Bordeaux (Woeid, 580778), France, Europe, Earth, Solar System, Mikly Way
Block or report user

Report or block 384400

Hide content and notifications from this user.

Learn more about blocking users

Contact Support about this user’s behavior.

Learn more about reporting abuse

Report abuse
View GitHub Profile
@384400
384400 / arrays.js
Last active Jan 20, 2018
Déclarations et lectures de tableaux en JavaScript
View arrays.js
/* Tableau unidimensionnel */
/** Declaration avec "push" **/
var regionsFrance = [];
regionsFrance.push('Nouvelle Aquitaine');
regionsFrance.push('Occitanie');
console.log(regionsFrance);
/** Declaration sans "push" (1) **/
var regionsFrance = new Array('Nouvelle Aquitaine', 'Occitanie');
@384400
384400 / -sizes.md
Created Aug 6, 2017
[Html] [JavaScript] [Css] Afficher les tailles, interlignes et marges dans un navigateur
View -sizes.md

Comment afficher les tailles, interlignes et marges dans un navigateur ?

En cours de développement d'une feuille de style, il est commode de voir directement, sans recourir à la console, les tailles, interlignes et marges des blocs de texte ou de tout autre élément.

Dans le même esprit, il est instructif de voir la feuille de style par défaut d'un navigateur.

Avec notre outil, il suffit d'insérer ses propres styles : lors de l'affichage dans un navigateur, la page indique sous forme de texte les valeurs calculées : le redimensionnement de la taille du navigateur recalcule à la volée les éléments.

Ce travail peut être étendu à l'infini en ajoutant de nouvelles détections.

@384400
384400 / -multilingual-content-with-only-css.md
Last active Jul 28, 2017
[Html] [JavaScript] [Css] {WordPress] Afficher le contenu d'une page en plusieurs langues grâce à une feuille de style
View -multilingual-content-with-only-css.md

En identifiant la langue utilisée par le navigateur, il est fort simple d'afficher une page dans différentes langues grâce à Cascading Style Sheets (Css, c'est-dire les feuilles de style en cascade).

Cette solution utilise un code réduit en JavaScript.

En Php, côté serveur, nous aurions pu recourir à $_SERVER['HTTP_ACCEPT_LANGUAGE'] ou, mieux, à la fonction locale_accept_from_http et internationaliser nos chaînes de caractères avec la bibliothèque gettext mais ce travail est fastidieux.

Nota.

  • Il est déconseillé de représenter une langue avec un drapeau. Tous les francophones ne sont pas français, par exemple.
  • À l'usage, il nous paraît plus simple d'appeler les fonctions JavaScript directement dans le code Html, et cette pratique est validée par le W3C : la syntaxe est réduite et nous n'avons pas ainsi à nous occuper des gestionnaires d'évènements gérés différement selon les navigateurs.
  • L'identification de la langue en JavaS
@384400
384400 / event.js
Created Jun 23, 2017
addEventLister et removeEventListener
View event.js
var addEvent = function(evt, handler) {
if (window.addEventListener) {
document.addEventListener(evt, handler, false);
} else if (window.attachEvent) {
document.attachEvent('on' + evt, handler);
}
};
var removeEvent = function(evt, handler) {
if (window.removeEventListener) {
document.removeEventListener(evt, handler, false);
@384400
384400 / align-horizontal.html
Last active Dec 24, 2016
Aligner horizontalement deux titres de tailles différentes
View align-horizontal.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Aligner horizontalement deux titres de tailles différentes</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="flex">
<div>
View test.html
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8" />
<title>Visualisateur de glyphes</title>
<style>
@font-face {
font-family: 'My Sans Serif font';
src: url('source/SourceSansPro-Regular.ttf') format('truetype');
}
@384400
384400 / -column.md
Last active Sep 24, 2016
[Html] [Css] Comment afficher une gouttière avec le module Multi-column Layout ?
View -column.md

Comment utiliser le module Multi-column Layout ?

[CSS Multi-column Layout Module] (https://www.w3.org/TR/css3-multicol/) permet de disposer un contenu sous formes de colonnes.

Les autres techniques, comme [CSS Flexible Box Layout Module Level 1] (https://www.w3.org/TR/css-flexbox-1/), les tableaux et les grilles, autorisent la création de colonnes. Cependant, ces possibilités sont satisfaisantes exclusivement quand le contenu est statique. Si nous écrivons un livre, le contenu sera immuable et les modifications mineures. Si nous publions un journal, le contenu sera imprévisible !

La mise en page avec de multiples colonnes présente surtout un intérêt pour les écrans larges : les lignes trop longues découragent le lecteur et sont inesthétiques.

À l'heure où nous rédigeons ces lignes, le support des navigateurs est insuffisant : il nécessite le recours à des propriétés préfixées pour Google Chrome, Mozilla Firefox, Safari et Opera, comme l'indique [Can I use] (http://caniuse.com/#feat=multicolumn).

@384400
384400 / -gutter.md
Last active Sep 29, 2016
[Html] [Css] Comment afficher une gouttière avec le module Flexbox Layout ?
View -gutter.md

Comment afficher une gouttière avec le module Flexbox Layout ?

[CSS Flexible Box Layout Module Level 1] (https://www.w3.org/TR/css-flexbox-1/) permet facilement de disposer un contenu sous formes de colonnes, mais ne prend pas en charge les gouttières.

Une gouttière rend le contenu plus facile à lire.

Réduite à des dimensions minimales, la gouttière remplace un trait horizontal (ou vertical). Il suffit d'attribuer un arrière-plan de couleur au conteneur principal et de donner une marge aux éléments qui suivent, comme le montre le fichier gutter-a.hml.

Pour dessiner un trait de séparation, il existe une solution encore plus simple : attribuer une bordure aux conteneurs, comme le montre le fichier gutter-b.html.

View -print.md

A compléter ultérieurement

@384400
384400 / -lettre.md
Last active Aug 20, 2016
[Html] [Css] [JavaScript] Comment produire une lettre professionnelle en Html ?
View -lettre.md

Comment produire une lettre professionnelle en Html ?

Avec quelques rudiments en Html, grâce à un bloc-notes comme [Notepad++] (https://notepad-plus-plus.org/fr/) et à un navigateur, il peut-être intéressant de générer une lettre professionnelle ou commerciale au format A4 à imprimer. À l'heure où les outils bureautiques deviennent complexes et chers, à l'heure où enfle la taille des documents à enregistrer, notre solution se veut frugale et universelle.

Le modus operandi est le suivant (plus long à décrire qu'à exécuter !) :

  • lancement du bloc-notes ;
  • lancement du navigateur ;
  • ouverture du fichier avec le bloc-notes et le navigateur ;
  • rédaction du texte ;
  • impression virtuelle du document (c'est le texte final) au format Pdf ;
You can’t perform that action at this time.