teleren/devto huggingface dataset:
How to find the right sponsor for your opensource project
Tags: opensource, javascript, vue, github
Published: 2020-05-10 16:01:03

The ongoing maintenance and growth of open source projects are clearly in the best interest of the software companies using them. And yet, raising money for an open-source project is difficult, and many developers struggle with finding the right sponsors for their open source projects. What is the best way to get the resources open source developers need to keep developing?

Boiling point:
The open-source sustainability problem has become a burning issue for both OSS developers and software companies. We are reaching a boiling point; Open source components already comprise 70% of code in most software products developed today, and they are maintained by individuals or small teams. These developers work out of their own volition, and without getting the much-needed resources, they just won’t be able to continue maintaining their code on an ongoing basis.

We participated in Sustain OSS in Brussels this January, together with a very respectable representation of software companies (Github, Google, Facebook, and more, who sponsor open source projects in millions of dollars every year). Senior developers and leaders of the open source community from across the globe also attended. It was amazing to see more than 100 people in the same room, working in work-groups and sharing their ideas and thoughts, trying to solve the open source sustainability problem. There was a sense of urgency in the room. People felt like this problem has become something that needs addressing – now.

Continue to full blogpost here:https://blog.xscode.com/736/the-right-sponsor-for-your-open-source-project/
Happy Mother's Day, and happy learning to code!
Tags: coding
Published: 2020-05-10 15:35:42

To celebrate Mother's Day, I studied coding for one hour. Mostly in Javascript. I used a free video on youtube to learn javascript.

I have bought some courses before, but finally I found that you can find free resources everywhere, and sometimes they are even better than paid courses. 

Out of my own experience, don't start a free tutorial or paid course that is too long, I mean more than 4 hours in total. If so, you will get lost in the course or tutorial. You better finish tutorials or courses as soon as possible and start doing projects instead.

Also, try to find free resources instead of paying for courses, it's not about money. Psychologically, I don't know the reason, but for me, once I paid money to buy a course, usually I couldn't finish it. They are usually very very long, I guess because they are made for money, so the teacher wants to make long videos so that you think your moeny is well spent.

And long course is not good for beginners,because there are too many details, too many concepts which you will certainly forget after you finish your course.

That's just my two cents. YMMV.
Learning Golang 106
Tags: go, beginners
Published: 2020-05-10 15:25:06

### Interface
Interfaces are a contract to help us manage types.
define an interface
```
type bot interface{
   getGreeting() string
}

```
Unlike other languages, you need to implement interface explicit. Go uses implicit implementation. As long as you define the same method, it will automatically implement the interface.
For example, `englishBot` and `spanishBot` are automatically implemented `bot`.
```
import (
	"fmt"
)

type bot interface {
	getGreeting() string
}

type englishBot struct {}
type spanishBot struct {}

func (englishBot) getGreeting()string {
	return "Hello!"
}

func (spanishBot) getGreeting() string {
	return "Hola!"
}

func printGreeting(b bot) {
	fmt.Println(b.getGreeting())
}


func main() {
	eb := englishBot{}
    sb := spanishBot{}

	printGreeting(eb)
	printGreeting(sb)
}
```
Note, if a interface has multiple functions. To implement the interface, you need to implement all the functions.

##Embedding
Go has the ability to “borrow” pieces of an implementation by embedding types within a struct or interface.
```
type Reader interface {
    Read(p []byte) (n int, err error)
}

type Writer interface {
    Write(p []byte) (n int, err error)
}

// ReadWriter is the interface that combines the Reader and Writer interfaces.
type ReadWriter interface {
    Reader
    Writer
}

Or
// ReadWriter stores pointers to a Reader and a Writer.
// It implements io.ReadWriter.
type ReadWriter struct {
    reader *Reader
    writer *Writer
}

```
Connecting your ASP.NET core application to a local instance of SQLServer
Tags: aspnetcore, sqlserver, efcore
Published: 2020-05-10 15:24:23

It is no news that one of the best databases to use for asp.net/.net development is SqlServer because of its smooth integration provided with .net(ASP.NET/UWP/Winforms/Xamarin) applications.

Let's get to the process of integrating a local Instance of SqlServer with our our ASP.NET application.....

For you to complete these steps you would need the following:
1. Microsoft SQL server management studio
2. SqlServer  configuration manager
3. An ASP.NET project (with EFCore ORM for sqlserver installed )

---
To install EFcore tools with sqlserver 
go to `package manager console` and install the following package

>Microsoft.EntityFrameworkCore.SqlServer
---



step 1.

open SqlServer configuration manager 

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


make sure TCP/IP is enabled if this is your first time using a local instance/or connecting to your sqlserver remotely, then right click on TCP/IP and select properties, then select IP addresses, then scroll down to the last section which says `Ipall` and enter the `TCP port:1433` 



Step2:

Step 2 is to create a database in your Sqlserver management studio that you intend to use for your asp.net project.



Step 3: is to add the database as your connection string in your `appsettings.json` file(in your asp.net project). replace `DATABASENAME` with the name of your database

`"ConnectionStrings": {
    "DefaultConnection": "Data Source=.;Initial Catalog=DATABASENAME;Integrated Security=True"
  }`


step4: 

Create an ApplicationDBcontext class in your project 
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/j9832wb6cegsage7cbc1.PNG)


and add the dbcontext to your application start-up class under the configure services 

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



and you should be up and running ..... :smile:
Vim Screencast -- IDE-like Refactors, Snippets, Tests, Hover Documentation, Commenting, and Git
Tags: vim, linux, productivity, vscode
Published: 2020-05-10 14:57:14

This episode showcases a grab-bag of features that developers accustomed to IDEs will appreciate in vim, such as how to execute the current file from within the editor, how to run tests related to the current function, how to integrate with git source control to stage and commit files, how to write and use code snippets, how to do syntax-aware commenting and uncommenting, and how to avail of automatic project-wide method name refactors using the LSP.

Catch the video on [Semicolon&Sons](https://www.semicolonandsons.com/episode/IDE-like-refactors-snippets-tests-hover-docs-commenting-and-git)
Learn using react hooks with redux
Tags: react, redux, codewithghazi, javascript
Published: 2020-05-10 14:33:24

In this post we will look into learn using react hooks with redux and how to do it easily. After reading this post you will be able to handle redux state and dispatching events very easily with react hooks inside functional components of react. I assume you have our redux store ready and you have done all the pre-requisites which are needed to start with redux such as creating a store, wrapping app inside store provider. In this post I will just explain how to use the existing store with react hooks.

## What is Redux And why you should use it?
Redux is state management for react applications. In simple words, we can use it for saving state in the global state so that we can easily have it available on every component throughout the applications checkout redux documentation. Redux is a single source of truth when it comes to states in redux connected applications.

I find it very essential for any application which deals with more than 2-3 functionalities or modules. As the application grows the complexity of the application also grows and if you keep all the state in component’s local state whether it Stateful component or Stateless component with react hooks to store state. It will be complex to pass state to other components which is not a sibling. Then you only have 2 options to pass props which are:

Pass props as routing props
Store it in local/session storage and fetch in the component you need it.
Both of the above solutions are not that feasible or not in good practice. You can not store data in local/session storage every time nor you can send it on URL if the data is sensitive. 

Here Redux comes handy to store data and receive it anywhere in the application. It is a subscription type of methodology. You connect your component with the Redux store and whenever any value is updated, all the connected components will receive the updated value instantly.

[READ - How to connect react hooks with redux?](https://codewithghazi.com/learn-using-react-hooks-with-redux/)
howcolors.work
Tags: css, showdev, colors
Published: 2020-05-10 14:32:37

Did you already see the fantastic https://howurls.work by [@kettanaito](https://twitter.com/kettanaito)?

{% twitter 1259060244560388097 %}

After seeing this I decided to build something similar for CSS colors.

You can check it out here https://howcolors.work it is still work in progress and covers RGB, HSL and Hex so far!

Please give me some feedback in the comments 😊
How to register an application to get the Security Group in Claims in your Azure Function
Tags: azure, azurefunctions
Published: 2020-05-10 14:28:46

<sub>Photo by Maxim Zhgulev on Unsplash</sub>
##Problem

In our Azure Function, we need to check if the user is a member of an existing Active Directory group. 

##Solution

In order to to that, we need to:
- set up Authentication in Azure Function, setting in "Authentication / Authorization" the button "App Service Authentication" to on and use Azure Active Directory as an Authentication Providers (using Express setting: Do not turn on Common Data Service !).
- got to App Registrations in yout Azure Active Directory and find your application. Go to the Manifest blade, and modify it to set:

```json
"groupMembershipClaims": "SecurityGroup",
```

You should see the security groups added in the ClaimsPrincipal of your Azure Function.

Hope this helps !
Round numbers in Go
Tags: go
Published: 2020-05-10 14:21:37

Go (golang) lets you round floating point numbers. To do so, you need to import the math module.

The official math package provides methods for rounding `math.Ceil()` up and `math.Floor()` down.

```go
package main
 
import (
 "fmt"
 "math"
)
 
func main(){
 x := 1.1
 fmt.Println(math.Ceil(x))  // 2
 fmt.Println(math.Floor(x))  // 1
}
```

Note that it is not a true integer that is returned after taking the whole, but a float64 type, so you need to convert it manually if you need an int type.

golang doesn't have a python-like round() function, and searched a lot of them to find a refreshing one: first +0.5, then round down!

It's incredibly simple, and there's nothing wrong with thinking about it:

```go
func round(x float64){
    return int(math.Floor(x + 0.5))
}
```

In a program that would look like:

```go
package main

import (
 "fmt"
 "math"
)

func round(x float64) int{
    return int(math.Floor(x + 0.5))
}

func main(){
 fmt.Println(round(1.4))
 fmt.Println(round(1.5))
 fmt.Println(round(1.6))
}
```

**Related links:**
* <a href="https://golangr.com/">Learn Golang</a>
* <a href="https://golang.org/">Go programming</a>
Iterators in Python
Tags: python
Published: 2020-05-10 14:11:05

In Python there are several ways to loop over data. While many programming languages only come with loops (<a href="https://pythonprogramminglanguage.com/for-loops/">for loops</a>, <a href="https://pythonprogramminglanguage.com/while-loop/">while loops</a>), in Python you also have a thing named <a href="https://docs.python.org/3.8/glossary.html#term-iterator">iterators</a>.

An iterator is a tool used to iterate a value, and an iteration is the activity of a repeated feedback process.

Each repetition of the process is called an "iteration", and the result obtained from each iteration is the value.

## For loops

The default way to loop over data is by using for loops.

The for loop below has five iterations, because the length of the list is five.

```python
goods=['apple','sony','lenovo','acer','dell']

index=0
while index < len(goods):
    print(goods[index])
    index+=1
```

For loops can be used for simple implementation by iterating the value by indexing, but only for sequence types: <a href="https://pythonbasics.org/strings/">strings</a>, <a href="https://pythonspot.com/python-lists/">lists</a>, <a href="https://pythonspot.com/python-tuples/">tuple</a> groups. 

## Iterators

For non-sequential types such as <a href="https://pythonbasics.org/dictionary/">dictionaries</a>, collections, file objects, etc. that do not have an index, one must find a way to iterate the value that does not depend on the index, and this can lead to the use of iterators.

A call to the `obj.iter()` method returns an iterator object (Iterator).

In addition to file objects, dictionaries, collections, lists, etc. are just iteratable objects that can generate iterator objects and iteratively take values by calling the `iter()` method. 

Then by calling the `next()` method on the iterator object you get the next value.

```python
>>> s={1,2,3} 
>>> i=iter(s)
>>> next(i)
1
>>> next(i)
2
>>> next(i)
3
>>> next(i)  # StopIteration exception
```

You can use an iterator object to iterate over a dictionary, the program below shows an example of that:

```python
dic = {'a':1,'b':2,'c':3}
d_iterator = iter(dic) # d_iterator

while True: 
    try:
        print(next(d_iterator))
    except(StopIteration):
        break 
```

**Related links:**
* <a href="https://docs.python.org/3.8/glossary.html#term-iterator">Python Iterators</a>
* <a href="https://pythonbasics.org/">Learn Python</a>
TypeScript Configuration For styled-components In React Native
Tags: styledcomponents, typescript, reactnative
Published: 2020-05-10 14:09:14

---
title: TypeScript Configuration For styled-components In React Native
published: true
description: "How to get TypeScript definitions for your theme files in react native"
tags: ["StyledComponents", "TypeScript", "ReactNative"]
canonical_url: https://perttu.dev/articles/tips-for-using-typescript-with-styled-components
---

Using [Styled-components](https://styled-components.com/) with React Native is great. Where it really shines in my opinion is theming. However, wouldn't it be cool if you get type-checking for the themes you've created, as well as auto-complete for the theme variables? So that when you're writing something like this:

```typescript
const Text = styled.Text`
  color: ${({ theme }) => theme.primaryColor};
`;
```

Then you wouldn't have to remember if whether the primary color was written as `primaryColor` or `primary_color`, Instead your editor tells you what theme variables stored inside the theme object you've created.

Well good news, you can easily achieve this by using the Typescript interface merging to override the default theme that comes with styled-components (more info how declaration merging works can be found [here](https://www.typescriptlang.org/docs/handbook/declaration-merging.html), and [here](https://styled-components.com/docs/api#create-a-declarations-file)). Here's how to achieve that:

1. To access the theme in our app, we need to first setup ThemeProvider and the pass down our custom theme inside it.

```typescript
// App.tsx
import React from "react";
import { ThemeProvider } from "styled-components/native";
import Navigation from "/navigation";
import { lightTheme } from "/styles/theme";

const App = () => {
  return (
    <ThemeProvider theme={lightTheme}>
      <Navigation />
    </ThemeProvider>
  );
};

export default App;
```

2. We create the theme file and merge the declaration of DefaultTheme provided by styled-components with our own definition. Then we tell our themes to use that interface.

```typescript
// theme.ts
import { DefaultTheme } from "styled-components/native";

declare module "styled-components" {
  export interface DefaultTheme {
    primaryColor: string;
  }
}

export const lightTheme: DefaultTheme = {
	primaryColor: #333;
	secondaryColor: #666;
};

export const darkTheme: DefaultTheme = {
	primaryColor: #fff;
	secondaryColor: #cacaca
};
```

## That's it

Now every time you use the theme variables it comes equipped with TypeScript's typing powers. Even better, if you're using for example VS Code, it automatically provides you with auto-completion for the theme variables.
What’s your alternative solution? Challenge #40
Tags: challenge, javascript, codenewbie, learntocode
Published: 2020-05-10 13:53:18

# 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 to convert a CSV text to a “bi-dimensional” array

```

(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 challenge35

var data = "John;Smith;954-000-0000\nMich;Tiger;305-000-0000\nMonique;Vasquez;103-000-0000";

var ar = csvToArray(data);
println(JSON.stringify(ar));

function csvToArray(data)
{
    var arLines = data.split("\n");

    for(var i = 0; i < arLines.length; i++)
    {
        var arLine = arLines[i].split(";");
        arLines[i] = arLine;
    }
    
    return arLines;
}

```


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.
Web Monetization in Vue ⚡
Tags: gftwhackathon, vue, webmonetization
Published: 2020-05-10 13:50:04

There is an awesome post for getting started with web monetization in React and was inspired to recreate it with Vue 3.

{% post https://dev.to/emma/getting-started-with-web-monetization-in-react-3m4j %}

We're going to use a no-bundle dev server for Vue 3 called [vite](https://github.com/vuejs/vite) which allows us to develop Vue apps with Single-File Components without any bundling during development.

# Create a vite app

Open up your terminal and do the following:

```bash
$ npx create-vite-app <project-name>
$ cd <project-name>
$ npm install
$ npm run dev
```

# Creating a hook to see if a user is web monetized

In the root of your project folder, create a file named `use-web-monetization.js` and paste the code below.

```javascript
import { ref, onMounted } from "vue";

export const useWebMonetization = () => {
  const isMonetized = ref(false);
  const isLoading = ref(true);

  onMounted(() => {
    if (!document.monetization) {
      // No web monetization polyfill is installed (e.g. Coil).
      isLoading.value = false;
      isMonetized.value = false;
      return;
    }

    // Check the value of document.monetization.state
    // to see if a user is web monetized.
    const { state } = document.monetization;

    if (state === "stopped") {
      // Not currently sending micropayments, nor trying to.
      isLoading.value = false;
      isMonetized.value = false;
    }

    // Determine when Web Monetization has started actively paying
    document.monetization.addEventListener("monetizationstart", (event) => {
      isLoading.value = false;
      isMonetized.value = true;
    });
  });

  return {
    isMonetized,
    isLoading,
  };
}
```

We created a file that has a reusable hook named `useWebMonetization` that returns `isMonetized` and `isLoading` states.

And now we can use it inside any `.vue` file like below.

```vue
<template>
    <div>
      <div v-if="isLoading">
        Loading...
      </div>
      <div v-else-if="isMonetized">
        Some exclusive content!
      </div>
      <div v-else>
        Show ads here!
      </div>
    </div>
</template>

<script>
import { useWebMonetization } from "./use-web-monetization";

export default {
  setup() {
    const { isLoading, isMonetized } = useWebMonetization();

    return {
      isLoading,
      isMonetized,
    };
  }
};
</script>
```

# Testing Web Monetization

[test-web-monetization](https://testwebmonetization.com/) is a website that provides a bookmarklet that we can use to test our projects without signing up for a Coil account.

# Sample App

Here's a [sample simulator app](https://github.com/sorxrob/vite-coil-simulator) to get you started.

![demo](https://i.imgur.com/I6imjrS.gif)

Good luck to everyone who's joining the [#gftwhackathon](https://dev.to/t/gftwhackathon)!
The Code Cadet Outfit for women devs
Tags: womenintech, developer
Published: 2020-05-10 13:42:54

I've always wanted a dev tech outfit for myself. Imposter syndrome aside, coding is a lifestyle. A lifestyle where you sit for long periods of time and it's really irritating to pull up your pants so that they don't scrunch at your knees when you sit down :) I wanted to make it official, nothing wrong with jeans, track pants and t-shirts. But I was aiming for something more affirmative. Coding is creative, hard, joyful and gratifying all at the same time in different amounts. There's athletic wear for people into crossfit, running etc. So now I present to you ✨ dev wear for devs!

The embellishments on the outfit are patches and embroidery. The pants are to have deep pockets. I've gotten some feedback about front pockets not being that favorable so i might just remove the pocket and leave the patch. And put side pockets on the top itself. The sleeves are loose as well so that your elbows can move in whatever way that you type

And yes, that's a 🐱 cat code editor 💻

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