teleren/devto huggingface dataset:
Story: The Worst Day Of 6 Years At Work
Tags: management, career, webdev, codequality
Published: 2020-10-27 19:05:32

This story is an inspiration for [why conversations are difficult with programmers](https://dev.to/kevin074/why-conversations-are-difficult-with-programmers-2675).

This was back when my current lead just raised to management when the former left. I was a clear candidate, but he's a better people person. I understood that so didn't hold a grudge against him.

As a new lead, he had a lot of issues. Mostly with having to deal with higher ups and setting standards. There were small instances of us having conflict, but was never bad. 

He was a node team member. So naturally after becoming the UI team lead, he wanted to take a look at the frontend. Luckily there was a feature pretty easy to do, especially since it's basically a copy of an existing feature. So I thought it would be a great opportunity for him to do, and so did he. 

Weeks went by and I never heard a thing about the feature after we assigned it to him. I poked my head in a couple of times asking if something was not clear to him. He never requested any help. This was already a red flag for me since he never coded in the framework we used, knockoutJS, and this app can be pretty dang confusing. 

Finally at the near end of the sprint, he pushed the changes. It was a copy paste job and did not follow any existing pattern or procedure. The code did work, but it was as sloppy as possible and looking exactly like what a junior developer would do.

It took me probably 2 hours thinking about what to do with this. There was also a design problem that he clearly ignored. Despite endless anxiety, I decided that we really needed to talk about this. Otherwise this might become the new standard. 

We first talked about the design thing; it seemed to be the simpler of the two. I can't recall much of the detail since it's been years, but he didn't want to change anything about it. He was stubborn even when the designer chimed in and sided with me. It was super strange, but I had no choice to leave it as it. 

At this point I should have not even bothered with the feature he coded. Stupid me did though. It was not soon before he brings out the I-am-the-lead card and shut me down. Told me that I shouldn't "come at me(him)" like this. Needless to say, a lot of hard pills to swallow.

This was the end. No happy ending or a turn for the better. We never talked anything about these two features and just left them behind. The crappy code is still there and this is hopefully the only time ever I will have to go through something this difficult. However it did serve to be a continual point of speculation on how it should have went and bettered my mindset about these conversations.
Object Destructuring
Tags: javascript, react, beginners
Published: 2020-10-27 18:50:57

_Object destructuring_ allows us to 'pull out' specific named 🔑s or properties from an _object literal_ and _bind values_ to _variables._

This can save us some typing because we don't need to use `.` to access these values. 

{% replit @CodeFinity/Object-Destructuring %}

## Destructuring and Renaming

As we _destructure,_ we can choose to _bind_ to a _variable_ with a different name.

*The destructuring _must_ match the name of the 🔑 in the original _object_.* It's the part _after_ the `:` that will be new 'custom' _variable_ name. 

{% replit @CodeFinity/Object-Destructuring-1 %}

## Nested Destructuring

The destructuring process can continue as we drill down into nested objects.

{% replit @CodeFinity/Object-Destructuring-and-Rename-1 %}

You can also _rename_ with _nested destructuring._

## Destructured Function Parameters

Given some _function_ that is expecting to receive an _object,_ we an apply _destructuring_ to avoid using `.`s.

{% replit @CodeFinity/Object-Destructuring-and-Rename-1 %}

## ⚠️ 'References' vs 'Copies/Values'

This doesn't pertain directly to _destructuring,_ but be aware of JS's unique behavior when it comes to _mutations._

{% replit @CodeFinity/Format-Address-Fxn-1 %}

In the above code 👆🏽, we _destructured_ and _renamed_ `address`. _However,_ `me` was still _mutated;_ both of the _objects_ have the 'zip plus 4.'

*With _destructuring,_ the same rules regarding JS Objects sharing memory references still applies.*

With _primitives,_ we don't need to worry.

{% replit @CodeFinity/Mutations-1 %}

The _string_ for `name` was _destructured._ Because of how JS manages _primitives,_ a new 'copy' of this value was created (no shared _references_ for _primitives_), and original _value_ in `me` was unchanged.
Hacktober Fest 2020
Tags: hacktoberfest
Published: 2020-10-27 18:47:55

So finally I have completed my contributions for Hacktober fest. I learned a lot. I have contributed to the flutter and Javascript Project. Now looking for awesome swag!!

Github Link: https://github.com/wajeehamushtaq

 #hacktoberfest #hacktoberfest2020
Vue over React just for the syntaxis? :(
Tags: react, vue
Published: 2020-10-27 18:39:37

Hi there. I really like these two workhorse of all frontend developers. Personally, i prefer react. I have a friend that told me he select vue all times because vue allow to "separate" your html, css and js code in a more clean way that react does... i think Yeah, maybe... but that can't be the reason to discard react and all his power... We must fell confortables with ours frameworks and coding should be pleasent, but i think that the beauty isn't only what you may see while reading code but also the hardwork performed by the library or framework and the ways you can customize it's behavior. What do you think?
PD: Excuse me if i make a mistake when writting the post. I am learning English :)
The 7 Most Popular DEV Posts from the Past Week
Tags: top7
Published: 2020-10-27 17:58:59

---
title: The 7 Most Popular DEV Posts from the Past Week
published: true
description: A round-up of the most-read and most-loved contributions from the community this past week.
tags: icymi
cover_image: https://thepracticaldev.s3.amazonaws.com/i/sfwcvweirpf2qka2lg2b.png
---
Every Tuesday, we round up the previous week's top posts based on traffic, engagement, and a hint of editorial curation. The typical week starts on Monday and ends on Sunday, but don't worry, we take into account posts that are published later in the week. ❤️

### Securing the front-end

In this post, @mizadmehr ponders some interesting security-related frontend issues. Sign me up!

{% link https://dev.to/mizadmehr/missed-frontend-vulnerabilities-1-css-is-not-as-safe-as-you-think-3l64 %} 

### A gentle reminder to live your life

This headline makes @maulik’s post sound tough, but it’s all love. They remind us to revisit where our priorities lie and always prioritize our health (in all senses) over work. 

{% link https://dev.to/maulik/hey-developer-go-get-a-life-3p1h %} 

### Three tips to get up-to-speed with a new concept

@ceeoreo opens up the vault to share how they learned JAMStack quickly for a conference panel, but this post is about so much more than learning about one specific architecture -- it’s about how you can tackle a big concept in a streamlined, organized, and repeatable way for sustainable learning. 

{% link https://dev.to/ceeoreo/how-i-learned-jamstack-21ee %}

### Decrypting Cryptography

A simple, awesome glossary of the fundamental cryptography terms and concepts by @aakatev.

{% link https://dev.to/aakatev/cyptography-for-beginners-1el7 %}

### Connection in the Time of COVID

@lazerwalker used to hate virtual conferences. But after organizing a game-design conference this year (and building an event platform and social space to support it,) they learned to love virtual events -- done *right*. 

{% link https://dev.to/lazerwalker/using-game-design-to-make-virtual-events-more-social-24o %}

### Stress, begone!

In most cases, writes @nickbulljs, stress is part and parcel of being a human. But that doesn’t mean we need to let it destroy us! Thanks for sharing the techniques that help you restore peace and balance, Nick!

{% link https://dev.to/nickbulljs/5-techniques-i-use-to-manage-stress-as-a-software-engineer-2o2n %}

### Pattern-spotting with Regex

I love a visual guide! In this one, @amitness illustrates the various concepts underlying regex with the goal of helping you “build a good mental model of how a regex pattern works”.



{% link https://dev.to/amitness/a-visual-guide-to-regular-expression-i3 %}

_That's it for our weekly wrap up! Keep an eye on dev.to this week for daily content and discussions...and if you miss anything, we'll be sure to recap it next Monday!_
React Type Checking
Tags: react, javascript, webdev
Published: 2020-10-27 18:21:12

*No Type checking* -> Perk of using a dynamic language like Javascript.

But as your app grows, you start facing issues/bugs due to mishandling of type in props passed.
> If you have nested prop passing boom 💥 .

Thankfully, React comes with built-in type checking abilities.

React uses `prop-types` library to implement type-checking.
[Link](https://www.npmjs.com/package/prop-types)

## Usage 

**App.js**
```
import React from "react"
import Cart from "./Cart"

function App() {
    return (
        <div>
            <Card price={400} title="Watch"}/>
            <Card price={600} title="Perfume"/>
            <Card price={1000} title="Mouse"/>
        </div>
    )
}

export default App
```

Here is a basic shopping cart example where each card represents single item with a `title` and a `price`.



**Cart.js**
```
import React from "react"
import PropTypes from "prop-types"

const Cart = (props) => {
  const { title, price } = props;
  return (
    <>
      <Card>
        <h2>{title}</h2>
        <h3>{price}</h3>
      </Card>
    </>
  );
};

Cart.propTypes = {
    title: PropTypes.string.isRequired,
    price: PropTypes.number
}

export default Cart

```

**PropTypes** supports various validation and other handy code chunks.

Let's say we wanted our price to be one of `200,600,400`

```
Cart.propTypes = {
    price: PropTypes.oneOf([200,300,400])
}
```

Find other various use cases for `PropTypes` [Link](https://reactjs.org/docs/typechecking-with-proptypes.html#proptypes)


Note:
* Usage may vary as per your need but these are handy react-y way of type checks.😁
String - trim()
Tags: javascript, webdev, codenewbie, beginners
Published: 2020-10-27 18:19:56

```js
const str = '  String with some whitespace      ';
console.log(str.length); // 35

const trimmedStr = str.trim();
console.log(trimmedStr.length); // 27
```

---

**Thanks for reading 💙**  
Follow **@codedrops.tech** for daily posts.  
[Instagram](https://www.instagram.com/codedrops.tech/) ● [Twitter](https://twitter.com/codedrops_tech) ● [Facebook](https://www.facebook.com/codedrops.tech/)

Micro-Learning ● Web Development ● Javascript ● MERN stack ● Javascript  
**[codedrops.tech](https://www.codedrops.tech/)**
MacOS vs Linux — the cp command will trip you up!
Tags: linux, bash, devops, docker
Published: 2020-10-27 17:56:08

While building www.firecode.io, I was recently confronted with more than a hundred failing unit tests when running the test suite locally on my MacOS machine, rather than in a Linux Docker container the platform is configured to run tests in.

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

I use a MacBook Pro for software development, primarily because the BSD based MacOS provides a development experience that’s very similar to other Linux distros. All of my most frequently used navigation commands — `cd`, `cp`, `mv`, `mkdir`, `touch`, etc...work with 1:1 parity across both flavors of operating systems, or at least that’s what I thought. As I discovered after spending a good hour debugging these failures, there’s a subtle difference between the BSD and GNU implementations of the `cp -R` command, which I got hit with when running my tests on different environments.

Here’s the difference, illustrated with an example run in both MacOS and Linux:

```
# Creates "source_directory" in the current working directory
$ mkdir source_directory

# Creates 2 new empty files within "source_directory"
$ touch source_directory/{file1,file2}

# Creates "destination_directory" in the current working directory
$ mkdir destination_directory

# Intended to copy the contents of "source_directory" to "destination_directory", hence the trailing slashes
$ cp -R source_directory/ destination_directory/

# Lists the contents of "destination_directory"
$ ls destination_directory
```

So what would you expect to be printed with `ls`? Turns out the Linux GNU implementation of `cp` copies the `source_directory` directory to `destination_directory`, whereas on BSD MacOS the contents are unpacked and copied, as I’d expected it to behave on both environments:

### GNU (Linux):
```
$ ls destination_directory
source_directory
```

### BSD (MacOS):
```
$ ls destination_directory
file1 file2
```

The trailing slash is significant in BSD, whereas the GNU implementation treats both `source_directory/` and `source_directory` the same. The workaround, thankfully, is really simple — append a period when you intend for the contents to be copied and you’ll see the same behavior on both BSD and GNU : `cp -R source_directory/. destination_directory/.`

I hope this tidbit helps you write better cross environment code on MacOS and helps you save some time debugging unexpected results.
Smashing Walls of Text
Tags: ansible, bash, filters, log
Published: 2020-11-19 22:37:38

---
title: Smashing Walls of Text
published: true
date: 2020-10-27 17:49:00 UTC
tags: Ansible,bash,filters,log
canonical_url: https://thjones2.blogspot.com/2020/10/smashing-walls-of-text.html
---

On a few projects I work on, we make use of Ansible to automate system-configuration tasks. For better or worse, the automation relies on some upstream content that is outside the control of the customer. Translation: every few months, automation that has worked _for months_ will suddenly no longer work.

By itself, this is more an inconvenience than a real problem. However, because the automation is handed off to other, more-junior people to execute, when errors are encountered, those others are frequently at a loss as to what to do.

Frequently, they don't bother to include logs of any sort ...or if they do, they include log snippets (or, worse: _screen-caps_ of text-based log snippets!), the snippets frequently don't contain the information critical to solve the problem. So, first response in the support request is a "send me all the logs" type of reply.

Now, depending on the size of the Ansible job, the associate log-file might be _HUGE_. Generally, I'm only interested in where Ansible has failed. Parsing through an entire Ansible log-file can be like trying to find a specific brick in the Great Wall of China. So, to help preserve my sanity, I cooked up a quick BASH script to both help "cut to the chase" and provide more-easily readable log-output. That script looks like:

> ```
> #!/bin/bash
> #
> # Script to filter the output of Ansible log files to something more-readable
> #
> ###########################################################################
> OUTFILE="${1:-/tmp/Ansible.log}"
> 
> mapfile -t ERROUT < grep ^failed: "${OUTFILE}"
> )
> 
> # Make sure we got a mount-string
> if [[${#ERROUT[@]} -lt 1 ]]
> then
> echo "No failure-messages found in ${OUTFILE}"
> fi
> 
> # Iterate over error-string
> ITER=0
> while [[${ITER} -lt ${#ERROUT[@]} ]]
> do
> printf '##########\n## %s\n##########\n' "$(
> echo "${ERROUT[${ITER}]}" | sed 's/^failed:.* => //' | 
> python3 -c "import sys, json; print(json.load(sys.stdin)['item'])"
> )"
>    
> echo "${ERROUT[${ITER}]}" | sed 's/^failed:.* => //' | \
> python3 -c "import sys, json; print(json.load(sys.stdin)['stderr'])" | sed 's/^/ /'
>      
> printf '####################\n\n\n'
> ITER=$(( ITER + 1 ))
> done
> 
> ```
My Online Portfolio
Tags: html, css, javascript, codenewbie
Published: 2020-10-27 17:40:25

Guess what?!

I have been working on my online portfolio for the last couple of weeks and I am so excited to say that it’s ready for you to see! 

Take a look [lynne.codes](lynne.codes)

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

I have learned so much HTML, CSS, and JavaScript during this process and can’t believe that it was almost three months ago that I left my job as a Pharmacy Program Director to become a Web Developer. 

There were times that I thought it was hard and thought that I would never understand these crazy coding languages. But I don’t regret my decision to take this path. The more I build, the more I understand. 

I am so ready to get out there and start my new career and use my new knowledge to create amazing designs and websites. If there is anyone hiring in the Las Vegas area or remotely, I'd love the opportunity to show you what I can do!

Never give up! Today’s just another step towards the future you want.

Until next time,
<3 Lynne
Hide an element when there is no enough space - Thanos snap technique
Tags: css, containermediaquery, calc, timeline
Published: 2020-10-27 17:37:18

How do we hide an element when there is no enough space? This little enhanced fab-4 technique explained through a timeline component design. Please read the below post:
https://raghavansk.medium.com/hiding-an-element-when-there-is-no-enough-space-thanos-snap-technique-8a11e31267c0
Git: push to a new remote branch
Tags: git
Published: 2020-10-27 17:19:13

It is important to specify `<remote> <branch>` in every pull and push in the scenario. If not specified, would be default master.

- branch
```
# list all branches, including local and remote
git branch -a

# create new local branch
git branch <new_branch_name>

# switch to another branch
git checkout <another_branch>

# switch no to new local branch (combine the steps above)
git checkout -b <new_branch_name>

# delete a branch, use -D for force delete
# need to checkout to another branch before delete
git branch -d <branch>
```
- clone
```
# clone a repository in specific remote branch
git clone --branch <branch_name> <remote_repo_url>
git clone -b <branch_name> <remote_repo_url>

# clone a specific remote branch 
# and does not track other remote branch
git clone -b <branch_name> --single-branch <remote_repo_url>
```
- pull (fetch+merge)
```
git pull origin <branch>
```

- push
```
# push to a new remote branch not yet created
git push --set-upstream <remote> <branch_name>
git push -u <remote> <branch_name>

# push to remote branch
git push <remote> <branch_name>

# delete a remote branch
git push <remote> --delete <remote_branch_name>
```
Usually `<remote>` would be `origin` unless working with another repository (eg. deploying app to heroku)
`origin` stands for the remote repository that a project was originally cloned from.

---
- overwrite local repository
```
git fetch --all
git reset --hard origin/master
```
replace master with whatever branch originally wanted
Optimistic locking of ActiveRecord models
Tags: rails
Published: 2020-10-27 16:49:48

Did you know that Rails can help avoid data overwrite when multiple users are editing the same record?

Yes, you can use optimistic locking on models, and it turns out it's pretty easy to enable it too.

To be honest, I've never heard about this functionality until recently while browsing the [Active Record Basics Guide](http://guides.rubyonrails.org/active_record_basics.html) looking for info on a totally different problem that I had.

When I read about the `lock_version` field, I was curious and surprised by what I found.

It basically works like this:

If you add the `lock_version` field to any ActiveRecord model, every time that record is saved it will be checked for modifications after the record was loaded. 

So, if for some reason the record changed in the database while you were editing it, when you try to save it an `ActiveRecord::StaleObjectError` exception will be raised.

Example:

```ruby
require 'active_record'

ActiveRecord::Base.establish_connection(adapter: 'sqlite3', database: ':memory:')
ActiveRecord::Base.logger = Logger.new(STDOUT)

ActiveRecord::Schema.define do
  create_table :orders do |t|
    t.integer :total
    t.string :lock_version
  end
end

class Order < ActiveRecord::Base ; end

Order.create

object_1 = Order.find(1)
object_2 = Order.find(1)

object_1.total = 100
object_1.save # Succeeds!

object_2.total = 200
object_2.save # Raises ActiveRecord::StaleObjectError
```

You can see from the example that both `object_1` and `object_2` were loaded at the same time.

When you modify and change the first object, it will be saved without any problem and the `save` method will return true as expected, but when you try and save the second one (`object_2`), the `ActiveRecord::StaleObjectError` will be raised because the object has been modified already.

You can read more about this feature directly on its API documentation.
It is worth mentioning that there is a more aggressive way to lock records by using `Pessimistic Locking`.
Tracing logs in microservices using Spring Boot
Tags: springboot, microservices
Published: 2020-10-27 17:15:49


One of the challenges in debugging issues in microservices is tracing the logs for each request as they are spread across multiple microservices.
This can be easily resolved by using MDC (Mapped Diagnostic Context) provided by most of the logging frameworks.

Here is how to do it in Spring Boot:

https://fullstackdeveloper.guru/2020/10/27/how-to-trace-logs-across-distributed-applications-microservices-in-spring-boot/
The Westworld's/BlackMirror's Gadgets and how they can be made? 🧐🤷🏻‍♂️
Tags: discuss, watercooler
Published: 2020-10-27 17:08:22


 ---
title: The Westworld's/BlackMirror's Gadgets and how they can be made? 🧐🤷🏻‍♂️ 
published: true
description:
tags: discuss, watercooler
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/fymqoy0f132os66ttpxr.jpg
---


![5e814fe92ff839796737e238](https://dev-to-uploads.s3.amazonaws.com/i/rco4y7vjibiloy9ry242.png)
![wws3e1-double-biometric-file-transfer](https://dev-to-uploads.s3.amazonaws.com/i/i120hqkgfn3p0x8sby8w.png)
 
As fascinating as they seem, they are far from reality, especially in near future. 

But do you think with fast internet and shifting the entire computation to cloud this can be achieved? The only hardware then be required is for connection and displaying it. 

Or if you have some other theories on how to achieve it, let's discuss tonight. 

![0-rNd4DvbswrEPNx9s.](https://dev-to-uploads.s3.amazonaws.com/i/0phb9p2hnyjtv3qdb4p4.gif)
Flip Yo Bg Color in JavaScript ✌😊
Tags: 100daysofcode, oneappaday
Published: 2020-10-27 17:01:45

Have you been looking for how to flip yo bg in JavaScript?😊 Yeah Here's how & as usual, with the JavaScript codes explained line by line. Another edition of #OneAppADay Series.

https://rasheedatoba.com.ng/category/build-an-app/javascript/

Please like and share. 😊😉