DEV Community: Patrick Hanford

Beginner Python List Comprehensions

Patrick Hanford — Tue, 31 Dec 2019 00:26:02 +0000

Python comprehensions

The purpose of this article is to follow up on my previous article, Understanding map, filter, and zip in Python, and show you a more concise way of similar functionality.

List Comprehensions

In the previous article, I covered map and filter, so now I can show you how we can emulate the same functionality with list comprehensions.

Have a look at the structure of a comprehension here. Its comprised of 3 main parts.

numbers = [1,2,3,4,5]

def square(number):
    return number*number

Using a loop to square

...
squared_numbers = []
for number in numbers:
    squared = square(number)
    squared_numbers.append(squared

Using map()

...
squared_numbers = map(square, numbers)

Using a list comprehension

squared_numbers = [x*x  for x in numbers]

Note: I use x*x here for readability, however, you can more appropriately use the power of operator ** for this. [x**2].

Lets now re-use our even or odd filter example from the last article to show how comprehensions can use a condition as well. We'll get the squared number of ONLY even numbers in our list.

Using filter() and map()

...
def even(number):
    if (number % 2) == 0:
        return True
    return False

even_numbers = filter(even, numbers)
even_numbers_squared = map(square, even_numbers)

Using comprehensions

...
even_numbers_squared = [x**2 for x in numbers if (x % 2) == 0]

Conclusion

So with this you should have a basic grasp on how comprehensions work, how they're structured, and how they can help you write more concise code!

What are lambda expressions in Python?

Patrick Hanford — Mon, 30 Dec 2019 05:10:21 +0000

What are lambda expressions?

lambda expressions in Python are best described as single-use anonymous functions. What I mean by this, can be explained with a quick example.

[1,2,3,4,5]

I have this list of numbers that I want to square (multiply by itself). I could create a function like so.

def square(number):
    return number*number

This works fine, but what if you only need to do this one time? It would be a little cumbersome to have a function dedicated to this pretty menial task. We can use a lambda express for this instead.

lambda number: number*number

So you can see what's happening by referencing the above function next to our lambda expression. We declare lambda so the interpreter knows this is a lambda express. The first item is then the parameter which replaces the number argument in the square() function. Next is the actual result of the expression, number*number.

Here's an example using map() to get the squared result of each number in our list.

list(map(lambda number: number*number, numbers))
> [1,4,9,16,25]

I hope this is a good example to help you grasp lambda expressions so you can avoid huge pages of disposable functions!

Understanding map, filter, and zip in Python

Patrick Hanford — Mon, 30 Dec 2019 02:40:18 +0000

Understanding map, filter, and zip in Python

The purpose of this article is to understand how Python built-in functions map(), filter(), and zip() work to make you more efficient with processing data in Python!

I will go over how these functions work and provide use-cases with and without the functions to compare.

It is important to understand how these functions work, but there is a better way once you're finished reading this! Its called Comprehensions and I write about them in Beginner Python Comprehensions

Map

Python's map() function is used to apply a function on all elements of a specified iterable and return a map object.

map() will take 2 required positional arguments. 1.) A function to run against iterables. 2.) An iterable (ie. list).

map(func, [...])

The expected output of this would be a map object with a memory position.

Lets take an example that applies the function square() to a list of integers. The objective here is to get a list of squared numbers from our original numbers list.

def square(number):
    return number*number

numbers = [1,2,3,4,5]

Without map()

def square(number):
    return number*number

numbers = [1,2,3,4,5]
squared_numbers = []

for number in numbers:
    squared = square(number)
    squared_numbers.append(squared)

With map()

def square(number):
    return number*number

numbers = [1,2,3,4,5]
squared_numbers = map(square, numbers)

What we observed:

Using map() we don't need to create an empty list that we append to in a for loop.
We do not need to use square() with parenthesis as the function parameter, as map() will call the function for us, we just pass the function object.
map() will run square() for each item in numbers.

Filter

Python's filter() function checks a condition of each element in an iterable and returns a filtered data structure only containing elements who match the given conditions.

filter() will take 2 required positional arguments. 1.) A function to run against iterables. 2.) An iterable (ie. list).

filter(func, [...])

The function passed to filter() must return a boolean (True or False)

The expected output of this would be a filter object with a memory position.

Lets take an example that applies the function even() to a list of integers. The objective here is to get a list that only contains even numbers.

def even(number):
    if (number  % 2) == 0:
        return True
    return False

numbers = [1,2,3,4,5]

Without filter()

def even(number):
    if (number % 2) == 0:
        return True
    return False

numbers = [1,2,3,4,5]

even_numbers = []
for number in numbers:
    if even(number):
        even_numbers.append(number)

With filter()

def even(number):
    if (number % 2) == 0:
        return True
    return False

numbers = [1,2,3,4,5]
even_numbers = filter(even, numbers)

What we observed:

Using filter() we don't need to create an empty list that we append to in a for loop.
We do not need to use even() with parenthesis as the function parameter, as filter() will call the function for us, we just pass the function object.
filter() will run even() for each item in numbers and remove all elements that returned False.

Zip

Python's zip() function combines elements of 2 lists with matching indexes into an interable of tuples.

zip() will take an undefined number of arguments where each argument is an iterable to zip.

zip([...], [...], [...], ...)

The expected output of this would be a zip object containing tuples of the same-index element of each iterable with a memory position..

Let's take the above 2 examples combined to create a list of even numbers with their respective squared results.

def even(number):
    if (number % 2) == 0:
        return  True
    return  False

def square(number):
    return number*number

numbers = [1,2,3,4,5]
even_numbers = filter(even, numbers)
even_numbers_squared = map(square, even_numbers)

Without zip()

...
even_numbers = [2,4]
even_numbers_squared = [4, 8]
combined = []
even_numbers_index = 0
for number  in even_numbers:
    squared = even_numbers_squared[even_numbers_index]
    squared_tuple = (number, squared)
    combined.append(squared_tuple)

With zip()

...
even_numbers = [2,4]
even_numbers_squared = [4, 8]
zipped_result = zip(even_numbers, even_numbers_squared)

What we observed:

Using zip() we can combine values with matching indexes from multiple lists without creating a buffer list or iterating with a for loop.

Conclusion

So hopefully with this you have a basic grasp on how these functions work, why they're useful, and how they can help you write more efficient and more readable Python code!

Building a sidebar with Nuxt & Vuex

Patrick Hanford — Thu, 05 Dec 2019 02:40:20 +0000

Vuex Powered Sidebar with NuxtJs

NuxtJs is an awesome framework that takes practical and common structural patterns and creates a highly manageable boilerplate for your VueJS project. I'm personally just getting started with Nuxt, but so far I'm seriously impressed. There's always this routine when starting a new Vue project that Nuxt helps alleviate while also applying some tried-and-true best practices to your project free of charge.

Obviously this makes Nuxt opinionated, for good reason, but that always comes with a bit of a learning curve. In this article I'll walk you through creating a navigation sidebar that's able to be toggled from anywhere in your app through the magic of state.

Starting your Nuxt project

First things first, we'll need to setup our project. You can use a handy script using npx or yarn (dealer's choice).

npx

npx create-nuxt-app <project-name>

yarn

yarn create-nuxt-app <project-name>

You'll be asked a series of questions about your project. If you're unsure how to answer any of these, just go with the defaults! Once you get through that interrogation, you should have a stylish folder structure set for you. Go ahead and start up your dev server and get started.

npm run dev

You should see your test page and be ready to get started!

Build the components

Now I've already been busy, so I have an existing project I'm going to work with. I'll do my best to keep this as arbitrary as possible so you can follow along, but if you have any questions feel free to leave a comment (or DM me on Twitter, I'm always happy to help).

I have 2 relevant components here:

NavBar.vue
SideBar.vue

Seems redundant aye? Its mainly for layout purposes. The NavBar features the cliche hamburger button which opens my SideBar. You can set this up however you'd like so long as you've got a sidebar, and a button somewhere that summons it.

Here's a glimpse of what I'm working with.

NavBar Template

<template>
  <!-- Top Navbar -->
  <nav
    class="top-navbar flex flex-row align-center p-2 fixed w-full"
    style="z-index: 9001;"
  >
    <!-- Logo Brand -->
    <div class="flex-grow">
      <router-link :to="{ name: 'HomeView' }">
        <img alt="ImStallion Logo" :src="logoIcon" class="w-16 ml-3" />
      </router-link>
    </div>
    <!-- /Logo Brand -->

    <!-- Menu Button -->
    <button class="p-4" @click="toggle">
      <font-awesome-icon :icon="['fas', 'bars']" size="lg"></font-awesome-icon>
    </button>
  </nav>
  <!-- /Top Navbar -->
</template>

SideBar Template

<template>
  <!-- Top Navbar -->
  <nav
    class="top-navbar flex flex-row align-center p-2 fixed w-full"
    style="z-index: 9001;"
  >
    <!-- Logo Brand -->
    <div class="flex-grow">
      <router-link :to="{ name: 'HomeView' }">
        <img alt="ImStallion Logo" :src="logoIcon" class="w-16 ml-3" />
      </router-link>
    </div>
    <!-- /Logo Brand -->

    <!-- Menu Button -->
    <button class="p-4" @click="toggle">
      <font-awesome-icon :icon="['fas', 'bars']" size="lg"></font-awesome-icon>
    </button>
  </nav>
  <!-- /Top Navbar -->
</template>

You'll see on both of these templates we have a @click directive referencing a method called toggle. This will come from a Vuex mapped mutation.

Vuex and Nuxt

Nuxt uses a namespaced modules approach with Vuex meaning you'll have individual js files which represent state. For this example, it'll be drawer.js.

NOTE: Nuxt doesn't know you want to use Vuex until you tell it. The way you tell it is by creating a file in the store directory. This may not take affect immediately, so after creating a file, restart your dev server to be safe.

In /store create a file called drawer.js and provide the following contents to get started.

export  const  state  = () => ({
  drawer:  false
});

This gives us an initial value to start off with, but we'll want to be able to toggle this obviously, so in that same file we'll create a mutation as well called toggle.

export  const  mutations  = {
  toggle(state) {
    state.drawer  =  !state.drawer;
  }
};

Lastly, we need to be able to get the value at any time which we'll do with a getter.

export  const  getters  = {
  getDrawerState(state) {
    return  state.drawer;
  }
};

Once you have all of these in your drawer.js module, you'll effectively be able to use your navigation drawer from any component!

Using your mutation & getter to toggle the sidebar

You'll have 1 component where you'll need your getter, in the SideBar component to bind to the v-if directive so your Vue app knows when the SideBar should be rendered.

You'll have 2 components where you'll need your mutation, in the NavBar component for opening the SideBar, and in the SideBar to close the SideBar.

First lets make sure your SideBar knows when its allowed to come out. In your SideBar component just after your <script> opening tag, import mapGetters & mapMutations from vuex.

import { mapGetters, mapMutations } from 'vuex';

Next we'll want to map our getter as a computed property called drawer which when evaluated as true, shows our sidebar. As well, we can map our toggle mutation to a method to bind to our close button.

export  default {
  methods: {
    ...mapMutations({ toggle:  "drawer/toggle" })
  },
  computed: {
    ...mapGetters({ drawer:  "drawer/getDrawerState" })
  }
};

Same as above in our NavBar we'll map our toggle mutation to use in our hamburger button so we can open the SideBar and you're all set!

Conclusion

That's pretty much it. We've seen a bit about how Nuxt structures our Vue application, how namespaced modules work with Nuxt & Vuex, and how we can use mapGetters & mapMutations to handle basic functionality like toggling a sidebar from any component!

Start your blog with a Dev.to backend

Patrick Hanford — Mon, 11 Nov 2019 04:09:07 +0000

Thanks to Dev.to, us developers have a niche platform to write without the need to start our own blog. This is awesome, but you built a portfolio specifically to showcase and consolidate your work, so leaving a link to your Dev.to profile hoping it'll be clicked isn't nearly as effective as a slick card with a preview of your post (click-bait, do your stuff). I'm going to go over how & why I decided to build my blog with a Dev.to backend.

Why?!

Why not Vuepress or Gridsome?

If I were starting my site from the ground up, Gridsome would've been the obvious choice, but I already have my site built in vanila VueJs exactly as I want it.

I did heavily consider Vuepress, but decided the effort couldn't be justified by my needs. I'm not worried about SEO and I don't need to write from my own admin panel. Plain and simply, I just want my portfolio to be a centralized repository of all my work relating to development.

Why Dev.to?

There's a few reasons I decided on using Dev.to.

1.) Its all tech, which means that I'm directly interacting with my peers whereas if I were to use say Medium, I'd be in a very deep pool and not accomplishing the interaction I'm shooting for with as much ease.

2.) No SEO or advertising to worry with. By using Dev.to to host my content I'm completely eliminating my need to worry with SEO. I'll use vue-meta to aid with SEO on my blog by taking some data from Dev.to's API.

3.) Tiny impact to bundle, Netlify compatible, super quick. Gridsome boasts some crazy performance numbers for sure, but the flow of having to push changes to the overall codebase isn't nearly as elegant as just writing on Dev.to and knowing that the post will be on my site automatically.

4.) Dev.to's API provides all of the data I'd expect from any other CMS. There are some caveats for sure, but worth noting that their API is still in beta so who knows what more is to come.

Here's an example response from this article (I'll be omitting the keys body_html & body_markdown to avoid an inception level catastrophe):

{
  "type_of": "article",
  "id": 203240,
  "title": "Start your blog with a Dev.to backend",
  "description": "",
  "cover_image": "https://res.cloudinary.com/practicaldev/image/fetch/s--x1wXDXOK--/c_imagga_scale,f_auto,fl_progressive,h_420,q_auto,w_1000/https://res.cloudinary.com/practicaldev/image/fetch/s--A1UtFhw3--/c_imagga_scale%2Cf_auto%2Cfl_progressive%2Ch_420%2Cq_auto%2Cw_1000/https://thepracticaldev.s3.amazonaws.com/i/1mj5i26wfcagzuisquc7.png",
  "readable_publish_date": "Nov 11",
  "social_image": "https://res.cloudinary.com/practicaldev/image/fetch/s--r6RM1gMz--/c_imagga_scale,f_auto,fl_progressive,h_500,q_auto,w_1000/https://res.cloudinary.com/practicaldev/image/fetch/s--A1UtFhw3--/c_imagga_scale%2Cf_auto%2Cfl_progressive%2Ch_420%2Cq_auto%2Cw_1000/https://thepracticaldev.s3.amazonaws.com/i/1mj5i26wfcagzuisquc7.png",
  "tag_list": "beginners, vue, javascript",
  "tags": [
    "beginners",
    "vue",
    "javascript"
  ],
  "slug": "start-your-blog-with-a-dev-to-backend-13e2",
  "path": "/codespent/start-your-blog-with-a-dev-to-backend-13e2",
  "url": "https://dev.to/codespent/start-your-blog-with-a-dev-to-backend-13e2",
  "canonical_url": "https://dev.to/codespent/start-your-blog-with-a-dev-to-backend-13e2",
  "comments_count": 0,
  "positive_reactions_count": 0,
  "collection_id": null,
  "created_at": "2019-11-11T02:43:22Z",
  "edited_at": "2019-11-11T04:35:47Z",
  "crossposted_at": null,
  "published_at": "2019-11-11T04:09:07Z",
  "last_comment_at": "2019-11-11T04:09:07Z",
  "published_timestamp": "2019-11-11T04:09:07Z",
  "user": {
    "name": "CodeSpent",
    "username": "codespent",
    "twitter_username": "CodeSpent",
    "github_username": null,
    "website_url": "https://codespent.dev/",
    "profile_image": "https://res.cloudinary.com/practicaldev/image/fetch/s--mT1TUP7B--/c_fill,f_auto,fl_progressive,h_640,q_auto,w_640/https://thepracticaldev.s3.amazonaws.com/uploads/user/profile_image/178244/de976252-7575-4822-aff1-bbffa007fe24.jpg",
    "profile_image_90": "https://res.cloudinary.com/practicaldev/image/fetch/s--gp1VBpDB--/c_fill,f_auto,fl_progressive,h_90,q_auto,w_90/https://thepracticaldev.s3.amazonaws.com/uploads/user/profile_image/178244/de976252-7575-4822-aff1-bbffa007fe24.jpg"
  }
}

We have plenty of data available to create a stylish blog with some vue-meta additions. Maybe even slug routing later.

Starting the project

I'm starting with an existing project, so I'm going to pick this article up where that begins. If you need help getting your Vue app started, check out this excellent write-up from @therealdanvega.

Fetching articles

WARNING: For this use case, we'll be using Dev.to's API publically with NO API_KEY. Currently there is no read only api_key and all your secrets will be baked into the application and accessible from the browser, giving an attacker the ability to post to Dev.to on your behalf. Please do not use your Dev.to api_key on the frontend.

We'll start by creating a /services/ directory in your /src/ folder. Inside this directory, create a file called blogService.js which will house the api methods for collecting articles. First create an instance of axios with our baseUrl pointing at Dev.to's API at https://dev.to/api/.

import axios from 'axios'

const api = axios.create({
  baseURL: 'https://dev.to/api/',
  timeout: 5000,
  headers: {
    'Content-Type': 'application/json',
  }
})

This gives us a reusable axios instance for use in our blog service. We'll want to use that to start fetching articles, which sensibly is just at the /articles/ endpoint, so lets add that method to our blogService.

export default {
  async fetchArticles() {
    try {
      return await api.get(`articles`)
    } 
    catch(e) {
      return e.response
    }
  },
}

In any of your components, go ahead and test this by importing it and calling the fetchArticles() method.

import blogService from '@/services/blogService'

You'll find that this isn't quite right, its pulling all Dev.to articles, so we'll want to add a query parameter to filter to just our own posts. In your fetchArticles() method, just append ?username=<your_username> to the url arg.

export default {
  async fetchArticles() {
    try {
      return await api.get(`articles?username=codespent`)
    } 
    catch(e) {
      return e.response
    }
  },
}

All set! We can now get all of our articles!

Blog components

We're going to need to create 3 components:

Blog Component -- Houses the <router-view> for our nested Blog routes.
Blog Home Feed -- This is where we're going to see an overview of all blog posts.
Blog Post -- Appropriately named, this is where a single post will be available to read.

Blog.vue

<template>
    <div class="container text-center p-4 min-w-full">
      <h1 class="text-white text-5xl">CodeSpent.dev</h1>
      <h3 class="text-gray-600 text-sm font-black italic">This blog is powered by </h3>
      <a href="https://dev.to/" class="text-center text-white"><font-awesome-icon size="2x" :icon="['fab', 'dev']" /></a>
      <router-view></router-view>
    </div>
</template>

The Blog component will be rather simple. Just a header, and a Powered by Dev.to badge. The important parts will be coming from our <router-view></router-view> which is going to render our other 2 components based on the route.

Routing

For my site, I've got a home page which is located at /, and the blog I'd like to be available at /blog. This introduces a necessity for nested routing.

My blog routes will look something like this.

/blog                                /blog/post/:articleId
+------------------+                  +-----------------+
| Blog             |                  | Blog            |
| +--------------+ |                  | +-------------+ |
| | BlogHome     | |  +------------>  | | BlogPost    | |
| |              | |                  | |             | |
| +--------------+ |                  | +-------------+ |
+------------------+                  +-----------------+

We can achieve this pretty easily by first creating a /blog/ route for our Blog.vue component.

export default new Router({
  mode: 'history',
  routes: [
    {
      path: '/',
      component: Home,
      name: 'home'
    },
    {
      path: '/blog/',
      component: Blog,
      name: 'blog'
    }

Under /blog/ we'll want to put our 2 nested routes, BlogHome and BlogPost, so these will be passed as children under the /blog/ route. Here is my complete router.js with the nested routes for reference.

import Vue from 'vue'
import Router from 'vue-router'

import Home from '@/components/home/Home'
import Blog from '@/components/blog/Blog'
import BlogHome from '@/components/blog/BlogHome'
import BlogPost from '@/components/blog/BlogPost'

Vue.use(Router)

export default new Router({
  mode: 'history',
  routes: [
    {
      path: '/',
      component: Home,
      name: 'home'
    },
    {
      path: '/blog/',
      component: Blog,
      name: 'blog',
      children: [
        {
          path: '/',
          component: BlogHome,
          name: 'blog-home'
        },
        {
          path: '/blog/post/:articleId/',
          component: BlogPost,
          name: 'blog-post'
        }
      ]
    },
  ]
})

Now we have all the routing ready to handle both the BlogHome and BlogPost component. You'll notice the :articleId/ at the end of the BlogPost path, this is used to get the Dev.to article id from a url parameter later!

BlogHome

The BlogHome component is where we'll be presenting all articles with some description text, tags, and the cover image used. Now I'm just getting started on Dev.to myself, so this screenshot you'll notice is other awesome developers' articles for testing. In your fetchArticles() method in blogService.js you can remove the username query parameter to get all articles from Dev.to for the sake of testing/designing if you're new as well.

<template>
  <div class="container text-center p-4">
      <div class="container flex flex-row flex-wrap m-8 p-8 min-h-screen">
        <h3 v-if="articles.length < 1" class="text-gray-600">No posts yet, stay tuned!</h3>
        <div 
          v-for="article in articles"
          :key="article.id"
          @click="openArticle(article.id)"
          class="max-w-xs m-5 rounded overflow-hidden shadow-lg bg-terminal"
        >
        <img class="w-full" :src="article.social_image" :alt="article.description">
        <div 
          class="px-6 py-4"
        >
          <div class="font-bold text-xl mb-2 text-white">{{ article.title }}</div>
          <p class="text-gray-700 text-base">{{ article.description }}</p>
        </div>
        <div class="px-6 py-4">
          <span 
            class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 m-2"
            v-for="tag in article.tag_list"
            :key="tag"
          >
          #{{ tag }}
          </span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import blogService from '@/services/blogService'

  export default {
    data() {
      return {
        articles: []
      }
    },
    methods: {
      async fetchArticles() {
        await blogService.fetchArticles()
        .then((response) => {
          switch(response.status) {
            case 200: {
              this.articles = response.data
              break
            }
            default: {
              this.articles = false
              break
            }
          }
        })
      },
      openArticle(articleId) {
        this.$router.push('post/' + articleId)
      }
    },
    mounted() {
      this.fetchArticles()
    }
  }
</script>

I'm using TailwindCSS here to build the layout with the card object, then using the v-for directive, I loop over the articles that were set from the fetchArticles() method called on the beforeMount() hook. You're welcome to use this template for yourself, I'm not much of a designer, but this contains the basic elements I felt necessary; Title, Description, CoverImage, & Tags.

You'll notice that on the @click directive for the card div, we have a method called openArticle() which pushes the route to blog/post/:articleId. This is where we'll use that url param from earlier. Lets go ahead and move over to the BlogPost component.

BlogPost.vue

This one is a work-in-progress, for sure. The Dev.to API does provide both body_markdown & body_html keys in the article data, but we'll still need to style based on that data. Considering I have very few posts yet to work with, I haven't caught a whole lot of conditions needed to style.

<template>
  <div class="container flex flex-col items-center m-5 min-h-screen">
    <h1 v-if="!article" class="text-gray-600">That post can't be found.</h1>
    <img :src="article.cover_image" class="rounded max-h-30" width="1000px" />
    <h1 class="text-white text-3xl font-black mt-4">{{ article.title }}</h1>
    <div class="article text-left" v-html="article.body_html"></div>
  </div>
</template>

<script>
import blogService from '@/services/blogService'

export default {
  data() {
    return {
      article: {}
    }
  },
  beforeMount() {
    this.fetchArticle()
  },
  methods: {
    async fetchArticle() {
      const articleId = this.$route.params.articleId
      await blogService.fetchArticleById(articleId)
      .then((response => {
        switch(response.status) {
          case 200: {
            this.article = response.data
            break
          }
          default: {
            this.article = false
            break
          }
        }
      }))
    }
  }
}
</script>

Another pretty basic layout with some very similar things from the BlogHome component. Take notice to the final div in our template. This is where we use the v-html directive to "inject" the html from the article into that div. You'll notice by default, this comes out very ugly, so we'll want to style it. Now this part is very much still a work-in-progress for me as I haven't seen a whole lot of articles enough so to style, but I do want to make a comment about the /deep/ >>> selector. Here are my current styles.

<style scoped>
  .article {
    padding: 4em;
  }
  .article >>> {
    color: #fff !important;
  }
  .article >>> h1 {
    font-size: 2.2em;
  }

  .article >>> p {
    font-size: 1.2em;
    margin: 1,2 0 1.8em;
  }

  .article >>> li {
    margin: 0.3em auto;
    list-style: square;
  }
</style>

The >>> selector has been deprecated some time ago, but with scoped styles, this has been the only way I could actually get the styles to apply within the v-html directive. Happen to have a better way of handling this? Please feel free to comment!

Netlify redirect

Just want to quickly address this as I've had a lot of people get stuck on this when using vue-router with Netlify. To keep nice syntactic urls, we'll want to use history mode on vue-router, but this only works when the server is handling route redirects. Since we don't have access to Nginx/Apache on Netlify, we'll want to create a redirect in a netlify.toml.

Create a file in the root of your project called netlify.toml. The purpose of this file is to send a message to the builder robots when deploying with Netlify that lets them know some additional configurations are needed.

In this file, add the following:

[[redirects]]
  from = "/*"
  to = "/index.html"
  status = 200

What this will do is redirect all routes back to index.html in your Vue app allowing vue-router to take care of the routing.

Note: Do not use the force = true argument if redirect doesn't work at first, this will also force redirects on /static /assets routes which is where your js files are hosted. Instead clear cache & deploy again.

Demo

You can see a live demo of this at https://CodeSpent.dev/ and this specific article at https://www.codespent.dev/blog/post/203240/

Conclusion

Well that's pretty much it, now you can just write up your blog posts on Dev.to as normal, but your site will still contain a good-looking blog to centralize all your work. Of course I am by no means a Vue or Javascript expert, so if you see an issue or spot a way this could be improved, please leave a comment!

Suggestions Welcome

Of course any suggestions or critique on this post, contents within, or the code provided are heavily welcome!

Issues

A few issues I'm currently working out:

Adding Prism/Highlightjs syntax highligting
Implement comments and like counts (Read only)

You can also find my portfolio/blog code on GitHub for reference.