Responsive images with srcset and sizes

Standard

Eric Portis has written the best tutorial/explanation I’ve seen yet on implementing responsive images. I gave up on making responsive images when working on my portfolio because I couldn’t find consistent and understandable best practices. Now I may go back and try it again.

The key takeaway is that you declare the format of the image with srcset and then use the sizes attribute as the media query.

The tutorial: Srcset and sizes

A quick reference example:

Little known but nifty css

Standard

Documenting some of my latest finds in CSS.

Icon fonts and [] attribute selector
Used icomoon.io today to create fonts from svg files. It was really easy to implement too! 2 CSS rules: one @font-face to embed and one [data-icon]:before to place content. Note the way to select by attribute. This is ie8+ compatible!

attr() value
Did you know you can set the property in CSS to an attribute’s value? That one blew mind! So, you can do something like, :before{ content: attr(data-icon); }. Paired with an icon font, you can get some crazy cool values! ie8+
http://davidwalsh.name/css-content-attr

Counters
You can display and increment numbers next to anything using css counters. Why would this be good?  Well imagine you need to have incrementing numbers across multiple types of elements and you’d rather not use an ol… Say rows in a table. Well now you can. Plus ie8+ compatible!
http://davidwalsh.name/css-counters

CSS tutorial: Create text bubbles that resize & truncate text

Standard

Dealing with dynamic text can be particularly troublesome for designers especially when there is no min/max length. Truncation is nice for large amounts of text but doesn’t apply to inline elements that scale nicely for small amounts. Well, proof of concept time.

Play with the sample code

flexible-textbubbles

So, as a web developer, have you ever been asked to add a text bubble to your page?

No problem. Super lazy way would be to cut a background image. A better, less lazy way would be to add a little border-radius here, and and some padding and you’re done.

Did your designer ask for the width of the bubble to be dependent on the dynamic text?

Sure, put the background color on a span so that width is based on the text.

Oh, did she mention that the text needs to also truncate nicely when it becomes longer than the content area?

… shit.

The trick here is the have two nested elements. One inline, and one block.

  • inline elements (like spans) get their width based on the content. Thus add the background color to the inline element.
  • block elements (like divs) have a fixed width and thus can also have overflow properties.

A few things to note

  • Need to hide the overflow and set the ellipsis for the text. (Line 6)
    overflow: hidden;
    text-overflow: ellipsis;
  • Need to prevent line wrapping. (line 17)
    white-space: nowrap;
  • Need to add the same border radius on both containers. This way the border is applied when both short and when cropped long.
  • The pointy is a css pointy as shown here.

Play with the sample code

Code Corner

Standard

New thing I learned today: text-overflow: elipsis and rem units

You can truncate a line of text with an elipses (or other string) at the end.

Doesn’t work for multi-line text blocks. Browser limited to firefox 7+.

text-overflow: elipsis;
white-space: nowrap;
overflow: hidden;

You can also use rem for units instead of ems

Reference: Jonathan Snook

html { font-size: 62.5%; } /* bases font size = 10px */
body { font-size: 14px; font-size: 1.4rem; } /* 14px */
h1 { font-size: 24px; font-size: 2.4rem; } /* 24px */

On WebSQL, mobile programming

Standard

Been experimenting with Phonegap, but I’ve run into some major struggles with WebSQL and specifically the craziness of clear tutorials/documentation on it. I spent over an hour not knowing why AUTO_INCREMENT wasn’t working before learning that the WebSQL version of that function is AUTOINCREMENT (one word). FYI, there’s several versions of SQL, so search for your specific use case if stuck on syntax errors. Props to twoHard blog for solving that one.

I also want to point out 2 books that have helped tremendously as I learn Javascript and PhoneGap:

 

Sifteo Cubes: Notes on Developing

Standard

Warning Sifteo cube development is still very ALPHA. And as usual, Documention is sparse/erratic. Here’s my personal notes trying to “get started”.

  • Need to download Sifteo’s developer’s kit, SiftDev SDK. It includes:
    • 6 Demo projects, with some brief documentation on features used
    • SiftDev, a developer’s version of Siftrunner
    • Siftulator (A cube simulator – kinda broken!)
  • Download & install the MonoDevelop (the IDE that your use to compiles/runs the apps)

Running the demos:

  1. Open up the MonoDevelop app.
  2. Open up the .sln project.  File > Open Project > … navigate to the demo folder and find the demo you want to run
  3. Fix the broken project references.
    • Project > Edit references
    • Delete the reference to Sifteo
    • Find the Sifteo.dll file by navigating to the Sifteo_SDK/Siftdev.app/Contents/Resources/Runtimes/Mono/Current/Sifteo.dll
    • Click Add, and it will appear in the right pane.
    • Hit OK to apply changes
  4. Run the code. Menu Run > Run
  5. Open up the SiftDev app.
  6. Connect/pair your cubes
  7. Load the app by going to the Developer menu > load apps… > Select the folder of the demo
  8. Click on the app and hit Play!,

PS: I’m running Mac 10.6.8, SiftDev 1.1.2, MonoDevelop 2.8.6.5, Siftulator 00_05_09

Mobile app – part 2

Standard

Ok- so after going to a phonegap SF meetup tonight– I got super excited and needed to get something done tonight. I needed to get something small done since I only had about 3 hours.

Goal: Generate & show QR code on iphone simulator

  1. Started by following this tutorial on embedding a map:
  2. At first I couldn’t click on links or view external images. Was baffled until I noticed errors on bottom panel.
  3. Next I gutted the code to just show a url of an image.
    • Google has a nifty qr code generator. Based on the url, google will return a qr png image.
    • function run() { var url = “https://chart.googleapis.com/chart?chs=150×150&cht=qr&chl=Hiya”; document.getElementById(‘map’).setAttribute(‘src’,url); }
  4. And that’s it! Run and done!

Next up: Reading QR codes…

Seems like there’s 2 main phonegap iphone plugins: ZXing and ZBar. I need to read up on both.

Edit- Ok I lied- I got bored and decided to add a form submission to change the qr image. I used jquery mobile to get the quick and dirty styling. ~1hr (’cause I forgot how to handle forms)