Simple Server Side Rendering, Routing, and Page Transitions with Nuxt.js

A bit of a wordy title, huh? What is server side rendering? What does it have to do with routing and page transitions? What the heck is Nuxt.js? Funnily enough, even though it sounds complex, working with Nuxt.js and exploring the benefits of isn’t too difficult. Let’s get started!

Server side rendering
You might have heard people talking about server side rendering as of late. We looked at one method to do that with React recently. One particularly compelling aspect …

Simple Server Side Rendering, Routing, and Page Transitions with Nuxt.js is a post from CSS-Tricks

Link: https://css-tricks.com/simple-server-side-rendering-routing-page-transitions-nuxt-js/

Instant Form Validation Using JavaScript

HTML5 introduces a couple of new attributes for implementing browser-based form validation. The pattern attribute is a regular-expression that defines the range of valid inputs for textarea elements and most types of input. The required attribute specifies whether a field is required. For legacy browsers that don’t implement these attributes, we can use their values as the basis of a polyfill. We can also use them to provide a more interesting enhancement – instant form validation.
We have to be very careful here not to get carried away, creating overly aggressive validation that breaks the natural browsing behavior and gets in people’s way. For example, I’ve seen forms where it’s impossible to Tab away from an invalid field – JavaScript is used (or rather abused) to force the focus to stay inside the field until it’s valid. This is very poor usability, and directly contravenes accessibility guidelines.
What we’re going to do in this article is far less intrusive. It’s not even full client-side validation – it’s just a subtle usability enhancement, implemented in an accessible way, which (as I discovered while testing the script) is almost identical to something that Firefox now does natively!
The Basic Concept
In recent versions of Firefox, if a required field is empty or its value doesn’t match the pattern then the field will show a red outline, as illustrated by the following figure.

This doesn’t happen straight away of course. If it did, then every required field would have that outline by default. Instead, these outlines are only shown after you’ve interacted with the field, which is basically (though not precisely) analogous to the onchange event.
So that’s what we’re going to do, using onchange as the triggering event. As an alternative, we could use the oninput event, which fires as soon as any value is typed or pasted into the field. But this is really too instant, as it could easily be triggered on and off many types in rapid succession while typing, creating a flashing effect which would be annoying or impossibly distracting for some users. And, in any case, oninput doesn’t fire from programmatic input, which onchange does, and we might need that to handle things like auto-complete from third-party add-ons.
Defining the HTML and CSS
So let’s have a look at our implementation, starting with the HTML it’s based on:

Link: https://www.sitepoint.com/instant-validation/

Introduction to Webpack: Entry, Output, Loaders, and Plugins

Front-end development has shifted to a modular approach, improving the encapsulation and structure of codebases. Tooling became a critical part of any project, and right now there are a lot of possible choices.
Webpack has gained popularity in the last years because of its power and scalability, but some developers found its configuration process confusing and hard to adopt.

We’ll go step by step from an empty configuration file to a simple but complete setup to bundle a project. This …

Introduction to Webpack: Entry, Output, Loaders, and Plugins is a post from CSS-Tricks

Link: https://css-tricks.com/introduction-webpack-entry-output-loaders-plugins/

Masking vs. Clipping: When to Use Each

I was recently doing some client work where I used both s and <mask>s in SVG to hide and show content for animation. When I started this project, I thought I knew all of the reasons to use one over the other. But, as tends to happen, working closely with something reveals idiosyncrasies. In this post, we’ll go over some of these details so that you can get productive as soon as possible.

What is clipping and masking…

Masking vs. Clipping: When to Use Each is a post from CSS-Tricks

Link: https://css-tricks.com/masking-vs-clipping-use/

Using Filters in Vue.js

Filters are an interesting way to deal with data rendering in Vue but are only useful in a small amount of cases. The first thing to understand about filters is that they aren’t replacements for methods, computed values, or watchers, because filters don’t transform the data, just the output that the user sees. As of Vue 2.0, there are no built-in filters, we need to construct them ourselves.

We can use filters locally or globally, but it’s worth mentioning …

Using Filters in Vue.js is a post from CSS-Tricks

Link: https://css-tricks.com/using-filters-vue-js/

Drag and Drop HTML Table Rows Using jQuery

HTML tables are the preferred UI option for displaying data. Sorting, paging and searching/filtering are must-have functionalities for any HTML table with extensive data. These functions make HTML tables more user-friendly and efficient for the end user. In some cases one may require drag and drop functionalities for HTML table rows. Unfortunately, implementing drag and […]

Link: http://feedproxy.google.com/~r/LearningJquery/~3/WIoUUIiPDpY/drag-and-drop-html-table-rows-using-jquery

How to Verify User Age with jQuery Code

If you’ve ever visited a site that’s selling a product that has certain age restrictions (for example, a site selling or representing an alcohol brand might prompt you to verify that you’re over 21 before you’re allowed access to the site), you might have come into contact with an age verification form. It turns out, […]

Link: http://feedproxy.google.com/~r/LearningJquery/~3/SD9v64OP7Mo/how-to-verify-user-age-with-jquery-code

The Power of Custom Directives in Vue

When you’re initially learning a JavaScript framework, it feels a little like being a kid in a candy store. You take in everything available to you, and right off the bat, there are things that will make your life as a developer easier. Inevitably though, we all reach a point working with a framework where we have a use-case that the framework doesn’t cover very well.
The beautiful thing about Vue is that despite the fact that it’s incredibly feature-rich. …

The Power of Custom Directives in Vue is a post from CSS-Tricks

Link: https://css-tricks.com/power-custom-directives-vue/