Exploring Data with Serverless and Vue: Automatically Update GitHub Files With Serverless Functions

I work on a large team with amazing people like Simona Cotin, John Papa, Jessie Frazelle, Burke Holland, and Paige Bailey. We all speak a lot, as it’s part of a developer advocate’s job, and we’re also frequently asked where we’ll be speaking. For the most part, we each manage our own sites where we list all of this speaking, but that’s not a very good experience for people trying to explore, so I made a demo that makes it …

Exploring Data with Serverless and Vue: Automatically Update GitHub Files With Serverless Functions is a post from CSS-Tricks

Link: https://css-tricks.com/exploring-data-with-serverless-and-vue-part-i/

20 Impressive jQuery Plugins to Replace the HTML Select Box

The traditional HTML select element is not very powerful out of the box, it lacks in more substantive features. Today, the web demands controls with multiple features for a user-friendly experience and the traditional HTML select box just can’t compete. Features like multi-select, grouping, hierarchical lists, and custom HTML markup make light work of projects […]

Link: http://feedproxy.google.com/~r/LearningJquery/~3/2BvNdvEKO-E/20-impressive-jquery-plugins-to-replace-the-html-select-box

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