Mr Branding

Wednesday, June 29, 2016

Elixir’s Ecto Querying DSL: Beyond the Basics

This article builds on the fundamentals of Ecto that I covered in Understanding Elixir’s Ecto Querying DSL: The Basics. I'll now explore Ecto's more advanced features, including query composition, joins and associations, SQL fragment injection, explicit casting, and dynamic field access.

Once again, a basic knowledge of Elixir is assumed, as well as the basics of Ecto, which I covered in An Introduction to Elixir’s Ecto Library.

Query Composition

Separate queries in Ecto can be combined together, allowing for reusable queries to be created.

For example, let's see how we can create three separate queries and combine them together to achieve DRYer and more reusable code:

SELECT id, username FROM users;
SELECT id, username FROM users WHERE username LIKE "%tp%";
SELECT id, username FROM users WHERE username LIKE "%tp%" LIMIT 10, 0;

offset = 0
username = "%tp%"

# Keywords query syntax
get_users_overview = from u in Ectoing.User,
  select: [u.id, u.username]

search_by_username = from u in get_users_overview,
  where: like(u.username, ^username)

paginate_query = from search_by_username,
  limit: 10,
  offset: ^offset

# Macro syntax
get_users_overview = (Ectoing.User
|> select([u], [u.id, u.username]))

search_by_username = (get_users_overview
|> where([u], like(u.username, ^username)))

paginate_query = (search_by_username
|> limit(10)
|> offset(^offset))

Ectoing.Repo.all paginate_query

The SQL version is quite repetitive, but the Ecto version on the other hand is quite DRY. The first query (get_users_overview) is just a generic query to retrieve basic user information. The second query (search_by_username) builds off the first by filtering usernames according to some username we are searching for. The third query (paginate_query) builds off of the second, where it limits the results and fetches them from a particular offset (to provide the basis for pagination).

It's not hard to imagine that all of the above three queries could be used together to provide search results for when a particular user is searched for. Each may also be used in conjunction with other queries to perform other application needs too, all without unnecessarily repeating parts of the query throughout the codebase.

Continue reading %Elixir’s Ecto Querying DSL: Beyond the Basics%

by Thomas Punt via SitePoint

Introduction to Developing jQuery Plugins

You've probably worked on interactive components before, like sliders, galleries or interactive forms. While you might be creating these on a site-by-site basis, one great time saver is to build your functionality as a jQuery plugin to speed up your development.

jQuery plugins let you define your functionality once and then drop it into your projects as needed, getting you up and running faster.

We're going to look at how to build your own jQuery plugin. We'll look at all the areas you need to know to get you up and running building plugins in no time.

We'll be using a plugin I've created called fancytoggle to showcase the different parts of a plugin. It's a simple plugin for toggling the visibility of nested elements, such as list items, to create accordion-style widgets for things like FAQs. The overall idea is about the concepts of plugins, but this example should help you see how it all works in practice.

See the Pen FancyToggle by SitePoint (@SitePoint) on CodePen.

A Plugin Approach: The Advantages

The core concept here is to create something extensible that you can add to your projects to give you quick functionality. jQuery's plugin functionality simplifies the process of building reusable code.

One of the strengths of these plugins is that they let the developer define several options that can be used to customize the functionality. You might create several options that change the way your plugin operates entirely, or you might just define a few to give the user a bit more control for styling or layout. With plugins, this choice will be up to you.

Developing jQuery Plugins

Let's run through the steps needed to register a new jQuery plugin. We'll use our example plugin, fancyToggle, so you can see how it's all put together.

Creating our function with $.fn

jQuery plugins work by registering a function with the name you want to call to trigger your plugin (for example, you call jQuery's inbuilt .width() or .height() functions when you want the width / height returned)

We attach our function to jQuery's $.fn object to make it available to the global $ object. This registers our function and lets it be called on objects or selections.

//registering our function
$.fn.fancytoggle = function(){
  // ...
};

That's all there is to it! You now have a new method you can call from jQuery's $ object. Right now, it won't do anything, but you can call this method wherever you like, for example on a selector:

//Call fancytoggle on this element
$('.my-element').fancytoggle();

You can register as many functions as you want with $.fn, however its good practice to avoid registering more than one function unless the plugin does distinctly different tasks.

Multiple collections and looping

An important thing to understand is that when your plugin is called it might be applying itself to either a single element or to several. For example with our plugin, if we are applying fancytoggle() to several different items we will have a collection to process within our function.

To process each element we just need to loop through the collection using jQuery's $.each function:

Continue reading %Introduction to Developing jQuery Plugins%

by Simon Codrington via SitePoint

Introducing the CSS text-align-last Property

Sometimes tiny details that mostly go unnoticed can make or break the user experience. This can include subtle text shadows applied to a headline or proper spacing between different elements on a web page.

The text-align-last property is useful in this respect. It specifies how either the last line of a block or the line right before a forced line break will be aligned. This is important because the last line in a paragraph generally doesn't have enough text to fill up the entire space. You may or may not notice the changes but it will improve the overall look of your website.

This tutorial will cover all the aspects of the text-align-last property including acceptable values, support and browser specific behavior.

Usage and Possible Values

It is pretty simple to use text-align-last in your projects. Here is a basic snippet to align the last line of text to the right:

.intro-graph {
  text-align: justify; // Required for IE and Edge 
  text-align-last: right;
}

This property has seven possible values. You are probably familiar with the usual left, right and center values. They align the text in the last line to the left, right and center of the container.
The following demo shows the differences between these three values:

See the Pen text-align-last — Example 1 by SitePoint (@SitePoint) on CodePen.

The fourth value, justify, aligns the last line in such a way that the text aligns its left and right edges to the left and right edges of the container. This is achieved by inserting an appropriate amount of space between words when necessary. Depending on the amount of text, you can use this property to completely fill the space on the last line without too much gap between words. The text in the second paragraph is also justified but since the last line only contains one word it is aligned to the left.

See the Pen text-align-last — Example 2 by SitePoint (@SitePoint) on CodePen.

While left aligning the last line of text works for languages that are read from Left to Right (LTR), it will be wrong to do so with RTL languages. In such cases, assigning the values left or right can cause issues when you don't know the language to be used beforehand.

Fortunately, you can use the keyword start to align the text to the starting position of a line based on the direction of text. This implies that setting text-align-last to start will left align the text of LTR languages and right align the text of RTL languages. Similarly, you can use the value end to align the text to the ending position of a line based on the direction of text. This will right align the text of LTR languages and left align the text of RTL languages.

See the Pen text-align-last — Example 3 by SitePoint (@SitePoint) on CodePen.

The default value for this property is auto. In this case, the text inside the last line is aligned using the value of the text-align property unless text-align is set to justify. When set to justified, the text is justified only if the value of the text-justify property is set to distribute. Otherwise, the text is start aligned.

Continue reading %Introducing the CSS text-align-last Property%

by Nitish Kumar via SitePoint

Disco with Design Patterns: A Fresh Look at Dependency Injection

Dependency Injection is all about code reusability. It's a design pattern aiming to make high-level code reusable, by separating the object creation / configuration from usage.

Illustration of people's outlines dancing in a disco

Consider the following code:

<?php

class Test {

    protected $dbh;

    public function __construct(\PDO $dbh)
    {
        $this->dbh = $dbh;
    }

}

$dbh  = new PDO('mysql:host=localhost;dbname=test', 'username', 'password');
$test = new Test($dbh)

As you can see, instead of creating the PDO object inside the class, we create it outside of the class and pass it in as a dependency - via the constructor method. This way, we can use the driver of our choice, instead of having to to use the driver defined inside the class.

Our very own Alejandro Gervasio has explained the DI concept fantastically, and Fabien Potencier also covered it in a series.

There's one drawback to this pattern, though: when the number of dependencies grows, many objects need to be created/configured before being passed into the dependent objects. We can end up with a pile of boilerplate code, and a long queue of parameters in our constructor methods. Enter Dependency Injection containers!

A Dependency Injection container - or simply a DI container - is an object which knows exactly how to create a service and handle its dependencies.

In this article, we'll demonstrate the concept further with a newcomer in this field: Disco.

For more information on dependency injection containers, see our other posts on the topic here.

As frameworks are great examples of deploying DI containers, we will finish the article by creating a basic HTTP-based framework with the help of Disco and some Symfony Components.

Installation

To install Disco, we use Composer as usual:

composer require bitexpert/disco

To test the code, we'll use PHP's built-in web server:

php -S localhost:8000 -t web

As a result, the application will be accessible under http://localhost:8000 from the browser. The last parameter -t option defines the document root - where the index.php file resides.

Getting Started

Disco is a container_interop compatible DI container. Somewhat controversially, Disco is an annotation-based DI container.

Note that the package container_interop consists of a set of interfaces to standardize features of container objects. To learn more about how that works, see the tutorial in which we build our own, SitePoint Dependency Injection Container, also based on container-interop.

To add services to the container, we need to create a configuration class. This class should be marked with the @Configuration annotation:

<?php
/**
 * @Configuration
 */
 class Services {
    // ...
 }

Each container service should be defined as a public or protected method inside the configuration class. Disco calls each service a Bean, which originates from the Java culture.

Continue reading %Disco with Design Patterns: A Fresh Look at Dependency Injection%

by Reza Lavaryan via SitePoint