teleren/devto huggingface dataset:
That’s A Hat
Tags: python, beginners, showdev
Published: 2022-11-29 20:03:08

In creating my first Python game I originally was at a loss for what to do.

Inherently I prefer world building stories, but in pondering a base idea my brain finally supplied a picture of the Felix the Cat animated movie and how his bag could turn into anything to help him defeat his adversaries.

I decided I wanted my game to be based on having a magic hat that you could pull things out of that would help the hero. But the question was, help the hero do what. I decided that instead of a battle, I wanted the hero to be running from the police.

I liked the idea of skirting the rules in not really having bad guys, since the police are running after someone innocent. I also liked the idea of having no outward physical violence, instead using the object as a distraction or eating the object to change the health of the hero to advance the game. 

To give the game boundaries, I gave each of the five hat options only five items (which related to the style of hat it was) and after ten turns the player automatically lost, although the game could be won or lost after two turns.

I wanted all the items in the hat to be edible as well as useable as distractions for the humor of it, even though eating a real vespa might be rather difficult. (It’s magic!) Each item pulled from the hat was random and could either take health away or add health randomly as well. Eating the item had the possibility to lose more health than using the item as a distraction, but it could also gain the hero more health for their risk.

Tricky aspects of the code were deciding to make the police reactions random, but tying them to the amount of health lost or gained. Originally their reactions and the amount of health lost or gained were all random, but I felt that having the police “unmoved” but gaining 30 health didn’t make logical sense.

I also had to play with the logic for what happened when the hero had gone through all the items in their hats. I decided it was an immediate loss, and instead of deleting the first hat item array from the nested array when the hat was empty, I moved it to the end so I could check to see if the two nested arrays were both empty and if so, end the game.

Overall this was my first game created in Python and I’m pleased with the way it turned out.

Link to game: https://replit.com/@Meg-Div/Thats-A-Hat#main.py

Link to code: https://github.com/Meg-Div/DigitalCraftsProjects/tree/main/rpg-game
React life-cycle events in functional components
Published: 2022-11-29 19:41:14

Functional components are easier to deal with. We need less code to get the same result comparing to Class components. 

So the question is: how to deal with life-cycle events? The answer is hook [useEffect](https://reactjs.org/docs/hooks-effect.html). 
This hook is equivalent to life cycle methods componentDidMount, componentDidUpdate and componentWillUnmount.
 

```javascript
import React, { useEffect } from 'react';
const ourComponent => () => {
   useEffect( () => {
      // Anything in here is fired on component mount.
   });
}
```

How many times this code inside will be executed depends on array of dependencies passed as a second argument. 
If we don't pass any array (even empty) our effect will be fired with every render.
If we want to execute effect only on first render we need to pass empty array. 

```javascript
useEffect(() => {
   console.log("Effect has been called");
}, []) // Empty array as dependency, useEffect is invoked once
```
 
If we pass value inside array in second parameter, the effect will be fired only when the value from previous render is not the same.

```javascript
const[state, setState] = useState(0); 
     useEffect(() => { 
          console.log(state); 
          // since we are using state, we have 
          // to pass it as a dependency 
     }, [state]) 
```
We can manage componentWillUnmount adding return function inside effect. Everything inside return will be fired when component unmounts.

```javascript
const ComponentExample => () => {
    useEffect(() => {
        return () => {
            // Anything in here is fired on component unmount.
        }
    }, [])
}
```
There is also possibility to use it in both situations. componentDidMount and componentWillUnmount 

```javascript
const ComponentExample => () => {
    useEffect(() => {
        // Anything in here is fired on component mount.
        return () => {
            // Anything in here is fired on component unmount.
        }
    }, [])
}
```
Codebytes: REPL it with NestJs
Tags: codebytes, nestjs, repl, node
Published: 2022-11-29 19:17:02

---
title: Codebytes: REPL it with NestJs
published: true
description: Utilise REPL to debug NestJs apps contextually.
tags: #codebytes,#nestjs,#REPL,#nodejs
---

I am a big fan of byebug, a powerful ruby debugger, and I was thrilled to know about the REPL server in the [NestJS V9 release notes](https://trilon.io/blog/nestjs-9-is-now-available).

![debug infograph](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a6cy0z38ygxw2nqjhlwz.png)
[source: manshagraphics-Flaticon](https://www.flaticon.com/free-icons/debug)

The REPL server acts as a debugger for NestJS by launching an interactive server with all of the context required for your nest app. So you can basically interact with all of your methods directly.

To start the REPL server in your NestJS app,

* Make a REPL entry file called `repl.ts` alongside `main.ts`.

* Include your app module to the repl method in the `repl.ts` file.

```ts
// repl.ts

import { repl } from '@nestjs/core';
import { AppModule } from './app.module';

async function bootstrap() {
  await repl(AppModule);
}
bootstrap();
```

* Launch your repl server using the below command,

```bash
npm run start -- --entryFile repl
```

It will initiate an interactive node server, from which you can easily access your nest app methods by getting them,

```ts
get(AppService).sayHelloWorld()
```

![repl server exec screenshot](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jhq5o1g6q9j08umzeg6z.png)

[play with REPL on codesandbox] (https://codesandbox.io/embed/nestjs-repl-q1vgot?expanddevtools=1&fontsize=14&hidenavigation=1&module=%2Fsrc%2Frepl.ts&theme=dark)

for more usage methods on REPL click here to read the [official documentation](https://docs.nestjs.com/recipes/repl).
Fluent Insights EP4: Slots
Tags: webdev, javascript, react, fluent
Published: 2022-11-29 19:10:52

Fluent UI Insights is a series that describes the design and decisions behind the Fluent UI design system.

In the fourth episode, members of the Fluent UI team explain implementation details and context behind APIs in Fluent UI React v9: slots, JSX children and triggers.

In this video the team covers a ton of history around slots and their evolution to what they are in Fluent UI React.

Timestamps:
00:00 – Bloopers
00:22 – Intention and motivation for slots
01:53 – Slots v1 in Semantic UI React
03:33 – Slots v2 in Stardust UI React
04:42 – Slots v3 in Fluent UI React v9
06:04 – Component groups: collections and elements
06:50 – Collections API in Semantic UI React 
07:45 – JSX children to define components
08:11 – Issues with React Context and useContextSelector
09:03 – Limitations of JSX approach
10:43 – Connection between a host component and children
11:33 – Why triggers API is needed?
12:35 – Triggers API journey
13:24 – Triggers API in Fluent UI React v9
14:36 – Limitations of Triggers API
14:56 – Summary of the episode
15:27 – Bloopers

Enjoy!

{% embed https://youtu.be/uxuIJlYmKGk %}

Check out slots in action with this simple post on how to use them:
{% embed https://dev.to/paulgildea/using-slots-with-fluent-ui-react-v9-jf1 %}

As always let us know what kind of content you want see from Fluent - UI React by visiting us on:
- GitHub: https://github.com/microsoft/fluentui
- Docs: https://react.fluentui.dev
- Twitter: https://twitter.com/fluentui
Blog
Published: 2022-11-29 18:41:29

I'm not even sure this is how you write a blog or the right place, I've never written a blog before so I'm just gonna introduce myself, Im Chris I've dabbled with Xcode in the past and html, I'm currently working as a scaffolder, before that i was an electrician and my end goal is to change my career path, so follow me as one day you might want ti hire me, thanks.
Using localStorage with React Hooks in TypeScript
Tags: typescript, javascript, react, localstorage
Published: 2022-11-29 18:39:35

Source code: https://github.com/Arpitha-Rajeev1/vite-card-selection

Many a time we want to select items and retrieve them indefinitely. This can be in an E-commerce app where the user selects multiple items among the displayed items. In this article, I am using useState and useEffect hook, react-bootstrap, react-vite, TypeScript, localStorage. We will start with creating a new react app using vite as it is super fast. We will use React and TypeScript. Then we will install react-bootstrap and will add import 'bootstrap/dist/css/bootstrap.min.css'; in main.tsx file.

App.tsx will contain the card component from react-bootstrap. Here, the red color border will appear when the user selects that particular card and we have a function toggleSelect() to select and deselect the card. map is used to retrieve the elements from the response we get by calling API.


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

We initialize the state variables along with the types. We are using a dummy API from JSON placeholder to get some sample responses, a count variable is an object that stores the response and arr is a number array. Since, localStorage only stores strings, we use JSON.stringify() to store an array or object. If we try to directly store a JavaScript object in the localStorage without converting it to string, then the value won't be stored and it returns [object, object] which is a string representation of an object instance and its value is never read. Similarly, when we want to read the value stored in localStorage we use JSON.parse() that converts a string to JavaScript object.


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

Finally, we have our toggleSelect() function to select and deselect the cards. Whenever we use a state variable to store an array, we must use the spread operator while updating the state. The spread operator will store the previous values in an array and appends the new value finally updating the array. We are using the filter method to remove the elements.

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

The UI looks like this:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0zilbeal21bu2909zq1h.PNG)
What is SCOPE in JavaScript?
Tags: javascript, beginners, webdev, programming
Published: 2022-11-29 18:39:19

It's all about accessing variable. The accessibility or validity of a variable is determined by it's **SCOPE**.
Suppose a variable is declared inside a function. And you try to access the variable outside that function. 
Then you will encounter an error that the variable is not defined.

Ex:
![example of not defined variable](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gb93pyx7kyseouzs8o5b.png)

**But Why?**
Because the **scope** of that variable is limited to that function and you can't access that.

### Scope type
There are two types of scope in javascript.

1. Local Scope
2. Global Scope

![scope in javascript](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dwkz9vwom5jwj7kg1276.png)

### What is Local Scope.
Whenever a variable is declared inside a **function** it is said to have **local scope**.

![javascript local scope examplen](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/825djal9mkcic2hmxem1.png)

A variable declared inside a function can only be used inside that function. We can't access it outside the function

### What is Global Scope.
The variable which can be accessed everywhere are said to have **global scope**. These variable are not declared inside any function.

![javascript global scope example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t0oozario38ubzt5ms84.png)

A global variable can be accessed by any function.
Here, we assigned value of a variable which is outside the function.

![scope in js](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c8m68mmvmqup1b67afod.png)

In the above snippet, we have a variable **globalScope** whose scope is not limited to any function and thus can be accessed everywhere, even within a function

You are done, but wait...

There are something call **Hoisting**.

#### Hoisting

In **JavaScript**, all variable declarations are moved to the top of their scope. This is known is **hoisting**.

In JavaScript, a variable can be used before it is declared! wait what? yes, read it right.

I mean that:

```js
var newVar = 10;
...
...
```
```js
...
...
var newVar = 10;
```

Will result the same output, because all the variable are automatically moved to top when we run the program. 

This concept is known as **hoisting**.

### Conclusion
A **scope** of a variable is the block where it can be accessed and used.

If a variable is declared inside a **function** it is known as a **local variable**.
If a variable is declared globally, it is said to have a **global scope**.

**Hoisting** is a JavaScript's behaviour of moving variable declarations to the top.


See yaa...
Fast embedded templates in Go with quicktemplate
Tags: go, programming
Published: 2022-11-29 18:34:26

Wrote a new post on my site about using quicktemplate in Go to generate efficient HTML documents. I would post it here but the syntax of the example code in the post is breaking the rich content embedding dev.to provides, so you'll have to read it there at: https://andrewpillar.com/programming/2022/11/29/fast-embedded-templates-in-go-with-quicktemplate/
Array.from VS Array.prototype.map
Tags: javascript, es6, array, webdev
Published: 2022-11-29 18:06:21

Hello there,

let's discuss these 2 amazing methods or functions in a proper context and get to know each of them. 

Array.From(arrayLike) is a static method which can be used to create an array from any sort of **array-like non-array object** in order to perform any available instance method of Array.prototype. Not clear yet ? stick with me I will try to make it clear.

Array.prototype.map is a instance method which also works similar to the Array.from but it is only working with instance of the Array.

Consider the following examples.


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


Output:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cyis294iqakzudts2do7.png)
 
Here you can see, the output is same but the internal working is a bit different. 

From the above example we cannot use Array.from as instance method on any array. Same goes for map, we cannot perform map method on Array class itself. 

i.e 


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


When we consider map, it will work only on instance of an Array. 

i.e 


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

so now is it possible to create a whole new array with the Array.from ? Yes you can do the above with the following code. 


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

## Important
**Now since you're able to create a whole new array with the use of Array.from method, you can perform all the other Array.prototype methods such as sort,push,append,pop and etc with newly create an array. **

Array.from is really helpful when you are working with very large and complex project. it helps to prevent any breakdown while dealing with array methods when sometimes your incoming data or response looks like array but it is non-array object. In this case one can always double check and create an actual Array to perform other useful array methods. 

P.S Scenario is based on my own working project. 

Thanks
Send and Request Data With Webhooks With AI Studio
Tags: lowcode, nocode, aistudio, webhooks
Published: 2022-11-29 17:55:17

---
title: Send and Request Data With Webhooks With AI Studio
published: true
description: Learn how to Send and Request Data With Webhooks With AI Studio
tags: lowcode, nocode, aistudio, webhooks
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6xl13706z1dn39v7xkjv.png
---

[Vonage AI Studio](https://www.vonage.com/communications-apis/ai-studio/?icmp=l3nav%7Cl3nav_gototheaistudiooverviewpage_novalue) is a Low-Code / No-Code conversational AI platform that helps businesses handle complex customer interactions through voice and text. As you begin to create virtual agents with AI Studio, it won't take long before you'll need to retrieve data from a third-party source such as a Webhook. In this blog post, you'll learn: 

* How to retrieve data from a Webhook in AI Studio from a REST Endpoint
* How to store the data as a parameter (for later use)
* Examples of conditional statements to perform operations with the data

In order to understand how to interact with a Webhook in AI Studio, we'll use a scenario in which a bank would like to validate a customer's identity by matching a pin number with the number retrieved from a Webhook. The payload might look like the following: 

```json
[
  ...
  {
    "id": 4,
    "email": "michael.crump@vonage.com",
    "phone": "14259999999",
    "name": "Michael Crump",
    "cc_balance": "76.31",
    "pin": "1234"
  }
]
```

Once the customer dials the Bank's phone number, we'll use the **phone** number to look up the correct value for the **pin** via this Webhook. 

> To continue reading the full article, please [click here](https://developer.vonage.com/blog/22/11/29/send-and-request-data-with-webhooks-with-ai-studio)

Conclusion

If you have questions or feedback, join us on the [Vonage Developer Slack](https://developer.vonage.com/community/slack) or send me a Tweet on [Twitter](https://twitter.com/mbcrump), and I will get back to you. Thanks again for reading, and I will catch you on the next one!
Buy Facebook Ads Accounts
Tags: webdev, beginners, react, facebook
Published: 2022-11-29 17:55:05

[Buy Facebook Ads Accounts](https://safebizs.com/product/buy-facebook-ads-accounts/). Buy Facebook Accounts with Marketplace. 100% real phone number verified Aged Facebook Ads Accounts with a money-back guarantee.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/715u73vd95lixwg7okb4.jpg)
Fine-tuning an old data-processing pipeline
Tags: devops, rambling, datascience
Published: 2022-11-29 17:51:19

For work, I've built a data processing pipeline that generates prediction models from data. There's a few steps in there, namely a few optimization routines that we put the data through in order to obtain those prediction models, but the processing itself is still pretty manually triggered. I have a script for each of the steps, and I have shell scripts to batch-trigger each of the steps multiple times for different datasets, but I have yet to link them all together via one function call. 

one reason this one-click-to-run-entire-pipeline structure hasn't been built yet is because we have historically needed to iterate within one of the steps and not across all steps. this is because we don't frequently obtain new datasets, so it was often the case that step 1 would be completed and we'd iterate in the later steps. only when we get new data would we go back to step 1.

one issue with not having a structure to run the entire pipeline is that it becomes mentally taxing to remember which datasets and what parameters we used to fit the current set of models. for each step, we do record this information in a .json, but because this information is spread out in multiple places, it becomes hard to know for sure all the parameters involved for a given set of models.

Is this really a priority though? Perhaps it is, now that we don't have much else to do. What would be especially impressive is to integrate it with Gitlab. I believe the trigger for that could be a new pull request that gets merged into the `develop` or `main` branches. then, it'd process everything from step 1 to step n and make all the plots that we usually use to analyze the models' performance. That would be really sweet.

Perhaps I can start with learning how to trigger a script action upon a push commit
Docker Pune Nov 2022 meet-up
Published: 2022-11-29 17:40:42

It all started in the beginning of November 22 when my entire LinkedIn feed was filled with Amazon Web Services (AWS), Google Cloud Partners, Docker, Inc events in multiple cities. So just out of curiosity I visited Docker Pune meet-up group and I noticed we are not hosting any active events and it's almost inactive. I stepped up to host active meet-ups and events in Pune. With the help of previous organisers and Docker captain Ajeet Singh Raina, I became a new Docker Pune leader on 16 Nov, 22.

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


## **Nothing is more expensive than missed opportunity**

Some opportunities you just can't miss with the fear to fail. You will have to take challenges to get better. When I took this role, I knew this is not going to be an easy task at all. On other side, I will get experience to manage and host events, speakers, venue, promotions, new learnings about Docker products and list continues.

As a new Leader we hosted our first Docker Pune meet-up on 26 November at Red Hat where Vishal Maral gave talk on "D for Docker", Akshay Ithape shared "Docker Image security best practices" and I took workshop on "Docker 101: Getting started" and also shared my Google Summer of Code experience.

{% youtube 86nVeJa5H00 %}

Not everything went as planned but few good things happened which we would like to share with all of our readers.

1. We got massive 130+ registration within 3 days.
2. We got event venue within a week and entire credit goes to Vishal for helping us with it.
3. Brilliant audience. Never seen such active & curios audience, so many questions during and after talks.
4. Network with new people.
5. Event management experience

I will never forget this amazing experience of wearing two hats at the same time - Event organiser and speaker, those sleepless nights making plans, presentations to make this event great.
What next ? we're planning to host our next Docker Pune meet-up in mid December.

## **Important Links :**
1. **Docker Pune Slack** - https://join.slack.com/t/dockercommunity/shared_invite/zt-1k5st1ts3-IDvhitv6gyD7IOBeLS0m_A
2. **Docker Pune LinkedIn group** - https://www.linkedin.com/groups/9264407/
3. **Docker Pune meet-up group** - https://www.meetup.com/docker-pune/

Do reach out to us, if you're interested to talk in our next events, volunteer, help with the promotions, venue, sponsor for the event.

This event wouldn't be possible without your help. Thank you Docker, Inc [Red Hat](https://www.linkedin.com/company/red-hat/) [Ajeet Singh](https://www.linkedin.com/in/ajeetsraina/), KonfHub Technologies, [Vishal Maral](https://www.linkedin.com/in/vishal-maral/), [Akshay Ithape](https://www.linkedin.com/in/akshayithape/).

Subscribe to my [LinkedIn newsletter](https://www.linkedin.com/newsletters/devops-sre-opensource-6936236167226867712/) and follow [Sagar Utekar](https://www.linkedin.com/in/sagar-utekar/) on LinkedIn for more such posts, content related to Open Source, GSOC, DevOps, SRE, meet ups, etc.