teleren/devto huggingface dataset:
TypeScript Adventures: Prop Drilling Down the Rabbit Hole
Tags: vue, typescript, vite, bunjs
Published: 2024-05-16 18:40:59

Today we will describe how to effectively use Typescript with VueJS. I prefer modular code bases as they can follow some S.O.L.I.D principles: Single Responsibility, Open-Close Principle, and Interface (Type) Segregation. The task for to day is; Given a `Vue-Router` and associated routes, create an array of relevant properties for a `MainNavigation` component.

## [TLDR-Code example](https://github.com/wearypossum4770/vue-times-news/releases/tag/checkpoint-1bgh)  

## The Code

- Modal State Management - Using Pinia we will handle state for modals, pop-up, pop-overs, and message. Using state management will help keep snippets together based on their functionality. We will also neither have to `provide` nor `inject` the state as we would with `reactive` or `ref` objects. 
![Modal State](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/eohbtmjs1afnmj382h3i.png)



- Main Navigation - A presentation component which will house our top navigation bar. The navigation bar will have a hamburger menu that will toggle based on a media queries. Having a json file or a module can keep the associated data in a single location. As the project gets bigger, It can prevent duplication, improve maintainability (making source control history streamlined), and provides a single source of truth for navigation. We will add a bottom navigation page as well in the future. ![MainNavigation](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jru431en1pwncsc3o8ne.png)
- Main Application - In the main application `./src/App.vue` import and render the main navigation component. 
![Main App](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gsdtdbobsj1283wzuo1y.png)


- Route

1. Create `./src/router/routes.ts` which will contain an array of routes. These routes can have metadata which can be anything. The data can be attached to events, analytics, to protect routes, or refresh data from backend(database). The possibilities are endless, but we will cover that in a later topic. ![Routes Export](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x5k7323hw9kg5eagdytj.png)

2.Take the scaffolded `./src/router/index.ts` and break it into parts. Break the file into the following parts.![Router Index](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nj9bfgndq4qmcsracpnv.png)

## Refactoring/Stretch Goals

- In the `MainNavigation` module located at `src/components/navigation/main-navigation.vue` the `useModal` store can be destructured by using the `storeToRefs` provided by piñia [see docs](https://pinia.vuejs.org/core-concepts/#Destructuring-from-a-Store).

- Destructure route in `RouterLink` loop. This will clean up the syntax a bit and reduce the amount of code that is written. You can always destructure additional parameters as needed.
![Main Navigation Stretch](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p0pqmxprds1qtj9a2qw1.png)
JavaScript Design Patterns - Structural - Proxy
Tags: programming, javascript, beginners
Published: 2024-05-16 17:58:10

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

**Proxy** is a structural design pattern that lets us provide a substitute or placeholder for another object.

Imagine a scenario where we need to control access to an original object. This is where a proxy comes in. It acts as a gatekeeper, intercepting requests before they reach the original object. This interception allows us to perform additional actions, such as logging or caching, before the request is finally passed on to the original object.

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

A credit card is a proxy for a bank account, which is a proxy for a bundle of cash. Both implement the same interface: they can be used to make a payment.

In the below example, we are using this pattern to constrain the age of the **pilots**.

```js
class Plane {
  fly() {
    return 'flying';
  }
}

class PilotProxy {
  constructor(pilot) {
    this.pilot = pilot;
  }

  fly() {
    return this.pilot.age < 18 ? `too young to fly` : new Plane().fly();
  }
}

class Pilot {
  constructor(age) {
    this.age = age;
  }
}
```

👉 Use this pattern when an object is severely constrained and cannot live up to its responsibility.

---

I hope you found it helpful. Thanks for reading. 🙏

Let's get connected! You can find me on:
- **Medium:** https://medium.com/@nhannguyendevjs/
- **Dev**: https://dev.to/nhannguyendevjs/
- **Hashnode**: https://nhannguyen.hashnode.dev/
- **Linkedin:** https://www.linkedin.com/in/nhannguyendevjs/
- **X (formerly Twitter)**: https://twitter.com/nhannguyendevjs/
- **Buy Me a Coffee:** https://www.buymeacoffee.com/nhannguyendevjs
How to check if the character is alphanumeric in GO
Tags: go, howto, tutorial, programming
Published: 2024-05-16 17:50:11


## Understanding Characters in Go as Bytes

In Go, a string is equivalent to a slice of bytes.

---


## Solution: Checking if a Character is Alphanumeric

To determine whether a character is alphanumeric (i.e., a letter or a digit), you can create a function that checks the byte value of the character. 

Here’s an example implementation:

```go
package main

func isAlphaNumeric(c byte) bool {
	// Check if the byte value falls within the range of alphanumeric characters
	return (c >= 'a' && c <= 'z') || (c >= 'A' && c <= 'Z') || (c >= '0' && c <= '9')
}

func main() {

	isAlphaNumeric('a') // true

	isAlphaNumeric('2') // true (digits are also considered alphanumeric)

	isAlphaNumeric('#') // false
}

```

---

In the isAlphaNumeric function:
We check if the byte value c corresponds to a lowercase letter ('a' to 'z'), an uppercase letter ('A' to 'Z'), or a digit ('0' to '9').
If the condition is met, we return true; otherwise, we return false.

---

Let me know if you have an alternative solution or learned something from this post.
Japanese standard stock photos
Tags: design, image
Published: 2024-05-16 17:47:29

There are many free image sites around the world. 
Many sites require a fee or registration

You might be worried about security if you use a company PC. 
At first, you might think, 'I can't pay for just one free photo!'  
This is understandable.

this time, i introduce free and no registration images sites by genre that i usually used.

## classic in Japan

### Irasutoya
[https://www.irasutoya.com/](https://www.irasutoya.com/)

### PAKUTASO
[https://www.pakutaso.com/](https://www.pakutaso.com/)

These images are used in every aspect of our lives.
not just websites. 
For example, poster around town, presentation, YouTube, on the tv.
most Japanese people have seen these images.

both have a casual feel to them, so they may not be suitable for stylish designs.

## icon
### Google material symbols
[https://fonts.google.com/icons](https://fonts.google.com/icons)
Google provides a large collection of icons that you can use. 
These icons are designed for web use.
we can use these easily set cdn and input tags to source codes.

### icooon-mono
[https://icooon-mono.com/](https://icooon-mono.com/)
This is another popular option.
we can change icon color on site.
if you need simple ions, this site and google material symbols are all you need.

## illust
### soco-st
[https://tyoudoii-illust.com/](https://tyoudoii-illust.com/)
The images have a soft feel.
The illustrations allow you to change the theme color. 
so, this is highly versatile.

### tyoudoii-illust
[https://tyoudoii-illust.com/](https://tyoudoii-illust.com/)
'Tyoudoii' is a Japanese word.
It translates to 'just the right feel' in English.
There are many illustrations of humans on this site.

## photos
### O-DAN
[https://o-dan.net/](https://o-dan.net/)
O-DAN allows you to search for free stock photos across 36 sites.

## Devices from Design at Meta
[https://design.facebook.com/toolsandresources/](https://design.facebook.com/toolsandresources/)
This is a website from Meta.
This side has image of the digital devices such as smartphones and PCs.

Images are downloaded in ZIP format.
Therefore, you will need to download them using a PC.

## advice
While these are free image sites, some images require attribution and may not be usable for commercial purposes.
i recommend to check carefully each sites rules before use.
Бесплатная раздача токенов DICK и TON
Tags: airdrop
Published: 2024-05-16 17:40:44

В конце мая состоится очередная раздача токенов DICK и TON.

Это уже будет вторая раздача токенов от проекта DICK.

Первая раздача токенов (5000 TON) завершилась 5 мая.

Все, кто принимал участие в первой раздаче токенов, остались довольными, и я вхожу в это число, так как лично принимал участие в аирдропе первого сезона, и мне удалось получить такой результат

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

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

Сейчас полным ходом идёт второй сезон Аирдропа мемкоина DICK и ещё есть возможность, до конца мая, заполучить токены DICK и TON на свой кошелек.

**Как получить токены DICK и TON?**

1. Присоединяемся к [ТЕЛЕГРАМ БОТУ](https://t.me/addickted_bot?start=299461605)

2. Привязываем свой некастодиальный кошелек (Tonkeeper, MyTonWallet, TON Space и т.д.)

3. Выполняем все социальные задания во вкладке Задачи (подписки на Telegram, ретвиты и лайки в X и прочее)

4. Снимаем видео в TikTok / Shorts / Reels, делаем мемы, пишем статьи на тему мемкоина $DICK и подтверждаем ссылкой во вкладке Контент

5. Рисуем граффити, арты, картины, стикеры, всё что угодно творческое и подтверждаем фотографией или видео во вкладке Креативность

6. Приглашаем рефералов – за них тоже можно получить отчисления поинтов в вашу копилочку
PowerShell: Using parameters with Pester
Tags: powershell
Published: 2024-05-16 17:31:25

If you have ever worked with Pester, The PowerShell test framework, you may have noticed that using arguments in your Pester scripts is a little tricky. 
Passing arguments to a Pester script isn't very common for Unit testing, after all, the goal is to test functions, but if you want to write Pester scripts for other purposes, passing arguments could be a huge plus. 
However, it is not possible to pass arguments to a 
test with invoke-pester. But with Pester v5 it is now possible. 

First, you need to check which version you run on your system

```powershell
get-module -Name Pester -ListAvailable
```

If you do not have the latest version you should update the module

```powershell
Update-module -name Pester 
```

On Windows you may find that you run the built-in version of Windows PowerShell, in this case, you can’t use “Update-Module” You will need to do a side-by-side installation.

```powershell
Install-Module -Name Pester -Force -SkipPublisherCheck
```

After this required step, we can build the test file. 

```powershell
param (
    [string]
    $firstParameter,

    [int]
    $SecondParameter 
)

describe "demo parameter" {

    it "the First Parameter should be Pester" {
        $firstParameter | Should -be "Pester"
    }

    it "the Second Parameter should be 5" {
        $SecondParameter | Should -be 5
    }

}
```

To use parameters with the Pester file, just like any normal PowerShell file or function, you need to have a param section.  As you can see there are 2 parameters here firstParameter and secondParameter, these two parameters are used in the Describe section of the test file. 

You can even run the file with parameters, and it will work
 

```
.\beta.test.ps1 -firstParameter "pester" -SecondParameter 5
Starting discovery in 1 file.
Discovery found 2 tests in 8ms.
Running tests.
[+] C:\work\pester-parameter\beta.test.ps1 86ms (7ms|73ms)
Tests completed in 92ms
Tests Passed: 2, Failed: 0, Skipped: 0 NotRun: 0
```

But there is no way to use these parameters with other Pester options using invoke-pester.

To use parameters with the invoke-pester cmdlet you need to create a containerInfo object. This object includes the path of Pester test files and a dictionary of parameters/values that will be passed during the execution of these files.

```powershell
$pesterContainer = New-PesterContainer -Path “.\beta.test.ps1” -Data @{ firstParameter = "pester"; secondParameter = 5 }
Invoke-Pester -Container $pesterContainer
```

Using a containerInfo object is very useful when you aren’t conducting unit testing. In my daily work, I frequently test the result of deployment in a Cloud environment. In this case, you need parameters, because all deployments are different. But it can be also useful for testing functions that depend on an external environment. It can also help to reuse your pester tests.
Global Hackathon Links
Tags: programming, hackathon, beginners, discuss
Published: 2024-05-16 17:18:24

🚨 Attention Tech Enthusiasts!

Are you passionate about innovation and problem-solving? 
Do you thrive in fast-paced, collaborative environments? Look no further! 

Here's a curated list of hackathon participation websites where you can unleash your creativity, develop new skills, and make a real impact

https://github.com/raghavtwenty/global-hackathon-links

Happy hacking! 💻✨
Colecciones dinámicas con jmoordbcore y MongoDB solo para embebido
Published: 2024-05-16 17:18:11

A partir de Jmoordbcore 1.3.0 es posible generar de manera dinámica colecciones en MongoDB.

No aplica para entidades que utilizan referencias.


## Sin especificar el nombre de base de datos o colección, se  toma la información del archivo microprofile-config.properties.

```

#-- Database
mongodb.database=accreditation
mongodb.database1=sft
mongodb.database2=practicadb

```


En el controller se realiza. 


```java

@Path("icono")
@RolesAllowed({"admin"})
public class IconoController {

    @Inject
    IconoRepository iconoRepository;


 @POST
 
 @RolesAllowed({"admin"})
 public Response save(
            @RequestBody(description = "Crea un nuevo icono.", content = @Content(mediaType = "application/json", schema = @Schema(implementation = Icono.class))) Icono icono) {
   Optional<Icono> iconoOptional = iconoRepository.save(icono);
        if (iconoOptional.isPresent()) {
            saveHistory(icono);
            return Response.status(201).entity(iconoOptional.get()).build();
        } else {
            return Response.status(400).entity("Error " + iconoRepository.getJmoordbException().getLocalizedMessage()).build();
        }
    }

}

```


## Agregando un nombre de base de datos y colección

Solo tiene que utilizar el método **setDynamicCollection()**.


```java

@Path("icono")
@RolesAllowed({"admin"})
public class IconoController {

   @Inject
   IconoRepository iconoRepository;


 @POST
 
 @RolesAllowed({"admin"})
 public Response save(
            @RequestBody(description = "Crea un nuevo icono.", content = @Content(mediaType = "application/json", schema = @Schema(implementation = Icono.class))) Icono icono) {
    iconoRepository.setDynamicDatabase("database2");
    iconoRepository.setDynamicCollection("icono_2");
    Optional<Icono> iconoOptional = iconoRepository.save(icono);
        if (iconoOptional.isPresent()) {
            saveHistory(icono);
            return Response.status(201).entity(iconoOptional.get()).build();
        } else {
            return Response.status(400).entity("Error " + iconoRepository.getJmoordbException().getLocalizedMessage()).build();
        }
    }

}

```
Guía de Precios de Almacenamiento en la Nube: Comparación de las Principales Empresas
Published: 2024-05-16 17:13:40

El almacenamiento en la nube ha revolucionado la forma en que las empresas gestionan sus datos, ofreciendo una solución flexible y escalable para almacenar información de manera segura. Sin embargo, al considerar un proveedor de almacenamiento en la nube, el costo es un factor crucial a tener en cuenta. En esta guía, analizaremos los precios de almacenamiento en la nube de las principales empresas del mercado para ayudarte a tomar una decisión informada.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3pm2g4b53emmpqauxbzg.jpg)

Amazon Web Services (AWS)

Amazon Web Services es uno de los proveedores de almacenamiento en la nube más grandes y conocidos del mundo. Ofrece una variedad de opciones de almacenamiento, incluyendo Amazon S3 y Amazon Glacier. Los precios de AWS varían según la región, el tipo de almacenamiento y la cantidad de datos almacenados. Por ejemplo, el precio estándar de Amazon S3 es de $0.023 por GB al mes.

Microsoft Azure

Microsoft Azure es otra opción popular para el almacenamiento en la nube, con servicios como Azure Blob Storage y Azure Files. Los precios de Azure también varían según la ubicación y el tipo de almacenamiento. Por ejemplo, el costo estándar de almacenamiento en bloque de Azure es de $0.0184 por GB al mes.

Google Cloud Platform (GCP)

Google Cloud Platform ofrece servicios de almacenamiento en la nube como Google Cloud Storage. Sus precios se basan en la ubicación, la clase de almacenamiento y la cantidad de datos almacenados. Por ejemplo, el precio estándar de almacenamiento en la clase "Nearline" de GCP es de $0.010 per GB al mes.

IBM Cloud

IBM Cloud proporciona servicios de almacenamiento en la nube como IBM Cloud Object Storage. Sus precios varían según la ubicación, la clase de almacenamiento y la cantidad de datos almacenados. Por ejemplo, el precio estándar de almacenamiento en la capa "Standard" de IBM Cloud Object Storage es de $0.02 por GB al mes.

Comparación y Conclusiones

Al comparar los precios de almacenamiento en la nube de las principales empresas del mercado, es importante considerar no solo el costo por GB, sino también otros factores como la disponibilidad regional, la seguridad y la facilidad de uso. Cada empresa tiene sus propias fortalezas y debilidades en términos de características y [almacenamiento en la nube precios](https://ecuatecnology.com/almacenamiento-en-la-nube-got-backup/).

Antes de tomar una decisión, te recomendamos evaluar tus necesidades específicas de almacenamiento y comparar las ofertas de varios proveedores. Esto te ayudará a encontrar la solución de almacenamiento en la nube que mejor se adapte a tu presupuesto y requisitos operativos.

En resumen, el almacenamiento en la nube ofrece una solución rentable y flexible para las necesidades de almacenamiento de datos de tu empresa. Al comparar los precios de las principales empresas del mercado, puedes encontrar una opción que se ajuste a tus necesidades y presupuesto.
Learning AWS Day by Day — Day 66 — AWS CodePipeline
Tags: aws, cloud, cloudcomputing, beginners
Published: 2024-05-16 16:57:16

Exploring AWS !!

Day 66

AWS CodePipeline

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

AWS has developer tools like AWS CodeCommit, CodeBuild, CodeDeploy, CloudShell, and many more. Today, we will be covering AWS CodePipeline.

CodePipeline is a continuous delivery service, which helps you in building and automating the steps required to release your software. The process involves modelling and automating the steps when deploying the software or application. The whole pipeline can be maintained and automated at every step continuously.

CI/CD — Continuous Integration and Continuous Delivery
Every software that goes through the pipeline is built, tested, automated and delivered or deployed to the production. There is a manual intervention required before the final push, it might be a person, business rule or an automated test, this is because the product before directly getting deployed to production shall be checked again the final time, as not all changes need to be deployed directly.
Continuous integration is where the team uses a version control mechanism like Git, and keep integrating their work to a final destination like main or master branch. Each change made is built and verified, so that any integration errors can be noticed quickly and get resolved. Continuous integration mainly focuses on building and testing your code, whereas delivery focuses entirely on the release and deployment process of your application.

Features:
With CodePipeline you can do following:
Automate your releases from end to end by building, testing an deploying the application. The changes can be controlled from moving through pipeline by adding manual interventions for a push.
You can define each and every stage according to you criteria and requirements.
The delivery can be speedy using automated process and the quality can be maintained through testing.
You can also use supported third party tools for building and deploying the application.
The progress of your pipeline can be viewed instantly, the failure reasons, and how many stages are pending as well as how many are yet to be completed, everything is visible. You can view details about the source revisions used in the latest pipeline execution in each stage, and manually rerun any pipeline.

CodePipeline types:
V1 type pipelines having JSON structure containing standard pipeline, stage, and action-level parameters.
V2 type pipelines having the structure just like V1 type, along with additional parameters for release safety and trigger configuration.
Video Tutorial - How To Run Llama 3 locally with Ollama and OpenWebUI!
Tags: tutorial, ai, beginners, productivity
Published: 2024-05-16 16:52:07

{% embed https://youtu.be/GT-Fwg124-I %}

Learn how to run LLaMA 3 locally on your computer using Ollama and Open WebUI! In this tutorial, we'll take you through a step-by-step guide on how to install and set up Ollama, and demonstrate the power of LLaMA 3 in action. Whether you're a developer, AI enthusiast, or just curious about the possibilities of local AI, this video is for you. So sit back, relax, and let's dive into the world of LLaMA 3, Ollama, and OpenWeb UI!

### Links
- Recommended [Docker Tutorial](https://youtu.be/eGz9DS-aIeY?feature=shared)
- [Ollama](https://ollama.com)
- [Open WebUI](https://docs.openwebui.com)
- [Open WebUI Repository](https://openwebui.com)

### Follow TimeSurge Labs!
- [Twitter/X](https://twitter.com/TimeSurgeLabs)
- [LinkedIn](https://www.linkedin.com/company/timesurge-labs)
- [Blog](https://dev.to/timesurgelabs)

### AI Disclosure
- Thumbnail Background by [OpenAI Dalle 3](https://openai.com/index/dall-e-3/).
- Title and Description partially AI generated by Llama 3 on [GroqCloud](https://console.groq.com/).
- All music generated by [Suno](https://suno.com).
- Video filmed and edited by [Chandler](https://twitter.com/Chand1012Dev) (NOT AI).

### Music Links
- [Putting In The Hours](https://suno.com/song/73419c49-e237-47eb-8b11-c644e0384e8c)
- [The Chase Scene](https://suno.com/song/4fd4615d-43e1-45e8-bb7a-32cb10848cab)
- [TimeSurge Labs Outro](https://suno.com/song/e213b6a8-6785-409d-a869-cdd60f66d72e)