Looking for more information on how to do PHP the right way? Check out PHP: The Right Way

Laravel News:
Installing Bourbon and Neat with Laravel Elixir
Oct 06, 2016 @ 10:25:09

On the Laravel News site a tutorial has been published showing you how to install Bourbon and Neat with Laravel's "elixir" functionality (a wrapper around the popular Gulp installation tool for Javascript and CSS library handling.

Laravel Elixir is a wrapper that simplifies working with Gulp, it makes compiling, concating, minifying and versioning your JavaScript and CSS files very fluent and easy.

Because many projects using Bootstrap, when you start a new Laravel project, you will find that it is included by default as a basic starting point, but Laravel does not dictate which JavaScript or CSS frameworks you should use. One alternative is Bourbon and Neat created by thoughtbot.

Bourbon is a mixin library for Sass and Neat is a Bourbon addon for creating semantic grids. In this tutorial let’s take a look at how to setup these tools with Laravel Elixir.

They start with a brief overview of the Bourbon tool, showing how it helps to reduce the amount of duplicate code in your source files. There's also a bit about Neat, a responsive grid library that makes it easier to keep your layout "clean and semantic". With those defined they get into the installation of these two packages with two different approaches:

  • First installing Bourbon/Neat via npm then importing them in the SASS config
  • Or installing them via npm, edit the Gulp configuration then import them relatively

With either of these methods in place the Elixir tool can then run the compilation right alongside the other sources and push the resulting CSS out the other side including the Bourbon and Neat functionality.

tagged: laravel install configure elixir bourbon neat semantic clean tutorial

Link: https://laravel-news.com/2016/10/installing-bourbon-neat-laravel-elixir/

SitePoint PHP Blog:
Meet Elixir, the Laravel Way of Compiling Assets
Nov 12, 2015 @ 10:41:45

The SitePoint PHP blog has a new tutorial posted introducing you to Elixir, the "Laravel way" of working with assets in your application and making it easier and more unified.

In today’s web applications, we use a wide variety of tools to speed up the development workflow while keeping the code base as lean as possible. [...] One such type of tool are preprocessors for CSS and JavaScript. [...] Besides preprocessors, there are also many tasks we as developers often have to do, including linting JS files, testing, concatenation, minification, just to name a few.

All this led to the creation of JavaScript-based task runners like Grunt and Gulp. [...] Gulp syntax is clean and easy to use, but there’s always room for doing things the easier way. Laravel 5 introduced Elixir: a Node.js based tool developed by Jeffrey Way, which manages our Gulp tasks the easy way.

They start with the requirements you'll need to get Elixir up and running, including Node.js and Gulp itself (it's a "frontend" for it, not a replacement). They talk about where Elixir assumes your assets will live and some examples of:

  • Compiling Less files
  • Compiling CoffeeScript files
  • Compiling multiple files at once
  • Using different source and output directories
  • Concatenation files

...and much more. They also show how to perform Jade->Blade compilation for templating and how to configure Elixir to match your needs. The post ends with a more "real world" example with a full site structure, how to run the tasks and some more advanced topics (like custom tasks and using the assets in Blade templates).

tagged: elixir tutorial introduction assets compile gulp nodejs

Link: http://www.sitepoint.com/meet-elixir-the-laravel-way-of-compiling-assets/

SitePoint PHP Blog:
Flexible and Easily Maintainable Laravel + Angular Material Apps
Sep 29, 2015 @ 11:58:19

The SitePoint PHP blog has a tutorial posted showing you how to combine Laravel and AngularJS to create flexible and easily maintainable applications on both the frontend and backend of the app. He also covers a topic he says other tutorials leave out: scaling.

In this article, we’re going to set up a Laravel API with Angular Material for the front end. We’re also going to follow best practices that will help us scale with the number of developers working on the project and the complexity behind it. Most tutorials cover this topic from another perspective – they completely forget about scaling. While this tutorial is not targeted at small todo apps, it is extremely helpful if you’re planning to work with other developers on a big project.

He includes a link to the final product in action and spends the rest of the tutorial walking you through it's construction. First he sets up the Laravel application, also installing the debug bar for easier debugging. He installs gulp, bower and the "laravel-elixir-angular" package to make creating the AngularJS frontend simpler. He shows how to create the folders for the Angular application and the creation of the gulpfile.js configuration to build out the app. He uses bower to install the latest Angular, builds out the main module and connections the frontend to the backend.

From there he starts building out the actual application that outputs some basic content, generated by Angular. He hooks in some other pieces of functionality and libraries including: ui-router, Restangular, Toast and the use of dialogs. He ends with a look at deploying the application and maintaining code quality via jshint, phpcs and JSCS.

tagged: laravel application angularjs tutorial maintainable application library elixir npm gulp bower

Link: http://www.sitepoint.com/flexible-and-easily-maintainable-laravel-angular-material-apps/

Laravel News:
Setting up Laravel Elixr with Bootstrap
Oct 31, 2014 @ 09:27:32

On the Laravel News site today there's a tutorial posted showing you how to set up an application that uses Elixir and Bootstrap for the layout of an application. Elixir is a wrapper for gulp, a build tool for node.js apps.

One exciting feature coming in Laravel 5 is the new Elixir package. At its core it is a wrapper around gulp to make dealing with assets easier. For my first look at this new tool I decided a good use case would be to setup Bootstrap and get everything working just like you would in a real world scenario. If you are not familiar, bootstrap includes three main components. CSS, JavaScript, and custom fonts. So we need to account for all those in our setup.

They walk you through the Elixir installation process (via node) of Gulp and setting up dependencies via Laravel's included "package.json" definition. He then shows how to install bower (another package manager) and use that to install the Bootstrap files (SASS version). Finally they show how to bootstrap these into your application's workflow - the SASS imported from bower, the fonts/javascript pulled in by gulp and finally the Elixir setup to merge them all together.

tagged: laravel elixir bootstrap bower gulp install configure tutorial

Link: http://laravel-news.com/2014/10/setting-laravel-elixr-bootstrap/

Zend Developer Zone:
Building Dashboards With PHP and Flex
Jun 02, 2008 @ 15:58:09

Jack Herrington has posted a new tutorial to the Zend Developer Zone today showing how to combine PHP, your database of choice and Flex to create a dashboard in your application.

Let's face it: Interactive graphs and dashboards have never been easy to put together on the web. Sure, there are graphing libraries out there for PHP, but to get something that looks really good and that a user can play with has been tough. Or at least, it was yesterday.

He shows how to create a simple Flex application that takes in XML data (from whatever backend, he uses a PHP script that uses DOM) and displays the information - his sample traffic data - as a graph. This graph is an extension of the Elixir library from ILOG and makes dropping information into graphs and charts simple.

Screenshots of the Flex side of things and code for the PHP side are both provided.

tagged: dashboard flex tutorial database elixir chart graph

Link: