teleren/devto huggingface dataset:
AzureFunBytes - Intro to @BicepLang
Tags: azure, iac, beginners, discuss
Published: 2021-05-26 17:48:29

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 is Microsoft Build! There are so many sessions to take part in!  I wanted to spend some time using one of the amazing things that have come out of this huge event.  I have been playing with Azure Bicep lately for creating my resources.  Today I'd like to show you how to create a basic template and deploy it to Azure.  Then I will look at how quickstart templates are converted in the Bicep Playground.  We'll look at the Bicep CLI install, the VS Code plug-in, and of course Azure CLI.

{% youtube Ij4n-R-V5AU %}

Bicep is a Domain Specific Language (DSL) for creating your Azure resources. While many different methods may select programming languages such as Ruby, Bicep really aims to reduce complexity by introducing a cleaner syntax for you to reuse your code more often. Bicep is a **transparent abstraction** of ARM templates, which differs from using another general-purpose programming language. Bicep uses Azure Resource Templates (ARM template) files in JSON to compile and deploy your desired infrastructure.

[What is Bicep (Preview)?](https://cda.ms/28H) 
[Install Bicep (Preview) Bicep on GitHub]( https://github.com/Azure/bicep) 
[Quickstart: Create Bicep files with Visual Studio Code](https://cda.ms/28J)
[Bicep Playground](https://bicepdemo.z22.web.core.windows.net/)
[ARM template documentation](https://cda.ms/28G)- 
[Tutorial: Create and deploy first Azure Resource Manager Bicep file](https://cda.ms/28F)
[Bicep on Twitter](https://twitter.com/BicepLang)

---

Learn about Azure fundamentals with me!

Live stream is available on Twitch, YouTube, and LearnTV at 11 AM PT / 2 PM ET 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)
Introducing Rafiki – An All-In-One Solution for Interledger Wallets
Tags: webmonetization, opensource
Published: 2021-05-26 17:45:27

Earlier today, our CEO, Stefan, [announced](https://write.as/coil/introducing-rafiki-an-all-in-one-solution-for-interledger-wallets) Rafiki, an open-source All-In-One Solution for Interledger which will enable features like:
- Simple Payments (paying a specific amount)
- Recurring Payments (subscriptions and pay-as-you-go)
- App-based Payments (connecting apps to your Interledger wallet, allowing them to make payments)
- Advanced Payments (including streaming payments and other novel use cases)


## What this means for Developers
For Developers and open source contributors and projects, 
 Stefan mentions that "there are a lot of [projects that] depend on the functionality that Rafiki unlocks and this will allow them to start testing and developing their ideas." 

So, as a Developer, you can review the code repository and contribute code, issues and feedback today.

Learn more about Rafiki and contribute to the [official Rafiki source code repository](https://github.com/coilhq/rafiki).

And view Stefan's original [blog post](https://write.as/coil/introducing-rafiki-an-all-in-one-solution-for-interledger-wallets) about Rafiki for more context.
Google Photos embed thingy
Tags: googlephotos, google, html, css
Published: 2021-05-26 17:30:08

A while ago, I was trying to embed a Google Photos album into a new website I was creating. But I quickly found that there was no easy way to do this, and I resorted to creating my own plugin for this.

The plugin has three basic parts that you must change from the demo:
**A cover image** (A square image, at least 300x300 pixels. I recommend hosting via [postimages.org](https://postimages.org/))
**Album Title** (What you'd like the album to show up as on the website)
**Google Photos Album URL** (You must include this or viewers won't see the album on click)

The rest is already included in my code.

Now, here's how to actually create it.
_CSS_
```
.container {
  position: relative;
  width: 180px;
}
.image {
  display: block;
  width: 180px;
  height: auto;
}
.overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #757575;
  overflow: hidden;
  width: 180px;
  height: 0;
  transition: 0.5s ease;
  opacity: 0.8;
  border-radius: 5%;

}
.container:hover .overlay {
  height: 100%;
}
.text {
  color: #000000;
  font-size: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  font-family: 'Montserrat', sans-serif;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
  text-decoration: none;

}
.container2 {
  position: relative;
  font-family: 'Montserrat', sans-serif;
}
.text-block {
  position: absolute;
  bottom: 20px;
  right: 20px;
  color: white;
  padding-left: 20px;
}
.cursor-on-hover{
cursor: none;
}
.cursor-on-hover:hover{
cursor: pointer;
}
```
_HTML_
```
<td>
<div class="container"><div class="container2">
  <img style="border-radius: 5%;" src="https://i.postimg.cc/"  class="image">
  <div class="text-block">
  <b>title</b></div>
  <div class="overlay"><div style="margin-top: 18px;"><center>
  <img src="https://i.postimg.cc/bvjJn0C5/imageonline-co-transparentimage-8.png" width="150px" class="cursor-on-hover" onclick="window.location.href='https://photos.app.goo.gl/'"></div>
  <div class="text"><a class="text" href="https://photos.app.goo.gl/"><b>View album on Google Photos</b></a></div>
  </div>
  </div>
  </td>
```
You'll want to replace `https://i.postimg.cc/` (_third line from the top_) with the actual URL of the cover photo
Also replace `title` (_fifth line from the top_) with the actual title of your Google Photos album.
Replace `https://photos.app.goo.gl/` (_on the seventh and eighth lines from the top_) with your actual Google Photos album URL

See [this CodePen](https://codepen.io/CMFdev/pen/NWpvxxr) for an example.
java online compiler and runner
Tags: online, computerscience, javascript
Published: 2021-05-26 17:26:34

<a href="https://pythonslearning.com/2021/05/which-is-best-java-online-compiler-and-runner.html">online compiler for java</a>
Java is a set of computer software and specifications developed by James Gosling at Sun Microsystems, which was later acquired by the Oracle Corporation, that provides a system for developing application software and deploying it in a cross-platform computing environment.
Resources :
https://pythonslearning.com/2021/05/which-is-best-java-online-compiler-and-runner.html
online compiler for machine learning
Tags: machinelearning, compiler, computerscience
Published: 2021-05-26 17:17:35

check <a href="https://pythonslearning.com/2021/05/best-online-python-compiler-editor-for-machine-learning.html">online compiler for machine learning</a>
Machine learning is a method of data analysis that automates analytical model building. It is a branch of artificial intelligence based on the idea that systems can learn from data, identify patterns and make decisions with minimal human intervention
Resources : https://pythonslearning.com/2021/05/best-online-python-compiler-editor-for-machine-learning.html
My Journey with Angular and SSR
Tags: angular, codenewbie, javascript
Published: 2021-05-26 17:15:07

Last month I setup my [blog](https://www.danywalls.com) with Angular Universal (Server Side Render) this is about my steps installing SSR in my blog, so keep in mind a simple blog with only text with http request to contentful, so is real scenario, but the simple case to get start with Angular and Server Side render.

## Setup SSR

First step is install Angular universal.

```bash
ng add @nguniversal/express-engine@next
```

Next step was set up the build in netlify 

```bash
npm run build:ssr
```

## Handle Http requests
The page is ready with server side render, but my client application need to request the articles, The [TransferState](https://github.com/angular/universal/blob/master/docs/transfer-http.md) service help to send information from the server to the client.

```ts
  imports: [
    BlogHeaderModule,
    BrowserModule,
    InfrastructureModule,
    AppRoutingModule,
    BrowserModule.withServerTransition({ appId: 'dw' }),
    TransferHttpCacheModule
  ],
```
Install it as part of the App module and import into  ServerTransferStateModule in server module.

```typescript
@NgModule({
  imports: [AppModule, ServerModule, ServerTransferStateModule],
  bootstrap: [AppComponent],
})
```


## Recap
It's done! because my app is only text was easy to get more than 95% but keep in mind the following points.

- Not all application are the same, my case is a simple blog, so not issues with images, or authentication.

- Use https://contrastchecker.com/ and https://alex-page.github.io/sass-a11ycolor for accesibility issues.

- If is your first time, try with an easy project like a blog or small app.

- Take care about how to use or transfer data between components, I got an issue to send data using this.location.getState().

Done!
Count by the properties of an array of objects
Tags: javascript, reactnative, vue
Published: 2021-05-26 17:13:05

Count by the properties of an array of objects


const countBy = (arr, prop) => arr.reduce((prev, curr) => (prev[curr[prop]] = ++prev[curr[prop]] || 1, prev), {});

// Example
countBy([
    { branch: 'audi', model: 'q8', year: '2019' },
    { branch: 'audi', model: 'rs7', year: '2020' },
    { branch: 'ford', model: 'mustang', year: '2019' },
    { branch: 'ford', model: 'explorer', year: '2020' },
    { branch: 'bmw', model: 'x7', year: '2020' },
], 'branch');

// { 'audi': 2, 'ford': 2, 'bmw': 1 }
Test Automation with Angie Jones
Tags: discuss, podcast, testing
Published: 2021-05-26 17:03:38

---
title: Test Automation with Angie Jones
published: true
description: Listen to S5E3 of DevDiscuss!
tags: discuss, podcast, testing
series: DevDiscuss Season 5
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jk9zj3gi93sxpyimbdwg.png
---

A new episode is DevDiscuss is here — and I was lucky enough to have [Molly Struve](dev.to/molly), Site Reliability Engineer at Forem, join me as co-host this week. 

{% podcast https://dev.to/devdiscuss/s5-e3-the-future-of-automation %}
 

As we discuss in the episode, test automation is the use of separate software to run tests automatically, and collect and analyze the results to improve future software quality. Who better to help us explore test automation than **[Angie Jones](dev.to/techgirl1908), Senior Director of Developer Relations at Applitools and creator of Test Automation University**?

A huge thanks to @techgirl1908 for being a fantastic guest on DevDiscuss! 

We hope you enjoy the episode 🎧 


---

_You can [follow DevDiscuss](dev.to/devdiscuss) to get episode notifications and listen right in your feed_ — or subscribe on your platform of choice! Plus, if you leave us a review, we'll send you a free pack of thank-you stickers. Details [here](https://airtable.com/shr8oKAIMZgdYnBxx). 

## Quick Listening Links
- [Apple Podcasts](https://podcasts.apple.com/us/podcast/devdiscuss/id151305388)
- [Spotify](https://open.spotify.com/episode/5RCiCKgG7wHOo3RDcRgaMO)
- [Google](https://podcasts.google.com/feed/aHR0cHM6Ly9mZWVkcy5kZXZwb2RzLmRldi9kZXZkaXNjdXNzX3BvZGNhc3QueG1s/episode/aHR0cHM6Ly9kZXZwb2RzLmRldi9wb2RjYXN0cy9kZXZkaXNjdXNzLzM2?sa=X&ved=0CAQQkfYCahcKEwjohtiS6OfwAhUAAAAAHQAAAAAQCA)
- [Listen Notes](https://www.listennotes.com/podcasts/devdiscuss/s5e3-the-future-of-automation-brOUmyhtZLC/)
- [TuneIn](https://tunein.com/podcasts/Technology-Podcasts/DevDiscuss-p1324596/?topicId=163324441)
- [RSS Feed](http://feeds.codenewbie.org/devnews_podcast.xml)
- [DEV Pods Site](https://devpods.herokuapp.com/podcasts/devdiscuss/episodes/166)

---
_Acknowledgements_ 
- _@levisharpe for producing & mixing the show_
- _Our season five sponsors: [CockroachDB](cockroachlabs.com/devdiscuss), [Cloudways](https://www.cloudways.com/en/?id=893892), [Scout APM](https://www.scoutapm.com/devdiscuss) & [Rudderstack](https://rudderstack.com/?utm_source=devto&utm_medium=podcast&utm_campaign=CMPGN_3_PS&utm_content=None&utm_term={keyword}&raid=6dbc05eeb293b421f68d02ce12648240)!_

# 🗣️🗣️🗣️
Ensemble Techniques
Tags: machinelearning, datascience
Published: 2021-05-26 16:47:12

There are two types of Ensemble Techniques namely:
BAGGING & BOOSTING

Ensemble methods are used to obtain better predictive performance (or) accuracy than could be obtained from any of the constituent learning algorithms alone.

BAGGING:-
Bagging gets its name because it combines bootstrapping and aggregation to form one ensemble model.
Given a sample of data, multiple bootstrapped subsamples with same size are pulled.
Note : Repetition of samples is also allowed.
A Decision Tree is formed on each of the bootstrapped subsamples.

An algorithm is used to aggregate over the Decision Trees to form the most efficient predictor. Ex: BaggingClassifier Algorithm.
In Bagging we use all the predictor variables(P) for creating different trees so, always the strong independent variable is used for the first split for most of the trees.
when we average them the variance wont be reduced much.
so, in Random forest we use only a subset of predictor variables and each time different trees are formed with different subset of predictor variables.

Generally for Regression: P/3 and for Classification: sqrt(P) predictor variables are chosen.

BOOSTING:-
It is the process of turning a weak learner into a strong learner.
There are three types of Boosting: Ada Boost, Gradient Boost and XG Boost.
Initially using the whole dataset the 1st Base learner is created and trained.
The data for which it is incorrectly classified will be taken and sent to base learner 2 and it is trained again.
Again for the data to which it classified wrongly will be sent to the next base learner.
This process continues...
Until a stopping criteria is met.
Back on Dev...
Tags: watercooler
Published: 2021-05-26 16:42:48

I'm back on Dev!

Excited to be back, I used to have an account here a few years ago, had fun on the platform, writing posts every other day and receiving amazing feedback, but later lost my motivation for coding. 
Now I'm back and ready to learn from the great people here and also share my insight.
Platform is looking way different, but I love it. Great job on the new UI!

That's all, have a great day!
Creative Button Animation Hover Effect
Tags: html, css, beginners, codenewbie
Published: 2021-05-26 16:41:09

***Hello guys, In this video you will learn how to create creative button animation hover effect using html and css.***

###Step:#1###
**Add below code inside index.html**
```html
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <title>Awesome Button Css</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <link rel="stylesheet" href="style.css" />
  <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans&display=swap" rel="stylesheet">
</head>

<body>
  <div class="button-outer">
    <button class="button">Hover Me</button>
  </div>
</body>

</html>
```

###Step:#2###
Then we need to add code for style.css which code I provide in the below screen.

```css
* {
  padding: 0;
  margin: 0;
  font-family: 'IBM Plex Sans', sans-serif;
}

html,
body {
  height: 100%;
  background: #000;
}

.button-outer {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.button {
  height: 50px;
  padding: 0 30px;
  font-size: 18px;
  border: 5px solid #fff;
  cursor: pointer;
  background: #4b00ff;
  color: #fff;
  border-radius: 50px;
  position: relative;
  overflow: hidden;
  transition: left 0.5s ease-in-out;
}

.button:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  left: -200px;
  top: 0;
  background: linear-gradient(45deg, #f90, transparent);
  transition: left 0.5s ease-in-out;
}

.button:after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  right: -200px;
  top: 0;
  background: linear-gradient(45deg, transparent, #f90);
  transition: right 0.5s ease-in-out;
}

.button:hover:after {
  right: 0;
  animation: infinite-spinning 10s 0.5s infinite;
}

.button:hover:before {
  left: 0;
  animation: infinite-spinning 10s 0.5s infinite;
}

@keyframes infinite-spinning {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}
```

{% youtube tr11va9bYrQ %}

{% codepen https://codepen.io/stack-findover/pen/rNyzvmJ %}
Difference between Bias and Variance in Machine Learning
Tags: machinelearning, datascience
Published: 2021-05-26 16:37:44

Consider Bias as error on training data and Variance as error on test Data for different training samples.

Under fitting model: 
High Bias and Low Variance [If you try to fit a simple model such that most of the training data points won’t be satisfied]. 

Over fitting model: 
Low Bias and High Variance [If you try to fit a model such that most of the training data points would be exactly satisfied]. 

So, it is very important to build a Perfect Model such that it satisfies most of the training data points and gives better results for the test data [Low Bias and Low Variance].

For detailed explanation, download the following notes on "Bias & Variance" Tradeoff:
https://github.com/ruthvikraja/Bias-Variance.git
【Upcoming Event】Alibaba Cloud Summit 2021
Tags: cloudnative, database
Published: 2021-05-26 16:29:58

I'm excited to announce that our annual event of Alibaba Cloud Summit 2021 is coming on 8th June.

Join this virtual event to discover how you can accelerate digitalization with Cloud and Data Intelligence. Alibaba Cloud Summit 2021 will feature new product launches, keynotes from senior leaders at Alibaba Cloud Intelligence, and sharing from industry and technical experts on various verticals. 

Stay tuned for more updates!

[Check Agenda & Register Now >](https://www.alibabacloud.com/campaign/summit-live-2021/agenda)

<img align="left" width="100" height="100" src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/esyo23xh43bye4xik44h.jpg">
Cnator: channel-based subscriptions in Go
Tags: go, opensource, eventdriven
Published: 2021-05-26 16:17:03

---
title: Cnator: channel-based subscriptions in Go
published: true
description: A channel-based subscription model for you Go code
tags:
 - golang 
 - opensource
 - eventdriven
cover_image: https://blog.altiano.dev/cnator-channel-based-subscription-in-go/cover.jpeg
---


Channels is one of those things that makes Go awesome.

I use channels quite a lot in my next open projects. One of those scenario is to model an event-driven approach.

While developing these projects, I noticed that the setup is more or less the same, so I decided to make a Go module for that.

It's called [`Cnator`](https://gitlab.com/altiano/cnator) (pronounce "c-nator")

```go
go get gitlab.com/altiano/cnator
```

It has 3 methods : 
 - `New()`
 - `Subscribe(channel, subscriber)` 
 - `Serve()`

that can be use it like this

```go
    cnator := cnator.New()
	channels := createChannels()

	// provide channel reference to each publisher
	producerA := NewProducerA(channels.chanA)
	producerB := NewProducerB(channels.chanB)
	producerC := NewProducerC(channels.chanC)

	// using cnator to subscribe to those channel events
	subscriberA := subscriberA{}
	subscriberB := subscriberB{}
	subscriberC := subscriberC{}
	cnator.Subscribe(channels.chanA, subscriberA.receiveChanA)
	cnator.Subscribe(channels.chanB, subscriberB.receiveChanB)
	cnator.Subscribe(channels.chanC, subscriberC.receiveChanC)

     // start watching for events
    cnator.Serve()
```

`createChannel()` just initialized the channels, but you should provide your own model

```go
func createChannels() channels {
	return channels{
		chanA: make(chan struct{}),
		chanB: make(chan string),
		chanC: make(chan Person),
	}
}
```

the subscribers are just callback functions with a matching data type with the channels

```go
func (s *subscriberA) receiveChanA() {
	fmt.Println("Subscriber A receiving")
}

func (s *subscriberB) receiveChanB(data string) {
	fmt.Println("Subscriber B receiving", data)
}

func (s *subscriberC) receiveChanC(data Person) {
	fmt.Println("Subscriber C receiving", data)
}
```

except for `chanA` that receive empty struct{}, 
you can ignore the parameter like `receiveChanA()` does.


The job of `cnator.Serve()` is to spawn a go routine for each subscription made by `cnator.Subscribe(..)`.

It provides some runtime validation like
 - whether the subscriber function doesn't satisfy the channel data type or 
 - whether the channel has not been initialized (i.e. forget to `make(chan ..)`) etc 


Full code & examples can be found at this repository : [Cnator](https://gitlab.com/altiano/cnator)

*Also posted on : https://blog.altiano.dev/cnator-channel-based-subscription-in-go*
LaTeX Crossing Referencing: The Idea
Tags: latex, codenewbie
Published: 2021-05-26 16:12:23

Hello hello how are you today? :) 

We have learned a lot of stuff in LaTeX, from the most basics like installing the distributions, going through changing font styles to create tables and images, so, we have a lot of knowledge about this topics. 

> Let's dive more in this LaTeX world

Let's suppose you have written a huge LaTeX document, like 50 pages, full of tables, images, sections, a little bit of this and that. You are currently on page 30 and you notice that you need to reference a table in page 4, how would you do it?
One option is just write *... like the table in page 4* and everything is solved, but, suddenly you need to modify page number 3 and that *little* modification takes you 3 pages more, so, page 4 is now page 7, it means that you need to change the reference to *... like the table in page 7* but you remember that you need to put more information on page 5 and it takes 4 pages more and ...

Did you catch the idea? Referencing in the *static* way it is not a good idea, because you do not know what modifications you need to do, or if that would be the last version of your work, there is where Cross Referencing is going to save us because 

> Cross Referencing is *dynamic*

This means that if you modify the position of the object (table, image, section, etc) or the number of objects before the object, the number will change automatically, you do not need to be worried about that, LaTeX will do it automatically. 

The command for that is `\label{}` and the command to reference that item is `\ref{}`

> This is just the basic idea of why you would need to use Cross Referencing, next week I am going to talk about it in a deeper way, showing you the power of these commands and some conventions to use them

Do not forget to follow me on twitter `@latexteada`