• What?
  • Who?
  • Contact Jonathan Jeter
  • Privacy Policy

Jonathan Jeter

Director of Application Development

  • Jonathan Jeter on Google+
  • Jonathan Jeter on Facebook
  • Follow Jonathan Jeter on Twitter
  • Jonathan Jeter on LinkedIn
  • Jonathan Jeter's rss feed
Home Archives for web app

HTML5 Texas JavaScript Workshop – Client-Side Storage

February 3, 2013 By Jonathan Jeter Leave a Comment

HTML5TX JavaScript Workshop - Pamela FoxWeb technologies have taken a long time to progress.

A lot of the standards we see today are because browsers decided to implement new features.

HTML5 is now just supposed to be HTML. It is supposed to be a living standard.

Pamela needs an HTML app that helps choose her hair color.

Client-Side Storage

  • cookies
  • Flash Storage
  • Internet Explorer UserData
  • Google Gears
  • Dojo Storage
  • window.name

Cookies are used for all types of tracking, but they have issues with security, user trust (can be disabled), performance and size.

In the HTML spec, they considered the issues and came up with the following solutions.

Read the rest of HTML5 Texas JavaScript Workshop – Client-Side Storage

  • Web Storage APIs
  • IndexedDB
  • File System APIs
  • Application Cache
  • …cookies

localStorage

  • Key / value pairs – hash table
  • Persistent on page reloads
  • Avoids HTTP overhead of cookies

Like this:

Like Loading...

Filed Under: JavaScript, Web Development Tagged With: APIs Application Cache, app work offline, Application programming interface, application state, application state Remember, block the UI Make sure to test for, blog post, check Serialization Fallbacks, client-side storage, Client-side Storage Comparison, Client-Side Storage cookies, CPU time Recommendations, dysfunctional site, excessive gets/sets, excessive keys, File APIs, File Systems API, FileReader http://dev.w3.org/2006/webapi/FileAPI/ FileList, FileSaver http://dev.w3.org/2009/dap/file-system/file-writer.html FileWriter, FileSystem http://dev.w3.org/2009/dap/file-system/pub/FileSystem/ Probably, Flash Storage Internet, Flash Storage Internet Explorer UserData, hash table Persistent, HTML, HTML5 Texas, Indexed Database API, IndexedDB IndexedDB, IndexedDB Libraries IndexedDB, indexedDB Optional plugins, IndexedDB window.indexedDB Object, input Improve performance, Internet Explorer UserData, JavaScript, JavaScript Workshop, jQuery Throttle/Debounce Plugin, JS Performance Analysis, local memory, localStorage access, localStorage libraries, LocalStorage Tips, long key vs., long time, Mobile browser, mobile browsers, modern browser quirks, multiple short keys, new feature, Nicholas Zakas, Quota Management API, Remember user data, Same thing, Script Caching HTML5, slow points, Storage APIs IndexedDB, Storage library, Storage window.name Cookies, Technology Internet, Texas JavaScript Workshop, Tight JS Loops, web app, Web apps, Web Storage, Web Storage APIs, Web technologies, WebStore support test

10 Things You Didn’t Know a Browser Could Do

February 2, 2013 By Jonathan Jeter 1 Comment

by Estelle Weyl at HTML5 Texas Conference in Austin, TX (Deck)

It may feel like the HTML5, CSS3 and ECMAScript specifications are moving along at a snails pace, but browser capabilities are moving quickly, and it is difficult to keep up with all the new feature support. In this session we’ll cover some brand spanking new and older but unknown features that make debugging, designing and developing more fun.

10 Things You Didn't Know a Browser Could Do1. $(‘selector’) without jQuery

  • Supported since IE8
  • You can access DOM elements with standard css selectors

2. Everything is Editable

  • Everything can be updated
  • Can even paste!
  • Updates the DOM
  • Turn anything into a form element
  • Supported since IE5

3. Can store lots of data

  • LocalStorage
  • SessionStorage
  • WebSQL (deprecated but available in webkit)
  • IndexedDB (new standard, but not supported in any browser)

Cookie Limitations

Read the rest of 10 Things You Didn’t Know a Browser Could Do

Like this:

Like Loading...

Filed Under: Browsers, Web Development Tagged With: Animate Sprites, Background Images, Better Front-End Engineer, better Local Storage, bezier curves, box model, browser capabilities, browser Cookie Limitations, browser support, Can store, Cascading Style Sheets, Chrome Developer Tools, conference notes, CSS, CSS selectors, CSS Wishlist Talks, cubic-bezier.com Check, data LocalStorage SessionStorage, Data Storage localStorage, Document Object Model, DOM elements, DOM nodes, DOM Turn, ECMAScript specifications, Estelle Weyl, FF/IE IndexedDB, FF15 Android, Firefox, form element Supported, Front-End Engineer, Graphics 2D image, house Charge, HTML5 Texas Conference, HTTP request, Indexed Database API, IndexedDB new standard, JQuery, jQuery Supported, localStorage Save text, Long term, Memory Related articles, mobile Chrome love, mobile web, mobile web apps, new feature, new feature support, Opera, persistent storage, plain text, real API Local, Safari, session long Simmple, Session Storage, snails pace, standard css selectors, Style css animation, Technology Internet, Texas conference, unknown features, Vector graphics, web app, Web apps, Web Storage, Will Never

You Got your MVC into my Components: Adding Bindings to Enyo

February 2, 2013 By Jonathan Jeter Leave a Comment

by Ben Combee at the HTML5 Texas Conference in Austin, TX

Enyo (http://enyojs.com) started as an web application framework, focusing on the problem of effectively building reusable UI components.  However, many app developers view problems through a Model-View-Controller (MVC) point-of-view where the UI is seen as a templating problem.  This talk looks at how the Enyo framework evolved in late 2012 to take on aspects of MVC, integrating support for Backbone models and data binding into our component & message passing architecture.  In doing so, it reveals what these two worlds can learn from each other, and how they both play into future work on the “web platform”.

Adding bindings to EnyoEnyo help build html apps with the feel of native apps.

A new way of thinking

How do you keep application state?

Templates are not enough. Interactive controls are hard to put into templates.

Read the rest of You Got your MVC into my Components: Adding Bindings to Enyo

Like this:

Like Loading...

Filed Under: JavaScript, MVC, Web Development Tagged With: app developer, app developers, application development, application state, application. markup, articles Enyo, Backbone models, Ben Combee, broilerplate code, Complexity Alert Components, complexity Data, conference notes, cool features, data binding, Enyo framework, Enyo help, event handling, FLA TIP EMV, fully encapsulated object, future work, html apps, HTML5 Texas, HTML5 Texas Conference, huge advantage, Interactive controls, Javascript MVC Frameworks, mixin pattern, mode view presenter, model delegate, model view, model view modelview, Model-View-Controller MVC, MVC framework, MVC Frameworks, MVC Other Patterns, native app, native apps, new way, observer pattern, Platform App Development, reusable UI components, Running Webcast, Technology Internet, templating problem, Texas conference, TX Enyo, UI components, UI Plugins, User interface, user state, versatility Integration, web app, Web application, web application framework, web platform

Managing a Large Front-End Project with Automated Build Tools

February 2, 2013 By Jonathan Jeter Leave a Comment

by kperch at HTML5 Texas Conference in Austin, TX

How do you manage a huge web application’s front-end when you have a diverse team of programmers, and javascript is not a strong suit for all of them? How do you handle both new and old code from multiple developers, and make sure only quality code makes it into your repos? Automated tools such as Yeoman and Grunt are not just for packaging your web project in a performant and clean package. They also allow you to enforce code quality and consistency through automated quality checking, testing, and beautification. This talk will go over the case study of a large web application in need of a refactor and test suite, and how tools such as Yeoman and Grunt allow you to implement a plan to bring projects like these back from the brink, without losing your sanity in the process.

Read the rest of Managing a Large Front-End Project with Automated Build Tools

Like this:

Like Loading...

Filed Under: JavaScript, MVC, Web Development Tagged With: accountability Case Study, Automate Builds, Automate common build, Automated Build Tools, automated testing, Automated tools, Browser Refresh, browserly Related articles, Build automation, case study, cleaner JS Module, code quality, Code refactoring, conference notes, diverse team, easy commit hooks, Enforce Automation, Enforce Educate team, framework grunt, growl pulls, grunt commands works, Grunt.js Precognitive Build, HTML5 Texas, HTML5 Texas Conference, huge web application, javascript code, js files, JSHint Lint, Large Front-End Project, large web application, minifies. styles.stylus, modular js, multiple developers, new automation tools, old code, Operations Automating tasks, process. gruntjs.com, project multiple js, project standards, quality assurance, quality checking, quality code, quality control, Software quality, strong suit, team meeting, team member, team members, test suite, Texas conference, time Automation, tool Automation, Unit test runner, Unit testing, web app, Web application, web project

Backbone: 3 Ways

February 2, 2013 By Jonathan Jeter Leave a Comment

by Pamela Fox at HTML5 Texas Conference, Austin, Texas (Deck)

Backbone is one of the most popular MVC frameworks for JavaScript these days, and one of the reasons for its popularity is that its minimal and lightweight. That makes it easy to use in different ways and adapt to different projects – but can also make it hard to learn. In this talk, I’ll start with Backbone basics, and then dive into three different ways that we use it to power the frontends of Coursera.org.

Backbone 3 Ways HTML5TX

Why use an MVC framework? Website includes: 242 js files, 28848 lines of code & 5-person frontend team. Needed more structure to their code.
Why Backbone?

  • Structure
  • Modularity
  • Persistence Layer
  • Common Services
  • Best Practices

Backbone JS MVC Diagram

Backbone is a lightweight model view controller framework. Models use set & get so the framework know what’s going on. Collections group objects together. Views with basic data binding. Router is available, but you don’t have to use it.

Read the rest of Backbone: 3 Ways

Like this:

Like Loading...

Filed Under: JavaScript, MVC, Web Development Tagged With: 5-person frontend team, Admin pieces, Application programming interface, backbone app, backbone backend, Backbone basics, Backbone Beginner HTML5, Best Practices, Best Practices Backbone, change log, collaborative interface, Collections group, Common Services Best Practices Backbone, conference notes, controller framework, CSS3 Resources, current status, custom router custom, data binding, data binding. Router, Deck Backbone, different applications, different projects, different technologies, different ways, entire site, form building interfaces, Front and back ends, front-end MVC, frontend application, HTML5 Texas, JavaScript micro-frameworks, JavaScript micro-frameworks Backbone, js files, layer Entire page, lightweight model view, lightweight model view controller, manager custom API layer, Modularity Persistence Layer, MVC framework, MVC Frameworks, Node.js App, normal page loads, options open Figure, page load, Pamela Fox, Persistence Layer, popular MVC frameworks, real deletes, relational models, Server The rise, Share models, Single-page web apps, static html pages, Technology Internet, Texas conference, Uniform Resource Locator, web app, Web apps

The Right Tool for the Job: Native or Mobile Web? at #SXSW2012

March 13, 2012 By Jonathan Jeter Leave a Comment

Tuesday, March 13, 2012 at the South by Southwest Interactive Conference in Austin, Texas #sxsw #righttool
Panel discussion by Buzz Andersen (Dir of Mobile – Tumblr), Jacob Bijani (Prod Engineer – Tumblr), Majd Taby (Software Engineer – Facebook), Matthew Delaney (WebKit Engineer), and Tom Dale (Sr Software Engineer – Ember.js)

Apps are much easier to monetize than websites, because you can charge up front.

for Tumblr T-shirt Contest / 01 (Photo credit: albyantoniazzi)

The browser rendering engine does a lot of the heavy work that native developers have to contend with. The web browser is a highly evolved medium for content delivery and rich layout.

Read the rest of The Right Tool for the Job: Native or Mobile Web? at #SXSW2012

Like this:

Like Loading...

Filed Under: Mobile Tagged With: app store, app store experience, Apple appstore app, bad way, big thing, Buzz Andersen, conference notes, content delivery, Facebook guy, Financial Times, Good examples, Great HTML5 Web, heavy work, highly evolved, hybrid approach, Jacob Bijani, Majd Taby, Matthew Delaney, Mobile browser, mobile strategy, mobile web, mobile web apps, native developers, native functionality, native vs, native/web hybrids, NY Times, Panel discussion, popular option, Prod Engineer, real convergence, rich layout, Right Tool, righttool, smart guys, Software Engineer, South by Southwest, South by Southwest Interactive, South by Southwest Interactive Conference, Southwest Interactive Conference, Sr Software Engineer, standards process, SXSW, SXSW Notes, SXSW2012, SXSWI, technical things, Technology Internet, The next big thing, the South by Southwest, Tom Dale, Tumblr engineer, Tumblr engineer guy, web access, web app, Web application, web application stuff, Web apps, Web browser, web clients, web developer, web developers, WebKit Engineer, Yellow Pages

Demystifying the Future of the Web and Apps at #SXSW2012

March 12, 2012 By Jonathan Jeter Leave a Comment

Monday, March 12, 2012 at South by Southwest Interactive Conference in Austin, TX
by Paul Trani (Evangelist – Adobe Inc) #sxsw #devices #SXdevices

Demystifying Devices: Understanding the Future of the Web & Apps

Adobe Proto looks cool really awesome! Talking about the Adobe Creative Cloud. The creative cloud is Adobe’s way of syncing all of your Adobe products and apps to all your devices.

  • Since 2009, Mobile Internet Usage has doubled every year
  • iPads and iPhones make up more Web traffic than Macs
  • mobile Internet usage will surpass desktop Internet Usage by 2015

Mobile devices have come a long way since the first mobile phones came out for the masses more than 20 years ago.

Progressive Enhancement (UI) and Responsive Design (layout)

progressive enhancement only gives browsers/devices the features they can use

Media queries – find min/max width, orientation & min/max-resolution to decide what css to load

Read the rest of Demystifying the Future of the Web and Apps at #SXSW2012

Like this:

Like Loading...

Filed Under: Mobile Tagged With: Adobe Creative Cloud, Adobe products, Adobe Systems, Appcelerator Titanium Mobile, Apps Adobe Proto, attractive design, chromeless browser, conference notes, correct content, creative cloud, dependent multiple skill, desktop internet usage, different media queries, Evangelist - Adobe Inc, Expressive Web, FitVids UX Design, golden ratio, iCloud logo, Internet Usage, jquery mobile, jquery mobile theme, jQuery plugin, long way, macs mobile internet, media queries, mobile apps, mobile development, mobile device, mobile devices, mobile Internet, mobile internet usage, Mobile phone, Mobile phones, mobile site, Mobile Theme Roller, Mobile users, mobile web, multi-screen preview, multiple native apps, MVC approach, native app, Native App Development, native apps, native code, native hardware, native languages iOS, Native Mobile Apps, Objective C Android, Paul Trani, platform manufacturer, progressive enhancement, REAL hand sizes, responsive design, Same thing, screen size, Sencha Touch, South by Southwest, South by Southwest Interactive, South by Southwest Interactive Conference, Southwest Interactive Conference, Strengths Great integration, Technology Internet, tool requirement, Tools Masonry, user experience, UX Design, web app, Web traffic, Windows Mobile

Killer App Design with Javascript and HTML 5

March 11, 2012 By Jonathan Jeter 1 Comment

HTML5 and Complex Web Apps

Web 2.0 vs HTML5 apps

Web 2.0

  • Dynamic content
  • Database driven
  • Social applications
  • Stupid name
  • “The Internet is more than lame dancing genies and hit counters!”

HTML5 Apps

  • Interactive content
  • Real-time
  • Task-oriented
  • Cool logo
  • “You can have a desktop experience in your browser”
  • Not trying to replicate a desktop software experience.

HTML5 – New Markup (separating functionality and presentation in the DOM with data-* attributes)

Amazing JavaScript APIs

Application Architecture

Lots of tools available that will allow for a more robust application development process.

  • Moving state to the client
  • Wep app Kool-Aid: MVC/MVVM, pub/sub and the module pattern
  • Your application as an API

Don’t do it alone

Toolkits, precompilers, boilerplates, and more

For the enterprise-y among you

Testing, IDEs and other developer tools

Read the rest of Killer App Design with Javascript and HTML 5

Like this:

Like Loading...

Filed Under: Web Development Tagged With: AJAX, API Separating Presentation, App design, app kool-aid, Application programming interface, Aptana Cloud9 WebStorm, BahaviorJS UI Testing, battery life access, Boilerplate Lungo JS, Cascading Style Sheets, chat application, common programming concepts, Complex Web Apps, CSS, CSS selectors, desktop software experience, Device Access File, Document Object Model, Ember Enyo SproutCore, IxEdit Slide URL, JavaScript, javascript api, JavaScript APIs Application, javascript applications, JavaScript jasmine jsspec, JavaScript micro-frameworks, JavaScript MVC Knockout, JavaScript Renaissance, Killer App Design, mobile device, mobile devices, module pattern, multi-threaded javascript apps, multiple nested ajax, MVC Frameworks, Offline Storage Store, old school mvc, pre-compilers css kind, push technology, related mvvm patterns, robust application development, SASS Compass Frameworks, simple javascript api, single tcp socet, small local app, SXSW, SXSW2012, Technology Internet, twitter bootstrap javascript, Web 2.0, web app, Web app Kool-Aid, Web application, Web apps, Web Apps Web, web server, web sockets, Web Tookit, Web Tookit Pyjamas, Web workers, WebSocket, WebSockets Bi-directional communication, wep app kool-aid, Workers spawn background

Jared Spool – Mobile & UX: Inside the Eye of the Perfect Storm

June 1, 2011 By Jonathan Jeter Leave a Comment

UIE Web App Master’s Tour – Seattle, Washington – May 23, 2011

 

h2. Mobile & UX: Inside the Eye of the Perfect Storm

Session 1 – Jared Spool

The UX aspect of mobile has really exploded recently.

Examples:

My Coke Rewards – mobile site had to have Flash. Excluded all iPhone users.

Fox Weather “Alternate content should be placed here.”

MikePanetta.com – QR code on sign, but no mobile site.

Mariott Hotel – connect to wifi via mobile

h3. Sturgeon’s Law

Theodore Sturgeon “90% of everything is crap!”

United airlines email link to 404 page

Coke has fixed the flash problem, but shows the entire site when user is trying to input a code.

You would think by now that we now how to show sites on mobile now, but companies still have issues: verizon wireless, att, apple, air canada

Read the rest of Jared Spool – Mobile & UX: Inside the Eye of the Perfect Storm

Like this:

Like Loading...

Filed Under: User Interface / User Experience Design Tagged With: Activity vs, Additional skills ethnography, Alternate content, analytics marketing technology, Apartment building, baby steps, bar code, basic expectations, Coke Rewards, customer keeps, Customer Support User, Denver Airport, Disney Six Flags, entire experience, Excitement Generators, Experience Design Skills, experience vision celebrate, Fox Weather, great learning opportunity, groupon excitement generators, Information architecture, Interaction design copy, Investment Performance Payoff, iphone users, Jared Spool, Keep adding, Law Theodore Sturgeon, major design failure, Mariott Hotel, methods soft skills, mobile h3, mobile site, My Coke Rewards, new york times, odd little things, page coke, Perfect Storm, Perfect Storm Invest, Perfect Storm Session, practices information design, process management user, QR Code, qr codes, risks jared spool, ROI social networks, Same thing, second test, Six Flags, Social network, social networks, Sturgeon's Law, team member, Technology Internet, testing remote usability, Theodore Sturgeon, Today Good examples, Two-way rating, UI, UIE, UIE Web App, UX, UX aspect, verizon wireless, web app, Web App Master, Web App Master's Tour

Jared Spool – The Essential Principles behind Great Design Principles

May 27, 2011 By Jonathan Jeter Leave a Comment

UIE Web App Master’s Tour – Seattle, Washington – May 24, 2011

Jared Spool, CEO & Founding Principal of User Interface Engineering and co-author of Web Anatomy, started the session by showing examples of web sites that had serious usabilities. Some of the designs were attractive, but did not serve the users needs. In most examples, the user had to click multiple items or jump back and forth between pages or flyouts (a process he referred to as “pogo-sticking”) to find the information that would help them make the decision they were supposed to make to allow them to continue with the process. The takeaway was that when we encounter a problem in our application that hinders users, we should strive to help people make a choice in the easiest way possible.

Dieter Rams

Dieter Rams was the first person to create a standardized set of design principles, which are as follows:

Read the rest of Jared Spool – The Essential Principles behind Great Design Principles

Like this:

Like Loading...

Filed Under: User Interface / User Experience Design Tagged With: aesthetic makes, afternoon select scenarios, bad design, confidence small things, Critique Design, customization value, Design Create, design elements, design exploration, design principle help, design principles, design visit, desktop design principles, Dieter Rams, discoverability ux, easiest way, environmentally friendly, Essential Principles, exception cases, field research, future release, generic design principles, good design, good design principle, Great Design Principles, hair appointment, half-day visits, individual design decisions, innovative makes, Jared Spool, little design, Many times, Microsoft Vista, mini-project creative brief, multiple items, online design principles, qeustions personalization, quick field research, receptionists select personas, Research-Based Principles, Select Principles, standardized set, team member, team members, Technology Internet, top-priority projects, UI, UIE, UIE Web App, User Interface Engineering, users needs, UX, Web Anatomy, web app, Web App Master, Web App Master's Tour, Web application, Web Design and Development, web site, Windows 7, world wide web

  • 1
  • 2
  • Next Page »

Stuff I Like to Talk About:

  • Business
  • Digital Imaging
  • Internet Marketing
    • Email Marketing
    • SEM / Paid Search
  • Life
  • Other Stuff
    • Health
    • Taekwondo (TKD)
  • Sports
    • Football
  • Technology
    • Augmented Reality
    • Awesome or Scary?
    • Marketing Technology
      • Data / Analytics
      • Omnichannel
    • Mobile
      • Android
    • Virtual Reality
  • User Interface / User Experience Design
  • Web Development
    • Browsers
    • CSS
    • Front-End Development
    • Google+ (Google Plus)
    • HTML5
    • JavaScript
    • jQuery
    • Mobile
    • MVC
    • Responsive Design
    • SEO
    • Social Media
    • UI/UX
    • WordPress

HTML

  • HTML Entities

JavaScript

  • MEAN.js

My Sites

  • Head Turning Media
  • Jonathan Jeter (Brand Yourself)
  • My Humor

Online Experts

  • Bryan Eisenberg
  • Danny Sullivan
  • Duane Forrester
  • Keith Brown
  • Louis Gray
  • Matt Cutts

UI / UX

  • Jared Spool
  • Paul Jeter
FreshBooks
Genesis Framework for WordPress Premise Landing Pages Made Easy

Most Popular

  • Contact Jonathan Jeter
  • Verizon Wireless – My Favorite Mobile Provider
  • A Brief History of the Complete Redesign of Google…
  • Exploring Standard Ad Unit Sizes: Google AdSense…
  • Social Farming?
  • Who?
  • Exploring Standard Ad Unit Sizes: Google AdSense…
  • Mike Lee – AARP: Designing a Strategy for…
  • Taegeuk 5 (Poomsae) – Kukkiwon World Taekwondo…
  • Taegeuk 4 (Poomsae) – Kukkiwon World Taekwondo…

Copyright © 2025 Jonathan Jeter

 

Loading Comments...
 

    %d