public marks

PUBLIC MARKS from decembre with tag dev

2017

DEV - FIREBUG vs. DEV TOOLS - Suggestions for Firebug gaps to be closed by the DevTools - Google Groupes

(via)
As Denis wrote: in https://bugzilla.mozilla.org/show_bug.cgi?id=991806 you find a dependency list which collects all the gaps. Mouse over the numbers to get the headline. Vote for the bugs that annoy you most. And many things work already. Read the migration guide. :

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.

BIB - greasemonkey - ILibX 2.0

(via)
General Questions/ Is LibX Free? How is LibX different from other library toolbars? Is there a version for my library? What version of Firefox does it work with? Does it work with Internet Explorer (IE)? Can I have two editions installed simultaneously? How can I get the Google Scholar search to work even if my institution has not registered with Google? How do I uninstall LibX?

DEV - Modernizr - Alsacreations

Modernizr est voué à la détection des fonctionnalités navigateurs via JavaScript. Il permet de prévoir des alternatives (basées sur d'autres bibliothèques) pour les moteurs ne supportant pas l'une ou l'autre des propriétés CSS, HTML, etc.

DEV - 2009 - Useful Javascript, jQuery, and AJAX Tutorials and Resources – MLC#1 | The Blog of Joren Rapini

Many of these links are bookmarks to articles that were list themselves, so they included many items. What’s special about this list on Joren Rapini’s blog, you ask? Well, I have graciously copied and pasted the Firefox tags that I use to identify each one of these pages in my bookmarks, so you can copy and paste them right into yours! This should save you a lot of time, and give you an enormous wealth of resources to boot.

CSS - FLEXBOX - Alsacréations - Flexbox Cheatsheet au format PDF

Ce memento est composé des sections suivantes : propriétés Flexbox applicables sur le parent (avec valeurs par défaut) propriétés applicables sur les enfants support des navigateurs (et version de spécification supportée) liste des bugs navigateurs et contournements les plus courants ordre de priorité des propriétés (voir cette présentation PDF) quelques modèles classiques : objet "media", centrage multiple, grille mono-ligne avec et sans gouttières les propriétés CSS qui ne s'appliquent pas sur les parents et les enfants flexbox liens vers des ressources incontournables

CSS - ONLINE TOOL - How to Center in CSS

by 3 others
Centering in CSS is a pain in the ass. There seems to be a gazillion ways to do it, depending on a variety of factors. This consolidates them and gives you the code you need for each situation. Select the type of content you want to center in a parent div and the size of the parent.

FIREFOX - DEV - BROWSER TOOLBOX - change color of firefox bookmarks menu - forum.userstyles.org

you can use Firefox menu->Developer->BrowserToolbox to examine UI elements and play with CSS. After you open it, click OK in the main browser window, wait a few seconds for the toolbox to initiliaze, then use the first button in its toolbar to pick an element (bookmarks button in your case).

2016

CSS - TUTORIEL - SASS - Les préprocesseurs CSS, c’est senSass ! - Alsacreations

Un préprocesseur CSS est un outil (ou programme) permettant de générer dynamiquement des fichiers CSS. L’objectif est d’améliorer l’écriture de ces fichiers, en apportant plus de flexibilité au développeur web (source : Wikipedia). Les préprocesseurs CSS les plus couramment employés sont aujourd’hui Sass, LESS (dont nous avons déjà parlé), PostCSS et Stylus.

2015

🛠 GitHub - CDN - RawGit tool

For use on production websites with any amount of traffic. Files are served via MaxCDN's super fast global CDN. No traffic limits or throttling. It's best to use a specific tag or commit hash in the URL (not a branch). Files are cached permanently after the first request. The catch: this is a free service, so there are no uptime or support guarantees.

jQuery - Tuto - Use jQuery to extract data from HTML lists and tables | Encosia

(via)
Mapping the data within HTML unordered lists. Using .map() against an unordered list is one of the most straightforward examples to start with. Imagine you had this simple HTML markup: .map() like this:

CSS - ANIMATION - iHover Hover Effects powered by pure CSS3

(via)
iHover is an impressive hover effects collection, powered by pure CSS3, no dependency, work well with Bootstrap 3!

CSS - ONLINE Tool - Bounce.js

(via)
Bounce.js is a tool and JS library that lets you create beautiful CSS3 powered animations.

🛠 RegExp - Regular Expressions for the Rest of Us

How to Write Regular Expressions ? The best way to learn regular expressions is by using an example. Let's say you're building a web page with a phone number input.

FLICKT - mars 2015 - Introducing the New! Shiny ! Photolist framework - code.flickr.com

(via)
Some photolist pages on Flickr use infinite scrolling, and some display results one page at a time. Regardless of how a page shows its photos, it starts to feel messy when there is an incomplete row of photos hanging off the end of the page. If there is more content in the set, the last row should be full. However, since we fetch photos from the API in fixed batch sizes, things don’t always work out so nicely, leaving “leftovers” in the bottom row. Borrowing from typesetting terminology, we call these leftover photos orphans. (We can also paginate backwards; leftovers at the top are technically widows but we’ll just keep using the term orphans for simplicity.)

SVG - Using SVG (witth Online TOOLS) | CSS-Tricks

(via)
Why use SVG at all?: Small file sizes that compress well__ Scales to any size without losing clarity (except very tiny)__ Looks great on retina displays__ Design control like interactivity and filters__

JavaScript Arrays

Un tableau contient une collection de données en une seule variable. Tableaux JavaScript peuvent contenir des données de tout type : chaînes, des nombres , des booléens , des objets , fonctions et autres tableaux. Les éléments de données dans un tableau sont appelées éléments. Chaque élément a un indice qui commence à zéro . [ 1 ] Les indices de tableau sont utilisés pour accéder à des éléments et créer de nouveaux éléments comme le montre

DEV - TEST tool - Placehold.it - Quick and simple image placeholders

by 8 others
Welcome to placehold.it A quick and simple image placeholder service. How does it work? Just put your image size after our URL and you'll get a placeholder.

JAVASCRIPT - TUTO - Ajuster dynamiquement la hauteur des iframe - Forcer le redimentionnement

Votre page va devoir faire appel à Javascript. Vous devrez donc prévoir une alternative. __ Le seul moyen de garantir que le contenu de l'iframe occupera toute la place qui lui est nécessaire sur la page-hôtesse est de forcer le redimensionnement de l'espace qui lui est accordé, une fois que l'on connaît l'espace nécessaire, donc après chargement du contenu de l'iframe.__Ce “redimentionnement” a posteriori ne peut être effectué que par un code javascript. Si le principe est simple, il faut envisager le cas où la source chargée dans l'iframe n'est pas dans le domaine de la page-hôtesse. En effet, afin d'éviter qu'un iframe que l'on ne contrôle pas vienne interagir avec le code javascript de la page-hôtesse, les navigateurs bloquent ce genre d'interacton (Same origin policy) ! Nous verrons qu'il existe des moyens de contourner cette limitation de sécurité.__Enfin, la simplicité du principe se heurte aux facéties d'implémentation des différents navigateurs Web, en particulier d'IE. Toute solution devra donc être testée sur les navigateurs pour lesquels on souhaite qualifier la page-hôtesse.

jQuery - TUTO - AJAX simplifié avec jQuery

AJAX (littéralement : Javascript et XML Asynchrones). AJAX c'est le pont entre les langages serveur (PHP, .NET...) et JavaScript, cette technologie permet de faire communiquer les deux de manière asynchrone, c'est-à-dire qu'on a plus besoin de recharger toute la page mais seulement une partie de la page, en y insérant des informations qui viennent directement du serveur.

jQuery - TUTO - Le sélecteur jQuery - débuter en jQuery

$ : le sélecteur raccourci __ Encore une petite précision : dans mon extrait de code ci-dessus, vous voyez que j'ai ajouté un paramètre $ pour ma fonction anonyme, et que j'ai ensuite utilisé $() à la place de jQuery().__En fait, $() est un alias de la fonction jQuery() (un autre nom pour la même fonction), on l'utilise plus souvent que jQuery(), tout simplement parce que c'est plus court à écrire ! __ Le seul problème est que d'autres framework javascript (Mootools nottament) utilisent également $ comme raccourci, du coup si vous utilisez plusieurs frameworks sur la même page, il y aura des conflits. ___ Heureusement, jQuery propose un mode noConflict(). Dans ce mode, le raccourci $ n'est pas créé pour éviter les problèmes. Le mode noConflict est par exemple activé par défaut dans Wordpress, donc $ ne marche pas et il faut donc se rabattre sur jQuery() à la place, la loose -_-'. __ L'astuce que j'ai utilisée me permet d'utiliser $ comme raccourci SEULEMENT à l'intérieur de ma fonction anonyme. Comme ça, même sous Wordpress où le mode noConflict est activé, je pourrais utiliser $ à l'intérieur de mon jQuery(document).ready.

DEV -Code Examples - Google Charts — Google Developers

(via)
Here are some code samples to demonstrate using the Google Visualization API. Table Example Customized Table Example Gauge Example Interaction Example Full HTML Page Example Query Wrapper Example Table Query Wrapper Example Mouseover Tool Tip Example