56,966 blogs · [ { "id": "01a087c8-1207-72f6-935b-e80e22ccac9c", "title": "Animating The Dialog Element Using View Transitions", "url": "https://pqina.nl/blog/animating-the-dialog-element-using-view-transitions/", "published_at": "2026-06-23T00:00:00+00:00" }, { "id": "01a087c8-1207-72f6-935b-e80e23aacf36", "title": "Updating CSS Border Radius When A Container Is Overflowing", "url": "https://pqina.nl/blog/update-container-border-radius-scrollbar-overflow/", "published_at": "2025-11-26T00:00:00+00:00" }, { "id": "01a087c8-1207-72f6-935b-e80e24250718", "title": "How To Disable Right Click With JavaScript", "url": "https://pqina.nl/blog/disable-right-click-with-javascript/", "published_at": "2025-09-22T00:00:00+00:00" }, { "id": "01a087c8-1207-72f6-935b-e80e2522743b", "title": "Crop An Image With Canvas", "url": "https://pqina.nl/blog/crop-an-image-with-canvas/", "published_at": "2025-09-03T00:00:00+00:00" }, { "id": "01a087c8-1207-72f6-935b-e80e259278c8", "title": "Using CSS Color-Mix() to lower anchor underline opacity", "url": "https://pqina.nl/blog/color-mix-anchor-underline/", "published_at": "2025-02-28T00:00:00+00:00" }, { "id": "01a087c8-1207-72f6-935b-e80e2645491a", "title": "Building A Birthdate Input Custom Element", "url": "https://pqina.nl/blog/building-birthdate-input-custom-element/", "published_at": "2024-12-10T00:00:00+00:00" }, { "id": "01a087c8-1207-72f6-935b-e80e267652fa", "title": "Animating And Transitioning CSS Custom Properties", "url": "https://pqina.nl/blog/css-custom-property-mix-transition-animation/", "published_at": "2024-07-29T00:00:00+00:00" }, { "id": "01a087c8-1207-72f6-935b-e80e272c4553", "title": "Creating CSS Spring Animations With The Linear Easing Function", "url": "https://pqina.nl/blog/css-spring-animation-with-linear-easing-function/", "published_at": "2024-07-03T00:00:00+00:00" }, { "id": "01a087c8-1207-72f6-935b-e80e27315162", "title": "Using Web Bluetooth To Read BBQ Temperature Sensor Data", "url": "https://pqina.nl/blog/web-bluetooth-api-read-bbq-temperature-sensor-data/", "published_at": "2024-03-05T12:00:00+00:00" }, { "id": "01a087c8-1207-72f6-935b-e80e27381839", "title": "What's the JavaScript version of sleep", "url": "https://pqina.nl/blog/whats-the-javascript-version-of-sleep/", "published_at": "2023-10-17T00:00:00+00:00" }, { "id": "01a087c8-1207-72f6-935b-e80e2774779c", "title": "Flexible CSS Colors With Custom Properties", "url": "https://pqina.nl/blog/css-colors-with-custom-properties/", "published_at": "2023-08-10T00:00:00+00:00" }, { "id": "01a087c8-1207-72f6-935b-e80e286e9bd8", "title": "Create Crisp Image Borders With CSS Pseudo Elements", "url": "https://pqina.nl/blog/crisp-image-borders-with-css-pseudo-elements/", "published_at": "2023-03-16T00:00:00+00:00" }, { "id": "01a087c8-1207-72f6-935b-e80e28c12e71", "title": "Edit Images With Vue And Pintura", "url": "https://pqina.nl/blog/edit-images-with-vue-and-pintura/", "published_at": "2023-02-13T00:00:00+00:00" }, { "id": "01a087c8-1207-72f6-935b-e80e29aa885e", "title": "Compress An Image Before Upload With JavaScript", "url": "https://pqina.nl/blog/compress-image-before-upload/", "published_at": "2023-01-01T00:00:00+00:00" }, { "id": "01a087c8-1207-72f6-935b-e80e2a979cd9", "title": "Creating A Custom Svelte Media Query Store", "url": "https://pqina.nl/blog/svelte-media-query-store/", "published_at": "2022-12-22T00:00:00+00:00" }, { "id": "01a087c8-1207-72f6-935b-e80e2b967438", "title": "Set Fill Color of SVG Background-image", "url": "https://pqina.nl/blog/set-svg-background-image-fill-color/", "published_at": "2022-11-18T00:00:00+00:00" }, { "id": "01a087c8-1207-72f6-935b-e80e2bb3b161", "title": "Edit Video and Images With React", "url": "https://pqina.nl/blog/edit-video-with-react/", "published_at": "2022-11-10T00:00:00+00:00" }, { "id": "01a087c8-1207-72f6-935b-e80e2ca59fe6", "title": "Upload An Image With Node.js", "url": "https://pqina.nl/blog/upload-image-with-nodejs/", "published_at": "2022-08-02T00:00:00+00:00" }, { "id": "01a087c8-1207-72f6-935b-e80e2d2189b5", "title": "How To Clone A File With JavaScript", "url": "https://pqina.nl/blog/how-to-clone-a-javascript-file-object/", "published_at": "2022-07-12T00:00:00+00:00" }, { "id": "01a087c8-1207-72f6-935b-e80e2d873d6f", "title": "How To Set The Value Of A File Input", "url": "https://pqina.nl/blog/set-value-to-file-input/", "published_at": "2022-06-23T00:00:00+00:00" }, { "id": "01a087c8-1207-72f6-935b-e80e2e25d576", "title": "Annotate Images With JavaScript", "url": "https://pqina.nl/blog/annotate-image-with-javascript/", "published_at": "2022-06-21T00:00:00+00:00" }, { "id": "01a087c8-1207-72f6-935b-e80e2ed24819", "title": "Overlap Elements With CSS Grid Instead Of Position Absolute", "url": "https://pqina.nl/blog/css-grid-position-absolute-alternative/", "published_at": "2022-06-02T00:00:00+00:00" }, { "id": "01a087c8-1207-72f6-935b-e80e2f1a83f4", "title": "Slim Image Cropper Alternative", "url": "https://pqina.nl/blog/slim-image-cropper-alternative/", "published_at": "2022-05-10T00:00:00+00:00" }, { "id": "01a087c8-1207-72f6-935b-e80e300048aa", "title": "How To Upload An Image With PHP", "url": "https://pqina.nl/blog/image-upload-with-php/", "published_at": "2022-05-09T00:00:00+00:00" }, { "id": "01a087c8-1207-72f6-935b-e80e305325e6", "title": "Fix HTML Video Autoplay Not Working", "url": "https://pqina.nl/blog/fix-html-video-autoplay-not-working/", "published_at": "2022-04-12T00:00:00+00:00" }, { "id": "01a087c8-1207-72f6-935b-e80e3112cd5c", "title": "Convert An Image To A DataURL or Base64 String Using JavaScript", "url": "https://pqina.nl/blog/convert-an-image-to-a-base64-string-with-javascript/", "published_at": "2022-03-24T00:00:00+00:00" }, { "id": "01a087c8-1207-72f6-935b-e80e3172756f", "title": "Fix Google Search Console Mobile Usability Issues With A CSS Snippet", "url": "https://pqina.nl/blog/fix-google-mobile-usability-issues/", "published_at": "2022-03-18T00:00:00+00:00" }, { "id": "01a087c8-1207-72f6-935b-e80e31da237a", "title": "Generate Social Image Covers With Eleventy And Node-Canvas", "url": "https://pqina.nl/blog/generate-social-image-covers-with-eleventy-and-node-canvas/", "published_at": "2022-03-17T00:00:00+00:00" }, { "id": "01a087c8-1207-72f6-935b-e80e32158c1c", "title": "Crop Images Before Upload With JavaScript", "url": "https://pqina.nl/blog/crop-image-before-upload-javascript/", "published_at": "2022-03-10T00:00:00+00:00" }, { "id": "01a087c8-1207-72f6-935b-e80e32d699dc", "title": "Total Canvas Memory Use Exceeds The Maximum Limit", "url": "https://pqina.nl/blog/total-canvas-memory-use-exceeds-the-maximum-limit/", "published_at": "2022-01-12T00:00:00+00:00" }, { "id": "01a087c8-1207-72f6-935b-e80e3342aa24", "title": "Canvas Area Exceeds The Maximum Limit", "url": "https://pqina.nl/blog/canvas-area-exceeds-the-maximum-limit/", "published_at": "2022-01-12T00:00:00+00:00" }, { "id": "01a087c8-1207-72f6-935b-e80e33c60a87", "title": "Drawing Wrapped Text With The HTML Canvas Element", "url": "https://pqina.nl/blog/wrap-text-with-html-canvas/", "published_at": "2021-11-05T00:00:00+00:00" }, { "id": "01a087c8-1207-72f6-935b-e80e33e0bd0d", "title": "How To Prevent Scrolling The Page On iOS Safari 15", "url": "https://pqina.nl/blog/how-to-prevent-scrolling-the-page-on-ios-safari/", "published_at": "2021-09-28T00:00:00+00:00" }, { "id": "01a087c8-1207-72f6-935b-e80e344b20c1", "title": "Use The JavaScript EyeDropper API To Select Colors On The Web", "url": "https://pqina.nl/blog/use-the-javascript-eye-dropper-api-to-select-colors-on-the-web/", "published_at": "2021-09-07T00:00:00+00:00" }, { "id": "01a087c8-1207-72f6-935b-e80e34fb67e6", "title": "Styling Password Fields To Get Better Dots", "url": "https://pqina.nl/blog/styling-password-field-dots/", "published_at": "2021-09-06T00:00:00+00:00" }, { "id": "01a087c8-1207-72f6-935b-e80e35a41457", "title": "Create A Fade Out Overflow Effect Using CSS Mask-Image", "url": "https://pqina.nl/blog/fade-out-overflow-using-css-mask-image/", "published_at": "2021-07-02T00:00:00+00:00" }, { "id": "01a087c8-1207-72f6-935b-e80e35d920ca", "title": "What Do HTML Elements Sound Like?", "url": "https://pqina.nl/blog/what-do-html-elements-sound-like/", "published_at": "2021-07-01T00:00:00+00:00" }, { "id": "01a087c8-1207-72f6-935b-e80e36456299", "title": "Integrating Uppy With Pintura Image Editor A JavaScript Image Editor", "url": "https://pqina.nl/blog/editing-images-with-uppy-and-pintura/", "published_at": "2021-06-22T00:00:00+00:00" }, { "id": "01a087c8-1207-72f6-935b-e80e364751ae", "title": "Resize Images Proportionally While Keeping The Aspect Ratio", "url": "https://pqina.nl/blog/resize-images-proportionally-while-keeping-the-aspect-ratio/", "published_at": "2021-04-22T00:00:00+00:00" }, { "id": "01a087c8-1207-72f6-935b-e80e3655db5d", "title": "Edit Images Before Uploading Them To Your WordPress Media Library", "url": "https://pqina.nl/blog/edit-images-before-uploading-them-to-your-wordpress-media-library/", "published_at": "2021-03-23T00:00:00+00:00" }, { "id": "01a087c8-1207-72f6-935b-e80e36b9501d", "title": "TypeScript Interface Merging And Extending Modules", "url": "https://pqina.nl/blog/typescript-interface-merging-and-extending-modules/", "published_at": "2021-03-22T00:00:00+00:00" }, { "id": "01a087c8-1207-72f6-935b-e80e374b55d6", "title": "Convert A Blob To A File Using JavaScript", "url": "https://pqina.nl/blog/convert-a-blob-to-a-file-with-javascript/", "published_at": "2021-03-10T00:00:00+00:00" }, { "id": "01a087c8-1207-72f6-935b-e80e37b778de", "title": "How To Prompt The User To Download A File", "url": "https://pqina.nl/blog/how-to-prompt-the-user-to-download-a-file-instead-of-navigating-to-it/", "published_at": "2021-02-12T00:00:00+00:00" }, { "id": "01a087c8-1207-72f6-935b-e80e389196eb", "title": "Convert A File To A Base64 String Or DataURL Using JavaScript", "url": "https://pqina.nl/blog/convert-a-file-to-a-base64-string-with-javascript/", "published_at": "2021-01-18T00:00:00+00:00" }, { "id": "01a087c8-1207-72f6-935b-e80e395d4bfa", "title": "Applying A Circular Crop Mask To An Image", "url": "https://pqina.nl/blog/applying-a-circular-crop-mask-to-an-image/", "published_at": "2021-01-17T00:00:00+00:00" }, { "id": "01a087c8-1207-72f6-935b-e80e3a511883", "title": "Drawing Decorative Lines With CSS", "url": "https://pqina.nl/blog/drawing-decorative-lines-with-css/", "published_at": "2021-01-07T00:00:00+00:00" }, { "id": "01a087c8-1207-72f6-935b-e80e3a728b79", "title": "Pintura Image Editor Lifetime Hobby License Giveaway", "url": "https://pqina.nl/blog/pintura-image-editor-lifetime-license-giveaway/", "published_at": "2021-01-06T00:00:00+00:00" }, { "id": "01a087c8-1207-72f6-935b-e80e3a76f802", "title": "Applying Watermarks To Images With FilePond", "url": "https://pqina.nl/blog/applying-watermarks-to-images-with-filepond/", "published_at": "2020-09-16T00:00:00+00:00" }, { "id": "01a087c8-1207-72f6-935b-e80e3b091c11", "title": "Cross-Browser Alignment Of The Canvas FillText Draw Call", "url": "https://pqina.nl/blog/cross-browser-alignment-of-the-canvas-filltext-draw-call/", "published_at": "2020-08-11T00:00:00+00:00" }, { "id": "01a087c8-1207-72f6-935b-e80e3b31779f", "title": "Blocking Navigation Gestures On iOS Safari", "url": "https://pqina.nl/blog/blocking-navigation-gestures-on-ios-13-4/", "published_at": "2020-06-10T00:00:00+00:00" }, { "id": "01a087c8-1207-72f6-935b-e80e3bfd4116", "title": "Rename A File With JavaScript In The Browser", "url": "https://pqina.nl/blog/rename-a-file-with-javascript/", "published_at": "2020-04-14T00:00:00+00:00" }, { "id": "01a087c8-1207-72f6-935b-e80e3cf960cc", "title": "Flipping Images Horizontally Or Vertically With CSS And JavaScript", "url": "https://pqina.nl/blog/flipping-images-with-css-and-javascript/", "published_at": "2020-01-29T00:00:00+00:00" }, { "id": "01a087c8-1207-72f6-935b-e80e3d730236", "title": "Animating CSS Width And Height Without The Squish Effect", "url": "https://pqina.nl/blog/animating-width-and-height-without-the-squish-effect/", "published_at": "2020-01-27T00:00:00+00:00" }, { "id": "01a087c8-1207-72f6-935b-e80e3dbdd6ae", "title": "Presenting Images In A Specific Aspect Ratio With CSS", "url": "https://pqina.nl/blog/presenting-images-in-an-aspect-ratio-with-css/", "published_at": "2019-11-04T00:00:00+00:00" }, { "id": "01a087c8-1207-72f6-935b-e80e3e88fd05", "title": "Cropping Images To A Specific Aspect Ratio With JavaScript", "url": "https://pqina.nl/blog/cropping-images-to-an-aspect-ratio-with-javascript/", "published_at": "2019-10-31T00:00:00+00:00" }, { "id": "01a087c8-1207-72f6-935b-e80e3ec85328", "title": "The Trouble With Editing And Uploading Files In The Browser", "url": "https://pqina.nl/blog/the-trouble-with-editing-and-uploading-files-in-the-browser/", "published_at": "2019-09-10T00:00:00+00:00" }, { "id": "01a087c8-1207-72f6-935b-e80e3f67771a", "title": "How To Upload Images To The WordPress Media Library", "url": "https://pqina.nl/blog/uploading-files-to-wordpress-media-library/", "published_at": "2019-05-28T00:00:00+00:00" }, { "id": "01a087c8-1207-72f6-935b-e80e3fe7e754", "title": "CSS Smooth Scrolling", "url": "https://pqina.nl/blog/css-smooth-scrolling/", "published_at": "2019-02-14T00:00:00+00:00" }, { "id": "01a087c8-1207-72f6-935b-e80e40a55df0", "title": "Using Smart CSS To Time Your Newsletter Popup", "url": "https://pqina.nl/blog/using-smart-css-to-time-your-wonderful-newsletter-popup/", "published_at": "2019-01-29T00:00:00+00:00" }, { "id": "01a087c8-1207-72f6-935b-e80e40c1f50d", "title": "Applying Styles Based On The User Scroll Position With Smart CSS", "url": "https://pqina.nl/blog/applying-styles-based-on-the-user-scroll-position-with-smart-css/", "published_at": "2019-01-25T00:00:00+00:00" }, { "id": "01a087c8-1207-72f6-935b-e80e412a7158", "title": "Async Form Posts With A Couple Lines Of Vanilla JavaScript", "url": "https://pqina.nl/blog/async-form-posts-with-a-couple-lines-of-vanilla-javascript/", "published_at": "2019-01-24T00:00:00+00:00" }, { "id": "01a087c8-1207-72f6-935b-e80e4214c872", "title": "FilePond.js Launch Day Post-mortem", "url": "https://pqina.nl/blog/filepond-launch-day-post-mortem/", "published_at": "2018-03-06T00:00:00+00:00" }, { "id": "01a087c8-1207-72f6-935b-e80e42ef600a", "title": "Use JavaScript Plugins With WordPress", "url": "https://pqina.nl/blog/using-javascript-plugins-with-wordpress/", "published_at": "2017-06-21T00:00:00+00:00" }, { "id": "01a087c8-1207-72f6-935b-e80e43eb6dba", "title": "Upload Multiple Files With Slim Image Cropper", "url": "https://pqina.nl/blog/multiple-file-upload-with-slim/", "published_at": "2016-12-22T00:00:00+00:00" }, { "id": "01a087c8-1207-72f6-935b-e80e44c72d87", "title": "Create Thumbnails With PHP", "url": "https://pqina.nl/blog/creating-thumbnails-with-php/", "published_at": "2016-11-03T00:00:00+00:00" } ] posts Claim your blog

Back to pqina.nl

Blog · corpus.blog/blogs/pqina.nl/posts

pqina.nl

pqina.nl

2026

Animating The Dialog Element Using View Transitions original ↗

23 Jun 2026

2025

Updating CSS Border Radius When A Container Is Overflowing original ↗

26 Nov 2025

How To Disable Right Click With JavaScript original ↗

22 Sept 2025

Crop An Image With Canvas original ↗

3 Sept 2025

Using CSS Color-Mix() to lower anchor underline opacity original ↗

28 Feb 2025

2024

Building A Birthdate Input Custom Element original ↗

10 Dec 2024

Animating And Transitioning CSS Custom Properties original ↗

29 Jul 2024

Creating CSS Spring Animations With The Linear Easing Function original ↗

3 Jul 2024

Using Web Bluetooth To Read BBQ Temperature Sensor Data original ↗

5 Mar 2024

2023

What's the JavaScript version of sleep original ↗

17 Oct 2023

Flexible CSS Colors With Custom Properties original ↗

10 Aug 2023

Create Crisp Image Borders With CSS Pseudo Elements original ↗

16 Mar 2023

Edit Images With Vue And Pintura original ↗

13 Feb 2023

Compress An Image Before Upload With JavaScript original ↗

1 Jan 2023

2022

Creating A Custom Svelte Media Query Store original ↗

22 Dec 2022

Set Fill Color of SVG Background-image original ↗

18 Nov 2022

Edit Video and Images With React original ↗

10 Nov 2022

Upload An Image With Node.js original ↗

2 Aug 2022

How To Clone A File With JavaScript original ↗

12 Jul 2022

How To Set The Value Of A File Input original ↗

23 Jun 2022

Annotate Images With JavaScript original ↗

21 Jun 2022

Overlap Elements With CSS Grid Instead Of Position Absolute original ↗

2 Jun 2022

Slim Image Cropper Alternative original ↗

10 May 2022

How To Upload An Image With PHP original ↗

9 May 2022

Fix HTML Video Autoplay Not Working original ↗

12 Apr 2022

Convert An Image To A DataURL or Base64 String Using JavaScript original ↗

24 Mar 2022

Fix Google Search Console Mobile Usability Issues With A CSS Snippet original ↗

18 Mar 2022

Generate Social Image Covers With Eleventy And Node-Canvas original ↗

17 Mar 2022

Crop Images Before Upload With JavaScript original ↗

10 Mar 2022

Total Canvas Memory Use Exceeds The Maximum Limit original ↗

12 Jan 2022

Canvas Area Exceeds The Maximum Limit original ↗

12 Jan 2022

2021

Drawing Wrapped Text With The HTML Canvas Element original ↗

5 Nov 2021

How To Prevent Scrolling The Page On iOS Safari 15 original ↗

28 Sept 2021

Use The JavaScript EyeDropper API To Select Colors On The Web original ↗

7 Sept 2021

Styling Password Fields To Get Better Dots original ↗

6 Sept 2021

Create A Fade Out Overflow Effect Using CSS Mask-Image original ↗

2 Jul 2021

What Do HTML Elements Sound Like?original ↗

1 Jul 2021

Integrating Uppy With Pintura Image Editor A JavaScript Image Editor original ↗

22 Jun 2021

Resize Images Proportionally While Keeping The Aspect Ratio original ↗

22 Apr 2021

Edit Images Before Uploading Them To Your WordPress Media Library original ↗

23 Mar 2021

TypeScript Interface Merging And Extending Modules original ↗

22 Mar 2021

Convert A Blob To A File Using JavaScript original ↗

10 Mar 2021

How To Prompt The User To Download A File original ↗

12 Feb 2021

Convert A File To A Base64 String Or DataURL Using JavaScript original ↗

18 Jan 2021

Applying A Circular Crop Mask To An Image original ↗

17 Jan 2021

Drawing Decorative Lines With CSS original ↗

7 Jan 2021

Pintura Image Editor Lifetime Hobby License Giveaway original ↗

6 Jan 2021

2020

Applying Watermarks To Images With FilePond original ↗

16 Sept 2020

Cross-Browser Alignment Of The Canvas FillText Draw Call original ↗

11 Aug 2020

Blocking Navigation Gestures On iOS Safari original ↗

10 Jun 2020

Rename A File With JavaScript In The Browser original ↗

14 Apr 2020

Flipping Images Horizontally Or Vertically With CSS And JavaScript original ↗

29 Jan 2020

Animating CSS Width And Height Without The Squish Effect original ↗

27 Jan 2020

2019

Presenting Images In A Specific Aspect Ratio With CSS original ↗

4 Nov 2019

Cropping Images To A Specific Aspect Ratio With JavaScript original ↗

31 Oct 2019

The Trouble With Editing And Uploading Files In The Browser original ↗

10 Sept 2019

How To Upload Images To The WordPress Media Library original ↗

28 May 2019

CSS Smooth Scrolling original ↗

14 Feb 2019

Using Smart CSS To Time Your Newsletter Popup original ↗

29 Jan 2019

Applying Styles Based On The User Scroll Position With Smart CSS original ↗

25 Jan 2019

Async Form Posts With A Couple Lines Of Vanilla JavaScript original ↗

24 Jan 2019

2018

FilePond.js Launch Day Post-mortem original ↗

6 Mar 2018

2017

Use JavaScript Plugins With WordPress original ↗

21 Jun 2017

2016

Upload Multiple Files With Slim Image Cropper original ↗

22 Dec 2016

Create Thumbnails With PHP original ↗

3 Nov 2016