teleren/devto huggingface dataset:
JavaScript Array Methods
Published: 2020-08-07 20:47:17

For those of us new in programming, arrays may not be so familiar.No worries, we shall dive right into it.

So what is an **array**?
An array is a collection of one or more elements of either the same type or different types.The length of an array  is not limited.It lets you store multiple elements in a single variable.The elements can be strings, numbers or boolean.
**Example**
`let myArray = ["A", "B", "C", 12, true];`
`//shows an array with 3 strings, 1 number and a boolean value`
###Array Methods
Every method in an array causes an impact; it changes the array in one way or another.We will look at 3 array methods.These are: map, filter and reduce.

1.**map()** or **Array.prototype.map()** creates a new array with the results of calling a function for every array element.It does not change the original array.
**Example**
`let myNumbers = [20, 21, 22];
let myArray = myNumbers.map(multiply = (num) => num * 2);
console.log(myArray);`
`//myArray returns 40, 42,44`

2.**filter()** or **Array.prototype.filter()** creates a new array containing only the elements for which the filtered function returns true.It also does not mutate or change the original array.
**Example**
`const names = ["Susan", "Jane", "John", "Tom"];
const newNames = names.filter(names => names.length < 5);
console.log(newNames);`
`//newNames returns ["Jane", "John" and "Tom"]`

3.**reduce()** or **Array.prototype.reduce()** as the word suggests, it reduces an array to a single value.This is achieved using a callback function that is called on each iteration.
*A *callback* function is a function that is passed as a parameter to another function.*It is run inside of the function it was passed into.A callback function accepts 4 arguments.The 1st argument is the accumulator which gets assigned the return value of the callback function from the last iteration.The 2nd argument is the current value which is the current element being processed in an array.The 3rd argument is the index of the current element and the fourth argument is the array upon which reduce() is called upon.The 3rd and 4th arguments are optional.
 A perfect example of where reduce can be used is in adding the elements of an array.
`const ourArray = [5, 6, 8];
const reducer = (accumulator, currentValue) => accumulator + currentValue;
console.log(ourArray.reduce(reducer));`
`//this code returns 19`

Its a wrap.I hope we have all learnt how to apply array methods map, filter and reduce.
Google Spreadsheet Acolyte
Tags: sql, laravel, spreadsheet
Published: 2020-08-07 20:34:34

> Repetition is the first step to become monotonous 

##Philosophy behind making the package 

We usually tend to do things that are repetitive in nature and waste two most crucial entities : **_time and energy_**. Both are **inversely proportional** to each other and yet we require both to survive. Former one **_validates our presence_** and latter one is **_vital for presence_**. coming back from philosophy and jumping straight to terminal


##Introduction
Google Spreadsheet acolyte is a laravel package to dump records from spreadsheet into database table.

##Usefulness
It removes dependency from CSV or any other dumping extension. It eradicates the need of intervention with database. You just need to have one active database connection defined within your .env file and table must exist within that database, that's the bare minimum it requires as of now. 

##Setup 

You can install the package via composer:

```
composer require manish-manghwani/google-spreadsheet-acolyte
```

Meanwhile you can fulfil other dependencies as follow

###Step 1
- You must have one google account. 

###Step 2
- Login to your developer console via that google account using the link https://console.developers.google.com

###Step 3
- Create new project

###Step 4
- Enable Google Sheets Api

###Step 5
- Create Service Accounts

###Step 6
- Download Credentials.json

###Step 7 
- Create one spreasheet from same google account and share it with the service account id that you created just now.


After Completing above steps, use the credentials.json file and move it into root directory. (Since they are crucial credentials, you may wish to add it's name in .gitignore file too)

##Installation

Install the package via composer using 

```
composer require manish-manghwani/google-spreadsheet-acolyte
```

##Usage

1. Get the Google Spreadsheet Url. It may look similiar to this https://docs.google.com/spreadsheets/d/1auqTdpciifOA6PH5JbSoRFegdgdr48icvgwqsfWqrqI/edit#gid=0

2. You should have name of the credential file that was downloaded from service account (for eg: credentials.json)

3. You should have table name in which data will be inserted (for eg: dummy)

With above things in place you can run below command.

```
php artisan import:sheet --file-url=https://docs.google.com/spreadsheets/d/1auqTdpciifOA6PH5JbSoxRFegdgdr48icvgwqsfWqrqI/edit#gid=0 --table-name=dummy --credentials-file-name=credentials
```

##NOTE:

1. If sheet is not shared with service account email id, it will fail.

2. First row of spreadsheet must be exactly same as of columns present in table.

3. Spreadsheet name should not be changed it must be Sheet1
Data to be inserted must be present in Sheet1
Android VideoLayout Library
Tags: android, opensource, videolayout, textureview
Published: 2020-08-07 20:30:35

[![Codacy Badge](https://api.codacy.com/project/badge/Grade/ea90e5f54edc468eb5e6246f9fc806ed)](https://app.codacy.com/app/AsynctaskCoffee/VideoLayout?utm_source=github.com&utm_medium=referral&utm_content=AsynctaskCoffee/VideoLayout&utm_campaign=Badge_Grade_Dashboard)

> More stylish background designs
> Performance friendly and scalable

## Why this project exists
The normal videoview on Android is very costly in terms of performance. Also, due to the video resolution ratio and apk size, most developers don't want to include videos in the project. With this library, developers will have a performance-friendly video background with a few lines of code.

## Features and Usage

### Easy implementation 

```java
        frameLayout = findViewById(R.id.frameLayout)
        videoLayout = VideoLayout(this)
        videoLayout.setGravity(VideoLayout.VGravity.centerCrop)
        videoLayout.setIsLoop(true)
        videoLayout.setPathOrUrl("loginvideotype3.mp4") // could be any video url
        frameLayout.addView(videoLayout)
```

```xml    
    <egolabsapps.basicodemine.videolayout.VideoLayout
            android:id="@+id/videoLayout"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_gravity="center"
            app:video_gravity="centerCrop"
            app:path_or_url="loginvideotype3.mp4"
            app:loop="true"/>
```

###### You should put your mp4 files into assets folder, If you use URL you should declare

```xml
   <uses-permission android:name="android.permission.INTERNET"/>
```

<img src="https://raw.githubusercontent.com/AsynctaskCoffee/VideoLayout/master/previews/pp1.gif" width="350"> <img src="https://raw.githubusercontent.com/AsynctaskCoffee/VideoLayout/master/previews/pp2.gif" width="350">

## Implementation

###### Add it in your root build.gradle at the end of repositories

```groovy
    repositories {
        maven { url 'https://jitpack.io' }
    }
```

###### Add the dependency

```groovy
    implementation 'com.github.AsynctaskCoffee:VideoLayout:1.1'
```

### Latest Updates

> 14.07.2020 - AndroidX migration und code refactor

I hope you liked **VideoLayout** library. You can reach complete code [on GitHub!](https://github.com/AsynctaskCoffee/VideoLayout)
The SQL was better!
Published: 2020-08-07 20:26:00

What is SQL? 

Before computers, there were written records. For example, in a western movie there would be a General store. This general store would keep track of how many items were sold in a week. Today we have computers. People before my time had used languages like C, C++, and java to build databases. Now, what's a database? A database is where your information is being held. Going back to the analogy prior, a database would be the book or piece of paper that the shopkeep would write down all the information about sales for the week. But what if he or anybody else in this fictional western town had a question about what they bought the week prior? In the land of make-believe, he would have to dust off those glasses and mosey over to his record reading each name just to find that you got a poker set and some twine. That sounds brutal because it was. Only if there was a language that spoke with a database that held all the information you were looking for and asking a question to that database easier? There is and it's SQL. SQL stands for Structured Query Language, I just think about it like a really complex magic eight balls. You use SQL so ask questions and get answers in return.

#How does it work?

It starts with a question to your database. Were going to stick with the general store model here as well. let's say our database holds customers. Each customer has information about them such as what they got prior to there current visit so they could get what they want this visit.

#Edgecase City!

It's important to think about edge cases early on because the sooner you work them in the less stress you will have later! So what edge cases do we need to consider. Number one would be lookup. How on earth are we going to find a customer? By name? I am not sure usually in that western movie there is a dual and in that dual one guy says to the other "this town isn't big enough for the two of us!". So that's out! A reasonable option would be an ID. Each user would have an ID so we could look up the third dirty dan because he would have a unique ID. This, however, is more about database set up rather than SQL sow we will get back to that.

# Your garden variety query.

What would a query look like for this database? Let's say we want all customers who bought apple's the query would look something like this:
```SELECT * FROM storeRecord WHERE purchased = "apples"```

A little bit to unpack here which is good SQL reads like English so we are in luck! the SELECT and FROM make sense but what is the `*`? Well, the star means everything. No, I am not kidding, it makes more sense when we read it out. Select everything from a specific point in our database specifically where this condition is met.

# A peek inside the looking glass 

This is the Highest level explanation I can give without getting more technical. SQL allows for more advance queries from multiple tables and receiving different types of data. It's pretty cool! Hopefully, this gets you on the right path to mastering the art of asking your database questions!

-Thanks, Mike
Laravel 7 Class Based Components – Part I
Tags: laravel, php
Published: 2020-08-07 19:52:53

**The following is an excerpt from a post I published on my blog. The full post is available here: [https://yossiabramov.com/blog/laravel-7-class-based-components-part-i](https://yossiabramov.com/blog/laravel-7-class-based-components-part-i)**

With Laravel 7.x we now have two new approaches or ways of writing our blade components: class based components and anonymous components. In this post I will focus on creating and including class based components as well as passing data to them.

### Create

We can create components with an  `artisan`  command:

```plaintext
php artisan make:component Header
```

This will create two files:  `app/View/Components/Header.php`  and  `resources/views/components/header.blade.php`.

### Class

In the folder  `app/View/Components/`  will now have a  `Header`  class that will help us in handling our component’s logic. The  `Header`  class will look like this:

```php
<?php

namespace App\View\Components;

use Illuminate\View\Component;

class Header extends Component
{
    /**
     * Create a new component instance.
     *
     * @return void
     */
    public function __construct()
    {
        //
    }

    /**
     * Get the view / contents that represent the component.
     *
     * @return \Illuminate\View\View|string
     */
    public function render()
    {
        return view('components.header');
    }
}
```

As you can see, our  `Header`  class has a  `render()`  function that renders our view. We will return to this class again after having a quick look at our view.

### View

In the folder  `resources/views/components/`  we will now have a  `header.blade.php`  blade file that will contain our blade view.  `header.blade.php`  will look like this:

```php
<div>
    <!-- Well begun is half done. - Aristotle -->
</div>
```

Nothing but a div and an inspirational quote! 💪 . BTW, you can generate more of these amazing quotes by running:

```plaintext
php artisan inspire
```

Let’s add some hardcoded content to our  `header.blade.php`  so we can see it in action:

```php
<div>
    Lorem ipsum dolor sit amet consectetur, adipisicing elit. Corporis, fuga.
</div>
```

### Include

Including our component is a bit different from previous Laravel versions:

```php
<x-header />
```

### Quick Example

Here is a quick example for creating and including a component with more than one word in its name.

Let’s create the component  `SpecialHeading`:

```plaintext
php artisan make:component SpecialHeading
```

This will create two files:  `app/View/Components/SpecialHeading.php`  and  `resources/views/components/special-heading.blade.php`.

And this is how you would include it:

```php
<x-special-heading /> 
```
Read the full post on my website :-)
https://yossiabramov.com/blog/laravel-7-class-based-components-part-i
Elixir - schema drop
Tags: elixir, ecto
Published: 2020-08-07 19:43:49

See Files on Github
[config.exs](https://github.com/ideaMarcos/portishead/blob/main/config/config.exs)
[mix.exs](https://github.com/ideaMarcos/portishead/blob/main/mix.exs)
[schema_drop.exs](https://github.com/ideaMarcos/portishead/blob/main/priv/repo/schema_drop.exs)

There may be cases when you share a database (but not a schema) with other applications. So using [mix ecto.drop](https://hexdocs.pm/ecto/Mix.Tasks.Ecto.Drop.html) may not be an option. In this case, dropping the schema may be a better alternative.

First configure your [ecto migrations settings](https://hexdocs.pm/ecto_sql/Ecto.Migration.html#module-repo-configuration) in config.exs.
```elixir
config :portishead, Portishead.Repo,
  migration_default_prefix: "portishead",
  migration_source: "portishead_schema_migrations"
```

Add `schema_drop.exs` script to the `priv/repo` folder. The script gets the schema and migration table from the config and runs raw sql to drop them. This script is using [PL/pgSQL.](https://en.wikipedia.org/wiki/PL/pgSQL)
```elixir
Repo.query!("DROP SCHEMA IF EXISTS #{schema} CASCADE")
Repo.query!("DROP TABLE IF EXISTS #{migration_table}")
```

In `mix.exs`, add an alias to drop the schema
```elixir
  defp aliases do
    [
      "ecto.schema.drop": ["run priv/repo/schema_drop.exs"]
    ]
  end
```

From the shell, you can now run
```
$ mix ecto.schema.drop
```

or you can add an aliases to use `ecto.schema.drop`
```elixir
  defp aliases do
    [
      "ecto.schema.reset": ["ecto.schema.drop", "ecto.setup"]
    ]
  end
```
Live Stream Incoming!
Tags: codenewbie, stream, livecoding, streaming
Published: 2020-08-07 19:28:04

---
title: Live Stream Incoming!
published: true
description: Posting publicly about my upcoming livestream! 
tags: codeNewbie, stream, livecoding, streaming
//cover_image: https://direct_url_to_image.jpg
---

On Monday, August 10 from 7PM-9PM Eastern I'm going to be doing my first coding focused livestream on [Twitch](twitch.tv/terrabytetiger) and would love if you came to hang out and ask me about my experiences with webdev or to talk about whatever random tangent we go on! 

## Goals for the Stream 🏆

💚 My primary goal for my channel is to teach others and spread my knowledge of HTML/CSS/JS/Vue 
❓ Providing a place for people to ask questions about webdev
✨ Learn publicly - I'm not very good at sharing what I've been up to and want to get better at it! Yay self-improvement!
🎉 Having Fun! I'm a bit of a goof irl and love to build silly things! (I also think fun things are the best educational tool)
🍕 Meet some of the awesome developers out there! 

## Have a question/bug? 🐛

If you have something you're stuck on or something you would like to see covered, feel free to drop a repo/codepen down below with what your error is and I might take a look at it on stream! 👇

## Can't make it to the live stream? ⌚

Don't worry! Afterwards I'll be uploading segments of it to YouTube (link coming soon™)!
Day 22: The confusion 
Tags: 100daysofcode
Published: 2020-08-07 19:24:26

I walked into day 22 thinking I'd Google my way out of authentication and authorization. I must say it's alot to wrap my head around. I discovered, controllers, passport js, joi, config, jwt, role....😪 And guess who got overwhelmed in trying to get a quick fix, 😅 me!

Todays take away:
Go slow😅!
On Genomic-scale Cloud Pipelines
Tags: googlecloud, aws
Published: 2020-08-07 19:20:50

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

I chat with @richcampbell about GCP or AWS genomic-scale cloud pipelines data analysis for [COVID-19](https://www.broadinstitute.org/coronavirus/covid-19), cancer research and more, on his `runAsRadio` podcast.

http://runasradio.com/Shows/Show/714
Identity Community Hour - 08/06/2020
Tags: azure, community
Published: 2020-08-07 19:03:51

Did you miss our regular Community Hour this Thursday? Fret not because you can always catch the recording on demand [here](https://www.twitch.tv/videos/702154785). We didn't have a guest this time around but we did cover quite a few developer questions that reached to us via email, Twitter or pigeon. We want to be inclusive to all means of communication :)

## Community shoutout

This week's community segment had some very interesting community-generated content such as blogs, videos, tutorials, streams etc. The links to this week's mentions are:

- [Azure AD Feature announcement - It wasn't me](https://techcommunity.microsoft.com/t5/azure-active-directory-identity/end-users-can-now-report-this-wasn-t-me-for-unusual-sign-in/ba-p/1257369) - mandatory meme inclusion
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/0bnzuu8kbx0pvf4ezykb.jpg)
- [JWT Auth in ASP.NET Core](https://codeburst.io/jwt-auth-in-asp-net-core-148fb72bed03)
- [Azure Active Directory B2B Access Token Generator using C#](http://sudiptachaudhari.com/azure-active-directory-b2b-access-token-csharp/)
- [Demo: Azure AD Authentication for Azure SQL | Azure SQL for beginners](https://www.youtube.com/watch?v=IwpmLUpvTBA) [Video]
- [Part 1: A better way to handle authorization in ASP.NET Core](https://www.thereformedprogrammer.net/a-better-way-to-handle-authorization-in-asp-net-core/)
- [Connect to Key Vault from .Net Core application using Managed Identity](https://knowledge-junction.com/2020/07/31/azure-connect-to-key-vault-from-net-core-application-using-managed-identity-part-3-publishing-deploying-net-core-console-application-as-a-azure-webjob-and-schedule-it/)
- [Authenticate with Firebase using OAuth and Microsoft Azure Active Directory](https://firebase.google.com/docs/auth/android/microsoft-oauth)

## Architecture discussion
For this part of our community hour, JP and I spent some time discussing some architecture challenges when it comes to using Azure AD to authenticate users and access data in SharePoint Online. In the end, Azure AD does a great job hiding all the complexity so that developers can quickly and easily integrate this functionality with their apps. There are a lot of moving parts in this solution but JP did a great job explaining how they all fit together - he even showed off his (undeniably impressive) drawing skills!

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

## Be part of our community

We stream live twice a week on [Twitch.tv/425Show](https://twitch.tv/425show)! And we love to collaborate with developers on real world examples. Therefore, if you're interested, or have questions/challenges for us then reach out and join us:

10a - 1p eastern US time Tuesdays
11a - 12n eastern US time Thursdays for Community Hour

Be sure to send your questions to us here, on twitter or email: iddevsoc@service.microsoft.com!
How to Use Bootstrap Modals Without jQuery
Tags: css, javascript, html
Published: 2020-08-06 14:58:51

NOTE: The intructions here are not relevant to the most recent versions of Bootstrap - they removed jQuery

One of the disadvantages of Bootstrap is that it depends on jQuery (at least up until the laest versions) and it's own Bootstrap JS files for some functions such as modals. If all you want is a simple modal and have no other use for the JS, this can add a good few unnecessary kilobytes of JavaScript you don't actually need to your page. However, it's not too difficult to work around - in fact, it requires less than 20 lines of JS. The full code is <a href="https://github.com/Ara225/mini-frontend-projects/blob/master/2-bootstrap-modal-without-jQuery/bootstrap-modal-without-jQuery.html">here</a>

We use the same HTML as the normal Bootstrap modals, except with the extra attributes being replaced by click handlers, and an extra div (backdrop) which displays the grey background.
```html
<button type="button" class="btn btn-primary" onclick='openModal()'>
    Launch demo modal
</button>
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-modal="true"
    role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
                <button type="button" class="close" aria-label="Close" onclick="closeModal()">
                    <span aria-hidden="true">×</span>
                </button>
            </div>
            <div class="modal-body">
                ...
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" onclick="closeModal()">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
            </div>
        </div>
    </div>
</div>
<div class="modal-backdrop fade show" id="backdrop" style="display: none;"></div>
```

The JavaScript simply alters the backdrop and modal display when required, as well as adding and removing the show class. The last few lines can be deleted so that it doesn't close after a click elsewhere in the page.
```javascript
function openModal() {
    document.getElementById("backdrop").style.display = "block"
    document.getElementById("exampleModal").style.display = "block"
    document.getElementById("exampleModal").classList.add("show")
}
function closeModal() {
    document.getElementById("backdrop").style.display = "none"
    document.getElementById("exampleModal").style.display = "none"
    document.getElementById("exampleModal").classList.remove("show")
}
// Get the modal
var modal = document.getElementById('exampleModal');

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
  if (event.target == modal) {
    closeModal()
  }
}
```