teleren/devto huggingface dataset:
Day 801 : Religion
Tags: hiphop, code, coding, lifelongdev
Published: 2023-08-09 22:36:36

_liner notes_:
- Professional : Pretty productive day. Got some clarity on some questions I had and finished updating what I could. Still waiting to hear back on some things. Got a chance to catch up with some team members on video call. Started to fill out a visa for my upcoming trip to India. They ask a lot of random questions I've never seen before. haha They asked about my religion. There were a couple of things I didn't know so I sent a message to my coworker who is also going. I booked my flight. Still need to get the hotel and finish up other trip details. Started cleaning up a demo application I was working on. Also got an old demo ported over to another platform and got it working so I'll start refactoring it to use a SDK so that I can test the stuff I've been updating in the docs to make sure it's all good to go.

- Personal : Went through some tracks for the radio show. Basically spent the rest of the night trying to fix an old Web Component I made where it relied on a third party, but it looks like the third party did something to break my component. I found the issue and tried a bunch of different workarounds, but it still won't work. I think I may need to take a whole different approach. We'll see.

![Looking into a wide variety of green trees and vegetation in Puerto Rico](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ho4g7x94s3pin7by9wmt.jpg)

Going to eat dinner then go through tracks for the radio show. After that, I'll probably continue working on my side project some more. I'm at the point now where I'll start working on the main functionality of the app. I'll see if I can get the login system working. I'm hoping it will be similar to how I have the admin login working. We'll see.

Have a great night!

peace piece
Dwane / conshus
https://dwane.io / https://HIPHOPandCODE.com
{% youtube _CI7755spqA %}
A space mini-game made in java swing
Published: 2023-08-09 22:22:25


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

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

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

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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6j2hu6wb8ojnfnl7ov9v.png)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4hknh9r08t4bzfc6mrod.png)
For more info visit my GitHub Profile....link in my DEV Profile!!!
Tracking email acquisition effectiveness with Google Analytics
Tags: marketing, development, google, analytics
Published: 2023-08-09 22:20:15

# Intro
Lately I built an app which could be interesting for others too. Therefore I decided to do some marketing and sent an email to possible users. 

As I am newbie in marketing I had to track its effectiveness to know what I should improve in the email. How is it possible to analyze user's behavior on emails? Well, with Google Analytics. ;)

First of all you need to add Google Analytics on your app. This depends on your tech stack, therefore I won't explain it and focus on the email.

# E-Mail
Let's assume this is our first draft and we want to send it to possible users.

```
Hi

Have you heard of Nice App? Well, now you have. ;)

You can do a lot of nice stuff with it. Check it out on nice-app.com.

Best regards

```

If the user clicks on the URL we will see some visitors. But we still don't know from where they came and which version of the email they received. Let's improve it!

## Google Analytics UTM Params

Google Analytics offers some URL parameters we can use. In my case I used the following four:

- utm_campaign = "launch"
- utm_medium = "email"
- utm_source = "acquisation"
- utm_content = "version_1"

## Improved version
We can use these params and add it to the URL. Google Analytics will automatically track them for us.

`?utm_source=acquisition&utm_medium=email&utm_campaign=launch&utm_content=version_1`

```
Hi

Have you heard of Nice App? Well, now you have. ;)

You can do a lot of nice stuff with it. Check it out on nice-app.com?utm_source=acquisition&utm_medium=email&utm_campaign=launch&utm_content=version_1.

Best regards

```

# Conclusion
By using these UTM params we enhanced the URL and are now able to answer the following questions:

- How many times has the URL been clicked in the email?
- Which e-mail have they received?
- Which version have they received?

Google Analytics is very powerful and by using it we are able to track the effectiveness of our emails.

Let me know your opinion!
React State vs. React Context: Deciding How to Manage State
Tags: react, webdev, javascript, programming
Published: 2023-08-09 21:56:39

👋 Introduction

When working with React, effectively handling state is vital for creating solid applications. React offers two main methods for managing state: using the built-in state and the Context API. Understanding when to use each method can make your development process smoother.

🚀 Getting Started

**React State**:
React's state is great for handling data that's specific to a single component. It's simple and lightweight, making it suitable for components that don't need to share data widely. You can modify state using the setState function. However, if you have deeply nested components or if multiple components require the same data, managing state this way can become a bit unwieldy.

**React Context**:
The Context API is designed to tackle the issue of passing data between components, bypassing the need for middlemen. It's useful when you want to share data globally, like user authentication states or themes. Context lets you provide data to components without manually passing props through every intermediary component. However, it might be overly complex for smaller projects.

🏁 Conclusion

To decide between React state and React Context, consider the scale of your project and how components need to share data. Use React state for local, component-specific data, and turn to React Context for larger projects with data that needs to be accessible across various components. Making the right choice will lead to a more organized and efficient React application.

Github: [@imevanc](https://github.com/imevanc)
Twitter: [@imevancc](https://twitter.com/imevancc)
Ampere Computing and Jack Aboutboul of AlmaLinux Talk Arm64
Tags: cloud, arm
Published: 2023-08-09 21:56:36

We just completed a lively conversation with Jack Aboutboul, board member, AlmaLinux Foundation. If you missed it live, catch us on-demand now to find out how the AlmaLinux Foundation came into existence, how it fits into the complex and ever evolving “CentOS” ecosystem, and why the project uses Ampere platforms to help produce their Arm64 builds.
Watch now (https://event.on24.com/wcc/r/4286095/400C35CC5ED60BE8E5DB715586872C4F)
Preventing the Layout Shift Caused by Scrollbars
Tags: html, css, webdev, tutorial
Published: 2023-08-09 21:47:46

## The Problem

When content overflows the page and the scrollbar shows up, the content is pushed/shifted to the left and vice versa, when the scrollbar disappears, the content is pushed/shifted to the right:

{% youtube 6Gq3lhwX-oM %}

This annoying layout shift can be prevented in multiple ways. In this article, I will go over them one by one:

## 1. Always showing the scrollbars

This is the easiest and ugliest solution.

```css
body {
  overflow-y: scroll;
}
```

## 2. The `scrollbar-gutter` property

The [`scrollbar-gutter`](https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-gutter) property has been made for this exact purpose. setting it to `stable` will preserve the space for the scrollbar and prevent the layout shift.

```css
html {
  scrollbar-gutter: stable;
}
```

BUT... it doesn't work in Safari and the scrollbar track will always be visible on your page which is not desirable.

## *. A little note about `100vw` and `100%`

Before continuing to the next points, it is necessary to understand the difference between `100vw` and `100%`:

- 100vw : Full width _**including**_ the scrollbar.
- 100% : Full width _**excluding**_ the scrollbar.

## 3. Shifting the content to the right

When the scrollbar is not showing, `100vw` and `100%` are equal, and when the scrollbar is showing, the difference between them is equal to the width of the scrollbar.

So if we shift the content to the right by the difference of `100vw` and `100%`, we can prevent the layout shift. To achieve it we can use `padding-left` on the parent/container element:

```css
.container {
  padding-left: calc(100vw - 100%);
}
```
[Source](https://stackoverflow.com/a/30293718/21092502)

## 4. Positioning inside a `100vw` width parent

Since scrollbars don't affect the `vw` unit, we can fix the problem by setting the width of the parent/container in the `vw` unit and centering/positioning our elements inside of it:

```css
.container {
  width: 100vw;
  /* elements inside won't be affected by scrollbars */
  display: flex;
  align-items: center;
  justify-content: center;
}
```
[Source](https://www.reddit.com/r/webdev/comments/svfsl3/comment/hxgmhft/)

---

The result after applying the 4th method:

{% youtube M-01kbWzC7g %}
How to create and use a custom middleware in laravel 10
Tags: laravel, middleware, php
Published: 2023-08-09 21:47:19

Creating a custom middleware in Laravel is a good way to add custom logic to the request-response cycle. Laravel itself use a number of middleware for specific tasks. Middleware can be used for tasks ranging from authentication, authorization, logging to tasks like adding data to request etc. etc. etc..

Below is a step-by-step guide showing how to create a middleware in laravel.

## Create the Middleware

To create a middleware use the following command in your terminal.

```
php artisan make:middleware CustomMiddleware
```

This command will create a new middleware file named CustomMiddleware.php in the app/Http/Middleware directory.

The file create will look something like this

```
<?php

namespace App\Http\Middleware;

use Closure;
use Illuminate\Http\Request;
use Symfony\Component\HttpFoundation\Response;

class CustomMiddleware
{
    /**
     * Handle an incoming request.
     *
     * @param Closure(Request): (Response) $next
     */
    public function handle(Request $request, Closure $next): Response
    {
        return $next($request);
    }
}
```

## Update the Middleware

The entire logic goes in the handle function. You can modify the request, perform checks, and take actions based on the conditions you define.

## Register the Middleware

To make your middleware functional, you need to register it in Laravel's middleware stack. Open the app/Http/Kernel.php file and locate the $middleware array. Add an entry for your custom middleware class. Make sure you use the complete file path of the middleware.

```
protected $middleware = [
    // Other middleware entries
    \App\Http\Middleware\CustomMiddleware::class,
];
```

> Note: if you will add the entry to $middleware array, your middleware will be applied on all the request through out the application. Including web and api. Add to $middlewareGroups.web for web requests only and $middlewareGroups.api for api requests only.

## Applying the Middleware

Now this middleware can be applied to routes or route groups.

```
Route::get('/example', 'ExampleController@index')->middleware('custom')->name('example');
```

In this example, the custom middleware will be applied to the example route.

For more details you can always refer to the Laravel documentation for the most up-to-date information and additional middleware options. [Laravel Middleware Documentation](https://laravel.com/docs/8.x/middleware)
Enhancing Performance of Database with GIN Indexes in PostgreSQLPro
Tags: apache, database, postgres, opensource
Published: 2023-08-09 21:25:48

## Introduction
PostgreSQL stands as a widely-used open-source database management system. It boasts a repertoire of indexing methods, including the Generalized Inverted Index (GIN). This article delves into the mechanics of GIN indexes and their substantial impact on optimizing database performance within the PostgresPro environment.

## GIN Indexes
GIN indexes function as a collection of inverted indexes to manage intricate data types like arrays, JSON, and full-text search.
In this construct, each index entry represents a key-value duo, with the key representing a term extracted from the indexed data, and the value acting as a reference to the corresponding row containing that term. GIN indexes exhibit their utility notably in queries encompassing multiple conditions, efficiently pinpointing rows that align with all stipulated query criteria.

## Working in PostgreSQLPro
In PostgresPro, the implementation of GIN indexes adopts a multi-tiered architecture, with each tier housing a collection of index entries logically organized into blocks. These blocks, characterized by a uniform size, contain entries sharing a common prefix. The traversal of the GIN index is facilitated by a specialized search algorithm, known as the Generalized Search Tree (GiST), employed by PostgresPro. This adept algorithm expedites the identification of pertinent blocks housing the index entries that align with the given criteria.

## Benefits
- Improved Query Performance
- Efficient support for array and JSON Data Types
- Flexibility

## Conclusion
GIN indexes represent a potent indexing strategy that holds the potential to markedly elevate the database performance within PostgresPro. They extend proficient backing for intricate data types such as arrays, JSON, and full-text search, culminating in enhanced query execution for intricate inquiries. Harnessing the capabilities of GIN indexes empowers users of PostgresPro to unlock amplified scalability, expedited query handling, and an overall uplift in database performance.
Data Types in Apache Age
Tags: apache, database, postgres, agedb
Published: 2023-08-09 21:05:49

In Cypher, the term "null" represents the absence or undefined nature of values. Its behavior sets it apart from other values in both comparisons and expressions. Notably, null is distinct from other data, as it does not equate to "null."

In the numerical realm of -9,223,372,036,854,775,808 to 9,223,372,036,854,775,807, the integer type embraces whole numbers.

The float type stands as an IEEE-754-compliant variable-precision numeric category, showcasing values like infinity and NaN that are distinct.

For precise calculations involving extensive digits, like financial amounts, the numeric type serves as the repository.

Three potential states exist for the boolean type: true, false, and the "unknown" represented by null.

Strings in Agtype support escape sequences such as t, n, and Unicode characters (uXXXX).

Navigate through composite data formats like lists and maps when working with Cypher.

Lists, encompassing multiple elements including null, are formed using square brackets.

Target specific list elements through square brackets and index numbers.

Maps are comprised of key-value pairs and constructed using curly brackets.

Access map components via key names and dot notation.

Incorporate nested lists, composite types, and maps within maps in a hierarchical manner.

Cypher identifies objects through distinct graph IDs (graphids) allocated to each.

The foundational constituents of a graph, known as vertices, can be assigned labels.

Vertices have both incoming and outgoing edges linked to them.

Edges, which require vertices to connect, are labeled pathways.

Vertices and edges can be associated with attribute values known as properties, identified by string names.
Improveing PostgreSQL Performance with SP- GiST
Tags: apache, database, agedb, postgres
Published: 2023-08-09 21:16:47

## Introduction
PostgreSQL, an influential open-source relational database management system, offers developers a plethora of advanced functionalities. What truly sets PostgreSQL apart is its capability to accommodate custom index types, a feature that empowers developers to design indexes finely tuned to distinct data types. This attribute contributes to the optimization of query performance. Within this article, we delve into SP-GiST, an exceptional custom index type within PostgreSQL, renowned for its potential to substantially elevate database performance.

## SP GiST
SP-GiST stands for Space-Partitioned Generalized Search Tree. This specialized index type is adept at effectively managing intricate data types, including geometric figures, network addresses, and comprehensive textual documents. SP-GiST serves as an extension of the widely-used GiST (Generalized Search Tree) index type, tailor-made for PostgreSQL's custom indexing capabilities.

## Working
SP-GiST operates on the principle of space partitioning, where the search space is segmented into distinct, non-overlapping regions, each designated with a label. These labels play a crucial role in enabling streamlined traversal of the search tree. Moreover, SP-GiST incorporates a well-designed split algorithm that focuses on the optimal division of partitions, aimed at minimizing search duration. The split algorithm factors in data distribution and partition size to ensure efficient results.

## Benefits
SP-GiST offers a host of advantages over alternative index types. To begin with, SP-GiST's ability to manage intricate data types renders it adaptable across a diverse array of use cases. Secondly, its exceptional customizability empowers developers to precisely tailor it according to their unique requirements. Lastly, SP-GiST stands out in terms of efficiency when handling high-dimensional data, outperforming other index types in such scenarios.

## Conclusion

An influential custom index type, SP-GiST, holds the potential to substantially amplify PostgreSQL's performance, particularly when managing intricate data types. Leveraging its methodology of space partitioning and employing a well-designed split algorithm, SP-GiST emerges as both efficient and exceptionally adaptable. Developers can harness the power of SP-GiST to meticulously optimize their PostgreSQL databases, ensuring peak performance across a diverse spectrum of applications.
The 54th Day of the 100 Days of Code Challenge
Published: 2023-08-09 21:15:47

Hey everyone! The inconsistency has been growing but I'm hoping to minimize it now. Have some more things on my mind to do now! Had some tasks I had to take care of.

Today, I explored Vocode a bit more and "recreated" (Vocode makes it super easy!) the personal assistant who makes restaurant reservations for you over the phone. I believe that it's a project with a lot of potential and that it could be turned into a functioning and beautiful app with enough effort! I'll also be starting to learn about hardware and low-level languages such as Assembly, as part of my other endeavors. So will be going really deep into the deep end! Excited and a bit scared, but I'm sure that I'll enjoy every second of it. That's it for today, happy coding everyone!
TypeScript and Go: Syntax Comparison and Contrast
Published: 2023-08-09 21:02:12



TypeScript and Go are two modern programming languages that have gained popularity for their simplicity, efficiency, and strong type systems. While they serve different purposes and have distinct features, comparing and contrasting their syntax can provide valuable insights into their strengths and use cases. In this article, we'll explore the syntax of TypeScript and Go, highlighting their similarities and differences.

## Type Annotations vs. Type Inference

One of the key differences between TypeScript and Go is how they handle type annotations. TypeScript uses static typing with explicit type annotations, allowing developers to specify the types of variables, function parameters, and return values.

```typescript
// TypeScript
function greet(name: string): string {
    return `Hello, ${name}!`;
}
```

In contrast, Go employs type inference, where the compiler deduces the variable types based on the assigned values.

```go
// Go
func greet(name string) string {
    return "Hello, " + name + "!"
}
```

## Null and Undefined

TypeScript distinguishes between `null` and `undefined`, reflecting the semantics of JavaScript.

```typescript
// TypeScript
let value: string | null = null;
```

Go, on the other hand, only has the `nil` value to represent the absence of a value.

```go
// Go
var value string
```

## Control Flow

Both languages support familiar control flow statements like `if`, `for`, and `switch`. However, TypeScript's syntax is influenced by JavaScript, while Go follows a more C-like syntax.

```typescript
// TypeScript
if (condition) {
    // ...
} else if (anotherCondition) {
    // ...
} else {
    // ...
}
```

```go
// Go
if condition {
    // ...
} else if anotherCondition {
    // ...
} else {
    // ...
}
```

## Functions

Functions in both languages are first-class citizens, but there are syntax differences.

```typescript
// TypeScript
function add(a: number, b: number): number {
    return a + b;
}
```

```go
// Go
func add(a, b int) int {
    return a + b
}
```

## Error Handling

TypeScript uses `try`, `catch`, and `throw` for error handling, similar to JavaScript.

```typescript
// TypeScript
try {
    // ...
} catch (error) {
    // ...
}
```

Go employs explicit error handling with returned error values.

```go
// Go
result, err := someFunction()
if err != nil {
    // ...
}
```

## Conclusion

While TypeScript and Go have distinct syntax styles influenced by their respective programming paradigms, both languages prioritize simplicity, readability, and expressiveness. TypeScript's focus on strong typing and its close relationship with JavaScript make it an excellent choice for frontend and full-stack web development. Go's emphasis on performance, concurrency, and simplicity makes it ideal for backend development and system programming.

By understanding the syntax similarities and differences between TypeScript and Go, developers can leverage the strengths of each language to build robust and efficient applications tailored to their specific requirements.
Created simple phone number compression functions.
Tags: codepen, compression, javascript
Published: 2023-08-09 20:50:53

---
title: Created simple phone number compression functions.
published: true
tags: codepen, compression, javascript
---

I have created a function that can shorten and restore strings consisting of phone numbers and digits without using a database.

No special libraries are used, so it can be applied to many languages.

I believe that it can be used for shortening social networking post IDs, for example.

{% codepen https://codepen.io/hidao80/pen/KKrLwNJ %}