teleren/devto huggingface dataset:
Mutating Query Params in SvelteKit Without Page Reloads or Navigations
Tags: svelte, javascript, html
Published: 2021-12-24 13:19:04

*This article assumes the reader understands the basics of SvelteKit framework.*

SvelteKit is a rather new framework for building server-side rendered websites. Because it is new, some of the early adopters of the framework were confused on certain usages of the framework. One such confusion was on the usage of query params as seen in these issues: [#2785] (https://github.com/sveltejs/kit/issues/2785), [#969] (https://github.com/sveltejs/kit/issues/969),  [#2811] (https://github.com/sveltejs/kit/issues/2811)  - many people, including myself were confused on how to mutate query params of a page without page reloads or navigations. 

Some of us thought mutating the params property of **$page** store would mutate the query params. But this wasn't the cause because the $page store was a read-only store. 

Since SvelteKit does not provide a way to mutate the query params, my [HOD](https://github.com/si3nloong) and I figured that we use the [History API's replace state](https://developer.mozilla.org/en-US/docs/Web/API/History/replaceState) to mutate the query params.

**The function:**

```typescript
export const replaceStateWithQuery = (values: Record<string, string>) => {
  const url = new URL(window.location.toString());
  for (let [k, v] of Object.entries(values)) {
    if (!!v) {
      url.searchParams.set(encodeURIComponent(k), encodeURIComponent(v));
    } else {
      url.searchParams.delete(k);
    }
  }
  history.replaceState({}, '', url);
};
``` 

**The usage:**

```typescript
  onMount(() => {
    // adds ?foo=bar&john=doe query params to the URL
    replaceStateWithQuery({
      foo: 'bar',
      john: 'doe',
    });
  });
```
The **replaceStateWithQuery** is a function that receives an object of query params and uses the History API's to set these values as the query params of the page. Both the keys and values of the query params will be URL encoded by default. If the value of a query param is `null` or `undefined`, the query will be deleted from the URL.
React JS Important Things
Tags: react
Published: 2021-12-23 17:14:15

**Prototypes**
Components type checking of values used PropTypes. When we pass a props to a child component that time we can check the type of value. Supposed, props should be pass a number but given mistake pass a string that time get the error of website. So we can type checking by propTypes for checking type of data values. If mistake data type then get the warning of console. Many data type checking by propTypes—

- propTypes.symbol
- propTypes.bool
- propTypes.array
- propTypes.string
- propTypes.object
- propTypes.func
- propTypes.number


**JSX**
JSX is stands for JavaScript XML. It is a syntax of extension JavaScript which allows the directly HTML code in React. It is very easy to make template using JSX in React. We write the code in react components these statements are JSX.

**Context API**
Context api is like that store of sate that set in the tower of components. If any component need to data that time import the state from context can use data. We can’t pass child component to parent component data. So context API helps the usage data child component to any component.

**React Props**
When we call a child component in a parent component that time we pass data to child component by props passing. Props bare object or any types value. We pass the state date to child component by props. Props means a properties. Example, we have a parent component name “Person”. From here we pass name and age data to child component “Student” by props. This props is “name” and “age”. Props is a mutable.

**React State**
State is an object of a component. We can store our component data in the state. We can change the data of state. State hold the data of component and it change by the render of component. Example, first we create a state like that—
const [count, setCount] = useState(0);
here we define state initial value 0. Then we create a function and this function implement the state increment value. So the state will be changed if the increment function call. Here count is a variable of state and setCount is a setter function of state. State is an immutable.


**Hooks**
Hooks are new features in React functional component. It’s didn’t use in class component. Hooks are default features in react like that are methods. Many hooks have in react built in.
useState()
useEffect()
useParams()
useContext()
useRef()
useReducer()
useMemo() etc.
We can create our custom hooks. Hooks as like that a function and in the function create a state then return the state of the function. Then which component need the custom hook that time it use import in component. Custom hook example—
import React, {useState} from ‘react’;
const useAuth = () =>{
	const [user, setUser] = useState({});
return {user, setUser};
}
export default useAuth;
Express & CRUD
Published: 2021-12-24 12:58:05

**Express**

**1. What is Express?**
Ans: 
 
Express is the most popular Node framework, and this is the underlying library for a number of other popular Node frameworks. It provides mechanisms to:

1. Write handlers for requests with different HTTP verbs at different URL paths.
2. By inserting data into templates, integrate with view rendering engines in order to generate responses.
3. Set common web application settings like the port to use for connecting, and the location of templates that are used for rendering the response.
4. Add additional request and processing "middleware" at any point within the request handling pipeline.

When Express is fairly minimalist, developers has created compatible middleware packages to address any web development problem. 
There are libraries to work with user logins, cookies, sessions, POST data, URL parameters and many more.

**2. Where did Express come from?**
Ans:

Express was released in November 2010 and it is currently on version 4.17.1. 
For need, you can check out changes in the current release, and GitHub for more detailed historical release notes.

**3. Is Express opinionated?**
Ans:

Web frameworks themselves as "opinionated" or "unopinionated".

Opinionated frameworks are those with opinions about the "right way" to handle any particular task. 
They support rapid development in a particular domain because the right way to do anything is usually well-understand and well-document.

Unopinionated frameworks, by contrast, have far fewer restrictions on the best way to glue components together to achieve goal, and whice components should be used.
They make it easier to developers to use the most suitable tools to complete particular task.

Express is unopinionated. You can insert any compatible middleware into the request handling chain.



**CRUD**

**What is CRUD?**
Ans: 

The four basic concepts are Create, Read, Update, and Delete (CRUD) that should be able to do.

**Create:**

To create resources in a REST environment. Most commonly use the HTTP POST method. POST creates a new resource of the specified resource type.

**Read:**

To read resources in a REST environment, we use the "GET" method. Reading a resource should never change any information.

**Update:**

To update resources in the REST environment, we use "PUT" which is the HTTP method.

**Delete:**

To Delete resources in the REST environment, we use the "DELETE" method.
Julie on JavaScript 😊
Tags: javascript, beginners, webdev, programming
Published: 2021-12-24 12:55:36

Julie had decided to learn JavaScript but she begins basic of Computer, Julie know that the computer is machine whose role is to execute quickly and flawlessly a series of actions
given to it.
Julie wants to write her list of actions to give it To create a program.
Julie wrote These actions take the form of textual commands. 
All these commands she wrote form the program’s source code.
Julie knows The programmer’s task is to create programs. 
To accomplish this goal, 
he can use different
programming languages.
Anagram Partitioning
Tags: 100daysofcode, java, programming, algorithms
Published: 2021-12-24 12:50:02

# [Description](https://binarysearch.com/problems/Anagram-Partitioning)

You are given two non-empty strings `a` and `b` that are the same length. Partition them into substrings such that each pair of `a` and `b`'s substring is the same size and they are anagrams of each other. Return the cut indexes such that it results in the largest number of cuts of `a` and `b`. Return the empty list if no result exists.

**Constraints:** 

- `n ≤ 100,000` where `n` is the length of `a` and `b`

## Example 1

### Input

```
a = "catdogwolf"
b = "actgodflow"
```

### Output

```
[0, 2, 3, 6]
```

### **Explanation**

```
We can cut the string into 4 partitions such that each string is an anagram of each other.

a = ["ca", "t", "dog", "wolf"]

b = ["ac", "t", "god", "flow"]
```

---

## Example 2

### Input

```
a = "study"
b = "dusty"
```

### Output

```
[0, 4]
```

### **Explanation**

```
We can cut the string into 2 partitions:

a = ["stud", "y"]

b = ["dust", "y"]
```

---

# Intuition

1. use 2 arrays, whose size are 26
2. use `Arrays.equals` to compare such arrays

# Implementation

```java
import java.util.*;

class Solution {
    public int[] solve(String a, String b) {
        if (a.length() != b.length()) {
            return new int[] {};
        }
        int[] aArray = new int[26], bArray = new int[26];
        int index = 0, length = a.length();
        ArrayList<Integer> indexes = new ArrayList<>();
        for (int i = 0; i < length; i++) {
            char aChar = a.charAt(i), bChar = b.charAt(i);
            aArray[aChar - 'a']++;
            bArray[bChar - 'a']++;
            if (Arrays.equals(aArray, bArray)) {
                indexes.add(index);
                index = i + 1;
            }
        }
        if (!Arrays.equals(aArray, bArray)) {
            return new int[] {};
        }
        int[] ans = new int[indexes.size()];
        for (int i = 0; i < ans.length; i++) {
            ans[i] = indexes.get(i);
        }
        return ans;
    }
}
```

## Time Complexity

- Time: O(n)
- Space: O(1)
The Complete Guide Of ALL HTML tags
Tags: webdev, html, tutorial, beginners
Published: 2021-12-23 17:13:15

![Complete Guide Of ALL HTML tags](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q0goz94xmucb8iehflhs.jpg)

The Complete Guide Of HTML tags, in a single tutorial, you will learn All HTML Tags with examples. HTML tags like a keyword that describes how the web browser will display the content. With the help of HTML tags, A Browser can differentiate the HTML content and simple content. However, HTML tags having three important parts:
Opening tag `<>`  closing `</>` tag and content. But many HTML tags are unclosed.

An HTML Document/Page must have some vital HTML tags in which a web browser can distinguish between simple and HTML content.

###HTML <!--...--> Tag

```HTML
<!--This is a comment. Comments are not displayed in the browser-->
<p>This is a paragraph.</p>
```
###HTML <!DOCTYPE> Declaration
```HTML
<!DOCTYPE html>
<p>The content of the document......</p>
```
###HTML `<a>` Tag
```HTML
<a href="https://www.softcodeon.com">Soft Codeon!</a>
```

###HTML `<abbr>`  and `<acronym>` Tag
```HTML
<h1>The abbr element</h1>
<p>Using <abbr title="Learn HTML">HTML</abbr> is fun and easy!</p>
<h1>The acronym element</h1>
Can I get this <acronym title="Learn HTML">HTML Guide</acronym>?
<p><strong>Note:</strong> The acronym element is not supported in HTML5.</p>

```
###HTML <address> Tag
```HTML
<h3>HTML <span style="color: #000000;">&lt;area&gt;</span> Tag</h3>
<p>The <strong>&lt;area&gt;</strong> tag describe an area inside an image-map. This element is always nested inside <strong>&lt;map&gt;</strong> element.</p>
```

###HTML `<article>` Tag
```HTML
<article>
<h2>Google Chrome</h2>
<p>Google Chrome is a web browser developed by Google, released in 2008. Chrome is the world's most popular web browser today!</p>
</article>
```

###HTML `<caption>` Tag
```HTML
<table>
  <caption>Monthly savings</caption>
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
```

###HTML DL Tag
```HTML
<p>These three elements are use to create a description list:</p>
<dl>
  <dt>Coffee</dt>
  <dd>Black hot drink</dd>
  <dt>Milk</dt>
  <dd>White cold drink</dd>
</dl>
```
I shared this post from [Complete Guide Of ALL HTML tags](https://softcodeon.com/html/complete-guide-of-all-html-tags.htm) you can read in detail from there.

If you have any question please discuss below help to improve. Thank you.
Database
Published: 2021-12-24 12:28:12

**JWT **

> JWT access token means a compact and self-contained way for securely transmitting information between parties as a JSON object. JWT normally uses a secret key to secure from others. 
> We use this for authorization and information exchange. Most common for using this JWT for authorization. When a user logged in, each subsequent request will include the JWT and allow the user to access routes, services and resources that are permitted with that token. 
> Other information exchange means when JSON web tokens are a good way of securely transmitting information between parties. 
> JSON web tokens consist of three parts separated by dots( . ),which are mainly: Header, Payload and Signature.
 

**CRUD Operations **

> When we worked with a database we must know about CRUD Operations. We need to know four basic functions of persistent storage. They are: create, read, update and delete. It is the foundation of most dynamic websites. We need to differentiate CRUD from the HTTP action verbs. 
> When you want to create a new record on your database you should use the ‘POST’ method. If you need something to update your database you need to use the ‘PUT or PATCH’ method and sometimes you need to delete something from your database you need to use the method ‘DELETE’. Using these CRUD Operations users can edit, update, delete or browse the record database.
> CRUD operations are very useful for a programmer. A programmer handles this very easily. CRUD operations performance is very useful for us. The SQL server will create a new execution plan for the query. You can remove, add something using these CRUD operations.


**What is Nodejs? Difference between Nodejs and javaScript **

> Nodejs is a popular tool for any project with an open-source, cross-platform JavaScript runtime environment. Nodejs library runs web applications outside the client’s browser. Nodejs used to create server-side web applications.
> Difference between Nodejs and javaScript are : 
> Nodejs : Nodejs is a Javascript runtime environment. Mostly used on the server-side. Written in C,C++ and Javascript. Express js is a nodeJs module.
> JavaScript : A programming language that is used for writing scripts on the website. Used on the client-side. Written in C++.  Frameworks are RamdaJs, TypeJs.

**Relational database (MySql) **

> MySql Relational Database is a collection of data items with pre-defined relationships between them. It is an assemblage of relational data that is structured or organized in the form of tables, columns and rows and tables represent the objects, columns represent the fields and rows represent  the records. SQL is a programming language which is used to create, update, delete and manage the tables and its contents, as MYSQL is supported with the basic SQL queries.
Backend server
Published: 2021-12-24 12:22:22

Node.js is a non-blocking and single-threaded JS engine. It is used for back-end API services. With the use of Node.js, we can create dynamic page, access files by collecting data.
 
I built a website which is an e-commerce platform. I need to store a lot of data for the products. MongoDB is an important database system for this type of data. I stored data in their database server and used it in my website.
 
MongoDB is an open source NoSQL database management program. We need to store so much information on the website. MongoDB is a user-friendly, secured and flexible interface for the developers. I used their database for storing product’s details/information in my last ecommerce website. 
 
JSON Web Token (JWT) is a security system to hold information about a user. When a user login to a website, the website holds some basic information (UserID, Email and so on) to recognize a specific user. When he/she logged in or placed any request, the authority checked by the JWT token without sending private credentials on every request. It expires within 02 hours.
 

 
It doesn’t require a database system because the data store in the JWT sent to the client is safe. This information can be verified and trusted because of authority authentication. 
 
There are some other token systems to verify users.
OAuth2.
Passport.
Spring Security.
Auth0.
Amazon Cognito.
Keycloak.
Firebase Authentication.
Devise.
 
SQL stands for Structured Query Language. SQL is called a Relational Database Management System. SQL is vertically scalable. SQL is table-based. SQL is better for multi-row transactions.
 
NoSQL stands for non-relational SQL. NoSQL is a Non-relational or distributed database system. NoSQL databases are horizontally scalable. NoSQL document based databases where we store large datasets. NoSQL is better for unstructured data.
 
CRUD stands for Create (insert operation), Read (recover documents from collection), Update (modify documents in a collection), and Delete (remove documents from the collection) of database systems in the web application and primitive operations.
Iya Elepo App Part 5 (Removing Hardcoded password from user creation process)
Tags: radzen, blazor
Published: 2021-12-24 11:38:27

In this video,I improve the process of creating a new application user from the add customer screen by replacing the hardcoded value from the last tutorial with the one received from the user interface.

{% youtube GJxrGhpMSA0 %}


Source code and database files can be pulled from {% github benjaminsqlserver/IyaElepoAppLessonFive %}
Which One Is Better Drupal or WordPress For Website Development Services?
Tags: wordpress, drupal
Published: 2021-12-24 11:14:42

<p>WordPress is a popular blogging medium, and various hosting providers are available. But it is not the only way for website development. Another popular content managing system is Drupal. Both these systems help you in creating and managing content on your website.&nbsp;</p>
<p>Are you confused about which system to use for&nbsp;website development services?&nbsp;Let us go through the differences between WordPress and Drupal that will help you understand better.</p>
<h2>Ease of Usage</h2>
<p>When it comes to ease of usage, WordPress is the winner. It is easy to create a fully functional website from scratch through this platform. The interface that it offers is easy, even for casual users.</p>
<p>The scenario is exactly the opposite with Drupal. All the plugins are custom codes. So you will need a developer for the good looks of your website. Its interface is not at all comprehensive for casual users.</p>
<h2>Security Offered</h2>
<p>Both the mediums offer a safe and secure environment for development. However, in the real world, Drupal is more secure. The third-party involvement in WordPress is the reason for many flaws in the system. The reason for the popularity of Drupal is the lockdown security that this system offers. Drupal provides enterprise-level safety, publishes security reports in detail, and is transparent compared to WordPress.</p>
<h3>Last Remark</h3>
<p>It is hard to say which one is a better platform between WordPress and Drupal. To choose one of the two platforms for <a href="https://www.webomindapps.com/"><strong>website development services</strong></a>. You should consider anyone while building a website.&nbsp;</p>
JavaScript
Published: 2021-12-24 11:14:20

PropTypes?

	PropTypes are a mechanism to ensure that components use the correct data type and pass the right data, and that components use the right type of props, and that receiving components receive the right type of props.


JSX?

	JSX stands for JavaScript XML. It is simply a syntax extension of JavaScript. It allows us to directly write HTML in React . It is easy to create a template using JSX in React, but it is not a simple template language instead it comes with the full power of JavaScript.


Component lifecycle?

	Components are created (mounted on the DOM), grow by updating, and then die (unmount on DOM). This is referred to as a component lifecycle. There are different lifecycle methods that React provides at different phases of a component's life. At present, we know what lifecycle methods are and why they are important.



custom hooks?

	Custom Hook is a JavaScript function which we create by ourselves, when we want to share logic between other JavaScript functions. It allows you to reuse some piece of code in several parts of your app.


context API?

	React's context allows you to share information to any component, by storing it in a central place and allowing access to any component that requests it.
So you want to do Google Summer of Code with the Julia Language
Tags: opensource, julialang, juliaprogramming, gsoc
Published: 2021-12-24 11:00:10

---
title: So you want to do Google Summer of Code with the Julia Language
published: true
date: 2021-12-24 10:59:00 UTC
tags: opensource,julialang,juliaprogramming,gsoc
canonical_url: https://medium.com/@logankilpatrick/so-you-want-to-do-google-summer-of-code-with-the-julia-language-bffb8d3b280e
---

[![](https://cdn-images-1.medium.com/max/1600/1*ENWYufKYD1ZUxbVE1HRNoA.png)](https://medium.com/@logankilpatrick/so-you-want-to-do-google-summer-of-code-with-the-julia-language-bffb8d3b280e?source=rss-2c8aac9051d3------2)

With the announcement of expanded eligibility for Google Summer of Code (GSoC), there are likely to be a lot of new folks considering…

[Continue reading on Medium »](https://medium.com/@logankilpatrick/so-you-want-to-do-google-summer-of-code-with-the-julia-language-bffb8d3b280e?source=rss-2c8aac9051d3------2)