An Introduction To The CSS3 Multiple Column Layout Module The Multi Column Layout Module has been introduced to help us create columns quickly and easily using CSS3 only. In this tut I'm going to be taking a look at some of its properties and demonstrate them through a series of examples. Anyone who has tried to create multiple columns in the past using CSS will already know that this type of layout has been achievable for a long time. The new approach, which is an extension to the current CSS box model, allows content to run from one column to another and makes it easily adaptable for different viewing devices and dynamic data. Ok, so before you get too excited about this new module it's important to understand which browsers support it, which prefixes to use and a few browser limitations. IE10+Firefox 5+Chrome 12+Safari 3.2+Opera 11.1+ Both Chrome and Safari use the '-webkit-' prefix. Here's a preview of how the columns will be rendered: First, the html for this example it super simple. 'Column width' does exactly what it says on the tin.
CSSLab How I Survived a 2300% Traffic Increase With Drupal Yesterday, my Orphaned Works article hit the front page of Reddit, a popular social news site. Traffic instantly increased by a factor of more than 20. At peak, the site was serving over 30 requests a second, enough to take down most poorly configured Drupal sites. In this article, I'll show you how I survived, and what steps you can take to make sure your site is ready for the Reddit Effect. These first 2 tips will give you the quickest bang-for-your-buck, and based on my research, more than half of new Drupal sites fail to take advantage of them! 1. Drupal has a tendency for CSS file overload. This is a huge bottleneck that can add tens of seconds to your page load time, and kill your server, in the event of a traffic spike. Luckily, there's a simple solution: CSS Aggregation. To enable CSS aggregation in Drupal, just go to Site Configuration > Performance. Drupal 6 also offers JavaScript Optimization, which does the same thing for JS files. 2. 3. 4. 5. Not all hosts are so generous.
Strictly Untyped: Rails: Where to put the 'other' files IntroductionWhen starting a Rails project, four golden folders are predefined: Models, Views, Controllers, Helpers. Could we possibly need anything more? In my experience, the answer is yes. This leads to the question of, where do these extra files go? Compared to models, views, controllers and helpers, Rails provides little guidance about where to put this other stuff. Fortunately, Rails comes packaged with two folders to put additional Ruby code: lib and config/initializers. The weakling lib folderIn Agile Web Development on Rails, the authors describe how to use a naming convention, such that your lib file names match the classes they contain. Files in lib are not loaded when Rails starts. While the functionality of the lib folder is nice, it is extremely limited. The bloated initializers folderRails first loads the framework, then plugins, and finally, it loads the files inside of config/initializers (in alphabetic order, no less). We first write the module.
Animatable: One property, two values, endless possiblities box-shadow From: 0 0 black To: 0 150px 10px -50px rgba(0,0,0,.5) Author: @leaverou CSS Remix | A Fresh Blend of the Best-Designed Web 2.0 Sites Cheat Sheets for Front-end Web Developers Cheat sheets are helpful to have around because they allow you to quickly remember code syntax and see related concepts visually. Additionally, they’re nice decorative pieces for your office and can prepare you for client questions regarding web development. In this article, you’ll find 23 excellent, print-ready cheat sheets for HTML/HTML, CSS, and JavaScript (including MooTools and jQuery). So go ahead – print out your favorites and pepper your workspace with these wonderful references. 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. JavaScript 12. 13. 14. 15. 16. 17. mootools 1.2 cheat sheet 18. jQuery Cheatsheet 19. jQuery 1.2 Cheat Sheet 20. jQuery Visual Map – PNG Miscellaneous 21. 22. 23. These are great resources regardless of the size of your clients.
Man with no blog : » Ten Things Web Designers Forget - Gary Barber This post should really be called ten things that get up my nose. Many of these points will be old ground for some of you, take them as reminders. They are in the most part just annoyances that with a little work we can all avoid. I’m not totally dogmatic on this list, as in a realistic business world a I know that it is not always possible to do all these things when the economics of web development come into play. But in general we should at least be giving some consideration to these points. Page Backgrounds.It is amazing how many sites rely on the default browse background colour. I bet you personally have another 10 or so personal gripes with general web design; would love to hear what they are. Technorati Tags: CSS, print, typography, search, links, browsers, web+design, background+color
What are CSS Shaders? - destroy/dstorey Adobe announced a proposal for CSS Shaders at Adobe Max two days ago. This was backed by both Opera and Apple, and the spec will be developed by the FX Task Force at the W3C. For those of you who are not aware, the FX task force is an elite band of ninjas’s chosen from the ranks of the CSS and SVG Working Groups to work on specs common to both technologies. So what exactly is the CSS Shaders proposal, and how does it relate to the existing proposals and technologies? Shaders terminology A shader is a set of software instructions used to calculate rendering effects (usually) on a GPU. Their are two main types of shaders in the CSS Shaders spec, which I will describe below. Vertex shaders A vertex shader describe the properties of a vertex (the points at the corners of geometric shapes, usually triangles). Fragment shaders Fragment shaders (terminology used in OpenGL and also CSS Shaders) can also go by the name of pixel shaders (used in Direct3D). The CSS Shader proposal Defining the shader
7 Principles Of Clean And Optimized CSS Code | CSS Advertisement Some of you may remember the days when 30KB was the recommended maximum size of a web page, a value which included HTML, CSS, JavaScript, Flash, and images. I find with every new project with even the slightest bit of complexity, it’s not long before that 30 KB ideal is well out of my reach. With the popularity of CSS layouts and JavaScript-enriched web page experiences, it’s not uncommon, particularly for large sites, for the CSS files alone to jump well beyond that 30KB ceiling. But there are some principles to consider during and after you write your CSS to help keep it tight and optimized. 1. If you’re not already writing in shorthand, you’re late to the party. Margin, border, padding, background, font, list-style, and even outline are all properties that allow shorthand (and that’s not even an extensive list!). CSS Shorthand means that instead of using different declarations for related properties… … you may use shorthand properties to combine those values like so: 2. 3.
23 Go To Resources for Finding Great Code English | Español | Français About Us Menu ≡ home > resources > articles > 23 go to resources for finding great code 23 Go To Resources for Finding Great Code As a developer, you are probably writing most of your own code. These 23 websites are for those times. Take a look and add them to your programming tool belt: CodeGuru CodeGuru is a free website where you can find tips, tricks, and other pieces of useful code. The Free Country This website is a collection of free programming, but also webmasters’ and security resources, and free utilities. Hot Scripts HotScripts.com is a large Internet directory that compiles and disseminates Web programming-related resources. Script Dungeon Script dungeon is a free directory offering hundreds of free scripts, tools, and utilities. CGI Resource Index Cgi.resourceindex.com is a free directory containing over 2,700 programs and CGI scripts written in Perl, C, C++, and other languages. PHP Resource Index Dynamic Drive Fat Scripts Open Source Scripts JavaScript Kit
Best CSS tools of the month We're always hungry in css. It has such a great potential if done right that we don't care if the time spent making our web apps compatible and compliant is so long. We searched and saved the best tools of the month when it comes to css and came up with this great list that might make your job easier or less painful. "This article includes 8 helpful solutions which we find essential when designing with CSS". "In this day it is very common for a stylesheet to contain many times more line of code than its corresponding XHTML document. 50% of the job might be to make your website look and act the same in all major browsers. "Uni-Form is an attempt to standardize form markup (xhtml) and css, "modularize" it, so even people with only basic knowledge of these technologies can get nice looking, well structured, highly customizable, semantic, accessible and usable forms." - nice job. ...learn to slice your templates into fully valid XHTML and CSS web pages.