Vue.js

Introduction to Vue.js 2 Filtering with Lodash

Filtering in Vue.js is simple thanks to the filter function built into Vue. Let’s take a look at an introduction filtering with Vue.js and Lodash.

Setup

Each Vue app requires a HTML element to bind with. Generally the HTML element is a div with a unique id attribute. In this example the Vue instance is bound to simple-filter.

<div id="simple-filter">
</div>
var app = new Vue({
    el: "#simple-filter"
});

Basic list unfiltered

Next let’s add default data and display the list.

You’ll notice v-for on the li element. This essentially means for each element in the array do something. In our case print the element between the li element.

<div id="simple-filter">
    <ul>
        <li v-for="animal in animals">{{ animal }}</li>
    </ul>
</div>

var app = new Vue({
    el: "#simple-filter",
    data: {
        animals: ['Zebra', 'Lion', 'Shark', 'Dog', 'Bear', 'Monkey']
    }
});

Produces the following list:

  • Zebra
  • Lion
  • Shark
  • Dog
  • Bear
  • Monkey

Filtering

Vue.js has built in functionality to filter arrays. The basic idea is to iterate over each element with a condition. If the condition is true the element stays in the array. If the condition is false the element is removed from the array.

Within the v-for instead of using the regular animals array in the previous example it is referencing a computed property filteredAnimals. Using the computed property ensures the list is always up to date when searchText is updated.

<div id="simple-filter">
    <input type="text" v-model="searchText" />
    
    <ul>
        <li v-for="animal in filteredAnimals">{{ animal }}</li>
    </ul>
</div>
var app = new Vue({
	el: "#simple-filter",
    data: {
    	searchText: "",
        animals: ['Zebra', 'Lion', 'Shark', 'Dog', 'Bear', 'Monkey']
    },
    computed: {
    	filteredAnimals: function() {
        	var self = this;
        	return this.animals.filter(function (animal) {
            	    return _.includes(animal.toLowerCase(), self.searchText.toLowerCase());
            });
        }
    }
});

filteredAnimals updates itself when searchText changes due to the nature of Vue. The filter function on this.animals is provided by Vue. Each iteration of this.animals passes an animal element to the function. Within the function a true or false value should be returned. Returning true indicates keeping the element and false instructs Vue to remove the element.

In the filter function notice _. this is Lodash. In short Lodash is a library that contains commonly used utility functions such as the includes function. The includes function searches an array, object, or string for a given value. The value in this example is the user provided text searchText. In addition I’ve added a toLowerCase() because users may not always include capital letters. Forcing the compare to be case insensitive is useful for this use case but may not in every case.

Filtering the array does not actually update the animals array. Instead a new array is returned which is then returned from the filteredAnimals computed function.

Working example below:

How To Bind An Interface To An Implementation In Laravel

Binding an interface to an implementation promotes good coding practices. As a result the code is less coupled, more maintainable, and testable.

Why might someone want to bind an interface using Laravel? To put an abstraction between the application and the concretion. A concretion is a class that implements the interface. It is a specific implementation, in our example it will be Amazon S3 file storage provider. The application doesn’t care which implementation it receives just that it receives an implementation with the guaranteed functions.

Lets build functionality to interact with files on a storage provider such as Amazon S3. Initially all files will be uploaded and deleted on S3 only. There are other ways to accomplish this and the main goal is to demonstrate how to bind an interface to an implementation and not so much the actual code to upload to a storage provider.

Create An Interface

The interface will determine which functions are available on the concrete implementation through the binding.

Create The Concrete Implementation

The concretion is an Amazon S3 file storage provider. This file is where Amazon specific upload/delete functionality goes.

Create The Laravel Service Provider

The Laravel service provider is the mechanism that binds the FileStorageInterface to the S3FileStorage class implementation. This means if we use dependency injection for the FileStorageInterface or use App:make it will automatically resolve to the S3FileStorage class.

Using The Interface

In the below example we are not using the implementation directly. Instead it is automatically resolved through the service provider which returns the concrete implementation. Laravel will automatically resolve dependencies if they are in the __construct() functions. We can see below that the controller doesn’t know about Amazon and nor should it. I am only using the controller in this example to provide a demonstration. There are other places where we would use the storage provider that might better organize the code.

Final Thoughts

If we wanted to swap out for Dropbox or some other provider the impact is minimal, create a Dropbox implementation and change the provider. The application would now use the Dropbox implementation instead of the Amazon S3 implementation.

Following this pattern can also help separate the application from Laravel which could make reusing this code in other projects easier than if the Amazon S3 code were included in a model directly. Definitely think about how to best structure your code and not to fall into the framework convenience trap of putting everything in a model, controller or view. In most cases there are better places for code than those 3 areas.

Framework Convenience Trap

The idea is “x” framework provides a level of convenience that can make developers sloppy.

This often happens because frameworks tend to make developing easier. So easy we forget to take a step back and figure out how all the pieces come together.

If the framework is modeled on the model view controller (MVC) pattern. The convenience trap for developers is adding unnecessary amounts of logic into controllers or models. It’s easy to do and get the work “done” and out of the way if no testing is involved. Generally the problem with putting unnecessary amounts of logic in controllers or models is hard to test which subsequently causes the application to be brittle.

For example:
Oh looky here something database related this needs to go in a model or hey this interacts with the user’s input this probably goes in the controller.

The framework should not be the application, but a portion that compliments the development.

Note: The above generally applies to larger apps and not small apps that may have a short lifecycle.

How to mitigate the framework convenience trap?

  1. Write tests for the application. If tests are written chances are the structure of the app is designed better.
  2. Learn software best practices.
  3. Don’t code in a silo. Talk to other developers.
  4. Realize no one has perfect code and let someone critique your code. DON’T TAKE IT PERSONAL.

Awesome list of free beginner, intermediate, and advanced programming courses

Programming is useful and important.

I like to compare programming to oil in that cars require oil to operate and business require programmers. If a business intends to compete most likely they have an IT team. Many times the competitive advantage for a company relies on technology. Most technology if not all requires software development.

Even if very basic programming interests you there are some awesome courses. Some courses are self-paced and some have deadlines.

Awesome list of courses

Laravel 4 Project On Shared Hosting

Laravel 4 is capable of running on a shared hosting environment. It’s a lot easier than you probably think.

  1. Login to your host and go to your home directory. This does not mean your public home directory, they are separate.
  2. Upload all the contents Laravel project EXCEPT the public folder to your home directory.
  3. Upload the contents of your Laravel public directory to your public directory on your host. The public directory is sometimes called public_html.
  4. Edit file paths.php located in the bootstrap folder so the public path matches the path to your public directory on your host.

After completing each of those steps you should now have a working Laravel 4 project on a shared hosting environment. This assumes the shared host has all the PHPmodules required to run Laravel as well. I was able to accomplish this on HostGator.

If you have any questions feel free to ask.

BSOD Windows 8.1 CRITICAL_STRUCTURE_CORRUPTION

Blue Screen Of Death (BSOD) an inevitable part of using a windows machine.

Today I received a BSOD with an error CRITICAL_STRUCTURE_CORRUPTION while working on my Android homework. The error wasn’t very descriptive and I wasn’t hopeful to find a resolution. I thought maybe this was random, but searched and fortunately Google lead me to  StackOverflow.

In the post it outlines the cause is possibly due to Intel Hardware Accelerated Execution Manager  (HAXM) software which is used to speed up Android emulators. The post also mentions to download the new updated Intel HAXM software through Intel and not necessarily Android SDK Manager. I had just updated through the Android SDK Manager prior to the blue screen with version 1.0.6. I thought the most recent version was just installed, but I was wrong. Intel’s site has 1.0.8 which apparently fixes the BSOD issue.

Here’s the link to Intel’s site for the most up to date version.
https://software.intel.com/en-us/android/articles/intel-hardware-accelerated-execution-manager

PHP Pages Displaying Code And Not Rendering Code

For some reason my server started displaying code instead of actually processing or rendering the code.

After playing around with the server I noticed the php5 module was missing from Apache.

If your code is displaying and not rendering you may have the same issue.

To install and enable it run the following command.

sudo apt-get install libapache2-mod-php5
sudo a2enmod php5

Then restart your apache. The restart command is different depending on the distro you’re using.
A simple Google search will help you.

 

This is the forum post that helped me fix my issue.

http://ubuntuforums.org/showthread.php?t=1546116&p=9681081#post9681081