Introduction to Web Apps with Next.js

Introduction to Web Apps with Next.js

Bob Palmer Development Technologies, JavaScript, React 1 Comment

In this post, I am going to demonstrate how to set up a simple Next.js web application. Next.js is a heavily opinionated JavaScript framework, in that it has a lot of conventions and recommended tools built into its design.

We’ll use Next.js version 14.2.2 to set up the groundwork for a simple web application. By “web application,” I mean an application that is designed primarily to collect input from a user in a web browser and return some output generated from that input.

JavaScript Monorepos in 2024: Legit or Sus?

JavaScript Monorepos in 2024: Legit or Sus?

Zach Gardner Development Technologies, JavaScript, Programming, Tutorial Leave a Comment

I’ve been developing JavaScript through all of the major existential changes we’ve had. Browser wars? I remember those. Trying to make a complex application before Firebug? Oh yeah, tell me about it. Having to roll my own AJAX request by hand? Vividly remember.

Something that I experienced in all of my large JS projects before the last few years was an eventual point of no return, a metaphorical event horizon, beyond which the amount of time it took to build the code locally as well as on the CI/CD system was just simply too long.

All projects start fine, but as they grow and evolve and change over time, the amount of build time seems to creep up until it becomes inimical to deploying and testing changes in any reasonable time frame. Further, it becomes very difficult to onboard new developers as any change they make is not isolated, and must take into account all of the other code in the app. Granted, frameworks and libraries like React do help to some extent, but there are no clean-cut boundaries on the source code with different features, it always had to be by convention.

It was during a project a few years ago that I finally put my foot down and decided that something needed to be done. Researching how other architects were doing it, I came across JavaScript monorepos. I was familiar with the concept of monorepos from my research on how Google structures their code base (they have to repos, one for YouTube and one for everything else, no joke), but had never thought to apply that same principle to JavaScript. So I dove in head first, made a lot of mistakes, iterated, and finally got to a place where I feel comfortable sharing my lessons learned.

This blog post is not an extensive study, but it is enough to get you interested in a way to solve two common problems we all have (i.e. sluggish build times and inability to effectively onboard new devs due to lack of feature separation), and give you enough of a context around how I approached the problem to determine how you should proceed.

Dynamic Unit Conversions in Math.js

Using Math.js for Dynamic Unit Conversions

Lou Mauget Development Technologies, JavaScript Leave a Comment

In this post, I’ll survey a convenient JavaScript math.js library approach for converting a numeric value having a unit to a value for another unit. I’ll show how to convert a number associated with a unit to a value having another unit, add custom units and conversions, and evaluate textual expressions containing values with units. To wrap up, we’ll walk through a few practical use cases.

By the end of this post, I hope you are inspired to use math.js in your projects. It’s a powerful tool in the right scenarios. With that, let’s get started.

Harnessing the Javascript Spread Operator

Alex Cassells Development Technologies, JavaScript, Tutorial Leave a Comment

The toolset of the JavaScript developer is ever-evolving and ever-changing. Array manipulation saw dramatic improvements in usability, utility, and readability with the release of the ECMAScript 6 standard in 2015. This update was released with game-changing features like arrow functions, scoped variables like ‘let’ and ‘const’, and many other commonly used tools.

As a developer, I use these features on a regular basis when developing in a Javascript environment, whether that’s a front-end library, such as React or Angular, or on the backend through Node. Most developers have experience with arrow functions and scoped variables, which are incredibly common to see throughout modern code bases. One feature included in ECMAScript 6 is the Spread Operator. While I do not often see it used, it is perhaps my favorite.

In this blog, I will cover the Spread Operator. We’ll talk about what it is and how it’s used to manipulate both objects and arrays. We’ll walk through some examples to help you get started using it in your programming along the way. Let’s jump in.

View Transition API

Introducing the View Transition API: Your DOM’s New Best Friend!

Lawrence Chabela CSS & HTML, Design, Development Technologies, JavaScript 2 Comments

Tired of clunky transitions and tangled web states? Meet the View Transition API, your secret weapon for silky-smooth DOM transformations. Say hello to elegant animations and goodbye to the confusion of overlapping states. Your web pages are about to get a serious upgrade!

Think about it, page transitions aren’t all about the looks. They’re like guides, leading users through your content. And they’re not just about appearances, these transitions can also increase the perceived speed of how responsive your site feels, especially during async running tasks…