Terminal – calculate number of lines of code in a directory

We had an interesting question, can we calculate how many lines of code we have written for an entire project? It turns out this isnt the easiest thing to calculate for a web-project, but we gave it a go. This is the best we have come up with so far for all code we have written to calculate the number of lines of code in all PHP, CSS, JS, HTML and HTM pages.

( find ./ -name '*.php' -print0 -o -name '*.css' -print0 -o -name '*.js' -print0 -o -name '*.html' -print0 -o -name '*.htm' -print0 | xargs -0 cat ) | wc -l

The answer for our particular project was 1500784 lines of code!

If you wanted to do just PHP pages its rather easier:

( find ./ -name '*.php' -print0 | xargs -0 cat ) | wc -l

CSS Background always fill all available space

I’ve been trying to do this for absolutely forever – have a background image that always covers the screen, regardless of the size or orientation of the screen, and with no visible space. I finally found out how to do it using nothing but CSS applied to the body, so here it is!


body
{
background-color:#444444;
background: url("/public/img/imageName.png") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

Your handwriting… as a font!

Ever wanted to turn your own handwriting into a font? Well now you can! Its a very simple process (although it might shock you how childish your handwriting is if you are like me)

Simply go to http://www.myscriptfont.com

Download the template file

Screen Shot 2014-01-15 at 09.09.31

Complete it, scan it in greyscale at 300dpi, A4 and then upload, and hey-presto, you have your own font!

On the Mac its really easy to install (just double-click on the downloaded file and then click on the install font button), if you are on Windows its a bit more complicated, but there is a nice tutorial on the PC Pro Blog

You can use your own font on any website you make too, by using CSS3 like so:

@font-face
{
font-family: YourFontName;
src: url(yourfontnameinlowercase.ttf);
}

body
{
font-family: YourFontName;
font-size: 1.2em;
}

NB. Its important that your font file name is all in lowercase otherwise it ¬†won’t work on Internet Explorer. I use size 1.2em as the handwriting font can be a bit on the small side for on-screen reading.

PS. If you hadn’t already realised, provided my CSS3 works on your browser, this post is in my handwriting!