Today was a heritage day at my local high school. Kids could dress in their local heritage gear, or wear blue. Mine chose the latter. The other outfits…well they were lovely. I’d like to highlight another Wikipedia group who is standing out for me at the moment. They are from the Basque region and their “taal” is a language isolate. Located close to the Pyrenee Mountains (42.6681804, 1.0011899) between Spain and France, there are less than a million people who are speakers of Euskara, the ancient language of Euskal Herria. I don’t know too much about this group, the region or their heritage. I have however noticed their online efforts. They have put together a children’s encyclopedia called Txikipedia. Here is the backstory (there are some similarities to SWiP).

Wikipedians from  Euskal Herria (the Basque Country ) started conversations with the Basque Government about “auzolan” a tradition of community collaboration. The government bought their pitch…as they soon realized that “Wikipedia is a must for a language to survive.” The Basque Education Program encouraged university students to improve existing Basque articles as part of their classroom assignment. The result was “that at least 2.200 students worked on improving 1.740 articles with students adding more than 2 million words.” Their contribution makes up 5% of Basque Wikipedia words. Then part of the vision was to create Txikipedia, the first children’s Encyclopedia inside Wikipedia. See Basque Education program presentation

I’ve frequently covered grown up knowledge resources. But frankly, children’s reference resources are more important. Much like Childcraft, Txipedia is a children’s encyclopaedia that Basque Wikimedians have incorporated into Wikipedia. “Txiki” is Basque for “small” and this resource stands as an example of how language communities can amplify their vernacular language with Wikipedian. Here are my few thoughts on making a local vernacular equivalent.

• Introduction to Heritage Month
• Choose your CSS stylesheet
• Making the logo work
• The Header
  • Thinking more about blocks (or classes) in the header
  • Picturing a schema
  • Designing multiple stylesheets
• Adding more links and categories
• Details are in the design
  1. Locate your stylesheet
  2. Setup the two columns
  3. Refer to the stylesheet
  4. Choose a colour palette
  5. Creating before, during and after navigation

Introduction

South Africa is celebrating Heritage Month 2026 and Wikimedia SA has created a “Challenge”. Post 1 article a day about art, music, food, history into your own local language for 30 days. You could share your communities history, translate key terms, or document your culture. The event has a reward – the possibility of winning vouchers! I think that we need to be making Wikipedia more colourful, bright and interesting.

Choose your stylesheet.

What am I doing for Heritage Month? You might have noticed, that I speak code better than languages. So my contribution to Heritage Month is 10 funky new colourful stylesheets for the official languages to deploy on their own Wikipedia instance.

1. Sjabloon:Afipedia/styles.css is my “pers” banner on the top of my Afrikaans sandbox.
2. Umhlahlandlelasakhiwo:Nripedia/styles.css this is my incomplete isiNdebele tutorial
3. Template:Nsoipedia/styles.css has two CSS lamposts and is shaded in pink. Sepedi
4. iThempleti:Ssipedia/styles.csssees me raising my peak to the king.
5. Template:Stipedia/styles.css contains a single lamppost on my Sesotho page.
6. Tempolete:Tnipedia/styles.css offers a palette of Wikimedia Colours for Setswana
7. Template:Tsipedia/styles.css is where I get a bit formulaic on Xitsonga (original work is hard).
8. Template:Veipedia/styles.css has funky Tshivenda buttons
9. iThemplethi:Xhipedia/styles.css I need to add more style and substance to my isiXhosa page
10. Template:Zuipedia/styles.css is a suitably regal isiZulu page tutorial.

Feel free to click on both the stylesheets and the sandboxes. Note that either is incomplete. That’s normal Wikipedia depends on crowdsourced labour. This is volunteer work. Others assist.

These Cascading style sheets (CSS) are used to control the appearance of a displayed webpage. They are “cascading” because they bring multiple sources together. A cascading stylesheet can change the whole look of a website. When you create a CSS sheet on Wikipedia, you can add it in a few places.

Making the logo work

The Txikipedia logo is text (and is not an image) and a fancy font. I’ve created a logo with two capital letters at each end. The font is ‘Linux Libertine’ a serif text that is styled in CSS to give large bookends. I could have used an image, but the text gives greater flexibility when seen on a small screen. Its also quicker to adjust depending on how you spell Wikipedia in your language.

Designing a header

A few weeks ago, I wrote about building a banner from blocks. One block had a gradient background, a heading sat in the block and and three hyperlinks (also blocks) were there. Today I’ll take it further and develop a “header” for your page. The header will be split into two with logo, a slogan and small horizontal navigation links on the left of the page (column 1). On the right hand side of the header, we’ll have a grid. With icons that link to certain categories. In CSS these blocks are known as “classes”.

Picturing a schema

Sometimes it’s hard to understand all these abstractions. That’s when I like to draw (or prompt). If you click on any of the stylesheets (linked below), you will find a small drawing like this below in the CSS. This schema is NOT necessary for the CSS to function. Its just a helpful reminder for my brain to remember all the parts that go into a page.

┌────────────────HEADER───────────────┬──────────────────┐
│ FIRST COLUMN                        │ SECOND  COLUMN   │
│ Logo                                │                  │
│ Tagline                             │  GRID|GRID|GRID  │
│  (Pill 1)  (Pill 2)  (Pill 3)       │  GRID|GRID|GRID  │
└─────────────────────────────────────┴──────────────────┘

• .header
• column 1 and column 2 (.header left and .header right)
• .logo
• .tagline
• .pill and
• .grid

Adding more links and categories.

The example above has some elements (the link and the category) that can be repeated.

We could style the little pill shaped link. Small font size, green background, rounded corners.

<a href="/wiki/Example" class="ipedia-pill"><span class="ipedia-pill">📚</span>Hyperlink</a>

.ipedia-pill {
    display: inline-block;
    font-size: 0.85em;
    padding: 4px 12px;
    border-radius: 20px;
    background: green;
    color: white !important;
    text-decoration: none !important;
}

.ipedia-pill:hover,
.ipedia-pill:focus {
    background: darkgreen;
    color: white !important;
    text-decoration: none !important;
}

Multiple Stylesheets

For Wikimedia South Africa, the multiplicity of language raises a thorny question. Should we have once central service for all the official languages in South Africa. That would be easier to maintain, if you are not sure about the levels of CSS expertise in each of the communities, then its probably a safe bet. However, if you would like language communities to shape and own their Wikipedia platform, like the Basque Wikipedians did, then more become constructionist and make resources that reflects the identity of their community, then perhaps a few more people should learn how to code.

Step 1 | Locate the local language stylesheet

You’ve seen the 10 stylesheets I created. They are particular to a particular ISO 639 language code. (Saffers who speak English, there’s a footnote for you.). The classes in the stylesheet will begin with the two or three letter codes. Let’s start With isiZulu

.zu + ipedia + header

• .zuipedia-header-left and .zuipedia-header-header-right
• .zuipedia-logo
• .zuipedia-tagline
• .zuipedia-pill and
• .zuipedia-grid

Details are in the design

This is how you can go about doing this on your own Wikipedia Platform

Step 2 | Layout two columns

This is a two-column page layout (a grid). The first column fills the available space and then the second column fits the content that’s been placed therein. If the screen is too narrow, then the column on the right (the second one) will appear underneath. A coloured container with rounded corners acts as a header. Anything that sticks out is clipped. The header is pulled 20px upward (it can be pulled higher), and there is some space underneath.

ipedia-header {
display: grid;
grid-template-columns: 1fr auto;
border-radius: 12px;
overflow: hidden;
margin-top: -20px;
margin-bottom: 1em;
background-color: var(--primary);
}
.ipedia-header-left {
padding: 1.4rem 1.75rem;
color: var(--white);
}
}
.ipedia-header-right {
background: rgba(0,0,0,0.22);
padding: 1.1rem 1.25rem;
display: flex;
flex-direction: column;
justify-content: center;
min-width: 270px;
}

Step 3 | Refer to the stylesheet (on code view)

When creating a normal webpage in HTML, you’ll refer to the stylesheet (see example on the left). When creating the same on Wikipedia, you probably should first create a stylesheet under your sandbox (see example on the right).

Step 4 | Choose your colour palette

Wikimedia has created three lovely colour palettes and so (instead of using a colour picker) you could choose from these codes. I’ve drawn on the vivid colour palette to create this colours lovely collection of colours.

Now you might know what the colour of the Txikipedia banner is (hint the answer is above). I’m going to start off with making a banner with a colours I use frequently on my website. If I was working on codepen, I’d use the root folder.

:root {
--primary: #819637;
--white: #FFFFFF;
--black: #111111;

BUT, You go ahead and choose your colour using the hexidecimal palette I created.

.ipedia-header {
background-color: var(--primary);
}

Step 5 | Add more links, categories or images

You might have the structure now, and would like to add more pill shaped links or more categories. Or you may want to add an image or two. Now if you visit Q26127718, you will see that I have installed an image upload feature. This works with almost all vernacular versions of Wikipedia. There might be a problem with the names I used to create the function. Please tell me and I will rectify my mistake. This function permits the user to upload images to Wikimedia commons. I’ve written much more about this upload.

Last Words

My challenge to my local Wikipedia colleagues who are concerned about their language (this Heritage Month) is to also think about learning how to code on your vernacular instance. Perhaps make a button or banner, or even a CSS image. Or join Bobby Shabangu (and a few others ) and follow me on GitHub.

P.S. You might have noticed that there is no ENGLISH examples. That’s because English Wikipedia does not want plain CSS but prefers Sanitized CSS. There is a setting that you can change to make Sanatized CSS, but that setting is limited to administrators. You can still make english Wikipedia look funky.

1. Enter Special:ChangeContentModel on English Wikipedia
2. Give your page title a name. I suggest that you use your sandbox.
3. Select the new content model (sanitized CSS)
4. Give a reason and hit create.
5. You now have a CSS stylesheet.

If you check out Nomfundo’s sandbox, you can see her page that we have started working on. Process of creating a style sheet is a bit complicated on English Wikipedia. Play around with your Sandbox on vernacular platforms.

Next post will be about JSON and how we create empty structural containers, while the JSON becomes the actual manuscript/content.

Introduction

I’ve often wondered where our statesmen choose to go once they have retired. Cecil John Rhodes, for example, died at 49 in a modest cottage at 246 Main road (Q20617285), on the way to Vishoek. Poor bloke. His Groote Schuur Mansion had burnt down about 10 years before. Today, Rhodes Cottage is a thatched building, but originally structure had an asbestos roof. The warrior / statemen Jan Smuts lived in wood-and-iron building. This pre-fabricated structure was made of wood and iron components and was once used as an officers’ mess. It was bought in Middelburg and re-erected on the farm Doornkloof. The house was also known as die GROOT HUIS*. (Q61930814) and is also known as the Smuts House Museum. Dr AB Xuma, medical doctor, leader, activist, president-general of the African National Congress (ANC) and signatory of the doctors pact, had a home on the corner of Toby and Thornton street. (Q20981521) in Sophia Town. Forced to leave in 1959, the house is known as Empilweni (the place of healing) is the Sophiatown Heritage Centre.

These are places worth visiting.

When Nelson Mandela was released from prison he moved in to a house in 13th street in Houghton. After he and Winnie were divorced, he moved to a place in 12th street in Houghton in 1998. Madiba moved to 12th avenue when he married Graça Machel. Sanctuary Mandela is the name of the boutique hotel that now sits where Madiba’s house is. The hotel was amazing. I was a guest there of the Wikimedia Foundation and we had a superb lunch. The hotel has 9 rooms and each is centred around the decades he lived. I wish I’d taken more pics. This was also his last residence, any my kids left flowers outside.

I’d like to take pictures of these stateman’s places. For example, what about Thabo Mbeki’s house bordering on Riverlea and Houghton Estate. There is also Kgalema Motlanthe’s place in 8th Street, Houghton Estate. Each of these houses are an important part of our countries heritage. We can’t only have early colonists and nationalists on Wikipedia. This is part of the my (unpaid) work about communities that I am doing as a Wikipedian in Residence for Code for Africa (and my almost completed WIR).

Upload Images Features

Within the set of stylesheets I put together for Heritage Month, I’ve created place for something called “Images Wanted”, or “Upload images”. This is a function that allows the average Wikipedian to upload images when the template is called. Some have suggested that this function be placed on talk pages, while others put it right on the page that needs a picture. I’m going to suggest that this function can also be located in the Sandbox.

I saw this function originally in Japanese (see Template:画像募集中) and Korean (see 틀:이미지업로드요청). It looks complicated, but there is a simple explanation.

You can initiate the function by writing familiar words in curly braces{{画像募集中}} . No, I don’t speak Japanese or write it. Neither do I speak vernacular languages. I can however code switch. For example, what does 利用者:Derek J Moore mean. Look at this in context.

After adding {{画像募集中}} and saving it, I can use the upload images function. You can upload images by pressing a hyperlink (or a blue button) or clicking the image of photographs and magnifying glass. This takes you to the upload wizard and you can there upload the desired pictures.

The template also permits you to place pictures into categories (Wikipedia:画像提供依頼/カテゴリ一覧). But I still need to figure this out.

Schema

We talked about blocks recently. Wikipedia allows you to create blocks too. If you write this on Wikipedia, then you’ll get a block.

{| class="infobox"
|This is an infobox
|}

Below is a more complicated block. The diagram shows how an infobox is combined with the function {{laisa setshwantsho}} and the associated parameters.

{{Infobox
|name    = Derek J Moore
|title   = Laisa setshwantsho
|data1   = 
{{laisa setshwantsho
 |type=2
 |size=100px
 |cat=People
 |cat2=Cities
}}
|label2  = Instructions
|data2   = {{{item_four|weblearning.co.za}}}
}}

Notable code

The function consists of two words that describe the action you want to perform. Here are these words in the various languages. Please feel free to correct me (and Aunty Google) if we have made mistakes.

1. nr Umhlahlandlelasakhiwo:Layisha isithombe
2. nso Template:Kenya setshwantsho
3. ss iThempleti:Layisha sitfombe
4. st Template:Kenya setšoantšo
5. tn Tempolete:Laisa setshwantsho
6. ts Template:Upload xifaniso
7. ve Template:Dzhenisa
8. xh iThemplethi:Layisha umfanekiso
9. zu Template:Layisha isithombe

For illustration purposes, I'm just going to focus on one language - Setswana. The same principles apply in all languages

Detailed Specifications

Step 1: Create the shell

"Upload images" (according to Google translate) in Setswana is "laisa setshwantsho". Go to the vernacular Wikipedia (e.g. tn.wikipedia.org) and enter the URL https://tn.wikipedia.org/wiki/Tempolete: followed by "laisa setshwantsho"

Some people (like me) cannot understand this message that I highlighted in blue, but aunty Google knows the answer: "No text on this page. You can search for the title of this page on other pages".

Go ahead and press Dira motswedi (Create source).

You might see another message. "O setse morago kgolagano ya tsebe e, ise e nne teng gompieno. Go dira tsebe ye, simolola ka go kwala mo lebokosong le le latelang (bona tsebe ya thuso go itse thata). Ga o lefa ka phoso tobetsa boelamorago". Aunty Google translates this and says "You are following the link to this page, it is not available today. To create this page, start by filling in the following box (see the help page to know more). If you pay by mistake click reverse".

This is a bit garbled and it probably means that the instance is not being maintained. When I find confusing code, I look for other examples to draw on. The function is called https://www.wikidata.org/wiki/Q26127718 on wikidata. When I click on the Japanese version, I see the following

This might look a bit unfamiliar to some, but you can see the code in the tab called " ソースを閲覧" Go ahead and view the code there. What I do is I copy and past this code into a text editor. Then I translated bits of it.

[[File:{{#switch: {{{1|{{{type|}}}}}} | 1 = Gthumb.svg | 2 = Replace this image JA.svg | 3 = Requestpicture.JPG | #default = Gthumb.svg }}|{{#if: {{{2|{{{size|}}}}}} | {{{2|{{{size}}}}}} | {{#switch: {{{1|{{{type|}}}}}} | 2 = 150px | 3 = 230px | #default = {{{size}}} }} }}|link=commons:Special:UploadWizard]]
{{Clickable button|c:Special:UploadWizard|Upload Image|class=mw-ui-progressive}}

{{#switch: {{NAMESPACE}} | {{ns:0}} | {{ns:1}} = {{#if:{{{cat|}}} | [[Category:{{{cat}}} Image Request]] }} | #default= }}{{#if: {{{cat1|}}} | [[Category:{{{cat1}}} Image Request]] }}{{#if: {{{cat2|}}} | [[Category:{{{cat2}}} Image Request]] }}{{#if: {{{cat3|}}} | [[Image Request for Category:{{{cat3}}}]] }}{{#if: {{{cat4|}}} | [[Image Request for Category:{{{cat4}}}]] }}{{#if: {{{cat5|}}} | [[Image Request for Category:{{{cat5}}}]] }} {{Documentation}}

Step 2 | Copy and paste code for templates and modules

After pasting the code into the code frame, you can see a clickable picture in the view frame. This takes you to the Upload Wizard.

We want to also have a clickable button below (see the red link). So we create a Module:Clickable button and enter this code

-- This module implements {{clickable button 2}}.

local yesno = require('Module:Yesno')
local delink = require('Module:Delink')._delink

local p = {}

function p.main(frame)
local getArgs = require('Module:Arguments').getArgs
local args = getArgs(frame)
return p._main(args)
end

function p._main(args)
-- If first arg or a url is not provided,
-- but we have a second arg, make a button.
-- Otherwise, return nothing.
args.originalInput = args[1]
args[1] = delink({args[1]})
if args[1] == "" then
args[1] = nil
end

if not args[1] and not args.url then
    if args[2] then
        p.nolink = true
    else
        return ''
    end
end

local data = p.makeLinkData(args)
local link = p.renderLink(args.originalInput, data)
local trackingCategories = p.renderTrackingCategories(args)
return link .. trackingCategories

end

function p.makeLinkData(args)
local data = {}

-- Get the link and display values,
-- and find whether we are outputting
-- a wikilink or a URL.
if args.url then
    data.isUrl = true
    data.link = args.url
    if args[1] then
        data.display = args[1]
    elseif args[2] then
        data.display = args[2]
    else
        data.display = args.url
        p.urlisdisplay = true
    end
else
    data.isUrl = false
    p.urlisdisplay = false
    data.link = args[1]
    if args[2] then
        data.display = args[2]
    else
        data.display = args[1]
    end
    if args[1] and args[1]:find('http') then
        data.isUrl = true
    end
end

if yesno(args.link) == false then
    p.nolink = true
end

-- Colours
-- For the merge with {{clickable button}}
local colour = args.color and args.color:lower()

-- Classes
local class = args.class and args.class:lower()
data.classes = {}
if class == 'ui-button-green'
    or class == 'ui-button-blue'
    or class == 'ui-button-red'
then
    table.insert(
        data.classes,
        'submit ui-button ui-widget ui-state-default ui-corner-all'
            .. ' ui-button-text-only ui-button-text'
    )
else
    table.insert(data.classes, 'mw-ui-button')
end

--If class is unset,
--then let color determine class
if not class then
    if colour == 'blue' then
        class = 'mw-ui-progressive'
    elseif colour == 'red' then
        class = 'mw-ui-destructive'
    elseif colour == 'green' then
        class = 'mw-ui-constructive'
    end
end

if class then
    table.insert(data.classes, class)
end

-- Styles
do
    --[[
    -- Check whether we are on the same page as we have specified in
    -- args[1], but not if we are using a URL link, as then args[1] is only
    -- a display value. If we are currently on the page specified in
    -- args[1] make the button colour darker so that it stands out from
    -- other buttons on the page.
    --]]
    local success, linkTitle, currentTitle
    if not data.isUrl then
        currentTitle = mw.title.getCurrentTitle()
        success, linkTitle = pcall(mw.title.new, args[1])
    elseif p.urlisdisplay then
        currentTitle = mw.title.getCurrentTitle()
    end
    if success
        and linkTitle
        and mw.title.equals(currentTitle, linkTitle)
        and not p.urlisdisplay
    then
        if class == 'ui-button-blue'
            or class == 'mw-ui-progressive'
            or class == 'mw-ui-constructive'
        then
            data.backgroundColor = '#2962CB'
            data.color = '#fff'
        elseif class == 'ui-button-green' then
            data.backgroundColor = '#008B6D'
        elseif class == 'ui-button-red' or class == 'mw-ui-destructive' then
            data.backgroundColor = '#A6170F'
        else
            data.backgroundColor = '#CCC'
            data.color = '#666'
        end
    elseif p.urlisdisplay then
        data.dummyLink = tostring(currentTitle)
    end
    -- Add user-specified styles.
    data.style = args.style
end
return data

end

function p.renderLink(originalInput, data)
-- Render the display span tag.
local display
do
local displaySpan = mw.html.create('span')
for i, class in ipairs(data.classes or {}) do
displaySpan:addClass(class)
end

 displaySpan
        :css{
            ['background-color'] = data.backgroundColor,
            color = data.color
        }
    if data.style then
        displaySpan:cssText(data.style)
    end
    displaySpan:wikitext(data.display)
    display = tostring(displaySpan)
end

-- Render the link
local link
if originalInput and originalInput:find('|') then
    link = string.format('[[%s|%s]]', delink({originalInput, wikilinks = 'target'}), display)
elseif p.nolink then
    if p.urlisdisplay then
        link = string.format('[[%s|%s]]', data.dummyLink, display)
    else
        link = string.format('%s', display)
    end
else
    if data.isUrl then
        link = string.format('[%s %s]', data.link, display)
    else
        link = string.format('[[%s |%s]]', data.link, display)
    end
end

return string.format('<span class="plainlinks clickbutton">%s</span>', link)

end

function p.renderTrackingCategories(args)
if yesno(args.category) == false then
return ''
end
local class = args.class and args.class:lower()
if class == 'ui-button-green'
or class == 'ui-button-blue'
or class == 'ui-button-red'
then
return '[[Category:Pages using old style ui-button-color]]'
else
return ''
end
end

return p

Step 3 | Where are we ?

• Done | We have written the template shell called Laisa setshwantsho
• Done | We have added the code to go into the template shell called Laisa setshwantsho which calls on many pre-installed modules. It works but...
• Oops | The red line suggests tha there is a missing module called Clickable button
• Done |We have added the code to go into the Clickable button module.
• Todo | We now need a template with instructions to also call (or invoke) the Clickable button module

If you go back to https://tn.wikipedia.org/wiki/Tempolete:Laisa_setshwantsho you will still see two big gaps. A red link and no documentation.

We need to create a Template called Clickable button. Click on the red links and then add this code. Check to see if everything works

{{#invoke:Clickable button|main}}
{{documentation}}

Step 4 | Register the template on Wikidata

Now go to Wikidata and register this template:

Step 5 | Lets use {{Laisa setshwantsho}}

A template by the name Laisa setshwantsho has been created. You call a template with curly braces {{}}.

Step 6 | Application, testing and documentation

You can include and upload images function by referring to {{Laisa setshwantsho}}. The Template documentation (as you can see) is blank and it needs to be created, preferably in vernacular. I'll leave that for a person who writes in Setswana (aunty Google gets things wrong often) .

I'm going to demonstrate how I included this function in my sandbox. First I go to Derek J Moore in Setswana.

I turn on code view, look for the {{Infobox}} and insert the function {{Laisa setshwantsho}}.

There, the upload image function now sits in my pretty sandbox. Would appreciate it if you can improve the documentation.

*Thanks to Mario for the spell checking

References

Statesmen and their websites: Rhodes, https://rhodescottage.co.za/, Smuts, https://www.smutshouse.co.za/ , Xaba, https://www.trevorhuddleston.net/ Mandela https://www.nelsonmandela.org/news/entry/a-tale-of-two-houghton-houses, Mbeki https://mbeki.org/ and Motlante https://motlanthe.org/

To find out more about translation and the work of South African Wikipedians in vernacular, do visit https://translatewiki.net

Introduction:

Streetlights – it seems like there are far more pressing things to be irked about. But poorly maintained public lighting is a very visible instance of failing infrastructure and the opportunity to show that city management responds to reports and addresses them. An app to the rescue? That is magical thinking. Devices don’t bring about change. Systemic thinking does. Let’s avoid the pothole app solution. Perhaps there is someone in the municipality who can think wholistically about public safety and lighting and design an internal reporting system that encourages all municipal employees (and citizens) to do a streetlight watch (and doe not require the closure of a walk-in centre)? The specifications below are only for the application.

Features

Geolocation so that the latitude and longitude of the faulty street lamp can be mapped on a mapping service like leaflet. A photograph can be taken of the faulty light and shared for identification purposes. Textfield is available to report the nature of the problem in greater detail, but this should not be essential. User account so that reporters are acknowledged and appreciated. Data is submitted to an open database. The information then is available to all to inspect and it can can appear on an open street map (see the Daily Maverick example). Data can also be exported.

Schema for data flow

     Municipal Employees & Citizens
                │
                ▼
         Streetlight Watch 
                │
    ┌───────────┼───────────┐
    ▼           ▼           ▼
  GPS         PHOTO       REPORT
    │           │           │
    └───────────┼───────────┘
                ▼
       Insert to OPEN Database
                │
      ┌─────────┼─────────┐
      ▼         ▼         ▼
    MAP       ADMIN     EMAIL
              DASHBOARD  ALERT
                │
                ▼
         Maintenance Team
                │
                ▼
              FIXED

Noteworthy code

View the (incomplete) example on codepen.

Detailed Specs

• Analysis: Current system and the desired state. Data flow diagram. Performance indicators and standard user
• User Interface & Design: Choice of software, proposed new design, detailed design, template
• Testing: App documentation, Problem reporting and resolution flow, Functionality (GPS Location, Photo Upload, map functionality)
• Evaluation: Status Management, Report Numbers, Streetlights fixed

Credit to Pat Heathcote and her series of textbooks about ICT projects. Her work is far more comprehensive than this brief example.

This post is over a year late. Sorry peeps. It took a visit to Wikipedia 25 to pep me up. It was GREAT!

3 – 7 March 2025 was Open Education Week 2025 and I took part in one of the OEWeek Live conversational webcasts . Clockwise (from at top left), Bryan, Gracie from Visual Thinkery, Alan at OE Global playing the ever gracious host, Werner (Library of Congress), myself (I like giving a backstage view), and Connie (Athabasca University) who is not pictured.

This was an informal and spontaneous regular cross continental conversation. Two topics stood out for me.

• Bryan’s live demo of the Fabulous Remixer Machine
• Our conversation about humans and Ai

I’m a bit of a compulsive remixer. I mash up media components. I’ve played with PowerPoint and saved the layout of my slides as images in a PNG format. At one time, I spent lots of time on Adobe Express (the free version), arranging icons into patterns on a consistent colour palette (#002e67). Can’t license those images openly though.

.

Now Bryan’s Fabulous Remixer has a special flair. He makes use of well known patterns which become “cognitive templates”. Another piece of jargon? Let me explain.

In my mind, when you say “lampost”, I have a stored representation in my noggin that responds to this stimulus. I think about a tall pole standing straight up with a working light fixture on top. This is used for illuminating public spaces. Yes, check out my streetlight. Sadly you cannot save electricity and turn off the light. But you can toggle the switch from night time to day time. Which is very convenient.

So when you say postcard, I think of a postage stamp, address and short message. Bryan plays with this further with this idea with Field Notes and combines a taped photograph, a small note and a location. Now here in South Africa working streetlights are rare, and I can’t tell you when I last received a postcard. But these cognitive template still remain.

Now Bryan and Gracie have used creative and openly licensed layouts and applied a few cognitive templates to these visual arrangements. You feel creative because you can change and contextualize the information therein and what is generated feels like it comes from you.

I took the top trumps layout (the card game silly), inserted a logo, screenshot and book cover, selected own particular colours and added text. I now have a standard format and they can act as thumbnails or an image in a CSS card. If I was very able, I’d be able to use JSON and CSS to switch the images, colours and information. But without extra assistance, I’m struggling.

Confession

I’ve succumbed to chatgpt’s JIT assistance with javascript and CSS. Been having fun with cognitive templates, like slideshows, maps, badges, certificates and palettes. Below is another cognitive template:

When palette is mentioned, you might think of the kidney or rectangular boards with thumbholes, that artists use when painting with oil paints. That’s if you you know an artist or did art at school. Now not everyone went to a school with an art class, or have friends who are artists. And so there is no cognitive template there (like with me and SPARQL).

I did do art and have a number of friends and family who paint, sculpt and potter. Clearly this is true for the LLM. I took a shortcut and prompted chat gpt to draw a classic wooden artists palette. It refused parroting “Image generation requires you to log in. Once you’re logged in, I can create a classic wooden artist’s palette suitable for your CodePen project.” I refined my prompt “draw a classic wooden artists palette in HTMLS, CSS and JS for Codepen”. And of course it obliged.

Now again, this is way beyond my CSS or JS capabilities. But I can go to the brand colours of Wikimedia and learn how to switch between different palettes. Or to Online Higher Education Sites and see how they morph from one brand to another.

Yes, the second topic was Humans and Ai? And in a way I suspect that AI has a range of cognitive templates (or ontologies) that have been engineered. I’m able to draw and combine on these patterns. I’ve got another template developing in my head, and it has to do with the root folder, and look and feel can be quickly changed, depending who is visiting. More about that later.

References

Jenny Y Sung, Olivia K Harris, Nicholai M Hensley, Anthony P Chemero, Nathan I Morehouse, Beyond Cognitive Templates: Re-Examining Template Metaphors Used for Animal Recognition and Navigation, Integrative and Comparative Biology, Volume 61, Issue 3, September 2021, Pages 825–841, https://doi.org/10.1093/icb/icab040