teleren/devto huggingface dataset:
How I created a kids’ story creator using GPT3 ?
Tags: openai, gpt3, nextjs, webdev
Published: 2022-11-24 19:01:54

Being an active twitter user, I came across a plethora of AI tools and side projects people made primarily using stable diffusion and GPT3. I realized the huge potential of all these algorithms, and found the side projects to be really fun experiments. I decided to deep dive into GPT3, and use it to create an app which creates stories based on genres and characters.

**[Try it out here](https://gpt3stories.vercel.app/) — https://gpt3stories.vercel.app/**

OpenAI provides two types of AI models, GPT3 — which is a text generation model and DALL-E which is an image generation model. I read the GPT3 docs which are pretty succinct and easy to understand. OpenAI also provides 18$ worth of credits for the GPT3 models, which makes it easy to experiment and build projects. The key to getting the desired results from either of these models depends on how well you write the prompts.

Prompt is basically a statement explaining what you want the algorithm to create.

For e.g

A prompt given to DALL-E could be “Create a Van Gogh style painting of a Coca-Cola can”.

A prompt given to GPT-3 could be “Explain the history of Greece to a 5 year old”.

OpenAI provides a playground where you can type prompts, see the results and tweak accordingly.

I wanted to get stories from different genres having different characters, and to abstract away the requirement of typing a prompt which is still pretty esoteric for people not from a tech background had to design a UI which should appear self explanatory.

I started designing in Figma, and choose to use simple and familiar radio buttons and checkboxes for the user to select a genre and a maximum of 2 characters.

I choose to code the app in NextJS, it’s a full stack React framework and I could write an API which uses the openAI SDK to create results without the need to create a seperate expressJS project and host it.

I have also used framer motion to create subtle animations. Further the background image that I have used is generated by DALL-E

It’s incredibly easy to use the openAI nodejs SDK.

```
const { Configuration, OpenAIApi } = require("openai");

const configuration = new Configuration({
  apiKey: process.env.API_KEY,
});

const openai = new OpenAIApi(configuration);

export default async function handler(req, res) {
  const body = req.body;
  console.log(body);
  const prompt = `Write a long form ${body.genre} story which has a ${body.characters[0]} and a ${body.characters[1]}`;
  console.log(prompt);
  const response = await openai.createCompletion({
    model: "text-davinci-002",
    prompt: prompt,
    temperature: 0.7,
    max_tokens: 3000,
    top_p: 1,
    frequency_penalty: 0,
    presence_penalty: 0,
  });
  return res.status(200).json({ data: response.data.choices[0].text });
} 
```

That’s pretty much how you pass a dynamic prompt using string interpolation and return the response.

Would love to collaborate on more such projects, you can find me on [twitter](https://twitter.com/siddharth0x)

**
[Try it out here](https://gpt3stories.vercel.app/) — https://gpt3stories.vercel.app/**
Closures in Javascript
Published: 2022-11-24 18:57:07

**A closure is a function combined with references to variables define outside of it.**

They enclose the function and variable in its environment.

Let's say you're having a function greet


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

_There's two interesting points to notice here._

- The retured function from greet can access the word parameter.

- The returned function maintain the value of word when greetings is called outside scope of word.


**The first point can be explained by lexical Scope**

**Lexical Scope**- The returned function can access word before it exists in its outer scope.

**The second point because of closures**

Closure maintains the variable references ,which allows function to access variables outside of their scope.

**Examples of Closures in Javascript**

Example 1:


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


In the example above, the function numberGenerator creates a local “free” variable num (a number) and checkNumber (a function which prints num to the console).

**The function checkNumber doesn’t have any local variables of its own — however, it does have access to the variables within the outer function, numberGenerator, because of a closure.**

Therefore, it can use the variable num declared in numberGenerator to successfully log it to the console even after numberGenerator has returned.

Example 2:
In this example we’ll demonstrate that a closure contains any and all local variables that were declared inside the outer enclosing function.

function sayHello() {

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


_Notice how the variable hello is defined after the anonymous function — but can still access the hello variable. This is because the hello variable has already been defined in the function “scope” at the time of creation, making it available when the anonymous function is finally executed._
Mengontrol Akses ke File dengan ACL
Published: 2022-10-26 05:32:28

**Konsep Daftar Kontrol Akses**
Dengan ACL, Anda dapat memberikan izin ke beberapa pengguna dan grup, yang diidentifikasi berdasarkan nama pengguna, nama grup, UID, atau GID, menggunakan tanda izin yang sama yang digunakan dengan izin file biasa: baca, tulis, dan jalankan. 
user : rwx
group : rw
other : tidak ada akses
getfacl : menampilkan pengaturan ACL
**ACL pada File Jurnal Systemd**
systemd-journaldmenggunakan entri ACL untuk memungkinkan akses baca ke /run/log/journal/cb44...8ae2/system.journalfile ke admdan wheelkelompok.
**ACL pada Perangkat yang Dikelola Sistem**
systemd-udevmenggunakan satu set udevaturan yang memungkinkan uaccesstag ke beberapa perangkat, seperti pemutar atau penulis CD/DVD, perangkat penyimpanan USB, kartu suara, dan banyak lainnya. 
**Menyetel ACL Mask Eksplisit** 
Anda dapat mengatur ACL Mask secara eksplisit pada file atau direktori untuk membatasi izin efektif maksimum untuk pengguna bernama, pemilik grup, dan grup bernama. Ini membatasi izin yang ada yang melebihi topeng, tetapi tidak memengaruhi izin yang kurang permisif daripada topeng. 
Secara default, setiap kali salah satu pengaturan ACL yang terpengaruh (pengguna bernama, pemilik grup, atau grup bernama) diubah atau dihapus, ACL Mask dihitung ulang, berpotensi mengatur ulang pengaturan topeng eksplisit sebelumnya. 
Untuk menghindari perhitungan ulang topeng, gunakan -n pilihan atau menyertakan pengaturan topeng ( -m m::perms) dengan setfacl operation apa pun yang mengubah pengaturan ACL yang terpengaruh topeng. 
**Mengubah Izin File ACL**
setfacl : menambah, memodifikasi, atau menghapus ACL standar pada file dan direktori.
r : baca
w : tulis
x : eksekusi
"_" : izin yang relevan tidak ada
X : izin eksekusi hanya boleh disetel pada direktori dan bukan file biasa
-m : memodifikasi
-x : hapus ACL default
Mask hanya dapat dihapus jika tidak ada set ACL lain (tidak termasuk ACL dasar yang tidak dapat dihapus), sehingga harus dihapus terakhir. File tidak akan lagi memiliki ACL dan ls -l tidak akan menampilkan tanda tambah (+) di sebelah string izin. Atau, untuk menghapus semua entri ACL pada file atau direktori (termasuk ACL default pada direktori)
-R : opsi untuk menerapkan ACL secara rekursif
Saat menyetel ACL default pada direktori, pastikan bahwa pengguna akan dapat mengakses konten subdirektori baru yang dibuat di dalamnya dengan menyertakan izin eksekusi pada default ACL . 
File baru dan subdirektori baru terus mendapatkan UID pemiliknya dan nilai GID grup utama yang ditetapkan dari pengguna yang membuat, kecuali jika direktori induk setgidflag diaktifkan, dalam hal ini GID grup utama sama dengan GID direktori induk.
Free Next.js 13 Finance Dashboard Template
Published: 2022-11-24 18:46:48

Happy Thanksgiving! I made [this template](https://www.fintech-template.com) using Next.js 13, and Tailwind CSS. Specifically, I wanted to test out the new layouts directory, link component, and more of the new features. It comes with a high converting landing page, pricing page, dashboard, and much more.  Kindly download the template and let me know what you think!

[fintech template](https://www.fintech-template.com)


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/26fm3pmsz2n6l2u79jvn.png)
Nodejs Boilerplate with Typescript and Express
Tags: nodej, typescript, javascript, webdev
Published: 2022-11-24 18:45:28

Assume you wish to begin a new project in a safe and consistent development environment. In such situation, you may need to configure things like "linters," code style tools, test frameworks, git hooks, and so on. This blog includes all of the tedious configuration so you can focus on the fun part, coding.
The concept is comparable to scripts such as create-react-app.
I'll go over how to utilise and the tools included in this boilerplate shortly below.


> embed The GitHub project contains more details :)


## Starting a New Project


**Install TypeScript Node and global TypeScript.**
```
npm install -g typescript ts-node 
```

**Clone this repository**
```
git@github.com:shivamsingh478/nodejs-typescript-express-boilerplate.git
```

**The cloned repository will look like this:-**

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

**Then Install all the dependdencies**

```
npm install
```

**Run the Application**
```
npm run start
```

**Build the Application**
```
npm run build
```

**Tooling**

These are the tools already configured on this boilerplate:

- [TypeScript](https://www.typescriptlang.org)
- [Jest](https://jestjs.io/)
- [ESLint](https://eslint.org/)
- [Prettier](https://prettier.io/)
- [Husky](https://typicode.github.io/husky/#/)
- [Lint Staged](https://github.com/okonet/lint-staged)
- [Commit Lint](https://github.com/conventional-changelog/commitlint)
- [Nodemon](https://nodemon.io/)
- [Docker and Docker Compose](https://www.docker.com/)
- [CI with GitHub Actions](https://docs.github.com/en/actions)


ESLint and Prettier assure proper code style and practises.
Commit, Husky, and Lint Staged Lint guarantees that no files are committed that do not adhere to project requirements.
Jest is a test framework that includes ts-jest for TypeScript.
Nodemon is used to reload the programme when it is modified.
Docker is used for local development, and it includes a Dockerfile that creates a minimal image with gcr.io/distroless/nodejs.

If you're interested in learning more, check out the source code at https://github.com/shivamsingh478/nodejs-typescript-express-boilerplate.



Thanks for reading, and I hope you enjoy :)
How to set permanent Aliases in Windows
Tags: windows, alias, productivity
Published: 2022-11-24 18:31:38


alias are easy way to do long command short, in Unix there are .bashrc file where we can set alias but in Windows I did not find such thing straight forward, so here is the approach to do so.

## approach 1

usually we can open command prompt ( <kbd>win key + R</kbd> ) and type *cmd* and set alias using `doskey`, for eg.

> doskey ll=dir

and now when run `ll` it will list all files of that folder.


which works good but problem in this approach is

1. we have to set every alias separately
2. these alias are temporary and only for the active session, as soon as we close the command prompt, alias are gone.

## approach 2

To overcome both of the above mentioned problem, following are are steps to set permanent and multiple alias

1. first run below command in your command prompt ```echo %USERPROFILE%``` , output of above is the base path , in my case it is __C:/Users/User__

![userprofile](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0484qh8nrka1hhcff7i1.png)

2. now create a new file name *alias* on above location, you can name it on your ease, even with .txt extension also

3. now open this file in notepad or editor and add your daily use alias in it and save the file, mine are as below

```sh
cat=type $*
..=cd..
ls=dir $*
gs=git status
gp=git push
gb=git branch
nrs=npm run start
dev=cd /d D:\Developer
rct=cd /d D:\Developer\react-project
```  
Note:
    - you need to add */d* if you create an alias to navigate to any directory.
    - path separator is forward slash *\\ .
    - there is no space around _=_ while creating alias.

now next part is to how to make it permanent so that it is available whenever you open the command prompt.

4. now open run <kbd>win key + R</kbd> and type `regedit` ; it will open a new dialog window which is registry editor.
5. navigate to __Computer\HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Command Processor__ File
6. right click to this file and select New >> String Value and rename it to *Autorun* and save it.

![regedit dialog](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qm0f0d5rhpv1rq05va6h.png)
7. now double click on this newly created *Autorun* key, a window open where you have to put below value in value data field (the address will be full path of your alias file)

```txt
DOSKEY /MACROFILE="C:\Users\User\alias"
```

![value of new key](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xcqfz2vyfxqbqzxf9bx2.png)

8. close the regedit and command prompt for once.

Now try your alias and thank me later. :)

let me know if it was helpful or something incorrect while you try, I would be happy to help

Cheers.
HANGMAN GAME
Tags: python, gamedev, beginners, cli
Published: 2022-11-24 18:26:53

Why?
Work for Python course
=)

The game:
You have to guess the movie making less than 7 mistakes!
It has loaded the 100 most famous movies according to IMBD.
Good Luck!

Source Code:
https://github.com/nando1209/hangman

Thank you!
Setup Netfun Wifi Extender?
Published: 2022-11-24 18:20:00

[Netfun Wifi Extender Setup](https://myrepeater.network/netfun-wifi-extender/how-to-setup-netfun-wifi-extender/) Using the WPS Method:

You find the setup procedure a little challenging to follow? Don’t be alarmed! For you, we offer a unique solution. Press the WPS (WiFi Protected Setup) button to configure the Netfun Wifi Extender. The steps below will show you how to use WPS to setup your [Netfun Wifi Extender](https://myrepeater.network/netfun-wifi-extender/how-to-setup-netfun-wifi-extender/).

Turn on your Netfun wifi Extender and place it in the most convenient location.
Now press the WPS button on the device.
You’ll notice that the WPS LED light starts to blink irregularly. It demonstrates that the extender is attempting to connect to the current router.
Process meaning, Process State
Published: 2022-11-24 17:55:26

# process meaning
Process is the **program in execution**

# process state
-  running : process has the CPU and executing the mechain language. 
- ready :  can execute immediately. but no allocated CPU
- wating(blocked) : can not execute immediately 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/43cehnnseo3i31daxq9d.png)
Integration tests are better than unit tests?
Tags: testing, tdd, testautomatio, unittesting
Published: 2022-11-24 17:41:40

Some people think that Integration tests are better than Unit tests and that we should rely on them more. In some places, people are even discouraged from writing unit tests.

These people, even though well-intentioned are usually wrong.

First, there's no such thing as "Ideal test distribution" or "best level of tests". Tests that are cheaper to write and run are usually the best type of tests.

Depending on your system under test milage can vary, but in the vast majority of cases, unit tests are cheaper to write and run.

One other thing is that there're lots of misconceptions about what 'unit test' is. But that is for another post.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h4b82oov2a7c39urykyo.png)
Wierd JS Behavior 😳
Tags: javascript, wierd
Published: 2022-11-24 17:12:12




---
title: Wierd JS Behavior 😳
published: true
description: 
tags: #js #javascript #wierd 
# cover_image: https://direct_url_to_image.jpg
# Use a ratio of 100:42 for best results.
# published_at: 2022-11-24 17:11 +0000
---

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z1aebpyykjp4xbfy3m64.png)
Not able to inspect elements inside <ScrollView> for an iOS app with Appium Inspector
Tags: help
Published: 2022-11-24 17:00:53

We are automating on an iOS mobile application which has been developed with react native. For the automation we have been asked to use Appium tool with Pytest-BDD. Currently we are facing an issue with the while inspecting the Mobile elements with the help of Appium Inspector… As developers already provided the Accessibility Id’s, Accessibility label and other elements props but we are not able to access elements inside (Child elements) using Appium inspector…Is there anyone who has already faced this issue and can help ?Thanks in Advance !!!

Tried Inspecting elements with Appium Inspector
🎉  Luos contest on Discord
Tags: opensource, challenge, discord, luos
Published: 2022-11-24 16:56:54

Over these past weeks we have been running a contest on Discord within the community to challenge the members to invite as many people as possible into the Luos community. 

Many of the members participated and helped to spread the message making the Luos community grow exponentially in a short amount of time. 

The Luos team wants to thank everyone for sharing their links 🙏🏽

But now onto the most important part… [the winners](https://www.youtube.com/watch?v=tytA5hFMPzk) of the contest!

{% embed https://www.youtube.com/embed/tytA5hFMPzk %}

- Coming up strong in **fifth place** is SantosUpadhyay0, applause to you!
- Okidi you’ve come so far and ranked in **fourth place**, hat’s off to you!
- Bravo to Amandine for ranking **third place,** you made it onto the podium!
- Almost at the top is Rashi07 coming in **second place,** a toast to you!
- And in **the first place**, Sunrise_Falcon, congratulations, you win the crown!! This calls for a celebration 🎉

Each of them has won a **special prize** which they will receive through Discord. For everyone else that participated, you will be assigned the role of community hero of the server. 

Thanks again to **everyone!**

PS: Even though the contest is over, you can of cause keep on sharing your invite links and become a community hero as well 😉

Until next time, it was a pleasure!
Very useful git repos for software developers
Tags: git, webdev, resources
Published: 2022-11-24 16:43:31

A list of source code/git repositories for software developers...

1. Project based learning with JavaScript - [Link](https://github.com/practical-tutorials/project-based-learning#javascript) 

> Web apps with 'Angular' front end section on this page has fewer project based examples compared to 'React'. But, the one(s) that I tried (offline-capable [Hacker News clone](https://houssein.me/angular2-hacker-news)) are good. 

2. todo
Front End development resources
Tags: frontend, angular, webdev, resources
Published: 2022-11-24 16:35:35

A running list of good web apps/sites front-end development resources covering...
- Angular
- Vuejs
- React
- etc.

<u>Some useful topics with links
</u>

1. Learn how to create and deploy the angular application to AWS Serverless S3 -- [Link](https://levelup.gitconnected.com/learn-how-to-create-and-deploy-the-angular-application-to-aws-serverless-s3-81f8a838b563) 

1. Serverless Lambda for Angular app to render on the server (to get SEO advantages) 

- [Link 1](https://www.twilio.com/blog/angular-universal-javascript-node-js-aws-lambda)
- [Link 2](https://medium.com/swlh/serverless-angular-universal-with-aws-lambda-99162975eed0)

2. todo
How to solve PHP parse/syntax errors
Tags: webdev, programming, php, beginners
Published: 2022-11-24 16:16:43

Introduction

As a beginning PHP developer, you will encounter an error message from your PHP code, I remember when I kick-started as a PHP developer. When I write code to a certain extent, I'll get an error message, and it
piece me off. So that is what we are going to bridge here, if you read and study carefully, you'll know several things about syntax error and parsing. So to skip much talk, If you are ready let's get started.

Prerequisite

The only thing you need for this course is your pen and jotter And pay proper attention.

What is a parse error?

Parse errors are caused by misuse or missing symbols in a particular line of code. The compiler catches the error and terminates the script.

What is a syntax error?

If the PHP code contains a syntax error, the PHP parser cannot interpret the code and stops working. For example, a syntax error can be a forgotten quotation mark, a missing semicolon at the end of a line, a missing parenthesis, or extra characters.
In computer science, a syntax error is an error in the syntax of a sequence of characters or tokens that are intended to be written in a particular programming language. For compiled languages, syntax errors are detected at compile time. A program will not compile until all syntax errors are corrected.

What is the difference between parse error & syntax error

The difference between syntax errors is that parse error happens because of a syntax error. You (the developer) write code that contains a 'syntax error'. When that code is compiled, the compiler tries to parse your code but cannot which results in a parse error. If you are dealing with an interpreted language, (PHP, ASP, etc.)

What causes parse & syntax error

Parse errors are caused by: Unclosed brackets or quotes. Missing or extra semicolons or parentheses.
A parse error: syntax error, unexpected appears when the PHP interpreter detects a missing element. Most of the time, it is caused by a missing curly bracket "}". To solve this, it will require you to scan the entire file to find the source of the error.

How to solve parse and syntax error
Solving syntax errors In steps.

Look at the mentioned code line.
More regularly you need to look at preceding lines as well.
Look at the syntax colorization!
White-space is your friend.
You can freely add newlines between operators or constants and strings.
Comment out the offending code.

Conclusion

You have come to the end of this tutorial, so as a PHP developer, when an error is thrown on you screen, trace that error, from the line of code. And you'll find out that what causes it is either wrong input of semi-column, curly-brace, Etc..

About the Author

 I am Vivian Ijomah i have grown full-blown skills in JavaScript, PHP, HTML & CSS, and more.
I am currently freelancing, building websites for clients, and writing technical tutorials,teaching others how to do what i does. Any question drop on the comment box…
Vivian Ijomah is open and available to hear from you. You can reach him on Linked In, Google, Facebook, GitHub, or on his website.
Part 4:- Try Catch javascript Syntax
Tags: webdev, javascript, beginners, programming
Published: 2022-11-24 16:10:58

## Javascript Code

``` javascript
let btn = document.getElementById("btn");
const makeRequest = async (e) => {
    e.preventDefault();
    let title = document.getElementById("title").value;
    let desc = document.getElementById("desc").value;
    try {
        const init = {
            "method": "POST",
            "headers": {
                "Content-Type": "application/json"
            },
            "body": JSON.stringify({
                title: title,
                desc: desc
            })
        }
        console.log(init);
        const res = await fetch("http://127.0.0.1:8000/student/", init);
        console.log('res', res);
        if (!res.ok) {
            throw new Error(res.statusText);
        }
        const data = await res.json();
        console.log(data)
    } catch (error) {
        console.log("error", error);
    }
}
btn.addEventListener('click', makeRequest);
```

Thank You.
You can follow us on:
[Youtube ](https://www.youtube.com/c/ULTIMATEPROGRAMMING)
[Instagram](https://www.instagram.com/full_stack_web_developer1/)