teleren/devto huggingface dataset:
Docker Compose
Published: 2022-02-16 21:03:06

****É um arquivo pelo qual conseguimos configurar todo um ambiente de containers de maneira muito mais simples.
Usando o Compose , definimos em um arquivo de configuração YAML todos os detalhes para executar nosso ambiente de desenvolvimento local, aproveitando todas as vantagens do Docker , sem se preocupar em subir cada um dos containers que envolvem um app com seus parâmetros específicos no run .

Outros recursos importantes que também precisamos entender são os **Volumes** . Eles são componentes do Docker responsáveis por prover a preservação de informações. 

---------------------------------------
**Networks - Redes no Docker**

Por padrão, o Docker possui 3 redes que são criadas junto com ele: bridge , none e host . Cada uma delas tem características específicas quanto a conectividade para seus containers . Podemos consultá-las executando:
`docker network ls`

**Bridge**

Ao ser iniciado, todo container é associado a uma rede e, caso uma rede não seja especificada explicitamente por nós, ele será associado a rede Bridge .

**Host**

Ao associarmos um container a essa rede, ela passa a compartilhar toda stack de rede do host , ou seja, da máquina que roda o ambiente Docker . O uso desta rede é recomendada apenas para alguns serviços específicos, normalmente de infra, em que o container precisa desse compartilhamento. Caso contrário, a recomendação é evitá-la.

**None**

Essa é uma rede que não possui nenhum driver associado. Dessa maneira, ao atribuir um container a ela, o mesmo ficará isolado. Ela é útil quando temos containers que utilizam arquivos para a execução de comandos ou para se comunicar, por exemplo, um container de backup ou que rode apenas um script localmente.
Thermal Image Anomaly Detection with TinyML
Tags: iot, machinelearning, cloud
Published: 2022-02-16 20:55:45

---
title: Thermal Image Anomaly Detection with TinyML
published: true
description: Build a basic anomaly detection ML model with thermal images using Edge Impulse.
tags: iot, machinelearning, cloud
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7bnnr70vm82sjg41melu.png
canonical_url: https://blues.io/blog/thermal-image-anomaly-detection-machine-learning/
---

When I say "anomaly detection" you may imagine an overly complicated process, something exclusive to deep learning algorithms and indecipherable coding. In reality, the concept of uncovering anomalous behavior in a system is really just the act of *identifying an unclassified or uncertain state*.

In [this Hackster project](https://www.hackster.io/rob-lauer/thermal-image-anomaly-detection-with-tinyml-36831c), I created a basic **anomaly detection ML model** with [Edge Impulse](https://edgeimpulse.com/) that processes thermal images to detect unknown states of thermal readings and relays collected data to the cloud with the [Blues Wireless Notecard](https://blues.io/products/notecard/?utm_source=devto&utm_medium=web&utm_campaign=featured-project&utm_content=thermal).

{% embed https://youtu.be/hYVXLxFa8aY %}

By using the "edge ML" capabilities provided by Edge Impulse, the cellular Notecard device-to-cloud data pump from Blues Wireless, a [Raspberry Pi Zero 2 W](https://www.raspberrypi.com/products/raspberry-pi-zero-2-w/), and an [Ubidots](https://ubidots.com/) dashboard, I was able to create a simple, low-power, thermal monitoring station with only a small bit of Python coding required 🐍.

![Animation of all the recorded thermal images](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qdt7jvi92vwuaji7of2x.gif)

*Animation of all the recorded thermal images.*

Be sure to [view the full tutorial on Hackster](https://www.hackster.io/rob-lauer/thermal-image-anomaly-detection-with-tinyml-36831c) to see how this project was built from scratch!
I made a template that scores 100 in every speed test ⚡
Tags: showdev, performance, webdev, discuss
Published: 2022-02-16 20:54:32

🔗 [template link](https://hamedbaatour.gumroad.com/l/turbokit)

--
scoring 100 in Lighthouse and in other performance test is hard yet it is every front end developer's dream, however most of us don't achieve that because it simply takes a lot of work!

as a developer myself having to build many websites I have spent a lot of time polishing my build process to finally reach a point where I have the perfect high performance boilerplate I have been always looking to find and [TurboKit](https://hamedbaatour.gumroad.com/l/turbokit) was born!

**why not use a template off Github?**
You might have searched for a starter template on Github and found incomplete projects without any documentation or they are extremely hard to customize and most of them are outdated and do not use modern optimizations such as generating new images format like AVIF or WEPP

**why TurboKit?**
I built this static website template to achieve a perfect performance score in every speed test with **zero exceptions**.

this script is based on **Vite and Gulp** to do everything and anything you think of as part of a build process, I'm talking optimizing:
- Images (AVIF, WEBP...)
- JS
- CSS
- HTML
- Fonts
- Cache
- JSON

and more stuff including:
- generating a PWA
- internationalization support (i18n)
- dev server with HMR
- preconfigured prettier
- sitemap generation

and much much more

so, what is your website Lighthouse score? share it down below!
TIL – CSS inset property shorthand
Tags: todayilearned, css
Published: 2022-02-16 20:45:39

---
title: TIL – CSS inset property shorthand
published: true
description: Setting top, left, right, and bottom properties, all in one line.
tags: til, css
//cover_image: https://direct_url_to_image.jpg
---

I recently learned about `inset`, a CSS shorthand for `top`, `right`, `left`, and `bottom` properties.

I've used it a lot as a more expressive way of saying, "this thing is full-screen".

For example, to make an element take over the entire screen:

```css
.fullscreen {
  position: fixed;
  inset: 0;
}
```

It's effectively the same thing as:

```css
.fullscreen {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

// or, what I always used to do...

.fullscreen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
}
```

MDN Docs: https://developer.mozilla.org/en-US/docs/Web/CSS/inset
How to sign anchor transactions with phantom or other wallets in the browser
Tags: solana, anchor, phantom, blockchain
Published: 2022-02-16 20:31:26

If you've tried using the (solana) anchor rpc convenience instructions, to avoid assembling your accounts and everything into a buffer explicitly, and used a browser wallet as a signer:

```js
// Wrong!
await program.rpc.stake(
    myArgs,
    {
        accounts: {
            account1,
            account2,
        },
        signers: [wallet],
    }
)
```

Then you've probably gotten this error, because the browser wallet doesn't hand out its secret key:

```
Uncaught (in promise) TypeError: unexpected type, use Uint8Array
```

Instead, you can use `program.transaction` to make the transaction, then ask the wallet to sign it:

```js
const tx = program.transaction.myInstruction(
    myArgs,
    {
        accounts: {
            account1,
            account2,
        },
        signers: [],
    }
)
tx.feePayer = wallet.publicKey
tx.recentBlockhash = (await connection.getLatestBlockhash()).blockhash
const signedTx = await wallet.signTransaction(tx)
const txId = await connection.sendRawTransaction(signedTx.serialize())
await connection.confirmTransaction(txId)
```

Thanks to kfartusov on [this issue](https://github.com/project-serum/anchor/issues/1109)
It’s your dime.
Tags: javascript, saas, devtools
Published: 2022-03-02 18:16:26

---
title: It’s your dime.
published: true
date: 2022-02-16 20:08:25 UTC
tags: javascript, saas, devtools
canonical_url: https://hyper-io.medium.com/its-your-dime-473e244fe50f
---

For all the non-technical and technical folks out there, I’d like to explain the genius behind hyper and our software development kit (SDK). With hyper, you can put the power back in the hands of your application developers, get things done, and get back to delighting your customers.

Why should you consider using hyper?

- **Hyper is easy.** Spin up backend services such as databases, search engines, and file storage buckets (to name a few) in seconds with literally a few clicks. It’s painless and friction-free.
- **Hyper is inexpensive.** Start-ups that don’t have to spend hundreds of thousands of dollars on dev-ops personnel and database administrators have an advantage. [Sign up](https://dashboard.hyper.io/) and try hyper for free. When you’re ready to get serious, our [Pro plan](https://docs.hyper.io/cloud/payment-and-pricing-terms) is just $99.00 per month.
- **Focus on features.** Hyper allows you to focus on your time and resources on your customers. It’s your dime. Would you rather spend it on features or managing backend services?
- **Hyper is secure, scalable, and performant.** This is what we do and we do it well.
- **Hyper is composable.** What does this mean? A software developer can gracefully connect calls from one service, such as a call to the data service, to another, such as a call to the cache service. This is made possible by our [promised-based SDK](https://docs.hyper.io/cloud/hyper-connect). Its consistent shape and behavior provide a great developer experience. See our related blog posts on [Caching all the things](https://blog.hyper.io/hyper-cache/) and [Composing Data and Cache](https://blog.hyper.io/composing-hyper-data-and-cache/).

In conclusion, hyper is unique in its ability to easily spin up new backend services, such as data, cache, queue, storage, and search in the cloud. How easy? Literally, just a few clicks. Skeptical? [Sign up](https://dashboard.hyper.io/) and create a new hyper application and backend services for _free_.

Keeping devs happy,

⚡️ hyper team ⚡️
Composing hyper data and cache services
Published: 2022-03-02 18:15:52

---
title: Composing hyper data and cache services
published: true
date: 2022-02-16 20:05:33 UTC
tags: 
canonical_url: https://hyper-io.medium.com/composing-hyper-data-and-cache-services-6bc66c6c0759
---

hyper cache is a cache document store that provides a clean API to cache JSON documents. Caches are good for all sorts of things, to take the stress off of your transactional database when performing reads, to provide sessions for authentication, to contain simple aggregate values for dashboards and metrics, and more. Cache systems are complex and a challenge to set up and maintain. hyper removes this burden. hyper makes it easy to cache.

Why should I consider hyper?

For example, a dev could save data into the hyper data service followed by caching the document. Your application’s API can check for the data’s existence in the cache, and if it exists, retrieve popular data requests from memory rather than the disk. This has several advantages:

1. **Speed** : Retrieving data from cache is much faster than retrieving data from a database.
2. **Conservation** : Retrieving data from a cache takes pressure off your database.
3. **Delight** : A performant app delights the customer.

Here’s a TypeScript code sample that saves a JSON document into a hyper data service followed by caching the document into a hyper cache service. Since the calls to [hyper-connect](https://docs.hyper.io/cloud/hyper-connect) are promised-based, the calls to data and cache can be chained together:

![](https://cdn-images-1.medium.com/max/1024/0*he2GbiGam3Bfk3f_.png)

In conclusion, while the code sample above demonstrates a fairly happy path, it does illustrate composition of individual hyper backend services. Ready learn more? Check out our [blogs](https://blog.hyper.io/), [docs](https://docs.hyper.io/cloud), [workshop videos](https://docs.hyper.io/cloud/workshops), and [quickstarts](https://docs.hyper.io/cloud/quickstarts).

> Shhhh don’t tell anyone. We’re building an experimental project: ⚡️ [hyper-ext-model](https://github.com/hyper63/hyper-ext-model) ⚡️. hyper-ext-model is a [hyper-connect](https://docs.hyper.io/cloud/hyper-connect) extension that creates a model for an application that uses the hyper service. Using this extension you can compose hyper data, cache, search, storage, and queue (notification) services into a generic data model to define a given domain and provide basic business rules. You can specify rollback [modes](https://github.com/hyper63/hyper-ext-model#modes) of atomic or non-atomic for those not-so-happy-paths. 😀 😔

It’s all about the dx y’all,

The hyper team.
I made a programming language without any knowledge.
Tags: programming, cpp, computerscience, challenge
Published: 2022-02-16 19:51:07

Hello folks! I decided to make a minimal programming language... without any knowledge...

## Starting
For this challenge, I chosed C++ because its fast. *I would chose rust but i will rewrite with rust later.*

And i started to searching about making a programming language, and i got some basics about lexers, compilers etc... and I started with `reverse polish notation` and `stack` based language. Because they are easy to implement.

## Writing a Lexer
Lexer is the simplest part of writing a language, just tokenizing the keywords.

![Lexer](https://miro.medium.com/max/1400/0*AJ0aSU6_OteKX8_t.)

I didn't use any lexer generator (like lex) because its better to make it from zero for me. But the worst part of it, I DON'T KNOW C++. And thats why it was a bit torture to me. I still think the lexer i wrote sucks because i made it without any C++ knowledge. But, atleast it works :D

```virna
50 100 + put
```
=> (pseudo)
```
[
    {token: NUMBER, value: "50"},
    {token: NUMBER, value: "100"},
    {token: ADD, value: ""},
    {token: PUT, value: ""}
]
```

## Compiler? Transpiler?
After writing a lexer, i need to make a compiler/transpiler for my project. (i skipped AST since it doesn't need.) I checked LLVM but its really deep project to dive in so i tried with assembly. And another problem, i don't know assembly too! and i decided to make a C++ transpiler for my language.

It transpiles the code into C++ and runs `g++` to compile the C++ source.

## Trying the Language
I wanted to test the limits of the language, So i made a brainfuck compiler in my language. I think its best project to test your language too.

- [Brainfuck To C](https://github.com/aiocat/virna/blob/main/example/brainfuck/brainfuck.vi)

## Features
After some days, i added tons of things to my language. It was really fun!

![Features](https://i.imgur.com/K7ndqP4.png)

## Documentation
And the most boring thing in programming scenario... Writing a documentation! Well, i think nobody likes that but everyone needs that too. So i wrote a simple language reference for my programming language.

## Finishing
So, that was my adventure about creating a minimal programming language. If you liked the project, you can star on [GitHub](https://github.com/aiocat/virna) page!
Getting to know about Components in React
Tags: react, beginners, computerscience, codenewbie
Published: 2022-02-16 19:41:02

**What Are Components? **
Components let you split the UI into independent, reusable pieces, and think about each piece in isolation. Components modularize both functionality and presentation in our code. In order to understand how powerful this is, consider just how intricate web applications can become. The difficulty in logically arranging, architecting, and programming these web applications increases with their size. Components are like little packages: they help us keep everything organized and predictable while abstracting the 'boilerplate' (Links to an external site.) code. Components can do many things, but their end goal is always the same: they all must contain a snippet of code that describes what they should render to the DOM.

**How Do I Use Components in My React App? **
It's standard practice to give each of the components their own file. It is not uncommon to see a React program file tree that looks something like this:

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

With our components separated in their own files, all we have to do is figure out how to access the code defined in one file within a different file. Well, this is easily done in modern JavaScript thanks to the ES module system using the import and export keywords. On a simplified level, the import and export keywords let us define variables in one file and access those variables in other files throughout our project. This becomes increasingly important as we build out larger applications


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

Since variables in modules are not visible to other modules by default, we must explicitly state which variables should be made available to the rest of our application. Exporting any variable — whether that variable is an object, string, number, function, or React component — allows us to access that exported variable in other files. There are two ways to export code in JavaScript: we can use the default export syntax, or the named export syntax. We can only use export default once per file. This syntax lets us export one variable from a file which we can then import in another file. With named exports, we can export multiple variables from a file,

**Conclusion**
Components in React are a great way to keep certain information about your code in its own file then rendering it to the parent component. When you get a better understand of Components in React, your code becomes well organized and easier to find information. This results in having fewer errors in your code and if you do experience any error if can become easier for you to locate that error and fix it.
rtmp.ts (Elocast)
Tags: opensource, typescript, javascript, startup
Published: 2022-02-16 19:25:04

---
title: rtmp.ts (Elocast)
published: true
description: A TypeScript implementation of the Real Time Message Protocol (RTMP).
tags: #opensource #typescript #javascript #startup
cover_image: https://elocast.com/static/seo-card.png
---

Starting with your own product is tough, especially if you care about the ownership of your product - PaaS solutions are quick and easy to deploy, but terrible when it comes to the latter point.

Which is why we decided to transition towards a more open approach with our in-house tech. An #opensource approach.

`rtmp.ts` is a media live-streaming server, which we utilise in-house for our own media streaming solution. Is it perfect? No, of course not. It's not meant to be. But it does the job, and does it pretty well. It's designed to be a flexible; the server is split into modules, which can be easily replaced without interfering with the rest of the app (for the most part), the communication between modules is largely based on node's native events-bus to help with that.

It's not very well documented, as it was never designed as an open-source project. That aspect will hopefully improve as time goes on.

Anyone interested in contributing is welcome to.

{% github elocast/rtmp.ts %}

[rtmp.ts GitHub repo](https://github.com/Elocast/rtmp.ts)
Description of NE555P
Tags: beginners, product, electronics, semiconductor
Published: 2022-02-14 06:33:37

[NE555P](https://www.utmel.com/productdetail/texasinstruments-ne555p-7646480) is a precision timing circuit capable of producing accurate time delays or oscillation. In the time-delay or mono-stable mode of operation, the timed interval is controlled by a single external resistor and capacitor network. In the a-stable mode of operation, the frequency and duty cycle can be controlled independently with two external resistors and a single external capacitor.

The threshold and trigger levels normally are two-thirds and one-third, respectively, of VCC. These levels can be altered by use of the control-voltage terminal. When the trigger input falls below the trigger level, the flip-flop is set, and the output goes high. If the trigger input is above the trigger level and the threshold input is above the threshold level, the flip-flop is reset and the output is low. The reset (RESET) input can override all other inputs and can be used to initiate a new timing cycle. When RESET goes low, the flip-flop is reset, and the output goes low. When the output is low, a low-impedance path is provided between discharge (DISCH) and ground.

The output circuit is capable of sinking or sourcing current up to 200 mA. Operation is specified for supplies of 5 V to 15 V. With a 5-V supply, output levels are compatible with TTL inputs.

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

NE555P Features
Timing From Microseconds to Hours
Astable or Monostable Operation
Adjustable Duty Cycle
TTL-Compatible Output Can Sink or Source Up to 200 mA
On Products Compliant to MIL-PRF-38535, All Parameters Are Tested Unless Otherwise Noted. On All Other Products, Production Processing Does Not Necessarily Include Testing of All Parameters.

NE555P Application
Fingerprint Biometrics
Iris Biometrics
RFID Reader
Pulse generation
Time delay generation
Sequential timing
Precision timing
Pulse width modulation
Pulse position modulation
Linear ramp generator
If you want to learn more,try to follow the belowing link to see the article about product [NE555P](https://www.utmel.com/components/ne555p-timer-oscillator-100khz-8-dip-datasheet-pinout-equivalents-and-ne555n-vs-ne555p?id=1246).
Strato WordPress Hosting Review: Wie gut ist der Alles-Hoster aus Berlin für Blogger?
Tags: wordpress, hosting
Published: 2022-02-17 12:48:47

---
title: Strato WordPress Hosting Review: Wie gut ist der Alles-Hoster aus Berlin für Blogger?
published: true
date: 2022-02-16 19:16:17 UTC
tags: WordPress,hosting
canonical_url: https://bloggerpilot.com/strato/
---

![Strato WordPress Hosting](https://bloggerpilot.com/wp-content/uploads/2022/01/strato-desktop.png)

WordPress bietet eine große Auswahl an Hosting-Optionen, aber viele von ihnen sind teuer und mit vielen Einschränkungen verbunden. Einige sind schnell, andere zuverlässig und sicher, wieder andere sind flexibel und haben einen tollen Kundensupport. Das WordPress-Hosting von Strato ist eine der besten Optionen, die es gibt. Es kombiniert alle Vorteile der besten Hosting-Unternehmen mit einem großartigen Support-Team, flexiblen Plänen und einer sehr schnellen Reaktionszeit. Probiere es aus!

Der Original-Artikel erschien auf [Strato WordPress Hosting Review: Wie gut ist der Alles-Hoster aus Berlin für Blogger?](https://bloggerpilot.com/strato/).
⚙️ ❮ Zsh-Py3-HTTP ❯ | Auto Spawned service
Tags: zsh, tooling, webdev, python
Published: 2022-02-16 18:59:11

<div align="center"><h2>
  <a href="https://github.com/z-shell/zi">
  <img src="https://raw.githubusercontent.com/z-shell/zi/main/docs/images/logo.png" alt="Logo" width="60" height="60"><img/></a>

❮ ZI ❯ Service - Py3HTTP
</h2></div>

<div align="center">

[https://z.digitalclouds.dev](https://z.digitalclouds.dev) | [GitHub](https://github.com/z-shell) | [Twitter](https://twitter.com/zshell_zi) | [Join the team](https://github.com/z-shell/community/issues/new?assignees=&labels=%F0%9F%91%A5+member&template=membership.yml&title=team%3A+)

</div>

---

<div align="center">
This **Zsh** service-plugin will serve given directory _(plugin's directory by default)_ using **Python's 3 HTTP server**.
</div>

---

### Install with ❮ [ZI](https://github.com/z-shell/zi/) ❯


The service-plugin supports loading single plugin instance per all active Zsh sessions, in background.


```shell
zi ice service'py3http'
zi light z-shell/zservice-py3http
```

---

### Explanation of Zsh-spawned services

1. First Zsh instance that will gain a lock will spawn the service.
2. Other Zsh instances will wait.
3. When you close the initial Zsh session, another Zsh will gain lock and resume the service.