Validatious 2.0 - Easy form validation with unobtrusive JavaScript
validate( "email".is("required").andIsAn("email") );
Related cards:
Using local fonts with Webpack / Webpacker
When we want to use our own (or bought) fonts in an application with Webpack(er), we have two options. We can
- put the fonts directly into your Webpack's assets folder or
- write an npm package with an own sass file that can be imported from the...
Matching elements on complex web pages with Webrat
XPath matchers can be combined with CSS-selector matchers. This is really useful if not, for example, the content of an element should be matched but the element itself like in the following example. Here a form is used to display data as default ...
Speed up your websites: Put JavaScripts at bottom
For websites that don't do JavaScript rendering on the client, it's best practice to put script tags at the bottom of the HTML. This way, the page can start to render before scripts have been loaded and run.
The caveat is that you also have to mo...
JavaScript without jQuery (presentation from 2019-01-21)
Summary
- We want to move away from jQuery in future projects
- Motivations are performance, bundle size and general trends for the web platform.
- The native DOM API is much nicer than it used to be, and we can polyfill the missing pieces
- Un...
How to not die with ActionView::MissingTemplate when clients request weird formats
When HTTP clients make an request they can define which response formats they can process. They do it by adding a header to the HTTP request like this:
Accept: application/json
This means the client will only understand JSON respon...
PhantomJS: Headless WebKit with JavaScript API
PhantomJS is a minimalistic headless WebKit.
It has fast and native support for various web standards:
DOM handling, CSS selector, JSON, Canvas, and SVG.
PhantomJS can be fully scripted using JavaScript. It is an optimal solution for headle...
Unobtrusive JavaScript helper to progressively enhance HTML
The attached compiler()
function below applies JavaScript behavior to matching HTML elements as they enter the DOM.
This works like an Unpoly compiler for apps that don't use Unpoly, [Cus...
Always show all form errors during development
You've been there: A form cannot be submitted, but you don't see a validation error because the field at fault has no corresponding input field on the form. Because this is usually a bug, you insert debug information listing all errors into the fo...
Unobtrusive jQuery to toggle visibility with selects and checkboxes
Use this if you want to show or hide part of a form if certain options are selected or boxes are checked.
The triggering input gets an data-selects-visibility
attribute with a selector for the elements to show or hide, like
<%= form.select...
Here’s what we’ve learned about doing UI for mobile web apps with WebKit
Lately, we’ve been exploring ways to offer web apps that perform like native apps on mobile devices. For this short sprint we targeted mobile WebKit browsers—especially the default browsers on iOS and Android—because of their widespread use and ex...