probe-image-size VS caniuse

import React, { useState } from "react"; const url = require("url"); const http = require("http"); const sizeOf = require("image-size"); function Upload() { const [photoName, setPhotoName] = useState(""); const [photoLink, setPhotoLink] = useState(""); const [submittedData, setSubmittedData] = useState([]); const [errors, setErrors] = useState([]); function handlePhotoNameChange(event) { console.log("handlePhotoNameChange"); setPhotoName(event.target.value); } function handlePhotoLinkChange(event) { console.log("handlePhotoLinkChange"); setPhotoLink(event.target.value); } function handleSubmit(event) { event.preventDefault(); if (photoName.length > 0) { // TODO: // Use 'probe-image-size' library to determine width and height of the image the user passed in // Then, add a 'width' and 'height' key value to the 'formData' variable so that the // values are then added back to 'db.json' accordingly: // https://github.com/nodeca/probe-image-size const options = url.parse(photoLink); // 'http.get()' request so that I can obtain the image itself: http.get(options, function (response) { const chunks = []; response .on("data", function (chunk) { chunks.push(chunk); }) .on("end", function () { const buffer = Buffer.concat(chunks); console.log(sizeOf(buffer)); }); }); const formData = { photoName: photoName, photoLink: photoLink }; const dataArray = [...submittedData, formData]; setSubmittedData(dataArray); setPhotoName(""); setPhotoLink(""); setErrors([]); console.log("handleSubmit() called"); console.log("dataArray (before fetch() call): ", dataArray); fetch("http://localhost:3000/photos", { method: "POST", headers: { "Content-Type": "application/json", }, body: JSON.stringify({ dataArray: dataArray, }), }) .then((response) => response.json()) .then((response) => { console.log("response (from fetch request): ", response); }); } else { setErrors(["Name of photo is required!"]); } } const listOfSubmissions = submittedData.map((data, index) => { return ( {data.photoName} {data.photoLink} ); }); return ( Upload Image To Board Name: Link: Upload {errors.length > 0 ? errors.map((error, index) => ( {error} )) : null} Recent Submissions Below: {listOfSubmissions} ); } export default Upload;

Again, there are multiple ways to get dimensions and your development pipeline might just provide this information by default. In case it doesn't, we have found a nice and small npm package called probe-image-size. It allows for 'probing' an image locally or remotely.

Safari is the only browser that doesn't support extending HTML element

https://caniuse.com/?search=Custom%20Elements

You forgot to mention (Web)Workers. This is explicit creation, management, and communication with additional threads within JavaScript. What's more, they've been around in JavaScript longer than the V8 engine has even existed!

https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers...

https://caniuse.com/?search=webworkers

Do you happen to know where can I check out the cutoff version for each browser? https://caniuse.com/?search=wasm doesn't have it (or other things like WasmGC for that matter)

(https://caniuse.com/) A handy tool for checking the browser compatibility of HTML, CSS, and JavaScript features. Can I Use provides up-to-date support tables for various web technologies across different browsers.

Caniuse

Can I Use (https://caniuse.com/)

> Is it though?

In my experience it's the buggiest browser out of the big three, and is often missing basic features like e.g.:

https://caniuse.com/?search=opus

Supported in Firefox for *12 years* now, in Chrome for 10, still no support in Safari.

They only "support" Opus audio in their special snowflake '.caf' container, which is super buggy and the last time I checked no open source program could even generate Opus '.caf' files that could be played by Safari on all Apple platforms. I ended up writing a custom converter which takes a standard '.opus' file and remuxes it on-the-fly (I only store '.opus' files on my server) into Safari-compatible '.caf' files, taking special care to massage it so that it avoids all of their demuxer/decoder bugs. You shouldn't have to do this to have cross-browser high quality audio!

Well I'll be! In my mind I had this clear picture of Firefox implementing it.

It correct, it was only Chrome: https://caniuse.com/?search=html%20import