teleren/devto huggingface dataset:
There's Finally a Programming Language in Sanskrit
Tags: sanskrit, vedic, programming
Published: 2022-04-24 10:24:05

So, after taking inspiration from Christopher Nolan's Interstellar (2014) this thought came to my mind. Why don't we actually make a programming language in Sanskrit. so here is it **Vedic**. 
![logo](https://raw.githubusercontent.com/vedic-lang/vedic/main/.github/logo.png)
Vedic is the first programming language to utilize commands in Sanskrit and is available online for free. Vedic can be used in our [Online IDE here](https://vedic-lang.github.io/vedic-ide/) for offline installation visit our
[Install Instructions](https://vedic-lang.github.io/vedic-ide/).

## ⌨️ Sample Code


![sample vedic code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yp0z1i5j08isr1fbc04h.png)

**Output:**
![output](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uzg8o7t1b6pmejaknbj0.png)

The Sanskrit language is the world's oldest language. Once Rick Briggs, a researcher at NASA wrote a paper in 1985 titled [Knowledge Representation in Sanskrit and Artificial Intelligence](https://www.aaai.org/ojs/index.php/aimagazine/article/view/466). claims that Sanskrit is the most suitable language to develop computer programming for their Artificial Intelligence program. The grammar of Sanskrit is rule-bound, formula-bound, and logical, which makes it highly appropriate to write algorithms. So, considering that Vedic designed to be a high-level, logical scripting language.

I've worked so hard for this project, I am trying to build a community around **Vedic**, so we can make the project sustainable. that's by I made it open source.

**Links** :

[Documentation](https://vedic-lang.github.io/)
[Github Org](https://github.com/vedic-lang)
[Online IDE](https://vedic-lang.github.io/vedic-ide/)

Contributions, issues and feature requests are welcome!
css confidence
Published: 2022-04-24 10:00:35

## box model 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/33owvdrpn5gppege8adu.png)
 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ysf95dqm23zljnbzm7om.png)

## solution-> border-box 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kq83darh93pgwu9j0u13.png)

## border-box is including content padding and border
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vl74hui0lpnxp39enzw5.png)

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

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

---

## inherit from html 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bktelgsc6jd2wqd8j04i.png)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tmtkhsum4q2io4shuvcn.png)
Shallow Merging in React
Published: 2022-04-24 09:48:57

The concept of Shallow Merging is very simple. As it's simple, so most of the people ignore this or even in paid courses some instructor will not talk about this concept much. 

But, as a React-Developer, this concept is very crucial if you love 🧡 to code in class component.

So, let's go !!
 
**Shallow Merging :** 
Shallow Merging means it only cares about the first level of the object and will replace anything deeper than the first level.
Let's understand with an example :

```
state={
  music  : "K-Pop",
  band  :  {  
             bandOne: "BTS",
             bandTwo: "BlackPink"
           }
            
}
```
 
So, if we use **setState** like mentioned below :

```
this.setState({ band, { bandTwo: “EXO” } })
```

So, this results into below output :

```
state={
  music  : "K-Pop",
  band  :  {  
            bandTwo: "BlackPink"
           }
            
}
```

SO, this is known as Shallow Merging. In this example,  instead of updating the **bandTwo**  value, it will update the **band**.

So, in order to prevent this, we have to use another method to set the state in React.

**Method to solve this :**
So, in order to solve this, we use one function here.
That function will receive the previous state as the first argument, and the props at the time the update is applied as the second argument:

```
this.setState((prevState, currentProps) => ({
    band : {...prevState, bandTwo : "EXO" }
)});
```

So this will have the intended effect. Here is how the state will look like :

```
state={
  music  : "K-Pop",
  band  :  {  
             bandOne: "BTS",
             bandTwo: "EXO"
           }
            
}
```

Thanks for reading this article, hope this will clear the doubt.
AWS Lambda Typescript Template
Tags: aws, typescript, serverless, webdev
Published: 2022-04-24 09:13:31

Hello there, today I want to present you template built by me.

**Serverless functions** are growing in popularity, and since today I haven't found a good template to develop serverless functions in **Typescript**

you can view template on this URL [**REPOSITORY**](https://github.com/anridev24/sls-lambda-ts-template)

_**template includes basic structure which can be modified in any way**_

**Instructions**

clone repository  

```
git clone https://github.com/anridev24/sls-lambda-ts-template.git
```

CD into project and open with your text editor

```
cd .\sls-lambda-ts-template\
code .
```

install dependencies and start the development server

```
npm install
npm run dev
```

you can start coding in **src** folder

and finally you can deploy it using

```
serverless deploy
```

_Everything you write will be transpiled to JavaScript in a **dist** folder_.

When you deploy, useless packages will be excluded to guarantee minimal deployment size.



Thank you for reading, if you have any questions feel free to ask.
Will be happy if you give me a star on GitHub ⭐
Unit test in React
Published: 2022-04-24 09:03:59

We don’t give so much interest in unit testing but it is important. It allows us to find the bug and efficiently debug them.
We do not have to test all the components of a React Js project.
Suppose, we have a website like Amazon. The main feature of that, users can see the products and can purchase them. So if we provide testing in all the components it is good but not the better option. My code and project will be fine if I implement unit testing only on those features.
To do a default unit test of React Js firstly I have to create a file named components.test.js.
Then in that file, I have to invoke an inbuilt method test and pass two arguments (the first one is a statement and the second one is a function).
In the second argument, I have to render the component I want to test and then write the screen. debug().
Finally when I input the command npm test and then our test will run.
Thus we can test a React.Js project
We have to remind in our mind if a feature is not so important but any other component relies on it just like useFirebase hook. The information of the user is important in many components. If any bug exists in it then it will hamper many components and all of the projects. So to avoid bugs we can apply I simple unit test in that component
State of the World - April 2022
Tags: peace, world
Published: 2022-04-24 08:56:49

Unless you have been in a bunker at the north pole, you have heard about the war in Ukraine. All the world has eyes on the news from there. 

This war has impacted the world. From the feeling of insecurity, the misfortune towards the Ukrainian people, or the economic impact on our lives, everyone was impacted. But nothing compared to the suffering felt by the Ukrainians. They have to run from their homes, watch people die, watch friends die, watch family die...

![A photo of different people with Ukraine military's cloth ](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bcsse01zgn0n7jw6quj0.jpg)[❤𝕄𝕠𝕦𝕚™❤️ 💉💉💉💉 on Twitter](https://twitter.com/moui/status/1497593997455343616)

It takes courage to fight an enemy, but it helps to have a superior motive. There are several examples of people fighting for their homes and lives. It does not matter what the profession, the age, the gender, the political party, or even the nationality. They are all united.

But the world cannot stop. There are many other ways to help Ukraine. You have the [StandWithUkraine](https://stand-with-ukraine.pp.ua/), a website that lists several ways to help, including donations, how to protest against Russia, or even how to join the [Foreign legion of Ukraine](https://fightforua.org/)!!!.

In the tech world, supporting Ukraine is also a priority. On the 25 and 26 of April, for instance, the [Devs For Ukraine](https://www.devsforukraine.io/) conference will take place, with the objective of raising funds and providing support. You can find the program on their website. The event is free, but if you have the possibility and agree with the cause, please donate. It’s a great opportunity to help and learn at the same time.

Off-Course, on the other side, we cannot confuse Putin with Russia, nor can we confuse Russia with Russians. Each person is an individual person and has the right to their own opinion and not everyone shares Putin’s vision.

We are all human and we should not fight each other. We have evolved so much since the end of the Second World War that we should have already discovered that war does not solve problems. Let’s just hope that the next generation does a better job than the current one...

![A paper with Peace written and a person on background with the Ukraine flag](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ju77jz3wv908q6djzz9g.jpg) [Free Help ukraine Image on Unsplash](https://unsplash.com/photos/iHNT6Ii7x5A)

---

This was first published on my website [fabiocosta.eu](https://fabiocosta.eu).
New Feature Devfolio
Tags: javascript, opensource, nextjs, webdev
Published: 2022-04-24 08:55:38

Added a New Feature on [DevFolio](https://devfolio.kumard3.me/), Now you can choose between Template to, Bootstrap your Portfolio, with just your github Username. ![video](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/f4ix6urnow6oh8o03qv8.gif)
Modal In HTML/CSS With JavaScript
Tags: javascript, codenewbie, webdev, tutorial
Published: 2022-04-24 08:52:57




Mainly Modal is used to show some actions or have any offer to show. So here we made this modal using JavaScript with HTML/CSS.

Also Read:- [Simple Header Color line In CSS](https://w3hubs.com/simple-header-color-line-in-css/)

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

In this modal, we used JavaScript functions with display properties. Also, we used close functions for Onclick; it will close.

Make it yours now by using it, downloading it, and please share it. we will design more elements for you.

[Source Code](https://w3hubs.com/modal-in-html-css-with-javascript/)
E2E type safety with tRPC
Tags: typesafety, typescript, react
Published: 2022-04-24 09:35:05

---
title: E2E type safety with tRPC
published: true
date: 2022-04-24 08:46:15 UTC
tags: typesafety,typescript,react
canonical_url: 
---

![](https://cdn-images-1.medium.com/max/1024/1*SC2C3yHN7k_CkAVpl0fiJw.png)

I gave a talk at Copenhagen React about the [tRPC](https://trpc.io) framework and how we use it instead of REST or GraphQL at [Mymee](https://mymee.com):

[youtube.com/watch?v=k1TCueEhhJo](youtube.com/watch?v=k1TCueEhhJo)
3 tips to love ️programming (Even More)
Tags: programming, career, productivity, watercooler
Published: 2022-04-24 08:23:55

Deep down inside, I want to be a programmer, but to be good at any subject, you must love it. Today, I'll give you some of my tips to help you ❤️ coding even more!

##Work on projects

What I love to do most is debugging, what you want to do might be different. Sure, you'll need to learn the required skills, but still, nothing can give you the satisfaction of completing a project successfully.

##Make helpful websites

Nothing can give you the satisfaction of helping millions of online users. Next time you encounter a problem, consider making a website to help other people with the same problem! (Might even get you some cash) .

##Showing off(Sometimes)

You spent days making a project, and finally, it's done! Why not show it off, get some feedback, and do some promotion? Remember to share your projects when you finish them! 

##Contact Info/Conclusion

I hope you enjoyed this post, and get programming!

Email(For partnership/deals): support@freetechnologyhelp.com
Email 2(Personal email): albertyqyao@gmail.com
Integrating Angular 9 app with Liferay 7.x portlet
Tags: liferay, javascript
Published: 2022-04-24 08:19:07

Hello! 

I have an Angular 9 app that I would like to make accessible via Liferay 7.x portlet.

When I follow [these steps](https://help.liferay.com/hc/en-us/articles/360029028031-Developing-an-Angular-Application), deploy my portlet and try to render it, I run into issues (reported as JavaScript errors in the browser console):

1. "Can't bind to 'X' since it isn't a known property of 'Y'.
2. "'X' is not a known element:

A. If 'X' is an Angular component, then verify that it is part of this module.

B. If 'X' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message."
The problem is that as far as I can see the modules in question are properly annotated and listed as exports, declarations, etc.

I would appreciate help with resolving these issues. I am happy to jump on a Zoom to demonstrate the details of my config.

Thank you!
testing node js api using mocha and chai
Tags: node, mocha, chai, testing
Published: 2022-04-24 08:13:34

testing node js api using chai and mocha

first following the step for installing mocha and chai 
1. npm install mocha --save-dev
2. npm install chai --save-dev
3. npm install chai-http --save-dev
4. go to the package.json file and write in scripts  "test": "mocha"
5. then create a folder and create a file (like api.js) and code your testing
6. Write npm test in terminal for testing the test

for better understanding you can try below link for understanding how mocha and chai work and how we write testing code for test our application------

https://www.digitalocean.com/community/tutorials/test-a-node-restful-api-with-mocha-and-chai
I've made a react component that hides sensitive information in your app.
Tags: react, javascript, npm, webdev
Published: 2022-04-24 08:04:27

Did you ever want to showcase a site you have worked on or a new feature you just published in a production system but were unable to do so because of the fear of exposing sensitive information?

SafeView is a component that allows you to hide sensitive information in your app visually, for presentation purposes, and more.

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

In order to hide an element all you need to do is to target it using the `data-safe` attribute.

```js
const MyComponent = () => {
    return (
        <div>
            <span data-safe>
                // Sensitive info
            <span>
        </div>
    )
}
```
And then when you want to hide press <kbd>Shift</kbd> + <kbd>S</kbd>.




There is basically no setup involved other than wrapping your app with the `<SafeView>` component.

The library is super simple and light-weight and is available at NPM.

["SafeView" on NPM](https://www.npmjs.com/package/safeview) 

["SafeView" on Github](https://github.com/ItayLisaey/safeview)

if you have any question and/or suggestion I would love to answer in the comments. :)
How to manage a software development team and your git tree
Tags: management, git
Published: 2022-04-24 08:04:01

First of all I hate the word _"manage"_. When I explain my leadership style to others, I typically explain it as follows ...

> I "adopt" brilliant software developers for then to unleash them

It's a bit of a cliche, being one of Steve Jobs' most quoted phrases ever, but it's still valuable, and I am of course referring to the following ...

> We hire great people to tell us what to do

In some ways I guess it's my anarchistic background here inspiring me, where anarchy of course doesn't imply chaos, but rather _"without hierarchy/leadership"_. I sometimes explain my leadership style as follows ...

> I'm the CEO not because I like to boss people around, but rather because I don't want anybody else to have the title, resulting in that my people are getting bossed around

Anyways, what does this have to do with git? Well, it's quite simple, some developer just posted an article about his git branches ended up looking like _"guitar hero"_. Unfortunately he added a curse word into his OP, so the thing got censored, only after I had written a thorough comment explaining what I believe was the underlying cause, resulting in his or her problems. I understand the moderator here not wanting to have curse words publicly displayed on their feed, but I think my comment about it was good enough to deserve to be reiterated _without_ the curse word, and it was as follows ...

> If your git branch looks like a x-mas tree, it's a symptom of something else being wrong with your organisation. Often this other problem is that your team is too large. The solution is to divide your codebase into smaller more easily digested chunks of code, allowing you to segregate your teams into smaller autonomous teams, resulting in fewer branches, and a more easily digested git tree, transforming your "x-mas tree" into "a Redwood forest" ...

Jeff Bezos said; _"No team should be larger than what's possible to comfortably feed on two pizzas"_. If your git tree looks like guitar hero, you're probably doing some wrong elsewhere. Often the underlying problem is that your teams are too large. Regardless of what your problem is, trying to combat complexity with _more_ of the thing that resulted in your problem in the first thing (complexity), is like trying to fix your head aches by smashing your head to the wall. It might temporarily work due to you passing out, _"forgetting"_ your original head ache, but when you awaken, the only (long lasting) result you'll have is even _more_ head ache ...

For the record, please don't study the cover image for this post looking for answers - Realise instead it _is_ the problem, and implement a _"SHIFT DELETE refactor policy"_ ... ;)

[Here's an example of how it should be done](https://github.com/polterguy/magic.clone) - And yes, notice this is _one project with more than 40 git trees_! Create a forest, don't create guitar hero ...
Top 3 Most Important Tips for Developer/Software Engineers
Tags: beginners, webdev, help, devjournal
Published: 2022-04-24 07:48:18

## 1. Learn how to learn

Languages change, frameworks change, technology changes. We need to adapt to this fast-moving landscape, or risk getting left behind. By seeing new tools as opportunities to learn, you can teach yourself new tech more quickly than the competition.

## 2. Practice Consistently

Whatever you decide to learn, consistent practice is the key. You need to build the habit of coding for just a little bit each day. Just having your fingers on the keyboard and writing code will help you retain the knowledge and improve more rapidly.

## 3. Focus on creating a value

Always remember the reason that we code: To solve problems and help people. You should always put yourself in the position of the users of you code-emphasize with them, understand their problems and develop software that make their lives easier.

Master these concepts and you’ll be set for an amazing developer career.

---

### Let's connect 💜

<div align="left">
<p><a href="https://twitter.com/MrDanishSaleem"><img src="https://img.shields.io/badge/MrDanishSaleem-%231DA1F2.svg?style=for-the-badge&logo=Twitter&logoColor=white" alt="Twitter @MrDanishSaleem"/> <a href="https://github.com/mrdanishsaleem/"><img src="https://img.shields.io/badge/github-%23121011.svg?style=for-the-badge&logo=github&logoColor=white" alt="GitHub @mrdanishsaleem"/> <a href="https://discord.com/users/890596597610737774/"><img src="https://img.shields.io/badge/DANISH-%237289DA.svg?style=for-the-badge&logo=discord&logoColor=white" alt="Discord @Danish"/> <a href="https://linktr.ee/mrdanishsaleem/"><img src="https://img.shields.io/badge/linktree-1de9b6?style=for-the-badge&logo=linktree&logoColor=white" alt="Linktree @Danish Saleem"/></p>
</div>

---

Support me 🤝

[![BuyMeACoffee](https://img.shields.io/badge/Buy%20Me%20a%20Coffee-ffdd00?style=for-the-badge&logo=buy-me-a-coffee&logoColor=black)](https://www.buymeacoffee.com/mrdanishsaleem)
Cookies, Local Storage & Session Storage
Published: 2022-04-24 07:45:41

These are storage methods provided by the browser, to store information on the user's browser.
 
Now let's see what's the difference between them and how can we use them.
 
## Local storage
 
➡️ **Capacity** - 10MB
➡️ **Expiry** - Never
➡️ **Data accessibility** - Any tab of a browser

➡️ **Syntax** -
 
1️⃣ **Storing data**
 
`localStorage.setItem('name', 'Ashwani')`
 
// Here the first parameter is the name and the second parameter is the value, both need to be in string format
 
2️⃣ **Getting Data**
 

`localStorage.getItem('name')`
 
// We need to specify the key for which we want to get the data
 
3️⃣ **Removing Data**
 
`localStorage.removeItem('name')`

## Session Storage
 
➡️ **Capacity** - 5MB
➡️ **Expiry** - On tab close
➡️ **Data accessibility** - Same tab
 
➡️ **Syntax** - Exact same methods as localStorage
 
1️⃣ **Storing data**
 
`sessionStorage.setItem('name', 'Ashwani')`
 
2️⃣ **Getting Data**
 
`sessionStorage.getItem('name')`
 
3️⃣ **Removing Data**
 
`sessionStorage.removeItem('name')`
 

## Cookies
 
➡️ **Capacity** - 4KB
➡️ **Expiry** - Manually set
➡️ **Data accessibility** - Any tab of a browser
 
➡️ **Syntax** -
 
**document.cookie** is used both for setting and getting the data.
 
1️⃣ **Storing data**
 
`document.cookie = 'name = Ashwani'`
 
⬇️ **Manually setting expiry** - we can use the expiry or max-age property.
 
`document.cookie = "lastName = jha ; max-age = 10"`
 
 
2️⃣ **Getting Data**
 
`console.log(document.cookie)`
 
// There's not any way to get a particular cookie data.
 
⭐ As we now know that all these three are methods to store data in the browser, but with cookie we can store data on the server as well.
 
Now, let's conclude this -
 
Most of the time we prefer local storage or session storage due to its simple syntax and large capacity, we use cookie when we need data on the server (e.g. authentication).