S E R V E R   S I D E
View current page
...more recent posts

Image Picker is a jQuery plugin that transforms a select element into an interface for visually selecting images.
- jim 1-09-2013 5:40 pm [link] [add a comment]

Web fonts are something that is undergoing explosive change. A couple of years ago you basically had no choice. You had to use a font which would be installed on all computers by default, and the set of such fonts was extremely small (Helvetica, Georgia, Arial, Times, ect...) These days, with some caveats, it's possible to load fonts along with your page, freeing the designer to use specimens that are not already installed on the browser's computer.

The now standard (but not necessarily without peril across browsers and platforms) @font-face CSS rule allows anyone to embed their own fonts into web pages. Paul Irish has an in depth look at the issues and offers a bunch of work arounds for common problems. But beyond even these technical issues (due mostly to browser differences) there is the issue of most high quality fonts aren't licensed for use like this. (i.e., just because you own a bunch of great adobe fonts doesn't mean you are allowed to embed them in web sites you make.)

Typekit is an Adobe web service that allows you to choose from a huge selection of fonts. Fonts are downloaded to the browser from the Typekit servers. It's not free, but it's reasonably cheap ($50 - $100 per year depending on usage), and the quality is very high. And you don't have to worry about licensing issues.

Google Web Fonts is a similar service. The quality is probably not as high (there are lots of fonts in the collection without bold and italic versions, plus lots of just bad fonts since anyone can contribute to the collection), but it's free, and the fonts are all legal to use. I used GWF on the Louis/Dressner site (metrophobic for most of the text.) Some people have collected what they consider just the "good" Google web fonts so you don't have to wade through all the chaff in Google's directory. For instance: Better Google Web Fonts.

Some type foundries have free downloadable fonts. Prime, from Font Fabric, is one I want to remember for an upcoming project.

There are issues, but I think it's usable. And it's great to see some variation in fonts on the web.

Still, if you want to stick with the old way (using only fonts already available on the browser's computer), there well may be a bit more variation in what is possible then what is commonly assumed. CSS Font Stack is a nice collection of font stacks that should be reasonably safe to use. (We say "stack" because you can specify several different fonts for each use, and any particular browser will try to use the first specified, but if it isn't installed on the computer it will try the next font specified, and then the next.)

- jim 1-08-2013 3:23 pm [link] [1 comment]

Obviously I haven't been blogging here in quite some time. I think that is going to change, and the changes I've gone through professionally, which I think largely mirror trends in the industry in general, should become clear.

I used to be proficient on the "server side" of the web equation (hence the blog title), meaning I mostly focused on the server: linux admin, Apache, MySQL, PHP (plus email, dns, and everything else that happens on the server.) I still do all that, but things don't change very much or very quickly inside that technology stack. The other side of the equation is the stuff that happens on the client side (i.e., in the browser.) Way back in the day this didn't matter much. The web browser just rendered the HTML encoded web pages that you sent it. Javascript existed, but you couldn't really count on any particular client having it enabled. But times have changed.

Nowadays, for most websites, a ton of stuff happens in the browser. Instead of just sending already baked HTML to the browser for it to render into a web page, you send it some HTML, along with programming code which is then executed in the browser in order to complete the HTML page. The programming code is written in javascript, which all browsers can execute, and which you can count on clients not having turned off (since so little of the web would work if you tried to surf without javascript enabled.) This results in the kind of interactive web pages we have all become accustomed to. You can click on interface elements on a page, and things happen (menus open, new content is fetched from distant servers, slide shows launch, etc...) without having to reload the whole page from the server. Going from a web of static pages to a web of dynamic interactive pages is largely the result of moving code from the server side to the client side of the equation. Web sites become less like "pages" of content and more like traditional desktop "applications".

HTML5 is a not very strictly defined term used to cover a lot of this new(-ish) technology. It means not only the latest version of the HTML standard (the latest HTML tags you can use to mark up the content of your pages thus creating the visual layout,) but also CSS for styling (fonts, colors, etc., and increasingly animations,) and javascript. HTML5 is sort of the catchall term for the technologies underlying this transition from static web pages to dynamic web apps. (Yeah, of course, this is a quick post and not completely accurate, but hopefully gets the general flavor.)

In any case, if I succeed in starting up the blog again, most of the posts are going to be about the client side. Especially Jquery which is (again, not completely accurate, but for our purposes...) a dialect of javascript that makes it easy to write javascript code that works the same in all browsers. I doubt this will all be very interesting. Mainly it will just be a place for me to put links which I think I might need at a later time. But occasionally I'll try to say something more high level about the state of the web and possible futures I see.
- jim 1-07-2013 5:54 pm [link] [1 comment]

TideSDK looks incredible: "Create multi-platform desktop apps with HTML5, CSS3 and JavaScript" (and PHP, Python, or Ruby.) Can't wait to dig into this.
- jim 12-20-2012 2:36 pm [link] [6 comments]

Could have used this years ago, but at least I know about it now: mod_xsendfile

mod_xsendfile is a small Apache2 module that processes X-SENDFILE headers registered by the original output handler.

If it encounters the presence of such header it will discard all output and send the file specified by that header instead using Apache internals including all optimizations like caching-headers and sendfile or mmap if configured.

It is useful for processing script-output of e.g. php, perl or any cgi.

- jim 9-15-2011 8:22 pm [link] [add a comment]

HTML email boilerplate. Should probably incorporate this.

- jim 6-08-2011 5:58 pm [link] [add a comment]

Maybe I should change the name of this blog to WOW and then start every post with wow.

Wow. HTML5 bookmarkable infinite scroll example. Infinite scroll itself is cool, although it's not terribly new - basically instead of forward and back buttons (or previous and next) to page through content (like a blog), infinite scroll just loads new content in the background using asynchronous calls to the server as you scroll. So, for instance, as you get close to the bottom of the page some javascript calls the server, asks for more posts, and then they magically appear so you can keep scrolling. This way you can read a whole blog on one page, but you don't have to load the whole thing in at once (and you don't have to load a ton of content yo don't need in the case that you don't scroll all the way back which would probably be the usual case).

The cool thing in the example here is the use of the HTML5 History API - specifically replaceState - so that the URL changes as you scroll, thus making any point on the infinite page bookmarkable.

- jim 5-31-2011 10:04 pm [link] [1 comment]

Wow. Hype is a key frame based animation creation program that outputs pure HTML5 and javascript. My mind is blown. Check out the gallery of examples.

- jim 5-22-2011 4:58 pm [link] [3 comments]

Just received an Eye-Fi Pro X2 SD card for the new camera. The Eye-Fi card has Wi-Fi along with 8GB of storage. Totally cool. At home if I shoot pictures they are automatically uploaded to my computer as I shoot. Away from my computer I can upload straight from the camera through any open Wi-Fi network to a whole bunch of photo sharing sites (flickr, picasa, etc...) plus there is support for FTP so you could send them to any server on the internet (although, to be geeky about it: FTP? Really? Holy outdated insecure protocols.) And evidently there are free apps so that I can upload directly to iPhone and iPad (and Android too.)

Packaging and set up are very nice and straight forward. Great product so far! Highly recommended.

I first blogged about this tech way back in April 2006. Took them a long time to come to market, and me a long time to get on board. Here we are 5 years later and my mind is still blown. How did they get Wi-Fi in that tiny package?
- jim 5-03-2011 9:03 pm [link] [3 comments]

Facebook's Open Compute Project. Basically, they've put all their custom server and datacenter specifications on line for anyone to use. Very impressive.
- jim 4-08-2011 1:13 am [link] [6 comments]

older posts...