This website is being designed and rebuilt in public view, read about the progress.

Building my Own Bit of Internet

🚦Status: Coding post pages


I’m frustrated by inflexible web systems, monetisation traps and fragmented services. So, I have started creating a space for what I need and want to use.

I’ve been thinking about exactly how I approach making my own website for too long. My mind has been busy with ideas. Too many of them. From an always available operating system approach to information and tasks, to a reference catalogue which is a data driven web diary. The issue is, I’m often prioritising thinking time than prioritising doing time.

Right now, the approach has changed. I’m concentrating on writing to the server every day, be it creating a bit of content, a few lines of functional code or designing in the browser. This page is a minimal weblog of progression, ideas, tasks and notes. It’s mostly scatty note taking for me to purge and reflect.

Open Project Trello Board

Open Dropmark Designs

Project Principles

There’s a lot of ideas buzzing around in my mind, I want to define some basic principles to help guide what I’m making and how I make it.

  • Make directly on the web as often as possible – compound interest
  • Publish first, organise later
  • Think in database tables

Weblog

22 May 2020
Spent a 30 min session fixing the footer_entry section. Two footers blocks appeared to rendering, turned out an inc/template-parts.php function was causing my issues. Always check what the random functions do, are they Codex or Theme based, what’s in their array.

Now I’m running a simple “edit” link when logged in via the footer menu. Styled hot pink too. Next up is looking the tragic design at the end of blog posts, tags, author etc.


30 April 2020
The last few weeks have been dedicated to preparing for and raising a puppy. Peaches, a F2 Pomsky is now part of our home and family.


12 April 2020
It’s funny how one thing leads to another. I’ve found myself trying to create more features for image management to display the designs I’ve been working on. The designs are for features yet built. Like a design Russian doll, there appears to be an infinite amount of design tasks coupled to each other, all with a range of options, trade-offs, experience and archivist principles. Another day, another feature in the back-log.

The conclusion is I want my own basic version of InVision inside this website. Displaying a few images can get quite complex. For now, I’m going to use my Dropmark account to stash all the boards as a history view. Comping a quick view in Sketch works okay too.

Pictured above, a few options and experiments for the end of the post page design. I want a few things to happen here:

  1. Make a new reader aware of who I am
  2. Show the categorisation (tags) of the content
  3. Show the breadth of content available on the site

I’ve been working with Inter and Lora for typefaces. Tags are probably better being knocked back in colour so they are not the first thing your eyes draw to. Read next module is more comfortable in the playlist style, I’m not a big image fan and there’s the possibility the playlist component can be resurface across the site too. It feels like it has more uniqueness. This morning I started off trying to get a big and bold typographic option to recommend the next post, in my head this felt like the most elegant and minimal approach, but in design comps it felt too at odds with the rest of the page and limiting to show breadth of content. Tomorrow will focus on coding and styling, code will probably have to be very basic at this point.

Finally, I need to stick the_content back in to the pages to make sure I’m not breaking loads of native WP views to early in the theme development.

 


11 April 2020
Housekeeping focus, cleaned up my finder structure on my machine — shit, that reminds me, I need to turn Google Drive sync back on, ok, it’s on — made sure other inbox folders had project assets refiled. Created an Alfred workflow to get me all set-up when it comes to working on the project. I still need to audit my code and add to gist when I find useful stuff I forget. Tomorrow is back to designing to finish (for now) the post pages.


10 April 2020
Development is a scatter gunned at the moment as I went into making the custom post types as part of the posts feature. From here on I will concentrate on finishing ‘painting some of the edges’ of posts so I can move onto the next feature, get more design in and more content. Today, the links are now in and getting the data from the custom fields.

  • /content-links.php has raw code in
  • /archive-links.php is pulling all
  • /single-links.php is running and pointing to content-links.php

Biggest issue is [tags], I’m using these to define how the links are organised but this presents two problems.

  1. the tags are at the base url – so we have /tag/apps/ pulling blog posts not link posts
  2. the tags url redirect needs to be at /links/tag so we don’t see the above problem and have nice clean urls.

Final idea for the day is to create a housekeeping to-do list of stuff I can do when my coding brain is not on or I’m just on my phone playing around. Adding this to Trello now


9 April 2020
Started organising /links taxonomy in Mindnode, too many categories will start to make it all unusable and not focused. Short day on project.


8 April 2020
What would search look like on this site? A: type to start searching, live results, Algolia api, brings back anything I need
Custom post “links” wasn’t displaying on post or archive view. Another beautiful rusty brain moment where I forgot that single.php exists and to duplicate archive and rename it. Yeah, amazingly stupid. All in and working now, also changed /link/ to /links/ as they are a collection of links once you visit that page. Now I’ve got the task of getting all the data in, 400 records, which I think I will do manually, with the exception of the screenshots — they need to be done using an automated process at a later stage.

The grouping of the links is a tough one to solve right now. Feels like a lot of taxonomy leg work to get right, perhaps I pick a few main categories now and get on with it all.


7 April 2020
Moved all done to-do’s to Trello board, it was getting too cluttered here. Post template (early version) nearly done.

I had commented out article containers at the top of content pages, these are now back in. Template tags copy edited from “Posted” to “Written”. the_post_navigation removed from index.php, single.php. get_edit_post_link also removed, see below, this needs to go back in using a fixed container, perhaps a small edit button

Downloaded .sql remote database and uploaded to local, got WordPress in an endless loop managing an upgrade so rolled back, upgraded, re-uploaded and used define in wp-config.php to fix the redirect to remote on login at local.

define('WP_HOME','https://locallarry:8890');
define('WP_SITEURL','https://locallarry:8890');


6 April 2020
ACF Options added in for footer, pulling database fields into quick and dirty html
CSS added for black footer, content not yet decided, placeholder stuff for now
Comments and edit section was set the display: none – turned that off and now have a mess at the bottom of the page. I want to find a balance with comments on a page where it feels more like you’re contributing to the progression of the content. Hollie mentioned that one or zero comments just looks lonely or sad. She’s not wrong. For now, all comments will be turned off and I will look at a manual way of messaging. I would like it a messaging system over a comment, somewhere between a bot and a WhatsApp style trigger.
I’ve added in function my_custom_post() { to separate out saved links from writing posts, this should help start to shape posts to feel more CMS ready and less blog like. The custom archive.php page is failing right now, pulling a 404 in instead, I need to re-read set-up process on this


4 April 2020
Fixed CSS img object-fit: cover
Messed around with footer, deleted it and will start again in ACF options feature
Researched what I want in a footer, I feel it will probably be closer to a set functional meta data set


3 April 2020
Focus today = Feature Post Page.
Tags are in, no styling but okay mark-up for now.
Profile avatar is in with link to my email, that’s probably a bad idea?
It all needs a styling now, perhaps a little bit of documentation
Tear down of older themes needed too – adding to Trello tasks


2 April 2020
Upgraded WordPress to 5.4, ran backups to local. New editor uses blocks and custom fields at the core, I need to read more on this later so I can utilise the block editor for people at work. Wrote and thought about the following needs:

  • Strategy content area must be a contained designed – think Sunday newspaper magazine
  • Keep readers in the content theme (cooking is cooking, strategy is strategy)
  • Define what services I want to use in the project (save urls, book notes)
  • Navigation will probably need a small, medium, large model to manage dataset
  • Further reading needed on how much of WordPress codex I want to use and understand

Favicon added for iOS, not working in dashboard view to theme views. Needs thought around why and when I need a home screen shortcut – e.g. launch book notes in add note view. It’s still insane how many favicon’s are needed for a web page.


1 April 2020
I’ve already written this once. Stupidly, I closed the tab and didn’t save it, let’s see if I remember what I wrote. Homepage 001 spike – all fields added in table, pulled using php and rendered with a tiny bit of html/css (garbage code). Feels very good.

Observations from spike:

  1. Quantity vs Quality trade-offs. Do you spend more time getting more content into databases and rendering it or do you spend more time styling the content to look pretty? Spikes need intention, this 001 spike was about the php for me, get it working then worry about things looking pretty. I need to plan my next spike now
  2. The quick hot mess of css. I’m already in a mess with my style sheet and need to read up on best practice of how I approach structure. Although, using TACYONS may well just give me what I need. Perhaps, I plan to scrap my mark-up display code in a few weeks time and refactor using a framework.
  3. Design hierarchy and rules are hard. It’s another run away train, before you know it a bit of designing in the browser gives you a bunch of elements messed up, I know theres better ways to go about my practice. For now this dirty approach will do, damn, it’s a spike son.

I’m going to review all the to-do’s. Close this spike 001 up here. Define a new one and hopefully create a more structured plan. Reusable parts is top of mind too.

 

A few other thoughts:

  • Making has mindsets. Learning how to make it. Understanding what you can make. Gathering the content. Editing the content. Researching the best practice. It gets complicated quick. Is it a good idea to spend time collecting client logos if you don’t know if you will use them? Is this too Archivist?
  • Writing and making sharpens your idea. Having to put pen to paper, idea into code and so on, it starts to make sense of the volume of questions:
    • Content
    • Data
    • Design
    • Experience
    • Hierarchy
    • Database
    • Use cases
    • Organisation + order
    • Code
    • Practice + Learning

31 March 2020
Today is all about content, thinking about content and how it gets used or read (meta data or writing). I have extended the database of projects I built a few years ago, 15 minutes a day on writing, server searching and filling out should get more closer to the goal. This is a question of balancing being an archivist (collecting) vs being a writer (storytelling). Which leads to the age old question … who is the audience?

Sketching out thumbnail options (beloew) for navigating and representing work. I want to find a style that fits my production values and approach – not something that just looks pretty – art directed images have zero representation of my production efforts, I’m more suited to an abstract/colour/pattern, almost like a lining of a jacket (bit wanky, yeah). But, the point is, I don’t craft the art direction – that’s not my domain.

I’ve also been thinking about interaction patterns for these thumbnails – using X,Y to edit the values.

Finally, the dreaded logo parade / collection. I’ve built a basic template in Illustrator to start setting them to a 25% X height of their bounding container. Grotty job, so I will look at chipping away a bit of these every day until I have all the ones I need and they end up feeling more like a database asset than a styling device. Makes sense for all to be exported in SVG later once rounded up.


30 March 2020
Fresh eyes are a good thing. Solved the “h” issue with the repeater link field. I had the output set to link not array. Rookie error for sure. Problem solved now though and onto getting some real content and styling down.

I wondered about adding the theme menu CSS back in to style up a basic menu, however, the nested menu on mobile seemed to make more mess that it was worth.

Speed of local development is much better than dragging a file over via FTP client the whole time. Closer to a flow state of sorts.


29 March 2020
Cleaned up Evernote code snippets, inspiration / notes file, planning file.


28 March 2020
More twiddling with local set-up a bit further: MAMP local now running with database and files, the Remote feature is pulling down the site and database, however it can’t do a push. The error message is about writing to a /tmp file which could be to do with the permissions on the machine I’m on. Acid test on a spare machine will show me, which will be a good to have on a back-up working process. Still, requires way more reading up to get a feel for most effective process. Back to coding! This was just a mess around in the morning.

Workflow now down the tasks list, I’m back looking at the custom fields on the homepage spike. Ran into an issue with loop ending after the first h, image below is a capture of some of the array code I’ve been working with, all ending early – not sure why. No menu for now then, going to go back to YouTube tutorials for these.

Carried on by making the posts repeater come in, this is working well, containers are basic for now and need a wrapper to hold them in the middle of the page. Next up, the rest of the fields in and research patterns.


27 March 2020
Set-up GitHub Desktop, syncing to a repository. Checked in with Andy Appleton on my approach to dev workflow, see if I can get any suggestions for best practice. Looks like syncing via MAMP will be the best for a “push” of database and code. Tutorials on this in the queue. Focus needs to get back to content and code.


26 March 2020
Downloaded GitHub Desktop. Thought about creating patterns that can be used many times, what goes beyond the design system/pattern library? The actual logic?

I’ve been thinking about raw functionality aesthetics. Design Twitter complaining all things look the same. I need to think this one through, I want to be somewhere between Indexhibit brutalism and every single chat/media app and service in the world. Perhaps there is inspiration to be found in architecture for this one.

 


25 March 2020
Created a page-slug.php template in theme. Linked this to content-homepage-spike001.php in the ‘template-parts’ of theme. This activates the theme chooser in the attributes, gives me a dedicated set of files to work in for the spike, saves creating endless layout fields in the rest of the site. Keeps the spikes focused. Reading Settings back to : Homepage page, set-up a “Spike001” page and hopefully I can look at making these incremental – is there value in incremental versioning homepages? Could be lots of dev effort, let’s see if how it works.

I need to solve a faster/smarter way of working on machine/server and backing up — version control of some sort. GitHubDesktop install later, move project across to having a history, clean up local HD and workflow.

Initial custom fields set-up in their own spike entry, page and render.

 


24 March 2020
Added standardised CSS breakpoints – read about here – which came up at work and figuring the stack out there. 360, 768, 1366, 1920px all now waiting for some variables. Most of the effort was spent thinking today, not much code. Production spike of homepage starts tomorrow.


23 March 2020
Updated homepage settings to standard loop and look for content-homepage.php – this means I need a new homepage design quick. Currently pulling standard posts only, this could use a category based query for strategy category only. Sketched a few patterns that I like using and feel logical to sort/find and use. Moved these into sketch and have an early design+build concept. Started researching Google’s “search gallery” patterns, I’m looking for ideas around speed of reading datasets and navigating X,Y for viewports. More here on Search Gallery and how exactly to drive these in data here

Drew a few patterns down on sketch paper and created a greatest hits for a version one of the homepage in Sketch app, this will be treated like a rough a ready spike, probably all custom fields with no logical, get the skeleton done.


22 March 2020
Started off with .wp-caption styling, learnt a css technique: content: "\25B4 "; which allows a character to be placed in position, using it for an up arrow to sit far left on the caption. I’m aiming for a close caption that holds feels like it holds a bit of grid. For now the basic styling feels ok, I’d like to look at advanced options for several pictures and caption areas that take up a limited grid width. For now though, bigger problems to solve, so on with mobile CSS. Added some basic styling for the code tag, seen above. Monospace fonts need solving later too, I will focus that around typeface width and readability in tables. Very basic mobile CSS (for container elements only) is live. More tweaking to come with typefaces and mobile later.

Signed back-up for Amazon Associates, Uber blog post has new working affiliate links. YouTube watch later is filled with stacks of videos to watch on it.  Pondering how to run books… just like links?, do they use whole posts in the database? Seems overkill but super helpful for url and queries in the future. Started collecting scraps of screenshots for stuff I like, colours, layouts, typesetting. I haven’t yet defined much of a style/feel for what I want.


21 March 2020
Trying to make sense of menu items. Feeling is this will move about a lot, stuff with names that are not obvious should ideally be navigated by image and description blocks. Next step is to write down verbatim each category item’s details, idea and collect imagery. The site should appear very shallow to start with and over time build up. Moving all storage of WP codex/ACF and CSS learning to my https://gist.github.com/lawrencebrown gist page. Let’s see how the embed blocks work here:

Ideally I can blog these inline to remind me when I read back. I’ve added a browsershots plugin, no meta data is retrieved from the url – other than image – which seems a waste of effort. Still can’t work out if it’s a good idea to put all the urls into posts. This could be bad because: ugly over time, hard to quickly edit, no simple way to export share… however, a bit of SQL and field work could get around this?

The taxonomy below is slowly making sense. Purple highlights naming that needs solving, not yet chosen labels for stuff. “Selected Works” will be way better than “Portfolio”.

Work in progress taxonomy

20 March 2020
Added all content from Medium posts. Interesting idea at https://urbit.org/ about a “personal os”, needs more research to exactly what it’s achieving. Very early scamps in Sketch’s boxes started, it instantly got me thinking back to the early days of designing in browser – perhaps 37Signals, now Basecamp – now https://m.signalvnoise.com/Next, I think, is getting these patterns into the site rather than Sketch, at least get a feel of the content first. I want to solve: 1. A list of posts 2. A link card (if that’s what it’s called) 3. Colour block layout (John Pawson style)