teleren/devto huggingface dataset:
AzureFunBytes Episode 38 - Azure Static Web Apps with @nthonyChu!
Tags: webdev, javascript, beginners, tutorial
Published: 2021-04-08 19:08:18

AzureFunBytes is a weekly opportunity to learn more about the fundamentals and foundations that make up Azure. It's a chance for me to understand more about what people across the Azure organization do and how they do it. Every week we get together at 11 AM Pacific on [Microsoft LearnTV](https://cda.ms/226) and learn more about Azure.

This week I welcomed [Anthony Chu](https://twitter.com/nthonychu), Program Manager at Microsoft, to discuss [Azure Static Web Apps](https://cda.ms/23H) and [Azure Functions](https://cda.ms/23J).  Anthony and I have a conversation on why this service makes sense for your web apps.  We discussed how the Azure Static Web App Service enables collaboration with your development team by utilizing triggered CI/CD runs from [GitHub Actions](https://cda.ms/23K) or [Azure DevOps Pipelines](https://cda.ms/23L).  There's support right out of the box for static site generators like [Gatsby](https://cda.ms/23V), [Hugo](https://cda.ms/23W), [VuePress](https://cda.ms/23X), and more.

{% youtube zyszzWPnzog %}

We cover: 
* What is Jamstack?
* What is Azure Static Web Apps?
* Demos + chatting + questions
* Take a single page app and deploy it to Static Web Apps
* Add an API
* Add authentication
* Add custom domain
* Look at an app that uses other Azure services ([SignalR](https://cda.ms/24p), [Cosmos DB](https://cda.ms/24q))

--- 

Learn about Azure fundamentals with me!

Live stream is available on Twitch, YouTube, and LearnTV at 2 pm EST Thursday. You can also find the recordings here as well:

[AzureFunBytes on Twitch](https://twitch.tv/azurefunbytes)
[AzureFunBytes on YouTube](https://aka.ms/jaygordononyoutube)
[Azure DevOps YouTube Channel](https://www.youtube.com/channel/UC-ikyViYMM69joIAv7dlMsA)
[Follow AzureFunBytes on Twitter](https://twitter.com/azurefunbytes)

Useful Docs:

[Get $200 in free Azure Credit](https://cda.ms/219) 
[Azure Static Web Apps documentation](https://cda.ms/23Y) 
[What is Azure Static Web Apps Preview?](https://cda.ms/23Z)
[Set up local development for Azure Static Web Apps Preview](https://cda.ms/240)
[Add an API to Azure Static Web Apps Preview with Azure Functions](https://cda.ms/241) 
[Microsoft Learn: Azure Static Web Apps](https://cda.ms/242)
[Microsoft Learn: Introduction to Azure fundamentals](https://cda.ms/243)
My 5 steps to create side project landing pages
Tags: sideprojects, startup
Published: 2021-04-08 19:07:11

In the last few years, I've been following the same steps to create the landing page for my side projects. This saves me a lot of time and it works every time.

I've found that this works very well when you're running a one-man show and you don't have a lot of time on your hand. You should spend most of that time coding the actual project instead.

## 1. Choose a CSS framework
[Bootstrap](https://getbootstrap.com/) was my first option for a few years but now I prefer [Bulma](https://bulma.io/). It's easy and lightweight.

The framework is not that important, but it's a good way to try new things in a small part of the project.

## 2. Search for a free landing page template
Now that I know which CSS Framework I want, I just search for a free landing page template for it.

At the end of the day, almost all of the free landing page templates look alike no matter what framework you use. I don't go overboard with this.

Landing pages are very important, indeed. But when I'm launching I know it's not worth spending a lot of hours working on it. I know I will have to review it in a few weeks and make changes based on user feedback and metrics.

## 3. Always write a F.A.Q
This is good exercise for me. Not only because it will help the potential users to understand what I'm offering, but also because it helps me to better define the product and how to pitch it.

## 4. Create a video
This might sound difficult but it's quite easy.

1. Use PowerPoint/Google Slides/iMovie/Keynote to create the video. If you use PowerPoint or Google Slides you will need to record the screen.  
If you're using Keynote you can export it as an MP4 directly from the application which makes it quite easy.
2. The video improves a lot if you have a voice-over explaining what your tool does in sync with the video.  
A good way to have **good voices** in your video is to use [Amazon Polly](https://aws.amazon.com/polly/). **It's free!**, you just need to open an account on [AWS](https://aws.amazon.com) and use it directly from the web.  
Write down the text, choose a voice, download the mp3 and sync it with the video.
3. Add some music to the background. I like to use [SoundCloud](https://soundcloud.com/) and download **Creative Common** music from there. You can find a lot of **Royalty free** songs to use.

## 5. Create a blog
In this case, I use any [Static Site Generator](https://jamstack.org/generators/) and even [GitHub Pages](https://pages.github.com/) to create the blog.   

If you're offering an Open Source tool remember that [ReadTheDocs](https://readthedocs.org/) is a good choice too.  

I try to write as much I can to provide the users a place to find out news about the product, questions, and tutorials about it.
Laravel Livewire Crud Tutorial
Tags: laravel, livewire, php, webdev
Published: 2021-04-08 19:00:25

What is Livewire?
Livewire is a full-stack framework for Laravel that makes building dynamic interfaces simple, without leaving the comfort of Laravel. Livewire relies solely on AJAX requests to do all its server communications. Livewire completely sends Ajax requests to do all its server-side communication without writing any line of Ajax script.

In this blog, we have described a step-by-step guide for Creating CRUD (Create, Read, Update, Delete) Application in the Laravel 8 framework by using the Livewire package.

https://techvblogs.com/blog/laravel-livewire-crud-tutorial
Bug Bounty journey
Published: 2021-04-08 18:45:23

### Day 2

I enumerated my target for sub domains in order to increase the scope for my attack vector and found quite a handful of them but as of now couldn't find any low hanging bug. I looked at the API and tried making some requests to them but got a message saying that I am unauthorized(obviously). I tried a few ways to get something but I couldn't. I looked at another target and found something on that target but when I opened the file which I thought was useful turned out to be empty, looks like I just got trolled by the person who made the website. Well gonna try something new tommorow.


I also found this amazing video which was recently released and was presented at the Nahamcon 2021.
Check it out [here](https://www.youtube.com/watch?v=-PkK9DP5nec)


Also found this amazing website where bug hunters can find another hunter to collaborate with, haven't tried it myself but seems like a nice place to meet some bug bounty hunters
Check it out [here](https://findhunters.com/)

***Don't be dumb on the internet***
Setting up Pi-hole to provide DHCP service
Tags: linux, pihole, raspberrypi, network
Published: 2021-04-08 18:28:25

I recently setup my raspberry pi as a pi-hole server, however, before this I used to use it as a DNS and DHCP server using dnsmasq, luckily Pi-hole comes with its own fork of dnsmasq which made this process super easy.

Let's get to it.

Firstly, I use archlinux arm so you would need to consult the documentation to install pihole.

If you use Archlinux then follow the steps [here](https://wiki.archlinux.org/index.php/Pi-hole#Pi-hole_server)
The official documentation is [here](https://docs.pi-hole.net/main/basic-install/)

Once you have your Pi-hole and your web administration server running you can now begin setting up your DHCP and DNS server, I have used the default Pi-hole blocklists you can choose to use additional ones.

Once you complete your installation open your Web Admin interface for Pi-hole.
`Go to Settings => DHCP`
![alt text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6jxm77ax4c1obzuaznch.png)
 
Once you have the DHCP server enabled pi-hole will add its custom configuration to `/etc/dnsmasq.d/`
Make sure you have `conf-dir=/etc/dnsmasq.d/,*.conf`
commented out in `/etc/dnsmasq.conf`

```
~$ ls /etc/dnsmasq.d/
01-pihole.conf  02-pihole-dhcp.conf  03-pihole-custom.conf
```
Once you have your dhcp server enabled you can add additional commands by creating a file like 
> /etc/dnsmasq.d/03-custom.conf

Make sure you restart dnsmasq using
```
~]$ sudo systemctl restart dnsmasq.service
```
or
```
~]$ pihole restartdns
```

This is how my custom file looks like, since I want to push my raspberry-pi IP's as DNS servers to my clients.

```
~$ cat /etc/dnsmasq.d/03-pihole-custom.conf 
dhcp-option=option:dns-server,192.168.31.2,192.168.31.3
dhcp-host=medusa-arch.demodomain,192.168.31.4,36h

```
You can add static hosts using the `dhcp-host` option like I did above and all the things that dnsmasq supports.

This helps in resolving local domains for example, or to resolve IP addresses to hostnames.

```
~]$ dig +short a medusa-arch
192.168.31.4

~]$ dig +short -x 192.168.31.4
medusa-arch.demodomain.
```

Pi-hole basically does most of the heavy lifting using dnsmasq.

I hope this helps, I would be writing up a detailed post on how to install Pihole later.

Thank you for reading.
4 Figma's Chocolat Ball ...
Published: 2021-04-08 18:03:23

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




hi everyone... i'm trying take out cobwebs of this blog...
but first tasting 4 figma's essentials plugins for User Interface.
and now teaching you, why i chose them.

1.Mateeeeeerial Design:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k2ill0zsc17fvl53eur4.png)

This important kind of icons so so presently acclaimed for communit, in your hands... so closed.

2.SmoothShadow:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a2frbhjdmizypft6n2ya.png)

Yo had so much control with shadows and this plugin, it's looks like photoshop 'curves', but from figma 😍


3.UI Gradients:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g0iksk0e8mdjad2wbaz3.jpg)
Great and beautifuls gradients if you like...

4. Lorem Ipsum:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lony4sp471ppluovk1ik.png)
Other great, that generate a lorem ipsum for prototypes and portfolio's projects.


If you don't know how can you use it:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lmeofqlj2ck9y2ljm4r7.png)

click on Plugin and enjoy it, thanks! 👾🤘
Day~3 of #100DaysOfCode
Published: 2021-04-08 17:34:26

*Hello Everyone,*

*Today is day 3 of the 100DaysofCode challenge, Today I made the user registration system of my Django, In this project, I have tried to make an email-based registration system, I have to use AbstractUser to create a custom user model, so currently, in the project, a user can register through their email and password and they can also update their profile with their name and profile image.*


![ezgif.com-gif-maker.gif](https://cdn.hashnode.com/res/hashnode/image/upload/v1617901948386/ksvS7RXP6.gif)


*Talking about react today I have learned about local storage and useEffect hooks, and also worked on a todo app with local storage and useEffect hooks(the project is from the course).*

![Screenshot_2021-04-09 React App.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1617937278463/0zbVlbOFW.png)
Day 100 Of 100DaysOfCode: Regression with categorical features
Tags: 100daysofcode, wecoded, codenewbie, beginners
Published: 2021-04-08 17:24:06

Despite of being women from non-technical background, I was able to complete my 100s days as learning new things and most of the time not knowing what am I doing. But its looking back at the first day when I was feeling confused about naming the variable, I am feeling like I know something now. Also, I have just applied for an intern position.

This is my 100th day of #100daysofcode and #python learning journey. Like usual day todays also I keep learning from DataCamp. I completed some assignments there.
# Code for Regression with categorical features
```python
# Import necessary modules
from sklearn.model_selection import cross_val_score
from sklearn.linear_model import Ridge

# Instantiate a ridge regressor: ridge
ridge = Ridge(alpha=0.5, normalize=True)

# Perform 5-fold cross-validation: ridge_cv
ridge_cv = cross_val_score(ridge, X, y, cv=5)

# Print the cross-validated scores
print(ridge_cv)
```
Output of the above code will be
```python

[0.86808336 0.80623545 0.84004203 0.7754344  0.87503712]
```
<blockquote class="twitter-tweet"><p lang="en" dir="ltr">Day 100 Of <a href="https://twitter.com/hashtag/100DaysOfCode?src=hash&amp;ref_src=twsrc%5Etfw">#100DaysOfCode</a> and <a href="https://twitter.com/hashtag/Python?src=hash&amp;ref_src=twsrc%5Etfw">#Python</a> <br>Regression with categorical features from DataCamp<a href="https://twitter.com/hashtag/WomenWhoCode?src=hash&amp;ref_src=twsrc%5Etfw">#WomenWhoCode</a> <a href="https://twitter.com/hashtag/100DaysOfCode?src=hash&amp;ref_src=twsrc%5Etfw">#100DaysOfCode</a> <a href="https://twitter.com/hashtag/CodeNewbie?src=hash&amp;ref_src=twsrc%5Etfw">#CodeNewbie</a> <a href="https://twitter.com/hashtag/DEVCommunity?src=hash&amp;ref_src=twsrc%5Etfw">#DEVCommunity</a> <a href="https://t.co/mrYnm1EfSc">pic.twitter.com/mrYnm1EfSc</a></p>&mdash; Durga Pokharel (@durgacodes) <a href="https://twitter.com/durgacodes/status/1380205957624389632?ref_src=twsrc%5Etfw">April 8, 2021</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
Finally, You can Collect Web Vital metrics from AMP pages using Google Analytics
Published: 2021-04-08 17:16:06

If you don't know already, You can monitor your site's Web Vitals using [Web-vitals](https://github.com/GoogleChrome/web-vitals) script. Hooking it with the [Web-Vitals-Report](https://web-vitals-report.web.app/) app, you have easy monitoring for site performance.

However, You can't run these scripts in AMP pages as 3<sup>rd</sup>Party Scripts are a no-no. So there was no easier way to properly collect web vital metrics until now.

Recently AMP project started providing vitals like CLS, LCP and FID as [performance variables](https://github.com/ampproject/amphtml/blob/main/spec/amp-var-substitutions.md#performance). When I tried to implement this in my blog I had a couple of problems.

1) Google analytics Event values should be an integer. CLS, LCP, FID values will most likely have decimal points. This means the entire event will be dropped in google analytics.
2) If I wanted to use fractions, then I should use Google Analytics G4. Which is still in alpha and no official support from AMP.

So the obvious option I had was to [submit a PR](https://github.com/ampproject/amphtml/pull/33383) that would translate these values into something Google Analytics can understand. Thankfully the team accepted it. So here is what you have to do.

If you want to capture CLS metrics, You need to include the google analytics snippet for AMP as shown below.

~~~html
<amp-analytics type="googleanalytics">
    <script type="application/json">
        {
          "vars": {
            "account": "👉 Provide site tracking ID here (e.g. UA-XXXXX-Y) 👈"
          },
          "triggers": {
            "capture CLS": {
              "on": "visible",
              "request": "event",
              "vars": {
                "eventCategory": "Web Vitals",
                "eventAction": "CLS",
                "eventLabel": "${clientId}-${pageViewId}-CLS",
                "eventValue": "$CALC(${cumulativeLayoutShift},1000,multiply,true)"
              }
            }
          }
        }
</script>
</amp-analytics>
~~~

Also, don't forget to set the tracking ID.

You can read the detailed write-up at [Collect Core Web Vitals from AMP pages using Google Analytics] (https://raja.anbazhagan.dev/amp-pages-and-core-web-vitals-and-google-analytics/) @ [raja.anbazhagan.dev](https://raja.anbazhagan.dev)
How to Deploy Angular on Nginx remote Server Example – Use Vultr VPS Hosting
Tags: android, nginx, remote
Published: 2021-04-08 17:14:07

How to Deploy Angular on Nginx remote Server Example – Use Vultr VPS Hosting » grokonez
https://grokonez.com/frontend/angular/angular-deployment/how-to-deploy-angular-on-nginx-remote-server-example-use-vultr-vps-hosting

How to Deploy Angular on Nginx remote Server Example – Use Vultr VPS Hosting

https://youtu.be/iPYgCYb2tZg

https://grokonez.com/frontend/angular/angular-deployment/how-to-deploy-angular-on-nginx-remote-server-example-use-vultr-vps-hosting
Using Matplotlib to Plot a Live Graph of Benford's Law in Python
Tags: programming, python, mathematics
Published: 2021-04-08 16:45:00

Check out the article [here](https://itnext.io/using-matplotlib-to-plot-a-live-graph-of-benfords-law-in-python-79ec2e987694) to learn more about Benford's Law and how to graph it in Python!

Have fun! 💖
Deploying your javascript and html code to Apache HTTP server
Tags: javascript, html, http, apache
Published: 2021-04-08 16:35:53

If you are looking for a static server to deploy just your html and javascript files , Apache HTTP server is a good option.

Apache claims as this is the most popular web server on the internet.

Below are the steps to be followed to install and deploy your static files to the server:

STEP1: Install Apache HTTP server

STEP2: Configure server root in the installed server

STEP3: Start the server and verify it

STEP4: Place all files in htdocs folder

In detail:

https://fullstackdeveloper.guru/2021/04/08/how-to-deploy-html-javascript-code-to-apache-http-server/
Simple LocalStorage Project!
Tags: localstorage, javascript, html, css
Published: 2021-04-08 16:30:14

I made a simple Simple LocalStorage Project! This is the first time when I used localStorage! I learned this from a beginner tutorial what was very easy to follow.

Here is the code:

```
<!DOCTYPE html>
<html>
<head>
	<title>LocalStorage</title>
</head>
<style>
body {
	font-family: sans-serif;
	margin: 0;
	padding: 0;
	color: grey;
}
.container {
	position: absolute;
	top: 10%;
	right: 50%;
	transform: translate(50%, 0%);
	background: white;
	width: 400px;
	height: 500px;
	box-shadow: 0px 0px 20px blue;
	padding: 10px;
	border-radius: 20px;
}
.storage {
	border:0;
	border-bottom: 1px solid #ccc;
	width: 100%;
	margin-top: 20px;
	font-size: 20px;
	outline: none;
}
.text {
	border-radius: 10px;
	padding: 10px;
	box-shadow: 0px 0px 10px blue;
	margin-top: 20px;

}
.button {
	width: 80%;
	box-shadow: 0px 0px 20px blue;
	outline: none;
	border: none;
	background: white;
	padding: 10px;
	border-radius: 20px;
	bottom: 20px;
	position: absolute;
	left: 40px;
	cursor: pointer;
	transition: 0.4s;
}
.button:hover {
	box-shadow: 0px 0px 40px blue;
	transition: 0.4s;
}
label {
	position: absolute;
	width: 45px;
	height: 22px;
	right: 20px;
	top: 20px;
	border: 2px solid;
	border-radius: 20px;
}
label:before {
	position: absolute;
	content: "";
	width: 20px;
	height: 20px;
	left: 1px;
	top: 1px;
	border-radius: 50%;
	cursor: pointer;
	background: #000;
	transition: 0.4s;
}
label.active:before {
	left: 24px;
	background: #fff;
}
body.night {
	background: #000;
	transition: 0.5s;
}
.container.night {
	background: black;
}
</style>
<body>
<label id="dark-change"></label>
<div class="container">
	<input type="text" class="storage" placeholder="Write something...">
	<p class="text">Text</p>
	<button class="button">Save</button>
</div>

<script>
const storageInput = document.querySelector('.storage');
const text = document.querySelector('.text');
const button = document.querySelector('.button');
const storedInput = localStorage.getItem('textinput')

if(storageInput) {
	text.textContent = storedInput
}

storageInput.addEventListener('input', letter => {
	text.textContent = letter.target.value
})

const saveToLocalStorage = () => {
	localStorage.setItem('textinput', text.textContent)
}
button.addEventListener('click', saveToLocalStorage)


var content = document.getElementsByTagName('body', 'container')[0];
var darkMode = document.getElementById('dark-change');
darkMode.addEventListener('click', function() {
		darkMode.classList.toggle('active');
		content.classList.toggle('night');
})
</script>
</body>
</html>

```
Also, don't forget to subscribe to my YouTube channel for new videos every week!
https://www.youtube.com/channel/UCFzeA3xC-_i4ZT-XwcwsJxQ/videos
React and Vue apps - with and without Node
Tags: javascript, react, vue, node
Published: 2021-04-08 16:27:57

I'd like to share some GitHub repos I've put together for showcasing React and Vue apps.

These repos include instructions to setup locally and deploy to GitHub Pages. And you can view GitHub Pages live demos.

## JS sites without Node

I've recently created Vue and React projects which only use 3 files each - covering HTML, CSS and JS. 

No Node needed. No CI build step needed! Development environments and deploys are simpler.

And you can even use something close like JSX without using Babel, thanks to the HTM library.

No `package.json` or configs to maintain.

Yes, you lose some dev tooling, but for simple applications this approach can be be fine. 

Especially if you just want to add interactivity to an **existing** website (which could be plain HTML or maybe Python or PHP). Without having to add Node and without restructuring your entire repo to match the Vue or React app structure.

### React

{% github MichaelCurrin/react-frontend-quickstart %}

### Vue

{% github MichaelCurrin/vue-frontend-quickstart %}


## Node-based projects

If you are interested in my traditional Node-based SPA approaches, see these older repos of mine.

### React

{% github MichaelCurrin/react-quickstart %}

### Vue 

{% github MichaelCurrin/vue-quickstart %}


## Loading dependencies

A note on dependency management in the "frontend" repos linked above.

I'm not using `package.json` in Node or using `script` tags to load React and Vue on the HTML frontend.

I've used the newer [ES Module](https://michaelcurrin.github.io/dev-cheatsheets/cheatsheets/javascript/general/modules/es-modules.html) syntax in the JavaScript file.

For example, in `main.js`:

```javascript
import React from "https://dev.jspm.io/react@17.0";
```

You can view that in the browser to:

https://dev.jspm.io/react@17.0

Which in turn loads more JS scripts.

So you'll load this as React:

[dev.jspm.io/npm:react@17.0.2/cjs/react.development.dew.js](https://dev.jspm.io/npm:react@17.0.2/cjs/react.development.dew.js)

You can explore the directory of available scripts as:

https://dev.jspm.io/npm:react@17.0.2/

Within a JS script that is an ES Module, you can load other local modules too, so you can still have multiple JS files.

`main.js`

```javascript
import { foo } from "./lib.js"
```

The frontend will just fetch `main.js` and then `lib.js` as an extra call.


## Badges

By the way, I created these badges above using my Badge Generator project.

https://michaelcurrin.github.io/badge-generator/