https://pine32.be - © pine32.be 2024
Welcome! - 64 total posts. [RSS]
A funny little cycle. [LATEST]


Search 64 posts with 31 unique tags


#1720389426


[ webdev ]

Spent the last 2 weeks scraping supermarkets for a vacation job and the average website is hot garbage. One website pulled the location data of all stores in all countries (1000+ stores) to show 1 marker on a small map. The other had over 50 deep HTML elements. Not to speak of all the badly formatted data that I had to parse (including invalid JSON). Just when you think you’ve seen it all they come up with some more BS. I am going to explode.

#1719158831


[ webdev | rant ]

Write your own auth!!

Everybody should write there own authentication at least once. I am currently writing a session based authentication system for one of my upcoming projects. It forced me to learn all parts of system. And once you’ve done it, authentication is no longer as scary and complicated as it might otherwise seem. Yes, it could be a vulnerability, but so can many things in your application.

#1718647739


[ webdev ]

Finally updated my personal website/blog, pine32.be. It is finally in a state that I don’t hate. I Rewrote it in Zola, before that is was written in Hugo. Both are static site generators but after trying both I preferer Zola. It is simpler but still feels more powerful, not to mention that it is written in Rust.

I am currently happy with both the layout and the content. I don’t think I will change the layout much in the future. I do want to add some more longer blogs. We’ll see if I actually do it.

#1715288892


[ mb_dev | webdev ]

Finally added cache busting to mb. I should have done this long before but I only learned this technique recently. For some reason I never wondered how bigger sites did this.

For those who don’t know what cache busting is. It’s a technique used to force a web browser to download the latest version of a static file (css, img, …) instead of using a cached version. This is done by making every version of a file have a different and unique name, so the browser won’t recognize the updated file and will fetch it from the server. I have done this by adding a hash of the file to the filename, for example main-ad5d104a4a86.css.

With every version being a unique file we can update the Cache-Control header.

Cache-Control: public, max-age=31536000, immutable

This the most aggressive caching that you can configure, it tells the browser that this file will never change and that it will never need to refetch it from the server. This could be a problem for normal files but this is perfect for this usecase because we have control of the clients cache from the server.

Normally these hashes would be added at build/bundle time. But Golang doesn’t have these options so I did it at start-up of the server. Luckily Golang is very fast so it didn’t add any time to the start up (1-2 ms). The implementation works better then expected.

The perfectionist within me did try it with code-gen and it did work, see commit. But it didn’t feel clean or maintainable and was drifting from the goal of simplicity of this project, so I decided to scrap it.

#1712090133


[ webdev ]

The datalist element is pretty cool. You can make dropdown inputs that are still editable realy easy. Came in handy today.

<label>
	Choose a flavor:
	<input list="ice-cream-flavors" name="ice-cream-choice" />
</label>

<datalist id="ice-cream-flavors">
  <option value="Chocolate"></option>
  <option value="Coconut"></option>
  <option value="Mint"></option>
  <option value="Strawberry"></option>
  <option value="Vanilla"></option>
</datalist>

Source example: MDN Web Docs

#1711279188


[ webdev | mb_dev ]

Finally added the RSS feed to mb. Wasn’t to difficult using the encoding/xml module of the standard lib and exactly 100 lines of code. It’s basic but it’s valid and it works. Maybe I will flesh it out if people actually use it.

[Valid RSS]

#1710948563


[ webdev ]

javascript fatigue:
longing for a hypertext
already in hand

- HTMX

#1710601100


[ webdev | mb_dev ]

Just found out a way to add hotkeys to a website without using JavaScript.

<a href="/auth" accesskey="a" aria-hidden="true" tabindex="-1"></a>
<a href="/media" accesskey="m" aria-hidden="true" tabindex="-1"></a>
<a href="/backup" accesskey="b" aria-hidden="true" tabindex="-1"></a>

aria-hidden="true" and tabindex="-1" are there to keep screen readers happy (and to keep my Google Lighthouse score high).

These hidden elements add alt + x hotkeys. It always surprises me how many things the HTML5 spec has integrated.

Shoutout to this article for the idea.

#1707727407


[ golang | webdev ]

SSE are cool.

This an example using the Echo framework in Golang. It sets up the connection, consumes a channel and sends that data to the user. It also exits the loop if the connection is broken, this is communicated via the request context.

func BuildingSSE(c echo.Context) error {
	c.Response().Header().Set(echo.HeaderCacheControl, "no-cache")
	c.Response().Header().Set(echo.HeaderConnection, "keep-alive")
	c.Response().Header().Set(echo.HeaderContentType, "text/event-stream")

	queue := queue.GetBuildQueue()

	ctx := c.Request().Context()
	for {
		select {
		case result := <-queue.BuildLogsChannel:
			fmt.Fprint(c.Response(), buildSSE("message", result))
			c.Response().Flush()
		case <-ctx.Done():
			return nil
		}
	}
}

func buildSSE(event, context string) string {
	var result string
	if len(event) != 0 {
		result = result + "event: " + event + "\n"
	}
	if len(context) != 0 {
		result = result + "data: " + context + "\n"
	}
	result = result + "\n"
	return result
}