Reeder's Digest #3

Working for a living or living to work / "Being Profitable"

Although you possibly made your hobby to your full time job, don't forget to design the money side of your business. Matt Griffin's first article of a four part series on the financial aspects of webworking.

Mission VIMpossible / "Say hello to marcel.io"

Martin Wolf wrote a nice little case study about a microsite (for Marcel of UARRR.org fame) and trial run for building with VIM and using srcset, modular SCSS and SVG. He also has put its code on GitHub. Also, congrats to Martin and Marcel for joining the freelance universe!

Developers, don’t think out loud in front of a client / "Developers and Communication"

As a developer, always aim to be interpreter: not only for ideas into code, but also for technical risks and opportunities into a language everyone understands and appreciates.

What does it do? It turns blue / "Blueprint Wireframes"

The last link of this issue is a shameless plug: Static wireframes aren't the best way to showcase your responsive concept. Customers sometimes mistake too detailed wireframes as design proposals. Solve these two problems by creating simple, abstract sketches in HTML and use the familiar blueprint metaphor. I incorporated Stephen Hay's "content reference wireframes" concept into a visual style that (hopes) to emphasize the "construction plan" function of wireframes and put up a one-pager for this.

Tutorial: Install the latest versions of a set of ProcessWire modules at once

Once you've built a couple of websites with it, a set of your own personal must-have modules emerges.

For me, such a module and always the first install of the day is Soma's MarkupSimpleNavigation. But there's also MarkupSitemapXML. And so on. Depending on your usage of ProcessWire, the type of pages you build with PW or your customers, your set of modules may differ.

Installing modules and functionalities that you'll need in most instances should be an automated and easy process. ProcessWire itself offers a range of possibilities to do so.

First, there is installation via ClassNames: In Backend, chose "Modules", then "New" and paste or type in the class name the desired module established in the PW ecosystem, for example LoginPersist. From that point on, the particular module gets downloaded and installed within two clicks and just a matter of seconds. Rinse and repeat until your starter module set is complete, but be sure to memorize or note the correct class names.

Secondly, you can create an own starter site profile with your modules in it. This not only gives you the means to bootstrap in a module related way but also many possibilities for template and field groundwork. But a disadvantage (on the module site) remains: Unless you control and update all the modules in your site profile, only certain, possibly outdated versions will be installed - and you have to manually update them afterwards.

Some terminal output

For my last few projects I found a third way: Bundling all starter/must-have modules together in a git repo, using the modules as git submodules. After ProcessWire installation on my local machine, I just clone this bundle and recursively pull every module's master to its latest commit. An example (with my set of starter modules):

cd site/modules && git clone --recursive git@github.com:marcus-herrmann/ProcessWire-BootstrapModuleSet.git && cd ProcessWire-BootstrapModuleSet && git pull --recurse-submodules

What does this code do? At first, let's assume you've navigated via the terminal to you ProcessWire's installation root folder. Afterwards, these steps follow:

  1. Change directory to module folder
  2. Clone your bundle repo
  3. Change directory to the folder created by aforementioned bundle repo clone
  4. Pull all submodules to their latest commit

That's all. After you've created your own module bundle repo, you can even create a shell alias for this and accellerate the process even more:

alias getpwstartmodules='cd site/modules && git clone --recursive git@github.com:marcus-herrmann/ProcessWire-BootstrapModuleSet.git && cd ProcessWire-BootstrapModuleSet && git pull --recurse-submodules'

I possibly may have reinvented the wheel. But at least I haven't yet found such a way for CMS kickstarting before (apart from maybe pure bred package managers such as npm and composer). But if a better solution exists, please do not hesitate to drop a comment here in the blog, or ping me at @_marcusherrmann on twitter. :)

Release: Flag Pages Module for ProcessWire

Finally - my first module for the CMS/CMF ProcessWire that isn't forked from some other module (like GitHub Login for ProcessWire, which is based on Facebook Login).

Example Screenshot

Download from GitHub

With this module, logged-in users are able to flag pages. I'm planning to use this in my rewrite of the Knowledge Base Site Profile. There, logged-in users were able bookmark certain wiki pages for convenience. But back in March, when I originally released this site profile, this functionality was hard-wired into the templates - but now it's a module that can easily be implemented in other contexts.

Usage

FlagPages module consists of two parts: Rendering the link and rendering a list with your current bookmarks.

First of all, load the module via:

$flags = $modules->get("FlagPages");

Rendering flag toggle link

Then, use the renderLink method and place the output in your template. By adding the link to all or just certain templates, you can control which templates can be flagged and which can't.

echo $flags->renderLink();

The default output will be "Add {Name} to flags", or "Remove {Name} from flags". You can override these labels with parameters. For example:

echo $flags->renderLink("Add %s to my bookmarks", "Remove %s from my bookmarks");

Rendering the flagged pages list

echo $flags->renderList();

This will output a simple unordered list with links to pages the currently logged-in user has set a flag to.

Background

If you have never heard of ProcessWire before, here are some links explaining its approach and advantages: