In this tutorial, we won't be discussing how to create a 404 page as it's a relatively simple process and can be personalized to your liking. Instead, I'll be addressing a common issue - when a user enters a wrong URL, how can we redirect them to their intended destination? This is crucial in terms of both user experience and overall usability. As a website owner, I want to ensure that my users can access my content with ease, and I'll share some effective methods to achieve this.

First off you will need a list of every accessible URL on your site, this can be an RSS feed or a sitemap.xml for this site. I will be using a RSS feed for this example but it doesn't matter what it is. We will take the feed and use RegExp to parse the URLs from the text like below.

let urls = rss_feed.match(
                /\b((https?|ftp|file):\/\/|(www|ftp)\.)[-A-Z0-9+&@#\/%?=~_|$!:,.;]*[A-Z0-9+&@#\/%=~_|$]/gi
            );

From the description we know that turb is a function caching server, but what does that mean? Turb acts as an intermediate layer between your database's SDK and your application by storing each function call in memory. After the response is stored in memory, you won't have to request the asset from your database again! After I added turb to this site, I saw a 4x decrease in load times.

Installing Turb

npm i turb

Building the server

Prerequisites

• Install Nginx for Ubuntu

Step 1

Allow Nginx to pass through your firewall.

sudo ufw allow 'Nginx HTTP'

Results

This tutorial is designed to be platform-neutral and can be used with any database, server, or framework. While we'll be focusing on setting up an express server, the search function can easily be adapted to work in any part of your application. After configuring the server, we'll implement the autocorrect feature and leverage flexsearch to locate relevant documents.

Dependences

npm i express flexsearch stopword closest-match

• express
  • Acts as a middleware for our web server
• flexsearch

The Problem

Three database queries are running on the server side of this website's homepage. One to get the site's styling, one to get the posts, and the last to get the series listed on the sidebar. Previously, I was chaining the queries to run one after another, in hindsight this is a bad idea because you have to wait the sum of the three requests time before the site responds. This causes the initial response from the server to be slow, but it was nothing too crazy. Here is the code version of how it was laid out.

DB.get("styles")
    .then(() => {
        DB.get("posts")
            .then(() => {
                DB.get("series")
                    .then(() => {

Below are three documents (Lorem ipsum) and a target word selector, the target word is the word you want to calculate the TF-IDF for. Further down, we will go over how to calculate the weights and what they mean.

For the spreadsheet parser we will be building, we will use a table tag with a spreadsheet attribute and a data attribute that will contain the CSV data in the form of a two dimensional array. The size of the spreadsheet will be determined by a set of rows and cells attributes and the complete tag will look like this:

<table
    spreadsheet
    cells="100"
    rows="20"
    data='[["Item","Cost"], ["Rent","1500"], ["Utilities","200"],["Groceries","360"], ["Transportation","450"], ["Entertainment","1203"], ["Total","=SUM(B2:B6)"]]'
></table>

Now that you know what we will build, let's learn how to implement it.

Code Highlighting

We will need to highlight the code in the editor we are building, so for this, we will use the library I use, and the most popular, highlight.js.

Importing

All of the code we will go over here will be in the browser, but highlight.js is an NPM package, so we can use unpkg to host our files. Highlight.js needs at least two files, the javascript and the CSS styling. If you want to use a non-default CSS layout, you can pick one from here.

JS

html

My goal with this is more complex than most people's use case because this site uses a markdown compiler called MDXT (this is a custom compiler made for this site); I want to include the code here into the MDXT language. So with that in mind, I will have two versions and review how each works. The first version will cover how to link the textarea inputs with the iframe and dynamically update it. The second one will keep the core aspects of the first but will be designed to handle multiple editors on the same page.

To keep this document clean, I will not include the boilerplate HTML in the examples, but if you need it, type doc into VSCode and paste the examples in the body tag.

Stand Alone Editor

Starting with the editor's markup, we will have three <textarea> tags in the body of the page along with a <iframe>. If you jump ahead and look below, you can see each textarea has a data-lang attribute. This will give us a very sexy method of interacting with the document updater when we get to that point. I am not including styles with this tutorial because I have yet to style my editor. ...

<textarea data-lang="html" cols="30" rows="10"></textarea>
<textarea data-lang="css" cols="30" rows="10"></textarea>

The test runner API is not a drop-in replacement for other frameworks, so you must migrate all of your tests to the new syntax. However, its syntax is very straightforward and takes inspiration from the existing frameworks. This will make transitioning to the built-in test runner much easier.

Getting Started

Installing Node v19.0.0

To get the latest version of Node, you can either install version v19.0.0 from the Node.JS website here, or you can install nvm. NVM is a node version manager, allowing you to run multiple versions of Node on your computer.

Installing NVM

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.3/install.sh | bash

To install Node v19.0.0

When starting your MVP, you may think building on serverless is the way to go, but it can add complexity to your application and slow development time. Remember, your goal is to create a minimum working product, and building on a shared hosting platform can reduce complexity by providing an environment similar to your development setup. Once you've moved beyond the MVP stage, you can build a serverless version with the advantage of already having the kinks ironed out.

Advantages of Serverless

Serverless is superior to shared hosting in terms of pricing, speed, and availability. When using a service like Lambda or Workers you only pay for what you use and with Workers, you are able to deploy your function across Cloudflare's entire network.

Why use Shared Hosting

While serverless offers advantages such as superior pricing, speed, and availability compared to shared hosting, it may not be the best choice for new developers or those with limited experience with serverless systems. Shared hosting provides a fixed cost to run your application while still providing more than enough computing power. When dealing with serverless applications, there are enough differences between traditional and serverless development that you may get stuck at some point and spend more time learning and debugging instead of building features for your application.

Install Pico

Pico CSS can be installed with NPM using the command below:

npm i @picocss/pico

Import to Layout

To import Pico CSS into your Svelte application, add an import statement in your +layout.svelte file. The +layout.svelte should be located at the top of the routes folder in the source of the application.

// +layout.svelte
<script>

Testing is usually done at a library level if you make a custom library for example named sum.js the best way to manage your test would be to put them into a sum.text.js file. This method of storing your tests removes the testing part of your application from the rest of it and makes sure none of the tests get bundled and sent to the client.

Installing Jest

npm install --save-dev jest