teleren/devto huggingface dataset:
How to Draw a Vertical Line on a Heatmap Using seaborn, Python
Tags: python, seaborn, heatmap
Published: 2022-07-09 03:10:37

I want to draw a vertical line on a heatmap to grasp when the event occurred on the analysis object. For example, the heatmap expresses the result of STFT (Short-Time Fourier Transform) has two dimensions; the x-axis is the time axis, and the y-axis indicates frequency.

## Source Code and The Result

### Source Code
```py
import matplotlib.pyplot as plt
import numpy as np
import seaborn as sns

# Make the sample data
arr = np.random.rand(20, 20)

# Draw the heatmap (a figure on the left)
fig, (ax1, ax2) = plt.subplots(1, 2)
sns.heatmap(arr, vmin=0, vmax=5, cmap="jet", ax=ax1)

# Add the vertical line on the headmap (a figure on the right)
sns.heatmap(arr, vmin=0, vmax=5, cmap="jet", ax=ax2)
ax2.axvline(x=4, linewidth=2, color="w")

# Drawing
plt.show()
```

### The Result
The figure on the left side does not draw a vertical line, and the figure on the right side draws one.

![The execution result](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yvthh464a204u2j1053r.png)
 
## Reference
{% embed https://matplotlib.org/3.3.1/api/_as_gen/matplotlib.pyplot.axvline.html %}

---
This original article is the following that is written by me. This is a translation of a portion of this original article from Japanese to English.

{% embed https://qiita.com/AkiraKashihara/items/8b3ba941494130f07e3c %}
14. Leetcode solution in CPP
Tags: cpp
Published: 2022-07-09 03:07:37

```
class Solution {
public:
    string longestCommonPrefix(vector<string>& strs) {
        if(strs.size() == 0) return "";
        int ans = INT_MAX;
        for(int i = 0; i < strs.size()-1; i++){
            ans = min(ans, (int)min(strs[i].size(), strs[i+1].size()));
            while(strs[i].substr(0, ans) != strs[i+1].substr(0, ans)){
                ans--;
            }
            if(ans == 0)return "";
        }
        return strs[0].substr(0, ans);
    }
};
```
#leetcode
#challenge
here is the link for the problem:
https://leetcode.com/problems/longest-common-prefix/description/
Free and Useful Tools for Android Development and Blogging
Tags: android, kotlin, beginners, tooling
Published: 2022-07-09 02:05:25

**These are all the free and useful tools and resources that I use during Android app development and blogging**

 I will keep this post up to date from time to time when I find something new to share.

## Android Development Tools

### JSON Editor Online
I use [JSON Editor Online](https://jsoneditoronline.org/) to visualize the JSON string and also use it for debugging, especially the diff feature.

### Insomnia API Client
I use [Insomnia](https://insomnia.rest/) to test REST API.

### SQLite DB Browser
I use [SQLite DB Browser](https://sqlitebrowser.org/) to manually create a local database.

### App Privacy Policy Generator

I just fill in my app name, contact information, app type, mobile OS, policy effective date and owner type in this [App Privacy Policy Generator](https://app-privacy-policy-generator.firebaseapp.com/) to generate the privacy policy text for me. 

It generates HTML, markdown, and also allows you to deploy & host it in Flycricket.

### Material Theme Builder

I use custom [Material Theme Builder](https://m3.material.io/theme-builder#/custom) to automatically generate Android Views (`colors.xml`, `theme.xml`), Jetpack Compose (`Theme.kt`) or Material Token (`DSP`) for my app.
 
## Blogging Tools

### StackEdit App
I use [StackEdit App](https://stackedit.io/app) to write blog posts. I also sign in to save all my blog posts into Google Drive. This allows me to back up my blog posts.

### Diagrams. net
[app.diagrams.net](https://app.diagrams.net/)(previously known as draw.io) is a graph drawing software. I mainly use it to draw flow chart and class diagram.

### ScreenToGiff
I use [ScreenToGiff](https://www.screentogif.com/) for simple animation, especially for tutorial-type blog posts.

### Photopea
[Photopea](https://www.photopea.com/) is an online photo editing software. I rarely use this, but it becomes handy if I need more advanced photo editing. 

### LanguageTool
I use Grammar & Spell Checker Google Chrome extension from [LanguageTool](https://languagetool.org) to write my blog post.

### Streaming Frog SEO Spider
I recently discovered this tool. You can download it from [here](https://www.screamingfrog.co.uk/seo-spider/). The free version allows you to crawl 500 URLs. I use it to search all the broken links from my blog.

---

*Originally published at [https://vtsen.hashnode.dev](https://vtsen.hashnode.dev/free-and-useful-tools-for-android-development-and-blogging)*.
1696. Leetcode solution in CPP
Tags: cpp
Published: 2022-07-09 02:57:27



```
class Solution {
public:
    int maxResult(vector<int>& A, int k) {
        int N = A.size();
        vector<long> dp(N, INT_MIN);
        dp[0] = A[0];
        deque<int> q;
        q.push_back(0);
        for (int i = 1; i < N; ++i) {
            dp[i] = A[i] + dp[q.front()]; // dp[q.front()] is the maximum dp value in range.
            if (q.size() && q.front() <= i - k) q.pop_front(); // pop the front element because it goes out of range.
            while (q.size() && dp[q.back()] <= dp[i]) q.pop_back(); // pop the elements that are smaller than or equal to dp[i] out of the queue.
            q.push_back(i);
        }
        return dp[N - 1];
    }
};
```

#leetcode
#challenge
here is the link for the problem:
https://leetcode.com/problems/jump-game-vi/
passtwo - mobile password manager
Tags: android, java, security
Published: 2022-07-09 02:48:00

**Update: release apk now available [here](https://github.com/gbafana25/passtwo/releases/tag/v1.0)**

Passtwo is my second attempt at making a mobile password manager app.  It is designed to integrate with [passman](https://github.com/gbafana25/passman), a python script that uses GPG to store passwords.  You can see how it works in [this](https://dev.to/gbafana25/passman-a-password-manager-for-the-command-line-64p) DEV article.  This app relies on BouncyCastle to decrypt files.  

## OAuth Device Flow

This app uses the beta Device Flow for OAuth apps.  First, when the user presses **Request Device Token**, the app sends a request for a device token containing the OAuth app's Client ID.  The response contains an 8-character authorization code, and the browser automatically opens to type it in (The code is displayed on the app's settings page).  The user will be prompted to login before entering the code.  Finally, if the user has agreed to allow the application, the **Get Token** button must be pressed in order to finish the authentication process.  


## User Info

After authenticating, the user simply inputs their github username, the private repo holding their passwords, and their gpg passphrase.  The only thing required in the repo are the folders containing the encrypted passwords, and a gpg private key.  The app currently doesn't support adding new accounts (directly from the app), however I hope to add that in the future since it would be improvement over the previous version.  Each time the user tries to access the **Passwords** page, they will be prompted to enter their fingerprint or pin before proceeding


## Installation

A release apk can be found [here](https://github.com/gbafana25/passtwo/releases/tag/v1.0).
Question: What is Your Favorite Resource for Learning?
Tags: learning, question, beginners
Published: 2022-07-09 01:46:02

This is a quick one.

**What's your favorite learning resource?**

Now I'm thinking about paying a month of [Codecademy](https://www.codecademy.com/) and try it out.

But there are a lot of resources to choose from. 

After doing a few classes on Codecademy, I'll say my honest opinion about the platform.
Hi Everyone! My Story And My Goals
Tags: welcome, webdev
Published: 2022-07-09 00:58:02

So, this is my first time in a Developer Community.

Right now I'm working on becoming a Front-End Web Developer. I always liked the idea to be able to work from home and on my own time, so right now I want to become a Freelancer.

I've thought on becoming a freelancer for years, but, with no idea on what service to supply.

That's where I come across to a interesting blog post, in was title: ["The Ultimate Guide To Building A Personal Website"](https://collegeinfogeek.com/personal-website/)

Then, I read the post, but I needed money for the hosting ("Dang, I just have 16 years old, is there a possible way to make money? On my age?")

At the end of the post, there was a section that called my attention, "Upgrading Your Brain".

Basically, it had resources on Web Development. First I've the idea to create a blog. I really like writing. And I always wanted to become a content creator (At first it was YouTube, but I had 10 years old. I tried to make a YouTube channel. So I made 2 videos, with 10 years old. You can guess the results).

But then, I had _The Idea_ "Why not create my own website?"

So I went through the resources that Thomas (The author of the blog post) just gave me. That's where the magic begins.

I was hooked in, trying to learn how to make websites. It was daunting at first. ("How people can make this complex stuff?")

And this is where my journey begins. Back to present day, I 
learned how to use basic HTML and CSS. And made my [First Website](https://geomarabreu.github.io/cartoon-hero/).

Pretty basic, but a good start.

This is my back story on why I want to become a Web Dev. It started just by a simple post. (In reality the post isn't simple, it's pretty good actually).

Now, I struggling on what learning resource to use. Now I'm thinking about [Codecademy](https://www.codecademy.com/) and [freeCodeCamp](https://www.freecodecamp.org/).

Any advice that you got? How did you learn Web Dev?

And thank you very much for reading till the end! This is my first ever post.
CATalog App: Info Page
Tags: flutter, dart, beginners, programming
Published: 2022-07-09 00:57:59

## The Idea
In my last post, I built the basic homepage UI for the CATalog. Today, I plan on expanding the app by adding info pages for each cat.

## The Process
### Writing the Base CatInfo Class
To begin today's work, I build a CatInfo class which displayed a cat, its name, its info, and its stats. I used a rating package I found online that is really good, _Flutter Rating Bar_! Special thanks to [Sarba Gyastha](https://pub.dev/publishers/sarbagyastha.com.np) for creating this great package. I implemented a basic stat bar for Health, and plan to add two more for Stamina, and Strength. Here is what the basic CatInfo Page was looking like!

![basic CatInfo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/26iwy49i3x93yjicwgkp.png)

### Navigation Station
The implementation of navigation was way easier than I thought it would be. I simply placed a Navigator.push function inside of the onPressed attribute as shown below:

![code snippet](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kjks9qg8c60umkwm4rji.png)

Navigator automatically adds a pop method to the CatInfo class, which meant that my work was done when it came to navigation. With this final addition of code, I had a working framework for navigating from the home page to a cat page:


![final product](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1zjnkhdofl54fo7xihmz.gif)


## Next Steps
Next time, I want the cat image, stats, and descriptions to be unique to the selected cat. To do this, there are two methods I thought of. I can either use provider for a short term solution to the changing state, or use Firebase to create a basic back end which I can pull the cats from. 

For now, I am thinking of using Firebase and integrating provider where needed, but if you guys know of a better method, please let me know!

Thank you for reading. Feel free to comment with tips/suggestions and follow if you want to join me on this flutter journey!

Github Repo: https://github.com/TannerHornsby7/CATalog
Tailwind + Browsersync Sandbox
Tags: tailwindcss, design
Published: 2022-07-09 00:29:33

If you are tired of changing a Tailwind class, doing `alt + tab`, and reloading the whole app to see the change your made, check out my [Tailwind + Browsersync](https://github.com/akshayKhot/design) project template. 

Treat this as your local sandbox to quickly build React or Turbo Frame (if using Hotwire) component UI with Tailwind. **The browser reloads automatically after you make a change and save.** Just like Tailwind playground. 

Once you're satisfied with a design, copy + paste it in your main project. I found this workflow very productive, compared to making a small change, and reloading my big rails app. Hope you do, too.

![Tailwind + Browsersync](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1i83xgq9hr9lpqv0hm23.png)
 

**What about [Tailwind playground](https://play.tailwindcss.com/)?** it is great, but I do like to work in my favorite IDE with my favorite fonts and themes.

---

### Installation

```bash
git clone https://github.com/akshayKhot/design.git your_project_name
cd your_project_name
yarn # or npm install
```

### Usage

Run these commands in separate terminal tabs. 

```bash
yarn tailwind
yarn server
```

If you're using npm, run these commands instead. However, I prefer and recommend using yarn, it's very fast compared to npm. 

```bash
npm run tailwind
npm run server
```

Here's a quick demo using the above set up, where I build Github's navbar. 

{% embed https://www.youtube.com/watch?v=zvUg7KpqJ0Y %}

---

_Originally published on my blog at https://akshaykhot.com/tailwind-with-browsersync/_
#JulyOT 09: Getting Started with Microsoft Azure and CircuitPython
Tags: julyot, iot, python, circuitpython
Published: 2022-07-09 00:07:38

---
title: #JulyOT 09: Getting Started with Microsoft Azure and CircuitPython
published: true
date: 2022-07-09 00:00:00 UTC
tags: julyot,iot,python,circuitpython
canonical_url: https://JulyOT.dev/blog/09-azure-circuit-python
series: JulyOT 2022
cover_image: https://JulyOT.dev/assets/images/JulyOT-banner-9-azure-circuitpython-0a122bfa6958f7b192e507feb20c91a0.png
---

_Today we learn about using Azure IoT with Circuit Python._

## Getting Started with Microsoft Azure and CircuitPython[​](#getting-started-with-microsoft-azure-and-circuitpython "Direct link to heading")

Learn how to use Microsoft Azure IoT with CircuitPython! If you are an embedded developer who loves CircuitPython and want to connect to the cloud, then [this guide on the Adafruit Learn platform](https://learn.adafruit.com/getting-started-with-microsoft-azure-and-circuitpython) is for you.

This guide will walk you through how to get started with Microsoft Azure using a Feather ESP32-S2 TFT and a BME688 sensor to monitor temperature, humidity and air pressure. The data is logged to Microsoft Azure every fifteen minutes and can be viewed on a dashboard.

[Take me to the guide](https://learn.adafruit.com/getting-started-with-microsoft-azure-and-circuitpython)
Day 589 : Don't Play
Tags: hiphop, code, coding, lifelongdev
Published: 2022-07-08 23:35:46

_liner notes_:
- Professional : Had a team meeting this morning. Good to see what everyone has been up to. Then I basically went through a bunch of repos to update some code. Got a bunch of stuff done. Feels good going into the weekend. I don't play with work when I'm looking forward to the weekend. haha

- Personal : Last night I went through a bunch of tracks for the radio show. I also looked into how I can get an audio live streaming server setup. Then I went to bed.

![View from a lake looking at a gravel shore with a pine tree forest and snow covered mountains partially hidden by clouds in Maligne Lake, AB, Canada](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ga5mxa9vrs33rdiaae66.jpg)

Going to finish putting together the radio show and then work on my side project. Planning on watching "The Boys" and going to bed. 

Have a great night and weekend!

peace piece
Dwane / conshus
https://dwane.io / https://HIPHOPandCODE.com
{% youtube K0i241-2_NE %}
Building a SaaS with SaasRock — Day 1 — Set up and Taxpayers model
Tags: remix, saas, react, tutorial
Published: 2022-07-08 23:23:28

---
title: Building a SaaS with SaasRock — Day 1 — Set up and Taxpayers model
published: true
description: This July I want to have my own SaaS in production using SaasRock as starting point, I’ll try to make many videos on the decisions and steps I take.
tags: remix,saas,react,tutorial
cover_image: https://miro.medium.com/max/1400/1*NFp0h_5FNREWIpeG9Fd55g.png
# Use a ratio of 100:42 for best results.
---

This July I want to have my own SaaS in production using [SaasRock](http://saasrock.com/) as the starting point, I will try to make many videos on the decisions and steps I take.

[Click here](https://www.youtube.com/watch?v=FyQvTxyl7LI) to watch the video.

### TLDW:

- Explained what I’m building — A SaaS for invoices and expenses.
- Set up a private repository with the latest SaasRock release _(v0.3.3)_.
- Set up a [remove upstream](http://saasrock.com/docs/learning-center/guides/upgrade/saasrock-releases).
- Removing the Sample Entities _(Contracts, Employees, and Attribute Tests)_.
- Fixing encountered problems.

In the next video, I’ll set up an inbox for accounts using the **Postmark Inbound Address** and try to use **Supabase** Storage for email attachments.

---

Join to SaasRock’s [community](https://discord.gg/KMkjU2BFn9) or subscribe to the [newsletter](https://saasrock.com/newsletter) to get notified on future videos!
Redes, Infra e Cloud Faz Parte Do Nosso Dia-a-Dia
Published: 2022-07-08 22:56:53


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y7u7ziqzljrqtm4eyf8i.png)
[Channel](https://youtu.be/9WN-9Cr-gZ0)
days 19 of #100daysofcode
Published: 2022-07-08 22:28:32

I published my open source #school #Software app builded in #PHP 

i hope this project will go so far. Enjoy

[https://t.co/jGWyDQFhKj](https://t.co/jGWyDQFhKj)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sg4mqvhyjxr6fexbev6x.PNG)
First research assignment on "CSS Functions"
Published: 2022-07-08 22:19:25

So I'm just getting started with coding and web development. I can already tell there is going to be a lot to learn going forward. I decided to read "A Complete Guide to CSS Functions" for my first research assignment and there is so much information to take in. It's interesting seeing all of the different functions that can be used to do so many different things. Some functions change font size or color while some can do animations. I have a feeling I'll be using some of these pretty soon.
Golang social network explained
Tags: go, sql, docker, testing
Published: 2022-07-08 21:21:03

---
title: Golang social network explained
published: true
description: The details about a social network writen in Golang explained.
tags: go, sql, docker, testing
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9pgl28y5703mnk0m9928.png
# Use a ratio of 100:42 for best results.
---


Hello, I've been recording the process of rebuilding [nakama.social](https://nakama.social) from scratch on YouTube. It's a social network for anime fans.

First video here:
{% embed https://youtu.be/9RTcx6Xz_9E %}

Link to the playlist [here](https://www.youtube.com/playlist?list=PLOzDrFftjC09iI8rgmj9JZr4bwImeUpkf).
Link to join the slack [here](https://join.slack.com/t/nakama-social/shared_invite/zt-143j6bzie-spuCdq79xIZJQa4DaPb0uQ).

It covers the Golang backend, SQL database design, HTML templates, working with session data and testing with Docker.

Later will include more complex database designs, realtime communication, user notifications, i18n, CI/CD, how to make the site secure and finally how to deploy it to the internet.

I push a new video evey one or two days so you can get involved with the development from now if it's of your interest :)

That's it. See ya uwu
Kafka Connect
Tags: todayilearned, microservices
Published: 2022-07-08 21:16:32

Kafka connect é um componente do Apache Kafka que trabalha como um hub de dados centralizados para integrações simples, então ele serve muito para pegar dados de um lado e jogar para um banco de dados ou alguma outra aplicação.

## Dinâmica

O Kafka vai ter connectors que podem estar ligados a data sources ou Sinks, esse conector vai constantemente pegar os dados de um data source como um postgres por exemplo em um topico do kafka e desse topico para um Sink como um ElasticSearch

### Standalone Workers
O Kafka connect é formado a partir de workers que são na verdade maquinas que rodam tarefas ou seja eles ficam pegando os dados de um sistema A e guardando no Kafka ou pegando do kafka e jogadno em um sistema B, esses workers podem ter mais de uma tarefa para que eles rodem em paralelo

### Distributed Workers 
Nesse caso os workers vão trabalhar em um cluster onde as maquinas vão se ajudar a trabalhar nas tarefas, por exemplo, se tivermos uma tarefa com mais de uma partição, podemos deixar esses workers cada um lendo de uma partição semelhante como o consumer do próprio kafka funciona. No caso de workers distribuídos os workers individualmente podem executar mais de uma tarefa também.

## Converters
As Tarefas usam os converters para mudar o formato dos dados para leitura ou escrita no kafka então podemos informar o tipo dos dados que estamos trabalhando, evitando assim o problema de por exemplo termos um int que acabou sendo convertido de forma errônea para string, temos algumas opções de formatos de dados como:
- Avro
- Protobuf (dados binarios)
- JsonSchema
- Json 
- String
- ByteArray

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

Nessa imagem temos um exemplo mais ou menos de como funciona o connect pega os dados e converte para o formato Avro e salva no Kafka, e então o o conector do Sink pega esses dados converte para outro formato e joga de volta para a Sink

## DLQ - Dead Letter Queue

Quando tem um registro invalido o erro pode ser tratado na configuração do conector. Porem esse tipo de configuração só pode ser realizado para conectores do tipo Sink, que são dados que já estão no Kafka.

Temos alguns tipos de tolerancia para esses errors:

- none: Caso dê erro a tarefa vai falhar, porem ela vai fazer a tarefa parar
- all: Ignora os errors e continua com a tarefa (porem dessa forma não vai ficar nos logs esse errors, vai ser de fato completamente ignorado)
- errors.deadleatterqueue.topic.name = <nome-do-topico>: com a tolerância de errors como all e essa configuração, todas as vezes que der erro vamos pegar a mensagem e jogar no tópico que passamos o nome, e no header da mensagem vai ter o erro que o kafka connect encontrou
Solving Rustc build of alacritty on Kali Linux
Published: 2022-07-08 21:04:10

Ran into a few snags getting the Rust-based alacritty terminal to compile via cargo on Kali Linux (2022.2). Initial dependencies required for a Kali deployment include build-essential, cmake and fontconfig - all of which are available via apt.

It turns  alacritty also requires:

- libxcb-xfixes0-dev
- libxcb-xshape0-dev
- libxcb-render0-dev

Once those three are also added via apt, #alacritty builds completely within cargo. Thanks to Amber for their "Solving Rustc 'cannot find -lxcb-shape'" post on Dev that helped lead me down the solution path for alacritty. 

Reference: {% embed https://dev.to/amberisvibin/solving-rustc-cannot-find-lxcb-shape-oe9 %}