teleren/devto huggingface dataset:
Creating a ChatBot using Open-AI in JS
Tags: javascript, react, ai, webdev
Published: 2022-03-28 12:38:24

So I have been using GitHub copilot for a while now. GitHub Copilot is a Plugin for VSCode/JB IDEs/NVIM that provides you with intelligent code completion, suggestions and in my opinion the next big thing in Software Coding in general.

I was always really interested in how the whole AI Suggestion works and how it could be used in my own projects.

![test](https://copilot.github.com/diagram.png)

While looking into it, I came across the [Open-AI Playground](https://beta.openai.com/examples/default-text-to-command), a playground for Open-AI's text-davinci-002 model.

### What is Open-AI's text-davinci-002 API?

text-davinci-002 is a model that can be trained to generate text from a given input.

It also provides an API to interact with the model which is actually quite easy to use.

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

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

const response = await openai.createCompletion("text-davinci-002", {
  prompt: "Hey how are you?\n", // question for the ai goes here
  temperature: 0, // 0 means no randomness and usually the best result
  max_tokens: 100, 
  top_p: 1.0,
  frequency_penalty: 0.2,
  presence_penalty: 0.0,
  stop: ["\n"],
});
```

### Creating the ChatBot

So I decided to create a ChatBot that can be used to interact with the AI. Developing with GitHubs Copilot I already noticed, that Context is always very important and helps the AI to understand what kind of response he should give.

So first thing I do is configure the AI! How do you ask? **WITH CLEAR TEXT**!

```js
function conversationContext(aiName, attributes) {
  return `\n
    The following is a conversation with an AI. The AI is ${attributes}.
    \n
    Human:Hello
    \n
    ${aiName}:Hi, I am an AI. Whats your question?
    \n`
}
```

Now we will feed this context to the AI, which, with more context, will give us a better response.

```js
const promt = () => {
return `${conversationContext(aiName, attributes)}Human:${question}
    \n
    ${aiName}:`
}
```

Here we just want want the AI has to say, like:

```json
Human:Hello, who are you?
AI:${responseFromTheAI}
```

### The Final Bot

Wrapping that all up into a nice React Application and the Bot is ready to go! Below I have some examples.


![test1](https://i.imgur.com/8DMtllb.png)
![test2](https://i.imgur.com/N2E4x6N.png)
![test3](https://i.imgur.com/M3md2Iy.png)

The Chatbot is hosted on Netlify and the source code is available on [Github](https://github.com/Wetwer/davinci-chatbot)

[Chatbot on Netlify](https://text-davinci.netlify.app/)

Have fun, and I hope will find it useful in maybe finding your next Project Idea!
Football Stats Direct Interview
Tags: misc, react
Published: 2022-04-01 15:11:47

---
title: Football Stats Direct Interview
published: true
date: 2022-03-28 12:30:05 UTC
tags: Misc,React
canonical_url: https://blog.ag-grid.com/football-stats-direct-interview/
---

 ![Football Stats Direct Interview](https://blog.ag-grid.com/content/images/2022/03/viqas-maxresdefault--1-.jpeg)

[Viqas Hussain](https://viqas.co.uk) created the [FootballStatsDirect.com](https://FootballStatsDirect.com) application. Written in React, using RapidAPI and Firebase.

Viqas has released the [Source on Github](https://github.com/viqashussain?tab=repositories&q=football&type=&language=&sort=) to serve as a case study for using AG Grid as well as being a workable and useful football fan support tool.

The application demonstrates:

- pulling data from an external API and database
- custom cell renderers
- value getters to support sorting and filtering
- integrated charts
- standalone charts
- pivoting, grouping and aggregation

Viqas wrote up some of the technical details in a [blog post for AG Grid](https://blog.ag-grid.com/football-stats-direct/), as well as [additional content on his own site](https://viqas.co.uk/home/article/Football-Stats-Direct-Football-Stats-meet-AG-Grid).

## Video Interview

We managed to grab some time with Viqas to talk through the project and see a demo of it in action.

<iframe loading="lazy" width="560" height="315" src="https://www.youtube.com/embed/D28UOl0z11M" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

[Watch On YouTube](https://www.youtube.com/watch?v=D28UOl0z11M)

## Links

- [Viqas Hussain](https://viqas.co.uk)
- [Source on Github](https://github.com/viqashussain?tab=repositories&q=football&type=&language=&sort=)
- [blog post for AG Grid](https://blog.ag-grid.com/football-stats-direct/)
- [additional content on viqas.co.uk](https://viqas.co.uk/home/article/Football-Stats-Direct-Football-Stats-meet-AG-Grid).
<!--kg-card-end: markdown-->
How to send an image from Unsplash to IPFS?
Tags: ipfs, javascript, unsplash, web3
Published: 2022-03-28 12:05:36

I suggest you include the **web3** environment in your growth strategy. Therefore, you should use technical implementations decentralized networks like [subgraph](https://thegraph.com/explorer) or **IPFS**. 

<hr/>

In this guide, you'll learn how to send image files to **[IPFS](https://ipfs.io/)** using **ipfs-http-client** and Nextjs

You can see the demo [here](https://url-to-ipfs.netlify.app/) or jump to directly [GitHub](https://github.com/raufsamestone/url-to-ipfs)

![Demo](https://res.cloudinary.com/raufsamestone/image/upload/v1648465550/blog-contents/ipfs/ss_eul4ra.jpg)

## Pre-requests

- Node 15 >

## Getting started

Create a simple next js app:

```jsx
npx create-next-app ipfs
```

Add IPFS HTTP client library using yarn:

```jsx
yarn add ipfs-http-client
```

Create a new constant for **IPFS** gateway. In this case, we will use [Infura](https://docs.infura.io/infura) API.

```jsx
const client = create("https://ipfs.infura.io:5001/api/v0");
```

Get a random image URL from **Unsplash.** You can see more detail in [here](https://unsplash.com/documentation#get-a-random-photo)**.**  

```jsx
async function getImage() {
fetch(https://source.unsplash.com/500x500/?beach).then((response) => {
let imageURL = response.url;
setImageURL(imageURL);
});
}
```

Or you can use your own fetching solution like custom form data, Cloudinary etc.

Then upload your file to IPFS.

The critical thing is, you should fetch the **image URL**  as a **blob** object.

```jsx
const blobFile = await fetch(imageURL).then((r) => r.blob());
```

Create a new function as **uploadFile**

```jsx
async function uploadFile() {
const blobFile = await fetch(imageURL).then((r) => r.blob());
try {
const added = await client.add(blobFile);
const url = https://ipfs.infura.io/ipfs/${added.path};
updateIPFSURL(url);
} catch (error) {
console.log("Error uploading file: ", error);
}
}
```

Finally, you are ready to fetch and image image object from URL and send to IPFS. 

Clone the full repository [here](https://github.com/raufsamestone/url-to-ipfs) and run;

```jsx
yarn dev
```

<hr/>

You can see the more detailed cases about Web3 from Nader Dabit’s posts [here](https://dev.to/edge-and-node/uploading-files-to-ipfs-from-a-web-application-50a).

<hr/>

Thanks for reading. 👋 Don't forget to subscribe me on [Medium](https://raufsamestone.medium.com/subscribe) or [Dev.to](https://dev.to/raufsamestone)
Open source API Security testing tools
Tags: api, startup, cybersecurity, blst
Published: 2022-03-28 11:54:29

Before I dive into the world of open source API testing tools, it’s important to differentiate between API security testing tools and website security testing?

Before I go on with this article, don’t forget to star our open source API Security tool -
https://github.com/blst-security/cherrybomb

API security testing tools are different from website security testing in a few 🗝️key ways. First, API security testing tools are designed to test APIs, while website security testing tools are designed to test web applications. This means that API security testing tools focus on testing the functionality of the API, while website security testing focuses on testing the security of the web application.

Second, API security testing tools often use automated testing to test APIs, while website security testing tools typically use manual testing. This is because automated testing can be better at testing the functionality of an API, but manual testing is usually better at finding security flaws in a web app.

Third, API security testing tools typically offer more features than website security testing tools. This is because APIs are more complex than web applications, and so there are more potential security risks associated with them.
API security testing tools, on the other hand, tend to have more features for testing APIs, like the ability to test for authentication and authorization issues, session management problems, and data leaks, so they can be more useful for this.

Fourth, API security testing tools are typically more expensive than website security testing tools. This is because API security testing is a more specialized form of testing, and so there are fewer tools available on the market. As a result, the few tools that are available tend to be more expensive than website security testing tools.

Finally, API security testing tools are typically used by developers, while website security testing tools are typically used by security professionals. This is because developers are typically more familiar with APIs than security professionals, and so they are more likely to use API security testing tools.

I know I’ve gone a bit off-road with API security and the difference between that and website security testing, but it is crucial to understand that bit to move on to the next article, which will be about 5 Api testing tools that you should know about.
Do mocha tests run in parallel? JavaScript Test Automation Tutorial | Part V
Published: 2022-03-28 11:57:51

This video explains how to run the parallel test with mocha. [Start FREE Testing](https://accounts.lambdatest.com/register?utm_source=devto&utm_medium=organic&utm_campaign=mar28_sb&utm_term=sb&utm_content=tutorial_video)

It is Part V of the JavaScript Test Automation LambdaTest Tutorial series. In this video, Ryan Howard (@ryantestsstuff), an engineer, explains parallel testing with mocha. You will also learn how you can run mocha end-to-end tests in parallel.

This video also answers 🚩 
 
◼ Does mocha run tests in parallel?
◼ How to run the mocha test?
◼ Does Mocha run tests in order?
◼ How to conduct parallel testing?
Pikaso v2.5.0 is released
Published: 2022-03-28 11:57:07


I am pleased to announce the release of version 2.5.0 today.

This release includes one new feature and one important improvement.

### Introduce Measurement Tag

Resize the red box to see how it works:
{% codepen https://codepen.io/raminmousavi/pen/RwxVQLE %}

### Improve SVG drawing

To achieve a smoother drawing experience, the logic for drawing SVG paths has been reimplemented.

<img src="https://user-images.githubusercontent.com/334716/160384156-236017d4-7463-41c6-98db-1b4e89c7b565.gif" width="700" />

Click and drag the mouse to see what it looks like:
{% codepen https://codepen.io/raminmousavi/pen/abEWqeK %}

### Pencil Drawing
Pencil Drawings have a minor difference in that, unlike other shapes, they begin a new drawing when the current one ends.
The `editor.shapes.pencil.stopDrawing()` method or `editor.board.setActiveDrawing(null)` method must be called in order to stop pencil drawing.

Draw something cool and then hit the "esc" key on your keyboard to finish the drawing.

{% codepen https://codepen.io/raminmousavi/pen/VwybXLO %}


Pikaso's full feature list is available at https://pikaso.app and https://github.com/pikasojs/pikaso
My Online Presence (Portfolio)
Tags: webdev, portfolio, opacityauthor, itsrehanraihan
Published: 2022-03-28 11:56:12

Hi, I'm recently starting a new career in web development, specifically I'm looking into Front End development.

This time I decided to have a different approach and enrolled in a full stack development bootcamp, get some structure, some knowledge and somewhere to start from. 

And now I present you my website, it is not a finished product, but at least I have a little online presence. I plan on working on a better design and making it a bit more interactive, so please feel free to any feedback you might have.

[view:](https://rehanraihan.vercel.app/)
Consume 50% less memory with your Python objects
Tags: python
Published: 2022-03-28 11:11:41

By default, in Python, objects have a __dict__ attribute.
It's a dictionary used to access the object variables per key.

It is useful to allow dynamic variables' creation.

🚩However this flexibility can lead to creation of new object variables, when misspelled. Python will create a new variable with the given name.

With __slots__, we can specifically declare data variables.
Then Python will allocate space for them in memory and skip the creation of the __dict__ attribute.

⛔It also forbids the creation of any object's variable which are not declared in the __slots__ attribute.

By using slots, you also decrease the memory used by your class instances.

Slots can also be used in dataclasses if you're using python3.10 or higher. Simply add `slots=True` to the decorator.

⚡It makes a huge difference if you're creating lots of objects!

```python
from dataclasses import dataclass

# https://pypi.org/project/Pympler/
from pympler.asizeof import asizeof

# Dataclass with slots
@dataclass(frozen=True, slots=True)
class SmallObjectWithDataclass:
    first_name: str
    last_name: str

# Class with slots
class SmallObject:
    __slots__ = ["first_name", "last_name"]

    def __init__(self, first_name, last_name) -> None:
        self.first_name: str = first_name
        self.last_name: str = last_name

# Class with no slots
class BiggerObject:
    def __init__(self, first_name, last_name) -> None:
        self.first_name: str = first_name
        self.last_name: str = last_name


p = SmallObjectWithDataclass("Jerome", "K")
print(asizeof(p))  # Output: 160 Bytes
p2 = SmallObject("Jerome", "K")
print(asizeof(p2))  # Output: 160 Bytes
p3 = BiggerObject("Jerome", "K")
print(asizeof(p3))  # Output: 392 Bytes
```

🦄Hope this helps and have a great Day
Jerome
One Month of Coffee Chats in Review – 5 Life Lessons
Tags: beginners, discuss, career, watercooler
Published: 2022-03-28 11:39:38



I am doing coffee chats for a month now. Here I share the answers I received that made me think

I feel hnoured that people reach out to me and ask me about my advise in technology. In most cases, I feel I can learn a lot more from the random strangers I talk to. 

All of the people I talked to had amazing stories to share and allowed me to take some insights into their lives and their feelings. I'm incredibly thankful for this opportunity.

Here are the 5 stories which I found most impressive.


## “After college, I went out and travelled the world. I worked as a scuba guide, a bar tender, a surf shop, a grocery store. And I now want to start in tech.”

What should I say? I wish I'd had the courage to do the same after college. And, you can to a transition. It's not too late!

## “I have tried several times to wrap my head around technology and programming. And I failed. But now I'm making some progress.”

Success includes failure. Keep trying. And find a supportive community. [#100Devs](https://twitter.com/search?q=%23100Devs) can be a good start!

## “I work as a researcher and have to get some papers done this week. Besides that, I'm a #100Devs fellow.”

Wow, that's dedication! Keep doing the stuff you find value in but avoid feeling [burnt out](https://bas.codes/posts/prevent-recover-burnout).

## “I have a major in XYZ but failed to land a fulfilling job. Now I want to break into tech.”

Love it, leave it or change it! There is no concept of "too late" in the things you find valuable. You can do it, for sure!

## “There are two things that interest me: Outdoor activity and programming. Now I want to build an app that combines both.”

We're humans, not stereotypes! There is always more than one thing we feel passionate about. If you can combine these, that's a gift!


{% embed https://twitter.com/bascodes/status/1509560645259345928 %}
How to set light/dark mode according to user's settings!
Tags: css, webdev, design
Published: 2022-03-28 11:33:50

Many websites have a toggle in their header which lets users switch betwen light and dark mode. This is a great feature to have but there's a chance they already set their preference in their operating system's settings. Wouldn't it be great if your website was simply responsive according to their settings?

This is possible with the `prefers-color-scheme` media query in CSS!

## How does `prefers-color-scheme` work?

`prefers-color-scheme` works exactly like any other `@media` query.

A basic example:

```css
@media (prefers-color-scheme: light) {
  body{
      /* Set the background to white and text to black */
      background: white;
      color: black;
  }
}

@media (prefers-color-scheme: dark) {
  body{
      /* Set the background to black and text to white */
      background: black;
      color: white;
  }
}
```

Just like that, your website responds to changes to your user's preferences.

For a live demo, [see this example on CodePen](https://codepen.io/SavvStudio/pen/ExWYgYj). Set your operating system preferences from light mode to dark mode and vice versa, and check the page dynamically changing colours!

## Best practice

In the code example above, I've shown how you can use both `light` and `dark` in `prefers-color-scheme`. However, some operating systems don't support colour schemes, or some older browsers don't support `prefers-color-scheme`. The solution for this is to set default colours without the `prefers-color-scheme` and set the alternative colour scheme later.

For example:

```css
/* The light mode is set as default here without the `prefers-color-scheme` query.
This will be set if the query isn't supported for whatever reason. */

body{
    background: white;
    color: black;
}

/* This will be taken into account only if colour scheme preference is supported by the operating system or browser.
It will set the page to dark if the colour preference is set to dark. */
@media (prefers-color-scheme: dark) {
  body{
      background: black;
      color: white;
  }
}
```
Publish your first Web Application in AWS
Tags: aws, webdev, beginners, challenge
Published: 2022-03-28 11:05:08

Hi,
I just wrote a article on how to deploy your first static web application in AWS which is of part 01/2

Article Link: [aravindkumarvemula.medium.com](https://aravindkumarvemula.medium.com/publish-your-first-web-application-in-aws-34e28ee5a16f)

Do connect with me to read part 2 article....

If there is any mistake in my article pls.. comment down. So, that i can improve myself.

![follow connect](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jxp4qigogjtp3jhybboe.png)
Book Club: "Test Driven Development: By Example" #1
Tags: books, tdd, discuss, bookclub
Published: 2022-03-28 11:04:26

---
title: Book Club: "Test Driven Development: By Example" #1
published: true
description: A chapter by chapter discussion of "Test Driven Development By Example" by Kent Beck
tags: books, tdd, discussion, bookclub
series: Book club TDD By Example

---

![Book cover](https://learning.oreilly.com/library/cover/0321146530/250w/ ) Kent Beck's "[Test Driven Development: By Example](https://www.oreilly.com/library/view/test-driven-development/0321146530/)" was released in 2002. The book aims to explain how to use TDD to write quality code that works.

-----

## Chapter 1: Multi-Currency Money

Beck starts by introducing a To Do list of the behaviour needed to solve the problem. I've found doing this helpful for two reasons; it helps to stay focused on just the list item; you can't do this step if you don't know enough about the problem - and it's helpful to find this out before you start writing any code.

Once you have a list, and have selected which item to start with, you start writing a test. I have learned quite a bit about TDD in theory, but in practise writing tests is hard. Beck's examples use very small incremental steps,

> TDD is not about taking teeny-tiny steps, it's about being _able_ to take teeny-tiny steps.

This can be hard in an existing codebase, where there may already be test helpers doing multiple steps and, working in an unfamiliar area or domain can make this harder too. I usually start by writing a **given, when, then** statement in plain english and attempting to build it up bit-by-bit with working code. 

Having a test that fails as you write each part of it shows you that you're developing the code as you write your test. Race to green with code that works (you can make it lovely later when you refactor). If you discover problems along the way add them to your To Do list.

-----

🔎 View my code-along repo at https://github.com/ruthmoog/test-driven-development-by-example
How to do you preserve directory structure when creating a TS library?
Tags: javascript, rollup, webpack
Published: 2022-03-28 10:59:41

I have created a React UI library to share components between different project in my organization. But, when importing the components I always have to

`import {Module} from "my-package" `

because when building using Rollup or Webpack, it only output a single bundle. (more if splitting is involved)

This is not optimal. It works but it is not tree-shakeable. How do I preserve the directory structure when build the library or is there any other way to make my imports the following

`import Module from "my-package/Module"`

Thank you in advance.
How to make neumorphic elements in your website
Tags: webdev, css, beginners, design
Published: 2022-03-28 10:55:06

Neumorphism was a design trend where elements of the design appear to extrude out of the background while they still seem to be attached to it (They do not appear to float).

<figure>
![example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8ni8wkvnpc6ms4wxh5g3.jpeg)
<figcaption>uxdesign.cc</figcaption>
</figure>

Like [Glassmorphism](https://dev.to/satvik/how-to-achieve-simple-glassmorphism-effect-in-your-website-21o7) neumorphism is easily achievable using CSS. 

1. Create a div in your .html file

```html
<div class="box neumorphic-shadows">Neumorphism is cool</div>
```
2. In your CSS 
Set a background color for your page , neumorphism usually works best with dark backgrounds but it is upto preference 

```css
body { 
    background-color: #1b1e27; 
  }
```
<figure>
![color](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hurn6f0rfqveuqbjvjby.png)
 
<figcaption>#1b1e27</figcaption>
</figure>
Now for the element 
The only important thing to remember here is that color of your foreground element should be the same as your background otherwise it is just not neumorphism anymore
```css
.box{
    background: #1b1e27;

    // shaping the card 
    height: 5em;
    width: 20em;
    align-items: center;
    border-radius: 50px;
    display: flex;
    height: 200px;
    justify-content: center;
    margin-left: 35%;
    margin-top: 15%;
    padding: 10px 20px;  

    // font
    font-family: 'JetBrains Mono', monospace;
    font-size: 16px;
    color: rgb(255, 255, 255); // color of the font 

  }
```
Now to achieve the real effect we need to add box shadows

```css
.neumorphic-shadows{
    box-shadow:  5px 5px 31px #111319,
    -5px -5px 21px #373d5081;
  }
```

- the shadow value with positive pixel distance (5px) controls the shadows 
- the shadow value with negative pixel distance (-5px) controls the highlights

You can change the signs and values to change the direction and distance of the shadows/highlights respectively 
<figure>
![final result](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/20mptaonohxqhs7zi4v2.png)
 
<figcaption>final result </figcaption>
</figure>
 
**Footnotes:**
To make your job a lot easier you can use [neumorphism.io](https://neumorphism.io/), it's a great website that generates CSS code for the neumorphic effect . You can tweak the effect according to your liking and get the CSS code generated for it.