This is a different take on Responsive Web design. This article discusses how we can better embrace what the Web is about by ignoring the big elephant in the room; that is, how we can rely on media queries and breakpoints without any concern for devices.

Continuing the Chrome extension hacking (see part 1 and 2), this time I'd like to draw you attention to the oh-so-popular AdBlock extension. It has over a million users, is being actively maintained and is a piece of a great software (heck, even I use it!). However - due to how Chrome extensions work in general it is still relatively easy to bypass it and display some ads. Let me describe two distinct vulnerabilities I've discovered. They are both exploitable in the newest 2.5.22 version.

Many people have an interest in building websites that take advantage of AJAX principles, while still being accessible to search engines. This is an important issue that I've written about before in a (now obsolete) post from 2010. The tactic I shared then has been superseded by new technologies, so it's time to write the update.

It'll turn most URLs into a Full-Text XML feed that's easy to integrate into Applications. For example, I've built this demo Bookmarklet App:

The goal of a reset stylesheet is to reduce browser inconsistencies in things like default line heights, margins and font sizes of headings, and so on. The general reasoning behind this was discussed in a May 2007 post, if you're interested. Reset styles quite often appear in CSS frameworks, and the original "meyerweb reset" found its way into Blueprint, among others.

The reset styles given here are intentionally very generic. There isn't any default color or background set for the body element, for example. I don't particularly recommend that you just use this in its unaltered state in your own projects. It should be tweaked, edited, extended, and otherwise tuned to match your specific reset baseline. Fill in your preferred colors for the page, links, and so on.

In other words, this is a starting point, not a self-contained black box of no-touchiness.

If you want to use my reset styles, then feel free! It's all explicitly in the public domain (I have to formally say that or else people ask me about licensing). You can grab a copy of the file to use and tweak as fits you best. If you're more of the copy-and-paste type, or just want an in-page preview of what you'll be getting, here it is.

Personalize Your Site for Each Visitor. visitor.js is a small piece of JavaScript that provides you with information on your site's visitors, so you can target them with custom-tailored content

The number of people browsing the Web from a mobile device has more than tripled since 2009, and it is sure to continue growing, with browser platforms such as iOS and Android offering mobile browser support that is almost identical to what we have come to expect from a desktop experience. As the mobile consumer market continues to grow, so will the aspirations of individuals and companies who look to embrace what the mobile Web has to offer.

If you read blogs that are even slightly related to tech, you likely hear about HTML5 on a near-weekly basis. Although the new web standard does not do your laundry, it has features that enable the creation of powerful applications—using only HTML, CSS and JavaScript (a Rails back-end can bring additional firepower to the table). This post will go over some key concepts and features of HTML5, setting the stage for more advanced subjects.

Leaflet is a modern, lightweight BSD-licensed JavaScript library for making tile-based interactive maps for both desktop and mobile web browsers, developed by CloudMade to form the core of its next generation JavaScript API.

It is built from the ground up to work efficiently and smoothly on both platforms, utilizing cutting-edge technologies included in HTML5. Its top priorities are usability, performance, small size, A-grade browser support, flexibility and easy to use API. The OOP-based code of the library is designed to be modular, extensible and very easy to understand. Find out more on the features page.

Being an open data geek, I looked for an API. Finding none, I decided to make one. To do this, I:

Used the “Export to Excel” function to download the whole dataset.
Cleaned it up in Google Refine; normalized some fields, geocoded some records, added a geojson fields.
Uploaded it to a free couchdb instance.
Added the open source geocouch-utils CouchApp (which gives you a nice map out of the box).

Lyza and I entitled the second chapter of our forthcoming book “Mobile First Responsive Web Design (RWD)”. Because this is a Head First book, we can’t simply explain the theory of Mobile First RWD. We have to teach our readers how to do it.

Ideally by the end of this post you’ll have a better idea why you might choose one type of grid over another for a particular project.

Lately I was having the “fun” of customizing a website for showing up nicely on the browser, but also on the iPhone / iPod Touch as well. I wanted to do this job without supporting completely new views or html for the mobile device. The solution was, to do some tight customizing of the css-files, in order to show custom portions of content on regular browsers or on the mobile phone. One thing that helps is thinking css-class-definitions just like objects you know from OOP (object orientated programming). Each class got it’s properties, and you can select to show them or not, depending on the device, that is browsing the site. A little bit like adding informed behavior to your plain old html, depending on the browser, that visits the site.

You need a jQuery contact form for your website but don’t know how to create one? Please read along and maybe you’ll get lucky. A contact form is very helpful in giving your visitors a way to contact you. In this tutorial, I will help you on how to create your own jQuery contact form using PHP and JQuery.

I get it, you want to learn how to program and how to be a hacker, fine let’s do this. It sounds tough but you’ll want to learn two languages for your first time: Ruby and Python. They are similar in syntax and usage cases so this shouldn’t be a big problem. Pick up the basics, the syntax, and the community standards of each. Understand that each has it’s own power and use as well as problems. Read these two books front to back for as long as they interest you, they’re made for beginners so don’t be afraid!

Local DB placeholder.

Get data from websites in structured form (scraping).

In his CSS3 Anarchist’s Cookbook presentation at An Event Apart in Boston, MA 2011 Eric Meyer showcased how CSS rules can be used to drastically alter the experience of a Web site.