teleren/devto huggingface dataset:
5 Frameworks to Lead the Cross Platform App Development in 2020
Tags: reactnative, mobileappdevelopment, node
Published: 2019-12-30 13:07:59

As most businesses want a simultaneous presence across multiple OS platforms to garner maximum outreach and audience, cross-platform app development is bound to gain more traction and popularity. In 2020, there is not going to be a major difference in regard to this popularity. Some frameworks are expected to lead the scene of cross-platform app development in the coming years. Let’s present them here.

**1) React Native**

Among cross-platform app development frameworks, React Native occupies the pride of place because of delivering a highly native look and feel while helping to build an app that works great on both iOS and Android. A [React Native App Development Company](https://www.cmarix.com/react-native-application-development-services.html) by bringing together the essential attributes of both JavaScript and ReactJS provides a fully modular development approach to write platform-specific modules in Swift, Objective-C or Java. Let’s have a look at the key features of React Native.

-> React Native maintained by Facebook is a hugely popular open-source cross-platform app development framework with worldwide community support.

-> Modularity and reusability of the code is a key aspect of React Native that made it popular for building apps across multiple OS platforms while maintaining the native look and feel specific to the platform.

-> One-time coding and reusability of the code help React Native projects to gain the competitive lead in terms of development speed and faster time to market.

-> React Native by offering a high level of compatibility with third-party plugins allows developers to integrate features and make easy value additions.

-> React Native is a highly UI focused framework that helps to render a truly responsive and versatile interface.

[Read more..](https://www.cmarix.com/5-frameworks-to-lead-the-cross-platform-app-development-in-2020/)
The Swift Programming Language Companion: Basic Operators
Tags: ios, swift, beginners
Published: 2019-12-30 13:07:08

This article is part of a series on learning Swift by writing code to The Swift Programming Language book from Apple.

Read each article after you have read the corresponding chapter in the book. This article is a companion to [Basic Operators](https://docs.swift.org/swift-book/LanguageGuide/BasicOperators.html). 

### Set up a reading environment

If you are jumping around these articles, make sure you read the [Introduction](https://dev.to/loufranco/the-swift-programming-language-companion-introduction-4k0a) to see my recommendation for setting up a reading environment.

### Exercises for Basic Operators

At this point, you should have read [Basic Operators](https://docs.swift.org/swift-book/LanguageGuide/BasicOperators.html) in _The Swift Programming Language_. You should have a Playground page for this chapter with code in it that you generated while reading the book.

In your Playground write code to do the following

1. Declare three Ints named `x`, `y`, and `z` and give them initial values
2. Declare another Int that is the sum of `x`, `y`, and `z`
3. Declare two Doubles named `a` and `b`
4. Declare a Double named `c` that is `a` divided by `b`
5. Declare an Int named `mod` that is the remainder of `x` divided by `y`
6. Declare a Bool that is `true` is `x` is less than `y`
7. Declare a Bool that is `true` is `x` is less than `y` and `y` is greater than `z`
8. Declare a Bool that is `true` is `x` is less than `y` or `y` is greater than `z`
9. Declare a String set to "I have x cats" where x is `x` and "cats" is properly pluralized (use `+` to concatenate strings and `? :` to check `x`)
10. Declare an optional integer (`Int?`) named `xNil` and set it to `nil`. Then declare an `Int` named `xOr5` where you use the nil coalescing operator (`??`) to set it to either `xNil` or `5`. See what happens when you assign an actual integer to `xNil`.
11. Print the numbers from `1` to `5` using a Range (`...`).
12. Print the numbers from `0` to `[1, 2, 3].count` using a Range (`..<`). 
13. Print the values of `[1, 2, 3, 4, 5]` starting from the 2nd value (`2`) using a one-sided range.

### Next: Strings and Characters

The next article will provide exercises for the [Strings and Characters](https://docs.swift.org/swift-book/LanguageGuide/StringsAndCharacters.html) chapter.
React Route Guards with Unit Testing
Tags: react, routeguards, webdev, javascript
Published: 2019-12-30 13:07:07


In this blog post I would like to share my approach to create manageable Route Guards as well as to write unit test cases for that specific implementation.

We will be testing Route Guards & the way it behaves based on the user roles.

We will be using jest & @testing-library/react for writing unit test cases.

I will also share a cleaner approach to test a component that returns redirect URL which will be helpful to test in a lot of scenarios like failed login testing, session timeout testing etc.

While creating any web application there is a scenario where we need to add guards to route or prevent unauthorized access to certain URLs.

There are many ways to do it, however one of the cleaner ways is to handle it on the client side.

Let us take a hypothetical case where the roles are “viewer, publisher, admin”.

The viewer will not have any access to the admin pages while the later will have access to all the pages.

In a typical scenario when the user successfully logs into the application the server sends some information like this:-
```
{
  token: 'qwqwqw',
  fullName: 'qwq ee',
  role: 'viewer'
}
```

We can utilize the above response & create a simple route guard.

Step 1 could be to store the role in localStorage in an encrypted manner using an awesome npm module pako.

However in this article I am simply using local Storage.

Step 2 could be to create a route guard.
```
import React from "react";
import { Redirect } from "react-router";
function RouteGuard(props) {
  let userRole = localStorage.getItem("userRole") || "viewer";
  if (props.allowedRoles.indexOf(userRole) > -1) {
     return props.render({ userRole: userRole });
  }
  return <Redirect to="/unauthorized" />;
}
export default RouteGuard;
```
In this simple functional module we created a logic to check for the role & return the component passed to the render props of the RouteGuard component. So basically we are using render props property of React.

So in index.js we can import this component & use it like:-
```
<Route
 path="/welcome"
 render={props => (
   <RouteGuard
    allowedRoles={["admin", "publisher", "viewer"]}
    render={guardProps => (
     <GenericComponent greet="user" {...guardProps} {...props} />
   )}/>
 )}/>
```
The GenericComponent is a simple hello world component and nothing else. This RouteGuard works perfectly with Lazy loading as we are just using the render props property of react-router-dom.

The advantage of this approach is we have full access to router props & routeGuard props.

Testing is also pretty clean for these Route Guards. As it is not possible to see the test tab in the embedded version of CodeSandbox you can click on this https://codesandbox.io/s/objective-jennings-hlzf0?from-embed & then click on Open Sandbox on the bottom right corner to get a clearer picture.

To check for the test cases click on the Test tab. (I know CodeSandbox is an awesome tool & everyone knows it :) )

I have added comments in test cases & code for more clarity.

Let me know your views in comments :)
Resources to learn about DevOps cultural concepts and some tools
Tags: devops, sre
Published: 2019-12-30 12:46:39

Follow below, some of my favorites resources to learn and pratice about DevOps!

## Free Courses
* [Intro to Devops](https://classroom.udacity.com/courses/ud611)
* [Introduction to DevOps: Transforming and Improving Operations](https://www.edx.org/course/introduction-to-devops-transforming-and-improving-operations)

  
## Labs
* [Katacoda](https://www.katacoda.com/learn)
* [Play with Docker](https://labs.play-with-docker.com/)
* [Play with Docker Classroom](https://training.play-with-docker.com/)

## Books

* [Site Reliability Engineering ebook - free](https://landing.google.com/sre/book.html)
* [The Phoenix Project](https://www.amazon.com.br/Phoenix-Project-DevOps-Helping-Business-ebook/dp/B078Y98RG8)
* [The DevOps Handbook](https://www.amazon.com.br/DevOps-Handbook-World-Class-Reliability-Organizations/dp/1942788002)
* [Infraestructure as a Code](https://www.amazon.com.br/Infrastructure-Code-Managing-Servers-Cloud-ebook/dp/B01GUG9ZNU)
* [Continuous Delivery](https://www.amazon.com.br/Continuous-Delivery-Deployment-Automation-Addison-Wesley-ebook/dp/B003YMNVC0)
When joining an already in progress project, where do you start?
Tags: discuss
Published: 2019-12-30 12:17:25

---
title: When joining an already in progress project, where do you start?
published: true
description: 
tags: discuss
---

When you join a team that already has a big project that you need to work in fullstack, what do you pick first? The backend and then the frontend? The frontend and then the backend? What tips can you also give?
Sensor Pilot: A Progressive Web App (PWA) for Bluetooth Sensors
Tags: bluetooth, react, pwa, webbluetooth
Published: 2020-04-24 07:27:06

---
title: Sensor Pilot: A Progressive Web App (PWA) for Bluetooth Sensors
published: true
date: 2019-12-30 12:05:35 UTC
tags: bluetooth,react,pwa,webbluetooth
canonical_url: https://kaspars.net/blog/sensor-pilot-web-bluetooth
---

Did you know that Chrome-based browsers (including on Android phones) can interact with Bluetooth Low Energy (LE) sensors and devices without any additional software using the [Web Bluetooth API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Bluetooth_API)? Bundle that with the off-line features enabled by the [progressive web apps](https://developers.google.com/web/progressive-web-apps) (PWA) and we get a real application using pure web technologies and standards.

Visit the [Sensor Pilot app →](https://kasparsd.github.io/sensor-pilot/)

I started playing with the Web Bluetooth API after getting the [Xiaomi Mijia clock](https://kaspars.net/go/xiaomi-mijia-clock-bluetooth) that also also measures air temperature and relative humidity:

[![Xiaomi Mijia clock with temperature and humidity sensor and Bluetooth LE interface](https://kaspars.net/wp-content/uploads/2019/12/xiaomi-mijia-bluetooth-temperature-humidity-sensor.jpg)](https://kaspars.net/go/xiaomi-mijia-clock-bluetooth)<figcaption>Xiaomi Mijia clock with temperature and humidity sensor and Bluetooth LE interface.</figcaption>

Turns out that reading sensor values and updating the time is relatively simple as long as you can get your head around the Bluetooth LE communication patterns such as [GATT services](https://developer.mozilla.org/en-US/docs/Web/API/BluetoothRemoteGATTServer) and [characteristics](https://developer.mozilla.org/en-US/docs/Web/API/BluetoothRemoteGATTCharacteristic).

## Screenshots

![Sensor Pilot Progressive Web App for Bluetooth Sensors on Desktop](https://kaspars.net/wp-content/uploads/2019/12/sensor-pilot-desktop-pwa-bluetooth-1024x1024.png)<figcaption>Google Chrome web browser connected to <a href="https://aranet4.com/">Aranet4</a>.</figcaption>

![Sensor Pilot Progressive Web App for Bluetooth Sensors as an app](https://kaspars.net/wp-content/uploads/2019/12/server-pilot-pwa-screenshot-desktop-2x-1024x1024.png)<figcaption>Web app view of the progressive web app connected to <a href="https://aranet4.com/">Aranet4</a>.</figcaption>
Todo Application in Reactjs
Tags: react, fullstackdeveloper
Published: 2019-12-30 12:05:25

---
title: Todo Application in Reactjs
published: true
description: Todo Application 
tags: reactjs , full stack developer
---

#INTRO

import React, { useState } from 'react';
import './App.css';

function App() {
  const [text, setText] = useState(""),
    [todos, setTodos] = useState([])

  const add = () => {
    return setTodos([...todos, text])
  }

  const deleteTodo = (i) => {
    const updatedTodos = todos.filter((todo, index) => index !== i)
    console.log("TCL: deleteTodo -> updatedTodos", updatedTodos)
    return setTodos(updatedTodos)
  }

  return (
    <div className="App">
      <h1>10Min Todo App</h1>
      <input type="text" value={text} onChange={e => setText(e.target.value)} />
      <button onClick={add}>Add Item</button>
      <ul>
        {todos.map((todo, i) => {
          return (<>
            <li key={i} >{todo}</li>
            <button onClick={() => deleteTodo(i)}>Delete</button>
          </>)
        })}
      </ul>
    </div>
  );
}

export default App;
Prototyping a new kind of online community
Tags: design, community, experiment
Published: 2019-12-30 12:04:40

I'll be sharing my journey in building an online community platform that is focussed heavily on collaboration. The system encourages people to come together and build collections of helpful contents on various topics.

If this sounds a bit too broad: this project is still in it's early days and in sharing my thoughts here I'll get a better idea of the concrete implementation of this vision.

My documentation of this process will be messy and transparent. I'd be incredible thankful if you would tag along and contribute your thoughts.

Parallel to the project's development I'm researching on how to build great (online) communities and how to bring people together. Why Are We Yelling? was a great read on how to deal with disagreements and make them productive. Right now I'm reading The Culture Code (The secrets of highly successful groups) and listening to Get Together (How to build a community with your people).

I'm a very visual person and start working on UIs early in my projects – oftentimes too early. ^^ In my head I played around with the ideas for this platform for some days now and a pretty concrete structure formed. For this first mockup I just brought my thoughts "on paper". Next up I'll sketch the other important aspects of the platform and then go on to actually build a minimal version with the least necessary parts for version one.

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/ye0xj9e0a5ksih3jblkg.jpg)

That's it for now – later I'll share my thoughts on the platform's structure and how it's limitations could lead to a fruitful community.
How to do navigation in React native web in 2020
Tags: reactnative
Published: 2019-12-30 11:58:12

“React Native for Web” makes it possible to run React Native components and APIs on the web using React DOM.

It is as simple as that!!
So, if you have an app and you want to build a web version of it, or if you are planning to build a website along with an app, you should definitely learn React native web.

Setting up navigation in react–native–web is challenging as the navigation system works quite differently in apps vs browser.

In this article, we’ll set up the most popular react-navigation on to react-native-web.

Using React navigation in react native web
React navigation is the most famous library for navigation in react–native. In this section, we’ll try to integrate react-navigation in <a href="https://codersera.com/blog/react-native-web/">react–native–web.</a>

<h3>Prerequisite</h3>

For this setup, we’ll be using <a href="https://codersera.com/blog/running-expo-react-native-together/">expo</a> as the platform on which we’ll be building our react–native app, which will run on android, ios, and the web.
Make sure you have expo-cli installed already.

To set up your codebase using expo, check this <a href="https://github.com/codersera-repo/react-native-web-examples">GitHub link</a> [master branch]. Simply clone the branch and do run expo start

If you are looking for a quick code, then you can check this <a href="https://github.com/codersera-repo/react-native-web-examples">GitHub link</a> [NOTE: the branch is react–navigation–setup and not master.]

<h3>Installation</h3>

Run the following command to install react–navigation along with other needed packages including react–navigation–stack.

<a href="https://codersera.com/blog/how-to-do-navigation-in-react-native-web-in-2020/">Navigation in React native web</a>

<h3>Two ecosystems for one platform</h3>

Using React Native for creating web apps isn’t simple, and not just because of the restrictions we need to fit it — it’s like native and web are still two separate worlds. Even if it’s already possible to use one codebase and run it everywhere, that code is full of conditions that can be run in one environment but not in another.

The same could be said of the libraries we can use to develop a react-native-web app.

Thanks for reading this
The git command that will change your life! Don't have those git nightmares 😰 anymore.
Tags: git, github, tutorial, beginners
Published: 2019-12-30 11:20:07

_Has it ever happened to you that you have woken up😰 from deep sleep with the nightmare that the code on which you have been working on for the past 2 weeks has vanished in thin air?_

_That in the dream, you accidentally performed a 
`
git reset --hard origin/master
`
on a branch and later realized you were supposed to do that on a different branch & now all you want to do is go to the washroom and cry yourself out?_

If answers to the above question is 'yes', then your life is going to change today. _(Dramatic music plays 🎶)_

Git provides a very not-so-known command that allows you a high level of control over your git repo than you could ever imagine. That command, ladies and gentlemen, is _(🥁🥁Drumroll🥁🥁)_
`
git reflog
`
Git reflog is amazing with respect to the ways in which it helps you in recovering your project history. You can recover almost anything that you had committed at some point of time in the past using the reflog command.
 
### Usage
Here is an example of the command output:

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/wxhhbr0xfqri2fpfzt2o.png)

Now, if you want to take your code base to the state it was at time time of any of these commits, just do 
`
git reset --hard <sha-id>
`

Else, if you just wanted to 'borrow' the code from any one of those commits, do a:
`
git cherry-pick <sha-id>
`

And that's how you sleep🛌 peacefully at night henceforth.
Cheers!

If you liked that, Check out other content of mine that got moderately famous:

{% link comscience/why-do-we-get-that-silly-cors-error-f82 %}
{% link comscience/can-you-solve-the-fastest-horse-algorithm-problem-47b8 %}
Goals for 2020 🎉
Tags: discuss, goals, 2020
Published: 2019-12-30 10:46:47

---
title: Goals for 2020 🎉
published: true
description: My truly objective for 2020.
tags: discuss, goals, 2020
---

I see this post, and I would like to write some goals for me. 
 {% link https://dev.to/joel/my-2020-goals-2662 %}

# 1) Get the driver license
I would like to be more free. Travel a little bit where I want without limits. 

# 2) Learn more English and Mental Psychology
I would like to write this post without Deepl or Google translate cause I love English and on development, this is really useful !

# 3) Put my Blog on production ! 😰
Hmm okay, one year already.. but I'm a beginner to {% tag ruby on rails %}

# 4) Get a job 

___
And you, what is your goals ? Put in the comments !
Angular Material Datepicker Icon + TailwindCSS
Tags: angular, tailwindcss, angularmaterial, datepicker
Published: 2019-12-30 10:42:48

This is a quick note/fix for any1 who uses Angular Material Datepicker and TailwindCSS. I have faced small cosmetic issue when trying to use Angular Material Calendar in my TailwindCSS based application.

Problem was that the Datepicker icon had an offset, and it was really annoying. Like so:
![calendar-image-offset](https://thepracticaldev.s3.amazonaws.com/i/ebd1xc4a2nfxx5iss4nx.png)


So the fix for it is to set:
```css
svg {
  display: inline;
}
```
But I had to set it before "tailwindcss/utilities" are loaded or after the components are loaded :).
So my **tailwind-build.css** (this file can be named whatever you want) looks like this:
```css
@import "tailwindcss/base";
@import "tailwindcss/components";

/* Custom component styling goes here*/
@import "./app/some_path_blah_blah/common.css";

@import "tailwindcss/utilities";
```
And in my common.css I added:
```css
...
svg {
  display: inline;
}
```
So the Datepicker should look like this:
![calendar-icon-fix](https://thepracticaldev.s3.amazonaws.com/i/j5hc8qrji2jaciaxl3mz.png)

Cheers!
I'm a professional React developer, and here's how I create GraphQL Microservices Using React, Node.js, Docker and MySQL. #9
Tags: react, node, webdev, javascript
Published: 2019-12-30 10:18:22

**About Me:** I've been a professional web developer for just over 10 years now. I'm currently the lead web development instructor at [Better Coding Academy](https://codebetter.com.au), and as part of what I do, I post videos on our YouTube channel at [https://www.youtube.com/c/BetterCodingAcademy](https://www.youtube.com/c/BetterCodingAcademy).

_(Subscribe for awesome web development content!)_

This is part 9 in a full tutorial on how to set up a GraphQL Microservices-powered React app. ([Here's part 8!](https://dev.to/bettercodingacademy/i-m-a-professional-react-developer-and-here-s-how-i-create-react-powered-microservices-using-graphql-and-node-js-8-1jdg))

In this video, I finalised both the frontend and backend, adding in support for adding listings as an authenticated user.

I hope you enjoy!

{% youtube e4o0qVi_Dhk %}

Happy coding!

Full source code: [https://github.com/parkroolucas/microservices-demo](https://github.com/parkroolucas/microservices-demo)
C++ - Operator Overloading
Tags: beginners, cpp, programming
Published: 2019-12-30 10:14:59

#What is it?
Giving the normal C++ operators such as __+__, __-__, __++__, __*__, additional meaning when they are applied to user defined type such as __class__.

#But why?
Let's say we have created a class called __counter__.
```cpp
class Counter
{
private:
    int count;

public:
    Counter() : count(0) {}

    void inc_Count()
    {
        count++;
    }
};
```
And a object of class *Counter* name __c1__
```cpp
Counter c1;
```
So in this case if we want to increment __count__ variable, we have to call __inc_Count()__ member function.

Like this:
```cpp
c1.inc_count();
```
Don't you think it would be great if we can just do this:-
```cpp
c1++; // Postfix

// or

++c1; // Prefix
```

If yes, then Operator Overloading can help us.

#Overload "++"
This operator can be use in two notation:-
1. Prefix - first operator then variable/object
2. Postfix - first variable then operator

Note:- In our example it doesn't matter, both Prefix or Postfix have same effect.

Let's explore Prefix first

##Prefix
Add this into class __Counter__ under __Public__:
```cpp
void operator ++ () {
    ++count;
}
```
To overload an operator we create a member function with __operator__ keyword.

1. __void__ is return type
2. __operator__ is keyword
3. __++__ is an operator
4. __()__ are parenthesis with no parameters
5. __{}__ are curly braces - it is function body

Now you can do this:-
```cpp
++c1;
```

##Postfix
Add this into class __Counter__ under __Public__:
```cpp
void operator ++ (int) {
    count++;
}
```

Only difference between Prefix and Postfix is, in Postfix we specify *int* in __()__ parenthesis (because how C++ Compiler know we want to do Prefix or Postfix) and in __function body__

Now you can do this:-
```cpp
c1++;
```

You can do same with __--__

#Warning
1. You can't overload __::__, __.__, __->__, __?:__ operators.
2. You can't create new ones.

There is more if you want to learn, follow this [pdf](https://github.com/Pushpender-Thakur/myDevAssets/raw/master/object-oriented-programming-in-c-4th-edition.pdf)

That's it guys.
Have a nice day.

If you find anything incorrect or know more about it let me know in the comments.