teleren/devto huggingface dataset:
What is your approach when it comes to design your app?
Tags: laravel, design, css, php
Published: 2020-06-15 15:15:33

Hey, devs!

Today I want to share this with you. As a developer, I always struggle with design things. I saw only two options:
1. Bootstrap wich is noice but not unique;
2. Hire a designer to make the things done;

But! This time I found the way between those two and bought a ready to use template on ThemeForest. It saved me tons of hours and costs less than $20.

What about you? What is your approach?

✅ /done Make Seofy responsive and beautiful https://seofy.io
Discord bot Python 
Tags: discord, python, bot
Published: 2020-06-15 15:09:45


It does not work I think I am out of date, please help me

Error : Command raised an exception: AttributeError: 'VoiceClient' object has no attribute 'create_ytdl_player'

My code:


```
@bot.command(pass_context=True)
async def play(ctx, url):
    author = ctx.message.author
    channel = author.voice.channel
    vc = await channel.connect()
    player = await vc.create_ytdl_player(url)
    player.start()
Understanding Set in Javascript
Tags: javascript, webdev, codenewbie, html
Published: 2020-06-15 15:08:32

Set is a new Object type introduced in ES6. The Set allows you to create a collection of unique values. Values stored in a set can be of any type - primitive or object. 

> **Set is a collection of unique values.**    

You can also store **NaN** and **undefined** in a Set. Although in javascript, \[NaN!==NaN\], but a Set will equate it and store only unique values. 

## Creating a Set

Set is created using the **new** keyword. You can pass an iterable to the Set constructor and, it will copy the passed elements in the newly created Set.

```javascript
let set = new Set();
// Set(0) {}

let set = new Set([1,2,1,2]);
// Set(2) {1, 2}

let set = new Set([NaN, undefined, Nan, undefined]);
// Set(2) {NaN, undefined}
```
.

## Adding an element to a Set
To add a new element to a set, you can use **set.add(value)** method.
The **add method** add the passed value to the set and returns the set itself.

```javascript
let set = new Set([1,2,3,4]);
set.add(5);
console.log(set);
// Set(5) {1, 2, 3, 4, 5}

let newSet = set.add(6);
console.log(newSet);
// Set(6) {1, 2, 3, 4, 5, 6}
```
.
## Deleting an element from a Set
Set has a method **set.delete(value)** to delete the value passed to it from the set. It returns true if the set has the value passed to it prior to the call and false otherwise.

```javascript
let set = new Set([1,2,3,4,5]);
let isDeleted = set.delete(5);

console.log(set);
// Set(4) {1, 2, 3, 4}

console.log(isDeleted);
// true
```
.
## Checking if a value exists in a Set
To check if a value is present in a Set, we can use **set.has(value)** method. It returns true if the value is present in the set and false if it does not exist.

```javascript
let set = new Set([1,2,3,4,5]);
let isPresent = set.has(3);
console.log(isPresent);
// true
```
.
## Removing all elements from a Set
Set also provides a method **set.clear()** to delete all elements from the set.

```javascript
let set = new Set([1,2,3,4,5]);
console.log(set);
// Set(5) {1, 2, 3, 4, 5}


set.clear();
console.log(set);
// Set(0) {}
```
.
## Get count of elements in a Set
To get the count of element in the Set, we can use **set.size** property of the Set.

```javascript
let set = new Set([1,2,3,4,5]);
console.log(set.size);
// 5
```
. 
## Summary
In this article we learned:
- Set is a collection of unique values. 
- We can use the new keyword to create a new Set.
- We can add an element to a set using set.add(value).
- We can delete an element from a set using set.delete(value).
- We can check if a value exists in a set using set.has(value).
- We can remove all elements from a set using set.clear().
- We can get the count of elements in a set using the set.size property.

---
**This article was first published on [hackinbits.com](https://hackinbits.com/articles)**
Rename your master branch in Azure Repos
Tags: azurerepos, azuredevops, git
Published: 2020-06-15 15:05:20

---
title: Rename your master branch in Azure Repos
published: true
date: 2020-06-15 15:01:38 UTC
tags: azurerepos,azuredevops,git
canonical_url: https://jessehouwing.net/azure-repos-rename-your-master-branch/
---

 ![Rename your master branch in Azure Repos](https://jessehouwing.net/content/images/2020/06/source-1.gif)

Renaming your `master` branch in Azure Repos could be as simple as a few clicks. But if you have complex policies or permissions in place, it may be a little more work.

To rename your `master` branch you have to create a new branch and then delete the old one:

## 1- Use the context menu to create a new `+ new branch` from `master`.

![Rename your master branch in Azure Repos](https://jessehouwing.net/content/images/2020/06/image-7.png)

## 2- Chose a better name for your branch. `main` will do:

![Rename your master branch in Azure Repos](https://jessehouwing.net/content/images/2020/06/image-8.png)

## 3- Set the new `main` branch as your new default branch:

![Rename your master branch in Azure Repos](https://jessehouwing.net/content/images/2020/06/image-9.png)

## 4- And finally, delete your old `master` branch.

![Rename your master branch in Azure Repos](https://jessehouwing.net/content/images/2020/06/image-10.png)

If you're also using Azure Pipelines (which you should if you're also using Azure Repos), you may need to fix a few other things as well, they're essentially the same as the ones you'll need to [fix when using Azure Pipelines together with GitHub](https://dev.to/jessehouwing/rename-your-master-branch-to-something-better-1e4).
Pug Simple Responsive Table
Tags: html, css, weeklyui, beginners
Published: 2020-06-15 14:55:26

Pug is an HTML template engine that is mostly used in javascript frameworks. But here we made a simple responsive table in Pug with the help of CSS3.

In this element, we used simple pug Attributes and also we used CSS to make this element more attractive and beautiful. This is a responsive table and mobile-friendly user-interface.

Make it yours now by using it, downloading it, and please share it. we will design more elements for you.

[Get Source Code](https://w3hubs.com/pug-simple-responsive-table/)
What's your most embarrassing coding story?
Tags: watercooler, beginners
Published: 2020-06-15 14:49:01

> _Photo by [Anna Shvets](https://www.pexels.com/@shvetsa?utm_content=attributionCopyText&utm_medium=referral&utm_source=pexels) from [Pexels](https://www.pexels.com/photo/photo-of-a-boy-covering-his-eyes-3771679/?utm_content=attributionCopyText&utm_medium=referral&utm_source=pexels)_

When you're new to something (like programming), you tend to look to those with more experience for guidance and inspiration. But it's easy to let that lead you to believe that everyone is better than you at that new thing you're trying to learn.

But coding (like everything else in life) takes practice! Even today's best programmers surely made some cringeworthy mistakes when they were first getting started.

So I'd like to take a minute to put some newbies' minds at ease and let them know that even experienced programmers made dumb mistakes when they started. (I can't speak for everyone, but some of us continue to make dumb mistakes on a semi-regular basis.)

My most embarrassing story probably comes from high school, when I was trying to "upgrade" our shared family computer's graphics capabilities. I installed a new video driver and some other software and thought I had everything set up and good to go. When I restarted the computer, nothing would display on the screen. It turns out that I'd basically just disabled the video card. We took it to a computer repair shop, but there was nothing they could do -- they just had to wipe the hard drive and start over.

The worst part is that my brother had done his summer book reports (maybe 100 pages of notes) and only had them saved on that computer. So with maybe a month before school started, he had to redo everything! To add insult to injury, I then tried (again) to upgrade the graphics (again) and the uninstalled the video drivers (again) and my brother lost his notes (again). I'm amazed he didn't throw me out a window after the second time.

How about you? What's your most embarrassing coding story? Or the worst piece of code you've ever written? Ever broken anything in production? Let's hear it!
Brand New Standard Edition of dbForge SQL Tools
Tags: database, sql, sqlserver
Published: 2020-06-15 14:45:24

---
title: Brand New Standard Edition of dbForge SQL Tools
published: true
description: Devart presented the new edition of its SQL Server mega tool pack, dbForge SQL Tools Standard Edition.
tags: database, sql, sqlserver, 
---

Devart, a recognized vendor of professional database management software for developers and DBAs, released the brand new Standard Edition of its SQL Server mega tool pack, [dbForge SQL Tools](https://www.devart.com/dbforge/sql/sql-tools/). The recently presented edition comprises the following tools: SQL Complete, Data Compare, Schema Compare, Data Pump, Query Builder, Search, Monitor, Event Profiler, and SQL Decryptor.

The principal intention for releasing the new Standard edition of SQL tools was extending the range of options to meet the needs of all SQL Server users. Thus, this edition includes the most in-demand tools at the most reasonable price, so that users do not overpay for those features that are not necessarily needed.

**dbForge SQL Tools** is the ultimate toolkit allowing to version-control databases, compare schemas and data, optimize database performance, write SQL queries on a fly, generate meaningful test data, and much more. The solution includes a dozen definitive add-ins that can turn the basic SQL Server Management Studio into a powerful platform allowing users to cope with any database task. 

Learn more about dbForge SQL Tools Standard Edition at the Devart official blog – https://blog.devart.com/meet-new-standard-edition-of-sql-tools.html 

**About Devart**

Devart is one of the leading developers of database tools and administration software, ALM solutions, data providers for various database servers, data integration and backup solutions. The company also implements Web and Mobile development projects.
For additional information about Devart, visit https://www.devart.com/.
Daily Challenge #258 - Ranking Poker Hands
Tags: challenge
Published: 2020-06-15 14:42:02

---
title: Daily Challenge #258 - Ranking Poker Hands
published: true
series: Daily Challenge
description: Create a poker hand that has a method to compare itself to another poker hand.
tags: challenge
//cover_image: https://direct_url_to_image.jpg
---
A famous casino is suddenly faced with a sharp decline of their revenues. They decide to offer Texas hold'em also online. Can you help them by writing an algorithm that can rank poker hands?

Create a poker hand that has a method to compare itself to another poker hand:
`PokerHand.prototype.compareWith = function(hand){...};`

A poker hand has a constructor that accepts a string containing 5 cards:
`var hand = new PokerHand("KS 2H 5C JD TD");`

The characteristics of the string of cards are:
- Each card consists of two characters, where
- The first character is the value of the card: 2, 3, 4, 5, 6, 7, 8, 9, T(en), J(ack), Q(ueen), K(ing), A(ce)
- The second character represents the suit: S(pades), H(earts), D(iamonds), C(lubs)
- A space is used as card separator between cards

The result of your poker hand compare can be one of these 3 options:
```
var Result = 
{
    "win": 1,
    "loss": 2,
    "tie": 3
}
```

**Notes**
- Apply the Texas Hold'em rules for ranking the cards.
- Low aces are NOT valid in this challenge.
- There is no ranking for the suits.

**Examples**
("2H 3H 4H 5H 6H", "AS AD AC AH JD") => WIN "Straight flush wins of 4 of a kind" 
("2H 3H 4H 5H 6H", "KS AS TS QS JS") => LOSS "Highest straight flush wins"

**Tests**
("2H 3H 5H 6H 7H", "2S 3H 4H 5S 6C")
("2S 3H 4H 5S 6C", "3D 4C 5H 6H 2S")
("2S AH 4H 5S KC", "AH AC 5H 6H 7S")

Good luck!
***
_This [challenge](https://www.codewars.com/kata/5739174624fc28e188000465/discuss#5ee768cb36d27d001aa09b0f) comes from FrankK on CodeWars. Thank you to [CodeWars](<https://codewars.com/>), who has licensed redistribution of this challenge under the [2-Clause BSD License](<https://opensource.org/licenses/BSD-2-Clause>)!_

_Want to propose a challenge idea for a future post?  Email **yo+challenge@dev.to** with your suggestions!_
My issues regarding my personal website (media Queries)
Tags: responsive, html, css, mobilefirst
Published: 2020-06-15 14:31:17

I'm getting in the habit of documenting my work.

I have been working on my portfolio site for the past 2 months now; I'm practically finished with the code only a few thing left but for the past couple of days I've been having an issue making the site responsive for small devices. I purposely been procrastinating.
I think that i'm doing it all wrong and I am at the point of giving up.

Still trying to figure out where did I went wrong, I used 
**@media screen and(max-width: 480px)**.

********

##List of Issues

1. Width
  * The width is not fluid and there is an overflow on the X axis.
  * Content doesn't align properly when width of screen changes below 480px.

2. Height
  * I have to keep changing the View Height if I change width. No synchrony.

3. Images
  * the site uses svg content, they stay in place but doesnt scale down correctly and sometimes they disappear.

and these are the main issues among many others.
I used flexbox.

***********

If you can have any suggestions, links, and videos please feel free to share. I'm making this a thread to follow up with my journey until the release of my website. 

You can also follow me on twitter @ <https://www.twitter.com/WebDev_Chen>
Committing to 100 Days Of Code
Tags: 100daysofcode
Published: 2020-06-15 14:29:29

I'm publicly committing to the 100DaysOfCode Challenge starting today!
[Learn More and Join me!](https://100DaysOfCode.com)

My [GitHub Log](https://github.com/glitching-world/100-days-of-code)

### Day 1 Log 15/Jun/2020 #100DaysOfCode

What did I do?
So for a start and to do something visual to boost my morale I decided to redo an old thingie I like to call a pixelate tool. Here is and image of what it ca do:

![Pixel Rebooted Example](https://dev-to-uploads.s3.amazonaws.com/i/rhhnjfvgha30gvzzjhuv.png)

Code can be found at my [GitHub Log](https://github.com/glitching-world/100-days-of-code).
Unconditional Challenge: FizzBuzz without `if`
Tags: challenge, computerscience, functional, oop
Published: 2020-06-15 14:22:03

As the title says, make a classic FizzBuzz function or method without using `if/else` (or equivalents like ternaries, `?:`, sneaky).

Specifically:

1. The function should accept one argument, assume it will always be a positive integer.
2. The function should return a string (or something coercible into a string in loosely typed languages) according to the following rules:
    1. If the given number is divisible by `3`, then return `Fizz`
    2. If the given number is divisible by `5`, then return `Buzz`
    3. If the given number is divisible by both `3` and `5`, then return the combination `FizzBuzz`
    4. If the given number is none of those things, then return the given number

The expected outputs for the first fifteen numbers in order is:
```
1,2,Fizz,4,Buzz,Fizz,7,8,Fizz,Buzz,11,Fizz,13,14,FizzBuzz
```

# Hard mode

Do this without "secret" conditionals like `||` and `&&` (in loosely typed languages like JavaScript) or `null` coalescing operators like `??` or `null` safe operators like `?.` or `&.`.

Also no looping constructs that could be abused into a conditional like `while` or `for`.

# Hint number 1

I tagged `functional` on this post because functional programming can be used to solve this.

# Hint number 2

I tagged `oop` on this post because the original object oriented concepts of message passing can be used to solve this.

---

Post below with your answers!

Think this is impossible? I'll post my own answers in both FP and OOP styles next week.

_(If you were hoping for the next installment of my [With Only CSS](https://dev.to/kallmanation/styling-a-checkbox-with-only-css-3o3p) series, styling radio buttons, that's coming on Monday, [follow me](https://dev.to/kallmanation) so you won't miss it!)_
Python Zero to Hero - Ep.11 - Python property-based testing
Tags: python, beginners, tutorial, testing
Published: 2020-06-15 14:20:15

---
title: Python Zero to Hero - Ep.11 - Python property-based testing
published: true
description: We have been trying out some property-based tests in Python with Hypothesis. We tried to test on real functions in popular Python libraries.
tags: python, beginner, tutorial, testing
---
We have been trying out some property-based tests in Python with Hypothesis. We tried to test on real functions in popular Python libraries. If you have any questions or any suggestions about which Python topics to cover, please leave your comment at my [Twitch channel](https://www.twitch.tv/cheukting_ho)

You can get the slide deck [here](https://slides.com/cheukting_ho) and the example code and homework form [GitHub here](https://github.com/Cheukting/python02hero). Ask questions at my [Twitch channel](https://www.twitch.tv/cheukting_ho)
VirtualizedList: missing keys for items
Tags: react, reactnative, webdev, javascript
Published: 2020-06-15 14:05:55

---
title: VirtualizedList: missing keys for items
published: true
description: This error message plagued me for a few minutes. The solutions I looked at delved into creating a custom keyExtractor.
series: React-Native Mobile
tags: React, ReactNative, WebDev, JavaScript
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/2ub2vjgjptw4d7tgjlxa.png
---

> VirtualizedList: missing keys for items, make sure to specify a key property on each item or provide a custom keyExtractor.

This error message plagued me for a few minutes. The solutions I looked at delved into creating a ***custom keyExtractor***. I'll show that solution later; what I found was that I was missing one part in the declaration of my `renderItem` function.

## The Code

```javascript
// The function to render
renderItem = (item) => { };

// Usage within render
<FlatList data={data} renderItem={this.renderItem} />
```

## The Solution

This is the solution that ultimately worked for me; there was another solution that will show later that I think would have worked and would have masked the true issue.

The solution is actually in the parameter definition of the "function to render" above. I changed the code, as follows ...

```javascript
// The function to render
renderItem = ({ item, index }) => { };
```

No other code changed. The error message listed above went away.

## The Alternate Solution

The `keyExtractor` solution looks like this ...

You need a `keyExtractor` parameter. By default it will check to see if the item has a key property (which you don't that why you are getting this message).

> Used to extract a unique key for a given item at the specified index. Key is used for caching and as the react key to track item re-ordering. The default extractor checks item.key, then falls back to using the index, like React does.

Do this:

```javascript
_keyExtractor = (item, index) => item.id.toString();

<FlatList data={this.state.list} renderItem={this.renderItem}
   keyExtractor={this._keyExtractor} />
```

## Summary

The first solution fixed my issue. The second solution would have gotten rid of the error message, but I believe it is MUCH more complicated and can hide what is truly going on in the code.
Some Tips and Tricks To Making Your Website Look Nicer(for css beginners)
Tags: css, html, webdev, beginners
Published: 2020-06-15 13:51:00

#Hey!
You're making a website, and you want it to look good, but you don't know how. Here's a helping hand, I'm sure this will be a helpful guide to building good looking websites.

#If You Haven't Done So Start From The Beginning.
Before you do anything start with html. Most things that you can do using css and javascript that are actually important for your website you can do with html. After you've reached the extent of your html knowledge and the information available to you, stop using html.

>Wait, what?

Yeah, use markdown instead. Learning markdown is way easier than html. This post is written using markdown, and every post on DEV uses markdown. I'm not going to explain markdown basics, but markdown is eventually processed into html any way, so you can still use html in a markdown file(you likely won't need to do this often, markdown usually makes things easy). 

#CSS Time!
Okay, you want to style your Web App or Website. Here are the most important basic tips.

###Common Sense Tips:
1. Don't use thick borders
2. Don't colour your borders
3. Use online tools to help:
   <ul>
      <li>online colour pickers</li>
      <li>online blenders</li>
      <li>free css dividers(must be able to copy and paste code)</li>
      <li>free basic css animations</li>
   </ul>

4. some unique design

###Smartie Tips:
1. Use svgs over other image types
2. Use classes for all animations and effects
3. Make some of the effects on hover or mouseover
4. Use scrolling/scrollbar effects(ex. a progress bar at the top)
5. Use css variables for your colours
6. Have a dark and light mode(not always applicable)
7. If your website has a functional usage, like a calculator or IDE, make a quick skippable UI tutorial
8. Make your title text change if the visitor does something, like leaving.

>Okay that was a lot of things I should do, how do I do them?

[Here's a link to a website I made in about a day or two using some of the things I've mentioned.](https://cool-website--oreolad2.repl.co/)

Here are two posts that will likely give you a boost:
1. [40+ High Quality Free Resources for Web Development](https://dev.to/jfelx/40-high-quality-free-resources-for-web-development-10o3)
2. [50+ free tools and resources to create awesome user interfaces ](https://dev.to/davidepacilio/50-free-tools-and-resources-to-create-awesome-user-interfaces-1c1b)

#Time To Get Coding!
Get to it!
![](https://lh3.googleusercontent.com/proxy/QFX2cONse3pLpEgQVMQCaH6ICSykGfEpEwjxpV4f4ULlj7LM1aoKreQplOftZY7yjTyCBrKrbtfIzW_XKHqJYyCdaVZN_X-RIJb0Q7iaFQwnRZMAFkFTLpWf_egXlGNKh7X-WnL3EyMSgkhBFoFclAYbVBkKXh0GhJE)
What is my MEML project?
Tags: webdev, html, showdev
Published: 2020-06-15 13:48:21

When developing websites, the most prominent cause of issues is the tags. If you are forced by a corporation to use a code editor with no autofill tools, it can be a pain. Even then, we all have pains when trying to use HTML to develop. Sure, some might like frameworks such as Pug, but others do not. Some people want a web development language that gives them control, readability, fervor, without writing a billion lines of HTML. I took it upon myself to make this happen, so I am now building web LISP. I call it MEML, Minimal, and Efficient Markup Language.

Not much information is out at this time, but imagine LISP for websites. Some design work still needs to be done for the language. MEML utilizes JavaScript and Sass to build a website. JavaScript is for the translator to work, and Sass to add the functionality in extra tags.

Here is an example `index.meml` file:
```
// Yeah this is basically LISP HTML
(head
    (charset "UTF-8")
    (viewport 1)
    (title "This is MEML"))
(body
    (p "Welcome to MEML"))
```

Here is if that same `index.meml` file was translated to `index.html`:
```
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>This is MEML</title>
    </head>
    <body>
        <p>Welcome to MEML</p>
    </body>
</html>
```

The difference is staggering.