teleren/devto huggingface dataset:
Learn how to build Functional Front-ends with ClojureScript and React.
Tags: javascript, react, clojure, webdev
Published: 2018-09-30 18:12:53

---
title: Learn how to build Functional Front-ends with ClojureScript and React.
published: true
description: You probably heard about React, and did you hear about Reagent? Reagent is a minimalistic interface between ClojureScript and React.
tags: javascript, react, clojure, webdev
cover_image: https://thepracticaldev.s3.amazonaws.com/i/ietz8fzuh89uyoiyezx4.png
---

You probably heard about React, and did you hear about Reagent? Reagent is a minimalistic interface between ClojureScript and React.

ClojureScript, just as Elm, ReasonML and EcmaScript compile/transpile to JavaScript.

With Reagent you can define components using nothing else but plain ClojureScript functions and data structures.

Let’s take a look at a couple examples and see how they compare. This is not a rant on React. React is awesome! Nor a rant on JS. JS is awesome too! This is to show how React looks like in a language with immutable and persistent data structures.

## A Stateless Component
The simplest component in Reagent and in React is just a function.

![alt stateless component][stateless]

[stateless]: https://thepracticaldev.s3.amazonaws.com/i/tcmokg12qhoh1kbmhhaa.png

Very often in JavaScript you would see them as `const` one liners:

```jsx
const HelloMessage = props => <div>Hello {props.name}</div>;
```

## A Statefull Component

Since Reagent is build on top of CLJS (ClojureScript) immutable data structures there is no need for extra libraries (Redux, MobX) or syntax (`this.setState`) to work with your state. In CLJS you would use `atoms` (reference type in CLJS) for dealing with your state.

![alt statefull component][statefull]
[statefull]: https://thepracticaldev.s3.amazonaws.com/i/pbawqtekf05177d2sq0e.png

In this example we are creating a `let` binding for an `atom` — inside our function - `defn`. The `let` binding is available only inside the scope of the function and then we are `swap!`-ing the value with `on-click` by using `inc` (increment) function.

## A Class Component with Life Cycle Methods

This example shows a class component with life cycle methods.

![alt class component][class]
[class]: https://thepracticaldev.s3.amazonaws.com/i/r5pfooe1bluljnqgogge.png

In Reagent we would use them less than 1%. The reason for that are — atoms — they will keep track when they should be updated. In Reagent we could write this component, without a need for `componentDidMount`:

```clojure
(defn timer []
  (let [seconds (r/atom 0)]
    (fn []
      (js/setInterval #(swap! seconds inc) 1000)
      [:div
       "Seconds: " @seconds])))
```

## Want to learn more?

If you would like to learn more about ClojureScript and Reagent try this [FREE](https://www.learnreagent.com/) video course and build GIGGIN app.

> ### More information about the course at [learnreagent.com](https://www.learnreagent.com/)

---

And if you like this article you should follow me on DEV and [Twitter](https://twitter.com/JacekSchae) I only write/tweet about programming and technology.
React Native Simple Custom GridView Layout Example Android
Tags: react, reactnative, android, javascript
Published: 2018-09-30 17:55:50

---
title: React Native Simple Custom GridView Layout Example Android
published: true
description: React Native Simple Custom GridView Layout Example Android
tags: #react #reactnative #android #javascript
---

Post Link : <a href="https://www.skptricks.com/2018/09/react-native-simple-custom-gridview-layout-example.html"> React Native Simple Custom GridView Layout Example Android </a>


This tutorial explains how to create simple custom grid view in react native application. Grid View that displays items in a two-dimensional, scrollable grid layout. The grid items are automatically inserted to the layout using a renderItem props. The GridView is fully responsive and scrollable component layout. Officially there are no specific GridView Component available in react native application, but we can create Grid layout using FlatList Component by specifying numColumns props  (example : numColumns={2}) in FlatList Component. This props allows us to create multiple columns in each row in responsive order.

<a href="https://www.skptricks.com/2018/09/react-native-simple-custom-gridview-layout-example.html"> React Native Simple Custom GridView Layout Example Android </a>


<img src="https://1.bp.blogspot.com/-U6DxHFlg770/W7ECe9uy4rI/AAAAAAAAB-0/Mumx0xM2APQkq4ynVni17BEo1wK1tU-NgCLcBGAs/s640/grid.png" />

<a href="https://www.skptricks.com/2018/09/react-native-simple-custom-gridview-layout-example.html"> Read More.. </a>
Yasmina’s Quest – adventure game engine in PHP and DHTML (November 2005)
Tags: adventure, php, gamedev, javascript
Published: 2018-09-30 15:31:38

---
title: Yasmina’s Quest – adventure game engine in PHP and DHTML (November 2005)
published: true
tags: adventure,PHP,gamedev,JavaScript
canonical_url: 
---

“Yasmina’s Quest” is an open source adventure game engine that comes with one adventure game as example (in Spanish) totally written using PHP, HTML, CSS and JavaScript. It was created on 17th November 2005 (approximately).

![Screenshot](http://dhtmlgames.com/yquest/yq.gif)

The games created with this engine can be played either as a point-and-click adventure (using mouse, pointer or your finger) or as a text adventure (using keyboard or any other text input method) and they are totally cross-browser and cross-platform.

Although it uses JavaScript in order to improve user interface, it is not mandatory and it works with any web browser without JavaScript support. Similarly, CSS is an advantage but not actually necessary. Even images are not necessary!

The characteristics of this engine are unique, letting developers create adventures that work in all web browsers and taking advantage of JavaScript and CSS to improve the user experience only if it is available. You will be able to play the game even in text-based web browsers such as Links and Lynx.

So far, I don’t know any other engine that works in all web browsers which let users play the same adventure in both modes, point-and-click adventure and text adventure.

It has been tested under BeOS, Linux, NetBSD, OpenBSD, FreeBSD, Windows, Mac OS X, QNX, BlackBerry Tablet OS, Android, iOS and others.

This engine has been used by some other people to create their own adventure.

Play online: [http://yquest.tuxfamily.org/yq\_spanish/](http://yquest.tuxfamily.org/yq_spanish/)

Play online (mirror): [http://www.dhtmlgames.com/yquest/yq\_spanish/](http://www.dhtmlgames.com/yquest/yq_spanish/)

Official web site: [http://yquest.tuxfamily.org/](http://yquest.tuxfamily.org/) (mirror at [http://www.dhtmlgames.com/yquest/](http://www.dhtmlgames.com/yquest/)).

It can also be found on GitHub: [https://github.com/jalbam/yquest](https://github.com/jalbam/yquest)
Image Resizing In React Native
Tags: react, reactnative, android, javascript
Published: 2018-09-30 12:23:35

---
title: Image Resizing In React Native
published: true
description: Image Resizing In React Native
tags: #react #reactnative #android #javascript
---

Post Link : <a href="https://www.skptricks.com/2018/09/image-resizing-in-react-native.html"> Image Resizing In React Native</a>

This tutorial explains how to perform image resizing in react native application. Mobile devices come in multiple screen resolutions. When we display images it is important to ensure that the images displayed are optimized for screen resolution. The width and height style properties of Image components determine the size of what's rendered on the screen. For example, you will probably have to work with images at some point that have a larger resolution than you want displayed in your React Native application. Simply setting the width and height style properties on the Image is enough to properly scale the image. In that case you need to use resizeMode props in Image Component to resize your image.

<a href="https://www.skptricks.com/2018/09/image-resizing-in-react-native.html"> Image Resizing In React Native</a>

<img src="https://4.bp.blogspot.com/-YCjMPEbpYng/W7CJRGQ6s3I/AAAAAAAAB9Y/s1LEY2b7zY8GSKxb5ImGa6VwMoXVbJDQgCLcBGAs/s640/imager.png" />


<a href="https://www.skptricks.com/2018/09/image-resizing-in-react-native.html"> Read More...</a>
Creating a Pipfile for multiple versions of Python
Tags: python, pipenv
Published: 2018-09-30 12:21:39

---
title: Creating a Pipfile for multiple versions of Python
published: true
description: Creating a Pipfile for multiple versions of Python
tags: Python, Pipenv
---

###### (A Japanese translation is available [here](https://qiita.com/TomoyukiAota/items/87017a4f57b8246b894c).)

A Pipfile created by `pipenv install` command has the version number of Python. This Pipfile cannot be used on the machine with a different version of Python. [^1] In this article, I'm going to introduce how to create a Pipfile which can be used for multiple versions of Python.

# What is the problem?
When we want to start using Pipenv in a repository, the first thing we do is to issue `pipenv install` command. This creates a Pipfile like this:

```toml
[[source]]

url = "https://pypi.python.org/simple"
verify_ssl = true
name = "pypi"


[packages]



[dev-packages]



[requires]

python_version = "3.6"

```

This Pipfile is generated on a Windows PC with Python 3.6.4.

Then, if we copy this Pipfile to another PC with Python 3.7 and issue `pipenv install`, we will encounter the following error message:


```
Requested Python version (3.6) not installed
Warning: Python 3.6 was not found on your system…
You can specify specific versions of Python with:
  $ pipenv --python path\to\python
```

On macOS/Linux with pyenv, [the required version of Python can be installed by Pipenv using pyenv](https://pipenv.readthedocs.io/en/latest/advanced/#automatic-python-installation), but pyenv is not available on Windows.


# Solution

If there is no need of specifying Python version, we can delete the `[requires]` section. Then, `pipenv install` command will be successful regardless of the version of Python installed on the machine.

```toml

[[source]]

url = "https://pypi.python.org/simple"
verify_ssl = true
name = "pypi"


[packages]



[dev-packages]


```

What I've done here is described in the official document.
https://pipenv.readthedocs.io/en/latest/basics/#specifying-versions-of-python

>
The inclusion of [requires] python_version = "3.6" specifies that your application requires this version of Python, and will be used automatically when running pipenv install against this Pipfile in the future (e.g. on other machines). If this is not true, feel free to simply remove this section.

When this method is adopted, Pipfile.lock should not be included in version control. This because the content of Pipfile.lock can be different depending on the versions of Python.
https://pipenv.readthedocs.io/en/latest/basics/#general-recommendations-version-control

>
- Do not keep Pipfile.lock in version control if multiple versions of Python are being targeted.


[^1]: To be exact, Pipfile cannot be used when the major or minor version is different. For example, Pipfile for Python 3.6 cannot be used on a machine with Python 3.7. On the other hand, Pipfile can be used when only the patch version is different. For example, Pipfile for Python 3.6.4 can be used on a machine with Python 3.6.5.
Angular Component Architecture  
Tags: angular, webdev, discuss, javascript
Published: 2018-09-30 11:52:29

---
title: Angular Component Architecture  
published: true
description: my first post on dev
tags: #angular #webdev #discuss #javascript
---


I'm currently developing Angular 6 project where I have lots of actions item inside single module or route.

What is the best component architecture design for following menu items:

1. Customer Service Request 
    a. Service A
    b. Service B
    c. Service C  
  
2. Customer Payment Request
    a. Payment A
    b. Payment B
    c. Payment C

All the services/payments require 3 screens :

1. Customer Inputs/Forms 
2. Confirmation Page
3. Success Page.

Currently, I have following approach in mind :

1. One Request Module which fetches all lists (like accounts list) and pass it to child components as @Input.
2. Each Action Item (like Service A) has its own component (like ServiceAComponent)
    a. ServiceAComponent has further one Child Component for confirmation and Success Page. (ServiceAConfirmationComponent)
    b. ServiceAConfirmationComponent receives customer inputs from its parent (as @Input) and make service call + show/hide confirmation page on Success. It also sends (@Output) events for cancel.

Is it the right way to proceed ?

any help/comments are welcome. thanks for reading !!
Backend Testing: The Definitive Guide
Tags: qatesting, backend
Published: 2018-09-30 11:34:07

---
title: Backend Testing: The Definitive Guide
published: true
description: With complex databases and large amounts of data, Backend Testing becomes a vital step towards high-quality software.
tags: Qa testing, Backend
cover_image: https://www.mindk.com/blog/wp-content/uploads/2018/09/adult-business-data-1181316-min-720x460.jpg
canonical_url: https://www.mindk.com/blog/backend-testing/
---

With complex databases and large amounts of data, Backend Testing becomes a vital step towards high-quality software. While companies spend a lot of effort making sure everything works smoothly from the user point of view, they often forget that backend testing is just as important.

It can reveal performance issues that would otherwise go unnoticed until your app is released, improve the quality of your data, boost the application’s stability and give you full control over the test coverage.

[Continue reading...](https://www.mindk.com/blog/backend-testing/)
React Native vs Native Development: What Should Your Mobile App Development Team Choose?
Tags: reactnative, mobileappdevelopment
Published: 2018-09-30 11:29:00

---
title: React Native vs Native Development: What Should Your Mobile App Development Team Choose?
published: true
description: As promised we are starting a new series devoted to MindK Tech Battles, a monthly meetup for IT professionals organized by our R&D team.
tags: React Native, Mobile App Development
cover_image: https://www.mindk.com/blog/wp-content/uploads/2017/07/tech-battle-720x460.png
canonical_url: https://www.mindk.com/blog/mobile-app-development-team-choise-of-react-native/ 
---

As promised we are starting a new series devoted to MindK Tech Battles, a monthly meetup for IT professionals organized by our R&D team.

So strap in, hit that subscribe button and prepare for the series of in-depth discussions centered around the hottest topics of modern product development.

The first article in the series is based on our latest showdown. It was dedicated to mobile development, namely, the pressing debate of Native iOS/Android vs. React Native development.

Based on insights from members of our mobile app development team, I’m going to give an overview of both technologies and crystallize the main benefits and drawbacks from the developers’ point of view.


[So, let the battle begin!](https://www.mindk.com/blog/mobile-app-development-team-choise-of-react-native/)
BxJS Weekly Episode 30 - javascript news podcast
Tags: javascript, node, podcast, news
Published: 2018-09-30 09:42:44

---
title: BxJS Weekly Episode 30 - javascript news podcast
published: true
description: Listen to the best javascript news of the week in a podcast form
tags: javascript, node, podcast, news
---

Hey dev.to community!

BxJS Weekly Episode 30 is now out! 🚀
Listen to the best javascript news of the week in a podcast form right here.
You can find all the mentioned links [here on github](https://github.com/BuildingXwithJS/bxjs-weekly/blob/master/links/18-39-Episode-30.md).

You can also watch or listen to this episode on:
- [YouTube](https://youtu.be/2kTOjqARH00)
- [Castbox](https://castbox.fm/episode/BxJS-Weekly-Ep.-30-Sept-29%2C-2018-(javascript-news-podcast)-id1378315-id94139201?country=us)

Any feedback is appreciated 😁

Additional stuff:
- [Twitch channel](https://www.twitch.tv/yamalight)
- [Discord server](https://discord.gg/hnKCXqQ)
- [BxJS Weekly github repo](https://github.com/BuildingXwithJS/bxjs-weekly)

Social media links:
- [Twitter](http://twitter.com/yamalight)
- [Medium](https://medium.com/@yamalight)
- [Github](http://github.com/yamalight)

If you enjoy my content, please consider [supporting me](https://codezen.net/support.html) 😉
Blogging Report
Tags: blogging
Published: 2018-09-30 08:00:13

---
title: Blogging Report
published: true
description: Blogging Report
tags: blogging
---

Hello to dev's, I am sharing my September Month Analytics Report and I don't know it is right to share here but I am sharing because I am happy and I want to share my happiness.

![September Month Analytics Report - The Rich Post](https://thepracticaldev.s3.amazonaws.com/i/omg7l8z74dgsdqp0xbfi.png)


[September Month Analytics Report - The Rich Post](https://therichpost.com/september-month-analytics-report)

This is my hard work results. Today blogging is not an easy but if you do hard work and passionate about your work then blogging is very good to achieve something in life

Thank you
therichpost
Convert Microsoft Visio Document to HTML in C#
Tags: visio, html, diagram, csharp
Published: 2018-09-30 07:56:29

---
title: Convert Microsoft Visio Document to HTML in C#
published: true
description: Convert Microsoft Visio Document to HTML in C#
tags: #Visio, #HTML, #Diagram, #CSharp
---

Developers can convert any Microsoft Visio document to HTML (_Hypertext Markup Language_) in C# _(or in any other .NET Framework supported language e.g. VB.NET etc)_ using [Aspose.Diagram](https://products.aspose.com/diagram) which is a light-weight, extensible, easy to use API, that helps developers to create, manipulate and convert Microsoft Visio files to various formats on client side and server-side without any need to install Microsoft Visio or using any sort of Microsoft Office automation.

**Supported Platforms**

>Aspose.Diagram supports both .NET and Java platforms. Please see [Aspose.Diagram for .NET](https://products.aspose.com/diagram/net) and [Aspose.Diagram for Java](https://products.aspose.com/diagram/java) for your reference.

# Sample Microsoft Visio Document - VSD

For demonstration purpose, we will convert the following [sample Microsoft Visio document](https://github.com/shakeel-faiz/Screenshots-and-Sample-Files/blob/master/Convert%20Microsoft%20Visio%20Document%20to%20HTML/sampleConvertMicrosoftVisioDocumentToHTML.vsd) to HTML in C# using Aspose.Diagram API. However, you can use any Microsoft Visio document of your choice inside the sample code and it will also be converted to HTML fine.

![Sample Microsoft Visio Document to be converted to HTML using Aspose.Diagram API.](https://raw.githubusercontent.com/shakeel-faiz/Screenshots-and-Sample-Files/master/Convert%20Microsoft%20Visio%20Document%20to%20HTML/Microsoft-Visio-Document-converted-HTML-Aspose.Diagram.png "Sample Microsoft Visio Document to be converted to HTML using Aspose.Diagram API.")


# Licensing

Please note, if you will execute the code without prior setting the Aspose.Diagram license, you will get _Evaluation Watermark_ in your output documents. For more information, please go through [Licensing](https://docs.aspose.com/display/diagramnet/Licensing).

# Sample Code

The following sample code converts the Microsoft Visio document to HTML by performing these steps.

* Load Microsoft Visio document to _Aspose.Diagram.Diagram_ object.
* Save the _Aspose.Diagram.Diagram_ object into HTML format.

{% gist https://gist.github.com/shakeel-faiz/5b91f7870c51b053bf47ec40396706d0 %}

# Output HTML by Aspose.Diagram

The following snapshot shows the [Output HTML generated by Aspose.Diagram](https://github.com/shakeel-faiz/Screenshots-and-Sample-Files/blob/master/Convert%20Microsoft%20Visio%20Document%20to%20HTML/Output%20HTML.zip) with the code given above. As you can see, the HTML looks exactly same as Microsoft Visio document.

![Output HTML generated by Aspose.Diagram from Microsoft Visio document.](https://raw.githubusercontent.com/shakeel-faiz/Screenshots-and-Sample-Files/master/Convert%20Microsoft%20Visio%20Document%20to%20HTML/Output-HTML-Aspose.Diagram-from-Microsoft-Visio-document.png "Output HTML generated by Aspose.Diagram from Microsoft Visio document.")
911 Calls Capstone Project (Using Python — numpy, pandas, matplotlib and seaborn)
Tags: python, datascince, numpy, pandas
Published: 2018-09-30 06:55:06

---
title: 911 Calls Capstone Project (Using Python — numpy, pandas, matplotlib and seaborn)
published: true
description: #python, #datascince, #numpy, #pandas
tags: #python, #datascince, #numpy, #pandas
---

https://medium.com/@hassansajedi/911-calls-capstone-project-using-python-numpy-pandas-matplotlib-and-seaborn-86b26100e611
React Native Responsive Image Width and Height Example
Tags: react, reactnative, android, javascripot
Published: 2018-09-30 05:32:30

---
title: React Native Responsive Image Width and Height Example
published: true
description: React Native Responsive Image Width and Height Example
tags: #react #reactnative #android #javascripot
---

Post Link : <a href="https://www.skptricks.com/2018/09/react-native-responsive-image-example.html">React Native Responsive Image Width and Height Example </a>

This tutorial explains how to create and display responsive image in react native application. In order to display responsive image, we are using Dimensions Component of react-native package. Dimensions.get('window').width  helps to calculate the size of the image. For example, if the ratio is always 16x9, the height is 9/16th of the width of the image. The width equals device width.

<a href="https://www.skptricks.com/2018/09/react-native-responsive-image-example.html">React Native Responsive Image Width and Height Example </a>

<img src="https://3.bp.blogspot.com/-mYbCtX_N_G8/W7BYoAmeXrI/AAAAAAAAB9M/ywpZQVDLCBk1XRgX77eDPahWf5yLQ24ggCLcBGAs/s640/res.png" />


<a href="https://www.skptricks.com/2018/09/react-native-responsive-image-example.html">Read More... </a>
React: Not Everything is State
Tags: react, frontend, javascript
Published: 2018-09-30 05:10:29

---
title: React: Not Everything is State
published: true
description: Quick tip
tags: ["React", "Frontend", "Javascript"]
cover_image: https://thepracticaldev.s3.amazonaws.com/i/feade1qe21wcbrgez3f6.jpg
---
[Quick Tip] 

When working with React we get introduced to state as a way if storing component's data. There is another way that generally gets overlooked: class properties.

#### Example

```js
class AnnoyingButton extends React.Component {
    intervalId = null; // Here!
    id = generateUniqueId(); // Here!

    state = {
        isDisabled: false
    };

    componentDidMount() {
        this.intervalId = setInterval(() => {
            this.setState(({ isDisabled }) => ({
                isDisabled: !isDisabled
            }));
        }, 100);
    }

    componentWillUnmount() {
        console.log(`Unmounting ID: ${this.id}`);
        clearInterval(this.intervalId);
    }

    render() {
        return <button disabled={this.state.isDisabled} />;
    }
}
```

Nothing special about the component; the interesting bits are the `id` and `intervalId` variables. We need some way of preventing memory leaks when the component unmounts. In componentDidMount we save the interval's ID to a class property. Then, use the property to clear the interval and `console.log` the component's unique ID.

You might be thinking, "Why chouldn't we just store this information in the component's state?" React re-renders the component, and any child components, when the state changes. If the render method never uses a piece of the state it could be causing unwanted renders--making your application slower!

**When to use class properties:** If state needs to be stored, but is never used as a part of the view/render of a component.