teleren/devto huggingface dataset:
Research>Design
Tags: design, uiweekly, ux
Published: 2020-07-11 08:43:09

#Disclaimer ⚠
Since a long time I wanted to be able to share this viewpoint as to why proper research is more important than amazing design skills but I never found myself in the position to be able to share this topic because I never thought it will be perceived positively but it since recent happenings I think I should be sharing this.

#Storytime 🎤
Take for instance an interview you are called for. You are excited about the interview because it is a call for a job you love so to make a good impression you go through everything you there the available for the job and the company profile. Now as you research about the company you start realizing things about the company which you otherwise would not have been able to know if you had not searched for it. Now, if you portray this in the interview there is a good chance of you being considered as a good imperession becuase you know what you are getting yourself into.

#Learning 🙌
Similar is the case with design, if you have a client from a particular market it is your job to research about the design trends, norms of that respective market or else if you design vaguely just for the sake of good looking design and even if the client likes it, the design would be of no technical use. Even a small amount of research will get you the knowledge which you can use in your design to make the design profitable for the client you are designing for. 

#Conclusion 👋
Many of you might already be doing this but I have seen designer start designing without any prior research, I have been here and I can guarantee that the design indeed served no purpose other than visually appealing but contextually it did not really make sense.

Follow me on twitter [@gajjar_devansh](https://twitter.com/gajjar_devansh) and have a look at my designs on Behance [@devanshgajjar](https://www.behance.net/devanshgajjar)
FastAPI + PostgreSQL + Async REST Endpoints + Azure Deployment
Tags: fastapi, python, azure, rest
Published: 2020-07-11 08:01:09

---
title: FastAPI + PostgreSQL + Async REST Endpoints + Azure Deployment
published: true
description: Tutorials to implement and deploy FastAPI to Azure cloud. 
tags: FastAPI, Python, Azure #rest
//cover_image: https://direct_url_to_image.jpg
---

I wrote articles and made videos that demonstrates Implementing Async CRUD REST APIs using Python based FastAPI framework. And added detailed notes about deploying FastAPI on Azure with Full Source code available on GitHub. You may find the links here


Video: [Implementing Async REST APIs in Python using FastAPI with PostgreSQL CRUD](https://bit.ly/3j42qvf)

Articles:
[Implementing Async REST APIs in FastAPI with PostgreSQL CRUD](https://bit.ly/2O6onvp)



[Deploy FastAPI on Azure App Service](https://bit.ly/3gPntQ7)
Ever wondered what happens when you type in a URL in an address bar in a browser?
Tags: webdev, showdev, beginners
Published: 2020-07-11 07:44:32

Here is a brief overview of what happens when you type in a URL in a address bar in a browser...

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

This sketch note is under [CC BY-NC-SA](https://creativecommons.org/licenses/by-nc-sa/2.0/) license.
Review our open-source project: Continuous Machine Learning ⭐ CML ⭐
Tags: opensource, machinelearning, datascience, githunt
Published: 2020-07-11 07:35:03

I've been working on CML project in the last few months. The project idea is to **automate machine learning** projects using CI/CD practices:
1. 📊 Visual reports in GitHub Pull Request or GitLab Merge Requests.
2. 💾 Transfer datasets in your CI runners for ML training.
3. ☁️ Auto-allocation of cloud CPU/GPU. AWS, Azure, GCP, Ali are supported.


{% github iterative/cml %}

Today CML supports two CI/CD systems:
- [GitHub Actions](https://github.com/features/actions)
- [GitLab CI/CD](https://docs.gitlab.com/ee/ci/)

### Automated visual ML report

You can set up auto-generated reports in your GitHub Pull Requests (or GitLab Merge Requests):

![GitHub PR Comment](https://dvc.org/static/4abfb3a481ef05b3f8a0140ede1bda90/c5adc/cml-report-metrics.png)

The report is generated by CML commands (`cml-` prefix) from GitHub Actions scripts (or GitLab CI/CD script). GitHub Action example:

```bash
# Creat a file `.github/workflows/cml.yaml`
name: train-my-model

on: [push]

jobs:
  run:
    runs-on: [ubuntu-latest]
    container: docker://dvcorg/cml-py3:latest

    steps:
      - uses: actions/checkout@v2
      - name: cml_run
        env:
          repo_token: ${{ secrets.GITHUB_TOKEN }}

        run: |
          pip3 install -r requirements.txt
          python train.py

          cat metrics.txt >> report.md
          cml-publish confusion_matrix.png --md >> report.md
          cml-send-comment report.md
```

After pushing your code changes in GitHub the workflow code runs and generates the report as a **comment in Pull Request**:

```bash
$ vi train.py
$ git add train.py
$ git commit -m 'Increase depth to 7'
$ git push
```

### Auto-allocate GPU and transfer datasets

You can find GPU examples and data transferring examples in the website http://cml.dev/

### Technical details

The code is written in JavaScript: https://www.npmjs.com/package/@dvcorg/cml

And packed to a docker image that was used from the workflow: https://hub.docker.com/repository/docker/dvcorg/cml-py3

### Conclusion

I'd love to hear your feedback and what next you'd like to automate in your ML projects.
Subscription box with html and css
Tags: html, css, uiweekly
Published: 2020-07-11 07:26:07

Hi coding people hope you are doing well 🤗 by the way in this (Dev post)[dev.to] we are going to learn how to make this beautiful newsletter subscription box in a minute. Yes in a minute 😆 

The all beautiful magic you can see here is because of this few lines of code 👇👇👇👇✍ 

``` .tbox
{
  width: 0;
  transition: 0.6s;
}

.email-box:hover > .tbox,.tbox:focus
{
  width: 260px;
  padding: 0 10px;
}
```

{% codepen https://codepen.io/atulcodex/pen/NWxMPaa %}
React Native android build failure
Tags: help, reactnative, android
Published: 2020-07-11 07:03:47

Hey folks,
I'm struggling with building a react native project for android and need some help.
When I run the build command (./gradlew bundleRelease) from the `<project_root>/android` directory I get an error (as shown below) saying that I haven't accepted the licenses for the android SDK and I need to do so in order to build the project.



![1-android-build-error](https://dev-to-uploads.s3.amazonaws.com/i/frvw9szkjoojvyquwdk0.png)




And when (after some googling) I ran the accept licenses command from the SDK root directory, I get another error (as shown below)



![2-accept-licenses-error](https://dev-to-uploads.s3.amazonaws.com/i/yampztd00vij7rqhsj0g.png)




It might be worth pointing out that I'm essentially reviving a very old project that I had the source code for, so the Android Studio, Android SDK and everything else is freshly installed on my system.

Thanks in advance for all the help!
Learn Laravel Polymorphic Relationship step by step with example
Tags: laravel, php, laravelrelationship, laraveleloquent
Published: 2020-07-11 06:59:38

Laravel Polymorphic Relationship allows a model to belong to more than one other model on a single association.  There are three types of Polymorphic relationships in Laravel.

## One To One Polymorphic Relationship
A one-to-one polymorphic relation is comparable to a simple one-to-one relation; however, the target model can belong to more than one type of model on a single association. For example, a blog Post and a User may share a polymorphic relation to the Image model.

## One To Many Polymorphic Relationship
A one-to-many polymorphic relation is comparable to a simple one-to-many relation; however, the target model can belong to more than one type of model on a single association. For example, imagine users of your app can “comment” on both posts and videos.

{% youtube QAfTYrDhdHE %}
> [One to One & One to Many Polymorphic Relationships](https://www.youtube.com/watch?v=QAfTYrDhdHE)

## Many To Many Polymorphic Relationship
Many-to-many polymorphic relations are somewhat more complicated than morphOne and morphMany relationships. For example, a blog Post and Video model could share a polymorphic relation to the Tag model.

{% youtube tdCw3mW1ccQ %}
> [Many to Many Polymorphic Relationship](https://www.youtube.com/watch?v=tdCw3mW1ccQ)
Vanilla JavaScript Cookies 🍪
Tags: javascript
Published: 2020-07-11 06:52:28

Today we'll be looking into working with Cookies in JavaScript.
It's not the most widely used function, but great to keep track of small things like whether someone clicked a cookie bar.

We can `set`, `get`, `change` and, `delete` a cookie.

## JavaScript Set Cookie

To set a cookie in `JavaScript`, we use the `document.cookie` property.

First we must understand cookies are set as a key, value pair

```
key = value
```

So to set a cookie:

```js
document.cookie = 'username=Chris';
```

We can even set a expire date:

```js
document.cookie = 'username=Chris; expires=Sun, 01 Jan 2023 12:00:00 UTC';
```

## JavaScript Read Cookie

To read a cookie we can use the following:

```js
var username = document.cookie;
username = Chris;
second = bla;
```

This will return the full cookie object, so we need to split it ourself like so:

```js
var username = getCookie('username');
console.log(username);
// Chris

function getCookie(name) {
  // Add the = sign
  name = name + '=';

  // Get the decoded cookie
  var decodedCookie = decodeURIComponent(document.cookie);

  // Get all cookies, split on ; sign
  var cookies = decodedCookie.split(';');

  // Loop over the cookies
  for (var i = 0; i < cookies.length; i++) {
    // Define the single cookie, and remove whitespace
    var cookie = cookies[i].trim();

    // If this cookie has the name of what we are searching
    if (cookie.indexOf(name) == 0) {
      // Return everything after the cookies name
      return cookie.substring(name.length, cookie.length);
    }
  }
}
```

## JavaScript Changing a Cookie

Sometimes we want to update a cookie; this is the same as the creation:

```js
document.cookie = 'username=Nicole; expires=Sun, 01 Jan 2023 12:00:00 UTC';
```

## JavaScript Deleting a Cookie

To delete a specific cookie, we have to set its date to be passed:

```js
document.cookie = 'username=; expires=Thu, 01 Jan 1970 00:00:00 UTC;';
```

View the demo to test with on Codepen.

<p class="codepen" data-height="265" data-theme-id="dark" data-default-tab="js,result" data-user="rebelchris" data-slug-hash="oNbyzwO" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="JavaScript Cookies">
  <span>See the Pen <a href="https://codepen.io/rebelchris/pen/oNbyzwO">
  JavaScript Cookies</a> by Chris Bongers (<a href="https://codepen.io/rebelchris">@rebelchris</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

### Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on [Facebook](https://www.facebook.com/DailyDevTipsBlog) or [Twitter](https://twitter.com/DailyDevTips1)
Debugging Debunked
Tags: coding, debugging, react, codenewbie
Published: 2020-07-11 06:17:09

You are midway through your project. You have been coding since time immemorial, yet you aren't able to make that feature work. You have no clue what is going wrong.
Behold my friend, I now proudly present you the 3 steps to debug any code, however complex it may seem.

### The three steps

1.Log it on the console

Seems quite obvious right ? Then why don't you use this powerful technique. Also, add some pleasant prefixes to those logs. For example , you need to check if your React Component called Kid is receiving the prop named age, go for something like this: 

`console.log("The Kid component is having this age : " + props.age );
`

2.Use customised phrases to replace the actual data

Suppose you are trying to use a Flatlist to render the contents fetched from the back end. But regardless of whatever you do, nothing shows up on the screen. You can even see the contents on console, but it seems like some magical spell has restricted it from being presented. 
What you can do now is, replace the data you are trying to display with some funny phrases , for example if you have this :

```
<Flatlist
   data={props.data}
   renderItem={({item}) => (
                <View>
                  <Text style={styles.textData}>{item.title} 
                  </Text>
                </View>
               )}
   keyExtractor={item => item.title}
/>
```

And the "title" is not being displayed , use this :

```
<Flatlist
   data={props.data}
   renderItem={({item}) => (
                <View>
                  <Text style={styles.textData}>
                     Somebody said today that I’m lazy. I 
                     nearly answered him.                  
                  </Text>
                </View>
               )}
   keyExtractor={item => item.title}
/>
```
And check if you can see that phrase on the screen. If you can't, most probably you have messed up the styling. Add some background colours and see what happens..

3.Search About It

If your code has some wild snippets or it uses some library you don't know much about, dive into it. Skim stackoverflow , medium articles , dev.to blogs , or wherever you find relevant stuff.

Finally , loop through the steps again. 

Let me know if this little procedure helped you.

Happy Debugging :)
Why Linux is Best?
Tags: linux
Published: 2020-07-11 06:08:01

You might be wondered Why Linux is Best. There are several reasons to use Linux. But here are the top 10 Reasons Why to use Linux and reasons to use Linux.

A few years ago, Linux only appears in servers and it’s not considered as personal use. But now technology growing so, Linux also improves user interface over the last few years.

Reasons,

1. Open Source Nature 📖
2. High Security 🔐
3. Runs on Any Hardware 🖥️
4. Free 🤙
5. Large Community Support 💬
6. Variety Of Distributions ✨
7. Customization 🖌️
8. High Stability and Faster ⚡
9. Updates 🆕
10. Perfect For Programmers 👨‍💻👩‍💻

Read more with detail [Here](https://www.codesnail.com/why-use-linux/)
CSS TRANSITION PROPERTY
Tags: devops, css, frontend
Published: 2020-07-11 06:03:56

Hey, folks.
Today we will be learning the important property in <b>CSS</b> called <b>TRANSITION</b> property. 
Transition means change of state. In <b>CSS</b> we have properties like <b> :hover,:focus,:active </b> etc . Instead of changing instantly, we have some handful transition properties, So let's see how they work.

1.Transition-duration:This property specifies how many secs or millisecs a transition should take to complete.
   
    div{
        transition-duration: 1s;
      }

The time you can specify in <b> secs(s) </b> or<b>millisecs(ms)</b>. For good practice we should kept it in a range of 250ms-500ms.

2.Transition-property: This specifies what actually you want to transition.

        
     div{
         background-color:green;
         transition-property: background;
        }

     div:hover{
        background-color:blue;
        }


Here, if you see, we are telling CSS that we wanna make transition to background. Now, when we hover on the <b>div</b> the <b>background-color</b> gets transition and hence changes its color.
Now, if we have two properties which we want to transition say <b>background-color and rotate</b>, we can write it like this.

     div{
          background-color:green;
          transition-duration:500ms;
          transition-property:all;
        }

     div:hover{
           background-color:blue;
           transform: rotate(45deg);
               }

 Here, instead of writing all properties which we want to make transition we can write simply <b>transition-property:all;</b>.

We have some other properties of <b>transition</b> which will be discussed in next posts.
Save your CPU from chrome
Tags: productivity, tools
Published: 2020-07-11 05:46:54

As developer I got a thousand tabs! and working just on a couple of them. Mostly the tabs that are open are things I "want to do" but swamped with things I "have to do". At least we should be sparing our CPU from the mistakes that we do :smile: .

Here is an extension which stops penalizing the CPU on your behalf.

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

[The Great Suspender](https://chrome.google.com/webstore/detail/the-great-suspender/klbibkeccnjlkjkiokjodocebajanakg)
Portfolio Website
Tags: webdev, career, showdev, portfolio
Published: 2020-07-11 05:43:28

Hi everyone! I am recent graduate and just started working as an Engineer last month. I had a very plain and simple website. 

However, I decided it was time to learn React; therefore, decided to develop a [portfolio website](https://infallible-goldstine-d8ed86.netlify.app/) in React with Gatsby. 

My current idea is to add the following sections:

1. About
2. Work Experience
3. Projects
4. Contact Me


I would love to have your thoughts on what else I can add/improve on in terms of design and/or structure
YouTube Video | Create a twitch clone using React -4
Tags: youtube, react, webdev, showdev
Published: 2020-07-11 05:26:19

This video is from my YouTube channel — **The Web Dev**. 

Here, we will create a clone of the popular streaming service [https://www.twitch.tv/](https://www.twitch.tv/) using ReactJS.

In this part , we will start with our server setup.

{% youtube GgWeZ-ec3X0 %}

Please do like it and [Subscribe](https://www.youtube.com/channel/UCRf7mazcufqZxd2pR3oQJuQ?sub_confirmation=1) to my channel for more videos.
Chapter 25
Tags: functional
Published: 2020-07-11 05:25:16


-A by-value parameter is like receiving a val field, its body is evaluated once, when the parameter is bound to the function.
-A by-name parameter is like receiving a def method;its body is evaluated whenever it is used inside the functions.

This (by-name) indicates that the arguments is not evaluated at the point of function application, but instead are evaluated at each use within the function.

https://stackoverflow.com/a/35625483
Gojek clone app: The Features to be part of the development process

Tags: gojekappdevelopment, gojekclone, gojekcloneappdevelopment, gojeklikeappdevelopment
Published: 2020-07-11 05:24:18

Gojek is a multi-service app that is popular in most countries. The success of the Gojek has captured the attention of entrepreneurs to develop a multi-services app. These are essential features that are to be part of the Gojek clone app.

Features of Gojek clone app

Calculated ETA & fare assessment: Once the service is booked with Google maps' assistance, it estimates the time and fares considering the factors like traffic and the distance between the places.

Notification: The users and the delivery agents/service professionals are updated from time to time of the progress. The notification message includes invoice, order details, and remainder alerts.

In-app support: The in-app support is available at all times to guide the customers through the order and other delivery related issues.

Transaction history: Using this feature, customers can view the details pertaining to their previous transactions in Gojek clone. After the order/service is complete, users receive a digital invoice with a detailed summary of the transaction. Likewise, the delivery agents can view the details of the customers they have attended in the past. 

Service/product feedback: Feedbacks are a way for admins to understand the areas of improvement. Users can provide ratings and feedback. They can also select a product or professional for service providing using this aspect.

Payment gateway options: Users can pay using multiple payment gateways such as Credit/debit cards, in-app wallets, digital wallets like PayTM, etc.

Entrepreneurs can get a white-labeled Gojek clone script from UberEatslikeApp. Clients can change the name, logo, and many more according to their requirements. The maintenance and upgradation are taken care of by the developers. Contact us to get a free demo of the Gojek clone app.

https://www.ubereatslikeapp.com/gojek-clone/
Question ?
Tags: coaching, power, question
Published: 2020-07-03 11:08:01

คำถามง่ายๆ ที่เราถามกันทุกวัน เมื่อพบกัน หรือ แม้จะไม่ได้พบกันมานาน คำถามนี้จะเป็นคำถามเริ่มต้นเสมอ...
เป็นอย่างไรบ้าง? สบายดีไหม? ไม่เจอกันนาน สบายดีไหม? ฯลฯ

คำถามง่ายๆที่สื่อถึงอะไรได้หลายๆอย่าง นอกจากมารยาททางสังคมแล้ว ความรู้สึกห่วงใยจากผู้ถาม ความเป็นมิตรที่ส่งให้กัน เหล่านี้ เราจึงไม่ควรละเลยแม้คำถามง่ายๆ หรือ ความรู้สึกเล็กน้อยที่เกิดขึ้น ระหว่างการสนทนาแม้เพียงสั้นๆอย่างการทักทายซึ่งกันและกัน ก็สามารถทำให้ความสัมพันธิ์อันดีเกิดขึ้นได้ แม้คุณจะไม่รู้จักกันมาก่อน แค่คำทักทาย คุณอาจเปลี่ยนโลกทั้งใบของเขาไปเลยก็ได้...

ในชีวิตเราจะต้องเจอกับเหตุการณ์ที่เราต้องถามคำถามตัวเองอยู่เสมอ อย่างเรื่องง่ายๆเช่น มื้อนี้ทานอะไรฯ วันหยุดไปเที่ยวไหนฯ ลงเรียนอะไรดี? วันนี้ต้องทำอะไรบ้าง?
คำถามเหล่านี้หากมองผิวเผินก็เป็นคำถามง่ายๆทั่วๆไป แต่ เมื่อเราลองพิจารณาดูให้ดีแล้ว ในแต่ละคำถามจะสื่อได้ถึงอารมณ์ ความรู้ ความต้องการหรือไม่ต้องการ และปัจจัยอื่นๆมากมาย ที่เราสามารถพบได้ในคำถามหนึ่งๆ นั่นคือ การที่เราได้หาหนทางที่ดี ที่เหมาะสม ที่ใช่ให้กับชีวิตเราอยู่นั่นเอง 

เช่น การถามว่า วันนี้ทานอะไรดี? สมองของคุณจะเริ่มกระบวนการการแยกแยะ หากซีกซ้ายทำงาน ความมีเหตุผล การคำนวน จะเข้ามาร่วมในการหาอาหาร เช่น หากต้องรีบ ก็ต้องหาอะไรง่ายๆทาน ในเวลาสั้นๆ หากสมองซีกขวาทำงาน คุณจะตัดสินอาหารที่จะทานในวันนั้นด้วย อารมณ์ ความรู้สึก เช่น อยากกินกะเพราไก่ไข่ดาว แต่ไม่เสมอไปที่สมองจะทำงานซีกใดซีกหนึ่ง ในบางครั้งก็มีการทำงานร่วมกัน หากคุณลองสังเกตุความคิดที่เกิดขึ้นให้ดี ก็จะรับรู้ได้

คำถาม มีส่วนสำคัญมากๆในชีวิตของเรา หากคุณไม่แน่ใจ เกิดความไม่มั่นใจ ลังเล สงสัย มืดแปดด้าน ลองถามคำถามง่ายๆกับตัวเองดู เช่น ตอนนี้ฉันรู้สึกอย่างไร? ฉันควรทำอย่างไรได้บ้าง? ค่อยๆถามไปเรื่อยๆ คุณจะได้คำตอบในแต่ละคำถามและเห็นแสงสว่างได้อย่างแน่นอน