teleren/devto huggingface dataset:
4 ways to iterate over “objects” in javascript
Tags: javascript, web, beginners
Published: 2024-07-14 07:35:16

In javascript object contain the key value pair properties and iterating over object is different from arrays . Objects can be iterated using for...in loops and Object.keys(), Object.values(), and Object.entries(). Let’s see how you can use each method:

 **1. using `for...in` method**

```
const person = {
    name: 'John',
    age: 30,
    occupation: 'Engineer'
  };
 for(let key in persons){
     console.log(`${person[key]} : ${key}`)
}
   //output
   // name: 'John',
   // age: 30,
   // occupation: 'Engineer'
```
**2.Using Object.keys(): method**

**object.keys()** is a javascript method which take object as argument and return array of keys

```
const person = {
    name: 'John',
    age: 30,
    occupation: 'Engineer'
  };
const Object_keys = Object.keys(person);
console.log(Object_keys)// [ 'name', 'age', 'occupation']```
```

we can use object.keys() to iterate over object
```
const person = {
    name: 'John',
    age: 30,
    occupation: 'Engineer'
  };
const Object_keys = Object.keys(person);
 
//here first i have used Object_keys array which i got from Object.keys(person);
for(let i = 0 ; i<Object_keys.length;i++){
  console.log(`${Object_keys[i]} : ${person[Object_keys[i]]}`);
}

//here i have used Object_keys array which i got from Object.keys(person);
for(let keys of Object_keys){
  console.log(`${keys} : ${person[keys]}`);
}

// here i have just directly use object.key() method
for(let keys of Object.keys(person)){
  console.log(`${keys}: ${person[keys]}`);
}

// all three ways will give same output
name : John
age : 30
occupation : Engineer
```
**3.Using Object.entries():**

**Object.entries()** is a javascript method which take object as argument and return 2d array of key value pair

```
const person = {
    name: 'John',
    age: 30,
    occupation: 'Engineer'
  };

const Object_keyValue = Object.entries(person);

//output
// [ [ 'name', 'John' ], [ 'age', 30 ], [ 'occupation', 'Engineer' ] ]
```
we can use **Object.entries()** to iterate over object

```
const person = {
    name: 'John',
    age: 30,
    occupation: 'Engineer'
  };

for (const [key, value] of Object.entries(person)) {
  console.log(`${key} : ${value}`);
}

//output
   // name: 'John',
   // age: 30,
   // occupation: 'Engineer'
```
**4. Using Object.values():**

**Object.values()** returns an array of an object's own enumerable property values. This can be useful if you're only interested in the values and not the keys.

```
const myObject = {
  prop1: 'value1',
  prop2: 'value2',
  prop3: 'value3'
};

const values = Object.values(myObject);

for (const value of values) {
  console.log(value);
}

```
BetterPic | AI Headshots
Tags: aiheadshot, imagegenerator
Published: 2024-07-14 07:41:20

> Forget expensive, complicated photoshoots. Get your professional headshots on the go, with 10 selfies/casual photos in less than an hour. High-quality customer service, top data privacy, and a clear money-back guarantee policy. [GET YOURS TODAY!](http://www.betterpic.io/ )

You need some studio-quality (4K) headshots, but lack time, and money
or you would avoid the hassle that comes with a professional photoshoot session?

Get them in under an hour, from $29 then.

customer service, top data privacy, and a clear money-back guarantee policy. 
Unlike most competition, BetterPic’s AI-powered headshot generator creates images that even your closest loved ones won’t be able to tell are not ‘real’ photographs. 

All you need is 8-14 (works from 8, more accurate results the more you add) casual photos/selfies and to select the outfits/backgrounds that fit the purpose of your photos.

BetterPic then takes less than 60 minutes to turn them into a gorgeous portfolio of headshots and portraits. 

Not only does this simplify how you get professional headshots, but it also saves you a ton of time and money.

BetterPic is run with leading AI technology and a full commercial license, so their headshots are ideal for individuals and teams.

Since BetterPic is partly run by designers, marketers and developers, besides the best image quality on the market they focus on high–quality 

BetterPic offers an affordable, fast, high-quality and reliable solution for getting your studio-quality portfolio.

{% embed https://www.youtube.com/watch?v=s4dYv4JcjlM %}
Unlocking the Power of Amazon S3
Tags: aws, cloudcomputing, learning
Published: 2024-07-14 07:55:21




Amazon Simple Storage Service (S3) is a scalable cloud storage solution designed for storing and managing data. In this post, I’ll provide an overview of S3 buckets, which are essential components for organizing and accessing data in S3. You’ll learn about their features, how to create them, and best practices for using S3 effectively.

## What is an S3 Bucket?

An S3 bucket is a container for storing objects in Amazon S3. It acts as a unique namespace where you can store files, images, backups, and other data. Buckets allow you to organize and manage your data efficiently, with features that include:

- **Unique Naming:** Each bucket name must be globally unique across all AWS users, ensuring there are no conflicts.
- **Region Selection:** You can choose the AWS region for your bucket, optimizing performance based on your location.
- **Access Control:** S3 buckets come with robust access control options, allowing you to manage permissions for users and applications.

## 
Getting Started with Amazon S3

## Step 1: Create an S3 Bucket

- **Sign in to AWS Management Console:** Go to AWS Management Console and log in.
- **Open the S3 Console:** Search for “S3” and click on the S3 service.
- **Create a Bucket:**
- Click “Create bucket.”
- Enter a unique bucket name.
- Choose an AWS region for optimal performance.
- Click “Create bucket.”

## Step 2: Upload an Object to Your Bucket

- **Select Your Bucket:** Click on the bucket name you created.
- **Upload Files:** Click “Upload” and then “Add files” to choose the files you want to upload.
- **Set Permissions**: By default, objects are private. You can adjust permissions as needed.
- **Start Upload:** Click “Upload” to begin uploading your files.

## 
Step 3: Access Your Files

- **Navigate to Objects:** Click on the uploaded file in your bucket.
- **View Object URL:** You’ll see a URL to access the file. If public, anyone with the URL can access it.

## Common Use Cases for Amazon S3

- **Data Backup and Recovery:** Store backups of important data securely.
- **Web Hosting:** Host static websites directly from an S3 bucket.
- **Big Data Analytics:** Store and analyze large datasets.
- **Content Distribution:** Distribute content such as images and videos.
Creating Accessible Web Forms: A Beginner's Guide 🎉
Published: 2024-07-14 07:58:55

In today’s digital world, accessibility is a critical aspect of web development. Accessible web forms ensure that all users, including those with disabilities, can interact with your website effectively. Think of it as opening the door wide instead of leaving it cracked! 🚪✨

-> Introduction to Web Accessibility
Web accessibility means making sure everyone can use your site—even your grandma who still thinks the internet is a series of tubes! 🚀 By creating accessible web forms, you’re helping everyone from tech-savvy teens to those still figuring out how to turn on their devices.

-> Semantic HTML
Let’s talk about semantic HTML—think of it as using the right tools for the job. 🛠️ Properly structured forms not only make your code cleaner but also help screen readers understand your content. Using <input>, <select>, and <textarea> correctly is like giving directions to lost tourists—super helpful!

-> Labeling Form Elements
Every form element deserves a name—like your pet goldfish! 🐟 Use <label> tags to ensure users know what information is needed. Connect labels to their corresponding input fields with the for attribute. This way, screen readers can say, “Hey, this is where you enter your name!”
```html
<label for="name">Name:</label>
<input type="text" id="name" name="name" required>
```
-> Keyboard Accessibility
Let’s make your forms as friendly as a puppy! 🐶 Ensure users can navigate using just a keyboard. Test your form by Tab-ing through fields and hitting Enter to submit. It’s like a fun obstacle course, but for data entry!

-> Error Handling
Who doesn’t love a good plot twist? But not in forms! 🎭 Make sure your error messages are clear and easy to spot. If someone enters an invalid email, don’t just say “error”—be specific! Maybe something like, “Oops! That email looks fishy! 🐠 Please enter a valid one.” And use ARIA attributes like aria-live to announce errors to screen readers.
```html
<span id="error" aria-live="assertive" style="color: red;">Please enter a valid email address. 😬</span>
```

-> ARIA Attributes
When semantic HTML isn’t enough, sprinkle some ARIA magic! ✨ Use ARIA roles and properties to make sure screen readers have all the info they need. Just remember, too much ARIA can be like too much glitter—hard to clean up! 🎉

-> Testing Accessibility
Time to put your form to the test! 🔍 Use tools like aXe or Lighthouse to uncover accessibility issues. And don’t forget to manually navigate your form using just a keyboard—if you can do it, anyone can! Bonus points if you test it with a screen reader.

Conclusion
Creating accessible web forms is a vital skill for web developers—like knowing how to make a mean cup of coffee! ☕ By following these best practices, you can make the web a more inclusive place for everyone. So go ahead, be the hero of accessibility! 💪🎊

Happy coding! 🚀
Welcome to BlackCardCoin 🚀
Published: 2024-07-14 08:24:18

JOIN the BlackCardCoin revolution and stand a chance to win a share of our $1 million cash reward pool! As we gear up for our grand prize drawing on December 12, 2024, your engagement and XP accumulation on our platform could lead you to significant rewards.

Here's how our reward system works:

Each XP point you earn on the BlackCardCoin platform acts as one entry into our grand prize drawing. The more you participate—through transactions, staking, and community engagement—the more XP you collect, increasing your chances to win.

Prize Breakdown:

Grand Prizes:

1st Place: $50,000 USDT

2nd Place: $30,000 USDT

3rd Place: $20,000 USDT

Top 4-10 Places:

Each receives $10,000 USDT (7 winners)

Top 11-100 Places:

Each receives $1,000 USDT (90 winners)

Top 101-1000 Places:

Each receives $300 USDT (900 winners)

Top 1001-10000 Places:

Each receives $30 USDT (9000 winners)

Special Drawing Prizes:

1 Winner of $10,000 USDT

100 Winners of $1,000 USDT each

1000 Winners of $100 USDT each


Redistribution Rule:

If a participant qualifies for multiple prizes, they will receive the higher value prize. The lesser prize will be redistributed to the next eligible participant. This ensures each prize is awarded and maximizes fairness in the distribution process.

Frequently Asked Questions (FAQ):

Q1: How do I earn XP?
A1: You can earn XP by engaging in various activities on Zealy, including making transactions, participating in staking, and engaging with the community.

Q2: What happens if I win more than one prize?
A2: You will receive the highest value prize you qualify for. Any additional prizes you might have won will be given to the next eligible participant.

Q3: How will I know if I've won?
A3: Winners will be announced on our website and contacted directly via their twitter account associated with their Zealy account.

Q4: Are there any restrictions on who can participate?
A4: Participants must be of legal age and comply with their local jurisdiction’s regulations regarding cryptocurrency transactions and competitions.

Q5: When is the prize drawing?
A5: The grand prize drawing will take place on December 12, 2024.

By participating in our platform’s activities, not only do you get a chance to win substantial prizes but you also become part of a pioneering financial community. 

Explore our LitePaper for more details or visit BlackCardCoin.com for comprehensive information about our offerings.

Don't miss this opportunity to be a part of something revolutionary. 

Start earning XP and prepare for the big draw. Your journey towards financial innovation begins today at BlackCardCoin.com!

Don't miss out on this chance to be a part of something revolutionary. Dive in and start earning today! 🌟💰
Terabox online video downloader
Tags: terabox, teraboxdownload, teraboxdownloader
Published: 2024-07-14 08:45:48

> 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/eycd68dci54sm9peh0ev.jpg)

Queries Solved :- 

Terabox direct download
Terabox online video downloader
Terabox link video downloader online
How to download Terabox link video without app
Terabox-downloader github
Terabox downloader online free APK
Terabox link converter
Terabox link converter online


> https://t.me/terasop_bot


{% embed https://t.me/terasop_bot %}



Social Medias

- https://in.pinterest.com/teraboxdownloaderonline/
- https://www.instagram.com/terasop_bot/
Recreating History: Building a Windows 98 Disk Defrag Simulator with Modern Web Tech
Tags: webdev, react, nextjs, tailwindcss
Published: 2024-07-14 09:41:54

![Defragmenting a disk in Windows 98 Disk Defrag Simulator](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ysehm1enkypm8d71gnxj.gif)

Hey fellow devs! I'm Dennis Morello, a Senior Frontend Engineer with a passion for both cutting-edge web technologies and retro computing. I'm excited to share my latest project that combines these interests: a faithful recreation of the Windows 98 Disk Defragmenter, built entirely for the web.

Check it out: [defrag98.com](https://defrag98.com)

> Update: The Windows 98 Disk Defrag Simulator has been featured on [Hacker News](https://news.ycombinator.com/item?id=40962195) and [The Verge](https://www.theverge.com/2024/7/14/24198206/take-a-moment-to-reflect)! Thank you to everyone who has tried it out and shared their love for this blast from the past.

## The Tech Stack

For this project, I leveraged some of the most powerful tools in modern web development:

- **React**: For building the UI components
- **Next.js**: To optimize performance and SEO
- **Zustand**: To manage the state of the app
- **TailwindCSS**: To style the app, along with [98.css](https://jdan.github.io/98.css) for bringing in the Windows 98 aesthetic
- **Radix UI Primitives**: For accessible interactive components like sliders and modals
- **Vercel**: The hosting platform for the app

## Challenges and Solutions

### 1. Recreating the Defragmentation Algorithm

One of the biggest challenges was implementing a defragmentation algorithm that felt authentic. I created a custom algorithm that:

- Randomly selects clusters to process
- Simulates file movements across the disk
- Adjusts processing speed based on the selected virtual drive

### 2. Pixel-Perfect UI Recreation

Achieving the exact look and feel of Windows 98 required meticulous attention to detail. I used a combination of 98.css and TailwindCSS to:

- Match colors precisely
- Recreate the characteristic 'chunky' borders
- Implement the classic Windows 98 typography

### 3. Simulating Hard Drive Sounds

To add an extra layer of nostalgia, I implemented realistic hard drive sounds. This involved:

- Recording and editing authentic HDD sounds
- Leveraging the Web Audio API for precise playback control
- Synchronizing sound effects with the visual defragmentation process
- Adapting the HDD sounds to the chosen drive speed

## What I Learned

This project was a fantastic opportunity to:

- Deep dive into the intricacies of writing a custom defrag algorithm, and find a balance between performance and simulation accuracy
- Explore the challenges of accurately simulating legacy software
- Push the boundaries of what's possible in browser-based applications

## What's Next?

This is a project I started just for fun, but I'm excited to see where it goes. I'm looking forward to continuing to improve the app, and adding more features as feedbacks from users come in.

I'd love to hear your thoughts, suggestions, or questions about this project. Have you worked on similar retro tech simulations? What challenges did you face?
Roadmap belajar Keamanan Siber
Published: 2024-07-14 09:42:00

**1. Dasar-dasar Keterampilan TI**
	- Keterampilan dasar komputer
	- Dasar jaringan komputer
	- Komponen Perangkat Keras Komputer

**2. Jaringan Komputer**
	- Model-model OSI
	- Topologi Jaringan
	- Protokol Umum dan penggunaannya
	- IPv4 DAN IPv6
	- Dasar dari Subnetting

**3. Keterampilan dan Pengetahuan Keamanan**
	- Triad CIA
	- Serangan Dunia Maya dan Kejahatan Dunia Maya
	- Kriptografi
	- Memahami Standar Umum
	- Kali Linux, Parrot OS

**4. Keterampilan Langsung**
	- Pengetahuan tentang virtualisasi umum (VMware, Virtual Box)
	- CTF (Capture the flag) : Hackthebox, TyrHackMe, picoCTF, Vulnhub...
	- Alat-alat yang harus dikuasai (Nmap, BurpSuite, Wireshark, Metasploit, WHOIS, urlscan...)

**5. Keterampilan Pemrograman**
	- Python
	- JavaScript
	- Power Shell
	- C++
	- Go

**6. Keterampilan Cloud**
	- Memahami Layanan Cloud (SaaS, PaaS, IaaS...)
	- Lingkungan Cloud (AWS, Azure)
	- Model Cloud (Pribadi, Publik, Hibrida)
	- Penyimpanan Cloud Umum

**7. Sertifikasi**
	- Sertifikasi Pemula :
		CompTIA A+, Comp TIS, Network+, CCNA, eJPT, CompTIA Security+
	- Sertifikasi Lanjutan:
		CISSP, CISA, GEN, CEH, CISM, GIAC

img by https://github.com/jassics/cybersecurity-roadmap/raw/master/images/cybersecurity-skills-roadmap.png
Steps to Create Custom Product Attributes Programmatically in Magento 2
Published: 2024-07-14 10:04:08

In the realm of e-commerce, customization is key to standing out in the crowd. Magento 2 offers a robust platform for creating custom product attributes enabling merchants to organize product information effectively. While it's common to create these attributes through the admin panel there's another method worth exploring programmatically using a data patch. In this post we'll explore the step-by-step process of creating custom product attributes programmatically in Magento 2 empowering you to tailor your store to perfection.
 
Why Custom Product Attributes Matter:
Before we delve into the technical details let's underscore the importance of custom product attributes. These attributes not only enhance the organization of product information but also play a pivotal role in boosting product visibility and delivering an enriching shopping experience. At [Your Business Name] we recognize the significance of customization in the competitive London market. That's why we're excited to share this method with you enabling you to take your Magento 2 store to the next level.
 
Unlocking the Power of Data Patches:
In Magento 2 data patches serve as invaluable tools for making structured changes to the database schema or data. These patches are executed once typically during Magento upgrades ensuring seamless implementation across different environments. Now let's dive into the process of creating custom product attributes using a data patch.
 
Step-by-Step Guide: Creating Custom Product Attributes Using Data Patch:
 
Prepare Your Setup:Begin by creating a new file let's name it CreateCustomProductAttributes.php within the designated directory {Vendor}\{Extension}\Setup\Patch\Data.
 
Coding the Data Patch:In the newly created file incorporate the necessary code to define your custom product attribute. Utilize the EavSetupFactory to add the attribute to the catalog_product entity specifying properties such as type label input type and more according to your requirements.
 
Testing and Deployment:Once the code is in place it's crucial to test your data patch thoroughly. Verify that the attribute is added correctly without any unforeseen issues. When you're satisfied with the results deploy the changes using the Magento Upgrade command: php bin/magento setup:upgrade.
 
Congratulations! You've successfully created custom product attributes programmatically using a data patch in Magento 2. By harnessing this method you have unlocked a new level of customization for your store setting yourself apart in the competitive landscape of e-commerce. At Augmetic we're passionate about empowering merchants with the tools and knowledge they need to thrive. Whether you're a seasoned developer or just starting out we're here to support you every step of the way. Contact us today to learn more about how we can help.
 
Contact us Now!  [https://www.augmetic.co.uk/contact](https://www.augmetic.co.uk/contact)
 
Visit our website today take a look at our success stories and then get in touch for a free quote!.
PrintAI - A Print on Demand E-com website powered with Wix and AI
Tags: devchallenge, wixstudiochallenge, webdev, javascript
Published: 2024-07-14 11:00:43

*This is a submission for the [Wix Studio Challenge ](https://dev.to/challenges/wix).*

## What I Built
<!-- Share an overview about your project. -->
We’ve innovatively combined print-on-demand with AI to create a custom product configurator. This advanced solution allows users to enter a prompt and choose from four design options for their t-shirts. Users can opt to remove the background and add designs to both the front and back of the shirt.

Utilizing a custom element, we implemented a color picker, enabling users to select any t-shirt color they desire. Additionally, users have the option to upload their own images. Once satisfied with their selections, they can easily add the product to their cart.

This integration of AI with print-on-demand showcases our commitment to providing a personalized and engaging user experience, leveraging cutting-edge technology to meet modern consumer demands.

## Demo
<!-- Share a link to your Wix Studio app and include some screenshots here. -->
https://wixfreaks.wixstudio.io/printai
{% embed https://www.loom.com/share/2d6dbb1c73bc44c884da23fac111fa9f %}

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

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

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


## Development Journey
Leveraging Wix Studio’s robust APIs has enabled us to develop an innovative and trendsetting solution in the age of AI. By utilizing backend file capabilities, we securely store and retrieve API keys, ensuring the utmost security. This infrastructure allows us to seamlessly call and test OpenAI and background removal APIs, enhancing our product’s functionality.

Additionally, with the wix-ecomm API, we crafted a custom product integration that dynamically adjusts to user specifications. This ensures both the admin and the user receive precise order details, enhancing transparency and accuracy.

The element API calls further enabled us to elevate the user experience, providing a seamless and intuitive interface. Wix Studio’s comprehensive API toolkit has been instrumental in creating this cutting-edge product, showcasing the platform’s potential to support advanced, AI-driven applications.


## APIs and Library we utilised
- We used the openAI API to generate Images
- Bg.remove API to remove the background from an Image
- wixEcom API to add the specifcations of the product to the cart using addToCart()
- We also have used a Custom Element, that acts as a color picker for the t-shirt. 
- Wix Secrets Manager to store and get the API
- Wix-Fetch to call and get the API