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:

bash
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.

html
// +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

bash
npm install --save-dev jest

Prerequisite

• GraphQL: The basics
• Implementing GraphQL
• Building GraphQL Resolvers

This tutorial is based on the previous three tutorials in this series, all examples here will be based on the last GraphQL server we made.

Requests

GraphQL is a POST-based API that takes a JSON object as the request's body with your query inside. The best way to make this request is to use the fetch API. Here is the function I use to make requests

javascript

Prerequisite

• GraphQL: The basics
• Implementing GraphQL

The previous tutorials cover what GraphQL is and how to implement it in an express server. In this tutorial, we will try to establish how GrpahQL uses resolvers to fill data in a request and how to write the resolvers.

Setting up the Schema

Building a modular schema is fundamental to building a good API. The first step in building a good schema is knowing what the data you want to get out looks like. Here we will want to be able to make three types of queries, the first being pulling information about a book. The second and third are filtering books by authors and getting all of the books we have in the database. We will be using the following JSON object as our "database".

javascript
// Some dummy data

To get started with GraphQl in Node Js first you will need to install the graphql.js library by the GraphQL foundation. GraphQL.js helps with building queries and allows you to build APIs with Express.

Installing

bash
npm install graphql --save

Building Schema's

javascript
import { buildSchema }  from 'graphql';

Syntax

The syntax is based on extracting information from an endpoint and returning it in a JSON object. The querying syntax looks the same as the object you want to receive back.

graphql
{
  me {
    name
  }
}

Google Analytics

Google Analytics allows you to track your website's demographics and reach. It is a free tool provided by Google to help its publishers create better content by knowing who they are targeting. Whether you are concerned about privacy or want more features, here we will lay out some great alternatives with a few that are free and open source.

Links

• Fathom
• Matomo
• Umami

Fathom

Price: $14/m (Up to 100,000 monthly page views)

What's a Certificate Authority?

A certificate Authority also commonly called a "CA", is an organization that acts as a third party between your website and the user's browser to manage the website's encryption. The role of managing the website's encryption is done via issuing SSL/TLS certificates. The certificates need a third party to sign them, this should be a trusted source, if you have seen other sites offer signed certificates this is what they are selling. Let's Encrypt does this same thing for free but its scope is more limited.

Let's Encrypt vs Paid SSL

Paid SSL and Let's Encrypt certificates vary a bit, mainly in the authentication. Other paid SSL certificates can verify the owner of the website is actually who they are claiming got be by using manual verification processes. Let's Encrypt's process is completely automated and only provides domain ownership verification. Domain ownership verification just proves that the server that sent the information owns the domain you are trying to connect to.

SSL/TLS Certificates and SEO

SSL/TLS certificates do increase SEO performance, but only slightly. Google does consider HTTPS encryption as a signal when ranking pages. This will not do a ton for you however it is worth it as setting up Let's Encrypt is a very easy way to boost your site.

Setting up Let's Encrypt

Overview

CSS Tables are formed out of four main elements, <table>, <tr>, <th>, and <td>.

• Table Element
  • Defines the Table container, all elements are contained in this tag
• Table Row
  • Table Row (TR) is the element where the columns are placed into
• Table Header

Assumptions

We won't go over installing Express or Polka here.

Using adapter-node

• Building SvelteKit for Node JS To use an alternative Node.JS server first, you will need to build your application for Node using the adapter-node package. Follow the linked tutorial, then proceed.

Using Express

After building the application for node, Svelte will output two files, handler.js and index.js. The handler.js file will be the file you pass into Express as middleware.

html
<div>
{#if condition}
    Display this content if true
{/if}
</div>

To display the content inside of the if statement, set the variable to true somewhere in your article.

Enable knowledge checks? Using variables in JavaScript is easy as there is no need for types. Types are an identifier the programmer sets that tell the computer how to set/get the variable's data. Types can help protect your code from unintentionally doing things you don't want. If you would like to use types in JavaScript you can install TypeScript.

Variables are used as a container to store data the basic syntax is shown below:

>javascript
var hello = "world"
console.log("Hello " + hello);
                    
> "Hello world"

What is Alpine

Alpine is a lightweight JavaScript framework designed to mimic jQuery with modern features like reactive components, all in a package that is 21.9kB minified and 7.1kB gzipped. This is relatively lightweight when compared to jQuery which comes in at 87.6kB minified and 30.4kB minified and gzipped.

Alpine can be used for building any type of web application, it excels at building interfaces and applications where state management is important but might not need a full-scale framework like React or Svelte. If you are interested in what websites use Alpine, you can use this tool to look.

How fast is Alpine

According to this benchmark Alpine performs poorly when compared to many other frameworks and when compared to Vanilla JS. This should be taken lightly, it terms of speed Alpine is not slow at all, we are only talking milliseconds of a performance difference. If you are considering using Alpine speed is defiantly not something you should worry about, but rather the syntax of the framework and how well you can use it.

Scalability

For the scalability of Alpine, I haven't built anything large with it, only a portfolio website. So I don't have any experience to pull from however, after using it I think the main issue you will run into is keeping the state synced between all of the components. I personally would not use Alpine for building an entire web app, I would use it for adding small independent components to an application or to spice up a primarily static site.

What is the Chat GPT API

The Chat GPT API gives you access to the language model that powers the super popular application of the same name. The API SDK is currently only available for Python and Node.JS however, there is also an HTTP API that you can build a wrapper around to use in your language of choice.

Pricing

The gpt-3.5-turbo model is the model used in Chat GPT, the cost per 1k tokens is significantly cheap than previous models like gpt-3. This is a good sign that the more powerful model will most likely come down in price as newer cheaper models are released.