Fix for Bold Fonts Looking Bolder in Chrome

If you noticed your fonts in Chrome looking more bold in Chrome than Safari – there is an easy fix. Add this in to your stylesheet (body or specific CSS class/ID):

Example:

h1 {-webkit-font-smoothing: antialiased;}

You can see the difference:

Before:

After:

Add Bootstrap Button Classes to the WordPress Comment Form

Looking to stylize that WordPress comment button on the WordPress comment form? Adding the correct classes needed to the comment form button are as easy as finding where comment_form() is called in your theme. In my cases – this is within the comments.php file.

Once you find that – you just need to change
comment_form()
to:

$args = array(
'class_submit' => 'btn btn-default',
);
comment_form($args )

There are a number of modifications you can make to the comment form (changing button text, changing labels, adding notes, etc that you can make with the comment_form() function which are worth looking at here: https://codex.wordpress.org/Function_Reference/comment_form

Add Bootstrap Classes to WordPress Widgets

When creating your Bootstrap WordPress themes, you will notice the sidebar widgets (archives, categories, etc) which use dropdowns do not share the Bootstrap styling because there is no place easily accessible to add in the needed classes or CSS.

Considering the options – here are two ways you can turn those default selects into something that matches the rest of your beautiful Bootstrap site.

Add a filter in your functions.php file

This is specific to the category dropdown. I was hoping we could use the same on the widget_categories_dropdown_args filter, but that is not possible as of WordPress 4.6. (see next example to address this). This filter works great if you use the categories widget and no other that display a select.

/**
 * Add CSS class to sidebar category selects.
 */
add_filter( 'widget_categories_dropdown_args', 'lucidity_widget_categories_dropdown_args' );
function lucidity_widget_categories_dropdown_args( $args ) {
    if ( array_key_exists( 'class', $args ) ) {
        $args['class'] .= ' form-control';
    } else {
        $args['class'] = 'form-control';
    }
    return $args;
}

Add some Bootstrap CSS to your style.css file

This works great if you have multiple selects displayed within your widgets. Note: the sidebar in the example has an ID of “sidebar”. This CSS is brought over from the Bootstrap .form-control style.

#sidebar .widget select {
display: block;
width: 100%;
height: 34px;
padding: 6px 12px;
font-size: 14px;
line-height: 1.42857143;
color: #555;
background-color: #fff;
background-image: none;
border: 1px solid #ccc;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
-webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
-o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}

I hope this helps make your site a bit more cohesive with the Bootstrap styles!

Remembering My Mentor: Alex King

I was very sad to hear that Alex King died a few days ago and have been trying to think about what to say. If you do not know Alex or who he is – he was many things to many people – but to me – he was my mentor. I was an early adopter of WordPress (back before themes and plugins). I started following him (RSS) back in 2002 because he was always creating/sharing snippets and eventually themes/plugins that made WordPress better. I also was one of the first users of his Tasks software which I used religiously – so much so that I would email him with questions/suggestions, and would partake in beta testing new versions. He was also an avid golfer who enjoyed his PING irons like me.

After one email in which I mentioned I wanted to start my own company – much like he did, he offered his support, advice, and even started sending me referrals. I am sure I would not be where I am today without him. He was meticulous with his code and kind with his words. He was always very approachable and always made time for me. He consistently put a lot of thought into his work – so much so that he one time asked for my feedback on possible change options for his email signature. He made sure things were not just done, but done right. He provided guidance to me on many levels – everything from code reviews to business advice.

To me – Alex King will always be the one person in my life that pushed me to get out of my comfort zone, put myself out there, and to do great things. He also taught me that not all ideas/projects will be a success – but to keep trying and never give up. While I am very sad Alex King is no longer on this earth – I am so happy to have made the connection with him 13+ years ago. I will be forever grateful for everything he has done for me and other developers like me. Thank you Alex – for your code, your time, and your inspiration.

Custom Date Sort with jQuery Tablesorter and Bootstrap Table Plugin

In the past week I have dealt with two different needs to sort a table date column (using a custom date format) using a JS plugin jQuery Tablesorter 2.0 and Bootstrap Table. If you use custom date formats – the default sort will not always work. In my case – it was sorting the dates by month name alphabetically and not by date order. Here is how you can use both plugins to sort by date order:

Example date format: Jan 28-Jan 31 (date for this example was a span of dates – in which I wanted to sort by the starting date)

Custom date sort solution in two steps for jQuery Tablesorter and Bootstrap Table:

jQuery Tablesorter

  1. Add data to the table header:
    <th data-sorter="shortDate" data-date-format="yyyymmdd">Date</th>
  2. Add a hidden span before your actual date in the data that then matches the format specificed above:
    <span style="display:none"><?php echo date( "Ymd", strtotime($date) ));?></span> Jan 28-Jan 31

Very similar to the jQuery Tablesorter solution:

Bootstrap Table

  1. Add data to the table header:
    <th data-field="created" data-sortable="true">Created</th>
  2. Add a hidden span before your actual date in the data that then matches the format specificed above:
    <span style="display:none"><?php echo date( "Ymd", strtotime($date) ));?></span> Jan 28-Jan 31

Now you can easily sort any date format using these two plugins so you can format the date however you want and still be able to sort by date on that column.

5 Cardinal Rules When Creating a Web Site

Over the years – working as a developer I have seen both a lot of great and horrible things with clients. In order to avoid the “horrible things” – I would highly suggest taking a moment and reading through the points below.

Step 1: So you need a web site…

Your development options:

  1. You also know someone who has a cousin who does web sites on the side
  2. You outsource it to a company who charges $10/hour
  3. You find a reputable web development company

Cardinal Rule #1

Realize your development decision has consequences. All options have costs you might not be thinking about. Not everyone wants/can spend a large amount of money on a project so they decide to choose option #1 or option #2. The initial project cost is lower on paper so you go with it. The costs you really need to consider with the first two options are often hidden.

  • Communication: How can I get ahold of you to talk about the project/status/any issues? (If this is someone who does it “on the side” or is located in another time zone – are you ok with a delay or odd hours of communication?
  • Quality: Can your cousin’s friend who does this on the side create something that you want to represent you? Perhaps sometimes – but more than often – you will get something for less money and quality and it will show.
  • Cost: Option #3 is not always the best for you either. Perhaps you have a new business and you want something really professional, but you do not have a budget to match what you want. I have seen companies put so much money into their site – that their business fails because they overspent.

No options is perfect – but you need to be comfortable with the decision and realize there are potential downfalls.

Cardinal Rule #2

Get a contract in place with guarantees/terms. If whomever you decide to work with does not want to get this in place first thing – huge red flag and good luck. This is an essential part of any business as it sets expectations and protections for both the client and developer.

Step 2: Let’s start this!

Now that you have started the process and selected the right web developers – it is time to start building your site. The fun (or nightmare) is just about the start.

Cardinal Rule #3

Never let your developer register for all needed accounts/licenses. I have seen it time and time again where a developer registered something, stopped working for their company/client and with their departure also went all the licenses/accounts. Example – your developer offers to register your domain name for you, but when they do – they then get all notifications of when it expires, and control renewal. The developer then ends their business relationship with you for whatever reason and when your domain name needs to be renewed – you have no control over it and after spending money/time on building your online presence – lose it all because your domain name has been bought by someone else. Ouch. I have seen it. Another example: your developer sets up your hosting account. The developer leaves and they stop paying for/close the hosting account. Good bye web site. Better yet – you do not own the account and cannot even request a backup of your site. OWN YOUR DATA/LICENSES/ACCOUNTS

Step 3: My site is amazing!

After the development is over – now you can enjoy the end product (or can you?).

Cardinal Rule #4

Know what your backup policy is/make sure you actually have backups. Some people think $5.00/month hosting is a great deal until they realize they do not have any backups or that backup are an added cost that they never sign up for. Whoops. I have also seen more expensive hosting packages that only keep backups for 48 hours. This may work for some people – but if there was an issue on Friday, and you get in on Monday and realize it – your backups are not going to help. Make sure you are comfortable with your backups.

Cardinal Rule #5

Keep your software up to date. If there are security updates – apply these sooner than later. No excuses. If you are worried about an update breaking something – set up a staging environment and test there. If you do not have a staging environment but feel like testing is still important – spend the time and money to get one. I have seen clients who have had a security breach because they decided it would be best if they “only update quarterly” which may sound nice in a written report to someone – but when security issues come up and there are patches – they need to be applied ASAP or your site becomes vulnerable. Resolving security issues always cost greater than applying the updates.

In summary – not everyone knows the process or what they need to do when starting a web site project or maintaining their own site. My company has helped a lot of clients from start to finish and will make sure we go over the items above. We have also seen/helped a lot of clients who had an issue with one of the cardinal rules above and I, if possible, hope reading this has made you more aware of potential things to think about when doing any web site development. Creating and maintaining a web site can be a great experience or a nightmare. I hope your experience is great!

Embrace the New , Remember the Old

Four years ago I put together a base theme/framework called “Lucidity” that served me well. I even created a mobile version which also worked great. As the years went on – and I started using Bootstrap for responsive designs, I realized it was time to update my personal site and here it is. I will be making some final tweaks over the next few days, but it feels good to get something new and more modern out there, while still using some of my favorite elements of Lucidity and the older versions of jappler.com along the way.

Hello new design

Goodbye old design

Install Varnish in Under 5 Minutes With Bitnami

If you have been following my posts for the last month (or talked to me about what I have been up to recently) you will not be surprised I have another post about the ease of use/awesome documentation when using Bitnami.

I still am 100% impressed with the documentation – as each example I have followed has worked flawlessly (not something I can say much…especially after spending an evening trying to fix my PS3 vs. play it a few nights ago).

What is Varnish?

Varnish Cache is a web application accelerator also known as a caching HTTP reverse proxy. You install it in front of any server that speaks HTTP and configure it to cache the contents. Varnish Cache is really, really fast. It typically speeds up delivery with a factor of 300 – 1000x, depending on your architecture.

Source: https://www.varnish-cache.org/about

Where is this amazing 5 minute install documentation?
Bitnami Varnish Installation

Seriously…check it out!