Forem: Arthur Corenzan

Versionamento semântico

Arthur Corenzan — Tue, 26 Dec 2023 14:11:13 +0000

Somente para bibliotecas. Não se aplica a produtos. Ver outros esquemas de versionamento de software.

Pasting screenshots takes way longer than pasting image files

Arthur Corenzan — Tue, 22 Feb 2022 14:04:22 +0000

Update. The demo was previously broken, now it's fixed.

Let me show you;

Take a screenshot using an utility that dumps the image directly to your clipboard, so you can paste it. Like the PrintScreen key on Windows/Linux or Cmd+Shift+3 on macOS.
Open this up https://eivfjo.csb.app.
Paste with Ctrl+V on Windows/Linux or Cmd+V on macOS.
Now copy an existing image from your computer—perhaps a screenshot saved to disk.
Go back to the page and paste it.
See any difference?

Here's how it worked out for me (I'm using Chrome on Windows, by the way);

The first paste, of the screenshot just taken, took about 500ms—I'm on a 4k display, your mileage may vary.
The second one, of a file from my computer, took 0ms.

Now I'll reveal it to you. We're doing nothing. Okay, it's not technically nothing. But we're not really doing anything useful or that should take too long for that matter.

So what gives?

Below there's the whole code you just tested. You can also check it over on CodeSandbox.

document.addEventListener("paste", (event) => {
  const now = performance.now();
  void event.clipboardData.files; // This line is the culprit.
  document.body.textContent = `It took ${performance.now() - now}ms`;
});

If you're not familiar or need a refresher, void simply evaluates the expression and returns undefined. That's it. We might as well omit it. I only added it for dramatic purposes. The important bit is you have to access the files property on the clipboardData object carried by the event.

If you're curious why that is it's because the files array is a shim, its content is gathered in the property accessor get files() in the DataTransfer interface. You can read more on the spec.

The odd part is why the difference between pasting a screenshot and pasting a file.

MDN doesn't say anything. The spec has some curious bits but didn't explain it either.

My wild guess is that it isn't the browser's fault. Perhaps the underlying implementation on the OS captures the screen as a simple bitmap and then lazily encodes it to more suited format line PNG as it's read? I don't know.

It's a problem in any case because for one I can't even show the user some feedback that something's going on since event handlers block—the next frame doesn't start until it returns, so any changes to DOM, like adding a loading class to an element, will have to wait—but it's also freezing up the whole page for that period. Yikes! :(

Any ideas?

Consentman: a lightweight manager for complying with user consent

Arthur Corenzan — Sun, 08 Mar 2020 18:27:56 +0000

Photo by Charles Deluvio on Unsplash.

With GDPR and similar legislation in other countries—like the LGPD here in Brazil—picking up I've started to get asked about privacy-focused issues on my clients' websites.

One such case got me working on a Cookie Consent pop-up. Yea I hate those too but as others have mentioned it's mostly because they're being used wrong.

The first thing I did was to look up what's been done before in this front. But as I did my research I began to realize my options were plugins for WordPress for non-developers, bloated suites that do too much—often overlapping with existing components in my website—or basically adware that tries to reel me into their paid services.

Two of the popular ones are Osano's cookieconsent and OIL.js.

As a fan of small, focused libraries that do one thing and do it well I was left hanging. So I did as any sane developer would do and set out to create my own.

My aim was:

Smaller scope. Fix the issue at hand and don't touch the rest.
Simple API that gives full control to the developer.
Don't touch the user interface.

The issue at hand, in this case, was to manage user consent for cookies, tracking and some other stuff and get out of the way. I already have the interface done, using my own styles and markup all accessible and whatnot.

That's how Consentman came to be.

import {
  addConsentSubject,
  getConsent,
  changeConsent,
  enforceConsent
} from "consentman";

addConsentSubject("default", state => {
  switch (state) {
    case "allowed":
      console.log("Consent has been granted. Installing trackers.");
      break;

    case "blocked":
      console.log("Consent has been revoked. Removing trackers.");
      break;

    default:
      console.log("User needs to consent first.");
      break;
  }
});

if ("indeterminate" === getConsent("default").consent) {
  if (confirm("Would you like to consent?")) {
    changeConsent("default", "granted");
  } else {
    changeConsent("default", "revoked");
  }
}

enforceConsent();

In the example above, when the user first visit the website the consent named default will be indeterminate, so a confirmation will be shown asking the user for consent.

If the user clicks Yes consent will be granted and any subjects will have their state changed to allowed.

If the user clicks No consent will be revoked and any subjects will have their state changed to skipped.

Subsequent visits by the user will not trigger the confirmation since consent is remembered across visits—via local storage.

By then, if at any time default consent is revoked and re-enforced, any subjects will have their state changed to blocked.

Notice that there are two possible states resulting from the consent being revoked. This way you can handle a subject being skipped over and being blocked separately.

You can also have additional consents with different names, e.g. one for trackers, one for advertising, etc.

Head over to the repository and checkout the code! Also, don't be a stranger, all feedback is welcome. 😊️

Thank you for your time and have a good one.

Lazy load embedded YouTube videos

Arthur Corenzan — Wed, 07 Aug 2019 15:04:06 +0000

I was working on this simple static website that should have an YouTube video displayed right on the landing page. So I went my merry way, hopped onto YouTube, snatched the embed code, pasted it into my editor and called it a day.

The thing is the job was specifically to deliver high performance, accessibility and modern practices, so you can imagine my annoyance when I noticed that just for having this <iframe> I got this:

Plus a few extra requests that my ad blocker handled for me.

That is over 500KB that my users would have to download on top of the website, regardless if they'll watch the video. Do you have any idea how heavy this might hit your users, specially the ones with slow connection or low performing machines? To add insult to injury they'd also be being tracked—Hi Google—for just loading a video they didn't even know was there.

It being a simple static website I wanted to keep my solution to a minimum, so here's what I came up with.

The code for embedding an YouTube video, as of August 2019, goes like this:

<iframe 
  width="560" 
  height="315" 
  src="https://www.youtube.com/embed/Y8Wp3dafaMQ" 
  frameborder="0" 
  allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" 
  allowfullscreen>
</iframe>

So I thought what if instead of the actual video I showed just its cover linked to the video? It would still kinda look like an embedded video but it would require only a single image upfront. Thankfully YouTube has an URL schema for video thumbnails.

<a href="https://www.youtube.com/embed/Y8Wp3dafaMQ">
  <img src="https://i3.ytimg.com/vi/Y8Wp3dafaMQ/hqdefault.jpg">
</a>

Cool, but I really don't want to have to create a whole new page just for this teeny tiny snippet of code. Well, we're in luck cause <iframe> has just the perfect thing for us—the srcdoc attribute. With it you can source the <iframe> directly in the hosting page. Just beware that it won't work on Edge or IE and that we can't use double quotes.

<iframe 
  ...
  srcdoc="<a href=https://www.youtube.com/embed/Y8Wp3dafaMQ><img src=https://i3.ytimg.com/vi/Y8Wp3dafaMQ/hqdefault.jpg></a>">
</iframe>

Finally you'll notice that if we click the image it'll load the video but in a paused state and we would need to click it again to start watching. Fret not, cause the embed video URL supports player parameters and among those there's the autoplay variable which does exactly what you would expect. Additionally due to browser's default style users on systems with scrollbar—namely not macOS—will see an unnecessary scrollbar, but nothing that a small CSS reset wouldn't fix.

Remy Sharp pointed out we should keep the src as fallback to browsers that don't support srcdoc. Adrian Roselli suggested a few tweaks to improve accessibility. Also, while applying these suggestions I fixed the image position so it stays centered both horizontally and vertically without resorting to background-size: cover. Thank you guys for your feedback! 🤩️

Here's the final result:

The <iframe> singled out:

<iframe
  width="560"
  height="315"
  src="https://www.youtube.com/embed/Y8Wp3dafaMQ"
  srcdoc="<style>*{padding:0;margin:0;overflow:hidden}html,body{height:100%}img,span{position:absolute;width:100%;top:0;bottom:0;margin:auto}span{height:1.5em;text-align:center;font:48px/1.5 sans-serif;color:white;text-shadow:0 0 0.5em black}</style><a href=https://www.youtube.com/embed/Y8Wp3dafaMQ?autoplay=1><img src=https://img.youtube.com/vi/Y8Wp3dafaMQ/hqdefault.jpg alt='Video The Dark Knight Rises: What Went Wrong? – Wisecrack Edition'><span>▶</span></a>"
  frameborder="0"
  allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
  allowfullscreen
  title="The Dark Knight Rises: What Went Wrong? – Wisecrack Edition"
></iframe>

This way all the users will have to download upfront is the cover image, which seems pretty reasonable to me. You can customize it further, e.g. make use of the different thumbnail sizes for different devices, and if you need more control over what the user will load and what features to enable you can always explore the YouTube Player API.

If you've got any questions, corrections or suggestions feel free to comment below. Thank you for your time. 😊️