Astuce css: avoir une DIV qui occupe 100% du viewport

Grâce à CSS3, c'est super simple, il suffit d'utiliser l'unité vh: 100vh = la hauteur du viewport (la zone visible de l'écran)

Du coup, on peut même avoir une barre de menu et d'icônes puis en-dessous une div qui occupe tout le reste du viewport en recourant à calc():

#mon_wrapper{
     height: calc(100vh - 64px); /* 64px = la hauteur du menu+ celle de la barre d'icônes */
}

C'est juste... Beau.

(...)

J'adore les selecteurs css

Sur une page HTML, j'avais besoin de filtrer en temps réel un grand nombre de photos... ben c'est vraiment simple.

Tu mets un input texte avec un onkeyup qui récupère sa valeur et tu utilises le sélecteur

"img[src*='"+filter+"']" 
pour récupérer toutes les images qui correspondent (celles qui contiennent le filtre).

c'est tout.

En gros et avec mon VanillaJS:

on("keyup","#filter",function(){
        filter=this.value;
        if (filter){
            hide("#images img");
            show("#images img[src*='"+filter+"']")
        }else{
            show("#images img");
        }       
    })

(...)

Patrick Balkany condamné à quatre ans de prison, avec incarcération immédiate

Il a quitté la salle d'audience escorté par les forces de l'ordre et dormira ce soir en détention. Patrick Balkany a été reconnu coupable de fraude fiscale, ce vendredi, par le tribunal correctionnel de Paris, et condamné à quatre ans de prison avec incarcération immédiate. Son épouse écope de trois ans de prison, sans mandat de dépôt. Tous les deux voient leurs peines assorties de 10 années d'inéligibilité.

Allez hop, au suivant !

Broncomic: perdre du temps à le gagner

Depuis quelques temps, j'avais envie de passer à un style plus cartoon... c'est fait.

Mais j'aimais bien l'idée de faire de petites BD courtes pour faire passer un message, aérer les articles, dire des conneries etc. Or, quand on est un warrior du dimanche, on se dit que faire à chaque fois les choses à partir de zéro, c'est tout de même un peu con, surtout quand on manque de temps vraiment libre pour s'y atteler.

En vrai codeur du dimanche que je suis, je me suis dit qu'une appli qui superposerait des «calques» permettrait de choisir rapidement des éléments séparés sélectionnés dans une banque de dessins de base afin de produire sans prise de tête une case vite-faite-sur-le-gaz.

Le mot-clé étant «rapide»

Me voici donc en train de faire un test ou deux pour trouver le moyen d'éviter la balise canvas que je trouve imbitable... Je tombe sur html-to-image qui fait le job. Le reste, c'est du css de base - mon rayon.

Après réalisation de cette appli sur la base de mon framework secret (chut) ça marche pas mal du tout. A défaut de vous la faire tester (je dis déjà assez de conneries comme ça sans que vous m'en fassiez dire davantage bande de tarés ) voici quelques captures d'écran :

La partie supérieure contient le visuel en cours, la partie du bas, les différents objets qu'on peut superposer répartis dans des onglets.

imageimageimageimageimage

Un bémol, j'ai pas réussi à faire un POST du blob pour sauvegarder sur le serveur afin d'obtenir une adresse de partage anonymisée (genre broncomic.warriordudimanche.net?comic=65df4gs6df5g4s6d).

J'en suis réduit à télécharger l'image pour l'uploader ensuite dans mon blog. C'est un peu con, mais comme j'avais fait un plugin permettant d'uploader des images directement en les déposant sur la page d'édition d'articles, c'est pas trop chiant en fait.

TCHUSS

Sécuriser une API REST (Partie 1) : Théorie - Code Heroes

Un article très intéressant et très bien expliqué sur la sécurisation d'une API REST.

Bon, j'ai plus qu'à me mettre à faire une classe exprès pour éviter de me retaper tout le boulot à chaque fois...

...

Bon, là, j'ai la flemme, mais... bon.

Quelques notes pour plus tard

1. Déroulement des requêtes

  1. Le client POST des données de connexion au format JSON à l'URL servant au login (par exemple api/login)
  2. le serveur renvoie un token d'identification contenant des informations précises dans un format spécial: le Json Web Token (voir après)
  3. le token est envoyé avec chaque requête ultérieure pour être identifié côté serveur: si ok, envoi des données.

2. Le JSON Web Token (JWT)

Il est constitué de trois parties: header, payload et signature.

header:

Un Json qui contient le type et l'algo d'encodage du token : { "typ":"JWT, "alg":"HS256" } par exemple. Ce Json est ensuite encodé en Base64 pour former la première partie du token.

Le payload:

Un autre Json contenant les infos de l'utilisateur et lui aussi encodé en base64 pour former la seconde partie du token. ( voir ici pour les noms de clé )

1.Propriétés réservées :

  • “iss” (Issuer) : l'identifiant du serveur de l'API;
  • “sub” (Subject) : Identifiant de l'utilisateur;
  • “aud” (Audience) : appli/site client;
  • “iat” (Issued At) : Il s’agit de la date de génération du token;
  • “exp” (Expiration Time) : Il s’agit de la date d’expiration du token.
  1. Propriétés publiques : Il s’agit de noms normalisés tels que “email”, “name”, “locale”...
  2. Propriétés privées : données propres à l'application.

La signature:

C'est un hash des deux premières parties utilisant l'algo précisé dans le header et une clé secrète détenue par le serveur (un salt, quoi).

HMACSHA256(base64UrlEncode(header) + "." + base64UrlEncode(payload), 'secret')

Googol - mise à jour.

Un petit post rapide pour annoncer la mise à jour de Googol.

Elle ne se voit pas beaucoup, mais derrière, j'ai tout pété et tout refait avec mon framework top secret, histoire de tester et de nettoyer le code legacy de ce script.

L'opération m'a pris quelques heures et le résultat va rester en phase de test un moment avant diffusion.

Au passage, si vous voulez garder votre calme, ne nommez pas votre classe «locale», c'est mal.

X-Men : Dark Phoenix

J'ai regardé X-Men : Dark Phoenix hier soir... C'est bien... ... C'est bien de la merde.

La vache: même les acteurs n'y croient pas. On dirait un film «yen a un peu plus j'vous l'mets quand même?» C'est presque de l'acabit d'un film de super-héros russe, t'as qu'à voir.

Je commence à sérieusement saturer avec les films/séries de super-héros: c'est bien simple, ils sont en passe de détrôner les films/séries de flics, c'est tout dire !

Ils en sont à faire apparaître Dazzler, pour les connaisseurs de la BD d'origine (et pour rien en faire, hein.) Si c'est pas du râclage de fond de tiroir...

Et pour ce qui est de la cohérence de l'univers Marvel, tu repasseras, hein. Et vas-y que je te fais crever des personnages qu'on voit chronologiquement plus tard. On s'en fout, on prend le pognon pis c'est marre.

En gros, les amerloques font avec les films les mêmes conneries qu'avec les BD: ils avaient foutu un tel merdier dans l'univers qu'ils avaient fini par parler de réalités alternatives (terre 1, terre 2 etc.) puis à faire des reboots de séries.

Quitte à voir du super-héros, regardez plutôt the boys: la série vaut le coup et elle est bien moins superficielle qu'on ne pourrait le penser de prime abord. Et en plus on rigole. alt

Très bonne explication sur le racisme anti-blancs - HowTommy | Liens et actu en vrac

je copie-colle direct:

Depuis la sortie médiatique de Lilian Thuram sur le racisme dans le football, interview issu d’un média italien, tout le monde lui est tombé dessus le taxant de «raciste anti-blanc».
Dans les heures et les jours qui ont suivi, de nombreux «spécialistes» sont intervenus sur les plateaux TV affirmant l’existence réelle et fondée d’un racisme anti-blanc.
Je vous passe les arguments merveilleux et objectifs d’un célèbre chroniqueur d’une chaîne cryptée, affirmant que si son fils avait échoué dans le foot c’est parce que ses coéquipiers noirs ne lui faisaient pas la passe, lui le seul blanc. Conclusion, racisme anti-blanc.
Rappelons tout de même que de très nombreux spécialistes, issus du monde universitaires, comme Fabrice Dhume, Eric Fassin ou Renni Edo Lodge, donc parfaitement légitimes pour traiter du sujet, contestent l’existence même du racisme anti-blanc.
On ne peut pas mettre sur un même pied d’égalité des siècles d’asservissement des populations africaines à quelques incivilités discriminantes constatées dans notre quotidien.
Le racisme dénoncé par les blancs prend uniquement la forme d’actes interpersonnels, c’est de l’entre soi et non une généralité basée sur la race ou la couleur de peau. C’est du niveau «il m’a insulté moi parce que je suis blanc ».
Seulement, dans la réalité, les blancs ne subissent pas, au quotidien des discriminations systémiques et systématiques. Non, les blancs ne sont pas discriminés lors d’entretiens d’embauche, lors d’une recherche d’appartement ou devant un videur de boite de nuit.
Dans son enquête, l’Institut d’Etudes Démographiques conclut que le soi-disant racisme anti-blanc ne produit pas d’inégalités sociales et ne se matérialise pas par une privation de droits ou d’accès à une ressource.
De même, dans l’histoire, jamais les blancs n’ont été discriminés par les institutions ou par l’Etat, contrairement aux personnes issus des minorités. Il y a eu une institutionnalisation du racisme.
On ne peut pas comparer le quotidien subjectif à une réglementation objective et officielle.
Enfin, on ne peut pas expliquer toute agression d’une personne non-blanche sur une personne blanche par la seule couleur de peau.
Lorsque le fameux chroniqueur du #CFC justifie l’existence d’un racisme anti-blanc en racontant l’histoire de son fils, il oublie de préciser aussi que son fils ne touchait pas la balle parce qu’il était … tout simplement mauvais en football, pas parce qu’il était blanc.
En psychologie, c’est la différence entre le locus interne – je suis responsable de mes actes – et le locus externe – tout m’arrive à cause des autres.
Je terminerai par une conclusion bien pêchu : si le blanc veut vraiment être victime de racisme anti-blanc, qu’il vienne vivre juste 1 semaine la vie d’un noir, et on en reparlera ? (et c’est un bon blanc breton qui le dit)

Comment passer d'une idée à la réalisation finale ? - YouTube

J'aime beaucoup le Labo d'Heliox: elle bosse bien, explique très clairement, propose de bonnes idées et aborde aussi les problèmes qu'elle a rencontrés. Dans cette vidéo, elle explique comment elle réfléchit lors de la conception d'un projet (ici un slider pour faire des travellings)

C'est rassurant de voir les autres galérer comme nous

Surtout que les soucis qu'elle rencontre ne peuvent être détectés qu'avec un prototype (placement des éléments par exemple.)



La bonté filmée...

A arpenter les colonnes des imgur, 9gag et autres réseaux sociaux, on tombe fatalement à un moment ou un autre sur une vidéo d'un gars qui fait preuve de générosité envers une personne défavorisée; souvent, un type donne des fringues à un SDF par exemple. Il y a peu, on avait vu un internaute utiliser les services de livraison d'amazon pour faire apporter des couvertures et des chaussettes à un homme devant un magasin.

Comme pas mal de gens et après un moment de foi restaurée, je me suis dit:

image image

La question est donc la suivante:

image

Non, parce que....

Les gens qui se filment ont clairement l'intention de se faire mousser en montrant comment qu'ils sont de bon samaritains et ça semble méprisable.

Toutefois...

image image image image image

Conclusion

image

6 Balises HTML5 intéressantes

Je me suis aperçu récemment de l'existence de la balise details et je me suis dit que je pourrais me noter celles qui me feraient de l'usage dans un éventuel avenir.

<details>

L'élément HTML details sert à créer une ligne de résumé permettant de révéler plus d'informations sur un clic.

L'attribut [open] permet de styler l'ensemble lorsqu'il est ouvert.


<style>
    details{font-style:italic;cursor:pointer}
    details:after summary{content:"▶"}
    details[open]:after summary{content:"▼"}
    details p{margin-left: 25px}
</style>
<details>
  <summary>Ligne de résumé.</summary>
  <p>Tout plein de détails extrêmement intéressants pour ceux qui veulent mais inutiles pour les autres...</p>
</details>
Ligne de résumé.

Tout plein de détails extrêmement intéressants pour ceux qui veulent mais inutiles pour les autres...

en savoir plus - compatibilité 92% et pas sur edge

<dialog>

Crée une boîte de dialogue dans laquelle on peut mettre ce que l'on veut. L'attribut open contrôle l'ouverture et la fermeture

en savoir plus - compatibilité 75%, c'est peu...

<data>

La balise data permet d'ajouter une valeur interprétable par une machine à une valeur lisible par un humain: plus simplement, on peut relier le nom d'un produit à son ID dans la base de données par exemple.

<p>New Products:</p>
<ul>
    <li><data value="398">Mini Ketchup</data></li>
    <li><data value="399">Jumbo Ketchup</data></li>
    <li><data value="400">Mega Jumbo Ketchup</data></li>
</ul>

en savoir plus - compatibilité 99%

<base>

Fournit l'url de base et le target pour tous les liens relatifs de la page. en savoir plus - compatibilité 98%

<meter>

Crée une jolie jauge dont on définit le remplissage afin de représenter visuellement une proportion. Elle utilise les mêmes attributs qu'input number (min, max, value) et y ajoute high, low et optimum qui définissent respectivement à partir de quel nombre la valeur est haute ou basse ainsi que la valeur considérée comme optimale.

Il faudra prévoir l'affichage de la valeur courante (et cette balise n'accepte pas les pseudo-éléments before et after)


<meter value="2" min="0" max="10" low="2">2 out of 10</meter>
meter value="0.6">60%
2 out of 10 60%

en savoir plus - compatibilité 95%

<progress>

Comme meter, progress crée une... barre de progression. Elle utilise les attribut max et value.

Il faudra prévoir l'affichage de la valeur courante (et cette balise n'accepte pas non plus les pseudo-éléments before et after)


<progress value="2" min="0" max="10" low="2">2 out of 10</progress>
progress value="0.6">60%
2 out of 10 60%

en savoir plus - compatibilité 98%

image

Service national universel : le gouvernement vise 400.000 jeunes en 2022 | Les Echos

Voir cette merde de sévice national réinstauré par ceux qui y ont échappé (Macron parce que trop jeune et Ciotti parce que Népotisme (voir et ), ça me fout la gerbe.

Donc, en résumé:

  • marseillaise à tous les étages ( dès l'école hein... )
  • ordre serré voir là «on y va en colonne!»
  • garde-à-vous «"Mettez bien vos polos, pour que ça fasse propre", conseillent directeurs et tuteurs du centre, sourcilleux du positionnement des casquettes, des chaussures, des boutons de pantalon… ou encore des pouces.»
  • levée des couleurs et culte du drapeau
  • «bilan» de compétences en sport, en français... c'est vrai qu'on ne le fait pas dans l'éducation nationale, ça...
  • inégalité des citoyens qui se verraient «tirés au sort» ou sélectionnés en fonction de «leur mois de naissance» (pair/impair) pour savoir qui aura la joie et le privilège d'aller se faire emmerder par des gradés incultes et frustrés.
  • Selon Macon le service national universel est « la matrice indispensable au coeur de notre école [et] qui va irriguer des vocations ». Voilà. Si vous n'avez pas compris de quoi ça s'agit que qu'est-ce qu'il a dit le monsieur, c'est normal, c'est une phrase creuse sur laquelle les politiques doivent se branler, je ne vois que ça. Irriguer des vocations... dans l'armée. Mais oui ducon.
  • budget débloqué: 700 millions d'euros pour les 400.000 jeunes de 2022... donc, calcul rapide... 1.4 milliards d'euros pour les 800.000 de 2023. On réduit les budgets de l'éducation nationale, de la santé, des aides sociales... mais pour ces merdes, y'en a du pognon...image

Mais bordel, comment faire pour les empêcher de refoutre cette merde ?

image
Via https://www.sammyfisherjr.net/Shaarli/?qzwSqg
Fil RSS des articles de cette catégorie