Just a little bit of special syntax for describing patterns can greatly increase the flexibility of your filters in Google Analytics. This post is to give you that bit.

What are we working with?

In Google Analytics you can filter using what I’ll call the basic filtration box, that input box with the magnifying glass button above the table of data, and the advanced filtration area which opens if you click the “advanced” link next to the basic filtration box.

I’ll assume in this post that we’re looking at my craft blog’s analytics, specifically the Behavior > Site Content > All Pages report, with the default primary dimension of Page.

The basic filtration box will give you generic pattern-matching: typing “crochet” will give you all URLs that have “crochet” anywhere from the beginning to the end. In the advanced area you can further specify that the URL begin with, exactly match, or end with your search string. In both locations you can use regular expressions.

Regular expressions are a way to describe a pattern to be matched. In full generality the language is extensive and can express very complex patterns. We don’t need the full language (and GA doesn’t support all parts of it anyway), but a little RegExp goes a long way toward easily filtering to the data you’re interested in.

Your first batch of syntax

Regular expressions work by having a collection of reserved characters, symbols that hold special meaning in the RegExp context.

The most useful in GA is | (pipe), found above the return key along with backslash. It means “or.” For example, I did a series about embroidery on crochet where the introductory post’s slug is embroider-crochet and the later posts’ slugs begin embroidery-crochet. I can capture both together with
embroider-crochet|embroidery-crochet

Portions of a regular expression can be enclosed in parentheses. This does nothing by itself, but can be combined with other operations. Enclosing an “or” expression in parentheses lets you make it part of a longer expression. This lets me shorten my previous filter, such as to
(embroidery|embroider)-crochet

Since regular expressions are their own singular option in the advanced filters, you have to use RegExp symbols to get “begins with,” “ends with,” and “exactly matches” filters (unless otherwise specified RegExps match like “contains”). Preceding your expression with ^ means “begins with” and following your expression with $ means “ends with.” Using both gives you “exactly matches.”

For example, if I filtered by /embroidery, I would get both posts in the embroidery category (they begin with /embroidery) and the posts in the “embroidery on crochet” series (which contain /embroidery but begin /crochet). To limit myself to posts in the embroidery category I can filter with ^/embroidery. If for some reason I wanted to filter to just the main blog page, which shows up as /, I could filter with ^/$.

Summary

exp1|exp2 : matches strings matching exp1 or exp2
^exp1 : matches strings beginning with a match to exp1
exp1$ : matches strings ending with a match to exp1
(exp1) : allows exp1 to be part of a longer pattern

Special characters versus ordinary characters

What if you need to use a reserved character literally? Very few reserved characters would ever appear in a URL, but they could in page titles and elsewhere.

There is a straightforward means to get your regular expression to interpret a character as the ordinary version and not the special RegExp version: precede it with a backslash. This is called escaping the character. For example, \( and \) get you literal parentheses.

Characters that need to be escaped are: \ ^ $ . | ? * + ( ) [ {

I have a Related Posts plugin on the craft blog that adds query parameters to its links. If I put /?related into the filtration box, it wouldn’t give me what I was expecting. The ? needs to be escaped: /\?related.

Cautionary notes

In the basic filtration box, you always need to escape reserved characters since it assumes you’ve typed a regular expression by default (though GA is smart enough to interpret a lone or leading ?, say, as a literal character – meaning in our last example filtering on ?related without the / would work just fine).

In the advanced filtration area, the match type drop-down must be set to “Matching RegExp” for the filter to be interpreted as a regular expression. In that case you must escape special characters, but in any other case the backslash will be interpreted literally and break your filter.

A second batch of syntax

What’s above may meet all of your needs. However, you may find situations in which you can’t quite get where you need to be with pipe, parens, caret and dollar sign, or where filters based on those are cumbersome.

The wildcard

A period in a regular expression will match any single character. For example, /page/./ will match /page/2/ but not /page/10/. /page/../ will match /page/10/ but not /page/2/, unless it happened to actually be /page/2//. Since I know my data doesn’t include any URLs with double slashes, I can see ultra-deep dives into content by filtering on /page/../ to get only pages 10 and up.

Repeats

Instead of typing some large number of periods to match a longer string that varies, we can use characters that indicate repetition. This also allows us to match when the varying string does not always have the same length.

Repetition is indicated by one of three “suffix” characters: question mark, asterisk, or plus sign. They mean, respectively, 0 or 1 repeat, 0 or more repeats, 1 or more repeats. For an example:
A.? matches A, AB, A5; does not match ABC, AB12
A.* matches A, AB, A5, ABC, AB12
A.+ matches AB, A5, ABC, AB12; does not match A
(the lists of strings matched or not matched is representative, not comprehensive)

Going back to the page number example, I’d like to look at engagement with pages 2 and later of all category archives. I know the URL structure will be /category/[category-name]/page/[number]/, and that the part from “page” on doesn’t exist on the first page.

Basically I need /category/ and /page/ with something in between, so here is my RegExp:
/category/.+/page/
.* could be used interchangeably with .+ here, because there won’t be a match to category//page.

All three modifiers – ?, +, and * – can be used on any character, not just the period. This lets us simplify our “embroidery on crochet” filter even further. The only different between embroidery-crochet and embroider-crochet is the y, so embroidery?-crochet will match both. It will not match embroiders-crochet, though either embroider.?-crochet or embroider(y|s)?-crochet would match all three.

Summary

. : matches any single character
? : indicates the part of the pattern preceding it can occur 0 or 1 times
* : indicates the part of the pattern preceding it can occur 0 or more times
+ : indicates the part of the pattern preceding it can occur 1 or more times

One little side note

All of my regular expressions so far have matched the case of the URLs I was trying to filter down to. By default, though, Google Analytics makes matches in a case-insensitive manner, meaning “thread” would match “Thread” and “THREAD” as well as the all-lowercase version. This generally is a helpful simplification but if capitalization is meaningful for your site, be aware you can’t filter for it simply by capitalizing in your RegExp.

The full reference list

Characters that need to be escaped (preceded with a backslash) to be interpreted literally:
\ ^ $ . | ? * + ( ) [ {

Coffee photo by miheco on Flickr.

The post Google Analytics: Simple RegExp for Advanced Filtration appeared first on rweber.net.

More progress on the fishpond! The fish are slightly attracted to the mouse pointer when it’s inside the canvas, and you can click to feed them, which attracts them more. They also got a tiny upgrade in attractiveness. They’re still twitchy and awkward but I have various thoughts on how to improve that situation.

[Visit my blog to see the fish in action]

Code for this is on Github.

The post Feedable Fish appeared first on rweber.net.

I got back to this sooner than I thought – and good thing, too, since I found a bug dating clear back to my color layer flattener (not accounting for leading zeroes when converting to a hex string is a lot more noticeable once you are doing something with said hex string besides displaying it). You can read about the idea behind this in the previous color scheme picker post.

You can now select up to five colors from the grid of fifteen and have those colors show as the highlight on the corresponding hex code and in boxes below against black and white backgrounds. You can actually select more than five but only the first five (left to right, top to bottom in the grid) will show up below. Have fun!

Up-to-date code is available in the GitHub repo. Thanks again to Brian Grinstead and David Merfield for the color utilities they’ve written and made freely available.

The post Return of the Color Scheme Picker appeared first on rweber.net.

A while ago I was trying to find an appropriate opaque fallback color for a translucent background color. Although after some thought I understand what the method is to calculate such a thing, at the time I just did a search and came across an article by Lance Gutin relating transparency and color for grayscale. I thought I might expand it to full-color, and after little time on the Mozilla Development Network and a lot in Stack Overflow and Brackets, I have a little utility for you. You can use it here or grab it on GitHub.

Since the arithmetic turned out to be straightforward and my need for this sort of calculation is infrequent, this project turned more into a way to practice non-DOM-manipulation and plain-vanilla JavaScript. My goal was for any valid color specification syntax to be acceptable, and maybe for it to be even more forgiving than that. I found the MDN pages on the color CSS data type and regular expressions in JavaScript most helpful.

Mathity Math

The simplest calculation is on an opaque background, where you take a weighted average of the color values. If the alpha of your overlay color is set to 0.8, to find the red value of the color you see (the composite color), you’ll calculate 0.8*(red value of overlay) + (1 - 0.8)*(red value of background). Do that for all three color channels and you have the code for the composite color. You can make this calculation for some opacities via the Color Blender from Eric Meyer (opacity must be a fraction with denominator less than or equal to 11).

When you add translucency as an option for the background the arithmetic increases in length but not really in complexity: the spec for simple alpha blending or compositing (which applies to both SVG and CSS) simply takes a doubly-weighted average, though it does not take the color underneath the background into account.

Here’s the fully written out calculation, for the red channel:
(composite alpha)*(composite red) = (1 - overlay alpha)*(background alpha)*(background red) + (overlay alpha)*(overlay red)
The composite color’s alpha value will be 1 - (1 - overlay alpha)*(1 - background alpha). If either background or overlay is opaque, the composite will be opaque. If the background is opaque the equation simplifies to the one we had previously; if the overlay is opaque it simplifies to composite red = overlay red.

A translucent background on an opaque bottom layer (the tallest stack I was interested in manipulating) can be dealt with in two steps: average the background and the bottom layer and then average that with the overlay.

Turns out that calculation is the simplest of the bunch, though, and extracting the color information from the assorted kinds of input permitted is much more complicated. I’ll leave that story to the code itself, though.

Rainbow Cake (both cake and photo) by Dabbisch on Deviantart [CC BY-NC-ND 3.0].

The post Flattening Color Layers with JavaScript appeared first on rweber.net.

After the basics were in place, I started adding to Amalgamation (this site’s theme) to make it customizable for someone who might want, say, different pages featured in the front page’s panels. The correct place to put appearance-affecting settings is now the Customizer, which meant a lot of new learning.

It was not without its swearingdifficulties, and for a while I had a nice little hack in place (labeled as such) but I got a handle on it and thought I’d write a bit about the parts that took me while to figure out or were difficult to find information on. This isn’t intended as a self-contained tutorial; I’ll follow this post up with a post of resources. Edit 3/12: The Customizer resource post is up now.

Customizer PHP

In Amalgamation, this is all in customizer.php.

Underscores is a good start on the Customizer, especially for mimicking JavaScript syntax, but begins quite light on the PHP side. All it does is implement partial refresh for a few of the built-in settings. I wanted to add a bunch of new settings and also remove the irrelevant defaults, which you can see near the beginning of amalgamation_customize_register().

There were two things I remember giving me pause when adding settings (see code on Pastebin):

The first was keeping the pieces straight, including what needed the same name. The setup is a little convoluted; sections and controls are UI entities – they are about what appears and how in the Customizer pane. Settings are data entities – they hold the values you use controls within sections to select. That’s why they don’t exist within sections like controls do, and why the label and description are set within the control definition. They are, however, tightly coupled to controls, which is why they both get the same label as their first parameter.

The other mild slowdown was not knowing how to define a radio button selection, but hopefully my example makes it clear: in the choices array it is ‘setting’s value’ => ‘value’s description’.

WordPress has a page dropdown included, but I wanted to allow posts as well so I needed a custom control. I began by using a post select dropdown from Paul Underwood, but changing the selection didn’t alert the Customizer that a change had been made – the Save button remained grayed out. Since I didn’t need the flexibility of that control I switched to one by Tom Rhodes that has since disappeared from his GitHub. That one worked, and I’ve since determined that the key was in the select element having the attribute data-customize-setting-link="<?php echo $this->id; ?>". When I added that attribute to Paulund’s code, it worked as desired.

Note that the definition of the custom control needs to be accessible from within the function that’s adding the custom control. The easiest way to do that is to define it within the function, whether directly or via an include statement.

Using the settings in your theme is easy: get_theme_mod( 'setting_name' ); returns (rather than echoes) the value.

Customizer JavaScript

This is in two files in Amalgamation: customizer.js and customizer-controls.js; the enqueuings are in customizer.php.

JavaScript is currently optional for the Customizer but developers are encouraged to use it for essentially all the functionality. I did not (though I intend to at least try it out in the future) but I made good use of JavaScript for dynamic display of controls in the sidebar and for partial refresh in the preview so a small change did not require the whole thing to reload.

The first thing to note is that there are two different actions to hook your script enqueue functions into, depending on whether the script affects the sidebar or the preview pane. The preview is in an iframe so it is effectively a completely separate website; scripts that live in one location can’t affect elements in the other.

For dynamic controls, the enqueue command is this (view on Pastebin):

You can code these as you would any other show/hide commands, but I found I needed to enclose them in an extra $(function(){}); to delay execution and prevent them being overridden. The necessary ids for your elements will be generated following a standard pattern and are easy to find in the web inspector.

For preview AJAX, the enqueue command is this (view on Pastebin):

Note that I’m localizing the script also, as in my previous post about AJAX in WordPress. This of course is only necessary if you actually plan to make AJAX calls. Within the script you have to follow the pattern

wp.customize( 'setting_name', function (value) {
    value.bind(function (to) {
        // your css/html change or ajax call
    });
});

If you leave out value.bind it won’t work. From what I understand, “value” here is the fact of the change, and “to” is the result or contents of the change (e.g. the color code, text of the byline, or id of the page you selected from the dropdown). Once you’re inside you can do whatever you want; it’s no different from JavaScript written from scratch to enact a change on the page. In particular AJAX works the same way as in WP at large.

There’s my contribution for now. Stay tuned for the resource post. Edit 3/21: My selection of customizer resources is posted now.

Marionette photo by Jürgen Howaldt (Own work (selbst erstelltes Foto)) [CC BY-SA 3.0 de], via Wikimedia Commons.

The post Learn by doing: the WordPress Customizer appeared first on rweber.net.

Early last summer my business partner approached me with a challenge: could I create a program that would allow her to collaborate remotely on a short video storyboard with a client? She’d done some looking and found nothing to suit her needs. I started in, eager to do some full-stack development, and produced a program that would allow creation of a scene-by-scene storyboard, with form inputs for the various pieces of information and an area in which to sketch (that last using wPaint by Websanova, which draws with the HTML5 Canvas element). New scenes can be inserted and existing scenes can be rearranged, deleted, and collapsed.

It was a marvelous challenge. We started with no system for users; we just hid the whole page behind password access. I subsequently added a user-login system which is functional but incomplete in the sense that the only way for two users to share a storyboard is for the sysadmin to manually add permissions to the database. There is, however, an access locking mechanism to keep people from overwriting each others’ changes repeatedly, and an autosave that updates the session to keep accidental reloads from erasing changes.

Except for the drawing area I built it from scratch, learning PDO, password recovery systems, and JSON along the way. It’s far from complete and what’s there could use some refactoring (in particular to get more DRY), but I’m quite proud of it and glad to be putting it into the world: Storyboard on GitHub.

The post Old project, new repo appeared first on rweber.net.

We’ve done some simple parallax on a couple of websites recently, using jQuery but no additional JavaScript libraries. It takes some hand-tweaking – and you have to know your items in advance – but is also much lighter weight than a plugin.

The simplest version is elements scrolling independently of the page and each other, for decorative effect – so where they are when isn’t so crucial. Each needs to be fixed position and you’ll likely want some horizontal placement in the form of margins or left/right values.

In the JavaScript we’ll manipulate the CSS top value according to the amount we’ve scrolled the page.

Bind a function to the scroll event, then within that function calculate how far the page has been scrolled and use it to compute a new top value for each parallaxed element. In this case, starting 800px from the top, the element will scroll one quarter as fast as the page itself. The initial value for top in the CSS should also be 800px, or the element will jump when the page is first scrolled (if you are starting with very large – i.e. always offscreen – top values they probably don’t need to match, but there’s also no reason not to match them).

By changing the initial value and the multiplier to how much the page has been scrolled, you can get a variety of rates and entry points. Careful of your opacity – with abstract images, one showing through another can be lovely, but with representative images it may just be weird and distracting.

Multiple Items with Coordination

Since using that version of parallax I was called on to create a more complicated version. In this, we’re scrolling many items separately from the page, but certain subsets of them have to align at points along the way. This made tweaking just starting point and rate of scroll completely impractical – it would have taken forever. It also made screen height an important consideration.

Algebra to the rescue: All of the parallax in this post is linear; that is, the calculation of the CSS top value from the amount the page has been scrolled is the equation of a line. We can make our choice of linear equation more deliberate with two points on the line and the following equation:

In this case, x is the amount of scroll and y is the top value. What are the two points? I used the point where the element should touch the bottom of the screen and the point when all of a batch of elements should be in their proper relative positions. You can get some complicated arithmetic, but fortunately JavaScript knows how to do that. I ended up with a helper function:

Since I had a good number of elements calling this function I expected calculating screen height once and then passing it as a function input was more efficient than calling that jQuery function repeatedly. The function above takes the inputs x₁, y₁, x₂, y₂, x, and returns y.

There’s more algebra to determine what the appropriate ending top value should be, dependent of course on number and desired alignment of items. I wanted three rows of items, equally spaced, with margins of 48px above, between, and below. I also wanted them to align that way when the page had been scrolled 1.25 times the screen height – they were “page two” but I needed the breathing room of that extra quarter-screen for the parallax effect.

Why not 3/4 screen height on that third item? Because that gave it far too long to get to its final position, and as a result it took forever to disappear off the top of the screen – long enough to overlap with “page three,” the items lined up when we’d scrolled 2.5 times the screen height. With 7/8 screen height it still lingers, but gets out of the way in time.

The post Parallax without Plugins appeared first on rweber.net.

Ever since I found it probably close to a year ago, I’ve been a big fan of the simple auto-playing slideshow on CSS-Tricks (though perhaps surprisingly I have yet to apply it to a Media Library Assistant-generated WordPress gallery). I’ve tweaked it multiple times to serve different purposes, and thought I’d share two.

The first tweak is more of a wrapper than a modification. It has two features: it loads the slideshow content via AJAX, and it has a small change to the CSS to smooth the beginning of the slideshow.

I wanted to load the slideshow dynamically so I could turn it off entirely on mobile, without a Very Helpful Browser loading the images in case they were used later, slowing down the site. The page itself had the slideshow as a banner header, and it was collapsed at small sizes, so I used its height as the test in the JavaScript. There was a #slideshow div which had a background image set in CSS (via a class JavaScript removed) in case someone’s JavaScript was disabled, and the slideshow images were in a separate file as naked HTML (though the file was .php for no particular reason) to be pulled in with jQuery.load().

As for the CSS, I found that trying to hide all but one image via CSS and have the JavaScript take over from there gave me a herky-jerky first transition. Instead, I hid everything in the CSS and used JavaScript to show the first image just as soon as the images were loaded up.

AJAXified slideshow JavaScript:

This and the JavaScript below need to be wrapped in a $(document).ready(function () { … }); to operate most smoothly.

CSS:

The second tweak makes it a double slideshow: question and answer. In situ it uses WordPress text widgets, the title for the question and the content for its answer, but you can do it with any paired elements. The code below assumes a div with both class and id slideshow-wrapper, holding divs with class slideshow-item, each holding a pair of divs: .question and .answer. There are two different timeframes. The loop moves from pair to pair, and within it the question appears first, then the answer, they stay put for a while for reading, and then both fade away.

The other change to this one is that there’s a lone single animation outside the setInterval loop. Your choices without this separate bit are to have both the question and the answer in view immediately upon loading the page, or to wait with blank space for the entire first interval.

Q&A slideshow JavaScript:

CSS:

Slide projector image by Jean-Jacques Milan via Wikimedia Commons

The post Tweaking the simple auto-playing slideshow appeared first on rweber.net.

So suppose you want to fix the sidebar on a Twenty Fifteen WordPress site, because most of the time it’s going to be short enough to fit entirely on the screen. Maybe it’s not always going to be, or maybe it’s just a little too long so you want to have it scrollable but not tied to the scrolling of the rest of the page. You can do that. Actually, it’s pretty easy if you aren’t concerned with aesthetics: position:fixed; height:100%; overflow:scroll; on the sidebar should cover you. However, Internet Explorer (even 11) will put a nice wide scrollbar down the edge of your sidebar whether or not scrolling is happening or even possible. Here we’ll talk about making that not happen.

The key is a lightweight jQuery plugin called jQuery-slimScroll. It adds a lovely and styleable scrollbar only as necessary, and allows you to avoid overflow:scroll entirely (which is the source of the IE scrollbar).

In your wp-content/themes/fancyfifteen folder you’ll need 4 files: functions.php, style.css, aqa-pretty-scrolling.js, and header.php (the scrolling requires adding a wrapper to the sidebar content, which in Twenty Fifteen is in the header file).

As will now be standard, you can get the code for all of my Twenty Fifteen modifications in one big (but separable) Twenty Fifteen child theme on GitHub.

header.php:

The only thing in header.php that is different is the div with id “pretty-scroll”, just inside the div with id “sidebar”. Everything else is exactly as in Twenty Fifteen, which is why I haven’t bothered making this very large.

functions.php:

This is also very standard: enqueue your parent and child stylesheets, then enqueue jQuery-slimScroll and our JavaScript program that makes use of it. These enqueuings could be combined.

style.css:

This is simple but getting more interesting. The sidebar isn’t along the side until the screen gets sufficiently large, hence the media query. If a visitor has JavaScript turned off, they will get a fixed sidebar with overflow: scroll, trading an ugly scrollbar for a usable sidebar. Otherwise, the code will tack on the hide-scroll class, erasing the scrollbar. The rest of the styles bring the widgets closer together; if you are not accordion-folding them you may not want them closer, but then again if you’re not accordioning them what are the odds you have few enough to want to fix your sidebar?

aqa-pretty-scrolling.js:

Finally, we have the little bit of code that sets everything up and activates jQuery-slimScroll. If the sidebar is fixed (this seemed an easier indicator to use than sizes), the sidebar and pretty-scroll div get overflow:hidden on them, and then slimScroll scrolls pretty-scroll within sidebar. If you have trouble with bits of your sidebar not scrolling with the rest, uncomment the line that sets position: relative on pretty-scroll. For a quick and easy style match, set the scrollbar color to one of your site’s main colors. It will be translucent, so a darker one will likely look better.

There you have it. It took a little while for me to get this set up so there was no scrollbar visible on IE, but now that I have a template I’ll be using this whenever I have a piece of a page that scrolls independently of the rest of the page.

Complicated scroll from Pixabay

The post Conquering scrollbars appeared first on rweber.net.

More additions to Twenty Fifteen! Why not gather these all together into a single child theme? Well, why not? You can see it all on GitHub, though I haven’t yet caught up with myself.

I haven’t said what we’re doing yet. So you have a website with Twenty Fifteen, and you don’t have too much in your sidebar – the menu, which isn’t too long, and maybe a few widgets. What if you made the sidebar collapse down nice and short so you could fix it in place? It is wonderfully simple to do.

You’ll need a folder in your wp-content/themes/ directory called “fancyfifteen” to use these files as-is. It will have three files in it: functions.php, aqa-sidebar-accordion.js, and style.css.

functions.php:

There are three chunks of code in functions.php: the first brings in the stylesheets for both Twenty Fifteen and Fancy Fifteen, the second adds HTML to widget titles that we will later use for drop-down/collapse-up arrows, and the third brings in the JavaScript that actually does the accordioning. You can leave out the middle section if you don’t want the arrows.

aqa-sidebar-accordion.js:

Progressive enhancement! If the site visitor has JavaScript turned off, all widgets will be open. Otherwise they will all close up. The commented-out line would then reopen the first one, provided it has a title; that seemed to be the most efficient way to have the first widget auto-open. The way I wrote this JavaScript, any widget without a title won’t collapse (ever). You could use that fact to have, say, a search bar that is always visible.

For style.css, visit GitHub. There’s nothing tremendously interesting there – it just mimics the built-in support for drop-down submenus. If you decided to leave out the middle chunk of functions.php and forgo arrows, you only need the top comment block of style.css — but you definitely need that! It’s got the information WordPress needs to understand the theme and its relationship to Twenty Fifteen.

Next time we’ll discuss actually fixing the sidebar in place. The trick is to allow scrolling if the contents are longer than the page, but avoid the economy-sized scrollbar Internet Explorer slaps on anything styled overflow:scroll.

Accordion-playing bird from Pixabay.

The post Accordion Widgets for Twenty Fifteen appeared first on rweber.net.