teleren/devto huggingface dataset:
Aplikasi Belanja Sayur Online di Medan
Published: 2022-03-22 13:03:32

Dalam bahasa batak “inang” itu artinya ibu. Jadi secara harfiah inang-inang itu artinya ibu-ibu. Akan tetapi pada kenyataannya [“inang inang”](inanginang.id) menjadi dikonotasikan sebagai ibu-ibu yang berjualan sayuran di pajak. Kalo di Medan pajak itu pasar, sedangkan pasar disebut dengan jalan. Dari berjualan secara konvensional inang-inang pun mulai merambah aplikasi belanja sayur online di medan.

Di era digital yang serba canggih, kebiasaan berbelanja masyarakat berubah dengan lebih banyak memanfaatkan internet untuk transaksi jual beli. Dengan teknologi maka masyarakat tak harus bertemu langsung dengan menghabiskan banyak waktu untuk menjual atau membeli.

Di masa pandemi, untuk memenuhi kebutuhan dapur secara online meningkat tajam. Yah, karena para ibu-ibu juga merasa takut untuk berbelanja ke pasar. Pada akhirnya para pedagang yang berjualan secara konvensional pada saat itu juga mengalami penurunan pendapatan. Di masa pandemi tersebut, kita juga di tuntut untuk selalu sehat, dari makanan yang mengandung vitamin c tinggi, hingga rutin berolah raga. Karena situasi pandemi covid-19 yang mengharuskan setiap orang mematuhi itu.
Berbelanja sayur secara online bisa menjadi solusi yang tepat dan mudah. Anda tinggal menunggu sayur yang di pesan dengan santai di rumah. Di Medan, masa covid-19 ini membuat banyak orang-orang beralih untuk berjualan sayur online medan, termasuk inang-inang.
Kebiasaan Baru Dalam Membeli Sayur Online

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

Setelah era new normal, aktivitas membeli sayur secara online seolah menjadi kebiasaan baru. Tren ini juga berguna buat pengguna dalam mendapatkan produk. Termasuk produk sayur dan buah yang menjadi bahan pokok makanan sehari-hari.

Pada dasarnya, memang banyak platform e-commerce yang menyediakan berbagai pilihan produk. Namun untuk toko online yang khusus menjual sayuran online terbilang masih terbilang terbatas. Bagi Anda yang tinggal di Medan dan sekitarnya, kini tidak perlu bingung berbelanja online sayuran.

inanginang.id menjadi situs online yang menyediakan aneka sayuran dan buah segar. Hanya dalam satu genggaman smartphone, memesan sayur kini menjadi lebih mudah. Situs ini memungkinkan Anda berbelanja aneka jenis sayur, buah maupun ikan segar

Inang-inang juga banyak menyediakan paket masakan dengan harga yang terjangkau, salah satunya paket masakan soto.
#Python 🐍 – how to find where Python is intalled – working with #reTerminal @Seeedstudio and @code
Tags: englishpost, python, reterminal
Published: 2022-03-23 13:45:27

---
title: #Python 🐍 – how to find where Python is intalled – working with #reTerminal @Seeedstudio and @code
published: true
date: 2022-03-22 13:00:00 UTC
tags: EnglishPost,EnglishPost,Python,reTerminal
canonical_url: 
---

Hi !

Setting up my Seeedstudio reTerminal and Visual Studio Code, I realized that Python was already installed, but I’m not sure where 🤔.

So, in the Visual Studio Code terminal (you can do this in the bash), first I check the version of Python with the command

```

python3 -V

```

And, hey I got 3.7 !

Now I open python and type these 2 lines

```

import sys
sys.executable

```

And there it is, the location of Python3

![how to find python location in linux on a reterminal](https://brunocapuano.files.wordpress.com/2022/03/how-to-find-python-location-in-linux-on-a-reterminal.jpg?w=1024)

Bonus: do you see CoPilot in VS Code Tray, yes ! CoPilot works also on Raspberry Pi and reTerminal!

Happy coding!

Greetings

El Bruno

More posts in my blog [ElBruno.com](https://www.elbruno.com).

* * *
Why I Want To Get Into Coding?
Tags: beginners, webdev, career, discuss
Published: 2022-03-22 12:54:31

Words like "Coding", "development", "engineering" etc. are something that are always floating around my life.

In addition to that, at my job where I am a B2B SEO content writer in a small marketing team, their are always some ideas that I want to execute but can't due to lack of skills in coding.

That's why I really want to get into coding. More specifically into **Web Development**.

#Current Mindset#
I don't want to dramatize my journey, but at the back of my head I want to create tools and platforms that people enjoy using and solve problems.

Currently, I do that through words, by sharing articles, creating content, and even creating WordPress code free sites. But since I have no learning in the field of development, I always feel limited.

> I want to code to become limitless.

And yes, that's why I said, I don't want to dramatize it but it's true.

#Upcoming month#
To be honest, I have chosen a wrong time to get motivated to get into this new learning curve.
For this upcoming month, my days will look like -

- Go to my current job and be present to full fill my role and help the company grow.
- Prepare for the my BBA 2nd sem exams cause they are literally starting from 25th March.
- Work on my side project (build on WordPress, will talk about it some other day)

You see when I write things down here, It's just three points, but it's about giving each one of them my full attention.

But with all this going on, I look forward to get started in Web development and start learning ASAP.

#Why Dev.to?#
I heard about it literally an hour ago and wanted to share everything that's going on in my mind with people who might be able to guide me.

I'll be sharing monthly updates on my learnings, to keep track of my journey.

**_I am looking to get started with HTML (and probably CSS) in this month._**

Some of the resources that I think I might be using are The Odin Project, W3School, and Freecodecampe.

Youtube and Google will always be my go to place to look for the answers. And I hope, by the end of 30 days from now, I at least have one project that I can share with this online community.

If you have any suggestions, drop them in the comments as it will really help me and motivate me to keeping going.

See you next month
Load Testing in Python with Locust.io
Tags: cloud, python, testing, performance
Published: 2022-03-22 12:48:23

Once a Website, API, or App is developed, there is often a need to start testing performance. Another useful aspect of Load testing is to start building out operating cost models as you develop pricing for example.
Let's jump in and get started…
From a terminal: run
pip install locust
locust -f locust.py
loadtest % locust -f locust.py
[2021–01–06 09:58:29,316] mbp.lan/INFO/locust.main: Starting web interface at http://0.0.0.0:8089 (accepting connections from all network interfaces)
[2021–01–06 09:58:29,322] mbp.lan/INFO/locust.main: Starting Locust 2.5.1
Open a Web browser and visit this page
http://localhost:8089/
Start a new load test
Set the number of total users to simulate
Set the spawn rate
Set the host
Start swarming
Details on the file below — locust.py
import time
from locust import HttpUser, task, between
class WebsiteUser(HttpUser):
wait_time = between(1, 5)
@task
def index_page(self):
self.client.get(url=”/hello”)
@task
def slow_page(self):
self.client.get(url=”/testsite”)
How to Render an SVG Image in Flutter
Tags: flutter, svg, dart
Published: 2022-03-22 12:43:40

By default, Flutter does not support SVG images. 
You would need an external package to render the images. 

In comes **flutter_svg** to the rescue.

Here's a link to the [pub.dev](https://pub.dev/packages/flutter_svg) page.

## Adding the plugin
To add the package, run:
`flutter pub add flutter_svg`
This adds the package to your pubspec.yaml file. Afterwards, you will need to install it, run:
`flutter pub get`

## Using flutter_svg in your app

```
import:'package:flutter_svg/flutter_svg.dart'

@override
Widget build(BuildContext context) {
 return SafeArea(
    child: Center(
      child: SvgPicture.asset('assets/image.svg')
    ),
  );
```
How to build Audio stream app landing page using HTML CSS JS
Tags: css, tutorial, javascript, beginners
Published: 2022-03-22 12:35:06

{% youtube 2VN-O7lZX0E %}

How to build audio stream app landing page using HTML CSS JavaScript

In this video, I will show you how to create (mobile-first responsive) app landing page.

[Live Website](https://codewithsadee.github.io/pod-audio_sreaming-app-landing_page)
[Github Repo](https://github.com/codewithsadee/pod-audio_sreaming-app-landing_page)

---

HI 👋
I'm Sadee (webdev)
In this channel I make videos about Complete Responsive website.
You can checkout my channel 👇

📺 My Channel : [codewithsadee](https://www.youtube.com/channel/UC1PZHWV6VvICTL1LgFUZq6g)
🔔 Subscribe : [subscribe now](https://www.youtube.com/channel/UC1PZHWV6VvICTL1LgFUZq6g?sub_confirmation=1)
🕐 New Videos Every Week

---

🔗 Essential links
-----------------------------
[Starter file](https://drive.google.com/file/d/1HHncD2kV7B0CnTuhJNl_8CiM7r5EE-Qi/view?usp=sharing)
[Font - Poppins](https://fonts.google.com/specimen/Poppins?query=poppins)
[Icon](https://ionic.io/ionicons)

---

⏱️ Timestamps
-----------------------------
0:00 - Demo
2:32 - File sturcture
3:06 - Initial html
4:25 - Css custom property
5:28 - Reset
7:51 - Header
18:10 - Hero section
21:22 - Download section
24:12 - Features section
29:16 - Overview section
34:58 - Blog section
41:26 - Footer
54:50 - Media queries

---

💜 Like - Follow & Subscribe Me
-----------------------------
Twitter : https://twitter.com/codewithsadee
Github : https://github.com/codewithsadee
YouTube : [codewithsadee](https://www.youtube.com/channel/UC1PZHWV6VvICTL1LgFUZq6g)
Buy Me A Coffee : https://www.buymeacoffee.com/codewithsadee
Patreon : https://www.patreon.com/codewithsadee

---

[![Buy Me A Coffee](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9kn6vwn4mulhsx6o69is.png)](https://www.buymeacoffee.com/codewithsadee)
Conditional Statements : Part 1
Tags: typescript, javascript, beginners, tutorial
Published: 2022-03-22 12:23:30

There are a lot of conditional statements in programming but how we can utilize them in a better way?

**Consider the below code**

```typescript
  private demo(myVar: string): string {
    let myReturnVar: string;
    if(myVar === 'condition'){
      myReturnVar = 'It is condition';
    }else {
      myReturnVar = 'It is not condition';
    }
    return myReturnVar;
  }

  demo('condition'); // 'It is condition'
  demo(''); // 'It is not condition'
```

With a cognitive complexity of 4 it fulfills our need but is it good?
As a developer we are expected to write clean code. And the above can be modified to be better.

Process of modification:
- Why to use a variable **myReturnVar** when we can directly return the value as we are not going to utilize it except returning.
- Once we return the data why we need a separate else statement to check.
Let us see the below code:

```typescript
  private demo(myVar: string): string {
    if(myVar === 'condition'){
      return 'It is condition';
    }
    return 'It is not condition';
  }
```
The cognitive complexity remains the same (4) but now the code is cleaner then the previous.

But do we really need a if-else condition, we can do it using a ternary operator which reduces the complexity to (3)

```typescript
  private demo(myVar: string): string {
    return myVar === 'condition' ? 'It is condition' : 'It is not condition';
  }
```
By the above we can say that if there is a single line check it is better to use a ternary operator.

What about large conditions?
```typescript
  private demo(myVar: string): string {
    if(myVar === 'condition') return 'C1';
    if(myVar === 'demo') return 'C2';
    if(myVar === 'thing') return 'C3';
    if(myVar === 'demo1') return 'C4';
    if(myVar === 'demo5') return 'C5';
    return '';
  }

  private demo1(myVar: string): string {
    switch (myVar) {
      case 'condition': return 'C1';
      case 'demo': return 'C2';
      case 'thing': return 'C3';
      case 'demo1': return 'C4';
      case 'demo5': return 'C5';
      default: return '';
    }
  }
```
We can do it in both ways with cognitive complexity of (12) & (14) respectively.

There are always better ways to write the conditional statements.
We will continue going through those soon.

If you like the post follow me for more
{% user rahulrajrd%}
What Does the Term "Sketchpad" Mean?
Tags: sketchpad, pad, sketch, sketchpadextension
Published: 2022-03-22 12:17:13

Ivan Sutherland's PhD thesis in 1963 resulted in the creation of Sketchpad, a pioneering computer application. [Sketch pad](https://www.sketch-pad.live) was a pioneer in the field of human-computer interaction (HCI). Sketchpad is regarded as the forerunner of today's computer-aided design (CAD) software. It is also recognised as an important step forward in the development of computer graphics. Sketchpad, for example, was used to develop cutting-edge object-oriented programming and the graphical user interface (GUI).

Sketchpad is explained by Techopedia.

Ivan Sutherland demonstrated with Sketchpad that computer graphics may be used for both technical and artistic applications in addition to being an innovative technique of HCI. It could handle restrictions; for example, drawing a constrained ellipse resulted in a circle. Sketchpad also has certain CAD functions, such as the ability to calculate loads on beams.

Sketchpad allowed users to draw on a computer screen with a light pen. It offered the "ring" list framework and used value inference to solve constraints. The drawings created with Sketchpad were saved in the computer's custom constructed ring structure. This ring structure included instant topological information processing, which eliminated the need for any searching.

Drawing was used as the computer's unique interaction medium in Sketchpad. The system had input, output, and computation routines that enabled it to decode data drawn directly on a computer screen. Drawing scientific, mechanical, mathematical, electrical, and animated designs was a breeze with Sketchpad.

[Sketchpad extension](https://bit.ly/3KVxAlL) was a one-of-a-kind technology that aided in the understanding of processes such as the concept of links, which could be conveyed visually. It was easier to design highly accurate and repetitive drawings with Sketchpad. It also included the ability to alter an image that had already been drawn.
Model Evaluation in Scikit-learn
Tags: machinelearning, python, scikitlearn, datascience
Published: 2022-03-22 12:16:22

Scikit-learn is one of the most popular Python libraries for Machine Learning. It provides models, datasets, and other useful functions. In this article, I will describe the most popular techniques provided by scikit-learn for Model Evaluation.

Model Evaluation permits us to evaluate the performance of a model, and compare different models, to choose the best one to send into production. There are different techniques for Model Evaluation, which depend on the specific task we want to solve. In this article, we focus on the following tasks:
Regression
Classification
For each task, I will describe how to calculate the most popular metrics, through a practical example.

## 1 Loading the Dataset
As an example dataset, I use the Wine Quality Data Set, provided by the UCI Machine Learning Repository. To use this dataset, you should cite the source properly, as follows:
Dua, D. and Graff, C. (2019). UCI Machine Learning Repository [http://archive.ics.uci.edu/ml]. Irvine, CA: the University of California, School of Information and Computer Science.
P. Cortez, A. Cerdeira, F. Almeida, T. Matos and J. Reis.
Modeling wine preferences by data mining from physicochemical properties. In Decision Support Systems, Elsevier, 47(4):547–553, 2009.

I download the data folder, which contains two datasets: one for the red wine, and the other for the white wine. I build a single dataset, which is the concatenation of the two datasets, as follows.

I load both datasets as Pandas Dataframes, and, then, I merge them:

`import pandas as pd
targets = ['red', 'white']
df_list = []
df = pd.DataFrame()
for target in targets:
    df_temp = pd.read_csv(f"../Datasets/winequality-{target}.csv", sep=';')
    df_temp['target'] = target
    df_list.append(df_temp)
    print(df_temp.shape)
df = pd.concat([df_list[0], df_list[1]])`

I have added a new column, which contains the original dataset name (red or white). 

The dataset contains 6497 rows and 13 columns.
Now, I define a function, which encodes all the categorical columns:

`from sklearn.preprocessing import LabelEncoder
def transform_categorical(data):
    categories = (data.dtypes =="object")
    cat_cols = list(categories[categories].index)
    label_encoder = LabelEncoder()
    for col in cat_cols:
        data[col] = label_encoder.fit_transform(data[col])`

I also define another function, which scales numerical columns:

`from sklearn.preprocessing import MinMaxScaler
def scale_numerical(data):
    scaler = MinMaxScaler()
    data[data.columns] = scaler.fit_transform(data[data.columns])`

## 2 Regression
To evaluate a regression model, the most popular metrics are:

Continue Reading on [Towards Data Science](https://towardsdatascience.com/model-evaluation-in-scikit-learn-abce32ee4a99)
Discuss: package sabotage
Tags: javascript, discuss, codequality, security
Published: 2022-03-22 12:16:12

(image copyright by Ministry of Defense of Ukraine, shared on flickr under CC-AT-SA)

Like any war, the current one in the Ukraine brings out the best and the worst in people. The best of us support the people of the Ukraine defending against the unlawful invasion by the Russian Regime. The worst of us commit package sabotage against users with a russian IP address.

On one hand, package sabotage is two-edged sword, as you cannot possibly know if the Russian IP currently installing your npm package is not actually against the war and just wanted to set up a site to spread knowledge on how to circumvent Russian net blockades – and now you've successfully stopped them from doing so and indirectly aided Russian Propaganda to prevail in the absence of that information. On the other hand, you undermine the global trust in the whole ecosystem that your package is a tiny part of.

For that reason, I'm rather convinced it's ultimately a really bad idea, but I wanted to hear your positions, too. What do you think about package sabotage? Also, shouldn't we be more mindful of the dependencies we pull from npm?
Create Your Web Server with @http ( aex Intro I)
Tags: javascript, node, typescript, webdev
Published: 2022-03-22 09:18:32

With decorators into stage 2. You will see and use more and more decorators in your js/nodejs projects.

With the help from decorators, we can create a web server in a more simple but powerful way.

In [aex](https://github.com/calidion/aex), @http was introduced to mimic HTTP Methods and corresponding requested url.

Here are the steps on how to use @http to create a web server.

## 1. Define a handler with @http.

For example we need to write a user login page, you can simply create such a handler with the @http decorator.

```typescript
import { http } from "@aex/core";

class User {
  @http("get", "/user/login")
  login() {
  }
}
```

## 2. Create an Aex object
After created a class, we need push this class to an aex object to initialize handlers the class defined. 
Here is the code:
```typescript
const aex = new Aex();
// You can push a lot of classes here
// aex.push(Class0);
// ...
// aex.push(ClassN);
// Here only one class( the User class ) is ok
aex.push(User);
// prepare classes for http requests
aex.prepare();
```
## 3. Start a server
After the preparation, aex has loaded all request handlers from classes.
Now we can start the server to receive requests and handle them.

If you are in a none-async function,
You may use this one to start the server:
```typescript
aex.start(8080).then();
```
or You can use this one:
```
await aex.start(8080);
```
It will return an server, you can store it if you need it later.

Now a very simple server is ready for you.

You can start to write your handle now.
Mastering and Taking advantage of React `key` prop
Published: 2022-03-22 11:40:54

---
title: Mastering and Taking advantage of React `key` prop 
published: true
description: React `key` prop: more than a constraint, it's a very good tool too !
tags: 
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/voetpdhcnzfz11pnsd9a.jpg
---

You might know that `key` is a reserved prop in the React ecosystem. 
I also guess you've get acquainted to `key` while learning how to [render a list](https://beta.reactjs.org/learn/rendering-lists#rules-of-keys), that you _have to_ give a unique key to a list of items - maybe you don't even know why, you just do it.

Well, by understanding how this rendering thing works and why a unique `key` is so important, you'll learn a new and very powerful way of using this `key` prop, not even while rendering a list !

## Why the `key` prop must be unique in a list

React always try to optimise the rendering of components, by re-rendering only what changed between the previous state and the new. To do so, `key` is one of the thing that tells react to recreate the element if the `key` changed.

If you render a list and you don't setup the `key` prop yourself, React will automatically set the `key` to be the `index` of the item in the array. That's fine if this array is static and never changes, but if it does change, it's gonna be a problem : your item will never re-render, because its props didn't change, neither its state.

What you should remember:
- **When a component's state or props changes, React _re-render_ it**
- **When a component's key changes, React _re-create_, with initial state and props**
- **When none of those change, React keep the component as is, _no re-render is happening_.**

That's why if the items of your list change, you need to set each of them a unique `key`, so that when the `key` changes, the component recreates itself and your list updates


## How to take advantage of the `key` prop outside a list

Sometimes, a component needs to get its state reset to initial values. How to ?

-> have a sort of `reset` function that reset all states: that can be tedious, and sometimes mistaking
-> change the `key` prop of this component

I'm a big fan of the second option that I use a lot around my project : it's only a few lines of code maximum, it's 100% efficient, no mistake possible.

One of my colleague told me a few days ago: "That little hack is nice, but is it a proper way to do ?"

Well, this hack is not my own creation, I've learned it from another dev, but I never checked if there were official guidelines for it, and guess what : now with the new React docs, it has !
https://beta.reactjs.org/apis/usestate#resetting-state-with-a-key, by Dan Abramov himself.

Have fun !