public marks

PUBLIC MARKS from decembre with tag code

September 2018

DEV - TUTORIAL - Scrimba - Scrimba is a powerful new way of learning code. Play around with the instructors code any time, right in the player.

Scrimba is a new way of teaching and learning how to code. We call it interactive code screencasts. Here’s why it's a great way of learning.

July 2018

ADDON - MyBrowserAddon - Community for Open-source Projects ::

MyBrowserAddon is a community for open-source projects. It houses the documentation, tutorial, code related to open-source projects and is dedicated to developers who are interested in learning about and contributing to these projects. Here, you can explore different ways we serve the open-source community and also help us to make these open-source projects even more awesome! Open-source development promotes not only innovation but also accelerates progress in all aspects of software development. Currently we are focused on supporting non-commercial browser-based projects (addon, plug-in) within communities. But, in future we will branch-out to other areas including health and education!

June 2018

JAVASCRIPT - REGEX - Les expressions régulières (partie 2/2) - Dynamisez vos sites web avec JavaScript ! - OpenClassrooms

(via)
Dans ce deuxième chapitre consacré aux regex, nous allons voir leur utilisation au sein du JavaScript. En effet, le premier chapitre n'était là que pour enseigner la base de la syntaxe alors que, une fois couplées à un langage de programmation, les regex deviennent très utiles. En JavaScript, elles utilisent l'objet RegExp et permettent de faire tout ce que l'on attend d'une regex : rechercher un terme, le capturer, le remplacer, etc.

April 2018

DEV - ONLINE - Plunker - online community for creating, collaborating on and sharing your web development ideas.

by 1 other
Features: Real-time code collaboration Fully-featured, customizable syntax editor Live previewing of code changes As-you-type code linting Forking, commenting and sharing of Plunks Fully open-source on GitHub under the MIT license And many more to come...

March 2018

HACK - (Well documented) Top 10 Free Sites to Receive SMS Online Without Real Phone Number - dr.fone

by 1 other (via)
Tested with success for 2Factors : https://receive-sms.com/ Imagine having to put your email addresses on websites every time you want to sign up for a service offered on the website or participate in a forum discussion. This has left a lot of people frustrated in accessing web services because not everyone is comfortable or wants to expose his or her email address to the public. Although in recent times, some websites now offer temporary disposable email addresses that can be generated automatically for use without hitches; these email addresses are vulnerable as there is less password protection feature to improve security. For this reason, the use of phone verification became an alternative to access some web services. The phone verification works in a way that a phone number is provided to a website to receive code generated randomly via SMS in which the code is put back on the website in order to ascertain that the user is no spam bot but real. In order to guide your privacy, you can receive sms online on your computer rather than using your real phone number. The following sites are the top 10 free sites where you can receive SMS online without your real phone number.

DEV - VIDEO - Ces développeurs qui streament – Korben

Un DÉVELOPPEUR ou une DÉVELOPPEUSE qui streame ce qu'il ou elle code en live, évidemment !! Mais pas forcément facile de les trouver. Heureusement, tout est sur le github de Awesome Developer Streams, avec pour chacun sa spécialité, allant de NodeJS en passant par l'IoT sans oublier le C++ ou le reverse engineering.

February 2018

DEV - FORMATION - Thimble par Mozilla — Un éditeur de code en ligne pour apprendre et enseigner

(via)
Thimble est un éditeur de code en ligne qui facilite la création et la publication de vos propres pages web tout en apprenant le langage HTML, CSS et le JavaScript

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

(via)
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

(via)
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 1.13.89.3 / https://github.com/ccd0/4chan-x * created by: @saxamaphone69 * (loose) coding style: https://github.com/necolas/idiomatic-css * * 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: * https://github.com/saxamaphone69/ss16 * */ /** * this userstyle utilises a lot of best practices * and sensible defaults inspired from a variety of * stylish and modern web frameworks and resources, mainly: * https://github.com/twbs/bootstrap */ /** * 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: https://github.com/nuchi/firefox-quantum-userchromejs 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: https://github.com/ardiman/userChrome.js 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): https://github.com/ardiman/userChrome.js/wiki/Skriptcache 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

(via)
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 userstyles.org

(via)
I'm the administrator of userstyles.org. I want to start offering my styles to Greasemonkey (and similar) users. For applicable styles on userstyles.org, just plunk "/style.user.js" at the end of the URL. (For example, http://userstyles.org/style/show/242/style.user.js ). 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

(via)
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

(via)
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 | Chron.com

(via)
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")