Elroyjetson

Archive for June, 2012

Pulling Twitter Feeds into Google Reader

Posted on: by

I am consolidating all of my social networking to Google+, but I do get a lot of value from Twitter. This value largely comes in the form of links, since Twitter is barely useful for actual conversations, so I don’t want to lose this ability, but I don’t want to continually have to open Twitter and scroll through the stream to catch up.

I spend a lot of my time in Google Reader, so the easiest way to deal with this would be to add a Twitter folder in Google Reader and then take in an RSS feed of each person I follow. It turns out this is actually pretty easy.

Twitter already has baked into it’s API the ability to pull a stream from any account. For instance, to pull an RSS feed of my account use this url:

https://api.twitter.com/1/statuses/user_timeline.rss?screen_name=elroyjetson

Now simply subscribe to the RSS feed in Google Reader, attach a label, and problem solved.

Update – 12/30/2012

This method seemed to stop working when subscribing in Google Reader at some point. It does, however, still work with a minor tweak. I create a proxy using PHP which the reaches out and pulls in the feed and this seem to then work.


<?php 
    $feed = file_get_contents('https://api.twitter.com/1/statuses/user_timeline.rss?screen_name=elroyjetson');
    echo $feed;
?>

For whatever reason, this makes it work.

Codeigniter Environments

Posted on: by

Introduction

Have you ever wished that you could have a separate set of configuration files for your different development environments? My usual setup consists of a development environment, usually on my local machine, a staging server where clients can view the work prior to going live, and a production server. Each of these three environments have slightly different aspects to them that I need to change to migrate the work between each of them.

Wouldn’t it be nice if I could just tell my Codeigniter application which environment it is on and then use the set of configuration files appropriate to that environment?

It turns out that this ability is already baked into Codeigniter and it is really simple to use.

Set the ENVIRONMENT

As I indicated previously, I have three environments, development, staging, and production so I will use these as my environment labels. To tell your Codeigniter application which environment you are on, locate your main index.php file, I usually keep mine in a /public/ folder which becomes my DOCUMENT_ROOT so that my application is outside of my web site.

Inside this file locate the first editable line in the APPLICATION ENVIRONMENT code block. It should look like this:

define('ENVIRONMENT', 'development');

By default it is already set to development, but depending on the environment you can change this to suit your needs.

That was really the hard part, the rest is easy.

Environment config files

Now that we have set the ENVIRONMENT constant, we have to create our config files for each of these environments. To do this head into your application and then config folder. Remember that I said I had three environments, development, staging, and production. So in the config folder within my Codeigniter application I will create three directories one to match each of these environments. The structure should look similar to this

/application
    /config
        /development
        /staging
        /production

The way Codeigniter works, is that it follows a hierarchy for loading config files. Codeigniter starts by checking the ENVIRONMENT constant, if it is set, it takes that value and looks to see if there is a corresponding directory to match in the config directory, if so, it loads those files, if not it falls back to the default location in the config directory and loads that file instead. What this means is that you only have to place the config files that are different into the environment directories.

The two most common files I place in these directories are the main config.php and database.php. You can place any configuration file that you need to in these directories or even your own application specific config files.

Conclusion

It is as simple as that to now have the flexibility to have one code base that you can deploy easily between each of your three environments without having to swap out files depending upon the server you are deploying to.

More Information

  1. Handling Multiple Environments
  2. Config Class

The Minimal Viable Web by Kristofer Layon

Posted on: by

Notes at Breaking Development :focus on responsive
Minneapolis, MN
6/4/2012

Presentation Slides

This is more than about mobile.

Part 1: The Victorian Web

We started doing layouts in tables.

Zen Garden

The idea is you can take semantic markup and effect change. But looking at it now it seems like too much separation between content and presentation.

We seem to be so driven by the visual side.

The Victorian Web is very, very visual. This is seen in many other mediums e.g. Victorian architecture – lots of superfluous ornamentation , Victorian dress – very ornate.

We see in the mobile web, that the Victorian web is falling apart.

There are risks and how much do you want to take on.

The dike has broken on our web designs. We have tried to control our designs and they are inherently brittle.

Part 2: Modernism to the rescue

Form follows function.

Examples are simple. Can we learn from these other examples. Perhaps we do not need such ornate designs.

Criticism is that it is cold or too simple.

Part 3: Human Modernism – Focus on people

or the advent of user-centered product design

Best examples of human product centered design – new design of the London Underground. It was more than making a map easy to read, but also iconography.

Focus on type and abstract visually. Branding was a new design touch.

The London Underground example didn’t treat it as a technology it doesn’t discuss it.

Similar idea happened in fashion. “It is always better to be slightly underdressed” Coco Chanel

Simply designed.

Part 4: Mobile can help us make the web better

Maybe the mobile web is like packing a carry on vs a full-size suitcase

  • Some of the contents need to be packed differently
  • Other items need to be smaller or less bulky version
  • And sometimes you need to leave some things behind
    • But not the things we absolutely need.
      -Perhaps we didn’t need those other items at all.

What about designing for the mobile web?

  • Our purpose stays the same
  • our strategy changes
  • the solution is a mix of what we already have plus some new things
  • the result: more simple+ lightweight

It’s about the content stupid Stephanie Rieger

Mobile is simply shining a light on some of the things we should be thinking about.

Part 5: Web Product Management

Some things you can’t control for. No matter how much you test, you can’t test it all, so design for this reality.

We aren’t focused on what people need but on innovation for innovations sake.

Dan Cederholm is a good example of simplifying things.

We can do nothing, or do like Dan Cederholm says is ok to do, you don’t have to get it all right. Baby steps. (see Adapted)

Start by working on the base of human needs and working your way up (Maslow theory of human motivation)

A mobile version:

  • Base: See Content – Navigate
  • Readability & pinch+zoom
  • Respond & share
  • Performance
  • Tip: HTML5 local storage, web sockets, offline, transitions

Concentrate on the human priorities.

Not to say that there are only one set of priorities.

Be somewhat pragmatic, get mobile started, prioritize based on your situation.

  • group priorities
  • everything can’t be a priority

Product management is about managing priorities

Tool: Kano Model

  1. Basic attributes
  2. Performance
  3. Delight

Use charts/graphs to show progress. Executives like graphs.

You can’t assume how the Kano attributes rank based on you the designer. Who people are, time, manner, place all matter.

Start with basic priorities, don’t over design. Don’t try to do everything under the sun.

Minimal viable web design

  • Start with people
  • Design from your content out
  • The best visual design is the least amount that is necessary
  • Iterate and add only if people need more
  • The result: simple+lightweight

Web product management

  • Get away form your desk talk to people
  • Write user stories
  • Road map your product

Creating Responsive Experiences by Tim Kadlec

Posted on: by

Notes at Breaking Development :focus on responsive
Minneapolis, MN
6/4/2012

Talk Slides

They kind of miss the point about Responsive Web Design (RWD)
Repurposing vs. Optimized Design by Jakob Nielson
Has adaptive design failed? Of course not
Why Responsive Web Design is Not the Holy Grail for Mobile

There is more to it than just the layout.

It’s a lot easier to emulate than innovate and that is where we are with the web.

It’s time to shed some ideas and move forward.

There is no common resolution.

They have different networks.

The device doesn’t dictate the hardware.

All of these devices have different standards support.

There is different types of input. Mouse, touch screen, trackball, etc.

All of these devices access the web via different connections.

They all have different contexts.

there is no mobile context

The device doesn’t dictate the context.

The Coming Zombie Apocalypse

Start focusing on responsive experiences

How?

  1. Smarter defaults
  2. Contextual experiences
    • context is the key to moving from a web that responds to devices, to a web that responds to people
    • however, don’t assume context
    • We need to get all the tools we can get.
      • Don’t use server side to exclude, but include
      • use both server and client side detection – both are not fool proof

The Future

Let us not just stop with layout!

Next Steps for Responsive Design by Mat Marquis

Posted on: by

Notes at Breaking Development :focus on responsive
Minneapolis, MN
6/4/2012

The iPhone opened up pandora’s buzz word box. Now there is a large number of things we have to account for.

Calm the ‘eff down.

RWD is a set of tools, RWD is our hammer.

RWD is simply three things: A flexible grids, flexible media, media queries.

A flexible grid is important because of all of the screen sizes that are out there, the unknown, unknowns.

We start grasping for new comfort zones, but by definition, there are none anymore.

Because we base the classes on a flexible grid, we can now reuse them over and over through out the site.

Get your own damn breakpoints

Content like water concept – Josh Clark

em based media queries

Opera always treats font size as 16px, even if you reset it.

Flexible Images and Media

max-width: 100% makes an image responsive.

The problem is the media needs to be large enough that we can scale up to the largest size possible.

video tag, add media query, down side, it work basically no where.

Responsive Images Cookie based

Responsive Images: How they Almost Worked and What We Need

Shouldn’t hinge on javascript long term.

Enter the Responsive Images Community Group and the picture tag.

Similar to video tag. Uses media queries. But….

An alternative by the implementors is currently in the draft. Not really intuitive. Doesn’t really solve the issue and will still prefetch which is unwanted behavior.

A compromise is in the works. It combines items from both, but it is still in flux.

A solution for right now, picturefill

We have a layout but we are still missing something important.

Progressive Enhancement

Start with semantically rich markup, independent of css.

Basic Experience

  • basic css
    • basic typography
    • horizontal rules
    • text alignment
    • display:inline/block

Enhanced Experience

  • enhanced css
    • @font-face

Don’t have to write a single line of Javascript to make this happen.

<link rel="setylesheet" href="basic.css">
<link rel="setylesheet" href="enhanced.css" media="only all">

Must conditionally allow for IE

Same approach for Javascript.

By starting at the basics and building up, allows for sites to work across nearly all devices. All done with a handful of simple tools.

Responsive Workshop by Dave Rupert

Posted on: by

Notes at Breaking Development :focus on responsive
Minneapolis, MN
6/4/2012

Talk Slides

What is responsive design?

Responsive Web Design (RWD) consists of three things

  1. Flexible grids
    • target / context = result
    • multiplied by 100 to get a percentage
    • don’t round, let it go.
    • best practice provide formula /* 280/960 */
    • Think Proportionally
  2. Flexible media
    • max-width: 100%
  3. Media queries
    • max-width vs min-width
    • max-width
      • max-width = desktop down
      • good for first timers
      • good for “legacy” sites
      • But what about really large monitors?
    • min-width
      • Mobile first
      • start with a small base and build on it.
      • progressive enhancement, rebranded™
      • Data face: In 2011, more smartphones were sold then PC’s.

Make a responsive grid, flexible grid + media queries.

respond.js – polyfill to give IE 6,7,8 the ability to understand media queries.

Typography

  • Recommends em’s
    • rem’s are not cross browser
    • font size / base size = result
    • build off of the body font size
    • typically 16px = 100%
    • Change as needed in media queries
    • Style tiles and Style guides – page on web site that describes everything on your site.

Demo Sample code download

:nth-of-type

Icon Fonts

Responsive Videos – FitVids.js

Creating a vertical slider on a touch screen

Posted on: by

Creating an element that slide vertically on a touch screen poses a unique problem. When you touch the element, the page intercepts and moves instead of the element you want to move.

So In order to create an element that slides vertically, you have to prevent the page from sliding. Of course you only want to do this for the element you want to slide and not other areas of the page or the page won’t scroll properly.

This is how to do it using jQuery, you can do this in straight Javascript of course if you like.

The first thing we will need is an html page with some content and a block element we want to vertically slide. To demonstrate this I will create two columns. Column 1 will contain the element I want to slide, the other column will contain some paragraph tags filled with Lorem Ipsum to fill the page with enough content that it will scroll. And example page with all the code can be downloaded from Github.

I will be adding a class called .box to a div that is the block I will make vertically scrollable. Basically my first column will look like this:

<div class="c1">
    <div class="box"></div>
</div>

The first thing that I have to do is prevent the page from scrolling when I touch the box. To do this I bind an event to the box and prevent the default event from happening.

$('.box').bind('touchstart', function(event){
    // prevent the page from scrolling
    event.preventDefault();
});

The following code will move the box vertically as the finger touching it slides up and down. I have added a line of code to put the Y coordinates in the box for demonstration purposes.

// move the element vertically
$('.box').bind('touchmove', function(event){
    // get the y position of the first finger, must use originalEvent not the jQuery rewritten event
    y = event.originalEvent.touches[0].pageY;
    // this simply puts the y coordinate in the block for reference
    $('.box').text("y: " + y);

    // so the block doesn't scroll past the top of the page
    if(y>0){
        // position the block
        $('.box').css('top', y + 'px');
    }
});

One gotcha to watch for, if you attempt to get the fingers Y coordinate straight from the event object, as one would expect, you will get an error. jQuery rewrites the event object, so to get in order to get the Y coordinate of the finger you need to pull it off of the “originalEvent” object instead.

Now with a little styling, a vertical slider can easily be built.

iOS Startup Images and Icon Images

Posted on: by

This is a comprehensive list of the tags to support home screen icons and app
splash screens for regular and retina displays:

<!-- iPhone ICON -->
<link href="apple-touch-icon-57x57.png" sizes="57x57" rel="apple-touch-icon">
<!-- iPad ICON-->
<link href="apple-touch-icon-72x72.png" sizes="72x72" rel="apple-touch-icon">
<!-- iPhone (Retina) ICON-->
<link href="packaging/apple-touch-icon-114x114.png" sizes="114x114" rel="apple-touch-icon">
<!-- iPad (Retina) ICON-->
<link href="apple-touch-icon-144x144.png" sizes="144x144" rel="apple-touch-icon">

<!-- iPhone SPLASHSCREEN-->
<link href="apple-touch-startup-image-320x460.png" media="(device-width: 320px)" rel="apple-touch-startup-image">
<!-- iPhone (Retina) SPLASHSCREEN-->
<link href="apple-touch-startup-image-640x920.png" media="(device-width: 320px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">
<!-- iPad (portrait) SPLASHSCREEN-->
<link href="apple-touch-startup-image-768x1004.png" media="(device-width: 768px) and (orientation: portrait)" rel="apple-touch-startup-image">
<!-- iPad (landscape) SPLASHSCREEN-->
<link href="apple-touch-startup-image-748x1024.png" media="(device-width: 768px) and (orientation: landscape)" rel="apple-touch-startup-image">
<!-- iPad (Retina, portrait) SPLASHSCREEN-->
<link href="apple-touch-startup-image-1536x2008.png" media="(device-width: 1536px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">
<!-- iPad (Retina, landscape) SPLASHSCREEN-->
<link href="apple-touch-startup-image-1496x2048.png" media="(device-width: 1536px)  and (orientation: landscape) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">