We're growing into something new. Read More
body {
  font-family: Verdana, Arial, sans;
  font-size: 12px;
  text-align: center; 
  background: url("bg2.png")left no-repeat;
  background-size: 100%;
  background-repeat: none;
  margin: 0;
  background-color: #000;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
}

CSS Query (I've been out of practice)

Hi guys, I've been majorly out of practice with website development, and I'm currently developing a website for a friend of mine. Essentially he wants a scrolling website with anchor links, which is fine. Basically I have whipped up a pretty awesome background for him, and have even got it to fit to the page using background size to "cover".. Now my only query is, is it possible to get the background image to A, stretch the screensize - while B, following the user's scrolling, as it's going to be a lengthy website I don't just want the background to end... Here's the code I have whipped up for the background so far, I have tried/tested adding "background-attachment..." but unfortunately that doesn't seem to work? Thanks!

Code

CSS Aliases

CSS Aliases look amazing, but the transition to using them would be rough: fallbacks will be necessarily verbose. [http://tabatkins.github.io/specs/css-aliases/](http://tabatkins.github.io/specs/css-aliases/)

Code

I ran a little speed test on jQuery selectors. You might be surprised!

So, I did a little test on jQuery selectors. It's always been my understanding that `$('div').find('p')` is faster than `$('div p')`. Also, I've tested selecting with ids. These are the results: (time in miliseconds to query the DOM 50,000 times) | | Chrome 33 | Firefox 28 | IE 11 | IE 9 | Safari 5 | Safari iOS7 |:------------------|----------:|-----------:|-------:|-------:|---------:|-----------: |`$('div p')` | 617 | 850 | 1,015 | 911 | 1,189 | 5,648 |`$('div').find('p')` | 7,259 | 25,188 | 24,921 | 23,482 | 30,339 | 205,876 |`$('#div p')` | 238 | 845 | 925 | 837 | 1,217 | 4,685 |`$('div #p')` | 241 | 497 | 825 | 793 | 622 | 2,519 |`$('#div #p')` | 232 | 498 | 891 | 838 | 621 | 2,637 * As you can see, there is a distinct difference between using ids and general DOM elements. (As expected) * The most striking result: **`$('div p')` is faster than `$('div').find('p')`.** * Selecting with one id or two ids is equally fast for Chrome 33, IE 11 and 9. Safari and Firefox show a slower query `for $('#div p')` (about twice as slow) Interesting numbers I think. I thought I'd share this for the webdev community. :) You can see (and run) the tests at my [Fiddle](http://jsfiddle.net/Kriem/DYhNe/1/)

/* http://meyerweb.com/eric/tools/css/reset/  v2.0 | 20110126 License: none (public domain) */  html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed,  figure, figcaption, footer, header, hgroup,  menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure,  footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; } /*end of reset.css*/  
/* for great colors go to https://kuler.adobe.com/explore/most-popular/?time=month */
.grid_1{ 
    width:95%; 
} 
.grid_2{ 
	width:85%; 
} 
.grid_3{ 
	width:75%; 
} 
.grid_4{ 
	width:65%; 
} 
.grid_5{ 
	width:55%; 
} 
.grid_6{ 
	width:50%; 
} 
.grid_7{  
	width:40%; 
} 
.grid_8{ 
	width:25%; 
} 
.grid_9{  
	width:12.5%; 
}
.grid_10{
	width:66.6%;
}
.grid_11{
	width:33.3%;
}
/*end of grid*/
h1, h2, h3, h4, h5, h6{ 
	margin:0 auto; 
	padding:0 auto; 
} 
.container{ 
	max-width:80%; 
	margin:3em; 
	font-family:put something here; 
}  
.title{ 
	font-size: 3em; 
	color:#333333;  
} 
.subtitle{ 
	font-size:2em; 
	color:#d3d3d3; 
}  
.img-round{ 
	border-radius:50%; 
} 
.img-frame{ 
	border:2px solid #ffffff; 
}  
a{ 
	text-decoration:none; 
} 
.nav{ 
	width:100%; 
	padding:15px;
	background-color:#d3d3d3;
	box-shadow:1px 2px 2px 0px #333333;  
} 
.nav ul{
	display:inline-block;
}
.nav-fixed{ 
position:fixed; 
margin-bottom:3em;/* in order to not overlap the title*/  
}  
.nav ul li{ 
	margin-right:20px; 
	float:left;
}  
.nav ul a{ 
	text-decoration:none; 
}
p,
h1,h2,h3,h4,h5,h6{
	margin:10px;
	color:#333333;
}
.grid_1-box,
.grid_2-box,
.grid_3-box,
.grid_4-box,
.grid_5-box,
.grid_6-box,
.grid_7-box,
.grid_8-box,
.grid_9-box{
	padding:10px;
	background-color:#d3d3d3;
	border:1px solid #d3d3d3;
	border-radius:2px;
}
button:hover{
	cursor:pointer;
}
.button-rounded{
	border-radius:5px;
	padding:6px 13px;
	background-color:#dddddd;
	border-top:1px solid #dddddd;
	border-left:1px solid #dddddd;
	border-right:1px solid #dddddd;
}
.button-rounded:hover{
	background-color:#d3d3d3;
}
.button-rounded_pos{
	border-radius:5px;
	padding:6px 13px;
	background-color:#2ecc71;
	border-top:1px solid #2ecc71;
	border-left:1px solid #2ecc71;
	border-right:1px solid #2ecc71;
}
.button-rounded_pos:hover{
	background-color:#27ae60;
}
.button-rounded_neg{
	border-radius:5px;
	padding:6px 13px;
	background-color:#e74c3c;
	border-top:1px solid #e74c3c;
	border-left:1px solid #e74c3c;
	border-right:1px solid #e74c3c;
}
.button-rounded_neg:hover{
	background-color:#c0392b;
}
.button-rounded_colorful{
	border-radius:5px;
	padding:6px 13px;
	background-color:#8e44ad;
	border-top:1px solid #8e44ad;
	border-left:1px solid #8e44ad;
	border-right:1px solid #8e44ad;
}
.button-rounded_colorful:hover{
	background-color:#9b59b6;
}

My Framework Basis

What do you guys think of it so far? I may publish this but I doubt it.

/*! Hyx.less v2.0.0 | MIT License | http://github.com/thinkxl/hyx.less */

// apply a natural box layout model to all elements, http://www.paulirish.com/2012/box-sizing-border-box-ftw 
*, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

// Settings 
@gutter: 1%;    // - distance between columns
@grid-size: 12; // - num of columns
@width: 100%;   // - space that we want to use for the grid

// Columns Mixing
//
// Outputs a set of properties and values that you can use as a modular grid system with flexible gutter
.cols ( @num-of-cols ) {
    // @num-of-cols - size in columns 
    //
    // Example: if we want three divs of text that you want to be displayed side by side in a three column layout, simply use the number 4 (4 + 4 + 4 = 12)  

    float: left;
    @col-size: ( @width / @grid-size ); 
    @cols: ( @width / ( @col-size * @num-of-cols ) );
    width: ( @width - ( @gutter * ( @cols - 1 ) ) ) / @cols; 
    margin-right: @gutter; 

    &:last-of-type  { margin-right: 0; }
}

// Grid Container
.row { 
    width: 100%; 

    /* Clearing Context */
    &:before,
    &:after {
        content: " "; 
        display: table; 
    }

    &:after {
        clear: both;
    }
}

// Pre Built Grid
//
// Uncomment only what you need
// .col-1-2  { .cols(6); }  /*  one of two    */
// .col-1-3  { .cols(4); }  /*  one of three  */
// .col-1-4  { .cols(3); }  /*  one of four   */
// .col-1-6  { .cols(2); }  /*  one of six    */
// .col-1-12 { .cols(1); }  /*  one of twelve */

Hyx.less A LESS Mixing that creates a modular fluid grid system

Hyx.less is a tiny [LESS](http://lesscss.org) snippet that generates a (another one, really?) flexible modular fluid grid system (too long, I know), it let you: - Use the class name that you want `.col-1-2`, `.col-6`, `.three_col`, `.g6` - Change the gutter size in `%` whenever you want without affect the size of the columns and the layout structure - Use only the grid sizes that you need by uncommenting the `Pre Built Grid`... or - Build your own grid sizes with the `.cols(@num-of-cols);` mixing [Project Website](http://thinkxl.github.io/hyx.less/) [GitHub Project](https://github.com/thinkxl/hyx.less) No time to enter websites? take a look on the snippet:

Panaroid iPhone app released

Hey all! Exciting news, I recently posted on here about the design of the [Panaroid](https://panaroid.com) iPhone app, now it is available in the Apple App Store, please go download it, have a play and let me know what you think to the design, UX and function of it. Your opinions would be really appreciated and if you feel like you really want to help you could post a review and rate it :) [Panaroid iPhone app](https://itunes.apple.com/gb/app/panaroid/id837831021?mt=8) Cheers, Dan.

Code

Help with Angular and Firebase

Hello, I am working on a pretty basic angular app right now to learn more about Angular and Firebase. I have it hosted via openshift at http://angular-jakeangularjs.rhcloud.com/ . I have it so that you can write data to it in real time using Firebase and such but for some reason the editing isnt working. For example click on one of the "posts" headlines and that takes you to the edit view. For some reason the data isn't filling in like its supposed to. I know its getting the right data from the controller because if you wait 5 seconds you will get an alert with the data ( i put a js delay on it) it appears to be a problem with asynchronous loads. I am passing the data that's in the alert to the scope but its just returning a null object. I'm guessing this needs to be a promise, but I am not to experienced with that part of async coding so was just wondering what is going wrong. Its hosted on github if you need to check out the code ( https://github.com/jakeboyles/AngularProject )

Casper: A Ghost-inspired Wordpress theme

I was looking for a Wordpress theme similar to the default theme of the [Ghost](http://ghost.org) blogging platform but couldn't find anything with the same elegant look and feel, so I decided to port it myself. The project goal is to emulate the look and feel of the static site's simple pages, while adding in dynamic features only available through a database driven CMS or Wordpress. Tell me what you think! Suggestions welcome. [GitHub](https://github.com/lacymorrow/casper-wp) • [Casper](http://lacymorrow.com/projects/casper/)

Code

ntropy.js

Some 3 years ago, I've made a [post](https://forrst.com/posts/Mouse_movement_entropy_based_random_generator-DRW) about a mouse movement random generator (jQuery plugin) I've written. I figured it was time to update it. I've added `devicemotion` support for mobile devices and got rid of the jQuery plugin part. It's a standalone library now. I'd really appreciate some feedback on the library. You can find it here: http://www.dinopaskvan.com/ntropy.js/ and the repository is here: https://github.com/dpskvn/ntropy.js It was a major rewrite so bugs are probably plentiful and the documentation leaves a lot to be desired, but I'm working on it.

@numberOfDiv: 10;
.loopMyClass(@index) when (@index > 0) {

   (~".myclass_@{index}") {
           my-property: -@index px;
    }

.loopMyClass(@index - 1);
 }

 .loopMyClass(0) {}
 .loopMyClass(@numberOfDiv);
 }

Do the loop with Less css.

I wanted to be able summarize these repetitive CSS rules using LESS. My first attempt was very simple and only generated the rules for div element.

(function() {
    
	// Object to hole our data for the bar chart
	var data = {
			one: 234.76,
			two: 750,
			three: 12.75,
			four: 126.98,
			five: 299	
		},
		
		bars = $('div.bar'),
		max_height = $('#graph').height(); // Get the max target height
	
	/* Run through the object and get the largest value
	/* From here: http://stackoverflow.com/questions/11142884/fast-way-to-get-the-min-max-values-among-properties-of-object
	/* http://jsfiddle.net/7GCu7/1/
	*/
	
	function max_value(obj) {
		// Convert object to array and map funciton to it
		var arr = Object.keys( obj ).map(function ( key ) { return obj[key]; });
		return Math.max.apply( null, arr );
	}
	
	//Run data through the function
	var max_value = max_value(data);

	//Function to work-out percentage of any two numbers
	//Will always return the larger percentage
	//Accepts two numbers and the format to determine accuracy
	function percentage(a, b, format) {
		var $max, $min, percent;
		
		$max = ( (a-b) > 0 ) ? a : b;
		$min = ( (a-b) <= 0 ) ? a : b;
		
		switch(format) {
			//Return accurate as possible float
			case "accurate":
				percent = parseFloat( ($min/$max) * 100 );
				break;	
			//Retrun to two decimal places
			case "decimal":
				percent = parseFloat( ($min/$max) * 100 ).toFixed(2);
				break;
			//Return whole number
			case "integer":
				percent = Math.round( ($min/$max) * 100 );
				break;
			default:
				percent = Math.round( ($min/$max) * 100 );
		}
	
		return percent;
		
	}

	
	var val;
	var i = 0;
	
	//Loop through bars and apply heights as a percentage of container height
	for (val in data) {
		var pHeight = percentage(data[val], max_value);
		$(bars[i]).animate({height: pHeight + '%'}, 500);	
		i++;
	}

	
})();

jQuery/html/css animated bar chart

Today I knocked together a function to create an animated bar chart using jQuery, html and css. Fiddle: http://jsfiddle.net/UuHWR/

history.pushState(null, null, link.href);

How to Use HTML5's History API

This was taken from my blog at [procoder.io](http://blog.procoder.io/html5-history-api/) HTML5's history api is awesome. Believe me, it really is, and I bet you think so too. But what is something that you could really use it for? I'm going to show you one cool way I've used it in an application I made a few months ago. --- ####How Does it Work? Before getting into some code, let's explain how you can access history and change the browser url without a refresh. It's not too complex. In javascript you can use `history.pushState()`, and it works in all browsers! By *browsers* I mean every one except for Internet Explorer, who even considers that a browser anyway? --- Generally, you'll call the history api like this: