
It's fairly common to see React components in NPM modules.
There's libraries out there you can import and play with and the
support is great.

Vue, is not that world. There's a few issues along the way, but
there are examples of great projects that already provide a method
for doing it. See: [Bootstrap Vue](https://bootstrap-vue.org/) or
[Vuetify](https://vuetifyjs.com/en/) for examples. In fact,
working with them is what got me started wanting to produce a
library for my organization. Having travelled in their well worn
shoes, I now have a great deal of respect for those projects.
You should use them, love them, and contribute to them. But, like
myself you might need your own version. So, here's the outcome of
a couple weeks work, and a glass to more authors doing the same.
Let's get the Vue ecosystem a little more friendly.

Primary components:

- Storybook: Used for providing visual realtime feedback on the designed components and their interplay
- Jest: For testing anything you might care to
- Rollup: For packaging our work into consumable distributions
- Bootstrap Vue: Because I didn't want to hand make all the styles, you could swap this out or remove it.

The full working example can be found on my <a href="https://github.com/lancegliser/vue-display-components-library-template">github repository</a>. This post will include only gists and a breakdown of why some patterns were chosen.

## Building - Rollup

I owe another thank you to the Vue team.
Their work on a [Vue Rollup](https://rollup-plugin-vue.vuejs.org/)
plugin made the Rollup portion of this a breeze.

<script src="https://gist.github.com/lancegliser/af2ca608f23997fef7973dc608c99c13.js"></script>

If this were React, the exports might have just worked.
But, Vue needs a little more meta data exposed for IDE's to
enable auto-completion features. JetBrains (Webstorm, et. all)
require [`web-types.json`](https://github.com/JetBrains/web-types) and
VS Code requires `vetur-tags.json` and `vetur-attributes.json`.
This is where Bootstrap Vue and Vuetify have so generously provided
a pair of solutions. I've used Bootstrap Vue's build method. You'll
find the files at `/build` and `/src/utils`. We just use the
Node `esm` package to injest the `/dist` after it's built, and loop
over the `package.json` files we made for each plugin.
The `package.json` are used to signal not only that we have
components, but their slots available, and property descriptions
if the generic types don't already cover that.

<script src="https://gist.github.com/lancegliser/0256ae082dd72c532050ab438e2dfbd4.js"></script>

## Developing - Storybook

Storybook Vue does take a little time to customize.
It works right out of the box, until you run into a host of very
specific concerns. To that end, I'll document some of the choices
I made and the configs that get it running.

- `preview.ts` -
  This file is used to wrap the stories, so you can ensure that all
  the globals you need are loaded into Vue.
- `manager.ts` -
  This file is used to manage Storybook itself. Mostly, I just wanted
  a dark theme.
- `decorators.ts` -
  This is a file of helpers. In trying to create an app story in
  itself, I found you of course couldn't wrap the app inside itself.
  Sometimes you need the fine grain control offered by this, if not,
  use the default.
- `preview-body.html` -
  This file allows you to inject some base html and css. In my case
  the goal was for my `<App />` to take 100% VH and VW, so I had to
  remove storybook and the dom's internal elements.

<script src="https://gist.github.com/lancegliser/44034ca6533255974aeb3bff38ab997b.js"></script>

## Testing - Jest

Jest requires a bit more configuration than default.
It's simple once it's in front of you, but make sure you have all
the right transformers to handle whatever your components might
import:

<script src="https://gist.github.com/lancegliser/83a6c2843b4f9565d208a393b54a8901.js"></script>


Creating a Vue component library


Over the past few months I worked on a DotNet core framework.
Some as a means of learning C, and potentially to provide my team
with options for how to handle various concerns. That project never
moved into use, but portions of it turn out to be very useful for
general knowledge. I'm keeping the source code for this one a little
closer to the chest. If you'd like to talk through what I found,
feel free to ping me. [Twitter](https://twitter.com/lancegliser) might
be easiest. At a high level, I covered these concerns:

- DotNet Core 2.2 Web Api framework
- Entity framework with automatic validation responses
- Global error handling
- Standard auth JSON web tokens
- Unit tests using in memory databases and entity framework
- ActiveDirectory authentication


DotNet Core 2.2 Web Api


Ran into an interesting question from a coworker.
We were working through surprising (to me) PHP behavior on the
usage of `self::` vs `static::`. It's a question of
[late binding](https://www.php.net/manual/en/language.oop5.late-static-bindings.php)
and the accessor. For a PHP reference to get a class's extended
constant value from the subclass, you had to use `static::`.

Then they asked me how it works in JavaScript as we're moving
toward React (woo). Had to admit, I had no idea. While I do use
JS classes, it's more composition than inheritance if possible.
Still, it's useful to know. There's an example below, but the take
away is this:

_Static constants are somewhat second class, and shouldn’t be used
for extension based overrides. Preference functions in javascript._

```js
class ClassA {
    public static MY_VALUE = 'asdf';

    // Possible, but one hell of an awkward turtle.
    // getOutput(){
    //     // @ts-ignore // Required to allow for __proto__ access
    //     return this.__proto__.constructor.MY_VALUE;
    // }

    getOutput(){
        return ClassA.MY_VALUE;
    }
}

class ClassB extends ClassA {
    // Note that WebStorm doesn't even find this be an extended / overridden property
    public static MY_VALUE = 'fdsa';

    // This shows extension.
    getOutput(){
        return ClassB.MY_VALUE;
    }
}

const a = new ClassA();
const b = new ClassB();

describe('constants usage', () => {
    it('a instance of ClassA', () => {
        expect(a).toBeInstanceOf(ClassA)
    });

    it('b instance of ClassB', () => {
        expect(b).toBeInstanceOf(ClassB)
    });

    it('a should return ClassA value of MY_Value', () => {
        expect(a.getOutput()).toBe(ClassA.MY_VALUE)
    });

    it('b should return ClassB value of MY_Value', () => {
        expect(b.getOutput()).toBe(ClassB.MY_VALUE)
    });

});
```


JavaScript class static constants extension on instances


Azure DevOps has been great to me. I'm hugely thankful for the
toolkit it's provided, but it falls down a little when it comes to
PHP.

Today our systems guy Eric Duncan and I figured out how to provide
the authentication required by the composer install steps to pull
private git repositories out of our Azure Repos.

Start first by declaring your `composer.json` repository and
dependencies as normal:

```json
{
  "repositories": [
    {
      "type": "git",
      "url": "https://example_team.visualstudio.com/example_project/_git/example_repo"
    }
  ],
  "require": {
    "example_team/example_repo": "^1.0"
  }
}
```

Your next step is create a unique identity in VSTS that can log in
and grant it read access to the repositories required.

Then update your build process to run these steps:

1. Write `auth.json` at the root of the artifact next to `composer.json`
   `'{"http-basic": {"example_team.visualstudio.com": {"username": "lance.gliser@example_team.com","password": "foo"}}}' > auth.json`
2. `composer install`
3. Delete the `auth.json` file so it doesn't reach deployment steps.

You could store the username, and password in secure variables for
safety, but that's the gist.

A couple gotchas along the way discovered by Eric:

- Powershell's out-file encodes output in UTF-16 however composer
  expects it in UTF-8. So we have to use set-content to write the
  file.
- You have to expose the variable groups to each build process to
  get them into the script.


Using private Azure DevOps git repositories with composer during Build and Release


I'm going to forget this again if I don't write it down this time.
Here's the scenario I was trying to overcome:

Single server, multiple sites backed by independent repos using ssh.
Each site should have its own private ssh key added to the remote
repository as a deploy keys. These deploy keys can _not_ be
the user's private key to get on the server.

The solution is this:

### `.ssh/config`

Each user can use a custom file in their `.ssh` folder that can
override the SSH hostname and key for any given host. Here's an
example:

```text
Host example.github.com
HostName github.com
PreferredAuthentications publickey
IdentityFile ~/.ssh/example-org-id_rsa
```

From there, any given ssh clone to the server simply has to include
a _custom_ hostname, which you've modified to match the `.ssh/config`
files:

```text
git@github.com:some_cool_repo/example.com.git
```

would become

```text
git@example.github.com:some_cool_repo/example.com.git
```

After that the git pull and push are seamless, and the other
developers may never even need to know if you symlink the `.ssh`
config file itself.

## But it's 2020 now...

We have better technology. If you're manually pulling your code,
good for you for not using FTP, but come on. It's time to invest
in hooks, and true DevOps. Start by reading up at
[GitHub Actions](https://github.com/features/actions).


Setting up per site read-only deploy keys using github


I've been working for a bit lately to get into React.
Initially, I had built the stack: webpack, React, Redux, etc, all
by hand. At some point I got over confident, and thought I was
ready to go into the deep end. At that point, I swapped over into
[react boilerplate](https://github.com/react-boilerplate/react-boilerplate)
to 'really' develop something. Huge points won me over,
hot reloading, 'some' guidance on the way it should be
configured, and community to draw from.

More a sign of my over confidence, I decided I'd just start by
doing an integration with
[Google's YOLO (You Only Login Once)](https://developers.google.com/identity/one-tap/web).
The first major shock I received was the brand new concept of
[Redux Sagas](https://github.com/redux-saga/redux-saga).
For those unfamiliar, it might be best summarized as an event
driven system, a remix of RXJS and other subscription systems.
It took quite a while to learn the basics, because they had examples
that didn't match up to what felt like real world examples. To that
end, I contribute my own little attempt. It's an alpha version,
but it does show the details in a state you should be easily able
to understand.

A major reason I never threw up my hands and walked away from this
'not tangled' (but totally complex snarl) is that I'm learning that
everything really boils down to the state. The state is your source
of truth in ways I was never used to in Angular. If it doesn't go
through a reducer, it doesn't exist. That makes sagas _very_
attractive. They can access the auth credentials, refresh them
if required, set the update states, and all the rest without over
involving the rendering of the component. The entire async /
background / 'generator' function can be a bit of a rabbit hole
all its own. For official documentation check out
[Mozilla's JavaScript generator functions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/function*).
For now, please let your head work the general abstraction that if
you see `yield`, `take` (any variety), `race`, or `function*`,
background threads are issued and might return a value when it's
damn well ready.

A fair warning, after the App component is mounted, things begin
jumping file to file, fast. There are many paths that branch back
onto each other. The best way to think of it conceptually is this:

## Overview of purpose

- _saga.js_ - App business logic -
  Handles boot logic
- _saga.googleYolo.js_ - Google YOLO logic -
  Handles boot logic only if credentials are not found
- _saga.api.js_ - Api logic -
  No boot logic

## Making an api call

```js
// Inside your component's saga you can dispatch an api request action
yield put(apiActions.apiUserDeleteRequestAction(user.username));

// You'll setup a race condition, waiting for success for failure
// Note that the returned object deconstruction must match the object keys
const { deleteAction, errorAction } = yield race({
    deleteAction: take(API_USER_DELETE_REQUEST_SUCCESS),
    errorAction: take(API_USER_DELETE_REQUEST_FAILURE),
});

// Alert your component's _state_ to the side effects. Your reducer is listening for this
if (errorAction) {
    yield put(actions.userDeleteFailureAction(errorAction.error));
}

if (deleteAction) {
    yield put(actions.userDeleteSuccessAction()); // This might well result in a redirect using something like: yield put(push('/auth'));
}

```

## Walkthrough of a single path

All this wouldn't be much use if I didn't provide a solid breakdown
of how the thing functions. While there are multiple happy paths,
really it's kind of all happy paths due to the handle of failures
`race()` conditions encourage.

Let's outline this in English, and I'll highlight portions of the
code after:

- App component: `constructor()`
  -- Set the `window.onload` required by Google YOLO to fire an
  api loaded action
- App - did mount
  -- Dispatch the app boot action

(At any point)

- Google YOLO saga receives the api loaded notification, and sets
  state.googleYolo.api

(Following app boot)

- App saga receives the app boot action
- Redirect to home
- Fire an independent process to read auth

(At any point)

- App saga receives receives boot auth read
- Checks for cookies
- Fires app boot credentials unavailable action

(At the point both app boot credentials unavailable action AND Google YOLO api available have happened)

- Google YOLO saga fires the googleYolo.retrieve() api
- Google YOLO saga fires the api action authenticate with google account credentials
- Google YOLO saga fires the app user identity request action
- Api saga fires the app user identity success action
- Google YOLO saga fires the user login success action
- App saga redirects to the /profile page

- _phew_ - And that's the simple happy path

### And again... in code

#### `app/index.js` - importing and composing the app to handle our sagas

```jsx
import { withRouter } from "react-router-dom";
// ...
import appSaga from "./saga";
import appReducer from "./reducer";

import googleYoloSaga from "./saga.googleYolo";
import googleYoloReducer from "./reducer.googleYolo";

import apiSaga from "./saga.api";
import apiReducer from "./reducer.api";
// ...

export class App extends React.PureComponent {
  // eslint-disable-line react/prefer-stateless-function
  // ...
  render() {
    // ...
    <Switch>
      {" "}
      // This will be activated by the withRouter part of our composition to allow
      saga yield push(put('/path'));
      <Route exact path="/" component={HomePage} />
      <Route exact path="/auth" component={AuthPage} />
      <Route exact path="/profile" component={ProfilePage} />
      <Route component={NotFoundPage} />
    </Switch>;
    // ...
  }
}

const withConnect = connect(mapStateToProps, mapDispatchToProps);

const withAppReducer = injectReducer({ key: "app", reducer: appReducer });
const withAppSaga = injectSaga({ key: "app", saga: appSaga });

const withGoogleYoloReducer = injectReducer({
  key: "googleYolo",
  reducer: googleYoloReducer,
});
const withGoogleYoloSaga = injectSaga({
  key: "googleYolo",
  saga: googleYoloSaga,
});

const withApiReducer = injectReducer({ key: "api", reducer: apiReducer });
const withApiSaga = injectSaga({ key: "api", saga: apiSaga });

export default compose(
  withAppReducer,
  withAppSaga,
  withGoogleYoloReducer,
  withGoogleYoloSaga,
  withApiReducer,
  withApiSaga,
  withRouter, // Without this, yield put(push('/path')) will not cause the <Router> to swap containers
  withConnect
)(App);
```

#### app/index.js - activating our sagas

```js
// ...

export class App extends React.PureComponent {
  // eslint-disable-line react/prefer-stateless-function
  constructor(props) {
    super(props);

    window.onGoogleYoloLoad = (api) => {
      props.dispatch(actions.googleYoloLoadedAction(api));
    };
  }

  componentDidMount() {
    this.props.dispatch(actions.appStartAction());
  }
  // ...
}
```

#### saga.googleYolo.js

```js
import { all, take, takeEvery, call, put, select, race } from 'redux-saga/effects';

import * as actions from './actions';
import * as apiActions from './actions.api';

import { makeSelectGoogleYoloApi } from './selectors';

import {
// ...
} from './constants';
import {
// ...
} from './constants.api';

const getGoogleYoloApi = makeSelectGoogleYoloApi();

// Root saga
// single entry point to start all Sagas at once
export default function* rootSaga() {
    yield all([
        googleAuthWatcher(),
        yield takeEvery(GOOGLE_YOLO_HINT, handleGoogleYoloHint),
        yield takeEvery(GOOGLE_YOLO_RETRIEVE_CREDENTIALS_SUCCESS, handleGoogleYoloCredentialsSuccess),
        yield takeEvery(GOOGLE_YOLO_RETRIEVE_CREDENTIALS_FAILURE, handleGoogleYoloCredentialsFailure),
        // ...
    ]);
}

// ...

/**
 * Saga watchers and workers
 */
/**
 * Watcher for the google yolo api loaded and auth token read actions
 * If there is no auth token, it attempts a google sign in
 */
function_ googleAuthWatcher() {
  const [credentialsUnavailableAction, googleYoloAction] = yield all([ // eslint-disable-line no-unused-vars
      take(APP_START_CREDENTIALS_UNAVAILABLE),
      take(GOOGLE_YOLO_LOADED),
  ]);

    yield handleGoogleAuthWatcher(googleYoloAction);
}

```

#### saga.js

```js
import { push } from 'react-router-redux';
import { fork, all, race, take, takeEvery, put, select } from 'redux-saga/effects';
import Cookies from 'js-cookie';

import * as actions from './actions';
import * as apiActions from './actions.api';
import { makeSelectCurrentUser } from './selectors';

import {
// ...
} from './constants';
import {
// ...
} from './constants.api';

const selectCurrentUser = makeSelectCurrentUser();

/**
 * Saga watchers and workers
 */

// Root saga
// single entry point to start all Sagas at once
export default function* rootSaga() {
yield all([
    // App
    watchAppStart(),
    yield takeEvery(APP_START_CREDENTIALS_LOADED, handleAppStartCredentialsLoadedAction),
    yield takeEvery(APP_START_CREDENTIALS_UNAVAILABLE, handleAppStartCredentialsUnavailableAction),
    // Log in / Log out
    yield takeEvery(USER_LOG_IN_START, handleUserLoginStart),
    yield takeEvery(USER_LOG_IN_SUCCESS, handleUserLoginSuccess),
    yield takeEvery(USER_LOG_IN_FAILURE, handleUserLoginFailure),
    yield takeEvery(USER_LOG_OUT, handleUserLogout),
    // ...
    ]);
}

// ...

/**
 * App
 */

/**
 * Watcher for the app start
 */
function_ watchAppStart() {
  yield takeEvery(APP_START, handleAppStart);
}

/**
 * Worker for app start
 */
function_ handleAppStart() {
    yield put(push('/'));

    // Fire boot tasks async as much as possible
    yield fork(appStartAuth);
}

/**
 * Handles the auth start boot check
 */
function_ appStartAuth() {
  // Check auth cookies
  const credentials = Cookies.getJSON(AUTH_COOKIE_NAME);
  if (credentials) {
      yield put(actions.appStartCredentialsLoadedAction(credentials));
      return;
    }

    // If there's no refresh token, it's over
    const refreshToken = Cookies.get(REFRESH_TOKEN_COOKIE_NAME);
    if (!refreshToken) {
        yield put(actions.appStartCredentialsUnavailableAction());
    return;
}

// ...
}

/**
 * Handles the auth start boot check
 */
function_ handleAppStartCredentialsUnavailableAction() {
  yield put(push('/auth'));
}

```

#### saga.googleYolo.js

```js
// ...
/**
 * Calls the google yolo api to cancel the retrieve credentials
 *
 * @param googleYolo
 * @returns {Promise|Promise.<T>|*}
 */
function callGoogleYoloRetrieve(googleYolo) {
return googleYolo.retrieve(googleYoloOptions)
  .then((response) => ({ response }))
  .catch((error) => ({ error }));
}

// ...

/**
 * Google yolo api watcher handler - fires the aysnc request for credentials
 */
function_ handleGoogleAuthWatcher(action) {
    yield put({ type: GOOGLE_YOLO_RETRIEVE_CREDENTIALS_START });
    const { response, error } = yield call(callGoogleYoloRetrieve, action.api);

    // ...
}
```

#### saga.api.js

```js
import {
  all,
  takeLatest,
  call,
  put,
  select,
  race,
  take,
} from "redux-saga/effects";
import deepmerge from "deepmerge";
import Cookies from "js-cookie";

import * as apiActions from "./actions.api";

import { makeSelectAuth, makeSelectRefreshToken } from "./selectors";

import * as constants from "./constants";
import * as apiConstants from "./constants.api";

const selectAuth = makeSelectAuth();
const selectAuthRefreshToken = makeSelectRefreshToken();

// ...

// Root saga
// single entry point to start all Sagas at once
export default function* rootSaga() {
  yield all([
    // Boot
    yield takeLatest(
      constants.APP_START_CREDENTIALS_LOADED,
      handleAppStartCredentialsLoaded
    ),
    // Auth
    yield takeLatest(
      apiConstants.API_AUTH_CREDENTIALS_REQUEST,
      handleApiAuthCredentialsRequest
    ),
    yield takeLatest(
      apiConstants.API_AUTH_GOOGLE_REQUEST,
      handleApiAuthGoogleRequest
    ),
    yield takeLatest(
      apiConstants.API_AUTH_REFRESH_REQUEST,
      handleApiAuthRefreshRequest
    ),
    yield takeLatest(
      apiConstants.API_IDENTITY_REQUEST,
      handleApiIdentityRequest
    ),
    // User
    yield takeLatest(apiConstants.API_USER_REQUEST, handleApiUserRequest),
    yield takeLatest(
      apiConstants.API_USER_DELETE_REQUEST,
      handleApiUserDeleteRequest
    ),
  ]);
}

// ..

function* handleApiAuthGoogleRequest(action) {
  const endpoint = `${API_URL}/v1/authGoogle`;
  const body = JSON.stringify({
    grant_type: "password",
    scope: "", // This is all stub for now anyway
    client: `${CLIENT_TYPE}+${API_VERSION}`,
    credentials: action.credentials,
  });
  const mergedOptions = Object.assign({}, baseOptions, {
    method: "POST",
    body,
  });

  try {
    const credentials = yield call(request, undefined, endpoint, mergedOptions);
    yield updateAuthCredentials(credentials);
    yield put(apiActions.apiAuthGoogleSuccessAction(credentials));
  } catch (error) {
    yield put(apiActions.apiAuthGoogleFailureAction(error));
  }
}
```

#### saga.googleYolo.js

```js
// ...
/**
 * Google yolo api watcher handler - fires the aysnc request for credentials
 */
function* handleGoogleAuthWatcher(action) {
  // ...
  const { response, error } = yield call(callGoogleYoloRetrieve, action.api);

  const { response, error } = yield call(callGoogleYoloRetrieve, action.api);

  if (response) {
    yield put({
      type: GOOGLE_YOLO_RETRIEVE_CREDENTIALS_SUCCESS,
      credentials: response,
    });
  } else {
    yield put({ type: GOOGLE_YOLO_RETRIEVE_CREDENTIALS_FAILURE, error });
  }
}
```

#### saga.api.js

```js
// ...
/**
 * Worker for user login success
 */
function* handleUserLoginSuccess() {
  yield put(push("/profile"));
}
```

## The full gist of it:

I tried embedding this, but it was just a bit too large.
If you want the full dump of files, please review
[it here](https://gist.github.com/lancegliser/af41c0a52e9bd87975286dbfdbdca9a4)
.


Redux sagas for Google YOLO


Redux is a rather famous part of the React ecosystem, but it doesn't
have to be. All of the logic arguments for Redux stand on their own
apart from the rendering engine you pair with it. In the past, I've
emulated Redux-like data stores in Angular 1.x apps, and hand
rolled solutions. They do one thing, and they do it really well,
manage state. There's always arguments for spawning multiple Redux
stores of the best I've heard was one store per API consumed as a
cache.

But no matter how you end up potentially using state based stores,
their purpose remains applicable in almost any application. Redux
moves the source of truth off the canvas it is meant to manipulate.

I've done some light experimentation for a project I may end up
scrapping, but wanted to share the results just the same. It was
entertaining, and it's awesome to know you can get all the power you
need from Redux, without fancy tooling or even a build process.
A few pieces that should be of keen interest to you if you're new to
Redux:

- `settings.initialControlState` vs `defaultControlsState` when
  creating the store. This is how you get program specific defaults,
  overridden by item settings on startup.
- The various `Redux.combineReducers` object keys that map to the
  functions that reduce them. Managing your entire app's reducers
  through a single function is mind boggling.
- `store.subscribe(render);` followed immediately by `render();`.
  Redux is not RxJS. You could setup a store object property as a
  stream, but it's not native. You need to fire that initial paint
  yourself most of the time.
- `handleUpdateFilters` vs `handleApplyFilters`.
  You must think of every change to the state firing an action,
  even if the user sees only the results of the application of
  those previous actions.
- The fanatical use of `Object.assign({}, state, {key: value});`.
  _Never alter the state object directly._

<script src="https://gist.github.com/lancegliser/108e9ac9c430ec54a1e33ecdd9b9e2e8.js"></script>


Redux and Vanilla JS


A minor annoyance you might not consider at first working with
HTML 5 date type inputs:

The date _display_ is what the user is thinking.
Say: Oct 31st, 2008 translating to their locale. For me,
that's 10/31/2008.

The input's value will be: "2008-10-31" - Makes perfect sense.

The input's valueAsDate will be: "2008-10-29 18:00:00 -0600 CST" -
Errr... What?

It makes sense actually. The date is being measured as against your
UTC offset so it's localized. That's normally transparent, unless
you were to need to then output that date back to the user via
javascript. Then it gets interesting. The date can slip to the
previous day, and you're showing their appointment 'accurately'
but completely wrong. Remember, the user is not considering time,
you'll have to remove it from the equation to match their
expectations:

<script src="https://gist.github.com/lancegliser/cdb29fd68c8aa301cc9b21f7cc513338.js"></script>


Displaying date input values using javascript


Starting into machine learning today using Azure's video tutorials.
They are a good start, but the documentation is a bit old. A few of
the pieces are now renamed or replaced but generally show up well in
search even if 'deprecated.'

One huge stopping point I ran into was in the deployment of web
services via steps 4 and 5 of their videos. Everything 'looks' like
it works fine, until you reach the testing interface. If you've
followed their steps you'll come across this error:

    Execute R Script Piped (RPackage) :
    The following error occurred during evaluation of R script: R_tryEval: return error:
    Error in exists (name, envir = env, mode = mode) : argument "env" is missing, with no default

The cause of that little guy is actually a context based bug within
the R language itself. Details are on
[GitHub](https://github.com/tidyverse/ggplot2/issues/743).

Remember that bit of R language they had you drop in to generate
visual histographs and density plots. Those plots that aren't
actually used in the webservice you're deploying? Yeah, they are
the cause.

You could just remove them, they do little for you, and do take
execution overhead. But you do _not_ want to simply delete the R
block from your experiment. At some point you may need R code in
that spot, and the of your experiment is setup to use the R
specialized names you created. Not worth the effort.

I would suggest commenting them out for performance, but you could
also just include the bug fix in your graphing code:

    foo = qplot(x=sex, data=dataset1, geom="histogram", fill=income, position="dodge"<strong>, environment = environment()</strong>); print(foo)

That's it, happy experimenting!


Azure Machine Learning (ML) error: argument 'env' is missing, with no default


This came as a shock to me, likely it may to you as well. IE & Edge
have produced a new non-standard feature! A little button to clear
text entries inside fields. It's actually handy, I applaud them.
Sadly it does cause me problems. As designers, our goal is to
provide systematic, effective hints. If you're working in a
large scale application, there may be some times when search is a
wildcard partial text match, and other times when a real
JavaScript autocomplete is required. Properly signaling which is
which ahead of time reduces mental friction, and sets the user up to
appropriately use the search. Normally, we like to do that using
hint images. Maybe a 'search' icon, and one of many famous loading
spinners during network requests.

Unfortunately, the combination of MS's 'Clear' and autocomplete
controls results in... overlap. It's just plain ugly.

Other browsers have not brought that feature up, though they may
someday. For now though, we need handling providing the base hint,
the loading spinner, and a special rule or two to remove those in
IE & Edge when the user is focused on the field. To that end,
you'll need two pieces:

- Javascript to add the proper classes (base, loading, and empty)
- CSS to target the same states above

Providing an autocomplete script is beyond the scope of this post, but I'll provide the little bits you need to know about.

```js
// Add the initial class
element.classList.add("autocomplete");
// Read the empty state initially
updateEmptyClass(element);
// Monitor changes to the value - This requires use of the 'input' event, the only event that fires when IE uses the clear control
element.addEventListener("input", function (event) {
  updateEmptyClass(event.target);
});
// Add some other handling to manage adding .autocomplete-loading

/**
 * @param {HTMLInputElement} element
 */
function updateEmptyClass(element) {
  var className = "autocomplete-empty";
  if (!element.value) {
    element.classList.add(className);
    return;
  }
  element.classList.remove(className);
}
```

```css
.autocomplete {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAADQElEQVRYR+2WX0hTcRTHz7nbmtXsyRdl4nwJDNSH+dBDJL4I5VBbDZtZ3EzJFQghve+hXhbEQh+yJv7ZRIZoTFpUUPQSIm1BvufEeYnBkknSpNw98Rv3ylh3u9eV+uLv8f7O+Z7PPef8zu+HcMgLDzk+HAHsOQNut1ufSqVMXq839T/KpwlgaGjojCiKt4moDREtAKADgJ9E9JnjuBd6vf65x+P5UQpQUQC3231sY2PjMSIOSEELxUgg4h2v1zu/V4iCADzPl5lMpjcAcF6jKAHAvZGRkSca7bNmBQFcLtckEd3IEdtCxKdE9ImI4hzH1YuieAERO3NsRFam0dHR11ohFAH6+/ubieiDLEJES4jo9Pl8sXzhvr6+K4g4RkSnpL2Vzc3NutnZ2V9aIBQBeJ4PA8BFSeD7zs5OfSAQ+FZIkOf5XgAYk/cRsXt8fHymJACHw2EyGo1JADAyASIanJ6eHlYT6+npWQSAs9m6Igb9fv9VNR/FHnA6nQ2iKH6RnTmOa5yZmVlWE+vq6vIAwH3JbjkYDDaq+SgC2O32FkR8LzuXl5cfn5iY2FYTs9vttxDRJ9kJc3NzZjUfRYD29vYGRNzNABE1LiwsqGago6MjNwNLoVAoWw619VcTtra2njQYDKwHyiTnwXA4rNoDNpttkYjkoIFwOHxdLbhiBthHq9X6EgDa5FMAAPXRaLTgKWhqauolotxT0BmJREIlA1gslmZE3J0DALCUyWS619bWVvJFa2trHQDAap+dA0T0dXV19TQAiCUDMEeLxTIJALuTkIi2OI57JsEIiMi6nE1CW16gNJuOsVjs7b8ClImi+AoAWrQI5dlsE1FnPB5nd0nRVfQ2tFqthkQi8QgR7wKAvohSEhFdRHQZAOQBxI6uKoSm90BNTU1dJpMZQETWmPJ7gAWIAMB8Op32JZNJ9h7QV1dX+3MhiOjS+vp6wctJE0Den+sqKipOSAGVkqIzm81TANAtbTLQghClAKiVle3rqqqqptilJEMgoiLEfgHIEJOIeC0nEzZBEN7l/sF+AihBfBQE4dxBAmQhKisrhxHxJiI+EATh4UEDZOOxIx2NRn/nN9B+l0C1YY8ADj0DfwB6DCkwP0hfOgAAAABJRU5ErkJggg==);
  background-position: right 1rem center;
  background-repeat: no-repeat;
  background-size: 1.25em;
}

.autocomplete-loading {
  background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/Pgo8IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPgo8c3ZnIHdpZHRoPSI0MHB4IiBoZWlnaHQ9IjQwcHgiIHZpZXdCb3g9IjAgMCA0MCA0MCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4bWw6c3BhY2U9InByZXNlcnZlIiBzdHlsZT0iZmlsbC1ydWxlOmV2ZW5vZGQ7Y2xpcC1ydWxlOmV2ZW5vZGQ7c3Ryb2tlLWxpbmVqb2luOnJvdW5kO3N0cm9rZS1taXRlcmxpbWl0OjEuNDE0MjE7IiB4PSIwcHgiIHk9IjBweCI+CiAgICA8ZGVmcz4KICAgICAgICA8c3R5bGUgdHlwZT0idGV4dC9jc3MiPjwhW0NEQVRBWwogICAgICAgICAgICBALXdlYmtpdC1rZXlmcmFtZXMgc3BpbiB7CiAgICAgICAgICAgICAgZnJvbSB7CiAgICAgICAgICAgICAgICAtd2Via2l0LXRyYW5zZm9ybTogcm90YXRlKDBkZWcpCiAgICAgICAgICAgICAgfQogICAgICAgICAgICAgIHRvIHsKICAgICAgICAgICAgICAgIC13ZWJraXQtdHJhbnNmb3JtOiByb3RhdGUoLTM1OWRlZykKICAgICAgICAgICAgICB9CiAgICAgICAgICAgIH0KICAgICAgICAgICAgQGtleWZyYW1lcyBzcGluIHsKICAgICAgICAgICAgICBmcm9tIHsKICAgICAgICAgICAgICAgIHRyYW5zZm9ybTogcm90YXRlKDBkZWcpCiAgICAgICAgICAgICAgfQogICAgICAgICAgICAgIHRvIHsKICAgICAgICAgICAgICAgIHRyYW5zZm9ybTogcm90YXRlKC0zNTlkZWcpCiAgICAgICAgICAgICAgfQogICAgICAgICAgICB9CiAgICAgICAgICAgIHN2ZyB7CiAgICAgICAgICAgICAgICAtd2Via2l0LXRyYW5zZm9ybS1vcmlnaW46IDUwJSA1MCU7CiAgICAgICAgICAgICAgICAtd2Via2l0LWFuaW1hdGlvbjogc3BpbiAxLjVzIGxpbmVhciBpbmZpbml0ZTsKICAgICAgICAgICAgICAgIC13ZWJraXQtYmFja2ZhY2UtdmlzaWJpbGl0eTogaGlkZGVuOwogICAgICAgICAgICAgICAgYW5pbWF0aW9uOiBzcGluIDEuNXMgbGluZWFyIGluZmluaXRlOwogICAgICAgICAgICB9CiAgICAgICAgXV0+PC9zdHlsZT4KICAgIDwvZGVmcz4KICAgIDxnIGlkPSJvdXRlciI+CiAgICAgICAgPGc+CiAgICAgICAgICAgIDxwYXRoIGQ9Ik0yMCwwQzIyLjIwNTgsMCAyMy45OTM5LDEuNzg4MTMgMjMuOTkzOSwzLjk5MzlDMjMuOTkzOSw2LjE5OTY4IDIyLjIwNTgsNy45ODc4MSAyMCw3Ljk4NzgxQzE3Ljc5NDIsNy45ODc4MSAxNi4wMDYxLDYuMTk5NjggMTYuMDA2MSwzLjk5MzlDMTYuMDA2MSwxLjc4ODEzIDE3Ljc5NDIsMCAyMCwwWiIgc3R5bGU9ImZpbGw6YmxhY2s7Ii8+CiAgICAgICAgPC9nPgogICAgICAgIDxnPgogICAgICAgICAgICA8cGF0aCBkPSJNNS44NTc4Niw1Ljg1Nzg2QzcuNDE3NTgsNC4yOTgxNSA5Ljk0NjM4LDQuMjk4MTUgMTEuNTA2MSw1Ljg1Nzg2QzEzLjA2NTgsNy40MTc1OCAxMy4wNjU4LDkuOTQ2MzggMTEuNTA2MSwxMS41MDYxQzkuOTQ2MzgsMTMuMDY1OCA3LjQxNzU4LDEzLjA2NTggNS44NTc4NiwxMS41MDYxQzQuMjk4MTUsOS45NDYzOCA0LjI5ODE1LDcuNDE3NTggNS44NTc4Niw1Ljg1Nzg2WiIgc3R5bGU9ImZpbGw6cmdiKDIxMCwyMTAsMjEwKTsiLz4KICAgICAgICA8L2c+CiAgICAgICAgPGc+CiAgICAgICAgICAgIDxwYXRoIGQ9Ik0yMCwzMi4wMTIyQzIyLjIwNTgsMzIuMDEyMiAyMy45OTM5LDMzLjgwMDMgMjMuOTkzOSwzNi4wMDYxQzIzLjk5MzksMzguMjExOSAyMi4yMDU4LDQwIDIwLDQwQzE3Ljc5NDIsNDAgMTYuMDA2MSwzOC4yMTE5IDE2LjAwNjEsMzYuMDA2MUMxNi4wMDYxLDMzLjgwMDMgMTcuNzk0MiwzMi4wMTIyIDIwLDMyLjAxMjJaIiBzdHlsZT0iZmlsbDpyZ2IoMTMwLDEzMCwxMzApOyIvPgogICAgICAgIDwvZz4KICAgICAgICA8Zz4KICAgICAgICAgICAgPHBhdGggZD0iTTI4LjQ5MzksMjguNDkzOUMzMC4wNTM2LDI2LjkzNDIgMzIuNTgyNCwyNi45MzQyIDM0LjE0MjEsMjguNDkzOUMzNS43MDE5LDMwLjA1MzYgMzUuNzAxOSwzMi41ODI0IDM0LjE0MjEsMzQuMTQyMUMzMi41ODI0LDM1LjcwMTkgMzAuMDUzNiwzNS43MDE5IDI4LjQ5MzksMzQuMTQyMUMyNi45MzQyLDMyLjU4MjQgMjYuOTM0MiwzMC4wNTM2IDI4LjQ5MzksMjguNDkzOVoiIHN0eWxlPSJmaWxsOnJnYigxMDEsMTAxLDEwMSk7Ii8+CiAgICAgICAgPC9nPgogICAgICAgIDxnPgogICAgICAgICAgICA8cGF0aCBkPSJNMy45OTM5LDE2LjAwNjFDNi4xOTk2OCwxNi4wMDYxIDcuOTg3ODEsMTcuNzk0MiA3Ljk4NzgxLDIwQzcuOTg3ODEsMjIuMjA1OCA2LjE5OTY4LDIzLjk5MzkgMy45OTM5LDIzLjk5MzlDMS43ODgxMywyMy45OTM5IDAsMjIuMjA1OCAwLDIwQzAsMTcuNzk0MiAxLjc4ODEzLDE2LjAwNjEgMy45OTM5LDE2LjAwNjFaIiBzdHlsZT0iZmlsbDpyZ2IoMTg3LDE4NywxODcpOyIvPgogICAgICAgIDwvZz4KICAgICAgICA8Zz4KICAgICAgICAgICAgPHBhdGggZD0iTTUuODU3ODYsMjguNDkzOUM3LjQxNzU4LDI2LjkzNDIgOS45NDYzOCwyNi45MzQyIDExLjUwNjEsMjguNDkzOUMxMy4wNjU4LDMwLjA1MzYgMTMuMDY1OCwzMi41ODI0IDExLjUwNjEsMzQuMTQyMUM5Ljk0NjM4LDM1LjcwMTkgNy40MTc1OCwzNS43MDE5IDUuODU3ODYsMzQuMTQyMUM0LjI5ODE1LDMyLjU4MjQgNC4yOTgxNSwzMC4wNTM2IDUuODU3ODYsMjguNDkzOVoiIHN0eWxlPSJmaWxsOnJnYigxNjQsMTY0LDE2NCk7Ii8+CiAgICAgICAgPC9nPgogICAgICAgIDxnPgogICAgICAgICAgICA8cGF0aCBkPSJNMzYuMDA2MSwxNi4wMDYxQzM4LjIxMTksMTYuMDA2MSA0MCwxNy43OTQyIDQwLDIwQzQwLDIyLjIwNTggMzguMjExOSwyMy45OTM5IDM2LjAwNjEsMjMuOTkzOUMzMy44MDAzLDIzLjk5MzkgMzIuMDEyMiwyMi4yMDU4IDMyLjAxMjIsMjBDMzIuMDEyMiwxNy43OTQyIDMzLjgwMDMsMTYuMDA2MSAzNi4wMDYxLDE2LjAwNjFaIiBzdHlsZT0iZmlsbDpyZ2IoNzQsNzQsNzQpOyIvPgogICAgICAgIDwvZz4KICAgICAgICA8Zz4KICAgICAgICAgICAgPHBhdGggZD0iTTI4LjQ5MzksNS44NTc4NkMzMC4wNTM2LDQuMjk4MTUgMzIuNTgyNCw0LjI5ODE1IDM0LjE0MjEsNS44NTc4NkMzNS43MDE5LDcuNDE3NTggMzUuNzAxOSw5Ljk0NjM4IDM0LjE0MjEsMTEuNTA2MUMzMi41ODI0LDEzLjA2NTggMzAuMDUzNiwxMy4wNjU4IDI4LjQ5MzksMTEuNTA2MUMyNi45MzQyLDkuOTQ2MzggMjYuOTM0Miw3LjQxNzU4IDI4LjQ5MzksNS44NTc4NloiIHN0eWxlPSJmaWxsOnJnYig1MCw1MCw1MCk7Ii8+CiAgICAgICAgPC9nPgogICAgPC9nPgo8L3N2Zz4K);
}

/**
 * IE10+ CSS styles go here
 * Using both version of an IE specific selector to target the browser
 */
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  /* Hide the search icon, IE shows the "clear" when focusing * /
    .autocomplete:not(.autocomplete-loading):not(.autocomplete-empty):focus {
    background-image: inherit;
  }

  .autocomplete-loading::-ms-clear {
    display: none;
  }
}

/* Edge CSS styles go here */
@supports (-ms-ime-align: auto) {
  /* Hide the search icon, IE shows the "clear" when focusing
    */
  .autocomplete:not(.autocomplete-loading):not(.autocomplete-empty):focus {
    background-image: inherit;
  }

  .autocomplete-loading::-ms-clear {
    display: none;
  }
}
```


UX - Autocomplete indicators vs IE & Edge clear control


Did some work today with an OData system. Making n number of mistakes
along the way, everything seemed normal, until I got to the this
error message:

    The types 'Edm.Boolean' and 'Edm.String' are not compatible.

It seemed to persist almost no matter what. The solution if you're
here banging your head against the wall is pretty simple, if
frustrating.

OData allows query like syntax. In its operational options, you
_can_ add things together such as `{number} + {number}`. So plus `(+)`
is a very reserved character, and you sir or madam, are using it.
I found this was the case only by dropping out of my prepared url
param that looked like: `criteria/targetUserID eq 'LANCGL'` and
seeing the cURL request itself. The resulting url came out:
`%24filter=criteria%2FtargetUserID+eq+%22LANCGL%22`. All the encoding
in the world did not damage, except for the `+` usage.

If you're using PHP, start searching your REST and cURL libraries
for how the parameters are encoded onto the url. Somewhere, you're
very likely to find `http_build_query`. The very last argument for
that function allows your to swap to RFC3986, which encodes spaces
with %20 instead of +. Do that, and you'll be gold.

```php
http_build_query($options['data'], NULL, NULL, PHP_QUERY_RFC3986)
```


OData criteria encoding and 'Edm.Boolean' are not compatible issues


I've recently started to dump build tools. The abstractions just
aren't needed, and add complexity in some cases. To that end, I'm
nearly doing all my asset management in `package.json` with NPM
scripts. For existing sites I'm maintaining, I can use this as a
simple drop in to help get started. It may require a little
ossification site to site, depending on if you need to ignore
certain themes, or modules. I think the base package here is
clear enough you'll be able to replicate the pieces required.

To get started, copy the below into your top-level directory named
`package.json`. Open terminal, and run `npm install`. It'll grab all
the dependencies it requires, build, and attempt to start watching.
After the initial install you can setup to work by just running
`watch:all`.

Tools included in this package:

- Scss to css compressed with source maps automatically prefixed to
  handle the latest 2 browser versions
- JS checked for quality through jshint, and if passed, minified in
  place to `.min.js` files.

Note that some of these scripts _need_ existing files to work
with, or they will error out. Your initial run might fail because
of conditions like this not being met. You can use the trick
listed as `scss:modules` to disable any particular script you like.

```json
{
  "name": "example.com",
  "version": "1.0.0",
  "description": "Drupal site",
  "main": "index.php",
  "author": "",
  "license": "ISC",
  "browserslist": ["last 2 versions"],
  "scripts": {
    "autoprefixer": "npm run autoprefixer:modules && npm run autoprefixer:themes",
    "autoprefixer:modules": "postcss -u autoprefixer -r sites/all/modules/custom/**/*.css",
    "autoprefixer:themes": "postcss -u autoprefixer -r sites/all/themes/**/*.css",
    "scss": "npm run scss:modules && npm run scss:themes",
    "scss:modules": "node-sass --source-map true --output-style compressed -o sites/all/modules/custom sites/all/modules/custom",
    "scss:modules": "echo \"Debug: scss:modules disabled\"",
    "scss:themes": "node-sass --source-map true --output-style compressed -o sites/all/themes sites/all/themes",
    "uglify": "npm run uglify:modules && npm run uglify:modules",
    "uglify:modules": "uglifyjs-folder sites/all/modules/custom -e -o sites/all/modules/custom",
    "uglify:themes": "uglifyjs-folder sites/all/themes -e -o sites/all/themes",
    "lint": "npm run lint:modules && npm run lint:themes",
    "lint:modules": "jshint sites/all/modules/custom",
    "lint:themes": "jshint sites/all/themes",
    "build:css": "npm run scss && npm run autoprefixer",
    "build:modules:css": "npm run scss:modules && npm run autoprefixer:modules",
    "build:themes:css": "npm run scss:themes && npm run autoprefixer:themes",
    "build:js": "npm run lint && npm run uglify",
    "build:modules:js": "npm run lint:modules && npm run uglify:modules",
    "build:themes:js": "npm run lint:themes && npm run uglify:themes",
    "build:all": "npm run build:css && npm run build:js",
    "watch:modules": "npm-run-all -p watch:modules:css watch:modules:js",
    "watch:modules:css": "onchange \"sites/all/modules/custom/**/*.scss\" -- npm run build:modules:css",
    "watch:modules:js": "onchange \"sites/all/modules/custom/**/*.js\" -- npm run build:modules:js",
    "watch:themes": "npm-run-all -p watch:themes:css watch:themes:js",
    "watch:themes:css": "onchange \"sites/all/themes/**/*.scss\" -- npm run build:themes:css",
    "watch:themes:js": "onchange \"sites/all/themes/**/*.js\" -- npm run build:themes:js",
    "watch:all": "npm-run-all -p watch:modules watch:themes",
    "postinstall": "npm run build:all && npm run watch:all"
  },
  "devDependencies": {
    "autoprefixer": "latest",
    "browser-sync": "latest",
    "mkdirp": "latest",
    "node-sass": "latest",
    "npm-run-all": "latest",
    "onchange": "latest",
    "postcss-cli": "latest",
    "jshint": "latest",
    "uglify-js": "latest",
    "uglifyjs-folder": "latest"
  }
}
```


Sample NPM package.json for Drupal


I've been doing some work recently upgrading massive portions of an
Angular 1.3 code base in preparation to move to Angular 2 (someday).
From a high level stand point, here's the what can be done ahead of
time to help make it easier when you do go:

- Upgrade to 1.5.x
- Learn to write using one way data flow as often as possible. I'd
  suggest using a more functional approach as well, but that's just
  because it's easier to debug.
- Start rewriting as much `$scope` style work as you can into `$ctrl`
  components.
- Make yourself familiar with RxJS observable, and treat anything
  coming from your api like it's an observable instead of a promise.

Today's snippets are about that last point of the conversion. You can
still do it the old way, but Rx ships with Angular 2. You're
eventually going to run into one of the many reasons you would be
better off using it. There are many more, but here's a couple of my
favorite parts.

- It makes handling async events like user input a breeze:
  [draganddrop.js](https://github.com/Reactive-Extensions/RxJS/blob/master/examples/dragndrop/dragndrop.js)
- It can often take less code to achieve the same thing.
- It makes handling socket based push style additions from your
  service layer a no-brainer.

So to that point, I've prepared to codepen's that act much like a
fancy new component in a legacy system would. Yes, the api is
terrible, no you wouldn't be allowed to change until everything
could be fixed. I'm simulating legacy awful at that layer, accept
it and move on. The entire component is terribly over simplified,
but I want to make sure you focus on the RxJS bits.

First, the promise style:

<p 
    data-height="435" 
    data-theme-id="light" 
    data-slug-hash="GjXpNE" 
    data-default-tab="js,result" 
    data-user="lancegliser" 
    data-embed-version="2" 
    class="codepen"
>See the Pen 
    <a href="https://codepen.io/lancegliser/pen/GjXpNE/">
        Angular example - Pull paged api, stitch, filter, sort, and display data
    </a> by Lance Gliser 
    (<a href="http://codepen.io/lancegliser">@lancegliser</a>) on 
    <a href="http://codepen.io">CodePen</a>.
</p>
<script async src="//assets.codepen.io/assets/embed/ei.js"></script>

Then the RxJS solution:

<p 
    class="codepen" 
    data-default-tab="js,result" 
    data-embed-version="2" 
    data-height="445" 
    data-slug-hash="jrvVgz" 
    data-theme-id="light" 
    data-user="lancegliser"
>See the Pen 
    <a href="https://codepen.io/lancegliser/pen/jrvVgz/">
        Angular &amp; RxJS example - Pull paged api, stitch, filter, sort, and display data</a>
        by Lance Gliser 
        (<a href="http://codepen.io/lancegliser">@lancegliser</a>) on 
        <a href="http://codepen.io">CodePen</a>.
    </p>

## The Rx bits

### (Behavior) subjects

Subjects are used to wire in control of your stream. You can cause
updates at any part required, and the rest of the stream will
reprocess. `filterSubject` is being used here to allow in memory
filtering based on keyboard input. A couple notes:

- `BehaviorSubject` allows to cache the last result, in this case
  'skywalker'. Any future subscriptions (like ours in this example)
  automatically receive the last broadcast.
- `BehaviorSubject` could have taken an initial argument. I
  separated it just to make the `.next` call in the controller to be
  more obvious. This would be more useful in the case of something
  like a component binding being the initial filter.
- `var filtered$ = stitched$.combineLatest(filter\$, \_filter);` is
  able to be prepared ahead of time due to the nature of Rx. The
  stream is composed, but not activated until there is at least one
  end subscriber.

```js
var filterSubject = new Rx.BehaviorSubject();
var filter$ = filterSubject.debounceTime(150);
// ...
$ctrl.filter = "skywalker";
filterSubject.next($ctrl.filter);
// ...
var filtered$ = stitched$.combineLatest(filter$, \_filter);
```

### .do`ing things

Rxjs is meant to be largely a functional language. Nearly all the
functions take in something and return a new something: map, filter,
etc. While it is certainly possible to use your operator functions
and handle creating side effects, it's not in the spirit of Rx.
Instead, when you need to cause side effects such as muting a state
object or the `$ctrl` itself, you _should_ wrap that code in
`stream$.do()` code. This makes it immediately obvious to the next
developer (including you 6 months from now), where and what the
side effects are.

It's great for handling these kind of scenarios:

- Setting results into a cache
- Logging what the `stream$` value is before and after an operation.
  Fun note, you can use just: `.do(console.debug)`
- Toggling loading states

```js
var people$ = Rx.Observable.fromPromise(ApiService.getAllPeople()).do(function (
  pilots
) {
  cache.pilots = pilots;
});
```

## Some RX gotchas

I haven't displayed any in this article, it's beyond the scope of an
introduction. There were at least three notable confusing points
along the implementation when I built the real code this was
abstracted from.

### Observable functions sometimes change `this` bindings

Pay close attention to the way your service methods are being
called. A crufty old bit of services I worked against relied on
`this.` `.fromPromise` didn't have this weakness but I ran up
against at least one case where I needed to use something like
`ApiService.getAllPeople().bind(ApiService)`.

### Hot vs Cold & Multicasting

Your observable is entirely capable of processing code in the
background, with or without you listening. This is most often useful
when real time data has to be ready for when it's required. Think
keeping a socket open against a stock streaming service. I found
this article
[Cold vs Hot Observables by thoughttram](http://blog.thoughtram.io/angular/2016/06/16/cold-vs-hot-observables.html)
very useful initially to understand this. A better article once
you can understand the previous would be one by the Rx project
lead: [Hot vs Cold Observables by Ben Lesh](https://medium.com/@benlesh/hot-vs-cold-observables-f8094ed53339).
Both of those articles are going to bring up the concept of
multiple subscribers. It's a concept you're going to need, shortly
into any project of some complexity. Just watch for the moment you
run into `stream$.something()` causing a branch. If you don't make
a multicast, you're actually publishing two Observables of `stream$`.
The results can be unpleasant.

### Documentation

For the love of everything you hold dear...
_check the documentation set you are using_. A great deal of the
links and search engine results on the net are for RxJS 4.x. This
example, and Angular 2, both use RxJS 5. They _not_ compatible
documentations, even for the same function. Methods you'll use
every day such as `.distinctUntilChanged` have had parameter order
changed. Save yourself headache, and recheck, every time you look
something up.

- [RxJS 4.x docs](https://github.com/Reactive-Extensions/RxJS)
- [RxJS 5.x docs](https://github.com/ReactiveX/rxjs)

## Getting started with RxJS

Ben Lesh has a lovely talk on YouTube that goes into many of the
concepts you'll want to learn. While I recommend the entire talk
(it's only 30 min), the most important bits to me were at 8:32.
He talks specifically about how to start trying to use it, and the
most common operators. There are a _lot<_ of operators, but the
general set he'll mention are a great super set. Have a watch:
[RxJS 5 Thinking Reactively | Ben Lesh](https://youtu.be/3LKMwkuK0ZE?t=8m32s)


An example converting angular 1.5 to use RxJS


While working with a form that needed ajax handling I ran into an
issue. The system I was developing was extremely likely to cause
multiple of the same form on the page, one per element. Trying to
find and adjust the form post ajax was starting to involve the
addition of ids, moving down the dom to move back up, etc. Just
nasty, and totally inefficient. So I did a bit of digging to find
a way to pass the initial jQuery \$form element from the ajax
kickoff into the resulting callbacks.

Credit goes to
[Brad House on stackoverflow](http://stackoverflow.com/questions/939032/jquery-pass-more-parameters-into-callback)
for showing me the method. I'm just wrapping it up in a little
cleaner syntax and keeping notes for myself. jQuery's callback
parameters expect a function pointer. What I'm doing here is simply
changing way jQuery goes out to get those functions at run time.
By instructing the callbacks to call closure functions with the
form, we get all the extra parameters we want access to in the
returned function.

This is the relevant part, but I'll add the full working script
below for context too.

```js
// ...
save: function($form){
    jQuery.ajax({
      url: viewControls.controller,
      // Run time call to saveSuccess rather than a static function pointer
      success: viewControls.events.saveSucccess($form),
    });
}
// ...
// Run time closure that returns the required fuction, but includes the $form definition in the function's scope
viewControls.events.saveSucccess = function($form){
  return function(data) {
    console.debug('saveSuccess', $form, data);
  }
}
// ...
```

Full code:

```js
viewControls = {
  controller: "ajax/feedback",
  /**
   * Loops over all exposed feedback forms to prepare them
   */
  ready: function () {
    // Update our path with the proper settings basePath
    viewControls.controller = settings.basePath + viewControls.controller;
    // Loop over the forms
    jQuery(".node-feedback .feedback-controls", context).once(
      "controls",
      viewControls.setup
    );
  },
  /**
   * Binds to the form to submit actions via ajax
   * @param index A numerical value
   * @param element DOM element
   * @return null
   */
  setup: function (index, element) {
    var $form = jQuery(element);
    // Ensure it can't be submitted with a button interaction
    $form.submit(function (event) {
      event.preventDefault();
    });
    // Wire our controls
    $form.find("input[type=submit].save").click(viewControls.events.save);
    $form.find("input[type=submit].send").click(viewControls.events.send);
  },
  /**
   * Saves the form
   * @param $form jQuery form element
   */
  save: function ($form) {
    jQuery.ajax({
      url: viewControls.controller,
      data: $form.serialize() + "&op=save",
      type: "POST",
      dataType: "json",
      success: viewControls.events.saveSucccess($form),
      error: viewControls.events.saveError($form),
      complete: viewControls.events.saveComplete($form),
    });
    $form.find("input[type=submit], button").attr("disabled", "disabled");
  },
  /**
   * Saves the form changes and sends the feedback along to the end user
   * @param $form jQuery form element
   */
  send: function ($form) {
    jQuery.ajax({
      url: viewControls.controller,
      type: "POST",
      data: $form.serialize() + "&op=send",
      dataType: "json",
      success: viewControls.events.sendSucccess($form),
      error: viewControls.events.sendError($form),
      complete: viewControls.events.sendComplete($form),
    });
    $form.find("input[type=submit], button").attr("disabled", "disabled");
  },
  events: {
    /**
     * Finds the form and passes it off to be saved
     * @param event
     */
    save: function (event) {
      event.preventDefault();
      var $form = jQuery(this).parents(".feedback-controls");
      viewControls.save($form);
    },
    saveSucccess: function ($form) {
      return function (data) {
        console.debug("saveSuccess", $form, data);
      };
    },
    saveError: function ($form) {
      return function (jqXHR, textStatus) {
        console.debug("saveError", $form);
      };
    },
    saveComplete: function ($form) {
      return function (jqXHR, textStatus) {
        $form.find("input[type=submit], button").removeAttr("disabled");
      };
    },
    /**
     * Finds the form and passes it off to be saved
     * @param event
     */
    send: function (event) {
      event.preventDefault();
      var $form = jQuery(this).parents(".feedback-controls");
      viewControls.send($form);
    },
    sendSucccess: function ($form) {
      return function (data) {
        console.debug("sendSuccess", $form, data);
      };
    },
    sendError: function ($form) {
      return function (jqXHR, textStatus) {
        console.debug("sendError", $form);
      };
    },
    sendComplete: function ($form) {
      return function (jqXHR, textStatus) {
        $form.find("input[type=submit], button").removeAttr("disabled");
      };
    },
  },
};

jQuery(document).ready(viewControls.ready);
```


Passing Extra Data To JQuery Ajax Callback Functions


I'm putting together a feedback form for a client today in Drupal.
I've been experimenting with ways to improve the form's efficiency,
just general UX. One of the sticking points for me was the complete
lack of simple support for HTML 5 input types in Drupal 7.
Thankfully this is fixed in Drupal 8. For those of us needing
to work today, here's an easy solution.

The most 'helpful' solution I found before going rogue was on
[stack overflow](http://drupal.stackexchange.com/questions/28786/how-do-i-theme-a-form-element).
Except it really doesn't work as advertised, and even if it did, you
add a module dependency. No dice. First, understand that Drupal
itself is pretty stuck on its item types. You could introduce a new
type, but it's quite a bit of work, and you run the risk of module
conflicts. It's far safer to simply use the theming layer to handle
your one off requirements as they come up. If you're using this a
lot, it might not be the best solution, but it is fast.

Start with your standard form callback, and add a `#theme` property
to your field.

```php
/**
 * @param $form
 * @param $form_state
 * @return array
 */
function custom_form($form, &$form_state){
  ...

  $form['email'] = array(
    '#type' => 'textfield',
    '#title' => t('Email'),
    '#required' => TRUE,
    '#attributes' => array(
      'placeholder' => t('Enter your email.'),
    ),
    '#theme' => 'custom_email_input' // This will route to our customization below
  );

  ...
  return $form;
}
```

Implement hook theme in custom.module:

```php
/**
 * Implements hook_theme
 */
function pw_feedback_theme(){
  return array(
    'custom_email_input' => array(
      'render element' => 'element',
      'file' => 'custom.theme.inc',
    ),
  );
}
```

Implement the theme callback in `custom.theme.inc`:

```php
/**
 * Returns HTML for a textfield form element of type email.
 *
 * @param $variables
 *   An associative array containing:
 *   - element: An associative array containing the properties of the element.
 *     Properties used: #title, #value, #description, #size, #maxlength,
 *     #required, #attributes, #autocomplete_path.
 *
 * @ingroup themeable
 * @see theme_textfield
 */
function theme_custom_email_input($variables){
  // Force the core handling of the element
  $output = theme_textfield($variables);

  // Upgrade to the email type
  $output = str_replace('type="text"', 'type="email"', $output);

  return $output;
}
```

This won't give you the upgraded validation automatically. It's
easy to add that, but not in the scope of this little post. Check
out the
[#element_validate](https://api.drupal.org/api/drupal/developer!topics!forms_api_reference.html/7#element_validate)
property for details.


Using HTML 5 Inputs in Drupal 7 Through Theming


I first learned protractor for use in End to End (E2E) testing for
bigshotbracket.com. That was a savage crash course, with a lot of
mistakes. My latest project has given me a chance to review how I
implemented that testing, and improve on it. I finally feel like I
understand it well enough to share with confidence that I'm doing
things correctly. So I'll expand on the concepts from
[the official tutorial](http://angular.github.io/protractor/#/tutorial)
and its [limited handling of page abstractions](http://angular.github.io/protractor/#/page-objects).

For reference, I'm building an application that uses the
[emfluence Marketing Platform](http://www.emarketingplatform.com/).
It creates a specialized front end, that simplifies steps and adds
business logic specific to a client to produce something faster and
more efficient than a generic platform could ever achieve. The tests
you'll see here are specific to the html, angular code, and
functionality you'd see in that application. I'm providing this
context to ensure the tests make sense. We're going to be using a
third party API to create and send email, with all the lovely steps
in between. You'll always have to adapt testing to your own
application.

## Getting Started

To begin, you'll need npm, java, and protractor. Installing npm and
java are out of the scope of this article, but here are the commands
for protractor. From the command line run:

```bash
// Install protractor globally (it's kind of large)
sudo npm install -g protractor
// Install web-drivers as required (these are why it is large)
sudo webdriver-manager update
```

Before you can begin running tests, you'll need selenimum running:

```bash
webdriver-manager start
```

Then when you're ready, you can fire off a test suite using the
following command from the root, if you used the directory setup
in this tutorial:

```bash
protractor protractor/conf.js --suite {name}
```

## Directory Structure

```
httpdocs/
-- protractor/ (e2e test directory)
-- -- pages/ (page definitions)
-- -- -- authentication/
-- -- -- -- logout.page.js
-- -- -- -- reload.page.js
-- -- -- -- token.page.js
-- -- -- emails/
-- -- -- -- edit.page.js
-- -- -- -- index.page.js
-- -- -- -- new.page.js
-- -- -- base.page.js
-- -- -- style-guide.page.js
-- -- specs/ (actual tests)
-- -- -- authentication/
-- -- -- -- failure.spec.js
-- -- -- -- load-from-access-token.spec.js
-- -- -- -- logout.spec.js
-- -- -- emails/
-- -- -- -- delete-draft.spec.js
-- -- -- -- index.spec.js
-- -- -- -- new.spec.js
-- -- -- style-guide/
-- -- -- -- spec.js
-- -- conf.js (protractor configuration file)
-- -- environment.js (configuration files specific to the webhost)
-- index.html (main angular index.html file)
```

## Breakdown

I'll touch briefly on what each file does. `Conf.js` and
`environment.js` are the most important. After that, they are more
just useful for seeing how I approach finding, and testing
conditions. For reference, I've taken a shortcut on authorization
through the marketing platform itself. _All_ off the tests here use
a 'fake' login step I reproduced just for testing. By providing
the `environment.js` file with an access token from your session,
we bypass that tricky piece just for speed of building tests. It's
a slight OAuth security hole, I know. It's worth it to not build
tests for a third party that already tests itself.

### `conf.js`

`protractor/conf.js`

This file is the main definition and starting point for all
protractor tests. We use it define globals, variables, organize
tests into suits, and more. I tend to include directions for other
developers at the top of this file.

```js
// To install protactor:
// sudo npm install -g protractor
// sudo webdriver-manager update

// To run protactor tests use:
// Ensure selenimum is running
// webdriver-manager start
// Fire off a test suite
// protractor protractor/conf.js --suite name
// Or protractor debug protractor/conf.js --suite name (No idea how this works yet)

// Note that $ and $$ are not jQuery
// $: http://angular.github.io/protractor/#/api?view=build$
// $$: http://angular.github.io/protractor/#/api?view=build$$
// Full api documentation is at: angular.github.io/protractor/#/api
// Full expect() and toBe documenation is at: http://jasmine.github.io/2.1/introduction.html

var env = require('./environment.js');

// **dirname retuns a path of this particular config file
var basePath = **dirname + '/';

exports.config = {
// Location of ng-app tag in the root index.html file
// rootElement: 'html',

// The address of a running selenium server.
seleniumAddress: env.seleniumAddress,

// Capabilities to be passed to the webdriver instance.
capabilities: env.capabilities,

// Spec patterns are relative to the location of the spec file. They may include glob patterns:
// {directory}/\*.js is a one level wildcard
// {directory}/\*\*.js is a multilevel wildcard
// I generally prefer to run my tests in a defined order, as they may depend on actions from the previous
suites: {
styles: [ 'specs/style-guide/spec.min.js' ],
// Potential touch point to launch accessibility testing available through additional chrome tools
accessibility: [ 'specs/style-guide/spec.min.js' ],
authentication: [
'specs/authentication/failure.spec.js',
'specs/authentication/load-from-access-token.spec.js',
'specs/authentication/logout.spec.js',
],
emails: [
// We have to log in before using the next tests
'specs/authentication/load-from-access-token.spec.js',
// Now we run the specs in the order required to not leave too much trash
// General index
'specs/emails/index.spec.js',
// Create and delete a draft
'specs/emails/new.spec.js',
'specs/emails/delete-draft.spec.js',
// TODO Create, add contacts, schedule, cancel schedule, and send
'specs/emails/new-email.spec.js',
'specs/emails/edit.spec.js',
'specs/emails/contacts-selection.spec.js', // TODO
'specs/emails/schedule.spec.js', // TODO
'specs/emails/cancel-schedule.spec.js', // TODO
'specs/emails/send.spec.js', // TODO
],
},

// Base url
baseUrl: env.baseUrl,

// Options to be passed to Jasmine-node.
jasmineNodeOpts: {
showColors: true, // Use colors in the command line report.
},

/_
plugins: [{
// Accessibility plugin setup
chromeA11YDevTools: true,
path: '/opt/local/lib/node_modules/protractor/plugins/accessibility'
}]
_/

onPrepare: function () {
// "relativePath" - path, relative to "basePath" variable
global.requirePage = function (relativePath) {
return require(basePath + 'pages/' + relativePath + '.page.min.js');
};

    global.getErrors = function(){
      return $$('.alert-box.alert');
    };
    global.getMessages = function(){
      return $$('.alert-box.success');
    };

    global.escapeRegExp = function(str) {
      return str.replace(/[\-\[\]\/\{\}\*\+\?\.\\\^\$\|]/g, "\\$&");
    }

}

};

// These will be made available in browser.params inside tests
exports.config.params = env.params;
exports.config.params.currentUrl = undefined;
exports.config.params.testEmail = {
title: 'Protractor Test Email'
};
```

### `environment.js`

`protractor/environment.js`

This file is the environment specific definitions. We use it define
items need in local or dev environments. This file should generally
be in your `.gitignore`.

```js
module.exports = {
  // The address of a running selenium server.
  seleniumAddress: process.env.SELENIUM_URL || "http://localhost:4444/wd/hub",

  // Capabilities to be passed to the webdriver instance.
  capabilities: {
    browserName: process.env.TEST_BROWSER_NAME || "chrome",
    version: process.env.TEST_BROWSER_VERSION || "ANY",
  },

  baseUrl: "https://local.example.com/",

  // These will be made available in browser.params inside tests
  params: {
    accessToken: "{some-value}",
  },
};
```

### `spec.js`

`protractor/specs/style-guide/spec.js`

This a basic spec definition file. It includes one or more
'definition' and 'it' blocks. These represent logic groupings of
functional tests.

```js
// Define the 'Page' object by using the global.requirePage function from conf.js to require it
var StyleGuidePage = requirePage("style-guide");

// Create a new instance of the 'Page' object
var page = new StyleGuidePage();

// Starting describing the groupings
describe("basic element definitions", function () {
  // Create a test using 'it'.
  // 'it' functions run asynchronously, but in queue order for each other
  it("should define h1", function () {
    // Note that page.get() _must_ called inside the first 'it' function
    page.get();
    expect(element(by.tagName("h1")).getText()).toBeDefined();
  });
  it("should define h2", function () {
    expect(element(by.tagName("h2")).getText()).toBeDefined();
  });
  it("should define h3", function () {
    expect(element(by.tagName("h3")).getText()).toBeDefined();
  });
  it("should define h4", function () {
    expect(element(by.tagName("h4")).getText()).toBeDefined();
  });
  it("should define h5", function () {
    expect(element(by.tagName("h5")).getText()).toBeDefined();
  });
  it("should define h6", function () {
    expect(element(by.tagName("h6")).getText()).toBeDefined();
  });
  it("should define tables", function () {
    expect(element(by.tagName("table")).getText()).toBeDefined();
  });
});

describe("basic message handling", function () {
  // Get the errors using the global.getErrors function from conf.js
  var errors = getErrors();
  // errors was selected using \$\$. It returns a group (list), so you'll have to check pieces
  it("should generate error messages", function () {
    expect(errors).toBeDefined();
    expect(errors.count()).toBe(1);
  });
  it('error messages should contain "sample error"', function () {
    expect(errors.get(0).getText()).toContain("Sample error");
  });
  // Get the messages using the global.getMessages function from conf.js
  var messages = getMessages();
  it("should generate messages", function () {
    expect(messages).toBeDefined();
    expect(messages.count()).toBe(1);
  });
  it('messages should contain "sample message"', function () {
    expect(messages.get(0).getText()).toContain("Sample message");
  });
});

// Special handling for unique elements such as 'Hold to activate' buttons
describe("hold buttons", function () {
  var holdButton = page.getHoldButton();
  it("should give feedback on interaction", function () {
    browser.actions().mouseDown(holdButton).perform();
    browser.sleep(50);
    expect(holdButton.getAttribute("class")).toMatch("holding");
    browser.actions().mouseUp(holdButton).perform();
  });
  it("should not complete in under .5 seconds", function () {
    browser.actions().mouseDown(holdButton).perform();
    browser.sleep(50);
    browser.actions().mouseUp(holdButton).perform();
    expect(holdButton.getAttribute("class")).toMatch("hold-failure");
  });
  it("should complete eventually", function () {
    browser.actions().mouseDown(holdButton).perform();
    browser.sleep(2000);
    browser.actions().mouseUp(holdButton).perform();
    expect(holdButton.getAttribute("class")).toMatch("hold-success");
  });
});
```

### `base.page.js`

`protractor/pages/base.page.js`

The base page serves as a way to collect standard functionality that
can later be inherited in other pages. These methods will be used by
the `style-guide.page.js` file below.

```js
var BasePage = function () {};

BasePage.prototype.path = "#/";

BasePage.prototype.getPath = function () {
  return path;
};

// This is used in page to page reloads. You'll see more details on usage later.
BasePage.prototype.getPathRegex = function () {
  var regex = escapeRegExp(this.getPath());
  return new RegExp(regex);
};

/**
 * - Gets the page directly by loading a url. This will not reload the current page
 */
BasePage.prototype.get = function () {
  var url = browser.baseUrl + this.getPath();

  if (browser.params.currentUrl !== url) {
    browser.params.currentUrl = url;
    return browser.get(url);
  } else {
    return true;
  }
};

module.exports = BasePage;
```

### `style-guide.page.js`

`protractor/pages/style-guide.page.js`

The previous spec file referenced page level functions frequently.
The logic to find these elements and page variables are contained in
`page.js` files to keep logic simple to maintain. See
[the protractor page object reference](http://angular.github.io/protractor/#/page-objects)
for more on the concept of why you need this.

This a basic spec definition file. It includes one or more
'definition' and 'it' blocks. These represent logic groupings of
functional tests.

```js
"use strict";

var BasePage = requirePage("base");

var StyleGuidePage = function () {};

StyleGuidePage.prototype = new BasePage();

StyleGuidePage.prototype.path = "style-guide";

StyleGuidePage.prototype.getLoginLink = function () {
  return element(by.id("header-login"));
};

StyleGuidePage.prototype.getHoldButton = function () {
  return $("button[hold-button]");
};

module.exports = StyleGuidePage;
```

### Additional Tests and Pages

Just to show some additional functionality to adapt from, and how
I've handled page to page testing with the least duplication
possible, here's the 'create new email that redirects to editing
email' test. Note that I'm heavily reliant here on Protractor's
natural handling. Any action that kicks off an angular action
such as \$http, causes testing to stop until Angular resolves.

#### `new.spec.js`

`protractor/specs/email/new.page.js`

```js
var NewEmailPage = requirePage('emails/new');

// Note that page.get HAS to be used inside an it() call.
var page = new NewEmailPage();

describe('new email page', function() {
    var titleInput, firstNameInput, templates, templateThumbnails, continueButton;

    it('should contain a required title input', function () {
        page.get();
        titleInput = page.getTitleInput();
        expect(titleInput.isPresent()).toBeTruthy();
        expect(titleInput.getAttribute('required')).toBeTruthy();
    });

    it('should contain a required from name input', function () {
        firstNameInput = page.getFromNameInput();
        expect(firstNameInput.isPresent()).toBeTruthy();
        expect(firstNameInput.getAttribute('required')).toBeTruthy();
    });

    it('should default your from name based on your account', function(){
        expect(firstNameInput.getAttribute('value')).toBeTruthy();
    });

    it('should contain a list of templates available to you', function () {
        templates = page.getTemplates();
        expect(templates.count()).toBeGreaterThan(0);
    });

    it('should set the templateId model when a thumbnail is clicked', function () {
        templateThumbnails = page.getTemplateThumbnails();
        templateThumbnails.get(0).click();
        expect(templates.get(0).getAttribute('checked')).toBeTruthy();
    });

    it('should enable the next button only after filling in title, from, and template', function () {
        continueButton = page.getContinueButton();
        expect(continueButton.getAttribute('disabled')).toBeTruthy();
        titleInput.sendKeys( browser.params.testEmail.title );
        templateThumbnails.get(0).click();
        expect(continueButton.getAttribute('disabled')).not.toBeTruthy();
    });

    it('should redirect you to the edit step when you click continue', function () {
        var nextPage = page.getNextPage();
        continueButton.click().then(function(){
        var urlPromise = browser.getCurrentUrl();
        expect( urlPromise ).toMatch( nextPage.getPathRegex());
        urlPromise.then(function(url){
        // Make sure to alert the BasePage we've moved
        browser.params.currentUrl = url;
    });
});
```

#### `new.page.js`

`protractor/pages/email/new.page.js`

```js
"use strict";

var BasePage = requirePage("base");
var EditEmailPage = requirePage("emails/edit");

var NewEmailPage = function () {};

NewEmailPage.prototype = new BasePage();

NewEmailPage.prototype.path = "emails/new";

NewEmailPage.prototype.getTitleInput = function () {
  return element(by.model("title"));
};

NewEmailPage.prototype.getFromNameInput = function () {
  return element(by.model("fromName"));
};

NewEmailPage.prototype.getTemplates = function () {
  return $$("ul.templates li input[type=radio]");
};

NewEmailPage.prototype.getTemplateThumbnails = function () {
  return $$("ul.templates li label img");
};

NewEmailPage.prototype.getContinueButton = function () {
  return element(by.id("continue"));
};

EditEmailPage.prototype.getNextPage = function () {
  return new EditEmailPage();
};

module.exports = NewEmailPage;
```

<h4>edit.page.js</h4>
<pre>protractor/pages/email/edit.page.js</pre>
```js
'use strict';

var BasePage = requirePage('Base');

var EditEmailPage = function(){};

EditEmailPage.prototype = new BasePage();

EditEmailPage.prototype.path = 'emails/#';

EditEmailPage.prototype.getTitleInput = function(){
return element(by.model('title'));
};

EditEmailPage.prototype.getFromNameInput = function(){
return element(by.model('fromName'));
};

EditEmailPage.prototype.getContinueButton = function(){
return element(by.id('continue'));
};

module.exports = EditEmailPage;

````

There are still a load of things I'm learning, mostly about DOM
selection, and the limitations of Jasmine's `expect()` options.
It's getting clearer, and I'm really looking forward to being
able to ensure the entire application works as expected in under
30 seconds.

One last little bonus, as it took me a while to figure it out:
Here's how to find a row with a link with a class of 'title' and
text of 'Protractor Test Email', then return the parent row, and
eventually the delete button:

```js
// The draft list. A nice simple id
var drafts = element( by.id('drafts-list') );
// The row, with the class and title match, and back up to the row
var email = drafts.element(by.cssContainingText('.title', title)).element(by.xpath('ancestor::tr'));
// And the child delete button
var button = email.\$('button.delete');
````

Now there's a good intro to how you can find your element...

## Some gotchas

Having spent the last two weeks deep in testing, I thought I'd
share findings with you:

- Always call `browser.driver.manage().window().setSize()` and
  provide random `X` and `Y` to simulate different devices during your
  `conf.js` `onPrepare`.
- You can and should test memory allocation when testing in chrome.
  Use `browser.driver.executeScript('return window.performance.memory.usedJSHeapSize;').then(function(heapSize){ });`
- `browser.driver.executeScript('something()', element)` will report
  "Failed: Maximum call stack size exceeded" if the argument you're
  passing in is too large. Always pass in using
  `element.getWebElement()` instead.
- `browser.driver.executeScript('something()', element)` will report
  "Failed: Maximum call stack size exceeded" if the return value is
  too large. Return only what you really need.


Automated End To End Testing for Angular


I ran across a nifty QA issue today. It's certainly a fringe case,
but I found no documentation about it anywhere. So I hope this helps
you.

Download links are becoming hugely popular. They reduce the overhead
of backend programming to force specific headers just to bypass
direct navigation.

```html
<a href="/file.pdf" download>Sample File</a>
```

What I found today was that my download link worked on my local
computer, but not on the development site. This was the case in
Chrome, FireFox, and Safari. At first, I blamed Angular. It turns
out Angular will attempt to navigate to file urls, and likely hit
your "otherwise" redirect. After correct that by adding a
`target="_self"` attribute, the file still failed to download.

I eventually copied my download link out of Angular, into just a
flat little html file. Still the download link was not working.
But, only on the development server.

As one of those crazy, swear, drink, set it on fire tests I
decided to disable SSL on the server. Our client had asked us to
run on a domain with a self signed cert. It turns out this was the
problem! All of the major browsers appear to refuse to activate
the download from site with an SSL issue, even if you accept the
bad cert! You can download the file directly via url if you were
to right click and copy the link. But it implements the same
protective behavior if you use right click "Save as" functionality
too.

There's no warning, no notification. Just... nothing. It's a
little obtuse, but this is a very fringe case. Just one more
little thing to remember about self signed certificates.


HTML Download Attribute - SSL Gotcha

As your angular application grows, you'll quickly look for ways to
distribute logic into manageable portions. You could (and should)
simply produce js files dedicated to directives, controllers, and
app separately, then use grunt to create your production file.
But, you can do one better than that. You can simply not load
entire sections of the site the user never visits. Through the use
of require.js and angular's ui-router you can lazy load page
controllers on demand, just like the template files.

## File Breakdown

To make this work you'll need the following setup:

### `index.html`

```html
<head>
  ...
</head>
<body>
  <div id="wrap">
    
    <main id="main" ng-include="Page.mainUrl">
      <div ng-view autoscroll="true" class="slide"></div>
    </main>
    
  </div>
  <script
    type="text/javascript"
    src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.13/angular.min.js"
  ></script>
  <script type="text/javascript" src="/assets/require.min.js"></script>
  <script type="text/javascript" src="/app/core/app.js"></script>
</body>
```

### `app.js`

```js
// declare app and modules
var app = angular.module('main', [
  'ngRoute'
  // ...
]);

// Prepare configuration to lazy load items based on route
app.config([
  '$routeProvider',
  '$controllerProvider',
  '$compileProvider',
  '$filterProvider',
  '$provide',
  // ...
  function(
    $routeProvider,
    $controllerProvider,
    $compileProvider,
    $filterProvider,
    $provide,
   // ...
) {
  ...
  // save references to the providers so we can lazy load items later
  app.lazy = {
    controller: $controllerProvider.register,
    directive: $compileProvider.directive,
    filter: $filterProvider.register,
    factory: $provide.factory,
    service: $provide.service,
  };
  /* Routes */
  $routeProvider
    // Standard routing
    .when('/', {
      templateUrl : 'app/core/templates/home.html',
      controller  : 'mainCtrl'
    })
    // Lazy loading routing
    .when('/maintenance', {
      templateUrl : 'app/maintenance/index.html',
      controller  : 'maintenanceCtrl',
      resolve: {
        load: ['$q', '$rootScope', function ($q, $rootScope) {
          var deferred = $q.defer();
          require ([
            'app/maintenance/controller', // (will look for controller.js)
          ], function () {
             $rootScope.$apply(function () { deferred.resolve(); });
          });
          return deferred.promise;
        }]
      }
    });
  // ...
}]);
```

### Lazy controller setup

The new controllers are pretty much exactly the same as normal
controllers. The only difference is the initial controller loading
that looks like this:

```js
app.lazy.controller("maintenanceCtrl", function (
  $scope
  // ...
) {
  // ...
});
```

Lazy Loading Angular (<= 1.3) Controllers


I needed a hold button that gave visual feedback. This fills with
a color and duration you define then calls whatever method you
give it. Arguments are allowed as part of the success callback.
I'll continue to tweak on it as I use it more.

Inspiration for this code came from
[lazyentropy](http://www.lazyentropy.com/blog/2015/03/18/hold-button-angular-js.html).
I just wanted something a little more self-contained than his
methods allowed for.

Gist available on [GitHub](https://gist.github.com/lancegliser/a29dacb4f75f13195b5c).

## `directives.js`

```js
app.directive("holdButton", function ($parse, $interval) {
  //The framerate of the progress bar, progression will be evaluated every 5ms.
  var tickDelay = 10;
  var minFill = 5;

  return {
    restrict: "A",
    scope: {
      holdButtonSuccess: "&",
    },
    link: function postLink(scope, element, attrs) {
      var started, completed, stop;

      var engage = function ($event) {
        var holdDelay = attrs.holdButtonDelay
          ? $parse(attrs.holdButtonDelay)(scope) || 400
          : 400;
        var counter = 0;
        var nbTick = holdDelay / tickDelay;
        element.removeClass("hold-success", "hold-failure");
        element.addClass("holding");
        completed = false;

        var fillColor = !!attrs.holdButtonFillColor
          ? attrs.holdButtonFillColor
          : "#A1A1A1";
        element.css(
          "background-image",
          "linear-gradient(to right, " +
            fillColor +
            " " +
            minFill +
            "%, transparent " +
            minFill +
            "%)"
        );

        // Call the onTick function `nbTick` times every `tickDelay` ms.
        // stop is the stopper function
        stop = $interval(onTick, tickDelay, nbTick);
        started = true;
        function onTick() {
          counter++;
          var percentage = Math.max(
            Math.round((counter / nbTick) * 100),
            minFill
          );
          element.css(
            "background-image",
            "linear-gradient(to right, " +
              fillColor +
              " " +
              percentage +
              "%, transparent " +
              percentage +
              "%)"
          );

          // If we reach `nbTick` then we're done
          if (counter === nbTick) {
            if (!!scope.holdButtonSuccess) {
              scope.holdButtonSuccess();
            }
            completed = true;
            element.addClass("hold-success");
            element.css("background-image", null);
          }
        }
      };

      var disengage = function ($event) {
        // Prevent standard events for all interactions
        $event.stopPropagation();
        $interval.cancel(stop);
        element.removeClass("holding");
        element.css("background-image", null);

        if (!started || completed) {
          return;
        }
        element.addClass("hold-failure");
        // TODO add a failure callback?
      };

      element.on("mousedown", function ($event) {
        engage($event);
      });
      element.on("mouseup", function ($event) {
        disengage($event);
      });
      element.on("mouseleave", function ($event) {
        disengage($event);
      });

      // Touch events
      element.on("touchstart", function ($event) {
        engage($event);
      });
      element.on("touchend", function ($event) {
        disengage($event);
      });
    },
  };
});
```

## Usage

```html
<button
  hold-button
  hold-button-success="holdAction()"
  hold-button-delay=""
  hold-button-fill-color=""
>
  Hold to Activate
</button>
```

```css
button.holding {
  border-style: dashed;
}
button.hold-success {
  background-color: #43ac6a;
  border-color: #368a55;
  color: #fff;
}
```

### Protractor / Jasmine Test

It seems this produces errors in Firefox. I haven't yet fixed them:

    UnknownError: Cannot press more then one button or an already pressed button.'
    UnknownError: Cannot press more then one button or an already pressed button.' when calling method: [wdIMouse::down]

```js
describe("hold buttons", function () {
  // You'll need to write the page definition yourself
  var holdButton = page.getHoldButton();
  it("should give feedback on interaction", function () {
    browser.actions().mouseDown(holdButton).perform();
    browser.sleep(50);
    expect(holdButton.getAttribute("class")).toMatch("holding");
    browser.actions().mouseUp(holdButton).perform();
  });
  it("should not complete in under .5 seconds", function () {
    browser.actions().mouseDown(holdButton).perform();
    browser.sleep(50);
    browser.actions().mouseUp(holdButton).perform();
    expect(holdButton.getAttribute("class")).toMatch("hold-failure");
  });
  it("should complete eventually", function () {
    browser.actions().mouseDown(holdButton).perform();
    browser.sleep(2000);
    browser.actions().mouseUp(holdButton).perform();
    expect(holdButton.getAttribute("class")).toMatch("hold-success");
  });
});
```


AngularJS - Hold To Activate Button Directive


I'm leaving this one here, mostly as a note for myself. I've found
too often that samples on the web, and indeed in existing code I
inherit are chalked full of 'doing it the hard way' and memory
leaks. This is the simplest and cleanest method for handling
streaming large amounts of data out to a csv.

```php
function _write_csv(){
  $path = 'public://{directory}/{subdirectory}/';
  $filename = '{something}-' . REQUEST_TIME . '.csv';
  // Ensure the directory
  if( !file_prepare_directory($path, FILE_CREATE_DIRECTORY) ){
    drupal_set_message( t('Unable to create directory in file system. Check permissions and try again.'), 'error' );
    return;
  }
  // Ensure the file
  $file = file_save_data('', $path . $filename);
  if( !$file ){
    drupal_set_message( t('Unable to write to file system. Check permissions and try again.'), 'error' );
    return;
  }
  // Stream data - This is a simplified example. Better to do it in a batch if you have a high volume of data
  $fh = fopen($file->uri, 'w');
  if( !$fh ){
    drupal_set_message( t('Unable open file for writing. Check permissions and try again.'), 'error' );
    return;
  }
  fputcsv($fh, array(
    'Column 1',
    'Column 2',
  ));
  for($i = 0; $i < 3; ++$i){
    fputcsv($fh, array(
      'Column 1 - ' . $i,
      'Column 2 - ' . $i,
    ));
  }
  fclose($fh);
  // Notify the filesystem of the size change
  $file->filesize = filesize($file->uri);
  file_save($file);
  // Tell the user where we stuck it
  drupal_set_message( t('Export complete. <a href="!url">!filename</a>.', array(
    '!url' => file_create_url($file->uri),
    '!filename' => $filename,
  )));
}
```


Writing CSV Files Using Drupal


I've been working on an angularjs project that features a Drupal
services backend. As I'm new to angular (or was), I thought I had
to have been doing something wrong posting data back to Drupal to
save my user accounts. The response from the services backend would
be a 406, with the messages:

    406 (Not Acceptable : An illegal choice has been detected. Please contact the site administrator.)

Actually, you'll have multiple copies of
"An illegal choice has been detected. Please contact the site
administrator." depending on the number of list and entity
reference fields you are posting. The Drupal logs on the backend
will contain multiple copies as well, with one of two additions per.

    Warning: Illegal offset type in isset or empty in list_field_validate()
    (line 394 of modules/field/modules/list/list.module)
    Warning: Illegal offset type in isset or empty in _form_validate()
    (line 1368 of includes/form.inc).

It took a while to track down what was happening. It made no sense
that I could not post back the user object I had just received via
api. After an hour googling, I came across this little
hint: http://drupal.stackexchange.com/questions/61124/drupal-7-services-3-inse....

The author explains that he was experiencing the same issue, but
found his own solution. He modified the data being posted to
services to represent the format of data found the node form
array, not in the end structure resolved. I'm not sure he was aware
that was what he was doing, but it lead me to further searching.
I came across a bug report against the core for Drupal that
explained why the data format the previous author found worked.
It seems services is designed to use a somewhat disused part of
Drupal for its save operations. It uses version of
`drupal_form_submit` to allow validation in a generic fashion.
This lets them get the errors seen above easily, without knowing
what modules are actually at work. The issue in doing that is the
data structure is not the real node, it's the form, which loops
back to the bug.

From what I can tell, both services, and the core seem responsible
for this bug. Not really sure which should fix it, arguments
could be made for both. The list module is part of core, services
is its own animal, and entity reference is yet another responsible
party. Honestly, the chance of this being fixed before my project
needed to be done is minimal, and likely for yours as well if you're
reading this. So, I worked out my own solution, perhaps services,
and entity reference could add it to their code base, I'll link
them here for reference. But for you and I, we can use services
to fix services!

There's a lovely api hook in services that allows us to modify
arguments before they are passed to controllers:
`hook_services_request_preprocess_alter`.
So, here's some experimental code I've produced that fixes both list
module select, and entity reference select fields. It does leave a
note in the logs if it rewrites a field so make sure check them
if you find any odd field based behaviors.

```php
/**
 * Allow to alter arguments before they are passed to service callback.
 *
 * @param $controller
 *   Controller definition
 * @param $args
 *   Array of arguments
 * @param $options
 *
 * @see services_controller_execute()
 * @see services.runtime.inc
 */
function custom_services_request_preprocess_alter($controller, &$args, $options) {
  // Look for node and user callbacks to correct the argument format automatically
  // @see http://drupal.stackexchange.com/questions/61124/drupal-7-services-3-inse...
  // @see https://www.drupal.org/node/1195306

  // No callback? No work
  if( empty($controller['callback']) ){
    return;
  }

  // Not one of ours? Skip it
  if( !in_array($controller['callback'], array(
    '_user_resource_create',
    '_user_resource_update',
    '_node_resource_create',
    '_node_resource_update',
  ))){
    return;
  }

  // Determine the entity type
  if( $controller['callback'] == '_user_resource_update' || $controller['callback'] == '_node_resource_update' ){
    $entity =& $args[1];
  } else {
    $entity =& $args[0];
  }
  $language = !empty($entity['language'])? $entity['language'] : LANGUAGE_NONE;

  // Get a field dump of properties associated with this entity type
  $fields = field_info_fields();

  // Modify the input of all incoming data for fields of type entity_reference
  // or using the select widget
  foreach( $fields as $field_name => $field_settings ){
    // Skip non-problematic fields
    if( !in_array($field_settings['module'], array('list', 'entityreference')) ){
      continue;
    }

    // Skip fields that are not present in the posted data
    if( !array_key_exists($field_name, $entity) ){
      continue;
    }

    switch($field_settings['module']){
      case 'list':
        if( empty($entity[$field_name][$language][0]) ){
          continue;
        }
        $values = array();
        foreach( $entity[$field_name][$language] as $field_item ){
          $values[] = $field_item['value'];
        }
        $entity[$field_name][$language] = $values;

        watchdog(
          'services'
          ,t('Entity %field_name argument rewritten by custom programming. <pre>!data</pre>')
          ,array(
                '%field_name' => $field_name,
                '!data' => print_r($entity[$field_name], TRUE),
          )
          ,WATCHDOG_INFO
        );
        break;
        case 'entityreference':
          if( empty($entity[$field_name][$language][0]['target_id']) ){
          continue;
        }
        $values = array();
        foreach( $entity[$field_name][$language] as $field_item ){
          $values[] = $field_item['target_id'];
        }
        $entity[$field_name][$language] = $values;

        watchdog(
          'services'
          ,t('Entity %field_name argument rewritten by custom programming. <pre>!data</pre>')
          ,array(
                '%field_name' => $field_name,
                '!data' => print_r($entity[$field_name], TRUE),
          )
          ,WATCHDOG_INFO
        );
        break;
    }
  }

}
```


Drupal 7 Services List and Entity Reference Field Issues


I had a need to consume a custom service I created in Drupal
services. There's loads of tutorials on how to do that, feel
free to google. But my previous code for _using_ the api I created
was for D6, a few things have changed. Looking around I found most
examples were javascript, or using Drupal's http library. I wrote a
tiny little object just as a simple way to consume using curl for
reference. It's not complete, but it lets you log in and out.
You can take it from there to build what you need.

```php
/**
 * Returns an api class for use
 */
class ApiConsumer {
  const API_ENDPOINT = '/api';
  private static $username = '{name}';
  private static $password = '{password}';
  private $protocol;
  private $host_name;
  private $api_uri;
  private $connected = FALSE;
  private $session_cookie;
  private $token;

  public function __construct(){
    // Define target
    $this->protocol = PhonyVendorCheck::getTargetProtocol();
    $this->host_name = PhonyVendorCheck::getTargetHostName();
    $this->api_uri = $this->protocol . $this->host_name . ApiConsumer::API_ENDPOINT . '/';
    // Automatically login
    $this->login(self::$username, self::$password);
  }

  function __destruct(){
    // Automatically log out
    $this->logout();
  }

  /**
   * Determines if the api is connected or not
   */
  public function connected(){
    return $this->connected;
  }

  /**
   * Attempts to login a user
   * @param string $username
   * @param string $password
   * @return boolean
   */
  private function login($username, $password){
    if( $this->connected ){
      return TRUE;
    } else {
      $response = $this->request('POST', 'user/login', array(
        'username' => $username,
        'password' => $password,
      ));
      if(
        empty($response)
        || empty($response->session_name)
        || empty($response->sessid)
      ){
        return FALSE;
      }
      $this->connected = TRUE;
      $this->session_cookie = $response->session_name . '=' . $response->sessid;
      $this->token = $response->token;

      return TRUE;
    }
  }

  /**
   * Attempts to logout a user
   * @param string $username
   * @param string $password
   * @return boolean
   */
  private function logout(){
    if( !$this->connected ){
      return FALSE;
    } else {
      $response = $this->request('POST', 'user/logout');
      if( empty($response) ){
        return FALSE;
      }
      $this->connected = FALSE;
      $this->session_cookie = NULL;
      $this->token = NULL;
      return TRUE;
    }
  }

  /**
   * Makes a request
   * @param string $method GET
   * @param string $uri
   * @param array $data
   * @return mixed
   */
  private function request($method = 'GET', $uri, $data = array()){
    //--------------login to the server------------------------
    $service_url = $this->api_uri . $uri . '.json';
    // set up the request
    $curl = curl_init($service_url);
    curl_setopt($curl, CURLOPT_RETURNTRANSFER, TRUE);  // have curl_exec return the string
    if( $method == 'POST' ){
      $json_data = json_encode($data);
      curl_setopt($curl, CURLOPT_CUSTOMREQUEST, "POST");
      curl_setopt($curl, CURLOPT_POSTFIELDS, $json_data);
      $headers = array(
        'Content-Type: application/json',
        'Content-Length: ' . strlen($json_data),
      );
      if( !empty($this->token) ){
        $headers[] = 'X-CSRF-Token:' . $this->token;
      }
      curl_setopt($curl, CURLOPT_HTTPHEADER, $headers);
    } else {
      $headers = array();
      if( !empty($this->token) ){
        $headers[] = 'X-CSRF-Token:' . $this->token;
      }
      curl_setopt($curl, CURLOPT_HTTPHEADER, $headers);
    }
    if( !empty($this->session_cookie) ){
      curl_setopt($curl, CURLOPT_COOKIE, $this->session_cookie);
    }
    // make the request
    curl_setopt($curl, CURLOPT_VERBOSE, true); // output to command line
    try {
      $response = curl_exec($curl);
    } catch(Exception $e) {
      return FALSE;
    }
    curl_close($curl);
    return json_decode($response);
  }
}
```


Drupal 7 Services Example - PHP Curl


Love getting to learn something new. Going through some tutorials
today, I realized there's an 'easy' hook to enable caching of the
renderable arrays I never knew about. What exactly _is_ a
renderable array? ... Maybe the easiest way you can think of it is
structured data that needs to be transformed into html. Previously
I'd been using `cache_set` and `cache_get`, but this is quicker,
and a bit more flexible. You’d generally see modules building
something like this when creating content inside a view using
`hook_node_view`. But, knowing the caching option exists, I might
start pushing it down to the theme layer more often.

## Theoretical Example

There's an initial breakdown of this technique I'll copy verbatim
from [lullabot](http://www.lullabot.com/blog/article/beginners-guide-caching-data-drupal-7).

    <p>In Drupal 7, "renderable arrays" are used extensively when building the contents of each page for display. Modules can define page elements like blocks, tables, forms, and even nodes as structured arrays; when the time comes to render the page to HTML, Drupal automatically uses thedrupal_render() function to process them, calling the theme layer and other helper functions automatically. Some complex page elements, though, can take quite a bit of time to render into HTML. By adding a special #cache property onto the renderable element, you can instruct thedrupal_render() function to cache and reuse the rendered HTML each time the page element is built.</p>
    <?php
    $content['my_content'] = array(
      '#cache' => array(
        'cid' => 'my_module_data',
        'bin' => 'cache',
        'expire' => time() + 360,
      ),
      // Other element properties go here...
    );
    ?>
    <p>The #cache property contains a list of values that mirror the parameters you would pass to the cache_get() andcache_set() if you were calling them manually. For more information on how caching of renderable elements works, check out the detailed documentation for the drupal_render() function on api.drupal.org.</p>

## Working Example

But, that doesn't really fully explain it the usage. See, a novice
might look at that think they are done. But there's a gotcha here...
Drupal can't magically stop your function executing. If you tell it
there's a cachable array, but then immediately spend your processor
cycles doing the expensive operation, you actually make the process
worse. Maybe a better example than lullabot's would be something
like this:

Our goal is to access this page's menu item, and output content
defined as submenu items. For identifiable nodes as immediate
children, we want to render a preview. Anything else can be output
as a text only link. We'll start by using `node_view` to declare
the content. Then use the #pre_render property of the array to call
our expensive function that does the actual processing.

```php
/**
 * Implemenation of hook_node_view $view_mode = full
 * Renders child menu items of this node as full teasers.
 */
function custom_node_view_full($node, $view_mode, $langcode){
  // Declare that we will be adding content
  $node->content['children'] = array(
    '#theme' => 'item_list', // Define what the theme function we'll use is
    '#items' => array(), // A property required by the theme function
    '#weight' => 99, // Defines where in the content this item appears
    '#attributes' => array( // Extra html attributes to be added to the final element
  	  'class' => array('children', 'nodes') // Html classes
    ),
    // This is the key. You tell Drupal HOW to build the content to cache using #pre_render
    '#pre_render' => array('custom_node_view_full_children_prerender'),
    // Alert the render section that this is a cachable element
    '#cache' => array(
      // These 'keys' will be used to create a cache cid similar to: custom:content:###:children:full
      'keys' => array('custom', 'content', $node->nid, 'children', 'full'),
      // Any valid cache constants or second based intervals are acceptable
      'expire' => CACHE_TEMPORARY,
    ),
  );
}

/**
 * Prerender function for the listing_page's #content['children'] element
 * @param array $element
 * @return array
 */
function custom_node_view_full_children_prerender($element){
  // Prepare a place to keep children of this node
  $all_children = custom_get_page_menu_children(); // Example function, does not exist.
  $accessable_children = array();
  if( !empty($all_children) ){
    foreach($all_children as $child){
      // Skip restricted items
      if( !$child['link']['access'] ){
        continue;
      }
      $accessable_children[] = $child['link'];
    }
  }
  // Render them
  foreach($accessable_children as $child){
    // Attempt the get the preview version of nodes to display
    $child_node = NULL;
    if( strpos($child['link_path'], 'node/') === 0 ){
      $pieces = explode('/', $child['link_path']);
      $nid = $pieces[1];
      if( !empty($nid) && is_numeric($nid) ){
        $child_node = node_load($nid);
      }
    }
    // Add to the output list
    if( !empty($child_node) ){
      // If we have a node, build a teaser
      $child_content = node_view($child_node, 'teaser');
      $element['#items'][] = render($child_content);
    } else {
      // Otherwise output the title we do have
      $element['#items'][] = l($child['link_title'], $child['link_path']);
    }
  }

  return $element;
}
```

### One final caveat

Sadly, we're not quite done yet. There's one more pitfall you might
not easy find... When you create a renderable array, many times it
comes down to '#markup' properties. And that's the part Drupal
doesn't handle well. It turns out if you declared a renderable
array cachable, but only adjust the `#markup` property of `$element`
in your prerender function, you'll have _no_ effect on the output.
Remember this, because there's no good reason I can think of to
make it simple...

```php
/**
 * Prerender function example for #markup
 */
function custom_some_element_pre_render($element){
  // Adjusting $element['#markup'] seems logic, but has no affect
  // You need to instead set $element['#children'] direclty
  $element['#children'] = '<p>Working html</p>';
  return $element;
}
```


Caching Drupal Renderable Arrays


## Summary

The client wanted a node type that is listed by a view, taking you a
detailed view of the node. That node includes links to the 'previous’
and 'next’. Those are quoted because it’s not absolute ordering. The
view itself defines 3 exposed filters that must be carried into the
chain of next and previous.

## Implementation Notes

I've created a standard style view through the admin, and exposed the
three required fields. The view itself puts out the desired node
type as a 'grid’ view mode, but any view mode other than full would
do. Because the node view itself has no idea it’s being rendered
inside a view, I added preprocess logic in the custom module for
the node. The preprocess node mirrors the view’s defined filters
from the url, adding them to the node as query string parameters.
This allows those to be passed in, but that’s not enough.

In order to determine where this result is in the desired filtering
I needed pass an additional parameter $offset. The offset allows me 
to quickly query when in detailed view to pull 
"Limit 3 Offset ($offset – 1)" getting the previous and next
efficiently. My "query" is actually the view used for listing.
I programmatically load, filter, and execute it during full node
views to determine the proper filters, orders, etc always matching
whatever the view does. The next and previous urls are then
programmed to also include the same filters and offsets.

Bonus problem. Long tailed entry to one of these nodes directly
will include no filters or offset, but I still had to figure out
the next and previous. By disabling paging on the view and pulling
back all results I can determine the offset and get people back
into the stronger performance flow using next and previous.

## Code

`sites/all/modules/custom/creative_design/creative_design.module.inc`

Note that not all of the required code is included, just the
important bits to this process.

```php
/**
 * Modifies non-full node urls to respect filter parameters in node urls
 * @param array $variables
 */
function _custom_preprocess_node_creative_design_node_url(&$variables){
  static $rendered = 0;
  static $creative_design_view = NULL;
  static $creative_design_view_pager_options = NULL;
  if( $variables['view_mode'] == 'full' ){
    return;
  }

  $query_string_additions = array();
  // Additional crazy
  // We need to be provide next and previous on the full view
  // so additional parameter should be added to nodes displayed
  // on the creative design view that exposes the offset parameter
  // from views. This can be tracked by using a static variable
  // in this funciton that is incremented only when on the views page
  // and added to node urls.
  if( $creative_design_view === NULL ){
    $menu_item = menu_get_item();
    if(
      $menu_item['page_callback'] == 'views_page'
      && !empty($menu_item['page_arguments'][0])
      && $menu_item['page_arguments'][0] == 'creative_designs'
    ){
      $creative_design_view = TRUE;
      // Load the view and set it to page display to retrieve the items per page...
      $view = views_get_view('creative_designs');
      $view->set_display('page_1');
      $creative_design_view_pager_options = $view->display_handler->get_option('pager');
      unset($view);
    } else {
      $creative_design_view = FALSE;
    }
  }
  if( $creative_design_view ){
    // Add the number processed
    $offset = $rendered;
    $rendered++;
    // Add the items per page * page if required
    if(
      in_array($creative_design_view_pager_options, array('full', 'mini') )
      && !empty($creative_design_view_pager_options['options']['items_per_page'])
    ){
      $page = !empty($_GET['page'])? (int)$_GET['page'] : 0;
      $ofset += $page * $creative_design_view_pager_options['options']['items_per_page'];
    }
    $query_string_additions['offset'] = $offset;
  }

  $variables['node_url'] = creative_design_get_url($variables['node'], $query_string_additions);
}

/**
 * Prepares a next and previous link for full nodes
 * @param unknown $variables
 */
function _custom_preprocess_node_creative_design_next_and_previous(&$variables){
  if( $variables['view_mode'] != 'full' ){
    return;
  }
  $variables['previous'] = NULL;
  $variables['previous_url'] = NULL;
  $variables['next'] = NULL;
  $variables['next_url'] = NULL;

  // Gather defined filters
  $filters = array('field_industries_tid', 'field_special_features_tid', 'field_products_target_id');
  $defined_filters = array();
  foreach($filters as $filter){
    if( array_key_exists($filter, $_GET) && !empty($_GET[$filter]) ){
      $defined_filters[$filter] = $_GET[$filter];
    }
  }

  // Load the view and execute it
  $view = views_get_view('creative_designs');
  $view->set_display('default');
  $display = $view->display_handler;
  $filters = $display->get_option('filters');
  foreach($filters as &$filter){
    if( !array_key_exists('exposed', $filter) || !$filter['exposed'] ){
      continue;
    }
    $filter_id = $filter['id'];
    if( !empty($defined_filters[ $filter_id ]) ){
      if( !$filter['is_grouped'] ){
        // Assign this to the value's value
        $filter['value']['value'] = $defined_filters[ $filter_id ];
      } else {
        // TODO: Handle, should it ever be required
        watchdog('custom'
          ,'Grouped field handling for creative design filters NYI. Field info:<br /><pre>!field</pre>'
          ,array( '!field' => print_r($field, TRUE) )
          ,WATCHDOG_ERROR
          ,$_GET['q']
        );
      }
    }
  }
  // Respect offset if defined
  $offset = ( array_key_exists('offset', $_GET) && is_numeric($_GET['offset']) )? (int)$_GET['offset'] : NULL;
  if( $offset !== NULL ){
    // Target exactly
    $display->set_option('pager'
      ,array(
        'type' => 'some',
        'options' => array(
          'items_per_page' => 3,
          'offset' => ( $offset - 1 )
        )
      )
    );
  } else {
    // Grab all elements
    $display->set_option('pager'
      ,array(
        'type' => 'none',
        'options' => array(
          'items_per_page' => 0,
        )
      )
    );
  }
  $view->execute();
  $results = $view->result;
  if( $offset !== NULL ){
    // Use the offset if provided performance
    $variables['previous'] = !empty($results[0]->nid)? node_load($results[0]->nid) : NULL;
    $variables['next'] = !empty($results[2]->nid)? node_load($results[2]->nid) : NULL;
  } else {
    // Handle the offset not defined, search all the available results and take the previous next
    $previous = NULL;
    $next = NULL;
    foreach($results as $id => $result){
      if( $result->nid == $variables['nid'] ){
        $offset = $id;
        $previous = $id - 1;
        $next = $id + 1;
        break;
      }
    }
    if( !empty($previous) || !empty($next) ){
      if( array_key_exists($previous, $results) ){
        $variables['previous'] = node_load($results[$previous]->nid);
      }
      if( array_key_exists($next, $results) ){
        $variables['next'] = node_load($results[$next]->nid);
      }
    }
  }
  if( !empty($variables['previous']) ){
    $variables['previous_url'] = creative_design_get_url($variables['previous'], array( 'offset' => ($offset - 1) ));
  }
  if( !empty($variables['next']) ){
    $variables['next_url'] = creative_design_get_url($variables['next'], array( 'offset' => ($offset + 1) ));
  }
  unset($result);
  unset($view);
}

/**
 * Returns a creative design url that includes the active filters
 * @param object $node
 * @param array $query_string_additions
 */
function creative_design_get_url($node, $query_string_additions = array()){
  $query_string_additions += creative_design_get_defined_filters();
  return url('node/' . $node->nid, array('query' => $query_string_additions));
}

/**
 * Returns a creative design nodes defined filters from the url
 * @return array
 */
function creative_design_get_defined_filters(){
  $filters = array('field_industries_tid', 'field_special_features_tid', 'field_products_target_id', 'page');
  $query_string_additions = array();
  foreach($filters as $filter){
    if( array_key_exists($filter, $_GET) && !empty($_GET[$filter]) ){
      $query_string_additions[$filter] = $_GET[$filter];
    }
  }
  return $query_string_additions;
}
</php>

<h3>sites/all/themes/{theme_name}/templates/node--creative-design--full.tpl.php</h3>
And use it like this:

<php>
<?php if( !empty($previous) ): ?>
  <div id="previous" class="navigation-direction">
    <a href="<?php print $previous_url; ?>">
      <i
        class="fa fa-chevron-left"
        title="<?php print t('View previous: !title', array(
        	'!title' => check_plain($previous->title),
        )); ?>"
      >
      </i>
    </a>
  </div>
<?php endif; ?>
<?php if( !empty($next) ): ?>
  <div id="previous" class="navigation-direction">
    <a href="<?php print $next_url; ?>">
      <i
        class="fa fa-chevron-right"
        title="<?php print t('View next: !title', array(
        	'!title' => check_plain($next->title),
        )); ?>"
      >
      </i>
    </a>
  </div>
<?php endif; ?>
```


Drupal Creating 'Next' and 'Previous' Links on Node Views To Related Content Based on A View


Had a client today that needed to parse the
[USA LEIE Database](https://oig.hhs.gov/exclusions/exclusions_list.asp)
(List of Excluded Individuals and Entities). This is the database
the government uses to excluded vendors from taking part in any
federally funded healthcare program. You can download a copy of your
own. Surprise, the file is in .DBF format!

What is a DBF? It's a "DataBase Format" file. Basically, a
self-contained database table. I'm told MS access, MS excel, and a
few other programs can open these allowing you to potentially
resave them as a csv. But... why? It's a file, with some characters
in it. Let's ignore the fact that the last time you or I saw a .DBF
was that one time we happen to be working with someone still
programming in Visual FoxPro. Use the definitions below to treat
it like a giant string, and parse right through.

So, here's the interesting details you'll need to know.

- The file contains businesses and individuals, with columns somewhat
  interspersed.
- There are <em>no linebreaks</em> in the actual data.
- The columns themselves are a set width. But those columns
  _do not always appear in the data row_.

So, knowing the above it's fairly simple to produce a string parse
that just uses the set length of fields to fill data arrays so you
can process it. Here's a sample function:

```php
function _parse_leie_dbf(){
  $fh = fopen('public://import/UPDATED.DBF', 'r');

  // Pull in the first 1000 characters, and look for the last column heading, adding 1
  // To get the byte location of the first record
  $data = fread($fh, 1000);
  $rows_start = strpos($data, 'WVRSTATEC') + strlen('WVRSTATEC') + 1;
  fseek($fh, $rows_start);
  $i = 0;
  // The lines in the file are a set length, without delimiters
  while($line = fgets($fh, 238)){
    $i++;
    if($i > 15 ){
      break;
    }

    // The fields in this file are a set length
    $data = array(
      'first_name' => substr($line, 0, 20),
      'last_name' => substr($line, 20, 15),
      'middle_name' => substr($line, 35, 15),
      'company' => substr($line, 50, 30),
      'general' => substr($line, 80, 20),
      'specialty' => substr($line, 100, 20),
      'UPIN' => substr($line, 120, 6),
      'NPI' => substr($line, 127, 10),
      'DOB' => substr($line, 137, 8),
      'thoroughfare' => substr($line, 144, 30),
      'locality' => substr($line, 174, 20),
      'administrative_area' => substr($line, 195, 2),
      'postal_code' => substr($line, 197, 5),
      'exclusion_type' => substr($line, 202, 9),
      'exclusion_date' => substr($line, 211, 8),
      'rein_date' => substr($line, 219, 8),
      'waver_date' => substr($line, 227, 8),
      'waver_state' => substr($line, 235, 2),
    );
    print '<pre>'; print_r($data); print '</pre>';
  }

  fclose($fh);
}
```


Parsing the LEIE Database (DBF file)


Had a client today with a list of 135ish redirects that needed
entered, and a decent enough budget for me to do more than shove
them in. I put together an admin page that allows you to upload a
csv to be processed containing an internal source, destination,
and redirect type (status code). Of course, this does require
Drupal (7), and the [redirect](https://drupal.org/project/redirect)
module.

But, if you add the pieces of this below to any given site, you'll
have a nice page in the redirects section that will allow you to
upload an easy csv. Here's the description it produces:

Upload a file of source and destination redirects mappings to bulk
create redirects.

## File

Files must be less than 2 MB.
<br />Allowed file extentions: csv.
<br />My file contains a header row.
<br />Column Descriptions

Column 1: Source
<br />Note that any existing paths will be changed to the new target. Source paths must be entered WITHOUT leading slashes.

Column 2: Destination
<br />Note that any existing paths will be changed to the new target. Internal destination should be entered WITHOUT leading slashes.

Column 3: HTTP Status Code Number
<br />Your options are:

- 300 Multiple Choices
- 301 Moved Permanently
- 302 Found
- 303 See Other
- 304 Not Modified
- 305 Use Proxy
- 307 Temporary Redirect

```php
/**
 * Impelements hook_menu
 */
function custom_menu(){
  $items = array();

  if( module_exists('redirect') ){
    $items['admin/config/search/redirect/upload'] = array(
      'type' => MENU_LOCAL_TASK,
      'title' => 'Upload',
      'page callback' => '_custom_admin_redirect_upload',
      'description' => 'Allows users to upload a bulk csv of redirects to be created.',
      'access arguments' => array('administer redirects'),
      'file' => 'custom.admin.inc',
    );
  }

  return $items;
}

/**
 * Vendor Upload Page
 */

function _custom_admin_redirect_upload(){
  $page = array();

  $page['form'] = array(
    '#weight' => 5,
    'definition' => drupal_get_form('custom_admin_redirect_upload_form'),
  );

  return $page;
}

function custom_admin_redirect_upload_form($form_state){
  $form = array();

  $form['#attributes'] = array('enctype' => "multipart/form-data");

  $form['directions'] = array(
    '#markup' =>
      '<p>' . t('Upload a file of source and destination redirects mappings to bulk create redirects.') . '</p>'
  );

  $form['csv'] = array(
    '#type' => 'file',
    '#title' => t('File'),
    '#size' => 40,
    '#description' => implode('<br />', array(
      t('Files must be less than !size.', array('!size' => '<strong>' . format_size( parse_size(file_upload_max_size()) ) . '</strong>') ),
      t('Allowed file extentions: !list.', array('!list' => '<strong>csv</strong>') ),
    )),
  );

  $form['includes_header'] = array(
    '#type' => 'checkbox',
    '#default_value' => 1,
    '#title' => t('My file contains a header row.'),
    '#options' => array(
      1 => t('Yes'),
      0 => t('No'),
    ),
  );

  $form['column_description'] = array(
    '#prefix' => '<h2>' . t('Column Descriptions') . '</h2>',
  );
  $form['column_description']['columns'] = array(
    '#prefix' => '<dl>',
    '#suffix' => '</dl>',
  );
  $form['column_description']['columns'][] = array(
    '#prefix' => '<dt>' . t('Column 1') . ': ' . t('Source') . '</dt>',
    '#markup' => '<dd>' . t(
      'Note that any existing paths will be changed to the new target.'
      . ' Source paths must be entered WITHOUT leading slashes.'
    ) . '</dd>',
  );
  $form['column_description']['columns'][] = array(
    '#prefix' => '<dt>' . t('Column 2') . ': ' . t('Destination') . '</dt>',
    '#markup' => '<dd>' . t(
      'Note that any existing paths will be changed to the new target.'
      . ' Internal destination should be entered WITHOUT leading slashes.'
    ) . '</dd>',
  );
  $form['column_description']['columns'][] = array(
    '#prefix' => '<dt>' . t('Column 3') . ': ' . t('HTTP Status Code Number') . '</dt>',
    '#markup' =>
      '<p>' . t('Your options are:') . '</p>'
      . '<ul><li>' . implode('</li><li>', redirect_status_code_options()) . '</li></ul>',
  );

  $form['import']['submit'] = array(
    '#type' => 'submit',
    '#value' => t('Submit'),
  );

  return $form;
}

function custom_admin_redirect_upload_form_validate($form, &$form_state){
  // Validate file
  $validators = array(
    'file_validate_name_length' => array(),
    'file_validate_extensions' => array('csv'),
  );
  $file = file_save_upload('csv', $validators);
  if (!$file){
    form_set_error('upload', 'You must select a valid file to upload.');
  } else {
    // Manually add the uploaded file to the $form_state
    $form_state['values']['csv']['title'] = $file->filename;
    $form_state['values']['csv']['file'] = $file;
    $form_state['values']['csv']['file']->filesize = $file->filesize;
  }
}

function custom_admin_redirect_upload_form_submit($form, &$form_state){
  // Create a batch
  $parameters = array();
  $batch = array(
    'title' => t('Scanning Vendors'),
    'operations' => array(
      array(
        '_custom_redirect_csv_batch', array(
          $parameters,
          array(
            'path' => $form_state['values']['csv']['file']->uri,
            'size' => $form_state['values']['csv']['file']->filesize,
            'includes_header' => $form_state['values']['includes_header'],
          ),
        ),
      ),
    ),
    'finished' => '_custom_redirect_csv_batch_finished',
    'file' => drupal_get_path('module', 'custom') . '/custom.admin.inc',
  );
  batch_set($batch);
}

/**
 * Batch callbacks
 */

/**
 * Foreground based csv batch
 * @param array $parameters
 * @param array $file_info
 * @param array $context
 */
function _custom_redirect_csv_batch($parameters, $file_info, &$context){
  global $user;

  // open the file for reading
  $file_handle = fopen($file_info['path'], 'r');

  if( empty($context['sandbox']['initialized']) ){
    $context['results']['parameters'] = $parameters;
    $context['results']['total'] = 0;
    $context['results']['errors'] = array();

    if( $file_info['includes_header'] ){
      // get file line as csv to skip the header
      $csv_line = fgetcsv($file_handle);
      // retain current file pointer position
      $context['sandbox']['file_pointer_position'] = ftell($file_handle);
    } else {
      $context['sandbox']['file_pointer_position'] = 0;
    }

    $context['finished'] = .01;
    $context['message'] = t('Initialized');
    $context['sandbox']['initialized'] = TRUE;

    if( variable_get('development', FALSE) ){
      watchdog(
        'custom'
        ,'Bulk redirect csv upload started by user %uid with %size file size.'
        ,array(
          '%uid' => $user->uid,
          '%size' => $file_info['size'],
        )
        ,WATCHDOG_NOTICE
      );
    }

    return;
  }

  // Jump to location in file
  fseek($file_handle, $context['sandbox']['file_pointer_position']);

  // loop through the file and stop at batch limit
  for ($i = 0; $i < 50; $i++) {
    // get file line as csv
    $csv_line = fgetcsv($file_handle);

    // retain current file pointer position
    $context['sandbox']['file_pointer_position'] = ftell($file_handle);

    if(!$csv_line){
      break;
    }

    // Clean and name the variables for sanity
    $source = trim($csv_line[0]);
    $destination = trim($csv_line[1]);
    $http_status_code = trim($csv_line[2]);

    // Ensure the source is a valid path
    if( stripos($source, 'http') !== FALSE || substr($source, 0, 1) == '/' ){
      $context['results']['errors'][] = t('The source path %value is not valid.', array('%value' => $source));
      continue;
    }

    // Normalize the path.
    $destination = drupal_get_normal_path($destination);
    if (!valid_url($destination) && !valid_url($destination, TRUE) && $destination != '<front>' && $destination != '') {
      $context['results']['errors'][] = t('The redirect path %value is not valid.', array('%value' => $destination));
      continue;
    }

    // Check if a redirect already exists somehow
    $redirect = redirect_load_by_source($source);
    if($redirect){
      // Update
      $redirect->redirect = $destination;
      $redirect->status_code = $http_status_code;
    } else {
      // Create
      $redirect = new stdClass();
      redirect_object_prepare($redirect);
      $redirect->source = $source;
      $redirect->redirect = $destination;
      $redirect->status_code = $http_status_code;
    }
    redirect_save($redirect);

    $context['results']['total']++;
  }

  // check for EOF
  if ( feof($file_handle) ) {
    // complete the batch process
    $context['finished'] = 1;
    $context['message'] = t('All redirects processed.');
  } else {
    // Inform the batch engine that we are not finished,
    // and provide an estimation of the completion level we reached.
    $context['finished'] = $context['sandbox']['file_pointer_position'] / $file_info['size'];
    $context['message'] = t('Processed %number redirects.', array('%number' => $context['results']['total']) );
  }

  fclose($file_handle);
}

/**
 * Foreground csv batch finished
 * @param boolean $success
 * @param array $results
 * @param array $operations
 */
function _custom_redirect_csv_batch_finished($success, $results, $operations){
  global $user;
  if( variable_get('development', FALSE) ){
    watchdog(
    'custom'
    ,'Bulk redirect csv upload completed by user %user.'
    ,array(
      '%user' => $user->uid,
    )
    ,WATCHDOG_NOTICE
    );
  }

  // The 'success' parameter means no fatal PHP errors were detected. All
  // other error management should be handled using 'results'.
  if (!$success) {
    drupal_set_message( t('A fatal error occured during import. The batch stopped processing.'), 'error');
  } else {
    drupal_set_message( t('Import complete. Total records processed: %total.', array(
      '%total' => $results['total'],
    )));
    if( !empty($results['errors']) ){
      drupal_set_message( t('The following %number occured during processing: !errors', array(
        '!errors' => '<ol><li>' . implode('</li><li>', $results['errors']) . '</li></ol>',
        '%number' => count($results['errors']),
      )), 'error');
    }
    drupal_goto('admin/config/search/redirect');
  }
}
```


Bulk Uploading Redirects In Drupal 7


Maybe it's because I've done more with Drupal that's off the map...
Or maybe I just dug further than others, but I've noticed way too
many developers giving poor advice when it comes to loading the
core include files. Allow me to correct that issue for you, and
more importantly explain **why** you need to do it the
right way.

Let's start with a basic google, I"m sure that's what most of us do,
right? "drupal load core include".

Results (as of this post): The top 4 were drupal.org links

- https://api.drupal.org/api/drupal/includes%21module.inc/function/module_load_include/7
- https://api.drupal.org/api/drupal/includes!module.inc/7
- And a couple other similar documentation style posts.

Next up as expected was stackoverflow:
http://drupal.stackexchange.com/questions/95716/how-to-load-an-include-file-from-drupals-include-folder

The OP suggested doing this, with idea that there is a better way:

```php
include(DRUPAL_ROOT."/includes/locale.inc");
```

Others suggested this is better:

```php
module_load_include('inc', 'content', 'includes/actions');
```

But, that's actually _worse_. The OP's suggestion was close to what
the core does. The includes in the core are meant to exist without
the rest of the Drupal modules. They are independent little gems.
So if you're going through module code at all to get to them,
you're going the long way.

So, you do have to require them! But, there's more to it than that.
If you take the time to dig into the `bootstrap.inc` file's
`drupal_bootstrap` file, you'll find it loads include like this,
and this is the way you have to do it too:

```php
require_once DRUPAL_ROOT . '/' . variable_get('session_inc', 'includes/session.inc');
```

The file name... is in a variable?! YEP! That's because it's
possible to override the core files of Drupal by specifying new
locations for those files in settings.php. Why would you do that?
Most of the time, it's for custom logic that adjusts, but doesn't
break the core. Like adding a new hook into some previously
unreachable process. An example in the wild that comes immediately
to mind is the module memcache, that allows the cache tables to be
stored in high performance memcache tables.

You never know what you, or another developer has done. Take the
little extra time to ensure you always match what the core does!


The Right Way

Loading Drupal Core Include Files


A client needed to enter a bunch of urls to redirect today on a
site. This can be easily done one at a time through the Magento
admin at Admin > Catalog > Url Rewrites. That's a bit of a slow
process. So to that end, we've got a DB direct method using load
local csv to compliment: To start, you'll need a spreadsheet with
the following contents:

Database Column Definitions (and what you need to give them)

## `url_rewrite_id`

This is an auto generated id. You should not supply anything to
this column.

## `store_id` - Column 1

Your store id to redirect inside. For most single store sites,
this will 1. You can get a list of store id's from data in table
`core_store` or through the admin at Admin > System > Manage Stores
and viewing the store_id/# parameter that comes in the resulting urls.

## `id_path` - Column 2

This just a unique id for the redirect. It's a psuedo human friendly
value. The actual value doesn't matter, as long as it is unique. The
internal system uses category/, product/ #####\_##### paths. I would
suggest you add your own using custom/## for those created through
the admin, and bulk/### when doing bulk redirecting so you can get
the new starting number each time you do this.

Example: bulk/1, bulk/2

## `request_path` - Column 3

This is the from address. Where people are currently going that you
want them away from. You must format this without a preceeding slash
or request host url.

Example: coffee/special-blends/best-coffee-ever

## `target_path` - Column 4

This is the to address. Where you want people to end up. You must
format You must format this without a preceeding slash or request
host url.

Example: coffee/special-blends/best-coffee-ever-was-a-lie

## `is_system` - Column 5

This one's fairly obvious. It's a bit indicating if the system
created this rewrite or not. System created rewrites can be deleted
and regenerated easily. Make sure you mark your custom redirects as
zero 0, as you are not system.

## options

This requires a bit of just go with it. The value here to redirect
using 301 is RP.

Once you have your sheet all filled out, use csv's load local into
the number columns above and it should work. Always back up your
database table prior to imports.


Bulk Redirect Magento Urls


A client of mine recently started wanting to improve her shopping
experience with Magento. Her site was initially imported 100%
description based, with attributes barely used at all. After
walking her through layered navigation's filters, she immediately
understood the value. It can help with SEO as well, as you can
noindex the extra urls produced by filters more easily than
discounting loads of categories. She's off happily categorizing
her product data into attributes and options below them. It'll be
my job to search the text of all her products and set the product's
attributes based on them. Here's the start of that work.

Note that this is going to be widely simplistic, and includes only
a single attribute code. There's a lot of use cases where this will
fail, and I leave that up to the brave developer to sort out (or
hire me). But here's the gist, taken from my local environment's
scratch controller:

```php
/**
* Loops through products finding attribute values
* in titles and descriptions and setting that value in real attributes
*/
public function loadProductAttributesAction(){
    print '<h1>loadProductAttributesAction</h1>';
    set_time_limit(0);
    // Load products. Note this might hit a size limit
    $products = Mage::getModel('catalog/product')->getCollection();
    $i = 0;
    $products_updated = array();
    $products_not_updated = array();
    foreach($products as $product_preview) {
      $i++;
      // Load the full product from the collection's shallow copy
      $product = Mage::getModel('catalog/product')->load($product_preview->getId());
      // Store the text of the product into a data array
      $data = array();
      $data['name'] = $product->getName();
      $data['sku'] = $product->getSku();
      $data['description'] = $product->getDescription();
      $data['meta_keywords'] = $product->getMetaKeyword();
      // Create a searchable data glob out of the data
      $string = implode('  ', $data);

      // Create a variable to store attribute value updates for tracking purposes
      $updates = array();

      // Load the product's attributes
      $attributes = $product->getAttributes();
      foreach( $attributes as $attribute_id => $attribute ){
        switch( $attribute_id ){
          // For our specific attributes
          case 'color':
            // Get the product options (ignore the 'please select')
            $options = $attribute->getSource()->getAllOptions(false, false);
            $matches = array();
            foreach( $options as $option ){
              if( stripos($string, $option['label']) !== FALSE ){
                // Add this to the product update matches
                $updates[$attribute_id] = $option;
                // Break, we can only record single values into attributes anyway
                break;
              }
            }
            break;
        }
      }

      // Make the updates and add to reporting structures
      if( empty($updates) ){
        $products_not_updated[] = array(
          'sku' => $product->getSku(),
          'name' => $product->getName(),
        );
      } else {
        // Loop through the updates saving the product's attributes
        foreach($updates as $attribute_id => $option){
          $product->setData($attribute_id, $option['value'])->getResource()->saveAttribute($product, $attribute_id);
        }
        $products_updated[] = array(
          'sku' => $product->getSku(),
          'name' => $product->getName(),
          'updates' => $updates,
        );
      }
    }
    print '<h2>' . $i . ' products processed.</h2>';
    // Loop through the reporting structures for output
    print '<h3>Updated products</h3>';
    $i = 0;
    foreach( $products_updated as $details ){
      $i++;
      print '<h4>' . $i . ': ' . $details['name'] . ' (' . $details['sku'] . ')</h4>';
      print '<p>Updates made:</p><ul>';
      foreach( $details['updates'] as $attribute_id => $option ){
        print '<li>"' . $attribute_id . '" set to ' . $option['label'] . '</li>';
      }
      print '</ul>';
    }
    print '<h3>Skipped products</h3><ol>';
    foreach( $products_not_updated as $details ){
      print '<li>' . $details['name'] . ' (' . $details['sku'] . ')</li>';
    }
    print '</ol>';
}
```

Happy coding.


Setting Product Attributes From Text Descriptions in Magento


As part of the rewrite of a major application process for a client,
they have requested the ability to navigate away from the form and
come back to finish later. We suggested using database storage at
the server, but it was declined as they did not want to use logins,
and IP based retrieval could be less secure than desired. They did
however, jump at the ability to save data permanently in the user's
browser allowing them to come back at need, potentially even year
over year. Thus began a small foray into auto persisting forms
using localStorage. There's way more to the application than is
represented here, but I've pulled the auto-saving piece out as I
find it extremely useful in a generic sense.

I've created a small framework, mostly to designate a place for
data to be kept for easy saving. As a handy side note, this also
makes sending the same saved data to the server for login based
persistence, or form processing a breeze. Using this code, any
input, select, textarea, or button with a name when changed will
automatically write the full contents of form data into localStorage.
Loading the page again will automatically put all values back as
they belong, and fire change events along the way ensuring most
form bound behaviors are triggered. The data object is rather
extensible. Using a different namespace such as
`application.storage.data.addresses`, you can keep other sorts of
data, I'm using that for a separate address book among other things.

```js
application = {
  ready: function () {
    application.storage.ready();
    application.form.ready();
  },
};
application.storage = {
  data: null,
  ready: function () {
    try {
      // Pull our data object out of cache
      cache = localStorage.getItem("school.enrollment.data");
      if (cache == null) {
        // Create it if it does not yet exist
        application.storage.data = {};
        application.storage.persist();
      } else {
        // Recreate the object from the stored JSON
        application.storage.data = JSON.parse(cache);
      }
    } catch (err) {
      console.debug("Local Storage error", err);
    }
  },
  persist: function () {
    try {
      // Store the entire data object into local storage as is
      localStorage.setItem(
        "school.enrollment.data",
        JSON.stringify(application.storage.data)
      );
    } catch (err) {
      console.debug("Local Storage error", err);
    }
  },
};
application.form = {
  fields: {},
  ready: function () {
    // Bind form behaviors

    // Ensure this form's storage namespace exists
    if ("form" in application.storage.data == false) {
      application.storage.data.form = {};
    }
    // Load stored values we placed into form
    for (var name in application.storage.data.form) {
      var value = application.storage.data.form[name];
      var $element = jQuery('[name="' + name + '"]');
      var elementTag = $element[0].nodeName.toLowerCase();
      switch (elementTag) {
        case "button":
          continue;
        default:
          switch ($element.attr("type")) {
            case "submit":
              continue;
            case "radio":
            case "checkbox":
              // Check the radio or checkbox associated with this stored value
              // TODO see what happens if I've stored multiple checkbox values for one name..
              // Fire a change event in case the form behaviors above change based on this field
              jQuery('[name="' + name + '"][value="' + value + '"]')
                .attr("checked", "checked")
                .change();
              continue;
            default:
              // Insert our value
              // Fire a change event in case the form behaviors above change based on this field
              $element.val(value).change();
              continue;
          }
      }
    }

    // Bind auto-save behavior
    jQuery("input[name], select[name], textarea[name], button[name]").change(
      application.form.fieldChanged
    );
  },
  fieldChanged: function (event) {
    var $this = jQuery(this);
    var elementTag = this.nodeName.toLowerCase();
    switch (elementTag) {
      case "button":
        return;
      default:
        switch ($this.attr("type")) {
          case "submit":
            return;
          default:
            var value = $this.val();
        }
    }
    var name = $this.attr("name");
    // Store all form data points into our storage namespace
    application.storage.data.form[name] = value;
    // Write to localStorage cache
    application.storage.persist();
  },
};

jQuery(document).ready(application.ready);
```


Automatically Saving Form Values In localStorage Cache


I needed the ability to fire off some ssh commands today testing
out how to do sftp through php for a client. Turns out there's a
bit of a layering process here. This should get you started, and
going on from here will require a bit more customization. It's
important to note that many sftp services do not allow you shell
access. Just because you have an ssh connection, does not mean you
can issue commands. And just because you cannot issue commands,
does not mean you can't do scp or use regular sftp commands. It's
a bit of a bother.

Start by getting the libraries you need. On a debian Linux system,
the install commands below worked for me. Be sure to use the
current version of the pecl ssh library.

```bash
sudo apt-get install libssh2-1-dev libssh2-php
sudo pecl install channel://pecl.php.net/ssh2-0.12
```

On Macs, you can try using ports:

```bash
sudo port install php5-ssh2
```

After that, you just need a class do a bit of the logic for you:

```php
class FileRetriever {

  private $connection;
  public $connected;

  /**
   * Constructor
   */
  public function __construct(){
    $this->connected = false;
  }

  /**
   * Creates a connection to the ssh server
   * @param array $parameters
   */
  public function connect($parameters){
    // Merge in connection defaults
    $parameters += array(
      'port' => 22,
    );

    try {
      $this->connection = ssh2_connect($parameters['host'], $parameters['port']);
      if( !$this->connection ){
        return false;
      }

      if( !ssh2_auth_password($this->connection, $parameters['user'], $parameters['password']) ){
        return false;
      }

      $this->connected = true;
      return true;
    } catch(Exception $e) {
      return false;
    }
  }

  /**
   * Downloads a file
   * @param string $source
   * @param string $destination
   * @return mixed string destination or false
   */
  public function scp($source, $destination){
    if( !$this->connected ){
      return false;
    }
    try {
      if( ssh2_scp_recv($this->connection, $source, $destination) ){
        return $destination;
      }
    } catch (Exception $e) {}
    return false;
  }

  /**
   * Sends a command through the ssh connection
   * @param string
   */
  public function execute($command){
    if( !$this->connected ){
      return false;
    }

    try {

      if (!($stream = ssh2_exec($this->connection, $command))) {
        throw new Exception('SSH command failed');
      }

      // This affects calls like fgets() and fread() that read from the stream.
      // In non-blocking mode an fgets() call will always return right away while
      // in blocking mode it will wait for data to become available on the stream.
      stream_set_blocking($stream, true);
      $data = "";
      while ($buffer = fread($stream, 4096)) {
        $data .= $buffer;
      }
      fclose($stream);
      return $data;

    } catch(Exception $e){}

    return false;
  }

  /**
   * Streams a file through fopen and fread on the ssh.sftp stream, in case the above method fails
   */
  private function receiveFile($remote_file, $destination){
    $sftp = $this->sftp;
    if ( !file_exists("ssh2.sftp://$sftp$remote_file") ){
      return false;
    }
    if ( !$stream = fopen("ssh2.sftp://$sftp$remote_file", 'rt') ){
      return false;
    }
    $filesize = filesize("ssh2.sftp://$sftp$remote_file");
    if( !$filesize ){
      return false;
    }

    // Create our temp file and open a handle to write to it
    $out = fopen($destination, 'w');

    $contents = '';
    $read = 0;
    while ($read < $filesize && ($buffer = fread($stream, $filesize - $read))) {
      // Increase our bytes read
      $read += strlen($buffer);
      // Write to our local file
      if (fwrite($out, $buffer) === FALSE) {
          throw new Exception("Unable to write to local file: $destination");
      }
    }
    unset($buffer);

    fclose($stream);
    fclose($out);
    return true;
  }

}
```

From there you can call simple commands doing the following:

```php
$retriever = new FileRetriever();
if( !$retriever->connect(array(
'host' => '####',
'user' => '####',
'password' => '####',
)) ){
die('connect failed');
return false;
}

$output = $retriever->execute('ls -halF');

echo "Output: " . $output . "<br />\n";
```

If the system you're connected to allows it, you'll get preformatted
text that looks similar to:

```bash
Output: total 452K
drwxr-xr-x  50 lance www-data 4.0K Nov 19 08:19 ./
drwxr-xr-x   3 root  root     4.0K Jul 12  2012 ../
drwx------   3 lance www-data 4.0K Jul 17  2012 .adobe/
drwxr-xr-x   3 lance www-data 4.0K Mar 15  2013 .android/
-rw-------   1 lance www-data  42K Nov 19 08:22 .bash_history
-rw-r--r--   1 lance www-data  220 Jul  2  2012 .bash_logout
-rw-r--r--   1 lance www-data 3.6K Oct 23  2012 .bashrc
drwxr-xr-x   2 lance www-data 4.0K Mar 13  2013 bin/
drwx------  21 lance www-data 4.0K Nov 18 13:36 .cache/
drwxr-xr-x   3 lance www-data 4.0K Oct 23  2012 .codeintel/
drwxr-xr-x   3 lance www-data 4.0K Jul  3  2012 .compiz-1/
drwxr-xr-x   3 lance www-data 4.0K Nov 18 13:35 .composer/
drwx------  22 lance www-data 4.0K Oct 28 15:54 .config/
drwxr-xr-x   3 lance www-data 4.0K Sep 24 16:04 .cordova/
drwx------   3 lance www-data 4.0K Jul  2  2012 .dbus/
...
```


Using PHP to SSH


```bash
/var/www/vhosts/{vhost}/log/*log {
    daily
    missingok
    notifempty
    dateext
    copytruncate
    create 570 apache www-data
    olddir /var/www/vhosts/{vhost}/log/old
    rotate 365
    maxage 365
    compress
    delaycompress
}
```

You can test if this will run using...

```bash
sudo logrotate -dv /etc/logrotate/{file}
```


My Favorite Logrotate Setup


Trying to do bulk redirection through the path_redirect (D6) or
redirect (D7) admin is... painful. You need to enter them one at a
time. Staring down a list of a couple hundred can take a full day
away from you. This handy function can be run through a drush
script to redirect an array of paths anywhere you like in seconds.

## Drush Script

Note that this is actually a drupal 6 tested function. It's not
perfect, handling for things like query strings breaks down if you
try run it multiple times. But for simple aliases, it can handle
it all for you. Just give it an array of a source paths like
`my-title-here` and a destination like `other/page`, and watch the
output.

Note that it will tell you about failed redirects, so you
will have to watch for them and fix those yourself.

This code is adapted from the `path_redirect` admin's form validate, so
it should operate in a very similar way.

There's an options trigger as well that will allow you to retain
existing node aliases, or remove them if desired.

```php
function _bulk_redirect($redirects, $destination, $options){
  $options += array(
    'unset_node_aliases' => FALSE
  );
  foreach($redirects as $source){
    $redirect = array(
        'source' => $source,
        'language' => '',
        'redirect' => $destination
    );
    $valid = TRUE;

    if( $path = drupal_get_normal_path($source) ){
      $nid = str_replace('node/', '', $path);
      if( is_numeric($nid) && $node = node_load($nid) ){
        if( $options['unset_node_aliases'] ){
          path_set_alias('node/' . $nid, NULL);
        } else {
          $valid = FALSE;
          drupal_set_message('Can not redirect ' . $source . ' it is attached to an existing node:' . $node->title, 'error');
        }
      }
    }

    if ($existing = path_redirect_load_by_source($redirect['source'], $redirect['language'])) {
      if ($redirect['rid'] != $existing['rid'] && $redirect['language'] == $existing['language']) {
        // The "from" path should not conflict with another redirect
        $valid = FALSE;
        drupal_set_message('Can not redirect ' . $source . ' it conflicts with an existing redirect', 'error');
      }
    }

    if (!valid_url($redirect['redirect']) && !valid_url($redirect['redirect'], TRUE) && $redirect['redirect'] != '<front>') {
      //form_set_error('redirect', t('The redirect <strong>to</strong> path does not appear valid.'));
    }

    // check that there there are no redirect loops
    if (url(drupal_strtolower($redirect['source'])) == url(drupal_strtolower($redirect['redirect']))) {
      drupal_set_message('Can not redirect ' . $source . ' it is an infinate loop.', 'error');
      $valid = FALSE;
    }

    if( $valid ){
      drupal_set_message("Redirecting $source to $destination.");
      path_redirect_save($redirect);
    }

  }
}
```


Drupal 6 Bulk Redirecting Urls


Ran across an error attempting to setup a quickbooks application.
After managing to get the developer account testing us authenticated,
the actual request to get vendor details was failing with the error
message "Request failed with code 500: You are accessing incorrect
cluster for the specified company, please double check your base
URL.-11017SERVER". Took a minute to figure this out from the
developer docs, but the basic idea of the error is this:

You're attempting to access the quickbooks data cluster correctly to
get the data you want, but it's connecting to the wrong server.

    "Sorry Mario, the princess is another castle."

For me, it looked like:

**Wrong:**
https://qbo.intuit.com/qbo32/resource/vendors/v2/###
<br />**Right:**
https://qbo.intuit.com/qbo1/resource/vendors/v2/###

There's two ways to resolve this:

- The hard way, ask which data cluster the client is in using an
  extra call after authentication.
- Use the new static base url provided since version 7!

The new url looks like this:
https://qbo.sbfinance.intuit.com/resource/vendors/v2/###

Documentation for this new base url is available at:
https://developer.intuit.com/docs/0025_quickbooksapi/0050_data_services/v2/0400_quickbooks_online/0100_calling_data_services/0010_getting_the_base_url

It's then promptly ignored throughout the rest of their documentation. Hope you remember!


Request failed with code 500: You are accessing incorrect cluster for the specified company, please double check your base URL.-11017SERVER

QuickBooks Application Error cluster error resolution


I came up against a situation I imagine is not very unique, but is
very frustrating for a client today. Thanks to updates in Google's
algorithms we're adding an extra header Vary to all of our sites
that run multiple themes based on user agent detection. It my
case, it is the theme switching, but if you vary even for little
things, it's not a bad idea to declare that variance. You not even
be varying by User-Agent. But, if you hit the Drupal 7 caching
layer, you're going to have a bad time.

Everything looked like it worked on my local, which of course runs
in a development mode with caching off. So when I turned on caching
to check, the real fun started. It seems I was able to declare the
extra variant header at the theme layer, but it just would not output
once cached. Investigation into the actual cache_page table showed
that the `Vary: User-Agent` header was associated!

So what gives? The issue was actually in the `bootstrap.inc` file and
`drupal_serve_page_from_cache` function, in the way cached pages are
served. I'll snippet the relevant portions:

```php
// Allow HTTP proxies to cache pages for anonymous users without a session
// cookie. The Vary header is used to indicates the set of request-header
// fields that fully determines whether a cache is permitted to use the
// response to reply to a subsequent request for a given URL without
// revalidation. If a Vary header has been set in hook_boot(), it is assumed
// that the module knows how to cache the page.
if (!isset($hook_boot_headers['vary']) && !variable_get('omit_vary_cookie')) {
header('Vary: Cookie');
}

if ($page_compression) {
header('Vary: Accept-Encoding', FALSE);
...
```

So, if you do not specifically state a vary in your `hook_boot`, or
start specifically omitting the cookie variance, it doesn't matter
_what vary header you cache_, it's going to smash it, and start over.
There are only a few solutions to this problem:

- Create a local version of `bootstrap.inc` using the settings file
  to point to the updated version
  <br />This is one step above modifying core, but promises
  headaches down the road. **No**.
- Set the variable to omit cookie variance control.
  <br />Loss of control? **No**.
- Use a custom module, loaded at boot level, to declare a vary header.
  <br />**This is the least evil of the solutions. Go with it**

In custom.module, create the follow hook:

```php
/**
 * - Implemenation of hook_boot
 */
function custom_boot(){
  // Because we're swapping content based on user agent
  // we have to tell the cache layer we've modified
  // the vary header manually
  // see: bootstrap.inc:drupal_serve_page_from_cache()
  drupal_add_http_header('vary', 'Cookie,User-Agent');
}
```

You'll also need to register your module as a boot module. This can
be done at install using this hook in the `custom.install` file:

```php
function custom_install(){
    db_query("UPDATE {system} SET bootstrap = 1 WHERE name = 'custom'");
}
```

But, if it's already running? Clear cache, and run the same command
against the database.


Bulk Updating Magento Product Prices


This one fought me, for hours yesterday. A client wanted drag and
drop implemented for file on their server. This can already be done
in most modern browsers by simply dropping the files onto the file
input, but that's a very awkward UI, likely to cause issues. Most
users aren't experienced enough to know they can do that. So you
have three reasonable choices:

- At a minimum, prevent drag and drop on non-registered elements causing the page to load that image. Force them to use the native handling of files dropped onto file inputs.
- A little more reasonable would be to create a region that makes dragging obvious, and a large target for them to aim for that lights up when they are in place.
- Or, perhaps the best if you only have a single file input, and it's the most important thing on the page anyway, make the entire page listen for a dropped file and handle it.

My particular scenario yesterday was #3, but #2 would be done in
roughly the same way. I'm going to post some slightly more than bare
bones code for javascript, and php. I'll leave the css and html up to
you. It's still a bit raw, the goal was a functioning prototype for
working scenarios.

## Javascript

Drag and Drop Event Listeners, FileReaders, and XmlHttpRequest objects.
All without an ounce of jQuery.

```js
example.upload = {
  // Support flag, for reuse
  dndSupported: false,
  // Testable initilization flag
  behaviors: false,
  // Pointer to our <progress> element
  progress: null,
  init: function () {
    // Ensure we have drag and drop
    var div = document.createElement("div");
    // Simple test of capability similar to moderizer
    example.upload.dndSupported =
      "draggable" in div || ("ondragstart" in div && "ondrop" in div);

    if (!example.upload.dndSupported) {
      alert("Drag and Drop not supported");
    } else {
      this.bindBehaviors();
    }
  },
  bindBehaviors: function () {
    if (!example.upload.behaviors) {
      // Binding to the entire document
      // You could target anything instead here
      var doc = document.documentElement;
      doc.ondragover = function () {
        this.className = "hover";
        return false;
      };
      doc.ondragend = function () {
        this.className = "";
        return false;
      };
      doc.ondrop = function (event) {
        example.upload.onDrop(event);
      };
      example.upload.progress = document.getElementById("progress");
      example.upload.preview.target = document.getElementById("preview");
      example.upload.behaviors = true;
      example.upload.reset();
    }
  },
  hideFields: function () {
    document.getElementById("fields-wrapper").style.display = "none";
  },
  showFields: function () {
    document.getElementById("fields-wrapper").style.display = "inline-block";
  },
  reset: function () {
    example.upload.showFields();
    example.upload.updateProgress(0);
    example.upload.preview.clear();
  },
  onDrop: function (event) {
    example.upload.hideFields();
    example.upload.preview.clear();
    example.upload.updateProgress(0);
    this.className = "";

    // Preventing default behavior (viewing file directly)
    event.preventDefault && event.preventDefault();

    var files = event.dataTransfer.files;
    if (files.length > 1) {
      alert("Only one file may be uploaded.");
    } else if (files.length == 0) {
      return;
    }
    var file = files[0];
    // Display a preview if applicable
    example.upload.preview.display(file);

    var xhr = new XMLHttpRequest();

    // Put is a little more resilient with large files
    xhr.open("put", "upload-file", true);
    // Some variables to use saving the file
    xhr.setRequestHeader("X-File-Name", file.name);
    xhr.setRequestHeader("X-File-Size", file.size);
    // File upload finished behavior
    xhr.onload = function () {
      // just in case we get stuck around 99%
      example.upload.updateProgress(100);
      console.log(xhr);
      if (xhr.status === 200) {
        console.log("all done: " + xhr.status);
      } else {
        example.upload.reset();
        console.log("Something went terribly wrong...");
      }
    };
    // Progress update behavior
    xhr.upload.onprogress = function (event) {
      if (event.lengthComputable) {
        example.upload.updateProgress(((event.loaded / event.total) * 100) | 0);
      }
    };

    // Send just the file contents
    xhr.send(file);

    return false;
  },
  updateProgress: function (percentComplete) {
    if (percentComplete == 0) {
      example.upload.progress.style.display = "none";
    } else {
      example.upload.progress.style.display = "inline-block";
    }
    example.upload.progress.value = example.upload.progress.innerHTML = percentComplete;
  },
  preview: {
    target: null,
    display: function (file) {
      example.upload.preview.clear();

      // Creating a div with the filename
      nameDiv = document.createElement("div");
      nameDiv.innerHTML = file.name;
      nameDiv.className = "file-name";
      example.upload.preview.target.appendChild(nameDiv);

      // Allow previews of certain file types
      switch (file.type) {
        case "image/png":
        case "image/jpeg":
        case "image/gif":
          // Creates an image on the fly with a generated src
          var reader = new FileReader();
          reader.onload = function (event) {
            var image = new Image();
            image.src = event.target.result;
            image.width = 100; // a fake resize
            example.upload.preview.target.appendChild(image);
          };
          reader.readAsDataURL(file);
          break;
      }
    },
    clear: function () {
      example.upload.preview.target.innerHTML = "";
    },
  },
};

// A document ready call. Build your own as you like
ready(function () {
  example.upload.init();
});
```

## Php File Saving Code

```php
// Read the input directly, there is no post, get, data
$in = fopen('php://input','r');
// Open any file you like for reading
$out = fopen(__DIR__./uploads/' . $_SERVER['HTTP_X_FILE_NAME'], "w+");
// Stream the data out to a file
while($data = fread($in, 1024)) fwrite($out, $data);
// Close handlers
fclose($in);
fclose($out);
```

Are there security concerns building it this way? Of course!
The php code above should scare the hell out of you. But,
security is your own pass, outside this example. Please, please
make sure you review your own and implement a solution that works
for your needs. Remember, no matter what the browser passes you,
it's important to validate.


HTML Drag and Drop File Upload With PHP Backend


A client today needed to export their pricing for products. This is
normally not hard, the admin provides a simple system to do it.
But, my client was using related products with pricing modifications
involving super attributes and options.

_Think "Shirt X costs $4.99. Large is another $2 and XL is \$3 more"._

That doesn't export well, and the table storage for the values is a
huge mystery at first. Here's the finished solution to get those
prices.

First, a couple important concepts:

The base price of the product is stored in
`catalog_product_entity_decimal`, it's just an attribute value.
The configurable pricing modifications are stored in
`catalog_product_super_attribute_pricing` which relates directly
from that table to both the `eav_attribute`, **and**
`eav_attribute_option_value` tables directly.

The attribute ids in my system may not match yours, for me, 71 is
'name' of the product.

Here's the queries you'll need to pull the info, hope they make sense!

## Base product price:

```sql
SELECT cped.`value` AS `price`, cpe.sku, cpev.value AS `name`
FROM catalog_product_entity_decimal cped
JOIN catalog_product_entity cpe ON cpe.entity_id = cped.entity_id
JOIN catalog_product_entity_varchar cpev ON cpev.entity_id = cpe.entity_id AND cpev.attribute_id = 71
WHERE cped.attribute_id IN (
        SELECT attribute_id FROM eav_attribute WHERE attribute_code IN ('price')
)
AND cped.`value` > 0;
ORDER BY cpe.sku
```

## Pricing modifications:

```sql
SELECT cpe.sku, cpev.value AS `name`, ea.attribute_code, cpsal.value AS attribute_label, eaov.value AS option_label, cpsap.pricing_value AS price_modification
FROM catalog_product_super_attribute_pricing cpsap
JOIN catalog_product_super_attribute_label cpsal ON cpsal.product_super_attribute_id = cpsap.product_super_attribute_id
JOIN catalog_product_super_attribute cpsa ON cpsa.product_super_attribute_id = cpsap.product_super_attribute_id
JOIN catalog_product_entity cpe ON cpe.entity_id = cpsa.product_id
JOIN eav_attribute ea ON ea.attribute_id = cpsa.attribute_id
JOIN catalog_product_entity_varchar cpev ON cpev.entity_id = cpe.entity_id AND cpev.attribute_id = 71
JOIN eav_attribute_option_value eaov ON eaov.option_id = cpsap.value_index
ORDER BY cpe.sku
```



In a some infuriating day, I have discovered there is one more step
to changing a Magneto base url than most people list. It's a rare
problem, and not one I expect most people will find.

The standard steps for changing magento's base url are:

1. Update the core_config_data table.
   You'll need to change the `web/unsecure/base_url` and
   `web/secure/base_url` paths.
1. Clear the system cache
   This could be in one of two places. If your directories are setup
   properly and can be written to by the web process, they are in
   `httpdocs/var/cache`, and `httpdocs/var/session`. If those
   directories are not writeable, they could appear in your server's
   root system at `/tmp/Magento/var`.

But, as I discovered today, there are two more pieces...

1. Check for non-standard modification of the .htaccess file forcing
   domain redirection.
1. Check if the magento configuration cache is using APC.

APC is the one stuck me. I spent about 5 hours trying like made to
figure out where it kept getting the 'old' url from, when it didn't
exist in the code or database anymore. In this rare occasion, we are
hosting the development site, and the live site, on the same server.

Everytime the live site got a hit, it would cache the live
configurations into the APC, and the dev would happily read right
on, redirecting to the live site. Make sure you check
`/httpdocs/app/etc/config.xml` and `/httpdocs/app/etc/local.xml`!
This might be your issue!



With Location module quickly becoming obsolete, replaced by the
dedicated separate modules: `addressfield`, `geofield`, and `geocoder`,
it's handy to have a copy paste mapping to translate the data.
Here's a field map from location to `addressfield` format for you.

```php
$node = node_load(###);

$node->field_address = array();
if( !empty($node->locations) && is_array($node->locations) ){
    foreach($node->locations as $delta => $location){
        $node->field_address[$node->language][0] = array(
            'country' => strtoupper($location['country']),
            'administrative_area' => strtoupper($location['province']),
            'sub_administrative_area' => NULL,
            'locality' => $location['city'],
            'dependent_locality' => NULL,
            'postal_code' => $location['postal_code'],
            'thoroughfare' => $location['street'],
            'premise' => !empty($location['additional'])? $location['additional'] : NULL,
            'sub_premise' => NULL,
            'organisation_name' => $node->title,
            'name_line' => NULL,
            'first_name' => NULL,
            'last_name' => NULL,
            'data' => NULL,
        );
    }
}
```


Drupal Migration from Location to Address Field Mapping


Had a client that needed to increase their prices by 1.58%, across
the entire store. They used base product prices on configurable
products with super options that had their own price modifications.

_Think: Product A - $10. Option A ( 12 oz ) + $2_

The sql queries below will update the product tables as required.
Note that these work only on static price adjustments, not
percentage. Though, that should be easy enough to figure out given
the below tables.

This worked as of Magento community version 1.7.0.2.

## Sql

Base prices:

```sql
UPDATE catalog_product_entity_decimal
SET `value` = ROUND( `value` + (`value` * .0185), 2)
WHERE attribute_id IN (
	SELECT attribute_id FROM eav_attribute WHERE attribute_code IN ('price', 'special_price')
)
AND `value` > 0
```

Product Super Options Costs

```sql
-- Positive Adjustments
UPDATE catalog_product_super_attribute_pricing
SET pricing_value = ROUND( pricing_value + ( pricing_value \* .0185 ), 2 )
WHERE pricing_value > 0
AND is_percent = 0

-- Negative Adjustments
UPDATE catalog_product_super_attribute_pricing
SET pricing_value = ROUND( pricing_value - ( pricing_value \* .0185 ), 2 )
WHERE pricing_value < 0
AND is_percent = 0
```

## Reindex

After completing, make sure to go back into the admin, and reindex
pricing!



I need to do this far too often.
Mostly leaving this as a note for myself:

```bash
rm -rf `find . -type d -name .svn`
```


Recursively Removing .svn


Here's the general set of development variables I use for Drupal 7,
the variable names are the same in D6 (mostly), though the format
for insertion is a bit different:

```php
/**
 * Development Settings
 */
$conf['development'] = TRUE; // Allows you to wrap development code in if statements
// if( variable_get('development', FALSE){ ... }
$conf['error_level'] = 2; // Display all messages. In drupal 6, use 1 for 'Report errors to screen'
$conf['preprocess_css'] = FALSE; // Disable css aggregation
$conf['preprocess_js'] = FALSE; // Disable js aggregation
$conf['cache'] = 0; // Disable page cache
$conf['dev_timer'] = TRUE; // Turns on the devel page timer
$conf['dev_mem'] = TRUE; // Turns on the devel memory used timer
$conf['cdn_status'] = 0;
```


Drupal Development Settings.php Additions


Had a request today for the system a Magento system to automatically
create a coupon code using an existing sales rule (shopping cart
rule). They wanted to control the requirements and logic in Magento's
admin, but let a third party create coupon codes as required.

## Version 2 - Formatted

```php
// Get the rule in question
$rule = Mage::getModel('salesrule/rule')->load(4);

// Define a coupon code generator
// Look at Mage_SalesRule_Model_Coupon_Massgenerator for options
$generator = Mage::getModel('salesrule/coupon_massgenerator');

if( !empty($parameters['format']) ){
  switch( strtolower($parameters['format']) ){
    case 'alphanumeric':
    case 'alphanum':
      $generator->setFormat( Mage_SalesRule_Helper_Coupon::COUPON_FORMAT_ALPHANUMERIC );
      break;
    case 'alphabetical':
    case 'alpha':
      $generator->setFormat( Mage_SalesRule_Helper_Coupon::COUPON_FORMAT_ALPHABETICAL );
      break;
    case 'numeric':
    case 'num':
      $generator->setFormat( Mage_SalesRule_Helper_Coupon::COUPON_FORMAT_NUMERIC );
      break;
  }
}

$generator->setDash( !empty($parameters['dash_every_x_characters'])? (int) $parameters['dash_every_x_characters'] : 0);
$generator->setLength( !empty($parameters['length'])? (int) $parameters['length'] : 6);
$generator->setPrefix( !empty($parameters['prefix'])? $parameters['prefix'] : '');
$generator->setSuffix( !empty($parameters['suffix'])? $parameters['suffix'] : '');

// Set the generator, and coupon type so it's able to generate
$rule->setCouponCodeGenerator($generator);
$rule->setCouponType( Mage_SalesRule_Model_Rule::COUPON_TYPE_AUTO );

// Get as many coupons as you required
$count = !empty($parameters['count'])? (int) $parameters['count'] : 1;
$codes = array();
for( $i = 0; $i < $count; $i++ ){
  $coupon = $rule->acquireCoupon();
  $coupon
    ->setType(Mage_SalesRule_Helper_Coupon::COUPON_TYPE_SPECIFIC_AUTOGENERATED)
    ->save();

  $code = $coupon->getCode();
  $codes[] = $code;
}
return $codes;
```

## Version 1

```php
// Get the rule in question
$rule = Mage::getModel('salesrule/rule')->load(3);

// Define a coupon code generator
$generator = Mage::getModel('salesrule/coupon_codegenerator');
// Look at Mage_SalesRule_Model_Coupon_Codegenerator for options

// Set the generator, and coupon type so it's able to generate
$rule->setCouponCodeGenerator($generator);
$rule->setCouponType( Mage_SalesRule_Model_Rule::COUPON_TYPE_AUTO );

// Get as many coupons as you required
$coupon = $rule->acquireCoupon();
print $coupon->getCode();
```


Magento - Programmatically Creating A Sales Rule Coupon Code


I frequently need to find nodes near a location. The needs vary, but
the actual search logic rarely changes. I use this function, along
with the installed Location module to find nodes near a coordinate
set. Note that this is Drupal 6 code. You'll need to adjust the
variable handling for D7.

```php
/**
 * Finds nodes near a given location based on parameters
 *
 * @param array $parameters
 *  $parameters['latitude'] Required - Latitude coordinate to search from
 *  $parameters['longitude'] Required - Latitude coordinate to search from
 *  $parameters['distance'] = 5 Distance in miles to search
 *  $parameters['distance_units'] = 'miles' - Option 'meters'
 *  $parameters['type'] Type of content to search
 *  $parameters['status'] Status of content to search
 */
function locations_get_nearby_nodes($params){
  $params += array(
    'distance' => 5,
    'distance_units' => 'miles'
  );

  // Distance needs to be converted from miles to meters!
  if( $params['distance_units'] == 'miles' ){
    $params['distance'] = $params['distance'] / 0.000621371192;
  }

  // Get location parameters we need
  $distance_sql = earth_distance_sql($params['longitude'], $params['latitude'], 'location');
  $latitude_range =  earth_latitude_range($params['longitude'], $params['latitude'], $params['distance']);
  $longitude_range =  earth_longitude_range($params['longitude'], $params['latitude'], $params['distance']);

  // Setup where logic
  $where = '';
  $query_args = array();

  // Location
  $where .=
    "location.latitude > %f
    AND location.latitude < %f
    AND location.longitude > %f
    AND location.longitude < %f";
  $query_args[] = $latitude_range[0];
  $query_args[] = $latitude_range[1];
  $query_args[] = $longitude_range[0];
  $query_args[] = $longitude_range[1];

  // Node type
  if( array_key_exists( 'type', $params ) ){
    $where .= " AND node.type = '%s'";
    $query_args[] = $params['type'];
  }

  // Node status
  if( array_key_exists( 'status', $params ) ){
    $where .= " AND node.status = %d";
    $query_args[] = $params['status'];
  }

  $query =
    "SELECT
      node.nid
      ,node.title
      ,location.lid
      ,location.latitude
      ,location.longitude
      ," . $distance_sql . " AS distance
    FROM node node
    JOIN location_instance location_instance ON node.vid = location_instance.vid
    JOIN location location ON location_instance.lid = location.lid
    WHERE " . $where . "
    ORDER BY distance ASC";

  $results = db_query($query, $query_args);

  $locations = array();

  while( $result = db_fetch_object($results) ){
    if( $params['distance_units'] == 'miles' ){
      $result->distance = $result->distance * 0.000621371192;
    }
    $result->node = node_load($result->nid);

    $locations[] = $result;
  }

  return $locations;
}
```


Drupal - Find Nearby Nodes


Working on a D6 CCK site today, so the code is slightly outdated but
can likely be adapted for D7 fields quickly enough. What we had was
a seperate system of key levels available to users in the system
coming from a custom module. These levels were defined in a table
exposed to views through the api previously. Today, we needed to
create a field on a node that contained a reference to a level.
There was no way to do this directly though views, as our custom
base table was a loner. That left two possible options:

Create a simple integer field containing the ids of the key levels
as a field on the node, and create the relationship in views after
'somehow'. Create a new type of field 'something' like node reference
that pointed back at our levels. While I admin, #2 is the far
stronger option for an admin controlling the system manually, that
wasn't the case for us this time. The field itself is going to be
updated by various events through many parts of the system. Creating
a special field type just for this would have been a waste of time
since the admin isn't even allowed to edit the field. So, here's
how we accomplished number one.

Go ahead and create your integer field. Get it filling in the ids
from the other table, then it's time to expose the relationship to
views. The core already exposes the node, and it's fields to views,
so you have to use the views_data_alter hook to modify the existing
field.

```php
/**
 * Implementation of hook_views_data_alter
 */
function hook_views_data_alter(&$data){
  // Add an extra relationship for field_key_level to key point levels
  $data['node_data_field_key_level']['field_key_level_value']['relationship'] = array(
    'base' => 'uc_key_points_levels',
    'field' => 'lid',
    'left_field' => 'field_key_level_value',
    'handler' => 'views_handler_relationship',
    'label' => t('Key Point Level'),
  );
}
```


Joining Drupal (CCK) Fields To Other Base Tables Through Views


Assume you've created a local table from your csv with two columns: sku, weight.

```sql
SELECT cped.value, cpe.sku, update.\*
FROM catalog_product_entity_decimal cped
INNER JOIN eav_attribute ea ON ea.attribute_id = cped.attribute_id AND ea.attribute_code = 'weight'
INNER JOIN catalog_product_entity cpe ON cpe.entity_id = cped.entity_id
INNER JOIN \_product_weight_updates update ON update.sku = cpe.sku
LIMIT 20

UPDATE catalog_product_entity_decimal cped
INNER JOIN eav_attribute ea ON ea.attribute_id = cped.attribute_id AND ea.attribute_code = 'weight'
INNER JOIN catalog_product_entity cpe ON cpe.entity_id = cped.entity_id
INNER JOIN \_product_weight_updates update ON update.sku = cpe.sku
SET cped.value = update.weight
WHERE cpe.sku = update.sku
```


Mass updating magento product weights from a csv


An error occurred while saving this configuration:

    Warning: preg_match() expects parameter 2 to be string, array given in app/code/core/Mage/Adminhtml/Model/System/Config/Backend/Encrypted.php on line 62

Magento version 1.7.0.2

Found a real winner of a bug today in Magento's core configuration
saving objects. We were able to save any config screen without a
password on it, but nothing with a password. After a couple hours
digging around in `app/code/core/Mage/Adminhtml/Model/Config/Data.php`,
I located the issue. In the save function, around line 135ish, it
attempts to get the backend model that will be used to save the
data. Intense logging around showed that after the first non-standard
config field, the backend model to be saved was permanently swapped
to `adminhtml/system_config_backend_encrypted`. Why? Bad code. The
issue is that they check if the backend model has been set, and uses
it if it has. Which means future loops _never go back to core/config_
because it's already set to something on the first pass!

The answer is simple, unset backend class, or fix the faulty if logic.

```php
/**
 * Get field backend model
 */
unset( $backendClass ); // Add this line
if (isset($fieldConfig->backend_model)) {
  $backendClass = $fieldConfig->backend_model;
}
if (!isset($backendClass)) {
  $backendClass = 'core/config_data';
}
```


Magento - Error Saving Configuration - Array Encrypted.php


Need to import reviews from your old system to Magento? Try this
code as a starting point.

```php
// Invoke the Magento environment
require_once( '../../app/Mage.php' );
Mage::app();

$_read = Mage::getSingleton('core/resource')->getConnection('core_read');
$_write = Mage::getSingleton('core/resource')->getConnection('core_write');

// Remove existing ratings
$_write->query("SET FOREIGN_KEY_CHECKS = 0;");
$_write->query("TRUNCATE TABLE rating_option_vote;");
$_write->query("TRUNCATE TABLE review_detail;");
$_write->query("TRUNCATE TABLE review_entity_summary;");
$_write->query("TRUNCATE TABLE review_store;");
$_write->query("TRUNCATE TABLE review;");
$_write->query("TRUNCATE TABLE rating_option_vote_aggregated;");
$_write->query("SET FOREIGN_KEY_CHECKS = 1;");

$file_handle = fopen('reviews-data.csv', 'r');
$i = 0;
while( $csv_line = fgetcsv($file_handle) ){
  if( !is_array($csv_line) ) {
    break;
  }
  //if( $i > 50 ) break;
  $i++;
  // Define and clean variables
  $product_id = trim($csv_line[0]);
  $sku = trim($csv_line[1]);
  $product_name = ucwords( strtolower( trim( $csv_line[2] ) ) );
  $rating_value = (int)$csv_line[3];
  if( empty( $rating_value ) ){
    continue;
  }
  $details = trim( $csv_line[4] );
  $first_name = ucwords( strtolower( trim( $csv_line[5] ) ) );
  $last_name = ucwords( strtolower( trim( $csv_line[6] ) ) );
  // Create a single name
  $nickname = '';
  if( !empty($first_name) ){
    $nickname .= $first_name;
  }
  if( !empty($last_name) ){
    if( !empty($nickname) ){
      $nickname .= ' ';
    }
    $nickname .= $last_name;
  }
  if( empty($nickname) ){
    $nickname = 'Guest';
  }

  $email = strtolower( trim( $csv_line[7] ) );
  if( !$created = strtotime( trim($csv_line[8]) ) ){
    $created = time();
  }

  $status = (int)$csv_line[9];
  if( $status == 1 ){
    $approval_status = 1;
  } else {
    $approval_status = 3;
  }

  // Customer setup;
  $_customer = Mage::helper('custom')->getCustomerByEmail($email); // You'll need to write this logic yourself

  // IMPORTANT: Set up customer session.
  // the rating/option model resource checks the customer session to get the customer ID.
  $_session = Mage::getSingleton('customer/session')->setCustomer($_customer)->setCustomerAsLoggedIn($_customer);

  $_product = _getReviewProduct($sku); // You'll need to write this logic yourself

  if(!$_product) {
    print '<p>Unmatched SKU: ' . $sku . '</p>';
    continue;
  }

  // Add the review
  $_review = Mage::getModel('review/review')
    ->setEntityPkValue($_product->getId())
    ->setStatusId($approval_status)
    // ->setCreatedAt( date('Y-m-d H:m:s', $created) ) // Has no effect
    ->setTitle($product_name)
    ->setDetail($details)
    ->setEntityId(1)
    ->setStoreId(1)
    ->setStores(array(1,0))
    ->setCustomerId($_customer->getId())
    ->setNickname($nickname)
    ->save();
  // Set the created date
  $_write->query("UPDATE review SET created_at = '" . date('Y-m-d H:m:s', $created) .  "' WHERE review_id = " . $_review->getId());
  $_review->aggregate();

  // Map your rating_id to your option_id with an array or something
  $rating_options = array(
      //1 => array(1,2,3,4,5), // <== Look at your database table `rating_option` for these vals
      //2 => array(6,7,8,9,10),
      //3 => array(11,12,13,14,15),
      4 => array(16,17,18,19,20),
  );

  // Now save the ratings
  foreach($rating_options as $rating_id => $option_ids):
    try {
      $_rating = Mage::getModel('rating/rating')
      ->setRatingId($rating_id)
      ->setReviewId($_review->getId())
      ->addOptionVote( $option_ids[$rating_value-1],$_product->getId() );
    } catch (Exception $e) {
      print_r($e);
      die($e->getMessage());
    }
  endforeach;
}

function _getReviewProduct( $sku ){
  static $cache = array();

  if( !array_key_exists($sku, $cache) ){
    $cache[$sku] = NULL;
     // You'll need to write this logic yourself
    }
  }

  return $cache[$sku];
}
```


Magento import reviews


Done some test orders on your new site, and need them gone?
Here's the script we ran for one of our clients. The actual tables
required may vary, because each extension can add its own tables
you'll need to consider. In this case, beyond core, we had a table
from the Amasty Order Attributes extension. Remember, always backup
your database before making changes.

```sql
SET FOREIGN_KEY_CHECKS = 0;

-- Tables with extra order data
TRUNCATE TABLE amasty_order_flag;

-- Subscriptions
TRUNCATE TABLE aw_sarp_flat_subscriptions;
TRUNCATE TABLE aw_sarp_sequence;
TRUNCATE TABLE aw_sarp_subscription_items;
TRUNCATE TABLE aw_sarp_subscriptions;

-- Shipments
TRUNCATE TABLE data_orders_shipment_details;
TRUNCATE TABLE data_orders_shipments;
TRUNCATE TABLE sales_flat_shipment_track;
TRUNCATE TABLE sales_flat_shipment_comment;
TRUNCATE TABLE sales_flat_shipment_item;
TRUNCATE TABLE sales_flat_shipment_grid;
TRUNCATE TABLE sales_flat_shipment;

-- Billing agreements
TRUNCATE TABLE sales_billing_agreement_order;
TRUNCATE TABLE sales_billing_agreement;

-- Credit memos
TRUNCATE TABLE sales_flat_creditmemo_comment;
TRUNCATE TABLE sales_flat_creditmemo_item;
TRUNCATE TABLE sales_flat_creditmemo_grid;
TRUNCATE TABLE sales_flat_creditmemo;

-- Invoices
TRUNCATE TABLE sales_flat_invoice_comment;
TRUNCATE TABLE sales_flat_invoice_item;
TRUNCATE TABLE sales_flat_invoice_grid;
TRUNCATE TABLE sales_flat_invoice;
TRUNCATE TABLE sales_invoiced_aggregated_order;
TRUNCATE TABLE sales_invoiced_aggregated;

-- Main order tables affected by just creating an order

-- Attributes
TRUNCATE TABLE amasty_amorderattr_order_attribute;
-- Sales Order
TRUNCATE TABLE sales_flat_order_address;
TRUNCATE TABLE sales_flat_order_grid;
TRUNCATE TABLE sales_flat_order_item;
TRUNCATE TABLE sales_flat_order_payment;
TRUNCATE TABLE sales_flat_order_status_history;

-- Initial Quote
TRUNCATE TABLE sales_flat_quote_address;
TRUNCATE TABLE sales_flat_quote_address_item;
TRUNCATE TABLE sales_flat_quote_item;
TRUNCATE TABLE sales_flat_quote_item_option;
TRUNCATE TABLE sales_flat_quote_payment;
TRUNCATE TABLE sales_flat_quote_shipping_rate;
TRUNCATE TABLE sales_flat_quote;

TRUNCATE TABLE sales_order_tax_item;
TRUNCATE TABLE sales_order_tax;

TRUNCATE TABLE sales_payment_transaction;

TRUNCATE TABLE sales_recurring_profile_order;
TRUNCATE TABLE sales_recurring_profile;

-- Main order table
TRUNCATE TABLE sales_flat_order;

-- Clear aggregate tables
TRUNCATE TABLE sales_order_aggregated_updated;
TRUNCATE TABLE sales_order_aggregated_created;
TRUNCATE TABLE sales_refunded_aggregated_order;
TRUNCATE TABLE sales_refunded_aggregated;
TRUNCATE TABLE sales_shipping_aggregated_order;
TRUNCATE TABLE sales_shipping_aggregated;
TRUNCATE TABLE sales_bestsellers_aggregated_yearly;
TRUNCATE TABLE sales_bestsellers_aggregated_monthly;
TRUNCATE TABLE sales_bestsellers_aggregated_daily;

TRUNCATE TABLE tax_order_aggregated_updated;
TRUNCATE TABLE tax_order_aggregated_created;

-- Clear browsing and order event history
DELETE FROM report_event
WHERE event_type_id IN (
	SELECT event_type_id FROM report_event_types WHERE event_name IN (
		'catalog_product_view', 'sendfriend_product', 'catalog_product_compare_add_product',
		'checkout_cart_add_product', 'wishlist_add_product', 'wishlist_share'
	)
);
TRUNCATE TABLE report_compared_product_index;
TRUNCATE TABLE report_viewed_product_index;
TRUNCATE TABLE report_viewed_product_aggregated_daily;
TRUNCATE TABLE report_viewed_product_aggregated_monthly;
TRUNCATE TABLE report_viewed_product_aggregated_yearly;

TRUNCATE TABLE catalogsearch_query;

-- UPDATE eav_entity_store SET incrementy_last_id = 100000000 WHERE entity_type_id = 5
SET FOREIGN_KEY_CHECKS = 1;

UPDATE eav_entity_store
SET increment_last_id = 100000000
WHERE entity_type_id IN (
	SELECT entity_type_id FROM eav_entity_type WHERE entity_type_code IN (
		'order', 'invoice'
	)
);
```


Purging or Deleting All Magento Orders


Need to find out what attributes changed from base in your magento
install? The kind that aren't defined through the standard admin,
meaning you've got a custom extension to deal with? Here's your search:

```sql
SELECT a.attribute_id, a.attribute_code, et.entity_type_id, et.entity_model, et.attribute_model, et.entity_table
FROM eav_attribute a
JOIN eav_entity_type et ON et.entity_type_id = a.entity_type_id
WHERE a.is_user_defined = 1
AND et.entity_type_id IN (
    SELECT entity_type_id FROM eav_entity_type WHERE entity_type_code IN (
        'order', 'order_address', 'order_item', 'order_payment', -- Orders
        'quote', 'quote_address', 'quote_address_rate', 'quote_address_item', 'quote_item', 'quote_payment', -- Quotes
        'invoice', 'invoice_item', 'invoice_shipment', 'invoice_comment', -- Invoices
        'shipment', 'shipment_item', 'shipment_comment', 'shipment_track', -- Shipments
        'creditmemo', 'creditmemo_item', 'creditmemo_comment' -- Credit memos
    )
)
ORDER BY et.entity_model, a.attribute_code
```


Find custom attributes on magento orders


I know this is beyond simple, but sometimes it's nice to have a copy
paste resource for setting up a vhost password protected site.

```
AuthName "Restricted Area"
AuthType Basic
AuthUserFile /var/www/vhosts/{site}/security/.htpasswd
AuthGroupFile /dev/null
require valid-user
```


Vhosts authentication fragments


Found this today on
[Jones Jerry](http://www.jonesjerry.com/linux/disabling-php-apc-in-directory-or-vhost.html).
Very helpful little flag:

```
<VirtualHost xx.xx.xxx.xx:80>
    SuexecUserGroup "#1234" "#1235"
    ServerName example.com
    ServerAlias www.example.com
    php_flag apc.cache_by_default Off
    ...
</VirtualHost>
```


Disabling APC by vhost


[emfluence&trade;](http://emfluence.com/) needed to start including
fairly lengthy
descriptions on some of their fields today, without taking all the
screen real estate or bothering the users that already knew the
system. The answer everyone agreed would be best would be to allow
the form items to have collapsible descriptions. I traced out a way
to do this by overriding the `form_item` theme provided by the basic
`form.inc` from Drupal. This could be done through your template file,
or a module by overriding the theme function (I explained this in
another fragment a couple weeks ago) in case you're running
multiple themes.

The following is a copy paste of the `form.inc` `theme_form_item`
code, until you get to the description handling. It should be fairly
readable, but I will point one thing out. Make sure you have some
vague idea how many characters fit on a line! In our case, the
ideal number was 130ish. If you make a collapsible item out of
something that could fit on one line anyway you just add more
processing from the server, and the client's javascript, while you
gain nothing. Just let those one line descriptions drop right in,
much better for everyone involved.

```php
function custom_code_form_element($element, $value) {
  // This is also used in the installer, pre-database setup.
  $t = get_t();

  $output = '<div class="form-item"';
  if (!empty($element['#id'])) {
    $output .= ' id="'. $element['#id'] .'-wrapper"';
  }
  $output .= ">\n";
  $required = !empty($element['#required']) ? '<span class="form-required" title="'. $t('This field is required.') .'">*</span>' : '';

  if (!empty($element['#title'])) {
    $title = $element['#title'];
    if (!empty($element['#id'])) {
      $output .= ' <label for="'. $element['#id'] .'">'. $t('!title: !required', array('!title' => filter_xss_admin($title), '!required' => $required)) ."</label>\n";
    }
    else {
      $output .= ' <label>'. $t('!title: !required', array('!title' => filter_xss_admin($title), '!required' => $required)) ."</label>\n";
    }
  }

  $output .= " $value\n";

  if (!empty($element['#description'])) {
    if( strlen($element['#description']) <= 130 ){
      // Original Method
      $output .= ' <div class="description">'. $element['#description'] ."</div>\n";
    } else {
      // Collapsible Method
      $description = array(
        '#type' => 'fieldset'
        ,'#collapsible' => true
        ,'#collapsed' => true
        ,'#prefix' => ' <div class="description">'
        ,'#suffix' => ' </div>'
        ,'#title' => t($element['#title'] . ' Description')
        ,'text' => array(
          '#type' => 'markup'
          ,'#value' => '<div>' . $element['#description'] . '</div>'
        )
      );
      $output .= drupal_render($description);
    }
  }

  $output .= "</div>\n";

  return $output;
}
```


Drupal - Collapsible Form Item Descriptions


Original Credit to [Drewish](http://drewish.com/node/118), and of
course the CCK team for such a fantastic tool. I'm just adding it here
for reference, and expanding a bit with the uninstall knowledge.

## Install

```php
// Need to load the CCK include file where content_field_instance_create() is defined.
module_load_include('inc', 'content', 'includes/content.crud');

// If you wanted to add the field to several node types, loop over them...
foreach (array('athlete', 'feature', 'product', 'tech') as $type) {
  // ...and assign the node type.
  $field['type_name'] = $type;
  content_field_instance_create($field);
}
```

## Uninstall

```php
content_field_instance_delete($field_name, $content_type);
```

Note that removing the last instance of a field will remove the field's definition from the database. So you're clean just doing this.



This particular example shows you how to update a version 3 Google
map to your current location. But, it should show you the needed
pieces to allow you to create your geolocation js effects. Most
of the comments you'll need are right in the code for easy copy paste.

```js
// costume module housing object
customModule = {
  // globalInit function should other things be required later
  init: function(){
    // Fire nearby map updates
    customModule.nearby.init();
  }
  ,nearby: {
    tracker: null
    ,minimumAccuracy: 150 // Must report that it is within at least 150 meter accuracy
    ,map: null // The map object to be updated
    ,latitude: null // Last known latitude
    ,longitude: null // Last known longitude
    ,init: function(){
      // Only try to fire the tracker if it's not tracking
      if( customModule.nearby.tracker == null){
        // Set up a watchPosition to constantly monitor the geo location provided by the browser
        // Full spec for navigator.geolocation can be found here: http://dev.w3.org/geo/api/spec-source.html#geolocation_interface
        // Note that watchPosition is cheaper on processing power for the end user than polling the current location multiple times

        // First, check that the Browser is capable
        // NOTE: !! forces a boolean response
        if(!!navigator.geolocation){
          // Start a tracker
          customModule.nearby.tracker = navigator.geolocation.watchPosition(
            customModule.nearby.success // Register a success callback
            ,customModule.nearby.error // Register an error callback
            ,{ // Options
              enableHighAccuracy:true // This is gets you accuracy anywhere from 5-50ish meters
              ,maximumAge:30000
              ,timeout:27000 // How long without gps updates the code should continue to try to fire in milliseconds
            }
          );
        } else {
          // Some browsers will not be capable
          // Others my have capable browsers, with the setting for 'allow websites to ask my location' off
          // Give a "Please enable geolocation in your browser for more accuracy"
          jQuery('body').prepend('<div class="warning">Your device is not capable of geolocation. Please see <a href="">this page</a> for ways to turn it on.</div>');
        }
      }
    }
    ,success: function(position){
      // Ensure we actually have moved. No point spending cpu cycles to update the map if we have not.
      if( customModule.nearby.latitude != position.coords.latitude || customModule.nearby.longitude != position.coords.longitude ){
        // Pan the map to the current location
        customModule.nearby.map.panTo( new google.maps.LatLng(position.coords.latitude, position.coords.longitude) );
      }

      // Check that the accuracy of our Geo location is sufficient for our needs
      // If it is, stop running geolocation.
      // Remove this to cause the device to continually update to your location
      // One use of this would be to follow you down the street
      if( position.coords.accuracy <= customModule.nearby.minimumAccuracy ){
        navigator.geolocation.clearWatch( customModule.nearby.tracker );
      }
    }
    ,error: function(error){
      // Todo: Decide if you want to announce that errors have occured. The two most common are below
      switch(error.code){
        case 1:
          // alert('User denied Geolocation');
        break;
        case error.TIMEOUT:
          // Note that desktops that share their location, will eventually hit this
          // It's annoying, and maybe should not be stated
          // Perhaps toggling some 'tracking' on off light on the screen would be better
          // alert('Timeout!');
        break;
      };
    }
  }
}

jQuery(document).ready(function(){
  customModule.init();
)};
```


Client Side Geolocation


```
# Cache Control with .htaccess
# from http://www.askapache.com/htaccess/speed-up-sites-with-htaccess-caching.html

<FilesMatch ".(flv|gif|jpg|jpeg|png|ico|swf)$">
Header set Cache-Control "max-age=$Time"
</FilesMatch>
```

And list of some common times:

- 300 5 MIN
- 600 10 MIN
- 900 15 MIN
- 1800 30 MIN
- 2700 45 MIN

* 3600 1 HR
* 18000 5 HR
* 43200 12 HR
* 86400 24 HR

- 86400 1 DAY
- 172800 2 DAY
- 259200 3 DAY - This is the limit for YSlow's Far Future Restriction
- 345600 4 DAY
- 432000 5 DAY
- 518400 6 DAY
- 604800 7 DAY

* 604800 1 WEEK
* 1209600 2 WEEK
* 1814400 3 WEEK
* 2419200 4 WEEK

- 2419200 1 MONTH (FEBRUARY)
- 2505600 1 MONTH (FEBRUARY LEAP YEAR)
- 2592000 1 MONTH (APRIL, JUNE, SEPTEMBER, NOVEMBER)
- 2678400 1 MONTH (JANUARY, MARCH, MAY, JULY, AUGUST, OCTOBER, DECEMBER)
- 31536000 12 MONTH

Of course, the best policy would be to implement permanent caching of
static content, then use version numbers on your content. A huge
bonus of doing this is that people visiting your site get fresh
files, every time you make a change, instead of telling your client
to reload.

For more information on the reasoning behind doing this, you can
read up on Yahoo's [YSlow site](http://developer.yahoo.com/performance/rules.html#expires).


Apache Content Caching


I installed the blog module today for a client. Loaded 200+ blog
entries, and went to /blog to see the result. I was greeted by the
most recent blog entry, and nothing else. I spent a good hour chasing
down why more than one blog entry would not show, and the result
turned out to be a Views / Drupal interaction bug.

Turns out this was a site that had view, and webform. But, before
webform offered 'available as a block' itself. So, a view had been
made that rendered a full node, as a block. And that happily served
throughout the site to output. I expect that views manages to keep
its paging going nicely within itself. For some reason, the Drupal
core pager just got overrun in the `views_plugin_pager_full.inc`
file. Prior to line 267 function `update_page_info()`, I had 200+
elements in my pager. After, just the 1 caused by the node view.

The solution, was of course to delete the node view. I may still try
to figure out why it broke, and post an issue for them to review.

Tags:


Drupal Views Node View May Kill Your Pager


I'm not fond of the `.htaccess` shipped with Drupal,
or at least not the redirection lines they suggest.
I prefer not having to replace my sub domain.
Also, I like having standard sub domains for development:
dev., m., and local. I replace them with this:

    RewriteCond %{HTTP_HOST} !^(www|local|dev|m). [NC]
    RewriteRule ^ http://www.%{HTTP_HOST}%{REQUEST_URI} [L,R=301]


.htaccess no subdomain redirect


There's an interesting conflict between wanting to offer automatic
location detection of users, and allowing them to correct you.
Most major sites will take one of two options:

- Guess at your location
- Ask for it

Most clients I've found do not want to ask, they prefer to guess,
and be corrected. Home depot is a notable exception that I remember,
they demand your zip code upfront. But things like Redbox, Google,
etc try to detect you first. This kind of behavior is actually
somewhat easy to do in Drupal views. I'll show you how to setup a
views proximity location filter to auto detect location when none
is provided.

Starting point. You'll need the following things running:

- Drupal
- Views
- Location
- Smart IP
- Gmap module
- A custom module
- A 'nearby' view

## Step 1 - Create a form alter to allow you to alter the exposed views filters:

```php
function custom_form_views_exposed_form_alter(&$form, &$form_state){
  switch( $form_state['view']->name ){
    case 'find_a_retailer':
      module_load_include('inc', 'custom', 'retailer/retailer');
      _custom_views_exposed_form_find_a_retailer($form, $form_state);
    break;
  }
}
```

## Step 2 - Add a validation hook to the form

```php
/**
 * Customizations for the find a retailer exposed form
 */
function _custom_views_exposed_form_find_a_retailer(&$form, $form_state){
  // Add a hook to detect country and reformat postal codes to allow easier canadian access
  $form['#validate'][] = '_custom_views_exposed_form_find_a_retailer_validate';
}
```

## Step 3 - Default the location

There are 3 ways to do this. If you're in the US, method 1 is super easy
and quick. Method 2 is... questionable, but Method 3 is just nasty,
requiring a full zip code list of the country in question.

```php
function _custom_views_exposed_form_find_a_retailer_validate(&$form, &$form_state){
  // If no zip code has been supplied, attempt to determine one based on the IP information
  if( empty($form_state['values']['distance']['postal_code']) ){
    // Prevent ip detected pages from being cached
    drupal_page_is_cacheable(FALSE);

    $ip = NULL;
    if (user_access('administer smart_ip') && variable_get('smart_ip_debug', FALSE)) {
      $ip = variable_get('smart_ip_test_ip_address', ip_address());
    }
    if( empty($ip) ){
      $ip = ip_address();
    }
    $location = smart_ip_get_location($ip);

    if( !empty($location['country_code']) && !empty($location['zip']) ){
      $country = strtolower( $location['country_code'] );
      $postal_code = strtoupper( $location['zip'] );
    } else {
      // Method 1: Check our external source
      // Note this works only for US, as geonames returns only the first three characters of canadian postal codes, and we need all 6
      /*
      $response = drupal_http_request('http://ws.geonames.org/findNearbyPostalCodesJSON?formatted=true&lat=' . $location['latitude'] . '&lng=' . $location['longitude']);
      if( $response->code == 200 ){
        $data = json_decode( $response->data );
        // Set the country
        $country = strtolower( $data->postalCodes[0]->countryCode );
        $postal_code = strtoupper( $data->postalCodes[0]->postalCode );
      }
      */
      // Method 2: Attempt to find a postal code by searching for an existing location 'near' location
      /*
      $params = array(
        'latitude' => $location['latitude'],
        'longitude' => $location['longitude'],
        'limit' => 1,
        'distance' => 15, // miles
      );

      module_load_include('inc', 'location', 'earth');

      // Distance needs to be converted from miles to meters!
      $params['distance'] = $params['distance'] / 0.000621371192;

      // Get location parameters we need
      $distance_sql = earth_distance_sql($params['longitude'], $params['latitude'], 'location');
      $latitude_range =  earth_latitude_range($params['longitude'], $params['latitude'], $params['distance']);
      $longitude_range =  earth_longitude_range($params['longitude'], $params['latitude'], $params['distance']);

      $query =
        "SELECT
        location.latitude AS gmap_lat
        ,location.longitude AS gmap_lon
        ," . $distance_sql . " AS location_distance
        ,location.country as location_country
        ,location.postal_code as location_postal_code
      FROM location location
      JOIN location_instance li ON li.lid = location.lid
      JOIN node node ON node.nid = li.nid
      WHERE
        location.latitude > :latitude_minimum
        AND location.latitude < :latitude_maximum
        AND location.longitude > :longitude_minimum
        AND location.longitude < :longitude_maximum
        AND location.postal_code != ''
      ORDER BY location_distance ASC LIMIT 1";

      $result = db_query($query, array(
        ':latitude_minimum' => $latitude_range[0],
        ':latitude_maximum' => $latitude_range[1],
        ':longitude_minimum' => $longitude_range[0],
        ':longitude_maximum' => $longitude_range[1],
      ))->fetchObject();

      // Convert meters back to miles
      // $result->location_distance = $result->location_distance * 0.000621371192;

      if( $result ){
        $country = strtolower( $result->location_country );
        $postal_code = strtoupper( $result->location_postal_code );
      }
      */

      // Method 3
      // Using a preloaded zip codes database, identify the closest zipcode to the coordinates
      $params = array(
        'latitude' => $location['latitude'],
        'longitude' => $location['longitude'],
        'limit' => 1,
        'distance' => 15, // miles
      );

      module_load_include('inc', 'location', 'earth');

      // Distance needs to be converted from miles to meters!
      $params['distance'] = $params['distance'] / 0.000621371192;

      // Get location parameters we need
      $distance_sql = earth_distance_sql($params['longitude'], $params['latitude'], 'zipcodes');
      $latitude_range =  earth_latitude_range($params['longitude'], $params['latitude'], $params['distance']);
      $longitude_range =  earth_longitude_range($params['longitude'], $params['latitude'], $params['distance']);

      $query =
        "SELECT
        " . $distance_sql . " AS location_distance
        ,zipcodes.country as country
        ,zipcodes.zip as postal_code
      FROM zipcodes
      WHERE
        zipcodes.latitude > :latitude_minimum
        AND zipcodes.latitude < :latitude_maximum
        AND zipcodes.longitude > :longitude_minimum
        AND zipcodes.longitude < :longitude_maximum
      ORDER BY location_distance ASC LIMIT 1";

      $result = db_query($query, array(
        ':latitude_minimum' => $latitude_range[0],
        ':latitude_maximum' => $latitude_range[1],
        ':longitude_minimum' => $longitude_range[0],
        ':longitude_maximum' => $longitude_range[1],
      ))->fetchObject();

      // Convert meters back to miles
      // $result->location_distance = $result->location_distance * 0.000621371192;

      if( $result ){
        $country = strtolower( $result->country );
        $postal_code = strtoupper( $result->postal_code );
      }

    }
    if( !empty( $country ) && !empty( $postal_code )  ){
      form_set_value(
        array(
          '#parents' => array('distance', 'country')
        )
        ,$country
        ,$form_state
      );
      // Set the postal code
      form_set_value(
        array(
          '#parents' => array('distance', 'postal_code')
        )
        ,$postal_code
        ,$form_state
      );
    }
  }
}
```


Automatically set Drupal location for 'find nearby' views


Views have a tendency to get a bit... complex. Reusing existing
portions of a view makes perfect sense, and the built in tools do a
pretty bang up job of letting you create slightly adjusted displays
that inherit the pieces you need for the most part. But, somethings
crafting more and more displays, just to tweak one setting or
another is just beyond frustrating due to pure volume. So instead,
I submit the following idea. Start simple, and evolve as needed.

A habit I've recently developed is to build the most basic possible
view possible, as the default (drupal 6), or master (drupal 7).
From there, I don't create pages, or blocks, or even attachments.
I grab the wonderful base tool, and tweak on the fly as I embed it
on pages. This might be easier to explain using a simple concrete
example.

Let's imagine you have two content types: `Event Type` and `Event`
`Event` contains a reference to an `Event Type`.

The editor needs to be able to go in and edit the `Event Type` to
add text, etc. And on the view side, below her content, we need to
display a view of events, matching the type being viewed. This could
be done by installing a views field module, and setting up an extra
argument on the view to take in the event type's nid. But who needs
the extra module? And what if one argument doesn't satisfy all our
needs? So, instead, we use hook_node_view to embed a view to the
bottom of the event type problematically. We'll set the filter on
that view on the fly.

Your `events` view would have a very simple base, with filters only
for published of true and node type of event type. Then the
following code comes into play:

```php
function _custom_node_event_type_view($node, $view_mode, $langcode){
  // Only affect full displays, it wouldn't make much sense on a preview
  if( in_array($view_mode, array('default', 'full') ) ){
    // Add a view of events of this type
    $view_display = 'default'; // You could actually use any display
    $view = views_get_view('events');
    $view->set_display($view_display);

    // Options to set the number of items per page, add pager.
    $pager = $view->display_handler->get_option('pager');
    $pager['type'] = 'full'; // Options are none, some, mini, full
    $pager['options']['items_per_page'] = 5; // Options are none, some, mini, full
    $view->display_handler->set_option('pager', $pager);

    // Filter events by reference $node->nid
    $filters = $view->display_handler->get_option( 'filters' );
    $filters['field_event_type_target_id'] = array(
      'id' => 'field_event_type_target_id',
      'table' => 'field_data_field_event_type',
      'field' => 'field_event_type_target_id',
      'operator' => '=',
      'value' => array( 'value' => $node->nid )
    );
    $view->display_handler->set_option( 'filters', $filters );

    // Option to add a field on the fly
    // Add missing body view.
    $fields = $view->display_handler->get_option( 'fields' );
    $fields['body'] = array(
      'id' => 'body',
      'table' => 'field_data_body',
      'field' => 'body',
      'label' => '',
      'type' => 'text_default'
    );
    $view->display_handler->set_option( 'fields', $fields );

    // The output is not always a string, depending on the view display you choose
   // Make sure to observe what it gives back. Blocks have to be thrown though render() for instance
    $view_output = $view->execute_display( $view_display, '' );

    // Add this view to the node
    $node->content[ 'upcoming_events' ] = array(
      '#weight' => 99,
      '#markup' => $view_output
    );
  }
}
```

Note that this code is for Drupal 7, but is very similar in Drupal 6.

This should let you add filters, fields, and even control paging on the fly.

**Update 4/27/2012 9:05:**

I forgot to mention one important part.
"Where did you get the arrays for the filters and fields to add?!"
Seems important, sorry for the oversight. It's actually very simple,
a step I forget when I'm thinking about the harder parts.

Go to the view you want to manipulate. Add the filter or field to the
view directly through the views admin ui, and save it. Now, in the
above code, simple `drupal_set_message( var_export($filters, TRUE) )`,
or `krumo($filters)`. The keys and values for the arrays you need to
add will be listed. Make copy magic. After that, go back to the
views admin ui, and remove the field, then save and you're all done.

Eventually, you'll have done this enough to start to understand the
arrays to add, without the guide. It's always handy for
_new_ field types.

**Credits:**

Thanks to [Beshoy Girgis](https://beshoy.girgis.us/) for updating my pseudo-code
and explanation into working code for a project we were working on.


Altering Drupal Views Embed Programmatically


The [Metatags](http://drupal.org/project/metatag) module is great.
The things it does automatically across the system is really
fantastic, but there's one major problem. It can't add tags to
views. That's not so bad, except that paged data might really
benefit from canonical links. There are multiple modules in
development right now that could be used to solve this issue, but
nothing I've found that is really solid. So, here is a simple hook
fix you could implement from a custom module to handle the gap for
now.

I've also included kind of a shameful yet useful hack in here as
well that can read the description off the view's menu item. I don't
think it's a solid long term solution, but if you really want a
description, it's an option for you.

```php
/**
 * Implementation of hook_views_pre_render()
 * http://api.drupal.org/api/views/docs%21views.api.php/function/hook_views_pre_render/7
 */
function custom_views_pre_render($view){
  // Setup meta data for the view pages
  if( $view->display_handler->plugin_name == 'page' ){
    // Canonical link back to their page
    $element = array(
      '#tag' => 'link', // The #tag is the html tag - <link />
      '#attributes' => array( // Set up an array of attributes inside the tag
        'href' => url( $view->display_handler->get_url() ),
        'rel' => 'canonical',
      ),
    );
    drupal_add_html_head($element, 'canonical');
    // Description
    if( !empty($view->display_handler->options['menu']['description']) ){
      $element = array(
        '#tag' => 'meta',
        '#attributes' => array(
          'name' => 'description',
          'content' => t($view->display_handler->options['menu']['description']),
        ),
      );
      drupal_add_html_head($element, 'meta_description');
    }
  }
  switch($view->name){
  }
}
```


Adding Canonical Tags To a Drupal View


Read a good article today at http://engineeredweb.com/blog/non-blocking-script-loading-drupal/. It's a Drupal article, but really, it's good practice to avoid third party scripts linked in the body no matter the platform. Here's the code:

```html
<script type="text/javascript">
  var sNew = document.createElement("script");
  sNew.async = true;
  sNew.src = "http://example.com/file.js";
  var s0 = document.getElementsByTagName("script")[0];
  s0.parentNode.insertBefore(sNew, s0);
</script>
```

Just drop it near the body's closing tag.


Or, how to avoid third parties slowing down your site loads

Asynchronous Javascript Loading


Lost a bit of time this morning testing out way too many things to get
wamp server to connect to external mssql databases again. It used to
work, but post update, died off again. I came across a wide variety
of advice, most of it seems to be flawed.

Here's some potential error messages you might see:

- "The program can't start because ntwdblib.dll is missing from your
  computer. Try reinstalling the program to fix the problem." -
  php-win.exe
  Not true. Can't even figure out why I get hise error... It starts
  right after that.
- "PHP Startup: Unable to load dynamic library
  '{wamppath}/bin/php/php5.3.0/ext/php_mssql.dll' - The specified
  module could not be found.
  Not true, again. Not only is the file in that location, but
  that's also not the version of php I'm running... Very odd bug.

So how do you get mssql_connect to work? Easier than you think. All I had to do was enable the follow extensions (not all of them may be required even...):

- php_dbllib
- php_mssql
- php_pdo_dblib
- php_pdo_mssql

Didn't seem to need 'ntwdblib.dll' at all...


Using mssql_connect with wampserver php 5.3.8


A client of mine has recently requested that users of their site be
able to search their Canadian postal codes more freely. A quick look
over the zip codes for Canada shows some interesting variations used
by public. The proper postal code could be 'A1W 3A1', but we'll get
searches for the variations like these:

- a1w 3a1
- A1W-3A1
- A1W3A1

The first will return results in an exposed distance / proximity
filter, but the others are buggered. I fixed this using a `form_alter`
that added a tiny bit of logic to format the postal codes to what
the database was expecting. I'll put the code below, but I've also
copied my concern over the Location issues queue in the hope this
fix won't be required for long, here's the link:
http://drupal.org/node/1355148

```php
/**
 * Implementation of hook_form_FORM_ID_alter
 */
function custom_form_views_exposed_form_alter(&$form, &$form_state){
  switch($form['#id']){
    case 'views-exposed-form-local-retailers-page-1':
      module_load_include('inc', 'custom', 'pages');
      custom_form_views_exposed_form_alter_local_retailers_page($form, $form_state);
    break;
  }
}

function custom_form_views_exposed_form_alter_local_retailers_page(&$form, &$form_state){
  $form['#validate'][] = custom_form_views_exposed_form_alter_local_retailers_page_validate';
}

function custom_form_views_exposed_form_alter_local_retailers_page_validate(&$form, &$form_state){
  form_set_value(
    array(
      '#parents' => array('distance', 'postal_code')
    )
    ,custom_format_postal_code( $form_state['values']['distance']['country'], $form_state['values']['distance']['postal_code'] )
    ,$form_state
  );
}
```


Adding Flexibility to Drupal Views Exposed Location Postal Codes


I run across the need for some very specific menus built on the fly
for Drupal once in a while. Things that really aren't blocks that
should be running around the block admin. A great example would be
ajax calls to obtain the submenus for an item and add them to the
page post render for seo purposes.

If you need to access a very custom part of some menu, use the
`menu_block` module, and tweak the following code to your needs:

```php
$settings = array(
    'menu_name' => 'main-menu',
    'expanded' => 1, // Expand all children of this tree.
    'level' => 1, // Starting level
    'follow' => 0, // Make the starting level follow the active menu item.
    'depth' => 2, // Maximum depth - 0 is unlimited
    'sort' => 0, // Sort menu tree by the active menu item’s trail.
    'parent_mlid' => 0, // The menu item to start from - 0 is root
    'title_link' => 0, // If the title should be a link or not
    'delta' => 0, // Which menu block this is
);

$menu_block = menu_tree_build($settings);
print render($menu_block['content']);
```


Drupal - Build menu using Menu_Block directly


One of the new themes we rigged up for a client requires the use of
TypeKit. The easiest way I found to add the JS they provide is to
just add it to the `template.php` file in `hook_preprocess_page`.
The function `drupal_add_js()` will allow for external js files, as
well as inline scripts. Use the code below, and if external js
caching is turned on, it should pick that up while still providing
the dynamic fire call you need. Just make sure you update the third
parameter on the second function to be some region in your theme.
The drupal semi default `page_bottom` is a pretty safe call. You have
to aim to theme it out by altering `html.tpl.php`.

Could it be a module, yes. Is it worth the effort? No.

```php
function {hook}_preprocess_page(){
  // Include typekit
  drupal_add_js('http://use.typekit.com/agq####dev.js', 'external');
  drupal_add_js('try{Typekit.load();}catch(e){}', 'inline', 'page_bottom');
}
```


Use TypeKit in a Drupal 7 Theme


Had a bit of trouble setting default values for a location item
today. It seems I was outsmarting myself, or maybe location was
smarter than I gave it credit for. I couldn't seem to use
`form_alter()` to set default values for the location field. The
values would appear, but nothing would happen on node save.
Strange...

The cause? It seems the location code checks if the values of the
location fields are empty, or are equal to the default values for
the location. So, if you set the default values of the fields to
your user's address... his address counts as empty, because it's
the default value.

The solution! Use `nodeapi( $op = 'prepare')`! It should be noted
that this also works for cck fields' default values as well.

```php
function hook_nodeapi_prepare(&$node, $a3 = NULL, $a4 = NULL){
  if(!$node->nid){
    global $user;

    // Default Values
    $node->field_first_name[0]['value'] = !empty($user_data['first_name'])? $user_data['first_name'] : '';
    // $node->field_first_name[0]['format'] = !empty($user_data['first_name_format'])? $user_data['first_name_format'] : '1'; // If it's a filtered field, you need to include the format.
    $node->field_last_name[0]['value'] = !empty($user_data['last_name'])? $user_data['last_name'] : '';
    $node->field_email[0]['email'] = !empty($user->mail)? $user->mail : '';
    $node->locations[0]['street'] = !empty($user_data['street1'])? $user_data['street1'] : '';
    $node->locations[0]['additional'] = !empty($user_data['street2'])? $user_data['street2'] : '';
    $node->locations[0]['city'] = !empty($user_data['city'])? $user_data['city'] : '';
    $node->locations[0]['postal_code'] = !empty($user_data['postal_code'])? $user_data['postal_code'] : '';
    $node->locations[0]['province'] = !empty($user_data['province_name'])? $user_data['province'] : '';
    $node->locations[0]['province_name'] = !empty($user_data['province_name'])? $user_data['province_name'] : '';
    $node->locations[0]['country'] = !empty($user_data['country'])? $user_data['country'] : 'us';
  }
}
```


Setting Drupal CCK and Location Default Values


My client today need the mobile version of the retailer locator to
shrink down and fit the new mobile theme. Going from about 700px
wide to 300ish, with a height change as well. The cleanest route I
found for doing this is to have the theme itself alter the view just
before rendering. Here's the code, pretty simple once you get past
all the dominating recursion.

It's important to understand exactly what all that recursion is...
Nothing. It's all left overs you don't actually have to interact
with when you need to update just the display options. What you
need, is not in `$view->display` or any such silly recusiveness.
All of the display options you might need to change should be easy to
find at the top level: `$view->style_plugin`.

In your `template.php` file:

```php
function phptemplate_views_pre_render(&$view) {
  if( $view->name == 'local_retailers') {
    $view->style_plugin->options['macro'] = '[gmap behavior=+autozoom|width=300px |height=400px ]';
  }
}
```


Alter Drupal Views display options at the theme level


Note that the [date](https://www.drupal.org/project/date) module is
required for this form element type.
An additional [guide to using these elements](https://www.drupal.org/node/292667)
is available on drupal.org. For a full list of options available,
you'll need to check the module code itself at:
`date/date_api/date_api_elements.inc::_date_api_element_info()`

```php
$form['date'] = array(
    '#type' => 'date_popup',
    '#title' => t('Date'),
    '#date_format' => 'd-m-Y',
    '#date_year_range' => '-100:+0',
    '#date_label_position' => 'none',
    '#default_value' => empty($date)? '' : date('Y-m-d H:i:s', $date),
);
```


Creating Drupal date popup fields using Drupal form api


I had a bit of trouble today getting cron working for a client's
website today. They are hosted at by InMotion Hosting. In theory,
cron should be simple, but not there. There's a bit of trick you'll
need. The official documentation on cron jobs for InMotion Hosting is
at https://support.inmotionhosting.com/cgi-bin/kb.cgi?do=read&amp;id=49.
But, it's flat wrong. It's missing one very important piece of
information...

```bash
curl -A 'Cron Curl V1' http://www.example.com/cron.php
```

The difference from their documentation? Without declaring a user
agent using curl `-A`, websites may not be able to correctly respond
to the request. This is evident in the Drupal logs, as you will see a
repeated entry for "page not found" and message "406.shtml".


InMotion hosting cron ping

Had an interesting request today from multiple departments of the
company. Here's short of them that's relevant.

- Marketing needed content that was optional heights, fixed width.
  This banner should link somewhere. It should come from a content
  type that can be easily maintained.
- SEO needed that same banner to have no seo value, which meant
  going through Iframe or Ajax.

Due to the complexity of the design, and need for ease of
maintenance, a view of a content type was perfect, but violated the
seo need. An iframe was mostly useless, due to the varied height of
the content. So, we prepared the follow code to ajax the views onto
the page after initial load. Note that this is only iteration one
for this technique. I could see it causing potential issues when
dealing with ajax views inserted into the page the standard way,
though I tried to accommodate that by changing the `$view->dom_id`.

## template.php

This works well if you expect to needs these views on every page.

```php
/**
 *  Ajax Load Views
 *  See scripts/emfluence.js for the actual firing js
 **/
$views_ajax_settings = array(
  'views' => array(
    'ajax_path' => url('views/ajax'),
    'ajaxViews' => array()
  ),
);

$view = views_get_view('Home_Page_Banner');
$view->set_display('default');
$view->set_use_ajax(TRUE);
$views_ajax_settings['views']['ajaxviews'][] = array(
'view_name' => $view->name,
  'view_display_id' => $view->current_display,
'view_args' => check_plain(implode('/', $view->args)),
  'view_path' => check_plain($\_GET['q']),
'view_base_path' => $view->get_path(),
  'view_dom_id' => $view->name,
'pager_element' => \$view->pager['element'],
);

$view = views_get_view('News');
$view->set_display('default');
$view->set_use_ajax(TRUE);
$views_ajax_settings['views']['ajaxviews'][] = array(
'view_name' => $view->name,
  'view_display_id' => $view->current_display,
'view_args' => check_plain(implode('/', $view->args)),
  'view_path' => check_plain($\_GET['q']),
'view_base_path' => $view->get_path(),
  'view_dom_id' => $view->name,
'pager_element' => \$view->pager['element'],
);

drupal_add_js(\$views_ajax_settings, 'setting');
views_add_js('ajax_view');
```

## Page.tpl.php

This method works on just the desired page, lessening the overhead
of calling views you don't need through the whole site.

Note that you must still include `views_add_js('ajax_view');` in
your template.php file!

```php
/**
 *  Ajax Load Views
 *  See scripts/emfluence.js for the actual firing js
 **/
$views_ajax_settings = array(
  'views' => array(
    'ajax_path' => url('views/ajax'),
    'ajaxViews' => array()
  ),
);

$view = views_get_view('Home_Page_Banner');
$view->set_display('default');
$view->set_use_ajax(TRUE);
$views_ajax_settings['views']['ajaxviews'][] = array(
'view_name' => $view->name,
  'view_display_id' => $view->current_display,
'view_args' => check_plain(implode('/', $view->args)),
  'view_path' => check_plain($\_GET['q']),
'view_base_path' => $view->get_path(),
  'view_dom_id' => $view->name,
'pager_element' => \$view->pager['element'],
);

$view = views_get_view('News');
$view->set_display('default');
$view->set_use_ajax(TRUE);
$views_ajax_settings['views']['ajaxviews'][] = array(
'view_name' => $view->name,
  'view_display_id' => $view->current_display,
'view_args' => check_plain(implode('/', $view->args)),
  'view_path' => check_plain($\_GET['q']),
'view_base_path' => $view->get_path(),
  'view_dom_id' => $view->name,
'pager_element' => \$view->pager['element'],
);

$view = views_get_view('Home_Page_Spotlight');
$view->set_display('default');
$view->set_use_ajax(TRUE);
$views_ajax_settings['views']['ajaxviews'][] = array(
'view_name' => $view->name,
  'view_display_id' => $view->current_display,
'view_args' => check_plain(implode('/', $view->args)),
  'view_path' => check_plain($\_GET['q']),
'view_base_path' => $view->get_path(),
  'view_dom_id' => $view->name,
'pager_element' => \$view->pager['element'],
);
```

```html
<html>
  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  <html
    xmlns="http://www.w3.org/1999/xhtml"
    xml:lang="<?php print $language->language ?>"
    lang="<?php print $language->language ?>"
    dir="<?php print $language->dir ?>"
  >
    <head>
      <title><?php print $head_title ?></title>
      <?php print $head ?>
      <?php print $styles ?>
      <?php print $scripts ?>
      <script type="text/javascript">
        jQuery.extend(Drupal.settings, <?php print drupal_to_js($views_ajax_settings); ?>);
      </script>
      <script
        type="text/javascript"
        src="<?php print(base_path() . path_to_theme()); ?>/scripts/scripts.js"
      ></script>
      
    </head>
    <body></body>
  </html>
</html>
```

## Javascript File

```js
/**
 *  Ajax Load Views
 *  See template.php for the data in Drupal.settings.views.ajaxViews
 **/
$(Drupal.settings.views.ajaxViews).each(function () {
  var data = {};
  // Add view settings to the data.
  for (var key in this) {
    data[key] = this[key];
    $.ajax({
      url: Drupal.settings.views.ajax_path,
      type: "GET",
      data: data,
      success: function (response) {
        var viewDiv = ".view-dom-id-" + data.view_dom_id;
        //$('body.front #content .banner').html(response.display);
        // Call all callbacks.
        if (response.__callbacks) {
          $.each(response.__callbacks, function (i, callback) {
            eval(callback)(viewDiv, response);
          });
        }
      },
      error: function (xhr) {},
      dataType: "json",
    });
  }
});
```

## The html

```html
<div class="view-dom-id-$view->name preloader"></div>
```

Ajax Load A Drupal View


The main details of this error can be read in more detail in the
original post I found this fix on. I'll summarize here as well.
While Drupal has access to execute Image Magick's convert function in
an area outside php's open_basedir security restriction, it cannot
open it. The imageapi_imagemagick.module's functionality check doesn't
test first for execution, it tries to open the file. Leading to a
working Image Magick install to appear faulty. The fix was listed
[here](http://drupal.org/node/608270). As of yet, there's been not
application of this to the module itself, so remember to refix every
time you update. The following code should be placed at the top of
the `_imageapi_imagemagick_check_path` function.

A copy of the code, in case someone needs it.

```php
$errors = array(); // This line is already at the top of the function. Including for reference
// Try it out and return without errors on success
  $handle = popen($path . " -version", 'r');
  $im_version = fread($handle, 2096);
  pclose($handle);
  if (strpos($im_version, 'ImageMagick') !== FALSE) {
    return $errors;
  }
```

_Updated 2010.11.12: And in other news today:_

It seems requested image file in the image module
`image.imagemagick.inc` also suffers this bug. Here's the updated
function for that, and a link to the image issue with
[patch](http://drupal.org/node/970326.

```php
function _image_imagemagick_check_path($path, $attach_error_to = FALSE) {
  // Try it out and return without errors on success
  $handle = popen($path . " -version", 'r');
  $im_version = fread($handle, 2096);
  pclose($handle);
  if (strpos($im_version, 'ImageMagick') !== FALSE) {
    return TRUE;
  }
  if (file_exists($path)) {
    return TRUE;
  }
  if ($attach_error_to) {
    if ($open_basedir = ini_get('open_basedir')) {
      form_set_error($attach_error_to, t("No file %file could be found. PHP's <a href='@open_basedir'>open_basedir</a> security restriction is set to %open_basedir, which may be interfering with the attempts to locate ImageMagick.", array('%file' => $path, '%open_basedir' => $open_basedir, '@open_basedir' => 'http://php.net/features.safe-mode#ini.open-basedir')));
    }
    else {
      form_set_error($attach_error_to, t('The specified ImageMagic path %file does not exist.', array('%file' => $path)));
    }
  }
  return FALSE;
}
And the contributed module in the image module for image_im_advanced requires a patch as well. It tries to open the file too. This updated function forces it to rely on the image module's detection function instead.

function image_im_advanced_requirements($phase) {
  $requirements = array();
  if ($phase == 'runtime') {
    // If the image.imagemagick.inc file is not in the includes directory,
    // indicate an error.
    $toolkits = image_get_available_toolkits();
    $requirements['imagemagick'] = array('title' => t('ImageMagick advanced options'));
    if (!isset($toolkits['imagemagick'])) {
      $requirements['imagemagick']['value'] = t('ImageMagick image toolkit is not properly installed');
      $requirements['imagemagick']['description'] = t('The %toolkit_inc file must be copied to %inc_dir in order for the ImageMagick image toolkit to function.', array('%toolkit_inc' => drupal_get_path('module', 'image') . '/image.imagemagick.inc', '%inc_dir' => 'includes'));
      $requirements['imagemagick']['severity'] = REQUIREMENT_ERROR;
      return $requirements;
    }
    // If the image_im_advanced module is installed but the ImageMagick image
    // toolkit is not selected, indicate an error.
    if (image_get_toolkit() != 'imagemagick') {
      $requirements['imagemagick']['value'] = t('ImageMagic image toolkit is not selected.');
      $requirements['imagemagick']['description'] = t('The ImageMagic image toolkit is not selected. The advanced options only apply to the ImageMagick toolkit. Select the image toolkit <a href="@toolkit">here</a>.', array('@toolkit' => url('admin/settings/image-toolkit')));
      $requirements['imagemagick']['severity'] = REQUIREMENT_WARNING;
      return $requirements;
    }
    // If the imagemagick convert utility does not exist, indicate an error.
    $convert_path = variable_get('image_imagemagick_convert', '/usr/bin/convert');
    if (!_image_imagemagick_check_path($convert_path)) {
      $requirements['imagemagick']['value'] = t('ImageMagick convert utility not found.');
      $requirements['imagemagick']['description'] = t('The ImageMagick image convert utility (@convert) does not exist. If you have ImageMagick installed, click <a href="@toolkit">here</a> to provide the path to the convert utility.', array('@convert' => $convert_path, '@toolkit' => url('admin/settings/image-toolkit')));
      $requirements['imagemagick']['severity'] = REQUIREMENT_ERROR;
      return $requirements;
    }
    $requirements['imagemagick']['value'] = t('ImageMagick image toolkit is selected.');
    $requirements['imagemagick']['severity'] = REQUIREMENT_OK;
  }
  return $requirements;
}
```


Image Magick detection bug in Drupal 6


Another one mostly for myself, part of a larger picture I'm putting
together. This small little javascript object will make it so any
table you add a class of "auto-row" will have fun new behaviors.
When any select, input, or textarea element in the last row changes,
the row is duplicated and added right below. All digits in patterns
"like" [##]" are automatically incremented for you before they are
attached to the DOM. The row you were editing looses it's special
behavior, and the newly inserted row is prepared to do the same.
Inserted rows have the selects changed to the first option, text
fields emptied, and checkboxes unchecked. Hidden fields are
_not_ altered.

_Code updated 11/3/2010._

This jquery script uses the `.live()` function, and requires at least
jQuery 1.3 or higher.

```js
autoRowTable : {
    init: function(){
      // This could be a table, thead, tbody, or tfoot
      $('table.auto-row').each(function(){
        $(this).find('tr:last input, tr:last select, tr:last textarea').live('change', function(){
          trialManagers.autoRowTable.elementChanged(this);
        });
      });
    }
    ,elementChanged: function(element){
      var elementRow = $(element).parents('tr');
      elementRow.children('input, select, textarea').unbind('change');
      var clone = elementRow.clone();
      // Increment anything in the html that follows a pattern like: _[##]" or _##"
      var cloneHTML = clone.html();
      var regex = /(\[)(\d+)(\])/img;
      var matches = [];
      var match;
      match = regex.exec(cloneHTML);
      while( match instanceof Array  ){
        if(!matches[match[2]]){
          matches[match[2]] = match;
        }
        match = regex.exec(cloneHTML);
      }
      matches.sort(function(a,b){return a - b}).reverse(); // Work highest down or you increment all the way up
      console.log(matches);
      $.each(matches, function(index, match){
        if( match instanceof Array ){
          re = new RegExp('\\[' + match[2].replace('/', '') + '\\]', 'img');
          cloneHTML = cloneHTML.replace(re, '[' + ((match[2]-0)+1) + ']');
        }
      });
      clone.html(cloneHTML);
      clone.toggleClass('even').toggleClass('odd');
      clone.find('input:text, textarea').val('');
      clone.find('input:checkbox').removeAttr("checked");
      clone.find('select option:first').attr('selected', 'selected');
      /*
      clone.find('input, select, textarea').each(function(){
        //Further customization if you need.
      });
      */
      elementRow.after(clone);
    }
 }
```


jQuery Table Auto Row


I was setting up a new site today for a client. I got caught up on
the WYSIWYG install though. I selected loads of buttons from the
profile, include "Advanced Link." I swapped over to begin testing
out a new feature I was going to put in, and noticed the editor
failed to load entirely.

I went through the standard Drupal checklist for WYSIWYG issues:

- Check the WYSIWYG module is installed.
- Check the format you want the editor for has a WYSIWYG profile
  associated.
- Triple Check the files Drupal links to really are there.
- Check the template to ensure it includes `<?php print $scripts; ?>`
  and `<?php print $closure; ?>`

After blowing through the standard items, I checked in different
browsers. And up it came. So, a Firefox bug. I started looking
around for known FF WYSIWYG bugs. Most of the complaints I found
were akin to "Your custom Firefox profile takes too much memory,
or is corrupted." The answer suggested? "Delete your profile."
HA! Not without no other alternative. So, I began playing the hunt
game disabling addons, which led me to Ad Block. And as I mouse
over the little offending bastard, I see "One item blocked."
Pressing Ctrl-Shift-V will open it if you like keybinds.

```text
Blocked Item: `http://local.dancingmanstudio.com/sites/all/libraries/tinymce/jscripts/tiny_mce/plugins/advlink/editor_plugin.js?i`
Filter: `/[^a-zd=+%@](?!d{5,})(w*d+xd)?d*(show)?(w{3,}%20|alligator|avs|barter|blog|box|central|context|crystal|d?html|exchange|external|forum|front|fuse|gen|get|house|hover|http|i?frame|inline|instant|live|main|mspace|net|partner|php|popin|primary|provider|realtext|redirW.*W|rotated?|secure|side|smart|sponsor|story|text|view|web)?_?ads?(v?((ition|meta|tology3|versal).com|(marketplace|rom).net|action.se|bot|brite|broker|bureau|butler|cent(er|ric)|click|client|content|coun(cil|t(er)?)|creative|cycle|data(id)?|engage|entry|er(tisw+|t(pro)?|ve?r?)|farm|feelgood|force|form|frame(generator)?|gardener|gen|gif|groupid|head|ima?ge?|index|info|js|juggler|layer|legend|link|log|man(ager)?|max|mentor(serve)?|mosaic|net|new||optimi[sz]er|parser|peeps|pic|player|po(ol|pup|sition)|proof|q.nextag|re(dire?c?t?|mote|volver)|rotator|sale|script|search|sdk|sfac|size|so(lution|nar|urce)|stream|space|srv|stat.*.asp|sys|(tag)?track|trix|type|view|vt|x.nu|zone))?s?d*(status)?d*(?!.org)[W_](?!w+.(ac.|edu)|astra|aware|adurl=|block|login|nl/|sears/|.*(&sbc|.(wmv|rm)))/`
Filter Source: `Filterset.G`
```

So your options to fix it are:

- Allow the exception to the filter (You blocked it, you should fix it.)
- Alert the media, and hope Filterset.G doesn't tell you to take the above option.
- Don't use Ad Block
- Don't use Advanced Link

... Shucks


Drupal WYSIWYG Ad Block Breaks WYSIWYG When Advanced Link Is Selected


I thought I'd share a sort of plug and play solution to text area
length controls that I've been abusing. All credit here goes to
Roy Jin, the original developer. I just thought I'd share what a
good tool it was, and the `$(document).ready()` code you need to be
up and running. You can pick up the
[jQuery Textarea Counter](http://roy-jin.appspot.com/jsp/textareaCounter.jsp)
on his site, as well as look up docs for tweaking things.

## `$(document).ready()`

```js
$("textarea[maxlength]").each(function (index) {
  try {
    var maxLength = $(this).attr("maxlength");
    if (maxLength === undefined) {
      return;
    }
    $(this).textareaCount({
      maxCharacterSize: maxLength,
      originalStyle: "originalDisplayInfo",
      warningStyle: "warningDisplayInfo",
      warningNumber: 40,
      displayFormat: "#input Characters | #left Characters Left | #words Words",
    });
  } catch (exception) {}
});
```

## Styling

It's actually handy include a css tricks. Naturally, you'll want to
adjust the alignment as you desire. I just think it looks nice to
the right. The min and max width's are a trick to help you keep the
div it creates the same width as the textarea it's tied to. When the
plugin fires, it determines what width it should be, and puts that
inline. But this makes it keep the accurate width when the browser
changes size instead.

```css
div.charleft {
  text-align: right;
  max-width: 100%;
  min-width: 100%;
}
```


Limiting Textarea Length


I've got a mass edit form for orders on one of the sites I work on.
Each order needed link or button to track the shipments of that
order using UPS. Well, today we added FedEx tracking as well. UPS was
easy, they do everything via url, so a simple link worked fine.
FedEx, not so much, you have to post everything over to them.
Obviously that creates a sort of form within a form, and that's not
valid html. Javascript becomes required, here's your setup:

```html
<form>
  <input name="asdf" value="1" />
  <p>Tracking button goes below this paragraph</p>
  <button
    type="button"
    onclick="post_to_url(
        'http://fedex.com/Tracking'
        ,{
          'ascend_header':'1'
          ,'clienttype':'null'
          ,'mi':'n'
          ,'track':'y'
          ,'cntry_code':'null'
          ,'language':'null'
          ,'tracknumbers':'#FedExTrackingNumber#'
          ,'action':'1'
        }
        ,'_blank'
       )"
  >
    Track
  </button>
</form>
```

And the generic javascript function you need:

```js
function post_to_url(path, params, target, method) {
  target = target || ""; // Set method to post by default, if not specified.
  method = method || "post"; // Set method to post by default, if not specified.

  // The rest of this code assumes you are not using a library.
  // It can be made less wordy if you use one.
  var form = document.createElement("form");
  form.setAttribute("method", method);
  form.setAttribute("action", path);
  form.setAttribute("target", target);

  for (var key in params) {
    var hiddenField = document.createElement("input");
    hiddenField.setAttribute("type", "hidden");
    hiddenField.setAttribute("name", key);
    hiddenField.setAttribute("value", params[key]);

    form.appendChild(hiddenField);
  }

  document.body.appendChild(form); // Needed for only some browsers
  form.submit();
}
```


Post from Form inside Form


I needed to do a case insensitive, multiline, global regex (/img) over
some html. The matches kept coming back wrong using `$.each()` and
Mozilla's directions. The while loop on the Mozilla docs site didn't
work for me, every time it returned match as "true." That's no help,
of course. So, a do while loop instead, and all is well.

```js
var regex = /./gim;
var matches = [];
var match;
match = regex.exec(text);
while (match instanceof Array) {
  matches.push(match);
  match = regex.exec(text);
}
```


Javascript Global Regex Match


I've been working on upgrading a client's form autofill options.
Right now, they have server side ip sniffing, and forms I'm unable
to cache because of the defaulted information. So, blank forms with
client side geolocation through the the javascript navigator object
is required. I've done this kind of thing before, but it's always
been on the page, assuming everything would work. This time around,
I'm doing things a little differently, anticipating using this over
and over for their many forms. So this time, I'm playing by a few
new rules...

- Ask the user their location as rarely as possible, once being ideal.
- Do not assume dependencies will be met. Load things like google map
  apis on the fly, but only when required.
- Function as a service. Any number of things might need the
  geolocation information, as soon as its available, handle them all.

To that end, a short explanation of what's completed, then the
object for your copying pleasure:

The `geolocation.js` file will expose three methods you should
expect to use: `geolocation.getCoordinates()`,
`geolocation.getAddress()`, `geolocation.reverseGeocode()`.
More often than not, you'll use coordinates and address, that last
one was in there because I needed it for the first two. Usage for
all of these involves registering _your function_ to callback to
'whenever the information becomes available.' This whole thing
depends on multiple levels of delay and callback. An initial
pause is to be expected as the user is asked for their coordinates.
Another delay is required if an address is required, while google
maps api is loaded, then again as the address is reverse geocoded.
If returned, the coordinates and address information are stored in
the browser's localStorage and returned immediately to prevent
dependency loads in future uses. Please note that I have not
concerned myself with backwards compatibility yet. If you care,
you may need to add support in case JSON objects are missing in the
browser, and a backup localStorage method just as a cookie. I
_do not encourage the storage of geolocation data in cookies_.
Your users will not thank you.

```js
geolocation = {
  error: null,
  location: {
    coordinates: {
      timestamp: null,
      latitude: null,
      longitude: null,
    },
    address: {
      timestamp: null,
      street_number: null,
      route: null,
      locality: null,
      administrative_area_level_3: null,
      administrative_area_level_2: null,
      administrative_area_level_1: null,
      country: null,
      postal_code: null,
    },
  },
  coordinatesQueue: {
    items: [],
    add: function (callbacks) {
      if (
        callbacks != null &&
        !geolocation.coordinatesQueue.contains(callbacks)
      ) {
        geolocation.coordinatesQueue.items.push(callbacks);
      }
    },
    get: function () {
      return geolocation.coordinatesQueue.items;
    },
    contains: function (callbacks) {
      var i = geolocation.coordinatesQueue.items.length;
      while (i--) {
        if (geolocation.coordinatesQueue.items[i] === callbacks) {
          return true;
        }
      }
      return false;
    },
  },
  getCoordinates: function (success, error) {
    // Return from local browser cache if set
    try {
      var coordinates = sessionStorage.getItem("geolocation.coordinates");
      if (coordinates != null) {
        geolocation.location.coordinates = JSON.parse(coordinates);
        success(geolocation.location.coordinates);
        return null;
      }
    } catch (err) {}

    // If we've hit an error, return it
    if (geolocation.error != null) {
      if (typeof error == "function") {
        error(geolocation.error);
      }
      return false;
    }

    // Return from window object if already defined
    if (geolocation.location.coordinates.timestamp != null) {
      success(geolocation.location.coordinates);
      return null;
    }

    // Add this as a package to the queue to notify when available
    var callbacks = {
      success: success,
      error: error,
    };
    geolocation.coordinatesQueue.add(callbacks);

    // Ask for it, store it, and send it along to the submitted callback
    navigator.geolocation.getCurrentPosition(
      geolocation.setCoordinates,
      geolocation.setError
    );
    return null;
  },
  setCoordinates: function (position) {
    // Prevent race firing this twice
    if (geolocation.location.coordinates.timestamp != null) {
      return;
    }
    geolocation.location.coordinates.latitude = position.coords.latitude;
    geolocation.location.coordinates.longitude = position.coords.longitude;
    geolocation.location.coordinates.timestamp = new Date().getTime();
    try {
      sessionStorage.setItem(
        "geolocation.coordinates",
        JSON.stringify(geolocation.location.coordinates)
      );
    } catch (err) {}
    var queue = geolocation.coordinatesQueue.get();
    if (queue.length > 0) {
      for (var i = 0; i < queue.length; i++) {
        queue[i].success(geolocation.location.coordinates);
      }
    }
    geolocation.coordinatesQueue = null;
  },
  addressQueue: {
    items: [],
    add: function (callbacks) {
      if (callbacks != null && !geolocation.addressQueue.contains(callbacks)) {
        geolocation.addressQueue.items.push(callbacks);
      }
    },
    get: function () {
      return geolocation.addressQueue.items;
    },
    contains: function (callbacks) {
      var i = geolocation.addressQueue.items.length;
      while (i--) {
        if (geolocation.addressQueue.items[i] === callbacks) {
          return true;
        }
      }
      return false;
    },
  },
  getAddress: function (success, error) {
    // Return from local browser cache if set
    try {
      var address = sessionStorage.getItem("geolocation.address");
      if (address != null) {
        geolocation.location.address = JSON.parse(address);
        success(geolocation.location.address);
        return null;
      }
    } catch (err) {}

    // If we've hit an error, return it
    if (geolocation.error != null) {
      if (typeof error == "function") {
        error(geolocation.error);
      }
      return false;
    }

    // Return from window object if already defined
    if (geolocation.location.address.timestamp != null) {
      success(geolocation.location.address);
      return null;
    }

    // Add this to the queue to notify when available
    // Add this as a package to the queue to notify when available
    var callbacks = {
      success: success,
      error: error,
    };
    geolocation.addressQueue.add(callbacks);

    // Start the event chain
    geolocation.getCoordinates(
      geolocation.getCoordinatesAddress,
      geolocation.setError
    );
  },
  getCoordinatesAddress: function (coordinates) {
    geolocation.reverseGeocode(geolocation.setAddress, coordinates);
  },
  setAddress: function (address) {
    // Prevent race firing this twice
    if (geolocation.location.address.timestamp != null) {
      return;
    }
    geolocation.location.address = address;
    try {
      sessionStorage.setItem("geolocation.address", JSON.stringify(address));
    } catch (err) {}
    var queue = geolocation.addressQueue.get();
    if (queue.length > 0) {
      for (var i = 0; i < queue.length; i++) {
        queue[i].success(address);
      }
    }
    geolocation.addressQueue = null;
  },
  reset: function () {
    sessionStorage.removeItem("geolocation.coordinates");
    sessionStorage.removeItem("geolocation.address");
  },
  setError: function (error) {
    // Clear queues, notify all registered error functions
    geolocation.error = error;
    // Coordinates
    var queue = geolocation.coordinatesQueue.get();
    if (queue.length > 0) {
      for (var i = 0; i < queue.length; i++) {
        if (typeof queue[i].error == "function") {
          queue[i].error(error);
        }
      }
    }
    geolocation.coordinatesQueue = null;

    // Addresses
    queue = geolocation.addressQueue.get();
    if (queue.length > 0) {
      for (var i = 0; i < queue.length; i++) {
        if (typeof queue[i].error == "function") {
          queue[i].error(error);
        }
      }
    }
    geolocation.addressQueue = null;
  },
  geocoder: null,
  geocodeQueue: {
    items: [],
    add: function (callback) {
      if (callback != null && !geolocation.geocodeQueue.contains(callback)) {
        geolocation.geocodeQueue.items.push(callback);
      }
    },
    get: function () {
      return geolocation.geocodeQueue.items;
    },
    contains: function (callback) {
      var i = geolocation.geocodeQueue.items.length;
      while (i--) {
        if (geolocation.geocodeQueue.items[i] === callback) {
          return true;
        }
      }
      return false;
    },
  },
  geocode: function (callback, address) {
    if (geolocation.geocoder == null) {
      geolocation.geocodeQueue.add({
        callback: callback,
        address: address,
      });
      geolocation._geocoderLoad();
      return null;
    }
    geolocation.geocoder.geocode({ address: address }, function (
      results,
      status
    ) {
      if (status == google.maps.GeocoderStatus.OK) {
        coordinates = {};
        coordinates.latitude = results[0].geometry.location.lat();
        coordinates.longitude = results[0].geometry.location.lng();
        coordinates.timestamp = new Date().getTime();
        callback(coordinates);
      } else {
        callback(null);
      }
    });
  },
  reverseGeocodeQueue: {
    items: [],
    add: function (callback) {
      if (
        callback != null &&
        !geolocation.reverseGeocodeQueue.contains(callback)
      ) {
        geolocation.reverseGeocodeQueue.items.push(callback);
      }
    },
    get: function () {
      return geolocation.reverseGeocodeQueue.items;
    },
    contains: function (callback) {
      var i = geolocation.reverseGeocodeQueue.items.length;
      while (i--) {
        if (geolocation.reverseGeocodeQueue.items[i] === callback) {
          return true;
        }
      }
      return false;
    },
  },
  reverseGeocode: function (callback, coordinates) {
    if (geolocation.geocoder == null) {
      geolocation.reverseGeocodeQueue.add({
        callback: callback,
        coordinates: coordinates,
      });
      geolocation._geocoderLoad();
      return null;
    }
    var latlng = new google.maps.LatLng(
      coordinates.latitude,
      coordinates.longitude
    );
    geolocation.geocoder.geocode({ latLng: latlng }, function (
      results,
      status
    ) {
      if (status == google.maps.GeocoderStatus.OK) {
        var address = {
          timestamp: null,
          street_number: null,
          route: null,
          locality: null,
          administrative_area_level_3: null,
          administrative_area_level_2: null,
          administrative_area_level_1: null,
          country: null,
          postal_code: null,
        };
        for (var i = 0; i < results[0].address_components.length; i++) {
          var _element = results[0].address_components[i];
          switch (_element.types[0]) {
            case "street_number":
              address.street_number = _element;
              break;
            case "route":
              address.route = _element;
              break;
            case "locality":
              address.locality = _element;
              break;
            case "administrative_area_level_3":
              address.administrative_area_level_3 = _element;
              break;
            case "administrative_area_level_2":
              address.administrative_area_level_2 = _element;
              break;
            case "administrative_area_level_1":
              address.administrative_area_level_1 = _element;
              break;
            case "country":
              address.country = _element;
              break;
            case "postal_code":
              address.postal_code = _element;
              break;
          }
        }
        address.timestamp = new Date().getTime();
        callback(address);
      } else {
        callback(null);
      }
    });
  },
  /* internal functions */
  _geocoderLoad: function () {
    var loaded = false;
    try {
      var geocoder = new google.maps.Geocoder();
      loaded = true;
    } catch (err) {}
    if (!loaded) {
      var gm = document.createElement("script");
      gm.type = "text/javascript";
      gm.async = true;
      gm.src =
        "https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&callback=geolocation._geocoderLoaded";
      var s = document.getElementsByTagName("script")[0];
      s.parentNode.insertBefore(gm, s);
    } else {
      geolocation._geocoderLoaded();
    }
    return null;
  },
  _geocoderLoaded: function () {
    geolocation.geocoder = new google.maps.Geocoder();
    var queue = geolocation.reverseGeocodeQueue.get();
    if (queue.length > 0) {
      for (var i = 0; i < queue.length; i++) {
        geolocation.reverseGeocode(queue[i].callback, queue[i].coordinates);
      }
    }
    geolocation.reverseGeocodeQueue = null;
    queue = geolocation.geocodeQueue.get();
    if (queue.length > 0) {
      for (var i = 0; i < queue.length; i++) {
        geolocation.geocode(queue[i].callback, queue[i].address);
      }
    }
    geolocation.geocodeQueue = null;
  },
};
```

## Usage example:

```js
var feedback = {
  init: function () {
    geolocation.getAddress(feedback.addressAvailable);
  },
  addressAvailable: function (address) {
    var $element;
    jQuery("#country").val(address.country.short_name.toLowerCase());
    $element = jQuery("#state");
    if ($element.val() == "") {
      $element.val(address.administrative_area_level_1.long_name);
    }
    $element = jQuery("#postal_code");
    if ($element.val() == "") {
      $element.val(address.postal_code.long_name);
    }
    $element = jQuery("#city");
    if ($element.val() == "") {
      $element.val(address.locality.long_name);
    }
    $element = jQuery("#street");
    if ($element.val() == "") {
      $element.val(
        address.street_number.long_name + " " + address.route.long_name
      );
    }
  },
};

jQuery(document).ready(feedback.init);
```


A generic, lazy loading, self dependency resolving geolocation javascript service object


Having to search over text can take a while, this might help speed
your work up a bit. The idea is that you pass any text you like
through it, and it picks up the "tags" reads the contained settings
for you, and handles the replacements. This assumes you're working
in PHP, but regexs and logic work everywhere of course. The syntax
for these "tags" looks like [tag] or
[tag|setting=value|setting2=value].

```php
define(CUSTOM_REGEX, '/\[tag( [^]\]+ )* \] /x');
$matches = array();
$default_settings = array(
    'setting' => 'value'
);
$match_count = preg_match_all(CUSTOM_REGEX, $content, $matches);
if($match_count > 0){
    // Read in settings and replace the tags
    $replacements = array();
    foreach($matches[0] as $key => $token){
      $replacements[$key] = array(
        'token' => $token
        ,'token_literal_regex' => string_literal_regex($token)
        ,'settings' => $default_settings
        ,'replacement' => ''
      );
      $settings_array = explode('|', $matches[1][$key]);
      foreach($settings_array as $setting){
        $setting_array = explode('=', $setting);
        if( !empty($setting_array[0]) && !empty($setting_array[1]) ){
          $replacements[$key]['settings'][$setting_array[0]] = $setting_array[1];
        }
      }

      $replacements[$key]['replacement'] = render_your_replacement($replacements[$key]);
      $content = preg_replace($replacements[$key]['token_literal_regex'], $replacements[$key]['replacement'], $content);
    }
    // Remove any remaining tags
    $content = preg_replace(
    CUSTOM_CODE_RELATED_CONTENT_REGEX, '', $content);
}

function string_literal_regex($string){
  //All regex special chars (according to arkani at iol dot pt below):
  //  ^ . $ | ( ) [ ] * + ? { } ,

  $patterns = array('/\//', '/\^/', '/\./', '/\$/', '/\|/','/$/', '/$/', '/\[/', '/\]/', '/\*/', '/\+/','/\?/', '/\{/', '/\}/', '/\,/');
  $replace = array('\/', '\^', '\.', '\$', '\|', '$', '$','\[', '\]', '\*', '\+', '\?', '\{', '\}', '\,');
  return '/' . preg_replace($patterns,$replace, $string) . '/';
}
```

Code originally developed for Drupal


Drupal Text Filter Skeleton


This one is more than a personal gripe, there's a valid server
related issue when you write shorthand PHP code. If you are one of
those people doing `<? ?>` stop now.

You get into an issue of "is this php or xml" since you share the
same opening tag. There's also a number servers out there that have
the shorthand coding option turned off. Stop with the shorthand,
all you do is create instability.

For those of you who happen to inherit a failure that uses these
kinds of markup, here's a couple of replacements you can run over
the code to clean it up for you. Run them in the order presented,
you have to clear out the shorthand prints before taking care of
the regular shorthand.

## Shorthand Print Correction (Simple string replace)

```php
<?= // Shorthand print
<?php print //Proper print
```

## Shorthand PHP Opener Correction (Regex)

```regexp
/\<\?[php]*/ // Shorthand print
<?php print
```

Make sure to include the trailing space, as it's 'legal' to do
something like `<?#comment`, but that break `<?php`.



Google Analytics doesn't track external page links by default, you
have to setup a small bit of javascript to delay the website exit,
and trigger a virtual page hit. The code for doing that involves a
small bit of jQuery, and the newer version of the Google tracking
code.

## Google Tracking Code

```js
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
var pageTracker = _gat._getTracker("UA-xxxxxx-x");
pageTracker._trackPageview();
```

## jQuery Link Control

Create the following function, and call it in your
`$(document).ready()`:

```js
function initExternalTrackingLinks(){
	// Creating custom :external selector
	$.expr[':'].external = function(obj){
	    return !obj.href.match(/^mailto:/)
	            && (obj.hostname != location.hostname);
	};

	// Add 'external' CSS class to all external links, and augment behavior
	$('a:external').addClass('external').click(function(e){
		try {
			e.preventDefault(); // Tested in IE8, Chrome, and FF 3.6 to override the onclick attribute.
			if(pageTracker){
				pageTracker._trackPageview('/outgoing/'+ $(this).attr('href'));
			}
			setTimeout('document.location = "' + $(this).attr('href') + '"', 100);
		}catch(err) {
			document.location = $(this).attr('href');
		}
	});
}
$(document).ready(){ initExternalTrackingLinks(); }
```


Drupal Content Type Module Skeleton


Assuming you're after putting a block in, pretty much anywhere you
want, you'll need control over which url token you may be using at
any point. Here's the code to read a url token, and embed a view
based off it.

```php
$view = 'View_Name';
$view_display = 'default'; // Or whatever display you desire
$desired_token = #;
$path = drupal_get_path_alias($_GET['q']); //get alias of URL
$path = explode('/', $path); //break path into an array
if ($path[$desired_token] != '') {
  print views_embed_view($view, $view_display, str_replace('-', ' ', $path[$desired_token]));
} else {
  print views_embed_view($view, $view_display, 'all');
}
```


Drupal - Embedding a view with arguments


I had the occasion to need to change the search indexing logic for a
specific content type. The site has thousands of nodes, many not of
the type that had its search index logic altered. Calling for a full
search reindex would be a very time-consuming process, when I only
need to do a fourth of them. The answer turns out to be extremely
simple.

With a bit of fancy sql, you can simply target any set of existing
nodes for update. All you have to do is set update a single table:
`search_dataset`. Normally whenever a node is saved, or a comment
is added, code is fired to 'touch' that table, setting the reindex
column equal to a unix timestamp for the time of the request. Then
search churns over anything with a timestamp greater than 0
reindexing.

So for our need? Easy sql:

```sql
UPDATE search_dataset
SET reindex = UNIX_TIMESTAMP(NOW())
WHERE `type` = 'node'
AND sid IN (
    SELECT nid
    FROM node node
    WHERE -- conditions
)
```

Remember your `drush search-index` command!


Force Drupal search reindex for specific nodes


One of our clients recently found an order that did not calculate tax
for a postal code they have a tax rule for. The problem turned out
to be that customer had entered their 9 digit postal code, instead of their 5 digit postal code, and magento did calculate tax for it. I'll include the fix for this specific problem, but also a couple debug steps too.

Start by making sure the client does have a tax rule for the postal
code that should trigger:

**Tax Debugging audit:**

Admin > Sales > Tax > Manage Tax Zones & Rates > Filter by Postal Code:
Found: US-KS-66223 - United States - KS - 66223 - 8.65

Admin > Sales > Tax > Manage Tax Rules > Ctrl+F to find "66223"
Found: Kansas Taxes - Retailer Customer - Taxable Goods, Shipping - ... US-KS-66223 ... - 1 - 1

If you find both of the above records when searching, you should be in the clear. Make a quick order, try the real postal code with just 5 digits and make sure. If you get tax, then it drops out when they change to 9 digit (standard behavior), you need to override one little core file.

Copy: `app/code/core/Mage/Tax/Model/Resources/Calculation.php`
Make: `app/code/local/Mage/Tax/Model/Resources/Calculation.php`

This duplication will cause Magento to use your version of the file,
even when the system is updated in the future. It's stock Magento
behavior if you're not use to it yet, you will be.

From there, you need one little customization. In the
`_getRates($request)` function of that same file, add the switch
statement below to allow you to customize the postal code used by
tax calculation. In my case, I'm stripping input down to the first
5 characters.

A quick solution:

```php
/**
 * Returns tax rates for request - either pereforms SELECT from DB, or returns already cached result
 * Notice that productClassId due to optimization can be array of ids
 *
 * @param Varien_Object $request
 * @return array
 */
protected function \_getRates($request)
{
    // Extract params that influence our SELECT statement and use them to create cache key
    $storeId = Mage::app()->getStore($request->getStore())->getId();
    $customerClassId = $request->getCustomerClassId();
    $countryId = $request->getCountryId();
    $regionId = $request->getRegionId();
    $postcode = $request->getPostcode();
    // Specialize formats for some countries
    switch( $countryId ){
        case 'US':
            // Force us zip codes down to first 5
            $postcode = substr( $postcode, 0, 5 );
            break;
        }
        // ...
  }
```

## Not the best way

While the below will work, it's flawed and can cause bugs. I suggest
in this creating a local version of a core file. It's better to
extend the class, and overwrite just one method. That's out of
the scope of this example though.


Magento US Postal Code Tax Handling


Lacking limit and offset, modern MSSQL can still perform acceptable
paging calls, it's just a bit more syntax to make it work. Here's a
basic syntax run down you can start with:

```sql
WITH paging AS (
    SELECT
        --return record count so we know how many pages are possible in resultset (redundant, I know)
        COUNT(*) OVER (PARTITION BY '') AS totalRecords

        --get row number, this allows us to do paging (The ORDER BY in this statement replaces the SELECT's ORDER BY)
        ,ROW_NUMBER() OVER (
                ORDER BY A, B
        ) AS ROW_NUM

        ,TABLE.*
    FROM
        dbo.Table_Name TABLE
)
SELECT
    *
FROM
    paging
WHERE
    (
    @PageSize IS NULL
    OR
    ROW_NUM
        BETWEEN (@PageIndex - 1) * @PageSize + 1
        AND @PageIndex * @PageSize
    )
ORDER BY
    ROW_NUM
```


Paging at the database in MSSQL


I wanted to change the related content output html rendered by CCK for
my site today. I did a bit of googling, and all of the suggestions p
ointed to making new field or node specific `tpl.php` files. While
that would work for this site, it's a terrible answer once you start
considering using multiple templates. Having dealt with maintenance
of what should be exactly the same file / function in different
themes being out of sync, I went looking for a more permanent answer.

While this might not be the Drupal specific answer, it's very
efficient for what I need. So, here's the quick on dirty on how to
override the theme function. Note that I suggest doing this only in
your own custom module, devoted only to that particular site.

Anything `theme_function` creates a theme registration. So, go into
the registry, and start altering!

```php
function hook_theme_registry_alter($themes) {
  $themes['nodereference_formatter_default']['function'] = 'fragmentedthought_nodereference_formatter_default';
}
```


Override Drupal theme_function from another module


I recently need to create a CCK version of a previously taxonomy driven
process on a node type. While at this I discovered the various things
that have to be changed to make it happen. A big piece of the puzzle
was the caching process from drupal. Once created, a node is cached
in the `cache_content` table in a serialized form.

If you do any changes, you need to clear the cache so the next time
it's loaded (for editing or viewing) drupal rebuilds the cache.


Database updates for Drupal CCK Fields


I ran across a fantastic resource for file icons today, thought I'd
share it for you all. Andreas Gohr has fine archive of
[16x16 .png images](http://www.splitbrain.org/projects/file_icons) to
use with your file styling. He's got some nice generic types, as
well a fairly extensive collection of specific formats.

To go along with his contribution, I've worked up the tedious bit of
icon styling. It's not revolutionary, but it'll save you the trouble
of having to type so many lines of simple css. Yes, I style for
`.link` instead of tags. To get the line-height to work well,
the container must be display:block, and maybe you don't want your
file links to be blocks. If you need, here's the basic syntax:

```html
<div class="file file-pdf">
  <div class="link"><a href="">Linky</a></div>
  <div class="description">Html</div>
</div>
```

```css
.file {
  display: block;
}

.file .link {
  background-image: url(/images/icons/16x16/file.png);
  background-position: 0 50%;
  background-repeat: no-repeat;
  display: block;
  line-height: 16px;
}

.file .link a {
  padding-left: 26px;
}

/* Specific File Icons */
.file-7z .link {
  background-image: url(/images/icons/16x16/7z.png);
}
.file-ai .link {
  background-image: url(/images/icons/16x16/ai.png);
}
.file-aiff .link {
  background-image: url(/images/icons/16x16/aiff.png);
}
.file-asc .link {
  background-image: url(/images/icons/16x16/asc.png);
}
.file-audio .link {
  background-image: url(/images/icons/16x16/audio.png);
}
.file-bin .link {
  background-image: url(/images/icons/16x16/bin.png);
}
.file-bz2 .link {
  background-image: url(/images/icons/16x16/bz2.png);
}
.file-c .link {
  background-image: url(/images/icons/16x16/c.png);
}
.file-cfc .link {
  background-image: url(/images/icons/16x16/cfc.png);
}
.file-cfm .link {
  background-image: url(/images/icons/16x16/cfm.png);
}
.file-chm .link {
  background-image: url(/images/icons/16x16/chm.png);
}
.file-class .link {
  background-image: url(/images/icons/16x16/class.png);
}
.file-conf .link {
  background-image: url(/images/icons/16x16/conf.png);
}
.file-cpp .link {
  background-image: url(/images/icons/16x16/cpp.png);
}
.file-cs .link {
  background-image: url(/images/icons/16x16/cs.png);
}
.file-css .link {
  background-image: url(/images/icons/16x16/css.png);
}
.file-csv .link {
  background-image: url(/images/icons/16x16/csv.png);
}
.file-deb .link {
  background-image: url(/images/icons/16x16/deb.png);
}
.file-divx .link {
  background-image: url(/images/icons/16x16/divx.png);
}
.file-doc .link {
  background-image: url(/images/icons/16x16/doc.png);
}
.file-dot .link {
  background-image: url(/images/icons/16x16/dot.png);
}
.file-eml .link {
  background-image: url(/images/icons/16x16/eml.png);
}
.file-gif .link {
  background-image: url(/images/icons/16x16/gif.png);
}
.file-gz .link {
  background-image: url(/images/icons/16x16/gz.png);
}
.file-hlp .link {
  background-image: url(/images/icons/16x16/hlp.png);
}
.file-htm .link {
  background-image: url(/images/icons/16x16/htm.png);
}
.file-html .link {
  background-image: url(/images/icons/16x16/html.png);
}
.file-image .link {
  background-image: url(/images/icons/16x16/image.png);
}
.file-iso .link {
  background-image: url(/images/icons/16x16/iso.png);
}
.file-jar .link {
  background-image: url(/images/icons/16x16/jar.png);
}
.file-java .link {
  background-image: url(/images/icons/16x16/java.png);
}
.file-jpeg .link {
  background-image: url(/images/icons/16x16/jpeg.png);
}
.file-jpg .link {
  background-image: url(/images/icons/16x16/jpg.png);
}
.file-js .link {
  background-image: url(/images/icons/16x16/js.png);
}
.file-lua .link {
  background-image: url(/images/icons/16x16/lua.png);
}
.file-m .link {
  background-image: url(/images/icons/16x16/m.png);
}
.file-mm .link {
  background-image: url(/images/icons/16x16/mm.png);
}
.file-mov .link {
  background-image: url(/images/icons/16x16/mov.png);
}
.file-mp3 .link {
  background-image: url(/images/icons/16x16/mp3.png);
}
.file-mpg .link {
  background-image: url(/images/icons/16x16/mpg.png);
}
.file-odc .link {
  background-image: url(/images/icons/16x16/odc.png);
}
.file-odf .link {
  background-image: url(/images/icons/16x16/odf.png);
}
.file-odg .link {
  background-image: url(/images/icons/16x16/odg.png);
}
.file-odi .link {
  background-image: url(/images/icons/16x16/odi.png);
}
.file-odp .link {
  background-image: url(/images/icons/16x16/odp.png);
}
.file-ods .link {
  background-image: url(/images/icons/16x16/ods.png);
}
.file-odt .link {
  background-image: url(/images/icons/16x16/odt.png);
}
.file-ogg .link {
  background-image: url(/images/icons/16x16/ogg.png);
}
.file-pdf .link {
  background-image: url(/images/icons/16x16/pdf.png);
}
.file-pgp .link {
  background-image: url(/images/icons/16x16/pgp.png);
}
.file-php .link {
  background-image: url(/images/icons/16x16/php.png);
}
.file-pdf .link {
  background-image: url(/images/icons/16x16/pdf.png);
}
.file-pl .link {
  background-image: url(/images/icons/16x16/pl.png);
}
.file-png .link {
  background-image: url(/images/icons/16x16/png.png);
}
.file-ppt .link {
  background-image: url(/images/icons/16x16/ppt.png);
}
.file-ps .link {
  background-image: url(/images/icons/16x16/ps.png);
}
.file-py .link {
  background-image: url(/images/icons/16x16/py.png);
}
.file-ram .link {
  background-image: url(/images/icons/16x16/ram.png);
}
.file-rar .link {
  background-image: url(/images/icons/16x16/rar.png);
}
.file-rb .link {
  background-image: url(/images/icons/16x16/rb.png);
}
.file-rm .link {
  background-image: url(/images/icons/16x16/rm.png);
}
.file-rpm .link {
  background-image: url(/images/icons/16x16/rpm.png);
}
.file-rtf .link {
  background-image: url(/images/icons/16x16/rtf.png);
}
.file-sig .link {
  background-image: url(/images/icons/16x16/sig.png);
}
.file-sql .link {
  background-image: url(/images/icons/16x16/sql.png);
}
.file-swf .link {
  background-image: url(/images/icons/16x16/swf.png);
}
.file-scx .link {
  background-image: url(/images/icons/16x16/scx.png);
}
.file-sxd .link {
  background-image: url(/images/icons/16x16/sxd.png);
}
.file-sxi .link {
  background-image: url(/images/icons/16x16/sxi.png);
}
.file-swx .link {
  background-image: url(/images/icons/16x16/sxw.png);
}
.file-tar .link {
  background-image: url(/images/icons/16x16/tar.png);
}
.file-tex .link {
  background-image: url(/images/icons/16x16/tex.png);
}
.file-tgz .link {
  background-image: url(/images/icons/16x16/tgz.png);
}
.file-txt .link {
  background-image: url(/images/icons/16x16/txt.png);
}
.file-vcf .link {
  background-image: url(/images/icons/16x16/vcf.png);
}
.file-video .link {
  background-image: url(/images/icons/16x16/video.png);
}
.file-vsd .link {
  background-image: url(/images/icons/16x16/vsd.png);
}
.file-wav .link {
  background-image: url(/images/icons/16x16/wav.png);
}
.file-wma .link {
  background-image: url(/images/icons/16x16/wma.png);
}
.file-wmv .link {
  background-image: url(/images/icons/16x16/wmv.png);
}
.file-xls .link {
  background-image: url(/images/icons/16x16/xls.png);
}
.file-xml .link {
  background-image: url(/images/icons/16x16/xml.png);
}
.file-xpi .link {
  background-image: url(/images/icons/16x16/xpi.png);
}
.file-xvid .link {
  background-image: url(/images/icons/16x16/xvid.png);
}
.file-zip .link {
  background-image: url(/images/icons/16x16/zip.png);
}
```


Splitbrain File Styling

So, the documentation is a bit lacking on coldfusion 8's docs about
prefilling in
[LiveCycle](http://livedocs.adobe.com/coldfusion/8/htmldocs/help.html?content=formsPDF_04.html)
forms. They suggest that you should "read in the structure of the
document, then dump it back out to identify what fields are available."
However, it doesn't quite work like that.

Adobe LiveCycle can put multiple forms in a pdf, sure. And that's
well documented. What's missing is that each form will have multiple
pages under it.

If you try to `cfpdfformparam` without knowing the correct page,
you're bugged. And you won't even get a reason why you're buggered.
Do not trust dumping the output of the pdf read. It can be useful
to loop over, detecting if you have an acrobat form (no structures)
or a LiveCycle form (structures), but it doesn't begin to cover what
you need. You will need to open the pdf in LiveCycle, and inspect
the form hierarchy window.

In case you need it...

```coldfusion

<cftry>
        <cfpdfform source="#source#" result="pdfForm" action="read"/>
  <cfcatch>
    <p>The pdf is not interactive. No form fields could be found.</p>
    <cfabort>
  </cfcatch>
</cftry>
<cfpdfform action="populate" source="#source#" destination="" overwrite="true" overwriteData="true">
        
        <cfif structCount(pdfForm) gt 0>
                <cfpdfsubform name="#formName#">
                        <cfpdfsubform name="#pageName#">
                                <cfpdfformparam name="field" value="#value#">
                                ...
                        </cfpdfsubform>
                </cfpdfsubform>
        <cfelse>
        <cfpdfformparam name="field" value="#value#">
        </cfif>
</cfpdfform>
<cfpdf action="write" source="" destination="" flatten="yes" overwrite="true">
```

_An interesting side effect of LiveCycle vs Acrobat created Pdfs:_

You technically can output to a LiveCycle without defining the form and page. However, you're limited to only one field. The name doesn't seem to matter, just whatever is the last field is the one that is output.

Prefilling Adobe LiveCycle PDF Forms with ColdFusion


Depending on how advanced your client wants the blocks on their site
themed, the standard Drupal `block.tpl.php` won't cut it. That's the
end result for most of us of course. In my case, I have somewhat
given up on the base tpl ever working. Therefore I worked up a
slightly more advanced version. It's designed to allow for highly
styled borders: 4 corners, and expandable sides.

## `block.tpl.php`

```php
<div id="block-<?php print $block->module .'-'. $block->delta; ?>" class="clear-block block block-<?php print $block->module ?>">
    <?php if (!empty($block->subject)): ?>
        <h2><?php print $block->subject ?></h2>
      <?php endif;?>
  <div class="outside-wrapper">
    <div class="top-wrapper">
      <div class="left"></div>
      <div class="right"></div>
      <div class="middle"></div>
    </div>
    <div class="inside-wrapper">
      <div class="content"><?php print $block->content ?></div>
    </div>
    <div class="bottom-wrapper">
      <div class="left"></div>
      <div class="right"></div>
      <div class="middle"></div>
    </div>
    </div>
</div>
```

## `block.css`

```css
.block-views .outside-wrapper {
  padding: 2px;
}

.block-views .top-wrapper,
.block-views .bottom-wrapper {
}

.block-views .top-wrapper {
  margin-bottom: -5px;
}

.block-views .bottom-wrapper {
  margin-top: -5px;
}

.block-views .top-wrapper .left,
.block-views .top-wrapper .right,
.block-views .bottom-wrapper .left,
.block-views .bottom-wrapper .right {
  background-repeat: no-repeat;
  width: 9px;
}

.block-views .top-wrapper .left,
.block-views .bottom-wrapper .left {
  float: left;
}
.block-views .top-wrapper .right,
.block-views .bottom-wrapper .right {
  float: right;
}

.block-views .top-wrapper .middle,
.block-views .bottom-wrapper .middle {
  background-repeat: repeat-x;
}

.block-views .top-wrapper .left,
.block-views .top-wrapper .middle,
.block-views .top-wrapper .right,
.block-views .bottom-wrapper .left,
.block-views .bottom-wrapper .middle,
.block-views .bottom-wrapper .right {
  display: block;
  height: 10px;
}

.block-views .top-wrapper .left,
.block-views .top-wrapper .middle,
.block-views .top-wrapper .right {
  background-position: 0 0;
}

.block-views .bottom-wrapper .left,
.block-views .bottom-wrapper .middle,
.block-views .bottom-wrapper .right {
  background-position: 0 100%;
}

.block-views .top-wrapper .left {
  background-image: url(images/backgrounds/white-dot-top-left.gif);
}
.block-views .top-wrapper .middle,
.block-views .bottom-wrapper .middle {
  background-image: url(images/backgrounds/white-dot-middle.gif);
}
.block-views .top-wrapper .right {
  background-image: url(images/backgrounds/white-dot-top-right.gif);
}
.block-views .bottom-wrapper .left {
  background-image: url(images/backgrounds/white-dot-bottom-left.gif);
}
.block-views .bottom-wrapper .right {
  background-image: url(images/backgrounds/white-dot-bottom-right.gif);
}

.block-views .inside-wrapper {
  padding: 0px 5px;
}

.block-views .content {
  margin: 0;
}
```


Drupal - block.tpl.php Advanced


Let's say you have a form that handles products.

If someone shows up to the form without an `?id=##`, you're sure they
must mean to create one. If there is an id, they mean to update. In
the end though, all the user cares about is the "Save" button.
"Create" and "Update" are your job to worry about. So you've created
a wonderful cfc that does the work on the form, sets a message about
the result in the session, and want to display it.

You can't simply reload the page after creating the product, your
page needs the newly created product's id in the url, and that breaks
the back button. So, you try `cflocation`, and figure on outputting
the message there. No dice. The message you put in the session is
gone when you get there. That is because when you do `cflocation`,
the cookie that carries session information to the client is never
sent along to them. Cookies have to be sent back to the user, and
`cflocation` is a server side redirect. So instead, you use this
trick:

```coldfusion
<cfset variables.url = cgi.script_filename & '?id=' & product.id>
<cfheader statuscode="301" statustext="Moved permanently">
<cfheader name="Location" value="#variables.url#">
<cfabort>
```

Note that you _must_ include the `cfabort` in your code.
While the user is correctly redirected using the `cfheader`, the
page it sits on finishes processing!


Coldfusion Redirect & Location with Session data


I was recently working with [jQuery UI's](http://jqueryui.com/)
[tabs](http://jqueryui.com/demos/tabs/) on a site. It does a
fantastic job of making web standard reasonable markup into tabs.
The whole thing is a simple enough overlay that any end user could
make the needed tab structure themselves (with just a bit of copy
paste). But, it turns out, jQuery UI Tabs do slightly less than I
thought they did. It turns out the standard tabs call limits its
behavior changes to only the div called in question. I suppose that
makes perfect sense really, but it doesn't to end users. They see a
link in the tabs list to `#tab`, and think they should be able to
duplicate the effect within their content, for massive cross tab
linking potential. And you know, that _does_ make sense too.

Why shouldn't a link (anchor) to a shortcut (hash) that is in fact,
a tab on the page, open that tab? It's not like you're going to run
across another div with that same id they are meaning to shortcut to.
And so, I give you this:

```js
// This is the standard jQuery UI Tabs initial call
$(".tabs").tabs();

/*Custom Fragment to check all the anchors on the page, and change the behavior of any that link to a tab, to open it.
 *Note that this skips the actual tabs on a page, so their behavior is not affected */
$("a[href]").each(function () {
  if (this.hash) {
    if (
      $(this.hash + ".ui-tabs-panel").length > 0 &&
      $(this).parents("div.ui-tabs").length == 0
    ) {
      link = this.href.replace(this.hash, "");
      page = window.location.href.replace(window.location.hash, "");
      if (link == page || link == "") {
        this.onclick = function () {
          $(".tabs").tabs("select", this.hash);
          return false;
        };
      }
    }
  }
});
```

This code will open a tab from a link in any of the following formats:

- `href="#tab"`
- `href="/url/to/page#tab"`

It will not interfere with links leading to other pages.


jQuery UI Tabs - Extending Tab Behavior To Anchor Links


Add a second button to the form, make sure there is an additional submit function included:

```php
$form['buttons']['submit_again'] = array(
    '#type' => 'submit'
    ,'#value' => t('Save and create another')
    ,'#weight' => 41
    ,'#submit' => array('node_form_submit', 'submitagain_node_form_submit')
);
```

After that, it's a simple matter of using the extra function for routing purposes:

```php
function submitagain*node_form_submit($form, &$form_state) {
    $form_state['redirect'] = 'node/add/'. str_replace('*', '-', \$node->type);
}
```
