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.
Today I made a small addition to a Javascript library I sometimes use to generate nonograms.
This tool can now build a solvable grid in the form of a valid QR Code that, once decoded, reveals some text:
To find more about it: Nonogram JS demo page.
Note that I've …
Bindery.js is a javascript library to create printable books with HTML and CSS.
First, content is divided across multiple pages. From there, you can set up rules to generate running headers, spreads, and footnotes, based on the content that fits on each page. Turn links into page numbers to create a table of contents or index. When you’re ready to print, configure bleed, crop marks, and booklet ordering.
Bindery relies on your browser’s PDF generation.
I recently discovered some really beautiful pieces of generative art on r/generative.
In the same spirit as a precedent article on glitch art, I want to share some of my favorites:
A really nice JS-based image glitch effect, adding a hacker / horror mood...
If anyone wants to use it, I transformed that code into a Javascript function there:
https://github.com/jacksonbenete/email_terminal/blob/master/src/glitch-img.js
It has a dependency on the p5.js lib
It's MIT-licensed, as all public CodePens code
is great!
One things that annoys me a little though, is that I often get matches for people too far away from where I live, even with the distance filter set in my Settings:
Hence I wrote some simple Javascript code that auto-pass matches for a list of given cities …
Différentes solutions et exemples pour faire des onglets, carrousels, scrolling parallax, menus, galeries, tooltips et autres sans javascript.
Accordion / Toggle, Carousel, Flip on click, Info on hover/ Popover, Image Gallery, Menu, Mobile menu off canvas, Burger menu, Modal/Popup, Parallax scrolling, Tabs, Tooltips...
Source: https://sebsauvage.net/links/
Every element I use for the basic structure of a HTML document, with explanations why.
collectibles.js is a JavaScript library for adding collectible items to your website. Once the user finds and clicks on all collectible items on your website, they will be greeted with a secret victory page with a URL of your choosing.
The source code for these demos is freely available at http://github.com/jamis/csmazes
<link rel="stylesheet" type="text/css" href="images/enigmes/topoloku.css">
Depuis le 24 mars, avec ma compagne, nous avons décidé de partager un petit puzzle logique par jour à nos amis & familles, pour les distraire un peu en cette période difficile.
J'avais même bricolé un petit système de score, et j'en profite d'ailleurs pour féliciter ici les gagnants !
Comme aujourd'hui …
The iframe above displays some graphs I've built last week,
in order to get some insight on some GitHub projects issues & pull requests evolution.
They are directly inspired by nf-core project activity statistics.
Avec ce tutoriel vous verez comment rendre votre site web plus rapide : de l’optimisation des requêtes, à l’affichage de la page, en passant par la génération des pages web et l’affichage correct des pages sur tous les terminaux.
The idea was to push the concept of generated favicons far and beyond and pack a thrilling retro shooter in 16×16 pixels.
Damn, I just got the very same idea today !
Well done Mathieu 'p01' Henri.
Checklist:
- Use list markup to group your cards
- Make sure your cards don't break when lines of content wrap or images don't meet specific aspect ratio requirements
- Avoid too much functionality and reduce tab stops. Cards shouldn't be miniature web pages.
- Remember that headings should begin sections. Most everything that belongs to the section should follow the heading in the source.
I participated in this year's js13kGames, a JavaScript game development competition with a file size limit of 13kb, including code, assets and everything else. My entry was Underrun, a twin stick shooter using WebGL.
Very detailed and insightful post-mortem on the winning game of the js13kGames competition !
Reminds me of Fabien Sanglard game architetcure reviews, except it's from the author himself :)
I opted to render the player character as a sprite as well, even though it needs to be freely rotated. It was far easier to produce 8 different sprites – one for each direction – than to implement a loader and renderer for complex 3D models. [...] The game never needs to rotate any geometry. [...] To make the player character rotation look convincing I build a 3D model and simply took screenshots for each of the different perspectives. I'm a total doofus when it comes to 3D modeling software, but that doesn't stop me from using the ingenious Wings3D. The result doesn't look like much, but scaled down to 16px, it doesn't matter.