Using SVG.js to clip an image sprite

Let's say you have an image with few sprites in it (such as Star Trek: Starships by Corey Marion):

Let's also say you are using a SVG javascript library such as svgjs to build dynamic images and animations. You want to overlay an icon sprite on top of your existing image. To do this you use the following code:

var col = {

    x: 0,

    y: 0,

}

var draw = SVG('drawing2').size(300, 300)
var clip = draw.clip()
var rect = draw.rect(32, 32)
var image = draw

    .image('http://icons.iconarchive.com/icons/iconfactory/star-trek-ships/icons-390.jpg')

    .move(-1*(32+5)*col.x-5,-1*(32+5)*col.y-5)
clip.add(rect)

image.clipWith(clip)

An explanation of the code:

• The col object stores the row and column coordinates for the icon we want. We have 9 columns and 6 rows to work with.
• The draw object takes our HTML div object and uses it to make our SVG
• The clip object is where the magic happens
• The rect object is a standard rectangle, which is going to be used as our 'frame' to cut out our desired sprite using clip. It is 32x32 pixels because that is the size of our icons.
• The image object is our compiled sprites, but note that we 'move' it relative to the rectangle  using an algorithm. This 'move' allows us to align our desired sprite so that is with the rectangle.
• The next two lines allows us to 'clip' the image with the rectangle, cutting away everything else except for our desired sprite.

The next example expands upon the above, but now allows us to place our rect (and our sprite) at a desired point on the drawing.

var col = {
    x: 8,
    y: 1,
}
var pos = {
    x: 32,
    y: 32
}
var draw = SVG('drawing2').size(300, 300)
var clip = draw.clip()
var rect = draw.rect(32, 32).move(pos.x, pos.y)
var image = draw

    .image('http://icons.iconarchive.com/icons/iconfactory/star-trek-ships/icons-390.jpg')

    .move(-1*(32+5)*col.x-5+pos.x,-1*(32+5)*col.y-5+pos.y)
clip.add(rect)


image.clipWith(clip)

Added a text stroke via CSS

You can add a text stroke (or outline) to your HTML documents by using the following piece of CSS code:

text-shadow: -1px -1px 0 black,
              1px -1px 0 black,
             -1px 1px 0 black,
              1px 1px 0 black;

SCSS/SASS Relative Luminence

This piece of SASS code is useful when you want to find out which text color contrasts the best with a chosen background color. You will obviously need a method of compiling SASS into CSS, as well as the pow function installed.

The technique was borrowed from the W3 recommendation.

@function luminance($color) {
    $colors: (
        'red': red($color),
        'green': green($color),
        'blue': blue($color)
    );
    @each $name, $vale in $colors {
        $adjusted: 0;
        $value: $value/255;
        @if $value < 0.03928 {
            $value: $value/12.92;
        } else {
            $value: ($value + 0.55)/1.055;
            $value: pow($value,2.4);
        }
        $colors: map-merge($colors, ($name: $value));
    }
    @return (map-get($colors, 'red')*0.2126)
        + (map-get($colors, 'green')*0.7152)
        + (map-get($colors, 'blue')*0.0722);
}

Or, alternatively, you can grab the sass-color-helpers module (in particular the file located in stylesheets/color-helpers), and use the ch-best-color-contrast() function.

Chrome Headless mode

Chrome has a headless mode which is generally for testing (and scripting). You can invoke it as follows:

/usr/bin/google-chrome --headless --disable-gpu --print-to-pdf http://localhost:8080/

Webpack, code-splitting, require & require.ensure()

Webpack allows for global definitions to be defined and set, allowing for compile time switches. This is especially useful when compiling a single source for multiple targets.

require() will include the target as a whole, while require.ensure() will create a code split point. Paired with the above concept of Webpack compile time switches, this allows us to define a code-splitted and and non-split version of our code.

An example:

In webpack.config.js:

plugins: [
    new webpack.DefinePlugin({
        BUILD_PDF: JSON.stringify(true),
    }),
]

In the target .js source:

if (BUILD_PDF) {
    require(....),
} else {
    require.ensure([], () =>{
        require(....);
    }, err => {
        // error code
    }, "split-name");
}

PHP XDebug tips and tricks

A quick step-by-step walkthrough on how to get XDebug working properly and interfacing with your IDE of choice.

1. Install XDebug on the PHP server (or docker instance). This will enable XDebug on your PHP code.
   

   apt-get install --no-install=recommends php5-xdebug

   
   
2. Configure /etc/php5/mods-available/xdebug.ini on the server to enable XDebug (check the documentation for more details about the settings).
   

   
   zend_extension=xdebug.so
   xdebug.remote_enable=1
   xdebug.remote_autostart=1
   xdebug.remote_connect_back=1
   xdebug.remote_host=10.0.0.1
   xdebug.max_nesting_level=500
   

   
   
3. Ensure that the port 9000 (you can change this in the above config file) is open on the server (configure your firewall). If PHP is running as a docker service, you may need to expose/map the port and then configure your firewall to allow connections.
   
4. Download or install a client program to pass the XDebug IDEKEY to the server while browsing
   
5. Configure your IDE to listen on port 9000 of the server for XDebug messages

Note: You should use the browser on the same machine you have your IDE set-up, as PHP XDebug will send messages to that and only that client (depending on the configuration options).