This is the last article in a series covering all the various aspects of creating forms for the web. Each article can be read independently, but I wrote them in the order that makes the most sense. If you have not read the others, I would encourage you to take a look.
This final article in the series is arguably the most important. It covers security. While the other articles were mainly focused on the frontend, security goes beyond that. We have to consider the current user, other users, and our own security. …
If you’ve done any work with Vue.js and SASS (or SCSS from here on), you may have run into this a very common issue. You have SCSS variables in one file that you want to make available to your Vue components.
The good news is that the Vue CLI makes it incredibly easy to support writing SCSS, and with Vue’s single file components you can simply add lang="scss" to the <style> block ( docs).
The bad news is in order to use your sweet Sassy variables (or mixins and functions), you have to manually @import them into each component's style…
As you build out forms for the web, getting the semantics, accessibility, and styling right is a lot of work. If you can get all those right, you’re doing quite well for yourself. However, there are still some thing we can do to make life better for the folks filling out our forms.
In this article, we’ll look at some of the do’s and don’ts about HTML form user experience (UX). And if you are looking for a refresher on the previous steps mentioned above, take a look at the other articles in this series.
I’ve written a couple of articles now on how to write HTML forms for the modern web. The previous articles focused on semantics and accessibility, which are the foundation for any good form. If you’re interested in the overview of the entire series, here’s what it looks like:
- Part 1: Semantics
- Part 2: Accessibility
- Part 3: Custom Styles
- Part 4: User Experience
- Part 5: Security
This will be part 3, and it’s probably the article I’m most excited for. We’re going to look at some common form design patterns, some of the gotchas, and how to approach them with CSS…
I’m very happy to announce the latest minor version to Vuetensils. And without going any further, I should point out that I think this is going to be the last stop before a stable version 1 🎉🎉🎉
This release includes some nice new UI components, some components for better accessibility, some features for better development, and some new community updates. Let’s take a look.
VDate
As you build out Vue.js applications and they begin to reach a certain size, you will likely run into the need for global state management. Conveniently, the core development team provides Vuex, the de facto state management library for Vue.js applications.
Getting started is pretty simple, and I’m going to assume you already are familiar with implementing Vuex. This post is not about getting started after all. If you need that, then I would recommend checking out the documentation.
Vuex makes managing a global data store much simpler, and for the following examples, let’s assume we have a store that…
Forms are arguably the most important parts of any web application. Without forms, we would not have sites like Google, Facebook, Amazon, Reddit, etc. However, the more I browse the web, the more I see poor implementations of forms.
In this series, we will examine the proper steps to creating forms for the web, how to think about the code we write, and considerations to make along the way. The series is broken up into the following parts:
- Part 1: Semantics
- Part 2: Accessibility
- Part 3: Custom Styles
- Part 4: User Experience
- Part 5: Security
Semantics
In the previous section, we…
Forms are arguably the most important parts of any web application. Without forms, we would not have sites like Google, Facebook, Amazon, Reddit, etc. However, the more I browse the web, the more I see poor implementations of forms.
In this series, we will examine the proper steps to creating forms for the web, how to think about the code we write, and considerations to make along the way. The series is broken up into the following parts:
- Part 1: Semantics
- Part 2: Accessibility
- Part 3: Custom Styles
- Part 4: User Experience
- Part 5: Security
Starting with proper semantics makes…
The latest release of Vuetensils is out, and there’s a lot of great things coming with it.
- New directive: v-intersect
- New component: VTable (WIP)
- Added transition duration prop to VImg
- Better transition end handling for VImg
- Added watchers for changes to VImg
srcandsrcset - VIntersect render function so no extra DOM node
- Renaming VModal to VDialog for better semantics
New Directive: v-intersect
In the previous version of the project, if you wanted to track whether an element had entered or exited the viewport, you could use the VIntersect component.
<template> <VIntersect @change="log('@change fired for block 1')"> <div class="intersection-content">Content block 1</div> </VIntersect> </template>…
There are already tons of articles out there predicting which emerging technologies will take over, and which current leaders will be de-throwned. This is not one of those articles. Rather, I am going to focus my predictions around my own use of technology, and how things are looking for me going into 2020.
CSS FTW!
Utility/Functional/Atomic CSS libraries have been growing in popularity, in particular, TailwindCSS. In 2020 I will be joining the ranks of library authors by completing Particles CSS. …
Austin Gil
Full Stack @Revealbio | Author of Vuetensils & Particles CSS | Panelist @ViewsOnVue | Board Member @sandiegojs
