Join our newsletter for more DECODE content!

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

Svelte Environment Varibles

Environment variables are values that can be passed to an application at runtime, that influence the behavior or configuration of the application. They are stored in key-value pairs and can be used to store sensitive information, such as passwords, API keys, or configuration settings. This information is made available to the application through the operating system, so the application can use it without having to hardcode the values into the codebase.

Svelte + Env

In Svelte, you can use environment variables by accessing the process.env object, which holds all the environment variables available to your application.

For example, to use an environment variable named API_KEY in a Svelte component, you would do the following:

<script>
    import { API_KEY } from '$env/static/private';
</script>
Read

Comments


Be the first to comment!

02/05/2023

Why using eval in JS can be dangerous

It can cause malicious code to be executed with the same permissions as the webpage or extension, as well as it is slower than other alternatives due to the additional steps required for invoking the JavaScript interpreter. Minifiers also struggle with code transitively dependent on eval(), and how this can cause issues for variables.

Using eval() in JavaScript can be dangerous for a few reasons, and should be used with caution. Firstly, it can execute the code it is passed with the privileges of the caller, meaning that if malicious code is passed to eval(), it can run on the user's machine with the same permissions as the webpage or extension.

This can lead to possible attacks that can read or change local variables, allowing third-party code to access the scope in which eval() was invoked. Additionally, eval() is slower than other alternatives due to the additional steps required to invoke the JavaScript interpreter, as modern JavaScript interpreters convert JavaScript to machine code, meaning that variable names are lost.

This means that the browser must do long, expensive variable name lookups to figure out where a variable exists in the machine code and set its value. Ultimately, minifiers are unable to minify code transitively dependent on eval() as eval() would not be able to read the correct variable at runtime. Because of this, it is important to use eval() cautiously and only when absolutely necessary.

Read

Comments


Be the first to comment!

02/05/2023

CSS Pseudo Elements

CSS pseudo elements allow web developers to add specific elements to their webpages without having to write additional HTML or JavaScript. These elements are created by adding a colon and a keyword to the end of a CSS selector. Some of the most commonly used pseudo elements are :before and :after which can be used to add content before or after an element, :first-letter which can be used to style the first letter of a paragraph, and :hover which can be used to add interactive effects when a user hovers their mouse over an element.

These pseudo-elements provide a great way for developers to add extra style and functionality to their websites without writing additional code. With the right combination of CSS and pseudo-elements, developers can create unique and exciting web pages that are both visually appealing and functional.

Example

Here is an example of pseudo-elements being used to make a copy-and-pastable code snippet. This is the code used on this site also!

HTML
"><code data-before-"COPY">
    // Some Code
</code>
Read

Comments


Be the first to comment!

02/04/2023

What is HTML DOM?

The HTML Document Object Model (DOM) is an integral part of web development and is used to create dynamic web pages. It is a hierarchical tree-like structure that contains the content of the webpage, making it possible for developers to access and manipulate the content. Each element of the webpage is a node, with a unique ID and a set of attributes. The root node of the DOM tree is the HTML element, and all other elements of the webpage are descendants of the HTML element.

DOM Structure

The DOM tree is divided into two parts, the document tree and the element tree. The document tree contains the main elements such as the head and body, while the element tree contains the properties and children of the element. In addition, the DOM contains a set of methods to access and manipulate elements, such as the getElementById() method which can be used to access an element by its ID. It is important to understand the structure and functions of the DOM in order to create a successful website.

Interaction

JavaScript is primarily used to interact with the DOM. It provides a variety of methods for accessing and manipulating elements within the DOM, such as the getElementById() method which can be used to access an element by its ID, and the setAttribute() method which can be used to set the value of an element's attributes. Additionally, the insertBefore() method can be employed to insert a new element in the DOM before an existing element. These methods can be used to create interactive, engaging web pages with dynamic content that is constantly changing and updating.

Events

HTML elements can be interacted with using events. An event is an action that is triggered when a user interacts with the element, such as clicking on a button or hovering over an image. When an event is triggered, it can invoke a function that will execute a certain set of instructions. For example, when a user clicks on a button, an event listener can be used to execute a function to perform some action such as opening a new page or submitting a form.

Read

Comments


Be the first to comment!

02/02/2023

Javascript Loops

Loops are one of the most valuable tools in any programmer's arsenal, and Javascript is no exception. Loops allow you to execute the same code multiple times with different values, making them a great way to deal with repetitive tasks. There are three main types of loops in Javascript: for loops, while loops, and do-while loops, each with its own syntax and usage.

For Loops

For loops are the most popular looping option in Javascript. They are used to iterate through a set of values or objects and have three components: an initializer, a condition check, and an incrementer. The initializer is used to set up a variable to be used in the loop, the condition check determines when the loop should end, and the incrementer is used to update the variable for the next iteration.

for (let i = 0; i < num; i++) {
    // do something
}

While Loops

Read

Comments


Be the first to comment!

02/01/2023

PicoCSS Dynamic Templates

Pico CSS has the ability to customize the dark and light templates here is how to change the template colors with JS.

The Pico CSS template utilizes CSS variables to dynamically alter the appearance of the website. In this scenario, the intention was to extract the color information from a database and dynamically customize the visual presentation of the site. All CSS variables are defined at the :root level and can be manipulated using JavaScript's setProperty method, as demonstrated below.

let color = "#00A1FE"

let root = document.querySelector(':root');
root.style.setProperty('--primary', color);
root.style.setProperty('--primary-hover', color);
root.style.setProperty('--primary-focus', color + '40');
root.style.setProperty('--primary-inverse', '#fff');
Read

Comments


Be the first to comment!

01/31/2023

JS Switches

The switch statement is a control structure used to perform multiple operations based on different cases, often as an alternative to if-else statements.

Here's the basic syntax:

Syntax

switch (expression) {
  case value1:
    // code to be executed if expression matches value1
    break;
  case value2:
    // code to be executed if expression matches value2
Read

Comments


Be the first to comment!

01/30/2023

Logging into Git from a Remote Server

Git remote server setup can be tricky with the updated rules Github has, here we will dive into the basics of logging in while keeping your keys secure.

There are two ways to "login" to Git the first way to to fill out the two commands below:

git config --global user.name "your_username"

and

git config --global user.email "your_email_address@example.com"

This method however is outdated if you are trying to log in to a GitHub repository. To login to a GitHub repo will have to install the gh tools you can do that by pasting the following command into a terminal connected to the remote server.

Read

Comments


Be the first to comment!

01/30/2023

Svelte Markdown Component

Using markdown with Svelte allows you to create super simple websites that require almost no-coding. The svelte-markdown component makes this easy with one line of Svelte.

Install

Use NPM to install svelte-markdown to your project.

npm i svelte-markdown

Importing

The svelte-markdown library is a component that can be used just like an HTML tag. First, you need to import it from the node_modules where you installed it.

<script>
Read

Comments


Be the first to comment!

01/29/2023

Nix Package Manager

Nix is a tool that enables reproducible package build in isolation allowing package's to be install on any Linux based operating system including Mac OS.

NixOS Logo

Install

To install NixOS for multiple users run the following command:

sh <(curl -L https://nixos.org/nix/install) --daemon

NixOS recommends installing the Nix package manager as a multi-user installation as it provides better build isolation, better security, and the ability to share downloads between users. To see the full explanation click here

Configuration

Read

Comments


Be the first to comment!

01/29/2023

How to install Daisy UI with Tailwind CSS

Daisy UI is a collection of components and custom classes that can be easily used to rapidly create stunning websites. Daisy UI's secret is it's built using Tailwind CSS which provide out of the box support for easy customization of elements.

DaisyUI Logo

Install

npm i daisyui

Add the following code to the tailwind.config.js file.

module.exports = {
  //...
Read

Comments


Be the first to comment!

01/28/2023

Open AI GPT-3 API Tutorial JS

How to use the GPT-3 API in Node JS to generate text for any use.

Installation

bash
npm install openai

Authentication

The OpenAI API uses API keys for authentication, the best practice is to store the key in an environment variable to prevent accidental exposure to the web. You can get your API key from the API keys page on OpenAI's website.

The code below show's the basics of authenticating with the JS SDK, the API key is pulled from the environment variable set using process.env. Then the configuration object if passed to the OpenAIApi class.

javascript
Read

Comments


Be the first to comment!

01/27/2023

Install Tailwind CSS Svelte

Tailwind CSS is a CSS framework designed to be used with modular predefined classes instead of custom classes for each element. We will go over how to install Tailwind CSS and set it up to build with Svelte.

Install Tailwind

First you need to install Tailwind and it's dependences then run the Tailwind npx command to setup your project.

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init tailwind.config.cjs -p

Configuration

To properly setup Tailwind you need to make a few changes to your files. In the svelte.config.js file add the line below, below the import adapter line.

Read

Comments


Be the first to comment!

01/27/2023

Is Tailwind CSS Any Good?

Honest feedback from an average developer.

tailwindcss

Tailwind CSS is a CSS framework designed to be used with modular predefined classes instead of custom classes for each element. What are the drawbacks of it, and what benefits for the developer does it bring?

I have been using Tailwind CSS for a few months now and overall, I have found it to be a very useful tool. One of the biggest benefits of using Tailwind is the ability to quickly and easily create consistent and visually appealing designs. The predefined classes make it easy to ensure that all elements have the same spacing, font sizes, and colors, which can be a major time saver when working on projects with multiple pages or components.

Another benefit of Tailwind is that it is highly customizable. If you want to make a change to a particular class, you can easily do so by modifying the config file. This means that you can easily adjust the design to match your project's specific requirements without having to write custom CSS.

One of the main drawbacks of Tailwind is that the HTML file can get quite large and messy, especially if you have a lot of the same components. This can make it harder to develop large apps but the same issue can happen with CSS files.

Read

Comments


Be the first to comment!

01/27/2023

Warp Terminal

Warp terminal claims to be a "a blazingly fast, rust-based terminal reimagined from the ground up to work like a modern app". Here we will go over some of my favorite features and discuss why I made the switch.

Warp Terminal screen shot

Installing

If you are on Mac you can head over to Warp.dev and download it from there or you can use brew to install Warp with the following command:

brew install --cask warp

Features

The idea of Warp is to bring the default terminal into the future by adding ease-of-use features like the following:

Read

Comments


Be the first to comment!