Each exercise emphasizes the fundamentals of object oriented programming in JavaScript.
Sur Dev.to
Scroll Indicator is basically a line which fills up based on how much the user has scrolled in the page.They are usually positioned at the Top of the page.
JavaScript is a programming language or, in other words, a means by which a computer is instructed to do things. Just the same as one controls humans with hisses and meows, one controls computers with statements written in a programming language. All web browsers understand JavaScript and you can take advantage of that to make web pages do crazy things!
The world's most popular React UI framework -
React components that implement Google's Material Design.
Un peu de tout sur CSS, HTML, SVG, JavaScript et le reste.
L’algorithme de tracé de cercle d'Andres1 permet, pour une complexité algorithmique très réduite, de tracer des cercles en image matricielle. Cet algorithme permet de paver entièrement le plan par des cercles concentriques, sans les trous que laisse par exemple l'algorithme de tracé d'arc de cercle de Bresenham.
JavaScript
Implementation that draws a circle in HTML5 canvas (for educational purposes only; there are better ways to draw circles in canvas).
const CHANNELS_PER_PIXEL = 4; //rgba
function drawCircle (x0, y0, radius, canvas) {
var x = radius-1;
var y = 0;
var dx = 1;
var dy = 1;
var diameter = radius * 2;
var decisionOver2 = dx - diameter; // Decision criterion divided by 2 evaluated at x=r, y=0
var imageWidth = canvas.width;
var imageHeight = canvas.height;
var context = canvas.getContext('2d');
var imageData = context.getImageData(0, 0, imageWidth, imageHeight);
var pixelData = imageData.data;
var makePixelIndexer = function (width) {
return function (i, j) {
var index = CHANNELS_PER_PIXEL * (j * width + i);
//index points to the Red channel of pixel
//at column i and row j calculated from top left
return index;
};
};
var pixelIndexer = makePixelIndexer(imageWidth);
var drawPixel = function (x, y) {
var idx = pixelIndexer(x,y);
pixelData[idx] = 255; //red
pixelData[idx + 1] = 0; //green
pixelData[idx + 2] = 255;//blue
pixelData[idx + 3] = 255;//alpha
};
while (x >= y) {
drawPixel(x + x0, y + y0);
drawPixel(y + x0, x + y0);
drawPixel(-x + x0, y + y0);
drawPixel(-y + x0, x + y0);
drawPixel(-x + x0, -y + y0);
drawPixel(-y + x0, -x + y0);
drawPixel(x + x0, -y + y0);
drawPixel(y + x0, -x + y0);
if (decisionOver2 <= 0)
{
y++;
decisionOver2 += dy; // Change in decision criterion for y -> y+1
dy += 2;
}
if (decisionOver2 > 0)
{
x--;
dx += 2;
decisionOver2 += (-diameter) + dx; // Change for y -> y+1, x -> x-1
}
}
context.putImageData(imageData, 0, 0);
}
Comparatif des algos du plus court chemin
avec options intéressante :
- Obstacles
- Allow diagonal
- Bi-directional
- A*
- Dijkstra
Gestionnaire conforme de cookies
Js13kGames is a JavaScript coding competition for HTML5 Game Developers. The fun part of the compo is the file size limit set to 13 kilobytes.
TL;DR
The Friendly & Fun Fullstack javascript framework
Open source HTML5 Charts for your website
Simple yet flexible JavaScript charting for designers & developers
A collection of awesome browser-side JavaScript libraries, resources and shiny things.
Apprendre Angular en partant de zéro !
Pour les développeurs web qui veulent se former et se perfectionner sur Angular.
De Sacha Greif via webdevthierry sur le discord de Simplon Lyon.
How do you know if a new technology is worth investing time into?
Aujourd'hui, tous les langages semblent fonctionner de cette manière : se doter de certaines fonctionnalités basiques ou communes et permettre aux utilisateurs d'installer des packages pour des fonctionnalités spécifiques. Précisons aussi qu'un package peut avoir des dépendances, c'est-à-dire nécessiter l'installation d'autres packages pour fonctionner. On peut donc se retrouver facilement avec de nombreuses dépendances imbriquées dans le code d'un logiciel.
Via Davy.
A modern JavaScript utility library delivering modularity, performance & extras.
L'élément canvas est un composant de HTML qui permet d'effectuer des rendus dynamiques d'images bitmap via des scripts. Déjà implémenté dans certains navigateurs, il fait partie de la spécification HTML5. !wfr
- API canvas sur la MDN.
- Tuto
- The WebGL API sur la MDN.