teleren/devto huggingface dataset:
I will solo create a worth playing game in 7 days because I think I can (DAY1)
Tags: unity3d, gamedev, challenge
Published: 2023-04-15 17:36:29



I already created the framework (in 6 month). I called it ET engine that I created base on Zenject. Now all I have to do is pour all my idea and create a game fast as I can. People gonna love this game, I hope so hehe. I gonna be famous and I will not lonely anymore :'(. 

Why I have to make it haste. Well, 6 month is a long time. I need to know if I can trust my framework, if it not work I have to stop working on it. We will know after seven day. 

Please god, give me strength this time.

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


DAY 2: teach my pawns how to build :< ... this tougher than I thought, I wonder if I can make it in time. 
Common guys, learn faster, the zombies waves are coming!!!

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vm6prlav4b984rb983fm.png)
DAY 3: teach my pawns how to craft!!! I have to remade the whole item system for this to work. x.x

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



#tonicat #nekoniiistudio #projectZomtopia #projectZomboard #unity #developer #Zomtopia
How to get started on latest NextJS
Tags: nextjs
Published: 2023-04-15 17:27:03

As of this writing, the docs are available here: https://beta.nextjs.org/docs/installation.

Setup:

You need Node v16.8.0 onwards. So using [nvm](https://github.com/nvm-sh/nvm) make sure you are on a recent enough Node version.

One way to do this is to have a file called ~/.nvmrc with content (say) `v16.13.0`. Now anywhere in your shell you can do `nvm use` to switch to this "default" version.

With the prerequisites out of the way, you can create a new app with this command: `npx create-next-app@latest --experimental-app`.

In the new setup, you can see `app/api/hello/route.ts`. When you run `npm run dev` you can visit http://localhost:3000/api/hello to see this API route in action.

The `app` directory also contains `layout.tsx` and `page.tsx`. The latter functions as "index.tsx" file presumably.
Build A Mobile App Starter Template With Nuxt, Supabase, Tailwind, Ionic Framework and Capacitor
Tags: nuxt, tailwindcss, ionic, webdev
Published: 2023-04-15 17:19:04

Build A Mobile App Starter Template With Nuxt, Supabase, Tailwind, Ionic Framework and Capacitor


In this video, we'll be creating a simple mobile application starter template with Nuxt.js, Supabase, Tailwind CSS, and Ionic Framework. We'll be using the Supabase for data storage and authentication, and Tailwind for CSS for styling the user interface. We'll also be using Ionic Framework and Ionic Capacitor for creating a native mobile application and presenting a mobile user experience.

This video will give you a good understanding of how to use these frameworks together, and get you started with creating your own mobile projects!

We also cove changes to configuration to successfully deploy the solution on mobile devices.

{% youtube Q8mO2GYt76o %}


{% github aaronksaunders/starter-nuxt-ionic-tailwind-supabase %}
Understand Prototypal Inheritance in a simple way! 🤩
Tags: javascript, frontend, webdev, beginners
Published: 2023-05-16 08:19:40

---
title: Understand Prototypal Inheritance in a simple way! 🤩
published: true
series: Javascript core concepts
date: 2023-04-15 11:52:52 UTC
tags: #javascript #frontend #webdevelopment #beginners
canonical_url: 
---
![Prototypal Inheritance in Javascript](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gz846kfet71yxmu7fgpa.png)

### <mark>important Interview question for a Javascript developer</mark>

Prototypal inheritance is a fundamental concept in JavaScript that allows objects to inherit properties and methods from a parent object. In this blog post, we will explore how prototypal inheritance works in JavaScript with some examples. Kindly visit my previous blog to understand more about [Prototypes and Prototype chaining](https://hashnode.com/post/ckx8z1jjn08nsucs1e9526lkh) before reading further.

At the heart of prototypal inheritance is the concept of a prototype, which is an object that serves as a blueprint for creating other objects. Every object in JavaScript has a prototype, which can be accessed using the ` __proto__ ` property.

Let's start with a simple example. Suppose we have a `Person` object that has a `name` property and a `greet()` method.

```
let Student = {
  name: "",
  greet: function() {
    console.log(`Hello, my name is ${this.name}.`);
  }
};

```

Now, we want to create a `nick` object that inherits from the `Student` object and has an additional `grade` property. We can do this by creating a new object and setting its prototype to be the `Student` object.

```
let nick = Object.create(Student);
nick.grade = "";

```

As you can see in the below image, the `nick` object's ` __proto__ ` property contains the properties of `Student` object. This means that `nick` object has inherited the properties from its parent `Student` object.

![example](https://cdn.hashnode.com/res/hashnode/image/upload/v1681558401810/14068f66-40d6-4ccc-afda-6c55a6be2512.png)

Now, let's update the `name` and `grade` property of `nick` object.

```
nick.name = "Nick";
nick.grade = "90%";

```

We can call the `greet()` method on the `nick` object, which will use the `name` property inherited from the `Student` object.

```
nick.greet(); // Output: Hello, my name is Nick.

```

We can also add a `study()` method to the `Student` object.

```
Student.study = function() {
  console.log(`I am studying for my ${this.grade} grade.`);
};

```

Now, we can call the `study()` method on the `nick` object.

```
nick.study(); //Output: I am studying for my 90% grade.

```

In summary, **prototypal inheritance** in Javascript is a powerful feature that allows objects to inherit properties and methods from a parent object. By setting an object's prototype to another object, we can create a hierarchy of objects that share common properties and methods.
I made English a programming language
Tags: programming, python, ai, showdev
Published: 2023-04-15 17:07:36

Have you ever had a great idea for an application, tried to make it, and then gave up two hours later? If you have, there's a solution! Just speak English. Yes, I made English a programming language. Why? Because I was bored. How does it work? It uses GPT-4. Now with this the possibilities are endless, so I made a [flappy bird knockoff](https://github.com/Twingamerdudes/EngScript/blob/main/test/shitBird.en)... If you want to try this yourself, I've set up a GitHub Repo
{% embed https://github.com/Twingamerdudes/EngScript %}
Hugo.386
Published: 2023-09-09 19:04:18

---
title: Hugo.386
published: true
date: 2023-04-15 16:33:20 UTC
tags: 
canonical_url: https://themes.gohugo.io/themes/hugo.386/
---

HUGO.386 HUGO.386 is a port of the BOOTSTRA.386 theme. It has a cool MS-DOS feeling and is ready to be used for blogs. Despite its antique look, the theme is responsive and can be viewed on mobile devices. Test it on live here! (v1) Note: A new version based on Bootstrap 4 is in the making with a slightly different design. It’s still in beta but you can test it by fetching the v3 branch instead of the master.
Create a datepicker in React js with 'react-datepicker'
Tags: react, javascript, beginners, webdev
Published: 2023-04-15 16:00:18

React Datepicker is reusable datepicker component for react. Let's see how we can use and style it with custom style and additional icon.

### Install the package
Checkout the [npm package](https://www.npmjs.com/package/react-datepicker). You can install it via npm `npm install react-datepicker --save` or via yarn `yarn add react-datepicker`.

Import the datepicker component and include the CSS file from the package

```javascript
import DatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";
```
### Implementing Datepicker
- Create ref for the datepicker component and state for date range; destruct fromDate and toDate from dateRange.

```javascript
const datepickerRef = useRef(null);

const [dateRange, setDateRange] = useState<Array<Date | null>>([null, null]);
  const [fromDate, toDate] = dateRange;
```
- Pass the fromDate, toDate values and the ref to the Datepicker component.

```javascript
   <DatePicker
     startDate={fromDate}
     endDate={toDate}
     selectsRange
     shouldCloseOnSelect={true}
     onChange={handleDateRange}
     placeholderText="Choose date range"
     isClearable={true}
     ref={datepickerRef}
     dateFormat={"dd/MM/yyyy"}
    />
```
- Add the handler function to set dates to our date range state which is passed to the onChange function

```javascript
const handleDateRange = (dates: Array<Date | null>) => {
    setDateRange(dates);
  };
```

- Add custom style and pass it to the className prop. I am using [tailwind CSS](https://tailwindcss.com/) in my code.

```javascript
const customDateRangeStyle = `border border-blueBorder rounded-[10px] pl-2 pr-1 focus:outline-none text-[14px] font-semibold text-[#00156A]  border-[#BDD4FF] font-montserrat placeholder:font-[600] w-[230px] h-[48px] mb-0 bg-white w-full placeholder:text-[#D2D2D2]`;

<DatePicker
  startDate={fromDate}
  endDate={toDate}
  selectsRange
  shouldCloseOnSelect={true}
  className={customDateRangeStyle}
  onChange={handleDateRange}
  placeholderText="Choose date range"
  isClearable={true}
  ref={datepickerRef}
  dateFormat={"dd/MM/yyyy"}
 />

```
- Let's add a custom icon to our Datepicker component.

```javascript
<div className="relative cursor-pointer">
 <DatePicker
   startDate={fromDate}
   endDate={toDate}
   selectsRange
   shouldCloseOnSelect={true}
   className={customDateRangeStyle}
   onChange={handleDateRange}
   placeholderText="Choose date range"
   isClearable={true}
   ref={datepickerRef}
   dateFormat={"dd/MM/yyyy"}
  />         
  <span
   className="absolute right-2 top-1/2 transform -translate-y-1/2"
   onClick={handleOpenDatepicker}
  >
    <CalendarIcon />
  </span>
</div>
```
- Handle opening date-picker by clicking on the icon
```javascript
const handleOpenDatepicker = () => {
  const datepickerElement: any = datepickerRef.current;
  if (datepickerElement) {
     datepickerElement.setFocus(true);
  }
};
```

### Let's see what we have built :smiley: :point_down:


![Datepicker](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e3cn3eie8klsviqq1ccw.png)
Golang web scraping using Scrapemate
Tags: webscraping, go, dataextraction, scrapingframework
Published: 2024-06-19 20:28:45

---
title: Golang web scraping using Scrapemate
published: true
date: 2023-04-15 15:58:59 UTC
tags: webscraping,golang,dataextraction,scrapingframework
canonical_url: https://blog.gkomninos.com/golang-web-scraping-using-scrapemate
---

Discover the power of Scrapemate framework in Golang for web scraping. Our tutorial provides tips and tricks for maximizing efficiency and extracting valuab
Como configurar o Nuxt 3 + Nuxt Apollo
Published: 2023-04-15 15:36:39


## Por que usar o Nuxt Apollo?
É oficial, diretamente do [nuxt-modules](https://github.com/nuxt-modules) e é bem simples de configurar.

## TL;DR
Instale o `@nuxtjs/apollo@next` + `graphql` no seu projeto. Depois insira a seguinte configuração no arquivo `nuxt.config.ts`
```ts
export default defineNuxtConfig({
  modules: ["@nuxtjs/apollo"],
  apollo: {
    autoImports: true,
    proxyCookies: true,
    clients: {
      default: {
        connectToDevTools: true,
        httpEndpoint: SEU_ENDPOINT_AQUI_OU_ENV_VAR,
      },
    },
  },
});
```
Caso necessário adicione hooks para [auth](https://apollo.nuxtjs.org/recipes/authentication) e [error policy](https://apollo.nuxtjs.org/recipes/error-handling)

## Como configurar?
Depois de ter criado seu projeto Nuxt (se ainda não configurou siga [esses passos](https://nuxt.com/docs/getting-started/installation)) você deve installar o pacote `@nuxtjs/apollo@next` para poder ter acesso a ele no seu projeto e, além disso, deve instalar o `graphql` pra poder fazer suas queries.

`yarn add @nuxtjs/apollo@next graphql`

> Obs.: não use `graphql-tag` vai disparar um erro na execucao da sua query

Depois vá no seu arquivo `nuxt.config.ts` e adicione o seguinte trecho

```ts
export default defineNuxtConfig({
  devtools: {
    enabled: true,
  },
  modules: ["@element-plus/nuxt", "@nuxtjs/apollo", "@nuxt/devtools"],
  apollo: {
    autoImports: true,
    proxyCookies: true,
    clients: {
      default: {
        connectToDevTools: true,
        httpEndpoint: SEU_ENDPOINT_AQUI_OU_ENV_VAR,
      },
    },
  },
});
```

> Obs.: Existem mais configurações que podem ser inseridas. [Veja mais aqui](https://apollo.nuxtjs.org/getting-started/configuration)

## Como usar?
Existem diversas estratégias de como consumir uma query. Então vou explicar algumas formas

1. Para pegar os dados no ssr e montar a página sem aquele "loading" ou "skeleton" podemos fazer uso do [`useAsyncQuery`](https://apollo.nuxtjs.org/getting-started/composables#useasyncquery). Ele nada mais é do que um wrapper do [`useAsyncData`](https://v3.nuxtjs.org/api/composables/use-async-data/) do Nuxt.

2. Para pegar os dados no client side. Normalmente para components filhos que são injetados na tela sob demanda ou algo do tipo, usamos o [`useQuery`](https://apollo.nuxtjs.org/getting-started/composables#usequery).
> Ele pode ser usado no ssr, mas o melhor pra esse tipo de cenário é o `useAsyncQuery`

3. Para executar mudanças nos seus dados através de chamadas de mutations usamos o [`useMutation`](https://apollo.nuxtjs.org/getting-started/composables#usemutation). 
> Obs.: Você pode passar as `variables` na chamada do `useMutation` ou na chamada do `mutate`.

4. Para ficar observando as mudanças dos dados e ter atualização em tempo real via websocket, podemos usar [`useSubscription`](https://apollo.nuxtjs.org/getting-started/composables#usesubscription).
"Revolutionizing Writing: My Journey of Creating an AI Writing Assistant in Just 5 Minutes"
Tags: ai, chatgpt
Published: 2023-04-15 15:30:48

Hello everyone,

I am Abhishek, your random tech and art guy, here to share an exciting news with you all. Recently, I created an AI writing assistant called 'ArtiBot' (Yes, I know the name is awkward)- and I did it all in just 5 minutes!

It might sound impossible, but believe me, it's true. I used Invictai.io, an excellent platform that helps to convert prompts into Web AI Apps that are super easy to use. All I had to do was use the platform's tools to create my AI Writing Assistant app.

So, how did I create my AI Writing Assistant in just 5 minutes? Well, it was pretty simple, and I did it while listening to some upbeat music. All I did was input the prompt, users will give their writing requirements like blog posts, articles, essays, and what not, and my AI writing assistant was born! 

Now, whenever a user provides a prompt, my AI assistant can generate and fulfill their writing requirements in no time. It's like having a personal writing assistant at your fingertips.

The possibilities are endless with this app. Users can use it to generate their blog posts, articles, essays, and much more. All they need to do is provide the prompt, and my AI assistant will provide the written content that matches their requirements.

I had so much fun creating this app, and I am excited to see how many people will benefit from it. Thanks to Invictai.io, it was easy to create an AI Writing Assistant. 

So, if you're ever stuck with your writing assignments, just let my AI assistant handle it. I assure you; it will make your writing experience a breeze.

With that said, signing off now. Until next time!
Multiple Github accounts on one machine
Tags: github, git, sshkey
Published: 2023-04-15 15:26:02

Step 1. Generate an SSH key

```sh
cd ~/.ssh
ssh-keygen -t ed25519 -C "your_email_address"
```

Follow the prompts and enter your github username, e.g. `github_username`

Step 2. Add SSH key to SSH Agent

```sh
ssh-add ~/.ssh/id_ed25519_github_username
```

Step 3. Copy the SSH public-key to Github

`~/.ssh/id_ed25519_github_username.pub`

https://docs.github.com/en/authentication/connecting-to-github-with-ssh/adding-a-new-ssh-key-to-your-github-account

Step 4. Add a host entry to the `~/.ssh/config` file

```
Host github_username
  HostName github.com
  User git
  IdentityFile ~/.ssh/id_ed25519_github_username
```

Step 5. Config your remote

```sh
git remote add origin git@github.com-<your-username>[:owner-user-name]/<the-repo-name>.git
```

Step 6. Config git user.name and user.email

```
git config user.email "your email"
git config user.name "your name"
```
My Journey Through Programming: Flowcharting
Published: 2023-04-15 15:15:11

The presence of my first blog post :) 

I have learned a lot of new things in programming from my college, and I want to reinforce what I have learned by explaining it to others. Then I decided to start my blogging journey from now on.

And so it begins

## FLOWCHARTING

Based on what I read in the book titled Flowchart and Algorithm Basics: The Art of Programming by A. B. Chaudhuri. A flowchart is an essential tool in program development. The primary purpose of flowcharting is to discover the sequence of steps for showing the solution of a problem through arithmetic and logical manipulations for which we can instruct computers.

I use a flowchart to preferable understand existing problems so that they are easier to solve and now it's the first step I do before initiating a programming problem. There is a lot of symbolism in a flowchart. We need to understand each meaning of that symbol so we can make a professional look of a flowchart. 

But first here is a simple example of a flowchart to find the area of the triangle. We know that the formula to establish the area of a triangle is 1/2 x Base x Height. To dig up the area of the triangle, we need to know the base and height values of the triangle.

Step 1: START
Step 2: Take the base value of the triangle
Step 3: Take the height value of the triangle
Step 4: Calculated the base and height value with this formula 1/2 x b x h
Step 5: Print out the value of the calculation
Step 6: STOP

Now let's take a look at the actual flowchart.

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

At first, we added our start bubble so we know where our program starts. In steps two and three, we ask users to put values of base and height and stored them in the variable. After that, we can move to step four. In step four, we use the variable to establish an area of the triangle with the existing formula (1/2 x Base x Height).  In the forth step, we print out the result then we can stop the program.

The flowchart can get much more difficult as the task you need to accomplish, get more involved. I think this is all I can teach you. In the next post, I'll dig deeper into flowcharts. I'll discuss processions of decision-making implemented through a logical structure.
React UI Library (Appwrite Auth)
Published: 2023-04-15 15:07:55

It's a tiresome job to configure and setup the Appwrite sdk in react app and implement the UI for the same. To avoid all of this I have create a UI library package that facilitates this process . The blog here explains the usage of this library.

## Steps 

1. Create a react app 
2. Install the package using yarn or npm.
3. Import the components using following - 

`import {AppwriteAuth} from "package-name"`

4. Pass the apiEndpoint and projectId as props in the imported component.

`<Appwrite apiEndpoint = "endpoint" projectId = "project id"`

5. Hooray you are good to go 🎉. If all the steps go right you will see a component similar to this.


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

Really had a great time working on this. Link to the code can be found [here
](https://github.com/appwrite-octernship/create-add-on-package-ui-helper-libraries-SarveshLimaye)

Happy Coding !
Angular Pipe
Tags: angular, pipes, webdev
Published: 2023-04-15 14:56:36

Angular pipes are a powerful feature in the Angular framework that allow you to transform data before displaying it in the template. Pipes are used to format, filter, and sort data in a concise and easy-to-read way.
Using a pipe in Angular is as simple as adding the pipe name to the expression in the template. For example, if you have a date object in your component and you want to display it in a specific format, you can use the built-in ‘date’ pipe:

```
<p>{{ currentDate | date:'dd/MM/yyyy' }}</p>
```

In this example, the ‘date’ pipe formats the ‘currentDate’ property to the desired format of ‘dd/MM/yyyy’. The pipe takes the value on the left side of the pipe (in this case, ‘currentDate’) and transforms it according to the parameters on the right side of the pipe (in this case, the format string).
Pipes can also be chained together to perform multiple transformations on the same data. For example, you could use the ‘uppercase’ and ‘slice’ pipes to display only the first 3 characters of a string in uppercase:

```
<p>{{ 'hello world' | uppercase | slice:0:3 }}</p>

```
In this example, the ‘uppercase’ pipe transforms the string to uppercase, and the ‘slice’ pipe takes the first 3 characters of the resulting string.
Angular also provides several built-in pipes for common use cases, such as ‘currency’, ‘decimal’, ‘percent’, and ‘async’. These pipes can be used to format numbers, percentages, and asynchronous data in a consistent and easy-to-read way.
In addition to the built-in pipes, Angular allows you to create custom pipes to perform more complex transformations on your data. Custom pipes are created as classes that implement the ‘PipeTransform’ interface, and can be added to your module’s ‘declarations’ array to make them available in your templates.

```
import { Pipe, PipeTransform } from '@angular/core';

@Pipe({ name: 'myCustomPipe' })
export class MyCustomPipe implements PipeTransform {
  transform(value: string, arg1: number, arg2: string): string {
    // perform transformation on value using arg1 and arg2
    return transformedValue;
  }
}
```
In this example, the ‘MyCustomPipe’ class implements the ‘PipeTransform’ interface and defines a ‘transform’ method that takes a string value and two arguments. The ‘transform’ method performs some transformation on the value using the provided arguments and returns the transformed value.
Overall, pipes are a powerful tool in Angular that allow you to transform data in a consistent and easy-to-read way. Whether you’re formatting dates or transforming complex data structures, pipes can help you keep your templates clean and maintainable.

Any queries and question please comment.