Two color text header

Here’s a nice HTML and CSS trick – making text split with different colors.

Two tone title in CSS

The trick is to make 2 DIVs with the same text content in the same place (using CSS position) and make the top one a different color and only half height (setting the height to slightly over half a line using height: 0.6em and overflow: hidden)

Demo here.

Share this:
Share this page via Email Share this page via Stumble Upon Share this page via Digg this Share this page via Facebook Share this page via Twitter

Natural language web design program

I’ve been playing around with natural language processing again. It’s really nice to communicate with a program using text commands rather than messing about with buttons and dialog boxes.

I’ve been working on a natural language web page designer. This is a very rough beta version for testing so have a play and send me feedback (what works/doesn’t work, things which aren’t clear in the helpfile).

Some knowledge of HTML and CSS is useful but not essential. Look at the example code and I’m sure you’ll get the idea.

Share this:
Share this page via Email Share this page via Stumble Upon Share this page via Digg this Share this page via Facebook Share this page via Twitter

Preventing Cross Site Scripting (XSS) In Your Code

Cross-Site Scripting (XSS) is a vulnerablity where an attacker can put their own code on your site. Often javascript is used so I’ll use it here in my examples.

Here’s a code example:
(more…)

Share this:
Share this page via Email Share this page via Stumble Upon Share this page via Digg this Share this page via Facebook Share this page via Twitter

Centering a page using CSS

There’s a great trick here. Some pages on your site will have more content than others. When the user goes from one page to another and the vertical scrollbar appears or disappears then the centered page shifts. To fix this, I use CSS to always show scrollbars so that content centers consistently.
(more…)

Share this:
Share this page via Email Share this page via Stumble Upon Share this page via Digg this Share this page via Facebook Share this page via Twitter

Preventing Email injection in a webapp form

Suppose I have a feedback form on a webpage. Something like:


<form method="get" action="testmail.php">
Email: <input name="email" type="text" value="" />
<br />
Feedback: <textarea name="feedback"></textarea>
</form>

And suppose I deal with it in PHP a bit like this:


$from = '' .POST["email"];
$feedback = '' . $_POST["feedback"];
$rtn = mail('james@rootdev.com', "Feedback from website", $feedback, "From: " . $from);

What could possibly go wrong?

Quite a lot.
(more…)

Share this:
Share this page via Email Share this page via Stumble Upon Share this page via Digg this Share this page via Facebook Share this page via Twitter

Demonstrating the need for HTML and SQL encoding by building an insecure blog and hacking it

I’m going to create the worst blogging software in the world, consisting of a single web page displaying a list of comments and where users can post new comments or search for comments. The data will be stored in a MySQL database. The site is going to have horrendous security flaws (on purpose). Then I’m going to hack it’s innermost secrets just through the web page. Then I’ll show you how to make it secure.

(more…)

Share this:
Share this page via Email Share this page via Stumble Upon Share this page via Digg this Share this page via Facebook Share this page via Twitter

How to make a ‘share this on Twitter’ link in a webpage

Should produce valid HTML and work nicely, mostly the work of Jamie Huskisson and Herself’s Webtools.

<a href=”http://twitter.com/home?status=I+like+http://yoururlhere/”> Share this on Twitter </a>

Share this:
Share this page via Email Share this page via Stumble Upon Share this page via Digg this Share this page via Facebook Share this page via Twitter

How to make a ‘share this on facebook’ link in a webpage

The title needs to be correctly url encoded.

<a target=”_blank” href=”http://www.facebook.com/sharer.php?u=http://yoururlhere/&amp;t=This+is+the+title”>Share this on facebook</a>

The ampersand “&” between the parameters is HTML encoded which is a bit fussy but correct.

Share this:
Share this page via Email Share this page via Stumble Upon Share this page via Digg this Share this page via Facebook Share this page via Twitter

How to make a ‘Digg this’ link in a webpage

Although there’s a Digg widget on their website I find it annoying. It’s in javascript and slow to load and it shows an error when I’m testing pages on my local machine which aren’t accessible on the web.

The title is url encoded.

<a target=”_blank” href=”http://digg.com/submit?url=http://yoururlhere/&amp;title=This+is+the+title”>Digg this</a>

The ampersand “&” between the parameters is HTML encoded which is a bit fussy but correct.

Share this:
Share this page via Email Share this page via Stumble Upon Share this page via Digg this Share this page via Facebook Share this page via Twitter

How to make an ‘email this’ link in a webpage

The trick here is to do a mailto: link and pass URL-encoded parameters called “subject” and “body”. I found that the ridiculous Windows email client on this machine (which I never use except for testing this) doesn’t understand spaces encoded as “+”, it needs “%20″.

<a href=”mailto:?subject=This%20is%20the%20subject&amp;body=http://yoururlgoeshere/”>Email this</a>
The ampersand “&” between the parameters is HTML encoded which is a bit fussy but correct.
Share this:
Share this page via Email Share this page via Stumble Upon Share this page via Digg this Share this page via Facebook Share this page via Twitter