Lawrence Brown

Making my own bit of Internet

I’m a hobbyist web designer. This website is designed, written and coded in public. So you’ll occasionally see elements that might not look as they should. I make progression weblog entries below so I can refer back to them. I’m in the initial phase of a long term project to grow this website.

The content across my site is multipurpose: a portfolio of work, a commonplace book for my interests, a reference guide for design operations and a photos area to replace Instagram. Today, the way we use computers and web has become a place of closed apps, databases, networks and platforms that we don’t get any say on how they work and what implications our loyalty comes with. My goal is to enjoy coding, designing and self-publishing anything I might need to refer to later, show someone or document to understand it better myself.

I process my ideas and thoughts by documenting this project online. You can read more about my thinking and approach to the web, view the planned phases for making this website, see what tasks are in the backlog and view my Github repo. Once I’m happy with my Figma workflow that will be accessible here too.

Weblog

24 May 2022
Pagination turned out to be a messy task, I think the solution for the photos page is to rewrite the custom query following these guides. It got me wondering if it is worth delaying until I rewrite the theme and potentially drop the ACF method in favour of vanilla posts. For now there is a paginator running on photos which I believe I can style up and hide what I don’t need. I’m looking for a simple “load more photos” link.

Both webposts and photos now have a smaller number loading which is less likely to cause a headache. Styling these is next. I also learnt that naming a page the same as a custom post type causes a 404 – which led to the photo feature second page onwards not even working to start with. For now, this can wait while I focus back on content for the next set of tasks. Design Ops section needs a lot of attention and this is an unhelpful distraction.

23 May 2022
Added plan phases, production principles, Notion backlog and updated this page header content – ‘making my own bit own internet’ pages. All content tasks with sketches and re-writing a handful of scrappy notes. The result feels like a fair capture of the last few years of messy notes, it’s satisfying to get it down and live. Had a 10 minute play with Procreate on Hollie’s iPad, results below. Bottom timeline is best one, set on grid with a range of colour. Creating a set of these is now on the backlog.

Very quick look at sub nav in the main nav, not a fan of this at all. Current bet is that card ui in the top two level of the pages will be better. Also sampled a breadcrumb at the top of the page, it’s looking a bit too tight, might need to consider the spacing and rhythm at the top.

22 May 2022
Making is back! and there has been a lot of progression in the last couple of months. The /photos feature has been bubbling away in the background as years of snaps have been uploaded. Responsive views were added to display a grid of three across and a single photo in the most basic layout. An initial design was created in Figma, a blend of card ui and documentation styles. This design was quickly added to the existing wp theme, which, created a nightmare. Styles were everywhere, random tags and containers with no sense to what was going on. I went back to basics and created a one page prototype that used only the tags and styles I needed, stripped out the theme and got the display to match the prototype. Responsive rules were created in browser, looking at breakpoints and snaps of the primary containers. I wanted to create a series of views that had strong negative space margins rather than percentage filling everything. That might well get reconsidered later on. Content has taken a huge leap with homepage, about, self initiated and Design Ops pages placeholders, initial notes and early drafts. All are public and being added to just in time.

I’ve taken some time to go through old sketches, notes and rambling of what I want from making a site and this is now all in a phased plan, with principles and a backlog. Github is back up and running too. The next couple of months will likely be a balance of writing scrappy draft content, assessing what I don’t like about it, considering what design components are needed and quickly coding what I need. Further info on the big picture is all in the phased plan page. For now, I’m going to cap this entry, record a walk through on screencast and move on to the next entries looking at the detail of the backlog. Lots of foundational work done, very happy.

7 June 2021
In the spirit of “good enough that it kinda works” there are now four features/sites in progress and coding live. This site, a photos feature and two visual directory sites – technista/house inventory.

  1. Personal site
  2. Instagram clone
  3. Homeware directory
  4. Technista directory

I’m following the path of least resistance and the worst practices I know by casually flinging around files on FTP and tucking into quick fixes, copy and paste jobs of code and moving onto the next item. It seems logical that I converge these four project areas into one area with a set of features that aim to become universal over time. This will be for the value of styling, design system and component logic. As an added bonus there should be fewer places to manage. Wait. This is starting to sound like a terrible idea. This could be more shuffling and less making. Oh bum. Let’s do a five minute list

16 June 2020
Lost hours to localhost setup. I think because I’m pulling down a mysql export and importing it locally it’s messing with my urls in a few places because they are hard coded into the database file. Not sure. It needs further reading on the best approach (when MAMP can’t push). It looks like a MAMP pull worked and overwrite the url errors. Frustrating. Menu is now in. Using some very basic and what feels like slightly clunky javascript techniques, but, it’s working fine for what I need right now.

CSS file is getting very messy. Especially as I’ve just slapped a few extra lines here and there to get display ideas working. Refactoring is definitely on the cards very soon. Mobile styles added to try and improve the terrible view. Design frames needed for home pretty soon. OK progression for now, just not looking that sexy yet.

10 June 2020
Post template now has the correct styling from the designs, a few type tweaks are still required for the rendering and some definition around hover transitions need adding to the backlog. Ripped out Gravatar after a Safari issue not showing the images, slow to update and seems buggy as a service. Now I’m running my own profile data off [Options] which is fine until I start needing [Users] within the model of the site. There are already quite a few messy type stack classes floating around in the style sheet, probably best at this stage to re-define in design once I’ve got a render I’m happy with in the browser. Set some strict rules, when I know what I want to be strict about. Comments disabled across the site, author links to my email address, I’m wondering what else I could implement that would be valuable or interesting for a message or discussion service.

Got in for a second and third update. Menu system now running off WP, looks like I can use the ACF plugin to add classes and details to the menu too. Thinking about how to utilise menus across the site.

Next: Menus

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.

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:

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:

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)