A visualizer to help you learn how the DOM Event system works through exploration. Explore event phases, stopping events, canceling events, passive events and more.
Having implemented such a strategy at Facebook, the effects were remarkable:
The proposed improvements can easily be applied to other programming languages too.
For all your working-with-layers-on-
You can draw things onto the stage, add event listeners to them, move them, scale them, and rotate them independently from other shapes to support high performance animations, even if your application uses thousands of shapes.
There’s also a version to use with React, providing Components for all key components of Konva.
Dmitri Pavlutin digs into why
parseInt(0.0000005); evaluates to
parseInt(0.5); // => 0 parseInt(0.05); // => 0 parseInt(0.005); // => 0 parseInt(0.0005); // => 0 parseInt(0.00005); // => 0 parseInt(0.000005); // => 0 parseInt(0.0000005); // => 5 🤯
During the presentation, Fred demonstrates dynamically loading JS using “Islands Architecture”,a strategy where small HTML placeholders are progressively upgraded with dynamic or interactive content as-needed.
The demonstration involves waiting on the viewport visibility of a div placeholder before loading some JS.
Using an IIFE an
IntersectionObserver is attached to keep an eye on a preceding a DOM Node. Once in view it’ll disconnect the
IntersectionObserver and run whatever JS you want it to run (such as loading and rendering a React App).
One of the best ways to control an object is with a
Proxy. You can do a lot of fun things with Proxies, which we will explain in this article.
💵 This linked article is stuck behind Medium's metered paywall, which may prevent you from reading it. Open the link in an incognito window to bypass Medium's ridiculous reading limit.
After reading yet another blog post about JS classes being “just sugar for prototypal inheritance”, I’ve decided to write this post to help clarifying, one more time, why this statement is misleading; a post that hopefully explains what’s the difference and why it matters to understand it.
I also used to say this — echo’ing statements by others — but will refrain from doing so from now on 😅
With this article I want to do three things:
- Provide you with an interactive content-aware resizer so that you could play around with resizing your own images
- Explain the idea behind the Seam Carving algorithm
- Explain the dynamic programming approach to implement the algorithm (we’ll be using TypeScript for it)
Using the algorithm it’s possible to resize an original image (center) without distorting important features in the image (left) unlike regular resizing which squeezes the image (right).
Using the resulting JS Image Carver you can see the algorithm in action.