teleren/devto huggingface dataset:
Design Personalized Two Photo Collages with Our free online two photo Collage Maker - Simplified
Published: 2024-01-01 09:34:09

Design captivating two photo collages with our free online two photo Collage Maker from Simplified. Create beautiful visual narratives by merging two photos and share your stories with the world. Create beautiful two photo collages in minutes with our free online two photo Collage Maker from Simplified. Easily combine your favorite photos and turn them into stunning compositions.
website: **[https://simplified.com/ai-collage-maker/two-photo-collage](https://simplified.com/ai-collage-maker/two-photo-collage)**
#DEVResolutions2024
Tags: devresolutions2024
Published: 2024-01-01 09:15:24

### **Professional Goals:**

1. **Goal:** Make my work go live.
2. **Action Steps:** Make my work production ready, bug free and perfect and be proactive about it.
3. **Timeline:** Achieve this before March 2024.

### **Personal Aspirations:**

1. **Aspiration:** Launch my own website. 
2. **Why it Matters:** I want to start selling services and products on my website because freelancing platforms have not worked that well for me.
3. **Support System:** I am planning to use my friends as my support system for this project.

### **DEV Community Contributions:**

1. **Contribution Goal:** I want to write more posts, comment insightful things on other people's posts and reply to comments on my own posts.
2. **Collaboration Plans:** I have not planned any collaborations but if you'd like to collaborate with me on anything, I'm happy to hear about it!
3. **Measuring Impact:** The number of people who view my posts, react to them and comment on them is going to be my way of measuring my impact.
Text to speech covertor
Published: 2024-01-01 09:10:34

This is Text to speech covertor using `HTML`,`CSS`,`JAVASCRIPT `

### Demo Site 

[ Click here ](https://text-to-speech-convertor-js.vercel.app/)

## Desktop 

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


## Mobile
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8j0vzkfj1jnfzhx6fesh.jpg)
My #DEVResolutions2024 🌟
Tags: devresolutions2024, community, opensource
Published: 2024-01-01 09:06:31

 ✨ As a dedicated professional in the dynamic field of technology, I am driven by a passion for continuous learning and contributing to the development community. In my quest for growth, both professionally and personally, I have outlined specific goals and action steps that will guide my journey in the coming months.✨ 

🎉 Let the Resolutions Begin!

### **Professional Goals:**

**Goal: Elevating my expertise in Cloud Computing and Modern Architecture.**

**Action Steps:** 

- **Enroll in Professional Cloud Certification Courses**: I plan to enroll in industry-recognized cloud certification courses to deepen my understanding and acquire advanced skills.

- **Hands-on Project Implementation**: To apply theoretical knowledge into practice, I will actively work on real-world cloud projects, gaining valuable experience along the way.

- **Regular Networking and Webinars**:  To stay abreast of the latest developments in cloud computing, I will actively participate in networking events and webinars within the industry.

**Timeline:** Complete Professional Certification within the next six months, and organize tech events and workshops in the coming year.

### **Personal Aspirations:**

1. **Aspiration:** Prioritizing Work-Life Balance.

2. **Why it Matters:** Balancing professional aspirations with personal well-being is essential for long-term success and happiness. Achieving a work-life balance allows me to remain focused, creative, and resilient in my professional endeavors.

3. **Support System:** Regularly engage with a mentor and join a peer support group to share experiences and advice. Establish a routine that incorporates dedicated time for personal activities.

### **DEV Community Contributions:**

**Contribution Goal: Fostering Knowledge Sharing in the DEV Community **

 **Collaboration Plans:** 

- Initiate a monthly webinar series on emerging technologies and best practices.

- Collaborate with fellow developers to create open-source projects addressing real-world challenges.

- Contribute to documentation and tutorials to support the learning journey of developers.

 **Measuring Impact:** 

Regularly assess webinar attendance and engagement, track the adoption and impact of open-source projects through community feedback and contributions, and monitor the reach and effectiveness of documentation and tutorials.

In conclusion, my commitment to professional growth and community contributions aligns with my overarching goal of making a meaningful impact in the tech industry. By setting clear objectives, engaging with a support system, and measuring the impact of my efforts, I am confident that these goals will propel me toward success in 2024 and beyond. Together, let's embark on this exciting journey of learning, collaboration, and innovation.🚀✨
#100DaysOfCode - Day 15
Published: 2024-01-01 08:46:13


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

Today, I focused on making the login part of my MERN app better. I added ways for users to log in, but I still have more to do. Understanding and writing this login stuff is tough. It's taking me a while to figure it all out and write the code.

Feel free to connect with me through my social links below. Let's code, learn, and grow together!"
[@nomanux](https://twitter.com/Nomanux)
Understanding Expressions in Racket
Tags: ossu, racket, expression, programming
Published: 2024-01-01 08:39:46

An expression in Racket is a combination of values, variables, operators, and function calls that can be evaluated to produce a result. It represents a computation or operation that yields a specific value.

## Example Expression

Consider the expression:

```racket
(+ 3 4)
```

This expression evaluates to 7, and it is an example of a simple arithmetic operation (addition). The + is a primitive function, and 3 and 4 are the expressions being added.

## General Structure of an Expression

Expressions in Racket follow a general structure: <br>
`(<primitive> <expression>...)`

Here, `<primitive>` represents a primitive function or operator, and `<expression>`... denotes one or more expressions that serve as its arguments.

## Expressions and Values

Expressions can represent various types of values. For instance, simple numeric values are expressions by themselves:

```racket
42 ; This is an expression representing the number 42
```

## Summary

- An expression is a combination of elements that, when evaluated, produces a value.
- Expressions can involve primitive functions, operators, and operands.
- The general structure of an expression is <primitive> `<expression>`....
- Values, such as numbers, can also be considered expressions.

Understanding expressions is fundamental in Racket programming, as they are the building blocks for creating computations and algorithms.

> This blog post is a part of my [OSSU](https://github.com/ossu/computer-science) journey. ossu-post#1 core-cs/systematic-program-design/expressions.
Designing Cross-Browser Compatible HTML5 Slot Machine Games
Published: 2024-01-01 08:37:26

In the dynamic field of web development, developing engaging and interactive experiences for various browsers presents a distinct set of difficulties. The complexities of creating HTML5 slot machine games that work with many browsers are examined in this blog post, guaranteeing smooth gameplay for consumers on different platforms.

## Understanding Cross-Browser Compatibility:

Maintaining a consistent user experience across browsers is essential. Understand the subtleties of HTML5, CSS3, and JavaScript to make sure your slot machine game runs well on widely used browsers such as Edge, Chrome, Firefox, and Safari.

## Leveraging HTML5 Features:

Explore the powerful features of HTML5 that enhance the performance of your slot machine game. Dive into the world of canvas elements, audio APIs, and responsive design to create visually stunning and dynamic interfaces.

## Crafting Responsive Layouts:

Learn how responsive design is essential to making sure your slot machine game works well on a range of screen sizes. To create a captivating gaming experience on desktop and mobile platforms, use media queries and flexible grids.

## CSS3 for Aesthetic Appeal:

Discover how to add visually striking elements to your **[HTML5 slot machine](https://www.aistechnolabs.com/html5-slot-machine/)** game with CSS3. To improve the overall design and user engagement, explore more complex styling techniques, animations, and transitions.

## JavaScript Magic for Cross-Browser Functionality:

Delve into the world of JavaScript to add interactivity and functionality to your game. Address browser-specific quirks and employ feature detection to guarantee a smooth gaming experience for all users.

## Testing Across Multiple Browsers:

Investigate thorough testing techniques to find and fix compatibility problems early in the development process. To expedite the testing stage, make use of tools such as BrowserStack and cross-browser testing frameworks.


## Performance Optimization:

Optimize your HTML5 slot machine game for superior performance. Implement best practices, such as lazy loading, code splitting, and image optimization, to ensure fast loading times and smooth gameplay across different browsers.

8. Handling Browser-Specific Challenges:

Address common challenges encountered in different browsers and devise effective solutions. From handling audio playback inconsistencies to managing touch events on mobile devices, equip yourself with the knowledge to overcome hurdles specific to each browser.

## Conclusion:

**[Developing HTML5 slot machine games](https://www.aistechnolabs.com/blog/how-much-does-it-cost-to-hire-slot-mobile-game-developers-2023/)** that work across browsers takes a combination of talent, imagination, and in-depth knowledge of web technology. You'll be well-prepared to design captivating and widely accessible slot machine experiences for gamers everywhere if you adhere to the advice and methods provided in this blog post. Begin developing, testing, and providing a smooth, cross-browser gaming experience. Have fun with coding!
How I Converted My Trust Pilot Review into a Rap Video Using AI
Tags: ai
Published: 2024-01-01 08:37:20

I had a very bad experience buying a used car from wrexham.

In order to promote and rank the video on the brand's SERPS, I decided to take advantage of youtubes domain authority and create a video. 

A rap video - which you can see [here](https://youtu.be/ENC86tg3TgM?si=10yktako1m9EclcG) 

I did this on my mobile phone.

First thing was to get lyrics for the rap, I asked bard.google.com:
"Using the following copy from my review posted below, please create a rap song that rhymes and emphasis anger"

Second - convert text to voice. I used elevenlabs.io to accomplish this.

Third- the tricky part, creating the music itself.
I used soundtrap.com to do this. 

To add the AI rapper voice, I had to press the purple "plus" button near the bottom of the GIU and select the sound file.


![music studio](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9yqrsde6eyt7duaityav.jpg)

To create the video itself, I used stock videos from pixabay and pixels. I also added a few images and screenshot to the videos using the canva video creator.

In 36hours, the video so far has 2,200 views - which is pretty good a d about 2,000 more than my [lookers vauxhall review blog post!
بهترین آزمایشگاه تهران
Published: 2024-01-01 08:25:38

آزمایشگاه پاتوبیولوژی و ژنتیک پزشکی تهران لب - انجام انواع آزمایشها و چکاپهای تخصصی - پزشکی، آزمایش HPV ، مشاوره ژنتیک، آزمایش درهومونی، آزمایش غربالگری، آزمایش پاپ اسمیر،آزمایش تعیین جنسیت و تست DNA میباشد. تمامی آزمایشات تهران لب به عنوان بهتر ین آزمایشگاه، تحت پوشش بیمه پایه و تکمیلی توسط کادر مجرب آزمایشگاه مجهز و با کیفیت تهران لب انجام میشود .
https://tehranlab.com
New Year, New Code: #DEVResolutions2024
Tags: devresolutions2024
Published: 2024-01-01 08:00:00

Hello DEV Community,

It's a brand new year, and we're kicking it off in style with [#DEVResolutions2024](https://dev.to/t/devresolutions2024) — a celebration of your goals, reflections, and aspirations for the coming year. While we've been reveling in the achievements of last year with [#DEVImpact2023](https://dev.to/t/devimpact2023), it's now time to embark on a new journey together to make 2024 even more remarkable!

---

🎉 **Let the Resolutions Begin!**

In the spirit of growth, community, and achievement, we invite each and every one of you to share your resolutions for 2024, whether they're professional ambitions, personal milestones, or contributions to the DEV community. 

Here's an easy-to-use **[Resolution Template](https://dev.to/new/devresolutions2024)** 📝 to get you started. Or simply state your goals in a post and tag it with [#DEVResolutions2024](https://dev.to/t/devresolutions2024). Use this tag to accompany your posts and document your progress, and let's create a collection of goals and accomplishments to inspire one another.

---

**Recognition & Badges:** 
Top contributors will be recognized, and there's an exclusive badge for participants.

![DEVResolutions2024 Badge](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sbmzic3zm715mnh62zlj.jpg)

---

Follow [#DEVResolutions2024](https://dev.to/t/devresolutions2024) throughout the month of January to discover the perfect spaces and ways to share and set your goals with us. Let the resolutions begin, and let's make 2024 a year of growth, connection, and success! 🚀✨
"ReactJS vs. Next.js: Unveiling the Web Development Showdown"
Tags: javascript, webdev, react, nextjs
Published: 2024-01-01 07:54:37

In the dynamic realm of web development, ReactJS and Next.js stand out as powerhouse contenders, each offering unique strengths. Let's dive into the fast-paced face-off between these two JavaScript giants and uncover which one holds the crown for your next project.

ReactJS at a Glance:

ReactJS, the brainchild of Facebook, is a nimble JavaScript library tailored for building sleek user interfaces. Its component-based architecture and virtual DOM prowess empower developers to craft reusable and efficient UI components.

Next.js: The Power Player in the Game

Enter Next.js, the React framework designed by Vercel. It seamlessly extends React's capabilities by introducing server-side rendering, automatic code splitting, and a file-based routing system, streamlining the path to production-ready applications.

Quick Comparison:

1. **Routing:**
   - ReactJS: Necessitates additional routing solutions like React Router.
   - Next.js: Champions file-based routing, simplifying navigation with ease.

2. **Server-Side Rendering:**
   - ReactJS: Primarily caters to client-side rendering, requiring additional configurations for server-side rendering.
   - Next.js: Masters server-side rendering out of the box, boosting performance and SEO.

3. **Ease of Deployment:**
   - ReactJS: Demands a separate deployment setup.
   - Next.js: Seamlessly integrates with Vercel, providing a hassle-free deployment experience.

4. **Configuration:**
   - ReactJS: Offers flexibility in project setup, letting developers choose preferred tools.
   - Next.js: Adopts a convention-based approach, minimizing extensive configurations for a streamlined development journey.

Conclusion:

ReactJS and Next.js bring their A-game to the table, catering to different project needs. ReactJS excels in crafting interactive interfaces, while Next.js takes the lead for production-ready applications with built-in server-side rendering. The choice depends on your project's priorities – simplicity, performance, or deployment ease. Strap in for a thrilling ride as you pick the framework that aligns perfectly with your web development aspirations.
Detect file run as main or module
Tags: node, javascript, webdev, backend
Published: 2024-01-01 07:52:03

*There's a simple way in Python to know if current file is being run directly or as an import, using the `__main__` variable. Any such way in Node.js?*

Yes, there is.

## CommonJS
```js
if (require.main === module) {
  console.log('This file is being run directly.');
} else {
  console.log('This file is being imported as a module.');
}
```


## ESM
```js
// mainModule.mjs

if (import.meta.url === `file://${process.argv[1]}`) {
  console.log('This ESM module is being run directly.');
} else {
  console.log('This ESM module is being imported as a module.');
}
```

## What's the use of this?
I write Node.js scripts for personal use, and it's good to have usage examples that console.log something. If a script is being run directly, it'll print the usage examples, otherwise it'll stay silent.
Simplifying Data Fetching in React with SWR: A Quick Guide
Tags: webdev, javascript, programming, react
Published: 2024-01-01 07:51:10

Modern React applications often require real-time data fetching, caching, and synchronization, which can be challenging. SWR, developed by Vercel, simplifies this process significantly. This article explores how to harness the power of SWR to improve data fetching in React.

## Introduction

Fetching data in React applications can be complex, involving managing states for loading, data, and errors. SWR (Stale-While-Revalidate) provides a streamlined approach to handle these concerns elegantly.

## What is SWR?

SWR is a React Hooks library for data fetching. The name derives from the HTTP cache invalidation strategy (stale-while-revalidate) which effectively means "serve the stale (old) data until you get a chance to validate (fetch the latest data)."

## Key Features of SWR

SWR brings several advantages:

- **Built-in Cache and State Management**: Automatically caches fetched data and manages the loading and error states.
- **Real-time Experience**: Offers features like automatic revalidation on focus, network recovery, and interval polling.
- **Lightweight and Flexible**: Easy to integrate and use in existing projects with minimal configuration.

## Getting Started with SWR
To start using SWR, first install it:

```bash
npm install swr
```

Then, you can use the useSWR hook to fetch data:

```jsx
import useSWR from 'swr';

const fetcher = url => fetch(url).then(res => res.json());

function UserProfile({ userId }) {
  const { data, error } = useSWR(`/api/user/${userId}`, fetcher);

  // Handle loading and error states
}
```

## Advanced Usage
SWR also supports more advanced features like:
- **Conditional Fetching**: Only fetch data when certain conditions are met.
- **Dependent Fetching**: Chain requests and fetches data only after certain data is available.
- **Global Configuration**: Customize SWR's behavior globally in your application.

## Real-World Scenarios
In a complex application, SWR can simplify data management. For example, in a dashboard application, SWR can handle multiple API requests, cache the data, and refresh it periodically, ensuring the user always sees up-to-date information.

## Best Practices and Performance Optimization
To maximize the benefits of SWR:

- **Optimize Fetcher Functions**: Ensure your fetcher function is optimized and handles errors gracefully.
- **Manage Cache Properly**: Utilize SWR's cache management features to synchronize data across components.

## Conclusion
SWR offers a modern solution to the challenges of data fetching in React. It ensures efficient data management, leading to cleaner code and a better user experience.

## Further Resources
For more information, check out:

- [SWR Documentation](https://swr.vercel.app/docs/)
- [GitHub Repository](https://github.com/vercel/swr)
HELP!! How to limit multiple API calls after the first call
Tags: restapi, systemdesign, discuss, help
Published: 2024-01-01 07:43:59

I have a question: I trigger the POST request upon the button click event. The API creates entries in the database and takes around 1 second on average. My issue is that users can press the button multiple times before the first API request is completed, creating numerous resources. I attempted to implement a pre-check before making any database changes and returning an exception which is then displayed on the UI with an appropriate message. I don't know whether it's the correct way to handle the problem. How can I prevent multiple API calls after the first one?
Local DNS cache server - Smartdns-rs
Tags: server, dns, dnscache, internet
Published: 2024-01-01 07:39:48

[https://github.com/mokeyish/smartdns-rs](https://github.com/mokeyish/smartdns-rs)

This installation base on Windows OS

https://github.com/mokeyish/smartdns-rs/releases/download/0.7.1/smartdns-x86_64-pc-windows-msvc.zip

extract to C:\Program Files\Smartdns 

Open smartdns.conf ( included  in zip file ), replace with this setting

```
# Listen on local port 53
bind 127.0.0.1:53  

# Configure bootstrap-dns, if not configured, call the system_conf, 
# it is recommended to configure, so that it will be encrypted.
server https://1.1.1.1/dns-query  -bootstrap-dns -exclude-default-group
server https://8.8.8.8/dns-query  -bootstrap-dns -exclude-default-group
server-tls 1.12.12.12
server-tls 120.53.53.53
server 119.29.29.29
server-tls dot.pub
server 223.5.5.5
server-https https://doh.pub/dns-query
server-https https://dns.alidns.com/dns-query
server 114.114.114.114
server 1.2.4.8
server 1.1.1.1
server-tcp 1.1.1.1
server-tls 1.1.1.1
server-https https://cloudflare-dns.com/dns-query
server 8.8.8.8
server-tcp 8.8.8.8
server 210.186.147.174


cache-size 32768


force-qtype-SOA 65


conf-file anti-ad.conf
```
after that, create anti-ad.conf along with smartdns.conf, refer to this

https://raw.githubusercontent.com/privacy-protection-tools/anti-AD/master/anti-ad-smartdns.conf

this config will block ads like y*be ads. 

fireup cmd prompt ( administrator mode ) 

C:\Program Files\Smartdns\

./smartdns service install

./smartdns service status 

then, change dns in ethernet properties to 127.0.0.1

**Test with dig tools**

install bind 
scoop install bind 

test dns 


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


Update: 

if you install smartdns-rs on raspberrypi ( tested on raspberry pi 3b using this binary - smartdns-arm-unknown-linux-musleabi.tar.gz
). 

once you run smartdns service install, it will copy smartdns binary on /usr/bin/smartdns 
also copy smratdns.conf (original template) to /etc/smartdns/smartdns.conf

and lastly, it will copy smartdns-rs.service ( systemctl service ) to /usr/lib/systemd/system/smartdns-rs.service )
Hello 2024! Bye 2023!
Tags: firstpost, webdev, newyear, learning
Published: 2024-01-01 07:37:31

Hello DEV!

It has been awhile since I wanted to make a DEV account and post here. On the first day of **2024**, I finally did it!

2023 has been one kind of a ride for me. I have grown so much just from meeting more people at tech meetups and discussing on tech twitter and discord. I've even started a Ladies In Tech Malaysia community to meet more like minded tech ladies in my home country.

So, I'm looking forward at how I'll improve more with an extra community to join and learn from this year.

I'm planning to dive deeper into DevOps and improve on my development skills, I guess, similar to DevOps, to understand more on the things I wrote and how it works. With more understanding and knowledge, I feel, the decision making will be easier and one will not be easily swayed by others. 

2024 for sure gonna be another learning year for me and I can't wait to see on my growth by the end of 2024.

If you have any recommendation on learning DevOps, do share. ;)