teleren/devto huggingface dataset:
Create a Azure bot in Python
Tags: azure, python
Published: 2021-03-15 16:12:49

This article shows you how to build a bot by using the Python Echo Bot template, and then how to test it with the Bot Framework Emulator.

Creating a bot with Azure Bot Service and creating a bot locally are independent, parallel ways to create a bot.

**Prerequisites**
* Python 3
* Bot Framework Emulator
* Knowledge of asynchronous programming in Python

**Templates**
1. Install the necessary packages by running the following commands:

```python
pip install botbuilder-core
pip install asyncio
pip install aiohttp
pip install cookiecutter
```
The last package, cookiecutter, will be used to generate your bot. Verify that cookiecutter was installed correctly by running `cookiecutter --help`.

2. To create your bot run:
```python
cookiecutter https://github.com/microsoft/BotBuilder-Samples/releases/download/Templates/echo.zip
```
This command creates an Echo Bot based on the Python echo template

**Create a bot**
You will be prompted for the name of the bot and a description. Name your bot `echo-bot` and set the description to `A bot that echoes back user response`. as shown below:
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gx011bb8ics1y60q1x28.png)
 
**Start your bot**
1. From a terminal navigate to the `echo-bot` folder where you saved your bot. Run `pip3 install -r requirements.txt` to install any required packages to run your bot.

2. Once the packages are installed run `python3 app` to start your bot. You will know your bot is ready to test when you see the last line shown in the screenshot below:
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a6mvonv54shuw583nfln.png)
 
Copy the last for digits in the address on the last line (usually 3978) since you will be using them in the next step. You are now ready to start the Emulator.

**Start the Emulator and connect your bot**
1. Start the Bot Framework Emulator.

2. Select Open Bot on the Emulator's Welcome tab.

3. Enter your bot's URL, which is the URL of the local port, with /api/messages added to the path, typically http://localhost:3978/api/messages.
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/beylks5hdvj89xooydgd.png)
 
4. Then select Connect.
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jvrwr7a22lynqn5jowzr.png)
 
Send a message to your bot, and the bot will respond back.
Hoisting in JavaScript
Tags: javascript, shopify, ui, frontend
Published: 2021-03-13 15:43:38

Hoisting is a concept of JavaScript in which JavaScript host all function expression and variables at top of the environment and because of that we can use a variable or function before declaring it.

In Simple layman language - 
Hoisting in JavaScript is accessing the variables and functions even before declaring or initialising them without any error.
Understanding Kubernetes in a visual way (in 🎥 video): part 6 – CronJobs
Tags: kubernetes, devops, docker, beginners
Published: 2021-03-14 09:11:49

---
title: Understanding Kubernetes in a visual way (in 🎥 video): part 6 – CronJobs
published: true
description: Serie of videos about Kubernetes. Explaining in a visual way Kubernetes principles.
tags: Kubernetes, DevOps, Docker, beginners
series: Understanding Kubernetes in a visual way - (in video) in video
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a3y5shgfne3jojlk7smv.jpg)
---

Understanding Kubernetes can be difficult or time-consuming. In order to spread knowledges about Cloud technologies I started to create sketchnotes about Kubernetes, then I've auto-published a book and since now I've started a new serie of video! :-)

I imagined a serie of short videos with a mix of sketchnotes and speech.

I think it could be a good way, more visual, with audio & video to explain Kubernetes (and others technologies).

The sixth episode is focused on a very important Kubernetes object: CronJobs.

{% youtube UMJg_JasNXw %}

The video is in French BUT I done the subtitles in english (and french too).

If you liked the video and are interested to watch another ones, please give me some feedbacks (and you can also subscribe to [my Youtube channel](https://www.youtube.com/channel/UCrRk0kOP58lBMl9B8ZS8Vlg), if you want to ❤️).

If you are interested, I published all the sketchnotes on Kubernetes (and new ones!) to make a "book" of 120 pages: ["Understanding Kubernetes in a visual way"](https://gumroad.com/aurelievache#uCxcr).

If you like theses sketchnotes, you can follow me, I will publish others sketchs shortly :-).
Prismjs + Nuxtjs -Easy set up
Tags: prismjs, nuxt
Published: 2021-03-15 11:43:33

This website is an ongoing project. It's not perfect, and it never will be; in fact, as you search the website you will see many things that you might see me [advocate](https://twitter.com/mugas11/status/1367772956533915648?s=20) that I am not doing on the website.

I know it might seem an easy way out, but the fact is that I want to upgrade the website as I upgrade myself, so I want to share when I update the website with something new. Like that, I learn better, get documented and hopefully, it helps someone in the future. 

So expect many posts about things I did on this website. 

Today it will be about code snippets and their highlight while writing for example a code post. 

When I created this website and started to write code posts I realize that the code was not highlighted and would not look good.

The best solution was adding [Prismjs](https://prismjs.com/) and after some fast search was easy to implement.

So let's do it:

First, we install Prismjs:

```js
npm install --save prismjs clipboard
```

Then in the file `nuxt.config.js` add the plugin:

```js
  plugins: [{ src: '~/plugins/prism' }]
```

After that go to your plugin folder in Nuxt and create a file named  `prism.js`. Open it and write this code:

```js
import Prism from 'prismjs'
import 'prismjs/themes/prism-tomorrow.css' // You can add other themes if you want
export default Prism
```

There are many options besides the ones above, but there are the basics to make it work.

So now Prism is installed and we informed Nuxt about it we just need to add it to the page we need, normally `_slug.vue`

```js
<script>
import Prism from '~/plugins/prism'
mounted() {
    Prism.highlightAll()
}
```

And that is all. With a few steps, you have nice highlights on your blog page.
If you like this post, feel free to follow me on [Twitter](https://twitter.com/mugas11/) and send me a message in case you have any doubt about this post 😊
How to Make Background Image Fit to Screen in CSS | Create a Responsive CSS Background Image
Tags: webdev, design, css, html
Published: 2021-03-17 02:08:33

How to Make CSS Background Image Fit to Screen, | Create a Responsive CSS Background Image, how to to make background image responsive css.

In this tutorial, we’ll go over the simplest technique for making a background image fully stretch out to cover the entire browser viewport. We’ll use the CSS background-size property to make it happen; no JavaScript needed. 

# Watch Full Video:


{% youtube Asoth7MIggM %}

Setting background-size to fit screen — Using CSS, you can set the background-size property for the image to fit the screen (viewport). The background-size property has a value of cover. It instructs browsers to automatically scale the width and height of a responsive background image to be the same or bigger than the viewport. Use the background-size property to cover the entire viewport The CSS background-size property can have the value of cover. The cover value tells the browser to automatically and proportionally scale the background image's width and height so that they are always equal to, or greater than, the viewport's width/height.
responsive background image css tricks,
css background image size to fit screen,
CSS background image responsive,
css background image size to fit screen mobile,
how to create responsive image height css,
html background image size to fit,
background image height: 100,

------------------------------------------------------------------
Please have a look at my website for more details!
https://hmawebdesign.com
------------------------------------------------------------------

Suggested Videos:
How to Send Email to Client Using PHP Mail Function | Sending Email in PHP 2021 Tutorial
https://youtu.be/DeqOVJ-aXkg
$_POST | What is the Post Variable in PHP | How to Use Post Variables in PHP 2021
https://youtu.be/HO-TrXY4a1A
How to Define Variables in PHP | How to Create PHP Variables | (PHP tutorial-3) - 2021
https://youtu.be/bfqAa0Gm3YY
How to Start First PHP Web Project on Local Server/Localhost PHP Tutorial-2
https://youtu.be/18I7U4-nJb0
How to Start Web Project with Microsoft Visual Studio 2021 | Visual Studio Project
https://youtu.be/MLzuQ_pH9Ew
How to Get Start PHP Hello World Page on Live Web Server  |  PHP Tutorial - 1
https://youtu.be/Uc7uLD7Ur6M
-------------------------------------------------------------------------------------------------
Contact me through social media for web development work:
- Fiverr             https://www.fiverr.com/haaddison1?up_rollout=true
-  witter:          https://twitter.com/HmaWebdesign
- Facebook:    https://web.facebook.com/HmaWebdesign
- LinkedIn:      https://www.linkedin.com/in/engrmianayub/
- Instagram     https://www.instagram.com/hmawebdesign/
Staging vs. Committing: an explanation for Git beginners
Tags: git, beginners
Published: 2021-03-17 12:00:24

I get these questions quite often:
> "What is the difference between staging and committing?"

> "Why is there a `git add` and a `git commit`? What's the difference?"


## What is the difference?
Imagine you are doing online shopping. You browse through the pages of your favorite online store and add some products to your shopping cart. The shopping cart is like **staging**. Things are there ready to be paid for. You can keep adding stuff to it or remove some from it. 

When you are done shopping, you go and pay for the things in your shopping cart. That can be compared to making a **commit**. Now there is a record somewhere of what you have bought and when. There is a history.

Notice that you can easily change your mind when things are in staging, but once you have made a commit things are hard to change (although not impossible!).

## Why are they separated?
The fact that you need to stage and commit separately in Git has many benefits. Generally it is a good idea to make your commits small. And to make sure that all the changes that are included in one commit are related to each other. 

For example a commit that fixes a bug in Feature A should not also include an improvement you made to Feature B. If you have been productive 😎 and have done those two things at once, you should not commit everything at once. You should separate them by staging the bug fixes and committing those first and then staging the improvements to Feature B and making a second commit. 

That way, if someone looks at the Git history of your project, they are not confused by one giant commit that did a lot of things. They can see clearly that you performed two different tasks: one bug fix in Feature A and one improvement to Feature B.

## How to stage and commit
Ok so now that you know the difference between **staging** and **committing**, let's see how to do these things in Git:

To **add** the changes you made to a file to staging, use this command 
```bash
$ git add <path-to-file>
```

If you want to add all the files at once, put a dot instead of path to each file, like this: 
```bash
$ git add . 
```
All the changes will be staged, ready to be committed.

To commit use the command:
```bash
$ git commit -m "some descriptive message"
```

I have created a Git cheat sheet for beginners to make it easier to look up these basic commands. You can grab a free copy from [here](https://chipper-musician-9131.ck.page/fc2d4720ba).
Difference between functions and methods in Golang
Tags: go
Published: 2021-03-18 03:43:28

# Difference between functions and methods in Golang

The words function and method are used almost interchangeably, but there are subtle differences in their implementation and usage when used in Golang. Let's see what the difference is and how its used.

### Function

Functions accept a set of input **parameters**, perform some operations on the input and produce an output with a specific **return type.** Functions are independent that is they are **not attached to any user defined type**. 

***Syntax:***
```go
func FunctionName(Parameters...) ReturnTypes...
```
There cannot exist two different functions with the same name in the same package.
```go
type Rectangle struct {
    Width float64
    Height float64
}

type Circle struct {
    Radius float64
}

func Area(r Rectangle) float64 {
    return 2 * r.Height * r.Width
}

func Area(c Circle) float64 {
    return math.Pi * c.Radius * c.Radius
}
```
[Run above code in The Go Playground](https://play.golang.org/p/LQNBLtOfhFi)

The above code throws an error :  `Area redeclared in this block`

### Method

 A method is effectively a function attached to a user defined type like a **struct**. This user defined type is called a **receiver**. 

***Syntax:***
```go
func (t ReceiverType) FunctionName(Parameters...) ReturnTypes...
```

There can exist different methods with the same name with a different receiver. 

 ```go
type Rectangle struct {
	Width  float64
	Height float64
}

func (r Rectangle) Area() float64 {
	return r.Width * r.Height
}

type Circle struct {
	Radius float64
}

func (c Circle) Area() float64 {
	return math.Pi * c.Radius * c.Radius
}

type Triangle struct {
	Base   float64
	Height float64
}

func (t Triangle) Area() float64 {
	return 0.5 * t.Base * t.Height
}
```

[Run above code in The Go Playground](https://play.golang.org/p/ASQP_J_RUSU)
Laravel Livewire Fullcalendar Integration  Example
Tags: laravel, livewire, php
Published: 2021-04-17 12:03:04

Today, I will learn you how to use fullcalendar with livewire example. We will explain step-by-step laravel livewire fullcalendar integration. you can easily make livewire fullcalendar integration in laravel.
more
https://itwebtuts.blogspot.com/2021/04/laravel-livewire-fullcalendar.html
Angular 6 Search Box example with Youtube API & RxJS 6
Tags: angular6, rxjs, youtube
Published: 2021-04-17 15:24:23

https://grokonez.com/frontend/angular/angular-6/angular-6-search-box-example-with-youtube-api-angular-rxjs-6-tutorial

Angular 6 Search Box example with Youtube API & RxJS 6


In this tutorial, we’re gonna build an Angular Application that helps us to search YouTube when typing. The result is a list of video thumbnails, along with a description and link to each YouTube video. We'll use RxJS 6 for processing data and <code>EventEmitter</code> for interaction between Components.

<!--more-->
<h2>Angular 6 Search Box example with Youtube API overview</h2>
<h3>Goal</h3>
<img src="https://grokonez.com/wp-content/uploads/2018/11/angular-search-box-example-youtube-api.gif" alt="angular-search-box-example-youtube-api" width="764" height="676" class="alignnone size-full wp-image-15785" />
<h3>Technology</h3>
- Angular 6
- RxJS 6
- YouTube v3 search API
<h3>Project Structure</h3>
<img src="https://grokonez.com/wp-content/uploads/2018/11/angular-search-box-example-youtube-api-angular-tutorial-project-structure.png" alt="angular-search-box-example-youtube-api-angular-tutorial-project-structure" width="267" height="487" class="alignnone size-full wp-image-15786" />

- <code>VideoDetail</code> object (<em>video-detail.model</em>) holds the data we want from each result.
- <code>YouTubeSearchService</code> (<em>youtube-search.service</em>) manages the API request to YouTube and convert the results into a stream of <code>VideoDetail[]</code>.
- <code>SearchBoxComponent</code> (<em>search-box.component</em>) calls YouTube service when the user types.
- <code>SearchResultComponent</code> (<em>search-result.component</em>) renders a specific <code>VideoDetail</code>.
- <code>AppComponent</code> (<em>app.component</em>) encapsulates our whole YouTube searching app and
render the list of results.
<h2>Practice</h2>
<h3>Setup Project</h3>
<h4>Create Service & Components</h4>
Run commands:
- <code>ng g s services/youtube-search</code>
- <code>ng g c youtube/search-box</code>
- <code>ng g c youtube/search-result</code>
<h4>Add HttpClient module</h4>
Open <em>app.module.ts</em>, add <code>HttpClientModule</code>:
<pre><code class="language-java">
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';

import { AppComponent } from './app.component';
import { SearchBoxComponent } from './youtube/search-box/search-box.component';
import { SearchResultComponent } from './youtube/search-result/search-result.component';

@NgModule({
  declarations: [
    AppComponent,
    SearchBoxComponent,
    SearchResultComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }
</code></pre>
<h3>Result DataModel</h3>

More at:

https://grokonez.com/frontend/angular/angular-6/angular-6-search-box-example-with-youtube-api-angular-rxjs-6-tutorial

Angular 6 Search Box example with Youtube API & RxJS 6
FREE Magic Popup To Increase Signups By 50% ( Proven Working )
Published: 2021-04-17 22:45:01

A popup like this has helped Josh ( https://twitter.com/JoshWComeau ) to increase his email subscribers, so he jumped **from 1,000 to 28,000 subscribers** in 1 year only. 😻

This popup is new and people are not used to seeing it! that's why it grabs and forces your visitors to pay attention to your offer.


👉 **HOW IT WORKS** 👈

While your visitor is scrolling down, your picture or illustration will show up suddenly so it grabs the attention immediately, and after 1 second it says:

" Hi, there! Can I share a cool thing I’m working on with you? ".

This question makes your visitor curious and will lead him to click on Yess.
You can use the Yess as a redirect to another page, on the same page, or to open your email form.


👉 **FEATURES** 👈

✅ It's FREE.
✅ **Simple Tool For Quick Customization.**
✅ Lightweight (Won't Make Your Website Slow).
✅ Developers-friendly (Clean Code).
✅ Suitable For Non-tech People (#NoCode).
✅ Use illustrations To Attract More Users Attention.

👉 Get it now for Free: https://frontendor.com/magic-popup/
Why Vue is Better than React | Podcast
Tags: vue, react, webdev, podcast
Published: 2021-05-05 15:44:57

{% spotify spotify:episode:1mBcmfFFt9B5PgJMVBRqic %}

## What is HTML All The Things

HTML All The Things is a [web development podcast](https://podcast.htmlallthethings.com/) and [discord community](https://discord.com/invite/jweMCx9) which was started by Matt and Mike, developers based in Ontario, Canada. 

The podcast speaks to web development topics as well as running a small business, self employment and time management. You can join them for both their successes and their struggles as they try to manage expanding their Web Development business without stretching themselves too thin. 

## What's This One About?

In this episode Matt and Mike discuss Vue and React, two major web development tools that promise to improve UI development in their own unique ways. However, as a bit of a twist, the duo won't just be discussing these two JavaScript frameworks/libraries, instead Mike has taken the stance that Vue is better than React and will be presenting his case throughout the episode. Let the React versus Vue wars begin!

## Show Notes

 5:20 - What is a reactive framework?

 8:15 - Why Vue is better than React?
 &nbsp;&nbsp;&nbsp;&nbsp;8:40 - Easier to get started with
 &nbsp;&nbsp;&nbsp;&nbsp;22:28 - Better first party plugins
 &nbsp;&nbsp;&nbsp;&nbsp;29:54 - Vue is more popular with developers

 33:25 - Common counter points for React
 &nbsp;&nbsp;&nbsp;&nbsp;34:30 - Larger talent pool for React
 &nbsp;&nbsp;&nbsp;&nbsp;35:40 - React is built to scale
 &nbsp;&nbsp;&nbsp;&nbsp;38:55 - More plugins/tools available 



##Key Takeaways

* Vue is an easier framework to get started with and has the same if not better utility/functionality to React.

##Resources

[https://brainhub.eu/library/vue-vs-react/](https://brainhub.eu/library/vue-vs-react/)

##Social Links

You can find us on all the podcast platforms out there as well as

[Instagram (@htmlallthethings)](https://www.instagram.com/htmlallthethings/)
[Twitter (@htmleverything)](https://twitter.com/htmleverything)
[Facebook (Html All The Things)](https://www.facebook.com/htmlallthethings)
[Tiktok (htmlallthethings)](https://www.tiktok.com/@htmlallthethings?lang=en)
# The Great Merge Hexagram 44
Tags: microservices, management, consutlant, psychology
Published: 2021-04-18 14:58:19


A precautionary tale that many of you may experience(d). 
- A project manager with more money than sense and no technical expertise. 
- A distributed development team with little in common in terms of language and communication. 
- Teams trapped in DSL, obsessed with micro goals and oblivious to the wider picture.  
   
You have been invited in to help move the project forward and introduced to the type of code so common to this dysfunctional environment. Countless feature branches with nothing merged.   
Working with the teams, pruning branches merging and setting clear well defined goals. Trying to communicate between the developers and the project manager.   
I had a bad feeling, so I asked the oracle and received [44](https://www.iching-hexagrams.com/summer-light/hexagram-44/hexagram-44-text/).  
This was good advice. I had become infected by the chaos, I was to controlling, trying to channel the whirlwind of commits. I stopped, stood back, put myself in the place of the devs, "What good is strength if no one cares?", "After breathing in, one pauses for a moment.", "Amidst the hustle and bustle sensitivity emerges."
I focused on sensitivity and the devs started to respond, a shared sense of ownership began to emerge, spontaneous merge policies and the code begins to build correctly.  
I am left to consider this most important question "You may be driving the chariot, But who or what drives you?"
BMI Calculator [Version - 1.0]
Tags: html, javascript, css, webdev
Published: 2021-04-18 15:47:59

So basically this is my project named BMI calculator with some useful features in version 1.0... I m also upgrading to second version with some advance features ...🙏🏻🔥
⚡You can check the code here - https://github.com/yuvraj-07/Web-Projects/blob/d68c99dc92d2f499b887f9425a0ed99857115929/BMI.html
---------------------------------------
Guys pls show me some support and please help me to enhance my skills ❤️❤️❤️
----------------------------------------
-
📢 Facebook handle - https://www.facebook.com/profile.php?id=100010656091936
-
📢 GitHub handle - https://github.com/yuvraj-07
Is Redux DEAD? Try Zustand!
Tags: react, showdev, javascript, beginners
Published: 2021-04-18 19:10:33

---
title: Is Redux DEAD? Try Zustand!
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hd3x7ei3hkyoq2u8hh3v.jpg
published: true
description: Quick tutorial on zustand and how it compares to other state management solutions in React
tags: react, showdev, javascript, beginners
---

With the advent of hooks a lot of ReactJS developers have moved away from Redux as the default state management of choice. 

However is simply using useState, useReducer, and the context API good enough? I highly recommend checking out Zustand! Dead simple and unopinionated state management!

> **Zustand is a small, fast and scaleable bearbones state-management solution. Has a comfy api based on hooks, isn't boilerplatey or opinionated, but still just enough to be explicit and flux-like.**

[In this video](https://youtu.be/UcHkC5sJPWw) we're going to walk through the basics of using Zustand. We'll also discuss the pros and cons of this approach compared to reducer-based and context-based solutions like the useReducer hook and Redux.

Let me know what you think of Zustand!

{% youtube UcHkC5sJPWw %}