[Ludique] Défis code en un tweet

Je dirais surtout que même IE11 l'a supprimée cette abomination ! :mrgreen:

Je l'ignore, ça passe toujours sur Chrome en tout cas. Mais c'est vrai que toutes les méthodes DOM font des kilomètres, document.getElementsByTagName, document.querySelectorAll...

Bon pour que cet énoncé soit faisable, je propose de passer document.querySelectorAll en paramètre :

Code:

---

1 2 3

(function negatifPage($){   })(function(s){ return document.querySelectorAll(s); })

---

Comme ça Bovino pourra dormir sur ses deux oreilles, et je peux écrire mon code sous la barre des 140 caractères :mrgreen:

Code:

---

1 2 3 4 5

(function negatifPage($){   for(i=0;s=getComputedStyle(e=$('*')[i++]);)for(p in s)if(/(^c|dC)olor$/.test(p))e.style[p]=s[p].replace(/\d+/g,function(n){return 255-n})   })(function(s){ return document.querySelectorAll(s); })

---

137 car

J'ai donné +1, non pas pour le code, mais pour l'adaptabilité de l'énoncé du problème au code. Si on reprend depuis le début, on voit qu'il y a eu pas mal d'accommodements, mais l'essentiel y est. :mouarf:

Si tu penses que c'est facile de toujours trouver de bons énoncés du premier coup :roll:

C'est pour ça que je vous ai incité à m'envoyer vos propositions (et merci à Kaamo et Barsy au passage). Le précédent était trop court, celui-ci trop long... le prochain sera le bon ! En attendant je suis certain qu'il reste de nombreuses améliorations sur celui-ci.

Comment ça trop long ?

65 caractères :aie:

Code:

---

1 2 3

(function(){ document.styleSheets[0].addRule('html','-webkit-filter:invert()') })()

---

*Bovino style* :mrgreen:

Un ptit bonus pour comptabilité Opéra et IE9+ (en 102 caractères), en utilisant invert de outline-color (non implémenté sur les autres navigateurs) :

Code:

---

1 2 3

(function(){ document.styleSheets[0].addRule("body:before","content:'';position:fixed;outline:2999px solid invert") })()

---

Pour Firefox, il ne semble pas connaitre addRule mais -moz-filter:invert() doit pouvoir fonctionner.

ps : pour inverser dans l'autre sens il faut ajouter un 0% : -webkit-filter:invert(0%).

EDIT : j'avais mal lu l'énoncé :aie:

Citation:

---

Interdiction d'utiliser cette propriété pour les autres éléments que les images

---

Oui j'avais anticipé la plaisanterie :mrgreen:

Là j'essaie de me débarasser du if() et d'utiliser autre chose qu'un String.replace, mais je ne trouve rien de plus court...

Moi non plus ... pas faute d'avoir cherché pourtant.

Citation:

---

Bon pour que cet énoncé soit faisable, je propose de passer document.querySelectorAll en paramètre :

---

même si tu ne passes pas en paramètre la méthode tu obtiens un 161 caractères ce qui est tout à fait honorable compte tenu du sujet ;)

pour ma part... j'apprends beaucoup !

si je comprends bien :
un code "synthétique", c'est de l'intelligence "artificielle", non ? ;)

Big UP ! :hola:

Je suis pas sûr de te suivre jreaux62 :?

Au passage, une présentation en anglais sur la minification en Javascript très sympa que je viens de trouver : https://docs.google.com/presentation...nt#slide=id.i0

Code:

---

"vous0connaissiez0ça0?".split(0)

---

Houla ! Ce n'est pas moi qu'il faut suivre.... au contraire !
C'est moi qui essaie de suivre...

Je faisais juste le lien entre "synthétique" et... "artificielle" :mouarf:

Je comprends surtout que vous vivez sur une "autre planète" ! ;)

Citation:

---

Envoyé par SylvainPV

Code:

---

"vous0connaissiez0ça0?".split(0)

---

---

celle là je doit admettre que je ne la connaissait pas, gain 2 quand même.

Je reprendrais le lien à tête bien plus reposée, il y a du gain dans l'air même si beaucoup a déjà été abordé dans les exercices que tu vous avez proposés.

Citation:

---

https://docs.google.com/presentation...nt#slide=id.i0

---

J'avais survolé le doc il y a quelques temps (quand j'avais testé le codage en 6 caractères). D'ailleurs, c'est (encore) par le créateur de JSFuck (pour ceux qui ont suivi le codage du simulateur de Sylvain en 6 caractères).
En fait, toutes ces réalisations sont à lire/voir à ce Martin Kleppe (surtout son doc sur le binaire et les "bitwise operators")
edit : et pour NoSmoking, il y a même du Gogle Map API :mrgreen:

Citation:

---

Envoyé par Kaamo

edit : et pour NoSmoking, il y a même du Gogle Map API :mrgreen:

---

c'est impressionnant comme il y a des gens qui ont du temps pour ce genre de futilités :ptdr:

Bon pour le dixième énoncé je propose d'innover un peu.

Numéro 10: thème libre

A chacun de proposer un code de moins de 140 caractères remplissant la fonction de son choix. Les mêmes règles que les énoncés précédents s'appliquent, avec quelques précisions en plus :
- vous pouvez déclarer et passer ce que vous voulez comme arguments à votre fonction du moment qu'il s'agit de variables dont dépend le résultat de la fonction (un nombre, une phrase, un élément HTML...)
- vous pouvez accompagner le code de plusieurs cas d'utilisations ou d'une page de test
- ce n'est pas un concours, plus un étalage des talents et idées de chacun. Essayez quand même de récolter un max de pouces verts et d'en mettre aux créations des autres
- vos créations doivent miser sur l'originalité, la technicité et la qualité de présentation. Les explications et commentaires sur votre code sont les bienvenus

Si vous cherchez de l'inspiration, je vous suggère de voir le concours js1k. En 140 caractères on ne fait pas grand chose, mais on n'a pas besoin de grand chose pour en mettre plein la vue ;)

Pas encore eu le temps de me pencher sur la chose mais j'ai quelques petites idées ... notamment le tic tac toe (ou sa version quantum mais ça serait peut-être un peu trop), du puissance 4, un pendu, etc

Ou sinon j'ai pensé aussi à un décodeur image > ascii art. J'avais vu que c'était possible avec canvas.

Et vous, vous avez des idées ?

J'étais parti sur un traceur de rosaces. Pas le plus compliqué mais dès qu'on s'attaque au canvas les caractères défilent vite...

http://jsfiddle.net/J7kUq/1/

Code:

---

1 2 3 4 5 6 7

(function(C,f){ c=C.getContext('2d'); c.transform(2,t=0,0,1,148,R=74); F=f; X=Math.cos; setInterval("c.fillRect(R*(r=X(F*t))*X(t),R*r*Math.sin(t+=.01),1,1)",5); })(document.querySelector("canvas"), 8/3);

---

Je n'arrive pas à descendre sous les 165 caractères, donc je pense que je vais partir sur autre chose :?

Dans le projet js1k, ils donnent ceci en entrée :

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

<!doctype html> <html> <canvas></canvas>   <script>   var b = document.body; var c = document.getElementsByTagName('canvas')[0]; var a = c.getContext('2d');   // start of submission // *** YOUR SCRIPT *** // end of submission //   </script> </html>

---

Peut-être pourrais - tu gagner 10 caractères ainsi :mrgreen:
En tout cas, chapeau l'artiste, c'est beau !

@SylvainPV :bravo: pour ta rosace.

Citation:

---

Code:

---

F=f;

---

---

je n'ai pas compris l'intérêt de cette ligne de code :koi:

Citation:

---

Code:

---

X=Math.cos;

---

---

et plus loin tu as écrit Math.sin. Tu peux gagner encore des caractères en remplaçant Math.sin par X :mrgreen: car sin(Pi/2-A)=cos(A)

Citation:

---

je n'ai pas compris l'intérêt de cette ligne de code

---

Je me suis posé la même question quelques posts en arrière.

Quand tu passes une String à setInterval, elle est interprétée avec eval dans le scope global. Or, dans le scope global, f est inconnue car elle est propre au scope de la fonction.
En faisant F=f; (c'est du "global leak" mais bon, çça dépanne parfois :D) la variable sera bien dans le scope global.

Exactement ça me sert juste à passer ma variable locale dans le scope global pour l'utiliser dans le code évalué par setInterval. Très moche, en effet :mrgreen:
Après je peux toujours dire que mon facteur "rosace" est en dur dans le code plutôt qu'en argument. Mais en le changeant je fais plein de rosaces différentes et je trouvais ça cool :)

Pour l'histoire de Math.sin, c'est pas une mauvaise idée mais au final si je dois écrire Math.PI ça me revient au même en nombre de caractères non ? Ou alors je fais une approximation de PI/2 à 1.57:

Code:

---

1 2 3 4 5 6

(function(C){ c=C.getContext('2d'); c.transform(2,t=0,0,1,148,R=74); X=Math.cos; setInterval("c.fillRect(R*(r=X(8/5*t))*X(t),R*r*X(1.57-(t+=.01)),1,1)",5); })(document.querySelector("canvas"));

---

Citation:

---

Envoyé par SylvainPV

Pour l'histoire de Math.sin, c'est pas une mauvaise idée mais au final si je dois écrire Math.PI ça me revient au même en nombre de caractères non ? Ou alors je fais une approximation de PI/2 à 1.57:

---

3.14/2 = 1.57
3.1415 = 1.5707
je pense que tu peux te permettre l'approximation ;)

Pourquoi ne pas passer directement le context en paramètre

Code:

---

1 2 3 4 5 6

(function(C){ c=C; c.transform(2,t=0,0,1,148,R=74); X=Math.cos; setInterval("c.fillRect(R*(r=X(8/5*t))*X(t),R*r*X(1.57-(t+=.01)),1,1)",5); })(document.querySelector("canvas").getContext('2d'));

---

Pour respecter mes propres consignes et ne pas se servir des arguments pour tricher sur le décompte des caractères :mrgreen:

Code:

---

1 2	(function(C){ eval(C);})(c)

---

et là tu mets un roman dans c...

trop facile :grin:

Citation:

---

Envoyé par SylvainPV

Pour respecter mes propres consignes et ne pas se servir des arguments pour tricher sur le décompte des caractères :mrgreen:

---

:nono: tu ne passes que l'objet sur lequel tu vas travailler à l’instar d'une chaine de caractère dans les exemples précédent.

Ceci étant j'ai du mal à trouver un sujet à mettre en oeuvre, surtout si cela doit tenir dans un mouchoir de poche :cry:

Je considère que la "variable dont dépend le résultat de la fonction", pour reprendre mes termes, est ici l'élément HTML canvas et non le 2DContext de cet élément. De toute façon si j'ai envie de me mettre des bâtons dans les roues, je fais ce que je veux :P

Sinon quelques idées en vrac pour vous :
- disparition des éléments au survol à la souris
- dessiner une triforce (Triangle de Sierpiński pour les intimes)
- faire tomber de la "neige" sur une page
- implémenter le "Barrel Roll" (tapez do a barrel roll sur google pour comprendre)

Citation:

---

Envoyé par SylvainPV

De toute façon si j'ai envie de me mettre des bâtons dans les roues, je fais ce que je veux :P

---

:hola::ave:

un petit rapide qui inverse le texte des liens mais qui vire les liens images par exemple et les contenus apparaissant au survol.

Code:

---

1 2 3

(function(d){ t='textContent';for(i=0;h=d.links[i++];)h[t]=h[t].split('').reverse().join(''); })(document);

---

Supprimer les images de la page ... (pas les background images)

Code:

---

1 2 3

(function(i){ while(p=document.images[i++])p.src=''; })(0);

---

Code:

---

1 2 3

(function(i){ for(i;p=document.images[i++];)p.src=''; })(0);

---

Code:

---

1 2 3

(function(i,d){ for(i;p=d.images[i++];)p.src=''; })(0,document);

---

Code:

---

1 2 3

(function(){ for(i=0;p=document.images[i++];)p.src=0; })();

---

@SpaceFrog, ça ne supprime pas les images quand je claque le code dans la console :koi: (testé sur Chrome)

@NoSmoking, héhé c'est fun ce truc :D Sympa le .split('').join('') en guise de .replace()

Citation:

---

Envoyé par Kaamo

@SpaceFrog, ça ne supprime pas les images quand je claque le code dans la console :koi:

---

ne sois pas aussi violent... calque le code ça suffira :mrgreen:

testé dans la console chrome

Code:

---

(function(){for(i=0;p=document.images[i++];)p.src=0;})();

---

ça me vire bien les images ...

J'avais pas testé celui là. Quand tu mets une chaîne vide ça ne semble pas fonctionner, les images restent à l'écran

curieux ... car le fait de mettre 0 c'était juste pour gagner les quotes...
sousi ie et ffx il vide bein le src

En effet, étrange !

Citation:

---

Envoyé par Kaamo

@NoSmoking, héhé c'est fun ce truc :D Sympa le .split('').join('') en guise de .replace()

---

cela reste somme toute plus sommaire que les RegExp.


Attention ce qui suit n'est pas forcément compatible car CSS3 sans le préfixe vendeur

zoom image au survol

Code:

---

1 2 3

(function(d){ for(i=0,m='onmouseo',s='style';I=d.images[i++];)I[m+'ver']=function(){this[s].transform='scale(2)'},I[m+'ut']=function(){this[s]=''} })(document);

---

effet au choix passé en paramètre

Code:

---

1 2 3

(function(d,p){ for(i=0,m='onmouseo',s='style';I=d.images[i++];)I[m+'ver']=function(){this[s].transform=p},I[m+'ut']=function(){this[s]=''} })(document,'rotate(-45deg)');

---

Code:

---

1 2 3

(function(d,p){ for(i=0,m='onmouseo';I=d.images[i++];)s=I.style,I[m+'ver']=function(){s.transform=p},I[m+'ut']=function(){s=''} })(document,'rotate(-45deg)');

---

je ne comprends pas pourquoi ça ne fonctionne pas

Citation:

---

s=I.style

---

oui mais que vaut I en fin de boucle, undefined, c'est ce qui stoppe la boucle justement.

Code:

---

1 2 3

(function(){ for(e=document.body.style,i=4;i--;)p=["webkitT","mozT","msT","t"][i]+"rans",t=p+"form",e[p+"ition"]="all 5s",e[t]=e[t]?"":"rotate(360deg)"; })();

---

Le Barrel Roll, 139 caractères, avec préfixes vendeurs et tour en sens inverse si exécuté deux fois :)

? c'est supposé faire quoi ? sous ffx rien ...