FreeTube est un client YouTube pour Windows, Mac et Linux construit autour d’une utilisation plus privée de YouTube. Vous pouvez profiter de votre contenu et de vos créateurs préférés sans que vos habitudes soient suivies. Toutes vos données d’utilisateur sont stockées localement et ne sont jamais envoyées ou publiées sur Internet. FreeTube récupère les données en grattant les informations dont il a besoin (avec des méthodes locales ou en utilisant éventuellement l’API Invidious). Avec de nombreuses fonctionnalités similaires à YouTube, FreeTube est devenu l’une des meilleures méthodes pour regarder YouTube en privé sur un ordinateur.

Meta-Press.es, c’est quoi ? C’est un nouveau moteur de recherche, qui vous ouvre les portes de la presse en ligne. Développé depuis 3 ans par Simon Descarpentries (et grâce à un fond européen en 2020), cet outil vous veut du bien. Libre et gratuit, sans publicité, il vise un modèle économique basé sur l’entraide et la contribution (y compris financière) à l’image de l’encyclopédie en ligne Wikipédia.

Concrètement, il s’agit d’une Web Extension à installer dans son navigateur web Firefox. Cette extension ajoute un bouton dans la barre d’icônes et ce bouton permet d’ouvrir un onglet sur le moteur de recherche. Ce dernier ne s’exécute alors que dans votre navigateur et va directement interroger vos sources d’informations sans intermédiaire entre le navigateur et les journaux sélectionnés.

Vos recherches ne passent pas par les serveurs de Meta-Press.es, qui n’enregistrent rien de votre activité. De plus, aucun tracker publicitaire ou de réseau social n’est activé par la récupération des résultats par Meta-Press.es.

Une fois la recherche terminée, vous savez combien de résultats existent et vous avez à disposition les 10 derniers résultats de chaque source, simplement rangés par ordre chronologique.

Avec Meta-Press.es vous avez la possibilité de choisir finement les journaux dans lesquels vous souhaitez chercher : les choisir par langue, pays, thème, critères techniques (HTTPS, temps de réponse…) ; Meta-Press.es vous laisse même piocher à l’unité dans la liste des sources connues ! Liste que les utilisateurs chevronnés peuvent étendre eux-mêmes, pour leur compte ou en reversant leurs contributions dans la liste publique du projet.

Alors, si chercher dans la presse n’était pas votre réflexe jusqu’ici, les développeurs de Meta-Press.es espèrent que cette démarche, efficace et sensée, rentrera davantage dans les habitudes, grâce à un outil rapide, pratique, respectueux de la vie privée et écologique.

Depuis la première version publiée en ligne et signalée sur LinuxFr.org, beaucoup de travail a été accompli. De nombreuses fonctionnalités ont été ajoutées comme : la programmation de recherches quotidiennes qui vous notifient des nouveaux résultats, la gestion des résultats illustrés, l’internationalisation (et l’accessibilité) de l’interface ou encore une gestion fine des droits demandés par cette WebExtension…

Dans la presse, c’est l’actualité d’un sujet qui fait sa pertinence. Or, il n’est nul besoin de disposer de data-centers sur le cercle polaire comme les géants américains de l’informatique pour trier une page de résultats par ordre chronologique : votre ordiphone est déjà suffisamment puissant pour ça. Meta-Press.es a un bilan carbone neutre, son usage n’implique pas l’ajout de nouvelles ressources au réseau (Internet), l’ordinateur que vous avez déjà suffi.

D’ailleurs, que ce soit sur ordinateur ou sur téléphone portable, Meta-Press.es permet à ce jour d’interroger en quelques secondes plus de 300 sources, de 58 pays et en 22 langues, pour découvrir l’existence de millions de résultats.

Et ce n’est qu’un début, de nouvelles sources et de nouvelles catégories de sources sont ajoutées à chaque version : presse scientifique, photo, vidéo, agendas… et bientôt sources adaptées aux enfants, sous l’impulsion de l’association Primtux.

Au-delà de la sobriété énergétique que permet Meta-Press.es, son utilisation (qui peut remplacer celle des Google Actualités, Bing News et autre…) redonne à l’utilisateur le contrôle de ses sources d’information.

En effet d’un côté les moteurs de recherche actuels, en plus de vous imposer de la publicité, ne vous disent jamais dans quels journaux ils ont cherché, avec eux il faut se satisfaire des quelques résultats présentés, sans savoir si des sources manquent à l’appel.

Source: https://linuxfr.org/news/meta-press-es-outil-de-recherche-dans-la-presse-libre-et-respectueux-de-la-vie-privee

Les moteurs de recherche traditionnels comme Google sont assez bons dans ce qu’ils font, mais de nombreuses personnes choisissent de ne pas les utiliser pour des raisons de confidentialité . Ensuite, il y a ceux qui craignent que le contenu ne passe entre les mailles du filet simplement parce que le créateur n’a pas suivi les meilleures pratiques d’ optimisation pour les moteurs de recherche (SEO) .

YaCy(s’ouvre dans un nouvel onglet), un moteur de recherche distribué open source , fonctionne à peu près comme ses pairs traditionnels, mais ne souffre d’aucun de leurs maux. YaCy utilise un réseau peer-to-peer (P2P), de sorte que chaque utilisateur exécutant une instance du moteur de recherche se joint à l’effort d’indexation d’Internet. L’index est distribué et redondant entre tous les utilisateurs de YaCy.  

Pour renforcer davantage ses informations d’identification en matière de confidentialité, YaCy garantit que personne ne peut dire qui a recherché quels mots, ce qui rend toutes les recherches fonctionnellement anonymes. 

YaCy n’indexe que les pages accessibles au public et non protégées par mot de passe. Vous pouvez également l’utiliser comme moteur de recherche pour votre site Web ou l’utiliser pour indexer des pages sur l’intranet, ce qui garantit qu’elles ne sont accessibles à personne en dehors de votre réseau. 

Installation

YaCy est écrit en Java et fonctionne sous Windows , macOS et Linux . Les moteurs de recherche sont des bêtes complexes, mais grâce à la nature distribuée de YaCy, vous n’avez pas besoin d’une machine rapide, ni de beaucoup d’espace pour exécuter un client YaCy. 

L’installation est assez simple. Avant de commencer, assurez-vous que Java est installé sur la machine. Les utilisateurs Windows et macOS peuvent obtenir des binaires pré-construits auprès d’ Adoptium(s’ouvre dans un nouvel onglet), tandis que les utilisateurs de Linux peuvent l’extraire de leurs référentiels officiels.

Par exemple, les utilisateurs de Debian peuvent utiliser sudo apt install default-jdk , tandis que les utilisateurs de Fedora peuvent rechercher les versions disponibles avec sudo dnf search openjdk , avant d’installer la dernière version avec sudo dnf install <openjdk-package-name> .

Une fois Java installé, téléchargez l’exécutable YaCy(s’ouvre dans un nouvel onglet)pour votre plate-forme et extrayez-le. Par exemple, la commande sudo tar –extract –file yacy_*z –directory /opt -v , extraira le programme d’installation sous le répertoire /opt sous Linux. Maintenant, changez simplement dans le répertoire extrait et démarrez YaCy :

# cd /opt/yacy

# ./startYACY.sh

YaCy s’exécute maintenant sur le port 8090 de votre ordinateur. Lancez un navigateur Web et rendez-vous sur http://localhost:8090 pour accéder à l’instance YaCy. Vous pouvez désormais effectuer une recherche sur Internet comme vous le feriez avec un moteur de recherche classique.  

Explorer Internet 

Vous pouvez faire beaucoup plus avec le moteur de recherche YaCy que simplement rechercher passivement. Par exemple, puisque l’indexation P2P est pilotée par l’utilisateur, vous pouvez demander à YaCy d’explorer n’importe quel site Web. 

Pour accéder aux contrôles administratifs avancés de votre moteur de recherche, cliquez sur le bouton Administration dans le coin supérieur droit. Cela fait apparaître le panneau d’administration, qui vous permet entre autres de modifier la façon dont votre instance YaCy interagit avec d’autres clients YaCy du réseau.

Pour lancer une exploration manuelle du Web, accédez à Charger les pages Web, option Crawler dans le menu Premiers pas . Entrez l’URL dans l’espace prévu et cliquez sur Start New Crawl . Au fur et à mesure que le robot d’exploration démarre, il commence à afficher toutes sortes de statistiques sur l’exploration, et vous pouvez faire défiler vers le bas pour afficher graphiquement la structure du site Web défilé. 

Après avoir lancé l’exploration, accédez à Monitoring > Index Browser pour afficher le nombre de pages indexées et afficher d’autres détails, tels que leur nom et le nombre de liens sortants.  

Pour l’instant, vous pouvez utiliser l’option par défaut et explorer les autres options, telles que la limitation du robot d’exploration, une fois que vous vous serez familiarisé avec YaCy. Le moteur de recherche peut exécuter plusieurs analyses en même temps, et vous pouvez soit les lancer en série à partir de la section Premiers pas , soit vous diriger vers Production > Advanced Crawler pour explorer plusieurs sites Web en même temps. 

Une fois le travail d’exploration démarré, YaCy indexe les URL que vous entrez et stocke l’index sur votre ordinateur local. Pour vous assurer que votre index est disponible pour les utilisateurs de YaCy partout dans le monde, vous devrez rejoindre le réseau P2P de YaCy. 

Pour cela, vous devez ouvrir le port 8090 dans le pare-feu de votre routeur. Connectez-vous à la page d’administration de votre routeur et recherchez un panneau de configuration contrôlant le pare -feu ou la redirection de port . 

Une fois que vous avez trouvé les préférences du pare-feu de votre routeur, ajoutez le port 8090 à la liste blanche. Si votre routeur effectue une redirection de port, vous devez rediriger le trafic entrant vers l’adresse IP de votre ordinateur, en utilisant le même port.

Après avoir rejoint le réseau YaCy, vous pouvez basculer l’ option Do remote indexing sous Advanced Crawler . Cela permet à votre client de diffuser les URL qu’il indexe, et d’autres clients du réseau qui ont choisi d’accepter les requêtes peuvent vous aider à effectuer l’exploration.

Votre propre Google 

Au lieu de rechercher sur le Web, vous pouvez utiliser YaCy pour rechercher dans vos propres données ou pour implémenter un système de recherche de partages de fichiers locaux dans votre intranet d’entreprise. 

Pour cela, vous devrez exécuter YaCy en tant qu’indexeur interne. Dans ces modes, seules les personnes de votre réseau local peuvent utiliser votre instance personnalisée de YaCy pour rechercher des fichiers partagés, et aucune des données n’est partagée avec des utilisateurs extérieurs à votre réseau.

Dirigez-vous vers Administration > Premiers pas > Cas d’utilisation et compte . Ici, vous pouvez spécifier des détails de base tels que la langue de l’interface de YaCy. 

Vous pourrez également modifier le comportement de votre instance YaCy à partir d’ici. L’option par défaut consiste à utiliser votre client dans le cadre du réseau P2P mondial de YaCy pour vous aider à explorer et à indexer le Web. 

Pour créer un portail de recherche pour votre propre site Web, vous devez sélectionner l’ option Portail de recherche pour vos propres pages Web . Ensuite, faites défiler vers le bas et appuyez sur le bouton Définir la configuration . Ensuite, vous devez explorer votre domaine pour générer le contenu qui sera disponible via votre outil de recherche.

Pour intégrer la recherche dans votre site Web, faites défiler la colonne de gauche jusqu’à la section Intégration du portail de recherche . Vous êtes redirigé vers la page de configuration du portail , à partir de laquelle vous pouvez personnaliser l’apparence de YaCy avec la marque de votre entreprise pour l’intégrer à votre site Web. Lorsque vous avez terminé, appuyez sur le bouton Modifier la page de recherche . Vous pouvez maintenant utiliser n’importe lequel des extraits de code iframe générés pour intégrer la recherche personnalisée alimentée par YaCy dans votre site Web.

De même, pour utiliser YaCy pour indexer le réseau local, vous devrez sélectionner la troisième option dans la section Premiers pas . Vous pouvez ensuite utiliser Advanced Crawler pour explorer votre intranet.

Conclusion 

Il y a tellement plus que vous pouvez faire avec YaCy. Le projet n’offre pas assez de documentation pour couvrir toutes les fonctionnalités du moteur de recherche. Cependant, le projet est assez intuitif et son interface est suffisamment détaillée pour vous aider à basculer vers la bonne option. 

Tout bien considéré, YaCy est l’une des meilleures options pour les utilisateurs qui souhaitent un moteur de recherche Web anonyme, impartial, sans publicité et respectueux de la vie privée, que vous pouvez également utiliser pour aider les utilisateurs à rechercher du contenu sur votre site Web ou en privé sur votre intranet.

Pour télécharger et installer votre propre moteur de recherche, cliquez sur le lien suivant: ici

Source : https://www.techradar.com/how-to/build-your-own-search-engine-with-yacy

Colors

COLOURlovers: User created & shared color palette inspiration

ColorPicker: Online Color Picker Tool

Color Hex: A free color tool providing information about any color

Flat UI Colors: Web app helps you to copy the colors from Flat UI

Contrast Ratio: Easily calculate color contrast ratios

Color Safe: Color palettes based on WCAG Guidelines

Color Contrast Checker: Check color contrast by analyzing difference between foreground and a background color.

Colllor: Color palette generator

Paletton: Tool for creating color combinations

Colorpeek: Quickly preview, share and convert one or more CSS colors, including hex, RGB, HSL, RGBA and color keywords.

Colourcode: Online designer tool, which allows you to easily and intuitively combine colours.

Chrome Daltonize!: Daltonization is a technique of exposing details to color-blind users, allowing them to see what they otherwise would have missed.

Flat UI Color Picker: Flat Color Picker which gives you the perfect colors for flat designs.

SassMe: A Tool for Visualizing SASS Color Functions

HEX To RGB: Convert Hex color to RGB.

HSL to RGB: HSL to RGB / RGB to HSL converter.

Colour Scheme Calculator: Choose a starter color to calculate its color wheel including triad, complementary, analogous, and split complementary colours, plus saturation and lightness variations.

CSS Generators

Ultimate CSS Gradient Generator: CSS gradient generator

EnjoyCSS: All in one CSS generator

CSS MenuMaker: Create responsive website navigation

On/Off Flip switch: Generate CSS3 On/Off flip switches

CSSmatic:Gradient, border radius, box shadow & noise texture generator

CSS Triangle: CSS triangle generator

CSS Arrow Please: CSS arrow generator

Patternify: A CSS Pattern Generator

CSS3 Patterns Gallery: CSS3 patterns gallery

Critical Path CSS Generator: Speed up your page render time

Button Generator: CSS button generator

Layout Generator: Create CSS layout

Tridiv: Web-based editor for creating 3D shapes in CSS

Trianglify: Generate colorful triangle meshes that can be used as SVG images and CSS backgrounds

Delaunay Triangle: Triangle pattern maker that can be used as background

Bear CSS: Generates a CSS template containing all the HTML elements, classes & IDs defined in your markup

Stylie: A fun CSS animation tool

Calculator & Converter

PXtoEM: Convert pixels to EM

DPI Love: Find DPI/PPI of any screen

CSS Inliner:Automatically inline your email’s CSS

Code Beautify: Beautify, Validate, Minify, Analyze and Convert your JSON, XML, JavaScript, CSS, HTML, Excel

Pixel Density Converter: Tells you how to scale graphics between four density groups.

Is This Retina?: DPI/PPI Display calculator

Specificity Calculator:A visual way to understand CSS specificity

NTH-Test: nth-child and nth-of-type Tester

Typography & Font

Google Fonts: Open source web fonts

Font Squirrel: Hand picked free web fonts

Dafont: Archive of freely downloadable fonts

Font Space: Download free fonts

Type Genius: Find the perfect font combo

Golden Ratio Typography Calculator: Discover the perfect typography for your website

What Font Is: Identify font from a image

Typetester: Compare Web fonts from Adobe Edge, Google and Typekit

Tiff: Find out difference between Google fonts

Wordmark.it: Preview the output of fonts for a selected word

TypeWonder: Test web fonts on any live website

Fit Text: A jQuery plugin for inflating web type

Icons

Font Awesome: Scalable vector icons that can instantly be customized

Material Design Icons: 750 glyphs Material Design system icons pack by Google Design

Iconogen: Generate favicons, Windows 8 Tiles, Apple Touch icons, Android and iOS icons

Marka: Beautiful transformable icons

Maki: Icon set for web cartography

Fontello: Icon font generator

Fontastic: Create your own icon font

Entypo: A suite of 411 carefully crafted premium pictograms by Daniel Bruce

Typicons: Free-to-use vector icons embedded in a webfont for easy use in your user interfaces

Iconmonstr: A large collection of glyph icons from a German artist

Octicons: Icon font launched by GitHub

GlyphSearch: Search for icons from Font Awesome, Glyphicons, IcoMoon, Ionicons, and Octicons

Analyze Website Style

Stylify Me: Overview of the style guide of a site, including colors, fonts, sizing and spacing

Type-o-matic: A browser extension that finds all the fonts on a page

Editor

CodePen: Show case of advanced techniques with editable source code

JSFiddle: Test and share JavaScript, CSS, HTML or CoffeeScript online

JS Bin: A live pastebin for HTML, CSS & JavaScript and a range of processors

CSSDeck: Collection of Awesome CSS and JS Creations to help out frontend developers and designers

Dabblet: An interactive CSS playground and code sharing tool

Liveweave: Liveweave is a HTML5, CSS3 & JavaScript playground for web designers and developers

Adobe Edge Reflow: Design tool that supplements your design workflow to help you create beautiful responsive designs for all screen sizes

webflow: Drag-and-drop website builder for creating professional responsive websites

Macaw: Provides the same flexibility as your favorite image editor but also writes semantic HTML and remarkably succinct CSS

Developer Tools

Chrome DevTools: Set of web authoring and debugging tools built into Google Chrome

Grunt: The JavaScript Task Runner for automating tasks

Bower: Solution to the problem of front-end package management

Yeoman: A generator ecosystem, basically a plugin that can be run with the `yo` command to scaffold complete projects or useful parts

Can I Use: Up-to-date browser support tables for support of front-end web technologies

HTML5 Please: Look up HTML5, CSS3 & find out if they are ready for use

CSS Values: CSS Reference, Properties and Values

CSS Triggers: An invaluable reference on how CSS affects performance

Testing

W3C Markup Validation: Checks the markup validity of Web documents in HTML, XHTML, SMIL, MathML

HTML_CodeSniffer: Checks HTML source code and detects violations of a defined coding standard

W3C CSS Validation: Check (CSS) and (X)HTML documents with style sheets

CSS Lint: Points out problems with your CSS code

JS Lint: JavaScript program that looks for problems in JavaScript programs

PhantomCSS: Visual/CSS regression testing with PhantomJS

CSS Critic: Regression testing of CSS

DiagnostiCSS: Visually detect any potentially invalid or inaccessible HTML markup

QUnit: A JavaScript Unit Testing framework

Dromaeo: JavaScript Performance Testing

Opera Mobile Classic Emulator: Use the profile selector to spawn multiple Opera Mobile Classic instances with a defined resolution, pixel density, user interface

Performance

Pingdom Website Speed Test: Test & analyze the load time of a live page

WebPagetest: Website speed test from multiple locations around the globe

PageSpeed Insights: Analyzes website and suggest ways to make it load faster

GTmetrix: Grade site’s performance and provides recommendations to fix these issues

YSlow: Analyzes & offers suggestions for improving the page’s performance

Perfmap: A performance heatmap of resources loaded in the browser

Optimization

CSSCSS: Let you know which rulesets have duplicated declarations

Helium: javascript tool to scan your site and show unused CSS

CSS Tidy: Opensource CSS parser and optimiser

CSS Compressor: Compress your CSS to increase loading speed

CSS Dig: Take a look at all your CSS properties, their frequency and variations

JavaScript Minifier: Minify your JavaScript

FF Subsetter: Reduce the font file size to optimize bandwidth usage

Compressor.io: Reduce the size of your images while maintaining a high quality

Prefix free: add the current browser’s prefix to any CSS code only when it’s needed

Sprite Cow: Generate CSS for sprite sheets

TinyPNG: Advanced lossy compression for PNG images

Adaptive Images: Detects your visitor’s screen size and automatically creates, caches, and delivers device appropriate re-scaled versions of images

Feedback

Bounce: Add feedback on a design and share it with other people

Marqueed: Capture, annotate, Share and discuss images

Design Drop: A tool for collecting design feedback

Peek: See and hear a 5-minute video of a real person using your site

Inspiration

Call To Idea: Examples designs, components, ideas, logins, patterns, tabs, toggles, registers, lists, galleries, comings

Land Book: Cool landing page gallery

UX Archive: Most interesting user flows from iPhone 4S and iPhone 5

UI Parade: Online catalog of inspiration for UI designers

ZURB U: Find UI design inspiration

UX Porn: User Interface Design Patterns and Wireframe Templates

UI Patterns: User Interface Design patterns

Pttrns: A collection of mobile user interface patterns

TabPattern: Tablet UI Patterns

UICloud: User Interface Design Search Engine

Use Your Interface: Library of transitional interface and interaction design patterns

Niice: A search engine for finding design inspiration

MOOC

Intro to the Design of Everyday Things: Informative for anyone curious about design: everyday people, technical people, designers, and non-designers alike

Delft Design Approach: Introduction to fundamentals and methods of the Delft approach to designing meaningful products and services

Prototyping Interaction: Learn the different methods of prototyping by sketching, building and testing

Introduction to Graphic Design: Learn foundational graphic design principles (fonts, colors, images, backgrounds, and layouts) and how to apply them.

Intro to HTML and CSS: Learn how to convert digital design mockups into static web pages

Web Development: Learn core web development concepts from Reddit & Hipmunk co-founder Steve Huffman.

Responsive Web Design Fundamentals: Learn the fundamentals of responsive web design with Google’s Pete LePage

Responsive Images: Learn how to work with images on the modern web, so that your images look great and load quickly on any device

HTML5 Canvas: Learn how to use the canvas; how to make compositions using shapes, images, and text; how to create effects and filters on images and how to create animations.

Developing Android Apps: Learn how to build an Android app

JavaScript Basics: Learn the JavaScript programming fundamentals

Object-Oriented JavaScript: Learn how to utilize the various object-oriented programming features within JavaScript, and more importantly, how to write reusable and maintainable libraries.

JavaScript Design Patterns: Learn the importance of separating concerns when writing JavaScript, gaining hands-on experience along the way

JavaScript Testing: Learn how to write JavaScript applications with confidence, using the red-green-refactor workflow

Building Mobile Web Experiences: Learn how to create great cross-device mobile web experiences.

UX Design for Mobile Developers: Dive into the techniques that great designers use to plan and prototype amazing apps before any code is written

UIKit Fundamentals: Build a series of simple apps to become more comfortable with the UIKit framework and master its most widely used components

Intro to jQuery: Learn how to read and make sense of jQuery’s documentation.

Intro to AJAX: Learn how to make asynchronous requests with JavaScript (using jQuery’s AJAX functionality), and gain a better understanding of what’s actually happening when you do so

Website Performance Optimization: Learn how to optimize any website for speed by diving into the details of how mobile and desktop browsers render pages.

Gamification Design: Learn the basics of Gamification with a highly practical approach

Wireframes, Mockups & Prototypes

Cacoo: Create a diagrams, site map, flowchart, mind map, wire frame, UML diagram and network diagram

Marvel: Turn your Dropbox or desktop images into web and mobile app prototypes for any device and get feedback

Placeit: Create iPhone mockups and iPad mockups

MockFlow: Online services to Plan, Build and Share work for designers

Justinmind: Interactive wireframes for web and mobile

Wireframe.cc: Free minimal wireframing tool

Design News & Community

/r/web_design: Web design subreddit

/r/design: Design subreddit

/r/usability: User experience, Interface design, or Human Factors subreddit

/r/userexperience: User experience design subreddit

Stack Exchange: Graphic Design: Q&A for Graphic Design professionals, students, and enthusiasts

Stack Exchange: User Experience: Q&A for user experience researchers and experts

Front-end Front: A place where front-end developers can ask questions, share interesting links, and show their work to the rest of the community

Pineapple: Hub of Tutorials, Tools and Assets for developers and designers

Lockerdome: An interest-based social network

Designer News: A community of people in design and technology

DesignFloat: Web design news & tips

The Web Blend: A community for designers, developers and tech junkies

Design News: A site that features news articles, resources and tutorials written by designers and developers

Portfolio

Behance: The leading online platform to showcase & discover creative work

Dribbble: A place to show and tell, promote, discover, and explore design

Cargo: Personal publishing platform aimed at creating accessible tools and a networked context to enhance the exposure of talented individuals on the Internet

DeviantArt: An online community, showcasing various forms of user-made artwork

WordPress Themes

Optimizer: An easy to customize multipurpose theme for people who don’t like to mess with code.

Customizr: Customizable responsive theme with flat design. Well documented and easily extendable with hooks.

Asteria: A clean responsive theme with a beautiful slider, Narrow and Wide Layout Option.

Storefront: Designed and developed by WooThemes for WooCommerce projects.

Bellini: A blazing fast WordPress theme built for creating eCommerce website.

Resources

Microjs: Discover Micro-Frameworks and Micro-Libraries

Vector Open Stock: Free vector graphics

Buttons: A CSS button library built with Sass & Compass

Bootflat: Open source Flat UI KIT based on Bootstrap 3.3.0 CSS framework

Animate.css: A cross-browser library of CSS animations

CSS Shake: CSS shake graphics and icons for your page or app

Subtle Patterns: Free tilable textured patterns

Placehold.it: image placeholders

Holder.js: Client side image placeholders

Hammer.js: Add multi-touch gestures to your webpage

Textillate: A simple plugin for CSS3 text animations

Timeline JS: Beautifully crafted timelines that are easy and intuitive to use

Modernizr: JavaScript library that detects HTML5 and CSS3 features in the user’s browser

Isotope: Create a filterable portfolio for your website

Polymer: Makes it easier and faster to create anything from a button to a complete application across desktop, mobile, and beyond

CodyHouse: A free library of HTML, CSS, JS nuggets

Leaflet: An Open-Source JavaScript Library for Mobile-Friendly Interactive Maps

Modest Maps: Free library for interactive maps

GraphicBurger: Design resources offered for free to the community

Source : https://medium.com/@ti_asif/200-best-free-tools-resources-for-front-end-web-developers-3fb3c415a643#.x0ox4qtvq

Bibliothèque d’animation CSS

animatie.css : https://animate.style/

Animista: https://animista.net/

Vivify : https://github.com/Martz90/vivify

Magic animation CSS3 : https://www.minimamente.com/project/magic/

Cssanimation: http://cssanimation.io/

Hover.css: https://ianlunn.github.io/Hover/

Wickedcss: https://kristofferandreasen.github.io/wickedCSS/

Three Dots : https://nzbin.github.io/three-dots/

Csshake: http://elrumordelaluz.github.io/csshake/

Angrytools: https://angrytools.com/

Générateur de font

Google font generator : https://fonts.google.com/#ChoosePlace:select

Dafont : https://www.dafont.com/fr/

Outils HTML

Schnaps.it : https://schnaps.it/

Scriptol : https://www.scriptol.fr/html5/

Initializr : http://www.initializr.com/

Textfixer: https://www.textfixerfr.com/html/

Générateur HTML : https://www.mesoutils.com/generateur.php

Validateur de code HTML

Validateur (X)HTML du W3C : https://validator.w3.org/

Validateur de code CSS

Validateur CSS du W3C : https://jigsaw.w3.org/css-validator/

Editeur de code

Sublimtext : https://www.sublimetext.com/

Brackets: https://brackets.io/

Visual studio code: https://code.visualstudio.com/

Atom: https://atom.io/

Live editor: http://liveditor.com/index.php

Light Table : http://lighttable.com/

Editeur de code en temps réel

Codepen.io : https://codepen.io/pen/

Squarefree: https://htmledit.squarefree.com/

HTML editor: https://html-online.com/editor/

HTML code editor: https://htmlcodeeditor.com/

Livewave : https://liveweave.com/

HTML instant: https://www.htmlinstant.com/

JS bin: http://jsbin.com/welcome/130/edit?html%2Coutput=

Dabblet : https://dabblet.com/

Site pour apprendre à coder

Openclassrooms : https://openclassrooms.com/fr/courses/1603881-apprenez-a-creer-votre-site-web-avec-html5-et-css3

Grafikart.fr: https://grafikart.fr/tutoriels/html et https://grafikart.fr/tutoriels/css

Pierre-Giraud: https://www.pierre-giraud.com/html-css-apprendre-coder-cours/

Codecademy : https://www.codecademy.com/catalog/language/html-css

Live-code: https://www.live-code.fr/view/courses/formation-gratuite-html-css/ (il faut s’inscrire)

Mamouthland : http://css.mammouthland.net/

Learn layout : https://fr.learnlayout.com/

Freecodecamp : https://www.freecodecamp.org/

Developpez. com : https://www.developpez.com/

Bitdegree : https://fr.bitdegree.org/learning

EDX : https://www.edx.org

Codingame : https://www.codingame.com/start

Dash general assembly : https://dash.generalassemb.ly/

Khanacademy: https://fr.khanacademy.org/

The odin project : https://www.theodinproject.com/

Udacity : https://www.udacity.com/

Bent.io : https://bento.io/

Upskill : https://upskillcourses.com/

W3schools : https://www.w3schools.com/

Coderbyte : https://coderbyte.com/

Stackoverflow : https://stackoverflow.com/

MDN web doc : https://developer.mozilla.org/fr/

Marksheet : https://marksheet.io/

Tuto.fr : https://fr.tuto.com/tuto/programmation/gratuit.html

Class central : https://www.classcentral.com/

01tuto.fr : https://01tuto.fr/categorie/internet/

Mymooc.com : https://www.my-mooc.com/fr/categorie/programmation

Fun Mooc : https://www.fun-mooc.fr/fr/cours/?languages=fr&limit=21&offset=0&subjects=2787

Learn digital with google : https://learndigital.withgoogle.com/ateliersnumeriques/

Facebook : https://www.facebook.com/business/learn?instant-hack.to?ens_rdr

Coursera : https://www.coursera.org/courses?query=free

Skillshare: https://www.skillshare.com/fr/browse/web-development

Udemy : https://www.udemy.com/courses/development/web-development/?lang=fr&price=price-free&sort=popularity

Flexboxfroggy : https://flexboxfroggy.com/#fr

Bootstrap

Bootstrap : https://getbootstrap.com/

Flexbox Memorandum des fonctions flexbox (pdf) : https://github.com/alsacreations/guidelines/blob/master/flexbox-cheatsheet.pdf

Grid

Memorandum des fonctions grid (pdf) : https://github.com/alsacreations/guidelines/blob/master/grid-cheatsheet.pdf

Interactive CSS grid generator: https://grid.layoutit.com/

Extension navigateur

Chrome

Chrome HTML editor : https://chrome.google.com/webstore/detail/html-editor/dacmeeeegjoaddfondbeaaafohldgfof?hl=fr

Live editor for CSS : https://chrome.google.com/webstore/detail/live-editor-for-css-less/ifhikkcafabcgolfjegfcgloomalapol?hl=fr

Amino: CSS editor : https://chrome.google.com/webstore/detail/amino-css-editor/pbcpfbcibpcbfbmddogfhcijfpboeaaf?hl=fr

Live CSS editor: https://chrome.google.com/webstore/detail/live-css-editor/oelggcmknbjmhkpgjfhakedcfnkgbdpg?hl=fr

Visionneuse CSS pour google chrome: https://chrome.google.com/webstore/detail/css-viewer-for-google-chr/eedfldkdghfkhdcanjnfiklpeehbfoag?hl=fr

Debug CSS : https://chrome.google.com/webstore/detail/debug-css/igiofjnckcagmjgdoaakafngegecjnkj?hl=fr

Gridman -CSS Grid inspector: https://chrome.google.com/webstore/detail/gridman-css-grid-inspecto/cmplbmppmfboedgkkelpkfgaakabpicn?hl=fr

CSS selector finder for chrome: https://chrome.google.com/webstore/detail/css-selector-finder-for-c/mbeedbpphndkijipfcklhlgmoolapiml?hl=fr

CSS to SCSS or SASS converter: https://chrome.google.com/webstore/detail/css-to-scss-or-sass-conve/dmfhnejhgijefokeolmpgielghdplame?hl=fr

Page manipulator : https://chrome.google.com/webstore/detail/page-manipulator/mdhellggnoabbnnchkeniomkpghbekko?hl=fr

CSS color name : https://chrome.google.com/webstore/detail/css-color-names/dpjlhcacpgbemcijbpkpakofehlaejah?hl=fr

Code plunker (Live HTML CSS Editor) : https://chrome.google.com/webstore/detail/code-plunker-live-html-cs/llofhnpelgfcleglkkgfmpfohmlmkofe?hl=fr

Web developer : https://chrome.google.com/webstore/detail/web-developer/bfbameneiokkgbdmiekhjnmfkcnldhhm

CSS Pepper: https://chrome.google.com/webstore/detail/css-peeper/mbnbehikldjhnfehhnaidhjhoofhpehk

Fonts Ninja : https://www.fonts.ninja/

Image Downloader : https://chrome.google.com/webstore/detail/image-downloader/cnpniohnfphhjihaiiggeabnkjhpaldj

Firefox

Editeur HTML Webstudio : https://addons.mozilla.org/fr/firefox/addon/html-editor-webstudio/

HTML validator : https://addons.mozilla.org/fr/firefox/addon/html-validator/

Show HTML : https://addons.mozilla.org/fr/firefox/addon/showhtml/

Single HTML downloader : https://addons.mozilla.org/fr/firefox/addon/single-html-downloader/

Singlefile : https://addons.mozilla.org/fr/firefox/addon/single-file/

Edit with sublim Text : https://addons.mozilla.org/fr/firefox/addon/edit-with-sublime-text/

Edit with notepad++ : https://addons.mozilla.org/fr/firefox/addon/edit-with-notepad/

Tem Ex: Template extractor: https://addons.mozilla.org/fr/firefox/addon/template-extractor/

CSSViewer : https://addons.mozilla.org/fr/firefox/addon/cssviewer-quantum/

CustomCSS injector: https://addons.mozilla.org/fr/firefox/addon/customcss-injector/

CSS override: https://addons.mozilla.org/fr/firefox/addon/css-override/

Oli Grid CSS : https://addons.mozilla.org/fr/firefox/addon/oli-grid-css/

Stylus: https://addons.mozilla.org/fr/firefox/addon/styl-us/

Stylebot: https://addons.mozilla.org/fr/firefox/addon/stylebot-web/

ColorZilla : https://addons.mozilla.org/fr/firefox/addon/colorzilla/

Webdeveloper: https://addons.mozilla.org/fr/firefox/addon/web-developer/

Font finder : https://addons.mozilla.org/fr/firefox/addon/font-inspect/

Measure it : https://addons.mozilla.org/fr/firefox/addon/measure-it/

Windows resizer : https://addons.mozilla.org/en-US/firefox/addon/window-resizer-webextension/

Code tech: https://github.com/zaach/codetch-ext

Page performance test: https://addons.mozilla.org/en-US/firefox/addon/page-performance-test/

Autres outils

Real favicon generator: https://realfavicongenerator.net/

Script HTML/CSS : http://www.outils-web.com/page-script-html-css-menu.asp

Korben : https://korben.info/category/infos/developpement

Respectemesdatas.fr est une nouvelle plateforme géniale lancée par l’UFC-que-Choisir, permettant de consulter la liste des données que les GAFAM et autres géants du numérique détiennent à votre sujet. Un formulaire simplifié permet ensuite d’exiger leur suppression. Découvrez tout ce que vous devez savoir sur cet outil, et comment l’utiliser !

Il y a quelques jours, un baromètre révélait que les Français ont baissé les armes face aux GAFAM. La plupart d’entre nous sont conscients de divulguer leurs données sur internet, mais s’y sont résignés face à l’absence de solutions.

Interrogés par TF1 dans le cadre d’un reportage, plusieurs internautes admettent avoir abandonné le combat : « On clique tous sur « tout accepter » en voyant très bien qu’il y a plein de petites choses que l’on ne regarde pas » reconnait l’un d’entre eux.

Une autre femme adopte le même ton fataliste : « Avec tout ce que l’on envoie, tout ce que l’on transmet, c’est sûr que c’est collecté ». Aux yeux de ces consommateurs, il est tout bonnement inutile de se débattre contre les tentacules des géants de la tech?

Une véritable mine d’or pour les GAFAM

De nombreux Français négligent la protection des données par insouciance. Dans leur esprit, la collecte de leurs informations demeure un point de détail sans conséquences dans le monde réel.

En réalité, l’impact potentiel est loin d’être anecdotique. Outre les risques de phishing par des cybercriminels, vos données personnelles peuvent faire augmenter le prix de vos achats en ligne.

Par exemple, un billet d’avion ou une course en taxi peuvent coûter plus cher selon la marque de téléphone utilisé pour passer commande. Il est clair que personne ne souhaite payer à prix fort, mais la majorité présume qu’il n’existe pas d’alternative.

Respectemesdatas : une plateforme lancée par l’UFC-que-Choisir

Pourtant, de nombreux outils existent pour naviguer sur le web de façon confidentielle. Le véritable problème est que ces protections sont méconnues, ou trop difficiles d’utilisation.

Afin de remédier à ce problème, l’UFC-que-Choisir vient de créer un nouvel outil accessible en ligne à l’adresse respectemesdatas.fr. En se rendant sur ce site web, chaque internaute peut « découvrir concrètement quelles sont les données personnelles collectées par les plateformes qu’il utilise, mais aussi et surtout, d’exercer ses droits de rectification, de suppression, et à l’oubli ».

Le président de l’association de consommateurs, Alain Bazot, explique que « les géants du web ont fait de nous des data, mais ça n’est pas une fatalité. Aujourd’hui, il est temps de renverser la tendance, de réagir en reprenant la main sur nos données personnelles. Nous avons des droits, exerçons-les ».
Comment supprimer vos données avec Respectemesdatas ?

Cette plateforme a pour avantage la simplicité d’utilisation. Il suffit de cliquer sur « Récupérer vos données », et sur le nom de l’entreprise de votre choix. Au total, 9 firmes sont passées au crible dont Google, Facebook, TikTok, Uber et Tinder.

Vous n’avez plus ensuite qu’à suivre les instructions. L’outil vous redirige d’abord vers le site de l’entreprise sélectionnée, pour y télécharger un fichier contenant toutes les données collectées à votre sujet depuis de nombreuses années.

Ce processus peut prendre quelques minutes, voire quelques jours selon l’organisme. Une analyse statistique est effectuée par la plateforme. Notons qu’aucune donnée n’est téléchargée sur les serveurs de l’UFC-que-Choisir : le traitement a lieu sur votre propre ordinateur.

Le site affichera ensuite plusieurs graphiques, permettant de visualiser facilement les données détenues par l’organisme choisi à votre sujet et la façon dont elles sont utilisées.

Ceci permet de savoir quel type d’informations est collecté et quelles activités sont pistées. Vous pourrez aussi découvrir quelles publicités ciblées vous sont présentées en fonction de vos données, ou encore vos centres d’intérêt identifiés par l’entreprise.

Pour exercer vos droits à la rectification et à l’oubli, il ne vous reste qu’à remplir un formulaire simplifié au maximum. Comme le conseille le directeur juridique de l’UFC-que-Choisir, Raphaël Bartlomé, « rappelez-vous que vous avez le droit de tout effacer. Ça ne va rien changer à vos habitudes, mais, au moins, ils n’auront pas toutes ces informations sur vous ».

JeNeSuisPasUneData : une vaste campagne de sensibilisation

Afin d’accompagner le lancement de cet outil, l’UFC-que-Choisir lance aussi une campagne de sensibilisation « #JeNeSuisPasUneData ». L’objectif est « d’éveiller les consciences en révélant quels sites détiennent quelles informations et surtout mobiliser les internautes, en facilitant leur démarche pour exercer leurs droits ».

Aux yeux de l’association, « il est primordial que les consommateurs réalisent l’importance des données qu’ils laissent sur internet et les conséquences que cela peut impliquer sur leur vie ».

Alors que la CNIL vient également de lancer un service dédié à l’IA, il semble que la France ait finalement décidé de se dresser contre l’emprise des GAFAM. C’est une bonne nouvelle, car le numérique va continuer à transformer nos us et coutumes au fil des années à venir?

Outre ce nouvel outil, rappelons qu’il existe d’autres solutions accessibles pour limiter votre partage de données. Vous pouvez utiliser la navigation privée, refuser les cookies en arrivant sur un site web, masquer toutes vos informations sur les réseaux sociaux, mais aussi utiliser un VPN pour déguiser votre adresse IP et votre emplacement géographique !