9 Cloud-Based Code Editors List of cloud-based code editors or IDE’s. Coding from the cloud is the future and you should check these IDE’s out, some of them have paid plans and other are free to use. Codiad c9.io Codenvy Codeanywhere Codio Koding Codeita Compilr Orion Advertisement CSS Positioning 101 If you’re a front end developer or a designer who likes to code, CSS-based layouts are at the very core of your work. In what might be a refresher for some, or even an “a-ha!” for others, let’s look at the CSS position property to see how we can use it to create standards-compliant, table-free CSS layouts. Article Continues Below CSS positioning is often misunderstood. The CSS specification offers us five position properties: static, relative, absolute, fixed, and inherit. Get with the flow#section1 First, let’s take a step back to recognize the world we’re working in. Boxes in the normal flow belong to a formatting context, which may be block or inline, but not both simultaneously. Think of a “box,” as described by the spec as a wooden block—not unlike the ones you played with as a young whippersnapper. Static and relative—nothing new here#section2 The static and relative position properties behave like your childhood blocks—they stack as you would expect. Example D shows our new markup.
Goodbye Compass Around this time last year I threw together Style, a starting point for scalable, maintainable CSS architecture based on work I was doing in my day job at Envato. Back then I couldn't see myself living without Compass' vendor prefixing, spriting tools & vertical rhythm. Plus it was a dependency of Susy, my favourite grid framework. I've just released the totally Compass-free Style 2. Vendor prefixes Compass makes you use mixins for properties that need vendor prefixes. Autoprefixer lets you just write the CSS properties without prefixes, then post-processes your CSS to add prefixes for browser versions you specify at compile time (using data from caniuse.com). autoprefixer css/** -b "> 1%, last 2 versions, Firefox ESR, Explorer 9" Update: Cross-browser support in Compass 1.0 will work differently, comparing usage thresholds that you set with usage data from caniuse.com. Sprites Here's what you need to use sprites in Sass: Vertical rhythm margin-bottom: rhythm(0.7) Susy 2 Compilation
Ultimate 75th - A Marvel restrospective CSS-Only Solution For UI Tracking Advertisement The web is growing up. We are building applications that work entirely in the browser. They are responsive; they have tons of features and work under many devices. We enjoy providing high-quality code that is well structured and tested. But what matters in the end is the impact for clients. 2The Problem We developed an application that had to work on various devices. It was a website displaying information about one of the client’s products. (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) })(window,document,'script','//www.google-analytics.com/analytics.js','ga'); ga('create', ' This snippet was enough for tracking page views, traffic, sessions, etc. ga('send', 'event', 'ui-interaction', 'click', 'link clicked', 1); It was not that bad, but the client shared another issue. 3The Solution
A Vision for Our Sass At a recent CSS meetup, I asked, “Who uses Sass in their daily workflow?” The response was overwhelmingly positive; no longer reserved for pet projects and experiments, Sass is fast becoming the standard way for writing CSS. Article Continues Below This is great news! Yet alongside the wide-scale adoption of Sass (which I applaud), I’ve observed a steady decline in the quality of outputted CSS (which I bemoan). To see a way forward, let’s first examine some trouble spots. The symptoms#section1 One well-documented abuse of Sass’s feature-set is the tendency to heavily nest our CSS selectors. For one, it creates long selector strings, which are a performance hit: It can muck with specificity, forcing you to create subsequent selectors with greater specificity to override styles further up in the cascade—or, God forbid, resort to using ! body #main .content .left-col .box .heading [0,1,4,1] .box .heading [0,0,2,0] Complicated nesting is probably the biggest culprit in churning out CSS soup. 1.