November 8, 2011
November 4, 2011
Watch Lucy grow up. A demo of responsive design with appropriate* image serving
Responsive Web Design has been around for ages and really faces two major issues which it must overcome in order to become a standard way of developing:
- How do you only send the appropriate code to the browser? (It’s fine to set something as display:none, but it’s still downloaded, and
- How do you handle images in different sizes?
This is an attempt to show one way of using CSS3 Media Queries to serve appropriate sized images to the client.
Background: Firstly you need to make sure that Responsive Design is appropriate for your project. Sometimes you just need to make multiple sites :( however in a lot of cases you just want your existing site to be viewable & usable on different devices (read: screen resolutions).
Our responsive design is based around a set of predefined width cut points. (320, 480, 720, 960, 1200). This covers our target audience.
Our css framework is based on 320 and up, 960 grid system, html5 boilerplate and blueprint.
When we do our design we start with the smaller sizes (320, 480) then work up from there (the Mobile First design)
What this demo is about:
What we’re showing here is a way of adding images to a layout using css (specifically, using the css background property), then using a bit of jQuery to move the background image to a foreground images so that it’s properly inline (and is selectable, printable etc.)
Have a look at the demo here: http://responsivelucy.tk/
Resize your browser to see how the different images are loaded. NOte that images are always shown at 100% actual size. So if you start with a small browser size (think mobile device) then only the small image will be loaded. If you start with a big browser window (think desktop) then the larger image will be loaded.
Note that in some resolutions we just use text instead of images (have a look at the header image)
Other things to look at:
Adaptive Images: does the image resizing automatically on the server.
25 jQuery Plugins to help with Responsive Layouts. Some useful scripts here.
May 3, 2011
November 25, 2009
November 23, 2009
August 5, 2009
July 30, 2009
Processing Winamp generated .m3u playlists for the Blackberry Bold
When you use Winamp to manage the music on your Blackberry Bold you run into a problem whereby the .m3u playlists that Winamp generates include full paths instead of relative paths. I use the first of the two scripts to “process” the Winamp generated .m3u playlists on my Blackberry Bold. The second batch file will remove any orphaned empty folders.
ProcessM3U.vbs
' VB Script Document
Option Explicit
''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''
' Editable Variable - this should be the relative path from the script to the location of the .m3u files
' include the preceding and trailing \
' eg. if the script lives in f:\ and the playliosts live in f:\blackberry\music\ then use \blackberry\music\
''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''
dim filefolder : filefolder = "\blackberry\music\"
''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''
' Get list of files to process
''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''
on error resume next
dim scriptpath : scriptpath = left(WScript.ScriptFullName,(Len(WScript.ScriptFullName))-(len(WScript.ScriptName)))
dim ffile
dim fso : Set fso = CreateObject("Scripting.FileSystemObject")
dim fldr : Set fldr = fso.GetFolder(scriptpath & filefolder)
dim fc : Set fc = fldr.Files
For Each ffile in fc
If ffile.size > 0 then ' ignore empty files
if lcase(right(ffile.name, 4)) = ".m3u" then ' only process .m3u files
call processFile(filefolder, ffile.name)
end if
end if
Next
If Err.Number <> 0 Then
msgbox("ERROR: " & Err.Number & " - " & Err.Source & " - " & Err.Description)
Err.clear
end if
on error goto 0
msgbox("Completed...")
''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''
' processFile() - process file
''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''
function processFile(filefolder, filename)
processFile = true
on error resume next
dim strText
dim fs
dim textStreamObj1
Set fs = CreateObject("Scripting.FileSystemObject")
Set textStreamObj1 = fs.OpenTextFile(scriptpath & filefolder & filename, 1)
strText = textStreamObj1.ReadAll
strText = Replace(strText, filefolder, "", 1, -1, 1)
textStreamObj1.close
Set textStreamObj1 = fs.OpenTextFile(scriptpath & filefolder & filename, 2)
textStreamObj1.WriteLine strText
textStreamObj1.Close
If Err.Number <> 0 Then
msgbox("ERROR , processFile : ERROR : " & Err.Number & " - " & Err.Source & " - " & Err.Description)
Err.clear
end if
on error goto 0
end function
RemoveEmptyfolders.bat
@echo off
color c0
echo.
echo.*******************************************************************************
echo.
echo delete empty folders
echo.
echo.*******************************************************************************
echo.
cd Blackberry\Music
for /f "usebackq delims=" %%d in (`"dir /ad/b/s | sort /R"`) do rd "%%d"
echo.
echo.*******************************************************************************
echo.
echo completed
echo.
echo.*******************************************************************************
echo.
pauseJust copy and paste the code above into two files and save using the names provided (or feel free to make up your own).
Save these 2 files to the root of your memory card (for me it appears in Windows Explorer as F:\ )
Once you have finished syncing your Bold with Winamp then just run the 2 files to change the playlists into relative paths that the Blackberry will recognize and clean up any orphaned empty folders.
June 5, 2009
May 7, 2009
Mexican Rice
Ingredients
- 1 onion, finely chopped
- olive oil
- 1 1/2 cups boiling water
- 3 tablespoons chicken stock powder
- 1 tea cumin
- 4 tab tomato paste
- 1 tea hot crushed chilli
- salt and pepper
Method
- Saute the onion in a small amount of olive oil until translucent
- Add all the other ingredients and cook for approx 20 – 25 mins until rice is done.
April 16, 2009
Viewing the Google homepage in different browsers
I just happened to have both IE and Firefox open just now and noticed a subtle difference in the Google homepage in the different browsers.
Are Google saying something about my browser choice?
