teleren/devto huggingface dataset:
WORD DOC
Tags: fordevelopers
Published: 2019-07-25 04:32:00

Which words are important for developers?

**Inheritance**

**Encapsulation**

**Abstraction**

**Polymorphism**

**Association**

**Aggregation**

**Composition**

**SOLID**

   **SRP Single Responsibility Principle**

   **OCP Open Closed Principle**

   **LSP Liskov Substitution Principle**

   **ISP Interface Segregation Principle**

   **DIP Dependency Inversion Principle**

**
Day 2: Relearning Dagger 2
Tags: android, career
Published: 2019-07-25 04:30:49

It's day 2 of my [job finding journey](https://dev.to/rahulchowdhury/day-1-looking-out-2eih).

# Where am I right now?

I started implementing a simple app using Android Architecture Components, Dagger and Kotlin.

{% github rahulchowdhury/elly %}

I didn't know Dagger 2 has come such a long way since I last learned to use it.

There's a whole new module called [dagger.android](https://dagger.dev/android.html), explicitly designed to reduce boilerplate Dagger code on Android projects.

View models now have a new trick called `SavedStateHandle` to reduce boilerplate while handling app state.

Turns out injecting a `SavedStateHandle` to a view model isn't straightforward. There's a lot to setup.

Currently, I'm stuck in making that work.

# What am I doing today?

I'm going to take a step back and get accustomed to this new `dagger.android` module, first.

Then, I'm going to set up `SavedStateHandle` injection using Dagger in my app.

When all this is done, I'll be working on implementing & caching a single API call to show cool elephant profiles.

Any tips to guide me through this?

# Final notes

I'm looking out for a job for the role of Android Engineer. I have over 3.5 years of experience, and either a career in Bangalore or a Remote job works for me.
Reversing a string using Object.keys() and .reduce?
Tags: javascript, programming
Published: 2019-07-25 04:26:48

---
title: Reversing a string using Object.keys() and .reduce?
published: true
description: Object.keys? Really??
tags: javascript, programming
series: reversing a string
---

We all use `Object.keys()` to get the keys of an object. Standard thing. So what happens when you get the keys of something else? The following is out of [Lychen](https://github.com/axtens/Lychen)'s REPL.
```javascript
Lychen>let obj = {word:"bravo",translation:"shabaash"}
[undefined]
Lychen>Object.keys(obj).join()
word,translation
```
Yes, what we'd expect. What about an array?
```javascript
Lychen>let arr = 'aap ka nam kya hai?'.split(" ")
[undefined]
Lychen>Object.keys(arr).join()
0,1,2,3,4
```
Hmm ... indices? Probably. 
```javascript
Lychen>const chabian = Object.keys(arr)
[undefined]
Lychen>arr[chabian[3]]
kya
```
Definitely.

Okay, what about a string?
```javascript
Lychen>let str = "aap ki tabiyat kaisi hai?"
[undefined]
Lychen>Object.keys(str).join()
0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24
```
That bit of Urdu is 24 characters long. Let's see if it really is indices.
```javascript
Lychen>const indices = Object.keys(str)
[undefined]
Lychen>str[indices[1]]
a
Lychen>str[indices[2]]
p
```
Looks like it. 

And what about Object.keys of a number?
```javascript
Lychen>const num = 58
[undefined]
Lychen>Object.keys(num).join()

Lychen>typeof Object.keys(num)
object
Lychen>Object.keys(num) === null
False
```
Hmm, so whatever the Object.keys of a number is, join returns an empty string, the typeof is object and it's not null. 
```javascript
Lychen>Object.keys(num) instanceof Array
True
```
Right. An empty array. Makes sense. I think.

So the routine. I'll leave it for others to test (I have and it's not particularly performant):
```javascript
function Bruce_ObjectKeysReduce(string) {
  return Object.keys(string).reduce(function (acc, cur) {
    acc = string[cur] + acc;
    return acc;
  }, "");
}
```
(later)

That can be boiled down a little bit more, using ES6 forms, to
```javascript
const Bruce_ObjectKeysReduce = (string) =>
	Object.keys(string).reduce((acc, cur) => {
	  acc = string[cur] + acc;
	  return acc;
	}, "");
```
How to generate a random number between two numbers in JavaScript
Tags: javascript, jquery, webdev, dev
Published: 2019-07-25 04:06:33

---
title: How to generate a random number between two numbers in JavaScript
published: true
description: How to generate a random number between two numbers in JavaScript
tags: #js #jquery #webdev #dev
---

Source : <a href="https://www.skptricks.com/2019/07/how-to-generate-random-number-between-two-number.html" >How to generate a random number between two numbers in JavaScript </a>

This tutorial explains how to generate a random number between two numbers in JavaScript. To generate random in react native application we are going to use JavaScript inbuilt function Math.floor() and Math.random() function is used in this tutorial. The Math.floor() function is used to round the given number to its downward integer value. The Math.random() function is used to Generate Random Number to any range in Point Float value. So we would use both Math.floor() and Math.random() function together to generate random number between given range.


 The simplest possible way to randomly pick a number between two and Use a combination of Math.floor() and Math.random().

<img src="https://1.bp.blogspot.com/-6aSEtHVPrpA/XTaGyRaK0lI/AAAAAAAADHQ/Y8ziU8fVAwMIsela81EfzqAnkCGRu0UFgCLcBGAs/s400/how-to-generate-random-number-between-two-number.jpg" />

<a href="https://www.skptricks.com/2019/07/how-to-generate-random-number-between-two-number.html" > Click here to read more... </a>
What's the last thing you did that gave you impostor syndrome?
Tags: discuss
Published: 2019-07-25 03:52:57

For me, it was releasing a course on https://egghead.io It made me realize that despite 16 years in software, I'm still a novice when it comes to instructing / teaching! I'm not sure I'm cut out for it, and I feel like an impostor. My ego is bruised but maybe that's a good thing...
React sexy easy boilerplate
Tags: react, redux, contextapi, boilerplate
Published: 2019-07-23 07:42:56

---
title: React sexy easy boilerplate
published: true
description: create easy and sexy boilerplates in react 
tags: react,redux, context api, boilerplate
---

hi guys . 
have you ever been worried about creating a SSR react boilerplate with every UI Kits or state managements? :sweat:
yes,it was my challenge,to handle this boilerplates. 
every time,i had to clone a repo and use `npm i `,it was not very important,the most important thing was populating experiences of expert react developers in my projects. 
for this reasons,i decided to develop a package named "React easy boilerplate". :grin: :grin:
a CLI package to moderate and generate easy boilerplates for your Reactjs projects.  :yum: :yum:
it is very easy to use. 
this package has four UIKits
- jss
- material-ui 
- postcss
- ant design 

and two state managements

- context api 
- redux

for now,redux is enable with postcss and jss,as it's UI kit.

the other boilerplates will be ready as soon as we can.

I hope it is useful and can help you to generate easy SSR boilerplates.

### github  :heartbeat: :heartbeat:

[react easy boilerplate](https://github.com/nimahkh/react-easy-boilerplates)

### installation

```
npm i -g react-easy-boilerplate
```

### usage

1- run the command below on cmd or terminal

```
$ react-easy-boilerplate
```

2- `cd` to your project folder

3- run commands below : 

```
npm run start:dev   // run development server
npm run build:prod //build production 
npm run start:prod  // run production server (ssr)
```

![reb1](https://user-images.githubusercontent.com/12640517/61657719-df40f380-acd8-11e9-82e9-227211da765c.png)
![reb2](https://user-images.githubusercontent.com/12640517/61657722-df40f380-acd8-11e9-927c-010474a90f97.png)
![reb3](https://user-images.githubusercontent.com/12640517/61657724-dfd98a00-acd8-11e9-88a6-92b257929833.png)
![reb4](https://user-images.githubusercontent.com/12640517/61657727-dfd98a00-acd8-11e9-8fca-d603e37c54f4.png)
![reb5](https://user-images.githubusercontent.com/12640517/61657728-e0722080-acd8-11e9-93e9-4e7c9d7c1bcb.png)
![reb6](https://user-images.githubusercontent.com/12640517/61657729-e0722080-acd8-11e9-981d-675d0fc2c146.png)
Tech decisions and developer guilt 
Tags: productivity, motivation, startup, discuss
Published: 2019-07-25 02:29:35

Getting stuck on tech decisions. 

A lot of us are accustomed to working on large software projects. The main concern is always scale, readability, testing, stability, etc. 

To start a project at work, I diagram everything out, write a Confluence post on my proposed solution, and solicit feedback. This stage normally takes a couple of days. I generally get really good advice here — I work with tons of smart people that have a lot of experience building software that scales. This is a really important step when building enterprise software.

This is because the outcome of my project is **two** things: the **feature AND the code**. 

I work with plenty of other engineers who will be reading and interacting with my code. If it’s not easily consumable, it will cause plenty of pain for the business in the future. 

_Here’s the difference with side projects:_

**You might throw the whole codebase away.**

Yes. The whole codebase. 

You might not gain traction. You might pivot to a new idea. You might never work on this again. And that’s the point.  

That’s why you don’t have to hold yourself to the same standards you do at your enterprise software job. 

**Put something out there. See if your users like it and pivot if they don’t.**

The point is to be lean.

When you aren’t certain your project will be around in three months, don’t worry about:
* Can this (code / infrastructure) scale?
* Does this code smell?
* Is this the best tech?

Instead, focus on:
* Does this work for my users?
* Can I build new features in this system quickly?
* Is this performant enough? (speed == conversion)

Most importantly: **is this a viable solution to serve my customers?**

I'll leave you with a final point from Seth Godin.
> Stephen King, one of the most beloved, famous and bestselling authors ever, often goes to writer’s conferences. After he talks for a little bit he says, “Any questions?” Inevitably, someone raises their hand—I’m paraphrasing here—and says“Mr. King, you are one of the most beloved, famous, and bestselling authors ever. What kind of pencil do you use to write your books?” It’s almost as if knowing what kind of pencil Stephen King uses will help them be more like Stephen King.

[Link to Seth's whole post](https://seths.blog/wp-content/uploads/2012/07/pencil.pdf)

[https://drewb.tech/posts/2019-07-05-sideproject-tech/](https://drewb.tech/posts/2019-07-05-sideproject-tech/)
When you don't know how to debug your R program
Tags: r
Published: 2019-07-25 01:31:37

I've watched new R users get tripped up by completely uninformative error messages again and again. It's one thing to fix bugs when you know what's wrong; it's something entirely different when you have no clue what's wrong or even where to look.

The magic that will point you in the right direction is

```
traceback()
```

Read through the output in reverse order. The first lines of output (which are at the bottom) are the first lines that were run. The last line (the one at the top) tells you where the error occurred. Bingo. Now you know where to start looking.

You might still not know what is wrong, but given the popularity of R, you can copy and paste the last line (or the last couple of lines) into Google, and it will point you to someone else that has gotten the same output.

This isn't magic pixie dust - it's programming, after all - but it almost always gives you enough information to at least get started on debugging.
How does this alphabetical-sorting function work?
Tags: beginners, help, explainlikeimfive
Published: 2019-07-25 01:14:29

---
title: How does this alphabetical-sorting function work?
published: true
description: 
tags: beginners, help, explainlikeimfive
---

I'm pretty sure I wrote this function based off of someone else's that I saw. Trouble is, I'm looking back through some code, and I don't fully understand how it works. 

What I have is a `Set` that I'm sorting alphabetically. That Set is named, aptly, `uniqueSet`. Here's the code:

```
let sortedList = uniqueSet
  .sort((a, b) => {
    if (a < b) return -1;
    else if (a > b) return 1;
    return 0;
  })
```
ES 6: Using Object.entries() to iterate the keys in the Object
Tags: javascript, es6
Published: 2019-07-25 01:11:02

---
title: ES 6: Using Object.entries() to iterate the keys in the Object
published: true
description: 
tags: JavaScript, ES6, 
---

You can iterate keys in an object using ES 6 like below.

```
let employe = {
 name: 'Chaitanya',
 eno: '1'
};

for (let [key, value] of Object.entries(employe)) {
  console.log(`${key}: ${value}`);
}
```


or there is another way using forEach method

```
Object.entries(employe).forEach(([key, value]) => {
  console.log(`${key}: ${value}`); 
});
```

Object.enttries() got standardised in ECMAScript2017. Below is the browser support chart collected from MDN

![](https://thepracticaldev.s3.amazonaws.com/i/men2md5m46u0ye0pphzl.png)
Dev.to for CodeNewbies?
Tags: discuss, codenewbie, beginners, meta
Published: 2019-07-24 23:42:38

---
title: Dev.to for CodeNewbies?
published: true
description: Can dev.to be used for CodeNewbies, what are your best tag suggestions. How best can a CodeNewbie navigate the site to receive notifications for simpler things?
tags: discuss,codenewbie,beginners,meta

---

As a CodeNewbie myself, I seem to struggle to find many relatable or "interesting" blog posts mainly because I am not of the level in my career to understand the newest features of the new technologies, or use GraphQL, or use react hooks.

Now, I could set goals of learning all these things (which I might very well do in the future) but for now, I want to ask you guys;

**What are your suggestions for making dev.to as CodeNewbie as possible so that my notifications are more on my level? Other than following the #CodeNewbie tag and setting the follow weight higher?** Please discuss! Thanks.

For those that didn't know, you can set follow weights on your tags by going to your dashboard -> following, as seen below:

![](https://thepracticaldev.s3.amazonaws.com/i/hfe3vblnyzy4ir7b0g4q.png)
How to create a Vuetify data table that has only some expandable rows
Tags: vue, vuetify
Published: 2019-07-24 23:27:34

---
title: How to create a Vuetify data table that has only some expandable rows
published: true
description: Vuetify data table offers ability to expand a row. Having only some rows be expandable gets a bit trickier.
tags: vue, vuetify
---

Uses **vuetify v2.0.0**

To make only some of the items expandable use the `data-table-expand` slot. The slot provides the following props.

```js
{
  item: any
  select: (v: boolean) => void
  isSelected: boolean
  expand: (v: boolean) => void
  isExpanded: boolean
  headers: TableHeader[]
}
```

Using the `item` object and the `expand` function, you can add custom expend functionality.

```html
<template>
  <v-data-table
    :headers="myHeaders"
    :items="myItems"
    :single-expand="true"
    show-expand
  >
    <!-- expand column -->
    <template v-slot:item.data-table-expand="{ item, isExpanded, expand }">
      <v-btn @click="expand(true)" v-if="item.canExpand && !isExpanded">Expand</v-btn>
      <v-btn @click="expand(false)" v-if="item.canExpand && isExpanded">close</v-btn>
    </template>

    <!-- expand item/row -->
    <template v-slot:expanded-item="{ headers, item }">
      <td :colspan="headers.length">
        <pre>{{item}}</pre>
      </td>
    </template>
  </v-data-table>
</template>
```

The `items` objects use a `canExpand` boolean for determining if it can be expanded.

Vuetify, by default adds a `text-start` class to the expand `td` element. To change alignment, update the header object for that column, by adding an `align` property.

Available values are: `'start' | 'center' | 'end'`

The expand column is always first though, If you want to make it last, you need to add a custom column.

steps:

1. Remove the `show-expand` prop from `v-data-table`, we're no longer using it.

2. Add `:expanded.sync="expanded"` prop to the data table, and a `expanded:[]` variable to your component `data`.

2. Add a new column `{ text: '', value: 'expand', align:'end' },` to `myHeaders`.

3. Add a row slot for the new column. Because the row slot does not provide a `expand` function, you need to use the `expanded` variable to toggle selection.

```html
<template v-slot:item.expand="{ item }">
  <v-btn x-small @click="expanded = [item]" v-if="item.canExpand && !expanded.includes(item)">compare</v-btn>
  <v-btn x-small @click="expanded = []" v-if="item.canExpand && expanded.includes(item)">close</v-btn>
</template>
```


More info here: https://vuetifyjs.com/en/components/data-tables#api
Use assertLogs to test Python logs
Tags: python, webdev, testing, tutorial
Published: 2019-07-24 18:24:16

Is well-known that logs can save us the day if we use them correctly.
In most cases, create correct logs and add them into the corrects places are crucial to analyze our system flow. On the other hand, we know too, that to get a good night nap with a clear conscience we MUST test our code.

Getting together the best of these worlds, we have a good practice that can help us to make sure that a log will be written if we follow a particular path of the flow.
Imagine that you want to log if a result is false, and you want to ensure that it will be in the log file tomorrow. For ensuring that nobody will change this behavior without your consent, or maybe, be deleted by yourself in the future. You will have a test that accuses this action.

If you are a Python developer, good news! It has an excellent `assert` function to do that!
I didn't know about the existence of this. I think it's a good idea considering it in your upcoming tests.

Here a dummy example: 

```python
import logging

logger = logging.getLogger('backend')

# ...

def foo(self, num):
    if num == 1:
        logger.warning('One is not acepted')
        return False
    # Do somenthing ...
    return True

# ...

def test_foo(self):
    with self.assertLogs('backend', level='INFO') as cm:
        result = self.foo(1)
    self.assertFalse(result)
    self.assertIn('WARNING:backend:One is not acepted', cm.output)

```

You can read more here:
- [Unit test docs - assertLogs](https://docs.python.org/3/library/unittest.html#unittest.TestCase.assertLogs)
How to Concat Subquery on Django ORM
Tags: django, djangoorm
Published: 2019-07-24 22:37:56

---
title: How to Concat Subquery on Django ORM
published: true
description: Concat multiple rows of a subquery with only one column in one cell.
tags: django, djangoorm 
cover_image: https://thepracticaldev.s3.amazonaws.com/i/crsd9h3rn0895z90k5od.png
---

In the cover image the "PRODUCTS" column is a concat of the products of the row store.
{% gist https://gist.github.com/leonardon473/dea713eb489a10e55a8bb265598934b7 %}

Cover example with Django Admin
{% gist https://gist.github.com/leonardon473/84ddaa869c308419d5e19f11693f0146 %}
Botkit 4.5
Tags: botkit, bots, javascript, slack
Published: 2019-07-24 22:32:53

---
title: Botkit 4.5
published: true
description: There's a new version of Botkit with a few handy features
tags: botkit, bots, javascript, slack
---

I just published a new version of [Botkit](https://botkit.ai): [v4.5.0](https://github.com/howdyai/botkit/blob/master/changelog.md#45)

Fun new things include:

* Developers can now dynamically generate attachments and quick replies in an otherwise scripted dialog: handy for search results, dynamic cards or personalized suggestions
* Button clicks from Slack's Block Kit attachments can now be used as part of a dialog -- when a user clicks a button, its treated like they typed it.

COOL, RIGHT?

Creating a bot for the web, sms or a variety of chat platforms is as easy as [remixing one of our starter kits on Glitch](https://glitch.com/botkit)!

If you want to chat about building bots, [join our community](https://community.botkit.ai) of > 10,000 devs!
Ideal workflow to start a new site from a blank canvas?
Tags: help, beginners, codenewbie
Published: 2019-07-24 21:35:45

---
title: Ideal workflow to start a new site from a blank canvas?
published: true
description: 
tags: help, beginner, CodeNewbie
---

I am trying not to go back into tutorial purgatory and have been working from scratch on new projects.

In order to up my HTML and CSS skills, I found a website (made in Wordpress) that I am attempting to mimic with HTML, SCSS, and JS.

My first thought is, why don't I get all of the content marked up in HTML first and then I can tackle the CSS to make it look like the original. This started off well enough, but as I scrolled through the example site, I realized the page is SUPER long and has a lot of different sections/content.

Now looking back at all the HTML I wrote and my CSS-less page, I'm wondering if this workflow is correct, wrong, or just plain confusing.

Is there a standard way of starting projects that are used in a production environment? 

Did I just make my life/learning more difficult by not styling each section on the way down the page? I feel like I can do it, but now with the sheer amount of HTML I have, it looks like it's going to take a hot minute to style.

Any tips/advice on workflow (Am I even using the right word here?) for starting new projects from scratch?

Looking back at everything I did, all I can think in the back of my head is:

![planes trains and automobiles gif](https://media.giphy.com/media/nS8HuK8hZDPUI/giphy.gif)

tyty!
Twitter's new UI
Tags: watercooler, discuss
Published: 2019-07-24 21:34:27

By now I'm sure most of you were switched to Twitter's new UI.

If you are one of the lucky ones who are still on the old one here's my tip to you:

{% tweet 1153822395670487040 %}
Honestly, having a static unchanging feed is probably better than the disaster they released!

So anyway, what's **your** opinion on Twitter's new UI?
Ditch Console Log 
Tags: javascript, typescript, react, chrome
Published: 2019-07-24 20:15:50

---
title: Ditch Console Log 
published: true
description: Debugging in Chrome Using Logpoints
tags: javascript, typescript, react, chrome
---

People love using console.log to quickly debug values but starting with Chrome 73 there is a faster way. You can view the source of a file and then instead of setting a breakpoint you can right click in the same spot and choose Add Logpoint. When the logpoint is hit, the output will be displayed in the console window. You can also add logpoints to production code. 


![Add logpoint](https://developers.google.com/web/updates/images/2019/01/add-logpoint.png)

![Add logpoint expression](https://developers.google.com/web/updates/images/2019/01/logpoint-expression.png)

![Logpoint console](https://developers.google.com/web/updates/images/2019/01/logpoint-result.png)

If you use Firefox you can also add log points by right clicking and selecting Add Log
VUE HEROES
Tags: vue, javascript
Published: 2019-07-24 20:01:35

Hi friends, I'm new in Dev.to and a front-end developer. I work doing visualizations and UI Platforms for journalism. I hope find guds friends and give a hand anyway in here. After going a workshop and read a lot, Now I'm begin to program with VUE.JS. So, I looking for ALL THE BEST TUTORIALS TO BE A VUE HERO. All the resources that you feel is awesome will be very useful for me (and for anyone who reads this as well!). Please, don't doubt to put it in ⬇   

Thanks! 

![Alt text of image](https://media.giphy.com/media/5VKbvrjxpVJCM/giphy.gif)