Sonny T.

I am a New York City based web developer. Currently a Web Engineer at Onevest, founder of OneClick Lab and creator of Ugly Email. I'm also a designer, developer and the wizzard at ThemeWizz.

Angular.js Number Range

Jul. 31, 2015

Recently, while working on one of the projects at Onevest. I needed a dropdown list of years between 2015 and 1980. Instead of tryping each year out, I decided to create a tiny angular filter that iterates between two numbers.

I extracted the _.range() function from Underscore.js to make things easier.

var myApp = angular.module('myApp', []);

myApp.filter('range', function() {
    return function(input, start, stop, step) {
        var length, i;

        if (!stop) {
            stop = start || 0;
            start = 0;
        }

        step = step || 1;

        length = Math.max(Math.ceil((stop - start) / step), 0);
        i = 0;

        for (; i < length; i++, start += step) {
            input.push(start);
        }

        return input;
    };
});

It requires an initial array that you want to populate, start number, end number (stop) and a step.

start, if omitted, defaults to 0; step defaults to 1. Returns a list of integers from start (inclusive) to stop (exclusive), incremented (or decremented) by step, exclusive. Note that ranges that stop before they start are considered to be zero-length instead of negative — if you’d like a negative range, use a negative step.

It’s very simple to use:

<select ng-model="year" ng-options="y as y for y in [] | range:2015:1980:-1"></select>

Introducing Ugly Email

Nov. 24, 2014

Did you know that you know that the emails you receive most likely are being tracked? The sender can see if you opened the email, and where and what device you used it to view the email.

That might sound like something out of the movies or something you hear on the news about NSA. However, emails can be easily tracked using third party Gmail extensions like Streak, BananaTag and Yesware. To avoid being tracked, I recently decided to develop a Gmail Extension called Ugly Email. This tiny extension checks if the emails in my inbox contains a tracking pixel and adds an indicator.

Ugly Email is available via Google Chrome Store and uglyemail.com for free.

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

Just a blog.