Using NPM as a Task Runner.

In our website we may have some commands that we need to use over and over again.  Let’s say for example that we want to uglify a JS file .  We can write a command for that like . 

‘node_modules/.bin/uglifyjs src/models/* src/frontend.js -m -c -o build/app.js’  

I can then add this to the scripts object in the package.json  

“scripts”: {

“uglify”: “uglifyjs src/models/* src/front.js -m -c -o build/app.js"

”,

Tip: you can run files sequentially with ‘&&’ or the same time with ‘&’

For 

“build”: “npm run copy-files && npm run uglify"

Using Javascript to create dynamic styling choices

Here's a little bit of code but the use of this goes well beyond just matching up a couple of heights like I have here .

I'll be using posting up some more examples of how to use it for other calculations soon.

 
var rowHeight = $(".views-row-first").height();
            // now to write that value into the css
            $(".offer-cards .match-heights").css("height", rowHeight);
        } 

Drupal 7 Changing the tag attributes in an image .

Here I needed to change a tag inside an image. the 'foaf:Image' and replace it with a default tag instead. Here's my code.

function MYTHEME_preprocess_image(&$variables) {

  $image_attributes_array = $variables['attributes']['typeof'];

  if ( in_array('foaf:Image', $image_attributes_array )) {

    foreach ($image_attributes_array as $key => $image_attribute) {

      if ( $image_attribute == 'foaf:Image') {
        // start: find out what filetype the image is and make a tag accordingly
        $image_file_type_array = explode('.', $variables['path']);
        $image_file_type = end($image_file_type_array);
        $tag = 'image/' . $image_file_type;
        // end:
        $variables['attributes']['typeof'][$key] = $tag;
      }
    }
  }
}

If you're interested in the post you may be intereseted in ' SEO Drupal Best Practice '