Not good to have this default db prefix

However, this is not so good because now hackers will know all your database table names.  Although they still have several obstacles to overcome, having predicable tablesname just makes it somewhat easier to hack .

It is better to have your database table names looking like this with obscure table name prefix …

But how do you change the database prefix after you had already installed wordpress.  There is an option to specify it during installation of WordPress, but no option to change it afterwards.

Good thing there are plugins that would help to change the database prefix.  Certainly easier and safer to use a plugin than to manually copy the tables over to another table name and then change the wp-config.php file.

Of course you want to make a full database backup of your database first.

Changing the database prefix with “Change DB Prefix” Plugin

In this tutorial, we will look at two plugins that can do the job.  One such plugin is “Change DB Prefix Plugin”

1. Install and activate this WordPress plugin.  For the purpose of this tutorial, we are working with WordPress 3.8.1 and Change DB Prefix plugin version 1.0.

2.  After installation and activation of the plugin, go to “Settings -> Change DB Prefix”.

3.  It shows your current database prefix.  Enter your desired new database prefix.

change db prefix

4.  In our example, we are changing from the default WordPress prefix of wp_ to wpexample_

5.  If all goes well it should give a confirmation message that all tables have been successfully updated and the wp-config file has been updated.

Changing database prefix with Better WP Security Plugin

Better WP Security does many things related to security.  One of which is to change the database prefix.

Here is how to use that option.

1. After installation of the plugin, go to Security menu in WordPress dashboard.

security menu

Before you can do anything , the plugin will prompt you to backup your database.  I prefer to backup the database myself, rather than clicking that backup button shown above which would potentially email you a large backkup file.

Assuming that you already have a backup,  click the “No, thanks. I already have a backup” button.

2. Select the Prefix tab…

change database prefix tab

3. Click the “Change Database Table Prefix” button.  You don’t get to select your database prefix; it will randomly generate one for you which it will display for you at the bottom of the page saying “Your current database tabel prefix is t3b6x723f_”

You can always click the button again to re-generate a different prefix.

This tutorial was based on WordPress 3.8.1 and Better WP Security plugin version 3.6.3

With the title being “Dependency Injection with AngularJS“, this is not an intro book on AngularJS.  The book is technical and is geared for the intermediate web developer.

While you do need to have good understanding of HTML, CSS, Javascript, and coding experience, you do not need necessarily need to have AngularJS knowledge.

Because the first chapter will provide you with a concise overview of AngularJS by going through an example program.  You learn to add a controller, add routes, and add filters.  In addition, you learn about angular bindings, about services, and then learn to encapsulate a chart into a Angular directive.  All this in the first chapter.  The book is concise and moves fast.  Perhaps that is why the first chapter is called “Learning to Fly”.

Now that you know how to fly, the second chapter gets into development principles such as …

• DRY (Don’t repeat yourself)
• SOLID
• Dependency Inversion principle
• Law of Demeter

You’ll learn the principle of dependency injection as well.

Wikipedia defines dependency injection as …

“Dependency injection is a software design pattern that allows the removal of hard-coded dependencies and makes it possible to change them, whether at run-time or compile-time.”

In chapter 3, the book looks at how AngularJS is bootstrapped.

In chapter 4, the book goes into testing with Jasmine and Karma.  There is also an intro to end-to-end testing with Protractor, which is an Angular-specific test framework.

The final chapter 5 discusses strategies for building and organizing large applications.

Note: This book review is opinion at the time of writing.  The eBook for this review was provided free of charge by the publisher.

Now we will add our widget area to the TwentyCustom theme.

1.  In Dashboard ->Appearance -> Widgets, see that the theme currently has two widget areas: The Main Widget area and the Secondary Widget area….

current widget areas

that corresponds to these locations in our theme …

location of widget areas

2.  Let’s add a new widget area at location shown in blue above — the right side of the header.

3.  We put some code (marked in red below) in header.php of our theme folder TwentyCustom to make room for our new widget area …

widget area code in template

We bounded our existing header in a div floated left at 60% width.  We inlined the CSS styles for the purpose of this tutorial.  But you should refactor those styles out to your style.css file.

Then we created a second div floated left at width 40%.  This div shall be our header widget area.  To test how it shows up, we applied a blue border and put in dummy text “This is our new widget area”.

Finally, we wrapped these two divs in an container div with class “clear” because we see that class clear in style.css uses the micro clearfix technique to clear floats.

4. Applying these changes, we see our widget area is nicely placed …

widget area placed

5. Next we have to register our widget so that admins can configure it in the dashboard.  We use the hook APIs which goes into the functions.php file of our theme folder.  At the bottom of our functions.php, we write this …

code to register widget

How did we know to write this?   Because that was how the theme TwentyThirteen registered its Main and Secondary widget area.  Just search “register_sidebar” in your functions.php and you see similar code.

But what it means is …

The “add_action” line is the taking advantage of WordPress’s widgets_init hook.   “widgets_init” is a WordPress hook.  When that event happens (which will happen when wordpress start initializing widgets), WordPress is going to call our function which we arbitrarily named “header1_widgets_init”.  But by convention, we usually have the suffix of the function match the hook.  That’s why the function name ends with “widgets_init”.

Then we define our function header1_widgets_init.  It basically just calls the WordPress function register_sidebar.  “sidebar” is what it calls “widgets area”.   register_sidebar takes array of key-value pairs, where you fill in the values.  For name, we gave it the value “Header Widget Area One”.  And we gave “header-1″ as the id.

6. The function register_sidebar enables our widget area to show up in the dashboard.  Go to dashboard now and you can see it …

widget area in dashbard

Note that the description that we passed into register_sidebar shows up as well.

7. While we are here, drag a search widget into there and give it the title “Find Something”.

add widget to widget area

8. But it won’t show up on our site yet until we alter our theme header.php file code to be like …

dynamic_sidebar

We wrapped an if-statement around the second floated div (which we have removed the debugging blue border).   If the header sidebar is active (as determined by is_active_sidebar()), only then we display the second div.   Contained within the second div is our header widget area.

We replaced the dummy text dummy text “This is our new widget area”  with the call to the WordPress function dynamic_sidebar().  Thgis function will output all the necessary code for your widget area.  You just have to pass it the widget area id, which we had specified as “header-1″ when we registered our sidebar.

8.  Now when you refresh the site, we see the search widget shown…

widget output code

Inspecting the code, we see that our widget is wrapped in a pair of “aside” tags.  This is because of the values that we gave it for before_widget and after_widget when we register_sidebar.

Note that h3 tags that wraps our widget title is from the before_title and after_title values passed into register_sidebar.

The class attributes in these tags are what we gave it.  Except there is a “%1$s” and a “%2$s” in the values for before_widget and after_widget.  These are sprintf placeholder arguments so that WordPress can pass the widget id and widget type into the tags.

What you want to do is to clone the Twenty Thirteen theme and give it a new name.  Then you can make customization edits to this new theme.

1.  In your wp-content/themes/ folder, copy the twentythirteen folder to a new folder called twentycustom.  We will call our new custom theme “TwentyCustom”.

clone wordpress theme folder

2.  Within your new twentycustom folder, find the style.css file and edit the theme name to be “TwentyCustom” .  This line enables WordPress to find your theme.   You might want to alter the description and other properties in the file as well.

3. Now when you go to Appearance -> Themes in your dashboard, you will see your new TwentyCustom theme.  If you want to change the theme thumbnail image, it is the file screenshot.png in the twentycustom folder.  Click “Activate” to activate your new cloned theme.

activate the cloned theme

4.  Now you can go make whatever edits you want in the theme files within the twentycustom folder without worry that WordPress updates would overwrite it.

Well, these “site-worth calculators” are not very accurate.  To see just how accurate or off they are, put in the site “google.com” and see how much they say it is worth.   Last check, I typed in google.com on www.urlappraisal.net and it gave me $3,252.  Are you kidding?   Google.com worth a few thousand $$$’s.   Give me a break.   Anyone knows google.com just the domain name is worth much more than that.

I tried it on www.yourwebsitevalue.com and it gave me a more realistic answer of $1.6 billion.

Two calculators gave two extreme answer.

For those in the business of buying and selling sites, they typically will calculate a site worth as a multiple of its monthly revenue.  What that multiple is would be subject to debate.  I’ll let you google on that.

If you are really interested in selling a site.  Another way to determine worth is to actually put it up for sale and see what kinds of bids you are getting.  One place is flippa.com or one of the other nice places listed on article 10 places to sell your website.

HTML 5 is a significant change from HTML 4.  It comes with brand new tags and a new doctype plus more.   However older browsers that was in existence prior to HTML 5 will not know of these news tags.  Of course, we will want our page to be viewable on these older browser as well. Therefore there are various tricks and techniques that we have to employ in order to get our HTML 5 page to render on older browsers.

The easiest way to start is to start with an HTML 5 template that has all these techniques and best practices coded for you already.   HTML 5 Boilerplate is the popular template to use.  We will use this template as the skeleton for our HTML page.

1.  First download the latest HTML5 Boilerplate from http://html5boilerplate.com/

In this tutorial we are using version 4.0.0.

2.  After you have downloaded and extracted the zip file into a new folder on your hard disk, you will see a bunch of files like the following…

3.  The main file that we are interested in is index.html.   Open this file in your favorite text editor. (I’m using Dreamweaver).

4.  Note the new doctype is now the following…

<!DOCTYPE html>

This is the new doctype for HTML5.  If you see this, it means that the author intends for this to be an HTML 5 document.

5.  Without changing any code, just test it by running the index.html file in your browser.   We are using Chrome for this viewing. As of this writing in October 2012, Chrome version 22 is the browser that supports the most features of the latest HTML5 specifications, according to HTM5Test.com. That is why many web designers like to using Google Chrome during development.

You will see the following in the browser …

which indicates that everything currently works.

You can say that this is your first “Hello World” HTML5 page.  Of course, we now want to start writing some code so that we can understand how all the pieces are put together.

6.  Let’s add a title to our page by typing in “Our First HTML5 Page” into the index.html file in between the <title> tags as shown…

This is known as the “Page Title”.  After saving the file and refreshing the browser, you should see that our page title shows up in the browser tab.

7.  HTML5 Boilerplate intends for you to delete things from it that you do not need.  One of the things that it puts in near the bottom of the HTML file is a code snippet intended for Google Analytics.  Since we will not be using that in this example, we will delete it.  If you don’t know what Google Analytics is, then you don’t need it.

Delete the code as that is marked as shown…

If you save file and view in browser, you will see that the deletion had no effect.

8.  Let’s make the background color be a pale gray.   Styling information is done in CSS.  And if you are using HTML5, you would be using CSS3 (as opposed to CSS2).   The CSS code is found in the main.css file within the css folder.  You can see that our index.html file links to this css file via the link tag shown below …

8.  Now open up the main.css file in your editor and look for the section that says “Author’s custom styles” — that’s for us.

9.  We write our first CSS rule into that section.   The code shown above highlighted by the red rectangle is the code that we just added.  This tells the browser to set the background color of our page to be light gray (which is the hexidecimal color #CCCCCC).  Save changes in the CSS file and refresh browser.   Our page now has gray background.

10.  Now you may have noticed that the index.html page also links to another css file called normalize.css.

11. You don’t have to worry about that css file.  Not all browsers may use the same default styling for a HTML page.  Hence, one technique is to use CSS to make the styling consistent among browsers .   This is known “normalizing the styles” and the code for doing that is known as “css reset code”.  That is what is contained within normalize.css.

12.  Also within normalize.css, you will see this code …

This is to allow older non-HTML5 browser to work well with the new HTML5 tags (some of which are article, aside, details, figcaption, figure, footer, header, hgroup, nav, section, summary).

The CSS contain styling to make these new tags display as “block style” tags.   Shown above is the “display” property with the “block” value for these new tags.  Don’t worry about what that means for now since this is your first  HTML5 page.  We have to take things one step at a time.  Just know that the above CSS code is needed to make older browser work with the new HTML5 tags.

13.  Next, let’s give some definition to our content area containing the text by adding some borders and a different content background color to set it apart from the background color.  In the index.html file, we will add an “article” tag (one of the new HTML5 tags) around the text content as shown…

Note that the starting tag (the first tag) is <article>

And the closing tag is </article> with the extra slash at the end.  That is how most tags work.  They come in pairs with a starting tag and a closing tag.  Save changes and refresh browser.

14.  You will see no effect until we add styling rule for the article tag.  Let’s add the article CSS rule to the main.css file…

We set the width of our page to be 500 pixels with the line …

width: 500px;

The margin property has two values …

margin: 20px auto

The first value 20px represents the top and bottom margins of our page.  The second value represents the left and right margins of our page.  Since we set that to “auto”, it has the effect of making the page be centered horizontally across the browser.

Saving the file and running in browser, we get  …

15.  In CSS3, we can have rounded corners and drop shadows like …

by adding the following two lines to our article CSS rule as shown below …

For the border-radius property, we set the roundness to 8 pixels (the greater the value, the more rounded).

The first two values of the box-shadow property represents the horizontal and vertical offset respectively.  The third value is the amount of blur.  And the fourth value is the color of the shadow.

16. One last thing before we are done, the text content is too close to the left edge of the page.  Add a bit of padding around the article element by ….

and we should get …

Since  we had only specified one value for the padding property, it will use the 30 pixels as padding for the top, right, bottom, and left edges.

In this case, since all the properties of the article CSS rule is unique, it does not matter which order you place the properties in.  We just like putting the padding property where it was.

And that is your first HTML 5 page.

Plus there are so many different ways of building them, from pure CSS menus to those that uses some jQuery.  Making them cross-browser compatible is another chore.

There are so many drop down menu examples out there, that you might want to look through a few to find one the most closely matches what you are looking for and then see how it works.

Here is a list of some drop down menu example (listed in no particular order).

• SuckerFish – AListApart.com
• Son of SuckerFish – HTMLDog
• SuperFish -
• How to Create a drop-down nav menu with HTML5, CSS3, and JQuery – tutsplus.com
• Smooth Navigation Menu – dynamicdrive.com
• Sliding JQuery Menu – hv-designs.co.uk

So when do you use the <i> versus the <em> tags?

Use <em> when you want to place emphasize on particular words within a sentence that would change the meaning of the sentence.  For example, these three sentences mean something slightly different …

Dogs are smart and likable.
Dogs are smart and likable.
Dogs are smart and likable.

And they are using <em> for the italics.

Use the <i> tag for general italicize text when you want to offset italicized text from the rest of the non-italicized text.  Or when text is in a different tone.

HTML5 W3C says to use <i> for text …

“in an alternate voice or mood, or otherwise offset from the normal prose in a manner indicating a different quality of text”

To convey importance, use <strong> instead of <em>.

See also the use of <b> and <strong>.

Well, in HTML5, the <b> tag is a perfectly legitimate tag to use.  And so is the <strong> tag.  So when to use <b> tag and when to use <strong>?

Both will bold text with appearance being the same.  However, the semantic meaning of the two are different.

Use <b> when you want bolded text for cosmetic reasons and when you do not intent to give the text any stronger weight in voice.   HTML5 W3C says to use <b> …

“for utilitarian purposes without conveying any extra importance and with no implication of an alternate voice or mood”

Use <strong> to give text a stronger voice along with a bolded appearance.