Friday, June 29, 2012

Easy Ways to Decrease Home Page Load Time

The Sad, but True Facts

The Big Factors

Unfortunately, not everyone has the same internet provider, connection, and/or browser as you do. Any one of those differences can determine whether your website loads in 1 second or 120 seconds. As you know, page viewers do not like to wait. In fact most visitors would rather research and try a different resource than a website that does not load in under 5 seconds.
  • internet provider
  • computer speed
  • web browser
  • device or computer
  • location
  • cache memory
  • bandwidth

Obviously, you cannot buy all of your readers Alienware super computers so to decrease page load time you must focus on your websites' internals.

Is Less More?

Wednesday, June 27, 2012

How to Create Email Links with HTML

Copying and pasting an email address into the "To:" prompt of an email can be surprisingly unpleasant especially when the email benefits the receiver and not the sender.

In a blog such as W7R it is important to allow users to email you with as little effort as possible (without the copying and pasting).

About the Email Link Syntax

  • The 'a' is the same anchor tag used with website links
  • href is an HTML attribute of the anchor tag, 'a'
  • After href comes an = sign and a destination in parenthesis
  • The format for email destinations is mailto: + an email
  • Replace with your own email
  • </a> is a closing tag for an anchor

Java GUI Tutorial 5 - Buttons in Action!

If you need to revisit the past Java GUI tutorials click the corresponding tutorial number here: 1 2 3 4 5

Program Specifications

This program involves setting up 7 buttons, each with a different color. A click on any of the 7 buttons will change the background to their corresponding color. This program is more easily planned out, than it is understood.

Monday, June 25, 2012

Bulleted Lists in HTML

Bulleted Lists Quick Facts

  • The HTML opening tag <ul> and its matching closing tag </ul> create bulleted lists
  • The more formal name for bulleted lists is Unorganized Lists
  • These quick facts are list items of an unorganized list.
  • List item can contain
    • pictures
    • text
    • video
    • links
    and combinations of those mentioned (pretty much anything)
  • Unorganized lists can have list items that contain unorganized lists lists inside them. Lists in lists are considered nested (previous list item)
Bulleted lists are called Unorganized lists and are used to display information that is to be treated equally (no rankings or order necessary).

Here is the source code for the Bulleted Lists Quick Facts!
HTML Entity
[Case Sens.]

  • The HTML opening tag &lt;ul&gt; and its closing tag &lt;/ul&gt; create bulleted lists
  • The more formal name for bulleted lists is Unorganized Lists
  • These quick facts are list items of an unorganized list.
  • List item can contain
    • pictures
    • text
    • video
    • links
    and combinations of those mentioned (pretty much anything)
  • Unorganized lists can have list items that contain unorganized lists lists inside them. Lists in lists are considered nested (previous list item)

Saturday, June 23, 2012

Regular Expressions

Regex Basics

  • Regex stands for regular expressions
  • Used to describe patterns in text files
  • Can detect dynamic patterns, such as phone numbers followed by a persons name
  • Supported in nearly every programming languages with minimal differences
  • A standard for efficient editing of text documents
  • A more powerful version of "Find and Replace"
  • Can save you a lot of time revising typed up work

Like Find and Replace on Roids

If you have heard of the Find, Replace, or Find and Replace feature on Microsoft Word or any other software, then you probably know that it can eliminate a lot of time spent on tedious and repetitive tasks such as changing every occurance of the word "he" with "she" or "Mr" to "Mrs" or "Ms".

Efficiency Is Key

No matter how large and complex a pattern becomes, the time spent finding/coding the correct regular expression will stay relatively the same. Regex code can be reused and altered to describe similar situations that do not match the original expressions criteria.

The reason Regex is efficient is ultimately because you are allowing a computer to repeat the pattern instead of you, your mouse, your eyes, your keyboard do manually.

An Example of Regex's Efficiency

A blogger, such as myself realizes that he has a lot of <b>bold text</b> tags instead of the preferred <strong>bold text</strong>. It was an easy mistake to make using the "Compose" tab in Blogger's post editor, but a very difficult problem to fix via the HTML tab in post editor.

The blogger spends 30 minutes fixing the format for one of his many posts and realizes he can't waste so much time on such a small detail. So, the next time he fixes the format of a post he utilizes the Find and Replace feature and spends only 8 minutes fixing the format of a post of similar length. He's satisfied, but does not want to waste 8 minutes each on all of his posts (8min/1post, 800min/100posts).

Using Regex the same blogger is able to apply the same edits to each post in 1 minute, because all he has to do is reuse his previously written expression (the same changes occur on each blog post). With practice regex code for these canges can be written in under 5 minutes.

Thus, the blogger could apply all the necessary format changes to his 100 blog posts in under 105 minutes. That is 1 hour and 45 minutes well spent!

Here is a regular expression I used to change my <b> tags to <strong> tags

Find: <(\s*)b((>)|(\s+.*>))
Replace: <strong>
Find: <(\s*)/(\s*)b((>)|(\s+.*>))
Replace: </strong>

Friday, June 22, 2012

How to Change Blogger Post Labels

About Changing Labels

I realized how rediculous some of my Blogger labels were long ago and wanted to change them to a common format of Capitalizing every part to the label, such that bloggingtips would become BloggingTips.

It is just easier to read or find on my blog. Sadly, Blogger recognizes BloggingTips and bloggingtips as the same thing even though it is displayed with case sensativity. Any manual case changes (bloggingtips to BloggingTips) would become bloggingtips by default because it was a label first. So, having two blog labels that have the same characters, but with different format are not allowed. I see that a potential flaw in Blogger's services.

The good news is that I can help you accomplish the changes is format for your posts labels to make your blog labels more readable and organized!

How To Change Blogger Post Labels

Go to the old Blogger interface

Blogger Dashboard > Gear Icon > Old Blogger Interface

Go to Edit Posts

Old Blogger Dashboard > "Edit Posts"

Locating Label Panel

It's on the left.

Find Your Target

Locate the label you want to replace/edit and click it.

Make a Copy of This Page

Duplicate the window because the group of posts that all contain the targeted link will disperse from one another after removing the old label.

Select Em' All

Click the link "All" that comes after "Select: " to check all of the posts that need to be changed (every single one should be checked or the change of post label will revert back to the old version automatically).

Delete the Bad Label

Don't forget to duplicate this page before deleting the old label or you will not be able to find the same group of posts!

Use the drop down menu, "Label Actions..." to use the "remove label" operation. Click the target label. Now the old label is gone.

Making the New Label

"Label actions..." > "Apply Label" > "New label"

The New Label

Type in the new label. It will be applied to all of the check marked posts.

Success. You're done!

All done! Hope that helped!

Tuesday, June 19, 2012

How to Center Adsense Ads on Blogger

The concept applies to any blog.

The Directions

  1. Get on Blogger and click the "Template" tab.
  2. Click the button labeled "Edit HTML" and then click the "Proceed" button to reach the source code for your blog.
  3. At the top of your source code there will be a bar with a unchecked box that says "Expand Widget Templates". Check that box! You cannot find the code you need to alter without expanding the widget templates.
  4. With the "Expand Widget Templates" checked the source code below is even more in depth than it was before! (now it is showing additional code for widgets)

    Press Ctrl + F or manually open the Find module for your internet browser.
  5. In the Find moodule's text area, type adCode and press Enter to search the page for the Adsense code. It will look similar to the code below
    <b:if cond='data:blog.pageType != &quot;error_page&quot;'> <data:adCode/> </b:if> <b:include name='quickedit'/>
  6. Now insert <center> before and </center> after .
  7. Click the Preview button to make sure the change was made (and did not have any unwanted side effects). Click the Save template button and close your template if the preview passed inspection.
All we did was replace <data:adCode/> with <center><data:adCode/></center> which can be undone at any time in the template source code.

Monday, June 18, 2012

Numbered Lists in HTML

The HTML element, ol, or Organized List is used to list items that come in a particular order. When order matters, such as a list of the top 10 songs on billboard, then you would use a Organized List.
Image Source

Race Results

  1. Pacman
  2. Speedy "Pinky"
  3. Shadow "Blinky"
  4. Bashful "Inky"
  5. Pokey "Clyde"
<h4>Race Results</h4>
  <li>Speedy "Pinky"</li>
  <li>Shadow "Blinky"</li>
  <li>Bashful "Inky"</li>
  <li>Pokey "Clyde"</li>

About the HTML Tags ol and li

  • <ol> starts a organized list
  • <li> starts a list item
  • </li> closes a list item
  • </ol> ends the organized list

Saturday, June 16, 2012

Comparison Table HTML Code

Copy and Paste This to Your Site!

The table is on top of the source code that I used to create the table. So feel free to copy and paste that code to your blog posts or website to save yourself the time and trouble.

Object A Both A and B Object B
  • difference 1
  • difference 2
  • difference 3
  • difference 4
  • similarity 1
  • similarity 2
  • similarity 3
  • similarity 4
  • difference 1
  • difference 2
  • difference 3
  • difference 4

Object A Similarities Object B
  • difference 1
  • difference 2
  • difference 3
  • difference 4
  • similarity 1
  • similarity 2
  • similarity 3
  • similarity 4
  • difference 1
  • difference 2
  • difference 3
  • difference 4

Tuesday, June 12, 2012

The Clocked Set-Reset Latch

Introduction to the Clocked SR latch

The clocked SR latch (sometimes "Gated SR Latch") is a modification to the Set-Reset Latch (SR latch). After adding the clock to the design, the SR latch can control when it should switch states (when Q and Q' switch values).

Enable To The Rescue

The inputs S and R are meaningless unless the enable input is true. The enable input is the clock input so the circuit is considered "enabled" when CLK=1 on a positive triggered SR latch and when CLK=0 on a negative triggered SR latch.

What's a Clock?

A clock is an element that produces both 1 and 0's, and does so in both regular intervals (like a timer) and irregular intervals (button on arcade game).

The Clocked SR-Latch Design

The clocked SR latch is established by adding 2 AND gates (positive triggered) or 2 NAND gates to filter out the data on the S and R nodes when undesired. This design provides a short term fix to a big problem, the unpredictable state at S=1 and R=1 (given the clock is being triggered CLK=1). to the SR-latch design of 2 NAND or 2 NOR gates. Take a look at the pictures for a more thorough understanding of the design.

This clock is positive edge triggered.

For the design to be negative edge triggered the AND gates would be NAND gates.

Clocked Set-Reset Latch Table (+ edge)
0 X X Q Q' No change in Q and Q'
1 0 0 Q Q' No change in Q and Q'
1 0 1 0 1 Clear Q
1 1 0 1 0 Set Q
1 1 1 ? ? Undesirable state

The Set-Reset Latch

Set-Reset Introduction

The Set-Reset latch (SR-latch) is composed of 2 NOR gates that feed their output back into the one of the others inputs. The NOR gated are said to be cross-coupled. See the picture to the left.

It's Beautiful on the Outside..

The SR latch seems perfect at first glance; however, the set-reset latch has a one fatal flaw: an unpredictable state. Most likely, if you try to think about the design for too long you will end up with a headache because the resulting Q and Q' during R=1 S=1 are opposite, and unpredictable.

As a result of that problem more complex designs for the latch were designed, such as the Set-Reset Gate that includes a clock in its design. A clock determines when input can be processed.

This is the logic diagram for S'R' Latch. The S'R' latch is constructed from 2 cross-coupled NAND gates and is commonly confused with the SR Latch.
Set-Reset Latch
S R Q Q' Description
0 0 Q Q' No change in Q and Q'
0 1 0 1 Clear Q
1 0 1 0 Set Q
1 1 ? ? Undesirable state

Saturday, June 09, 2012

Java String Methods - Length

The "string".length() Method

Length is a method/function used to obtain how many characters are present. These characters include spaces, punctuation, underscores, symbols in unicode, numbers and just about anything else you can think of.

For example, "iRobot" is a string that contains 6 characters, 'i', 'R', 'o', 'b', 'o', and 't'. Each character has its own index (location) in the String, in which calling "iRobot".length() will specify how many characters or spaces there are in the String.

This knowledge would be useless without an application so imagine you, a software developer, needs to ensure your clients names will fit on the screen of your newly built program. Without going through your clients one by one, you could use the length function on each one of their names in your database to find the longest name you must display. Code for this will be in example #1.

Example #1

public static void main(String[] args) {
 String[] clientNames = new String[]{
  "Jacobs", "Trout", "Semor", "Lee","Poppins",
  "Jenson", "Johnson","Peterson", "Kim", "Brown"};

 int longest = 0;

 for(String s: clientNames) {
  if(s.length()>longest) {

 System.out.println("Minimum characters for display: "+longest);

In example #1 the length method is used to figure out which string has the most characters. It is important to realize that Strings do not have a character at someString[someString.length()] would throw an exception and terminate your program. Remember that arrays and Strings alike are indexed starting with 0.

The last character of a String can be obtained by someString[someString.length()-1].

More On Java Strings

Monday, June 04, 2012

Digital Logic Circuits

Why Digital Logic?

Digital Logic Circuits are electric circuits that perform logic operations instantly. The job of digital logic circuits is to complete tasked in logical fashion without human involvement. The reason we rely on electric circuits is because they save people time, reduce noise damage, are space-consciousness or tiny, and do so in a systematic manner.

The Digital States

Binary, a 2-based number system, is used to describe the state of a wire connected to a power source. Any point of a logic circuit is either 1, 0, or Z. 1 is used to describes wires that have positive current (conventional current) flowing through them.

A 0 is used to describe wires that DONT have negative current (electron current) flowing through them. Z is the null state or inactive state. Inactive states are given to parts of circuits that are not connected to any points with flow, positive or negative. Do not worry if you do not totally understand the Z state, because it is of less importance.

Computers Use Digital Logic with Binary Data

Our Computers use binary numbers to describe all the tasks a computer has to take care of. By combining binary numbers into groupings a large amount of defined states can result. For every bit (binary digit) of a set of bits you raise the number of possible combinations to the second power.

The Three Logic Gates Everyone Should Know

The 3 main logic circuits (gates) everyone should know are the AND, OR, and NOT gates. The AND, OR, and NOT gates are found in chips (Integrated Circuits) and perform logic operations (their names). The logic operations provided by the AND, OR, NOT (AOI) gates are used to describe specific output logic states for the corresponding input logic states.

The AND, OR, and NOT gate are special because they are easy to understand and can form any of the other logic gates (NOR, XOR, ect) when in a combinational logic circuit. AND gates are symbolized by multiplication signs or being right next to another variable. AB and A*B, alike would both imply A AND B. OR gates are symbolized by plus signs (+). And finally, the NOT gates are symbolized with a single quote after the variable or a line above the variable.

F F F False
F F T True
F T F False
F T T True
T F F False
T F T True
T T F True
T T T True

Using Truth Tables

To describe the function of any logic gate, we use truth tables. Truth tables show all of the combinations of inputs and their corresponding outputs.

Truth tables are extremely effective for logic circuits that have 4 or less input variables like A, B, C, D. When logic circuits exceed 4 input variables it is going to be more effective to use a computer to analyze and simplify it or to create K-Maps (Karnaugh Maps). However, in my own opinion, learning to use truth tables is 10 times easier than learning to use K-maps. More on Truth Tables...

Boolean Algebra

This paragraph is here to clarify the terminology used in describing and building logic circuits. True and false are familiar words to us, but boolean is not. Boolean values are true or false!

The problem that complicates boolean algebra is that there are many ways of representing true and false. True is also represented by: 1, T, ON. Likewise, false can be represented by: 0, F, OFF. Logic expressions describe a logical state which is built of boolean variables such the two letters, A and B. Remember multiplication = AND, addition = OR; horizontal line or apostrophe = NOT.

Complex Logic Circuits

As shown in the first picture of this post (top-most), logic circuits often involve more than 1 type of logic gate and often feed their output into another logic gate(s). Any logic circuit that is not composed of one single logic gate is considered a complex logic gate.

For example, an AND gate may output A*B into an OR gate to create (A*B)+C. The most desirable complex logic circuits are the ones that perform with the least amount of gates rendering them not so complex.

Simplification is an important concept of digital logic that involves replacing logic circuits with equivalent, faster, and cheaper logic circuits. When a cell phone company selling one millions of cell phones, each cent spent on a less efficient logic circuit would cost them about $10,000 each year total.

Saturday, June 02, 2012

Binary Division

The Three Steps Of Binary Division!

  1. Line up the divisor with the most significant end (left-most bits) of the dividend.
  2. Compare the binary snippet (bits) of the dividend to the divisor a) If the dividend is greater than or equal to the divisor, then add a 1 to the quotient from the left of any other quotient bits and perform the binary subtraction. b) If the divisor is greater than the dividend, then add 0 to the quotient (from left) and do not perform subtraction.
  3. Shift the divisor one binary digit (bit) to the right and go to step #2.

Binary division is a lot like decimal division, but if you do not understand binary subtraction then that may complicate binary division for you. Here are some binary division problem and answer examples I created as pictures. The work is shown so you can see how to go about using the 3 steps above. If you cannot see the pictures then please notify me.

  Here is a link to a Binary Calculator. Online Binary Calculator

Also, most computers come with a calculator which can perform binary operations when in 'programming' mode. In Windows 7 the path is Start > All Programs > Accessories > Calculator