DM

CNY Software Developers MEAN.js Meetup Notes

Wed, 11 Mar 2015 00:00:00 -0400

Github Examples: https://github.com/immersegfx/cnysoftdev-meanjs-meetup

Adding LESS.js support to your MEAN.js app

Wed, 11 Feb 2015 00:00:00 -0500

Working on a recent project using MEAN.js I wanted to add support for managing my styles with LESS.js. After building the application using the yeoman generator I was a little surprised that it didn't make use of if by default. Though adding it to the grunt configuration is easy and only takes a minute.

Installing dependencies

First you will need to install the less and grunt-contib-less packages using npm.

$ npm install --save less grunt-contrib-less

Optionally add a folder for .less sources

Personally I like to keep source files like less and scss out of my public folder. This is not really a requirement though I find it easier to organize things like this.

$ mkdir -p assets/less

Configuring Grunt

Adding the watcher

Next you will need to tell Grunt how to handle .less files and update the file watchers. Open up gruntfile.js in the root of your MEAN.js app and in the initConfig.watch options, add a new option for less files under the clientCSS option. I named mine clientLESS but you can enter any you like so long as it is unique.

grunt.initConfig({
            pkg: grunt.file.readJSON('package.json'),
            watch: {
                ...
                clientCSS: {...}
                clientLESS: {
                    files: ['assets/less/*.less','public/modules/**/*.less'],
                    tasks: ['less']
                }
            }
        ...

Note: If you decided not to create an assets folder then you can remove the first option in files.

Configuring less

Now tell the less configuration where to find source files and what to do with them. I chose to consolidate all the styles into the application core.css. Since this is an AngularJS application it is best to have all the needed styles available right away. I added the following below the csslint configuration.

less: {
    development: {
        options: {
            paths: []
        },
        files: [{
            src: ['assets/less/*.less', 'public/modules/**/*.less'],
            dest: 'public/modules/core/css/core.css'
        }]
    },
    production: {
        options: {
            paths: []
        },
        files: [{
            src: ['assets/less/*.less', 'public/modules/**/*.less'],
            dest: 'public/modules/core/css/core.css'
        }]
    }
}

Having a development and production environment specification are required and things will fail like this without them.

Warning: Object #<Object> has no method 'indexOf' Used --force, continuing.

For now they are the same but once the application is ready to deploy the production settings could be updated to run additional optimizations on your styles.

Updating the lint task to run less

Last you need to add less to the lint grunt.registerTask before the csslint task. It should look like this:

grunt.registerTask('lint', ['jshint', 'less', 'csslint']);

Conclusion

Setting this up was fairly straight forward, but I did use yeoman to generate the site. If you started by checking out source from github or some other path things may not match. Though there should be enough here to get it setup.

An additional concern that popped into mind is upgrading. I have not had to migrate to a new version yet and can not guarantee that these changes to the gruntfile will not be overwritten at that time. Perhaps a better solution of including an external configuration should be looked at, or adding it as an option to the yeoman generator.

Experimenting with PHP 5.5 Generators

Thu, 22 Jan 2015 00:00:00 -0500

One of the new features introduced in PHP 5.5 is the generator syntax. The docs on php.net define it as:

A generator function looks just like a normal function, except that instead of returning a value, a generator yields as many values as it needs to.

As an example the following 2 functions would return the same results.

<?php
$people = [
    ['firstName' => 'Jon', 'lastName' => 'Doe'],
    ['firstName' => 'Jane', 'lastName' => 'Doe'],
    ['firstName' => 'Travis', 'lastName' => 'Doe'],
];

function arrayNames($people)
{
    $names = [];
    foreach ($people as $person) {
        $names[] = implode(' ', $person);
    }
    return $names;
}

function yieldNames($people)
{
    foreach ($people as $person) {
        yield implode(' ', $person);
    }
}

foreach (arrayNames($people) as $name) {
    echo $name . PHP_EOL;
}

foreach (yieldNames($people) as $name) {
    echo $name . PHP_EOL;
}
?>

So yea, less code?

There you have it. You can now write less code in all your iterations, and have all the free time in the world to tackle the important things in like like knitting… But wait. There has to be more to it then that.

There is and it’s Memory Usage

Among the benefits of using generators the one that stood out to me the most what the promise of decreased memory usage. Reducing the memory footprint helps free resources to serve more requests and squeeze the most out of your hardware. For the purpose of this experiment I would like to put that to the test.

Testing it out

To check the difference in memory usage I wrote a simple test. First I went to http://www.json-generator.com/ and generated some sample json data. Then I wrote a quick script that would allow me to test out the two approaches and see how much a difference there is. Here is the gist of it:

Results

The sample json data I used contained around 100 records and I ran the test 5 times each running PHP 5.5.9 on Ubuntu 14.04. Note: I didn’t include the individual results because they all were the same.

Array test result

$ php TestYield.php array
Running [array] test
Start Memory Usage: 1087592
After test function: 1112744 Diff: 24.56 kb
................................................................
.....................................
After loop: 1113416 Diff: 25.22 kb

Yield test result

$ php TestYield.php yield
Running [yield] test
Start Memory Usage: 1087592
After test function: 1088800 Diff: 1.18 kb
.................................................................
....................................
After loop: 1088984 Diff: 1.36 kb

Observations

Dumping values

One thing I noticed in testing this out is that running var_dump or print_r on the yieldNames function returns an empty Generator Object. This may be cumbersome at some point when debugging as so far the only means I have found to dump the content is to loop over the results.

Using return

Returning any value from a generator will result in a compile error. The recommendation from php.net is:

A generator cannot return a value: doing so will result in a compile error. An empty return statement is valid syntax within a generator and it will terminate the generator.

Conclusion

It does indeed appear that using PHP 5.5 generators has an impact on memory usage. This test shows that using generators consumes about 4% of the memory array does. Now I’m sure YMMV and there could be other things that effect these results but as an example it does look promising. Once PHP 5.5 usage is more universal I would expect libraries like Zend Framework would benefit greatly from these optimizations.

Check for required PHP extensions with Composer

Wed, 07 Jan 2015 00:00:00 -0500

Thanks to creation the Composer PHP Dependency manager, using and managing 3rd party libraries has become a breeze. Gone are the days of committing dependencies and manually keeping things up to date. Additionally using Composer removes the possibility of someone making changes to a 3rd party library and committing it... Don't do it!

Recently I began adding Composer to some of my legacy projects and refactoring dependencies like PHPMailer over to Swiftmailer. Also thanks to PHP 5.4 and its built in web server reformatting things to make development easier. Throughout a projects lifecycle I may work on multiple different systems. Maybe my laptop when working on-site or my own using Windows or Linux. The awesomeness of being able to run php composer.phar install after updating my sources just makes me smile.

That brings me to today and preparing to deploy a new Linode instance. After provisioning my new server, grabbing the sources and running the Composer install I sat back, put my feet up on the desk and thought life is just grand.

Houston we have a problem

Roughly 30 minutes later I get a notification from NewRelic informing me that my error rate is at 10%, Doh! So back to the server logs to see what’s up and find.

PHP Fatal error:  Class 'Imagick' not found

Well that explains things. Just need to install the PHP Imagick module and we are back in business. But how can I make sure this doesn’t happen again? I could configure a build system using Phing or Ant, or just write a bash build script to automate it in the future. Both would work abet be overkill for the scope of the project. That’s when I turned to composer and found information on Platform packages.

Composer Platform Packages

Composer has platform packages, which are virtual packages for things that are installed on the system but are not actually installable by Composer. This includes PHP itself, PHP extensions and some system libraries.

Woo hoo! That’s exactly what I was looking for. To validate the availability of PHP extensions, all that is needed is to preface its name with ext- and add it to the requre section of the package.json file.

Example

{
  "name": "composer/example",
  "require": {
    "php": ">=5.4.0",
    "swiftmailer/swiftmailer": "5.3.0",
    "ext-imagick": "*"
  }
}

Note: Notice the specified version is set to *. The Composer docs state that:

Versioning can be quite inconsistent here, so it's often a good idea to just set the constraint to *.

Testing it out

Now to test I locally removed the imagick extension and ran composer again which returned:

Loading composer repositories with package information
Updating dependencies (including require-dev)
Your requirements could not be resolved to an installable set of packages.

  Problem 1
    - The requested PHP extension ext-imagick * is missing from your system.

Conclusion

With that in place now I can track these dependencies in the future. It would be nice to have it handle the installation of the missing extensions but at least knowing makes things a whole lot easier.

Setting up a NodeJs development environment on Ubuntu 14

Tue, 18 Nov 2014 00:00:00 -0500

If you are like me the first thing that comes to mind when installing a new application is to fire up apt and download it from the repository. I mean why not get all the benefits of simple updates and configuration. Well quickly I noticed there were issues running npm and permissions. Npm will warn you when running sudo npm install -g and in my experience ignoring warnings is not the best way to get started with something.

NodeJs setup without sudo

After a bit a research I found a link to a Github Gist with instructions on how to configure your dev without having to worry about sudo. https://gist.github.com/isaacs/579814#file-node-and-npm-in-30-seconds-sh

I chose the first option which worked like a charm but it is worth a read as there may be one better suited for your needs.

Conclusion

And that’s all there is so far. Hope this can help save someone a little time and as I find more tips I will come back and update things.

Why I decided on Jekyll and GitHub pages

Wed, 01 Oct 2014 00:00:00 -0400

Over the years I have tried various platforms to store my ideas. Wordpress, trac, redmine, blogger and a few others in between and although they are all great platforms often little issues that made the process cumbersome.

With that in mind I started searching again with a few new requirements:

I don’t want to host the software or worry about keeping it up to date with security patches.
Styling and updating needs to be fast and easy. Without the need to learn a complicated theme format and variables.
Support local development that is simple to setup and sync between the various computers I use.
Syntax highlighting for code samples with support for a good set of languages.

And after a bit of research it appears that I have found my candidate.

Setting up Jekyll and GitHub pages

There are a ton of different online resources covering the setup and install process so I won’t go to much into detail on that front. Instead I here are links to the pages and tutorials that I followed to get started.

jekyllrb.com - The Jekyll website
pages.github.com - General instructions on how to get your initial GitHub pages repository setup.
jekyllbootstrap.com - All the tools needed to get a working scaffold very quickly. Also provides rake tasks to help with common tasks.