February 2012
48 posts
Web Dev .NET: Differences Between jQuery .bind()... →
I’ve seen quite a bit of confusion from developers about what the real differences are between the jQuery .bind(), .live(), .delegate(), and .on() methods and when they should be used.
Tantek Çelik about the importance of Web Standards... →
This is the fourth installment of Mission:Mozilla, a series of interviews that link Mozillians, the technology they produce and the Mozilla mission. This time, We’re interviewing Tantek Çelik, a long-time Web standards contributor. He started working on web standards at Microsoft in 1998, while leading the development of Tasman, the IE Mac rendering engine, and subsequently founded independent...
JavaScript on the server: Growing the Node.js... →
While we all know and love JavaScript as a language for browser-based scripting, few remember that, early on, it was destined to be used as a server-side language as well. Only about a year after JavaScript’s original release in Netscape Navigator 2.0 (1995), Netscape released Netscape Enterprise Server 2.0:
CORS for XHR in IE10 →
The fourth platform of IE10 simplifies building cross-site scenarios that work consistently across browsers by supporting Cross-Origin Resource Sharing (CORS) for XMLHttpRequest (XHR). CORS for XHR makes sharing data across sites simple and flexible. In the most basic scenario CORS enables creating data sources accessible from any site, and with a few small tweaks you can choose to constrain...
Don't Clobber The Web →
Those words have lived with me since Chris Wilson, who was on the Internet Explorer team at the time, uttered them at a Webmaster Jam Session a few years back. As much as the team wanted to tweak or improve on the standards they had set in the past (notice I didn’t say “mistakes”), they couldn’t.
Hacksugar: Live AirPlay mirroring to Mac from iOS... →
iOS developer David Stanfill of Napkin Studio has been looking for a better way to demo his iOS apps during online meetings, as well as to record live videos of the UI as the apps run. (We’ve rigged up various hardware approaches to do this, although none of them reach the highest quality standards.)
Save The Open Web: A Call To Action | @mollydotcom →
The CSS Working Group, the W3C, the browser vendors and the Open Web need you, and I really mean you ALL. The following article is written by Daniel Glazman, co-chairman of the CSS Working Group; the part until “This must not happen” represents an official discussion of the CSS Working Group and was decided by consensus in the Group. Members of the Group behind that discussion include Adobe,...
Vendor Prefixes - about to go south →
We do like vendor prefixes. They give us access to bleeding edge CSS properties, and make our sites look cool. But there’s a serious problem: non-webkit vendors are giving serious consideration to implementing the -webkit prefix to a number of CSS properties.
Vendor prefixes, the CSS WG and me →
The CSS Working Group is recently discussing the very serious problem that vendor prefixes have become. We have reached a point where browsers are seriously considering to implement -webkit- prefixes, just because authors won’t bother using anything else. This is just sad. Daniel Glazman, Christian Heilmann and others wrote about it, making very good points and hoping that authors will wake up...
Pleasure and Pain » Location Agnostic, Context... →
The most important thing that 2011 taught me about web design is that physical context of use can no longer be assumed by platform, only intentional context can. For the past couple of years, we have gotten into the habit of presuming that mobile means on-the-go, desktop denotes a desk, and tablet is on the toilet. But increasingly the lines are blurring on where devices are being used and how...
LukeW | An Event Apart: The Future of CSS →
In his The Future of CSS talk at An Event Apart in Atlanta, GA 2012 Eric Meyer shared the what new CSS specifications are under development, partially available, and can be used today. Here are my notes from his talk:
Responsive News - Fluid grids, orientation &... →
If you’ve spent any time building responsive websites with fluid grids, you will have encountered the shock of seeing your beautiful portrait layout distort when viewed in landscape mode (or vice-versa.)
Using the Battery API – Part of WebAPI ✩ Mozilla... →
Detecting battery level in a device or computer can help you inform the user of the current status. Within Mozilla’s WebAPI, we have the Battery API to offer that possibility.
Speech Bubble Arrows that Inherit Parent Color →
css3 speech bubble question: for the “triangle“‘s border color, how can I set it to whatever its parent div’s bgcolor is automagically?
Pointer Lock API Brings FPS Games to the Browser →
The Pointer Lock API recently landed in Chrome Canary and the Dev channel, all rejoice! Wait, what? You haven’t heard of the Pointer Lock API? Well, in a nutshell, the Pointer Lock API makes it possible to write proper first-person shooters for the web.
Introduction To Linux Commands - Smashing Coding |... →
At the heart of every modern Mac and Linux computer is the “terminal.” The terminal evolved from the text-based computer terminals of the 1960s and ’70s, which themselves replaced punch cards as the main way to interact with a computer. It’s also known as the command shell, or simply “shell.” Windows has one, too, but it’s called the “command prompt” and is descended from the MS-DOS of the 1980s.
Introduction To Linux Commands →
At the heart of every modern Mac and Linux computer is the “terminal.” The terminal evolved from the text-based computer terminals of the 1960s and ’70s, which themselves replaced punch cards as the main way to interact with a computer. It’s also known as the command shell, or simply “shell.” Windows has one, too, but it’s called the “command prompt” and is descended from the MS-DOS of the 1980s.
Debugging IndexedDB Applications →
IndexedDB is a W3C Working Draft that enables JavaScript developers to store, search, and retrieve data on the user’s local client, even when Internet connectivity is disabled. This blog post describes IDBExplorer, a tool we use internally to debug IndexedDB applications. IDBExplorer lets you view database schemas, object store content, and index details.
CSS3 3D Transforms in IE10 →
CSS3 features make it easier to build rich and immersive Web experiences. A recent post described how Web developers add personality to their sites with CSS3 Transitions and Animations. CSS3 3D Transforms add another dimension (literally) for developers to enhance their sites. For example, the Windows 8 Metro style Start page uses subtle 3D transforms to highlight pressed tiles, as shown...
Using the Vibration API – Part of WebAPI →
The idea with the Vibration API is to be able to give the user a notification, in a game or other use case, by telling the device to vibrate. It accesses the native vibrator and tells it how long it should vibrate.
Pure CSS3 typing animation with steps() | Lea... →
steps() is a relatively new addition to the CSS3 animations module. Instead of interpolating the values smoothly, it allows us to define the number of “frames” precisely. So I used it to create headers that have the well-known animated “typing effect”:
The Four Horsemen of JavaScript →
Taken together this means, JavaScript can be used to develop a network application and server, store and retreive data from databases, interface with third party data and services, and build a software user interface. When you consider how many Web developers are already familiar with JavaScript, the story gets even more interesting…
How to Write a Cover Letter That Employers Will... →
When you’re applying for a new job, you often have to write a cover letter to accompany your resume and serve as an introduction to who you are. These letters must be brief yet compelling so you don’t require much of the reader but still appear unique. This can be pretty tough, but if you utilize the principles of good storytelling and concise writing you can put together a letter that...
Layout paint flashing in Firefox « JAWS →
Writing efficient and responsive websites are important to providing a great user experience. Some website layouts cause inefficient rendering, hurting the experience of the users that we try so hard to please.
Reduced Test Cases | CSS-Tricks →
If you are having trouble with something while building a webpage, the most helpful thing you can possibly do is start building a reduced test case. “Trouble” could be anything: the CSS isn’t doing what you think it should, the JavaScript isn’t behaving right, there are cross-browser issues, etc. In the process of creating a reduced test case, you will either:
Browser compatibility — viewports →
Here’s the inevitable compatibility table that goes with my viewport research. It treats the viewports themselves as well as some related items.
Screen Dimensions Table →
First, Understand Your Screen « James Pearce →
I unashamedly maintain that there is so much more to being successful on the mobile web than dealing with screen size. But I do accept that dealing with screen size is at least a first step.
A List Apart: Articles: Responsive Images: How... →
It’s our job, as designers and developers, to pick apart even the seemingly most simple tasks to find ways to improve them. When Ethan Marcotte coined “responsive web design,” he said that a responsive website is made up of three things: a flexible grid, flexible images and media, and media queries. In doing so, he opened up a world of new and exciting things to obsess over. I chose flexible...
Visual Idiot · CSS3 For The Real World →
If you’re reading this, the chances are you’ve seen some of the amazing things that have been done in CSS3. Unfortunately, most of them aren’t practical for you, or your clients.
No longer, I say!
Below is a carefully-curated list of real-world examples and snippets of CSS3 that can be safely used to enhance any piece of work you create.
Annie Murphy Paul: Your Morning Routine Is Making... →
Brrriiinnng. The alarm clock buzzes in another hectic weekday morning. You leap out of bed, rush into the shower, into your clothes and out the door with barely a moment to think. A stressful commute gets your blood pressure climbing. Once at the office, you glance through the newspaper, its array of stories ranging from discouraging to depressing to tragic. With a sigh, you pour yourself a cup of...
Good Tools Have Verb-Based Interfaces |... →
I’ve switched to an iPhone as my primary mobile device because I’m dogfooding my new iOS app. Coming off of three straight years of Android, one of the toughest parts of the transition was losing the applications drawer. My new iPhone had so many screens of icons, all perfectly aligned in a grid, every one with rounded corners, all equal visual weight, nary a widget in site! I got...
Exactly how much CSS3 does your browser support? |... →
This project started as an attempt to improve dabblet and to generate data for the book chapter I’m writing for Smashing Book #3. I wanted to create a very simple/basic testsuite for CSS3 stuff so that you could hover on a e.g. CSS3 property and you got a nice browser support popup. While I didn’t achieve that (turns out BrowserScope doesn’t do that kind of thing), I still think it’s interesting...
* { box-sizing: border-box } FTW « Paul Irish →
One of my least favorite parts about layout with CSS is the relationship of width and padding. You’re busy defining widths to match your grid or general column proportions, then down the line you start to add in text, which necessitates defining padding for those boxes. And ‘lo and behold, you now are subtracting pixels from your original width so the box doesn’t expand.
From jQuery to JavaScript: A Reference | Nettuts →
Whether we like it or not, more and more developers are being introduced to the world of JavaScript through jQuery first. In many ways, these newcomers are the lucky ones. They have access to a plethora of new JavaScript APIs, which make the process of DOM traversal (something that many folks depend on jQuery for) considerably easier. Unfortunately, they don’t know about these APIs!
Negotiate the Salary You Want with the Briefcase... →
Most of us don’t negotiate—with our bosses, our clients, even our cable companies. Why? We know we’re leaving money on the table, but we’re not sure what to say. We don’t want it to be awkward. And what if they say no?
Remote-Tilt - emulate motion events →
Testing motion events was never going to be easy task. You have two options, both of which suck.
If you decide to use a mobile device equipped with an accelerometer you’ll be left stranded without your favourite debugging tools.
Alternatively, if you decide to develop on your favourite computer you will find yourself up motion event creek without an accelerometer.
That’s where...
Shadow DOM, Pointer Lock and a new CSS Lexer «... →
Web Inspector’s Timeline Panel has been extended with three graphs, all hidden behind the Experimental Settings option, showing information about objects and events in the DOM. Hovering over a function in the Script Panel may now show an overlay with general information and it’s source-code and elements within iframes are selectable again.
Hidden Gems of HTML5: classList ✩ Mozilla Hacks –... →
If you are a web developer, you surely must know how handy it is to dynamically change the class attribute on an element. The benefits this technique are quite a few:
Font-Embedding Icons the Right Way—A Legitimate... →
When I released Iconic in font format it got a lot of positive feedback. However, it had one significant technical issues that kept it from being practical. The glyphs in the font had no logical assignment to Unicode characters, making the output semantically unsound. A few months back, Philip Shaw shared a much improved method for glyph assignment which I have implemented in the current version...
How to create animated tooltips with CSS3 |... →
How to create some simple, animated tooltips using CSS transitions and the pseudo-classes :before and :after
January’s 12412: Researching LESS & SASS ::... →
My first 12412 project was to research and learn about SASS. After the recommendation from several people, I also decided to check into LESS. I’d been hearing a lot about the two techniques and was quite skeptical – in fact it seems I’m often skeptical of new things out on the web. Most frameworks, shims and other “add-on”s are only a passing faze and tend to do more harm than good – and so with...
How I shut down comment spam on this site –... →
In the past, I’ve only allowed comments on recent blog posts, not older ones. Because I didn’t blog for the longest time, I had no recent blogs posts, which meant I got no comments (or comment spam). When I re-launched JeffCroft.com recently and started writing again, I actually started getting comments again (thanks, guys!). Of course, I also started getting comment spam again. Like, a ton of it....
On CSS preprocessors – JeffCroft.com →
Over the past couple of years, I’ve become a huge fan of Sass. It’s really the only way I write css now, and frankly, if anyone tried to make me write plain ol’ css I’d probably knee them straight in the taint.
CSS3 Image Styles – Part 2 →
Previously I wrote two tutorials on how to style the image element with CSS3 inset box-shadow and border-radius. The trick is to wrap the image with a span tag and apply the image as background-image. However, I recently ran into a problem with that trick while designing the PhotoTouch theme. The issue is that the background-image is not resizable and thus it is not a good idea to use in...
Controlling Selection with CSS user-select →
IE10 Platform Preview 4 includes support for a new CSS property, -ms-user-select, which makes it easier for Web developers to control exactly what text can be selected on their Web sites. If you were to watch me all day at my workstation, you would notice that as I read on the computer, I select text. I’m not the only one who reads like this; selecting text on the Internet is important in many...
CSS Corner: Using the Whole Font →
With cross-browser support for both the CSS3 @font-face rule and the WOFF font packaging format, modern Web typography has expanded far beyond the realm of ‘Web-safe fonts.’ Well-known magazines such as the New Yorker use Web fonts to preserve the typographic personality of their headlines, while [US] President Obama’s re-election campaign uses Web font service Typekit to host their identity font.
Pink Elephants, Album Leaks, and The Industry's... →
There’s a giant pink elephant in the room. Look behind you, see him in the corner? He’s just sitting there. His name is “highly anticipated new album that just leaked on the internet.” I was recently reading this blog post about Hollywood imposing a 56-day “no rental window” on new movies - and it got me thinking about how the music industry (for the most part)...
January 2012
77 posts
Michael Wolfe's answer to Engineering Management:... →
Let’s take a hike on the coast from San Francisco to Los Angeles to visit our friends in Newport Beach. I’ll whip out my map and draw our route down the coast:
Use Your Hand to Estimate Your Portions →
When you’re staring down the barrel of a new diet, your portions are one of the most difficult things to measure and keep track of. Your kitchen scale may be great in the comfort of your home, but it’s not practical to carry with you all day. Instead, just get to know the rough estimates with your hand.