teleren/devto huggingface dataset:
How Food On Wheels Can Solve Last Mile Problem [Food Tech Stories]
Published: 2022-03-19 20:54:17

Urbanization is a common process in many regions of the world, including a huge proportion of people in less developed countries. Rapid urbanization can cause many problems, including poverty and food insecurity, which can make it harder for citizens to eat a healthy diet. 

No matter how hard policymakers are trying to promote healthy and sustainable diets, it’s still an acute problem in modern cities.

Also, it is extremely hard to offer fair prices to food producers. While grocery stores and healthy restaurants are scarce, corner stores are stocked with beer, cigarettes, fried snacks, and fatty sweets. That is why the government and concerned citizens are in constant search for a better alternative.

Foodshare Toronto, the city of Toronto and United Way Toronto has presented a mobile organic food market that brings fresh food and veggies to areas that are situated far from grocery stores. 
Structured by LGA Architectural Planners, the portable market was made from an old bus that was given by the Toronto Transit Commission.

Loaded with fresh seasonal produce, it lets Torontonians buy fresh healthy fruit and vegetables even if they don't have grocery stores in the area. Everything from broccoli and lettuce to apples and onions is available when the bus comes to town, twice per week.

However, this initiative doesn’t adree the issue concerning fair pricing. Since the costs required by the transport must be dealt with, food costs aren't a lot lower than what may be found in a store.

However, at least families have the opportunity to purchase higher-quality, nutrient-dense food when the bus visits.

Read the whole story here: [Bus Converted into Mobile Food Market Brings Fresh Produce To Low-Income Neighbourhoods](https://www.goodshomedesign.com/bus-converted-into-mobile-food-market-brings-fresh-produce-to-low-income-neighbourhoods/)


Created with help of [Tatsiana Isakova](https://www.linkedin.com/in/tatsiana-isakova-5a2ab21a2)

Read more yummy stories:

* [What's Inside Junk Food?](https://hackernoon.com/junk-food-whats-inside-it-107ar30zv)
* [How Come Junk Food is Still An Epidemic?](https://hackernoon.com/junk-food-why-its-still-a-problem-ny36630mv)
* [Machine Learning Food Datasets Collection](https://hackernoon.com/machine-learning-food-datasets-collection-fz5i130w0)
* [Meal Planning Introduction](https://hackernoon.com/what-is-meal-planning-uw1i3y8f)
* [Digital Transformation of Restaurant Industry](https://hackernoon.com/food-tech-stories-digital-transformation-of-restaurant-industry-fwk3yvj)
* [Will Amazon Go Grocery Improve Our Shopping?](https://hackernoon.com/food-tech-stories-will-amazon-go-grocery-improve-our-shopping-n2403ygn)
* [How Italy Fighting with Food Waste](https://hackernoon.com/food-tech-stories-how-italy-fighting-with-food-waste-jvw3ytk)
* [How Walmart is Growing Food Subscription Business](https://hackernoon.com/food-tech-stories-how-walmart-is-growing-food-subscription-business-ko193y7z)
* [Food Tech Stories: Yummy Trends in 2020](https://hackernoon.com/food-tech-stories-yummy-trends-in-2020-887f3ysr)
What are the basics that a beginner should learn?
Tags: programming, beginners, cpp, computerscience
Published: 2022-03-19 20:42:26

Good night
I want someone to guide me to the right path
I'm in 2nd year of computer science, I want to know what are the most important basics that I must be familiar with before I study a certain technology, I studied OOP,Data Structures,Database and Algorithms
my level in problem solving between beginner and intermediate, I want to increase my level in addition to studying the basics
Types of Software Developer
Tags: frontend, backend, mobile, developer
Published: 2022-03-19 20:32:28

---
title: Types of Software Developer
published: true
description: Did you know the term Software Developer is too general to describe what does a Software Developer nowadays? Well, here I've created the next mind map to let you know the big picture about the different types of Software Developers you can find in the industry.
tags: frontend, backend, mobile, developer
cover_image: https://www.codesandtags.io/blog/static/0c3e5da8b02182824273f0f63be423d9/b0b8f/hero.webp
---

Did you know the term "Software Developer" is too general to describe what does a Software Developer nowadays?.
Well, here I've created the next mind map to let you know the big picture about the different types of Software Developers you can find in the industry.

![Types of Software Developer](https://www.codesandtags.io/blog/static/0c3e5da8b02182824273f0f63be423d9/b0b8f/hero.webp)

Here you can find the full version of the mind map. [Types of Software Developer](https://coggle.it/diagram/YjYZFFhHPaPgcitQ/t/-)

## Types of Software Developers, salaries and jobs

- [Front-end Developer](https://www.glassdoor.com/Search/results.htm?keyword=Front%20end%20developer)
- [Back-end Developer](https://www.glassdoor.com/Search/results.htm?keyword=Back%20end%20developer)
- [Game Developer](https://www.glassdoor.com/Search/results.htm?keyword=Game%20developer)
- [Desktop Developer](https://www.glassdoor.com/Search/results.htm?keyword=Desktop%20developer)
- [Mobile Developer](https://www.glassdoor.com/Search/results.htm?keyword=Mobile%20developer)
- [Full Stack Developer](https://www.glassdoor.com/Search/results.htm?keyword=Full%20Stack%20developer)
- [Blockchain Developer](https://www.glassdoor.com/Search/results.htm?keyword=Blockchain%20developer)
- [Data Scientist Developer](https://www.glassdoor.com/Search/results.htm?keyword=Data%20Scientist)
- [Middle Tier Developer](https://www.glassdoor.com/Search/results.htm?keyword=Middle%20Tier%20Developer)
- [Big Data Developer](https://www.glassdoor.com/Search/results.htm?keyword=Big%20Data%20Developer)
- [Security Developer](https://www.glassdoor.com/Search/results.htm?keyword=Security%20Developer)
- [Dev Ops Developer](https://www.glassdoor.com/Search/results.htm?keyword=Dev%20Ops%20Developer)
- [Embedded Developer](https://www.glassdoor.com/Search/results.htm?keyword=Embedded%20Developer)
- [Graphics Developer](https://www.glassdoor.com/Search/results.htm?keyword=Graphics%20Developer)
- [Software Development Engineer in Test (SDET)](https://www.glassdoor.com/Search/results.htm?keyword=Software%20Development%20Engineer%20in%20Test%20(SDET))
SetInterval en Android con Kotlin
Tags: kotlin, android, setinterval, feature
Published: 2022-03-19 20:26:23

Durante mis inicios como desarrollador en más de una ocasión me encontré con el problema de tener que realizar alguna operación repetitiva cada «N» cantidad de tiempo, por aquellos días mis mejores soluciones dentro del mundo Android rondaban el crear una instancia de la clase Timer y una TimerTask así cuando esta terminara, reiniciaba una vez más el proceso.


Sin embargo como se puede suponer esta no es la mejor manera de realizarlo, dentro de Android gracias al profiler podía detectar que al estar haciendo este proceso con una función, el mismo se estaba convirtiendo en uno recursivo y por ende el consumo de memoria aunque pequeño crecía.

Pasado algún tiempo y leyendo la documentación de Kotlin en busca de mejorar mis soluciones y aprender más sobre el lenguaje me encontré con una herramienta que desde ese entonces me ha ayudado a mejorar mi programación cuando de intervalos se trata.

Dentro de Kotlin existe una [biblioteca](https://kotlinlang.org/api/latest/jvm/stdlib/kotlin.concurrent/) que proporciona herramientas útiles para la programación concurrente.

> La programación concurrente es la ejecución simultánea de múltiples tareas interactivamente. Estas tareas pueden ser un conjunto de procesos o hilos de ejecución creados por un único programa.

Por ahora nos centraremos en una función que sera fixedRateTimer, en pocas palabras esta función crea un temporizador que ejecuta la acción especificada periódicamente, comenzando después del initialDelay especificado (expresado en milisegundos) y con el intervalo de milisegundos de período entre el inicio de la tarea anterior y el inicio de la siguiente.

A continuación les comparto un ligero ejemplo donde imprimiremos un mensaje de Hola mundo cada 5 segundos

![Example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sev3604u6q2ytvqypppo.png)
 

El resultado seria el siguiente:

![Example gif](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xjl5x28qebyi6iijjml6.gif)
 

Así mismo esta función retorna una instancia de Timer con lo cual podemos obtener una referencia y cancelar el proceso una vez que nuestro trabajo repetitivo haya finalizado. Quedando una nueva versión del código en donde queremos finalizar el trabajo tras 5 repeticiones de la siguiente manera.

![Example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g4z87tqb52ncofba1hr0.png)
 

Esta misma función puede aceptar aparte de un delay al inicio también una fecha exacta para ejecutarse, te recomiendo leer más en la documentación oficial para conocer todas las posibilidades que existen.

Espero te haya gustado este articulo, nos seguimos viendo en el futuro.
Svelte: My thoughts 🤔
Tags: webdev, javascript, svelte, discuss
Published: 2022-03-19 19:49:12

Welcome peeps to this week's article where I would be discussing Svelte, the new framework revving to hit the moon with their objectives, objectives I believe is achievable.

As sourced from the official site, Svelte is *a radical new approach to building user interfaces. Whereas traditional frameworks like React and Vue do the bulk of their work in the browser, Svelte shifts that work into a compile step that happens when you build your app.*
*Instead of using techniques like virtual DOM diffing, Svelte writes code that surgically updates the DOM when the state of your app changes.*

I played with Svelte and pretty much enjoyed it for a side-project. It's quick, doesn't utilize V-Dom and has an easy syntax. Sveltekit is a svelte framework, a solid one. I don't know much about it since I haven't played with it myself but I do know that it is efficient and Next.js better watch out.

Is Svelte better than Remix? No in my opinion. Svemix is an unofficial thing though, Svelte + Remix. In my opinion, it is quite inefficient. Use what works best for you though, if Angular appeals to you and delivers, use it. Don't sway for other opinions though, not worth swaying for them. 

Final thought on Svelte, interesting framework with a unique approach compared to React. I am excited for it's future and would keep on using it for small side-projects and playing with it. I think you React devs out there ought to give it a try, a small chance. Might be worth it. See you next time 👋
Processos para a criação de um React App
Tags: webdev, react, javascript, programming
Published: 2022-03-19 19:28:06

Como é comum entre todos programadores do ecossistema JavaScript com foco no front-end, uma hora ou outra teremos que nos deparar com libs que facilitam nosso processo na hora de escrever código. 

Hoje venho falar sobre a lib que mais utilizo atualmente, o **React**, mas mais especificamente sobre como é dado o processo de criação de um **react app**.

Atualmente tem duas formas de criar uma aplicação em react que eu mais utilizo, o famos [Create React App](https://create-react-app.dev/), desenvolvido pelo Facebook que cria para nós um boilerplate pronto para colocarmos a mão na massa e codar. A segunda opção que eu utilizo para criação de um react app é o [Vite](https://vitejs.dev/), que também tem a mesma função do CRA.

Aqui quero apresentar algumas das diferenças entre esses dois tipos de criadores de boilerplate, mas antes, vamos a como criar cada um dos tipos de projeto.

## Instalação:

1. Create React App
`npx create-react-app my-app`

2. Vite
`npm create vite@latest my-app -- --template react`

## Diferenças:

- No processo de criação e instalação de dependências:

O Vite em comparação ao CRA cria e instala todas dependências necessárias para uso em questão de segundos, tendo uma grande diferença em relação ao CRA, que demora certa de 1~2 minutos.

- Ao iniciar a aplicação:

Enquanto o Vite inicia sua aplicação em menos de 1 segundo, o CRA costuma demorar de 3~15 para executar a mesma ação.

- No tamanho da pasta do projeto (peso em memória):

Abaixo segue a comparação entre os dois.

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

Equanto o CRA ocupa 233.4 MB, o Vite ocupa 32.1MB.

- Server Side Rendering:

O Vite ainda não possui um bom suporte mais estável ao SSR, o CRA possui.

## Conclusão

Depois de muita comparação entre os dois métodos de criar uma aplicação react, pela velocidade nos processos, pelo tamanho de uma pasta base e outros fatores, atualmente eu prefiro utilizar o Vite em detrimento do CRA. Porém, isso de forma alguma quer dizer que o Vite é melhor, é apenas a minha opinião com base na experiência que tive utilizando os dois.

Espero que tenham gostado, esse é meu primeiro post na comunidade. Abraço e até a próxima.
How to build personal portfolio using HTML CSS JavaScript
Tags: css, tutorial, javascript, beginners
Published: 2022-03-19 19:25:00

{% youtube SoxmIlgf2zM %}

How to build personal portfolio using HTML CSS JavaScript

In this video, I will show you how to create (mobile-first responsive) personal portfolio.

[Live Website](https://codewithsadee.github.io/vcard-personal-portfolio)
[Github Repo](https://github.com/codewithsadee/vcard-personal-portfolio)

---

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/1xuCjxWke4rS2Uxtc8WTJVZ3XRNKhXnyv/view?usp=sharing)
[index.txt](https://drive.google.com/file/d/1EJbP9q-hzosu-AD5vuRGN0VZVk4hajj9/view?usp=sharing)
[Font - Poppins](https://fonts.google.com/specimen/Poppins?query=poppins)
[Icon](https://ionic.io/ionicons)

---

⏱️ Timestamps
-----------------------------
0:00 - Demo
6:43 - File sturcture
7:14 - Initial html
8:07 - Css custom property
9:29 - Reset
11:40 - Sidebar
31:47 - Navbar
35:36 - About and service
46:40 - Testimonials
57:03 - Testimonials modal
1:15:09 - Client
1:19:05 - Timelines
1:28:02 - Skills
1:32:49 - Portfolio
1:59:36 - Blog
2:10:41 - Contact
2:24:17 - Page navigation 
2:27:42 - 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)
Learning Golang • #Issue1
Tags: documenting, codenewbie, devjournal
Published: 2022-03-19 19:24:07

The journey has begun! I started a course on Codecademy **Learn Go**. :smiley:
I'll be learning how to use **Golang**, an open-source programming language that's supported by Google!

#Summary of what I’ve learnt so far:

In Golang, Values could be numbers ( 215) or text (“Hello earth”)
These values can then be written into code.

Variables and Constants are examples of Named values while Literal values are examples of Unnamed values.

Constants cannot be updated while the program is running, but the value of a Variable can be updated.

A keyword is used to create a Constant, then a value is assigned to the constant using a Literal. The constant’s name can be used throughout the rest of the program instead of the literal.
In Go, spaces aren’t allowed when naming constants.
Either camelCase or PascalCase formats are used; capitalizing each subsequent word instead of adding spaces.

In coding, using descriptive names are important...it makes us able to read and understand the code we write.

That’s a summary of what I have learnt so far.
...documenting my learning journey! :star2:



![Constants are examples of named variables in Go; a keyword is used to create a constant. Constants cannot be updated while the program is running.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sewftmek0hsqw47a7oj4.png)
Graphic design makes you better at CSS
Published: 2022-03-19 19:20:47

Yeah ,I know, CSS can be a pain in the ass. One simple change in the code and you don't know what you are looking at anymore. But it doesn't have to be that way. Some time spent doing graphics can better your CSS skills and your front-end design skills in general.

For me CSS is  mostly about visualization, you have to see it before you can actually do it.

The poster below shows a sample poster I designed using Canva and how I would visualize it if I wanted to recreate the same on a webpage using HTML and CSS.

![Screenshot 2022-03-10 121833 for blog.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1646943679309/zoe6T9-Jr.png)

## The CSS visualized version


![background image on body.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1646942125164/N_BDdSaV9.png)

From the above example it is evident how a career in graphic design might be what you need to reduce the headache that is CSS.
Let's make a primitive useState Hook
Tags: react, webdev, javascript
Published: 2022-03-19 19:18:40

## `useState` A magical hook or an 'Array'?, lets find out.

Let's make a function which will return a useState function.
```
const React = () => {
  return {
    useState: () => {}, 
  };
};
```
Declare a `let` variable inside React function, this variable will store our state value.

```
const React = () => {
  let stateValue;
  return {
    useState: () => {}, 
  };
};
```
Let's do some quick coding.

```
const React = () => {
  let stateValue;
  return {
   useState: (initialState) => {
     stateValue = stateValue || initialState;
     const setState = (newStateValue) => {
       stateValue = newStateValue;
     };
     return [stateValue, setState];
    },
  };
};
```
In above code, we are returning an array from `useState` in which `stateValue` is a variable which will hold our current state value, and `setState` is a function this will accept a updated value and set it to `stateValue`, this is how the state going to update.

This was the all concept, you can checkout the working code [here](https://codesandbox.io/s/cold-wind-jr2q73?file=/src/index.js)

_Comment below for any sort of question from that code._
Asymmetric Encryption In PHP
Tags: php, security, encryption, beginners
Published: 2022-03-19 18:55:00

Hey there, asymmetric encryption is awesome, right? It's the core encryption concept for all end-to-end encrypted chat systems like WhatsApp, signal, wire, etc. But how do we do that asymmetric encryption in PHP? Well, before we start doing asymmetric encryption, let's understand the core concept behind the system. 
Let's say, Alice, want to send a message to Bob, that no middle man but can read. To do that, Alice needs to access Bob's public key, encrypt her message using Bob's private key and send the encrypted message to bob again.
But wait, if Alice can get Bob's encryption key, doesn't that mean, anyone can Bob's public encryption key? Well, yes, anyone can. But here's the tricky part, even if someone can encrypt a message for Bob using his public key, it doesn't mean, anyone can decrypt and read Bob's message using his Public key. Because the public key can only encrypt messages. Decryption takes the private key, which only Bob knows and he doesn't share his private key with anyone! And that's the whole concept of Asymmetric Encryption. Enough of talks, time to write some code. 
Oh, Did I mention I wrote a complete article on [Encryption in PHP](https://www.blogdesire.com/encryption-in-php-what-why-when/)?
We'll be using the OpenSSL PHP extension for this. So, make sure you have a valid `openssl.cnf` installed on your system. If you don't have this on your device, don't panic, here is the [installation process](https://www.php.net/manual/en/openssl.installation.php)
Now here's the code block for a complete asymmetric encryption process on PHP using the OpenSSL extension. If you have any doubt or confusion about the code block below, make sure you check out my full article I mentioned above ;p
```
<?php 
//Initial
$res = openssl_pkey_new(array("private_key_bits" => 4096));
//Export the private key 
openssl_pkey_export($result, $privKey);
//Get the public key
$publicKey = openssl_pkey_get_details($result)['key'];
//Alice's Secret Message
$plaintext = "Well, I'm from Blogdesire ;p";
//Export the encrypted message to $encrypted
openssl_public_encrypt($plaintext,$encrypted,$publicKey);
//Print encrypted message
echo $encrypted;
//Time to decrypt the message using the private key
openssl_private_decrypt($encrypted, $original_message, $privKey);
//Print the decrypted message
echo $original_message;
```
Hope you found this helpful.
Teach a man to build fish, and he will have fish for a lifetime
Tags: fish, beginners, bash
Published: 2022-03-19 17:52:45

I have mixed feelings about fish, I don't like that it's incompatible with bash and I have to shift to bash relatively often just to get everything installing properly but I love the history and command completion in fish. It's in a realm of it's own. I use RHEL 7 for work and so I usually end up having to build fish from source so I can get the newest version. These are those steps so I don't have to constantly google it :)

I installed devtoolset-10 as I figured having a more modern compiler would probably also be required to build fish.

You can find those instructions at:

https://nivethan.dev/devlog/using-a-newer-gcc-in-rhel-7.html

Once you have a more up to date toolchain you'll need to install a newer version of cmake, cmake3. RHEL comes with cmake set to 2.8.

```
# yum install cmake3
```

Then we can get fish.

```
wget https://github.com/fish-shell/fish-shell/releases/download/3.4.0/fish-3.4.0.tar.xz
```

Now to build it.

```
> cd fish
> cmake3 .
> make
> sudo make install
```

Now we need to check where fish was installed.

```
> which fish
/usr/local/bin/fish
```

Now update /etc/shells to let it know about fish.

```
> sudo vim /etc/shells
```

We need to add `/usr/local/bin/fish` to /etc/shells if it's not already there.

Finally, we can run chsh and make fish our new default shell!

```
> chsh
Changing shell for nivethan.
New shell [/usr/bin/bash]: /usr/local/bin/fish
```

With that we are done! We should now have the latest and greatest shell ready to be used :)
Bubble Sort
Published: 2022-03-19 18:41:39

V1- the second for loop has an -i as shown below

`let bubbleSortV1 = (inputArr) => {
    let len = inputArr.length;
    for (let i = 0; i < len; i++) {
        for (let j = 0; j < (len-1-i); j++) {
            console.log("im in here with j v1 = "+ j);
            if (inputArr[j] > inputArr[j + 1]) {
                let tmp = inputArr[j];
                inputArr[j] = inputArr[j + 1];
                inputArr[j + 1] = tmp;
            }
        }
        console.log("\n");
    }
    return inputArr;
};`

The second version has no -i

`let bubbleSortV2 = (inputArr) => {
    let len = inputArr.length;
    for (let i = 0; i < len; i++) {
        for (let j = 0; j < (len-1); j++) {
            console.log("im in here with j v2 = "+ j);
            if (inputArr[j] > inputArr[j + 1]) {
                let tmp = inputArr[j];
                inputArr[j] = inputArr[j + 1];
                inputArr[j + 1] = tmp;
            }
        }
        console.log("\n");
    }
    return inputArr;
};`


The results of these two versions are as shown below with an example for reference

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