Join our newsletter for more DECODE content!

No thanks
📝 All
📡 Discover
🔥 Hot
04/08/2023

Shared Hosting vs Serverless

When building a web service should you build your application on a shared hosting plan like Digital Ocean, or should you use a service like AWS Lambda or Cloudflare's Workers?

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.

Read

Comments


Be the first to comment!

04/04/2023

Install PicoCSS with Svelte

Pico CSS is a classless CSS framework that auto add styles to default HTML elements allowing you to effortlessly build beautiful websites. Here's how to install and use it in Svelte or SvelteKit.

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>
Read

Comments


Be the first to comment!

04/03/2023

Testing in JavaScript

Testing in Javascript can be done on your own, by writing application-specific tests to ensure your code is working the way you want it to or, it can be done with a testing library that can help remove some of the extra code.

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

Building tests with Jest

Jest is one of the most popular testing libraries out there and is one of my favorites to use. Jest makes writing tests easy by using an almost plain English syntax like below.

Read

Comments


Be the first to comment!

03/29/2023

Making Requests to a GraphQL API

Interfacing with a GraphQL API can be done with dedicated libraries, or with custom helper functions you create. We will only be covering the custom method here.

Prerequisite

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
Read

Comments


Be the first to comment!

03/27/2023

Building GraphQL Resolvers

Figuring out how to make GraphQL resolvers is tricky when you get past the basic static routes. Here's a straight forward tutorial that goes over creating resolvers.

Prerequisite

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
Read

Comments


Be the first to comment!

03/26/2023

Implementing GraphQL

Learn to build a GraphQL query server in Node JS. Enable dynamic/high speed API endpoints with GraphQL and Express.

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';
Read

Comments


Be the first to comment!

03/22/2023

GraphQL: The basics

GraphQL is a data aggregation framework designed to make accessing, updating, and creating data easier. It acts very similar to REST in the sense that it is a design spec on how to structure your API, like REST there are pre-built solutions you can implement which we will go over later in this post.

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
  }
}
Read

Comments


Be the first to comment!

03/19/2023

Analytic Platforms Worth Checking Out

A list of Google Analytics alternatives that can be self hosted.

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.

Fathom

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

Comments


Be the first to comment!

03/17/2023

LetsEncrypt and Securing Websites

Let's Encrypt is a free alternative to paid SSL Certificate Authorities. Learn what they do and how to get started.

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

Read

Comments


Be the first to comment!

03/13/2023

Styling HTML Tables in CSS

Tables in HTML play an important role in laying out complex sets of data. By default the table styling is boring, with this guide learn how to create awesome tables.

CSS Tables

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
Read

Comments


Be the first to comment!

03/12/2023

Using Different Servers with Svelte

Svelte by default uses the Node.JS http module as it's router. Here we will talk about using Express or Polka as middleware to implement API routes.

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.

Read

Comments


Be the first to comment!

03/11/2023

Svelte If Statements

If statements in Svelte make it easy to control whether or not content is displayed in your application. Here is a quick reference on how to use them

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.

Read

Comments


Be the first to comment!

03/10/2023

Variables in JavaScript

Today we will go over the most fundamental operator in programming, the variable. A variable is a keyword used to represent a piece of data in memory.

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"
Read

Comments


Be the first to comment!

03/09/2023

Alpine JS

Alpine is a rugged, minimal tool for composing behavior directly in your markup. Think of it like jQuery for the modern web, it has an easy to learn syntax that can have you building reactive apps in minutes.

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.

Read

Comments


Be the first to comment!

03/08/2023

Chat GPT API OpenAI

OpenAI has just released their Chat GPT api, it is a cheap to use language model that allow you to harness the power of Chat GPT in your own application.

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

Model Usage
gpt-3.5-turbo $0.002 / 1K tokens

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.

Read

Comments


Be the first to comment!