teleren/devto huggingface dataset:
Book Review: Kotlin in Action
Tags: bookreview, kotlin
Published: 2020-06-28 20:10:09

---
title: Book Review: Kotlin in Action
published: true
date: 2020-06-28 00:00:00 UTC
tags: BookReview,Kotlin
canonical_url: https://hceris.com/book-review-kotlin-in-action/
---

[![Kotlin in Action](https://hceris.com/static/eb69c5e5c82ef4645b26036684966186/70ebb/kotlin-in-action.jpg "Kotlin in Action")](/static/eb69c5e5c82ef4645b26036684966186/70ebb/kotlin-in-action.jpg)

_Kotlin_ has been an obsession of mine for the last two years. I remember advocating for immutable data and using streams in a project I was on, where we were stuck with _Java_. Switching to _Kotlin_ was such a breath of fresh air. This is the book that helped me during that period.

I would say the ideal target audience is folks who are already familiar with _Java_ and want to learn _Kotlin_. You’ll get started faster, and you’ll be able to appreciate how much more concise and usable _Kotlin_ is. That seems to be a common origin for most people learning _Kotlin_, but in any case, you should be able to pick it up regardless of your background, as long as you do have some experience programming.

## Learning Kotlin

This book focuses on introducing you to _Kotlin_, from its syntax to features like nullable types, collections, or operators. The later chapters are dedicated to some more advanced concepts, like reflection or building DSLs. Interestingly, [coroutines](https://kotlinlang.org/docs/reference/coroutines/coroutines-guide.html) don’t make an appearance.

As usual with learning a new programming language, a healthy combination of reading and practicing is advisable. Given that there are no exercises to practice in the book, I recommend [exercism](https://exercism.io/tracks/kotlin) to get started and the [Kotlin Tapas](https://github.com/sirech/kotlintapas) I shared some time ago.

The book doesn’t make assumptions about your target environment. Whether you want to do backend development or mobile, it is the right place to get acquainted with the basic constructs of the language. It is written by two members of the core development team of _Kotlin_, who are knowledgeable about the language and present it in a clear and approachable way.

## Next steps

As I mentioned, this book functions as an introduction to the language. If you want to explore it further, I liked [The joy of Kotlin](https://www.manning.com/books/the-joy-of-kotlin), which is definitely not an introduction book. I’ve heard good things about [Effective Kotlin](https://leanpub.com/effectivekotlin), although I haven’t read that one myself.

## Verdict

An excellent way of getting started with _Kotlin_. It doesn’t go too much into idiomatic _Kotlin_, however. Nevertheless, it’s worth ⭐⭐⭐⭐ stars for me.
Work from home
Tags: workstations, watercooler, discuss, remote
Published: 2020-07-03 21:26:13

---
title: Work from home
published: true
date: 2020-06-28 00:00:00 UTC
tags: workstations, watercooler, discuss, remote
canonical_url: https://mnlwldr.com/work-from-home/
---

I never had a problem commuting to work. It was okay because I had time to listen podcasts or new music.

One day I started thinking about the time I spend commuting to work and back home.I was actually shocked when I realized how much time I spend only to go to work.

Every workday, I commuted:

- 20 minutes by car    
  - The distance from home to the train station.
- 1 hours by train
- 12 minutes by feet    
  - The distance from the train station to the workplace.

… and the same back home.

That’s in sum around 3 hours, every day. Extrapolated with 220 working days I commuted around 30.000 km (18.600 miles) or wasted 28 days. TWENTY EIGHT DAYS! A whole month commute to work and back home, and the worst part is, I did the same the years before, 2018, 2017, 2016 and 2015.

### Work from home

I decided to change this in 2020 and started a new job. I work from home now, and after the first few months, I can say it was the right decision. Not only because I can sit at my desktop with just a jogger :).

#### Benefits

I changed some bad habits.

- I go running 3 - 4 times a week now, because I have just more time to do this.
- I eat cleaner because I have more time to cook.
- I have time to eat breakfast.
- I read more books since I work from home. For example:    
  - _1984_ by George Orwell.
  - _The old man and the sea_ by Ernest Hemingway.
  - I downloaded a lot of _Sherlock Holmes_ books on my Kindle.
- … and much more.

#### Desktop

I build my own desktop with two big wooden boards from the hardware store.The desktop is 220x100 cm, that’s more than enough for my needs. I varnished the wooden boards with black lacquer.

![desktop](https://wildauer.io/static/posts/desktop.jpeg "My desktop")<figcaption>
        I know, I should eliminate the cord clutter.      
    </figcaption>

#### Chair

I wanted the [MARKUS swivel chair](https://www.ikea.com/at/de/p/markus-drehstuhl-vissle-dunkelgrau-70261150/) from Ikea, but it was sold out.So I bought a similar chair from Amazon.

#### Hardware

Thinkpad X1 Carbon with Docking Station, external 27” Monitor, Keyboard, Mouse. That’s it.

### Interesting Links

- This post was inspired by a similar post from [Armin Ronacher](https://lucumr.pocoo.org/2020/5/24/my-standard-desktop/ "My Standard Desktop") on [Armin Ronacher’s Thoughts and Writings](https://lucumr.pocoo.org/ "Armin Ronacher's Thoughts and Writings").
- [A nice thread on Twitter](https://twitter.com/fox/status/1215064786200719360 "Let’s play a fun game. Take a photo of your workspace (office, home office, cafe, wherever!).").
- [Workspace Wednesday: Show off your computer and desk setups!](https://dev.to/ben/workspace-wednesday-show-off-your-computer-and-desk-setups-3h45 "Workspace Wednesday: Show off your computer and desk setups!") on [dev.to](https://dev.to/ "dev.to").
Build Mobile App without phonegap developer App
Tags: phonegap, android, mobile
Published: 2020-06-27 23:50:49

---
title: Build Mobile App without phonegap developer App
published: true
description: How to build phonegap app without using phonegap developer app
tags: #phonegap #android #mobile
---
##NOTE
Adobe has discontinued **PhoneGap Build and ended investment in PhoneGap and Apache Cordova. The PhoneGap Build service will be discontinued on October 1, 2020.**
This website is no longer being updated. Find out more details here: https://blog.phonegap.com/update-for-customers-using-phonegap-and-phonegap-build-cc701c77502c
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/84zj98u71zhajxphe52z.png)

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/u7jcn1qdxr7fm8bap57b.jpg)
[Orginal video][https://www.youtube.com/watch?v=Sq2EDVJr_v8]

#step1 
After creating a new phonegap project (I use phonegap-cli) or check this link [http://docs.phonegap.com/getting-started/1-install-phonegap/cli/].

##step2
Click this link [https://www.youtube.com/redirect?event=video_description&v=Sq2EDVJr_v8&q=https%3A%2F%2Fwww.dropbox.com%2Fs%2Fdcyyx1io7bxowv4%2Fhelloworld.apk&redir_token=cqmy-qW7iyCeRFHq2UGTS5vC7fZ8MTU5MzM4NDY0NEAxNTkzMjk4MjQ0] to download the two cordova files (cordova:Executable Jar File and cordova: Javascript Source file)

###step3
Copy the folder __www__ from within your app folder and paste on your desktop, copy the two __cordova files__ (cordova:Executable Jar File and cordova: Javascript Source file) and paste it in the root folder of 'www'

####step4
Copy __config__ file from your app folder,
Create a new folder inside 'www' root folder and name it __xml__ , 
Paste the __config__ file inside the __xml__ folder and also paste it on __www__ root folder. 

#####step5
Zip the __www__ folder
__Log In__ to phonegap build section link [https://build.phonegap.com/apps] You will see __Welcome to Adobe PhoneGap Build__
Click __Private__ tab and __upload your www zip file__
Click __Ready to build__ button
Then click __android/iOS/windows__ Icon to download the file (mine was apk file). download and install the apk file and check you app. Boom!!!

Thanks for reading


[Orginal video][https://www.youtube.com/watch?v=Sq2EDVJr_v8]
How to add Authentication to your React app using AuthUI
Tags: webdev, javascript, react, tutorial
Published: 2020-06-27 23:44:40

---
title: How to add Authentication to your React app using AuthUI
published: true
description: 
tags: #webdev #javascript #react #tutorial
cover_image: https://raw.githack.com/authui/authui/master/docs/storybook-1.png
---

When starting a new project, it takes some effort to implement Login / Sign-up screens. We often have to repeat the same implementation again and again.

- Authentication should be simple to remove friction to build an MVP (Most Viable Product) or get users started.
- Authentication logic should be reused to save development time.

There are a few online services that let you integrate your application with their Authentication APIs. But it doesn't really save much time when we have to go through long documentation to understand it, then spend more time learning and integrating.

An Authentication Service should be simple to integrate with. Below is an example:

### Step 1 - Import and use Login Component

```js
$ npm install authui-ui

import LoginBox from "authui-ui/dist/js/components/LoginBox/LoginBox";

<LoginBox accountId="MyProductName" afterSubmit={afterSubmitHandler} />
```

[LoginBox source code](https://github.com/authui/authui) can also be customized and used directly.

### Step 2 - Handle response

After user submitted the form (Sign up or Log in), the "afterSubmit" callback function will be called. Here you can handle the response (full User object) by redirecting user to the home page, dashboard, etc.

```js
const afterSubmitHandler = (jwtData) => {
  if (jwtData && jwtData.email) {
    alert('jwtData: ' + JSON.stringify(jwtData))
  }
}
```

`jwtData` is the user object which has properties like: user uuid, accessToken, email, name, picUrl, etc. which can be used in the app (or store in localStorage).

That's it! There is no Step 3. In the next article, I will write more about how it works. In the meantime, there is more information in the links below:
- [AuthUI Repo](https://github.com/authui/authui) - both UI and APIs are open source.
- [Live Example](https://codesandbox.io/s/authui-example-8jswg?module=/src/LoginBox/LoginBox.tsx)

If you are a maker or have a project that needs Authentication, give it a try. Please feel free to reach out (via Github) if you need help to integrate with it!

<img src="https://raw.githack.com/authui/authui/master/docs/authui-demo.gif" />
Website Feedback
Tags: help, discuss, webdev, vue
Published: 2020-06-27 23:08:54

Hello everyone,

I was working on revamping my personal site for a couple of days. It would be great if you guys could give feedback.

Initially, the site (https://www.nishantwrp.com/) was just a simple vue app with almost everything hardcoded.

I have revamped the site(https://nishantwrp-develop.netlify.app/) to have the functionality of the blog posts and use better technologies.

Please give your feedback. The feedback could be anything. (content, design etc.)

Thanks!
Looking for help with CSS Grid auto-fit with the last item on its own row
Tags: cssgrid, css, codepen, help
Published: 2020-06-27 22:20:05


Here's the deal:
* You've got markup you don't control
* It includes images wrapped in a `<figure>` tag
* The `<figure>` tag may or may not have a `<figcaption>`
* The `<figure>` could include one `<img>` or many
* You want the images to fill the available width, but if there are multiple, shrink down to 25% for 4-columns

What I have here almost works ✅, but in cases with a figcaption and fewer than 4 images, the images don't fill the available width as I'd like ❌.

Help! See the [example on CodePen](https://codepen.io/sgarrity/pen/QWyMZzQ).


{% codepen https://codepen.io/sgarrity/pen/QWyMZzQ %}
Longest day coding
Tags: javascript, dom, 100daysofcode
Published: 2020-06-27 22:00:07

For quite a while I have thought about starting a blog. The idea was fascinating but, at the same time, thinking about it for too long got me discouraged; just thinking of all the work, and my limited knowledge, and the fear of being judged, trolled, etc...
Before getting into code I could imagine myself writing about all sorts of things that interest me, often being afraid of getting too personal with my posts.
It's much more comfortable to not do it. So I never did it.
Until today.

I'm currently studying Full stack JavaScript with the Treehouse platform and, while I feel I've got the hang of the JS course till now, and I'm able to go through the lessons rather quickly and understand it all, I got stuck today with one of the challenges. I don't think I have ever used the whole day coding as I did today. But I was stuck, so I basically didn't write much code. I was just trying to solve the challenge, stressing about it. It was about traversing and manipulating the DOM using the Node properties.

In the end I manage only with the help of comments. So it's kind of annoying. The solution I resolved to use was actually quite simple, as opposed to the complicated function I was trying to pull off.

It's hard to say how often I'm going to be posting here, or what I'll be writing. But it feels as if I had discovered that doing something doesn't need to take all our efforts and it doesn't need to be complex for it to be worthy. I had imagined that writing a first-time-ever post was going to be magical and surrounded by wonderful, inspirational circumstances. Actually, all it took was a the slightest of action.
Thank Me Later: Use Styled Components's css helper everywhere
Tags: javascript, react, ui, css
Published: 2020-06-27 21:59:53

###**Intro**
Anyone who has used Styled Components, that popular, powerful CSS-in-JS library, for any length of time has come across odd bugs that involve the renderer completely ignoring a style or several, sometimes for an entire component, initiating a frantic search for the root of the problem. I'll spare you the trouble: the culprit is often nested interpolation. 
```javascript
const nestedInterp = `
   color: ${props => (props.black ? 'black' : 'white')};
   ${/*
      Without the `css` helper, the above function is cast as a string. 
     */''}
`;

const Div = styled.div`
   ${props => (props.active ? 'color: red;' : nestedInterp)};
`;
```
This is a caveat that beginners often stumble upon instead of read about, as syntactic sugar is meant to be inconspicuous. Template literals cast all interpolated values to strings, thus interpolated functions normally yield empty strings. Interpolated functions work as they do with Styled Components because the `styled` object's members are tagged templates that provide that functionality. However, as with template literals, the returned values of interpolated functions are cast as strings. This means that nested interpolated functions are cast as well. For more information, read about [how string interpolation and tagged templates work "under-the-hood."](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals)

###**The Solution**
To solve this, Styled Components added [a helper function named simply `css`](https://styled-components.com/docs/api#css) that also accepts a tagged template as its parameter. It forwards props to any interpolations and handles any interpolated functions, just like `styled`. In addition, many devs working with Styled Components will configure their linters to detect and resolve neglected nested interpolations. Unfortunately, linters are not fool-proof and edge cases often pop up in complex, destructured, deeply-nested UI component libraries. 

Thus, the developer community has recommended using the `css` helper function for every nested template literal, whether or not the literal includes an interpolated function. In addition to the issues of unhandled nested interpolations and difficult-to-lint edge cases, this best practice resolves a number of [other concerns](https://github.com/styled-components/styled-components-website/issues/209#issuecomment-358996796):
* [Memory leaks in server-side rendered apps](https://github.com/zooniverse/front-end-monorepo/issues/1469#issuecomment-580792105).
* Providing a target to syntax highlighters and linters.
* Minification and transpilation.
* [Future-proofing for interoperability and precompilation](https://github.com/cssinjs/istf-spec).
Primer Post - 27 Junio
Tags: raspberrypi, eppr, node
Published: 2020-06-27 21:53:38

# Objetivos
1. [x] Agregar una Imagen
2. [x] Crear 2 cabeceras
3. [x] Agregar un link a [GITHUB](https://github.com/eppr-lxps)
4. [x] Mostrar código de ejemplo
5. [x] Mostrar una lista.

# Ejemplo para cargar una imagen

```
![Foto Header](https://dev-to-uploads.s3.amazonaws.com/i/ll0upglr2ldimm82t3ct.jpg)
```

![Foto Header](https://dev-to-uploads.s3.amazonaws.com/i/ll0upglr2ldimm82t3ct.jpg)
Animated Search Field with Flutter
Tags: codepen, flutter, dart, inspiration
Published: 2020-06-27 21:34:46

{% codepen https://codepen.io/brenodt/pen/vYLxGwj %}

Ever thought about how to make your default AppBar more dynamic? Here's an inspiration for you!

The gist is pretty straight-forward:
- On your `AppBar`, within your `Scaffold`, add a *toggle* button on the `actions` parameter;
  - In my case, this is represented by an `IconButton` with a *search* Icon.

- The `title` parameter can receive any Widget. I've used a `Stack` to add the standard written title and a `TextField` to that parameter;

- Finally, I've created a stateful class to abstract the animation logic, which can be somewhat confusing at first, but it's very simple at the core:
  - I use a `SizeTransition` to expand and contract the widgets in a given orientation
  - I change this orientation to horizontal
  - The axis alignment tells Flutter in which direction to animate
  - Besides that, it's just a matter of declaring an `Animation` and an `AnimationController`
- The **bool** used to control the animation is given inverted to each one of the Stack's children. This makes sure only one is visible at a time.

And that's it! I hope this makes sense, if you have any questions I'm more than glad to help.
Primer Post 27 de junio
Published: 2020-06-27 21:24:02

# Objetivos
1. [x] Agregar una Imagen
2. [x] Crear 2 cabeceras
3. [x] Agregar un link a [GITHUB](https://github.com/GClau)
4. [x] Mostrar código de ejemplo
5. [x] Mostrar una lista.

```
![Foto Header](https://dev-to-uploads.s3.amazonaws.com/i/ll0upglr2ldimm82t3ct.jpg)
```
![Foto Header](https://dev-to-uploads.s3.amazonaws.com/i/ll0upglr2ldimm82t3ct.jpg)











Inline `code` has `back-ticks around` it

```javascript
var s = "JavaScript syntax highlighting";
alert(s);
```
 
```python
s = "Python syntax highlighting"
print s
```
 
```
No language indicated, so no syntax highlighting. 
But let's throw in a <b>tag</b>.

# H1
## H2
### H3
#### H4
##### H5
###### H6

Alternatively, for H1 and H2, an underline-ish style:

Alt-H1
======

Alt-H2
------
Emphasis, aka italics, with *asterisks* or _underscores_.

Strong emphasis, aka bold, with **asterisks** or __underscores__.

Combined emphasis with **asterisks and _underscores_**.

Strikethrough uses two tildes. ~~Scratch this.~~

1. First ordered list item
2. Another item
  * Unordered sub-list. 
1. Actual numbers don't matter, just that it's a number
  1. Ordered sub-list
4. And another item.  
   
   Some text that should be aligned with the above item.

* Unordered list can use asterisks
- Or minuses
+ Or pluses

I'm an inline-style link](https://www.google.com)

[I'm a reference-style link][Arbitrary case-insensitive reference text]

[You can use numbers for reference-style link definitions][1]

Or leave it empty and use the [link text itself]

URLs and URLs in angle brackets will automatically get turned into links. 
http://www.example.com or <http://www.example.com> and sometimes 
example.com (but not on Github, for example).

Some text to show that the reference links can follow later.

[arbitrary case-insensitive reference text]: https://www.mozilla.org
[1]: http://slashdot.org
[link text itself]: http://www.reddit.com
Iterators
Tags: javascript, webdev, node, react
Published: 2020-06-27 21:15:51

In ES6 objects are said to be iterable when they implement the *iterable* interface. Many built-in objects such as arrays, sets and maps implement this interface. User defined objects and classes can also implement the interface.

Iterable objects can also be iterated using the new `for of` loop, and used with the `...` spread operator.

### Iterable Interface

An object is said to conform to the iterable interface when the value of its property identified with the shared @@iterator Symbol is a function which returns an iterator.

```js
var iterator = [1,2,3][Symbol.iterator]();
```

An iterator is any object that implements a `next` function.

```js
var iterator = [1,2,3][Symbol.iterator]();

console.log(iterator.next); // '[Function]'
```

The `next` function can be called repeatedly to step through the iteration. Each time it returns an object that contains two keys, `value` and `done`. The values of these keys indicate the current value of the iteration and its completion status respectively.

```js
var iterator = [1,2,3][Symbol.iterator]();

console.log(iterator.next()); // {value:1, done:false}
console.log(iterator.next()); // {value:2, done:false}
console.log(iterator.next()); // {value:3, done:false}
console.log(iterator.next()); // {value:undefined, done:true}
```

Custom objects and classes can be made iterable by implementing the iterator interface manually.

```js
var iterable = {
  [Symbol.iterator] () {
    return {
      next () {
        // Implement iterator
      }
    }
  }
}
```
Ioniconf2020 Slides & Code From My Talk On State Management In ReactJS
Tags: ionic, javascript, react, tutorial
Published: 2020-06-27 21:13:00

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

Here are the slides and the links to the source code from my presentation on State Management Using Context API in ReactJS Ionic Applications.

[Link To Video On YouTube](https://www.youtube.com/watch?v=xh-B-AtsLJc&feature=youtu.be&t=28264&mc_cid=c13c5ed7c9&mc_eid=f6e1fd97a5)

[Project Source Code & Slides](https://github.com/aaronksaunders/state-ioniconf)

### Please Subscribe On YouTube
- [#TheFutureIsWrittenInCode Channel](https://www.youtube.com/channel/UCMCcqbJpyL3LAv3PJeYz2bg)

{% github aaronksaunders/state-ioniconf %}
Build a chatbot and start earning per message with MessengerX.io
Tags: machinelearning, career, android, python
Published: 2020-06-27 21:12:30


MessengerX.io is a new age marketplace for chat apps also fondly called as "chatbots".

Sign up for your FREE API Token @ https://portal.messengerx.io

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

We firmly believe each message is a monetizable opportunity and are ready to invite fellow developers to tap the untapped monetization potential of conversations.

Wiki: https://messengerx.rtfd.io [In Progress]
API Reference: https://ganglia-dev.machaao.com/api-docs 
Partner Deck: https://docsend.com/view/jxdbrcf
Bot Samples: https://github.com/machaao (NodeJS / RASA Samples)
PHP Sample: https://gitlab.com/solution-fuse-oss/messengerx-php-sample

Cheers
HD
https://messengerx.io
In `Representational State Transfer`, What does `State Transfer` exactly mean? Is my example in description is correct?
Tags: rest, api, http, beginners
Published: 2020-06-27 20:59:44

I am getting confused because of multiple views on the terms state transfer in REST

But what exactly state transfer means in REST?

Is it something like... If the resource is `Weather report of NEWYORK city` then each time it changes but when a client requests the server for `the report of NY`, it transfers the representation of that resource at the current STATE (I MEAN THE WEATHER AT THE CURRENT time?)

Or

Is it something like `FORMAT OF THE RESOURCE in SERVER AND CLIENT?` (I mean.. If the RESOURCE is a PNG `IMAGE MAY BE BLOB FORMAT in DB(server-side)` but to the clients, the format will be in PNG/JPG etc?) - if this is correct then it is just a representation right how we are saying it is state?


Please help me to understand what exactly `STATE` mean in REST.