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+.

Context Aware CSS – Front Porch Front-End Developers Conference, Dallas, TX

October 7, 2014 By Jonathan Jeter Leave a Comment

Presented by Matthew Carver

Content needs context

defining contextual awareness

@media(sensor){adjustment}

Disseminating Active map information to mobile hosts

Historically the web takes its cues from traditional media
Google uses available data to extend contextual awareness across its products – Facebook does this well

contextually aware web

user
task
environment

What can we tell about a user? Don’t confuse a user with a device.

Example users:

physically impaired
specific objectives
limited/meaningful scope

Example tasks:

repeated interactions
implied relationship

Example Technology

Read the rest of Context Aware CSS – Front Porch Front-End Developers Conference, Dallas, TX

mobile/tablet/pc
hardware limitations
input types

Paul’s notes

www.manning.com/carver

Content is critical.

But content needs context.

Defining Contextual Awareness
Applications in web design
level 4 media queries
Summary

Responsive Image Strategies – Front Porch Front-End Developer Conference, Dallas, TX

October 7, 2014 By Jonathan Jeter Leave a Comment

Presented by Lindsey Norman

There are a lot of arguments and it is very complicated.

Scenario

Large retail client with a lot of imagery

Big Lesson #1: Responsive may seem old hat already, but it’s still new in a lot of organizations.

Responsive Web Design podcast

Big Lesson #2: Style Guides = awesome

Keeps everyone on the same page and is a reference point for changes.

Retina Revolution

Create image at 1.5 to 2 times larger than necessary and export at high compression

Percentage Crop

Full size for desktop, but crop for mobile
Involves moving the viewable area of image for smaller viewports
Addresses art direction use case
fast solution
easy to understand with minimal code

Creative team wanted more control with more crop sizes so created a Sass function

<picture> element allows to rearrange elements and show different sizes

Read the rest of Responsive Image Strategies – Front Porch Front-End Developer Conference, Dallas, TX

SVG Strikes Back – Front Porch Front-End Developers Conference, Dallas, TX

October 7, 2014 By Jonathan Jeter Leave a Comment

Presented by Matt Baxter

SVG – open graphics standard

vector-based, good for logos & icons, but not photos

vectors are scalable and are not affected by pixel density

SVG is ideal for multi-device web

All modern browsers support SVG (IE9+)

SVG is…

Resolution independent
small in file size
browser independent
simple to use

The DOM

Prototypes – you can create interactive prototypes and wireframes using SVG

slides

Developing Mobile Apps with The Ionic Framework – Front Porch Front-End Developers Conference, Dallas, TX

October 7, 2014 By Jonathan Jeter Leave a Comment

Presented by Justin Noel

Everyone wants to create an app. There are lots of platforms and cross-platform development costs a lot of money.

The Downsides of Native

Proficiency in each platform required
Extensive Development Setup required

Hybrid Apps

HTML5 that acts like native
Web wrapped in native layer
Direct access to native APIs
Cordova/Phonegap
Familiar web dev environment

Hybrid Apps have a Bad reputation, but they can be beautiful.

ionic is a beautiful, open source framework for developing hybrid mobile apps with HTML5. They have taken the traditional mobile UI and made it available within the framework.

ionic showcase

ionic creator is a WYSIWYG for creating hybrid apps.

There is a lot of setup to develop apps – lots of SDKs and programs to install. ionic has a virtual machine called ionic box with all of the necessary requirements to get started developing.

Read the rest of Developing Mobile Apps with The Ionic Framework – Front Porch Front-End Developers Conference, Dallas, TX

Realtime for Reals – Front Porch Front-End Developers Conference, Dallas, TX

October 7, 2014 By Jonathan Jeter Leave a Comment

Presented by Alexis Abril

FeathersJS is a wrapper for Express that allows you to easily create shared RESTful web services and real-time APIs using SocketIO and other websocket libraries.

Feathers revolves around the concept of service objects.

find
get
create
update
remove

Live coding the demo was awesome! Choose YOUR favorite Captain! Kirk vs Picard.

Storing data store in an array, but you could use a database. Using

Most of the best presentations have few notes because it was very interesting and included a lot of live coding. Github repo.

Client <-> Feathers <-> REST <-> DB

Dallas js meetup @dallasjs

SMACSS Your Sass Up Mina Markham – Front Porch Front-End Developers Conference, Dallas, TX

October 7, 2014 By Jonathan Jeter Leave a Comment

Presented by Mina Markham

SMACSS is not a framework. It’s an approach to authoring your style sheets. You can use

categorization

– base,
– layout, modules, states and themes

base styles are bare minimum (css reset)
layout styles are the grid system and any defining elements of your site (header/nav/etc)
modules is where you write the bulk of the css. components of pages
states are the active, collapsed, hidden or other states of your modules. You can use a separate naming convention for these
themes don’t always apply, but a theme can be a new skin for modules

base uses standard tags
layout can use a .layout prefix for your styles
modules use the name of the module
state styles can use a .is- prefix
theme can use .theme- prefix

Read the rest of SMACSS Your Sass Up Mina Markham – Front Porch Front-End Developers Conference, Dallas, TX