How to stop worrying about CSS vendor prefixes — Alejandro Beltrán There are a lot of ways to start using vendor-prefixed CSS features. The Good You could: Write them by hand using referring to something like CSS3 Please! or the Can I use site.Use Prefixr, which will do it for you.Use Prefix free, which will also do it for you but client-side.Use Sass mixins or Compass. The important thing is that we have alternatives. If you use any of the above methods I think it's safe to say that you may have already stopped worrying about vendor prefixes. The Bad? Sometimes, however, that may not be enough. Here are a couple of thoughts of my own about dealing with prefixes: Writing them by hand is, IMHO, tedious and error-prone. The Awesome Enter Autoprefixer, a tool that parses CSS and adds prefixed values when necessary according to the Can I Use site. Why it's awesome You can specify browser support via a configuration which can be done in different ways: Demo Let's actually create an example of what I'm talking about. Supposing we have a style.css as: Closing thoughts
Responsive Web Design Patterns | This Is Responsive Responsive Patterns A collection of patterns and modules for responsive designs. Submit a pattern Layout Reflowing Layouts Equal Width Off Canvas Source-Order Shift Lists Grid Block Navigation Single-Level Multi-level Breadcrumbs Pagination Images Responsive Image Techniques Media/Data Video Fluid Video Iframes Tables Charts & Graphs Responsive Chart Forms Basic Forms Text Lettering Fittext Footnotes Responsive Footnotes Modules Carousel Tabs Accordion Messaging Lightbox
HTML5 History API: A Syntax Primer As most of us probably are aware, a significant part of the HTML5 spec is the expansion of the History API. This post will not be a super extensive discussion of this subject, especially since it’s something that I’m only now just getting into understanding better. But I thought I would put down the main components of the API, for my own quick reference, and I hope it will prove useful to my readers and those searching via Google. Also, if you want a good introduction to the History API, including what its benefits are, see the links near the end of this post. history.length The length property on the history object tells you how many entries are in the session history. We can prepare a silly demonstration of the length property using the following awful code: <a href="#" onclick="this.innerHTML = '# of items in your history: ' + history.length; return false">Click to View history.length</a> And here’s a live version of it: Click to View history.length history.go() So if you have the following:
In defense of the humble id attribute Recently on my post about quoting HTML5 attributes, Paul Irish commented in passing IDs are totally out of fashion now due to their high specificity so who cares This idea has been floating around for a while. Dave Gregory wrote Don’t use ID selectors in CSS almost exactly 3 years ago, observing the following. The element is not re-usable on that page.This is the beginning of a downward sprial into specificity.Usually, IDs refer to something very specific, and abstracting would be tough.Any performance gains picked up by using id, is negated by adding any other selector to the left fo that id. The cat really got set among the pigeons when CSS Lint, a tool to help developers spot errors and adhere to good practice included a warning when your CSS uses id selectors. One of CSS’s benefits is the ability to reuse style rules in multiple places. Now, I’m far from the first person to have concerns with this recommendation. In short: don’t blindly follow the crap these tools tell you.
5 Reasons to Choose Opera over Chrome - Chrome vs Opera Opera Software recently took a major decision to stop using its own rendering engine, and move to Google’s Blink engine on desktop and Android platforms. The Norwegian browser vendor has already released stable builds with Blink in action. One can download and use Blink-powered Opera browser on Windows, Mac and Android phones. If you think that by doing so Opera has become a poor clone of Chrome – you are wrong. If you are surprising why one should choose Opera over Chrome, here are five reasons: No Google You must have read hundreds of articles like this one, where the author decides to move away from Google due to privacy and other issues, and switches over to Mozilla Firefox. Not A Dumb Company Opera has a great team of industry experts and developers. Off-Road Mode Earlier available as “Turbo Mode”, the Off-Road mode of Opera browsers enables server-side data compression to reduce bandwidth and data charges. Extensions Browsing Data Sync
25 eye-popping examples of parallax scrolling websites | Web design With new technologies like HTML5 and CSS3, it's becoming possible to create more advanced, interesting and remarkable effects in the browser. While these effects can be gimmicky, when employed in the right way they can result in a remarkable and memorable website. One big web design trend of the moment is parallax scrolling, which involves the background moving at a slower rate to the foreground, creating a 3D effect as you scroll down the page. It can sometimes be overwhelming, but when used sparingly it can provide a nice, subtle element of depth. To show how it should be done, we’ve collected together sites that employ the technique to good effect. Also read: Build a parallax scrolling website: pro tips 01. Last year, flat design took over the world of digital design. "One of the principal problems was to insert the HTML5 game in the middle of a parallax scroll," explains inTacto's creative director Alejandro Lazos. 02. "It was meant as an insult, but we took it as a compliment. 03.
An Introduction to Node's New Streams by Calvin French-Owen Recently, there’s been a lot of commotion on twitter and in #node.js about the new streams2 API. The official stream docs leave a lot to be desired, which has lead to general confusion. That’s too bad, because using new streams can really simplify your code once you understand how they work. Let me take you there… If you’ve never used node streams before, I highly recommend you read Max Ogden’s introduction. For the lazy: a stream pipes data from a “source” to a “sink” without reading the entire dataset into memory all at once. Why do we need a new version of streams? In previous versions of node, the only help you were given was a basic Stream prototype. There used to be all sorts of implicit rules which proper streams should follow in order to write data. Worse still, streams would start emitting data willy-nilly (generally on nextTick). Stream authors had to keep track of way too much state and define way too many methods. In node 0.10.x, you get a lot more right up front. 1. 2. 3. 4.
Dynamic pagination Pagination over a constantly changing list is hard. Really hard. In fact it should be one of those computer science problems up there with naming and cache invalidation. The issue especially surfaces in news sites, like Hacker News. The hierarchy of posts is constantly changing. By the time you click ‘next page’, page two has an entirely different set of posts. Paginating on offset is out, since the valid offset is constantly changing. Well one one method is to store every possible sort order in memory. However this is a lot of data. @fat came up with a neat solution for Medium, which he shared with me recently. Send the server the IDs of the posts you already have when paginating. In other words I send an array containing all the previously fetched post IDs as a parameter whenever I’m fetching more paginated posts. That’s a pretty pragmatic solution, that in my opinion draws the right compromises. Kudos
Five reasons why you should quote attribute values in HTML5 With HTML5, you don’t have to quote attribute values. Until you do. One of the benefits often touted for HTML5 over XHTML is what I once heard Paul Irish describe as its “loosey goosey” approach to syntax. No longer the strict taskmaster that XHTML was, we can now do all kinds of cool stuff like leave off closing li and p tags, and of course, we no longer need to quote attribute values. Think of the bytes saved! Except. You can’t always leave off quotes from attribute values. Here the browser actually see two attributes, class=important and a boolean attribute warning (which it doesn’t understand, but that’s not a problem, making up your own attribute names is what all the kids are doing these days (I’m looking at you Angular!)) So, we need to quote attributes values when they include spaces. ", ', =, >, <, or `. If it does, then quote you must. BTW, the same rule applies to CSS values that take urls. You could try to remember all these rules — go for it!
Caching: Your Worst Best Friend A cache is a mixed blessing. On the one hand, it helps make things faster. On the other, it can become a crutch, or worse, an excuse. Furthermore, caches can deceive us in two ways. First, they can easily hide a system's true performance characteristics, masking poor design until things start to fail. Defining a Cache To me, what defines something as a cache is the possibility of a miss. We can rephrase this by defining what a cache isn't. Of course, that's a generalization. Stats Or It Didn't Happen To get the most out of a cache, you need to collect statistics. For the rest of this post, I'm going to assume that you're using a cache to store a variety of objects with different characteristics. When we look at our cache, there are 4 high-level statistics that we want to track, per object type: cache hit ratio, number of gets, cost of a miss, and size of the data All of these help paint a clear picture of the health and effectiveness of your cache. This gives us a file that looks like:
The flat design trend - where to from here? — Design/UX I’ve always subscribed to the Swiss style of less is more, so wholeheartily embracing this era of flat interface design. Given the design excesses of the past decade, it’s interesting to see how we’ve come full circle to reach this point. But I can’t help wondering – where to from here? When I started designing websites back in the year 2000, all the world was flat. From here a host of web design trends emerged, first embraced, then vilified by the design community. It always surprised me how wholeheartedly Apple embraced skeuomorphism, given their clean and minimal design ethic. iBook’s faux wood bookshelf and iCal’s moleskin ‘hand-stitched’ leather binder, while initially enchanting now seem terribly passe. Flat design is quickly being adopted by market leaders. There is something about this design ethic that feels honest. Layervault, an early champion of flat design have gone as far as calling this “The Honest Design Age”. These changes aren’t all about fashion.
Automatic Table of Contents Any long page of content with distinct and well marked up content can benefit from a table to contents. A table of contents provides a quick way to jump down the page to the desired section. Of course you can create a table of contents manually, but it may be smart to build it dynamically on-the-fly with JavaScript. This is true for several reasons: It's easier - write the JavaScript once and it can create the Table on Contents on every page you need it.It's more reliable - the JavaScript isn't subject to authoring errors.It's still accessible - A table of contents is good for the general concept of accessibility, but it is a bonus (not having it doesn't ruin the page) and nearly all screen readers run JavaScript. This kind of thing has been done many times and many ways. HTML: Headers and IDs A long page of different parts you wish to link to could be marked up a bunch of ways. <article><h3 id="question-one">Title of Question</h3><! A link like this: A list in that <nav>? Demo Share On
A comparison of Angular, Backbone, CanJS and Ember - Sebastian's Blog Selecting a JavaScript MVC framework can be hard work. There are so many factors to consider and so many options out there that selecting a framework can be overwhelming. To have an idea of all the possible alternatives have a look at TodoMVC. I have had the opportunity to use four of these frameworks: Angular, Backbone, CanJS and Ember. So I decided to create a comparison to help you decide which one to use. To each factor I have assigned a score between 1 and 5. Features There are really important features a framework should have to provide the necessary foundation to build useful applications. Observables: Objects that can be observed for changes. Routing: Pushing changes to the browser url hash and listening for changes to act accordingly. View bindings: Using observable objects in views, having the views automatically refresh when the observable object change. Two way bindings: Having the view push changes to the observable object automatically, for example a form input. Scores Angular