Theming a Nuxt app has never been easier

Image for post

Dark and light mode support has been a recent trend due to the impact on our eyesight caused by the time spent on devices. With Tailwind CSS and the proper Nuxt.js (Nuxt) modules, we can easily enable this feature, with the ability to customize each mode’s look and feel to your taste.


In short, you follow the simple steps below to enable dark/light mode with Tailwind CSS and the Nuxt color mode module:

  • Install a Nuxt project using and choose Tailwind CSS as a UI framework from the configuration selection. …

What’s new and what’s Nuxt

Image for post
Image for post
The power of Nuxt and Nuxt Content Module (Image source: Author)

Been waiting for Nuxt 3.0 to build Jamstack (static) apps? No need for that. The latest Nuxt version, v2.14, may be just what you are looking for.

Curious? Let’s start.

What Is Jamstack?

For anyone who was not familiar, Jamstack (or JAMstack) is a web development architecture in which JAM stands for client-side JavaScript, reusable APIs (instead of multiple web servers), and prebuilt markups (static HTML files).

What is currentColor in CSS?

Image for post
Image for post
Theming for icons and buttons with currentColor

Making reusable SVG icons and consistent color theme for components while keeping the style sheets short is now achievable with — a CSS Module 3 variable. But what's exactly is ? And how do we achieve color consistency and create reusable SVG icons with it? Let's find out.

What Is ?

is a CSS variable that contains the computed value of the closest property being used on an element.

In short, the value of = value of the closet property.

is not a custom variable and its value is read-only; hence, we can't override or assign a…

Image for post
Image for post

Theming a web application is always a challenge, and it can easily lead to performance issues. CSS pre-processor variables are good, but not enough for dynamic theming. Luckily, CSS variables can help to solve this challenge efficiently.

So what are CSS Variables? How do they help to enable theming? And why using CSS Variables instead of CSS pre-processors? Let’s find out.🚀

(This post is originally published on Maya Shavin’s Blog)

What are CSS Variables?

CSS Variables — or custom properties — are variables that we use to store and transfer their values to different CSS properties and can be reused throughout a document.


Image for post
Image for post
A promise for a gift with candy — Inspired from Original screenshot

Promise is not only one of the most commonly used ES6 features but also a challenging concept to understand or explain, even for experienced developers. What exactly is Promise API, and why is it considered a significant improvement to JavaScript? We are going to find out in this post.

But first, we shall discuss two concepts — synchronous and asynchronous. What are they, and why are they related to Promise?

Let’s check it out, shall we? 😃

Synchronous and Asynchronous — What does it mean?

When it comes to Promise in JavaScript, we often hear about terms like synchronous and asynchronous. …

Image for post
Image for post

Last November, I was honored to speak at Vue Toronto (VueConfTO) — a 3-day Vue.js conference in Toronto, Canada. Sharing the stage with me was the creator of Vue.js — Evan You and other excellent speakers, some of whom became my friends and teammates in many ways. It was not my first time being on stage with these fantastic people, but it was a unique and memorable experience for me in many aspects.

The MC, the quizzes and the prizes

Vue Toronto is my 4th Vue conference in 2019, but it stands out a lot.

MC — master of ceremonies — tops the list of what I…

Image for post
Image for post
Syntactic sugar is sweet, isn’t it?

Syntactic sugar is everywhere in JavaScript, all for making the language as dynamic and simple-to-learn as it has been for the last decade. Most will say it’s JUST syntactic sugar — a tiny bit of candy that makes your coding life sweeter and feels totally harmless. Well, is it? A little bit of sugar here, a bit there… and before we know it, we already need an insulin shot.

Let’s find out how to keep your sugar balanced, shall we?

Syntactic sugar? No, it’s syntactic SUGAR!

First, let’s have a quick look at the definition of syntactic sugar 🤓

Syntactic sugar is a syntax aimed…

Image for post
Image for post
Credit by VectorStock — Select clothes based on mood

This is a never ending argument between JavaScript developers. Some will say one way is good, and others will strongly prefer another. So which is considered better practice, let’s find out together, shall we?

The case — Dress up according to my mood

Assume we have a method that will take in a mood and return some clothes to wear 👚

Image for post
Image for post
Yup, if input is a can of Cola, return value is a fat unicorn. Sounds logical, doesn’t it? 😆

Arrow function is considered as one of most popular ES6 features. Have you ever wonder why and how to use it? If so, you got to the right place. Let our journey of understanding arrow function expression begin.

As usual, let’s do a quick brief on old concepts about function in JS for the start.

Function in JS

Every function in JS (before ES6) can be declared with operator syntax

function HelloWorld(){ console.log('Hello World');}HelloWorld(); //'Hello World'

Or can be declared as non-method functions using key word inside an expression

let sayHello = function() { console.log('Hi there, do you come here…

Image for post
Image for post
Prototype inheritance for a smartphone from a cellphone shouldn’t be complicated to write, should it? 👯

JavaScript is strictly a prototype-based language and treats everything under one form: Object.
OK. So what why do we need Classes in ES6? Are they similar to the Classes in other language like Java, C#, etc? Does it change JavaScript’s core from prototype-based to class-based?

Well, let us find out.

First of all, what is “class-based” and “prototype-based” language?

Class-based VS Prototype-based

Class-based language

  • Objects are built based on , which acts as blueprint/templatedefinition and description of an object.
  • All objects are created on run-time using syntax as instances of certain classes, and classes need to be pre-defined explicitly.
  • Inheritance here…

Maya Shavin

Senior Front-End Developer @Cloudinary

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store