After a couple of months of on-and-off work, this week I’m happy to lastly launch the brand new and improved model of this website! It’s not a significant redesign, and in the event you’re simply studying articles you may discover little or no distinction. However there are a couple of new options I hope customers may take pleasure in. Little question there are a couple of bugs to repair too! Please be affected person whereas I iron these out over the approaching weeks. 😉
New options
Re-vamped homepage
The outdated homepage at all times felt just a little bland. The brand new model provides extra prominence to the newest article, and incorporates a collection of widespread matter tags, to make trying to find an article just a little simpler. You possibly can nonetheless click on by to the “tags” web page (by way of the all matters hyperlink) for a full record of the matters lined.
Blogroll
Including a blogroll to a website is turning into more and more widespread among the many net dev neighborhood, as private blogs are experiencing a resurgence. It’s a good way to search out content material with out overly counting on Twitter or different social networks. This can be a record of a number of the folks I’m impressed by, whose blogs I learn repeatedly. (I’m positive I’ve most likely missed a couple of!) I’ll hold including to this part over time.
About web page
The About web page was at all times pretty minimal, primarily as a result of I hate writing about myself! However, nearly three years into this weblog, I made a decision I wished to inform the story of the way it got here to be, and why I proceed to jot down about net improvement. It’s not a web page I anticipate to be steadily visited, but it surely’s at all times there, and simple to search out.
Fly out menu
With the variety of web page rising, the addition of a fly-out menu means I don’t want to fret about becoming an rising variety of hyperlinks into the header. This can be a means of protecting them neatly on-hand, and it’s keyboard-accessible after all.
Behind the scenes
Eleventy
The primary driving power behind the “new” launch is a transfer from static website generator Gatsby to Eleventy. I’ve written earlier than about my motivations for the change, and for essentially the most half it’s been pretty painless – other than a couple of minor sticking factors, that are inevitable throughout the studying course of. I’ve plans for the way forward for this website, which I really feel extra assured urgent forward with now, with Eleventy as a part of the toolkit.
Transferring to Eleventy has additionally been a possibility to refactor and take away useless code, because it was getting just a little messy. Though I used to be in a position to copy over some of the CSS, I made a decision to maneuver from CSS Modules to a extra conventional Sass structure. I don’t hate CSS Modules, however general I really feel happier utilizing BEM and common Sass.
Parcel
I’m utilizing Parcel for module bundling and compiling belongings. I’ve been utilizing Parcel for the most effective a part of a 12 months, and I’m fairly proud of it as an alternative choice to Webpack. I wrote a information to getting began with Parcel earlier this 12 months, and the location itself is predicated on my Eleventy-Parcel starter mission. You probably have a fancy website and want extra configuration choices then Parcel won’t be for you (it’s famously “zero-config”). However for my wants proper now, it really works simply superb.
Future targets
There are a couple of new options that I didn’t get round to including for this launch, however I’d like so as to add within the not-too-distant future.
Darkish mode toggle
Whereas the location presently has darkish mode help (by the prefers-colour-scheme media question, chronicled right here), it’s higher for the consumer to have the ability to management this and change again to gentle mode if they want, with out having to vary their system settings. I’m aiming so as to add this beautiful quickly.
Associated content material
I’d wish to show associated articles on the finish of weblog posts, assist customers extra simply entry info on related matters to the one they’re studying about.
Beneficial assets
Along with the blogroll, I’m planning so as to add different really helpful assets, reminiscent of podcasts, books, movies or programs. This weblog is all about sharing and serving to folks to study net improvement. Sharing assets from others is a part of that.
What are the options you’d wish to see on CSS { IRL }? I’d love to listen to your suggestions!
