teleren/devto huggingface dataset:
JavaScript “this” keyword — Basic explanation
Published: 2021-12-29 12:56:28


The most tricky and confusing topic in JavaScript is the word ‘this’ but today I will make it straight like water in this article. After practicing a few times, you will be able to grasp the keyword ‘this’ completely once you know the rules.
“this” is a reserved keyword in JavaScript, meaning this name can no longer be used for any variables or functions. And this ‘this’ is used in many different places. So the first thing you will understand everywhere is that ‘this’ is not really the case. But if you know the basics of how ‘this’ works, I hope you don’t have to worry too much about the larger, more complex code.
The value of ‘this’ is usually determined based on how a function is being called. And its value is determined at the time of execution. Let’s Discuss Some Topics on ‘this’ Rules in JavaScript.
1. Global Rules: If you use the keyword ‘this’ anywhere, except inside any of your custom-defined objects, it will always indicate your global object. In the case of browsers, the global object is the ‘window’ object. In other environments such as node JS, the global object is ‘global’.
Example:

2. Object Rules: Now custom defining an object and using the keyword ‘this’ inside it will no longer indicate its value and global object. Here its value will change.
Example:

Now, what if there is another object inside the object and ‘this’ is used there?
Example:

3. Clear Rules: You may have heard of the call, bind, apply method. These are actually used to set the value of this keyword explicitly. If you see that these have been used somewhere, then you can easily catch who this keyword is indicating. Because by using these call, bind, apply methods, you can set who this keyword will indicate in the first parameter.
Let's see the example:

Here, ‘this’ indicates the ‘newObj’ function here. But if we want to custom say ‘this’ to indicate ‘myObj’ here, then use the ‘call’ method.
Let's see the example, by applying the call method, “this” indicates the myObj object.

Note That: call, bind, apply These methods can only be used with functions as we have done in the example. Cannot be used with any other data type such as an object, string, number, or boolean.
4. New Keyword Rules: Another keyword that is final but widely used can determine the value of ‘new’ and ‘this’ keywords. Somewhere ‘this’ somehow falls under this ‘new’ keyword, its value may be different. I will write a detailed episode about this later. For this, we have to clear some more concepts first. Here I just put the idea that this keyword can also determine the value of ‘this’.
How to upgrade your Rails app to Ruby 3.1 with rbenv
Tags: ruby, migration, tutorial, rails
Published: 2021-12-29 12:55:57

Ruby 3.1 release [documentation](https://www.ruby-lang.org/en/news/2021/12/25/ruby-3-1-0-released/)


1. [Upgrade rbenv](#1-upgrade-rbenv)
2. [Install Ruby 3.1.0](#2-install-ruby-310)
3. [Set local Ruby version](#3-set-local-ruby-version)
4. [Update Gemfile](#4-update-gemfile)
5. [Debug gem](#5-debug-gem)
6. [New features](#6-new-features)

---

## 1. Upgrade rbenv

To include Ruby 3.1 as one of the available install options, first upgrade ruby-build:

```bash
brew update && brew upgrade ruby-build
```

See all available versions with `rbenv install --list`.

Ruby `3.1.0` should return in the result.

---

## 2. Install Ruby 3.1.0

```bash
rbenv install 3.1.0
```

---

## 3. Set local Ruby version

```bash
rbenv local 3.1.0
```

You can verify that the `.ruby-version` file in the root of your folder now lists version 3.1.0.

---

## 4. Update Gemfile

```rb
# old
ruby "3.0.3"

# new
ruby "3.1.0"
```

Tip: You can link to the ruby `.ruby_version` file instead to read the ruby version. A single source defines the ruby version and you avoid a discrepancy between the `gemfile` and `.ruby_version` file to occur.

```rb
ruby File.read('.ruby-version').strip
```

```bash
bundle install
```

You might run into the error __cannot load such file -- net/smtp (LoadError)__. `net-smtp` has been removed from the default gems in ruby 3.1. As [Action Mailbox](https://github.com/rails/rails/pull/42366) depends on net/smtp temporarily add to your gemfile until the `mail` gem includes it as a dependancy. 


```rb
gem "net-smtp", require: false
```
---

## 5. Debug gem

The [debug gem](https://github.com/ruby/debug) is the new preferred debugger. Alternative gems like `pry` are no longer necessary. Rails 7 includes the debug gem [by default](https://guides.rubyonrails.org/debugging_rails_applications.html#debugging-with-the-debug-gem).

Gemfile:

```rb
group :development, :test do
  # old
  gem 'pry'
  # new
  gem "debug", ">= 1.0.0"
end
```

Learn more in this [video](https://www.youtube.com/watch?v=XeWHrsp6nwo&list=PLbHJudTY1K0f0oMhWtY-UyzOb7tUlaHps&index=99)

---

## 6. New Features

- Error highlighting [examples](https://github.com/ruby/error_highlight)
- IRB auto-completion
- Typeprof [examples](https://github.com/ruby/typeprof/blob/master/doc/demo.md) / [vs code extension](https://github.com/ruby/typeprof/blob/master/doc/ide.md) / [video](https://www.youtube.com/watch?v=UTMj51j9yEg&list=PLbHJudTY1K0f0oMhWtY-UyzOb7tUlaHps&index=103)
- Short Syntax Hash Values [examples](https://dev.to/baweaver/ruby-3-1-shorthand-hash-syntax-first-impressions-19op)
for
Published: 2021-12-29 12:36:17

`for(initial expression, condition, increment expression)`
(مقدار دهی اولیه ، شرط ، مقدار افزایشی)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ct84sm9cz3rpucdw1f17.png)

{% codepen https://codepen.io/moonlxght10/pen/wvryzvM %}

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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xtrroskcdro07jegwols.png)
Aspiration for evision (Aspiration for 2022)
Tags: elixir, opencv, evision, nx
Published: 2021-12-29 12:33:40

[`evision`](https://github.com/cocoa-xu/evision) is quite an excellent product! It is a bridge between Elixir and OpenCV.

I developed [`NxEvision`](https://github.com/zeam-vm/nx_evision), a bridge between [`Nx`](https://github.com/elixir-nx/nx) and [`evision`](https://github.com/cocoa-xu/evision). I hope it will be a bridge between machine learning and computer vision in Elixir.

I also have an aspiration to apply the [Pelemay](https://github.com/zeam-vm/pelemay) technology to [`evision`](https://github.com/cocoa-xu/evision). That is, I'm going to implement optimization invocations of [`evision`](https://github.com/cocoa-xu/evision).

To be continued...
if else 
Published: 2021-12-29 12:13:02

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

```js

let hour = 10;

if (hour >=6 && hour <12){
    console.log("Good Morning!")
}

else if (hour >=12 && hour <18){
    console.log("Good Afternoon!")
}

else {
    console.log("Good Night! or Good evening!")
}
```
result:
`Good Morning!`
Dark Patterns in Design: Why You Should Never Trick Your Users
Tags: design, users, frontend, webdev
Published: 2021-12-29 12:10:08

{% youtube 0zJjYbS7oM8 %}
Hi!
How do dishonest companies force their clients to do things they don’t want to do? In the newest episode, Paweł will tell you about the dark patterns in design and explain why you should never trick your users.

Learn about:
🟣 What are dark patterns in design?
🟣 Tricky questions
🟣 Roach motel
🟣 Bait and switch
🟣 Friendspam
🟣 Other kinds of dark patterns

Enjoy! You can also read the article at [Frontend House](https://frontendhouse.com/experts-zone/dark-patterns-in-design-why-you-should-never-trick-your-users-experts-zone-9)
15 Days Of Code Search
Tags: codesearch, programming, tutorial, productivity
Published: 2021-12-29 12:03:24

Recently, I did a [#15DaysOfSearch Twitter campaign](https://twitter.com/hashtag/15DaysOfSearch) to show developers how they can optimize their workflow by mastering code search on [sourcegraph.com](https://sourcegraph.com).

Here's the recap from Day 1 to Day 15:

### Day 1

{% twitter 1467889418325397520 %}

### Day 2

{% twitter 1468291954475732995 %}

### Day 3

{% twitter 1468648589412999172 %}

### Day 4

{% twitter 1468956675818156036 %}

### Day 5

{% twitter 1468956675818156036 %}

### Day 6

{% twitter 1470865101871853572 %}

### Day 7

{% twitter 1471225968345980939 %}

### Day 8

_**Tweet:**_ [How to discover projects and repos by checking if they have specific files in them using the “repo:contains.file()” filter.
](https://twitter.com/unicodeveloper/status/1471329823117254660?s=20)

### Day 9

_**Tweet:**_ [How to perform structural search queries.](https://twitter.com/unicodeveloper/status/1472961486754570246?s=20)

### Day 10

_**Tweet:**_ [How to limit results to display only the repos involved by using the select:repo filter.
](https://twitter.com/unicodeveloper/status/1473505817747931136?s=20)

### Day 11

_**Tweet:**_ [Search contexts on Sourcegraph.](https://twitter.com/unicodeveloper/status/1474126398763814915?s=20)

### Day 12

_**Tweet:**_ [How to search archived repositories.](https://twitter.com/unicodeveloper/status/1474593969099227137?s=20)

### Day 13

_**Tweet:**_ [How to search forked repositories.](https://twitter.com/unicodeveloper/status/1475217958981054467?s=20)

### Day 14

_**Tweet:**_ [How to perform case sensitive searches on Sourcegraph. By default, all searches are case insensitive.](https://twitter.com/unicodeveloper/status/1475599014863466497?s=20)

### Day 15

_**Tweet:**_ [How to save search, export search results and proactively monitor changes to codebase via Sourcegraph code monitor.](https://twitter.com/unicodeveloper/status/1475903495131865089?s=20)



## Wrapping Up

Sourcegraph users report an average of 30mins a day saved by using code search. The knowledge of Sourcegraph code search tips and tricks arms you with the confidence to move fast in any codebase.  

[Sourcegraph Cloud](https://sourcegraph.com) is not the only option to add, explore private code and use search contexts. Sourcegraph can be installed in different ways to give you advanced search features for your private code. 

You can run [Sourcegraph locally](https://docs.sourcegraph.com/admin/install#self-hosted) or opt-in for us to set up a [managed Sourcegraph instance](https://docs.sourcegraph.com/admin/install/managed) for your team. You'll be able to use a self-hosted Sourcegraph instance for free (up to 10 users).

---
Have suggestions or questions? Leave a comment, or join our [Community Slack Space](https://about.sourcegraph.com/community/?utm_medium=social&utm_source=devto&utm_campaign=slacklaunch) where our team will be happy to answer any questions you may have about Sourcegraph.
How to make a Dictionary App in React
Published: 2021-12-29 11:21:24


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

Making a Dictionary App in React is one of the many projects that a beginner must make as it covers all the things a beginner must have in order to upgrade himself/herself from beginner to intermediate level as it test your API skills and mainly you using states and passing of props from Parent Component to Child Component.
This blog will tell you how to make a Dictionary App which not only has word-meanings but examples, synonyms and antonyms of that word and for bonus, it also allows you to create an audio file for that you can also have a proper pronunciation of that word.
It uses an API which is similar to the google API
and here is a [glance](https://dictionary-app-xi.vercel.app/) before starting the blog
Click here for the [blog post](https://tekolio.com/how-to-create-a-dictionary-app-in-react/).
Basic React Concepts
Published: 2021-12-29 11:16:44


1. What are reactjs? Tell us about the advantages and disadvantages of using react js.
Answer: React is a very popular open-source JavaScript front-end library, that is used to build a user interface based on UI components.
The advantages of React.js are given below,
i) It has reusable components and code.
ii) It is easy to learn and easy to use.
iii) It helps to create a dynamic web application and it’s quite easier.
iv) React has a dedicated tool that’s why it is easy to debug.
v) React has a Unidirectional data flow.
vi) It is also known to be SEO friendly.
vii) It offers a very rich JavaScript library.

The disadvantage of React.js is given below,
i) it has a high pace of development.
ii) the documentation of react is poor.
iii) it has only the UI layers view part.
iv) web development community considers jsx as a barrier.

2. Difference between useEffect and useState?
Answer: We know both useState and useEffect enhance functional components to make them do things that classes can but functional components (without hooks) cannot. The difference between useEffect and useState is given below,
useState basically used to add state variables in the functional components. useState function is straight forward it allows you to add state accessors inside the functional component. But on the other side useEffect function hook are allows you to use the group of lifecycle methods like, componentDidMount(), componentDidUpdate(), componentWillUnmount(). So this lifecycle method you can use in useEffect function hook in your functional component.

3. What is the component lifecycle of React?
Answer: In React every Component has a lifecycle of its own, component lifecycle can be defined as a series of methods that are called in different stages of the component’s existence.
You can monitor or manipulate this lifecycle during three phases. The definition is pretty good but what are different stages? A React Component can go through four stages of its lifecycle. These four stages are given below,
Initialization: This is the first stage of react component. In this stage, the component is constructed with the given Props and state. This stage is completed in the constructor of a Component Class.
Mounting: Mounting is the second stage Where rendering the JSX is returned by the render method itself. There are four built-in methods in this Mounting phase. Like constructor(), getDerivedStateFromProps(), render(),componentDidMount(). In this following methods render method is required and it will always be called.
Updating: The next stage is Updating, in this stage, the state of a component is updated, and also the application is repainted.
Unmounting: The final stage is Unmounting. Unmounting stage is the last step of the component lifecycle where the component is removed from the page.
React.js provides the developers a set of predefined functions that are very useful and you can call this function around specific events in the lifecycle of the component. Developers have mostly overridden the functions with their desired logic to execute accordingly.
Follow easy steps for cash app dispute: 
Published: 2021-12-29 11:13:52

It is necessary to follow easy steps if you are willing to go ahead with a **[cash app dispute](https://www.contact-customerservice.co/blog/how-to-get-cash-app-support/)**. Since the complication may turn your situation most annoying. Therefore, simply you can access the activity tab and implement the procedure to access the option dispute this transaction. Apart from this, you can also opt to have the guidance of the cash app technical for error-free execution of the required steps.
Wednesday Links - Edition 2021-12-29
Tags: jvm, java, maven, microservices
Published: 2021-12-29 10:46:08

Should you start your architecture with microservices? (8 min) 🤨 
https://arnoldgalovics.com/microservices-in-production/

Migrating Spring Boot app to Java 17 (20 min) 👌
https://blog.codecentric.de/en/2021/12/migrating-spring-boot-java-17-day-2/

Future of Maven (8 min) 💪
https://www.javaadvent.com/2021/12/from-maven-3-to-maven-5.html

GitHub may replace DockerHub (6 min)🙀
https://levelup.gitconnected.com/github-may-replace-dockerhub-a5da5e547f01

Zero dependency library discussion (3 min) 🍿
https://twitter.com/gunnarmorling/status/1474053962034782212

Performance Myths and Continuous Profiling (17 min) 💨
https://richardstartin.github.io/posts/perf-myths-and-continuous-profiling

Custom Spring Data Repository (5 min) 🧐
https://vladmihalcea.com/custom-spring-data-repository/
Components of machine learning
Tags: machinelearning, ai, programming, beginners
Published: 2021-12-29 10:43:39

The three main components of machine learning include :

- Machine Learning Model

- Model training algorithm

- Model Inference Algorithm

## Machine learning model
This is a file that has been trained to recognize a certain type of pattern on a dataset and providing it an algorithm that it can use to solve different problems.
The model can further be broken down into two subtypes: **Supervised and Unsupervised Learning** .
Machines are trained using labelled data therefore the datasets contain both input and output parameters.

### Types of supervised learning

1. Continuous label (Regression)
This technique consists of mathematical methods which help in finding the correlation between variables and enables us to predict the continuous output variable based on one or more predictor variables.

2. Categorical label (Classification)
This technique allows a program to learn from the given dataset or observations and then classify new observations into a number of groups.

other types include :
3. Naive Bayesian Model
4. Random Forest Model
5. Neural Networks
6. Support Vector Machines

### Unsupervised Learning
This technique has input data but no corresponding outputs. The goal is to find the underlying structure of a dataset and group it according to similarities, then represent that dataset in a compressed format.
<u>Types</u>

1. Clustering
This is the process of grouping similar data together. The aim is to find similarities in the data point and group similar data points together.
2. Association
This technique checks for the dependency of one item on another data item and maps accordingly so that it can be more profitable.

## Model training algorithm
the algorithm is provided with training data which must contain the correct answer. it finds patterns in the training data that map the input data algorithm to the target and it outputs an ML model that captures these patterns.

## Model Inference Algorithm
Using a trained model to generate predictions.
Just used my responsive skills to design this restaurant website
Tags: webdev, beginners, html, opensource
Published: 2021-12-29 10:23:59

In the last DEV post I have shared the my real experience of Kevin Powell's course "Responsive layout" and journey.

{% link https://dev.to/atulcodex/roller-coaster-journey-to-learn-css-responsive-layout-course-by-kavin-powell-7ln %}

To sharp my skills and knowledge to the next level web development project, I have made this restaurant website template.


![Restaurant website template](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/05gcu7qgmrkq7lazmxfi.png)

{% github https://github.com/atulcodex/Restaurant-website %}

This is a Modern, Clean and Professional restaurant website template. Prefect for restaurant, Fastfood, Bakery, Cafe, Pub, Bar, Catering, and any food business. This work is totally open-saurce and free to use.

1. Single page restaurant website
2. Opensource restaurant website
3. Easy to change color
4. Modern, unique Design
5. Easy core CSS structure
6. Smooth page transitions
7. Super fast loading
8. Valid HTML5 & CSS3
9. Responsive 100%
10. Easy Customization
11. No third party plugins

Please review this template and comment your thoughts.
Deploy ASP.NET Web Applications For Free !
Tags: devops, programming, beginners, dotnet
Published: 2021-12-29 10:18:02

Hello everyone, I Hope you are all doing well.
there are a lot of ways to host and deploy you .net web apps but not all of them are free or are as easy to use as the tool i will be discussing today.
SmarterASP offers 2 months for free for you to test out your app or even if you want to go into production.
If you are interested I've made the following video to show the process.
In this video i also show a lot of extra configurations for stuff like image uploading and database setup that you might not find straight forward.

> Hope you find it useful, don't forget to support me by subscribing :) (Hope we hit 100 Subs soon)

[Smarter ASP Link](https://www.SmarterASP.NET/index?r=ZairiAimen)

{% youtube JM5joh1n75U %}

## Extra Notes
will add notes everytime i find something important

### .NET Roles :

the easiest solution i found was to copy the SQL creation code from your local database if you already have roles and role accounts and execute the query in SmarterASP.
Conditional rendering in React
Tags: react, javascript, webdev, 100daysofcode
Published: 2021-12-29 10:17:31

Real quick, I have two components I want to render(show) based on the role of login status, if it's an admin then I want to display the admin UI or else if it's a user, display the user UI. 
How do I do this?

Hello my dear reader, welcome to today's post where I'll be teaching the tricks and tips to solve the problem above. Enjoy you stay reading the post 📯.

When you have components you want to conditionally render, React has a way of helping you achieve that. Let's see it in action.

Let's use the problem above as an example. Say we have Admin & User components.

```
...
{
  return ({user && user.role === 
   "Admin" ? <Admin /> : <User />})
}
```

So what's going on here. If a user is logged in, he's either having a role of **User** or **Admin**. Now we checked if there's a user, if there's one, check for the role and display the corresponding UI.

What about a situation where it's just a component you want to render?
Let's take a scenario where you want to display an error if password attempt's more than 3 times.

Simply do this in your return block:
Assume you have a variable called `attempt` holding the number of times the user tried logging in, and a component called `ErrorToast` that will display the error.

```
return({attempt >= 3 ? <ErrorToast /> : null})
```
Here we are saying if the attempt is 3 times already, display the error if not, do nothing.

Or the easier way
```
return({attempt >= 3 && <ErrorToast />})
```

And that's all for now. 
If you did learn something, kindly share and give it a like 😉