25 CSS Snippets for Some of the Most Common and Frustrating Tasks

Dust by LinkedIn Dust by LinkedIn async/streaming operation browser/node compatibility extended Mustache/ctemplate syntax clean, low-level API high performance composable templates Release 2.2.3 PR-363, GH-340 - Remove old optimization to avoid looking at arrays in get. Release 2.2.2 PR-368 - Add context.getTemplateName. Release 2.2.0 PR-360 - Use get for all Dust references. Release 2.1.0 PR-350 - Support dynamic template names for the context's template name. Release 2.0.3 PR-323, GH-322 - dynamic blocks {+"{dynam}"} has been corrected. Release 2.0.2, (2.0.1) 2.0.1.add line and column numbers in to the parser so we can use it in linters or debuggers 2.0.2 actually uses it when using dust.parse Release 2.0.0 Core Enhancements Bug fixes PR-289, fix the CacheVM context across `dust.loadSource` calls for node.js Release 1.2.3 Perf Improvements for IE7 PR-253: performance enhancement in IE7 Release 1.2.2 GH-245: solve incorrect error line reported in pegjs GH-241: using dust.isArray in place of Array.isArray Release 1.2.1

Journey Through The JavaScript MVC Jungle All About Floats What is "Float"? Float is a CSS positioning property. To understand its purpose and origin, we can look to print design. In a print layout, images may be set into the page such that text wraps around them as needed. This is commonly and appropriately called "text wrap". In page layout programs, the boxes that hold the text can be told to honor the text wrap, or to ignore it. In web design, page elements with the CSS float property applied to them are just like the images in the print layout where the text flows around them. Setting the float on an element with CSS happens like this: There are four valid values for the float property. What are floats used for? Aside from the simple example of wrapping text around images, floats can be used to create entire web layouts. Floats are also helpful for layout in smaller instances. This same layout could be accomplished using relative positioning on container and absolute positioning on the avatar as well. Clearing the Float The Great Collapse Video

Javascript Tips for Non-Specialists By: Charlie Fiskeaux II Wed, 22 Aug 2012 This article reviews a fundamental concept or principle This article reviews an intermediate concept or principle This article reviews an advanced concept or principle This article expresses an opinion or just a downright rant Javascript coding is a rather unique skill in the web development world—if you are not experienced with writing Javascript for the browser (especially if you are a coder who works primarily with other languages such as Perl or PHP), it may seem that the language has a mind of its own, refusing to behave in the way a language should. When writing this article, I wanted to provide some tips for non-specialists about ways to make your Javascript faster and easier to maintain, and in some cases, easier on the end user. 1. Many programmers with backgrounds in other languages have a hard time understanding how variable scope works in Javascript. Any parameters passed to a function are declared , with values set. 2. 3. 4. 5.

Multiple Area Charts with D3.js In this tutorial we will introduce some basics of D3.js and create an infographic with multiple area charts along with a context tool to zoom and pan the data. View demo Download source The D3.js website describes itself as “a JavaScript library for manipulating documents based on data.” It is but one of many in the ever growing list of visual data JavaScript libraries. D3 was created by Mike Bostock who was the lead developer on Protovis, which D3.js builds on. The reason I focus on D3 is because it is one of the most robust frameworks available, while also remaining flexible and web standard agnostic. So what kind of visualizations can you create with D3? Since area charts are pretty common, it’s a great place to start. The .CSV I downloaded from Gapminder contains electricity consumption per capita from 1960. With this data we will create 5 area charts. First thing we need to do is to set up an HTML page. Next we will want to add an SVG tag to the page.

CSS Sprite Sheets: Best Practices, Tools and Helpful Applications Using CSS sprites, instead of a collection of smaller individual images, will improve your web pages' performance and keep things more organized. Let's take a look at some best practices and some helpful tools for your sprite-making workflow. The name sprite might remind you of gaming sprites; retro console games and even browser-based games these days: and in CSS terms the role sprites play is more or less the same. The essential point of using CSS Sprite Sheets is that the server only has to send one image file containing all your images, not a host of individual ones - and through CSS you can display any little segment from that file as a background to an element. Some would have it that using individual images can 'fool' the eye into thinking the page is loading faster; images popping up as they load might appear to be good progress. The other disadvantage with this method is that each individual image is, as we have mentioned, a separate image file. CompassPrice: Free!

50+ Useful CSS3 Tutorials to Enhance Your Skills People in the web design community now has been talking about the wonders brought about by CSS3. Obviously, it is does not only control the styling of the web page as what CSS2 does, but also the behavioral attributes of the design. This novel technology certainly makes it convenient for you to add animations and transitions right on your stylesheet. Although it is hoped to be the technology that can perform a multi-faceted role in web designing, CSS3 unfortunately is not yet a w3C standard. While it is easier and more powerful than the previous versions, not all of its functions however have the support of major browsers unlike Javascript libraries. This is one of the reasons why developers prefer to use Javascript to perform different effects. When the newest stylesheet language however reaches its full potential, it will surely change the way we do things in the industry. CSS3 Tutorials on Sliders, Carousels, Galleries and Accordions Responsive CSS3 Slider Without Javascript

Tabs with Round Out Borders Rounded corners are now trivially easy to achieve via border-radius. But that only allows us to cut into the shape. What if we want to connect a shape to another with a rounded outward corner. Much easier to explain with a graphic: Clean HTML Of course, on the web, just about anything visual is possible. <ul class="tabs group"><li class="active"><a href="#one">One</a></li><li><a href="#two">Two</a></li><li><a href="#three">Three</a></li><li><a href="#three">Four</a></li></ul> A class of active indicates which tab reflects the current page. How this is going down The reason this is tricky is that we need a shape to stick out of the tab element. Let's visualize this step by step, without looking out any code just yet. 1) Natural State 2) Float 3) Same Size 4) Just one 5) Circles We'll use two of our four available pseudo elements to place circles on the bottom left and bottom right of the tab. 6) Squares 7) Colorize the tab and content 8) Colorize the pseudo elements 9) Stacking 10) No borders Share On