DEV Community: alvinscode

Cookies and Environment Variables

alvinscode — Sun, 08 Oct 2023 18:11:23 +0000

Paywalls were one of the most interesting things about the internet to me. How did the website know how many articles I've viewed? How does a website know how long I've spent on that particular website even though this is this first time I've opened in in a week? Websites store this type of information as cookies. Cookies are a way for a server to send state information to a user, and for the user to return the information back to the server. To store state, a server will include a Set-Cookie header in an HTTP response. When a user returns to a website, the Cookie header that was received from the server previously will be accessed by the server, and the server will be free to interpret what to do with that information freely. Using Chrome's console, going under Application -> Cookies allows the user to delete cookies, which can be used to reset the state of websites.

The mystery of cookies doesn't end there, though. There is another level of encryption that can be done to cookies, and that is known as a session. A signature is created for every session cookie, and attaches that signature to the cookie. This makes it so users cannot tamper with the cookie, if the cookie is messed with, because the tampering will not have the unique signature left from the server, it will ignore any changes to it and just generate a new one.

So, what is a type of signature that can be used? One type of signature is known as a secret_key. A secret_key is used as a security mechanism to authenticate requests or services offered by websites. So, how do servers keep their keys a secret? Here are some steps that could be taken to hide a secret key:

Use environment variables - secret keys are able to be stored as variables outside of a program. An example of an environment variable is:

export ENV_VARIABLE="Secret!"

In this example, 'ENV_VARIABLE' is an environment variable that has "Secret!" as it's value. Programs can then access "Secret!" by calling for 'ENV_VARIABLE' without explicitly using "Secret!".

Creating a .env File - A .env file is used to store environment variables. This file is not pushed to a repository to keep it a secret. Secret keys can be stored in this file with this format:

KEY=VALUE

Using .gitignore - Adding .env to a .gitignore file is the method to prevent accidently publishing the secret key information anywhere.
Access Environment Variables in Code - In Python, you can use the os module to access environment variables. You can do it like this:

import os

secret_key = os.environ.get("SECRET_KEY")

Set Environment Variables in Production - In the version of an application that is uploaded, any reference to a secret key will be instead the environment variable is referencing that key.
Set Environment Variables while Hosting - Most hosting services will provide a way to use environment variables when deploying applications.
Secure the Environment Variable - Only people that are working on the project should have access to the environment variables, to prevent exploitation of your application. If a variable is compromised, you should change it as soon as you can.

Environment Variables are part of the environment that a process is run. They are accessible to any program or process running on the same computer, regardless of programming language or location in the system. They are used to store configuration settings, such as a path to a directory, system preferences, or settings needed by applications. They can be set, changed, or removed any time during the runtime of a system. This allows for them to be changed dynamically without modifying code. In addition to that, environment variables are accessed through APIs provided by programming languages, getenv (C/C++), process.env (Node.js), and os.environ (Python) are used to retrieve their values.

A real life practical environment variable would look like this:

Name: DATABASE_CONFIG

{
    "host": "database.example.com",
    "port": 5555,
    "username": "db_username"
    "password": "secret_password"
    "database": "appdb"
}

This variable stores important information such as the host address, port, database username, password, and name of the database. Environment variables like this are used in applications where sensitive information needs to be stored but also accessed outside of an application's code. The benefits of using an environment variable like this are security, flexibility, easy management, and portability. When a program needs to, it will access this variable file and extract the necessary information to establish a secure and reliable connection to the database. Cookies, secret keys, and environment variables are some very intricate things and interesting things that make up the foundation of modern internet and computers.

Python and ORM

alvinscode — Sun, 27 Aug 2023 11:46:32 +0000

Python is widely used as a general purpose, high-level programming language. It was originally designed by Guido van Rossom in 1991, and developed by the Python Software Foundation. The main focus of Python at it's creation was readability, which means the cost of maintaining programs within this language will be more manageable and reliable for the long term. The reason Guido chose to develop Python because he thought that development in other languages at the time was too slow. Today, I want to talk about how what ORM is, and why it can help speed up application development.

An Object-relational mapper (ORM) is a library that automates the transfer of data into database tables through objects that are used in code. They are useful because they allow developers to write Python code instead of SQL to make create, read, update, and delete data from a database. The main benefit of this is that a developer wouldn't need to switch between languages when creating an application, they can just continue in Python and I feel like that makes it a very powerful tool, as the more experience with Python a developer has, the more they can just continue using it over any other language. For example, here is an example of a Python class:

from sqlalchemy import create_engine, Column, Integer, String
from sqlalchemy.ext.declarative import declarative_base
from sqlalchemy.orm import sessionmaker

Base = declarative_base()

class User(Base):
    __tablename__ = 'users'

    id = Column(Integer, primary_key=True)
    username = Column(String)
    email = Column(String)

engine = create_engine('sqlite:///users.db')
Session = sessionmaker(bind=engine)
session = Session()

new_user = User(username='john_doe', email='john@example.com')
session.add(new_user)
session.commit()

In this block of Python code, an SQL database is created, and an initial user is already added. It is pretty simple to interpret, the 'users' table will have 3 columns: id, username, and email. Almost instantaneously a new user can be generated, and the ability to generate more users is readily available all a few lines.

Another benefit of using Python for SQL is how many database backends it can support. This code above would only need a couple minor changes and it will be able to switch from SQLite support to MySQL or any other database backend for example.

from sqlalchemy import create_engine, Column, Integer, String
from sqlalchemy.ext.declarative import declarative_base
from sqlalchemy.orm import sessionmaker

Base = declarative_base()

class User(Base):
    __tablename__ = 'users'

    id = Column(Integer, primary_key=True)
    username = Column(String)
    email = Column(String)

mysql_username = 'your_username'
mysql_password = 'your_password'
mysql_host = 'localhost'  # Change to your MySQL host
mysql_db_name = 'your_database_name'

connection_string = f'mysql+mysqlconnector://{mysql_username}:{mysql_password}@{mysql_host}/{mysql_db_name}'

engine = create_engine(connection_string)
Session = sessionmaker(bind=engine)
session = Session()

new_user = User(username='john_doe', email='john@example.com')
session.add(new_user)
session.commit()

Here is an example of code that serves the same purpose as above but with support for MySQL. The majority of code is the same, which goes to show how adaptable Python code really is.

Another really powerful benefit of Python is relationship handling. Relationship handling in SQLAlchemy refers to how relationships are managed between tables in a database model. One record in a parent table can be associated with multiple records in a child table. This is called a one-to-many relationship. Another relationship two tables can have with each other is called a many-to-many relationship, and that is when both the parent and child table can share multiple records in the other table. Although managing multiple different records and the possibility of duplicates in those records sounds like it can get messy and confusing fast, SQLAlchemy can handle these relationships with a few lines of code. For example, without Python, you would need to create two separate tables with their own primary keys and other fields. Then, create a middle table to link both main tables together, this table contains keys that reference both primary keys of the two main tables. Afterwards, you would need to manually establish the relationships between the middle table and both main tables. Whenever a connection needs to be made from the two main tables, a third record needs to be created from the middle table to connect them. With the possibility of duplicate and multiple entries, visualizing this process can get very messy and confusing pretty quickly. Thankfully, this process can be automated with a few lines a Python code, here is an example:

association_table = Table(
    'user_roles', Base.metadata,
    Column('user_id', Integer, ForeignKey('users.id')),
    Column('role_id', Integer, ForeignKey('roles.id'))
)

class User(Base):
    __tablename__ = 'users'
    id = Column(Integer, primary_key=True)
    username = Column(String)
    email = Column(String)
    roles = relationship('Role', secondary=association_table, back_populates='users')

class Role(Base):
    __tablename__ = 'roles'
    id = Column(Integer, primary_key=True)
    name = Column(String)
    users = relationship('User', secondary=association_table, back_populates='roles')

In this example, a user is able to have many roles, and a role can have many users. This code will establish the relationships between the two tables without needing to manually enter in anything. The keys between the tables will be established. This process without a ORM will definitely be more messy, time consuming, and could potentially reach a point where it'll be too complex to work with. In conclusion, Python's purpose is more readability and simplicity, and even with SQL it provides just that. Python makes SQL easier to manage and navigate.

What is React?

alvinscode — Sun, 02 Jul 2023 14:01:24 +0000

Today, I want to talk about React, what it is and what it can do. React is a front-end framework that will allow developers to build large applications quickly and seamlessly. React is built entirely from JavaScript, with a structured and organized syntax called JSX. JSX looks similar to HTML, but instead looks more simplified and is separated into components, and used to build applications in sections. The ability to split code in sections allows for applications to be more organized, easy to read, and reusable.

An example of App in React would be:

function App() {
  return (
    <div>
      <NavBar />
      <SongMenu>
        <SongResult result={result1} />
        <SongResult result={result2} />
      </SongMenu>
      <SongRecommendation />
    </div>
  );
}

In this example, NavBar, SongMenu, SongResult, and SongRecommendation are all separate components. These components would each have their own sections, which would allow for better organization. In this example, the SongResult component is able to be used twice for a different result, because the component was created in a way that it could be reused. This is what makes React so good, the ability to keep things short, simple, and reusable while also allowing other parts of the code to be incredibly intricate.

Another way that React is so powerful it's ability to share and download code to use alongside it's own. To help organize code, React uses JavaScript packages. This package manager is called npm. Huge reusable libraries of code are available as npm packages, which allows web applications to be based off the same structure or data. This is very neat because you could use the same packages of code to create completely different things. The ability to build a package using others allows the coding process to become ever growing and innovative.

The way React organizes the packages is through a file called package.json, this file contains a list of dependencies. These dependencies are what is used to run your application, and would be required to download if someone else was to access your application. In order to do this, you would run this command, npm install. This would prompt the package manager, npm, to grab all the dependencies from the package file, and install them into your directory. Thinking about the amount of time that the world has saved from the accessibility and efficiency of this is mind-numbing.

Some very useful code that is built-in React's internal code is called useState. It is a special function called a React Hook which lets us hook into React's internal state of a component.

To import useState's functionality, you would type this at the start of a component:

import React, { useState } from "react";

then it would be implemented like this:

function Counter() {
  const [count, setCount] = useState(0);

  function increment() {
    setCount(count + 1);
  }

  return <button onClick={increment}>{count}</button>;
}

I'll go in depth with what exactly is happening in this code now. The first line of the Counter function is setting an original value of count (which is 0), and setting a function, setCount to be the "setter" function, which pretty much just means when it is called, it will re-render the component. Then, the second function being run inside the Counter function is increment. In the increment function, setCount is called, so the page will re-render, but it will re-render when count is added by 1. Finally, the button on the bottom is set to run the increment function on every click, while displaying the count on the button text. Clicking this button ultimately increases the count by 1, which in turn re-renders the page with the new count on the button. The useState function allows React to work with dynamic data. This is one of the most powerful tools to use to make code both reusable and interactive. There are many more tools involved in React but I will leave it at this for now.

Another useful tool in React is the ability to use props. Props are used to turn components into dynamic templates. props are so powerful because they allow the data to be passed down from a parent component to a child component. This is pretty much the way puzzle pieces, or "components" are connected to make a fully functional application. Data is passed through component to component to make dynamic interactions within the application, ultimately allowing the developer to create smarter and bigger applications.

In conclusion, React as a framework is very modular and reusable. It helps us focus on organization and presentation instead of solely on functionality. Components and React Hooks allow us to separate our code an structure complex applications, while making them interactive.

How to Retrieve Data from an API

alvinscode — Sat, 06 May 2023 11:14:19 +0000

Hello everybody, today I would like to talk about one of the most, if not the most important (in my opinion) thing about web programming, and that thing is communication with a server. The most popular websites today use some form of process to request data and update the webpage without reloading, and that process is called AJAX, or "asynchronous JavaScript and XML". An example of AJAX would be like Instagram requesting data from their server and receiving data about the hottest new posts, then sending you a prompt to "Click to View New Posts" so you can view the posts without you having to click refresh to check for the new posts yourself. This makes it so much easier to browse and view new content on the internet because the page stays updated itself and you don't have to spend any time loading or reloading it.

One way to request data from a server using JavaScript that I've learned so far is:

fetch()

This is a function that retrieves data, and is then paired with then() to use the data, this is how you would use fetch():

fetch('url')
  .then(response => response.json())
  .then(data => {
    console.log(data);
    \\ This logs the retrieved data into the console.
  })

Let's walk through a very basic way of using fetch() together one time. First, let's go to Mixed Analytics to view their list of free and public API's (Application Programming Interface). An API basically allows you to send and receive data from a server. For this walkthrough, I'm going to use #3 on the list, Nager.Date for their API on public holidays. Now, for this next step, you can do this from almost every website but for this example let's do it here. Here's what we need to do to get started:

Right click on this page and click "Inspect"
Click on "Console" on the new window at the top right
Type this into the console to clear all the of messages: console.clear()

With a clear console we are now ready to fetch data from our API. Next, we want to retrieve and view data from our API, and we would do it like this:

fetch('https://date.nager.at/api/v2/publicholidays/2020/US')
  .then(response => response.json())
  .then(data => {
    console.log(data);
  })

Copy and paste this into the console. You will now see the data that has been logged in the form of an array. This array consists of all the public holidays in the US according to the data from the API. But, let's do more than just view the data, let's use it. Look at this updated code:

fetch('https://date.nager.at/api/v2/publicholidays/2020/US')
  .then(response => response.json())
  .then(data => {
    console.log(data);
    console.log(`There are ${data.length} public holidays in the US.`);
  })

I've added another line to be logged in the console, but this time the length of the array of data is being called, which in this case is the total amount of holidays retrieved from the data. Finally, if you paste this into the console you will see that it will return a message saying "There are 12 public holidays in the US".

There are four main actions an API can take, and those are:

GET - request data from server
POST - send changes from user to server
PUT - revises or adds to existing information on the server
DELETE - deletes existing data from the server

The combination of these four actions make up some of the most powerful communication tools on the internet. Whether it comes to checking the weather, booking a flight, or choosing an alternate payment method (like PayPal or Apple Pay), an API will have to be used to communicate data from the user to the server. A server has stored all the data that you need to access and you (the user) will send a request to communicate with it, which will then allow you to view what the weather is like in your area, view the time and cost of flights, and also allow you to continue to pay and ship a product to your doorstep using a third party payment method.

Our example of fetching data from an API is a relatively small request of data. An API is capable of sending an enormous amount of data that can be too much to process for the average internet user at times. Being able to write code to navigate an API and the ability to break down a huge amount of data and make it user-friendly is almost like building a virtual bridge to allow people around the world to cross over and access a new area of the internet.

In conclusion, using JavaScript to retrieve and use data is a very powerful tool. We can fetch data at the click of a button and have new information or amusing content displayed to us immediately. This tool makes the internet a much more captivating space, and I hope I helped you understand a bit more of how it actually works behind the scenes with this post.