teleren/devto huggingface dataset:
Confession: I'm a Vim user
Tags: discuss, vim, productivity
Published: 2020-03-12 00:48:21

I have a confession to make...I'm one of _those_ people - an avid Vim user. I do my absolute best to not reveal that fact. It can be a polarizing subject in the community. I'm here to confess I'm strongly on team Vim.

### How I learned Vim
When I first started Software Engineering the developers I was working with used [tmate](https://tmate.io/) to do pair coding. If you're not familiar, it's terminal sharing via SSH. This was a time before many of the now popular tools such as [Teletype for Atom](https://teletype.atom.io/) or [Visual Studio Live Share](https://visualstudio.microsoft.com/services/live-share/) were a thing. When in the terminal Vim is a natural choice. I learned by doing because I wanted to participate in pair coding. I also ran through `vimtutor` a few times.

### Why I still use Vim
My professional background is actually in Finance - I used to work on Wall Street. In that field, there's a strong culture that you should **N-E-V-E-R** be touching your mouse when using Excel. It even got to a point where analysts were [ripping off the F1 key from their keyboard](https://www.businessinsider.com/the-one-key-that-infuriates-bankers-so-much-theyll-pop-it-out-of-their-keyboards-2012-5) so they wouldn't accidentally open the _Help Me_ window which often crashed Excel.

Over time I was all-in on this idea of never touching the mouse to perform my work. I realized it's very efficient and actually kind of fun 🙈.

Once I discovered Vim I didn't need any convincing. It was a natural fit for me. I have tried several editors (Atom, Sublime, VS Code) with Vim mode enabled and they're all great for different reasons! But I can't help be drawn to the "purist" feel of using straight Vim where there are fewer helpers. And while _most_ keyboard shortcuts work in other editors with Vim mode enabled, not _all_ of them do without adding it yourself (looking at you `:w`).

### My Vim setup
What's funny is overtime I've added several plugins to my Vim setup (including an autocomplete using [YouCompleteMe](https://github.com/ycm-core/YouCompleteMe)). So in some ways I recognize I'm contradicting myself 🤷🏽‍♂️.

Here is my current Vim setup if you're curious:
{% gist https://gist.github.com/atsmith813/51fa357201f719d1593daa0b285b08e5 %}

### What do you think?
Feels great to confess all of this! What are your thoughts? Do you like Vim? Do you hate it?
Personal Branding Tips for Developers
Tags: help, productivity
Published: 2020-03-12 00:35:26

Hey everyone! I'm trying to grow my personal brand as a developer and entrepreneur in my space, starting with social media. 

I've given speeches and networked a little bit, but I'm trying to leverage the use of other social platforms such as LinkedIn, Twitter, Medium, and DEV to build more connections and increase my outreach.

I'm not trying to monetize my brand or anything like that, but simply gain more outreach and put my name out there.

Does anyone have any tips or advice for me?
How to implement Laravel CI/CD with Bitbucket and AWS
Tags: laravel, aws, bitbucket, cicd
Published: 2020-03-12 00:13:25

---
title: How to implement Laravel CI/CD with Bitbucket and AWS
published: true
description: Use Bitbucket pipelines to deploy Laravel projects on AWS Beanstalk
tags: Laravel, AWS, Bitbucket, CI/CD
cover_image: https://wac-cdn.atlassian.com/dam/jcr:2048e99e-d183-4ea3-9eab-9e5da85e3274/deploying-pipelines-success-default.png?cdnVersion=873
---

If you never did CI/CD implementation of your Laravel project before, then start with Bitbucket pipelines because its easy.

If you did CI/CD implementation of Laravel before then use Bitbucket pipelines because it has a lot of free build time.

Now lets get into it..
{% gist https://gist.github.com/toocool/ac74f09074566320dbafaf3f6c8cb337 %}

Here in line 5 under `branches` we say when commit is pushed to `master` branch to run the following:

Create 2 zip files excluding the vendor folder, and they both run in parallel defined by the `parallel` tag on line 6.

Then again in line 19 we define 2 processes to run in parallel, they deploy to 2 different beanstalk environments. 1 is for web serving instance/s and the other is for the queue instance/s.

To use this you will need to:
- Create 1 application in AWS Beanstalk with 2 environments (web and queue worker). 
- Create an S3 bucket 
- Obtain your **AWS_ACCESS_KEY_ID**, **AWS_SECRET_ACCESS_KEY** and **AWS_DEFAULT_REGION**

replace them with the placeholders and add this file called **bitbucket-pipelines.yml** into the root of your projects git repository.

If you followed this how to guide, when you push something to master this is how it looks like in Bitbucket:

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

The next step would be that you run unit tests before the deployment steps.

Have a happy deployment, cheers.
TIL: npm install supports local modules
Tags: node, javascript
Published: 2020-03-12 15:32:18

---
title: TIL: npm install supports local modules
published: true
date: 2020-03-12 00:00:00 UTC
tags: node, javascript
canonical_url: https://www.stefanjudis.com/today-i-learned/npm-install-supports-local-modules/
---

Today, I was reading the article [Making it Easier to Work With Local npm Packages](https://www.aaron-powell.com/posts/2020-03-02-making-it-easier-to-work-with-local-npm-packages/) written by [Aaron Parrel](https://twitter.com/slace). He describes that you can specify local modules right in your `package.json`.

```
{
    "dependencies": {
        "durable-functions": "file:../azure-functions-durable-js",
    }
}
```
This `package.json` example includes a `durable-functions` package. It is not installed from npm, though. `durable-functions` is a local module which the `file:` prefix already unveils.

When can this be useful? 

The primary use case for local modules is module development. At some point, you want to test your new module inside another module/package/site. This moment is when you need a way to reference this local module from within another project.

As Aaron points out, one way to make that work is to use [npm link](https://docs.npmjs.com/cli/link.html). Unfortunately, my experience with `npm link` is only so-so. I guess it's the same as using `ln -s` to create a symlink – you never get it right the first try!

[Local module paths](https://docs.npmjs.com/files/package.json#local-paths) feel more intuitive to me. After reading more about them, I discovered that `npm install` supports them, too. 😲

```
npm install ../some-local-module
```

This `install` command will add `some-local-module` to your `package.json`'s dependencies. The local module path will include a `file:` prefix. It'll also create a symlink pointing to your local module to your node_modules. Pretty sweet!

__The defined module path has to include a valid `package.json` – otherwise, `npm install` will fail.__

I have to say that's very handy when dealing with local modules!
import facepalm;
Tags: javascript, lodash
Published: 2020-03-11 23:35:54

---
title: import facepalm;
tags: javascript, lodash
published: true
---

*This article was originally published at [nicholascloud.com](https://www.nicholascloud.com/2020/03/import-facepalm/).*

Sometimes bugs can be particularly evasive, and today I had such a one.

A module in deep in our codebase was throwing an `Error`, but only in Mozilla's Firefox browser.

The error was [`NS_ERROR_ILLEGAL_VALUE`](https://developer.mozilla.org/en-US/docs/Mozilla/Errors).

I did some quick DuckDuckGoing and found that the error occurs when a native DOM function in Firefox is passed a value of a type it does not expect.

The stack trace led back to this line in our application code:

```js
const hit = find( cache, c => c.original === obj );
if ( hit ) {
    return hit.copy;
}
// ...some time later...
return someUncachedObject;
```

*"@-E$!&&@#"*, I thought. *"Why is [lodash's `find()`](https://lodash.com/docs/4.17.15#find) function passing a bad value to a native function?"*

You see, I use [`lodash`](https://lodash.com/) all the time. So much, in fact, that I made one fatal error in my diagnosis.

I assumed that because the `find()` function was defined, that `lodash` had indeed been imported.

How. Wrong. I. Was.

It turns out that `window.find()` is, in fact, a [non-standard, but nevertheless nearly omnipresent function](https://developer.mozilla.org/en-US/docs/Web/API/Window/find) that is designed to search a DOM document for a particular string. And since any function attached to `window` is global, a missing import of the same name -- say, a missing `lodash/find` import -- would not raise any alarms. The code built. The code ran. And it ran *without error in every browser but Firefox*. Why?

The `window.find()` function expects a first argument of type `String`. In modern browsers other than Firefox (pretty much all the Chromium-based browsers), passing a non-`String` argument to `window.find()` will simply cause the function to return `false`. As you can see in the snippet above, though rendering the cache useless, the application nevertheless continued to work. In `Firefox`, however, `window.find()` will *throw* if its first argument is not of type `String`. Thus my bug.

I am ashamed to say how long it took me to realize `lodash/find` was not the function being called.

In the end I applied the great wisdom of Spock's ancestors, and started considering things that *could not possibly be the case*, until it dawned on me that perhaps -- just perhaps -- `find()` was not what it appeared to be after all.

<div style="text-align:center">
![The Undiscovered Code more like it...](https://dev-to-uploads.s3.amazonaws.com/i/uevr4pl14fk3fvuo4z21.jpg)
</div>

And a single `import find from "lodash/find";` statement fixed the bug.
Freelancers Site needed, Want you recomendation.
Published: 2020-03-11 23:31:14

Hi All, 
I am not a developer, But i worked with developers all the past years, as we provide solutions to major sport events, 

The reason  I am writing this post is to share my experience and get your advice.
I have worked in the past with coders from freelancer, Prices as well as quality  had a difference of over 1000%, for fixed price small project and 1 out of 6 projects was successful with tremendous effort on my side. the reason  tha the site is flooded with developers from India, Pakistan Bangladesh  that hypothetically are good coders without any sense of milestones and quality as relavent. Upwork was a bit better but still i did not have the grip of a professional to choose. I followed different methods like vague proposal and also very detailed proposal specifying every detail but none of them had any successful result.Asking previous work relevant to my project but i was getting completely different stuff with the sentence " I studied your project and i am capable to do it, within seconds of posting my job"

No i am in the process of developing a modified  3 lingual(EN/FR/AR) clone of an events management software/mobile app that is a very serious investment for me 3-5K, So i need your advise, what is the site to choose a decent developer and give me a hint how to choose one  . For me i do have a number of projects down the pipeline and would like to built a long term relationship. 
Let me know your views and give your feedback, thank you

Ta
Typescript, react, redux, thunk, and material-ui template
Tags: webdev, showdev, react, typescript
Published: 2020-03-11 23:26:24

Over the past day I've revisited the skeleton application that I use as a bootstrap when creating projects. The last time I wrote one with this tech stack was 14 months ago, which in development years is a lifetime!

The app includes:

- typescript
- react
- redux
- thunk
- material-ui

Whenever I write a skeleton app I like to add a short, simple, example because without fail after not working with this tech stack for a while I'll forget how everything ties together.

The example in this shows a simple button that adds 10 to a count after a short delay each time it is clicked. The function that adds 10 can (very rarely) intentionally fail to show how the error works.

Feel free to use it, and if you've any questions or suggestions let me know!

Github: [https://github.com/jacobbaker/skeleton-ts-react-redux-thunk-mui-2020](https://github.com/jacobbaker/skeleton-ts-react-redux-thunk-mui-2020)
Twitter: [@thatonejakeb](https://twitter.com/thatonejakeb)

## An update...

Like I said; a lifetime in developer time.

Since writing this the other day I was pointed toward the official [Redux+Typescript CRA template](https://github.com/reduxjs/cra-template-redux-typescript) which, amongst other things, uses Redux Toolkit to nicely reduce the amount of boilerplate needed.

It such a nice way of working that I've forked it and added Material-UI support which can be either be found here:

Github: [https://github.com/jacobbaker/cra-template-redux-typescript-mui](https://github.com/jacobbaker/cra-template-redux-typescript-mui)

Or when creating a new app:

```npx create-react-app my-app --template redux-typescript-mui```
Assignment Hog Sinatra Project
Tags: flatiron, sinatra, ruby
Published: 2020-03-11 23:17:43



This project has shown me how far I have come in web development. I will not say it was easy but I did find myself wanting to go back for more each time I took a break. During its creation, my perspective on the internet has completely changed. I now feel that before I was barely even scratching the surface of the web. So here's an awesome quote that really puts all that into perspective.
  
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/0kmlreigqitzwcenj3ki.gif)

“The only people who see the whole picture are the ones who step outside the frame.”
― Salman Rushdie

I designed an Assignment Tracker website, that allows students who are signed in to create, view, edit, and delete their assignments. Along with this function, I added a class feature that allows students to see others who have assignments in the same class and message them. While this was not my original plan I am happy as to how it turned out.

I decided to start this project from scratch; with help from past examples of the set up of Sinatra environments. The first few steps of my website were easy I created a diagram to structure my project and then wrote out a couple of pages of pseudocode to get myself started. Once this was finished then came the fun part of setting up my environment, controllers, models, and views. I made a lot of progress on the first day, almost finishing the minimum requirements needed. But I ruining my project setup making some fatal changes to the database and environment. I spent a few hours debugging and refactoring this but then I was back on track. 
After the first day, I started having ideas of things I could add to my project beyond the scope of what I originally planned. So my website went from assignment tracker to an assignment and class tracker. Setting up my student classes database, controllers, and table came with some errors I should have expected; for example setting a column name in my table as 'class' and making duplicate class and student objects on class creation. 
Once I had this function completely working. I had another idea; to add a messenger to my website. However, it was about 3 a.m. at this point so I decided to go to sleep and start the next morning. From the beginning, I ran into some errors with relating two students in a table. I fixed this by adding a recipient id column and searched for this when a student wanted to look at their messages. At this point I had a very rudimentary messenger; the user could send, delete, and view their messages. But I felt like it was missing something, a reply function. So I added a reply form that took in the recipient's username and used a hidden input for it to allow the user to just write their new message. I then worked on the website styles and error messages. These parts were fairly easy but tedious. With all that I was finished.
This project really helped me see everything I have learned, and just how far I have come in this class. I am feeling confident about continuing my journey in software development.
ELI5: PUT and PATCH Requests 
Published: 2020-03-11 23:14:55

In Module Three at Flatiron School we were introduced to JavaScript. The main concepts covered in this section were DOM manipulation, event handling, and fetch. All three concepts go hand in hand, and as students it was imperative to understand how they coincide in order to use CRUD functionality in creating a dynamic web application.

One thing I found particularly tricky was the concept of fetch, and more specifically, using fetch to send PUT and PATCH requests to the API. At first glance, both HTTP verbs seem to be very similar. In terms of CRUD, both are associated with updating a resource. The two may appear to be interchangeable. So how do we know when to use one over the other?

The main difference between PUT and PATCH is in the way the server handles the data it receives from the fetch request to modify the resource identified by the request URI. While it's true both PUT and PATCH can update the same location, the two handle updating differently.

A PUT request needs us to send the entire payload to the server. The data a PUT request receives from the client will completely update a resource's information. It can also create a new resource from the information provided if one does not exist already.

Let's take a look at a simple example of a PUT request. In this request, we are sending the information we'd like the server to change through the body of the fetch, identifying the resource we'd like to change by its id. 

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

With PATCH, we only need to send the specific parameters that we want to update. Only the parameters that we request to be updated will be modified; everything else will remain as is. This is a partial update the existing resource. 

Using our previous example data, let's send a PATCH request to update our completed status to true. Since this is the only piece of information the server needs us to update, we only need to send that through the body.

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

The UPDATE part of CRUD tends to be a bit confusing for students new to fetch. One of the most important steps is to identify what it is you want to change in your app so you can choose the appropriate HTTP verb. If it's a single piece of data, you can go with PATCH. If you need to update a more than single piece of information, use PUT. Being able to update your application with user input is an essential part of building a fully functional and dynamic app. Using fetch can be daunting for new JavaScript developers, but it's important to become comfortable with it and the HTTP verbs you will inevitably run into!
Followers are you here?
Published: 2020-03-11 23:07:22

---
title: Followers are you here? 
published: true
description: 
tags:
---

I would like to know how many percentages I get of views, likes etc.. on my followers. I've got a lot, but I find that there is a lot of inter-reactions missing. 

*Update*

Thanks for your reply, I opened a new Issue about that :

{% github https://github.com/thepracticaldev/dev.to/issues/6608 %}

**Do 👋**
Command Pattern
Published: 2020-03-11 22:57:54

# Design Pattern 
### *Capture Actions*

GitHub Repository: https://github.com/FrancescoXX/Design-Patterns-Command-Javascript
___

## Behavioral Design Pattern

## ⚡️Recognize 
- We want to implement a set of operation, with an undo function

___

## 💡Intent
- Encapsulate operations with an object
- Let the client pass parameters to these operations
- Queue the requests (history)
- Support the undo functionality (undoCommand)

___


## 🔧 Apply when
- Save the State (state.value)
- Queue requests (commands' history)
- Want Command as a parameter
- Pass command like general object
- Need Undo functionality

___


## ✅Pro
- Decoupling between
  - Object that invokes the operation (Store)
  - Object that knows how to perform it (Command)
- We can create a new command which is a composition of commands easily

___

## 🏆 Great for
- Centralize the actions which changes the state
- Capture subsequent requests and keep track of them

___


```javascript
/** Command Pattern
 *  Behavioral Pattern
 */

//In this class, we store the value and the history of commands
class StoreCalculator {
  constructor() {
    this.value = 0;
    this.commands = [];
  }

  //Store the new value and Execute the specific Command
  storeAndExecute = (command) => {
    this.value = command.exec(this.value); //Store
    this.commands.push(command); //Execute
  }

  //Undo Command
  undoCommand = () => this.value = this.commands.pop().undo(this.value);
}

/** Command to add a value
 * @param {number} opValue value to add
 */
class AddOperation {
  constructor(opValue) {
    this.opValue = opValue;
  }
  exec = (val) => val + this.opValue;
  undo = (val) => val - this.opValue;
}

/** Command to subtract a value
 * @param {number} opValue value to subtract
 */
class SubOperation {
  constructor(opValue) {
    this.opValue = opValue;
  }
  exec = (val) => val - this.opValue;
  undo = (val) => val + this.opValue;
}

/** Command to multiply a value
 * @param {number} opValue value to multiply
 */
class MulOperation {
  constructor(opValue) {
    this.opValue = opValue;
  }
  exec = (val) => val * this.opValue;
  undo = (val) => val / this.opValue;
}

/**  Command to divide for a value
 * @param {number} opValue value to divide
 */
class DivOperation {
  constructor(opValue) {
    this.opValue = opValue;
  }
  exec = (val) => val / this.opValue;
  undo = (val) => val * this.opValue;
}

//MAIN

//Create a new Calculator
const store = new StoreCalculator();

store.storeAndExecute(new AddOperation(30)); //store.value = 30
store.storeAndExecute(new SubOperation(10)); //store.value = 20
store.storeAndExecute(new MulOperation(10)); //store.value = 200
store.storeAndExecute(new DivOperation(2));  //store.value = 100

store.undoCommand(); // UNDO: remove last operation. calculator value now is 100 again

console.log(store.value); //100
```

GitHub Repository: https://github.com/FrancescoXX/Design-Patterns-Command-Javascript
Looking for DEV's Leadership community
Tags: discuss, help, leadership
Published: 2020-03-11 22:17:55

---
title: Looking for DEV's Leadership community
published: true
description: Some of us DEVs have made our career path towards Leadership roles. Lets gather together and share as a community.
tags: discuss, help, leadership
---

I've found the DEV community to be amazing. Lots of empathetic, enthusiastic, and generous people.

I have also found it to be quite tailored towards Software Development (duh, read the name), which is great.

I think that there is a space in this great community for people, like myself, who have come from a Development background and have progressed their careers into Leadership roles.

I have been posting articles from that angle, and reading what I can find from others. But it would be great to start promoting a little corner of DEV to be a bit more inclusive towards people who are at this stage in their career path.

What do you think?