teleren/devto huggingface dataset:
Consistent Console Logs in Angular
Tags: javascript, angular, logging, console
Published: 2021-07-09 15:22:08

Jared Youtsey | ng-conf | Apr 2019

When you have to log, do it consistently.

Logging is necessary. It allows us to debug in both development and production. But `console` is disallowed by tslint by default. And for good reason. Console logging is a mess most of the time. If you can just willy-nilly `console.log(whatever)` then your logs are pretty much useless.

We can end up with too much logging in production, which can slow our application down, and not enough in development where we need more details.

I’ve had to deal with this issue on multiple projects and have written a static logger class in Angular that allows us to control what we log and where.

Here is the gist https://gist.github.com/jkyoutsey/e99336d58c2c83bc0ba03cde78fcc64e

In a nutshell you have the following options:

`Logger.(debug|info|warn|error|devOnly|techDebt)(module: string, method: string, message?: any)`

`debug|info|warn|error` will log in all environments unless you also set the optional `devOnly: boolean` argument to `true`. Then the `module` and `method` will still log, but not the `message` argument. This allows for tracing without leaking sensitive data in a production environment.

`devOnly|techDebt` do not have the optional `devOnly` argument and will only ever log to the console in a non-production environment.

By environment I mean your `src/environments/environment.ts`’s `production` property value. If it’s false you’ll get all log statements. If it’s true you’ll only get `debug|info|warn|error`.

Your output will now be consistently formatted, making it easier to read, parse, or even analyze.

![Image for post](https://miro.medium.com/max/696/1*J6NUCfdMS470M5NfZvO0ZA.png)
###### Sample Logger Usage

The above commands result in the following output in Chrome DevTools:

![Image for post](https://miro.medium.com/max/474/1*ECO4TTlHAkgZj22Q4GefiQ.png)
###### Readable Console Output

I’ve even created a VisualStudio Code snippet to make it easier:

```
"Log All The Things": {
    "prefix": "ll",
    "body": [
        "Logger.${LEVEL}('${CLASS}', '${METHOD}', `${message}`);"
    ]
}
```
###### [logger.ts.vscode.snippet.txt](https://gist.github.com/jkyoutsey/43c5570815c1c3eba2868e50cf8ae7c5#file-logger-ts-vscode-snippet-txt) hosted by GitHub

And I’ve got unit tests for it so it won’t impact your coverage (but [you shouldn’t worry too much about coverage](https://medium.com/ngconf/angular-unit-testing-code-coverage-lies-603c6c85f801)): https://gist.github.com/jkyoutsey/01e3e2db4ba9a570245bd63d543960e1

If you find this useful or interesting, please clap!

---

## ng-conf: Join us for the Reliable Web Summit

Come learn from community members and leaders the best ways to build reliable web applications, write quality code, choose scalable architectures, and create effective automated tests. Powered by ng-conf, join us for the Reliable Web Summit this August 26th & 27th, 2021.
https://reliablewebsummit.com/
Day 136
Tags: 100daysofcode, programming
Published: 2021-07-09 15:19:40

Day 136/200 of #200DaysOfCode #100DaysOfCode 

- Solved two problems on Codewars.

1 -  Back to KinderGarten (eeeeeeasy) (6 kyu)
2 -  Validate my Password (6 kyu)
DEPLOY NEXT.JS APP TO VERCEL
Tags: nextjs, vercel, deploy, shoppingcart
Published: 2021-07-09 15:08:18

Someone want to me make a post for explain how to deploy NEXT.JS application to [Vercel](https://vercel.com/). Base on require of them I will make a post. Hope, it will help something to you.

#### I. Initial Next.js app or you can clone my shopping cart [repository](https://github.com/hatuanem199801/next-shopping-example)
```bash
create-next-app shopping-cart
```

#### II. After creating your application, commit them to Github.
```
git add .
git commit -m "Complete project"
```
#### III. Create project in Vercel
![Create project](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qdjw54je867grxworj2o.png)

#### IV. Import project or you can search by name of repository.
![import project](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ijwzn53vnyqo826aaohd.png)

#### V. Configure application
- You can add `env` as MONGOURI or SERECTKEY, ... in box `Environment Variables`.
- Override command of application in box `Build and Output Settings`

![Configure application](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/coad6982e1f71rpqeqpl.png)

#### VI. Deploy and done
![Deploy](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/unnkhpj9wo0hvn5ur1ym.png)
- Enjoy your time 🪴

Thank you for reading.

<a href="https://www.buymeacoffee.com/hte305" target="_blank">
![Buy me a coffee](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ddtyyk0zuud3h7o0sjpq.png)
</a>
Speeding up the development serve after upgrading to Angular v12
Tags: angular
Published: 2021-07-09 15:07:52

After you've upgraded to Angular v12 from a previous version of Angular, you may notice your `ng serve` times have increased, along with missing sourcemaps, and longer rebuild times during development. This post helps you set a default configuration to development to get your application serving the same as previously.

In Angular version 12, running `ng build` now defaults to production mode. This is a welcomed change, as there is less chance of accidentally deploying a development build to production, which is a lot slower and bigger, giving the perception that Angular is slow. This also aligns with other web frameworks that build for production out of the box.

The way Angular serves the application, it essentially does a build with watch mode. As mentioned before, doing a build is now done by default with production optimizations enabled. This adds more time to the build process.

There is a migration to add a "development" build configuration.

To run this migration, run:

```sh
ng update @angular/cli --migrate-only update-angular-config-v12
```

One caveat is that it only supports migrating first-party Angular builders for development mode, including:

- @angular-devkit/build-angular:dev-server
- @angular-devkit/build-angular:protractor

To fix this manually, you add the development options as defaults, and a `defaultConfiguration` set to `development` for the serve target.

{% gist https://gist.github.com/brandonroberts/9ce8df89d24d0cb093cbc58d98f90ac5 file=angular.json.diff %}

Now, when running `ng serve` you will get a development build, which is faster for local development.

If you liked this, click the :heart: so other people will see it. Follow [me on Twitter](https://twitter.com/brandontroberts) for more tips on Angular, [Nx](https://nx.dev), and [NgRx](https://ngrx.io)!

## See Also

- [Angular v12 blog post](https://blog.angular.io/angular-v12-is-now-available-32ed51fbfd49)
Onboarding to new code with runtime code maps
Tags: architecture, rails, learning, showdev
Published: 2021-07-09 15:03:02

So I've recently been inspired by:

* A well-known blog post by [Aleksey Kladov (matklad)](https://matklad.github.io/about/) about [Architecture.md](https://matklad.github.io/2021/02/06/ARCHITECTURE.md.html), 
* Conversations with [AppMap](https://appland.com/products/appmap) users

As you probably know, the job market is good for developers these days! Lots of companies are in hiring mode - Shopify, for example, is [doubling their team](https://www.shopify.com/careers/2021) with 2021 hires in 2021.

Starting a new job is exciting, but also stressful. If you're hiring, it's important help your new hires feel at ease in their new position. There are lots of things you can do to prepare, but I will just focus on one aspect here: getting familiar with the code base. 

Hopefully you have a Wiki for new hire orientation, that's built and maintained by new hires themselves. Once a new hire has all their new accounts, knows where to find things, and has had lunch with the team, it's time to take a ticket and fix or improve something. And that's where Architecture.md comes it. To quote Aleksey:

> Roughly, it takes 2x more time to write a patch if you are unfamiliar with the project, but it takes 10x more time to figure out where you should change the code. 

Yeah. The biggest challenge is **just knowing where the relevant code is**!

Now, in Aleksey's post, he recommends *against* detailed links to code - because the code is going to change, and the links will become stale. So, I've thought about that and I'm proposing a way to include detailed code links and keep them fresh. 

Here's my suggestion in a nutshell: enhance Architecture.md with links to interactive code maps, and provide developers with a command that they can run to generate these code maps. In the video above, I'm using the Rails Sample App for my demo. A `rake` task generates all the code maps used by Architecture.md:

```
bundle exec rake appmap:architecture
```

Once a developer has run this command, all the AppMaps used by Architecture.md are guaranteed up-to-date with the code. So, they can be used as a supplement to the text content in Architecture.md - you can navigate from the Markdown, into code maps, directly into source code, and back. The code maps include HTTP server requests, dependency libraries, and detailed SQL, so there's a wealth of information and detail that new hires can use to get oriented. 

Check out the video for a walkthrough. Here are links to some resources presented in the video:

* [Rails Sample App - appmap-e2e branch](https://github.com/land-of-apps/sample_app_6th_ed/tree/appmap-e2e)
* [AppMap Discord](https://discord.com/invite/N9VUap6)
* [AppMap quick start guides](https://appland.com/docs/quickstart/)

Do you have other tips and tricks for making a great Architecture.md? Let us know in the comments!
Main Branch #5
Tags: dating, softwaredevelopment, computerscience, comics
Published: 2021-07-09 16:53:15

---
title: Main Branch #5
published: true
date: 2021-07-09 14:57:08 UTC
tags: dating,softwaredevelopment,computerscience,comics
canonical_url: https://blog.shiftleft.io/main-branch-5-321e245d254b
---

#### No Time For Love

![](https://cdn-images-1.medium.com/max/1024/1*nLC-eXwae6sW6f2SJ3wH0w.jpeg)

Main Branch is a comic strip for developers produced by James Gilbreath, Jason Green, and Vickie Li.

* * *
Learning new tech as a beginner.
Tags: programming, codenewbie, beginners, python
Published: 2021-07-09 14:47:40

### 1. Code everyday.
- To become good a coding you have to code every single day. Even if for just 20 minutes a day. You just have to be consistent.

### 2. Take your first tutorial.
- Complete the tutorial. Understand everything, shallow understanding is fine while starting.
- You do not need to understand exactly how the functions work, but you do need to be able to import and use them correctly.
- Don't rush to complete the tutorial. If you feel like skipping any topics from tutorial, take a break and come back later.

### 3. Add at least 2 new features to the project after completing the tutorial.
- Following tutorial, we are not using our brain. So, we have to use our brain and think ourselves trying to add simple features at least. If you have understood the tutorial it will not a big deal.

### 4. Build a new projects & complete it.
- **Ideas don't come out fully formed. They only become clear as you work on them. YOU JUST HAVE TO GET STARTED.**
- Build a complete new project with the knowledge which you have acquire from the tutorial.
- If you like your new project which you are building then keep on updating(iterating) it.
- Instead of making multiple simple projects, build a big project.
- If you keep on adding new features to a simple project, then it will start to grow to a big project.

### 5. Habit of Figuring out anything.
- Face your challenges.
- How can I add this features to my project?
   - Reading documentation.
   - Learning from an article.
   - Watching videos.
   - Asking for help in stack overflow or any other platform.
How-to-use guide for SSH
Tags: ssh
Published: 2021-07-09 14:46:32

If you want to watch the video version of this, here the link (https://youtu.be/lWWlEDRO2uo).

SSH Authentication Methods

1. Password [Using your server's user's password]
2. Public/Private Key Pair

![Screenshot from 2021-07-09 11-11-42](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/98rbt5k4ee5nnttr07fb.png)


Don't use root to login. Instead create a new user

**Create a new user**

```
adduser chloe[Can be any name]
```
![Screenshot from 2021-07-09 11-25-30](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bhyujqxvp60yfagw4q1f.png)

**Now add chloe to sudo group**

```
sudo usermod -aG sudo chloe.
```
![Screenshot from 2021-07-09 11-30-12](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/52xhtnm6s1q12n0g0kf4.png)

**Since you created a new user, add the public key to that user .ssh folder. It's usually located at /home/chloe. Create a new .ssh folder and create authorized_keys if not exist and paste public key inside.**

![Screenshot from 2021-07-09 17-51-35](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m5xa7f30t1myn83gq8qi.png)
 

```
# Login into remote server and navigate to /home/chloe
# Create a new .ssh folder
sudo mkdir /home/chloe/.ssh
```

```
# Create file 'authorized_keys'
# Paste client public key inside
# Save it
sudo nano authorized_keys
```
**Next, change the ownership of the folder to chloe.**
```
sudo chown -R chloe:chloe /home/chloe
```

> chown - change ownership
R - Everything
chloe:chloe - user:group
/home/chloe - folder path

**Now, on client side, if you're using new public/private key pair then you have to add them.**

```
ssh-add /path/to/privatekey [eg. ~/.ssh/id_rso_new]
```
**[optional]There a possibility that ssh agent inactive. Active by run**

```
eval `ssh-agent -s`
```

That all. Hope the steps simple enough to understand. Peace :)
No need to open 4 tabs in your terminal for your projects!
Tags: node, javascript, typescript, showdev
Published: 2021-07-09 14:26:42

Very often when working on full stack solutions we find ourselves opening 4+ tabs in our terminal. We would run a `yarn dev` for on micro-service then a `yarn start` for react and so on.

This has always been annoying to handle and so we built `Child Manager` which lets you manager child processes for your project from just a simple config file.

https://github.com/pixiumdigital/child-manager/

## Installation 

To install run the following commands:


```
yarn add @pixium-digital/child-manager
```

You can also use NPM

```
npm install @pixium-digital/child-manager
```

## Run

To leverage child manager simply add a configuration file to your project (see below for config details)

You can run thew following command:

```
yarn child-manager
```

By default the loaded config will be at the source of the project and be named `childmanager.json`

If you wish to load a different file just pass the config option.

```
yarn child-manager --config="./myconfig.json"
```

**You can then access the manager at the following:**

http://localhost:7000

## Configuration

Here is an example configuration

```
{
  "processes": [
    {
      "name": "Test Service",
      "command": {
        "executor": "node",
        "args": ["TestService.js"],
        "path": "./src/service",
        "isWindows": false
      },
      "maxLogs": 200
    },
    {
      "name": "Service 2",
      "command": {
        "executor": "yarn",
        "args": ["start"],
        "path": "./other-project/service",
        "isWindows": false
      },
      "maxLogs": 200
    }
  ],
  "captureExit": true,
  "longLive": false,
  "debug": false
}
```

**Generic configurations:**

- `debug`: This will show more logs in the terminal in case something is not working
- `longLive`: This is to force process to stay alive. Use carefully.
- `captureExit`: This binds the exit of child manager so that it will kill all childs

**Process configurations:**

- `name`: The name of your service
- `maxLogs`: The max number of logs to keep in memory (recommended 200)

- `command`: This houses the command line that will be launched
    - `executor`: The command executor (yarn, npm, node)
    - `args`: Array or extra arguments that should be passed
    - `path`: Where the command should be executed
    - `isWindows`: Is this running on windows system? if yes paths and executors will be automatically changed to be compatible

---

## Conclusion 

With the use of one simple configuration file we are now able to launch all our mini services efficiently and with ease regardless of the fact that it might be a `yarn script` a `npm script` or even a command line 

If you wish to contribute feel free to check out the code:

https://github.com/pixiumdigital/child-manager/

---

## About Us

Pixium Digital

https://pixiumdigital.com

https://github.com/pixiumdigital
Google Poly is Gone: Here is the New Way to Search and Store Polygons
Tags: google, googlpoly, unity3d, augmentedreality
Published: 2021-07-09 14:03:25


![1.jpeg](https://cdn.hashnode.com/res/hashnode/image/upload/v1625838803137/90xGVETX1h.jpeg)

[Google Poly](https://poly.google.com/) was shut down on June 30, 2021, making its 3D assets search and storage service and associated APIs no longer accessible.

But hope is not lost - **[echoAR](https://www.echoar.xyz/) is here to the rescue!**

Users of our Enterprise plan can use our web console and advanced API to **find cached 3D models from Google Poly** and **store new models**.

Below are two ways our Enterprise users can get cached 3D models originating from Google Poly.

## 1. Using the web console

Head over to our [web console](https://console.echoar.xyz/). Click the **Add to Cloud** button at the top of the sidebar in the Content page to add a new hologram. Use the **search** bar to find free 3D models that you can instantly add to your project. For example, let’s get pizza 🍕:

![2.gif](https://cdn.hashnode.com/res/hashnode/image/upload/v1625839046228/FGbLXvuIc.gif)

The web console easily allows you to manage 3D assets such as models, videos, animations, and interactive content.

![3.jpg](https://cdn.hashnode.com/res/hashnode/image/upload/v1625839057159/dy_eOZH6I.jpeg)

## 2. Using our Advanced Search API

Use our [Advanced Search API](https://docs.echoar.xyz/search#get-3d-models-advanced) to query, retrieve, and filter cached 3D model from Google Poly.

![4.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1625839091075/lIdx7nj0d.png)

You can search for any keyword and get results in JSON format instantly. For example, let’s get pizza 🍕:

![5.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1625839109432/z9nBzNCLb.png)

You can **filter** for a specific result based on **ID**, **minimal and/or maximal triangle count**, and ask to include a maximal amount of results.

We also support **real-time conversation and compression** to retrieve optimized versions of the results.


![6.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1625839142427/n3a5k7leA.png)

Read the full documentation [here](https://docs.echoar.xyz/search#get-3d-models-advanced).

***

## **[Contact us](enterprise@echoAR.xyz)  now to learn how you can keep using Google Poly models.**

![1.jpeg](https://cdn.hashnode.com/res/hashnode/image/upload/v1625839183770/7TAPRgSvl.jpeg)

Note that all 3D models from Google Poly are used under the [Creative Commons license](https://creativecommons.org/).

***

> echoAR (http://www.echoAR.xyz; Techstars ’19) is a cloud platform 3D/AR/VR that provides tools and network infrastructure to help developers & companies quickly build and deploy 3D apps, games, and experiences.

![7.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1625839218220/EQNcB5ha2e.png)
New to node.js and struggling with socket.io
Tags: node, javascript, webdev, webrtc
Published: 2021-07-09 14:02:10

Hi all,

Nervous first post but really need some help. I'm working on a Web application for p2p communication (both video and text). 

The video communication works (some teething issues), but my main issue is getting user socket.id. specifically the user just having connected.

I have tried many things including:
Socket.on("connected", () {
console.log(socket.id);
});

All I get is "undefined". Yet if I run te same console.log code after the page loads I can get it displayed.

Not sure how to work with that.

I want to store the socket.id and username in an object/array 

Thank you
Introducing sip!
Tags: showdev, javascript, node
Published: 2021-07-09 13:54:05

Just published [sip](https://www.npmjs.com/package/@siddharthshyniben/sip), a tiny npm library for compressing files. It uses LZW to compress files. It's no alternative to gzip, but feel free to check it out!

| [Direct Link](https://npm.im/@siddharthshyniben/sip) |
| ---------------------------------------------------- |
How to use ES6 import syntax in Node.js
Tags: node, es6, import, module
Published: 2021-07-09 13:52:39

## Introduction

A module is a JavaScript files that can export one or more values. These values can be variables, objects, or even functions.

JavaScript does not have built-in support for modules, but the community has created impressive work-arounds. The two most important standards are:

- **CommonJs Modules** - What we know as the `require()` method for importing modules and `module.exports` for exporting. This is designed for synchronous loading and mainly used for server.

- **Asynchronous Module Definition (AMD)** - The most popular implementation of this standard is [RequireJS](https://requirejs.org/). This is designed for asynchronous loading and mainly used for browsers.

## ES6 Import

The goal for ECMAScript 6 modules was to create a format that both users of CommonJS and of AMD are happy with. The syntax for importing modules looks like this..

```javascript
import Express from 'express'; // for default imports

import { foo } from 'bar'; // for named imports
```

and exporting with named and default exports like this..

```javascript
export const MAX_USERS = 20; // Named exports

function sayHi(name) {
  console.log(`Hi ${name}!`);
}

export default sayHi; // Default export
```

## How to use it

If you try to run this code directly then you would get an error something like

```bash
SyntaxError: Cannot use import statement outside a module
```

Now, if you are using Node.js version 14.x.x or above then the simplest fix is to add "type": "module" in your package.json file.

```json
{
  "type": "module"
}
```

However if you are on any version below 14, you would have to use Babel to compile your code before running it.

**Note: Babel is not framework or platform opinionated. This means that it can be used in any project that is written in JavaScript and thus, in a Node.js project as well.**

Let's start by installing some dev dependencies,

```bash
yarn add -D @babel/core @babel/preset-env @babel/node

# OR

npm install -D @babel/core @babel/preset-env @babel/node
```

Next is to create a `babel.config.json` file and add the following config,

```json
{
  "presets": ["@babel/preset-env"]
}
```

Now you just have to use `babel-node` instead of node, so your start/dev script may look like this now

```json
{
  "scripts": {
    "dev": "nodemon --exec babel-node server.js"
  }
}
```

Hope this was helpful. See you in another one 👋