teleren/devto huggingface dataset:
Bezier Linechart in React Native
Tags: reactnative, android, ios, react
Published: 2021-07-15 13:31:29

![Linechart](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1lqqmkoca90xx2i8loos.gif)
 Charts are easy way to convey data stories on mobile unlink using tables full of data especially while developing business dashboard apps, finance apps, mobile banking apps, analytics apps, e-commerce apps, health apps, and fitness apps etc.


In this tutorial, we will implement Bezier Linechart in React Native. We are going to use the react-native-chart-kit library, which has the ability to add different types of charts like line charts, Pie charts, Bar charts etc to our React native apps. The library provides a Charts API that is easy to use and highly customizable.

Lets Start.

Installing React Native Charts Kit:

Step 1: 
Install the react-native-chart-kit npm package into our existing React Native project using NPM or yarn.

npm install react-native-chart-kit
or
yarn add react-native-chart-kit

Step 2: 
Importing Charts components into React Native.
[Note: We are using only one type of chart (Linechart) for this tutorial,there are many types like LineChart,BarChart,PieChart, ProgressChart,ContributionGraph,StackedBarChart.]

You can do so by writing the following piece of code:
```
import {LineChart} from 'react-native-chart-kit'
```
That’s it. Now you get access to Linechart, which are accessible from your JavaScript code.

Step 3:
Creating a Line Chart in React Native

As we have already imported Linechart components in the previous step, we need to provide the data to the built-in component as follows:

```
<LineChart
   data={{
           labels: [Jun 21,May 21,Apr 21,Mar 21,Feb 21,Jan 21], //Array of labels [Jun 21,May 21,Apr 21,Mar 21,Feb 21,Jan 21]
             datasets: [{ 	data: [ 4.3,4.8,5,5,4.9,4.8 ], //Array of values 
							color: (opacity = 1) => `rgba(134, 65, 244, ${opacity})`, // optional
							strokeWidth: 2 // optional
						}]  
          }}
   width={label.length*10+350}
   height={320}                  
   verticalLabelRotation={70}
   withInnerLines={false}
   chartConfig={{
                  backgroundGradientFrom: 0,
                  backgroundGradientFromOpacity:0,
                  backgroundGradientTo: 0,
                  backgroundGradientToOpacity: 0,
                 color: (opacity = 1) => `rgba(0, 0, 0, ${opacity})`,
                 labelColor: (opacity = 1) => `rgba(0, 0, 0, ${opacity})`,
                 backgroundColor: (opacity = 0) => `rgba(255, 255, 255, ${opacity})`,
                 strokeWidth: 2, // optional, default 3                       
                 
              }}
    bezier // type of line chart              
/>    
```
The code above represents the dataset for our bezier line chart component, that will be displayed in a line chart view, in our project.For the scope of this tutorial, we are using hardcoded static data.Check out the documentation to learn more about all the customizations you can do to a line chart at https://www.npmjs.com/package/react-native-chart-kit

Run your projects and open the screen containing the newly added line chart.
Tech Jargon: Demystified
Tags: cloud, beginners, aws, docker
Published: 2021-07-15 13:26:29

If you're like me and are deep into the latest tech trends, you might have heard or read about all the new and confusing jargon that most people don't know about or are confused about what it means. Don't worry. I'll explain all the tech-related slang in a funny and bite-sized manner, starting from the simpler ones.

### 1.Cloud:
A cloud is a collection of computers connected together that host different services so that you can use your computer to connect to those computers and use those services. Some clouds allow you to store your documents or photos. We call them clouds because they are located in other countries or sometimes across the globe.
![Cloud computing](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4lwwj60ras2lek9g4bhk.jpg)

### 2.Containers:
I asked one of my seniors at my school, what are containers? And why is everyone using them? He pulled up an image of a food container on his computer and showed it to me. I was puzzled and thought he was having fun with me. I again asked, what is a docker container? He again showed me the same image and said, instead of the food, you put your code in here and use it wherever you want. I was like Hmmmm, sounds cool.
![Cool cool cool](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7v8j963m6qdujlufg7b2.gif)
### 3.EaaS: Everything as a Service:
In our modern-day, everything is available as a service. And honestly speaking, I'm having mixed feelings about everything in my life being available as-a-service to me. It has its pros and cons equally. For example, I want to arrive at work in a new car but don't have one. I can use a car-as-a-service(Uber, Lyft). The same goes for PaaS and SaaS offerings, available from tech companies 
![MaaS](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/is5tuzrxpw9foruc297l.jpg)
### 4.Container Orchestrator:
Managing a single container is easy managing multiple containers? That's where the fun begins. You don't handle them we use container orchestration software that handles all of our containers namely Kubernetes or Docker-swarm. We just tell them how and when to handle it and then kick back and relax. 
![Manage containers](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vkpvnp35yyttcbexp4x5.jpg)

Hope you find this informative and funny and have fun while reading this as much as I had writing it. Comment other techy jargon that I should explain next.
[Swagger] How do I return an array of objects with 3 differents objects?
Tags: beginners, swagger
Published: 2021-07-15 13:25:42

I need to get a response like this

 
```
[

   {

      "objProp1": First object inside the response body

    },

   {

      "objProp2": Second object inside the response body

    },

   {

      "objProp3": Third object inside the response body

    }

]
```
 

And I'm setting up the yaml file like this:

 
```
Request/Response:

  type: array

  items:

    Object1:

       type: object

       properties:

         objProp1: string

    Object2:

       type: object

       properties:

         objProp2: string

    Object3:

       type: object

       properties:

         objProp3: string

   example: []
```
 

But when I open the swagger.. both request body and response body are showing this:

 
```
[

  "string"

]
```
 

what am I doing wrong? please help 😥
Customize Programming Languages
Tags: showdev, transpiler, hacktoberfest, preprocessor
Published: 2021-07-15 13:22:20

This post is to introduce LangTrans.

[LangTrans](https://langtrans.github.io/) is preprocessor to convert code written in your syntax into code in original syntax.

#####You can create syntax for
* your own needs
* project needs
* your domain

No need to know about inner workings of compiler.
Knowledge about regular expression is only prerequisite.
{% github LangTrans/LangTrans %}
SCORM: Co to jest i jak przygotować kurs SCORM
Published: 2021-07-15 13:15:20

Po przeczytaniu tego artykułu będziesz wiedzieć, czym jest SCORM i jak zmienić prostą prezentację PowerPoint w kurs SCORM i przesłać ją do systemu zarządzania nauczaniem.

Czym jest SCORM?
SCORM oznacza Sharable Content Object Reference Model (Model referencyjny obiektu zawartości), którą można udostępniać. Jest to międzynarodowy standard dla e-kursów. Jeśli Twój kurs ma format SCORM, możesz mieć pewność, że prawie każdy system zarządzania nauczaniem (LMS) go rozpozna.

Czytaj dalej > https://www.ispring.pl/blog/co-to-jest-scorm
App Building. Episode 1. Design
Tags: java, beginners, tristan
Published: 2021-07-15 12:54:19

#Introduction
- This series is going to be dedicated to building and launching my first app to the Google Play app store. Join me and let us try to to make our way through this. All the resources I used to create this post can be found on ticketnote or [HERE](https://ticketnote.dev/ticket/xGdsU2wicIMlikEESuRF).

###What kind of app am I building?
- I am building a calf tracker app. I know that probably doesn't clear things up at all, so here's a little background. I am from a very poor and technologically starved rural area that predominately raises beef cattle. During calving season(when the cows give birth to calves) it can be hectic to keep track of everything and even more so when everything is done with pen and paper. That is where my app will come into place.
- So basically my app will track a farmer's cows and the calves that the cows have.

###My mission statement
- With this app I want to provide farmers a free and easy to use alternative to pen and paper when tracking their cows and calves during calving season.

###Design
- I first want to say that I am **NOT** a designer and my designs will definitely reflect that. So with this design I really just wanted to create a skeleton/MVP for what it is going to look like. I am hoping the material UI Google provides will save me when the time comes to implement actual UI. With that being said my designs can be found [HERE](https://www.figma.com/file/BVDH1fvQvmT2qD5dywZ3Cw/Calving-Tracker?node-id=0%3A1)


#Conclusion
- Thank you for taking the time out of your day to read this blog post of mine. If you have any questions or concerns please comment below or reach out to me on [Twitter](https://twitter.com/TristAndroidDev).
Opensource... NO more free?!
Tags: opensource, github, githubcopilot
Published: 2021-07-15 11:02:02

So, few days ago a new technology  entered in industry github copilot.

Github copilot is basically a code suggestion software like other software like tabnine and kite but copilot is much more than that, it actually gives you the whole function of code just with one tab button on your keyboard. 

What is point of concern then?
The problem  is that github copilot will  auto-complete your code if it has previously written somewhere on github.

Then what?
Github is web-based version control software, its free of cost all the people in whole world use this thing to save all their programs there so that everyone can work on same thing. It is believed that open source applications are free and everyone can use it but here comes game changing move from microsoft they are trying to commercialize copilot! 


The time ivested by billions of people  in writing code for opensource just to help each other and to grow developer community will all be monetized, Microsoft wanted to make profit from these people!

So, i wanted to know what you guys think about this github copilot thing as many developers then would not be able to work on opensource as now and if microsoft commercialized github copilot and further github will this affect the developer community?
floating popups in tmux
Tags: techtalks, tmux, linux
Published: 2021-07-15 12:33:35

---
title: floating popups in tmux
published: true
description: 
tags: techtalks, tmux, linux
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/av6d91fw0m40qlqdjmn4.png

series: tmux
canonical_url: https://waylonwalker.com/tmux-floating-popups/
---

Tmux popups are actually floating windows that you can drag around the screen.  They always open in the middle (by default) when you open them, no matter where you leave them.

Here are a couple of keybindings I use to open up popup windows.

``` bash
bind C-g display-popup -E "ta ~/git"
bind -n M-g display-popup -E "tmux new-session -A -s scratch"
``` 

---

Be sure to check out the full youtube playlist and subscribe if you like it.

https://www.youtube.com/playlist?list=PLTRNG6WIHETB4reAxbWza3CZeP9KL6Bkr


{% post https://dev.to/waylonwalker/how-i-navigate-tmux-in-2021-2ina %}

> Also check out this long form post for more about how I use tmux.
Benefits of An Automated Attendance System for Students
Tags: benefits, systems, technology
Published: 2021-07-15 12:28:16

Your ethical and ethical responsibilities as a director are your ethical and ethical responsibilities in operating organizations. Well, most of us emphasize the need for qualified teachers to equip classrooms with But We's modern equipment and infrastructure. The necessity of installing automatic attendance systems for students and teachers is often overlooked. Attendance management products have many advantages. In this article, we introduced three of them. So scroll down to list all of them. 

Let us take a look at 

1. Save time 

If there is only one reason to prove the value of the auxiliary system, it is the ability of the product to save time. There are no manual attendance or handling requirements at the end of the semester. This may save you a lot of time. Therefore, once installed, the system eliminates many manual tasks associated with manual tasks, such as presenting and entering permits, calculating visitation time, and tracking sick leave.In this way, the onboard agreement should be waived and the possibility of errors or wrong access should be avoided. 

Second Driving Discipline 

A disciplined school is always rated as the best, even if its students are not in the best student category. The automatic student attendance system is an effective method that can educate students on the importance of attending classes on time. This encourages all students in your school to show up on time, while students who are prone to being late will show up regularly and arrive before the first bell. Students who are late will not only shock and confuse other students who are studying. 

3. Send automatic text messages to families 

This is one of the core functions of any autonomous student assistance system. Absent or late. This is a very important function for high school students. It can also let parents know how many lessons their children have missed and how this affects their grades.

Learn more at  <a href="https://texnologia.net">texnologia</a>
A few useful resources that you may need when developing
Tags: webdev, web, resources, devops
Published: 2021-07-15 12:25:01

**Hello to everyone!**

As an interface developer, you've probably struggled to find images, svgs, or icons to add to your app, and sometimes the images you have are high-resolution, which takes a long time to draw when the website is rendered, making it difficult for the website to work, or can't find high-quality images.

Here are a few resources you may need when developing your app.

**1. Free Icons**
Icons are known to express some information while providing good UI. These are used in many websites and as a frontend developer you probably need them in any website you'll be making. Here are some free icons resources.

Font Awesome: [Font awesome](https://fontawesome.ru/)

Bootstrap icons: [Bootstrap icons](https://icons.getbootstrap.com/)

**2. Free High Quality Images**
If you are wondering where to get free high quality images for your backgrounds, nature, people etc here are good sources

Unsplash: [Unsplash](https://unsplash.com/)


Pexels: [Pexels](https://www.pexels.com/ru-ru/)

**3. Free SVG illustration**
Svg are essential part of modern websites and we no longer need to create them from scratch using html/css or other design tools like figma. 
Undraw: [Undraw](https://undraw.co/)
Freepik: [Freepik](https://www.freepik.com/)

**4. Free image resolution compressor** 
These tools will compress your images to reduce resolution and thus helps better your site's performance without affecting image quality. 
tinyPNG: [TinyPNG](https://tinypng.com/)
Img2go: [Img2go](https://www.img2go.com/compress-image)

**5. Remove Background**

Lets look at this image
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rwmmrqotehtulufhq6o4.png)

I want to put it somewhere on my site where the green color will lead to a bad UI, Removing the green background and deciding to add my own or just put it without the background would be the best solution, but I don't know photoshop-that's where I'm going

Remove.bg: [Remove.bg](https://www.remove.bg/)
Now I get this
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0m89rsnnwipp1pwp60if.png)

Hope these resources save you a lot effort, happy coding!!
Schema Markup: A Comprehensive Guide To SERP Appearance | eGoodMedia
Tags: schemamarkup
Published: 2021-07-15 12:00:31

Schema Markup is a form of microdata that is used by internet marketers to let search engines understand your particular web page. If search engines are unable to evaluate the main objective & significance of your web page, how can they rank you in the top SERPs? With Schema Markup you can define your web pages properly. 

The rich snippets are also inspired by Schema Markup and are the visual representation of the same on SERPs. To understand this we may consider Frontend & Backend Designs. If Schema Markup is Backend Design, the Rich Snippets are the Frontend appearance of your Schema Markup. The Schema Markup data often requires you to share your web page information that includes: 

Read more:- <a href="https://www.egoodmedia.com/schema-markup-a-comprehensive-guide-to-serp-appearance/">Schema Markup: A Comprehensive Guide To SERP Appearance</a>

Contact Details:-
1-6046704333
422 Richards St Unit 170, Vancouver, BC V6B 2Z4, Canada

Visit Reference Profile Websites:- 
https://bit.ly/3ia6fzr
https://bit.ly/3yX6On1
https://bit.ly/3B8Ss4E
https://bit.ly/2U7BjYK
https://bit.ly/3xI6N6d
https://bit.ly/2Uhs1cq
https://bit.ly/3hEBDH3
<a href="https://www.egoodmedia.com/">Seattle web design agency</a>
https://bit.ly/2U4BHap
https://skl.sh/3wEScqD
https://bit.ly/3zetS0P
<a href="https://www.egoodmedia.com/what-are-breadcrumbs-how-essential-theyre-for-seo/">what are breadcrumbs</a>
<a href=""></a>
https://bit.ly/3xJoxhl
https://bit.ly/3xCyvBf
https://bit.ly/3wFcPmD
https://bit.ly/3hzGCJb
https://bit.ly/2T9kax8
<a href="https://www.egoodmedia.com/how-to-run-competitive-research-with-facebook-ads-library/">facebook ads library</a>
https://bit.ly/3B4X4bY
https://bit.ly/3hDDSKT
https://bit.ly/3hFSNo1
https://adobe.ly/36wJ90y
https://bit.ly/2UawMED
https://bit.ly/2TbkueX
<a href="https://www.egoodmedia.com/how-to-use-instagram-stories-for-social-media-marketing-campaign/">instagram stories</a>
https://bit.ly/3z2fGb7
https://bit.ly/3idniRj
https://bit.ly/3r6638s
https://bit.ly/2VK6KJ0
https://bit.ly/3z0V82x
https://bit.ly/3B78cFh
https://bit.ly/2VMGBt1
Generated ringtone
Tags: design, music, ios, android
Published: 2021-07-15 11:53:49

Users use default ringtones. As a result, a huge number of people have the same ringtone.

It would be nice to generate each user his own ringtone, so that he does not choose it himself, but it is different from everyone else. It is not right to have half of the people in a subway car reaching for their phones if one of the passengers rings.

If the user doesn't like the ringtone, they tap "Don't like it, next." Other ways to select the generated ringtone are also possible.

The main thing is that each user is given a fairly unique ringtone. Mubert has been able to generate music for a long time, to implement the idea we just need to tweak the algorithms in the direction of tunes better suited for the call.
Vue Academy #0: What is VueJs ? (Fastly)
Tags: vue, javascript, webdev
Published: 2021-07-15 11:39:51

### What is VueJs ?

Vue is a progressive framework for building user interfaces. It's based on component re-use logic.

You can easily bind your data to the UI (DOM). When you update your data, the dom will be updated automatically (synchronised).

### Eco-system

Vue has other module that you can add to your project, for exemple you have `vue router` (Routing), `vuex` (state manager store), `vue cli` (to create easily vuejs project)

### Virtual DOM

Vue use virtual DOM (VDOM), that is a copy of a DOM in a object (VDOM has no visual).

If we need to update a value in the DOM, we just need to update this value in the VDOM, after the update we check the difference between DOM & VDOM, and we update the `portion` of the current DOM with the new value without impaction the current dom performance !

### Syntax

```vue
<template>
  <div id="app">
    {{ message }}
  </div>
</template>

<script>
var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})
</script>
```

Magic ! You data is synchronised in the view ! So if you change message data, dom will be updated

### Directives

Vue use **directive** that will improve your code, they are prefixed with `v-` to indicate that they are special attributes provided by Vue.

For exemple you can use `v-if` directive to create a component if the condition is true :

```vue
<div>
  <span v-if="isShow">Hey</span>
</div>
```

You can also use v-else-if, v-else.

```vue
<div>
  <span v-if="isCool">Is Cool</span>
  <span v-else>Not Cool</span>
</div>
```

`v-for` -> We can use it to render a list of items based on an array.

```vue
<div>
  <span v-for="item in [1, 2, 3]"> {{ item }} </span>
</div>
```

We can easily catch event like `click` with v-on !

<div>
  <span @click="doSomething"> click on me </span>
</div>

### Component basics

A common component will have these specific attribute:

- **Props:** Passing Data to Child Components

- **Data:** Data linked to the component

- **Methods:** Methods linked to the component
 
- **Lifecycle hooks:** Lifecycle hooks allow you to know when your component is created, added to the DOM, updated, or destroyed.

I hope that you learn something and that article will motivate you to try Vue !

---

I hope you like this reading!

🎁 You can get my new book `Underrated skills in javascript, make the difference` for FREE if you follow me on [Twitter](https://twitter.com/code__oz) and MP me 😁

Or get it [HERE](https://codeoz.gumroad.com/l/RXLYp)

🎁 [MY NEWSLETTER](https://www.getrevue.co/profile/code__oz)

☕️ You can [SUPPORT MY WORKS](https://www.buymeacoffee.com/CodeoZ) 🙏

🏃‍♂️ You can follow me on 👇

🕊 Twitter : [https://twitter.com/code__oz](https://twitter.com/code__oz)

👨‍💻 Github: https://github.com/Code-Oz

And you can mark 🔖 this article!
Schemahero Community meeting - July 22, 2021
Tags: database, opensource, kubernetes
Published: 2021-07-15 11:36:14

Calling all Database Heroes! Please join us for the very first [Schemahero](https://schemahero.io) community meeting, happening July 22nd at 2PM EDT/6PM UTC. Find information on how to log on, where to find the livestream, add items to the agenda & more [here](https://hackmd.io/ny0LVoVOTT2IRgHESmKnMw?edit).