http://lehollandaisvolant.net/?mode=links&id=20150814192457
Zut, flûte et cacaboudin, moi qui utilise régulièrement innerHTML... bon, en même temps, c'est pour changer le texte d'un bouton ou coller le résultat d'une requête ajax dans un div... la différence ne doit pas être flagrante ^^
Bonne astuce toutefois si les opérations doivent être répétées dans des boucles...
http://lehollandaisvolant.net/?mode=links&id=20160224192625
hop, dans mon snippetvamp ( http://snippetvamp.warriordudimanche.net/snippetvamp.php?snippet=56d2b22163aa4 )
Merci Timo ;-)
https://protonet.info/en/blog/html5-experiment-drag-drop-of-folders/
OOOOOH que c'est intéressant ça, ooooh !
http://overapi.com/
Très utile ça: complet, lisible et en plus chaque ligne est un lien vers une doc plus complète...
via https://link.alexisvuillaume.com/
https://github.com/muaz-khan/RecordRTC/tree/master/RecordRTC-to-PHP
Ha ?! Un script pour enregistrer du son depuis le micro, réécouter et envoyer un fichier son sur un serveur...
Sans flash.
http://bookmarks.ecyseo.net/?Nv-seA
Haaaaa, merci ! ça va m'être utile bientôt ;-)
Hop, dans mon snippetvamp...
onclick="window.setTimeout('location.assign(location.href)',2000);"
http://www.creativejuiz.fr/blog/tutoriels/creer-menu-sticky-avec-javascript-css
à regarder plus tard....
http://pixlcore.com/read/WebcamJS
capturer la webcam en js et l'envoyer à son serveur le tout pour 3ko ?! -> coude
https://gist.github.com/paulirish/5d52fb081b3570c81e3a
Tout ce qui force le reflow... intéressant.
Je copie là:
All of the below properties or methods, when requested/called in JavaScript, will trigger the browser to synchronously calculate the style and layout*. This is also called reflow or layout thrashing, and is common performance bottleneck.
elem.offsetLeft
, elem.offsetTop
, elem.offsetWidth
, elem.offsetHeight
, elem.offsetParent
elem.clientLeft
, elem.clientTop
, elem.clientWidth
, elem.clientHeight
elem.getClientRects()
, elem.getBoundingClientRect()
elem.scrollBy()
, elem.scrollTo()
elem.scrollIntoView()
, elem.scrollIntoViewIfNeeded()
elem.scrollWidth
, elem.scrollHeight
elem.scrollLeft
, elem.scrollTop
also, setting themelem.focus()
can trigger a double forced layout (source)elem.computedRole
, elem.computedName
elem.innerText
(source)window.getComputedStyle()
will typically force style recalc (source)
window.getComputedStyle()
will force layout, as well, if any of the following is true:
min-width
, min-height
, max-width
, max-height
, width
, height
aspect-ratio
, min-aspect-ratio
, max-aspect-ratio
device-pixel-ratio
, resolution
, orientation
height
, width
top
, right
, bottom
, left
margin
[-top
, -right
, -bottom
, -left
, or shorthand] only if the margin is fixed.padding
[-top
, -right
, -bottom
, -left
, or shorthand] only if the padding is fixed.transform
, transform-origin
, perspective-origin
translate
, rotate
, scale
webkit-filter
, backdrop-filter
motion-path
, motion-offset
, motion-rotation
x
, y
, rx
, ry
window.scrollX
, window.scrollY
window.innerHeight
, window.innerWidth
window.getMatchedCSSRules()
only forces styleinputElem.focus()
inputElem.select()
, textareaElem.select()
(source)mouseEvt.layerX
, mouseEvt.layerY
, mouseEvt.offsetX
, mouseEvt.offsetY
(source)doc.scrollingElement
only forces stylerange.getClientRects()
, range.getBoundingClientRect()
More on forced layout
section below covers everything in more detail, but the short version is: for
loops that force layout & change the DOM are the worst, avoid them. rAF
, scroll handler, etc), when the numbers are still identical to the last time layout was done. <center>
Timeline trace of The Guardian. Outbrain is forcing layout repeatedly, probably in a loop.
</center>
CSS Triggers is a related resource and all about what operations are required to happen in the browser lifecycle as a result of setting/changing a given CSS value. It's a great resource. The above list, however, are all about what forces the purple/green/darkgreen circles synchronously from JavaScript.
http://www.tutorialrepublic.com/html-tutorial/html5-web-workers.php
Intéressant ça.
Du code js non bloquant.
http://www.kryogenix.org/code/browser/sorttable/
J'avais oublié de coudifier... ?! Pfff...
http://www.grafikart.fr/tutoriels/javascript/debounce-throttle-642
Intéressant...
http://stackoverflow.com/questions/6974228/problem-using-click-on-inputtype-file
Hahaha !
Je planche sur le problème de fallback de la dropzone sur BoZoN: je déclenche l'ouverture de l'input file caché quand le user clique sur la dropzone (je ne veux pas voir the ugly input file xx
Je créais un évènement que je lançais... problème dans opera/midory/epiphany etc...
Je cherche et je découvre objet.click(); \o/ suis-je donc bête !
J'essaie, ça résoud le problème sous midory/epiphany et ça marche sous firefox/chrome... allez, hop, un test sous opera...
et merde.
Ben en fait Opera refuse qu'on lance un évènement sur un input file caché ! (security reasons: c'est pour ton bien)
Bon, ben je remplace display:none; par opacity:0;height:0;width:0;position:absolute; et... ça marche ! facepalm
Ah, oui, là, c'est vrai que c'est carrément plus sécurisé ... oO
http://mattketmo.github.io/darkroomjs/
Une lib js pour faire de la retouche d'image simpliste (crop/rotate/etc)
via http://www.creativejuiz.fr/blog/actualites-diverses/les-ressources-du-web-18
http://links.la-bnbox.fr/?q3z6iQ
miam en effet ! ^^
Un dépôt fort bien fait et organisé de bouts de codes et de libs javascript vanilla.
http://lehollandaisvolant.net/?id=20150501173212
Oui, c'est vrai que là, c'est exagéré ^^
En tout cas, merci pour le code, je sais déjà où je vais m'en servir ;-)
?JteQYg
[EDIT] après un passage pendant lequel j'ai tout-à-fait sérieusement envisagé la possibilité que mon pc était tout bonnement possédé (vu qu'il m'affichait une autre image que celle que je d&d tout en uploadant la bonne...oO), finalement, il semblerait que je sois parvenu à résoudre le bug...
Hein ?! "Comment t'as fait ?!"
ben... je sais pas en fait, vu que je ne me souviens pas avoir touché quoi que ce soit à par le redémarrage de Firefox... oO
Tu vois, j'aime pas ne pas comprendre pourquoi ça ne fonctionne pas... mais ça ne me rassure pas de ne pas davantage comprendre pourquoi ça se met à marcher... oO
[/EDIT]
Je me suis aperçu que le drag & drop fonctionnait sans pb avec chromium, mais sous Firefox, ça merde parce qu'il refuse de stopper la propagation de l'évènement...
pourtant, encore, ça devrait marcher...
[...]
// init handlers
function initHandlers() {
dropArea.addEventListener('drop', handleDrop, false);
dropArea.addEventListener('dragover', handleDragOver, false);
dropArea.addEventListener('dragleave', handleDragLeave, true );
}
[...]
// drag over
function handleDragOver(event) {
if(event.preventDefault) { event.preventDefault(); }
if(event.stopPropagation) { event.stopPropagation(); }
dropArea.className = 'DDdropzone DDhover';
}
// drag leave
function handleDragLeave(event) {
if(event.preventDefault) { event.preventDefault(); }
if(event.stopPropagation) { event.stopPropagation(); }
dropArea.className = 'DD_dropzone';
}
// drag drop
function handleDrop(event) {
if(event.preventDefault) { event.preventDefault(); }
if(event.stopPropagation) { event.stopPropagation(); }
processFiles(event.dataTransfer.files);
}
[...]
et bin nooooon... quand je d&d une image pour un upload, il veut bien l'uploader MAIS il me l'ouvre aussi à côté...
:'-O
http://rubaxa.github.io/Sortable/
Tiens, ça pourrait me servir ce truc-là...
http://www.lafermeduweb.net/billet/gifshot-generez-des-gifs-en-javascript-depuis-des-images-et-videos-1783.html
-> coude
http://www.creativejuiz.fr/blog/tutoriels/un-onresize-ou-onscroll-plus-performant-en-js
ha, tiens c'est pas con...
http://la-vache-libre.org/virtual-x86-un-emulateur-de-systeme-dexploitation-x86-en-javascript-dans-votre-navigateur-excellent/
C'est des malades...
FAUT QUE JE TESTE !!!!
http://linuxfr.org/news/retour-d-experience-sur-sql-js
Intéressant tout ça... je garde dans un coin.
Lien vers le message anterieur http://sebsauvage.net/links/?ATcsHA
http://www.ecyseo.net/static10/fixed-table-header
Excellent ! voilà qui évite les abus de roulette !
-> coude
http://www.ecyseo.net/article36/filtrer-une-liste-en-pur-javascript-et-sans-jquery
Winkwink nudgenudge mon pote !
et merci, je me coudifie ça pour plus tard ;-)
http://brython.info/gallery/gallery_fr.html
Python à travers javascript...
Bon si c'est pour gérer les blèmes avec les caractères accentués... ( cf http://warriordudimanche.net/shaarli/?kOHfvw re trollolo)
En plus, ça m'a quand même l'air vachement plus lent :
http://www.ecyseo.net/article35/scrolltotop-sans-jquery-en-pur-javascript
Alors, je prends TOUT ce qui peut me permettre de m'en passer: souvent, on colle 100ko de lib pour exploiter deux fonctionnalités...
hop -> snippetvamp ;-)
Merci
http://www.lafermeduweb.net/billet/imgliquid-adapter-dynamiquement-des-images-a-leur-conteneur-1745.html
Peut être utile, mais on peut réaliser la même chose sans JS ou JQ je pense...
http://www.fabricecourt.com/formation/doit-on-justifier-un-texte-sur-le-web/
Sinon, il y a des trucs du genre ça
https://github.com/aristus/sweet-justice
pour 3ko de js (+jquery) ça fait une justification propre...
Lien vers le message anterieur http://lehollandaisvolant.net/?mode=links&id=20140319121006
http://nanobar.micronube.com/
ou c'est pas faux, ce que tu dis... c'est même le seul cas où une progressbar se justifie ^^
puis là, c'est vraiment tiny et pas encombrant visuellement...
Lien vers le message anterieur http://links.yosko.net/?tWlIUw
http://blog.adtile.me/2014/01/16/a-dive-into-plain-javascript/
Encore un tuto pour se passer de jquery... pas mal du tout d'ailleurs.
https://github.com/ondras/html5-animation-framework
Amateur de roguelike ET de starwars ? => click
http://www.greensock.com/gsap-js/
Je n'ai pas testé mais les performances sont alléchantes par rapport aux possibilités de css3 ou d'autres libs (jquery par ex, lent pour les animations)
Voir : http://css-tricks.com/myth-busting-css-animations-vs-javascript/ pour les perfs (l'article est très bon lui aussi)
http://alexking.org/blog/2013/12/22/spam-comment-generator-script
haha excellent...
faudra que je jette un oeil dessus ^^
Lien vers le message anterieur http://sebsauvage.net/links/?lV7wDw
http://coding.smashingmagazine.com/2013/11/12/an-introduction-to-dom-events/
https://togetherjs.com/
Wow: une lib js pour implémenter le travail collaboratif sur son propre site... !
(avec chat, audio chat, tous les curseurs des collaborateurs apparaîssent en même temps, affichage de la présence des users, synchro en temps réel, travail collaboratif...)
ça donne envie !
http://maroslaw.github.io/rainyday.js/
Useless mais très joli:générer un effet de pluie sur une vitre en js... à voir
http://www.webresourcesdepot.com/vex-modern-lightweight-modal-boxes/
Des boîtes modales avec un js standalone de 2ko...
Le plus, apparemment:
"It has smooth animations, a built-in CSS spinner and replaces alert, confirm, and prompt out of the box."
http://links.yosko.net/?bV1UAQ
Si un jour j'ai un moment... pourquoi pas ?
(le mec optimiste ^^)
http://www.webresourcesdepot.com/self-hosted-and-embeddable-html-css-js-playground-editr/
Un éditeur bac à sable pour css+js+html à héberger sur son propre serveur ou à embed où on veut...
A tester !
(difficile de faire aussi bien que dabblet par exemple, mais ça m'a l'air bien quand même !)
http://phpjs.org/
http://www.turnjs.com/#credits
http://dochub.io/#css/
http://imsky.github.com/cssFx
cssFx is a standalone polyfill that inserts the vendor-specific CSS3 properties necessary for old and new browsers. This saves you tons of time, maintenance, and bandwidth! Check it out:
http://microjs.com
http://css-tricks.com/snippets
http://www.dfc-e.com/metiers/multimedia/opensource/jqtransform
forms jquery
http://www.sprymedia.co.uk/index
http://www.catswhocode.com/blog/8-javascript-solutions-to-common-css-problems
http://buildinternet.com/2009/09/sproing-make-an-elastic-thumbnail-menu
http://seebz.net/28-un-javascript-pour-upgrader-internet-explorer.html
http://www.paperblog.fr/1378302/harmony-framework-ou-comment-transformer-du-php-en-javascript
Harmony Framework, ou comment transformer du PHP en Javascript
Harmony est un framework qui nous permet de transformer du PHP en javascript de façon simple et extrêmement efficace. On peut donc imaginer que ça pourra aider les personnes qui ne sont pas tr
http://farhadi.ir/works/smartoptimizer
SmartOptimizer (previously named JSmart) is a PHP library that enhances your website performance by optimizing the front end using techniques such as minifying, compression, caching, concatenation and embedding. All the work is done on the fly on demand.