Programming « Nevan’s Page

Programming

Nominate New York Art

I’m putting New York Art up for nomination in the Best App Ever awards. I’ve put it in one of the smaller app categories, “Best Feel Like A Local App”. It’s a fantastic app for finding all sorts of art shows around New York, from the big famous museums to the tiny galleries in up and coming areas. You can search in categories and view the results on a map.

If you’d like to vote for the app, click here:
http://bestappever.com/c/lcap/322195848/nom

Voting closes on the 31st of December.

You can see details about the app over here:
http://nevan.net/newyorkart/

And here’s the iTunes link:
http://tinyurl.com/nyart

Mobile Orchard is one of the judges, and they’re offering to nominate their favourite app from readers. See here for details.

TinyUrl code

The tinyurl.com page has an example of urls you can use. One of them is tinyurl.com/3 which redirects to a unicycle page. I’d always assumed that they encode the url, in the same way as a zip file is an encoded version of the real file, but I guess they just have a database which keeps track of the codes. So somewhere in that database, there’s a place that says id=3 link=”unicyclepage.com/blah.html”.

It used to be that they were sequential, so if you type in tinyurl.com/4 then tinyurl.com/5 you can see those pages in the order they were input to the system. It’s always a security risk to do this, since you’ll get people who like to make scripts to go through all the pages. And you get people who can predict what the next one will be and mess with it like this.

Yesterday, I needed a way to refer to pages in a database, but didn’t want to use the primary key id (which auto increments) to do it. So I made a script to generate tinyurl style random patterns.

// make a tinyurl.com style id for pages. this one only generates 4 (or more) character // alphanumerics. there are about 1.6 million, should ben enough for most people. // it's not fussy about making pottymouth urls, like sex1 or feck, but the chances // are pretty slim... Oops, I ran it 5 times and got sexx! What're the odds? // examples: v7or vfbt im0x b7tu 59jx 3a4k a7kw mvg9 supe 1rx9 4ww6 tgpn ezb7 z6h1// let's see some examples for ($i=0; $i<14; $i++) { echo make_tiny(13); echo " "; }function make_tiny ($how_long = 4) { // make an array with the alphabet $alphabetnum = array('a','b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z', 1, 2, 3, 4, 5, 6, 7, 8, 9, 0); $return = ""; for ($i=0; $i<$how_long; $i++) { $char = rand (0, 35); $return .= $alphabetnum[$char]; } // could include some checking here, to see that you really have a unique id // for example, look in a database and compare the ids that are there // there's a chance that this will get recursive on your ass (if all ids are taken) // it needs extra checks to avoid an infinite loop if ($return == "v7or") { $return = make_tiny(); } return $return; }

CSS / Programming — No Comments
1
Aug 07

Making paragraph indent just like in the paperbacks

Pick up any paperback and look at the paragraph indentation. You’ll generally see that indentation isn’t used on the first paragraph after a heading, but is on the subsequent paragraphs. If there’s a big bold heading, it’s pretty obvious that a new section is beginning, but for the paragraphs after that, the indent acts as a visual clue, letting you easily see the organization. Here’s how to do that technique in CSS.

The trick we’ll use is the p+p rule. The plus sign in CSS means “immediately following”, so p+p means a p tag which comes straight after a p tag. This means that we can set paragraphs which don’t have a heading before them to indent. Paragraphs which follow a heading won’t be affected by this rule, but the next paragraph will be (since the tag before it is a p).

Here’s an example of the HTML code to use:
<h2>The secret history of animals</h2> <p>This paragraph is coming straight after an h2 tag, so the p+p won't apply to it. The p+p rule only applies to a paragraph tag coming straight after a paragraph tag</p> <p>This paragraph will be affected though, and so will another paragraph coming straight after it. It gives the paragraphs a very "designed" feeling, looking sleek and professional.</p> <p>Here's the last paragraph, just to prove a point. If we put another heading, then a paragraph after it, that paragraph will pick up the same traits too.</p>

Here’s the basic CSS to use:

p+p { text-indent: 1em;}

you can also explicitely state that the ordinary p should have a zero indent:

p { text-indent: 0; }

but it’s not really necessary.

Heres how it looks (with a little more formatting added:

And here’s the full code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>p_plus_p</title> <style> * { font-family: Georgia; color: #333;} div.box { width: 400px; } p { line-height: 1.3em; font-family: Arial, sans-serif; font-size: 0.9em; color: #000;} p+p { text-indent: 1em;} </style> </head> <body> <div class="box"> <h2>The secret history of animals</h2> <p>This paragraph is coming straight after an h2 tag, so the p+p won't apply to it. The p+p rule only applies to a paragraph tag coming straight after a paragraph tag</p> <p>This paragraph will be affected though, and so will another paragraph coming straight after it. It gives the paragraphs a very "designed" feeling, looking sleek and professional.</p> <p>Here's the last paragraph, just to prove a point. If we put another heading, then a paragraph after it, that paragraph will pick up the same traits too.</p> </div> </body> </html>

CSS / Programming — No Comments
27
Jul 07

Remember the symbol for class and id in CSS

I always mix up class and id in CSS. “Is class a dot or a hash?” “Is id a period or a pound?” So early on, I came up with a quick brain trick to help me remember which is which.

For id, the symbol is a # (hash or pound depending on your dialect). For this, I think of an id number, as in “My id is #43368″.

For class I think of the word period, and how in school we used to have a break period in the middle of the day for lunch. I imagine all these little dots sitting at their desks, and the bell going off.. end of class.

Mac / MySQL / PHP / Programming — No Comments
15
Jun 07

MacOS MySQL terminal tip

Desktop Clipping Here’s something that saves me time when I’m starting a new database and still testing PHP scripts which input to the database. I want to clear the database of all information, but don’t want to have to recreate the database structure. I just want a bare bones database with no content, so I can see exactly what information is going in and what information is getting messed up along the way.

I’m working in terminal. I write a series of commands to delete the contents of the tables I want cleared. Instead of pressing return each time, I separate them with a semicolon. Here’s an example:

delete from authors;delete from reports;delete from paper_authors; delete from journals;

This deletes all information from the four tables: authors, reports, paper_authors and journals.

Now I highlight the line, right up to the last semicolon, and drag it to the desktop to make a clipping. Next time I want to clear my db, I drag the clipping from the desktop onto the terminal window and press enter. Automagic.

You can do this with any command you want too, from ftp open commands to long folder names. Drag any folder onto the terminal window and the path shows up, saving lots of stubby fingers.

And for an extra bit of magic, look what happens when you drag a folder on a BBEdit or Textedit window. Useful for folders of mp3s.

google / HTML / Programming — No Comments
6
Jun 07

Google maps – embed a map in your page

When you get a new google map api, they give you some sample code to start with. If you want to put that code into it’s own page, with just the map, it’s easy enough. Just make a new page, paste the code in and save it. That’s what I did with my sample code. If you want to add that map to a page (like this page), you can use an iframe to do it. An iframe is just a html page embedded in another page, like a little window. So if I want to put this page:

http://nevan.net/maps/map.html

into this page

I can code it like this:

<iframe src="http://nevan.net/maps/map.html" style="width: 520px; height: 320px;"></iframe>

Here’s the result:

As a note, I gave the iframe 20 pixels more height and width to make up for margins and avoid scroll bars appearing.

Programming — No Comments
6
Jun 07

Google Maps – very easy to add to my site

I just added google maps to my site, and it was much easier than I thought it would be. A while back, I tried to get google adsense, but found that you need content before they install it. Google maps is much easier, all they need is a website and directory where it’ll be used, and a google id. Here’s how to do it..

If you haven’t got a gmail account, go get one at http://gmail.com

Go to the google maps api page http://www.google.com/apis/maps/ and fill out the site and directory where you want to put maps. I put in http://nevan.net/maps/

You’ll get an api key which you can use in pages, and sample code, with a map centred on somewhere in America. Here’s what the code gives:

http://nevan.net/maps/map.html

In all, the whole thing only took 3 minutes. Next, it’s time to start learning how to change the maps.

Programming — No Comments
8
Feb 07

Dreamweaver – Changing Preview in Browser Keyboard Shortcut

I wanted to change the default shortcut key to preview in browser in Dreamweaver. Mac OSX has stolen the old key F12 for dashboard, and the alternative key, opt-F12 is too hard to remember. It took me a good 30 minutes to figure out how to do it, ending up with a web search which led to the Macromedia help site.

Here’s the trick: Go to the keyboard shortcuts in the “Dreamweaver” menu. Then select the pulldown menu for “Menu Commands”. Select “Document Editing” and find “Preview in Primary Browser”. Click on it to highlight, then you can see the shortcut currently in use. Click in the press key box and press the key you want to launch the browser. Click the change button. It asked me to save my settings into a new set, then I had to go back and select the key again.

Here’s the link to the Adobe help page

PHP / Programming — No Comments
6
Jun 06

Hello world!

PHP Basics

Here’s the most basic thing you can do in PHP, print something on the browser screen. The command for doing this is print. So the command to print “hello” is

print “hello”;

with a semicolon at the end. Put this between some PHP markers <?php to start and ?> to end, and you have a php program.

<?php print “Hello”; ?>

You can do it other ways, like putting the word in brackets

<?php print(“Hello”); ?>
and it won’t change the output. you can leave out the semicolon since this is the only statement

Nevan’s Page