đź’¬ 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.

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

đź”– 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.

The beauty of web development is that, ultimately, the code behind it is simple. Yes, web apps have taken leaps and bounds over the last few years, and are capable of so much more than ever before, but lets face it – we’re not exactly writing DNA sequencers. Yet.

It frustrates me when I find someone has made life difficult for themselves or the person who will inherit their code, by using the wrong tool for the job. I’m not claiming to be a saint here either – I often look back at some of my own code and shudder (it helps keep me right in the future!).

Consider the following snippet, from the View (presentation) file of an MVC app I inherited:

<?php
echo "<h1>$category</h1>";
echo "<h3>$company ($name)</h3>";
echo "<p>";
echo "$address<br />";
echo "$town<br />";
echo "$city<br />";
echo "$post_code<br />";
echo "$phone<br />";
echo "$email<br />";
echo "</p>";
echo "<br />";
echo "<br />";
?>

PHP needs to be used to output the data passed from the Controller, yes, but there’s no need for it to be outputting the HTML too. Let HTML itself worry about that!

<h1><?= $category ?></h1>
<div>
<h3><?= $company ?> (<span><?= $name ?></span>)</h3>
<address>
<span><?= $address ?></span>
<span><?= $town ?></span>
<span><?= $city ?></span>
<span><?= $post_code ?></span>
<span><?= $phone ?> </span>
<span><?= $email ?></span>
</address>
</div>

I don’t know about you, but the HTML-based version above is easier to follow and spot coding errors. No doubt someone will point out there’s more HTML tags/bytes in this example than the first, but that is because I coded it with semantics and microformats in mind; add in the right classes and you suddenly have a hCard.

Possibly more importantly in my mind, the HTML example is easier to follow for someone who isn’t PHP literate, like many front-end designers I know.

I’m picking on this example as it’s the most recent I’ve come across, and the first to come hand. It’s not the first example I’ve come across, it won’t be the last, and it’s certainly not the worst!

Pure, simple HTML can be a wondrous thing. Lets try not to spoil it by abusing it with our fancy server-side languages. K.I.S.S!

I loves me some jQuery – without it I probably wouldn’t write any JavaScript at all (seriously, I hate the stuff). Anyway, today I needed to add some “open in new window” links to an internal application using jQuery. Being the Standardista I am, I wanted to make it a)Accessible, and b) Unobtrusive . If the user has JavaScript disabled (it happens, even on “controlled”, intranet environments), the link should just go to the new page anyway — new window be damned.

My first attempt (below) didn’t work as expected. The following code takes all <a> tags with a class of “newwindow” and applies an onclick event to open a new window.

$(function(){
$('a.newwindow').click(function(){
var w = window.open($(this).href(), 'newWindow', '');
return false;
});
});

Nothing would happen with the above, because of the return false;. Removing return false; would open a new window, but also send the opening window to the new page. In the end, the following worked the way I wanted:

$(function(){
$('a.newwindow').click(function(){
var w = newWindow($(this).href(), 'newWindow', '');
return false;
});
});
function newWindow(url, wName, opts){
w = window.open(url, wName, opts);
return true;
}

Basically the “heavy lifting” was moved to a seperate function. It’s slightly longer to type, but not exactly finger-breaking stuff. No doubt some bright-spark could tell me an even betterway (feel free!), but this’ll do for now.

I’ve finally taken my first steps with ASP.NET. I’ve only done some basic research and examples and all I can say, is that it’s one f*cking powerful choice for developing web applications… It’s so far ahead of vanilla ASP that it’s terrifying. It’s great being able to use another computationally complete language. ASP.NET is so much faster as well.

Shame that it costs a lot to actually roll out anywhere. Your average Windows Server license doesn’t come cheap and IIS is pretty much the only way web server that works. Neither are most of the tools cheap. Naturally, the ideal way to develop with .NET is with Visual .NET Studio (megabucks) and use SQL Server (again, megabucks) as the backend.

However, there is an alternative. Actually, there’s 2 – but I can’t get Dreamweaver MX to connect to any databases when coding .NET pages, so I’m discounting that. Besides, the code it generates looks a bit bloated. So ignoring DW MX, the alternative is The Web Matrix Project.

Web Matrix is free. Despite this, it comes from Microsoft. Despite coming from Microsoft, it’s actually a well thought out and rather good program. It’s sorta like FrontPage for .NET (don’t let that put you off!!). It features WYSIWYG design view – which I must say that I’ve never used – that allows you to drag and drop server controls into your page. It also offers code views so you can type everything in directly. What’s really nifty, is that it has 2 code views – one for coding the (X)HTML and the other that displays only the server side code. It also comes with a compact personal web server so that you can test stuff locally without shelling out for a Win Server. All in all, it’s a dream for those of us that are cheapskates!

So that’s the coding environment sorted out, but what about the backend? Well, you could use XML, which is treated exactly like any other database. However, I dunno anything about using XML with .NET at the moment, so I’ll skip that. So what’s left? Well, Access is the one that most will tell you to use. But I hate using Access. It comes from having to use it at work. So I went down a route that some said was impossible, and others said was difficult. I say pfft to them, cos it was a piece of pish. So what am I using for my .NET backend? MySQL over OLEDB.

Putting a Microsoft programming technology alongside an open source database solution doesn’t quite sit right in the brain. But it works, and works really well I might add. What’s more, because of the nature of OLEDB in .NET, I can pretty much use any database by only changing the connection string.

So now that I have my development environment, I guess it’s time to actually delve deeper into the murky depths… I guess that’s my project for the holidays sorted then.