What's in a Site?
As a software developer, building your own site can be daunting. A homepage is often the first impression people have of you and your work. So what is the right message to send and how does you convey it? Should the design match your
Certainly a pythonista visually appealing front-end is a good start.
Below you will find a list of
uninspired and filled with bloat
Well not me!
To counter that, I took a page from The Best Website and made it even better.
In the end I created an understated but packed website. Something sophisticated yet simple; And you're looking at it!
So apart from appearances, what does that look like?
Under the Hood
- Everything here was hand-written for optimal performance ((( This page is 99.99848% the size of googles homepage and loads 3.5 times faster - .2 seconds )))
- Pages were built for speed. Delivered in under 15kbs, as a single html file, on a single line. Html renders first, then css, and then js. ((( Near all JS frameworks are over 15kb compressed. That's before even using it! )))
Sounds good? We are just getting started.
- It's a mobile-first JAMSTACK that supports multiple nested SPA's with each their own fallbacks, manifests, and service workers.
- It also boasts a perfect lighthouse score (((Lighthouse wont check my PWA because the manifest and service worker are only loaded once a user navigates from the page)))
But that's not even the half of it:
- The design is understated and soft. It has 15+ GPU accelerated animations and plenty of effects that all run at a cool, non-interrupting, 60fps.
- By default, pages are enhanced by, but not dependent on, JS.
- It also uses semantic html and was built with accessibility in mind.
- Webpack compresses every single assets during the build step and
- Each page gets prerendered and the loading script gets teased apart for optimal lazy loading or removal entirely(((Typical rehydration strategies have got nothing on my loading strategy.)))
Very considerate, I know. But wait! There's more!
- Relevant pages are SEO enriched using JSON-LD and are listed in the sitemap.txt file.
- I'm using all the good meta tags. You know the ones ;)
And here's the best part :D
- Content is pulled and converted, from IPYNB's to HTML using a mix of markdown and special syntax's. (((Inspired by NbDev, these footnotes are an example of special ipynb markup)))
- On a per-page basis, IPYNB frontmatter (YAML) is used for setting the template, meta-tags, progress bars, sitemaps, table of contents, and more.
- The use of IPYNB's also means I can publish exploratory analysis's effortlessly. Special tooling (((There are lots of python libraries that spit out or export javascript. To name a few: Plotly, ObservableHQ, dataplay (A mapping library I made using leaflet), and more! )))means the output can even be interactive online! But that typicaly breaks the 15kb size limits.