teleren/devto huggingface dataset:
Recommended tools before Web development learning
Tags: beginners, html, css, javascript
Published: 2020-06-05 15:53:26

### Install nodejs
https://nodejs.org/en/download/
- will help u install lot of js modules to install eg: lite-server below 

### Setup lite server
https://www.npmjs.com/package/lite-server

- tool to run your site from html/js/css from your folder locally
- so a static file server
- automatically reloads your site on file changes

### Install git
https://git-scm.com/download/win

- to maintain versions of your files, to keep track.
- to clone and maintain repos or projects from your github account

Did I miss any other tools, please share whats your recommendations? or how did you get started ?
🛑🛑 Automation Tools For Software Testers(2020 Edition)
Tags: testing, tutorial, webdev, beginners
Published: 2020-06-05 15:49:10

✅Join us - https://sendfox.com/thetestingacademy

In this video,  We are going to discuss about the Top Automation Tools for Software Testing.

Pick one tool that you think is a right choice for you and Start learning.


[![Automation Testing Tutorial for Beginners ](https://i.imgur.com/dVzor8c.png)](https://youtu.be/-OL894kV7og "Automation Testing Tutorial for Beginners ")




🚀 Day 4 Task :  Selenium Tutorial for Beginners

🚀 Thread :  https://scrolltest.com/automation/day4

🚀 All Task List : https://scrolltest.com/automation/task

🚀 Watch Full Playlist : https://scrolltest.com/automation/playlist


My Top 5 :
1. Selenium
2. Cypress
3. Katalon Studio
4. Test Complete
5. UFT.

--
Be sure to subscribe for more videos like this!

[![ TheTestingAcademy](https://dev-to-uploads.s3.amazonaws.com/i/r7vcy6wbvyjbk1y1uu0o.png
)](https://www.youtube.com/TheTestingAcademy?sub_confirmation=1 "TheTestingAcademy")
Find bugs and performance issues faster
Tags: technicaldebt, java, cfml
Published: 2020-06-05 15:41:19

<h2> Instantly see what's behind critical production issues</h2>

Deliver features faster and spend less time maintaining your application

FusionReactor provides real-time visibility into instrumentation data and code execution metrics, enabling developers to get to the root of issues and performance problems in the shortest possible time. FusionReactor is the only tool that can be effectively used for performance analysis across the whole Software Development Life Cycle. Over 5000 customers trust FusionReactor to monitor their Java applications, enabling them to identify and respond faster to performance and stability problems.  

<h2>Configurable Metrics Dashboards</h2>
Cloud enables you to combine metric graphs so that you can build your own unique Dashboard views of how you want to see your data.

<h2>Application / Transaction breakdown</h2>
For each application being monitored, FusionReactor Cloud will automatically break down requests into individual transactions (including automatic framework recognition).

Transactions are measured so that you can quickly gauge how much time each transaction is taking in %, on average, which are slowest, the overall request throughput and how many errors/exceptions occurred.

<h2>Advanced Alerting Capability</h2>
FusionReactor Cloud includes advanced alerting capability, to enable you to set alerts based on different metrics available.

We have integrated support for many standard alerting tools, such as PagerDuty, Slack, HipChat, VictorOps – as well as supporting alerts via email and HTTP webhooks.

<h2>Auto Detect Errors & Important Transactions</h2>
FR Cloud is constantly monitoring individual request to determine if they’re interesting for you e.g. slow running requests, requests which generated an error or threw an exception.

Drill into the details of these requests and even save them for review at a later date.

<h2>Low-Overhead Production Java Profiler</h2>
FusionReactor Cloud Ultimate Edition includes an integrated low-overhead Java Profiler – which is the perfect tool for identifying poorly performing code in your production environment.

You can profile any requests or transactions which are running on the JVM – e.g. Tomcat, JBoss, WildFly, Glassfish, Jetty, etc. ColdFusion applications can also be profiled.

<h2>Metrics Explorer</h2>
Using the Metrics Explorer inside FusionReactor Cloud <a href="https://www.fusion-reactor.com/technologies/java-monitoring/">Java monitoring </a>allows you to begin examining all of the metrics FusionReactor has collected from your instances or application.

On the left of the screen, you can see the query configuration panel, this allows you to configure the queries used to generate the graphs that will appear on the right-hand side of the screen.

Clicking the metric dropdown shows a searchable list of all of the metrics available for your account.

Free 14 day trial <a href="https://www.fusion-reactor.com/technologies/java-monitoring/">Java monitoring </a>
Why I Created Webscript
Tags: javascript, webdev, showdev, frontend
Published: 2020-06-05 15:38:06

Webscript is a way to create DOM elements in Javascript. You can see the documentation here: https://mudgen.github.io/webscript/docs/

Why did I create Webscript?

> I want to have and use a frontend web development stack that is easy to use to rapidly develop web applications and has no build.   Building the DOM is one part of that which is solved with Webscript.

But there are already tools that exist that build the DOM,  like ..., er... *HTML*. Duh.

The problem with HTML is that it lacks programming logic like loops and functions. What if I make an ajax call to get data from a database and need to generate DOM elements with it?

But HTML templating languages exist to add programming logic to HTML.

Well, my beef with HTML templating languages is that I already have a programming language in the browser and it is called Javascript. I'd rather just use that. And Javacript is probably more capable than any HTML templating language. What I like about Webscript is that it is Javascript.

Well there's JSX which is HTML in Javascript. My beef with JSX is that it is a build step. JSX must be compiled to Javascript when building an application. As I said in my goal above: I want to have a frontend web development stack that has no build.  My build is the Javascript I write plus the libraries and resources I link and import. No compiling, no Babel, no Typescript.  Don't like it?  Sorry.  It is super simple and makes it easy to rapidly develop web applications.
Drawing Triangles in React Native
Tags: react, reactnative, showdev
Published: 2020-06-05 15:37:01

![React Native Triangle](https://dev-to-uploads.s3.amazonaws.com/i/ekr53s3saeu00rwf0oiv.png)

{% twitter 1268744578305110019 %}

I always come across a scenario where my UI needs a triangle view. Also I needed fine control over all aspects of the triangle view. Hence I built [@react-native-toolkit/triangle](https://github.com/react-native-toolkit/triangle) view based on the well known CSS trick to create triangles on the web.

As my requirements grew, I was adding more features to the library and now it supports almost all possible triangles you need. Hence I'm open sourcing it today for general use.

 {% codesandbox triangle-m0z2l %}

I initially used [react-native-triangle](https://www.npmjs.com/package/react-native-triangle) but it's configuration is fairly limited and I couldn't control many of the triangle properties. Hence this library became a necessity.

Also, I have started to work on open sourcing all the libraries I built for react native over the years for my personal projects. Will be slowly moving them over to [React Native Toolkit](https://github.com/react-native-toolkit). Stay tuned for future updates!
Live #2 - Automatizando deploy no S3 com GitHub Actions
Tags: github, actions, ci, cd
Published: 2020-06-05 15:28:10

{% youtube uDY8sMYb3_g %}

Continuação da Live #1 (https://youtu.be/LIsoV2QS6Ns)

Nesta live, demonstro como é fácil realizar a publicação do website estático no S3 de forma automatizada através do GitHub Actions.

Links:
- Vídeo no YouTube: https://www.youtube.com/watch?v=uDY8sMYb3_g 
- Código de exemplo: https://github.com/rafaels-dev/gatsby-personal-website-actions
- GitHub Actions: https://github.com/features/actions
Live #1 - Publicando uma aplicação web estática utilizando Route 53, S3 e CloudFront
Tags: aws, s3, devops, cloudfront
Published: 2020-06-05 15:24:57

{% youtube LIsoV2QS6Ns %}

Nesta live, demonstro como publicar uma aplicação web estática (HTML, React, Javascript) utilizando Route 53, S3 e CloudFront.

Links:
- Vídeo no YouTube: https://www.youtube.com/watch?v=LIsoV2QS6Ns
- Amazon AWS: https://aws.amazon.com
- Amazon CLI: https://aws.amazon.com/pt/cli/
- DNS Checker: https://dnschecker.org/
- Site criado no vídeo: https://www.rafaels.dev
Generating Prime Numbers: Reloaded
Tags: computerscience, python
Published: 2020-06-05 15:21:22

#So This Again
After posting my previous post I got okay feedback, but there was a key problem. My method to getting prime numbers was wrong. So I decided to create an alternative method that I know is fool proof.

#My working solution
So this solution is pretty simple so I'm sure that even beginners will understand(last time I wrote my code in c++, ruby, python, and js, this time only python).
###The Code:
#####Takes user input and generates all the primes under it(including the number itself if it's prime)
{% replit @OreOlad2/prime-number-gen%}

How would you have done it?
Flutter Layout Hints
Tags: flutter, flutterdev, learnflutter, dart
Published: 2020-06-05 15:19:41

You can use this as a short cheat-sheet or play with the full code sample.

Full code of the example (https://gist.github.com/mdrobnych/d7c0037de78c23aec71b1627414ce65c)

If no local Flutter stuff installed - open a new project at FlutLab.io (https://flutlab.io) and copy/paste this code there.

MainAxisAlignment

mainAxisAlignment: MainAxisAlignment.start
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/jk6ptpxhr3mu1t1qnfn7.png)
mainAxisAlignment: MainAxisAlignment.center
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/70giq8u8v6mmiq5vr9bv.png)
mainAxisAlignment: MainAxisAlignment.end
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/og6uk0ipe5fxfq3d5ny3.png)
mainAxisAlignment: MainAxisAlignment.spaceAround
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/44bl7ow8sdclphh7i383.png)
mainAxisAlignment: MainAxisAlignment.spaceBetween
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/uymaw5nch456ehchbufa.png)
mainAxisAlignment: MainAxisAlignment.spaceEvenly
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/hkc24sn1v0y70wnwtqz5.png)

CrossAxisAlignment

crossAxisAlignment: CrossAxisAlignment.start
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/vlymxx0rdo50all5lh8s.png)
crossAxisAlignment: CrossAxisAlignment.center
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/abj41k0csl8spfvdjlu3.png)
crossAxisAlignment: CrossAxisAlignment.end
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/vjcg2tzinqtjwncmgivj.png)
crossAxisAlignment: CrossAxisAlignment.stretch
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/z6594k3ipyc29ivw0iev.png)
June 5th, 2020: What did you learn this week?
Tags: weeklylearn, discuss, weeklyretro
Published: 2020-06-05 15:10:51

It's that time of the week again.

So wonderful devs, what did you learn this week? It could be programming tips, career advice etc.

<center>

![Deadpool and his cohorts chatting](https://media.giphy.com/media/w7fJO4TOqiaSQ/giphy-downsized-large.gif)

</center>

Feel free to comment with what you learnt and/or reference your TIL post to give it some more exposure.

{%tag todayilearned %}

And remember, if something you learnt was a big win for you, then you know where to drop it as well.👇👇🏻👇🏼👇🏽👇🏾👇🏿

{% link https://dev.to/devteam/what-was-your-win-this-week-4gn0 %}

<center>

![Big win. Danny Devito walking away from a huge explosion](https://media.giphy.com/media/U6pavBhRsbNbPzrwWg/giphy-downsized-large.gif)

</center>
How to Save Emails to Pocket
Tags: productivity
Published: 2020-06-05 14:53:27

Originally posted on https://rasulkireev.com/emails-to-pocket/.

---

[Pocket](https://getpocket.com/) is a great invention for people who like to read, when they **want** to read. It gives you superpowers.

### Superpower #1
It allows you to save articles you encounter during the day for later. That way, you are not distracted from whatever it is you are doing at the moment.

### Superpower #2
You can make highlights in your Pocket Article. Then later review those highlights and add them to your [Second Brain](https://www.buildingasecondbrain.com/), if you have one.

### So, what's the problem?
Now, let's say that you have signed up for a particularly useful email course, like [Ryan Kulp](https://www.ryanckulp.com/)'s [How to Validate an Idea](https://gohighbrow.com/portfolio/how-to-validate-an-idea/) or a particularly insightful newsletter like [Nat Eliason](https://www.nateliason.com/)'s [Monday Medley](https://www.nateliason.com/join) or [Arvid Kahl](https://www.arvidkahl.de/)'s [Bootstrapped Founder](https://thebootstrappedfounder.com/newsletter/). How can you save it for later if you are a little busy right now? Well, that is not a problem, since that is what Email Inbox is for.

The other problem is making notes. Here, email is not that useful, as opposed to Pocket. Unfortunately, Pocket does not allow for saving emails, only webpages. This is weird, and it doesn't seem like they are planning to add that feature any time soon.

### Solution
Do not worry, though, there is an insultingly easy solution for this. [Publish this email](https://www.publishthis.email/) lets you create a web page in seconds. The service is entirely free! All you got to do is send you an email to page@publishthis.email and wait for a reply. That's it. They usually reply within seconds. In that reply, you get a link to a web page with the contents of the email. Now, you can simply press "add to pocket," and you are done.

Now you have a nice centralized location for all the written words you consume during the day!

If you have any comments or feednack, please leave them [on Twitter](https://twitter.com/rasulkireev/status/1268912329263022082) or [on HackerNews](https://news.ycombinator.com/item?id=23428962).
A GitHub repo for... filling in the gaps?
Tags: discuss, github, productivity, help
Published: 2020-06-05 15:06:40

A long gap in your GitHub activity doesn't look great. But in my case, I've spent the past month off GitHub working in Figma, on UX design case studies, and hustling to find employment. In other words, no active repo to commit.

But then I got an idea: **What about a repository whose purpose is to "fill in the gaps" of your inactivity to potential employers looking at your account?** A project blog. A well-organized README that explains what you've been working on outside of GitHub, and links to it.

That way, if a potential employer lands on your GitHub, they don't see a page that's been inactive for a month.

Has anyone else done this? Is this just a silly idea? Senior engineers and hiring managers' input is welcome.
Unit testing a gateway with Javalin
Tags: javalin, mockserver, unittesting, wiremock
Published: 2020-06-05 22:16:19

---
title: Unit testing a gateway with Javalin
published: true
date: 2020-06-05 15:01:01 UTC
tags: javalin,mockserver,unittesting,wiremock
canonical_url: https://medium.com/@lsoares/unit-testing-a-gateway-with-javalin-24e3b7e88ef2
---

[![](https://cdn-images-1.medium.com/max/1260/1*4kX92_Lwp-E6xq7TFuO8zw.png)](https://medium.com/@lsoares/unit-testing-a-gateway-with-javalin-24e3b7e88ef2?source=rss-54ea764ff544------2)

In Kotlin/Java, how would you test that your app is properly consuming an external REST API?

[Continue reading on Medium »](https://medium.com/@lsoares/unit-testing-a-gateway-with-javalin-24e3b7e88ef2?source=rss-54ea764ff544------2)
Edpresso spotlight: Mohan Pawar
Tags: webdev
Published: 2020-06-05 15:00:00

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

> “It’s been a learning and then doing experience for me.” -- Mohan Pawar


[Mohan Pawar](https://www.educative.io/profile/view/4730682560479232) is the creator of, “[The Kubernetes architecture simplified](https://www.educative.io/edpresso/the-kubernetes-architecture-simplified)”, the shot that received the most views of any externally authored shot in May 2020. He has been a part of the Edpresso community for four months.

Mohan has always been keen on solving challenging programming problems. He has put a lot of effort into learning so that he can solve increasingly more complex problems. Pawar is a competitive programmer, which he says has given him “an additional advantage” as he is able to write robust code that is not sloppy.

Mohan has been a competitive programmer for five years. He started programming while pursuing a master’s degree, but he didn’t start actual development until his first internship as a Java developer.  

Mohan began blogging because he figured that instead of following someone’s blog, he could just do the work and create his own. He has found that blogging helps to increase his productivity and has allowed him to continue to enjoy learning. 

Mohan’s final message to his readers is, “Be the master in whatever field you work, invest your time and pay attention to what fascinates you -- I hope that you will follow your passion, whatever you do.”

Check out his other shots: [Create a Kubernetes cluster using kubdeadm]( https://www.educative.io/edpresso/create-a-kubernetes-cluster-using-kubeadm) and [How to create pods in Kubernetes.]( https://www.educative.io/edpresso/how-to-create-pods-in-kubernetes) Or follow him on [Twitter](https://twitter.com/mohan08p).
Day 27 of #100DaysOfCode: [OAuth2.0] integrate ReactJS and Django with Social login (Github)
Tags: 100daysofcode, django, react, github
Published: 2020-06-05 14:57:56

## Introduction
We have mentioned that how to make endpoints with [JWT authorization](https://medium.com/a-layman/build-single-page-application-with-react-and-django-part-3-use-jwt-with-drf-and-tests-endpoints-6a6275fb09d9). Also, we have introduce [how to connect ReactJS with Django](https://medium.com/a-layman/build-single-page-application-with-react-and-django-part-1-connect-react-app-with-django-app-dbf6b5ec52f4).

Github is also a popular platform for social login. The target of this article is to understand how to get access token from Github. Then we want to exchange the access token to JWT from our local Django server.

## Details
Please refer to my article. 
There are four roles, Django server, ReactJS client, Facebook authorize server, and the user.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/8ic90qaovkf8wxg63muu.png)

https://medium.com/a-layman/exchange-githubs-access-token-to-jwt-from-django-drf-server-a2c14d2ba3f

## Articles
There are some of my articles. Feel free to check if you like! 
* My blog-posts for software developing: https://medium.com/a-layman
* My web resume: https://jenhsuan.github.io/ALayman/cover.html
* Facebook page: https://www.facebook.com/imalayman
Daily Challenge #253 - Sort Sentences Pseudo-alphabetically
Tags: challenge
Published: 2020-06-05 14:55:44

---
title: Daily Challenge #253 - Sort Sentences Pseudo-alphabetically
published: true
series: Daily Challenge
description: Write a method that will return input sentence but with the words sorted by first letter.
tags: challenge
//cover_image: https://direct_url_to_image.jpg
---
Given a standard English sentence passed as a string, write a method that will return that sentence but with the words sorted by first letter.

All words that begin with a lower case letter should be at the beginning of the sorted sentence, and sorted in ascending order. All words that begin with an upper case letter should come after that, and should be sorted in descending order.

If a word appears multiple times in the sentence, it should be returned multiple times. Any punctuation can be discarded.

**Example**
input: `"Land of the Old Thirteen! Massachusetts land! land of Vermont and Connecticut!"`
return: `"and land land of of the Vermont Thirteen Old Massachusetts Land Connecticut"`
Lower case letters are sorted a -> l -> l -> o -> o -> t 
Upper case letters are sorted V -> T -> O -> M -> L -> C.

**Tests**
`sort("take up the task eternal, and the burden and the lesson")`
`sort("Pioneers, O Pioneers!")`

Good luck! 

***
_This [challenge](https://www.codewars.com/kata/52dffa05467ee54b93000712) comes from Daremyth 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!_
When Does Arrow Function Become Useless?
Tags: javascript
Published: 2020-06-05 14:50:08

Arrow function loses its benefits when used like this:

``` js
for (let i = 0, j = elements.length; i < j; ++i) {
  elements[i].addEventListener('click', () => {
    // `this` of what?
    alert(this.textContent);
  }, false);
}
```

And like this:

``` js
for (let i = 0, j = elements.length; i < j; ++i) {
  elements[i].addEventListener('click', () => {
    // The value of `i` has already changed to the maximum index
    // because the loop is already complete even before
    // we decide to click on `elements[i]`
    alert(elements[i].textContent);
  }, false);
}
```

Any others?
Robust function to create select tag in javascript
Tags: javascript, effective, tricks
Published: 2020-06-05 14:47:21

---
title: Robust function to create select tag in javascript
published: true
description: Simulate rails view_helper i have create function `createSelect` to dynamic create `select` tag
tags: Javascript, Effective, Tricks
---
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/l898amvzmd8qropelqxj.jpg)

Have you feelling write `select` tag in Javascript is more prolixity, you must insert many `option` tag in to `select` tag like this 

```htm
<select>
  <option value='foo' selected>foo</option>
  <option value='bar'>bar</option>
  ......
</select>
```

If you need dynamic create `select` tag `options` you can write Javascript function like this

```javascript
function createSelect(options=[['foor',1],['bar',2]]){
  const optionsStr = options.map((ele)=>{
    return `<option value=${ele[1]}>${ele[0]}</option>`
  }).join('')
  return `<select>${optionsStr}</select>`
}
```

It's ok  `createSelect` can dynamic generate `select` tag, but if you has more `options` source like user input, different api response etc here's arguments `options` must support as many as possible stucture like this

```javascript
const options = 'foo,bar,baz'
const options = ['foo','bar']
const options = [['foo',1],['bar',2]]
const options = [{id:1, text:'foo'},{id:2, text:'bar'}]
const options = [{value:1, text:'foo'},{value:2, text:'bar'}]
const options = [{value:1, label:'foo'},{value:2, label:'bar'}]
```

So i just enhancement `createSelect` function like this

```javascript
function createSelect(rawOptions){
  let options = []
  if(typeof(rawOptions) === 'string'){
    // 'foo,bar,baz' => ['foo','bar','baz']
    // 'foo#bar,baz.eei' => ['foo','bar','baz','eei']
    options = rawOptions.split(/[.|,|#]/).map((option)=>[option, option])
  }else{
    options = rawOptions
  }
  const optionsStr = Array.from(options).map((option)=>{
    const value = option.id || option.name || option[1] || option[0];
    const label = option.name || option.text || option.label || option[0];
    return `<option value=${value}>${label}</option>`
  }).join('')
  return `<select>${optionsStr}</select>`
}

// demos
const rawOptions='foo,bar'
createSelect(rawOptions) 
// <select>
//		<option value='foo'>foo</option>
//    <option value='bar'>bar</option>
// </select>

const rawOptions=[{id:1, text:'foo'},{id:2, text:'bar'}]
createSelect(rawOptions) 
// <select>
//		<option value='1'>foo</option>
//    <option value='2'>bar</option>
// </select>

const rawOptions=[{value:1, label:'foo'},{value:2, label:'bar'}]
createSelect(rawOptions) 
// <select>
//		<option value='1'>foo</option>
//    <option value='2'>bar</option>
// </select>

....

```

You can see `createSelect` function is more robust you can pass any `options` you want so that use at many case.

Hope it can help you :)