Min-width: A Responsive Web Designer’s Best Friend

Mobile first development is a hard concept to grasp if you’ve been doing web development for a number of years and are used to developing websites for a desktop screen.

If you have started to design websites with more than one device size in mind, then chances are you have dabbled with media queries to some extent. Most likely using the max-width media query.

@media screen and (max-width: 840px) {
  p {
    font-size: 2em;
  }
}

This method is good for taking a desktop optimized site design and making it mobile or tablet friendly. However, this will result in rewriting entire style sets to make the desktop ‘version’ look great on mobile.

Min-width is your new best friend

There is a better way. Start your development and design with mobile first in mind. This probably isn’t the first time you heard this mantra (I also recommend reading Mobile First by Luke Wroblewski). Consider the mobile styles as your base style set, then add to those styles using min-width. This will save you time in the long run, even though it may take you awhile to get used to crafting your CSS with mobile styles as your base styles.

Continue reading

Readmill API Authentication with oAuth using PHP

Introduction

I started using Readmill on my iPad 3 months ago and have been in love with the app/service ever since.
The minimalist reader makes it very easy to dive right into the book you are reading at the moment. As well as quickly switch in an out of other books in your library. And the social interaction and highlighting features with other Readmillers is quite excellent. You can even import your Kindle library into your Readmill library.

Enough about how awesome Readmill is; check it out if you do a lot of reading on your device. It is definitely worth your time. You’ll love it. It has replaced the Kindle App for me, which is a big deal.

I decided to dive into the Readmill API to see if I could create a web app. However, I was not able to find any PHP flavored examples out there. So I put together an example for anyone looking to do Readmill API oAuth connections using PHP. Here is a link to the  gist.

Continue reading

In The Year 9999 A.D.

Late last night I was working on a new database and entering a default value for an effective end date field, and I thought to myself; “What would it be like in the year 9999 A.D.?”

Why was I entering a default date of 9999-99-99, you ask? Because it is the largest possible value for a date data type and ensures that date will never occur, at least while the database I’m creating exists, hence; the data set will always be “effective”. I won’t go into further technical details on why 9999-99-99 was chosen… let’s continue with this mental exercise.

Continue reading

jQuery Autocomplete Using XML as Data Source

Update (11/30/2012): added a new demo that only searching the beginning terms of the autocomplete source.

Update: added a new demo for autocomplete for two fields in a form.

Introduction

The following article will describe how to use an XML file as a Data Source for the jQuery Autocomplete plugin.

The jQuery Autocomplete Plugin documentation is lacking on examples, or details, on how to use an XML file as the data source. So this is my attempt to provide a simple example of how to use XML with the Autocomplete Plugin.

The plugin can take an array of strings, so we need to develop code to read the XML file into memory and parse its contents into an array of strings. Once we have an array of strings, we can assign that array to the autocomplete plugin and attach that to a text field in our form. The following will step through that process.

Continue reading