Blog

Learning ES2015

By pferlito

June 3, 2016

JavaScript is changing. In June of 2015 the newest specification of JavaScript known as ECMAScript 2015 or ES2015 was ratified. This is a significant change and the first major update since 2009.

The main browsers have been adopting the new specification in their latest versions and new tools are evolving to allow us to write ES2015 code today.

I have been exploring the many exciting features of ES2015 and will use this blog to report my finding. In this first installment I will cover changes to variable declarations and scoping as well as the new const construct.

Variable declaration and scoping

ES2015 adds the ability to declare block scoped variables. Blocks in JavaScript are anything between {}. Block scoped variables are variables that are only accessible in the block in which they are declared. To fully understand the change let's review how traditional JavaScript handles scoping.

The traditional way - var

Before ES2015 JavaScript variables only had function scope, which means they were accessible throughout the function in which they were declared even if they were declared inside a block and intended only for use in that block. Consider this example code:


for (var i=0; i <= 10; i++) {
  if (true) {  // create block scope
    var dub = i * 2;
  }
}
console.log(dub); // outputs 20
console.log(i);   // outputs 11

In traditional JavaScript this will output 20 and 11 because the dub variable is accessible outside the if statement block and the i variable is accessible outside the for loop block. This often causes variable name collisions and other unexpected results.

The new way - let

ES2015 introduces block scoped variables. These are variables that are limited in scope to the block in which they are declared. Now the same example using the new let syntax:


for (let i=0; i <= 10; i++) {
  if (true) {  // create block scope
    let dub = i * 2;
  }
}
console.log(dub); // error - undefined variable dub
console.log(i);      // error - undefined variable i

This produces an error in both cases because dub is limited to the if statement scope and i is limited to the for loop scope. This limits the possibility of variable name collisions.

It's important to understand that var variables will continue to use the old scoping rules.

Declaring Constants with const

Unlike other languages JavaScript has not had constants, values that the program cannot alter during its execution. Now with ES2015 we have them with the const keyword. But unlike other languages a JavaScript const's value is not immutable (cannot be changed) but the identifier cannot be reassigned. For example:


const x = 0;
x = 1; // fails

const y = [0,1,2];
y.push(4); // we can change the array

const y = {firstName: 'Paul'};
y.firstName = 'Peter'; // we can change object keys
y = {color: 'red'}; // this fails

So for arrays and objects (which are the same thing in JavaScript under the hood) we can alter the values as long as we don't reassign the const to a new value. For primitive types we cannot alter the value.

That wraps up this installment of the series. Stay tuned for the next installments in the coming days.

Read More

Learn ES2015
MDN let
MDN const

More

Drupal Views - Taxonomy Term ID Depth Modifier

By pferlito

November 18, 2014

When creating a Drupal view with taxonomy term filtering it is possible to vary the results of the view by using contextual filters. One little-understood contextual filter is the Taxonomy Term ID Depth Modifier. It's used in conjunction with the "taxonomy term id (with depth)" contextual filter to make the views results dynamic.

In particular the Taxonomy Term ID Depth Modifier option allows you to reuse the same view to query nodes according to varying depths in the taxonomy tree. For example let's say this is your taxonomy.

North America (term id:7)
- Canada
- Mexico
- United States
-- California
--- San Francisco
--- Los Angeles
--- etc

With a term id of 7 and a depth modifier of 0 your query would include nodes tagged with "North America". With a depth modifier of 1 your query would include nodes tagged with "North America", "Canada", "Mexico" and "United States". The term depth modifier is passed as the second argument (Contextual Filter in Drupal 7) to the view, separated by a slash. So if the term id is 7 and the depth modifier is 2 the view's url would be "view_name/7/2".

More

Backups In Real Life

By juliavdw

October 19, 2013

Intro

We hear a lot about the importance of backups for our computers but we never know how well we are protected until a problem arises. I recently experienced this "live test" of my backup system when my hard drive failed. In case this info will be helpful to someone, I duly present the experience.

The System

Here’s what I have going on for a work environment:

Primary machine:

iMac circa 2010, runs OS X 10.6.8

  • Backs up to Time Machine on a NAS drive that is connected to my office network.
  • Subscription to Carbonite for immediate access to files not in Dropbox or git repos. Carbonite backup includes external hard drives with older files and my Parallels Windows installs.

Secondary machine:

Macbook Pro, circa 2011, runs OS X 10.8.5

Backs up to Time Machine on the NAS drive

The Problem

One recent Tuesday, my primary machine would not start up. It would get to the spinning wheel on the white screen, hang and eventually show a folder with a question mark.

I looked this issue up on ye olde internette, and found some entries on support.apple.com on what this problem is and how to troubleshoot it. I went through the steps on this page, but found that my computer did not seem to react in the expected way, so I could not get to the utilities menu for instance, to repair my hard drive or permissions. I also went through the troubleshooting process listed for similar problems.

After exhausting my self-help capacities and coming up each time with the WSOD, I called Apple Care. The technician went through the processes again with me, and although we were able to get farther along, she also came to the conclusion that my hard drive had simply failed. She made an appointment for me at my nearest Apple Store, which is not actually that near, but I was at this point more than happy to get over there.

At the Apple Store I found that there was actually a recall out for my hard drive, and so they replaced the drive for me.

The Interim

There was a 1-3 day wait for my repaired iMac, so I was going to have to try to get my work done on my secondary system. For most projects, this is not a big problem. All my reference files are in Dropbox, and I have my to-dos synced with Omnifocus. My emails all come through Mail.app and are synced using IMAP, so no worries there.

As for setting up my local web development environment, Just about everything is in a git repo, so cloning into git and getting my most recent changes is no problem, assuming I had pushed my most recent changes. Note to self: always push changes at the end of a work session!

Getting the databases for my drupal and wordpress installs is usually a matter of grabbing it from a staging remote server, but there are times where I could use my local backup. Note to self: add local database backup folder to Carbonite.

The other very important file I need is the timesheet file with my most recent times and projects. I did not find this file in Dropbox folder, so I went to Carbonite to dig around in folders on my iMac hard drive not in Dropbox. I did find this file there, but for whatever reason, Carbonite had not updated this file in several weeks.

I could log new work, but could not refer to total amount spent on each project or invoice for hours. Note to self: back this file up in Dropbox to avoid this problem in the future.

Happily it only took one day to get my iMac back, but in the interim I was able to get some work done simply because I have a secondary machine, Dropbox, git and carbonite.

The Restore

My failed hard drive had been replaced with a new one with snow leopard installed. I went through the welcome spiel until I got to the part where you can select a time machine backup to restore. I am glad I started this process in the evening because it took a bit over 8 hours to restore.

The good news though is that there was my computer ready and waiting with all my stuff in the morning. There were only a few apps that I had to re-configure or re-install. Command line git was one of them; might have been the only one essential to my work that I had to re-install from scratch again. That process was pretty quick though, and in all it was a fairly painless process.

Summary

Here are the conclusions I reached through this experience:

  • Time Machine Good! Keep backing up every machine onto the NAS drive. That worked great.
  • Carbonite is OK. It was nice to have a place to search for files unconnected to my mac install that were not in Dropbox. (To search in time machine you have to be logged into that particular install, so if you are locked out of your machine there’s no access to your backed up materials). However I was not impressed by the important file I needed not having been updated for a few weeks.
  • Dropbox is fantastic for access to current and updated materials. Everything that I had saved into a dropbox folder was up to date and accessible from all machines.

The first thing I did when I had my computer back, other than make sure all was configured properly, was to ensure the carbonite backup was set to collect the most important items for my work. The second thing was to create a Hazel rule that copied that important file into dropbox whenever it was updated. So now it can live in /Documents where it belongs but I will always be able to start with current content from alternate systems.

The only thing that I could maybe add to my backup system would perhaps be a redundant storage of Time Machine backups on a server that is not in the same building as my computers (in case of fire or other disaster). I am open to suggestions as to a convenient and cost effective way to backup my backups.

More

Drupal, SASS and Compass are Friends

By juliavdw

April 4, 2013

When I first learned about SASS, it was pretty exciting to think of how efficient and powerful my theming was sure to become. However before I was able to make that a reality, I needed to answer the question: “How does working with SASS and Compass fit in to the Drupal theming workflow?”

Since then I have developed a process that works well for me. At last Tuesday’s Drupal Users Group meeting in Santa Cruz, I presented this short demo as part of our Theme round-up. I offer the text below as well as a PDF download.


My Process

Terminal.app:

cd work_folder/
git status
git pull

New terminal window

cd theme_folder/
compass watch

Coda.app:

styles.scss

…coding ensues…

Cmd + S

Check compass terminal to see that css has compiled without errors

Preview in browser

Terminal.app:

git status
git commit -am “descriptive comment”
git pull
git push
git status //just for good measure

to end compass watch:

Ctrl + S


Creating a custom theme with SASS and Compass

Terminal.app

cd local/sites/all/themes/
compass create theme_name

Compass will generate a theme folder with starter scss files for you

To use tools like the flexible grid system Susy, you can add this command when you create your theme:

gem install susy
compass create theme_name -r susy -u susy

or you can simply import the framework in your config.rb file:

require “susy”

Making the compass project a custom Drupal theme

Simply add the .info and template files a la building a scratch or child theme, and theme away!


Using AdaptiveTheme with SASS and compass

Initial setup the “traditional” way:

  1. Copy and paste at_subtheme, it doesn’t matter where you place the copied version as long as its in a theme directory. For example if you are using sites/all/themes you can place it there - so you end up with:sites/all/themes/footheme.
  2. Rename the info file and edit the info file details. For example lets assume you want your theme to be called “footheme”, the name of the info file will be “footheme.info”. Once you have renamed the file open it up and change the “name” to footheme and change the description to suit your taste.
  3. Edit the theme-settings.php and template.php files - here we will be replacing “adaptivetheme_subtheme” with your themes name, in this case “footheme” - this must match the name you gave to the info file. The easy way is to just use search and replace.

Using Drush to create your AT subtheme:

drush adaptivetheme “Your Theme Name” yourthemename

…edit theme at will…

Ye Olde Caveat Sectionne

Adaptive theme has a ginormous collection of settings and configurations for building your site. It has layouts and tools for panels as well as tools for templateing “normal-style”. This means there will be a bunch more files in your theme folder than the theme actually uses.

When you save your theme configurations, AT generates a lean theme folder for you, containing only the files your theme is using. This is by default placed in /sites/default/files/adaptivetheme/. If you would like your theme files to be compiled elsewhere, like within your /sites/all/themes/theme_name folder, you need to find the configuration option in settings and switch that over. Depending on your hosting service, the proper functioning of your theme may depend on this detail!

Using the preset layout options for the basic device sizes in the theme configuration is fast and easy, but is not purely “responsive”. It is, as the name states, “adaptive”, where you have a small number of preset breakpoints.

If you require a purely responsive theme, which has numerous breakpoints based on where the design breaks rather than our notions of how big the device screens are, we recommend a more spare base theme to build up the responsiveness with your SASS files rather than with theme configurations. You may need to make this theme a compass project yourself as the simpler ones don’t all come with SASS.

Summary

With AT you can get an adaptive, SASS and Compass using theme up for your site in relatively short time period. There is a bit of learning curve to get used to how all the options work and to see which are best for your project. However this is a good choice for tight timelines.

More