teleren/devto huggingface dataset:
What is the missing part of vim ?
Tags: vim, discuss
Published: 2020-03-23 18:57:56

# Intro

I'm part-time vim user for a long time. I did use vim for full time for few months as well.

If you consider, other text-editor or plugin, I'm a full-time vim user for sure. (I have been using https://github.com/VsVim/VsVim, https://github.com/VSCodeVim/Vim/, http://vrapper.sourceforge.net/ for a long time).

I did enjoy https://github.com/SpaceVim/SpaceVim and https://vim.spf13.com/.

# Discussion

What are the missing part of vim. I mean, due to lack of
* Knowledge
* Practice
* Understanding
* Plugin

# Action
Do comment your thoughts. 

Note:- I miss search functionlity in vim due to proper knowledge. Please suggest some links to tutorial/plugin for doing a fantastic search experience in vim.

Update: On 12-April-2020
I switched to https://github.com/vitaly/dotvim2. It comes with various functionality including fzf integrated properly. Search is a cake of pie for me now. I love reading their docs in github.
This binding in JavaScript - 2. Implicit binding
Tags: javascript, webdev, tutorial, learning
Published: 2020-03-23 18:45:20

This post ([This binding in JavaScript - 2. Implicit binding](https://www.sargalias.com/blog/this-binding-in-javascript-implicit-binding/)) was originally published on [Sargalias](https://www.sargalias.com).

In this series we talk about `this` binding in JavaScript.

This is a very important topic. It's also something that even experienced developers frequently get wrong and / or have to think about.

Basically in JavaScript there are 4 modes for `this` binding. Make that 5 if we include arrow functions.

In order of lowest priority to highest priority, here they are:

1. Default binding
2. Implicit binding
3. Explicit binding
4. New binding
5. Arrow functions
6. Gotchas and final notes

In this post we'll talk about implicit binding.

---

Implicit binding is what we get when we call a function with a "." before it, such as `obj.foo()`.

## How implicit binding works

Implicit binding has a higher precedence than default binding.

You use implicit binding by calling a function with a "." before it. For example `obj.foo()` results in implicit binding.

When using implicit binding, the value of `this` is the object just before the final "." before the function.

For example in `obj.foo()`, the value of `this` in `foo` is `obj`.

In `objA.objB.foo()`, the value of `this` in `foo` is `objB`.

In `objA.objB.objC.foo()`, the value of `this` in `foo` is `objC`.

Basically the value of `this` is the object at the very right of the function call before the actual function.

## Example for implicit binding

Consider the following code.

```js
'use strict';

const obj = {
  foo() {
    console.log(this);
  },
};

obj.foo();
```

What does the code above output?

Answer: `{foo: f}` (in Chrome), which is basically `obj`.

Explanation:

We are calling a function preceded by a "." before it, so we're using implicit binding.

The value of `this` inside our function becomes the object right before the final "." of the function call. In this case that is `obj`. Therefore `this` becomes `obj`.
Struggle with React and unit tests
Tags: unittests, react, help, tdd
Published: 2020-03-23 18:21:09

## Context

I'm trying to learn TDD at the moment, and so I decided to exercise on my [Gatsby](https://www.gatsbyjs.org/) project.

[This](https://github.com/NansD/nans-random-thoughts) is the blog I'm working on.



## What do I want to achieve ?

I wanted to add a theme toggler to it, simply by using [gatsby-plugin-dark-mode](https://www.gatsbyjs.org/packages/gatsby-plugin-dark-mode/). 

So I went ahead and created a ` theme-toggle.js` along with a ` theme-toggle.test.js` file.

 Then, I decided to write my first test. But for that, I had to ...

## Setup tests on a Gatsby Project

I followed [this tutorial](https://www.gatsbyjs.org/docs/unit-testing/) which is well made, along with [this one](https://www.gatsbyjs.org/docs/testing-react-components). 

Now I can run ` npm run test -- --watch` and everything seems to be working.

Here I am, with `jest`, ` @testing-library/react` and everything ready to go.

## Now, what should I do ?

I've been able to create a simple React component that contains a label with a check box, and successfully tested it with :

```javascript
describe('ThemeToggle', () => {
  it('renders an input', async () => {
    const themeToggle = render(<ThemeToggle />);
  	const toggle = themeToggle.getByLabelText('Dark mode');
    expect(toggle).not.toBeNull(); // this passes ✅
  });
});
```

But then, I "cheated" for a bit, and looked at [the tutorial](https://www.gatsbyjs.org/packages/gatsby-plugin-dark-mode/) to see what I had to build to make it work.

Here is how it should look like :

```jsx
function ThemeToggle() {
  return (
    <ThemeToggler>
      {({ theme, toggleTheme }) => (
        <label htmlFor="themeToggle">
          <input
            id="themeToggle"
            type="checkbox"
            onChange={(e) => toggleTheme(e.target.checked ? 'dark' : 'light')}
            checked={theme === 'dark'}
          />
          {' '}
          Dark mode
        </label>
      )}
    </ThemeToggler>
  );
}
```

So now my question is : how do I write suitable tests for that component ?

I'm a bit lost 😅

Thank you for your help !
Pusher Chatkit Migration
Tags: chat, pusher, chatkit, migration
Published: 2020-03-23 18:11:28

---
title: Pusher Chatkit Migration
published: true
description: Notes on Pusher Chatkit Migration
tags: chat, pusher, chatkit, migration
---

I just read the news about [Pusher Chatkit shutting down](https://getstream.io/blog/pusher-shutting-down-chatkit/). They are only giving people 30 days to migrate their data so this is going to get a little hectic. 

Our [chat platform](https://getstream.io/chat/) is a great [alternative to Chatkit](https://getstream.io/blog/stream-vs-pusher/) so I've started creating a [guide on how to migrate from Pusher Chatkit to Stream](https://github.com/GetStream/pusher-chatkit-migration). It's not finished yet, bit of a WIP. If anyone needs help feel free to reach out.
🌟 View Google Chrome's Bookmarks Toolbar in Daily
Tags: product, webdev, howto
Published: 2020-03-23 17:38:14

---
title: 🌟 View Google Chrome's Bookmarks Toolbar in Daily
published: true
description: Learn how you can show your default bookmarks toolbar in Daily
tags: #product #webdev #howto
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/1zpig5zijozkuhpec07f.jpg
---

Having bookmarks in browsers is a common thing. We usually have different preferences to hide/show bookmarks toolbar display in browsers. However, by default Google Chrome shows your bookmarks toolbar when you open a new tab.

When you install Daily, however, your new tab is replaced by the extension. In that case, your bookmarks toolbar is not shown whenever you open a new tab. Let me explain with the help of a GIF.

![New Tab Bookmarks GIF](https://dev-to-uploads.s3.amazonaws.com/i/e72oucm22mkv5mwvsckl.gif)

## 🌟 Show Google Chrome's Bookmarks Toolbar in Daily

A couple of times we were asked by our users that how could they keep the bookmarks toolbar in Daily as well. So, we decided to write about it. The answer is pretty simple. You need to enable the option of **Show Bookmarks Bar** in your browser.

There are two ways mentioned below to toggle the bookmarks bar in Google Chrome.

### ⌨️ Using Shortcut Keys

Below are the shortcut keys that you can use to toggle bookmark toolbar:

* For Mac: `CMD⌘ SHIFT⇧ B`
* For Windows: `CTRL SHIFT B`

That's what I do. It allows me to quickly toggle the bookmarks bar. This way, I can easily hide it when I am not using Daily.

### 👨‍💻 Using Settings Menu

Click on the three dots (⠇) on the top right corner of Chrome. Go to Bookmarks > Show Bookmarks Bar. That's all!

![Show Bookmarks in Chrome](https://dev-to-uploads.s3.amazonaws.com/i/71whi1fj0ruttl4z7bc0.png)

## 🙌 Wrap Up!

That's all. You should be able to see the bookmarks bar in Daily as well. If you have any questions, feel free to reach out to us.

Stay Safe! ✌️

<hr/>

<center> 👋 Follow us on [Twitter](https://r.daily.dev/twitter) to stay up-to-date! </center>


_[Thanks to Daily](https://r.daily.dev/web), developers can focus on code instead of searching for news. Get immediate access to all these posts and much more just by opening a new tab._

[![Daily Poster](https://thepracticaldev.s3.amazonaws.com/i/od2407i0eogvtdm0ddhk.jpeg)](https://r.daily.dev/web)
Learning resources from Google
Tags: webdev, machinelearning, android, codenewbie
Published: 2020-03-23 16:43:48

Learning never stops!

In a world where digital transformation is the new normal, Google is offering (free) strategic education programmes in order to help you stay up to date with the latest technologies. And man, they have it all! And for those who know me, it's not a secret anymore I love everything about Google.

Knowledge is power and sharing is caring, so I've decided to put together all Google's learning materials.

Ready, set, learn!

--------

👩‍💻👨‍💻 Everything you need to know about building for the modern web - https://web.dev/learn/

🔬Guides, tutorials and hands-on coding materials - https://codelabs.developers.google.com/

📱Learn app development basics, Kotlin, Java & more: - https://developer.android.com/courses

📱Android and web development, Firebase, Machine Learning and TensorFlow: - https://developers.google.com/training

-> Udacity: https://www.udacity.com/google

☁️ Learn and build with/on Google Cloud: - https://cloud.google.com/training

https://edu.google.com/programs

🤖 AI & Machine Learning: - https://ai.google/education/

https://deepmind.com/research?filters=%7B%22tags%22:%5B%22Deep%20learning%22%5D%7D

🤖 Create machine learning models fast, easy, and accessible to everyone: - https://teachablemachine.withgoogle.com/

🤖 Learn to train algorithms to work collaboratively: - https://federated.withgoogle.com/

👨‍🔬👩‍🔬 Explore, advance and succeed in computer science - https://edu.google.com/code-with-google

👨‍🏫👩‍🏫 Devices, Digital and tools for teachers: - https://teachercenter.withgoogle.com/training

🚀 For small businesses, students, educators and developers: - https://grow.google/

📉 Google Digital Academy: - https://www.thinkwithgoogle.com/intl/en-gb/marketing-resources/programmatic/google-digital-academy/

📉 Digital Marketing, Data and Tech and Career Development: - https://learndigital.withgoogle.com/digitalgarage

📉 Learn how to use Google Ads, Marketing Platform, Analytics and Waze - https://skillshop.withgoogle.com/

📉 App Campaigns: - https://analytics.google.com/analytics/learnwithgoogle/

📬 Gmail, Calendar, Drive, Docs and many more: - https://gsuite.google.co.uk/intl/en_uk/training/

Digital wellbeing, AI, Arts & Culture, AR and Chrome hands-on experiments: - https://experiments.withgoogle.com/



And a few more here:

https://edu.google.com/teaching-resources/

https://research.google/

https://www.tensorflow.org/

https://rework.withgoogle.com/
How to Load a PDF in a Browser from a PDF Byte Array
Tags: pdf, html, javascript
Published: 2020-03-23 17:26:22

I got stuck on this seemingly easy task. I've somehow had gone my whole career without having to do this, but I've seen it done countless times on other sites.

I think the reason why I got stuck was because I tried the most complex solutions first thinking that they're more likely to work. I was wrong. Lesson learned. Try the easiest solution first.

Here's my solution. I ended up using an embed tag and make the src attribute equal to the api endpoint that was returning the byte array.

```xml
<div class="pdf">
  <embed src="https://api_url/path/to/endpoint" type="application/pdf" />
</div>
```

Your last step would be to style it however you want and configure the PDF.

##Configuring the PDF

After you get the PDF loading, you may also be wondering how to size the PDF to fit in the `<embed>` tag.

The problem is that your PDF may not always fit beautifully in the browser window when it loads. Maybe it's really small or it's too large. This article is how to fix that.

There are specific types of query parameters for interacting with a PDF in the browser. You use these to help format the PDF. They look like this:

`filename.pdf#view=FitH`

And in the case where we're using the `<embed>` tag:

```xml
<embed src="https://api_url/path/to/endpoint#view=FitH" type="application/pdf" />
```

Instead of the parameters starting with a '?', it will start with a '#'. The '#' and everything after is called a fragment. Fragments don't get sent to the server during an HTTP request.

The keys and values in the fragment will tell the browser how to size the PDF. Follow the link below for a list of possible keys and values to use.

https://www.adobe.com/content/dam/acom/en/devnet/acrobat/pdfs/pdf_open_parameters.pdf

I wanted the PDF page to fit on the page and using this fragment, `#view=FitV`, solved my problem.

You may think it's strange that your typing in these keys and values into Chrome but they come from an Adobe document. Me too. I think it's because Chrome tried to use Adobe's system but I couldn't find any information about it from Google. All keys and values may not be properly documented or map over into Chrome. You'll have to test them out for now. If you find any better documentation, please let me know.

Now go ahead and try a few of these PDF query parameter fragments on your own PDF.
The Serverless Trilemma: Build High-Quality Architectures
Tags: serverless, aws, lambda, architecture
Published: 2020-03-23 17:21:30

---
title: The Serverless Trilemma: Build High-Quality Architectures
published: true
description: Learn the three basic concepts to build scalable and maintainable applications on serverless backends
tags: serverless, aws, lambda, architecture
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/xh0gft1fsed2ailps6ob.png
---

Hey, we just published a video in the Serverless Well-Architected series. It covers three essential concepts to high-quality architectures:

* Black-box
* Double-billing
* Substitution

Let me know your thoughts in the comments. [Subscribe](https://dashbird.io/subscribe?utm_source=dev.to&utm_medium=article&utm_campaign=well-architected&utm_content=serverless-trilemma) to receive updates on future content. [Try a serverless monitoring tool](https://dashbird.io/#register/?utm_source=dev.to&utm_medium=article&utm_campaign=well-architected&utm_content=serverless-trilemma) that can help you improve your architecture.

{% youtube 2n_bCGEGvsY %}
This Dot Labs Acquires Stickman Ventures
Tags: general
Published: 2020-03-25 16:17:25

---
title: This Dot Labs Acquires Stickman Ventures
published: true
date: 2020-03-23 17:07:01 UTC
tags: General
canonical_url: https://www.thisdot.co/blog/this-dot-labs-acquires-stickman-ventures
---

 **MARCH 23, 2020 - MOUNTAIN VIEW, CA** - Today, leading web development firm [This Dot Labs](thisdotlabs.com), announced that it has completed its acquisition of Stickman Ventures, a custom software development and technology firm based in Oakdale, CA.

With this acquisition, This Dot’s software development team will be joined by Stickman Ventures CEO, Justin Ribeiro, MBA, a Google Development Expert with two decades of professional software development experience and the rest of the Stickman development team.

“Tracy [This Dot Labs CEO] and I have been working together for years, and the acquisition was a natural fit. The team is excited to join the This Dot team and we are ready to grow together.” says Ribeiro.

The acquisition further enhances the expertise on the This Dot Labs team in web platform engineering, web performance, web components, python, dot net, and other technologies.

“I am so excited to make the long term partnership Stickman and This Dot more official. We’ve worked with the Stickman team for years, and it will be great to join forces and continue to provide enterprises with the combined expertise of both teams.” says Tracy Lee, CEO of This Dot Labs.

Enterprises looking to optimize web performance with modern web technologies as part of their digital transformation efforts can hire the newly expanded This Dot team by emailing hi@thisdot.co.

#About This Dot Labs

Founded in 2016, This Dot Labs is a modern web consultancy focused on helping companies realize their digital transformation efforts. For expert architectural guidance, training, or consulting in React, Angular, Vue, Web Components, GraphQL, Node, Bazel, or Polymer, contact us today at hi@thisdot.co.

#Press Contact:

Tracy LeeCEO, This Dot Labs[thisdotlabs.com](thisdotlabs.com)408-506-9660
Cleaner short circuits with optional chaining.
Tags: javascript, webdev
Published: 2020-03-23 17:06:15

---
title: Cleaner short circuits with optional chaining. 
published: true
description: 
tags: javascript, webdev
cover_image: https://user-images.githubusercontent.com/17259420/77185523-d4419b80-6ad1-11ea-9eb7-2055d63f653f.jpg
---

* Support for the optional chaining operator came to some major browser releases, allowing for easier and cleaner retrieval of nested object methods and properties given that they exist.* 

# What is Optional Chaining(?.)

One of the most common operations that us developers need to perform on objects is retrieving its properties and methods. Many times these properties/methods contain other properties/methods that we have to drill down to. However, not every object will have said properties/methods and we end up breaking our code. A common way to handle these errors is to use the `&&` operator when drilling down the object, creating a short circuit if the property is returns `undefined`

```javascript
const Boat = {
   name: {
     first: 'Boaty',
     last: 'McBoatface'
   },
   cargo: {
     // additional props could reside here
   }
}

/** 
  * check if boat has cargo 
  * then an item 
  * then return the quantity of item
  */
const boatQuantity = 
  boat.cargo && 
  boat.cargo.item && 
  boat.cargo.item.quantity
```
We can see that even trying to go only a couple layers deep into an object with the `&&` operator things are getting a little messy. However, the optional chaining operator cleans up our code a lot. 

```javascript
// such clean, much readability
const boatQuantity = boat.cargo?.item?.quantity;
```

# Support

Outside of Safari, the latest version of all major browsers now support the optional chaining operator. Alongside them, Babel also provides support so if you're already using Babel in your projects, upgrade to 7.8.3 (maybe earlier? this was the earliest release I could find) and you're good to go. 


Thanks for reading! Stay safe and healthy out there everyone
The 7 Most Popular DEV Posts from the Past Week
Tags: top7
Published: 2020-03-23 16:51:02

---
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 Monday 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. ❤️

#1. We're in it together!

Sarthak shares five things to keep in mind while working remote during these unprecedented times. 

{% link https://dev.to/teamxenox/covid-19-self-isolation-work-from-home-and-developers-22kd %}

#2. Switcharoo

Patrícia found themselves regularly switching between different Node and Angular versioned projects. In this post, they they explain how to manage these projects in a simple and straightforward way.

{% link https://dev.to/patricepeartree/how-to-run-multiple-node-and-angular-versions-simultaneously-3lfj %}

#3. Opportunities

Nader tweeted a call to action looking for companies that are still hiring. For anyone looking for work, this list is a compilation of those who responded.

{% link https://dev.to/dabit3/100-developer-jobs-companies-still-hiring-amid-the-coronavirus-crisis-58o8 %}

#4. All The Ways

Samantha likes understanding multiple solutions to a problem. In this post, they share four ways to split a word into an array of characters.

{% link https://dev.to/samanthaming/4-ways-to-convert-string-to-character-array-in-javascript-iij %}

#5. The Kitchen Sink

Shawn shares every web performance test tool they know about. Each tool helps identify issues in your app and provides some key speed metrics. 

{% link https://dev.to/swyx/every-web-performance-test-tool-naj %}

#6. Start Here

There's an overwhelming amount of resources to learn frontend develpment. In this post, Greg curates six YouTube channels they recommend for learning.

{% link https://dev.to/gregfletcher/top-front-end-development-youtube-channels-4ihg %}

#7. Intimidating -> Intuitive

Nick helps us understand memoization, an optimization technique used in many programming languages.

{% link https://dev.to/nas5w/what-is-memoization-4lod %}

_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!_
Move slow, break free.
Tags: productivity, growth, life
Published: 2020-03-23 16:50:37

I’ve been lucky enough to experience a really strong growth trajectory :chart_with_upwards_trend: at work, but that success also led me astray. It wasn’t until later that I realised the growth I was pursuing so relentlessly, was **not my success** to begin with. I was conforming to peer perception and what being successful meant to the company; in my misplaced but ambitious pursuit of validation, I never defined what success meant to me.

For a simple test, if your success makes you comfortable, then that’s a red herring. Comfort breeds complacency, and with that, you’ll fan the flame :fire: of entitlement. 

I got lost in the rut of undefined success and regressed to the belief of being extremely competent and capable of investing into multiple career tracks, without any compromise; the unwavering trust that if I move fast in every possible direction, I’ll make it sooner to at-least one of them.

A month back, I survived a lay-off at work, but the experience encouraged me to do a retrospection of **my growth** as a developer. 
The process reminded of a valuable lesson I learnt during my undergrad; a lesson which shaped me into becoming a humble, passionate and resourceful developer at the end of my engineering program …


I used to lean towards experiential learning, so while most of my classmates were focussing on theory, I was learning how to build websites, write APIs and contribute to open-source software. Folks in my college started to compliment me with how I’m preparing for the real world and will be extremely hireable, and somehow, my passion and persistence towards learning mutated into seeking that validation and status.

In the sixth semester, my college decided to host a [hackathon](https://en.wikipedia.org/wiki/Hackathon). I had never participated in one before, but was of the opinion that it needed participants to have some hands-on skills, which was enough for me to assume that it’ll be a breeze.

_"I was great at development"._

The day of the event, I didn’t seek inputs from the team and started forcing an idea too complex to be presentable within 24 hours. We had no prior knowledge and analysis to support the idea, and zero collaboration within the team. 
In my arrogance and obsession with my competency, I pushed hard to chase an unrealistic grand result, ending up with nada.

I craved validation so much that I let down my team and missed out on learning from folks who’ve been participating in a lot of hackathons.

That’s when the epiphany hit me; I had lost my way. :confused:
I drove fast and missed a crucial turn. 
In an attempt to juggle :man_juggling: a lot, to protect the perception of my worth, I failed :broken_heart: my passion ...


It was back then when I decided to focus more on my personal growth and satisfaction. To do something each day, to keep me motivated for the next. 

It feels good to be reacquainted with that thought.
After all, we’re all on a road trip, so let’s slow down and enjoy it while it lasts!