teleren/devto huggingface dataset:
Interview JS Part 5 - Map, Reduce, Filter
Tags: javascript
Published: 2021-01-01 07:59:02

Sorry, this article came to the blog a lot later than expected. We shall cover a small topic in this part regarding most use functions or let's most used and useful thing while writing JS and particularly React.

### What is a Map?

Map according to the definition should be mapping some value to something. Similarly here too we have a function mapping to each individual element in the array. Map in JavaScript binds to each value and the value can be considered as the returned value of that function and thus the Map returns the array of function bind values.

If the above seems something not very obvious to you let's go through an example:-

```javascript
array.map(function(elem, index, array) {
      ...
}, thisArg);
```

Let's do it by halving each element of the array in JavaScript

```javascript
const numbers = [4, 8, 12, 14];
const halves = numbers.map(x => x / 2);
// halves = [2, 4, 6, 7]
```

### What is Filter?

Filter in real life means to remove something that does not follow a particular function. Similarly, in JS we have a filter that is used to remove the none required elements in the array. 

Filter returns an array of filtered elements according to the given callback function. Similar to Map it's basically putting each element on test for a condition.

```javascript
array.filter(function(elem, index, array) {
      ...
}, thisArg);
```

Let's write a code that removes the element below 5:-

```javascript
const num= [1, 2, 5, 10, 15];

const nums= num.filter(newNum => newNum > 5);
// nums is [10,15]
```

### What is Reduce? 

This is something special! Generally, people use it to just find the sum of the array but this provides much more than this.

By meaning, Reduce is used to reduce something to something else. 
The most famous example is obvious to find the sum of the array.

```javascript
array.reduce(function(prevVal, elem, index, array) {
      ...
}, initialValue);
```

```javascript
const tot = [1, 2, 3, 4].reduce((sum, value) => sum + value, 1);
// 10
```

So now what else can be done apart from this, apart from multiplying too!!

We have something called compose which uses reduce:-

```javascript
const compose = (...fns) => x => fns.reduceRight((v, f) => f(v), x);
```
```javascript
const add = n => n + x;
const mult = n => n * y;
const addThenmult = compose(
  mult,
  add
);
addThenmult(2); // 6
// ((2 + x = z) * y)
```

#### Chaining Promises ( Got to know from [Source](https://medium.com/@bojangbusiness/javascript-functional-programming-map-filter-and-reduce-846ff9ba492d))

```javascript
let itemIDs = [1, 2, 3, 4, 5]; 
itemIDs.reduce((promise, itemID) => {
  return promise.then(_ => api.deleteItem(itemID));
}, Promise.resolve());
```

The above code resolves to:- 

```javascript
Promise.resolve()
.then(_ => api.deleteItem(1))
.then(_ => api.deleteItem(2))
.then(_ => api.deleteItem(3))
.then(_ => api.deleteItem(4))
.then(_ => api.deleteItem(5));
```

Making promises in a chain is really a unique way to use reduce.

**Stay Tuned for other articles on InterviewJS.**
7.css - My first published package
Tags: dohackathon, css, showdev, webdev
Published: 2021-01-01 07:56:57

🎉 Happy New Year 🎉 and welcome to another post of mine. This time, a hackathon submission and a showcase of my recent work of **7.css** - a CSS design system for building components in Windows 7's flair.

## What I built

### Category Submission: 
Program for the People

### App Link
* https://win7-css-i5fco.ondigitalocean.app
* https://khang-nd.github.io/7.css

### Screenshots
![1](https://dev-to-uploads.s3.amazonaws.com/i/d7jv5q0dc6tohqjengkp.png)
![2](https://dev-to-uploads.s3.amazonaws.com/i/gvc511w7u2xjvoxoindb.png)

### Link to Source Code
https://github.com/khang-nd/7.css

### Permissive License
MIT

## Background
I happened to come across these 2 awesome projects: [98.css](https://jdan.github.io/98.css) and [XP.css](https://botoxparty.github.io/XP.css), and as a loyal fan of Windows, this inspired and triggered my enthusiasm to work on a similar project. And here we are.

### How I built it 
The backbone and system are technically there already in the former 2 projects, I just developed on top of them. However, I got to know some cool techs they used in the projects such as the [EJS](https://ejs.co/), which is used to generate examples with embedded  JS templating, or the [PostCSS](https://postcss.org/), which is used to transform CSS with some JS plugins. Also, this is my very first open-sourced package published for use.

Enjoy :)
Happy New Year 2021 to Ruby developers!
Tags: ruby, rails
Published: 2021-01-01 07:51:42

---
title: Happy New Year 2021 to Ruby developers!
published: true
description: 
tags: ruby, rails
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/6crpqhjpyjv1ipbip5a5.png
---

Dear Ruby developers, I wish us a healthy 2021 and hope that our Ruby application projects will help in any way to make this world a better place. 

We are not superheroes, nor doctors and nor frontline workers. On the other hand, our work is important and can in its own way make a difference. 

A application can provide the solution to many problems large or small. Too often we underestimate the value of a creation. 

For 2021, use the fun, ease and power of Ruby to create something useful. And while you're at it why not create something extraordinary!

Extraordinary could mean simply putting a smile on the faces of your users. 

Have a good Ruby 2021 development!
If not ternary operator then what?
Tags: javascript, codequalit, syntax
Published: 2021-01-01 07:46:51

Like many languages, JavaScript has the conditional (ternary) operator. What's wonderful about this operator is that it can be nested in expressions and it returns a value. 

### So what is the right way to use it in JavaScript?
### Should we try to avoid it?

While writing code I found something that can replace ternary operator under certain conditions.

### Traditional use:
    const foo = a ? a : b;
    const bar = c ? true : false;
    const baz = c ? flase : true;

### What I found was:
    const foo = a || b;
    const bar = !!c;
    const baz = !c;

### There is one more, `&&` (AND) operation.
    const boo = a `&&` 'Hello';

Here the AND operator will short-circuit if the left operand is false, it acts identically to the first part of the ternary operator.

Do you know more? Please do let me know in the comments.
2020 Year-End Thoughts
Tags: 2020
Published: 2021-01-01 07:39:00

Year 2020. I know this year would live in infamy for me and my generation. Memes have been comparing staying at home similar to being drafted in the military during WW2. The beginning of the year looked like a decent 10 minutes introduction for a Black Mirror episode and everyone was in the brink of paranoia. Like many others, I was stressed whenever I see Covid infections and deaths just sky-rocket everyday.

It was early March when we received the memo that we will have a work from home setup. At first, I thought that this will be just a 1 week thing. Turns out, it was for the entire year.

I took this opportunity to learn new stuff and develop my skills (while making sure I put my Netflix account to good use lol). 

For starters, I continued studying mobile development. I was planning to do a mobile app for a Capstone Project for my master's. It was the 2nd quarter of the year - contact tracing and quarantine passes was all the rage. I made two mini-projects - QR Code Quarantine Pass and Bluetooth POC for contact tracing. Though I'm not sure if these apps will make the cut for my master's, I'm happy with the fact that I built something using Flutter. 

Nearly the same time, I decided to put up a dev journal. I had an existing account in Medium and published a couple of articles in the past but I realized I wanted a targeted audience so I switched here in dev.to. Currently, I have a decent amount of articles here hoping that I'll be benefitting from them in the future or someone who needs dev how-to's and guides will find it useful.

At the beginning of third quarter, I was so stressed on the state of the economy and thought about getting a side hustle in case something bad happens to my day job. I began browsing Upwork and noticed there's a lot of demand for data extraction. I learned webscraping (wrote an [article](https://dev.to/jengfad/webscraping-beginner-s-thoughts-15cn) about it) and tried my luck in getting a side project. Fortunately, my hardwork in studying python/selenium, bidding and submitting proposals paid-off and I had three short-term projects.

Towards the end of the year, I got a potential gig that required me to learn Laravel and Vue.js. The gig never materialized but I did not regret spending time in studying these two frameworks.

As of now, I just finished an Ethereum and React course from Udemy. I'm currently building some sort of Cryptokitties clone based on ERC-1155. This tech made me realize the potentials of blockchain and I'm thinking of pursuing this as one my main skillset.

I had downtime or some sort of writer's block every now and then. There are days that I just wanted to make it through my day job and watch a movie at the end of the day. On these moments, I just let the laziness drain from my body hoping that tomorrow I will be refreshed.

2020 taught me that I can learn anything if I just put my mind into it.
Portfolio site using DigitalOcean App Platform
Tags: dohackathon
Published: 2021-01-01 07:38:45

## What I built
Portfolio site using `Gatsby.js` and DigitalOcean app platform

### Category Submission: 
Personal Site/Portfolio

### App Link
https://devfolio-4eleg.ondigitalocean.app/

### Screenshots
![portfolio](https://user-images.githubusercontent.com/49580849/103435222-cfe60980-4c31-11eb-94e9-03c32e271544.png)

### Description
Developer portfolio site

### Link to Source Code
https://github.com/secretshardul/devfolio

### Permissive License
MIT

## Background
Needed a portfolio site for a long time. The hackathon gave it a nudge : )

### How I built it 
Just connect App platform with the gatsby repo. The deployment is automatic.

### Additional Resources/Info
Credits: [Devfolio by Ryan Fitzgerald](https://github.com/RyanFitzgerald/devfolio)
My Gatsby site stopped working, and how I fixed it
Tags: gatsby
Published: 2021-01-01 07:18:21

---
title: My Gatsby site stopped working, and how I fixed it
published: true
description: Fixing a graphql error in Gatsby with Wordpress headless CMS
tags: Gatsby
//cover_image: https://direct_url_to_image.jpg
canonical_url: https://www.alexnielsen.net/blog-posts/gatsby-stopped-working/
---

__*TL:DR*
Enable Public Introspection should be checked in WordPress plugin administration__

My blog is running on Gatsby with Wordpress as a headless CMS for my old blog posts. I recently went to update a few things, just fixing typos in blogs, no code changes, and the darn thing would suddenly not compile!

I kept getting

```
ERROR #11321  PLUGIN
"gatsby-source-graphql" threw an error while running the sourceNodes lifecycle:
warn The gatsby-source-graphql plugin has generated no Gatsby nodes. Do you need it?

```

and

```
ERROR #85923 GRAPHQL
There was an error in your GraphQL query:
Cannot query field "wpgraphql" on type "Query".

```

I figured this meant that Gatsby was not getting any response from my Wordpress site.  I went back to the egghead.io training I used to help me learn how to build the site and realized the WPGraphQL plugin used in the video was on version 0.7.0 and I apparently updated at some point to version 1.0.5. In the GraphQL settings on the left side of the Wordpress administration page, down at the bottom there is a field called 'Enable Public Introspection' which was not clicked. It basically says by default, queries need to be authenticated unless this box is checked. So I checked it, meaning you don't need authentication to hit the wordpress API anymore. Well, it worked. Presumably, you can send some auth info in your query if you need to keep it private but for me just posting blogs I'm not worried about it.
My javascript / tech / web development newsletter for 01-01-2021 is out!
Tags: javascript, tech, webdev, discuss
Published: 2021-01-01 07:18:14

---
title: My javascript / tech / web development newsletter for 01-01-2021 is out!
published: true
description: A roundup of all the best javascript, tech and web development links posted to my linkblog in the past week
tags: javascript, tech, webdev, discuss
---
In this week’s edition:

SEO engineers, UIs in films, msg brokers, web components, perf, systems design, bash monitoring, futureOfTech, Apple keyboard, maps, cool repos & projects, etherium, code art, Github, with videos&pods...

https://markjgsmith.substack.com/p/mark-smiths-podcast-01-01-2021

Would love to hear any comments and feedback you have.

Happy new year! :)

[@markjgsmith](https://twitter.com/markjgsmith)
Remove duplicates from an array using indexOf() and filter() methods
Tags: javascript, node
Published: 2021-01-01 06:42:43

**There are many ways to remove duplicates from array in JavaScript but today I will use indexOf and filter methods!**

The indexOf() method returns the index of the first occurrence of an element in an array. For example:

``` 
let chars = ['A', 'B', 'A', 'C', 'B'];
chars.indexOf('B'); 
```
```
Output: 1
```
To remove the duplicates, you use the filter() method to include only elements whose indexes match their indexOf values:
```
const arr = ['A', 'B', 'A', 'C', 'B'];
const uniqueArr = arr.filter((c, index) => {
    return arr.indexOf(c) === index;
});
console.log(uniqueArr);
```
```
Output: [ 'A', 'B', 'C' ]
```

To find the duplicate values, you just need to reverse the condition:

```
const arr = ['A', 'B', 'A', 'C', 'B'];
const uniqueArr = arr.filter((c, index) => {
    return arr.indexOf(c) !== index;
});
console.log(uniqueArr);
```
```
Output: [ 'A', 'B' ]
```
10 Best YouTube Channels for Machine Learning in 2021
Tags: machinelearning, deeplearning, datascience
Published: 2021-01-01 05:50:04

When we talk about online learning, we can’t ignore YouTube, because YouTube is a great platform and has some best channels for learning machine learning. 

That’s why I am gonna discuss the Best YouTube Channels for Machine Learning. So give your few minutes and find out some best YouTube channels for machine learning.

Now without further ado, let’s get started-

##**1. Sentdex**

This channel was created by Harrison Kinsley on December 16, 2012. Sentdex has approx 994k subscribers. Harrison Kinsley has created tutorials for machine learning, deep learning, facial recognition, and reinforcement learning.

So if you are a beginner in machine learning and want to learn machine learning from scratch, then definitely you should check this channel.

The best thing about Harrison Kinsley is that he provides clear explanations of complex concepts. He has created a series of machine learning where he explained machine learning algorithms such as K-nearest neighbors etc.
**[Click to continue reading...](https://www.mltut.com/best-youtube-channels-for-machine-learning/)**
Firefox dev tools - Animations
Tags: css
Published: 2021-01-01 05:42:49

First of all, HAPPY NEW YEAR!

![Happy new year!](https://media.giphy.com/media/xUySTMO8XWIRjp0w4o/giphy.gif)

It's been such a crazy year this 2020 thing...
Can't even believe it's finally done, but I have a feeling this mayhem is not done.

So let's start the year on a positive note, I found another cool thing in Firefox dev tools, the animation debugger.

It's literally amazing! It can modify, debug, and timeframe animations.

The tool looks like this:

![Firefox animation](https://cdn.hashnode.com/res/hashnode/image/upload/v1609077361340/jW_mXV46n.gif)

## Firefox animation debug tool

To find the animation tool we simply have to open the developer tools:

- **Mac**: `Shift` + `⌘` + `J`
- **Windows/Linux**: `Shift` + `CTRL` + `J`

Then we can inspect an element on the page that has an animation. And open the Animation tab.

![Firefox animation debug tool](https://cdn.hashnode.com/res/hashnode/image/upload/v1609076786462/_HdJDoOVQ.png)

On the left you see the animation in the Keyframe animation in my case it convert a square to a round div, in three steps.

You can use the keyframe section to make modifications to each keyframe.

![Firefox keyframe convert](https://cdn.hashnode.com/res/hashnode/image/upload/v1609076985484/9oTR_s2kO.png)

Then on the right, you will see how long the whole animation takes in the purple bar, in my case 2000ms (2s).

![Firefox timeline](https://cdn.hashnode.com/res/hashnode/image/upload/v1609076953941/LC7DiDyI5.png)

And in the bottom bit, we see the animation flow, you can see I use an ease-in-out so it's a smooth line.

![Firefox animation timeline](https://cdn.hashnode.com/res/hashnode/image/upload/v1609077144650/72aiX7Cj_.png)

Then on top, we can control the animation to debug it, even more, we can go back to step 0, pause/play, and set the speed.

All and all, it's a super useful tool to debug and work on your animations.

### Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on [Facebook](https://www.facebook.com/DailyDevTipsBlog) or [Twitter](https://twitter.com/DailyDevTips1)
Things I try (my resolution for 2021)
Tags: javascript, java
Published: 2021-01-01 05:18:37

Things I want to try this year.

Language

- TypeScript
- Scala
- Elm
- GraphQL
- Go
- Python
- Ruby
- Rust

Frameworks

- Next.js
- Nuxt.js
- React.js
- Play Framework
- Ruby on Rails
- Django
- WordPress
- Laravel

Middleware? etc.

- Docker, WSL
- Terraform
- Kubernetes
- Firebase
- Heroku
- Netlify
- Vercel
- CloudFlare
- GCP
- PostgreSQL
- Nginx Various things I don't know now, but I have to touch AWS even if I don't say anything.

CI/CD

- CircleCI
- Azure Pipelines
- GitHub Actions
- Testing and so on
- SaaS
- Stripe
- Algolia
- imgIX

Editors

- JetBrains
- Visual Studio Code
- Vim

Other
- Deno
- Node.js
- WebRTC
- Material-UI
- Bootstrap
- CSS
- PWA
- AMP
- Google Analytics, GAS, GColab
- OBS
- Unity
- DDD Again, Domain Driven Design
- Competitive Programming etc

I look forward to working with you in 2021.
Add Meta Tags and Title Dynamically for SEO using Angular Component
Tags: seo, angular, 100daysofcode, typescript
Published: 2021-01-01 05:16:27

The blog is all about Meta Tags. In a simple way meta tags are used for search engine optimization to describe the page content. Meta tags always inside the `<head>` section.

We are going to set the most common three header meta `description`, `title` and `tag content` dynamically.

Import the predefined Meta Service in your component :

```
import { Meta, Title } from '@angular/platform-browser';
```

Inject the Service in Constructor :

```
constructor(private title: Title, private meta: Meta) {}
```

Add `title` and `meta tag` in `ngOnInit()` using `setTitle` and `updateTag` :

```
ngOnInit()
{ 
  this.title.setTitle('Angular Overview'); 
  this.meta.updateTag({ 
  name:'author',content:'angulartpoint.com'}); 
  this.meta.updateTag(
  {
    name:'keyword',
    content:'angular overview, features'
  }); 

  this.meta.updateTag(
    {
      name:'description',
      content:'It contains overview of angular application'
    }); 
}
```
Happy coding!!!
Micro Frontends Patterns#10: Edge Side Includes
Tags: microservices, microfrontends, javascript
Published: 2021-01-01 05:14:45

Edge Side Includes (ESI) is a technology or a markup language used to assemble content at the edge layer, such as CDN.

Specifically, content is resolved at the Edge Side by writing the following

```html
<html>
  <body>
    This is my fragment: <esi:include src="https://our.fragments.com/fragment.html"/>
  </body>
</html>
```

ESI is a relatively old technology, the specification was [developed](https://www.w3.org/TR/esi-lang/) by a group of companies like Akamai and Oracle. It's implemented by some CDN vendors like Akamai, Cloudflare, Fastly, Varnish, and others. In the context of Micro Frontends, this is used to compose Fragments.

## Pros and Cons

There are a limited number of CDN vendors that can be used, so you need to consider whether you can tolerate that before implementing. And you need to be careful about ESI's resource acquisition logic differs depending on the vendor.

Also, since ESI is a simple specification, it may not be flexible. For example, data retrieved on the server side cannot be passed to Fragments on the Edge. Furthermore, it is difficult to render applications that require CSR like SPA.

From a development point of view, local development can be tricky. In practice, you may need to consider a wrapper such as [nodesi](https://github.com/Schibsted-Tech-Polska/nodesi). (Personally, I also don't like the fact that the application logic depends on the Edge Side specification).

However, the fact that it can be written simply and has minimal features such as Fallback and Timeout is an advantage. It is also attractive that you don't have to think about the server while you don't need to care about Fragments on client-side code. Also, since you can cache a part of UI, ESI is unique in that you can take a flexible caching strategy, such as when you want to cache only static content on a screen where dynamic and static content live together.

## Summary

In this article, we have shown how ESI can be used to compose Fragments on the Edge Side. Although the simplicity of ESI makes it not very flexible, it is a good option if it fits your use case.
Laravel 6/7 secret route for maintenance bypass!
Tags: laravel, package, opensource, php
Published: 2021-01-01 04:41:07

From Laravel 8, you can bypass maintenance mode only for you with a secret route! It's a really nice and flexible feature to bypass maintenance mode only for you and your developer when the application in maintenance mode. We can use this kind of features in our existing laravel 6, laravel 7 projects with a lightweight laravel package called [haruncpi/laravel-maintenance](https://github.com/haruncpi/laravel-maintenance). Let's see how we can use it our project.

Install package
```
composer require haruncpi/laravel-maintenance
```
Now replace the default maintenance middleware in `app/Http/kernel.php`

```php
//\App\Http\Middleware\CheckForMaintenanceMode::class,
\Haruncpi\LaravelMaintenance\Middleware\MaintenanceMode::class,
```
Installation finished!

- Enable maintenance mode with secret route
```
php artisan down --secret="mysecretkey"
```
- Maintenance bypass
```
https://example.com/mysecretkey
```
Here `mysecretkey` is a secret key which we defined earlier in artisan down command. Make sure you make it complex for better security.

After visiting the secret route, you will get the application live only in your side and the rest of the world gets it in maintenance mode.

Doc & GitHub repository: [haruncpi/laravel-maintenance](https://github.com/haruncpi/laravel-maintenance)