teleren/devto huggingface dataset:
Kituaz.Com - Tool to create character names in the game that contain special characters
Tags: elixir, tutorial
Published: 2021-01-22 12:24:37

First of all, Kituaz would like to say hello, best wishes to all of you. Thank you for watching and accessing the website to create your special character board. With the desire to build a website that will help you create special characters as well as create online text, provide beautiful fonts, emoji symbols, art fonts or the most beautiful special characters 2021 to use. used for games, games or social networks ,. This will help you stand out, assert your cool level. Kituaz.com is gradually improving and upgrading the functions of creating documents, characters, word count tools ... to convert beautiful fonts online for everyone to have the best experience when using them. All functions will be updated regularly by administrators to bring you the most attractive character creation tools.

[Link](https://kituchat.com/font-chu-dep/)	 

Kituaz was established in October 2020 with the main function as a tool to express emotions with special characters, emoji, game name creation tool with beautiful symbols, funny emoticons. With more than 1001 special characters you can definitely use in today's top online games like FF (Free Fire), Pubg, special characters ff, Lol, coalition special characters, empire (Aoe) ... or any other social network that allows naming according to special characteristics. There are also a variety of other unique tools you should explore such as: Font Maker, Emoticons, Symbol Icons, Artistic Text Creators ...

What are special characters?
Create beautiful special character names or have the English name special characters list which are variations of common characters, they will not appear in the alphabet you learn but they are special characters. They are symbols that can be minimized or added decorative, looking very nice and eye-catching. Based on these special symbols, you will still guess what they mean compared to the original characters.

For example, you can easily understand as normal "a", when in special mode it will look like: "α", "ค", "ⓐ", "๖ ۣۜ A", "🅰" ... still very Many more, you can explore above.

ۣۜ A ๖ ۣۜ B ๖ ۣۜ C ๖ ۣۜ D ๖ ۣۜ E ๖ ۣۜ F ๖ ۣۜ G ๖ ۣۜ H ๖ ۣۜ I๖ ๖ ۣۜ H ๖ ۣۜ I ๖ ۣۜ J ๖ ۣۜ K ๖ ۣۜ L ๖ ۣۜ M ๖ ۣۜ N ๖ ۣۜ O ๖ ۣۜ P ๖ WYVR

Currently, we have many different sets of special emoji characters, emoticons, but the emoji of smiley, lenny face or emoticon are one of the most searched for and Most Used.

These emoticons can be combined together to form messages, images expressing emotional status or can also create a photo, picture message quite unique and impressive. Here is a list of over 1001 of the 2021 most beloved special characters.
[Link](https://kituaz.com/)
Autocompletado de alta velocidad Starship
Tags: tip, cli
Published: 2021-01-22 12:13:04

---
title: "Autocompletado de alta velocidad Starship"
published: true
description: "Como desarrolladores pasamos mucho tiempo en la línea de comandos, la mayoría del tiempo escribimos los mismos comandos una y otra vez, tan solo cambiando un poco la orden. Podemos ser más eficientes"
tags: ["tip", "cli"]
cover_image: https://marceloandrader.github.io/images/starship.png
---

Como desarrolladores pasamos mucho tiempo en la línea de comandos,
la mayoría del tiempo escribimos los mismos comandos una y otra vez,
tan solo cambiando un poco la orden. Podemos ser más eficiente en
este ambiente creando alias o teniendo scripts. Pero en lo personal hay una
herramienta que me gusta mucho y es una de las primeras que instalo
en nuevas máquinas o servidores porque ahorra mucho tiempo de tipeo.

[Starship](https://starship.rs/) es un prompt para cualquier shell
y sistema operativo funciona incluso con powershell en windows y
permite el autocompletado de órdenes completas no solo de nombres de programa, opciones o archivos.

Es muy difícil describir lo que hace con palabras en su página web tiene
un vídeo con un demo.
Small tip for cypress test reports
Tags: unittesting, cypress, whatilearnedtoday
Published: 2021-01-22 10:35:12

##Introduction
This post is about a small tip while creating xml and json coverage reports using cypress tool.


##Use case

I am using cypress as end to end testing tool for my react redux application which is being deployed on azure.

There is plenty on the web to guide us in configuring our test environment like executing scripts to run test cases, manage code coverage, publish test reports, etc. So I am not discussing that here.

In my case I used [mochawesome](https://www.npmjs.com/package/mochawesome) report generator to generate html test reports .

But with azure, it supports xml test reports or test cases.And cypress provides us the option of configuring multiple reporters which can fulfill our usecase. As mentioned under [official documentation](https://docs.cypress.io/guides/tooling/reporters.html#Multiple-reporters) we can enable multiple reporters option using

```
{
  "reporter": "cypress-multi-reporters"
}
```

Then I decided to use mochawesome reporter to generate individual json reports which were merged using [mochawesome-merge](https://www.npmjs.com/package/mochawesome-merge) and an html report was generated with [mochawesome report generator](https://www.npmjs.com/package/mochawesome-report-generator).

Getting a readable html report served me well for development purpose. Now I also had to generate xml reports which I would use in azure environment.I went with [mocha junit reporter](https://www.npmjs.com/package/mocha-junit-reporter).

###How I did it?
1. enable multi reporter option
2. provide reporter options for mochawesome and mocha junit

```javascript

"reporter": "cypress-multi-reporters",
  "reporterOptions": {
    "reporterEnabled": "mochawesome, mocha-junit-reporter",
    "mochawesomeReporterOptions": {
      "reportDir": "cypress/reports/mocha",
      "quite": true,
      "overwrite": false,
      "html": false,
      "json": true
    },
    "mochaJunitReporterReporterOptions": {
      "mochaFile": "cypress/results/results-[hash].xml"
    }
```

Below is my current cypress test environment configuration file.
```javascript
{
  "baseUrl": "http://localhost:3000/",
  "experimentalComponentTesting": true,
  "numTestsKeptInMemory": 0,
  "reporter": "cypress-multi-reporters",
  "reporterOptions": {
    "reporterEnabled": "mochawesome, mocha-junit-reporter",
    "mochawesomeReporterOptions": {
      "reportDir": "cypress/reports/mocha",
      "quite": true,
      "overwrite": false,
      "html": false,
      "json": true
    },
    "mochaJunitReporterReporterOptions": {
      "mochaFile": "cypress/results/results-[hash].xml"
    }
  },
  "video": false,
  "chromeWebSecurity": false
}

```
I am just generating json reports to get a better html report and xml reports for deployment purpose.

I hope this serves as a tiny and helpful tip. Cheers !!!
Apenas começando
Tags: beginners
Published: 2021-01-22 12:02:20

Estou apenas começando como programadora. Me formei em tecnologia em Jogos Digitais sabendo o básico do básico sobre como programar, tenho dificuldade em compreender a formatação estranha do código, onde colocar cada informação. Fiz e faço varios cursos sobre o programação em python.

Então bora lá rsrs
Casing in javascript rule of thumb
Tags: javascript, casing
Published: 2021-01-22 11:42:57

Rule of thumb:
instances/variables etc as camelCase
classes as PascalCase
rage comments as sPOngE casE - e.g. 'I Don't KNow WHY thiS isn'T WORkiNG proPERlY SO I'm pUTtING iN A FuDge'
Dealing with 100vh on iOS Safari in TailwindCSS
Tags: showdev, css, node
Published: 2021-01-22 11:32:33

Recently I've been needing to develop for iOS Safari, in which I found out that [100vh is not quite 100vh on there](https://stackoverflow.com/a/37113430).

Now, there are fixes for this. Namely by using `height: -webkit-fill-available`, [as demonstrated here](https://allthingssmitty.com/2020/05/11/css-fix-for-100vh-in-mobile-webkit/). This however has the unfortunate side effect of also targetting Chromium-based browsers.

To fix that you can check for the support of `-webkit-touch-callout: none`. With that, only iOS and iPadOS Safari are targetted.

In order to make this much easier to use in Tailwind I created a plugin for it.

You can find the plugin here: https://www.npmjs.com/package/@rvxlab/tailwind-plugin-ios-full-height
Readymade Software vs Custom Software- Which is Better for Your Business?
Tags: software, custom, android
Published: 2021-01-22 11:28:42

In this technology-driven age, companies tend to integrate advanced software in their business system to remain competitive and expand their reach. However, as technology evolves and market trends keep on changing, we witness the changes in the company’s software requirement. Today, ready-made or out-of-the-box solution are available to meet urgent business needs. Also, the mobile app development company can build a custom software solution with desired features to meet your company’s requirements for a long time.

In this post, we will go through the difference between a ready-made app solution and a custom software or app solution. It will certainly help you choose the right software for your company.

Let’s start with the ready-made or off the shelf software.

Ready-made Software

These days, you can have a ready-made app solution available for almost all major business verticals. Usually, corporate clients who are tech-savvy and familiar with customization and terminology along with the mechanism of the software, opt for the ready-made app solution. Here it is fair to mention that ready-made software cannot design to meet your business needs effectively, rather you need to change your business model in line with the software.

Factors to be considered while opting for Ready-made Software

    Reduced TTM and Upfront Cost- The ready-made software is easy to install and you can start using it quickly without spending more money.
   
Read More: https://www.suriainternational.com/readymade-software-vs-custom-software/
LGTM Devlog 24: Sprint 3 plans
Tags: devjournal, python, github, serverless
Published: 2021-01-22 11:23:30

Sprint 3 is here! What are we doing? Then next logical task we need to do now that how the quests and game data are stored have been worked out, is to make the user aware of the new quest started by the game creation flow. This requires three things:

1. A way to define this first step in the quest data - we can define quests right now, but not what goes on in them
1. A way to read this "new quest" step from the quest data and create a new Issue on Github
1. A way to scan for all of these "new quest" steps (and in fact any other step) in the list of quests ready to be processed so that any new actions the game need to take every tick can be run. 

Our tasks look something like this:
![Sprint 3 Plan](https://dev-to-uploads.s3.amazonaws.com/i/cmd0v10uk82u4lahlva6.png)

In diagram form, our architecture looks a bit like this right now:

![LGTM diagram](https://dev-to-uploads.s3.amazonaws.com/i/wfh6twqo0ig3n3t0xk0y.png)
 

# Quest Queue
I'm now renaming "Task Queue" to "Quest Queue" as it's now primarily a list of active quests, each of which is either new and awaiting processing, or awaiting some trigger action from the user.

The game's "tick" loop will run every few minutes (I'll tune this to balance cost and processing time), and will mainly scan through this list of quests to check whether an action needs to be taken. But will sometimes schedule new quests to be dropped on users. This means Quests get processed under three scenarios:

* When a user starts a game, the first quest should be processed immedaitely
* Randomly, users should acquire new quests, maybe once every day to a few days
* Whenever users provide a trigger

# Triggers
There needs to be a few different triggers that the game must detect to progress the game, although I'm not addressing them this sprint, it makes sense to think about them:

* Comments in reply to Issues. I expect to be able to accept user commenting on issues, to be able to implement simple types of quests along the lines of "I need you to find some deleted text in a previous commit", this allows the game to accept simple text answers to these quests
* Commits. It's a certainty that we need to be able to check commits made by the user, and therefore actually look at the files in there
* PRs. We definitely need to be able to check PRs, as this is an important thing to be able to test

We can poll GitHub for this stuff, but if we want the game to be responsive for players (i.e. be able to respond within a few seconds to minutes of a player's action), then we potentially need to poll for a LOT of stuff from GitHub every few minutes, which is going to be too much, for both them and us. So we need to rely on as many webhooks and notification features as possible. That'll have to be addressed in the next sprints, but it does mean at this point we shouldn't think too hard about building a polling loop as it's probably going to be a dead-end approach.
How to update an object state in React.Js
Tags: javascript, react, reactnative
Published: 2021-01-22 11:20:31

This would be a continuation to basic react state change, Let's learn how to modify objects now with similar examples.

Let's learn the correct way to do it today...

## Let's take following cases.

1. Object change
2. Object inside an Object.
3. Object inside an array inside an object.

```jsx
const [user, setUser] = useState({ id: 1, username: 'user01' });

const Component = () => {
	// Method 1 -> Use object destructure
	const method1 = () => {
	    const newUser = {
	      ...user,
	      username: `user02`
	    };
	
	    setUser(newUser);
	};
	
	// Method 2 -> Use Object.assign method.
	const method2 = () => {
	    const newUser = Object.assign({}, user, { username: 'user02' });
	    setUser(newUser);
	};

	return <pre>{JSON.stringify(user, null, 4)}</pre>;
}
```

With method 1 we are using object destructuring to copy the original object and then append the property at the last to overwrite it.

With method 2 we are using `Object.assign` to copy the object and then merging it with a new object. In Object.assign the priority is right to left, right most objects gets the higher priority.

Let's update an object inside an object process is very similar but let's review that as well.

```jsx
const [user, setUser] = useState({ id: 1, username: 'user01', address: { city: 'Mohali', country: 'India' } });

const Component = () => {
	// Method 1 -> Use object destructure
	const method1 = () => {
	  const newUser = {
			...user,
	    address: {
				...user.address,
				city: 'Chandigarh'
			}
	  };
	
	  setUser(newUser);
	};
	
	// Method 2 -> Use Object.assign method.
	const method2 = () => {
		const newUser = Object.assign({}, user, { address: Object.assign({}, user.address, { city: 'Chandigarh' }) });
	  setUser(newUser);
	};

	return <pre>{JSON.stringify(user, null, 4)}</pre>;
}
```

Lastly let's update an object inside an array inside an object for this we will combine array update and object update together.

```jsx
const [user, setUser] = useState({ id: 1, username: 'user01', children: [{ id: 1, username: 'child1' }, { id: 2, username: 'child2' } ] });

const Component = () => {
	// Method 1 -> Use object destructure
	const method1 = (childIndex) => {

		// Let's create a copy of the array.
		const child = [...user.children];

		// Updating the {childIndex} of the copy based on the previous methods we discussed.
		child[childIndex] = { ...child[childIndex], username: 'updatedChild' };

	  const newUser = {
			...user,
	    children: child
	  };
	
	  setUser(newUser);
	};
	
	// Method 2 -> Using splice method.
	const method2 = (childIndex) => {
		// Let's create a copy of the array.
		const child = [...user.children];

		// Updating the {childIndex} of the copy based on the previous methods we discussed.
		child.splice(childIndex, 1, { ...child[childIndex], username: 'updatedChild' });

	  const newUser = {
			...user,
	    children: child
	  };
	
	  setUser(newUser);
	};

	return <pre>{JSON.stringify(user, null, 4)}</pre>;
}
```
January 22nd, 2021: What did you learn this week?
Tags: weeklylearn, discuss, weeklyretro
Published: 2021-01-22 11:13:58

It's that time of the week again. So wonderful devs, what did you learn this week? It could be programming tips, career advice etc.

<center>

![Image of the brain](https://media.giphy.com/media/ojmB7lOn3VUU8/giphy.gif)
</center>

Feel free to comment with what you learnt and/or reference your TIL post to give it some more exposure.

{%tag todayilearned %}

And remember, if something you learnt was a big win for you, then you know where to drop it as well.👇👇🏻👇🏼👇🏽👇🏾👇🏿

{%link https://dev.to/devteam/what-was-your-win-this-week-43k %}

<center>

![Little kid making a fist as if to say "Yes!"](https://media.giphy.com/media/6brH8dM3zeMyA/giphy.gif)
</center>
10 CSS Tabs
Tags: javascript, webdev, beginners, css
Published: 2021-01-22 11:10:58

---
title: 10 CSS Tabs
published: True
tags: #javascript #webdev #beginners #css
---
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/9r3tnkk2cz4hei5yiuxy.jpg)

**If You Like This Article then check Out more Examples
[30+ CSS and HTML Tabs Example](https://gscode.in/html-tabs)**
https://gscode.in/html-tabs


**1. Just CSS, no JS!**
**Author : wallaceerick**

{% codepen https://codepen.io/wallaceerick/pen/ojtal %}


**2.
Author : mildrenben**
{% codepen https://codepen.io/mildrenben/pen/bdGdOb %}

**3.** A lot of CSS tabs need either the tab content or labels to be position absoluted, or sacrifice the selected state on the tabs.</p>

<p>This uses flexbox and order to have both.</p>

<p>It also allows you to drop down to an accordion when on mobile.</p>
**Author : mildrenben**
{% codepen https://codepen.io/mikestreety/pen/yVNNNm %}

**4.**
<p>Make tabs without javascript. </p>

<p>More documentation here (in spanish)
<a href="http://flkt.mx/pitaya/componentes.html#pestanias" target="_blank">http://flkt.mx/pitaya/componentes.html#pestanias</a></p>
**Author : flkt-crnpio**
{% codepen https://codepen.io/flkt-crnpio/pen/WxROwy %}

**5.**
<p>This is a material inspired tabs modal that gives the user a smooth transition between each panel. The navigation features the iconic Material Design Ripple effect, along with a border that slides around to give the user a hint of which tab is active.</p>
**Author :andytran**
{% codepen https://codepen.io/andytran/pen/zvMGXr %}

**6.**
**Author : _massimo**
{% codepen https://codepen.io/_massimo/pen/oYWbqL %}
**7.**
**Author : tutsplus**
{% codepen https://codepen.io/tutsplus/pen/VLeXqy %}

**8.**
**Author : nenadkaevik**
{% codepen https://codepen.io/nenadkaevik/pen/odyrGm %}

**9.**
**Author : aaroniker**
<p>From: <a href="https://dribbble.com/shots/2561589-Tabs" target="_blank">https://dribbble.com/shots/2561589-Tabs</a></p>

{% codepen https://codepen.io/aaroniker/pen/pezemX %}

**10.**
**Author : Kseso**
{% codepen https://codepen.io/Kseso/pen/JDFto %}

**11**
{% codepen https://codepen.io/woranov/pen/NRqLWK %} 


**If You Like This Article then check Out more Examples
[30+ CSS and HTML Tabs Example](https://gscode.in/html-tabs)**
https://gscode.in/html-tabs
How I can rewrite the package name in composer.json thoughout the git history and tags?
Tags: help, php, composer, packagist
Published: 2021-01-22 11:09:55

As I ask on:

https://stackoverflow.com/q/65843966/4706711

I forked a library as my own and I want to rewrite the package name into package.jso throughout the git history.

So do you have any sort of idea how I can do this?
Time Machine - Computational Thinking 101 | Beginner
Tags: cpp, programming, beginners, algorithms
Published: 2021-01-22 11:06:29

Continuing our so-called 'Zero-to-Hero' series on Computational programming, today we are going to make a 'real' TIME MACHINE.

### Time Machine
Alright, this one is easy. Given a positive number which donates **total seconds**, we have to find total _hours, minutes and seconds_, and finally print them all in this format: `hh:mm:ss`.

### Solution
1. As you've guessed, we need an integer variable to hold the **seconds** input from the user. Let's call it `totalSeconds` and scan it from the console right away.
```c
int totalSeconds;
scanf(" %d", &totalSeconds);
``` 

2. Now, with a simple yet powerful algorithm, we can extract all the **hours** from `totalSeconds`. Just divide `totalSeconds` by 3600 (cuz 1h = 3600s). 

> In C language `int / int` is a floor division ([see here](https://www.informit.com/articles/article.aspx?p=2062174&seqNum=4)). 

Let's save *the extract* in a variable called `hours`! 
```c
int hours = totalSeconds / 3600; // since 1h = 3600s
```

3. Minutes!  Simply apply module `(%)` to `totalSeconds` by 3600. This will give you the remainder seconds after hours are extracted. Reassign the result to `totalSeconds` and repeat Step #2 only changing divider into 60 (if you know what I mean ^^).

```c
totalSeconds = totalSeconds % 3600; // this will remove all the hours
int minutes = totalSeconds / 60; // since 1m = 60s
```

4. Remaining seconds can be found, *yes you guessed it!*, by applying modulo operator on `totalSeconds` by 60 (think about it 🤔).

```c
int seconds = totalSeconds % 60; // after we remove all the minutes, whatever is left are the remaining seconds
```

Let's print the result in a humanoid form!
```c
printf("%02d:%02d:%02d\n", hours, minutes, seconds);
// 02 - give me at least 2 cell to print, and fill 0s in empty cells
```

#### Tadaaa, a time machine!
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/4cllrmv0e8apfoqvvz46.jpg)

---

RUN the code live here:
{% replit @codwiznet/TimeMachine %}

---

If you liked the `code-crime` we committed here, do subscribe and join the `subssquad`!
How to flatten an array in JavaScript?
Tags: javascript
Published: 2021-04-15 13:16:28

---
title: How to flatten an array in JavaScript?
published: true
date: 2021-01-22 11:00:00 UTC
tags: javascript
canonical_url: https://blog.murtajaziad.xyz/how-to-flatten-an-array-in-javascript/
---

In this article, you will learn how to flat an array in JavaScript.

* * *

That’s the array of arrays that we have:

```js
let arrays = [[1, 2], [3, 4], [5]];
```

You can flat it easily using `.flat()` method and assigning it to a new variable:

```js
let flattenedArray = arrays.flat();
```

If you want to see the flattened array, just log it to the console:

```js
console.log(flattenedArray); // [1, 2, 3, 4, 5]
```

and yeah, it’s working :D