Sam Doyle

Convert Jpeg to ASCII with PHP

admin — Wed, 12 May 2010 19:50:59 +0000



Ascii





    JPG img URL: 

    

> 16) & 0xFF;
            $g = ($rgb >> 8) & 0xFF;
            $b = $rgb & 0xFF;
            if($w == $width){
                echo '
';
            }else{
                echo '#';
            }
        }
    }
}
?>

I can’t take any credit for this…. I saw it over at PHPSnips and thought it was cool

Cross Browser Compatable Rounded Corners with CSS3 & jQuery

admin — Mon, 10 May 2010 18:50:09 +0000

Today (at my Day Job) I had the task of taking a PSD and slice it up ready to go into a CMS. For the first time I decided it was time to start using some css3 and html5.

Everything was running smoothly until I hit the main navigation. Each navigation item needed to have an oval background on hover. See below.

Please excuse my dodgy paint drawing…. I’m on my girlfriends laptop at the moment with no photoshop.

After an hour or two’s research I found the perfect concoction. I’m going to explain below how to take a block level element and make the corners rounded.

I’m going to write all the code and comment it so you can see where I’m coming from.







 
 Your Website

Thanks to Chris @ Css-tricks.com for his html5 page structure.

Images Blocked by Ad Blockers

admin — Mon, 19 Apr 2010 10:25:46 +0000

A while back I spent about 3 days wondering why some of my images weren’t being displayed on a particular clients computer.

There was nothing out of the ordinary, he was running Window’s Vista and Internet Explorer 8. What we didn’t realise was that because I’d placed said images inside a folder named “banners” and said computer was running behind a networked ad blocker. My images weren’t getting through.

Attached is a PDF containing all varieties of deviation NOT allowed by different ad blockers. I hope this comes in handy as much to you as it did me.

PDF Can be downloaded form here: blocked images.

CSS3 Pseudo-Class Selectors Emulation in Internet Explorer

admin — Mon, 22 Mar 2010 20:35:55 +0000

Keith Clark, an independent web developer from the UK, has developed a JavaScript solution to IE’s CSS3 shortcomings in relation to CSS3 selectors. CSS3 selectors became the first W3C module to reach proposed recommendation status back in December 2009.

His ie-css3.js project (currently in beta) allows Internet Explorer, versions 5 through 8, to identify CSS3 pseudo-class selectors and render any style rules defined with them. All this is achieved by simply including the script, along with Robert Nyman’s DomAssistant, within the head element of your web pages.

Supported Pseudo-Classes

:nth-child
:nth-last-child
:nth-of-type
:nth-last-of-type
:first-child
:last-child
:only-child
:first-of-type
:only-of-type
:empty

Limitations of the project

Style sheets MUST be added to the page using atag. Page level stylesheets or inline styles won’t work. You can still use @import in your style sheets.
Style sheets MUST be hosted on the domain as the page.
Style sheets using file:// protocol will not work due to browser security restrictions.
The :not() pseudo-class is not supported.
The emulation is not dynamic. Once the styles are applied they are fixed so changes to the DOM won’t be reflected.

How does it work?

ie-css3.js downloads each style sheet on the page and parses it for CSS3 pseudo-class selectors. If a selector is found it’s replaced by a CSS class of a similar name. For example: div:nth-child(2) will become div._iecss-nth-child-2. Next, Robert Nyman’s DOMAssistant is used to find the DOM nodes matching the original CSS3 selector and the same CSS class is applied them.

Finally, the original stylesheet is replaced with the new version and any elements targeted with CSS3 selectors will be styled.

Bypassing IE’s CSS parser

In accordance with the W3C specs, a web browser should discard style rules it doesn’t understand. This presents a problem — we need access to the CSS3 selectors in the style sheet but IE throws them away.

To avoid this issue each style sheet is downloaded using a XMLHttpRequest. This allows the script to bypass the browsers internal CSS parser and gain access to the raw CSS file.

CSS Text Rotation

admin — Mon, 22 Mar 2010 20:26:13 +0000


.rotate {

/* Safari */
-webkit-transform: rotate(-90deg);

/* Firefox */
-moz-transform: rotate(-90deg);

/* Internet Explorer */
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

}

This text would be rotated

The example above rotates text 90 degrees counterclockwise.

The rotation property of Internet Explorer’s BasicImage filter can accept one of four values: 0, 1, 2, or 3 which will rotate the element 0, 90, 180 or 270 degress respectively.

How To Create Custom Error Pages

admin — Fri, 19 Mar 2010 12:14:37 +0000

Within your .htaccess file add the following lines (and obviously change the filesnames/directories to suit your own needs):

ErrorDocument 400 /errors/badrequest.html
ErrorDocument 401 /errors/authreqd.html
ErrorDocument 403 /errors/forbid.html
ErrorDocument 404 /errors/notfound.html
ErrorDocument 500 /errors/serverr.html

BillForBill.com @billforbill

admin — Fri, 19 Mar 2010 12:03:26 +0000

A few days ago I posted a normal complaint about #IE6. The twitter account @billforbill picked up on my tweet and send me a message telling me I may be interested in http://www.billforbill.com. So I had a quick look. I instantly thought what a brilliant concept.

The general idea is simply to collect a rough Idea of much time and money has been wasted “hacking” Internet Explorer 6 to get it work correctly.

All you do is fill in 3 fields: How many websites have you optimised for IE6? How many hours do you spend doing this per website? How much do you charge per hour? The backend of the site will then work out a total of much time/moneys been wasted and add it to a rolling bill. With the intention of presenting this bill to Bill Gates.

Now I’m under no illusion that this is going to instantly make Microsoft see sense and deminish IE6 but in my opinion anything that’s working against IE6 get a big fat thumbs up!

Check out the website at www.billforbill.com or the twitter account @billforbill

CSS Reset – Reduce Browser Inconsistancies

admin — Mon, 01 Mar 2010 15:49:15 +0000

To see the reasoning behind the need for a css reset, read here.

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, font, 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 {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}

/* remember to define focus styles! */
:focus {
	outline: 0;
}

/* remember to highlight inserts somehow! */
ins {
	text-decoration: none;
}
del {
	text-decoration: line-through;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: collapse;
	border-spacing: 0;
}

My Basic Page Structure | UTF-8 | Strict Doctype

admin — Tue, 23 Feb 2010 15:13:00 +0000

Might be of use to someone:






     

     Test Page

Wordpress: Disable Automatic Formatting Using a Shortcode

admin — Tue, 23 Feb 2010 15:03:18 +0000

function my_formatter($content) {
       $new_content = '';
       $pattern_full = '{(\[raw\].*?\[/raw\])}is';
       $pattern_contents = '{\[raw\](.*?)\[/raw\]}is';
       $pieces = preg_split($pattern_full, $content, -1, PREG_SPLIT_DELIM_CAPTURE);

       foreach ($pieces as $piece) {
               if (preg_match($pattern_contents, $piece, $matches)) {
                       $new_content .= $matches[1];
               } else {
                       $new_content .= wptexturize(wpautop($piece));
               }
       }

       return $new_content;
}

remove_filter('the_content', 'wpautop');
remove_filter('the_content', 'wptexturize');

add_filter('the_content', 'my_formatter', 99);

This goes in the PHP in your functions.php file. Once done, you can use the [raw] shortcode in your posts: [raw]Unformatted code[/raw]

I grabbed this from CSS-Tricks. All credit to Chris Coyier who owns CSS-Tricks.