"I love Bram.us – A rather geeky/technical weblog, est. 2001, by Bramus"

2022-05-06 21:56:03

Skip to contentBram.usA rather geeky/technical weblog, est. 2001, by BramusBlogBlogAll PostsOriginal ContentElsewhereSpeaking & TrainingAboutRSSRSSAll PostsOriginal Content OnlyElsewhere OnlyBackProgressive Enhancement and HTML Forms: use FormDataProgressive Enhancement and HTML Forms (Base Illustration by Shopify)In my article “Embrace the Platform” over at CSS-Tricks I mentioned this experience by Drew Devault:My web browser has been perfectly competent at submitting HTML forms for the past 28 years, but for some stupid reason some developer decided to reimplement all of the form semantics in JavaScript, and now I can’t pay my electricity bill without opening up the dev tools.While the article hints at solving the situation using Progressive Enhancement, it doesn’t cover the practical side of things. Let’s change that with this post.~Enhance!To apply Progressive Enhancement on HTML forms, there’s this little JavaScript gem named FormData that one can use:The FormData interface provides a way to easily construct a set of key/value pairs representing form fields and their values, which can then be easily sent using the fetch() or XMLHttpRequest.send() method. It uses the same format a form would use if the encoding type were set to "multipart/form-data".To use FormData, create a new instance of it and pass in a form element as its first argument. It will automagically do its thing.const form = document.querySelector('form');const data = new FormData(form); // ? Captures all the form’s key-value pairsAs FormData captures all the form’s key-value pairs, applying Progressive Enhancement on forms becomes pretty easy:Build a regular HTML form that submits its data to somewhereMake it visually interesting with CSSUsing JavaScript, hijack the form’s submit event and, instead, send its contents — captured through FormData — using fetch() to the defined endpoint.A first iteration of the JavaScript code for step 3 would look like this:document.querySelector("form").addEventListener("submit", async (event) => { event.preventDefault(); const form = event.currentTarget; const resource = form.action; const options = { method: form.method, body: new FormData(form) // ? Magic! }; const r = await fetch(resource, options); if (!r.ok) { // @TODO: Show an error message return; } // @TODO: handle the response by showing a message, redirecting, etc.});Congratulations, you’ve just progressively enhanced your form!~Dealing with JSON and GETWhile this basic approach already works, it doesn’t cover all scenarios, mainly due to the way how FormData encodes the data:The FormData interface […] uses the same format a form would use if the encoding type were set to "multipart/form-data".So if you want to send the data as JSON, you will need to convert the formData to it yourself. Thankfully, using Modern JavaScript, that’s only a one-liner nowadays. Furthermore the code also doesn’t properly handle GET requests. To cater for those one doesn’t need to send the formData as the request body, but alter the resource’s query string parameters instead.Expressed in code, we need these adjustments:const resource = new URL(form.action || window.location.href);// …if (options.method === "get") { resource.search = new URLSearchParams(formData);} else { if (form.enctype === "multipart/form-data") { options.body = formData; } else { options.body = JSON.stringify(Object.fromEntries(formData)); options.headers['Content-Type'] = 'application/json'; } }~DemoEmbedded below is a CodePen demo that submits the data to a dummy API and then handles its response: See the Pen Progressive Enhancement and : Use FormData by Bramus (@bramus) on CodePen.?~Next stepsThe core of this post evolves around using FormData + fetch() to capture and send the data. As for next steps, the experience can still further be improved by – for example – preventing double form submissions and showing a loading spinner.Example of a loading indicator while the form is submitting~? Like what you see? Want to stay in the loop? Here's how: Follow @bramus on Twitter Follow @bramusblog on Twitter Follow bram.us using RSS Posted byBramus!April 22, 2022May 3, 2022Posted inOriginal ContentTags: forms, progressive enhancement1 Comment on Progressive Enhancement and HTML Forms: use FormDataThe C in CSS (2022.04.20 @ Full Stack Ghent)Yesterday I attended the April 2022 “Full Stack Ghent” Meetup, at the offices of In The Pocket. The evening consisted of 8 lightning talks. Being part of the speaker line-up, I kicked off the meetup with a talk titled “The C in CSS”.CSS is short for “Cascading Style Sheets”. But what exactly is this cascade, and how does it work? Let this talk enlighten you.The slides are up on slidr.io, and also embedded below:ℹ️ The talk is a (heavily) trimmed down version of a full talk in the CSS Cascade, which I’ll be giving at several upcoming conferences (Web Directions Hover, CSS Day, …)~I was very happy to attend this meetup — my first (public) in-person one after a very long time — especially as it had been canceled two times already (in as many years) due to COVID. I don’t think I’m alone in this, given that there was a turnout of ±130 (!) people.~Thanks to the organizers for having me, and thanks to the other speakers as well for giving their talks. It was a varied mix of frontend, backend, ops, and even RegExes. I hope you all had fun attending my talk — I know I had making it (and whilst bringing it forward) — and perhaps you even learned something from it along the way ??‍♂️ If you are a conference or meetup organiser, don't hesitate to contact me to come speak at your event.Posted byBramus!April 21, 2022April 21, 2022Posted inOriginal ContentTags: cascade, css, public speaking, slidesLeave a comment on The C in CSS (2022.04.20 @ Full Stack Ghent)The Future of CSS: CSS TogglesLate last week, I was very delighted to see that Chromium will start prototyping with CSS Toggles, a proposal currently only available as an Unofficial Draft, authored by Tab Atkins and Miriam Suzanne (who else?!).CSS toggles are a mechanism for associating toggleable state with a DOM element. This state can be defined and connected to activations through CSS properties, and can be queried in CSS selectors. This provides a declarative mechanism for specifying state that describes behaviors like the existing HTML behaviors for checkboxes or radio buttons.The goal of this prototype phase is to experiment with the idea, verify if things would work out or not, polish the syntax, etc. — so yes, all this is still conceptual, highly experimental, and subject to change at the time of writing. Even though still a very early WIP, I already like where this is headed.~The basic use-case would be something that resembles a light switch, which can go from 0 (inactive) to 1 (active)html { toggle-root: lightswitch; /* Create a toggle named lightswitch. It will cycle between 0 (inactive, default) and 1 (active) */}button { toggle-trigger: lightswitch; /* When clicking the button, toggle the lightswitch */}html:toggle(lightswitch) { /* Styles to apply when the lightswitch toggle is active */}Here’s a demo of this behavior, which uses a JS-polyfill: See the Pen CSS Toggles Example by Bramus (@bramus) on CodePen.? Polyfill?A polyfill is a piece of code (or plugin) that provides the technology that you, the developer, expect the browser to provide natively — What is a Polyfill?~But there’s a lot more to the spec than just this basic use case:A Toggle Root can host more than one toggleA toggle can have more than 1 active state, so it’s not only 0 and 1The states don’t need to be numbers, but can also be a set of wordsThe initial toggle state is 0 by default, but you can override thatAn element can be both the toggle-root and the toggle-trigger. In that case, use the toggle propertyThe scope of a toggle value can be narrowed down to descendant elements only (instead of being visible to siblings and their descendants)toggle-visibility allows you to show/hide an element based on a toggle value. Think of details/summary and scenarios where you would rely on the checkbox checkbox hack. Benefit to using toggle-visibility is that the contents of the element are always available to the UA for in-page-find and the like (cfr. content-visibility)Toggles can be grouped using toggle-group. Handy for tab interfaces, where only 1 tab can be active at the same time.Sticky toggles can not become inactive, there will always be one item activeState machines with transitions are being talked aboutIt’s pretty powerful stuff, which will take some time to wrap your head around. For me, it clicked once I saw Miriam’s demo site in action, which uses a polyfill to make things work.Very curious to see where this headed …~CSS Toggles Explainer →CSS Toggles Demo Page (with Polyfill) →CSS Toggles (Unofficial Draft) →Draft Spec Issues (GitHub) →CSS Toggles Polyfill (GitHub) →CSS WG Issue #6991: CSS Toggles →~? Like what you see? Want to stay in the loop? Here's how: Follow @bramus on Twitter Follow @bramusblog on Twitter Follow bram.us using RSS Posted byBramus!April 20, 2022April 22, 2022Posted inElsewhereTags: css, link, toggles3 Comments on The Future of CSS: CSS TogglesDaft Punk – Around The World (In The Classroom with Michel Gondry)This year, Daft Punk’s Homework turned 25. I was 13 when it was released, and it’s one of the music albums that influenced my musical taste a lot. In this video, Michel Gondry explains how the iconic video clip for “Around the World” is structured.For reference, here’s the (remastered) music video clip.Timeless.Via BradPosted byBramus!April 19, 2022April 20, 2022Posted inElsewhereTags: daft punk, music, videoLeave a comment on Daft Punk – Around The World (In The Classroom with Michel Gondry)I’m joining the Chrome Developer Relations team at GoogleGood news everyone!Good news everyone! I’m joining Google! From early May on, I’ll be working with Una, Adam, Jecelyn, and Jhey as a “Developer Relations Engineer, Chrome and Developer Tools”.Together, we’ll spread the word on CSS, Layout, Interactions, Animations, Typography, Chrome DevTools, etc.~Sharing my passion for the web (CSS specifically) is something that gives me joy. Writing technical articles, speaking at meetups and conferences, tweeting and retweeting useful demos/links/snippets, running workshops, … — all are things that I love to do.Up until now this always has been an “after hours” type of thing for me, taking up a lot of my spare time. So it should be no surprise that I didn’t hesitate for a moment when I caught wind of this position. Being able to do what I love — advocating for the web — as my main job is a dream come true.Oh, you betcha I’m adjusting accordingly!~My background as a College Lecturer will definitely come in handy here. Thanks to this past work experience, along with my current experience as a public speaker at meetups and conferences, I’m already familiar with creating courses and giving technical talks to audiences both big and small. As a Chrome DevRel Engineer, I can continue down this path and further polish these skills along the way.Another continuation of things I’m already doing — and which soon will become part of my job — is writing technical articles, creating demos, experimenting with new CSS features, participating in CSS WG discussions, and filing bugs at the various Issue Trackers — only to name a few of my future tasks.One of the new tasks that I’m really looking forward to is attending and participating in the weekly CSS WG Telecon. I don’t want to get ahead of things here, but you can bet on it that I’ll put work into the potential changes coming to Scroll-Linked Animations.~I intend to keep on publishing stuff here on bram.us, but can imagine that some posts — mainly about new CSS features — may end up on web.dev (or the like) instead. After all, I’d be writing those posts “on the job” then, instead of in my spare time now.One side-effect of joining Google is that I will be shutting down my freelance business. I didn’t really ever plan on doing so — things are going great after all — but joining Una’s team is an opportunity I can’t turn down. As a result, I’m currently wrapping things up with my current clients. I hereby would like to thank them (along with my former clients) for the trust they’ve put in me over the past 15 years.And oh, in case you’re wondering: me and a family will be staying in Belgium, as it’s a remote position. No changes there.~I’m very excited to join, and you can expect to hear more from me soon. First up: go through the (remote) onboarding process and whatnot ?~? Like what you see? Want to stay in the loop? Here's how: Follow @bramus on Twitter Follow @bramusblog on Twitter Follow bram.us using RSS Posted byBramus!April 12, 2022April 12, 2022Posted inOriginal ContentTags: bramus, google, work2 Comments on I’m joining the Chrome Developer Relations team at Google30 Days of PWAMicrosoft recently did a “30 Days of PWA” blog series. The posts got grouped per week, each week with a shared topic:Core Concepts: Learn the fundamental concepts and components of a PWA.Advanced Capabilities: Explore web capabilities APIs, status, and examples of use.Developer Tools: Learn about key authoring, debugging, auditing, testing and packaging tools for PWA.Platforms & Practices: Learn good practices and platform-specific support for PWA.30 Days of PWA →Posted byBramus!April 4, 2022Posted inElsewhereTags: link, progressive web apps, pwaLeave a comment on 30 Days of PWASay Hello to , a Fully Style-able ElementOver at CSS-Tricks, Patrick Brosset dug into , the customizable we always wanted.The new experimental control offers a lot of flexibility when it comes to styling and even extending a traditional . And it does this in all the right ways, because it’s built into the browser where accessibility and viewport-aware positioning are handled for you.To test it out, you’ll need Chromium with the “Experimental Web Platform features” flag enabled.Say Hello to , a Fully Style-able Element → Demos →Posted byBramus!April 4, 2022Posted inElsewhereTags: css, forms, link, select, uiLeave a comment on Say Hello to , a Fully Style-able ElementWhat’s new in Node.js core?Simon Plenderleith gives a roundup of the new stuff that landed in Node since September 2021.Deep clone values (using structuredClone)Auto cancel async operationsFetch APIImport JSON modulesAbort API additionsreadline/promises APICorepackI’m especially excited about native fetch() support making it into Node 17. Note that you must enabled it using the --experimental-fetch flag, though.Web Streams support — available with experimental support in 17.8 — also looks pretty sweet.What’s new in Node.js core? (March 2022 Edition) →Posted byBramus!April 4, 2022Posted inElsewhereTags: javascript, link, nodeLeave a comment on What’s new in Node.js core?Valet 3.0: Multiple/Parallel PHP Version SupportFor my local PHP Development needs I use Laravel Valet. It’s easy to set up, provides HTTPS, and just works. The only downside of using it, is the fact that the selected PHP version is system-wide: switching PHP versions — using valet use [email protected] for example — affects all sites. With the 3.0 release of Valet this is no longer the case, as it offers per-site PHP version isolation.To isolate a site, use new isolate command:cd path/to/app # Isolate the current projectvalet isolate [email protected]# Isolate a site by namevalet isolate [email protected] --site=laravel9xIf a certain PHP version is missing, Valet will install it automagically (using Homebrew)⬆️ If you’re already running Valet, you can’t update to 3.x by invoking good ’ole composer global update. Instead, you must re-require Valet again, with the required version set to ^3.0composer global require "laravel/valet:^3.0"~Note that when isolating sites using valet isolate, it only affects the PHP version that’s used by Nginx. On the CLI your php will always use the one you’re globally using. For dependencies, you could lock down your PHP version via composer.json, but that won’t prevent you from possibly incompatible PHP syntax.To cater for both issue, version 3.1 (which got released just few days after 3.0) comes with three new commands that allow you to run PHP and Composer commands using the isolated site’s PHP version on the CLI.valet php ... will proxy PHP Commands with isolated PHP versionvalet composer ... will proxy Composer Commands with isolated PHP versionvalet which-php outputs the PHP executable path for a site. For isolated site it would output the isolated PHP executable path. But non-isolated site will just output the linked default PHP path. The other two commands are dependent on this one to find the PHP executable.To not have to type valet php every time, this tip by Jacob Delcroix is pure gold: make php an alias for valet phpMy aliases to work seamlessly with new Valet isolation feature ? #valet #laravelvalet #phpmon. Thanks @stauffermatt @NasirNobin and @nicoverbruggen for your amazing work. ??? Now I don't have to worry about PHP versions anymore. My main version is always up-to-date! pic.twitter.com/XPOdyhGLHK— Jacob Delcroix (@JacobDelcroix) April 3, 2022 ~If you’re rocking the aforementioned PHP Monitor, you’ll be glad to read that version 5.2 has isolate support built-in.To update PHPMon, do so using Homebrew:brew upgrade phpmon~? Like what you see? Want to stay in the loop? Here's how: Follow @bramus on Twitter Follow @bramusblog on Twitter Follow bram.us using RSS Posted byBramus!April 4, 2022Posted inOriginal ContentTags: laravel, php, valetLeave a comment on Valet 3.0: Multiple/Parallel PHP Version SupportWhat’s new in ECMAScript 2022Pawel Grzybek gives us a good overview of the ES2022 featuresThe ECMAScript 2022 Language Specification candidate is now available. Even though the final version will be approved in June, the list of new features coming to the language this year is already defined. Let’s look at what’s coming to ECMAScript specification in 2022.What’s new in ECMAScript 2022 →Related: The book JavaScript for Impatient Programmers by Axel Rauschmayer also includes a dedicated section on the new ES2022 featuresPosted byBramus!April 4, 2022Posted inElsewhereTags: es2022, javascript, linkLeave a comment on What’s new in ECMAScript 2022Posts navigation123…693Older posts About Bram.usBram.us is the technical/geeky weblog of Bramus Van Damme, a Freelance Web Developer from Belgium.Main topics are web related technologies (CSS, JS, PHP, …), along with other geeky things (robots, space, …) and personal interests (cartography, music, movies, …).More …Stay up-to-dateTo follow bram.us you can:Subscribe to bram.us via RSSFollow @bramusblog on TwitterGive bram.us a like on FacebookNext to his ramblings here, you may also follow @bramus himself on Twitter.ArchivesArchivesSelect Month April 2022 March 2022 February 2022 January 2022 December 2021 November 2021 October 2021 September 2021 August 2021 July 2021 June 2021 May 2021 April 2021 March 2021 February 2021 January 2021 December 2020 November 2020 September 2020 August 2020 July 2020 June 2020 May 2020 April 2020 March 2020 February 2020 January 2020 December 2019 November 2019 October 2019 September 2019 August 2019 July 2019 June 2019 May 2019 April 2019 March 2019 February 2019 January 2019 December 2018 November 2018 October 2018 August 2018 July 2018 June 2018 May 2018 April 2018 March 2018 February 2018 January 2018 December 2017 November 2017 October 2017 September 2017 August 2017 July 2017 June 2017 May 2017 April 2017 March 2017 February 2017 January 2017 December 2016 November 2016 October 2016 September 2016 August 2016 July 2016 June 2016 May 2016 April 2016 March 2016 February 2016 January 2016 December 2015 November 2015 October 2015 September 2015 August 2015 July 2015 June 2015 May 2015 April 2015 March 2015 February 2015 January 2015 December 2014 November 2014 October 2014 September 2014 August 2014 July 2014 June 2014 May 2014 April 2014 March 2014 February 2014 January 2014 December 2013 November 2013 October 2013 September 2013 August 2013 July 2013 June 2013 May 2013 April 2013 March 2013 February 2013 January 2013 December 2012 November 2012 October 2012 September 2012 August 2012 July 2012 June 2012 May 2012 April 2012 March 2012 February 2012 January 2012 December 2011 November 2011 October 2011 September 2011 August 2011 July 2011 June 2011 May 2011 April 2011 March 2011 January 2011 December 2010 November 2010 October 2010 September 2010 August 2010 July 2010 June 2010 May 2010 April 2010 March 2010 February 2010 January 2010 December 2009 November 2009 October 2009 September 2009 August 2009 July 2009 June 2009 May 2009 April 2009 March 2009 February 2009 January 2009 December 2008 November 2008 October 2008 September 2008 August 2008 July 2008 June 2008 May 2008 April 2008 March 2008 February 2008 January 2008 December 2007 November 2007 October 2007 September 2007 August 2007 July 2007 June 2007 May 2007 April 2007 March 2007 February 2007 January 2007 December 2006 November 2006 October 2006 September 2006 August 2006 July 2006 June 2006 May 2006 April 2006 March 2006 December 2005 November 2005 August 2005 July 2005 June 2005 May 2005 April 2005 March 2005 February 2005 November 2004 October 2004 August 2004 July 2004 June 2004 May 2004 April 2004 March 2004 February 2004 October 2003 SearchBram.us,Proudly powered by WordPress.