teleren/devto huggingface dataset:
useEffect Hook
Tags: react, hooks
Published: 2021-03-26 20:25:55

#Getting Started

The main function of the useEffect hook is to allow you to perform side effects in functional components. Fetching data, changing the DOM and setting up a subscription are all examples of side effects.
If you have worked with react before you should have came across componentDidMount and componentDidUpdate you can think of useEffect and a combination of them both.


#Not a true lifecycle
useEffect runs after every render by default both after the first render and after after every update. While thinking useEffect does the job of three separate lifecycles, it is better to think of it as a way to run side effects after render.

Here are some examples from the docs "In a React class, you would typically set up a subscription in componentDidMount, and clean it up in componentWillUnmount. For example, let’s say we have a ChatAPI module that lets us subscribe to a friend’s online status. Here’s how we might subscribe and display that status using a class: ```javascript
 class FriendStatus extends React.Component {
  constructor(props) {
    super(props);
    this.state = { isOnline: null };
    this.handleStatusChange = this.handleStatusChange.bind(this);
  }

  componentDidMount() {
    ChatAPI.subscribeToFriendStatus(
      this.props.friend.id,
      this.handleStatusChange
    );
  }
  componentWillUnmount() {
    ChatAPI.unsubscribeFromFriendStatus(
      this.props.friend.id,
      this.handleStatusChange
    );
  }
  handleStatusChange(status) {
    this.setState({
      isOnline: status.isOnline
    });
  }

  render() {
    if (this.state.isOnline === null) {
      return 'Loading...';
    }
    return this.state.isOnline ? 'Online' : 'Offline';
  }
}; 


```




With Hooks: 

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

function FriendStatus(props) {
  const [isOnline, setIsOnline] = useState(null);

  useEffect(() => {
    function handleStatusChange(status) {
      setIsOnline(status.isOnline);
    }
    ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange);
    // Specify how to clean up after this effect:
    return function cleanup() {
      ChatAPI.unsubscribeFromFriendStatus(props.friend.id, handleStatusChange);
    };
  });

  if (isOnline === null) {
    return 'Loading...';
  }
  return isOnline ? 'Online' : 'Offline';
}; 


```
Some simple tips for Combination Sum -Backtracking
Tags: javascript, algorithms
Published: 2021-03-26 20:20:04

We are asked to find all the combinations that sum a target, from a list of integers. And in this case, the combinations can contain duplicates from the original list.

This type of problem is a common interview algorithm, but it might take some 'digestion' over time to get familiar with. Even though the code is short and relatively simple, the concepts behind it like depth-first search, stacks, recursion, and backtracking, are a lot of information to take in. So I will simplify some of the steps in the algorithm but by no means can explain all of these concepts in a short article.

## Backtracking

The main steps to do a backtracking algorithm involve: making a recursive callback function which in this case is called `combinations`.

Then adding a base case to exit the recursion:

```javascript
if(target === 0 )
``` 

And lastly doing a depth-first search: 

```javascript
for(let i = start; i < candidates.length; i++)
```

Then a temporary list `stack` considers each option:

```javascript
stack.push(candidates[i])
```

Next, the current number being considered is subtracted from the target and passed into the recursion. 

```javascript
target - candidates[i]
```

And last we move on from that option:

```javascript
stack.pop()
```

Needless to say, recursion callbacks are very complex to visualize step by step, but all these operations are 'stacked' on a 'waiting list' as the code runs line by line and then ran one by one as they are popped out of the runtime waiting list.

``` javascript

let combinationSum = (candidates, target) => {

    let result  = []
    candidates.sort((a,b) => a - b)

    combinations(candidates, target, [], result, 0)
    
    return result
};

let combinations = (candidates, target, stack, result, start) => {
    
    if(target < 0 ){
        return
    }else if(target === 0 ){
        console.log(stack)
        console.log(target)
        result.push([...stack])
        console.log(result)
    }else{
        for(let i = start; i < candidates.length; i++){
            stack.push(candidates[i])
            combinations(candidates, target - candidates[i], stack, result, i)
            stack.pop()
        }
    }
}

```

## Scope

This is an interesting factor about these backtracking problems because we define the `result` array outside our `combinations` callback and it is modified inside the recursion scope and then returned as the answer back in the outer `combinationSum` scope. 

However, the array that contains the inner list of combinations which I call `stack` in this case, has to be defined in the scope of the `combinations` recursive function and not in the outer `combinationSum` scope for it to properly store the values of the different recursions.

Feel more than welcome to reach out with any ideas/comments at [Linkedin](https://www.linkedin.com/in/santiago-salazar-pavajeau/) or [Twitter](https://twitter.com/santispavajeau), or check out my [portfolio](https://www.santiagosalazarpavajeau.live).
AI powered surveillance
Published: 2021-03-26 19:50:31

❓ Problem:
A business needs a security camera, but is low on server capacity. Thatswhy the business can not store videos 24/7.

💡 Solution:
Using Machine Learning, we can tell the camera when it has objects in view and use a lightweight backend to store the timestamps and also the type of objects which where detected.

https://github.com/MarcoSteinke/survAPI-Surveillance-Camera-Analysis
Next.js Markdown Blog Starter Template
Tags: nextjs, markdown, netlify, opensource
Published: 2021-03-26 19:33:45

https://github.com/morganmspencer/next-markdown-blog-starter

I've recently found myself creating new blogs for demo and test projects. In fact, I've been doing it enough that I decided to create an open-source template using my repeated methodologies.

I decided to use Next for the framework of the site to take advantage of all the great features it has to offer, both static and dynamic. Not to mention it is incredibly easy to get set up.

I love the idea of not having a database for a blog, which is why I have been using markdown files (getting back to the original JAMstack!). Using a Github repo for this comes with all the benefits of version control that come in handy when managing a blog.

To avoid making content changes in VSCode, I integrated Netlify CMS to enable an editing workflow process. This allows me to add new content like posts, categories, and tags through a git workflow. It automatically creates PRs for changes and merges them to the main branch when you are ready to publish.

It ships with Tailwind installed but that can easily be removed without issue.

I made this project completely open-source and welcome any issues, feature requests or PRs on [the repo](https://github.com/morganmspencer/next-markdown-blog-starter). I plan to keep developing and perfecting this going forward, so any input would be greatly appreciated.

I can't wait to see what people make with it!
Install python 3.7, 3.6, 3.5, and 3.4 on BigSure with pyenv
Tags: python, pyenv, macos
Published: 2021-03-26 19:22:26

This post is about installing python 3.5, 3.6, and 3.7 since my previous post only supports python 3.8 and 3.9.
Also, I have gotten some questions on installing python 3.5 and 3.6.

In addition, I really need to install them on my BigSur lol.

If you just need to install python 3.8+, please check the following 

{% link https://dev.to/kojikanao/install-python-3-8-0-via-pyenv-on-bigsur-4oee %}


### precondition
- Installed Homebrew

### install packages with brew
```zsh
brew install zlib
brew install sqlite
brew install bzip2
brew install libiconv
brew install libzip
```

### Install python 3.4.10
```zsh
$ LDFLAGS="-L$(brew --prefix zlib)/lib -L$(brew --prefix bzip2)/lib" pyenv install --patch 3.4.10 < <(curl -sSL https://github.com/python/cpython/commit/8ea6353.patch\?full_index\=1)
```

#### Install python 3.5.7
```zsh
$ LDFLAGS="-L$(brew --prefix zlib)/lib -L$(brew --prefix bzip2)/lib" pyenv install --patch 3.5.7 < <(curl -sSL https://github.com/python/cpython/commit/8ea6353.patch\?full_index\=1)
```

#### Install python 3.6.5
```zsh
$ LDFLAGS="-L$(brew --prefix zlib)/lib -L$(brew --prefix bzip2)/lib" pyenv install --patch 3.6.5 < <(curl -sSL https://github.com/python/cpython/commit/8ea6353.patch\?full_index\=1)
```
I also tried to install 3.6.9 and worked well(just changed the version).


### Install python 3.7.3
I tried to install 3.7.6, 3.7.7, 3.7.8, and 3.7.9, but couldn't install them. Only 3.7.3 worked with the following.

```zsh
$ CFLAGS="-I$(brew --prefix openssl)/include -I$(brew --prefix bzip2)/include -I$(brew --prefix readline)/include -I$(xcrun --show-sdk-path)/usr/include" LDFLAGS="-L$(brew --prefix openssl)/lib -L$(brew --prefix readline)/lib -L$(brew --prefix zlib)/lib -L$(brew --prefix bzip2)/lib" pyenv install --patch 3.7.3 < <(curl -sSL https://github.com/python/cpython/commit/8ea6353.patch\?full_index\=1)
```

```zsh
$ pyenv versions
  system
  3.4.10
  3.5.7
  3.6.5
  3.7.3
  3.8.3
```
Why do you still use Sublime?
Tags: discuss, vscode, watercooler, productivity
Published: 2021-03-26 19:21:25

In 2021, there are a wide variety of code editors available online & most of them are free. One of the most popular one is probably VS Code which comes with a lot of amazing features you'll ever need in a code editor. Not only that it also got a built-in marketplace from where you can get any extension of your choice and make your VS Code Setup even more powerful!

**Now the question arises, does anyone still uses Sublime in 2021?** 

Well of course some people do but even after there are so many amazing code editors available, why they prefer sticking to Sublime?

# Discuss

- Do you still use Sublime?
- If yes, then why?
- Ever thought of moving to any other code editor?
Did you ever used "will-change" property? Show me some example
Tags: discuss, showdev, css, codequality
Published: 2021-03-26 19:04:45

---
title: Did you ever used "will-change" property? Show me some example
published: true
description: 
tags: discussion, showdev, css, codequality
cover_image: https://images.unsplash.com/photo-1461749280684-dccba630e2f6?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=1500&q=80
---
###MDN
> The CSS will-change property tells browsers which properties of an element are expected to change enabling browsers to set up optimizations before the element is actually changed, improving performance by doing potentially expensive work before it is required.

I am trying to understand the correct use, but i find too many constraints and conditions ... help me to understand how you have used this 'property' in your experience.
Swagger/OpenAPI and Rails array param
Tags: ruby, rails, swagger, openapi
Published: 2021-03-26 19:01:33

Ruby On Rails automatically parses query params as array if they are given in format `expand[]`. 

Like so

```ruby
def update
  expand_array = params[:expand]
end
```

But how can we write a Swagger(or OpenAPI) documentation for that param?

In this way:

```yml
- name: expand[]
  in: query
  type: array
  items:
    type: string # our items type
  collectionFormat: multi
```

`collectionFormat: multi` is needed so param can exist in a query multiple times, like `expand[]=one&expand[]=two`, and brackets can be added just to the param name.
Meeting Requirements
Tags: beginners, flatiron, bootcamp, objectorientation
Published: 2021-03-26 18:56:33

Our very first project required quite a few different aspects. I was confident as I looked over the checklist, but the execution proved my confidence superlative. 
We've learned so much in the past few weeks, and I assumed this project was a culmination of all of that, which in some ways it is, but in others (like using object orientation over procedural), it definitely was not.
On day three my code looked like this:

```cocktail_name = response_hash["drinks"][0]["strDrink"]
cocktail_instruc = response_hash["drinks"][0]["strInstructions"]
main_ingredient = response_hash["drinks"][0]["strIngredient1"]```

Notice anything suspect? I was reaching into my API, pulling out information, turning it into an object in a new class, but then when it came time to display that info, I just scooped it out without using the object at all!

Luckily this was identified and I was able to make it prettier and actually iterate through the Drink class I spent time making:

```if @input.to_i <= Drink.all.count && @input.to_i > 0
                    puts "YOU GOT THIS!".colorize(:blue)
                    puts "-------------"
                    puts "The main ingredient is #{Drink.all[@input.to_i - 1].strIngredient1}."
                    puts "Along with #{Drink.all[@input.to_i - 1].strIngredient2} and #{Drink.all[@input.to_i - 1].strIngredient3}."
                    puts "Here's what you're gonna do: #{Drink.all[@input.to_i - 1].strInstructions}"```

At this point I had felt like my project was basically complete, so to learn I wasn't actually meeting the requirements I was crushed. As my cohort lead pointed out, it honestly was an easy fix, but the feeling still crushed me.

I feel as if I fluctuate between devastation and overconfidence, and I'm still struggling to find that balance and just embrace being uncomfortable. But we'll get there! I can't believe how much I've learned in such a short amount of time already.

![Dancing Wizard Gif](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vw9alv6mwj1yd9fe53ck.gif)
Using MongoDB query syntax to query Relational Database in Java
Tags: springboot, mongodb, jpa, hibernate
Published: 2021-03-26 18:53:09

`Spring Data JPA` provides a lot of features on top of JPA. Such as Query methods, Query by examples, and a lot more.

It also integrates with JPA Specifications, QueryDSL, Jooq, and other fantastic libraries.

> However there’s a specific use-case that exists in most applications which is **the need to make the user search by multiple criteria for an entity and its related associations**. This is where [Spring Data JPA Mongodb Expressions](https://github.com/mhewedy/spring-data-jpa-mongodb-expressions) excels.

-----

_**Spring Data JPA MongoDB Expressions**_ allows you to use [MongoDB query syntax](https://docs.mongodb.com/manual/tutorial/query-documents/) to send the queries as JSON string typically from the frontend app to a Rest API and then to the Repository layer.

Here’s an example query that users can send from the frontend:

```json
{
  "lastName": "ibrahim",
  "$and": [
    {
      "birthDate": {"$gt": "1981-01-01"}
    },
    {
      "birthDate": {"$lte": "1985-10-10"}
    }
  ]
}
```
that will be translated to:

```sql
... where last_name=? and birth_date>? and birth_date<=?
```
As you see, it uses the same notation of the initiative and simple-to-use MongoDB query language with features such as ANDing, ORing, and joining entities.

-----
##So How to start?

You can follow [the README file on the project page at Github](https://github.com/mhewedy/spring-data-jpa-mongodb-expressions), it contains a lot of details.

Happy coding!
Vue 3 and Bootstrap 5 forms generator
Tags: vue, bootstrap
Published: 2021-03-26 18:49:26

Hi for all!

I work on vue 3 and bootstrap 5 forms generator. And I want to tell you a little about this project.

https://reforms.js.org

## Features:

- Info cards
- Forms
- 15+ inputs types and output types
- Forms schemas
- Cards schemas
- Plugin system
- Internationalization
- Input & Output groups
- Form validation
- Server side validation
- Multiple and sortable fields

## Example

What you see:

![What you see](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tk8rjht3o0y5cutj3uu7.png)

Code:

![Code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ju3ew9zp2us0mr9ubsly.png)
How to learn Git from scratch
Tags: git, webdev, programming, productivity
Published: 2021-03-26 18:46:36

# How does Git differ from other version control systems?
Hi there!
## Storing information

CVS, Subversion, Perforce, and other centralized platforms store information as a changelog for files. In contrast, Git considers data to be a set of casts of a small file system.

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/62343vp2z2u3js5awx26.png)
*The principle of data storage in Git* 

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j3j7u3yl4miu2ie2kvk1.png)
*The principle of storing data in other systems*

**Among other features**:

- unlike centralized systems, Git uses only local files and resources for most operations, which makes it possible to work without network access;
- before saving the file, Git calculates the checksum using the SHA-1 hash, and it becomes its index.

# How to use it?
Firstly, you need to [install](https://git-scm.com/downloads) Git, then configure it. Specify:

- **user name**:
`$ git config --global user.name "ra1nbow"`;
- **email address**:
`$ git config --global user.email ra1nbow@example.com;`
- **a text editor to work with**. For example, if the standard editor does not suit you and you chose Emacs:
`$ git config --global core.editor emacs`;
- **built-in comparison utility**. For example, if you want to use vimdiff
`$ git config --global merge.tool vimdiff`.
Then check the settings: `git config --list`.

# How to work with code?

Use the services for project hosting and collaborative development. They usually have access control, bug tracking, task management, a wiki for each project, and a developed community where you can ask for advice.

Among the most popular platforms:
 
- [GitHub](https://github.com/);
- [Gitlab](https://about.gitlab.com/);
- [Bitbucket](https://bitbucket.org/);
- [Gogs](https://gogs.io/);
- [SourceForge](https://sourceforge.net/).

# What to learn next?

- Working with repositories: creating, recording changes, viewing commit history, undoing changes, working with remote repositories and tags.
- Branching and merging.
- Git on the server: configuration, working with protocols, generating a public SSH key, GitWeb, Gitosis, Gitolite, Git daemon, Git hosting.
- Git tools.

# Where to learn?

- [Git Documentation](https://git-scm.com/doc);
- [Git Handbook](https://guides.github.com/introduction/git-handbook/);
- [Codecademy](https://www.codecademy.com/learn/learn-git)
- by thee way, ask me if anything

A little interactive:

- [site](https://explainshell.com/) with search for any shell commands, including Git commands.

# I learned everything, what's next?
When you have mastered the basic operations:

- take the tests;
- learn the [site with Git exercises](http://www.vikingcodeschool.com/web-development-basics/git-calisthenics);
- Learn the [Git encyclopedia](https://git.wiki.kernel.org/index.php/Main_Page): there are guides, cheat sheets and a community where you can ask questions.

**Hope you enjoyed my post! Follow my [Github](https://github.com/ra1nbow1) <3**
Rails power
Tags: womenintech, beginners, rails
Published: 2021-03-26 18:18:29

I am impressed with what Rails can do with one command. The challenge comes with understanding what happens under the hood. 

This week I tried to understand what files and functionality were created after I ran the command Scaffold. Scaffolding in Ruby on Rails refers to the automatic generation of a simple set of a model, views, and controller, usually for a single table. 

Here is the command I ran:

```
bin/rails generate scaffold Shift shift_status:boolean role_name:string shift_start:datetime shift_end:datetime shift_pay:integer
```
It created not only the model, views, and the controller, but also created test files for the models and views, a helper file for the shifts, sass files for styling, and even a ‘shifts’ resource in the routes file, which defines all possible routes for our shifts.

We can take a quick look at the routes created for us using resources by running the rails routes command.

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

Here is the view we are getting if we follow localhost:3000/shifts

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

The next step will be to add logic to controllers and association between other data(tables) in our application.

Lastly, I'd like to say a big THANK YOU to Arit, our senior engineer. I feel very supported and motivated to learn. Thank you for creating a welcoming and supportive environment.❤️

Thanks for reading! 

Photo by <a href="https://unsplash.com/@lopezrobin?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Lopez Robin</a> on <a href="https://unsplash.com/s/photos/power?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a>
Day 39
Tags: 100daysofcode, programming, javascript
Published: 2021-03-26 17:57:11

Day 39/100 of #100DaysOfCode

codewars

Hours coded: 1.6
Lines of code: 96
Keystrokes: 1803

via @software_hq's #vscode extension https://www.software.com/100-days-of-code
Explaining CSS float
Tags: beginners, css
Published: 2021-03-26 17:17:50

One of the basic and most useful property that every Web designer should learn is float property.
it is most commonly used for floating text around the image or creating two column layouts. The float property can cause a lot of frustration and confusion of it's not clearly understood.
So I will try to clear your confusion.

Float property:
Float property specifies how the element should float.
with the use of float property the element can be placed left or right.

The float property possible values area:
1 Left:
  The element float to the left side of its 
  containing block.
2 Right:
  The element float  to the right side of its 
  containing block.
3 None:
  The element does not  float.


when the element has  float set to it . it moves left or right until it  touches edge of the container or any other floated element.

That's all for now .I'll share more in my up-coming posts.
Thank you for reading!
Python Zero to Hero - Ep.39 - Packaging a ML project
Tags: python, beginners, machinelearning, nlp
Published: 2021-03-26 17:14:21

---
title: Python Zero to Hero - Ep.39 - Packaging a ML project
published: true
description: It's time to think about how to ship our emoji prediction. In this episode, we try to move things over to our emoprint and see how we can design the build process.
tags: python, beginner, machinelearning, nlp
---
It's time to think about how to ship our emoji prediction. In this episode, we try to move things over to our emoprint and see how we can design the build process. If you have any questions or any suggestions about which Python topics to cover, please leave your comment at my [Twitch channel](https://www.twitch.tv/cheukting_ho)
You, governments etc. should use new web wcbessibility tool of atoall.com for more growth in the world
Tags: webaccessibility
Published: 2021-03-26 17:11:06

No one can understand this without accessibility testing: -
Open https://WebAccessibilityTool.com website because this website is using this tool.

See the icon A.

WebAccessibilityTool.com is a big website, if it has been fully opened, then open a new tab.

Press in the new tab ppooii.com or https://llkkjj.com. This is a unique tool.

You will see WebAccessibilityTool.com again and surprised because of this accessibility testing.

This easy to use the option you can use for your website also. Get this code from https://Atoall.com and paste it on your website then it will work.

The biggest Government and Educational websites are using this.