teleren/devto huggingface dataset:
My Chingu Experience
Published: 2021-12-19 18:56:36


**CHINGU ?**

I discovered Chingu on from twitter, it is basically a platform for developers and project managers at any level of their journey to gain experience working on real life projects.


## How I benefitted from Chingu

1. I learned about Agile methodologies. It is basically the act of dividing the time between the start of your project and its delivery date into sprints of equal duration in which you'll be completing tasks.As a beginner this helped me to break down tasks into user stories (small chunks) making it easier for me to meet my daily and weekly goals bringing my closer to the end of whatever project I am working on as a whole 

2. How to write a good ReadMe file.Before I joined Chingu I didn't know of the importance of writing a good ReadMe file and I learned that through Chingu. Writing a detailed description of how your project works and how to run it and many other details is just as important as the project itself.

3. Working in a team. I had the opportunity to work in team for the first time. I appreciated mastered my git cli commands more, resolving merge conflicts and understanding how the git workflow works. As a new developer, this experience equipped me with enough knowledge to continue to work with a team. It gave me a first hand feel of how work is done in teams. I learned from my colleagues and appreciated the knowledge I gained from them.I learned how to collaborate with other developers. I learned how far good and effective communication can bring out the best in people and can create a conducive environment for discourse.

4. Networking, In this industry competence goes hand in hand in marketing yourself. Marketing yourself is easier when you have a lot of networks. I appreciated the opportunity I had in meeting new developers from all over the world. 


Special thanks to all the members of **toucans-team-03**
Program manager - Cathy
Developer - Ayman
Developer - Mariam
Developer - Opeoluwa
Developer - Carl (Myself)
Can bearded dragons eat sage?

Published: 2021-12-19 18:44:12

can [bearded dragons eat sage](https://beardeddragonsociety.com/can-bearded-dragons-eat-sage/) or not. The direct answer is yes. But you can only feed it under a prescribed amount. As pet owners, it is our responsibility to be responsible and also to be attentive towards all of the pros and cons for the items that we are feeding to the animal.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ydebgst7fh9h1374gnqb.png)
Log 4j vulnerability
Tags: vulnerability, log4j, security, java
Published: 2021-12-19 18:39:07

You need to catch up on log4j version to fix the vulnerabilities. If not upgraded, it can lead to the leakage of sensitive data.

please check out : https://indianexpress.com/article/technology/tech-news-technology/log4j-vulnerability-experts-says-it-can-lead-to-leakage-of-sensitive-data-7675518/
Looking for Apps Script guidence 
Published: 2021-12-19 18:36:45

I have a project in which I would Like to grab a range of data from a particular sheet. And Store it in a  Key value pair.

for example, below represents the data in 2 col and 3 rows in my sheet

Joe      23
Frank   45
Sue      25

I would like to pull that data and store it in a JS  dictionary or Key value pairs

 [  [Name: Joe, Age:23] , [Name: Frank, Age:45], [Name: Sue, Age:25] ]

Next I want to Match the Name  from a array full ok the Keys,  and place the value for that key it into the correct position in an data array

Key Array

[ George, Frank, Jim, Sue , Bob, Joe ]

data array

[ 0, 45, 0, 25, 0 23 ]

Any help would be greatly appreciated

Bob J
Advent of Code 2021 - Day 19
Published: 2021-12-19 18:35:16

---
title: Advent of Code 2021 - Day 19
published: true
description: In this video series, I try to challenge myself with the Advent of Code trials. Each solution will be published to Github, and I hope you will learn something from my coding mistakes and perhaps send some code my way on how you have done these challenges. I know by reading code, so this is such an exciting thing for me.
tags: 
cover_image: https://i.ytimg.com/vi/YohzfgBNNSw/maxresdefault.jpg
---

{% youtube YohzfgBNNSw %}

{% youtube lPnTBEhFfkM %}
Updating Existing State in React
Published: 2021-12-19 18:16:34

how we update state based off of existing values in the state.
So I have a score value in the state.
Imagine this is a game and when we click this button single kill I want it to add one to the score value.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ssh3g22e1c88s2uufvkz.png)

  
it's best if you are updating existing values in the state to use the callback form .So this magic callback form.
What's that look like this upset state and we pass in a callback function instead of passing in an object and instead of that callback function we make the current state a parameter and it should return an object that represents the new state.
So [here's](https://github.com/mohasaket/react-state-pattern) an example we can set state will pass in a function and we need to add this parameter current state or you can just call it state.
Create AppleTV UI Animation with AtroposJS | HTML CSS JavaScript Tutorial
Tags: html, atropos, atroposjs, appletv
Published: 2021-12-19 18:10:07

---
title: Create AppleTV UI Animation with AtroposJS | HTML CSS JavaScript Tutorial
published: true
description: In this AtroposJS video I will explain how to create a super cool 3D animation effect that you get when using your AppleTV while hovering over a movie poster image.
tags: html, atropos, atroposjs, appletv
canonical_url: https://www.timo-ernst.net/blog/2021/12/19/create-appletv-ui-animation-with-atroposjs-html-css-javascript-tutorial
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ph6qliohnlpm745gapex.png
---

In this AtroposJS video I will explain how to create a super cool 3D animation effect that you get when using your AppleTV while hovering over a movie poster image.

![Atropos Example Gif](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6owpi1182xd2zn6zr32f.gif)

## AtroposJS Tutorial Video

{% youtube BU9IZHk1LPc %}

## Links

- My Blog: https://www.timo-ernst.net
- My Twitter: https://www.twitter.com/timo_ernst
- On DEV: https://dev.to/timo_ernst
- AtroposJS Docs: https://atroposjs.com/docs
- Source code: https://github.com/valnub/atropos-demo
simple way to fetch data using graphQl and Apollo
Tags: react, javascript, node, beginners
Published: 2021-12-19 17:48:50

Hi,
  Today i am going to show how to fetch data using graphql and apollo client
      here first you need two seperate folder one for client and other for server 

in server you are going to install graphql, apollo-client etc..
 here i am just using graphql playground for displaying the data using queries
for database i am not using any database program just create myself and playing around that

lets see what's there in the server

two important thing need to know about that before 

schema : 
 it's human-readable schema definition language (or SDL) that you use to define your schema and store it as a string.

type-system : 
  The most basic components of a GraphQL schema are object types, which just represent a kind of object you can fetch from your service, and what fields it has. In the GraphQL schema language


schema 
```
const graphql = require("graphql");
const {
  GraphQLObjectType,
  GraphQLSchema,
  GraphQLInt,
  GraphQLString,
  GraphQLList,
} = graphql;

//mock data
const data1 = require("../database/mockdata3.json");
// this is typedef we can see this after
const UserType = require("./TypeDefs/UserType");

const RootQuery = new GraphQLObjectType({
  name: "RootQueryType",
  fields: {
    getAllUsers: {                             
      type: new GraphQLList(UserType),
      // you can pass argument 
      args: { Name: { type: GraphQLString } },  
      resolve(parent, args) {
          // write return what you need back
        return data1;
      },
    },
  },
});
// finally we are going to export this 
module.exports = new GraphQLSchema({ query: RootQuery });
```
typedef - just represent a kind of object you can fetch from your service, and what fields it has
```
const UserType = new GraphQLObjectType({
  name: "User",
  fields: () => ({
//any fields you can define but you must enter the data-type
    Name: { type: GraphQLString  },
    Age: { type: GraphQLInt },
  }),
});

module.exports = UserType;
```

and finally we need to run this using express or http, here i am using express

```
const express = require("express");
const app = express();
const PORT = 6969;
const { graphqlHTTP } = require("express-graphql");
const schema = require("./Schemas/Schema");
const cors = require("cors");

app.use(cors());
app.use(express.json());
app.use(
  "/data",
  graphqlHTTP({
    schema,
    // this is graphql playground field 
    graphiql: true,
  })
);


app.listen(PORT, () => {
  console.log("Server running");
});

```

for client you can use any of the framework to fetch that data 
and display it 

we can see how to get that data from server and display it in client in next post 
bye!
Linux Mint Visual Studio Nasıl Kurulur?
Tags: linux, linuxmint, vsc, visualstudiocode
Published: 2021-12-19 17:46:00

Bu yazımda Linux Mint dağıtımına nasıl Visual Studio Code kurulduğunu anlattım. Bu adımları Debian temelli dağıtımlarda da kullanabilirsiniz. Programı kurmak için aşağıda farklı yöntemlerle belirttim.
**1. Yöntem** — Yazılım Yöneticisi
Linux Mint’i yüklediğinizde gelen Yazılım Yöneticisi veya İngilizcesi Software Manager’ı açalım.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ffue90br5l3q42bzm3z8.png)
 
Uygulama açıldıktan sonra sağ üst köşedeki arama butonuna tıklayıp Visual Studio Code’u aratın.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/18f35pb86539z9wn68x2.png)
 
Install (Yükle) butonuna tıklayarak programı yükleyin.
**2. Yöntem** — Websiteden İndirme
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5ygbgzppv3fg8jldvjr8.png)
 
https://code.visualstudio.com/ Adresinde iki adet seçenek bulunuyor. Biz Debian temelli bir dağıtım kullandığımızdan dosya uzantısı .deb olanı indireceğiz.

.deb olanı indirdikten sonra bu .deb dosyasını iki farklı şekilde kurabilirsiniz. Aşağıdakı yöntemlere göz atın.
**3. Yöntem**
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kvcch388wm6vh3t3ggyt.png)
 
İndirilenler klasörünü açıp dosyaya çift tıklayarak kurmak.

Açılan pencerede install diyerek paketi kurabilirsiniz. Bende böyle bir seçenek yok çünkü program zaten kurulu.
**4. Yöntem**
Terminali açın ve şu komudu girin;
$ sudo dpkg -i code_1.63.2–1639562499_amd64.deb
Not: Bu yazıyı eğer sonradan okuyorsanız, komudu girerken hata verebilir çünkü programa ileriki zamanlarda gelen güncellemelerde dosya adı da değişecektir. Bu yüzden indirdiğiniz dosyanın adını mutlaka kontrol edin.
CSS position property
Published: 2021-12-19 17:29:28

I just simply write CSS position tropic. I  explore some web tutorials and find out some main concepts. I want to just share people for my study and grow my skills and  I want to spread and share with people my knowledge.
**CSS position:** 
CSS position property positioning any element in a web page. how an element stays on a web page depends on the CSS position property. position property has some value static, absolute, relative, fixed, sticky.
**Static:**
Static is the default value of the position property. Top,bottom,left,right,z-index are not affect.
Have 3 div element.their default value is static.
**Relative:**
Relative value
Dec 19: Dev Holidays Guide ⛄️
Tags: stateofdevs, bahhumbugtip, mentalhealth, tips
Published: 2021-12-19 17:28:12

Bah Humbug Tips are my own way of coping & recovering from burnout & holiday stress.

###🎄  Today's Bah Humbug Tip of the Day. 
{% twitter 1472618001677512704 %}

######🎁 Today's Options 
{% twitter 1472618002365308935 %}
{% twitter 1472618003531325445 %}

You can find more tips here & on [Twitter](https://twitter.com/stateofdevs). Let me know in the comments if any of these tips helps.

> If you're struggling w/ burnout & open to sharing your story, please [take the State Of Devs survey](https://stateofdevs.com/helps/dev). 🗳 Thanks!
MY LEARNINGS: API 101 & POSTMAN
Tags: postman, postmanstudentexpert, learning
Published: 2021-12-19 17:27:31

This was the first time I attended a session on APIs and Postman. The session was mind boggling😍😍. I came to know what is an API, its advantages, common APIs, about Postman, send data, receive data, different Datatypes, status codes etc. 

                            API
API(Application Programming Interface), which is a software intermediary that allows two applications to talk to each other
i.e Basically APIs act as a Facilitator.
Its advantages are:-

- It reduce the work load of software developers.

- API is also used to improve the features.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/un55popzqkfpadp9wx4s.png)
API allow developers to access data from a service(like Google, Facebook etc) without any knowledge of how the code base has been implemented.

                           POSTMAN
Postman is an API platform for building and using APIs. Here I familiarized with postman UI.
Request and Response are the important things in Postman.
Different types of request that we use are:

- Get Request - To retrieve the information
- Post Request - To sent the information
- Pull Request - To update the information
- Delete Request - To delete the information

REQUEST contain three parts:

1. Parameters
2. Authorization
3. Headers

RESPONSE contain three parts:

1. Status Code
2. Headers
3. Accessing Body data

Different types of status codes are:

- 200 OK - means we got the data.
- 201 Created - means data is created
- 404 Bad Request - means their is some error.

Then we forked a workspace to my workspace and familiarized postman. On that workspace I worked on Get request, Pull request, Delete request etc. There we added new Jokes, updated the existing 
ones, deleted some. For Post request we used JSON body for posting new jokes. There is a documentation on postman through which we can get a better understanding.

There are many datatypes in postman, of which we mainly use JSON. The format of JSON file is:
{
  "id": "1",
  "author": "Dhanush Raj R J",
  "joke": "Bugs are updated features",
  "source": "iali.dev"
}
The 'id' is very crucial for Put request. Some APIs are public, some are private. The private ones requires Authentication in order to protect the privacy. If we select a particular part of the link we can set it as a variable.
              
The session was really helpful and I learned many things what is an API, about Postman, Request, Response etc.
The session was handled beautifully by Adam Oomen Jacob. He made sure that we understood every bits and pieces. I thank Tinkerhub MEC and Postman for organising a wonderful session.
Technical_Documentation_codecamp_web_proj_4
Tags: javascript, webdev, programming, css
Published: 2021-12-19 17:26:29

Done with Responsive Web Design Project Build a Technical Documentation Page by [freecodecamp.org ](freecodecamp.org ).

github link : [Technical documentation](https://github.com/TechnicalAmanjeet/Freecodecamp-Responsive-Webdesign-Projects/tree/master/4.Technical_documentation)

{% codepen https://codepen.io/TechnicalAmanjeet/pen/oNGwGWQ %}
Tips to make website responsive !
Published: 2021-12-19 17:11:49


A website's responsive design is very crucial. No matter how great your website's user interface is, if it doesn't fit on every screen, from large to small, it will lose its significance.
So there will be a lot of basic things that I will cover in this blog so that you don't have to worry about responsiveness.


Flexbox

When you are struggling with responsiveness. Flexbox solves many difficult problems. Because it has a one-dimensional layout, it works only in one direction. Basically, it works with your web content. Some examples are given below how it works in column and rows in website.

Example:

If you work with flex rows responsive ,then set the width of left and right to 50%, center to 100% and then declare "flex-flow: row wrap;" on the container.

Meanwhile, if you work with flex column responsive ,screens that are 992px wide or less, the columns will then transform it’s size from  four columns to two columns. At the same, The column will be on top of another rather than close to each other in 600px wide or less.


Grid system

Grid  will change its layout according to the size of the screen. It will adjust itself to any screen. It is very suitable for large scale layout as it can control two dimensional layout both on rows and columns. Grid layout also help you to write less code than media queries and it is also easier to apply.


You can use display: grid to use grid in your container.

Based on row and column you need to declare grid-template-rows and grid-template-columns in CSS.
    
You can also give a gap between rows and columns by declaring grid-column-gap and grid-row-gap.


Bonus Tip

100% and Block

To make any div and section responsive in a small screen you can use Width 100% and block. But be careful it is not appropriate in every situation.
Java Script Try Catch
Tags: javascript, programming
Published: 2021-12-19 17:05:22

**Try Catch**

There will be mistakes in certain programs, no matter how proficient you are at programming. Unexpected user input, an incorrect server response, or any other reason might generate these problems. Try catch in JavaScript allows you to catch mistakes and perform something more acceptable instead of dying. In this article, we'll look at how JavaScript utilizes try-catch to handle exceptions in the order listed below.


**In JavaScript, handling with Runtime Errors**

Error handling has progressed from the days of Netscape and Internet Explorer 4. You don't have to accept what the browser throws at you in the event of a JavaScript error; instead, you may take control of the situation. When a JavaScript error occurs, the try-catch statement in JavaScript aids in rerouting.

Try-catch, together with other defensive coding approaches like Object detection and the onError event, allows you to maneuver around mistakes that would have previously stopped your script dead in its tracks.


**What is Try Catch in JavaScript?**

Exception handling has been added to JavaScript in recent versions. To manage exceptions, JavaScript uses the try-catch construct and the throw operator. You can capture programmer- and runtime-generated exceptions, but not syntax problems with JavaScript.

The try statement is used to specify a block of code that will be checked for problems while it runs. The catch statement, on the other hand, is used to specify a block of code that will be run if the try block fails.

The statements that JavaScript tries to capture are in pairs:

try {

}
catch(err) {

}

When an exception occurs in the try block, the exception is thrown into err, and the catch block is run.

**Try Catch Example**
Here's a try-catch example in JavaScript:

var message, x;
message = document.getElementById("p01");
message.innerHTML = "";
x = document.getElementById("demo").value;
try {
if(x == "") throw "is empty";
if(isNaN(x)) throw "is not a number";
x = Number(x);
if(x > 10) throw "is too high";
if(x < 5) throw "is too low";
}
catch(err) {
message.innerHTML = "Input " + err;
}
finally {
document.getElementById("demo").value = "";
}
}
</script>
  
</body>
</html>

**I hope you now understand how to try catch is used to catch mistakes in JavaScript.**
Building a emotional support friend - Dasha AI
Tags: ai, dasha, tutorial
Published: 2021-12-19 16:56:16

**What is Dasha AI?**
Dash AI can be used to embed realistic voice and text conversational capabilities into your apps. Feels almost human ;)
**How can Dasha AI help?**
Dasha uses ML models where it listens, understands and answers just like humans do. This is how we got the idea of using Dasha AI at the time of mental health crisis when humans may or may not be available around them. Dasha has a call feature in which it asks you questions and understands your emotions by the way you speak. It helps you take the stress off by talking to you and assuring that you are feeling better.
**How did we implement Dasha AI?** 
We made an app called DashiMotion which detects your emotions and makes Dasha call you if you are stressed or sad. Here's the part where Dasha becomes your emotional support friend BayMax and stays , listens to you till you feel good. We added custom intents which are helpful for having friendly conversations between the user and BayMax. We also added digressions to keep the conversation smooth and flowing to make it more human like interaction. Understanding human emotions are complex but with BayMax powered by Dasha AI you'll never feel that no one understands you. Remember there's always someone who listens to you (may or may not be human but still your friend).

```
 "yes": {
        "random": [[{ "text": "Great! I'm here for you" }],[{"text":"you can tell me anything and everything"}],[{"text":"I'm here to listen"}]]
      },

      "no": {
        "first": [
          {
            "text": "I can hear you and your thoughts. That's a secret between us. Would you like to tell me?"
          }
        ]
      }
```
**What's next for DashiMotion**
Implementing text features of Dasha in the app. Adding text and call features of Dasha directly from the web app to simplify the process and make it easy for the users of the app.