teleren/devto huggingface dataset:
Q&A Angular With Ionic Coding Session
Published: 2021-04-04 16:48:08

See me demonstrate the course content and best practices while building a productivity app with Angular, Ionic, and Capacitor and get your Angular questions answered.

In this session (27/03/21), we will build upon the basic app from last time and use the Nx Monorepo architecture for using a good facade.

In future sessions we will:
Hook the app up to Firebase with GraphQL.
Extracting to styled UI components and publishing to App Store.

We are building on the productivity application that we started in the previous session, where we were creating the application with the NX workspace and the monorepo structure from Narwhal.

In this session we are:

- Going to build up the data and get the data using a facade.
- Create some tasks these will be daily/weekly/monthly/yearly tasks with some CRUD functionality to Add, Edit, and Delete tasks.
- Navigation between monthly/yearly tasks.
- Answer questions along the way.

You can watch it [here](https://christianlydemann.com/qa-angular-with-ionic-coding-session/)
Learning Adobe Illustrator 
Tags: illustrator, learning
Published: 2021-04-04 17:04:28

After delaying a lot, I have finally started illustrator.
This is me learning something new, from nothing basically.

So, this is what I have made. I know its cute.

**What I learned:**
1. Using template as background.
2. Drawing shapes.
3. Using *pen* tool.
4. Using the *width tool*.
5. Grouping and Arranging.
Simple Explanation of Yield in Ruby
Published: 2021-04-04 17:01:47

# Yield meaning in ruby 
the yield keyword is used inside methods for calling a block which is a bit of code enclosed in do/end keywords or curly brackets {}.
we have to understand blocks well in order to understand the yield keyword and what does it do.
this article assumes the reader has a good understanding of ruby blocks.
so the yield keyword is basically telling the method to stop executing the code in this method, and instead execute the code in this block. then, return to the code in the method.
#here is an example:
```
def yield_example
  puts "the program is now executing the code inside this method"
  yield
  puts "now we are back in the method after executing the block"
end
```
Now to call this method with a block, we use the name of the method and append the block:
```
yield_example { puts "the method has yielded our block!" }
```
Or we can do this 
```
yield_example do
  puts "the method has yielded our block!"
end
```
Now When we call the #yield_example method with the above block, the output will be:
`
the program is now executing the code inside this method
the method has yielded our block!
now we are back in the method after executing the block
`
Note that If we call yield without having a block, then we will get an error.
Here is an example:
```
def yield_example
  yield
end

yield_example

# LocalJumpError: no block given (yield)
```
To avoid that we can do this 
```
def yield_example
  yield if block_given?
end
```
The block_given? method checks if a block is available and this will allow us to only yield if the block is given.

# Conclusion
This was a simple explanation of yield in ruby and there is more to it than that so check out this on [stackoverflow](https://stackoverflow.com/questions/3066703/blocks-and-yields-in-ruby)
and [Ruby-doc](https://ruby-doc.org/) for more information.
LINQ in Java
Tags: java, linq
Published: 2021-04-04 16:56:00

Iterate over a collection is a medieval way to filtering, mapping and ordering. And with Java we are used to work like that.

![LINQ ](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/phtrve19rqvljjw5b179.jpg)

https://github.com/haunt99/Linq-Java
Opensource React UI Kits
Tags: react, frontend, responsive, design
Published: 2021-04-04 16:46:25

Hi all,

I am looking for a UI kit to use in my React frontend. This is a hobby project, so I am looking for something opensource. It should have the following features preferably with minimal custom CSS required:

1. Responsive (can be grid based)
2. Navbar component
3. Form
4. Table
5. Buttons

Looking forward to nice suggestions from the community!

Thanks.
Web Scraping with Nodejs
Published: 2021-04-04 16:43:42

I love sports, programming and learning new things. This is a simple project in which I do web scraping to the fabulous site https://www.basketball-reference.com/ and I get the results of the last day of the nba, I show them on a web page and send them by mail.

El link del proyecto en mi github es https://github.com/yoanbello/scrapinBasketballReference.
Método pop - JavaScript
Tags: javascript, tutorial, webdev, beginners
Published: 2021-04-04 16:39:18

O método **pop()** remove o **último** elemento de um array, retornando o mesmo.

## **Parâmetros**

Nenhum

### Sintaxe

```jsx
const removed = numbers.pop();
```

## **Retorno**

O método **pop()** retorna o elemento removido do array.

## Exemplo

Remover o último valor do array, neste caso o valor 20

```jsx
const numbers = [10, 6, 8, 19, 18, 20];

const removed = numbers.pop();
// removed -> 20
// numbers -> [10, 6, 8, 19, 18]
```

<a href="https://www.notion.so/elianbecali/pop-7586a4f92aeb4d8f8b14902dfc02bce5" target="_blank">Método pop | Notion
</a>
<a href="https://www.youtube.com/watch?v=K8RGdiB1AOo" target="_blank">Método pop | Youtube
</a>
Day 96 Of 100DaysOfCode: Learning Streamlit
Tags: womenintech, codenewbie, 100daysofcode, beginners
Published: 2021-04-04 16:28:31

This is my 96th day of #100daysofcode and #python learning journey. Moving forward to the today's progress, today I learned about [Streamlit](https://docs.streamlit.io/en/stable/getting_started.html#create-your-first-streamlit-app) because I am going to use it in my second project for making simple data app. I also scrapped some interest rate data from bank websites.
Today I attended second monthly meeting (first Sunday of month's) of [Code for Nepal](). I completed two months in DataCamp because of it I grasped knowledge of project. I always appreciate Datacamp community for making really friendly course and projects.
<blockquote class="twitter-tweet"><p lang="en" dir="ltr">Day 96 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>Worked on streamlit (I am making plan to make web app for second project) <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://twitter.com/hashtag/WomenWhoCode?src=hash&amp;ref_src=twsrc%5Etfw">#WomenWhoCode</a> <a href="https://twitter.com/hashtag/DEVCommunity?src=hash&amp;ref_src=twsrc%5Etfw">#DEVCommunity</a> <a href="https://t.co/KYSIXBQ8zK">pic.twitter.com/KYSIXBQ8zK</a></p>&mdash; Durga Pokharel (@durgacodes) <a href="https://twitter.com/durgacodes/status/1378737259692716036?ref_src=twsrc%5Etfw">April 4, 2021</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
JavaScript: First Class Function
Tags: javascript, webdev, codenewbie, beginners
Published: 2021-04-04 16:37:02

JavaScript has first class function, when we say this, it means that, language treats functions like any other variable. What is like any other variable means? It means functions can be passed to a variable, functions can be passed as an argument to a function, functions can be returned by another function etc..

Lets look at whether a function in JavaScript is indeed a first class function. 

1. Assign a function to a variable. 
```javascript
const divide = function(x,y){ return x/y; };
```
Here we have a unnamed function, we assign it to a variable "divide" with the same syntax, that we used to assign a value to a variable.

2. Pass function as parameter
```javascript
const divide = function(x,y){ return x/y; };
const multiply = function(x,y){ return x*y; };

function calc(x,y, fun1, fun2){
    let r1 = fun1(x,y);
    let r2 = fun2(x,y);
    console.log(`${x} * ${y} = ${r1}`);
    console.log(`${x} / ${y} = ${r2}`);
}

calc(20,10, multiply, divide);
// 20 * 10 = 200
// 20 / 10 = 2
``` 
In the above code, focus on the "calc" function, it has four arguments, `x, y, fun1, fun2`. By looking at he syntax of the variable r1 and r2 inside the calc function we can assume that variable fun1 and fun2 contain function code(functions). i.e. we are passing two functions as parameters. divide() method and multiply() method are passed for arguments fun2 and fun1 respectively. This can be confirmed when we look at the "calc" function call `calc(20,10, multiply, divide);`. And we understand that functions can be passed as parameters.

3. Return a function by another function
```javascript
function calc(x,y, fun1, fun2){
    let r1 = fun1(x,y);
    let r2 = fun2(x,y);
    console.log(`${x} * ${y} = ${r1}`);
    console.log(`${x} / ${y} = ${r2}`);
    return function() {
        console.log(`${x} + ${y} = ${x + y}`);
        console.log(`${x} - ${y} = ${x - y}`);
    }
}

calc(20,10, multiply, divide)();
// 20 * 10 = 200
// 20 / 10 = 2
// 20 + 10 = 30
// 20 - 10 = 10
```
In the above code concentrate on the return statement of the calc function, it is returning a unnamed function, a function returning another function. 

All these examples implies that JavaScript functions are indeed first class functions.
 
Lets look at one more example of first class function.
```javascript
let fullName = function(fname, lname){
    return (`${fname}${lname}`);
}
let randNum = function(year) {
    let rNum = Math.round( Math.random() * year);
    return rNum;
}

function createEmail(fn,ln, yr, fun1, fun2){
    let full_name = fun1(fn,ln);
    let num = fun2(yr);
    console.log(`${full_name}_${num}@gmail.com`)
    return function () {
        let rdn1 = Math.random()*10
        let rdn2 = Math.random()*100
        let rand = Math.round( rdn1 * rdn2 )
        return(`Password: ${ln}${rand}${fn}${yr}`);
    } 
}

let pass = createEmail("kiran", "raj", 1922, fullName, randNum)();
console.log(pass);
```
How to rename multiple files at once on windows.
Tags: management, file, windows, rename
Published: 2021-04-04 15:25:02

Sometimes we want to rename multiple files at once with almost similar names like prepending or appending some text to all file's names. Using File Manager Advance on windows we can do it easily. It is available to download for free on [www.puzzleweb.in](https://www.puzzleweb.in/products/file-manager-advance)

File Manager Advance has easy to use UI that lets you select files that you want to rename and then you define the naming pattern using tags and then it renames all your files based on your pattern.

Let's suppose we have 20 image files and we want to add the size of the file at the end of its name. For example, if a file has the name `photo0557.jpg` and size 251 kb then we want to rename it to `photo0557_size-251KB.jpg`

1. To do this first open File Manager Advance and navigate to the files and select all the files that you want to rename. Use the `shift` and `ctrl` keys to select multiple files.
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4xi3pqk9avecxtykz1kc.png)

2. Go to `Tools` in the menu bar and click on `Renamer` to open bulk renamer.
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z8butniiv0sx2j6ba5ci.png) 
It will open a bulk renamer window. Here you can see available tags in the left panel which you can use to create the naming pattern. On the right, you can see your name pattern where you will define your pattern and beneath it, you can see your selected files.
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5yj31j1ddrfego2e3j7y.png)

3. Now click on `Text` tag (first one on the left) to add it to the pattern and then write `_size-` in it.
4. Then add `Size` tag and set it to KB.
5. Add another `Text` tag and write `KB` in it.
At this point, your naming pattern should look something like this.
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v4ka9r0s8s0ntc185917.png)
You can also click on any file to preview its name.

6. Now just click on `Rename` button at the bottom right corner to rename all your files then close the renamer window and refresh the main window to see your renamed file.
PyOhio Wants to Hear From You!
Tags: python, conferences, cfp
Published: 2021-04-04 15:13:14

---
title: PyOhio Wants to Hear From You!
published: true
description: PyOhio 2021 is Jul 31 and we're looking for 5 and 10 minute talk proposals now through April 19. 
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/69z10m8oahrcfx9e6jy9.png
tags: python, conferences, cfp
series: PyOhio 2021
---

*PyOhio 2021 is a free annual conference for people interested in Python. More details about PyOhio at the conference website: [PyOhio.org](https://www.pyohio.org/)*

PyOhio 2021 will be streaming all short talks on July 31, 2021 and we'd like to hear from you!

We're looking for talks on any topics of interest to Python users at all experience levels. First-time speakers are encouraged to apply!

When submitting a proposal you can choose one of two types:

* 5-minute “Lightning Talks”
* 10-minute “Thunder Talks”

For more details and to submit a proposal, visit [PyOhio CFP](pyohio.org/cfp).

Need inspiration? Take a look at the talk descriptions and videos from last year:

* [PyOhio 2020 Talk Descriptions](https://www.pyohio.org/2020/events/talks)
* [PyOhio 2020 Talk Videos](https://www.youtube.com/playlist?list=PL2k6bbM_wgjtGSzPXzUzP3AfVO-o4imbB)

Speakers will pre-record talks and they will be streamed during the event. They will be made available for viewing on-demand shortly after streaming. We will be providing an online venue for discussion and curated Q&A (optional for presenters.) We are also considering providing other content over the weekend.

Detailed instructions and tips for recording and submitting your videos will be provided to speakers when talks are accepted.

All speakers and participants must agree to abide by the [Code of Conduct](https://www.pyohio.org/code-of-conduct/)

**Important Dates**

* CFP Open: March 15
* CFP Close: April 19
* Talks accepted: Early May
* Free registration opens: Mid May
* Talk list announced: Mid May
* Schedule announced: Early July
* Speaker videos due: Mid July
* PyOhio 2021: July 31

If you have any questions, email info@pyohio.org, contact us on Twitter [@pyohio](https://twitter.com/pyohio), or comment here.
setTimeout & setInterval best practice
Tags: javascript, codequality, webdev
Published: 2021-04-04 14:54:38

## TL;DR
Use this eslint plugin to enforce the best practice of `setTimeout` and `setInterval`.

https://github.com/littlee/eslint-plugin-clean-timer

## Motivation
It is always **easy** to forget to clear the timers set up by setTimeout or setInterval, which can cause bugs that are **uneasy** to find out.

Image a component with onMount and onUnmount life cycles, in the code below, if the component is mounted and unmounted within 1000ms, the timer will still fire.

```js
class App {
  onMout() {
    setInterval(() => {
      /* do somthing */
    }, 1000);
  }
}
```
The best practice is to clear the timer whenever we don't need it anymore.

```js
class App {
  onMout() {
    this.timer = setInterval(() => {
      /* do somthing */
    }, 1000);
  }
  onUnmount() {
    clearInterval(this.timer);
  }
}
```
But, so many times I'm likely to forget to clear this timer until I find it causes a bug in **runtime**.

So I've created an eslint plugin to remind me to clear the timers before I run the code.

I call this plugin `eslint-plugin-clean-timer` since it can make our timer-code clean.

github repo: https://github.com/littlee/eslint-plugin-clean-timer

It's easy to set up this plugin in our project.

First, install it with `npm`
```bash
npm i -D eslint-plugin-clean-timer
```
Second, add `clean-timer` in eslint configuration
```json
{
  "plugins": ["clean-timer"],
  "rules": {
    "clean-timer/assign-timer-id": 2
  }
}
```
And we're done.

Now every time we set up a timer without assigning the return value to a variable or a member, eslint will complain about it. (The only exception is when using `setTimeout` without a delay value, like `setTimeout(() => {})` or `setTimeout(() => {}, 0)`)

Also, if we're using VSCode with ESLint extension installed, we can use the "Quick Fix..." feature to insert the timer id assign statement automatically, and then change the `timer` identifier to any name we like.

![Screen Cast](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wuhbiph12ni29i14c9f2.gif)
What is "this" in javascript
Tags: javascript, this
Published: 2021-04-04 14:41:52

---
title: What is "this" in javascript
published: true
description: Understanding the this keyword by exploring few examples
tags: ['javascript', 'this']
cover_image: https://raw.githubusercontent.com/RakshithNM/rakshithbellare.dev/master/content/posts/images/this/this-obj-method.png
---

In this post we will explore what `this` keyword refers under various conditions and there by understand the keyword and how it works in javascript.

The `this` keyword can point to 
* The object when referenced within the obejcts method.
* The `window` object - when referenced within a function.
* The instance of the object when the new keyword is used.
* The object when arrow function is used` 

## `this` within method of an object - no arrow function

<pre>
```javascript
const obj = {
    name: "obj",
    printName() {
        console.log(this.name);
    },
    printObj() {
        console.log(this);
    }
}
obj.printName(); // obj
obj.printObj(); // {name: "obj", printName: ƒ, printObj: ƒ}
```
</pre>

## `this` within method of an object - arrow function

The value of `this` in an arrow function is always the value of `this` in the parent non arrow function.

<pre>
```javascript
const obj = {
    name: "obj",
    printObj: () => {
        console.log(this); // this refers to the window
    }
}
obj.printObj() // Window {window: Window, self: Window, document: document, name: "", location: Location, …}
```
</pre>

## `this` within function body

<pre>
```javascript
function greet() {
    console.log(this);  
}
greet(); // Window {window: Window, self: Window, document: document, name: "", location: Location, …}
```
</pre>

## `this` when `new` keyword is used

<pre>
```javascript
function Game(inTitle) {
    this.title = inTitle;
    console.log(this); // Game {title: "pong"}
}

const game = new Game("pong");
```
</pre>

## `this` within callback in a method of an object - no arrow function

<pre>
```javascript
const fruits = {
    name: "fruits",
    fruits: ["apple", "mango", "banana"],
    printFruits() {
        console.log(this); // {name: "fruits", fruits: Array(3), printFruits: ƒ}
        this.fruits.forEach(function(fruit) {
            console.log(this); // Window {window: Window, self: Window, document: document, name: "", location: Location, …} * 3 times
        })
    }
}

fruits.printFruits();
```
</pre>

## `this` within callback in a method of an object - arrow function

<pre>
```javascript
const fruits = {
    name: "fruits",
    fruits: ["apple", "mango", "banana"],
    printFruits() {
        console.log(this); // {name: "fruits", fruits: Array(3), printFruits: ƒ}
        this.fruits.forEach((fruit) => {
            console.log(this); // {name: "fruits", fruits: Array(3), printFruits: ƒ} * 3 times
        })
    }
}

fruits.printFruits();
```
</pre>
Amazing card hover effect with grid in HTML & CSS
Tags: html, css, webdev
Published: 2021-04-04 14:37:45

Hello, today I created an amazing card hover effect with a grid using HTML & CSS but this is a responsive website. I hope you like also comments about your thoughts. For more content follow me on Instagram @developer_nikhil27.
Thank you!

Checkout new post:-
https://dev.to/nikhil27b/simple-f-q-only-using-html-css-4aa


{% codepen https://codepen.io/NikhilBobade/pen/ExZXaGE %}
Job boards with English UI language for hiring Russian speaking coders 
Tags: hiring, operations, jobs
Published: 2021-04-04 14:24:39

If you want to narrow your hiring campaign to only Russian candidates, it is better to use Russian job boards. Most of them support the English language so you will be able to use them even if you can’t read Russian. 

I’m Russian and I’ve lived in Russia most of my life, I’m also into IT doing software testing so I think I can point you to the right direction. Below is the list of currently most popular Russian job boards to advertise your open positions:

**HeadHunter** https://hh.ru
This is the most popular job search platform in Russia with 47.97 mln monthly visits according to SimilarWeb stats. It is sort of LinkedIn but it doesn't have the social feed. It is comparable to the CareerBuilder https://www.careerbuilder.com/ or Glassdoor https://www.glassdoor.com/in the US.

**Habr Career** https://career.habr.com/
Russian IT community blogs that runs their own job board. Similar to https://dev.to/, also popular among other post-Soviet countries. Many Russian IT companies maintain a blog there. 27.50 mln total monthly visits with 67% of them from Russian users according to SimilarWeb data.

**Yandex.Rabota** https://rabota.yandex.ru/
This is a job board by the Google of Russia. Similar to Google Jobs but it is a dedicated job board where you can actually post the openings. Yandex is the largest search engine with 3 bln monthly visits according to SimilarWeb.

**Djinni.co** https://djinni.co/jobs/
A Ukrainian job board with 1.5% of visits coming from Russian. Total monthly visits are 518.00K. Ukraine has got really stong IT professionals. 1.5% of Russian users using this site are 99% remote-oriented so potentially they are your target audience too.

**Github jobs** https://jobs.github.com/
Although international, it is quite popular with Russian developers. SimilarWeb doesn't allow viewing the region stats but I've heard about it in the Russian-speaking IT community.

**Telegram channels**
Telegram has roughly [30 mln monthly users](https://www.washingtonpost.com/world/europe/russia-telegram-kremlin-pavel-durov/2020/06/27/4928ddd4-b161-11ea-98b5-279a6479a1e4_story.html). It is worth checking out channels dedicated to posting tech jobs. The price is usually very affordable compared to the job boards and the conversion rates are competitive. An example could be the channel that I maintain. It's called **Remote Ever After** https://t.me/remoteeverafter. You can DM me and I'll be happy to share your job opportunities with my audience.

Let me know if this is helpful and happy hunting!

Originally published on https://remoteeverafter.com/where-do-you-hire-russian-coders/

Photo by [Marc-Olivier Jodoin](https://unsplash.com/@marcojodoin?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) on [Unsplash)(https://unsplash.com/s/photos/plane?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)
Railway FBP v1.0.0 released
Published: 2021-04-04 14:24:06

🎉 Glad to annonce the release of Railway FBP v1.0.0 🚀

[https://github.com/darkwood-fr/railway-fbp/releases/tag/v1.0.0](https://github.com/darkwood-fr/railway-fbp/releases/tag/v1.0.0)