teleren/devto huggingface dataset:
SaaS Insight for Building a Real-time CRM Application
Tags: saas, crm, github, opensource
Published: 2022-05-23 00:03:26

**Background**
To store large volumes of real-time user data like email and provide insights is not easy. If your application is layered on top of Gmail to automatically extract and organize the useful information buried inside of our inboxes.

It became clear that they were going to need a better system for organizing terabytes of email metadata to power collaboration as their customer base rapidly increased, it is not easy to provide insights. You need to organize email data by first applying a unique identifier to the emails and then proactively indexing the email metadata. The unique identifier is what connects the same email headers across. For each email inserted in real-time, the system extracts meta information from it and builds indices for high concurrent access. When data volume is small, it's all good: traditional databases provide all you need. However, when data size grows beyond a single node's capacity, everything becomes very hard.

**Potential Database Solutions**
Regarding databases, there are some options you might consider:

1. NoSQL database. While fairly scalable, it does not provide you indexing and comprehensive query abilities. You might end up implementing them in your application code.
2. Sharing cluster of databases. Designing sharding key and paying attention to the limitations between shards are painful. It might be fine for applications with simple schema designs, but it will be too complicated for CRM. Moreover, it's very hard to maintain.
3. Analytical databases. They are fine for dashboard and reporting. But not fine for high concurrent updates and index based serving.

**How to get real-time insights**
TiDB is a distributed database with user experience of traditional databases. It looks like a super large MySQL without the limitations of NoSQL and sharding cluster solutions. With TiDB, you can simply have the base information, indices and metadata being updated in a concurrent manner with the help of cross-node transaction ability.

To build such a system, you just need following steps:

1. Create schemas according to your access pattern with indices on user name, organization, job title etc.
2. Use streaming system to gather and extract meta information from your base data
3. Insert into TiDB via ordinary MySQL client driver like JDBC. You might want to gather data in small batches of hundreds of rows to speed up ingestion. In a single transaction, updates on base data, indices and meta information are guaranteed to be consistent.
4. Optionally, deploy a couple of TiFlash nodes to speed up large scale reporting queries.
5. Access the data just like in MySQL and you are all done. SQL features for analytics like aggregations, multi-joins or window functions are all supported with great performance.

For more cases, please see [here](https://en.pingcap.com/customers/?utm_source=ossinsight&utm_medium=referral).

https://pingcap-ossinsight-build-pr-271.surge.sh/blog/saas-insight-for-building-a-real-time-crm-application
AREPL Stats 2021
Tags: arepl, python, vscode
Published: 2022-05-22 23:19:55

See last post for 2019 [here](https://dev.to/almenon/arepl-stats-2019-lgl)

### Q: AREPL?

Automatic-read-eval-print-loop. It's a real-time python scratchpad, currently one of the top python extensions for VSCode.

![](https://raw.githubusercontent.com/Almenon/AREPL-vscode/master/areplDemoGif2.gif)

### Q: How many people use AREPL now?
Roughly 400 daily. Usage is around 530 on weekdays and 350 on weekends. This is FAR more than the previous number (~100). I'm not sure when or how the increased happened, because the number of weekly users is flat currently and I don't have enough historical data. This is very frustrating. A definitive increase in users would prove that AREPL is a good app and my time spent making it was worth it. Without a definitive increase I'm left to question the stats and and whether people truly like AREPL. But I suppose I'm being pessimistic here, I should be celebrating the massive increase. *sad toot* 🎉

### Q: What portion of users are using AREPL for the first time?

![Users of AREPL by first use date](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xtjgvu19iyqox1ee42ol.png)

This is a graph of people who used AREPL yesterday, sorted by the first use date, the y-axis being total number of uses. As you can by the number of bars on the right, many users just started using AREPL recently. Specifically, 245, or 54%. Then 21 users started yesterday, 11 the day before that, 10, 3, 3, 3, and so on. Basically half the users are new with a long tail towards the left of repeated users.

I have two takeaways:
1. A very large number of users quit using AREPL right after trying it out. If I take the average number of daily users in the left tail as retained users, and the number of people using AREPL yesterday as new users, then 3/245 = 1% retention rate.
2. I have repeated users!
 
\#2 is great news because repeated uses of my app indicates that it's more than just a novelty - it's something that can actually be useful in day-to-day development or learning. At least for the 1% of retained users, but better something than nothing!

**Q: Did you get any media mentions?**
6 blog posts, [1 tweet](https://twitter.com/Upsurge_11/status/1368592108907470849), and 6 videos. 

**Q: So you have some stats, but what do users actually think?**

Good question. Currently I'm feeling that statistics, while easy to collect, are not giving me the entire picture. Unfortunately user interviews are easier said than done. I've sent out multiple requests but I've hardly gotten any responses.

### Some final notes:

Q: Where do I install AREPL?
A: https://github.com/Almenon/AREPL-vscode

Q: How can I add application insights to my own extension?
https://medium.com/@almenon214/adding-telemetry-to-your-vscode-extension-f3d52d2e573c

<!--
https://livecodestream.dev/post/best-vscode-extensions-for-python/
https://www.datasource.ai/en/data-science-articles/top-10-python-extensions-for-visual-studio-code
https://betterprogramming.pub/is-vs-code-not-python-friendly-try-these-5-extensions-d4d51e41e072
https://dev.to/pythonperfection/tune-vs-code-like-a-boss-4lg4
-->
Deploying a high-availability web app using CloudFormation
Tags: cloudformation, iac, devops, aws
Published: 2022-05-22 23:04:01

Have you been looking for a simple way to implement high availability for your web application? Amazon Web Services provides the entire foundation for achieving true high availability, but implementing the features properly requires specific knowledge of how to bring each service together.

In this article, I’ll explain the concept of high availability and how to leverage infrastructure as code (IAC) tool such as Cloudformation to achieve it. AWS Cloudformation can help you achieve high availability for cloud workloads, across compute, SQL databases and storage services. For this article, I deployed a simple web app using a cloudformation template. This template deploys a VPC, with a pair of public and private subnets across two Availability Zones. It deploys an Internet Gateway, with route on the public subnets. It deploys a pair of NAT Gateways (one and default routes for them in the private subnets.) It deploys Security groups for an Ubuntu launch configuration, Auto-Scaling group, Load Balancer, Target Group with Listener and Listener Rule. 

![VPC deployment](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mi3986tj36a7l4ol2bt1.JPG)

High availability is the ability of a workload to remain operational, with minimal downtime, in the event of a disruption. Disruptions include hardware failure, networking problems or security events, such as DDoS attacks.

In a highly available system, workloads are spread across a cluster of servers. If one server fails, the workloads running on it automatically move to other servers.
High availability means that a system will almost always maintain uptime, albeit sometimes in a degraded state. With regard to AWS, a system has high availability when it has 99.999% uptime, also known as "five nines". To put that in perspective, the system would be down for a mere five minutes and fifteen seconds a year. 
And yes, that is possible — and even routine — for AWS.

AWS CloudFormation provides a common language for you to describe and provision all the infrastructure resources in your cloud environment. It allows you to use a simple text file to model and provision, in an automated and secure manner, all the resources needed for your applications across all regions and accounts.
![Cloudformation](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/52upj1gk0f2yyj14a59s.png)

Consider the script in the screenshot below. 

![Server.yml](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nfj8yfots5sqxjp1am7z.PNG)
The script applies a launch configuration which is used by an Autoscaling group to deploy a basic Apache web server hosted on an EC2 instance in two private subnets of two different availability zones. This is to guarantee that our application remains up and running even when one AZ goes down. Public traffic is allowed via a Load Balancer deployed on the public subnets.

Thank you for reading through this article. Got questions? Put them in the comment section.
I Made 100 CSS Buttons For Your Next Big Project 🚀️
Tags: javascript, webdev, beginners, programming
Published: 2022-05-22 22:35:00

If you like this article, don’t forget to click on that **heart button** to show your appreciation.



You’re probably thinking: *That’s an odd way to start an article…*

But I just wanted to show you that buttons *really* are everywhere!

{% github https://github.com/eludadev/ui-buttons %}

You’re bored. So you take your phone out, and you click buttons to —

1. turn it on (a *physical button*)
2. open the [twitter app](https://twitter.com/eludadev) (an *icon button*)
3. go to the home page (a *navigation button*)
4. like and reply to a tweet (an *action button*)

and the list goes on and on….



I think that you get it by now, we are obsessed with pressing buttons! So let me propose an idea…



Buttons should be more fun! And by “fun”, I really mean —

- practical,
- precise,
- and modern.



But as web developers, we already have to worry about so many other things —

- accessibility (a11y),
- web vitals,
- seo.


So imagine if someone could just take one little hurdle away, so that we can focus on the more important stuff…



I decided that I should be that person. I took on the responsibility of building buttons that are —

- accessible (uses ARIA attributes),
- modern in style,
- responsive (works on desktop and mobile).



And not just that, I also decided to make **ONE HUNDRED** different styles for these buttons. You are *guaranteed* to find that one style that *just works* on your website!

{% codepen https://codepen.io/eludadev/pen/zYRdddK %}

Now let’s break-apart one of my favorite button styles: [**The Overfold**](https://github.com/eludadev/ui-buttons/tree/main/buttons/31-overfold).



It first starts by animating a `clip-path` from one corner to another.

{% codepen https://codepen.io/eludadev/pen/wvyqPNj %}

The second part of the effect involves scrolling text vertically, while clipping it using `overflow: hidden`.

{% codepen https://codepen.io/eludadev/pen/RwQZxZM %}



___

**Did you know?** I’m working on **150 CSS Buttons**. Follow me to be the first to know when it drops! :hugs:

{% user eludadev %}

{% twitter https://twitter.com/eludadev/status/1526989502199234567?s=20&t=WffWc4GscHmkIXu1n0BcXw %}
Getting started in Tech with Altschool Africa
Published: 2022-05-22 18:51:38

They say that "the journey of a thousand miles begins with a step"; while I've taken a few steps in this tech space, it all started somewhere, somehow.

My Altschool journey started on the 6th of December, having paid the application fee (I had help because, you see, I'm still in the trenches). Within hours, I was reached out to, on twitter and by mail; the study kit was provided and a link to the Altschool slack channel for aspirants, and so preparations for the assessment started. It was an exciting journey as all hands were on deck to ensure that we had the best experience.

**Choosing a track of study**

I think for a lot of us, this may be the tricky part. This wasn't lost to the altschool team as we were given time to deliberate the three options available in the school of engineering: Frontend engineering, Backend engineering, and Cloud engineering. For me, it was cloud; I knew this because I had done little study earlier on cloud engineering and wanted to deepen the knowledge I had. We got a chance to pick a track to be tested on during assessments. We would have a chance to change track in the future (after we'd been accepted) if we wanted to.

**Preparations for assessment**

As the pioneer set of the school, it was a bit confusing as to what we were to be tested on. The mail clearly stated that the test had three areas of focus: Basic communication Test, Aptitude Test and basic technical test. The confusion was as a result of the fact that the contents of the study kit were only the Technical bit.

We had to make do, search the internet on how to test ourselves before the test. Conversations on the slack channel were centered on these, and yes, these conversations helped a lot of us. We had a lot of luck on our side, as the preparation period was even extended and exams slated for February 2022.

**Exams!!!**

Everyday, a certain number of individuals are sent mail, so that traffic on the sites is minimal. The invite expires within 5 days, so we had 5 days to do the assessments. It went even better than we thought it would be. They were 100% multi-choice questions; they were a bit tricky but relatable. English, mathematics, and computer science, basically. The cut-off mark is 85% (scary, I know). I had a score of 87%, sent after a duration of about 15 minutes to my email address.

**Post exams**

A lot of individuals really came close to getting the 85% but didn't get in. It was surreal because, whoa! Anybody can be in those shoes. They are currently learning with us, they have access to the learning management system (lms) but aren't Altschool Africa scholars. They get this privilege until the end of the first semester.

It has been a wonderful experience so far. Yes, you can be sure there'll be a post on how far we've come.
Sync folders using diff + awk
Tags: diff, awk, linux, admin
Published: 2022-05-22 22:22:03

## Real life diff use:
I want to copy only the missing 'jpg' files at the ~/tmp/wallpapers

```sh
diff -u ~/img/backgrounds ~/tmp/wallpapers

Only in /home/sergio/tmp/wallpapers: .git
Only in  /home/sergio/tmp/wallpapers: .gitignore
Only in  /home/sergio/tmp/wallpapers: README.md
Only in  /home/sergio/tmp/wallpapers: thumbs
Only in  /home/sergio/img/backgrounds: wallpaper-1791868.jpg
Only in  /home/sergio/img/backgrounds: wallpaper-2099153.jpg
Only in  em /home/sergio/img/backgrounds: wallpaper-2226037.jpg
```

Using awk with two field separators `[: ]` I only need the third and fifth fields to compose a copy command:

```sh
diff -u ~/img/backgrounds ~/tmp/wallpapers | awk -F'[: ]' '/backgrounds/ {print $3"/"$5}'

/home/sergio/img/backgrounds/wallpaper-1791868.jpg
/home/sergio/img/backgrounds/wallpaper-2099153.jpg
/home/sergio/img/backgrounds/wallpaper-2226037.jpg
```

Now I only have to add some strings to my awk command and pipe the result to the shell

```sh
"cp " ............... copy comand with space
$3  ................ the third fild - the basename
"/" ................ add the slash so we do not mess things up
$5 ................. the missing file name
" ~/tmp/wallpapers"  destination folder
| sh ................ pipe the preceding command to the shell

diff -u ~/img/backgrounds ~/tmp/wallpapers \
| awk -F'[: ]' '/backgrounds/ {print "cp " $3"/"$5" ~/tmp/wallpapers/"}' | sh
```

An interesting thing is that the backgrounds folder has no .git files on it but the wallpapers do, that's why I am filtering '/backgrounds/' with awk and not using recursion '-r', because the wallpapers folder has a thumbs subfolder
Code Fully Fledged Trivia Games in Discord.JS
Tags: node, javascript, discord, beginners
Published: 2022-05-22 22:22:00

**Trivia is often one of the most engaging group games** to play, but programming a trivia match requires patience and a strong knowledge of programming. 

Luckily, I have created an NPM module that implements fully fledged and polished trivia games straight out of the box with [Discord.JS](https://discord.js.org/#/) **with just a few lines of code!**

Full package guide: https://elitezen.github.io/discord-trivia-website/

[Github Repo.](https://github.com/Elitezen/discord-trivia), includes a condensed form of this article in the README.
[NPM Page](https://www.npmjs.com/package/discord-trivia),
[Discord Server](https://discord.gg/wtwM4HhbAr)

👉 What you will need to get started:

- A working Discord bot written in Discord.JS, [Click here for their extensive guide on how to get one up and running](https://discordjs.guide/#before-you-begin)
- Discord.JS **v14** (latest preferred)
- Node version 20 or higher
- A Slash command handler (recommended, [Click here for setting one up](https://discordjs.guide/creating-your-bot/command-handling.html#individual-command-files))

**Note:** This guide uses slash commands, but messages work too!

## Getting Started

Open a terminal inside your Discord bot's root directory and **install** **[discord-trivia](https://www.npmjs.com/package/discord-trivia)** with the following command:

```ssh
npm install discord-trivia
```

Then, create a **new slash command file**:

```js
const { SlashCommandBuilder } = require('discordjs');

module.exports = {
 data: new SlashCommandBuilder()
  .setName('Trivia')
  .setDescription('Lets play some trivia!'),
 async execute(interaction) {
  
 },
};
```

At the top of your command file require the `GameManager` class from Discord Trivia. Create a new trivia manager instance and name it trivia.

```js
const { GameManager } = require('discord-trivia');
const trivia = new GameManager();
```

Then, inside your `execute()` function create a new game using `trivia.createGame()` and supply the channel. Use `game.start()` to start a match as soon as this command is ran. Make sure to add a `.catch()` callback to catch any errors.

```js
async execute(interaction) {
    // Create the game
    const game = trivia.createGame(interaction.channel); 

    // Start the game
    game
       .startQueue()
       .catch(console.error);
},
```

Your code so far should look like this:
```js
const { SlashCommandBuilder } = require('discordjs');
const { GameManager } = require('discord-trivia');
const trivia = new GameManager();

module.exports = {
 data: new SlashCommandBuilder()
  .setName('Trivia')
  .setDescription('Lets play some trivia!'),
 async execute(interaction) {
        const game = trivia.createGame(interaction.channel); 
                
        game
           .startQueue()
           .catch(console.error);
 },
};
```

And that's all! Your bot will start a trivia match within the
channel the command was started 🎉🎉🎉

For customization and configuration of the package, visit the guide: https://elitezen.github.io/discord-trivia-website/
Mongoose and how to group by count
Tags: mongodb, database, beginners
Published: 2022-05-22 22:15:19

It may be an unpopular opinion but I don't like [Mongoosejs docs](https://mongoosejs.com/docs/) - I think they take a lot of knowledge for granted and their code samples are poor. But maybe it's me :shrugs:

Anyway, I have a collection of documents that looks like:

```
[
     {
     _id: 1,
     category: food,
     name: avocado
     },
     {
     _id: 2,
     category: food,
     name: orange
     },
     {
     _id: 3,
     category: drink,
     name: milk
     },
]
```

I wanted to create an endpoint that returns data like:
g
```
data: {
     food: 2,
     drink: 1
}

```

Basically the name of the category and the count of documents. Well, that brought me on a journey that span a couple of tutorials and some other SO thread. 

Disclaimer: I should probably be more familiar with MongoDB. I used to be, but like many things in life, you forget them and I am not ready to ramp up with MongoDB again and also with Mongoose, again. I just went straight to Mongoose. 

First, I discovered grouping with Mongoose is called [Aggregate](https://mongoosejs.com/docs/api/aggregate.html). I found `Model.aggregate()`, which brought me to this [tutorial](https://masteringjs.io/tutorials/mongoose/aggregate). Their `The $group Stage` section gave me a solution that worked for me:

```
const data = await YourModelName.aggregate([
  {
    $group: {
      _id: '$category',
      count: { $sum: 1 } // this means that the count will increment by 1
    }
  }
]);
```

But data was returned slightly different, not a big deal:

```
data: [
     {
     _id: "food",
     count: 2
     },
     {
     _id: "drink",
     count: 1
     }
]
```

Not a big deal and probably as good as it gets, but I continued exploring. This brought me to a number of SO threads (there were not that many), slightly different topic but it revolved to more or less the same syntax.

And then, by chance, I discovered `aggregate.sortByCount()` [here](https://mongoosejs.com/docs/api/aggregate.html#aggregate_Aggregate-sortByCount), which does the same out of the box!

```
const data = await Machine.aggregate().sortByCount("category");
```

`sortByCount` expects the name of the field and it does the whole $group, $count, etc for you. Or at least this is what happened for me. Much more straightforward.

I think this is good enough for me for now, I will stop exploring this topic, hope this was useful for you (:
Day 44: No time
Published: 2022-05-22 21:19:28

Hi!
So today was a special one, special because I didn't open my pc until it was 8PM I had been washing things and getting ready for the upcoming journey which mean I won't be very available in the next few days basically this next week. I didn't do anything at all code related, didn't write a single line of code or anything whatsoever. Tomorrow I plan to look a bit into Tailwind maybe Make some components for the Landing page or learn something about React but I expect to not enough time as well but I will see what I can do

signing off...
Hooks
Published: 2022-05-22 21:15:28

One of the rules for using hooks is that you must use a hook inside a functional component.
	Wege have to create a function that renders a component and then inside that function we can use hooks.


No colocar información anidad dentro de u state
	No objetos dentro de otro objeto (anidados), ya que no se re-renderizará por React, así está diseñado
	

---
Custom Hooks


Checks if the user's device has a rear facing camera

Technique: Use the browser's getUserMedia API to check if facingMode='"environment", which means a camera exists that faces away from the user.
```
import { useEffect, useState } from "react";

/** Returns true if the user's device has a rear-facing camera */
export default function useHasRearFacingCamera() {
  const [hasRearFacingCamera, setHasRearFacingCamera] = useState<boolean | null>(null);
  useEffect(() => {
    const detectRearCamera = async () => {
      try {
        const hasRearCamera = await navigator.mediaDevices.getUserMedia({
          video: { facingMode: { exact: "environment" } },
        });
        if (hasRearCamera) {
          setHasRearFacingCamera(true);
        }
      } catch {
        setHasRearFacingCamera(false);
      }
    };
    detectRearCamera();
  }, []);
  return hasRearFacingCamera;
};
```
create-react-app
Published: 2022-05-22 21:14:12

CRA

Por como está configurado CRA, todo lo que esté dentro de la carpeta 'public', lo podremos acceder incluyendo en la ruta solo una diagonal:

```
<img src="/avatar.jpg" alt="Foto de Giovanni"></img>
```
https://create-react-app.dev/docs/getting-started

Iniciar react:
```
Instalar:
$ npx create-react-app my-app
$ my-app
$ npm start

$ react-scripts-start
$ react start
```

---