Mick Redman

Thursday 25 November 2010

Some of my favourite free stuff

For those of you not subscribed to my delicious feed at http://www.delicious.com/guitarbeerchocolate, I thought I would share with you some of my favourite links to free tools and content. Happy clicking!

http://colorschemedesigner.com/
http://html-ipsum.com/
http://snipplr.com/
http://search.creativecommons.org/
http://www.fontsquirrel.com/
http://code.google.com/

Friday 19 November 2010

PHP API call to Summarity

Summarity at http://www.summarity.com/ is software which summarises items of text. They helpfully provide an API for developers to use. There is an example of how to call the API using python on the website. I don't use python. I use PHP. So I went about writing the API call in PHP. So below is an example of how it's done. You will need to get your own API key. I hope it's obvious where to add your text string.

<?php

$url = 'http://summarity.com/apiV1';

$data = 'summarity_api_key=yourAPIkey';

$data .= '&text='.urlencode('Just some text for testing');

$ch = curl_init($url);

curl_setopt($ch, CURLOPT_POST, 1);

curl_setopt($ch, CURLOPT_POSTFIELDS, $data);

curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);

$response = curl_exec($ch);

curl_close($ch);

echo(json_decode($response));

Thursday 18 November 2010

PHP to get current file name without the extension

This little function will return the file name which calls it minus the .php extension.

<?php

function getCurrentFile()
{
   $currentFile = $_SERVER["SCRIPT_NAME"];
   $parts = Explode('/', $currentFile);
   $currentFile = substr($parts[count($parts) - 1],0,-4);
   return $currentFile;
}
?>

jQuery line to reflect h1 in page title

Quite often you want the title tag of your page to be the same as your title. This little jQuery line will do that for you.

$('title').text($('h1:first').text());

How to get all the content from a directory using PHP

I've been developing a small CMS. It solves a small problem. Some of our customers would like to edit small amounts of text on a page. I don't want to create a CMS database for this. I just want to use text files. There is a tiny CMS which does this, but your website has to be in root, there is an install and it's a bit of a pig to configure.
My CMS is much simpler than that.
Anyway, to cut a long story short I created a PHP function for it which I wanted to share. It takes a directory name as a parameter then looks at that directory and reads all the files within it. Obviously missing out those ugly . and .. at the beginning. Manipulate at will.

<?php
function getDirContents($dirLoc)
{
   foreach(array_slice(scandir($dirLoc),2) as $fileEntry)
   {
   echo file_get_contents($dirLoc.'/'.$fileEntry);
   }
}
?>

Use of Bokeh

Bokeh are those pictures we see of blurred spots of light. They are a very useful texture, common among good web designs. Below is an example of how they can be used.

See demo.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Use of Bokeh</title>
<style type="text/css">
*
{
margin:0;
padding:0;
}
html, body
{
font-family:Sans-serif;
font-size:0.96em;
background:#000000;
color:#CCCCCC;
}
#container
{
margin:0 auto;
width:920px;
}
#navigation, #content, #highlights, #footer
{
display:block;
}
#navigation, #footer
{
height:40px;
}
#navigation
{
text-align:right;
}
#navigation a
{
color:#CCCCCC;
text-align:center;
text-decoration:none;
width:80px;
height:40px;
padding-top:10px;
padding-left:10px;
padding-right:10px;
display: inline-block;
}
#navigation a:hover
{
background:url(http://farm5.static.flickr.com/4081/4995562250_2dfe171a8d_t.jpg) repeat-x;
}
h1, h2
{
font-family: Georgia, Serif;
font-weight:lighter;
font-style:italic;
}
h1
{
font-size:4em;
}
h2
{
text-align:left;
font-size:3em;
}
#content
{
background:#000000 url(http://farm5.static.flickr.com/4153/5000536973_2d2634aba3_b.jpg) no-repeat right top;
margin-left:20px;
margin-right:20px;
padding:10px;
color:#FFFFFF;
}
#content p
{
text-align:justify;
width:400px;
}
#highlights
{
margin-left:10px;
}
.highlight
{
float:left;
width:260px;
margin:20px;
}
.highlight p
{
text-align:justify;
}
#footer
{
clear:both;
}
#footer p
{
text-align:center;
padding-top:10px;
}
</style>
</head>
<body>
<div id="container">
<div id="navigation">
<a href="#" class="subMenu">home</a>
<a href="#" class="subMenu">products</a>
<a href="#" class="subMenu">services</a>
<a href="#" class="subMenu">about</a>
</div>
<div id="content">
<h1>Important Header</h1>
<h2>Less important header</h2>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante.</p>
</div>
<div id="highlights">
<div class="highlight">
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
</div>
<div class="highlight">
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
</div>
<div class="highlight">
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
</div>
</div>
<div id="footer"><p>This could be a very long footer.</p></div>
</div>
</body>
</html>

Tuesday 16 November 2010

Using css3pie with on HTML5 for cross browser effects

I have been using css3pie from http://css3pie.com/ for some time now. In order to run the test below, you will have to download it. You could put it in a scripts folder as I have but it doesn't matter. The example below contains a few elements which will make it work cross browser.
Firstly, I have added the html5.js reference at the top.
Secondly, I have reset the * and body values.
Thirdly, I have use em insted of px.
Finally, I switched the gradient around on the -pie-background call.
Enjoy!

See demo.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS3pie test</title>

<style>
*
{
margin:0;
padding:0;
border:0;
}
body
{
font-family:Sans-serif;
color:#FFFFFF;
font-size:1em;
line-height:140%;
}
section#borderRadiusExample
{
background:#6BC2E8;
width:10em;
padding:0.62em;

/* rounded corners */
border-radius:0.62em;
-moz-border-radius:0.62em;
-webkit-border-radius:0.62em;

/* Shadow */
box-shadow:0.3em 0.3em 0.3em #CCCCCC;
-moz-box-shadow:0.3em 0.3em 0.3em #CCCCCC;
-webkit-box-shadow:0.3em 0.3em 0.3em #CCCCCC;

/* Linear gradient */
background-image:-moz-linear-gradient(90deg, #6BC2E8, #ABDEF3);
background-image:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#6BC2E8), to(#ABDEF3));
-pie-background:linear-gradient(90deg, #ABDEF3, #6BC2E8);

behavior:url('scripts/PIE.htc');
}
</style>
</head>
<body>
<section id="borderRadiusExample">
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
</section>
</body>
</html>