teleren/devto huggingface dataset:
How to achieve simple glassmorphism effect in your website
Tags: webdev, beginners, tutorial, css
Published: 2022-03-19 09:07:31

<figure>
![img](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5e07t59wc8kfgzgsh961.jpg)
<figcaption>A simple example with cards </figcaption>
</figure>
<br>
To make a very simple blurry glass like effect we can make use of some pretty simple css to add this styling .

Glassmorphism makes use of background blur with bright colors and some transparency and a very subtle border 

4 lines of CSS is all it takes :

```css
 backdrop-filter: blur(20px) saturate(200%);
    -webkit-backdrop-filter: blur(20px) saturate(200%);
    background-color: rgba(0, 0, 0, 0.44);
    border: 1px solid rgba(255, 255, 255, 0.125);
```
We blur the background and set the saturation to 200% to make the colors of the background pop <br>
Here I have also put a border , as I would be using this style on a card to be displayed on my website <br>
So I will use a subtle border to seperate it from the background 
This is what it looks like in my website 
<figure>
  
![website](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2nv9how0bw1mqmyxpzau.png)
<figcaption>satvik.ninja</figcaption>
</figure>
<br>
You can change the look of this effect by changing the values of blur and saturation according to your taste
Horizontal and Vertical Scaling
Published: 2022-03-19 09:01:27

{% embed https://www.youtube.com/watch?v=GTsVuSWYHCw %}

Imagine you have built a website that solves mathematical equations. You receive an equation as input and calculate the solutions on your server and return them back. And your server runs on a machine that has 1GB RAM and a 2-cores CPU. And you get 100 requests per hour which your server is able to respond to within an acceptable time.

But suddenly your website gets popular in the academic circles and starts receiving 1000s of requests per hour. You notice a heavy slowdown of responses on your website and even some failed requests.

To fix this situation, you will need to scale your servers. There are two approaches to scaling your servers: **Horizontal and Vertical**

**Vertical Scaling (or scaling up)** means switching to a better machine or upgrading your current machine. That means you switch to a machine that has more resources like more RAM, more CPU Cores, more storage, and better networking hardware. So, upgrading your existing set of machines refers to vertical scaling.

But you can’t infinitely vertical scale your servers. With much more bulky machines, the chance of them getting shut down is more and there is also a physical limit on how large a single machine can be. Also, if this machine goes down, people will not be able to visit your website until the machine and your server boot up.

To fix this, we have the **horizontal scaling (or scaling out)** approach. We create a pool of machines with the same configuration and then distribute incoming requests to them. Even if one of the machines goes down, the load can be distributed over to the remaining machines. This takes care of the single point of failure issue.

In practice, we use both horizontal and vertical scaling. Tools like **Kubernetes**, **AWS ASG**, and **AWS LB** allow us to manage horizontal and vertical scaling with ease.
Lessons I learned from my failed side project
Published: 2022-03-19 09:00:03

{%embed https://www.youtube.com/watch?v=QgJkMo2Y2Tg %}

I worked on a side project for six months. Even though I failed with it, I learned a lot of valuable lessons from it. In this blog, I will share those with you. Hopefully, they will be useful in your journey too.

You can have all the fun you want with your side project. Go ahead and use those experimental technologies and do wild things in your project. But in case you do want it to grow into a business, it will be best to avoid these mistakes:

## **Don't write your code in a new technology for fun or performance**

Coming from React, I was attracted to Svelte's simplicity and hence decided to use it to build my side project. If I would have used React, I could have reused a lot of code that I had written in the past.

I migrated my express server to Go in between to get "performance" to remain future-proof and handle more requests with fewer resources. Hardly 10 users landed daily on my website and here I was concerned about "performance".

All this time I spent learning svelte and code migrations could have utlized in sales and marketing.

Use a new technology only when it solves a pressing need.

## **Don't reinvent the wheel**

I rewrote my side project in SvelteKit because I was looking for server-side-rendering. SvelteKit was in beta at that stage, I faced compatibility issues, and doing simple stuff involved a lot of reading and exploration.

Instead of SvelteKit, I could have chosen a mature technology like Next.js.

I also designed components like Cards and Tabs myself to have the most "optimized" JS bundle.

## **Build the product and users will come**

Nope, they won't. You will have to build distribution channels.

- Build a large waitlist
- Reach out to friends and family
- Post content regularly on social media
- Engage with people online
- Build a community on Discord
- Invest in a blog and SEO

After spending six months on the product, I had <200 registered users. A good Product Hunt launch brings 200+ users in just a few days.
Introduction to Content Delivery Networks
Published: 2022-03-19 08:57:58

Unless you are Warren Buffet, you will most likely need a fancy website with images, videos, and unique styles to capture the attention of your audience. But usually all of this can sum up to a lot of data. Images and videos are heavy. CSS and JS code combined for even a regular website can be a significant amount.

To reduce the load of all of these things that you can put in public and ensure fast delivery to the people who are viewing your website, you can use a CDN (Content Delivery Network). A CDN is designed to deliver all static assets of a website like images and videos to end users at a fast speed.

CDNs are a globally distributed set of servers that cache your static assets whenever any user visits your website for the first time. All the subsequent requests from that user and other users will be a lot faster because they will be receiving a cached copy of the asset. CDNs are geographically located in a higher number of locations, and that ensures that your user will receive the cached as quickly as possible. The load times for images, videos, and styles will be reduced, and your users will have a better experience.

Unless you are deploying your applications on the edge, most application servers are present in only one or just a couple of locations. Even if you're deploying on the edge, using a CDN to serve static assets is a better choice as it reduces the number of requests on your servers and reduces the load on your application servers.

A couple of widely used CDNs are Cloudflare, Amazon CloudFront, and Akamai CDN.

I like to use Cloudflare because it's free and has a great onboarding experience. I use it for a number of my projects. I connect Cloudflare to a public bucket on BackBlaze and then when once the cache gets built, Cloudflare serves assets at fast speeds.

This is a great article on how to connect a BackBlaze bucket to Cloudflare to cache assets for your website: https://help.backblaze.com/hc/en-us/articles/217666928-Using-Backblaze-B2-with-the-Cloudflare-CDN
Difference Between Local Storage And Session Storage in browser
Published: 2022-03-19 08:43:24

A browser has two different storage. Session Storage and Local Storage. The storage stores two types of data, it's called Key and Value. And every single value is stored as an object. But the main difference between Local Storage and Session Storage is Local Storage stores data for permanent and Session Storage site data for temporary. As an example, if you open a browser and browse something then close the browser when you close the browser the session storage data was removed but the local storage still stores those data and when you again the browser works for that depend on past data. That's the main difference between Session Storage and Local Storage.
Readme.md demo
Published: 2022-03-19 08:31:00

### `title` 
Description  `let` are given below.


Single line code



- 
-

```javascript
npm install typescript --save-dev

```

Multiline code 
```js
var a = 42;
if (true) {
  var b = 7;
  let c = 123;
}

// Obviously, we can access the `a` variable
console.log(a);
// => 42
```

> JavaScript is a loosely typed language. This means that you can use the same variable for different types of information



## `if` statemenets
---



### Nested List
                
+ Item A
+ Item B
    + Item B 1
    + Item B 2
    + Item B 3
+ Item C
   

- Item X
   - Item y

---
                    
###Tables
                    
First Header  | Second Header  | Third Header
------------- | -------------  | -------------
Content Cell  | Content Cell   | Content Cell
Content Cell  | Content Cell   | Content Cell


---


- Image add on readme.md file

`LEFT TRIANGLE pattern image`
```javascript
<p align='center'>
  <img src="./images/leftTriangle.PNG" width="500" title="LEFT TRIANGLE pattern">
</p>
``` 
---
Blockchain Technology
Published: 2022-03-19 08:22:44

A blockchain is a growing list of records, called blocks, that are linked together using cryptography. Each block contains a cryptographic hash of the previous block, a timestamp, and transaction data (generally represented as a Merkle tree). The timestamp proves that the transaction data existed when the block was published to get into its hash. As blocks each contain information about the block previous to it, they form a chain, with each additional block reinforcing the ones before it. Therefore, blockchains are resistant to modification of their data because once recorded, the data in any given block cannot be altered retroactively without altering all subsequent blocks.

A distributed ledger (also called a shared ledger or distributed ledger technology or DLT) is a consensus of replicated, shared, and synchronized digital data geographically spread across multiple sites, countries, or institutions. Unlike with a centralized database, there is no central administrator.

Peer-to-peer (P2P) computing or networking is a distributed application architecture that partitions tasks or workloads between peers. Peers are equally privileged, equipotent participants in the application. They are said to form a peer-to-peer network of nodes.

Cryptographer David Chaum first proposed a blockchain-like protocol in his 1982 dissertation "Computer Systems Established, Maintained, and Trusted by Mutually Suspicious Groups." Further work on a cryptographically secured chain of blocks was described in 1991 by Stuart Haber and W. Scott Stornetta. They wanted to implement a system wherein document timestamps could not be tampered with. In 1992, Haber, Stornetta, and Dave Bayer incorporated Merkle trees into the design, which improved its efficiency by allowing several document certificates to be collected into one block. Under their company Surety, their document certificate hashes have been published in The New York Times every week since 1995.


Logically, a blockchain can be seen as consisting of several layers:

infrastructure (hardware)
networking (node discovery, information propagation and verification)
consensus (proof of work, proof of stake)
data (blocks, transactions)
application (smart contracts/decentralized applications, if applicable)

Blockchain technology can be integrated into multiple areas. The primary use of blockchains is as a distributed ledger for cryptocurrencies such as bitcoin; there were also a few other operational products that had matured from proof of concept by late 2016. As of 2016, some businesses have been testing the technology and conducting low-level implementation to gauge blockchain's effects on organizational efficiency in their back office.

Most cryptocurrencies use blockchain technology to record transactions. For example, the bitcoin network and Ethereum network are both based on blockchain. On 8 May 2018 Facebook confirmed that it would open a new blockchain group which would be headed by David Marcus, who previously was in charge of Messenger. Facebook's planned cryptocurrency platform, Libra (now known as Diem), was formally announced on June 18, 2019.
Today's Fun Joke For Developers - Daily Developer Jokes
Tags: jokes, dailydeveloperjokes
Published: 2022-03-19 08:00:28

---
title: "Today's Fun Joke For Developers - Daily Developer Jokes"
description: "Check out today's daily developer joke! (a project by Fred Adams at xtrp.io)"
series: "Daily Developer Jokes"
published: true
tags: #jokes, #dailydeveloperjokes
---

Hi there! Here's today's Daily Developer Joke. We hope you enjoy it; it's a good one.

![Joke Image](https://private.xtrp.io/projects/DailyDeveloperJokes/public_image_server/images/5e125952bbb70.png)

---

For more jokes, and to submit your own joke to get featured, check out the [Daily Developer Jokes Website](https://dailydeveloperjokes.github.io/). We're also open sourced, so feel free to view [our GitHub Profile](https://github.com/dailydeveloperjokes).

### Leave this post a ❤️ if you liked today's joke, and stay tuned for tomorrow's joke too!

_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:___ Where did the API go to eat?

___A:___ To the RESTaurant
 -->
Creating a plugin in Dative v2-alpha
Tags: javascript, programming, tutorial, dativejs
Published: 2022-03-19 07:22:51

## Creating a plugin in dative v2-alpha is different from the other versions


Since the `Dative.use(plugin)` has deprecated

So We introduced a new way which also helps more

### Let's Start Cooking :)

```ts
export let Profile = Dative.extend({
  ...,
  use: [function({ instance, proto, Dative }: { instance: Dative, proto: Dative, Dative: typeof Dative }){
    // Dative=> the Dative constructor
    // instance=> the current instance of your application
   // proto=> the Dative prototype
  }]
})
```


#### Let's Create A Plugin

```ts
// src/plugins/my-plugin.js
export let MyPlugin = function({ instance, proto, Dative }){
// 1. Let's make a global property
Dative.defineProperty('appName',function(){
  return 'Dative News'
})
// Now You Can Get the options of the instance
console.log(instance.options.me)
}
```


#### How do we use it ??

```ts
...
import { MyPlugin } from './plugins/my-plugin'


export let Profile = Dative.extend({
  ...,
  use: [MyPlugin],
  // we can now use the option we defined
  me: "Holla" //=> Holla
})
```


### Thanks For Reading

If You Have any Question About Dative 

Feel free to ask me on [twitter](https://twitter.com/tobithedev360)
Make Express Server fast Request & Response Using Indexing in mongoDB
Tags: express, node, mongodb, javascript
Published: 2022-03-19 07:21:38

Hey Developers Today we discuss on topic how we fast our server.
so we learn about indexing in express of mongoose.

normally we can make schemas like

```
const {Schema,model}=require('mongoose');

const userSchema=new Scheam({
   name:{
      type:String,
      required:true
   },
   email:{
      type:String,
      required:true,
      unique:true
   },
   isDeleted:{
      type:Boolean,
      default:false
   },
});

const UserModel=model('User',userSchema);
module.export=UserModel;
```

normally we can use to check user on their email. in mongoDB unique   
field auto index but other field not index. 

```
const user=await User.findOne({email: "sandeep@gmal.com" , isDeleted:false});
```
In above query of mongoose it takes more time because isDeleted field not indexed. so we make isDeleted field as index. so refactor  model code.

```
const {Schema,model}=require('mongoose');

const userSchema=new Scheam({
   name:{
      type:String,
      required:true,
      index:true
   },
   email:{
      type:String,
      required:true,
      unique:true
   },
   isDeleted:{
      type:Boolean,
      default:false,
      index:true
   },
});

const UserModel=model('User',userSchema);
module.export=UserModel;
```
we make name is also in index because in searching query we check from name thats why we make as indexed field.
after make as index field you can see in mongodb document indexed field.
This week’s newsletter is out! (19-03-2022) - Punk Rock Internet
Tags: javascript, tech, webdev, discuss
Published: 2022-03-19 06:57:39

---
title: This week’s newsletter is out! (19-03-2022) - Punk Rock Internet
published: true
description: Another week of great javascript, tech and web development links.
tags: javascript, tech, webdev, discuss
---

Punk Rock Internet

https://markjgsmith.substack.com/p/mark-smiths-newsletter-19-03-2022?s=w

Would love to hear any comments and feedback you have.

[@markjgsmith](https://twitter.com/markjgsmith)
Understanding GitHub Workflow
Tags: git, github, githubworkflow
Published: 2022-03-19 06:32:08

Previously, we have learned how to synchronize the local git repository with the Remote GitHub Repository to store the content history of the project on GitHub. In this lesson, we will learn how you can follow the GitHub flow to easily experiment with new ideas safely without the risk of compromising the project.

## What is GitHub flow?

**GitHub's flow** is a lightweight branch-based workflow. The GitHub workflow is helpful for everyone. With the help of GitHub flow, you can experiment on your repository.

By Default, our project is on the **main branch;** any changes made on the main branch will directly update the project. 
When we want to experiment with new features or even fix an issue, we can create a new branch on the project. The branch will duplicate the main branch and the changes reflected in the new branch.

### Creating a branch 

1. Open your repository and click the "Code" tab
2. Click `Branch: main` in the drop-down
3. In the field, enter a name for your branch (e.g., 'dev')
4. Click Create branch.

![Git Workflow](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9mw5k4bzym3au11wzy7u.png)

### Committing a file 

Now that we are on the dev branch created earlier, you can create a new file or edit the file already in the dev branch.

1. You can add the file from the ``Add file ``, and from the dropdown, select the ``create new file`` option or edit already existing files in the dev branch.

2. When you are done with changes, give the commit a name and description. 

3. Make sure your newly created (dev) branch is selected.

4. Click on Commit changes.

You have made your first commit! The next step is to share the changes with your team via a pull request.

### Open a Pull Request 

A pull request is where we share our proposed project changes with our team — with the intent of discussing & revising them before applying the changes to the main branch.

1. Open the Pull requests tab and click on "New pull request."

2. In the base: dropdown menu, ensure the main branch is selected.

3. Select the dev branch you created earlier in the compare: dropdown menu.

![Delete Branch](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r2gm80zmdwiak4sx9rkk.png)

After successfully merging the dev branch changes to the main branch, we can delete the dev branch by clicking on the delete branch button. 

### Summary 

In this lesson, we learned the **git-flow** while adding features or fixing bugs in the project; with the help of git-flow, you can save your default branch and do experiments on the new branch. Practice the commands using the quiz and make sure you understand entirely Git & GitHub. You can access the Git cheat sheet, which helps you with the basic and advanced commands. When you are confident, you can go to the second module, in which we will get started with GitHub actions.

- [Introducing Git & GitHub](https://dev.to/adilshehzad786/introducing-git-github-ida)
- [Main Menu ] (https://dev.to/adilshehzad786/all-about-git-github-beginner-to-advance-1061)
Suppress runtime relinking at publishing Blazor WebAssembly apps
Tags: blazor
Published: 2022-03-19 06:31:00

## Backgounds

After installing ".NET WebAssembly build tools", runtime relinking will be performed automatically whenever you publish Blazor WebAssembly apps in the "Release" configuration.

![The install option of ".NET WebAssembly build tools"](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8a2tl9eana7czoz8g24q.png)

**Runtime relinking reduces the size of "dotnet.wasm"** by trimming unused runtime code.  
That size reduction will contribute download speed of Blazor WebAssembly apps.

![The size of "dotnet.wasm" before and after installing ".NET WebAssembly build tools"](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kh1kphi27vpokz9mf7nn.png)
 
See also following links for more details.

- [_".NET WebAssembly build tools | Microsoft Docs"_](https://docs.microsoft.com/en-us/aspnet/core/blazor/webassembly-native-dependencies#net-webassembly-build-tools)
- [_"Runtime relinking | Microsoft Docs"_](https://docs.microsoft.com/en-us/aspnet/core/blazor/host-and-deploy/webassembly#runtime-relinking)

However, **runtime relinking will take a bit long time for publishing**.

Of course, this will not matter for almost developers.  
But in some rare cases, taking time for runtime relinking annoys developers, particularly when they investigate a problem involved with the publishing process.

## Solution

Fortunately, **we can suppress runtime relinking manually**.

What we have to do is just specifying **the "UsingBrowserRuntimeWorkload" MSBuild property to "false"**.

For example, you can do that with the command line arguments of `dotnet publish` command.

```shell
dotnet publish -c:Release -p:UsingBrowserRuntimeWorkload=false
```

That command behaves like ".NET WebAssembly build tools" is not installed, so the publishing process finishes faster than the case that runtime relinking is performed.

![Compare publishing speed with and without "-p:UsingBrowserRuntimeWorkload=false"](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kaq4wt5y3ku0ev1ub4yt.png)

## Limitation

Setting the "UsingBrowserRuntimeWorkload" MSBuild property to "false" is available only when the Blazor WebAssembly project doesn't use the "Native Dependency" feature.

If the Blazor WebAssembly project depends on the "Native Dependency" feature, the building and publishing process should be failed.
What standards, guides, etc. do you settle before starting to build a project with a small team?
Tags: discuss, leadership, devops, management
Published: 2022-03-19 06:07:53

Hey, I'm currently in college, and we were tasked to work as a group to build an application of our choice.

I'm currently the leader of our group and I'm disappointed in myself for my incompetence, because running the group has been hard and disorganized.

What standards/guides/resources do you setup or prepare before jumping into the actual building of the project (coding)?

How can I make sure that boundaries and expectations are set?

How do I make our collaboration smoother and clearer?

Thank you!