DEV Community: Cody Bontecou

How to use Vuetify with Nuxt 3

Cody Bontecou — Thu, 05 May 2022 03:31:41 +0000

How to use Vuetify with Nuxt 3

Utilize the latest versions of Vuetify and Nuxt together.

Installation

Start by creating a Nuxt 3 project if you do not have one already.

npx nuxi init nuxt-app

Then run cd nuxt-app and run yarn to make sure your dependencies are installed.

Now that our Nuxt 3 project is setup, we are ready to integrate Vuetify. While you are in the nuxt application's root directory, run the following command to install Vuetify 3 and it's dependency, sass.

yarn add vuetify@next sass

Your package.json should now look similar to the following:

// package.json
"devDependencies": {
  "nuxt": "3.0.0-rc.1"
},
"dependencies": {
  "sass": "^1.51.0",
  "vuetify": "^3.0.0-beta.1"
}

Creating our Vuetify plugin

We have Vuetify installed, now we need it to talk to Nuxt. We will do this by using Nuxt's plugin feature.

Create a plugins folder then create a file named vuetify.js and put it in the newly created plugins folder.

Then, within the vuetify.js file, paste the following code into it:

// plugins/vuetify.js
import { createVuetify } from 'vuetify'
import * as components from 'vuetify/components'
import * as directives from 'vuetify/directives'

export default defineNuxtPlugin(nuxtApp => {
  const vuetify = createVuetify({
    components,
    directives,
  })

  nuxtApp.vueApp.use(vuetify)
})

This is mostly documented here within Vuetify's explanation. The key difference is we use nuxtApp.vueApp.use(vuetify) rather than app.use(vuetify).

Configure Nuxt 3 to use our new plugin

Our last bit of configuration occurs in our nuxt.config.ts file. This is where we tell Nuxt how to properly find and build Vuetify's sass.

// nuxt.config.ts
import { defineNuxtConfig } from 'nuxt'

// https://v3.nuxtjs.org/api/configuration/nuxt.config
export default defineNuxtConfig({
  css: ['vuetify/lib/styles/main.sass'],
  build: {
    transpile: ['vuetify'],
  },
  vite: {
    define: {
      'process.env.DEBUG': false,
    },
  },
})

Enjoy Vuetify alongside Nuxt 3

Everything should now be working as expected and you should now be able to utilize the wide array Vuetify components within your Nuxt pages!

Enjoy!

Nuxt 3 and Pinia

Cody Bontecou — Thu, 17 Feb 2022 06:01:02 +0000

Nuxt 3 and Pinia

Integrate Pinia as your state management library for your Nuxt 3 application.

Vuex -> Pinia

Evan You, the creator of Vue himself, has stated "Pinia is de facto Vuex 5! At this point it’s really a naming/branding issue."

For the time being, it's probably best to be looking towards Pinia content rather than Vuex.

I recommend reading VueJS's official post regarding this to get a better understanding as to why Pinia > Vuex.

Installing Pinia in Nuxt 3

Pinia nearly comes with first-class support for Nuxt 3. You'll need to install two packages:

yarn add pinia
yarn add @pinia/nuxt

Add Pinia to your nuxt.config file

You'll need to add '@pinia/nuxt' to your buildModules array.

// nuxt.config.js
import { defineNuxtConfig } from 'nuxt3'

export default defineNuxtConfig({
  buildModules: ['@pinia/nuxt'],
})

Build your Pinia store

Now build a named store. For my use-case, I needed to manage state regarding filters, so the skeleton of my store looks like:

// store/filters.js
import { defineStore } from 'pinia'

export const useFiltersStore = defineStore({
  id: 'filter-store',
  state: () => {
    return {
      filtersList: ['youtube', 'twitch'],
    }
  },
  actions: {},
  getters: {
    filtersList: state => state.filtersList,
  },
})

This is just showing the general structure of your store. The key is to defineStore and make sure to include an id. In this case, I'm using 'filter-store' as my id but it could be anything you prefer.

Read over Pinia's Docs to get a better grasp of how to use Pinia properly.

Bring Pinia in Vue Component

With our store in place, simply import it into the component you want to use it in and have fun!

<template>
  <div>
    {{ filtersList }}
  </div>
</template>

// components/FilterMenu.vue
<script>
import { useFiltersStore } from '~/store/filters'

export default defineComponent({
  setup() {
    const filtersStore = useFiltersStore()
    const filtersList = filtersStore.filtersList

    return { filtersList }
  },
})
</script>

Using URL Query Params in Nuxt 3

Cody Bontecou — Tue, 15 Feb 2022 19:16:02 +0000

Using URL Query Params in Nuxt 3

This is a continuation of my previous post on how to set query parameters in Nuxt 3. We'll be continuing with the code written there so make sure you check it out.

The problem we're solving

We left off with our URL looking like localhost:3000/test?streamer=faker. This is nice but contained a few cases that are less than ideal.

Because the URL parameter is being updated using our input's v-model, if the page is refreshed, we lose that local state and the value stored in twitchStreamer.

Using useRoute in Nuxt

NuxtJS relies on vue-router for most of its routing logic.

In our example, we are using the Composition API, one of the new features built into Nuxt 3.

In order to get our route, we use bring useRoute() into our setup(). Nuxt 3 auto-imports useRoute() so we can chose to be explicit or implicit.

setup() {
  const route = useRoute()
}

Having our route unlocks all of the benefits of vue-router, including access to our query params!

Making the query param persist

With access to our route, we can check the query variable (what's after the = in streamer=) using route.query.streamer.

Easy!

I now use this logic alongside a ternary operator with the twitchStreamer variable.

const twitchStreamer = ref(route.query.streamer ? route.query.streamer : '')

Now, every time the page is navigated to or refreshed, our twitchStreamer will check if our route has a streamer query parameter.

If it does, our twitchStreamer will contain the parameter's value. Otherwise, it'll be an empty string.

Final code snippet

<!-- pages/example.vue -->
<template>
  <input v-model="twitchStreamer" />
</template>

<script>
  setup() {
    const route = useRoute()
    const router = useRouter()
    const twitchStreamer = ref(route.query.streamer ? route.query.streamer : '')

    watch(twitchStreamer, (twitchStreamer, previous) => {
      router.push({
        path: '/test',
        query: { streamer: twitchStreamer },
      })
    })

    return { twitchStreamer }
</script>

Silently Update URL in Nuxt 3

Cody Bontecou — Tue, 15 Feb 2022 06:24:42 +0000

Silently Update URL in Nuxt 3

We often need to update a query parameter like ?search=hello within our URL without refreshing the page. I'll quickly show you how to do that using Nuxt 3.

Collecting User Input

For this tutorial, I'll be using a simple <input> field with v-model to gather the query parameter.



<!-- pages/example.vue -->
<template>
  <input v-model="twitchStreamer" />
</template>

twitchStreamer is now a reactive variable that we can work with within setup().



// pages/example.vue
<script>
  setup() {
    const twitchStreamer = ref('')

    return { twitchStreamer }
</script>

Nuxt 3's useRouter()

I'm not sure what differences there are between Nuxt 2 and Nuxt 3, but so far there haven't been any.

Within setup(), call the auto-imported functions useRouter() to gain access to the router object.



// pages/example.vue
<script>
  setup() {
    const router = useRouter()
    const twitchStreamer = ref('')

    return { twitchStreamer }
</script>

Connecting v-model input to our URL

Now, set up a watcher to watch our twitchStreamer v-model value so that every time it's value is updated, a bit of code is ran.



// pages/example.vue
<script>
  setup() {
    const router = useRouter()
    const twitchStreamer = ref('')

    watch(twitchStreamer, (twitchStreamer, previous) => {
      router.push({
        path: '/test',
        query: { streamer: twitchStreamer },
      })
    })

    return { twitchStreamer }
</script>

Every time the twitchStreamer value is changed, we push to our URL using vue-router with the updated query.

The query parameter of .push takes in a key and value. The key in this example is streamer.

Because of this, the url that is updated will look like /test?streamer= with the twitchStreamer value beind after the = sign.

Final code snippet



<!-- pages/example.vue -->
<template>
  <input v-model="twitchStreamer" />
</template>

<script>
  setup() {
    const router = useRouter()
    const twitchStreamer = ref('')

    watch(twitchStreamer, (twitchStreamer, previous) => {
      router.push({
        path: '/test',
        query: { streamer: twitchStreamer },
      })
    })

    return { twitchStreamer }
</script>

Integrating Vue Devtools into an Electron Application

Cody Bontecou — Thu, 16 Dec 2021 04:32:43 +0000

Integrating Vue Devtools into an Electron Application

Bringing the VueJS devtools into our Electron application to help debug. This post assumes you have followed along with my previous post.

Installation

Vue Devtools provides a non-browser specific version of their devtools that they call standalone.

You can install the package globally:

npm install -g @vue/devtools@beta
# Or with yarn
yarn global add @vue/devtools@beta

Or within your project as a dependency:

npm install --save-dev @vue/devtools@beta
# Or with yarn
yarn add -D @vue/devtools@beta

Because our application is using Vue 3, we must us version 6 beta of the devtools according to this issue

Using the VueJS devtools globally

Once installed globally, you can now run the command vue-devtools on your command line.

This will spawn an instance of the devtools within its own window.

Now, add the following to the <head> section of your applications HTML file:

<script src="http://localhost:8098"></script>

If you want to debug your application remotely, use the following code snippet instead:

<script>
  window.__VUE_DEVTOOLS_HOST__ = '<your-local-ip>' // default: localhost
  window.__VUE_DEVTOOLS_PORT__ = '<devtools-port>' // default: 8098
</script>
<script src="http://<your-local-ip>:8098"></script>

Don't forget to remove this code before deploying to production!

Once your application has the appropriate script tag within its HTML, run it without killing the terminal that is running vue-devtools.

In our case,

npm run dev

Running the Vue Devtools as a dependency

Within your project directory, run the following command should spawn the devtools:

./node_modules/.bin/vue-devtools

For convenience sake and ease-of-use, I moved the ./node_modules/.bin/vue-devtools command into my package.json scripts:

"devtools": "./node_modules/.bin/vue-devtools"

When using the devtools as a local dependency, we do not need the script tag within our <head>

Remove this code snippet if you added it earlier:

<script src="http://localhost:8098"></script>

You should be all set up now. If you need additional help, check out their documentation or their GitHub repo documentation.

Hope you enjoyed it!

Global State Management in an Electron Application

Cody Bontecou — Thu, 16 Dec 2021 00:26:30 +0000

Global State Management in an Electron Application using Pinia and VueJS

Bringing the VueJS tool Pinia into our Electron application to manage its internal state. This post assumes you have followed along with my previous post.

What is a Store?

A Store is an entity that manages the global state of your application. It allows you to read and write to, regardless of the component you are working within.

You may have heard of other packages that help manage a store, Vuex is the standard for Vue and Redux is the standard for React.

Installation

This assumes you are using Vue 3. \
If you are using Vue 2, please refer to their documentation.

Because we are hooking this up to an Electron application, which is just Javascript with extra steps, we can utilize our favorite package manager such as npm or yarn to install Pinia.



yarn add pinia
# or with npm
npm install pinia

Use the createPinia function to attach it to the VueJS app:



// renderer/main.js

import { createApp } from 'vue'
import App from './App.vue'
import { createPinia } from 'pinia'

createApp(App).use(createPinia()).mount('#app')

Pinia is now available throughout your Electron application where Vue is available.

Creating our first store

A store is defined using defineStore() and requires a unique name. In this case, I am using main as the unique id attached to this store.



// renderer/stores/main.js

import { defineStore } from 'pinia'

// useMainStore could be anything like useUser, useCart
// the first argument is a unique id of the store across your application
export const useMainStore = defineStore('main', {
  state: () => ({
    msg: 'Hello World!',
  }),
  getters: {
    message: state => state.msg,
  },
  actions: {},
})

Using our store within a VueJS component

Now that our store is made, we can import it into individual components, allowing our components to interact with the store.



import { useMainStore } from '@/stores/main'

Within the setup function, I call our store function and set the value within a const variable:



setup() {
  const main = useMainStore()
}

This allows me to interact with my store. For this simple example, I am displaying the message defined within the getter.



setup() {
  const main = useMainStore()

  return {
    message: computed(() => main.message),
}

The entire component can be seen below:



// renderer/components/Hello.vue

<template>
  <div id="hello">
    <img src="https://vuejs.org/images/logo.png" />
    <h1>{{ message }}</h1>
  </div>
</template>

<script>
import { computed, defineComponent } from 'vue'
import { useMainStore } from '@/stores/main'

export default defineComponent({
  setup() {
    const main = useMainStore()

    return {
      message: computed(() => main.message),
    }
  },
})
</script>

Getting HMR to work

While HMR is built into Pinia, it doesn't play well with Electron and requires a bit of additional configuration.
Pinia provides additional documentation of this topic here.

HMR (Hot Module Replacement) allows you to edit your stores and see the changes within your app without having to reload the page or restart your server.

Here's what my main store looks like after updating it to allow for HMR:



import { defineStore, acceptHMRUpdate } from 'pinia'

export const useMainStore = defineStore('main', {
  state: () => ({
    msg: 'Hello World!',
  }),
  getters: {
    message: state => state.msg,
  },
  actions: {},
})

if (import.meta.hot) {
  import.meta.hot.accept(acceptHMRUpdate(useMainStore, import.meta.hot))
}

Passing acceptHMRUpdate your store (useMainStore in my case), it gives us HMR!

Hope you enjoyed!

Building an Electron App with VueJS and Vite

Cody Bontecou — Thu, 16 Dec 2021 00:18:34 +0000

Building an Electron App with VueJS and Vite

Let's combine the power of Electron with VueJS and Vite to create incredible desktop applications using nothing but Javascript. \
This article was originally posted on my site.

TL: DR

Clone this repo and use it as a starter template.

electron-vue is dead, long live electron-vue-template

It appears electron-vue, the leading Github repository that combines VueJS and Electron hasn't had a commit since April 21, 2021. Prior to the April 21st commits, it hasn't had serious contribution activity since December 3rd, 2019 and before that October 23, 2018.

The repo may not be dead, but it's on its way out - failing builds, hundreds of open issues, and being locked into specific tooling versions all may be signs to be.

vue-cli-plugin-electron-builder is neat, but it's not my cup of tea.

With 3.5k Github Stars and about the same amount of support as electron-vue, I decided to give it a shot. Their claim is to run the command vue add electron-builder to your existing application created using Vue CLI 3 or 4 and that's it, your VueJS web app now runs within an Electron instance.

With a fresh VueJS application built using vue create then immediately running vue add electron-builder, I was able to get an Electron instance running which truly is incredible.

Although it compiled and launched, it did give me an ExtensionWarning error message. Trying to move around the directory structure and changing the file names broke the application. Having to read the documentation to manage something as basic as filename and location is irritating.
I'm afraid this package has a bit too much magic going on behind the scenes for me to be comfortable using it.

Why electron-vue-template? It only has 14 stars!

It's very simplistic, with no unnecessary dependency overhead.

electron-vue-template scaffolds the site in a transparent and easy-to-manage way. It comes with a very nice directory structure, making it easy to digest and understand where configuration or build code is occurring. There's no magic happening behind the scenes in a node_module build script.

Because of its transparent nature and well-structured code. This template works perfectly as a beginning spot to build out a desktop application using VueJS and Electron.

There is little loss of this repository loses its only contributor tomorrow. Because it's a template, you can clone it and pick apart the pieces you want.

Not to mention, it comes with Vite!

Vite is in a league of its own when it comes to Hot Module Replacement (HMR). Because of its on demand file serving, application build times are nearly instant - far, far quicker than any other build tool that exists.

Of the three packages mentioned, electron-vue-template is the only one that comes with Vite built-in. This alone is a reason to utilize the template.

What's next?

I've been using Electron these past few weeks on a personal app that I plan to reveal soon. It's gotten to a stage where the backend logic is hammered down and is in need of a UI boost as well as a state-management system like Vuex.

I'll be integrating a state-management system soon - either Vuex or Pinia. I'm curious to see what this process looks like within an Electron app utilizing Vue, but I'll try my best to write up a blog post as I go through the process.

Generating Twitter Lists with Python

Cody Bontecou — Wed, 15 Sep 2021 00:18:15 +0000

Generating Twitter Lists with Python and Tweepy

The finished project can be seen here

Paul Graham is an influential man in the tech and startup space.

His Twitter activity keeps me entertained and informed, spanning from discussions about air quality significantly impacting life expectancy to interesting discussions he has with his kids.

The air pollution discussion this morning motivated me to want to see his feed and all of the interesting things a man like Paul sees. I started to follow the accounts he follows and after about 30 or so clicks I decided to investigate Twitter's API for a way to automate this.

This is where I discovered Twitter Lists.

Twitter Lists are a great way to create custom feeds

Viewing a List timeline will show you a stream of Tweets from only the accounts on that List.

Twitter Lists are the perfect solution. It gives me the ability to create custom feeds.

If I feel like delving into Paul Grahams feed, it's a click away. Same with Elon Musk or any of the other influential users on Twitter.

Using Tweepy to automatically generate our Twitter Lists

Tweepy is an easy-to-use Python library for accessing the Twitter API.

Tweepy provides built in methods to easily interact with the Twitter API.

In this project, I use the following from Tweepy:

Authenticating with Twitter's API using Tweepy

This tutorial will assume you already have a Twitter developer account. If you do not, I went into detail here on how to generate the proper authentication keys needed to access Twitter's API.

Tweepy provides the helper function .OAuthHandler that requires you to pass it your consumer key and consumer secret initializing the auth object, you then must call its method .set_access_token() which requires your access token and access token secret given to you when creating your developer account and generating your app.

import tweepy

auth = tweepy.OAuthHandler(os.getenv("consumer_key"), os.getenv("consumer_secret"))
auth.set_access_token(os.getenv("access_token"), os.getenv("access_token_secret"))

Initializing Tweepy's API and Client objects

We can now utilize our auth variable to create API and Client objects using the following code:

api = tweepy.API(auth)
client = tweepy.Client(
    bearer_token=os.getenv("bearer_token"),
    consumer_key=os.getenv("consumer_key"),
    consumer_secret=os.getenv("consumer_secret"),
    access_token=os.getenv("access_token"),
    access_token_secret=os.getenv("access_token_secret"),
    wait_on_rate_limit=True,
)

With these objects, we can now access every Twitter endpoint.

Creating a List using Tweepy's API

Tweepy methods used:

.create_list(): Takes three parameters: name, mode, and description. Name and description are self-explanatory and mode can either be "public" or "private" to define the visibility status of the List.

The response from a successfully List creation returns the List data. I will be using this list later on, so I decided to extract it's id into the variable list_id.

list_name = "Paul Grahams's Feed"
list_description = "A list of everyone Paul Graham follows"

twitter_list = api.create_list(name=list_name, description=list_description)
list_id = twitter_list._json["id"]

Getting a User and the accounts they follow

Tweepy methods used:

By passing client.get_user() a twitter handle - in this case, Paul Graham - I can get all of the public data Twitter provides regarding that user.

I then use that user's data with client.get_users_following() alongside max_results. The argument max_results defines how many user objects Twitter will pass back. In this case, I used the max of 1000. The default is 100.

twitter_handle = "paulg"
user = client.get_user(username=twitter_handle)

followers = client.get_users_following(id=user.data.id, max_results=1000)

Automatially adding users to the list

Tweepy methods used:

.add_list_members

Now that we have the List we want to populate and the followers we want populate it with, we use the api.add_list_members() method.

This method takes a list of up to 100 Twitter User ID's. The code snippet below chunks out follower data into sections of 100 Users and generates a list of ids to pass.

We are also passing this method the list_id that was saved when we created the list.

for i in range(0, len(followers.data), 100):
    ids = [follower["id"] for follower in followers.data[i : i + 100]]
    api.add_list_members(list_id=list_id, user_id=ids)

Things to keep in mind when working with Twitter's API

Twitter rate limits just about all of their endpoints. Here is Twitter's documentation on what the rate limits are. Keep this is mind when developing Twitter-based applications because you may find yourself with an odd error.

Thank you for reading! I hope you enjoyed it.

VueJS Custom Event - Emit Multiple Values

Cody Bontecou — Tue, 14 Sep 2021 15:17:23 +0000

Emit Multiple Values from Child to Parent in a VueJS Custom Event

VueJS custom events are a great way to communicate between child and parent components.

I was recently was in need of a way to pass more than one value from child to parent within a single custom event. The VueJS Docs do not provide any example showcasing this and instead I needed to refer to some comments within a Stack Overflow thread.

Here is what I found.

To emit more than one parameter, it's best to pass the data as an object:

this.$emit('success', {
  username: 'CodyBontecou',
  error: false,
})

VueJS's custom events only accepts two parameters:

The name of the event. In this case, the event name is success.
Data you want to pass. This can be a string, object, number, boolean, or function.

Access the parameters from the parent component using an event listener:

We emitted the success event from the child component. This event can be captured within the parent component where the child is rendered using the @ sign, in this case, @success.

@success calls the onSuccess method when success is emitted from the child component.
The username and message params are destructured from the object passed into the success emit and are now usable within the onSuccuss function to do as you please.

<LoginForm @success="onSuccess" />

methods: {
  onSuccess({ username, error }) {
    ...
  },
}

It took me a little while to find the solution to this problem, so I figured it was best to document it within a blog post for others to benefit from.

I hope it helped!

Building a Random Movie Picker Using Python and Selenium

Cody Bontecou — Sun, 12 Sep 2021 21:04:19 +0000

Building a Random Movie Picker Using Python and Selenium

My wife (Dany) has been reviewing movies every week and posting them on her Youtube Channel. She recently asked me if it was possible to scrape this list of directorsand return a random movie they directed in order to help her decide on which movie to review next.

Sounds like a job for some good-ol-web-selenium.

How I Chose to Approach this Problem.

Scraping websites can be finicky. You're at the whim of the content creators markdown decisions.

The markup of Elacervo is tricky. Their director's page is consistent, but the individual director posts are not. Some director pages have their movie list individual p tags while some have their entire movie list formatted within a single span element. This is a problem.

Rather than trying to hack together a way to get most of the directors videos, I chose to get the list of directors and gather their movie lists from a reliable source.

I chose IMDB's which has a convenient python wrapper around their API IMDbPY.

Why did I pick Selenium as the Tool for this?

Dany is a beginner web developer and is curious about Python. Selenium provides the developer with visual confirmation with the automated browser interactions. Spawning a new browser instance and clicking through the site does impact performance, but I believe the benefits of the visual aspect of Selenium out-weighs the performance issues.

A framework such as Scrapy would provide the data quicker, but a big reason I'm building this is to help Dany learn Python.

Setting up Selenium to Automate my Browser

Selenium takes a bit of setting up in order to start automating your browser.

Using Python 3's built in package manager pip, download Selenium with the command pip install selenium.

I highly recommend taking advantage of a virtualenv and creating an isolated Python environment.

You will also need to download the appropriate web driver. Selenium's documentation has links to the most popular browser drivers. For this tutorial, I will be using Google Chrome and Chromedriver.

Using Selenium and Python to Gather the Directors

Below is the code snippet I decided to use. I've appended numbers comments to describe important choices made within the snippet.

import json
from selenium import webdriver

driver = webdriver.Chrome('chromedriver') // 1
driver.get('https://www.elacervo.com/directores') // 2

// 3
for i in range(4):
  time.sleep(5)
  driver.execute_script("window.scrollTo(0, document.body.scrollHeight);")

// 4
directors = driver.find_elements_by_css_selector(
  "a[href*='https://www.elacervo.com/post/']"
  )

// 5
unique_directors = []
for link in directors:
  if (link.get_attribute("href")) not in unique_directors:
    unique_directors.append(link.get_attribute("href"))

// 6
names = []
for link in unique_directors:
  slug = link.split('/')[-1]
  name = slug.replace('-', ' ').title()
  names.append({"name": name})

// 7
with open('directors.json', 'w') as outfile:
  json.dump(names, outfile)

// 8
driver.quit()

driver = webdriver.Chrome('chromedriver') - This is where we are telling Selenium to use spawn a new Google Chrome instance. The value, chromedriver, that we are passing to the .Chrome() method is the location of the chromedriver file we downloaded in the previous step.
driver.get('https://www.elacervo.com/directores') - Here we are telling our now made Selenium driver to navigate to the URL https://www.elacervo.com/directores.
The website I am scraping has some lazy-loading logic where only a certain number of directors are loaded until the page is scrolled to the bottom. This is executing some client-side javascript to scroll to the bottom of the page, wait a few seconds for the new directors to load, then scroll to the new bottom of the page.
Here I am gathering all of the html events that contain an a tag with and href that contains https://www.elacervo.com/post/. This is using the logic href*= which includes the wildcard character *.
This is extracting the directors URL that is inside the href source. It's then placing the URL into a unique_directors list. Some of the directors on this page have their link twice so I'm removing any duplicate URLs.
I'm cleaning the URL links to simply get the directors names from them. The links gathered look like https://www.elacervo.com/post/martin-scorsese. The logic here is taking everything after the last / character, replacing -'s with spaces, and then capitalizing the first letter of each word within their names.
I then using json.dump to write the gathered director names into a json file for quicker use later on. Reading from a json file is much quicker than spawning a browser to click around and extract data.
driver.quit() - This closes the a Selenium Chrome instance.

Using IMDbPY to Query IMDBs Database

IMDbPY is a pretty neat package for querying IMDB's data. With only a few lines of Python, we can see the entire filmography of a directory.

This Python Snippet Will Return Every Film for Each Director

import json
from imdb import IMDb

file = open('directors.json',)
directors = json.load(file)

movies = []
ia = IMDb()
for person in directors:
  try:
    director = ia.search_person(person['name'])[0]
    try:
      films = ia.get_person_filmography(director.personID)['data']['filmography']['director']
      for film in films:
        if film['kind'] == 'movie':
          try:
            if (film['year']):
              movies.append(film)
          except KeyError:
            continue
    except AttributeError:
      continue
  except IndexError:
    continue

  with open('movies.json', 'w') as outfile:
    json.dump([{"title": movie['title'], 'year': movie['year']} for movie in movies], outfile)

We use Python's built in open function to open the directors.json file we created in the Selenium section. Then using Python's JSON decoder, we can load data from the file into a usable JSON format.

Initializing an IMDb object gives us access to the packages functions, allowing us to query IMDb's database.

The method .search_person(person['name']) returns a list of people IMDb has within in their database. It appears the first result in the returned list is the most popular and reasoning behind the [0]. For this project, I'm making the assumption that is the director I want to work with.

Differentiating Movie From Other Film Types

IMDbPY Movie objects properties can be seen documented here. For this project, I'm just interested in movies, so I apply a conditional to check, appending the accepted films to a movies list.

It turns out that IMDbPY's Movie object only has the property year if the movie has been released, otherwise, it has the property status. I only want movies that are watchable now, and filter out the data accordingly.

movies = []
if film['kind'] == 'movie':
    try:
        if (film['year']):
            movies.append(film)
    except KeyError:
        continue

Writing the Movie Data to a Reusable JSON File

Like the data extracted using Selenium, I decided to reduce the number of API requests to IMDb by writing the acquired data into a reusable JSON file.

Rather than extracting all of the IMDb Movie object's data, I decided to simply take the movie's title and year values. In the future, it could be cool to extract additional data allowing for advanced filtering. For example, wanting to only watch a movie between the years 1970 and 1980 with a rating greater than 9.0. Although the IMDb Movie object said it has certain properties, it ended up being a bit finicky and I decided against it for now.

with open('movies.json', 'w') as outfile:
    json.dump([{"title": movie['title'], 'year': movie['year']} for movie in movies], outfile)

Randomly Selecting the Movie From Our List

Now that we have a list of all of the movies from our group of directors in a json file, I can use Python's random.choice to randomly select a movie.

import random
import json

file = open('movies.json')
data = json.load(file)
print(random.choice(data))

Random Movie Watching is fun!

Seriously give it a shot. At the very least, randomly select a movie and watch its trailer. Many of these movies I had never heard of but they are fascinating, creative and artistic.

I hope this article was helpful!

Convert a ReactJS Component to VueJS

Cody Bontecou — Thu, 09 Sep 2021 14:32:28 +0000

Convert a ReactJS Component to VueJS

In this tutorial, we're going to rewrite a Timeline component built in ReactJS by Florin Pop to VueJS. You can see the component in action here.

Scaffold your VueJS app using Vite

I try to use Vite whenever given the opportunity.

It increases development speed by an incredibly amount due to features such as Instant Server Start and Lightning Fast HMR (Hot Module Replacement).

Let's init our project:

npm init vite@latest

Follow the prompt and select vue as our framework and and as our variant.
cd into the generated directory and install the dependencies with npm install.
Run your new vite + vuejs project using npm run dev.

Building the VueJS Component

Now, the fun stuff. Let's work on converting the ReactJS code.

`App.vue` looks very similar to the ReactJS version:

// App.vue
<script setup>
import Timeline from './components/Timeline.vue'
</script>

<template>
  <Timeline />
</template>

// React Version
const App = () => (
  <>
    <h1>React Timeline</h1>
    <Timeline />
  </>
)

The key difference here is the template tag, an essential part of VueJS syntax.

Lets now dig into the Timeline component - `Timeline.vue`

The Timeline component is where the data gathering and container occur.

In this example, we are gathering the data from our local data.json file. It shouldn't require too much additional work to get this component to work with live data using a package such as axios.

While the ReactJS version takes up less vertical space, the VueJS version is much easier to read. Rather than applying an inline map function, we use a v-for to apply the same functionality.

VueJS attaches dynamic data a property called v-bind. The shorthand for v-bind is :. As you can see :data=data is the VueJS equivalent to data={data}.

Also note, VueJS doesn't use className to apply its CSS. Instead, you can use the classic class keyword.

// React Version
const Timeline = () =>
  timelineData.length > 0 && (
    <div className="timeline-container">
      {timelineData.map((data, idx) => (
        <TimelineItem data={data} key={idx} />
      ))}
    </div>
  )

// components/Timeline.vue

<template>
  <div class="timeline-container">
    <TimelineItem v-for="(data, idx) in timelineData" :data="data" :key="idx" />
  </div>
</template>

<script>
import json from '../assets/data.json'
import TimelineItem from './TimelineItem.vue'

export default {
  components: {
    TimelineItem,
  },
  data: () => ({
    timelineData: json,
  }),
}
</script>

Here's an example of what the data looks like:

[
  {
     "text": "Started working on the app-ideas repository",
     "date": "February 25 2021",
     "category": {
        "tag": "app-ideas",
        "color": "#FFDB14"
     },
     "link": {
        "url": "https://github.com/florinpop17/app-ideas",
        "text": "Check it out on GitHub"
     }
  },
  ...
]

Converting the TimelineItem Component to VueJS

The TimelineItem Component is where the majority of the UI logic is taking place. We are now playing with the data we gathered within the Timeline component.

There isn't much happening outside of destructing the data object and styling as needed.

We destructure data in VueJS differently than in ReactJS.

When using the data between two HTML elements, you must destructure it using two curly brackets {{}}
When accessing the data within a v-bind:, you destructure it using single curly brackets {data}
When accessing the data within a directive such as v-if, you type in the data v-if="data"

const TimelineItem = ({ data }) => (
  <div className="timeline-item">
    <div className="timeline-item-content">
      <span className="tag" style={{ background: data.category.color }}>
        {data.category.tag}
      </span>
      <time>{data.date}</time>
      <p>{data.text}</p>
      {data.link && (
        <a href={data.link.url} target="_blank" rel="noopener noreferrer">
          {data.link.text}
        </a>
      )}
      <span className="circle" />
    </div>
  </div>
)

// components/TimelineItem.vue
<template>
  <div class="timeline-item">
    <div class="timeline-item-content">
      <span class="tag" :style="{ background: `${data.category.color}` }">
        {{ data.category.tag }}
      </span>
      <time>{{ data.date }}</time>
      <p>{{ data.text }}</p>
      <a
        v-if="data.link"
        :href="data.link.url"
        target="_blank"
        rel="noopener noreferrer"
      >
        {{ data.link.text }}
      </a>
      <span class="circle" />
    </div>
  </div>
</template>

<script>
export default {
  props: {
    data: {
      type: Object,
      required: true,
    },
  },
}
</script>

<style></style>

Additional VueJS config

To get the CSS provided below to style our component, we need to expose the CSS to work within our VueJS application. For this example, I placed an import statement within my main.js file.

import { createApp } from 'vue'
import App from './App.vue'

import './assets/main.css'

createApp(App).mount('#app')

Styling the component using CSS

For this component, I am using the main.css file placed within our assets directory. Here is the css used within this component:

/* assets/main.css */
@import url('https://fonts.googleapis.com/css?family=Lato');

* {
  box-sizing: border-box;
}

body {
  background-image: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);

  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;

  min-height: 100vh;
  font-family: 'Lato', sans-serif;
  margin: 0;
}

h1 {
  text-align: center;
}

#app {
  padding: 0 20px;
  width: 100%;
}

.timeline-container {
  display: flex;
  flex-direction: column;
  position: relative;
  margin: 40px 0;
}

.timeline-container::after {
  background-color: #e17b77;
  content: '';
  position: absolute;
  left: calc(50% - 2px);
  width: 4px;
  height: 100%;
}

.timeline-item {
  display: flex;
  justify-content: flex-end;
  padding-right: 30px;
  position: relative;
  margin: 10px 0;
  width: 50%;
}

.timeline-item:nth-child(odd) {
  align-self: flex-end;
  justify-content: flex-start;
  padding-left: 30px;
  padding-right: 0;
}

.timeline-item-content {
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
  border-radius: 5px;
  background-color: #fff;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  padding: 15px;
  position: relative;
  width: 400px;
  max-width: 70%;
  text-align: right;
}

.timeline-item-content::after {
  content: ' ';
  background-color: #fff;
  box-shadow: 1px -1px 1px rgba(0, 0, 0, 0.2);
  position: absolute;
  right: -7.5px;
  top: calc(50% - 7.5px);
  transform: rotate(45deg);
  width: 15px;
  height: 15px;
}

.timeline-item:nth-child(odd) .timeline-item-content {
  text-align: left;
  align-items: flex-start;
}

.timeline-item:nth-child(odd) .timeline-item-content::after {
  right: auto;
  left: -7.5px;
  box-shadow: -1px 1px 1px rgba(0, 0, 0, 0.2);
}

.timeline-item-content .tag {
  color: #fff;
  font-size: 12px;
  font-weight: bold;
  top: 5px;
  left: 5px;
  letter-spacing: 1px;
  padding: 5px;
  position: absolute;
  text-transform: uppercase;
}

.timeline-item:nth-child(odd) .timeline-item-content .tag {
  left: auto;
  right: 5px;
}

.timeline-item-content time {
  color: #777;
  font-size: 12px;
  font-weight: bold;
}

.timeline-item-content p {
  font-size: 16px;
  line-height: 24px;
  margin: 15px 0;
  max-width: 250px;
}

.timeline-item-content a {
  color: #333;
  text-decoration: none;
  font-size: 14px;
  font-weight: bold;
}

.timeline-item-content a::after {
  content: ' ►';
  font-size: 12px;
}

.timeline-item-content .circle {
  background-color: #fff;
  border: 3px solid #e17b77;
  border-radius: 50%;
  position: absolute;
  top: calc(50% - 10px);
  right: -40px;
  width: 20px;
  height: 20px;
  z-index: 100;
}

.timeline-item:nth-child(odd) .timeline-item-content .circle {
  right: auto;
  left: -40px;
}

@media only screen and (max-width: 1023px) {
  .timeline-item-content {
    max-width: 100%;
  }
}

@media only screen and (max-width: 767px) {
  .timeline-item-content,
  .timeline-item:nth-child(odd) .timeline-item-content {
    padding: 15px 10px;
    text-align: center;
    align-items: center;
  }

  .timeline-item-content .tag {
    width: calc(100% - 10px);
    text-align: center;
  }

  .timeline-item-content time {
    margin-top: 20px;
  }

  .timeline-item-content a {
    text-decoration: underline;
  }

  .timeline-item-content a::after {
    display: none;
  }
}

footer {
  background-color: #222;
  color: #fff;
  font-size: 14px;
  bottom: 0;
  position: fixed;
  left: 0;
  right: 0;
  text-align: center;
  z-index: 999;
}

footer p {
  margin: 10px 0;
}

footer i {
  color: red;
}

footer a {
  color: #3c97bf;
  text-decoration: none;
}

Additional Resources

Github Repository with source code - https://github.com/CodyBontecou/timeline-component-vuejs
Florin Pop made a Youtube video walking through building this component using ReactJS.
ReactJS Codepen

Mocking an API request with Mock Service Worker and Typescript

Cody Bontecou — Mon, 26 Jul 2021 09:07:56 +0000

Mocking an API request with Mock Service Worker and Typescript

Testing software is essential to the development cycle of building applications. A strong test suite gives the developer(s) a sense of freedom to organize and refactor the codebase as needed without fear of unknowingly breaking something.

I'm using Blogflow.io as a means to learn Typescript while simultaneously building a tool to help automate distributing blog posts throughout the web.

A large portion of this application requires integrating 3rd party APIs to communicate with services such as Medium, Hashnode, Reddit, etc.

It's tough to test against 3rd party APIs. We don't want to hit their endpoints every time we run our test suite. Instead, we choose to mock the response, making the assumption that given specific inputs, they API will output a specific response.

Mock Service Worker (MSW) provides a simple way to intercept these API calls so that our tests aren't hitting 3rd party endpoints and interacting with live data.

Setup and Installation

I was going to walk you through setting MSW up but they provide such clear documentation that I think doing anything besides linking you to them would be an injustice.

You're welcome to view my repo if you would like to see how I set it up in my project alongside packages like dotenv and Typescript.

Mocking Medium's API

Everything below assumes you followed the Setup and Installation or have an understanding of MSW.

In order to mock Medium's Create a Post request, I checked their API here.

They provide an example response:

HTTP/1.1 201 OK
Content-Type: application/json; charset=utf-8

{
  "data": {
    "id": "e6f36a",
    "title": "Liverpool FC",
    "authorId": "5303d74c64f66366f00cb9b2a94f3251bf5",
    "tags": ["football", "sport", "Liverpool"],
    "url": "https://medium.com/@majelbstoat/liverpool-fc-e6f36a",
    "canonicalUrl": "http://jamietalbot.com/posts/liverpool-fc",
    "publishStatus": "public",
    "publishedAt": 1442286338435,
    "license": "all-rights-reserved",
    "licenseUrl": "https://medium.com/policy/9db0094a1e0f"
  }

Mocking this with MSW was simple. It was nearly a copy paste:

//  src/mocks/handlers.ts

import { rest } from 'msw'

export const handlers = [
1. rest.post('https://api.medium.com/*', (req, res, ctx) => {
    return res(
2.    ctx.status(201),
3.    ctx.json({
        data: {
          id: 'e6f36a',
          title: 'Liverpool FC',
          authorId: '5303d74c64f66366f00cb9b2a94f3251bf5',
          tags: ['football', 'sport', 'Liverpool'],
          url: 'https://medium.com/@majelbstoat/liverpool-fc-e6f36a',
          canonicalUrl: 'http://jamietalbot.com/posts/liverpool-fc',
          publishStatus: 'public',
          publishedAt: 1442286338435,
          license: 'all-rights-reserved',
          licenseUrl: 'https://medium.com/policy/9db0094a1e0f',
        },
      })
    )
  }),
]

I set this handler to intercept POST requests to any URL that starts with https://api.medium.com/*.

The * represents a wildcard meaning anytime my application attempts to send a POST request to a URL starting with https://api.medium.com/, it will intercept it and return the provided response at 3.

We are setting the HTTP response status code we'd like to test against.
This is where we define the JSON response that we wish to be returned from the POST request.

Edge cases

Certain packages require additional configuration. These are primarily jest issues rather than MSW, but I ran into them while setting this up. I decided to document it incase anyone else runs into these issues like I did.

dotenv

Within your jest.config.ts file, make sure you have the following:

// jest.config.ts
module.exports = {
  setupFiles: ['dotenv/config'],
}

setupTests file

You'll need to set up your jest tests to listen, reset, and close the MSW server.

If you use Create React App, you may already have a file named src/setupTests.js.

Otherwise, you'll need to create a setup file yourself.

Then, add in the following code:

// src/setupTests.js
import { server } from './mocks/server.js'

// Establish API mocking before all tests.
beforeAll(() => server.listen())

// Reset any request handlers that we may add during the tests,
// so they don't affect other tests.
afterEach(() => server.resetHandlers())

// Clean up after the tests are finished.
afterAll(() => server.close())

This sets your Jest testing environment up to start the MSW server, reset it, and close it after different stages of the Jest lifecycle.

You'll then want to add a line to your jest.config.ts file:

// jest.config.ts
module.exports = {
  setupFilesAfterEnv: ['<rootDir>/src/setupTests.ts'],
}

Error: ENOENT: no such file or directory, open "file"

I'm reading markdown files in Blogflow. Before writing my tests, I was using relative paths like so:

const data = matter(readFile('./file.md'))

My tests didn't like that and threw the error Error: ENOENT: no such file or directory, open "file"

This Stackoverflow post explained I needed to use _dirname. This code now looks like the snippet below. Now my tests and code run as expected.

const data = matter(readFile(__dirname + '/file.md'))

Conclusion

This is all fairly new to me, but I believe there is value in this sort of testing.

One immediate case is mocking response's that are loaded into components. It's tough to get every state through live data. It's much easier to mock certain HTTP status codes and response objects that will change the way a component is rendered.

I hope this article was helpful. Let me know if you have any questions, comments, or suggestions on Twitter @codybontecou

DEV Community: Cody Bontecou

How to use Vuetify with Nuxt 3

How to use Vuetify with Nuxt 3

Installation

Creating our Vuetify plugin

Configure Nuxt 3 to use our new plugin

Enjoy Vuetify alongside Nuxt 3

Nuxt 3 and Pinia

Nuxt 3 and Pinia

Vuex -> Pinia

Installing Pinia in Nuxt 3

Add Pinia to your nuxt.config file

Build your Pinia store

Bring Pinia in Vue Component

Using URL Query Params in Nuxt 3

Using URL Query Params in Nuxt 3

The problem we're solving

Using useRoute in Nuxt

Making the query param persist

Final code snippet

Silently Update URL in Nuxt 3

Silently Update URL in Nuxt 3

Collecting User Input

Nuxt 3's useRouter()

Connecting v-model input to our URL

Final code snippet

Integrating Vue Devtools into an Electron Application

Integrating Vue Devtools into an Electron Application

Installation

Using the VueJS devtools globally

Running the Vue Devtools as a dependency

Global State Management in an Electron Application

Global State Management in an Electron Application using Pinia and VueJS

What is a Store?

Installation

Creating our first store

Using our store within a VueJS component

Getting HMR to work

Building an Electron App with VueJS and Vite

Building an Electron App with VueJS and Vite

TL: DR

electron-vue is dead, long live electron-vue-template

vue-cli-plugin-electron-builder is neat, but it's not my cup of tea.

Why electron-vue-template? It only has 14 stars!

Not to mention, it comes with Vite!

What's next?

Generating Twitter Lists with Python

Generating Twitter Lists with Python and Tweepy

Twitter Lists are a great way to create custom feeds

Using Tweepy to automatically generate our Twitter Lists

Authenticating with Twitter's API using Tweepy

Initializing Tweepy's API and Client objects

Creating a List using Tweepy's API

Getting a User and the accounts they follow

Automatially adding users to the list

Things to keep in mind when working with Twitter's API

VueJS Custom Event - Emit Multiple Values

Emit Multiple Values from Child to Parent in a VueJS Custom Event

To emit more than one parameter, it's best to pass the data as an object:

Access the parameters from the parent component using an event listener:

Building a Random Movie Picker Using Python and Selenium

Building a Random Movie Picker Using Python and Selenium

How I Chose to Approach this Problem.

Why did I pick Selenium as the Tool for this?

Setting up Selenium to Automate my Browser

Using Selenium and Python to Gather the Directors

Using IMDbPY to Query IMDBs Database

This Python Snippet Will Return Every Film for Each Director

Differentiating Movie From Other Film Types

Writing the Movie Data to a Reusable JSON File

Randomly Selecting the Movie From Our List

Random Movie Watching is fun!

Convert a ReactJS Component to VueJS

Convert a ReactJS Component to VueJS

Scaffold your VueJS app using Vite

Building the VueJS Component

App.vue looks very similar to the ReactJS version:

Lets now dig into the Timeline component - Timeline.vue

Converting the TimelineItem Component to VueJS

Additional VueJS config

`App.vue` looks very similar to the ReactJS version:

Lets now dig into the Timeline component - `Timeline.vue`