teleren/devto huggingface dataset:
Some important topics in javascript
Published: 2021-05-15 14:06:59

1. Truthy values => '0', ' ', [] those symbol means true value in javascript.
2. Falsy values => false, 0, "", undefined, null, NaN those words means false value in javascript.
3. Null => In JavaScript, null an object. Whereas, null in JavaScript is an assignment value.
4. Undefined => In JavaScript, undefined is a type, It means a variable declared, but no value has been assigned a value.
5. This keyword => Globally anywhere, this keyword will always indicate the global object, 
Example: console.log(this === window) // true.
A react optimization that takes 2 minutes to implement
Tags: react, dom, optimization, html
Published: 2021-05-15 13:51:39

Our applications usually have a list component (which one doesn't?), even the todo apps have it, right?
There's a good proabability that something happens when the user clicks on a list item. There's also a good probabilty that the handler is not implemented the "right" way.

```jsx
const handleClick = (item) => { }
return <div className="listContainer">
    <ul>
    {
      data.map((item,idx) => (
        <li key={idx} onClick={() => handleClick(item)}>{item}</li>
      ))
    }
    </ul>
  </div>;
```

Maybe you've already guessed it, we're attaching a new function to each list item. And what's more, it happens on each render!

We can make use of event bubbling here to fire a common handler for every list item.

Here's how to refactor : 
* Remove the `onClick` from the list.
* The handler function would now receive the item index instead of the entire item, so we need to refactor any code inside the handler assuming we have access to the index, not the array element.
* Attach a `data` attribute to each list item while rendering. Thee value of this attribute would be the array item index (or even any property from inside of the item itself!).
* Attach an `onClick` to the parent of the list items, it could be the parent at any level.

Here's how our code looks after the refactor:
```jsx
const handleClick = (item) => {console.log(item)}
return <div className="listContainer">
    <ul onClick={(e) => handleClick(e.target.dataset.id)}>
    {
      data.map((item,idx) => (
        <li key={idx} data-id={idx}>{item}</li>
      ))
    }
    </ul>
  </div>;
```

This didn't take too long but benefit get big especially with  larger lists.
Cutting delivery time
Tags: mongodb, fiverr, freelancing
Published: 2021-05-15 13:36:33

I write queries in MongoDb for my clients. I was having this problem of sending snapshots of query outputs to my client to cross-verify if things were okay as per requirements before delivering them.

Since it was taking too much time I was trying to find an easy way. That is when it struck me. If you want the client to see the output without actually getting access to your queries, just go ahead and create a VIEW in the client's database. 

The client can view the output instantly and you will be happy you saved time too. 

Please let me know if there are any cons to this approach. 

Happy programming !!!
Optional Chaining (?.) Refactoring
Tags: javascript, refactoring, es2020
Published: 2021-05-15 13:34:23

**The optional chaining operator returns the value of an object property when the object is available and `undefined` otherwise.** `.?` is similar to the standard `.` chaining operator, with an added check if the object is defined.

It enables you to **write concise and safe chains of connected objects** when some of those objects can be `null` or `undefined`. Before the introduction of optional chaining in ES2020, the `&&` operator was often used to check if an object is available (`obj && obj.value`).

You can simplify existing checks to use the optional chaining pattern, for example:

* Change `x && x.a` to `x?.a`
* Change `x != null && x.a` to `x?.a`
* Change `x !== null && x !== undefined && x.a` to `x?.a`
* Change `x && x.a && x.a.b && x.a.b.c && x.a.b.c.d` to `x?.a?.b?.c?.d`

One thing to be aware of is that this refactoring replaces falsy checks with nullish checks. For example, when `a && a.b` is replaced with `a?.b`, it changes the execution for certain types, e.g. the empty string `""` is falsy but not nullish.

However, in many cases these semantic changes will lead actually to more correct behavior. For example, `text && text.length` will return the empty string, but not its length, whereas `text?.length` will return `0` for the empty string.

Learn More: [Optional Chaining (MDN)](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining), [Nullish (MDN)](https://developer.mozilla.org/en-US/docs/Glossary/Nullish), [Truthy (MDN)](https://developer.mozilla.org/en-US/docs/Glossary/Truthy), [Falsy (MDN)](https://developer.mozilla.org/en-US/docs/Glossary/Falsy) 

P42 now supports converting many of the above checks into the optional chaining pattern. [Try it out in the P42 VS Code Extension!](https://marketplace.visualstudio.com/items?itemName=p42ai.refactor)
Introduction to Opensource
Tags: github, opensource, git
Published: 2021-05-15 13:26:51

"  The power of Open Source is the power of the people.The People rule.                            ~Philippe Kahn "
The term opensource is often referred to anything that is freely available to modify or innovate. There are alot of software and projects that termed opensource or in other words the souce code of those projects or software is freely available, They could either modify those or suggest any changes which they like. Some examples of opensource softwares that are very popular are VLC media player , Libra office , firefox and many more. The most fasinating thing about these opensource project is that these project are open for contribution i.e. anyone can devote their skills and effors in the development of the project.
<hr>

# Ways to Contribute in any opensource project
<br>
There are alot of things that you could do to start your journey in open source.you can start contributing by :
- Creating your own opensource projects.
- Contributing to existing opensource project.

As a beginner, there are certain prerequisites that one should have before starting to contribute such as
- You should be familiar with some programming language or 
  some technology.
- basic knowledge of Git and Github.
- Fundamentals should be clear for your skill.

Once you know everything mentioned above you are ready to go.It is not necessary that one should know programming language since opensource is something that is open to everyone irrespective of whether the person belongs from a technical background or not. You could start with creating some issues, contributing to documentation of project, managing the analysis tools for project, you can also create banners and images for the project or some logo. So in short every skill is welcomed in opensource.
<hr>
# Why to Contribute to opensource softwares
There are many reasons for contributing to open source softwares some of which are:
- The ability to understand code and write maintainable clean 
  codes.
- Opportunity to work in a community of like minded people 
  from all over the world.
- High learning curve through the ability to apply what you 
  have learned on realtime projects.
- Recognition of work that you have done in the project.
- The Ability to work remotely in an organization.
- Helps to maintain a network among the community.
![meme](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/udqsmya7wncdo4t7ju4p.jpeg)
<hr>

# OpenSource Events
There are alot of beginner friendly and intermediate events that help you to gain some comfort with opensource development.They would help you to gain the necessary skills.
some of which are:
- Girlscript summer of code
- Hacktoberfest
- Google summer of code
- Google summer of Docs
- Fossasia codeheat
- 24 pull request
- script winter of code
<hr>
Do share Your feedback with me in comments.You can connect with me on  
 [linkedin](https://www.linkedin.com/in/honeybhardwaj/)
 [Github](https://github.com/honeybhardwaj/)
webpack 5 & next.js 10 - how to add resolve fallback to config
Tags: webpack, nextjs, javascript
Published: 2021-05-15 13:22:37

Have you ever got:
```

    error - <some-3rd-party-lib>:0

    Module not found: Can't resolve 'fs' // or process, Buffer, etc.

```

error in your nextjs app; and the all the solutions on stack overflow were pointing to something like:

```js
// webpack.config.js
{
  resolve: {
        fallback: { "fs": false }
  }
}
```

when you didn't even have `webpack.config.js`?

# Quick solution

It's all because nextjs is hiding its webpack configuration. It's simplifying for most use cases, but a bit of a pain in some others. The quick solution for it is to this into `next.config.js`:
```
module.exports = {
  future: {
    webpack5: true,
  },
  webpack: (config) => {
    config.resolve.fallback = { fs: false };

    return config;
  },
};
```

# Longer overview

{% youtube qJ0M_pKDuhw %}

# Links
* my [video course on webpack](https://bit.ly/webpack-course)
GCP DevOps Certification - Pomodoro Twelve
Tags: googlecloud, devops, sre, certification
Published: 2021-05-15 13:14:08

# System Complexity

The [Coursera SRE programmes](https://www.coursera.org/learn/site-reliability-engineering-slos/home/welcome) shifts on to discussing system complexity and the introduction of the initial Service Level Indicators. Google recommend that around 1 to a maximum of 3 SLI's per user journey should be enough.

Thoughts behind limiting the number to a maximum of 3 SLI's:

* Not all metrics make could SLIs
* Each SLI increases the cognitive load on the operations team
* More SLIs lower the signal-to-noise ratio (which can impact resolution time)

You may also have lots of user journey's through your complex system still resulting in many SLI's - however each journey should be assessed as to whether or not it is "important enough" to be tracked by a SLI.

### An important caveat

Other metrics you might be already recording still have value. The above recommendation isn't one that should be used to ditch your existing metrics.

A deterioration in SLI's is an indicator that something is wrong, once that deterioration is bad enough to provoke some operational response that the other monitoring systems will really help in ascertaining a cause.

# Managing complexity with aggregation

You might have multiple user journeys.

Take example an online store. People can view a home page that lists products. They can search for products. They can browse products by category and they can see the individual product details.

Each of those could be separate user journeys and result in multiple SLI's. However if you aggregated what you collect (in terms of SLI) from each journey then the SLI could be determined as an overall "Browse" SLI.

The Google course provides this example:

![Google SLI aggregation](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7breejm1dur0uem89rtc.png)

If all have availability and latency SLI's then they could be aggregated.

### Another important caveat

Summing events together can work well for similar user journeys. However it might not fit a scenario where there is a large disparity between rates of the user journey such as request rates differing significantly. 

IE. The number of **valid** events (thinking back to previous pomodoros) for a small _but_ significant user journey could get lost in the noise of higher rate user journey.

If you face that then multiplying the SLI's by a weight based upon their portion of the whole might be on option for normalising data across and aggregation.
Understanding Kubernetes: part 42 – Tools - Encrypt your Secret with kubeseal
Tags: kubernetes, devops, docker, beginners
Published: 2021-05-15 13:06:50

---
title: Understanding Kubernetes: part 42 – Tools - Encrypt your Secret with kubeseal
published: true
description: Serie of sketchnotes about Kubernetes. Explaining in a visual way Kubernetes principles.
tags: Kubernetes, DevOps, Docker, beginners
series: Understanding Kubernetes in sketchnotes
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/16m7916oy9pxpli8berr.jpeg
---

Understanding Kubernetes can be difficult or time-consuming. In order to spread knowledges about Cloud technologies I started to create sketchnotes about Kubernetes. I think it could be a good way, more visual, to explain Kubernetes (and others technologies).

We continue the serie of Sketchnotes about Kubernetes, with some useful tools to know.
In this sixth part we will see: Kubeseal.
This tool allows you to encrypt your Kubernetes secret into SealedSecret (in order to store them to Git).

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/16m7916oy9pxpli8berr.jpeg)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uzlvtb80en021x45r2kn.jpeg)

If you are interested, I published all the sketchnotes on Kubernetes (and new ones!) to make a "book" of 165 pages: ["Understanding Kubernetes in a visual way"](https://gumroad.com/aurelievache#uCxcr).

As usual, if you like theses sketchnotes, you can follow me, and tell me what do you think. I will publish others sketchs shortly :-).
Rest API Boilerplate for Node.js 🤖🔥
Tags: node, javascript, webdev
Published: 2021-05-15 12:43:34

Are you also tired of writing the same code for every project? 😔

I am, anyway. That's why I created a __Rest API boilerplate for Node.js__!

Only __3 simple steps__ to use them 🔥
___
###[Rest API Boilerplate Repo (GitHub)](https://github.com/lorenzhohmann/rest-boilerplate)
___

I know that there are already such boilerplates, however, they are simply much too large and extensive for most purposes.

My boilerplate is as small as possible, but still offers you a meaningful structure for your projects.

# Features ⚡
- Dynamic creation of routes
- Preinstalled [nodemon](https://www.npmjs.com/package/nodemon) for faster development
- [REST Client](https://marketplace.visualstudio.com/items?itemName=humao.rest-client) for testing routes
- 404 Route Handling
- Simple MySQL Database file
- Enviroment Variables (.env) for security (API keys, - password,...)
- Colored error and log messages

# How to use 📑
It could not be simpler:
1. clone the repository with `git clone https://github.com/lorenzhohmann/rest-boilerplate.git`
2. navigate in the directory and execute `npm install`
3. Rename *_.gitignore* to *.gitignore*

So, if you have ideas for further features or suggestions for improvement: let me know.

>If you like what I do, leave me a follow on [Twitter](https://twitter.com/webdeasy) and on my [web development blog] (https://webdeasy.de/)

Until then, happy coding and stay healthy! 😊
Restart Policies Docker Compose
Tags: docker, devops, tutorial, beginners
Published: 2021-05-15 12:17:29

There are mainly 4 different restart policies.

# "no" 

It means never attempt to restart the container if it stops or crashes. 
All we have to do is to add `restart: 'no'` in our docker-compose.yml file. 

> Remember to give single quotes `'no'` because in yaml file, if we give `no` without quotes, it is treated as false.

## Sample code example

```yaml
version: '3'
services: 
  redis-server:
    image: 'redis'
  node-app:
    restart: 'no'
    build: .
    ports: 
      - "4001:8081"
```

# always

If our container stops for any reason, always attempt to restart the stopped container.
All we have to do is to add `restart: always` in docker-compose.yml file.

## Sample code example

```yaml
version: '3'
services: 
  redis-server:
    image: 'redis'
  node-app:
    restart: always
    build: .
    ports: 
      - "4001:8081"
```

# on-failure

Only restart the container, if it stops with an error code. 

> Error codes are non zero codes like 1, 2, 3, 4,....

> Code 0 indicate there are no error and process is exited.

All we have to do is add `restart: on-failure` to our docker-compose.yml file.

## Sample code example

```yaml
version: '3'
services: 
  redis-server:
    image: 'redis'
  node-app:
    restart: on-failure
    build: .
    ports: 
      - "4001:8081"
```

# unless-stopped

Always restart unless the developers forcibly stop the process.

All we have to do is add `restart: unless-stopped` in docker-compose.yml file.

## Sample code example

```yaml
version: '3'
services: 
  redis-server:
    image: 'redis'
  node-app:
    restart: unless-stopped
    build: .
    ports: 
      - "4001:8081"
```

**Note** : Always run `docker-compose up --build` after making any changes to the .yml file, or any project directory file.

[Docker official Documentation](https://docs.docker.com/config/containers/start-containers-automatically/)

{% github Rohithv07/Docker %}
Save the HTTP request body received by Go Gin to AWS Kinesis Firehose
Tags: aws, go
Published: 2021-05-15 11:10:35



I wanted to run Kinesis Firehose in Go, but I couldn't find any sample code.
Here is a simple example.

```go
package main

import (
	"fmt"
	"encoding/json"
	"github.com/aws/aws-sdk-go/aws"
	"github.com/aws/aws-sdk-go/aws/awserr"
	"github.com/aws/aws-sdk-go/aws/session"
	"github.com/aws/aws-sdk-go/service/firehose"
	"github.com/gin-gonic/gin"
)

type EntryRecord struct {
    PostBodyField string `json:"entry"`
	Host string `json:"host"`
	RemoteAddr string `json:"remoteaddr"`
}

const (
	deliveryStreamName = "firehose-dest-bucket"
)

func handleEntry(c *gin.Context) {

	buf := make([]byte, 2048)
	n, _ := c.Request.Body.Read(buf)
	body_filed := string(buf[0:n])
	fmt.Println(body_filed)

	entry_record := EntryRecord{
		PostBodyField: body_filed,
		Host: c.Request.Host,
		RemoteAddr: c.Request.RemoteAddr,
	}

	firehose_svc := firehose.New(session.New(), aws.NewConfig().WithRegion("ap-northeast-1"))
	record := &firehose.Record{}
	json, _ := json.Marshal(entry_record)

	record_byte := append([]byte(json), []byte("\n")...)
	
	record.SetData(record_byte)

	_, err := firehose_svc.PutRecord(
		&firehose.PutRecordInput{
			DeliveryStreamName: aws.String(deliveryStreamName),
			Record:             record,
		},
	)
	if err != nil {
		if awsErr, ok := err.(awserr.Error); ok {
			print(awsErr.Message())
		}
	}
}

func main() {
    r := gin.Default()
    r.POST("/submit", handleEntry)
    r.Run() 
}
```

## Prerequisites
- You have already set up Kinesis Firehose
- You have already set up S3 bucket to store the request body data.


The following is the part that is sending data to Firehose.

```go
&firehose.PutRecordInput{
			DeliveryStreamName: aws.String(deliveryStreamName),
			Record:             record,
		},
```		

The argument Record is a structure defined in the SDK.

```go
	record := &firehose.Record{}
	json, _ := json.Marshal(entry_record)

	record_byte := append([]byte(json), []byte("\n")...)
	
	record.SetData(record_byte)
```
## Reference

[AWS Go SDK](https://docs.aws.amazon.com/sdk-for-go/api/service/firehose/)
Daily Developer Jokes - Saturday, May 15, 2021
Tags: jokes, dailydeveloperjokes
Published: 2021-05-15 12:00:07

---
title: "Daily Developer Jokes - Saturday, May 15, 2021"
description: "Check out today's daily developer joke! (a project by Fred Adams at xtrp.io)"
series: "Daily Developer Jokes"
cover_image: "https://private.xtrp.io/projects/DailyDeveloperJokes/thumbnail_generator/?date=Saturday%2C%20May%2015%2C%202021"
published: true
tags: #jokes, #dailydeveloperjokes
---

Generated by Daily Developer Jokes, a project by [Fred Adams](https://xtrp.io/) ([@xtrp](https://dev.to/xtrp) on DEV)

___Read about Daily Developer Jokes on [this blog post](https://xtrp.io/blog/2020/01/12/daily-jokes-bot-release/), and check out the [Daily Developer Jokes Website](https://dailydeveloperjokes.github.io/).___
### Today's Joke is...
![Joke Image](https://private.xtrp.io/projects/DailyDeveloperJokes/public_image_server/images/5e1258a63bab5.png)

---
*Have a joke idea for a future post? Email ___[xtrp@xtrp.io](mailto:xtrp@xtrp.io)___ with your suggestions!*

*This joke comes from [Dad-Jokes GitHub Repo by Wes Bos](https://github.com/wesbos/dad-jokes) (thank you!), whose owner has given me permission to use this joke with credit.*

<!-- 
Joke text:
___Q:___ What did the array say after it was extended?

___A:___ Stop objectifying me.
 -->
7 rare website with awesome free fonts
Tags: webdev
Published: 2021-05-15 10:46:01

#Google Fonts
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yhwd1k08m2me3m8yp8gj.png)
Making The Web More Beautiful, Fast, And Open 
Through Great Typography.

link:- https://fonts.google.com/

#Fontshare
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uzzv3laky7yx5b8irs7i.png)
Fontshare Is A Free Fonts Service From ITF, Making Quality 
Fonts Accessible To All. It's A Growing Collection Of 
Professional Grade Fonts That Are 100% Free

link:- https://www.fontshare.com/

#Fontspark
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ujeg5l8jbhme0gstxh5v.png)
Helping Designers Discover The Perfect Font For Their 
Next Design Project.

link:- https://fontspark.app/

#Fontesk
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dbwuk656i30vvdorjfk3.png)
Download Thousands Of Free Fonts For Commercial 
And Personal Use. A Unique Collection Of Free Fonts 
To Download, The Best And New Serif, Sans Serif, Script

link :- https://fontesk.com/

#Font Squirrel
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/21qqmjcf6rlxvmo809cz.png)
Font Squirrel Scours The Internet For High Quality, 
Legitimately Free Fonts . Download Thousands Of 
Completely Legal, High Quality, Free Fonts.

link :- https://www.fontsquirrel.com/

#Pangram Pangram
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ei22uy5pdgnpp0hrbgks.png)
We Provide Trend-Conscious Quality, Free To Try Fonts 
For Designers. Each Typeface, Each Glyph Is Crafted 
With Great Care And Attention

link :- https://pangrampangram.com/

#Behance Font
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/iem5t6ip8yn2ikgbga7o.png)
Adobe Fonts. Enjoy Quick Browsing, Easy Use In Desktop 
Applications Or On The Web, And Endless Typographic 
Inspiration. 

Link:- https://www.behance.net/search?search=free+font 

**Note:-** visit my youtube channel for frontend tutorials

**subscribe to my youtube channel :-** https://www.youtube.com/channel/UCR64vQptythbJ1SmI-ub0Rg

**Follow on instagram for more content like this :-** https://instagram.com/innocentcoderr

**Resent post :-** 
{% link https://dev.to/innocentcoder/6-website-to-find-stock-videos-5a4d %}
Cloud Drops - Building an Event-Driven workflow with Event Grid
Tags: serverless, integration, azure, eventdriven
Published: 2021-05-15 11:51:53

Have you heard about Azure Event Grid, but not exactly sure what it is or how you could use it? In this Cloud Drop, we'll create an event-driven process using Azure Event Grid, Azure Storage Queues and Azure Functions. Get ready to learn all about Event-Driven workflows, Event-Handlers, Topics, Subscriptions and more!

{% youtube GtjXHcVCFsY %}
A livestream on Mental Health - Mental Health Awareness Week
Tags: mentalhealth, wellbeing, health, people
Published: 2021-05-15 11:49:42

MentalHealth​ - A concept that often has stigma surrounding it, or a concept that is misunderstood.  In this livestream, Chris will be joined by several friends and colleagues as they talk through their own mental health stories.

{% youtube _mL-O7IqXVM %}
Social Opinion with Jamie Maguire
Tags: cloud, azure, saas, twitter
Published: 2021-05-15 11:35:03

In this session, Chris is joined by Jamie Maguire - Developer, Microsoft MVP (AI) & Pluralsight Author. Jamie shares how he built a SaaS (Software as a Service) in my own time using .NET and Azure. The platform lets you analyse Twitter, grow, maintain and manage your Twitter account. If you've considered building your own SaaS platform, then stay tuned for this episode!

{% youtube LI2Lh7P-oMg %}