February 2012
61 posts
CSS3 Generated and Replaced Content Module →
In contrast with the previous section, the selector ‘::before(2)’ represents a pseudo-element before another, both of which are contained at the start of an element.
Using CSS without HTML · Mathias Bynens →
If we could stack pseudo elements (e.g. :after:after) we could build a whole website with no HTML other than . Probably good we can’t.
Your Heirs Won’t Care About Your Crappy MP3... →
Yesterday evening, a geekier chunk of the Internet hivemind started buzzing about this article over at Which?. The author raises a few rather interesting questions: what happens to the digital downloads you’ve purchased when you die? Why are we not allowed to pass them on to our loved ones?
I can’t design in the browser | Sarah Parmenter, a... →
Designing straight into the browser isn’t an option for me though, I still need to go through that creative process in my graphics editor away from the structure of div’s and presentational code, but after getting some initial designs down on paper. Thankfully, I know I’m not alone, I’ve spoken to various others in the industry who all feel the same. Frustrated creatives with no real answers.
Understanding JavaScript OOP — Sorella's Basement →
JavaScript is an object oriented (OO) language, with its roots in the Self programming language, although it’s (sadly) designed to look like Java. This makes the language’s really powerful and sweet features stay covered by some pretty ugly and counter-intuitive work-arounds.
CSS background image hacks – Nicolas Gallagher →
Emulating background image crop, background image opacity, background transforms, and improved background positioning. A few hacks relying on CSS pseudo-elements to emulate features unavailable or not yet widely supported by modern browsers.
Microsoft's Biggest Miss →
One of the benefits of a long car trip with my wife is the opportunity to have really great and insightful conversations with the smartest person I know. Yesterday, on the first leg of our trip, we spent some time discussing Microsoft’s many missed opportunities. The failure to take the iPhone seriously. The failure to take the iPad seriously. And, on. And on…
Keyframe Animation Syntax | CSS-Tricks →
A List Apart: Articles: The Vendor Prefix... →
Eric Meyer of A List Apart, CSS wizard and fan of vendor prefixes, interviews Tantek Çelik, Mozilla’s web standards lead, on Mozilla’s controversial plan to support -webkit- prefixed properties. Tantek precipitated the current crisis in Web Standards Land during a public meeting of the W3C CSS Working Group, in which he noted the predominance of WebKit-only mobile sites, thereby creating a browser...
A List Apart: Articles: Every Time You Call a... →
Public service announcement: Every time you call a proprietary feature “CSS3,” a kitten dies. Any -webkit- feature that doesn’t exist in a specification (not even an Editor’s draft) is not CSS3. Yes, they are commonly evangelized as such, but they are not part of CSS at all. This distinction is not nitpicking. It’s important because it encourages certain vendors (*cough* Apple *cough*) to...
Browser Speed Tests: Chrome 17, Firefox 10,... →
Chrome 17 is out with a new prerendering feature designed to make your pages load faster, and both Firefox and Opera have also released speedy new versions since our last round of speed tests. So, we’ve once again pitted the four most popular web browsers against each other in a battle of startup times, tab loading times, and more, with more surprising results.
What’s new in CSS Selectors Level 4 | Shi Chuan's... →
The latest CSS Selectors Level 4 Working Draft was released on 29 September 2011. Lots of new and exciting additions in the Level 4 draft. Below is a walk-through of the new stuff in Selectors Level 4.
Everything you always wanted to know about touch... →
“Touch icons” are the favicons of mobile devices and tablets. Adding them to your web page is easy, and I’m sure you already know how this works using HTML:
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.
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:
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...
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...
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.)
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:
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.
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.
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?
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...