Skip to content

Innovations citoyennes

Pour que les citoyens proposent leurs solutions, et reprennent le pouvoir.

  • Accueil
  • Règlement
  • Articles
  • Participez
  • Votez
  • Chatez
  • Echangez
  • Interagissez
  • Sites amis
  • Toggle search form

Outils gratuits & ressources pour développeurs front end

Posted on 19 octobre 202220 octobre 2022 By Sandokan Damaio Aucun commentaire sur Outils gratuits & ressources pour développeurs front end

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

Ressources et outils pour développeurs front end

Navigation de l’article

Previous Post: Créer votre propre moteur de recherche privée (simplement)
Next Post: Ressources d’outils en ligne -HTML/CSS

Laisser un commentaire Annuler la réponse

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Innovations RSS

Repérer les pesticides à l’aide du deep learning

L’excès de pesticides dans les aliments est un sérieux danger pour la santé publique. Une détection rapide et en amont… [...]

Des pistolets et des fusils avec un mode non létal
Des pistolets et des fusils avec un mode non létal

Anicet Mbida nous livre chaque matin ce qui se fait de mieux en matière d'innovation. [...]

De futures constructions en pâte de mycélium

Ces dix dernières années ont vu un élargissement important des recherches sur les biomatériaux. Une tendance qui concerne notamment les… [...]

Conseils pour réussir l’écoute-client en phase d’avant-projet

Vous êtes consultant indépendant et vous voulez pousser vos clients à atteindre leurs objectifs ? L’écoute-client est un élément clé pour… [...]

Un robot médical inspiré directement du pangolin

Les robots mous miniatures pourraient représenter le futur de nombreuses procédures médicales. En effet, leur capacité à atteindre des régions… [...]

Logiciels libres RSS

#184 - Le DSA, un texte juridique propice à l'ouverture

Au programme de la 184e émission diffusée mardi 26 septembre 2023 à 15 h 30 : sujet principal : Comment construire collectivement un environnement en ligne plus sûr et transparent… [...]

#184 - Le DSA, un texte juridique propice à l'ouverture

Au programme de la 184e émission diffusée mardi 26 septembre 2023 à 15 h 30 : sujet principal : Comment construire collectivement un environnement en ligne plus sûr et transparent… [...]

Un créateur passe de DC (Comics) à DP (Domaine Public)
Un créateur passe de DC (Comics) à DP (Domaine Public)

Bill Willingham, fort mécontent de son éditeur DC Comics, décide de porter toutes ses Fables dans le Domaine Public. Il s’en explique dans un communiqué de presse du 14 septembre.… [...]

IA génératives : la fin des exercices rédactionnels à l’université ?
IA génératives : la fin des exercices rédactionnels à l’université ?

Stéphane Crozat est membre de Framasoft, auteur de « Traces » et de « Les libres », et surtout, enseignant à l’Université de Technologie de Compiègne (UTC). Il nous livre ci-dessous une réflexion personnelle… [...]

#183 - « Numérisation » et justice sociale - « Libre à vous ! » diffusée mardi 19 septembre 2023 sur radio Cause Commune

Libre à vous !, l’émission de l’April, l’association de promotion et de défense du logiciel libre. Prenez le contrôle de vos libertés informatiques, découvrez les enjeux et l’actualité du libre.… [...]

Annuaires-des-logiciels-libres-et-open-sourceTélécharger

Copyright © 2022 Innovations citoyennes by Sandokan Damaio.

Powered by PressBook News Dark theme