はてなブックマーク

Laying out events on a calendar can be somewhat tricky. Many years ago, I had a client project where I needed to do a calendar similar to Google Calendar. I ended up using bitwise operators to figure out if there was room to put an event on a particular line. If there’s no room, it placed the event on the next available line. There’s a lot of looping involved just to place an event on the calendar

Dave Rupert recently tweeted asking a question that I see quite often: .some-context .thing { /* special rules and overrides */ } Does that go in thing.css or some-context.css? Then, Harry Roberts discussed this concept further in his article of CSS Code Smells Revisited. Harry uses a practical example of .thing being a .button. (Well, actually, a .btn but whatever. And yes, I just “well, actualli

I find it interesting when two (or more) people can say something but the way that something is interpreted can be quite different. Nearly four years ago, Harry Roberts wrote about applying the single responsibility principle to CSS. Within the article, Harry explains how defining too many properties on a class selector may make it difficult to re-use that class in other contexts, thereby requirin

Dealing with CSS performance can be quite interesting. Various factors, like what properties we use, can have detrimental effects on the usability of a page. I noticed that my site, as simple as it is, was having a bit of an issue with the fixed background that I’ve had. The scroll performance just wasn’t as smooth as I wanted it to be. I don’t remember this ever being an issue when I first built

As of late, I’ve been thinking about icons and type. Here’s the example HTML I’m working with here: <div><i class="icon"></i>cases</div> Now, that div could be a button, it could be anything. That i could be an image, it could be an svg. Essentially, it’s something that is icon-like, set to display: inline-block. My goal is to center it next to the text beside it. Let’s take a look at this first e

At Shopify, we’re rebuilding much of our front-end code for Shopify Admin. This is giving us the opportunity to re-evaluate why and how we build things. One of the first components that we decided to work on was the grid. 24 Column GridShopify has, for at least the last two and a half years that I’ve worked there, a 24 column, percentage-based grid. This type of grid is quite common in the industr

I came across Brad Frost's post about the Floated Label Pattern and instantly thought, "I think you can do this in CSS" and set out to prove it. It turned out to be a little trickier than expected but I created a quick proof of concept: The Example How it works I use the :valid pseudo class along with the pattern attribute on the input to style the associated label accordingly. .field { position:r

After reading Thomas Fuchs’ post, 5 rules to sell thousands of copies of your ebook, and the ensuing Twitter discussion, I decided to share my thoughts on selling my book, SMACSS, on Amazon. Had you asked me before I wrote this post whether I would sell on Amazon again, I’d have flat out said no. Having researched and compiled numbers for this post, now I’m not so sure. Let’s dive in to see why. S

Harry Brundage, a co-worker of mine at Shopify, does a lot of CoffeeScript development and said he would love to be able to do CoffeeScript right from the console in Chrome's Web Inspector. I asked Paul Irish, a "dev relations guy" at Google, to point me in the right direction on building just such a thing. The result of today's pet project is CoffeeConsole, a Chrome extension that adds a new pane

I was making a change to a page that needed to pull from a remote API and make changes to various parts of the page. Sounds like the time to pull out jQuery and Ajax, doesn't it? Instead, I just used old fashioned JavaScript. Actually, I used new fashioned JavaScript. Browsers haven't stood still in the advent of libraries and frameworks. As a result, we can take advantage of those features when w

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.) With Yahoo!, I (and a team of people) were writing the CSS from scratch and creating our mental map of the proj

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). For example, let's say you have a dialog. When the user clicks on the close button, you want the dialog to fade out — a simple transition from opacity:1 to opacity:0. The problem is that the element is

CSS3 introduces a few new units. (Oh wait, I've said that before.) So, you've heard about px, pt, em, and the fancy new rem. Let's look at a couple more: vw and vh. Often times, there are certain elements within our design that we'd like to ensure can fit into the viewport in their entirety. Normally, we'd have to use JavaScript to do this. Check the size of the viewport and then resize any elemen

After reading Dave Shea's article on CSS Sprites using jQuery to produce animation effects, I felt like playing around with things to see what could be done but accomplish it with a simpler HTML structure (no need for adding superfluous tags) and simpler code, too. Changing the position of the background image felt to be the best approach to creating the type of effect we're looking for (and I'm n

Determining a unit of measurement to size our text can be a topic of heated debate, even in this day and age. Unfortunately, there are still various pros and cons that make the various techniques less desirable. It's just a matter of which less-desirable is most desirable. There are two main techniques that are extolled: Size with px Size with em Let's review these two approaches before I reveal t

For years now, we've used a number of techniques for hiding content offscreen for accessibility purposes. We do this because the content is still accessible to screenreaders while being removed from the interface for sighted users. An article over at Adaptive Themes reviews a number of techniques for hiding content that were considered for inclusion on a Drupal 7 project (but certainly applicable

On a seemingly regular basis, I see this discussion come up as to whether CSS should have a particular feature like the parent selector and while I haven't worked on a browser engine, I have my theories. In short: performance. How CSS gets evaluated With work, I've had to do quite a bit of examination of performance. We run a number of tools over an application to determine where the bottlenecks a

Simplest jQuery Slideshow Check out the blog post. More Simple jQuery Slideshow: Random More Simple jQuery Slideshow: With Links More Simple jQuery Slideshow: Multiple Slideshows

A friend was looking at doing a simple slideshow. The requirements were very straightforward: No animation controls. eg: play, stop. Images should cross-fade. Her instinct was to find an existing jQuery plug-in and revise it to work to her needs. That would seem simple enough but if you do a search for jQuery slideshows, you'll find that there are plenty of them and they are filled with plenty of

Once again, after reading somebody else's article, I felt inspired to put together an alternative example. In this case: Text Rotation. Within the article I linked to, the example uses an image sprite and a sprinkle of CSS to get things positioned right. Well, maybe not so much a sprinkle. It's like the top fell off the pepper shaker and you've suddenly got a large pile of pepper on your food. It

The Module Pattern is the use of closures to create, in essence, private functions that are only accessible by other functions created within that closure. Functions can be attached to an object and returned outside of that function call. This establishes a public API and only the functions defined within that public API will have access to those hidden functions. The YUI blog documents this well

The idea behind this melds table-based layout concepts with a pseudo-absolute positioning system. The core of this is to allow elements to be positioned within a positioned container (absolute, relative, fixed, or matrix). This document is split up into three sections: Basic Syntax describes how to write CSS for matrix-based layouts. Examples describes how matrix layouts behave. This is a technica

jQuery Background Position Example 0: No Script Home About Contact Example A: Top down Home About Contact Example B: Right left Home About Contact Example C: Fade 1-colour Home About Contact Example D: Fade 2-colour Home About Contact

After reading Dave Shea's article on CSS Sprites using jQuery to produce animation effects, I felt like playing around with things to see what could be done but accomplish it with a simpler HTML structure (no need for adding superfluous tags) and simpler code, too. Changing the position of the background image felt to be the best approach to creating the type of effect we're looking for (and I'm n

Most contact forms take a name and feedback from a user and mail it off to the administrator but don't store any information in the database. This tutorial will show how to use CakePHP's models, even when no table is being used. CakePHP is great in that you set up a database table, define an empty class file for the Model and suddenly you're halfway there. The Form helper can automatically display