teleren/devto huggingface dataset:
Angular Universal, add Error Logger like Sentry.
Tags: angular, errorlogging, angularuniversal
Published: 2019-05-07 13:32:12

---
title: Angular Universal, add Error Logger like Sentry.
published: true
description: Error logging in Angular Universal
tags: #angular, #error-logging, #angularuniversal
---

This article primarily focuses on how to capture production errors of **Angular Universal** app. We will be using **Sentry** as the example module for capturing the errors on both the platforms **client** and **server**.

The main thing to focus here is the SDK provided by Sentry for client and server are different. Also, the **server’s SDK should never be loaded on the client** because it will not be able to find any node modules on the browser.

To load **client SDK** we will use app.module.ts (This file runs on both the platform)

To load **server SDK** we will use app.server.module.ts (This file runs only on the server, so we will be sure that our server SDK is only loading on the server)

This is how our own implementation of common **ErrorLogger** will look like.

```ts
// error-logger.ts

import { ErrorHandler } from '@angular/core';
import { environment } from '../environments/environment';

export class ErrorLogger implements ErrorHandler {

    static initWith(sentry: any) {
        return () => new ErrorLogger(sentry);
    }

    constructor(private sentry: any) {
        if (environment.production) {
            this.sentry.init({ dsn: environment.sentryDsn });
        }
    }

    handleError(error: any): void {
        if (environment.production) {
            this.sentry.captureException(error.originalError || error);
        }
        throw error; // for default behaviour rather than silentely dying
    }
}
```

Now, to override the default behavior for error handling of Angular, we need to add a provider `ErrorHandler` with our own custom implementation. We will use `useFactory` to create an instance of our `ErrorLogger` with the correct SDK provided from `*.module.ts` like:

```ts
// app.module.ts

import { ..., ErrorHandler } from '@angular/core';
import * as SentryBrowser from '@sentry/browser'; // browser SDK

import { ErrorLogger } from './error-logger';

...
providers: [
  ...
  { provide: ErrorHandler, useFactory: ErrorLogger.initWith(SentryBrowser) }
]
```

```ts
// app.server.module.ts

import { ..., ErrorHandler } from '@angular/core';
import * as SentryNode from '@sentry/node'; // server SDK, should not load on browser

import { ErrorLogger } from './error-logger';

...
providers: [
  ...
  { provide: ErrorHandler, useFactory: ErrorLogger.initWith(SentryNode) }
]
```

The static `initWith` method will act as a factory and returns the instance of our custom ErrorLogger but with correct Sentry, SDK initiated according to the platform.

Hope, it helps someone. :)
Easy way of adding an existing project to github using CLI.
Tags: git, github, githubbeginers
Published: 2019-05-07 13:09:22

---
title: Easy way of adding an existing project to github using CLI.
published: true
description: Easy way of adding an existing project to github using CLI.
tags: git,Github ,githubbeginers
---
If you have existing projects or files already and want to push/publish it on github repo, but not familiar with the git commands for it then following steps will make you complete your task within a minutes.

Step 1:- First of all visit your github dashboard and then create a repo either private or public but don’t initiate with README and any License Templates,and then click create new repository button, after that you will be redirected to Quick Set up Page, now copy the project URL with HTTPS option.

Step 2:- Open Terminal and then change the directory to your working or project Directory.

Step 3:- Initialize your local project as a Git Repository with 
$git init .

Step 4:- Add the file to a repository with $git add . , This adds the files of your local repository to staging for your initial commit.

Step 5:- Commit the files that you have added or staged in your local repository with $git commit -m “your commit message”.

Step 6:- Now add the URL of your remote repository that you have copied from Quick Setup Page with $git remote add origin < your remote repository URL> and then verify it with $git remote -v .

Step 7:- Now Push your staged files to remote repository with $git push origin master

After that, you will be asked for Github username and password please provide those credentials, as soon as you enter your password, your local project starts pushing to Github.
What's New in Angular (2019)
Tags: angular, learning, discuss, releases
Published: 2019-05-07 13:03:34

---
title: What's New in Angular (2019)
published: true
description: Links for What's new in Angular
tags: Angular, Learning, Discussion, Releases
---

Below are the links of resources I used in my talk at [ProgressNext](https://www.progress.com/next) about [What's New in Angular](https://www.progress.com/next/sessions/what's-new-in-angular). 


## Referenced Blogs and Articles on Angular

[Air France & KLM Angular Upgrade](https://medium.com/airfrance-klm/how-we-upgraded-a-website-with-half-a-billion-annual-users-to-angular-7-in-less-then-a-day-71de33a1108e)
[5 Reasons for Angular Elements](https://blog.nrwl.io/5-reasons-to-use-angular-elements-390c9a629f89)
[Creating a Successful Meetup at Your Company](https://blog.angular.io/creating-a-successful-meetup-at-your-company-33eaabbc66b5)

## NG Conf 2019 Videos

[All YouTube Videos from ngConf 2019](https://www.youtube.com/user/ngconfvideos/videos)
[The Bazel Opt-in Preview](https://www.youtube.com/watch?v=J1lnp-nU4wM)
[Angular Elements Make The Best React Components](https://www.youtube.com/watch?v=tHclHHs7nmo)
[Day 1 Keynote | Brad Green & Igor Minar](https://www.youtube.com/watch?v=O0xx5SvjmnU&t=2115s)
[Day 3 Keynote | Stephen Fluin & Misko Hevery](https://www.youtube.com/watch?v=-kYtw3CSe6s&t=1905s)
[2019: A Schematic Odyssey](https://www.youtube.com/watch?v=X06tuCohJPQ)
[Not Every App is a Spa](https://www.youtube.com/watch?v=JX5GGu_7JKc&t=3s)

## Angular Project/Team Resources

[Angular GitHub Release Page](https://github.com/angular/angular/releases)
[Update Angular](https://update.angular.io)
[Angular Next (v8)](https://next.angular.io/docs)
[Angular Elements Overview](https://angular.io/guide/elements)

## Miscellaneous Links
[StackBlitz](https://stackblitz.com/)
UX for the web developer
Tags: help, design, ux, javascript
Published: 2019-05-07 11:41:59

---
title: UX for the web developer
published: true
tags: help, design, ux, javascript
---

Hi all, 

I'm a web developer looking to expand my understanding of the paradigms that underpin UX design.

I'm thinking this may not be a unique starting point, so with this in mind I'm wondering if anyone knows of any materials to help me get started building my understanding of this discipline. Thanks.
Using the ORGENIC UI Expander Component
Tags: orgenicui, webcomponents, ux, design
Published: 2019-05-07 11:41:02

---
title: Using the ORGENIC UI Expander Component
published: true
description: ORGENIC UI is a growing set of web components with focus on UX and design. This tutorial shows how to use the expander component.
tags: ORGENIC UI, Web Components, UX, Design
cover_image: https://thepracticaldev.s3.amazonaws.com/i/gz0auh41gwm4ien2mbc2.png
series: ORGENIC UI Tutorials
---

ORGENIC UI is a growing set of web components with focus on UX and design. This tutorial shows how to use the expander component.

The expander is a component that can be used to organize large amounts of content in expandable blocks. These blocks can be hidden by collapsing so that only the heading is visible. Common usecases are FAQs or settings pages with some expert parameters that are hidden by default.

## Expander

Using ORGENIC UI, all you have to do is to `og-expander` tag with the heading as attribute `name` and the content which will be transcluded into a `slot`:

```html
<og-expander name="Expander #1">
    <p>Expander content #1</p>
</og-expander>
```

If you want the expander to be expanded by default, you can simply add an "extended" attribute.

```html
<og-expander name="Expander #1" expanded>
    <p>Expander content #1</p>
</og-expander>
```

The result looks like this:

<img src="https://thepracticaldev.s3.amazonaws.com/i/wway5916wa5hjrqfmk54.png" alt="ORGENIC UI Expander" style="width:400px"/>

This is pretty simple... but there is more...

## Accordion

If you think about an FAQ, you might just want to open one expander after the other to focus on the one element the user selects. The common name for components with this behavior is _accordion_. In ORGENIC UI we avoided creating a new component just for this use case. Instead, you can simply add a `group` attribute to add multiple expanders to one category.

```html
<og-expander name="Accordion Expander #1" group="accordion" expanded>
    <p>Accordion expander content #1</p>
</og-expander>
<og-expander name="Accordion Expander #2" group="accordion">
    <p>Accordion expander content #2</p>
</og-expander>
```

These expanders behave like an accordion now.

<img src="https://thepracticaldev.s3.amazonaws.com/i/q1yuk3c2dda2d0pxf0a5.png" alt="ORGENIC UI Accordion" style="width:400px"/>

This approach gives you the flexibility to spread expanders over the entire page, and they don't have to be enclosed by an accordion component.

Take a look at this CodePen:

{% codepen https://codepen.io/orgenic-team/pen/VOwNWL %}

Please visit us at:

* https://orgenic.org
* https://github.com/orgenic/orgenic-ui
* https://twitter.com/orgenicUI
A Incomplete List Of Things That Don't Matter
Published: 2019-05-07 10:50:19

---
title: A Incomplete List Of Things That Don't Matter
published: true
description: 
tags: 
---

Throughout your career as a developer you will inevitably run adjacent to a series of holy-wars filled with passionate zealots. While it's easy to get caught up in these, it's worth noting that none of them will enact meaningful benefit to your life.

# Tabs v. Spaces

Tabs are characters designed for indentation, but their implementation varies wildly across systems. Spaces are consistently represented across systems, but require 2, 3, or 4 times as much space to store. Tab width can be adjusted in your text editor without modifying the source document.

Semantically, using tabs for indentation and spaces for micro-aligning makes sense. Functionally, spaces can always be trusted to work like spaces.

Your IDE can take care of transposing pretty much anything, on read and on write. Whichever you decide to use, we all die alone in the end.

# IDE v. Text Editor

An IDE is an `Integrated Development Environment` and usually refers to an application that functions as some combination of text editor, compiler, syntax highlighter, debugger, VCS, or any other number of fancy features. 

Text editors edit text, but there's no requirement their features stop there.

If you're a fan of *console debugging* and either have an external compiler or don't need one, then it's likely you're fine without the full suite of features an IDE promises.

Notepad is definitely a text editor. 
Visual Studio and Eclipse are definitely IDEs.

VS Code, Atom, and SublimeText are somewhere in between. But no matter what you decide to use and what you decide to call the one you use, it won't make it easier to get out of bed in the morning.

# MacOS v. Linux v. Windows

Windows is the dominant enterprise desktop OS, with Linux owning the server market and MacOS taking market share from Windows year-over-year.

MacOS and Linux have similar support for development tools, with Windows support being slightly more scarce. 

Linux is less popular as a desktop solution, but there is some merit to developing on the same platform you'll be running in production.

In the end, the OS you choose is largely up to user preference. Almost anything you want to do can be done on any of the platforms. You can change your OS, but you can't change you who are on the inside.
Quick Vue Tip: Cleaner Data Fetching
Tags: vue, javascript
Published: 2019-05-07 10:43:45

---
title: Quick Vue Tip: Cleaner Data Fetching
published: true
description: 
tags: vue,javascript
---


# Quick Vue Tip: Fetching Data

A common use-case we encounter is needing to show data fetched from an API using a Vue component.

For example, say we have a Vue component called `ViewAvenger.vue` which shows the information of an Avenger based on its id. A common way of doing this is by passing an `id` prop to our component. The actual API call is then handled by the component itself via a method call `getData`.

{% gist https://gist.github.com/mccabiles/3e2b3ced0cf1517607123c00e90c70db file=ViewAvenger.vue %}

## Loading data upon mount

Say we want to get our data immediately when the component mounts. We then add the `mounted` lifecycle method into our component.


{% gist https://gist.github.com/mccabiles/3e2b3ced0cf1517607123c00e90c70db file=ViewAvengerMounted.vue %}


## Re-load data if the `id` changes

This works fine, but what if our `id` prop changes? There would be no way for us to call `getData`. To do that, we would need to `watch` the `id` prop for changes.


{% gist https://gist.github.com/mccabiles/3e2b3ced0cf1517607123c00e90c70db file=ViewAvengerWatch.vue %}

By defining a `watcher`, we tell our component to call the `getData` method whenever the `id` prop is changed. 

## Refactoring for simplification!

Our component works just fine as it is right now. However, how can we rewrite it to be more concise?
We use `watch` props!

Watchers can have the `immediate` prop, which tells the component to fire the handler method immediately. This means that we can get rid of the `mounted` method, saving us some lines of code.


{% gist https://gist.github.com/mccabiles/3e2b3ced0cf1517607123c00e90c70db file=ViewAvengerImmediate.vue %}

Finally, we can simplify this even further! We can move our whole `getData` function into the watch handler. As an added bonus to readability, we can remove the `this.` prefix from the API call since we can simply use the `id` argument of the handler function!


{% gist https://gist.github.com/mccabiles/3e2b3ced0cf1517607123c00e90c70db file=ViewAvengerFinal.vue %}

And just like that, we effectively saved ourselves some more lines of code.
I hope you found this tip useful, and thanks for reading!
Are algorithms, complexity & data structures still relevant?
Tags: discuss, interview, webdev, career
Published: 2019-05-07 10:36:27

Given that this is my first article ever written, I will try to be as concise as I can. 

A couple of weeks ago my boss gave me the task to study basic algorithms & data structures in order to interview for one of our clients. I vaguely remember the topic from my early college years and I have to admit that I was never a fan of the subject, hence this article now. 

Given the fact that almost every major company has a part of the interview based on this topic, I'm aware that this is still a pretty big thing. But this topic has been part of the interview process for programmers for 10-20 years now and it remained unchanged mostly, not like computation power of our devices. Beside getting a grasp on our minds and the way we're able to see the big picture, why is this topic relevant for today interviews?

Don't get me wrong, I'm not saying that they should be deprecated. In the meantime, I'll keep learning and I want to give a shout-out to some of the articles I've found around here that helped me visualize and better understand this concepts.

{% link trekhleb/algorithms-and-data-structures-in-javascript-49i3 %}
{% link fahimulhaq/top-8-data-structures-for-coding-interviews-and-practice-interview-questions-2pb %}
{% link aarohmankad/data-structures-and-algorithms-0-to-60-294h %}
{% link areknawo/rocking-js-data-structures-254k %}
Latest Web Application Development Trends
Tags: webapplication, development, trends, latesttrends
Published: 2019-05-07 10:27:48

---
title: Latest Web Application Development Trends
published: true
description: Web application development advances and examples have seen great changes over the span of the latest decade, growing rapidly from its regular structure to a very pushed future advancement. With a regularly expanding number of people moving toward the fast web and splendid gadgets to interface with web workplaces, the necessity for convincing web applications is moreover transforming into a need. 
tags: web application, development, trends, latest trends,
---
<img src="https://thepracticaldev.s3.amazonaws.com/i/angkr8zos0l8ab3sls7v.png" alt="Latest Web Application Development Trends">

Web application development advances and examples have seen great changes over the span of the latest decade, growing rapidly from its regular structure to a very pushed future advancement. With a regularly expanding number of people moving toward the fast web and splendid gadgets to interface with web workplaces, the necessity for convincing web applications is moreover transforming into a need.

Read the full article here: https://www.decipherzone.com/blog-detail/Top-Web-Application-Development-Trends
Multiple Json objects in a single file
Published: 2019-05-07 10:22:13

---
title: Multiple Json objects in a single file
published: true
description: 
tags: 
---

we have multiple json objects stored in array format in a file (30K records per file). I am looking for java code which can be used to split json objects into multiple objects and provide the json object in variable. Also, Is there any way which can be used to read array element one by one instead of loading entire data in memory as file size and record count is huge which may cause memory issues.
Am I the only one, that can’t stick to one stack?
Tags: discuss, productivity, career
Published: 2019-05-07 09:34:29


Hi, Dev.to this is my first blog post. But I wanted to ask a question.
##Is it me or Am I the only one, that can’t stick to one set of technologies and languages?
I seem to want to try and play with almost every cool new technology or language; I know this is not productive. But, I can’t seem to settle on one main stack.  I am also aware that a broad set of skills are vary-useful and can be sort after by employers.

At the same time is it not also essential to be very skilled on one main stack or set of technologies? I am new to software engineering and web development. I spend about six months working as a trainee software engineer before starting University in the separate of 2018.  I assume once I spend a full year in industry full time, this will change. Well, I hope so.

I wonder what your opinion is on this, am I just some weird people or are there some others like me.

As I have already said this is my first blog, please let me know about my silly mistakes, and I do hope you’ll comment in answer to the main question. Thank you for reading this.  I am working with a friend to produce a collaborative blog and podcast in the future, and I am sure to announce when it goes live here or on my social media.
Announcing Grit: a Markdown editor for blogging with a static site generator
Tags: blogging, staticsitegenerator, editor, markdown
Published: 2019-05-09 15:09:30

---
title: Announcing Grit: a Markdown editor for blogging with a static site generator
published: true
tags: blogging, staticsitegenerator, editor, markdown
canonical_url: https://www.kahlillechelt.com/2019/05/07/announcing-grit-a-markdown-editor-for-blogging-with-a-static-site-generator/
---

Last year I decided to write more. I thought I’d try a hosted solution because I wanted to concentrate on the writing and not on the fiddling with the site.

[Micro.blog](http://micro.blog) was the most attractive solution to me but after using it for a while I realized that, as a developer, I am not capable of leaving the building of my blog to somebody else. There were too many things I wanted to tweak/change, bugs I couldn’t live with etc.

So I ended up sticking with my [Hugo](http://gohugo.io) solution.

Unfortunately there are many little annoyances when blogging with a static site generator, due to the fact that your posts are a bunch of Markdown files in a folder with a specific file name and some frontmatter boilerplate in them.

Creating a blog post was always tedious. Too many little fiddly things to do before you could just start to write.

In order to remedy this I created a [blog-cli](https://github.com/kahlil/blog-cli) that just schaffolds new blog posts for me. It works fine but I really wanted an editor that can do that for me.

That’s why I built [Grit](https://github.com/kahlil/grit). It’s a little Electron app that let’s you manage a folder full of Markdown posts and edit them as well.

It allows you to store the path to your Markdown files, filter through the files, create a new file, edit the file and publish via Git.

I used [Preact](https://preactjs.com/) and [htm](https://github.com/developit/htm) to write it because I was too lazy to set up a build step and I love writing code the browser can directly interpret. For the file editing part in Grit I am using [CodeMirror](https://codemirror.net/) which is a hell of a product, wow.

If you use Hugo, Jekyll, Gatsby or whatever other static site generator to build your blog and are looking for a little convenience there, give it a spin! See the current feature list [on GitHub](https://github.com/kahlil/grit).

It’s an alpha version so there be dragons. But I am planning a bunch of improvements like: drag and drop images, configurable frontmatter and some enhancements around file-creation.

If you want, let me know what you think [on Twitter](https://twitter.com/kahliltweets).
MBCians, we have liftoff!
Tags: microbitcoin, opensource, blockchain, cryptomining
Published: 2019-05-07 09:28:02

---
title: MBCians, we have liftoff!
published: true
description: Rainforest version 2 is now live!
tags: MicroBitcoin, Opensource, Blockchain, Cryptomining
---

Rainforest version 2 is now live!
A big thank you to the developers, miners, pools and all the contributors!
Be MBCious!