Currently Browsing: HTML/JS/CSS

Quick localized web server: python SimpleHTTPServer

This has been around for a while, but easy to forget if you need a basic web server for testing, etc., you can simply run:

python -m SimpleHTTPServer 8181

from the directory you want to be the web root, and you’re good to go. This is a built-in feature that will work on OS X and most *nix systems.

The great use case for this is when you have a folder with some files you want to test/view and there are AJAX or other features that need to run over HTTP but you don’t want to bother setting up a local test site or copying the files to existing one. Since it defaults to the folder you are in as the web root, you can also use root-relative links without a hassle. It defaults to port 8000, you can change that on the command line (as above).

Add a bash alias like alias ws="python -m SimpleHTTPServer" and then you can simply type ws from any directory to start a server.

If you need to change any other settings, see docs here

Prettify JSON output from the command line

to show formatted JSON and basic linting:
echo '{"foo": "lorem", "bar": "ipsum"}' | python -mjson.tool

POST data to simulate HTML form checkbox submission

Not sure how often this may come up, or if this is the best approach but this worked for me in this particular situation and very well might be useful in the future.

The problem was that I wanted to re-use a form model in PHP to save data that was derived via multiple sources and hence had different formats. Since the server expected a specific format: $_POST['Category'] = Array([id]=>value) , I needed to do some reprocessing client-side and use jQuery to submit via POST. (Nothing here requires jQuery, mostly using for relative brevity.)

In this example we are fetching some Category IDs from DOM elements, which are then to be used as keys when the data is saved and the value derived via a function — but have all the data saved in the single $_POST['Category'] variable.

My solution was to use a nested object and let jQuery handle the form submit like:

	var items = {};
	var fn = 'Category';
	var val = {};
	items[fn] = val;
	var item;
	$("#div.data").each(function(){
		item = $(this).val();
		items.Category[item] = myval();
	});
	function myval() {
		// get data for the value part
		return data;
	}
	$.ajax({
		type: 'POST',
		cache: false,
		url: window.location.href,
		data: items,
		success: function(data){/* callback */}
	});

An Event Apart 2011

Went to An Event Apart in DC this year and had a good time, met a lot of nice people and saw some great presentations. Nice to see the front-end developer role becoming more professionalized and really push to (continue) to make a better web.

It’s put on by the guys who do A List Apart (not surprisingly), and many of the authors of books published by the highly recommended A Book Apart participated.

One of the big themes across talks was content. How to manage it, present it, structure it, make it responsive and accessible to all. Tech-wise, there were some interesting presentations on refinements and new techniques being used in HTML5 and CSS3 and how we can be using this stuff now (again) in order to provide “progressive enhancement”.

Some notable highlights:

Andy Clarke’s presentation had more fun CSS3 animation demos – like: the-letter-heads plus some interesting thoughts on semantic markup for CSS3 animations ( view this source: view-source:http://animatable.com/demos/madmanimation/ then check out the animation )

Something you may have heard about but haven’t used yet (due to limited browser support) is Flexible Boxes see the Eric Meyer blurb on the AEA site and Google for plenty of examples. It’s something that definitely has the potential to change the approach to how we code layouts and has implications for responsive/mobile as well ( http://caniuse.com/#feat=flexbox ).

We also went to an accessibility workshop, which should be a separate internal RF workshop – we’re trying to get someone who can demo some assistive reader technologies, etc. The presenter at the conference, Derek Featherstone, is one of the leaders in accessibility, you can check out his sites for more info:
http://simplyaccessible.com/
http://furtherahead.com/

Of particular interest is how much iOS has native support for accessibility and a good way to experience a site or app is to turn on the accessibility settings like VoiceOver on iPad/iPhone and then turn on the screen curtain (triple-tap!) so you can’t cheat.

FQL query info & get Facebook friends by first letter

For example, show all friends of logged in user starting with “j”. (requires valid access token – e.g., from your app or Graph API Explorer or use the legacy fql test console):

SELECT name FROM user WHERE uid IN (SELECT uid2 FROM friend WHERE uid1=me() ) AND strpos(lower(name),"j")==0

To use as a GET request directly from FB:

https://api.facebook.com/method/fql.query?query=SELECT%20name%20FROM%20user%20WHERE%20uid%20IN%20(%20SELECT%20uid2%20FROM%20friend%20WHERE%20uid1=me()%20)%20AND%20strpos(lower(name),%22j%22)%20==0&access_token=VALID_ACCESS_TOKEN

You can call this directly as above if you have an access token, but more likely you would use the FB API, like the JS, or PHP, SDK.

FQL links:
FB FQL Reference
FB friend API reference
slideshare fql-overview

Click here to see a simple JavaScript SDK example of fql.query

FB.api(
  {
    method: 'fql.query',
    query: 'SELECT name FROM user WHERE uid=5526183'
  },
  function(response) {
    alert('Name is ' + response[0].name);
  }
);

« Previous Entries