Jonathan Jeter

Director of Application Development

Home Archives for frontporch

To The Moon And Back: Taking The Leap Towards Solving Big Problems – Front Porch Front-End Developer Conference, Dallas, TX

By Leave a Comment

Presented by Julia Elman

 The Past

  • 1960: The Cultural Decade
  • Kennedy “get to the moon” speech
  • 1969 moon landing
  • New found awareness (earth’s atmosphere, etc.)
    • 1970 – EPA founded, Comprehensive clean air act, Earth Day founded
    • 1971 – Doctors without borders
    • 1972 – DDT was banned
    • “We went to the moon, but discovered the Earth for the first time.”

The Present

MIT Technology Review – You promised me Mars colonies, instead I got Facebook. (Buzz Aldrin)

Why aren’t we solving global problems with technology any more? We tend to over-engineer solutions.

Malaria, Cancer, etc.

We can solve big problems with 3 things aligned.

  1. Our institution supports solutions
  2. We actually understand the problem
  3. Active political leader and public working together to solve the problem.

The Future

Education – Logo programming on Apple IIe

Read the rest of To The Moon And Back: Taking The Leap Towards Solving Big Problems – Front Porch Front-End Developer Conference, Dallas, TX

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

By 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

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

By 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

By 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

By 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

By Leave a Comment

Choose your captain: kirk vs picardPresented 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

By 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