teleren/devto huggingface dataset:
BarcelonaJS Meetup February
Tags: barcelonajs, testing, frontend, javascript
Published: 2019-02-26 13:16:49

---
title: BarcelonaJS Meetup February
published: true
description: Video recording of the two talks from BarcelonaJS Meetup that took place on 19 of February 2019
tags: BarcelonaJS, testing, frontend, javascript
---

![BarcelonaJS Logo](https://thepracticaldev.s3.amazonaws.com/i/fv811kulbbaap3yovanj.png "BarcelonaJS Logo")



Javascripters from Barcelona and beyond got together once again in one more BarcelonaJs meetup. We had two great speakers:

*Paqui Calabria* [@zurribulle](https://twitter.com/Zurribulle)

```
It('should be easy'): automated testing in the real world

TDD, BDD, code coverage, karma, jest, chai... the world of automated testing is full of tools, frameworks, and philosophies, but maybe we cannot see the wood for the trees. What’s the point of testing in development? 
Is it really worth it the time invested? How can you write useful tests? Tips and good practices for daily life.
```
 
*Carlos Villuendas* [@carlosvillu](https://twitter.com/search?q=%40carlosvillu&src=typd)

```
A framework-independent, decoupled frontend architecture for large-scale projects.

Some of the top challenges in current frontend architecture are to allow for quick and efficient development and to be able to compete with native applications.
In this talk, I will present a new model which, using a component-oriented design, addresses these issues.
```

Here is the link for the event - with more details about the talks:
[https://www.meetup.com/BarcelonaJS/events/258533474/](https://www.meetup.com/BarcelonaJS/events/258533474/)


You can find the video here:
{% youtube EXjCAp7mBRs %}
Here is the direct link: [https://www.youtube.com/watch?v=EXjCAp7mBRs](https://www.youtube.com/watch?v=EXjCAp7mBRs)

Kudos to both the speakers and [Typeform](http://www.typeform.com) for hosting this event.


Follow our next events here: [https://www.meetup.com/BarcelonaJS](https://www.meetup.com/BarcelonaJS)
Using Sentry in a Browser Extension
Tags: browserextension, extension, sentry, errors
Published: 2019-02-26 13:08:30

---
title: Using Sentry in a Browser Extension
published: true
description: You would think that utilizing Sentry to track errors in a Browser extension is easy but it is actually not
tags: browser extension, extension, sentry, error
canonical: https://www.granderath.tech/sentry-browser-extension/
---

You would think that utilizing Sentry to track errors in a Browser extension is easy but it is actually not. This is how I solved it.

<!-- end -->

# Installing Sentry

To use sentry in the browser extension first install the package using yarn or npm

```bash
# npm
npm install @sentry/browser
# yarn
yarn add @sentry/browser
```

# Using Sentry

To utilize sentry you have to follow the usual setup they give you on their website

```javascript
import * as sentry from "@sentry/browser";

Sentry.init({
  dsn: "YOUR_DSN"
})

function example() {
  throw new Error("Example Error")
}
example()
```

Now you might think that you will be tracking errors but unfortunately this will not work out of the box. You first have to make some changes to the above code:

1. wrap the whole execution in a try-catch
2. add an eventlistener for the "unhandledrejection" event

The code will then look like this:

```javascript
import * as sentry from "@sentry/browser";

Sentry.init({
  dsn: "YOUR_DSN"
})

window.addEventListener('unhandledrejection', event => {
  Sentry.captureEvent(event.reason)
});

function example() {
  throw new Error("Example Error")
}

try {
  example()
} catch (e) {
  Sentry.captureEvent(e)
}
```

**Success**! Now sentry will capture the error/exception but you will quickly notice something that doesn't look alright.

# Fixing the Problem

If you upload sourcemaps to sentry you would expect that they would be used to simplify finding the error but unfortunately, by default, sentry reports the error in the `.js` file with the full path on the users system. You might see a error description with a path like this: 
```
.../Default/Extensions/<extension-id>/0.0.1.10_0/content_script.js
``` 
instead of just the truncated relative path.

We have to truncate the path manually before sending the event to make sure that sentry recognizes the files for the sourcemaps. We do this by specifying a `beforeSend` function in the `Sentry.init` call.

```javascript
Sentry.init({
  dsn: 'YOUR_DSN',
  beforeSend(event, hint) {
    if (event.exception) {
      event.exception.values[0].stacktrace.frames.forEach((frame) => {
        frame.filename = frame.filename.substring(frame.filename.lastIndexOf("/"))
      });
    }
    return event;
  } 
});
```

This will properly report errors and the correct sourcemaps will be used by sentry.

##### What I use this for?

I am currently working on StreamParty, "a browser extension, that allows you to watch video streams in sync with your significant other all across the world, on multiple platforms." Check it out! https://www.streamparty.tv/
Javascript events, going back to the basics
Tags: javascript, events, dom
Published: 2019-02-26 12:28:20

In my previous [post](https://dev.to/richardj/javascript-events--868) i wanted to discuss a way of a single event handler on document level that would listen to click events on certain elements or its children. By traversing the `event.path` i would check if in the path there was a class and then call a function if that was true.

{% link https://dev.to/richardj/javascript-events--868 %}

While this works in Chrome, `event.path` is not widely supported, so i had to go back and implement a different solution, this time, by using `event.parentElement`.

```javascript
	document.addEventListener('click', function(event) {
		let element = findAncestor(event.target, '.message');

		if (element) {
                  runFunction();
		}
	});

	function findAncestor(element, sel) {
	  while ((element = element.parentElement) && !((element.matches || element.matchesSelector).call(element,sel)));
	  return element;
	};

```

It is possible to use a polyfill apprently, and there is something like `event.composedPath`, more about that on [Stack Overflow - event.path undefined with Firefox](https://stackoverflow.com/questions/39245488/event-path-undefined-with-firefox-and-vue-js).
You're Not An Impostor
Tags: beginners, career, discuss
Published: 2019-02-26 12:12:14

Hey _you_. Yes, **_you_**, the reader. You clicked on this article because you have some degree of impostor syndrome. That feeling where you think you've somehow faked expertise to get where you are in your career, or that everyone else knows more than you. That you're helplessly flailing and hope nobody will figure out that you're a fraud.

__I have good news.__ No matter your skill level, no matter your position, you're not an impostor.

---

{% twitter 1100350155658678274 %}

> "Ipse se nihil scire id unum sciat."* - The Socratic Paradox

The Socratic Paradox is usually paraphrased as something along the lines of "all I know is that I know nothing". The more one learns about a subject, the more one learns _just how much_ there is to learn. The simplest subjects have thousands of years of history behind them; the most complex ones require learning the summarized, accrued knowledge of thousands of years of expert study. There is not a single thing that you can learn fully and completely, even given a lifetime of devoted study. Someone will always know something that you don't know, because everyone has a different perspective.

{% twitter 587671657193455616 %}

---

You are where you are because you have learned a difficult skill -- how to program a computer. You may have more specialized knowledge in a particular area than some other programmer, you may know less than someone who has been programming for longer than you, but you absolutely know more than the average person. Don't get distressed because you aren't an expert in the _en vogue_ framework or you haven't yet learned a functional programming language. Paradoxically, the fact that you're self-aware enough to _have_ impostor syndrome in and of itself means that you shouldn't think of yourself as an impostor. You are aware of the limits of your knowledge. You know what you need to learn to stay competitive, or advance your career, or stay at the cutting edge of your particular niche.

The people who _don't_ have impostor syndrome are the ones you want to avoid.

{% youtube 3R5bPl1o5fk %}

---

\* Literally, ["He himself thinks he knows one thing, that he knows nothing."](https://en.wikipedia.org/wiki/I_know_that_I_know_nothing#cite_note-2)
Pharos Production Inc. Blockchain & FinTech Enterprise Software
Tags: react, blockchain, elixir, scala
Published: 2019-02-26 11:42:41

---
title: Pharos Production Inc. Blockchain & FinTech Enterprise Software
published: true
description: 
https://pharosproduction.com
Pharos Production Inc. - a Vegas-based software development company with development branches in Eastern Europe (Ukraine, Lithuania). We specialize in high-load systems, including custom distributed and decentralized technologies like blockchain, with all required infra - web front end, mobile apps, DevOps etc. We use cutting-edge tools in our technology stack - Elixir, Scala, ReactJS, Kotlin for Android, Swift for iOS, Flutter for cross-platform development and Fuchsia, Kubernetes, Docker and Ansible for deployment into AWS, Azure or private servers. Also, we provide the development of distributed/decentralized projects on Quorum (J.P. Morgan blockchain technology for financial organizations) and Hyperledger stack for Supply Chain projects.
tags: blockchain, fintech, enterprise, enterprise software, mobile apps, scala
---
MkDocs Material Boilerplate - Starter Kit
Tags: opensource, boilerplate, documentation, staticsitegenerator
Published: 2019-02-26 09:24:01

---
title: MkDocs Material Boilerplate - Starter Kit
published: true
description: Deploy documentation to platforms (Netlify, GitHub Pages, GitLab Pages, and AWS Amplify Console) with Docker, pipenv, and GitHub Actions.
tags: oss, boilerplate, documentation, staticsitegenerator
---

![MkDocs Material](https://thepracticaldev.s3.amazonaws.com/i/zuxbp93aoriife88tla9.png)

---

## Overview

I released **MkDocs Material Boilerplate - Starter Kit** 🚀

👉 [peaceiris/mkdocs-material-boilerplate - GitHub]

MkDocs Material Boilerplate (Starter Kit) - Deploy documentation to platforms (Netlify, GitHub Pages, GitLab Pages, and AWS Amplify Console) with Docker, pipenv, and GitHub Actions.

Issues, pull requests, comments, and GitHub star ⭐️ are welcome❗️

---

## What is MkDocs

[MkDocs] is one of the best static site generators. We can write our document using markdown and MkDocs builds static site from markdown. 

[MkDocs Material] is one of the MkDocs theme based on [Material Design].


[MkDocs]: https://github.com/mkdocs/mkdocs
[MkDocs Material]: https://github.com/squidfunk/mkdocs-material
[Material Design]: https://material.io/

---

## Deploy to platforms

We have **a lot of choices** to manage documentation and deploy it.

- [GitHub Pages] + [GitHub] +
  - `mkdocs gh-deploy` command
  - [CircleCI]
  - GitHub Actions
- [GitLab Pages] + [GitLab] + [GitLab CI/CD]
- [Netlify] +
  - GitHub
  - GitLab
  - [BitBucket]
- [AWS Amplify Console] +
  - GitHub
  - GitLab
  - BitBucket
  - [AWS CodeCommit]

This boilerplate includes build and deploy settings. We can **easily** publish our documentation **right now**❗️

👉 [Demo site on GitHub Pages](https://peaceiris.github.io/mkdocs-material-boilerplate/) (build & deploy with GitHub Actions)


[GitHub]: https://github.com/
[GitHub Pages]: https://pages.github.com/
[CircleCI]: https://circleci.com/
[GitLab]: https://about.gitlab.com/
[GitLab Pages]: https://about.gitlab.com/product/pages/
[GitLab CI/CD]: https://about.gitlab.com/product/continuous-integration/
[Netlify]: https://www.netlify.com/
[BitBucket]: https://bitbucket.org/
[AWS Amplify Console]: https://aws.amazon.com/amplify/console/
[AWS CodeCommit]: https://aws.amazon.com/codecommit/

---

## More

Go to [peaceiris/mkdocs-material-boilerplate - GitHub] to get more information.

Thanks for reading and enjoy MkDocs❗️

{% github peaceiris/mkdocs-material-boilerplate %}



[peaceiris/mkdocs-material-boilerplate - GitHub]: https://github.com/peaceiris/mkdocs-material-boilerplate
Utilizing ESLint rules to format JavaScrip in VS Code
Tags: javascript, codeformatting, vscode
Published: 2019-02-26 09:08:19

---
title: Utilizing ESLint rules to format JavaScrip in VS Code
published: true
description: Today we will configure VS Code to automatically format your code according to your ESLint rules.
tags: JavaScript, Code formatting, VS Code
cover_image: https://storage.googleapis.com/hoverbaum-blog-assets/teaser-images/code-style-like-colors.jpeg
canonical_url: https://hoverbaum.net/2019/02/22/Utilizing-ESLint-rules-to-format-JavaScript-in-VS-Code/
---

Today we will take a quick look at how to configure VS Code to automatically format your code according to your ESLint rules every time you save a file.


 This assumes that you already have some ESLint rules in place. If not the [airbnb rules](https://github.com/airbnb/javascript) are a good place to get you started.

 Once you have rules setup and are hacking away in VS Code, the editor will start to complain every time you forget that "you should indent x" or whatever extraordinary rule your company might use. Especially if you are regularly engaged with different companies using different styles this becomes quite cumbersome. Luckily there are two plugins that can help us get around this.

 Go ahead and install [ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint) and [Prettier](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint). The first is a plugin you probably have installed already to help you see errors in your code-style. The later is a tool generally used to format code.

 With prettier you can achieve great things, even [format your code on commit](https://prettier.io/docs/en/precommit.html) which can greatly help to streamline coding-style across the team. For today we will only use it every time we save a file in our editor. To achieve this we simply add two lines to our settings.json.

 ```json
"editor.formatOnSave": true,
"prettier.eslintIntegration": true
```

 You can find your settings.json by using `Preferences: Open User Settings` from your Command Palette (⇧+⌘+P | ⇧+CTRL+P).

 And now every time you save a file Prettier will format it according to your ES Lint configuration.

 ![Art Palette Emoji](https://storage.googleapis.com/hoverbaum-blog-assets/emojies/emoji-artist-palette.png)

---

Originally published on [HoverBaum.net](https://hoverbaum.net/2019/02/22/Utilizing-ESLint-rules-to-format-JavaScript-in-VS-Code/)
std::cout is not printing in console/terminal
Tags: terminal, console
Published: 2019-02-26 08:49:38

---
title: std::cout is not printing in console/terminal
published: true
description: You are trying to print something in the console but it's not appearing. How to solve it?
tags: c++, terminal, console
---

Suppose in a C++ program, you are doing this but nothing appears in the console or terminal window.

std::cout << "running 1 ..";

This may happen because std::cout is writing to output buffer which is waiting to be flushed.
If no flushing occurs nothing will print.

So you may have to flush the buffer manually by doing the following:

<pre>
        std::cout.flush();
</pre>

However, if you call std::endl at the end, then it will invoke the flush, so you wouldn't have to call it manually.


If you write std::cout << "running 1 .." << std::endl; 

You would see output is now showing in the console or terminal window.

Thanks https://dev.to/cnskn for pointing it out.
How to access '$apollo' outside vue component?
Tags: vue, apollo, vueapollo
Published: 2019-02-26 07:29:33

---
title: How to access '$apollo' outside vue component?
published: true
description: According to vue-apollo documentation you will not find any possible way.
tags: vuejs, apollo, vue-apollo
---

Don't know about `vue-apollo`, [checkout the documentation](https://vue-apollo.netlify.com/).

If you will try to use `$apollo` outside the vue component, you will get similar error.

![Vue apollo error](https://thepracticaldev.s3.amazonaws.com/i/xr1d8ixfkkrgykjibcq9.png)

To make this work, instead of initializing the apollo client in the `App.vue` file, initialize it in another file. Something like `mixin/apollo.js`, and export the client:

```js
const httpLink = new HttpLink({
    uri: process.env.VUE_APP_DB_URL,
})

const cache = new InMemoryCache()

export const apolloClient = new ApolloClient({
    link: httpLink,
    cache
})
```

Then, import back the `export` into `App.vue` file:

```js
import { apolloClient } from './clients.js';

Vue.use(VueApollo)

const apolloProvider = new VueApollo({
    defaultClient: apolloClient,
})

new Vue({
    render: h => h(App),
    router,
    apolloProvider
}).$mount('#app')
```

Then you can import the same client in any other file you want

```js
import { apolloClient } from './client.js';
import gql from "graphql-tag"

export default function userExist(username) {
apolloClient
    .query({
        query: gql`
    query($username: String!) {
        login(username: $username) {
            username
            email
        }
    }
`,
        variables: {
            username: username
        }
    })
    .then(res => {
        console.log(res);
        return res
    })
    .catch(err => {
        console.log(err);
        return err
    });
}
```

### Reference

* [Vue Apollo documentation](https://vue-apollo.netlify.com/)
* [Stackoverflow](https://stackoverflow.com/a/54862097/8623417)

Thanks
Global Crypto News-Bitcoin and Cryptocurrency News
Tags: bitcoinnews, cryptocurrencynews, ethereumnewsiconews, blockchainnews
Published: 2019-02-26 06:09:39

---
title: Global Crypto News-Bitcoin and Cryptocurrency News
published: true
description: Get the latest updates on Bitcoin, Cryptocurrency, Blockchain technology, ICO, STO, Business, Trade and Forex news at Global Crypto News. Review the latest crypto coin price and market updates here. 
tags: Bitcoin news,cryptocurrency news,ethereum news.ICO news, Blockchain News
---
DEVELOPER CONSOLE
Tags: javascript, devtool, beginners
Published: 2019-02-26 05:55:58

---
title: DEVELOPER CONSOLE
published: true
description: Developer console is most important developement tool
tags: JavaScript, DevTool, beginner
---
This post was originally published on my blog, find original post [here](https://santhoshkumarr0.github.io/posts/developer-console/)

Wether you want to try some JavaScript function , inspect a JavaScript Object or see if there is any errors.
Developer console (_web console_) is here to help you

## **Developer Console**

Most modern browser provides developer console where you can play with JavaScript in shell like interface.

we can open web console with the keyboard shortcut <code>CTRL + SHIFT + K</code> on Linux and Windows, or <code>COMMAND + OPTION + K</code> on macOS.

we can enter a JavaScript command, examine variables and declare function.

> logging in JavaSript can be achieved using  <code>console.log</code> function

![developer-console](https://santhoshkumarr0.github.io/img/developer-console.png)


> We can add multi-line JavaScript command using <code>SHIFT + ENTER</code>
Hello...!
Published: 2019-02-26 05:16:42

---
title: Hello...!
published: true
description: 
tags: 
---
Hello, I am writing here for the first... I don't know what to say. OK So let's start with my introduction, I am a Developer by profession. I really love building websites, APIs and stuff. I have one year of experience of developing. And now if I talk about my hobbies, they are totally  different from my profession. My hobbies are acting, dancing and singing. I have participate many dramas, dancing and singing competition during my school and college time.
Thank you for reading...!
Happy Coding..!
Elixirステップアップのチュートリアルを連載開始(MixとOTPもくじ)
Tags: elixir, webdev, news, programming
Published: 2019-02-26 04:43:12

---
title: Elixirステップアップのチュートリアルを連載開始(MixとOTPもくじ)
published: true
description: gumi TECH Blogでは「Elixir入門」シリーズについで、ステップアップのためのチュートリアル「MixとOTP」の連載を始めます。
tags: #elixir, #webdev, #news, #programming
---

gumi TECH Blogでは「Elixir入門」シリーズについで、ステップアップのためのチュートリアル「MixとOTP」の連載を始めます。

[![elixir_logo.png](https://thepracticaldev.s3.amazonaws.com/i/057beh87vjaz37ui9hg4.png)](https://elixir-lang.org/)

[Elixir](https://elixir-lang.org/)は[gumi](https://gu3.co.jp/)も採用している並行処理のできる関数型プログラミング言語です。たくさんのユーザーが同時プレイするリアルタイムオンラインゲームの開発に使われています。分散アプリケーションがつくりやすく、障害に耐性(フォルトトレラント)をもつので、信頼性の高いスケール可能なインターネットアプリケーションを運用するのにはうってつけです。

gumi TECH Blogではこれまで、Elixirの構文基礎についての「[Elixir入門](https://dev.to/gumi/elixerelixir-10g2)」シリーズ(全23章)を連載してきました。それに続くステップアップのためのチュートリアルが、つぎのシリーズ「MixとOTP」です。[Plataformatec社](http://plataformatec.com.br/)による[Elixirサイト](https://elixir-lang.org/)のガイド「[MIX AND OTP](https://elixir-lang.org/getting-started/mix-otp/introduction-to-mix.html)」にもとづき、サーバーとクライアントの簡単なアプリケーションをつくっていきます。

「MixとOTP」はPlataformatec社の許諾を得て、全10章を日本語で解説する連載です。ただし、翻訳ではなく、内容を整理したり、説明やコードも補ったり、より理解しやすくなるように手を入れています。この連載が日本のElixirユーザーのお役に立てば幸いです。10章の日本語タイトルは、つぎのとおりです。公開された記事には、その都度リンクを加えてゆきます。

#### MixとOTPもくじ
- [MixとOTP 01: Mixを使ってみる](https://dev.to/gumi/mixotp-01-mix-dg1)
- [MixとOTP 02: Agent](https://dev.to/gumi/mixotp-02-agent-3n9g)
- [MixとOTP 03: GenServer](https://dev.to/gumi/mixotp-03-genserver-2jhn)
- [MixとOTP 04: スーパーバイザーとアプリケーション](https://dev.to/gumi/mix-otp-04-bj0)
- [MixとOTP 05: ダイナミックスーパーバイザー](https://dev.to/gumi/mix-otp-05-l3p)
- [MixとOTP 06: ETS](https://dev.to/gumi/mix-otp-06-ets-ol3)
- [MixとOTP 07: 依存関係とアンブレラプロジェクト](https://dev.to/gumi/mix-otp-07-1p5k)
- [MixとOTP 08: Taskとgen_tcp](https://dev.to/gumi/mix-otp-08-gentcp-5120)
- [MixとOTP 09: DocTestとwithのパターンマッチング](https://dev.to/gumi/mix-otp-09-doctest-with-533g)
- [MixとOTP 10: 分散処理のTaskと設定](https://dev.to/gumi/mix-otp-10-3i31)
An Enhanced TypeScript Playground
Tags: typescript
Published: 2019-02-26 04:20:42

---
title: An Enhanced TypeScript Playground
published: true
description: The TypeScript playground with enhancements
tags: typescript
cover_image: https://thepracticaldev.s3.amazonaws.com/i/5rrpk58vqffc396paebe.jpg
canonical_url: https://www.iamdeveloper.com/posts/an-enhanced-typescript-playground-49j6/
series: typescript
---

As I was going through my Twitter feed earlier this evening, a tweet from someone I follow popped up.

{%twitter 1100193610631397376 %}

I was like, hey, that looks pretty cool. So I asked Steven if he had created it, to which he replied.

{%twitter 1100197435832446976 %}

In a nutshell, typescript-play is like the official TypeScript playground but with some great enhancements:

* All strict options turned on by default
* More available compiler options
* Ability to switch TypeScript version
* More space for code
* More examples
* Quicker sharing, URL updates as you type
* Shorter sharing URLs

What's even cooler is the fact that it's open sourced, so you can deploy it locally.

{%github https://github.com/agentcooper/typescript-play %}

![Kanye West Awesome from giphy](https://media.giphy.com/media/5fMlYckytHM4g/giphy-downsized.gif)
 
If you don't feel like cloning it, check it out at [typescript-play.js.org](https://typescript-play.js.org).

Happy coding!

Photo by [Jorge Gonzalez](https://unsplash.com/photos/XGG12wqCkk8?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) on [Unsplash](https://unsplash.com/search/photos/playground?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)