TJ VanToll tjvantoll

Validating Forms With HTML5

Validating forms has notoriously been a painful development experience. Implementing client side validation in a user friendly, developer friendly, and accessible way is hard. Before HTML5 there was no means of implementing form validation natively; therefore, developers have resorted to a variety of JavaScript based solutions.

To help ease the burden on developers, HTML5 introduced a concept known as constraint validation - a native means of implementing client side validation on web forms.

This talk will give a comprehensive overview of everything constraint validation offers, discuss the state of browser implementations, and give practical advice for how you can use it in your web forms today.

Making the Case for jQuery in a Browser Utopia

jQuery gained notoriety largely because of how seamless it made writing code that worked everywhere. But times have changed, and the browser landscape is radically different - and far more standards compliant - than it was in 2006. We can now select elements with querySelectorAll, animate elements with CSS, and even attach event handlers without forking our code.

This standards proliferation has led many to conclude that jQuery's job is done; we can map $ to querySelectorAll and get on with our development lives. They argue that reimplementing these native features adds unnecessary bloat and weight, especially in the context of limited mobile browsers and networks.

In this talk we'll enter a browser utopia - a mystical land where all features are implemented, all bugs are fixed, and unicorns roam free. Here, in this magical land, we'll discuss why jQuery is not only relevant, but a foundation for any web development stack.

jQuery UI Widgets vs. HTML5

HTML5 has brought native capabilities to the browser that were previously only available through JavaScript libraries such as jQuery UI. Examples include <input type="date"> vs. datepicker, <input type="range"> vs. slider, <input type="number"> vs. spinner, and <datalist> vs. autocomplete.

The overlapping functionality leaves web developers to choose between native options and JavaScript based widgets. In this talk we'll discuss the pros and cons of each approach to help you decide which makes sense for your application.

$ git clone https://github.com/tjvantoll/bond-grocery-list.git
$ cd bond-grocery-list/
$ git pull --all
$ git checkout lesson-3-complete
$ cd app
$ appbuilder simulate

File sizes of the web components' polyfills and Polymer

Version		size (minified)	size (minified & gzipped)
0.4.2	webcomponents.js	127KB	37KB
0.5.5	webcomponents.js	99KB	28KB
	webcomponents-lite.js	28KB	8.8KB
0.6.0	webcomponents.js	108KB	31KB
	webcomponents-lite.js	35KB	11KB

"color_scheme": "Packages/Seti.tmTheme",
"theme": "Seti.sublime-theme",

1

<Page loaded="loaded">
	<ListView items="{{ reddit }}">

Northwind Traders had a lot of success with their app for managing employee data, so they wanted to move on to build a little social app that their employees could use to chat, and that’s what you’re seeing here.

Northwind went with NativeScript because it lets them use a truly native UI. You can see that this app uses native iOS form elements, a native activity indicator, and native transitions, all of which feel great.

NativeScript also gives Northwind the ability to reuse skills they already know, so if you look through the code that makes which makes up this app, which I have open here, and which is available on GitHub, you’ll see standards-based JavaScript, a really easy to read markup language for defining UI elements, and CSS to use for styling.

Improving development experience

Now one of the things we’ve been working on is improving the NativeScript development experience. So let’s say I want to make some changes to this app, maybe I want to head back to the login and play with the look of this

	var pageModule = require("ui/page");
	var stackModule = require("ui/panels/stack-panel");
	var buttonModule = require("ui/button");
	var labelModule = require("ui/label");
	var geometryModule = require("utils/geometry");
	var enums = require("ui/enums");
	var colorModule = require("color");

	var frameModule = require("ui/frame");
	var applicationModule = require("application");


	export CLICOLOR=1
	export LSCOLORS=GxFxCxDxBxegedabagaced

	# Sexy Bash Prompt, inspired by "Extravagant Zsh Prompt"
	# Screenshot: http://img.gf3.ca/d54942f474256ec26a49893681c49b5a.png
	# A big thanks to \amethyst on Freenode

	if [[ $COLORTERM = gnome-* && $TERM = xterm ]] && infocmp gnome-256color >/dev/null 2>&1; then export TERM=gnome-256color
	elif infocmp xterm-256color >/dev/null 2>&1; then export TERM=xterm-256color

	<Page>
	<WebView url="http://google.com" />
	</Page>