teleren/devto huggingface dataset:
Algorithms 101 - Two Numbers Sum
Tags: algorithms, tutorial, productivity, codenewbie
Published: 2021-02-25 16:09:29

## Problem Statement

Given an array of distinct integers, find the pair of integers whose sum is equal to the target number, if any.

**Arguments**

1. numbersArray - Array of distinct integers
2. targetSum    - Target sum number

## Solution

#### Approach 1

- Run 2 _for_ loops, one nested inside the other.
- Check if the sum of the iterating elements equal the target sum.

```javascript
const twoNumerSum = (numbersArray, targetSum) => {

    for (let i = 0; i < numbersArray.length; i++) {

        const firstNumber = numbersArray[i];

        for (let j = 0; j < numbersArray.length; j++) {

            const secondNumber = numbersArray[j];

            if (firstNumber + secondNumber === targetSum) {

                return [firstNumber, secondNumber];

            }

        }

    }

    return [];

};
```
<br/>

**Time complexity** _O(n^2)_

**Space complexity** _O(1)_

#### Approach 2

- Initiate an empty object & iterate through the input array using a _for_ loop.
- Because we already know the target sum, we can instead search for the unique number, whose summation with the iterating number will be equal to the target sum.

```javascript
const twoNumerSum = (numbersArray, targetSum) => {

    const numbersMap = {};

    for (const number of numbersArray) {

        const match = targetSum - number;

        if (numbersMap[match]) {

            return [match, number];

        } else {

            numbersMap[number] = 'true';

        }

    }

    return [];

};
```
<br/>

**Time complexity** _O(n)_

**Space complexity** _O(n)_

#### Approach 3

- Input array can be sorted in O(nlogn) using quick sort. Let's do that first.
- Begin summation from the extreme indices and close in. If the sum is less than the target sum, move one index further from the left side, else, the right side.

```javascript
const twoNumerSum = (numbersArray, targetSum) => {

    numbersArray.sort();

    let left = 0, right = numbersArray.length - 1;

    while (left < right) {

        const currentSum = numbersArray[left] + numbersArray[right];

        if (currentSum === targetSum) {

            return [numbersArray[left], numbersArray[right]];

        } else if (currentSum < targetSum) {

            left += 1;

        } else {

            right -= 1;

        }

    }

    return [];

};
```
<br/>

**Time complexity** _O(nlogn)_

**Space complexity** _O(1)_

## Link to Code

[in node.js](https://github.com/brijeshshah13/algos/blob/master/two-number-sum/twoNumerSum.js). Feel free to raise a PR in any other language.

For the latest updates on the upcoming articles in this series, you can subscribe to the [newsletter](https://brijeshshah.substack.com/).
Using Observable in APP_INITIALIZER
Tags: angular, rxjs
Published: 2021-02-25 16:06:43

An exciting new feature is coming to Angular v12 - support for Observables in [`APP_INITIALIZER`](https://angular.io/api/core/APP_INITIALIZER) 🎉

*Note*: This feature was added in [v12.0.0-next.2](https://github.com/angular/angular/blob/master/CHANGELOG.md#1200-next2-2021-02-24).

Up until now, if you wanted to execute something asynchronous as part of `APP_INITIALIZER`, say an HTTP request to get some configuration, your only option was to convert it to a Promise. Often times using `toPromise()` (which, btw, is [deprecated](https://github.com/ReactiveX/rxjs/commit/aa9ab6b555203529a699b3a79531a57b7d78fefa) in the upcoming RxJS v7).

This is no more! In v12 you will be able to directly return an Observable. Let’s see how:

```ts
import { APP_INITIALIZER, FactoryProvider } from '@angular/core';
import { ConfigService } from "./config.service";

function loadConfigFactory(configService: ConfigService) {
  // Easy as pie 🥧
  return () => configService.getConfig(); // 👈

  // How you might've done it “before”
  // return () => configService.getConfig().toPromise();
}

export const loadConfigProvider: FactoryProvider = {
  provide: APP_INITIALIZER,
  useFactory: loadConfigFactory,
  deps: [ConfigService],
  multi: true
};
```

An important thing to note is that the Observable **must complete**, otherwise the bootstrap process will not continue.

Now, place the `loadConfigProvider` variable in the `providers` array of a Module and everything should be working fine. Check out this [Stackblitz](https://stackblitz.com/edit/angular-ivy-vv7v74?devtoolsheight=33&file=src/app/app-initializer/app.initializer.ts) to see it in action.

Oh, and don’t forget to add error handling to that request. 😎

Thanks to [Yadong Xie](https://twitter.com/yadong_xie) for this wonderful [contribution]((https://github.com/angular/angular/pull/33222)).

---

<span>Photo by <a href="https://unsplash.com/@kat_katerina?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Katerina Pavlyuchkova</a> on <a href="https://unsplash.com/s/photos/door-open?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Unsplash</a></span>
Using Kentico Kontent in LINQPad
Tags: tutorial, cms, kenticokontent, dotnet
Published: 2021-02-25 15:37:31

Sometimes you simply want to try out some code without having to go through the ceremony of setting up a project. Using tools like [LINQPad][1] can help by providing you with a quick way to run .NET small queries and programs in isolation, with a really powerful set of methods to output the object graphs to a results window.

I use LINQPad a lot, and most recently with the [Kentico Kontent][2] headless CMS. Kontent has a set of [.NET SDK][3] which wraps it's API and makes it super easy to use as a .NET developer.

In this video, I'll introduce LINQPad and show you how I use it with Kentico Kontent.

{% youtube j1DpsuoxfZ4 %}

[1]: https://www.linqpad.net/ "LINQPad - The Ultimate Scratchpad for C#, F# and VB"
[2]: https://kontent.ai/?utm_source=KONTENT_LINQPAD&utm_medium=mvp_406111&utm_campaign=extended_trial "Find out more about Kentico Kontent"
[3]: https://docs.kontent.ai/tutorials/develop-apps/get-started/sdks?tech=dotnet "Kentico Kontent .NET SDKs"
React Grid Layout : Nice grid layout system 
Tags: webdev, javascript, react
Published: 2021-02-25 15:35:05

# React Grid Layout : Nice grid layout system 

## Concepts

React-Grid-Layout is a grid layout system for React. It features auto-packing, draggable and resizable widgets, static widgets, a fluid layout, and separate layouts per responsive breakpoint.


![Image](https://camo.githubusercontent.com/c4c5ad848e7f3cbc45c44a115b0ab01ff36e81898893b1177440ae3522e40eb4/687474703a2f2f692e696d6775722e636f6d2f6f6f314e5436632e676966)

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

## Installation

Install the React-Grid-Layout package package using npm:

```bash
npm install react-grid-layout
```

## Usage

Use ReactGridLayout like any other component. The following example below will produce a grid with three items where:

* users will not be able to drag or resize item a
* item b will be restricted to a minimum width of 2 grid blocks and a maximum width of 4 grid blocks
* users will be able to freely drag and resize item c

To make RGL responsive, use the <ResponsiveReactGridLayout> element:

```javascript
import { Responsive as ResponsiveGridLayout } from 'react-grid-layout';

class MyResponsiveGrid extends React.Component {
  render() {
    // {lg: layout1, md: layout2, ...}
    const layouts = getLayoutsFromSomewhere();
    return (
      <ResponsiveGridLayout className="layout" layouts={layouts}
        breakpoints={{lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0}}
        cols={{lg: 12, md: 10, sm: 6, xs: 4, xxs: 2}}>
        <div key="1">1</div>
        <div key="2">2</div>
        <div key="3">3</div>
      </ResponsiveGridLayout>
    )
  }
}
```

[https://github.com/STRML/react-grid-layout#usage](https://github.com/STRML/react-grid-layout#usage)

## Link

* [https://github.com/STRML/react-grid-layout](https://github.com/STRML/react-grid-layout)

* [https://strml.github.io/react-grid-layout/examples/0-showcase.html](https://strml.github.io/react-grid-layout/examples/0-showcase.html)
What do you use for a Team Knowledgebase?
Tags: help
Published: 2021-02-25 15:33:13

---
title: What do you use for a Team Knowledgebase?
published: true
description: 
tags: help
---

I've been looking for something to use for a team knowledgebase for a while now. This is going to be used for everything from technical documentation to onboarding and code standards.

Currently we are using the Hugo static site generator with a nice theme but it is quite clunky to have to check out the code every time we need to change something.

We are currently looking at [Outline](https://www.getoutline.com/) to solve this and so far it seems pretty decent, but it lacks comments and permissions.

Feature wish list:
* Easy to update, preferably with markdown support
* File attachments
* Support for discussions/comments
* Integration with tools to make it easy to find things like Slack and Alfred
* Versioning
* Admin tools to be able to lock documents

Can you recommend something?
Tech stack agnostic software engineering
Tags: career, techstack
Published: 2021-02-25 15:28:56

---
title: Tech stack agnostic software engineering
published: true
description: This post is meant to start a discussion around the topic of software engineering jobs being so tightly coupled to the tech stack used by the employer.
tags: career, techstack
//cover_image: https://direct_url_to_image.jpg
---
I have been a software engineer for 3 years now, working for the same employer. I recently decided to scout the market for a similar software engineering role. So, I have been looking at software engineering jobs posts and one thing bothered me about those posts. Almost all of them are "tightly coupled" to knowledge in a particular tech stack.

What is bothersome about it is that I had the thought that software engineering is about solving problems, not writing code.

So I have a couple of questions for every software engineer/coder out there:

1. Do you think this is an issue? 
2. If so, how are you managing/have you managed this issue?
Zoom Live Transcription Update 🚨
Tags: a11y, zoom, news
Published: 2021-02-25 15:19:50

---
title: Zoom Live Transcription Update 🚨
published: true
description: Zoom is offering live transcriptions to free users upon request and all free users will have access by autumn 2021.
tags: a11y, zoom
---

Zoom is offering live transcriptions to free users upon request and all free users will have access by autumn 2021.

Link to announcement: https://blog.zoom.us/update-on-live-transcription-for-free-accounts/

Link to request form: https://docs.google.com/forms/d/e/1FAIpQLSccQQ2W-K8naaltkBIbuv6BfJvisy0NZS2qWIKd0gSMUWGGpQ/viewform
if else statement in python
Published: 2021-02-25 15:17:14

Let's talk about the if-else statement.
In programming,  mostly use conditional statement.
you can't think to solve any problem without a conditional statement.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e507pvixn4wxwkek4mde.png)

you can see the example of the if-else condition in the picture.
if (it's raining)
      then I will take the umbrella
else
   not

this is so easy. isn't it?


now I m gonna show you. that how to write a conditional statement in python language. before that, let's look at a flowchart of a conditional statement.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/56o2b2uq4e0f6told7yc.png)

In that flowchart, you can clearly see, if the condition(its rating) is true then he will take an umbrella if the condition is not true then he will not take an umbrella.

Syntax:
if condition:
  print('if the statement is true then print me')
else:
  print('if that condition was not true then print me')

this is the conditional syntax in python.
remember, you have must input a colon after a condition, and should execute in the next line.
otherwise, you can get an error.


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

this is the right syntax. there has no error.
">" this is the 'greater than" operator.
this operator has to check if their age is greater than 18 or not.
in a programming language, there have many mathematical operators.
don't worry about this. I am gonna talk about that.
">" --this is "greater than operator".
"<" -- this is "smaller than operator".
"=" -- this assignment operator.
"==" --this is equal to operator.
"%" --this is the modulus operator or reminder.


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

that's it for today.
The next day I am gonna post about the nested loop.
and thanks for reading this.
happy coding.
What's holding you back from creating as much content as you would like to?
Tags: discuss, writing, codenewbie
Published: 2021-02-25 15:15:32

It's almost March, and many people set goals at the beginning of the year when it came to content creation. Maybe that's the case for you, or maybe you've only begun on your journey.

If so, how are you doing so far? Are you creating as much content as you wanted to? If so, what's helped you, and if not, what roadblocks are you facing?
gsearch plugin for vscode
Tags: vscode, googlesearch, showdev, codenewbie
Published: 2021-02-25 15:05:23

Check out this amazing extension that I found out.
'Googling' is not even a word still all of us literally lives on that. So here you go Integrated Google Search in VS Code.
Extension Link - [google-search](https://marketplace.visualstudio.com/items?itemName=kameshkotwani.google-search)
Cheers to [Kamesh Kotwani](https://www.google.com/search?q=Kamesh+Kotwani&rlz=1C1CHBD_enIN942IN942&oq=Kamesh+Kotwani+&aqs=chrome..69i57&sourceid=chrome&ie=UTF-8) (Author) here. You did a great job my friend.
How to start building your own coding projects with actionable steps!
Tags: beginners, webdev, programming, codenewbie
Published: 2021-02-25 14:56:53

If you found value in this thread you will most likely enjoy my tweets too so make sure you follow me on  [Twitter](https://twitter.com/VladPasca5) for more information about web development and how to improve as a developer. This article was first published on my [Blog](vladpasca.hashnode.dev).

## 1. Search for a YouTube video or article that shows you how to build a project

Just Google "How to build [insert the project you want to build] with [the technologies you want to use]".

A few examples - https://t.co/DvP6FNTc05?amp=1 - https://youtu.be/CI2GwL--ll8

## 2. Code along with the tutorial/article you chose.

While you're coding along make sure you take some notes about the steps you need to take to build the project.

You could also write comments. Use whatever works the best for you but make sure you write the steps.

## 3. After you finished the project delete your code and start from scratch.

Use your notes as guidelines and Google what you don't know.

Use the tutorial only after you've struggled a lot.

Repeat this step until you no longer need the tutorial/article.

## 4. Add your features to the project

Search similar projects on the internet and get inspired from there.

Or just use your creativity.

Build at least 3 features on your own before going to the next step.

## 5. Build a similar project without any tutorial

You should build a project with similar functionality to the first one.

For example, you built a loan calculator now build a Celsius to Fahrenheit converted.

## 6. Keep building

After you finished these 5 steps start again with a completely different project.

For example you built a To-do list app now build a Portfolio website.

I would repeat this about 3 times and then go on and learn more.

## 7. Go back to the old projects

Every time you learn something new go back to your old projects and use that tool there

For example if you built a few projects with JavaScript in the past, after you learn React go and change those projects from JavaScript to React.

## The End

I hope found this useful and if you did please let me know. If you have any question feel free to DM me on  [Twitter](https://twitter.com/VladPasca5) .
Xamarin.Forms deploy to Android 11 emulator in Windows
Tags: xamarin
Published: 2021-03-06 17:45:59

---
title: Xamarin.Forms deploy to Android 11 emulator in Windows
published: true
date: 2021-02-25 14:40:20 UTC
tags: Xamarin
canonical_url: https://blog.rodrigojuarez.com/2021/02/25/xamarin-forms-deploy-to-android-11-emulator-in-windows/
---

I’m usually using the Android emulator while I’m working with VS, and today I was trying to build and deploy to a newly created Android 11 emulator with no luck.

![](https://rodrigojuarezdev.files.wordpress.com/2021/02/image.png?w=808)

As always, Stack Overflow to the rescue!

In [this link](https://stackoverflow.com/questions/63530855/xamarin-app-cant-deploy-to-android-11-emulator), they comment that the problem is that with Android 11 we need a different way of sign the apk.

I didn’t found the option to do it using the UI, so, we need to add the following tag to our Android csproj file for the debug configuration.

```
<AndroidUseApkSigner>true</AndroidUseApkSigner>
```

![](https://rodrigojuarezdev.files.wordpress.com/2021/02/image-1.png?w=793)

I also needed to disable the use of Shared Runtime and Fast Deployment in the Android project properties

![](https://rodrigojuarezdev.files.wordpress.com/2021/02/image-2.png?w=720)

After all the changes, my app is deploying to the Android 11 emulator without issues!
Shorts ( 30 seconds read ) on data structures every developer should know
Tags: javascript, webdev, beginners, tutorial
Published: 2021-02-25 14:39:59

Following are the quick reference links on the data-structure every developer should be aware of. Click on the respective links to view the microideation (30-second reads) or bookmark them for future reference.  

They are helpful to get you started as a beginner or refresh you memory if you are an experienced developer.

* [arrays](https://portal.microideation.com/viewer/ideation/6027e195b4a3db24e81d8ce4)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2sjueg5gqy7xiek720m6.png)
* [linked list](https://portal.microideation.com/viewer/ideation/6028c034b4a3db24e81d8cf6)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y9aej4tzhzx2sp3ocesm.png)
* [circular linked list](https://portal.microideation.com/viewer/ideation/6029233cb4a3db24e81d8cfe)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7doao36niyb8oigbvmbp.png)
* [doubly linked list](https://portal.microideation.com/viewer/ideation/6028c6d3b4a3db24e81d8cf8)
* [stack](https://portal.microideation.com/viewer/ideation/602d2d84bd8d994d6df0e94b)
* [queue](https://portal.microideation.com/viewer/ideation/602e70e4bd8d994d6df0e97f)
* [binary tree](https://portal.microideation.com/viewer/ideation/6033bd5e873d00482c44218d)
* [heap](https://portal.microideation.com/viewer/ideation/603511cb873d00482c442199)
* [graph](https://portal.microideation.com/viewer/ideation/6037acbb873d00482c4421e8)
Day 59 Of 100DaysOfCode : More About Algorithm
Tags: womenintech, 100daysofcode, codenewbie, beginners
Published: 2021-02-25 14:36:01

This is my 59th day of #100daysofcode and #python learning like yesterday today also learned more properties of SQL (subquery inside where, subquery inside from) from datacamp. Also tried to slove assignment in coursera. 

Here is a code for fractional knapsack 
#python code
```python
# from https://www.tutorialspoint.com/program-to-implement-the-fractional-knapsack-problem-in-python
class FractionalKnapsack:
    def solve(self, weights, values, capacity):
        res = 0
        for pair in sorted(zip(weights, values), key=lambda x: - x[1]/x[0]):
            if not bool(capacity):
                break
            if pair[0] > capacity:
                res += int(pair[1] / (pair[0] / capacity))
                capacity = 0
            elif pair[0] <= capacity:
                res += pair[1]
                capacity -= pair[0]
        return int(res)

ob = FractionalKnapsack()
weights = [20, 50, 30]
values = [60, 100, 120]
capacity = 50
print(ob.solve(weights, values, capacity))
```
Possible optimal solution will be,
```
180
```
<blockquote class="twitter-tweet"><p lang="en" dir="ltr">Day 59 Of <a href="https://twitter.com/hashtag/100DaysOfCode?src=hash&amp;ref_src=twsrc%5Etfw">#100DaysOfCode</a> and <a href="https://twitter.com/hashtag/Python?src=hash&amp;ref_src=twsrc%5Etfw">#Python</a> <br>* Fractional knapsack <a href="https://twitter.com/hashtag/DEVCommunity?src=hash&amp;ref_src=twsrc%5Etfw">#DEVCommunity</a> <a href="https://twitter.com/hashtag/womenintech?src=hash&amp;ref_src=twsrc%5Etfw">#womenintech</a> <a href="https://twitter.com/hashtag/CodeNewbie?src=hash&amp;ref_src=twsrc%5Etfw">#CodeNewbie</a> <a href="https://t.co/XIWlRYpoa4">pic.twitter.com/XIWlRYpoa4</a></p>&mdash; Durga Pokharel (@mathdurga) <a href="https://twitter.com/mathdurga/status/1364944660209299474?ref_src=twsrc%5Etfw">February 25, 2021</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
Voice search in eCommerce
Tags: voice, ux, react, webdev
Published: 2021-02-25 14:25:13

Search is a very important component for many apps and services and especially so in eCommerce.

Voice offers [many unique features](https://www.speechly.com/blog/voice-search/) that are not possible by using more traditional approaches, such as:

* Learn the language your users are using of your products
* Accessibility benefits for people who have difficulties using keyboard and mouse
* Support users on the go
* Intuitive user experience
* No need to clutter the UI with filters

Speechly is a developer tool for improving user experience with voice user interfaces and we created a demo showcasing how voice would work in a fashion eCommerce setting.

You can try the demo [here](https://fashion.speechly.com/).

Would be great to hear your thoughts! Would you use voice when browsing eCommerce sites? How would you improve the experience?

You can see a demo video of the experience below.

{% youtube xI68NT8D1m8 %}

You can read more about what we mean with a voice user interface in [this article](/blog/what-is-voice-user-interface/) or see more [examples of voice user interfaces](/blog/voice-user-interfaces-examples/).
Day47,48,49:100DaysOfCode
Tags: 100daysofcode, programming, productivity
Published: 2021-02-25 14:24:25

studied fermat's little theorem...
tried some past cf and leetcode contest ques..


studied two pointer approach nd practised some problems..
further stutdied more about thread in spring boot...

gave atcoder contest solved 2 ques.....,


EOD(not at all producitive week :( )


You can Follow me->
https://github.com/singhtaran1005
https://www.linkedin.com/in/taranpreet-singh-chabbra-27517918a/
Install Node.js on Ubuntu 20.04

Tags: node, javascript, ubuntu, tutorial
Published: 2021-02-25 14:20:28

Learn how to install Node.js and NPM on Ubuntu 20.04 LTS with this quick tutorial.

Find the latest version of Node.js through the apt repository.

`sudo apt-cache show nodejs`

The apt repository version is often outdated compared to the latest long-term support version available on the Node.js website. So we will install it from there instead.

Go to the Node.js website - https://nodejs.org/en/.

Click on the 'other downloads' link and navigate to 'install node.js via package manager'.

Go to this URL - https://github.com/nodesource/distributions/blob/master/README.md.

Scroll down until you find the LTS version of Node.js and proceed to the next step.

To install Node.js you will need to make sure you have curl installed.

`curl --version`

If you need to install curl -

`sudo apt install curl`

Now go back to the github page we opened and proceed to follow the instructions.

```curl -fsSL https://deb.nodesource.com/setup_lts.x | sudo -E bash -
sudo apt-get install -y nodejs```
Once this has run, you will want to check the version to confirm that node has installed as it should.

`node --version`

You can also check the NPM version as it was installed with Node in this case.

`npm --version`