reply
|

đź’¬ Replied to: a post

“Which leads me to the question: Is there an easy way to determine the total load size of a webpage (including dependencies / includes like stylesheet images and such)?”

an author ( )

I use the browser developer tools’ network tab to help determine the size of a page (usually accessed through the F12 key). Disable the cache before reloading, and most will tell you the combined size of every request which makes up the page, and the amount of data sent over the network. You can also (imperfectly) test the page under different network speed conditions if you want.

For example, Firefox says the post I’m replying to comes in at ~796KB, including all resources (uncached). 299KB of that is your header image, and 38KB is the HTML itself. My entire home page was 1.5MB, until I turned off embedding Tweets and Instagram widgets a moment ago. Now it’s around 492KB (but only text). It just goes to show you how much those external resources can pump the size up!

Page weight and excessive resources is something I’ve tried to stay conscious of when developing my site. Previous iterations have been better at this than what it is now – which is pretty far from “heavy” – but I’m still hoping to trim things back further.

bookmark

|

đź”– Bookmarked: Look Ma, No Media Queries! Responsive Layouts Using CSS Grid

“In this article, we’ll start dipping our toes into the power of CSS Grid by building a couple of common responsive navigation layouts. It’s easier than what you may think, and since CSS Grid was built with responsiveness in mind, it’ll take less code than writing media queries all over the place. Let’s do this!”

I might switch my current gallery code to use CSS Grid instead of Bootstrap’s “Card” system (built on Flexbox).

CSS has come such a long way since I started using it earnestly, circa 2001.

article

|

Why isn’t the internet more fun and weird? by Jarred Sumner

“MySpace inspired a generation of teenagers to learn how to code. We have Dark Mode now, but where did all the glitter go?”

I may be showing my age here, but I was never on MySpace. That said, this blog post (and the CodeBlog service it’s advertising) reminds me a lot of platforms I do remember, like Tripod and Geocities. Pages were built from raw HTML, and adorned with all sorts of widgets found on places like DynamicDrive and BraveNet. The <blink> tag ran rampant! Early Tumblr had a similar vibe, but look how that turned out.

These early services were places you could experiment and explore until you had the confidence, skills (and cash) to get your own domain name and server. Nowadays anyone can have their own domain and site quickly and cheaply on somewhere like WordPress.com/Blogger, but they are very cookie-cutter and locked down. Even using self-hosted tools like WordPress.org reign-in a lot of the free-form creativity.

One of the reasons I love Kicks Condor is because of how anachronistic and fun it looks; I can easily imagine 15 year-old me, magazine HTML tutorial in hand and full of enthusiasm to learn something fresh and new, creating something similar by accident and having a blast doing it.

By making things easier, more accessible – and safer – it feels like we’ve hidden away the building blocks. It’s harder for people to get at the pieces they need to try their own thing out of curiosity. Can you imagine if LEGO pieces were keyed to only fit a certain way, so you could only build what was shown on the box art?

Shared to IndieWeb.xyz and IndieNews

bookmark

|

đź”– Bookmarked: Paying tribute to the web with View Source by an author

“I owe much of my career to View Source. It’s what got me started with web development in the first place. Going to sites that I liked, learning how they did what they did. Yes, I also bought a bunch of animal books from O’Reilly, and I read WIRED’s Webmonkey, and the web was full of tutorials even then. But it’s not the same. Seeing how something real is built puts the individual pieces of the puzzle together in a way that sample code or abstract lessons just don’t.”

an author ( )

I love View Source. I still use it daily. I’m not a person who builds sites in JavaScript – that’s never really been my thing. I love to craft in HTML. I get annoyed when I can’t alter or overwrite the output HTML of a WordPress function or plugin, and have been known to reimplement it myself if necessary.

Right now, K is a lot messier under the hood than I’d like. Once things are a bit more defined I intend to go back and clean it up so the output source is as readable as possible (proper and consistent indenting and the like), and the structure is better from a POSH point of view.

Shared to IndieWeb.xyz.

note

|

I implemented proper pagination between archive pages last night, which should help making getting around the site slightly easier. I still need to implement pagination for pages/posts that are split into distinct pages. I’m not going to implement comment pagination, because I don’t like it.

Alongside this, I’ve added some templates for archive pages and search results. There’s nothing much to these, but it does give me flexibility to give these their own special formatting if I want to.

I need to come up with a better archive page than the current “Sitemap”. The current “design” was inspired by the archive page on Daring Fireball. It works fine if you’re only posting a couple of items a week, but in January I posted 112 items1. I’ll probably keep the sitemap for discoverability purposes, but a more friendly archive page has been added to the todo list.

  1. That’s almost twice the previous high water mark of August 2018. ↩
article

|

I mentioned before the festive break that I was thinking about open-sourcing “K”, the custom theme I’ve been developing for this site. Since then, I’ve decided I’m going to do it, but I’m going to work to tidy things up beforehand. Some of this has already happened, some of it is yet to be done. For a bit of fun, I’m going to [try to] blog about it whenever I make some progress ?. All-in-all, I’ve identified three main themes I want to focus on before the intial public commits.

My first job is to make the theme more “generic.” As I mentioned, the theme has been very much a hacking together of what I’ve needed, as I’ve needed it. This means a lot of it isn’t as customisable as people expect a modern WordPress theme to be. For example:

  • The site logo is an embeded SVG, rather than an image that can be swapped out in the WordPress Customiser.
  • The sidebar was, until recently, entirely hardcoded HTML.

I’ve made some progress here – there’s now a “widget area” in the sidebar – but my custom author h-card is still mostly manual (although it does use a WordPress menu for the social profile links). I think I’m going to recreate this as a bundled widget. I could try using the IndieWeb h-card widget, but I liked having the flexibility of my manually crafted card, and the IndieWeb version doesn’t support multiple profiles at the same service.

The second main focus is going to be standards support. I want the markup to be as fully compatible with MF2 and structured data as possible. I’ve spent hours debugging this so far, and I think I have it mostly sorted. IndieWebify.me picks up everything I expect it to, and every parser/validator I’ve thrown at the different pages and types of content have come back correct to my eye. For some reason, IndieNews hasn’t liked any of my submitted posts, but that’s lower priority for now. I haven’t done much with marking up elements like comments, but the main page/blog post/author details seem to be correct.

Finally, the third focus is on the code quality and maintenance. This loops back to the customisability/flexibility theme as well. By its cobbled-together nature, “K” has been a bit… loose in the quality of the PHP code, and the frontend files were/are a nightmare to maintain. Up to now I’ve used a hacked to pieces copy of Bootstrap with a bunch of customisations on top to provide the layout framework (literally just the rules I needed, obtained through UnCSS), and a similarly cutdown set of FontAwesome icons. That’s fine for my use case – even if it has been a faff to add to the site – but it won’t work for other people.

I’ve started adding a build system for these frontend files, but it does mean I’m probably going to have to include the entirety of the minimised version of Bootstrap, and the full FontAwesome SVG sprites. Unless someone has a good suggestion? Unstyle has a CLI tool, but integrating that is probably a step beyind what’s needed for the moment. I haven’t added FontAwesome to the live site yet, but this page should be using the new style.css that’s been compiled from SCSS.

On the PHP side I’ve started making sure it conforms to at least the WordPress Coding Standards. There’s still a few files to update, but functions.php and most of the template files are done. After that I want to make sure everything is as modular as possible. I’ll need to add files to handle the various post-types, error pages, and other screens a more rounded theme would handle. I’ll also be bundling a selection of Post-Kinds templates, once I figure out how I want to display them on this site.

There are other things that will need done no doubt, but these are where I want to focus my efforts for now.

Not all of them need to be fully completed before “K” gets open-sourced, but I would feel a lot more comfortable if at least the first steps were taken along these paths. It is a little dependent on having enough free-time, but I’ve set a goal of uploading to GitHub by the end of the month.

If you have any suggestions, or other feedback, please do let me know — either as a comment below, or on your own site.

article

|

That cool little “Coder for Raspberry Pi” project from Google which I linked to earlier doesn’t just run on Raspberry Pi. You can run it on any old Linux PC (Mac works too, but the instructions are slightly different).

I set it up in less than 2 minutes using these commands (note that I’m running Debian Sid):

sudo useradd -M pi
sudo apt-get install redis-server
cd ~/projects
git clone https://github.com/googlecreativelab/coder.git
cd coder/coder-base
npm install
npm start

Node.js is also a requirement, so if you don’t have that, you’ll need to install that at step 2 as well.

Once everything is up and running, point your browser at https://localhost:8081/. You’ll need to specify a password the first time you run Coder, after which you’ll be able to try the environment out. It’s pretty neat, and the sample clone of Asteroids is quite addictive!

note

|

the CodeIgniter logoMost of my small personal projects tend to get built with CodeIgniter (CI), which is a simple to use, fast, lightweight PHP5 MVC framework.

the Facebook logoFor a while now I’ve had an itch to build something fun against the Facebook API so I can start learning how Open Graph works, and as a primer to building a “proper” Facebook integrated application. I also realised I hadn’t actually tried using CodeIgniter 2.x since it was released (quite some time ago). With an abundance of free time this weekend it seemed like the perfect time to get hacking!

Before I could build anything I would need to know one thing: just how do you connect a CodeIgniter app to Facebook?

Continue reading →

note

|

I’ll start this one by quoting a comment I made over on Joshuaink –

I go through phases where I don’t feel a lot of enthusiasm for my blog. Usually, I find this is an indicator that I’m fed-up of the design… strange as it may sound, I find the design of my site dictates the type of thing I want to/feel I have to write about. When I launched the current design, I went through a phase where I felt that I had to write “professional”-style posts on web development techniques… but that’s not really something I can write about for long. It’s like taking your work home with you – you soon get fed-up and pissed off.
I guess my point on that is that a design can not only influence a visitors perception of your site, but your own. Yeah, something like that…

I’ve added my own emphasis to the important bits.

Until yesterday, this wasn’t really something I thought too much about. I think (as a web developer) I get too wrapped up in how I think others perceive my blog (including the design) to remember the number one reason to blog – as a personal form of expression. Our blogs are for (usually) for ourselves and I think it is something many of us forget. Maybe it’s why some of us take criticism of our blogs so badly.

A blogger is a writer, and a writer needs inspiration. One of the closest and easiest sources of inspiration to hand, is our own blogs. The problem is, I think many of us (and I count myself here) try too hard to please and impress others. Particularly the “showcase” sites (Stylegala, etc) perhaps, but that’s another rant.

In a post over at Binary Bonsai, Michael Heilemann acknowledges his site design influences his writing and for that reason he is currently having trouble with inspiration/motivation. He specifically mentions I need to carve out a more personalized space for me to feel at home – this is exactly how I am feeling at the moment.

Do you also feel you have to write about certain subjects or with a certain writing style, due to the design of your blog?