A window into the Full-Stack World
In this blog, I explore the world of full-stack web development. Here you will find everything I learned in over a decade on the job, from niche bug fixes, how-to's on mobile app development and API configuration questions to info about the life of a web developer.
For front-end developers I will be outlining common configurations and quirks you may find when working with JavaScript, Angular, React, Flutter and Ionic/Capacitor.js.
These days I most commonly work on the back-end using Node.Js, C#/.NET and SQL or MongoDB. After building several indie apps currently sold in the major stores, I can share quite a few tidbits to make your life easier.
Follow me on Twitter @Mick_Patterson_ for updates and thoughts on life.
As featured on tech-blogs.dev
Publishing a react app to Azure web apps is fairly trivial. However, when the web app is running Linux and the React app is using the React Router for a SPA application, the default configuration does not work.
Bun is a lightweight and flexible framework for building HTTP servers and APIs in the mould of NodeJs. This post will guide you through the initial configuration set up of a Bun HTTP server.
Memoization is a term you will come across at some stage when reading about frontend frameworks, libraries and in various packages you may need to use. This post will explain what memoization is, why use memoization and how to implement memoization.
Foreign Keys are a necessity in any relational database. They help connect distinct data tables together by creating a tightly-bound reference between the tables.
You'll often hear or read that a recursive function was used to solve a programming problem that arose during the development of a piece of software. So, what is a recursive function, how does it work and when or why would the need to use one occur?
Web server caching is the storage of frequently accessed data in a secondary, temporary location to reduce the overall load on a web server. Caching allows data to be served directly from memory which can be faster and more efficient than making multiple connections to the actual database.
Quite often as a frontend developer, you will want to use a string returned from an API as a header or a label in one way or another. Perhaps as a tab title or in a card for a dashboard. Unfortunately, the API may not be aware of this, nor capable of returning a string formatted in a nice way to allow the label to be human-readable.
This post will be discussing how to authenticate with the Facebook API using OAuth2, React and requesting the required scopes to access the Facebook Ads/Marketing API.
Deploying a NodeJs app to an Ubuntu Virtual Machine hosted with Azure using Azure DevOps should be pretty straightforward. Turns out, it is quite a lot more finicky than might appear!
The default maximum execution time of an individual Azure Function is 5 minutes. Sometimes, there will be a need to have a function that takes longer than that to execute. There are arguments that any function that takes that long should have the architecture changed to delegate the workload differently, however, if you need just a little bit more time, there is a way to enable this without having to re-architect the function.
REST APIs are a key building block of the Internet as we know it, along with being an essential component of any full-stack web application by providing a bridge between our users and our database. Luckily, an API can be built using many different technologies and languages. If you're a web developer with Javascript knowledge, using NodeJs to build an API is a no-brainer.
The Partial type in Typescript is a built in type that provides some very useful functionality to us to help manipulate other user-defined types while we are developing our app
Modifying existing SQL tables is a common use case as the data models for your application change over time. The most basic of these modifications is adding a new column to a SQL table to capture more data.
Setting up continuous deployment on an Azure Function app can save a lot of time, particularly if your development process follows small, agile deployments where you may deploy to your production environment multiple times a day or week.
Knowing how to add auto-incrementing to a numeric column in SQL Server is a skill all database admins should have. It is an exceptionally common use case, whether it be on the Primary Key column of your table, or you need a column to identify insert order or similar.
Adding indexes to your SQL Server tables is something that you will do plenty of times throughout your career, either as a full-stack developer or as a specialist database admin. Fortunately, adding indexes to tables in your database is a pretty simple task.
By default, the timezone of an Azure Function app is UTC/GMT +0 or Greenwich Mean Time. This is great if that is your timezone or the timezone you want your application functions to run in, but for most of us, we need to either adjust all our schedules to fit that timezone or we need to change the timezone.
SQL databases are fundamentally pretty simple. Data is organised into tables and the tables have columns that connect each other together. The key for a SQL database is to be performant. Sometimes, queries can be extremely slow to return the filtered down dataset that our app is looking for. This is where SQL indexes come in.
Being a software developer of any flavour opens a wide range of possible income sources to you so that you can invest your time and energy in creating the lifestyle you desire.
The humble HTML input tag is actually an extremely useful and powerful HTML tag. Not only are they used for constructing forms, but they allow for all sorts of additional functionality to be added to your page.
Manipulating dates in Javascript is an extremely common requirement for a large number of apps and server logic (when using NodeJs). The ability to retrieve the number of months between dates is a very common and useful skill to have in your toolkit.
Arrays are one of the most common data structures you will use in Javascript. They create lists for displaying to users that can be simple or contain complex data objects. Creating lists that have clean information in them is vital for a good user experience. One way to do this is to make sure you are not displaying the same information multiple times.
Every full-stack application in production today probably connects to a database of some variety, whether that be a NoSQL database like MongoDB, a MySQL database like MariaDB, a SQL Server database like those provided by Azure or any other variety. This means that knowing how to wire up a stable connection to these databases from your NodeJs API is a critical skill.
By default, iOS and Android show a native loading screen before the splash screen of a Flutter app is displayed. This default screen is completely white, which means your app will have a white "flash" before showing your custom splash screen with your app's chosen colours and logo, making for a bad user experience. It is currently not possible to remove this native screen, but we can customise it to make it less intrusive.
Frontend developers will inevitably need to make HTTP requests frequently when building out the client side of a full stack app. Having a solid understanding of these methods and how to build the requests is essential in being a top shelf frontend developer.
Environment variables in NodeJs are essential for setting configuration options as well as storing important values securely. The environment variables allow you to store API keys and other configuration secrets independently from your main codebase and separate from your git repository so they never get checked in anywhere. Being able to configure and consume these variables is essential in creating solid, production-ready NodeJs APIs for all applications.
Building an API with NodeJs and Express is always a key building block of any full stack application. In conjunction with managing user requests, a NodeJs API application can also help maintain database integrity by performing scheduled maintenance checks to ensure everything remains in solid working order.
Date manipulation and calculations are core to a huge amount of enterprise business logic. Being a wizard at using dates and turning them into simple values to run your logic on is critical. Knowing how to calculate the number of days between two dates is an essential piece of logic to have in your utility belt. This post will explain clearly how the math works as well as creating a simple utility function that can be used anywhere.
Environment variables in an Angular app are extremely useful for storing constants in your app that need to be used frequently, such as API url's, API access keys, Firebase config values and other general flags.
Setting up an API with NodeJs and Express is a topic that is well covered and documented. But what happens when your API requirements expand beyond having a simple CRUD offering? API versioning can help with this. Anytime you see an API url with /v1/ in it, the API is using an internal versioning setup. In this post we'll cover one simple way to configure this with NodeJs and Express.
A how-to for adding HTTP interceptors to a Create-React-App app with the Axios npm library to check and modify request and response headers for all HTTP requests
Authentication is vital for any app with user accounts. Apple requires that their authentication provider is available on all apps submitted to the iOS app store.
Adding custom headers to the response object of of an Azure Function written in Node sounds simple. Turns out it may not be as simple as it sounds.
An HTTP interceptor is a piece of logic that is able to attach to a HTTP request or response. This logic can then modify the data being transferred.
A standard SQL Server query to execute that will insert a new row or update an existing one
A curated list of the best developer tools for fullstack indie developers covering everything from coding, git, database admin and devops
A quick how-to for setting portrait (or landscape) only for your iOS app for iPads as the default setting in XCode doesn't apply to all devices equally.
Sorting an Array of JavaScript Objects in a Specific Order is a use case that comes up quite frequently when building UI layouts to meet client specifications. Unfortunately, it is more challenging than a standard array sort and requires additional setup work.
Step-by-Step guide to setting up an express server to run as a realtime chat server
Reasons why Azure is the DevOps platform of choice for me
A quick how-to guide to adding Rollbar cloud error logging to your Ionic app with Angular
A quick how-to guide for adding Firebase into an Ionic application using Angular
Often, by default, an Azure Function written in NodeJs stringifies the response object being returned. This results in unnecessary JSON parsing on the client in order to be able to process the response. Luckily, we can avoid this by making a simple change to the Azure Function to ensure the object is returned.