#jquery One Page #scroll by Pete R. | The Pete Design
▻http://www.thepetedesign.com/demos/onepage_scroll_demo.html
Tags: jquery scroll #javascript
#jquery One Page #scroll by Pete R. | The Pete Design
▻http://www.thepetedesign.com/demos/onepage_scroll_demo.html
Tags: jquery scroll #javascript
wearefractal/gulp
▻https://github.com/wearefractal/gulp
The streaming build system
This looks indeed to be a lot more understandable than the rather intricate Grunt.
Kartograph - getting started
▻http://vumaasha.github.io/codehook/kartograph/geomapping/2013/11/24/using-kartograph.html
Tutoriel sur l’utilisation de #kartograph.
#map #svg #shapefile #javascript
#prometteur Faut que je m’y mette, voilà un domaine que je connais pas du tout alors que chaque jour, on me demande de m’y précipiter !
StoryMap JS - Telling stories with maps.
►http://storymap.knightlab.com
StoryMapJS is a free tool to help you tell stories on the web that highlight the locations of a series of events.
#cartographie #histoire #storytelling #javascript #opensource #web-based #storymapjs
ça sent le plugin SPIP qui permet de construire des « stories map » avec une interface « humainement utilisable » :-)
Ha j’y avais même pas pensé, merdum maintenant j’ai envie de le faire :p #todo
WebODF
►http://www.webodf.org
WebODF is a JavaScript library that makes it easy to add Open Document Format (ODF) support to your website and to your mobile or desktop application. It uses HTML and CSS to display ODF documents.
#web-based #odf #édition #javascript #opensource #outil
Freewall : plugin jquery pour réaliser un site en “Dynamic #grid Layouts”
▻http://www.soon7.com/developpements/freewall-plugin-jquery-pour-realiser-un-site-en-dynamic-grid-layouts
Freewal est un plugin jquery assez impressionnant permettant de créer des mises en pages de type block qui se réarrangent automatiquement (un peu comme #pinterest ou #metro) en utilisant des animations #css3. Ceci permet donc de faire des mises en page reponsive en fonction de vos besoin. Vous pouvez le customiser selon vos besoins : […]
#grille #javascript #frontdev #mise-en-page #web
Javascript désactivé, c’est tout pété. Faudrait être sûr de pouvoir l’activer sur un gabarit qui fonctionne déjà quand la lib n’est pas là. Ça ne devrait être qu’un outil en plus pour améliorer chez ceux qui ont javascript.
HTML5 Canvas Basic Tutorials Introduction
▻http://www.html5canvastutorials.com/tutorials/html5-canvas-tutorials-introduction
Tutoriels pour l’utilisation de Canvas en HTML5 : traçage de lignes, formes, dégradés, utilisation des images et du texte...
+ utilisation des librairies js KineticJS et Three.js
#canvas #html5 #tutoriel #kinetic #three #javascript #librairie
Breaq, a resizer bookmarklet - CSS | Thomas Zilliox
►http://tzi.fr/CSS/Responsive/Breaq-bookmarklet
Breaq is a bookmarklet that allows you to resize a website to its critical sizes. It automatically detects the breakpoints in pixel and em
#layout #html #javascript #responsive #mobile #taille #critique
Usable and flexible Gruntfile modularization
La suite et le début de la fin de mes interrogations sur la modularisation de la configuration et des tâches #grunt, pour un gros projet de « refactoring »
Je voulais quelque chose de simple, qui autorise un découpage orienté fonctionnalité, maintenable et facilitant l’appropriation par les integrateurs / devs front de l’équipe.
Plutôt que d’avoir un énorme Gruntfile inmaintenable et incompréhensible, on le découpe en petits morceaux consistants avec l’organisation fonctionnelle du site.
Pour le début de ma démarche : ▻http://seenthis.net/messages/198290
Juste pour dire que j’ai corrigé un bug dans le chargement des fichiers de tâche (’grunt.task.loadTasks()’ ne prend pas/plus en paramètre un filepath mais un path, ce qui foutait tout par terre). Désormais j’utilise ’require()’.
Attention, du coup l’embed sur @seenthis n’est plus à jour.
Strut - An HTML5 #presentation Editor
▻http://strut.io/showcase.html
Tags: presentation #powerpoint #impress.js #tool
NielsLeenheer/WhichBrowser
▻https://github.com/NielsLeenheer/WhichBrowser
“This is a extremely complicated and almost completely useless browser #sniffing library. Useless because you shouldn’t use browser sniffing. So stop right now and go read something about feature detecting instead. I’m serious. Go away. You’ll thank me later.” Tags: #user_agent_sniffing #navigateur #identification sniffing #WhichBrowser #JavaScript #PHP
Générer sa propre webfont à partir d’images SVG, avec codes unicodes personnalisés. Le tout automatisé avec #Grunt.
En gros, on met des fichiers svg dans un répertoire, et des fichiers .eot, .woff, .ttf et .svg sont générés.
L’article expliquant la démarche :
▻http://www.insertafter.com/articles-gruntjs_font_icons.html
Le plugin grunt :
▻https://github.com/nfroidure/grunt-svgicons2svgfont
Merci @nfroidure :)
ca veut dire quoi avec « codes unicodes personnalisés ». c’est à dire que cela met des caractères dans les parties unicodes « non affectées à des caractères » ?
Oui, j’ai l’impression, mais seulement si tu veux. :)
Il faut nommer l’image source svg avec l’unicode souhaité : « uE002-arrow-down.svg » par exemple.
Un autre intérêt de générer ses fontes avec des noms de fichiers d’icônes préfixés avec le caractère Unicode, est de pouvoir utiliser le bon caractère Unicode quand cela fait sens.
Par exemple, si vous avez un icône « plus » permettant d’avoir un icône sur un bouton d’ajout au panier, cela peut être utile d’utiliser le code Unicode du signe « + » (U+002B) plutôt qu’un code faisant parti de la plage des codes réservés à un usage privé.
Utile aussi pour garder un site - utilisant les webfonts pour les icônes ou pictos - utilisable sur des connexions lentes ou dégradées.
@Maïeul C’est même « pire » l’idée est de ne pas avoir de caractères pour cette police particulière que ne servira qu’à afficher des icones.
L’avantage étant que ces icones auront un beau rendu quelle que soit la taille …
▻https://github.com/flatiron/plates
Light-weight, logic-less, DSL-free, templates for all javascript environments!
var Plates = require(’plates’);
var html = ’<div id="test">Old Value</div>’;
var data = { “test”: “New Value” };
var output = Plates.bind(html, data);
var html = ’<img data-foo="bar" src='https://seenthis.net/'></img>’;
var data = { “imageurl”: “▻http://www.nodejitsu.com” };
var map = Plates.Map();
map.where(’data-foo’).is(’bar’).use(’imageurl’).as(’src’);
console.log(Plates.bind(html, data, map));
Climate change : how hot will it get in my lifetime ? - interactive | Environment | theguardian.com
▻http://www.theguardian.com/environment/interactive/2013/sep/27/climate-change-how-hot-lifetime-interactive
une animation pour présenter les perspectives de réchauffement climatique
Avec interaction pour personnaliser « au cours de ma vie » (saisie de sa date de naissance)
A priori tout en SVG + javascript
#animation #climat #svg #javascript #interactif #température #réchauffement
▻https://gist.github.com/0gust1/7543330
Inventory of solutions to modularize grunt configuration for large project & (legacy) codebases
Je m’interroge sur les bonnes façons d’utiliser #grunt pour gérer la couche « front-end » de gros sites. J’ai déjà recensé quelques outils, on m’a fait quelques retours. Je prends tout.
online gravitational field line explorer :
▻http://webpages.charter.net/appcore/fractal/field
This is hard-coded to six points. You can set the (x, y) coordinates and their mass. Click the `Render’ button to draw the damn thing. You can also alter the number of lines per “positive mass” point and iterations...
Glide.js : un #slider léger, responsive et touch-friendly !
▻http://www.soon7.com/developpements/glide-js-un-slider-leger-responsive-et-touch-friendly
Glide.js est un petit slider très sympathique, jugez-par vous même : - Léger : environ 4,5 Kb compressé - Transition #css3 ultra rapides (avec fallback en #javascript pour les anciens navigateurs) - Responsive - fonctionne sur tablettes et smartphones - API avec callbacks - Gère les événements Swipe - Flèches et bulles de navigation - […]
On lit sur le web que deux seenthisiens ici présents, @notabene et @nhoizey, aurait développé un carrousel à la fois #responsive et accessible. Tout en « em » et utilisable au clavier.
Est-il ou sera-t-il un jour quelque part à télécharger en licence libre ?
#accessibilité #carrousel #intégration #design #conception #html #css #javascript #slider
Il se murmure que les intéressés pourraient demander à leur client l’autorisation de publier une version générique de ce code… ;-)
Par contre, ça ne serait sans doute pas immédiat, le site concerné n’étant pas encore en ligne.
Yeah, super, c’est déjà un bon début. :)
Je dis tout comme l’autre intéressé : ce qui est cool c’est que c’est un client public, donc y’a moyen ouais.
Faudrait qu’on vous raconte les différentes approches par contre, parce que par exemple @goetsu n’aborde pas du tout les carrousels comme on l’a fait sur le cas dont auquel qu’on s’occupe.
Je dirais que sur le fond il a sans doute plus raison que moi parce que je le porte en haute estime. Voir le travail sur les carrousels de ▻http://elysee.fr par exemple.
(On en causait lors de l’atelier Paris Web que j’ai bordélisé comme un gros sauvage à la demande dudit @goetsu) :)
PS : Faudra que je pense à dire à ▻http://twitter.com/goetsu d’ouvrir un compte Seenthis, quand même.
♥ Yes I, kiss, share, love, yo ! ♥
@rastapopoulos pas eu l’occasion de formaliser avec le client, mais les sources sont visibles ici : ▻http://www.aquitaine.fr
(on share un peu, quoi) :)
Celui-là a l’air pas mal aussi, responsive, accessible au clavier, etc.
▻http://seenthis.net/messages/297966
FileAPI – Everything You Need To Work With Files Using JavaScript
►http://mailru.github.io/FileAPI
#file #upload #javascript
ce @b_b, trop rapide - ▻http://seenthis.net/messages/185209
Resumable.js, #javascript magic for simultaneous, stable and resumable uploads
▻http://www.resumablejs.com
The library is designed to introduce fault-tolerance into the #upload of large files through HTTP. This is done by splitting each files into small chunks; whenever the upload of a chunk fails, uploading is retried until the procedure completes. This allows uploads to automatically resume uploading after a network connection is lost either locally or to the server. Additionally, it allows for users to pause, resume and even recover uploads without losing state.
Resumable.js does not have any (...)
Offline.js – Handle your users losing their internet connection like a pro
▻http://github.hubspot.com/offline/docs/welcome
Offline.js is a library to automatically alert your users when they’ve lost internet connectivity, like Gmail.
It captures #AJAX requests which were made while the connection was down, and remakes them when it’s back up, so your app reacts perfectly.
It has a number of beautiful themes and requires no configuration.
#js #javascript #webapp
bon sur leur site ça ne marche (pour moi) que sous Chrome — mais ni sous Firefox ni sous safari
peut-être que ceci peut remplacer : ▻http://shaneriley.com/jquery/remember_state
#jPlayer : HTML5 Audio & Video for jQuery & Zepto
▻http://jplayer.org
“jPlayer is the completely free and open source (MIT) media library written in #JavaScript. A jQuery plugin, (and now a Zepto plugin,) jPlayer allows you to rapidly weave cross platform audio and video into your web pages. jPlayer’s comprehensive API allows you to create innovative media solutions while support and encouragement is provided by jPlayer’s active and growing community.” Tags: #vidéo #lecteur (...)
rangy - A cross-browser JavaScript range and selection library - Google Project Hosting
▻http://code.google.com/p/rangy/#Basic_usage
A cross-browser JavaScript range and selection library. It provides a simple standards-based API for performing common DOM Range and Selection tasks in all major browsers, abstracting away the wildly different implementations of this functionality between Internet Explorer up to and including version 8 and DOM-compliant browsers.
Tutoriel sur l’installation et la configuration d’ElasticSearch (partie 1)
▻http://zenika.developpez.com/tutoriels/java/installation-configuration-elasticsearch/#LV
ElasticSearch est un moteur de recherche open source clusterisé, automatiquement sauvegardé et répliqué, interrogeable via une API REST et proposant toutes les fonctionnalités d’un moteur de recherche dernière génération.
Swiffy : convertir du Flash (SWF) en HTML5
▻http://www.alsacreations.com/astuce/lire/1556-flash-html5-swiffy.html
un outil en ligne de google pour convertir des fichiers SWF en HTML5
génère des fichiers un peu lourds mais fonctionne (à priori) correctement (interactions utilisateurs, liens...)
#flash #html5 #swiffy #google #en-ligne #web-based #convertisseur #javascript #outil