teleren/devto huggingface dataset:
Security sinks in Ruby on Rails Part 1 - XSS
Tags: webdev, security, rails, xss
Published: 2023-04-06 20:20:37

In Security, there are such concepts as **sinks** and **sources**. Sinks are dangerous functions in the code, whereas sources are arguments of the sinks.

![Source and sink](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wdpb89gs0k515ujze4a0.png)

In this case, there is a dangerous function `eval` and a source is `params[:name]`.

In code reviews, I tend to search for such functions and analyze what can be their argument/source of data. This helps me identify potential vulnerabilities before they reach production.

I want to go with you through some basic sinks, that should turn on the yellow light.

## Cross Site Scripting(XSS)

Let's go through Cross Site Scripting first. XSS is a vulnerability that allows execution scripts in browsers with malicious sources. More about them can be read [here](https://www.synopsys.com/glossary/what-is-cross-site-scripting.html). The most popular ways of allowing this security issue are methods `raw` and `html_safe`. By default in Rails, everything that is being returned by `<%= %>` is being interpreted as a text, but when you use those methods, you tell that it can be interpreted as HTML.

For example, on code review you see a line in a `.erb` file:
```
raw t('user_name', name: user.name)
```
or

```
t('user_name', name: user.name).html_safe
```

```
# config/locales/en.yml
en:
  user_name: "<p>User name is %{name}</p>"
```

This is I would say common case because it's from my experience often that we want to introduce HTML into translation. It might result in XSS. `user.name` is a source and it shouldn't be user input. If it is, a malicious user might define it for example `<script>alert(1)</script>` and the alert pops at the time of rendering the erb file.

In general, I would avoid `html_safe` or `raw` methods, unless they are obligatory.

Sometimes you might say that you know that it is XSS, but it is Self-XSS(the person who can be affected by XSS is the person who writes the script). I don't encourage you to ignore such cases, because in the future there might be a different business logic, which would result in Self-XSS becoming XSS.

When it comes to XSS, it's very important to mention CSP - a policy that is a last resort against XSS. It's rather simple to implement it in Rails, docs you can find [here](https://api.rubyonrails.org/classes/ActionDispatch/ContentSecurityPolicy.html), and more about the policy itself you can find [here](https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP).

## To be continued
Lerp
Tags: javascript, animation
Published: 2023-04-09 11:08:33

---
title: Lerp
published: true
date: 2023-04-06 20:12:00 UTC
tags: javascript, animation
canonical_url: https://rachsmith.com/lerp/
---

When [CodePen blogs](https://blog.codepen.io/2020/08/28/posts-sunset/) were a thing I added a bunch of posts to mine. Some of the content still holds up in 2023 so I decided to repost my favourites on this site.

Today I want to talk about a little animation trick that I use all the time called  **lerp**. Lerp is the nickname for Linear Interpolation between two points. It's a fairly simple effect to implement but can really improve the look of your animations if you're moving an object from a point A to point B.

## How does it work?

Given you have a current position for an object, and a position you want to move that object towards - you can linearly interpolate to a percentage of the distance between those points, and update the position by that amount on each frame.

```
// to run on each frame
function lerp(position, targetPosition) {
// update position by 20% of the distance between position and target position
  position.x += (targetPosition.x - position.x)*0.2;
  position.y += (targetPosition.y - position.y)*0.2;
}

```

By doing this, the amount the object moves becomes smaller as the distance between position and target decreases. This means the object will slow down as it gets closer to its target, creating a nice easing effect.

## Lerp in action - some examples

Here is an example of a ball following the user's mouse or touch. If we make the ball move to the place the mouse is as soon as it moves, the ball movement can be very fast and/or disjointed. We might also be able to see separate "ball frames" if we move our mouse really fast.

{% codepen https://codepen.io/rachsmith/pen/avXmyV %}

Here's the same demo, except this time we're using lerp. Instead of moving the ball right to the mouse position, we'll move it 10% of the distance towards that position on each frame.

{% codepen https://codepen.io/rachsmith/pen/yYZapV %}

Notice the ball movement is a lot smoother and an overall more pleasing effect.

Here's another example of using lerp. This time we've got a scrolling indicator that updates as you scroll down the "page".

{% codepen https://codepen.io/rachsmith/pen/rOPMvz %}

{% codepen https://codepen.io/rachsmith/pen/epxdxe %}

If we add lerp to this example we're lerping the indicator towards the scroll percentage instead of pointing it at the actual position - this smoothes out the movement of the indicator.

So, the lerp "trick" is a great tool to have up our web animation sleeves to combat linear or jagged movement.
Building Resilient Software Architecture: Lessons Learned from the Domino Game
Tags: programming, architecture, reliability
Published: 2023-04-06 19:12:07

Software development projects are complex, with many moving parts that must work together seamlessly to achieve the desired outcome. When a single weak point or flaw appears in the software architecture, the entire project can be derailed, much like a single domino piece missing from a chain reaction can ruin the entire game.

In a game of dominoes, players must carefully arrange the tiles in a pattern, with each piece dependent on the one before it. One missing tile can cause the entire chain to break down, rendering the game unplayable. Similarly, in software development, every component of the architecture is dependent on the others, and a flaw in any one of them can cause the entire system to fail.

For example, a single security vulnerability in a web application can be exploited to gain access to sensitive data or to bring the entire system down. A weak link in a data processing pipeline can cause errors to propagate through the system, leading to incorrect results or a complete failure of the process. In a distributed system, a single node that goes offline or fails to respond can cause a cascading failure that brings the entire system down.

Just as a missing domino tile can be hard to spot until it's too late, weak points in software architecture can be difficult to detect early on. They may only become apparent when the system is under stress or when a particular scenario is encountered that exposes the flaw. However, unlike in a game of dominoes where the consequences are limited to that one game, the consequences of a software architecture flaw can be far-reaching and costly.

To avoid the risk of a single weak point ruining an entire software project, developers must take a proactive approach to identifying and addressing vulnerabilities in the architecture. This requires a thorough understanding of the system's requirements, potential failure modes, and areas of risk, as well as ongoing monitoring and testing to ensure that the system remains secure and stable over time.

In conclusion, a single domino piece missing can ruin a game, and a single weak point in a software architecture can ruin an entire software project. Both scenarios emphasize the importance of attention to detail, careful planning, and ongoing monitoring to ensure that all components are working together seamlessly. By taking a proactive approach to architecture design and testing, developers can minimize the risk of catastrophic failure and build systems that are reliable, secure, and resilient.
Why You Should Use Tools For Website Designing
Tags: webdev, design, web, tooling
Published: 2023-04-06 19:12:01

## Tools for web design and templates can be very useful for a number of reasons:

- Time-saving: 
Using pre-made templates and design tools can save you a lot of time when creating a website. Rather than starting from scratch, you can use existing designs as a starting point and make adjustments as needed.

- Consistency: 
Using templates can help ensure that your website has a consistent look and feel throughout, which can be important for branding and user experience.

- User-friendly: 
Many web design tools and templates are designed to be user-friendly, even for those without much design experience. This can make it easier for people to create their own websites without needing to hire a professional designer.

- Professional-looking: 
By using high-quality templates and design tools, you can create a professional-looking website without needing to spend a lot of money on design services.

- Responsive design: 
Many templates and design tools are designed with responsive design in mind, which means that they are optimized for viewing on different screen sizes, including mobile devices.

Overall, [tools for web design](https://www.couponluxury.com/stores/creative-market) and [templates](https://www.couponluxury.com/stores/nicepage) can make the web design process easier, faster, and more accessible for a wider range of people.
PrincetonGPT: A Simple Chatbot Built with JavaScript
Published: 2023-04-06 19:01:04


Chatbots have become increasingly popular in recent years, and for good reason. They offer a convenient and efficient way to interact with users, and can be used in a variety of applications, from customer service to language learning.

PrincetonGPT is a simple chatbot built with JavaScript, created by Waylon Wickline, Jenson Thottathil, and Gurkuran Singh. Unlike many chatbots that use sophisticated natural language processing algorithms, PrincetonGPT uses a set of responses saved in a db.json file to generate its responses.

The chatbot is designed to respond to user questions with a randomly selected response from the db.json file. The user's name is also stored in local storage so that it can be used to personalize the responses.

Overall, PrincetonGPT is a fun and useful tool that demonstrates the power of chatbots and the potential for building sophisticated applications with just a few lines of code.
How To Enhance Your Web Development Process with Stackbit and Storybook
Tags: webdev, programming, javascript, nextjs
Published: 2023-04-06 18:58:05

1. Ensure that you have installed Stackbit. Stackbit is a visual editor that enables content editors to build pages and update content directly on the site, without having to rely on developers. Allowing developers to focus on building features and working on larger tasks. Follow this [step-by-step guide ](https://docs.stackbit.com/#getting-started)for how to simply add in Stackbit locally to a project. 

2. Install the [stackbit/storybook-addon](https://www.npmjs.com/package/@stackbit/storybook-addon)for Storybook. This plugin will allow you to create Stackbit models and presets based on your existing components and stories. These generated models can serve as a starting point for setting up model definitions and presets in a new project.

3. Once the add-on is installed, return to your Storybook project. You should now see a Stackbit tab that will allow you to generate new models based on your components and stories.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/or6h1i1uj7he0olz24h7.png)

4.Click on the Stackbit tab and follow the prompts to download your newly generated models. These models can then be used to set up Stackbit content editing within your Storybook project.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/s1vp5kxijw9rtthvfh1y.gif)

By following these simple steps, you can easily set up Stackbit with Storybook, providing your content editors with the ability to update site content without developer intervention, while simultaneously enabling your developers to build more efficiently.

Here is a video diving deep into each step using a Next.js project. Enjoy! 

{% youtube z4I4V8lmXPc %}
Onboarding Month as a Software Engineering Intern: Lessons Learned and Goals Ahead
Tags: postgres, apacheage, software, internship
Published: 2023-04-06 18:53:40

## Introduction
In my first month at Bitnine intership, I could learn about how PostgreSQL works in the backend. I was introduced to various concepts such as relational database management systems, transaction processing, and query optimization. This knowledge was invaluable in helping me understand how to design and develop software applications that interact with databases.

## Projects
By using Apache AGE and PostgreSQL in my projects, I was able to enhance my writing and programming skills. Currently, I am focused on reading pull requests to gain a deeper understanding of the process of committing changes and the importance of proper code documentation. 
- MY UEFA PROJECT

![UEFA PROJECT](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5cl5850yfkcq0dfsbhbd.png)

You can reach the article by the following link: [UEFA project](https://dev.to/m4rcxs/building-a-uefa-champions-league-app-with-apache-age-graph-database-5hfn)

- SOCIAL NETWORK FOR DEVS

![DEVS NETWORK](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7w4n8t0qhjc0h1mz5fsq.png)

You can read this by the following link: [DEVS Social](https://dev.to/m4rcxs/collaborate-to-innovate-how-a-social-network-can-help-you-find-your-dream-pair-programming-team-cbf)

## FUTURE
I'm currently working on the AGE Viewer Desktop project and learning more about the Go language. As Go is a new language for me, I'm practicing and working hard to improve my programming skills. While it's challenging to learn and grow my knowledge, I'm determined to develop my skills so that I can contribute to this project effectively and continue learning every day.

![GO LANG](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4uwiu7r4i633qrbg2rd8.png)




- **References**: 

- [AGE VIEWER](https://github.com/apache/age/tree/ageviewer_go)
- [APACHE AGE](https://github.com/apache/age/)
FREE AWS Cloud Project Bootcamp Week 6 Part 4
Tags: aws, cloud, awscommunity, 100daysofcloud
Published: 2023-04-06 18:51:32

[96/100] #100DaysOfCloud Today, I did a part of the Week 6 of the FREE AWS Cloud Project Bootcamp by Andrew Brown.

Here's what was left that I completed:
- Create Task and Execution Roles for Task Definition.
    - Create CruddurServiceExecutionRole role and inline CruddurServiceExecutionPolicy policy.
    - Create CruddurTaskRole role.
- Create Security group for Cruddur services on ECS.
- Create Task definition.

[GitHub](https://github.com/aaditunni/100DaysOfCloud/blob/main/Journey/096/Readme.md)

You can watch the Bootcamp through this YouTube playlist : [FREE AWS Cloud Project Bootcamp playlist](https://youtube.com/playlist?list=PLBfufR7vyJJ7k25byhRXJldB5AiwgNnWv)
Understanding the Difference Between == and === in JavaScript
Published: 2023-04-06 18:27:21

JavaScript provides two comparison operators, namely '==' and '==='. Both are used to compare two values, but they work differently.

## Double Equals (==) Operator
It is also known as loose equality operator. It compares two operands for equality after converting them to a common type.

**For Example** - If the two operands are of different types, then the JavaScript engine will convert one of the operands to the same type as the other operand.

```js
10 == '10'     // output=========> true 

//Reason - because the number 5 is converted to the string 5
```

 
## Triple Equals (===) Operator
It is also known as strict equality operator. It compares two operands for equality without converting them to a common type.

**For Example** - If the two operands are of different types, then it will return false.

```js
10 == '10'     // output=========> false 

//Reason - because both the operands are of different data types
```
It is generally recommended to use the triple equal operator whenever possible to avoid unexpected behavior due to type coercion.

Thank you for reading!!
ResponseHunt - Scavenger hunt for programmers ⛏
Tags: programming, webdev, javascript, frontend
Published: 2023-04-06 18:18:41

[ResponseHunt.com](https://www.responsehunt.com) is a website in which you use your programming and general problem-solving skills to crack the clues and move on to the next hints. 

Once you have cracked all the hints, you can enter the `/golden` endpoint with a key parameter that you find from the other endpoints.

You permanently get featured in the Hall of Fame for the current version and receive a permanent golden card issued in your name with your rank!

I have designed it so that the key is generated based on the IP address of the client, so the key is different for each system. Let's not leak and ruin the game!

It is basically a website built with SvelteKit with different endpoints that require some level of computer science knowledge especially in web development to navigate

I hope you guys enjoy playing it, please share your experience in the comments as well! Since this was the first time, I have made the hints quite easy to crack, but upcoming versions will get progressively harder! 

In future, I would like to partner with companies and offer cash prizes, coupons, vouchers and more! 🌟

If this idea sounds interesting to you, you can checkout the version 1 contest in https://www.responsehunt.com

Follow me to get updates on the next version releases, other projects and tech stuff in general: 
[Twitter](https://twitter.com/keerthivasansa_)
Alpine JS, Why its awesome, and how to apply it awesomeness.
Published: 2023-04-06 18:02:02

<!-- wp:paragraph -->
<p>AlpineJS is a minimalist javascript library with a goal of being simple, lightweight, and powerful. Built with only 15 attributes, 6 properties, and 2 methods, it definitely lives up the minimal lightweight approach. The ability to rapidly build out components on the fly, refactor and reuse components, and install plugins for additional functionality does make an argument for how powerful this small library really is.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>AlpineJS isn’t a heavy-weight hitter. It’s a minimalist library. It isn’t going to be best for every use case, but it is best for situations you probably face in your own development projects from time to time. I’ve always found that AlpineJS excels in two things; rapid development and refactoring for performance. This is always something I need done when working through landing pages, light weight dashboards, and form validation. Simply put, AlpineJS is best used when the performance challenge is often less about how your render the DOM and more about when you load your assets.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>AlpineJS’s minimal nature does have one drawback; the inlining bloat. Similar to tailwindcss, AlpineJS lets you code entirely inline, which can lead to bloat and performance issues. This is why I defined a clear process for how I work with AlpineJS to work fast and stay performant. Fortunately, it’s really easy to follow, and only involves two steps. First, rapidly develop your scripts. Get it working and tested. Second, extract your components. AlpineJS allows you to inline all of your scripts but also allows you to extract them into reusable components. This not only reduces the inline bloat but remove repeated code. This process as a whole is excellent because it lets me rapidly get the page working as intended and then easily increase the performance.</p>
<!-- /wp:paragraph -->
Web Design Glory
Tags: webdev, javascript, beginners, programming
Published: 2023-04-06 17:59:31

Creating a website through coding can be a complex process that requires a good understanding of HTML, CSS, and JavaScript, as well as web development tools and technologies. Here are the basic steps you can follow to create a website from scratch:

    Plan your website: Before starting to code, you should have a clear idea of what you want your website to look like, what features it should have, and who your target audience is. You can create a basic wireframe or mockup of your website to help you plan its layout and design.

    Choose a text editor: A text editor is a software tool used to write and edit code. There are many free and paid text editors available, such as Sublime Text, Visual Studio Code, and Atom. Choose one that suits your needs and preferences.

    Create an HTML file: HTML is the markup language used to create the structure and content of web pages. Open your text editor and create a new file with the .html extension. Add the basic structure of an HTML document, including the <!DOCTYPE> declaration, the <html> element, the <head> element, and the <body> element.

    Add content to your website: Within the <body> element, you can add various HTML elements such as headings, paragraphs, images, and links to create the content of your website.

    Style your website with CSS: CSS is the language used to add style and layout to web pages. Create a new file with the .css extension and link it to your HTML file using the <link> element. Add CSS rules to style your HTML elements, such as changing their font size, color, and position.

    Add interactivity with JavaScript: JavaScript is a programming language used to add dynamic and interactive elements to web pages. Create a new file with the .js extension and link it to your HTML file using the <script> element. Add JavaScript code to create functions and events that respond to user actions, such as clicking a button or submitting a form.

    Test and debug your website: Open your HTML file in a web browser to see how it looks and behaves. Use the browser's developer tools to inspect and debug your code, and make any necessary changes.

    Host your website: To make your website accessible on the internet, you need to host it on a web server. There are many web hosting services available, such as Amazon Web Services, Google Cloud Platform, and Bluehost. Choose a hosting service that suits your needs and budget, and follow their instructions to upload your HTML, CSS, and JavaScript files to their server.

This is just a basic overview of the steps involved in creating a website through coding. There are many resources available online to help you learn HTML, CSS, and JavaScript, as well as web development frameworks and tools that can make the process easier and more efficient.