teleren/devto huggingface dataset:
How to control the value of a Datapoint using t6 ?
Tags: javascript, tutorial, iot, beginners
Published: 2022-07-17 16:22:06

This recipe will help you to figure out how [t6 transformation preprocessor](https://api.internetcollaboratif.info) should be implemented and how you can use it.

## Check prerequisites

t6 require a Flow to store specific measurements. To use this recipe you’d first need to create a Flow like the following example. Feel free to review the [technical documentation](https://doc.internetcollaboratif.info/#api-Flow-Create_new_Flow) for details.

`{
    "name": "My Flow that contains only floats normalized values",
    "data_type": "e7dbdc23-5fa8-4083-b3ec-bb99c08a2a35",
    "require_signed": false,
    "require_encrypted": false,
    "retention": "retention1w",
    "preprocessor": [
        {
            "name": "transform",
            "mode": "replace",
            "pattern": "(,)",
            "replacer": "."
        },
        {
            "name": "sanitize",
            "datatype": "float"
        }
    ]
}`
Basically, this Flow is setting the datatype as a Float, and 2 preprocessors will fire before saving datapoint to the Flow:

- The first transformation will simply substitute coma with a dot
- The second one will sanitize the value from a string to a Float type

Once your Flow created (that will contains your measurements), take note of the flow.data.id on the Api results. This value will be used on datapoints creation as the referring variable `{{$flow_id}}`.

## Create datapoints

Here we are going to post datapoints as string with a non-normalized value (we’ll use a coma instead of a dot for decimals).

```{
    "value": "100,456798",
    "flow_id": "{{$flow_id}}",
    "save": true,
    "publish": true
}```

And voilà, you’ll notice the Api results will transform the initial value into a Float using a correct Float value.

The preprocessor array in the result shows all the values along the preprocessor computation.
There is a double sanitization to Float as the latest one is forced by t6 on any datapoint posted ; we would have removed the sanitize preprocessor on the Flow creation above with exactly the same result.

```"value": 100.456798,
"preprocessor": [
    {
        "name": "transform",
        "mode": "replace",
        "pattern": "(,)",
        "replacer": ".",
        "initialValue": "100,456798",
        "transformedValue": "100.456798",
        "message": "Transformed to replace.",
        "status": "completed"
    },
    {
        "name": "sanitize",
        "datatype": "float",
        "initialValue": "100.456798",
        "message": "Converted to float.",
        "status": "completed"
    },
    {
        "name": "sanitize",
        "datatype": "float",
        "initialValue": "100.456798",
        "message": "Converted to float.",
        "status": "completed"
    }
],```

To have more details on Datapoints, read the technical documentation.

[t6 is an IoT plateform](https://api.internetcollaboratif.info) dedicated to data.
React Life Cycle And Hook
Tags: webdev, react, javascript, beginners
Published: 2022-07-17 16:08:42


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7n3frkfga9e3pgkw19ff.png)React js is Now the Most popular Javacript Library. It's very easy to quickly learning. Comparatively with other library and framework its very flexible and Simple. That is one of the best reasons for this popularity. 
We discuss here about the what is the life cycle in react and what is react hooks?
Currently React working with React-18.  Before React 16, react use a class-based Component that was based on OOp Concept. React 16 introduced the react functional component, which is based on functional programming. In this stage react introduced with us about react hook. After React 16 release, React managed the Life cycle in a new way. Let's explore that... 

Usually React maintains code component-wise. It helps to divide the code organized. It helps to maintain the code.
React Component has three-stage. 

**Mounting - Birth of a component
Updating - Update/Modify the Component
Unmounting - the death of the component**

## Class-Based Component - 
In class Based Component React handle that using  Mainly three function. 

**Mounting**
componentDidMount(). Mainly This Function Using for Mounting the component including other built-in functions or methods.

**Updating**
componentDidUpdate(). This function works to dynamically update something within the component.

**Unmount**
componentWillUnmount() After the mounting and updating of the component, the end-stage is component unmount. This method is used to component unmount.

## Functional Component - 
On top of the content, we know react is a functional component. This component uses functional programming concept thats why react builtin method introduce to us as react hooks. React lifecycle works well with this component. 

The main thing is React Component handle the component life cycle method using one hook. That is called react useEffect Hooks. Maximum Case we can use this function for the purpose of react life cycle.

 
Inspire From - https://massivepixel.io/blog/react-lifecycle-methods/
My experience of switching to Notion for Game Development
Tags: gamedev, productivity, programming
Published: 2022-07-17 16:01:59

For the past year, I have been using [Trello](https://trello.com) as my primary tool for productivity. And I was and still am extremely happy with the tool. It does a great job at keeping me productive and from going insane.

But recently, I came across a tool called Notion. I had heard about it but never bothered to check their website. This time, I did check their website, and was amazed by how versatile the tool is. It could do so much more than just Project Management. I got super excited about using it. So I created an account, logged in, only to log out 5 minutes later due to the overwhelming data.

😬😬😬

When I logged in, it was like a whole new world. There were pages, databases, templates, plugins, integrations. It was too much for my brain to process.

So after staying away from Notion for 1 week, I calmed my brain and said, "Okay, let's do this, one step at a time.". And it worked! I was able to figure out Notion's entire database schema within a few minutes of reading. This made me realise 2 things.

1. The Notion schema is simple, yet incredibly genius.
2. Notion feels like a lot at first, but if you give it time, you can easily master it and use it to improve your productivity.

Fast-forward to present day, I am doing pretty much everything except coding on Notion for Game Development. (Frankly, I won't be surprised if they add a Unity plugin 😅). My kanban development boards, documentations, and everything else is on Notion.

I highly recommend Notion if you need a tool which does more than task-tracking, even if you aren't into Game Development. The way I see it, it could be used for blogging, project management, documentation, personal life, family activities, and more. It proves worthy of being the Swiss knife of keeping a track of your life.
Convert WebP image files (Linux)
Tags: linux, ubuntu
Published: 2022-07-17 15:46:45

Make sure you have `imagemagick` installed (`sudo apt install imagemagick`):

```
$ identify image.webp 
image.webp WEBP 1000x420 1000x420+0+0 8-bit sRGB 30652B 0.000u 0:00.000

$ convert image.webp image.png

$ identify image.png 
image.png PNG 1000x420 1000x420+0+0 8-bit sRGB 242919B 0.000u 0:00.000
```
Hosting CSS Code Online for free with StaticSave
Tags: css, hosting, code
Published: 2022-07-17 15:45:32

[StaticSave](https://staticsave.com/) is a free online service that allows you to host your CSS code for free. This can be useful for a number of reasons, such as sharing your code with others or keeping a backup of your code in case your computer crashes.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dy99pxq8g5vs6f8223io.png)

## Why use StaticSave?

There are a number of reasons why you might want to use StaticSave to host your CSS code. For example, if you are a web developer, you can use StaticSave to share your code with others. Or, if you are worried about losing your code, you can use StaticSave to keep a backup.

## How to use StaticSave

Using StaticSave is easy. First, go to the StaticSave website and create an account. Once you have an account, create folder and the required file with the file type, then you can paste your CSS code in the field provided. To do this, click the “Submit to Save” button after you have created a file. 

Once your file is saved or hosted, you can share it with others by copying and pasting the code’s URL.

Also Read: [Importance of CSS in Web Development](https://staticsave.com/blog/importance-of-css-in-web-development)

## Pros and cons of StaticSave

StaticSave has a number of advantages. First, it’s free. Second, it’s easy to use. Third, it can be a great way to share your code with others. 

However, there are a few disadvantages. First, your code is public or unlisted. Anyone who has the URL can view your code. Second, StaticSave does not offer your code to be private, unless you upgrade to Premium account. If you accidentally delete your code, there is no way to recover it.

## Conclusion

[StaticSave](https://staticsave.com/) is a free online service that can be used to host CSS code. It has a number of advantages, such as being free and easy to use.
Find library dependencies of a binary file (Linux)
Tags: linux
Published: 2022-07-17 15:43:01

The information that we want is stored on the [ELF header](https://en.wikipedia.org/wiki/Executable_and_Linkable_Format) of the file. We can analyze that with either `objdump` or `readelf`:

```
$ objdump -p /bin/cat | grep NEEDED
  NEEDED               libc.so.6

$ readelf -d /bin/cat | grep NEEDED
 0x0000000000000001 (NEEDED)             Shared library: [libc.so.6]
```

Both outputs `libc.so.6`. But what about the dependencies of `libc`? You would have to run the command again in a loop to list all the dependencies.

You can avoid all that work with `ldd`:

```
$ ldd /bin/cat
        linux-vdso.so.1 (0x00007ffdb3b54000)
        libc.so.6 => /lib/x86_64-linux-gnu/libc.so.6 (0x00007f1aece58000)
        /lib64/ld-linux-x86-64.so.2 (0x00007f1aed076000)
```

Not only they have listed the libraries but also gave their paths, nice.

If you are curious about `linux-vdso.so.1`, here's a [Stack Overflow answer](https://stackoverflow.com/a/58657078) on it.
Laravel Livewire Turbolinks with Image lazyload
Tags: javascript, discuss, php, laravel
Published: 2022-07-17 15:41:18

I am building a website on laravel livewire. I've impimented turbolinks and to speed up the website, I am trying Vanilla LazyLoad everything is working fine until I switch pages using links.

Website is working like a SPA as expected, but when I switch page from home to any other page of same website and back to home, I ends up with dummy low quality image which is switched by lazyload on page load. I mean, when the page loaded or refreshed, I'll see dummy low quality images, which then switched to original images, but when I visit link using turbolinks images do not switch.

Anyone has any idea on this? Or any other suggestion to lazyload image in livewire turbolinks. 

Thanks
CSSBattle | #28 Cups & Balls
Tags: css, challenge, cssbattle, cupsandballs
Published: 2022-07-17 15:37:19

Welcome to CSSBattle Challenges!

In this short article, I go through my solution for [CSSBattle - #28 Cups & Balls](https://cssbattle.dev/play/28) challenge. Please refer to the code snippet below to get a better insight into my thought processes and the implementation detail.

---

> #### Challenge:

![Cups & Balls Challenge](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yk0ev661rksklb2dugcd.png)

---

> #### Solution:

```html
<div class="container">
  <div class="box">
    <div class="ball bg-lemon-ginger"></div>
    <div class="cup bg-yellow-orange"></div>
    <div class="cup bg-lemon-ginger"></div>
    <div class="ball bg-yellow-orange"></div>
    <div class="cup bg-yellow-orange upside-down"></div>
    <div class="ball bg-lemon-ginger "></div>
    <div class="ball bg-yellow-orange"></div>
    <div class="cup bg-lemon-ginger upside-down"></div>
  </div>
</div>

<style>
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  .container {
    background: #1A4341;
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .bg-yellow-orange {
    background: #F3AC3C;
  }
  .bg-lemon-ginger {
    background: #998235;
  }
  .upside-down {
    transform: rotate(180deg);
  }
  .box {
    width: calc(50px + 50px + 50px + 50px + 60px);
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
  }
  .ball {
    width: 50px;
    height: 50px;
    border-radius: 50%;
  }
  .cup {
    width: 50px;
    height: 50px;
    border-top-left-radius: 50px;
    border-top-right-radius: 50px;
  }
</style>
```

---

> #### Key Takeaway(s):
- using display: flex to align items both vertically and horizontally
- using gap property to create equal spacing between flex children elements

As always, I welcome any feedback or questions regarding the implementation detail of the challenge. Otherwise, I hope this was useful!
CSSBattle | #27 Lock Up
Tags: css, challenge, cssbattle, lockup
Published: 2022-07-17 15:33:09

Welcome to CSSBattle Challenges!

In this short article, I go through my solution for [CSSBattle - #27 Lock Up](https://cssbattle.dev/play/27) challenge. Please refer to the code snippet below to get a better insight into my thought processes and the implementation detail.

---

> #### Challenge:

![Lock Up Challenge](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/s20fcqm52rx3g9zsdh51.png)

---

> #### Solution:

```html
<div class="container">
  <div class="red-circle"></div>
  <div class="yellow-circle-borders"></div>
</div>

<style>
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  .container {
    background: #E38F66;
    width: 100vw;
    height: 100vh;
    position: relative;
  }
  .red-circle {
    position: absolute;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: #AA445F;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .yellow-circle-borders {
    border: 30px solid #F7EC7D;
    width: 140px;
    height: 140px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(45deg);
    border-radius: 50%;
    border-left-color: transparent;
    border-right-color: transparent;
  }
</style>
```

---

> #### Key Takeaway(s):
- using transparent border colors to hide the entirety of an element's shape

As always, I welcome any feedback or questions regarding the implementation detail of the challenge. Otherwise, I hope this was useful!
Go Course: Build
Tags: go, tutorial, beginners
Published: 2022-07-17 15:29:02


Building static binaries is one of the best features of Go which enables us to ship our code efficiently.

We can do this very easily using the `go build` command.

```go
package main

import "fmt"

func main() {
	fmt.Println("I am a binary!")
}
```

```bash
$ go build
```

This should produce a binary with the name of our module. For example, here we have `example`.

We can also specify the output.

```bash
$ go build -o app
```

Now to run this, we simply need to execute it.

```bash
$ ./app
I am a binary!
```

_Yes, it's as simple as that!_

Now, let's talk about some important build time variables, starting with:

- `GOOS` and `GOARCH`

these environment variables help use build go programs for different [operating systems](https://en.wikipedia.org/wiki/Operating_system)
and underlying processor [architectures](https://en.wikipedia.org/wiki/Microarchitecture).

We can list all the supported architecture using `go tool` command.

```bash
$ go tool dist list
android/amd64
ios/amd64
js/wasm
linux/amd64
windows/arm64
.
.
.
```

Here's an example for building a window's executable from macOS!

```bash
$ GOOS=windows GOARCH=amd64 go build -o app.exe
```

- `CGO_ENABLED`

This variable allows us to configure [CGO](https://go.dev/blog/cgo), which is a way in Go to call C code.

This helps us to produce a [statically linked binary](https://en.wikipedia.org/wiki/Static_build) that works without any external dependencies.

This is quite helpful for, let's say when we want to run our go binaries in a docker container with minimum external dependencies.

Here's an example of how to use it:

```bash
$ CGO_ENABLED=0 go build -o app
```

---

_This article is part of my open source [Go Course](https://www.karanpratapsingh.com/courses/go) available on Github._

{% github karanpratapsingh/go-course %}
Golang for Java Developers - [ part 1, pt-BR ]
Tags: go, java, developement
Published: 2022-07-17 15:17:56

O objetivo deste artigo é mostrar algumas Características da da linguagem Go a partir da perspectiva de um desenvolvedor Java. Para que a leitura não fiquei muito cansativa, eu irei dividir esse artigo em algumas partes, sendo essa portanto a parte 1.

Eu trabalho com o desenvolvimento de software há mais de uma década e durante essa jornada tive a oportunidade de trabalhar e conhecer diversas linguagens de programação compiladas e interpretadas, conhecer diversas tecnologias e frameworks, porém o Java é a linguagem que esteve mais presente durante essa trajetória. Por conta disso, eu considero o Java como a minha principal linguagem de programação.

Recentemente fui convidado a participar de um projeto, onde minha atividade consistia em pegar uma aplicação que havia sido desenvolvida em Java e reescrevê-la para Go em um modelo _As Is / To Be_.

OBS: Não faz parte do escopo deste artigo justificar o porquê de tal decisão. O que posso compartilhar aqui é que tal projeto era bem estratégico, onde o tempo de inicialização da aplicação era muito importante.

Após alguns _benchmarks_, o _Golang_ mostrou um tempo de inicialização muito satisfatório e também um mecanismo de _multithreading_ fácil de usar com base na implementação das suas _goroutines_.

Dado esse breve contexto, quero compartilhar algumas percepções em relação a essa fabulosa linguagem a partir da perspectiva de um dev Java.

---

**Let's start**

_Main class_

Estrutura básica da classe principal escrita em Go:

```

package main

import “fmt”

func main() {

    fmt.Println(“Hello, world!”)

}

```

Implementação equivalente em Java:

```

public class MainClass {

    public static void main(String [] args) {

        System.out.println(“Hello, world”);

    }
}

```


É possível notar algumas semelhanças entre as duas implementações, porém vamos dar ênfase nas diferenças entre elas:

**1**) Go dispensa a utilização de ponto e vírgula;

**2**) A implementação em Go possui apenas a declaração das funções, mas nenhuma declaração de nome de classe, dando a sensação que em Go trabalhamos apenas com escopo de função e não de classe. 

_**OBS**: Isso não deixa de ser verdade, mas falaremos disso mais adiante;_

**3**) A declaração explícita da visibilidade da função utilizando palavras reservadas como public, protected ou private não é necessárias;

**4**)  O import em Go referência apenas ao nome do pacote e não ao nome da classe.

Alguns dos pontos supramencionados me trouxeram bastante estranheza no primeiro momento, já outro um encantamento em relação ao design da linguagem, pois afinal de contas, porque colocar obrigatoriamente ponto e vírgula no final da declaração de uma variável ou na chamada de uma função? rsrs

Na próxima sessão trarei mais alguns pontos interessantes. Até breve!
An Better way to call mui alert dialog
Tags: javascript, react, typescript, materialui
Published: 2022-07-17 14:56:09

## Installation

Install mui-react-alert with npm

```bash
  npm i mui-react-alert
```

## Demo

<https://codesandbox.io/s/funny-mestorf-k2dcph>

## Usage/Examples

App.tsx

```javascript
import { AlertDialog } from "mui-react-alert";

function App() {
  return (
    <div className="App">
      <AlertDialog />
    </div>
  );
}

export default App;

```

Button.tsx

```javascript
import { showAlertConfirmarion } from "mui-react-alert";

function Button() {
  return (
      <button
      onClick={() => {
          showAlertConfirmarion({
          title: "Use Google's location service?",
          cancelLabel: "DISAGREE",
          confirmLabel: "AGREE",
          subtitle:
            "Let Google help apps determine location. This means sending anonymous location data to Google, even when no apps are running.",
          onConfirmation: function (): void {
            alert("Say hello");
          },
        });
      }}
    >
      Show alert dialog
    </button>
  );
}

export default Button;

```
Get the Zodiac Sign for a date in JavaScript
Tags: javascript, zodiacsign, chineseanimals, chineseelements
Published: 2022-07-17 14:48:29


![Get the Zodiac Sign for a date in JavaScript
](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rz447ewdw3cjx9kw21aw.jpg)
I created this little library to provide a zodiac sign & chinese zodiac sign depending on a birthday using The Intl.DateTimeFormat object.

You can install the library via jsDeliver CDN

```html
<script src="https://cdn.jsdelivr.net/gh/besrourms/zodiacsigns@latest/index.min.js"></script>
```
### Getting a zodiac sign from a date

```js
// Return 'Sagittarius: The Archer'
console.log(new ZodiacSign('1991-11-30').sign)
```

### Getting a chinese zodiac sign from a date

```js
// Return 'Fire Rat'
console.log(new ZodiacSign('1 Feb 1997 00:12:00 GMT').chinese)
```

### Getting a sign with translation 

```js
// Overload the default language (format xx)
console.log(new ZodiacSign('1 Feb 1997 00:12:00 GMT', 'ar').chinese);
```

## Translation
For the moment, the only available languages are English, French, Spanish and Arabic.
Fell free to participate to the translation in any other language.
### Available languages
- English (en)
- French  (fr)
- Spanish (es)
- Arabic  (ar)

{% embed https://github.com/besrourms/ZodiacSigns/ %}
Learn software development in under $5
Tags: webdev, programming, beginners, react
Published: 2022-07-17 14:25:17

Hello people, this is story is regarding another youtube short. If you new here I have started sharing the basic information regarding programming, development, designing in under one minute using youtube shorts.

In today's story, sharing the information regarding one platform to learn any required skillset in software development in decent price. 

I will not disclose too much in the text, to get full information below is the short link, please do watch it will take only one minute of your time.

[Learn software development in under $5](https://www.youtube.com/shorts/7gQxRwtgxdA)

Our website [iHateReading](www.ihatereading.in) || [Youtube](https://www.youtube.com/channel/UC6I-Tz6QwYbJpoIK7l0NtXA) || [Twitter](https://twitter.com/treyvijay)

Until next time, have a good day, people.
Left Veiw of Binary Tree
Tags: java, algorithms, binarytree
Published: 2022-07-17 14:16:35

Given a Binary Tree, print Left view of it. Left view of a Binary Tree is set of nodes visible when tree is visited from Left side. The task is to complete the function leftView(), which accepts root of the tree as argument.

```
Left view of following tree is 1 2 4 8.

          1
       /     \
     2        3
   /     \    /    \
  4     5   6       7
   \
     8
```
**Solution** : 

```java
/* A Binary Tree node
class Node
{
    int data;
    Node left, right;

    Node(int item)
    {
        data = item;
        left = right = null;
    }
}*/
class Tree
{
    //Function to return list containing elements of left view of binary tree.
    int max = Integer.MIN_VALUE;
    ArrayList<Integer> leftView(Node root)
    {
      // Your code here
      ArrayList<Integer> list = new ArrayList<>();
      leftViewU(root,list,0);
      return list;
    }
    	public void leftViewU(Node node,List<Integer> list,int current){
	    if(node == null) return;
	    if(current>max){
	        list.add(node.data);
	        max = current;
	    }
	    leftViewU(node.left,list,current+1); 
	    leftViewU(node.right,list,current+1);
	}
}
```