Wednesday, October 30, 2013

Simple Bootstrap 3.0 Collapsable Panels (UPDATED)

I recently used a bootstrap panel for some features on a new project and really loved the way they look. However, I thought it would be even cooler as a collapsable feature, but didn't like the number of dom changes I need to make a panel use .collapse() each time. So I started a bs_addons library and here's the first feature for you!

To follow the project and/or contribute, head over to github: https://github.com/ericuldall/bootstrappl.us

Otherwise...Keep reading:
(OLD POST DEPRECATED) You can find updated info on using this plugin at: http://bootstrappl.us

Wednesday, October 23, 2013

Supercharge your pagespeed with Minified CSS and Deferred loading of JS

I'm a server side junkie, no doubt. I'm always trimming my bytes no matter how minimal the gain and I love picking up milliseconds of load time here and there...It really ads up. Being so wrapped up in the internals of my work I sometimes forget about the big wins to be had optimizing client side code. So, here's a quick snippet on how to speed up your website with two easy methods...

1. Minify and Cache CSS - minify for php

Download the minify code and unzip it to the root directory of your site and follow the user guide to complete the install (it's very easy!).

Then you're ready to start minifying...

CSS Include
<link rel="stylesheet" type="text/css" href="/min?f=path/to/file_one.css,path/to/file_two.css,path/to/file_three.css" />

It's really that simple!!

2. Defer Loading of JS - standard JS implementation (recommended by google)
Deferred JS Code
<script type="text/javascript">
  function downloadJSAtOnload() {
    var js_files = [];
    //add files here
    js_files.push('/my/file/one.js');
    js_files.push('/my/file/two.js');
    js_files.push('/my/file/three.js');
    //end adding files
    for(var key in js_files){ 
      var element = document.createElement("script");
      element.src = js_files[key];
      document.body.appendChild(element);
    }
  }
  if (window.addEventListener)
    window.addEventListener("load", downloadJSAtOnload, false);
  else if (window.attachEvent)
    window.attachEvent("onload", downloadJSAtOnload);
  else window.onload = downloadJSAtOnload;
</script>


If you're having trouble using the deferred loading of JS you can also use the minify method with your js as follows:
JS Include
<script type="text/javascript" src="/min?f=path/to/file_one.js,path/to/file_two.js,path/to/file_three.js" />


I hope your ready to see your site load faster than ever, I sure am.

Please comment, share and follow!

Helpful PHP functions you may not have heard of: Part 1

I'm always looking for a way NOT to reinvent the wheel, unless I have an abundance of available and a better design. While I often have a better design (shameless self promotion), I rarely have an abundance of time, which is why I love finding functions to make my life easier.

Check out the following 2 functions in php:

1. Parse the currency code and price as float from a string - numfmt_parse_currency
numfmt_parse_currency sample
$fmt = numfmt_create('en_US',NumberFormatter::CURRENCY);
$num = "$223.45";
$price_as_float = numfmt_parse_currency(
                                           $fmt,
                                           $num,
                                           $curr
                                        );
print $price_as_float . "\n"; //prints 233.45
print $curr . "\n"; //prints USD


2. Truncate text and add ... - mb_strimwidth
WARNING: Be careful using this function with text that has html in it! It may possibly break an html tag causing your entire page to show up blank!!
NOTE: the '...' gets included in the total length of the string
mb_strimwidth sample 1 - Truncate at end
$text = 'Some long text here!';
$trunc_text = mb_strimwidth($text, 0, 5);
print $trunc_text; //prints Some
$trunc_text = mb_strimwidth($text, 0, 5, '...');
print $trunc_text; //prints So...
mb_strimwidth sample 2 - Truncate at beginning
$text = 'Some long text here!';
$text_length = strlen($text);
$trunc_text = mb_strimwidth($text, 5, $text_length);
print $trunc_text; //prints long text here!
$trunc_text = '...'.mb_strimwidth($text, 5, $text_length);
print $trunc_text; //prints ...long text here!
mb_strimwidth sample 3 - Truncate at beginning and end
$text = 'Some long text here!';
$trunc_text = mb_strimwidth($text, 2, 8);
print $trunc_text; //prints me long
$trunc_text = '...'.mb_strimwidth($text, 2, 8, '...');
print $trunc_text; //prints ...me lo...


I hope you found this post helpful. Play with the functions and share your own cool ways to use them!!

Please comment, share and follow!

See you next post ;)

Wednesday, October 16, 2013

jQuery One-Liners: Part 1

I just ran into a problem today, and needed to solve it using only one line of code. I figured others of you out there have been, will be, or are currently in the same boat as I just was a matter of minutes ago. So, I'm going to share the results of my labor.

The Problem:
I needed to get all of the items on a page with a matching selector and create a pipe delimited string containing data from each of the matched elements.

EXAMPLE
<!-- SAMPLE ELEMENTS -->
<div id="someData0">DATA 0</div>
<div id="someData1">DATA 1</div>
<div id="someData2">DATA 2</div>
<div id="someData3">DATA 3</div>

<!-- DESIRED STRING -->
DATA 0|DATA 1|DATA 2|DATA 3

METHODS USED:

  1. $('selector') - jQuery selector method... read more
  2. .map() - jQuery array mapping method... read more
  3. .join() - standard js join method... read more

The Solution:
Now using the above mentioned methods we can easily achieve the desired result in one line!

JS
var merged_text = $('div[id^="someData"]').map(function(){return $(this).text();}).join('|');

I hope you found this short post helpful. You can definitely look forward to some more cool one-liners soon!

Wednesday, September 4, 2013

Twitter Bootstrap 2.3.2 - Glyphicons Extended Color Set

If you're like me, you've probably said to yourself..."Man, I'm bored of either black or white glyphicons!", as well you should be.

Isn't it time to add some new colors to your life?? YES!

Now, lets get to the fun stuff...

Step 1

Download the glyphicons-extended.zip file

Step 2

Unzip the glyphicons-extended.zip file to your web root

Step 3

Add the following line to your header...

HTML



and...VOILA! You're ready to start using your new icon colors!! All you need to do is use class names similar to "icon-white"

Available Color Classes
  • icon-red
  • icon-purple
  • icon-blue
  • icon-lightblue
  • icon-green
  • icon-yellow
  • icon-orange

EXAMPLE





















For more information on glyphicons in bootstrap check out their documentation.

Please leave your questions and comments below!

Tuesday, September 3, 2013

Multi-Column Dropdown Menu using Twitter Bootstrap

The other day I came across a problem that required a somewhat custom solution. I had begun using the dropdown menus in Twitter Bootstrap and had some dropdowns that became quite lengthy. They were so long, in fact, some of them stretched right off the viewport without wrapping.

So, I came up with a quick solution to create a multi column bootstrap dropdown, with minimal overrides, that keeps the same look and feel as the other dropdown menus. Without anymore fluff, here is my implementation...


HTML
<ul class="nav">
  <li class="dropdown">
    <a href="#">Dropdown Heading</a>
    <div class="dropdown-menu multi-column">
      <div class="container-fluid">
        <div class="row-fluid">
          <div class="span6">
            <ul class="dropdown-menu">
              <li><a href="#">Col 1 - Opt 1</a></li>
              <li><a href="#">Col 1 - Opt 2</a></li>
            </ul>
          </div>
          <div class="span6">
            <ul class="dropdown-menu">
              <li><a href="#">Col 2 - Opt 1</a></li>
              <li><a href="#">Col 2 - Opt 2</a></li>
            lt;/ul>
          </div>
        </div>
      </div>
    </div>
  </li>
</ul>


CSS
.dropdown-menu.multi-column {
    width: 400px;
}

.dropdown-menu.multi-column .dropdown-menu {
    display: block !important;
    position: static !important;
    margin: 0 !important;
    border: none !important;
    box-shadow: none !important;
}


I've currently only used this with a standard nav in Bootstrap 2.3.2, as seen on Socialbliss

It should work in a dropdown or dropdown-submenu.

I hope this short article was helpful. Please post any questions or comments below!

Thursday, August 1, 2013

How to setup Sphinx to use multiple instances of searchd for different vhosts on one server (centOS)

If you've spent any sort of time working with start ups, chances are you've had to cram a few sites on to one VPS or Dedicated Server. This is always my preferred method over buying a dedicated box before I know if the boat's gonna float. The practice of running multiple vhosts on one box via one ip is what brought me up against this fun problem today and I'd like to share my solution with you...

The question... How do I get sphinx to store separate sets of indexes for each of my vhosts and serve them all in the right places?

A bit more about my architecture:

  1. RackSpace Cloud - 2GB Ram, 40GB HD, Dual Core 2000mHz CPU
  2. LAMPhp Stack on centOS 6.4
  3. MySQL Server on the same box
  4. Sphinx Server on the same box
  5. (n) vHosts - Solution easily scales to your n(th) vhost
SOLUTION:

Apache Configuration: Right now I'm going to assume you already know how to setup multiple vhosts in apache. If I get requests for help with this I'll happily write another post going into the topic.

MySQL Setup: I'm going to assume you already have mysql installed and have at least one db created that sphinx will be pointing to.

Sphinx Configuration: Here's where we need to get a little custom and make sure to keep our system very organized.
  1. The directory structure
    1. .conf files
      1. /etc/sphinx/myfirstsite.com/sphinx.conf
      2. /etc/sphinx/mysecondsite.com/sphinx.conf
      3. etc...
    2. data files -
      1. /var/lib/sphinx/myfirstsite.com/{data files will go in here}
      2. /var/lib/sphinx/mysecondsite.com/{data files will go in here}
      3. etc...
    3. binlog files -
      1. /var/data/sphinx/myfirstsite.com/{binlog files will go in here}
      2. /var/data/sphinx/mysecondsite.com/{binlog files will go in here}
      3. etc...
    4. log files -
      1. /var/log/sphinx/myfirstsite.com/{log files will go in here}
      2. /var/log/sphinx/mysecondsite.com/{log files will go in here}
      3. etc...
  2. The Conf File - I'm just going to go over the variables you need to change for a multi-searchd setup to work:
    1. index {} -
      1. Set path = data files path
    2. searchd{} -
      1. Listen (Must be different ports for each instance)
        1. listen = 9312, listen = 9306:mysql41
        2. listen = 9313, listen = 9307:mysql41
        3. etc...
      2. Set log = log files path/searchd.log
      3. Set query_log = log files path/query.log
      4. Set pid_file = log files path/searchd.pid
      5. Set binlog = binlog files path
  3. Indexing your data - Now that you have your .conf files for each instance you need to build your first set of indexes as follows
    1. indexer -c /etc/sphinx/myfirstsite.com/sphinx.conf --rotate --all
    2. searchd -c /etc/sphinx/myfirstsite.com/sphinx.conf
At this point if you've done everything correctly you should see something like this:
Sphinx 2.0.7-release (r3759)
Copyright (c) 2001-2012, Andrew Aksyonoff
Copyright (c) 2008-2012, Sphinx Technologies Inc (http://sphinxsearch.com)

using config file '/etc/sphinx/myfirstsite.com/sphinx.conf'...
listening on all interfaces, port=9312
listening on all interfaces, port=9306
precaching index 'idx_my_index'
precaching index 'idx_my_index_delta'                          
precached 2 indexes in 0.016 sec

Now that Sphinx is hopefully listening on your desired ports, you just need to point your desired api to the correct port and you're ready to go. I'm currently doing this with php, so I'll show you the php example of changing the port:


PHP
$s = new SphinxClient;
$s->SetServer("127.0.0.1", 9312);
//etc.. the rest of your search code below


If you have any comments, concerns, etc... please leave them below.
I hope you all enjoyed my first post on this blog. I sure enjoyed writing it.

Until next time :)