Avoiding Unnecessary Paints - HTML5 Rocks
http://www.html5rocks.com/en/tutorials/speed/unnecessary-paints
-
-
Two.js
http://jonobr1.github.io/two.jsAt its core two.js relies on a scenegraph. This means that when you draw or create an object, two actually stores and remembers that. After you make the object you can apply any number of operations to it — e.g: rotation, translation, scale, etc. Two.js features a Scalable Vector Graphics Interpreter. This means developers and designers alike can create SVG elements in commercial applications like Adobe Illustrator and bring them into your two.js scene.
- #DOM
-
How to lose weight in the browser
http://browserdiet.comThe definitive #front-end performance guide
- #http
- #HTML
- #JavaScript
- #HTML
-
Je cherche à décrire un ensemble d’événements (un #calendrier quoi) dans un flux #Atom. Je sais le faire pour un contenu classique, mais évidemment les événements ont des informations supplémentaires non prévues (en premier lieu la date de fin). Je cherche donc des extensions qui permettraient déjà cela.
Pour l’instant, je n’ai trouvé que #Google-Calendar qui fournit ses événements en Atom.
Ici la description complète de l’#API en Atom :
https://developers.google.com/google-apps/calendar/v2/reference
mais il n’y a aucun exemple du #XML (seulement les schémas) pour comprendre plus rapidement (et copier-coller aussi, du coup).Ici un article qui décrit le format et qui donne vraiment le XML :
Display Google Calendar events on your PHP Web site with XPath
http://www.ibm.com/developerworks/library/os-php-xpath-
-
faut rester proche, tant que faire se peut, de iCal... facile à dire, je sais, mais j’ai essayé quand j’étais un jeune codeur fou (avec RSS en fait) :p
Le truc, c’est qu’il n’y avait pas tellement le choix, fallait adopter une convention pour encapsuler les infos iCal dans les balises RSS... et avoir un décodeur en face... une sorte de standard dans le standard... Bref, il manque une RFC (ping @stephane) :)
Ce serait chouette que tu parviennes à quelque chose, bon courage ! ;)
-
Remarque, je dis ça, mais t’as peut-être pas le choix, le mieux serait que ton flux soit en iCal, ça serait plus simple...
-
Je ne sais pas... Je ne vois pas trop pourquoi rester absolument proche de ical, sinon autant utiliser un #flux #ical (ce que je vais faire de toute façon aussi).
Atom a déjà des éléments de base pour certaines informations (description, auteurs, date de mise à jour du contenu, date de publication, etc). Donc on utilise déjà ces infos. Pour ce qui manque, le principe d’Atom c’est d’ajouter des extensions : autrement dit des schémas supplémentaires déclarés au début dont on ajoute des éléments dans les entrées ou dans le flux.
Par exemple j’ai déjà utilisé opensearch pour décrire que ça renvoyait pas l’ensemble, qu’il y avait plusieurs pages, le total, etc.
Ou encore georss pour ajouter les coordonnées.Mais à part le format de Google, je ne vois rien d’autres de standards pour « la date de fin » par exemple. Ainsi que le lieu (pas les coordonnées, mais le nom de l’endroit et son adresse).
Bon après j’ai d’autres trucs à mettre dedans mais c’est moins générique : le ou les tarifs, le ou les publics, la distribution (artistes, intervenants, etc).
-
Ah ben voilà @james nos messages se sont croisés. Oui il y aura aussi un flux ical. Mais c’est pour proposer plusieurs formats de flux différents.
-
-
Mais oui ! un #microformat ! :)
Sinon, parallèlement à ça : je crois que #SPIP ne sait pas lire iCal. Il me semble que c’était d’ailleurs pour ça que j’avais essayé d’échanger des évènements entre sites avec du RSS. C’est con, hein, je sais, mais au final, si les CMS savait lire iCal aussi simplement qu’ils lisent du XML, ça serait cool.
-
Dans « content » (avec type="html") tu veux dire @fil ?
Oui effectivement, cela permettrait d’avoir un flux lisible par tous les lecteurs classiques, et d’avoir en même temps les infos récupérables, une à une, par une machine.
Mais baliser le content HTML avec des microformats n’empêche pas d’ajouter les bonnes balises XML si des extensions possibles existent. Ou des balises « métiers » propres au site, pour ce qui n’existe pas. Bon ok ça augmente la taille du code, mais ça évite de scanner deux fois avec deux parseurs différents (un pour le XML du Atom, un pour trouver des microformats dedans ensuite) pour ceux qui connaîtraient à l’avance les balises utilisées.
La combinaisons des deux me semblent pas mal pour couvrir tous les cas.
-
-
-
Voici un document qui explique comment intégrer correctement les microformats dans une liste de contenus, et notamment dans un flux Atom :
http://www.opensearch.org/Documentation/Recommendations/OpenSearch_and_microformats(J’utilise déjà en partie OpenSearch pour indiquer le nombre total de résultats, le pas de la pagination, etc.)
-
-
-
Et ça ?
Adding event times and location to RSS and Atom feeds | Oxford University Computing Services, In a pickle
http://blogs.oucs.ox.ac.uk/inapickle/2009/12/16/adding-event-times-and-location-to-rss-and-atom-feeds<ev:startdate>2010-01-18T16:00:00+00:00</ev:startdate>
<ev:enddate>2010-01-18T17:00:00+00:00</ev:enddate> -
Ah super intéressant, merci @touti.
Cette page de l’université d’Oxford propose deux solutions :
– le module pour RSS « event » du W3C qui est en brouillon :
http://web.resource.org/rss/1.0/modules/event
– le format xCal qui est une mise en XML du format iCal, et qui est aussi en brouillon :
http://tools.ietf.org/html/draft-royer-calsch-xcal-03Le deuxième étant beaucoup plus complet.
On y trouve des exemples (simples) d’utilisation. Et aussi une inclusion de #vCard dans un flux Atom.
-
Ah et pour @james : lire du iCal dans SPIP et mieux encore directement dans une boucle, c’est en fait déjà possible avec DATA et le plugin « icalendar » de @fil :
http://contrib.spip.net/Plugin-iCalendar
http://zone.spip.org/trac/spip-zone/browser/_plugins_/icalendarÇa inclut une classe PHP qui a l’air assez complète (que je viens de mettre à jour).
-
-
-
BEM: Methodology of Effective Site Development
http://bem.infoBEM stands for Block-Element-Modifier. It’s a way to modularize the development of pages. By breaking things into Blocks, being able to break those into Elements, and then use Modifiers on them, we get a neat TLA and a methodology where each part can advance rapidly and independently.No matter if you are a large team or a single developer. BEM gives its benefits for all.
- #By
-
-
Yup, mais lors de mon premier passage je n’avais pas vu (ou ça n’existait pas ?) le coté XJST et tout le reste du tooling qui va avec. La méthodo n’est pas nouvelle, c’est dans les pratiques depuis pas mal de temps, mais l’outillage me semble bien meilleur que les implémentations ad hoc précédentes (en tout cas celles que j’ai utilisées moi-même).
-
et donc : #XJST :)
XJST is a DSL for universal data transformations with compiler written on top of the Node.js and OmetaJS and output code working in any browser or on server-side.
une sorte de méthode de transformation de données universels, comme XSLT mais implémentée en #javascript ?
et alors, du coup, c’est quoi un DSL ? :)
#jargon pour ouvriers intellectuels du web :p
-
Oui, ça reprend des idées de XSLT (principalement les templates et la façon dont ils héritent) ce qui est une très bonne idée quand on doit transformer des données sans vouloir parcourir l’arbre à la main : faire du pattern matching, c’est ’achement mieux.
Un DSL : Domain-Specific Language. C’est un petit langage développé pour les besoins spécifiques d’un domaine. Souvent de nos jours (mais pas toujours) par des ajouts ou contraintes sur un langage existant. En gros c’est du syntax sugar sur une API (je dis ça en bien, hein).
-
-
-
Ah ben ça tombe bien qu’ils soient dans Smashing, ils méritent un peu de coverage.
Je suis moins fan de OOCSS, enfin en tout cas de la métaphore OO appliquée ici, mais il ne faut pas le dire à Stubbornella :
-
angular/angularjs-batarang · GitHub
https://github.com/angular/angularjs-batarangAngularJS WebInspector Extension for Chrome
-
CSS browser rendering optimizations :
http://addyosmani.com/blog/devtools-visually-re-engineering-css-for-faster-paint-times
Avec (et pour ?) Chrome/webkit...
-
LESS « The Dynamic Stylesheet language
►http://lesscss.orgLa documentation de less : un langage pour génération de feuilles de style dynamiques
Nombreux exemples- #DOM
-
Meteor
►http://meteor.comMeteor is an open-source platform for building top-quality web apps in a fraction of the time, whether you’re an expert developer or just getting started.
-
très impressionnant ! #javascript #web #framework #open-source (licence MIT) basé sur #node.js
rappelle un peu OCsigen http://seenthis.net/messages/79053
pas mal aussi pour faire de la #cartographie avec #leafletjs
https://github.com/bevanhunt/meteor-leaflet-demo
http://leaflet.meteor.comou des #présentations
https://github.com/bensonk/liveslideset des packages comme #D3.js ou #underscore
►http://documentcloud.github.com/underscore- #JavaScript
- #Ruby
- #iPad
- #EcmaScript
-
Je l’ai chopé ici
http://addyosmani.github.com/todomvc
#Montage aussi a l’air rigolo
http://montagejs.org- #DOM
-
-
-
-
hint.css - A tooltip library in CSS
http://kushagragour.in/lab/hintHint.css is a tooltip library written in SASS which uses only HTML/CSS to create simple tooltips.
It does not rely on any JavaScript and rather uses data-* attribute, pseudo elements, content property and CSS3 transitions to create the tooltips. Also it uses BEM naming convention particularly for the modifiers.
- #HTML
-
#SASS : Syntactically Awesome Stylesheets : un métalangage de feuilles de style en cascade (CSS). C’est un langage de script interprété en tant que CSS.
http://en.wikipedia.org/wiki/Sass_(stylesheet_language)
#maitre_capello ^^
-
-
Alors je continue :)
#BEM (pour Block, Element, Modifier) : Une convention de nommage des styles CSS avec une approche « Orienté Objet »...
http://bem.info/method/definitions#LESS : un langage pour programmer des feuilles de styles dynamiques (traitées en javascript pour produire des feuilles de styles statiques).
►http://lesscss.org- #DOM
-
Zepto.js: the aerogel-weight #jQuery-compatible #JavaScript library
http://zeptojs.com- #DOM
- #HTML
- #HTML
- #Internet Explorer
-
-
la fonction http://zeptojs.com/#$.camelCase a retenu mon intention pour #seenthis : elle serait intéressante pour les tags qu’on utilise ici, je ne sais pas sous quelle forme, afin que l’abonnement à un mot-clé ramasse au passage toute les forme d’écriture possible. Ex : domaine_public donne domainePublic pour qui les tags domaine-public et domainepublic correspondraient... ça ne répond pas à tous les cas de synonymie mais ça aiderait un peu.
Je sais pas si je suis clair :)
- #DOM
- #HTML
- #HTML
- #Internet Explorer
-
-
-
Un peu hors-propos, mais à propos quand même
https://en.wikipedia.org/wiki/Lemmatisation
#lemmatisation
http://lemmatizer.org
https://lucene.apache.org/core
-
HTML Microdata Nightly
http://www.w3.org/html/wg/drafts/microdata/masterThis specification defines the HTML microdata mechanism. This mechanism allows machine-readable data to be embedded in HTML documents in an easy-to-write manner, with an unambiguous parsing model. It is compatible with numerous other data formats including RDF and JSON.
-
What Was Hot in 2012: Month By Month
http://net.tutsplus.com/articles/general/what-was-hot-in-2012-month-by-monthWell, 2012 has come to a close. A plethora of excellent tutorials and articles were published throughout the year, both here on Nettuts+ and elsewhere around the web. To document the year, I compiled a list of sixty of the best tutorials, month by month …
Source: Web development tutorials, from beginner to advanced - Andrew Burgess
-
mbostock/d3
https://github.com/mbostock/d3/wikiD3.js is a JavaScript library for manipulating documents based on data. D3 helps you bring data to life using HTML, SVG and CSS. D3’s emphasis on web standards gives you the full capabilities of modern browsers without tying yourself to a proprietary framework, combining powerful visualization components and a data-driven approach to DOM manipulation.
- #HTML
- #D3 library
- #JavaScript
- #HTML
-
Using media queries from code | Document Object Model (DOM) | MDN
https://developer.mozilla.org/en-US/docs/DOM/Using_media_queries_from_code?redirectlocale=en-US&redirectslug=CJouer avec les media queries depuis un script, par exemple :
var mq = window.matchMedia(“(max-width: 640px)”);
if (!mq.matches)
alert(’prout’);The DOM provides features that make it possible to test the results of a media query programmatically. This is done using the MediaQueryList interface and its methods and properties. Once you’ve created a MediaQueryList object, you can check the result of the query or, alternatively, receive notifications automatically when the result changes.
-
How web browsers work - from HTML soup to what you see... A detailed step by step tour : http://taligarsiel.com/Projects/howbrowserswork1.htm
-
Very good paper, highly recommended. Very detailed, rather technical. Not for the regular surfer but the Web programmer must read this paper.
-
-
S’il y en a que la feuille de style minimaliste du doc rebute : ►http://www.html5rocks.com/en/tutorials/internals/howbrowserswork
(je savais bien que j’avais déjà lu cet article... :) )
-
-
Useful JavaScript Libraries and #jQuery Plugins | Smashing Coding
http://coding.smashingmagazine.com/2012/09/23/useful-javascript-libraries-jquery-plugins-web-developersWeb Forms:
forms framework – auto-saving drafts – file upload (and resuming large downloads) – <select> boxes – modal boxes – form accordion – dynamic labels – drop-down with images – tooltips – extended input – form validation – credit card validation (alternative) – email check – password complexity
Web Typography:
repairing vertical baseline – align text to a grid – responsive measure – fixing widows – fluid line height – scalable headlines (or smart headlines) – Lettering.js – Kerning.js
Little Time-Savers:
exchange rates and currency – date/time formatting – relative timestamps – number and currency formatting – cookies.js – zip.js – extra string methods – countdown.js – sticky content – Google Maps – interactive maps – progress bar – favicon notifications (or Notificon)
Images, Maps, Graphs:
world maps – subway map – Google maps – open source maps – SVG fallback – gauges – graphs – timeline – Retina display – magnifying glass – interactive graphs – plots – time visualization -
Jasmine | introduction.js
http://pivotal.github.com/jasmineJasmine is a behavior-driven development framework for testing #JavaScript code. It does not depend on any other JavaScript frameworks. It does not require a DOM. And it has a clean, obvious syntax so that you can easily write #tests.
ping @jasmine
- #JavaScript
- #DOM
- #spy
-
Paul Irish publie une liste de développeurs qu’il admire (dans le domaine du Web). Ça donne évidemment une excellente liste de liens :
http://paulirish.com/2012/developers-we-admireOne of the good things about having the eyeballs of many people is that you now have the ability to throw other people into the limelight that completely deserve to be in it. Divya Manian and I have been, for a while now, putting together a list of people in the front-end development community who, in our opinion, could use more broad acknowledgment and attention.
-
leak-finder-for-javascript - Tool for finding memory leaks in JavaScript programs. - Google Project Hosting
https://code.google.com/p/leak-finder-for-javascript“Leak Finder for JavaScript works against the Developer tools remote inspecting protocol of Chrome, retrieves heap snapshots, and detects objects which are ‘memory leaks’ according to a given leak definition.”
Un outil pour analyser les scripts d’un site et trouver les éléments qui peuvent bouffer la ram (memory leaks).
-
Components - TJ Holowaychuk
http://tjholowaychuk.com/post/27984551477/componentsWith the advent of numerous client-side JavaScript package managers, I wanted to write up some of my thoughts about the fragmentation that we have today, and some ways that I think we could really improve delivering packages a community. Keep in mind that these are only my opinions, everyone has done a great job and there’s a lot of cool work going on out there.
Well worth a read.
-
Visualisation Réseaux Infographie Cartographie
How to Make an Interactive Network Visualization
http://flowingdata.com/2012/08/02/how-to-make-an-interactive-network-visualization
By Jim Vallandingham
Interactive network visualizations make it easy to rearrange, filter, and explore your connected data. Learn how to make one using D3 and JavaScript
-
Ninja power : open-source HTML5 toolset aims to enable richer Web apps
http://arstechnica.com/information-technology/2012/07/ninja-power-open-source-html5-toolset-hopes-to-unleash-the-webModern HTML rendering engines and emerging standards make it possible to create a new class of rich experiences that could previously be achieved only with native development toolkits—but developers need better Web development frameworks and authoring tools in order to take advantage of the possibilities.
-
AngularJS — Superheroic JavaScript MVC Framework
http://angularjs.orgHTML is great for declaring static documents, but it falters when we try to use it for declaring dynamic views in web-applications. AngularJS lets you extend HTML vocabulary for your application. The resulting environment is extraordinarily expressive, readable, and quick to develop.
C’est vrai qu’il y a des bonnes idées... mais « Superheroic », gné ?
-
Powerful New CSS- and JavaScript-Techniques (2012 Edition) | Smashing Coding
►http://coding.smashingmagazine.com/2012/06/21/powerful-new-cssjavascript-techniquesSince our last round-up of useful CSS techniques, we’ve seen a lot of truly remarkable CSS geekery out there. With CSS3, some of the older techniques now have become obsolete, others have established themselves as standards, and many techniques are still in the “crazy experimentation” stage.
Some of those techniques are just for showing off, others are well-worth revisiting.
#CSS
