teleren/devto huggingface dataset:
Temperature and Humidity Monitor - Using IoT, Azure and Xamarin
Tags: azuretrialhack, csharp, iot
Published: 2022-03-05 18:18:30

{% youtube fZ4E-QXCR_s %}

### Overview of My Submission
IoT-based temperature and humidity monitoring system with NodeMCU ESP8266 attached to DHT11 sensor that captures local temperature and humidity information, and integrates with Azure IoT Hub, which sends measurement events such as messages to Azure Service Bus. Azure Functions consume these messages by persisting and making data available for viewing in an Xamarin App. 

### Submission Category: 
Wacky Wildcards


### Link to Code on GitHub
The code for both the app and the IoT part is present in the following GitHub repo:
{% github leoguilen/nodemcu_azureIoTHub_xamarinApp %}


### Additional Resources / Info
System Architecture Image:
![System Architecture Image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tvqc1oje7egzv7njwgvk.jpeg)


### References
* [Connecting an ESP8266 to Azure Iot Hub](https://www.codecauldron.dev/2021/04/25/connecting-an-esp8266-to-the-azure-iot-hub/)
* [Azure Iot Hub with ESP8266](https://blog.avotrix.com/azure-iot-hub-with-esp8266/)
* [Azure IoT Hub Documentation](https://docs.microsoft.com/en-us/azure/iot-hub/)
* [Interfacing DHT11 sensor ESP8266](https://electrosome.com/interfacing-dht11-sensor-esp8266/)
* [How to connect DHT11 sensor with arduino](https://create.arduino.cc/projecthub/pibots555/how-to-connect-dht11-sensor-with-arduino-uno-f4d239)
5 Articles every WebDev should read this week (#09)
Tags: webdev, tutorial, javascript, programming
Published: 2022-03-05 18:02:27

A curated list of the top five web development must-reads from last week. Don't miss out on the latest web development stories and insights. Read all about the cutting edge in web development, working in tech and the new tools and frameworks while learning a few new tricks.

---

## New CSS Features In 2022

> 2022 is shaping up to be a pretty great year for CSS, with a plethora of new features on the horizon. Some are already starting to land in browsers, others are likely to gain widespread browser support in 2022, while for one or two the process may be a little longer. In this article we’ll take a look at a few of them.

<https://www.smashingmagazine.com/2022/03/new-css-features-2022/>

---

## Writing Logic in CSS

> CSS is a highly specialized programming language focusing on style systems. Because of this unique use case and its declarative nature, it’s sometimes hard to understand. Some folks even deny it’s a programming language altogether. Let’s prove them wrong by programming a smart, flexible style system.

<https://iamschulz.com/writing-logic-in-css/>

---

## New Open Source Library: Announcing @xata.io/screenshot

> Our screenshot library wraps the native MediaDevices web platform API with a more intuitive and straightforward abstraction that allows users to take a screenshot from their computer, which they can then include in their feedback to us.

<https://www.xata.io/blog/introducing-screenshot/>

---

## Is Firefox OK?

> Mozilla’s privacy-heavy browser is flatlining but still crucial to future of the web.

<https://arstechnica.com/gadgets/2022/02/is-firefox-ok/>

---

## CSS Specificity

> Specificity is the means by which browsers decide which CSS property values are the most relevant to an element and, therefore, will be applied. Specificity is based on the matching rules which are composed of different sorts of CSS selectors.

<https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity>

---
 
Follow me on [Twitter: @martinkr](http://twitter.com/_martinkr).

Photo by [Alex Kulikov](https://unsplash.com/@burntime) on [Unsplash](https://unsplash.com)

---

[![Subscribe to the weekly modern frontend development newsletter](https://modernfrontend.dev/banner/banner_583-111.png)](https://modernfrontend.dev/)

---
What the heck are callbacks? Promises? Async\Await? — what a MESS
Tags: javascript, asynchronous, callstack, heapmemoery
Published: 2022-03-05 17:54:43

> My goal in this post series is meant to help you get a better understanding of this large concept by looking at many different perspectives and explanations. I hope you find it helpful in getting a better understanding what asynchronous is and why you need to understand it.

But first, let's start from the very beginning, lets dive in (:

JavaScript is a single threaded programming language. OK… Let's try again.

JavaScript uses the Single Thread Runtime, which means one thing is done at a time. In other words, it can run one piece of code at a time and must finish executing it before moving on to the next.
So how does JS handle asynchronous operations?

So, the fact is JavaScript is a single threaded programming language BUT the JavaScript runtime is definitely not.
For a clearer picture of how JS runtime works, we need to understand first what are Stack and Heap.

_Stack Memory:_
The stack is a place in computer memory where all the variables that are declared and initialized before runtime are stored.
Uses to store static data, static data is data where the engine knows the size at compile time, in JS this includes Primitive values (string, numbers, booleans, etc…).
Stack is much faster than the heap but also smaller and more expensive.

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

_Memory Heap:_
heap is the section of computer memory where all the variables created or initialized at runtime are stored.
It is a different place for storing data like objects/variables.
The heap is more flexible than the stack. That's because memory space for the heap can be dynamically allocated and de-allocated as needed.

Here are the two storages compared side by side for the table lovers <:

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

So, in conclusion, we need the memory heap as a place to store and write information and the stack help us keep track of where we are in the code so that we can run the code in order.

I've learned this from some other great articles I want to mention here as well:

- [Javascript Memory Management](https://felixgerschau.com/javascript-memory-management/)
- [what-and-where-are-the-stack-and-heap](https://stackoverflow.com/questions/79923/what-and-where-are-the-stack-and-heap)
- [asynchronous-adventures-in-javascript-understanding-the-event-loop](https://medium.com/@BenDiuguid/asynchronous-adventures-in-javascript-understanding-the-event-loop-fc6f968d5f72)

Hope you'll find this post useful and in the next post we'll continue diving into how V8 engine works and how it helps us (:

> Yanir, Full-Stack developer with passion to JS
[Github ](https://github.com/Yanir-R)| [Linkedin](https://www.linkedin.com/in/yanirrot/)
Entendiendo el método bind()
Tags: javascript, webdev, programming, 100daysofcode
Published: 2022-03-05 17:53:54

El método `bind()` se usa para crear una nueva función donde el primer parámetro es el objeto al cual se quiere hacer referencia cuando se usa la keyword `this` dentro de la función.

Por ejemplo, se tiene los siguiente dos objetos:

```jsx
const person1 = {
	name: 'Harvey',
	age: 30,
	getData(hobby) {
		return `Hello, I'm ${this.name}, I'm ${this.age} and I like to ${hobby}`
	}
}

const person2 {
	name: 'Spencer',
	age: 24
}
```

Como podemos ver, el objeto `student` no tiene el método `getData()`, sin embargo, podemos hacer uso de este gracias al método `bind` ya que podemos pasarle como primer parámetro al objeto `student`, por lo que `this` apuntará a este objeto.

```jsx
const person = {
	name: 'Harvey',
	age: 30,
	getData: function(hobby) {
		return `Hello, I'm ${this.name}, I'm ${this.age} and I like to ${hobby}`
	}
}

const student = {
	name: 'Spencer',
	age: 22
}

const getStudentData = person.getData.bind(student);

console.log(getStudentData('play videogames')); // Hello, I'm Spencer, I'm 22 and I like to play videogames
```

Otra forma de pasarle los parámetros necesarios a la función es usando el mismo método `bind()`, ya que, si bien el primer parámetro hace referencia al objeto que usaremos, a partir del segundo parámetro serán los argumentos definidos en la función original.

```jsx

const getStudentData = person.getData.bind(student, 'play videogames');

console.log(getStudentData()); // Hello, I'm Spencer, I'm 22 and I like to play videogames
```

> 💡 Cuando se vea la expresión `this.cualquierMetodo.bind(this)` es porque se esta llamando el método de dicho objeto y para evitar perder la referencia del mismo se establece de forma explícita mediante el método `bind()`.
Web3 vs Web2? What does that even mean!?
Tags: web3, ethereum, wagmi, nestcoin
Published: 2022-03-05 17:38:42

Everyone is talking about Web2 vs Web3 these days. But what do they mean by Web2 and Web3? I hope this article will help you understand the basic differences between the two.

Web2 is a term that describes the internet we know and use today. It allows us to dynamically interact with websites on the internet. An example of a web2 app would be YouTube.

The fundamental difference between web2 and web3 technologies is their architecture.

## Web2 architecture consists of;

- A place to store essential data (user credentials, likes, comments, etc)
- A backend to define business logic.
- A frontend to display what the app/website looks like and what happens when a user interacts with elements of the app

![Image of web2 architecture ](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ke7p227uu63vgbtj25zu.png)

## Web3 architecture is very different because it;

- Uses smart contracts for backend logic
- Uses blockchain to build apps on a decentralized state machine (eg. EVM) that is maintained by nodes on the network.


![Image of web3 architecture](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jzfkd4186fn9km1x981o.png)

By looking at the difference between Web2’s & Web3’s architecture we can see that the main issue here is centralization vs decentralization.

In Centralized Systems participation in the network is controlled by the central authority but in Decentralized Systems ideally, anyone can participate in the network.

In the past few years, we have seen issues with web2 companies harvesting search histories, email topics, likes, political and religious affiliations, sexual orientation, relationship status, health information, purchase histories of all sorts, and selling this data to marketing and advertising firms as part of their business models. Owning the user is part of the web2 “ethos”.


Essentially, Web3 can be regarded as the next-generation internet, where everything that could be done in Web2 can still be done but in a decentralized way meaning
participants can interact without permission from a trusted intermediary or governing body.
no central authority can control content and impose indiscriminate censorship

Web3 technologies are hoping to shift the power away from big tech corporations to individual users.

The Nigerian startup [Nestcoin](https://nestcoin.com/) is helping bring web3 technologies to Africa by building web3 apps and helping the ecosystem grow by training new blockchain developers in collaboration with [ZuriTeam](https://zuri.team/) and [Blockgames](https://blockgames.gg/). You can check out their youtube [here](https://www.youtube.com/watch?v=ONb8luX43h8&list=PLxuUHF3OiqfUDGh5gwLdRvuFiFHjWEBEz&index=12). 

Another resource I REALLY like (that is also one of Nestcoin’s products) is the Breach blog which you can check out [here](https://breachclub.medium.com/).
Porque devemos utilizar a injeção de dependência no .NET ?
Tags: dotnet, dependencyinjection, cleancode, solid
Published: 2022-03-05 17:35:17


Quando estamos a desenvolver um sistema procuramos seguir as boas práticas do desenvolvimento, dentre elas, uma super importante é **Single-responsibility principle (SRP)**, que afirma que cada módulo, classe ou função em um programa de computador deve ter responsabilidade sobre uma única parte da funcionalidade desse programa e deve encapsular essa parte.


Para que o SPR seja seguido é necessário a divisão do programa, essa divisão gera dependências entre as partes, e essa dependências podem ser problemáticas e devem ser evitadas pelos seguintes motivos:

* Modificar a dependência gera impacto de quem depende dela.
* Caso a dependência tenha outras dependências, quem utiliza terá que configurar tudo.
* É trabalhoso testar a implementação.


A injeção de dependência vai tratar os problemas citados acima dessa maneira:
* Utilizará uma interface ou classe base abstraindo a implementação da dependência.
* As configurações dessas dependências podem ser feitas em um só lugar, no caso do .Net, ele oferece um contêiner de serviço interno, o IServiceProvider, geralmente registrado no arquivo Program.cs
* A injeção do serviço acontecerá no constructor da classe que o necessitar, assim tendo a responsabilidade de criar e descartar quando não for mais necessário.


Ao atacar esses problemas com a injeção de dependências geramos o benefício do baixo acoplamento em nosso código, facilitando:
* A extensão.
* O teste.
* A manutenção
* O desenvolvimento de código paralelo, já que o código que necessitava da dependência agora depende de uma abstração e não será modificado sem necessidade.
* Runtime binding (ligação em tempo de execução), é quando tomamos a decisão de executar algo em tempo de execução em vez de tempo de compilação.


## Materiais de referência
https://docs.microsoft.com/pt-br/aspnet/core/fundamentals/dependency-injection?view=aspnetcore-6.0
https://en.wikipedia.org/wiki/Single-responsibility_principle
https://app.pluralsight.com/library/courses/using-dependency-injection-on-ramp/table-of-contents
How to perfect planning make a website before coding?
Tags: beginners, webdev, design, html
Published: 2022-03-05 17:28:10


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pkl8xburzhje03m2jtlg.png)In this tutorial, I will discuss how to make an attractive website and perfect planning before coding. Always remember the top 5 rules of making a website.
1. Color
2. Font
3. Size
4. Alignment
5. Cleanness

**# Color:**
At first, you choose the perfect two or three colors for your website. Because It is not good to use too many colors, it spoils the beauty of the website. Which color you have used more in your site that is your primary color. Then select a secondary color and text color for your website. You will try to logo, icon, button color match your website color. So there is the important thing that :
**Color:** Select Primary and Secondary color
Here primary color that you use the whole website. Use secondary colors on important parts.
**Text:** Select Primary And Secondary color
Here primary color you use as default and the secondary color uses important text, heading, title.

**#Font:**
Choose one or two font families for your website. 16px or 18px font size is best and set line-height value 1.5. Heading tags like h1, h2, h3, h4, h5, and h6 font size and font weight set your main CSS file.

**#Size:**
Same size Icons, Button use your whole website. Use the same padding or margin in every section.

**#Alignment:**
Alignment is the most important thing in your design. On your website, first to last every section uses the same alignment.

**#Cleanness:**
Use neat, clean, and simple images on your website. Avoid more color, more than two font families, and font size.
Created an Resume that runs on command Line 
Tags: javascript, programming, beginners, webdev
Published: 2022-03-05 17:26:34

Hi folks and developers , I have developed my virtual resume that runs on command line , install npm and check my resume.


Sharing the github link -https://github.com/pushanverma/cliresume

(✨ Star the repo for supporting the developer journey and give this post a like )
Unix Print Aliased Command's Location
Tags: unix, linux, beginners
Published: 2022-03-05 17:11:31

---
title: Unix Print Aliased Command's Location
published: true
date: 2022-03-05 17:00:10 UTC
tags: unix,linux,beginners
series: "Sunday Snippet"
canonical_url: https://clavinjune.dev/en/blogs/unix-print-aliased-command-location/
---

 ![Sunday Snippet #7 unix print aliased command's location](https://clavinjune.dev/img/sunday-snippet/image.png "Sunday Snippet #7 unix print aliased command's location")

```shell
$ which ls
ls: aliased to ls -G
$ type -a ls
ls is an alias for ls -G
ls is /bin/ls
```
The Beginning of Project Skill Tree
Tags: programming, webdev, beginners, career
Published: 2022-03-05 16:55:05

[Project Skill Tree](https://1drv.ms/p/s!Audo5lI2bixcvdAq9-3q_P108EJ9ZA?e=DpygaN) is a fairly ambitious project with the goal of creating a free application that allows users to create, share, and link to existing [skill trees](https://miro.com/app/board/o9J_ltxi12g=/).

## Motivation

I was presenting example ideas of how to improve the U.S. education system for a school project and I came up with an idea of gamifying knowledge acquisition through skill trees. Months later, I was somehow reminded of this idea while teaching my sibling how to code. I have thought a lot about improving U.S. education and I think making U.S. education a more fun game to play is a step in the right direction.

## Problems Solved

I feel like this application could solve the following problems in this order of prioritization:

1. Help teachers create a self-paced curriculum for students, as well as keep track of their student's interests and progress.
2. Allow students of all ages to find high quality online resources through educational links and book ISBNs embedded in the skill tree nodes curated by the skill tree author(s).
3. Make education fun, visually appealing, and decentralized. This will be achieved through the "choose your own adventure" nature of the skill tree, dynamic interactive graphs, and community-driven contributions.
4. Solve the "What next?" question through well-trodden learning paths in the form of recommendations.
5. Encourage academic experimentation by prioritizing the option to forge one's own path.
6. Passively creating a decentralized method of recording the process of world knowledge acquisition across many people.
7. Decentralize the grading verification process: a system of verified professional graders (teachers, professors, instructors) can log in and grade their student's work. Each node will have an end-product project link to view their project somewhere on the web.
Laravel 9 Autocomplete Search Example using Ajax
Tags: laravel
Published: 2022-03-05 16:51:35

In this example, I will show you laravel 9 autocomplete search from database. you'll learn create autocomplete search in laravel 9. Here you will learn ajax autocomplete textbox in laravel 9. I would like to share with you laravel 9 input field autocomplete ajax.

In this example, we will download the fresh laravel 9 app and run migration for creating users table. Then we will create some dummy users using tinker. Then we will create a simple blade file with the input field. we will create autocomplete text box using typeahead.js.

So, let's see simple steps to complete this task.

[Laravel 9 Autocomplete Search Example using Ajax](https://www.codecheef.org/article/laravel-9-autocomplete-search-example-using-ajax)
Paracetamol.js💊| #71: Explica este código JavaScript
Tags: javascript, spanish, webdev, beginners
Published: 2022-03-05 16:37:21

## **Explica este código JavaScript**

```js
const nombre = "Cristian";
nombre = "Fernando";
console.log(nombre)

const persona = {
  id: 1,
  nombre: "Cristian",
};

persona.nombre = "Fernando";
console.log(persona.nombre);
```

A. `Fernando`, `Fernando`
B. `Cristian`, `TypeError`
C. `Cristian`, `Fernando`
D. `TypeError`, `Fernando`

Respuesta en el primer comentario.

---
How to register an AppImage as a desktop application in Linux
Tags: productivity, tutorial, linux
Published: 2022-03-05 16:36:54

**The Scenario:**  
You have an .AppImage file and would like to treat it like an installed Linux app.

**The solution:**  
Create a [custom .desktop file](https://people.gnome.org/~shaunm/admin-guide/menustructure-6.html)

For this article, I'll use the following constraints:

*   Register the Electron.js app [Marktext](https://marktext.app/) on an Ubuntu 20.04 distro
*   Use [this icon](https://icon-library.com/images/markdown-icon/markdown-icon-2.jpg) from icon-library.com

Let's do it.

> NOTE: You might have to use `sudo` commands to access files in the `/bin` and `/usr` directories

1.  Download the .AppImage file and an icon you would like to register it with
2.  Move the .AppImage file to the path `/bin`,  
    e.g. `sudo mv ~/Downloads/Marktext.AppImage /bin/`
3.  Make it executable with `sudo chmod +x /bin/Marktext.AppImage`
4.  Save the icon under `/usr/share/icons/custom/markdown.png`  
    e.g. `sudo mkdir --parents /usr/share/icons/custom` && `sudo mv ~/Downloads/markdown.png /usr/share/icons/custom/`
5.  Create a .desktop file under `~/.local/share/applications/marktext.desktop`
6.  Paste the following content into it (make sure to remove the comments):

```bash
[Desktop Entry]
Name=Mark Text
Comment=Next generation markdown editor
Exec=/bin/marktext-x86_64.AppImage        # replace with your .AppImage
Terminal=false
Type=Application
Icon=/usr/share/icons/custom/markdown.png # replace with your icon
Categories=Office;TextEditor;Utility;
MimeType=text/markdown;
Keywords=marktext;markdown;               # add searchable keywords
StartupWMClass=marktext
Actions=NewWindow;
```

That should do it. Try pressing the `Super` key now and search for the app.

![](https://blog.q-bit.me/content/images/2022/03/2022-03-05_17-24.png)

Hitting enter should then start up your application.
Library for creating simple web Visio-like diagrams?
Tags: angular, javascript, webdev
Published: 2022-03-05 16:34:01

What javascript libraries exist for building simple Visio-like free-form diagrams on a website?

Basically I want the user to manipulate objects and lines:

- Add rectangles and images as objects
- Add lines between points on objects
- Drag objects, keeping lines connected
- Change colors of lines & objects
- (optional) Manually change the way the lines flow around objects
All manual. No automatic positioning or flow needed. I don't want data-driven diagrams/charts.

I intend to build in Angular & typescript.