Personal website and playground for experiments
Home Page: https://fynn.be
npm installnode --run devnode --run buildGenerate fonts fallback CSS file:
node generate-fonts-fallback.jsnode --run format# All tasks
node --run lint
# Individual tasks
node --run lint:css
node --run lint:js
node --run lint:markdown
node --run lint:format
![dependabot[bot] avatar](https://avatars.githubusercontent.com/in/29110?v=4 "dependabot[bot]")
The theme switcher receives the theme name as a string:
Line 35 in c93cc69
The available themes are system, light, and dark. An unknown theme should revert to system.
Add a sitemap.xml so search engines can reliably index all pages.
For reference:
The beta for Eleventy 1.0 is out: https://www.11ty.dev/blog/eleventy-v1-beta/
Instead of using custom Nunjucks filter, use the upcoming date preprocessing to set the time to midday.
The icon path in the feed references a non-existing icon. Update the URL to the correct one.
Add robots.txt to disallow crawling by ChatGPT:
User-agent: ChatGPT-User
Disallow: /To avoid late font file discovery in CSS, preload heading and text font files.
https://developer.mozilla.org/docs/Web/HTML/Attributes/rel/preload
To improve LCP preload the hero image (see https://blog.jim-nielsen.com/2023/link-preload-image/).
Add hyphens: auto to rich text content.
The scrollable wrapper <div>s around <table>s can’t be focused at the moment, so scrolling with the keyboard is not possible.
Add tabindex="0" so they can be focused and scrolled with arrow keys.
The entire point of the German language examples is to be in German:
https://github.com/mvsde/website/blob/dev/content/blog/german-language-and-gender.md
So they should be marked with translate="no":
https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/translate
The content beneath the hero is rather lackluster (and the tap targets for the links don’t have enough space for mobile).
The Prism theme for dark mode comes with a text-shadow. The shadow isn’t necessary because the background is black.
The current meta theme color is the old red.
Drop the Vue experiment and switch to WebC since it’s the defacto “Eleventy templating language” expected to have broader support in the future.
Inlining the main.css contents on each page avoids one step in the CSS waterfall.
The browser can start downloading CSS files immediately instead of having to wait for main.css to finish loading.
Improve the authoring workflow by adding a git-based CMS. The nicest solution at the moment seems to be Netlify CMS.
The list is nice and terse but “real” paragraphs would look a lot friendlier and would fit better into index pager after #59.
It’s no longer necessary to disable vue/no-v-text-v-html-on-component in the base layout.
Add stylelint for CSS linting and autofixing. The preset can be based on https://github.com/pangolinjs/stylelint-config.
Add Twitter Cards markup: https://developer.twitter.com/en/docs/twitter-for-websites/cards/overview/abouts-cards
Add a short readme that describes the steps necessary to build and develop the project.
Adding a UUID to every item to be published in the feed is cumbersome. It might help when the URL changes to avoid re-surfacing in feed readers. But cool URLs don’t change, do they?
The sunset page uses the same layout as the blog/talks page:
Line 4 in c6c7f65
Visually sunset should be an image gallery, though. With the recent improvements in page rendering performance and caching, this wouldn’t negatively impact the build time anymore.
Add a link for https://github.com/mvsde/eleventy-vue to the blog post https://fynn.be/blog/eleventy-vue/.
Pronouns.page is an awesome website 🙌🏻
The JS bundling currently produces an IIFE. Let’s switch to a more modern approach with JavaScript modules.
Use text-wrap: balance for headings.
At the moment all dates use the old ISO date (without a T between the date and the time). Also the time zone is missing.
T between date and time.Z to specify UTC.The hero caption is the same font size as the main content. To make the visual priority more clear, decrease the hero caption font size.
The page https://fynn.be/blog/eleventy-plugin-vue/ has a code block of Vue code which includes {{ title }}. Instead of printing this as is (expected for code), Nunjucks is rendering this a a variable.
For a more complete collection experience especially for the sitemap, add all paginated sites to collections.
The page title has no left and right spacing. This leads to titles that might stretch from edge to edge especially on mobile.
Manually creating image sizes is great until it's not (i.e. site redesign).
Switch to Eleventy Image for automatic image resizing and converting.
It will be dark so hackers will like it 😎
Add credits to imprint, not necessarily because it’s necessary, but because it’s nice:
When content occupiee the full viewport width, the rounded corners look slightly off. Add a media query that adds rounded corners only when the content isn’t touching the viewport edges.
This applies to:
The span elements used for the lang attribute add a lot of noice to the Markdown files.
https://github.com/arve0/markdown-it-attrs looks like a great alternative.
Instead of having a boring list of tech on the “uses” page, make it more interesting by telling the story and decision behind the tech choices.
See the great example on:
Create a dedicated page “Projects” that can showcase not only open source projects, but also other stuff that deserves its own section.
The recent visual upgrade for lists introduced padding. This needs to be removed from non-content lists.
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
Django
The Web framework for perfectionists with deadlines.
Laravel
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft
Open source projects and samples from Microsoft.
Google
Google ❤️ Open Source for everyone.
Alibaba
Alibaba Open Source for everyone
D3
Data-Driven Documents codes.
Tencent
China tencent open source team.