IUT : jQuery à rendre

A rendre pour le 18 mars au plus tard

Sujet

Ce que vous voulez tant que c’est dans le cadre de ce que l’on a vu. Vous avez tout le Web comme inspiration !
N’oubliez pas de me donner le nom et le mot de passe pour se connecter !

Voici les fonctionnalités obligatoires :

  • Connexion + déconnexion (vu en cours)
  • Effets jQuery sur les éléments
  • Appels JSON : au moins deux appels en plus de ceux vus en cours

Sujets possibles

  1. Site de partage de photos
  2. Site de cocktails (cf ci-dessus)
  3. e-rated : site d’appréciations (selon des sujets, à définir)
  4. Ask-a-question : site où l’on pose des questions sur des sujets divers, et des gens répondent
  5. Write-a-book-together : site où l’on se connecte et où on peut écrire un livre à plusieurs
  6. A-maze-ing : site où l’on peut se ballader dans un labyrinthe et essayer d’en trouver la sortie
  7. Wedding-couple-site : site où l’on uploade + partage des photos de mariage + livre de commandes
  8. Playing-cards-collection : site où on scanne + échange des cartes (Magic the gathering)
  9. Polls-and-surveys : site de création de sondages (= QCM)
  10. Poems-generator : faire un cadavre exquis qui génère des poèmes + possibilité pour les utilisateurs de les noter / d’ajouter des mots
  11. Turn-by-turn : faire un jeu multijoueurs en tour par tour (jeu de cartes, de poker, ou de plateau etc)
  12. The-future-of-post-it : faire un carnet de choses à faire pour les utilisateurs, qui envoie des mails de rappels de ces choses à des dates données
  13. Gift-ideas : un site où l’on va faire des idées de cadeaux / suggérer des idées de cadeaux + les noter (les meilleurs ressortent en premier)
  14. Le-bon-recoin : refaire le bon coin en plus simple
  15. Chat-with-someone : site de chat/discussion
  16. Suggest-crawlers : site de suggestions : on clique sur un mot, il en suggère plein d’autres avec + définitions / liens de sites pour chacuns
  17. Tv-fans : site de présentations + notes d’émissions télé

Sujet imposé si vous n’avez pas d’idée

Cocktails : on se connecte, on a une liste d’éléments (récupérés en JSON) disponibles, on coche ceux qui nous intéressent, on valide, c’est envoyé, et le retour en JSON affiche les cocktails qu’il est possible de faire avec ce que l’on a coché.

Ce que vous devez rendre

Idéalement

Une Url vers un site Web (utilisez Alwaysdata par exemple)

Si vous n’avez pas le choix

Les fichiers source de votre projet

Pour favoriser votre organisation

  • Utilisez ce que l’on a vu en cours (Google boilerplate)
  • Librairies autorisées

    Interdiction d’utiliser une librairie JavaScript qui ne vienne pas des sites autorisés précédemment

    Retard

    Après le dimanche 18 mars minuit

    Fin de semaine de notre dernier cours, soit dimanche à minuit. Passé ce délai ce sera 1 pt par 2 heures de retard (je prendrai en compte la date de réception du mail).
    Pour ceux qui essaient vraiment d’aller jusqu’à la dernière minute, toute heure entamée est comptée comme une heure complète. Exemple : un point en moins si je le reçois le lundi 3 avril à 00:01.
    N’oubliez pas de me donner le nom et le mot de passe pour se connecter !

    Avertissements

    • Copie sur une autre personne (« je se savais pas comment implémenter telle ou telle fonctionnalité dont j’avais besoin pour aller plus loin, je l’ai copiée sur un autre »), deux cas se distinguent :
      • si la personne est clairement nommée, cette fonctionnalité ne sera pas prise en compte dans la notation (= 0 pour cette fonctionnalité) ;
      • si la personne est clairement nommée, et qu’il y a une amélioration de la fonctionnalité : note pour la fonctionnalité divisée par 2 (uniquement la moitié du travail a été faite) ;
      • 0 aux deux personnes sinon ;
    • Si je m’aperçois que vous avez bêtement copié collé des sources Internet, je vous convoquerai pour vous demander de m’expliquer la fonctionnalité, et deux cas se distinguent :
      • si vous ne savez pas m’expliquer le code alors 0 ;
      • si vous savez m’expliquer tout le code alors votre note totale sera divisée par vous + le nombre de contributeurs à ce projet, ce qui se rapprochera certainement de 0 aussi.

Les requêtes « à la » Django : howto / principes

Voici une requête « à la Django ».
« objects » est un objet statique destiné à faire les requêtes
p = un objet du modèle « Person » = un modèle base de données que j’ai fait
g = un objet du modèle « Game » = un modèle base de données que j’ai fait

J’ai crée un modèle intermédiaire « PersonGame » qui lie les deux tables en n/n. Pour comprendre l’idée :
Q(person=p) signifie « dont la personne == p »
~Q(person=p) signifie « dont la personne != p »

Si on met deux « __ » cela signifie « faire une jointure entre les deux modèles », par exemple « person__user » signifie « LEFT JOIN PERSON p ON p.id_user = user.id »

Donc pour tout reprendre :
« Aller chercher dans PersonGame toutes les personnes qui ne sont pas le joueur p »
PersonGame.objects.filter(~Q(person=p), game=g)

…et dont le username vaut « u »
.get(person__user__username=u)

Ce qui donne au final :
PersonGame.objects.filter(
    ~Q(person=p),
    game=g).get(person__user__username=u)

Et voici la requête qu’il aurait fallu écrire « à la main » :

SELECT * FROM PersonGame pg
WHERE pg.id_person != p.id
AND pg.id_game = g.id
LEFT JOIN Person pe on pe.id = p.id
LEFT JOIN User us on us.id = pe.id_user
WHERE us.username = u
LIMIT 1;

En fait ça peut paraître rébarbatif, ou surprenant, mais :
– ça tient en une ligne ;
– quand on a fait 3-4 requêtes comme ça :
  – on arrive à faire n’importe quelle requête un peu complexe très très vite ;
  – on arrive à lire très facilement n’importe quelle requête ;
  – le générateur de requêtes est incroyablement mieux optimisé que celui de Symfony (en fait, techniquement, il est parfait, il génère les LEFT JOIN exactement comme il faut et dans l’ordre le plus efficace en fonction des clés qu’on a précisées dans le modèle, voire il fait des requêtes plus efficaces que ce qu’on aurait éventuellement fait à la main (cela m’est arrivé par deux fois)).

Conclusion : ici aussi, en termes de maintenance = ce qui coûte le plus cher, c’est exceptionnellement rentable.

Linux tar : faire une archive au format « AAAA-MM-JJ_HHMMSS.archive.tar.bz2 »

C’est tout simple sous Linux.
Il faut juste savoir, pour ceux qui commencent à faire quelques lignes de commande sous Linux, que le « backquotes », donc le ` demande à exécuter quelque chose et le remplacer par le résultat de l’exécution.

Exemple : si vous tapez `(date '+%Y.%m.%d-%Hh%Mm%Ss')` alors il exécutera l’ordre date, et le remplacera par la date en cours.

Exemple concret :

tar cjf "`(date '+%Y.%m.%d-%Hh%Mm%Ss')`.monarchive.tar.bz2" htdocs/*

Vous archivera tout le dossier htdocs dans l’archive :
2018.02.06-09h45m05s.monarchive.tar.bz2

En espérant que cela serve à quelqu’un !

Comment détecter le père Noël / deep learning, Python, and a Raspberry Pi

Comment détecter le père Noël (détection d’image en Python) ?

C’est un article à la fois super marrant, mais très poussé techniquement, qui apprend au Raspberry Pi comment détecter le père Noël.

Attention, c’est en anglais !

How to build Santa/Not Santa detector with deep learning, Python, and a Raspberry Pi

Comment transférer des fichiers très rapidement entre deux PCs distants ?

Petite astuce très pratique : vous voulez transférer des fichiers d’un PC à un autre, sans forcément partager le répertoire, vous faire suer avec les problèmes de droits, etc. ?

Rien de plus simple, lancez un serveur local Python qui servira les fichiers de manière statique :

  • Python 2 : python -m SimpleHTTPServer
  • Python 3 : python3 -m http.server

Et à distance, tapez l’URL du PC sur lequel tourne le serveur, et hop, vous pouvez récupérer ce que vous voulez !

Exemple de python webserver
Exemple de python webserver

Windows : les loopbacks. Impossible à surveiller

Si jamais vous faites un site Internet, que vous le mettez sur localhost et que vous lancez un navigateur, il se peut que, comme moi, vous ayez envie de voir exactement ce qui se passe.

Dans ce cadre, un « espion » parfait pour cela est wireshark (analyseur de trames réseau).

Après plusieurs minutes, voire heures, vous verrez que quelles que soient vos actions, rien ne se passe.
L’explication est simple : Windows, peu importe sa version, « coupe » les arrivées réseau si elles sont en loopback = sur localhost.

Un grand merci, encore une fois, pour Windows !

Toute l’explication est là.

Il faut utiliser un outil, RawCap, qui hacke un peu Windows et génère un fichier « .pcap » compatible avec Wireshark.

Sur Linux, vous n’aurez pas ce problème typique Windows

En ligne de commande, on peut faire le dump de tout le traffic, y compris le localhost.
Il vous suffit d’utiliser l’utilitaire tcpdump, exemple :

$
$ sudo tcpdump -vv -i lo port 8000
tcpdump: listening on lo, link-type EN10MB (Ethernet), capture size 262144 bytes

Et à partir de là il écoutera sur le port 8000. Lancez Chrome, allez sur localhost:8000 et là vous verrez :

(pour la note, même s’il n’y a pas de serveur, ce qui est le cas ici, il écoute et trace vraiment tout)

17:23:14.100160 IP6 (flowlabel 0x52956, hlim 64, next-header TCP (6) payload length: 40) ip6-localhost.44238 > ip6-localhost.8000: Flags [S], cksum 0x0030 (incorrect -> 0xfe61), seq 1512481496, win 43690, options [mss 65476,sackOK,TS val 3860198845 ecr 0,nop,wscale 7], length 0
17:23:14.100165 IP6 (flowlabel 0xe143c, hlim 64, next-header TCP (6) payload length: 20) ip6-localhost.8000 > ip6-localhost.44238: Flags [R.], cksum 0x001c (incorrect -> 0xe6c0), seq 0, ack 1512481497, win 0, length 0
17:23:14.100189 IP (tos 0x0, ttl 64, id 63584, offset 0, flags [DF], proto TCP (6), length 60)
localhost.43918 > localhost.8000: Flags [S], cksum 0xfe30 (incorrect -> 0x631e), seq 4099830766, win 43690, options [mss 65495,sackOK,TS val 1743693574 ecr 0,nop,wscale 7], length 0
17:23:14.100194 IP (tos 0x0, ttl 64, id 12132, offset 0, flags [DF], proto TCP (6), length 40)
localhost.8000 > localhost.43918: Flags [R.], cksum 0x7eb1 (correct), seq 0, ack 4099830767, win 0, length 0
17:23:14.153839 IP6 (flowlabel 0xc30e0, hlim 64, next-header TCP (6) payload length: 40) ip6-localhost.44242 > ip6-localhost.8000: Flags [S], cksum 0x0030 (incorrect -> 0xaa17), seq 1123880506, win 43690, options [mss 65476,sackOK,TS val 3860198859 ecr 0,nop,wscale 7], length 0
17:23:14.153847 IP6 (flowlabel 0xee9c9, hlim 64, next-header TCP (6) payload length: 20) ip6-localhost.8000 > ip6-localhost.44242: Flags [R.], cksum 0x001c (incorrect -> 0x9284), seq 0, ack 1123880507, win 0, length 0
17:23:14.153884 IP (tos 0x0, ttl 64, id 20755, offset 0, flags [DF], proto TCP (6), length 60)
localhost.43922 > localhost.8000: Flags [S], cksum 0xfe30 (incorrect -> 0x1c4e), seq 3564886671, win 43690, options [mss 65495,sackOK,TS val 1743693588 ecr 0,nop,wscale 7], length 0
17:23:14.153891 IP (tos 0x0, ttl 64, id 12140, offset 0, flags [DF], proto TCP (6), length 40)
localhost.8000 > localhost.43922: Flags [R.], cksum 0x37ef (correct), seq 0, ack 3564886672, win 0, length 0
17:23:19.161265 IP6 (flowlabel 0x606b8, hlim 64, next-header TCP (6) payload length: 40) ip6-localhost.44246 > ip6-localhost.8000: Flags [S], cksum 0x0030 (incorrect -> 0x1e75), seq 983670096, win 43690, options [mss 65476,sackOK,TS val 3860200111 ecr 0,nop,wscale 7], length 0
17:23:19.161281 IP6 (flowlabel 0xe0662, hlim 64, next-header TCP (6) payload length: 20) ip6-localhost.8000 > ip6-localhost.44246: Flags [R.], cksum 0x001c (incorrect -> 0x0bc6), seq 0, ack 983670097, win 0, length 0
17:23:19.161360 IP (tos 0x0, ttl 64, id 18581, offset 0, flags [DF], proto TCP (6), length 60)
localhost.43926 > localhost.8000: Flags [S], cksum 0xfe30 (incorrect -> 0xe872), seq 99211285, win 43690, options [mss 65495,sackOK,TS val 1743694840 ecr 0,nop,wscale 7], length 0
17:23:19.161372 IP (tos 0x0, ttl 64, id 13102, offset 0, flags [DF], proto TCP (6), length 40)
localhost.8000 > localhost.43926: Flags [R.], cksum 0x08f8 (correct), seq 0, ack 99211286, win 0, length 0

WordPress : passer de http en https

Je ne fais aucune documentation technique ici, mais juste les deux petites choses auxquelles vous n’aurez peut-être pas pensé : une fois les certificats générés et installés, s’il y a quelque chose qui ne fonctionne pas (une redirection infinie par exemple), voici des endroits où regarder :

Installez l’utilitaire wp-cli qui vous permet de tout faire, y compris l’option search-replace et remplacez « http://monsite » par « https://monsite« . N’oubliez pas de faire une sauvegarde avant (merci mysqldump).

  • Vous avez nginx en tant que reverse proxy ? Forcez WordPress en https :
    Fichier wp-config.php ajoutez ce code :

    if ((!empty($_SERVER['HTTP_X_FORWARDED_PROTO']))
        && $_SERVER['HTTP_X_FORWARDED_PROTO'] === 'https'
    ) {
        $_SERVER['HTTPS'] = 'on';
    }
  • Si cela ne fonctionne toujours pas, essayez de forcer l’admin en https ainsi :
    wp-config.php » ajoutez ce define au début : define('FORCE_SSL_ADMIN', true);

Comment développer en musique ?

Nos amies les radios nous bourrent, en proportion, de 40% de pub, et à peine 60% de musique.

Je ne supporte plus les radios d’aujourd’hui : aucune n’a su se mettre à jour !

J’ai la solution, extrêmement simple.

Vous voulez développer avec de la musique non stop, au pire 1% de publicité, soit presque aucune pub ?

Je n’ai aucun sponsor, aucun lien, mais je pense qu’ils méritent vraiment d’être connus : m2radio.
Une radio Web, 1% de pub voire aucune, et tout correspond à votre choix. 80’s, 90’s, ou si vous voulez rester à la mode :

Oui bon ok ils sont en http et pas https. Et alors ?
Ils sont juste moins bien recensés par google, ce qui est d’autant plus dommage !
Faites comme moi : desactivez adblock et cliquez sur les sponsors / pubs : cela leur permettra de rester longtemps en ligne… et pour vous, de développer/programmer avec de la musique que vous aimez !

Linux bc : float / flottants

Plein de personnes utilisent « calc » sous Windows. C’est bien.
Mais, comme la plupart des outils Windows : Linux c’est 20x moins ergonomique, mais 20x puissant.

Bah comme Linux en général, en fait…

Let me introduce bc.

C’est le « calc » de Windows, mais en plus laid et en 20 x plus puissant que la calculatrice Windows (déjà dit).

Le seul truc bizarre de bc c’est qu’il ne fait que des calculs en entier.
En bref : bc -l et hop tout est en flottant et fonctionne.
To make a long story short: bc -l and everything is ok.