teleren/devto huggingface dataset:
The ultimate Guide to make images load faster on website
Tags: website, webdev, wordpress, tutorial
Published: 2023-03-30 08:53:45

Images are an important part of any website, but they can also slow down the loading speed of your pages. Slow loading times can negatively impact user experience and even affect your website's search engine rankings. In this ultimate guide, we'll cover everything you need to know to make images load faster on your website.

**Compress your images**: Large image files can significantly slow down your website's loading speed. Compress your images using tools like TinyPNG, Kraken.io, or ImageOptim to reduce file size without compromising image quality.

**Use the right image format**: Different image formats have different file sizes and load times. Use JPEG for photographs and PNG for graphics and logos. Avoid using BMP or TIFF formats as they have larger file sizes.

**Resize your images**: Large images take longer to load than smaller ones. Resize your images to the appropriate size before uploading them to your website. Use CSS to adjust the display size of the images if needed.

**Use lazy loading**: Lazy loading is a technique that loads images only when they are visible on the screen. This can significantly improve your website's loading speed. Use plugins like Lazy Load or WP Rocket to enable lazy loading on your website.

**Leverage browser caching**: Browser caching allows your website to store images and other resources on the user's computer so they don't have to be loaded every time the user visits your website. Use plugins like WP Super Cache or W3 Total Cache to enable browser caching on your website.

**Use a content delivery network (CDN)**: A CDN distributes your website's resources across multiple servers around the world, making them load faster for users in different locations. Use CDNs like Cloudflare, Amazon CloudFront, or MaxCDN to improve your website's loading speed.

**Optimize your website's code**: Bloated code can slow down your website's loading speed. Optimize your website's HTML, CSS, and JavaScript code to reduce its size and improve its loading speed.

**Use responsive images**: Responsive images are images that adjust to the user's screen size and resolution, reducing the amount of data that needs to be loaded. Use responsive images with the srcset and sizes attributes to improve your website's loading speed on different devices.

**Minimize HTTP requests**: The more HTTP requests your website makes, the slower it will load. Minimize the number of HTTP requests by combining CSS and JavaScript files, using CSS sprites, and reducing the number of images on your website.
Local storage
Published: 2023-03-30 08:52:56

## What is local storage?
Local Storage is a data storage type of web storage. That allows the JavaScript sites to store and access the data without any expiration date. This means that the data will always be persisted and will not expire. So, data stored in the browser will be available even after closing the browser window. But it will be gone if the user resets his browser or uninstalled it.

## How to view the local storage database?
To view you will need to open the developer tools in your browser then click on the arrow at the top and choose application.

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

Then choose the local storage, then click on the server you want to view, And that's it.

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

## How to add local storage items using js?
You can easily add items using this snippet:

```
LocalStorage.setitem("key", "value");
```
And that's it

## How to get the value of an item in js?

```
Const value = LocalStorage.getItem("key");
console.log(value)
```

## How to delete an item?

```
Localstorage.removeItem('key")
```

## How to clear all the data?

```
Locastorage.clear()
```

And that's all, you just learned Local storage:)
How to check tables fragmentation in Oracle DB?
Tags: oracle, database, performance, optimization
Published: 2023-03-30 08:52:47

To check tables fragmentation in Oracle DB run the following sql command:

```
select 
    table_name,
    avg_row_len,
    round(((blocks*16/1024)),2)||'MB' "TOTAL_SIZE",
    round((num_rows*avg_row_len/1024/1024),2)||'Mb' "ACTUAL_SIZE",
    round(((blocks*16/1024)-(num_rows*avg_row_len/1024/1024)),2) ||'MB' "FRAGMENTED_SPACE",
    (round(((blocks*16/1024)-(num_rows*avg_row_len/1024/1024)),2)/round(((blocks*16/1024)),2))*100 "percentage"
from 
    all_tables 
where
  round(( (blocks*16/1024) ),2) > 0
order by 6 desc;
```
How to copy text to your clipboard in JavaScript?
Tags: javascript, programming, webdev, tutorial
Published: 2023-03-30 08:27:33

Hello:)
It is quite easy to copy text to clipboard using JavaScript.

```
function copy(text){
  const text_ = document.createElement('textarea');
  text_.setAttribute('readonly', '');
  text_.value = text
  document.body.appendChild(text_);
  textbox.select();
  document.execCommand('copy');
  textbox.parentNode.removeChild(text_)
}
```
This function should copy whatever you pass in the parameter.

Examples:
This will let you copy _hello world_
```
function copy(text){
  const text_ = document.createElement('textarea');
  text_.setAttribute('readonly', '');
  text_.value = text
  document.body.appendChild(text_);
  textbox.select();
  document.execCommand('copy');
   textbox.parentNode.removeChild(text_)
}

copy("Hello world")
```

This will let you copy a string

```

function copy(text){
  const text_ = document.createElement('textarea');
  text_.setAttribute('readonly', '');
  text_.value = text
  document.body.appendChild(text_);
  textbox.select();
  document.execCommand('copy');
   textbox.parentNode.removeChild(text_)
}
var text_var = "This is some words stored in a string"
copy(text_var)
```
{% embed https://www.youtube.com/watch?v=SO0boymMqMc %}
Learning Datastructure & algorithms all over again.
Tags: algorithms, computerscience, programming
Published: 2023-03-30 08:16:51

I completed my undergraduate studies in computer science with honors six years ago. However, due to my professional work in various projects for over five years, I did not have frequent exposure to theories on data structures and algorithms. Consequently, I did not deem it necessary to refresh my knowledge or skills in this area. Regrettably, I now realize that this decision has had a negative impact on my job search for software development positions, as many tech companies require such knowledge.

To address this gap in my knowledge, I have decided to embark on a journey to re-learn and practice various algorithms. Blogging is an excellent platform for me to document my learning process and share my experiences with others.

In particular, I intend to focus on a variety of algorithms such as sorting algorithms, search algorithms, and graph algorithms. My goal is to provide detailed explanations and code snippets for each algorithm that I research. I plan to post daily updates on my progress towards achieving this objective.

Here are some of the algorithms that I will be exploring in detail:

Sorting Algorithms:
1. - Bubble sort
2. - Insertion sort
3. - Merge sort
4. - Quick sort
5. - Heap sort

Search Algorithms:
1. Linear Search
2. Binary Search

Graph Algorithms:
1. Depth-First-Search(DFS) & Breadth-First-Search algorithms
2. Dijkstra's Algorithm

I hope that this blogging endeavor will not only help me to refresh my knowledge of algorithms but also aid others who may be in a similar situation.
19 berufliches Vorwärtskommen: Hilfe ersuchen.
Tags: deutsch, career, austausch, 1min
Published: 2023-03-30 08:12:40

Moin Moin,

ich denke, dass jemanden in höflicher Weise um etwas bitten, ein wichtiger Bestandteil unserer Zusammenarbeit ist. Durch meine persönlichen Erfahrungen, unter anderem aus der Schulzeit, habe ich jedoch den Eindruck gewonnen, dass Hilfe ersuchen, von der Allgemeinheit hierzulande, ( Deutschland ) negativ gesehen wird. Es kann schnell passieren, dass man für dumm oder inkompetent gehalten wird. Zudem kann man statt Hilfe auch einfach `null` erhalten.

> Was meinst du, wird Hilfe ersuchen von der Allgemeinheit bei dir zu Lande als negativ bzw. als Schwäche gesehen? Bei Informatikern? In Unternehmen?

Wir brauchen eine Hilfeersuchungskultur ( [Gruß an Alex→](https://dev.to/lexlohr/comment/25ka0) ;-)

Beste Grüße,
Mustafa
It's Release Day! Tiptap Stable Version, Tiptap Collab & Hocuspocus 2.0.0 are out!
Tags: tiptap, editor, crdt, yjs
Published: 2023-03-30 07:52:08

We set ourselves some bold goals this year and are delivering with our biggest releases yet.

## Tiptap Editor Stable Release

We have released the [2.0.0 stable version](https://github.com/ueberdosis/tiptap/releases/tag/v2.0.0) of the Tiptap Editor. After 24 months in beta and a challenging last year, we have taken Tiptap to the next level! From now on, semantic versioning applies. The Tiptap editor is now an adult.

Become a [Tiptap Pro](https://tiptap.dev/pro) and access all our extensions and services.

## Tiptap Collab Release

After six months of work, we finally announce the launch of [Tiptap Collab](https://tiptap.dev/hocuspocus/server/cloud), the Plug'n'Play real-time synchronization and collaboration cloud for your app. It's [Hocuspocus](https://tiptap.dev/hocuspocus/) on steroids in the cloud. 

All you need is a [Tiptap Pro account](https://tiptap.dev/pro) and a few lines of code in your Tiptap editor, and everything is in sync. No matter what content you've stored in your Tiptap editor, it's that simple:

![Tiptap Collab Code Example](https://tiptap.dev/images/posts/tiptap-collab-code-1.png)

**And guess what? You can use Tiptap Collab with every app!**

Since Tiptap Collab is based on [Yjs](https://yjs.dev), you can use it for every application, as long as you use Yjs. It’s done with a few lines of code in your app:

![Tiptap Collab Code Example](https://tiptap.dev/images/posts/tiptap-collab-code-2.png)

Get access to the beta of [Tiptap Collab](https://tiptap.dev/hocuspocus/server/cloud) as a [Tiptap Pro](https://tiptap.dev/pro) user and start with true collaboration on your editor now.

## Hocuspocus 2.0.0 Release

After the stable release in January 2023, Hocuspocus gets its first major version update with the new core feature called “Multiplexing”. 
Multiplexing allows you to synchronize multiple documents over the same websocket connection. This is especially useful when working with multiple documents at the same time and will make this experience even faster.

[Access Hocuspocus 2.0.0 on Github](https://github.com/ueberdosis/hocuspocus/releases/tag/v2.0.0)

We are excited to invest even more time and commitment into Tiptap and especially look forward to your contribution! 

Tiptap is a product baked by and for the community and will be even more this year.

Cu on [GitHub](https://github.com/ueberdosis), [Discord](https://tiptap.dev/discord), [Twitter](https://twitter.com/tiptap_editor), [LinkedIn](https://www.linkedin.com/company/tiptapdev/), and [tiptap.dev](https://tiptap.dev/)
Click CAPTCHA recognition is now available in the browser extension
Published: 2023-03-30 07:38:03


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

The CapMonster Cloud Extension browser extension now has a new method of CAPTCHA recognition - by clicks. Earlier we announced its release in CapMonster Cloud. This allows you to choose how to work with CAPTCHAs: clicks or tokens.

Key features:

1) The click method allows solving almost any CAPTCHA without searching and sending additional recognition parameters, which often cannot be found. Example: reCAPTCHA v2 and reCAPTCHA Enterprise.

2) The click method is currently available for reCAPTCHA v2, reCAPTCHA Enterprise and hCAptcha.

3) When choosing this recognition method, it is recommended to use reliable proxies.

4) See the cost of working with different CAPTCHAs in the table:

**reCAPTCHA 2 (3*3)**

Cost for 1000 recognitions, $​ - 0,2

If 1000 new dynamic picture appears, $​ - 0,04

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

**reCAPTCHA 2 (4*4)**

Cost for 1000 recognitions, $​ - 0,1

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

**hCaptcha**

Cost for 1000 images, $​ - 0,02

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

If the click method works for you, you can test it in one of the following ways:

Website - [CapMonster Cloud](https://capmonster.cloud/en/)

Browser Extension - [CapMonster Cloud Extension](https://chrome.google.com/webstore/detail/capmonster-cloud-%E2%80%94-automa/pabjfbciaedomjjfelfafejkppknjleh?hl=en)

To select the desired CAPTCHA solution in CapMonster Cloud Extension, use the Token/Click switcher.

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

Documentation:

- [reCAPTCHA](https://zennolab.atlassian.net/wiki/spaces/APIS/pages/2279538739/ComplexImageTask+Recaptcha+Google+captcha+solution?NO_SSR=1)
- [hCAPTCHA](https://zennolab.atlassian.net/wiki/spaces/APIS/pages/2279604241/ComplexImageTask+HCaptcha+hCaptcha+captcha+solution)
Some secret git tricks that come in handy
Tags: programming, git, beginners, tutorial
Published: 2023-03-30 07:45:30

here are some secret Git tricks

### Amending the Last Commit
When you commit changes to a Git repository, you create a new snapshot of your code. Sometimes, you may realize that you forgot to include a file, made a typo in a commit message, or made other small changes that you'd like to include in the last commit. Git allows you to amend the last commit with the --amend flag:

``` sql
# amend the last commit with a new message
git commit --amend -m "New message"

# amend the last commit without changing the message
git commit --amend --no-edit
```

### Reflog
Git keeps track of all the changes you make to your repository, including commits, merges, and other operations. The reflog is a log of all the changes to the Git repository, including all the commits, branch changes, and other operations. You can use the reflog to recover lost commits, reset to a previous state, or undo a rebase.

To view the reflog, run:

``` perl
# view the reflog
git reflog

# reset to a previous state using the reflog
git reset HEAD@{N}
```

### Interactive Rebase
Interactive rebase is a powerful tool that allows you to edit, reorder, or delete commits before merging them into the main branch. This is especially useful when you're working on a feature branch and want to clean up the commit history before merging it into the main branch.

To start an interactive rebase, run:

``` sql
# start an interactive rebase
git rebase -i HEAD~N

# edit a commit message in the rebase
pick 1234567 Old message
reword 2345678 New message

# reorder commits in the rebase
pick 1234567 First commit
pick 2345678 Second commit
pick 3456789 Third commit

# delete a commit in the rebase
pick 1234567 First commit
drop 2345678 Second commit
pick 3456789 Third commit
```

### Git Aliases
Git aliases allow you to create custom shortcuts for Git commands. This can save you time and typing, especially for frequently used commands.

To create a Git alias, run:

``` php
# create a Git alias for a command
git config --global alias.ci commit

# use the alias to commit changes
git ci -m "Commit message"
```

### Git Stash
Git stash allows you to temporarily save changes that you're not ready to commit yet, without creating a new branch or committing the changes.

To stash changes, run:

``` perl
# stash changes
git stash

# apply the most recent stash
git stash apply

# apply a specific stash
git stash apply stash@{N}

# list all stashes
git stash list
```

These are just a few of the many secret Git tricks that can help streamline your workflow, improve collaboration, and enhance security. With these tips and tricks, you'll be able to take your Git skills to the next level and become a more efficient and effective developer.
SSH cheatsheet
Tags: javascript, devops, webdev
Published: 2023-03-30 07:41:52

Secure Shell (SSH) is a protocol that allows you to securely connect to a remote system and access its resources. Here are some common SSH parameters with examples:

## Parameters 

`-p`: This parameter is used to specify the port number to connect to on the remote server. By default, SSH uses port 22. 

Example:

```
ssh -p 2222 user@example.com
```
This will connect to the remote server at example.com on port 2222.

`-i`: This parameter is used to specify the path to the private key file to use for authentication. 
Example:

```
ssh -i ~/.ssh/mykey.pem user@example.com
```
This will connect to the remote server at example.com using the private key file located at ~/.ssh/mykey.pem.

`-l`: This parameter is used to specify the username to use when connecting to the remote server. 
Example:

```
ssh -l myuser example.com
```

This will connect to the remote server at example.com using the username myuser.

`-X`: This parameter is used to enable X11 forwarding, which allows you to run graphical applications remotely. Example:

```
ssh -X user@example.com
```
This will connect to the remote server at example.com and enable X11 forwarding.

`-v`: This parameter is used to enable verbose mode, which provides more detailed output for troubleshooting purposes. 
Example:

```
ssh -v user@example.com
```
This will connect to the remote server at example.com and enable verbose mode.

`-nNT`: command is used to create a secure tunnel between a local and remote machine, allowing traffic to be forwarded securely between them.

```
ssh -nNTL 6379:service:6379 user@example.com -p 8080 

```

`-n`: This flag tells ssh not to execute a remote command. This is useful when you just want to create a tunnel and don't need to execute any commands on the remote machine. For example: 
```
ssh -n user@example.com
```

`-N`: This flag tells ssh not to start a shell or execute any commands on the remote machine. This is useful when you just want to create a tunnel and don't need to interact with the remote machine at all. For example: 

```
ssh -N user@example.com
```

`-T`: This flag tells ssh not to allocate a pseudo-terminal on the remote machine. This is useful when you just want to create a tunnel and don't need to interact with the remote machine's terminal. 
For example: 
```
ssh -T user@example.com
```



These are just a few examples of the many parameters that can be used with SSH. You can use the man ssh command to see a full list of available parameters and their descriptions.


## Manage connections 

`ps aux | grep ssh`: list of all connections with ssh 

`kill PID`: kill a vpn connection
Software Development Services
Tags: webdev, javascript, programming, react
Published: 2023-03-30 07:39:51

KritiKal's [software development services ](https://kritikalsolutions.com/software-development-services/)
are designed to help businesses create custom software solutions that meet their unique needs. Our team of experienced developers and designers uses cutting-edge technology and agile methodologies to develop high-quality software applications that are scalable, secure, and user-friendly. Let us help your business achieve its goals with our customized software development services.
JavaScript, useState React Array Handling methods.
Tags: webdev, javascript, react, programming
Published: 2023-03-30 07:35:46

we often used variable of array type with `useState` hook in react and came in a dead end where our variable doesn't update as wanted.
 
so here are some ways- 

#### Consider
```js
const fruits = ["apple", "orange", "grapes", "strawberry"]
const [fruitsState, setFruits] = useState(fruits)
```

#### Read
To read data in variable u can simply write 
```jsx
<>
    {/* console.log(fruits) */}
    <ul>
        {fruitsState.map((fruit)=>{
            return <li>{fruit}</li>
        })
    }
</ul>
<>
```

#### Update
To update elements in array
```jsx
setFruits(setFruitsState.filter((fruit)=> `Lovely, ${fruit}`))
```

#### Add

```jsx
setFruits([newFruit, ...fruitsState])
```

#### Delete
To delete elements from array
```jsx
// select a fruit
const deleteFruit = 'apple'
setFruits(fruitsState.filter(fruit => fruit!=deleteFruit))
```

`Enjoy Hacking` CRA (create react app). 😂
Read more articles about react and its libraries.

That's it for this article, hope you get something useful. Share your thoughts on this article in socials.

Let's Connect - 
<a class="twitter-share-button" href="https://twitter.com/intent/tweet?text=Hey%20folks%20i%20recently%20read%20this%20article%20about%20useState%20hooks%20in%20react%20handle%20lists,%20on%20Dev.to%20by%20Kunal.py3%20do%20check%20this%20out#webdev%20#react%20#" data-size="large">Tweet Thanks</a>
https://linktr.ee/kunal.dev
แก้ปัญหา Build NUXT 2.15.x บน node:lts ด้วย docker ไม่ได้
Tags: node, docker, nuxt, programming
Published: 2023-03-30 07:33:19

ช่วงนี้ได้เข้ามาช่วยทีมย้ายระบบที่เขียนด้วย Nuxt 2.15 แล้วเจอว่ามี bug บางอย่างที่ต้องทำการแก้ แต่พอแก้เสร็จดันเจอว่ามี error ที่ไม่เคยเจอเกิดขึ้น

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

หลังจากลองหาข้อมูลเลยถึงบางอ้อว่า ตอนนี้ Node17+ มันมีการปรับ Hash algorithm เลยทำให้ไม่สามารถรันได้ จำเป็นจะต้องเพิ่ม `NODE_OPTIONS=--openssl-legacy-provider`เข้าไปก่อนสั่ง `yarn build`

สรุปคือเติมประมาณนี้ใน Dockerfile ก็เรียบร้อยแล้ว

```
ENV NODE_OPTIONS=--openssl-legacy-provider
RUN yarn build
```

Happy coding ครับ
Node.js Vs. PHP: Which Is Better For Backend Development
Published: 2023-03-30 07:22:21

## Introduction to Node.js

Node.js and PHP are two popular options for back-end development. Both have their strengths and weaknesses, so it's important to understand the differences between them so you can make an informed decision.

Node.js is a runtime environment that uses server-side JavaScript, enabling developers to build easily scalable network applications. It is based on Google's V8 JavaScript engine, which offers fast and efficient performance. Node.js is especially suitable for building real-time applications like chat or streaming services.

## What is PHP frameworks?

On the other hand, PHP is a server-side scripting language that has been around for over 25 years. Many major websites, including Facebook and Wikipedia, use it. PHP is known for being easy to learn and use, with a large supportive community.

## What is best for back-end development? 

The answer depends on your specific needs and preferences.

If you're building a real-time application or an application that requires many concurrent connections, Node.js is probably your best option. It was designed to handle large amounts of data and connections, and its event-based architecture makes it ideal for real-time applications.

On the other hand, if you're building a more traditional web application, PHP might be a better option. It is widely used, easy to learn, and has a large supportive community. PHP is also more forgiving of bugs and crashes than Node.js.

Ultimately, the choice between Node.js and PHP comes down to your project's specific needs and your team's experience and knowledge. Both are powerful tools that can be used to create high-quality web applications. Therefore, it is worth taking the time to review your options before making a decision.
Run Laravel test multiple times
Tags: laravel, php, phpunit, tdd
Published: 2023-03-30 07:18:46

If your test fails in some rare cases and you want to see when it fails, you can write a bash script like this for run it over and over.
```
for i in {1..100}; 
do 
    php artisan test --filter test_something; 
done
```
It would be better to have this feature built in Laravel but currently I haven't seen it in the docs.

I know it was simple but when we do not code in bash every day, we cant remember its syntax. so consider this like a note to check it when it was required.