Logic’s Last Stand

April 17, 2010

Vim and Emacs – When Programmers Design

Filed under: Computers, Freeware — Tags: , , , — Zurahn @ 11:06 pm

There are various immortal battles of loyalty — Coke versus Pepsi, Kirk versus Picard, McDonald’s versus Burger King — but the one closest to programmers’ hearts is Vim versus emacs. Vim and emacs are text editors dating way back. Vim (as in VI Improved) is a “newer” version (as in only ~20 years old) of VI, which was originally written for BSD UNIX in 1976 and is a staple of terminal applications. Emacs is the brainchild of open-source pioneer Richard Stallman that same year.

Why are these crusty old terminal programs so near-and-dear to coders? The short answer is that they work. What they don’t do, however, is make themselves accessible. I’ve been jumping back and forth between both over the past few weeks, and simply put, this is what happens when you have programmers design software, and not just write it.

What I mean by that is there’s no denying the power of both editors. There’s a reason they’re still used, still maintained, and still invaluable. That said, there is simply no concern with making the applications intuitive, user-friendly, or out-of-the-box ready. If you’re going to make significant use of either, not only will it require significant time investment and the effort of learning not only the basics of how to use them, but the features that make them worthwhile, but also the investment of configuring the software to actually be practical for what you need.

The majority of my programming of late is with PHP-based websites. This means writing PHP mixed with HTML, as well as CSS and JavaScript files. Neither do this properly out of the box, and frankly, there isn’t a good solution for PHP mixed with HTML in either. There are relatively poorly performing add-ons that do the job, but not as well as they should.

One could argue that hey, don’t bloat the software. I may want that, but not everyone will. I’m not one for bloat, but there is consideration for convenience versus leanness. It’s part of the reason I use Opera over Firefox — it’s built-in, with no other maintenance required. Given the scope and use of Vim, I don’t think it’s an egregious request that it have more universal options out-of-the-box. Emacs is a 40MB download, so I hardly think fleshing out of the language support is too much to ask, either.

Let’s be realistic here. It’s programmers using this software. Why on earth do these programs have syntax highlighting disabled by default? Why are line-numbers disabled by default? Why does it require additional configuration, even downloads to get highlighting for popular languages?

We’re programmers, we fiddle, but that isn’t an excuse to leave software in a unfriendly state because you feel justified in saying “deal with it.” I do, and will continue, to use both programs; programmers handling design also means some awesome features — so long as you can find them.

January 6, 2010

An Ugly Side of Web Development and Design

Filed under: Computers — Tags: , , , — Zurahn @ 11:02 pm

I’ve got time to kill, so indulge my ramblings.

For those who don’t know the world of web development, it’s probably doesn’t work the way you’d think. There are three aspects of web development: Presentation, Logic and Data. Presentation is HTML, CSS, JavaScript — anything that’s run on the client computer; logic is the server side deciding what it needs to do when you visit a page, and data is whatever’s stored on that server to actually provide the user.

The tricky thing here is that you can call anything done on th server-side programming, and JavaScript is a programming language, but the primary aspects on the presentation side — HTML and CSS — aren’t programming languages; they are markup languages. Browsers follow rules that say how the HTML and CSS are supposed to look when used in specific ways, but sometimes those rules are ambiguous, sometimes the browser is wrong, sometimes the action is unspecified, and sometimes the browser just hasn’t implemented the functionality.

This leads to some weird and unique problems and solutions. For example, there is a generic container element in HTML called a DIV tag. You can put anything you want in a DIV, and you can use CSS to style it so it has, say, a black background and white text.

Well, if you say “height: 100%”, that doesn’t work as cleanly as one would hope. If you take a look at The VG Press forum, you’ll see the user information in a sidebar on the left with a darker grey background and a border to the right. Because you can’t just set the height of the sidebar to 100%, how do you get a perfectly flush border and background like that? You have to do a clever, silly and stupid workaround wherein the DIV that contains the sidebar DIV is given a background IMAGE containing both the background colour and border, repeated vertically only. Weird, but it works.

Let the chain reaction begin, though, as a big feature I’m working on is full customization of presentational aspects including colours. Remember that the sidebar background and border is an image, so you can’t just change the colour — what then?

After several weeks of not knowing how to solve this, I now have a solution. In PHP (a server-side programming language), you can create images. Thusly, how I could get around this would be to generate a new sidebar image with the colours specified and cache the image on the server. So if then user specifies a sidebar background colour of #FFFFFF (white) and a border colour of #FF0000 (red), when the user saves his settings, the server receives the request, generates the image, and saves in on the server as FFFFFF-FF0000.png. Then if another user chooses the same colour combination, that file is used, otherwise a new one is generated. Automatic, transparent, efficient and completely obtuse. Gotta love it.

August 8, 2008

End Fixed Width Layouts

Filed under: Computers — Tags: , , , , , — Zurahn @ 7:49 pm

Web design is more than making a site that looks good to you, or simply looks good in general. Usability and compatibility are essentially to all sites. With such a split between widescreen and 4:3 monitors, it’s more important than ever to accomodate design to all systems.

So why is it that there seems to be, if anything, an influx in fixed-width layouts. Take Youtube for example; nomatter what resolution your system is, what size you have your browser that page displays at the same width.

Blogs are even worse for this. 90% of all blog layouts seem to be fixed width, making the layout very thin on high resolution or widescreen monitors.

It’s not a difficult fix as the CSS for variable width layouts is pretty much down to two lines (one if you do shorthand).

#layout
{
margin-left: 5%;
margin-right: 5%;
}

There, we’re done. You have a bit of buffer space on either side and the layout expands to fill the monitor.

Let’s take a look at the aforementioned Youtube’s code and see what we can find?

#baseDiv{
position:relative;
width:875px;
margin-left:auto;
margin-right:auto;
padding-bottom:25px;
}

And modified…

#baseDiv{
position:relative;
margin-left:5%;
margin-right:5%;
padding-bottom:25px;
}

And it’s no longer fixed to that 900px width, though the content within the layout is designed to fixed width also, compounding the problem.

We’ve an inversion of the problem that persisted, yet perhaps hurried, the transition from 800×600 to 1024×768; sites were written completely ignoring 800×600. It’s not encouraging the adoption of widescreen or higher resolutions when all sites are now ignoring their existence and keep sites thinly displayed in a fraction of the screen.

May 25, 2008

Beginner’s Guide to a Real Web-site – Part 6 – Intro to SQL

Filed under: Computers — Tags: , , , , , , — Zurahn @ 2:46 pm

Database interaction is in most cases dealt with using a language called SQL (Structured Query Language). For our purposes, we only need to know the basics, which are:
-Inserting data
-Updating data
-Deleting data
-Retrieving data

These are conveniently done using the keywords INSERT, UPDATE, DELETE and SELECT. However, before we can get to that, we need to understand what we’re storing and how to store it. We know that we simply want to store blog posts; these will have titles, dates, and a body. We can do this with a single table. A table is what we call what we store data in, because we use “columns” of data.

Our table, which we’ll call “blogs” will have these columns:
-id
-title
-date
-body

We can do this either in SQL or in the handy PHP tool phpMyAdmin which is included with WAMP (click the WAMP icon on the taskbar, and choose phpMyAdmin). PHP web hosts will typically have phpMyAdmin installed for your use. In our code we need to use SQL to interact with the database, but setting up the structure we can, and for simplicity’s sake in this tutorial, do it in phpMyAdmin.

Firstly, we create a new database, which we can call “mysite” and click the Create button. This will create the database, which will store the table. Now you’ll see at the bottom “Create new table on database mysite”. Enter “blogs” for the name, and we need 4 columns (id, title, date, body).

On the next screen, “Field” is the name of the column (id, title, date, body). For the data type dropdowns, id will be INT, title will be VARCHAR, date will be a TIMESTAMP (not DATETIME), and body will be TEXT.

INT is short for Integer (a number with no decimal points and can be positive or negative). IDs should be Integer values. Set the length to 11, EXTRA to auto_increment (meaning it automatically assigns a unique value to it when you INSERT), and choose the first radio button under the page with the key to set it as the Primary Key (the value that uniquely identifies a record — in our case a blog post — in the table).

For title, VARCHAR is a text field with a set length. We’ll set the length to 50 (seems reasonable for a maximum title length).

For date, TIMESTAMP is the number of seconds having passed since December 31, 1969. Timestamps are easily converted to date formats in PHP. Change default to ON UPDATE CURRENT_TIMESTAMP; this just means to insert the current time by default.

And for body, TEXT is a text field with no specified maximum length and is only limited by the database software itself. This will allow for blogs without having to worry about one being too long.

Click Save to create the table.

If you wanted to do this in SQL, here is the code, though I won’t go through it to explain.

CREATE TABLE mysite.blogs (
id INT(11) NOT NULL AUTO_INCREMENT,
title VARCHAR(50) NOT NULL,
date TIMESTAMP NOT NULL,
body TEXT NOT NULL,
PRIMARY KEY (id)
) ENGINE = InnoDB 

For the sake of building our SQL skills before jumping into PHP usage, click the SQL tab in phpMyAdmin to get a box where we can enter SQL queries. This way we can test our queries and see how they work. Here’s a query to insert a record into our table

INSERT INTO blogs (title, body) VALUES('A Blog Post', 'This is where a blog post would be');

Selecting all records from a table:

SELECT * FROM blogs;

Select specific records and columns from a table:

SELECT title FROM blogs WHERE id = '1';

We can also update the record:

UPDATE blogs SET title = 'My Blog Post' WHERE id = '1';

Or, finally, delete the record:

DELETE FROM blogs WHERE id = '1';

This is basically all you’ll need for the development of our site. We can use SQL statements directly in PHP to modify the database, which we’ll do in Part 7.

April 16, 2008

Beginner’s Guide to a Real Web-site – Part 5 – PHP Programming

Filed under: Computers — Tags: , , , , , , , — Zurahn @ 5:57 am

PHP is a complete programming language, as opposed to XHTML and CSS which are mark-up languages.

Programming languages have a few simple characteristics:
-Variables that store data
-Conditional statements
-Loops

Variables in PHP begin with a dollar sign

$num = 1;

The above statement (which must end with a semi-colon) assigns a variable called “num” the value of 1.

Conditional statements check the value of a variable or variables.

if($num == 1)
{
  echo "YES!";
}
else
{
  echo "NO!";
}

The above if statement checks if the value of $num is equal to 1. If it is, the page outputs the text “YES!”, otherwise, it outputs the text “NO!”.
Anything within the { } brackets applies only for that statement.

There are other conditional operators than “==”. Here are a list of operators in PHP:
== (equal to)
=== (equal in value and in type)
! (NOT)
> (greater than)
>= (greater than or equal to)
< (less than)
<= (less than or equal to)
|| (OR)
&& (AND)

Loops repeat a section of code several times over. There are two basic kinds, the while loop and the for loop.

A for loop is designed for when you know how many times you want to go through the loop.

for($i=0;$i<10;$i++)
{
echo $i;
}

The above loop repeats 10 times, starting from 0. The loop repeats as long as $i is less than 10, and $i increments 1 each time through.
Also note
$i++
This increments the variable $i by 1. ++ is a shortcut. Equivalents to this would be
$i += 1
or
$i = $i + 1;

A while loop lasts while a condition is true.

$count = 0;
while($count < 10)
{
  echo $count;
  $count++;
}

The above loop repeats 10 times. It keeps going as long as the count, which started at 0, is less than 10. In the above case, it works identically to a for loop; however, if you have an uncertain condition, such as a random number or user-input, the number of times is unknown.

All we’re going to do to start is to receive some data from the user, then output it back.

Make a copy of index.php and call it blog.php. This will be the start of our blog page.

<?php include_once('includes/top.php'); ?>
<title>Main Page</title>
<?php include_once('includes/middle.php'); ?>
<p><h2>My Blog</h2></p>
<p>
<form method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>">
<textarea name="blogpost" id="blogpost"></textarea><br />
<input type="submit" value="Submit" />
</form>
</p>
<?php include_once('includes/bottom.php'); ?>

There’s a bit to explain here. A form tag in HTML surrounds a series of data you want to send to the server (our PHP). In this case, we just want to submit the data to itself, so we echo out the page we’re on, which is stored automatically by PHP in the variable $_SERVER[‘PHP_SELF’]. You could just type in ‘blog.php’ to get the same effect, except it won’t work if the page gets renamed.

The input type submit sends everything within the form to the server.

Anything sent to the server (in this case with method post) in PHP will be stored in $_POST. Let’s echo out the value of the blogpost.

<?php include_once('includes/top.php'); ?>
<title>Main Page</title>
<?php include_once('includes/middle.php'); ?>
<p><h2>My Blog</h2></p>

<?php
if(isset($_POST['blogpost']))
{
  echo "<p>".$_POST['blogpost']."</p>";
}
?>

<p>
<form method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>">
<textarea name="blogpost" id="blogpost"></textarea><br />
<input type="submit" name="submit" id="submit" value="Submit" />
</form>
</p>
<?php include_once('includes/bottom.php'); ?>

All I’ve added is a check to see if there’s a value in the blogpost, and if there is, to display it in a new paragraph.

For the sake of making things look a little nicer, you can create a new CSS file called blog.css and add this to it (and don’t forget to import it into blog.php using the tag)

#blogpost
{
  width: 85%;
  border: 1px dashed white;
}

#submit
{
  border: 1px solid white;
  background-color: black;
  color: white;
}

Our problem now is that the blog doesn’t go anywhere. It needs to be stored in a database, which we’ll cover in Part 6.

April 10, 2008

Beginner’s Guide to a Real Web-site – Part 3 – Linking and Menus

Filed under: Computers — Tags: , , , , , , — Zurahn @ 5:01 am

Now that we have after Part 1 and Part 2, a structured XHTML page with CSS design, we need pages in which to form an entire site. Make a copy of index.html as template.html. This will to keep the overall style of your documents consistent. Make another copy as links.html and open it.

In links.html, we are going to create a series of links to other web-sites. Doing so is simple.

Find this,

    <div id="article">
	  Welcome to my first web-site.<br />
	</div>

And replace the text with this:

    <div id="article">
	  <h2>Links</h2>
	  <p>
		<a href="http://google.com">Google</a>
	  </p>
	</div>

This creates link to Google with the text Google.

The structure of a hyperlink is simple <a> specifies a link, and the href attribute provides the address. Anything between <a> and </a> is linked to the specified page. Note, http:// is required on the link or it is considered a relative path.

But we’re also going to want to link to our index page. While we could add a simple text link, that is not as flexible as we want for a standard menu.

Find this,

    <div id="menu">
	Menus
    </div>

And make the following changes:

    <div id="menu">
	Menus<br />
	  <ul id="menu">
	    <li>Link 1</li>
		<li>Link 2</li>
		<li>Link 3</li>
	  </ul>
	</div>

What we have created is an underordered list (ul). This creates a bulleted list with list items (li). By default these items are block-level, indented and have bullets beside them. We will change this in our CSS file, main.css.

Add the following to main.css,

#menu ul
{
  list-style: none;
  text-indent: 0px;
  padding-left: 0px;
  margin-left: 0px;
}

list-style formats the bullets for the element, in this case, everything within any ul within the menu div. text-indent, padding and margin are all removed to get rid of the indenting. This turns the list in to a simple top-down text list of links.

Now we can link to the index page.

    <div id="menu">
	Menus<br />
	  <ul id="menu">
	    <li>Home</li>
		<li>Link 2</li>
		<li>Link 3</li>
	  </ul>
	</div>

This links back to the index page, obviously. Try it out and see if you notice the problem. Go on… ok, you kept reading. Anyway, the problem is that even though we can copy the template over for new pages, any changes to the main features are only applied to that one, static page. The rest have to be modified to reflect that change. We cannot get around this with XHTML.

What we need to do is venture into what really drives significant web design, and that’s server-side scripting. We’ll do that in Part 4.

April 6, 2008

Beginner’s Guide to a Real Web-site – Part 2 – Intro to CSS

Filed under: Computers — Tags: , , , , , , — Zurahn @ 1:26 am

In Part 1 we looked at the structure of a web-page with HTML. Now we’ll look at the presentational aspects using CSS.

Create a file called main.css – This will be the main file for our CSS. Also, create a folder called “css” and place the CSS file in it. This is a good practice to organize your code. You also have the option of doing the same with your HTML files, but that’s your call (note that if you do this, the path to the other files will be different). Before we add anything to it, we need to import the CSS file to our HTML document.

<head>
  <link rel="stylesheet" type="text/css" href="css/main.css" />
</head>

The link tag is placed between the tags and has three attributes to be XHTML complient: rel, type and href. Rel is used to tell the browser that it’s importing a presentational file, type tells it the format of the file, and href tells it the actual file to import, in this case the main.css located in the folder CSS. The slash at the end is a shortcut for closing a tag that has nothing inbetween it. is the same as saying .

Here are some things to know about file paths, based on examples
href=”main.css” – the file is in the same directory
href=”/main.css” – the file is in the top directory. For example if you have index.html in C:\Web\Files\, “/main.css” looks for main.css in C:\.
href=”css/main.css” – the file is a folder called “css” in the same directory
href=”../main.css” – the file is the folder above the current directory. For example, if you have index.html in C:\Web\Files\, it looks in C:\Web\

Back on task, we’ve imported the CSS file, so let’s add something to it. Let’s organize our div tags first and foremost. Before we start making things pretty, let’s get everything set up first.

#container
{

}

#header
{

}

#main
{

}

#menu
{

}

#article
{

}

A # sign indicates an id tag, which we placed on our div tags. The { } brackets contain the code for that particular element. Let’s make the sidebar act like a sidebar, and add borders for clarity of the boundaries.

#header
{
  text-align: center;
  border: 1px solid black;
}

#menu
{
  border-right-width: 2px;
  border-right-color: blue;
  border-right-style: dotted;
  float: left;
}

#article
{
  border-left-width: 2px;
  border-left-color: black;
  border-left-style: solid;
  float: right;
}

Save that and refresh your page in the browser. It’s still not much, but it’s looking a little more familiar.

The syntax for CSS is simple,
element-attribute: value

So for text-align: center, text is the element, align is the attribute and center is the value. Thus moving the text to the center of the page in the header. This works in a div tag because div tags are by default 100% the width of its containing element (which is another div, which is the width of the screen by default).

Using “float” though, changes this, and makes the width only that required for the div. So if you added text-align: center to menu or article, you wouldn’t see a difference because the text is the width of the div.

float makes a tag ignore the placement of those around it, allowing the two divs (which are block-level elements) sit side-by-side. Just note that some will use a table to do this, which is a bad idea. I’ll explain why at a later time.

The last thing to explain are the borders. There are shortcuts in CSS so that you don’t have to write out the individual attribute every time. In the header, we just used the border element, and specified multiple things. The order determines what is assigned to what.

border-right: 2px dotted blue
is the equivalent to
border-right-width: 2px;
border-right-color: blue;
border-right-style: dotted;

It’s usually cleaner to write thing out, but that can be cumbersome. Try to find a balance, and use your best judgment.

Let’s now remove the borders, and add some formatting to the entire page.

html
{
  color: white;
  background-color: black;
}

#header
{
  text-align: center;
}

#menu
{
  float: left;
}

#article
{
  float: right;
}

Code to the tag affects everything on the page. Traditionally, the code used would have been for the tag, but with an XML declaration, that does not work the same.

The CSS attributes:
color – text color. We’ve changed it to white
background-color – obviously, the background color. We’ve changed it to black.

We see that the article section is too far to the right, now. Also, we probably don’t want things so close to the edge of the screen at all. We need that marginalized. Let’s remove the float attribute from article, and instead use margins to organize.

html
{
  background-color: black;
  color: white;
}

#header
{
  text-align: center;
  margin-left: 150px;
  margin-right: 150px;
  
  border-bottom: 1px dashed white;
}

#main
{
  margin-left: 150px;
  margin-right: 150px;
  border-bottom: 1px dashed white;
}

#menu
{
  float: left;
  width: 150px;

  margin-left: 25px;
  margin-right: 50px;
}

#article
{
  margin-left: 221px;
  margin-right: 50px;

  border-left: 1px dashed white;
}

Make these updates and refresh your page. There’s much more of a structure now, though all we’ve added were margins and borders. A margin is a space that pushes from left to right, or top to down. If you add a margin-left: 10px value to an element, it will be pushed to the right by 10 pixels. If you add a margin-right: 10px, anything to the right of the element will be pushed 10 pixels (as opposed to that element being pushed left).

Even when there’s hardly any data, though, you don’t want things all crampt. We’ll resolve this using height and min-height attributes.

#header
{
  text-align: center;
  margin-left: 150px;
  margin-right: 150px;
  height: 100px;
  
  border-bottom: 1px dashed white;
}

#main
{
  margin-left: 150px;
  margin-right: 150px;
  border-bottom: 1px dashed white;
  
  min-height: 600px;
}

#menu
{
  float: left;
  width: 150px;

  margin-left: 25px;
  margin-right: 50px;
  
  height: 100%;
}

#article
{
  margin-left: 221px;
  margin-right: 50px;
  
  min-height: 575px;

  border-left: 1px dashed white;
}

height is obviously the height of the element–how tall something is.
min-height specifies the height that the element must be at the minimum.

Keep in mind that percentage heights, such as height: 100%; in the menu element, can be the source of browser incompatibility between Firefox and Internet Explorer as they interpret this differently.

We’ll now touch up the layout with padding, and modifying the fonts.

h1
{
  font-size: 2em;
}

#header
{
  text-align: center;
  font-family: courier new;
  font-weight: bold;

  margin-left: 150px;
  margin-right: 150px;
  height: 100px;
  margin-bottom: 25px;
  border-bottom: 1px dashed white;
}

#main
{
  min-height: 600px;
  margin-left: 150px;
  margin-right: 150px;

  padding-bottom: 25px;

  border-bottom: 1px dashed white;
}

#menu
{
  float: left;
  width: 150px;
  padding: 10px;
  padding-top: 0px;
  margin-left: 25px;
  margin-right: 50px;
  
  font-size: .8em;
  font-weight: bold;
  height: 100%;
}

#article
{
  margin-left: 221px;
  margin-right: 50px;
  padding: 25px;
  padding-top: 0px;
  min-height: 575px;
  border-left: 1px dashed white;
}

Make these changes and refresh to see something you wouldn’t be too surprised to see for a web-site layout. The best designs are often rather simple. Admittedly, I am not a good visual designer, so you’ll probably want to look elsewhere for much advice in that department.

Padding is like a margin, except on the inside of an element. Where margins push outward, padding pushses inward, keeping text inside an element away from the edges.

Text (fonts) are formatted with font. font-family denotes the name of the font, such as Times New Roman, Courier, etc. Be careful about selecting a font, because the user can only view fonts he has on his own computer, so the list is limited. Here are some web-safe fonts:

Arial
Comic Sans MS
Courier New
Georgia
Lucida Sans
Times New Roman
Trebuchet MS
Verdana

Note that dingbat fonts (non-standard characters), such as Wingdings and Webdings, are not only not web-safe, they aren’t browser safe (Firefox does not display these fonts).

Also see that we’ve defined some font sizes
font-size: 2em

em is a scalable unit size, which means it changes based on the user’s configuration so that, for example, text doesn’t get too tiny on high resolution screens, or too large on low-res ones. This is a good method of assigning font sizes, but can be problematic in terms of layout sizes such as our menu, which we’ve defined as 150px wide.

That’s the end of our look at CSS, but it won’t be the last we use it. CSS is integral to web design.

In Part 3 we’ll look at linking to multiple pages and menu design.

Create a free website or blog at WordPress.com.