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
Simplified Wrapper and Interface Generator 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 Featured Related Tags - Runnable 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:
The Archive - A Big List of Browser-Based Emulators and Ports of Classic Games You say you like old games, but you can’t be bothered—or aren’t currently in a position to—hook up an old system or open your favorite emulation app? The Internet’s got you covered, with emulators for most consoles and early computers playable right in your browser. But finding them can be a chore, so I’ve put together this list to help you out. These are all the functional browser-based emulators I could find. Many—though not all—of these include commercial ROMs, making them technically illegal, but we’ll let you be the judge of whether using them is okay. Sorted system, with "others" saved for the end: Scripted Amiga Emulator [click for larger image] Scripted Amiga Emulator - JavaScript/HTML5 - SAE comes with just 11 pre-installed games and a couple of dozen demos, but it can load up disks and Amiga-formatted virtual drives from your computer. CPCBox - JavaScript - I can’t tell you much about CPCBox’s accuracy, but it ran reliably at 50 frames per second in my testing. Virtual Apple ][
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.
Leadership Team | Mobile Epiphany 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
Become a Programmer, Motherfucker If you don't know how to code, then you can learn even if you think you can't. Thousands of people have learned programming from these fine books: Learn Python The Hard Way Learn Ruby The Hard Way Learn Code The Hard Way I'm also working on a whole series of programming education books at learncodethehardway.org. Learn C The Hard Way Learn SQL The Hard Way Graphics Programming Language Agnostic NerdDinner Walkthrough Assembly Language Bash Clojure Clojure Programming ColdFusion CFML In 100 Minutes Delphi / Pascal Django Djangobook.com Erlang Learn You Some Erlang For Great Good Flex Getting started with Adobe Flex (PDF) Forth Git Grails Getting Start with Grails Haskell Java JavaScript JavaScript (Node.js specific) Latex The Not So Short Introduction to LATEX (perfect for beginners) Linux Advanced Linux Programming Lisp Lua Programming In Lua (for v5 but still largely relevant)Lua Programming Gems (not entirely free, but has a lot of free chapters and accompanying code) Maven Mercurial Nemerle Nemerle NoSQL Oberon Objective-C
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