teleren/devto huggingface dataset:
Create a Music Discord Bot and Run it in the Cloud!
Tags: node, javascript, tutorial
Published: 2020-12-14 21:15:01

Hey everyone! I was inspired by a video from another Youtuber about making a discord bot, and decided to take it a step further :muscle:

In this video, I teach you the fundamentals of making the music bot and also how to deploy it to the cloud :cloud: Let me know what you think!


{% youtube KtffGXknMMM %}
The first steps at #dohackathon
Tags: dohackathon, angular, python
Published: 2020-12-14 21:14:02

As mentioned before, I'm a C++ backend dev who has to learn Angular for a new project, so I'm having exciting times as after a 2 days training basically I start my journey with this hackathon.

I performed something very basic so far, but I'm glad that it works:

- I created a flask backend which replies to whatever request `{"message":"Hello World, this is DEV analytics here!"}`

- I created an Angular frontend that when a button is clicked, calls the backend and shows the reply on the page.

![Hello world](https://dev-to-uploads.s3.amazonaws.com/i/b6o6yqx4ixh1o2s4jht7.png)

I know how small these steps are, but I'm very glad that I have something working.

By the end of this week, the BE will be able to provide all data needed by the FE.
Essential Design Resources for Developers
Tags: design
Published: 2020-12-14 21:08:05

Do you have so many bookmarks that you actually don't use any of them? There are a million free design resources out there. And a million and one resources compiling those resources. If you're overwhelmed by all of the options, then here's some more! 😉 

These are my personal essentials. 


## Images
### Free Photos and Background Images
* [Unsplash](https://unsplash.com/)

### Take and Edit Screenshots
* [Greenshot](https://getgreenshot.org/)

> TIP: There may be a better way to do this, but I sometimes use this screenshot tool to estimate the size or aspect ratio an image needs to be. I have "Capture Region" configured to use the `PrtSc` hot key. You can then select a region and it gives you the dimensions.)


![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1610737162832/aFbVWgQ2W.png)


## Illustrations
### Free Vector Illustrations
* [Undraw](https://undraw.co/illustrations)

> TIP: You can select the hex code for the illustrations

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1610736735729/1GCuvZlTR.png)

### More Free Ilustrations
* [DrawKit](https://www.drawkit.io/)



## Icons
### Free .svg Icons of Popular Brands
* [SimpleIcons](https://www.simpleicons.com/)


![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1610736941807/TzfmIXryp.png)

### Free Vector Font Icons
* [Font Awesome](https://fontawesome.com/)



## Fonts
### Heading & Body Fonts That Look Good Together
* [FontPair](https://fontpair.co/)

### Identify a Font 
* [What The Font](https://www.myfonts.com/WhatTheFont/)



## Colors
### Simple, Flat Color Palettes
* [Flat UI Colors](https://flatuicolors.com/)

### Generate a Color Palette From an Image
* [Canva Color Palette Generator](https://www.canva.com/colors/color-palette-generator/)

### Generate the CSS for Gradients
* [UI Gradients](https://uigradients.com/) 

### Identify HTML Hex Codes of a Pixel Anywhere 
* [Instant Eyedropper](http://instant-eyedropper.com/)


![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1610736894390/Sk7K3yej8.png)

> TIP: Once downloaded, setup your hotkeys. I like to use `Alt+Q` to easily bring up the eyedropper.


---
#### _Thanks for reading. I hope these are helpful for you! Feel free to connect with me on [LinkedIn](https://linkedin.com/in/darian-nocera)!_
Javascript regex part 6 specify number of matches
Published: 2020-12-14 20:47:58

**How to specify upper and lower number of matches**

Previously when we would look for a specific number of matches we would use the `*` sign for zero or more matches and the `+` for one or more matches. You can also specify a certain range of patterns with the `{}` sign which are called quantity specifiers.

For example what if we wanted to only match the letter o between 3 and 7 times? Here is how you would code it out:

```
let firstOh = 'oooh';
let secondOh = 'oh';
let searchForO = /o{3,9}h/;

searchForO.test(firstOh) // returns true
searchForO.test(secondOh) // returns false
```

**How to specify lower number of matches only**

If you want to only specify the lower number with no upper limit you use the same syntax as above without a second number after the comma:

```
let firstOh = 'oooh';
let secondOh = 'oh';
let thirdOh = 'ooooooooooooooooooooooooh'
let searchForO = /o{3,}h/;

searchForO.test(firstOh) // returns true
searchForO.test(secondOh) // returns false
searchForO.test(thirdOh) // returns true
```

**How to specify an exact number of matches**

If you want to specify only an exact number of matches you will have just one number between `{}`:

```
et firstLow = 'Looow';
let secondLow = 'Low';
let thirdLow = 'Loooooooooooooooooooooooow'
let searchForO = /Lo{3}w/;

searchForO.test(firstLow) // returns true
searchForO.test(secondLow) // returns false
searchForO.test(thirdLow) // returns false
```
The architecture of the app, p.1
Tags: python, architecture, platform
Published: 2020-12-14 20:37:44

#series : ["DigitalOcean Hackathon"]

This is post is part of the DigitalOcean Hackathon Series. 

In this post inshallah, I will present The Architecture which highlights the main modules and functions of the platform. 

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/fa1zusvpmehzkwx7ff2v.jpg)

The platform idea is to locate nearby neighbors where neighbors in the same hood can rent and lend gadgets they want.
Looking for a few aspiring developers for a career strategy session
Published: 2020-12-14 20:28:59

Hey there!

I'm looking for a few aspiring self-taught developers that are struggling to get their first jobs.

For the last few years, I've been working on a process for self-taught developers to build credibility and land a job without previous experience.

The process is simple but extremely effective, and I'm looking for a few highly motivated self-taught developers to share it with.

If you're interested, send me an email at ken@kenrogers.co and we can set up a video chat to go over how it works. Should only take about 10 minutes to go over everything.

Thanks!
Lets Read | DO App Platform Hackathon
Tags: dohackathon
Published: 2020-12-14 20:18:22

## The Idea
I have a list of ideas that I have wanted to build and I will be using one for the the DigitalOcean App Platform Hackathon. 

Lets Read will be a web app that can be used by parents to teach their children to read. As a mom of 3, I have been trying to teach my 3 and 2-year-old to read with different resources but I thought it would be fun to have something easily available on my phone. 

## The Why 
Usually, I use flashcards that I made but my kids have completely destroyed them. Therefore the app will consist of different flash cards including phonics, alphabet, and pre readers for small children to learn to read. 

This will not be something for parents to just hand over to their kids and let them learn on their own. The point of the app is for parents to work alongside their children. 

## The Plan 
The steps I will be taking: 
1. Design the prototype with Figma
2. Code the front end with HTML and Vanilla CSS 
3. Add functionality with Javascript. 

--- 
I definitely plan on keeping it very simple and hopefully easy to use. 

I plan on documenting my journey on my blog, [Instagram](https://www.instagram.com/brendamichellle/) and maybe my youtube channel [brendamichelllecodes](https://www.youtube.com/channel/UCCbwmyG1DlUxjYkPLIA9qzA?view_as=subscriber) If anyone is interesting in tuning in. 

Best of luck to everyone joining the hackathon and **_Happy Coding_**
Series Open CSS Loaders ["3. Deploying to the DO"]
Published: 2020-12-14 20:16:05

This is **PART-3** of the series for my entry in the hackathon.

##Idea
Here I wanted to Deploy the app on the Digital Ocean Platform. The Docs are great. Super easy. I deployed the app. Simple.
But since I was using MongoDB Atlas the whole time, I had to switch to one of their databases. They have 3 option 
1. PostgreSQL
1. MySQL
1. Redis

It would have been best if I would have gone with Redis, since it stores the data in key-value pairs, similar to mongoDb, but I have my collage finals in 2 weeks, and I am having MySQL in the syllabus, so I went with the same. Then it was lots of docs referring and changing the node.
Uninstalling Mongoose 
`npm uninstall mongoose`
And then installing mySQL
`npm i mysql --save`
Yeah, that's it, I have A basic App running. But I have to do a lot of testing and of course, adding the *Loaders* to the site.
Also I wanted to the the "Deploy to DO button".
 <a href="https://cloud.digitalocean.com/apps/new?repo=https://github.com/{repo-owner}/{repo-name}/tree/{branch-name}">
 <img src="https://mp-assets1.sfo2.digitaloceanspaces.com/deploy-to-do/do-btn-blue.svg" alt="Deploy to DO">
</a>

##Work
Setting app on the digital ocean is very easy. I say the easiest amongst the services I have tried. Host the repository on GitHub, link your account, choose the repository, give environment variables if necessary, hit deploy. Voila, your app is up in under 2 minutes.
And Every time you update your repo on GitHub, the app is also updated. 
Link the database, Simple. 
And Now i have an app Running.
Check it out [here](https://open-css-loaders-pwtuz.ondigitalocean.app/)
 
Now for the button the docs have everything. You have to add a file `.do/deploy.template.ymal` and add details to it. Then add the button itself and it works.
Publish your tracking plan into Amplitude, Mixpanel, Segment or with a Webhook
Tags: integrations, datascience, management, analytics
Published: 2020-12-14 20:04:23

Tracking plans can't live in isolation. Once a tracking plan has been defined in Avo it needs to be utilized in multiple places, not only to generate type safe tracking code, but also to...

* feed the rich context of the tracking plan (think event descriptions, property types etc) into analytics platforms _Example: I want to see the Avo description when hovering over an event in Amplitude_
* update ingestion time validation tooling that blocks things that are not defined in the tracking plan from entering our datastore
* build or update SQL tables based on the latest tracking plan, to receive and store the data

Basically, the limit does not exist. 🚀


##Publish Your Avo Tracking Plan: ##
We’re excited to announce the following Publishing destinations are now available in Avo:

* [Segment Protocols](https://www.avo.app/segment): You can push the Avo tracking plan to Segment Protocols with a click of a button in the Avo dashboard.
* [Amplitude Govern](https://www.avo.app/amplitude): API pending update from Amplitude, coming soon! You'll be able to push your Avo tracking plan with a click of a button in the Avo dashboard.
* [Mixpanel Lexicon](https://www.avo.app/mixpanel): You can push the Avo tracking plan to Mixpanel Lexicon with a click of a button in the Avo dashboard.
* [Webhooks](https://www.avo.app/webhooks): To access your tracking plan data in thousands of other platforms, or in your own in-house tools, use Avo Webhooks. It’s as easy as adding a URL.

The feature we’re most excited about, however, is auto-publishing to all of these destinations. You can now configure these integrations so that each time a new branch is merged, your new and updated tracking plan is automatically sent to your downstream tools of choice! We’re taking the guesswork out of event metadata. 

With auto-publishing, you can rest assured that every team member has the insights needed for analysis and activation, right where they need them.

This helps you seamlessly create a single source of data truth and foster better collaboration across teams in your product organization. If you need help along the way, know Avo is ready to partner with you on your journey to good analytics governance.
Using docker for Rendering Blender Projects ~ Starting Research
Tags: docker, kubernetes, blender
Published: 2020-12-14 19:19:14

# I need more power!!!

For some background, I make custom cookie cutters on the internet and I recently started rendering videos of my cutters for things like Instagram, Twitter, Patreon, and Etsy. It's a simple business that I do for my mother. Below is an example of one of my finished renders after some editing in Adobe After Effects.

<blockquote class="twitter-tweet"><p lang="en" dir="ltr">Here are some renders of the cutters available on my patreon. More renders coming soon. <a href="https://t.co/MJNsyYnK6I">pic.twitter.com/MJNsyYnK6I</a></p>&mdash; Brian Almaguer (@BulmaBrian) <a href="https://twitter.com/BulmaBrian/status/1338229046837014529?ref_src=twsrc%5Etfw">December 13, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

Every 11 second video I render from blender is about 2.3 gigabytes in size. The whole process takes about 2+ hours minimum. Needless to say, I really want to get this under 2 hours. This sparked a fun idea. I want to make a blender farm from my raspberry pi cluster using docker and or Kubernetes.

## Current thoughts

To be perfectly honest, I don't know what I am doing but I believe I know the direction I should be going. These are my current thoughts:

1. Make a base container with blender installed.
2. Check if blender can identify a container as a rendering node.
3. Set up a docker compose file to network containers together.
4. Look into passing a graphics card into container.
5. Establish a benchmarking blender file.

## Next Steps of Development

Open a GitHub for testing and research.
The Why? of it All..
Tags: introduction, newbie
Published: 2020-12-14 19:14:03

Honestly, I would say that the more appropriate question would be, "Why, now?" But, before we get into that, a few facts...

I'm a 42 year old, African American, cis woman. 
I'm a single mother of an 11 year old who has both ADHD and ODD. 
I live in a southern state with no tech center. 
The last time I wrote any kind of code was in 1998...in Pascal.
I started a software development boot camp one week ago today. 

So, here we are. Why did I, at this stage in my life, with a million and one responsibilities, non-existent "free time", bills on top of bills decide coding was for me? The truth is, I decided that way back in 1998. But, as it's known to, life had other plans. I took a detour to pursue a back-breaking, soul-crushing career in nursing. I would come home every night physically and emotionally drained. I had nothing left in the tank for anyone or anything. I knew (KNEW) that I was not going to be able to keep it up. But, I didn't see a way out. 

Enter COVID-19...the corona...the VID. 

Because I have an autoimmune disorder, I was quickly sidelined. I was able to find a less-stressful job working from home. Now, I had energy. I had time. I knew that there was no way I was going to go back to nursing after the pandemic. I decided to go back to my first love - coding. 

I've loved every minute so far.
شركة هلال الخليج للخدمات العامة
Tags: html
Published: 2020-12-14 19:10:38

شركة هلال الخليج للخدمات العامة
(نقل وفك وتركيب اثاث - تنظيف - مكافحة حشرات)

هلال الخليج هي أفضل شركة نجار وفك وتركيب اثاث. نقدم لك جميع الخدمات العامة مثل التنظيف ومكافحة الحشرات ونقل وفك وتركيب الاثاث بالرياض بأقل الأسعار وأفضل خدمة وجودة

<a href="https://hilal-alkhalij.com" >hilal-alkhalij.com</a>
<a href="https://hilal-alkhalij.com/%d9%86%d8%ac%d8%a7%d8%b1-%d8%a7%d9%8a%d9%83%d9%8a%d8%a7-%d8%a7%d9%84%d8%b1%d9%8a%d8%a7%d8%b6/" >نجار ايكيا الرياض</a>
<a href="https://hilal-alkhalij.com/%d9%86%d8%ac%d8%a7%d8%b1-%d8%aa%d8%b1%d9%83%d9%8a%d8%a8-%d8%ba%d8%b1%d9%81-%d9%86%d9%88%d9%85-%d8%a8%d8%a7%d9%84%d8%b1%d9%8a%d8%a7%d8%b6/" >نجار تركيب غرف نوم بالرياض</a>
<a href="https://hilal-alkhalij.com/%d9%86%d8%ac%d8%a7%d8%b1-%d9%81%d9%83-%d9%88%d8%aa%d8%b1%d9%83%d9%8a%d8%a8-%d8%ba%d8%b1%d9%81-%d9%86%d9%88%d9%85-%d8%a8%d8%a7%d9%84%d8%b1%d9%8a%d8%a7%d8%b6/" >نجار فك وتركيب غرف نوم بالرياض</a>
<a href="https://hilal-alkhalij.com/%d9%86%d8%ac%d8%a7%d8%b1-%d9%81%d9%83-%d9%88%d8%aa%d8%b1%d9%83%d9%8a%d8%a8-%d8%a7%d8%ab%d8%a7%d8%ab-%d8%a8%d8%a7%d9%84%d8%b1%d9%8a%d8%a7%d8%b6/" >نجار فك وتركيب اثاث بالرياض</a>
<a href="https://hilal-alkhalij.com/%d9%86%d8%ac%d8%a7%d8%b1-%d8%a8%d8%a7%d9%84%d8%b1%d9%8a%d8%a7%d8%b6/" >نجار بالرياض</a>
شركة هلال الخليج
هدفنا الوحيد هو التميز فى ارضاء احتياجك لنا
حيث نوفر لك عملينا العزيز الجودة والدقة بأقل الاسعار والتكاليف
فنحن فى انتظارك
للتواصل معنا على الارقام
+966539405738
https://hilal-alkhalij.com/
Series Open CSS Loaders ["2. The Front End"]
Published: 2020-12-14 19:09:36

This is **Part-2** of the series for my entry in the hackathon.
Read the [Part-1 here](https://dev.to/tusharyaar/series-open-css-loaders-setting-up-backend-3f6k)
##WORK
Nothing much to document here. I had a basic design in my mind, I have to just get that working. Simple right. 
The first thing was to get the html, CSS and basic Javascript running. Then I added all the ajax requests using jquery.
These I recycled from the first attempt at making the app.
The other thing did in the first attempt was using a syntax highlighter for all the textboxes. It was working fine, but then I came across [ace.js](https://ace.c9.io/), which is a full fledged IDE on the browser, so I started to implement that.
The docs are great and was easy to setup. But then I had to refactor a lot html and CSS so it took a lot of time.
The other thing I added was a function to like a loader. And in that it shows different icons when liked which I like personally.
Then there were some minor updates like a page theme toggle, an editor window toggle and some bug fixes.
Yeah that was it. Now had to deploy to the platform.
Connect MongoDB Atlas and upload data :
Tags: cloud, mongodb, webdev, database
Published: 2020-12-14 18:56:49

# __What is MongoDB atlas :__

It is a database as a service where we could upload our data to the popular cloud providers such as AWS , azure, GCP .

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/3fb1yk4pm6hno9tx6ybt.jpg)
# __setup :__

1. Crate a new project .
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/e3bvzkpoixgvrix1x76w.png)

2. Select the free tire and then choose the cloud provider .
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/t78gpw1dpk74o9ix895p.png)

3. Navigate to the create a new user under the security section and then add a new user with password .

4. and finally we can click on the connect button and then click on connect to our application .

5. Then integrate that URI in your application with your username and password .

Here i am using node.js with mongoose as an odm(object document mapper)

```javascript 
mongoose.connect('mongodb+srv://admin:<password>@cluster0.jaomd.mongodb.net/<dbname>?retryWrites=true&w=majority', {useNewUrlParser: true});
```

* replace with your username , password and dbname .

* Now we can execute __CRUD__ operations on our database .
#Day 11: Space Complexity
Tags: 100daysofcode
Published: 2020-12-14 18:48:58

Hello.
As I barely had any knowledge about Space Complexity, I spent my time today watching various lectures related to it on Youtube. From now on, I need to may focus on the complexities while solving questions. I had no idea about its importance until I started solving questions on HackerRank and realised how these play a key role.

Also, I was not well yesterday. Hence, I could not study even a bit. Hope that's excused.
My ridiculously unreadable but concise solution to the Compare Tuples challenge on HackerRank
Tags: javascript, hackerrank, arrays
Published: 2020-12-14 18:44:24

Here's the challenge: https://www.hackerrank.com/challenges/compare-the-triplets/problem

Here's the definition of the challenge:
> Alice and Bob each created one problem for HackerRank. A reviewer rates the two challenges, awarding points on a scale from 1 to 100 for three categories: problem clarity, originality, and difficulty.

> The rating for Alice's challenge is the triplet a = (a[0], a[1], a[2]), and the rating for Bob's challenge is the triplet b = (b[0], b[1], b[2]).

> The task is to find their comparison points by comparing a[0] with b[0], a[1] with b[1], and a[2] with b[2].

    If a[i] > b[i], then Alice is awarded 1 point.
    If a[i] < b[i], then Bob is awarded 1 point.
    If a[i] = b[i], then neither person receives a point.

> Comparison points is the total points a person earned.

> Given a and b, determine their respective comparison points. 

My initial approach was a simple if/else loop, filling the 2 positions of a previously defined array, and then returning that array.

Something along the lines of this:
```
function compareTriplets(a, b) {
  let counterA = 0,
      counterB = 0;
  for (let i=0; i < a.length; i++){
      if (a[i] > b[i]) {
          counterA++;
      } else if (a[i] < b[i]) {
          counterB++;
      }
  }

  return [counterA, counterB];
}
```

This is obviously a fine enough solution and what I would probably write in a real project. 

But I thought: "I bet can write this in one line". And so I did:

```
const compareTriplets = (a, b) => [[a, b], [b, a]].map((c, i) => c[0].reduce((acc, _curr, i) => acc + (c[0][i] > c[1][i]), 0));
```

And it works! And I'm sure there's ways to make it even more concise. And there's definitely a way to extend it to accept a hypothetically infinite (within the limits of JS) amount of arrays. 

As said before, I would never write something like this for a real project. The reason is that it's completely unreadable. It would probably take me 10 minutes to understand the code I produced if I came across it in a legacy project or I wouldn't even get that far because I would think to myself "which self-important twat wrote this?" and close my editor out of frustration. 

Anyway, it was a fun mind challenge and I think I might understand `.map()` and `.reduce()` a bit better now :)