home
Hey, thank you for visiting my site and watching this, I can give you a quick tour of Jacob milhorn, calm and a little behind the scenes, in case you're curious about how it's built.
So a couple of cool features that I'm proud of having implemented. First of which is this nice little bar up here, there's a cool feature. If I type my name, my name is not Randy. But if a visitors name is Randy, cool that updates here.
Also have your choice of color. And there are a bunch of cool options here. And one of the things I really like, is inversion, and you get a lot of of options. And then, if I reload the page, or if I close the page and go back, navigate back, it has stored my name for the username here, and the colors scheme. And in the local using local storage API. So another example of that, or if I change the name.
Okay, reload. Cool. Actually, another thing that it does is it will save the, the status of the navbar, too. So that's pretty cool. Also built in this little feat filter feature, and quickly filter the blogs. And if you navigate to one of these got some comments and the same filter blog component.
So the way that this site is built on the big fan of eleventy static site generation. And so if we flip over here to look at what's going on back here, this site is built using 11ty static site generation. But it's also one cool feature are actually this topic of this blog post islands architecture.
And so if you're unfamiliar with it, you should read this article. It'll give you an idea of what it's about this here. This bar is an island of interactivity, as is scrolling down here, this blog post is a component with JavaScript that renders actually, as soon as you scroll down here, it imports JavaScript, and, I'm using Vue to build the components, and then gives you the interactivity up until that point. This is just statically rendered.
HTML that gets shipped initially, and then the JavaScript gets shipped later. So it's a really cool way to still use JavaScript to give users a dynamic experience. While still having the SSG the static site generation, really fast load times as well.
So if you're curious about the tech involved, Slinkity is what lets me use 11ty and uses Vite to process the Vue template and do the SSR. And I have a layout like this where I have, you know, my typical 11ty _includes folder. This time, I'm using components.
So here's a grid filter, component, the logic, styles, and then I use an nunjucks still for my layout, and a fancy component shortcode (Slinkity) to pull in.
My hydrated, Vue files, Vue single file components. So pretty cool. A lot of stuff going on here.
If you'd like to learn a bit more. You should check out slinky dot dev and eleventy as well. And that's it. That's a brief tour of the website.
Transcribed by https://otter.ai *edits by Jacob. Otter AI does not know what 11ty or Slinkity are haha!
I'm always open to thoughts on the subject matter, new ideas, relevant criticisms, and different ways of looking at things. Have one of these? Write it in the comments below.
Behind the scenes view of how cool I look when I build websites. See how jacob milhorn dot com was made using 11ty static site generator, Vue single file components, and Slinkity to bring it all together.
Read
I'm Jacob. TL;DR I transitioned from designing theoretical machines for advanced manufacturing processes in aerospace to designing concrete software solutions so that I could help real people with real problems.
Read
The more I invest in foundational knowledge, the more often I see the benefit in every area of expertise in which I am trying to grow.
Read
Without dynamic imports, Island architecture wouldn't make nearly as much sense, since you would be loading all JS right out of the gate. `import()` lets us load components precisely when we want to - a powerful mechanism that powers our Islands.
Read
Have you ever used Web Components and experienced some troublesome Flash of Unstyled Content (FOUC) as the page loads? This article presents a simple fix.
Read