teleren/devto huggingface dataset:
Resize images and put a watermark image on it with bash script
Tags: bash, tarikmanoar, github, webdev
Published: 2023-02-08 05:59:05

Here's a bash script that uses the composite command from ImageMagick to add a watermark to all .jpg and .png images in the current directory, optimize, and resize the images, and display a message indicating which images were optimized and had a watermark added:

```shell
#!/bin/bash

# Set the desired size
SIZE=800

# Set the watermark image file
WATERMARK=watermark.png

# Find all .jpg and .png images in the current directory
for FILE in *.jpg *.png
do
  # Check if the file is larger than the desired size
  if [ $(identify -format "%[fx:w]" $FILE) -gt $SIZE ]; then
    # Resize the image
    mogrify -resize $SIZE $FILE
  fi
  # Add the watermark to the image
  composite -dissolve 50% -gravity SouthEast $WATERMARK $FILE $FILE
  # Optimize the image
  mogrify -strip -interlace Plane -gaussian-blur 0.05 -quality 85% $FILE
  echo "Optimized and watermarked: $FILE"
done

```

This script uses the identify command from ImageMagick to check the width of each image. If the width is larger than the desired size, it uses the mogrify command to resize the image. The composite command is then used to add a watermark to the image. The watermark image file is specified with the WATERMARK variable. The mogrify command is also used to optimize the image by removing unnecessary metadata, applying a small amount of blur, and reducing the quality to 85%. After each image is optimized and has a watermark added, a message indicating the optimized and watermarked image is displayed.
How to resize and optimize images with bash script
Tags: bash, shellscript, tarikmanoar, webdev
Published: 2023-02-08 05:51:01

Here's a bash script that uses the mogrify command from ImageMagick to optimize and resize all .jpg and .png images in the current directory and display a message indicating which images were optimized:

```shell
#!/bin/bash

# Set the desired size
SIZE=800

# Find all .jpg and .png images in the current directory
for FILE in *.jpg *.png
do
  # Check if the file is larger than the desired size
  if [ $(identify -format "%[fx:w]" $FILE) -gt $SIZE ]; then
    # Resize the image
    mogrify -resize $SIZE $FILE
  fi
  # Optimize the image
  mogrify -strip -interlace Plane -gaussian-blur 0.05 -quality 85% $FILE
  echo "Optimized: $FILE"
done

```

This script uses the identify command from ImageMagick to check the width of each image. If the width is larger than the desired size, it uses the mogrify command to resize the image. The mogrify command is also used to optimize the image by removing unnecessary metadata, applying a small amount of blur, and reducing the quality to 85%. After each image is optimized, a message indicating the optimized image is displayed.
FREE Programming Cheat Sheets
Tags: cheatsheets, resources
Published: 2023-02-08 05:34:32

---
layout: post
title: FREE Programming Cheat Sheets
categories:
  - cheatsheets
  - resources
cover_image: 'https://raw.githubusercontent.com/Ademking/ademking.github.io/main/assets/images/1674124240303.gif'
tags: 'cheatsheets, resources'
canonical_url: null
published: true
description: FREE Programming Cheat Sheets
---

Programming is a vast field and it is very difficult to remember all the syntaxes and commands. So, I have compiled a list of programming cheat sheets that will help you to remember the syntaxes and commands.

- Python

[https://quickref.me/python](https://quickref.me/python)

- Git

[https://cheatography.com/itsellej/cheat-sheets/git-commands/](https://cheatography.com/itsellej/cheat-sheets/git-commands/)

- JavaScript

[https://htmlcheatsheet.com/js](https://htmlcheatsheet.com/js)

- Bash

[https://devhints.io/bash](https://devhints.io/bash)

- SQL

[https://sqltutorial.org/sql-cheat-sheet](https://sqltutorial.org/sql-cheat-sheet)

- HTML

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

- CSS

[https://htmlcheatsheet.com/css](https://htmlcheatsheet.com/css)

- Sass

[https://devhints.io/sass](https://devhints.io/sass)

- Tailwind

[https://nerdcave.com/tailwind-cheat-sheet](https://nerdcave.com/tailwind-cheat-sheet)

- React.js

[https://upmostly.com/ultimate-reactjs-cheat-sheet](https://upmostly.com/ultimate-reactjs-cheat-sheet)
GPT Prompts as Directional Vectors
Tags: chatgpt, promptengineering, ai
Published: 2023-02-08 05:32:59

Using GPT has shown me that there are three broad modes of usage. Visualizing them as vectors, with both direction and magnitude, can be helpful in framing a solution to a problem. (To be clear, I'm referring to vectors in the simple directional sense, *not* in the sense of something like embeddings.)

The first mode is **Generation**. This is the most commonly discussed mode, where you can go from a short prompt to a long output generated by GPT. For example, providing a prompt such as "Write an essay about bears" will produce lots of text. This vector can be imagined as pointing "up".

The second mode is **Transformation**. This is an incredibly powerful mode, where you can take an existing artifact as a prompt and use GPT to transform it "in place". An example of this would be "Rewrite the following to use more elevated language" or "Rewrite the following using the style of H.P. Lovecraft". Both the prompt and the output are of similar length in this mode, and it can be thought of as pointing "sideways".

The third mode is **Condensation**. This mode takes long text as a prompt and produces a short output of some kind. Examples of this would be "Summarize the following into three bullet points" or "Give me five keywords for the following article". This vector can be thought of as pointing "down".

![Illustration of the three vectors of transformation](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/o2op543cnw1rc6j26vid.png)

The magnitude of each vector is also important to consider. This is a way of understanding the strength of the application of the mode to the prompt. For example, "Write a paragraph about bears" is a shorter vector than "Write a 1000-word essay about bears". Similarly, "Rewrite this article to correct errors and flow better" is a shorter vector than "Rewrite this article in the style of Shakespeare".

By understanding the different modes and their applications, you can gain a more analytical way to think about your problem space, and make prompting feel less arbitrary.
Ditching Dependencies: You don't need libraries for these JavaScript tasks
Tags: javascript, programming
Published: 2023-02-08 05:31:03

---
layout: post
title: 'Ditching Dependencies: You don''t need libraries for these JavaScript tasks'
categories:
  - javascript
  - programming
cover_image: 'https://raw.githubusercontent.com/Ademking/ademking.github.io/main/assets/images/js.png'
tags: 'javascript, programming'
canonical_url: null
published: true
description: 'Ditching Dependencies: You don''t need libraries for these JavaScript tasks'
---

In this post, we will look at some of the most common tasks that developers do and see how we can do them without using any libraries or frameworks.

# Clone an object

```js
const obj = { a: 1, b: 2 };
const clone = obj.structuralClone();
```

[Read more](https://developer.mozilla.org/en-US/docs/Web/API/structuredClone)

# Get the current URL

```js
const url = new URL(window.location.href);
```

# Remove multiple line breaks

```js
const text = `Hello

World`;
const cleanText = text.replace(/\n{2,}/g, "\n");
```

# Remove array duplicates

```js
const arr = [1, 2, 3, 3, 4, 5, 5, 6];
const uniqueArr = [...new Set(arr)];
```

# Generate a random number between two numbers

```js
const min = 1;
const max = 10;
const random = Math.floor(Math.random() * (max - min + 1)) + min;
```

# Shuffle an array

```js
const arr = [1, 2, 3, 4, 5];
const shuffledArr = arr.sort(() => Math.random() - 0.5);
```

# Detect Dark Mode

```js
const isDarkMode = () =>
  window.matchMedia &&
  window.matchMedia("(prefers-color-scheme: dark)").matches;
```

# Generate a random color

```js
const generateRandomHexColor = () =>
  `#${Math.floor(Math.random() * 0xffffff).toString(16)}`;
```

# Sort an array of objects by a property

```js
const arr = [
  { name: "Adem", age: 26 },
  { name: "Jane", age: 25 },
  { name: "Bob", age: 20 },
];
// Sort by age
const sortedArr = arr.sort((a, b) => a.age - b.age);
```

# Get the intersection of arrays

```js
const arr1 = [1, 2, 3, 4, 5];
const arr2 = [3, 4, 5, 6, 7];
const intersection = (a, ...arr) =>
  [...new Set(a)].filter((v) => arr.every((b) => b.includes(v)));

intersection(arr1, arr2); // [3, 4, 5]
```

# Get the number of days in a month

```js
const getDaysInMonth = (month, year) => new Date(year, month, 0).getDate();

daysInMonth(2, 2024);
// 29
```

# Flatten an array

```js
const flatten = (arr) =>
  arr.reduce(
    (a, b) => (Array.isArray(b) ? [...a, ...flatten(b)] : [...a, b]),
    []
  );
flatten([
  [1, 2],
  [3, 4],
  [5, 6],
]);
// [1, 2, 3, 4, 5, 6]
```

# Check if two objects are equal

```js
const isEqual = (a, b) => JSON.stringify(a) === JSON.stringify(b);
isEqual({ name: "Adem", age: 26 }, { name: "Adem", age: 26 });
// true
```

# Slugify a string

```js
const slugify = (str) =>
  str
    .toLowerCase()
    .replace(/[^\w ]+/g, "")
    .replace(/ +/g, "-");

slugify("Hello World");
// hello-world
```

If you enjoyed this article, please share it with your friends and colleagues. If you have any questions or suggestions, please leave a comment below.
Subdomains and Security: How to Keep Your Development and Pre-Prod Environments Safe
Tags: pentest
Published: 2023-02-08 05:31:01

---
title: 'Subdomains and Security: How to Keep Your Development and Pre-Prod Environments Safe'
categories:
  - pentest
cover_image: 'https://raw.githubusercontent.com/Ademking/ademking.github.io/main/assets/images/security.jpg'
tags: pentest
canonical_url: null
published: true
description: 'Subdomains and Security: How to Keep Your Development and Pre-Prod Environments Safe'
---

As a business, it's important to have a strong online presence and use modern technologies to develop and test your apps.

However, when it comes to using subdomains for development and pre-production purposes, it can be easy to overlook the potential security risks.

When I was working as a penetration tester, I often came across companies that had exposed their development and pre-production subdomains to the public...

One common mistake many companies make is using their main domain for development and pre-production subdomains. This means that these subdomains, which often contain sensitive information such as source code and login credentials, are publicly accessible to anyone who knows the main domain. This can lead to data leaks and even serious security breaches.

For example, if you have a website at `example.com`, you should not use subdomains such as `dev.example.com` or `preprod.example.com` and make them publicly accessible.

So, what can you do to protect your subdomains and the sensitive information they contain?

One solution is to use a different domain entirely for development and pre-production purposes. This way, even if the subdomains are accidentally exposed, they will be separate from your main domain and the sensitive information will not be easily accessible or discoverable.

Another solution is to implement IP whitelisting on the subdomains. This means that only specific IP addresses are allowed to access the subdomains, making it much more difficult for unauthorized individuals to gain access.

In addition to these solutions, it's also important to regularly conduct security assessments and penetration testing on your subdomains. This will help identify any potential vulnerabilities and allow you to address them before they can be exploited by attackers.

What do you think? Do you have any other tips for protecting your development and pre-production subdomains? Let me know in the comments below!
How to add a placeholder to Monaco editor
Tags: react, programming
Published: 2023-02-08 05:30:32

---
title: How to add a placeholder to Monaco editor
categories:
  - react
  - programming
cover_image: 'https://raw.githubusercontent.com/Ademking/ademking.github.io/main/assets/images/1674320695421.png'
tags: 'react, programming'
canonical_url: null
published: true
description: How to add a placeholder to Monaco editor
---

I was playing around with the [Monaco editor](https://microsoft.github.io/monaco-editor/) and I wanted to add a placeholder to it. Just like the placeholder in VSCode. I couldn't find any documentation on how to do it, so I decided to write this post. I will be using the Monaco editor in React, but the same concept can be applied to any other framework.

## The problem

Monaco editor is a great editor, but it doesn't have a placeholder. There is no option to add a placeholder to it.

VSCode is using Monaco, and it has a placeholder. So I decided to look at the source code of VSCode and see how they did it.

I found out how they did it...

![](https://raw.githubusercontent.com/Ademking/ademking.github.io/main/assets/images/1674320695435.png)

It's in the file [untitledTextEditorHint.ts](https://github.com/microsoft/vscode/blob/main/src/vs/workbench/contrib/codeEditor/browser/untitledTextEditorHint/untitledTextEditorHint.ts).

The idea is very simple. They are using a `div` element as overlay. When the editor is empty, the `div` element is visible. When the editor is not empty, the `div` element is hidden.

## The solution

I made this sandbox to show how to add a placeholder to Monaco editor.

<iframe style="width: 100%; height: 500px; border: none; padding-bottom: 20px" src="https://stackblitz.com/edit/react-ts-6egvre?embed=1&file=App.tsx&hideDevTools=1&theme=dark"></iframe>

The component defines two functions, "handleEditorOnChange" and "handleEditorOnMount", that are passed as props to the rendered editor.

The "handleEditorOnChange" function is invoked when the content of the editor changes, and it checks if the editor is empty or not.

If it is empty, it shows the placeholder div by setting its display property to "block", otherwise it hides it by setting the display property to "none". The "handleEditorOnMount" function is invoked when the editor is first rendered and it shows the placeholder and focuses the editor.

If you want to see the full code, you can check it out on [StackBlitz](https://stackblitz.com/edit/react-ts-6egvre?file=App.tsx).

I hope this post was helpful. If you have any questions, feel free to ask them in the comments.
Serve-Build in Reactjs
Tags: react, javascript, css, npm
Published: 2023-02-08 05:19:54

Hii...I've been working on building a serve using "npm i serve" in frontend 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n138haq8xeumkmqrzyvy.png)
but the api calls are not working with the network

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

every time I try to log in I get the 404 not found 
how do I run/connect the backend to this serve build
High ROI Testing With Cypress Component Testing
Tags: angular, testing, cypress
Published: 2023-02-08 04:57:29

In this podcast, we cover Cypress Component testing and how you can use it to get a high ROI on your testing.

Motivation for integration-based testing vs. the testing pyramid
The testing trophy
Cypress CT vs. Jest
Setup of cypress CT
Best practices with Cypress CT
Test setup with SIFERS
CRUD test of TODO app

You can watch it [here](https://christianlydemann.com/high-roi-testing-with-cypress-component-testing-with-lars-gyrup-brink-nielsen/).
Hello world!
Tags: general
Published: 2023-02-08 05:19:12

---
layout: post
title: Hello world!
categories:
  - general
tags: general
canonical_url: null
published: true
description: Hello world!
cover_image: 'https://raw.githubusercontent.com/Ademking/ademking.github.io/main/assets/images/default-blog-post.png'
---

Welcome to my blog!

I'm excited to start sharing my tech adventures with you all. In this first post, I just wanted to say a quick "Hello, World!" and introduce myself.

My name is Adem and I'm a web developer. I'm passionate about using technology to create innovative and useful products, and I'm always learning and exploring new ways to do so.

I'm committed to sharing a new post every day, so be sure to check back often for updates. I'll be sharing my experiences and insights as I learn and grow as a developer, and I hope you'll join me on this journey.

Until next time
React provides several built-in hooks that can be used to add specific functionality:
Tags: react, webdev, javascript, beginners
Published: 2023-02-08 05:06:14

**useState**: Used to manage state in a functional component. It returns an array with two elements, the current state value and a function to update it.

**useEffect**: Used to handle side effects in functional components, such as making API calls or updating the document title. It takes a callback function that will run after every render.

**useContext**: Used to access data from the React context API. It takes a context object as its argument and returns the current value for that context.

**useReducer**: Similar to useState, but used for complex state management. It takes a reducer function and an initial state value, and returns the current state value and a dispatch function to update the state.

**useCallback**: Used to memoize a function so that it is only re-created if its dependencies change. It takes a function and an array of dependencies and returns a memoized version of the function.

**useMemo**: Used to memoize a value so that it is only re-computed if its dependencies change. It takes a value-generating function and an array of dependencies and returns the memoized value.

**useRef**: Used to create a reference to a DOM element or a value that persists across renders. It returns a mutable object that can be used to store a value for the lifetime of the component.

**Custom hooks**:  are functions that allow you to extract and reuse state logic and side effects across multiple components. They start with the word use and can call any of the built-in hooks or other custom hooks

**useImperativeHandle**: Used to control the behavior of imperative code when using a component as a child component.

**useLayoutEffect**: Similar to useEffect, but it fires synchronously after all DOM updates.

**useDebugValue**: Used to display a label for a custom hook in the React DevTools for easier debugging.

These are the most commonly used React hooks, and there are many others that can be used to add specific functionality to functional components.
🍎: Bad Apple
Tags: badapple, coding, simulation
Published: 2023-02-08 05:03:02


- Have you hear of / watched any videos of it
- they are just GREAT
- ...
- How do they convert video
- into this different platform ( which you can't even imagine)
- for simulation
- ...
- to show their work in a particular field
- using their code to automate all stuff
- ...
- just watch any one video you will become a fan
- and want to do your self also using coding

---

# 🔗: Links

- Example: from the below
- But on everything (Collection) / Combine Video

{% youtube https://www.youtube.com/watch?v=UbTACUhcVg4&ab_channel=Laefye %}

{% youtube https://www.youtube.com/watch?v=NJZXKMcKwIM&ab_channel=Laefye %}

---

## Other
- [Orignal Song Video](https://www.youtube.com/watch?v=FtutLA63Cp8&ab_channel=kasidid2)

- [Bad Apple Explained: History and Analysis
](https://www.youtube.com/watch?v=6QY4ekac1_Q&t=723s&ab_channel=Megapig9001)

- [OR Just search Bad Apple on YouTube](https://www.youtube.com/results?search_query=bad+apple)

## Simulation Video

- [Playlist: Bad Apple on Everything](https://www.youtube.com/playlist?list=PLajlU5EKJVdonUGTEc7B-0YqElDlz9Sf9) ***** 

- [Sheet](https://docs.google.com/spreadsheets/d/1t5kwkG9id8yDinIe1R6T4DwdKTavBDtcob6d9Z0c2C4/edit#gid=0)

- [One of the creators I watch](https://www.youtube.com/@Junferno/featured)

# Personal Favorite

- so clean / I wanted to make it
  - [on GitHub Contribution Graph](https://www.youtube.com/watch?v=6k7McEeaOEY&ab_channel=flyingcakes)

- Camera also moves make it more realistic 
  - [Stop Motion PV](https://www.youtube.com/watch?v=240Vq6tIxio&ab_channel=DarylBunao)

- Shocked because sheep are moving

  - [Minecraft sheep](https://www.youtube.com/watch?v=tO6sfku_1b8&ab_channel=Treyzania)

- Most Unique looking
  - [ONE ANALOG CLOCK](https://www.youtube.com/watch?v=IfcItGA9L24&ab_channel=WorstApple)

- [AI Generated](https://www.youtube.com/watch?v=RO7TYfMyPPw&ab_channel=PanduhCx)
  - where it make mistake / funny stuff happen
  - I noticed
  - 1:58 .. in one frame instrument use is telescope ... lol :/
  - other noticed
  - 1:52 ... random instruments ... AI is confused
  - 1:10 ... many frames bird is on boat ... lol :/
  - 1:42 ... holds arrow randomly ... from no where

---

> ❤️: A Like would be appreciated if it was helpful
How I Cracked My Dream Company BrowsersStack as Software Tester | Software Testing Jobs
Tags: webdev, beginners, programming, tutorial
Published: 2023-02-08 04:41:10

Software Testing Jobs : I am going to discuss about the How I Cracked My Dream Company BrowsersStack as Software Tester.  Must watch for Software Testers Freshers.

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

✅  Become Automation Tester :   https://thetestingacademy.com

✅ Learn Java : https://sdet.live/educative


Why are we not getting selected for Job?
Reasons behind getting testing jobs, future of automation testing

✅ Download Notes -  https://sdet.live/notes

✅ New Batch - https://go.scrolltest.com/manual


✅ Join Facebook Group :  http://bit.ly/learntesting2019

✅ Website:   https://scrolltest.com

✅ Website:   https://thetestingacademy.com

✅ Twitter: https://twitter.com/itstechmode

🚀 Tools and services I recommend:
Some of the courses that I recommend to become better Automation Tester 🙌🙌

✅API Testing - 
https://www.learnapitesting.com


✅Cypress Tutorial with LIVE Projects -
http://cypresstutorial.com


✅  GET your Free API Testing Guide worth $19 -  https://sdet.live/ttah


#softwaretestingjobs #softwaretestingjobsforfreshers #softwaretestingjobs #softwaretestingjobsforexperienced
Never get ip address in Linux with this command
Tags: linux, beginners, cloud, programming
Published: 2023-02-08 04:11:51

Many websites recommend using the hostname command to obtain the IP address. 

**In this post, I will explain why you should not use this command.**

The hostname command in Linux is used to display or set the hostname of a computer.

When used without any arguments, the hostname command will display the current hostname of the system:

hostname

This is safe.

When used with an argument, the hostname command can be used to set the hostname of the system:

sudo hostname new_hostname

hostname command also has the -I or --ip-address option to display the IP address of the system:

sudo hostname -I

This will display the IP addresses assigned to the system's network interfaces. 

so here is the problem.

If you forgot to type the -, your hostname will be changed to I.

**What will happen when the hostname is changed?**

In our env, we have many oracle rac clusters.

In the Oracle RAC cluster, the hostname is used to identify the node and communicate with other nodes in the cluster. 

 When the hostname is changed, other nodes are not be able to communicate with the node and the node becomes inaccessible to the rest of the cluster.

we got two incidents that were related to this in the past year.

So we should always choose the safe command in our daily operation tasks as it can help minimize potential risks.

Check this post to know [how to safely check ip address in Linux](https://www.howtouselinux.com/post/check-ip-address-in-linux).