teleren/devto huggingface dataset:
Mistakes made by web designers
Tags: html, css, javascript, beginners
Published: 2020-06-03 14:13:33

**Mistake #1: Fonts that are too small**;

The first mistake people make is creating a site with fonts that are too small.

The reason for this is that, back in the day, most websites had small fonts. The standard was somewhere around 12px (9pt), and nearly everyone followed that standard.

But, over time, people started to realize that 12px fonts are hard to read online. When a screen is 24 inches from someone’s face, small fonts make it difficult to read.

People also started to realize that you have only a limited amount of time to get visitors, attention and let them know they’re in the right place. One study even states that the average attention span is 8 seconds, one second less than the average attention span of a goldfish. A similar study states that people read only 28% of the words on an average web page.

In order to get people’s attention right away, you need to do the following:

1. Compose great headlines that grab readers’ attention.

2. Write interesting content that will get them to read more than 28% of 
   what you’ve written.

3. Use headline fonts that are big enough to demand attention.

 4.Make sure body fonts are large enough to read so readers don’t give up 
   because they’re tired of squinting.
For all the reasons mentioned above, font sizes have increased over the last few years to the point that many view 16 px as the very minimum font size, and many sites go even bigger with 18 px as a minimum, especially when a lot of reading is involved.

Here are some examples of exceptional web design with great font sizes;

[Help Scout Blog](https://www.helpscout.com/blog/)

Intro text: 26 px
Body: 19 px

The point to keep in mind is that the purpose of writing copy is to get it read. When you pay a writer good money or painstakingly write website copy yourself, you want to make sure it gets read and doesn’t get hidden by a small font that makes the copy difficult to read.

You also need to remember that not all fonts are the same size. A 16 px Arial font can be smaller than a 16 px version of another font. This is something you need to be aware of when choosing a font size, so you don’t arbitrarily pick 19 px because another site did, only to find out your 19 px version isn’t as big.

Keep in mind that footer fonts can be on the smaller side and so can subtext, but if you’ve written something you want people to read, consider using a 16 px font at a minimum. And, in case you don’t want to take my word for it, Smashing Magazine preaches the same thing in this article: A Reference Guide For Typography In Mobile Web Design.

**Pro tip**: In order to get a feel for the size font you’d like to use, based on websites you like, download the WhatFont extension for Google Chrome. It’s a Chrome plugin that makes it really easy to click on fonts in order to find out what font type and size a website is using.
[*Thanks*](ksl313.com)
Daily Challenge #252 - Everybody hates Mondays
Tags: challenge
Published: 2020-06-03 13:21:52

---
title: Daily Challenge #252 - Everybody hates Mondays
published: true
series: Daily Challenge
description: So how many of these horrible days does someone have to endure? 
tags: challenge
---
Nobody likes Mondays! You spent the weekend partying and hanging out with friends, and then Monday comes, and you have to get up early, put on some business clothes and go to work. So how many of these horrible days does someone have to endure? Well, let's find out.

Create a method to find the number of Mondays given a person's birthday and the current date. Do not worry about holidays/vacation, sick leave etc. Assume a person has a job and goes to work throughout a year if they are of working age. To keep things simple, assume someone starts working when they are 22 years old and retires when he/she is 78. That's right, Mondays don't count as bad days if you are at school/university or a pensioner! And although not having to work on the weekends is a rather recent fad (look it up!) assume that Mondays where and will always be bad days at any era.

###Examples
`Mondays.count(LocalDate.of(1995, 4, 3), LocalDate.of(2017, 4, 3))`
 => 1 Monday

`Mondays.count(LocalDate.of(1995, 4, 2), LocalDate.of(2018, 4, 2))`
 => 53 Mondays

###Tests
`Mondays.count(LocalDate.of(1700, 9, 20), LocalDate.of(1762, 9, 26))`
`Mondays.count(LocalDate.of(-300, 12, 20), LocalDate.of(-258, 12, 22))`
`Mondays.count(LocalDate.of(1000000, 2, 25), LocalDate.of(1000022, 12, 28))`

***
_This [challenge](https://www.codewars.com/kata/58e004f995923fd6470000ca) comes from shadowmanos 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!_
How to Solve: "ERROR: unsatisfiable constraints (python)"
Tags: python, docker, alpine, pip
Published: 2020-06-03 14:09:20

When try to install python2:
```
apk add --update --no-cache build-base python2-dev python libffi-dev libressl-dev bash git gettext curl
```

Get this Error:
```
fetch http://dl-cdn.alpinelinux.org/alpine/v3.12/main/x86_64/APKINDEX.tar.gz
fetch http://dl-cdn.alpinelinux.org/alpine/v3.12/community/x86_64/APKINDEX.tar.gz
ERROR: unsatisfiable constraints:
    python (missing):
      required by: world[python]
```

To solve change `python2-dev python` to `python3-dev python3`, E.g.:

```
RUN apk add --update --no-cache build-base python3-dev python3 libffi-dev libressl-dev bash git gettext curl \
 && curl -O https://bootstrap.pypa.io/get-pip.py \
 && python3 get-pip.py \
 && pip install --upgrade six awscli awsebcli
```
Automated Software Security Testing for Devs
Tags: security, testing, devops, programming
Published: 2020-06-03 13:56:00

> Learn about the current approaches and tools of software security testing that you and your team can set up and automate to make your apps more secure. 🔐

At [Cossack Labs](https://www.cossacklabs.com/), we build data security and encryption software. Taking care of mitigating threat vectors for our customers, we can not give any chance for weaknesses in our software. 

We test a lot. Each PR, each build, each release is being automatically tested to find security issues early on.

That's why, over the years, **we have developed an arsenal of approaches** to find and prevent defects early in the security software development process. 

In this article, we share what to look at, how to spend effort and “shift security left”, and which tools to use.

As in August’22 we heavily updated the article, please find the new version in an engineering blog post on our website: [https://www.cossacklabs.com/blog/automated-security-testing/](https://www.cossacklabs.com/blog/automated-security-testing/)

[![Introduction to automated security testing, by Cossack Labs](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/51x0cv96dcja7bwaezrx.png)](https://www.cossacklabs.com/blog/automated-security-testing/)
🔥 Quick Tip: How to give an array of promises and only return after all either fulfilled or rejected
Tags: javascript, tutorial, devtips, webdev
Published: 2020-06-03 13:54:11

On this simple trick, I'll show you how to give an array of promises and only return after all either fulfilled or rejected.

```js
const promises = [
  Promise.resolve({ name: 'Mikkel' }),
  Promise.resolve({ name: 'Jonas' }),
  Promise.resolve({ name: 'Adam' })
];

Promise.allSettled(promises).then(results => {
  console.log('All Promises Settled', results);
  /**
    'All Promises Settled' [
      { status: 'fulfilled', value: { name: 'Mikkel' } },
      { status: 'fulfilled', value: { name: 'Jonas' } },
      { status: 'fulfilled', value: { name: 'Adam' } }
    ]
  **/
});
```

Note: You can use this feature with babel or another compiler enabling the ES2020 features.

---

Did you like it? Comment, share! ✨
Welcome Thread - v76
Tags: welcome
Published: 2020-06-03 13:50:01

---
title: Welcome Thread - v76
published: true
description: Welcome to DEV! A thread of hellos and intros.
tags: welcome
---

![wassup](https://media.giphy.com/media/9rnvF4eLKXaBqxhdzL/giphy.gif)

### Welcome to DEV!

1. Leave a comment below to introduce yourself! You can talk about what brought you here, what you're learning, or just a fun fact about yourself.

2. Reply to someone's comment, either with a question or just a hello. 👋 

**Great to have you in the community!**
BINARY SEARCH Explained in 5 minutes! Your quick Computer Science Dose!
Tags: computerscience, tutorial, javascript
Published: 2020-06-03 13:44:36

Hey Everyone!

In this video, I talk us through the algorithm - Binary Search! 

In 5 minutes, we cover some cool facts about Binary Search, as well as two use cases, one even being a MAGIC TRICK that you might have seen before and wondered how it's done! 

I even show you one example from the book by Aditya Bhargava, Grokking Algorithms, to show you the power of numbers.


{% youtube ttiofs3n_hA %}
What can I build for my family?
Tags: discuss, webdev, development, help
Published: 2020-06-03 13:41:39

I want to build a **mobile** application for my family. Probably it'll be a Web application since the Web represents the fastest way for me to build something for them. The problem is that I can't find any idea. It could be anything simple, from a to-do app shared between us to a custom weather application. Do you have any ideas? What do you think would be a useful app for your family? Let me know! 😁
New gatsby github readme component
Tags: react, gatsby, npm, javascript
Published: 2020-06-03 13:36:58


[gatsby-plugin-github-readme](https://github.com/teaglebuilt/gatsby-plugin-github-readme)

This is a new component for gatsby that renders a preview of a github readme that is very similiar to dev.to. There are a few additions like the language bar but ultimately i followed the same design princibles. 

So this is not an ordinary remark or source plugin. Its simply a react component package. The github data is fetched on the gatsby build. So all you have to worry about is how you want to render your readme, in jsx, remark, or mdx?

This npm package is new and still undergoing testing to please feel obligated to leave issues as questions, problems, or suggestions.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/8kek2xpbg3smh9lo7sqh.png)
Web Development Portfolio Show
Published: 2020-06-03 13:31:58

I am pleased to announce our first online portfolio show.

We are showcasing the hard work of a great group of students.

They are looking for internships - remote internships - so if you need a talented pair of hands - consider hiring a Web development student.

Come and meet the new talent!

You can register at Eventbrite -

https://humber-web-development-portfolio-show.eventbrite.com
VBScript Vs JavaScript
Tags: javascript, node, vbscript, frontend
Published: 2020-06-03 13:26:23

Main differences between VBScript and JavaScript
 
It is a fact that both languages are quite popular at present in the market. Let us talk about some of the main differences between the two.


1. JavaScript does not support subroutines and inheritance concept, and therefore, it cannot be considered to be a genuine scripting language which is object-oriented. However, JavaScript development services do support the use of an object.

On the contrary, VBScript does not support object usage, inheritance, and class usage; however, subroutines and reusable functions are supported by it. As a result, it is likewise not a genuine scripting language that is object-oriented.

2. For the majority of the browsers, JavaScript happens to be the default scripting language. On the other hand, VBScript cannot be considered to be a scripting language by default and it has to be mentioned as a scripting language.

3. JavaScript happens to be a scripting language which is case-sensitive; however, VBScript cannot be considered to be a case-sensitive scripting language.

4. There is a lot of similarity between the JavaScript syntax and the C programming language. On the contrary, the syntax of VBScript is identical to that of Visual Basic.

5. While JavaScript can be used as a client-side scripting language, it is possible to use VBScript as a client-side as well as server-side scripting language.

6. The identical operator is used by JavaScript for various operations while VBScript makes use of different operators.

Read more about JavaScript & VBScript here: http://rlogicaltechsoft.blogspot.com/2020/06/vbscript-vs-javascript-what-is.html
Is Livecoin a trustworthy crypto exchange platform?

Tags: blockchain
Published: 2020-06-03 12:51:09

Livecoin exchange is a broad platform for cryptocurrency. This platform mainly deals in Bitcoin and Litecoin together with other digital currencies. The interface of Livecoin is automatic and simple which makes it easy for the traders at the starting level. Experienced traders can survey the multiple tools available for market analysis.

Many reviews believe that Livecoin exchange was founded by DELTA E-COMMERCE LTD from London, the UK in 2013.Their servers are in Metairie, Louisiana, US.

Livecoin Exchange features:
It provides the capability to directly exchange fiat currency for cryptocurrency.
It offers access to 490 crypto/fiat and crypto/crypto currency pairs.
Tiered fee structure guarantees less costs for high-volume traders.
Multilingual website and customer support.
Easy trading interface.

Livecoin Rewards:
Livecoin also has referral programs. The users can become associates or be accurate affiliates for Livecoin. The partners have to refer and recommend other users about the exchange and cryptocurrencies. Whenever a new user trades through referrals, the affiliate gains the reward.

Livecoin Security:
For enhanced security, Livecoin uses a cold storage system to safeguard users’ wallets. Two-factor authentication (2FA) system is also applied, as commonly done by many other cryptocurrency exchanges. Though Livecoin offers engaging and competitive features, it lacks necessarily transparency. 

Read more At https://coinpedia.org/exchange/livecoin/
JavaScript Debugging in PhpStorm
Tags: debugging, javascript, phpstorm, jetbrains
Published: 2020-06-03 12:42:21

Whenever we think of JavaScript debugging 🤔 **console.log**, **debugger**, **browser dev tools** are some terms that come up in our mind but have you ever thought of debugging JavaScript with IDE? 

This post will guide you to integrate JavaScript debugging in PhpStorm in no time.

####Lets get started...

###Step1 - Install JetBrains IDE Support extension
First of all, you need to install [JetBrains IDE Support] (https://chrome.google.com/webstore/detail/jetbrains-ide-support/hmhgeddbohgjknpmjagkdomcpobmllji?hl=en) extension for Google Chrome to debug client-side apps in any IDEs from JetBrains. 

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

After installing the extension, now you should see the JetBrains icon in your google chrome panel.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/8m93fa09w0007vrk1dc1.png)

###Step2 - Add JavaScript Debug configuration in PhpStorm
Click **Run|Edit Configurations...** from the menu which will open the dialog box and add configuration by clicking + icon and choose **JavaScript Debug** as a new configuration. Provide your **Name** for the configuration and **URL** for the server.

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

###Step3 - Start debugging
Choose the right debugging configuration and start debugging by clicking on the debug icon.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/2j0gjoaeoufxcbebdkry.png)

This will open your project in the new browser.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/eoymhc6etkzn3ik7feuv.png)

If you set the breakpoints, you would see the script stops at the breakpoints.

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


Congratulations! 👏 You have just integrated JavaScript Debugging successfully!

Keep on coding & keep on debugging 🐞
Try out Deno on Repl.it 🎉
Tags: deno, webdev, javascript, typescript
Published: 2020-06-03 12:39:20

> 💡 _Disclaimer: I have nothing to do with Repl.it or Deno.
    I'm just spreading the good news!_

You can now [try Deno in the browser on Repl.it](https://repl.it/languages/deno)!

To give it a shot, go to the link above and try pasting in some Deno, and click _Run_ at the top.

I wrote [a quick example](https://repl.it/@bendman/VagueUnnaturalOmnipage) that uses Typescript types (`ms: number`) and and async/await:

```typescript
/** Build a promise to wait for `ms` milliseconds */
const sleep = (ms: number) => new Promise(res => setTimeout(res, ms))

/** Count seconds from 1-10 */
void (async () => {
  let x = 0
  while (x < 10) {
    x++
    console.log(x)
    await sleep(1000)
  }
})()
```

As a bonus, Repl.it also supports intellisense using Typescript types and docblock comments. You can see below how it has picked up the signature and description of the `sleep` function when I hover over it:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/fqc83aocjb4tig4kq2qv.png)
What did you do last year that was a game changer in your coding journey?
Tags: motivation, developer, discuss, beginners
Published: 2020-06-03 12:27:43

---
title: What did you do last year that was a game changer in your coding journey?
published: true
description: Curated answers to a question from the Code Connector community Slack channel.
tags: #motivation #developer #discuss #beginners
//cover_image: ![Two developers in front of a calendar](https://dev-to-uploads.s3.amazonaws.com/i/d3b72d9z3y9r13xnk7dz.jpg)
---

The [Code Connector](https://codeconnector.io/) community responded with these Wonderful Answers:

1. https://hacktoberfest.digitalocean.com/ It just isn’t that hard to be helpful to others when it comes to code, no matter what your experience is. It was a fulfilling experience that I want to continue doing more of.

2. Worked with Ted Patterson to build a mobile application with React Native. This opened the world of mobile development to me.

3. I bought a dev domain and started learning JavaScript/Node well enough to build a custom resume site. Bryan Robinson turned me on to 11ty and self hosting a blog. Since then I've published 21 posts with most of them already published on dev.to . Writing about my development journey and has led to me better understanding myself, my brand, and my value.

4. Taught a boot-camp…One of the best decisions I ever made

Code Connector Contributors: Corey McCarty, James Quick

[Code Connector](https://codeconnector.io/) is a non-profit that's organized tech meetups to help people start their journey into tech. You can join our daily conversations by joining the [Code Connector slack channel](https://bit.ly/2Ywnzqc).
Browser extension dev noob: documenting my journey
Tags: startup, javascript, laravel
Published: 2020-06-03 12:20:40

Browser extension development is a new challenge for me. Apart from the one time trying out a "Hello world" tutorial, browser extension is a new world to me (I'm primarily a PHP developer). 

For this project I'm going to build a tool for bookmarking tweets and organising them into folders. I personally have needed this tool and a quick research on Twitter showed that lots of people are asking for this too. 

It is aimed primarily at power Twitter users who tend to bookmark their tweets a lot, perhaps for research. There are various other ideas for other related useful features, but I'm starting with the core feature, which is bookmarking and organising tweets.

I'll be posting progress here as much as I can, or you can also follow me on Twitter at https://twitter.com/farez.

Farez
Handy VAT calculator on JS
Tags: vat, calculator
Published: 2020-06-03 12:12:26

I want to show you a handy VAT calculator written on JS that I did in a few minutes. With this VAT calculator you can easily find out [how much VAT you need to pay](https://vatulator.co.uk/)

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

First, make HTML markup:
```html
<div id="calc">
<div>
<label for="vat_rate">Rate of VAT, %</label>
<input type="number" step="0.01" min="0" id="vat_rate" size="30" value='23'>
</div>         
<div>
<label for="net_price">Net price (exclude VAT), €</label>
<input type="number" step="0.01" min="0" id="net_price" size="30" value>
</div>
<div>
<label for="gross_price">Gross price (include VAT), €</label>
<input type="number" step="0.01" min="0" id="gross_price" size="30" value>
</div>
<br>
<div>
<label for="tax_amount">VAT amount, €</label>
<input type="number" step="0.01" min="0" id="tax_amount" size="30" value>
</div>
</div>
```

Then we create input event handlers

```javascript
function net_change() {
    set_variable();
    gross_price.value = (net_price.value *(1+(vat_rate.value/100))).toFixed(2);
    tax_amount.value = (gross_price.value - net_price.value).toFixed(2);
    lastFunction = 'net';
    }
    
    function gross_change() {
    set_variable();
    net_price.value = (gross_price.value / (1 + (vat_rate.value/100))).toFixed(2);
    tax_amount.value = (gross_price.value - net_price.value).toFixed(2);
    lastFunction = 'gross';


    }
    
    function amount_change() {
    set_variable();
    net_price.value = ((tax_amount.value / vat_rate.value) * 100).toFixed(2);
    gross_price.value = (+net_price.value + +tax_amount.value).toFixed(2);
    lastFunction = 'amount';
    }
    
    
    function rate_change() {
        if (lastFunction === 'net') {
        net_change();
	    }
        else if (lastFunction === 'gross') {
            gross_change();
        }

        else {
            amount_change();
        }
    }

```

Determine the values from inputs
```javascript
function set_variable(){
        var vat_rate = document.getElementById('vat_rate');
        var net_price = document.getElementById('net_price');
        var gross_price = document.getElementById('gross_price');
        var tax_amount = document.getElementById('tax_amount');
    }
```

And add eventlisteners to these fields


```javascript
var vat_rate = document.getElementById('vat_rate');
    var net_price = document.getElementById('net_price');
    var gross_price = document.getElementById('gross_price');
    var tax_amount = document.getElementById('tax_amount');
    var lastFunction = 'none';
    document.getElementById('gross_price').focus();


    vat_rate.addEventListener("input", rate_change, false);
    net_price.addEventListener("input", net_change, false);
    gross_price.addEventListener("input", gross_change, false);
    tax_amount.addEventListener("input", amount_change, false);
```

If you have comments or suggestions I will be glad to see them in the comments under this post
Simple way set watermark background image with SVG
Tags: javascript, css, awesome
Published: 2020-06-03 12:10:05

---
title: Simple way set watermark background image with SVG
published: true
description: I have set background image with watermark in my team.
tags: Javascript, CSS, Awesome
---

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/9adjqss63ira15xu2l6p.png)

If you set page background with watermark like post screenshot. you can follow my code :)

```javascript

// js

const markTemplate = (name) => {
  return `<svg xmlns='http://www.w3.org/2000/svg' version='1.1' height='100px' width='100px'><text transform='translate(20, 100) rotate(-45)' fill='rgba(45,45,45,0.08)' font-size='18'>${name}</text></svg>`;
};

const base64Mark = btoa(markTemplate("ihavecoke"));

document.body.style.backgroundImage = `url("data:image/svg+xml;base64,${base64Mark}")`;

``` 

All is done, you can copy code then paste to chrome devtools **console** tab run it. `dev.to` background will changed :) 

Refactor `marketTemplate` method custom more SVG attributes like **font-size**, **width**, **height** etc aslo good idea.

If you need same features hope help you :)


> PS: You can found online [Demo](https://codepen.io/ihavecoke/pen/abdbENX)