Static websites and so-called JAMstack have become pretty popular recently. Why? Why is the old-school HTML + CSS + JS trio in its redesigned and renamed form gaining so much attention? In this article, we’ll explore what the JAMstack is and what’s so good about it, as well as check out some of the best NodeJS-based Static Sites Generators (SSGs). Let’s get started!

JAMStack


What platform should you develop for in 2021? Is Web the definite future and answer for everything?

As a web developer, I believe in the Web as a development platform. In fact, it’s my (and many other’s) go-to platform for creating amazing apps easily and quickly.

However, I do acknowledge the advantages of native development — especially from the user perspective. More advanced functionalities, better performance, and compatibility with the underlying platform — there’s certainly much to appreciate in native apps.

So the question is — when to choose which route? Now, as a web developer, I know my opinion might be a bit skewed, but I’ll try to do my best.

Usually, native apps are better…


A primer around WebRTC with everything you need to get started

Live messaging, streaming, Torrents, and other similar real-time data transfer techniques have greatly affected and improved our virtual experiences. First, they were available natively, now through the web, bringing an impressive amount of possibilities to this universal platform. That’s all thanks to APIs known as WebSocket and WebRTC.

WebSocket revision

Now, I bet that you’ve heard of WebSocket. In fact, you’ve likely used it in some of your previous projects. Still, if not, here’s a brief overview.

WebSocket is a simple API that allows you to connect your clients indirectly, i.e., through a server. Basically, if one user wants to send some…


Do you still think ReactJS is the king of UI libraries?

Performance benchmark
Performance benchmark

React isn’t known for being a performance champion. Instead, it excels mainly by having the biggest mindshare and ecosystem. Sure, both come from React’s leadership in the UI frameworks space and being one of the first in the game, but the point still stands.

This, however, leaves room for other frameworks to compete and beat React on the performance front — such as Solid.

Solid is a declarative JS UI library, combining React’s JSX-centric and TypeScript-friendly approach with a compiler and deep optimizations to deliver vanilla JS levels of performance at no cost of the development experience.

So, how those…


So, today was the Windows 11 event, where the next after last version of Windows was announced.

I’ve got to be honest — as much as I bought into the whole marketing, I just couldn’t help myself but see Windows becoming more macOS-like.

I don’t know how to approach it — is it just that Microsoft accepted some kind of defeat or design superiority of Apple? I certainly hope not. Because as much as I love the look of macOS, I do appreciate the signature left-aligned menu of Windows and the legacy it carries.

To show my point, here’s an…


This is what you need to know about React’s latest version

Announced in late 2020, React 17 didn’t bring many new features. Instead, it was focused on improving the fundamentals and laying the groundwork for future updates. All to enable seamless gradual adoption of what’s to come next.

That’s how we enter React 18. In a recent blog post, the React team announced the plan for the next version of React, alongside many of its upcoming features. There was also a release timeline, publicly available alpha, and even a Working Group dedicated to discussing and improving React 18.

Overall, a lot is going on with React, so let’s dive in and…


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…


CSS preprocessors and transformers are great, but what when they’re not enough…

When you need to use newer JS features in older browsers, you can either use a preprocessor or polyfills. In most use cases, they’re able to do the job with acceptable performance and/or bundle size costs.

However, with CSS, things aren’t that simple. You can use a preprocessor like SCSS to add additional functionalities and transforming tools like PostCSS to add prefixes and so on, but many CSS features won’t be “polyfillable”.

That’s why it’s important to do proper feature checks and implement fallbacks where necessary. Let’s see how it’s done!

CSS @supports rule

Starting off with the basics, there’s a dedicated CSS…

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