teleren/devto huggingface dataset:
dev.to API - returning 404 permanently once received it once.
Tags: help, api, devto
Published: 2021-03-22 10:17:54

Just a quick one, has anyone ever played with the "unofficial" parts of the dev.to API?

I am trying to enumerate for new users (I know, naughty but I have good intentions!) and put together [a page that welcomes new users to the site automatically](https://dev.to/inhuofficial/a-warm-automatic-welcome-to-our-new-users-week-1-17dg-temp-slug-971641?preview=7fd885e2b264380e2bd2e08b86d3464c6dc51846262d7ddde640a5fb38a77edb3667f8bf0e4c2b37b93ab0e5cf56f9f50cf6a5a56512dc435a61926d).

The page works fine but gathering the users is proving to be problematic.

The way I am doing it at the moment is starting at the latest userID and then looking at the next userID and seeing if the page exists using the end-point `https://dev.to/api/users/{userID}`.

The problem is that once that end-point returns a 404 error (as the user does not exist yet) it will always return a 404 error to my script, even when the record does exist in the future and returns a 200 status in the browser.

I thought it might be rate limiting or something but the script works fine if I skip any userIDs I have tried previously (and if it is rate limiting a `404` error is misleading)?

I have tried sending headers with `cache-control: no-cache` and `pragma: no-cache` just in case but this still happens.

I am using cURL in php. 

I am currently checking for a new user every 30 seconds, but even if I change this to 10 minutes I get the same problem.

Final question: is there an API end-point that actually lists new users as that would save me polling like this.
Chrome DevTools tip: use cmd+shift+p
Tags: webdev, beginners, tips
Published: 2021-03-22 09:45:11

Today I learned about extremely useful Chrome DevTools hotkey: `cmd+shift+p`.

Let's imagine that we need to highlight all the redrawable areas in green (Show paint flashing rectangles). Without the hotkey we have to open the panel with additional tools, switch to Rendering and check the Paint Flashing checkbox.

With hotkey it's faster: open DevTools with `cmd+alt+i`, press `cmd+shift+p`, start typing "paint" and press enter:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pydis2itwfk22chicx34.jpeg)


**tl;dr:** there's `cmd+shift+p` in Chrome DevTools, just like in Sublime Text or any other modern text editor.
Hosting NodeJs Application on Heroku Platform using Heroku CLI
Tags: node, heroku, hosting, guide
Published: 2021-03-22 09:36:58

In this blog, we will learn how to `Host` NodeJs Application on `Heroku` Platform using `Heroku CLI`. No need to leave your terminal or code editor, all from the terminal itself, huh?, pretty cool, right? Let's see how we can achive this.

Pre-requisite
-------------

-   [Heroku cli](https://devcenter.heroku.com/articles/heroku-cli)
-   [Heroku Account](https://www.heroku.com/)

Logging Into Heroku
-------------------

Heroku login is required once. Enter below command in your terminal and follow up the prompt window and `Authorize`
```
heroku login
```

Specify the version of node
---------------------------

Add The version of Node.js to your `package.json` file:

```
"engines": {
    "node": "10.x"  // replace x with your node version like 10.16.2
},
```

Specifying a start script
-------------------------

create a `Procfile` file inside the root directory of the project and add the below code in it

```
web: node app.js
```

By default, Heroku will look into our `package.json` file under the scripts section and grab `start` command. Sometimes we won't have that defined or it will be different from what we want the server to execute. We can specify the exact command we want by creating a `Procfile` file.

Create Heroku App and Remote Repository on Heroku
-------------------------------------------------

Specify a unique name for your application, this name should be globally unique.

```
heroku create <app-name>
```
example:

```
heroku create todo-app-rest-backend-nodejs
```

​Rename Your APP - Optional
---------------------------

If you got `random` app name or if you want to rename your Heroku app then use the below command to achieve it from the terminal itself.

```
heroku apps:rename <new-app-name> --app <old-app-name>
```

​Build your app and run it locally - Optional
---------------------------------------------

```
heroku local web
```
Deploying Code To Heroku
------------------------

```
git push heroku master
```
`Once the build and deployment is successful you will receive the url of the Hosted Application in your terminal.`

If your Project has Environment Variables then Follow Below Along
-----------------------------------------------------------------

### Set a config variables on heroku app

Use below command for each environment variable to set all of your env variables and you are done.

```
heroku config:set <environment-variable-name>=<value>
```

### Examples:
```
heroku config:set GITHUB_USERNAME=joesmith
```

```
heroku config:set PORT=3000
```

`Congratulations!! You had successfully learned how to host the NodeJS application on Heroku Like a PRO`
Set default SSH key for authenticate
Tags: ssh, config, git, bash
Published: 2021-03-22 09:32:16

Navigate to `~/.ssh` and if using Windows and git bash go to `C:\Users\<user>\.ssh`

Create a file named `config` in following format

```bash
Host *.someurl.com
IdentityFile ~/.ssh/my_key
```

In this example `*` (star) is for everything. Now to connect do `ssh ubuntu@abc.someurl.com`.

Some more examples of ssh config file.

```bash

Host someurl.com
IdentityFile <path to private key>

Host <ip address>
IdentityFile <path to private key>
```

You can further define config to save time connecting to machines

```bash
Host dev
        HostName dev.mysite.com
        IdentityFile <path to private key>
        User ubuntu

Host stage
        HostName stage.mysite.com
        IdentityFile <path to private key>
        User <username>             
```

And directly connect with `ssh dev` or `ssh stage`.
Observables | Definición, Declaración y Uso, Básico
Tags: rxjs, observables, typescript
Published: 2021-03-22 09:30:53

> Todo **RxJS** se basa en `Observables`.

**Definición:**

Es un objeto que puede emitir valores. Puede no emitir, emitir sólo uno, o emitir N cantidad de valores. 

**Declaración:**

```csharp
const obs$ = new Observable<string>();
```

`obs$` - Contiene un signo `$` de pesos al final. Indica que la variable es un observable.

`Observable<string>();` - Se crea una instancia de `Observable`, donde entre signos mayor y menor viene el tipo de dato devuelto en el observable. Entre los signos `< >` se especifica qué es lo que está fluyendo dentro del `Observable`. Pueden ser textos, numeros, modelos, clases, estructuras de datos, etc. ***Es muy importante definir qué tipo de dato fluye en el `Observable`.***

**Emisión de valores**

Esto lo hacemos a través de la función `next()`.

```csharp
const obs$ = new Observable<string>(subs => {

    subs.next("Hola");
    subs.next("Mundo");

});

obs$.subscribe(console.log);
```

**Salida**
![Salida](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hs31o1hoaw8sm8gno3do.png)


`subs.next()` - Emisión de información.

En el ejemplo, se hacen 2 emisiones a los subscriptores. `"Hola"` y `"Mundo"` que son textos. 

Las emisiones se realizan siempre y cuando haya al menos un subscriber.

**`complete()`**

Este método hará que se detenga la emisión de información. Cada `next()` después del método `complete()`, ya no será emitido.

```csharp
import { Observable } from 'rxjs';

// const obs$ = Observable.create(); También se puede crear así.

const obs$ = new Observable<string>(subs => {

    subs.next("Hola");
    subs.next("Mundo");

    subs.complete();

    subs.next("Cruel");

});

obs$.subscribe(console.log);
```

En este ejemplo, la salida seguirá siendo la misma. La emisión después del `complete()` se omitirá.


Imagen de <a href="https://pixabay.com/es/users/sweetlouise-3967705/?utm_source=link-attribution&amp;utm_medium=referral&amp;utm_campaign=image&amp;utm_content=5257599">Luisella Planeta Leoni</a> en <a href="https://pixabay.com/es/?utm_source=link-attribution&amp;utm_medium=referral&amp;utm_campaign=image&amp;utm_content=5257599">Pixabay</a>
🚨Need Help With DevOps?
Tags: devops, github, news, azuredevops
Published: 2021-03-22 09:22:47

If you need help with DevOps, GitHub or Azure DevOps... don't look further!

I've finally set up a platform for you to [BOOK a 1:1 consultation](https://geni.us/cdconsult) with me! I've been working in the DevOps field (and with ALM, _Application Lifecycle Management_, before that) for more than 14 years!

We can talk about ___anything DevOps___! And if you need help with GitHub or Azure DevOps, I can do that as well!

[![Consult](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i2pls4y8e01cef9bydqm.png)](https://geni.us/cdconsult)

➡ Just go to [https://geni.us/cdconsult](https://geni.us/cdconsult) right now to see the available options and __book your 1:1 consultation today__! ⬅
Email Converter for multiple Email Migration
Published: 2021-03-22 09:20:56

This multi functional Email Converter Tool can easily convert any email file like PST, OST, MBOX, Thunderbird, EMLX, EML and MSG to various formats like PST, EML, EMLX, MSG, TGZ, NSF, HTML, MHTML, MBOX and PDF format without any alteration. 

It helpful to convert password protected or locked files into other format without any hassle. It maintain data integrity and will not change original formatting during conversion. Save resultant emails at user specified location. 

An enhanced easy to use user friendly interface also provided by this software for all users. Before using this software you should use it free demo version to understand it features and functions. 

Visit here:- https://www.emailconverter.recoverydeletedfiles.com/
Some small Css tips #011
Tags: webdev, css, html, beginners
Published: 2021-03-22 09:10:09

---
title: Some small Css tips #011
published: true
description: I try to tweet a small css tip every day. Here is a collection of some of them.
canonical_url: https://since1979.dev/some-small-css-tips-011/
cover_image: https://since1979.dev/wp-content/uploads/2021/03/small-css-tips-011.jpg
tags: webdev, css, html, beginners
---

To continue on my [previous post](https://dev.to/vanaf1979/some-small-css-tips-010-3m48) here are some more tweets with little Css tips that might help you in your projects. 

### Set css properties using javascript.
{% twitter 1362381473416941569 %}
{% codepen https://codepen.io/Since1979/pen/wvoJNMw %}

--- 

### Css Conic gradients.
{% twitter 1362731770991501312 %}
{% codepen https://codepen.io/Since1979/pen/abBJrdV %}

--- 

### Css Hsl color introduction.
I didn't put out a new video this week, but you might have missed this one.
{% youtube AL6mFBeJ2wM %}
CodePen: https://codepen.io/Since1979/pen/dyOYvJO

--- 

### Css 3D transforms.
{% twitter 1363817955151261699 %}
{% codepen https://codepen.io/Since1979/pen/YzprrXN %}
#### A bit more advanced example
{% codepen https://codepen.io/Since1979/pen/NWbaPRg %}

--- 

### Css 3D transform playground.
{% twitter 1363851323792359430  %}
{% codepen https://codepen.io/Since1979/pen/wvormvZ %}

--- 

### Subscribe and Follow

**[Subscribe to my Youtube channel.](https://www.youtube.com/channel/UCeyqA3y26RlnfUSx3ufgFoA)**

**[Follow me on Twitter](https://twitter.com/Vanaf1979)**

**Thanks for reading/watching and stay safe**
Let's Create Anime App - Part 1
Tags: vue, api, webdev
Published: 2021-03-22 09:09:43

Hi everyone! Today we'll create an vue anime app using [Jikan](https://jikan.docs.apiary.io)

github repo: https://github.com/yagmurmutluer9/vue-anime-app
demo: https://vue-anime-app.netlify.app 

Everything i write or code is for the learning of my vue journey. So  I write what I learn. I want to develop this app while I'm learning new stuff. I hope you enjoy. =)

## How to pass data to a child component?

Component is a piece of code that we use in our application. If the code will appear at different places or the code that we write getting complicated then we use components. 

Let's create an component called Hello in our application. 

```
<template>

<p> Hello, {{ username }} </p>

</template>

<script>

export default {

props: ["username"]
}
</script>

```

Let's add Hello component into App.vue.

```
<template>

<p> Hello, {{ username }} </p>
</template>

<script>

import Hello from './components/Hello.vue'
export default {
  name: 'App',
  components: {
    Hello
  },
  data() {
    return {
      username: "Yağmur"

    }
  },
</script>

```



## How to pass data to a parent component?

Let's modify our Hello component. We add input&button so when user search and submit it we display it from our main application. 

We pass input with v-model named search and when button clicked Search method pass data to parent component. 

When we passing a value we giving that value a tag or an id which is searchedResult in here. 

```
<template>
  
<p> Hello, {{ username }} </p>
<input type="text" placeholder="search something" v-model="search"> 
<button @click="Search"> submit </button>
</template>

<script>
export default {
    props: ["username"],
    data() {
        return{
            search: ''
        }
    },
    methods: {
        Search() { 
            this.$emit("search", this.search)

        }

    }

}
</script>

```
```
<template>
<Header/>
<Hello :username="username" @searchedResult="FetchedResult"/>
<p> {{ result }}</p>
</template>

<script>
import Hello from './components/Hello.vue'

export default {
  name: 'App',
  components: {
    Hello
  },
  data() {
    return {
      username: "Yağmur",
      result: ''

    }
  },
  methods: {
     FetchedResult(result) {
       this.result = result;
     }
  }
}
</script>
```

## Differences between v-model and v-bind

V-model is for two-way data binding. Whenever we chage input then our data will change too. 

V-bind is for one-way data binding. We can't change original data using v-bind. 

There's an example shows difference between two. 

```
<div id="app">
  <input type="text" v-model="msg">
  <p>Data bound with v-model: {{ msg }}</p>
  <input type="text" v-bind="msg">
  <p> Data bound with v-bind {{msg}} </p>
</div>

new Vue({
  el: "#app",
  data: {
  	msg: 'custom',
  },
})
```

In part two I'll explain v-for then we'll move to firebase auth.

This project will contain:
- routers
- firebase auth/database
A simple mistake that leaks 20M users' data
Tags: security, api
Published: 2021-03-22 09:07:27

It’s one of the silliest mistakes you can make. But who knows. When you get busy, things can happen.

A few days ago, I was on this page — a social platform, with 20M users. Wandering on a user profile, then I opened his followers page. Must have been switching between debugging my website, out of curiosity, I had a look at a XHR data request on their website.

And baam, the request contains a list of users, with personal information. Also the access tokens from their social platform accounts.

With those access tokens, hackers use them to gain control over social accounts. I guess a large portion of those tokens is still valid. Besides, personal data with contact are valuable. Many companies want them for cold calls/emails, risking users’ privacy.

For 20 millions users, this issue is serious.

![](https://i.imgur.com/bArWrBw.png)

There is not a good explanation for this mistake. The tokens doesn’t look fake. Maybe, their team built the API for convenience, without being careful enough.

## Prevent this mistake as a developer

You can prevent this mistake by following Principle of least privilege. Which limiting permission for users to perform any action, only allow what they have to, no more. And besides:

- Store sensitive info in a different table
- Build API with single purpose (i.e don't use 1 endpoint to get user info, and their sensitive data)
- Always validate if request has the right permission

Especially, double check if you have a page that list users (i.e list of followers). And prevent hackers craw your APIs (i.e using rate-limit, IP blacklist)

## Some afterthought.

- Using social platform for authentication (signup, login) is still dangerous. Even though the platform itself is secured, a few apps you connected to are secured. But if one app leaks users’ access token, that’s it.

- Maybe passwordless authorization (login with a magic-link) is a near and brighter future. Unless you use the same password everywhere, and one of your online shopping being hacked. Or worst, that online shopping doesn’t securely store passwords.

- Sometimes rushing to deliver a project can cause mistake like this :P. Also make it easier for anyone to report incident like this.

P/s: I've contacted the team to fix the issue mentioned above. A friendly reminder to check double your API with sensitive data. We’re all busy, mistakes can happen.
SVG CPAN logo
Tags: perl, cpan
Published: 2021-03-22 09:05:01

For a recent post, I needed a CPAN logo, so I jumped to [cpan.org](cpan.org) to find one, but the quality was very disappointing :cry:

![Ouch](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vnx0k1dsvm6jpfawydhr.png)

And if you look at it in gimp:
![In gimp](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qxpon34vseu672rks5zn.png)

Then I put in my mind to try to do one by myself (I'm almost a total noob at inkscape).

This weekend, after *hours* (yes believe me) of trials (`potrace`, vectorizer.io, vectormagic.com, `autotrace`, `imagemagick`, `inkscape`...) I got something nice, here is my preview :dancer::
![Svg screenshot](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/88hldbbzsfnpqqecblra.png)
This is a png because devto does not accept to embed SVG but do not use this one but [CPAN logo SVG](https://raw.githubusercontent.com/thibaultduponchelle/action-upload-to-cpan/master/cpan.svg)

What about licence of logo? I don't know, I found no info on [disclaimer page](https://www.cpan.org/disclaimer.html). If there is any problem, please shout and I remove it immediately (I will send a mail to cpan@perl.org to clarify)

EDIT: It is Artistic License or GPLv1+
```
The CPAN Logo provided by J.C. Thorpe.
You may distribute this document 
either under the Artistic License (comes with Perl) 
or the GNU Public License, whichever suits you.
```
Range-based `for` loops
Tags: cpp, learning, todayilearned, programming
Published: 2021-03-22 08:51:38

Today we are going to learn about another very useful feature of Modern C++: Range-based `for` loops. As their name indicates, these kind of loops are useful when we want to iterate over the elements of a container, from beginning to end.

Here are some of the advantages of using range-based `for` loops:
- Improve the readability of the code
- Will be as optimized as possible
- The [awesome `auto` keyword](https://dev.to/albertopdrf/the-awesome-auto-keyword-2f28) can be used in the range declaration
- There's no need to know the size of the container we want to iterate over

And, of course, all statements that work within a regular `for` loop (`continue`, `break`, etc.) also work within range-based `for` loops.

But enough talking, let's see some examples! Imagine we have a `vector` of `int`s, and we want to print all of its elements to `stdout`, how can we do it?

```cpp
// Older standards
  // Option 1
for (int i = 0; i < (int)vector.size(); i++) {
  std::cout << vector[i] << std::endl;
}
  // Option 2
for (std::vector<int>::iterator it = vector.begin(); it != vector.end(); it++) {
  std::cout << *it << std::endl;
}

// Modern C++
for (auto element : vector) {
  std::cout << element << std::endl;
}
```

That's very clean and concise! 🧐 And it gets even better when we use features from standards older than C++11. For instance, let's now imagine we have a `map`, with `int`s for both its `key`s and `value`s. How can we loop through it, displaying its contents?:

```cpp
// Older standards
for (int i = 0; i < (int)map.size(); i++) {
  std::pair<int, int> pair = map[i];
  std::cout << pair.first << ": " << pair.second << std::endl;
}

// Modern C++
for (auto [key, value] : map) {
  std::cout << key << ": " << value << std::endl;
}
```

What was that? 😮 From C++17, we can use Structured Bindings to unpack the contents of a `pair` (or a `tuple`, in general) in such a compact way! But what if, for instance, we only cared about the `value`s of the map? From C++20 we can use the Ranges Library to do:

```cpp
for (auto value : map | std::views::values) {
  std::cout << value << std::endl;
}
```

Simple and clean -- and there's more! Also from C++20, we can use the Init Statement if we need to. Let's add a very simple init statment to the last example so we can track the index of the current `value`, as I know you are already wondering what to do when the index is needed:

```cpp
for (auto i = 0; auto value : map | std::views::values) {
  std::cout << "Value " << i++ << ": " << value << std::endl;
}
```

Do you need more examples, or are you already convinced that range-based `for` loops are such a great addition to C++? Tell me in the comments! 👇
How to store value from textarea in a global state? With React Hooks and the Context API ?
Tags: reacthooks, contextapi, state, help
Published: 2021-03-22 08:44:29

I want to use text from textarea in few functions, 
that function must be in separate files. After functions convert text I want to write new text in the same textarea. I did it with JS but in react it is very difficult for me. Can you help me?


https://codesandbox.io/s/ucirl-forked-xdhbk
Write a simple PSR-4 autoload
Published: 2021-03-22 08:07:45

```
$mkdir App
$mkdir App/Data
$code App/Data/Database.php
```
App/Data/Database.php
```
<?php
namespace App\Data;

class Database {
    public function __construct()
    {
        echo "the init\n";
    }

    public function sayHi()
    {
        echo "create database\n";
    }
}
```
`$code composer.json`
```
{
    "autoload": {
        "psr-4": {
            "App\\":"App/"
        }
    }
}
```
`$code index.php`
```
<?php
require __DIR__ . '/vendor/autoload.php';
use App\Data\Database;

$obj  = new Database();

echo $obj->sayHi();
?>
```
`$composer dump`
`$php index.php`

output
```
the init
create database
```

repo: https://github.com/pcreem/psr-4Autoload
Always Chipping Away at Finding that Balance
Tags: devjournal, codenewbie, womenintech
Published: 2021-03-22 07:19:20

_This post was originally published on March 22, 2021 on [my blog] (https://alexlsalt.github.io/blog)._

-------------

Ah, this weekend was definitely one of those sloooow and relaxing weekends meant for total reenergization.

Over the past couple of weeks, I've been feeling like I've been pushing myself in all areas of my life without necessarily being on the lookout for working too much or spreading myself too thin.

Thankfully, I've been becoming increasingly aware of it and have been able to take some conscious steps back as a result, before I tread into more dangerous territory where burning out is the next logical outcome.

What this looks like is taking inventory of all of the things on my current plate, planning and managing around those, and (most importantly) *not* taking on any other tasks or responsibilities in the meantime - no matter how small.

I think my first reactions tend to be 'Oh, yeah I can do this' or 'I can definitely manage this,' but then I have to stop and remind myself that taking on any sort of extra responsibility means actual time taken out of my actual calendar.

In other words, if I continue saying yes to things, I continue to fill up space within a limited container (my calendar) until a certain point where there's just not enough time for balancing work with rest.

On my mind over the next week:

- continuing to learn and doing my best at work
- getting ready for a new developer cohort with the Collab Lab
- a big project I've been working on (and will share soon!)
- living slowly with my family in my non-work time

-------------

Pssst! I send weekly newsletters about the self-taught coding journey and my own coding adventures (and misadventures!)  [Sign up here! >>](https://ladies-code-collective.ck.page/e53b5fca44)