CodeJoust Blog

Shoot that trouble!

I’m often asked to help other computer with electronics or computer problems, so I thought I’d share some troubleshooting tips with everyone:

When asked a problem:

1. Review all the Steps
2. Don’t forget the Obvious
3. Don’t do the SAME thing over and over and over again.
4. DO research and ask others (after using common sense and the steps above)
5. DO use google. (or to make a point – lmgtfy.com)
6. Avoid the phone. But if necessary, try to get the whole picture.
7. Ensure everything is plugged in.

Need to help over the phone? Use this:

And remember, if something doesn’t work, it might do some good to let it rest and come back to it later.

Some amazing wonders have come from that.

And that’s all!

Hi Everyone!

Recently, I’ve been busy having fun over the summer, and took a break from this blog.

Now that I’m back, I’m writing to ask your input for what you are interested in me writing about, just leave a comment or email me at http://codejoust.com/contact.

Also, some you might have noticed, I’ve moved from HostMonster to DowntownHost.

I’ve been fairly happy with HostMonster, and they have been working really hard on a nice control panel and system. The problem with hostmonster’s service is they oversell and offer ‘unlimited’ services to lure customers, but limit processing power and disc usage, sometimes resulting in an overloaded and offline server.

I also switched to DowntownHost for cost reasons, they are slightly cheaper but limit what you can use. They also use litespeed which, I believe, is slightly faster than apache on shared hosts.

After a little bit,  I’ll update my views and see.

Also, I’ve written a few applications that I’ll open source once I clean up the code, one of which is The Reaction Time Test.

Audios Amigos! Hasta Luego.

Scrambling to backup all your teacher’s feedback on moodle before they wipe the site?

Just follow these steps to get all the assignments on one page.

Copy and Paste this into your browser’s address bar (while viewing the assignments list page):

Loading… (to see, you need to see the full page)

Then,
Do the same with this (this actually does the work, the other one prepares it) :

Loading…

Wait a second after pressing enter (and don’t panic)… your browser might freeze for a few seconds while it downloads all the data.

Volia! That’s it!

This should clean up all word junk, and then you can copy and paste it all onto a word doc. or save the webpage.

Source : https://gist.github.com/290aa33082950e1d483f

If you are viewing a website in your browser, there is away that you can edit what you see!

Pretty sweet? Well, not quite so, only you can see the changes. However, it is great if you take a screenshot of the edited website the email that.

To use, drag this to your bookmarks bar — Edit It!.

Whats a LAMP?

What is a LAMP may you ask? It gives light so you may read… and it can sit on the floor, OK, I’m kidding. It’s a server LAMP.
Its a set, or stack of webserver technologies (mouseover to see the definitions) and it is one of the most popular, reliable, and easy to maintain ones.
In terms with the rest of our Ubuntu series, I will use the Linux distribution of Ubuntu for this demonstration.

How do I install it?

With Ubuntu server edition, nearly all this software is preinstalled, however, with the desktop edition, it is a quick install.
To install the LAMP stack into Ubuntu, type sudo tasksel install lamp-server, this is the easiest wizard install method. If you have any problems wit this, look at this great wiki post.
Now to the fun stuff, tinkering and trobleshooting.

Tinkering and Troubleshooting

When you first install it, you’ll probably want to install a few basic tools and see how it all works!
If you want to just put up a simple webpage and see how it looks, put a .html page in the default webroot (/var/www/) and go to http://localhost/ to see this.

Installing Addons

The best way to add on something to a webserver is sudo get-apt install {App Name}. It’s also useful for installing applications in Ubuntu’s repository.

For instance, to install phpmyadmin, a great mysql administration tool, type sudo apt-get install phpmyadmin, (if it doesn’t work, try adding an empty folder called phpmyadmin to your docroot (Typically: /var/www/).

That’s All?

For this issue, yes, however, I will release consecutive articles following the process. The next regards advanced configuration, additional services, such as Ruby on Rails.

Restarting after configuring

To restart, stop or start the apache service, type sudo service apache2 restart (restart can be stop or start too). Also, beware of running commands as sudo, they allow you to make changes to your base configuration, which most of this stuff is. Never type anything with sudo and/or rm in it.

Before I start listing wallpapers, I don’t like stale wallpapers and so I thought I would share my favorite background switchers-changers for you to use.

For Windows : John’s Background Switcher

For Linux / Gnome : wallpaper-tray package. Run sudo apt-get install wallpaper-tray in the terminal to install.

Macs have the functionality built-int

Now, onto the wallpapers

1. In a Whisper
2. Unknown – Abstract Slides
3. – Spectrum of the Sky

4. 

   Red sunrise over the Lake

5. 

   Surreal Landscape - Storm is Approaching

6. 

   Sun Rising Above the Ocean

7. 

   Earth's Lights from Space - Breathtaking

8. 

   Another Amazing Surreal Beach

9. 

   The Grid - Electronics - SpaceMapping

10. 

    Another Swirl - Frequency 2 by Psyrix

These are a few of my favorites! To download, right-click and click “save link as or save target as”

I made it to 10!

You can also click on the picture and save/drag the full-size jpg there.

Comments are appreciated! If you found who did some of these, comment with the correct URL and I will attribute them or add more images if I like it.

Exhibit A:

Exhibit A

A 20 room mansion (not including 8 bathrooms) heated by natural gas. Add on a pool (and a pool house) and a separate guest house, all heated by gas. In one month this residence consumes more energy than the average American household does in a year. The average bill for electricity and natural gas runs over $2400 per month. In natural gas alone, this property consumes more than 20 times the national average for an American home. This house is not situated in a Northern or Midwestern ’snow belt’ area. It’s in the South.

Exhibit B:

Exhibit B

Designed by an architecture professor at a leading national university. This house incorporates every ‘green’ feature current home construction can provide. The house is 4,000 square feet (4 bedrooms) and is nestled on a high prairie in the American southwest. A central closet in the house holds geothermal heat-pumps drawin g ground water through pipes sunk 300 feet into the ground.

The water (usually 67 degrees F) heats the house in the winter and cools it in the summer. The system uses no fossil fuels such as oil or natural gas and it consumes one-quarter electricity required for a conventional heating/cooling system. Rainwater from the roof is collected and funneled into a 25,000 gallon underground cistern. Wastewater from showers, sinks and toilets goes into underground purifying tanks and then into the cistern. The collected water then irrigates the land surrounding the house. Surrounding flowers and shrubs native to the area enable the property to blend into the surrounding rural landscape.

The Verdict

HOUSE #1 is outside of Nashville, Tennessee; it is the abode of the ‘environmentalist’ Al Gore.
HOUSE #2 is on a ranch near Crawford, Texas;
it is the residence of the former President of the United States, George W.. Bush.
An ‘inconvenient truth.’
I sure hope this gets passed to everyone!
And, yes … I DID check Snopes prior to forwarding it.
You can verify it at : http://www.snopes.com/politics/bush/house.asp

This is a follow-up review to sixrevision’s great article on creating a ‘wornpaper’ photoshop layout.

How do you convert a good photoshopped website to actual xHTML and CSS?

First Steps

Before you do anything, identify what and where you will put the tags.

For instance, the whole document needs an enclosing DIV with a paper background.

Then, a header division, and a footer division. In the main division, there should be a header, then content wrapper.

Why seperate the header and content? Well, it’s necessary because the background for the header is transparent, and the content uses a notebook-like background image.

Then, the intro needs a div, and the posts, and sidebar.

With the structure figured out, not onto the xHTML.

Writing the xHTML

The first thing you need to do is to indentify a doctype. I choose xHTML strict, but I didn’t serve it as xhtml. Why? Well, if there is any sort of error, you can’t view the page, and IE doesn’t support xhtml being served as xml.

Remember to include the wrapping html tags, and the head (which needs to include a page title) and the body, where the actual content will be put.

Starting top down, I wrapped everything in a wrapper div for the background image (just personal preference. You usually can usually style the body tag).

They I created the primary divs I laid out before. Remember that squeaky-clean indentation is important, so is nesting stuff properly.

The navigation and category tags are within in horizontal-unordered lists. Everything else is wrapped in DIVs.

After the header, I went on and did the content section, where, as before discussed laid out the main content and header stuff.

It’s extremely important to provide meaningful div ids and classes. I prefer IDs for main layout elements, and classes for everything else.

For instance, use header-bar for the top. content-wrap to wrap the content, and search-form for the search form.

I left a few clearing breaks (<br>) tags, so the floats can be properly cleared, and provide and opportunity to space the layout.

The posts were specified in an IMG header and CONTENT, filling each-other with text.

For SEO purposes, use header tags whenever necessary. It’s usually good practice to cut out extra div’s, and to wrap inline content in spans, and paragraphs, in p tags (not divs).

When adding the search form, it’s important to wrap your form elements with a paragraph, fieldset, or something else after form.

Divisions (divs) are good for layout, but aren’t as good to use with content.

I made the desicion to put my sidebar in divs, not list elements becasue, frankly, they don’t look as crisp without styles (I really like lists, but not bullets in the layout.)

Now, it’s time to see how everything looks. It should look something like –

DesignIT Wireframe

Slicin’ and Dicing

It’s typically a hard compromise, slicing the images. Typically, you try for the most compression, smallest images, while keeping everything seamless and crisp as possible. You don’t want your backgrounds to be too large, so they take half a year to load, and people won’t see them, but you don’t want them so small they look textured and cheesy. I cut the images the best I could, a little feathering around the edges could be a good trick also, if your having problems. There were only five main images here. The main background, the paper background, the widget background, and the header and footer jagged edges. Each had it’s own image, but I combined the jagged edges into one image using a css sprites technique.

I used the GIMP (photoshop has the same thing) save as dialogue to compress stuff. Typically graphics, and vector-like crisp stuff, particularly stuff with transparency should be PNGs and images without transparencies, and are like images, irregular and, well, images, should typically be saved as JPGs.

Then I got a good image for the search button and another for the RSS feed.

I took the product images and all the others from the tutorial.

The CSS

First, write a wireframe, which just lays out all your html tags you want to style, keeping all your rules on one line for readability, and indenting.

.wrapper{ width:1000px; }
   .content { padding:15px; }
      .content nav { display:inline-block; }
   .content post { font-size:1.2em; }
.footer { position:fixed; }

Formatting the CSS in that way.

I’ll write another tutorial on the technique I used for the CSS

You can see my css in action at StyleIT Demo

.

Final Tweaks

You can see that it looks pretty good!

But, remember, there are always places to improve, most of the trouble I had with the CSS was the styling of the posts and the post images.

Disclaimer : This was NOT TESTED OR INTENDED to work in Internet Explore, (any version before 8), due to my lack of time. If anyone wants to fix it for me, be my guest.

That’s all?

Sorry everyone but, I’m afraid it is. I’ll be posting a followup post (hopefully). Soon to cover the CSS. Hope you liked it! Until next time…

- Iain (~finis)