teleren/devto huggingface dataset:
How to fix app crashing when using the showFloatWindow API on Huawei devices running EMUI before version 9.1
Tags: huawei, android
Published: 2022-01-20 11:22:29

A number of reports where received about crashes when the showFloatWindow API is called on devices running older versions of EMUI. Lets take a look at this crash today and how we can fix the issue.

Start by integrating version 6.1.0.301 of the Game Service SDK into a project and successfully implemented the [floating window function](https://developer.huawei.com/consumer/en/doc/development/HMSCore-Guides/game-buoy-0000001050121528). 
Then, when testing the game on devices running a version of EMUI earlier than 9.1, the game crashed when showFloatWindow API is called. The crash logs are as follows.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6ihp0be8jgyz6hvb0nzk.png)

The error logs suggested that the issue was caused by missing layout files during layout implementation. This error suggests that c_buoycircle_window_small.xml, c_buoycircle_hide_notice.xml, and c_buoycircle_hide_guide_dialog.xml layout files were not found in this project. However, they had been saved under the layout folder as displayed in the following figure.
 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dne3ylkpoy4vzic3elx2.png)

The next possible issue could have been that the layout files were obfuscated. So, lets check the build file to be sure:
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lgpnoznpf0q1h007kl89.png)
 
As you can see minifyEnabled was set to true, indicating that the obfuscation function was enabled. This was also the case for shrinkResources, which meant that resource files were excluded during package creation. 

One option of course would be to simply disable the shrinking of resources. By commenting out this line the game would run fine and the API call wouldn't crash, however the resource files are not longer compressed and will take up much more space.

To compress the resources, you can create an XML file that contains the resources tag in the project or use the keep.xml file in the res/raw directory, and specify the resources to be reserved in the tools:keep attribute as follows:

{% gist https://gist.github.com/devwithzachary/702933b0d4391e477fc150382d3dd7f5 %}

This solution allows the floating window function to work and is able to compress the resource files.

Note: If you have integrated the Game Service SDK, Huawei suggests that you add the following resources and configure the following obfuscation scripts.

@drawable/c_buoycircle*
@drawable/hms_game*
@layout/c_buoycircle*
@layout/hms_game*
@strings/hms_game*
@strings/c_buoycircle*
Is it Possible to Get this Model Json Result From API Response
Tags: webapi, help, dotnet
Published: 2022-01-20 11:08:29

Is it Possible to Get this Model Json Result From API Response

{
	"controlname1":"descriptonText1",
	"controlname2":"descriptionText2",
	"controlname3":"descriptionText3"
}

so for getting this result in json , how to maintain the c# class structure and how to loop in the same
Pizza Tribes - A Multiplayer Browser-based Real-Time Strategy game
Tags: redis, gamedev, go
Published: 2022-01-20 11:06:46


![Image1](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tykoy9lgeriu63uixvd8.png)
 

Multiplayer gaming remains colossal in the gaming industry. And why wouldn’t it be? To settle old scores, solve disputes, or even satisfy that competitive itch , battling it out online against other users is just as cathartic as it is entertaining. 

This is why [this Launchpad app](https://launchpad.redis.com/?id=project%3Apizza-tribes) has created its own real time strategy game, Pizza Tribes, that involves…wait for it… mice! The gameplay involves training a population of mice to bake and sell pizzas for coins, with the overarching objective being to generate more coins than any other player. 

For all its creativity, this application wouldn’t be able to provide users with real time gameplay without Redis’ ability to transmit data between components efficiently. Any delays would have made real time gameplay impossible. 

Let’s take a look at how this application was created. But before we go any further, we’d like to point out that we have an excellent range of applications that are having an impact on everyday life for you to check out on [the Redis Launchpad](https://launchpad.redis.com/). 

- What will you build?
- What will you need?
- Architecture 
- Getting started
- The game state update

## 1. What will you build?

You’ll build a multiplayer browser-based real time strategy game using Redis. Below we’ll go through each step in chronological order and outline all of the components that you’ll need to create this application. 

Ready to get started? Ok, let’s dive straight in. 

## 2. What will you need?
- Typescript: used as a superset of the JavaScript language
- Golang: the preferred programming language used to build efficient software
- RedisTimeSeries: provides time series data
- RedisJSON: stores, updates, and fetches JSON values from Redis keys

## 3. Architecture

![Image3](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wg19nwalhrfeuefbzjce.png)

[Access the Source Code](https://launchpad.redis.com/?id=project%3Apizza-tribes)
Relaunching after Pivoting
Published: 2022-01-20 11:00:10

---
title: Relaunching after Pivoting
published: true
description: "Relaunching after a first failed launch."
tags: 
//cover_image: https://direct_url_to_image.jpg
---
On March 2021, and after almost two years of development, I launched found.dev. I had a lot of expectations on it, but as it happens with most of the new launches, it was a complete failure.

Even though the software was working good and had enough features, it seemed like absolutely no one had any kind of interest in the product, at all. After several months of trying different approaches on how to get users to try and use the product, I gave up.

I didn't work on the project for a few months and stopped to think about all errors I had done: no marketing plan at all, no clear roadmap, diffuse sales pitch, etc... The product was, in my opinion, good, but I just didn't know how to sell it. Or worse, the product was good, but no one needed it.

In December 2021, I decided to take on the project again and completely transform it into a new thing. Something way simpler, based on the feedback I got from my first try: a job board. But not a normal job board like the other thousands of job boards out there, based on a specific language, framework, or tool, but a job board for having them all!

Today, after a few weeks of work, I have completely remade the product and I have just launched it on Product Hunt: https://www.producthunt.com/posts/found-dev-2-0

I would appreciate any feedback :)
ReactJS with Redux Thunk
Tags: react, redux, javascript, tailwindcss
Published: 2022-01-20 10:44:54

## **Installation and Setup**
First, create a React project with `create-react-app`:
```
npx create-react-app react-with-redux-thunk
```

If `create-react-app` version < 5.0.0:
```
npx create-react-app@latest react-with-redux-thunk
```
Or
```
npx create-react-app@5.0.0 react-with-redux-thunk
```

If you're using the basic Redux `createStore` API and need to set this up manually, first add the `redux-thunk` package:
```
yarn add redux-thunk react-redux redux redux-logger
```
After installing, we need to combine reducer item into a rootReducer to create a single object in `./store/reducer.js` file:

```
import { combineReducers } from "redux";

export const Reducers = combineReducers({
  // ...
});
```

we need to enable `redux thunk` by use `applyMiddleware()` in `./store/index.js`:

```
import { createStore, applyMiddleware } from "redux";
import thunkMiddleware from "redux-thunk";
import { createLogger } from "redux-logger";
import { Reducers } from "./reducer";

const loggerMiddleware = createLogger();
export const store = createStore(Reducers, applyMiddleware(thunkMiddleware, loggerMiddleware));
```

## **Configure the provide it to your app**
Now, include `<Provider />` to `./src/index.js` and pass the store as `props`

```
import React from "react";
import ReactDOM from "react-dom";
import { Provider } from "react-redux";
import { store } from "./store";
import App from "./App";
import "./index.css";

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById("root")
);
```

Go to [[Part 2] How to use redux thunk](https://dev.to/sirimainsorn/part-2-how-to-use-redux-thunk-2ddg)
First Language to Learn
Tags: javascript, webdev, beginners, programming
Published: 2022-01-20 10:44:43

Hi Everyone !👋
_"programming for beginners"_ seems like a really hot-topic , no matter what year it is. Each year thousands of people get attracted to this world irrespective of age or background. 
So I would like to ask **all the devs** in this community , 

> **What was the first language you studied and how was your experience?**

please feel free to pour your ❤️ out in the comments section. I would love to know how you guys made it !🥳
Forem iOS app
Published: 2022-01-20 10:41:14

When browsing AppStore there are two apps:
* dev.to
* Forem

Now, the fact that dev.to app is **discontinued** is secret. No clearly visible official announcement ( [this](https://dev.to/devteam/sunsetting-the-devto-ios-app-44nl) is well-hidden ), not to mention that app is still available from AppStore.

Some kind of sad joke this is.....

Another sad joke is " quality " of this Forem app...... my posts written on MBP are not visible in Dashboard in my iOS app, animations lags, coverage is non-existent........

Also :: on MBP I follow 3 users; in iOS app I follow ...... 0. Shouldnt app be in full sync with my account?
Introducing a new tool - How to back your DEV Post
Tags: javascript, webdev, discuss
Published: 2022-01-20 10:39:03

### Hello folks 👋
What's up friends, this is **SnowBit** here. I am a passionate young developer having the intention to become a successful developer.

Today, I am here with an amazing tool for my fellow writers on this platform. Probably, you all write articles and post on DEV.to and want to keep a backup of your posts and articles on GitHub and doing that manually becomes somewhat tedious work. 

Here comes **[DEV Backup](https://dev-backup.vercel.app/)** that backup/saves any post on **DEV Community** in your GitHub Repository in just a few clicks. Let's give it a try 🌟 - [DEV Backup](https://dev-backup.vercel.app/)

{% youtube https://www.youtube.com/watch?v=xspv9Vbf9qI %}


***
Thank you for reading, have a nice day!
- Follow me on Twitter - [@codewithsnowbit](https://twitter.com/codewithsnowbit)
- Subscribe me on YouTube - [Code With SnowBit](https://www.youtube.com/channel/UCNTKqF1vhFYX_v0ERnUa1RQ?view_as=subscriber&sub_confirmation=1)
Top 10 tools for Developers & Designers that will make life easy.
Tags: css, html
Published: 2022-01-20 10:36:02

---
title: Top 10 tools for Developers & Designers that will make life easy.
published: true
description: Top 10 tools for Developers & Designers that will make life easy.
tags: css, html
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8pz6xjxkpegb38807vl8.jpg
---
i). A CSS Grid Generator tool, Generates CSS grid easily.

> https://cssgrid-generator.netlify.app/

ii). Amazing collection of Beautiful Pprebuilt CSS buttons.

> https://markodenic.com/tools/buttons-generator/

iii). CSS Box shadow generator, Generate box-shadow the way you like.

> https://box-shadow.dev/

iv). A Neomorphic style designer tool, Build your component in neuromorphic design with ease

> https://neumorphism.io/#e0e0e0

v). Generate SVG Waves easily, static and animated waves in a jiffy.

> https://svgwave.in/

vi). A CSS Separator generator, generate section separator of your choice, an make your website beautiful.

> https://wweb.dev/resources/css-separator-generator/

vii). Generate CSS gradients with easing styles. highly customizable.

> https://larsenwork.com/easing-gradients/

viii). Generator for fancy border Radius like a blob. Generate your own cool border-radius with this tool

> https://9elements.github.io/fancy-border-radius/#24.44.44.45--

ix). Generate beautiful blob shapes easily. A very handy tool for backgrounds.

> https://blobs.app/?e=6&gw=6&se=3766&c=d1d8e0&o=0

x). A Collection of free as well as paid, beautiful-looking illustrations for your next app or website.

> https://drawkit.com/

## Bonus

> https://free-for.dev/#/
onClick handlers with Currying (React)
Tags: react, javascript, beginners, webdev
Published: 2022-01-20 10:35:02

How do you pass a function with an argument to an onClick event in React?

You are probably all familiar with the fact that when passing a function that takes an argument to an onClick event (or any other event), you have to wrap it with an anonymous callback function.

For instance:

```
<button onClick = { () => myFunction(argument) } />
```

We do it because we want to have a pointer to a function triggered upon a click. If we pass the function without a callback, it will get fired right when the DOM is mounted.

But there is another option. We can pass an anonymous callback to our handler. This way, our handler itself will serve as a pointer, and we will not have to give an anonymous function to our onClick event. The name of this design pattern is called currying.

```
const myHandler = (text:string) => () => alert(`${text}`)
```

When is this useful?

It could be helpful when we intend to use our handler in many events (for example, mapping an array). Instead of creating useless callback functions for each event, we create them only once in the handler.



![currying react example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u5y40958np92nccpxubx.jpeg)
How to migrate a directory from git repository to another one preserving git history. Bitbucket example
Tags: git
Published: 2022-01-20 10:20:48

Assume we migrate:
* The `folder2` from `git@bitbucket.org:myproject/myrepo.git`
  ```
  myrepo
  │   README.md
  └───folder1
  └───folder2
```
* to `git@bitbucket.org:newrepo.git`

How to do this:

1. To make it safe, clone `myrepo.git` into a new directory
    ```shell
    mkdir myrepo-folder2-migration
    cd myrepo-folder2-migration

    git clone 
    git@bitbucket.org:myproject/myrepo.git

    cd myrepo

    #prevent pushing into it
    git remote rm origin
    ```

2. Filter git history to keep only files in `folder2`
    ```shell
    git filter-branch --subdirectory-filter folder2 -- --all
    ```

3. Clean unwanted data
    ```shell
    git reset --hard
    git gc --aggressive 
    git prune
    git clean -fd
    ```

4. It should contain only the files from `folder2` in the root git directory now

5. Go back and prepare to work for the newrepo
    ```shell
    cd ..

    pwd
    #make sure you're in myrepo-folder2-migration
    ```

6. Clone the empty repository
    ```shell
    git clone git@bitbucket.org:newrepo.git

    cd newrepo
    ```

7. Create a connection to local repository, we're going to pull from it
    ```shell
    git remote add old-repo ../myrepo
    ```

8. Pull files from the old repo
    ```shell
    git pull old-repo master --allow-unrelated-histories
    ```

9. Remove the connection with local
    ```shell
    git remote remove old-repo
    ```

10. Push the changes to the remote origin
    ```shell
    git push
    ```

The new remote repository should contain files from `folder2` inside the root directory now.

I followed https://medium.com/@ayushya/move-directory-from-one-repository-to-another-preserving-git-history-d210fa049d4b with adjustments I found important and clear for understanding.
10 interesting facts about Solidity
Tags: solidity, ethereum, smartcontracts
Published: 2022-01-20 10:16:54

1. You can mark a function as pure. It is partially enforced.
2. Unicode text is handled, but has to be indicated as one
3. It has a type address for Ethereum adresses
4. It supports time units. You can write for example x = 5 days
5. It supports polymorphism
6. It differentiates int variables by sizes
7. It is statically typed
8. Can be used to write contracts
9. Is similar to JavaScript, C++, Typescript
10. It was proposed by Gavin Wood,
Should you use useState or useRef?
Published: 2022-01-20 10:12:22

***useState*** and ***useRef*** both are used to store component state in React. But there is a fundamental difference between them. They work differently. 

***useState*** copies the data and returns that data as state. On the other hand ***useRef*** stores the reference to that data. For better understanding let's see a simple example of what happens when we assign data to a variable in JavaScript. I found out that these two work exactly the same way (from my experience).

- Example 1:
```js
const value1 = [1, 2, 3, 4];
const value2 = value1;

console.log(value1) // [1, 2, 3, 4]
console.log(value2) // [1, 2, 3, 4]
console.log(value1 === value2); // true
```

- Example 2:
```js
const value1 = [1, 2, 3, 4];
const value2 = [1, 2, 3, 4];

console.log(value1) // [1, 2, 3, 4]
console.log(value2) // [1, 2, 3, 4]
console.log(value1 === value2); // false
```

Take a look at these examples. Two variables output same values but when comparing with each other, the output is different. Why does this happen?

It happens, because in the first case by declaring `value1 = value2` we're assigning it a reference to `value1`. As the `value2` is referencing to `value1`, it's like comparing `value1 ===  value1` which is true cause the memory location is the same. Also in any given point of time, if you change the value of `value2` then `value1` will be changed too.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7el5o89vgfy3nr8at4rn.png)


But in the second case, we're not referencing any variable to another. Their values are stored in their own memory location.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/axxlcqne90vjftfvyzhi.png)

And while comparing, compilers aren't comparing values, instead comparing memory location. As the location is different, we're getting `false` as the output.

And this same situation occurs for the `useState` and the `useRef` hook.
So, if you need to store data then use `useState` hook and if you need to store reference to anything in the component, use `useRef` hook.
SPFx App Configuration, dev vs prod
Tags: spfx, webpack, node
Published: 2022-01-20 09:48:19

The [Read and manipulate SPFx configuration values in your code like a boss](https://spblog.net/post/2018/06/24/Read-and-manipulate-SPFx-configuration-values-in-your-code-like-a-boss) by [Sergei Sergeev](https://spblog.net/page/profile) is a very good start for setting different configurations for different environments.

In the meantime however, the [cross-env](https://www.npmjs.com/package/cross-env) is in a maintenance mode, and at the same time we got some other tools we can use. 

Building on top of the **Advanced** section of Sergei's article, I did the following changes to make things work with a minimum effort:

```powershell
npm install webpack-merge --save-dev
```

##### gulpfile.js 
```javascript
'use strict';

const build = require('@microsoft/sp-build-web');
const webpack = require('webpack');
const { merge } = require('webpack-merge'); //<--NEW
const argv = build.rig.getYargs().argv; //<--NEW

build.addSuppression(`Warning - [sass] The local CSS class 'ms-Grid' is not camelCase and will not be type-safe.`);

var getTasks = build.rig.getTasks;
build.rig.getTasks = function () {
    var result = getTasks.call(build.rig);
    result.set('serve', result.get('serve-deprecated'));

    return result;
};

//NEW
build.configureWebpack.setConfig({
    additionalConfiguration: function (config) {
        console.log(argv);
        let defineOptions;

        if (argv.production) {
            console.log('***********    Applying production settings to webpack *********************');
            // specify production keys here
            defineOptions = {
                'apiUrl': JSON.stringify('https://production_Url')
            }
        }
        else { 
            console.log('***********    Applying development settings to webpack *********************');
            defineOptions = {
                'apiUrl': JSON.stringify('https://dev_Url')
            }
        }

        return merge(config, {
            plugins: [
                new webpack.DefinePlugin(defineOptions)
            ]
        });
    }
});

build.initialize(require('gulp'));

```

Have you noticed the `const argv = build.rig.getYargs().argv;`? I spotted it in [another of Sergei's articles](https://www.npmjs.com/package/yargs), and immediately used it to replace [Yargs](https://www.npmjs.com/package/yargs).

From this moment on, when calling gulp commands, the `console.log(argv);` command will print a list of available arguments. No changes to **package.json** required.

So for example: 
- `gulp serve --nobrowser`: production: false
- `gulp bundle`: production: false
- `gulp bundle --ship`: production: true
How to Configure the Settings of your Tplink Router with Tplinkwifi.net
Tags: computerscience, security, ncybersecurity
Published: 2022-01-20 09:40:26

**[Tplinkwifi.net](https://www.tplinkwifii.com/)** is a gateway to configure the settings of your router. Connect your device to the router’s network and then enter the web address or the default IP address. You will notice that you are directed to the login page of the router now. Here, enter the username and the password. You can now access the router settings page. Get in touch with our team if you are facing any issues or having any confusion regarding setup, log in or anything.
**[http://tplinkwifi.net](https://tplinkswifi.net/)**
css animation: animate when hover
Tags: css, animation
Published: 2022-01-20 09:35:23

## Senarior
- Want to simple animation when hover an element

## Demo

![Demo image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/otc6e31efshg6zz7rf3w.gif)

## Code

```html
<!DOCTYPE html>
<html>
  <head>
    <style>
      body {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
      }
      div {
        width: 100px;
        height: 100px;
        position: relative;
        border: solid 2px black;
      }

      div:hover {
        animation: hoverDiv 1s forwards;
      }

      @keyframes hoverDiv {
        100% {
          box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px,
            rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;
          border: solid 2px whitesmoke;
        }
      }
    </style>
  </head>
  <body>
    <div>Hover me</div>
  </body>
</html>

```
Ein gesundes und frohes neues Jahr von der betadots GmbH
Tags: puppet, automation, cloud, kubernetes
Published: 2022-01-20 09:02:53

Wir freuen uns unser neues Team bei der betadots GmbH vorstellen zu können. Ziel der betadots GmbH ist es, unsere Kunden und Geschäftspartner mit Wissen und konkreten Lösungen zu unterstützen. Wir sind in der Lage IT Abteilungen beim Kennenlernen und Einführen von IT Automatisierung mit Puppet und Cloud Technologien zu unterstützen.

Unsere Erfahrung basiert auf Tätigkeiten in vielen unterschiedlichen IT Organisationen und Branchen wie Finanzwesen, Telekommunikation, Gesundheitssektor, Behörden sowie der Internet Branche. Dazu gehören Konfigurationsmanagement und allgemeines IT Service Management, Orchestrierung und das Verständnis für die Funktionsweise komplexer Plattformen, Metriken und Alarmierung, Speicher und Netzwerke sowie Cloud und Container.

Unsere Trainer haben umfangreiche Erfahrung mit Kursen zu Foreman und Katello, Puppet und Puppet Enterprise sowie Git und Gitlab.

Wir freuen uns Sie und Ihre Firma bei den Themen DevOps Kultur, Agile Systemadministration und IT Automatisierung zu unterstützen.
Schreiben Sie uns: info@betadots.de