Uncategorized

How to Actually Use Your Computer: Part 3

Feeling in a rather procrastinatic (word?) nature, I’ve once again displayed my utter aptitude in presenting delayed articles. This is the third part in the series, so you might want to check out part 1 – a general overview on the types of computer users, and perhaps even part 2 – about web browsing, email & PIM, IMs, and document editing.

Right now, being 00:18AM (and counting!) I’m going to continue this series to talk about a few hidden tricks and activities you could use your computer for that you might not be accustomed to normally.

RSS Feeds

It’s amazing how many people who don’t know what an RSS feed is. RSS stands for Really Simple Syndication (yeah, really) and is basically a format of a web feed. In technophobe terms, this means it’s a fancy new way you can access information. For example, you can access your emails through your email client, you can view web pages with your web browser, and now you can view RSS feeds with, well, an RSS aggregator (or reader). Ok, it’s more complex than that, but that’s all you really need to know.

Let’s use a practical example to explain the usefulness of an RSS feed. Let’s say you absolutely love the thinkMoult blog, and you want to keep up to date on it all the time without getting extra spam in your inbox notifying you of updates. Well, like most blogs, we offer an RSS feed (hint: that was a link to our feed URL) You can input that URL into your RSS aggregator (which is a program you can download), and you can now easily view each post just as it is: a snippet of information, instead of laid out in this bulky (though beautiful) webdesign. It allows you to quickly parse information from all around the web in bitesize pieces. Don’t read too many blogs? You can also use it perhaps for comics, such as Dilbert or XKCD. Now you don’t need to remind yourself to check those pages for updates every time you’re online.

Multiple IM Protocols

Now, that’s just a fancy and technical way of saying MSN Messenger isn’t the only thing that exists. You can use Skype! You can use Jabber (such as GTalk), Yahoo chat, and there are so many other popular IM services that people use, you might just need to sign in to those accounts to make sure you can contact all your clients or important whomevers you meet online. I personally use Skype, MSN, and GTalk all the time.

You might find it’s a hassle to manage the multiple accounts, but fear not! There are less handicapped programs than your Windows MSN Messenger that actually support multiple protocols! For example, I use Kopete on KDE, and I can sign into all my accounts (save for Skype) with just one client. It really makes life easier.

Also, I know it isn’t exactly IM, but you should also familiarise yourself with IRC. IRC stands for Internet Relay Chat, and it’s what the whole online community used before other things got invented. Right now it’s still a massively popular form of communication, though mostly populated by people of the more intelligent and technical sort. It’s basically a huge chatroom (think 800 people per channel) categorised by topic. There are many IRC servers, though the most common is arguably irc.freenode.net. What you’ll need is an IRC client (try HydraIRC on Windows or IRSSI on Linux), and connect to the irc.freenode.net server. Once in, you might want to try joining some channels related to what you’re interested in. For example, I can be found regularly in #gentoo, #gentoo-kde, #gentoo-chat, #blenderchat, #vim, and occasionally some others depending on what I’m doing.

Set up a Personal Server

Yes, you can easily set up your own web server, even on Windows. You don’t need to be a rocket scientist. There’s this nifty little prepackaged LAMP setup (that’s Linux Apache MySQL, and PHP) in the disguised form of XAMPP. The absense of the L means it probably works on Windows, eh? The extra P is probably for Python or Perl, but I haven’t poked too much in the package to find out personally.

What use is a personal server? You can dump your files in it, give others your IP, and then they can easily download files from you. If you’re on a network (even through your router), you can easily transfer files from one computer to another at speeds reaching up to 1gb per second (either that or the little notification window lied). If you’re into webdesign, or need an environment to run PHP scripts, that’s the perfect place to do it! Or even if you want to use PHPMyAdmin (oh, the extra P could be that too) to interface with your MySQL databases (if you use them, of course) a server is probably the most useful thing you could have.

Set up some transfer protocols

We’ve all known the popular protocols, FTP, SSH, SFTP, Telnet, etc. Why don’t you set it up on your own computer? Let people upload files to your computer. Let people connect to your computer and control it remotely! If you have an X server, let people do X tunneling through SSH so from anywhere you can access your GUI applications. Or if you’re braver, setup a VNC server too so that you can control it as though you were sitting right in front of it!

You’d probably have to do some research on how to set these up for your operating system (for Linux just check your package manager), but it’s worth it. The ability to remotely access and manipulate your data from anywhere in the world is priceless. It has plenty of uses too! You can access your files from anywhere (that’s the obvious one). You can debug applications or even your failing router. You can have two people connect to one computer and run tutorial sessions, or do Extreme Programming (a style which involves two programmers working at the same time).

A word of warning though, please learn how to secure these connections, you don’t want random people poking through your stuff.

Well, that’s it for this part of the series. I realise it’s turned ever so slightly more geeky, so I promise the next part will be a lot simpler. If you aren’t of the technologically savvy type and you are reading this, you have a huge amount of research to do before you can find out how to accomplish all these things. However, repeat after me: “It’s worth it.”

Uncategorized

How to Make a Website Part 1 – The Environment

Creating a new website from scratch into the next killer web-app is always tough, but the journey there can always be a fun one, given that your workflow is right, you know what you aim to achieve, and you’ve got the right tools for the job. I’ve decided to document the creation of The E2 Project, which is basically the re-creation of E2.

During the documentation, I will also teach you the do’s and don’ts of website creation. These are often overlooked, and you’d definitely pick up a lot of tricks that normally take years of experience to develop.

Understanding the resources around you.

Here’s a list of useful resources for the impatient: HTML, CSS, PHP, MySQL, Javascript, Ajax, Free scripts (yes, really), stock images, SVN, Git, Mercurial, Image editing applications (The GIMP), text editors (Vim).

OK, firstly I’m going to talk about setting up your mental and physical environment before you start a project. A lot of people who don’t develop with computer more than often disregard this vital step, and end up rushing or making a mess of things. The first step is to make sure you know what you want your site to do. Will it be a blog? Will it be your online portfolio? Will it be yet another youtube clone? If you know what it does, you should also know what type of person will use it, and what features it should have. You need to be clear on what features it should have, as that’s the bulk of any web-app.

Assuming that you now know what your site is about and what features it will offer, it’s time to make sure you really know what’s going on. Has it be done before? If it has, what can you offer that other sites don’t? What can you learn from existing websites? Are there useful javascript or ajax snippets that can give your webpage that extra zing that makes it stand out? For example, people developing a personal portfolio website might be interested in Lightbox, as that’ll improve continuity on the site and remove layout restrictions. It also makes things look cooler in general. (yes, I really said that)

The next step is to know your limits. You will need to know HTML back to front. Sure, you can forget tags, but as long as you know they exist, that’s fine. As the saying goes, the great programmer doesn’t need to remember it all. There’s really nothing wrong with using cheatsheets. If you do know HTML, make sure you know how to validate it. If you’re epically extreme about this, make sure you can get XHTML 1.0 Strict validation on all your pages. It’s all about discipline, and in the end it helps with cross-browser functionality and compatibility with newer devices like mobile phones. Just take the extra step, and please, oh please, validate your code.

Do you know CSS? Do you use CSS? Any site nowadays should only contain semantic markup and use CSS to effectively seperate design from layout. No matter what you do, do not use tables for layouting. It’s bad. It’s evil. It causes the folks in the #css IRC channel to condemn you to heck. It’s good practice. If you’re unsure what I’m talking about, read this handy guide. Of course, also don’t forget to validate your CSS code.

Do you know PHP and MySQL? True, this isn’t the only way to make sites, but it sure is popular, and hell powerful. How good are you at it? Do you know OOP, do you know MVC (or other framework styles)? If you answered no to either one, take your time to go and re-learn PHP. You’ll might find you’ve been doing it all wrong. Don’t disregard that warning, really, take your time and re-learn what it is.

How big is the project? Do you need version control for it? It’s quite comon for people to dump version control for web projects, even individual ones, as it really makes the developing stage less confusing. If you don’t know what version control is, try search it up, then search up CVS, SVN, git, and Mercurial. You should try it out on your system, get familiar with it and perhaps use it in your next project.

Are you good at design? This does not necessarily mean you have to be a wiz at something like Photoshop (ewww) or The GIMP, there are some really simple designs that look amazing. If you do follow the “Create graphic image” -> “Slice” -> “Create web-app” workflow like most do, do you know how to use CSS in the slicing stage? Do you know how to create a design that won’t break in flexible layouts? Do you know how to solve the never-ending battles with CSS and IE? (Yes, all those dirty coding hacks that are so troublesome)? Do you have good stock graphics? Most disregard stock graphics, but they really add shine to the page. Have you considered web load-times and optimisation when designing? There are hundreds of things to consider, and over time all these things become natural.

Don’t underestimate planning and protoypes.

Don’t underestimate the importance of this step either due to the shortness of this section. User Interface is almost the most important thing that exists on a webpage. Don’t get me wrong, I’m not saying that your backends and server-side scripts aren’t going to do the trick too, it’s just that your site is going to be used. To be honest, change the splash image of any application, and even if you don’t add any new features, it already looks as though it’s had a bunch of action packed updates over the last version. You want to have a clear idea of several things:

  1. The homepage of the site. This is the very first page people see, and the most important of all. This is what gives them their first impression, this is the page that should explain what you do, why you exist, and how you can benefit the user in less than a minute. This will be the central template design (especially for large scale sites) that defines the organisational structure and navigation style used throughout. Do not ever be inconsistent with design.
  2. Your databases. Yes, that’s right. You want to know what’ll be stored, where it’ll be stored, what’s the best way to store it so it can be used efficiently. The word that must be drilled into your head is modularisation. (Not a real word, but we aren’t learning English here, are we?) Basically, you want to use it one way, and any way you might think of in the future. I’ll cover this in more detail when I talk about setting up databases later.
  3. The system and framework. Yes, I stress frameworks again. Too many a PHP script kiddy has spewed out nothing but spaghettic logic. It’s not a fate you deserve. What framework are you going to use? Build your own? Use a preexisting one? Any needed libraries? How should you divide the logic framework into modules?

Work, flow. Work!

The third and last topic I will cover in Part 1 of this series is workflow. This is VITAL. Read that again. That’s the acronym for Very Important Topic Aids Learning. I won’t go into much detail, because all my next parts will focus on workflow too. Some thing you might have noticed here. I did not mention servers or domains. That is NOT your concern. Too much worrying about servers and domains will leave you with a crappy system that’s up 100% of the time. Which nobody wants. You need to make your site? Need a server? Install Apache on your localhost and build it there. Don’t waste money on a half-baked-idea.com.

Workflow is amazingly flexible, but there are some one-size-fits-all that works. The first thing you want to get out of your way is the environment stuff I talked about in the first topic I covered. Know back to front what’s going on and how it’s going to go on. Assuming you have that all worked out, you’d want to create a design using an image editing program. Even if your site is something like Google or Yahoo that has a high text:image ratio, you want to visualise it first. No point playing around with CSS if you haven’t got a clear image in your head. Once you’ve got your visualisation done (good for the home page), create a valid HTML and CSS slice of the page. Split it up into template files and start organising and creating dummy filesystem structures in your framework. Create a couple static non-dynamic pages just to check the flexibility of the layout (stretches, different tags: forms, inputs, divs, headers), check cross-browser compatibility, and then when you’re done, make the home page and fill it with placeholders as necessary.

Now you can start working on the actual logic and system of the website (excluding previous framework setup). The first step is to create all your needed database tables, and choose the appropriate field types and set values. After this, since I use an MVC framework for most of my sites, I like to work pretty much … in that order. I build the models first, build the views, then just connect everything beautifully with the controllers. I generally like to start with building the user system, which is often the key and wire system of a website. This covers easy stuff like database input, form building, error and message templates, and general usability of the site. It’s the perfect “mini-system” to test the effectiveness of your framework, templating system, and helper libraries.

It all pretty much spins off from there, before venturing to code debugging, stress and user testing, hacking preventation, and advertising. Website creation is a huge topic, and unfortunately a text-heavy one too. Hopefully I’ll write part 2 soon!

Uncategorized

CodeIgniter – Simple, clean, MVC framework for PHP.

People learning PHP go through the wonderful stages of <?php echo 'Hello, world!'; ?>, the then branch off into either: 1) Wow! It’s so dynamic! Let’s create everything right here right now! or 2) Wow! It’s so messed up I don’t know $int from $char! Unfortunately, the people who belong in (1) tend to spend the next couple years in an ignorant bliss, spewing out hundreds of lines of non-OOP code with a structure somewhat like this:

<?php
include './inc/template/header.php';
if ( $p == '' )
{
include './inc/pages/index.php';
}
elseif ( $p == 'about')
{
include './inc/pages/about.php';
}
[... etc ...]
else
{
include './inc/template/404.php';
}
include 'footer.php';
?>

Well. Look familiar to anybody? (or even worse examples!) Hah! My good sir, you have just missed out on the programming epiphany of the century. Any script kiddy with the guts to program before learning OOP should have their guts removed, quartered, and stuck up as a warning to other coders. So, if you are doing PHP, but you don’t know what OOP or MVC is – here is your cue to fricass√© your arse and get ready for some late nights of programming ecstasy.

This post is somewhat a half-rant about the disadvantages of coding without any OOP or proper framework, and also a sort of happy unrelated babble talk brought about by me recently opening up (g)Vim again to code some very simple PHP, then taking a look at POSE2. For those that don’t know, POSE2 was the project to basically make E2 as open as possible. It’s an MVC (Model-View-Controller) framework, with no built-in helper classes. It’s extremely minimalistic. It was used to construct VisionBin, and E2-Productions.com currently runs on it too.

Hilariously enough, I fell into the common programmer trap of recreating the wheel. That’s why now, instead of advertising my oh-so-awesome POSE2 system, I’m going to be recommending you CodeIgniter. CI is a fast, clean, superbly documented MVC PHP framework. Or so I say before trying it out properly. Let’s actually see how awesome it is. I will type this post out live as I convert the extremely simple E2 site from POSE2 to CI.

Ok, apparently my connection hates me as it keeps on failing to download the tiny CI source files. After several retries, I finally am ready to start …. ok, uploading onto E2. This is great as I don’t get a lot of extra unneeded files in the / directory (except for index.php, obviously!), so everything is nicely tucked away in the system directory. Ok, quite a lot of files being uploaded here, but compared to other frameworks, this is slim. Let’s try visiting it without bothering to read any installation documents. Yep, already, it’s working without any needed config. I don’t see any installation docs (perhaps I’m just blur) but I do notice a config/ directory. It’s wonderfully documented and there’s quite a minimal amount to setup. .htaccess is a pain to setup due to specific server configurations (took quite a bit of debugging, but the option to fix it was hidden in the configuration), but other than that, it worked flawlessly. Easy to create new views, models, and controllers. Lots of helper classes – perfect, looks like exactly what anybody needs. Embeddable views to enable for templating…perfect.

First impression: wonderful, fast, user-friendly and amazingly well documented. Will give future updates on how I find it as I use it more. Meanwhile, I definitely recommend it to people.

Uncategorized

Learn how to make a basic website framework.

This will teach you how to setup one page for all pages! So it’ll be a lot easier when changing layouts!
Not only that, say GOODBYE to /index.php?page=contact…now you can just have /contact without actually making the directory!
This will ALSO teach you how to have a site which you can easily switch version (like when running parallel systems) when you are working on a new version and you don’t want others to know. It will have password protection which will allow only authorized users to test the version.
Say goodbye to “coming soon” pages!

Ok, first we want a layout…Let’s be simple (just forget validation temporarily, this just an example):

My title.<br />
<a href=”http://site.com”>Home</a><br />
<a href=”http://site.com/asdf”>asdf</a><br />
content will go here<br />
Copyright.

Let’s save that file as index.php. Save it in a directory called “versionname” (you can change this, but remember to change the rest of the code as well) Now, replace “content will go here” with this:

<?php
if($page == “”) {
include “/home/username/public_html/versionname/home.php”;
} elseif($page == “asdf”) {
include “/home/username/public_html/versionname/asdf.php”;
} else {
echo “error”;
}
?>

Basically, it will see what the value of the variable $page is and accordingly, it will display the correct page.
Create a new page called home.php (you can put whatever you want in it), and save it in the “versionname” directory. Then create a new page called asdf.php and put whatever you want in it and save it in the “versionname” directory.

Now try and go to yoursite.com/versionname. It will display your home page. Then go to yoursite.com/versionname/?page=asdf. It will display your asdf page. Let’s say in the future you decide to change your layout…you only need to change one page…the index.php page.

Ok. now instead of ?page=asdf, lets turn it into just /asdf. Go into your public_html folder (or your equivalent of it) and search for .htaccess. Open it up. This is apache server scripting. Won’t go into much detail though. You’re probably annoyed because you want your homepage to be in yoursite.com and not yoursite.com/versionname. Simple, add this code in .htaccess:

RewriteEngine on
RewriteBase /

ReWriteRule ^/$ versionname/index.php
ReWriteRule ^$ versionname/index.php

Now, try to go to yoursite.com. Amazing! The URL didn’t even change! Now to change into /asdf. add this:

ReWriteRule ^asdf/$ versionname/index.php?page=asdf
ReWriteRule ^asdf$ versionname/index.php?page=asdf

Now, go to yoursite.com/asdf. Amazing! It showed the ?page=asdf page!
Ok, now that you’ve done all that, let’s say you want a new version, but you don’t want to delete everything and setup a coming soon page. Create your new version in a directory called “versionname2”.
Now, you want people to be able to access your new version, but not all people. So here’s what you do. Add this to the top of your versionname (not 2) index.php:

<?php
session_start();
header(“Cache-control: private”);
if( $_POST[beta] ) {
if( $_POST[pass] == “yourpassword” ) {
$_SESSION[“beta”] = “1”;
}}
if( $_SESSION[beta] == 1 ) {
include “/home/username/public_html/versionname2/index.php”;
} else {
?>

And now, add the form below to wherever you want the verification to be:

<form method=”post” action=””><br />
<input name=”pass” type=”password” class=”input”>
<input name=”beta” type=”submit” value=”betatest”>
</form>

So now, when you type in the password “yourpassword” in the form, you will be browsing your new version, with no edited URLs! Of course, to make it fully compatible you need to add the if $page=”” statements to your versionname2 index.php, but that’s simple to do.
Ok, you’ve finished coding your new version. Simple, just go to your .htaccess, and replace all the /versionname to /versionname2. Done! You’ve succesfully upgraded your site.

Note: this is very basic but I hope it has helped some of you.