Image for post
Image for post

I love Notion, I envy their illustrations more than I care to admit… but thats besides the point. I think it’s a great tool which offers an incredible amount of flexibility to tackle a vast range of tasks. Add some collaboration in there with a sprinkle of organisation and you’ve got something special. I thought great let’s collaborate on some boring document work and we can just export it to markdown, upload it and revel in our mastery of the internets. However… A bit of a snag was hit.

Take a humble Notion export and look at it twice and…

Within this post I’m going to be venturing into the world of Gatsby, creating a blog and then documenting about the blog within that (see why the post is called blogception 😅). I’m basically going to be writing the post whilst doing it so I’ll try and document my thoughts and struggles and they come and go. Lets begin…

First of all we are going to get the gatsby blog starter up and running locally.

$ npx gatsby new my-blog https://github.com/gatsbyjs/gatsby-starter-blog

I’m using npx here because I prefer not to have any node modules installed globally.

Now let’s cd into…

Image for post
Image for post

In a recent project I came across a nifty way to create a masonry grid layout using CSS grid and a smidge of javascript . Initially I thought about using something like Masonry.js or Isotope but it kinda felt a little bit overkill. Whats cool about this approach its super flexible and it’s not relying on any frameworks! I’m going to try and keep this post short and sweet so you can get up and running and enjoy this trick yourselves.

Lets get started by adding some HTML to an index.html file

Here we have created a simple grid…

Image for post
Image for post

Vuepress is the new hotness when it comes to static site generators. Vue creator Evan You developed this tool to write documentation, however it is so powerful and flexible it can be fully customised to fit your needs 💪. Today I’m going to show you how to create a blog using Vuepress.

This tutorial presumes you have a basic understanding of Vuepress.

The structure of this project:

. ├── docs │ ├── .vuepress │ │ ├── components │ │ │ └── Posts.vue │ │ ├── config.js │ │ └── public │ │ ├── image.jpg │ │ ├── image-1.jpg │ │…

Adam Collier

Designer/Developer for Missguided. Co-organiser of FCC MCR

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store