Newwwyear, new website with CodePen Projects

How I redesigned and rebuilt my new personal site in a day

I absolutely love Codepen and Vue

Jen Simmons had a great idea with the #newwwyear hashtag. The idea is to rebuild / redesign / improve your personal site for the new year, to give you something fresh and new to start 2018.

This came at a perfect time for me, because I’d been quietly thinking about how my personal site had successfully served its purpose in getting me a new job. I now wanted it to just play a role of directing visitors to articles I’d written, or the various networks I’m on. A landing page is probably the best way to describe it.

The #newwwyear hashtag gave me a sort of deadline to work off, which is exactly what I needed to get off my ass and get on with it!

I took some time off work before the holidays, so I was fresh and raring to go almost straight after Christmas. I came up with the idea of building a personal site that’s constantly a work in progress, that’s powered by Codepen Projects. I’ve recently been using Codepen Projects to showcase TypeMate, which is a little micro-library to help improve typesetting on the web. I really enjoyed using Codepen Projects, so I thought I’d push my experience with them even further by using them to power my personal site.

A chance to experiment

One of the best things about working on your personal site is that it gives you a chance to experiment. I’ve previously used my personal site to learn Jekyll and Kirby CMS in the past, which has been really useful for “proper” projects, down the line.

This time, I had an itch that needed scratching. That itch was playing with Vue single file components. Thanks to this project by Chris Coyier, I had a sound approach to working with single file components, without having to rely on transpilation. I also wanted it to work natively in the browser as I wrote it, which was a novel experience in itself.

The awesome Codepen Project editor

The first thing I had to do in this project was combat my instinct to provide a no-js fallback. In my day job, I’d always provide baseline functionality if there’s no JavaScript available. For this site though, I thought I’d give myself a break and fully embrace the Vue setup and enjoy myself.

I then thought about how I could manage content. I created a data directory that contained a few JSON files. I used Axios to pull that data into the relevant components. The JSON files are tiny and local, so the load times are super quick. I would have preferred to use the fetch API for this process, but I was getting some cross-origin issues, so it’s something I‘ll work on later, when I’ve got more time.

For the component structure, I just broke down a basic wireframe I’d sketched out into little blocks and made stub Vue components. They’re all pretty basic, as I’m only rendering a personal site, but this experience did give me an idea of what working within a single file is like.

So far, I’m not 100% sold on the concept of single file components. We work with a two file component setup at work, which is a component.js file and a template.html file for each Vue component. I like this approach because of the separation of concern, but I can see how a single file setup will encourage the development of small micro-components, which I do find very appealing.

A chance to play with scoped styles

I have the attitude that if you’re using Vue single file components, you should also style each component locally. This means that you have a <style> block alongside your <template> and <script> blocks.

I’ve long been using BEM to organise my markup and Sass, so this was a very different and uncomfortable approach for me. This is mainly due to habit though. It’s healthy to push yourself out of your comfort zone so you don’t get stuck in your ways, so this was certainly a good experience on that front.

I found that I wrote a lot less CSS with a scoped style block. I don’t know if this is because I wasn’t able to nest my selectors or the fact I had really simplified the design, but there’s certainly a very little CSS on the page.

Another thing I enjoyed was only using one media-query in the entire CSS codebase. This is because CSS grid’s awesome minmax and auto-fit features have allowed elements to auto-stack at lower breakpoints. Hilariously (I think so anyway), the solitary media-query is used to push the navigation in the footer out to the right…

The lonely media-query with its paltry CSS

Dipping my toes in the water with CSS custom properties

CSS custom properties have been on my “try list” for ages. Because I’m always working in Sass day-to-day, I never thought to use them in a “real” project.

I absolutely loved working with them, because I don’t like repeating myself. Working in plain scoped CSS worried me a bit, so having the ability to share variables across components was great.

I absolutely hate the syntax though. Why it was decided to use a -- rather than a $ to define and reference variables will forever puzzle me…

100% designed built in the browser

This is the first project that I’ve 100% designed and built in the browser. I do a lot of design work in the browser and have done so for quite a while now, but this is the first time I’ve not opened Sketch first to work on look and feel. All I did was a little bit of a wireframe in a notepad in this project.

In fairness, the design is super basic, so coming up with a look and feel was easy. I still can’t imagine doing anything majorly creative, purely in the browser. Saying that – completing a new redesign solely in the browser will add some confidence for that approach in the future.

I also didn’t open up VS Code at all for this project. The only text editor I used, other than Codepen was TextWrangler for some hardcore find and replace bits. That was a pretty cool feeling.

Wrapping up

I’ve really enjoyed this experience. I’ve totally pushed myself out of my comfort zone and I’ve learned a tonne of stuff. I still can’t quite get over how ridiculously quick the whole process was either. I think this is mainly down to the “looseness” of a personal site project, but I’d like to give a lot of credit to Codepen and Vue too.

Check out the live site at https://hankchizljaw.io. You can also see the source code in Codepen here.