teleren/devto huggingface dataset:
This week’s newsletter is out! (16-04-2022) - Git push brain
Tags: javascript, tech, webdev, discuss
Published: 2022-04-16 06:39:51

---
title: This week’s newsletter is out! (16-04-2022) - Git push brain
published: true
description: Another week of great javascript, tech and web development links.
tags: javascript, tech, webdev, discuss
---

Git push brain

https://markjgsmith.substack.com/p/saturday-16th-april-2022-one-liner?s=w

Would love to hear any comments and feedback you have.

[@markjgsmith](https://twitter.com/markjgsmith)
Building a Realtime Chat App with React, Laravel, and WebSockets
Tags: react, laravel, messaging, javascript
Published: 2022-04-16 06:34:33

You use real-time communication every day. It is the simultaneous exchange of information between a sender and a receiver with almost zero latency. Internet, landlines, mobile/cell phones, instant messaging (IM), internet relay chat, videoconferencing, teleconferencing, and robotic telepresence are all examples of real-time communication systems.

In this tutorial, you’ll learn how to build a real-time public chat app using React.js, Laravel, and Ably. You’ll use React.js to build the frontend/UI and Laravel to interact with Ably Realtime APIs to facilitate real-time communication. Anyone on the internet would be able to use this app to post messages to a public chat room and talk anonymously with other connected users. By building this kind of application, you’ll learn about the relevant concepts for building applications that need real-time data transfer.

Read the full blog on [Ably](https://ably.com/blog/building-a-realtime-chat-app-with-react-laravel-and-websockets).

Thanks for reading 💜

---

I publish a [monthly newsletter](https://www.ravsam.in/newsletter/) in which I share personal stories, things that I am working on, what is happening in the world of tech, and some interesting dev-related posts which I come across while surfing on the web.

Connect with me through [Twitter](https://twitter.com/ravgeetdhillon) • [LinkedIn](https://linkedin.com/in/ravgeetdhillon) • [Github](https://github.com/ravgeetdhillon) or send me an [Email](mailto:ravgeetdhillon@gmail.com).

— [Ravgeet](https://www.ravgeet.in/), *Full Stack Developer and Technical Content Writer*
Đại Phú Gia chuyên thi công sơn công nghiệp
Published: 2022-04-16 06:30:24

Sơn ĐẠI PHÚ GIA /g/11dztsdwvl chuyên về sơn Epoxy, chất phủ bề mặt trong công nghiệp, và được “Ủy Quyền Thi Công” bởi các công ty sơn công nghiệp hàng đầu tại Việt Nam như sơn Jotun, sơn KCC ... đã thực hiện trên 500 dự án lớn nhỏ về sơn công nghiệp cho nền sàn nhà xưởng, nhà kho, nhà công nghiệp, nền tầng hầm, khu vực văn phòng
Địa Chỉ : 29/247 Nguyễn Văn Quá, Khu phố 2, Phường Tân Hưng Thuận, Quận 12, Thành phố Hồ Chí Minh, Việt Nam
Phone : 0986 476 846

Chi tiết liên hệ tại : 
Social :
https://twitter.com/soncongnghiep
https://www.pinterest.com/soncongnghiep/_saved/
https://www.twitch.tv/soncongnghiep/about
https://www.linkedin.com/in/soncongnghiep/
https://soncongnghiep.tumblr.com/
https://flipboard.com/@soncongnghiep
https://gab.com/soncongnghiep
https://soncongnghiep.netboard.me/
Home Angular How to make a Custom directives in angular with example
Published: 2022-04-16 06:10:08

What is directives in angular ?
So directives are the features of angular with help of which we can do modification , to change the behaviour of the HTML elements or we can say DOM elements .

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jsrioo3i2onwlt78jvau.png)
 

for more visit 
https://www.technoknowledge4k.xyz/2022/04/how-to-make-custom-directives-in.html
Renew Detox Supplement For Loss Your Fat Exclusive Lowest Price Purchase?
Published: 2022-04-16 05:43:11

  As my previous concept proved, an intention is great. To beg the question, that also got me considering my own kind of Renew Detox. That's a staggering figure wherever the Renew Detox community isn't dependent on one person. That can be annoying. At any rate, what is Renew Detox? 

Click Here to Buy :- https://ipsnews.net/business/2022/02/25/renew-detox-is-its-ingredients-really-detoxify-your-body-and-lose-weight-before-buy-read-warnings-and-complaints/
https://sites.google.com/view/renewdetoxprice/
https://groups.google.com/g/renew-detox/c/nkK8IM0bXto
https://renewdetox.tumblr.com/
https://renewdetoxprice.wordpress.com/
https://promosimple.com/ps/1e049/renew-detox
https://caramellaapp.com/renewdetox/93qrVkJyQ/renew-detox
https://www.scoop.it/topic/renew-detox-reviews
https://the-dots.com/projects/renew-detox-supplement-for-loss-your-fat-exclusive-lowest-price-purchase-712243
https://telescope.ac/renew-detox
What is this in JavaScript?
Tags: javascript, beginners, webdev, programming
Published: 2022-04-16 04:46:00

In JavaScript, the this keyword operates a little differently than in other languages. There are also some distinctions between stringent and non-strict modes.
The this keyword refers to different objects depending on how it is used:

- In an object method, this refers to the object.

- Alone, this refers to the global object.

- In a function, this refers to the global object.

- In a function, in strict mode, this is undefined.

- In an event, this refers to the element that received the event.


**this in a Method:**
When used in an object method, this refers to the object.

```
const person = {
  firstName: "John",
  lastName: "Doe",
  id: 5566,
  fullName : function() {
    return this.firstName + " " + this.lastName;
  }
};
console.log(person.fullName()) //output : John Doe
```
**this Alone:**
When used alone, this refers to the global object.
Because this is running in the global scope.
In a browser window the global object is [object Window]

```
let x = this;
console.log(x) //output is :[object Window]
```
 In strict mode, when used alone, this also refers to the global object:

```
"use strict:";
let x = this;
console.log(x) //output is :[object Window]
```
**this in a Function(Default):**
In a function, the global object is the default binding for this.
In a browser window the global object is [object Window]:

```
function myFunction() {
  return this;
}
myFunction() //output is : [object Window]
```
**this in a Function (Strict):**
JavaScript strict mode does not allow default binding.
So, when used in a function, in strict mode, this is undefined.

```
"use strict";
function myFunction() {
  return this;
}
myFunction() //output is : undefined
```
**this in Event Handlers:**
In HTML event handlers, this refers to the HTML element that received the event:

```
<button onclick="this.style.display='none'">
  Click to Remove Me!
</button>
```
All about blockchain
Tags: blockchain, beginners, webdev, programmingl
Published: 2022-04-16 03:57:17

To being learning about blockchain, you must start off by learning the basics of Blockchain and cryptocurrency. You can begin this by joining various blockchain communities and visiting Bitcoin forums on Reddit, crypto vlogs on YouTube, and Blockchain news on Coindesk.
Video link: https://shrinke.me/88U2
Javascript Stack Data Structure.
Tags: javascript, datastructure, stack, callstack
Published: 2022-04-16 03:45:00

**Stack**:
Javascript is a single-threaded language, which means it will use a single call stack to manage execution context.

- Whenever function is called, then javascript engine will create a global execution context in call stack, on top of global execution context it will create a function context in the same call stack.
- call-stack follows last in first out order(LIFO) to pop off the execution context from the call stack.

Example of stack data structure:
**Note**: Execute below code in java script compiler and check the console output.

```
var Stack=function(){
  this.count=0;
  this.storage={};
  this.size=function(){
    return this.count;
  }
  this.push=function(item){
    this.storage[this.count]=item;
    this.count++;
  }
  this.peek=function(){
    return this.storage[this.count-1]
  }
  this.pop=function(){
    if(this.count==0){
      return undefined;
    }
    this.count--;
    var result=this.storage[this.count]
    delete this.storage[this.count]
    return result;
  }
}

var stack=new Stack();
console.log(stack.size())
stack.push(1);
stack.push(2);
console.log(stack.size())
console.log(stack.peek())
console.log(stack.pop())
console.log(stack.size())
console.log(stack.peek())
```

> _Any comments or suggestions are welcome._
Viral VPN
Tags: vpn
Published: 2022-04-16 03:39:36

[Viral VPN](https://play.google.com/store/apps/details?id=vpn.fastvpn.unlimitedvpn.securevpn)
Visit This Link
https://play.google.com/store/apps/details?id=vpn.fastvpn.unlimitedvpn.securevpn
When Blockchain meets Artificial Intelligence ?
Tags: blockchain, python, devops, ai
Published: 2022-04-16 03:25:55

## What is Blockchain ?

**Blockchain is a decentralized, distributed public network that allows anyone to record transactions across many systems on the network which cannot be altered.**

For Example : Consider a Google Doc. When we create a document and share it with a group of people, the document is distributed instead of copied or transferred.

This creates a decentralized distribution chain that gives
everyone access to the document at the same time. No one
is locked out awaiting changes from another party, while
all modifications to the doc are being recorded in real-time, making changes completely transparent. Of course,
blockchain is more complicated than a Google Doc.

The data is stored in "blocks" of information and
then linked together in a permanent "chain."

When a new block is added to the chain, it makes
the previous blocks even harder to modify, which
helps each block become more and more secure
over time.

**Advantages of Blockchain** :

- Trust
- Efficiency
- Immutable or un-corruptable record of data
- Decentralization
- No central authority
- Transparency
- No transaction cost

**Disadvantages of Blockchain** :

- 51% Attacks
- Difficulty in data modification
- Losing Private keys
- Permissioned Blockchains
- Scaling
- Upfront Costs
- Storage

## **AI and Blockchain** :

- Al can be used to optimize energy consumption
- Ledger data scalability
- Real-time flagging of Fraudulent transactions
- Al bot networks
- Decentralized Al marketplaces
- Secure accumulation of Data
- Security and Privacy

## **Blockchain and AI** :

- Increase Al effectiveness
- Increase artificial trust
- Decentralized computing to train models
- Data protection and monetization
- Trustworthiness

**Applications** :

- Decentralized & Collaborative Al
- Improved business data models
- Globalized verification systems
- Smart Computing Power
- Smarter finance
- Creating Diverse Data Sets
- Data Monetization and Protection
- Intelligent predictive analysis
- Digital Intellectual Property Rights
Create Excel-like javascript spreadsheet in less than 10 lines of code
Tags: javascript, webdev, react, excel
Published: 2022-04-16 03:02:02

Spreadsheets are one of the most important format that stores and calculates data, and are also key components of products that focus on online document.

In this blog, we will see how to create a rich-featured javascript spreadsheet in just 10 minutes.

This is what it will look like when you finish:

![spreadsheet](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a0m2iat97d0vucfcp3er.png)

## Setup

Let's start by creating an empty project with `create-react-app`

If you already have a react project, you can skip this step.

```
npx create-react-app my-spreadsheet
```

or if you are using `yarn`

```
yarn create react-app my-spreadsheet
```

Then, go into `my-spreadsheet` folder, install our spreadsheet library

```
# using npm
npm install @fortune-sheet/react
# or using yarn
yarn add @fortune-sheet/react
```

## Using the library

Replace `src/App.js` with the following content

```js
import { Workbook } from "@fortune-sheet/react";
import "@fortune-sheet/react/dist/index.css"


function App() {
  return <Workbook data={[{ name: "Sheet1" }]} />
}

export default App;

```

Add the following lines into `src/index.css`

```css
html, body, #root {
  height: 100%;
}
```

Great, all things are set up!

Now, start the project by running

```
# using npm
npm start
# or using yarn
yarn start
```

and there you go!

You can play around it and try the features.

## Next

In the next blog we will show you how to persist sheet data and make it collabrative, which will end up like this:


![collabration](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wft498vkhw2uvdd2yoqj.gif)

The spreadsheet library is completely opensource, for more information, check out 

https://github.com/ruilisi/fortune-sheet

It is under active development, feedbacks are appreciated!
yarn berryで依存パッケージのバージョンを指定する
Tags: javascript, yarn
Published: 2022-04-16 02:33:02

---
title: yarn berryで依存パッケージのバージョンを指定する
published: true
tags: JavaScript, yarn
---

使用しているパッケージの依存パッケージのバージョンを指定するのに、`npm`を使用している場合は `npm-force-resolutions`を使うと固定できますが、 `yarn berry` (yarn v2, v3) を使用する場合はyarn単体で指定することができます。

{% embed https://www.npmjs.com/package/npm-force-resolutions %}

ユースケースとしては、依存パッケージに脆弱性があったときに元のパッケージの対応を待たなくともひとまず依存パッケージのバージョンを上げる（下げる）ことができるといった具合です。（もちろん元のパッケージが即座に対応してくれればそれでよいですが。）

## 環境

- npm: 8.1.2
- yarn: 3.2.0
- node: v16.13.2

## 指定方法

```sh
$ yarn set resolution <descriptor> <resolution>
```

のコマンドを実行します。

たとえば、 `minimist` のバージョンを `^1.2.0` から `^1.2.6` に上げるときは以下のようになります。

```sh
$ yarn set resolution minimist@npm:^1.2.0 ^1.2.6
```

実行すると `yarn.lock` でそのパッケージのバージョンが更新されていたり、 `.yarn/cache` のパッケージのZIPファイルが更新されてたりします。

## 注意

強制的にバージョン指定したため元のパッケージが意図しない動作になることがあります。

## 参考

- `yarn set resolution`: https://yarnpkg.com/cli/set/resolution
Leetcode Buddy / Buddies Community
Tags: leetcode, programming, career, datastructure
Published: 2022-04-16 02:05:31

I'm one of the founders of the [Programming Interview Prep](https://discord.gg/Hxq8kTJykJ) discord server and we just crossed 1800 members! 

In the community we have a `#leetcode-problems` channel where members actively pair up to solve leetcode problems together. 

Levels vary from beginners to expert, but we are all laser focused on landing jobs at mastering DSA to land jobs at top tier companies. If this sounds like you, feel free to join and start working with others on leetcode problems!
Create shared library symbolic links when crystal interpreter does not work in crystal 1.4.0
Tags: crystal
Published: 2022-04-16 01:32:54

When I run crystal i on Ubuntu impish, I get the following message.

* librt.so is missing
* libdl.so is missing

These libraries are actually already installed.

Go to the lib directory.

`cd /lib/x86_64-linux-gnu`

Search for the necessary files.

`find librt*`
`find libdl*`

Create symbolic links.

`sudo ln -s librt.so.1 librt.so`
`sudo ln -s libdl.so.2 libdl.so`

Now `bin/crystal i` is running.

Good luck!
Net::SAML2 version 0.55 Released
Tags: perl, sso, saml
Published: 2022-04-16 01:11:58

[Net::SAML2](https://metacpan.org/pod/Net::SAML2) is a Perl module that implements the SAML2 protocol for Perl Applications.

This release adds support for EncryptedAssertions via the [XML::Enc](https://metacpan.org/pod/XML::Enc) module.

Support for EncryptedAssertions is automatic if an EncryptedAssertion is received but the call to Net::SAML2::Protocol::Assertion must provide a key_file and a cacert to decrypt the EncryptedAssertion and verify the Signature on the decrypted Assertion (if it is signed).

No changes are required for existing applications that do not use EncryptedAssertions.

If you have never implemented SAML2 in a Perl web application, there is an extensive [tutorial](https://github.com/perl-net-saml2/perl-Net-SAML2/blob/master/TUTORIAL.md) that discusses how to implement Net::SAML2 using Foswiki's [SamlLoginContrib] (https://foswiki.org/Extensions/SamlLoginContrib) as an example.

In addition, the git repo includes a testapp that makes it easy to test against multiple IdPs by simply adding a directory, named for the IdP, containing valid metadata.xml and cacert.pem files.
1 Million Docker pulls and more container updates
Tags: docker, opensource, linux, cloud
Published: 2022-04-16 00:26:22

Wouldya take a look at that? A million! A million pulls of our [Docker Library Official Image](https://hub.docker.com/_/almalinux
). What a huge milestone, WOW! We're seriously humbled and we'd like to thank the community, for all the contribution and support. AlmaLinux keeps getting better each day thanks to the efforts of our amazing community.

We've also officially released containers for ppc64le available on all the major registries and we've also gone ahead and updated our containers to 8.5.4 and patched against the latest security updates where applicable. 18 packages have been updated and you can [see that work here](https://github.com/docker-library/official-images/pull/12003
).

Community members are also doing great work to further streamline our container development process. We're working on using a single working branch to support all the different arch images for each release, instead of a separate branch for each arch. This will greatly help with automation and cut down on development and release times. This will also allow us to maintain repeatable builds and the community to track build history better. This approach will also finally setup staging/weekly/monthly builds so that we can more frequently push out images when there are critical updates.

Finally, we really need to shout out our awesome community members [Bala](https://github.com/srbala
) and [LKHN](https://github.com/LKHN
) for all their amazing work. All this was made possible by their efforts.

You too can be a container hero like Bala and LKHN. Join the AlmaLinux team. If you're looking for more information and details on containers, join our [Containers and Cloud SIG](https://chat.almalinux.org/almalinux/channels/sigcloud
) on the AlmaLinux Community Chat. We're waiting for you.
yt-dlp plus ranger bulkrename
Tags: youtube, tools, hack
Published: 2022-04-16 00:24:24

## Intro

Once in a while or very often we use to download music from youtube using youtube-dl, in my case its fork called [yt-dlp](https://github.com/yt-dlp/yt-dlp) (a youtube-dl fork with aditional features and fixes).

## The problem
Supose you want more than simply downloading a video, you want convert a full album that **has chapters** into individual music tracks

```sh
yt-dlp --split-chapters -x --audio-format mp3 youtube-link
```
By doing that you now have all chapters of the video converted into mp3

## The gran finale
Use the ranger file manager you can use the command "bulkrename"

```sh
:bulnkrename
```

In my case the default editor is vim, so here we have to use our magic vim skills
How to create a class in TypeScript?
Tags: typescript
Published: 2022-04-16 00:00:00

---
  title: How to create a class in TypeScript?
  published: true
  tags: TypeScript
  date: Sat Apr 16 2022 05:30:00 GMT+0530 (India Standard Time)
  canonical_url: https://melvingeorge.me/blog/create-class-typescript
  cover_image: https://melvingeorge.me/_next/static/images/main-830ac643a721c4a96d9e73c4485011d7.jpg
  ---
  [Originally posted here!](https://melvingeorge.me/blog/create-class-typescript)
  
To create a class, you can use the keyword `class` followed by using the `{}` symbol (opening and closing curly brackets) in TypeScript.

For example, let's say we need to make a class called `Person` with 2 fields like `name` and `age`.

It can be done like this,

```ts
// a simple class with 2 fields
class Person {
  name: string;
  age: number;
}
```

Now to make an instance of the above `Person` class, we can use the `new` keyword followed by invoking the `Person` class using the `()` symbol (brackets).

It can be done like this,

```ts
// a simple class with 2 fields
class Person {
  name: string;
  age: number;
}

// make an instance of the `Person` class
const person = new Person();
```

See the above code live in [codesandbox](https://codesandbox.io/s/create-class-typescript-0b8f6s).

### Feel free to share if you found this useful 😃.

---
The Journey to Arch
Tags: archlinux, ubuntu, debian
Published: 2022-04-15 23:53:42

As all Arch users began with Ubuntu I guess it is only fair that that is where I started as well. I started watching reviews on GNOME versions and soon came to realize the limitations of a stable distro: You don't get access to the cutting edge packages and features and so I simply had to change to Arch.

Nope it wasn't that simple, in fact I first changed to the 6 month release from Ubuntu which was not an LTS version in order to try out a few of the latest GNOME improvements, I then tried to install docker which is unsupported on any version of ubuntu that is not LTS which makes sense. So I thought to go to the root of the cause.

Debian Bullseye Is the father of all these Ubuntu releases so it must have access to the latest packages right? Well not unless you change the apt repository to the unstable version where you can't not have a package, They must have everything there?
Dependency errors, that's it. You are left with a system of half stable and half unstable, trying to install some of the latest software compiling from github because there is no alternative repository hosting all this custom software except on github.

I had been flirting with the idea of moving to Arch as well, looking in the mirror and telling myself I am a hardcore Linux user. So.... I have the bright idea of dual booting Arch and Debian. I had installed Arch on a virtual machine so I thought I was ready but a slight lack of judgement and understanding on my part whilst installing Debian was that I chose to go with Logical Volume Management which I still don't know what it does so my Debian installation was in a boot loop after seeing that the size of the LVM and available size on the partitition were different.
Well S**t.

As much as I told myself I was a hardcore Linux user it seemed an opportune time to live up to it so Arch it is - although it wasn't really a choice, it was now the only bootable ISO image I had on hand. I installed Arch 3 times that day, GRUB couldn't figure out where and to be honest neither could I.

After successfully installing Arch I went about getting back all my settings which at this stage were no longer dependent on GNOME because as a hardcore Linux user it has to be a window manager, and so after pulling all my dotfiles and configuring everything again, finding some packages was such a breeze after learning the dirty secrets of the Arch User Repository and so rarely had to compile untested github code

For some of us looking for the bleeding edge we all start with a user friendly distro but after changing so many times to try and get the latest and greatest software I guess the only constant is change and as Arch is always changing I hope that that will keep me away from distro hopping.
XML::Sig 0.57 Released
Tags: perl
Published: 2022-04-15 23:50:24

XML::Sig is a perl module to sign and verify XML Digital Signatures

This is a fairly minor release that addresses some test failures caused by the OpenSSL project [choosing to "not load” the Legacy provider by default in version 3] (https://mta.openssl.org/pipermail/openssl-project/2020-January/001720.html).

This effectively drops support for a [number of very old and broken algorithms] (https://www.openssl.org/docs/manmaster/man7/OSSL_PROVIDER-legacy.html) (at least by default) and that is a very good thing despite the negative impact on their users.

It does however make one wonder if it is not time for the [XML Security Working Group](https://www.w3.org/2008/xmlsec/) to spin up and update the specifications for the changes from  the last ten years.