teleren/devto huggingface dataset:
How to display FormData object values in Javascript
Tags: javascript, tutorial, beginners
Published: 2020-07-16 20:14:11

_This post was originally published at [codepulse.blog](https://codepulse.blog/howto-display-formdata-values/?utm_source=devto) on May 25, 2019._

If you are working with Javascript and sending data to server, especially when you need to send files, you might have run into [FormData](https://developer.mozilla.org/en-US/docs/Web/API/FormData) object. It is handy way to form set of key/value pairs that represent form fields and values. You will most likely run into a situation where you want to inspect your `FormData` object. Normally you could just `console.log` the object, but this doesn’t work with FormData object.

If you console.log FormData object, you will just get empty object logged to the console. What you need to do is use `entries` property. Here is how you can log all key/value pairs to console using [entries](https://developer.mozilla.org/en-US/docs/Web/API/FormData/entries) property.

```javascript
var formData = new FormData();
formData.append('key_one', 'First value');
formData.append('key_two', 'Second value');
formData.append('key_three', 'Thrid value');
// Log the key/value pairs
for (var pair of formData.entries()) {
    console.log(pair[0]+ ' - ' + pair[1]); 
}
```

This logs the following to the console:

```
key_one - First value
key_two - Second value
key_three - Thrid value
```

`FormData.entries()` returns array of the form data key/value pairs. Each row in the array contains one key/value pair. So item key is in the index 0 and item value is in the index 1.

Logging the values is just one example on what you can do with the key/value pairs. If you need to inspect the values of a FormData object for some other purpose, it is obviously easy to do using the `entries` property.
3 Ways to Keep Your Laravel Routes Organized
Tags: php, laravel, beginners, architecture
Published: 2020-07-16 19:54:44

# Introduction

Laravel routing allows us to easily map a URI pattern to a particular controller, or method. It's easy to let routing get unorganized if we don't follow a pattern.

In this post, we'll go over a simple pattern that puts namespace, routing groups, and common HTTP operations into a single component.

- Use route groups
- Apply a name to the route group
- Use a common namespace for all operations under the route group.

# Before
```php
use Illuminate\Support\Facades\Route;

Route::namespace('Site\Secrets')
    ->get('/sites/{site}/secrets', 'SecretController@get')
    ->name('site.secrets.index');

Route::namespace('Site\Secrets')
    ->get('/sites/{site}/secrets', 'SecretController@post')
    ->name('site.secrets.new');

Route::namespace('Site\Secrets')
    ->get('/sites/{site}/secrets', 'SecretController@delete')
    ->name('site.secrets.delete');

```

The above pattern is fine, but we're repeating ourselves A LOT. Just take a look at how many times we typed `sites/{site}/secrets`. There's a better way to make our route definitions easier to read, maintainable, and overall better.


# After
```php
use Illuminate\Support\Facades\Route;

Route::namespace('Site\Secrets')->name('site.secrets.')
    ->prefix('/sites/{site}/secrets')->group(function () {
        Route::get('/', 'SecretController@get')
            ->name('index');
        Route::post('/', 'SecretController@post')
            ->name('new');
        Route::delete('/{secret}', 'SecretController@delete')
            ->name('delete');
});

```

Notice how we're using [Route Groups](https://laravel.com/docs/7.x/routing#route-groups). This allows us to apply common settings to each `Route::` call inside the `group` callback. 

All routes defined in our group will use the fully qualified [PHP namespace](https://www.php.net/manual/en/language.namespaces.php) of Site\Secrets. Laravel will resolve the fully qualfied controller class name to `\App\Http\Controllers\Site\SecretsController`. 

If we're not sure where `\App\Http\Controllers` comes from, then we can go to line 17 of the [RouteServiceProvider.php](https://github.com/laravel/laravel/blob/master/app/Providers/RouteServiceProvider.php#L17) file. In this file, Laravel defines the namespace to be applied to our controller routes. 

This means, that every route defined in our callback will have `site.secrets.` prepended to its name. In effect, the 
index route would actually be `site.secrets.name`

# Conclusion 
As software engineers, we should strive to write maintainable  and easy-to-read code.
Sergey the tiny static site generator - How and why I added it to my simple landing page. 
Tags: html, css, webdev, javascript
Published: 2020-07-16 19:53:29

The landing page for my newsletter is a super simple website consisting of a signup form, a navigation bar, and a list of past issues. So I initially created it in plain HTML and CSS and deployed it. Great!

As I created a few more pages and started to update the list of past issues I found myself having to update the same code in a few places and updating was already becoming a pain.

I made the decision when I started that I wanted a very simple site and had ruled out using products such as Gatsby, Jekyll, Hugo etc. as I felt they were overkill for a simple landing page. But I could do with a little assistance, so after a bit of Googling, I came across a project called [Sergey](https://sergey.cool/).

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

Sergey allows me to break up my HTML files into smaller plain HTML components which I can then insert where needed. Sounds Perfect! 

So after a little playing this 👇

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

Became this 👇

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

I did not have to change any code just cut and paste the code for each component into a new file and replace with a ```<sergey-import src="component_name"/> ```

It really was as simple as it sounds.

I would say it took about an hour from discovering Sergey to redeploying the site.

I can now update my sidebar from one file, update issues in a single location etc, without losing much of the simplicity of the site, it is still just a bunch of HTML files which can easily be deployed to my hosting platform.

So if you are looking for a super simple solution to avoid some repetition I would recommend taking a look at Sergey they have a great walk through on the website.

---

Sign up to our free weekly newsletter and stay in the loop with the latest and greatest web development projects on GitHub at [www.trendingprojects.com](https://www.trendingprojects.com/)

{% link https://dev.to/iainfreestone/trending-projects-on-github-for-web-developers-2gjl %}

If you enjoyed this article you can [follow me](https://twitter.com/iain_freestone) on Twitter where I regularly post bite size tips relating to HTML, CSS and JavaScript.
Are you in the GitHub Arctic Code Vault?
Tags: discuss, opensource
Published: 2020-07-16 19:50:20

Looks like GitHub is pushing out new contributor badges.

It looks like this.

![Screenshot of my GitHub profile showcasing the Arctic Code Vault badge](https://dev-to-uploads.s3.amazonaws.com/i/hqv40hx958gudce6dgdx.png)


Have you made it into the GitHub arctic code vault? ❄️ Share a screenshot!
Neat and Easy to Use jQuery Examples
Tags: javascript, jquery, tutorial
Published: 2020-07-16 19:46:34

jQuery is the most popular JavaScript library in use today. It gives web developers a great relief  by abstracting away the complex tasks of traversing the DOM, creating elements, handling events and much more. Many people search for some amazing and simple jQuery tutorials on the web. Here I will show you some simple jQuery tutorial which helps you a lot.

## 1)Disable right click option (jQuery tutorial)

If you want to disable the right click option (context menu) on a webpage in your browser then you can use this small jquery trick.

```
$(document).ready(function(){
$(document).on(“contextmenu”,function(e){ e.preventDefault(); });
});
```

The code above listens for contextmenu event, and calls the `preventDefault()` method.
 
## 2)Define an `exists` function  (jQuery tutorial)
If you want to check, if element exists or not then you can use this small jquery trick also.
There are two ways to check if element exists:

```
//old way :
console.log($(‘#element’).length == 1 ? “exists!” : “doesn’t exist!”);
```
```
//new trick:
jQuery.fn.exists = function(){ return this.length > 0; }
console.log($(‘#element’).exists() ? “exists!” : “doesn’t exist!”);
```
In both tricks you can use length property and a ternary conditional statement. But the second way is more useful than the first because you can  extend jQuery with your own functions and you can use `exists()` function normally as you can use other functions in jQuery.

## 3)Find external links and Mark them (jQuery tutorial)
In this example, I will show you how to mark external links with text “external link” using jquery.

**HTML**
```
<ul id=”Links”>
<li><a href=”index.html”>Home</a></li>
<li><a href=”./cat.html”>Category</a></li>
<!– External Link: –>
<li><a href=”http://www.google.com/”>Google</a></li>
</ul>
```
**jQuery**
```
$(document).ready(function(){
// Loop through all the links
$(‘#Links a’).each(function(){
if(this.hostname != location.hostname){
// The link is external
$(this).append(‘<span> – (External Link)</span>’).attr(‘target’,’_blank’); }
});
});
```
The code above will loop through all the links and checks if the link’s hostname is equal to the website’s hostname, if the hostname of link is not equal to the hostname of the website. Then the link is marked as an external link.
A Web UI client for Git
Tags: showdev, webdev, git
Published: 2020-07-16 19:20:26

Oh yeah, we have Fork, github desktop, git kraken and all other mighty fishes in the ocean. Among which, I present to my tiny project crafted using react coupled with node js.

Gitconvex (I can't come up with a cool name), is a web based UI client for managing your local git repos. All it needs is Node JS and git to be installed on the host machine. 

![gitconvex_repo_detail](https://user-images.githubusercontent.com/65342122/87664834-8ee16200-c783-11ea-885e-6a1e29626a47.png)

As it is a web based tool, it does not require you to look and install the supported package for your system or anything. The whole bundle is available as an npm package, so you can install it as a global module and start playing with your repos in a flick.

# Download options

> Use any of the below links to get gitconvex for your system

[![gitconvex npm package](https://badgen.net/badge/gitconvex/v1.1.1/green?icon=npm)](https://www.npmjs.com/package/@itassistors/gitconvex)

[![github release](https://badgen.net/badge/gitconvex/v1.1.1/blue?icon=github)](https://github.com/neel1996/gitconvex-package/releases)

[![docker image](https://badgen.net/badge/gitconvex/v1.1.1/cyan?icon=docker)](https://hub.docker.com/repository/docker/itassistors/gitconvex)

Check out the [**github repo**](https://github.com/neel1996/gitconvex-package) for more details.
AzureFunBytes Episode 6 - @Azure VNETs with @AbelSquidHead

Tags: azure, beginners, cloud, networking
Published: 2020-07-16 19:15:49

Welcome back to AzureFunBytes.  Last week we touched a bit on VNETs when we created a bastion network to log into a Windows VM.  This week we'll extend this process and focus on the Virtual Network or VNET in Azure.  We'll discuss the small stuff and the big "hybrid" ideas in cloud computing.

 To help me along, I've asked [Abel Wang](https://twitter.com/abelsquidhead), another of the Azure Advocates, to join me in solving three problems: 

*   How can I create a new VNET for my application? 
* How do we create separate subnets for our networks? 
* How do we configure an additional virtual network interface with our new VNET IP range?

{% youtube 71WE6VD1mAk %}

 AzureFunBytes! - Byte-sized content with a live Twitch show! 

Learn about Azure fundamentals with me! Live stream is available on Twitch at 2 pm EDT Thursday.  You can also find the recordings there as well.

https://twitter.com/azurefunbytes

https://twitch.tv/azurefunbytes

[What is Azure Virtual Network?](https://docs.microsoft.com/en-us/azure/virtual-network/virtual-networks-overview?WT.mc_id=twitter-ca-social-jagord) 
Microsoft Learn: [Azure Fundamentals](https://docs.microsoft.com/en-us/learn/paths/azure-fundamentals/?WT.mc_id=twitter-ca-social-jagord) 
[Microsoft Azure: $200 Free Credit](https://azure.microsoft.com/en-us/free/?WT.mc_id=twitter-ca-social-jagord)
JavaScript: Do While Loop
Tags: javascript, beginners, codenewbie, 100daysofcode
Published: 2020-07-16 19:01:43

We learned about while loops in the previous blog post. Loops allow us to repeat the same action multiple times.

The key difference between a while and a do-while loop is that the former evaluates the end condition before running the body. In contrast, the latter evaluate it at the end of body execution.

**Why does this matter?**

While while-loop is evaluating it in the beginning, if the condition is false, the body does not get executed. The do-while ensures body execution once because of the expression evaluation at the end.


A while loop looks like

```javascript
while(condition) { // If condition is false to start with, this loop will never run.
    // loop body
    // counter++
}
```

A do-while loop looks like

```javascript
do {
    statement // This statement will execute at least once before the execution of the condition below!
}
while (condition);
```

Example of a do while loop:

```javascript
let i = 0;
do {
    console.log(i); // 0, by the time condition gets evaluated this variable gets printed to the console.
} while (i != 0);
```
How to manage multiple END_POINTS or BASE_URL when developing android app.
Tags: android, androidapp, appdevelopment, androiddeveloper
Published: 2020-07-16 18:37:03

In this article, we learn how to manage multiple End_Points/Base_url/Server_url for the project.
As every developer knows that there is multiple URL in their single project, 
for example one for development, one for production, one for testing, and many more.

n most of the case minimum, two URL is a must.
one for production and one for development.

so how to manage multiple URLs, 

1- if I am installing an app in debug mode( development), then I want the development URL, which will interact with my local DB.
2- and if I'm generating release mode .apk file then I want production URL which will interact with the server.

the first and very known pattern is to define both URLs with the same name, and when need to debug URL, "uncomment the test/debug end_point and comment the production URL " and when the need for production URL do the vice-versa.

is it a good way, a good programming approach?
no never.  
everyone knows that this task is very hectic.

here is the best way to handle multiple URLs.

1- look in your app-level grade, you will find buildTypes{}.
2- customize your build type like this.

Look here to get how to code to achieve this.

https://www.javaoneworld.com/2020/06/how-to-manage-multiple-url-end-points-base-url-android.html
Portfolio Review
Tags: showdev, webdev, css, codenewbie
Published: 2020-07-16 18:21:33

After spending a long time looking at inspirations, playing around with ideas, and self-doubting, I think I'm finally happy with my portfolio. 

I'm definitely on the newbie side of the developer spectrum, so I know that my projects themselves aren't anything to write home about, but I would be very appreciative of any feedback that I can get! And that includes anything from design to best coding practices to ways to improve the projects I have listed. 

Dev.to has been a fantastic resource for me in my learning process and I look forward to any constructive criticism I can get from this awesome community! 

[Here](https://paytonjewell.dev/#/) is the link to the portfolio website!
Selecting Hashes from an API
Tags: ruby, codenewbie, refactorit, tutorial
Published: 2020-07-16 18:17:45

Selecting hashes from an API can seem like a very complicated process, so let's take it one step at a time. We will be storing everything in variables for ease of access. The definition to a variable can be found [here](https://en.wikipedia.org/wiki/Variable_(computer_science)). 
The first thing we are going to do is set our API equal to a variable named response. Then we are going to put in a pry (see more about pry [here](https://github.com/pry/pry)) and look at our available hash.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/lhp9ufgotnxlksbiggug.jpg)
We want to select a key from response that has multiple keys as it's value.  If we look closely, `'page'=>1,'per_page'=>1` so they each have individual returns and `'photos'=>[{` which means not only does it have an array, it has an array of hashes. 
We are going to save `'photos'` into the variable photos_array like this and run the pry again to select our next key. 

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/x28dasapzo6vzvjpjdwy.jpg) 
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/f1zc0h5s71klniwif6lh.jpg) 
We are going to pick three.  `'photographer', 'photographer_url', and 'src'=>'original'`
So using our `binding.pry` we gradually develop these three lines of code:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/ptaccd2evp9z39yxt9j8.jpg)
This code will work. But it isn't very DRY code. Don't Repeat Yourself! We are going to refactor this code next.
Because we want to iterate over three things we are going to use the `.each` method, naming our variable photographer_hash and setting up the block something like this:

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

Now we have a new Photographer object that iterates through my API and returns all of the values.  But it could still be better.  Instead of `Photographer.new....`, we are going to set up a new variable called info_hash.  Set it equal to: 

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

The reasons behind the locally defined keys `pic_taker, pic_taker_url,` and `orig_url` have more to do with OOP and classes than APIs and refactoring so will not be gone into here.  Just understand that they were defined in another class.  The last thing to do here is to put `Photographer.new` back in with its new argument of `info_hash` with the resulting API looking like this:

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

All of the code examples in this article and their associated files can be found [here](https://github.com/kak79/CLI-PROJECT).
Solving Sum of N Numbers
Tags: javascript, algorithms, interviewtips
Published: 2020-08-23 22:54:10

---
title: Solving Sum of N Numbers
published: true
date: 2020-07-16 18:09:16 UTC
tags: JavaScript,algorithms,Interviewtips
canonical_url: https://jamesperkins.io/post/solving-sum-of-n-numbers
cover_image: https://cdn.sanity.io/images/3d7ef7mu/production/30feb5159fede9576507097f0ae01a888b86f184-1280x720.png
---

This blog post is going to focus on solving the sum of N numbers. It's a typical question that could pop up in a Junior interview, or potentially in your college work. So the question could be what is the sum of the first 1000 numbers.

Using Loops to solve the problem.
We could solve this using a for loop passing in N into the function. For Example:

```
function findSum(n) {
let result = 0;
for (let i = 1; i <= n; i++) {
result = result + i;
}
return result;
}
let n = 1000;
console.log(`Sum of the numbers from 1 to ${n} is ${findSum(n)}`);
``` 
This will solve the problem, and the result will be 500500 but it is quite inefficient because as the number gets bigger so does the iteration and memory usage.

Thinking of this problem like a maths problem.
So the problem we are attempting to solve is:
```
sum = 1 + 2 + 3 + 4 + 5 + 6 + 7 + ... n
``` 
If we think of it, we are technically just doing:

```
sum = n + (n-1) + (n-2) + (n-3) + (n-4) + (n-5) ... +1
``` 
There is an arithmetic solution for this called Arithmetic progression which is described as a sequence of numbers such that the difference between the consecutive terms is constant.

To break it down, let's look at this very simple example:
```
2+5+8+11+14
``` 
This sum can be found quickly by taking the number n of terms being added (here 5), multiplying by the sum of the first and last number in the progression (here 2 + 14 = 16), and dividing by 2:


```
(n(a1 + a2))/2
``` 
Which means we can solve this in a single line of JavaScript, by using what we know from our Maths problem:
```
function findSum(n) {
return (n * (n + 1)) / 2;
}
let n = 1000;
console.log(`Sum of the numbers from 1 to ${n} is ${findSum(n)}`);
``` 

Using this we get the same result, and it doesn't matter how big the number is as we aren't iterating, we are directly calculating the solution.

I hope you enjoyed the short tutorial on calculating the sum of n numbers, and I hope it helps when you are prepping for some interviews.
Starting the Onboarding Flow - Building SaaS #49
Tags: python, django, saas, css
Published: 2020-07-16 18:08:07

{% youtube d8p46W5jG48 %}

In this episode, we worked on the progress element that will display in every step of the onboarding flow.  I added some labels and styled the banner using Tailwind CSS.  At the end of the stream, we boxed in the shape of the welcome page with some placeholder elements.

The very first thing I did was insert a top bar that was unstyled to the top of the welcome page.  We added some placeholder text for each of the steps in the onboarding flow.  After that, I started styling the UI until it took shape.

We talked about design elements like color and spacing and some aesthetic qualities that help make a user interface feel better.

After completing a first cut of the top bar navigation, I shifted to the welcome page and added vector art and placeholder text to give the page some life.

This article first appeared on [mattlayman.com](https://www.mattlayman.com/building-saas/starting-onboarding-flow/).
The .NET Docs Show: A discussion about .NET on ARM 🚀 with Jeremy Sinclair
Tags: dotnet, aspnet, webdev, dotnetdocsshow
Published: 2020-07-16 17:58:26

---
title: The .NET Docs Show: A discussion about .NET on ARM 🚀 with Jeremy Sinclair
published: true
description:  Jeremy said it best, "come on back to .NET"!
tags: dotnet, aspnet, webdev, dotnetdocsshow
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/6pwac9cyicj40hogr2p2.png
---

In this episode of [The .NET Docs Show](https://dotnetdocs.dev), Jeremy Sinclair (Windows Insider MVP) discusses his thoughts with .NET running on ARM. He shares his perspectives on open-source development, enterprise application adoption of .NET Core, and how .NET development can be inspiring.

Jeremy said it best, ["come on back to .NET"! #ComeOnBackToDotNet](https://twitter.com/search?q=ComeOnBackToDotNet)

{% youtube Crd-sP7ZJEU %}

If you liked this video and would like to see some more of our .NET content, please subscribe to our [The .NET Docs Show YouTube Channel](https://www.youtube.com/channel/UCIy_nKrwrd-naf_MPWtXdLA) and [follow us on Twitter](https://twitter.com/dotnetdocsshow).

{% twitter 1283806031869554689 %}

# #CheckUp

- [ASP.NET Core SignalR - Hub Filters](aka.ms/signalr-hub-filters?WT.mc_id=devto-thedotnetdocs-dapine)

# Useful links

- [.NET Foundation - Candidates](https://dotnetfoundation.org/about/election/candidates)
- [Introduction to ASP.NET Core Blazor](https://docs.microsoft.com/aspnet/core/blazor?WT.mc_id=devto-thedotnetdocs-dapine)
- [The .NET Docs Show](https://dotnetdocs.dev)