• 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 Jonathan Jeter

Jonathan Jeter

Jonathan Jeter has been creating websites since 1997. He is currently Director of Technology Services and Digital Development at TracyLocke, a shopper marketing agency. You can follow him @mywebthoughts, on LinkedIn or connect on Google+.

Model-View-Websockets

February 2, 2013 By Jonathan Jeter Leave a Comment

by Garann Means at HTML5 Texas Conference in Austin, TX

Many front-end developers are familiar with MVC, and almost all are familiar with event-driven architectures (even if they call them something else). How do those two philosophies work together? And, more importantly, how can websockets help future applications become more responsive, more consistent, and easier to develop? We’ll reexamine the Controller concept from MVC and figure out how to combine simple browser messaging and websockets to address our application needs and improve our user experiences.

Model-View-WebsocketsJavaScript

Did well for a while without patterns and frameworks, but once we realized its potential we added everything at once, adding complexity and functionality.

#singlepageappaproblems

Single Page Applications (SPAs) today are everywhere, as well as SPA behavior on static pages, requiring 3rd-party tools and systems of dependencies. It’s easy to set up, but difficult to maintain.

Read the rest of Model-View-Websockets

Like this:

Like Loading...

Filed Under: JavaScript, MVC, Web Development Tagged With: ad-hoc Related articles, awesome tools, client interaction fit, code good tools, conference notes, CRUD EDA, darn HTTP requests, development Event-Driven Architectures, EDA JS, EDA objects, event handling, event piping decouple, event-driven architectures, events event handling, events free events, family MVC, full-stack Backbone Meteor, global events updates, HTML, HTML server updates, HTML5 Texas, HTML5 Texas Conference, HTTP request, HTTP requests, Hypertext Transfer Protocol, interface inerpolate data, JavaScript, Javascript MVC Frameworks, lightweight MVC, mobile uses tickers, multiple HTTP requests, MVC, MVC framework, MVC Frameworks, MVC suit, Node Knockout app, Node Model-View-* circa, OOP big teams, pubsub implementation WebSockets, quick state changes, replace framework sync, REST easy mapping, server messages, server-rendered HTML Flight, simple browser messaging, Single Page Applications, sophisticated EDA JS, support dead simple, talk DiY WebSockets, Technology Internet, Texas conference, TodoMVC No SPA, user experience, user interaction, user interaction MV*, view server itarction, views MVC, WebSocket

Front End Legos

February 2, 2013 By Jonathan Jeter 2 Comments

by Shay Howe at HTML5 Texas Conference in Austin, TX (Deck)

There are a million ways to write HTML and CSS, and everyone has their own, but is there a right way? Our code needs to be well structured, written in an organized manner, and performance driven. Sharing code with others should be a joyful experience, not absolute terror.

In this session, Shay will cover some best practices and performance tips for writing the highest quality HTML and CSS possible. Writing code is the easy part, finding a practice and structure that works well across the board is the hard part. Shay will outline HTML and CSS conventions that can be applied to your everyday practice.

Front End Legos - Building Modular CSSCommon Problems

  • Websites have difficulty scaling
  • code becomes brittle
  • Files and code bases begin to swell

What’s Wrong

Best practices aren’t exactly best practices

Read the rest of Front End Legos

  • avoid extra elements

Like this:

Like Loading...

Filed Under: Front-End Development, Web Development Tagged With: bad Low Specificity, Base Core styles, Best Practices, Cache Files, Cascading Style Sheets, Class (computer programming), class names avoid unnecessary, code bases, common files, Components User interface, conference notes, container element selectors, CSS conventions, CSS Jonathan Snook, CSS Lint, CSS Nicole Sullivan, CSS Performance, CSS Sneak Peek, Data Formats, date content, default elements, design patterns Alerts, elements Accommodate Content, elements Great ideas, Elements High Specificity, entire site, entire site Normalize, extra elements, great ideas, grid separate presentation, highest quality HTML, HTML, HTML5 Texas Conference, Jonathan Snook, layout code, leverage descendent selectors, leverage type selectors, lists Modules Business, Maintainability Code, Markup Languages, modular performant Organization, modularity Modularity, nested selectors, Nicole Sullivan, old code, old code defer, oocss.org SMACSS Scalable, performance tips, reusable elements, right way, Shay Howe, smacss.com Reuse Code, Specificity determines, Specificity Formula count, specificity Methodologies OOCSS, Style Sheets, styles Minimize Requests, Technology Internet, Texas, Texas conference, Use data, User interface, Zurb Foundation

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

Adaptive Images for Responsive Web Design

February 2, 2013 By Jonathan Jeter Leave a Comment



by Christopher Schmitt at HTML5 Texas Conference, Austin, Texas (Deck)

“The open web doesn’t stop at our desktop. Smart phones and tablets not only contain more computing power and better browsers than the computers that started the Internet economy, they have better displays.In this session presented by Christopher Schmitt, we will work through tips and tricks to develop future friendly images in our sites and apps.”

Adaptive Images in Responsive Web Design

Think about the iPad, which presents so many design challenges. It can be wi-fi only or 3G, so bandwidth issues can be present. It has retina, so there can be display issues. When you design for web, you want to have great-looking images, but how do we get higher resolution images to those devices.

Why don’t we ask the browser? http://www.usearagentstring.com/ Available since the first browser Mozilla/1.0 (Win3.1), but browser put tons of stuff in the user agent string and can be spoofed. Instead of asking the browser, we do feature testing.

Read the rest of Adaptive Images for Responsive Web Design

Like this:

Like Loading...

Filed Under: HTML5, Web Development Tagged With: Adaptive Images, add if-lese html, Bandwidth Media Queries, Better browsers, Browser Sniffing Browser, Christopher Schmitt, Christopher Schmitt Mobile, Christopher Schmitt Mobile devices, conference notes, css media, css media queries, design challenges, desktop images, font Compressed jpegs, font-based solutions, fonts Icon Fonts, future friendly images, great-looking images, high speed/high density, higher resolution, higher resolution experience, higher resolution images, HiSRC Filament .htaccess, HTML5 Broilerplace jQuery, HTML5 Texas, HTML5 Texas Conference, img > media, internet connection, Internet economy, jpegs FitText Native, larger images, longer download times, media queries, mobile device, mobile devices, native speed, native speed test, open web, Ready Images, responsive image format, responsive path, responsive web, Responsive Web Design, responsive web Retina, Retina display, retina images, right size image, script src=, Smart phones, speed test, speed test IMG, Speed Tests, Speed Tests Hinder, spikes. imageoptim IMG, SVG font-based solutions, Technology Internet, Texas conference, user agent string, user experience, Web Design, Web Design Developing, width Speed Tests

HTML5 TX 2013

February 2, 2013 By Jonathan Jeter Leave a Comment

HTML5 TX Opening CircleToday is the 2nd annual HTML5 Texas conference at St. Edwards University in Austin. Looking forward to learning some great HTML5 goodness today.

Important things for today:

  • Parking is available in any lot except the red lots (resident parking)
  • Great sponsors
  • Hackython with free copies of Kendo UI
  • Closing Party tonight

Open Spaces – Alan Stevens

HTML5TX Open Spaces by Alan Stevens

Open spaces technology allows for the important stuff that goes on at conferences in the hallways. An open space is a place where you can run an impromptu session on any topic. The first step is to propose a topic that you’re passionate about. It doesn’t have to be related to other topics or the conference at all. Announce your topic and your name and put it on the board in one of the areas available. The only other responsibility is to show up. Then you can do whatever you want. Give a lecture or a presentation or a conversation. If no one shows up, that’s okay, too. Just stay there and see what happens. It is an amazing experience.

Read the rest of HTML5 TX 2013

Like this:

Like Loading...

Filed Under: HTML5, Other Stuff, Web Development Tagged With: 21st century, adaptive and responsive web forms, Alan Stevens, Alan Stevens Open, amazing experience, annual HTML5 Texas, articles Kendo UI, Austin Texas, building mobile apps, Closing Party, conference notes, frameworks Bradley, free copies, front-end JavaScript Testing, great HTML5 goodness, Great sponsors Hackython, HTML, HTML5, HTML5 BII REPORT, HTML5 Texas, HTML5 Texas Conference, HTML5TX, HTML5tx Lift SEO, important stuff, important things, impromptu session, jango 3D, JavaScript, JavaScript Casey, js Dean, Kendo UI, Kendo UI Closing, Kendo UI Closing Party tonight Open Spaces, main principles, marry client-side MVC, mobile apps, mobile web, multi-user dungeons, MVC Frameworks, open space, open spaces, Pot realization, resident parking, responsive web forms, right people, right place, right time, Robot world, Sangean Table Top Portable Audio Device, site launch, space topics, St. Edwards University, table-top gaming, Texas conference, UI native, venus world, When it's over, work-life balance, worst thing

Waze Gets You There

June 8, 2012 By Jonathan Jeter Leave a Comment

MyLifeScoopThis post is brought to you by My Life Scoop Get Tips For A Connected Lifestyle »

Waze community driving app helps drivers on the roadWaze is a community driving app that makes commuting easier. I’ve been a Wazer, using the Waze driving app, for a couple of years now and it has become part of my daily routine. According to Waze, they are all about contributing to the common good out there on the road and by connecting drivers to one another, they “help people create local driving communities that work together to improve the quality of everyone’s daily driving.” Waze is all about avoiding the frustration of sitting in traffic or running into a police trap and wants to help shave five minutes off of your regular commute by showing you new routes that you never may have discovered otherwise.

Read the rest of Waze Gets You There

Like this:

Like Loading...

Filed Under: Mobile Tagged With: beta map editor, car dock, common good, community involvement, commuting apps, Connected Lifestyle, cool iphone ui, creepy features, crude map editing, crude map editing tools, daily driving, daily routine, different groups, different route, driving apps, Droid 4, favorite routes, free apps, frequent routes, Google Maps, great feature, Life Scoop, local driving communities, local television stations, Magic Tricks, map editing, map issues, Mapquest Mobile, mobile device, mobile devices, morning commute, Motorola Droid, Motorola Droid Smartphone, new routes, new streets, Other community features, police traps, regular commute, report items, road changes, Scoop Get Tips, top 15 gadgets, traffic hazards, traffic jams, waze, Waze community, waze review, Windows Mobile, Windows Mobile devices

Looking for Instagram or Android fonts or logos and icons in png and vector?

May 25, 2012 By Jonathan Jeter Leave a Comment


Instagram - 8 (Photo credit: BrentOzar)
Ever since I posted my article on Instagram being available on Android, I’ve noticed traffic coming to my site looking for many different, but related things. All of the searches have to do with Instagram and Android and some combination of logo, icon or font, usually specifying a png or vector logo.

Instagram offers a download package of it’s logo on it’s logo usage page, but doesn’t include a vector version, probably because all of the shading in the logo doesn’t lend itself to a vector version. There is also a list of requirements for developers and other that are going to be using the Instagram name and logo, including usage of the following statement: “This [application/website] uses the Instagram(tm) API and is not endorsed or certified by Instagram or Instagram, Inc. All Instagram(tm) logos and trademarks displayed on this [application/website] are property of Instagram, Inc.”

Read the rest of Looking for Instagram or Android fonts or logos and icons in png and vector?

Like this:

Like Loading...

Filed Under: Other Stuff Tagged With: All Instagram, All Instagram(tm), Android, Android brand assets, Android fonts, Android icon, Android logo font, Android robot icon, Application programming interface, developers site, download package, Ever since, fixes camera, following statement, gallery-3 img, guidelines page, Icon, Instagram, instagram icon, Instagram Inc., Instagram Logo, Instagram update, Large Instagram Icon, Large Instagram Logo, Logo, logo usage page, Medium Instagram Icon, Medium Instagram Logo, Photogenic Social Media, robot icon, Small Instagram Icon, Small Instagram Logo, Social Media, Technology Internet, user mark, Vector graphics, vector logo, vector version

  • « Previous Page
  • 1
  • …
  • 3
  • 4
  • 5
  • 6
  • 7
  • …
  • 14
  • 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

  • Exploring Standard Ad Unit Sizes: Google AdSense 300…
  • To The Moon And Back: Taking The Leap Towards…
  • Looking for Instagram or Android fonts or logos and…
  • Verizon Wireless – My Favorite Mobile Provider
  • The Relentless Pursuit of the Right Answer: Why…
  • Backbone: 3 Ways
  • My Notes on “Marketing Technology as Force…
  • A Brief History of the Complete Redesign of Google…
  • Exploring Standard Ad Unit Sizes: Google AdSense…
  • Ultimate Engagement: Data Driven Email Tactics

Copyright © 2025 Jonathan Jeter

 

Loading Comments...
 

    %d