Solar Power At Home

Is it time to consider solar power for your home? Recent solar research has uncovered some amazing technologies which will not only make solar more efficient but will finally bring solar prices into the average householder’s price arena.

If you think the solar energy solution is for you here are 10 steps to get you powered up.

1 ~ If you’re building a home, orient the largest windows and the roof toward the south, smallest windows to the north. Plant deciduous trees (leaves fall off in winter) in a position where they’ll shade the windows in the summer but allow the winter sun to shine in.

2 ~ Make your home as energy efficient as possible. Replace all heating and cooling appliances (fridge, freezer, air conditioner, stove, oven, dryer) with the most energy efficient model available or switch to gas or propane where possible. Install a solar power water heater and possibly a wood, pellet or corn husk stove.

3 ~ Check your electricity bill to determine the amount of power you use now that you’ve made changes. Size your system for the month with the greatest energy use. (In warm climates that’ll be summer and in colder climates it’ll be winter. Sizing your system for the month with the highest use ensures that you’ll produce enough power for any month of the year.

An average 2 bedroom home in the southern US uses 25 KWH per day.

4 ~ If you intend to tie into the grid then sizing will not be as critical as it is for an independent system.

5 ~ Price out your system. Remember that the panels themselves only account for about 45% of the cost of your system. You may want to acquire more than one estimate and if you have an installer or are handy enough to do it yourself you can often save money by purchasing your components through eBay or other avenues. (Be careful, you may not qualify for warranties)

6 ~ Other set up costs are ~ inverter, charge controller, batteries, installation and various wires and hardware. (Some of these costs will not apply to a grid tied solar power system.)

7 ~ Without subsidies expect to pay at least $75,000 USD (August 2007) for an independent solar energy system. A grid tie system will cost significantly less because you don’t have to size the system to cover all of your power needs. The utility grid will pick up when the solar power falls off.

8 ~ Many nations, countries and municipalities provide substantial subsidies, grants and tax incentives which reduce the price to you by half or better. Check with gov’t and power companies in your area to see if solar power subsidies exist.

9 ~ Once the system has been installed there is little maintenance required (some battery maintenance and periodic inspections of the solar panels) and interruptions in power will be a thing of the past.

10 ~ Solar panels not only increase the value of your home but pay monthly dividends in electric bill savings for up to 40 years.

The more
energy efficient you make your home the lower your cost to convert to solar power.

Free yourself from the political tug of war over oil and gas and help clean up the environment at the same time. Solar power is here to stay and about to take its rightful place at the energy table.

The Pitfalls of Twitter Bootstrap

I see the Twitter Bootstrap framework being used more and more by developers and I am still struggling to understand how it can be accepted as a full and robust solution that can be released as production ready.

From a general overview, it is a framework for developers who don’t know how to build a modular, re-usable and scalable front end solution, and use it as an easy way out. It seems to be a good way for back end developers with limited front end knowledge to create a reasonable looking UI. There are some useful elements, but from my view point are only really acceptable for MVP (minimal viable product) work as a certain degree of hacking at the frame work is required to customize it for a required purpose.

Below are some of the benefits that developers find useful:

• Quickly create a layout (fixed, fluid and responsive)

• Quickly create a form

• Everything immediately in the same style

• Working grid system

• Tables

• Buttons

Lets have a look at some of the pitfalls in a bit more detail.

It doesn’t follow best practices

One of the major issues I have with Twitter Bootstrap is that you end up with a lot of DOM elements full of needless classes. This usually means that the presentation is no longer separate from the content. Many front end developers will find this irritating, as it makes scalability, reusability and maintenance more of a challenge than it should be. Twitter Bootstrap also creates problems with progressive enhancement, as presentation and interaction are no longer independent of content.

It’s conflicts with existing site code

If you’ve been thrown into a big project and want to implement the ‘so called’ benefits that Twitter Bootstrap provides, there are a lot of problems here. Conflicts with generated HTML, CSS and JavaScript are the first thing. Then the resources, you now have to go through that big monster of a project and work out which scripts and styles need to be removed or replaced. Twitter Bootstrap could potentially create extra work as you go through the project finding and fixing weird bugs, which you could argue defeats the purpose of using it in the first place.

It is heavy

Straight out of the box, Twitter Bootstrap includes CSS weighing 126kb and 29kb of JavaScript. If you do want to use all of the functionality that Twitter Bootstrap brings, you should have a good think about loading times. Twitter Bootstrap can possibly help you to build an attractive, responsive website, but some mobile users could be become frustrated by the slow loading time and battery-draining scripting.

No SASS support

Another point of contention, and definitely an issue that puts me off using Bootstrap is the that it’s built with Less and provides no native support for Compass and SASS. Less is okay and it certainly has it’s advantages. But SASS is just better!, and with a framework like Compass on top, it is a complete no-brainer to use it. The are some solutions out there, but straight out of the box, you’ll have to make do with Less.

My website looks like everyone else’s!

Twitter Bootstrap is growing in popularity all the time, and this means that the world and his wife will be using it. While it is possible to customise your design further, you may find time constraints force you to stick to a lot of the out of the box Bootstrap style. This can lead to the creation of a lot of similar, generic and unmemorable websites. While Twitter Bootstrap is fast and easy to implement, creativity is often compromised as a result. Creative designs, which defy conventions, can be difficult to implement in Bootstrap’s structured environment.

Other disadvantages of using Bootstrap

Bootstrap.js

A lot of users have complained about bootstrap.js and how it does not use semi-colons. This can cause issues when using aggregation and compression tools such as JSMin and RequireJS. Using semi-colons is not part of JS standards but in my view it is better practice to use them mainly due to the inconvenience it can cause and can make modifying the source code a more difficult task than it should be.

Visitors don’t take your website seriously

Some of the more skeptical and cautious users of the Internet may question the legitimacy of a site using the default Bootstrap style. By not taking the time to customise styles, some users may start to perceive Bootstrap sites as untrustworthy.

Bootstrap doesn’t work with JavaScript disabled

Like most web tools on the Internet, Bootstrap doesn’t provide fall-backs for users without JavaScript. It just means that you’ll have to provide your own fall-back if you do want that support. As around 1-2% of worldwide users of the web have JavaScript disabled, it is definitely something to take into consideration.

Overall, Twitter Bootstrap is good to get something up and running quickly, with minimal front end development knowledge and is acceptable for MVP work that is not released as production quality. However, it can become very easy to shoot yourself in the foot, by thinking you are getting something for nothing, only to find out later down the line that it causes more work or hacks are required to customise it to your needs.

Explaining HTML Color Codes – Simply

I recently received one of my regular SEO newsletters. The topic this time was understanding HTML color codes. But it skipped so many areas, that I’m sure many readers would have been lost.

So I’ve decided to try explaining this topic as simply as possible.

I’ll split this tutorial into 3 parts:

1) understanding decimal color codes

2) understanding hexadecimal

3) using hexadecimal in color codes

PART 1:

Its probably useful to start with monochrome TV / computer screens: The screen is made up of lots of dots, in a grid pattern, so that you get hundreds of dots horizontally and vertically. Computer guys call them pixels, but for the non-technical people, I’ll call them dots.

Now, you can choose the brightness of each dot: no brightness = black, full brightness = white, a level in-between = a level of grey.

To make things easy, we can use numbers to indicate how bright to make the dot. 0 = black, 255 = white, 128 = mid-grey, etc.

We could use a number range of 0 – 99, or 1 – 100, but 0 – 255 has a special meaning to computers, so we need to use 0 – 255.

So how does color work?

Well, imagine that instead of a dot, you actually have 3 mini-dots. The 3 mini-dots are colored: Red, Green, Blue (RGB).

Why use these particular colors?

Its like an optical illusion. When these 3 mini-dots are close enough together, and at full brightness, the human eye is fooled into thinking it sees white. Now, by changing the brightness of the 3 mini-dots, you can get virtually every color you need.

So, to represent colors using numbers, we need to use 3 numbers for each dot (ie a number for each mini-dot). The order is important: the first number is for red, the second is green, the third is blue.

So, to represent black, we use: 0,0,0 (ie all mini-dots have no brightness).

255,255,255 = white (each mini dot is at full brightness, and your eye is tricked into seeing white)

128,128,128 = mid grey

255,0,0 = solid red (the red mini-dot is at full brightness, but green and blue have no brightness)

similarly:

0,255,0 = solid green

0,0,255 = solid blue

Other simple colors: 128,0,0 = dull red, 64,0,0 = very dark red (almost black)…

Now, mixing colors gets interesting:

255,255,0 = yellow, 0,255,255 = cyan (light blue), 255,0,255 = Magenta (light purple), 255,128,0 = Orange, 128,128,0 = brown, 128,0,128 = purple, 255,200,255 = pink

Most paint programs (even microsoft paint) will let you experiment with these color triplets. Go have some fun with colors

PART 2:

This is probably the most difficult computer concept to explain. Think back to your very early days at primary school. The teacher would have told you that there are only ten symbols for writing numbers: 0123456789. So while counting, you can only get as far as 9, then you run out of symbols.

But a very bright person, discovered a great way to count beyond this: the tens “column” (as well as the hundreds, thousands, etc columns). So the number in the tens column represents “groups of ten”. Thus the number 423 means: 4 groups of hundred, plus 2 groups of ten, plus 3.

Computers represent numbers very differently to us. They use a system called binary… but we will use hexadecimal, because it is very simple and quick to translate between binary and hex.

Now, we can interact with computers (using numbers) in 2 ways:

– We use decimal, and the computer converts decimal numbers into binary (easy for us, but can slow down the computer)

– We use hex, and the computer converts to binary (difficult for us, but the computer converts hex to binary MUCH faster than decimal to binary)

So what is hex? Well, instead of having only ten symbols to represent numbers, we use sixteen symbols: 0123456789ABCDEF.

Now, we can count from 0 to “F”, and after that we start using the “tens” column (technically, it should probably be called a sixteens column). Thus after F, we have 10, and if we keep counting, we get: 11, 12, 13, … 19, 1A, 1B, 1C, 1D, 1E, 1F, 20, … 29, 2A, … 2F, 30, …3F, etc.

One question that often comes up is, what happens after 9F? Why A0 of course, followed by: A1, A2, … A9, AA, AB, … AF, B0, B1, … BF, C0, etc. all the way up to FF.

After that, you can go to 100, 101, 102, … 10F, 110, 111, etc.

To get over the initial learning curve, many people use translation tables (or calculators), so that when they see F, they can figure out it actually means fifteen.

So that we don’t get confused between decimal and hex, hex numbers usually have a # symbol in front, so #10 is actually 16 Decimal., and #FF is actually 255.

PART 3:

Now we can combine part 1 and part 2. Colors can be represented using hex values from #00 – #FF (ie 0 – 255).

To represent black, we have: #000000 (ie 00, 00, 00 : we put a zero in the tens column to keep the overall length the same)

#FFFFFF = white (255,255,255)

#808080 = mid grey (#80 = 128)

#00FF00 = solid green

So thats it. Its a long explanation, but just about anyone should be able to read it and understand it, and you will be on your way to creating colorful web pages.