Single-template ExpressionEngine site for Websiteforall

Elsewhere

Via Hacker News, this Chrome for Developers post dives into browser colors beyond RGB.

Jason Fried again, with an insight into Apple’s new Vision Pro that one important value proposition is recording:

What I think is super interesting about the Apple Vision Pro is the potential to be able to literally see through someone else’s eyes. Not just see their field of vision — you can get at that with head or eyeglass mounted cameras — but to actually see where they’re looking. To know what they’re focused on. To lock in with them. To see how they see. To watch them look from their point of view. Standing in someone’s shoes is one thing, but even if you could do that, you’d still be looking through your own eyes. But to literally see as they’d see from someone else’s point-of-view perspective feels groundbreaking. If I was making an app for this, I’d call it “See With”.

For the past few months I’ve retreated from working on a software product to, well, for a month after October 7th I didn’t seem to get much work done, then I was working on software systems for clients. Now dipping my toe back into RSSDeck, the biggest edifice I’ve ever created, I’m inspired by this short piece by Jason Fried, “To Make”:

I’ve consulted. I’ve done client work. I’ve advised. I’ve served on boards. I’ve invested. I’ve written books. I’ve spoken on the circuit. I’ve blogged for years. I have to say, I’ve found no greater professional joy than working with a tight group of people to ship and support our own products.

Jakob Nielsen has written a series of articles (8 so far) on UX in the age of AI. They are:

AI Is First New UI Paradigm in 60 Years

AI Vastly Improves Productivity for Business Users and Reduces Skill Gaps

AI vs. Metaverse: Which Is the 5th Generation UI?

UX Needs a Sense of Urgency About AI

Prompt-Driven AI UX Hurts Usability

ChatGPT Does Almost as Well as Human UX Researchers in a Case Study of Thematic Analysis

How Much UX Do You Need for AI Projects?

“Prompt Engineering” Showcases Poor Usability of Current Generative AI

David Pogue on Apple’s VisionPro:

Its development was supposedly insanely expensive, internally contentious, and repeatedly delayed. But the result is so advanced and polished, it makes Meta’s VR headsets look like Blackberries.

My take on VisionPro: Tim Cook knew that the iPhone is near perfect for what it is, and Apple needs a whole new level of difficult to keep pushing the envelope technologically. Maybe I’m getting carried away, but I’ve just realized how many of my website’s categories this post is relevant to — a lot!

In “What’s your problem with Tailwind?” Chris Ferdinandi of Go Make Things articulates and illustrates why I’ve instinctively shied away from CSS frameworks:

It is faster during the prototyping phase… And then there inevitably comes a time where I need to update the style. Now, instead of just making a single change on a single class in a CSS file, I make a dozen little changes across numerous HTML elements scattered across many pages.

Basically, the styling code ends up being in the HTML, where it does not belong, rather than in the CSS, where it does.

At Why Svelte?, the homepage states “CSS is component-scoped by default” — the “by default” being the compliment vice pays to virtue. Because at the Github discussion on this issue (Ability to disable css scope across entire application #4764), Svelte Core Member/Maintainer @Conduitry, 2nd in commits only to founder Rich Harris, writes:

In general, using global CSS everywhere is something we want to steer people away from, and doesn’t feel like something we want to natively make easy or tacitly endorse.

The “C” in “CSS” stands for “cascading” yet the purpose of scoping CSS in components is to neuter that cascade. For the poster of this issue, Svelte’s stance was a dealbreaker, as it would be for me too. Scoped CSS components are the wussy option, which is fine and in many cases perhaps more viable, but the wussy option they should remain.

Interesting, seeing Ars Technica’s slant on Twitter’s handling of Matt Walsh’s What is a Woman because, like most tech blogs, they lean establishment/woke, and I’d expect some pushback in the comments. But instead the comments are far more supportive of the movement (I’m trying to find a term to speak of it without speaking against it, but it objects to even being termed) than is the piece itself, and quite a few condemn the author and the publication for irresponsibly posting a link to the film. One gem by mikesmith (8y, 3,207 comments):

The next time a right-wing weirdo confidently declares that the definition of “woman” is inexorably linked to their genitalia ask them how many genitals they’ve personally inspected to be sure about it since they’re so confident.

What a mindblowing, humbling project: infinitemac.org — every Mac system since January 24th, 1984, in the browser!

Via Paul Graham, who chose Gerald Ford’s portrait as his favorite, “every american president, but they’re all cool and they all sport a mullet” by Cam Harless.

ne of the virtues of many sites recently designed by the Brighton-based creative web agency Websiteforall is that they are comprised of just one page (see for example the award-winning Love’s Restaurant). The new Websiteforall portfolio site is in that tradition, taking the visitor immediately to the heart of matters with a thumbnail list of client sites on the left and a focus on one of those sites to the right. This article explains how that setup is deployed in ExpressionEngine using a single template.

Sector
Service

Normally, pages within web sites can be classified as either single-entry or multiple-entry. Although Websiteforall is different in that all pages appear to be more or less the same, with multiple entries on the left and a single entry on the right, the key insight for deploying ExpressionEngine elegantly here was that there are indeed two types of pages, even if there appears not to be. One type is single-entry, the other is a categories listing. It’s just that seamless navigation between the two page types requires a little bit of EE magic.

The Header Title

First an overview courtesy of the EE tags within the header title:

&lt;title&gt;
 &#123;if segment_1 != ""&#125;
 &#123;if segment_2 == ""&#125;
 &#123;exp:weblog:entries weblog="clients" limit="1" 
 disable="categories|category_fields|custom_fields|member_data|pagination|trackbacks"&#125;
 &#123;title&#125; : 
 &#123;/exp:weblog:entries&#125;
 &#123;/if&#125;
 &#123;if segment_2 != ""&#125;
 &#123;exp:weblog:category_heading weblog="clients"&#125;&#123;if plural&#125;&#123;plural&#125;&#123;if:else&#125;&#123;category_name&#125;&#123;/if&#125; : &#123;/exp:weblog:category_heading&#125;
 &#123;/if&#125;
 &#123;/if&#125;
 websiteforall : creative web agency, Brighton UK
&lt;/title&gt;

Starting with the first line, if the URL’s segment #1 is empty then we’re on the homepage and can exit the conditional. If however segment #1 does contain something then we next check whether segment #2 is empty. If it is then we’re on a single-entry page and run EE’s weblog:entries tag (with all options disabled to improve performance) to display the entry’s title followed by a colon. If however segment #2 is not empty then we’re on a categories page and run EE’s category_heading tag. These then are the three types of pages in the site: the homepage, a single-entry or a categories page.

There are two category groups, Locations and Services, but only Services get their own page, a listing of all entries with that service checked. For this to work, Use Category URL Titles In Links? is set to “Yes” and the Category URL Indicator is changed from the default “categories” to “services”.

Note that in the category_heading tag the field plural is displayed unless it’s empty, in which case the category name is displayed. The plural category field is for services that should be named differently in the plural; “logo” becomes “logos” but “web design” stays as is.

The Right Side

The title header is not the only part of the template that handles all three types of page on the site. The right side also works whether the visitor is on the homepage, a single-entry or a categories page:

&#123;exp:weblog:entries weblog="clients" limit="1" disable="member_data|pagination|trackbacks" url_title="&#123;segment_3&#125;" &#125; 
&lt;div class="container"&gt;
 &lt;div class="clientid"&gt;
  &lt;h1&gt;&#123;if clients_url&#125;&lt;a target="_blank" href="http://&#123;clients_url&#125;"&gt;&#123;/if&#125;&#123;title&#125;&#123;if clients_url&#125;&lt;/a&gt;&#123;/if&#125;&lt;/h1&gt;
 &lt;/div&gt;
 &lt;div class="rightclient"&gt; 
  &lt;div class="clientinfo"&gt;
   &lt;p&gt;&#123;if clients_business&#125;&#123;clients_business&#125;, &#123;/if&#125;&#123;categories show="not 16|17|22" show_group="3" backspace="1"&#125;&#123;category_name&#125;, &#123;/categories&#125;&lt;/p&gt;
   &#123;if clients_url&#125;&lt;a target="_blank" href="http://&#123;clients_url&#125;"&gt;&#123;clients_url&#125;&lt;/a&gt;&#123;/if&#125;
  &lt;/div&gt;
  &#123;if clients_testimonial&#125;
   &lt;div class="clienttestimonial"&gt;
    &lt;p&gt;&lt;img src="&#123;site_url&#125;img/quoteopen.png" width="22" /&gt;&#123;clients_testimonial&#125;&lt;img src="&#123;site_url&#125;img/quoteclose.png" width="22" /&gt;&lt;/p&gt;
   &lt;p class="client-name"&gt;&#123;if clients_url&#125;&lt;a target="_blank" href="http://&#123;clients_url&#125;"&gt;&#123;/if&#125;&#123;clients_author&#125;&#123;if clients_url&#125;&lt;/a&gt;&#123;/if&#125;&lt;/p&gt;
  &lt;/div&gt;&lt;!-- /clienttestimonial --&gt;
  &#123;/if&#125;
  &lt;div class="services"&gt;
   &lt;h3&gt;what we did for &#123;title&#125;&lt;/h3&gt;
   &lt;p&gt;&#123;categories show="not 4|6|50|53" show_group="1" backspace="1"&#125;&#123;if segment_2 != category_url_title&#125;&lt;a href="&#123;path=/&#125;&#123;if segment_3 =="&gt;&#123;/if&#125;&#123;category_name&#125;&#123;if segment_2 != category_url_title&#125;&lt;/a&gt;&#123;/if&#125;, &#123;/categories&#125;&lt;/p&gt;
  &lt;/div&gt;  
  &lt;div class="clientbranding"&gt;
   &lt;div class="selector"&gt;
    &#123;if clients_logo && clients_business_card&#125;
    &lt;ul id="branding" class="shadetabs"&gt;
     &#123;if clients_logo&#125;&lt;li&gt;&lt;a href="#" rel="logo" class="selected"&gt;logo&lt;/a&gt;&lt;/li&gt;&#123;/if&#125;
     &#123;if clients_business_card&#125;&lt;li&gt;&lt;a href="#" rel="businesscard"&gt;business card&lt;/a&gt;&lt;/li&gt;&#123;/if&#125;
    &lt;/ul&gt;
    &#123;/if&#125;
   &lt;/div&gt;  
   &#123;if clients_logo&#125;&lt;div id="logo"&gt;&lt;img src="&#123;clients_logo&#125;" width="240" /&gt;&lt;/div&gt;&#123;/if&#125;
   &#123;if clients_business_card&#125;&lt;div id="businesscard"&gt;&lt;img src="&#123;clients_business_card&#125;" width="240" /&gt;&lt;/div&gt;&#123;/if&#125;
  &lt;/div&gt;
 &lt;/div&gt;&lt;!-- /rightclient --&gt;
 &#123;if clients_screenshot&#125;
 &lt;div class="screen"&gt;
  &#123;if clients_url&#125;
  &lt;a target="_blank" href="http://&#123;clients_url&#125;"&gt;&#123;/if&#125;&lt;img src="&#123;clients_screenshot&#125;" width="340" border="0" /&gt;&#123;if clients_url&#125;&lt;/a&gt;
  &#123;/if&#125;
 &lt;/div&gt;
 &#123;/if&#125;
&lt;/div&gt;&lt;!-- /container --&gt;
&#123;/exp:weblog:entries&#125;

This is where the magic is — in the parameters of the weblog:entries tag. The url_title parameter is set to contain the contents of segment #3. This of course only works if we indeed have a segment #3, that is, if we’re on a services page. Service pages always have a fixed URL structure: segment #1 is “services”, segment #2 is the url_title of the particular service, and segment #3 is the url_title of the client to feature on the right. But what if there is no segment #3? The url_title parameter is empty, therefore ignored, and the tag falls back to its default behavior, which is to treat the final segment in the URL as the url_title. If we have a segment #1 then we’re on a single-entry page and the entry corresponding to the url_title in segment #1 is displayed. If however segment #1 is also empty, then the limit parameter ensures that only one client is featured on the right, that is, the latest one — or any that is set as sticky.

Most of the remaining conditionals in the right side simply control whether to display various fields — logo, business card, screenshot, url — depending on whether they are empty for this particular entry. Both services (category group 1) and locations (category group 3) are displayed with hardcoded suppression of their top-level categories.

Under “what we did”, the entry’s services are displayed using the categories tag. If the service’s url_title appears in segment #2 of the URL — that is, if we’re on the service’s own page — then there is no link to it. Because we’re within the categories tag, EE automatically adds segments #1 and #2 to any links, with segment #1 being the reserved Category URL Indicator (“services”) and segment #2 the category’s url_title. Within the conditional is another that tests whether to set the link’s segment #3 as the contents of the current URL’s segment #1 if the current page is a single-entry one or as the current URL’s segment #3 if we’re on a services page.

The Left Side

The left side is quite different depending on our current page type.

&#123;if segment_2 == ""&#125;
&lt;h1&gt;our clients&lt;/h1&gt;
&lt;div class="selectorclient"&gt;
 &lt;ul id="clients" class="shadetabs"&gt;
  &lt;li&gt;&lt;a href="#" rel="uk" class="selected"&gt;UK&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#" rel="france"&gt;France&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#" rel="belgium"&gt;Belgium&lt;/a&gt;&lt;/li&gt;
 &lt;/ul&gt;
&lt;/div&gt;
&lt;div id="uk"&gt;
 &lt;ul class="thumb"&gt;
  &#123;exp:weblog:entries weblog="clients" dynamic="off" category="16" limit="99" orderby="title" sort="asc" sticky="off"&#125;
  &lt;li &#123;switch="||class='last'"&#125;&gt;&#123;if segment_1 != url_title&#125;&lt;a href="&#123;path=/&#125;&#123;url_title&#125;"&gt;&#123;/if&#125;&lt;img src="&#123;clients_thumbnail&#125;" alt="&#123;title&#125;" border="0" /&gt;&#123;title&#125;&#123;if segment_1 != url_title&#125;&lt;/a&gt;&#123;/if&#125;&lt;/li&gt;
   &#123;/exp:weblog:entries&#125;
 &lt;/ul&gt;
&lt;/div&gt;
&lt;div id="france"&gt;
 &lt;ul class="thumb"&gt;
  &#123;exp:weblog:entries weblog="clients" dynamic="off"  category="17" limit="99" orderby="title" sort="asc" sticky="off"&#125;
  &lt;li &#123;switch="||class='last'"&#125;&gt;&#123;if segment_1 != url_title&#125;&lt;a href="&#123;path=/&#125;&#123;url_title&#125;"&gt;&#123;/if&#125;&lt;img src="&#123;clients_thumbnail&#125;" alt="&#123;title&#125;" border="0" /&gt;&#123;title&#125;&#123;if segment_1 != url_title&#125;&lt;/a&gt;&#123;/if&#125;&lt;/li&gt;
   &#123;/exp:weblog:entries&#125;
 &lt;/ul&gt;
&lt;/div&gt;
&lt;div id="belgium"&gt;
 &lt;ul class="thumb"&gt;
  &#123;exp:weblog:entries weblog="clients" dynamic="off"  category="22" limit="99" orderby="title" sort="asc" sticky="off"&#125;
  &lt;li &#123;switch="||class='last'"&#125;&gt;&#123;if segment_1 != url_title&#125;&lt;a href="&#123;path=/&#125;&#123;url_title&#125;"&gt;&#123;/if&#125;&lt;img src="&#123;clients_thumbnail&#125;" alt="&#123;title&#125;" border="0" /&gt;&#123;title&#125;&#123;if segment_1 != url_title&#125;&lt;/a&gt;&#123;/if&#125;&lt;/li&gt;
  &#123;/exp:weblog:entries&#125;
 &lt;/ul&gt;
&lt;/div&gt;
&#123;/if&#125;

If segment #2 is empty — that is, if we’re on the homepage or a single-entry page, then we display our clients by country. Since it’s unlikely that Websiteforall will spread to dozens more countries in the very near future, country listings are handled only semi-automatically in that each has its own weblog:entries tag filtered using the category parameter with that particular country’s category_id hardcoded in (we can’t use EE’s out-the-box category_archives tag because it doesn’t handle custom fields). If the number of countries suddenly explodes we can automate things by looping through all the entries in the country category group and within that loop embed each one’s weblog:entries tag in a sub-template — though then we could no longer claim a single-template deployment.

If segment #2 is not empty and — just to double-check — segment #1 is “services”, then we’re on a categories page:

&#123;if segment_1 "services"}
<h1><a href="{path=/}{segment_3}">our clients</a> / {exp:weblog:category_heading weblog="clients"}{if plural}{plural}{if:else}{category_name}{/if}{/exp:weblog:category_heading}</h1>
<div id="uk">
 <ul class="thumb">
  {exp:weblog:entries weblog="clients" orderby="title" sort="asc" 
  disable="member_data|pagination|trackbacks" sticky="off"}
  <li {switch="||class='last'"}><a href="{path=/}services/{segment_2}/{url_title}"><img src="{if segment_2  " alt="&#123;title&#125;" border="0" /&gt;&#123;title&#125;&lt;/a&gt;&lt;/li&gt;
  &#123;/exp:weblog:entries&#125;
 &lt;/ul&gt;
&lt;/div&gt;  
&#123;/if&#125;

Here the word “our clients” in the h1 is now a link to a single-entry client page. We bring along into segment #1 the magic ingredient: the entry currently in segment #3 and displayed on the right. So upon clicking here the left side will change from the current category to a list of clients, but the right side will stay the same, providing continuity.

If we haven’t clicked and are still here, next is the category_heading tag to display the current service, with the conditional for the plural field just like in the header title.

The next tag is weblog:entries which, because we’re on a categories page, only displays entries in our category.

For both single-entry and services pages, the switch tag enables every third thumbnail to get a class of “last”, thereby enabling three columns, and the conditional that tests whether segment #1 differs from the url_title ensures that a page does not link to itself.

Services Menu

An EE tag is used in one final place on the template: to display the menu of services:

&lt;div id="navi2"&gt;
 &#123;exp:weblog:categories style="nested" weblog="clients" category_group="1"&#125;
 &#123;if segment_2 != category_url_title&#125;&lt;a href="&#123;path=/&#125;"&gt;&#123;/if&#125;&#123;category_name&#125;&#123;if segment_2 != category_url_title&#125;&lt;/a&gt;&#123;/if&#125;
 &#123;/exp:weblog:categories&#125;
&lt;/div&gt;&lt;!-- /navi2 --&gt;

The list is spread across four columns using CSS.

Conclusion

We didn’t set out to build the site in conformity with how ExpressionEngine’s categories work. Instead, the things Stephen wanted for the site dovetailed with EE’s natural setup.

Process

services

Recently

products