teleren/devto huggingface dataset:
Losing a High Performer - Lessons in Velocity
Tags: agile, scrum, velocity, performance
Published: 2019-08-27 16:57:10

Some background before I get into the juicy parts: I'm a team lead for a scrum team with four (used to be five) devs, two QA, a product owner, and a tech writer. We do two-week sprints, and it's a medium/large company.

I was fortunate enough to work with a very high performing dev on my team for a couple big projects which translated to about a year. He was a big team accelerator. By that I mean he finished his stories and bugs for the sprint before most others and quickly diverted to helping the rest of the team (including QA) with in-sprint stories/bugs/tasks, mentoring less-proficient devs, or working ahead in the backlog if everything in-sprint was well on-schedule.

This led to a very long "green" streak for the team. We hit our mark so consistently that management grew suspicious and started asking why we were so perfect. I explained the working ahead thing combined with the QA bottleneck, and they were satisfied.

Fast-forward to the end of a big project and the beginning of another, and my high performer gets an opportunity to become a team lead for a new feature team being formed. He jumps on it, and we're all very happy for him... until the first two sprints without him. The impact he had on our velocity was much higher than any of us expected and led to a couple failed sprint commitments.

We tried to commit to 20% less, and then 25% less, but his impact on the team was actually closer to 30% (with 5 devs at the time). His influence on our productivity was far beyond simply being one-fifth of the devs. He gave great advice, helped to decompose projects into bite-size pieces, seamlessly put on his QA hat when it was helpful, and so many other hard-to-measure behaviors that added up to a very significant contribution to the team.

We're back in the green now, but we certainly learned our lesson. Everyone has stepped up and is settling into a healthy rhythm. We're learning how to put on our QA hats, break down stories to even smaller pieces, and we're being a little bit more pessimistic in our commitments and estimates.

I'm thrilled for his career progression, and I'm thankful for all the time we got to spend working together, but the hardest part of having an amazing teammate is when they inevitably move on.
ULEARN - LMS script built on Laravel 5.8 and React JS 16.9
Tags: laravel, react, lms
Published: 2019-08-27 16:57:09

[ULEARN](https://www.ulearnpro.com) is an application similar to UDEMY with all the basic features that needed for Learning Management System(LMS), which is completely available as an open source(FREE) at [GitHub](https://github.com/ulearnpro/ulearn).

**Top 5 Reasons: Why you should download this script.**

1. The entire source code is completely free to download and customise based on your need
2. It's built on latest version of Laravel 5.8
3. The learning page is entirely developed by ReactJS 16.9
4. It's light weight and contains all the basic features needed for LMS
5. Instance support through GitHub, email and in-built contact feature

For more details,[click here](https://www.ulearnpro.com)
What hides under JSX
Tags: react, jsx, webdev, javascript
Published: 2019-08-27 16:56:45

---
title: What hides under JSX
published: true
description: Simple fast explanation of JSX
tags: react,jsx,webdev,js
---

I finally pushed myself to write next post so, here it is.

So, JSX. A really familiar, simple and handy thing for writing components in React. But markup in JS? Kinda weird no? Well, it’s not markup but valid JS expressions, after transpilation just function calls that evaluates to objects, objects representing React components. Let’s grab a simple component:

{% gist https://gist.github.com/dudakp/55fb32104810c14c2efbdfbd1cbe4e63 %}

Just a simple picture frame for grid gallery. The first thing you will probably notice is className. In HTML it’s just class but here, because naming conflict with JS class keyword it is className. All attributes are in camelCase in JSX.
JSX is only expressions remember? That is one of the reasons why camelCase is used. Let’s move on. 
One really important thing to remember for components is to return only ONE React element. Here  *img* tag is enclosed within *div* tag. 
In bigger components where you need to return multiple tags (components) the React approach is to enclose elements in *React.Fragment* tag or shorter version just empty tag. React will notify you about this if you don't do it. It prevents appending redundant tags in DOM that can sometimes produce invalid HTML. 
But how is JSX just JS expressions? You can write the same JSX just like this:

{% gist https://gist.github.com/dudakp/50cf9cb5cec6b5866644745c41659957 %}

And this is what transpiler does to our JSX. Just transforms it into this so it can be appended to virtual DOM, but that is a whole other topic.
You can see how ugly nested and verbose can components get without JSX.  As in the first snippet when we are setting src in *img* tag prop pic is enclosed in { curly braces }. All JS expressions in JSX must be enclosed in { curly braces } so React can tell what to render and what to evaluate as JS. Probably the last thing is that as in the previous sentence I’ve said “All JS expressions” emphasis on expression. You can’t use if statement, for or while loops in JSX. But, we can substitute if statements with ternary expressions and since glorious ES6 loops with calling map, forEach, etc. on arrays.  Heres an example of map function and usage of our first component:

{% gist https://gist.github.com/dudakp/50e24c0a21c7bc745a5b948cc5149ccc %}

Somewhere where this snippet lives we have an array of objects including links to dog pictures called ‘doggos’. We are calling map function on this array (which as you probably know iterates through the array and applies provided a function on every element and returns new array). The returns part is important since in JSX we are using only expressions that evaluate to something in our case a new array containing React components.
I hope that my explanation vas understandable and maybe can help someone to better understand React. Also, any questions are welcome.
Thank you for getting to the end of this post. You can suggest in the comments what you want next :)
Deploying a WASM file on Fluence network
Tags: blockchain, javascript, webassembly
Published: 2019-08-27 15:38:47

Hey guys!

Today, in order to get the [Gitcoin bounty](https://gitcoin.co/issue/fluencelabs/Bounties/1/3290), I will deploy our very own [Koos backend](https://gitlab.com/koos-project/koos/tree/master/server) to the [Fluence network](fluence.network).

![Fluence logo](https://i.imgur.com/gaShYMo.png) 

Fluence is a decentralised cloud platform based on Ethereum, that incentatize miners to run [webassembly code](http://webassembly.org). Even better, they compiled SQLite and Redis into a SQL and provide a SDK in Rust, C and [Assemblyscript](https://docs.assemblyscript.org/). Given our proficiency in Typescript, we decided to go for the later.

Not gonna lie, the experience have been bumpy for the least. The JSON library needed updates, I suspect some `.trim()` calls just sucked up some chars at the end of my string, and so on. On the other hand, shoutout to the Fluence team as they were really reactive and supportive. What you guys are doing is really innovative, keep it up! <3 <3

So, it turns out they implemented multimodule directly into the [dashboard](dash.fluence.network). All I had to do is to connect Metamask and upload the two WASM file under the dashboard. 

![Fluence dashboard](https://i.imgur.com/xdmxk0J.png)

Then, after a little while, just like that, my app got deployed and I could have access to the `AppId` and the contract address! All I had to do to communicate with the backend is to copy-paste those value in my front-end config and call the fluence-js library as seen below:

```
    return fluence
      .connect(
        config.FLUENCE_CONTRACT_ADDRESS,
        config.FLUENCE_APP_ID,
        config.FLUENCE_ETHEREUM_URL
      )

/// ...

    const request = this.fluence.request({my request})
        
    return request
      .result()
      .then(answer => answer.asString())
      .then(answer => JSON.parse(answer))
      .then(answer => {
      // Do something with the answer

```
How did I get started with Quantum Computing 
Tags: quantumcomputing, tutorial
Published: 2019-08-27 16:40:34

This is what's worked for me in order to get started with Quantum Computing from scratch:

1/ go through several intro tutorials like #ibmq #qsharp also playing HelloQuantum

2/ go through the textbook algorithms and try to break them down using #ibmq which is the best tool for beginners in my opinion

3/ read @OReillyMedia Programming Quantum Computere

4/ Read and reproduce some research papers and projects. After a while I kind of realized Quirk from @CraigGidney was a great tooling upgrade that overcomes the simplicity of #ibmq and has some cool power features for circuit design and debugging

5/ During my learning journey I've also been exploring some other types of #quantumcomputing like Cvqc (@XanaduAI) and annealing (@dwavesys)

6/ I'm so far kind of unimpressed by all the quantum ML that I've been seeing

7/ somehow I also haven't felt the need yet to learn any quantum scripting or programming language like @qiskit, #qsharp or #cirq if you've programmed before you should be able to read through code but haven't felt the need to use them as so far
Is JavaScript a hard language to learn? (and other things)
Tags: discuss, javascript, beginners
Published: 2019-08-27 16:32:50

*In a rush? I've marked the questions with bold to make it faster to read, don't mean to waste your time! :)*

Hi everyone 👋, hope you're having an amazing day. My name is Lucas, I've been learning Javascript recently. I'm quite new to developing, and I was wondering, **is JavaScript said to be a hard language generally, and if not, what would be some languages that are identified as 'hard'**? 

Now that we're on the topic, I'd also be really interested **if any of you have any amazing resources you would suggest for learning JavaScript**. So hard I've found [Egghead.io](https://egghead.io) pretty awesome myself. How condensed the information in each tutorial is and that it is well-edited is great. The speed and quality of each tutorial allows you to grasp relatively hard concepts to learn quickly. 

I'm really curious to see your answer(s)! 👀


**EDIT: thank you all so much for your responses!! I REALLY appreciate it!**
What is your daily routine?
Tags: discuss, career
Published: 2019-08-27 16:19:12

---
title: What is your daily routine?
published: true
description: A thread to share your regular routine, and to discuss other people's flows.
tags: discuss, career
---

What is your daily routine?

Do you dive straight into work, do you plan time for self-study or side projects, how do you relax and re-charge away from work?

Be sure to note whether you work in a traditional office setting, or whether you work remotely.
Checkmark: a beautiful to-do with Materialize
Tags: javascript, css, html, showdev
Published: 2019-08-27 16:14:20

For a long time I’ve wanted to do an impressive web app, and this classic to-do list was the perfect chance!  Technologies used are HTML5, Javascript, and Materialize CSS.  It also uses HTML5 WebStorage to store the to-do’s until you decide to delete them!  Check it out at [https://micahlt.github.io/checkmark/](https://micahlt.github.io/checkmark/).  The checklist also sends a notification about where to find information if it’s the first time the user loads the website.  

**UPDATE**

I’ve edited the project a little bit, adding an about page and a fixed action button.  The preloader position has also been fixed.  And new, smooth animations on page load, plus some other minor UI fixes.  Next up is turning it into a PWA!

This project is also under development (I’m adding Firebase auth to sync to-do’s across devices), so be aware that there may be features that don’t work while I implement this.
Please continue (or comment) the following post...
Tags: agile
Published: 2019-08-27 16:12:03

When the agile development methodology was invented some 20 years ago, it was invented by developers for developers. In the early days, Scrum was formed to manage the development of large systems by breaking them down into smaller parts. Sprints. The breaking down was made by developers, for developers. 
Scrum was a development project management methodology, driven by developers and used by developers. Today, Scrum is managed and driven by managers, not developers. Furthermore, it’s become a marketing strategy. We work agile, is common in modern development consultant firms’ pitch lines. 
Most project management methodologies have succumbed to this, or they will. They’ve been made into a form of management, and as they are assimilated by the managerial layer, they are losing its fundamental force and appeal with developers, and, consequently, their usefulness.
How do *you* pronounce sudo?
Tags: discuss, unix, linux, cli
Published: 2019-08-27 15:59:24

Not necessarily how it's "supposed" to be pronounced, what do _you_ say? (in your head or aloud)

{% poll 5 %}

**Discuss:** Were you ever taught this by anyone? Have you thought about this much?

_P.S. Polls are still private admin features, but we'll make them general soon enough_
Top 5 DEV Comments from the Past Week
Tags: bestofdev
Published: 2019-08-27 13:43:57

---
title: Top 5 DEV Comments from the Past Week
published: true
description: Highlighting some of the best DEV comments from the past week.
tags: bestofdev
cover_image: https://res.cloudinary.com/practicaldev/image/fetch/s--7VrAA2ln--/c_imagga_scale,f_auto,fl_progressive,h_420,q_auto,w_1000/https://thepracticaldev.s3.amazonaws.com/i/qmb5wkoeywj06pd7p8ku.png
---

This is a weekly roundup of awesome DEV comments that you may have missed.  You are welcome and encouraged to boost posts and comments yourself using the **[#bestofdev](/t/bestofdev)** tag.

Answering **[What is a good team lead in your opinion?](https://dev.to/stereobooster/what-is-a-good-team-lead-in-your-opinion-47ji)**, @jankapunkt points out that sometimes a great lad _insulates_ you from work, in addition to helping you accomplish it:
{% devcomment efob %}

@healeycodes replies to **[When is learning what to Google good enough?](https://dev.to/ben/when-is-learning-what-to-google-good-enough-37e7)** to share a story about a regex wizard's journey:
{% devcomment eh26 %}

@mkrl shares a massive accomplishment in **[re: What was your win this week?](https://dev.to/jess/what-was-your-win-this-week-5cii)** — good luck with the big and exciting transition!
{% devcomment een6 %}

Hopping in to the **[How do I compete with Wix, SquareSpace, and WordPress as a freelancer?](https://dev.to/raddevon/how-do-i-compete-with-wix-squarespace-and-wordpress-as-a-freelancer-31c0)** thread, @jamesthomson offers some additional thoughts about opportunities for developers among all these self-serve website builder platforms:
{% devcomment egc7 %}

Finally, in **[How to overcome bad periods at work. Let's share from our experiences](https://dev.to/gabriela/how-to-overcome-bad-periods-at-work-let-s-share-from-our-experiences-45mo)**, @andrewjensen42 shares some sage wisdom from over 20 years in the industry:
{% devcomment eedg %}

See you next week for more great comments ✌
Is apple destroying themselves
Tags: discuss, ios
Published: 2019-08-27 14:42:28

Apple has always made well designed products but they have always been function over form this apple card thing is the opposite. Apple has said that you can not let the card come in contact with leather, denim, or other cards along with jacking their prices up and taking away essential features (like the headphone jack), I think the free market will take apple out of the equation in at least the next 10 years. What do you think?
About Creative Environments
Tags: creativeenvironments
Published: 2019-08-27 14:27:48

"Since 1950, Creative Environments has been building customized outdoor spaces for the homes of Gilbert, Phoenix, Scottsdale, Tempe and the surrounding areas. We provide stunning, award winning pool, spa, and landscape design and construction services. We are proud to be one of the largest and most highly regarded pool and landscape companies serving Arizona with innovative and creative outdoor spaces. Creative Environments has consistently remained a leader in the field winning both local and national awards as well as being named the #1 Landscape Designer in Phoenix by metro area residents.

All of our projects are customized to suit the needs and preferences of each client. We take pride in crafting unique designs that are successfully implemented by our experienced and professional team. We can help you to create the outdoor living space of your dreams by planning, designing, and constructing from the ground up. We specialize in custom pools and spas, outdoor kitchens, ramadas/gazebos, outdoor fire features, and more, much more. Let us help you conceptualize and implement the custom outdoor living space and custom pool and landscape design you have always wanted.
Even though we specialize in unique customized designs, our number one focus is on customer service. We aim to meet and exceed your expectations for your home by offering diligent service with the attention to detail your project deserves. Our experienced team will put over 50 years of experience to work for your home. We look forward to providing you with the beautiful landscape design you have always wanted."
Portfolio Taylor Williams
Tags: beginners
Published: 2019-08-27 14:26:07

My name is Taylor Williams and this is how I created my portfolio. The first thing I did was create a draft of what my page would look like in my Figma. I then started by creating an HTML. After that, I went and put in all of the headers, paragraphs, lists, divs, Footers, and button tags. I also used Id and Class properties in certain areas to label them in CSS to give them style. Speaking of which, in CSS I wanted to use business casual colors. Therefore I used light blue as the background, brown and black for text, and tan for borders. I labeled the header and created a header div for my name and I made it bigger so it can get people's attention. I also made the corners of the div rounded. I also labeled a large div called paper. In that area, I made the text different colors(mostly brown) and I changed the font to Crimson text to give it style. I also gave the paper box a box-shadow to help out standout more. In the CSS I used hight weight and padding to help give it space. The header tags have a bigger font size, they are Tan, and I gave them text shadows. I also created a link to an app project that I made. In HTML and CSS, I also created a button tag for my resume. I created gold borders and made it round. I made a link to the PDF of it and gave it rounded edges and gold borders. I also added an image of myself near the top. I had to download my picture and edit it into a circle form. I then saved the file in my folder as a .png. After that, I implement the picture in my HTML as an "img id" and in CSS and gave it width margin and display.  I also added images of a briefcase to both ends of my header.

Link to my Portfolio: https://twilliams19.github.io/Figma/business.html
Fullstacking: Setting up MongoDB
Tags: mongodb
Published: 2019-08-27 14:21:22

This is part of a [full-stack challenge](https://dev.to/heymarkkop/new-challenge-fullstacking-with-react-native-3l55).
Let's start by trying to make all layers working by themselves: `React Native`, `NodeJS` + `KoaJS` and `MongoDB`.
In this tutorial we'll be setting up `MongoDB` following [these instructions](https://docs.mongodb.com/manual/tutorial/install-mongodb-on-ubuntu/) on Ubuntu 18.04

## MongoDB

Import the MongoDB public GPG Key:
`wget -qO - https://www.mongodb.org/static/pgp/server-4.2.asc | sudo apt-key add -`

Create a list file:
`echo "deb [ arch=amd64 ] https://repo.mongodb.org/apt/ubuntu bionic/mongodb-org/4.2 multiverse" | sudo tee /etc/apt/sources.list.d/mongodb-org-4.2.list`

Reload the local package database
`sudo apt update` 

Install the latest stable version
`sudo apt-get install -y mongodb-org`

Start MongoDB
`sudo service mongod start`

Check log
`cat /var/log/mongodb.log`

Stop and Restart commands
`sudo service mongod stop`
`sudo service mongod restart`

Run [mongo shell](https://docs.mongodb.com/manual/mongo/) to connect to a MongoDB instance on default port 27017:
`mongo` or `mongo --port 27017`


Display the database you are using
`db` *(returns the default database 'test')*

Insert one object in the collection
`db.collection.insertOne({ title: "Stampler" })`

[Query](https://docs.mongodb.com/manual/tutorial/query-documents)/Select it
`db.collection.find({})` or 
`db.collection.find({ title: "Stampler"})`

That's it. The next step is to make so NodeJS can query objects in our MongoDB instance. But before we'll set up `React Native` and `NodeJS` + `KoaJS`.
Feel free to comment below or hit me on twitter [@HeyMarkKop](https://twitter.com/HeyMarkKop)
Are there projects in which you would choose one front-end framework over another?
Tags: discuss
Published: 2019-08-27 14:19:56

The big three front-end JavaScript frameworks are Angular, React, and Vue.

All three of them react to state changes and update content on the screen accordingly. They all handle this in their own way.

Are the differences between these frameworks so stark that you would choose one over the other based on the needs of a project? Could they all work optimally for any project?

Thanks.
otp not working
Tags: otpauthenification
Published: 2019-08-27 14:16:14

Hello, i used topt.now for my automation code. Was working fine for signing in but as soon as i changed to updated chrome driver to 76, the opt part stopped working. The authentication is wrong now. Any feedback. Is there any relationship with chromedriver version for totp

public static String getotp(String secretkey) {
// String secretkey = "6BSLNLLRH7HLJFMM"; // <- this 2FA secret key.

    Totp totp = new Totp(secretkey);
    return totp.now();
Gerando número aleatório
Tags: javascript, node, react
Published: 2019-08-27 13:52:23



![Gerando número aleatório](https://thepracticaldev.s3.amazonaws.com/i/bn5joc0hlsc5ev5ka2aj.jpg)

Com essa função você pode facilmente gerar um numero aleatório inteiro com JavaScript, passando como parâmetros o mínimo (min) e o máximo (max) que irão
definir os limites do números que podem ser gerados.

Vale lembrar que essa é uma função "inclusive" on o mínimo e o máximo podem ser
retornados como valor.

Não deixe de visitar o repositório do github com todas as dicas em [emersonbrogadev/social-media-snippets](https://www.github.com/emersonbrogadev/social-media-snippets).

[➜ Participe da nossa lista de desenvolvedores](https://emersonbroga.com/e/participe/)
[➜ Aprenda ES6](https://amzn.to/2J4XnLg)
[➜ Veja as dicas no Instagram](https://www.instagram.com/emersonbrogadev/)
[➜ Assista nosso canal no YouTube](https://www.youtube.com/c/emersonbroga/)
[➜ Curta nossa página no Facebook](https://www.facebook.com/emersonbrogadev/)
[➜ Não perca as atualizações no Twitter](https://www.twitter.com/emersonbrogadev/)
[➜ Veja os repositórios no Github](https://www.github.com/emersonbrogadev/)

=)