teleren/devto huggingface dataset:
How to execute a function only after the user stops typing?
Tags: react, javascript
Published: 2020-06-18 22:51:12

I was implementing simple search functionality. I've added input field with **onChange** handler. But I wanted to perform actual search method some time after the user stops typing.

Looks like a perfect place to use **debounce** here, right?

I thought that I would just put debounced search function inside **useEffect** hook. I also had to make sure that debounced search function will stay the same between renders.

After playing for a while with **useCallback** hook (replaced later by **useRef** hook which is more appropriate for this job) I had a working solution.

But...

But on second though it turned out the simplest solution is to use good old friend **setTimeout** combined with **clearTimeout**.

So here it is:

```javascript
import React, { useState, useEffect } from 'react';

export const App = () => {
  const [value, setValue] = useState("");

  const handleOnChange = (event) => {
    setValue(event.target.value);
  };

  useEffect(() => {
    const timeoutId = setTimeout(() => console.log(`I can see you're not typing. I can use "${value}" now!`), 1000);
    return () => clearTimeout(timeoutId);
  }, [value]);
  
  return(
    <>
      <h1>{value}</h1>
      <input onChange={handleOnChange} value={value} />
    </>
  );
};
```

PS I found a similar (the same?) solution with the journey explained in more details here: https://joaoforja.com/blog/5-steps-to-perform-a-search-when-user-stops-typing-using-react-+-hooks-in-a-controlled-component/ Enjoy!
Hosting on Github Pages: A Quick and Short How To
Tags: github, html, css
Published: 2020-06-18 22:43:28

So you have a website that only uses HTML, CSS, & JS? What an exciting time to be alive, you can host your site straight to Github without spending a dime! 

The main benefit is that you don't have to worry about buying a domain name and setting up your hosting site. If you've pushed your project up to Github, you've already done the bulk of the work! 

Ready to see how easy this is? 

##1. Create a new branch

In your terminal (command line), cd your way into your project directory (folder). Once there, create a new branch by running the following command: 

```bash 
git checkout -b gh-pages 
```
You *must* name your branch gh-pages in order for this to work correctly. 


##2. Push to origin

Next, run the following command:

```bash 
git push origin gh-pages
```

##3. Verify it worked!

Go to your repo on Github and click on the 'Branch' dropdown. You should see gh-pages there now! 

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

##4. Visit your site 

In your browser, head over to:

```
your-user-name.github.io/repo-name
```
Et voila! Your site! 

Happy Coding!
Using api's with react
Published: 2020-06-18 21:58:06

If there is a frontend, there has to be a backend for your website. Throughout my course with Flatiron, we utilized api's for our backend. Wether we made our own api with rails or used an external api, at least our project utilized some sort of api. 

While there are multiple api's any commercial use would need an api key. This api key would allow for only your product / website to be able to use a certain api. However there are plenty of free api sites that do not need an api key to use.
{% github https://github.com/public-apis/public-apis %}

I would use this website as a starter on learning api's!


When using react, you would use a fetch method to get the info that you need. You have many ways in order to fetch from the api. I would prefer to either handle it by a button press, or an asynchronous event such as ComponentDidMount. 

While using ComponentDidMount, you would do a simple fetch request and save it to your state. The fetch would run automatically on page load.

An example code of the fetch to an api would look like this

```
fetch("https://www.themealdb.com/api/json/v1/1/random.php")
        .then(resp => resp.json())
        .then(data => {
            this.setState({food: data})
        })
```

Here, I am using a free api called themealdb in order to get a random recipe. This would allow me to save one random food into my food state which I can call at anytime throughout the page or even pass it down to other pages as well.

This api does not need an api key, but if it did need an api key, make sure to store it in your development environment table instead of the actual code. You want your api to be hidden to the public so no one can use that key besides you!
When Should I Use Julia?
Tags: python, julia, datascience, machinelearning
Published: 2020-06-18 21:39:31

I have been programming in Python for a few years now, mostly on data science projects by myself, but am curious about Julia. 

Beyond speed, what is the use case for Julia that would make it better for a machine learning application than Python? If speed isn't a huge factor, what application for Julia that would make it worth it to use Julia rather than Python? What project could I do easily in Julia that's more complicated or less natural than python?

There are some existing articles on technical features of using Julia, like [Five (More) Reasons to Check Out Julia](https://dev.to/jballanc/five-more-reasons-to-check-out-julia-26k6), but that doesn't help in the context of understanding what projects would make me want to use it vs. Python. There are also many articles about peoples' experience learning Julia, like [My First Impression of Julia](https://dev.to/shuv1824/my-first-impression-of-julia-2e8h), [Teaching myself Julia](https://dev.to/safijari/teaching-myself-julia-10j8), [My Julia VM and what I learned](https://dev.to/alecsanchez/my-julia-vm-and-what-i-learned-3n4i), [Julia, surprise me! (some astonishments while learning a new programming language)](https://dev.to/epogrebnyak/julialang-and-surprises---what-im-learning-with-a-new-programming-language--21df), [Top 5 Courses to learn Julia Programming Langauge for Beginners](https://dev.to/javinpaul/5-best-courses-to-learn-julia-in-2020-319f), but those are generally more people talking about their experiences in learning Julia.
So I don't need a portfolio, But...
Published: 2020-06-18 21:07:38

After countless attempts to get the style that fits me. My knowledge of FE grows year by year, I tend to scrap my portfolio's over and over.

But this time I'm not going to take it to seriously, I'm just going to write this simple portfolio in the style of:

{% codesandbox y5byf %}

Nice, simple, timeless and all web components so I could use with any framework going forward. Lovely.
Rails Level: Novice
Tags: rails, ruby, productivity, career
Published: 2020-06-18 21:06:44

I'm new to the world of coding and decided to explain a topic i struggled with... |Block| Variables

WHAT IS A BLOCK VARIABLE?
The best way i can explain this concept is in the following manner:

Let's say we are looking at a brick wall. A wall is made up of individual bricks( in this case |block| variables).

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/658kbxm0bjo1zce6qxv7.jpg)

Here’s a basic example of a multi-line block:

[1, 2, 3].each do |n|
  # Prints out a number
  puts "Number #{n}"
end

In this example, the array [1,2,3] is composed of individual elements. 
I see it as so (bricks = (1),(2),(3) wall = [1,2,3]). 

When you use a block variable within a loop, you are calling on the individual block/element (or how I like to call them bricks)

[1, 2, 3].each do |n|
--this is saying, go through each element within the array.
-- |n| = each element, as its looping through. n = number in this example.
-- first loop. |n|= 1
-- second loop |n|= 2
-- third loop  |n|= 3

Here is how this should look finalized.
[1, 2, 3].each do |n|
  # Prints out a number
  puts "Number #{n}"
end

Number 1
Number 2
Number 3

Hope this helps!
Destructuring with an alias
Tags: javascript, es6, react
Published: 2020-06-18 20:41:04

---
title: Destructuring with an alias
published: true
description: Javascript tip!
tags: javascript, es6, react
---

Short and simple.
```javascript
 const bar = {
    x: 5,
 };

 const { x: foo } = bar;
 console.log(foo); // 5
```

This can be useful when you need to destructure a value that has a similar or same name as an existing variable. E.g.,

```javascript
const cars = [{
   car: true,
   van: false,
   make: 'Honda',
   year: 2001,
   color: 'Red',
}, {
   car: true,
   van: false,
   make: 'Nissan',
   year: 2000,
   color: 'Blue',
}];

cars.map(car => {
   const { car: isCar } = car;
   console.log(isCar);
});
```
Simplify Your Flexing
Tags: flex, css, center
Published: 2020-06-18 20:40:26

---
title: Simplify Your Flexing
published: true
tags: flex, css, center
---

## Center Children Vertically & Horizontally
```html
<main>
  <div>1</div>
  <div>2</div>
  <div>3</div>
</main>
```
```css
/* Parent Takes Up Screen Width & Height*/
html, body, main {
  width: 100%;
  height: 100%;
}

main {
  display: flex;
  /* Will Wrap On Smaller Screens */
  flex-wrap: wrap;
  /* Center On X & Y Axis */
  place-content: center;
}
```
![place-content](https://dev-to-uploads.s3.amazonaws.com/i/llp8zdvcyu5oyn0l1s5c.png)
[Read More About `place-content`](https://developer.mozilla.org/en-US/docs/Web/CSS/place-content)
Non-binary developer here!
Tags: devpride, pride, community
Published: 2020-06-18 20:35:04

---
title: Non-binary developer here!
published: true
description: It's all about people
tags: devpride, pride, community
---

Hi! My name is Elena, and I'm a .NET developer located in Spain. I'm a non-binary person, so you can use she or they pronouns to talk with me.

I'm proud of my identity as a non-binary person. Also, my appearance is very androgynous, which is why people have long wanted to place me in a binary world that doesn't really exist.

For a long time, it was a problem and a reason to feel ashamed, wrong with myself. But not anymore.

I am who I am, I am as I am, and there is nothing wrong with it.

This does not boil down to the phrase "love is love". Relationships between LGTBQIA+ people are not just love. The LGTBQIA+ movement is about people who have the right to be, exist, live, work and develop like everyone else.

I find support on people like me, who express themselves on social networks and in communities around me. And I look with hope to those people who are discovering their identity in this spectrum of identity and sexuality. Also in people who, although they do not belong to the movement, look, understand and support.

I am a non-binary programmer who finds another piece of happiness in movements like this, in dev.to, opening their space for all of us.

Thanks, community, and thanks for reading.

And yeah, this is politics. But life is, because it's all about people.

And never forget:

# Trans rights are human rights. Black live matters. Trans black live matters
react-jsx-template, now on npm!
Tags: react, node, npm, javascript
Published: 2020-06-18 20:34:26

If like me you ever wondered if it was possible to write scoped styles in your react components, I have a recommendation for you and it's right here: https://npmjs.com/package/react-jsx-template

Like most developers learning react.js after using Vue.js, I wanted to be free to create styling rules without fear that it might affect something in any other component. This luxury comes by default when creating apps with the Vue CLI, however React developers have devised means to cope with the challenge caused by the lack of this feature (ignore it). 👌

A JavaScript app is made up of so many moving parts that you just can't afford to leave the crank case open. It's a great deal that React's modular approach allows us to split our code based on functionality, however, if we add encapsulation to our components, our working directories would be much safer to code in.😎

The react-jsx-template takes away the pain of figuring out which CSS rules broke the page 🤔. Check it out on npm, and don't forget to share.

Happy coding...🤓
How do you record GIFs?
Tags: webdev, discuss
Published: 2020-06-18 20:32:41

---
title: How do you record GIFs?
published: true
description: 
tags: webdev, discuss
//cover_image: https://direct_url_to_image.jpg
---
Often in our DEV workflow we need to share the behavior of the app, report a bug, suggest a feature or just create a meme. Usually static screenshots are not enough, that's where GIFs come in.

Lately, I use this neat little tool called [ScreenToGif](https://github.com/NickeManarin/ScreenToGif/).

What other alternatives would recommend considering the ease of access and edit options after the GIF has been captured?
enchantedForest[1]
Tags: javascript
Published: 2020-06-18 20:15:37

```python 
ipdb> [{blah: doc[blah] for blah in doc if blah != "_id"} for doc in mongo.db.users.find()]
```

This beautiful, coherent piece of code is what makes up the foundation of our MongoDB back-end. 

We've decided on using MongoDB paired with Flask as our back-end to store user data and provide game-state saving. Players will be able to interact with a "monolith" at certain predetermined save points and send their game state in JSON format to our server, which is another reason why we decided to go with MongoDB instead of MySQL. 

As Alek said: 

> "What is MongoDB? So it's like you have a json. And then there is a json inside of that (those are called collections). And then inside of the collection, it's like, there's another json inside of it. And in the json spec, it literally says, if `x` is a json, then `{"x": x}` is a json, so you can have jsons all the way down."  

(Our server is a Digital Ocean droplet running CentOS 7)

---

In addition, as a PSA to all other fellow MongoDB beginners out there, please note that database names are case-sensitive (this took us a while to figure out).
.Net Core Shared Link Returning Null?
Tags: csharp, help
Published: 2020-06-15 15:39:31

I am trying to convert a .NET Framework web application to a .NET Core web application. I did start a new project, so I'm copying over info.

In the Shared Views, I am trying to link to index view inside of a Hiker folder. Inside the Hiker database, I populated 2 hikers.

I am trying to access the list with the following:
```
<li class="nav-item">
  <a class="nav-link text-dark" asp-area="" asp-controller="Hiker" asp-action="Index">Hikers</a>
</li>
```

However, I am getting the following error message:
```
System.NullReferenceException: 'Object reference not set to an instance of an object.'

Microsoft.AspNetCore.Mvc.Razor.RazorPage<TModel>.Model.get returned null.
```

It would make sense if there was no information, but that's not true. Any ideas why I'm getting an error?

Using Standard Views

Hiker Model:
```
public class Hiker
{
    [Key]
    public int Id { get; set; }

    [Display(Name = "First Name")]
    public string FirstName { get; set; }

    [Display(Name = "Last Name")]
    public string LastName { get; set; }

    [Display(Name = "Street Address")]
    public string StreetAddress { get; set; }

    [Display(Name = "City")]
    public string City { get; set; }

    [Display(Name = "State")]
    public string State { get; set; }

    [Display(Name = "Latitude")]
    public string Latitude { get; set; }

    [Display(Name = "Longitude")]
    public string Longitude { get; set; }
}
```

The action I'm trying to get to *(The out-of-the-box action)*:
```
public ActionResult Index()
{
  return View();
}
```

2 Hikers are populated.

Thanks for any help.

Update:
This seems to only be the case for the Index. Create, Edit, Delete, Details appear to be linking properly.
I'm Alejandra and it turns out I'm Pansexual!
Tags: devpride, pride
Published: 2020-06-18 20:11:31

---
title: I'm Alejandra and it turns out I'm Pansexual!
published: true
description: Just celebrating pride with everyone in 2020.
tags: devpride, pride
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/3nop8y2ctn7omhvemgas.png
---

[Note]: # (✨This template is only meant to get your ideas going, so please feel free to write your own narrative! ✨)

##😞 My mother brought me up in a religious cult
I was a kid. I didn't exactly have a choice in the matter! One of the many harmful teachings this cult preached was immense homophobia. 

As a result of this, I began dealing with guilt and disgust toward myself since the age of 12. That was the age I first realized women attracted me too. 

##🛫 In 2012, I accidentally moved to Seattle
By now, I was in my early twenties. I had long since left my family and that cult. This was part of the reason I decided to move as far away as possible, and start fresh.

For me, that ended up being Seattle. (long story) 

Seattle shocked me. It was **SO** different! And "being gay" seemed almost popular. I had never been around so many people who weren't afraid to hold hands with the same sex... kiss the same sex in public... I mean, what kind of city was this?? Did people really not feel "afraid of backlash" by displaying it?

It took me a while to calm down and realize that this was just a very liberal city and that this place was a pretty good place to be if you were part of the LGBTQIA+ community.

##🏳️‍🌈 Seeing the freedom of actions displayed in Seattle encouraged me to come out
For the first time, I didn't feel afraid of what my community would say if I mentioned I enjoyed dating women too. 

I "came out" for the first time and not knowing what "my label" was, I simply went by "Bisexual."

##🤔 But Bisexual didn't fully cut it?
The first time I dated a transgender woman, I realized that "bisexual" didn't really fully explain me.

I didn't care about gender, just the personality and way of being. 

And so, I realized that "Pansexual" felt a better fit for me.


##🤗  I find support in...
At this point of my life, I am lucky to say I no longer battle with guilt for being part of the LGBTQIA+ community.

But in the beginning, talking about it with close friends and my therapist helped iron those things out. 

Bottling in never helps! 

###💜 It feels awesome to finally feel "allowed" to be me.
Logging in Kotlin made easy
Tags: kotlin
Published: 2020-06-18 19:53:21

---
title: Logging in Kotlin made easy
published: true
description: A neat trick to help with logging in Kotlin
tags: #kotlin
//cover_image: https://direct_url_to_image.jpg
---
If you have been logging using [slf4j](http://www.slf4j.org/) in Java, you probably used this idiom a lot:


```java
public class Worker {
    private static final Logger logger = LoggerFactory.getLogger(Worker.class);

    public void work() {
        logger.info("Starting to work!");
    }
}
```

When you use Kotlin, that long _private static final..._ line? It's no longer necessary with this clever code:

```kotlin
inline val <reified T> T.logger: Logger get() =
    LoggerFactory.getLogger(T::class.java)
```

Now, our _Worker_ class can be simply written like this:
```kotlin
class Worker {
    fun work() {
        logger.info("Starting to work!")
    }
}
```

What is going on here? 

You might be familiar with [inline functions](https://kotlinlang.org/docs/reference/inline-functions.html), but calculated properties can be inlined as well.

The compiler replaces each reference to the _logger_ property with the body of its getter expression. The _T_ type parameter refers to the type in the context in which the _logger_ property is used. Since T is [reified](https://kotlinlang.org/docs/reference/inline-functions.html#reified-type-parameters), it is replaced with the actual type (in our case, _Worker_) during compilation. So the compiler changes the _work()_ method body to:
```kotlin
LoggerFactory.getLogger(Worker::class.java).info("Starting to work!")
```

Since _T_ can be any type, you can use the _logger_ property in any class without the need to declare and assign it. This is a nice pattern to eliminate repeatable code.
#016 Docker Databases
Tags: docker, devops, tutorial
Published: 2020-06-18 19:38:45

# Introduction

this is part 16 from the journey it's a long journey(360 day) so go please check previous parts , and if you need to walk in the journey with me please make sure to follow because I may post more than once in 1 Day but surely I will post daily at least one 😍.

And I will cover lot of tools as we move on.
***

#Docker and databases

This part will be very very short because we talk about volumes before.
but there is a Database special volume.
I am going to use official postgres image in this.
if we go to [postgres](https://hub.docker.com/_/postgres) official image.

![postgres](https://dev-to-uploads.s3.amazonaws.com/i/tvs0gdwuc06ddp0wdpw6.jpg)

```bash
docker run -d \
    --name some-postgres \
    -e POSTGRES_PASSWORD=mysecretpassword \
    -e PGDATA=/var/lib/postgresql/data/pgdata \
    -v /custom/mount:/var/lib/postgresql/data \
    postgres
```

we have a new tag here -e we didn't talk about before and it's out of the scope for today but in case you a curious

![help](https://dev-to-uploads.s3.amazonaws.com/i/1tfofh8aaza073vqov30.png)

```bash
docker run --help | grep -e,
```

*| grep* is a linux/unix thing , *|* it's called pipeline it takes the output of the first and passed to the other program grep is a built in program to search for a text in our case it's -e

-e This is an environment variable that is not Docker specific. Because the variable is used by the postgres server binary

we see that postgres default place to save data is :/var/lib/postgresql/data , it's vary between databases reddis use another location , it depend on every database.

so -v /custom/mount:/var/lib/postgresql/data is our volume for postgres database.

again if you need to use any other database you should read documentation of docker image to see where it store here data.