teleren/devto huggingface dataset:
How to connect Arduino UNO Wifi Rev.2 to WiFi
Tags: iot, arduino, tutorial
Published: 2019-05-21 17:08:44

---
title: How to connect Arduino UNO Wifi Rev.2 to WiFi
published: true
description: How to avoid frustration during the first 5 minutes with Arduino UNO Wifi Rev.2
tags: IoT, Arduino, tutorial
cover_image: https://thepracticaldev.s3.amazonaws.com/i/3okyhw6bnsoulvlxdmh5.jpg
---


# Installation

When you connect the board for the first time to the USB port, the IDE should detect it and install the required drivers.

When you have the drivers installed, make sure that you choose the proper type of Arduino.

You should select the following settings in the Tools window.

![](https://thepracticaldev.s3.amazonaws.com/i/6nemyvi2mfqcaw85d9pv.png)

Now, you should go to the Tools -> Manage libraries window and install the WiFiNINA library:

![](https://thepracticaldev.s3.amazonaws.com/i/5vo52y7lb2khupb4zl1v.png)

# Connecting to WiFi

Now, you are ready to copy the example code from https://www.arduino.cc/en/Tutorial/WiFiNINAWiFiPing

Before you run it, click the arrow button in the top right corner and choose the "New Tab" option. 

We need to create an arduino_secrets.h file which contains the following code:

```
#define SECRET_SSID "YOUR_NETWORK_SSID"
#define SECRET_PASS "YOUR_NETWORK_PASSWORD"
```

Save the file and return to the file which contains the code copied from the example.

Make sure that your Arduino is connected to the USB port and click the Upload button.

# Testing

Click the Tools menu and open the "Serial monitor" window.
You should see something like this:


![](https://thepracticaldev.s3.amazonaws.com/i/4va23f7p8ybssdp5op97.png)



If you see a similar result, it means that everything works fine.
Now, you can start removing the redundant code from the example and adding your code.

Just make sure to keep this part of the setup and your arduino_secrets.h file:

```
#include "arduino_secrets.h" 
char ssid[] = SECRET_SSID;
char pass[] = SECRET_PASS;
int status = WL_IDLE_STATUS;

void setup() {
  while ( status != WL_CONNECTED) {
    status = WiFi.begin(ssid, pass);
    delay(5000);
  }

# your code here
}
```
Mocking GraphQL Queries in React & Apollo (Video)
Tags: react, graphql, testing
Published: 2019-05-21 17:00:20

All about how to mock your GraphQL queries for tests. It can be done using static mocks or dynamic (auto) mocks. Source code available here: [https://github.com/leighhalliday/apollo-generating-types](https://github.com/leighhalliday/apollo-generating-types)

## Using Static Mocks

{% youtube ccDpUt9ipxo %}

## Using Dynamic / Auto Mocks

{% youtube FKA5iNYpd_8 %}
Resource
Published: 2019-05-21 16:53:44

Hi all,
I'm a newbie in Dart programming. I have a stupid question, sorry for this....
I've read that package containing class Resource, was changed with Dart 1.14.0. How it was replaced, I actually have 2.2.0? Moreover I am looking for a template for Web Application using Dart, could you please suggest me some repository? Thank you to of all you. 
Valentina
README.md fix typo + English syntax 
Tags: help
Published: 2019-05-21 15:57:17

---
title: README.md fix typo + English syntax 
published: true
tags: help
---

Hi !

Today I've published a GitHub repository, and because I must improve my English and because it's not my first language, I need any help ! If you are English fluent or if you are a native English writer, would you like [to check this README.md](https://github.com/Drozerah/es6-babel-node-starter/tree/master) and give any feedback in order to fix or improve it ? Thank you !

Drozerah from France
Codenarc IntelliJ Plugin Updated
Tags: groovy, grails, ide
Published: 2019-05-21 15:52:42

[Codenarc](http://codenarc.sourceforge.net/) is a static code analysis tool for Groovy. It's been around for quite a while but one feature it lacked was the ability to see the rule violations right inside of IntelliJ.

Luckily one of my co-workers saw that Daniel Demus recently updated the IntelliJ plugin that was originally created by Cédric Champeau.

An example of a rule violation right inside IntelliJ:
![](https://thepracticaldev.s3.amazonaws.com/i/lxj2vscqn3wujw0grfqj.png)

You can get the plugin [here](https://plugins.jetbrains.com/plugin/12106-codenarc-updated) and check out the code or file a bug on the [Github project](https://github.com/demus-nine/CodeNarc-Updated)  

One caveat is the plugin currently does not automatically import your `codenarc.groovy|xml` rule files - you have to enable rules manually in the inspection settings dialog. Though there is a [feature request](https://github.com/demus-nine/CodeNarc-Updated/issues/2) open to do just that.
Generating Swagger Example Dynamic Request Payload with Swashbuckle
Tags: swashbuckle, aspnetcore
Published: 2019-05-21 16:47:49

---
title: Generating Swagger Example Dynamic Request Payload with Swashbuckle
published: true
tags: swashbuckle,aspnetcore
canonical_url: https://medium.com/@joni2nja/generating-swagger-example-dynamic-request-payload-with-swashbuckle-77c09127392c
---

This post originally appeared on [Medium](https://medium.com/@joni2nja/generating-swagger-example-dynamic-request-payload-with-swashbuckle-77c09127392c)

---

_New to Swashbuckle? See this official_ [_“Get started with Swashbuckle and ASP.NET Core.”_](https://docs.microsoft.com/en-us/aspnet/core/tutorials/getting-started-with-swashbuckle?view=aspnetcore-2.2&tabs=visual-studio)

We can generate Swagger example requests with Swashbuckle, see [this post](https://mattfrear.com/2016/01/25/generating-swagger-example-requests-with-swashbuckle/).

Let’s say we have the following endpoint:

![](https://cdn-images-1.medium.com/max/1024/1*W7ZxtmoM5Kz4EdzlcK8BYg.png)

Ignore the weird implementation, it just a sample. Focus on the method signature.

And here is the Swagger UI page:

![](https://cdn-images-1.medium.com/max/1024/1*ugI0zzrOp2_vJprrHa-IXQ.png)

_Note that this post is using_ [_Swashbuckle.AspNetCore version 3.0_](https://github.com/domaindrivendev/Swashbuckle.AspNetCore/tree/v3.0.0)_._

Now suppose we have no choice but to make it accepting dynamic payload — perhaps due to requirement changes from the client. So we change the `PostThorRequest request` to `Jobject request` like so:

![](https://cdn-images-1.medium.com/max/1024/1*XWlexTROAKpC6tHKlTJLJw.png)

Now when we run it…

![](https://cdn-images-1.medium.com/max/1024/1*SaUP72Y12b9WItTqs8_dhg.png)

Uh oh…See that, the Example Value is gone!

How to fix this?

Changing the first parameter of SwaggerRequestExample type to Jobject seems to fix it.

![](https://cdn-images-1.medium.com/max/1024/1*oKeMWoRFqY5AWv7kffX7tg.png)

and…

![](https://cdn-images-1.medium.com/max/1024/1*e_4-GT5LFeMNIrDkTg8P9w.png)

Voila! It’s back!

Note that this might be just one way of the possible solutions that work. While it does work, personally, I don’t recommend this kind of dynamic request approach for public facing APIs.
DYK your website can get a dark mode toggled by your operating system?
Tags: css, mediaquery, webdev, javascript
Published: 2019-05-21 15:33:01

---
title: DYK your website can get a dark mode toggled by your operating system?
published: true
description: Introducing you to the new `prefers-color-scheme` CSS media query that lets your websites react/be designed according to the system setting.
tags: css, media query, webdev, js
---

Your website can have a light and dark mode that is automatically toggled by your operation system (OS) or browser.

## Making your website dark

Here is the trick: You can use the new [`prefers-color-scheme`](
https://developer.mozilla.org/docs/Web/CSS/@media/prefers-color-scheme) media query feature, specified [in the Media Queries Level 5](https://drafts.csswg.org/mediaqueries-5/#descdef-media-prefers-color-scheme).

You simply include a CSS like this:
```css
@media (prefers-color-scheme: dark) {
  body {
    background: #333;
    color: white;
  }
}
```

This would e.g. just do some simple CSS changes on the colors on your body.

## Via JavaScript?

You can also request the status of this property (just like any other media query) with [`.matchMedia()`](https://developer.mozilla.org/docs/Web/API/Window/matchMedia). This e.g. returns the status:
```js
> window.matchMedia("(prefers-color-scheme: dark)").matches
false
```

(In this example, the dark mode would be disabled.)

## There is a catch, is not there?

Yes, as with many good things, there are some restrictions here…

This feature [is only supported](https://caniuse.com/#feat=prefers-color-scheme) by Safari 12.1 and Firefox 67, but I guess browser support will grow, as it is standardized.

## Tips

* There is a nice blog article by _Andy Clarke_ about [how to design/adjust your website properly](https://stuffandnonsense.co.uk/blog/redesigning-your-product-and-website-for-dark-mode) for that dark mode.
* For the just recently released Firefox 67, I've created an [add-on called **“Dark Website Forcer”**](https://addons.mozilla.org/de/firefox/addon/dark-mode-website-switcher/?src=external-devto) that you can use to toggle that setting directly in your browser.
  Note it has some restrictions on what it can do (see the add-on description), and feel free to urge [Mozilla for a better API](https://bugzilla.mozilla.org/show_bug.cgi?id=1547818).
  Of course [it's open-source](https://github.com/rugk/website-dark-mode-switcher).
What was the first interesting program that you remember writing?
Tags: code, discuss
Published: 2019-05-21 15:27:56

---
title: What was the first interesting program that you remember writing?
published: true
description: I'm Reading this book called "Coders at Work" where the author asks this question to the developers/coders he's interviewing. *What was the first interesting program that you remember writing?*
tags: #code #discussion
---
I'm Reading this book called "Coders at Work" where the author asks this question to the developers/coders he's interviewing. *What was the first interesting program that you remember writing?* I'm very interested in knowing what's the first interesting program the DEV community wrote. Let me know in the comments? 🤔
RedGL Release Master_V5.0
Tags: webgl, redgl, javascript, gltf
Published: 2019-05-21 15:20:13

RedGL Release Master_V5.0
RedGL is Webgl Project

Release Note : https://github.com/redcamel/RedGL2/releases/tag/Master_V5.0
Github : https://github.com/redcamel/RedGL2 
Example : https://redcamel.github.io/RedGL2/example/ 
Document : https://redcamel.github.io/RedGL2/redDoc/ 

![](https://thepracticaldev.s3.amazonaws.com/i/rt4dman0898v1q82ay3g.png)
rubocop-yayoi version 0.1.0リリース
Tags: ruby, rubygems, imas, rubocop
Published: 2019-05-21 15:13:18

---
title: rubocop-yayoi version 0.1.0リリース
published: true
tags: ruby,rubygems,imas,rubocop
---

少し前に `rubocop-yayoi` というgemを出しました。

{% link https://dev.to/yutagoto/rubocop-yayoi-45n6 %}

改良したものをリリースしました！

## 出来上がったもの

[https://rubygems.org/gems/rubocop-yayoi](https://rubygems.org/gems/rubocop-yayoi)

{% github YutaGoto/rubocop-yayoi %}

使い方はGitHub repositoryを見るか、上にある`dev.to`の記事を見てください。

## 更新した点

### Waning Messages を表示させなくしました。

![rubocop-yayoi](https://thepracticaldev.s3.amazonaws.com/i/5k1o7sg52d7qizhkmph6.png)

`rubocop-performance` 以外の定数に再代入するwaningが消えました！

これで画面いっぱいにwarningが表示されることがなくなりました。

これからまた、徐々にcopの翻訳を増やしていきます！

気が向いたら使ってやってください。
GraphQL support on the Postman Canary channel
Tags: postman, graphql, api
Published: 2019-05-21 14:50:20

---
title: GraphQL support on the Postman Canary channel
published: true
description: GraphQL support now on the Postman Canary channel
tags: postman,graphql,api
---

Postman has added GraphQL support to the latest Canary channel build, this is still in development but is available for you to use now.

Check out all the details and how to download the Canary version of the application here:

https://community.getpostman.com/t/graphql-support-in-postman-available-for-early-access-on-canary-channel/5524

Feedback from the community is vital to help improve and enhance this feature within the Postman platform.
Alpha Network architecture on the Radix ledger
Tags: blockchain, dlt, java, javascript
Published: 2019-05-21 14:32:51

---
title: Alpha Network architecture on the Radix ledger
published: true
description: 
tags: #blockchain #dlt #java #javascript
---

# Introduction

The current Radix Alpha Network helps you to:

-store wealth, 
-facilitate monetary transactions or transfer value, and
-record immutable data like messages, hashes or meta-data.  

Each node in the Radix network exposes a [JSON-RPC](https://www.radixdlt.com/post/json-rpc-vs-rest) interface to interact with the application layer using client libraries. Radix has open sourced these client libraries to easily build decentralized applications in your preferred programming language, starting with Java, Kotlin and JavaScript.

# Technical Architecture

# Abstractions by Layer

![alt text](https://blobscdn.gitbook.com/v0/b/gitbook-28427.appspot.com/o/assets%2F-LMPbV3hGbTEzGtYlH-m%2F-LPGsS5rY6eVwbpSjY6V%2F-LPDMXdaLgpOLS-0OoNx%2FRadix%20Tech%20Stack%20(1).png?alt=media&token=d8421af8-b01b-4758-a25f-b7ccf7829c61 "Abstractions by layer")

# Codebases by Layer

![alt text](https://blobscdn.gitbook.com/v0/b/gitbook-28427.appspot.com/o/assets%2F-LMPbV3hGbTEzGtYlH-m%2F-LPGsS5rY6eVwbpSjY6V%2F-LPDMfMCJNNrQLIW1g9T%2FRadix%20Tech%20Stack%20Codebases.jpg?alt=media&token=0d9d9c13-9086-45d8-a053-6583568a006b "Codebases by Layer")

# Atom Model

![alt text](https://blobscdn.gitbook.com/v0/b/gitbook-28427.appspot.com/o/assets%2F-LMPbV3hGbTEzGtYlH-m%2F-LPlT6UdbpQ-PYVHfibB%2F-LPlTJ5PDbwiCngQtD1b%2FScreen%20Shot%202018-10-26%20at%206.43.02%20PM.png?alt=media&token=97f7075d-7f27-4e29-b15c-1a0df0efdcd1 "Atom Model")

If this is your first time building decentralized applications on the Radix Alpha Network you can get started with our client libraries:

-[Java library](https://docs.radixdlt.com/alpha/develop/java-client-library-guide)
-[Kotlin library](https://docs.radixdlt.com/alpha/develop/kotlin-client-library-guide)
-[JavaScript library](https://docs.radixdlt.com/alpha/develop/javascript-client-library-guide/quick-start) 

# Join The Radix Community

[Telegram](https://t.me/radix_dlt) for general chat
[​Discord](https://discord.gg/7Q7HSZZ) for developers chat
[​Reddit](https://reddit.com/r/radix) for general discussion
[Forum](https://forum.radixdlt.com/) for technical discussion
​[Twitter](https://twitter.com/radixdlt) for announcements
[​Email](https://radixdlt.typeform.com/to/nyKvMV) newsletter for weekly updates
Mail to [hello@radixdlt.com](hello@radixdlt.com) for general enquiries
Client-side Vue.js for Node-less SPAs
Tags: vue, javascript, webdev, node
Published: 2019-05-21 14:30:52

This is the structure I'm using for my most recent project, [Perpetual Shred](https://www.perpetualshred.com/). It's fast, easy to use, and allows for the front-end to be hosted as a static site.

[Demo](https://client-side-vue.herokuapp.com "Client-Side Vue.js Demo")

[GitHub](https://github.com/justinwash/client-side-vue)

## Structure of the project:
#### client-side-vue/
* **index.html** - The entry-point for your Single Page App. Global dependencies via script tags (Vue, Vue-Router, Http-Vue-Loader, Axios) and a single #App element where the vue instance will be rendered.
* **index.js** - Where Vue.js, Vue-Router are instantiated, where you'll import and assign your services to the Vue instance.
* **index.css** - Global styles for your Single Page App.
* **index.php** - Trick Heroku into hosting a static site.

#### client-side-vue/dependencies/
* **vue.js** - Vue.js itself and all the built-in features that come with it.
* **vue-router.js** - The official router for Vue.js, allows you to navigate your Single Page App. 
* **http-vue-loader.js** - Client-side .vue component loader.
* **axios.js** - Promise based HTTP client for making ajax/http calls.

#### client-side-vue/services
* **store.service.js** - A (very, extremely) simple state-management service with only three methods: 
  * `get(key)` 
  * `set(key, value)`
  * `clear(key)`

## What's with the weird `Object.assignProperty` stuff in index.js?:
see [this great article](https://vuejsdevelopers.com/2017/04/22/vue-js-libraries-plugins/)
Securing a Webapp - Step 0: An Introduction
Tags: security, owasp, secureheaders
Published: 2019-05-21 13:57:53

---
title: Securing a Webapp - Step 0: An Introduction
published: true
description: Why I decided to write this series, and what it might contain
tags: security, owasp, secure headers
series: Securing A Website
cover_image: https://images.unsplash.com/photo-1531403009284-440f080d1e12?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80
canonical_url: https://rjj-software.co.uk/blog/securing-web-apps-pt0/
---

_The cover images for this post is by [Alvaro Reyes](https://unsplash.com/photos/qWwpHwip31M)_

I've had an idea for a series floating around in my head for a while

> baking security into a new website, as soon as a client approaches me

I even ended up [rubber ducking](https://en.m.wikipedia.org/wiki/Rubber_duck_debugging) this idea in a recent comment thread:

{% devcomment b1ed %}

Those who have been keeping up with my writing will know that I've written about this topic before, but always from a more theoretical view:

- [Three Steps For Increasing The Security of Your Webapps] (https://dev.to/dotnetcoreblog/comment/dev.to/dotnetcoreblog/three-steps-for-increasing-the-security-of-your-web-apps-3clg)
- [OWASP Who?](https://dev.to/dotnetcoreblog/owasp---who-jack)
- [Security for Your Webapps](https://dev.to/rjjsoftware/security-for-your-web-apps---and-why-its-important-1b66)

But in this series, I'll be taking you through the whole process. From no webapp all the way up to a webapp with security headers, with everything in between.

### But Why?

Aside from the fact that I do this for every webapp that I create, I've noticed that almost no one who talks about these things covers the middle step - which is the pain that you feel when the CSP still doesn't work, or when the marketing person wants to add an insecure feature to the site without checking with you first (which is the most likely thing).

Seriously, you'll probably spend the most time trying to figure out where all of your disperate JS and frames are loading in from, and will be scratching your head as to why these things are being loaded in. In that way, creating a CSP alone can help with performing a sort of spring clean on your application, but we'll get to that in a later post.

### What Can You Expect From This Series?

I'd say that you can expect practical advice for implementing recommended security headers into your web application, by example.

Exactly how you add these headers will differ, depending on which technology you're building your webapp with. So I won't spend much time on actually how to add them to your app (though most technologies offer a similar approach).

I'm going to be building a real app, for a real client of mine, and will document the process. I'll also link to a dev.to specific build of the app, as I'm building it, so that you can all see it being built up.

(I'll also provide the source code)

So stick around, watch this space, and you might learn a few things - hopefully.
Debug android 9 with mitmproxy instead of Charles
Tags: android, proxy
Published: 2019-05-21 13:54:28

I used **Charles**.
I decided to stop to use it because 

- linux version's UI is not good
- Not open source
- Not command line


# Installation

you can download tar file from https://mitmproxy.org/
unpack it you can see

- mitmdump
- mitmproxy
- mitmweb

You should move it to any location you want.

# Boot

```
mitmproxy
```

default 8080 port is used.

# Set up your android

## Connect your android and the mitmproxy

1. Open wifi setting screen for your android
2. Select your wifi connection setting
3. Tap pencil icon(edit button) 
4. Change proxy setting to `Manual`
5. input your computer's local IP address as `Proxy hostname`
6. input 8080 as `Proxy port`

Now you can open a browser and access any web site then you can see log on the mitmproxy.

## Certification for andorid applications

see also : https://docs.mitmproxy.org/stable/concepts-certificates/

Let you access http://mitm.it via any browser via mitmproxy.
you can install certification for each device.


If you device's android version is less than 9(Pie).
You are lucky you can see all of logs for each apps.


## Set up your android application for Pie
see also : https://stackoverflow.com/questions/55154263/do-not-use-proxy-on-android-9-pie

add xml resource file into `res/xml/network_security_config.xml`
```xml
<?xml version="1.0" encoding="utf-8"?>
<!-- SECURITY RISK -  This app's network data can now be intercepted!!! -->
<network-security-config>
    <base-config>
        <trust-anchors>
            <!-- Trust preinstalled CAs -->
            <certificates src="system" />
            <!-- Additionally trust user added CAs -->
            <certificates src="user" />
        </trust-anchors>
    </base-config>
</network-security-config>
```

Add an attributes into `<applicaiton>` tag in `AnroidManifest.xml`

```xml
    <application
...
        android:networkSecurityConfig="@xml/network_security_config"
```

Done!

## addional

- some android devices has a bug about wifi proxy.
- not only android 9 sometimes it is needed to add `network_security_config.xml`
Top 5 DEV Comments from the Past Week
Tags: bestofdev
Published: 2019-05-21 13:52:23

---
title: Top 5 DEV Comments from the Past Week
published: true
description: Highlighting some of the best DEV comments from the past week.
tags: bestofdev
cover_image: https://res.cloudinary.com/practicaldev/image/fetch/s--7VrAA2ln--/c_imagga_scale,f_auto,fl_progressive,h_420,q_auto,w_1000/https://thepracticaldev.s3.amazonaws.com/i/qmb5wkoeywj06pd7p8ku.png
---

This is a weekly roundup of awesome DEV comments that you may have missed.  You are welcome and encouraged to boost posts and comments yourself using the **[#bestofdev](/t/bestofdev)** tag.

Want to **[Impress your colleagues with these NPM tricks](https://dev.to/borrellidev/impress-your-colleagues-with-these-npm-tricks-3fcb)**?  @omrilotan adds another tip:
{% devcomment anmm %}

**[What advice would you give someone looking to use their keyboard more and their mouse less?](https://dev.to/ben/what-advice-would-you-give-someone-looking-to-use-their-keyboard-more-and-their-mouse-less-1lea)**  @giant995 offers some advice for those of us looking to keep our hands on the keyboard:
{% devcomment aphn %}

Replying to **[Things I Wish I Knew Before I Started Web Development](https://dev.to/flippedcoding/things-i-wish-i-knew-before-i-started-web-development-1eb8)**, @workingwebsites plucks out and reinforces an especially poignant line:
{% devcomment ap03 %}

Commenting on **[Moving Past Tutorials: 8 Tips for Problem Solving](https://dev.to/aspittel/moving-past-tutorials-8-tips-for-problem-solving-3e0p)**, @laurieontech adds a great tip about forcing yourself to engage with the material at a deeper level:
{% devcomment ankf %}

@mercier_remi adds another "lie" to **[The lies and lack of self respect that lead to burnout](https://dev.to/ronsoak/the-lies-and-lack-of-self-respect-that-lead-to-burnout-5007)**:
{% devcomment b156 %}

See you next week for more great comments ✌