Jonathan Jeter

Director of Application Development

Home Archives for conference notes

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

Deploying Websites With Capistrano – Front Porch Front-End Developers Conference, Dallas, TX

By Leave a Comment

Presented by Andrew Turner

There are lots of ways to deploy websites:

Try and avoid server-side editing and ftp.

Written in Ruby

Directory structure: server

  • current
  • releases
  • repo
  • shared

Make sure to point your web host’s document root to current as it is a symlink to the latest release.

Sounds like a deployment tool for Ruby, but it seems like it could be used for WordPress with git and WordPress.

Intro to WebGL and Three.js – Front Porch Front-End Developer Conference, Dallas, TX

By Leave a Comment

David Lyons - Intro to WebGL and Three.js - Front Porch Front-End Developer Conference, Dallas, TXPresented by David Lyons

What are people using WebGL for

  • games
  • interactive demos

three.js

  • 3D JavaScript Library – what would take hundreds of lines of code with raw WebGL only require a few lines using three.js

All three.js projects have the following elements:

  • scene
  • aspect
  • camera
  • renderer

WebGL - three.js geometryRotations use radians (using pi)

Lots of math, but lots of elements to help you figure out how to do it. Mesh, shading, colors, textures, shininess, etc., etc.

You can load in ojbects via the JSON loader with a python tool that’s included (must be Python 2.7).

Interactions

In 3D you have to use “picking” to select items. You don’t have the browser interactions available.

Great stuff on three.js from David Scott Lyons on his site!

Read the rest of Intro to WebGL and Three.js – Front Porch Front-End Developer Conference, Dallas, TX

How Tag Management Will Supercharge Your Testing Program – Digital Velocity Conference 2014 #dv14

By Leave a Comment

Naoshi Yamauchi - Movemver - Internet Summit (Photo credit: Thos003)

 

Here is my summary of the tag management presentation by Naoshi Yamauchi at the Digital Velocity Tealium User Conference 2014, San Diego, CA
Presenter: Naoshi Yamauchi, Chief Performance Officer, Brooks Bell
@nyamauchi

If you’re managing a testing program on your website—and every site should be testing—implementing a tag management system can take it to the next level. Through the use of these techniques, you will be able to reduce costs, increase velocity, and drive more effective testing.

Lots of work goes into testing.

Time is Money

Read the rest of How Tag Management Will Supercharge Your Testing Program – Digital Velocity Conference 2014 #dv14

  • Every day that we aren’t testing we lose a day on learning

Speed

  • Reduce IT involvement
  • Quickly implement fixes & new test code
  • Adjust analytics code on the fly

Agility

  • Deploy the tools that add value to your tests… …only when you test.
    • Reduce third party costs. Makes getting approval easier.

One Size Fits No One – Digital Velocity Conference 2014 #dv14

By Leave a Comment

Marketing copy1a3 (Photo credit: Wikipedia)

Here is my summary of the “One Size Fits No One” presentation by Jason Burby at Digital Velocity Tealium User Conference 2014, San Diego, CA
Presenter: Jason Burby, Chief Performance Marketing Officer – POSSIBLE
@jasonburby

Tailored messages work better

There are many many things that shape who we are, what matters to us (at a point in time) and what drives passion, focus and priority.

Treating EVERYONE the same (Failures of common sense marketing)

Online banking. If all you ever do is sign in, why are they marketing to you? They’re training you to tune out the rest of the page.

Lulu Lemon – Marketing to women, even if they know you are male.

We often take a good idea, but apply it to everyone.

Read the rest of One Size Fits No One – Digital Velocity Conference 2014 #dv14

Top 8 Reasons Marketers Struggle

  1. Lack of Defined, Documented & Shared Goals
    Ways to Overcome: Alignment, Focus, Champion

Frictionless Sales: Selling to Generation Cloud – Digital Velocity Tealium User Conference 2014

By Leave a Comment

English: Illustration showing DevOps as the in...

Here are my notes from the “Frictionless Sales” presentation by Treb Ryan at Digital Velocity Tealium User Conference 2014, San Diego, CA
dimension data

Read the rest of Frictionless Sales: Selling to Generation Cloud – Digital Velocity Tealium User Conference 2014

Generation Cloud = New Expectations

  • Immediate availability
  • Ubiquitous Access
  • Limitless Resources
  • Sharing and Collaboration
  • Mobile and BYOD
Sales hasn’t evolved since the mainframe until the last few years
  • salesforce (1 year contracts)
  • softlayer (monthly commitments)
  • constant contact (monthly commitments)
  • amazon web services (hourly commitments)
1:1 correlation to rapid increase in sales

Elements of a Frictionless Sale – The 3 NoCo’s

  • No contact – People who use the cloud like to buy in the cloud (Don’t want to have to talk to someone to be able to purchase something. If you force them to talk to a rep, they will just move on.)
  • No contract – Hourly billing is a simple proposition. Customers will continue to a service they like.