A fresh, more functional alternative to the standard Options API

Vue 3 TODO app preview
Vue 3 TODO app preview

Vue 3 is the next major iteration of the highly popular JS UI framework. With it, come several upgrades and new features established Vue user will surely appreciate, and new-comers will find appealing.

The two biggest ones worth mentioning are improved TypeScript support (Vue 3 has been rewritten from ground-up in TypeScript) and Composition API — a fresh, more functional alternative to standard Options API.

In this tutorial, we’ll explore both of these features, in practice, by building the industry-standard example for UI framework demos — a simple TODO app!

Setup

Before we move on to the actual code, we’ve got…


BetterConsole
BetterConsole

Imagine a scenario — you’re a web developer, simply wanting to debug a website you’re working on. You’re opening your DevTools to check out the console log and mess with the DOM, only to get irritated by the shrunk website due to the lack of screen space on your small laptop screen.

Next up, how about opening DevTools for playing with some code real quick. Just some simple math, messing with the website you’re on, etc. Well, good luck going anywhere beyond a single line without accidentally forgetting about the Shift before your every Enter!

And what if you want…


DevTools are undoubtedly one of the most important tools in a web developer’s toolbelt. Definitely the go-to (and pretty much only) way for front-end debugging.

From all the browsers, and all the DevTools variations (most notably 3, to be precise), Chrome DevTools are the most popular. They help you debug your code across many Chromium-based browsers like Chrome, Edge, or Brave — and even more other Chromium-based projects.

So, you’re most likely familiar with the basic DevTools workflow. Click a button or press a key, and you’re in. From there, you’ll most likely end up checking the console, playing with…


As a web developer, your browser’s DevTools are surely the most important working tool, right beside your IDE/code editor.

But like all things, it’s not perfect. It’s generally fine — with a lot of features and no real alternatives, it’s the best it gets (though it varies between browsers). However, it all falls apart pretty quickly in simple console-focused scenarios, when you don’t need the power of all the metric tools. Let me show you what I mean.

Compromised view

When working on a small (laptop) screen, your viewport becomes a limited real estate. Whether you’ll dock your console left, right, or…


A while ago, I’ve read a blog post on Dev.to, together with a healthy debate that appeared there in the comments. It was about Macs, their pricing, and how you might not need one for your work that in this case involves web development.

Now, reading this made me think about why Macs are so popular within the web development community. I feel like it’s somewhat of an unspoken truth. I see tons of GitHub issues reported from Macs, benchmarks run on Macs, Mac-recommended setups, tutorials, and all that kind of stuff. …


React Hooks took the web development scene by storm when they were released back in early 2019. They were the reason I gave React a second look, and also why I have loved using it ever since.

Beyond my personal experiences, React Hooks inspired a lot of other developers, articles, tutorials, and even whole UI libraries and frameworks. Among those was Vue and with its Composition API, it showcased its own vision for React Hooks’s “competitor”.

Being a long-time Vue user and React Hooks fan, I simply had to check out Vue 3 and its Composition API. …


React is without a doubt one of the most popular front-end JavaScript frameworks / UI libraries around. However, it doesn’t mean that it’s the best or that everyone likes it.

Among some of the more technical reasons behind people disliking React is, surprisingly, one of its biggest features as well — JSX. An extension to standard JavaScript that allows you to use HTML-like syntax in your React components.

How such a recognizable part of React, one that clearly stands to improve readability, and ease-of-writing one’s code can be turned into a con? …


It’s been a while since I’ve talked about CodeWrite — a developer-tailored blogging tool and my first product. In this period of time, there have been a few noteworthy changes and quality-of-life improving updates that I feel warrant another look.

CodeWrite’s features

As blogging space is “booming” right now with thousands of new developers seeking opportunities, wanting to share their experience, build communities, and boost their portfolios, there hasn’t been a better time to start your own technical blog.

CodeWrite was designed with exactly this purpose in mind — to be the best technical blogging tool and give its users a “competitive…


Because React doesn’t own reactivity in the front-end space

Alongside React and Vue, Angular is considered to be one of the top JS UI frameworks. However, it differentiates itself through a couple of factors. Unlike the other top 2, it’s a full-blown framework, coming with everything you’d want a framework to have. It also has a unique architecture and ideology. This can be seen in its primary language being TypeScript instead of JavaScript, its heavy use of decorators, and its noticeable influence of the Functional Reactive Programming paradigm and adoption of many of its patterns.

Functional Reactive Programming

Functional Reactive Programming (FRP) focuses on the concept of streams and how they can…


When running in a browser environment, you can use many Web APIs in your JavaScript code. From simple stuff like accessing the DOM, through integrated payments, vibrations, cryptography, WebGL, canvas, all the way to infinity & beyond.

Today, we’ll be exploring a small section of Web APIs, something that one could call “observer-based Web APIs”. These are:

  • Mutation Observer API
  • Resize Observer API
  • Intersection Observer API

So, seemingly unrelated Web APIs, with different use-cases, but still, having one thing in common — the observer-based architecture. …

Arek Nawo

Hobbyist. Programmer. Dreamer. JavaScript and TypeScript lover. 👍 World-a-better-place maker. 🌐 https://areknawo.com

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