I’m not really sure who officially started it, but it seems that Pinterest made it famous. I’m talking about the current trendy grid/masonry layout that everyone seems to love.
Well, I’m officially declaring it an anti-usability pattern that has fewer advantages than we think. The websites that quickly come to mind that are using this design pattern include:
The team at Smashing Magazine have come a long way. I’m sure many of us remember how they broke ground, paving the way for so many copycat websites. While they still have a place in their hearts for the occasional “round-up” post, they are now focused on publishing the best web design and development related content in the world.
In my opinion, now that they have branched out into print publishing and have drastically improved their review and screening process for authors and articles, I think they have overtaken the previous industry leaders and are now the #1 web development resource in the world. That’s not taking anything away from publishers like A List Apart, SitePoint, or others; those organizations have their niche, and they will continue to be big. But Smashing Magazine has, in my opinion, surpassed them all.
Sometime over the past week, my Windows 7 machine did some updates that, amazingly, included an auto-update of IE10 to IE11. This is great news. This is the first time I’ve heard of any version of IE being pushed out automatically as a “critical” update (which I assume is what it did, since I don’t ever do the optional updates and those don’t happen automatically).
Those who have checked out IE11 have probably noticed a visual overhaul to the developer tools. One particular thing I noticed is that the “document mode” and “browser mode” options that were present in IE10’s tools have now been integrated into something called “Emulation” (which you can open quickly by hitting F12 then CTRL-8).
As you might already know, CSS transitions and animations allow you to animate a specific set of CSS properties. One of the properties that cannot be animated is the display property.
It would be great if we could do it, but it’s not currently possible and I’m guessing it never will be (e.g. how would you animate to “display: table”?). But there are ways to work around it, and I’ll present one way here.
I don’t think this happens very often. To be honest, I don’t think I’ve ever used a percentage value on a top padding/margin, or a bottom padding/margin value. Even for height values, I may have used a 100% value for a hack, but nothing else.
Nonetheless, using percentages on those vertical parts of a page are somewhat different in the way they are calculated, compared to other properties that take percentage values.
This year I had the pleasure of completing my second book, and the first book that I authored all by myself: Jump Start CSS published by SitePoint.
It’s part of their “Jump Start” series of shorter books that provide an introduction to specific web development and design topics.
As many of you know, I’ve recently launched a new weekly newsletter called Web Tools Weekly. In addition to providing a weekly, categorized list of tools for front-end developers, most issues begin with a brief tip or tutorial that usually includes code examples that have syntax highlighting.
The method I use is based on a suggestion given to me by Joshua Clanton, who writes the very cool A Drip of JavaScript newsletter. When I asked him how he embeds code in his, he directed me to a page on MailChimp’s blog along with a GitHub repo.
In recent months, I’ve come across a number of links discussing the issue of Search Engine Optmization (SEO) for single page apps or similar complex JavaScript-driven web apps.
This certainly should be a key concern for anyone building these types of projects. So below I’ve compiled two categories of links related to this topic.
The last thing developers need today is another jQuery and/or CSS3 based content slider or carousel. I think the problems with these types of modules have been well documented.
About a year ago, however, I wrote a step-by-step tutorial for Issue #203 of Web Designer Mag that involved creating a “news content switcher”. I’ve been meaning to revisit, tweak, and release the code for that here and so I finally got around to it.
Due to the prevalence of ad-blockers, ads as a means to support online content is becoming a less effective method with each passing month.
Selling ads on a blog like this one is not easy, and resorting to backfilling missing ad-spots for ugly Google Ads is less than satisfying. I hope I can one day remove all ads from this website and still continue to produce content regularly.
To begin the process of reaching that goal, I’ve put together 3 CSS E-Books in PDF format containing a collection of CSS-based articles that I’ve published here on this website. Below are links to view a description and table of contents for each e-book:
