teleren/devto huggingface dataset:
Creating an Axios Instance
Tags: axios, javascript, react
Published: 2022-04-12 06:45:10

In this blog, I'll show you how to create an axios instance in a react project.

I had covered the fundamentals of Axios in my earlier blog.

{% embed https://dev.to/ndrohith/get-post-put-delete-in-axios-2hf4 %}

Once your react app  is created lets create a `components` folder inside our `src` directory .Later, inside our `components` folder, create two folders named `api` and `main` to hold our api instance file and other webpage files.

```ts
src
|--components 
            |-api
            |-main
``` 

Inside `api` directory lets create a file named `api_instance.js`. Here i am using my localhost as baseURL.

```jsx
import axios from "axios"; 

const instance = axios.create({
  baseURL : 'http://127.0.0.1:8000/api/',
  headers: {
//  Authorization: `<Your Auth Token>`,
    Content-Type: "application/json",
    timeout : 1000,
  }, 
  // .. other options
});

export default instance;
```
After we've finished creating our instance file, we can import it into our js file.
Let's create a file named `home.js` inside  `main` folder

```jsx
import React, { Component } from "react";
import instance from "../api/api_instance";

class Home extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }

  async componentDidMount() {
    try {
      await instance({
        // url of the api endpoint (can be changed)
        url: "home/",
        method: "GET",
      }).then((res) => {
        // handle success
        console.log(res);
      });
    } catch (e) {
      // handle error
      console.error(e);
    }
  }

  postData = async (e) => {
    e.preventDefault();
    var data = {
      id: 1,
      name: "rohith",
    };
    try {
      await instance({
        // url of the api endpoint (can be changed)
        url: "profile-create/",
        method: "POST",
        data: data,
      }).then((res) => {
        // handle success
        console.log(res);
      });
    } catch (e) {
      // handle error
      console.error(e);
    }
  };

  putData = async (e) => {
    e.preventDefault();
    var data = {
      id: 1,
      name: "ndrohith",
    };
    try {
      await instance({
        // url of the api endpoint (can be changed)
        url: "profile-update/",
        method: "PUT",
        data: data,
      }).then((res) => {
        // handle success
        console.log(res);
      });
    } catch (e) {
      // handle error
      console.error(e);
    }
  };

  deleteData = async (e) => {
    e.preventDefault();
    var data = {
      id: 1,
    };
    try {
      await instance({
        // url of the api endpoint (can be changed)
        url: "profile-delete/",
        method: "DELETE",
        data: data,
      }).then((res) => {
        // handle success
        console.log(res);
      });
    } catch (e) {
      // handle error
      console.error(e);
    }
  };

  render() {
    return <>Home Page</>;
  }
}

export default Home;
```

That's about all . Your axios instance has been created and can be configured according to your project.
Is it possible to run a Golang app as Windows Service AND Linux deamon
Tags: go
Published: 2022-04-12 06:33:09

As golang provide the ability to build the Cross-Platform app with the same source code. I like to create the one Window-service kind of program with is run on Cross-Platforms like- Windows, Linux and Apple. I know outside programs exist to run exe as service, like NSSM, but it is a server that I'd like to avoid outside programs on and I'd like to know the "correct" way to go about this. Please guide.
AWS Re/Start program experience
Tags: beginners, career, aws
Published: 2022-04-12 06:22:59

##AWS now do bootcamps? Wait what!

AWS/reStart is a free full time program over 12 weeks, designed to prepare you with the pre-requisite skills for a career in cloud computing. The AWS re/Start is a global program, which I am lucky to have the opportunity to be a part of in New Zealand. The most exciting benefit of the program is that it partners students with internships at the end of the course. 

##Week 1 - 4

I am currently up to week 4 of the AWS/Restart program yikes! So far we have covered hardware, introduction to networking, introduction to cloud foundations, Github, basics of python programming and some linux/bash. 

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

It's a lot to cover that's for sure, fortunately I have studied in my own time prior to the course and have a good grasp of linux, python and AWS services.

## The Learning Platform & Course Content

In conjunction with class based learning AWS has supplemented the program with an online learning platform with lectures, interactive labs and quizzes. I have made good use of this after class to solidify my learning.

##What's next?

Week 6 is interviews with employers where I will get the chance to show off my knowledge and meet the internship partners.

In terms of the curriculum we still have databases, security, AWS services and more to come.
ADVANTAGES OF MACHINE LEARNING
Tags: machinelearning
Published: 2022-04-12 06:19:39

Machine learning is a technology by which machines can give us valuable results from raw data. The data is provided to the machine in a variety of ways i. e. earlier data and existing data. For example, a weather forecast system employs machine learning to calculate the temperature in the upcoming days.

**Dealing with mundane tasks**

One extensive benefit for machine learning is it is potential to accomplish mundane tasks by making use of intricate automation of which will improve production. Theoretically, this may possibly eradicate “boring” responsibilities from humans together with free them way up to be even more creative.

**Quicker decisions**

Using machine learning besides cognitive technologies can help to make quicker judgements and take actions faster. You can learn Machine Learning by [machine learning certification](https://www.igmguru.com/machine-learning-ai/machine-learning-certification-training/) courses.

**Avoiding mistakes**

The particular word “human error” came to be because humans, simply, make mistakes every once in awhile. Computers, though, tend not to these blunders : that is, obviously, considering they are programmed correctly. Together with machine learning, data could be dealt with error-free, no make a difference how big the dataset might be.

**Taking risks on behalf of humans**

Having machine learning you can arguably decrease the uncertainties you promote humans to with the intention of experimentation. Using artificial intelligence in this manner could lead to huge advantages in areas such as demand forecasting, medical diagnosis, and oil exploration.
Introduction to unit testing ViewModel with Kotlin Coroutine & Flow
Tags: kotlin, testing, viewmodel, programming
Published: 2022-04-12 06:17:45

Learn how to write unit test of ViewModel which has [kotlin coroutine](https://blog.canopas.com/retrofit-effective-error-handling-with-kotlin-coroutine-and-result-api-405217e9a73d).

In this post, we’re not going to cover any UI-related and business logic of networking calls. 

We have created a Sealed class to manage the state of our main screen in a very simple way.

You can read full article: [https://blog.canopas.com/introduction-to-unit-testing-viewmodels-with-kotlin-coroutine-367630e95831](https://blog.canopas.com/introduction-to-unit-testing-viewmodels-with-kotlin-coroutine-367630e95831)
Angular Routing #2
Tags: javascript, webdev, angular, typescript
Published: 2022-04-12 06:11:23

Route Params
Ex:
`{ path: 'product/:id/, component: ProductDetailComponent }`
 
`<a [routerLink]="['/Product', product.productID]">{{product.name}} </a>`
Retriving Params:
ActivatedRoute can be used for this purpose
this.id=this._Activatedroute.snapshot.paramMap.get("id");
 
`this._Activatedroute.paramMap.subscribe(params => { 
    this.id = params.get('id'); 
});`
We usually retrieve the value of the parameter in the ngOninit life cycle hook, when the component initialised.

When the user navigates to the component again, the Angular does not create the new component but reuses the existing instance. In such circumstances, the ngOnInit method of the component is not called again. Hence you need a way to get the value of the parameter.

By subscribing to the observable paramMap property, you will retrieve the latest value of the parameter and update the component accordingly.
can also get the parent params like

`this.sub=this._Activatedroute.parent.params.subscribe(params => { 
          this.id = params['id']; 
          let products=this._productService.getProducts();
          this.product=products.find(p => p.productID==this.id);    
      });`

Simple code snippet:
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zxbyohdnsmrutbs4sq2h.png)
Django Detail View (Post Detail)
Published: 2022-04-12 06:03:18

**views.py**

```python
from .models import Post
from django.views.generic import DetailView

class postview(DetailView):
    model = Post (Import your post models)
```
**urls.py**

```python
from django.urls import path
from . import views

urlpatterns = [

    path('post/<int:pk>',views.postview.as_view(),name='post-view'),

]

```
**post_detail.html**

```html
{% block content %}
    <article class="media content-section">
        <img class="rounded-circle article-img" src="{{ post.author.profile.image.url }}">
        <div class="media-body">
            <div class="article-metadata">
                <a class="mr-2" href="#">{{ post.author }}</a>
                <small class="text-muted">{{ post.date_posted|date:"F d, Y" }}</small>
            </div>
            <h2><a class="article-title" href="{% url 'post-view' post.id %}">{{ post.title }}</a></h2>
            <p class="article-content">{{ post.body }}</p>
        </div>
    </article>
{% endblock content %}
```
SQL-Quick tip #8 - Finding foreign key constraints
Tags: tsql, sqlserver, sql, mssql
Published: 2022-04-12 05:41:21

## Sql Server tips and tricks

This is part of a series of quick tips and tricks I have accumulated over the year, that I think can be useful for others.
If you have similar short tips and tricks please leave a comment.

### All foreign key constraints

A well designed database relates its tables to each other using foreign key relations in order to ensure data integrity. But when the database has hundreds or even thousands of tables it can be a huge challenge finding all the tables related to a specific table you may have to modify.
The query below will find all the foreign key constraints between columns with a specific column name.

```sql
DECLARE @colname VARCHAR(200) = 'customer'

SELECT fk_tab.name as [table],    
	   pk_columns.name as colname,
       pk_tab.name as [fk_table],
	   fk_columns.name as fk_colname
  FROM sys.foreign_keys fk
  JOIN sys.tables fk_tab on fk_tab.object_id = fk.parent_object_id
  JOIN sys.tables pk_tab on pk_tab.object_id = fk.referenced_object_id
  JOIN sys.foreign_key_columns fk_cols on fk_cols.constraint_object_id = fk.object_id
  JOIN sys.columns fk_columns ON fk_columns.object_id = fk_cols.referenced_object_id 
       AND fk_columns.column_id = fk_cols.referenced_column_id
  JOIN sys.columns pk_columns ON pk_columns.object_id = fk_cols.parent_object_id
       AND pk_columns.column_id = fk_cols.parent_column_id
 WHERE fk_columns.name LIKE '%'+ @colname +'%' OR pk_columns.name LIKE '%'+ @colname +'%'
 ORDER BY pk_tab.name
```

In the [Northwind](https://docs.microsoft.com/en-us/dotnet/framework/data/adonet/sql/linq/downloading-sample-databases) example below, we can see that the CustomerTypeID column of the CustomerCustomerDemo table has a foreign key relation to the primary key column CustomerTypeID of the table CustomerDemographics.

![Sql Server Management Studio screenshot](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e7nyonqfbmh64ubeccpg.png)
Building Lego brick effect generator with Svelte
Tags: javascript, svelte, opensource, beginners
Published: 2022-04-12 05:37:07

I was inspired by this [TikTok](https://www.tiktok.com/@ux.espinosa/video/7084190784605490437) video showing how to build a cool Lego look in Figma and decided to turn it into a generator made with Svelte.

[Find the article on Medium.]( https://link.medium.com/qJ2C2L1T9ob)
Advanced Appetite - 100% Natural Supplements To Boost Your Fat Burn!
Published: 2022-04-12 05:27:26

Why would I read stupid stuff online anyhow? Are you certain you want to ride this ride? You might have to have quite a few sort of Advanced Appetite social support. This demand is slipping. I have not been convinced that these Advanced Appetite questions are irrelevant. That would be super if there were limits. What can they do? That is a ground floor opportunity where this story is going to cover them. Let that infiltrate your beliefs. In response to Advanced Appetite troubles, the government lately announced a rule allowing Fat Burner Supplement. Who are you trying to completely illustrate anything that clarifies doing it so poorly? I'm going nuts. It is it! Here are my angelic proclamations respecting that. It's magical. That indicates that this option is undoubtedly the best. That was rather vital to the entire Advanced Appetite plan. It is according to the American Advanced Appetite Association. You have to end thinking like an everyday doing that consumer.
Setting up Django app
Tags: django, python
Published: 2022-04-12 05:24:42

### Install Python
Get the latest version of python from the link below

{% embed https://www.python.org/downloads/ %}

### Check Python version

```bash 
python --version
``` 
### Check pip version
```bash 
pip --version
```
### Installing Django
```bash 
python -m pip install django
```
### Check Django Version
```bash 
python -m django --version
```
### Create Django App
```bash 
django-admin startproject <project-name>
cd <project-name>
django-admin startapp <app-name>
```
### Migrations in Django app
```bash 
python manage.py makemigrations
python manage.py migrate 
```
### Starting Django Server
```bash 
python manage.py runserver
``` 
Then open http://127.0.0.1:8000/ to see your app
#### Django Documentation :https://docs.djangoproject.com/en/4.0/
Django Crispy Form
Published: 2022-04-12 05:13:18

terminal

```python
> pip install django-crispy-forms
```

setting.py

```python
INSTALLED_APPS = [
    ...

    'crispy_forms',
]

CRISPY_TEMPLATE_PACK = 'bootstrap4'
```
In your HTML form

example.html

```html
{% load crispy_forms_tags %}

{% block content %}
  <form method="post">
    {% csrf_token %}
    {{ form|crispy }}
    <button type="submit" class="btn btn-primary">Sign in</button>
  </form>
{% endblock %}
```
PIPES IN ANGULAR 11
Tags: javascript, webdev, beginners, angular
Published: 2022-04-12 05:07:25

**WHAT ARE PIPES???**
Pipes are a feature built in Angular 2 which allows you to _transform output in your template_

**Example:** You have a property **username**='deepa'

**You want to write your name in uppercase only in output on template **

**

- 
You don't wanna change property in yout ts .

- 
You want to transform the way it is rendered on screen**

For this you could simply use uppercase pipe, which is a built-in pipe

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

Now your username will show as :'DEEPA' in the output.**** 



## Parameterizing Pipes

**Suppose you have date in format "8 April,2022".**
**You don't want this format ,You want to customise it according to your requirement **

**You can do it using parameterised pipes**

In ts file you will define an object students like this:
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a2pcsfcl8umcz1pb6x46.png)

**Now in your html file you will add parametrized pipe like this**

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

here " |date:'fullDate'" represents parametrized pipe.

Output will look like this
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kjqtfsq12ludfkpearbu.png)

you can refer https://angular.io/api/common/DatePipe for more details

## Chaining Multiple Pipes

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

**Here order in which we write pipe matters because it iterates from left to right**

1. First fullDate will be applied
2. On the result (i.e Monday, April 12, 2022) Uppercase will apply
3.And it will become 'MONDAY ,APRIL 12,2022'.

## Creating a Custom Pipe

1. First, create a ts file pipename.ts

**Now your pipe.ts should look like this**

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

Here you can see an example of custom pipe.
**Important points to note**

- It implements the PipeTransform interface which is important.

- transform method is compulsory in your pipe and all the logic will go inside this method only.

- @Pipe({name:"youpipename"}) is important or it will throw error.

Here's my small explaination about pipes in Angular
If you like it please like share and comment
Implement StrStr
Tags: leetcode, problems, interview
Published: 2022-04-12 04:55:35

<h2><a href="https://leetcode.com/problems/implement-strstr/">28. Implement strStr()</a></h2><h3>Easy</h3><hr><div><p>Implement <a href="http://www.cplusplus.com/reference/cstring/strstr/" target="_blank">strStr()</a>.</p>

<p>Given two strings <code>needle</code> and <code>haystack</code>, return the index of the first occurrence of <code>needle</code> in <code>haystack</code>, or <code>-1</code> if <code>needle</code> is not part of <code>haystack</code>.</p>

<p><strong>Clarification:</strong></p>

<p>What should we return when <code>needle</code> is an empty string? This is a great question to ask during an interview.</p>

<p>For the purpose of this problem, we will return 0 when <code>needle</code> is an empty string. This is consistent to C's <a href="http://www.cplusplus.com/reference/cstring/strstr/" target="_blank">strstr()</a> and Java's <a href="https://docs.oracle.com/javase/7/docs/api/java/lang/String.html#indexOf(java.lang.String)" target="_blank">indexOf()</a>.</p>

<p>&nbsp;</p>
<p><strong>Example 1:</strong></p>

<pre><strong>Input:</strong> haystack = "hello", needle = "ll"
<strong>Output:</strong> 2
</pre>

<p><strong>Example 2:</strong></p>

<pre><strong>Input:</strong> haystack = "aaaaa", needle = "bba"
<strong>Output:</strong> -1
</pre>

<p>&nbsp;</p>
<p><strong>Constraints:</strong></p>

<ul>
	<li><code>1 &lt;= haystack.length, needle.length &lt;= 10<sup>4</sup></code></li>
	<li><code>haystack</code> and <code>needle</code> consist of only lowercase English characters.</li>
</ul>
</div>

Python solution

```
class Solution:
    def strStr(self, haystack: str, needle: str) -> int:
        
     
        
        for i in range(len(haystack)):
            if haystack[i: i + len(needle)] == needle:
                return i
        return -1
```
Create React forms in a few minutes.
Tags: react, forms, javascript
Published: 2022-04-12 04:22:00

Hi everybody.
We are using a new library for creating a form.

**For creating your forms you need to make two simple steps:**

1. Define a scheme which describe validation and some properties of form data.
2. Connect your scheme via methods to your UI components.

## Scheme

```
// scheme.js export default {
    valid: null,
    formValue: {
        first_name: "",
        last_name: "",
    },
    rules: {
        first_name: [
            ["empty", "please write your first name"]
        ],
        last_name: [
            ["empty", "please write your last name"]
        ]
    }
}

```

## Form

```
//MyForm.ts
import {useFormMod} from "formmod";

export const MyForm = () => {
const {setValue, getValue, getError, validate} = useFormMod(
        FORM_SCHEME
 );

return (
<form onSubmit={handlerSubmit}>
…
      <MyTextInput
           label={"First name"}
           value={getValue("first_name")}
           error={getError("first_name")}
           onChange={(value: string) => setValue("first_name", value)}
      />
…	
</form>
);
```

Full documentation :
https://doc.formmod.org/

**WE RECOMMEND TO USE LAPTOP OR DESKTOP DEVICE FOR READING 
DOCUMENTATION.

Advantages:
- **No dependencies.** This is the power of simple work.This form system don’t know about your components, JSX, your app, store…You can use it with any UI components. No longer need to make wrappers components, understanding JSX syntax.Just use it with anything.
- **Easy system, easy code.** It’s very simple.
- **Save time.** Just connect properties to your components.
- `In addition to validation and simple things, the system supports optional, group fields in the form and much more. Just read documentation.`

**For support us, just set a star in our GitHub page (Thank forward).**

[https://github.com/nickorsk2017/formMOD](https://github.com/nickorsk2017/formMOD)
What do you think about this system?
Thank you!
Things to become a better developer
Tags: programming, career, beginners
Published: 2022-04-12 03:29:20




Have you ever thought, what exactly is the formula to become a better developer? The thing is that there is no formula, book or even a methodology. Everything is about building a mindset and identifying those things that you need to start doing in order to became a better developer. Also keep in mind that everyone who works in the tech field is constantly learning because every single day things change. 

I’ll give you some advices that help me grow as a developer:

## Improve your communication skills
    
First things first, as software engineers we don’t work alone most of the times there’s a development team where everyone has their own tasks. Having more confidence and start asking for help is one of the most important things to have a better communication with your team, solve problems and find better solutions. 
    
But everything is up to you, the way you act and the words you use to express yourself can make the difference.
    

## Practice algorithms and DS
    
We all got that class at college of learning algorithms and data structures, but sometimes when we get more focused on a specific area meaning Web development, Mobile development, etc. We forget about the basics, starting with data structures such as stacks and queues would help us identify when and where to use it, algorithms allow us to write an optimal solution based on time and space complexity. 
Remember, It’s always a good idea keep practicing your programming logic. 
    

## Learn how to use your terminal
    
As a Frontend developer I used to think that I would never open a terminal, I didn’t even know that a shell and the terminal are actually different.  But I was totally wrong, as developers we need to have as a minimum basic knowledge of terminal because sometimes there are no UI and we also need to install libraries or packages that are based on commands. 
    

## Rest and take care of yourself, not everything it’s about coding
    
Last but not least, there are many times that we forgot that we are humans,  and we started living in autopilot. The importance of resting at weekends and enjoying the things you like to do is part of the process. So, this weekend why don’t you start watching that tv show? Go to your favorite cafeteria and spend your time with the people you love, friends, family boyfriend / girlfriend.


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