Images on "About - Git"/"Small and Fast" are "404 Not Found"

[jhcarl0814]

URL for broken page

Small and Fast

Problem

Images are "404 Not Found".

Operating system and browser

Windows 11 23H2 22631.3880 x64
Google Chrome 127.0.6533.100 (Official Build) (64-bit)

Steps to reproduce

Other details

[pedrorijo91]

hey @jhcarl0814 , which images? the page is displaying fine for me

[jhcarl0814]

@pedrorijo91 Each init benchmarks is actually alt text for an <img>:

The page currently looks like this:

According to wayback machine e.g. 2024-01-01 the page should look like this:

[pedrorijo91]

oh, seems to be using some google service, which ofc has been killed in the meanwhile according with https://stackoverflow.com/questions/77757225/alternative-for-charts-googleapis-com-for-generating-qr-code-in-google-sheets

not sure the best solution here

[jhcarl0814]

Here is an example using Visualization: Column Chart  |  Charts  |  Google for Developers:
https://jsfiddle.net/msofL6bd/

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div1" style="display: inline-block;"></div>
<script>
google.load('visualization', '1', {packages:['corechart'], callback: function () {
	var data = new google.visualization.DataTable();
	data.addColumn('string', 'Name');
	data.addColumn('number', 'Value');
	data.addColumn({type: 'string', role: 'style', });
	data.addRows([
		['git', 0.649, 'color: #E09FA0', ],
		['svn', 2.6, 'color: #E05F49', ],
	]);

	(new google.visualization.ColumnChart(document.querySelector('#chart_div1'))).draw(data, {
		backgroundColor: "transparent",
		height: 125,
		width: 100,
		chartArea:  { top: 0, right: 0, bottom: 20, left: 0, },
		enableInteractivity: false,
		legend: { position: 'none', },
		vAxis: {
			textPosition: 'none',
			gridlines: { color: 'transparent', },
			viewWindowMode: 'explicit',
			viewWindow: {
				min: 0,
				max: 3,
			},
		},
	});
}, });
</script>
<div id="chart_div2" style="display: inline-block;"></div>
<script>
google.load('visualization', '1', {packages:['corechart'], callback: function () {
	var data = new google.visualization.DataTable();
	data.addColumn('string', 'Name');
	data.addColumn('number', 'Value');
	data.addColumn({type: 'string', role: 'style', });
	data.addRows([
		['git', 1.53, 'color: #E09FA0', ],
		['svn', 24.7, 'color: #E05F49', ],
	]);
	(new google.visualization.ColumnChart(document.querySelector('#chart_div2'))).draw(data, {
		backgroundColor: "transparent",
		height: 125,
		width: 100,
		chartArea:  { top: 0, right: 0, bottom: 20, left: 0, },
		enableInteractivity: false,
		legend: { position: 'none', },
		vAxis: {
			textPosition: 'none',
			gridlines: { color: 'transparent', },
			viewWindowMode: 'explicit',
			viewWindow: {
				min: 0,
				max: 25,
			},
		},
	});
}, });
</script>

It can't center the title, so you have to add the CSS-centered title outside the chart yourself.
It can't show x axis of bar chart or y axis of column chart.

[dscho]

Another alternative would be to use Mermaid diagrams.

Or using d3.js, which would allow us to pre-render the diagrams server-side (which would also work well once we switch to Hugo). Something like this should work:

const d3 = require('d3');
const { createCanvas } = require('canvas');
const { saveSvgAsPng } = require('save-svg-as-png');

const width = 100;
const height = 125;
const canvas = createCanvas(width, height);
const svg = d3.select(canvas).append('svg')
  .attr('width', width)
  .attr('height', height);

// Data for the bar chart
const data = [
    { label: "git", value: 0.649, color: "#E09FA0" },
    { label: "svn", value: 2.6, color: "#E05F49" }
];

// Set up the scales
const x = d3.scaleBand()
    .domain(data.map(d => d.label))
    .range([0, width - margin.left - margin.right])
    .padding(0.1);

const y = d3.scaleLinear()
    .domain([0, d3.max(data, d => d.value)])
    .nice()
    .range([height - margin.top - margin.bottom, 0]);

// Add the x-axis
svg.append("g")
    .attr("transform", `translate(0,${height - margin.top - margin.bottom})`)
    .call(d3.axisBottom(x));

// Add the bars
svg.selectAll(".bar")
    .data(data)
    .enter().append("rect")
    .attr("x", d => x(d.label))
    .attr("y", d => y(d.value))
    .attr("width", x.bandwidth())
    .attr("height", d => height - margin.top - margin.bottom - y(d.value))
    .attr("fill", d => d.color);

// Add the title
svg.append("text")
    .attr("x", (width - margin.left - margin.right) / 2)
    .attr("y", -margin.top / 2)
    .attr("text-anchor", "middle")
    .style("font-size", "12px")
    .text("Commit A");

saveSvgAsPng(svg.node(), 'output.png');

Obviously this can be parameterized to avoid repetitive code.

[schacon]

So, as this was almost certainly my doing in the first place, I would perhaps argue that the best solution would not be to re-engineer these images but to take out comparisons to SVN altogether. A lot of this content was written like 15 years ago back when dinosaurs like me used to use systems like subversion. 99% of the people hitting this website today don't even know what that is, this page no longer really makes any sense.

If you want, I can take a pass at just totally rewriting this page, but a better thing might be to simply remove the "Git is Fast" argument/page entirely. Who cares?

[dscho]

this was almost certainly my doing in the first place

Sure was: b6d341c ;-)

If you want, I can take a pass at just totally rewriting this page, but a better thing might be to simply remove the "Git is Fast" argument/page entirely. Who cares?

I am of two minds here. For historical curiosity, it would be nice to keep them, but then, everybody got used to Git's speed by now, it seems. (Except that people using monorepos would argue that Git is not fast at all 😁).

I am curious how you would rewrite this page, though, @schacon. I enjoy your writing and could imagine that it would be nice to update the content to reflect that a lot has happened during the last dozen years.

[dscho]

I am curious how you would rewrite this page, though, @schacon. I enjoy your writing and could imagine that it would be nice to update the content to reflect that a lot has happened during the last dozen years.

While I am still looking forward to that, I want to take the pressure off of that project, and therefore offer this PR to fix the broken images in the short run. That will give us lots of time to consider how we want to improve the entire About section of the site.

Anyone in favor? Any objections?