Join our newsletter for more DECODE content!

No thanks
📝 All
📡 Discover
🔥 Hot
03/07/2023

Node Serverless

Serverless computing has gained immense popularity in recent years, especially with the rise of cloud computing. With the help of serverless architecture, developers can now focus more on the business logic of their applications rather than worrying about the infrastructure setup. In this tutorial, we will discuss how to make serverless APIs in Node.js using the Serverless Framework.

Why is it called serverless?

The term serverless doesn't mean there aren't any servers involved; instead, it means that the developer doesn't have to manage the servers. In traditional server-based architectures, developers need to manage servers, including their maintenance, scaling, and security. In serverless architecture, the cloud provider manages the servers, and the developer only focuses on the application code.

What language is Serverless Framework?

Serverless Framework is a tool for building serverless applications in various programming languages, including Node.js, Python, Java, and Go. It provides a simple and intuitive way to deploy serverless applications on popular cloud providers like AWS, Azure, and Google Cloud Platform.

What does Serverless Framework do?

The Serverless Framework simplifies the process of building, deploying and managing serverless applications. It provides a command-line interface (CLI) for creating, testing, and deploying serverless functions and APIs. It also allows developers to specify the required resources, such as AWS Lambda functions, API Gateway endpoints, and Amazon S3 buckets, in a serverless.yml file.

Pro's

Read

Comments


Be the first to comment!

03/06/2023

Getting started with Bun

Bun is a lightweight JavaScript runtime built on top of JavaScriptCore engine with a goal to provide a fast and efficient environment for running JavaScript code.

What is Bun

Bun is a new JavaScript runtime that's built from the ground up for running code outside of the browser. It allows developers to write and run JavaScript code just like they would with Node.js but with a focus on performance and efficiency.

Why is Bun Fast

Bun is built on top of the JavaScriptCore engine, which is the same engine that powers Safari. It's optimized for running JavaScript code quickly and efficiently, making Bun a fast runtime. In addition, the JavaScriptCore engine starts quicker and performs faster than the v8 engine that powers Node.JS and the Chrome browser.

Is Bun Production Ready:

Yes, Bun is at a stable version however, it has not hit its 1.0.0 as of writing, so there is a possibility things might change as the engine develops. It is safe to assume if you are starting a new project that Bun would be a good fit, if you are migrating your existing app with a large user base, I would recommend waiting until the engine is at a full version release.

Why Use Bun

Read

Comments


Be the first to comment!

03/05/2023

How to use Git

Git is a popular version control system that allows developers to keep track of changes in their codebase and collaborate with others. Here is a step-by-step tutorial on how to use Git.

Install Git

The first step in using Git is to install it on your computer. Git is available for Windows, Mac, and Linux operating systems. You can download the installer from the official Git website here.

Set up Git

After installing Git, you need to set up your name and email address in Git's configuration file. This information is used to identify who made each change to the codebase.

To set up your name and email address, open a command prompt or terminal window and enter the following commands:

bash
git config --global user.name "Your Name"
Read

Comments


Be the first to comment!

03/04/2023

Building a Portfolio Site - Structure

Picking the stack your portfolio uses is important as it allows you to show your competency with the frameworks you know. Pick something that you are comfortable with and that will provide a good-looking site in the end.

Previous Parts

Deciding Your Stack

Here are some tools that you might use

Frameworks CSS Libraries
Svelte UIKit
Read

Comments


Be the first to comment!

03/02/2023

Building a Portfolio Site - Planning it out

Building a nice portfolio website is important when trying to get someone to pay attention to your work, especially if you are a web developer. In this post we will discuss some methods of building a portfolio site and the tech you might want to use.

Planning

Planning out what type of content you want to include is an essential step in creating a website. You can get fancy with the site's design, but if there isn't enough content to go along with it, the site is useless. Now let's get into the steps of selecting what type of content you should include.

Target audience

Deciding who your target audience is will help shape everything you will put on your site. Are you trying to get hired by a company? Great gear your content more toward why you would be a great fit for their business. Looking for freelance work, talk about previous clients you have had, how you helped them, and the problems you solved for them.

Selling Point

The selling point of your site should be what the entire page brings the reader to, a call to action. Your call to action can be anything you want, filling out a form, checking out your GitHub, or emailing you.

Type of content

Read

Comments


Be the first to comment!

03/02/2023

JS Push Notifications on iOS

Push notifications are a great way to keep users engaged with your web application even when they're not actively using it. In this tutorial, I will guide you on how to use push notifications in JavaScript.

Register for a Push Notification Service

To use push notifications, you need to register for a push notification service. Some popular services include Firebase Cloud Messaging, OneSignal, and Pusher. These services provide APIs for sending and receiving push notifications.

Ask for User Permission

Before you can send push notifications, you need to get the user's permission. This is done using the Notification API in JavaScript. Here's an example of how to ask for permission:

javascript
if (Notification.permission === 'default') {
  Notification.requestPermission().then(function(permission) {
    if (permission === 'granted') {
Read

Comments


Be the first to comment!

03/01/2023

Basic's of Networking Protocalls

There are several networking protocols that can be used on the web, and each one serves a specific purpose. Here are some of the most common protocols.

REST (Representational State Transfer)

This is a protocol for building web services that are scalable and easy to maintain. It uses HTTP methods like GET, POST, PUT, and DELETE to manipulate resources identified by URIs. Here's an example of a RESTful API call in JavaScript using the fetch API:

javascript
fetch('https://example.com/api/users')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error));
Read

Comments


Be the first to comment!

02/28/2023

Ternary Operators in JS

A ternary operator is a type of conditional operator that allows for inline if statements. The ternary operator is suer useful once you know how to use it and can reduce the amount of logic in an application and are often used when you need to assign a value to a variable based on a condition.

The basic syntax of a ternary operator is as follows:

javascript
condition ? expressionIfTrue : expressionIfFalse

The condition is evaluated first. If it's true, the expressionIfTrue is executed and its result is returned. If it's false, the expressionIfFalse is executed and its result is returned.

First, you need to identify the condition that you want to evaluate. This can be any expression that evaluates to a boolean value (true or false).

Read

Comments


Be the first to comment!

02/27/2023

Setting Up GitHub Pages

GitHub Pages is a free service offered by GitHub that allows you to create a website or blog for your project, personal brand, or business. By default, GitHub Pages provides a subdomain for your site, such as username.github.io. However, you can also use a custom domain name for your site, which can help you establish your brand and make your site more memorable.

In this tutorial, we will guide you through the steps to set up GitHub Pages with a custom domain.

Prerequisites

Before you begin, you will need the following:

  • A GitHub account
  • A GitHub repository with your website files
  • A custom domain name that you own

Create a CNAME file

Read

Comments


Be the first to comment!

02/25/2023

JSDoc Setup Guide

JSDoc is a popular tool used to generate documentation for JavaScript code. It allows developers to document their code in a standardized format, making it easier for others to understand and use their code.

Here is a step-by-step tutorial on how to set up JSDoc for your JavaScript project:

Install JSDoc

You can install JSDoc using npm (the Node.js package manager). Open your terminal or command prompt and run the following command:

npm install -g jsdoc

This command will install JSDoc globally on your system, so you can use it for any JavaScript project.

Read

Comments


Be the first to comment!

02/25/2023

HTML Unicode Escaped Characters

HTML escaped characters are special sequences of characters used in HTML to represent characters that cannot be easily typed using a keyboard or that have a special meaning in HTML. These characters are also known as HTML entities or character entities.

WTF is a unicode character

HTML escaped characters are created by using an ampersand (&) followed by a specific code or name that represents the character, and then closing the sequence with a semicolon (;). For example, the escaped character for the less than sign (<) is &lt; and for the greater than sign (>) it is &gt;.

Here are some common HTML escaped characters and their codes:

  • < represents the less than sign (<)
  • > represents the greater than sign (>)
  • & represents the ampersand (&)
  • " represents the double quote (")
Read

Comments


Be the first to comment!

02/23/2023

Using Media Queries in JS

With media queries, developers can ensure that a website looks good and is easy to use on all types of devices, from smartphones to tablets to desktop computers. By optimizing the layout and design for each device, users can enjoy a seamless browsing experience no matter where they are accessing the website from.

Media Queries are defined and used in CSS to transform your page based on user-set criteria. CSS might not be able to adapt your design perfectly, instead, you might consider using JavaScript. The traditional way of determining if a device meets the Media Query criteria would be to use DOM attributes like innerWidth. However, now you are able to use Media Queries in JavaScript using the window.matchMedia function.

matchMedia

The window.matchMedia function in JavaScript is used to check if a particular media query applies to the current device or browser window. It returns a MediaQueryList object that contains information about the media query, such as the media type, media features, and whether the query matches the current device or not. Using the addEventListener method you can listen for changes to the media query and execute different code based on the result.

window.matchMedia('(max-width: 600px)');
// MediaQueryList {media: '(max-width: 600px)', matches: false, onchange: null}
Read

Comments


Be the first to comment!

02/22/2023

JavaScript ClipBoard API

The JavaScript clipboard API provide the ability to programmatically interface with the devices clipboard, enabling cutting, copying, and pasting without user input.

Checking for clipboard access

The first step in using any navigator feature is to make sure you have the correct permissions to use the feature. To check the clipboard feature use navigator.permissions.query and pass an object with the key of write-on-clipboard. This will return granted if the user has granted permission.

javascript
navigator.permissions.query({ name: "write-on-clipboard" }).then((result) => {
    if (result.state == "granted" || result.state == "prompt") {
    alert("Write access granted!");
}
});
Read

Comments


Be the first to comment!

02/22/2023

TOML Basics

TOML is a configuration file format that is designed to be easy to read and write for both humans and machines. It stands for "Tom's Obvious, Minimal Language" and was created by Tom Preston-Werner, the co-founder of GitHub. In this tutorial, we will explore how to use TOML.

Installing TOML

TOML is a simple file format, so you don't need to install any specific software to use it. You can create and edit TOML files using any plain text editor such as Notepad, Sublime Text, or Atom.

Creating a TOML file

To create a new TOML file, simply create a new text file with the ".toml" extension. For example, if you want to create a configuration file for your application, you can create a file named "config.toml".

Basic syntax of TOML

The basic syntax of TOML is simple and easy to learn. Here's an example of a TOML file:

Read

Comments


Be the first to comment!

02/22/2023

Using CSS Media Queries for Responsive Design

Media queries in CSS are a powerful tool that allow you to adjust the layout and design of your website based on the characteristics of the device that is being used to view it. In this tutorial, we will cover the basics of using media queries in CSS.

What is a media query?

A media query is a block of CSS code that is used to apply certain styles to a web page based on the characteristics of the device that is being used to view it. For example, you might want to adjust the layout of your page when it is viewed on a mobile device, or you might want to apply different styles to a page when it is printed.

Using media queries in CSS

To use media queries in CSS, you need to follow a few simple steps.

  1. Define the media query The first step is to define the media query using the @media rule. The syntax for the @media rule is as follows:
Read

Comments


Be the first to comment!