teleren/devto huggingface dataset:
El verdadero valor en una historia de usuario 
Tags: agile, productivity, leadership
Published: 2020-12-30 16:12:05

Uno de los conceptos mas utilizados en la agilidad son las historias de usuario, pero ¿en realidad comprendemos la utilidad de las mismas?... O simplemente las vemos como requerimientos para que el equipo se ponga manos a la obra lo más pronto posible.

Retomando la esencia de las historias de usuario estas nos ayudan a identificar los actores, los requerimientos y lo mas importante el valor que representan, si no te has dado cuenta de esto último es momento que identifiques de una vez y en lo sucesivo la importancia del “para”.

Una historia de usuario se compone de la siguiente manera:

Yo como < persona/usuario real >
Deseo < funcionalidad, hipótesis de solución del problema >
Para < problema que debe resolverse >

Y como en la agilidad estamos en una constante búsqueda de valor para el cliente se vuelve sumamente importante enfocar nuestra atención en la problemática que se desea resolver más que la forma de resolverla ya que de ahí radica lo que debemos entregar al cliente para otorgarle ventaja competitiva y que en ocasiones no le damos la importancia que requiere porque nos enfrascamos en un mundo de requerimientos que si bien se deben tomar en cuenta probablemente no tengan el mismo peso unos de otros y cometemos el error de terminar con historias de usuario que se enfocan en la funcionalidad y no otorgan al equipo el panorama valioso que representa para el producto.

Por esto es necesario tener claro el objetivo de cada requerimiento ya que ahí es sin duda donde debemos enfocarnos para que de esa manera sea representada la importancia de una historia y con ello obtener una singular facilidad a la hora de priorizar historias de usuario en nuestros proyectos.

Una vez que le demos la importancia debida a la parte donde se define él porque es valiosa tu historia de usuario evitaremos que quien se encarga de desarrollar el producto enfoque esfuerzos en funcionalidades vanas que no aportan categóricamente valor al producto y nublan el rumbo del mismo que en ocasiones es complicado retomarlo.

Así que hoy es momento de dedicarle mas tiempo a los “Para” de nuestros requerimientos y armonizar nuestro proyecto con funcionalidad valiosa en el momento indicado.

IG:[@agile.rockstar](https://www.instagram.com/agile.rockstar/)
FB:[@AgileRockstar](https://www.facebook.com/AgileRockstar/)
TW:[@ocazares](https://twitter.com/ocazares)
Object.fromEntries example
Tags: javascript
Published: 2020-12-30 16:02:05

---
title: Object.fromEntries example
published: true
description: Use case for the fromEntries function
tags: javascript
//cover_image: https://direct_url_to_image.jpg
---

Wanted to share a quick code snippet I ran into:

```
function without(object, keys) {
  return Object.fromEntries(
    Object.entries(object).filter(([key]) => !keys.includes(key))
  );
}
```

`Object.fromEntries` ([MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/fromEntries)) as you'd expect creates an object from a list (any iterable not just array) of entries. 

You can think of it like the inverse of `Object.entries`.

In this case we're using the `without` function to reduce an object to only the list of keys/values we want.
CSS Battle #1 – Simply Square

Published: 2020-12-30 15:53:55

 
Hey Everyone, today I solve some problems of <a href="https://codingwithrohit.com/css-battle-1-simply-square/"> CSS Battle </a> In my live stream. So I thought about why I am not posting my solution here.

And here is the <a href="https://codingwithrohit.com/battle-2-visibilitytarget-13-totally-triangle/">Solution…</a>.

In this post we are creating this shape i.e. Simply Square in <a href="https://codingwithrohit.com/css-battle-3-push-button/">Html</a> and Css So let’s start.


Our first approach is very simple and straight forward in which we create a div and set particular values for that div with margin 0 in the body.

<pre>
<div></div>
<style>
  body {
    margin: 0;
    background: #5d3a3a;
  }

  div {
    width: 200px;
    height: 200px;
    background: #b5e0ba;
  }
</style>
</pre>
In our second solution, we used box-shadow, which is used to create a staple effect.


 
<h2>Box Shadow</h2>

The <a href="https://codingwithrohit.com/css-battle-12-wiggly-moustache/"> first</a> two values are X and Y offsets, which can be negative. The third one is a blur radius. And the last before the color is spread radius, which is responsible for scale, which in our case I <a href="https://codingwithrohit.com/battle-2-visibilitytarget-14-web-maker-logo/">arbitrarily </a> set to a big enough value to cover up the whole 400 x 300 screen.


<pre>

<div></div>
<style>
  div {
    margin: -8px;
    width: 50vw;
    height: 66.6vh;
    background: #b5e0ba;
    box-shadow: 0 0 0 200px #5d3a3a;
  }
</style>
</pre>
Is there a way to exclude elements with a particular default styling from a CSS selector?
Tags: help, css, webdev
Published: 2020-12-30 15:51:52

I have a CSS selector, `body * {display:inline-block;}` (example code). But, I'd like to hide elements that are hidden by default, or have the styling to be hidden. Is there anything like `body *:not([style="hidden"])` (which I've tried (and doesn't work)), that will work on all elements that are hidden by default (and/or by stylistic choice)?
2021: Goals for the New Year
Tags: webdev, goals, newyears
Published: 2020-12-30 15:50:48

2020 - a socially-distant year filled with troubles that we'll never forget. Yes, 2020 was a rough year, but also a year that I hope that allowed you to realize what is truly important in your life.

For me, though, 2020 also brought with it many blessings and good memories. I got to travel for work before the shutdown. I got married to my amazing wife. We got news that we are expecting our first child - a baby girl; the first girl in our family since the 1800's. I had time to work on several side-projects with family and friends. And I also took the time to grow as a developer.

We don't know what's in store for 2021, but instead of looking ahead with gloom, let's remember the good things that have happened this past year and focus on what is in our control for 2021.

## Goals? Why?
Another New Year's Resolution list? I know, I know. Maybe reading these types of articles are boring for some, but unlike most of my articles which I trust are helpful to others, **I'm writing this one for me.** I want to look back in a year and see how I was thinking at the end of 2020 and what things I managed to accomplish during 2021.

I've categorized my goals into two sections: personal goals and career/social goals.

Personal goals are goals which I want to do for myself; things that I find value in that I believe will help me, my family & my friends.

Career/social goals are goals directed towards my development profession and social networks.

## Personal Goals

* Run my first 5k.
* Run 3 miles three times a week at a minimum.
* Move away from sodas and sweet drinks.
* Buy our first house and move closer to family.
* Continue to record a podcast.
* Learn Blender.

## Career/Social Goals

* Grow Twitter followers to 10,000.
* Release a web development video tutorial series.
* Release a premium product that gets high visibility on Product Hunt.
* Write a minimum of 30 articles on Hashnode.
* Achieve 30,000 article views (7k currently).
* Create a brand and cross-promote my products/blog/socials and create a central pool of subscribers (don't know what this looks like yet).
* Learn Blazor.
* Learn Vue 3.
* Learn Kubernetes.
* Learn three.js.
* Strengthen my Docker skills.
* Deepen my experience with GSAP.
* Continue to enhance my CSS skills.
* Continue to learn SwiftUI and publish an app to the App Store.

## Conclusion
These are my goals. No matter what 2021 is like, I should be able to make progress on all of these items. I'm listing these goals here, but will be migrating them to a Notion kanban board to get a visual view of the state of each of these goals.

What do you hope 2021 will look like for you? Feel free to share your goals in the comments below!

Thanks for reading! If you liked this article and want more content like this, read some of my [other articles](https://blog.braydoncoyer.dev/) , subscribe to my newsletter and make sure to follow me on [Twitter](https://twitter.com/BraydonCoyer)!
🛡Auth0 Partners With Sumo Logic for Continuous Intelligence
Tags: identity, auth0, security
Published: 2020-12-30 15:41:42

🧩 Combining the power of Auth0 and Sumo Logic’s security framework for ultimate identity insights.
[Read more](https://auth0.com/blog/auth0-partners-with-sumo-logic-for-continuous-intelligence/?utm_source=content_synd&utm_medium=sc&utm_campaign=sumo_logic)
How to Work with Arbitrary JSON in Go?
Tags: go, json
Published: 2020-12-30 15:24:22

## Abstract

Mostly, when you are working with data you know the schema in which you will receive that data, but there come times when you don't know exactly what will be the structure you will end up receiving. We talk about how you can handle JSON data which are arbitrary in Go.

## JSON with a Fixed Structure

When you receive JSON for which you already know the structure, it is pretty easy to work with. You create a `struct` and unmarshal the bytes to that struct and the JSON package will take care of the rest. Suppose you receive information about today's dinner in JSON and everyday dinner has the following structure.

```go
type Dinner struct {
    MainCourse   string  `json:"main_course"`
    Beverage     string  `json:"beverage"`
    HasDessert   bool    `json:"has_dessert"`
}
```

And you receive the following JSON value:

```go
food := []byte(`
{
  "main_course": "Biryani",
  "beverage": "Coca Cola",
  "has_dessert": true
}
`)
```

You just need to create a variable which can hold the value from JSON.

```go
var dinner Dinner
```

Eventually, decode the values to the `dinner` variable like this:

```go
json.Unmarshal(food, &dinner)
```

Now, you can access those values through the fields on the struct. Lucky you, you have dessert for today 😋.

```go
dinner.MainCourse   // Biryani
dinner.HasDessert   // true
```

## JSON That You Are Not Aware

Let's diverge our mind from food to shopping list :). Now assume every weekend you go to purchase some grocery and the items in the list keep changing each week. If you have to represent that into a struct, you got no luck!

Like almost everything in Go where so much randomness is evolved, you have to use interfaces. More particularly an empty interface. You can represent your shopping list like this:

```go
var shoppingList interface{}
```

Because an empty interface can satisfy any type you can use that to do Unmarshaling.

```go
listJSON := []byte(`
{
  "food": {
    "ketchup": "1pc",
    "noodles": "1pc",
    "rice": "2Kg"
  },
  "utensils": {
    "knives": 2,
    "forks": 3
  }
}
`)

json.Unmarshal(listJSON, &shoppingList)
```

At this point `shoppingList` looks like this:

```go
shoppingList = map[string]interface{
    "food": map[string]interface{
        "ketchup": "1pc",
        "noodles": "1pc",
        "rice": "2Kg"
    },
    "utensils": map[string]interface{
        "knives": 2,
        "forks": 3
    }
}
```

To access the data, you can make a type assertion to `map[string]interface{}`.

```go
list := shoppingList.(map[string]interface{})
```

After that, you can access the values like a regular map. But for the values that are nested, you **need to do a type assertion again**.

```go
utensils := list["utensils"].(map[string]interface{})

utensils["forks"] // 3
```

## Conclusion

You can handle arbitrary JSON with the help of interfaces. You just need to pass an empty interface to the Unmarshal function and the JSON data. After a type assertion, you are good to use the arbitrary fields and their values.
My Dev. Portfolio
Tags: webdev, javascript, dohackathon, css
Published: 2020-12-30 15:24:14


A Professional Software Development Portfolio. This is my website with all my projects.

#### Web Link
https://ignacioprados.github.io/web/

#### Preview
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/7eqf8xdorvpdk5orwj22.JPG)

#### Key Technologies Used 
HTML5 - CSS3 - JavaScript

#### Open Source Code
https://github.com/IgnacioPrados/web

#### Give me your feedback!
E-Waste Collector Platform
Tags: showdev, dohackathon
Published: 2020-12-30 15:22:29

## How it works

<b>Step 1</b>: Existing Collectors can log into the system using their emails and passwords and the new customers can quickly sign up using their email address.

<b>Step 2</b>: In the dashboard, you can see the pending request that has been placed by clients. Click on "Reserve" to reserve a job.

<b>Step 3</b>: Then you have can see the customers details.

<b>Step 4</b>: Once you arrive at the customers house, collect the item, weigh it and add the weight to the system. And then click on "Mark As Completed" 


## Screenshots

<img src="https://dev-to-uploads.s3.amazonaws.com/i/rnm0j8eg5nqgli3phqsw.png">
<img src="https://dev-to-uploads.s3.amazonaws.com/i/rpozwh8f0am019z2y4xt.png">

If you have any concerns or suggestions for improvements, please let us know!
Create Your Dev Portfolio with this Gatsby Template
Tags: gatsby, react
Published: 2020-12-30 15:19:50

## create-markdown-blog

I recently created a tool called, "create-markdown-blog", that allows you to generate a markdown blog with Gatsby, Next, Nuxt, Sapper, Scully, and Gridsome. I encouraged using it as a starting place for a developer portfolio because a markdown blog offers many benefits to a developer.

- Practice writing markdown
- Posts also count as GitHub commits for GitHub heatmap
- Better SEO and Speed from Static Site Generation

Although a developer portfolio could also use a page to display development projects so I have made a new template that has a little more built-in with the developer in mind.

- some initial styling to get you started (still bare-bones, so it's easy to work in your style without having to fight pre-existing styling)

- gatsby offline plugin so the site works offline and qualifies as PWA

- JSON file for listing information about your projects with a page that renders data from JSON file

## How to use it

1. Create a copy of the template

```bash
npx create-markdown-blog gatsbyportfolio portfolio
```

2. Head over to the src/json/portfolio.json and enter the data of your projects

3. Head over to src/mark and edit the existing blog post, copy and paste this file to make new blog posts

4. Edit src/pages/index.js to edit the main page

5. src/layout/Layout.js is where the header and footer and the overall template is designed

6. You can style the page using styled-components out of src/styles or with CSS using src/styles.css

7. deploy to Netlify and set the build command to "gatsby build" and the publish directory as "public"

8. You now have a portfolio website ready to go!
First Post!
Published: 2020-12-30 15:15:54

Just a quick one: I renewed my name domain, michaelrobards.com. I also bought mikerodev.com. Both from namecheap.com. mikerodev looks and sounds a bit wonky, but I like it, and will use it. Haven't decided which domain will host what. Possibly blog on dev and portfolio on name. Maybe both on both! Now get those pages up!
Completed the app. About to deploy.
Tags: dohackathon
Published: 2020-12-30 15:07:48

I completed the coding of my Blogfinder app! The past few days I worked on -

1. Profile and home pages
2. User follow and like features
3. Managing of posts
4. Testing

Some issues I faced were -

- __Post publish dates__ - I used moment to get a relative date from a timestamp (number of seconds). The peculiar thing that I noticed when working with Docker containers was that, by default, the timezone was UTC. This was causing the Python `datetime` module's `timestamp` function to give a wrong value for naive datetimes. I first thought it was a bug in Python. StackOverflow pointed out that docker was the problem and I had to add the following to the docker-compose file:
```
volumes:
  - /etc/localtime:/etc/localtime
```
This worked but then I decided on another approach. That was to use aware-datetimes with the following code:
```
post.published = post.published.astimezone(timezone.utc)
```
- __N+1 problem__ - I have a Post, a UserProfile and a User table. When there are many posts to get, the number of database queries to get the username from the User table and the fullname from the UserProfile table will be high. I chose to defer the queries to when there will be a few posts to serve (after pagination).

For testing, I created a number of dummy users with real personal blogs. I plan on creating similar dummy data on the deployed demo app as well. I hope the blog owners won't mind!

Tomorrow I will perform another round of testing and then deploy the app. After that, I will make the final submission post.
1. Certification
Tags: aws
Published: 2020-12-30 14:59:16

#[AWS Certified](https://www.aws.training/SignIn?returnUrl=%2FCertification)

 I recently completed `AWS` certified solutions architect & developer - Associate level [certifications](https://www.youracclaim.com/users/jayanjan-mukherjee.25943bff/badges). I am not going to share my study guide, plan etc. This article is part of a series for my [bio](https://bit.ly/komlalebu).

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

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/0vobgcej8t0ytnl5d9l4.gif)
Element UI in Svelte
Tags: svelte, react, vue, typescript
Published: 2020-12-30 14:53:19

You may want to develop svelte app in another way: use [svelte-draft](https://mistlog.github.io/svelte-draft-docs/). This site with live editing is implemented in [svelte-draft](https://github.com/mistlog/svelte-draft) itself and [svelte-element](https://mistlog.github.io/svelte-element/).

svelte-element provides vanilla svelte component, so that you can use in both svelte and svelte-draft.

I'm not good at UI engineering, however, take this [button](https://github.com/mistlog/svelte-element/blob/master/src/component/button/Button.tsx) implementation as an example:

![carbon](https://dev-to-uploads.s3.amazonaws.com/i/lbpb8gbtido06ksa1tkr.png)
 
The skeleton is clear: receive props ->  config state -> provide UI.

![carbon (1)](https://dev-to-uploads.s3.amazonaws.com/i/sdrh2pjo9tuvyuvgfqx0.png)

As for state:
![carbon (2)](https://dev-to-uploads.s3.amazonaws.com/i/jd4sci81fm9plcop6ldp.png)

I do believe that code will be maintainable in this way.
24 days of #javaScriptmas by Ngozi Ekekwe
Tags: javascript, scrimba, algorithms
Published: 2020-12-30 14:47:20

---
title: 24 days of #javaScriptmas by Ngozi Ekekwe
published: true
description: 
tags: javaScript, scrimba, algorithms
//cover_image: https://direct_url_to_image.jpg,,,,,,
---
I recently participated in the 24 days of the #javaScriptmas challenge on Scrimba, for me, it was something I looked forward to every day in my mail.

Looking forward to solving more challenges in the new year, you can find my solutions below :D


Day 1: [Candies](#https://scrimba.com/scrim/co8524c5c9f578ee659dfbfb6)

Day 2: [Deposit Profit]
(#https://scrimba.com/scrim/coa014a0d9702da8a86b37f53)

Day 3: [chunky monkey]
(#https://scrimba.com/scrim/co9464b928ba3e66964a16a15) 

Day 4: [century From Year]
(#https://scrimba.com/scrim/coa9b4a83938a5a7298c20685)

Day 5: [Reverse a string]
(#https://scrimba.com/scrim/co9104b76a9adf1c8aa11c42a)

Day 6: [sort By Length]
(#https://scrimba.com/scrim/co0584a91a4e144cf1319c2a4)

Day 7: [countVowelConsonant]
(#https://scrimba.com/scrim/cod314fb79fe2e645a7fb27a1)

Day 8: [Rolling dice]
(#https://scrimba.com/scrim/cof394325a5a9cee958adc4d7)

Day 9: [Fibonacci sum]
(#https://scrimba.com/scrim/co74f45f79b16a04ccf480672)

Day 10: [Adjacent Elements Product]
(#https://scrimba.com/scrim/coffe4743bcb0beb80b95408b)

Day 11: [Avoid Obstacles]
(#https://scrimba.com/scrim/co71c420f8301f4f3e0a30904)

Day 12: [Valid Time]
(#https://scrimba.com/scrim/cob4f4c49a81335e411dbd2eb)

Day 13: [Extract Each Kth]
(#https://scrimba.com/scrim/co26b4b8688ba4af699c48f4a)

Day 14: [Array Maximal Adjacent Difference]
(#https://scrimba.com/scrim/co60947adac83e0d7b6323304)

Day 15: [Carousel]
(#https://scrimba.com/scrim/co639427d9c67c09be3eb5ffe)

Day 16: [insert Dashes]
(#https://scrimba.com/scrim/co772439abee10259cc74476c)

Day 17: [Different Symbols Naive]
(#https://scrimba.com/scrim/co74c4764b3e94d4e460bbae8)

Day 18: [Array Previous Less]
(#https://scrimba.com/scrim/co58a4bfe85d9b41858c51e68)

Day 19: [alphabet Subsequence]
(#https://scrimba.com/scrim/co0204a449aeb9b65e6b01736)

Day 20: [domain type]
(#https://scrimba.com/scrim/coa7b41b9bb240c84c2c42a92)

Day 21: [sum of two]
(#https://scrimba.com/scrim/co41040dbaa3d359b7ebb0d7c)

Day 22: [Extract Matrix Column]
(#https://scrimba.com/scrim/co59d42e0bce8ba776ee71566)

Day 23: [Social input]
(#https://scrimba.com/scrim/co1a44bcfb78fc9cc43435aa8)

Day 24: [Test your Agility]
(#https://scrimba.com/scrim/cof8c491fab924adbe393ae1d)
Victory Victory🎉🎉🎉✨✨
Tags: hacktoberfest
Published: 2020-12-30 14:27:14

Just received Hacktober Fest Tee 2020 and all the including stuff too...Yayyyyyy... So happy now thanks to hacktober fest. ![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/y6fou20tvb7qoiclxcl6.jpg)
PHP Changes Cheatsheet
Tags: php
Published: 2020-12-30 14:19:14

---
title: PHP Changes Cheatsheet
published: true
description: PHP Changes Cheatsheet
tags: php
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/qdrrxvb6oar78rq4cu77.png
---

I have created this small project to allow to see all versions changes together and avoid to search into multiple doc pages.

https://eusonlito.github.io/php-changes-cheatsheet/

You can collaborate on design or functionality working on this issues: https://github.com/eusonlito/php-changes-cheatsheet/issues

Regards!
Learned how to change the background color of a React function component randomly
Tags: showdev, react, tutorial, todayilearned
Published: 2020-12-30 14:18:22

Currently, I'm working on a web app using React JS and it has a lot of functional components that I render selectively when required. I have defined styles for almost every component in my `App.css` file. But, I wanted one of my components to change its background color randomly every time it loads. I wasn't sure of the JS syntax and when I looked upon the internet I didn't get the exact syntax I was looking for. 

After some trial and error, I finally cracked a syntax and it worked! So, I thought of sharing with the community here.<span> &#128513;</span> 

```jsx
import React from "react";

function MyComponent({ name }) {
  // I found this formula
  // here: https://css-tricks.com/snippets/javascript/random-hex-color/
  let randomColor = Math.floor(Math.random() * 16777215).toString(16);

  // The trouble I had was about how to use
  // the variable randomColor in "style:{}" tag
  return (
    <div className="parent-container">
      <div
        className="child-container"
        style={{ backgroundColor: "#" + `${randomColor}` }}
      >
        <h4 className="name">{name}</h4>
      </div>
    </div>
  );
}

export default MyComponent;
```

I'm not sure if this the only way of doing it. But if there are any other ways too, pls share them in the comments. I would be happy to learn!

Thanks for reading!<span>&nbsp;</span><span> &#9996;</span>