Logic’s Last Stand

May 20, 2010

Passion is Overrated

Filed under: Computers, Gaming, Life, Philosophy — Tags: , , — Zurahn @ 8:30 pm

Lately I’ve been thinking more about myself in terms of how I approach my interests. For varying reasons, my gaming has become more and more sporadic, and have been finding myself in a consistent mood for JRPGs. I may not find them the most well executed games most often, but they’ve been the most enjoyable for what I’ve been looking for.

On the daily life side of things, programming has been something I do because I like the way I’m able to create with it, and how I’m able to solve problems. There’s a sense of satisfaction that comes from, say, adding a new feature to The VG Press, or cutting a two hour job down to a two minute one with a clever script.

SteelAttack sparked the thoughts with this post,

SteelAttack said:

What pains me to an extent is watching people like you guys, who I have grown to care about and appreciate, get somewhat worked up because of statements like these, giving them credence when they don’t deserve it, and generally considering them journalists just because they happen to write about games.

By focusing on the conviction of our responses, it highlighted how little conviction I really had. Videogames, more than ever, have become a source of relaxation. I’ve come to have more passion about the community than the games, because that’s where the energy is.

In programming, there is a consistent theme of how programmers have to be passionate about their trade. If you’re not passionate about programming, you need to get out of the field! It’s no an uncommon train of thought, that it has to be your world to succeed.

Simply put, though, I don’t want passion. I’ve had problems with stress for a long time. Pressure situations, though I don’t think it translates to outward appearance, are too much. I burned out on chess in the same way, and simply put, it doesn’t make you any better. You can have all the passion in the world for programming and still be a lousy employee; you can love games more than anyone and still be miserable to be around; you can dedicate your life to one cause and get absolutely no where.

Giving an honest effort, certainly. But I find I’m doing just fine with laid back old me. I don’t think I have many detractors at The VG Press, I can still be as happy as ever playing Sakura Wars, and I seem to be getting pretty consistent praise at work for doing what I considered par the course. Passion? I passionately deny it.

November 13, 2008

My Path to Programming

Filed under: Computers, Life — Tags: , — Zurahn @ 2:00 am

Growing up, we long had an old Windows 3.1, 30MB HDD computer, but honestly it didn’t get a great deal of use from me. It was out in the hallway, and someone cryptic. But come 1998, we got a Pentium III 800MHz 64MB RAM dream. I can still recall the feeling, because it was completely unique — an absolute desire to use it regardless of the fact it served no required function. I’d make up a need just ot use it, browse the Encarta encyclopaedia just because it was there.

Most people don’t have much of an idea of what they want to do while going through school, and I was no exception to this. Up to high school, the best I could do for a direction is, “maybe something with computers.” I was drawn to computers, but still didn’t have a focus area.

So come grade 10 of high school, we actually had the opportunity to choose some of our own classes. Naturally I crammed in whatever vaguely computer-related courses were available, and that included an introductory programming course.

That class started normally; we did some relatively uninteresting history work, and some basic paint output as a primer of pixel locations and sizes. With this I basically did as well as was normal for any other class.

But the focus tilted more and more toward the actual coding logic. Then something happened–I put things together. Given what we had learned on the structure of conditional statements and loops, I made the simplest program that made all the difference. Guess the number between 1 and 1000. 500? Higher. 750? Lower. It was the most basic of games, but it was a genuine creation.

There is no satisfaction greater than that of the resultant composition shown on screen. By the final two weeks I was essentially finished my entire final project and was helping with others’. I had completely read the course textbook. And I completed that class with 97% and a perfect final project, Arcadia: The Mega-Plex, consisting of 20 games in 5200 lines of code (though I’m sure code optimization could have greatly reduced that).

From that point up to the grade 12 exam, I didn’t lose a single mark; I had 100% in grade 11, and 100% up to the exam in grade 12, ending with 99%. But that final percent was somewhat poetic, as the je ne sais quoi of it all had worn down. Few returned from the grade 10 class, and fewer from the grade 11. The quality of work and the quality of the people themselves slipped, and so did the class content itself due to it having to slow down for the ineptitude of the others.

There was a point in the grade 12 year that there was work given at the end of the day to be completed for the following week, it may have even been two weeks. In the five final minutes left in the class, I had completed that work. However relatively skilled I may have felt at the time, it was certainly not to that degree to call that reasonable.

But we move onto college. After a first slow year of learning minimal, the quality of the professors and class content slipped immensely. There had been absolutely no improvement in enthusiasm for programming.

By the halfway point of college, that was it. I really no longer wanted to go down this path, but was too far in to just quit. Trudging through didn’t help matters, nor did the college quality. At one point I had literally boycotted a class.

Come the final semestre, there was a class dedicated specifically to a single team project. The work for the entire semestre was nothing but work on this one project. Ours was a purchasing system in PHP5. It was a relatively dull concept, poorly planned and a coordination mess.

What happened as a result of that mess was free reign on my part as I took on the entirety of the server-side code. That dull project, 150 hours later was the first time I had enjoyed programming in half a decade.

Yet now being out of college for the past six months, now I see things falling apart all over again for completely different reasons as I can get work nowhere.

Beautifully cruel to give you hope before crushing it.

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.