Categories
My Opinion

The 99 Habits of Highly Successful, Motivated, Efficient, Charismatic, Happy People

Do viral list articles on the web leave you feeling like you’re not measuring up? Like everyone is more successful, motivated, efficient, charismatic, and happy because they do things differently? Fret not my friend. I have the cure to all that ails your self-doubting soul: The definitive list of the 99 Habits of Highly Successful, Motivated, Efficient, Charismatic, Happy People.

Adopt these habits and your life and self-image will change dramatically for the better:

  1. Don’t read lists comparing yourself to others.
  2. Don’t read lists comparing yourself to others.
  3. Don’t read lists comparing yourself to others.
  4. Don’t read lists comparing yourself to others.
  5. Don’t read lists comparing yourself to others.
  6. Don’t read lists comparing yourself to others.
  7. Don’t read lists comparing yourself to others.
  8. Don’t read lists comparing yourself to others.
  9. Don’t read lists comparing yourself to others.
  10. Don’t read lists comparing yourself to others.
  11. Don’t read lists comparing yourself to others.
  12. Don’t read lists comparing yourself to others.
  13. Don’t read lists comparing yourself to others.
  14. Don’t read lists comparing yourself to others.
  15. Don’t read lists comparing yourself to others.
  16. Don’t read lists comparing yourself to others.
  17. Don’t read lists comparing yourself to others.
  18. Don’t read lists comparing yourself to others.
  19. Don’t read lists comparing yourself to others.
  20. Don’t read lists comparing yourself to others.
  21. Don’t read lists comparing yourself to others.
  22. Don’t read lists comparing yourself to others.
  23. Don’t read lists comparing yourself to others.
  24. Don’t read lists comparing yourself to others.
  25. Don’t read lists comparing yourself to others.
  26. Don’t read lists comparing yourself to others.
  27. Don’t read lists comparing yourself to others.
  28. Don’t read lists comparing yourself to others.
  29. Don’t read lists comparing yourself to others.
  30. Don’t read lists comparing yourself to others.
  31. Don’t read lists comparing yourself to others.
  32. Don’t read lists comparing yourself to others.
  33. Don’t read lists comparing yourself to others.
  34. Don’t read lists comparing yourself to others.
  35. Don’t read lists comparing yourself to others.
  36. Don’t read lists comparing yourself to others.
  37. Don’t read lists comparing yourself to others.
  38. Don’t read lists comparing yourself to others.
  39. Don’t read lists comparing yourself to others.
  40. Don’t read lists comparing yourself to others.
  41. Don’t read lists comparing yourself to others.
  42. Don’t read lists comparing yourself to others.
  43. Don’t read lists comparing yourself to others.
  44. Don’t read lists comparing yourself to others.
  45. Don’t read lists comparing yourself to others.
  46. Don’t read lists comparing yourself to others.
  47. Don’t read lists comparing yourself to others.
  48. Don’t read lists comparing yourself to others.
  49. Don’t read lists comparing yourself to others.
  50. Don’t read lists comparing yourself to others.
  51. Don’t read lists comparing yourself to others.
  52. Don’t read lists comparing yourself to others.
  53. Don’t read lists comparing yourself to others.
  54. Don’t read lists comparing yourself to others.
  55. Don’t read lists comparing yourself to others.
  56. Don’t read lists comparing yourself to others.
  57. Don’t read lists comparing yourself to others.
  58. Don’t read lists comparing yourself to others.
  59. Don’t read lists comparing yourself to others.
  60. Don’t read lists comparing yourself to others.
  61. Don’t read lists comparing yourself to others.
  62. Don’t read lists comparing yourself to others.
  63. Don’t read lists comparing yourself to others.
  64. Don’t read lists comparing yourself to others.
  65. Don’t read lists comparing yourself to others.
  66. Don’t read lists comparing yourself to others.
  67. Don’t read lists comparing yourself to others.
  68. Don’t read lists comparing yourself to others.
  69. Don’t read lists comparing yourself to others.
  70. Don’t read lists comparing yourself to others.
  71. Don’t read lists comparing yourself to others.
  72. Don’t read lists comparing yourself to others.
  73. Don’t read lists comparing yourself to others.
  74. Don’t read lists comparing yourself to others.
  75. Don’t read lists comparing yourself to others.
  76. Don’t read lists comparing yourself to others.
  77. Don’t read lists comparing yourself to others.
  78. Don’t read lists comparing yourself to others.
  79. Don’t read lists comparing yourself to others.
  80. Don’t read lists comparing yourself to others.
  81. Don’t read lists comparing yourself to others.
  82. Don’t read lists comparing yourself to others.
  83. Don’t read lists comparing yourself to others.
  84. Don’t read lists comparing yourself to others.
  85. Don’t read lists comparing yourself to others.
  86. Don’t read lists comparing yourself to others.
  87. Don’t read lists comparing yourself to others.
  88. Don’t read lists comparing yourself to others.
  89. Don’t read lists comparing yourself to others.
  90. Don’t read lists comparing yourself to others.
  91. Don’t read lists comparing yourself to others.
  92. Don’t read lists comparing yourself to others.
  93. Don’t read lists comparing yourself to others.
  94. Don’t read lists comparing yourself to others.
  95. Don’t read lists comparing yourself to others.
  96. Don’t read lists comparing yourself to others.
  97. Don’t read lists comparing yourself to others.
  98. Don’t read lists comparing yourself to others.
  99. Don’t read lists comparing yourself to others.

In conclusion: Don’t read lists comparing yourself to others.

Categories
WordPress WordPress as CMS

6 Must Have WordPress Plug-ins

WordPress is a powerful blogging platform and CMS that can be used for simple blogs as well as advanced websites. One of the things that makes WordPress my chosen platform for all my projects – from personal blogs to massive business websites – is the seemingly endless expandability through free 3rd party plug-ins. Over time I’ve tried many and discarded most, but some have stood the test of time and become compulsory installs in all the WordPress projects I work on.

Here is the list of Pink & Yellow approved must-have WordPress Plug-ins:

Akismet – Ninja Spam Killer

Since this blog was launched in February 2008, Akismet has caught an incredible 20,800 spam comments. At present it filters out about 100 – 200 spam comments per day. With such a high number you would think a lot of the comments are “false positives” – real comments mistaken for spam – but that’s just not the case. So far Akismet has been right 98% of the time and has saved me countless hours of sifting through garbage comments.

Akismet comes standard with WordPress. To activate it you need a WordPress.com account to generate an API key so your spam results can be tracked.

All In One SEO Pack – Get noticed

WordPress’ SEO is mindboggling to begin with. I’ve launched blogs that were listed on Google less than 30 minutes later without me lifting a finger! But unless you add an SEO plug-in, you have little control of how the meta data for your blog appears. Well, look no further than the All In One SEO Pack. Just like the name says this plug-in is an all-in-one solution to your problems. It allows you to define meta data such as title, description and keywords for any and all pages and posts in your blog or site independently of the actual page content. In addition it lets you set a default title, description and keywords for your blog or home page so you don’t get a pile of different stuff from all the different posts featured there. The true power of this plug-in can be seen in many of the posts on this blog where the page title (seen at the top of the browser window or browser tabs) and description is different from the title and body of the post itself. This is ideal if you want to push or customize only the most interesting or most important info to search engines for more hits.

Sociable – All the social networks in one place

A quick way to get some attention for your blog or website is by getting people to list it in social networks. However, this only happens if people either have browser applications installed or take the time to manually post your links to these sites. To make this step easier and increase the chance of getting posted you should add bookmarking buttons directly on your pages and posts. And that’s what Sociable does. This plug-in serves up a huge and expanding list of social networks with icons that can be placed at the end of every post or only on certain posts as defined by you. It is easy to manage and quite effective when implemented. Unfortunately it also clashes with OIO Publisher, a popular advertising plug-in that I use on this blog. For this reason Sociable is currently offline here at Design is Philosophy. Hopefully this will be solved shortly and I can get the tags back on my posts for some increased attention.

WordPress Automatic Upgrade

One of the great things about WordPress is that it is constantly updated and improved. Just this year alone we have seen what… 5 or 6 new releases? But while updates are great, actually performing the task of updating your blog can be a bit of a pain, especially if it is highly customized like this one is. Well fret not my fried: WordPress Automatic Upgrade is here to help. This plug-in guides you through a complete upgrade of your WordPress powered site from right inside the WordPress admin panel. Through a series of steps it lets you run backups of important files and your database, deactivates plug-ins, takes the site offline while the update is happening, downloads the latest version of WordPress, updates the application, reactivates the plug-ins and puts the site back online. The whole process takes two minutes tops. Which is far less than the manual upgrade procedure. And it keeps all your custom settings and themes intact.

WordPress.com Stats – Keep track of your visitors from within your blog

There are hundreds of excellent site stats services like Google Analytics out there for you to use. But they all require you to go to a separate service to track your visitor activity. WordPress.com Stats runs stats from within your blog and lets you access them right from your dashboard. Your blog is tracked via the same API Akismet uses and by applying the same API to numerous blogs you can get stats from all of them from within any of the other ones. Very convenient.

WordPress.com Stats tracks visits as well as page views and gives you stats on the most popular pages, search engine search words, incoming links, clicked links and a lot of other info that gives you a better idea of how your visitors are using the site. It is by no means the perfect solution, but neither is most of the other options out there. So for pure convenience it is great.

WP-Syntax – Display code as code

When you write coding tutorials it is important to not only make the code stand out visually from the rest of the text but also to help the reader understand what kind of code it is they are looking at. WP-Syntax does just that. This plug-in styles a huge list of code languages with colours, tabs and markers to make it easier to read and easier to display. I use it heavily in my tutorials and it works great once you figure out how to use it properly. WP-Syntax runs an independent style sheet so you can also customize the styles for your own site if you want. The only catch is that you have to write your posts in HTML view to avoid massive coding conflicts. But that’s a small price to pay for a professional look and better user interaction.

These are the plug-ins I always install on blogs and sites I create. If you haven’t been there before I recommend you take a look at the plug-ins page in WordPress Extend where thousands upon thousands of plug-ins for pretty much every purpose is served up free of charge.

My list is by no means a complete and I’m sure there are many other plug-ins out there that deserve some attention. If you know of any or think I’ve missed some, post them in the comments below and I’ll take a closer look.

Categories
CSS Expression Web Tutorials

Fancy Interactive Pure CSS List Boxes with Hover Effect

Box List with hover effect

There was an urgent need to expand the product gallery for the Nature’s Carpet website I built last fall. More specifically they were asking for the ability to easily update and ad new carpets with info and pictures. The info would be fairly minimal (name, product number, some short details) and the most important aspect would be the ability for the visitors to see high quality photos of the carpets as surfed through without having to open new windows etc. In accordance with my new found obsession with standards based code and CSS, I decided that this could be an interesting challenge: Could I make a tableless product gallery with pop-up images triggered by roll-over behaviours and some other fancy effects while still keeping all the info in an unordered list? Well, after some trial and error, the answer is yes. And here’s how it’s done (I actually did all the styling in Expression Web using the Modify Styles functions, but for brevity (and those of you who don’t use Expression Web) I am just going to list out the actual CSS code here):

From idea to reality

One of the challenges with the Nature’s Carpet site is that it will be constantly updated by the company itself. Would be easy if the backend was a CMS, but as of now it’s not so it is done manually. The tricky part was to make the code as fool proof as possible without making the site bland and uninteresting. I had this idea of having each carpet represented by a small rectangle with a thumb nail on top and the name and info underneath. When the visitor hovered over the rectangle, the background colour should change, and when she hovered over the image, a larger one should pop up automatically without having to do anything.

Step 1: Make a list

The most fool proof thing I could think of was a simple unordered list. And that’s easy enough:

  • ”Aureg

    Aureg - Bracken

    Berber loop PIle

Problem is an unordered list looks like an unordered list. What I wanted was something that looked like a 3 column table.

Step 2: Wrap the list items in a box

To keep the list styles separate from the rest of the list items in the page, everything needs to be wrapped in a box.I call it showcaseWrapper:

#showcaseWrapper {
}

All the content in each unordered list item should also be wrapped in it’s own box. Since there are several lists, it has to be a class rather than an id:

ul.showcaseList {
padding: 0px;
margin: 0px;
list-style-type : none;
}

This strips away the regular spacing and elements featured in an unordered list. Now the list items themselves:

ul.showcaseList li {
margin: 0 4px 8px 4px;
border: 1px solid #D1CAC2;
width: 165px;
height: 200px;
background: #FFFFFF;
float : left;
display : inline;
}

Pretty straight forward: The margins are used to space the boxes evenly. Each box has a solid grey stroke and a white background. They float to the left and line up side by side rather than on top of each other. Take special note of the “width” and “height” numbers: They are not flexible because I want the items to line up nicely. These values match the content displayed perfectly and fills out the space nicely. Depending on what you want to put inside your boxes, you can change them. I would advice against making the height dynamic because if one box is taller than the rest, the order becomes disorder and the whole thing becomes a big mess.

Step 3: Make a Hover Effect

I also wanted the boxes to react to the mouse hovering over them to give the visitor a more interactive experience. This is surprisingly easy: Just ad a “hover” stage to the list item with some different info like this:

ul.showcaseList li:hover {
margin: 0 4px 8px 4px;
border: 1px solid #D1CAC2;
width: 165px;
height: 200px;
background: #E7E2DE;
float : left;
display : inline;
}

Notice that the only difference is the background colour. You could make it more fancy by using a graphic background and the sliding doors technique like Verlee did. Or you could make the entire list item into a link. The posibilities are endless.

Step 4: Style the Content

Now it’s up to you to style the content as necessary. Since everything is wrapped in the showcaseWrapper id, you can safely style everything within the wrapper without it affecting the rest of your site. Here are a couple of examples:

#showcaseWrapper ul.showcaseList img {
padding: 6px 7px 3px 7px;
}

#showcaseWrapper ul.showcaseList h3 {
margin: 0px 10px 0px 10px;
color: #666666;
display : block;
text-decoration : none;
font-family: Arial, Helvetica, sans-serif;
font-size: 1em;
font-weight: bolder;
font-style: oblique;
text-transform: uppercase;
height: 2.6em;
}

Final HTML Markup

  • ”Aureg

    Aureg - Bracken

    Berber loop PIle

Final CSS

/* The box that wraps the entire list /*

#showcaseWrapper {
}

/* Styles for text not contained in the lists  */

#showcaseWrapper h2 {
color: #666666;
font-size: 1.2em;
text-transform: uppercase;
margin-left: 5px;
margin-top: 0px;
clear: both;
}

#showcaseWrapper p {
padding : 10px;
clear : both;
}

#showcaseWrapper a {
color: #5F8C00;
}

#showcaseWrapper a:hover, #showcaseWrapper a:focus, #showcaseWrapper a:active {
color: #3D5900;
text-decoration : none;
}

/* The list itself  */

ul.showcaseList {
padding: 0px;
margin: 0px;
list-style-type : none;
}

/* Turning each list item into a box and stacking them sideways */

ul.showcaseList li {
margin: 0 10px 8px 4px;
border: 1px solid #D1CAC2;
width: 165px;
height: 200px;
background: #FFFFFF;
float : left;
display : inline;
}

/* The hover effect for the list box  */

ul.showcaseList li:hover {
margin: 0 4px 8px 4px;
border: 1px solid #D1CAC2;
width: 165px;
height: 200px;
background: #E7E2DE;
float : left;
display : inline;
}

/* Styles inside the list boxes */

#showcaseWrapper ul.showcaseList h3 {
margin: 0px 10px 0px 10px;
color: #666666;
display : block;
text-decoration : none;
font-family: Arial, Helvetica, sans-serif;
font-size: 1em;
font-weight: bolder;
font-style: oblique;
text-transform: uppercase;
height: 2.6em;
}

#showcaseWrapper ul.showcaseList p {
font-size : 0.9em;
padding : 0;
margin: 5px 10px 10px 10px;
}

/* Padding the image */

#showcaseWrapper ul.showcaseList img {
padding: 6px 7px 3px 7px;
}

Here again is the final result. And yes, it validates (provided the client didn’t mess with the html code).