public marks

PUBLIC MARKS from decembre with tag code

This month

CSS - CSS last-line: Controlling Widows & Orphanst - The new code –

“Widows” and “orphans” refer to a word or line of text that is laid out on the page in a way that disturbs reading flow and the “look” of the page: most commonly, words that are left dangling at the end of paragraphs. In paginated media, this is commonly seen as end-of-paragraph words that fall onto the next page. TRADUCTION: "Veuves" et "orphelins" se réfèrent à un mot ou une ligne de texte qui est disposé sur la page d'une manière qui perturbe le flux de lecture et le "look" de la page: le plus souvent, les mots qui restent à la fin de paragraphes. Dans les médias paginés, ceci est généralement vu comme des mots de fin de paragraphe qui tombent sur la page suivante

DEV - TUTO - the new code – Web Developer Reading List: CSS Typography

A well-known dictum states that web design is 95% typography. Despite the prevalence of rich media, videos and games, people come to the web primarily to read. Making that reading experience comfortable, interesting and enjoyable is a major factor in keeping people on web sites longer and enhances their ability to retain and remember information. Goals: Control the display of web page text to enhance communication. Prerequisite: Color Total time: 8 hours

January 2018

BIB - DEV - Amazon dans ton portail (10.12.2011) - BibliobiDules | bidouilles informatiques pour les bibliothèques

J’ai donc essayé de m’appuyer sur le travail de mon stagiaire pour désormais étendre l’affichage de visuels des documents de la bibliothèque aux CD et DVD. Pour cela, je me suis donc appuyé sur l’existence du code ASIN qui est pour Amazon l’identifiant unique de chaque notice de son site (une sorte d’ISBN quoi…). Ainsi, si l’on a ce code, on pourra automatiquement retrouver l’adresse web de la notice ET de l’image liée. En effet, l’une et l’autre se compose : .../... À noter que l’extension .01.MZZZZZZZ.jpg permet de choisir la taille de l’image. D’autres extensions existent mais je trouvais les images ou trop grandes ou trop petites.

December 2017

EDITOR - Markdown Monster - TUTORIAL (image) - Getting Images into Markdown Documents and Weblog Posts with Markdown Monster – Markdown Monster Blog – Medium

Getting Images into Markdown Documents and Weblog Posts with Markdown Monster: One good justification for using a rich editor for editing Markdown or a Weblog entry is that you can provide some additional features above and beyond what a simple text or code editor can provide. When you’re creating content you are usually dealing with a number of things beyond plain text like code snippets, feature widgets and most importantly — images. Just about any document you create is likely to include some visual content in the form of images and getting images into documents should be as quick and easy as possible. In this post, I describe all the different ways available in Markdown Monster to add images to Markdown content.

USERSTYLES - EXAMPLE - ss16 a Fresh attempt at (user)styling 4chan.... (2017)

ss16 - a self-centered, fresh attempt at (user)styling 4chan * * created on: February 11th, 2016 * last modified: May 16th, 2017 * 4chan X version: ccd0 / * created by: @saxamaphone69 * (loose) coding style: * * in an attempt to make the style as user-friendly as possible, i will * comment most of the css to explain what it all does * * please leave any comments, suggestions, or feedback on github: * * */ /** * this userstyle utilises a lot of best practices * and sensible defaults inspired from a variety of * stylish and modern web frameworks and resources, mainly: * */ /** * first thing we do, is we use web fonts from google! * this is so users aren't required to download fonts prior. * and of course, if you don't want to or don't like it, * delete or change it accordingly. we use roboto, roboto mono, * karla, and material icons. circular has been removed in the production * version of ss16 to not only keep the file size down, but also * to not have a font that i don't own the license for :^) */

FIR 57 - ARIS - SCROLLBAR - GitHub - Aris-t2/Scrollbars: Custom Scrollbars

Custom Scrollbars for Firefox 57+ : Method 1 - files for Firefox profile folder only M1 is based on this project by nuchi: M1 will stop working when Mozilla drops XBL support. From this projects method 1 : folder copy userChrome folder and userChrome.css file to PROFILENAME chrome or add code from userChrome.css file to an existing userChrome.css file. Method 2 - files for Firefox folder and to Firefox profile folder M2 is based on this project by ardiman: From this projects method 2profile folder copy userChrome folder and userChrome.js file to PROFILENAME chrome . From this projects method 2firefox folder copy defaults folder and config.js file to Firefox main directory (where the Firefox executable is). Script/startup cache must be deleted after every change! Where to fine startupCache folder? about:profiles > Local Directory > Open Folder, close Firefox and delete all files in startupCache folder. Location on WINDOWS: C:Users NAME AppDataLocalMozillaFirefoxProfiles PROFILE startupCache Location on LINUX location: home NAME .cachemozillafirefox PROFILE startupCache This is not the same profile folder custom scripts and styles are stored! More info about startup cache removal (in German): More info about startup cache removal (in English )

FIR- DEV - Firefox DevTools (@FirefoxDevTools) | Twitter

The official Firefox DevTools account. Follow us here to see the very latest experiments, milestones and help us build the best Firefox.

DEV - CHROM - 2015 - Six Tips for Chrome DevTools | CSS-Tricks

This post will cover six popular tips for Chrome DevTools. You may have seen some of these before, but hopefully if you have they'll act as a refresher for what you can do during your Inspect Element journey.

November 2017

GREASEMONKEY (v.4 - webextention) - FIR 57 - Greasespot: Greasemonkey 4 For Script Authors

What? The Greasespot Wiki will be updated to explain Greasemonkey 4 in detail. Until then, here's a quick summary. First, there is only an embedded editor. Browser Extensions have no access to the file system, so you can no longer author user scripts in your familiar text editor. There is only one object provided to user scripts now, named GM. It has several properties. One of them is info – the equivalent of the old GM_info. There are also several methods of this object: getResourceUrl, deleteValue/getValue/listValues/setValue, xmlHttpRequest. To use these methods you still need @grant, and use the new name, e.g.: // @grant GM.setValue The new form has a dot, where the old form has an underscore. You may specify both @grants, if you'd like to be compatible with Greasemonkey 4 and other user script engines at the same time. As of today, there is no support for: GM_log (use console.log), GM_addStyle, GM_registerMenuCommand, nor GM_getResourceText.

October 2017

FIR - jQuery - Getting Started | Select2 - The jQuery replacement for select boxes

The jQuery replacement for select boxes Forums GitHub IRC Chat Select2 gives you a customizable select box with support for searching, tagging, remote data sets, infinite scrolling, and many other highly used options.

USERSTYLES - Greasemonkey - Forum request 2006 - GreaseMonkey List - User scripts on

I'm the administrator of I want to start offering my styles to Greasemonkey (and similar) users. For applicable styles on, just plunk "/style.user.js" at the end of the URL. (For example, ). Not all styles on the site can be converted into user scripts. For example, those affecting chrome wouldn't work. Those styles will return a 404 if you try to open their styles. I'd like some feedback on the format I'm using. Is the code the best it can be, are there problems with meta-data, etc. Thanks.

FIR - DEV - Éxaminer et modifier le code HTML - Outils de développement | MDN

Recherche: À partir de Firefox 45, la boite de recherche de l'Inspecteur trouve les correspondances dans tout le markup du document ouvert, ainsi que dans toutes les frames. Pour commencer une recherche, il suffit de cliquer sur la boîte de recherche pour l'agrandir ou bien d'utiliser les raccourcis clavier Ctrl + F , ou Cmd + F sous Mac. Lors de la saisie, une pop-up d'autocomplétion affiche toutes les classes ou ID qui correspondent à la recherche en cours :

CSS + STYLUS - Stylus et les préprocesseurs CSS (en guise d’introduction) · Les intégristes

Première question : qu’est-ce qu’un préprocesseur ? Un préprocesseur est un programme qui procède à des transformations sur un code source, avant l’étape de traduction proprement dite (compilation ou interprétation). source Wikipedia. Dans le cas d’un préprocesseur CSS la syntaxe simplifiée ou enrichie en entrée est analysée et compilée en un langage que nous connaissons tous et que nous utilisons au quotidien : CSS.

September 2017

CSS - DESIG ONLINE TOOL - Responsive web design tool, CMS, and hosting platform | Webflow

Webflow gives designers and developers the power to design, build, and launch responsive websites visually, while writing clean, semantic code for you.

August 2017

IMAGE TAG - CSS - How to Apply a CSS Class to an Inserted Image |

How to Apply a CSS Class to an Inserted Image3. Add 'class="myimage"' within the img tag; it doesn't need to be in a specific location, such as before "title" or "alt," to function. For instance, if your code is (img src="myhouse.jpg" alt="Photo of my house")," it should become: (img src="myhouse.jpg" alt="Photo of my house" class="myimage")

BIB -- L'Awesome Box ou comment hacker le système RFID d'une bibliothèque - - 2017

un chouette dispositif passerelle de médiation numérique des savoirs. L’Awesome Box est un dispositif tellement simple qu’on se demande pourquoi personne n’y avait pensé !C’est donc une boite de retour qui est destinée aux documents que les usagers ont trouvé awesome (formidaaaaable). Une fois déposés dans cette boite, le retour est effectué et les documents sont tagués avec la mention awesome. La liste des titres est alors publiée automatiquement sur une page web et la liste est également diffusée sur twitter. C’est tout bête et c’est même pas récent puisque le projet date de 2011. Le code est accessible on peut facilement imaginer de modifier le dispositif pour proposer plusieurs boites : ce que les gens ont détesté, adoré, ce qu’ils recommanderaient à leur mère, leur frère, etc. Une fois rendus, j’imagine que l’idée est de le remettre en circulation le plus vite possible…

July 2017

JSON - What is JSON? An Introduction and Guide for Beginners

in this JSON tutorial and guide, I’m attempting to provide a fairly comprehensive discussion of JSON, its history, and its usefulness. I’ll close with a list of some practical JSON tools that might come in handy in future projects. JSON Defined JSON stands for JavaScript Object Notation and it’s a data format. That is, it’s a way to hold bits of information, similar to a database. Although JSON originated outside the ECMAScript specification, it is now closely related to JavaScript with the spec now including a JSON object and many developers incorporating it as a quasi-subset of the language.

jQUERY - JAVASCRIPT - jQuery udraggable Plugin

jquery.udraggable.js This plugin provides an API similar to jQueryUI's draggable but with support for unified mouse and touch events. It builds on Michael S. Mikowski's jquery.event.ue unified event plugin.

JAVASRIPT - JavaScript Style Guide

JavaScript Coding Conventions Coding conventions are style guidelines for programming. They typically cover: Naming and declaration rules for variables and functions. Rules for the use of white space, indentation, and comments. Programming practices and principles Coding conventions secure quality: Improves code readability Make code maintenance easier

June 2017

CSS - CODE EXAMPLE - "Progress bar horizontal" qui varie suivant le scroll

In AlsaCreation : CODE EXAMPLE -" Progress bar horizonta"l qui varie suivant le scroll body { -moz-box-direction: normal; -moz-box-orient: vertical; background: #f3f3f3 none repeat scroll 0 0; color: #000; display: flex; flex-direction: column; font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; font-size: 1.6rem; min-height: 100vh; }

CSS - Conserver le ratio 16/9 des images fullscreen et vidéos - Alsacreations

Le but est ici de faire en sorte que l'image de fond que l'on aura placée en CSS conserve son ratio de 16/9 et prenne toute la taille du navigateur, quelle que soit la taille de ce dernier (aka fullscreen). Pratique quand on fait du responsive. Voici le code utilisé : .ratio { background: url("monimage.jpg") no-repeat; background-size: cover; width: 100vw; height: 56.25vw; } Concrètement ce que l'on fait : on donne à l'image la largeur du navigateur grâce à l'unite vw (viewport-width) on lui donne la hauteur à laquelle on a appliqué un ratio 16:9 calculé en faisant 100 * 9 / 16 de la largeur du navigateur

May 2017

CSS - COLOR - Keeping CSS short with currentColor — Osvaldas Valutis

it helps to keep CSS code shorter and smarter. Before diving into practical usage examples, here is a short theory course. This is how MDN describes currentColor: The currentColor keyword represents the calculated value of the element’s color property. It allows to make the color properties inherited by properties or child's element properties that do not inherit it by default.