Website development without JavaScript - aka who has the best chip shop in town

[Webdeersign]

@Teefers

The Source package would produce the lightest page weight of the bunch. It doesn’t use jQuery, and if you switch the default Google Raleway font off and use a standard browser font, a simple “Hello World” webpage with navigation and Javascript turned on loads in at about 39 KB compared to 400 KB+ for the other frameworks. The CSS is 23 KB of that, the javaScript (with navigation) about 8 KB.

Great example. That really does put things in perspective.

[Teefers]

BTW,
If you switch on the railway font it add about 75 kB to the page weight bringing the total to about 115 kB.

One Google font adds almost the same weight as minified jQuery library.

[habitualshaker]

@Teefers

If you switch on the railway font it add about 75 kB to the page weight bringing the total to about 115 kB.

One Google font adds almost the same weight as minified jQuery library.

Yeah - I include a local version of that font as the default in Source. A regular system font can be chosen instead.

I did create a chart at one point comparing all these things. I’ll see if I can dig it out…

---

Edit: Here it is.

And I fully acknowledge that the comparison with Source and the full frameworks isn’t particularly fair. It is interesting to see things broken down like this though.

I can add in F6 when it lands too - from what i’ve read about the regular release of F6 it is substantially lighter than the version of Foundation tested here.

[Webdeersign]

That chart is very informative and fascinating to see such striking differences.

There are plenty of “Why” questions that come out of that comparison.

[steveb]

Interesting chart. What would be really interesting is to build a test page, with as close to the same elements as possible, using only the frameworks native stacks, then record the edit/preview speed, publish and page load speeds.

While I know the geeks love all the numbers, to the average user they mean nothing. It’s all about speed for them.

I have all those frame works, I’m sure a few others do too. I’d be happy to participate in some local testing of some prebuilt pages. Then someone who can add up (not me) could crunch those real-world numbers and come out with some really interesting stats.

[Webdeersign]

OK let’s do it. The page content could be repeatedly copied and pasted to produce say 64 versions of itself to create a long page, to make the edit load and preview times easier to time.

I propose a layout that has the following:

1. A hero page with an colour overlay, centred text “Hello World” and a symbol to smooth scroll to the start of the next section, positioned at the bottom of the hero page.

2. A section with a 3 column layout with a different colour BG for each column, a gap between columns and each column to contain an image, a header and a paragraph of text, (middle paragraph should have twice the amount of text). The columns should be vertically aligned and the columns BGs should be the same height. Below the 3 Cols should be a symbol that smooth scrolls to the start of the next section.

3. Another hero page that has a 3 colour gradient BG and a symbol to smooth scroll to the next section.

That is a very basic page that all frameworks should be able to achieve.

[steveb]

Build the page is one of the frameworks, maybe Foundry for you? I’ll then copy it in UIkit & Platform. Someone else can do Foundation perhaps? Maybe Stuart can do Source?

Remember, when building the foundry version by your best to only use stacks that you know have an equivalents on the other frameworks, so we can then compare like for like.

Once these are made we need to share with with a group of users for testing. A good cross section of users with different machines, plus set out a very strict testing pattern.

Once that’s all done the results can be collated by someone who can collate that sort of thing. Which isn’t me.

[Webdeersign]

Thinking this through a bit more, it should include a local font Lato 400 for both paragraphs and headers and there should be no custom CSS.

I was thinking about Foundation and realise there is no Hero facility and no way to pin a symbol to the bottom of a page - unless anyone knows otherwise.

Also not sure if Foundry can do the 3 column layout completely so will need to check that too.

[steveb]

I’d suggest just keeping it simple, but as you say duplicate the main body of content a lot, so as to give the page some weight.

[habitualshaker]

What about replicating this page in the other frameworks? It is fairly simple and uses only Source stacks so should be quite easy to replicate.

https://demo.shakingthehabitual.com/sth/source/lawyer/

I could supply the images used.

[steveb]

Makes sense. There’s nothing there UIkit can’t do.

I did suggest me also doing Platform, but while i have it, I’ve never used it, so maybe get someone else with Platform to do it?

[Fuellemann]

@juergenbarth can do it :-)

[Webdeersign]

Perfect layout. I can’t figure out how to completely create that layout in either Foundation or Foundry but it has been a very long time since I built a site with just Foundry or Foundation, but I would hope there are others who live and breathe Foundry or Foundation who could do it.

[habitualshaker]

There’s actually a few random fonts used in that page as I used it as an example for adding fonts. I could revert to just the default though.

Wouldn’t know where to begin in Foundation as have never used it. Could have a reasonable stab at it in Foundry - though there would be a couple of bits I’d maybe struggle with.

[pmjd]

This sounds like a fantastic idea 😊

A few comparative tests from the same host would be good to reduce the variability.

I have platform but haven’t used it much. Happy to do it but maybe a Platform expert would be better?

[habitualshaker]

Here are the assets for anyone that wants a play: http://shares.shakingthehabitual.com/Ob8phy (images are from via pexels).

I’ve republished the Source page using the same image files/sizes provided here (i also removed using a higher-res image on larger devices as don’t think Foundry can do this) and I also reset all fonts to the default: https://demo.shakingthehabitual.com/sth/source/lawyer-default-fonts/

I had a quick play with Foundry there and have fallen at the first hurdle but will have a proper go as soon as I get a chance.

Not entirely sure how the testing side of this would work but we can maybe worry about that if/when we get all the samples.

[steveb]

Between sorting sites for clients and posting my usual shite here, I’m not going to be coming up for air til next week, but I’ll get straight on then.

[Webdeersign]

I have given up trying to build that demo with Foundation and Foundry. What I was expecting to be possible just isn’t.

So it would be a more valuable exercise if someone could build an F6 version for the framework comparison when F6 is ready and on the assumption that F6 can build it.

[pmjd]

Perhaps would be a fairer test if it was F6 rather than the original Foundation. It was briefly available last week during Joe’s weekly live stream, perhaps someone on this thread has it and can help?

Is an update to Foundry due out soon too?

[Webdeersign]

@pmjd

Is an update to Foundry due out soon too?

Bootstrap5 is due for preview in Q1 2020, but no idea if there is a Foundry update due.

F6 is all a bit mysterious at the moment and is only, AFAIK, available to buy during live feed videos which sounds a bit like Shopping Channel style marketing. Joe mentioned that F6 will redefine how we build web sites for the next 5 years, so looking forward to see what it is.