This is data-geekery, but sometimes I’ll run across diagrams with valuable information and they’re difficult to utilize because they’ve been designed to go viral, rather than with handiness in mind. This social media chart by @SumAll (sumall.com) is one of those. It has great information about the best and worst periods for posting content to a variety of social media channels. The problems are:

The color-coding doesn’t communicate anything useful other than the brands.

The time period numbers don’t align with the time they correspond to.

The timeline doesn’t communicate relevant context like the typical workday or daytime to reveal which networks are for night owls (e.g.).

The good and bad timelines are divorced, so you can’t see the “okay” periods.

The watch artwork serves no purpose other than visual noise because there’s no a.m./p.m. distinction.

Don’t make Tufte cry.

Here’s the Before

Here’s the After

Now, sure. Their version may look more fun, with the cat and all. Mine is the one a social media person may print out and glance at though, without needing to mentally dissect the information through the cruft. What I focused on:

Order the networks from earliest to latest peak engagement periods, to allow someone to work down the list through the day.

Show highest and lowest periods, using tone more than color, to address color blindness concerns.

Mark “M” for midnight and “N” for noon, to avoid the awkward military time.

Show daylight hours and workday hours.

What would make it better? There’s always room for improvement:

Brand icons next to the names would give it a quicker visual scan.

I could add a color key, but I believe the meanings here are fairly apparent, so meh.

This one’s pretty simple, but if you have admin access to your team’s Slack account, you can use Slackbot to add automatic replies to keyword matches. If you’re a WordPress team, you’re likely familiar with the lovable Wapuu. To generate a random Wapuu bot post whenever a Wapuu is ordered up:

Drop any .ai or .svg files from the list, as Slack doesn’t automatically show them

Append the full file server URL to the front of each filename

Go to your Slackbot management area at yourteamname.slack.com/customize/slackbot

Add a keyword match for “wapuu” or something more specific like “gimme wapuu”

Paste that list of Wapuu URLs into the response area

Save

Go into any Slack channel and test your command

Now, you’re not serving up a live list of Wapuu from the repo so you run the risk of one being removed or renamed, and you’ll be missing any new ones. I wasn’t getting fancy here. Better would be to write a randomizer on your own host, to grab the list dynamically, then just use that single URL in the bot response. But this works.

On the afternoon of January 8th, I observed a sudden and mysterious overuse of the emoji in my Twitter feed. By the folks using it, I immediately knew a fresh app was on the loose and pivoted to Google where the trusty “peach app” query would turn up fruit (ba-dum-tss).

From the titles alone, I didn’t even need to read the articles to know I wanted in. I immediately downloaded and onboarded. As soon as I walked through that process, I ended up in the app where I had zero friends. Only one friend turned up in my address book and I had to wait for approval to see his content. That person was Yuri Victor.

Despite the lack of network, I immediately felt this app may be the next big thing.
Why? I’ll get to that.

There have been some big hypes over the years. Google Wave, Google Plus, and Ello. Each were sold by the media as something that would change the world, but each I immediately dispelled with my network, letting them know all had fatal business flaws. Wave was too much. Plus erroneously tried to brand itself as a “Facebook killer” rather than seeing the real opportunity to be Slack at a time when corporate intranets sucked. Ello simply had no value add of any kind—100% hype.

Begins to address the firehose feed problem Facebook has arrived at. You know, that one that makes everyone angry all the time because it’s all politics, bad news, or lives you wish you had.

Isn’t laden in advertisements as Instagram is shifting toward. (Even if we know someday it will be.)

Is inherently personal, for friends without public feeds.

Hasn’t been advertising, yet within my first 24 hours I mustered 39 friends with shiny new accounts, all experimenting, posting, and replying.

The playfulness of the app and the natural draw to use it is something I’ve only seen in Slack—the poster child of 2015. In fact, I’d been yearning for a Slack equivalent for my friend network. A means of organic but unobtrusive chat, with a vibe that makes everyone happy instead of bitter. Ambient notifications. Conversation channeling. Peach isn’t nearly as mature as Slack, but it’s the closest I’ve seen and it’s only in soft launch, ironing out a couple bugs. I have faith Peach will arrive there and have a feeling deep down that Peach will become the Slack of 2016.

Today

What Peach does right now:

It keeps posting simple, but multimodal. There are shortcuts for sharing where you are, what you’re watching, what the weather is like, and the usual photos, videos, or messages. My favorite though, is the drawing feature. Simple black and white, pen on paper.

Each friend feed is read individually, but there’s a handy “next” at the bottom of each as you catch up.

You don’t write on friends’ walls but you post on your wall and tag them, or you reply to their posts. This keeps their walls from being covered in shared junk (something Facebook is abused by).

That’s it. There are no private messages and there’s no integrated feed of everything. You prioritize who you want to catch up on in any order. The closest thing to an aggregated feed is the notification center in your own profile.

Tomorrow

What Peach needs to roll out next, to keep momentum:

An Android app. I’m a self-admitted Apple fanboy, but the Droids want to play too.

Add an in-app photo editor. It doesn’t need to be as much as Instagram has, but minimally cropping and fixing contrast before posting would be nice.

Show the list of who liked what. Right now the count is there, but you can’t see who was reacting.

And the Grand Poobah: Introduce channels. Public channels or private channels, I want to have somewhere a group of friends can each post to on a theme. This is where Slack shines—in the microcommunities. I like the absence of a single feed of everything, but there needs to be some clustering.

Next Year

What Peach should consider in the future:

Add hashtags. These aren’t needed now, but the sooner they’re implemented, the more valuable they’ll be in the future. Hashtags are a great means of seeing threaded topics over vast periods of time. For example, seeing all birthday posts over the course of ten years. An advanced search a la Twitter can do this, but it lacks the fun discovery hashtags inherently add.

Eventually, merge the drawing and photo tools and give them more options. Essentially, reprise Skitch. Don’t do this too soon though. There’s something romantic about the primitive nature of the tools today.

Talk to the folks at FireChat app and introduce a bluetooth mesh network to allow in-flight Peach parties, even when there’s no network. This works brilliantly in bogged networks like sporting events, concerts, and SXSW where you *yearn* to interact with everyone but can’t get anything to post.

Introduce a MacOS app. Like Slack, a seamless ecosystem is magical. Be everywhere I am without me thinking about it.

I’m already excited by where this is going and I hope to run into these folks in Austin this year. Happy Peaching! Find me on Peach at @adp and follow them on Twitter (@peachdotcool) to give feedback.

In this instance, I had a client site with static HTML files in the root and a WordPress blog in the /wordpress/ folder. The old site was using the classic ‘website.tld/?p=123’ URL format, where ‘123’ is the ID of the post.

In the rebuild, the point was three fold:

Get all the static HTML pages into WordPress and editable;

Give the blog posts a more useful SEF URL structure; and

Move everything into the domain root (not down in a /wordpress/ folder).

Luckily for me, WordPress does a good job at matching that ‘123’ ID with the new ‘/2015/12/20/fancy-post-stub/’ structure all on its own—if only the query was looking in the correct directory!

A simple ‘RewriteRule ^wordpress/(.*)$ /$1 [R=301,L]’ in your .htaccess file should work, right? Nope! The trouble is, because the old URL is a query string, you need to detect the query as its own string, then append it to your new URL.

This setup allows me to keep the old /wordpress/ directory with all of its uploaded media files, so I don’t have to create redirects for any linking that’s already out there. For that, I deleted everything else from that directory, aside from anything in /wordpress/wp-content/uploads/.

You’ll notice I also specified as much of the query string as possible and restricted the value to numbers only—i.e., ‘p=([0-9]+)’ rather than being lazy with ‘(.*)’ for the whole thing. This was more for future thinking, in case there was something else I needed to redirect for some reason, and to have it point elsewhere. It was also because I like my regular expressions to be as specific as possible for best practice, to prevent unintended consequences. I know the IDs are numbers only, so I’m only accepting numbers.

Lastly, I added the catch-all for the /wordpress/ directory to redirect to the root if nothing follows it. Note the $ is the end of the string, so my ‘/wordpress/wp-content/uploads/something/’ URLs still go untouched.

Hopefully this is helpful to the Internet. I’m pretty good with mod_rewrite, but this was something I had to troubleshoot because I’d not used {QUERY_STRING} before.

Today’s Diane Rehm interview with M*A*S*H’s Alan Alda wasn’t intended to be a user experience or content strategy talk, but it was a great segment on reading between the lines with people, using improv techniques to communicate better. He references the “curse of knowledge” inhibiting interpersonal communication and has a number of great anecdotal stories.

When you’re extending an existing Sass-enabled template in your local environment, you may notice your fresh instance of the template doesn’t quite match up with the demo template. For example, your line-heights, column widths, and other dynamic measurements are just different enough to drive you mad. If you use your browser’s inspector to investigate, you’ll likely discover your dev environment is rounding your computed measurements to the default of five decimal places. This is a common hiccup with Bootstrap, for example, where a base line-height of 1.428571429 becomes 1.42857.

You can set this globally as an environment configuration option (i.e., in Ruby or Node), but if you’re using a watcher like Compass or Grunt, you gain per-project control. In Grunt, it’s as simple as an option in your Gruntfile.

In Terminal:

cd /path-to-your-local-site/
open Gruntfile.js

In Gruntfile.js via your editor of choice:

Add a new option within your Sass dev options. Don’t forget the comma between each option line!

Note: If you change any of these Gruntfile options and are already watching in Terminal, you’ll have to exit your Terminal session and regenerate your CSS files to reflect changes. Regenerate either by running grunt buildcss prior to watching, or by editing your .scss file after watching.

]]>https://www.stickielab.com/2015/05/25/decimal-precision-in-sass-with-grunt/feed/0543Lean Requirements Without Skimping on the Meathttps://www.stickielab.com/2015/05/25/lean-requirements-wcmpls/
https://www.stickielab.com/2015/05/25/lean-requirements-wcmpls/#respondMon, 25 May 2015 01:13:58 +0000http://www.stickielab.com/?p=541

My talk from WordCamp Minneapolis is posted to WordPress.tv! The editing is masterful with the slides sliced in. Very nice. See all of the great #wcmpls talks.

If you work for an agency, chances are you have multiple development environments. Some clients have you mirroring their engineering team’s setup, others you created to your preference, and yet more are relics of past configurations you’ve forgotten about.

In this situation, I have a hard time remembering which project needs a “bundle exec guard” versus an “npm start” to get my SASS compilers, linting tools, and other gems going. Lately, I’ve been enjoying the use of bash aliases to both act as a more organized system of inventory, and to maintain my sanity when toggling between development environments.

I’ve come up with a naming system that makes sense for me and it consists of two basic parts:

What am I doing?
For this, I have prefixes cd- for jumping to directories, start- for executing a series of commands to begin development, or nano- to open and edit configuration files (particularly those I don’t access often and forget URLs for).

To what project/file am I doing it?
That cd- then gets combined with shorthand for a client and project pair. For example, cd-a-intranet to replace “cd /Tree/Acme/acme-intranet/”. I like to have access to a client root as well, so I also define cd-acme.

Note: I know it’s possible to open a Finder window and drag it into Terminal for a quick cd, but that involves wasting time browsing through Finder. More on that in a moment.

After editing, follow the instructions to save and exit. Your bash profile is only loaded once at the beginning of a new Terminal session, so you’ll need to relaunch Terminal to test your new aliases.

Now for the fun part

I’ve given you everything you need to know to quickly jump around project folders and to start a variety of Terminal environments to begin development, but remember when I said I didn’t like opening Finder? You can have Terminal do that for you too.

Depending on how your project’s environment is configured, it likely falls into one of these camps:

Flat files, no host/server – Just a folder of HTML files with no virtual host or server.

A host/server with no frills – No watchers, guards, or other fancy tools, but a host URL, including virtual hosts.

For all of those, you can modify your start- alias to include some added open commands to automagically open your Finder window and launch your project in your web browser—all as part of your start process.

Open your Finder directory:

open .

Open an HTML file without a virtual host:

open "/Library/WebServer/Documents/Clients/Acme/acme-intranet/index.html"

Open a URL (e.g., a virtual host):

open "http://acme-intranet/index.php"

For something like Guard, you don’t actually need to do anything. It likely opens your browser windows already.

Open some other URL (e.g., GitHub Tickets assigned to you):

open "https://github.com/MyAgency/acme-ui-library/issues/assigned/anthonydpaul"

Use those in tandem, within your start- alias:

(Each command should be on a new line, within the quotes around the entire alias string.)

Open editing windows

Pair your Finder folder and browser window open commands with opening a handful of files in the editor of your choice. Use an asterisk to give a variable, particularly for prefixed project files within a larger repo (i.e., minisite.*.php).

Now you have the tools to quickly cd-a-intranet and start-a-intranet, opening everything you need when your server starts up—all with two quick keyboard commands.

Note: You can add your cd command into your start command, but I keep them apart because I’m often jumping into a directory to do things other than development.

As a closing tip, it’s a bit meta, but I also have a few aliases for remembering where my bash profile is, alongside those other host files I need to edit when I add a new project. These will be easier to remember when you haven’t used them in six months:

I don’t know why I didn’t Google this until today, but it’s always bothered me the default “Duplicate Spread” feature in InDesign tosses your new page to the end of your document—always forcing you to have to drag it elsewhere.

To duplicate a page inline with the page you’re actively working on, hold down your option key (Mac OS) and drag the page you want to duplicate into the position you want it duplicated to (usually right after the master you’re duplicating from).

It seems the default should be to duplicate in-line, in the context of where you are working in the document. I’m not sure of a use-case where I’d want a single page thrown to the end of the document, unless I’m duplicating a batch of pages into a new chapter. In that event, I’d rather the single page duplicate in-line by default and a multi-select of pages request a decision similar to the PDF insert pages dialog.

Attending SXSW is a crazy ride on many fronts, but the first you are able to process mentally are the little things. As soon as you arrive home and decompress, you’ll pick up on the oddest of observations. These are a couple of mine.

T-Shirt makers, by the numbers

While removing tags from and washing all the free t-shirts I collected from SXSW, I thought it might be an interesting collection of manufacturers—for people who like numbers, or who order shirts for things:

All are soft tees unless noted as heavy. There’s been a dramatic shift toward high-quality tees over the past few years. Geeks are people too!

TulTex is a brand I’d never seen before.

Health numbers, via my trackers

Steps – On an average conference day, you walk just over 20,000 steps.
(range 16,100-27,200; my typical workday is 4,000 with weekend spikes)

Sleep – On an average conference day, you sleep 4 hours and 28 minutes.
(range 2:40-6:05; typical is 7:30; on my first night back I slept 8:59 and probably would’ve slept another hour without my alarm)