Category Archives: Web Development

Simple Dark Theme Switch with Vue.JS


In this post I’m going to show you how quickly you can add a dark theme switch to your Vue.JS application.

We’re going to start with a blank application. And then we’re going to create a dark-theme CSS file which we’re going to save in public/css/darktheme.css.

This is how the application looks without any CSS.

Now, we’re going to put the following code in darktheme.css:

body {
    background-color: #2c3e50;

h1,h2,h3,h4,h5,h6,p {
    color: #42b983;

We can test our theme by appending the following line in the <head> of public/index.html

    <link rel="stylesheet" href="<%= BASE_URL %>css/darktheme.css">

Now let’s make this interactive!

In src/App.vue we’ll add a button and the following methods:

    <button @click="darkThemeSwitch">Switch Theme</button>

  methods: {
    _addDarkTheme() {
      let darkThemeLinkEl = document.createElement("link");
      darkThemeLinkEl.setAttribute("rel", "stylesheet");
      darkThemeLinkEl.setAttribute("href", "/css/darktheme.css");
      darkThemeLinkEl.setAttribute("id", "dark-theme-style");

      let docHead = document.querySelector("head");
    _removeDarkTheme() {
      let darkThemeLinkEl = document.querySelector("#dark-theme-style");
      let parentNode = darkThemeLinkEl.parentNode;
    darkThemeSwitch() {
      let darkThemeLinkEl = document.querySelector("#dark-theme-style");
      if (!darkThemeLinkEl) {
      } else {

Whenever we click on the Switch Theme button, the dark theme should switch back and forth.

This is a quick and dirty way to add a dark theme switch to your Vue.JS application. You can can also take this further by implementing a theme service and persistence support.

Thank you for reading!

Adding PostgreSQL support to your ASP.Net Core application via Docker

I’ve been playing recently with ASP.Net Core and I’m developing a small Web API project in order to teach myself the framework.

In still article I’ll explain how to use a Postgres database with Docker, in order to make your development experience much more enjoyable.

Before moving on, please make sure that you’ve installed:

First, create the docker-compose.yml file in your root directory of the project, the file should contain:

version: '3.4'
    image: postgres
      - POSTGRES_USER=app
      - POSTGRES_DB=mydbname
      - ./volumes/data/db:/var/lib/postgresql/data
       - 5432:5432

This specific postgres configuration passes some self-explanatory environments variables to the postgres database, it binds the ./volumes/data directory to the postgres’ data volume and it exposes the port 5432. We bind the volume so we can achieve data persistency and explore the files generated by the postgres database.

Next, add the following packages to your ASP.Net Core application:

  dotnet add package Npgsql.EntityFrameworkCore.PostgreSQL
  dotnet add package Npgsql.EntityFrameworkCore.PostgreSQL.Design

Add your database connection configuration to the appsettings.Development.json file, note that they match the strings from the docker-compose.yml file. When running in production you should deploy each service in a separate container and configure them with environment variables. Never hardcode sensitive information in your files!

"DatabaseConfig": {
    "PostgresSQL": "Server=localhost;Port=5432;Database=mydbname;User Id=app;Password=app;"

Now in the Startup.cs file, when configuring the application context, specify that you want to use PostgresSQL.

services.AddDbContext<ApplicationContext>(options =>

This is it! Make sure that your application is not running and start the database with docker-compose up. After the database has started open a new terminal and add the migrations:

dotnet ef migrations add InitialMigration
dotnet ef database update

If you’d like to stop the database you can run docker ps and docker stop <hash> where <hash> is the hash of your database container. Following the steps from above gives you an isolated development database that you can use alongside your ASP.Net Core application, if you need to add ElasticSearch, Redis or another service all you need to do is change the docker-compose.yml file to include them and voilà.

Thank you for reading, have a nice day!

My Spring Boot notes

Lately I’ve been busy with university, work and learning something new. I’ve started my programming journey when I was in high school with Python, I didn’t have any informatics classes so I had to study on my own. I confess that I didn’t really understood how Python works, until I’ve tried Java. Python had a dynamic type system and it was very confusing for a newbie like me.

After finishing Introduction to Computing with Java course from HKUST on edX I started to get a better grasp on programming. After that I’ve started reading some java books like: Effective Java, Head First Java and some chapters from Intro to Java Programming, Comprehensive Version, which I consider to be the most complete and useful Java book ever made (if you do the exercises). Then I’ve abandoned Java because all I knew to do with it was console programs, I had no ideas about framework and all the possibilities, when I saw someone at Google giving a talk and demonstrating a browser game that ran Java in the backend I was like: “What is this magic?!”, back then I had no knowledge about networking and client-server architecture.

I’ve been doing Django lately and decided to learn something new: Spring Boot.

As I just finished the Spring Boot courses, I want to make my notes publicly available. The notes are not perfect and they have been written in a style that’s tailored for my own personal use, sorry if you don’t understand them :/.

The next steps are to write a simple pastebin clone in spring boot and to start a the spring microservices course.

The notes can be downloaded by following this link: SpringNotes-01