Tips, Expertise, Articles and Advice from the Pro's for Your Website or Blog to Succeed
Today, I’ll show you how to detect whether an HTTP request was submitted via HTML form or with JavaScript to the server.
The examples in this post are based on Nuxt.js and include references to a few global functions (defineEventHandler, getRequestHeaders, sendRedirect). It’s not important that you know how they work. Just focus on the concept. I’ll explicitly highlight the important bits
There’s been a lot of hype lately around the CSS :has() pseudo-class. And rightly so! It’s basically the “parent selector” we’ve been asking for for years. Today I want to focus on ways we can use :has() to make HTML forms even better.
In this article I’ll be working with custom form controls that look like this:
CSS has a lot of different units that you can choose from. In many cases, there is one unit that’s clearly better than any others.
However, one question that seems to come up throughout my career is whether you should use pixels or rems on certain properties where it doesn’t seem to make a clear difference.
I make a lot of silly projects, and one thing I’ve wanted for a long time is a way to automate the deployment process using Git. So in this blog post, we are going to be tackling just that.
First things first, let’s settle on what the target is. What I want is a system with the following:
In this article, learn how to make HTML images better for users with responsive sizes and modern formats without making your life as a developer much harder.
<img> with just src: Easy to implement; good developer experience; no responsive images; no modern formats with fallback; likely uses more bandwidth; worst user experience<img> with srcset attribute: Moderate work; ok developer experience; supports responsive images for less bandwidth; no modern formats with fallbacks; leaves potential savings on the table; ok user experience<picture> with multiple <source> and srcset: Supports responsive images and modern formats with fallbacks; would rather squirt jalapeno juice in my eyes<img> with just src with Image Manager: Easy to implement and automatically sends images in the best size and format; win-win for developers and users!!!Let’s say we have just a basic website that is loading an image from my domain. The code might look like this:
The first time I opened up my DevTools and changed the contents of a website, I actually thought that I had hacked it. I thought, “Oh my gosh, what sort of crazy powers have I unlocked?”
Little did I know that it was just a local change that would go away when I reload the browser. Still, it is kind of cool to think we can do that.
If you’ve been working in web development for a while, you may run into scenarios where you make some changes or delete some files, and somehow lose work and a lot of time as a result.
Today I wanna show you some tips in VS Code to prevent that from happening.
I was recently introduced to an obscure performance bug with Apache’s GZip module and a clever solution using EdgeWorkers. So, I made a video and a small blog post to cover it.
One thing I love about my job is when I get to work with people that are way smarter than me at things that I never had the interest in or the opportunity of working on.
This year I had the honor of speaking at VueConf US 2022 and I thought I would share my experience. Some of this will cover my personal process, some will look at VueConf specifically, and some will be about conferences at large. I hope you enjoy it.
Let’s start at the beginning, as that’s a good place to start. As soon as they announced the Call for Papers(CFPs), I submitted my talks. I had submitted a few, and the one they selected was called, “Maintainable & Resilient Projects Through Internal UI Libraries“.
The other day I came across a cool HTML attribute I had never heard of before; capture. So I decided to make a video and blog post about it.
Here’s a video format if you prefer that:
I recently had to work on a project with some interesting requirements:
Most of those requirements would actually be very easy to fulfill with a 3rd party provider, but that last one: that’s the tricky one. Most service providers don’t give you root-level access, which means I’d have to do this all myself on a Virtual Private Server (VPS).
I’ve been trying to come up with a good explanation of what exactly “edge compute” is and for reasons I don’t need to justify to you, I’ve landed on the analogy: it’s like selling knitted hats for dogs.
Why knitted dog hats? Because they’re hilarious!
I came across an interesting use case for edge compute the other day: cookie management at the edge. It probably won’t be super relevant to a ton of people, but it’s an interesting use case I wanted to share nonetheless.
When most people think of cookies, they picture delicious baked morsels. But we’re not here to talk about those (unfortunately). In the context of web development, cookies are one of the options web developers have to store data.
The more I learn about edge computing, the more I look for compelling use cases that developers can relate to. Today, I have one: edge redirects.
Imagine you manage a website with a lot of content. I’m talking, like hundreds of thousands of articles. One day, you decide it’s time to change the domain name.
I’ve recently published the latest version of Vuetensils and wanted to take some time to share some of the features I’m most excited about.
Great news for anyone working with new or newly upgraded projects: Vuetensils now works with Vue 3. We’re leveraging vue-demi to do a little bit of magic to check whether the current version is Vue 2 or 3.
Every person I’ve worked with has agreed that making the web more accessible is a good thing. We don’t want to disservice any of our users.
However, accessibility is nuanced, the work is not always straightforward, and responsibility can be unclear. After all, building websites requires many steps, and accessibility is impacted by the decisions at each stage; design, development, content creation.
These features are not unique to TypeScript. They’re part of any strongly-typed language, and they translate to improvements in productivity and code quality such as:
That’s all well and good, but I’m not trying to sell you on using TypeScript. This article is intended for JavaScript developers that have heard of TypeScript and are interested in getting started with it or anyone that has already tried TypeScript and wants to give it another perspective.
While many guides to creating forms for the web are mainly focused on the frontend, security goes beyond that. We have to consider the current user, other users, and our own security. As such, we will look at the whole application architecture from frontend to backend and beyond.
Before we get too far, I will be using the term “SSL” to refer to a technology used to encrypt traffic on the internet. Technically, I mean Transport Layer Security (TLS), but “SSL” is commonly used and understood to mean the same thing. It’s what gives websites the little green lock in the URL bar and why they start with “https” instead of “http” (no “s”).