teleren/devto huggingface dataset:
Compare objects in JS
Tags: javascript, node, webdev
Published: 2021-09-12 08:38:31

How can you compare to objects with same properties  cause we know both the objects all though same values but sits at different memory location hence they will be not equal. 

```js
var user1 = {name : "nerd", org: "dev"};
var user2 = {name : "nerd", org: "dev"};
var eq = user1 == user2;
alert(eq); // gives false
```
> Taken from Andrei course for Advance Javascript 

Well a simple solution could be this 
```js
var user1 = {name : "nerd", org: "dev"};
var user2 = {name : "nerd", org: "dev"};
var eq = JSON.stringify(user1) == JSON.stringify(user2);
alert(eq); 
```
By converting the objects into sting the values can be compared but we have to be care full of the spaces and cases to be exact in both the objects.

A deep dive discussion for the same can be found on the stackoverflow page. [The Page](https://stackoverflow.com/questions/1068834/object-comparison-in-javascript)
What did you teach this week?
Tags: teachingthisweek, discuss, teaching
Published: 2021-09-12 07:56:31

# What did you teach this week?

> To teach is to learn twice over.
– Joseph Joubert

Teaching is the best way to reinforce the concepts learnt. Teaching increases our knowledge as well as that of others. We simultaneously learn from others too! So why not give an helping hand in this give and take of knowledge? Let us all begin a wave of positivity by encouraging everyone to teach!
![teach-teaching](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2ghar8u2u60vjcn9tdxu.gif)
 

Whatever you have taught this week, however small, counts as a big help to the entire community!
So please comment below, your teachings in this week!
Create a self verifying type library with Zod
Tags: typescript, cicd, schemavalidation
Published: 2021-09-12 07:35:52

---
title: Create a self verifying type library with Zod
published: true
description: 
tags: typescript,cicd,schemavalidation
//cover_image: https://direct_url_to_image.jpg
---


If you use Typescript, you probably wished it could do 2 more tings:
* Verify at run time if a type matches your schema
* Make sure no unexpected fields exist in objects.

## Zod

Zod ([github](https://github.com/colinhacks/zod)) allows you to do exactly that.

```typescript
import { z } from "zod";

// creating a schema for strings
const foodNameSchema = z.string();
foodNameSchema.parse("tuna"); // => "tuna"
foodNameSchema.parse(12); // => throws ZodError
```

Zod can be used to create Typescript types, so we also have all the compile time goodness.

```typescript
export type FoodName = z.infer<typeof foodNameSchema>;
```


Now, some might say parsing will add performance impact. This might matter to you.
But in this article, we show a different usage that dodges that completely.

## Self verifying type library

Chances are you have an internal library to share your common types. Especially if you are or intend to use micro frontends.

What we have been doing in my team is to use Zod's parsing to make sure this type library is always up to date with our live formats.

By ensuring all production types match our schemas exactly, we can rely on our types 100%. Call it contract testing, but we also use the same schemas in our code.

This also has no runtime impact. In fact, our other projects need not even import Zod.

## Usage

Any typescript project can import the types or Zod schemas at will. Pure JS projects can also use Zod schemas, if desired.
Zod can be exported to JSON schema, so other languages could also benefit.

During deployment, the type library crawls and checks the types of API and CSR initial props, making sure the schemas are all correct.
My weekly journal in taskforce 3.0
Tags: programming, softskills, bootcamp
Published: 2021-09-12 07:22:10

Week two in the taskforce was good, also different from the previous week, this week we had covered interesting topics both soft and technical.

We started the week with a challenge with my teammates of lifting a stick from up to down with only one finger, it was quite a bit challenging because sometimes we ended up lifting the stick, but in the end, it was all about organization and communication, we made it. the stick was on the floor.

VIRTUAL MEETINGS

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3287xuiuopq1qwd02p7k.jpg)

I learned how to be prepared and get well equipped before, during, and after the meeting. it was a good skill to have because it will help me to act more professionally in future meetings.

DevOps

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c9a10yvmg7j1u443xgxh.png)

In the technical session for this second week, we covered Different DevOps processes, how to make any project agility, and do different automation. it was a fun and interesting skill to know more about in the whole week


Code challenge.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t1ifmi7qkcuu1jhxonbr.jpg)

In this week the code challenges, we were given in this week was tough compared to the previous week's challenges, but I tried my best to complete the challenges.

Intercultural communication.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bwpon2r1en10herj5elz.png)

On Friday we learned about German Stereotypes and also the difference between German Stereotypes and east Africa Stereotypes and also I was required to come up with a hand sign to ask the awesomity team if they know about the sign on the evening session and later on the evening I had a presentation of what I covered on DevOps.

Basically, that's how my whole week went.

See you.
Ubuntu 20.04, After installation actions
Tags: ubuntu, php, setup, preparephpdevmachine
Published: 2021-09-12 07:08:41

### Hello, when its come to the time preparing you'r machine after a fresh setup it takes some time or couple of days for some guys. Therefore, here are some installation lines which may helpful for some guys.


* sudo apt-get update && sudo apt-get upgrade -y
* sudo snap install code --classic
* sudo snap install skype --classic
* sudo apt install git-all
* sudo apt install npm
* sudo apt install vim
* sudo apt install apache2
* sudo ufw app list
* sudo ufw enable
* sudo ufw allow 'Apache'
* sudo add-apt-repository ppa:ondrej/php 
* sudo apt install libapache2-mod-fcgid
* sudo apt install software-properties-common
* sudo apt install mysql-server

### To change the root password
* sudo mysql 
* ALTER USER 'root'@'localhost' IDENTIFIED WITH caching_sha2_password BY 'desired_password';

* sudo apt-get install sshpass

### To install composer

> https://getcomposer.org/download

### Generate ssh key for github

* ssh-keygen -t ed25519 -C "your_email@example.com" && ssh-add ~/.ssh/id_ed25519
// to show the key run : "cat ~/.ssh/id_ed25519.pub" copy-paste in github settings SSH key

### Install various php versions along with some extensions

* sudo apt-get install php8.0 libapache2-mod-php8.0 php8.0-bcmath php8.0-cli php8.0-common php8.0-curl php8.0-dev php8.0-gd php8.0-intl php8.0-json php8.0-ldap php8.0-mbstring php8.0-mysql php8.0-opcache php8.0-pgsql php8.0-soap php8.0-sqlite3 php8.0-xml php8.0-zip  
  

* sudo apt-get install php7.4-bcmath php7.4-cli php7.4-common php7.4-curl php7.4-dev php7.4-gd php7.4-intl php7.4-json php7.4-ldap php7.4-mbstring php7.4-mysql php7.4-opcache php7.4-pgsql php7.4-soap php7.4-sqlite3 php7.4-xml php7.4-zip   
  

* sudo apt-get install php7.2 php7.2-fpm php7.2-mysql libapache2-mod-php7.2 -y php7.2-apcu php7.2-cli php7.2-common php7.2-curl php7.2-imagick php7.2-intl php7.2-json php7.2-mbstring php7.2-mcrypt php7.2-memcache php7.2-xdebug php7.2-xml php7.2-yaml php7.2-zip  
  

* sudo apt-get install php7.0 php7.0-fpm php7.0-mysql libapache2-mod-php7.0 libapache2-mod-fcgid -y php7.0-apcu php7.0-cli php7.0-common php7.0-curl php7.0-imagick php7.0-intl php7.0-json php7.0-mbstring php7.0-mcrypt php7.0-memcache php7.0-xdebug php7.0-xml php7.0-yaml php7.0-zip  

### If you want to install PHP5.6 as well 

* sudo apt-get install python-software-properties && sudo add-apt-repository ppa:ondrej/php && sudo apt-get -y update && sudo apt-get install -y php5.6 && sudo apt-get install php5.6-fpm php5.6-mysql libapache2-mod-php5.6 libapache2-mod-fcgid -y php5.6-apcu php5.6-cli php5.6-common php5.6-curl php5.6-imagick php5.6-intl php5.6-json php5.6-mbstring php5.6-mcrypt php5.6-memcache php5.6-xdebug php5.6-xml php5.6-yaml php5.6-zip

### If you're fan of ZSH then

* sudo apt-get install zsh
* sh -c "$(wget https://raw.github.com/ohmyzsh/ohmyzsh/master/tools/install.sh -O -)"

### Install zsh plugins.

> If you also like zsh plugins, you can edit the ~/.zshrc like: 
insdie ~/.zshrc replace plugins value with (git z zsh-autosuggestions)


### install xdebug

* sudo apt-get install php{version_number}-xdebug
Custom Bullet Point Colors With CSS
Tags: css
Published: 2021-09-12 06:59:57

By default, HTML bullet points inherit the color of their text.

By default, HTML bullet points inherit the color of their text.

However, there are times when you might want to make your bullet points a different color than the inheritance.

So, let's start by removing the default bullet point altogether:

```css
ul {
    list-style: none;
}
```

Next, let's replace the removed bullets with new ones, making sure to specify a new color:

```css
li::before {
    content: "\2022";
    color: #00f; /* Blue */
}
```

That funny little `\2022` Unicode character renders as this bullet point symbol: "•".

You can also use `\25E6` for a hollow bullet point ("◦") and `\25AA` for a boxed bullet point ("▪").

## Customizing numbered list colors

Coloring numbers in numbered lists is similar to coloring bullet points.

First, remove the default number:

```css
ol {
    counter-reset: li;
    list-style: none;
}
```

Then, just add a display, position, and color to some new numbers that will automatically increment with each `<li>` element:

```css
li::before {
    color: `#00f`; /* Blue */
    content: counter(li);
    display: inline-block;
    margin-left: -1em;
    width: 1em;
}
li {
    counter-increment: li;
}
```

If you want to learn more about counters in CSS, W3Spoint has a [nice write-up](https://www.w3spoint.com/css-counters) on them. But exploring them further is a bit beyond the scope of this tutorial.

## Conclusion

I often find it necessary to modify the color of my bullet points when I'm building sites and apps, so I hope this helps you too!
Open Source Dev 101
Tags: opensource
Published: 2021-09-12 06:52:25

Hello World! My name is Minsu Kim. I am a student who currently enrolled in 5th semester in Computer Programming Analysis program at Seneca college. I am in Korea and very happy to take a semester remote in Korea with spending time with my family.

My previous web programming courses WEB222 and WEB422 have taught by David Humphrey who is instructor of OSD course. I had a chance to watch his previous OSD course lecture video on YouTube and decided to take this course. Because the previous course assignments and labs are identical and professor expect us to follow some sort of guideline. However, OSD course provides me a chance to participate existing real project and freedom.

Throughout this course, I would like to accomplish participating, experiencing, and learning various open source development with peer developers. The projects that I want to work on is automation such as trading bot in cryptocurrency. The project ["binance-trade-bot"](https://github.com/edeng23/binance-trade-bot) provides automated trade in Binance that adjusts trading strategy to buy and sell crypto currency. The Binance is the largest cryptocurrency exchange in the world. Unlike stock trading, cryptocurrency allows to user trade in 24/7 which automation trading tool is required for user.
How to send request to join a organization in github
Tags: github, request, organization
Published: 2021-09-12 06:40:04

I found an organization in github which I want to join but I dont know how to send request to the organization to let me join the organization.

If you know and you reply to me then it would be a greate help.

Thanks for reading my post. Please press the like and the unicorn button while going.
Thank you.
Darsh kulthia.
1 thing that got me software developer job
Tags: programming, webdev, career, codenewbie
Published: 2021-09-12 06:19:41

Hello dev!

There is one important thing that got me first software developer job.

I'm not going to explain with long letters. But will tell you the key point. It is not hard work or dedication or any others.

For me, it was that I coded programs for free. 

I learned first. I applied it with small projects.
Then, I asked for real-world projects from my friends' family businesses and others sources.

Actually, I did not get paid from it. 
I did not ask for it also.
But I got a lot of experience from building that projects.
Also, I'm more confident to apply software developer job application.

<br>
The key point to get a job for me is doing real-world projects with FREE. 
<br>
In this way, I got client networks, developer networks, experiences, and jobs. 

I hope this will help you to see my way to get a job. 

Pls Share us How you get your first job in this comment section.

Thanks for your time.
Create a Netflix clone from Scratch: JavaScript PHP + MySQL Day 48
Tags: php, javascript, webdev, tutorial
Published: 2021-09-12 05:49:09

Netflix provides streaming movies and TV shows to over 75 million subscribers across
the globe. Customers can watch as many shows/ movies as they want as long as they are
connected to the internet for a monthly subscription fee of about ten dollars. Netflix produces
original content and also pays for the rights to stream feature films and shows.

In this video,we will be   Showing the poster image when the preview video has ended
{% youtube FYmh58q-YUI %}



If you like my work, please consider
[![Buy me a coffee](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jm11knj7d8zwcvo150q2.png)](https://www.buymeacoffee.com/cglikpo)
so that I can bring more projects, more articles for you

If you want to learn more about Web Development, feel free to [follow me on Youtube!](https://www.youtube.com/c/ChristopherGlikpo)
Concat() Array Method in JavaScript 🚀 
Tags: webdev, javascript, beginners
Published: 2021-09-12 05:37:48

  Can we merge two arrays in one array in JavaScript??? 
  Yes, It's definitely possible by concat() array method. 
  So, Let's start to learn what is concat() array method and how it works. 

• What is Concat() Array 
  method ?
=> In this method two or more 
   than two arrays merge into 
   a single array.
   The new array serialized 
   according to original 
   arrays.

• Syntax of Concat() method
  array1.concat(array2)

• Example 

  ![example 1](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/eb4esdvcjw6md5omh6hb.jpg)

• Explanation :-
  (1) In the above example I 
      simply created two 
      arrays and name of 
      arrays are 'arr1' and 
     'arr2' respectively.

  (2) Then I stored some 
     values in that arrays and 
     values are [1,2] and 
     [3,4].
  
  (3) Now I was used cancat() 
     method to merge both 
     arrays. 

  (4) According to above 
    example I wrote arr1 first 
    and then used concat() 
    method and pass as 
    parameter second array and 
    the output is [1,2,3,4].  

  (5) Because doing this it's 
    return arr1 first then 
    arr2. If I wrote arr2 
    first then concat method 
    used the output is 
    different. See below code

    ![example 2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/otzxwn7tdcfjn8c7eeyz.jpg)
   
  (6) Now, you can see the 
    output different, output 
    is [3,4,1,2].

 • The concat() methods also take individual as arguments like below. 

   ![example 3](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k7f2x1xc6b213lah0dnp.jpg)

Happy coding.... 
👉 Stay tuned with us for more 
  JavaScript topics.
🙏 Thanks for reading...
RestaurantWebsite
Tags: html, css, javascript
Published: 2021-09-12 05:37:34

As a beginner I wanted to experience, explore and learn how html,css work so I found this great Youtube tutorial (https://youtu.be/QYNsJYwEdEQ) in which he shows how to build a static food website.
This pandemic has unwillingly forced us to become a "self taught" And I really feel grateful that there are some free courses available to guide us on our journey.
This project not only taught me new concepts but also boosted my confidence and enthusiasm to learn more. 
SOURCE CODE:https://github.com/ShrushtiAsutkar/RestaurantWebsite
Live Demo: https://raw.githack.com/ShrushtiAsutkar/RestaurantWebsite/main/index.html
Do it give a star ,to motivate this beginner.
Thankyou!![61067-website-design](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ivrq8jrh6u6ksmwyj24b.gif)
Instagram clone with React
Published: 2021-09-11 19:28:41

---
title: Instagram clone with React
published: true
description: 
tags: 
//cover_image: https://direct_url_to_image.jpg
---
Yesterday, I started working on a pet project to build a light Instagram web clone.

Aside from being a fun project to build, it'll serve as a case study for the Instagram UI.

To start with, I checked out the assets (icons and logos) the amazing team at Facebook used and discovered something interesting.

It is common for websites to store individual assets as files,

![assets](https://raw.githubusercontent.com/usmansbk/blog/main/markdowns/imgs/assets.png)

When you visit such websites, your browser will make multiple network requests to fetch each asset. Users with slow internet will notice some icons load faster than others.

Their solution was to store all the images in a single file called a sprite sheet.

A sprite sheet is a series of images combined into a larger image.

![assets](https://raw.githubusercontent.com/usmansbk/blog/main/markdowns/imgs/sprite.png)

This allows your browser to fetch your assets in a single network request, making all icons and logos available at the same time. Including assets of pages you haven't visited yet. Making your app perform better offline.

This will require the developer to know the location of each image bounding rectangle. This isn't a problem if you have access to the design file (e.g Figma) of the spritesheet.

You then extract assets using CSS properties like this:

```html
<style>
    .asset {
        background-image: url(/sprite.png)
    }

    .black-pad-lock-icon {
        background-position: -130px 0;
        background-repeat: no-repeat;
        height: 96px;
        width: 96px;
    }
</style>

<span class="asset black-pad-lock-icon"></span>
```

This is a great approach as long as you know the exact location and dimensions of each image.

Check out my Instagram clone authentication pages where I used the spritesheet approach to create the icon component.

[Live Link](https://frosty-jang-51ab28.netlify.app/)
Execute Async Server Function from Client Side
Tags: react, socket, express, node
Published: 2021-09-12 05:22:53

> Execute server's asynchronous functions from client-side

Often it happens while writing web application that you need to make HTTP requests to fetch, create, update or delete data from database.

With RealSync, you wouldn't have to remember all those HTTP endpoints, and perform actions as if you're executing server functions from client-side.

RealSync uses web socket to make contact with the server and execute asynchronous function and returns promise which you can await in the client side. Here is an example of a server code, you can connect it with `Express` or `Koa`, if you want.

```js
const http = require('http')
const app = http.createServer()
const { RealSync } = require('../packages/server/lib')

const realsync = new RealSync(app, '*')

realsync.register('profile/setup', async (client) => {
	const firstName = await client.run('profile/firstname')
	const lastName = await client.run('profile/lastname')

	return { firstName, lastName }
})

app.listen(8080, () => {
	console.log('8080')
})
```

This will register a service “add” in realsync and accept two parameters, **a** and **b**.


And here is a client demonstration using React:

```js
import { RealSync } from '@realsync/react'
const realsync = new RealSync('http://localhost:8080')

function App() {
	useEffect(() => {
		// this will register services

		realsync.register('profile/firstname', () => {
			return prompt('Enter first name')
		})

		realsync.register('profile/lastname', () => {
			return prompt('Enter last name')
		})
	}, [])

	const Start = async () => {
		const profile = await realsync.service('profile/setup')
		console.log('profile', profile)
	}

	return (
		<div>
			<button onClick={Start}>Start</button>
		</div>
	)
}

```

I would love to have feedback forum you guys. I’ve more to add in this library.

GitHub: https://GitHub.com/xencodes/realsync
Rules for good developer
Tags: programming, productivity, beginners
Published: 2021-09-12 04:09:15

While working as Software developer in one the startup company this rules was shared my by fellow Senior developer while explaining the rules for becoming good developer may be it can help you to grow career in software field :)
## Rules
* Ask more,
* Facing problem? Find your solution, if you solution don't work then ask,
* Quality code
* if you don't know the solution then don't complain, you see a bug? Don't throw someone who wrote that code. You fix it, you find a solution then complain.
* Do you need anything that is stopping you from working? Demand it.
* I(Senior Developer) did not response? Keep asking.
* You need a solution or response show up in call, start a meeting.
* Time don't work for us? Okay, give up your Friday afternoon, Saturday afternoon pull me(Senior Developer) in call then talk.

Again hope it helps.
Reducing Docker Container Size
Published: 2021-09-12 03:42:21

 
### Two Ways to reduce the size of a docker container
 1. Reduce the size of the layer
 2. Reduce the number of layers


### But what is a layer?
A layer is a change applied to an image. Every command you specify **( FROM , RUN , COPY , etc.)** in your Dockerfile causes the previous image to change, thus creating a new layer. 


![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/31mzennx0l6sj5jubq3e.jpg)
<p align = "center">
Fig.1 - Dockerfile Layer credit: Agent of Change's YouTube
</p>


## Multistage Builds
The best way to reduce the number of layers is to use a Multistage build. This turns our Docker build into 2 stages. The first stage to be built will be the exe file and the second stage will be an image using that exe file.
 

The following code shows how to make a multistage Docker.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/22elgvwvg4cxn3ob2qz2.jpg)

<p align = "center">
Fig.2 - Dockerfile Multistage Code Example: Agent of Change's YouTube
</p>

Each **FROM** creates a new stage. The first stage is tagged as ''builder" by the code ``` FROM golang 1.7.3 AS builder ```  command. The code afterwards complies the code and all its dependencies together with the **RUN** command.

The second **FROM** creates a new stage from the lightweight alpine container and then copies the complied code from the "builder" stage we created previously. The container will be much smaller because the second stage doesn't have to create the complied code; instead it can use the code from the first stage.



Credit for all screenshots posted here are from the amazing YouTube channel **Agent of Change**. This post is just meant to summarize information taken from his video. Please go check it out and it is linked under Resources.

### Resources 
[Agent of Change's video on Docker Layers and Multistage Builds](https://www.youtube.com/watch?v=1tHCVIO8Q04&ab_channel=AgentofChange)

[DevOps Directive's video on Docker Multistage Builds](https://www.youtube.com/watch?v=2KzDMD5Qk2k&ab_channel=DevOpsDirective)