teleren/devto huggingface dataset:
How was your tech stack switching experience? what difficulty you faced, specially to be java developer ?
Published: 2024-06-01 16:57:18

I know tech industry is rapid changing environment. all though developers love to know and learn about new technology. after getting some experience in their tech stack, I think it must be difficult to chase higher package as well as your favorite tech stack. share some experience or knowledge. I will really  be thankful. Can we chase favorite tech stack as well as 2x package?
Build your framework based on the requirements of your projects (focusing on JavaScript/TypeScript)
Tags: webdev, javascript, typescript
Published: 2024-06-01 16:49:16

Here's a detailed guide on building your framework tied to the requirements of your projects, focusing on JavaScript/TypeScript. 


## **In the Backend Part:**

- Utilize Express (API) or NestJS (Microservices) as your Backend Framework
- Language: TypeScript
- Database options include PostgreSQL with Drizzle or MongoDB with Mongoose
- UI for Database: Adminer for PostgreSQL or mongo-express for MongoDB
- Protect and authorize with JWT and implement OAuth2 strategies with Passport.js
- Hash passwords and confidential data with Argon2
- Consider Postman, Insomnia, or Swagger (OpenAPI) for API Documentation
- Handle background jobs with BullMQ and Redis
- UI for BullMQ: bull-board
- Schedule tasks with node-cron or Bree
- Send emails with Nodemailer and SMTP of your choice
- Add restrictions and a layer of security with Helmet and rate-limiter-flexible
- Data validation and types: Zod
- Configuration management: dotenv
- Need a message queue? Consider RabbitMQ
- Utilize piscinajs to Perform CPU intensive operations
- Need observables? Consider RxJS
- Support GraphQL through GraphQL Yoga and handle types with gqtx or Pothos then generate SDKs with GraphQL codegen
- Cache endpoints and responses with Redis
- Real-time Communication: Implement Socket[dot]io
- Testing with Jest + Supertest
- Containerize with Docker + Docker Compose
- CI/CD setup using GitHub Actions
- Monitoring and Logging tools: Prometheus, Grafana, and Winston


## **In the Frontend Part:**

- Opt for TypeScript
- Choose React as your Frontend Framework
- Explore meta-frameworks like Next.js, Astro, Remix, or Vite
- UI Framework options: TailwindCSS + ShadCN + Aceternity UI, Mantine, Chakra UI, Ant Design, or Material UI
- For Data-fetching, consider Tanstack Query + Axios
- State Management with Zustand
- Form Handling using React Hook Form
- Add Animations through Framer Motion or GSAP
- Dashboard solutions: react-admin, Refine, or HorizonUI



## **Bonus Part:**

- Enhance code formatting with Prettier
- Maintain code quality with Eslint
- Monorepo management with Nx
- Opt for esbuild as your Bundler
- Utilize pnpm as your Package Manager
- Consider PM2 as your Process Manager
- Explore Vite as your Build Tool
- For Container Orchestration, look into Kubernetes + Helm
- Server Configurations can be managed with Ansible
- Infrastructure as Code practices with Terraform
- Cloud Platforms like AWS and Cloudflare can be utilized 
- Serve everything securely with automatic SSL with Caddy

Did I miss something? Write a comment.
5G Rollout: How It's Transforming Connectivity and Business
Tags: webdev, javascript, devops, ai
Published: 2024-06-01 16:44:14

1. **Enhanced Mobile Connectivity**
   - 5G offers significantly faster data speeds and lower latency compared to 4G, enabling seamless streaming, rapid downloads, and improved overall mobile experience.

2. **IoT Expansion**
   - The increased bandwidth and lower latency of 5G support a vast network of IoT devices, facilitating smart homes, smart cities, and advanced industrial automation.

3. **Innovative Business Applications**
   - Businesses are leveraging 5G for augmented reality (AR) and virtual reality (VR) applications, enhancing customer experiences in retail, real estate, and entertainment sectors.

4. **Remote Work Revolution**
   - 5G enables high-quality video conferencing, real-time collaboration, and reliable remote access to enterprise systems, supporting the shift to remote and hybrid work models.

5. **Telemedicine Advancements**
   - Healthcare providers use 5G for telemedicine services, remote monitoring, and even remote surgery, improving access to healthcare and patient outcomes.

6. **Smart Manufacturing**
   - 5G enhances manufacturing with real-time monitoring, predictive maintenance, and automated production processes, increasing efficiency and reducing downtime.

7. **Autonomous Vehicles**
   - The low latency and high reliability of 5G are crucial for the development and operation of autonomous vehicles, enhancing safety and traffic management.

8. **Enhanced Public Safety**
   - Emergency services benefit from 5G’s reliable and rapid communication capabilities, improving response times and coordination during crises.

9. **Energy Sector Innovation**
   - 5G supports smart grids and efficient energy management systems, enabling real-time monitoring and control to optimize energy distribution and consumption.

10. **Enhanced Consumer Experiences**
    - From smart homes to immersive gaming experiences, 5G transforms how consumers interact with technology, providing more responsive and interactive services.

Happy Learning 🎉
CSS Art: June challenge
Tags: frontendchallenge, devchallenge, css
Published: 2024-06-01 16:34:09

[](url)_This is a submission for [Frontend Challenge v24.04.17](https://dev.to/challenges/frontend-2024-05-29), CSS Art: June._

## Inspiration
<!-- What are you highlighting today? -->

## Demo 
https://codepen.io/minalfatih/pen/pomepWq

<!-- Show us your CSS Art! You can directly embed an editor into this post (see the FAQ section of the challenge page) or you can share an image of your project and share a public link to the code. -->

## Journey 
I use the animation in css to move the moon to be sun and to move the see and by semantic html and pure css
<!-- Tell us about your process, what you learned, anything you are particularly proud of, what you hope to do next, etc. -->

<!-- Team Submissions: Please pick one member to publish the submission and credit teammates by listing their DEV usernames directly in the body of the post. -->

<!-- We encourage you to consider adding a license for your code. -->

<!-- Don't forget to add a cover image to your post (if you want). -->

<!-- Thanks for participating! -->
minimal-mvc: Frugal PHP micro-framework with basic routing and templating
Tags: php, webdev, opensource
Published: 2024-06-01 16:33:16

Folks,

We already know about mind-blowing PHP frameworks like Laravel, Symfony, CodeIgniter, etc. and their enormous capabilities in making web development easier. But what about an even smaller micro-framework for PHP? Something along the lines of Flask or Bottle? Something you can use to develop things like REST API, prototyping something at initial stage or a frontend SPA app with just basic backend features?

Today, I want to introduce you to [minimal-mvc](https://github.com/prahladyeri/minimal-mvc), an extremely tiny micro framework with just two core scripts viz. `routing.php` for handling the routing and `util.php` for working with templates containing few other generic utilities.

Over my years of app development experience, I've found that these two capabilities are the critical minimum required features even in most basic or simple web apps. Adding CRUD and databases is a late stage capability which core PHP is more than capable of handling. But with a solid routing structure and a template system where you can quickly prototype multiple partial content pages based on a parent or base template is often very useful when starting a new app project.

I hope you will explore the minimal-mvc framework and I'll be even more glad if you find it useful for your projects.

Happy Programming!
WELCOME TO NDRESSILIK
Tags: ndressilik
Published: 2024-05-30 19:55:56

Quality Products for Happy Dogs
At NDRESSILIK, we know that the right products can make a big difference in a dog’s life. That’s why we offer a handpicked selection of premium K9 products, including training tools, toys, grooming supplies, and nutritional supplements. Each product in our store is chosen for its quality and safety, ensuring that your dog gets nothing but the best.

Building a Community
We envision NDRESSILIK as more than just a platform—it’s a community. A place where dog lovers can come together, share their experiences, and support each other. As we grow, we plan to introduce new features that foster this sense of community, such as interactive training sessions, virtual consultations, and a marketplace for local dog services.

Our Story
NDRESSILIK was born out of a deep love for dogs and a desire to make a positive impact. We understand the unique bond between dogs and their owners, and we’re here to support that bond in every way we can. Our team is made up of dog enthusiasts who are dedicated to creating the best resources and products for your pets. We believe that with the right support and care, every dog can be happy, healthy, and well-trained.

Join Us
We invite you to join the NDRESSILIK community. Whether you’re a new dog owner looking for guidance, an experienced trainer seeking new clients, or simply someone who loves dogs, we have something for you. Visit our website at ndressilik.com and follow us on Instagram (@ndressilik) to stay connected with the latest in dog care and training.

At NDRESSILIK, we’re passionate about making a difference in the lives of dogs and their owners. Join us on this journey and see how, together, we can create a better world for our four-legged friends.
functional testing and Non functional testing with examples
Published: 2024-06-01 16:32:44

functional testing

1. It checks the application's activities and actions.
2. It is based on the needs of the consumer.
3. It aids in improving the application's functionality.
4. Manual testing can be used to carry out functional testing.

Example:

1. unit testing
2. component testing
3. Integration Testing

Non Functional testing 

1. It checks the application functionality.
2. It is based on the customer's expectations.
3. It aids in enhancing the application's performance.
4. Manually performing non-functional testing is difficult.

Example:

1. performance testing 
2. load testing
3. stress testing
Cialis 20mg Tablets Price In Pakistan 0303-5559574
Published: 2024-06-01 16:24:50

cialis 20mg Tablets Price In Pakistan

Uk Made Cialis 20mg Tablets Price In Pakistan. This Tablets Is Originally For Increase Sexual Timing And Cure ED. Buy Now Lilly Cialis 4,6 Tablets. Lilly Cialis Tablets Is Best Increase Sexual Timing.

call and this number
0303 5559574
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oyivf9ri5zjylit77ony.png)

for online link
[](url)https://shopiifly.pk/product/cialis-20mg-tablets-price-in-pakistan/
Day 2 of 30
Tags: challenge, beginners, learning, webdev
Published: 2024-06-01 16:24:41

So for today, I didn't cover a lot but still learned some frontend concepts... I am still trying to get into the habit of having a consistent time for studying and trying to wrap my head around, Whether I should learn React(Frontend Dev), Flask(BackendDev), and EthicalHacking(TryHackMe)

So for today, this is what I learned:

>List and Keys: https://github.com/FrancisNgigi05/react-hooks-lists-and-keys-lab

>Did a small project that combined what I learned yesterday and today and deployed it on vercel: 
(i)Vercel: https://react-hooks-component-props-mini-project-dun.vercel.app/

(ii)The Source Code: https://github.com/FrancisNgigi05/react-hooks-component-props-mini-project

The most interesting thing that I learned today was about doing the project that had this Bonus requirement:

**If the article takes less than 30 minutes to read:

For every 5 minutes (rounded up to the nearest 5), display a coffee cup emoji. For example, if the article takes 3 minutes to read, you should display "☕️ 3 min read". If the article takes 7 minutes, you should display "☕️☕️ 7 min read".
If the article takes 30 minutes or longer to read:

For every 10 minutes (rounded up to the nearest 10), display a bento box emoji. For example, if the article takes 35 minutes to read, you should display "🍱🍱🍱🍱 35 min read". If the article takes 61 minutes to read, you should display "🍱🍱🍱🍱🍱🍱🍱 61 min read".
**

And to solve that requirement I wrote the following code:


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

Anybody with suggestions for: **I am still trying to get into the habit of having a consistent time for studying and trying to wrap my head around, Whether I should learn React(Frontend Dev), Flask(BackendDev), and EthicalHacking(TryHackMe)
**
Unleash Your Coding Potential: 100+ Curated GitHub Repositories (Free Share)
Tags: github, opensource, programming, devcommunity
Published: 2024-06-01 16:06:46

Sharpen your skills and explore cutting-edge projects with this extensive collection of over 100+ GitHub repositories I've carefully curated. Discover a diverse range of languages, frameworks, tools, and applications across various domains like:

- Web Development: Build dynamic and interactive web experiences.
- Mobile Development: Craft engaging mobile apps for iOS and Android.
- Data Science: Uncover valuable insights from data.
- Machine Learning: Train intelligent models to automate tasks.

And More!

Key Features:

- Handpicked Gems: Each repository is meticulously chosen based on its popularity, active community, and high-quality code.
- Learning Playground: Enhance your programming skills through hands-on exploration and well-documented codebases.
- Stay Ahead of the Curve: Discover emerging trends and technologies used by industry professionals.

Benefits:

- Expand Your Knowledge: Deepen your understanding of programming concepts and techniques.
- Fuel Your Inspiration: Gain creative approaches and problem-solving strategies from experienced developers.
- Contribute to Open Source: Give back to the developer community by contributing to existing codebases.
- Build Your Next Project: Find the perfect starting point or inspiration for your next software solution.

Who Should Access This Resource?

- Software Developers (All Levels): Enhance your skills, stay current, and explore new technologies.
- Beginners: Learn from well-structured code and gain valuable insights into best practices.
- Project Seekers: Discover inspiring ideas, contribute to open-source initiatives, and build your software portfolio.

Take Your Development Journey to the Next Level!

Access My Curated List: https://tuanducdev.notion.site/b2364ca05ba7489bb2e803039bbf17cd?v=28f967c06a994eb19908422fef4d8a24&pvs=4

Connect with Me: https://github.com/tuanductran

Automate Your Downloads (Beta): https://github.com/tuanductran/download-repos (Download all your starred repos with this Node.js app!)
CSS & JavaScript: Beaches
Tags: devchallenge, frontendchallenge, css, javascript
Published: 2024-06-01 16:01:02

_This is a submission for [Frontend Challenge v24.04.17](https://dev.to/challenges/frontend-2024-05-29), Glam Up My Markup: Beaches_

## What I Built

1. **CSS**: I have used a modern, clean design with a color palette that reflects the beach theme, smooth transitions, and hover effects.
2. **JavaScript**: I added interactive elements like a modal window to show more details about each beach and a smooth scroll effect for a better user experience.

<!-- Tell us what you built and what you were looking to achieve. -->

## Demo
<!-- Show us your project! You can directly embed an editor into this post (see the FAQ section from the challenge page) or you can share an image of your project and share a public link to the code. -->

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

GitHub link: [Beaches](https://github.com/Dexter766/frontend-challenge-beaches.git)

## Journey
<!-- Tell us about your process, what you learned, anything you are particularly proud of, what you hope to do next, etc. -->
###Key Enhancements:
1. Modal Animation: Added fade-in and slide-in animations for the modal to make it more engaging.
2. Backdrop Filter: Applied a blur effect to the background when the modal is open for better focus and a modern look.
3. Hover Effects: Added hover effects to the beach list items to make them interactive and visually appealing.
4. Responsive Design: Ensured the modal is responsive and looks good on various screen sizes.
5. Interactivity: Made each beach title clickable to trigger the modal, displaying more information dynamically.

<!-- Team Submissions: Please pick one member to publish the submission and credit teammates by listing their DEV usernames directly in the body of the post. -->

<!-- We encourage you to consider adding a license for your code. -->

<!-- Don't forget to add a cover image to your post (if you want). -->


<!-- Thanks for participating! -->
Solidity Alchemy - Course (ESCROW SMART CONTRACT)
Tags: smartcontract, solidity, javascript, beginners
Published: 2024-06-01 15:34:13

The escrow smart contract is a system used for transferring funds upon the fulfillment of an agreement. Traditionally, this involves a third party, but in this case, the third party is an honest one facilitated by the smart contract. This contract involves three parties: the Depositor, the Arbiter, and the Beneficiary.

**Depositor:** The payer in the escrow agreement.
**Beneficiary:** The recipient of the funds from the escrow after the Arbiter confirms the transaction, typically for providing some service to the Depositor.
**Arbiter:** The trusted middleman responsible for approving the transaction. The Arbiter ensures the goods or services are received before releasing the funds.

**_From the lessons at Alchemy University, I learned to create an escrow smart contract with the following key components:_**

1. **State Variables:** Understanding and declaring variables that store the contract's state.
2. **Constructor:** Initializing the contract with specific parameters.
3. **Payable Constructor:** Allowing the constructor to handle Ether transactions.
4. **Functions:** Implementing the contract's logic through functions.
5. **Function Security:** Restricting function calls to specific addresses for security purposes.
6. **Events:** Emitting events to log significant actions in the contract.

**Here's a sample implementation of an escrow smart contract in Solidity:**



```
// SPDX-License-Identifier: MIT
pragma solidity 0.8.20;


contract Escrow {
    address public depositor;
    address public beneficiary;
    address public arbiter;
    
    constructor(address _arbiter, address _beneficiary)payable{
        depositor = msg.sender;
        arbiter = _arbiter;
        beneficiary = _beneficiary;
    }

    function approve()external  {
    //check if the caller of the function is the arbiter.
        require(msg.sender == arbiter, "Only arbiter can approve");
        uint balance = address(this).balance;
        payable(beneficiary).transfer(balance);
        emit Approved(balance);
    
        }
        
     event  Approved(uint);
   
}
```

This contract ensures that only the Arbiter can approve the transfer of funds to the Beneficiary, adding a layer of security and trust to the transaction process.

**_Please, questions and contributions are welcome_**

[](https://x.com/zuru122)
[](https://university.alchemy.com/)
The secret of social media marketing & how to think about it?
Tags: socialmedia, marketing, socialmediamarketing
Published: 2024-06-01 15:33:58

FYI: If you're wondering about social media marketing but don't know how to do it, here are some social media marketing secrets that can help you get started.

Social media is a mess for most people, but it is a hidden Gem for business owners. In our decade-long journey as a social media marketing service provider, we saw some small business owners frustrated for not understanding relevant content, not understanding ROI, not having engagement ideas, and not having a strong business focus.

Success requires a growth mindset and the ability to take risks. They are unsuccessful because they need some clarification about social media marketing. Such as:

1) I need a huge social media presence for a successful business.

You don't need it because everyone is not your customer. If your content is for everyone, then your content is for no one. Do deep research on your target audience& make content for them.

2) The more followers I have, the better.

When you post content (Optimal Posting best practices), social media shows it to a small group of people, and it observes how people react to it. 

Based on this result, social media algorithms choose how to distribute this piece of content on the internet.

Read more- [Social Media Marketing](https://www.seosiri.com/2024/06/social-media-marketing-secret.html)

#socialmedia #socialmediamarketing #smm #seosiri #momenulahmad
Cool updates in Nextjs 15
Published: 2024-06-01 15:28:52

**Hello NextJs users there are some interesting updates of nextjs**

- React Compiler
- Hydration error improvements
- Caching updates

**React Compiler:**
In order to optimize applications, React Compiler automatically memoizes your code. You may be familiar today with memoization through APIs such as useMemo, useCallback, and React.memo. With these APIs you can tell React that certain parts of your application don’t need to recompute if their inputs haven’t changed, reducing work on updates. While powerful, it’s easy to forget to apply memoization or apply them incorrectly. This can lead to inefficient updates as React has to check parts of your UI that don’t have any meaningful changes.

The compiler uses its knowledge of JavaScript and React’s rules to automatically memoize values or groups of values within your components and hooks. If it detects breakages of the rules, it will automatically skip over just those components or hooks, and continue safely compiling other code.
[Click for more details](https://react.dev/learn/react-compiler)

**Hydration error improvements:**
Next.js 14.1 made improvements to error messages and hydration errors. Next.js 15 continues to build on those by adding an improved hydration error view. Hydration errors now display the source code of the error with suggestions on how to address the issue.

For example, this was a previous hydration error message in Next.js 14.1:

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

Next.js 15 RC has improved this to:

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

**Caching updates:**
With Next.js 15, we’re changing the caching default for fetch requests, GET Route Handlers, and Client Router Cache from cached by default to uncached by default. If you want to retain the previous behavior, you can continue to opt-into caching.

We're continuing to improve caching in Next.js in the coming months and we'll share more details in the Next.js 15 GA announcement.
`fetch('https://...', { cache: 'force-cache' | 'no-store' });`

- no-store - fetch a resource from a remote server on every request and do not update the cache
- force-cache - fetch a resource from the cache (if it exists) or a remote server and update the cache
[Click for more details](https://nextjs.org/blog/next-15-rc#caching-updates)

The best part is the update in hydration error!