teleren/devto huggingface dataset:
Azure IoT Edge – using TimescaleDB on the Edge
Tags: azure, azureiotedge, timescale
Published: 2020-04-13 00:38:59

---
title: Azure IoT Edge – using TimescaleDB on the Edge
published: true
date: 2020-04-12 06:41:47 UTC
tags: azure, azureiotedge,timescale
canonical_url: 
---

#Series
<a href="https://dev.to/chris_mckelt/azure-iot-edge-who-is-cooler-dotnet-node-or-python-369m" > 
Part 1 - dotnet vs python vs node - temperature emission - who is cooler?</a>
<a href="https://dev.to/chris_mckelt/azure-iot-edge-developing-custom-modules-df3" >Part 2 - Developing modules</a>
<a href="https://dev.to/chris_mckelt/azure-iot-edge-3rd-party-containers-3mi3" >Part 3 - Custom Containers using Apache Nifi</a>
<a href="https://dev.to/chris_mckelt/azure-iot-edge-using-timescaledb-on-the-edge-2ec1" >Part 4 - Custom Module using TimescaleDB</a>
<a href="https://dev.to/chris_mckelt/azure-iot-edge-using-grafana-on-the-edge-26na" >Part 5 - Custom Module using Grafana</a>

# Intro

This is part 4 in a series starting [here](https://dev.to/chris_mckelt/azure-iot-edge-who-is-cooler-dotnet-node-or-python-369m) that runs through building an [Azure IOT Edge](https://docs.microsoft.com/en-us/azure/iot-edge/about-iot-edge) solution. This post will run through setting up [TimescaleDB](https://www.timescale.com/) to store data published from the dotnet, python and node temperature modules.

The code is located at: [https://github.com/chrismckelt/edgy](https://github.com/chrismckelt/edgy)

> [TimescaleDB](https://www.timescale.com/): An open-source database built for analysing
> 
> time-series data with the power and convenience of
> 
> SQL — on premise, at the edge or in the cloud.

## Steps to add the database

### 1. add the [custom module](https://github.com/chrismckelt/edgy/tree/master/modules/TimescaleDb) 

![](https://user-images.githubusercontent.com/662868/79062247-060de280-7ccb-11ea-901d-7faa07663fd6.png)

### 2. add the section to the [deployment file](https://github.com/chrismckelt/edgy/blob/master/deployment.debug.template.json)

Expose the internal port 5432 that TimescaleDB uses to 8081 for external container use

{% gist https://gist.github.com/chrismckelt/3e3da727c762c8bc038551a8ef683943.js %}

### 3. create the [docker file](https://github.com/chrismckelt/edgy/blob/master/modules/TimescaleDb/Dockerfile.amd64.debug) 

{% gist https://gist.github.com/chrismckelt/efe8e3ed3ae9a61a07a67b9d3454b2dd.js %}

### 4. create the [database, login and schema](https://github.com/chrismckelt/edgy/blob/master/modules/TimescaleDb/init.sql)

{% gist https://gist.github.com/chrismckelt/f4e73f67a6903a1f4a0446065fdc6e78.js %}

### 5. run the container and insert data from another module

{% gist https://gist.github.com/chrismckelt/bfe5ece31db7cd6db21d0eb5efdee339.js %}

###### <font face="Courier New">    select * from “table_001” where Isairconditioneron = 0 ORDER BY “Timestamp” DESC LIMIT 100;</font>

![](https://user-images.githubusercontent.com/662868/79062131-078adb00-7cca-11ea-975e-6885c0ba70ce.png)

# Outro

Now we have data being saved into the database we can move onto displaying it visually via [Grafana](https://grafana.com/) in the next post.
Convert any string to capitalize a string in javascript
Tags: javascript, 100daysofcode, codenewbie, codequality
Published: 2020-04-12 06:20:51

Hello JS Devs, Welcome back to a new episode of series called **JavaScript useful snippets**. In this series, I'm sharing shortcodes and the most common useful functions of javascript. These snippets can help you to make your development more efficient and faster. stay tuned till the end to learn something new... 😊

#### Javascript Useful Snippets - Capitalize() ####

In development, it's often that we have to make sure a particular string should be capitalized only - if it's coming from the server, at that time we can use this function. Capitalize() returns a string with the first letter in capital whichever you passed through a parameter. let's look ar the syntax... 

```
const capitalize = ([ first, ...rest ]) => first.toUpperCase() + rest.join('');
```

Here, this snippet will first destruct string into an array and store the first character into a variable called "first" while all rest characters will be store into the "rest" variable in the form of an array.  ( *PS: if you found this destruction and ...(three dots before variable) then don't worry, it's a concept of javascript only, you can learn more on detail here ..* )


Next in return, this function will do two things; the first one is to convert the "first" character into uppercase ( *with default method of javascript called uppercase()* ), the second one is to make a string of all array (rest) records by using join. and combines both.  let's see what result will look alike...

#### Result : ####

```
const result = ("fooBar")  // output:  FooBar
```
As you see, as a result, the first character of string "f" converted into "F" (capital) and the rest of the characters are the same. 

{% youtube UDW7fIAYJj0 %}

Thank you for watching/reading folks, if you found this informative and wanted to make me more content like this please support me on [Patreon](https://www.patreon.com/tutorialspot).  

Now, Guys on the next episode I'm going to share a function to get byte size of any given string. so follow/subscribe to get notification... 

Subscribe on youtube https://www.youtube.com/channel/UCvNjso_gPQIPacA6EraoZmg

Facebook: https://www.facebook.com/KatharotiyaRajnish/

Twitter: https://twitter.com/tutorial_spot
Math's Issues of Computer_Science(CS/SE) Students
Tags: computerscience
Published: 2020-04-12 06:07:43


Mathematics in the Compute Science field, should be taught with interaction, animation, tools that let students play around with hyper-parameters, and help to visualize concepts easier. Projects can be introduced to help students explore on how to think about Mathematics and how to design problems and their solutions themselves. For example,
- Calculus can be made to understand by tools like Maple or Desmos, which offers tools to animate equations
- Differential Equations can be coded out using libraries written in Python to provide some insight into how variables interact
- Linear Algebra can be taught on 2D or 3D animations to give a better view in how operations affect each other using R, Julia, or Python.
- Statistics And Prob can be visualized using Data Visualization tools. They can be used to show how different techniques affect data and how easy and hard it is to manipulate data, and what results we mostly look for
- Numerical Analysis can be shown to work by using graphical libraries like OpenGL, WebGL, to show sharpness, contrast, and accuracy in terms of pixels to see just how NC is in graphics designing.
People remember ideas more than age old equations. Thoughts?
I thin one another issue  Education using technology is really pre-mature right now, so.there isn't any demand, thus, there is no supply either.
If we develop that mentality in CS / SE, we can overcome licensing issues, development approaches, question traditional methods of schooling / teaching, and so.
Create the demand, and there will be a supply.
To-do List with VueJS
Tags: codepen, vue, webdev, showdev
Published: 2020-04-12 05:50:38

<p>I made a to-do list as an exercise to learn VueJS.  I really liked using Vue and how easy it made data binding.  I would like to go back and change a few things, tidy up some code and maybe write a tutorial if people are interested in it.</p>



{% codepen https://codepen.io/tecknerd/pen/zYvGYBQ %}
React vs Angular: Which one should you use in 2020
Tags: react, angular, javascript, typescript
Published: 2020-04-12 05:08:54


![](https://miro.medium.com/max/750/0*LEtlupI0L1YRX-Fe)

In this post we are going to compare React and Angular and try to find out which one should you use in 2020 in terms of performance, rendering, state management, jobs and many more. React vs Angular comparison is something that all developers want to see.

# React vs Angular

# 1. Overview

[React](https://blogreact.com/introduction-to-reactjs/)  is a simple JavaScript based UI library which is managed by the Facebook and community of developers. React was first introduced in the 2013.

On the other hand Angular is an Open source framework for web and mobile development. Unlike React, It is based on the TypeScript and managed by Google Team. Angular was introduced in 2010.

# 2. Development platform

React is mainly used for web development and for the mobile development we need to use additional framework i.e React-Native.

On other hand Angular is also mainly used for web development and for the mobile development it needs an additional framework i.e Native-Script.

# 3. Area Covered

If we want to use some extra functionality for example Routing we need to use some additional packages for that i.e React Router in case of React.

But in case of Angular most of the required functionality comes out of the box from Angular.

# 4. Learning Efforts

React is super easy to learn because you only need to learn few basic concepts in React i.e state, props, component, hooks. Its related with the JavaScript so you also not need to worry if you have learned JS already.

With the Angular the learning efforts put by a new developer is definitely gonna more according to most of the developers experience because of there huge framework, TypeScript and Component Managment.

# 5. Performance

React’s performance is greatly improved with the introduction of the virtual DOM. Since all virtual DOM trees are lightweight and built on server, the load on browser is reduced.

Performance of an Angular app is most of the times is pretty less with comparison to React. But with the latest updates in Angular the performance is started increasing but it’s still hard to surpass React.

# 6. Jobs

![](https://miro.medium.com/max/60/0*HUTyDCVxEN8D2Z0h?q=20)

![](https://miro.medium.com/max/638/0*HUTyDCVxEN8D2Z0h)

Above image is taken on 10–04–2020. As you can see the market share of jobs is almost similar for both Angular and React. But Angular is old so there is chances of Angular Jobs are little bit high. But i will personally prefer to use React.

I hope you have likes the comparison of React vs Angular.

[React Ref](https://reactjs.org/)

[Angular Ref](https://angular.io/)
[http://blogreact.com/](http://blogreact.com/)
CSS Custom Properties - Video Tutorial
Tags: css, webcomponents, video
Published: 2020-04-12 05:07:44

---
title: CSS Custom Properties - Video Tutorial
published: true
tags: css, web components, video
canonical_url: https://coryrylan.com/blog/css-custom-properties-video-tutorial
---

This is a sample video from my Video Course [Web Component Essentials](https://webcomponent.dev).In this video you will learn the basics of how to use CSS Custom Properties.To get the written blog tutorial check out this post, [“Build CSS Themes with CSS Custom Properties and Sass”](https://coryrylan.com/blog/build-css-themes-with-css-custom-properties-and-sass)

If what you watched was helpful checkout the full Video Course and EBook at [webcomponent.dev](https://webcomponent.dev)!
The OpenBSD /etc Directory
Published: 2020-04-12 04:28:42

One of the many reasons I like OpenBSD so much is the documentation.  While one might know that configuration files are located in the /etc directory, what might be more confusing is what all these files do.  In the /etc directory of a OpenBSD 6.6 machine I have looks as such.

```
X11            examples       hosts          login.conf     mtree          pf.os          rmt            ssh
acme           fbtab          hotplug        magic          mygate         ppp            rpc            ssl
amd            firmware       iked           mail           myname         protocols      rpki           syslog.conf
authpf         fonts          installurl     mail.rc        netstart       pwd.db         services       termcap
changelist     fstab          isakmpd        mailer.conf    newsyslog.conf random.seed    shells         ttys
daily          ftpusers       ksh.kshrc      master.passwd  npppd          rc             signify        weekly
disktab        gettytab       ldap           moduli         ntpd.conf      rc.conf        skel
doas.conf      group          localtime      monthly        passwd         rc.d           soii.key
dumpdates      hostname.rl0   locate.rc      motd           pf.conf        resolv.conf    spwd.db
```
The file "hostname.rl0" for example.  If you want to learn what the "hostname" file does all one needs to do is enter "man hostname" at the command line.
```
HOSTNAME(1)                 General Commands Manual                HOSTNAME(1)

NAME
     hostname - set or print name of current host system

SYNOPSIS
     hostname [-s] [name-of-host]

DESCRIPTION
     The hostname utility is used to set or print the name of the current
     host.  If no argument is given, the name of the current host is printed.

     The host name can be set by the superuser either by specifying
     name-of-host, or by supplying a myname(5) file, which is used at system
     boot time by netstart(8) to initialize the hostname.
```
Furthermore, the "rl0" device that "hostname" is connected to also has it's own manual page, "rl"
```
RL(4)                        Device Drivers Manual                       RL(4)

NAME
     rl - Realtek 8129/8139 10/100 Ethernet device

SYNOPSIS
     rl* at pci?
     rl* at cardbus?
     rlphy* at mii?

DESCRIPTION
     The rl driver provides support for PCI Ethernet adapters and embedded
     controllers based on the Realtek 8129 and 8139 Fast Ethernet controller
     chips.  This includes, among others, the following cards:

```
Using the manual pages, one can set up an network device to either broadcast or receive network traffic.
How To Download Youtube Thumbnail.
Tags: youtube, thumbnail, downloader, grabber
Published: 2020-04-12 04:13:04

YouTube Thumbnail Downloader - Save Free YT Video HD Images Online
Best YouTube Thumbnail Grabber
What is a Youtube Thumbnail Downloader?
Youtube Thumbnail Generator is an online tool that gives you a good quality picture from Youtube. It is effortless to do it, and it works very fast. With the help of Youtube Thumbnail Downloader, we can get many kinds of pictures from Youtube.

How To Use Youtube Thumbnail Downloader HD?
1. First, you copy the URL of the YouTube video you want to download the thumbnail.

2. Then paste that URL into the text box provided.

3. After that click on the <a href="https://www.youtubethumbnaildownloaderhd.com/">Get Thumbnail</a>  button, your thumbnail will show.

Using Youtube Thumbnail Grabber is very easy to use. Its User Interface is straightforward. To use it, you have to paste the URL of the YouTube video in a large text box. After pasting the URL, you have to click on the Get Thumbnail button. After clicking on the button, the Youtube thumbnail downloader will provide you various pictures. You can download the type of image you need.

What Quality Provided By Youtube Video Thumbnail Downloader?
Youtube Video Thumbnail Downloader provides excellent quality. This quality is as follows. Youtube Video Thumbnail Generator supported images in Full HD(1080), HD (720), SD, and also in small size. Youtube Video Thumbnail Downloader currently supported all formats of YouTube Video (HD, HQ, 1080p, 4K), etc. In many videos on YouTube, the quality of the thumbnail is not good. With this ring, we are not able to show the thumbnail of good quality.

What is the use of Youtube Thumbnail Downloader?
Many people say that what is the use of <a href="https://www.youtubethumbnaildownloaderhd.com/">Youtube Thumbnail Downloader</a>. I have to say to all of them that the use of Youtube Thumbnail Saver is very much in today's time if you are a blogger, it helps you a lot, and you are an Even if it is Youtuber, it will help you a lot. And if you do any work related to the image on the Internet, then you may need it.

Youtube Thumbnail Saver HD is Free or Not?
Many people have the idea that this tool is free or not, but Youtube Thumbnail Saver HD is entirely free, and there is no charge for using it. You can download any number of images from the youtube downloader with thumbnail.
Day 011 of #100DaysOfChallenge — GitHub Timeliner (Part 2)
Tags: design, webdev, challenge, 100daysofdesign
Published: 2020-04-12 04:08:15

Today, I started working on converting wireframe into final design. I wanted to design this website better than my previous websites. I am planning to use proper colour themes and proper grid layout in the project.

I started the design phase from Adobe Colour website for colour inspiration. I tried different colour plattets from “Explore” tab, and at the end I decided to go this blue and orange colours for my project. Once I was done with that, I started designing website from the wireframe.
When I started designing the search element of the page, it got a bit complecated. At first, I was trying to use the same layout from yesterday’s wireframe where it had inline form (without labels and container). When I started to implement that, I realized new UX issue in that design and it was form labels. We can always remove the labels with better placeholders but what if user is not sure what is the textbox about once he already started typing? Now, he can not see the placeholder and it makes a bad UX in the page. Labels are also better in accessibility of website.

So When I was planning to add labels, I got an idea to create container for this form. This container helped to bring out the form towards the user with better drop shadow. This way, I was able to separate form from the title and other elements from the website. Once I completed index page, I started designing index page when website displays the suggestions for user input.

Yesterday I mentioned in the blog that I did not want to create search 
page, but when I was designing the suggestion elements, I realized that there might be a case when user will not know the complete name of the user or repo, at that time, it will be better to move the user to search page with more search results. This way, user can search from our website and they do not need to go to the GitHub.

![GitHub Timeliner - Today's Design](https://dev-to-uploads.s3.amazonaws.com/i/48butnl9gec1nw2tjt39.png)

Now it was a time to create a page with timeline. When I was started this website, I was not sure what details I get from API for the user. I have to research more about API today again. I needed to make sure what details I get and needed to choose those details which we usually get for all the users. I added those details to the header of the page. Then, I started designing the timeline. I did not have to think much for that because I had this layout in my mind since the beginning.

Tomorrow, I will design repo, about and 404 pages. I will also be designing the mobile design for the website. _Feel free to drop your comments and feedback on the design. I appreciate your comments, It helps me to improve myself as a designer. _

**Design file on Figma**: #011, #012 — [GitHub Timeliner](https://www.figma.com/file/CH8OQQERyY2DcoqapRsWYx/011-012-GitHub-Timeliner?node-id=0%3A1)

**Yesterday’s blog**: [#010 — GitHub Timeliner (Part 1)](https://dev.to/harshppatel/day-010-of-100daysofdesign-github-timeliner-c9b)

**Tomorrow’s plan**: left pages and mobile design for GitHub Timeliners
Kafka: Garantia de Ordem
Tags: kafka, kafkabr, confluent
Published: 2020-04-11 11:09:24

Existem casos de uso onde a manutenção da ordem em que os dados foram produzidos é um requisito. Há outros em que isso não importa.

---

[Event Sourcing](https://martinfowler.com/eaaDev/EventSourcing.html) é um exemplo onde a manutenção da ordem importa, caso contrário o estado final seria inconsistente.

---

Kafka, através das configurações corretas, pode nos ajudar em qualquer um deles.

## Como é a ordenação no Kafka

A ordem é garantida em nível de partição, ou seja, tópicos com várias partições não possuem ordenação global dos dados.

Bem, dado um lote de registros produzidos pelo produtor `p1` que tem como destino a partição `4` no tópico `t1`, haverá garantia de que a ordem produzida será mantida pelo Kafka e repassada aos consumidores.

Desse modo se houver um produtor `p2` também produzindo lotes de registros no mesmo destino de `p1`, nenhuma verificação de ordem será realizada entre os lotes destes produtores, prevalecendo àquele que primeiro chegar.

Mas existem situações e configurações que podem interferir e mudar a ordenação dos registros criados por um determinado produtor `p`.

## O que pode mudar a ordenação

Há uma dezena de configurações que podem ser ajustadas para determinar como será o comportamento do nosso produtor. E muitas já possuem valores padrão que atendem alguns casos de uso, como:

- retries: 2<sup>16</sup>
  - número de retentativas
- max.in.flight.requests.per.connection: 5 
  - requisições que ainda não receberam ack, ou seja, estão em voo.
- acks: 1
  - reconhecimento de recebimento e não

O valor padrão de retentativas, definido por `retries`, é bem grande e elas são realizadas para todos os problemas relativamente recuperáveis, como uma falha na rede.

E o número de requisições em voo é igual a `5`. E isso poderá causar a troca de ordem.

Digamos que se produz o primeiro lote de registros, `l1`, que fica em voo aguardando reconhecimento. Em seguida o mesmo produtor envia o segundo lote, `l2`. Pela ordenação, `l1` contém registros que estão antes daqueles em `l2`.

Essa é a ordem criada pelo produtor:
```
l1->1,2,3,4
l2->5,6,7
```

Espera-se que seja mantida:
```
1,2,3,4,5,6,7
```

Porém, se `l1` for para retentativa,  `l2` for efetivado e `l1` efetivado em seguida, a ordenação muda, não prevalecendo àquela criada no produtor.

Realidade como descrito acima:
```
5,6,7,1,2,3,4
```

## Configuração correta

Felizmente é possível adequar as configurações do produtor e eliminar as chances da perda de ordem:

- `max.in.flight.requests.per.connection` deverá ser configurado para que apenas uma requisição fique em voo, ou seja, `1`.

Isso certamente irá diminuir a taxa de transferência, não de maneira drástica. Mas agora a ordenação está garantida, mesmo em situações de retentativas.
what is <iso646.h> in C standard library
Tags: c
Published: 2020-04-12 04:04:19

I was reading some materials about C standard library, just found this file `iso646.h`, unlike other header files like `math.h`, `stdio.h`, this header file's name is not that obvious to tell what it is.

You can see its full content [here](https://code.woboq.org/gcc/gcc/ginclude/iso646.h.html), the essential part is just:

```c
#define and        &&
#define and_eq        &=
#define bitand        &
#define bitor        |
#define compl        ~
#define not        !
#define not_eq        !=
#define or        ||
#define or_eq        |=
#define xor        ^
#define xor_eq        ^=
```

Those are just simple macros and they are interesting: with this header file, we can write some code like Python `if (a and b)`, `if (a or b)`, `if (not a)`:

```c
#include <stdio.h>
#include <iso646.h>

int main() {
    int a = 1, b = 2;
    int x = 3, y = 4;
    if (not a < b) {
        puts("a < b");
    } else {
        puts("not a < b");
    }

    if (a < b or x > y) {
        puts("true 1");
    } else {
        puts("false 1");
    }

    if (a < b and x < y) {
        puts("true 2");
    } else {
        puts("false 2");
    }
    return 0;
}
```

Compile and run:
```
a < b
true 1
true 2
```

And actually this file `iso646.h` has been in C standard for a long time:
> ... After a long period of stability, three new header files (iso646.h, wchar.h, and wctype.h) were added with Normative Addendum 1 (NA1), an addition to the C Standard ratified in 1995 ...

Apparently it has been there for more than 20 years, and I just learned it today -_-!!

## Reference:
* [https://code.woboq.org/gcc/gcc/ginclude/iso646.h.html](https://code.woboq.org/gcc/gcc/ginclude/iso646.h.html)
* [https://en.wikipedia.org/wiki/C_standard_library](https://en.wikipedia.org/wiki/C_standard_library)