Sonny T.

I am a New York City based web developer. Currently a Front End Developer at RockThePost. I'm also a designer, developer and the wizzard at ThemeWizz.

PHP Color Conversion Functions

Jul. 18, 2014

If you want to convert HEX decimal color to RGB here is a little handy function.

<?php
function hexToRgb ( $hex )
{
	$hex = str_replace( '#', '', $hex );

	if ( strlen( $hex ) == 3 ) {
		$r = hexdec( substr( $hex, 0, 1 ).substr( $hex, 0, 1 ) );
		$g = hexdec( substr( $hex, 1, 1 ).substr( $hex, 1, 1 ) );
		$b = hexdec( substr( $hex, 2, 1 ).substr( $hex, 2, 1 ) );
	} else {
		$r = hexdec( substr( $hex, 0, 2 ) );
		$g = hexdec( substr( $hex, 2, 2 ) );
		$b = hexdec( substr( $hex, 4, 2 ) );
	}

	$rgb = array( $r, $g, $b );

	return implode( ',', $rgb );
}
?>

If you want to convert RGB to HEX, use this one.

<?php
function rgbToHex ( $rgb ) {
   $hex = '';

   $hex .= str_pad( dechex( $rgb[0] ), 2, '0', STR_PAD_LEFT );
   $hex .= str_pad( dechex( $rgb[1] ), 2, '0', STR_PAD_LEFT );
   $hex .= str_pad( dechex( $rgb[2] ), 2, '0', STR_PAD_LEFT );

   return '#' . $hex;
}
?>

Happy Coding!

jQuery Touch Event Binding

Jul. 15, 2014

While I was working on the jQuery prettySocial. One of the biggest hurdles I encountered was dynamically binding touch events to the DOM element. The problem was not actually the binding, but the fact that event was being called when user scrolling the page with their finger. There is an in depth article about this by Brian G.

My solution to this was to capture the scroll event. Here is the snippet.

    $('.link')
    .bind('touchstart', function (e) {
        if(e.originalEvent.touches.length > 1) {
            return;
        }

        $(this).data('touchWithoutScroll', true);
    })
    .bind('touchmove', function () {
        $(this).data('touchWithoutScroll', false);

        return;
    })
    .bind('touchend', function (e) {
        e.preventDefault();

        var touchWithoutScroll = $(this).data('touchWithoutScroll');

        if (e.originalEvent.touches.length > 1 || !touchWithoutScroll) {
            return;
        }

        // trigger your event
    });

I hope this helps.

jQuery prettySocial - custom social share buttons

Jul. 05, 2014
jQuery prettySocial - custom social share buttons

If you’re like me and dislike default social share buttons I wrote a little jQuery plugin that allows you to define your own custom buttons. Check it out on github, documentation is there. I use this plugin on all my themeforest themes, you also check out the demo page to see it in use.

Proper Truncating

Mar. 25, 2014

Here is a useful PHP function that truncates a block of text without breaking a word. This is useful when creating an excerpt text and making sure that words are not cut off.

<?php
    function truncate($text, $limit = 150, $elips = '...')
    {
        $text = html_entity_decode($text, ENT_COMPAT | ENT_HTML401, 'UTF-8');

        $len = strlen($text);

        if ($len > $limit) {
            preg_match('/(.{' . $limit . '}.*?)\b/', $text, $matches);

            $text = rtrim($matches[1]) . $elips;
        }

        return htmlentities($text, ENT_COMPAT | ENT_HTML401, 'UTF-8');
    }
?>

When calling the function, you can pass a word limit, the default is 150. Also, function accepts custom ellipses, default is ....

Introducing ThemeWizz

Mar. 19, 2014

I am proud to announce that starting today, all my themes will be moved over to their own property. Recently I’ve decided to rebrand all my Envato products and give them their own home. After few frustrating weeks of figuring out a name, I concluded on ThemeWizz.

I will continue actively supporting and further develop all of my themes, just under a new name; ThemeWizz. I believe this decision will give me the freedom to collaborate with other designers as well as an opportunity to shamelessly market all my products without polluting my own name.

Another great benefit of rebranding is the ability to contract/hire people to produce beautiful themes and plugins. Which will give me more time to focus on creating more open source projects like, downCount.js and Tweetie.js.

So please follow ThemeWizz on twitter and let me know what you think of the site design, themewizz.com.

The WP Compass

Feb. 12, 2014
The WP Compass

The WP Compass is a beautiful responsive single page Wordpress theme. This elaborate theme gives your blog, portfolio, vCard or resume a unique and fresh look. The theme is very easy to customize; it was built and documented with a novice in mind. The WP Compass comes with 3 beautiful color sets, 2 different options for animation effects, and full screen slideshow. The Wordpress theme is also equipped with Font Awesome icons and Google Fonts.

The WP Compass is fully SEO friendly, despite the fact that the pages are loaded via Ajax.

Features

  • CSS3 Animations - The Compass includes two beautiful Trigger animation effects, scaling and circular.

  • Cross Browser Support - Consistent with the latest browsers; such as, Chrome, Safari, FireFox, Opera and IE8+

  • Multiple Color Sets - Comes in three different color schemes: cool, dark and flat. Each color scheme includes its own LESS file that allows you to easily modify it to fit your needs.

  • Responsive Design - Crafted to provide easy reading and navigation with minimal resizing, panning, and scrolling across a wide range of devices.

Check it out at ThemeWizz

WP PROCount

Feb. 08, 2014
WP PROCount

WP PROCount is a simple, clean and fully responsive mobile friendly landing page Wordpress plugin.

The WP PROCount is very minimalistic and lightweight. It contains a customizable Countdown Clock and MailChimp plugin. This plugin also comes with a LESS Stylesheet file that you can use to customize the page however you would like.

Features

  • Runs along side your theme - All users that are not logged is as administrator will see the coming soon template. This allows the administrators to work on the theme while still having a live WP PROCount page displayed for everyone else.

  • Countdown Clock - Animated LIVE Countdown that serves to count down in seconds, minutes, hours and days to any specific date.

  • MailChimp Integration - Seamlessly integrated with MailChimp, allowing you to pool email addresses within seconds.

  • Responsive Design - Crafted to provide easy reading and navigation with minimal resizing, panning, and scrolling across a wide range of devices.

  • LESS Stylesheet - LESS extends CSS with dynamic behavior such as variables, mixins, operations and functions.

Check it out at ThemeWizz

jQuery downCount - TimeZone Sensitive Countdown Plugin

Sep. 20, 2013
jQuery downCount - TimeZone Sensitive Countdown Plugin

jQuery countdown plugin that accounts for timezone. Plugin requires you to set your UTC offset. You can find your UTC offset here. Currently the offset is set to NYC -4 UTC.

Features

  • Timezone sensative
  • Callback function

Usage

Initlize just like any other plugin.

$('.countdown').downCount({
    date: '08/27/2013 12:00:00',
    offset: -5
}, function () {
    alert('WOOT WOOT, done!');
});

Read more on GitHub…

Wordpress WP_Query custom post order

Aug. 09, 2013

Recently, I had to build a Wordpress Admin widget area which enables a user to select, change order and save a list of posts. Selected post IDs are stored in an array() which can be found in the options table. It looks something like this:

<?php
    $post_list = array( 123, 456, 321 );
?>

So when it comes to rending the posts in the array, I just create a new WP_Query(), like so:

<?php
    $post_list = array( 123, 456, 321 );
    
    $args = array( 'post__in' => $post_list );
    
    $my_query = new WP_Query( $args );
?>

Wordpress automatically queries posts in a reverse chronological order (newest post first), or if set - by orderby value. However, what if I need to keep the queried posts in specific order listed in my $post_list array? This sort of condtion cannot be passed into WP_Query() as an argument, but it can be done after query is completed. After some messing around by creating loops and filtering the object, the best solution was to use the usort() PHP function.

<?php
    $post_list = array( 123, 456, 321 );

    $args = array( 'post__in' => $post_list );

    $my_query = new WP_Query( $args );

    usort( $my_query->posts, function ( $a, $b ) use ( $post_list )
    {
        $apos   = array_search( $a->ID, $post_list );
        $bpos   = array_search( $b->ID, $post_list );

        return ( $apos < $bpos ) ? -1 : 1;
    });
?>

And that’s it.

The Compass

Jul. 23, 2013
The Compass

The Compass is a beautiful responsive single page theme. This elaborate theme gives your portfolio, vCard or resume a unique and fresh look. The theme is very easy to personalize; it was built and documented with a novice in mind. The Compass comes with 3 beautiful color sets, 2 different options for animation effects, and full screen slideshow. The theme is also equipped with LESS files, Font Awesome icons and Google Fonts.

Features

  • CSS3 Animations - The Compass includes two beautiful Trigger animation effects, scaling and circular.

  • Cross Browser Support - Consistent with the latest browsers; such as, Chrome, Safari, FireFox, Opera and IE8+

  • LESS Stylesheet - LESS extends CSS with dynamic behavior such as variables, mixins, operations and functions.

  • Multiple Color Sets - Comes in three different color schemes: cool, dark and flat. Each color scheme includes its own LESS file that allows you to easily modify it to fit your needs.

  • Responsive Design - Crafted to provide easy reading and navigation with minimal resizing, panning, and scrolling across a wide range of devices.

Check it out at ThemeWizz

JavaScript Check If Element Has Class

Jun. 11, 2013

Here is a little snippet If you’re trying to check wether element contains a class, without using jQuery.

function hasClass(element, className) {
    return element.className && new RegExp("(^|\\s)" + className + "(\\s|$)").test(element.className);
}

This accounts for the fact that element might contain multiple class names separated by space.

You can also assign this function to element prototype.

Element.prototype.hasClass = function(className) {
    return this.className && new RegExp("(^|\\s)" + className + "(\\s|$)").test(this.className);
};

And trigger it like this (very similar to jQuery’s .hasClass() function):

document.getElementById('MyDiv').hasClass('active');

jQuery Tweetie - Simple Twitter Feed Plugin

Jun. 07, 2013
jQuery Tweetie - Simple Twitter Feed Plugin

jQuery Tweetie - Simple Twitter Feed Plugin.

Features

  • Easly template tweets using mustache-like syntax
  • Format tweet timestamp using Linux/Unix %d/%m/%Y time formatting syntax
  • Set tweet count
  • Hide replies and only show your own tweets

Usage

New Twitter API requires oAuth Token Key, so it’s three step process.

Step 1

First, you need a consumer key and secret keys. Get one from dev.twitter.com/apps.

Step 2

Edit api/config.php file and replace variables with your Consumer and oAuth Keys.

<?php
    // Consumer Key
    define('CONSUMER_KEY', 'CONSUMER_KEY_HERE');
    define('CONSUMER_SECRET', 'CONSUMER_SECRET_HERE');

    // User Access Token
    define('ACCESS_TOKEN', 'ACCESS_TOKEN_HERE');
    define('ACCESS_SECRET', 'ACCESS_SECRET_HERE');
?>

Step 3

Initlize just like any other plugin.

    $('.tweet').twittie();

Read more on GitHub…

PROCount

May. 21, 2013
PROCount

PROCount theme is very minimalistic and lightweight. It includes a customizable Countdown Clock and MailChimp plugins. The theme also comes with a LESS Stylesheet file that you can use to customize the page however you would like.

Features

  • Countdown Clock - Animated LIVE Countdown that serves to count down in seconds, minutes, hours and days to any specific date.

  • MailChimp Integration - Seamlessly integrated with MailChimp, allowing you to pool email addresses within seconds.

  • Responsive Design - Crafted to provide easy reading and navigation with minimal resizing, panning, and scrolling across a wide range of devices.

  • LESS Stylesheet - LESS extends CSS with dynamic behavior such as variables, mixins, operations and functions.

Check it out at ThemeWizz

Fresh Start

May. 10, 2013

Finally, I got over my bad habit of procrastinating and updated my site. It’s been forever since I touched it; mainly because I’ve been super busy working on different projects.

This new joint, is built using Jekyll and hosted using GitHub Pages. So no more transferring files using FTP client. Source code is available to the public, so feel free to fork or contribute. If you decide to fork it, code is very easy to customize and mostly everything is declared in _config.yml. Things such as, title, description and social media username slugs.

To ease the process of creating a new post, I used Rake to handle this task. Rake file is very specific and probably won’t be suitable for all. So I suggest either modifying it or completely ignoring it. Rake also requires few gems to execute successfully without any errors. So make sure you run gem install to assure that everything is in it’s place.

On the front end of things, I used jQuery to fetch my numbers from GitHub and Themeforest. Also, I use SASS syntax in addition to Compass to create the Stylesheet. For convince source code includes config.rb file, which can be imported into Codekit or any other Compass compatible stylesheet compiler and it will automatically set all the properties.

Countie

May. 09, 2013
Countie

Countie is a very minimalistic and lightweight theme; it only loads 2 images (that’s not counting the demo sample content). Theme contains a customizable Countdown Clock, Twitter Feed and MailChimp plugins. Countie also comes with a LESS Stylesheet file that you can use to customize the page however you would like.

Features

  • Twitter Feed - Encourage visitors to follow and interact with you by streaming your own tweets, or query tweets using Twitter’s Search Operators.

  • Responsive Design - Crafted to provide easy reading and navigation with minimal resizing, panning, and scrolling across a wide range of devices.

  • Countdown Clock - Animated LIVE Countdown that serves to count down in seconds, minutes, hours and days to any specific date.

  • LESS Stylesheet - LESS extends CSS with dynamic behavior such as variables, mixins, operations and functions.

  • MailChimp Integration - Seamlessly integrated with MailChimp, allowing you to pool email addresses within seconds.

  • Cross Browser Support - Consistent with the latest browsers; such as, Chrome, Safari, FireFox, Opera and IE7+

Check it out at ThemeWizz

MOONlander

May. 08, 2013
MOONlander

MOONlander is a lightweight and simple theme; it only loads 2 images (that’s not counting the demo sample content). Theme contains a customizable Countdown Clock, Twitter Feed and Mailchimp plugins. MOONlander also comes with a LESS Stylesheet file that you can use to customize the page however you would like.

Features

  • Twitter Feed - Encourage visitors to follow and interact with you by streaming your own tweets, or query tweets using Twitter’s Search Operators.

  • Responsive Design - Crafted to provide easy reading and navigation with minimal resizing, panning, and scrolling across a wide range of devices.

  • Countdown Clock - Animated LIVE Countdown that serves to count down in seconds, minutes, hours and days to any specific date.

  • LESS Stylesheet - LESS extends CSS with dynamic behavior such as variables, mixins, operations and functions.

  • MailChimp Integration - Seamlessly integrated with MailChimp, allowing you to pool email addresses within seconds.

  • Cross Browser Support - Consistent with the latest browsers; such as, Chrome, Safari, FireFox, Opera and IE7+

Check it out at ThemeWizz

Just a blog.