Learn how to turn your Next.js app into a Progressive Web App (PWA).

The ninth chapter of this series finally goes over the DOM, how to manipulate it, and how to make our components interactive!

The seventh chapter of this series contains the first look into JavaScript and its basic components.

The sixth chapter tackles responsive design, breakpoints, media queries and more!

The third chapter of our series talks about the cascade hierarchy in CSS, including inheritance and specificity.

In the future Angular will not have Zone.js enabled by default and will not need it for change detection. But how will that work in a technical sense?

Let's learn how we managed to improve our search experience using semantic search, powered by Orama.

So you have a class, and you want to control who can create instancesof it? Easy, make constructors private, and make friends with thosewho can c...

Signals are seemingly everywhere today. So here's the question? What are they? Let's build an implementation ourselves to understand them better.

In the fifth chapter of our series, we're going to be introduced to CSS grid, a well-known feature to display content, and used in almost every website you visit.

In the fourth chapter of our series, we'll look at flexbox, a powerful layout feature that allows you to create responsive designs with ease.

The second chapter in our front-end series. Let's delve right into the world of CSS, variables and selectors.

The first chapter of this series offers an introductory dive into the box model, HTML defaults and semantic elements.

The ECS pattern is used by many game engines to create stateless, reusable game logic. But how does it work?

Talking about where you should start building your full stack application

If you've worked with frameworks like React, Angular, or Vue in the past you'll likely have used (or heard of) a CSS-in-JS solution like Styled Com...

"Unicorn Utterances" is now "Playful Programming". Let's talk about why, what's different, what's the same, and what's next.

Now that "Unicorn Utterances" is called "Playful Programming", let's look at the history of the project.

Setting up a React Native Web project in a monorepo is challenging. Let's do so and see what challenges we run into!

Modern JavaScript is built on promises and callbacks. Let's learn what promises are and how we can make their usage easier using async functions.

Let's compare and contrast React, Angular, and Vue's APIs all in one place.

Oftentimes, when passing children to a component, you want a way to programmatically access that passed data. Let's learn how to do that in React, Angular, and Vue.

If components are a way to share JS logic between multiple, composable DOM nodes; directives are a way to assign logic to any single DOM node.

Components provide a great way to share layout, styling, and logic between multiple parts of your app. But what about times you only need to share logic in React, Angular, and Vue?

When building an app in React, Angular, or Vue, you'll often find that overlapping components can become a real problem. Rendering order can be confusing; let's fix that with portals.

Passing around props suck. They're repetitive, get out of sync, and are easy to forget to pass. What if there was a better way to pass data between different parts of your app?

Bug are a constant in development. How can we make error handling lead to a nicer user experience when they occur in React, Angular, and Vue?

While you usually want to pass data to child components, sometimes you need to access arbitrary data from the child without needing to explicitly pass the data.

React, Angular, and Vue provide powerful APIs that let you avoid DOM manipulations most of the time. But sometimes you need to access the underlying DOM. Here's how.

Just like HTML nodes have parents and children, so too do framework components. Let's learn how React, Angular, and Vue allow you to pass children to your components.

There are specific instances where you may want to have a wrapper element in a framework that renders to nothing in the DOM. This is how.

Often in application development, you'll want to base one variable's value off of another. There are a few ways of doing this - some easier than others.

Some call them "lifecycle methods", others "effect handlers". However you spin it, they both handle side effects in your apps. How can we leverage them better?

One of the primary advantages of using a framework is the ability to quickly generate dynamic HTML from JavaScript logic. Let's walk through some examples.

Components are the core building block in which all applications written with React, Angular, and Vue are built. Let's explore what they are and how to build them.

Learning web development is a vital skill in a software engineer's toolbox. Let's talk about why you should learn it and what this book will cover.

Creating tests can feel tedious, but doing it in Go can be, dare I say, *fun*. Let's take a look at how embedding interfaces clears some of that tedium for us.

Learn how to build a lightweight backend Vite integration using a Flask Blueprint in ~50 lines of code.

Move Vite's manifest.json file outside of the build directory.

[Edit] I was just told that libFuzzer is deprecated. I think the ideas presented are valid for any fuzzer, but thedetails will differ. When I ment...

Here's the quickest ways you can get up-and-running with templates for React, Angular, and Vue; using official tools.

Monitoring Your Blog for Issues

In directives and components alike, it can be a pain to add attributes and bindings to the host element. Instead of using DI to change the host, try this instead.

Angular templates are mission-critial for components. But how do they work? Using a compiler, yes, but how do they bind to the DOM itself? Read on to find out.

React Server Actions are an awesome way to pass data to and from your React client and server. Like all functions, they need a way to return data.

While React Suspense APIs enable you to load data asynchronously from the server, Server Actions allow you to send data to the server from the client.

Suppose that the logic of your program depends on time. That is, you need to keep track of when something in the pasthappened, and what time it is...

Handling async code in React code has historically been fairly challenging to get right. Let's see how React's official solutions for promises stack up!

React's dipping its toes into data fetching! With this comes a big requirement to cache the results of a given function. Luckily, React's done that. Let's see how.

React Server Components have been a topic of regular discussion in the WebDev space as-of late. What are they? How do they improve the SSR story for React? Let's take a look.

How does React handle update the DOM? The answer? "The Virtual DOM and reconciliation." Let's explore what these are and how you can leverage them the best.

When researching frontend frameworks, you're likely to hear about "reactivity". But what is it? Why does it matter? Let's explore this and more in this article.

I've seen this a few times too many recently, and need to get it off my chest. Ponder a class that has a private member function. The function does...

A detailed guide on how to make text in Jetpack Compose match your mockups, and why baseline grids are not all that they're hyped up to be.

People often say that you should build your own projects to grow as a developer, without explaining how. Let's learn how to actually plan and build your own custom projects.

Angular has fairly consistent error handling behavior... Until it doesn't. Here's one place where it's off and why.

A high-level overview of how hash tables work behind the scenes.

Let's port a site from Next.js to Astro, expanding on the official migration guide.

Classes are a core feature of JavaScript - but they weren't always that way. How did earlier JS devs write classes? Let's learn how together.

React Native can be challenging to setup a monorepo for. Let's explore what an optimal monorepo setup looks like for it.

The VDOM is the secret sauce that empowers developers to create the captivating, dynamic web applications that we use every day.

Two-Factor Authentication is a security feature that adds an extra layer of protection to your online accounts.

Twitch streaming can be fun and fulfilling, but has various roadblocks in the way for newcomers. Here's how you can overcome them and grow your Twitch channel.

When working with objects, you may hear the term "mutation". What is that? How does it work? How do let and const REALLY differ from each other? This and more:

JavaScript's `this` keyword is imperative when dealing with classes in JavaScript, but can introduce some headaches. Let's solve that using the `bind` method

bash? You mean the terminal where I do my git commands?

If you've ever built a production React application, you've likely ran into various performance problems along the way. Here are the most common and how to fix them.

Formik works incredibly, but I have some concerns with it. As a result, I ended up writing my own library called "HouseForm" to compete. Here's why.

Showing how we can build a Android Studio plugin to provide our own project templates in the Android Studio new project wizard

Learn how angular's async pipe is not pure and how that's not a problem, by building async pipe from scratch.

You may have heard that "UUIDv2 is bad". Maybe you've never even heard of them and thought UUIDs went from v1 to v3. Why is that? What did UUIDv2 do wrong?

When discussing ID generation in software, you may have heard of a UUID. What are they? Are they useful? What are the different versions? Let's explore that.

TL;DR; Ninja is available directly in the windows images Use to set up the MSVC environment for buildingwith Ninja. You need nested quotes for CX...

Making hilarious things with no emitted code.

Reactivity is core to JavaScript frameworks; changing data should cause a re-render. How does this work in Angular? Let's dive into the Angular source code to see.

z-index is a CSS property that helps control the z-axis height of an element, but it often doesn't seem to work. Why is that? How does it REALLY work?

Sharing code between components in Angular is TOUGH. Here's one way you can do so by utilizing base components that you extend - and why you shouldn't use them.

Learn data pack development in Minecraft - using player scoreboards, variables, and operations!

A peek under the hood of Vue compilation. See how Vue interpretes TypeScript

JavaScript functions are widely used in web development... but do you KNOW them? Let's explore the fundamentals and how they can be used in unorthodox ways

Interpreted languages have various footguns. Let's explore one such footgun I ran into recently with Python and how I fixed it.

Having the ability to structure your projects (and these don't exclusively have to be programming related) gives you a massive advantage when it comes to being organised, and keeping your life organised.

We all ask questions from time to time, so here are some of my favourite tips when it comes to how to improve the quality of your questions.

Using mutable data types can be dangerous in multi-threaded applications. To help that we can make sure of thread safer immutable data types

Primitive obsession is an extremely common code smell, and when identified and fix, it greatly helps to reduce the amount of bugs that you may find in your code.

Learn to use when to use HashMap instead of Loop

Learn the beginnings of data pack development in Minecraft - using positions, entity selectors, and conditional logic in commands!

Learn the beginnings of data pack development in Minecraft - using commands and functions to add custom behavior from scratch!

Python has a secret superpower with a similarly stupendous name: Magic Methods. These methods can fundamentally change the way you code with Python...

Angular differs from Vue in some keys ways, including its "Incremental rendering". This shift introduces something I call "DOM Pollution"; its why I prefer Vue over Angular.

Utilize the best of both worlds — Windows and Linux — without having to dual boot. Windows Subset for Linux (WSL) lets you run software designed for Linux in Windows.

A Regular Expression – or regex for short – is a syntax that allows you to match strings with specific patterns. Think of it as a suped-up text search

useEffect is prolific in React apps. Here are four rules associated with the hook and in-depth explanations of why they're important.

In this blog I talk about the Doomsday Rule, how it works, how to put it into code then how to make a program that tests you.

React 18's internal changes improved a lot, but may have broken your app in the process. Here's why and how you can fix it

Test Driven Development is often taught to improve a your workflow; I present Documentation Driven Development as an alternative approach.

Did you know that 35% of developers are using .NET? This is a great article to read to get started with .NET.

React 18 introduces some awesome features that I'm sure you can't wait to try! Here's how you can get started with React 18 today!

Web components have had a long history to get where they are today. Let's look back to see where they came from & their immense growth!

While web components can be used standalone, they're paired best with a framework. With that in mind, which is the best and why?

My personal approach to writing docs, mainly aimed at frameworks and the like.

Google pushed for web components, sure, but they didn't stop there. They also went on to make an amazing framework to help build them: Lit!

GitHub Copilot is an amazing tool that I think will drastically improve the way that I code. But it won't replace me. Here's why.

GitHub Copilot is a huge step forward for tech. Luckily, it improves our lives. Unfortunately, it will break your interviews. Here's why.

One of the ways web components differs from a framework is that it works right in the browser. Here's how to build them from scratch.

Accessibility allows as many people to use your product as possible. That, in turn, generates more profit. Here's how to improve it on web.

Interviewing for frontend engineering positions can be difficult. Let's walk through some things you should focus on while interviewing.

Python is a language with broad and powerful APIs. One such API is 'List Comprehensions'. Let's learn to use them to improve your code!

Interviewing candidates is tough. It just is. Here are just a few of my tips to make your tech recruiting go smoother.

Making sure your app's code is structured well is critical. Mastering React Unidirectionality is a huge part of that. Learn how to here.

Rust allows you to build super-fast and flexible applications. Let's build one leveraging enums, pattern matching, and the Options API.

You've heard a lot about Node, NPM, and Yarn - but aren't sure what they are. Let's introduce them in-depth and answer questions about them!

Tips on how to get yourself a proper development environment on the iPad to fully exploit its potential.

Some time ago, I received a bug report that, in short, said "your class does not work with CRTP". I was very confused bythis statement. First a sh...

React Refs are an immensely powerful, yet often misunderstood API. Let's learn what they're capable of, and how they're usually misused.

Do you use custom fonts that you want to share with multiple apps? Learn how to distribute those fonts on NPM and consume them in Angular!

CocoaPods is a great dependency manager, but some need Carthage still. Let's walk through how to integrate Carthage with React Native!

Have you wondered how programming languages are able to be ran on your hardware? This article explains how your code is processed and ran

A file extension isn't the only way a file is inditified, so what does it do?

Whether creating changelogs or just keeping track of git tags, releases matter. Learn how to automate your release process with conventional-commits!

Some components make controlling their state easier with 'formControl' and 'ngModel'. Let's see how we can build our own!

An overview of how pointers and references function in C/C++

Writing tests is a big skill for any engineer, but we often over-complicate them. Let's simplify our tests for better testing overall!

An overview of how operating systems give processes their own address space.

A simple explination of writing better tests for Angular applications and setting up Angular Testing Library

While the Android Emulator isn't confined to Intel CPUs anymore, it can be tricky to setup for AMD Ryzen CPUs. Let's explain how to do so.

I present a quick and dirty solution to a common interview question where the solution is not nearly as complex as it may first appear.

Save yourself money by hiding your API keys from prying eyes and nasty bots.

Android allows you to draw content under the navigation bar. It's a neat effect! Let's add that to our React Native apps.

React Native contains multiple different ways you can persist data for your application. Let's look at the choices and their pros and cons.

Many developers like MacOS or Linux for development environments, but don't know that Windows has plenty to offer. Become a Windows pro!

If networking is analogous to physical mail, then let's take a look at the letters being sent themselves. Let's dive into UDP and TCP

An explanation of what server-side rendering is, what static site generation is, and how you can utilize them in React, Angular, or Vue!

NuxtJS and Gatsby allow you to make SSG-enabled blogs, but Angular doesn't have an equivalent... Until now. Let's build a blog with Scully!

You use networking every day - even to read this! Let's dive into explaining how we send data across a network and what the OSI model is.

I often get asked "How do you pick a tech stack for your projects?". The answer is: outline what questions you should be asking early on.

Join us as we teach you how to create a Slack bot from scratch using their Node SDK and MongoDB for persistence

Learn how to interactively debug your NodeJS applications using a GUI-based debugger built into Chrome.

Have you ever wanted to run native Java and Kotlin code from your mobile game written in Unity? Well, you can! Let's see how.

In order to test web applications with Android properly, you may need to edit the Android Emulator network host file. Here's how to do so.

Introduction to the underlying concepts of HTML, CSS, and JavaScript and how they work together.

In our eight chapter, we learn how the browser internally handles HTML and CSS to show the user webpages on-screen.

Learn how to convert decimal to binary and hexadecimal, how CSS colors are calculated, and how your computer interprets letters into binary.

An introduction and explanation of what TypeScript is, is not, and what it's used for

Testing the limits of `firstBaselineToTopHeight` and `lastBaselineToBottomHeight` to deliver a perfect result.

An introduction to the type generic functionality in TypeScript

A basic overview of the main components of an Android app and how they interact with each other and the Android system

Basic (but detailed) instructions for setting up a Freenode IRC account through various clients

An in-depth tutorial explaining how to set up Travis CI to deploy signed builds to Google Play. Among other things

Learn how templates work in Angular. From the basics to being able to read Angular source code and write your own structural directives

An introduction to Unicorn Utterances, including a mission statement and general roadmap

The performance of came up in a discussion, andmyfirst thought was that from reading generated assembly code, it's a jump table, so it should be...

A former colleague of mine recently described the steps to speak at a conference as: Write a proposal and (optionally) a talk outline. Get accepted...

Now and then, I find myself writing something like if (x == a || x == b || x == c) ... , and every time the repetitionof x == annoys me. A number ...

Learn how to use Angular route guards for authenticating & authorizing access to certain child and parent routes.

A flat map is a data structure that maps a key to a value, and that stores the data in a compact flat memory structureto get better cache hit rate...

So I've written about compile time quick sort twicebefore ( 2011 and 2015 ,) but now when C++17support is becoming available, I thought I'd try i...

Yesterday's post about Generating lambdas for clarity and performance showed how to make use of higher order functions to improve clarity while giv...

Higher order functions , functions that operate on other functionsor returns functions, are familiar to those who have had some experience with fu...

Serializing data in C++ is a surprisingly difficult problem. There are many libraries for it with varying degrees offinesse, power and ease of use...

Recently I stumbled upon a question by @arne_mertz of Simplify C++ fame (if you don't read that blog, start now!) about using string literals asty...

We've all experienced them, the long and unhelpful compilation errors from templates, usually referring to some internalheader you didn't even kno...

We've all hand crafted comparison operators for structs with many members, and we've all cursed the tedium. It's allright for equality comparison,...

I must begin with saying that if you found this because you have a performance problem, you should almost certainly lookelsewhere. It is highly un...

Edit 2015-Jun-7: The source code is available on GitHub When writing unit tests, you typically don't care much about execution speed, but compile t...

A contender for the most useless program ever written just got a much needed overhaul. In2011 I wrote about compile time quick sort as a challenge...

As previously introduced ,the Trompeloeil C++ framework is a new mocking framework for C++14. If you'renot at all familiar with Trompeloeil , you...

Trompeloeil is a new mocking framework for C++, aimed at ease of use withoutsacrificing expressive power. In arts, trompeloeil is intended to mock...

Sometimes when crafting an interface, we want to ensure that some illegal constructs leads to compilation errors. Afterall, a good interface is ea...

As odd as it may seem, I have more than once felt the need to express a string literal as a unique type which can beused as a any class. As an exa...

At times it's desirable to give a message at compile time. Sounds cheezy, eh? Well read on and find out. As an example of the cheezy kind, the comp...

A lot has been written about new features coming in the 2011 revision of ISO C++. One that has received surprisinglylittle attention is the <chron...

Edit June 4th 2015: This article is very dated. Read this revisiting article for a far better solution C++ is a strange language. In many ways it's...