teleren/devto huggingface dataset:
Kotlin Wrappers for React Native core Components, APIs and React Native Navigation By Wix
Tags: kotlin, reactnative, ios, android
Published: 2021-01-04 21:35:26

**React Native** is a mobile application framework used for developing **cross platform apps** using **Javascript**.

**Kotlin** is a general purpose programming language that can be compiled or transpiled to run on different environments and platforms. One of the languages **Kotlin** can be transpiled to is **Javascript**.
This gives **Kotlin** the power to be used as a dependency or to use dependencies from the **Javascript** ecosystem.

The ability to transpile **Kotlin** code into **Javascript** gave birth to what we call **Kotlin Wrappers**. These **Wrappers** are **Kotlin** libraries that reference specific libraries that are initially written in **Javascript**.

This powerful feature, provided through **Kotlin/JS** has enabled me to come up with two **Kotlin Wrappers** from the **Javascript** ecosystem that can be used to develop **React Native** Applications using **Kotlin**.

1. **ojaynico-kotlin-react-native**
This **wrapper** is made up of all **React Native core components and APIs**. It can be downloaded from the link below.
https://search.maven.org/artifact/com.github.ojaynico/ojaynico-kotlin-react-native

2. **ojaynico-kotlin-react-native-navigation**
This **wrapper** is made up of components from **React Native Navigation by Wix**. It can be downloaded using the link below.
https://search.maven.org/artifact/com.github.ojaynico/ojaynico-kotlin-react-native-navigation

3. **ojaynico-kotlin-react-native-async-storage**
This **wrapper** is made up of functions from **React Native Async Storage**. It can be downloaded using the link below.
https://search.maven.org/artifact/com.github.ojaynico/ojaynico-kotlin-react-native-async-storage

4. **ojaynico-kotlin-native-base**
This **wrapper** is made up of components and APIs from **Native Base**. It can be downloaded using the link below.
https://search.maven.org/artifact/com.github.ojaynico/ojaynico-kotlin-native-base

For more instructions on how to use these **wrappers**, you can check out the following repositories (In their order) on how to setup with example projects.
https://github.com/ojaynico/ojaynico-kotlin-react-native
https://github.com/ojaynico/KotlinReactNativeApp
https://github.com/ojaynico/ojaynico-kotlin-react-native-navigation
https://github.com/ojaynico/KotlinReactNativeNavigation
https://github.com/ojaynico/KotlinReactNativeLoginSignup
https://github.com/ojaynico/ojaynico-kotlin-react-native-async-storage
https://github.com/ojaynico/ojaynico-kotlin-native-base
Project Universe 1st Q&A in-dev
Tags: gamedev, community, gaming, collaboration
Published: 2021-01-04 21:34:24

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

Seeking gaming & game dev community involvement

Accepting questions for the:
~sci-fi MMO video game
~virtual space mall
~free globally accessible school
~free to live in housing
etc

Reply/DM here or on Discord

Current list of questions: https://docs.google.com/document/d/1dQgBT0rUwQOndcn3_KUE9Zw__VD_ayLR40doQCb79u8/edit?usp=sharing
Date object snippet
Tags: javascript, dateobject
Published: 2021-01-04 21:19:37

---
title: Date object snippet
published: true
description: Some handy little code snippets for the JavaScript Date object
tags: javascript, dateobject
---

### Getting the locale date

The toLocaleDateString method on the date object lets you pass in the locale of choice and returns a string formatted date with forward slash separators.

```js
let today = new Date().toLocaleDateString('en-gb');

// today => 24/09/2020
```

### Replacing the slash

To replace the forward slash with a dash is as easy as manipulating the string with a replace regex.

```js
let today = new Date().toLocaleDateString('en-gb').replace(/\//g, '-');

// today => 24-09-2020
```

### Written representation

To get the written representation of the date in the chosen locale toLocaleDateString accepts a second options param where you can specify

- weekday
- year
- month
- day

```js
const options = {
  weekday: 'long',
  year: 'numeric',
  month: 'long',
  day: 'numeric',
};
let today = new Date().toLocaleDateString('en-gb', options);

// today => Thursday, 24 September 2020
```
Change the iOS Status Bar Color in Xamarin.Forms
Tags: xamarinforms, mobile, design
Published: 2021-01-04 21:16:46

After publishing the Android video for coloring the status bar, several of you requested a video showing the same for iOS. Hopefully at some point we can get [KSememenko's pull request]((https://github.com/xamarin/Xamarin.Forms/pull/8298)) into [.NET MAUI](https://github.com/dotnet/maui), but until then here is how you do this for iOS using a simple `ContentPage` renderer.

{% youtube 4NQ9ttm_UEw %}

Resources
* [Forum thread](https://forums.xamarin.com/discussion/comment/390014/#Comment_390014)
* [Xamarin.Forms Pull Request 8298](https://github.com/xamarin/Xamarin.Forms/pull/8298)

{% github davidortinau/Xappy no-readme %}
Exploring Colors in Xamarin.Forms Shell
Tags: xamarinforms, design, mobile
Published: 2021-01-04 21:13:27

Shell provides colors for styling most anything you can see in the chrome of your application such. This video takes a walk through several of the options available and discusses how styles are applied to both tabs and flyouts.

{% youtube RGu1NQ9-kLA %}

## Colors
* `Shell.BackgroundColor` - the background of the shell, which comes through in the navigation bar (title bar) area
* `Shell.TitleColor` - the color of the title in the navigation bar
* `Shell.ForegroundColor` - the tint color for things like the menu icon
* `Shell.TabBarBackgroundColor` - color behind the tabs on the bottom
* `Shell.TabBarTitleColor` - the color of the labels and icons of the selected tab
* `Shell.TabBarUnselectedColor` - the color of the labels and icons that are unselected

### Resources
* [Docs: Shell Page Colors](https://docs.microsoft.com/en-us/xamarin/xamarin-forms/app-fundamentals/shell/configuration#set-page-colors)
* [Docs: Shell Tab Appearance](https://docs.microsoft.com/en-us/xamarin/xamarin-forms/app-fundamentals/shell/tabs#tab-appearance)

{% github davidortinau/ShellStylesSample %}
Android Launch Screen, Splash Screen, and Animation in Xamarin.Forms
Published: 2021-01-04 21:09:22

Sometimes you just want a simple static image to quickly get to your main activity, while other times you may want to make a bit more of a SPLASH or buy time while you bootstrap your app experience. And really you may want BOTH. This video shows that continuum of options and leaves it up to you to decide what is best for your app.

This works for Xamarin.Forms as well as Xamarin.Android since they are really the same thing in the end.

{% youtube LMgJrbb-110 %}

### Resources:
* [Docs: Android Splash Screen](https://docs.microsoft.com/en-us/xamarin/android/user-interface/splash-screen)
* [Docs: Xamarin.Forms Splash Screen](https://docs.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/splashscreen)
* [Lottie Files](https://lottiefiles.com/)
* [Blog: Xamarin Splash Screens the Right Way](https://medium.com/@thesultanster/xamarin-splash-screens-the-right-way-3d206120726d)

{% github davidortinau/Xappy no-readme %}
Optional handmade chaining 🤓
Tags: node, javascript
Published: 2021-01-04 20:56:15

In my country (Brazil) we have a saying, **who doesn't have a dog hunting with a cat**.

I've been working on a project where we could not update the latest version of the node and there was no possibility to put the `babel` or even the experimental flag `--harmony`, because we had some enterprise restrictions to do something like that.

## So it's time to use creativity ✨ 

```javascript
const optionalChainingByPath = (object, path) => {
  const pathSplitted = path.split('.')
 
  const [firstKey] = pathSplitted

 if (object[firstKey] == null || object[firstKey] ==='' ) { return null }
  if (typeof object[firstKey] === 'object') {
    pathSplitted.shift()
    return optionalChainningByPath(object[firstKey], pathSplitted.join('.'))
  }
  
  return object[firstKey]
}

```
#### Usage:
```javascript
const makeResponse = patient => ({
  name: optionalChainingByPath(patient, 'personalInformation.name'),
  gender: optionalChainingByPath(patient, 'personalInformation.gender'),
  cardNumber: optionalChainingByPath(patient, 'personalInformation.cardNumber')
})
```

#### It's ok but unamused 😒

## Let's make this cool enough 🥳
We'll use **partial functions** to transform this boring function into a fancy function ✨

```javascript
const optionalChainingByPath = object => path => {
  const pathSplitted = path.split('.')

  const [firstKey] = pathSplitted

  if (object[firstKey] == null || object[firstKey] === '') {
    return null
  }

  if (typeof object[firstKey] === 'object') {
    pathSplitted.shift()
    return optionalChainingByPath(object[firstKey], pathSplitted.join('.'))
  }

  return object[firstKey]
}
```

#### Usage:

```javascript
const makeResponse = patient => {
  return {
    name: optionalChaining('personalInformation.name'),
    gender: optionalChaining('personalInformation.gender'),
    cardNumber: optionalChaining('personalInformation.cardNumber')
  }
}
```
Does sounds like a charm or doesn't?
Check out the Core2 AWS IoT EduKit hardware.
Tags: aws, iot, hardware, core2
Published: 2021-01-04 20:53:27

During Re:invent 2020, AWS announced an official AWS IoT Edukit hardware device. The M5Stack Core2 is an ESP32 development kit loaded with a display, touchscreen, motion sensor and microphone. Everything is powered either using USB or the built-in battery. The device supports FreeRTOS and is validated through AWS Device Qualification Program.

Read more about the [AWS IoT Core2 EduKit at sbstjn.com](https://sbstjn.com/blog/aws-iot-edukit-first-steps/)!

Find [example code at GitHub](https://github.com/sbstjn/aws-edukit-example).
DevAnalytics at DOHackathon: API key masking and about page
Tags: dohackathon, typescript, angular, devanalytics
Published: 2021-01-04 20:46:14

I received a [comment](https://dev.to/raddevus/comment/1a08n) to my previous post about [DevAnalytics](https://dev-analytics-frontend-tudwb.ondigitalocean.app/) mentioning that DEV API keys should be kept secrets and users might be afraid of sharing them.

That's right. And just as [@raddevus](https://dev.to/raddevus) mentioned it's a possibility to revoke the API key right after checking your stats.

Submitting your API key does require a certain level of trust especially because the [DEV Api](https://docs.forem.com/api/) offers POST services such as posting an article but there is no way - as far I know - to generate a read-only API Key.

On my side, what I could do is masking the API Key as if it would be a password and putting a notice mentioning that the API key is not going to be stored by the app.

By the way, thanks, Benedict, for this nice write up.
{% post https://dev.to/benneee_/creating-a-show-or-hide-password-feature-for-angular-forms-4fdk %}

At the same time, as I'm writing these lines I noticed that Flask logs it as part of the incoming get request on the backend side. I'll have to figure out how to remove those logs, how to prevent to log these events.

At the same time, I also added an About modal, so I also learnt a bit about how to use [NG Bootstrap's Modal module](https://ng-bootstrap.github.io/#/components/modal/examples).

![Masked API key and modal](https://dev-to-uploads.s3.amazonaws.com/i/untlyvqajbiysxnkiad5.png)

In the coming days, I want to sort out this problem with the backend logs and add some error handling in case there is a problem with the API key.

Feel free to try [DevAnalytics](https://dev-analytics-frontend-tudwb.ondigitalocean.app/) and leave a comment.
|| and && are not "logical operators" in JavaScript
Tags: javascript, programming, advanced, webdev
Published: 2021-01-04 20:35:57

Hear me out.

If you’ve written software with PHP or any statically typed language, you’d know that the value of any expression including either || or && will return a boolean.

Enter JavaScript.

The name “logical operators” doesn’t completely describe the function of || and && in JavaScript. A more apt name would be “selector operators.”

This is because, in JavaScript, || or && will return one (and only) of the two expression values rather than a boolean value.

Quoting the [ES5 spec from section 11.11](https://www.ecma-international.org/ecma-262/5.1/#sec-11.11)
> The value produced by a && or || operator is not necessarily of type Boolean. The value produced will always be the value of one the two operand expressions.

Take a quick look at this:
```
var a = 10;
var b = "foo"
var c = null;

a || b  // 10
a && b  // "foo"

c || b  // "foo"
c && b  // null
```
Surprised?

Both || and && operators perform a boolean test on the first expression value (*a* or *c*). If the value is not already boolean (as it’s not, here), a [ToBoolean coercion](https://www.ecma-international.org/ecma-262/5.1/#sec-9.2) occurs, so that the test can be performed.

For the || operator, if the test is true, the || expression results in the first expression value (*a* or *c*). If the test is false, the || expression results in the second expression value (*b*).

Oppositely, for the && operator, if the test is true, the && expression results in the second expression value. If the test is false, the && expression results in the first expression value.

Let’s take a deep look at the first and last expressions from the code above for better understanding:
```
a || b;  // 10
```
In the above expression, the || operator will first check if the first expression value (*a*) is a boolean, else a ToBoolean coercion occurs. *a* (10) is not boolean, hence, *a* will be coerced to true because *a* (10) is a truthy.

Since our test is true, the || operator will return the first expression value (10) – not the coerced value (true).

```
c && b;  // null
```
In the above expression, the && operator will first check if the first expression value is boolean, else it coerces it. *c* (null) is not boolean, hence, it will be coerced to false, because null is falsy.

&& operator returns the first expression value if it's falsy or the second expression value if the first value is truthy. Since *c*(null) is falsy, the && operator will return it.

As a JavaScript programmer, always remember that:
> The value produced by a && or || operator is not necessarily of type Boolean. The value produced will always be the value of one the two operand expressions.
.htpasswd Generator
Tags: htpasswd, hataccess, apache
Published: 2021-01-04 20:22:05

>Der sichere .htpasswd Generator. Mit den .htaccess und .htpasswd Dateien kannst du eine ganze Website oder nur einzelne Verzeichnisse vor Besuchern und Suchmaschinen schützen. Apache spricht dabei von der Basic Authentification (einfachen Authentifizierung).

Lies weiter [.htpasswd Generator](https://j0e.org/tools/htpasswd-generator/)
Chrome won't open!
Published: 2021-01-04 20:03:17

Version 87.0.4280.88 (Official Build) (64-bit) - Jan 2021 latest

Chrome works great at first until I start my Angular application, and create a new PDF File. Subsequent attempts to open Chrome through my shortcut on Desktop or Task Bar shows it trying to do something, but nothing shows.

I was able to track it down to what I thought was my Virus software (WebRoot) because, when I disabled it, this problem vanished. That seemed odd and a possible WebRoot bug, but in fact as I read more about these kinds of issues, I found that Chrome is affected by file locks being put onto the new file by WebRoot so that it can (later) run a scan and then releasing that lock.

I proved that this is the root cause, by simply deleting newly created files using file explorer. After doing that, the browser worked flawlessly.

**Symptoms**

Open up task manager and you will see many instances of 'Google Chrome' running.

Chrome acknowledges this bug and is working on a fix

> [Google Chrome has fixed a bug that enabled antivirus programs][3] on Windows 10 to lock newly created files. The patching of the bug means antivirus programs running on Windows would no longer block new files generated by the Chrome web browser, such as bookmarks.

Chrome is set to auto-update. But the current version download 87.0.4280.88 does not work.

  [3]: https://www.google.com/search?q=Google%20Chrome%20has%20fixed%20a%20bug%20that%20enabled%20antivirus%20programs

**Work Around**
- First try to run your antivirus, the idea being it will unlock the file.
- If that doesn't work, delete any newly created files using file explorer, this should immediately allow for new instances.
- You may also try to click on the Magnifying Glass and then from  Top Apps area, click Google Chrome there, not sure why this works.

*Clean up hung Instances*

- Use 'Exit', by clicking on the three dots '...' in upper right hand corner of any visible Chrome instance. This will get rid of all Chrome tasks.

Here's a PowerShell script that stops all chrome instances.

```powershell
if (!([Security.Principal.WindowsPrincipal][Security.Principal.WindowsIdentity]::GetCurrent()).IsInRole([Security.Principal.WindowsBuiltInRole]::Administrator)) {
    Start-Process PowerShell -Verb RunAs "-NoProfile -ExecutionPolicy Bypass -Command `"cd '$pwd'; & '$PSCommandPath';`"";
    exit;
}
Stop-Process -Name chrome
Stop-Process -Name GoogleCrashHandler 
Stop-Process -Name GoogleCrashHandler64

```
Note: rebooting you computer works too, but not recommended because problem will come back forcing frequent time consuming reboots.

**Bug fix**

Not out yet, but will be one subsequent to Version 87.0.4280.88
Crack The Coding Interview With Me: Binary Search
Published: 2021-01-04 20:01:03

# 📚 Theory:
{% youtube P3YID7liBug %}

<a title="A.gholamzade, CC BY-SA 4.0 &lt;https://creativecommons.org/licenses/by-sa/4.0&gt;, via Wikimedia Commons" href="https://commons.wikimedia.org/wiki/File:Binary_search_tree_example.gif"><img width="400" alt="Binary search tree example" src="https://upload.wikimedia.org/wikipedia/commons/9/9b/Binary_search_tree_example.gif"></a>
# 👩‍💻 Code:
## ▶ Iterative Binary Search
{% gist https://gist.github.com/olg200492/4782bc78aaa7eb43d9451dbb64aabc46 %}

## ▶ Recursive Binary Search
{% gist https://gist.github.com/olg200492/267b5be557e5ef18f51dec8d3340a647 %}

## 🗃 Interview Questions
* [LeetCode](https://leetcode.com/problemset/algorithms/?page=1&topicSlugs=binary-search&sorting=W3sic29ydE9yZGVyIjoiQVNDRU5ESU5HIiwib3JkZXJCeSI6IkRJRkZJQ1VMVFkifV0%3D)
* [FullStack Cafe](https://www.fullstack.cafe/blog/binary-search-interview-questions)
* [www.interviewbit.com](https://www.interviewbit.com/courses/programming/topics/binary-search/)
* [Binary Search: Practice Problems](https://medium.com/techie-delight/binary-search-practice-problems-4c856cd9f26c)
The 12 BEST Freelance Sites For Developers & Designers
Tags: codenewbie, design
Published: 2021-01-04 19:49:34

Are you looking to get freelance opportunities and generate more income this year while working remotely?

I’ve put together 12 amazing freelance sites that developers and designers should checkout in 2021

**1. Upwork** | https://upwork.com

Upwork is one of the largest freelancer marketplaces. Whether you’re interested in being a full-time or part-time freelancer, you should be interested in Upwork.

**2. Toptal** | https://toptal.com

Toptal is an elite network of the world’s top talent in business, design, and technology that enables companies to scale their teams, on-demand.

**3. Fiverr** | https://fiverr.com

Fiverr can be said to be the most popular freelance marketplace. On Fiverr, you can sell your services as gigs and find clients interested in these gigs.

**4. PeoplePerHour** | https://peopleperhour.com/v4

PeoplePerHour is a freelance website that connects small businesses with a large pool of freelancers offering their services.

**5. Guru** | https://guru.com

Guru offers a secure, flexible, and cost-effective platform for freelancers to connect, collaborate, and get work done.

**6. TopCoder** | https://topcoder.com

TopCoder is a marketplace that gives world-class creatives the platform to sell their services to businesses and clients that are in need of them.

**7. Project4Hire** | https://project4hire.co

Project4Hire is a freelance marketplace where you can find freelance jobs, freelance web designers, programmers, writers, marketers, and more.

**8. Codeable** (for WordPress Developers) | https://codeable.io

Codeable is the only exclusive WordPress freelance platform that connects the top 2% of WordPress devs with clients who don't compromise with quality work.

**9. 99Designs** | https://99designs.com

99Designs is a global creative platform that makes it easy for designers + clients to work together to create designs they love.

**10. MeaningfulGigs** | https://meaningfulgigs.com

MeaningfulGigs is a place for companies to hire world-class digital designers who are all based in Africa.

**11. Workova** | https://workova.co

Workova links companies with highly qualified talents whose skills have been tested to allow them to execute projects more efficiently and to scale their current team.

**12. Freelancer.com** | https://www.freelancer.com/

Freelancer is the world's largest freelancing and crowdsourcing marketplace that links talents with clients.

**13. RemoteTechJobs** | https://www.remotetechjobs.com/

RemoteTechJobs is an active job site with over 37 tech job categories and 3000+ active jobs.


#### Do you know some other great freelance sites? Feel free to add them in the comments below.

### Are you ready to start your freelance journey, but not sure how to start? Check out my article on [5 Tips to Start Your Freelance Journey in 2021](https://dev.to/estheragbaje/5-tips-to-start-your-freelance-journey-in-2021-114o)
How correctly specify ReactJS license in my SPA repo?
Published: 2021-01-04 19:30:15

If I understand correctly, ReactJS ships with MIT FB license.

I will plan create a repository with code based on using ReactJS as dependency in my SPA.

In my app, I want want to use another open-source license, but React MIT lisence require link to original copyright. Should I:

*     use text of original license in each file
*     link to it in each file of project
*     or can I create some like COPYRIGHTS in root of project and copy/paste the original lisence text from github (https://github.com/facebook/react/blob/master/LICENSE) and near it create my own license

What is a correct way to do it ?

Thank you!
how to develop a UI Library in Javascript?
Tags: javascript, canvas, html, library
Published: 2021-01-04 19:22:30

I would like (need) to develop a graphical user interface library that remains simple, clean and lightweight. I will then need it to modify a SPA on which I will work, that using the HTML5 canvas element. What I'm interested in adding will be items such as, canvas obviously, buttons, sliders, navbar / sidebar, menus etc. I don't know where to start, how to set up the work, how to structure the library. how should I proceed?
How To Add Custom Column To Any Post Types In WordPress
Tags: wordpress
Published: 2021-01-04 19:07:56

Read More At: [https://www.scratchcode.io/how-to-add-custom-column-to-any-post-types-in-wordpress/
](https://www.scratchcode.io/how-to-add-custom-column-to-any-post-types-in-wordpress/)