teleren/devto huggingface dataset:
How to deploy a web app to Firebase
Tags: deployment, hosting, firebase, webapplication
Published: 2020-12-27 16:14:48

[Firebase](https://console.firebase.google.com) is a tool powered by [Google](https://google.com) for developing mobile and web applications, It offers free hosting, NoSQL databases and many more services and makes our life pretty easier as compared to other backends like node.js etc. All you need is a Gmail account..

## Setup
1. Firstly, create a project on [Firebase](https://console.firebase.google.com)
<img src="https://snappy.appypie.com/ckeditor/plugins/imageuploader/uploads/faqs//19941c7ca1.png" alt="" />

2. Make sure you have [Nodejs](https://nodejs.org) installed in your system
<img src="https://railsware.com/blog/wp-content/uploads/2018/09/2400%D1%851260-rw-blog-node-js.png" alt="" /> 

3. Open up the terminal and install the firebase-cli by `npm i -g firebase-tools`
 PS: On Linux or Mac type `sudo npm i -g firebase-tools` - this 
will give admin privileges and avoid errors

<img src="https://repository-images.githubusercontent.com/15402300/09bda880-1383-11eb-893e-b6d42a06754e" alt="" />

## Deploying our web app to firebase

1. Firstly open up the terminal cd into the right directory and login into your firebase account by `firebase login`
<img src="https://akhromieiev.com/tutorials/how-to-set-up-firebase-cli-tools/img/wp-content-uploads-2019-03-Screen-Shot-2019-03-08-at-1.48.52-PM.png" alt="" />

2. Type `firebase init` in the terminal of the same directory 
<img src="https://i.stack.imgur.com/rha5U.png" alt="" width="550px" /> 

3. Select `Hosting` from the drop-down
<img src="https://camo.githubusercontent.com/cf0875844ed952d733bd6dc1a36f93fbe44d50c438de6892f1304ce31eddb429/68747470733a2f2f69322e77702e636f6d2f67617279776f6f6466696e652e636f6d2f77702d636f6e74656e742f75706c6f6164732f323031392f30372f66697265626173652d6465706c6f792d696e69742e706e673f73736c3d31" alt="" />

4. It will ask for the root folder where your files to be deployed is contained  **public** -  will be the default folder 
PS: In case OF React JS or angular JS type in `npm run build` and configure your root folder as `build`
<img src="https://social.technet.microsoft.com/wiki/cfs-file.ashx/__key/communityserver-wikis-components-files/00-00-00-00-05/1033.22.png" alt="" />

5. The next few options you may either hit `enter` or follow it accordingly 
<img src="https://image.codeforgeek.com/wp-content/uploads/2018/07/image2.png" alt="" />

6. Lastly, Type `firebase deploy` in the terminal, Your app will be deployed with the url based on the project configured
<img src="https://camo.githubusercontent.com/de424b195fa163fc9519cf1b6cbb94ff1932553c43e72d51309b57ebe8d20daa/68747470733a2f2f692e737461636b2e696d6775722e636f6d2f436b52416f2e6a7067" alt="" />

That's it for today!

Hope you liked the post, if you’ve got any questions your can Mail us mail@stephinreji.me or join our [Discord-server](https://discord.com/invite/YzYUnjWkN5)

Thanks
A music note training app with beautiful charting
Published: 2020-12-27 16:02:05

This post contains affiliate links. I may receive a commission from the product within.

I wanted to share our note training application with you. We have the website version, as well as iOS and Android versions. The charting between the mobile apps and website are always kept in sync. If we can get funded the mobile version will be using the Highcharts.js wrappers for iOS and Android.

{% youtube Rk47aB7XXvY %}

Please help spread the word about our [Kickstarter Campaign](https://www.kickstarter.com/projects/musiciansu/musicians-u-music-education-and-social-networking). I am the only developer I have so many ideas, but can only do so much on my own. The campaign will allow me to hire other developers and designers.
Gradient Descent for people in a hurry !
Tags: machinelearning, gradientdescent, statistics, ai
Published: 2020-12-27 15:14:57

Gradient Descent is one of the key algorithms that machine learning practitioners everywhere use, but not many of them can explain what it actually is. Surprising, isn't it ? This relatively simple concept is often muddled with so much mathematics and statistics that it can confuse the best of us. Here is a brief but simple explanation of the puzzling yet simple concept that does not require anything more that simple high school mathematics to understand.

COST FUNCTION : In Machine Learning, the primarily goal is to learn from the data available. This is usually done by minimising the errors i.e the machine will learn to identify the truth or the right choice from the false or the wrong choice. The mathematical representation of this function that allows the machine to make the right choice is called the Cost Function. Since this function works on the basis of identifying errors it is also called the Error function. So when we run our Machine Learning model, what we are basically trying to achieve is to identify "parameters" or "weights" that minimize the cost function. 

GRADIENT DESCENT : Now we know that a machine learns by minimizing the cost function. But how does it do this ? Voila ! Enter Gradient Descent. Gradient Descent is that behind the scenes optimization algorithm that allows us achieve the minimum value, i.e the local or global minima of the function.
Gradient in simple words means direction.The Gradient Descent algorithm identifies the direction or the gradient the model must take to reach the minimum value. Once this direction has been identified, the algorithm computes or iterates the function with respect to a set value known as the learning rate. The learning rate is the rate at which the model must move or the distance it must cover in each iteration to reach the minima value i.e the distance covered in each iteration. As the model iterates it moves towards the minimum value and finally converges at a point where the cost function is minimized completely and the error has been neutralised.

So Gradient Descent is that magical tool that enables us the obtain the lowest value of the cost function without much trouble. The alternative to using gradient descent would be DEATH ! This is not an exaggeration. Computing the minimum error without gradient descent would mean to iteratively run an infinite number of parameters to finally arrive at the minima or the least error. This for obvious reasons would be impractical. Gradient descent, thus constantly updates the learned value and moves the machine towards the ideal value as quickly as possible making it an "integral"( :3) aspect of machine learning problems.
Hobbies Make Me a Better Engineer
Tags: balance, health, hobbies, webdev
Published: 2020-12-27 15:05:17

Recently there's been a lot of discussion on Twitter about whether "frontend engineer" is its own specialization. I'm not up for arguing this - my opinion is yes, it absolutely is, and in fact I've worked with people with several specializations within frontend development (accessibility, architecture, performance, infrastructure, etc.).

One of the arguments for expanding into backend/other technologies is that they reinforce and benefit your abilities as a developer. I think this is a good point, but it applies more broadly to any skill or hobby. A frontend engineer can broaden their experience through other means besides backend engineering, like activities, hobbies, or creative outlets. I'll highlight some of the ways my hobbies have made me a better engineer.

## Writing

I'm working on my writing for a lot of reasons, but one reason is so I can better communicate with my teammates. As I've gotten further in my career, the marginal benefit of improving my individual coding ability has diminished, and my ability to communicate, negotiate, and prioritize within my team has become more important.

Writing blog posts makes it easier to communicate my ideas and provides me with a resource to reference when people ask for my thoughts on something I'm familiar with. It has also driven several of my new projects as I have to brainstorm new article ideas each week.

## Photography

I picked up photography to feel closer to my grandparents who were avid amateur photographers. While I'm not a great photographer, it helps develop my understanding of visual composition and color, making me better at building user interfaces. It also improves my attention to detail and ability to communicate with designers. Editing photos forces me to identify high value work and prioritize my best photos for processing in Lightroom.

## Running

Running and other forms of exercise keep me healthy and balance out sitting and standing at a desk all day. They also require growing past my limits through goal tracking and consistent habits. Running reduces my back pain and improves my mood, making me a more pleasant person to work with.

## Conclusion

Being a better engineer isn't only about learning the next design pattern, technique, or technology. For me, investing too much into that in the past has led to boredom and burnout, with no escape. Balancing my time with other hobbies helps me keep the creative spark going, as well as build my growth mindset. I'm not great at any of these hobbies compared to my coding ability, but building these skills has been an exercise in humility and recognition of my ability to grow.

What hobbies have made you a better engineer? The connection doesn't have to be direct:

- Has it improved your health?
- Made you a more helpful teammate?
- Allowed you to focus more deeply?

Those all make you a better engineer! Hopefully if you're lucky enough to have a holiday break right now, you're taking time to recharge through other hobbies or interests. Happy Holidays!
Rebuilding the Facebook Stories UI with Tailwind CSS
Tags: tailwindcss, webdev, css
Published: 2020-12-27 15:14:33

Discovered TailwindCSS at the beginning of this year and I've been using it non-stop since then.

Played with it a little right now, and tried to **reproduce the Facebook Stories UI** with it.

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

Check out the [code here](https://play.tailwindcss.com/zBY7h3Nevz)

*If you have any questions, you can find my contact details on [my website](https://statescu.net).*
Create Simple Template with Pure HTML & CSS
Tags: html, css, animation, codepen
Published: 2020-12-27 15:13:11

Create Simple Template with Pure HTML & CSS Smooth Scroll animation | Smooth scrolling effect using css only

Get Free Source Code ==>

https://codepen.io/Bilal1909/pen/PoGOrdO?editors=1100

<img src="https://i.postimg.cc/t70p4n6h/scroll2.png">

<img src="https://i.postimg.cc/02gzQzPW/scroll3.png">

<img src="https://i.postimg.cc/s20XRXTJ/scroll4.png">

<img src="https://i.postimg.cc/fyQMw0mY/scroll5.png">

<a href="https://www.buymeacoffee.com/posts" target="_blank"><img src="https://i.postimg.cc/sfBRLKFq/cof.png"></a>
Postman Monitor & Web App
Tags: testing, webdev, tutorial, beginners
Published: 2020-12-27 14:57:35

Let's take a look at how Postman Monitor works and how it is integrated with the Postman Web App.

### **Postman Monitor**
Using Postman Monitor you can schedule runs and receive reports on your collection test results. So why does that matter?

- Well, you can stay up to date on the health and performance of the APIs, and you would have confidence in the quality and performance of your APIs.
- When Postman Monitor runs all your requests, it will also execute all the tests that you have created as part of that collection
- So if there’s any test failure, you can set up triggers via emails/alerts so that you and the team get notified of that right away.

### **Postman Web App**
Postman also provides Postman Web App where you can see all your collections, API documentation as well as view Postman Monitor, etc…

Once you set up your monitor in Postman Desktop App, you can go to the Web view to see all the results (see example below).

![Postman Web App](https://automationbro.com/wp-content/uploads/2020/12/image-15.png)

---

### **Check out the video below to learn more about Postman Monitor and Web App –**
{% youtube qWZYggIkNYA %}

---

#### To learn about API Test Automation using JavaScript, check out my free tutorial series here –
[JavaScript API Test Automation Tutorial Series](https://www.youtube.com/watch?v=ZSVw3TyZur4&list=PL6AdzyjjD5HDR2kNRU2dA1C8ydXRAaaBV)

---

📧 Subscribe to my [mailing list](https://automationbro.com/mailing-list) to get access to more content like this 
👍 Follow [automationbro](https://twitter.com/automationbro) on Twitter for the latest updates

...

I love coffees! And, if this post helped you out and you would like to support my work, you can do that by clicking on the button below and buying me a cup of coffee -

<a href="https://www.buymeacoffee.com/automationbro">![Buy me a coffee](https://dev-to-uploads.s3.amazonaws.com/i/4aw2ub3f4qkyjk0ivwt4.png)</a>

You can also support me by liking and sharing this content.

Thanks for reading!
Open VS Code on the Browser
Tags: vscode, beginners, cloud, webdev
Published: 2020-12-27 14:50:29

> Hey, what up... in this post, we're going to open our [vscode editor][vscUrl] in the browser, and we'll do it by [code-server][cdrUrl]

# What's [code-server][cdrUrl] 🤨 ?

[code-server][cdrUrl] is a service from [coder](https://coder.com), their vision is `Run VS Code on any machine anywhere and access it in the browser.`

## Setup code-server

{% github cdr/code-server %}

open the terminal and type

```sh
$ curl -fsSL https://code-server.dev/install.sh | sh
```

after install it, let's active it

```sh
$ code-server
```

### Test it in the browser

in your browser, open `localhost:8080`

it's well asking the password, your password in `~/.config/code-server/config.yaml`

```sh
$ nano ~/.config/code-server/config.yaml
```

```bash
bind-addr: 127.0.0.1:8080
auth: password
password: YOUR_PASSWORD
cert: false
```

and you'll see your password, copy it, and paste it in the field...

you should have like this

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

[vscUrl]: https://code.visualstudio.com/
[cdrUrl]: https://github.com/cdr/code-server
The Beginning- Day#1
Published: 2020-12-27 14:43:02

I am Basically an Electrical Graduate and always thought that Coding isn't my cup of tea. I've started learning "Html","CSS" & "JavaScript" and I'm excited. Sometimes, by comparing with others, I'm like "Oh God!, I havent learn this, I haven't learn that". This used to make me tense and worried. Gradually I understood that, things take time.
Things I've learnt:-
- Html, Standard markup language for creating web pages.
- Describes how a webpage should be displayed
- various html tags, elements & attributes
Taskord Changelog - Dec 27
Tags: opensource, productivity, changelog, showdev
Published: 2020-12-27 14:40:58

Welcome to **Taskord Changelog** 📜, This is a weekly post where we share what we shipped to [Taskord](https://taskord.com) this week.

Visit Taskord: https://taskord.com

**This week on Taskord**

- Added **Sweetalert 2** for alerts ✅

![Screenshot 2020-12-27 194942](https://dev-to-uploads.s3.amazonaws.com/i/4bpw3rjjv5c8tx2v1tiz.png) 

- **RSS feed** for User and Product's Tasks 🔊

Example feed: https://taskord.com/feed/user/yo

![Screenshot 2020-12-27 195244](https://dev-to-uploads.s3.amazonaws.com/i/hlcgurnou58azuw2u0sa.png) 

- [**Security Logs**](https://taskord.com/settings/logs) for user account 📜

![Screenshot 2020-12-27 195322](https://dev-to-uploads.s3.amazonaws.com/i/z567rni28t6ekziqakml.png) 

- User reputation points [**log page**](https://taskord.com/reputation) ✨

![Screenshot 2020-12-27 195404](https://dev-to-uploads.s3.amazonaws.com/i/i1pl12bu7v1f6kw44b3l.png) 

- Added **keyboard shortcuts** ⌨

![Screenshot 2020-12-27 195443](https://dev-to-uploads.s3.amazonaws.com/i/xi7yw0lcx2bh1dhscdij.png) 

- Fix **accessibility** around the site 👁

![Screenshot 2020-12-27 195526](https://dev-to-uploads.s3.amazonaws.com/i/prnk048txzf000c34x5g.png) 

- **Markdown** support is enhanced 📝

![Screenshot 2020-12-27 195609](https://dev-to-uploads.s3.amazonaws.com/i/vaphiaa98nnypkv0zetc.png)

- User can now export their **account logs** 📜

![Screenshot 2020-12-27 195652](https://dev-to-uploads.s3.amazonaws.com/i/3oup5xhtbft7nlvzz0t4.png) 

- User can now able to **reset their account** without deleting 🔃

![Screenshot 2020-12-27 201031](https://dev-to-uploads.s3.amazonaws.com/i/sm900ejm1k6buz9s1lw9.png) 

- Add **Links Prefetch** so the platform feels faster 🚀
- **JQuery** is no more on Taskord 😊

Happy shipping ❤️
I2C 介面 LCD 模組的從端裝置位址
Tags: arduino, micropython, esp8266, esp32
Published: 2020-12-27 14:24:30

目前大家使用 LCD 模組時, 為了避免繁複的接線, 多半會採用加上一塊編號 1602 的轉接板,可以讓我們只用 4 條接線就可以控制 LCD 模組。

由於這個轉接板採用 I2C 傳輸介面, 因此在使用時必須知道它的從端裝置位址 (slave address), 這個位址出廠預設時不是 0x27 就是 0x3F, 那到底怎麼確認是哪一個呢？最簡單的方式當然就是顯示不出來時換另一個位址試看看 (當然也可以掃描位址的程式找), 不過這有時候很麻煩, 因為也有可能是對比沒有調好, 所以看不到顯示的文字, 再怎麼換位址也沒用。

事實上, 這片轉接板的位址是由板子上使用的一塊晶片決定的, 只要看板子上的這個位置, 讀出上面的編號即可：

![](https://i.imgur.com/z0c7OAa.png)

像上面這一個就是 PCF8574T 晶片, 另外一種則是這樣：

![](https://i.imgur.com/NcWN8Yy.png)

採用的晶片是 PCF8574AT, 多了一個 A 就不一樣了。另外, 在藍色的對比調整旋鈕的下方, 有標示 A0~A2 的接點, 可以用焊錫連接, 也會影響位址：

![](https://i.imgur.com/QFLm4Tz.png)


知道晶片型號, 就可以查[規格書](https://www.nxp.com/docs/en/data-sheet/PCF8574_PCF8574A.pdf), 整體來說, 這個轉板的位址是這樣決定的：

![](https://i.imgur.com/yEwSQ77.png)

左邊是 PCF8574T、右邊是 PCF8574A, A0~A2 沒有接時為 1、接起來為 0, 出廠預設都是斷開的, 所以如果轉接板上的晶片是 PCF8575T, 預設的位址為 0B010 0111, 就是 0x27；但若是 PCF8574AT, 預設位址就是 0B011 1111, 也就是 0x3F。如果你需要同時連接多個 LCD 模組, 就可以自行焊接 A0~A2 的任意接點, 讓位址不同, 就可以同時操控多個 LCD 模組, 而不會位址衝突了。
Javascript ES6 101: the map method
Tags: javascript, react
Published: 2020-12-27 14:23:48

The map method is a part of ES6 that is especially useful for React developers. What is it and how does it work? Let's take a look.

You can call array.map() on any array in your code to create a new array which is populated by 'mapping' each element in array1 to array2. What actually ends up in array2 is determined by the callback function you passed into the map method as an argument.

I love the below pseudo code that uses emojis to give a high-level visual representation of how map works. The initial array is mapped over with the 'cook' method to achieve the output array - cooked food!
```
[🐮,🐓,🥔].map(cook) => [🍔,🍗,🍟]
```
So, how does this look using actual JavaScript code? In the simple example below, we are using the map method to create a new array with each element of the original array multiplied by two:
```
// Our array1 initialisation
const array1 = [1,4,9,16];

// array1 mapped over into a new variable called map1
const array2 = array1.map(x => x * 2);

// Outcome
array2 = [2,8,18,32]
```
In practical terms, the map method is really useful in React, particularly for looping over an array inside JSX - it keeps your code really neat and saves you from having to call functions that exist outside of your JSX to do this.

Here's a snippet of that concept in action in a simple React twitter clone I built. The below is code from the 'TweetList' component which renders an individual tweet component for each tweet in the array


Callback functions in map accept the following arguments:
- value - what we've seen so far
- index - the array index of the array element you're currently on
- array - the whole array

You can also pass an object to assign to the 'this' keyword after the callback function.

If you enjoyed this article, consider following me on [twitter](https://twitter.com/davidfoxio) for more of the same kind of content
Christmas Tree using Python
Tags: python
Published: 2020-12-27 14:09:00

Merry Christmas Dev community. Here is a simple Christmas tree using Python.

```
# Christmas Tree in Python
for i in range(10):
    print(''.join(['.'] * (9 - i) + ['^'] * (1 + i * 2) + ['.'] * (9 - i)))
else:
    print(''.join(['-'] * 8 + ['| |'] + ['-'] * 8))

'''
                .........^.........
                ........^^^........
                .......^^^^^.......
                ......^^^^^^^......
                .....^^^^^^^^^.....
                ....^^^^^^^^^^^....
                ...^^^^^^^^^^^^^...
                ..^^^^^^^^^^^^^^^..
                .^^^^^^^^^^^^^^^^^.
                ^^^^^^^^^^^^^^^^^^^
                --------| |--------
          Merry Christmas to all of you. @shwetabh1
'''
```

There is no use of the else clause but I have used it deliberately, to expose it to devs who are yet not aware of it.

The else clause executes after the loop completes normally. It is useful in cases when we break from a loop. You can read more about it [here](https://book.pythontips.com/en/latest/for_-_else.html).
Day 4 of 100DaysOfCode: Code to Calculate HCF Of Two Numbers
Tags: programming, python, beginners, codenewbie
Published: 2020-12-27 14:08:45


Today is my 4rth day of coding. Today I gave my time for file handling. I have been so much confused. I am not clear about some concept of it yet. Today I also did some code on function, dictionary in some mathematical problem. I gave some time of mine to the Freecodecamp and Coursera too. 
Below is the code of mine for today, which I wrote to find the HCF of two numbers. For this code, I used a function to do the job. At first, I asked the user to input two numbers integer type. Then I find the maximum and minimum of these two numbers. I created an empty list name of CF to store a common factor. I started looping from 1 to the minimum number. Because the possibility of HCF will be from 1 to a minimum among these two numbers. Below is my code.
```python
def higher_common_factor():
    n1 = int(input('enter the number'))
    n2 = int(input('enter the number'))
    m1 = min(n1,n2)
    m2 = max(n1,n2)
    cf = []
    for n in range(1,m1+1):
        if m1 % n == 0 and m2 % n ==0:
            cf.append(n)
    print(f"{cf}")
higher_common_factor()
```
<blockquote class="twitter-tweet"><p lang="en" dir="ltr"><a href="https://twitter.com/hashtag/100DaysOfCode?src=hash&amp;ref_src=twsrc%5Etfw">#100DaysOfCode</a>, day4<br>* Learn about python<br>* HCF of two numbers<br>* Learn about python function<a href="https://twitter.com/hashtag/Python?src=hash&amp;ref_src=twsrc%5Etfw">#Python</a> <a href="https://twitter.com/hashtag/CodeNewbie?src=hash&amp;ref_src=twsrc%5Etfw">#CodeNewbie</a> <a href="https://twitter.com/hashtag/beginner?src=hash&amp;ref_src=twsrc%5Etfw">#beginner</a> <a href="https://twitter.com/hashtag/functon?src=hash&amp;ref_src=twsrc%5Etfw">#functon</a> <a href="https://t.co/5ZkQCUxYmk">pic.twitter.com/5ZkQCUxYmk</a></p>&mdash; Durga Pokharel (@mathdurga) <a href="https://twitter.com/mathdurga/status/1343190956787388417?ref_src=twsrc%5Etfw">December 27, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>