DEV Community: stuxnat

P5 JS Audiovisualizer

stuxnat — Mon, 11 Apr 2022 02:09:38 +0000

One of my favorite things about coding is that I can make fun projects with it like building an audiovisualizer. Here is how to do it in p5!

Before beginning, make sure to include the p5 sound library and reference it in your HTML file. Next:

Step 1. Set up your canvas

function setup() {
createCanvas(windowWidth, WindowHeight);
}

function draw(){
background(0);
}

Step 2. Load the music
We will create a global variable for the song, and in this example, it will be a local file. We will also create a function that will play the song only when the mouse is clicked, because some browsers do not support autoplay.

const song 


function preload(){
song = loadSoung('example.mp3')
}

function setup() {
createCanvas(windowWidth, WindowHeight);
}

function draw(){
background(0);
}

function mouseClicked(){
if (song.isPlaying()) {
song.pause() 
} else {
song.play() 
  }
}

Step 3. Capture the audio and analyze it
In this step, we will use Fast Fourier Transform (FFT). FFT will analyze the sound in every frame of the song and return an array with data about the sound.

const song 
const fft 

function preload(){
song = loadSoung('example.mp3')
}

function setup() {
createCanvas(windowWidth, WindowHeight);
fft = new p5.FFT()
}

function draw(){
background(0);
}

function mouseClicked(){
if (song.isPlaying()) {
song.pause() 
} else {
song.play() 
  }
}

Step 4. Visualize the data
In this step, we will use Fast Fourier Transform (FFT). FFT will analyze the sound in every frame of the song and return an array with data about the sound. This should give you a waveform across the canvas which you can manipulate however you want (like changing colors, or creating a circle)!

const song 
const fft 

function preload(){
song = loadSoung('example.mp3')
}

function setup() {
createCanvas(windowWidth, WindowHeight);
fft = new p5.FFT()
}

function draw(){
background(0);
stroke(255); 
noFill()

const wave = fft.waveform()

beginShape()
for (let i = 0; i < width; i++{
const index = floor(map(i, 0, width, 0, wave.length))

const x = i 
const y = wave[index] * 200 + height / 2 

vertex(x, y)
}
endShape()
}

function mouseClicked(){
if (song.isPlaying()) {
song.pause() 
} else {
song.play() 
  }
}

SQL Injection Attacks

stuxnat — Mon, 04 Apr 2022 03:28:20 +0000

Injection attacks are one of the top three most common security breaches according to OWASP Top 10. Injection attacks pass a string of code as an input to a web app, which alters the operation of the application by executing certain commands. One of the most common injection attacks is SQL injection.

Why is SQL Injection Used?
SQL Injection can be used by attackers to:

Bypass Authentication - Attackers can pass a piece of code to the database that allows them to bypass the authentication process.

SELECT * FROM users WHERE username = '' OR 1=1-- ' AND password = 'foo'

What will happen here is 1=1 will return 'true', and everything after '--' will not be executed because '--' is used to comment out code in SQL, so the rest of the query will be ignored.

Exfiltrate Data - There are many areas that can be exploited to steal data from a targeted source. A common HTTP Server request could look like this:

SELECT * FROM users INTO OUTFILE '/var/www/html/output.txt'

This will select all from users table and export that data as a text file.

Execute OS commands - Beyond databases, attackers can gain access to an entire operating system and run system commands. SQL injection attacks are often used as a vector for gaining command of the shell. If an attacker has enough information about their target, they can pass something like this:

' union select 1, '<?php system($_GET["cmd"]); ?>' into outfile '/var/www/dvwa/cmd.php' #

This piece of PHP code will allow the attacker to execute os commands. They will have access to the shell via their browser.
<?php system($_GET["cmd"]); ?>

Vandalism/DoS - Attackers can drop tables from a database and otherwise break things with SQL injection. Here is one of my favorite comics:

Prevent SQL Injection
Here are some steps can be taken to prevent SQL injection attacks:

Sanitize all inputs. Basically, the client input cannot be trusted. Use whitelists and when possible, do not let user directly communicate with the database. Perform server-side validation.

Do not expose native database errors. Attackers can use database errors to learn more about your database and find vulnerabilities.

Use Object Relational Mapping (ORM). ORM creates a layer between the language and the database. In Rails, ActiveRecord translates between Ruby and SQL. This is mostly secure, but some things can still be exploited.

Starting a React App

stuxnat — Mon, 28 Mar 2022 02:41:11 +0000

How to start a React app:

The first thing to do is make sure to have Node.js and Node Packet Manager (NPM) installed on your system.

Then, run:

npx create-react-app example-app

Now, we can cd into the app directory.

cd example-app

Start the server by running npm start

Devise Gem

stuxnat — Mon, 21 Mar 2022 01:48:36 +0000

In my previous post, I mentioned the Devise gem, which handles the user authentication process in Rails. It simplifies the process in several ways: it generates the necessary controllers for user login and sessions, creates forms for user sign up/log in, and handles the encryption process with bcrypt, eliminating the need to salt and hash passwords yourself. The Devise gem also provides compatibility with other user authentication methods like OAuth, so the user would have the option to log in through a third party. This gem is great for streamlining the user authentication process and ensuring app security.

In this post, I want to go through set up with the gem!

Setting up:
Add gem devise to your Gemfile and run bundle install

Run rails g devise:install

Creating the User Model
Run rails g devise user and rake db:migrate

Voila! This gem will generate the controller for user log in.

To generate views run rails g devise:views

To work with Devise routes, add to routes.rb: devise_for :MODELNAME where MODELNAME is the name of the model you want to create the route for.

Rails App Security

stuxnat — Mon, 14 Mar 2022 03:48:35 +0000

Security is an important aspect to consider when building web applications. There are many layers to keep in mind when thinking about app security, such as the back-end storage, the web server, and the client-facing component.

Below are some things you can do to ensure that you build a more secure Rail app:

1. Proper CORS configuration
One important thing to do with CORS to prevent unwanted access is to define access within your APIs correctly. The example below uses the wildcard '*' allows access from any origin and gives access to any resources - typically, this is not advisable (it depends on the purpose of your API). Instead, you can define which origins are allowed to access your API.

This is an example of an unsecure CORS configuration:

Rails.application.config.middleware.insert_before 0, Rack::Cors do
  allow do
    origins '*'
    resource '*', headers: :any, methods: :any
  end
end

To define permitted origins and limit access, you can do something like this:

Rails.application.config.middleware.insert_before 0, Rack::Cors do
  allow do
    origins 'http://localhost:3000'
    resource '*', headers: :any, methods: [:get]
  end
end

2. Authentication and Access Controls
It is crucial to verify user identity to prevent unauthorized access. You can use the Devise gem for user management.

Another important thing to do is maintain control to CREATE, READ, UPDATE, DESTROY actions. It is important to reinforce ownership of records made by users so that users can modify only permitted records. Pundit is a great tool you can use to create user control policies.

3. Sessions Security
You can avoid common hijacking situations by managing sessions. Implementing reset_session in your code prevents an attacker from using a fixed session to gain unauthorized access by issuing a new session identifier after a successful login.

Other things to keep in mind when using sessions: use HTTPS to prevent session theft, and do not store permanent data in sessions - store permanent data in the database.

A great resource to use is Open Web Application Security Project (OSWAP). OWASP Top Ten lists the ten most common security vulnerabilities and how to address them.

SQLZoo

stuxnat — Mon, 07 Mar 2022 04:58:23 +0000

I've been practicing SQL a lot recently. SQLZoo is a classic and great place to practice SQL. Today, I worked through the
Adventure Works set of problems...I liked this one a lot because of the cycling related theme. Spring is around the corner and this problem set made me excited to be thinking about my bicycle. Anyway, below is some of the problem set:

-- How many items with ListPrice more than $1000 have been sold?

SELECT COUNT(*) AS count
FROM SalesOrderDetail
JOIN Product
ON SalesOrderDetail.ProductID = Product.ProductID
WHERE Product.ListPrice > 1000;

-- Give the CompanyName of those customers with orders over $100000. Include the subtotal plus tax plus freight.

SELECT Customer.CompanyName
FROM SalesOrderHeader
JOIN Customer
ON SalesOrderHeader.CustomerID = Customer.CustomerID
WHERE SalesOrderHeader.SubTotal + SalesOrderHeader.TaxAmt + SalesOrderHeader.Freight > 100000;


 -- Find the number of left racing socks ('Racing Socks, L') ordered by CompanyName 'Riding Cycles'

SELECT SUM(SalesOrderDetail.OrderQty) 
FROM SalesOrderDetail
JOIN Product
ON SalesOrderDetail.ProductID = Product.ProductID
JOIN SalesOrderHeader
ON SalesOrderDetail.SalesOrderID = SalesOrderHeader.SalesOrderID
JOIN Customer
ON SalesOrderHeader.CustomerID = Customer.CustomerID
WHERE Product.Name = 'Racing Socks, L' AND Customer.CompanyName = 'Riding Cycles';```

SQL 2ND Highest Salary

stuxnat — Mon, 28 Feb 2022 04:57:31 +0000

Here are several ways to find the second highest salary, given a table of employee salaries in SQL.

Example table:

employee table: +----+--------+ | id | salary | +----+--------+ | 1 | 100 | | 2 | 200 | | 3 | 300 | +----+--------+

POSSIBLE SOLUTIONS:
SOLUTION 1:
SELECT MAX(salary) as SecondHighestSalary FROM employee WHERE salary NOT IN (SELECT MAX(salary) FROM employee);

SOLUTION 2:

SELECT * FROM employee GROUP BY salary ORDER BY salary DESC LIMIT 1,1;

SOLUTION 3:
SELECT DISTINCT salary AS SecondHighestSalary FROM employee ORDER BY salary DESC LIMIT 1 OFFSET 1

CTE in SQL

stuxnat — Mon, 21 Feb 2022 01:17:30 +0000

One thing I like about SQL are Common Table Expressions (CTE). CTE were introduced to simplify SQL queries.

A CTE allows for the creation of a temporary result set, which can be treated just like a view. You can perform JOIN operations on them and the results can be filtered. This allows you to separately define queries instead of writing nested queries. This makes performing operations on datasets easier, especially when working with complex queries. This also helps to make the code more readable.

The syntax is as follows:

Define the CTE name and columns.

WITH cteName (column1, column2)  
AS

Define the CTE query.

WITH cteName (column1, column2)  
AS (  
    SELECT 1, 2 
   )

Define the outer query, which will reference the CTE name.

WITH cteName (column1, column2)  
AS (  
    SELECT 1, 2 
   ) 
SELECT * FROM cteName

Here is an example of a sqlzoo problem solved with CTE instead of nested queries.

8. For each customer show: Company name, contact name, number of calls where the number of calls is fewer than 5

with b as (
        SELECT  *
        FROM Caller
),


a as (
        SELECT
            Customer.Company_name,
            Customer.Contact_id,
            COUNT(*) AS nc
        FROM
            Customer
            JOIN
                Caller
                ON (Customer.Company_ref = Caller.Company_ref)
            JOIN
                Issue
                ON (Caller.Caller_id = Issue.Caller_id)
        GROUP BY
            Customer.Company_name,
            Customer.Contact_id
        HAVING
            COUNT(*) < 5
)

SELECT
    a.Company_name,
    b.first_name,
    b.last_name,
    a.nc
    from b join a ON (a.Contact_id = b.Caller_id);

Here is the rest of the series on GitHub.

Leetcode SQL: 175. Combine Two Tables

stuxnat — Mon, 14 Feb 2022 02:16:40 +0000

I decided to practice SQL today. This is a common question encountered during interviews.

The problem:

Table: Person

+-------------+---------+
| Column Name | Type    |
+-------------+---------+
| personId    | int     |
| lastName    | varchar |
| firstName   | varchar |
+-------------+---------+
personId is the primary key column for this table.
This table contains information about the ID of some persons and their first and last names.


Table: Address

+-------------+---------+
| Column Name | Type    |
+-------------+---------+
| addressId   | int     |
| personId    | int     |
| city        | varchar |
| state       | varchar |
+-------------+---------+
addressId is the primary key column for this table.
Each row of this table contains information about the city and state of one person with ID = PersonId.


Write an SQL query to report the first name, last name, city, and state of each person in the Person table. If the address of a personId is not present in the Address table, report null instead.

Return the result table in any order.

The query result format is in the following example.



Example 1:

Input: 
Person table:
+----------+----------+-----------+
| personId | lastName | firstName |
+----------+----------+-----------+
| 1        | Wang     | Allen     |
| 2        | Alice    | Bob       |
+----------+----------+-----------+
Address table:
+-----------+----------+---------------+------------+
| addressId | personId | city          | state      |
+-----------+----------+---------------+------------+
| 1         | 2        | New York City | New York   |
| 2         | 3        | Leetcode      | California |
+-----------+----------+---------------+------------+
Output: 
+-----------+----------+---------------+----------+
| firstName | lastName | city          | state    |
+-----------+----------+---------------+----------+
| Allen     | Wang     | Null          | Null     |
| Bob       | Alice    | New York City | New York |
+-----------+----------+---------------+----------+
Explanation: 
There is no address in the address table for the personId = 1 so we return null in their city and state.
addressId = 1 contains information about the address of personId = 2.

The solution:

To solve this problem, we can use a LEFT JOIN. This will returns all rows from the left table, and the matching rows from the right table. NULL will be returned if there are no matches.

The code:

select FirstName, LastName, City, State from Person p left join Address a on p.PersonId = a.PersonId;

JavaScript: Binary Search

stuxnat — Sun, 06 Feb 2022 22:02:42 +0000

Today I will be writing about how to solve the Binary Search algorithm problem on Leetcode.

The problem:

Given an array of integers nums which is sorted in ascending order, and an integer target, write a function to search target in nums. If target exists, then return its index. Otherwise, return -1.

You must write an algorithm with O(log n) runtime complexity.

var search = function(nums, target) { 
};

Step 1. Create 2 pointers, left and right to point to the beginning and end of the array.

var search = function(nums, target) {
    let left = 0; 
    let right = nums.length - 1 
};

Considering the given example array [-1,0,3,5,9,12], left would point to -1 and right would point to 12.

Step 2. Create while loop.
We will set left = right because they will eventually meet. We also want to find a middle element.

var search = function(nums, target) {
    //step 1. create 2 pointers, left and right to point to first and last elements. 
    let left = 0; 
    let right = nums.length - 1 

    while (left <= right){
        let middle = left + Math.floor((right - left) / 2)
    }
};

Step 3. Write if-statement to calculate middle element.
If the middle element === target, return middle.

var search = function(nums, target) {
    let left = 0; 
    let right = nums.length - 1 

    while (left <= right){
        let middle = left + Math.floor((right - left) / 2)

            if(nums[middle] === target){
                return middle 
            } else if (middle < target) {
                left = middle + 1  
            } else { 
                right = middle - 1
            }
    }
};

Step 4. Return -1 if element does not match target.



var search = function(nums, target) {
    let left = 0; 
    let right = nums.length - 1 

    while (left <= right){
        let middle = left + Math.floor((right - left) / 2)

            if(nums[middle] === target){
                return middle 
            } else if (middle < target) {
                left = middle + 1  
            } else { 
                right = middle - 1
            }
    }
return -1
};

JavaScript: Two Sum

stuxnat — Mon, 31 Jan 2022 01:11:11 +0000

Two Sum is another question frequently asked during interviews. There are two common ways to approach this problem. One way is considered "brute force" - it uses nested loops with a time complexity of O(n²). The second way is one of the preferred methods, because it has a time complexity of O(n).

The problem asks: given an array of numbers and a target sum, find the sum of two numbers in the array that is equal to the target sum. This is how to solve it:

Step 1. Start with an array of numbers and a target sum

const array = [1, 2, 3, 4, 5, 6, 7, 8, 9];
const sum = 15; 

const twoSum = (array, sum) => {

};

Step 2. Write a for-loop to iterate through the array.

const twoSum = (array, sum) => {
    const past = []

    for(let i = 0; i < array.length; i++){
        let curr = array[i]
        let needed = sum - array[i]
    }
};

Step 3. Write if-statement to search through array of past numbers


const twoSum = (array, sum) => {
    const past = []

    for(let i = 0; i < array.length; i++){
        let curr = array[i]
        let needed = sum - array[i]
        if(!past.includes(needed)){
            past.push(curr)
        } else {
            return [needed, curr];
        }
    }
    return "Not found!"; 
};

Step 4. Add counter that will increment by one each run
This will show how many runs it takes to return "Not Found!"

const array = [1, 2, 3, 4, 5, 6, 7, 8, 9];
const sum = 20;

const twoSum = (array, sum) => {
    const past = [];
    let count = 0;

    for (let i = 0; i < array.length; i++) {
        let curr = array[i]
        let needed = sum - array[i]
        if (!past.includes(needed)) {
            past.push(curr)
        } else {
            return [needed, curr];
        }
    count++; 
    }
    console.log(count)
    return "Not found!";
};

and that's it!

JavaScript Algorithm: Roman Numeral Converter

stuxnat — Sun, 23 Jan 2022 20:41:26 +0000

Hello! Today I will be writing about how to solve the Roman numeral converter algorithm.

When writing the solution, we have to remember key caveats in the Roman numeral system, like the number 4 being written as 5 minus 1, so IV.

Instead of writing many if statements, we can use a dictionary to solve this problem.

Step 1: Write dictionary.

const dict = {
    1: 'I',
    4: 'IV',
    5: 'V',
    9: 'IX',
    10: 'X',
    40: 'XL',
    50: 'L',
    90: 'XL',
    100: 'C',
    400: 'CD', 
    500: 'D',
    900: 'CM',
    1000: 'M',
}
function toRoman(num) {

}

Step 2. Write an Array of Numbers
Write an array containing the numbers in the dictionary - we will be looping through it. Because we will need to perform some calculations to convert the given number, we will be using subtraction to solve this problem. Starting from the largest value, we will subtract until we no longer can. For this reason, the numbers in the array are written from largest to smallest.

const numbers = [1000, 900, 500, 400, 100, 90, 50, 40, 10, 9, 5, 4, 1]

Step 3. Write a While-Loop
For this, we will set a variable to an empty string because we will want to append the Roman numeral equivalent to the output string.
If the number in the array is greater than num, then we will go to the following number (this is why the array is in reverse numerical order), compare that to num, and append to the output string whenever we were able to calculate a number.

function toRoman(num) {
    let output = '';
    let i = 0;

    while (num > 0) {
        const subtract = numbers[i];
        if (subtract > num) {
            i++;
        } else {
            num -= subtract;
            output += dict[subtract]

        }
    }
    return output
}

Your final code should look like this:

const numbers = [1000, 900, 500, 400, 100, 90, 50, 40, 10, 9, 5, 4, 1]

const dict = {
    1: 'I',
    4: 'IV',
    5: 'V',
    9: 'IX',
    10: 'X',
    40: 'XL',
    50: 'L',
    90: 'XL',
    100: 'C',
    400: 'CD',
    500: 'D',
    900: 'CM',
    1000: 'M',
}
function toRoman(num) {
    let output = '';
    let i = 0;

    while (num > 0) {
        const subtract = numbers[i];
        if (subtract > num) {
            i++;
        } else {
            num -= subtract;
            output += dict[subtract]

        }
    }
    return output
}