teleren/devto huggingface dataset:
Infinite Scrolling JavaScript | Learn JavaScript
Tags: javascript, infinitescroll, html, css
Published: 2022-02-03 06:27:36

Explained how to implement Infinite Scrolling using JavaScript's Intersection Observer API.

Covered most important JavaScript topics like Arrow Functions, Fetch API, Object Destructing , Async  & Await , Promise ,DOM manipulation etc.

Intersection Observer :https://youtu.be/rSeXJw6pZK4
🔥🔥🔥🔥🔥
Timeline :
00:00 Teaser
00:40 HTML markup
03:08 Fetch API - Fetch users data
06:05 Arrow Function- Render Users
06:35 Object Destructuring- Extract what is required
08:16 DOM Manipulation- InsertAdjacentHtml
10:18 Infinite Scrolling -Intersection Observer
11:06 Async & Await- Less is always better
14:35 Fetch new Users on Scroll
17:00 Observe Latest Last User
19:10 Unobserve to Current Last User

{%youtube n3i4j2b8PIA%}
Transmitting a sine wave from Matlab to Pluto
Tags: matlab
Published: 2022-02-03 06:16:38

I recently had to configure my Matlab code to send a sine wave to Adalm Pluto. I set the gain to -1 and the frequency to 2.4 GHz. I am pausing the code so that I can check the pulse on my spectrum analyzer.

Below is the code that I used.

```
deviceNameSDR = 'Pluto'; % Set SDR Device
radio = sdrdev(deviceNameSDR);           % Create SDR device object

txGain = -1;

% sdrTransmitter = sdrtx(deviceNameSDR); % Transmitter properties
% sdrTransmitter.RadioID = 'usb:0';

tx = sdrtx(deviceNameSDR);
tx.RadioID = 'usb:0';
tx.CenterFrequency = 2.415e9;
tx.BasebandSampleRate = fs;
tx.Gain = 0;

fs = 2e6;
sw = dsp.SineWave;
sw.Amplitude = 100;
sw.Frequency = 2.432e9;
sw.ComplexOutput = true;
sw.SampleRate = fs;
sw.SamplesPerFrame = 20000; 
txWaveform = sw();

transmitRepeat(tx,txWaveform);

pause(60)

release(tx);
```

The pulse looks like below.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ru316exwomnijdiaex6s.jpeg)

I connected Pluto to my PC and my spectrum analyzer.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3lpeo0f4gt1pok4h3fcw.jpeg)
หารายได้ง่ายๆ
Published: 2022-02-03 06:16:36

หารายได้ง่ายๆได้แค่เพียงมีโทรศัพท์มือถือเครื่องเดียวเท่านั้น ขั้นตอนก็ไม่ยุ่งยาก ได้เงินง่ายอีกด้วย เล่นที่ไหนก็ได้  สะดวกสบายมากๆเลยครับ ห้ามพลาดเด็ดขาด คลิ๊กได้เลย [แทงบอลออนไลน์](https://ufaeasy.info/%e0%b9%81%e0%b8%97%e0%b8%87%e0%b8%9a%e0%b8%ad%e0%b8%a5%e0%b8%ad%e0%b8%ad%e0%b8%99%e0%b9%84%e0%b8%a5%e0%b8%99%e0%b9%8c/) หรือ แอดไลน์ [@RSUFAEASY](url)https://line.me/ti/p/~@RSUFAEASY
2 amazing web apps for developers
Tags: webdev, tooling
Published: 2022-02-03 06:03:58

Amazing tools for developers to that might come in handy and increase productivity when working with images.

1. [removebg](https://www.remove.bg/)
If you want to remove the background of any photo just select your image and download the image with the background removed. It's fast and really great.  
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/f8wquxfm9qne3wi6u9y4.png)
 

2. [Profile Pic Maker](https://pfpmaker.com/)
You can use it to generate professional profile pics from any photo. It uses background removal AI, beautifies your photo, and you can also choose from different backgrounds for your image. It generates dozens of profile pic variations automatically.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7bukv2ggtr7ibvwzxzlr.png)
What is GraphQL? (And is it Really Better than REST)?
Tags: graphql, coredna, webdev, opensource
Published: 2022-02-03 05:55:04

As new technological innovations continue to emerge, buoyed by an explosion of digital devices and changing consumer habits, businesses continue to search for the fastest and most effective means of keeping up with the changing digital ecosystem.

Many have adopted new technology stacks, including API-driven headless CMS platforms as a means of producing and delivering content for all of the right channels.

But just as all CMS platforms aren’t created equally, neither are all APIs. Several organizations are already using GraphQL for their API needs, but what is it, and how does it compare to API standards such as REST?

## What is your stance on the topic? Let us know below


Read our blog 'What is GraphQL? (And is it Really Better than REST)' to find out more about GraphQL as we delve into:

**What is GraphQL?**

**How does GraphQL querying work?**

**What is REST (and is it old news)?**

**GraphQL vs REST**

**Why marketers should care about GraphQL**

**GraphQL in action: How Netflix used GraphQL for its marketing tech team**

**Using GraphQL with Core dna**


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ll8ppg2w2ppndv8l20a0.png)

Check out our free Core dna GraphQL guide on our website: Resources > Insights > Guides.
What is your favorite productivity tool?
Tags: productivity
Published: 2022-02-03 05:51:13

Mine is definitely Notion, the Swiss Army Knife that can be as complex as you want it to be. From replacing a notebook for pretty notes to keeping track of your accounts in a table.
There are sites that give you a very quick and dynamic introduction such as:

[Aprende Notion](https://aprendenotion.com/)

Following the inspiration, there are many templates to duplicate and use according to your needs. You can find a lot of them here: 

[Templates](https://www.notion.so/templates)
[Notioneverything](https://www.notioneverything.com/)
Regular Expression Matching
Published: 2022-02-03 05:37:19

Given an input string s and a pattern p, implement regular expression matching with support for '.' and '*' where:

'.' Matches any single character.​​​​
'*' Matches zero or more of the preceding element.
The matching should cover the entire input string (not partial).

 

Example 1:

Input: s = "aa", p = "a"
Output: false
Explanation: "a" does not match the entire string "aa".
Example 2:

Input: s = "aa", p = "a*"
Output: true
Explanation: '*' means zero or more of the preceding element, 'a'. Therefore, by repeating 'a' once, it becomes "aa".
Example 3:

Input: s = "ab", p = ".*"
Output: true
Explanation: ".*" means "zero or more (*) of any character (.)".
 

Constraints:

1 <= s.length <= 20
1 <= p.length <= 30
s contains only lowercase English letters.
p contains only lowercase English letters, '.', and '*'.
It is guaranteed for each appearance of the character '*', there will be a previous valid character to match.

**Code : - **

def isMatch(self, s: str, p: str) -> bool:
        return self.isMat(s, p, len(s)-1, len(p)-1, False)
    
    def isMat(self, s: str, p: str, si: int, pi: int, isAst):
        if pi < 0:
            return si < 0
        if p[pi] == '*':
            return self.isMat(s, p, si, pi-1, True)
        
        result = False
        if isAst:
            if si >= 0 and self.compare(s[si], p[pi]):
                result = result or self.isMat(s, p, si-1, pi, True) 
            result = result or self.isMat(s, p, si, pi-1, False)
        elif si >= 0 and self.compare(s[si], p[pi]):
            result = result or self.isMat(s, p, si-1, pi-1, False)

        return result
        
    def compare(self, a, b):
        return a == b or a == '.' or b == '.'```
Amazon VPC and Networking - Hands-On Demos
Tags: aws, devops, cloud
Published: 2022-02-03 05:34:55

In this youtube video, I will demonstrate Amazon VPC and Networking. I have divided this video in 4 different parts. In each part we will perform certain steps to understand various VPC components.

Part 1: 
Create a VPC, Create and attach Internet Gateway, Create a subnet, Setup Route table, Associate route for 0.0.0.0/0 to Internet Gateway, Setup IAM role, Launch a EC2 instance, setup Security group and SSH to instance to verify we can ping google.com and also list S3 buckets.


![VPC, Public Subnet, Routing](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dyo6noy504b8vfbidddv.png)

Part 2:
In the same VPC we will add another Subnet, a Route table, with no route to 0.0.0.0/0 hence it becomes Private Subnet. We will launch an EC2 instance in the Private Subnet, Setup Security Group to allow SSH to it via the Public Subnet's instance's Security group. Once we SSH into the Private instance, we can verify that we can't ping to google.com or list the S3 buckets as there is no Internet bound route for the Subnet.


![Private Subnet And Routing](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nly0bt8n6obq81z2rqud.png)

Part 3:
Create NAT Gateway in Public Subnet, Set a route in the Private Subnet's Route table, Now Private instance can access Internet. We can verify is by SSH into the instance as we did in Part 2 and now we are able to ping google.com and also list the S3 buckets.


![NAT Gateway Demo Architecture](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q89kmf8gkrghqzq8jgy8.png)

Part 4:
Delete the NAT Gateway. Setup VPC End point to S3 service and attach to the Private Subnet's Route. EC2 instance should be able to access S3 without Internet access. It should not be able to ping google.com.


![VPC Endpoint Demo Architecture](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/spzds5eqpwa70u1mzlnv.png)

The detailed instructions and architecture diagrams are available in the Github repository

https://github.com/mycloudtutorials/aws-demos/tree/master/aws-vpc-and-networking

Youtube Video:
{% youtube 4z_-VkRg_Bs %}
SQLAlchemy Expressions for Insert, Update and Delete in Python Flask
Tags: python, flask, sqlalchemy
Published: 2022-02-03 05:14:18

In this video I'm going to show you how to use SQLAlchemy Expressions for Insert, Update and Delete in Python Flask.

{% youtube Vrf9CR1617Y %}

You can find the code at below gist
https://gist.github.com/arundhaj/51bcb0df82b5f27f25b54bfe4afb7651
#29 - Ones' Complement CodeWars Kata (7 kyu)
Tags: javascript, webdev, tutorial, 100daysofcode
Published: 2022-02-03 04:44:06

##Instructions
The Ones' Complement of a binary number is the number obtained by <u>swapping all the 0s for 1s and all the 1s for 0s</u>. For example:

> onesComplement(1001) = 0110
> onesComplement(1001) = 0110

For any given binary number,formatted as a string, return the Ones' Complement of that number.

---

##My solution:

```javascript
function onesComplement(n) {
  return n.split('').map(n=>n == '0' ? '1' : '0').join('')
};
```
---

##Explanation
I splitted the string into an array, and the I mapped it, using a ternary conditional I checked if the number being iterated is '0' it will change it to '0', else it'll change it to '0', and at the end I just joined the array.

---

**What do you think about this solution? 👇🤔**

[My Github](https://github.com/Cesardlr)
[My twitter](https://twitter.com/cesar__dlr)
[Solve this Kata](https://www.codewars.com/kata/59b11f57f322e5da45000254)
Access to Location, Network Status and other Browser Provided Properties in React
Tags: browser, navigator, react, beginners
Published: 2022-02-03 04:36:05

Browsers are becoming more and more powerful. Nowadays, browser can provide information about your **network status** (either you are **online** or **offline**), your **location** (geographic **coordinates**) among a million other things. Perhaps, the most intriguing thing is that you can even access the **haptic engine** in your device through your browser.

**But how do we leverage this power?**

Well, [Navigator interface](https://developer.mozilla.org/en-US/docs/Web/API/Navigator) (`windows.navigator`) provides an API to do so!

However, it is good to take advantage what React has to offer, namely hooks!

Here is an example how you would access the location with the   [react-browser-navigator NPM package](https://www.npmjs.com/package/react-browser-navigator) after installing the the package with `npm install react-browser-navigator`:

```js
// import the module
import useNavigator from "react-browser-navigator";

function App() {
  // accessible properties
  let { getCurrentPosition } = useNavigator();

  // getCurrentPosition
  useEffect(() => {
    if (!isNull(getCurrentPosition)) {
      // printing out the entire object
      console.log("getCurrentPosition", getCurrentPosition);
    }
  }, [getCurrentPosition]);

  return (
    <div>
      <span>Latidude:</span> {getCurrentPosition?.coords.latitude}
      <br />
      <br />
      <span>Longitude:</span> {getCurrentPosition?.coords.longitude}
    </div>
  );
}
```
There are lots of other properties that you can access. For instance, are you `onLine` or not?!

```js
// import the module
import useNavigator from "react-browser-navigator";

function App() {
  // list accessible navigator properties (find them all below in a table)
  let { networkStatus } = useNavigator();

  return (
    <div>
      {networkStatus === true ? (
        <span>We are online!</span>
      ) : (
        <span>We are offline!</span>
      )}
    </div>
  );
}
```
Head over to the [package's page](https://www.npmjs.com/package/react-browser-navigator) to see more.

There is also an extended roadmap to add more properties.
Время самый важный ресурс
Tags: time, stepbystep, discuss, thoughts
Published: 2022-02-03 04:32:49

Всем доброе утро, приготовили кофеюшку и готов написать с утра. Прочитал в одной книге (да-да, я помню что мне лень читать книги, но бывает иногда пару страниц почитаю) так вот очень понравилась мысль в этой книге. Только вдумайтесь насколько автор прав: 
- Нужно с пеленок учить людей одному очень важному принципу: единственный важный ресурс — это время, ибо он не восполняемый. От слова "совсем" не восполняемый. Пока мы не изобрели бессмертие, каждую минуту жизни стоит жить так, чтобы было гордо — а иногда немного стыдно — рассказать внукам о приключениях. Ну или мужикам на рыбалке похвастать хотя бы.

Как только общество перестанет гнаться за деньгами, а начнет работать на уменьшение времени, затраченного на труд — мы и увидим по-настоящему эффективное государство. Работайте умом, а не мышцами.

Утром же увидел пост у **Умида Гафурова (troll.uz)** следующие слова:  Я думаю, что корень всего, что происходит вокруг — это образование. Точнее от его отсутствие.

Не жди, что государство восстановит систему образования. Жизнь пройдет. Займись самообразованием. Если сложно читать книги, можешь получить любую интересующую информацию в интернете. Выучи язык. Знаешь русский? Хорошо. Английский? Еще лучше! 


Я заметил, что сейчас ситуация улучшилась, чем в начале пути. Я стал меньше заходить в социальные сети. Я трачу в день около часа на социальные сети и то, во время обеда. Ещё немного старания и добьем полный контроль над временем.

**Всем добра и новых знании. Держимся, учимся, ради будущей нашей страны.**
Who am I?
Tags: productivity, webdev
Published: 2022-02-03 04:15:12

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v35crn1z9q7ivm48eakn.png)
 
Meu nome é Ítalo, tenho 26 anos, nasci em Natal/RN e moro em Pernambuco há 3 meses. Comecei à trabalhar desde os 13 anos na construção civil, como auxiliar de pedreiro, almoxarife e o que aparecia no canteiro de obra. Após término do ensino médio, seguindo a carreira no ambiente da construção, consegui uma bolsa pra estudar Engenharia Civil, mas no decorrer do curso, no 7° período, tive que trancar minha matrícula por causa do desemprego.
 
Quando fiquei empregado novamente em 2016, fui notificado que havia perdido a bolsa, infelizmente.

Em 2016, passei em uma vaga pra trabalhar na área administrativa em uma empresa multinacional, onde consegui crescer profissionalmente ano após ano e me dedicava em cada oportunidade que surgia dentro da empresa. Enquanto isso, nas pausas eu aproveitava pra estudar e tomar café.

Em 2021, consegui uma bolsa pra estudar no curso de extensão do IMD (Instituto Metrópole Digital/UFRN), e consegui finalizar o curso obtendo conhecimento em banco de dados, front e backend. Essa foi minha primeira oportunidade que apareceu no ambiente de tecnologia. 

Após se inscrever no Sisu, fui chamado na lista de espera pra UFRN, no curso de Ciência e Tecnologias, com foco em Engenharia da Computação e essa foi minha segunda oportunidade de estudos na área.

Isso já havia [estagiado como backend por um mês](https://dev.to/x8ing_/meu-primeiro-mes-como-desenvolvedor-back-end-jr-43k4) em uma startup e resolvi mudar de vida indo pra Pernambuco morar com minha esposa.

Foi então que em 2022 recebi a noticia sobre o meu desligamento da multinacional como administrativo. 

Atualmente, eu faço parte de uma empresa de consultoria web3, com clientes nacionais e internacionais, estou trabalhando como fullstack e estudando mais web3. Onde, acredito seriamente que será um mercado próspero e enriquecedor.

> Anything is possible
 - Kevin Garnnet.
TIL – List formatting with Intl.ListFormat
Tags: javascript, todayilearned
Published: 2022-02-03 04:09:00

---
title: TIL – List formatting with Intl.ListFormat
published: true
description: How to turn an array of strings into a human-friendly string, inserting 'and', 'or', or '&' before the last word.
tags: javascript, til
//cover_image: https://direct_url_to_image.jpg
---

Intl.ListFormat is an object for formatting lists into human-friendly language.

It takes an array of values and turn it into a comma-separated string list with an 'and', 'or' or '&' (and other languages' equivalents) before the last word.

Basic usage:

```javascript
let fruit = ['Apples', 'Oranges', 'Bananas'];
let formatter = new Intl.ListFormat('en');
let result = formatter.format(fruit);
// Result:  'Apples, Oranges, and Bananas'
```

With 'or' instead of 'and':

```javascript
let list = ['Chicago', 'Minneapolis', 'Madison'];
let formatter = new Intl.ListFormat('en', { type: 'disjunction' });
let result = `Are you in ${formatter.format(list)}?`;
// Result: 'Are you in Chicago, Minneapolis, or Madison?'
```

One downside is that you can't remove the Oxford comma, the one before 'and'/'or'/'&'.

MDN Docs: ('https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/ListFormat')
Simple reverse proxy using docker/nginx
Tags: docker, nginx, devjournal
Published: 2022-02-03 03:47:42

## Introduction

Hello! I needed to share a local service that was running in one of my Virtual Machines across my company's VPN. I didn't want to set up the connection inside my virtual machine so for this I used Nginx's reverse proxy. 

---

## Requirements
* Docker
* Docker-Compose

---

First I created the default config file for Nginx:

```bash
# defaults.conf 
server {
  listen [Company VPN IP]];
  server_name [Company VPN IP]];

  location / { 
    include /etc/nginx/includes/proxy.conf;
    proxy_pass [VPN Service Address]]
    allow all;
  }   

  access_log off;
  error_log off;

  charset UTF-8;
}
```

Pretty simple file, I also didn't need any of the log files so I turned them off.

Next I had to create the proxy config file:

```bash
# includes/proxy.conf
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;
proxy_buffering off;
proxy_request_buffering off;
proxy_http_version 1.1;
```

Finally the docker files!

```bash
# Dockerfile
FROM nginx

COPY ./includes /etc/nginx/includes/
COPY ./default.conf /etc/nginx/conf.d/default.conf
```

```bash
# docker-compose.xml
version: '3' 
services:
  proxy:
    build: ./
    network_mode: 'host'
```

Pretty simple, as I wasn't using anything on port 80 I decided to set the network_mode to "host".

Finally to build and start!

```bash
docker-compose build && docker-compose up -d
```

With this I was able to view the service running on my virtual vachine via the company's VPN connection. :)
Rails where('n > ?', m) without sql
Tags: rails
Published: 2022-02-03 03:41:15

---
title: Rails where('n > ?', m) without sql
published: true
description: 
tags: rails
---

## 😅 SQL Way
```ruby
User.where('age > ?' age)
```


## 😆 ORM Way
```ruby
User.where(User.arel_table[:age].gt(age))
```

You can also use these methods.

- = (equal) : eq
- < (less than) : lt
- <= (less than equal) : lteq
- > (greater than) : gt
- >= (greater than equal) : gteq

## Tips
```ruby
User.where(User.arel_table[:name].matches("%#{name_likely}%"))
```

## 💎 Gem Way
I hear that the gem named "Squeel" is very useful for this case.

```ruby= 
User.where{age > target_age}
```
Simple ways to convert a string into a number
Tags: javascript, webdev, beginners, node
Published: 2022-02-03 03:36:52

### Hello Folks 👋
What's up friends, this is **SnowBit** here. I am a young passionate and self-taught front-end web developer and have an intention to become a successful developer.

Today, I am here with a basic topic for my beginner friends and javascript revisers. Happy Reading!

---

In this article,  I will be discussing a few methods to convert a string into a number.

### parseInt()
```js
const x = "5"

parseInt(x) // 5
```
You can easily convert a string to a number with `parseInt()`. If you pass any word or a letter in `parseInt()` then it will return `Nan` - **Not a Number**

### Number()
In JavaScript, the `Number()` method converts the value to a number and if the value failed to convert then it will return `NaN`.
```js
const x = "5"

Number(x)
```
### Plus (+) unary operator
```js
const x = "5"

const num = +x
```
Using the `+` operator alone before an element indicates a math operation and tries to convert the element to a number, and if it fails to do - it will return `NaN`

---

Thank you for reading, have a nice day!
**Your appreciation is my motivation 😊**

- Follow me on Twitter - [@codewithsnowbit](https://twitter.com/codewithsnowbit)
- Subscribe to me on YouTube - [Code With SnowBit](https://www.youtube.com/channel/UCNTKqF1vhFYX_v0ERnUa1RQ?view_as=subscriber&sub_confirmation=1)
Easiest Alphabet pyramid using python😀
Tags: python, programming, tutorial, beginners
Published: 2022-02-03 03:02:18

1) ord() function return the unicode from a given character

n=int(input("enter the number"))
k=ord("A")
for i in range(n):
    for j in range(i+1):
        print(chr(k),end=" ")
        k=k+1
    print()

output:![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1uw2aweic0e12ktx0xr9.png)
 
2)
def pattern(n):
   num=65
   for i in range(0,n):
      # print(i)
      for j in range(0,i+1):
         ch=chr(num)
         print(ch,end='')
      num=num+1
      print("\r")
n=5
pattern(n)

output:![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zhzf4hznkxpt9if6kskk.png)