January 2012
67 posts
Bruce Lawson’s personal site : Nesting ARIA roles →
A couple of people have asked me recently if it’s possible to nest ARIA roles. The answer: yes.
Naming Convention in CSS - Snook.ca →
My mind is on CSS quite a bit these days. At Shopify, I’m jumping into projects that already well under way. As a result, it’s been a great way to look at what I wrote in SMACSS and see how applicable it is to yet another project. (As if Yahoo! wasn’t already enough of a testing ground.)
Mac OS X Lion with CSS3 | Blog of Alessio Atzeni |... →
Hello everyone and Happy New Year to all, lately i’ve been busy and so i haven’t time to write here, i hope that by this experiment to be pardoned :). I wanted to create with only use of CSS3 the boot, the login page and finally the desktop of the Mac OS X Lion.
How to spice up your menu with CSS3 | Codrops →
Quick tip on how to spice up your menu with CSS3: add an image to every menu item and slide it out on hover.
iOS Inspired CSS3 Popups | CSSDeck →
All popups use a div with a class of popup and an unordered list. For a button list, just make the list items links. Additional classes add arrows, remove dividers and justify text.
The rise and rise of JavaScript « DanNorth.net →
I’ve been using JavaScript for a while now, but only really programming in anger with it during the last year. I’ve found it in turns frustrating and enlightening, ridiculous and brilliant. I have never felt so empowered by a language and its ecosystem, so I thought I’d take some time to write about why that is. I’m starting with a ramble through the history of JavaScript, or rather my undoubtedly...
Coding Guidelines - ACM Queue →
Computer science is both a science and an art. Its scientific aspects range from the theory of computation and algorithmic studies to code design and program architecture. Yet, when it comes time for implementation, there is a combination of artistic flare, nuanced style, and technical prowess that separates good code from great code.
Handling CSS Transitions with prepareTransition -... →
Using CSS transitions can be quite fun. But what’s not fun is when you want to transition something that needs to use display:none or visibility:hidden (or really, any non-transitionable property).
The Principles of Web API Usage | Nettuts →
Not too long ago, I wrote an article about “The Increasing Importance of APIs in Web Development.” As a follow-up, today, I’ll cover the basics of using Web APIs.
Why Apple's products are 'Designed in California'... →
Look at the back of your iPhone, or your iPad, or on the bottom of your Mac. You’ll see the following words embossed somewhere: “Designed by Apple in California. Assembled in China.” Many Americans, all the way up to the President himself, have wondered why Apple has outsourced virtually all of its manufacturing overseas. At a dinner with several top US technology executives last...
A List Apart: Articles: A Pixel Identity Crisis →
The pixel has always been the smallest unit in screen-based design. Because it’s been indivisible, it is the concrete unit of measurement among screen-based designers. The phrase “a pixel is a pixel is a pixel” has been adopted to help print designers not used to fixed-screen density understand the concept. Because of this consistency, web designers have adopted pixels over points and other units...
WebKit Scrollbars →
umbrUI - CSS3 Shadow DOM styling →
What the Heck is Shadow DOM? « Dimitri Glazkov →
Shadow DOM refers to the ability of the browser to include a subtree of DOM elements into the rendering of a document, but not into the main document DOM tree.
Use CSS transitions to link Media Queries and... →
A common problem in responsive design is the linking of CSS3’s media queries and JavaScript. For instance on a larger screen we can restyle, but it might be useful to use JavaScript and pull in different content at the same time, e.g. higher quality images. With CSS transitions, specifically their transitionEnd events, we can marry up our media queries and JavaScript perfectly,...
The new (and hopefully final) linear gradient... →
The latest Working Draft of the CSS3 Image Values and Replaced Content module was released last month, and contains some changes to the gradient syntaxes — for what you’d hope would be the last time. The updated syntaxes are a little more logical, but offer the same flexibility.
Let TweetNest Accept JSON · Avalonstar, by Bryan... →
It’s a sad reality that we’ve been living with for years now. I hit my 5 year anniversary with Twitter two days ago, yet I can only go back two weeks if I wanted to search for anything, which is obviously a limitation of the current API.
Anonymous Goes on Megaupload Revenge Spree: DoJ,... →
Anonymous has sure been quiet lately, but today’s federal bust of Megaupload riled ‘em up good: a retaliatory strike against DoJ.gov (and plenty of other foes) leaving them completely dead.
Burst Title | CSS-Tricks →
During the previews for a movie I saw recently, there was an advertisement for an Oprah-related something or another. I wasn’t paying attention because I was trying to get out my phone so I could snap a picture of it. Which I failed to do. There was these neat title screens that I thought would be fun to recreate with CSS. They looked like… well they looked like this:
Resolution Independence With SVG - Smashing Coding... →
Before diving into an example, let’s consider the state of the Web at present and where it is going. Website design has found new vigor in recent years, with the evolving technique of responsive design. And for good reason: essentially, responsive website design moves us away from the fixed-width pages we’ve grown accustomed to, replacing them with shape-shifting layouts and intelligent reflowing...
javascript - Can you explain why [[]][ []] [ []]... →
How To Work From Home Like You Mean It | Fast... →
Despite all the stories you’ve heard, the hardest part of working from home isn’t putting on pants every day.
Software Developer Productivity | All about your... →
Everyone knows the routine, get to work by 9 AM, sit in front of the computer, code all day, and head home at 5. Now, thanks to guys like Tim Ferris I have started to re-think how I work and what makes me productive as a software developer.
Get Value of CSS Rotation through JavaScript |... →
Is there a way to get the angle [through JavaScript] by which the element is rotated?
Stuff you can do with the →
The “Checkbox Hack” is where you use a connected label and checkbox input and usually some other element you are trying to control, like this:
Multiple Attribute Values | CSS-Tricks →
This element just has a data-type attribute with a value of “module accordion expand”, not three unique values “module”, “accordion” and “expand”. But let’s say we wanted to be able to select elements based on individual values like we can with class names.
Adobe-like Arrow Headers | CSS-Tricks →
Adobe has some pretty cool header bars for modules on their site:
Responsive Data Table Roundup | CSS-Tricks →
The idea of the original was to abandon the grid layout of the table and make each cell it’s own line. Each of those lines is labeled with a pseudo element. This creates a much taller table, requiring more vertical scrolling, but does not require horizontal scrolling. It’s easier to browse the data without losing context of what’s what. The downside is that you might lose the...
MPAA Calls Anti-SOPA Blackouts A →
The Motion Picture Association of America cares about you. It doesn’t want children to see boobs or hear curse words (though rampant bloodshed is cool) and it doesn’t want you to turn into a pawn of the big corporations that it says are really behind today’s blackouts at sites like Craiglist and Wikipedia, which everyone knows are both monstrous examples of corporate greed.
What It’s Really Like to Work at Google ~... →
Google. It’s one of the most common household words in today’s modern society, and yet for a company that is used by most of us essentially as an algorithm, it tends to trigger a highly emotional response when overheard. It’s a dream job for college students nearing graduation, a highly coveted invitation to lunch by friends and colleagues who work near campus, and the bane of existence for those...
Rendering: repaint, reflow/relayout, restyle /... →
Different browsers work differently, but the following diagram gives a general idea of what happens, more or less consistently across browsers, once they’ve downloaded the code for your page.
W3Fools – A W3Schools Intervention →
We are passionate about the web, learning, and craftsmanship. We want you, as web designers and developers, to be successful in your careers. We feel, though, that W3Schools is harming the community with inaccurate information. Like any other authoritative educational resource, W3Schools should both hold itself to, and be held to, the highest standards.
mir.aculo.us JavaScript with Thomas Fuchs » Blog... →
Want to know which parts of your web page are hardware accelerated on Safari or Mobile Safari? It’s easy to find out.
Performance Calendar » The new game show: →
Intrigued by Luke Smith‘s comment and also Alois Reitbauer‘s comment on the previous post about rendering I did some more testing with dynaTrace and SpeedTracer. Also prompted by this tweet, I wanted to provide an example of avoiding reflows by using document fragments as well as hiding elements with display: none. (btw, sorry that I’m slow to respond to tweets and blog comments, just too much...
Fastersite: How (not) to trigger a layout in... →
As most web developers are aware, a significant amount of a script’s running time may be spent performing DOM operations triggered by the script rather than executing the JS byte code itself. One such potentially costly operation is layout (aka reflow) — the process of constructing a render tree from a DOM tree. The larger and more complex the DOM, the more expensive this operation may...
CSS PERFORMANCE →
parislemon • Why I Hate Android →
Why do I hate Android? It’s definitely one of the questions I get asked most often these days. And most of those that don’t ask probably assume it’s because I’m an iPhone guy. People see negative take after negative take about the operating system and label me as “unreasonable” or “biased” or worse.
Why tabs are clearly superior | Lea Verou →
If you follow me on twitter or have heard one of my talks you’ll probably know I despise spaces for indentation with a passion. However, I’ve never gone into the details of my opinion on stage, and twitter isn’t really the right medium for advocacy. I always wanted to write a blog post about my take on this old debate, so here it is.
The New Web Typography →
OpenType has arrived on the web. Once-inaccessible design features such as small caps, swashes and fractions are now accessible through CSS, allowing for heightened control and extra typographic muscle.
Adactio: Journal—Months and years →
While I was in San Francisco for the last Event Apart of the year in December, Luke pulled me aside while he was preparing for his A Day Apart workshop on mobile web design. As befits the man who literally wrote the book on web forms and also wrote the the book on mobile-first design, Luke was planning to spend plenty of time covering input on mobile devices and he wanted my opinion on one of the...
Adactio: Journal—Media queries and multiple... →
By far the most common use of media queries is to execute CSS based on viewport width (using min-width or max-width). Lately there’s been more talk about using media queries based on height as well.
Auto-detecting Credit Card Type - Web Standards... →
There was a time when people thought the internet required a completely different payment method than the real world. After a very short period of time, everyone came to realize that credit cards were actually quite well-suited to the web, and so the credit card form was born. You’ve probably seen such form frequently and always with the same fields:
Performance Calendar » CSS Selector Performance... →
Great articles, like Dave Hyatt’s Writing Efficient CSS, helped developers adapt to a nascent selector matching landscape. We learned from Steve Souders (and others) that selectors match from right to left, and that certain selectors were particularly arduous to match and should best be avoided. For example, we were told that descendant selectors were slow, especially when the right-most selector...
Jehiah 11 - A Personal Annual Report →
Small teams beat large teams in software... →
I sat on a panel for a conference last year with fellow owners of “boutique” software development firms. I use the word cautiously, as I’m not completely sure what people mean by boutique in this context, but there are usually implications of small size, specialization, and expertise. One of the more engaged audience members worked for a large, multinational company which created integrated...
3 Ways To Stay Productive, Not Distracted by ZURB →
At ZURB, our workday gets packed quickly with client projects and our own projects. A tiny distraction can upset our workflow and destroy our productivity. So when we read this Inc. Magazine article on the seven things highly productive people do, it got us thinking about what distracts us throughout the day.
Vertical Media Queries & Wide Sites | Trent Walton →
I’ve been tinkering with the font-size and the media queries that trigger width-based changes for this site regularly over the past month. I thought that maxing out at 20px for body copy at widths above 900px would be my final answer, but I decided to drop in one more increase last week:
(Better) Tabs with Round Out Borders | CSS-Tricks →
A good-looking tab control usually has one feature that I’ve always found impossible to reproduce without images: borders that bend to the outside at the bottom of each tab. In this article I would like to show how you can use the CSS :before and :after pseudo elements to create this effect without using images. First, let’s start with some basic markup.
Show and Edit Style Element | CSS-Tricks →
Kind of a classic little trick for ya’ll today. You know the blocks you can put in the of your HTML to do styling? You don’t actually have to put those in your head, they can be anywhere on the page. It’s not valid (or good practice) but it works.
The scoped attribute | HTML5 Doctor →
The scoped attribute for the element allows you to include styles mid-document that targets a specific element and its children. Depending upon how you look at this, it’ll either be a godsend or a curse. Once you’ve reached the end of this article, I hope you can form your own opinion.