• 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 Cascading Style Sheets

Rapid Templating: “Designing in the Browser” with Sass, Compass, and Serve

February 2, 2013 By Jonathan Jeter Leave a Comment

by Nathan Smith at HTML5 Texas in Austin, TX (Deck)

Have you ever found yourself needing to build static front-end templates, either as part of a larger project or as a way to communicate the nuances of responsive design to a client? I think we can all agree that just doing flat HTML leaves us wanting for more templating power.

But, using a dynamic language (PHP, Ruby, etc) typically means that it’s tougher to hand off to a client, who may (not) have a local development environment. That’s where Serve helps bridge the gap. It lets you play with the “”V”” of Rails MVC, but also export flat HTML for easy distribution.

Responsive Web Design

Designers can’t just throw stuff over the wall to the developers anymore

The deck says it all. Great stuff!

sass is to css what jQuery is to JavaScript

Read the rest of Rapid Templating: “Designing in the Browser” with Sass, Compass, and Serve

Like this:

Like Loading...

Filed Under: CSS, Front-End Development, Web Development Tagged With: Absolute Beginner, Cascading Style Sheets, Conventions Rapid Templating, CSS Performance, development environment, dynamic language, easy distribution, flat HTML, Great stuff, HTML5 Texas, JavaScript Related, larger project, local development environment, Nathan Smith, Rails MVC, responsive design, responsive web, Responsive Web Design, Responsive Web Design Designers, Sass Coding Q&A, static front-end templates, Technology Internet, templating power, Web Design

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

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

Luke Wroblewski – Designing Mobile Web Experiences

May 24, 2011 By Jonathan Jeter Leave a Comment

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

Convincing Clients to Care

Luke Wroblewski - Designing Mobile Web Experiences
Luke Wroblewski - Designing Mobile Web Experiences

Prediction in 2009 that smartphones would outsell PCs in 2012, it happened in 2010.

Home usage of PC since 2008 has decreased 20%

November 2010 – visits to web-based email sites decreased 7% and people accessing email on mobile devices increased 36%

Twitter – 40% of all tweets are sent via mobile; 16% of new users start on mobile. Top 2 Twitter mobile clients – twitter.com, m.twitter.com, sms

Facebook – 33% of users use mobile via Facebook mobile website, and clients on phones

Mobile phones will overtake PCs as the most common Web access devices worldwide by 2013

Shift from what was the personal computer (PC) to what is the personal computer (smart phone).

Capabilities & Constraints

Capabilities

Location Systems: GPS, WiFi, Cell Tower Triangulation

Read the rest of Luke Wroblewski – Designing Mobile Web Experiences

Like this:

Like Loading...

Filed Under: User Interface / User Experience Design Tagged With: Best Practices, books.alistapart.com luke wroblewski, border-radius rgba color, Cascading Style Sheets, Cell Tower Triangulation, comfortable reach zone, Constraints Capabilities Location, Constraints small screen, correct interaction element, dead end menu, design elements, excessive navigation menus, Facebook mobile website, fingers sensors flickr, Focus Maintain clarity, gmail.com mobile, important two sets, Luke Wroblewski, media queries, mobile browsers, mobile device, mobile devices, mobile helps, mobile navigation elements, Mobile phone, Mobile phones, mobile site, mobile tends, mobile web, Mobile Web Experiences, Mode Fluid Fills, navigation links, Network constraints, page menu, physical control proximity, picture designing, Practices Mobile Behaviors, responsive design, Responsive Design resolution, responsive design trim, Screen On Tap, single navigation action, small navigation elements, Swipe Separate Screen, text-shadow box-shadow gradients, thumbs in-context navigation, touchable touch target, Twitter mobile clients, UI, UIE, UIE Web App, UX, vs global navigation, Web access devices, web app, Web App Master, Web App Master's Tour, web-based email sites, width reduce push, width viewport tag

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