teleren/devto huggingface dataset:
Exchange Rate Calculator, my simple project for GFTW hackathon
Tags: gftwhackathon, webmonetization, showdev
Published: 2020-06-12 07:54:29

[Instructions]: # (To submit to the Grant For The Web x DEV Hackathon, please fill out all sections.)


## What I built

Simple web interface for getting real time exchange rate of different currencies. I added feature so that only people who have web monetization enabled can use the service and people who do not have this feature cannot use this feature. 

### Submission Category: Creative Catalyst

[Note]: # (Foundational Technology, Creative Catalyst, or Exciting Experiments)


## Demo
 
You can see the working demo at https://sudo-pp.github.io/Exchange-Rate/ 

## Link to Code

[Note]: # (Our markdown editor supports pretty embeds. If you're sharing a GitHub repo, try this syntax: `{% github link_to_your_repo %}`)

{% github sudo-pp/Exchange-Rate %}


## How I built it 

[Note]: # (For example, what's the stack? did you run into issues or discover something new along the way? etc!)

I built this using HTML, CSS and vanilla JS, the exchange rates are from the https://api.exchangerate-api.com/ api


## Additional Resources/Info 

Thanks to @bradtraversy for the cool repository.

[Reminder]: # (We hope you consider expanding your submission into a full-on application for the Grant for the Web CFP, due on June 12.)
enchantedForest[0]
Tags: javascript
Published: 2020-06-12 07:41:42

Hey!
Me and Kevin are making a cool game called "The Enchanted Forest"

It's a single-player RPG.
We're writing pretty much the entire game from scratch, using the really minimal p5.js graphics library.

So far my favorite features are the weather particle effects (especially lightning) and the boar path finding algorithm!
The collision detection for the player staying on blocks is pretty nice too.
I also really like how we are able to import our maps directly from the Tiled map editor.

In addition to coding this game, we're also going to be writing the plot for the RPG!

The project is a WIP. Our code so far can be found [on github](https://github.com/awestover/enchantedForest) and we have a static version of the game up [here](http://enchantedforest.surge.sh/).

This blog post series will be about our adventures in making this adventure.
It's going to be a fun time!
AWS Là Gì? Các Điểm Nổi Bật Của AWS (Amazon Web Services)
Published: 2020-06-12 07:38:35

Công nghệ 4.0 phát triển với tốc độ chóng mặt, trí tuệ nhân tạo AI ngày một phát triển, dữ liệu người dùng ngày càng một nhiều hơn, đòi hỏi một công nghệ mới phải ra đời để giải quyết vấn đề trên. Và công nghệ hiện đại chúng tôi muốn nói đến ở đây chính là điện toán đám mây. Và trong bài viết này, chúng ta cùng nhau phân tích về AWS (Amazon Web Services), một công nghệ của gã khổng lồ Amazon.
https://blog.itnavi.com.vn/aws-la-gi/
Java Version Değiştirme
Tags: openjdk, linuxjava, javaversion
Published: 2020-06-12 07:35:27

---
title: Java Version Değiştirme
published: true
description: 
tags: #openjdk #linuxjava #javaversion
//cover_image: https://direct_url_to_image.jpg
---

Linux’ da Birden Fazla Java Sürümü ile Çalışma

```sh
emre@pardus: java -version
```

>openjdk version “11.0.7” 2020-04-14
OpenJDK Runtime Environment (build 11.0.7+10-post-Debian-3deb10u1)
OpenJDK 64-Bit Server VM (build 11.0.7+10-post-Debian-3deb10u1, mixed mode, sharing)

export JAVA_HOME=/usr/lib/jvm/java-1.8.0-openjdk-amd64
export PATH=$JAVA_HOME/bin:$PATH

```sh
emre@pardus: java -version
```

>openjdk version “1.8.0_212”
OpenJDK Runtime Environment (build 1.8.0_212-8u212-b01-1-b01)
OpenJDK 64-Bit Server VM (build 25.212-b01, mixed mode)

export JAVA_HOME=/usr/lib/jvm/java-1.11.0-openjdk-amd64
export PATH=$JAVA_HOME/bin:$PATH

```sh
emre@pardus: java -version
```
>openjdk version “11.0.7” 2020-04-14
OpenJDK Runtime Environment (build 11.0.7+10-post-Debian-3deb10u1)
OpenJDK 64-Bit Server VM (build 11.0.7+10-post-Debian-3deb10u1, mixed mode, sharing)

```sh
update-java-alternatives -l
```

>java-1.11.0-openjdk-amd64 1111 /usr/lib/jvm/java-1.11.0-openjdk-amd64
java-1.8.0-openjdk-amd64 1081 /usr/lib/jvm/java-1.8.0-openjdk-amd64


Aşağıdaki komutu terminalde çalıştırdığınızda, seçebileceğimiz mevcut sürümleri gösterir.  Numarayı seçip onayladıktan sonra varsayılan java sürümünüz olacaktır.

```sh
sudo update-alternatives –config java
```

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

[Açık Kaynak Yazılımları]
(https://www.acikkaynak.blog/)
Understanding Istio: part 8 – VirtualService
Tags: kubernetes, devops, docker, beginners
Published: 2020-06-12 07:15:05

---
title: Understanding Istio: part 8 – VirtualService
published: true
description: Serie of sketchnotes about Istio. Explaining in a visual way Istio principles.
tags: Kubernetes, DevOps, Docker, beginners
series: Understanding Istio in sketchnotes
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/r4phsz9k71ww39vuo5fo.jpg
---

Understanding Cloud technologies, like Kubernetes, can be difficult or time-consuming. In order to spread knowledges about it, I started to create [sketchnotes about Kubernetes](https://dev.to/aurelievache/kubernetes-sketchnotes-pods-4ib0) and know it's time to talk about a perfect companion of Kubernetes, a service mesh, Istio.

We continue our new serie of Sketchnotes about Istio, with a sketchnote about VirtualService.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/r4phsz9k71ww39vuo5fo.jpg)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/whuz3a1r43k5do5e9c06.jpg)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/dtwal7acpa9tzu65s4sw.jpg)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/9ks0nerfgtnc56q3zzst.jpg)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/b2tv2se0whernazofxiq.jpg)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/s3iwrrft3xj8xjflgvbc.jpg)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/mb1ualinzg31kyksyr4h.jpg)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/nl8vmigfzegtptqpzt74.jpg)

If you are interested, I published a book with all the sketchnotes on Istio (and new ones!): ["Understanding Istio in a visual way"](https://gumroad.com/aurelievache#vJYhM).

As usual, if you like theses sketchnotes, you can follow me, and tell me what do you think. I will publish others sketchs shortly :-).
Panic/recover and goroutine in Golang
Tags: blog, go
Published: 2020-06-12 06:56:48

---
title: "Panic/recover and goroutine in Golang"
published: true
tags: blog, golang
//cover_image: https://direct_url_to_image.jpg
canonical_url: https://jma.im/posts/panic-recover-and-goroutine-in-golang/
---

The panic recover is only alive within the current thread, that means each goroutine need it’s own panic recover

The panic in this goroutine, wont be caught by the recover, it will panic.

```go
defer func() {
	if rec := recover(); rec != nil {
		fmt.Println("Catched panic", rec)
	}
}()
fmt.Println("Hello, playground")
wg := sync.WaitGroup{}
wg.Add(1)
go func() {
	defer wg.Done()
	panic("You can't catch me!")
}()
wg.Wait()
```

To catch the panic inside of the goroutine, you need code the recover again

```go
defer func() {
	if rec := recover(); rec != nil {
		fmt.Println("Catched panic", rec)
	}
}()
fmt.Println("Hello, playground")
wg := sync.WaitGroup{}
wg.Add(1)
go func() {
	defer func() {
		if rec := recover(); rec != nil {
			fmt.Printf("Now catched `%v`\n", rec)
		}
	}()
	defer wg.Done()
	panic("You can't catch me!")
}()
wg.Wait()
```

[More reading](https://blog.golang.org/defer-panic-and-recover)

Website: [jma.dev](https://jma.dev/?utm_source=devto) 
Weekly tech bookmarks: [funcmarks](https://buttondown.email/func)
Angular9: Lazy loading Components
Tags: angular
Published: 2020-06-12 06:45:42

This article shows you how to lazy load with Angular 9 and provides the code and resources along the way.

#1 Create New App

Create a new angular app using Angular CLI command. Below command will create the angular application 

     ng new lazy-demo –minimal  –inline-template  –inline-style  –routing=false –style=css

This command will create a new angular app in a folder named lazy-demo

–minimal removes testing frameworks

–inline-template puts all component templates in the .ts file

–inline-styles puts all component styles in the .ts file

–routing=false does not add any routing

–style=css specifies to use CSS

#2 Create Components

Create two new components named lazy1 and lazy2

ng generate component Lazy1 –flat  –skip-import –skip-selector

ng generate component Lazy2 –flat  –skip-import –skip-selector

These commands will create two new components lazy1.component.ts and lazy2.component.ts respectively. We wont want the components to be included in out module file as we want component to lazy loaded. We also don’t need selector as we are not referring them in template directly

#3 Lazy Load Component

Add the following code in app.component.ts file. We need to inject ViewContainerRef, ComponentFactoryResolver in our constructor which we are importing from @angular/core

constructor(private viewContainerRef: ViewContainerRef,
      private rcf: ComponentFactoryResolver) {
  }
  async loadLazy1() {
    this.viewContainerRef.clear();
    const { Lazy1Component } = await import(‘./lazy1.component’);
    this.viewContainerRef.createComponent(
      this.rcf.resolveComponentFactory(Lazy1Component)
    )
  }
  async loadLazy2() {
    this.viewContainerRef.clear();
    const { Lazy2Component } = await import(‘./lazy2.component’);
    this.viewContainerRef.createComponent(
      this.rcf.resolveComponentFactory(Lazy2Component)
    )
  }

The getLazy1 function clears the container. This is important is we only want to show one of the lazy-loaded components at a time. If we did not clear the container, every time we lazy load components, they would be displayed one after another.

Next, we import the components, lazily, using the await import syntax.

Finally, we create the component in the container.

#4. Add Buttons to Lazy Load

Modify template app.component.ts as shown below

template: `
    <div>
      <p>Lazy Loading Application</p>
      <button (click)=”loadLazy1()”>Load Lazy1</button>
      <button (click)=”loadLazy2()”>Load Lazy2</button>
    </div> 
  `

#5 Watch Lazy Load

Now run the app with ng serve and browser to http://localhost:4200. After the app loads, open the browser’s developer tools. Then clear the network traffic, so we can see when the components are lazy-loaded.

When you click one of the buttons, notice that the associated component I displayed and the network traffic shows the component is lazy loaded.

Sample code for this tutorial is available on GitHub

https://github.com/vaishalitekale/lazyLoad-angular9

Happy Learning!!!!
Generating TypeScript Types From GraphQL Schemas
Tags: javascript, typescript, web, graphql
Published: 2020-06-12 07:48:56

---
title: Generating TypeScript Types From GraphQL Schemas
published: true
date: 2020-06-12 06:44:27 UTC
tags: javascript,typescript,web,graphql
canonical_url: https://www.aaron-powell.com/posts/2020-06-12-generating-typescript-types-from-graphql-schemas/
---

Last week I did a live stream [on creating a web app with React, TypeScript and GraphQL](https://dev.to/azure/building-an-azure-static-web-app-with-graphql-59pe) and there was a question that popped up on whether or not you could generate the TypeScript types from the GraphQL schema, as I was creating them by hand.

Today, I did a last-minute stream in which I showed how you could do it using [GraphQL Code Generator](https://graphql-code-generator.com/). It was really simple to integrate and what's more, I found a problem in the types I had written by hand relative to the GraphQL schema, so it's a win-win. I even showed off how the [pull request feature](https://docs.microsoft.com/azure/static-web-apps/review-publish-pull-requests?WT.mc_id=devto-blog-aapowell) of [Static Web Apps](https://docs.microsoft.com/azure/static-web-apps/?WT.mc_id=devto-blog-aapowell) works.

{% youtube 9t-pLcZEmoE %}
Tracking global variables in Ruby with #trace_var
Tags: ruby, rails, debugging
Published: 2020-06-12 06:43:50

An not-so-well-known feature of Ruby is `#trace_var`, which allows to listen to changes in a variable and execute a callback.

```ruby
$counter = 0

trace_var :$counter do |number|
	puts "the counter is on #{number}"
end

10.times { $counter +=  1 }

#=> the counter is on 1
#=> the counter is on 2
#=> the counter is on 3
# ...
```

The concept of tracing changes in a variable is interesting - Different objects can listen to these changes, and coordinate their work without stepping in each other's toes. Let's build a simplified Fizz! and Buzz! yellers using `#trace_var`

```ruby
class FizzBuzzer
  def initialize(*predecessors)
    trace_var :$counter, ->(number) do
      yell if yelling_condition
    end
  end

end

class Fizz < FizzBuzzer
  def yell
    puts "Fizz!"
  end

  private

  def yelling_condition
    $counter % 3 == 0
  end

end

class Buzz < FizzBuzzer
  def yell
    puts "Buzz!"
  end

  private

  def yelling_condition
    $counter % 5 == 0
  end

end

class NoFizzBuzz < FizzBuzzer
  def yell
    puts "#{$counter}"
  end

  private

  def yelling_condition
    $counter % 3 != 0 && $counter % 5 != 0
  end

end

$counter = 0

fizz = Fizz.new
buzz = Buzz.new
no_fizz_buzz = NoFizzBuzz.new

15.times { $counter += 1 }
```

While the idea of listening to global variables to drive business  logic does not seem sound for production code, you can certainly use `#trace_var` during debugging to see what could be messing with global variables.

```ruby
trace_var :$some_global_variable do |value|
  puts "$some_global_variable = #{value}"
  puts caller
end
```

But if you are certainly in need of tracing variables and set callbacks in depth, Ruby takes this concept further with its TracePoint API.
Terminate Unused EC2 Instances with Python!
Published: 2020-06-11 22:11:42

---
title: Terminate Unused EC2 Instances with Python!
published: true
date: 
tags: 
canonical_url: https://relay.sh/blog/ec2-reaper/README/
---

# Automatically terminate EC2 instances with configurable lifetimes

This workflow looks at all of the EC2 instances in a given account and region and selects a subset of those to terminate. The termination criteria are:

- Not tagged with a termination date or lifetime after 4 minutes
- The `termination_date` or `lifetime` tags are present but cannot be parsed
- The `termination_date` or `lifetime` tags indicate that the instance hasexpired

An instance may be configured to never terminate if its `lifetime` tag has thespecial value `indefinite`.

## Prerequisites

Before you run this workflow, you will need the following:

- An AWS account.
- An AWS IAM user with permissions to list and terminate EC2 instances (if notrun in dry run mode).
- One or more running EC2 instances that are configured to use the`termination_date` or `lifetime` tags.

## Run the workflow

Follow these steps to run the workflow:

1. 

Add your AWS credentials as secrets:

  1. Click **Edit** > **Secrets**.
  2. Click **Define new secret** and use the following values:
  3. **KEY** : `aws.accessKeyID`
  4. **VALUE** : Enter your AWS access key id associated with the account
  5. **KEY** : `aws.secretAccessKey`
  6. **VALUE** : Enter your AWS secret access key associated with the account
2. Click **Run workflow** and wait for the workflow run page to appear.
3. **Warning:** If you run the workflow with the `dryRun` parameter set to`false`, instances not in compliance with this workflow policy willimmediately be terminated.

## Automatically running on a schedule

Policy-driven workflows are best run on a recurring schedule. To set up aschedule trigger for this workflow:

1. Click **Edit** > **Triggers**.
2. 

Click **Define new trigger** and use the following values:

  - **Trigger type** : Schedule
  - **Trigger integration** : System
  - **Interval** : Intervals follow the [ISO 8601 repeatinginterval](https://en.wikipedia.org/wiki/ISO_8601#Repeating_intervals)format. To run this workflow every 5 minutes indefinitely from now on,enter: `R/2020-01-01T00:00:00Z/PT5M`. You can configure the interval at theend of this string to change the execution frequency.
3. Enter values for the parameter bindings that match your environment.
4. Click **Add trigger**.

Within the next 5 minutes, you should see the workflow run automatically for thefirst time.
How to implement notification system like DEV
Tags: discuss
Published: 2020-06-12 06:42:14

> I like the way notification system work in DEV but want to know how I can make notification system like that.

For web application ( in-app notification ) **NOT push notifications**

I know about [GetStream](https://getstream.io/get_started/) but it is too costly.
It is better if someone tell me how to implement our own notification system 

Thanks in advance.
The Ultimate Guide to TYPO3 Dashboard (Beginners to Advanced)
Published: 2020-06-12 06:38:14

In TYPO3 v10, Which backend feature do you most love? Yeah, the TYPO3 Dashboard. Here, I would like to write from beginning to advanced level on TYPO3 Dashboard for Editors, Administrators, Integrators, and Developers.

Dashboard in TYPO3, One of the most awaited and dream projects for a year. On the launching of TYPO3 v10, Dashboard is now built-in with the TYPO3 core. Basically, TYPO3 Dashboard will deliver backend users to know what's happening in the TYPO3 system.

As a TYPO3 lover, Are you excited to know about AtoZ about TYPO3 Dashboard? Like History, Guide for editors, Installation, Presets, Widgets, etc.,

In this guide you'll read
- History of TYPO3 Dashboard
- Interesting UI/UX Case Study on TYPO3 Dashboard
- Guide for TYPO3 Editors To Manage TYPO3 Dashboard
- Installation of TYPO3 Dashboard
- Step-by-step Guide of TYPO3 Dashboard Widget
- Create Your Simple Custom TYPO3 Dashboard Widgets
- How many types of Dashboard Widgets are available?
- Guide to Implement Custom Graph TYPO3 Dashboard Widget
- Top Available Widgets for TYPO3 Dashboard

Read complete blog at - https://t3terminal.com/blog/typo3-dashboard/
Bender
Tags: codepen, beginners, html, css
Published: 2020-06-12 06:22:52

My entry to Free Code Camps responsive web design project, a tribute page to one of my favorite robots.

The page is painfully simple but it felt good just typing away. I may revisit this as I get better at CSS and do my man Bender some justice.
  
{% codepen https://codepen.io/notalexpareja/pen/MWKyQYm %}
emojigit npm package
Published: 2020-06-12 06:16:40

### emojigit

Built my first ever npm package 'emojigit'. It is a CLI tool which is used for adding emojis to commit messages. This cli tool will show users list of emojis that can be used on commit messages and then will ask some questions like branch name and git remote repo name and then code is pushed automatically to user's github repository after commit. It is built using nodejs and some libraries like:

* inquirer: For displaying prompt for asking questions to user
* meow: Its a CLI app helper
* node-fetch: For making network requests
* ora: For terminal spinner

Github Link: https://github.com/yatharth1706/emojigit

npm package link: https://www.npmjs.com/package/emojigit

* Within 2 days this package has been downloaded by users 205 times.

I request all of you to once use this package for adding emojis to commit messages for github repository. And also let me know what improvements I can do in this project.

Thank you.
Add #puppet tag
Tags: meta, puppet, puppetize, discuss
Published: 2020-06-12 06:08:13

---
title: Add #puppet tag
published: true
description: 
tags: meta,puppet,puppetize,discuss
cover_image: https://www.camptocamp.com/wp-content/uploads/xformations_puppet1-720x400.png.pagespeed.ic.UU2oY1Zlj8.webp
---

It would be great to attract more DevOps-related content to dev.to. With a few other people, I've started blogging about Puppet and would really appreciate if it could become an official tag!
Generate PDF with Graph in Laravel using Laravel Snappy
Tags: laravel, javascript, pdf, html
Published: 2020-06-12 06:08:10

Laravel Snappy is a library that uses Wkhtmltopdf to convert HTML to PDF. generate pdf with graph in laravel using snappy package.

It Runs JAVASCRIPT that makes it better than any other package. But it isn’t very awesome, there are two main problems with it.

1- It can only run old javascript (ES5).
2- It doesn’t accept animation at all.

And this is the hardest problem (Most of new Charts Libraries using animation ). So we are going to use Google Charts V1.1.

It generates SVG Chars with no animation and at the same time, it’s vectorized.

{% youtube Phl26OHMs-E %}

> [Generate PDF with Graph](https://www.youtube.com/watch?v=Phl26OHMs-E "Generate PDF with Graph")
Slide Down Menu on Scroll
Tags: html, css, javascript
Published: 2020-06-12 05:59:55

Ever wondered how to make a menu that appears as soon as you scrolled a bit?
Today we are going to create one like that. It will slide in from the top, the moment we scroll.
And hide once we scrolled back to the top.

## HTML Structure

```html
<div id="navbar">
  <a href="https://daily-dev-tips.com/" target="_blank">Blog</a>
  <a href="https://twitter.com/DailyDevTips1" target="_blank">Twitter</a>
  <a href="#" target="_blank">Facebook</a>
</div>

<div class="content">
  <h1>Please scroll down to see the menu</h1>

  A lot of content here...
</div>
```

## CSS Structure

As for the menu we use the following `CSS`

```css
#navbar {
  background-color: #3f3f37;
  position: fixed;
  top: -50px;
  width: 100%;
  display: flex;
  transition: top 0.3s;
  justify-content: space-around;
}
#navbar a {
  display: block;
  color: #878472;
  text-align: center;
  padding: 15px;
  text-decoration: none;
}
#navbar a:hover {
  background-color: #878472;
  color: #3f3f37;
}
```

We give the navbar a `position: fixed` so it will stay on the top; But start from a negative 50 pixels. This will make it hidden at first.
The animation will happen because of `transition: top 0.3s;`.

Then we style the links inside, but nothing fancy going on there.

## JavaScript magic

As for the true magic, that comes down to `JavaScript`.

```js
var navbar = document.getElementById('navbar');
window.onscroll = function() {
  if (document.body.scrollTop > 25 || document.documentElement.scrollTop > 25) {
    navbar.style.top = '0';
  } else {
    navbar.style.top = '-50px';
  }
};
```

We first define our navbar element.
Then we start a scroll listener and check if we scrolled more than 25 pixels.
If yes, we set the top of our navbar to 0.
Else we will hide it again.

See it in action on this Codepen.

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

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

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on [Facebook](https://www.facebook.com/DailyDevTipsBlog) or [Twitter](https://twitter.com/DailyDevTips1)