Cropping images in the browser can be done with the HTML5 canvas element. In this tutorial we’ll load an image from a local URL, crop the image, and present the result on the same page.| PQINA
A tiny code sample showing how to use the CSS color-mix function with currentColor to automatically lower the opacity of anchor underlines.| PQINA
A powerful JavaScript Image Editor that integrates with every stack. Fully configurable and works intuitively on every device.| pqina.nl
In this article we look at a <birthdate-input> custom element that automatically orders input fields based on the browser locale. Useful for asking your customers to input their birthdate without presenting them with a datepicker.| PQINA
This code animates a CSS property, and transitions a custom CSS property. The transition property is used in the animation. This combination works on Chrome, but unfortunately fails on Firefox and Safari.| PQINA
While developing FilePond I wanted to run a CSS powered spring animation, but the CSS API didn’t support it natively. So I built this tiny tool to generate linear easing functions that simulate spring animations in CSS.| PQINA
In this short read we’ll explore the Web Bluetooth API. We’ll connect with my Bluetooth BBQ thermometer. Then we’ll try to read out its data and listen to its temperature updates. At the end of the article you’ll have a good idea about what you can do with the Web Bluetooth API.| PQINA
There’s no sleep function in JavaScript, how can we make one?| PQINA
Transparent image borders can have contrast issues and look dull, let’s make them nice and crisp with this tiny CSS trick.| PQINA
A short code example showing how to create a clone (or copy) from a File object received from a file input element.| PQINA
In this short tutorial we’ll use the PinturaInput Web Component to replace a Slim Image Cropper instance with the more powerful Pintura Image Editor SDK.| PQINA
To optimise pages on this blog I recently replaced the animated GIFs with auto-playing videos. It required a couple tries to get it right, so here’s how it works.| PQINA
In this 3 minute tutorial we use CropGuide, a JavaScript image cropper, to crop images before they’re uploaded to our server without making any changes to existing file upload code.| PQINA
The HTML canvas element can draw text but it cannot wrap text. Text wrapping is complicated so in this tutorial, instead of breaking text lines with JavaScript, we’ll lean on native browser tech to draw wrapped text lines.| PQINA
If we show a modal on iOS we need to prevent events inside the modal from interacting with the page behind the modal. On a previous episode of “Fun with Safari” we could use preventDefault() on the "touchmove" event but on iOS 15 that no longer works. Here we go.| PQINA
The EyeDropper API just landed in Chrome Canary. In this is a mini tutorial we’ll quickly look at how to use it in our web apps to select colors.| PQINA
Make the dots in a password field bigger with this basic CSS style. It’ll make it easier to see the number of dots in the field, helping both yourself and the visually impaired.| PQINA
Learn how to create an overflow fade out effect using CSS mask-image. This helps indicate to the user that there’s more content to be seen. Masking is very useful when overflowing content that’s placed over an image or a non-uniform background.| PQINA
A video overview of HTML elements and how they sound when being navigated with assistive technology like the screenreader VoiceOver.| PQINA
FilePond is split up in a core library and a wide range of plugins. The plugins add properties to the core. But how do we extend the core TypeScript Interface to show the plugin properties?| PQINA
Sometimes you get a Blob object when instead you would like to have a File. For example, when you use blob() on a fetch response object. In this quick tutorial we’ll explore how to turn a Blob into a File.| PQINA
Sometimes we just want to download an image file instead of opening it in the browser. For these situations we can use the download attribute. In this article we’ll learn how to use it and how we can automate its behavior with JavaScript.| PQINA
Profile pictures are often masked by a circle. How can we present our images in such a circle. Lets explore two options, one where we use CSS and one where we actually mask the image data.| PQINA
In this short article we’ll explore drawing decorative lines with CSS using Pseudo Elements, Background Images, and SVG. After reading you’ll have learned a couple of interesting techniques for drawing section separators or other decorative line elements with CSS.| PQINA
I want to start 2021 with a positive vibe so I’m joining Zell Liews JavaScript course giveaway. I’m giving away 5 Lifetime Pintura Image Editor Hobby licenses. The usual price for the Hobby license subscription is $149 yearly.| PQINA
Watermarking photos can be a tedious task. In this quick tutorial we’ll use FilePond and the FilePond Image Transform Plugin to automatically add watermarks to images. FilePond is free and is compatible with most popular frameworks, you can use the result of this tutorial in your React, Vue, Svelte, Angular, or jQuery projects.| PQINA
iOS Safari 13.4+ allows us to block back and forward navigation gestures. Super useful for media galleries and image croppers where users interact with elements on the side of the viewport and most likely don’t want to navigate to another page. Let’s take a minute and look at the code snippet.| PQINA
A super concise tutorial on using JavaScript to rename files in the browser. We’ll quickly cover how to update a file object and read its contents. Let’s get started!| PQINA
This quick guide shows you how to set up a form to upload images to your media library using the free WordPress plugin Snippy.| PQINA
Last year, while building the FilePond product page I stumbled upon the scrollIntoView API. It’s a handy method to instruct the browser to scroll an element into the viewport.| PQINA
In the previous article on Smart CSS we used the user’s scroll position to trigger a floating navigation header.| PQINA
Last Thursday I decided to finally launch FilePond.js, a JavaScript file upload library I’d been working on for six months. This is a summary of how I prepared for launch day and why having only a single sale did not make me a sad panda.| PQINA
You’ve found that perfect plugin for your site, but dang, it’s not available for WordPress, it’s a jQuery plugin. Fear not, the following guide will help you set up any jQuery or JavaScript plugin on WordPress.| PQINA
Slim Image Cropper is a nifty way to let users upload cropped images to your server. but it doesn’t offer an out of the box solution to upload multiple images at once. In this article we’ll setup a script that works together with Slim to setup basic multiple file upload.| PQINA
If you’ve got photo galleries on your website or need to generate avatars from uploaded profile pictures you’ll most likely want to create thumbnails. In this article we’ll look at a function that handles various image types and resizes them to a set width and height.| PQINA
You’re using the HTML Canvas Element in your new web app and decide to quickly test on iOS Safari. Suddenly your canvas isn’t drawn and the console shows a yellow warning “Total canvas memory use exceeds the maximum limit”. What gives?| PQINA
Let’s use CSS Custom Properties and calc() to create various CSS color effects, fasten your seatbelt, we’re going from 0 to 100 in 1.5 seconds.| PQINA
In this quick tutorial we’ll build a Vue image editor using Pintura a powerful JavaScript image and video editor SDK.| PQINA
In this quick tutorial we’ll use JavaScript to compress images selected with a file input element. We’ll compress images and save them back to the file input ready for upload.| PQINA
In this short read we create a custom Svelte store to listen for Media Query changes. Super useful for when we want to react to the user changing the system theme or resizing the browser window.| PQINA
A quick guide explaining how to change the color of an SVG when it’s used as a CSS background-image.| PQINA
In this short step by step tutorial we’ll set up Pintura Image Editor with its Video Editor extension to edit images and videos in the browser with React.| PQINA
This short and concise guide shows how to set up image uploading with Node.js and Express.| PQINA
It’s always been impossible to set the value of a file input element with JavaScript, but this has changed last year and it’s now broadly supported, let’s see how it’s done.| PQINA
In this tutorial we use Pintura, a JavaScript image editor, to quickly create a JavaScript image annotation solution to annotate and decorate user submitted images and photos.| PQINA
We can use CSS absolute positioning to overlap elements, but there’s some advantages to using CSS grid instead. Let’s explore using CSS grid as an alternative to position absolute.| PQINA
In this quick tutorial we set up a basic HTML form to upload images with PHP, we also explore how to secure our PHP script so it can’t be abused by malicious users.| PQINA
In this short tutorial we explore 3 different JavaScript methods to convert an image into a Base64 string. We look at converting a File object or Blob, a canvas element, and an image tag.| PQINA
Google Search Console sends Mobile Usability issues detected emails at random intervals, what’s going on and how to fix this?| PQINA
This static blog is generated with Eleventy and all its social images are automatically generated with node-canvas. In this tutorial we’ll set up a basic version of this script so you can use it on your blog as well.| PQINA
If there’s one thing I’m sure of it’s that Safari and the HTML canvas element aren’t sitting in a tree together. It’s 2022 and Safari still can’t handle canvas elements having more than 16777216 pixels.| PQINA
In this tutorial we’ll integrate Uppy with Pintura Image Editor to visually optimise and compress images before they’re uploaded to the server.| PQINA
Sometimes images are just too big to display on the web page. We don’t need JavaScript to fix this. We can resize images proportionally with HTML image tags or CSS background styles. Let’s look at the different options we have to size images while keeping their aspect ratio in check.| PQINA
In this short tutorial we’ll use a custom <pintura-input> element to add image editing and uploading to any WordPress website front-end.| PQINA
Converting JavaScript file objects or blobs to Base64 strings can be useful. For example when we can only send string based data to the server. In this tutorial we’ll explore how to use JavaScript to generate a Base64 string and a DataURL from a file object.| PQINA
In this 3 minute article we’ll look at flipping images horizontally and vertically using CSS and JavaScript. We’ll explore how to flip an img element, a background-image, or flip the actual ImageData using a canvas element.| PQINA
Being able to animate the CSS width and height properties would be super useful. Unfortunately at the moment it’s a sure-fire way to get your browser to scream in agony. In this 5 minute tutorial we’ll explore using the transform property to simulate animating the width of an element.| PQINA
In this 2 minute tutorial we’ll learn how to use CSS to present images in a predefined aspect ratio. Useful for when you want to show images with various dimensions in (for example) a square box without skewing them.| PQINA
In this 3 minute tutorial we’ll write a tiny JavaScript function that helps us crop images to various aspect ratios. Super useful for cropping photos before posting to social media timelines or uploading profile pictures as these are often required to be of a certain aspect ratio.| PQINA
With the introduction of the File API we gained the ability to edit files in the browser. We could finally resize images, unzip files, and generate new files based on interactions in the browser. One caveat though, you couldn’t upload these files.| PQINA
By mapping the current scroll offset to an attribute on the html element we can style elements on the page based on the current scroll position. We can use this to build, for example, a floating navigation component.| PQINA
In this tutorial we’ll write a tiny JavaScript event handler that will post our HTML forms using fetch instead of the classic synchronous form post. We’re building a solution based on the Progressive Enhancement strategy, if JavaScript fails to load, users will still be able to submit our form.| PQINA
If we use the HTML5 canvas fillText API and compare output from various browsers we see that the draw offset differs slightly. In this quick tutorial we’ll use a snippet to determine this offset and then correct the draw position.| PQINA
