Wern Ancheta

Adventures in Web Development.

Why I Love Web Development

| Comments

It’s not very often that I reflect on why I love things. Why I Love Web Development is not a question I often ask myself. In this essay I’ll attempt to explore the why. I first started learning about Web Development when I was in College. Back then it was just another subject that I had to learn in order to finish my course. I never really thought that it would be the thing that puts money in my pocket 5 years later. I became a Web Developer. It’s very easy to get into Web Development. All you need is a computer, a text-editor and a browser. Just create an HTML file, put some styling into it, and then sprinkle some JavaScript to make things more interactive and you have a full-fledge web page. Of course you’ll need to install other things such as Apache, MySQL and PHP if you’re working on the back-end. But initially, Web Development is very accessible for beginners. With websites such as Code School, Pluralsight and Codeacademy it became even easier to get into https://www.codecademy.com/. Perhaps that’s the first thing that made me fall in love with Web Development. It’s easy to get into it. There’s also a plethora of information about it. Q&A websites such as Stackoverflow makes it really easy to solve problems in case you get stuck with something. All you really need to know is to know what to Google.

Web Development isn’t without its difficulties. If you’re a Web Developer you have to learn so many things. You have to consider a lot of things when it comes to your users. You need to be empathetic to their needs. That’s probably the reason why there are Web Designers, Front-end Developers, Back-end Developers, Devops and UX Designers. One person can’t really do it all. I’m not really one to talk because I’ve only been practicing Web Development as a Full-stack Developer. Which means that I take care of everything. Or not. I have to admit that I lack the qualities of a Web Designer. And when it comes to UX, I have a lot to learn. I primarily consider myself a Back-end Developer because that’s where my core skills are. But this doesn’t mean that I have to ignore learning things about design and how to make things more accessible. This doesn’t mean that I don’t need to make an effort no matter how little. Such as putting the alt attribute on images or sprinkling some aria-role attributes in my HTML code. Aside from that, you also need to think about performance. Not all users have a blazing fast internet connection with 10 GB/s download speed. But it doesn’t end there. As a developer you also need to think of the maintainability of your code. You need to think of the next person who’s going to end up maintaining your code. As a developer you have to make an effort on carefully naming things and structuring your code in such a way that things can easily be found. Your code should also be DRY. Which means that there should only be a single source of truth in your code. And avoid repeating things as much as possible. You need to think about the future. The dependencies you pull into your code. It’s always wise to pull in a third-party library to easily accomplish things that would be hard for you to implement on your own. But you also need to make sure that your code doesn’t break if this library gets updated.

The idea of creating something that didn’t previously exist. The joy of building something and seeing it come to life is what makes Web Development really awesome. You get to play around with shiny, new and cool stuff all the time. You get to learn something new every day. You get to work on side-projects and push it to Github and have other people use your work. That to me is fantastic.

The ability to see the world in a Programmer’s eyes. You begin to wonder how things are built. What technologies are behind it? How are things implemented?

The dread that you feel whenever a new JavaScript library comes out. And the fear that the shiny new thing that you’ve learned is replaced by that JavaScript library that came out.

The never-ending queue of articles that you think you have to read in order to keep yourself up to date.

The idea that you can reach a lot of people by just creating a single website. The idea that you can provide valuable information and make their life easier by using the thing that you created. The ability to empower people from a thousand miles a way and they don’t even know you. That to me is priceless.

Generating Fake Data in PHP With Faker

| Comments

In the good old days, I often test PHP applications by accessing it directly from the browser and input the data in the forms. Today, with the explosion of awesome PHP libraries you can now generate most kinds of data by using code alone. The data can then be directly inserted into the database. This reduces the need to input data directly into the app. In this tutorial, I’ll be walking you through Faker, a PHP library that generates fake data for you.

Installation

You can install Faker by executing the following command. Note that this requires you to have Composer installed.

1
composer require fzaninotto/faker

Concepts

Here are a few concepts that you need to remember before moving on.

  • generators – responsible for generating data.
  • providers – the data source for generators. Generators can’t really stand by themselves. Providers really shine on the localization feature of Faker. Real places, phone numbers in countries can be generated by Faker through the use of providers.
  • formatters – these are the properties that you can access from a specific generator. Examples include name, city, address, and phoneNumber.

Usage

To use Faker from your file, you need to include the vendor autoload file and create a new Faker instance.

1
2
3
4
5
<?php
require_once 'vendor/autoload.php';

$faker = Faker\Factory::create();
?>

Localization

Since Faker is an open-source project that anyone can contribute to, lots of localized providers has already been added. You can take advantage of this by passing in the locale when you create a new Faker instance. For example, if you live in the Philippines:

1
2
3
<?php
$faker = Faker\Factory::create('en_PH');
?>

You can then generate an address in the Philippines by using the address formatter. Note that it’s only down to the city level. This means that the street and barangay are using the default providers.

1
2
3
<?php
echo $faker->address;
?>

Note that each provider doesn’t have generators for every possible formatter. For example, the Philippine provider has only generators for the Address and PhoneNumber. This means that you can only have localized values for those. All the other formatters will utilize the default ones provided by Faker. For a list of providers, check out this page in their Github repo.

Formatters

Here are the formatters that I commonly use in my projects.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<?php
//person
$faker->name;
$faker->firstName('male');
$faker->lastName;

//address
$faker->address;
$faker->streetName;
$faker->streetAddress;
$faker->postCode;
$faker->address;
$faker->country;

//company
$faker->company;

//date and time
$faker->year;
$faker->month; //number representation of a month
$faker->monthName;
$faker->timezone; //valid php timezone (http://php.net/manual/en/timezones.php)
$faker->time; //string time
$faker->dateTime; //datetime object
$faker->unixTime; //unix timestamp

//internet
$faker->email;
$faker->userName;
$faker->password;

//payment
$faker->creditCardType;
$faker->creditCardNumber;

//images
$faker->imageUrl(50, 60); //where width=50 and height=60
?>

Creating New Providers

If you want to create a provider for your own project, you can easily extend Faker. For example, if you want to generate random pokemon names. The first thing that you need to do is to declare the namespace in which the class belongs. Next, declare a new class and have it extend the faker provider base class. Inside the class, create an array of Pokemon names. Create a new function and call it pokemon, this is the function that will be called later on to generate a random pokemon name. To pick a random item from the array you created, use the randomElement function and then pass in the array which you want to use as the data source.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<?php
namespace Faker\Provider;

class Pokemon extends \Faker\Provider\Base {

  protected static $pokemon = array(
    'Pikachu',
    'Bulbasaur',
    'Cubone',
    'Charizard',
    'Marowak',
    'Gastly',
    'Alakazam',
    'Arcanine',
    'Vaporeon',
    'Flareon',
    'Venusaur',
    'Wartortle'
  );

  public function pokemon(){
    return static::randomElement(static::$pokemon);
  }
}
?>

Save the file and name it Pokemon.php. You can save it any where in your project as long as you can easily reference it from your main file.

On your main file, include the vendor autoload together with the file that you’ve just created.

1
2
3
4
<?php
require_once 'vendor/autoload.php';
require_once 'Pokemon.php';
?>

Create a new faker generator. This is a bare bones generator with no providers assigned to it. So if you use $faker->name, all you get is an error.

1
2
3
<?php
$faker = new Faker\Generator();
?>

If you want to use the default providers, you can include them by calling the addProvider method and passing in a new instance of the provider that you want to include.

1
2
3
4
5
6
7
8
<?php
$faker->addProvider(new Faker\Provider\en_US\Person($faker));
$faker->addProvider(new Faker\Provider\en_US\Address($faker));
$faker->addProvider(new Faker\Provider\en_US\PhoneNumber($faker));
$faker->addProvider(new Faker\Provider\en_US\Company($faker));
$faker->addProvider(new Faker\Provider\Lorem($faker));
$faker->addProvider(new Faker\Provider\Internet($faker));
?>

To add the new Pokemon provider.

1
2
3
<?php
$faker->addProvider(new Faker\Provider\Pokemon($faker));
?>

Once that’s done, you can now call the new pokemon formatter.

1
2
3
<?php
$faker->pokemon; //marowak
?>

Integration with Your PHP Application

Most PHP frameworks today already comes with a database seeding feature. If you’re using Laravel, it has a database migration and seeding functionality. You can simply install Faker into your project, generate a new seeder and then use Faker inside the seeder. This allows you to seed your database with Fake data in a single command by using Artisan CLI. If your framework doesn’t include a seeding feature, you can use Phinx, a database-migration tool for PHP. This tool also allows you to create seeders for your database.

Conclusion

That’s it! In this tutorial, you’ve learned how to work with the Faker library to generate fake and random data for testing your PHP applications. Check out the official github page for more information regarding its usage.

Making HTTP Requests With Guzzle

| Comments

Most PHP applications today includes the ability to integrate with different web services such as Facebook, Twitter, Google, and other API’s. Thus the need for a library to ease the process of making HTTP requests to other servers. Most API’s already comes with their own clients for selected programming languages. These clients makes the interaction with their API’s easier. But oher services doesn’t offere any clients at all. This is where Guzzle comes in, a PHP library that allows you to easily make HTTP requests. In this tutorial, I’ll be walking you through this library.

Installation

You can install Guzzle through Composer by executing the following command.

1
composer require guzzlehttp/guzzle:~6.0

Usage

You can start using Guzzle by including the vendor autoload file then use the Client class in the GuzzleHttp namespace.

1
2
3
4
5
<?php
require_once 'vendor/autoload.php';

use GuzzleHttp\Client;
?>

From there, you can create a new client. This accepts an array of arguments. The most important one is the base_uri, which is the base URL that will be used for each of the requests that you will make with this client. In the example below, the base URI is that of the Pokemon API, an API which allows you to get any data about Pokemon.

1
2
3
<?php
$client = new Client(['base_uri' => 'http://pokeapi.co/api/v1/']);
?>

To make an actual request to an endpoint, you can use the get method to make a GET HTTP request. To extract the response body, you have to call the getBody method in the response that was returned. Most API’s today returns a JSON string as their response. The Pokemon API is no exception. So you need to use the json_decode method and pass in the data. You can pass in true as the second argument to convert it to an array.

1
2
3
4
5
6
7
8
<?php
$response = $client->get('pokedex/1');
$data = $response->getBody();
$data = json_decode($data, true);
?>
<pre>
<?php print_r($data); ?>
</pre>

Here’s the output that you get when accessing the file from the browser. From this data, we know that the pokedex/1 endpoint returns all the pokemon that are currently existing.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
Array
(
    [created] => 2013-11-09T15:14:48.957604
    [modified] => 2013-11-09T15:14:48.957565
    [name] => national
    [pokemon] => Array
        (
            [0] => Array
                (
                    [name] => rattata
                    [resource_uri] => api/v1/pokemon/19/
                )

            [1] => Array
                (
                    [name] => charmander
                    [resource_uri] => api/v1/pokemon/4/
                )

            [2] => Array
                (
                    [name] => charmeleon
                    [resource_uri] => api/v1/pokemon/5/
                )

            [3] => Array
                (
                    [name] => wartortle
                    [resource_uri] => api/v1/pokemon/8/
                )

            [4] => Array
                (
                    [name] => blastoise
                    [resource_uri] => api/v1/pokemon/9/
                )

            [5] => Array
                (
                    [name] => caterpie
                    [resource_uri] => api/v1/pokemon/10/
                )

            [6] => Array
                (
                    [name] => metapod
                    [resource_uri] => api/v1/pokemon/11/
                )

            [7] => Array
                (
                    [name] => butterfree
                    [resource_uri] => api/v1/pokemon/12/
                )

            [8] => Array
                (
                    [name] => spearow
                    [resource_uri] => api/v1/pokemon/21/
                )

            [9] => Array
                (
                    [name] => kakuna
                    [resource_uri] => api/v1/pokemon/14/
                )

            [10] => Array
                (
                    [name] => beedrill
                    [resource_uri] => api/v1/pokemon/15/
                )
...

Note that it’s not only get method that you can do with Guzzle. Each HTTP methods have their equivalent method in Guzzle. So post, put and delete are all valid method names.

Before moving on, here’s another example.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<?php
$response = $client->get('pokemon/150');
$data = $response->getBody();
$data = json_decode($data, true);

$moves = array_filter($data['moves'], function($move){
    return $move['learn_type'] == 'level up';
});

$description_response = $client->get(str_replace('/api/v1/', '', $data['descriptions'][0]['resource_uri']));
$description_data = $description_response->getBody();
$description_data = json_decode($description_data, true);
?>
<div>
    <img src="<?= 'http://pokeapi.co/media/img/' . $data['pkdx_id'] . '.png' ?>" alt="<?= $data['name'] ?>">
    <h4><?= $data['name'] ?></h4>
    <p>
        <?= $description_data['description']; ?>
    </p>
    <div>
        <strong>Moves</strong>
        <ul>            
        <?php
        foreach($moves as $move){
        ?>
        <li>
            <?= $move['name']; ?>
        </li>
        <?php
        }
        ?>
        </ul>
    </div>
</div>

In the code above, 2 GET request were used to get all the data that is needed for the final output. First, the pokemon endpoint is used to get the details of a specific pokemon. Second is the request for getting the description of the pokemon. In order to extract the moves, the array_filter function is used. The condition is to select only moves that have been learned through level up. In order to get the endpoint for getting the description, the str_replace function is used to replace a part of the base uri in the resource uri that was returned. Since the resource uri already has the /api/v1/ in the beginning. Guzzle would end up making a request to the following URL if that string isn’t replace with an empty one.

1
http://pokeapi.co/api/v1//api/v1/description/150

The output is going to look like this.

mewtwo

Finally let’s take a look at how to do a POST request with Guzzle. For that let’s try to submit a post to Facebook using Facebook API. To do that, declare a new client using the https://graph.facebook.com/ as the base_uri. Posting to facebook requires the access_token, message and an optional link. Call the post method and pass in me/feed as the first argument. This is the endpoint for posting to facebook. The second argumment is an array containing the data that you want to submit. In Guzzle, the data should be contained within the query item. You can then call getBody on the response to get the response body. This should return the ID of the post that was created.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<?php
$client = new Client(['base_uri' => 'https://graph.facebook.com/']);

$post_data = array(
    'access_token' => 'YOUR-FACEBOOK-ACCESS-TOKEN',
    'message' => 'testing',
    'link' => 'http://wern-ancheta.com/'
);


$res = $client->post('me/feed', array(
    'query' => $post_data
));

$response_body = $res->getBody();
$response_body = json_decode($response_body, true);
?>

Conclusion

That’s it! In This tutorial, you’ve learned how to make HTTP requests with the Guzzle library. There’s so much more you can do with Guzzle, so be sure to check out their official docs if you want to learn more.

Stalking the Programmer Way With Clearbit’s Person API

| Comments

In this tutorial, I’ll be showing you can programatically find out information about any person using their email. You can do that by using the Clearbit Person API.

In order to use the Person API, you first have to create your Clearbit account. After creating your account, you’ll be assigned with an API key which you can use for making requests to their API.

If you’re on Ruby, Node or Python you can search for the Clearbit client for each of those platforms from their Github page. Just search for ‘clearbit-’ followed by the platform. So if you’re on Ruby, then you search for ‘clearbit-ruby’. You can then install the client on your machine and follow the examples provided in the official documentation.

At the time of writing of this article, there’s still no client available for PHP. But you can use Guzzle to easily make requests to their API. You can install Guzzle via Composer by executing the following command.

1
composer require guzzlehttp/guzzle:~6.0

Once that’s done, you can include the vendor autoload file in your test file and then create a new instance of the Guzzle client. Use http://person.clearbit.com/v1/ as the base for all your requests.

1
2
3
4
5
<?php
require_once 'vendor/autoload.php';

$client = new GuzzleHttp\Client(array('base_uri' => 'http://person.clearbit.com/v1/'));
?>

To request the data of a specific person, you can pass their email after the people/email endpoint. Here’s an example.

1
2
3
4
5
6
7
8
9
<?php
$response = $client->get('people/email/ancheta.wern@gmail.com', array('auth' => array(
        'YOUR-CLEARBIT-API-KEY', ''
    )));
$res = json_decode($response->getBody(), true);
?>
<pre>
    <?php print_r($res); ?>
</pre>

Clearbit uses basic authentication. The API key acts as the username so the password should be left blank.

It would then return the following output.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
Array
(
[id] => c29c2e9f-d082-4525-8dd3-1291835bf834
[name] => Array
    (
        [fullName] => Wern Ancheta
        [givenName] => Wern
        [familyName] => Ancheta
    )

[email] => ancheta.wern@gmail.com
[gender] => 
[location] => Philippines
[geo] => Array
    (
        [city] => 
        [state] => 
        [country] => PH
        [lat] => 12.879721
        [lng] => 121.774017
    )

[bio] => JavaScripter, PHP Junkie, Anime Fanatic, Pokemon Master, Supernatural Enthusiast
[site] => http://wern-ancheta.com
[avatar] => https://d1ts43dypk8bqh.cloudfront.net/v1/avatars/c29c2e9f-d082-4525-8dd3-1291835bf834
[employment] => Array
    (
        [name] => 
        [title] => 
        [domain] => 
    )

[facebook] => Array
    (
        [handle] => vern.ancheta
    )

[github] => Array
    (
        [handle] => 
        [id] => 
        [avatar] => 
        [company] => 
        [blog] => 
        [followers] => 
        [following] => 
    )

[twitter] => Array
    (
        [handle] => Wern_Ancheta
        [id] => 283769265
        [bio] => JavaScripter, PHP Junkie, Anime Fanatic, Pokemon Master, Supernatural Enthusiast
        [followers] => 330
        [following] => 961
        [statuses] => 7402
        [favorites] => 356
        [location] => Philippines
        [site] => http://wern-ancheta.com
        [avatar] => https://pbs.twimg.com/profile_images/2585189311/7q7dmz2h78lv32f8tw78.jpeg
    )

[linkedin] => Array
    (
        [handle] => 
    )

[googleplus] => Array
    (
        [handle] => 
    )

[angellist] => Array
    (
        [handle] => 
        [id] => 
        [bio] => 
        [blog] => 
        [site] => 
        [followers] => 
        [avatar] => 
    )

[klout] => Array
    (
        [handle] => 
        [score] => 
    )

[foursquare] => Array
    (
        [handle] => 
    )

[aboutme] => Array
    (
        [handle] => 
        [bio] => 
        [avatar] => 
    )

[gravatar] => Array
    (
        [handle] => zenonn
        [urls] => Array
            (
                [0] => Array
                    (
                        [value] => http://kyokasuigetsu25.wordpress.com
                        [title] => Data Integrated Entity Blog
                    )

                [1] => Array
                    (
                        [value] => http://wernancheta.wordpress.com
                        [title] => Wern Ancheta Web Development Blog
                    )

                [2] => Array
                    (
                        [value] => http://wernancheta.carbonmade.com
                        [title] => Wern Ancheta Portfolio
                    )

            )

        [avatar] => http://2.gravatar.com/avatar/717bcde740783a83a168468df0dbbb75
        [avatars] => Array
            (
                [0] => Array
                    (
                        [url] => http://2.gravatar.com/avatar/717bcde740783a83a168468df0dbbb75
                        [type] => thumbnail
                    )

                [1] => Array
                    (
                        [url] => http://0.gravatar.com/userimage/29616243/2e8d74c1260a1c180328ea6317ebb8e0
                        [type] => 
                    )

            )

    )

[fuzzy] => 
)

As you can see, it’s not very complete. It has left out my Github, LinkedIn, GooglePlus and FourSquare profiles. It doesn’t have one for Instagram as well. Nevertheless, this API proves to be a good resource if you want to get data about a specific person.

If you want to update your own data, extract the ID that clearbit has assigned to your profile and then use it on your request. Here’s an example.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<?php
$client = new GuzzleHttp\Client(['base_uri' => 'http://person.clearbit.com/v1/']);
$response = $client->post('people/YOUR-CLEARBIT-ID/flag',
            array('auth' => array(
                'YOUR-CLEARBIT-API-KEY', ''
            ),
            'form_params' => array(
                'foursquare' => array('handle' => 'wern_ancheta'),
                'googleplus' => array('handle' => '+WernAncheta'),
                'github' => array(
                    'handle' => 'anchetaWern'
                ),
                'gender' => 'male',
                'linkedin' => array('handle' => 'wernr'),
                'gravatar' => array('handle' => 'vernancheta')
            )
        )
);
$res = json_decode($response->getBody(), true);
echo $response->getStatusCode(); //200
?>

Note that your data won’t be immediately update. This is good since the update must be reviewed by an actual human so that not just anyone can mess with your data.

A Whirlwind Tour of Web Developer Tools: Linting

| Comments

Yo! It’s been a while but I’ve decided to continue this series on A Whirlwind Tour of Web Developer Tools. For those who don’t know, I started this series a year ago but then I got so busy with work and I became an author at Sitepoint. So you can only count the number of in-depth tutorials with your fingers. But I quit my job and now I have a lot of free-time. That is why I no longer have any excuse not to continue what I started.

Ok enough with the life update. Now let’s move on to the main topic of this article. This is part eight of the series on Web Developer Tools where I’m going to walk you through linting. Linting is the process of running a program that will check the quality of code in order to avoid any potential errors. Take for example the following code:

1
2
3
4
5
6
function main(){
  if(x == y){
    return 'Hello, World!'
  }
  return 'Hello';
}

By looking at the code, you can immediately see that x and y hasn’t been defined. The semicolon is also missing from the first return statement. But if add this function to a JavaScript file, you will see that it doesn’t actually cause any errors until you add the code that will call the function. Only then will you realize that x and y hasn’t been defined. But JavaScript doesn’t actually complain if you miss a semicolon or two so the first return statement won’t probably cause any errors. This is because of the automatic semicolon insertion in JavaScript. I know the example that I gave is a bit contrived but you get the point. As developers we sometimes miss the obvious things such as defining a variable or putting a semicolon. That is why there are tools to help us avoid making these kinds of mistakes. Linters are one of those. In the world of web development there are a bunch of tools which can be classified as linters. I’m going to walk you through some of those in this tutorial.

Markup Validation Service

The markup validation service by the World Wide Web Consortium allows developers to check the validity of the HTML code that they’ve written. It uses the doctype defined at the very top of the document as a basis for which specific rules to use for checking the code. You can supply a URL, upload a file or directly input the HTML code that you want to check. Here’s an example:

w3c validator

As you can see from the screenshot, it gives you three types of feedback: info, warning and error. Info gives you general information about the page. Warnings are messages telling you that you can do better. Or something could be improved. In the example above it says that the document uses unicode private use areas. Which is basically another way of saying that undefined unicode characters shouldn’t be used in publicly available documents. Lastly there’s the error. These are messages that tells you to fix something because it might cause problems to the users of your website. In the example above, it’s saying that an alt attribute should always be defined, except in specific conditions. And then it points out to the SVG logo of the website which should probably have an alt assigned to it. This is important because some users might be partially disabled (color-blind, partially blind, etc.) might be using a screenreader to interact with your website. And the value that you have placed in the alt attribute is read out by the screenreader. If there’s nothing there then the user won’t be able to know what he’s currently focusing at.

HTMLHint

HTMLHint is a linter for HTML code. Unlike the markup validation service, this allows you to specify what specific validation rules are to be used to check your HTML code. For example you can specify that all tags should be in lowercase. Or that in every file, an ID can only be used once. Here’s an example:

htmlhint

HTMLHint gives you feedback on which specific line has problems in it. And if you hover over the line number, you will see what the specific error is. In the example above you can see that the errors are:

  • the id a_unique_id has been used twice. It doesn’t matter that the elements used are different as long as an ID is used more than once, it triggers the error on the lines in which the ID is used for the second time.
  • the div with the ID of a_unique_id hasn’t been closed. Note that this doesn’t get triggered on the line where the tag hasn’t been closed. Instead it gets triggered on the nearest closing tag which doesn’t have a pair.

At the bottom part of the website, you can check or uncheck rules depending on what you’d like to apply. There are are a number of rules you can choose from and the naming is pretty self-explanatory so I won’t be delving into that.

CSSLint

CSSLint as the name suggests, is a linter for CSS code. Just like HTMLHint it allows you to specify which validation rules you’d like to apply for the checking of your CSS code. With CSSLint there are mostly warning rules but you can trigger errors as well. Such as when a specific rule is empty, or when using unknown CSS properties, or disallowing duplicate one’s. Warning rules on the other hand requires you to add fallback colors if you’re using hsl, rgba, rgb, or hsla to specify colors. Older browsers might not support those methods of specifying colors so you’ll have to provide a fallback in hexadecimal format. Another example is disallowing units for 0 values. This is mostly for performance benefits. Here’s an example CSS code that I’ve checked with CSSLint:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
body {
    font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
    padding: 0;
    margin: 0;
    height: 100%;
    width: 100%;
}

#settings-button {
    float: right;
    margin-top: 20px;
    margin-right: 20px;
}

h1 {
    padding-left: 40px;
    display: inline-block;
}

#message {
    padding: 20px 40px;
    background: #64CF49;
}


#sidebar {
    width: 20%;
    float: left;
    background-color: #67B6DA;
    position: fixed;
    height: 100%;
}

#items-container {
    width: 80%;
    float: left;
    position: relative;
    margin-left: 20%;
    background-color: #F7F7F7;
}

ul li {
    list-style: none;
}

#sidebar h3 {
    border-bottom: 3px solid;
    padding: 0;
    padding-left: 30px;
}

#types li {
    padding: 10px 30px;
}

ul#types {
    padding: 0;
    font-size: 15px;
}

#types li a {
    text-decoration: none;
    color: #575757;
}

#items {
    padding: 0 20px;
}

#items li a {
    text-decoration: none;
    color: #3A3A3A;
    display: inline-block;
}

#items li {
    padding: 20px;
}

#items li:hover {
    background-color: #DFDFDF;
}

.item-info {
    display: inline-block;
    width: 100%;
    font-size: 15px;
    color: #8A8A8A;
    margin-top: 5px;
}

And then it showed me the following feedback:

csslint

As you can see I’ve used a lot of ID’s in this css file so CSSLint is complaining that I shouldn’t use ID’s. This is mainly because CSSLint have this idea that ID’s are completely unique and therefore there’s no room for reuse. CSSLint advocates the use of OOCSS (Object-oriented CSS) whose main principle is the reusability of code by means of using objects.

Another warning is the use of overqualified selectors:

1
2
3
ul#types{
    ...
}

It’s saying that just using #types would suffice.

The last type of warning is the heading should not be qualified warning:

1
2
3
#sidebar h3 {
    ...
}

This is because headings are considered as top-level styles. This means that you shouldn’t define their styles under a specific element. Because their appearance should be consistent throughout the entire website. Note that this is not saying that headings cannot be nested under a specific element. You can do that but when you’re declaring their styles it should be just on its own so that you can ensure that they look the same throughout the whole website.

JSHint

JSHint helps to detect errors and potential problems in your JavaScript code. It checks for undefined variables, the use of eval (we all know that eval is evil right?), unused variables and many others. In the JSHint website you can configure which rules to apply by clicking on the configure link. Here’s an example of how it works:

jshint

As you can see it provides you with some code metrics. It tells you how many functions has been defined, how many variables are not defined and how many are not used.

It also tells you the cyclomatic complexity of the largest functions. In case you’re wondering, cyclomatic complexity is just a fancy term for the complexity of a specific program. You can see that the cyclomatic complexity of the largest function that I’ve defined is 2. And the median (average) complexity of all the functions in the file is 1.5. People generally say that a cyclomatic complexity of 0 to 5 is fine. But if you get around 6 or more then you should consider refactoring your code.

Another warning that you can see in the example is the missing “use strict” statement. This is a way of telling the browser to use strict mode. I haven’t really dived into strict mode yet but the main idea is that adding this literal expression at the very top of each JavaScript file and at the very top of each function makes the browser complain more about your code. Take for example the following code:

1
2
x = "y"; //browser: sweet!
console.log(x);

Without invoking strict mode, the browser would happily execute this piece of code for you. But with strict mode it will complain that you haven’t defined x yet.

1
2
3
"use strict";
x = "y"; //browser: Uncaught ReferenceError: x is not defined
console.log(x);

Command Line Tool

HTMLHint, CSSLint, and JSHint can all be used through the command line. We’re going to take a look at how to do that in this section.

The first thing that you need to do is to install node.js and npm. But we’re not going to go through that here because I previously mentioned it in my article on package managers. Go ahead and check that out if you don’t already have node.js and npm installed.

Once you’ve installed node.js and npm, you can now install htmlhint, csslint, and jshint using npm:

1
npm install -g htmlhint csslint jshint

You can now immediately use them right after the installation is complete:

1
2
3
htmlhint index.html
csslint style.css
jshint main.js

Note that each of these tools already comes with default options. So if you were to execute each of the commands above, you will most likely get a warning or an error if your code is already complex enough. But you can also specify which rules to apply by creating a configuration file inside of your project directory.

For HTMLHint the configuration file that you have to create is .htmlhintrc and it looks something like this:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
{
    "tagname-lowercase": true,
    "attr-lowercase": true,
    "tag-pair": true,
    "doctype-first": true,
    "tag-self-close": true,
    "attr-no-duplication": true,
    "attr-value-double-quotes": true,
    "attr-value-not-empty": false,
    "title-require": true,
    "id-unique": true,
    "inline-style-disabled": true,
    "inline-script-disabled": true,
    "doctype-html5": true,
    "alt-require": false
}

You can find the rules that you can specify in this page.

Here’s the HTMLHint cli-tool in action:

htmlhint-cli

And here’s the file that I checked:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>

</head>
<body>
    <div>
        <p id="boom"></p>
        <span id="boom"></span>
        <STRONG></STRONG>
        <strong></strong>
        <span>
        <i data href=fldsfl BOOM="bam!" style="color:red;"><b>dds</b></i>
        <div>
    </div>
</body>
</html>

For CSSLint it’s .csslintrc and it looks like this:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
{
  "adjoining-classes": false,
  "box-sizing": false,
  "box-model": false,
  "compatible-vendor-prefixes": false,
  "floats": false,
  "font-sizes": false,
  "gradients": false,
  "important": false,
  "known-properties": false,
  "outline-none": false,
  "qualified-headings": false,
  "regex-selectors": false,
  "shorthand": false,
  "text-indent": false,
  "unique-headings": false,
  "universal-selector": false,
  "unqualified-attributes": false
}

Note that I’ve pick up that configuration straight from bootstrap’s .csslintrc file. You can find the rules for CSSLint in this page.

Here’s CSSLint’s cli-tool in action:

csslint-cli

Here’s the stylesheet that was checked:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
body {
    font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
    padding: 0;
    margin: 0;
    height: 100%;
    width: 100%;
}

#settings-button {
    float: right;
    margin-top: 20px;
    margin-right: 20px;
}

h1 {
    padding-left: 40px;
    display: inline-block;
}

#message {
    padding: 20px 40px;
    background: #64CF49;
}


#sidebar {
    width: 20%;
    float: left;
    background-color: #67B6DA;
    position: fixed;
    height: 100%;
}

#items-container {
    width: 80%;
    float: left;
    position: relative;
    margin-left: 20%;
    background-color: #F7F7F7;
}

ul li {
    list-style: none;
}

#sidebar h3 {
    border-bottom: 3px solid;
    padding: 0;
    padding-left: 30px;
}

#types li {
    padding: 10px 30px;
}

ul#types {
    padding: 0;
    font-size: 15px;
}

#types li a {
    text-decoration: none;
    color: #575757;
}

#items {
    padding: 0 20px;
}

#items li a {
    text-decoration: none;
    color: #3A3A3A;
    display: inline-block;
}

#items li {
    padding: 20px;
}

#items li:hover {
    background-color: #DFDFDF;
}

.item-info {
    display: inline-block;
    width: 100%;
    font-size: 15px;
    color: #8A8A8A;
    margin-top: 5px;
}

Lastly there’s jshint. Here’s a sample .jshintrc file which I’ve taken from CSSLint. CSSLint is basically written in JavaScript that’s why it has its own .jshintrc file to help the developers in checking their code.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
{
    "camelcase": true,
    "curly": true,
    "eqeqeq": true,
    "es3": true,
    "forin": true,
    "immed": true,
    "indent": 4,
    "latedef": true,
    "newcap": true,
    "noarg": true,
    "noempty": true,
    "nonbsp": true,
    "quotmark": "double",
    "strict": true,
    "undef": true,
    "unused": true
}

You can find a list of options here.

And here is JSHint’s cli tool in action:

jshint-cli

With this script file being checked:

1
2
3
4
5
6
7
"use strict";
x = "y";
console.log(x);

function beam(){
    return x + u;
}

Build Tool Integration

Ok so we have a slight improvement over just copying and pasting the code that we want to check in the HTMLHint, CSSLint, and JSHint website. But wouldn’t it be great if we don’t need to execute the command every time we need to check? And in real-world projects you would most likely have multiple css, JavaScript and HTML files. So executing the commands for each of those files would be too troublesome and time-consuming. That is where build tools comes in. Luckily I’ve already done an article specifically about build tools so if you’re new to it then be sure to check that out. Then you can go back to this article once you have an idea how to use a build tool.

Ok so you’re back. Hopefully you’ve learned all about Grunt and Gulp. In this article we’ll be using Gulp and the Gulp plugins for HTMLHint, CSSLint and JSHint. You can install those with the following command:

1
npm install gulp gulp-htmlhint gulp-csslint gulp-jshint

Optionally you can also install the formatters to make the reports more beautiful.

1
npm install htmlhint-stylish jshint-stylish

Note that there’s also a package called csslint-stylish but it currently doesn’t work with Gulp. If you’re reading this article at a later time be sure to check out that page and see if it already works for Gulp.

The next step is to create a gulpfile.js file in the root of your project directory and then add the following code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
var gulp   = require('gulp');

var htmlhint = require("gulp-htmlhint");
var csslint = require('gulp-csslint');
var jshint = require('gulp-jshint');

gulp.task('lint_html', function(){
    gulp.src("*.html")
        .pipe(htmlhint())
        .pipe(htmlhint.reporter("htmlhint-stylish"));
});

gulp.task('lint_css', function(){
  gulp.src('*.css')
    .pipe(csslint())
    .pipe(csslint.reporter());
});

gulp.task('lint_js', function(){
    gulp.src('*.js')
        .pipe(jshint())
        .pipe(jshint.reporter("jshint-stylish"));
});

gulp.task('watch', function() {
    gulp.watch('*.html', ['lint_html']);
    gulp.watch('*.css', ['lint_css']);
    gulp.watch('*.js', ['lint_js']);
});

Like I said earlier, I won’t go deep into this because I’ve already written a whole article on Build Tools. Basically what this file does is to declare all the task that we want to perform with Gulp. We have four tasks in total, one for each linter and one for watching files in a specific directory. The only task that we need to execute is the last one:

1
gulp watch

What this does is to watch all the HTML files and then execute the HTML Linter. The same is true with the other file types. The linter for each specific file type is executed once you save a file. So if you press ctrl + s on your keyboard, the task is immediately executed. What you can do is you can either switch windows (alt + tab) or put the command line window and your text-editor side by side so you get instant feedback on your code.

Text-editor Integration

For the final part we’re going to look at how to integrate the linting tools in the text-editor. I’m a Sublime Text user so I’ll be using it for the examples. But if you’re using another text-editor or IDE be sure to check out if these tools are also available.

The first thing that you need to do is to install the SublimeLinter plugin with Sublime Package Control.

Once installed, determine where HTMLHint, CSSLint, and JSHint are installed in your computer. In Ubuntu you can do something like:

1
2
3
which htmlhint
which csslint
which jshint

That will return the path to the executable file. For me it was /home/wern/.nvm/v4.0.0/bin/csslint for csslint. Note that csslint in that path is the executable file itself. So the path that you actually want is /home/wern/.nvm/v4.0.0/bin. It returned the same path for HTMLHint and JSHint for me so I only need that one path. Once you’ve found it, go ahead and copy that path.

Next open Sublime Text, click on the preferences menu > package settings > SublimeLinter > Settings – User. This opens the user configuration file for SublimeLinter. Add the following into it and then save.

1
{}

Open the file again by going through the same steps above. This time Sublime Text has already added the default configurations in there. What you need to do now is to look for the paths object and under your current operating system at the path to where the HTMLHint, CSSLint and JSHint executables are. Because I’m using Ubuntu I had to put it inside linux object.

1
2
3
4
5
6
7
"paths": {
    "linux": [
        "/home/wern/.nvm/v4.0.0/bin"
    ],
    "osx": [],
    "windows": []
},

Once you’re done, save the file then restart Sublime Text (close it and open again).

Open the Sublime Text console by pressing ctrl + ` then look for something similar to the following:

1
2
3
SublimeLinter: htmlhint activated: /home/wern/.nvm/v4.0.0/bin/htmlhint
SublimeLinter: jshint activated: /home/wern/.nvm/v4.0.0/bin/jshint
SublimeLinter: csslint activated: /home/wern/.nvm/v4.0.0/bin/csslint

This tells you that SublimeLinter has successfully picked up the paths to where the linters are installed. If you’re seeing that then you’re good to go, if not then be sure to check if the path that you’ve supplied really contains the executable code for each of those linters.

Here are some screenshot that shows the linters in action:

htmlhint text editor

csslint text editor

jshint text editor

The yellow dots indicates warnings, while the red dots indicate errors. If you move your cursor over to the line where a dot is, you can see the actual message on the status bar (bottom left corner of the screen). Pretty sweet right?

Conclusion

That’s it! In this article you’ve learned how to use some of the tools that you could use to help you with determining potential problems in your HTML, CSS and JavaScript code. You’ve also learned how to integrate this into your workflow by making use of the command-line tool or the text-editor integration.

Resources

A Developers New Years Resolution

| Comments

It’s 2016. A brand-new year is upon us. And this is the time of the year when people usually set goals for the new year. While most other folks have new year’s resolution for their real life, In this article I’ll be sharing some of my new year’s resolution as a developer.

Generate Passive Income

The idea of generating a passive income has really enticed me in the past but it’s only this year that I’ve thought about it seriously. For developers one way of generating passive income is through marketplaces like Themeforest and CodeCanyon. All you have to do is build something useful and you can sell it on the platforms that I’ve just mentioned. I’ve already created an account on CodeCanyon, set it up and read their terms. All that’s left for me to do is to build something and submit it for review so that people can find it.

Continue What I’ve Started

I have a bunch of projects on Github. Some might not already work. Some lacking in documentation. This year I’ll continue every project that I started. Or at least mention that I won’t already be doing active development for projects that I’m no longer interested in pursuing.

I have also a blog series that I started back in 2014 which I called: A Whirlwind Tour of Web Developer Tools, I’m planning to start that up again this year.

Be More Picky

I read a lot. In fact I’ve created a website that curates all the news from sources that I want. Usually these are from the developer newsletters, twitter users, and websites that I follow. But I’m still subscribed to the newsletters which I have used as the news item source. So it still gets the better of my time when I receive a new issue. My plan is to unsubscribe to all of those newsletters and just stick to using the website myself. This is so that I don’t accidentally engage to some content. Or click on a link and not actually reading what’s in there. With the new setup I can actually just visit the website if I really want to read something and not when I receive a new issue of a newsletter.

The second step after unsubscribing to all newsletters is to actually pick only what I really want to read. If its a tool that I can use in the future, then I save it on my delicious account. If its an article which I want to go back to in the future then I save it on Pocket.

The third step is to actually read what’s really important or at least something that I really want to read. Of course this can’t be determined by merely looking at the title so the article has to be scanned first and then determine if it’s really relevant.

Of course this goes with all the other content that I’m consuming and creating. So movies, anime shows, personal projects, blog posts should go through a tight consideration before I actually engage on it.

Be More Healthy

Developers have a sedentary lifestyle by nature. Just sitting on a chair coding all day. That’s no good so here are the steps that I’m planning to implement to be more healthy.

  • Indoor exercise in the morning. Intense outdoor exercise in the weekends.
  • Use the standing desk at least one hour in the morning and one hour in the afternoon.
  • Eat less rice.
  • Eat more fruits and vegetables. There should be at least one meal per day where I eat a decent amount of those.
  • Get more sunlight.
  • Sleep more.
  • Be more concious about my posture.

Engage More in the Community

  • I’ll start by creating videos on Youtube showing a specific technology, tool or methodology regarding web development. I’ve already started it the previous year by uploading some of my flipped classroom videos that I’ve used in my class in the school where I teach.
  • Comment on other developers blog posts, or talk to them on twitter.
  • Answer questions on Stackoverflow.
  • Attend local developer meetups.
  • Contribute to open-source projects.

Use Tools

I’ve been pretty much avoiding the use of tools in my day to day job as a developer. I still use plain css instead of Less, Sass, Stylus or {insert your css preprocessor of choice here}. I still don’t use Grunt, Gulp, Brocolli, Carrots, Eggplant, {insert your build tool of choice here} for every project (note: there’s no carrots or eggplant yet but someone might create it after this). I’ve been avoiding the use of tools because I just want to get started with a project fast. Installing a bunch of tools and setting them up before I can start coding is a pain. The only tools that I currently use are the following:

  • Composer
  • Bower
  • npm

Simply because you can’t install anything without those.

This year I’ll start by learning how to use Yeoman so I can easily setup all the things that I need for a project. And then learn how to use a css preprocessor, Gulp to process the project assets, JSLint to check the quality of my JavaScript code. And then in the back-end use PHPUnit for unit-testing. And lastly use a continuous integration server such as Jenkins to automatically run unit tests so that I immediately know if a specific code is still working or not.

Build More Cool Shit

Pardon the language but developers are commonly foul-mouthed right? Anyway, what I mean by build more cool shit is to create stuff that I can be proud of. I’d also like to build IOT (Internet of Things) projects. And with the birth of the RaspberryPi zero it just got more easy. Though I’m yet to order one because the stock is always zero. I should have ordered one when I first heard about it. Now people are ordering it non-stop. Who wouldn’t right? RaspberryPi zero is only five fucking dollars.

Learn a New Language, Framework, Tool, Methodology

  • Language: Python – If I am to build stuff with RaspberryPi I need to learn to code in Python. I also want to leap from the hybrid app bandwagon and go full native so I’ll have to learn (or rather re-learn) Java. This is simply because apps built with Hybrid App Framework such as Cordova performs poorly on my old android phone. Maybe I just need a new phone but I’ll go ahead and blame it to programming.
  • Framework: Symfony – I’m basically a Laravel guy so for a change I pick Symfony.
  • Tools: CI Server, PHPUnit, Gulp, Sass, ReactJS
  • Methodology: I’m still not sure. But I’ll probably try to learn some of the most popular design patterns in JavaScript and PHP.

Get Better at What I Do

No matter how good you are at something there’s always room for improvement, there’s always another way for doing things twice as easy or efficient. So the plan for 2016 is to look for ways to improve my current development workflow. Like I said earlier I’m a Laravel guy so I’ll start by examining my current Laravel workflow and see what I can improve.

Invade Other Fields

I’ve been really interested in UX because I know it will be helpful for me as an all-around developer. When I say all-around it means I’m the one doing the server setup up to deployment and anything between those two. I’m pretty much a one-man band in all the projects that I’ve built so far. No devops, no designer, no nothing.

Another field that I’d like to look into is SEO. Who wouldn’t want to have their website more findable?

That’s it! How about you? What’s your plan for 2016?

Year-end Review

| Comments

A year is coming to an end again. And with lots of free time during the holidays I figured it would be nice to reflect on the previous year. So in this post I’ll be sharing some of the things that happened in 2015.

Career

As you might already know I’m a developer. So I develop websites and apps for a living. I mainly do home-based work since I graduated from college. Mainly because of its convenience and for personal reasons. You get to work from home and earn money how cool is that? But recently its no longer that fun. Payments get delayed. And projects are no longer that interesting. I basically stopped doing it around October of this year. Good thing I got hired as an author for Tutsplus’ Mobile channel. And I still write for Sitepoint. So I currently write articles for those two awesome websites full-time.

Around July this year I got a message from my college instructor asking if I want to teach. I said yes. And so from August until December I taught at the college where I graduated from. It’s only part-time during the afternoon so I still got to write full-time. From my 4 months of experience I can say that I really enjoyed teaching. Being able to share what you know and helping your students get better, it’s one of the most rewarding feelings ever.

Since teaching in college requires someone to have a master’s degree in their field. I had to take up Master’s in Information Technology. Good thing the school is only walking distance from my home so it’s very accessible. And classes are only on saturdays. So I’m still able to do what I like doing the most: coding.

Projects

This career section wouldn’t be complete without me talking about projects. If you look at my Github profile there are lots of new additions to the list of repos this year. This is mainly because I always write tutorials on making apps with different web technologies. Sitepoint and Tutsplus requires those apps to be in a Github repo. That’s why my Github has got a bunch of those apps. Another reason for the repo population growth is free time. I already mentioned that I currently write full-time. But I don’t necessarily have a boss. So I still got to choose whether to write for a certain day or work with another thing. Some days I choose to work on my personal projects. The common theme for my personal projects is usually to solve some problems that I’m having. Mainly automation stuff so I don’t have to do a lot of things manually. My part-time teaching job has particularly lots of problems that needs solving. This includes: attendance tracking, managing of files submitted by students, checking of student activities, showing grades to the students.

Health

Developers are mainly sedentary animals. That’s why there’s a need to make an effort to thwart the effects of sitting in front of the computer all day long. As for me what I did was to use a standing desk. And jog first thing in the morning.

Getting Information About Any Company With Clearbit’s Company API

| Comments

In this tutorial I’ll be showing you how you can get information from any company using the Clearbit Company API.

Start by signing up for an account on the Clearbit website. An API key will be assigned to your account after signing up. This allows you to make a request to their API.

Next, install Guzzle on your working directory. Guzzle is an HTTP library for PHP. It is used to easily make requests to any API.

1
composer require guzzlehttp/guzzle:~6.0

Include the vendor autoload file on your file and create a new Guzzle client with the following base uri: https://company.clearbit.com/.

1
2
3
4
5
<?php
require_once 'vendor/autoload.php';

$client = new GuzzleHttp\Client(array('base_uri' => 'https://company.clearbit.com/'));
?>

To use the API, make a get request to the v1/companies/domain/ endpoint followed by the domain name of the company that you want. Pass in the auth as an option. This allows you to specify the API key which you got from Clearbit.

1
2
3
4
5
<?php
$response = $client->get('v1/companies/domain/google.com', array(
    'auth' => array('YOUR-CLEARBIT-API-KEY', '')
));
?>

You can then get the response body by calling the getBody method in the response. In the example below, the response is converted to an array using the json_decode method.

1
2
3
4
5
6
<?php
$data = json_decode($response->getBody(), true);
?>
<pre>
<?php print_r($data); ?>
</pre>

The output will look something like the following.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
Array
(
[id] => 1d396c21-e421-4dd9-988e-55a8200c6e10
[name] => Google
[legalName] => Google Inc
[domain] => google.com
[domainAliases] => Array
    (
        [0] => covet.com
        [1] => appspotchat.com
        [2] => ggh-uae.com
        [3] => remail.com
        [4] => orkut.com
        [5] => goolge.com
        [6] => picasa.com
        [7] => blogspot.ru
        [8] => sparkbuy.com
        [9] => pushlife.com
        [10] => greenparrotpictures.com
        [11] => phonetic-arts.com
        [12] => omnisio.com
        [13] => googlecloud.com
        [14] => weardrobe.com
        [15] => ojos-inc.com
        [16] => akwan.com.br
        [17] => appliedsemantics.com
        [18] => gemail.com.br
        [19] => wosix.com
        [20] => firstinwireless.com
        [21] => cloudmarket.me
        [22] => riya.com
        [23] => teronamanagement.com
        [24] => sxz.co
        [25] => womenfitnessinsider.com
        [26] => webtocracy.org
        [27] => webtocracy.com
        [28] => webtocracy.net
        [29] => superapple.org
        [30] => storktechnology.com
        [31] => sourful.com
        [32] => snapchatdeals.com
        [33] => quarterthree.com
        [34] => puwak.com
        [35] => nudevilla.com
        [36] => nemzis.com
        [37] => ryanstull.com
        [38] => mckayfamily.org
        [39] => marksearle.net
        [40] => opentolink.com
        [41] => lewispi.com
        [42] => levkova.com
        [43] => katenka.net
        [44] => imize.net
        [45] => google.us
        [46] => com.google
        [47] => gogle.com
        [48] => oingo.com
        [49] => googlesyndication.com
        [50] => ggoogle.com
        [51] => google.io
        [52] => blogspot.ae
        [53] => gogole.com
        [54] => hijab.pw
        [55] => industrial-perception.com
        [56] => googlr.com
        [57] => googleadservices.com
        [58] => talkbin.com
        [59] => picnik.com
        [60] => postrank.com
        [61] => appjet.com
        [62] => google.co
        [63] => zabrinalee.com
        [64] => blu-ray.us
        [65] => picasa.net
        [66] => googleproductforums.com
        [67] => googlelabs.com
        [68] => googlee.com
        [69] => gooogle.com
        [70] => diychef.com
        [71] => googl.com
        [72] => gmail.co
        [73] => blogger.ch
        [74] => mozingo.me
        [75] => orkut.org
        [76] => lifescapeinc.com
        [77] => firehunt.com
        [78] => google.info
        [79] => veremey.net
        [80] => docverse.com
    )

[url] => http://google.com
[site] => Array
    (
        [url] => http://google.com
        [title] => Google
        [h1] => 
        [metaDescription] => Search the world's information, including webpages, images, videos and more. Google has many special features to help you find exactly what you're looking for.
        [metaAuthor] => 
    )

[category] => Array
    (
        [sector] => Consumer Discretionary
        [industryGroup] => Media
        [industry] => Media
        [subIndustry] => Publishing
    )

[tags] => Array
    (
    )

[description] => Google’s mission is to organize the world’s information and make it universally accessible and useful.
[location] => 1600 Amphitheatre Parkway, Mountain View, CA 94043, USA
[geo] => Array
    (
        [streetNumber] => 1600
        [streetName] => Amphitheatre Parkway
        [subPremise] => 
        [city] => Mountain View
        [state] => California
        [country] => United States
        [postalCode] => 94043
        [lat] => 37.4224206
        [lng] => -122.0843021
    )

[logo] => https://logo.clearbit.com/google.com
[facebook] => Array
    (
        [handle] => google
        [likes] => 
    )

[linkedin] => Array
    (
        [handle] => company/google
    )

[twitter] => Array
    (
        [handle] => google
        [id] => 20536157
        [bio] => News and updates from Google
        [followers] => 11873983
        [following] => 448
        [location] => Mountain View, CA
        [site] => http://t.co/twxHxOtTvy
        [avatar] => https://pbs.twimg.com/profile_images/522909800191901697/FHCGSQg0_normal.png
    )

[angellist] => Array
    (
        [id] => 32203
        [handle] => google
        [description] => Google’s mission is to organize the world’s information and make it universally accessible and useful.
        [followers] => 7097
        [blogUrl] => http://googleblog.blogspot.com/
    )

[crunchbase] => Array
    (
        [handle] => google
    )

[emailProvider] => 
[type] => public
[ticker] => 
[phone] => +1 650-253-0000
[metrics] => Array
    (
        [alexaUsRank] => 1
        [alexaGlobalRank] => 1
        [googleRank] => 9
        [employees] => 10000
        [marketCap] => 
        [raised] => 1700000000
    )

[tech] => Array
    (
        [0] => google_analytics
        [1] => double_click
        [2] => google_adwords
        [3] => doubleclick
        [4] => google_apps
    )

)

Securing Passwords in PHP

| Comments

In this tutorial we’re going to take a look at some of the libraries that allows us secure passwords in PHP.

Password Compat

The first library that we’re going to look at is Password Compat. You can install it through Composer by using the following command.

1
composer require ircmaxell/password-compat

Once it’s done installing, you can the include the vendor autoload file so you can use its functions.

1
2
3
<?php
require_once 'vendor/autoload.php';
?>

The password_hash function is used to hash passwords. It accepts the password that you want to hash as its first argument and the algorithm to be used for password hashing as its second. In the example below, PASSWORD_DEFAULT is used. This allows you to use the most secure algorithm that’s currently available to PHP. At the time of writing of this article, the most secure algorithm that’s available to PHP is bcrypt. So that’s the one that’s being used when you specify PASSWORD_DEFAULT as the second argument.

1
2
3
4
<?php
$password = 'mypassword';
$hash = password_hash($password, PASSWORD_DEFAULT);
?>

There’s also an optional third argument which allows you to change the CPU cost of hashing the password. By default the cost is 10. So if you have a less powerful server you can change it to something lower. The cost can have a value between 4 and 31.

1
2
3
<?php
$hash = password_hash($password, PASSWORD_DEFAULT, array('cost' => 7));
?>

You can then store the hash in your database.

To validate if a password matches the hash stored in the database, use the password_verify method. This accepts the password as the first argument and the hash as the second. So in your application you might have a query to select the user based on its email or username and then you use the hash that was returned for the second argument.

1
2
3
4
5
6
7
<?php
if(password_verify($password, $hash)){
    echo 'valid';
}else{
    echo 'invalid';
}
?>

PHPAss

PHPAss is one of the older password hashing libraries that are available for PHP. Nevertheless it doesn’t make it less secure than any of the password securing methods in this article. It uses the blowfish algorithm to hash passwords.

Execute the following to install PHPAss.

1
composer require hautelook/phpass

After including the vendor autoload file, set your current file to use the PasswordHash class in the Hautelook namespace.

1
2
3
<?php
use Hautelook\Phpass\PasswordHash;
?>

Create a new password hasher instance. This accepts 2 required arguments. First is the base-2 logarithm of the iteration count used for password stretching. The second a boolean value for setting if the password will use portable hashes. The values that I’ve set below are the default one’s. Those will do for most use cases.

1
2
3
<?php
$passwordHasher = new PasswordHash(8, false);
?>

You can then call the HashPassword method to actually hash the password. This hash should then be stored into the database.

1
2
3
4
<?php
$password = 'mypassword';
$hash = $passwordHasher->HashPassword($password);
?>

You can check if a password is valid by using the CheckPassword method. This accepts the password as its first argument and the hash that came from the database as the second.

1
2
3
4
5
6
7
8
<?php
$passwordMatch = $passwordHasher->CheckPassword($password, $hash);
if($passwordMatch){
    echo 'valid';
}else{
    echo 'invalid';
}
?>

PHP Password Lib

PHP Password Lib is one of those libraries that isn’t really recommended for production use. As mentioned in their Github page itself, it’s currently in beta and should be used at your own risk.

In order to install PHP Password Lib, you first have to add a minimum-stability option and set it to dev. Also set prefer-stable to true so that composer will default to installing the stable versions of the other libraries that you’re installing via composer.

1
2
"minimum-stability": "dev",
"prefer-stable": true

Can’t really find the library in Packagist so you need to add the following to your composer.json file directly.

1
"PasswordLib/PasswordLib": "*"

Once that’s done, execute composer update to update the dependencies.

To use the library, create a new instance of the PasswordLib class and then use it to call the createPasswordHash method to hash a password.

1
2
3
4
5
<?php
$password = 'mypassword';
$lib = new PasswordLib\PasswordLib();
$hash = $lib->createPasswordHash($password);
?>

Just like the previous libraries it also comes with its own verify function.

1
2
3
4
5
6
7
8
<?php
$is_valid = $lib->verifyPasswordHash($password, $hash);
if($is_valid){
    echo 'yep';
}else{
    echo 'nope';
}
?>

Aside from the generating and verifying hashes, it also allows you to generate random tokens. A sample use case would be when users request for their password to be reset. That’s commonly done by sending an email to the user. That email contains a link with a query parameter on it which has a random string as its value. That string is the token. Which is used for fetching the password reset request that was saved in the database.

1
2
3
4
<?php
$token = $lib->getRandomToken(35);
echo $token; // Mpe/H3oLamOqEV4uxTwu.fuhKpb5p/u4BMu
?>

zxcvbn-php

zxcvbn-php is a library for estimating password strength.

You can install it by executing the following command.

1
composer require bjeavons/zxcvbn-php

To use the library, make use of the ZxcvbnPhp\Zxcvbn namespace.

1
2
3
<?php
use ZxcvbnPhp\Zxcvbn;
?>

You can then determine the password score by calling the passwordStrength method.

1
2
3
4
5
6
<?php
$zxcvbn = new Zxcvbn();
$password = 'mypassword';
$strength = $zxcvbn->passwordStrength($password);
echo $strength['score'];
?>

Based on my testing, it returns 0 if the password is not secure or easy to crack. And return 4 if it is secure. I haven’t found any values between those and there’s nothing higher than 4 so I assume it can only return a score of either 4 or 0. The result contains other data as well. Things like the entropy, calc_time and crack_time.

GenPhrase

Lastly, we’re going to take a look at GenPhrase. This library allows us to generate secure passphrases in PHP.

To install GenPhrase, execute the following on your terminal.

1
composer require genphrase/genphrase

One note about the installation though. It’s also mentioned in their official Github project page. It mentioned that GenPhrase should be obtained only via secure connection using Github. This is because Composer is susceptible to man-in-the-middle attacks. If you’re just testing, it’s fine to install this library via composer. But if you’re following this tutorial to implement this library on a production server then think again. You’ve been warned.

To use GenPhrase, create a new instance of the Password class under the GenPhrase namespace. Then call the generate method to generate the random passphrase.

1
2
3
4
<?php
$gen = new GenPhrase\Password();
echo $gen->generate(); // Slum treble Boost rack
?>

You can also pass the entropy) as an argument. By default the value is 50. But you can have a value between 26 and 120.

1
2
3
<?php
echo $gen->generate(60); // soviet!Retain8skinny&spoil
?>

Conclusion

That’s it! In this tutorial you’ve learned how to secure passwords in PHP using the Password Compat, phpass, PHP Password Lib, zxcvbn and GenPhrase libraries.

Tools of Trade

| Comments

Every developer has their own set of “go to tools” when it comes to developing applications. Such as the stack, programming tools and libraries that would make specific tasks easier to implement. In this article I’m going to share some of the tools and resources that I usually use in my day to day web development practice.

LAMP

Since I’m running Ubuntu on my machine, I use the LAMP (Linux, Apache, MySQL, PHP) stack for all of my projects. Linux being the Operating System, Apache as the web server, MySQL for the database and PHP for the programming language.

Composer

Composer is a package manager for PHP. It handles the installation of various PHP libraries which can be found at Packagist.org.

Laravel

For medium-sized projects (takes about 2-5 months to build), I use the Laravel framework. And for small-sized (takes about 2 days to 3 weeks to build), I use the Lumen framework which is basically a lightweight version of Laravel. I chose it because of the sheer elegance of code that can be written when using the framework. It also comes with a lot features that I need in most of my projects. Such as database migrations, seeding, routing, templating and easy integration with third-party libraries.

jQuery

They say jQuery is for sissies, but I don’t really mind. As long as the tool works, it doesn’t really matter. jQuery is basically the all in one solution for all my JavaScript needs. It makes it easy to select and manipulate the elements in the page, listen to events and make AJAX requests. I haven’t done a web project where I didn’t need jQuery.

Sublime Text

My text-editor of choice, though I admit that I’m still using an unregistered copy. So I still see the purchase pop-up every now and then. Though I have plans to buy a license in the future. But as they say “someday I’ll buy a sublime text license but today isn’t that day”. What I liked with Sublime Text is that it makes writing code faster. You can also install plugins which integrates with other programs such as JSHint or Git.

Git

Most developers today are using Git, probably because of Github. But that doesn’t really matter. Git is an awesome software by itself, even without Github. For the uninitiated, Git is a version control software which allows you to make snapshots of your project so that you can easily revert later or share your changes to your team. Github on the other hand, is a web based Git repository hosting service with lots of other nice features. Go check it out yourself. But the key takeaway is that Github makes collaboration much easier with the set of tools that it provides.

Cordova

Ocassionally I get mobile app development projects. This is where Cordova comes in handy. It basically makes it easier to develop apps for any of the platforms (Android, iOS, Windows, etc.) that it supports by making use of web technologies (HTML, CSS, JavaScript). Access to native device APIs are also provided by making use of plugins.

Bootstrap

I admit, I’m not a designer and my CSS skills could certainly improve. Making things pretty isn’t really my forte. That’s why front-end frameworks such as Bootstrap really helps. It keeps my mind off making things pretty so I can just concentrate on the functionality.

Chrome/Chromium

The main browser that I use for testing the web applications that I build. The developer tools is what really makes it shine. It’s interface is really intuitive and easy to use. Almost every aspect of your web application can be inspected and tested by using their developer tools.

Skype

Since I’m mostly working remotely, there’s a need for exchanging messages and making calls. Skype helps me with that. It’s also cross-platform, so I can install it no matter what machine I’m using. Recently they also released Skype for web which makes things even more easier.

Bitbucket

Bitbucket is another Git repository hosting service. Well there’s already Github, but the thing is you can only have public repositories on Github. Bitbucket on the other hand allows you to have private repositories for free. That’s pretty much the only reason why I used Bitbucket. I need my projects to be private so I use it instead of Github.

Node.js

If a project calls for real-time functionality such as chat applications, nothing beats Node.js. It provides an event-driven architecture and a non-blocking I/O API. This allows real-time applications to be built with ease.

Socket.io

Socket.io is a library that makes it easy to build real-time applications. It’s often used in tandem with Node.js.

Virtualbox

If a project requires me to test on a different platform and browser such as Internet Explorer or Safari on Windows. I usually use Virtualbox. I guess I don’t really have much of a choice. Other than Virtualbox, I’m not really aware of any other software that can virtualize an OS.

AWS

Amazon Web Services as the name suggests is a collection of Web Services offered by Amazon. I only use ec2 (elastic compute cloud), s3 (simple storage service) and cloudfront (CDN) though. The cool thing about their web services is that they’re tightly integrated with each other. Which means that you can easily use s3 within an ec2 instance without having to do much of the setup. They also provide an API which can be used to programatically upload files to their servers.

DigitalOcean

Recently I also started using Digitalocean for my personal projects. Mainly because its very affordable (only $5 a month for the lowest tier) and easy to resize (I can upgrade or downgrade any time).

Carbon

Carbon is a PHP library for working with dates.

Moment

Basically the Carbon equivalent for JavaScript. The nice thing is that you can use it on both the client-side and server-side (node.js).

Intervention Image

When there’s a need for image processing in a PHP application, I always grab intervention image through Composer. Resizing, cropping, blurring, change orientation, optimizing, name it and intervention image has it. But what hit the jackpot is that it works nicely with Laravel without having to do much setup.

Twig

Blade is the default templating engine used by Laravel so I use that without having second thoughts. But whenever I work outside Laravel, I have to use something like Twig to handle my templating needs.

Handlebars

My templating engine of choice when I’m using JavaScript.

Mandrill

Whenever I need to send out emails from an application, Mandrill is the tool of choice. Its a no-brainer since Laravel makes it easy to send emails using services such as Mandrill.

Faker

As programmers we all love automating things. Faker does exactly that. It generates fake data for you so you don’t have to enter it manually through the application that you’re building.

Dropzone

Dropzone is my file upload libary of choice. It’s easy to get started using it. But it also makes it easy for developers to customize.

Stripe

Whenever a project needs to accept payments from its users, Stripe is my service of choice. I’m not really confident enough that I’d be able to implement a payment system which is safe from every hacker. Just the thought of saving the hash of credit card numbers on a database sends shivers to my spine. Stripe takes that fear away. I know the guys at Stripe know their stuff.

Paypal

For simple payment needs, Paypal is the tool. And BTW, this is also how I receive payments. It integrates with almost every bank on the planet so you can easily withdraw your money using your bank of choice.

Twilio

Whenever there’s a need for voice enabled apps or SMS verification, nothing beats Twilio.

Guzzle

“No man is an island”, the same is true with web applications. More often than not, you’ll find the need to integrate with third party services. That’s where Guzzle comes in, it’s a PHP library for making http requests. If the API that you’re working on doesn’t already come with a library for making requests, then Guzzle is for you.

thujohn/pdf-l4

For applications that require printing of reports. Thujohn’s pdf-l4 library does it.

Datatables

If an application requires searching or paginating through a table of data, datatables does the trick. What’s great is that there’s also a datatable library for Laravel 4 which makes it easy to integrate to a Laravel project.

Beanstalk

Beanstalk is a queue system. You basically use it for running time-consuming tasks such as sending out emails or processing images. There’s also a library called Pheanstalk which makes it easy to work with Beanstalk for queueing tasks.

Elasticsearch

I use Elasticsearch if there’s a need for fast searches. Elasticsearch if a full-text search server that is based on Apache Lucene. It works with

schickling/laravel-backup

Any decent developer would implement a database backup and restore functionality for each of the applications that they build. For Laravel developers, the laravel-backup library is one choice. It allows you to easily backup your database on a folder in the server or in an Amazon s3 bucket.

Cron

We all know Cron. It’s the thing that we use whenever we need to execute something at specific intervals.

Express

Express is a framework for Node.js. From their website itself: “Express: Fast, unopinionated, minimalist web framework for Node.js”. It handles routing and serving of static files. That’s all it really does but you can easily install third-party libraries for talking to the database or handling views and you wouldn’t have any problem. Its unopinionated so you can do whatever the fuck you want and it won’t complain.

Picnic CSS

Recently for some of my personal projects, I used picnic css. Think of it as a lightweight bootstrap. It makes your UI beautiful without all the cruft that usually comes with bootstrap. It’s also modularized into a set of plugins. So you can just include the plugins that you need.

Conclusion

In this article you’ve learned about some of the tools that I usually use in my projects. What about you? What are your “go to” tools when it comes to developing applications?