public marks

PUBLIC MARKS from decembre with tag web

This month

CSS - CODEPEN - COLLECTION - A Look At Pseudo-Elements - a Collection by Franz on CodePen

A Look At Pseudo-Elements This collection contains many examples for different pseudo-elements. All examples were used in episode 15 of !important a show that explores web development through live websites and elegant designs. https://xotv.me/channels/22-important/vod_videos/767-important-slash-slash-episode-fifteen

June 2018

RADIO - PODCAST - Le nouveau rendez-vous ⇒ podcast et replay | France Inter

Voici la grille des 247 émissions de France Inter que Ma Matinale propose en replay. Écouter les radios sur votre ordinateur ou votre smartphone deviens simple et rapide. Contairement aux autres lecteurs de podcast, Ma Matinale enchaine vos émissions favorites ou que vous soyez et sans pub. Sur cette page retrouvez tous les programmes mis à disposition par France Inter pour la baladodiffusion et le podcast. Visitez le site web de France Inter pour connaitre le programme, les fréquences, la programmation musicale ou écouter la radio en direct live!

April 2018

PRIVACY - How To Install Pi-Hole in Windows via Hyper-V & Debian (network wide ad-blocking) - Ars Technica OpenForum

(via)
So I created a short video tutorial (9 minutes in runtime) covering the installation of Pi-hole in the Windows operating systems via Hyper-V -using Debian Linux. This provides network wide ad-blocking as well enhanced security via DNS redirection, completely for free. You gotta keep in mind this works across your entire network; so phones, tablets, gaming consoles, smart televisions, etc. all benefit from this. It also has a pretty sweet web based GUI that you can use for blacklisting domains, looking up queries, checking on your clients, etc. Can make network management much easier depending on what type of setup you might be using. I tried to be as straight forward as possible & also put study aids on the screen throughout the process so that you don't have to try to see the tiny text I'm typing in as it's happening. This is not a process you should fear & is extremely easy to do, it delights me to be able to show off the ease of install inside nine minutes.

PRIVACY - LINUX - pi-hole/pi-hole: A black hole for Internet advertisements

The Pi-hole is a DNS sinkhole that protects your devices from unwanted content, without installing any client-side software. Easy-to-install: our versatile installer walks you through the process, and takes less than ten minutes Resolute: content is blocked in non-browser locations, such as ad-laden mobile apps and smart TVs Responsive: seamlessly speeds up the feel of everyday browsing by caching DNS queries Lightweight: runs smoothly with minimal hardware and software requirements Robust: a command line interface that is quality assured for interoperability Insightful: a beautiful responsive Web Interface dashboard to view and control your Pi-hole Versatile: can optionally function as a DHCP server, ensuring all your devices are protected automatically Scalable: capable of handling hundreds of millions of queries when installed on server-grade hardware Modern: blocks ads over both IPv4 and IPv6 Free: open source software which helps ensure you are the sole person in control of your privacy

FIR - SECURITY + PRIVACY - Firefox Configuration Guide for Privacy Freaks and Performance Buffs | 12Bytes.org

(via)
There is a huge selection of Firefox add-ons for tweaking privacy and security, some of the most popular of which are Adblock Plus and it’s many derivatives, NoScript, Flashblock, Ghostery, Web of Trust, BetterPrivacy, Lightbeam, Disconnect, Self-Destructing Cookies, Cookies Manager+, Request Policy, Policeman, Bluhell Firewall, RefControl, Smart Referer, HTTPS Everywhere and many, many others. With some possible exceptions, we won’t be using any of these, yet will retain much of the most important functionality offered by most of them with just a few add-ons, along with a plethora of changes to our Firefox configuration.

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

BIB - LIVRE - APK - Collibris

(via)
Installez-vous confortablement, l'aventure commence ! Avec l'application web et mobile gratuite de Collibris, conservez une trace de toutes vos aventures littéraires et rejoignez une communauté de lecteurs aussi passionnés que vous !

INTERNET - Retour sur Une contre-histoire de l’Internet | BUG BROTHER

Alain Hertay, maître-assistant à la Haute Ecole de la Province de Liège, avait voulu m’interviewer l’été dernier, dans le cadre du projet FORMEAM, plateforme liégeoise de formation en matière d’éducation aux médias qui a pour objectif de faire poser aux étudiants bacheliers un regard critique sur le Web et les réseaux sociaux. Il voulait que je revienne sur la génèse d’Une contre-histoire de l’Internet, le documentaire qui m’avait permis d’interviewer (notamment) Julian Assange, Benjamin Bayart, Valentin Lacambre, Andy Müller-Maghun,Richard Stallman, Phil Zimmermann… entre autres défenseurs des libertés. C’était juste avant les révélations Snowden qui, sur ces questions, a notablement contribué à changer la donne. L’interview n’étant pas encore publiquement accessible, et alors que ce fut l’une des plus longues qu’il m’ait été donné d’accorder (voir aussi la page Interviews & docus TV, en #replay), Alain m’a autorisé à la republier sur ce blog.

November 2017

FACE RECOGNITION - OpenFace project

Overview: The following overview shows the workflow for a single input image of Sylvestor Stallone from the publicly available LFW dataset. Detect faces with a pre-trained models from dlib or OpenCV. Transform the face for the neural network. This repository uses dlib's real-time pose estimation with OpenCV's affine transformation to try to make the eyes and bottom lip appear in the same location on each image. Use a deep neural network to represent (or embed) the face on a 128-dimensional unit hypersphere. The embedding is a generic representation for anybody's face. Unlike other face representations, this embedding has the nice property that a larger distance between two face embeddings means that the faces are likely not of the same person. This property makes clustering, similarity detection, and classification tasks easier than other face recognition techniques where the Euclidean distance between features is not meaningful. Apply your favorite clustering or classification techniques to the features to complete your recognition task. See below for our examples for classification and similarity detection, including an online web demo.

FIR 57 - ADDON - Made a small video on how to hack an example WebExtension! - Add-ons / Development - Mozilla Discourse

(via)
f you have friends that want to start with building WebExtensions show them this link https://vimeo.com/2402821339 Most people start with “Hello World” web sites when they want to learn Front End stuff. This is boring. Building an WebExtension as the first web project is sooo totally awesome! :smiley: I choose to sign it as unlisted WebExtension since lots of people don’t know it’s possible and if you are a n00b and want to share your extension in 5 minutes regardless of how useless it is, an unlisted web extension is better than a listed one.

CSS - @font-face - CSS font-display: The Future of Font Rendering on the Web — SitePoint

Before looking in detail at the various features offered by font-display, let’s briefly consider how you might use the feature in your CSS. First of all, font-display is not a CSS property but, as mentioned in the intro, it is a descriptor for the @font-face at-rule. This means that it must be used inside a @font-face rule, as showed in the following code: @font-face { font-family: 'Saira Condensed'; src: url(fonts/sairacondensed.woff2) format('woff2'); font-display: swap; } In this snippet I’m defining a swap value for the font Saira Condensed. The keywords for all the available values are: auto block swap fallback optional

October 2017

ADDON - SEARCH - How to use S-mall Search : S-mall Search

How to use S-mall Search S-mall Search is a Firefox addon. This addon adds the refine search tool to web pages. - Adding a supported page: pageinfo:The user can add a supported page by writing pageinfo. The pageinfo is Object written in JSON and has the following keys

BITTORRENT - LOG - OPEN SOURCE - qBittorrent download | SourceForge.net

An advanced and multi-platform BitTorrent client with a nice Qt user interface as well as a Web UI for remote control and an integrated search engine. qBittorrent aims to meet the needs of most users while using as little CPU and memory as possible.

September 2017

FIR - Firefox Update 57 (2017) - OPINIONS - How to enable legacy extensions in Firefox 57 - gHacks Tech News

(via)
If you are using Firefox Nightly right now, you may have noticed that the latest update of the web browser disabled all legacy add-ons. Firefox Nightly is the first version of the Firefox web browser that hit version 57, the version of Firefox that drops support for so-called legacy add-ons in favor of WebExtensions.

SEARCH - LIST - Deep Web Search Engines | Deep Web Search - A How-To Site

by 1 other (via)
After you brick wall there, your true deep web search begins. You need to know something about your topic in order to choose the next tool. To be fair, some of these sites have improved their index-ability with Google and are now technically no longer Deep Web, rather kind-of-deep-web. However, there are only a few that have done so. I recommend you use your browsers ‘search’ option to locate on this page your topic of interest, as the page has gotten long.Last updated July 12, 2016

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.

HACK - web TVaddons - Recherche Google

Avant les TVAddons, prenez un VPN La fermeture de TVAddons montre combien il est important d’être anonyme sur Internet. La position de la loi sur la question de la piraterie reste la même. Cependant, son emprise sur les sites de piratage augmente. Il est donc important de cacher le fait que vous utilisez un site ou un service. L’utilisation d’un VPN vous dissimule de toute personne essayant de fouiner dans votre activité. Il vous permet également d’accéder à tous les dépôts que vous voulez pour Kodi . Et de plus, vous n’avez pas besoin de vous creuser les méninges pour installer un VPN. Il y a des applications dédiées pour tous les périphériques et les plates-formes que vous pouvez utiliser. Donc, avant d’aller plus loin, prenez un abonnement VPN. Ensuite: comment installer TVAddons sur Kodi IIl est temps que nous vous donnions ce que vous désirez si ardemment. Nous vous donnerons des instructions pour l’installation de quatre référentiels de TVAddons alternatifs, à savoir: Ares Wizard Smash SuperRepo Simply Caz Repo Le verdict Le verdict final quant à savoir si TVAddons est encore dans les limbes. L’équipe de TVAddons est prête revenir en action bientôt. Mais la foule attend toujours de voir comment la situation va se clarifier. En attendant le retour de TVAddons vous pouvez très bien attendre, mais la plupart des gens détestent passer à côté de leur divertissement. Les alternatives à TVAddons peuvent aider à étancher cette soif de divertissement.

DEV - Web developer guides | MDN

Web developer guides. These articles provide how-to information to help you make use of specific technologies and APIs.

August 2017

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

HTLM 5 - htlm5 pour les web designersAdactio: Jeremy Keith

(via)
Adactio is the online home of Jeremy Keith, a web developer and author living and working in Brighton, England.

June 2017

April 2017

SVG - ONLINE TOOL - 20 Useful SVG Tools for Better Graphics - Hongkiat

(via)
SVG is gaining popularity in web design these days and you can use tools like Illustrator or Inkscape to create SVG graphics. But when it comes to web design, we should always optimize for lighter results. Here the 20 tools that you can use to work with SVG quickly and efficiently. We have mostly online tools, that can help in optimization, conversion, making patterns, and more.

CSS - How to Resize Background Images with CSS3 — SitePoint

(via)
Fortunately, CSS3 introduces the background-size property which allows backgrounds to be stretched or squashed. It’s ideal if you’re creating a template using Responsive Web Design techniques. There are several ways to define sizing dimensions — view the CSS3 background-size demonstration page.