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:
yarn create nuxt-app <project-name>
and choose Tailwind CSS as a UI framework from the configuration selection. …
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.
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).
Making reusable SVG icons and consistent color theme for components while keeping the style sheets short is now achievable with currentColor
— a CSS Module 3 variable. But what's exactly is currentColor
? And how do we achieve color consistency and create reusable SVG icons with it? Let's find out.
currentColor
?currentColor
is a CSS variable that contains the computed value of the closest color
property being used on an element.
In short, the value of
currentColor
= value of the closetcolor
property.
currentColor
is not a custom variable and its value is read-only; hence, we can't override or assign a…
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)
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.
CSS…
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? 😃
When it comes to Promise in JavaScript, we often hear about terms like synchronous and asynchronous. …
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.
Vue Toronto is my 4th Vue conference in 2019, but it stands out a lot.
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?
First, let’s have a quick look at the definition of syntactic sugar 🤓
Syntactic sugar is a syntax aimed…
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?
Assume we have a method that will take in a mood and return some clothes to wear 👚
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.
Every function in JS (before ES6) can be declared with function
operator syntax
function HelloWorld(){ console.log('Hello World');}HelloWorld(); //'Hello World'
Or can be declared as non-method functions using function
key word inside an expression
let sayHello = function() { console.log('Hi there, do you come here…
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
, which acts as blueprint/template — definition and description of an object.new
as instances of certain classes, and classes need to be pre-defined explicitly.