teleren/devto huggingface dataset:
Permanent Mounting Partition Using fstab
Tags: linux, ubuntu, devops, systems
Published: 2024-02-11 14:16:56

Postingan ini membahas bagaimana mounting partisi permanen di linux bahkan setelah di reboot sekalipun.
Seperti biasa kita akan bermain dengan studi kasus.
Pada kasus kali ini kita hanya akan mounting partisi windows ke dalama Arch Linux secara permanent, kita langsung masuk pembahasan.

Untuk mounting file permanent kita akan menggunakan `fstab` dimana nanti akan kita tulis lokasi partisi kita dan mount pointnya didalam file tersebut. Pada dasarnya format penulisan pada `fstab` adalah seperti berikut

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

1. _**Device**_, ini adalah block device yg akan di pasang.
2. _**Mount Point**_, adalah lokasi diamana berkas akan di mounting
3. _**File System**_, ini merupakan jenis file sistem yang akan di pasang
4. _**Options**_, pada bagian ini dituliskan opsi-opsi pada mount point 
5. _**Dump**_, mengaktifkan atau menonaktifkan pencadangan perangkat/partisi dengan perintah dump
6. _**Pass Num**_, mengontrol prioritas fsck memeriksa kesalahan perangkat/partisi saat boot. 1 untuk root artinya pertama, 2 untuk prioritas setelahnya dan 0 untuk skip atau tidak di periksa

Berikut langakah untuk mounting partisinya
Gunakan perintah berikut untuk mendapatkan `UUID` dan `Mountpoint`

```
lsblk -f
```

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

lalu gunakan perintah ini untuk mendapatakan type `file system` dan `options` yang digunakan

```
findmnt
```

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

Setelah semua sudah di dapatkan tinggal menuliskannya pada `fstab`, gunakan perintah berikut 

```
nano /etc/fstab
```
Pada kasus study case ini saya menulisakanya pada baris paling bawah dengan memberi keterangan dengan komentar

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

```
# /dev/sda1 Mount point Windows
UUID=76FE523DFE51F5B9	/run/media/clay/ITSupport     	ntfs3      	rw,nosuid,nodev,relatime,uid=1000,gid=984,iocharset=utf8	0 0
```
Setelah sudah bisa langsung di save & exit, coba lakuakan restart untuk menguji apakah sudah berhasil mounting permanent atau tidak.

**Referensi**:
[https://help.ubuntu.com/community/Fstab](https://help.ubuntu.com/community/Fstab)
Available configurer in HttpSecurity class
Tags: spring, springsecurity
Published: 2024-02-11 14:11:30

## Notice

I wrote this article and was originally published on [Qiita](https://qiita.com/saladlam/items/9b6094649efa228040bf) on 16 September 2019.

---

| Method in class HttpSecurity | Configurer |
| --- | --- |
| openidLogin() | org.springframework.security.config.annotation.web.configurers.openid.OpenIDLoginConfigurer |
| headers() | org.springframework.security.config.annotation.web.configurers.HeadersConfigurer |
| cors() | org.springframework.security.config.annotation.web.configurers.CorsConfigurer |
| sessionManagement() | org.springframework.security.config.annotation.web.configurers.SessionManagementConfigurer |
| portMapper() | org.springframework.security.config.annotation.web.configurers.PortMapperConfigurer |
| jee() | org.springframework.security.config.annotation.web.configurers.JeeConfigurer |
| x509() | org.springframework.security.config.annotation.web.configurers.X509Configurer |
| rememberMe() | org.springframework.security.config.annotation.web.configurers.RememberMeConfigurer |
| authorizeRequests() | org.springframework.security.config.annotation.web.configurers.ExpressionUrlAuthorizationConfigurer.ExpressionInterceptUrlRegistry |
| requestCache() | org.springframework.security.config.annotation.web.configurers.RequestCacheConfigurer |
| exceptionHandling() | org.springframework.security.config.annotation.web.configurers.ExceptionHandlingConfigurer |
| securityContext() | org.springframework.security.config.annotation.web.configurers.SecurityContextConfigurer |
| servletApi() | org.springframework.security.config.annotation.web.configurers.ServletApiConfigurer |
| csrf() | org.springframework.security.config.annotation.web.configurers.CsrfConfigurer |
| logout() | org.springframework.security.config.annotation.web.configurers.LogoutConfigurer |
| anonymous() | org.springframework.security.config.annotation.web.configurers.AnonymousConfigurer |
| formLogin() | org.springframework.security.config.annotation.web.configurers.FormLoginConfigurer |
| oauth2Login() | org.springframework.security.config.annotation.web.configurers.oauth2.client.OAuth2LoginConfigurer |
| oauth2Client() | org.springframework.security.config.annotation.web.configurers.oauth2.client.OAuth2ClientConfigurer |
| oauth2ResourceServer() | org.springframework.security.config.annotation.web.configurers.oauth2.server.resource.OAuth2ResourceServerConfigurer |
| requiresChannel() | org.springframework.security.config.annotation.web.configurers.ChannelSecurityConfigurer.ChannelRequestMatcherRegistry |
| httpBasic() | org.springframework.security.config.annotation.web.configurers.HttpBasicConfigurer |
| requestMatchers() | org.springframework.security.config.annotation.web.builders.HttpSecurity.RequestMatcherConfigurer |
Function of OpenEntityManagerInViewInterceptor Spring MVC interceptor
Tags: spring, springmvc
Published: 2024-02-11 14:05:04

## Notice

I wrote this article and was originally published on [Qiita](https://qiita.com/saladlam/items/7108b260f83852e317f0) on 13 September 2019.

---

# Function of OpenEntityManagerInViewInterceptor
1. Create a EntityManager instance and bind it to thread when start processing HTTP request
2. Close the EntityManager instance created before when finish processing HTTP request

# Why need it?
Assume entity A, its property 'type' set to entity B. Entity A is created by EntityManager, which is set to lazy loading. This EntityManager instance may be closed if a transaction loading entity A is finished. And then property 'type' of enitiy A is accessed on view layer. Since entity B is a proxy instance and being load if necessary. In order to load entity B, EntityManager which created entity A is necessary. At moment on view layer that EntityManager is gone. As result exception occurs.

If OpenEntityManagerInViewInterceptor is enabled, the EntityManager instance is available at the moment on view layer.

# How to enable it in Spring Boot?
OpenEntityManagerInViewInterceptor is enabled by default. Or you may enable it explicitly by adding below line in property file 'application.properties'.

```
spring.jpa.open-in-view=true
```
What happen of a class annotated with @Transactional
Tags: spring
Published: 2024-02-11 14:02:40

## Notice

I wrote this article and was originally published on [Qiita](https://qiita.com/saladlam/items/4118c228dd23e4dff2e1) on 12 September 2019.

---

# Proxy class is created when class is annotated with @Transactional

In my [notice board example application](https://github.com/saladlam/spring-noticeboard), class *info.saladlam.example.spring.noticeboard.service.MessageServiceImpl* is annotated with **@Transactional**. When bean factory processes this class, proxy instance of this class, with *org.springframework.transaction.interceptor.TransactionInterceptor* set is created. You may view the actual instance of *MessageService* from Eclipse's debugger.

![eclipse_debug_messageservice.png](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/43vq0g29w5cj9m79rrgh.png)

# Function of TransactionInterceptor

1. Send begin transaction and commit signal to PlatformTransactionManager instance
2. Handling exception case

Below is code from method *org.springframework.transaction.interceptor.TransactionAspectSupport.invokeWithinTransaction(Method, Class<?>, InvocationCallback)*.

```java
// ...
		// If the transaction attribute is null, the method is non-transactional.
		TransactionAttributeSource tas = getTransactionAttributeSource();
		final TransactionAttribute txAttr = (tas != null ? tas.getTransactionAttribute(method, targetClass) : null);
		final org.springframework.transaction.interceptor.TransactionAspectSupport.invokeWithinTransaction(Method, Class<?>, InvocationCallback) tm = determineTransactionManager(txAttr);
		final String joinpointIdentification = methodIdentification(method, targetClass, txAttr);

		if (txAttr == null || !(tm instanceof CallbackPreferringPlatformTransactionManager)) {
			// Standard transaction demarcation with getTransaction and commit/rollback calls.
			TransactionInfo txInfo = createTransactionIfNecessary(tm, txAttr, joinpointIdentification);

			Object retVal;
			try {
				// This is an around advice: Invoke the next interceptor in the chain.
				// This will normally result in a target object being invoked.
				retVal = invocation.proceedWithInvocation();
			}
			catch (Throwable ex) {
				// target invocation exception
				completeTransactionAfterThrowing(txInfo, ex);
				throw ex;
			}
			finally {
				cleanupTransactionInfo(txInfo);
			}
			commitTransactionAfterReturning(txInfo);
			return retVal;
		}
// ...
```

When program executes to

```java
retVal = invocation.proceedWithInvocation();
```

method of *info.saladlam.example.spring.noticeboard.service.MessageServiceImpl* is called.

# Function of PlatformTransactionManager

In Spring Framework context there is a singleton *PlatformTransactionManager* instance. In this application, the implementation is *org.springframework.jdbc.datasource.DataSourceTransactionManager*. This class is for handle all transaction action happened.
Importance of Digital Marketing
Published: 2024-02-11 14:01:55

[The importance of digital marketing](https://nithyaraj.com/) cannot be overstated. It serves as a vital tool for businesses to reach and engage with their target audience effectively. Unlike traditional marketing methods, digital marketing leverages online platforms like social media, search engines, and websites to promote products or services.

Compared to traditional advertising channels such as TV or print media, digital marketing allows businesses to reach a larger audience at a fraction of the cost. This makes it particularly beneficial for small businesses and startups with limited budgets.

Moreover, [digital marketing offers](https://nithyaraj.com/) unparalleled targeting capabilities. Through techniques like search engine optimization (SEO) and social media advertising, businesses can precisely target their desired audience based on demographics, interests, and online behavior. This ensures that marketing efforts are directed towards those most likely to convert into customers.



In conclusion, [digital marketing](https://nithyaraj.com/) plays a crucial role in helping businesses thrive in today's competitive landscape. Its affordability, targeting capabilities, and analytical tools make it an indispensable tool for reaching and engaging with customers in the digital age.
How to add typescript types to a pinia options store 🍍
Tags: vue, testing, pinia
Published: 2024-02-11 13:59:55




```typescript
import { _GettersTree, defineStore } from 'pinia';

interface Todo {
  todo: string;
}

interface State {
  count: number;
  todos: Todo[];
}

interface Actions {
  addTodo: (todo: Todo) => void;
  increment: () => void;
  resetState: () => void;
}

interface Getters extends _GettersTree<State> {
  getCount: () => number;
  getTodos: () => Todo[];
}

export const useMyStore = defineStore<string, State, Getters, Actions>({
  id: 'todo',
  state: () => ({
    count: 0,
    todos: [],
  }),
  getters: {
    getCount() {
      return this.count;
    },
    getTodos() {
      return this.todos;
    },
  },
  actions: {
    increment() {
      this.count++;
    },
    addTodo(todo) {
      this.todos.push(todo);
    },
    resetState() {
      this.count = 0;
      this.todos = [];
    },
  },
});
```
Spring Data JPA demonstration
Tags: spring, springdata
Published: 2024-02-11 13:59:11

## Notice

I wrote this article and was originally published on [Qiita](https://qiita.com/saladlam/items/479a2fe2513c4b028d5b) on 11 September 2019.

---

On before I made a Spring boot example application, now I made a change on it to show how to use Spring Data JPA. Following change is made

-   change repository layer from by using JDBC directly to by using Spring Data JPA
-   get user information by using Spring Data JPA when login

You may download source code from [here](https://github.com/saladlam/spring-noticeboard/tree/spring-data-jpa).
Maximize Your Style: Unveiling the Best Maxi Dresses for Women in 2024
Published: 2024-02-11 13:55:38

Embark on a fashion journey as we delve into the epitome of style, comfort, and sophistication with the ultimate guide to the best maxi dresses for women in 2024. These aren't just garments; they're a celebration of femininity, designed to redefine your wardrobe and elevate your style to new heights.

**[Exploring the Best Maxi Dresses for Women in 2024](https://www.rialine.co.uk/)**

Versatility Beyond Compare:
Maxi dresses have long been recognized for their seamless transition from casual daywear to captivating evening allure. In 2024, this versatility takes center stage with designs that effortlessly adapt to various settings. Whether you're strolling through the city or attending an upscale soirée, the best maxi dresses are curated to enhance your confidence and style.

Flattering Every Figure:
Celebrate the diversity of body shapes with maxi dresses meticulously designed to flatter and accentuate. In the spirit of inclusivity, 2024 introduces a range of styles that embrace the unique curves of every woman. From flowing silhouettes to tailored fits, these dresses empower women to embrace their individual beauty with grace.

Effortless Elegance:
Maxi dresses continue to exude an air of effortlessness in 2024. Designs embody a sense of easygoing elegance, making them suitable for various occasions. Whether navigating city streets or attending a formal event, the best maxi dresses effortlessly marry comfort with sophistication, creating a timeless and refined look.

Trendsetting Prints and Patterns:
Immerse yourself in a world of prints and patterns defining the fashion landscape of 2024. Bold geometric designs and delicate floral motifs take center stage, offering a diverse range to cater to individual tastes. The best maxi dresses embrace these trends, allowing you to make a stylish statement that resonates with your personal fashion preferences.

Luxurious Comfort:
In a fast-paced world, comfort remains paramount. The best maxi dresses in 2024 are crafted from sumptuous fabrics that not only feel delightful against the skin but also contribute to an overall sense of well-being. Bridging the gap between fashion and comfort, these dresses ensure you move through your day with both style and ease.

Day-to-Night Transformation:
Experience the transformative power of maxi dresses as they seamlessly adapt to different settings. From casual daytime looks paired with sandals to elevated evening ensembles with heels and accessories, these dresses are designed for a seamless day-to-night transition. This adaptability ensures your style remains impeccable, regardless of the occasion.

Embark on a style odyssey with the best maxi dresses for women in 2024, where each piece is a celebration of femininity, comfort, and contemporary sophistication. Whether you lean towards classic silhouettes or embrace bold, contemporary prints, these dresses are poised to become the cornerstone of your fashion repertoire. Elevate your style effortlessly and embrace the allure of the best maxi dresses for women this year!
Spring boot example application: notice board
Tags: spring, springboot
Published: 2024-02-11 13:51:09

## Notice

I wrote this article and was originally published on [Qiita](https://qiita.com/saladlam/items/6979f434762c565c061f) on 3 September 2019.

---

# Objective

I write this application is for explain the mechanism of different component of Spring framework. This can also be used as playground for testing components of Spring Framework.

# Function
- Display notice on stated time
- Approval before display
- Multi language UI

# Main component used
- Spring Boot 2.1.X
- Spring MVC 5.1.X with thymeleaf 3.0.X
- Spring Security 5.1.X
- Spring JDBC 5.1.X
- Dozer 5.5.X

# Database
Data stored in embedded H2 database. Schema and data is imported when application start and all data will be lost after application shutdown.

# Prerequisite
- Java SE Development Kit 8 or above
- Internet connection

# Compile and run
Apache Maven wrapper is included, no addition package manager is necessary.

## Compile (On Microsoft Windows)
```
mvnw package
```

## Run (On Microsoft Windows)
```
mvnw spring-boot:run
```

Open browser and enter "http://localhost:8080". Press Ctrl+C to stop.

# Account
| Username | Password | Authorities |
|:-------- |:-------- |:----------- |
| user1    | user1    | USER        |
| user2    | user2    | USER        |
| admin    | admin    | USER, ADMIN |

# Source code
You may download source code from [here](https://github.com/saladlam/spring-noticeboard).
What is the difference between real DOM and virtual DOM with example?
Tags: webdev, react, javascript, frontend
Published: 2024-02-11 13:49:37

Let's illustrate the difference between real DOM updates and virtual DOM updates with an example scenario:

**Scenario:**

Imagine you're building a web application that displays a list of items, and users can add new items to the list by clicking a button.

**1. Real DOM Updates:**

In this approach, every time a new item is added to the list, the real DOM is directly manipulated to reflect the change.

```javascript
// HTML
<ul id="item-list"></ul>

// JavaScript
const itemList = document.getElementById('item-list');

function addItem() {
    const newItem = document.createElement('li');
    newItem.textContent = 'New Item';
    itemList.appendChild(newItem);
}
```

**Problem with Real DOM Updates:**

- Each time `addItem()` is called, the real DOM is modified, triggering reflows and repaints.
- If there are many items in the list, frequent updates can lead to performance issues, causing the interface to become less responsive.

**2. Virtual DOM Updates:**

In this approach, instead of directly modifying the real DOM, changes are made to a virtual representation of the DOM first, and then the virtual DOM is compared with the previous state to determine the minimal set of updates needed.

```javascript
// React.js example
import React, { useState } from 'react';

function ItemList() {
    const [items, setItems] = useState([]);

    function addItem() {
        setItems(prevItems => [...prevItems, 'New Item']);
    }

    return (
        <div>
            <button onClick={addItem}>Add Item</button>
            <ul>
                {items.map((item, index) => (
                    <li key={index}>{item}</li>
                ))}
            </ul>
        </div>
    );
}
```

**How Virtual DOM Addresses the Problems:**

- When `addItem()` is called, React.js updates the virtual DOM by adding a new item to the list.
- React.js then calculates the difference (diff) between the new virtual DOM and the previous one.
- Only the minimal set of changes needed to update the real DOM is applied, avoiding unnecessary reflows and repaints.
- This approach results in better performance and a smoother user experience, especially in applications with dynamic content or frequent updates.

In summary, the virtual DOM provides an efficient and optimized way to update the real DOM, improving performance and user experience in web applications.
What is Virtual DOM in React?
Tags: webdev, react, javascript, frontend
Published: 2024-02-11 13:46:05

The Virtual DOM (Document Object Model) is a concept used in web development frameworks like React.js to optimize the performance of web applications. It's a virtual representation of the DOM tree, which is a hierarchical representation of HTML elements in a web page.

Here's how the Virtual DOM works:

1. **Virtual DOM Creation:** When changes are made to the data or state of a web application (for example, when a user interacts with the interface), React.js creates a new virtual DOM tree that reflects these changes. This virtual DOM tree is a lightweight, in-memory representation of the actual DOM.

2. **Difference Calculation:** After the virtual DOM is updated, React.js compares it with the previous virtual DOM (created before the change). It calculates the differences, or "diffs," between the two virtual DOM trees to determine which parts of the actual DOM need to be updated.

3. **Minimal DOM Updates:** Instead of directly updating the entire DOM, React.js identifies only the specific elements that have changed based on the calculated differences. It then updates these elements in the actual DOM, minimizing the number of DOM manipulations required.

4. **Batched Updates:** React.js may batch multiple updates together and perform them in a single pass to further optimize performance. This reduces the overhead associated with frequent DOM updates and enhances the responsiveness of the web application.

By using the Virtual DOM, React.js and similar frameworks can achieve faster rendering performance and better overall efficiency compared to directly manipulating the actual DOM. This approach allows developers to create dynamic and interactive web applications with smoother user experiences.
Deprecation of WebMvcConfigurerAdapter class from Spring MVC 5
Tags: spring, springmvc
Published: 2024-02-11 13:39:39

## Notice

I wrote this article and was originally published on [Qiita](https://qiita.com/saladlam/items/06bcc98a626568311ac5) on 27 August 2019.

---

Thanks to feature of defining default method in interface in Java 8, start from Spring MVC 5, configuration by using org.springframework.web.servlet.config.annotation.WebMvcConfigurerAdapter is not necessary. Just using org.springframework.web.servlet.config.annotation.WebMvcConfigurer interface and implement functions you need.
Probably a BUG in Node v20.11!
Published: 2024-02-11 13:32:03

Lately, I installed Node latest LTS 2.11 version to test a very simple Node application locally (i.e localhost) using Express API code base where I tried to execute a GET call through (any) 'Browser' and Postman. 
But the request had never been able to reach the server where as the server was on!
I was very confused and worried about my antivirus, windows firewall etc etc.
Later, spending so many hours, I uninstalled v20.11 and reinstalled v18.19 and everything started working!
So, it seems like there is a problem/bug in v20.11!!!

Here is the code...
//api.js
const express = require("express");
const server = express();

server.get("/api", (req, res) => {
  console.log("request data:", req);
  res.send("Server: I am listening.");
});

const port = 8080;
server.listen(port, () => {
  console.log(`Server is running on port ${port}`);
});

//packages.json
{
  "name": "api",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "express": "^4.18.2"
  }
}

Ran as http://localhost:8080/api

Though things are working well in v18.19, but would like to receive all of your feedbacks regarding not working in v20.11.