Day: May 20, 2020

Handle Async Image Loading in React with a Suspense library โšก๏ธ via /r/reactjs

Posted on Posted in Hot-react, javascript-react, react-framework, TweetTagged , , , , , Leave a comment

TLDR, I wrote a Suspense-like async loading, native, performant React <img> component library.

Today, I’ve published major changes to it, wanting to hear feedback from the community.

A short quote from HTML Spec on why do we need a separate library like react-shimmer :

Without the decode() method, the process of loading an img element and then displaying it might look like the following:

const img = new Image(); img.src = “nebula.jpg”;

img.onload = () => { document.body.appendChild(img); };

However, this can cause notable dropped frames, as the paint that occurs after inserting the image into the DOM causes a costly decode on the main thread.

This can instead be rewritten using the decode() method:

const img = new Image(); img.src = “nebula.jpg”;

img.decode().then(() => { document.body.appendChild(img) })

This latter form avoids the dropped frames of the original, by allowing the user agent to decode the image in parallel, and only inserting it into the DOM (and thus causing it to be painted) once the decoding process is complete.

Since we are using React, how do we suppose to use decode()?

Introducing the Release v3.0.0 ๐Ÿค™๐Ÿผ๐ŸŒ 

  • Source code has been rewritten in TypeScript.
  • Built-in decode() before paint.
  • Native <img>
    component props (all of them) are preserved.
  • Enforced “separation of concerns” between the actual async handling logic and loaders. New pluggable-loader architecture.
  • Better dependency management + deploy/publish process.
  • Zero dependencies.

Check it out!

Repo: https://github.com/gokcan/react-shimmer

CodeSandbox: https://codesandbox.io/s/nh9x1

from Handle Async Image Loading in React with a Suspense library โšก๏ธ https://ways4eu.wordpress.com/?p=24970

Wikipedia article of the day for May 20, 2020

Posted on Posted in Tweet, WikipediaTagged , , Leave a comment

Wikipedia article of the day is Aitraaz. Check it out: https://ift.tt/2fkMINU Summary: Aitraaz (Objection) is a 2004 Indian Hindi-language romantic thriller film directed by Abbasโ€“Mustan. It stars Akshay Kumar and Priyanka Chopra (pictured), along with Kareena Kapoor Khan, Amrish Puri, Paresh Rawal and Annu Kapoor. It was produced by Subhash Ghai, with a screenplay by Shyam Goel and Shiraz Ahmed, and soundtrack by Himesh Reshammiya. In the film, a man is accused of sexual harassment by his female superior. It was released to positive reviews, and to widespread critical acclaim for Chopra’s performance as Sonia Roy. Aitraaz was a commercial success, grossing over โ‚น260ย million at the box office against a budget of โ‚น110ย million. At the 50th Filmfare Awards, Chopra was nominated for Best Supporting Actress and won Best Performance in a Negative Role for her work. She also won the Bengal Film Journalists’ Association Award for Best Actress and the Screen Award for Best Actor in a Negative Role. The film received ten nominations at the 2005 International Indian Film Academy Awards, winning three.