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!