teleren/devto huggingface dataset:
May 3 — Daily CodeNewbie Check-in Thread
Tags: codenewbie, checkin, beginners, discuss
Published: 2020-05-03 15:34:58

---
title: May 3 — Daily CodeNewbie Check-in Thread
published: true
description: A daily thread to ask questions, share progress, and stay accountable!
tags: codenewbie, checkin, beginners, discuss
series: Daily Checkin
---

You are encouraged to use this daily thread to:
- Ask for help (all questions encouraged)
- Explore topics you’re curious about
- Share something you’ve written or read
- Celebrate your wins
- Stay accountable to your goals
- Support your fellow programmers

Happy Coding!

---

_Interested in joining the twice-weekly live [#CodeNewbie Twitter chats](https://twitter.com/search?q=codenewbie)?  You can find us [on Twitter](https://twitter.com/search?q=codenewbie) each Wednesday at 9pm ET (1am GMT on Thursday) and Sunday at 2pm ET (6pm GMT)!_
Programming your Telegram bot to fetch Document content with Telegraf API
Tags: node, telegraf, javascript, chatbot
Published: 2020-05-03 15:29:39

While working on [send4me](https://github.com/szenius/send4me), a message scheduler bot on Telegram, I ran into the question of how my bot can fetch the contents of a document uploaded by a user. I couldn't find a complete example for this use case anywhere, so I put together what worked for me.

![A simple demo for fetching Document content](https://drive.google.com/uc?id=133SA1SPdhIzHi0Qwryvqyh4lG8gRupNR)
<figcaption>A simple demo for fetching Document content</figcaption>

The following code snippet recreates the demo above. We will assume that you have already [created a bot with BotFather and obtained your bot token](https://www.sohamkamani.com/blog/2016/09/21/making-a-telegram-bot/#set-up-your-bot).

```js
const Telegraf = require('telegraf');
const axios = require('axios');

const BOT_TOKEN = ''; // TODO: get from BotFather

const bot = new Telegraf(BOT_TOKEN, {
  polling: true,
});

bot.start((ctx) => ctx.reply("Hello! Upload any document and I'll read it for you~"));

bot.on('document', async (ctx) => {
  const {file_id: fileId} = ctx.update.message.document;
  const fileUrl = await ctx.telegram.getFileLink(fileId);
  const response = await axios.get(fileUrl);
  ctx.reply('I read the file for you! The contents were:\n\n' + response.data);
});

bot.launch();
```

This should work for simple text files. For more complex files, `response.data` will need to be parsed before their content is usable.
How do Web Browsers work?
Tags: javascript, webdev, html, beginners
Published: 2020-05-03 15:20:55

The Web Browser is inarguably the most common portal for users to access the web. The advancement of the web browsers (through the series of history) has led many traditional “thick clients” to be replaced by browser enhancing its usability and ubiquity.

Critical Rendering Path, Render Blocking Resource, Speculative Parsing, and Structure of Web Browsers.

For more details:
[How do Web Browsers work](https://medium.com/@bibekshah09/how-do-web-browsers-work-1245d5b06c51)
Symmetric Difference between two arrays in Vanilla JavaScript 🥓
Published: 2020-05-03 15:19:08

If you want to find the elements belonging to one *but not both* of two given sets, you are looking for the .. **symmetric difference**!

In this tutorial we will build a function that calculates the symmetric difference between two given arrays, after applying a provided function to each item in both arrays.

You will learn about:
- `Set` objects (ES6 set of unique item)
- `map()` and `filter()` methods to loop through arrays.

![symmetric diff](https://i.ibb.co/XXn0m7V/diff.png)

Let's say we have two arrays containing decimals numbers and we want to check if there are values which are not in both arrays after rounding them off downwards:

```javascript
getSymmetricDifference([2.66, 3.44, 7.123], [2.44, 2.67, 6.48], Math.floor); 
```

The first thing we want to do is place our arrays inside `Sets`. The `Set` object lets us store values of any type, whether primitive values (data that is not an object) or object references. **A value in a set may only occur once**, which is useful for us.  

We could just put our array inside the `Set()` parameters but we want to apply the given function on each item. So we'll use the map method to create a new array populated with the results of calling the function on each item:

```javascript
const getSymmetricDifference = (a, b, fn) => {
  const setA = new Set(a.map(item => fn(item)));
  const setB = new Set(b.map(item => fn(item)));
}
```

Our variables `setA` and `setB` are now containing only the unique, rounded off values of our given arrays.

Next up we want to filter out any values that exists on both arrays. To do this we'll run the `filter()` method on array A with the question if any item exists on set B and do the same for array B with set A. 

This *question* will be answered with the `has()` method of `Set` that returns a boolean if this item exists inside the set. Using the `!` (bang operator) we only include the `false` values.

```javascript
...
const aFiltered = a.filter(item => !setB.has(fn(item)));
const aFiltered = b.filter(item => !setA.has(fn(item)));
...
```

Great! The only thing we have to do now is return an array containing both our `aFiltered` and `bFiltered` arrays. We can do this easily with the spread operator:

```javascript
...
return [...aFiltered, ...bFiltered]
...
```

Then we'll refactor our code a bit to make it cleaner by putting our variables on one line and directly returning the combined array:

```javascript
const getSymmetricDifference = (a, b, fn) => {
  const setA = new Set(a.map(item => fn(item))), setB = new Set(b.map(item => fn(item)));
  return [...a.filter(item => !setB.has(fn(item))), ...b.filter(item => !setA.has(fn(item)))]
};
```

That's it! We learned about the `Set` object, `map()` and `filter()` methods and other stuff of JavaScript. Have fun building things!

Make sure to follow me for more tutorials. 🧠
Skipping the Chrome "Your connection is not private" warning
Tags: trick, chrome, privacy, https
Published: 2020-05-03 15:14:39

---
title: Skipping the Chrome "Your connection is not private" warning
series: QuickBits
published: true
description: Simple trick to skip the unskippable "Your connection is not private" warning.
tags: trick,chrome,privacy,https
---

You guys might have encountered a warning saying that "Your connection is not private" while doing some web development. This tutorial is about how you can skip the same. (Feel free to skip the tutorial, if you are not using chrome or chromium-based browser)

You will get this kind of error usually when you are not using localhost as the domain for development. This is implemented to make your browsing experience more secure. If you are visiting a website via HTTPS and the server doesn't support it, you are vulnerable to the normal attacks that can happen when accessing a website via HTTP. You are vulnerable to the MIM (Man in the middle) attacks, these attacks a quite serious since it can gather private information like usernames and passwords from the victim.

But having this feature enabled while developing a web application is a headache. Organizations can set browser policies to prevent accessing such pages especially if you are using a machine provided by the company. The screen will look below:

![Certificate](https://dev-to-uploads.s3.amazonaws.com/i/qkrva33lpcgbcfbu85gh.png)

As you can see that there will be no skip button on this. The only way you can access the page is by setting up a correct certificate or launching the Chrome browser in insecure mode via flags.

But there is a **cheat code** you can use to skip this warning :smile: Just type **"thisisunsafe"** in the chrome warning message page. (Not in the address bar, just type it in the page) Boom! :bomb: You can see that the warning message disappeared.

![magic](https://media.giphy.com/media/YpZAFbpbswOIDNTuo4/giphy.gif)
To test this yourself you can visit: [https://self-signed.badssl.com/](https://self-signed.badssl.com/)

Congrats, You've just added a permanent exception for the corresponding domain for the SSL certificate check. :smile:

![wow](https://media.giphy.com/media/5VKbvrjxpVJCM/giphy.gif)

#### Technical details
- Chromium source code: https://chromium.googlesource.com/chromium/src/+/master/components/security_interstitials/core/browser/resources/interstitial_large.js
- Stackoverflow thread: https://stackoverflow.com/questions/35274659/does-using-badidea-or-thisisunsafe-to-bypass-a-chrome-certificate-hsts-error


Stay safe, Happy coding.... :mask:
6 Tips on Promoting your articles
Tags: techieankit, blogging, article, promotion
Published: 2020-05-03 15:07:15

6 Tips on Promoting your articles
Today's Topic: 6 Tips on Promoting your articles. A lot of people think that most of the work with article marketing is to write the article and send it somewhere. That is only part of the work that needs to be done. You need to promote your articles so that people will know they are out there. Here are some fun ways to make people head to your article and ultimately head to your site.

6 Tips on Promoting your articles

1- Use social media to promote your articles

Sites such as Twitter, Facebook, Reddit, and Tumblr are all great places to start. You amass friends and contacts through the common ground as you would do otherwise, and then you take the opportunity to share a link to your article with the title or another compelling reason to click. If you have already done that and want to try something else, you can also try searching these sites for people asking questions about your topic and directly contacting them with a link to your article.

2- Start blogging and link to yourself

If you have a blog, you know how to write already. You also have an outlet already. That means you can link to your own article. You can tell your blog readers why it is important to read your article, and you can offer to answer any questions or comments on the article itself to foster discussion.

3- Start a newsletter for your articles

Everyone checks email these days, and when you start a newsletter, you are given permission to deliver wonderful articles right to their virtual front door. If you are writing a lot of articles, the newsletter gives you an instant place to share them.
<a href="http://www.techieankit.in/2020/04/6-tips-on-promoting-your-articles_30.html/">Read More</a>
What was/is your "Against The Odds" situation
Tags: discuss
Published: 2020-05-03 15:06:18

I want to know what you accomplished (at any point) where everything was against you.

My situation was the entire time I worked on Ubuntu Lumina where I had to help my family move, deal with the isolation and depression, work against a billion issues making Ubuntu Lumina work, deal with mountains of doubt, and always on the verge of giving up. I thankfully didn't, and I got to the testing ISO where only two known issues need to be fixed at this time.
What’s your alternative solution? Challenge #33
Tags: challenge, javascript, codenewbie, learntocode
Published: 2020-05-03 15:05:29

# About this series

This is series of daily JavaScript coding challenges... for both beginners and advanced users.

Each day I’m gone present you a very simple coding challenge, together with the solution. The solution is intentionally written in a didactic way using classic JavaScript syntax in order to be accessible to coders of all levels.

Solutions are designed with increase level of complexity.

## Today’s coding challenge

```
Create a function that will add two positive numbers of indefinite size. The numbers are received as strings and the result should be also provided as string.

```

(scroll down for solution)

## Code newbies

If you are a code newbie, try to work on the solution on your own. After you finish it, or if you need help, please consult the provided solution.

## Advanced developers

Please provide alternative solutions in the comments below. 

You can solve it using functional concepts or solve it using a different algorithm... or just solve it using the latest ES innovations.

By providing a new solution you can show code newbies different ways to solve the same problem.

## Solution

```javascript
// Solution for challenge30a

var n1 = "2909034221912398942349";
var n2 = "1290923909029309499";
var sum = add(n1, n2);

println(n1, "\n", n2, "\n", sum);

function add(sNumber1, sNumber2)
{
    var s = "";
    var carry = 0;
    
    var maxSize = Math.max(sNumber1.length, sNumber2.length);
    
    for(var i = 0; i < maxSize; i++)
    {
        var digit1 = digitFromRight(sNumber1, i);
        var digit2 = digitFromRight(sNumber2, i);
        
        var sum = digit1 + digit2 + carry;
        var digitSum = sum % 10;
        carry = sum >= 10 ? 1 : 0;
        
        s = digitSum.toString() + s;
    }
    
    if (carry > 0)
        s = carry + s;
    
    return s;
}

function digitFromRight(s, digitNo)
{
    if (digitNo >= s.length)
        return 0;
        
    var char = s[ s.length - 1 - digitNo ];
    return parseInt(char);
}

```


To quickly verify this solution, copy the code above in this coding [editor](https://codeguppy.com/code.html) and press "Run".

> Note: The solution was originally designed for [codeguppy.com](https://codeguppy.com) environment, and therefore is making use of `println`. This is the almost equivalent of `console.log` in other environments. Please feel free to use your preferred coding playground / environment when implementing your solution.
Title, Cloud?
Tags: 100daysofcode, 100daysofcloud, gads, cloud
Published: 2020-05-03 14:44:45

1,5.

What I am I learning today?

For Some reasons I have Web Development: Executive Briefing in the Associate Cloud Engineer Foundations Channel (2020) so I am listening to it.

{% twitter 1256664381569429504 %}

JavaScript - ECMAScript
JSON - JavaScript Object Notation
AJAX - Asynchronous JavaScript and XML
Not sure if these are really that important to know or that I will remember them, but any ways I learnt it!

I learnt [how to get a LAMP stack running on a Google Compute Engine virtual machine instance](https://cloud.google.com/community/tutorials/setting-up-lamp).

I used Cloud Marketplace to quickly and easily deploy a LAMP stack on a Compute Engine instance. 
The Bitnami LAMP Stack provides a complete web development environment for Linux that can be launched in one click.
Hack your site
Tags: replit, html, javascript
Published: 2020-04-27 17:22:54

Do you know that you can hack your site by creating an iFrame?

{% replit @AndresHaro1/Testing-BugBunty-1 %}

As soon as you get into my repl code, I will invite you to check your site by inserting your URL into the next line "target.src= 'insert your URL'".

iFrames bring security risks, and usability issues:

Security Risks: 
1.- You may get a submittable malicious web form, phishing your users' personal data.
2.- A malicious user can run a plug-in.
3.- A malicious user can change the source site URL.
4.- A malicious user can hijack your users' clicks.
5.- A malicious user can hijack your users' keystrokes.

Usability Issues:
1.- It tends to break the browsers' "Back" button.
2.- It confuses visually impaired visitors, using screen readers.
3.- It confuses users, suddenly opening the iframe content in a new browser window.
4.- Content within the iframe doesn't fit in and looks odd.
5.- Content within the iframe is missing since the source URL changed.
6.- Navigation of the site in the iframe stops working. 
7.- Every <iframe> in a page requires increased memory and other computing resources.

Please let me know if you have some questions  or concerns and I would be more than happy to help you.
Draw Yu-Gi-Oh! Card on the command line
Tags: go, yugioh, cli
Published: 2020-05-03 14:25:37

I developed [cli tool to draw Yu-Gi-Oh! card](https://github.com/Doarakko/draw).
Because I am a duelist.

## Requirements

- Go

## Usage
### 1. install

```
$ go get github.com/Doarakko/draw
```

### 2. run
```
$ draw
```

## In conclusion

I used [Yu-Gi-Oh! API by YGOPRODeck](https://db.ygoprodeck.com/api-guide/) to get Yu-Gi-Oh! card image.

This is a [go client library](https://github.com/Doarakko/go-yugioh) for this api.
Please use it for developing various tools!

My turn! Draw!

![](https://doarakko.github.io/img/draw-sample.gif)
Windows 10 copy multiple paste - shortcut/multiple paste option
Tags: shortcut, windows10, copy, multiplepaste
Published: 2020-05-03 14:05:12

---
title: Windows 10 copy multiple paste - shortcut/multiple paste option
published: true
description: Windows 10 has introduced a new paste option by which user can copy multiple things and paste one by one.
tags: #shortcut  #windows10  #copy  #multiplePaste
---
Firstly, Select all the things you want to copy, one by one. Like given in the image below.

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

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

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

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

Secondly, After copying all the required things. Press Windows + v, to see the popup menu as shown below.

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

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

As a note: You can use this feature for image, link, etc. as well.

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

So, you don't have to copy-paste and again and again. Instead, just copy all together as shown above and paste one by one as desired. Its a unique feature by windows which I came across. I love sharing this with you all so that it would make your work easier and faster.

Stay tuned to know such unique featuers.
Laravel use Tailwindcss
Published: 2020-05-03 14:03:02

`yarn add tailwindcss --dev`
`npm install tailwindcss --dev`

`npx tailwindcss init`

webpack.mix.js

```javascript
mix.js('resources/js/app.js', 'public/js').postCss(
	'resources/css/main.css',
	'public/css',
	[require('tailwindcss')]
)
```

app.blade.php

```html
<link href="{{ mix('/css/main.css') }}" rel="stylesheet" />
```
The 6 Hidden Costs of Software Dependencies
Tags: npm, javascript, rails, architecture
Published: 2020-05-03 13:18:49

{% youtube rQegYUsU7ec %}

The ease of running `npm install x` masks the long-term costs of including software dependencies. In this episode, I go through my personal worst-of situations with the Ruby and JavaScript dependencies of Oxbridge Notes over a 10-year timeframe.  I talk about dependency hell, dependency deprecation/abandonment, how one dependency begets another, and how over-reliance of dependencies rob you of your ability to familiarize yourself with programming fundamentals, the stuff that doesn't change out from under your feet from year to year.
Manage Azure Web App Firewall through Azure Function
Tags: azure
Published: 2020-05-03 13:18:28

<sub>Photo by Emily Reimer on Unsplash</sub>

#The Issue

I was asked to frequently add or remove IP to an Azure Web Application firewall configuration, in a case where a restriction to a subnet is not an option. That's why i wanted to automate this task, in order to add a lifetime to the add. 

#The plan

After some thoughts, i come with the following plan:

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

##DemandValidation Azure Function

###Purpose

Validating request, and managing workflow of adding and removing IP.

###Description

It's a C# Azure Function exposing one Http input binding, requesting Azure Active Directory authentication. The workflow of add and removing IP is managed through a Durable Function.

The claims in the request must contains at least the ID of the allowed group, in order to trigger the logic. The configuration required to inject security groups into claims will be treated in a future post.

The message sent to the queue and record to the audit table contains:
- IP of the request
- date in the description
- a unique ID

##Audit Azure Table

###Purpose

Keep track of the demand, without exposing clearly any sensitive data linked to a person.

###Description

It's an audit log, with the capability of knowing if an IP has changed for a demand.

##Add / Remove Azure Storage Queue

###Purpose

It's a pipe to transfer request to the function having rights to manage firewall without exposing it.

###Description

It's 2 Azure queue serving as link between 2 Azure Function.

##DemandTreatment Azure Function

###Purpose

Treating requests in Add and Remove queue by invoking simple Powershell Core commands.

###Description

It's a Powershell Azure Function validating request (only one IP added), and applying it to the firewall. The priority used is a constant.

The Function identity is an Azure Managed Service Identity, which has a role to manage firewall configuration on the targeted Web Application.


Hope this helps !
UX is Hard | How to think with UX in mind
Tags: ux, design, graphics, ui
Published: 2020-05-03 13:14:45

UX design is hard.

This is because of user experience design requires you to understand your customer or client. Graphics design is hard, to begin with, but putting your mind into the head of a potential customer is doubly so.

{% youtube 6FaiCTgb7rc %}
<center>[Youtube: UX Design is Hard](https://youtu.be/6FaiCTgb7rc)</center>

A lot of the time, UX takes a back seat. You will be developing your overall system without much consideration. The goal will be to build an MVP, just get some graphics assets up and running, and for the bare essentials to work.

When websites or applications grow, they really have to consider User Experience. But doing so is even more difficult if you are the one designing or building the system. You know it inside and out, and this fundamentally changes the way you think about it.

The effect essentially means that you need fresh eyes sometimes to do good UX. A client or a customer will see your design and workflows differently when they are landing on a page for the first time.

Some things I noticed are core to good UX include:
* Change your mindset to that of a user/client
* Designing content so even someone who is drunk can navigate the system
* Testing your content with real-world users who haven't seen it before
* Performing surveys to get genuine feedback of what the UX was like
* Iterating and improving on your UX constantly

## Follow and support me: 
Special thanks if you subscribe to my channel :)
* [🎞️ Youtube](https://www.youtube.com/channel/UCvM5YYWwfLwpcQgbRr68JLQ?sub_confirmation=1)
* [🐦 Twitter](https://twitter.com/adrian_twarog)
* [💬 Discord](https://discord.gg/nGdThpE)
* [❤ Patreon](https://www.patreon.com/adriantwarog)

## Want to see more:
I will try to post new great content every day. Here are the latest items:
* [Adobe XD to Fully Responsive WordPress Site](https://dev.to/adriantwarog/adobe-xd-to-fully-responsive-wordpress-site-16e0)
* [Adobe XD to HTML Full Process](https://dev.to/adriantwarog/adobe-xd-to-html-full-process-ao6)
* [Full Tutorial on how to use SASS to improve your CSS](https://dev.to/adriantwarog/full-tutorial-on-how-to-use-sass-to-improve-your-css-57on)
* [Creating a Mobile Design and Developing it](https://dev.to/adriantwarog/creating-a-mobile-design-and-developing-it-5c4o)
Generating HTTP endpoints for MySQL database
Tags: showdev, node, database
Published: 2020-05-03 13:11:09

Here's a simple application I have written to generate HTTP endpoints for a given MySQL database; which is basically a way to expose your MySQL database as a RESTful API. This project is inspired by [php-crud-api](https://github.com/mevdschee/php-crud-api) which does the same thing but in a great and advanced way. I did this as an experiment to learn new things. At the moment it only supports GET requests. Let me know what you think and we can change it accordingly. 

https://github.com/SirwanAfifi/node-crud

Please give it a try. I would be glad If you would like to contribute.