teleren/devto huggingface dataset:
Mokka - A stress-reducing dark theme
Tags: vscode, extension, theme, showdev
Published: 2020-09-24 15:12:24

Hello everyone, I'm glad to present to you the first version of the [Mokka](https://marketplace.visualstudio.com/items?itemName=Demenskiy.mokka) theme for the Visual Studio Code editor.

The idea was to create a theme to reduce visual stress and improve code readability. To do this, I used a soft palette of colors and highlighted parts of the code that are important to distinguish.

The theme was developed specifically for JavaScript and React.js but also supports Python, PHP, HTML, CSS and SASS.

Enjoy your use. I will be glad if you leave your feedback and any wishes.

[Download this theme on the Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=Demenskiy.mokka).

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/xiipuift7o82uygyues9.png)
Project 1
Published: 2020-09-24 15:07:41

Pretty much done with my first ever project!

Hero Library is an website where the user will be able to search and find Super-Hero data such as stats and images. Once the user enters his input the image of searched hero will spawn, with additional description and data underneath.

Github : https://github.com/DannyMichaels/Hero-Library

Github pages : 
https://dannymichaels.github.io/Hero-Library/index.html
Angular NgModel Validation
Tags: angular, ngmodel, validation
Published: 2020-09-24 15:04:39

Our prior series on Angular Validation discussed Form Group and Form Control validation. The negative aspect of using them is the immutability requirements. The fact that two way binding now needs to be done in our code is well, it's ridiculous in my opinion. Let's look into a more user friendly option, the NgModel.

**NgModel**
```html
 <select
    id="city"
    name="city"
    [ngModel]="address.city"
    #city="ngModel"
    [pattern]="onGetCity(city)"
 >
      <option>Select City</option>
      <option *ngFor="let city of address.cities">
         {{ city.name }}
      </option>
</select>

```
Our code above shows use of the ngModel for an address.city name. The id, name and #city attributes are straight out of the angular text book. Use this pattern and two-way binding with validation is ready to go!

Notice the [pattern] binding.  We put this in originally to find out why our html side regex patterns weren't working.  Much to our surprise we finally (accidentally) cracked open the ngModel internals.

**NgModel Structure**

When hooking up [ngModel]='some.property' have you ever wondered more about how ngModel works?

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

The NgModel contains

- A FormControl
- A field for the Model
- An update EventEmitter
- A valueAccessor
- A viewModel

And other deeper stuff.

Summary: There's no reason to use Form Controls when NgModel uses them internally. In future articles we'll dive in a bit deeper. 

JWP ngmodel NgModel
Show off your Mug ☕️🥤🍵
Tags: discuss, watercooler
Published: 2020-09-24 14:58:50

---
title: Show off your Mug ☕️🥤🍵
published: true
description: Show your coffee, tea, or matcha mug
tags: discuss, watercooler
---
As much as I love coffee, I love mugs as well but especially this mug by dev.to *(which you can buy [here](https://shop.dev.to/collections/2018-new-merch/products/space-dev-mug))*. I ordered this before but due to an accident, I lost it but now it's back. 😊

{% twitter 1308967410125492225 %}

----

Share a picture of your favorite Coffee/Tea/Matcha Mug in the comment section below and story, ***if any***, why you love it. 

---

![](https://media.giphy.com/media/xFlwfGFN6ddtK2B05t/giphy.gif)
update of macOS to the latest version
Published: 2020-09-24 14:57:56

the operating systems are the fundamental thing in the hardware nowadays. Now, nothing can be run without an OS. whether that is any computer, laptop, smartphone, etc. 

Therefore, the world's second-richest person is also the owner of the OS company. There are many plenties of operating systems nowadays. However, most used OS or Windows OS and macOS.


Download: Paid.
time: Anytime.
Should you download: As you wish.
version: Windows 10, macOS 11,
Conclusion: doubtful.

[img]https://live.staticflickr.com/65535/50370918958_d7a9a3ddfd_b.jpg[/img]

[img]https://live.staticflickr.com/65535/50371621431_b5200bd2ea_z.jpg[/img]

[img]https://live.staticflickr.com/65535/50371780602_79eb03b9c1_b.jpg[/img]
https://techvatan.com/enter-macos-catalina-full-screen-mode-on-vmware/  https://techvatan.com/update-macos-mojave-to-latest-version-on-vmware/
[img]https://live.staticflickr.com/65535/50371780632_7e62609123_b.jpg[/img]

[img]https://live.staticflickr.com/65535/50370918958_d7a9a3ddfd_b.jpg[/img]

45847630495
4534636
4423423
34234234
56565
34233453
45635634
2234
635645
2342342
536346
234234
5346345
2345234
253453445
2343
425345
23423
4234
23523
45
 sghoeifhsd sfh 
f efhwefoiha sdf
e faehfwoiefhasdf 

                         oiefhwoiehfowiehfskdfh
Backstage Weekly - 21st Sept. 2020
Tags: devops, backstage
Published: 2020-09-24 14:55:00

💡 _[Backstage](https://backstage.io) is a CNCF sandbox service catalog project. It helps companies to catalog their microservices and productize their path to production. Each week, we round up the latest Backstage community news._

---

A hotly anticipated Backstage alpha 22 was released last week.

![screenshots of discord messages where people are asking when the new release will be ready](https://dev-to-uploads.s3.amazonaws.com/i/4q16h1kyh762zy93l5qn.png)

A “single pane of glass” view for services is a core part of the vision for Backstage. Instead of hopping between disparate tools, engineers and operators should be able to quickly search a catalog to find all the info they need.

Alpha 22 is important because it reveals some of this core power.

You can now go from viewing all the services your company runs on the service catalog...

![a list of services in the Backstage service catalog](https://dev-to-uploads.s3.amazonaws.com/i/d2x0q11hciqexbgsabsb.png)

…to viewing the latest builds for a specific service…

![a list of builds for a sample service rendered in Backstage. They are pulled from the GitHub actions API](https://dev-to-uploads.s3.amazonaws.com/i/otcpjyl02uklu51ngm7e.png)

… to viewing its production errors from Sentry…

![a list of errors for the sample service. They come from the Sentry API and are rendered in Backstage](https://dev-to-uploads.s3.amazonaws.com/i/6h3ajoh2vrzwngjmh50g.png)

… or full API docs if you were thinking about integrating with it…

![API docs for the sample service as they appear in Backstage](https://dev-to-uploads.s3.amazonaws.com/i/yfe82e4ndlj77zktw3a0.png)

These features are still in the early stages of development, and they’re certainly rough around the edges, but the framework is there and it’s starting to become real.

I’m excited!

## Merged last week...

59 pull requests have been merged to Backstage in the last week. It’s worth noting that the 3 largest pull requests were contributed by the community, rather than the Backstage core team. Backstage is getting some serious love.

Here are the highlights…

1.  Andrew Thauer (Wealthsimple) added support for GraphQL API types. [#2088](https://github.com/spotify/backstage/pull/2088)
2.  [Björn Marschollek](https://github.com/muffix) (Personio HR, ex. Skyscanner) added support for GitLab in the scaffolder. GitLab users can now template new services via the Backstage interface. [#2426](https://github.com/spotify/backstage/pull/2426)
3.  Jesse Johnson (Booz Allen) is a documentation hero ♥️ who added 700 lines of [quickstart tutorials](https://backstage.io/docs/tutorials/quickstart-app-auth) to the Backstage website. [#2435](https://github.com/spotify/backstage/pull/2435)
Fish Terminal - Edit current command buffer
Published: 2020-09-24 14:50:58

I was having an issue remapping the current command because on Mac OSX the default command is `escape ctrl e` which is not very user friendly. After a bunch of googling I finally came up with a solution. Add this to your ~/.config/fish/config.fish file
```bind \ce edit_command_buffer```
This will map it to ctrl + e which is a lot easier to use.
I was able to find this by running `bind --all` which led me to find the default binding `bind --preset \ee edit_command_buffer`
Angular Speed Improvement Using TrackBy
Published: 2020-09-24 14:42:24

```html
<li 
  *ngFor="let item of items; 
  index as i; 
  
  trackBy: trackByFn">

</li>
```

The [trackBy](https://angular.io/api/common/NgForOf) directive as shown above is a massive speed enhancer. The reason is that the function it points to, tells Angular the "index" column to use to track changes. Just like databases having unique indexes, if we ensure our tranckByFn returns only unique indexes in our array, Angular will only update those that change!

**Paging**

Assume an array of People with firstName, lastName, type and address information. Rendering delays are seen with just 2000 records.  One way to overcome this; is paging, whereby only a small number of records are retrieved at a time. 

Two types of paging designs are 

-Paging in the client
-Paging at the server/endpoint

Either work well but each take a bit of thought for proper implementation. 

The mat-table has a built in [paging control](https://material.angular.io/components/paginator/overview) with a built-in paging event. Assuming that we only get our pages based on a maximum response time in sub second ranges, the page event would keep us able to anticipate the next requests.  It would work like this.

- We can only get 200 records at a time to meet the sub second spec.
- Our paginator page size is set to 10 records per page.
- We have 20 pages of data for the user ready to go.
- As each page event fires, we determine when to get additional data.  
- We ensure our trackBy function is configured and working properly.
- Each new get adds to the existing array, using the unique index formula we described earlier. 
- Angular conserves rendering based on the trackBy, only new items to the array will be rendered, and only when it's needed. 

Sound cool?  [Read this for confirmation](https://www.telerik.com/blogs/blazing-fast-list-rendering-in-angular)

One other consideration: Now that most of us are implementing Async everywhere patterns, we are able to send out multiple Async requests for data which help the equation in that when rendering is needed the data is already there or in a buffer ready to be merged. 

JWP2020 Trackby
Filter an array for unique values in Javascript
Tags: javascript, node, codenewbie, webdev
Published: 2020-09-24 14:32:19

Here are a few ways to filter unique values in javascript.

#### 1. Using Set:

Set is a new data structure introduced in ES6. It is somewhat similar to an array but it does not allow us to store duplicate values.

![Set Example](https://dev-to-uploads.s3.amazonaws.com/i/bhggdjxh7jiylmsn05p3.png)

To filter unique values we pass an array to the `Set` constructor and we frame back an array from the Set object using
`Array.from` method. 

Set works perfectly with the string and number types. But it will not work with objects why? 🤔

Take a look at this example:
![Set with an array of objects](https://dev-to-uploads.s3.amazonaws.com/i/7v3cw3bvltfel6lbrigv.png)

Even though Tommy and Lucy are duplicated. Set was unable to identify them as duplicates.

Take a look at another example:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/juunn4qu40kna7wcqvk4.png)
This is happening because when objects are compared they are compared by reference and not by value. That's why when lucy and tommy are added at first they were not added because they share the same reference. But when I added the tommy value directly it would have created a new reference.

#### 2. Using Filter/Reduce:

![Filter](https://dev-to-uploads.s3.amazonaws.com/i/8nohzkfvpwquoxfl6tf4.png)

We can also use `Array.reduce` to achieve the same kind of result.

Here the idea is ` findIndex ` or ` indexOf ` method would return the index of the first element that matches the criteria. So if the index of ` filter ` is not equal to the index returned by ` findIndex ` then the element is a duplicate.

This type will work for all types but for every element in array, we have to loop through the array again. Imagine where you want to filter in thousands of records. This approach is not an efficient one O(n^2).

#### 3. Flag Approach:

![Flag Approach](https://dev-to-uploads.s3.amazonaws.com/i/oicmehccrmg4w133xb64.png)

This is my favorite way to find unique especially when dealing with a large array of objects. We will loop through the array and in the flag object we will check if the value is already present. If not we will add the value to the flag object and push it to the array else we will just ignore it. In this, we will loop through the array only once so time complexity will be O(n).

What is your favorite way and why? Let us know in the comments.
Updates from 78th meeting of TC39
Tags: javascript, ecmascript, tc39
Published: 2020-09-24 14:29:36

Here is the list of proposals advancements from the latest TC39 meeting.

__To Stage-1:__
* [Error Cause](https://github.com/tc39/proposal-error-cause)
* [Double-Ended Iterator & Destructuring](https://github.com/hax/proposal-deiter)
* [Intl.DisplayNames V2](https://github.com/tc39/intl-displaynames-v2)
* [Intl Locale Info](https://github.com/FrankYFTang/proposal-intl-locale-info)
* [Modulus & Additional Integer Math](https://github.com/phoddie/integer-and-modulus-math-proposal)
* [Standardized Debug](https://github.com/tc39/proposal-standardized-debug)
* [String Dedent](https://github.com/tc39/proposal-string-dedent)

__To Stage-2:__

* [Class static initialization block](https://github.com/tc39/proposal-class-static-block).
* [Intl.Enumeration](https://github.com/tc39/proposal-intl-enumeration)
* [Resizable ArrayBuffers](https://github.com/tc39/proposal-resizablearraybuffer)

__To Stage-3:__

* [`item()`](https://github.com/tc39/proposal-item-method) for indexables.
* [Import Assertions](https://github.com/tc39/proposal-import-assertions).

__To Stage-4:__

- [Intl.DisplayNames](https://github.com/tc39/proposal-intl-enumeration).


<blockquote class="twitter-tweet"><p lang="en" dir="ltr">Proposal advancements from the latest TC39 meeting! 👓 <a href="https://t.co/CrVaIJxzSO">pic.twitter.com/CrVaIJxzSO</a></p>&mdash; Hemanth.HM (@GNUmanth) <a href="https://twitter.com/GNUmanth/status/1309139109009653766?ref_src=twsrc%5Etfw">September 24, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
Take GraphQL into Orbit with Apollo Elements 3
Tags: graphql, webcomponents, opensource
Published: 2020-09-24 14:19:14

---
title: Take GraphQL into Orbit with Apollo Elements 3
published: true
description: Build performant, data-driven apps with Apollo Client and Web Components
tags: graphql, webcomponents, opensource 
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/r3qwfsz9gy2nlndy89gj.png
canonical_url: https://apolloelements.dev/blog/apollo-elements-3/
---

Apollo Elements 3 launches into orbit today with tonnes of new features. There's a [brand new docs site](https://apolloelements.dev) complete with guides, full TypeScript support, app/component generators, and more.

Use Apollo Elements to write GraphQL-based apps using web components as the view layer. Apollo Elements supports [lit-element](https://lit-element.polymer-project.org), [hybrids](https://hybrids.js.org), and gluon out of the box, or you can use the custom-element mixins to add support to any custom-element base class.

Apollo Elements 3 supports the new Apollo Client 3 with all it's enhancements to developer experience.

```ts
import { ApolloQuery } from '@apollo-elements/lit-apollo';
import { customElement, html } from 'lit-element';
import { gql } from '@apollo/client/core';

interface Data {
  name: string;
  greeting: string;
}

interface Variables {
  name?: string;
}

@customElement('hello-query')
class HelloQuery extends ApolloElement<Data, Variables> {
  query = gql`
    query HelloQuery($name: String) {
      name
      greeting
    }
  `;

  render() {
    return html`
      <p>
        ${this.data?.greeting ?? 'Hello'},
        ${this.data?.name ?? 'Friend'}
      </p>
    `;
  }
}
```

## Examples

Check out these example apps:

- [leeway](https://leeway.apolloelements.dev) is a simple chat app that uses [GraphQL subscriptions](https://apolloelements.dev/pages/Using Apollo/subscriptions.html) for real-time updates
- [launchctl](https://launchctl.apolloelements.dev) shows you information about SpaceX launches using the unofficial [spacex.land](https://api.spacex.land/graphql) API

## App Generator

Want to get started writing your GraphQL app in a snap? Try our new app generator

```
npm init @apollo-elements
```

So strap into your crash couch and feel that juice coming on, it's time for a hard burn past the GraphQL gate with [Apollo Elements](https://apolloelements.dev)
SPREAD IN JAVASCRIPT
Tags: javascript, webdev, spread
Published: 2020-09-24 14:14:00

Oh i just finished washing my clothes i need them to be side by side on a line, i’ll spread them right? This sounds quite abstract, let’s see how this relates to javascript.

The javascript **spread** function is denoted by three dots `...`. It was added to JavaScript in ES6 (ES2015) and is useful for adding items to an array, combining array and objects into a place and spreading an array out into a function’s arguments.

```
const array1 = [ 1, 2, 3, 4 , 5]
const array2 = [ 6, 7, 8, 9, 10]
```

```
newArray = [...array1, ...array2]
console.log(newArray) // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
```

Just like that! Our spread function works well as expected. You can go on and on to combine lots of array together into one (side by side 😀)

Interesting stuff, it can also be used in Math functions.

```
const nums1 = [2, 7, 8, 5]
const nums2 = [4, 1, 9, 3]
```

```
const newNums = [...nums1, ...nums2]
console.log(Math.max(...newNums));    // 9
console.log(Math.min(...newNums));    //  1
```

If you tried to log `newNums` max number or minimum number without the spread syntax, you’ll get `NaN`.
Try this; c`onsole.log(Math.min(newNums));    //  NaN`

I’m sure you’re asking why this happened right?. Well, `Math.max` or `Math.min` and any other Math operator expects a list of numeric arguments, not a single array.

This actually gives us a javascript superpower, love to see it! 😀.
YouTube Video | Loading Animation with CSS
Tags: youtube, css, webdev, showdev
Published: 2020-09-24 14:01:23

In this video, we will create a simple Jumping Loading Animation with CSS in this article. 

{% youtube W093NMql0bo %}

Please do like it and [Subscribe](https://www.youtube.com/channel/UCRf7mazcufqZxd2pR3oQJuQ?sub_confirmation=1) to my channel for more videos.
YouTube Video | JavaScript Form Validation
Tags: youtube, javascript, webdev, showdev
Published: 2020-09-24 13:59:16

In this video we will learn to do JavaScript form validations. 

{% youtube ZM08Fz46_FI %}

Please do like it and [Subscribe](https://www.youtube.com/channel/UCRf7mazcufqZxd2pR3oQJuQ?sub_confirmation=1) to my channel for more videos.
YouTube Video | Create Line Through Effect in JavaScript
Tags: youtube, javascript, webdev, showdev
Published: 2020-09-24 13:56:10

In this video, we are going to create an amazing line through effect, with help of CSS and lots of JavaScript.

{% youtube Wvs5idbMLS4 %}

Please do like it and [Subscribe](https://www.youtube.com/channel/UCRf7mazcufqZxd2pR3oQJuQ?sub_confirmation=1) to my channel for more videos.
Set up an Express development environment
Tags: node, todayilearned, express
Published: 2020-09-24 13:43:39

---
published: true
title: 'Set up an Express development environment'
cover_image: 'https://raw.githubusercontent.com/aziaziazi/my-dev.to-posts/master/posts/learn-node/assets/03-cover.jpg'
tags: node, todayilearned, express
series: 'Learn NodeJS'
---

I'm learning NodeJS following Odin's Express course and write here my notes. Today we're setting up the environment to use Express on macOS.

# Overview

We'll need to install:

- **Node and npm** globally. I recommend you to use [nvm](https://github.com/nvm-sh/nvm#installing-and-updating), it will help you manage multiple versions of node on your machine and updating them is needed. For the node version, uses the _LTS_ which is the more stable, or the _current_ with newer features. Npm is installed alongside with node.
- **Express** locally for each app, using _npm_.
- Any **other libraries** like template engines, database drivers, authentication middleware, middleware to serve static files... using _npm_. I won't talk about them here since they really depends of your need.

The **[Express Application Generator](https://expressjs.com/fr/starter/generator.html)** is a handy tool to create a modular skeleton Express app following the _[MVC](https://developer.mozilla.org/en-US/docs/Glossary/MVC)_ pattern. We'll use it here.

# Express Application Generator

After installing npm (with node, using nvm), we can use it to install the Express Application Generator.

We install it globaly (`-g` flag) because it won't be a dependency of our application. Instead, it's run once to create "skeletons" of apps. Run this command:

```bash
npm install express-generator -g
```

Then `cd` where you want to create your app and run:

```bash
express helloNode
```

This should create a folder named "helloNode" with the base express app. `express -h` outputs available options, like installing a template library.

Then enter the folder and install the dependencies:

```bash
cd helloNode
npm install
```

Now ready to go ! Let's run the app with the `DEBUG` environment variable set to the name of your app:

```bash
DEBUG=helloworld:* npm start
```

Our app is running at http://127.0.0.1:3000/ !

# Next

Now our bare app is running, we'll probably need to install others libraries to work with databases, authentication and others middlewares. Then we'll want to prepare the environment on the server to run the app in production.
Who's participating in Hacktoberfest 2020?
Tags: hacktoberfest, opensource, discuss
Published: 2020-09-24 13:35:48

---
title: Who's participating in Hacktoberfest 2020?
published: true
description: Meet other hacktoberfest participants!
tags: hacktoberfest, opensource, discuss
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/2ph1gpihx5yvew74givp.png
---

[Hacktoberfest 2020](https://hacktoberfest.digitalocean.com/) is coming up in one week!

If you're seeking contributors or looking for projects to contribute to this month, check out this thread: 

{% link https://dev.to/devteam/whos-looking-for-collaborators-hacktoberfest-2020-jl89 %}

Regardless of whether or not you've decided on a project to make contributions, this is the place to meet fellow participants! 

Tell us who you are and why you're taking part this year :)