teleren/devto huggingface dataset:
I wrote an API in Kotlin +Flow to make Android Contacts straightforward to use (no ContentProviders)
Tags: showdev, android, kotlin
Published: 2021-09-28 11:57:33

Historically, using the Contacts API in Android has been a pain. Developers need to use ContentProviders which can be tedious to work with. The lack of a type-safe API leads to repeated errors, developer frustration, along with a waste of time and resources for the developer and the team.

As a result, ContactStore was born. Contact Store is a modern contacts Android API written in Kotlin. It utilises Coroutine's Flow to notify the developer for updates happening to the Contacts database.

Instead of requesting for contact details in a SQL-like fashion, developers can use a strongly-typed API to query for the information they need. The following sample returns a contact's [Structured Names](https://developer.android.com/reference/android/provider/ContactsContract.CommonDataKinds.StructuredName) and phone numbers:

```kotlin
val store = ContactStore.newInstance(application)

store.fetchContacts(
    predicate = ContactLookup(
        inContactIds = listOf(contactId)
    ),
    columnsToFetch = listOf(
        ContactColumn.NAMES,
        ContactColumn.PHONES
    )
)
    .collect { contacts ->
        val contact = contacts.firstOrNull()
        if (contact == null) {
            println("Contact not found")
        } else {
            val phones = contact.phones
            val contactString = contacts.joinToString(", ") { contact ->
                "Names = ${contact.firstName} ${contact.middleName} ${contact.lastName} " +
                        "phones = ${phones.map { "${it.value} (${it.label})" }}"
            }
            println("Contacts emitted: $contactString")
        }
    }
```


Source code on [Github](https://github.com/alexstyl/contactstore)

Your feedback is greatly appreciated 🙏 [Follow me on Twitter](https://twitter.com/alexstyl) for further updates
Global Attributes - Contenteditable Attribute✍
Published: 2021-09-28 11:56:47

In HTML Contenteditable Attribute, is a Global Attribute.

By clicking on the paragraph, the content of it can be edited similar to an input text field.

It has two attribute values: true and false.
1. true - it specifies that the element is editable.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/49w1brnbb3tt0biywll0.png)

2. false - it specifies that the element is not editable.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vapuwc7lrz6879pckqah.png)
Do you need a Automata Library ?
Tags: discuss, cpp, opensource, hacktoberfest
Published: 2021-09-28 11:42:54

In this day i see that there is no implementation of an Automata Library in **C++**.
I think it can be useful for the community start a new open-source project for this.

## What is an Automaton?
> is a relatively self-operating machine, or control mechanism designed to automatically follow a properations, or respond to predetermined instructions. ( [Wikipedia](https://en.wikipedia.org/wiki/Automaton) ).

## What is the Automata Theory?
![Classes of Automata](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ywie65p4kcw1ncadjrov.png)
> Automata theory is the study of abstract machines and automata, as well as the computational problems that can be solved using them. ( [Wikipedia](https://en.wikipedia.org/wiki/Automata_theory) )

## Why an Automata Library?
There are so much reason to develop an automata library, but the most important is the capability of study and solve computational problem that can be solved with an **Automaton**. For Example there are a lot of study on **Formal Languages Theory** that use the Automata.
Moreover Automata find a major role in **theory of computation**, **compiler construction**, **artificial intelligence**, **parsing** and **formal verification**.

## Why C++?
I thought about *C++* for performance reasons. With large automata the performance of other languages ​​can be a bottleneck, so *C++* can be a solution to this.

## Final thoughts
So do we need an **Automata Library**? Maybe we do or maybe we don't but either way please let me know if you are interested in this project? I look forward to reading your comments.

Thank you so much for reading.
How to use the JavaScript += operator?
Tags: javascript, tutorial, beginners
Published: 2021-09-28 11:33:24

In this tutorial, we look at how to use the JavaScript += operator. We explain its use-case and break down the code to allow further learning.

This tutorial is a part of our initiative at [Flexiple](https://flexiple.com/), to write short curated tutorials around often used or interesting concepts.

### Table of Contents - JavaScript +=
- [What does += mean in JavaScript?](#what-does-mean-in-javascript)
- [Syntax, Code & Explanation](#syntax-code-amp-explanation)
- [Closing thoughts - JavaScript +=](#closing-thoughts-javascript-)

## What does += mean in JavaScript?
The JavaScript += operator takes the values from the right of the operator and adds it to the variable on the left. This is a very concise method to add two values and assign the result to a variable hence it is called the addition assignment operator.

This operator is not only used to add numerical values but can also be used to concatenate strings together. Essentially it replaces the variable = a + b syntax with a += b.

## Syntax, Code & Explanation:
The syntax of the assignment operator is quite straightforward and does not require any prerequisites.
```javascript
x += y
```
In case you are still confused, I shall break it down even further. This method is just a shorter way of writing the following code.
```javascript
x = x + y
```
Here we are again taking the value on the right (y) and adding & assigning it to the value on the left (x). The assignment operator does the same in a more concise method.

### Code using JavaScript +=:
```javascript
//Code using JavaScript +=
//On int values
let x = 2;
let y = 5;
console.log(x += y); 
    
//On strings
let a = 'Hello'
let b = ' World'
console.log(a += b)
```
The output of the above code snippet is as follows.
```javascript
> 7
> "Hello World"
```
As you can see, the values of ‘y’ & ‘b’ have been added to the ‘x’ & ‘a’ respectively.

## Closing thoughts - JavaScript +=:
Using the JavaScript += operator would help increase code readability, and such minor changes would help while working with a group of senior developers.

Once you have familiarized yourself with the addition assignment operator (+=) I would recommend practicing the other assignment operators. There are seven in total ( =, +=, -=, *=, /=, %=, **= ), and mastering them all would help you go a long way.
help me to understand usort() in php 
Published: 2021-09-28 11:29:20

function so($a, $b) {
        if($a == $b) {
                return 0;
        } else {
                return $a > $b ? 1 : -1;
        }
}

$num = [5,3,2,1,4];
usort($num, 'so');
foreach($num as $value) {
        echo $value." ";
}

I write this code and the result is 1,2,3,4,5 and it is good! But I don't understand how this usort function actually work. I even don't understand what value $a and $b get to return 0, 1 or -1 can anyone explain me it?
WhatsappTracker
Tags: python, pandas, selenium
Published: 2021-09-28 11:26:02


have you ever wanted to know when your favourite contact was online on Whatsapp? now it is possible by using Whatsapp Tracker! Whatsapp Tracker is a Selenium based automation, it extracts details of your contact activity and stores it on your local machine for you to review it later! 


WhatsappTracker is a selenium based automation. it makes it possible to tracking your contact's without your touch, it stores time series of metrics to your local machine as a csv file, so you can have a look once finished.

https://github.com/itay-bardugo/whatsapp_tracker
EuroPython 2021: Edited videos of the first day available
Tags: europython, videos, conference
Published: 2021-09-28 11:02:48

We’re happy to release the first 42 cut videos of [EuroPython 2021](https://ep2021.europython.eu/) covering the [first day sessions](https://ep2021.europython.eu/schedule/28-july) of the conference. You can watch them on our YouTube channel: http://europython.tv/

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


Over the next few weeks, we’ll continue releasing the videos for the second and third day of the conference. 

In total, we will have more than 115 videos with lots of valuable and interesting content for you, so please stop by and check the playlist for more videos, or subscribe to our YouTube channel.

Enjoy,

EuroPython 2021 Team
https://ep2021.europython.eu/
https://www.europython-society.org/

---

*(Original post on https://blog.europython.eu/europython-2021-edited-videos-of-the-first-day-available/)*
Making of Three Dots Jumping Loader or Loading Status Animation using Vanilla CSS only
Tags: css, webdev, animation, webdesign
Published: 2021-09-28 10:47:50

Let's go step-by-step walk-through on How to Make a Simple Three Dots Jumping Loader or Loading Status Animation using Vanilla or Pure CSS only.
*If you want to skip reading then you can watch YouTube video on it. The link is at the end of the article.*
<br />

## Step-1: Setting up theme and container

Firstly, we will create a container in which we can have our loader and caption. The following will place the container at the centre of the page.

```html
	<div class ="container">
	  <div class="loader"></div>
	  <div class="caption"></div>
	</div>
```

```css
	body {
	  display: flex;
	  height: 100vh;
	  background: midnightblue;
	  overflow: hidden;
	}
	.container {
	  display: flex;
	  max-width: max-content;
	  flex-direction: column;
	  margin: auto;
	  border: 1px solid yellow;
	}
```

We have added a yellow border for the ease of visualisation, which should be removed at the end.

## Step-2: Adding the three dots

Now we will add the three dots. Since all the three dots have similar look, we can provide them a common class as `circle` and assign unique ids as `a`, `b` and `c` for animation purpose(you'll find why and how as we proceed further).
<br>
Here also we have added yellow border for the ease of visualisation, which should be removed at the end.

```html
	<div class ="container">
	  <div class="loader">
		<div class="circle" id="a"></div>
		<div class="circle" id="b"></div>
		<div class="circle" id="c"></div>
	  </div>
	  <div class="caption"></div>
	</div>
```

```css
   .loader {
	  width: 180px;
	  height: 80px;
	  margin: auto;
	  display: flex;
	  border: 1px solid yellow;
	}
	.circle {
	  width: 30px;
	  height: 30px;
	  background: white;
	  border-radius: 50%;
	  margin: 0 15px;
	}
```

## Step-3: Adding the caption

Let's add our caption and make sure it is properly placed properly with respect to the loader.

```html
	<div>
		<div class="loader">
		...
		</div>
	  <div class="caption">We are almost there...</div>
	</div>
```

```css
	.caption {
	  margin: auto;
	  font-family: arial;
	  font-size: 20px;
	  color: white;
	}
```

## Step-4: Animating the loader

We add a common animation property with animation-name as jump, animation-duration as 1 second, animation-timing-function as linear and animation-iteration-count as infinite. To make them jump at different time, we add animation-dealy to ids `b` and `c`. 

```css
	circle {
		...
		animation: jump 1s linear infinite
	}
	@keyframes jump {
	  0% {
		margin-top: 0;
	  }
	  35% {
		margin-top: -75px;
	  }
	  70% {
		margin-top: 0px;
	  }
	}


	#b {
	  animation-delay: 0.2s;
	}
	#c {
	  animation-delay: 0.4s;
	}
```

Now we can remove the yellow border, we don't need them anymore. Finally, we have our loading animation ready. Thank you for reading.You can also watch a How To YouTube Video on this topic.


Feel free to connect on Social Media. Please feel free to drop you opinion or any helpful tips.


Social Media Links: https://designingcoder.github.io

{% youtube c_408ArF1NM %}
In 7 lines of node.js - you can turn any database into Airtable like spreadsheet using NocoDB!  
Tags: node, database, webdev
Published: 2021-09-28 10:31:37

## So what is Airtable ?
Airtable is a low-code platform for building collaborative apps. It works like a part spreadsheet & part database.

<br>
<br>
<br>
## How are we going to turn any database into Airtable like spreadsheet ?
Using NocoDB

## Ok, What is NocoDB ?
- [NocoDB is a free & open source Airtable alternative](https://github.com/nocodb/nocodb) - that  turns your existing MySQL/Postgres databases into a smart and beautiful spreadsheets. 

![NocoDB - The Open Source Airtable](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fv98dny7q93srxetpi7e.png)

## Now, show me the code!
```js
(async () => {
    const server = require('express')();
    const {Noco} = require("nocodb");
    server.use(await Noco.init({}));
    console.log(`Visit : localhost:${process.env.PORT}/dashboard`)    
    server.listen(process.env.PORT);
})()

```

## Let's break down the 7 lines.

```js
(async () => {
    // require express 
    const server = require('express')();

    // require nocodb
    const {Noco} = require("nocodb");

    // mount nocodb as a middleware
    server.use(await Noco.init({}));

    // print 
    console.log(`Visit : localhost:${process.env.PORT}/dashboard`)    

    // listen to a port 
    server.listen(process.env.PORT);
})()

```
Yes, that is it - simple, minimalistic & boring. Like the way it should be while trying something new. 
## How does it work internally ?
- NocoDB depends on a database to store metadata about projects or spreadsheets. This can be specified using ```NC_DB``` environment variable. If ```NC_DB``` is absent then NocoDB defaults to SQLite storing this metadata.
- NocoDB Projects can be created in two ways 
  - First, on ```NC_DB``` database itself. Second, by connecting to external database.


![Screen Shot 2021-09-28 at 12.36.13](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1ttwudpcbfcxabia800t.png)
 
## So how to try this quickly ?
You can get started with just one command.

```
npx create-nocodb-app
```
or
```
docker run -d --name nocodb -p 8080:8080 nocodb/nocodb:latest
```
## Where can I find more about the project ?
Please find our github below -> you can [fork it](https://github.com/nocodb/nocodb) / [star it](https://github.com/nocodb/nocodb) / [twist it](https://github.com/nocodb/nocodb) / [turn it](https://github.com/nocodb/nocodb)
{% github nocodb/nocodb %}

## Excellent, so how to join NocoDB community ?
📣   Github : https://github.com/nocodb/nocodb
📣   Discord : https://discord.gg/5RgZmkW
📣   Twitter : https://twitter.com/nocodb

## Also, do you have a video demo ? 
We do!

### Using npx 
{% youtube K-UEecQyiOk %}
### Using docker
{% youtube v6Nn75P1p7I %}

Now, just happy hacking!
TYPO3 Talk With Anjali : Journey With T3Terminal
Published: 2021-09-28 10:26:21

Welcome to the TYPO3 Interview Series - 26!

Dear TYPO3 People, this week we have our own T3Terminal member, Anjali Bhatt with us this week for interesting TYPO3 Talk! Anjali works as marketing executive for T3Terminal and has been involved with T3Terminal since inception. Also being with TYPO3 since a long time, she shares her views on various aspects, I must say it's an interesting talk!

Grab that cup of coffee to explore Anjali's insights into his views, the history and potential of TYPO3 and the open source community, and how we can build a better TYPO3 ecosystem together!

Let's explore his journey with TYPO3 from then to now, and much more!

Full interview just a click away, https://t3terminal.com/blog/typo3-talk-with-anjali-journey-with-t3terminal/
My React App is Slow and I Don't Know Why
Published: 2021-09-28 09:59:20

What performance testing tools are available in React world, and how to start using them?

---

## Inspect what components are getting re-rendered

You can use [React Developer Tools](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en) to get a quick overview of what components re-render. Enable option *"Highlight updates when components render"*.
  
  
![rerender](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5dom6xgypvcdiu8cu9oz.gif)

---

## Figure out what renders to fix

Not all renders are equal. Some are less performant than others. Don't try to fix every unnecessary render. Instead, find bottlenecks and fix them. [React Developer Tools](https://www.notion.so/My-React-App-is-Slow-and-I-Don-t-Know-Why-f8b67e4b37c44d23b685b66d1f545c08) Profiler tab will help you with this.
  
  
![react-profiler](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b43p71jjmacpai3keik2.gif) 

[Ben Award - How to use the React Profiler to find and fix Performance Problems](https://www.youtube.com/watch?v=00RoZflFE34)

---

## Investigate other performance problems

Often, web app performance issues are not related to React. Analytics tracking libraries, excessive CSS animations, non-optimized images, iframes, and many more factors can contribute to poor performance. You can use the Chrome DevTools Performance tab to debug these issues.

![chrome-profiler](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/exfgn1q6qk0toin3atus.gif)

[Chrome Dev Tools documentation - Analyze runtime performance.](https://developer.chrome.com/docs/devtools/evaluate-performance/#analyze)

---

Originally published at [alexsidorenko.com](https://alexsidorenko.com/blog/react-performance-tools/)
WordPress VS Strapi. How to Choose the Right CMS? 

Tags: cms, wordpress, strapi, webdev
Published: 2021-09-28 09:54:49

{% youtube Cb1Tn1VRuSo %}
How to choose the best CMS platform? Is it still worth betting on Wordpress or maybe it’s time to choose a headless CMS? Patryk shares his thoughts and experience.

Select a solution tailored to the company's needs:
🟣 What is CMS? What are the types?
🟣 Which aspects we have to pay attention to while choosing the CMS?
🟣 Is WordPress slow?
🟣 Can we do all the work by ourselves or we have to find an implementation partner?
🟣 Safety gaps and CMSs
🟣 How does CMS affect marketing and SEO characteristics?
🟣 Tips for those who want to choose CMS
🟣 How soon will WordPress's technology become outdated?

You can also read the article at [Frontend House](https://frontendhouse.com/experts-zone/wordpress-vs-strapi-how-to-choose-the-right-cms-experts-zone-talks-12)
Answer: Kubernetes Pod stuck in CrashLoopBackOff
Tags: kubernetes
Published: 2021-09-28 09:31:48

{% stackoverflow 54657005 %}

我在试图在 k8s 中运行 ubuntu pod 时，也遇到这个问题，添加 command, 使用 sleep 代替 image 中的缺省设置 bash 就好了

```
apiVersion: apps/v1
kind: Deployment
metadata:
  creationTimestamp: null
  labels:
    app: ubuntu
  name: ubuntu
spec:
  replicas: 1
  selector:
    matchLabels:
      app: ubuntu
  strategy: {}
  template:
    metadata:
      creationTimestamp: null
      labels:
        app: ubuntu
    spec:
      containers:
      - image: ubuntu
        name: ubuntu
        command:
          - sleep
        args:
          - infinity
        resources: {}
status: {}
```
All you need to know about React Native
Published: 2021-09-28 09:25:21

# What is React Native?

React Native is a framework developed by Facebook. React Native provides full capabilities for building integrated applications that are similar to applications that are programmed using custom programming languages such as Java or Swift. In addition, the basic user interface (UI) building blocks used by iOS and Android are also used by React Native.

## The difference between React Native and React?

React Native is not a different version of React. Rather, it is a development dedicated to React, as is the case with React Dom. Where React Native uses Native components instead of Web components, as is the case with React. Whereas web components usually produce applications with simple capabilities called WebView Apps, unlike the (Native) components that create applications like applications that are built using programming languages dedicated to developing mobile applications such as Java and Swift. 

However, to get started with React Native, you first need to study and learn the basic concepts of React. Such as the JSK, the Components, the State, and the Props. And if you already know the basics of React, you still need to know the things specific to React Native, such as the (Native components). In general, I am used to using React in the Web. You will not feel strange when dealing with React Native, or if you are using Java or Swift to build mobile applications, you will not feel strange also when dealing with React Native.


### Companies that use React Native in their applications.

Facebook, GitHub, Airbnb, Box, Google, Microsoft, Pinterest, Pixar Animation Studios, Twitter, Uber, Instagram, LinkedIn, and WhatsApp

## Features of React Native.

* Cross-platform: With React Native, you do not need to program iOS applications separately from Android applications. React Native helps developers develop applications that work on iOS and Android by using one platform that produces an application that works on different platforms.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tvpdk01nw8cuk0dzvtx3.png)

* Truly native: React Native provides the full potential for developers to build fully and perfectly Native applications. This makes applications designed using React Native appear as if they were designed in one of the programming languages dedicated to building mobile applications on Android and iOS platforms.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dfauqwp2nksgkd501ay2.png)

* Reloading: Instead of reprocessing or running the program to know the changes you have made; the application is reloaded directly. Where in React Native you have two options in the reloading process: The first is Live Reloading. Where the application is updated every time, you store the additions or modifications you have made to your files. The second option is Hot Reloading, where the application updates only the files that you have modified and not all the application files.
Minimal Gap is online
Tags: cloudskills, freelance, personalwebsite
Published: 2021-09-28 09:09:53

I would like to share my brand new website for my freelance activity: [MinimalGap](https://minimalgap.com)

As the brand name says, I decided to go for a _minimal_ landing page to give a taste of who I am and what I can do in the huge world of IT tech.

Feedback is welcome so feel free to comment on this.