DEV Community: Ken Flake

Guide on how to apply Nuxt Color Mode with Bulma

Ken Flake — Thu, 15 Oct 2020 02:26:15 +0000

Introduction

@nuxtjs/color-mode is a Nuxt.js module that will help us implement a Dark Mode toggle on our Nuxt.js apps much easier.

These are one of the ways on how you can leverage @nuxtjs/color-mode if you're using Bulma.

When using a CSS Framework such as Bulma, we need to override Bulma's .scss variables as stated in this guide.

You can see the source code here!
https://github.com/kensixx/nuxt-color-mode-with-bulma

Setup

Installing dependencies

Install node-sass and sass-loader if you haven't yet, so we can use our .scss files properly.
(in devDependencies only because we won't need in during runtime, only during compilation)

npm i -D node-sass sass-loader

Install @nuxtjs/color-mode that will take care of the toggling for us:
(in devDependencies as well for the same reason)

npm i -D @nuxtjs/color-mode

Install:

@nuxtjs/style-resources - so we can use our .scss files globally in Nuxt. Share variables, mixins, functions across all style files (no @import needed)
Bulma - so we can import, use and override Bulma scss variables in our customized .scss files
nuxt-svg-loader - So we can load SVG icons and use as Vue components, for the toggle switch of Dark mode using SVG icon later

npm i @nuxtjs/style-resources bulma nuxt-svg-loader

nuxt.config.js

Remove @nuxtjs/bulma if you haven't yet. Moving forward we will use Bulma .scss that we npm install-ed earlier.

Include these on your modules[]:

modules: [
    // Doc: https://github.com/nuxt-community/style-resources-module/
    // Used with styleResources{}
    '@nuxtjs/style-resources',
    // Doc: https://github.com/Developmint/nuxt-svg-loader
    // So we can load SVG icons as Vue components
    'nuxt-svg-loader'
]

Include @nuxtjs/color-mode on your buildModules[]:

buildModules: [
    // Doc: https://color-mode.nuxtjs.org/
    '@nuxtjs/color-mode'
]

Add this on your css[], and also add the new styleResources{} like so:
We'll setup our assets/scss/main.scss file later on below.

  /*
   ** Global CSS
   */
  css: ['~assets/scss/main.scss'],
  /*
   ** So we can use our .scss file globally in the Nuxt app
   */
  styleResources: {
    scss: ['~assets/scss/main.scss']
  }

Adding light and dark icons for the toggle switch

Create an icons directory inside assets like so, and add the .svg icons.
You can download the icons here: https://github.com/nuxt-community/color-mode-module/tree/master/example/assets/icons

Configuring our `main.scss`

This should be the bread and butter of this guide, the scss files. This shall be the content of our assets/scss/main.scss:

/* Theme style (colors & sizes) */
@import "~bulma/sass/utilities/initial-variables";
@import "theme-default";

/* Core Libs & Lib configs */
@import "~bulma";

/* Mixins */
@import "mixins";

/* Theme components */
@import "nav-bar";
@import "title-bar";
@import "hero-bar";
@import "card";
@import "table";
@import "tiles";
@import "form";
@import "main-section";
@import "modal";
@import "progress";
@import "footer";
@import "misc";

/* For our dark mode scss implementation */
@import "dark-mode";

So what we've done here is:

Import bulma/sass/utilities/initial-variables first,
then override some Bulma variables in our custom theme-default.scss settings that will help us configure our dark mode colors and light mode base colors / CSS components
Import the rest of Bulma using ~bulma
Override some components like the Navbar, and so on
Lastly, our dark mode implementation of the Bulma components when it is toggled on

Next is to put the other supporting .scss files. You can get it here: https://github.com/kensixx/nuxt-color-mode-with-bulma/tree/main/assets/scss

I borrowed these .scss files on [admin-null-nuxt**](https://github.com/justboil/admin-null-nuxt) Nuxt.js template (the free version one).**

So we're done with the .scss files! What we need next is the actual toggling action of dark and light mode.

Creating a Vue component that will serve as our light/dark toggle switch

create components/ColorModePicker.vue, and follow the code implementation below:

<template>
  <button class="button is-info is-block" @click="toggleDarkMode()">
    <ColorScheme placeholder="..." tag="span">
      <span v-if="$colorMode.value === 'dark'">
        <IconDark />
      </span>
      <span v-else>
        <IconLight />
      </span>
    </ColorScheme>
  </button>
</template>

<script>
import IconLight from '~/assets/icons/light.svg'
import IconDark from '~/assets/icons/dark.svg'

export default {
  components: {
    IconLight,
    IconDark
  },

  methods: {
    toggleDarkMode() {
      if (this.$colorMode.preference !== 'dark') {
        this.$colorMode.preference = 'dark'
      } else {
        this.$colorMode.preference = 'light'
      }
    }
  }
}
</script>

This is a simple Button component that will help toggle @nuxtjs/color-mode whether we want to use light or dark mode. You can change this one as you wish.

this.$colorMode.preference is the one that will inject a dark-mode class in the whole <html></html> of the Nuxt project if it's set to dark.

It will then trigger the dark-mode.scss to change the Bulma components accordingly depending on what we set in the dark-mode.scss file.

Using the `ColorModePicker.vue` component

I think that's it! You can now include the ColorModePicker.vue component anywhere in your code, for me I've put it in the Navbar beside the Brand Logo like so:

<template>
  <nav class="navbar">
    <div class="container">
      <div class="navbar-brand">
        <nuxt-link class="navbar-item is-hoverable" to="/">
          Nuxt Color Mode With Bulma
        </nuxt-link>
        <button class="button navbar-burger">
          <span></span>
          <span></span>
          <span></span>
        </button>
        <div id="navbarBasicExample" class="navbar-menu">
          <div class="navbar-start">
            <a class="navbar-item">
              <ColorModePicker />
            </a>
          </div>
        </div>
      </div>
    </div>
  </nav>
</template>

Note: remember to import this component like so:

<script>
import ColorModePicker from '~/components/ColorModePicker'

export default {
  components: {
    ColorModePicker
  }
}
</script>

Docker for Complete Beginners!

Ken Flake — Fri, 24 Apr 2020 09:55:49 +0000

This is my take on learning Docker if you are a complete beginner.

Traditional Approach, and the Problem

So you have your separate EC2 Instances, 1 for UAT env, and 1 for Prod.
- I like to think of the EC2 Instance as like a laptop you bought remotely from Amazon, and you can't physically touch it.
- You can only remotely control it using ssh.
Everything works fine for your Hotel Reservation system.
There was a new functionality introduced at your Hotel Reservation system, say,
- Java 8 in UAT was upgraded to Java 10, for some reason.
- in Production, it's still Java 8.
So you used Java 10 new features, say, a new Streams API, in your local and UAT.
So, everything works in UAT, QA is also happy with it.
But guess what. When it was deployed in Prod, it broke.
And you probably can't pinpoint it directly.

That's why, the idea of containerization was introduced!

Containerization Approach

Docker

In 2013, Docker introduced what would become the industry standard for containers.

Containers

Containers are a standardized unit of software that allows developers to isolate their app from its environment, solving the “it works on my machine” headache.

The idea is that, having a container is like having a "super mini-laptop" that has NO OS (it shares with its Host's OS), just a bare minimum drivers / kernels that is essential for running, say, a MySQL server, or a Java server with Maven.
The "super mini-laptop" term is an oversimplification

So, YES, it is possible to put your Java server, Maven, and DB in one whole container.
But, it's very dangerous. If your container goes down, you will lose all of your data.

It is still important to isolate your DB to a separate container,
Or much better, resort to something like third-party platforms that can guarantee the persistence of your data.
e.g. for MongoDB, -> MongoDB Atlas, mLab, etc.

Images

With that said, you need an image which is stored inside containers where it will run.
And you need a Dockerfile in order to build an image. It sits alongside your source code.

This Dockerfile will be the same regardless when you're in develop branch or in master branch of your project's Git repo.

Dockerfile

Consider this Dockerfile example:

FROM maven:3.6.3-ibmjava-8-alpine

ENV TZ=Asia/Manila

# Apache POI uses JRE 8 Font on writing Excel cells, so this package must be installed in the Docker container
# to be able to use it.
# source: https://stackoverflow.com/a/56664613/7209628
RUN apk --update add fontconfig ttf-dejavu

# Copy whole source code to the docker image
# Note of .dockerignore, this ensures that folders such as `target` is not copied
COPY . /usr/src/xrecon/

RUN cd /usr/src/xrecon/ \
    && mvn clean package \
    && mkdir -p /usr/src/xrecon-app \
    && cp /usr/src/xrecon/target/*.jar /usr/src/xrecon-app/xrecon-app.jar

WORKDIR /usr/src/xrecon-app

EXPOSE 8080

ENTRYPOINT ["java", "-Djava.security.egd=file:/dev/./urandom", "-Xms500M", "-Xmx900M", "-jar", "xrecon-app.jar"]

Let's digest these commands one step at a time..

FROM command means I want to use maven:3.6.3-ibmjava-8-alpine as my base image.
**
Meaning, I won't have any difficulty creating a blank image from scratch and installing Maven with JDK 8 in there.

The maven:3.6.3-ibmjava-8-alpine image took care of it.

This base image will be STANDARD and FIXED regardless on what environment I'm at.

The -alpine at the image name indicates that I want to use this base image that also has Alpine Linux inside it.

This way, I have a very very small distro like Ubuntu, helpful for installing packages like curl, vim, ssh, or any Linux packages that you need.

RUN means I want to execute shell commands inside the image; equivalent to using your Terminal.

In this Dockerfile case above ☝️☝️, I want to execute a shell command that installs a package that will be helpful for the Apache POI Java library. Without this, my Apache POI Excel generation will crash.

I'm using apk add as this is how you would install a package in Alpine Linux,
as you would do apt-get in Ubuntu, or brew install in Mac's Homebrew.

COPY is like magic, because you can literally copy your source code files inside your Git repo, to the Docker image.
**
So, I went and copied my whole source code inside the Docker image like so.

NEXT: Running Maven inside the image
As I was using the official Maven image available from Dockerhub, I didn't have any difficulty running mvn clean package inside the image.

And we want to preserve "layers" as using FROM, COPY and RUN etc commands consumes "layers".

In this case, we are able to mvn clean package, mkdir, and cp in one single Docker RUN command.

WORKDIR is where the default directory will go if you enter this Docker container using docker exec.

In this case, if you enter inside this Docker container, it will land you to the /usr/src/xrecon-app directory.

EXPOSE is what port you would expose your image to.

Because a container can have more than one image, it is essential how the client would access your app through a port inside the Docker image.

For example, suppose you have a Java server image and FTP server image together inside a container.
You would expose the Java server usually in port 8080, and the FTP server usually in port 21.
**
Think of it like the container is a hotel.
You can reach the Java server inside the hotel room number 8080.
And you can reach the FTP server inside the hotel room number 21.

But it is greatly advised that you only have strictly one image inside a container especially if you want a Microservices nature of architecture.

We're done with our short Docker basics!
Hope this helped!

Fear of asking questions? What mindset should you have?

Ken Flake — Mon, 20 Jan 2020 12:41:38 +0000

Hi, I'm having problems about approaching my manager, or other colleagues in work that I don't know of (or haven't talked to yet).

Eventually there will come a time that I will have to come ask them of a subject matter they are specialized in.

But it seems that, whenever I do, I always have that mindset that I'm technically disturbing them whenever I ask questions, whether it's a noob question or a question that actually makes sense.

These questions may be technical in code or not, but of course mostly refers to questions in code and etc.

Because there are times that asking a question once doesn't work, they have many people to support to, and I'm just one of them, so sometimes you have to bug them, it depends..

One advice that I had from my colleague is that, if you don't remind of ask them constantly about your query, you're the one who will be delayed on your end at your task.

But that's quite a negative remark in my perspective.

For intermediate developers, and also senior managers, I would like to ask some advice on what beginner devs and new people in the office on what mindset should they have on approach when asking questions and assistance.. especially if you don't know who to approach to and such..

This is also a good discussion for us developers, mentors and managers alike.

Thank you so much!