teleren/devto huggingface dataset:
Angular Runtime HTML Debugging (made simple)
Tags: angular, typescript
Published: 2020-04-03 22:31:57

The Angular Runtime Rendering Engine can now be interrupted to see values before rendering decisions are made. For example, using the code below, we are able to break into a [*Ngfor](https://angular.io/api/common/NgForOf) loop, before the actual rendering happens!

This particular example shows 3 filters when Angular hits the appDebug directive.   The first two filters below are looking into a variable name *setting* with two properites, *displayName and values*. Filter3 is passing in the HTMLInputElement itself. Finally a *condition* filter sets a very specific condition before breaking.

```HTML
	appDebug
	[filter]="setting.displayName"
	[filter2]="setting.values"
	[filter3]="checkbox"
	[condition]="setting.displayName === 'Run to completion'"
```

**The Angular Debug Directive**

```typescript
import { Directive, Input, OnInit } from "@angular/core";

@Directive({
   selector: "[appDebug]"
})
export class DebugDirective implements OnInit {
   @Input("filter") filter: any;
   @Input("filter2") filter2: any;
   @Input("filter3") filter3: any;
   @Input("condition") breakPointHit: boolean = false;
   ngOnInit() {
      if (this.breakPointHit) {
         debugger;
      }
   }
}
```
**How to use it in HTML**

```html
 <input
	#checkbox        
	appDebug   
	[filter]="setting.displayName"
	[filter2]="setting.values"
	[filter3]="checkbox"
	[condition]="setting.displayName === 'Run to completion'"
	(change)="onCheckBoxChanged(checkbox, setting)"
	[(checked)]="setting.values[0]"
	data-testid="checkbox"
	type="checkbox"
/>
```
This directive allows us to pass values from HTML to our debugging component. It has three filters which allow you to view the content once the breakpoint is hit. The breakpoint, is set by [condition]; which allows to to break on the Nth iteration. 

Nice; instant debugging via an HTML directive!

JWP2020
What’s your alternative solution? Challenge #20
Tags: challenge, javascript, codenewbie, learntocode
Published: 2020-04-13 21:57:39

# About this series

This is series of daily JavaScript coding challenges... for both beginners and advanced users.

Each day I’m gone present you a very simple coding challenge, together with the solution. The solution is intentionally written in a didactic way using classic JavaScript syntax in order to be accessible to coders of all levels.

Solutions are designed with increase level of complexity.

## Today’s coding challenge

```
Print the first 100 prime numbers

```

(scroll down for solution)

## Code newbies

If you are a code newbie, try to work on the solution on your own. After you finish it, or if you need help, please consult the provided solution.

## Advanced developers

Please provide alternative solutions in the comments below. 

You can solve it using functional concepts or solve it using a different algorithm... or just solve it using the latest ES innovations.

By providing a new solution you can show code newbies different ways to solve the same problem.

## Solution

```javascript
// Solution for challenge18

printPrimes(100);

// Function prints the first nPrimes numbers
function printPrimes(nPrimes)
{
    var n = 0;
    var i = 2;
    
    while(n < nPrimes)
    {
        if (isPrime(i))
        {
            println(n, " --> ", i);
            n++;
        }
        
        i++;
    }
}


// Returns true if a number is prime
function isPrime(n)
{
    if (n < 2)
        return false;
        
    if (n == 2)
        return true;
    
    var maxDiv = Math.sqrt(n);
    
    for(var i = 2; i <= maxDiv; i++)
    {
        if (n % i == 0)
        {
            return false;
        }
    }
    
    return true;
}

```


To quickly verify this solution, copy the code above in this coding [editor](https://codeguppy.com/code.html) and press "Run".

> Note: The solution was originally designed for [codeguppy.com](https://codeguppy.com) environment, and therefore is making use of `println`. This is the almost equivalent of `console.log` in other environments. Please feel free to use your preferred coding playground / environment when implementing your solution.
React + Jitsi + Serverless + Twilio SendGrid
Tags: twiliohackathon, react, jitsi, serverless
Published: 2020-04-13 21:53:33

I've been using jitsi meet a lot lately to get in touch with people from a distance, so I thought I could automate my workflow and share it with others as a submission to the Twilio + DEV hackathon

### 📜 Summary

It's a webapp that allows visitors to create video conference meetings and invite participants through answering a simple form that emails everyone on their behalf *(desktop browser only for now)*

The meeting room name is picked for you using a unique id to reduce collisions since meeting links on jitsi servers are public

Participants can click on the link in their email and join the video conference right on the website

> ℹ Emails are sent using [SendGrid](https://sendgrid.com) through serverless functions and the video conference runs on an embedded jitsi meet client through [react-jutsu](https://github.com/this-fifo/jutsu)

A live demo is available and deployed to zeit here: [https://rendezvous.now.sh](https://rendezvous.now.sh)

The code for it is available on GitHub 👇
{% github this-fifo/rendezvous %}

### Additional Resources/Info

- Video Conference through [Jitsi](https://github.com/jitsi/jitsi-meet/blob/master/doc/api.md) 
- Emails through [SendGrid](https://sendgrid.com/) 📧
- Base css from [MVP.css](https://github.com/andybrewer/mvp/) ✨ *(with a few modifications)*
- All potential [hCaptcha](https://www.hcaptcha.com/) earnings are donated to Wikimedia foundation 🤗

Hope someone finds this useful or at least use it as a base for their own project
Job Search Week 8
Tags: makers
Published: 2020-04-13 21:25:58

I spent a lot of time this week doing cover letters and applying for different jobs using a couple of different job sites. I also did a review this week so improving slow and steady.

Day 1

On Monday I started making a layout of the Makers curriculum and all the project I did during Makers. The main reason for this is I wanted potential employers that don't know what Makers is to see the work I've done and the experience I've gained. I think it'll be helpful in my job search because where I lack a degree I more than makeup in coding experience and projects.

Day 2

On Tuesday I decided to do something similar to Monday and make a projects portfolio to show off the things I've been working on since Makers. This also shows the new skills I've learnt and other things I've been practising.

Day 3

So on Wednesday, I had a review it was a spell checker app that would highlight misspelt words. I was happy because as always I learned something new in this instance I learned it's better to postpone big decisions as long as possible. In my case, I started considering using a gem which I should not have considered yet. I now know I should have used a lot more sample data and worked through it most simply until I'd have to use a gem. But now I know for my next review.

Day 4

I spent Thursday tidying up some more repositories mainly the oyster card and takeaway repository. I also did quite a lot of job applications using total jobs which I was happy to get done.

Day 5

Friday I spent a lot of time on otta doing job applications and cover letters. Honestly, I like otta as a job site I think it had a nicer layout that was easier to use. I was also happier with my cover letters by the time I had done all those cover letters as they say practice makes perfect.

Summary

This week when well I think I'm now better prepared for doing external applications. I also got another review under my belt and I plan to do another one ASAP. I got a lot of applications done this week too which I was very happy to get done because I feel a lot more confident doing cover letters now.
Real-time stock market price alerts using react and express📈
Tags: react, javascript, node, feedback
Published: 2020-04-13 21:22:25

Coronavirus induced curfews allow one to venture into some new areas.

The goal with this one was to have a simple in-browser tool that allows tracking various stocks and securities in real-time, or very close to real-time, by setting alerts.
Alerts can show a notification and play a sound upon activation, even when the relevant tab is not active.

Frontend is written with react, and the backend is written with express and implements a simple REST API

https://market-alerts.com
Inheritance in Dart: Part 4
Tags: oop, dart, beginners, webdev
Published: 2020-04-13 20:46:15

This is part 4 of the object oriented programming series. We started in Part 1 with Classes and Object, then over to Part 2 with Abstraction, then the previous article with Polymorphism. This section will be super short as we have implemented inheritance indirectly in the previous articles. We will be going over the example and will wrap up from there. 

Inheritance. What is Inheritance in programming? Inheritance is the process of inheriting or receiving features or methods from an existing class. In Abstraction we used inheritance, will we were extending the existing class and "inherited" some of the parent's class properties and methods. 

An example of Inheritance: 

```dart
class Car {
  void drive(){
    print("driving");
   }
}

class Honda extends Car{
  
}

  void main(){
   Honda car1 = new Honda();
  car1.drive();
  }

```

As you see in the example above; We create a new instance of the "Car" class(parent class). Next, we created a subclass(child class), with the class name of "Honda" and extend the "Car" class. Extending the "Car" class allows "Honda" to receive all the properties and features from the parent class. **SIDE NOTE:** Unlike polymorphism, inheritance does not change the behavior or functionality of the methods that the class inherits or receives.

Hope you enjoyed this article all about inheritance, until the next one...Stay Tuned..
Tutorial: Build an app that receives an email when ERC-20 transactions occurs
Tags: opensource, blockchain, javascript
Published: 2020-04-13 20:53:42

In this tutorial we'll cover how to recreate an ERC-20 to Email application using the MESG Framework, which will run and manage the application for you. Allowing the MESG Engine to run your application, it will also enable decentralization without any additional steps.

## What do we want to build?
We want to listen to all transfer events from a specific smart contract and send an email for each one of them.

In order to do that, we will split this tutorial into two parts to create our application.

1. The triggering of the process (the ERC-20 event we want to listen to)
2. The task to execute (the email we want to send)

## How do we build this?

We will use the MESG Orchestrator and will create a process file.

### ERC-20 Transfer trigger
Let's create our process file.

```yaml
key: erc20-notifications
steps:
  - type: trigger
    instance:
      src: https://github.com/mesg-foundation/service-ethereum-erc20
      env:
        - PROVIDER_ENDPOINT=$(env:PROVIDER_ENDPOINT)
        - CONTRACT_ADDRESS=0xdac17f958d2ee523a2206206994597c13d831ec7
    eventKey: transfer
```

Here, we create our first step of our process that is a trigger. We listen for all the events transfer of the service that is running with the environment variables:

PROVIDER_ENDPOINT : The address of the Ethereum node that will be injected during the compilation.|

CONTRACT_ADDRESS : The address of the ERC-20 to watch (USDT) 0xdac17f958d2ee523a2206206994597c13d831ec7

### Send the email
Let's add the next task that will send an email each time our event is triggered. We will use the SendGrid service to send an email.

```
key: erc20-notifications
steps:
  ...
  - type: task
    instance:
      src: https://github.com/mesg-foundation/service-email-sendgrid
      env:
        - SENDGRID_API_KEY=$(env:SENDGRID_API_KEY)
    taskKey: send
    inputs:
      from: "test@erc20notification.com"
      to: "__YOUR_EMAIL_HERE__"
      subject: "New ERC20 transfer"
      text:
        key: transactionHash
```

We just added another step of type task that will use the service configured with the environmental variable SENDGRID_API_KEY that will be set during the deployment.

From this service, the task send will be called with a specific set of inputs:

- from: A constant value for the sender of the email
- to: The email you want to use to receive your notification
- subject: A subject for your email
- text: The text of your email. 

The text input is an actual reference to the value transactionHash from our event. Every time a email will be sent, the value of the text will actually be the value of the transactionHash from the event.

[Follow the whole tutorial](https://blog.mesg.com/create-a-process-to-receive-an-email-when-an-erc20-transfer-occurs/?utm_source=devto&utm_medium=post&utm_campaign=tuto)
The Web is Accessible by Default, Stop Breaking It. 
Tags: a11y
Published: 2020-04-13 20:49:40

I recently came across the following website, [Mother Fucking Website](https://motherfuckingwebsite.com) (Warning: Contains Bad Language). The general thesis of this site, is that the web was designed, structured and standardised to be accessible, lightweight, and responsive by default. This got me thinking a little more about how I thought about the web, my responsibility as a web developer, and the best practices and processes I use in my current role as web developer.  

Despite knowing full well that a plain un-styled, un-scripted HTML website was of course fast and accessible, it challenged a paradigm I held as a developer, that it was my responsibility **to make** a website accessible, lightweight and responsive rather than to avoid making things inaccessible in the first place.

To truly be mindful of accessibility and develop first class accessible applications, websites and digital content, we need to challenge our way of thinking. We must develop with accessibility as one of our primary focuses. We should instead shift our thinking to how best to create new functionality, components or features **without breaking** the existing accessibility of the site. It's my belief that by adopting this new paradigm we can develop accessible websites with far more efficiency, and with far less accessibility issues. 

Not only will this provide a great deal of value to your development team, your organisation will immediately see the benefits with a more user friendly, SEO friendly and navigable website. 

So next time someone tells you to make things accessible, tell them that instead you don't intent to make it inaccessible in the first place.
Python Project Challenge
Tags: python, beginners
Published: 2020-04-13 20:43:35

Before I begin I just want to get this off my chest. I know how amazing python is as a first language but man is it discouraging. I have this list of apps or projects I would like to build but anyone who knew a programming language that was visual - by which I mean you could simply drag and drop widgets (GUI elements/objects) onto a form and design applications within seconds - before learning python knows that coding GUIs in python seems overbearing and feels completely unnecessary. Everytime I solve a problem and get that satisfying feeling it is short lived simply because whenever I want to show my work it doesn't really look impressive. I just don't see myself using python for side projects or for a career in general. No offence.  

As much as my discontent for python has affected me I thought to at least to have a go at a project and finally make up my mind about this language. I would like to believe I've achieved a certain level of skill but I'll never truly now unless I challenge myself. Not going to lie the syntax took a while for me to get used to especially because I kept switching back and forth between languages @javascript, so now the time has come to prove myself by indulging in a project. And the project I've decided to embark on is... drum roll please

![img](https://media.giphy.com/media/pVUxYuntLtVoA/giphy.gif)

**Wallpaper Automater!!!** I know the name is terrible but it's the most concise way of putting it that I could think of at the time of writing. I of course don't NEED to name this program but I am open to any suggestions in the comments.

Anyway, the whole idea behind this program is that it will

- Fetch stock images from a relevant API
- Use a timer to keep track of the date
- Change the wallpaper on my device daily

I mean the idea feels pretty simple. I should be capable of doing this right? The reason why I chose this project in particular is because I think it will help build my understanding of APIs, teach myself how to learn another python module by using the documentation and not a YouTube video, *in case the documentation is too complicated or I am just lazy YouTube is my safety net*, and the deciding factor is that it will not require a GUI because I was not in the mood for that :)

I intend to finish the project before the end of the week. [Here](https://github.com/Sbu-05-exe/Auto-paper) is a link to the repository for anyone who wishes to contribute or learn alongside myself.
Interesting videos I've found recently
Tags: watercooler
Published: 2020-04-13 20:37:29

Like most of us probably are I'm subscribe to quite a few developers on YouTube. Yesterday there was an interesting video that popped up and I've seen quite a few unique and/or helpful videos these past couple weeks.

<strong>Workouts:</strong> I've been doing <a href="https://www.youtube.com/user/yogawithadriene">Yoga With Adriene</a> but I also decided I felt like doing PiYo (a mix of pilates, yoga and a bit of zumba) and found a <a href="https://www.youtube.com/watch?v=ZvgSCDnx5ws&t=1894s">new instructor</a> online! It feels like I'm back at my college gym.

<strong>Career tips:</strong> I follow Brandy Morgan for all of her tips and quality vlogs. I always leave with some new tidbit of advice. Her <a href="https://www.youtube.com/watch?v=bwgmf5mifTU">most recent video</a> was about how to use social media to get freelance clients but a lot of the advice is also applicable to getting full-time jobs and networking in general. I love how she emphasizes that it's not a one-day thing, it's really taking time to make connections over time. 

<strong>Life advice:</strong> Amy Landino is also a youtuber I follow who has created an amazing life for herself by helping others create their dream lives. She focuses on time management, focus, finding your passion and motivation. We are all going through massive changes with the shut downs and shelter in place or lockdowns and she did <a href="https://www.youtube.com/watch?v=I1s7W1peuYA">a video</a> about navigating through massive changes.

<strong>Friendly advice:</strong> I also follow <a href="https://www.youtube.com/channel/UCh2_ulpQc_57Tcf49eSEmHA">Kalyn Nicholson</a> quite closely and she is definitely more of a niche life advice person. I am sure a huge part of her appeal to me is that she's the same age as me and is going through the "what do I want to do with my life and how do I get there" and it's like listening to a friend. 

<strong>Coding adventure:</strong> Today Joma Tech uploaded a <a href="https://www.youtube.com/watch?v=0KmUoTfGa34&t=28s">video</a> about how he coded an entire app on his phone. I know some people don't have access to laptops so I was interested to find out if there was a way to do it all on the phone. You can check out his video for more information but I decided it's something I wouldn't do. I don't even like doing posts on my phone.

<h4>Any videos or creators you'd like to share?</h4>
Pardus Kablosuz Erişim Noktası(Hotspot) Yapılandırması
Tags: hotspot, wifi, pardus, network
Published: 2020-04-13 20:20:12

Windows tarafında hotspot özelliği otomatik yapılıyorken Pardus henüz bize böyle bir seçenek sunmuyor. Bunun için hostapd servisini elle yapılandırmayı ve çalıştırmayı göstereceğim.
Hotspot kurulumu yapabilmek için cihazınızın ethernet kablosu ile internete bağlı olması gerekmektedir. Ayrıca cihazınızda bulunan wireless aygıtının hotspot modunu desteklemesi gerekmektedir. Bunu öğrenmek için;
<pre>
sudo apt install iw
sudo iw list
</pre>
komutlarını çalıştırdıktan sonra Supported interface modes'de AP görüyorsanız destekliyor demektir.

![](https://i.ibb.co/rMXrWMH/Screenshot-2020-04-13-22-14-00.png)

Desteklediğiniz öğrendikten sonra terminal ile hostapd uygulamasını indiriniz.
<pre>
sudo apt install hostapd
nano /etc/default/hostapd
</pre>
Programı kurduktan ve nano düzenleyicisi ile config dosyasını açtıktan sonra #DAEMON_CONF="" olan satırı DAEMON_CONF="/etc/hostapd/hostapd.conf" olarak değiştirmeniz gerekmektedir.
![](https://i.ibb.co/m01X3hN/Screenshot-2020-04-13-22-40-04.png)
"ip a" komutunu kullanarak ethernet ve wifi kartlarımızın sürücü adını öğrenmeniz gerekmektedir.(eth0, wlan0 vs.)
Öğrendikten sonra "nano /etc/hostapd/hostapd.conf" komutu ile config dosyası oluşturun ve aşağıdaki bilgileri kendinize göre düzenleyip kaydediniz.
<pre>
interface=<mark>wlp3s0</mark>
bridge=br0
driver=nl80211
country_code=<mark>TR</mark>
ssid=<mark>Pardus</mark>
hw_mode=g
channel=<mark>6</mark>
ieee80211n=1
wmm_enabled=1
wpa=2
wpa_passphrase=<mark>1234567890</mark>
wpa_key_mgmt=WPA-PSK
wpa_pairwise=TKIP
rsn_pairwise=CCMP
auth_algs=1
macaddr_acl=0
</pre>
Config dosyasını yapılandırdıktan sonra ağ köprüsü oluşturmanız gerekmektedir. Bunun için aşağıdaki komutları giriniz.
<pre>
sudo apt install bridge-utils
nano /etc/network/interfaces
</pre>
Aracı kurduktan ve config dosyasına girdikten sonra aşağıdaki bilgileri düzenleyip kaydediniz.
<pre>
source-directory /etc/network/interfaces.d

auto lo
iface lo inet loopback

allow-hotplug <mark>eth0</mark>
iface <mark>eth0</mark> inet manual

allow-hotplug <mark>wlan0</mark>
iface <mark>wlan0</mark> inet manual

auto lo <mark>br0</mark>
iface <mark>br0</mark> inet static
bridge_ports <mark>wlan0</mark> <mark>eth0</mark>
address <mark>192.168.1.2</mark>
network <mark>192.168.1.0</mark>
netmask <mark>255.255.255.0</mark>
gateway <mark>192.168.1.1</mark>
dns-nameservers <mark>192.168.1.1</mark>
</pre>
Düzenleme işlemi tamamlandıktan sonra sistemi yeniden başlatınız  ve aşağıdaki komutu yazarak servisi başlatınız.
<pre>
sudo systemctl enable hostapd.service
sudo systemctl start hostapd.service
</pre>
Servisin durumunu görmek istiyorsanız aşağıdaki komutu çalıştabilirsiniz.
<pre>
sudo systemctl status hostapd.service
</pre>
![](https://i.ibb.co/PZYNrYD/Screenshot-2020-04-13-23-05-51.png)
Servisi sonlandırıp devre dışı bırakmak için aşağıdaki komutları girebilirsiniz.

<pre>
sudo systemctl stop hostapd.service
sudo systemctl disable hostapd.service
</pre>