public marks

PUBLIC MARKS from decembre with tag dev

2020

🧠 CULTURE SCIENCE - - Floris'Tic | Botanique numérique

L’initiative Floris’Tic vise à promouvoir la culture scientifique, technique et industrielle des sciences du végétal. Elle s’appuie pour cela sur un consortium d’expertise complémentaire en Botanique, Informatique et Animation de projet. Le contexte actuel d’érosion de la biodiversité se traduit par un besoin accru d’expertise et de diffusion des connaissances dans le domaine des sciences et techniques du végétal. Au regard du déficit important de compétences, de connaissances et d’attractivité de la botanique au niveau national, il est urgent de réduire la fracture entre société et sciences du végétal, si l’on souhaite promouvoir un développement durable de nos villes et de nos campagnes dans le respect de la biodiversité. L’objectif du projet est de pallier la fracture entre société et sciences du végétal, d’une part en favorisant l’innovation pédagogique au travers de nouveaux outils pour les professionnels de la gestion des territoires, de l’éducation et de la Culture Scientifique, Technique et Industrielle (CSTI), et d’autre part en redonnant le goût et l’envie des sciences du végétal au grand public et en particulier aux jeunes, au travers d’outils de terrain nomades, ludiques et pédagogiques.

đź›  KID - GAME / DEV CSS - Colouring with code | Lubna.dev

Do you like colouring books? Are you getting a little bored and running out of things to do at home? Well, I have created some digital colouring pages that you can colour with code. There is a lot going on in the world right now so I wanted to share something lighthearted and fun. Something everyone can take part in and share with their friends and family online.

GENERATEUR - Couverture livre - O RLY Parody Book Generator - DEV Community 👩‍💻👨‍💻

by 1 other (via)
Un généréteur de couvertures de livres dans le style de O'Reilly (bien connus de tous les développeurs). (via http://www.ballajack.com/fabrique-couvertures-livres-oreilly)

GENERATEURS - IMAGE - Générer des images avec LoremPixel - Dév. Web - ShevArezo`Blog

Très utile aux développeurs et designers Web, LoremPixel vous permet de générer des images à la volée en spécifiant une taille. Pratique pour insérer des balises "img" facilement et rapidement ! Vous devez sûrement connaître Lorem Ipsum pour générer des faux textes. Et bien LoremPixel fait la même chose mais pour des images ! Il génère pour vous des images au format souhaité et ceci très simplement. Plusieurs thématiques sont disponibles : animaux, transport, technologie, sport, etc... De plus, l'image peut être générée en couleur ou en noir et blanc ; avec un texte ou non ! La particularité du système, c'est que vous n'avez pas à parcourir des pages et des pages de photos pour en trouver une correcte. Tout se fait avec une URL. Par exemple, pour générer une image aléatoire en 400x150, voici l'URL : http://lorempixel.com/400/150

2019

CSS - TRICKS - Coloring SVGs in CSS Background Images by Noah Blon on CodePen

(via)
I love using SVG in CSS background images but it sucks that you can't alter the fill color easily within your CSS. Here are a few ways around that. # SVG in CSS backgrounds: Using SVG in CSS backgrounds allows you to use CSS's powerful background sizing and position properties. This makes sizing SVGs much simpler because the image easily scales to the size of your element. Plus you don't have SVG cluttering up your markup. There are also some nice performance benefits over inline SVG. An SVG in a background image can be cached. Using image sprites and embedding SVG as a data URI can also improve performance.

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.

CSS - PRO TIPS - CSS element() function - [: -moz-element()]Vincent De Oliveira

element() brings CSS design to a new level, in an easily way. Few ideas that comes to my mind (some that I've already used since the last 4 years): - when you have to deal with duplicated content in advanced effects - live thumbnails of previous/next slides in a slideshow - live zoom over an image, for example in an e-commerce product page - animated background, using CSS Animations or by referencing a video, canvas or SVG - faking backdrop-filter or filter() - watermark with multiples backgrounds from Lea Verou idea - and anything you’re currently thinking of ;) Few things we can note: - prefixed for now in Firefox: -moz-element() - impact on rendering performance when using multiple reference. Not as bad as CSS filters, but still something you have to consider - there’s a CanIUse support page - Issue Chromium - Issue WebKit - No mention from IE Platform Status

JAVASCRIPT - IMAGE - LAZY LOAD - Lazy Loading Images? Don’t Rely On JavaScript! | Robin Osborne

(via)
One popular method to deal with this is to “Lazy Load” the images; that is, to only load the images just before the user will need to see them. If this technique is applied to the “above the fold” content – i.e., the first average viewport-sized section of the page – then the user can get a significantly faster first view experience. So everyone should always do this, right? Given the potential limitations, let’s work on a solution that can handle all my concerns: a. works without JavaScript (i.e., lazy loading is an enhancement) b. vanilla js – no dependencies on jquery or angularjs c. works with broken JavaScript (i.e., the browser supports JavaScript, but there’s a js error somewhere which causes your script to break; might not even be your fault!)

JQUERY - COOKIE - Easy jQuery Cookies: Get, Set, Update, Delete | kevinleary.net

(via)
The jQuery cookie plugin makes it very easy to create, update and access information using cookies.

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.

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...

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.

DEV - Great Resources Every Beginning a Front-end Developer Should Bookmark by vydargis on CodePen

If you just get started your a front-end developer career, it might be overwhelming to learn something every day. To optimize your time, it might be useful to know solid resources, to keep up with a demanding programmers’ environment. In this brief article, you will find 6 useful resources that in my opinion I think every beginning a front-end developer career should bookmark.

DEV - COIN MINER - MALWARE - Found "coin-hive.com" script in site - https://coin-hive.com/ chez DuckDuckGo

How to block Bitcoin Mining in your browser: Found "coin-hive.com" script in site (example : http://nude.piks.site/)

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

IMAGE HOSTING - LIST - Free Webspace and Free Web Hosting Services

by 9 others (via)
"Free Webspace" is a directory list of free web hosting providers (free hompage hosting sites), with about 200 of the best free web space hosting sites with reviews, testimonials, and ratings, and is updated daily. To find a free web page hosting service that fits your needs, use the Search box on the left. If you need special web hosting features for your free web space, such as FrontPage server extensions, PHP, CGI, ASP, MySQL databases, etc., try our Advanced Free Web Hosting Search. The web hosting review page for each free website hosting company listed will allow you to read the reviews and ratings by others, or give your own. The newest additions to our searchable database of free webhosting providers are in a list below. The Linux web hosting for this website is now hosted on a fast dedicated server hosting, to serve you bette

USERSCRIPT - Nexto (infinite scroll) FOR Babelio - Découvrez des livres, critiques, extraits, résumés

1 comment
var implementations = [ { site: "https://www.babelio.com/mabibliotheque.php", // regex to compare against site URL, similar to @include nextLinkSelector: ".fleche.icon-next", // css selector for the next link, tip: find the current page button and do next sibling contentSelector: ".mes_livres", // the content that will be added to from the next page javascript: false // set this to true if the website uses javascript to load content, 50% chance it'll work }, { site: "https://www.babelio.com/livres-", // regex to compare against site URL, similar to @include nextLinkSelector: ".pagination .icon-next", // css selector for the next link, tip: find the current page button and do next sibling contentSelector: "#debug", // the content that will be added to from the next page javascript: false // set this to true if the website uses javascript to load content, 50% chance it'll work } } ];

CSS - FirePath :: Reviews :: Add-ons for Firefox

An alternative or Update ? Rated 5 out of 5 stars by decembre on Feb. 21, 2018 · permalink When i write an Userstyle it is (was) the primary tool i use with Firebug. Now i search an alternative for this great tool: The devtool don't give us the possibility to search or test a specific CSS selector like Firepath do. And in an other hand the DevTool is less useful than Firebug (it don't give an easy way to identify in which userstyle a CSS rule is - with an human reading way)

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

DEV - Git - open source distributed version control system

Git is a free and open source distributed version control system designed to handle everything from small to very large projects with speed and efficiency. Git is easy to learn and has a tiny footprint with lightning fast performance. It outclasses SCM tools like Subversion, CVS, Perforce, and ClearCase with features like cheap local branching, convenient staging areas, and multiple workflows. Learn Git in your browser for free with Try Git.

VIDEO - ONLINE TOOL - Custom Video Player

(via)
Custom Video Player (version 1.6): a better way to add video to your site. Enter your details below to generate your custom video embed code. For more information on each field, simply hover the mouse over the field icon.

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 )