teleren/devto huggingface dataset:
The XY Problem – How to spot it, solve it, and ask better questions
Tags: productivity, career, beginners, watercooler
Published: 2020-08-05 14:34:08

I recently came across the name for a phenomenon that I have been aware of for some time. It’s called the ‘XY problem’.

Wikipedia has a great succinct explanation:

> The XY problem is a communication problem encountered in help desk and similar situations in which the real issue, X, of the person asking for help is obscured, because instead of asking directly about issue X, they ask how to solve a secondary issue, Y, which they believe will allow them to resolve issue X.
>
> **[Wikipedia](https://en.wikipedia.org/wiki/XY_problem)**

I come across this problem a lot; sometimes when talking requirements with clients or offering help online.

## Solving the XY problem

An example of a client with an XY problem could be:

**Client:** *I am looking for the best way to convert my webpages to PDF, can you help?*

Of course, I can provide the client with a solution to this query (Y) but what are they trying to achieve (X)? I start a polite conversation to discover what the end goal is and ensure I’m coming up with an effective solution.

**Client:** *I would like my visitors to be able to print out my webpages.*

Now we know that, we can suggest that most likely a print compatible stylesheet would be much more preferable. Had I not dug a little deeper, the client would have ended up with a bad solution to a reasonable problem.

As we’ve discussed, the same phenomenon can commonly appear on message boards and Q&A sites such as StackOverflow. A user may be asking how to get the last three characters from the end of a string. In PHP, they could use `substr()` to achieve this. With a little more digging, we could discover that the user would like to get the file extension instead. In this case, the more robust solution could be `pathinfo()` or some regex.

Careful though, if you suspect you are facing an XY problem, it is rarely a good idea to assume. Doing so could be patronising and annoying. Our example client could have said that the webpages are job applications and they need to be in PDF to send to another system. This would have been a sensible request and an example of why I always have that brief conversation first to make sure we're on the same page.

## Asking smarter questions

Even when we know the context, it can be easy to fall into these traps ourselves while searching for answers to problems; particularly so when we are far down the ‘rabbit-hole’ of a potential solution. If you find yourself burrowed, it will often be useful to take a step back and reestablish your end goal.

For some insightful further reading, check out [How To Ask Questions The Smart Way](http://www.catb.org/esr/faqs/smart-questions.html#asking) by Eric Steven Raymond.

Have you come across this phenomenon in your dev journey on either side of the problem?
A couple tips for working from home
Tags: watercooler, productivity, remote, tips
Published: 2020-08-05 12:22:19

Many developers have been tossed into remote work due to the pandemic. While it's quite a lot different than what remote work is like without an epidemic, it's great that technology allows developers to work while staying safe. 

I've been working remotely in some capacity for over seven years. A couple of things I try to do to help remote work go as smoothly as possible:

1. **Communicate A LOT but in the right medium**
e.g. Don't send a giant feature proposal over your messaging client. My rule of thumb here, if it's something that needs to be referenced later, it goes into something less timeline based (JIRA / Confluence / Docs / whatever)
1. **Eliminate distractions**
If you have a personality where you get side-tracked easily, put your phone in another room. Use tools to help you block sites that you waste time on, etc.
1. **Write down your daily goals and execute on them**
Some people do this by creating personal calendar invites for their tasks, TODO lists, or writing things down in notebooks. I do a combination of TODO lists + calendar items for tasks. It's okay if things need to change but writing down your goals is an excellent way to be mindful that you're changing your goals intentionally, instead of drifting into what you focus on. 
1. **If possible, keep your work equipment in another room**
I totally get it's not possible for everyone, but I find it helpful to have a space where I use my work equipment and _mostly_ use it only in that space. This helps me keep some boundaries between when I'm working and not.
1. **Get outside (if possible)**
I like to both take walks and otherwise exercise. I notice on the days I do this I'm both more productive, and generally feel better.

I'd love to hear your tips in the comments or on the following Twitter thread. Be sure to check out the thread for more:

{% tweet 1236298297532452865 %}
Porque Vue.JS é uma boa opção?
Tags: vue, javascript
Published: 2020-08-05 14:28:55


Uma característica do javascript, e por consequência também do VueJS, é a capacidade de ser utilizado em qualquer tipo de projeto e tecnologia. A curva de aprendizagem é uma das mais curtas. Para começar a usar VueJS basta importar um script via cdn. Sem contar com o apoio da comunidade Slack e StackOverflow.

Seu projeto pode estar sendo feito em Ruby, PHP, Python, Node, Java, Go ou qualquer outra linguagem, você pode usar VueJS. Agora vou te mostrar 3 motivos para reforçar o Porque Vue.JS é uma boa opção para desenvolver seus projetos.

## 1 - Moderno
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/9vfuong5vh2c26sa5ar1.jpg)
Provavelmente você já ouviu falar do ReactJS. Logo há muitas semelhanças entre VueJS e ReactJS.

Porque o VueJS compartilha semelhanças com muitas libs e frameworks que permitem criar componentes, isso inclui Angular2, porém seus pequenos detalhes fazem toda a diferença na hora de desenvolver.

Apesar de compartilhar semelhanças com Angular2 ele não tem muitas semelhanças com o Angular1, não podendo ser nem considerado um concorrente para ele, uma vez que a filosofia do Angular1 é completamente diferente da filosofia do VueJS e até mesmo Angular2.

## 2 - Sintaxe e API claras
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/7hlxkc07cca9uqrofzmu.jpg)
Criar componentes com VueJS é muito simples e objetivo. Sua API é intuitiva e simples, seu sistema de template pega o que já estamos acostumados e torna muito simples, previsível e agradável. 
O grande destaque esta em como o código javascript é escrito, tudo possui seu lugar de maneira clara. Mesmo ele sendo extremamente flexível os caminhos que a informação e código percorrem são extremamente previsíveis, sendo muito fácil trabalhar em equipe e usar componentes de terceiros.

## 3 - Flexibilidade e Perfomance
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/sncazw52nlg670gfohvv.jpg)
VueJS não é um “ditador”. Ele te deixa livre para fazer uso dele da maneira que melhor convir ao seu projeto. 
Isso é uma característica muito importante nos projetos feitos javascript.

VueJS é uma lib javascript e não um framework, então você pode usar ele desde projetos pequenos a projetos maiores e mais complexos.

O fato dele não ser um framework fullstack pode deixar algumas pessoas com receito de usa-lo, porém ele possui um ecossistema de libs complementares muito bom, com destaque para vue-router (rotas spa), vue-resource (http) e vuex(flux para vuejs).

VueJS possui uma performance excelente, em alguns testes ele se saiu melhor do que o ReactJS (comparing React.js to Vue.js for dynamic tabular data)
E essa performance foi alcançada mesmo sem o VueJS fazer uso de Virtual-DOM como o ReactJS.
CryptoCRIT
Tags: cryptocurrency, blockchain, encryption
Published: 2020-08-05 14:22:54

<p align='center'><img src="https://theabbie.github.io/files/CryptoCRIT.png" alt="CryptoCRIT"></p>

* [What Is CryptoCRIT](#what-is-cryptocrit)
* [Tasks](#tasks)

## What Is CryptoCRIT

CryptoCRIT is an open-source Cryptocurrency project which facilitates a Cryptocurrency wallet for making payments. The associated Cryptocurrency is called CritCoin.

This system will be used in <a href="https://www.fcrit.ac.in">Fr. Conceicao Rodrigues Institute of Technology</a>

<table>
<caption>CryptoCRIT</caption>
<thead>
<tr>
<th colspan="2">Quick Info</th>
</tr>
</thead>
<tbody>
<tr><th scope='row'>Name</th><td>CryptoCRIT</td></tr>
<tr><th scope='row'>Technologies Used</th><td><ul><li>Blockchain</li><li>RSA Encryption</li></ul></td></tr>
<tr><th scope='row'>College</th><td><a href="https://www.fcrit.ac.in">Fr. Conceicao Rodrigues Institute of Technology</a></td></tr>
<tr><th scope='row'>Team</th>
<td>
<ul>
<li><a href="https://github.com/rgab1508">Gabriel Rajendran</a></li>
<li><a href="https://instagram.com/adi.unni">Aditya Unnikrishnan</a></li>
<li><a href="https://theabbie.github.io">Abhishek Chaudhary</a></li>
<li><a href="https://instagram.com/tushar_gupta_339">Tushar Gupta</a></li>
</ul>
</td>
</tr>
</tbody>
</table>

## Tasks

- [ ] Backend
- [ ] Frontend
- [ ] Logic
- [ ] Working
- [ ] Production

## Getting Started

### Installation

To use CryptoCRIT in your project, run:

```
npm i cryptocrit
```
GSoC with CHAOSS - Weeks five and six!
Published: 2020-07-22 13:54:58

Hello everyone!

This is the biweekly report for weeks five and six of GSoC related to the project CHAOSS D&I Badging.

**Bot**

During week 5, I explored what automation could be part of the Badging review process.

Currently, there is a bot that comments the review checklist and relevant links on different Pull Request events. There are several possibilities for what kind of bots can be integrated into the process. For week five, I explored two different bots:
- A bot which can assign reviewers on using a specific slash (example `/assign`)command in GitHub comments - This one, while sounding useful at first, is slightly unnecessary at this point since reviewers need Repository Level `write` permissions, and that gives them enough access to assign themselves to a PR.
- The second was the bot to generate badges attached to PR link upon commenting a specific slash command and the badge level.
Link - https://github.com/bistaastha/slash-bot

**Pilot Testing**

Week six was the time for the Pilot Testing of the D&I project. We had three mock applications initiated (2 for Events, and 1 for Projects).

This lead to gaining invaluable information about some process-related things which did not work that well in reality and need to be reworked or reordered or both in order to be useful.

**Review Checklist reframing**

Review Checklists are the reference list for reviewers to check for specific things in the submitted application/links.

One of the main observations during Pilot Testing was that Qualitative Checks were cumbersome to fill out. I later restructured the Checklists, removing them, leaving only checkboxes followed by what they were for. 

- Event Review Checklist (revised) - https://hackmd.io/@7f7uN_UHRtOhM5rnON3_HQ/Byo6owJew
- Project Review Checklist (revised) -https://hackmd.io/@7f7uN_UHRtOhM5rnON3_HQ/Skqbg0WeD

Thanks for reading!
Animate text along a path (it's easy)
Tags: webdev, javascript, beginners, tutorial
Published: 2020-08-05 14:07:51

It is easy to animate text along a path. You can use it to make some fun effects. All you need is some SVG and a sprinkle of JavaScript.

This is a short interactive tutorial. It is best viewed in [Full Page Mode on Codepen](https://codepen.io/robjoeol/full/pogEXXK).

{% codepen https://codepen.io/robjoeol/pen/pogEXXK %}
🤔 Do you use Redux, if not what do you use?
Tags: discuss, react, redux, javascript
Published: 2020-08-05 14:05:57

I don't hate Redux but you need to maintain a lot of files.

This makes me cringe but seems like not-enough reason to remove redux completely 🤷‍♂️

I like the new global state management with *Context* and *useState*/*useReducer*

What do you guys use for global state management? and why?
GitHub Codespaces LiveShare
Tags: github
Published: 2020-08-05 13:57:11

I've long been a fan of VSCode LiveShare.  Happy to report that LiveShare works already in the beta of GitHub Codespaces (shown for user1 - lynnlangit - below).

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

You can see that you can share in read-only, or read-write.  You can share the code, a terminal window and/or include a chat window (shown fur user2 - llangit - below).

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

LiveShare, combined with ability to code in a browser is a game-changer for collaboration and education.
Angular Inter-Component Communication Pattern
Published: 2020-08-05 13:55:51

- Set up output EventEmitters in our 
  ButtonItemsComponent

```typescript

   @Output() onBackEvent = new EventEmitter<any>();
   @Output() onEditEvent = new EventEmitter<any>();
   @Output() onSaveEvent = new EventEmitter<any>();
   @Output() onDeleteEvent = new EventEmitter<any>();
   @Output() onCloseEvent = new EventEmitter<any>();

```

- Hook up button click events to Event Emitters, getContent is used to include other content for the event. 

```typescript
onBackClicked(div) {
   this.onBackEvent.emit(this.getContent(div));
 }
 onEditClicked(div) {
   this.onEditEvent.emit(this.getContent(div));
 }
 onSaveClicked(div) {
   this.onSaveEvent.emit(this.getContent(div));
 }
 onDeleteClicked(div) {
   this.onDeleteEvent.emit(this.getContent(div));
 }
 onCloseClicked() {
   this.onCloseEvent.emit(this.model);
 }
```

- In other program containing the 
  ButtonItemsComponent

```Typescript
 @ViewChild(ButtonItemsComponent)
   ButtonItemsComponent: ButtonItemsComponent;

// this follows in AfterViewInit
 
  this.ButtonItemsComponent
  .onBackEvent
  .subscribe((item) => {
    this.onGoBack();
 });
 this.ButtonItemsComponent
  .onCloseEvent
  .subscribe((item) => {
    //can do clean up here
  });
 this.ButtonItemsComponent
  .onDeleteEvent
  .subscribe((item) => {
   this.onDelete(item);
 });
 this.ButtonItemsComponent
  .onSaveEvent.subscribe((item) => {
  this.onSave(item);
 });
```
 
Works as a one way from child to parent communication as shown, just reverse for parent to child. 

JWP 2020
How to use Scoped Slot inside Vue's Render Function (Vuetify)
Tags: vue, vuetify, javascript, showdev
Published: 2020-08-05 13:53:28

---
title: How to use Scoped Slot inside Vue's Render Function (Vuetify)
published: true
description: 
tags: #vue #vuetify #javascript #showdev
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/ht0gfk51jaauput9h68y.jpg
---

I tried to implement a custom component using Vue's render function. I get some problem to understand how to implement Scoped Slot inside a render function. 

In this post, I will share the goal with the example code.

## Beginning with the Template 

This is the starting point. I had this simple Vue's template that I would convert into a custom component with the render function.

The reason is the classical one when is useful to use render function instead of the template: get more control of the rendering code of the custom component.

```html
<v-tooltip bottom>
  <template v-slot:activator="{ on }">
    <v-icon color="primary" dark v-on="on">mdi-note</v-icon>
  </template>
  <span>Tooltip</span>
</v-tooltip>
```


## Implementation with Vue's render function

This is the implementation with the render function.

```javascript
const CustomIconTooltip = {
  name: "CustomIconTooltip",
  props: {
    tooltip: String,
  },
  render(createElement) {
      return createElement("v-tooltip", {
          attrs: { bottom: true },
          scopedSlots: {
            // Slot Name
            activator: ({on}) => {
              return createElement(
                "v-icon", { 
                  attrs: { color: "primary", dark: true },
                  on: on,
                },
                "mdi-note"
              );
            },
          },
        },
        this.tooltip
      );
  },
};
```

How to use CustomIconTooltip Component

```html
<custom-icon-tooltip :tooltip="My Custom Icon Tooltip" />
```

## Code Example

{% codepen https://codepen.io/etino/pen/JjXjWKb %}


## References
- [Vuetify `v-tooltip` component](https://vuetifyjs.com/en/components/tooltips/)
- [Vue Render Function & JSX - The Data Object In-Depth] (https://vuejs.org/v2/guide/render-function.html#The-Data-Object-In-Depth)
- [Dev.to Post - Accessing the virtual DOM using render functions in Vue JS](https://dev.to/bnevilleoneill/accessing-the-virtual-dom-using-render-functions-in-vue-js-5fh5)
Hook Up With Reliable Web Development Company To Get Excellent Solution
Tags: webdev
Published: 2020-08-05 13:45:28

World Wide Web is flooded with information and data which guide users in discovering the relevant stuff they are seeking for. You can find this information either on blogs or on a specific website which is associated with providing similar types of products and services. Among all, related business websites can give you better information for a particular service or product you want to avail of.

This is how we can say that web development is essential when it comes to rendering accurate information to customers. Website development can only succeed when it is done under the arms of professionals. Otherwise, you may discover some flaws in that. Hiring a credible web development company in this context will give you a user-customizable and trouble-free web solution that carries out exact specifications.

Good [web development companies](https://www.propelguru.com/website-development/) are professionally involved in offering their valuable services to clients. These are also liable to help out small and big scale enterprises by placing in front of them a user interactive and modern web solution.

See what you can get by joining hands with an authentic web development company:
• Custom-made web development designed as per clients' preferences.
• Innovative and wisely integrated solutions based on advanced and up-to-date development platforms.
• Feature-rich website development incorporating all the functional requirements in place.
• You can also have result-oriented B2B solutions to provide a better environment for growth.
• Credible web development companies also offer B2C business solutions on behalf of industry and client demand.

Conclusion:

Web development companies always try to facilitate clients with flexible, enticing, and quality-oriented solutions. They consider it important to offer functional, aesthetic, and fully-featured web development which provides an excellent return on investment in the future. We appreciate their dedication and always suggest hiring them for favorable web development solutions.
Remote Engineering culture ideas
Tags: remote, culture, help
Published: 2020-08-05 13:42:39

---
title: Remote Engineering culture ideas
published: true
description: helped wanted to promote a good remote culture
tags: remote, culture, help
//cover_image: https://direct_url_to_image.jpg
---

With COVID-19 in full force, my engineering team has gone full remote.

In terms of working collaboratively, we're doing really well with a short stand up every morning, pair programming works well with VSCode live share and we have a "enginbeering" mini drink session at the end of the week.

But we want to make it better. One idea I have is to move some more of the engineering communication from slack to discord as I really like the always-on voice chat channels.

My question to you all is, if you're now remote or have worked remotely, did you have any unique events or things that promoted a positive "culture" to every from QA to PM's?

(eg - hackathons)
Welcome Thread - v85
Tags: welcome
Published: 2020-08-05 13:41:23

---
title: Welcome Thread - v85
published: true
description: Welcome to DEV! A thread of hellos and intros.
tags: welcome
---

![zootopia sloth](https://media.giphy.com/media/p2J2OMrBI6ErC/giphy.gif)

### Welcome to DEV!

1. Leave a comment below to introduce yourself! You can talk about what brought you here, what you're learning, or just a fun fact about yourself.

2. Reply to someone's comment, either with a question or just a hello. 👋 

**Great to have you in the community!**
Angular Tests
Tags: angular
Published: 2020-08-05 13:29:31

I'm trying to figure it out why I'm getting DISCONNECTED while running my tests.

##### So I did this to see what's been tested:

`npm i karma-spec-reporter --save-dev`

`karma.conf.js`

```
plugins: [require('karma-spec-reporter'), ...],
```

```
reporters: ['spec', ...],
```

```
specReporter: {
    maxLogLines: 5, // limit number of lines logged per test
    suppressErrorSummary: true, // do not print error summary
    suppressFailed: false, // do not print information about failed tests
    suppressPassed: false, // do not print information about passed tests
    suppressSkipped: true, // do not print information about skipped tests
    showSpecTiming: false // print the time elapsed for each spec
},
```

https://stackoverflow.com/a/58202615/1958882

##### And added this:

```
captureTimeout: 210000,
browserDisconnectTolerance: 3, 
browserDisconnectTimeout : 210000,
browserNoActivityTimeout : 210000,
```

https://github.com/jasmine/jasmine/issues/1413#issuecomment-334247097


```
browsers: ["Chrome-headless"],
customLaunchers: {
    "Chrome-headless": {
        base: 'Chrome',
        flags: [
            '--no-sandbox',
            '--disable-gpu',
            '--enable-logging',
            '--no-default-browser-check',
            '--no-first-run',
            '--disable-default-apps',
            '--disable-popup-blocking',
            '--disable-translate',
            '--disable-background-timer-throttling',
            '--disable-renderer-backgrounding',
            '--disable-device-discovery-notifications',
            '--remote-debugging-port=9222',
            '--disable-web-security',
            '--watch=false'
        ]
    }
},
```

https://github.com/jasmine/jasmine/issues/1413#issuecomment-432112670

And still, this damn thing it's not working... :rage:

##### Avoid karma tests running twice on autoWatch

```
autoWatch: false,
```

https://pracucci.com/avoid-karma-tests-run-twice-on-autowatch.html
what things should be covered with unit test for a react application?
Tags: help, react, reacttestinglibrary, jest
Published: 2020-08-05 13:29:23

---
title: what things should be covered with unit test for a react application?
published: true
description: 
tags: help, react , reacttestinglibrary, jest
//cover_image: https://direct_url_to_image.jpg
---
I am working on slightly large react application, currently there is only few test-cases covered with basic assertion like 'text' exists/not exits.

Planning to cover all the Components with meaningful unit-tests, have started to use testing-library with jest.

what questions should be addressed by our self while writing test-cases for a component in react, specifically in React-testing-library ? any generic ui unit testing pattern would help.
3D model on a website three.js
Published: 2020-08-05 13:15:49


Im still new to three.js and am trying go work with this for a school project I would like to use a 3d model robot ln my website that interacts with a user when something on the page is clicked. It would talk with a text to speech software. Im just not sure where to find learning resources that would help me get the robot onto the webpage and then animate some movement. I figured I could do this with three.js but im only assuming because of the loaders.

Id like to get his arms moving when he talks or have him walk across the screen nothing to fancy. Again this js working with a normal website. He is kind of a mascot leading people around our site. Any suggestions?