A funny thing happened on the way to site-building

It all started when I tried to sql-sync my database from my local setup to my remote test server.

drush sql-sync @dev @test
ssh: Could not resolve hostname @dev: Name or service not known

hm. So I google my error and find an issue on the Drush Github project for the exact same problem. Awesome! it's already been fixed. So I just need to update drush.

Having previously installed drush as a git repository, I cd over to that dir and and do a git pull. yes? Well along the way I notice that the drush github page now suggests installing with Composer instead, so I decide to update to that process. Probably I could've just stuck with my previous method, but in the interest of doing things "the right way"... this is where I keep getting myself in trouble. Ok:

composer global update
#tried composer -V and global update just to see where I stood...
Warning: This development build of composer is over 30 days old. It is recommended to update it by running "/usr/local/bin/composer self-update" to get the latest version.
...
Composer could not find a composer.json file in /Users/E/.composer
...
drush (master)$ /usr/local/bin/composer self-update                                                             [Composer\Downloader\TransportException]                                  
  The "https://getcomposer.org/version" file could not be downloaded: allow_u
  rl_fopen must be enabled in php.ini...

Sigh. So I fix allow_url_fopen. I run composer self-update. I try to install drush again... composer.json?? It took a bit more research to get this right, and I honestly don't remember what I did now. But here's what it wound up as:

{
    "require": {
        "drush/drush": "dev-master"
    }
}


Swell. I think at this point I managed to run the command to get drush re-installed. Now I've got the version of drush with the fix for my original issue! or so I thought... I took a closer look at the code fix for the ssh problem, found that file in my install and compared. The code didn't match, but the hash when I had updated with composer showed it was the most recent version! I had the new updates, but I also had the old git clone of drush. Guess which one my shell was pointing at?

Eventually. Eventually I check which drush, where drush, what drush?? and find my bash_profile export PATH pointing in too many directions (wrong!: /Applications/drush/drush:/.composer/vendor/bin:), which if I'd been paying slightly more attention I might've noticed in step one of installing with Composer. Removed the old path, kept the .composer path and I think that's when it finally worked.

At least I'm pretty sure that's what happened. By the time I was done with this I had completely forgotten that I was trying to sql-sync. So I finally, finally got back to that and it actually just worked. So now I need to figure out pushing the rest of my initial local dev stuff up and after that it'll all be pushing code up and pulling data down.

It's going to be really weird doing front-end work after spending so much time on configuring and getting things to just function... one day at a time.

Getting up to speed on CSS tools

I did this backwards. It should have been mixins, Sass, Smacss, Compass, Singularity. Then again, sometimes starting and the end and working your way back lets you see the bigger picture and understand how it all fits together. Says the girl who started Drupal with core contributions.

Singularity (compass extension)- ratio-based grids (quick walkthrough video here), very easy to make different widths $grids: 1 2 3 2; Also can use px, pt. Integrates with breakpoint- add an @include breakpoint(30em){@include grid-span(2, 3);}. Very cool, super easy way to get responsive design out fast.

Mixins-  A mixin is an at-rule used to define a ruleset than can then be *reused* in other rulesets. Yay reusable code. I think mostly as a n00b I'm always surprised when things like this aren't a given- it makes perfect sense to be able to define a thing and then plug it in wherever you need that thing. But is this the same thing as the mixins Compass is using?

/* define a mixin */
@mixin .muffinstyle {
display: inline-block;
background-color: blue;
}
/* use a mixin */

p .bakery {
include: .muffinstyle;
border: 1px solid red;
}


ok, Stackoverflow question on the CSS at-rule here. So basically anything preceded by an @ is an instruction for the user agent, rather than styling rulesets. I've been using @media, @font-face and so on, but hadn't really thought about the construct itself. Here's MDN on at-rules and W3C on CSS syntax (this one's really helpful). There's a very handy graphic and description here on CSS statements and their subsets, at-rules and rulesets.

Compass- Ok, so there are CSS mixins, then there are Compass mixins... which are just a predefined set of CSS mixins? oh. And then Singularity pairs with Compass. I get it. /several hours of digging and reading later.

Sass- This also makes all kinds of sense. Things like variables to hold info in a more logical spot while you're writing, then output a fully fleshed out CSS file at the end. Saves on typing, mistakes, and again with the reusable code. Compass is for writing Sass. Got it. Wow, nesting. So logical, so tidy. Ah, and we're on the new version that uses curly braces, which seems a lot better than just indenting anyway. I do not generally approve of dropping semi-colons and such even if it *is* more minimalist.

Smacss- I really appreciate this- organizing, categorizing, approaching css in a logical fashion rather than throwing properties left and right and hoping it all works out. See my next post on approaching a problem, too. I might disagree with a couple things Snook says (and this book is a little old already), but his general point is spot on. I think this will fit into my brain even better after my next two or three tabs, too... Things start getting interesting once we drill down to the "module" level. Goals: increase semantics and decrease reliance on specific HTML

Next: More depth from Legacy CSS with Sass and SMACSS and modular SASS development using SMACSS and BEM.

In other predictable news, something here needed homebrew to install... I think it was a Ruby update. I have Ruby 1.8.7, but would like to have the current. Probably doesn't matter. But I think to update I need homebrew and homebrew last I checked needed xcode and 10.6.8 does not the xcode have. BUT. I think I can install the sass/singularity/compass package with just ruby. I hope. Later. Not now. Because this is always ridiculous, and generally why I'd rather stick with simple, low-level stuff.

Next: Creating a Drupal 8 Theme with Sass, Singularity & Breakpoint

Useful things I just did

Environment setup for ssh stuff on my server. Eventually found and edited my bash_profile. Remembered how to vi and unix properly. Can't remember what I was originally trying to do.

Setting up SSH. Basic stuff. Understanding SSH.

Oh yeah, here's where I started, Drupal on Dreamhost.

/me clambers back out of rabbit hole to find a new one to explore...

oh, and adding an alias to my bash_profile alias ll='ls -la' for more verbose file listings. Cause otherwise I can't *see* .bashrc, say, without at least ls -a.

Crash course: clone local, push to server, bam, test site.

More or less. Reminder: Installing Drupal. Includes db setup.

Page two of install gives me "no data from server." ... what? the first page is fine, but I click "english" and it gives up? It's not even a WSOD!

Sweet bunnies. Upgraded MAMP, again, broke things. Eventually remembered to change my mysql password in /Applications/MAMP/bin/phpMyAdmin/config.inc.php (I had changed it away from 'root' at some point, for obvious reasons).

wooo finally got through the install script. Since I've only done core stuff before I don't really know what all I should use for a production site- username, site name, that sort of stuff. Just going to wing it.

So this is probably one of those stupid questions, but do I have to go through the install script every time I push up from dev to stage and prod?

So trying to push from my local dev environment to my test directory on my dreamhost server: fails, gives me a fatal, no directory, not a git repo message. I think I just had my ssh url written wrong, so switched from ssh://user@server/files/stuff.git to user@server:files/stuff.git and that seems to work. But now I'm not quite sure what that did for me- "This directory is not the working tree, where you edit and commit code. Rather, it is simply the central location for the git objects and history..." ok, so I still need to clone from there to test site. hm.

ok, so now that I'm drawn myself a nice diagram of where my branches and repos and whatnot are, plus associated dbs, I think I can keep moving along... somewhere I had a thing for using drush to keep sites synched... Can't handle adding that into the mix right now, just going to try getting my site up and running first.

With a little help from the git pages, cloning into mysite/test so I can try just a plain install on a live site with a real db. Then I just need to figure out how to pull the db back to local (I think an export will have to do for now, lest I find myself in hours of drush trouble).

... I should really probably be doing this with D7, not a totally random variety of D8. I'll just hit mysite/test and run through the install script real quick... My php installation is too old??? you can't be serious. *checks dreamhost info* ... php 5.2.17.

*Head-desk*

Nobody say anything. TBC after some coffee, methinks.

Useful bits of Drupal doc + site building init

Warning: contents are entirely stream of conscious/notes.

The best practices guide for Drupal has a lot of very important points to consider, but for my own technical edification, I'm focusing on just a few aspects. Handy list of core modules to become familiar with if not fully memorize, just so I grasp the breadth of Drupal functionality a little better. Right now I only know a few nooks and crannies! I'd love to do a big long workshop just to be taught, start to finish, how to build a basic site.

Read this next: Using test sites has some good starting points for setting up test environments, multiple servers, the sorts of things I need to be doing below (keeping test sites sych'd. synced? argh). I'll have a local install, then push to a test server (how to keep it private while being up with the same db/etc as my live site?), then from test to live. So the only problem is that my local dev env will be somewhat different from production. Forthcoming: post on Dreamhost's setup in relation to Drupal's needs. I've only posted my placeholder site up there with FTP and plain HTML files! No idea about dbs.

Ok, so. (don't even ask about that link, I don't know.) I want to actually develop my website. I want to do this with Drupal. Obviously.

Erm, or I could update my drush setup, instead. Went for a git repo this time, for my own sanity, but now apparently it needs something called Composer, too (Almost typed "composter." Guess where my mind is). I think it might be working now, hoping I don't really need to update all those php settings again. It's a wonder anything works, given how many configuration files I need to keep track of...

-Problem the first: Which version of Drupal? Do I go with D7 and have the benefit of contrib modules, established practices, lots of support? Or do I go with D8, which I'm at least as familiar with, probably more so, and get ahead of the curve and become more adept with what's to come? Keeping in mind that D8 actually incorporates bunches of modules that used to be in contrib, probably covering most of my immediate needs, but also keeping in mind that some things might still be broken, regular updates will be necessary, and the whole thing could break at any minute?

In my experience, breaking things is the best way I learn how systems work. Even though I know I'll have to rebuild bunches of times to compensate for my own learning and updates to core while it's in development, that will help solidify any new things I learn along the way. Too often I find myself figuring something out once, but then I don't run into the same situation again in my tiny bubble, so I forget it. Database setup, for instance. I need to get my head wrapped around how the DB works.

-Databases and test sites: Keeping local and test sites synchronized... using drush.
What is stored in the db? How does Drupal use its db? how is it accessed? Can I easily switch dbs? What would that be useful for? How do I move the live db back to stage and dev sites for testing? download a backup and connect? is there a faster way to get it re-connected, too? (drush!) Looks like I definitely don't want to use the same database for more than one instance of the site or I'll risk contaminating it with screwed up code. Probably reading the drush instructions for drush sql-sync will clear a bunch of this up.

What's a session variable, exactly? cookies?

Acquia cloud does this very nicely on its own with the drag and drop setup. Do I need a paid subscription to push to production? can I host my site somewhere that isn't Acquia and still use Acquia cloud? How much time should I spend playing with Dev Desktop?

What do I do on the backend v. the frontend? what will I use the CMS interface for, just content creation? Adding modules? Theming (this is a knowledge void for me right now)? Develop on a test, test the new thing, then install on the live site? What do I do frontend and what backend and then push? how much pulling should I do? I need to separate my creation phases (site building/dev and site maintenance/content updates)...

[TODOs are bold]

In which I stumble over PHP

his post was originally just called "learning by doing," but then I was feeling so embarrassed about not recognizing PHP when I fell over it that I renamed it. This post is also on understanding the elements of hook_help() in general in order to write views_help(). Warning: contains questions that are not-stupid!

1. What does $output = ''; do, exactly?
This is most likely a PHP thing, which I have absolutely zero experience with. I know $ as jQuery, but now I'm not even sure that's what it's doing here. Yeah, that would be PHP- the $ indicates a variable. I've been avoiding learning PHP for the timebeing in the interest of focusing elsewhere without distraction, but a quick look through the PHP online documentation will help me with the syntax here. This explains why no one answered my pathetic pleas for explanation on this previously. I feel pretty dumb for not recognizing/thinking of this right off. The functions look enough like functions that I wasn't paying much attention to details, but... yeah.

So, question part B: why so many lines for defining $output? Why not in one big block? Is that just for readability, using a new line of PHP for what would be a new line of HTML? The first line $output = ''; is just initializing the output variable, or rather, defining it. Subsequent lines $output .= ''; are concatenating, or adding, those strings onto the previous definitions. Now I'm looking at coding best practices for Drupal and for PHP. This also spills over into question 2, below.

2. $output .= '<h3>' . t('About') . '</h3>'; What are the periods doing in there? 

The separation of html elements and the string to be translated makes sense, no reason to include code in translatable strings. The periods seem to be for concatenation of strings/elements in the $output variable, since otherwise just using = would reassign the entire variable.

In alexpott's Drupalcon Prague session From Not-Invented-Here to Proudly-Found-Elsewhere: A Drupal 8 Story, he recommends PHP The Right Way, which just happens to have a few more opinions on things than the standard PHP docs (new version in beta!).

In PHP The Right Way, we find a note on concatenation recommending that strings be kept under 120 characters, and that if they should be longer, to use concatenation operators (eg a period, . ) combined with indented newlines for readability. This method is recommended over using concatenating assignment operators (eg period equals, .= ). The example of what not to do looks exactly like our $output variable here.

... which means I found the right bit of doc! and that it's usually impossible to keep up with standards, best practices and the latest in code. Plus, I'm sure I'm still missing some reasoning and background here.

3. More on the translate function t():

In views_help() the translate function is part of the concatenated string assigned to $output. In point two, above, it marks the string "About" as translatable: t('About'). Whatever is inside the translate function is added to the database of strings to be translated into the current language from English, which is the standard. The translate function works with the Localization API to pick out which bits of text are translatable.

The Localization API seems to mostly do the work of targeting strings for translation either through a translate function or "known locations." The translate function identifies strings, and the Localization Server extracts them. You know, I'm a somewhat visual person, I just keep wanting maps for all these things.

EDIT: This bit from the Drupal JS API docs finally explains how the translate function works:

The Drupal.locale property works in conjunction with Drupal.t(), the JavaScript equivalent of the server-side t() function. It holds a collection of string translations so that Drupal.t() can then access the required string from Drupal.locale in order to translate what was passed into it.

4. What are these link tokens? ! is preferable to @?

After my preliminary expectations of easiness on this one were doused, I think I at least determined that this is not the same sort of token as the generic placeholder substitution token. It seems that instead of just using <a> tags, links are created using link tokens and an array. Previously, the links were marked with @, but from a comment on the views_help issue I've gathered that ! is the new @. Perhaps this is another PHP thing. Perhaps I will just go read my PHP books now and call it quits on this blogpost.


Read next: Working with JS in Drupal

And in the meantime: watch session slideshows from DrupalCon Prague! I'm so happy these are available.

And also, finally went to do something with Drush and found it not cooperating, so now I need to backtrack on that, put it back together, and hope that the latest version is really the right thing for D8. Oh, now I really feel dumb. Should have watched this session from Prague first, too. Somewhere in the process of downloading the latest, adjusting .bash_profile and connecting to the example aliases file, I broke it even worse. And creating a mysql file somewhere to cooperate with MAMP.

All this is in the notes on the Drush github page, of course, but after a while I just started feeling like a complete moron. Finally figured out that drush self-update is no longer included (I must've had a much older version installed earlier, not sure how/why), found a drush cheatsheet, and managed to uninstall my modules, check my modules, reinstall... I think I've got it now, but jeez. I keep getting stuck between versions, missing important documentation and feeling really lost, which is incredibly discouraging because then I can't even begin to do simple tasks. Hopefully if I just keep chugging along it'll all work eventually.

Learning is easy, doing is difficult

veryone knows this - the potential for failure increases with the amount of work you're doing. What I need to keep in mind is that it will also plateau and decrease as I gain experience and skills over time, and that it will take time to get there. Patience is not always easy.

I learn by winging it, charging into a project and trying to do everything right away. Once I figure out that I can't bulldoze my way through, I start getting a sense for what I need to know, then I can backtrack and fill in the gaps before going forward or finishing up. It's not necessarily a great strategy, and sometimes leads to excessive frustration and going in circles, so I try to recognize when I'm just wasting time beating my head against something.

One of the things I thought I should do before I get too much further is just to go through some of the basic and general documentation for Drupal, so I have a better sense of how it works on both the front and back end. Sometimes when I start thinking I've got a hold on things I just glance over at the #drupal-contribute channel on IRC and feel humbled. Anyway, some disjointed notes:

Understanding Drupal- the basic stuff, explaining the system from the front.
Drupal 8.x API reference- all the stuff I've felt clueless about; hooks, menus, useful things when you're poking at core.

I had a poke around DrupalSites.net to see if anyone had something like what I want to do... no luck. Mostly I need to be able to use taxonomy terms on photos and blog posts (and whatever else I may add) and be able to search, sort, combine, filter etc for browsing (hello Views, my new best friend). And I'd like to be able to upload and update directly from Lightroom. I have a Lightroom plugin that lets me upload to Picasaweb and update files remotely without having to touch the site itself. So that's most of my needs, apart from some static pages for "About" and whatnot (see previous post): Taxonomy and ease of upload/modification.

...And someday, e-commerce. At that point, possibly authenticated users who can create little albums of my photos, save and share combinations that explore how each photo speaks to another through composition, color, subject, mood. I'm seeing this with draggable stuff, a large "desktop" where "prints" can be moved around freely, just as you would when laying out a gallery show using contact prints. But that's all someday. Maybe not even until after the D8 release, so going backwards to a D7 site would just flatten my little brain.

Cron jobs- at last I know how this works in the filesystem. (I'm less sure why I kept the bit below:)

• status: A bitmapped field indicating the status of the file. The first 8 bits are reserved for Drupal core. The least significant bit indicates temporary (0) or permanent (1). Temporary files older than DRUPAL_MAXIMUM_TEMP_FILE_AGE will be removed during cron runs.

All caps is a constant?


I plucked out a new task from the queue for myself, since it looked pretty easy and writing documentation is always a good way to learn more. While I'm in the API docs, I thought to check out how hook_help() works (keep in mind here that I know zero PHP, only some jQuery, and a bit of JS generally). Now I not only have a better idea what I'm trying to write for views_help(), but I have context for understand how hooks work. whee! I've only drafted some text so far, but might go ahead and make the patch so it can keep moving forward. 

There's a doc for writing the help text itself, but I still need to figure out/understand what exactly output=. does and if there's a more sensible way to deal with the translation bits t() than adding them in by hand, not that that would be super difficult in this case. Maybe somewhere in the Multilingual Support docs... Localization API? ah-ha. Well again, at least now I sort of understand all that. 

I think that's enough for one post, more later!

An Introduction to jQuery [notes]

inally getting on to actual jQuery! This about sums it up: "...we can use jQuery to perform its core functionality: getting some elements and doing something with them." All this reading is well and good, but I need to actually be querying and scripting in order to really understand. Therefore, I think it's time to go back to Codecademy for the jQuery lessons as soon as I read through jqfundmentatals.

The jQuery Fundamentals page links to the CSS2 spec on CSS Selectors, but there are some changes in the CSS3 spec. Memorizing the spec details isn't the most critical thing for me right now, and I have a pretty good grasp of combinators and pseudo-elements, IDs and classes.

The trouble with W3C specs, of course, is that user agent (UA, aka browsers) implementations may vary. Pseudo elements: I should try out :first-letter for drop-caps (though it wont help with my image drop-caps).

Q: So what exactly is a jQuery object? What does one do with it once it's created? Where is it stored and what is its lifespan? Backing up slightly, what does a regular old JS object look like?

A: As usual, I'm complicating things. Your generic JS object looks about like the code below, using literal notation to make the comparison easier. "All objects in JavaScript are descended from Object; all objects inherit methods and properties from Object.prototype, although they may be overridden" (MDN reference) "Objects are a collection of properties, and properties are associations between a name and a value"(more MDN). If a property is a function, then it is a method for that object. Pretty much everything in JS is actually an object. (see also: prototypes and classes)

var Bunny = {
ears : "long",
tail : "puffy",
hop : function (height) {
console.log("Hopped "+ height);
}};

The jQuery object is a JS object in that it stores elements and has methods, but it is an array-like object that just lists the DOM elements from the query. An array-like object has key:value pairs, but the key in this case seems to just be the index.

var a = $('div');
console.log(a);
/*returns from my blog homepage, more or less:
{
0: div#navbar.navbar section,
1: div#Navbar1.widget Navbar,
2: div#navbar-iframe-container,
3: div.body-fauxcolumns...}
*/

The jQuery object can be stored as a variable, or just called once and used, otherwise it disappears after use (?). I'd like to better understand memory and troubleshooting leaks (StackOverflow discussion). Basically, it looks like as long as there's a reference to an object, that object has memory allocated to it.

"Truthy" and "falsy" are a little ridiculous sounding... what's the difference between those and just true/false? Anything that evaluates to True is truthy, to False is falsy, but there are other possible evaluation results as well, like NaN, undefined, null, and any number of things – these are not specifically True or False, but they have trueness or falseness ascribed to them. It's descriptive instead of referring to the specific True/False booleans that you might return. This short article from 2011 explains it much better than I am (and I like his zebra).

Helpful tidbits:

• $() is a function. Functions in JS are objects and have methods and properties. $() always returns an object, and objects are always truthy.
• $( 'li' ).eq( 0 ).is( '.special' ); to find whether the selection using .eq() to select a specific single{ element matches the parameter in the .is() method (selector, DOM element, jQuery object, function); returns boolean.
• Use getters and setters (methods) to do things with jQuery objects. Iteration over elements can be explicit (.each();)or implicit (.html();), and you can chain methods together on a single selection. 
• Then we also have filtering, .not(); .filter(); .has(); on selections, which are more or less "without," "within previous selection," and "contains," respectively. ...many more methods here in the top hit on Google for "jQuery cheatsheet" (includes CSS selectors!). I'm a visual person.
• Plus, find other items/make other selections relative to a previous selection with things like .children();, .next();, .parent(); etc and add to existing selection with, by george, .add();
• More on how to use jQuery in the context of your basic HTML page here from the jQuery folks.

That's probably enough for now. I have a bit more of the jqfundamentals page to read through, then back over to Codecademy, then moving on to "JavaScript: The Good Parts." Please comment if you notice something I've got wrong or that could use clarification.

JavaScript Hoisting

ust in case there weren't enough clueless people on the web trying to figure this out, I thought I'd add a bit here in the interest of my figuring it out. In the process of processing JavaScript (Note to Self: see "JavaScript Interpreter"), things are sometimes executed in ways you might not be expecting. This can change the scope of some variables and functions and confuse the bejeezus out of anyone who isn't paying enough attention. Including me.

Some definitions:

• A JS function expression: var myCode = function(a, b) {stuff;};
• A JS function declaration: function myCode (a, b) {stuff;};
• Hoisting: Pretty much what it sounds like, some things are lifted upwards and therefore are executed sooner in the script than where they were originally written. So, something that was written like so:
  function bunny (){
  rabbit();
  var carrot= 2;
}
  Is actually executed like so:
  function bunny (){
  var carrot;  //declaration gets hoisted
  rabbit();
  carrot= 2;  //assignment stays put
}


So, what does this have to do with scope? JS has function level scope. Blocks do not create a new scope (eg if statements do not create a new scope, only functions can. Compare/contrast with a C-based language). This is actually the most helpful block of text (from Ben Cherry) that I've read while pondering all this:

In JS, a name enters a scope in in one of four ways:

1. Language-defined: All scopes are, by default, given the names this and arguments.
2. Formal parameters: Functions can have named formal parameters, which are scoped to the body of that function.
3. Function declarations: These are of the form function foo() {}.
4. Variable declarations: These take the form var foo;.

Function declarations and variable declarations are always moved (“hoisted”) invisibly to the top of their containing scope by the JavaScript interpreter. Function parameters and language-defined names are, obviously, already there. [names are also resolved in this order] [emphasis mine]

When to use what: If you're aware of hoisting and how things will execute, then use whatever floats your boat, even intentionally use hoisting to get your function declaration moved up. Because a function declaration is all declaration, not declaration plus assignment as in a function expression, the entire function gets hoisted at once. A function expression only has the "var blah;" hoisted, leaving the actual function body (assignment expression) behind. (see also Angus Croll on function declarations/expressions. The fifth time I came back to that page I got the right quiz answers (and not just from memorizing them)).

How functions execute with hoisting when a script runs (examples taken from my hangout on air with JBeach):
Written like so:
(function () {
  a = grapefruit;
  b = applesauce;

  function grapefruit () {  //function declaration
  return 'citrus in your eye';
  };
  var applesauce = function () {  //function expression
  return 'goodness';
  };
}());

Executed like so:
(function () {
  function grapefruit () {  //function declaration hoisted
  return 'citrus in your eye';
  };
  var applesauce; //function expression declaration (?) hoisted
  a = grapefruit;
  b = applesauce;

  applesauce = function () {  //function expression
  return 'goodness';
  };
}()); // returns "citrus in your eye" for a and "undefined" for b.


I think I've got the concept, even if I haven't quite got the details of how it runs (slight lack of applied JS knowledge here, but working on that).

There was also mention of NFEs and IIFEs somewhere along the way here. NFEs are nicer than anonymous functions should you need to track one through a tangle of code. IIFEs are somewhat also known as Self-Executing Anonymous Functions, but with some nuance. An IIFE does invoke itself, can be anonymous or named, and can be self-executing.

• Named Function Expression (NFE): var myFunc = function myFunc (){code here}
• Immediately Invoked Function Expression (IIFE): (function myFunc (){code here}());

Disclaimer: For goodness' sake don't take my word for any/all of this if you've just stumbled across my blog. I'm just learning and these posts are essentially my notes. Please do read the articles I've linked to, read as much as you can, experiment, and figure it all out for yourself, too.

And if I've got something not quite right or downright wrong, please leave a comment. Thank you...

Basic notes on JavaScript

bout a year ago I spent a good chunk of time obsessing over Codecademy lessons and my "streak." Despite the headache I got from figuring out the math on a couple of loops, I really enjoyed JS as a language and am pleased to say I can still just write out a loop (at least for something simple) on demand. I stopped poking at their lessons just because I wanted to move on to some other subjects and work on live projects, but I would still like to finish up at some point. I've certainly learned that everyone has a different style and that syntax/best practices change and vary continuously.

Just did a little brushing up on JavaScript generally going through this JS basics page, then moseying over the Mozilla Developer Network (MDN) pages for further reading. I also have JavaScript: The Good Parts on hand to chug my way through, though I think that may be ongoing and involve more practice/ trying things out, too.

• Use a function expression (var myCode = function(a, b) {stuff;};) rather than a function declaration (function myCode (a, b) {stuff;};). Finally got a good explanation for this here: "To quote Ben Cherry’s excellent article: 'Function declarations and function variables are always moved ("hoisted") to the top of their JavaScript scope by the JavaScript interpreter.'"
• Consider scope! Variables declared without var are global, so (almost) always use var.
• Hooray for OOP. I do like putting things in boxes and generally tidying up.
• Object literal syntax: var thingy = {property1: 'value', property2: 'value';};  Point: if value is a function (rather than a primitive?), then the property is a method. 
• Dot notation: objectname.propertyname
• Bracket notation: objectname['propertyname']
• While I can handle this, I don't particularly like this.
• Ternary operators, shorthand for if/else: var status = ( a === 'aaaa' ) ? 'Panic' : 'Calm'; (had a hard time coming up with a neutral for this one. Essentially: For status, if value of a is panicked screaming, assign value of "Panic" to status. Otherwise, assign value "Calm.")(Personally I much prefer "Don't Panic" to "Keep Calm and Carry On," particular since the latter has been so overused lately)
• Further reading on JS overview here was very helpful for just clarifying where it stands in relation to Java and ECMAScript, plus some basic properties. Once I found MDN, I abandoned old W3Schools. 
• I need a better understanding of how code executes. Closures? Hoisting? ack.
• So, scope? 

Things read: 

JQuery Fundamentals: JS Basics

& all the links at the bottom of the JS Basics page.

This bit on JS closures (still not sure I understand).

And "If Hemingway Wrote JavaScript," which is amusing even if you don't know anything about code.

My Dad Thinks Git is Just an Expletive

irst, reviewing some of the Git documentation. The Git book is probably my favorite piece of instructional material available on the interwebs today [that I use/have encountered so far]. Now that I've been doing some branching, checkouts, commits, etc, I'm feeling a lot more confident about this, but wanted to just skim back over things anyway. Also this Git cheatsheet is too pretty.

Some things to clear up:
: The R words: Rebase, Revert, Rollback.
: The difference between Fetch, Pull and Rebase.

• Rebase is actually a merge, I just happen to use it to integrate the newest origin/8.x into my local branch. Merge is a three way merge, rebase pulls in commits from another branch, rewinds your current branch and replays all the changes sequentially to get you back to your current commit with the other branch merged in. Mostly this makes things neater and erases the history of the working branch, making it look like you've been on the master branch the whole time. Easier to merge into the remote later, too.  
• Revert means to undo a specific commit without deleting it from the commit history.
• Roll back, on the other hand, is resetting HEAD to the commit you've chosen to roll back to. This deletes any newer commits entirely, taking you back in time permanently. I think what Git Tower calls Roll Back is git reset <commit>?
• Git Fetch only fetches an update from your designated remote. 
• Git Pull pulls that update down and merges it into your current branch. 

My previous questions about Git were things like: how do I use it to track a site in production? I was thinking I would install it remotely on my host and update there.  I think I should work on the site locally and then push up to my server. Haven't actually looked into that yet. This handy dandy bit of documentation on d.o (Drupal.org, I have gathered) should have plenty of info on Drupal web dev with Git. The most difficult things there will be handling the databases and figuring out why I need development, staging and production sites all up at once. I don't think I'm understanding the latter properly.

Now, all I have to do is get a super good grasp of PHP and JavaScript. Right. Starting with the JS and JQuery fundamentals here.

Then later, for fun, I'll poke around a local install of D8! whee! If I could figure out local hosting well enough I'd broadcast my experiments publicly using my handy-dandy built-in Apache server... but that honestly is a total side-trip that I shouldn't take right this moment.

TDL! Finish configuring local hosting capabilities outside of MAMP and figuring out site-serving capabilities. Also read more "history of the internet/web" books, because it fascinates me. Also find those studies referenced in Tim Berners-Lee's book regarding emergent properties of the www.

Drupal 8: Some things learned

ust a quick recap on my last reroll. A wonderfully patient mentor and I spent far too many hours poking at the comments and working back through the entire reroll to figure out exactly what was up. In the end, my original question got answered and some further clues were found in the issue comments. And, I think I finally got the hang of Git/Git Tower (thanks to the commenter on my last post, too)! It felt really good to be flicking between branches and understanding what was where. I need to further define all the "R" things for myself, Rebase, Revert, Roll-back... Just to get things clear.

• The first helpful thing was the discovery that I was rerolling from the wrong patch. #64 was the actual last successful patch, and #65 (which I had been working with) was just to correct a typo, but also introduced an unintentional error, which no one noticed until #81 posted an interdiff. Note to self: also be sure to add an interdiff when needed and other helpful things as YesCT suggested like links to instructions and better notes on exactly what I did. 
• One helpful mentor also pointed out that patches/interdiffs could be applied in reverse with curl https://...blah.patch | git apply -R
• It's also worth remembering to diff a rebased branch against your HEAD branch so you don't wind up with a diff file that includes all the commits between when you started your working branch and the current update of origin/8.x. If that makes sense. I wound up with a very clogged diff by leaving a branch a little too long.
• Glancing through the interdiff between #64 and #65 added in #81 helped me find the typo in question and then simply modify that file and run the diff. 
• The biggest problem, and my original question for office hours, was where to put the contents of a test file that had been wiped from 8.x in the intervening year. Eventually we wound up putting that chunk of the patch in a deeper testing directory, but I never would have known where to add it on my own. 
• The method my mentor used to find that test file I think involved searching for other pieces of the previous, now absent test file, where I had just been searching for the parts of the test file affected by this patch. Still not super confident about this grepping business and I feel like I've heard it belittled somewhere as one of those things newbies abuse/misuse. Could be wrong.
• Apart from that, the rerolling instructions were pretty spot on. There was a question of branching, and I think everyone just has different styles with regard to pulling down the most recent commits of 8.x and then creating a new branch for the issue you're working on, plus then a temporary testbranch to test the new patch on. 

I'm mostly not tagging mentors here so as not to be a bother/presumptuous/something, but I continue to be grateful for their patience and helpfulness and willingness to spend time bringing new people into the fold. ... resisting the urge to start singing Guys and Dolls here, though I once played one of the Mission Band members on stage.

Now moving on to a JS issue, and first spending some time brushing up my skills there thanks to some prescribed reading. I'm always torn about whether I'd prefer to read tech books on the computer or in print. Staring at the screen for ages gets to me, but a print book is too disconnected from the associated topics (and less searchable). I'll just have to take regular breaks to stare at my blooming sugar snap peas instead!

Drupal dev env sans MAMP... almost

nother day, another blip on the learning curve. Today I attempt to set up a local hosting environment without using MAMP. Unfortunately, it looks like the doc regarding this manual set up is from 2008, five years and several OS updates out of date, which means I'm winging it, finding new directory paths, etc. At some point later on I may spend some time updating the documentation for all this, but not until I have a full grasp myself.

I'm going to start back here with requirements again, while looking at the manual setup of MySQL and PHP mentioned above. So I'm also looking at this manual setup blog post over here, which should at least point me in the right directions. Managing databases from cli (command line) is not really what I wanted to be doing here.

1. Apache server. Got it, version 2.2.22. Comes with OS X, all I have to do is turn on web sharing... which I seem to have left running and should probably turn off more often. Configuration is in httpd.conf. It's apparently very debatable just which httpd.conf file I should be working on, or whether I should use a separate file like username.conf. Either way, they are here: /etc/apache2/httpd.conf or /etc/apache2/users/username.conf This part I did previously with /Applications/MAMP/conf/apache/original.
• Question: what exactly is this /etc/ directory? Heck, what are all these invisible directories? I really don't know how the system works that well, and Mac OS obscures all the useful things from the average user (eg not me, who somehow permanently turned on "show invisibles." Wish I remembered how...)
2. MySQL: downloaded, install... fix socket? can't find mysql.sock? Oh, initialize grant tables, maybe that's what I'm missing. Need mysql user? Checking that with dscl. Find proper PATH for bash profile, think I got that. Also checking info on MySQL site here for security and initial setup. And here to get mysql OS user account set up? But then that's outdated too, and the data directory is actually /usr/local/mysql/data. And I can't get mysqld_safe to work either. Ok, permissions are wrong on my error log? checked using shell> ls -la /usr/local/mysql/var, but it still says permission denied. And I need a mysql connection extension thing? mysqli? GAH. Alright, I give up. I can connect via cli to MySQL if I turn it on in the prefpane. Not a clue about that extension though. 
3. Attempted to use Homebrew, but it turns out that it needs XCode, which is only OS X 10.7.4+ and I'm on 10.6 something. At this point, I would like to upgrade, but, more software costs...

Then checked back on the original issue I was following that was messing up MAMP, and it seems there's a patch that fixes the issue, so provided that works, I'm back to figuring out more of Git, rerolling, and possibly creating patches. All of which is really not that difficult, but these background headaches are pretty killer.

And I got my Drupal install page back up, just had to reset my MAMP port to 80. And thank goodness, configuration goes smoothly, no more errors. So the lesson here is that I need a backup server/db environment and more knowledge of how to configure the whole shebang. I'll work on finishing that setup some time when it will be a challenge and not a headache. 

Now on to more patches! yay!

Backtracking: Git review

ome time ago, I installed git and set up a repository or two for personal projects. My needs were limited to keeping track of what I had done and being able to backtrack if I needed to. Obviously, I've been vastly underutilizing git's capabilities, so today I'm going back through some documentation to brush up my existing skills and to add a few more, specifically checkout and branch.

Thanks again to Jesse, who walked me through branching and checkouts via screenshare on Saturday. Otherwise I had things more or less right: pull updates down, wipe db, settings.php, /php and /config files from sites/default/files. I'll want to set up a nice script to do this for me at some point. Note to self: seriously, list of things to do "later." Takeaways: get a GUI for git, test a branch/checkout, and "git is Sliding Doors." Loved that. Oh and try out Sublime. And find a budget for software. phoo.

1. Install a git GUI. Git Tower is reputedly the bestest, and in the interest of being on the same page, I think I'll just go with that. Free 30-day trial, yay. I do actually like command line, but for things like branches, it does seem like a more visual interface would be helpful to understand where I am. 
2. Get totally distracted by WWDC stuff. Lament not having every single piece of new tech as it debuts. 
3. Do some reading/research. Really should have gone through the Drupal Git Documentation earlier. Very helpful. This video on further git usage (sandbox creation, pushing, etc) will be handy later. Note to self: I need a way to differentiate between these learning posts, there's a bit of overlap. Might as well create an SSH key while I'm here... My interpretation of "Patch" is basically "structured diff merged into existing code." Seems very straightforward.
4. Start fresh with a new clone of 8.x in Tower, changing directory to user/sites/drupal instead of my documents/[complicated] directory. 
5. Test making a branch and checking it out - nice folder structure in the sidebar. Not quite sure about adding patches though. It seems to apply, but then I get a bunch of things in the status tab. So do I then commit those to my local branch? Does the curl method I've been using do both? Learning yet more software, I guess. Will have to work on that.

Later: reading through some tasks and instructions on drupalmentoring.org in preparation for tonight's office hours. Ask about task assignment and review. Figure out what the heck less and more are/do.

Web Design Process: Yet More Lists

ll right, first things first. Before I go trying to put my website together willy nilly, I need a plan, a master list of desired components and functionality, and a general idea of how to get from here to there. Disclaimer: I have not actually done this before! I've worked on sites designed by someone else, I've done some super basic HTML/CSS work (like my pesky resume and my placeholder website), and I've certainly spent plenty of time thinking about it and reading and researching. So here goes:

Things I'd like from my site:

• A Gallery of photos: no commenting, prints for sale, easily populated (Lightroom export?), cataloged by keyword, location, highly searchable, and someday I'd like it to include interactive collaging
• About/info page: bio 
• Contact: email, links to me elsewhere like twitter etc, RSS for photos and blog?
• Blog: old posts from blogger + new posts, shiny layout, browseable, comments, share buttons
• Portfolio: other design work, samples, articles, projects, certificates, whatever else
• Someday: a sandbox area near the portfolio for projects in progress, something to do with Github? 
• Aesthetic: simple, lots of white space (or black space), nice OFL (Open Font License) fonts and thin lines, simple image display, good navigation, one animation/movement/interactive element on top page. 

The basic steps outlined below are a combination of my notes from several sources. I learned most of the prototyping and user-testing steps from a class called Human Computer Interaction taught online by Scott Klemmer from Stanford. Not my favorite class on Coursera due to some frustration with the peer-grading setup, but nonetheless informative.

I also discovered that a local web design etc firm called Clikzy Creative posted their entire design process to their site so that clients will know what they're getting into. My process will be a bit different, of course, but it's good to know how a more formal environment would handle the same task.

• Essentially: "Discovery, Site Map, Content, Wireframe, Mockup, Revise, Develop, SEO, Launch."

The Moxie Design Studio also has their process up on their website. They do a bunch of websites for local Alexandria businesses, so I had seen their work quite a few places already. They also list a general set of project prices on their site, which is somewhat unusual, but very helpful since I had no idea what I should be charging for my work.

• So again, an essential process looks like: "Discussion, Goals, Mockups, Revisions, Development and Programming, Soft Launch and Client Training, Full Launch and two weeks included Support." 

It's really hard being independent and not letting clients take advantage of you by asking "just a quick question" that actually takes half an hour and is billable. And that's just one reason I'd rather not work for myself!

Back to my own website. A few basic steps to get there:

1. Define required elements - site map (above)
2. Find appropriate platform
3. Wireframing, prototypes, mockups - grids?
4. Testing it on unsuspecting potential users - feedback and revision
5. Build, develop, whatever you want to call it
6. Design details/ illustrations? Finishing touches
7. Later additions: animation, better databases? E-commerce... 

Each step along the way will probably be a bit more involved, but that should give me a good starting framework to go on. Don't mind me if both my website and blog suddenly disappear while I'm shuffling things around...

What color is your flower?

few weeks ago a friend suggested that I fill out the "Flower exercise" from What Color Is Your Parachute? The exercise is designed to help you figure out what you're looking for in a career, and from what I can tell, it's also the core of Parachute (My copy is from something like 1980, and I haven't quite managed to read it). The book actually goes into quite a lot of detail on how to fill out the flower, but you can also just wing it based on the petal titles.

I know, it sounds a little hokey. I thought so too, especially since I thought I had a pretty good idea what I was looking for already, but I went with it. Turns out it's always helpful to get thoughts outside your head, whether to see all the facts in one place, leave reminders for yourself or generate new thoughts in the process. I don't want to make mine entirely public, but here are a few things I'm looking to do in my career:

• Make information widely available and easy to access. That could be something straightforward like library work, or structuring webpages so that users can find what they're looking for plus several things they weren't. It could even be backend support for projects with this as a goal, e.g. part of a multidisciplinary team.
• Help people become inspired to be self-motivated, informed learners who never just say "I don't know," but rather "Let's look it up."
• Provide information services through products that are viable, upgradeable, scaleable and generally future friendly. So, no silos, relative links, transferable data, that sort of thing. 

As for skills, I have profiles on Coursera and Codecademy that will give a bit of an idea what MOOCs I've been fiddling with, and this project should also make it pretty clear what I'm capable of (anything! mwahaha*ahem). Generally: HTML, CSS, JS, some SQL and PHP, WordPress, Photoshop, Lightroom, baking, gardening... 

The other petals include things like: I'd like to work in a sunny, friendly office, with bikeability, sensible benefits, and most importantly lots of opportunity for learning and inspiration from colleagues, classes, workshops, conferences. 

And continuing with the embedding problem, here are some snippets of Parachute from Google Books in an iframe:

Technical Testing Tribulations

ay back in November I finally staked my claim on a corner of the internet by registering and hosting a website under my name. I had stalled for almost a full year, thinking there was too much I would want to research before pinning down a registrar/host. Turns out that was the easy part (once I realised I didn't need a slew of dedicated servers in the former Soviet Bloc).

After choosing DreamHost at the recommendation of a friend and a popular website (Lifehacker, who recently re-affirmed DreamHost's dominance), all I had to do was learn how to code an entire website. And not just any website, one that would display a photographic portfolio dynamically and interactively and [buzzword] and [so on]. Ok, so I haven't quite gotten to that part yet, but the site exists and is a decent placeholder.

The holdup is that I'm the sort of person who can't just throw up something pre-fabricated and call it a day, I have to learn how to code the entire thing myself, learn databases and cascading stylesheets, from scratch. Maybe once I've done that I could take an easier route, but without understanding the background it seems too much like cheating. Besides, most of the point was giving myself opportunity to learn, given that my photos probably aren't going to start flying off the shelves (there are some up, but they, too, are placeholders).

So in the meantime I've just been using the web export feature in Adobe Lightroom (a god-send for those of us who like cataloging, integration with other applications and services and powerful but simple tools). The problem I'm leading up to is that I'd like to stop hosting the photos I use in blog posts on Picasa and move them all over to a dedicated storage folder on my website. Heck, someday I should move this blog there, too.

The problem is that to use a photo in a post, I need to have a link to the .jpg file that will never change, or at least use a relative link to just "/kitten.jpg" rather than "http:// blah/folderA/section56/kitten.jpg" and so on. So that's one solution. But I also need the photo to link to a gallery view on my website, so that the clicker can browse through other photos from my blog, and also use spiffy navigation controls to browse by keyword or just mosey back through other parts of my portfolio.

I'm not going to list how much of that I have no idea how to accomplish, because it's too overwhelming. But, I've written an entire blogpost about it now, so that will hopefully motivate me.

Oh, and the reason there are random photos of pie here is because they're hosted on my website, just... not very sophisticatedly.