teleren/devto huggingface dataset:
Episode 23/23: Hydration in Angular, Angular Community Meetup
Tags: webdev, javascript, angular, programming
Published: 2023-06-16 18:35:05

Jessica Janiuk gave an update of Angular's current status in terms of hydration. The Angular Community Meetup took place with four different talks about Bundling strategies, Customising Angular's Renderer, DI, and ngTemplateOutlet.

{% embed https://youtu.be/GX4-lVsOCEU %}

## Hydration and SSR in Angular 16

Jessica Janiuk is the leading engineer at Angular when it comes to hydration. She was a guest at the "Top End Devs" podcast and gave an update on the current status.

She explained the non-destructive hydration, introduced in Angular 16, and gave an outlook on what might come. Maybe partial hydration, where we have a criteria-based hydration. Such a criterion could be that components only hydrate when they are within the viewport.

A quite interesting question was if there is a difference between the Angular version that Google uses internally and the one we got. It is the same framework except for the infrastructure, and Google doesn't keep certain features back. But it should also be mentioned that Google has other frameworks as well that are not publicly available.

The podcast ended with a piece of advice for new developers who want to contribute to Angular. Look out for those GitHub issues labelled with "good first issue".

{% embed https://topenddevs.com/podcasts/adventures-in-angular/episodes/hydration-and-server-side-rendering-in-angular-16-aia-382 %}

## Angular Community Meetup

Jay Bell presented an experimental approach to bundling dynamic imports into a single file. The bundling happened on the server during SSR, which sent the bundle to the browser. Jay wrapped the webpack.require function.

Chau Tran explained the internal relationship between Angular Core, the Platform and the Renderer, where Angular Core is not really aware of the browser. Still, the renderer in the middle creates the DOM elements. Chau implemented a custom renderer to integrate ThreeJS into Angular.

Markus Ingvarsson took a deep dive into the different possibilities of Angular's dependency injection. He focused mainly on the Injection Token and showed examples from Angular itself. So the HTTP_INTERCEPTOR or some of the multiple tokens we get from Angular Material.

Stephen Cooper did the last talk. He explained the ngTemplateOutlet and especially the possibility of using it in a type-safe way. He used the ngTemplateContextGuard and showed how to make it work for generic types.

{% embed https://youtu.be/gA6iJbA9oBg %}

## Minor Versions

Other than that, we had minor releases.
- Cypress 12.14: [ChangeLog](https://docs.cypress.io/guides/references/changelog#12-14-0)
- Playwright 1.35: [ChangeLog](https://github.com/microsoft/playwright/releases)
- Transloco 4.3: [ChangeLog](https://github.com/ngneat/transloco/blob/master/libs/transloco/CHANGELOG.md)
Roman to Integers
Tags: leetcode, beginners, csharp
Published: 2023-06-16 18:22:32

Hello everyone!

There is [this](https://leetcode.com/problems/roman-to-integer/) leetcode challenge which is to convert roman numbers to integers. 

This is a beginner level problem I tried to solve and it was fun. 
You can try it before continuing with the post. Maybe you might come up with an efficient solution as well.

![Colloseum](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jzjktas1yoogdiazo3yg.jpg)

###### [Photo by Mathew Schwartz](https://unsplash.com/@cadop)


Hope you are now familiar with the problem.
Let's see our function that returns according integers.

`GetInteger(string roman)`

```
switch (roman)
{
  case "I": return 1;
  case "V": return 5;
  case "X": return 10;
  case "L": return 50;
  case "C": return 100;
  case "D": return 500;
  case "M": return 1000;
  default: return -1;
}
```

Call it and output should give accurate results.

But what if this input that is a string called roman was not a single letter? As an example "IX".

If so the case should jump to default case and it has to be resolved.

First let's make the input string a char array.
```
char[] characters = roman.ToCharArray();
```

- We assign the returning value as the integer value of last letter.
```
number -> 'X' -> 10
```

- We are going to iterate from one before last to first of this char array.

- We take the current value as the integer value of current char.
```
current -> 'I' -> 1
```

- We take the previous value as the integer value of char to the right  of the current char.
```
previous -> 'X' -> 10
```

- We add or subtract returning value if current value becomes more or less than the previous value.
```
current -> 1, previous -> 10, previous > current -> yes
number -> previous - current -> 9
```

Therefore the returned value for IX becomes 9.
This applies for any roman number given.

##### Source code below.
```
public static int GetInteger(char c)
{
    switch (c)
    {
        case 'I': return 1;
        case 'V': return 5;
        case 'X': return 10;
        case 'L': return 50;
        case 'C': return 100;
        case 'D': return 500;
        case 'M': return 1000;
        default: return -1;
    }
}

public static int RomanToInt(string s)
{
    char[] characters = s.ToCharArray();
    int number = GetInteger(characters[characters.Length - 1]);
    for (int i=characters.Length-2, previousValue, currentValue; i>=0; i--)
    {
        currentValue = GetInteger(characters[i]);
        previousValue = GetInteger(characters[i + 1]);
        number = previousValue > currentValue
            ? number - currentValue
            : number + currentValue;
    }
    return number;
}
```

Thanks for reading!
👋🏻 Hello World
Tags: helloworld, typescript
Published: 2023-06-16 18:17:20

Welcome to my blogs.

Let's restart the blog journey from [dev.to](https://dev.to/)

 I share my thoughts and experiences and weekly blog posts.

**You can also follow me on my twitter [@vivekpal0x](https://twitter.com/vivekpal0x) for my latest tweets.**

I hope you will enjoy it :)

## Why I migrated from my standalone blog to Dev.to
- Developer's Community
- Increased Visibility
- Easy Management and Writing
- Social Interaction
- Discoverability and Networking
- Simplified Maintenance

**You can find my old blogs here [archived.vivekpal.in/blog](archived.vivekpal.in/blog)
How Google Search works
Tags: webdev, beginners, google, googlecloud
Published: 2023-06-16 18:16:44

Google was officially launched in 1998 by Larry Page and Sergey Brin to market Google Search, which has become the most used web-based search engine. Larry Page and Sergey Brin, students at Stanford University in California, developed a search algorithm at first known as "BackRub" in 1996, with the help of Scott Hassan and Alan Steremberg. 
It operates one of the largest search engines in the world and offers various online tools, such as email, cloud storage, mapping services, advertising platforms, and more. Here's a simplified explanation of how Google works:

1.Crawling: Google uses automated software known as "web crawlers" or "spiders" to discover and crawl web pages across the internet. These crawlers follow links from one webpage to another, continuously scanning and indexing new or updated content.

2.Indexing: Once a web page is crawled, Google's indexing system analyzes its content and stores relevant information in its index. This includes the page's title, meta tags, headings, text, images, and links. Google's index is like a massive database that organizes and categorizes web pages for faster retrieval.

3.Query Processing: When a user enters a search query into Google, the system processes the query to understand its intent and retrieve relevant results. Google employs various technologies, including natural language processing and machine learning, to interpret the query and determine the user's search intent.

4.Ranking Algorithms: Google's ranking algorithms evaluate the indexed web pages and determine their relevance and quality in relation to the search query. Google considers hundreds of ranking factors, such as keyword relevance, page quality, user experience, backlinks, and more, to rank the web pages. The goal is to provide the most relevant and useful results for the user's query.

5.Search Results: Google presents the search results on its search engine results page (SERP). The top-ranked results are typically considered the most relevant and authoritative based on the ranking algorithms. Google also includes additional features on the SERP, such as ads, featured snippets, knowledge panels, images, videos, and other specialized content, depending on the nature of the query.

6.Continuous Improvement: Google continually updates and refines its search algorithms to deliver better search results. They regularly introduce algorithm updates to address spam, improve the quality of search results, and adapt to changes in user behavior and technology.

7.User Feedback and Evaluation: Google takes user feedback seriously and uses it to refine its search results. Users can provide feedback on the quality and relevance of search results through features like "Did you find what you were looking for?" or by reporting issues directly to Google. This feedback helps Google identify areas for improvement and refine its algorithms further.


References:
[wikipedia](https://en.wikipedia.org/wiki/Google_Search)
[stanford publication](http://infolab.stanford.edu/~backrub/google.html)
StoryTiling - Let your employees know they matter
Tags: video, recognition, retention, culture
Published: 2023-06-16 18:08:10

StoryTiling helps companies recognize their employees with personalized films for any occasion, such as work anniversaries, onboarding, achievements, etc. StoryTiling offers companies an easy and automated way to make recognition personal every time by collecting personal messages from their teams and colleagues to create a highly personalized, auto-edited video.

[https://storytiling.com](https://storytiling.com)
pgsql Cheatsheet
Tags: postgres, postgressql, beginners, productivity
Published: 2023-06-16 17:59:55

One of my recent tasks was the migration of a small spring boot web service to openshift. The webservice works with a postgres which runs in an openshift pod. I had to migrate the database as well. 

The psql CLI Tool came in very handy with working with the database. I could get stuff done quickly and work directly on the openshift pods. 

Here are my Notes on the psql Tool: 

### Get help 

From the shell: 

```shell
psql --help
```

While running the tool: 
```
postgres=# \?
```
### Connect to a database

```shell 
psql <database name> [--User <username>]
```

Example: 
```shell 
psql TESTDB --User testuser
```

### Quit psql 

``` 
postgres=#\q 
```

### list all tables 

``` 
postgres=#\dt
```

### list all sequences 

```
postgres=#\ds 
```

### list all users on the data base 
```
postgres=#\du
```

### Execute SQL Queries and Scripts

From the command line: 
```
psql <database name> [--User <username> -c <command> 
psql <database name> [--User <Username>] -f <Filename>
```

From the running psql tool you can just write your sql statements:
```
postgres=#select * from TESTTABLE; 
```

## Some more command line tools. 

### Drop a database

Besides the SQL Drop Database Statement postgres offers another cli utility: dropdb 

```shell
dropdb <connection parameters> <options> <database name>
```
  
### Create a Data Dump
To backup data the pg_dump tool might come in handy. The pattern for it is the following: 

```shell
 pg_dump --table=<tablename> --data-only --column-inserts <databasename>
```
DAY 13 - House Robber
Tags: programming, learning, cpp, beginners
Published: 2023-06-16 17:58:36

Hello to anyone reading this. I am still relatively new to coding and this platform as well, so please feel free to drop any corrections/advice for me.
I am trying to do the 100 Day-Challenge of consistent coding and this is Day-13.

## DAY 13 Problem 1: House Robber

_You are a professional robber planning to rob houses along a street. Each house has a certain amount of money stashed, the only constraint stopping you from robbing each of them is that adjacent houses have security systems connected and it will automatically contact the police if two adjacent houses were broken into on the same night._

_Given an integer array nums representing the amount of money of each house, return the maximum amount of money you can rob tonight without alerting the police._

**Example:**

> Input: nums = [1,2,3,1]
> Output: 4
> Explanation: Rob house 1 (money = 1) and then rob house 3 (money = 3).
> Total amount you can rob = 1 + 3 = 4.

## Intuition: 
Well This problem can seem pretty tricky at first. One might even think of using greedy in this case as it requires us to maximize our profit. But greedy focuses on the local optimum solution and hence misses the mark here. We will have to use DP here.

## Approach:
The way to look at this problem is in a recursive way.
Just like we did in combination sum, we have to options:
Either to rob the house/include the house in our profits or not include the house.
We will follow that approach and reduce down its complexity using tabulation Dynamic Programming.

Code:

```
int solve(vector<int> &nums)
    {int n = nums.size();
        vector<int> dp(n+1,0);
        dp[0] = nums[0];
        dp[1] = max(nums[0],nums[1]);
        for(int i = 1; i < n; i++)
        {
            int incl = dp[i-2] + nums[i];
            int excl = dp[i-1];
            dp[i] = max(incl, excl);
        }
        return dp[n-1];
        
    }
    int rob(vector<int>& nums) {
        return solve(nums);
        
    }
```
**Complexity Analysis:**

> Time Complexity: O(N)
> Space Complexity: O(N)

We can further reduce the space complexity. If we look closely, the indexes dp[i],dp[i-1] and dp[i-2] are just changing their positions relative to each other.
Hence we don't need to maintain a full array count but rather two pointers for this.

Code:

```
int solve(vector<int> &nums)
    {int n = nums.size();
        vector<int> dp(n+1,0);
        int prev2 = 0;
        int prev = nums[0];
    
        for(int i = 1; i < n; i++)
        {
            int incl = prev2+ nums[i];
            int excl = prev;
            int ans = max(incl, excl);
            prev2 = prev;
            prev = ans;
        }
        return prev;
        
    }
int rob(vector<int> &nums){
    return solve(nums);
}

```

**Complexity Analysis:**

> Time Complexity: O(N)
> Space Complexity: O(1)
Quick Interview Crack (Unordered map)
Published: 2023-06-16 17:52:46

Unordered map is a data structure in C++, which contains key value pairs. It can contain any type of pairs.


## Introduction
Unordered set is implemented as hash table. It creates indices through hash table. As a result, the element inside the map is unordered where in map the keys are inserted in increasing order. And for searching an element in map takes O(logn) time where in unordered map the time complexity of searching an element is O(1). 

## Why is it different than unordered set?
We can use unordered set when we only work with integers because unordered map contains value by indexes but we can set key value pair of any type in unordered map which is quite helpful to solve code problems in less time. Some of the common methods of unordered map are insert, delete, search etc.

## How to use unordered map?

```
#include<unordered_map>

unordered_map<string, string> umap;

//inserting an element
umap["Fruit"] = "Apple";
umap["Flower"] = "Lily";

cout << umap["Flower"] << endl;
//Output Lily
```
Operators in Apache age
Tags: apache, age, postgressql, json
Published: 2023-06-16 17:33:15

# Operators in Age
In the article we will talk about different operators in apache age:

## String Specific Comparison Operators
### Data Setup
Setting up sample data
```
SELECT * FROM cypher('tutorial', $$
CREATE (:Person {name: 'Talha'}),
       (:Person {name: 'Usman'}),
       (:Person {name: 'Irfan'})
$$) AS (result agtype);
```

### Starts With
The operator performs case sensitive prefix searching on selected strings.

```
SELECT * FROM cypher('tutorial', $$
	MATCH (v:Person)
	WHERE v.name STARTS WITH "T"
	RETURN v.name
$$) AS (names agtype);
```
The above query returns the names of the persons starting with T.

### End With 
Performs case sensitive suffix searching on selected strings. 
Query:

```
SELECT * FROM cypher('tutorial', $$
	MATCH (v:Person)
	WHERE v.name ENDS WITH "a"
	RETURN v.name
$$) AS (names agtype);
```
The above query will return the names of the people ended with a which in this case is 1.

## Regular expressions:
Age also supports the use of POSIX regular expressions using the =~ operator. 

### Basic String Matching:
The =~ operator acts like the = operator when no special characters are provided.

```
SELECT * FROM cypher('tutorial', $$
	MATCH (v:Person)
	WHERE v.name =~ 'Usman'
	RETURN v.name
$$) AS (names agtype);
```

### Case insensitive Search:
Adding ?! at the beginning of the string will make case insensitive comparisons.
Query:
The query below performs case insensitive search 
```
SELECT * FROM cypher('graph_name', $$
	MATCH (v:Person)
	WHERE v.name =~ '(?i)USman'
	RETURN v.name
$$) AS (names agtype);
```
### . Wildcard
. operator acts as a wildcard to match any single character. 
Query: 
The below query will search for any character in our data
```
SELECT * FROM cypher('graph_name', $$
	MATCH (v:Person)
	WHERE v.name =~ 'Usm.n'
	RETURN v.name
$$) AS (names agtype);
```

### The * wildcard
* wildcard see if it matches the zero o more of the previous character. 
Query:
```
SELECT * FROM cypher('graph_name', $$
	MATCH (v:Person)
	WHERE v.name =~ 'Talo*a'
	RETURN v.name
$$) AS (names agtype);
```
The above query will see whether the character behind * matches then prints the name, else print it by eliminating the o.

### The + operator:
The + operator matches to 1 or more the previous character.
Query:
```
SELECT * FROM cypher('tutorial', $$
	MATCH (v:Person)
	WHERE v.name =~ 'Usm+'
	RETURN v.name
$$) AS (names agtype);
```
Solve: objects are not valid as a react child
Tags: react, javascript, reactjsdevelopment
Published: 2023-06-16 17:29:29

In React development, encountering the error message “objects are not valid as a React child” is a common occurrence. This error arises when attempting to directly render an object in JSX, rather than using a valid React child like a string, number, or React element. In this article, we will explore the causes of this error and provide practical solutions to resolve it.

Understanding the Error:
The “Objects are not valid as a React child” error message is React’s way of telling you that you are trying to render an object that is not a valid React component. In React, child components are expected to be React elements or primitives such as strings or numbers, but not plain JavaScript objects.

Read Full Article [Here](https://reactjsguru.com/objects-are-not-valid-as-a-react-child/)
Fuzz testing list CRDTs
Tags: javascript, crdt, webdev, testing
Published: 2023-06-16 16:56:40

In this lates blog post we take a look [how `json-joy` tests its RGA list CRDT implementation](https://jsonjoy.com/blog/fuzz-testing-rga-crdt). json-joy implementation is [highly optimized](https://jsonjoy.com/blog/list-crdt-benchmarks), and optimizations themselves lead to bugs. We use three different fuzzers to verify correctness of our list CRDT implementation:

A fuzzer which simulates two random users editing.

A fuzzer which simulates multiple random users editing.

And finally, a fuzzer which simulates whole JSON, including string CRDT and array CRDT operations, of multiple users concurrently editing a document.

Read more about how we fuzz test [here](https://jsonjoy.com/blog/fuzz-testing-rga-crdt).
Did I learn it? #3
Tags: beginners, programming, cpp, help
Published: 2023-06-16 16:51:55

**ARRAY**

If you have been looking at my reference, you would know that I skipped the whole of chapter 10 after Structs and just went to Chapter 11. Well because I saw something I knew about and was too excited: Arrays.

For the most part, I knew everything that Alex - the website dev - covered like: the intialization, sorting, multidimensional arrays and etc. As a proof, here's something:

```c++
#include <iostream>

using namespace std;

int inHand[100];
int numCard;

bool overTwentyOne()
{
    int Total = 0;
    int cntAce = 0;
    for (int i = 0; i < numCard; i++){
        if (inHand[i] == 74 || inHand[i] == 75 || inHand[i] == 81 ){
            Total += 10;
        }
        else if (inHand[i] == 65){
            cntAce++;
            continue;
        }
        Total = Total + inHand[i];

    }
    if (cntAce == 0 && Total <= 21) return false;
    else if (Total <= 21 - cntAce || Total  <= 11 - cntAce) return false;
    return true;


}

int main()
{
    cin >> numCard;
    for (int i = 0; i < numCard; i++) cin >> inHand[i];
    if (overTwentyOne()) cout << "You are Busted!";
    else cout << "You are Good!";
    return 0;
}
```
Just a simple program that checks if you are Busted given a Blackjack hand. But the codes are a bit messy, so I need some more practice. So if you can recommend me some good websites or fix my code will all be much appreciated!

... And I need advices on blog writing too. Thanks!

**REFERENCE**
[Chapter 11.1 - 11.5](https://www.learncpp.com/)
How to create a confetti effect in HTML?
Tags: webdev, javascript, tutorial, programming
Published: 2023-06-16 16:42:18

Adding a confetti effect to a website can bring an element of celebration and joy to various interactions. This article will explore how to create a confetti effect in HTML using the famous library, [Canvas Confetti,](https://www.npmjs.com/package/canvas-confetti) which allows you to generate colorful and animated confetti particles on a web page.

There are lots of ways you can add confetti to your website. But, in this article, I will share a super simple method to add it to your website.

### Setting up HTML

Inside your HTML file, we need to link a javascript file to it.

```html
<script type="module" src="confetti.js"></script>
```

Note: Please ensure that you include `type="module"` in the script tag; otherwise, the JavaScript code may not function as intended.

```html
<button id="btn">Click me</button>
```

I have created a button to pop confetti upon clicking the button.

### Creating confetti

We’ll be using Canvas Confetti using [Skypack](https://www.skypack.dev/).

Inside your javascript file, add the following code to import the required package to our webpage.

```jsx
import confetti from 'https://cdn.skypack.dev/canvas-confetti';
```

Once finished importing, create a function to initialize the confetti from the imported package,

```jsx
function makeConfetti(){
    confetti()
}
```

Now after creating the function we’ll call it,

```jsx
const btn = document.getElementById("btn")
btn.addEventListener("click", makeConfetti)
```

Tada! You have successfully popped confetti in HTML in just two lines of code.

Source code: https://github.com/dhairyathedev/confetti-tutorial

I hope you have learned something new from this article. Thanks a lot for reading till the end, have a great day!

Credits: Banner Image - Photo by <a href="https://unsplash.com/@dendrolago89?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Damiano Lingauri</a> on <a href="https://unsplash.com/photos/uW_oj3jOPRg?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a>