RyanParsleyDotCom

Hello Cerebro

Mon, 25 May 2026 00:00:00 GMT

I want to introduce a tool that I've been working on for a few weeks. Cerebro collects metadata about your projects (git history, file system info, TODO comments) and writes markdown in a designated folder. It's not a tool for agentic workflows. It does relieve some of the cognitive inflammation that results from increased use of LLMs. It's not for LLMs, it's for people that may or may not be using LLMs. Cerebro is a tool to reduce cognitive load of "too many" side projects. For when minimalism isn't your style.

My workbench has always been messy

When I write code in my "freetime", I don't have deadlines or stakeholders. I more or less give myself permission to follow my muse. The result tends to leave me with little piles of half baked code here and there. This is not a problem in and of itself. The point of this activity isn't shipping code, it's about learning and tinkering. Sometimes, I would like to take inventory of my little experiments and get a little more cult of done about it. It does feel good to ship things.

The funny thing about LLMs

I don't know if LLMs make me more productive, but I do find myself tinkering a lot more lately. Much of my tinkering involves LLMs in one fashion or another. More than anything, I'm feeling a burden on my attention because of that. While I am using LLMs, I'm not looking to just vibe out slop. Many of my more recent projects have centered around learning how to use LLMs to make high quality code. That means, I remain more at an architectural meta level and am a bit removed from the implementation details. The more casual relationship with this code means it's harder to connect with the architecture.

Mario Zechner, creator of the Pi coding agent, referred to agents as "merchants of complexity". I feel that in my bones. Now before you go and suggest some sort of detox or intervention... the problem isn't the agents. Not really. And it isn't my complete lack of discipline (is the thing I keep telling myself). The problem is that I can't hold all that context in my head. So, seeing I had a problem of too many side projects I did the only reasonable thing for an engineer, I started one more project.

Enter cerebro

Cerebro is my attempt to reduce the re-entry tax. It watches my development activity and builds a dashboard of sorts. The cerebro build command scrapes my git history, AI session databases, and code for TODOs. It writes markdown files to a designate location that I refer to as cortex. Cortex is just a folder of markdown and all the data in it is otherwise accessible... but the ergonomics of this dashboard are making a real difference.

The experiment continues

At this point, it's been a little over a month and it seems like there's something of value building in cerebro. I'm toying around with a naive MCP server to expose cortex to harnesses. I don't know if I'll keep it around, but when I ask an agent about one of my projects, it reads the same context I'd read myself and that seems nice for grounding and sharing between projects. I also have a skill that is aware of cortex and can make use of the cli that it seems just as good. Time will tell if the MCP is worth maintaining. For now, I have it and it plays nicely with opencode.

I'm not using Cerebro to write more code faster. I'm using it to connect with what I already built. The pile gets maintained, not expanded. It's an effort to reduce cognitive load when the need for context switching seems to be growing at an increasing rate. It's a tool for humans that happens to play nice with LLMs.

Hello Faircamp

Sun, 01 Mar 2026 04:53:00 GMT

This is the story of self-hosting a music portfolio in my homelab using Faircamp. I doubt you are looking to set up exactly this project with exactly this tech stack, but I suspect sharing my journey will be useful in one way or another. All in all, the process is straightforward. Perhaps, seeing that will encourage you to try for yourself.

What is Faircamp

I can't state it any better than the official documentation does:

Point Faircamp to a folder hierarchy containing your audio files. Within minutes, Faircamp builds a complete website presenting your work. The resulting site requires no database, no programming, no maintenance, and is compatible with virtually every webhost on this planet. -- Faircamp Landing Page

While this post is about how I'm hosting Faircamp, it's transferable to any static site (folder full of html) you my want to share with the world.

What is even going on with your network?

I have a Raspberry Pi in my homelab. Nothing about this is uniquely suited to that hardware though, anything you have will work just fine. It has a few services running. All of them configured via Coolify, but I'm not going to use that today. To use that would get in the way of the slick minimal deploy workflow that Faircamp supports out of the box.

How do I safely expose myself?

I don't want to make my local network any more public than I need to. Instead of opening a port on my router, I'm going to make use of Cloudflare's Zero Trust Tunnel. At the time of writing, you can make use of this for free and it's a user-friendly way to enable a local port to be accessible to the outside world without having a static IP address. If all of that is Greek to you, no problem, the point is you don't need to deal with any of it.

DNS friction

Since this blog is hosted on CloudCannon, I have been using their DNS configuration tool. It's the most convenient way to get a domain name pointing at a site they host. The problem today is, it doesn't allow for me to do more advanced things like wire up this Cloudflare tunnel. To enable that, I had to move control of my domain name to Cloudflare. That went pretty smoothly because it's a well documented popular choice.

One gotcha that is easy to overlook is that the default CNAME for CloudCannon is site.cloudcannon.com but it does not work with Cloudflare and that needs to be changed to orange-cloud.cloudcannon.com.

Here's a snapshot of what I did in the abstract to get things working.

Type	Name	Content
CNAME	*	orange-cloud.cloudcannon.com
CNAME	music	(tunnel hostname)

Caddy as my web server

Thus far, all of the services being hosted on this computer are by way of docker containers. This means I didn't have any sort of web server installed directly on the Pi yet. I'm not super familiar with Caddy, but I went with it on this project over apache or nginx. It seems modern and light-weight and it did just work for me. Here is the entirety of my config (/etc/caddy/Caddyfile).

:1337 {
    root * /opt/music-site
    file_server
    handle_errors {
        respond “{err.status_code}“
    }
}

In that code snippet, opt is the location I decided to place my static site. Historically, var/www is pretty idiomatic place for static html, but it also kind of suggests to me that you're using Apache. Services seem more appropriate in opt and I am planning to set some up in Caddy soon. Considering I'm planning to serve up some rust services soon, I'm going to standardize on opt for all the things that Caddy cares about on this computer. The choice is debatable. At the same time, the stakes couldn't be lower.

Another thing to note, if you're just getting started with Caddy, is you want to use the service for this. Don't start Caddy on your server with caddy anything. You want to run sudo systemctl enable caddy. That way, the web server is started every time your computer is.

What does deployment look like?

Faircamp builds the site locally and even handles deployment with the following arguments.

faircamp -d --deploy-destination user@raspberrypi:/opt/music-site/

This works by way of rsync so you'll need all the typical permission stuff set up for this to work smoothly. I already had an ssh key established to avoid needing a password each time.

The only thing I had to do was give my user access to the opt folder. You'll likely see the same issue as this the opt folder is locked down by default. Here are my settings, yours will be different unless many fantastic coincidences line up.

sudo chown -R ryan:ryan /opt/music-site

Tada

And that's how I served up a collection of music I made via a Raspberry Pi. The state of the web is in a funny place where we just keep heaping complexity on top of abstractions. The idea of having a single binary run over a folder of static files and rsyncing the result to a computer I own felt refreshing.

I Finally Got POSSE Automated

Sun, 31 Aug 2025 00:00:00 GMT

Almost a year ago, I wrote about my game plan for POSSE. Like many automation projects, it sat on my back burner making me feel guilty every time I manually posted to social media. Today I finally built an automated workflow I'm proud to share.

Static sites are the bees knees, but...

My blog runs on Astro, which is great, but I wanted to syndicate my ephemera posts (notes in IndieWeb parlance) automatically to social media. The rub is you want bidirectional linking and SSG has a bit of a chicken and egg problem.

The gist is this, publishing content on your own site spawns the creation of a post elsewhere. The syndicated post links to the canonical post and the canonical post links to the syndication. The rub is, when you write markdown, there is no syndicated post to mention in the frontmatter. This is a little beyond the sweet spot of static sites, but not unachievable.

The old way was fine but not great

I'd write a post, publish it
Remember to copy the content to Mastodon
Do the same for Bluesky
Hope I didn't mess up the formatting

It worked, but I aspired for a more seamless process. Often, I'd regress to simply using the mastodon app and only occasionally link up an ephemeral post after the fact.

The new hotness

I spent a weekend refactoring everything into a proper Astro integration. Here's what the new system does:

Scans my ephemera folder automatically
Finds posts from the last 24 hours
Skips ones I've already shared
Posts to Mastodon and Bluesky
Handles images and links properly
Logs everything so I can see what happened

The best part? It runs every time I build the site. No extra steps, no remembering to do it.

My first Astro integration

Since my site is served via CloudCannon, my first instinct was to use their build hooks. I got a version working and it was fine but testing was manual and I accidentally spammed my mastodon account via a bug. This had me thinking about alternative implementation details.

Getting this working required diving deeper into Astro's API. Not gonna lie, the idea of using an Astro Integration came from me using OpenCode as a rubber duck. I've wired up a few 3rd party integrations but making a custom one hadn't occurred to me. I'm glad I went through the effort though because testing is way easier and using Astro hooks feels more right than the previous approach did.

What that looks like

Here's the core integration structure:

// src/integrations/posse.ts
export default function posseIntegration(options: PosseOptions = {}) {
  const { mastodon, bluesky, dryRun = false, maxPosts = 3 } = options;

  return {
    name: "posse-syndication",
    hooks: {
      "astro:build:done": async ({ logger }) => {
        try {
          await runSyndication({ mastodon, bluesky, dryRun, maxPosts, logger });
          logger.info("POSSE: Syndication process completed successfully");
        } catch (error) {
          const errorMessage =
            error instanceof Error ? error.message : String(error);
          logger.error(`POSSE: Syndication process failed: ${errorMessage}`);
        }
      },
    },
  };
}

Now it just works. Every time I deploy, it syndicates new posts. No extra steps.

Code to post to the fediverse

This function handles content formatting for different platforms:

function generatePostContent(
  data: EphemeraData,
  canonicalUrl: string,
  body: string,
  platform: "mastodon" | "bluesky",
): string {
  const initialContent = body?.trim() ? cleanContentForSocial(body.trim()) : "";
  const content =
    !initialContent || initialContent.length < 10
      ? data.title || "New ephemera post"
      : initialContent;

  const maxLength = platform === "bluesky" ? 300 : 400;
  // Reserve space for "\n\n" + canonicalUrl
  const urlSuffix = `\n\n${canonicalUrl}`;
  // Add safety buffer for grapheme counting differences and JSON overhead
  const safetyBuffer = platform === "bluesky" ? 20 : 10;
  const availableContentLength = maxLength - urlSuffix.length - safetyBuffer;

  const finalContent =
    content.length > availableContentLength
      ? content.substring(0, availableContentLength - 3) + "..."
      : content;

  return `${finalContent}${urlSuffix}`;
}

More like a good start than a happy ending

This automation works and is useful today, but it's a solid foundation for bigger goals. For now though, I'm thrilled that my posts finally syndicate themselves—no more manual copying and pasting, no more forgotten social media updates. I can write a silly thing in markdown once, and trust copies find their way to appropriate silos.

LSDJ Hardware Notes

Thu, 14 Aug 2025 00:00:00 GMT

I've been curious about LSDJ again and thought I'd write a different kind of post about it. If you're not familiar with LSDJ, it's a chiptune tracker (music sequencer) written to be played on a Gameboy. The project has been around for over 25 years and I think it's super cool. There's a lot of information out there about how to use it but I thought I'd write about hardware.

First and foremost, the cheapest way to tinker with lsdj is to simply use hardware you already have. You can fire up an emulator on your smart phone or whatever computer you have at hand and get started for absolutely zero dollars. The biggest downside to this approach is the complete lack of tactile feedback. I think doing gameboy shaped things on a touch screen is a bummer of a experience. It is super cool that you can and I accept that I'm super privileged to look down my nose at using my pixel pro as a gameboy. Whatever, I love me some buttons to mash. Let's go shopping!

Shopping is a slippery slope

Once you decide to spend money on your LSDJ experience, it gets complicated quickly. If you want nice buttons for you phone, you can get something like a GameSir G8, but that's like $80 unless you can catch a sale. For around $50 you can pick from half a dozen Anbernic devices that are a whole fake gameboy (retro emulation devices) to play on. Counterintuitively, that's the second most affordable way to go (first cheapest being to not spend any money at all). I have my eye on the RG35XX Pro because it has video out which seems fun for this. However, my older RG351V is still more than adequate so I'll stick to that. I bought mine for $112 three years ago but you can get them for half that price now.

But I want a real (game)boy

If you want a more authentic nostalgia hit and you don't still have your old gameboy around it's probably the single most costly way to go. I've seen gameboy advances go for about $60 - $70 at the flea market or half price books. Looking on craigslist in my area, people have lost their minds and are asking twice that. While $70 doesn't sound that steep, you can't play LSDJ on original hardware without a cartridge. Those can run another $50 or more depending on the quality/vendor/ gameboy model. So if you were to buy a new to you used gameboy and an Everdrive, you're looking at $120 - $200 to get up and running. I have a GBA SP and an OG NDS but if I was starting over and mostly interested in LSDJ, I'd look at the Funny Playing gameboy color clone. It looks like a modded GBC but all the electronics are new and you can pick up a complete for $100 or a kit for around $80. To my sensibilities, $80 for a gbc with that upgraded screen is the way to go if you want something that feels like a GBC and aren't super hung up on it actually being vintage hardware.

What about DIY!?

In 2025, that doesn't make much sense unless you're just either really interested in the experience of making one (which is great and you should do that) or want to rig up something custom. A Raspberry Pi 3 (older model that's less power hungry, runs cooler and is a touch cheaper) is $35. Already, you can buy a whole complete ready to rock BATLEXP G350 (aliExpress). You don't have a screen ($40), battery, buttons, case ... etc. If you really want to go DIY, a piGrrl kit is reasonable to look at to stay grounded in all the bits you'll need to source. The PiGrrl Zero kit is really cool and $45 (not including a pi that's another $15) but I think the screen is a little dinky at 2.2" (320x240). But for $60 you can build a complete retro portable game console which is super cool to do.

Price Breakdown of options discussed

When considering the following, do not forget that if you happen to have a Raspbery Pi sitting around or 8BitDo controller the math shifts. The most affordable option is make use of what you have. Without that context, here's an overview of where we're at with options as I see it.

Hardware Option	Cost
Just use your phone or computer	$0
User your phone and a nice controller	$30-$80
Buy an emulation device	$35 and up
DIY an emulation device	$60 and up ( ಠ_ಠ )
Buy a new to you old gameboy	$120 and beyond!

TLDR

GAS (Gear Acquisition Syndrome) is a real thing and if you want to make chiptune music you don't need to spend one red cent. Start by looking around at what you have. Hopefully some of the above rambling reminded you of something you have laying around and you can get some use out of it. Otherwise, the most affordable way to go is with a retro emulation console like one by anbernic. If you're going vintage don't forget to factor accessories into your budget.

It's dangerous to go alone, take this

I captured some of the products with affiliate links for your convenience, if you're into that sort of thing.

How To Start Vim

Thu, 24 Apr 2025 00:00:00 GMT

People joke about how Vim is hard to quit, but I want to make it easier to start. Here is a collection of resources that I believe demystify Vim to great effect.

Why to Vim?

Personally, I prefer Vim to IDEs because I'm gradually building up complexity that I mostly understand. Even if I largely copy/paste default configurations, I'm selecting each plugin intentionally. As such, I don't tend to use the richer distro-like config options like AstroNvim or LazyVim. I think they're great and will poke through their docs for inspiration. However, I want my config to be based on my opinions and enjoyed largely building from the ground up.

That's why I'd recommend kickstart as a config jumping off point. It's less opinionated about what plugins you use and more about teaching you what these hard to search concepts are. I say hard to search because if you don't know that an LSP is what drives your autocomplete... it's hard to search LSP. Beyond the wonderfully documented code found in the kickstart repo, TJ has a very accessible youtube video to introduce you to the philosophy and tools.

What is the deal with Neovim!?

I switched to Neovim back in the Vim 7 era when there were more good reasons to do so than there are now. After Vim 8 incorporated many downstream improvements, my primary reason for sticking with Neovim became Lua support. Or more precisely, my reason was to avoid Vimscript.

I didn't care to get good at a language that was only applicable in one narrow context. There are other (arguably better) reasons to use Neovim but Lua is enough for me (and I'm not even good at it).

This is my config. There are many like it, but this one is mine.

I don't advocate that you fork my repo and use it "as-is", but I offer my dotfiles in the event any part of them may spark curiosity. I do advocate that you share your dotfiles if you don't already. If that's a new to you journey, you may want to check out my post about Stow to make that more ergonomic.

You got this!

Vim can be intimidating because it's clearly a deep rabbit hole full of wonderfully wacky yaks to shave. Relax, it's just a text editor. Kickstart knocks down a few rough edges to make for a more ergonomic starting point. You don't need to understand all the concepts of Vim as a prerequisite to starting. I suspect there's a ton about your current editor that you don't know and you're fine with that. Get a little better every day and when you don't like how your workflow feels, change it.

Arduinoboy Build Notes

Fri, 27 Sep 2024 00:00:00 GMT

I've been enjoying LSDJ recently and building an Arduinoboy was the next "logical" step. I've also been itching for an excuse to mill a PCB on my CNC. This felt like a project that was just complicated enough that I'd benefit from the new-to-me technique.

On the shoulders of giants

I stumbled upon a schematic in this forum post by way of this blog post. While a PNG is not the most convenient way to express a circuit, I'm glad to have found it.

I opened the PNG in inkscape and traced it as a vector. From there, I exported an SVG to import into Fusion 360. As you convert images from one format to another be sure you don't drift away from the desired board dimensions. You're targeting a board with the dimensions of 1.875" x 1.55".

Millin' time

Once I had that sorted out, I sent it over to my MPCNC for milling.

Time to solder

Following this image, I soldered it up. Some people cut open the link cable and solder that directly. I didn't want to sacrifice the cable as a consumable so I ordered up a breakout PCB and soldered that to my milled PCB.

Link cable schematics

Since the link cable isn't a standard like USB, the pinout was one more mystery to solve. Fortunately, once again, kind strangers on the internet documented their discoveries. This picture was worth more than 1000 words to me.

source

Connections

As illustrated in the image above, the orientation of the plug assumes you're looking at it with the nubbin pointing up. The idea of top and bottom gets a little muddy as you go from one blog post to another so be careful about that.

Really you only need 3 wires: Gound, Clock, and Data Input.

--Found in this post

This table translates the data in the Link Cable image to the labels in the red schematic from the "Time to solder" section.

Plug Position	Board	Function
Bottom Left	TL	VCC
Bottom Center	TC	Serial In (SIN)
Bottom Right	TR	Clock (SCLK)
Top Left	BL	Serial Out (SOUT)
Top Center	BC	Not Connected
Top Right	BR	Ground

It's alive

Here is a shot of my custom PCB wired up to my Game Boy.

In a slick enclosure

I couldn't just leave it exposed like that. I took a little time to model a custom enclosure. Here it is all finished up!

Timeline

This was a fairly involved project that was far from paint by numbers. All in, it took right at 2 weeks of "free time" to pull it off. Here are some dates of milestones I captured.

2024-02-12 Milled
2024-02-15 Soldered
2024-02-21 Functioning
2024-02-26 In an Enclosure

Parts to consider

Links to Amazon have an affiliate tag on them. That happens to be where I do a lot of shopping and all of those components are the one's I used and can confirm worked for me.

Selecting an Everdrive

Note about your Everdrive choice, LSDJ is a Game Boy game, not GBA. If you go with the GBA, there is an emulator and you can use LSDJ through emulation. However, there's a big but there. Saving songs doesn't work in LSDJ through emulation. I own both and use them in different contexts. For the smoothest LSDJ experience, buy the Game Boy version. If you're looking to play with Stepper, that's a Game Boy Advanced game so you'll need the GBA Everdrive.

Conclusion

Building this Arduinoboy was fun and challenging. It was a good excuse to combine many interests (chiptune music, electronics, and 3D printing) in one rich project. I found it to be a great MacGuffin to learn about PCB design and fabrication. If you're considering building your own Arduinoboy, I hope you find these notes helpful!

Refactoring my Astro Gallery Component

Thu, 26 Sep 2024 00:00:00 GMT

One of the first components I wrote for this blog migration was a naive image gallery. It's pretty straight forward and got mostly got the job done, but there was a few implementation details I've been itching to improve and I recently took the time to make those enhancements. Let's dig into the details of my refactor and talk about some of the benefits of this new iteration.

How it started

Let's start by looking at the first iteration that I shipped. This component was functional, and a completely respectable thing to ship to production, but there's always room for improvement. Does anything jump out to you as problematic before you read on?

---
type Image = {
 url: string;
 alt: string;
};
type Props = {
 images: Image[];
};
const { images } = Astro.props;
---
<div class="gallery">
 {
  images.map((image: Image, index: number) => (
   <>
    <figure>
     <a href={`#image-${index}`} title={image.alt}>
      <img src={image.url} alt={image.alt} />
     </a>
    </figure>
    <a
     href="#_"
     class="lightbox"
     id={`image-${index}`}
     title="Click to return to post"
    >
     <div style={`background-image:url(${image.url})`} />
    </a>
   </>
  ))
 }
</div>

How it's going

Now, let's take a look at my recently refactored version. It's got more going on to be sure.

---
import { Image } from "astro:assets";
import type { ImageMetadata } from "astro";
type ImageData = {
 url: string;
 alt: string;
};
type Props = {
 images: ImageData[];
 path: string;
};
const { images, path } = Astro.props;
const getFullPath = (url: string) =>
 url.startsWith("./")
  ? `/src/content${path}/${url.replace("./", "")}`
  : `/src/assets/${url.replace("./", "")}`;
const imagePaths = images.map((img) => ({
 ...img,
 url: getFullPath(img.url),
}));
const imageAssets = import.meta.glob<{ default: ImageMetadata }>(
 `/src/**/*.{jpeg,jpg,png,gif}`,
);
const deriveSrc = async (image: ImageData) => {
 const source = imageAssets?.[image?.url]?.();
 if (source === undefined) {
  throw new Error(
   `"${image.url}" does not exist in glob: "src/assets/*.{jpeg,jpg,png,gif}"`,
  );
 }
 return source;
};
---
<div class="gallery">
 {
  imagePaths.map((image: ImageData, index: number) => (
   <>
    <figure>
     <a href={`#image-${index}`} title={image.alt}>
      <Image src={deriveSrc(image)} alt={image.alt} />
     </a>
    </figure>
    <a
     href="#_"
     class="lightbox"
     id={`image-${index}`}
     title="Click to return to post"
    >
     <div>
      <Image src={deriveSrc(image)} alt={image.alt} />
     </div>
    </a>
   </>
  ))
 }
</div>

Key improvements

My initial design failed to take advantage of Astro's build-time image optimization. The reason I couldn't take advantage of that was this component looked in the public directory for assets. Only assets in the src directory are optimized at build time. As I wanted my component to receive props from markdown frontmatter, relative pathing was a little tricker than I wanted to sort out upfront. Supporting this is the primary reason for all the extra complexity in the refactor.

Astro `Image` integration

The refactor starts with the introduction of the Image component from astro:assets. This is better than the native img tag for the following reasons.

Automatic image optimization
Lazy loading out of the box
Proper sizing and srcset generation

With great power... yada yada

Switching to this richer image solution comes with some complexity to get it up and running. First, I can't simply use a src string prop and call it a day. I I need to import images so Astro is enabled to do it's thing at build time. The docs make this look simple enough because they're just importing a single static asset. In my case, this gets more complicated because I want to handle this dynamically. Fortunately, a more advanced recipe introduced me to a vite method import.meta.glob to help. The following code will gather all images found in the src directory and make them available for the Image component.

const imageAssets = import.meta.glob<{ default: ImageMetadata }>(
  `/src/**/*.{jpeg,jpg,png,gif}`,
);

Flexible path handling

Access to images is only half of the equation though. I need to sort out a sensible strategy for mapping my frontmatter to this collection to retrieve the images I want. The new getFullPath function allows for this. I may build this out more later, but for now, I images relative to the markdown, or absolute by way of a designated asset directory.

const getFullPath = (url: string) =>
  url.startsWith("./")
    ? `/src/content${path}/${url.replace("./", "")}`
    : `/src/assets/${url.replace("./", "")}`;

Conclusion

When I first read about the Image component, I naively thought I'd get performance "for free". While supporting this took some additional work, both my developer experience and the performance of my site are noticeably better for having made this refactor. I'm trying to make it a little better every day.

My POSSE on Broadband

Sun, 08 Sep 2024 00:00:00 GMT

I signed up for Twitter back in 2007. It was a simpler time. It was a simpler Twitter. I really enjoyed using the service and didn't mind gradually contributing more and more content there. I became aware of the fact that this came at the cost of making less regular updates to my own blog. I made peace with that as I had more interesting conversations on Twitter than in the comments of my blog. I didn't mind essentially trading RSS feeds for Twitter lists. I traded ownership for convenience. Everything is a compromise and that felt reasonable at the time.

Today, I'm evaluating that compromise and considering an alternative. I'm trying to think of my personal site as less of a "blog" and more of a "digital garden". That's a whole other post, but the significance here is: this has reduced friction to writing for me and got me more excited to post than I've been in a while. As I create more, I think more about workflow and tooling. I want my garden to be canonical and it looks like some smart people sorted out a reasonable strategy for this by the name POSSE .

One does not simply comment on a static site

Most dynamic content management systems ship with some sort of comment feature, but that's less trivial to implement with a static site. There's a lot of ways to handle this, but I want to lean into the Webmention recommendation.

When you publish a post with links to other sites, your site can send a webmention notification to sites that accept them to inform them that they were linked to.

A webmention receiver provides discovery of their webmention endpoint so it can be found by others who link to the page. When a receiver’s endpoint receives a webmention notification, it looks up the sender’s post and may display it as a response.

Mentions mainly require a link to the recipient on the page, but they can be enhanced into more meaningful responses (such as comments, reposts, or likes) by adding microformats to the sender’s post.

--indieWeb.org

You could say there's still a compromise in that I don't "own the engagement". But, as I stated, everything is a compromise and I think I like this compromise better. I want to own my content, but I don't feel a need to own the interactions with my content. Enabling readers to comment where they like and aggregate that on my site feels like a reasonable thing to do.

Ok, but what is POSSE!?

POSSE stands for "Publish (on your) Own Site, Syndicate Everywhere." The concept is straightforward, but implementation can be a little tricky. In a nutshell though, by opting into a few microformats, you can enrich the site you control with engagement that occurs on platforms you don't.

The POSSE Workflow as I understand it

This is getting a bit abstract, so I'll reign it in with some concrete examples. At the moment, I'm enjoying publishing my content via Astro. Nothing about my workflow is unique to Astro, just the implementation details. Once you have content available on the web, sharing via a platform like Mastodon satisfies the "syndication" bit. Assuming you have your site setup to consume Webmentions, you can use Bridgy to convert Mastodon replies to webmentions that you can display on your own blog.

flowchart
    A[/Write Markdown/] --> B(Static Site)
    B --> C[/Share or Syndicate/]
    C --> D(Mastodon)
    C --> E(Pixelfed)
    C --> F(Bluesky)
    C --> G(Other Platforms)
    D --> H[/Mastodon Comments/]
    E --> I[/Pixelfed Comments/]
    F --> J[/Bluesky Comments/]
    G --> K[/Other Platform Comments/]
    H --> L(Bridgy)
    I --> L(Bridgy)
    J --> L(Bridgy)
    K --> L(Bridgy)
    L --> M(Webmentions)
    M --> B(Static Site)

    subgraph POSSE Workflow
        C[/Share or Syndicate/]
        D(Mastodon Post)
        E(Pixelfed Post)
        F(Bluesky Post)
        G(Other Platform Posts: Twitter, Facebook, LinkedIn)
        H[/Mastodon Comments/]
        I[/Pixelfed Comments/]
        J[/Bluesky Comments/]
        K[/Other Platform Comments/]
        L(Bridgy)
        M(Webmentions: webmention.io)
    end

Where do we go from here?

I'm currently folding ideas from this post into my blog. At the moment, I don't have syndication automated. I'm cautious about appearing overly promotional as I navigate this new approach. I've shared a couple posts to Mastodon and replies prove my workflow is functioning as intended.

If you find this useful, hit me up on Mastodon or Bluesky. If I have something wrong or you find a bug in my blog, I'd love to see it as an issue.

Zod makes TypeScript better

Sat, 31 Aug 2024 00:00:00 GMT

Introduction

TypeScript can be leveraged reduce certain classes of bugs, but there are still plenty of edges left exposed. Zod can elevate your type checking to make your code more bug resistant. This post will explore what Zod is, why you might want to use it alongside TypeScript, and how to integrate both into your app effectively.

What is Zod?

Zod is a TypeScript-first schema declaration and validation library. It enables you to create schemas for your data structures, which can be used for both compile-time type inference and runtime data validation.

Key features

TypeScript-first approach
Zero dependencies
Compatibility with both Node.js and browser environments
Support for complex object shapes, including nested objects and arrays
Detailed error messages for invalid data

I'm already using TypeScript, why do I need another tool!?

The two tools sound like they're addressing the same thing, but they have subtly different strengths that complement each other. If you're skeptical about typescript helping readability, I'd recommend this post that I recently wrote on the subject.

Runtime vs. Compile-time Checking

TypeScript performs type checking at compile-time, catching type-related errors before your code runs. However, it doesn't provide runtime type checking. Zod, on the other hand, allows you to perform validation at runtime, ensuring that your data conforms to the expected shape even when it comes from external sources like API responses or user inputs.
More Expressive Schemas

While TypeScript's type system is powerful, Zod allows you to define even more expressive schemas. You can easily add constraints like minimum and maximum values, regex patterns, or custom validation logic.
Better Error Handling

Zod provides detailed error messages when validation fails, making it easier to identify and fix issues in your data.

Will it blend?

When introducing Zod alongside TypeScript, I was concerned about the potential brittleness of managing two type systems. Turns out, that needn't be a problem. Zod is designed to work seamlessly with TypeScript, and when used correctly, it takes over as the single source of truth. So, yes, it's a new thing to learn. However, it's not an additional thing to maintain over time.

Efficient Workflow

Here's a workflow that leverages the strengths of both TypeScript and Zod while minimizing duplication and potential inconsistencies:

Define Zod Schemas First

Start by defining your data structures using Zod schemas. These will serve as the single source of truth for your types.

import { z } from "zod";

const UserSchema = z.object({
  id: z.number(),
  name: z.string(),
  email: z.string().email(),
  age: z.number().min(18).optional(),
});

Infer TypeScript Types from Zod Schemas

Next, use Zod's built-in type inference to generate TypeScript types from your schemas. This ensures alignment between your runtime validation and compile-time types.
```
type User = z.infer<typeof UserSchema>;
```
Use Inferred Types in Your TypeScript Code

Now you can use the inferred types throughout your TypeScript code, benefiting from compile-time type checking.
```
function greetUser(user: User) {
  console.log(`Hello, ${user.name}!`);
}
```
Validate Data at Runtime

Use your Zod schemas to validate data at runtime, especially for external inputs.
```
function processUserData(data: unknown) {
  const user = UserSchema.parse(data);
  greetUser(user);
}
```

Extend Schemas as Needed

When you need to modify your data structures, update the Zod schema. The TypeScript types will automatically update, ensuring consistency.

const ExtendedUserSchema = UserSchema.extend({
  preferences: z.object({
    theme: z.enum(["light", "dark"]),
    notifications: z.boolean(),
  }),
});

type ExtendedUser = z.infer<typeof ExtendedUserSchema>;

Benefits of This Workflow

Single Source of Truth

Your Zod schemas define both runtime validation and TypeScript types, eliminating duplication.
Type Safety

You get the compile-time benefits of TypeScript and the runtime safety of Zod.
Flexibility

Zod's expressive schema definition allows for complex validations that TypeScript alone can't handle.
Easy Maintenance

When you need to change your data structures, you only need to update the Zod schema. TypeScript types automatically stay in sync.
Gradual Adoption

You can introduce Zod schemas gradually into an existing TypeScript project, starting with the most critical data structures.

By following this workflow, you can efficiently use TypeScript and Zod together, enhancing your app's type safety without introducing unnecessary complexity or brittleness. The key is to let Zod drive your type definitions and use TypeScript's inference capabilities to bridge the gap between runtime and compile-time type checking.

Best Practices

To make the most of Zod and TypeScript in your projects, consider these best practices and common pitfalls to avoid:

Define schemas as constants
Use .parse() for unknown data
Leverage Zod's built-in methods
Compose schemas
Use .extend() for inheritance
Utilize Zod's inference for TypeScript types

Common pitfalls to watch out for include forgetting to handle validation errors, overusing .any() or .unknown(), neglecting runtime validation, and not taking advantage of Zod's error customization features.

Conclusion

Integrating Zod with TypeScript offers a powerful combination for enhancing type safety in your web apps. As you implement this approach, you'll likely find that the initial investment in setting up Zod schemas pays dividends in terms of code reliability and maintainability.

Fancy types enable simple code

Sat, 24 Aug 2024 00:00:00 GMT

Developers often claim that leveraging TypeScript's advanced type system can lead to more readable and maintainable code. While that can be the case, it's not guaranteed. If you're not careful in implementation, following the orders of a pedantic linters can feel like unwanted friction to shipping code. And worse, you could be adding brittleness more than robustness to your code. This article explores a case study in how generics and union types can improve readability by enabling inference.

Suppose you want to create a list of tags for notes. The following approach seems reasonable at first glance. It works fine because it presumes you only want to consider tags for one type of content.

Naive first draft

const tags = [
  ...new Set(
    (await getCollection("note"))
      .filter((note) => !!note.data.tags)
      .map((note) => note.data.tags)
      .flat()
      .filter((tag) => tag !== "note"),
  ),
];

I currently have two very similar content types: blog and note. They both have tags, but they're not guaranteed to be the same or stay similar beyond that.

How do I adjust this component to be usable by both?

My initial approach was to move the logic such that this component only dealt with an array of strings. There's a problem with moving the responsibility of deriving tags to the parent component, this approach is more likely to let duplication of logic to creep in. As this component is responsible for tags and not simply making a list from strings, the Tags component feels like where this logic should live.

Problematic second draft

Don't copy and paste this next bit, it's just here so I can critique it.

const { collection, baseRoute } = Astro.props;
type Collection = { data: { tags: string[] } };
const tags = [
  ...new Set(
    collection
      .filter((note: Collection) => !!note.data.tags)
      .map((note: Collection) => note.data.tags)
      .flat()
      .filter((tag: string) => tag !== "note"),
  ),
] as string[];

The good

Passing in a collection and baseRoute as Props feels like what I want. It seems reasonable to assume the parent component is concerned with a particular content type when the component is implemented, so let them declare that at that level.

The bad

The problematic bits are around that Collection type. I created it because, once I passed a collection in, all the clever type inference broke. At that point, I needed to explicitly type all the things to keep my pedantic linter happy. That's not what you want. This works as intended, but we can do better.

Note, if you find yourself using as, consider that you might be doing something wrong. Maybe you're not, but consider it. It exists for a reason, but I find I usually don't need it when I'm "done" refactoring.

Chef's Kiss third draft

The trick to getting inferred types back in action hinges around leveraging a Props interface. I'm new to Astro, but I suspect you'll want to make use of this interface more often than not. In this interface, I opted to use a type union that expresses all the collection types that I'm accounting for.

import type { CollectionEntry } from "astro:content";
const { collection, baseRoute } = Astro.props;
interface Props {
  collection: CollectionEntry<"blog">[] | CollectionEntry<"note">[];
  baseRoute: string;
}
const tags = [
  ...new Set(
    collection
      .filter((entry) => !!entry.data.tags)
      .map((entry) => entry.data.tags)
      .flat()
      .filter((tag) => tag !== "note"),
  ),
];

Alternative idea

I could have defined that union in the content config by creating a generic type, but that approach feels presumptuous and the wrong level of abstraction for my purposes. I'll have to write about why later.

Conclusion

With this final implementation, the compiler is back to inferring properly without the need to explicitly type every callback. There is no need to create that lying Collection type that is doomed to drift away from reality. Through explicitly typing a little up front, we can enjoy type safety implicitly downstream.

What the heck is Stow!?

Thu, 09 May 2024 02:31:00 GMT

Sometimes 1000 words doesn't paint a very good picture.

GNU Stow is a symlink farm manager which takes distinct sets of software and/or data located in separate directories on the filesystem, and makes them all appear to be installed in a single directory tree.

I did not read this captivating description and fall in love with stow. I stumbled into it by way of trying to solve a problem. A few months back, I overhauled my dotfiles and accidentally learned about this new to me tool. I watched a video on developer productivity by ThePrimeagen and he showed me the way of stow. He makes a lot of great points in that video, but the most profound impact on my workflow was learning about stow.

This steak deserves more sizzle

Here is the thing about that description, the importance of symlinks have to resonate with you for it to feel exciting. For me, symlinks were not a big part of my workflow. So a symlink manager didn't seem to solve a problem that I had. In retrospect, the "turns out" is that symlinks weren't part of my workflow because they're kind of a pain to manage. Have you ever needed a file to live one place, but thought it would be more ergonomic if it lived someplace else? You wanted a symlink, you just didn't realize it.

What does this have to do with dotfiles?

I don't want my home directory in source control, not all of it. But some things that live in, or near, my home directory would be great to have in source control. Stow allows me to designate a folder to be the home to my source controlled files. I happen to have that directory in my repo, but it could be anywhere. I can then, effectively, hoist them up to where my OS expects them to be via stow ..

I could theoretically set my home directory up as a git repository and maintain git ignore rules to get a similar effect. But that sounds like a pain to maintain. It is way more more ergonomic and less error prone for me to keep all of the dotfiles in a folder and set that folder up as a repo. This is the problem that symlinks solve and is a great opportunity for stow to shine.

So, how does this work?

A simplified slice of my home directory could look like this.

~/
  ├── .zshrc # symlink to .dotfiles/.zshrc
  └── .dotfiles/
      ├── .git/
      └── .zshrc # actual file

From inside my ~/.dotfiles/ directory, I can run stow . to create and maintain symlinks to the files within this directory. Any modifications done to these files are immediately reflected in the appropriate place. I just have to remember to create new files in the sub directory and stow them instead of creating them in the default directory.

What other problems might it solve?

I'm thinking about reworking my notes directory. It's a folder full of markdown that I tend to view and edit via Obsidian. To wire this up to a static generator, I'd need to introduce all sorts of dependencies (node_modules, book.toml... stuff that is not markdown) that would muck up the editing experience of my notes. With stow, it seems reasonable to tend to a static site repo in one place while I care for and feed my notes in another directory. But that, is another post for another day.

References

Stow's manual

Daily notes with zk

Mon, 18 Mar 2024 01:00:00 GMT

While Obsidian is great, lately I've been considering how to get similar affordances with alternative tools. zk looks like a nice tool to consider for a more cli driven workflow. In this post, I explore the configuration of zk to approximate the daily note workflow I currently have set up with Obsidian.

What does the template look like?

For personal stuff, I use a daily note to track habits and capture fleeting notes during and about a given day. I don't want to give the file a name or come up with a clever title each day. I also want to have some frontmatter attributes ready for consistent tracking of daily habits like meditation and playing clarinet.

---
title: { { format-date now '%Y-%m-%d' } }
created: { { format-date now '%Y-%m-%d' } }
clarinet: false
meditate: false
tags:
  - daily
---

# {{format-date now '%Y-%m-%d'}}

## Navigation

[Yesterday](/journal/daily/{{format-date (date "yesterday") '%Y/%Y-%m-%d'}}) <-> [Tomorrow](/journal/daily/{{format-date (date "tomorrow") '%Y/%Y-%m-%d'}})

## Tasks

## Notes

Now, for some configuration

I like to store my daily notes in a folder structure like journal/daily/2024/03-March/2024-03-17.md. It wasn't clear to me, as I read the documentation, how to make use of a dynamic folder structure. Fortunately, if you format the filename with slashes zk does exactly what I want.

# ~/.config/zk/config.toml
[group.daily.note]
filename = "{{format-date now 'journal/daily/%Y/%m-%B/%Y-%m-%d'}}"
template = "daily.md"

Wire up an alias to make this easy

Now, you can create a daily not with the following command zk new --group daily. That's cool, but kind of a lot to type. Back to config.toml and create an alias like so:

# ~/.config/zk/config.toml
[alias]
daily = "zk new --group daily"

Results... for now

Using Markdown Preview in Neovim shows a respectable start to a daily note.

Now, from any directory, I can type zk daily and a well-formed, properly-named,file is generated as I like, where I like.

My next step is to set up Neovim to respect this configuration when I navigate to a daily note that doesn't yet exist. However, this feels like enough for one post.

The story of my whittlin' robot

Tue, 10 Apr 2018 00:00:00 GMT

In an effort to better understand how CNC Routers work, I decided to build one from scratch. Having little confidence that I could pull it off, I came up with a plan to break this ambitious project up into a series of smaller wins.

The first step was to build a CNC mostly out of reclaimed electronics. I learned that the motors in many cd rom drives are stepper motors, so I took apart some old computers I had access to. For this build, I only needed to purchase 3 stepper motor drivers and an Arduino. For less than $50 I proved that I am able to build such a device.

With this success, I had the confidence to buy some NEMA 17 motors (at about $15 a piece) and scale the build up. This build worked mostly fine, but the motors would occasionally stick. I got the feeling my naive design was to blame. About that time, I had purchased a 3D Printer and decided to put it to work for me.

A little research revealed the MaduixaCNC. It's an open source design based on a handful of 3d printed parts coupled with fairly accessible hardware. While not perfect, this design strikes me as a fairly nice jumping off point if you wanted to make your own CNC.

In the end, I built a CNC over the course of a year for a little over $200. If you simply want to have a CNC, this may not be the most practical way to get there. It was, however a very rewarding journey. One that I'd recommend to anyone who wants to learn about how CNCs work.

CloudCannon

Mon, 22 Jan 2018 20:47:00 GMT

A client recently requested a site be set up on CloudCannon. I hadn't heard of it, so I gritted my teeth and began to read the documentation. The tension quickly washed away as I realized "this is my kind of product".

In a nutshell, CloudCannon offers a delightful patina to an otherwise unchanged Jekyll site. You don't have to code anything "CloudCannon Aware" or any such funny business. You simply set it to watch a branch on a repo and builds fire off and deploy automatically. Continuous Integration that's triggered automatically by content changes really blurs the line between dynamic and static sites.

Furthermore, they provide a user friendly markdown GUI. Often, I feel like a static site generator is more appropriate than a dynamic CMS, but don't have the budget to sort out a way to make editing content ergonomic for non-developers. Those would be great times for something like CloudCannon. This post is not affiliated with or sponsored by CloudCannon, I just think it's pretty cool.

Alexa Watson integration

Fri, 16 Jun 2017 20:47:00 GMT

Here are notes from building a proof of concept around integrating Watson Retrieve and Rank service into an Alexa skill. I'm still learning, so this may not be the best way to do it. This is simply an approach that worked for me. I'm hoping this overview will illustrate how simple it can be to leverage these two complicated sounding platforms together. If I can sort it out, surely someone as clever as yourself can too.

Retrieve and Rank

You can sign up for a free bluemix account. I'm not sure the terms or pricing as I used credentials provided by work. You can definitely kick the tires for free, but I'm not sure how far you can get with that. The underlying technology is really impressive, but the web interface and general user experience need some love. IBM has great documentation that walks you through the training process, but I'll provide a high level overview. Check out the official documentation when you're setting up the service for yourself.

Create a Cluster

This dubiously named step fires up a solr instance to which you'll upload documents. You can upload a variety of formats to the Documents tab that will be used as source material to answer questions. By default, html documents are broken up into something called "Answer Units" based on the placement of Header tags. So, if you have non-semantic html, your milage will vary. Also, the more content you have between header tags, the more verbose your answer will be. You probably want your answer to be fairly terse since they will ultimately be consumed via a robotic voice.

In the Questions tab you can upload a plain text list of training questions. After some questions have been uploaded, this tab will also be used to pair questions with relavant "Answer Units" in the uploaded documents. As I understand it, before training, you get solr responses. Then, you rate the answers on a 4 star rating which adds some meta data to enhance the search results.

Simple node.js CLI

Now that my data was trained, I wanted to test it in the simplest way possible. So I built a tiny node.js app to hit the service from my command line. IBM released a node module that enabled me to do this in about 20 lines of code.

var RetrieveAndRankV1 = require('watson-developer-cloud/retrieve-and-rank/v1');

var retrieve = new RetrieveAndRankV1({
  username: '',
  password: '',
});

var solrClient = retrieve.createSolrClient({
  cluster\\\_id: '',
  collection\\\_name: ''
});

// search all documents
var query = solrClient.createQuery();
query.q(process.argv[2]);

solrClient.search(query, function(err, searchResponse) {
  if(err) {
    console.log('Error searching for documents: ' + err);
  } else {
    console.log("The best answer I have to: ", process.argv[2]);
    console.log(JSON.stringify(searchResponse.response.docs[0].body, null, 2));
  }
});

With that I could fire off requests via node index.js "How many cups of sugar does it take to get to the moon?" and Watson's answers would print to the command line.

Alexa Skill

Armed with the ego boost of a successful HelloWorld, I converted that CLI into a module like so:

var RetrieveAndRankV1 = require('watson-developer-cloud/retrieve-and-rank/v1');

var retrieve = new RetrieveAndRankV1({
  username: '',
  password: '',
});

var solrClient = retrieve.createSolrClient({
  cluster\\\_id: '',
  collection\\\_name: ''
});

function watsonHelper() {
}

watsonHelper.prototype.query = function(question) {
  // search all documents
  var query = solrClient.createQuery();
  query.q(question);

  solrClient.search(query, function(err, searchResponse) {
    if(err) {
      console.log('Error searching for documents: ' + err);
      return '';
    } else {
      console.log(JSON.stringify(searchResponse.response.docs[0].body, null, 2));
    }
  }).then(function(){
    return JSON.stringify(searchResponse.response.docs[0].body, null, 2);
  });
};
module.exports = watsonHelper;

I then required that helper in an Alexa app heavily based on based on a template app provided by the Alexa team.

'use strict';
var \\\_ = require('lodash');
var Alexa = require('alexa-app');
var app = new Alexa.app('NameOfYourSkill');
var WatsonHelper = require('./watson\\\_helper');

app.launch(function(req, res) {
  var prompt = 'Ask me questions, I'll answer them from the Cloud.';
  res.say(prompt).reprompt(prompt).shouldEndSession(false);
});

app.intent('askQuestion', {
  'slots': {
    'QUESTION': 'QUESTION\\\_LIST'
  },
  'utterances': ['{QUESTION}']
},
function(req, res) {
  //get the slot
  var question = req.slot('QUESTION');
  var reprompt = 'Sorry, not an instant win! Please try again.';

  if (\\\_.isEmpty(question)) {
    var prompt = 'I didn\\\\'t hear a question that I know. Please ask differently.';
    res.say(prompt).reprompt(reprompt).shouldEndSession(false);
    return true;
  } else {
    var watsonHelper = new WatsonHelper();
    var answer = watsonHelper.query(question);
    res.say(answer).send();
  }
});

//hack to support custom utterances in utterance expansion string
console.log(app.utterances().replace(/\\\\{\\\\-\\\\|/g, '{'));
module.exports = app;

I uploaded that to lambda and went through the alexa configuration wizards and all was well.

Custom Slots and Utterances

Since Watson would be doing all the heavy lifting, I only have one utterance. The utterance is about as simple as they come, I pass the whole user string as QUESTION.

askQuestion {QUESTION}

Since I had a list of plain text answers hanging out that were used to train watson, I pasted this list into a Custom Slot of Type QUESTION\\\_LIST. A clever coworker commented that this is an optional step, but considering the list is already compiled, I used it. Custom slots can help Alexa sort out speech to text ambiguity like homonyms and poor enunciation.

That wasn't so bad

That's really all there is to it. There's not a lot of custom code needed for an app like this because most of the really impressive bits are handled via Amazon and IBM. All you have to do is wire it up with a little javascript that should look mostly familiar.

Caveat

This proof of concept started out with the hope that we could dump existing documentation into the Watson's service and we'd get instant robot tech support. This did not happen for 2 main reasons, both related to the source material.

Semantic markup

The documentation html that I received didn't make use of header tags as you'd want. It was a funky custom accordion with divs and custom classes. Since these custom classes didn't reveal any hierarchy, I opted to update the markup with appropriate header tags.

Verbose answers drag on in robot voice

Bear in mind that since "Answer units" are delineated by header tags, an answer is as long as all the text between header tags. In my sample data, some answers were acceptable, and other felt to drag on for an eternity. These answers were correct, but this is not a great user experience.

CLI Driven Drupal

Tue, 13 Jun 2017 20:47:00 GMT

It's easy to get Drupal up and running by clicking around http://drupal.org, downloading and extracting packages, but that's not how I do it. Like all respectable developer tools, you can get Drupal up and running nearly entirely from the command line. This used to be done entirely with a tool called Drush, but now more of Drush's responsibilities are being offloaded to the more general php tool composer. Here's a run through of how to get a Drupal instance running via the terminal.

Set up your database

Before attempting to run the install script, you'll want to create a mySQL database and user with access to it.

Set up a vhost

I'm on a Mac and tend to use the Apache that ships with the OS. As such, I edit my vhosts like this:

sudo vim /etc/apache2/extra/httpd-vhosts.conf

<VirtualHost *:80>
  ServerAdmin [email goes here]
  ServerName [local url goes here (eg drupal.dev)]
  DocumentRoot [path to drupal instance]
  ErrorLog "/private/var/log/apache2/drupal.dev-error_log"
  CustomLog "/private/var/log/apache2/drupal.dev-access_log" common
  <Directory [path to drupal instance]>
    AllowOverride All
  </Directory>
</VirtualHost>

Be sure to change everything in square brackets to something more appropriate for your environment, and if you use MAMP or homebrew installed Apache, you'll need to edit a conf file in a different location.

Update your hosts file

sudo vim /etc/hosts

Add a new entry like:

127.0.0.1 drupal.dev

Download Drupal core via composer

If you don't have a strong opinion about Drupal distributions, I'd recommend using lightning as a starting point. This is a sensible batteries included build that includes additional modules that have been vetted by Acquia. You can install this via composer with the following shell command.

composer create-project acquia/lightning-project MY_PROJECT
cd MY_PROJECT/docroot

Use Drush to install the site

At this point you can visit the http://drupal.dev (or whatever local domain name you configured above) and step through the installation wizard. Or, better yet, use the following shell script to install via drush in the command line. Note that I pass flags with db, user and password below. You'll need to customize the site-install line.

drush site-install standard --db-url='mysql://drupalTest:drupalTest@localhost/drupal-test' --site-name=Example --account-name=ryan --account-pass=drupalTest

Tweak config (hopefully optional, but I had to)

Something about my mySQL set up forced me to update the host value in sites/default/settings.php. I had to change localhost to 127.0.0.1. Then, all was well.

Update file permissions

chmod -R 777 sites/default/files

May want to clear cache for good measure

Since we have to manually adjust write permission to the files directory, and that's where all sorts of theming goodness is built, you probably have broken website until the next cron job runs.

drush cache-rebuild

Profit

Congratulations, you installed Drupal!

Prerequisites

Here are a few tasks you'll need to do before setting up Drupal if you haven't yet.

Install Drush

Drush is one of the killer features of drupal. Be sure to install that right away if you haven't already.

Raise memory limit for composer

The default is 128M which was not enough. Check your limit with php -r "echo ini_get('memory_limit').PHP_EOL;"

If you haven't adjusted yours in the past, update `memory_limit` in your php.ini.

My file was found at /usr/local/etc/php/5.6/php.ini

If you don't know where your php.ini file is, run php --ini

Set your timezone in php.ini

See above for how to locate your file, there is a timezone field commented out by default.

Styleguide Thoughts

Tue, 17 Jan 2017 20:47:00 GMT

A properly leveraged styleguide can be a great communication tool between designer and developers. Furthermore, they can keep scope down by promoting reuse and ultimately keep a project's style more consistent. If not leveraged properly, they can be little more than a vestigial artfact. Here are a few things to think about to ensure you're not just going through the motions.

Strategy

We're making gears, not snowflakes.

Focus on the fact that you're building a system and not a poster.
Components should be stress tested early, not simply displayed in an idealized context
Consider the best case scenario or ideal context
Don't ignore the worst case scenario (it will happen)
Example: How does the search result page look if there are no results or only 1? Don't simply think about when it has the same number of results as columns that you plan to use.
Displaying high fidelity layouts is necessary to a point. Be realisitic about that point.
Layouts really only exist in a styleguide to test your components.
Beyond that point, usefullness drops off drastically and producing them becomes wasteful busy work.
The point of the excercise is to establish patterns. Deviate when needed, not at whim
Have a solid reason to deviate from established patterns
Communicate that reason

Tactics

Develop early, deploy often

Focus on making it easier to reuse elements than to deviate from established patterns.
Photoshop (styles and libraries?)
Illustrator/ Sketch (symbols and styles)
Code (partials or whatever your framework of choice calls such modular components)
Create channels to communicate deviations from established guidelines.
Is this deviation an oversite?
Is it a proposition to update the guidelines globally?
Is this instance unique for some reason warranting an exception
Only populate as many layouts as you need to evaluate contexts for components ot exist within.
Layout a blog post... don't layout all the blog posts
The number of unique layout conditions should be pretty small
Do this in code, not photoshop (Content placement in Photoshop tends to be a waste of time and sets bogus expectations).

Jekyll Simply

Tue, 10 Jan 2017 20:47:00 GMT

I was talking with a coworker about my recent jekyll reboot. He had a handful of questions that lead me to believe that the official documentation may be a bit overwhelming to someone new to Jekyll. There are many ways you can configure Jekyll and many ways to cultivate a rich content strategy on top of it. What isn't imediately obvious is: what's the least I need to do to benefit from Jekyll.

To help illustrate that point, I put together a quick repo (source, demo) minimally configured to get a site built for github pages. This project is complete with default configuration overrides, nested layouts and Sass compliation. And, not much else. Hopefully, this slimmed down example project will help you see the benefits of Jekyll without getting too overwhelmed with the embarassment of features that you likely don't need on day 1.

Don't call it a comeback

Wed, 04 Jan 2017 20:47:00 GMT

In an effort to avoid distraction and get right to writing, I chose to move this blog to Jekyll. It's a simple enough tool that lets me draft posts in Markdown. I'm drafting this post on my phone as I pace the floor trying to get my youngest to take a nap.

The major, potential, downside with choosing Jekyll is: I'm not familiar with it. It is, however, made with familiar stuff. I don't know if it's the perfect tool, but that fits the tone of this blog and may give me more content to write about.

Why Jekyll?

As I mentioned before, Jekyll sites are built from a collection of plain text markdown files. This means I can write posts in any text editor of my choosing. I don't need a special app to get work done (although, I am enjoying Mr. Hyde Android app). I don't need to set up a CMS or blog platform on a server. All the software needed to make it work runs in my phone.

Why not Drupal?

Drupal has been my CMS of choice for years, and I still like it better than any other CMS that I've used. For this largely neglected blog, I found myself spending more time running security updates than writing blog posts. At one point, failing to run updates fast enough left me vulnerable for an attack. Proper care and feeding of a CMS is not a hobby that I care to take on. I'm drawn to a simpler approach.

How is it built?

While hosting via Github Pages is the simplest way to host a jekyll site, I opted to host my blog on my Rackspace server. This left me needing to sort out a deploy/ build strategy if I am to publish from my phone. While I can run the build script in Termux to generate html, or remote into my server and use my phone as a terminal, I opted to set up Jenkins to build and deploy on my behalf each time the master branch is updated on Github. I'll likely go into more detail on those tools in future posts.

AEA Debrief: The Developer's Ampersandwich

Thu, 13 Mar 2014 19:08:10 GMT

At An Event Apart in Atlanta, Jenn Lukas, presented a developer’s perspective on design for the web. Here’s a collection of take aways that resonated with me.

Lukas makes a point that often gets overlooked. Good design is part of good craftsmanship. Good design isn’t necessarily all that tightly coupled with subjectivity, fashion, taste or any other magical factors that tend to be associated with design. The fact that there are design fundamentals, means you can achieve good design logically.

Bootstrap your typographical knowledge

Like any deep subject, typography can be rather intimidating to get started with. Just because you didn’t enjoy the Helvetica documentary doesn’t mean you’re doomed to create tacky web sites if unaided by a “proper designer”.

“Blah blah blah… Verdana for headlines, Georgia for body copy… type type type blah blah blah.” — Jason Santa Maria (as paraphrased by Jenn Lucas)

You can do a lot worse than simply stick to a limited pallet of trusted typefaces. Not sure what a “trusted” typeface is? Lukas has a hack for that. In her presentation, she presented 5 lists of the top 10 fonts on various font services. These are what the pros are using. These fonts are used for a reason. You don’t need to understand that reason. You can always learn it later if you care. Don’t be afraid to follow a trend if you don’t know any better. Emulation is often an early phase of learning.

Google Fonts most popular fonts

Open Sans
Oswald
Droid Sans
Roboto
Lato
PT Sans
Open Sans Condensed
Droid Serif
Ubuntu
PT Sans Narrow

Typekit favorite fonts

Museo Sans
Adelle
Proxima Nova
Museo Slab
Futura PT
Raleway
Myriad Pro
Museo
Freight Sans Pro
FF Tisa Pro

Fonts.com top fonts

Trade Gothic
Neue Helvetica
Avenir Next
Univers
Avenir
Proxima Nova
Gill Sans
Frutiger
Futura
Helvetica

Typewolf top fonts

Open Sans
Apercu
Brandon Grotesque
Montserrat
Futura
Avenir
Inconsolata
Roboto
Gotham
Proxima Nova

Net Magazine showcase top fonts

Futura
Proxima Nova
Open Sans
Brandon Grotesque
Atrament Web
Roboto
Museo
Archer
FF Tisa Web
Arvo

Looking at her list, I found it interesting that there was a bit of overlap between the different services. I made this list of fonts that show up on more than one of the above list:

Cross service top 5 (plus one) fonts

Futura - 4
Proxima Nova - 4
Roboto - 3
Open Sans - 3
Brandon Grotesque -2
Avenir - 2

Familiarize yourself with web font limitations

This is important for designers and developers alike. Test and share font-families via the browser early in the process to make sure selected fonts will work for your audience before design approval. Don’t for get that “Fixing” a problem in one browser can make things worse in another. Leave plenty of room for QA.

“… sometimes they look just ridiculous on windows machines. It’s a bit better with IE10 but geez oh man. It’s enough to make a well designed website look like crap.” — Jason Head

CSS Preprocessors/Variables Are Your Friend

Variables in Sass (or whatever preprocessor you prefer) have a very friendly syntax for setting variables:

$red: #ff0000;
$headline-font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;

Use a text file containing these variables to communicate colors and typographical information between designers and developers. Attributes shared via a list of like this are far less likely to get lost than by using the type tool and eyedropper in a Photoshop document. Also, if this list gets cumbersome, it’s a good smell that maybe some simplification is in order.

There’s a lot of talk about the importance of designers learning to development. There is an equally strong case to be made for the inverse.

AEA Debrief: Faster Design Decisions with Style Tiles

Wed, 12 Mar 2014 16:50:04 GMT

At An Event Apart in Atlanta, Samantha Warren made a case for why style tiles should be added to your back of tricks. Here’s a collection of take aways that resonated with me.

A major point of Warren's talk is that style tiles are a communication tool. It's as simple as that, and as fundamentally crucial as that. We need to evaluate how we discuss web design and how we define success. Adopting style tiles doesn't mandate any particular changes to your creative process. The big shift is what you present to clients and how conversations can evolve to be more productive and distraction free as a result.

Stop presenting multiple fixed width comps to clients

It is a good idea to separate style from layout when getting approval from clients (even internal ones). This is increasingly true as layouts get more complex with responsive layouts. The abstraction from layout brings clarity to conversations. Style tiles will help you to generate a definition of success that is separate from taste. There needs to be a better design artifact than what we, as an industry, currently produce and accept.

Design systems, not pages.

Design is about problem solving, not decorating. Style tiles help us to generate a definition of success that is separate from taste. They also tend to be device width agnostic so they tend to yield better conversation around responsive projects. Avoid the siren's call for a big reveal. You are not Don Draper and shouldn't aspire to be. Communicate early and often to get better results.

"A beautiful design system is about finding the same balance of consistency & variety." —Yesenia Prez-Cruz

Why is that better than moodboards or mockups?

There are a few tools that offer similar benefits to style tiles (or, attempt to). These options tend to get a bit conflated. Warren brought up key differences between style tiles, moodboards and mockups.

Moodboards

Warren explains a moodboard as a tool for setting the "mood". Best for when you are discovering and establishing a new identity for a client while designing a website. Concepts & emotions. Works great for web startups. Warren's Goldilocks issue with moodboards is that they are too vague.

Mockups

If moodboards are less than ideal because they're high level and vague, let's evaluate the alternative. We can skip all that touchy feely throat clearing and jump right to mocking up the project. This works for really low budgets or sites that are being refined rather than redesigned. In other words, mockups work if expectations can somehow be set. Warren's Goldilocks issue with mockups is that they are too precise.

Tribal knowledge mileage may vary

Why do you follow the process that you do? Is it because it yields great results quickly? Is it simply the way you've always done it, because someone once told you it is "how it's done"? Style tiles or not, that's the path to madness. We need to evaluate our process from time to time. Do things for a reason and be watchful for truthiness that may shroud your process. We work in a young industry, it's naive to think we know "the right way" of doing things.

AEA Debrief: Designing Using Data

Tue, 11 Mar 2014 20:47:00 GMT

At An Event Apart in Atlanta, Sarah Parmenter encouraged designers to use data to inform the decision making process. Here's a collection of take aways that resonated with me.

Parmenter opened up by referencing a polarizing post recently made by Jeff Croft. In his post, Croft states that web designers need to diversify their offering. In fact, he concludes with: “Diversify or die” . It's a bold statement that ruffled feathers, but Croft doesn't give much guidance on how or in what direction designers should diversify.

“Instincts are experiments. Data is Proof.”

Parmenter picked up where Croft leaves off by proposing that data is a valuable asset for designers. One that should no longer be dismissed as someone else's responsibility. When the decisions you make are based on real world observations of users and there habits, you're more likely to see success.

“…designers go from decorators to problem solvers.” — Aarron Walter

Armed with metrics from a successful redesign, you can qualify the value of your efforts with hard numbers. People want to believe that design is valuable, collecting data enables you to prove it.

“Nobody has an excuse to make an uninformed decision anymore.” — Federico Holgado

She argued that collecting data has never been simpler. Then, backed that up with a laundry list of services that focus on collecting and presenting information about your site's traffic:

Separate the wheat from the chaff

There's a lot of data out there to be observed. Not all of it is helpful. Parmenter lumped all data that can not, directly, be used to make a decision into the category of vanity metrics.

“Making your numbers go up (any numbers—your bmi, your blood sugar, your customer service ratings) is pointless if the numbers aren't related to why you went to work this morning.” — Seth Godin

In addition to that rule of thumb, she presented a list of vanity metrics that tend to be particularly seductive to naive data enthusiasts:

hits
total signups
page views
number of visits
unique visitors
likes

“Many designers who are skilled technicians, craftsmen, or researchers have struggled to survive in the messy environment required to solve today’s complex problems. They may play a valuable role, but they are destined to live in the downstream world of design execution.” — Tim Brown

Design is not simply making things pretty. Start grabbing data to validate your efforts.

The best Android todo app - Simpletask

Wed, 24 Jul 2013 00:00:00 GMT

I've been using Todo.txt for a little while now. I love it for it's minimalism. Simpletask is a more polished approach to Todo.txt. It has some nice additions like grouping tasks by project and more configurable widget. Simpletask on Play

Runners-up

Todo.txt

There is nothing wrong with this app, it just doesn't have some of the niceties of Simpletask. You should gladly give Gina the $2 for coming up with Todo.txt.

Todo.txt on Play

Trello

While not what I'd pick for independent task management, Trello is great for collaboration. I use both Simpletask and Trello daily.

Trello on Play

Simplicity?

Tue, 23 Jul 2013 00:00:00 GMT

When talking about the pursuit of simplicity, there tends to be at least one naysayer. "That's fine for you, but my problem is, at it's essence, complicated." The conversation then shifts to unearth how this person is failing to simplify his product. I think the "...but my problem..." part is a smell that the goal is a touch oversimplified.

Shooting for simple is an admirable goal. It's not unlike recommending people stick to Helvetica, when in doubt. It's a fine default strategy if you don't have a compelling reason to do something else. It's not, a one size fits all solution.

Case in point: puzzles

I like solving puzzles. What is a puzzle? Whether jigsaw or crossword, all puzzles share at least one thing in common. Someone worked rather hard to make a relatively mundane task far more difficult to achieve. That's what makes them fun.

Clarity

I think what people are really talking about, really trying to achieve, is clarity. Here's the rub: simple things are easier to explain clearly. If you can make something simpler, clarity tends to follow. This can make the distinction tricky. It's important to realize the difference when you're asked to tackle a problem that is inherently complex. It's not a design failure if you can't make a complex thing simple. It is, however if you can't explain it clearly.

Design is hard

Design is more than regurgitating Jakob Nielsen soundbites. Appropriate solutions are found when context has been taken into consideration. Sometimes, it's complicated... and that's what makes it fun.

The best Android text editor - Draft

Thu, 18 Jul 2013 00:00:00 GMT

Contrary to popular belief, Android users like nice things too. There are a lot of text editors on Android and I spent a bit of time and money trying them all out so you don't have to. I believe Draft is the best. It has a beautiful interface with support for Markdown and DropBox. What more could you ask for?

Draft on Play

Runners-up

Lightpaper

Lightpaper is great for all the reasons listed above, but the interface is a little more complicated than I need. I suspect I'd feel different if I were using it on a tablet.

Lightpaper on Play

Fetchnotes

Interface is gorgous and simple, but there's no way to get your notes out of the app. My text wants to be free. Also, the letterboxed splash screen screams that this app was ported from iOS.

Fetchnotes on Play

Setting up Middleman and Anvil with RVM

Wed, 17 Jul 2013 00:00:00 GMT

I’m a big fan of designing with code, design in the browser or… whatever you want to call it. Middleman and Anvil work out as a nice pairing to create an efficient workflow. The rub is they don’t play well together without a touch of configuration up front.

In the documentation

middleman init my_new_project --rack

The missing bits to make Anvil (pow) work

rvm --create --ruby-version use 1.9.3

rvm env . -- --env > .powenv

Bob’s your uncle

In Anvil add your project by clicking the “Plus” icon and navigating to your new project’s directory

This configuration is out there, but not all in one place. I’m wrote this so I can stop Googleing for the same thing everytime I start a new project.

Getting a Rails app set up for Heroku

Fri, 07 Jun 2013 00:00:00 GMT

I find myself daisy chaining a few blog posts together to get up and running with Rails. Here are the steps that I took most recently to deploy to Heroku.

Initial setup

Create your app.

rails new [appName] -d postgresql
git init
git add .
git commit -m "initial commit"

Make help Pow and RVM play nice together.

rvm env -- `rvm current` > .powenvmk

Create your databases locally.

psql
CREATE DATABASE [appName_environment]
\q

Add the Sass version of Bootstrap and follow the instructions at https://github.com/thomas-mcdonald/bootstrap-sass.

gem 'bootstrap-sass', '~> 2.3.1.3'

Create your first resource

Generate the scaffold and set up your database.

rails g scaffold [resourceName] title:string body:text
rake db:create
rake db:migrate

Set up your default route (/config/routes.rb).

root to: 'newsletters#index'

Remove "/public/index.html".

Make Heroku happy.

Change this in "/config/application.rb"

config.assets.initialize_on_precompile=false

Change this in "/config/environments/production.rb".

config.assets.compile = true

Create the heroku project.

heroku apps:create [app-name]
git add .
git commit -m "Ready for heroku"
git push heroku master

Piece of cake!

That should yield a good jumping off place for most apps. Don't forget to duplicate the Heroku create steps for a staging environment. You'll thank me later.

The story of my first Rails app

Sun, 02 Jun 2013 00:00:00 GMT

I’ve been using Ruby for a little while now. Mostly, making little tools to automate bits of my workflow. Each time client work came up, I’d “chicken out” and build it with Drupal. Here’s the story about how I accidentally made my first Rails app.

The devils I knew

Drupal may not be the most efficient way to solve some problems, but I’m rather familiar with it. Also, I’ve hosted many php sites over the last decade. It is pretty much a “it just works” situation. When I’m tackling a web project solo, I tend to stick with Drupal, for just that reason.

Recently, I was tasked with enabling someone to make html emails. The rub was, she didn’t know html and had no desire to change that. Ultimately, the approach we decided on was a static site generator living locally. The app would compile a folder full of markdown files into a single html document with the proper styles injected inline.

It made sense for it to not be a web app. She already wrote here content locally in a plain text friendly manor. She’d then throw that over the wall for someone to convert it to html. Now, she could simply run a command that would eliminate the need of a human to do that conversion. Then, she could paste the code that the app yielded into the web app that delivers the email. I spent a couple of days configuring Middleman and thought I had a pretty nice solution.

It worked on my box

I sit down to her iMac and type “gem install bundler”. All was well. It wasn’t until I typed “bundle install” that the problems started. First off, can you believe she didn’t have Xcode installed!? After discovering a handful more of missing resources, I could tell she was not comfortable with all the command line fidgeting. I needed to host this tool as a web app.

Is Rails appropriate?

At first, I thought Rails was overkill. However, the more I thought about it, the more this app needed. She was not keen on learning how to FTP, let alone use Git to transfer files to a server, so I needed to hook it up to a database instead of text files. If it’s out there on Heroku, I’ll need some sort of log in system. After a few rounds of “If you give an app a cookie”, I decided that Rails was probably the path of least resistance for me. I could add all the missing bits to Sinatra, but what’s the point in that?

Square 1 is not square 0

I started building a fresh app, but I was still able to use much from my static site generator code. It was written in Ruby, after all, so much of the logic ported over directly. The templates were in Haml, so that was no problem either. Ultimately, it was a rather smooth transition and I had the site up and running in less than a week.

So, I was seduced into making my first Rails app for a client. It was not completely without issue, but what project is? Now that I’ve traversed the divide from zero to one, I look forward to creating more Rails apps.

Solving a problem with code

Wed, 02 Jan 2013 00:00:00 GMT

I was looking for a good excuse to learn CoffeeScript so I came up with a project that takes a note and returns the blues scale in that key. It’s not a completely contrived example, I currently work this out manually using the matrix that I posted on my music blog. I thought it would be interesting to list out the process by which I solve this moderately complex problem.

Start with thinking

Since I already do this in a manual way, I thought a bit about the steps I currently take. First, I look at my grid of notes and find the note I want to use as my root. Then, I count over to find the relevant notes that make up the rest of the scale. I figured that this was a fairly logical way to find scales, so I’d try to model my script after this. I can always change direction if this turns out not to be straight forward.

Knock out the easy parts

Since the way you count notes is weird with sharps and flats mixed throughout, I simply copied the information from my chart into arrays like this one

["Ab","A","Bb","B","C","Db","D","Eb","E","F","Gb”,”G”]

Looking at that, I decided I’d like to display the notes in 4 different ways. Notes with flats, notes with sharps, and Roman numeral notation of both. Now I have this:

I won’t spend a lot of time on music theory, but it may help to explain that the relationship between notes in the minor blues progression is: I,IIIb, IV, Vb, V,VIIb. That means that the blues in the key of “G” makes use of the notes G, Bb, C, Db, D and F. I decide at this point it makes sense to come up with the following variables:

I = root IIIb = root + 3 IV = root + 5 Vb = root + 6 V = root + 7 VIIb = root + 10

If the numbers that I add to rootIndex don’t make sense at first, take a look at the numeralFlat listed above.

Make a basic function

Although I’m only looking for the minor blues progression, I can easily imagine wanting to find more progressions later. Because of that, I’ll call the function “bluesScaleMinor”. It will need to take at least one argument so that the user can pass in the root note. At this point my little script looks like this:

numeralFlat=["I","IIb","II","IIIb","III","IV","Vb","V","VIb","VI","VIIb","VII"] numeralSharp=["I","I#","II","II#","III","IV","IV#","V","V#","VI","VI#","VII"] flat=["Ab","A","Bb","B","C","Db","D","Eb","E","F","Gb","G"] sharp=["G#","A","A#","B","C","C#","D","D#","E","F","F#","G"] bluesScaleMinor = (root) -> I = root IIIb = root + 3 IV = root + 5 Vb = root + 6 V = root + 7 VIIb = root + 10 notes = [I,IIIb, IV, Vb, V,VIIb] console.log (bluesScaleMinor 1)

It doesn’t handle letters or Roman numerals yet, but we’re making good progress. This will take one number then give you an array of that number plus the other 5 numbers increasing by the amounts that we want.

Make it a little bit better

The most obvious problem with our code at this point is that it only accepts numbers. Since we have a valid list of notes in our flat array, this is pretty easy to correct with this line:

rootIndex = flat.indexOf(root)

Then get the notes in the scale with:

for note, i in notes notes[i] = flat[note]

This sheds light on a bit of trouble with our logic so far. If we were to use the letter “G”, we’d get [11, 14, 16, 17,18, 21]. This doesn’t work because we only have 12 notes in our array. So we need to come up with a way to force our numbers to be between 0 and 11. This is can be done simply with:

for note, i in notes if note > 12 notes[i] = note - 12

Mostly working code

Let’s take a look at the code we have so far.

If we run this in the terminal, it returns exactly what we want. Success! However it could stand to be better. For instance, what if someone wants sharp notation or to simply view the Roman numeral notation? The only part of our code that forces us into flat notation is this part:

for note, i in notes notes[i] = flat[note] Let’s cut that bit out and create four new functions like these: toFlat = (scale) -> for note, i in scale scale[i] = flat[note] toSharp = (scale) -> for note, i in scale scale[i] = sharp[note] toNumeralFlat = (scale) -> for note, i in scale scale[i] = numeralFlat[note] toNumeralSharp = (scale) -> for note, i in scale scale[i] = numeralSharp[note]

Now all we need is a mechanism for using the right one at the right time. A switch block makes sense to me so I make this function:

setDisplayType = (scale, display) -> switch display when "flat" then toFlat scale when "sharp" then toSharp scale when "numeralFlat" then toNumeralFlat scale when "numeralSharp" then toNumeralSharp scale

We’ll also need to add a second argument to our bluesScaleMinor function so we can pick a “display type”. A sensible default for this argument is “flat”, that’s what I want pretty much all of the time. This leaves us with the following:

numeralFlat=["I","IIb","II","IIIb","III","IV","Vb","V","VIb","VI","VIIb","VII"] numeralSharp=["I","I#","II","II#","III","IV","IV#","V","V#","VI","VI#","VII"] flat=["Ab","A","Bb","B","C","Db","D","Eb","E","F","Gb","G"] sharp=["G#","A","A#","B","C","C#","D","D#","E","F","F#","G"] bluesScaleMinor = (root, display = "flat") -> rootIndex = flat.indexOf(root) I = rootIndex IIIb = rootIndex + 3 IV = rootIndex + 5 Vb = rootIndex + 6 V = rootIndex + 7 VIIb = rootIndex + 10 notes = [I,IIIb, IV, Vb, V,VIIb] for note, i in notes if note > 12 notes[i] = note - 12 notes = setDisplayType notes, display toFlat = (scale) -> for note, i in scale scale[i] = flat[note] toSharp = (scale) -> for note, i in scale scale[i] = sharp[note] toNumeralFlat = (scale) -> for note, i in scale scale[i] = numeralFlat[note] toNumeralSharp = (scale) -> for note, i in scale scale[i] = numeralSharp[note] setDisplayType = (scale, display) -> switch display when "flat" then toFlat scale when "sharp" then toSharp scale when "numeralFlat" then toNumeralFlat scale when "numeralSharp" then toNumeralSharp scale console.log (bluesScaleMinor “G”)

One more problem with our logic

If we run this with either of the Roman numeral display types we don’t actually want them to loop around. Roman numeral notation is always relative so the root is always “I”. I’ll add a quick fix is to set the rootIndex to 0 when someone picks a Roman numeral display type. Here is our final code.

numeralFlat=["I","IIb","II","IIIb","III","IV","Vb","V","VIb","VI","VIIb","VII"] numeralSharp=["I","I#","II","II#","III","IV","IV#","V","V#","VI","VI#","VII"] flat=["Ab","A","Bb","B","C","Db","D","Eb","E","F","Gb","G"] sharp=["G#","A","A#","B","C","C#","D","D#","E","F","F#","G"] bluesScaleMinor = (root, display = "flat") -> if display is "flat" or "sharp" rootIndex = flat.indexOf(root) else rootIndex = 0 I = rootIndex IIIb = rootIndex + 3 IV = rootIndex + 5 Vb = rootIndex + 6 V = rootIndex + 7 VIIb = rootIndex + 10 notes = [I,IIIb, IV, Vb, V,VIIb] for note, i in notes if note > 12 notes[i] = note - 12 notes = setDisplayType notes, display toFlat = (scale) -> for note, i in scale scale[i] = flat[note] toSharp = (scale) -> for note, i in scale scale[i] = sharp[note] toNumeralFlat = (scale) -> for note, i in scale scale[i] = numeralFlat[note] toNumeralSharp = (scale) -> for note, i in scale scale[i] = numeralSharp[note] setDisplayType = (scale, display) -> switch display when "flat" then toFlat scale when "sharp" then toSharp scale when "numeralFlat" then toNumeralFlat scale when "numeralSharp" then toNumeralSharp scale console.log (bluesScaleMinor “G”)

That’s enough for one blog post. I’d like to finish this up and create a demo site soon. I’m only learning CoffeeScript, so I’m sure there are more elegant ways of solving this problem.

Illustrator for web layouts

Fri, 07 Dec 2012 00:00:00 GMT

Illustrator has some fantastic layout tools that are often overlooked by web designers. Here is a screencast overviewing some of the reasons Illustrator is in my workflow. I cover Split Into Grid, Text Wrap, Paragraph Styles, Transform, Graphic Styles and Appearance Panel.

Illustrating on the iPad

Mon, 19 Nov 2012 00:00:00 GMT

Up until recently, I've been reluctant to do much sketching digitally. This month, I found the perfect excuse to explore a purely digital process. I’m currently taking part in an event called 30 Characters in 30 Days. There’s not much more to the challenge than the title suggests. Participants are simply tasked with creating 30 unique characters in the month of November.

I decided to make things a bit more interesting by using many different illustration styles and even new tools that I’m not familiar with during this challenge. It’s been a great excuse to spend more quality time with my iPad. I thought I’d take a moment to share my thoughts on a few of the new tools I’ve added to my arsenal.

Painting & Sketching

I’ve spent a bit of time sketching in SketchBook and it’s great. It’s arguably the most popular painting app out there. I like this app a lot, but have read good things about a competitor. I decided to give procreate a go. I think I like it more. The interface for procreate is more opinionated that Sketchbook, which I mostly (eventually) agree with. Having quick access between brush, smudge, and erase is excellent for getting ideas down quickly. I do wish the space used for undo and redo could be reassigned to color toggling since undo and redo have gestures. For quick value studies, I found the placement of the brush size and opacity sliders perfect. So far, I’ve completed 4 illustrations with procreate and sketched out 2 others to be completed in other apps.

Vector

I would suspect if someone wasn’t already familiar with Illustrator, they’d not miss it if they had Inkpad. As an Illustrator user, I found a few uncanny valley issues frustrating, but I mostly enjoyed the process. Some actions (like grouping) felt laborious since they required navigating a menu (can this be mitigated with gestures?). I was definitely less productive on the iPad that I would have been with Illustrator on a computer with a mouse and keyboard. Most importantly, I did like the results. I’ve only completed 1 illustration with Inkpad, but there’s still 11 days to go.

Pixel Art

For crafting pixel art, I have found the app Sprite Something delightful to work with. It makes pixel art far more fun. It is a bit frustrating to not have layers for positioning elements, but that just leads to a bit more thoughtfulness in the initial mark creation. I’ve already made 6 pixel character illustrations and have cut myself off from making more for the competition. I do however plan to spend much more quality time with this app in the future.

I do still tend to prefer sketching on paper rather than Paper, but there is a lot to be said for introducing digital tools to your workflow. I’m really warming up to the iPad as a content creation device. Now, I need to get my hands on a pressure sensitive stylus.

Baseline grid in Illustrator

Thu, 10 May 2012 00:00:00 GMT

I recently wrote about an easy way to set up a grid in Illustrator. While that way is great for setting horizontal rhythm, I follow a different method for creating my baseline grid. This couldn't be simpler thanks to the Transform Effect.

Select the Line Segment Tool (\)
Click anywhere on the canvas
Enter 1024 for length and make sure the angle is set to 0
Give the path a sensible color
Use the Transform Pallet to position the line at the top left corner
Menu > Effect > Distort & Transform > Transform
Let's set a 24px baseline grid by entering 24px in Move > Vertical. Then, enter 32 in the "Copies" input area.

That's all there is to it. At this point, you can change your baseline via the appearance pallet. I tend to not turn my baseline grid lines into guides because I rarely want to snap to them. If you do want to turn them into guides:

Select the group of lines
Menu > Object > Expand Appearance
Menu > View > Guides > Make Guides

The only thing missing from this is a more sophisticated baseline text alignment like InDesign has, but this is all you really need for wireframing.

Easy on the polyfills

Sat, 28 Apr 2012 00:00:00 GMT

It’s not that important to teach older versions of IE how to handle media queries. The point is to make layouts work on small screens. I don't know of any cell phones running IE6. As an alternative to using polyfills, I tend handle legacy IE with conditional comments. The only trade off for this is, IE < 9 users can’t change the layout by fiddling with the window size. I can live with that. Here is how I use Sass to eliminate the redundancies associated with this kind of browser sniffing.

Wrap all of the styles that would be declared within the laptop sized media query in a mixin. Then, call that mixin from inside a media query. No magic so far, just using a mixin in lieu of copy and paste.

_laptop.scss

@mixin laptop {
  [all of your laptop size styles go here]
}
@media only screen and (min-width: 992px) {
  @include laptop;
}

Next, I call the same mixin from within an partial made just for old versions of IE. Finally, I link to that stylesheet from within an IE conditional comment.

_ieLT9.scss

@include laptop;
// That is likely to be the entire contents.

IE conditional comment

<!--[if lt IE 9 ]>
  <link rel="stylesheet" href="/path-to/css/ieLT9.css" media="screen, projection">
<![endif]-->

That’s it. Now you don't have to worry about keeping your layout changes in sync across nearly identical sheets. Old browsers get a sensible layout. Best of all, we didn’t have to use any javascript.

Horizontal grids in Illustrator

Mon, 23 Apr 2012 00:00:00 GMT

Here are the steps I take to efficiently sketch out grids in Illustrator. The best part is: step 6 can be revisited at any time and modified, should you change your mind or want to experiment further. This kind of flexibility is quickly winning me over to Illustrator for wireframing.

Create a 1024px X 768px document
Select the Rectangle Tool (M)
Click once anywhere on the canvas
In the Rectangle Tool Dialog, enter 960px X 768px
Use the Align Pallet to center the rectangle with respect to the Artboard
Menu > Object > Path > Split Into Grid
Enter whatever numbers you like. Illustrator will attempt to adjust other numbers to help you out.
Now, you should have a group of paths and a bunch of paths outside of that group. Rename the group “Guides”
Select the paths not in the “Guides” group and group them
Rename the new group “Boxes”
Hide the Boxes Group. You don’t need these anymore, but if you change your mind about the grid, you can select all of them and go back to step 6. How awesome is that!?
The “Guides” group currently contains a bunch of paths with no strokes. To make them actual guides, select them all and Menu > View > Guides > Make Guides 13.Rename that layer “Horizontal Grid”

That’s all there is to it. It looks like a lot of steps, but you get really fast at it. I like using the “Split Into Grid” dialog to find my grid when I’m still working out how wide I want my gutters to be. I find it to be an invaluable tool.

Mobile mockups in Illustrator

Sun, 15 Apr 2012 00:00:00 GMT

The Illustrator pixel is a majestic beast quite hard to pin down. The very nature of vectors makes the idea of a 300px by 300px document kind of silly. All you really know is it's a square. You can take the same document you create in Illustrator and export it as big or as little as you like and it will look perfect (Some exceptions apply. See offer details. Your experience in scaling vectors may vary). A thing that frustrates many Illustrator newbies is that Illustrator displays documents as though they are 72dpi when viewing them on the screen.

Since your monitor is almost certainly not 72dpi, this makes Illustrator less than convenient for previewing digital assets on the screen. For this reason I think the most sensible thing to do is declare your documents in inches instead of pixels. Then, go about your business. You only need to sweat the math at three points.

When you want to create a raster assets, make sure you use File > Save for Web & Devices and input the proper pixel count you want to get back.
If you want to view the mockup "actual size" on your monitor, zoom to a degree derived from this familiar looking formula: [Monitor Resolution]/[Document Resolution] = Zoom. For instance, if you have a 96dpi monitor and a 72dpi document (all Illustrator documents), you would want to zoom by 133% to see the document "actual size".
When you need to express the size of something in dp, simply multiply the size in pixels by .45 ( 72/160, since Illustrator always assumes 72dpi).

If you liked this, you may want to want to read my recent post about Android's density independent pixels. Hopefully this little bit of math helps to demystify the size discrepancies that frustrate many designers new to Illustrator.

10 Drupal modules you should be using

Tue, 10 Apr 2012 00:00:00 GMT

I make a lot of websites with Drupal. Since I do this a lot, I've been spending time working on a way to speed up and/or automate the process as much as possible. This ~~distraction~~ project had the fortunate byproduct of the following list.

This is a list of modules that tend to make it into every Drupal project I build these days. These modules are mostly about extending Drupal as a CMS, so they'll enhance just about any kind of site. They are the modules that will make your admin users happy and likely reduce the support calls you get (making you happy).

Markdown Filter - Markdown is a great compromise between WYSIWTF editors and expecting users to learn HTML. It's also faster to write even if you do know HTML.
Typogrify - It's unreasonable to ask mortals to type the necessary html to create proper quotes.
CCK Blocks - Hide fields from the body of the content and display them in a block someplace. This is a great tool for making more interesting layouts to showcase custom content types.
Menu Block - It does more, but I mostly use this to create separate navigation elements that are bound to one trail of links.
Block Class - Add arbitrary classes to blocks.
Block Title Link - Handy for linking a list of teasers to a view
Webform - I like this better than the core contact form because it saves all entries to the database.
Scheduler - Create an unpublished node and cron will publish later.
Menu Trail By Path - Usually does exactly what I need for keeping the menu path preserved.
Backup and Migrate - Let the robots back up your content. This module not only makes backups, but also prunes your backups on a schedule you set.

I made a point to not list any of the top 10 most downloaded modules, because I figure those are easy enough to find on your own. Let me know if you find this useful.

What is the point of dp?

Sun, 25 Mar 2012 00:00:00 GMT

I've been reading up on Android interface design lately. One thing that has jumped out at me as counter intuitive is the concept of "density independent pixels" or dp. At first, I was very excited to see that Google was working to provide a way for designs to "just work" on all devices. Then, I read up on how it works.

The math

According to documentation you can convert px to dp with the following formula: px = dp *(dpi/160)

Math nerds can probably already tell that this isn't likely to quite "do what it says on the tin". At least, not if you intuited the same goal of the dp that I did. I'll plug in a couple of numbers to illustrate the problem.

HTC Rezound

The HTC Rezound has a 4.3" screen with 720px X 1280px resolution at 342dpi.

width in dp = 720/(342/160) = 337

Galaxy Nexus

The Galaxy Nexus has a 4.65" screen with a 720px X 1280px resolution screen at 316dpi

width in dp = 720/(316/160) = 365

Wait, that doesn't seem right. Does it? If we are defining a 720px X 1280px resolution in density independent terms shouldn't they result in the same size? I got more than a little hung up on this. Then, I tried the following.

Droid Razr

The Droid Razr has a 4.3" screen with 540px x 960px resolution at 256 dpi

width in dp = 540/(256/160) = 338

There is the clarity I was looking for! The Droid Razr's dp count is the same as the HTC Rezound because they have the same physical dimensions regardless of the pixel count (or density). Density independent pixels don't help you translate dimensions freely between many device sizes, they simply are a unit bound to a physical size yet separated from resolution. They work much the same way a pt is always 1/72 of an inch regardless of resolution of your printer.

Is that helpful? Maybe, but not nearly as helpful as what I imagined it would be. At least now we understand the purpose of the dp. Soon, I'll show you how to make this bit of information useful in Illustrator and uncover the first feature of Fireworks that made me think about switching from Illustrator. But that... is another post.

Vim tip: Fun with tags

Sun, 08 Jan 2012 00:00:00 GMT

HTML can feel unwieldy and inefficient to edit. There are lots of great tools and alternate syntaxes that make this easier... but who wants to set up a whole framework and all the dependancies that come with that just to be more efficient. With a basic Vim command and the surround plugin you can greatly increase your productivity traversing and manipulating tags.

Say, for instance, you have:

<ul>
  <li>something</li>
  <li>something else</li>
</ul>

… and you want to make these list items links.

Place your curser inside the list item
Type vit. This will visually (v) select the text inside (i) the surrounding tag (t).
Now type s <a href="#" > and the surround plugin wraps the selected text with anchor tags

I find that the surround plugin is an excellent companion to the sparkup plugin.

CSSOff recap

Sun, 06 Nov 2011 00:00:00 GMT

I recently competed in UnmatchedStyle’s CSSOff competition where frontend developers each took a crack at marking up the same Photoshop document. Submissions are to be judged based on a list of parameters including: semantics, resource optimization, legacy browser support and general code cleanliness. We were encouraged to use HTML5 and tasked to support browsers as old as IE6. Here are some observations I made during and since the competition. For the TL;DR crowd, I have a version of my entry hosted in the lab and I uploaded the source to github.

Whose design is it anyways?

The biggest difference between this cometition and a regular day at the offce for me was, I never markup a design some one else created. Oftentimes, I let pending logistics of markup inform my design decisions. I don’t think that this harms my designs, but it certainly shapes them to an extent. With this project, there were design decisions that seemed to have been made just to throw a monkey wrench at my markup. This was a lot of fun to deal with as I found myself leveraging CSS in ways outside of my confort zone.

Physical challenge

In an attempt to force myself to keep my code as concise as possible I opted to not use Compass & Sass this time. I really missed it while creating the ieLT9 style sheet. I only used one third party bit of code, Remy Sharp’s HTML5 Shim. This enabled me to easily use new HTML5 elements with IE6 support.

Is it bigger than a breadbox?

Knowing that I’d be judged on project size had me far more mindful about lines of code than I usually am. I always strive to be as concise as (practically) possibly, but with this project I was really sweating the numbers. It was interesting to find out that I wrote a little over 500 lines of CSS to style around 200 lines of html. Furthermore, it was enlightening to see that after just 440 lines of CSS handled all the style and layout for all contexts for screen sizes, I had to write an additionally 113 lines of css (not to mention how many hours to think up those 113 clever lines) just to make the layout deprecate nicely for IE6. This could really be a nice bit of data for anyone striving to make a case for dropping support for outdated browsers.

Squeeze play

I also spent a lot more time thinking about image sizes than I usually do. When browser stats warrant support of IE6, I tend to simply serve 2 copies of images. I’ll generate 24bit pngs for browsers that can handle them and gifs for those who don't. For this contest, that would have double dinged me on project’s total size (not something that usually matters in the real world). This prompted me to work on seeing how good I could make legacy browser safe 8bit pngs. This mindfulness ultimately lead to much smaller file sizes across the board.

Showcase

I’m not sure when the judging will be complete. Win or lose, I’m curious to see what kind of score my project gets because, all in all, I didn’t handle this project very much differently than I approach most projects. This competition was a great learning exercise and a lot of fun.

Rule them all

Mon, 15 Aug 2011 00:00:00 GMT

Here is a quick tip that comes in handy for me all the time. I like to work out ideas analog. A frustration I have with notebooks, in general, is that lined and graph paper tend to be of inferior paper quality than sketchbooks. My solution is to create my own graph or ruled paper and place them behind my sketchbook sheets so that I can see the lines through the page in the same way a calligrapher would. Ruled or graph paper is easier to create with Illustrator than you may think.

Here’s how I do it

First, create a new document the same size as your notebook. For this example I'm going to use 8.5in x 11in. Next, select the line segment tool or simple  press ‘\’. Then, click in the top left corner of your document. Clicking one time with this tool selected will cause an options prompt to appear. Enter the width of your document as the length and confirm the angle is 0 (for a horizontal line).

Confirm your line is in the right place by looking at the text boxes above your document. The ‘X’ value will most likely be half the document’s width, ‘Y’ should be 0, ‘W’ should be the document’s width and ‘H’ should be 0.

Now for the magic

With the line segment selected click Effects > Distort & Transform > Transform from the menu.

The values you’ll need may vary depending on your needs. Here is what you’d need for ruled paper with lines a quarter of an inch apart.

That’s it

There are more creatively fulfilling things you can accomplish with the transform tool, but that is another post.

Stealing the underpants

Wed, 15 Jun 2011 00:00:00 GMT

A few weeks ago, I decided it was time to start blogging, again. I sat down to my computer, loaded up my blog and realized that I needed to relaunch my blog first. After all, I had rushed this iteration of the blog together in a hurried attempt to match the business cards that I had painstakingly designed. I had never come back to apply the last bit of fit and finish that I told myself I would. My blog was still powered by Drupal 6! Drupal 7 has been out for nearly a year now. How could I possibly sit down to write under such conditions?

Weeks later and I’m still tinkering with the leading and column counts. I'm still trying to figure out how many layouts I want in my responsive cascade. I'm doing just about everything but writing. Today, I put all of those distractions aside, opened a text editor and started mashing away at the keyboard. Finally, I started step one.

Susy at first blush

Wed, 27 Apr 2011 00:00:00 GMT

Susy looks to be a very nice tool for making cleanly marked-up grid-based sites. It's one of the many new compass plugins that are floating about these days. It doesn't claim to be an out of the box layout, and that's what makes it such a strong candidate for a real life solution.

From the start, Susy is highly configurable. This means you're not stuck with a column count that is tightly coupled with your grid system (I'm looking at you blueprint). This leaves designers unburdened with a bunch of mundane math, while still free to use uniquely appropriate grids. The project can be found at https://github.com/ericam/compass-susy-plugin

Initial response to Sass

Wed, 02 Mar 2011 00:00:00 GMT

I really want to like Sass, I have tried to pick it up a couple of times. Granted, each time I have played with it thus far, has been a fairly short interval. My most recent forray with it underscored why I think it hasn’t quite stuck with me yet. My markup/coding conventions seem to inherently solve most of the issues that Sass tackles.

Things that seem redundant

One of the benefits of Sass is, it makes it easy to keep style derived classes out of your markup. An example being, if you use blueprint (or some other modular css library) you may be tempted to add these predefined “style centric” classes to your markup. Instead of this, you could use Sass mixins. The assumption here is that people simply attach classes to their elements willie nillie. I may do this in the prototype phase of creating a layout, but ultimately I remove all that stuff. In the end I add the element’s semantic class to a chain of classes in various style blocks in the in the css file.

.clearfix, header, .container, ...{
  [clearfix styles]
}

It would be nice to be able the skip the phase where I fold the semantic classes back into the modular style sheet. However, that in and of itself, is not the most compelling of reasons as it comes together rather quickly.

Things I’d like from SASS

Another strength of Sass is the ability to add logic to your CSS. This sounds like a dream come true, until I realize the discrepancies of how I want to use logic in my CSS and the way that Sass provides. The first thing I hoped to use Sass for was converting px measurements to ems. Ultimately I'd like to think in pixels and let the style sheet be written in ems. Along those lines, the first mixin I wrote was to the effect of:

@mixin scaleFont($target, $context){
  font-size:#{$target/$context}em;
}

That works, as long as $target and $context are provided in the same unit of measure. The rub is, once you apply this mixin, the resulting element would have it’s new context expressed in ems. This means, if you wanted to use the result of this as your new context, you need to know the new target in ems. This doesn’t actually solve the problem where stepping between cascades of contexts makes it hard to keep track of what “1em” means at any given point. What I’d really love is a way to do something to the effect of:

@mixin scaleFont($target){
  font-size:#{$target/this.context}em;
}

Furthermore, it would be epic if Sass (or some other solution) could tell more about the element being targeted (border-bottom-width, line-height…). Imagine being able to write a style that was intellegent enough to subtract a bottom border from the line-height automatically to maintain your vertical rhythm for you. Along those lines… wouldn’t it be great if firebug displayed the effective size, in pixels, when displaying what “em” dimension something was?

Maybe I just haven’t played around with Sass enough at this point. Do you have any good approaches where Sass comes closer to solving these conversion/ rhythm issues? I’d love to hear how Sass helps you.

Let go and let cloud

Sat, 19 Feb 2011 00:00:00 GMT

I’m a renting kind of guy. I rent my apartment, I rent movies and I rent the comments on my podcast. I rent things that I don’t want to be burdoned with storing or maintaining. Sovereignty is old fashioned. There are many great services out there that solve all sorts of problems so you don’t have to. There’s freshbooks for invoicing, Basecamp for project management, Shopify for commerce, Twitter for… uh… tweeting, and Disqus for comments.

Why not?

A common concern about using a third party solution is “What if they go out of business or turn evil?” Lots of people will see high profile sites like Mashable or Engadget using Disqus and get the warm fuzzy feeling of endorsement. I was convinced well before those sites started using Disqus. All it took for me was for this company to not make an attempt to hold my content hostage. They make it super easy to take your ball and go home if you’re not happy with they way they are doing business. This is very important to me. While I don’t want to “own” my comments today, I can imagine a scenario in the future where I might change my mind. That chance alone could be enough to disuade me from using a service.

This is pretty good food for thought if you’re making a service that derives value from the content being created within. It may be rather tempting, conventional wisdom even, to wall off user’s content. There are many savy users that may never try your service to begin with if your terms are too onerous.

It’s not about you

Typically when people talk about deciding to use a service the focus is on “build versus buy”. I’d like to talk about some less mentioned reasons to let someone else do a bit of the heavy lifting for you. I do a podcast, the podcast’s site is powered by Drupal, but the comments are powered by Disqus. I could just as easily check a box and use the default comment solution that ships with Drupal. I use Disqus because I am focused on improving the experience of my listenters. I love that this company is obsessed with making it easy for end users to leave comments. Developing a better comment system isn’t how I want to spend my time, but I’m glad it’s how they choose to spend theirs.

Assumptions…

I want to make it easy for listeners to leave comments. By the very nature of podcasts, it’s hard enough to get comments. People tend to listen to them on devices while they’re commuting, exercising or otherwise not at a computer ready to type. On the off chance someone does come back to the site (maybe to check out the shownotes) and they feel compelled to leave a comment, what are they greeted by? If this is the first time they’ve wanted to leave a comment, a registration form. They’ve never been here before, they aren’t sure if they’ll ever be back. Is it really fair to expect them to fill out a list of fields… wait for a confirmation email… bounce over to their email client… follow that link back… enter a captcha key (that is only marginally more legible to humans than it is to robots)… all so they can type “nice post!” I’m exhausted just thinking about all those steps.

Disqus is a distributed comment platform. If a listener has already posted to another site that uses Disqus, they already have an account and are ready to leave a comment on my site. If they don’t have a disqus account, they can sign in with twitter or facebook credentials. If they happen to not have either of those (I believe half of everyone with internet access has a facebook account), they can post a comment simply by using an email address. How could it get easier for users?

Nail it to the perch

There are two last take aways I’d like to underscore. First, if you’re working on an app, focus on your core competancies, main differentiators, and primary goals. For all of the complexity that falls outside of those things, consider using someone else’s solution instead of building your own. If someone else has built a business on something that you consider a tertiary goal, they are most likely way more passionate about it and equally likely to be doing a better job than you have time or budget to implement. Secondly, don’t be so certain that steps are necessary just because they are often assumed. The easiest way for you to make a process simpler for your users is to eliminate as many steps as you can. This removes work for you and your users.

First look at WPF

Mon, 24 Jan 2011 00:00:00 GMT

I just finished the first day of a three day course I’m taking on WPF. I have looked at it briefly from time to time, but this is the first real attempt at picking up the skill. If you’re not familiar with WPF it is a relatively new way of writing user interfaces for .NET apps. I’m hoping that with a stronger understanding WPF, I’ll be better equipped to both design desktop apps.

As far as I’m concerned the most interesting bit of WPF is XAML. After years of writing front-end code in HTML, my various attempts at picking up Win Forms felt ham-fisted. XAML is a bit of a “through the looking glass” kind of experience for me as it’s logically similar to HTML while syntactically different in every way. It’s refreshingly familiar because, if you squint at it just the right way, it resembles bad HTML. Following along the sample code in this particular course book, I find myself building matryoshka doll interfaces not unlike building websites from nested tables. Also, all of the styling to this point has been declared inline.

I’m hoping that this is simply “quick and dirty” code examples and not “best-practices” for WPF front-end development. For the time being I’m just going to follow the conventions in the book, but for future projects I’ll definitely be investigating more elegant approaches.

Out of my element

Mon, 06 Sep 2010 00:00:00 GMT

I recently resolved a server performance issue. Here’s a recap of what I went through in hopes you find it useful. I’m running Ubuntu on the smallest Rackspace Cloud Server available (too much foreshadow?). The server has 256MB of ram and it’s sole purpose is to run Drupal on Apache. I have set up a few servers in the past, but I do not claim to be an expert. This recent problem had me stumped for a while.

The Symptoms

Soon after Apache was started (or restarted), all was well. Over time the server would continue to grow slower. When the server was most bogged down, running “free -m” would show that all of the swap was in use. Running “ps aux --sort -rss” revealed that all of the memory was, in fact, being used by Apache.

This bit of information didn’t strike me as very valuable since I was hoping to just shut down whatever was using all of the memory. If any other service was using all of the memory I’d shut it down… but Apache is the whole reason the site is up. The fact that the server seemed fine at first, then got progressively worse, made me think memory leak. I was wrong.

The Resolution

Reluctantly, I opened a chat with support. I assumed the chat would be a waste of time (based on previous experiences with other hosting providers I have dealt with in the past). I assumed that I would get a response to the effect of: “There are too many variables in a server for us to trouble shoot this issue. Might I suggest our more expensive option?” This was not my experience.

Jordan C. shot me a handful of links to posts where people outlined ways they needed to reconfigure Apache for running on less than 512MB. I did not realize that 256MB was frugal enough to require special configuration. Since I have never set up a server with less than 512MB of ram, I've never needed to fuss much with the default configuration of Apache. I was used to Apache just working.

The links that proved most helpful for me were on shortens.net and vpslink.com. After sniffing around the internet and a little trial & error this is the bit of configuration that ultimately fixed my particular issue.


<IfModule mpm_prefork_module>
    StartServers          5
    MinSpareServers       5
    MaxSpareServers       10
    MaxClients            100
    MaxRequestsPerChild   500
</IfModule>

While “fanatical” sounds a little strong, it’s not his job to help me configure Apache. Jordan didn’t provide a lot of trouble shooting, but the links he provided nudged me in the right direction. Before following these links I was in the frustrating position of not even knowing enough to ask (or google) the right questions. Now, I can get back to making things.

Who would have thought? It figures

Tue, 24 Aug 2010 00:00:00 GMT

While it’s not shocking that someone snatched up the talent of 280 North, who aquired them (more to the point why) brings a smile to my face that can only be conjured up by sweet… sweet irony. Motorola (the hardware company) has aquired a startup “dedicated to advancing the state of the art on the web.”

280 North is probably most notable for creating Cappuccino, “an open source framework that makes it easy to build desktop-caliber applications that run in a web browser.” The framework and team are quite impressive, but why would a phone manufacturer care? According to a Motorola spokesperson states, “We believe 280 North will be instrumental in helping us continue to foster the Android ecosystem with innovative web-based technologies and applications.”

280 North is a team that so whole heartedly loves the way Apple products come together, they reimplemented Cocoa and Objective-C in JavaScript. Motorola has recruited a brilliant, Apple-enthusiast, team for the betterment of Android. I wonder if they’ll be trading in their iPhones for Droids.

One size never fits all

Tue, 17 Aug 2010 00:00:00 GMT

While it is nice that new smartphones can render virtually any website reasonably well, we are remiss to not take context into account. Is “reasonably well” really your end goal? I have been dipping my toe into making this site more optimized for mobile consumption by serving up some size delineated styles. I wanted to share a couple of notes on my approach.

Early on, I was seduced by the siren’s call of tools that offered a “native experience”. Frameworks like iWebkit and jQTouch promised to make my website look less like my website and more like a native iPhone app. At first, this seemed awesome. Doubly so, considering how easy either tool was to leverage via the the way drupal handles multisite installs. Under closer consideration, however, I found two big issues with this approach. First, I didn't want my site to look like a generic app… I wanted it to look like my site. Secondly, looking like a generic iPhone app on an Android phone seems even less optimal. Don’t get me wrong, these frameworks are super impressive… as long as what you’re trying to do is create a usable interface with minimal effort. Most websites are, at least to some extent, about marketing. Blending in is not the first priority.

Enter media queries. Overriding some of the layout and letting most of the style persist seems to be the path of least resistance. We need to regard webkit based mobile browsers more as damage control for users than a crutch for creators. Mobile isn’t the future anymore… it has been the present for quite some time.

My favorite 10 Android apps

Mon, 14 Jun 2010 00:00:00 GMT

I’ve been talking to more and more people about what apps are good for the Android platform. These are the 10 I use the most. They’re in no particular order other than the first one is probably my favorite. If I didn’t post your favorite app, drop it in the comments.

Locale

This is a stellar app that lets you automate tasks on your android phone based on all kinds of contexts. The simplest example is my phone turns itself to silent when I approach the office. A more robust example would be: when I am home, it's after 11pm and my phone is plugged in… it turns itself to silent. Beyond adjusting the volume (which would be enough) locale can trigger things like: post to twitter, change the brightness, change your wallpaper…

BeyondPod

The best podcast aggregator I have tried… and I have installed many of them. Syncs with Google Reader so you can manage your feeds from any computer also that makes your opml portable so you don't get locked in if you want to try a different aggregator.

Aldiko

This is an ebook reader that can import any (non-DRM) ebooks you have or download from the thousands of public domain books.

Twitter

The official twitter app is becoming my favorite twitter app. Even if you prefer another, you should install this one and turn off notifications so that you get the os addons such as listing recent tweets near your contacts.

Voice

Visual transcriptions of voicemail is a huge boon. It saves so much time (even though it is far from perfect).

Audible

It's beta, but It's out there. Audible is pretty much the only way to buy audiobooks and now they have an android app! My phone is complete.

Dropbox

Need I say more?

AppBrain

Install AppBrain on your phone and it pings a webapp so you can more easily manage your apps from your computer.

Astrid

The best todo list app I have seen. Simple interface, syncs with Remember The Milk, free and opensource.

Ringdroid

This is a sound file editing app for creating ringtones right on your phone. Android already lets you use any audio file as a ringtone, but this app lets you cut just the snippet you want for custom ringtones.

Drupal: My $0.02

Wed, 16 Sep 2009 00:00:00 GMT

I have been using Drupal for projects here and there for 5 years. Really, once I found Drupal I haven't looked back… much. At the time I was using Mambo, and there was no easy way (or, at least I didn’t know how) to override modules to make completely table-less layouts. This coupling of markup and functionality drove me to look elsewhere. I love Wordpress, and would recommend it for anyone wanting to set up a blog. However, if you are need a customizable platform for handling different kinds of content, I found it lacking in a handful of places. Some of these issues have been addressed, some are being addressed. At the time, Drupal had what I needed. Now, I am converted.

"All content management systems suck,
Drupal just happens to suck less."

— Boris Mann at DrupalCON Amsterdam, August 2005 {: .citation}

When I found Drupal I was unaware of web development frameworks. In hindsight, when I think of what I was looking for in a CMS, I realize I was looking for a framework. Drupal fit the bill pretty well. In general, I find Drupal to be a very extensible solution that allows me to have semantically acceptable markup. The down side: although most all of the presentation can be overridden and customized as much as you like, most of Drupal’s default markup is pretty cludgy. The justification for the divitis is… it is easier for non fronted developers to skin a site by ignoring copious superfluous hooks than to figure out how to add a missing hook. I strongly disagree with this philosophy. In fact, this is probably one of the bigger reasons that drives me to consider alternatives.

One thing I would like to highlight is the fact that I use Drupal to make customized content management systems. I use Drupal because it’s community has solved a majority of the problems associated with this kind of goal. If about to embark on a totally new and different kind of web app, I would probably not use Drupal as I doubt it would continue to be the path of least resistance. That said, CCK + Views + Taxonomy = FTW! I am not a developer, I don’t even play one on a podcast, but with 2 contrib modules and a couple of overridden .tpl.phps Drupal is ready to handle most any task I can throw at it.

Relatively timeless web design books

Sun, 29 Mar 2009 00:00:00 GMT

On multiple occasions the topic of “Where to start” with web design has come up. There are many blogs out there covering the topic of web design/ frontend development, here is a good start to creating the ultimate web design bookshelf.

On Skinning Cats

Mon, 26 Jan 2009 00:00:00 GMT

Very few problems can be solved in exactly one way. By “skinning” I mean “styling” and by “cats” I mean “websites”. Clearly, every problem can have more than one solution. Few places is this more true than with web design. Sure, there can be a best practice workflow. Or, an information architect can engineer the most efficient layout. But, the creative bits, where the brand starts to enter into it can always be solved many ways. So my advice to designers is… keep that bit to yourself.

If you are like I was, when you are dealing with a client, the first thing you do is pitch about 3 designs. The one you like, the one you think they want (that you are less in love with) and something else quite different as a hail mary.

Now the problem of alacart web design begins. Where the client likes the color pallet of one, with the navigation of another and images from a third (and could you make the logo bigger). In the end what you can have, if you're not careful, is a frankenstien of committee approved “design”. where the whole is less than the sum of all parts.

Solution. Just pitch the pick of the litter. If you don't think they will like your favorite design… think about why. Is it because the client's subjectivity will tend a different way or because the solution is not appropriate for the target audience? Why is it your favorite? Again is it your subjectivity… or do you realize it is the most appropriate for the target audience. Now that you have evaluated the design as objectively as you can… defend it. In theory you were selected because you are some sort of professional. Your client should appreciate your ability.

How to be #1 on google

Fri, 23 Jan 2009 00:00:00 GMT

Through long hours of careful study, I believe I have unlocked the powers of winning at Google. It would appear the trick is much simpler than my intuition would have lead me to believe. I've discovered a pattern throughout the internet and I will share it with you here.

Write a blog post called "How to be #1 on google"
Count your money

Virtually OK

Fri, 23 Jan 2009 00:00:00 GMT

I just attended a Social Media Club Meeting where David Hinds gave a lecture titled "How to Grow Vibrant Virtual Communities". Hinds has definitely spent some time thinking about social behavior on the web and some of the things he said really got me thinking. I'm not sure how often he presents, but if you get an opportunity to hear what he has to say on the subject, I would recommend giving him your ear (especially if you are new to the subject). Just be sure to think critically. Here's my two cents on this particular talk.

Before the presentation started, I made the assumption that "Virtual Community" would be mainly referring to the fact that the community in question is not one of geographic proximity. I was all ready to defend against the contemptuous use of "virtual" to lessen value of relationships based on physical distance. However, this turned out not to be what Dr. Hinds was talking about at all. What he discussed was at most virtual and barely a community. The definition of Virtual Community in the context of this presentation is this: Population of individuals with shared or complementary interests who interact across a host platform. By this definition, ebay buyers and sellers qualify as being in a virtual community. Multiple times, it came up that Hinds accepts the fact that members of a Virtual Community do not and shall never know much of anything about each other. To me, this lack of intimacy seems like a challenge that needs to be overcome, not a characteristic that should be accepted.

Hinds listed 7 types of virtual communities with examples:

Socializing (Facebook)
Gaming (Everquest)
Content Sharing (youTube)
Knowledge Sharing (wikipedia)
Activism (Move On)
Development (Linux)
Exchange (ebay)

When inquired from a viewer about a community embracing more than one of the above listed characteristics, Hinds advised against. Stating, a virtual community should only strive to address one of the seven. In my humble opinion, the communities that thrive the strongest are the ones that incorporate most (if not all) of these realms. One instance of this is open source software. Most successful open source projects have a strong evangelical user base that helps each other succeed. At a glance you can see development, activism, knowledge sharing, content sharing, and socializing. There's 5 without even really needing to think about it too much. Not to mention if you count aggregating street cred/good karma as having a bit of a gaming aspect. Additionally community members could sell their services to complete the virtual community bingo cover all round.

Hind's presentation was certainly not a step by step system for growing a vibrant community, but there was plenty of food for thought. To me, it seems, if you want your community to really shine, you should work hard at removing the virtual parts.

This productivity thing is a fad

Mon, 19 Jan 2009 00:00:00 GMT

I like the concept of productivity as much as the next guy (assuming the next guy isn’t David Allen{: target="_blank"}). That said, I have recently returned from the torpor of spending large quantities of free time reading about productivity instead of actually getting things done. If you're into reading about productivity, I recommend you check out what Merlin Mann has to say about it on 43 Folders.

Personally, paralysis by analysis is my biggest hurdle to getting things done. As such, productivity blogs/books/systems to ponder are probably not where my salvation lies. Furthermore, spending time researching productivity to get more time is like trying to get rich by clipping coupons. I’m not exactly arguing that productivity is a bad thing, just that I’m not sure it should be such a high priority. For creative workers… doubly so.

If I’m always working on scratching “important” items off my todo list, I’ll never purge all of the fun stuff that is buried down on my someday/maybe list. Those are the excursions that often times spawn unique solutions for many would be mundane challenges. I’m not relinquishing my trusty moleskin, I’m just going to start filling it with creative bits instead of priorities.

5 Similarities of the fold and mullets

Mon, 13 Oct 2008 00:00:00 GMT

It recently occured to me that there are more than a couple similarities between these two unfashionable things. Here is the long and short of it:

There is no reasoning with mullet enthusiasts.
Both have fishy origins
One is an ape drape one is monkey see monkey do.
Both seem like a compromise between style and business (see also: business in the front… party in the back), but are really just absurd.
At first glance, both concepts seem dated. Under closer evaluation you realize neither was ever a good idea.

Do not make this Achy-Breaky Big Mistakie!

Fast track to nowhere.

Tue, 23 Sep 2008 00:00:00 GMT

Always on the look out for ways to improve productivity, I have looked a bit into Ruby on Rails as a development framework. I have watched numerous tutorials on how easy and fast you can deploy apps. Heck, I even bought a book to help me get "Up and Running". I have downloaded a couple IDEs and text editors that I hear can speed things up.

Everything looks rosy except for one missing detail… I can not figure out for the life of me how to set up a server. Other than the tutorial on rubyonrails.org (which states "These instructions need to be updated.") and the instructions on Ubuntu's forum (which also don't work for me), I can find no ways to successfully make my LAMP Box accommodate ruby (and I have worked through many others).

I get that I can just use web brick on port 3000 on my dev machine. This seems far from production ready. I have also seen many options to lease ruby centric hosting. I am only comfortable with as-a-service when I know I can serve myself, if need be.

I am a defeated man. I fail to see efficiency benefits as I spent such a large amount of time tinkering with my server set up to no avail. I’m going back to Drupal. So much for getting things done.

FOWA 08 in 80 words or less

Mon, 16 Jun 2008 00:00:00 GMT

I just stumbled upon some notes I took at FOWA, so this post is less than timely. Better late than never. There was copious amounts of wisdom to gather from this long weekend event, but there was one underlying theme that seemed to be woven into most, if not all, of the presentations. In the spirit of gross generalizations here is a synopsis of the most important theme to have been picked up at FOWA Miami 2008.

We need to embrace the fact that we are not perfect. Instead of striving for perfection, we must simply try to suck less today than we did yesterday. Firmly setting a destination, and never checking our instruments, can easily end up with a perfectly honed path to failure. If we strive to engage our community as participants, more than just users, they will willing guide us to creating the right product (as long as we remain receptive). Focus on progress.

I was going to write a punny heading for Plurk, but it is just too quirky all by itself

Wed, 04 Jun 2008 00:00:00 GMT

So it's not exactly news, Plurk is on the scene. For the uninitiated, it is yet another microblog site. The big feature they tout is a cool AJAXy dragable timeline to display your updates (plurks) on. As a graphic designer, I really like that the folks at Plurk are carving their niche by focusing on the interface, but as a twitter user, I need attention to ease of post. . However, I'm sure I am far from the first to suggest that a liberal API would help a startup in this market. Furthermore, I would wager this is probably on it's way.

Honestly, I do not see Plurk as a competitor with Twitter. Twitter is really going for being a communication platform where Plurk seems to be more focusing on the community aspect. I do see Plurk as being one to watch in the realm of microblogging in general though. Especially considering I discovered them via Jason Calacanis, the Don King of the the internet.

Learning How to Love... Twitter

Thu, 20 Mar 2008 00:00:00 GMT

I have had an account for a little while now. But it was not until recently that I got “it”. There are plenty{: target="_blank"} of people explaining{: target="_blank"} twitter, but the “it” factor can/ will not happen unless you play with it*. I dabbled, but until saw the “itis” at FOWA first hand, I resisted. Now, I follow via IM with sms forwarding while I refresh a web page and sample 2 air clients. It’s not a habit, it’s cool.

One big reason of writing this post is in hopes to reach someone who was like me. “Why would I want to broadcast an IM when I really don’t have that many regular contacts that I communicate with via IM?” I mean scalability doesn’t seem that important when you don’t have a large scope (I’m looking at you Ruby On Rails Devs). I ask, “Do you have any interest in what your favorite bloggers/ Internet Superstars are doing between posts (ZeFrank… we have learned our lesson, please vlog again, we all miss the show)” or “Would you like a grand equalizer that allows you to communicate real time to these ‘A’ list internet types?” Of course you would.

So, twitter is a paradigm shift in communication. Don’t be a ludite, tweet (all the cool{: target="_blank"} kid’s are doing it**).

*playing with it has no proven relationship to blindness.

** Cool is subjective and a particularly difficult case to argue in terms of web apps. Please consult your local Fonz if your are seeking an increase in cool.

FOWA FTW

Wed, 05 Mar 2008 00:00:00 GMT

While still on the high of just attending the FOWA Miami, I am inspired to start blogging again. If you have not yet attended a FOWA, you should. It is an awesome event put on by some excellent people{: target="_blank"}. I must say, attending this conference really made me feel part of a web community, more than going to any social network ever has. Which just happened to fit in with one of the reoccurring themes in the talks “Have offline interaction with your online community”. Which, like most ideas, is as brilliant as it is simple.

There is something to be said about the excitement created by being surround by that much excellence. Paraphrasing Kathy Sierra, there is still something to be said for atoms. It is one thing to read blogs from like minded individuals and see that people want to make the web a better place, but to actually interact with so many people, in the flesh, that are passionate about the same things you are is much more powerful (assuming your into that kind of thing).

TTFN, I am off to the beach party. I have a notebook full of notes as well as some audio, video, and images. So there is definitely more to come about this.

Dr. Strangecode or: How I Learned to Stop Worrying and Love the DOM

Wed, 06 Feb 2008 00:00:00 GMT

Narrator: For more than 12 years, ominous rumors had been privately circulating among high-level web developers that a world wide consortium had been at work on what was darkly hinted to be the ultimate weapon: a doomsday device. Intelligence sources traced the home bases of this top secret international project to the perpetually fog-shrouded wasteland below the facilities of MIT/CSAIL (USA), ERCIM (France), and Keio Univ. (Japan). What they were building or why it should be located in such remote and desolate places no one could say.

Well, I’ve been to one world fair, a picnic, and a rodeo, and that’s the stupidest thing I ever heard? You sure you got today’s codes?

Do you still use tables to control your layouts or know someone who does? It is ok, I am here to help. I’ll level with you; I too once used tables to control my layouts. But thanks to Jeff Zeldman and other standards evangelists, I have found the way. In this, my first post, I am going to do my best to perpetuate the standards movement by posting about the reasons web standards are good for humanity.

For me the journey to smart web design began in 2003 by reading Designing with Web Standards, by Jeffrey Zeldman. Upon reading this book I had a bit of a “eureka” moment. If you have not yet read this book I recommend it (the second edition just came out recently). Many of the HTML conventions I had previously adhered to, simply because they “worked” (I mean really… spacer gifs… what was I thinking), were about to become a thing of the past. Ah, but it was not an easy transition, I had been programmed to do bad things. At first my sites were just as clunky as a table based websites… I had to fight the urge to simply swap tr and td tags for div tags. I thought that all elements needed to be bound by something or they may run away.

“through the purity and essence of our natural” fluids

If you began web development with table based layouts, you may see this whole tableless development as just another of the many fads the web development community seems so eager advocate then abandon. Table ridden websites download slower, put more stress on your server, and are more likely to break for no apparent reason.

If you have been using tables for a while, it may not seem obvious, but if you think about it, how many times do you use nonsensical “hacks”? How many spacer gifs do you implement? How many times do you mark “width=100%” only to cross your fingers hoping that it fills the existing space and not force your containing table to stretch erratically? For that matter how many times does it stretch erratically?

But this is absolute madness, Ambassador! Why should you build such a thing?

Oh, I know what you?re saying, “But Ryan, that's the way they did it in nineties and the internet thrived”. People tight-rolled their pant cuffs in the nineties too… we have evolved. In a nutshell, the nineties were decadent era for web design (among other things). Web development could be sloppy; there was plenty of money to write one website for IE, and a couple for Netscape. Font tags for every one! Hire another guy to make sure all in-line styles to the appropriate sidebar links are the right shade of magenta. Of course in-line, I mean, it isn't as though there exists some sort of complete and recursive (cascading) declaration your site's appearance (style?) of the entire website in an external page (or sheet). So that all 200 pages of this site could share a single… hmm what do we call it CRAP… certainly not, maybe just simplify it… CSS.

Enter CSS. One sheet to rule them all. No need to spend sleepless nights ensuring that all of your buhgillion inline styles and are consistent amongst many pages. Less chance of those obnoxious pixel-jumping page changes that result from one of your pages using a slightly different font size. It is a kinder, gentler, more logical web.

Gentlemen, you can’t fight in here! This is the War Room

Let me just plainly state… tables are not evil. They have a purpose. To display tabular data (oh yeah, what technical blog is complete without a recursive definition), and that is where it ends. You need fields of data to line up in a grid based relational format; table is the man for the job. You need logical structure to a website that is both easy to disperse on wide scale use and won't impact the market value of Maalox; table is not up to the challenge.

I feel the need to say this, as all too many times, I have seen new tableless zealots spend hours (if not days) coding an all div representation of some sort of data matrix (or table). I feel Charlton Heston would agree with me when I say, tables do not make absurd websites, designer/ developers that use tables incorrectly make absurd websites. To be fair, designers/ developers can make equally if not more absurd websites with CSS. The key here is to design more intelligently.

Monroy Seminar Review

Wed, 06 Feb 2008 00:00:00 GMT

Hey Crime Stoppers, I just got back from attending a Photoshop seminar by Bert Monroy{: target="_blank"} in Ft. Lauderdale. Monroy is an illustrator whose specialty is Photoshop and as he has been doing what he does for about as long as I have been alive, to say he knows his stuff is an understatement. More or less, I would recommend this seminar to most people, but I am not sure I was the target demographic. I would say at a price of $99 for admission, you can easily get your money’s worth. However, if you are very familiar with Photoshop at all, it becomes more of a “you get what you pay for” situation. For the most part, I found myself thinking “If only I had seen this seminar when I was first learning Photoshop.” For me this seminar was a collection of practical tips that should be fundamental. I must admit though, I had already been familiar with many of the “tricks/ tips” that were covered long before I sat in on this seminar. In credit to this seminar, it did take me much time reading magazines, scouring blogs/ forums, and skimming through tutorial links to obtain what was covered in this one day event. If you are new to Photoshop and value your time I would recommend this seminar.

Personally, I would like to take a more advanced or at least more focused seminar (maybe a workshop?) with Mr. Monroy, as he definitely strikes me as a wealth of knowledge. As a professional with nearly four years of work experience (and an insatiable appetite for dabbling), I was not overwhelmed with new stuff I had never seen before. The thing about Monroy is he has the experience and practice to execute these projects very well. In the course of this seminar though, Monroy seemed to want to display too much too quick. During his segment about layer styles, Monroy created a remarkably realistic rendition of a weathered brick wall in a few minutes. Again, it was not that he did things I had never seen before, just that he did it better than I had ever seen before. I only fear that many attendants have seen Monroy pull off these techniques so effortlessly and well they will mistake filters and styles for “make art” buttons. Monroy displays how many aspects of Photoshop that can be type cast as tacky can, in fact, be used to successfully save time and yield excellent results.

Perhaps the target audience Monroy was going after was a little less savvy. For instance, when Monroy spent a considerable amount of time explaining the difference between vector and raster images, I screamed on the inside. Later, there was a half an hour dedicated to using the pen tool (as in adding points and moving handles). And, although I say that I found many of the topics covered to be intuitive (or down right obvious), I eavesdropped on a few conversations of attendees that were blown away with new ideas that they had never encountered before. One gentleman equated trying to consume information at that seminar to trying to sip from a fire hose. And during the seminar one man interjected and asked what the difference is between flatten and merge visible. Obviously these men were getting their money’s worth.

All in all, I would say this is a very nice seminar. Monroy is very knowledgeable and has nice presentation. A few times during the filter section, Monroy seemed a bit more like an illusionist than an illustrator with a very, “for my next trick?” heavy tone. Quite appropriate considering the parlor trick like stigma that oft times surrounds filters. There were many useful gems scattered throughout the seminar and I would honestly say that the hour Monroy spent covering channels made the workshop worth the money for me.

RyanParsleyDotCom

Hello Cerebro

My workbench has always been messy

The funny thing about LLMs

Enter cerebro

The experiment continues

Hello Faircamp

What is Faircamp

What is even going on with your network?

How do I safely expose myself?

DNS friction

Here's a snapshot of what I did in the abstract to get things working.

Caddy as my web server

What does deployment look like?

Tada

I Finally Got POSSE Automated

Static sites are the bees knees, but...

The old way was fine but not great

The new hotness

My first Astro integration

What that looks like

Code to post to the fediverse

More like a good start than a happy ending

LSDJ Hardware Notes

Shopping is a slippery slope

But I want a real (game)boy

What about DIY!?

Price Breakdown of options discussed

TLDR

It's dangerous to go alone, take this

How To Start Vim

Why to Vim?

What is the deal with Neovim!?

This is my config. There are many like it, but this one is mine.

You got this!

Arduinoboy Build Notes

On the shoulders of giants

Millin' time

Time to solder

Link cable schematics

Connections

It's alive

In a slick enclosure

Timeline

Parts to consider

Selecting an Everdrive

Conclusion

Refactoring my Astro Gallery Component

How it started

How it's going

Key improvements

Astro Image integration

With great power... yada yada

Flexible path handling

Conclusion

My POSSE on Broadband

One does not simply comment on a static site

Ok, but what is POSSE!?

The POSSE Workflow as I understand it

Where do we go from here?

Zod makes TypeScript better

Introduction

What is Zod?

Key features

I'm already using TypeScript, why do I need another tool!?

Will it blend?

Efficient Workflow

Benefits of This Workflow

Best Practices

Conclusion

Fancy types enable simple code

Naive first draft

How do I adjust this component to be usable by both?

Problematic second draft

The good

The bad

Chef's Kiss third draft

Alternative idea

Conclusion

What the heck is Stow!?

Astro `Image` integration

If you haven't adjusted yours in the past, update `memory_limit` in your php.ini.