One year with Vue.js

Okay, okay, it’s been more than a year, but I couldn’t resist the title. Sorry! This is a write-up about how I started with Vue.js and how I use it to develop my side project.

Digital nomading in October in Thessaloniki, Greece

Travel & what to see Thessaloniki is the second largest city in Greece, it is a student city full of bars and tavernas. The most known site is the White Tower which houses a little museum about the city’s history and a roof with 360° view. You can take a little boat ride around the […]

Writing test cases with given, when and then

At my previous workplace we worked with Groovy and Grails and I had the opportunity to use testing framework for Groovy called Spock. Spock uses labels to divide test cases into different blocks. That way, data definition and final asserts are separated from the code under test, which is typically a function or a method […]

Convert Markdown text to HTML and to plaintext in JavaScript

Let’s create a small JavaScript module that will be able to convert formatted text in Markdown to HTML and to plaintext. I chose Marked.js as my library of choice because with this library it is very easy to modify the output. Here is our basic module to convert Markdown to HTML:

import marked from "marked"

const mdOptions = {
  // whether to conform to original MD implementation
  pedantic: false,
  // Github Flavoured Markdown
  gfm: true,
  // tables extension
  tables: true,
  // smarter list behavior
  smartLists: true,
  // "smart" typographic punctuation for things like quotes and dashes
  smartypants: true,
  // sanitize HTML tags
  sanitize: true,
  // ... other options
}

export function convertToHTML(markdownText) {
  marked.setOptions(mdOptions)
  return marked(markdownText)
}

import marked from "marked"

const mdOptions = {

// whether to conform to original MD implementation

pedantic: false,

// Github Flavoured Markdown

gfm: true,

// tables extension

tables: true,

// smarter list behavior

smartLists: true,

// "smart" typographic punctuation for things like quotes and dashes

smartypants: true,

// sanitize HTML tags

sanitize: true,

// ... other options

}

export function convertToHTML(markdownText) {

marked.setOptions(mdOptions)

return marked(markdownText)

}

As we can […]

Why I chose MailerLite instead of MailChimp

I was recently building a product launch page for Contact Cache and I wanted to allow people to sign up for product announcements and news. I’ve never collected email addresses or mass-emailed people before. And because I am not heavily involved in marketing, I didn’t know much about the state of email marketing platforms today. […]

Introducing Contact Cache

It has been more than a year since I wanted to have some sort of “personal relationship manager”. In other words I needed a tool to write down notes about people since I am always forgetful. And since at that time I didn’t find anything satisfactory, I decided to build an app for myself that […]

Flask API Quickstart Application with JSON Web Tokens, SQLAlchemy and Pytest

I created a sample Flask application that shows how to create HTTP API with authentication provided by JSON Web Tokens. It can be used to learn a bit about Flask, SQLAlchemy, JSON Web Tokens, Pytest and how it all works together. In particular, it shows how to: hash passwords using bcrypt issue and verify JWT […]

Rockets: Python-based launch page

It has been 2 years already since I first played with Python and Flask and ended up creating Rockets. At the time, I was learning the basics and wanted to create something useful. Rockets is a very simple, one file Flask application that shows a sign up form for collecting email addresses. It uses only […]

How to reference hidden elements in Vue.js

In Vue.js we can reference either Vue.js component or a standard DOM element by marking it with ref=”ourReferenceName” inside the HTML tag and later access this element easily inside the component with this.$refs.ourReferenceName. Let’s have a look at a simple component example:

<template>
  <div>
    <div ref="referencedElement"></div>
  </div>
</template>

<div>

</div>

</template>

<script>
export default {
  methods: {
    accessElement() {
      const element = this.$refs.referencedElement
      // TODO: do something with the element
    }
  }
}
</script>

export default {

methods: {

accessElement() {

const element = this.$refs.referencedElement

// TODO: do something with the element

}

</script>

So far so good. The problem comes when we want to […]

Using validate.js instead of Vuelidate in Vue.js applications

When I first needed some basic form of validation in my Vue.js application, I discovered and used Vuelidate, a popular validation library written specifically for Vue.js. Vuelidate is simple to use and works pretty well inside Vue.js components. It validates all different data sources in a component, based on the validation criteria provided as a […]