Tag: web development

Posted on

Location, Location, Location! Now I get it.

I’ll admit that for the longest time I didn’t get the mobile world’s fascination with location. It seemed like one of those things that mobile developers did to push ads on me while I was in a grocery store or alert people I vaguely knew to my presence in a museum. Most implementations left me feeling underwhelmed. OK, so my phone knows where I’m at. Then what?

I’m coming around on location-based tech now as I’ve been working with a bit of it for a side project I’ve got going. The light bulb came on while writing a little web app that can tell me where I am and give me some basic info about that place. Turns out that once you peel off the veneer of constant ad generation using location in web apps (and, by extension, mobile apps) is fascinating from the developers point of view. Knowing where someone is provides a hook for offering up a lot of useful data that isn’t about selling things or letting near strangers know where you are.

And it isn’t that hard to do.

A good place to start is with the Google Maps JavaScript API. The developer site provides everything you need to get going with adding interesting location-based features to your apps. I tend to use JQuery when I have to deal with JavaScript and there is an excellent demo page of JQuery Mobile integrations with the Google Maps API with many useful examples.

I’ve put together a little example page for you to try. You’ll need to give it access to your browser location data and then you’ll get some basic location information. I find it interesting that in testing the most accurate location comes from mobile devices. The location data returned by laptop and desktop browsers is a lot less accurate, seemingly giving more weight to your IP address than other factors.

 

Posted on

Replacing Native Apps With Ten CSS One-Liners Using CSS Multi-column Layout and CSS Figures

Tablets and mobile devices require us to rethink web design. Moused scrollbars will be replaced by paged gestures, and figures will float in multi-column layouts. Can this be expressed in CSS?
Paged designs, floating figures, and multi-column layout are widely used on mobile devices today. For some examples, see Flipboard, the Our Choice ebook, or Facebook Paper. These are all native apps. If we want the web to win on these devices (we do), it’s vital that designers can build these kinds of presentations using web standards. If web standards cannot express this, authors will be justified in making native apps.
Over the past years, I’ve been editing two specifications that, when combined, provide this kind of functionality: CSS Multi-column Layout and CSS Figures. I believe they are important to make sure the web remains a compelling environment for content providers.

via Ten CSS One-Liners to Replace Native Apps ∙ An A List Apart Blog Post.

These are relatively new standards and current browser implementation is still rolling. With any luck we’ll see wide adoption of the standards and a another way to build exciting websites.

Posted on

AWS Opens Access Logs for Elastic Load Balancers

Today we are giving you additional insight into the operation of your Elastic Load Balancers with the addition of an access log feature. After you enable and configure this feature for an Elastic Load Balancer, log files will be delivered to the Amazon S3 bucket of your choice. The log files contain information about each HTTP and TCP request processed by the load balancer.

via Amazon Web Services Blog: Access Logs for Elastic Load Balancers.

This has been a long time coming but it is a welcome development. I’m looking forward to plowing through those access logs and running my own analysis on them.

Posted on

Use Google App Engine For Quick Static Web Page Hosting

Sometimes I’m looking for a quick way to take a look at some new static design pages or prototype and I don’t want to go through the hassle of setting something up on regular hosting. I’ve typically done that sort of thing locally, but that doesn’t help if I want to share or get feed back on something. Free Static Page Hosting on Google App Engine in 5 minutes shows how to get a static site up and running on Google App Engine.

I had thought of Google App Engine as a platform to deploy sophisticated Python, Java, or Go apps, but it can handle static HTML just fine. The article describes the steps needed and uses the Python SDK but I tested the same steps using the PHP SDK and it worked fine.

You should visit the Google App Engine site to get all the details for using the platform. For hosting a few static pages it’s free.

Posted on

List of Standard HTML 5 Elements

All standard HTML5 elements are listed here, described by their opening tag and grouped by function. Contrary to the HTML Element index which lists all possible tags, standard, non-standard, valid, obsolete or deprecated ones, this list only the valid HTML5 elements. Only the elements listed here should be used in new Web sites.

The symbol This element was added as part of HTML5 indicates that the element was added in HTML5. Note that other elements listed here may have been modified or extended in their meaning by the HTML5 specification.

via HTML5 element list – Web developer guide | MDN.

Good list of standard HTML 5 elements, maintained by the folks at Mozilla.

Posted on

Coder: Learn to Code in a Web Browser With This Version of Raspberry Pi

Coder is a free, open source project that turns a Raspberry Pi into a simple platform that educators and parents can use to teach the basics of building for the web. New coders can craft small projects in HTML, CSS, and Javascript, right from the web browser.

via Coder for Raspberry Pi.

Just watching the video below is enough to make you want to get coding. This is yet another example of how the Raspberry Pi can change our relationship with computers.

Posted on

Intention.js Allows You To Restructure HTML In Response To Just About Anything

Intention.js offers a light-weight and clear way to dynamically restructure HTML in a responsive manner.

Easily increase layout options and flexibility, reducing development time and lessening the necessity of media-query-driven stylesheet overrides.

via intention.js.

Very interesting JavaScript library that promises to provide developers with tools to dynamically restructure HTML on a page based upon the context that the page is opened in. Built in are the responses to device contexts that allow you to swap out assets and HTML based upon screen size. The really interesting thing is that you can extend it to respond to other contexts, like time of day, touch capabilities, and more.

Intention.js requires jQuery and Underscore.js to work.

Posted on

Add Encryption toYour Web App With The Stanford Javascript Crypto Library

The Stanford Javascript Crypto Library (hosted here on Stanford’s server or here on GitHub) is a project by the Stanford Computer Security Lab to build a secure, powerful, fast, small, easy-to-use, cross-browser library for cryptography in Javascript.

via Stanford Javascript Crypto Library.

This looks like a great way to add encryption to web apps. Found out about it from Dave Winer’s mention of it in his announcement about the addition of encryption to Fargo. Seems like something that will be of use as I look into things like annotation schemes for ebooks and the Free Law Reporter. May also be of use for things like A2J Author as it moves to a browser based editor.

 

Posted on

GitHub Now Renders CSV and TSV Files As Tables

When viewed, any .csv or .tsv file committed to a GitHub repository automatically renders as an interactive table, complete with headers and row numbering. By default, we’ll always assume the first row is your header row.
You can link to a particular row by clicking the row number, or select multiple rows by holding down the shift key. Just copy the URL and send it to a friend.

via Rendering CSV and TSV data · GitHub Help.

This means that GitHub can now be used to share data sets in a meaningful manner. All you need to do is commit a .csv or .tsv file to your GitHub repo and visitors will see the data a searchable interactive table.