teleren/devto huggingface dataset:
Convert Keras models to TensorFlow.js
Tags: machinelearning, javascript
Published: 2019-08-26 09:48:08

If you developed ML applications using TensorFlow (Python) and want to move them to the web, you can easily do it with the TensorFlow js framework now. There is no need to retrain the models, as long as they don't use any custom layers, which is currently still not supported.

To start with the conversion, you have to load the model into python, for example like this:


```python
from tensorflow.keras.applications import resnet50

model = resnet50.ResNet50(include_top=True, weights='imagenet')
model.save('./ResNet50.h5')
```

After loading the model, save it including weights into an hdf5 file. [1]

For the conversion of the model, you have to install the tensorflowjs python package: ` pip install tensorflowjs`

Then you can convert the Keras model using the following command.


```bash
tensorflowjs_converter \
    --input_format=keras \
    --output_format=tfjs_layers_model \
    ./ResNet50.h5 \
    ./ResNet50
```

This command converts your model to a model.json file with the architecture configuration and multiple `.bin` files with the stored weights.


After the command finished, you can simply import the model into node with the following lines of code.

```javascript
const tf = require('@tensorflow/tfjs-node');

const ResNet50URI = `file:///${__dirname}/ResNet50/model.json`
const ResNet50 = await tf.loadLayersModel(ResNet50URI);
```

Or alternatively in the web:

```javascript
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@1.0.0/dist/tf.min.js"></script>

<script> 
    const ResNet50URI = `file:///${__dirname}/ResNet50/model.json`
    const ResNet50 = await tf.loadLayersModel(ResNet50URI);
</script>
```


Afterward, you can just use the `predict` function as usual to execute the model.


[1] P.S.
There is one thing you need to take care of when doing that. The python kernel has to be restarted every time you load the model because of the layer naming. This [GitHub issue](https://github.com/tensorflow/tfjs/issues/755#issuecomment-433022367) explains the problem well.
Additionally, some custom models build in TensorFlow (python) are not ready to be converted. You can only convert models with layers, initializers and operations implemented in TensorFlow js.


The results can be found here: 
[https://github.com/paulsp94/tfjs_resnet_imagenet/tree/master/ResNet50](https://github.com/paulsp94/tfjs_resnet_imagenet/tree/master/ResNet50)
I feel struggle to develop
Tags: discuss, beginners
Published: 2019-08-26 09:40:32

---
title: I feel struggle to develop
published: true
description: 
tags: #discuss #beginners
---

Hi coders,
I write again because I started developing in Python and even though I tried to understand the language, I still have some difficulties with it.
My approach to the study is to read a book or see a tutorial and then copy the code, but I understand how those who wrote the code came to use those constructs or how they came to develop that logic.


I ask if this is the case for someone to learn a language in the best way.
Thanks,
CamiCode - newbie programmer
An infinite loading list component in React
Tags: showdev, react, javascript
Published: 2019-08-26 09:18:50

*Photo by Jaël Vallée on Unsplash*

Hi 👋,

Last week I wrote an article about [creating an infinite loading list with React and GraphQL](https://dev.to/yvonnickfrin/create-an-infinite-loading-list-with-react-and-graphql-19hh). I figured out it was possible to write an abstraction for this particular case.

I introduce you [react-simple-infinite-loading](https://github.com/frinyvonnick/react-simple-infinite-loading). It displays a list elements that load as the user scrolls down the list.

![An infinite loading list of persons](https://github.com/frinyvonnick/create-infinite-loading-list-react-graphql/blob/master/assets/infinite_loading.gif?raw=true)

Here is an example of code. You can find a more concrete example in the [repository](https://github.com/frinyvonnick/create-infinite-loading-list-react-graphql/blob/master/src/InfiniteList.js) of my [previous article](https://dev.to/yvonnickfrin/create-an-infinite-loading-list-with-react-and-graphql-19hh) using a GraphQL server.

```jsx
import React from 'react'

import InfiniteLoadingList from 'react-simple-infinite-loading'

function Example ({ items, fetchMore, hasMore }) {
  return (
    <div style={{ width: 300, height: 300 }}>
      <InfiniteLoading
        items={items}
        itemHeight={40}
        hasMoreItems={hasMore}
        loadMoreItems={fetchMore}
      >
        {({ item, style }) => (
          <div style={style}>{item}</div>
        )}
      </InfiniteLoading>
    </div>
  )
}
```

It uses three libraries from [Brian Vaughn](https://github.com/bvaughn):

- [react-window](https://github.com/bvaughn/react-window) is made to display efficiently large lists. It only creates components for the visible elements and reuse nodes.
- [react-window-infinite-loader](https://github.com/bvaughn/react-window-infinite-loader/) is a HOC that loads elements just-in-time as user scrolls down the list
- [react-virtualized-auto-sizer](https://github.com/bvaughn/react-virtualized-auto-sizer/) helps you displaying your list so it fits the space available in its parent container.

If you are interested feel free to give it a try!

Repository: https://github.com/frinyvonnick/react-simple-infinite-loading

Feedback and contributions are appreciated 🙏 Please tweet me if you have any questions [@YvonnickFrin](https://twitter.com/YvonnickFrin)!

Hope it will help!
Jackson Deserialization Vulnerability
Tags: java, security
Published: 2019-08-26 08:49:24

On July 29th, 2019 a high severity [Deserialization of Untrusted Data](https://snyk.io/vuln/SNYK-JAVA-COMFASTERXMLJACKSONCORE-455617) vulnerability ([CVE-2019-14379](https://cve.mitre.org/cgi-bin/cvename.cgi?name=CVE-2019-14379), [CVE-2019-14439](https://cve.mitre.org/cgi-bin/cvename.cgi?name=CVE-2019-14439)) affecting all versions of com.fasterxml.jackson.core:jackson-databind up to 2.9.9.2 was published. 
For those of you who use Spring Boot, note that the current release (2.1.7) depends on the older vulnerable jackson-databind 2.9.9 package.

## About the vulnerability
This is not the first time that the jackson-databind package was subject to a Deserialization of Untrusted Data vulnerability. In fact, there are more than a dozen of these vulnerabilities known and disclosed since 2018, not to mention that almost all of these vulnerabilities are considered to be highly severe.

The main goal of the library is to serialize Java objects into JSON and the other way around. The problem lies in deserializing JSON back to Java objects. When a poorly written Java application has the ability to deserialize a JSON string from an untrusted source, a hacker can use this, for instance, to launch a remote code execution.

If polymorphic typing is activated for Jackson, an attacker can use a gadget to launch their attack when they control the JSON input. A gadget is a class or function that has already existing executable code present in the vulnerable process. This existing executable code can be reused for malicious purposes.

For this specific vulnerability, a gadget from Ehcache could be misused when default typing in Jackson is enabled. This was quickly solved by the maintainers of jackson-databind by adding the specific gadget to the already existing blacklist. Version 2.9.9.3 was released and does not contain this vulnerability anymore.

## Spring Boot
At the time  of writing this blog, the latest release version of Spring Boot is 2.1.7. This version has a dependency on the older jackson-databind 2.9.9 package.

[Read more on how to resolve this issue...](https://snyk.io/blog/jackson-deserialization-vulnerability/)
I published my first Alexa Skill - Profession Finder
Tags: javascript, news, adventofcode
Published: 2019-08-26 08:47:45

I published my first Alexa skill for the US store and it started slow. One week ago I released my first personal skill, [Profession Finder](https://www.amazon.com/dp/B07W3YDGVX/) after some time that I hesitated. The skill aims to discover the professional typology of the user by asking a set of simple question.

### How it works my Alexa Skill - Profession Finder

The interaction with the Alexa skill is very simple. There are two main intents available where the user can start a new test and find his profession or consult his actual result.

The test is selected randomly and is composed of multiple questions(around 40, depends on by test). The questions are very simple and the answer can be affirmative or negative. You are able to repeat the question in any moment, by asking Alexa:

> Repeat the question!

 After the last question, Alexa sends you the response, informing you about your profile, what that profile title means and what professions are common for it. If by any chance you interrupted the test, next time will start from the beginning.

In any moment you have the possibility to check your profile, by asking Alexa:

> Which are my results

If no results are available, the skill will ask if you want to start a new test.

Feel free to ask for help by simply saying:

> Help

Alexa will present the available intents offered by the skill. To close the skill, is very simple, just ask the skill to close in any way defined as default for Alexa skills.

Do you want to make a try? Install [Profession Finder](https://www.amazon.com/dp/B07W3YDGVX/) and discover what type of job fits to you.

PS: If you need to understand more about Alexa Skills, please take a look at my previous article [5 common questions about how to build an Alexa Skill (Amazon Alexa)](/ai/5-questions-build-custom-alexa-skill/).
CSS Buttons - Dopamina
Tags: codepen, css, buttons, design
Published: 2019-08-26 08:39:59

O que nos precisamos fazer, como desenvolvedores, designers, project owners, etc.

É satisfazer o usuário em cada passo que ele avança dentro da aplicação, sendo desde um login, até uma aprovação.

É claro que existem muitas formas de fazer isso, a questão é que muitas vezes podemos dar esse gostinho de dopamina totalmente satisfatória com simples botões.

***

## Upload buttons
💡**Tips:** submit, survey, file upload, to shop...

{% codepen https://codepen.io/iremlopsum/pen/MwrpMK %}

{% codepen https://codepen.io/davidmogar/pen/XXJXVE %}

***

## Floating action button (FAB)
💡**Tips:** quick actions, social media, main menu...

{% codepen https://codepen.io/CSS3fx/pen/RNYaoE %}

***

## Pre action button
💡**Tips:** delete, confirm, submit...
{% codepen https://codepen.io/YikesItsMikes/pen/zGOELd %}

***

## Slide dopamine
💡**Tips:** delete submit, to shop...
{% codepen https://codepen.io/chrisdothtml/pen/xbmddV %}

***

## Share buttons
**Tips:** quick actions, social networks, menu...
{% codepen https://codepen.io/keithchis/pen/QjoqRO %}

***

Comenta aí qual é sua animação favorita.

Espero que tenha gostado 🤘
Sign and send any document with GroupDocs.Signature (API)✍️
Tags: programming, dotnet, csharp, api
Published: 2019-08-26 08:39:37

I want to share with you an <strong>online free app to sign and send documents</strong> of any popular type - <strong>[GroupDocs.Signature](https://products.groupdocs.app/signature)</strong>.
What I like, in comparison to other signing online apps:
- Its free. 🙌 
- No sign up. 👏
- Easy 3-step workflow: <strong>Drop - Sign - Send</strong>.👍

It is the only online application to sign any type of document through one interface: Word, Excel, PowerPoint, PDF or other. Barcode and QRCode signature - is another one cool feature!😎

Here is how I sign my invoice with stamp:

<img width="500" src="https://media.giphy.com/media/J1p0AIuUkSuTICkWWc/source.gif">

Here is signed invoice:

<img width="500" src="https://i.imgur.com/ysooz1H.png">

<br/>
<h2>I want to have signing feature in my system!👨‍💻</h2>
<strong>GroupDocs.Signature app</strong> is built based on <strong>[GroupDocs.Signature API](https://products.groupdocs.com/signature)</strong>.
You can use GroupDocs.Signature API if you want to add signing functionality to your site or into your system. The API is supported for .NET and Java on your choice.

Let me show you a quick example how to add QRCode signature with GroupDocs.Signature API in .NET:

```csharp
using (var signature = new Signature("document.pdf"))
{
    // Setup key and passphrase
    string key = "1234567890";
    string salt = "1234567890";

    // Create data encryption object
    IDataEncryption encryption = new SymmetricEncryption(SymmetricAlgorithmType.Rijndael, key, salt);

    // Create custom signature object
    var documentSignatureData = new DocumentSignatureData()
    {
        ID = Guid.NewGuid().ToString(),
        Author = Environment.UserName,
        Signed = DateTime.Now,
        DataFactor = 11.22M
    };

    // Setup QRCode signature options
    var options = new QrCodeSignOptions()
    {
        Data = documentSignatureData,
        EncodeType = QrCodeTypes.QR,
        DataEncryption = encryption,
        // Set signature size
        Height = 100,
        Width = 100
    };

    // Sign and save document
    signature.Sign("document_signed.pdf", options);
}
```

<strong>GroupDocs.Signature API</strong> supports much more features than you see in app above.

You can also:
- Load document from any source: Amazon S3 Storage, Azure Blob Storage, FTP, URL, Stream, etc.
- Put multiple signatures.
- Search for signatures.
- Verify signatures.
- Protect signed documents with password.
- Save signed document to various type in one run.
- Sign with metadata (author, date).
- Sign with encrypted data.
- Set signature properties: colors, sizes, adjustments, etc.  

<strong>GroupDocs.Signature API</strong> has a <strong>30-day trial period</strong> for your try.


<hr/>
<p><i><a href="https://groupdocs.com">GroupDocs</a> is a daughter of <a href="https://aspose.com">Aspose</a> - a world-known vendor of file format APIs and apps.</i></p>
Please don't post Paywalled Medium links
Tags: rant, discuss, meta
Published: 2019-08-26 08:33:11

---
title: Please don't post Paywalled Medium links
published: true
description: Please don't post Paywalled Medium links
tags: rant, discuss, meta
---

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/xla55ffhcjbo35lgzl7e.jpg)

Seriously?, Almost all the links for technical articles now-days pointing to Medium are paywalled. Please don't do that.

Sick and tired.
Testing asynchronous RxJs operators
Tags: angular, unittesting, javascript, frontenddev
Published: 2019-08-26 15:19:47

---
title: Testing asynchronous RxJs operators
published: true
tags: angular,unit-testing,javascript,front-end-developmen
canonical_url: https://blog.angularindepth.com/testing-asynchronous-rxjs-operators-5495784f249e
---

#### Time traveling with virtual time and time progression syntax

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

Are you working with RxJS? Yes, everybody does those days! Have you already heard about marble diagrams? Yes, since you work with RxJS 😉 Did you know that you can apply marble diagrams in tests? Probably.

But have you already heard about “time progression syntax”?

[Find out more...](https://blog.angularindepth.com/testing-asynchronous-rxjs-operators-5495784f249e)
Building a Blog in Haskell with Yesod–Giving Back
Tags: haskell, yesod, functional
Published: 2019-08-26 06:16:35

---
title: Building a Blog in Haskell with Yesod–Giving Back
description: In this post I'm celebrating becoming a contributor to Yesod.
tags: haskell, yesod, functional
cover_image: https://thepracticaldev.s3.amazonaws.com/i/rlnzs4h5i4hlakwunq3h.png
canonical_url: https://odone.io/posts/2019-08-26-building-a-blog-in-haskell-with-yesod%E2%80%93giving-back.html
series: Building a Blog in Haskell with Yesod
published: true
---

You can keep reading here or [jump to my blog](https://odone.io/posts/2019-08-26-building-a-blog-in-haskell-with-yesod–giving-back.html) to get the full experience, including the wonderful pink, blue and white palette.

---

This is a series about [Yesod](https://www.yesodweb.com/): a Haskell web framework that follows a similar philosophy to [Rails](https://rubyonrails.org/). In fact, it is strongly opinionated and provides a lot of functionality out of the box.

A good read about Yesod is available online for free: [Developing web applications with Haskell and Yesod](https://www.yesodweb.com/book). That's why this series will be a commentary of the commits from a [repo](https://github.com/3v0k4/yesod-blog) we will use to develop a super simple blog.

In other words, this won't be good material to learn how to use Yesod. However, it will hopefully give an overview of how the framework works.

## Giving Back

Last week has been a very special one. First of all, I had the chance of spending time with a couple of hundred [Software Crafters](https://www.softwarecrafters.org): the [SoCraTes conference](https://socrates-conference.de) has been the highlight of my year for the last three years. Also, helping with the organization is the way I try to give back to the community.

Something else happened last week that I'm really proud of. I got my first Pull Request merged for an open source project: I'm officially a [Haskell Yesod contributor](https://github.com/yesodweb/yesod/graphs/contributors)!!

The inspiration came from [last week's post](https://dev.to/riccardoodone/building-a-blog-in-haskell-with-yesod-json-api-40d1):

> Unfortunately, Yesod.Auth.Dummy does not support registration via JSON requests. Therefore, we have to patch it ourselves.

That's where I [asked](https://github.com/yesodweb/yesod/issues/1618) if a PR was of any interest to the maintainers, stared at the screen for several hours, copy / pasted some code from other parts of the codebase and submitted the new feature for review.

Special thanks to Michael, the author of Yesod, for the support and encouragement! I'm looking forward to the next Pull Request.

---

Get the latest content via email from me personally. Reply with your thoughts. Let's learn from each other. Subscribe to my [PinkLetter](https://odone.io#newsletter)!
AWS Cognito and Twitter
Tags: help, aws, awscognito, twitter
Published: 2019-08-26 05:58:28

---
title: AWS Cognito and Twitter
published: true
tags: help, AWS, AWS Cognito, Twitter
---

Hi All,

I am in need of using AWS Cognito to support Email/Password, Facebook, Google, and Twitter Authentication with Dotnet Core 2.1 Web Api.

I am using JwtBearer Authentication and is automatically supported all but Twitter. Has anyone done similar projects before or anyone has related experience, I'd love to hear from you.

Thanks in advance,
Nabin
Why I made an a11y tutorial site with a React focus
Tags: a11y, react, javascript, showdev
Published: 2019-08-26 05:36:58

I recently deployed a side project I've been working on for some time - [Up Your A11y](https://www.upyoura11y.com). Up Your A11y is a collection of tutorials and articles about - you guessed it - accessibility in web applications, and its content has a bias towards React development.

## Why did I start Up Your A11y?

Through working on a project with a large national brand, my eyes were opened to just how little I understood about web accessibility, despite working with web apps for some time. A few things really struck me:

1. Accessible practices had been far from central to my way of approaching development, and were more of an afterthought

2. There was a lot I took for granted in terms of accessibility having come originally from an Android app development background. It seems there are a lot more things to be mindful of in web development

3. Almost everyone in my engineering team felt they could learn more about how our apps should perform in terms of keyboard and screen reader usage

I soon fell down a rabbit hole of learning, and I started collecting notes and examples to more easily refer back to later. These notes became a "lunch and learn" session for my colleagues, and later I decided to write them up into short articles and tutorials and share them online, in the hope that it will help someone else in a similar position to me.

## Why the React focus?

Where I found it most difficult to find resources, examples and answers was where the accessibility concern I was trying to address was directly tied to coding Single Page Applications. I found myself lost on route changes, with focus seemingly in random places. I realised I'd taken for granted my nifty component was fit for purpose across different locations in my app without considering the heading level etc. I hadn't properly considered page titles, and so on.

I’ve given Up Your A11y a React bias, partly because it's what I know, but also because it's those React/SPA specific topics that represented the biggest 'Aha!' moments for me. While the React docs are great, I think it's useful to gather those React-specific considerations together alongside more general accessibility principles and tutorials.

## What next?

I'm learning every day, and hope to keep expanding Up Your A11y with more topics and examples. I don't know if others will find the content I've put together helpful, but it would have definitely helped "past me", and I'm really glad to have the additional motivation to learn more about accessibility!

If you'd like to visit the site, you can find it at [www.upyoura11y.com](https://www.upyoura11y.com). I'm always grateful for feedback so feel free to reach out.


------------
*Did you find this post useful? Please consider [buying me a coffee](https://www.buymeacoffee.com/mgkZuRU) so I can keep making content* 🙂
The Complete Guide to NgRx Testing
Tags: angular, typescript, ngrx, javascript
Published: 2019-08-26 05:21:38

The main secret behind having better test coverage in an Angular app is to reduce the friction it takes to write tests and enforce test coverage by setting a test coverage threshold to be checked on every commit. NgRx and reactive testing is an area where many people get confused because it seems hard to write the tests to provoke and expect the desired behavior.

In NgRx there are different ways to test different parts of the app. We have reducers, actions, selectors and effects which all need its own know-how to test efficiently.

This post will show you how to test NgRx apps, what to test for and how to create the tests with ease.

https://christianlydemann.com/the-complete-guide-to-ngrx-testing/
Creating a Wordpress Plugin
Tags: wordpress, php
Published: 2019-08-26 03:37:06

---
title: Creating a Wordpress Plugin
published: true
description: We look at creating a Wordpress Plugin and what is required for it showing up on wordpress.org and getting through the review process. I made it and found some things to look out for and things that can make the process smoother.
tags: WordPress, PHP
cover_image: https://thepracticaldev.s3.amazonaws.com/i/xliky4866md6czkk08q3.jpg
---

{% youtube g8sFkmOTxHI %}

We look at creating a Wordpress Plugin and what is required for it showing up on wordpress.org and getting through the review process. I made it and found some things to look out for and things that can make the process smoother.