DEV Community: Ashish prajapati

🚀 Spring Boot Journey – Day 3: Mastering CRUD Operations, Lombok & JPA Query Methods

Ashish prajapati — Mon, 13 Jul 2026 17:14:37 +0000

Welcome to Day 3 of my Spring Boot learning journey! 💚

Today's session was packed with practical concepts that are used in almost every real-world Spring Boot application. I moved beyond creating simple APIs and started building a complete CRUD application while learning how Spring Boot simplifies backend development.

📌 What I Learned Today

Today I implemented the complete CRUD (Create, Read, Update, Delete) functionality for my Student Management application.

The REST APIs now support:

➕ Create a Student
📖 Read all Students
🔍 Read a single Student
✏️ Update Student details
❌ Delete a Student

I also learned how different HTTP methods map to REST APIs:

POST → Create Data
GET → Fetch Data
PUT → Update Data
DELETE → Remove Data

Understanding these methods helped me see how backend APIs communicate with frontend applications.

📚 Adding Multiple Records

Instead of inserting one record at a time, I learned how to save multiple student records using a single API request.

Spring Data JPA provides the saveAll() method, making bulk insertion extremely simple and efficient.

This feature is especially useful when importing large datasets.

⚡ Making Code Cleaner with Lombok

One of my favorite topics today was Lombok.

Previously, every entity required writing:

Constructors
Getters
Setters
toString()
equals()
hashCode()

Now, with just a few annotations like:

@Data
@NoArgsConstructor
@AllArgsConstructor

Lombok generates all that code automatically.

This makes the project cleaner, shorter, and much easier to maintain.

🗄️ Repository Layer with Spring Data JPA

Today I explored the power of Spring Data JPA.

Instead of writing SQL queries manually, Spring Boot generates queries automatically based on method names.

Some custom repository methods I added include:

Find students by department
Find students whose date of birth is after a given date
Find students whose date of birth is before a given date

It was amazing to see that simply naming methods correctly allows Spring Boot to generate the required SQL behind the scenes.

🔍 JPA Query Methods

Today I learned about Query Method Naming in Spring Data JPA.

Examples include:

findByDepartment()
findByDobAfter()
findByDobBefore()

Spring Boot automatically understands these method names and creates the appropriate database queries without requiring any SQL.

This is one of the features that makes Spring Data JPA so powerful and developer-friendly.

⚠️ Exception Handling

Applications should never fail silently.

To improve my project, I implemented exception handling for situations where a student record doesn't exist.

Now, instead of unexpected behavior, the application returns a meaningful error message when someone tries to access or delete a student that isn't available.

This improves both reliability and user experience.

🏗️ Project Architecture

My project now follows the standard layered architecture:

Client Request

⬇️

Controller

⬇️

Service

⬇️

Repository

⬇️

MySQL Database

⬇️

Response

Keeping responsibilities separated makes the application easier to understand, test, and maintain.

📖 Key Concepts Covered Today

✅ CRUD Operations

✅ HTTP Methods (GET, POST, PUT, DELETE)

✅ Bulk Insert using saveAll()

✅ Lombok Annotations

✅ Spring Data JPA Repository

✅ JPA Query Methods

✅ Filtering Data using Repository Methods

✅ Exception Handling

✅ Layered Architecture

💭 My Takeaway

Today's session made me realize how much Spring Boot reduces repetitive work.

With Lombok, I no longer need to write boilerplate code.

With Spring Data JPA, I can fetch filtered data without writing SQL.

And with proper exception handling, my APIs become much more reliable.

Every day I'm getting closer to building production-ready backend applications, and it's exciting to see how everything connects together.

Looking forward to learning more advanced Spring Boot concepts in the coming days! 🚀

#SpringBootJourney Day 3

Today's progress:

✔ CRUD Operations

✔ Lombok

✔ JPA Repository

✔ Query Methods

✔ Exception Handling

One day. One project. One step closer to becoming a Java Backend Developer. 💚

🚀 Spring Boot Journey – Day 2: Setting Up My Development Environment & Building My First REST API

Ashish prajapati — Sat, 11 Jul 2026 17:23:43 +0000

Welcome to Day 2 of my Spring Boot learning journey! 👋

After understanding the fundamentals of Spring Boot on Day 1, today I moved from theory to practice by setting up my complete development environment and building my very first Spring Boot application.

🛠️ Development Environment

To begin my Spring Boot development, I set up the following tools:

Eclipse IDE – For writing and managing Java code.
MySQL – To store application data.
Spring Boot – The backend framework.
Maven – For dependency management and project building.

With everything installed and configured, I was finally ready to write some code.

📦 Creating My First Entity: Product

The first class I created was a simple Product class.

It contains three fields:

id
name
price

Along with that, I manually wrote:

Constructors
Getters
Setters
toString() method

At first glance, the code looks quite lengthy because Java requires a lot of boilerplate code for a simple class.

💡 Note: In upcoming days, I'll learn Lombok, which automatically generates constructors, getters, setters, and other methods, making the code much cleaner and easier to maintain.

🗂️ Understanding Spring Boot Project Structure

To follow Spring Boot's layered architecture, I created three important layers:

📌 Controller Layer

The Controller acts as the entry point for client requests.

I created two REST endpoints:

GET `/get-all`

Retrieves all products.
Returns a list of products wrapped inside a ResponseEntity.
Sends an HTTP 200 OK status.

POST `/save-prod`

Accepts a Product object using @RequestBody.
Saves the product.
Returns the saved product with HTTP 201 CREATED.

Using ResponseEntity allows us to send both the response data and the appropriate HTTP status code.

📌 Repository Layer

Next, I created a ProductRepository.

Instead of writing SQL queries manually, I simply extended:

JpaRepository<Product, Integer>

This provides several built-in database operations like:

save()
findAll()
findById()
delete()
update()

without writing any implementation code.

That's one of the biggest advantages of Spring Data JPA.

📌 Service Layer

The Service layer contains the application's business logic.

Here, I created methods to:

Fetch all products.
Save a new product.

The service communicates with the repository, while the controller communicates with the service.

This layered architecture keeps the code organized and easier to maintain.

🔄 Request Flow

The complete flow of my application looks like this:

Client Request

⬇️

Controller

⬇️

Service

⬇️

Repository

⬇️

MySQL Database

⬇️

Response Back to Client

This separation of responsibilities is one of the core principles of Spring Boot development.

📚 Concepts I Learned Today

✅ Setting up Eclipse for Spring Boot development

✅ Configuring MySQL

✅ Creating a Spring Boot project

✅ Understanding layered architecture

✅ Creating an Entity class

✅ Building a Repository using JPA

✅ Writing a Service layer

✅ Creating REST APIs using @GetMapping and @PostMapping

✅ Using @RequestBody

✅ Returning responses with ResponseEntity

💭 My Takeaway

Today was my first real step into backend development with Spring Boot.

Although the project is simple, it helped me understand how different layers of a Spring Boot application communicate with each other. I also realized why Spring Boot is so popular—it lets developers focus on application logic instead of writing repetitive code.

There's still a lot to learn, but building something that actually runs and responds to API requests feels incredibly rewarding.

Tomorrow I'll continue exploring more Spring Boot concepts and improve this project step by step.

Thank you for following my journey! 🚀

#SpringBootJourney Day 2

Learning never stops.

One concept.

One project.

One day at a time. 💚

🚀 Spring Boot Journey - Day 1: Introduction to Spring Boot

Ashish prajapati — Fri, 10 Jul 2026 15:50:45 +0000

Today I started my Spring Boot learning journey! 🌱

📌 What is Spring Boot?

Spring Boot is an extension of the Spring Framework that makes it easy to build Java applications quickly. It reduces boilerplate configuration and helps developers create production-ready applications with minimal setup.

Instead of spending hours configuring XML files and dependencies, Spring Boot lets you focus on writing business logic.

✨ Key Features

✅ Auto Configuration
Automatically configures your application based on the dependencies you add.

✅ Starter Dependencies
Provides pre-configured dependency bundles like:

spring-boot-starter-web
spring-boot-starter-data-jpa
spring-boot-starter-security

✅ Embedded Servers
No need to install Tomcat separately. Spring Boot comes with embedded servers like:

Tomcat (Default)
Jetty
Undertow

✅ Production Ready
Includes built-in features like:

Health Checks
Metrics
Monitoring
Logging

✅ Minimal Configuration
Most configurations work out of the box using sensible defaults.

⚙️ How Spring Boot Works

1️⃣ You create a Spring Boot project.
2️⃣ Add the required starter dependencies.
3️⃣ Write Java classes.
4️⃣ Run the main application class.
5️⃣ Spring Boot automatically configures the application and starts the embedded server.
6️⃣ Your application is ready to serve requests.

🎯 Advantages

✔ Faster Development
✔ Less Configuration
✔ Easy Dependency Management
✔ Embedded Web Server
✔ Microservice Friendly
✔ Production Ready
✔ Easy Testing
✔ Large Community Support

📚 What I Learned Today

Difference between Spring and Spring Boot
Why Spring Boot is widely used
Auto Configuration
Starter Dependencies
Embedded Servers
Production-ready features
Basic project structure

This is just Day 1 of my Spring Boot journey. Looking forward to exploring REST APIs, JPA, Hibernate, Microservices, Security, and much more in the coming days! 💻☕

SpringBoot #Java #BackendDevelopment #Programming #LearningInPublic #JavaDeveloper #100DaysOfCode #SoftwareDevelopment #CodingJourney #Developers

My GitHub Streak Broke

Ashish prajapati — Sat, 20 Jun 2026 03:35:21 +0000

My GitHub Streak Broke, and It Taught Me an Important Lesson

Hi, I'm Anticoder03, a developer who genuinely likes seeing GitHub turn green.

I enjoy being consistent, building projects, learning new technologies, and contributing every day. Like many developers, I was dedicated to maintaining my GitHub streak.

But one day, it broke.

Not because I stopped loving development or because I lost motivation. I was simply exhausted from balancing classes, assignments, tests, and everything that comes with being a student.

The streak was gone.

At first, it felt disappointing. After spending so much time keeping it alive, losing it in a single day felt frustrating.

Then I asked myself an important question:

Does a GitHub streak really define me as a developer?

My answer is no.

Don't get me wrong. I know streaks have value. They encourage consistency, discipline, and the habit of showing up every day.

But they also have limits.

A number on GitHub cannot define how good you are as a developer.

I remember there were times when I would make meaningless commits or simply update my profile README just to keep the streak alive.

Looking back, I asked myself:

Did those commits actually matter?

Not really.

We are not bots designed to build streaks every day.

We are human beings.

We get tired.

We experience burnout.

We need breaks.

Sometimes, taking a step away from the screen is more productive than forcing ourselves to make a commit just for the sake of preserving a number.

I was so focused on maintaining the streak that I forgot the real purpose behind it:

Learning. Building. Growing.

So let me ask you another question.

If your streak disappears tomorrow, does that mean you suddenly lose all your value as a developer?

Absolutely not.

You still know the technologies you've learned.

You still know how to solve problems.

You still know how to overcome challenges.

Your skills don't disappear just because a green square does.

Sometimes, losing something teaches us something new.

And honestly, I'm glad my streak broke because it gave me a new perspective.

Will I build another streak?

Yes.

But this time, I want every contribution to have meaning. I want to create things that add value, teach me something, or genuinely satisfy me as a developer.

And if my streak breaks again in the future, it won't be because I failed.

It will be because I chose to rest.

I'm currently a Master's student learning AI and Data Science, and during this journey, I also took a long break from writing.

When I returned, the first thing I did was read the comments people had left on my previous posts. Their words gave me new energy to start writing again.

This post isn't only about technology.

It's about balance.

It's about remembering that behind every GitHub profile is a real person, not a machine.

So if you've been stressing over your streak lately, this is your reminder:

Build skills, not pressure.

Create value, not meaningless commits.

Protect your passion, because consistency is important, but sustainability is even more important.

At the end of the day, your GitHub profile is only a small reflection of your journey. It is not the definition of who you are as a developer.

Thank you for reading. ❤️

Why You Should Start Using Linux

Ashish prajapati — Sun, 14 Jun 2026 18:30:19 +0000

A few years ago, I thought Linux was only for hackers, programmers, and people who spent their entire day inside a terminal.

I was wrong.

Linux is one of the most powerful, flexible, and reliable operating systems available today, and it's becoming easier to use than ever before.

🚀 Performance Matters

Many Linux distributions use significantly fewer system resources than Windows. Older laptops and desktops that struggle with modern operating systems often feel surprisingly fast again after switching to Linux.

🔒 Better Security

Linux is built with security in mind. Its permission system, open-source nature, and lower malware targeting make it a strong choice for users who care about protecting their data.

💰 Completely Free

No expensive licenses. No activation keys. No forced upgrades.

Most Linux distributions are completely free to download, use, and customize.

🛠 Perfect for Developers

Whether you're working with web development, cloud computing, containers, AI, cybersecurity, or DevOps, Linux provides a development environment that's hard to beat.

Many of the technologies powering the internet run on Linux servers.

🎨 Freedom and Customization

Want your desktop to look minimal? Modern? Futuristic?

Linux gives you complete control over your system. You can customize nearly every aspect of your experience.

🌍 Amazing Community

One of Linux's biggest strengths is its community. Thousands of developers and enthusiasts contribute to improving the ecosystem and helping newcomers learn.

Is Linux Perfect?

No.

Some specialized software and certain games may still work better on Windows. There can also be a learning curve when you're getting started.

But if you're curious about technology, want more control over your computer, or simply want a faster and more secure experience, Linux is absolutely worth trying.

You don't have to switch overnight.

Start with beginner-friendly distributions like Ubuntu, Linux Mint, or Fedora. Experiment, explore, and learn.

You might discover that the operating system you've been looking for has been open source all along.

Why CRUD Apps Are Slowly Dying

Ashish prajapati — Wed, 20 May 2026 16:17:06 +0000

It’s been a while since I last wrote something technical.

Academics, projects, and work kept me busy for quite some time, but now I finally have a little space to start writing and building consistently again.

And honestly, there’s no better topic to restart with than this.

For years, beginner developers were told to build CRUD applications.

Todo apps
Inventory systems
Basic dashboards
Admin panels

And honestly, that made sense.

CRUD apps taught developers the fundamentals of software engineering:

✅ Databases
✅ APIs
✅ Authentication
✅ Backend logic
✅ Frontend integration

They became the foundation of modern web development.

But the Industry Has Changed

Today, AI can generate a basic CRUD application in minutes.

Need:

a login system?
a product dashboard?
REST APIs?
database models?
admin panels?

AI tools can now build most of it instantly.

The barrier to creating repetitive software has collapsed.

Does That Mean Software Engineering Is Dead?

No.

It means the value has shifted.

Companies are no longer impressed by applications that only perform:

Create → Read → Update → Delete

Because CRUD is becoming automation-friendly.

What matters now is:

System architecture
Scalability
Security
AI integration
Real-time systems
Developer experience
Performance optimization
Solving actual business problems

The Real Shift Happening in Tech

The developers who will thrive in the AI era are not the ones who can only build forms and tables.

They are the ones who can:

Design scalable systems
Build intelligent workflows
Understand infrastructure
Optimize performance
Integrate AI into products
Think beyond boilerplate code

CRUD Is Becoming a Feature — Not the Product

That’s the biggest shift modern developers need to understand.

Building software is no longer just about:

createUser()
updateProduct()
deleteTask()

It’s about building systems that are:

intelligent
scalable
secure
adaptive
user-focused

Skills That Matter More in 2026

Modern developers should start learning:

AI-assisted development
Cloud & Edge Computing
DevSecOps
Scalable backend architecture
WebSockets & real-time systems
Vector databases & RAG
Cybersecurity fundamentals

Final Thought

AI is not replacing developers.

It’s replacing repetitive development.

The future belongs to developers who can:

build systems, solve problems, and think architecturally.

And honestly?

That shift is already happening.

Feels good to finally start writing again.

🚀 From Excel to Web App: How I Built a Smart Assignment Management System for 125 Students

Ashish prajapati — Sun, 12 Oct 2025 06:46:38 +0000

👋 Introduction

Hey everyone! I’m Ashish, an MCA student — and, like most developers, I can’t resist turning simple problems into full-on coding projects. 😅

This semester, my Python professor gave me a new role:

“You’ll be the Python subject representative. Help manage assignments and track student progress.”

Sounds easy, right? Well, not quite.

My actual task was to monitor assignment progress for all 125 students, help the professor communicate updates to the class, and ensure that everyone’s assignments were properly submitted and tracked.

The professor suggested the old-school route —

“Just keep it all in an Excel sheet.”

But come on... I’m a developer. Why settle for spreadsheets when I can build something better?

So, I decided to turn this Excel nightmare into a full-fledged web application that could handle everything — tracking, monitoring, communication, and analytics — all in one place.

That’s how Assignment Checklist was born. 🎯

💡 The Idea: Turning Manual Management into a Smart Web App

What started as a “track assignments” task quickly turned into something much bigger:
A complete Assignment Management and Progress Monitoring System for the entire class.

The goal?

Make it easy for teachers and reps to manage assignments, monitor student performance, and communicate updates efficiently.

No Excel sheets. No manual status updates. Just clean, digital automation.

🧭 What Is “Assignment Checklist”?

Assignment Checklist is a web application designed for teachers, subject representatives, and students to simplify assignment tracking, class communication, and progress monitoring.

Here’s what it can do:

✨ Key Features

🗂️ Assignment Management
Create, edit, and organize assignments with due dates and descriptions.
👨‍🎓 Student Progress Tracking (125+ Students)
Track every student’s assignment status — from Uncompleted to Pending to Completed.
📢 Professor–Class Communication
The app helps professors and class reps share important updates or reminders directly — no separate WhatsApp chaos.
📊 Live Analytics Dashboard
Visualize class-wide progress with interactive Chart.js graphs and summaries.
🔒 Secure Editing
Only authorized users (professors or reps) can modify student records or mark completion.
📈 Reports & Insights
Get instant overviews of overall performance — who’s on track and who’s falling behind.
💬 Simplified Collaboration
Makes it easy for the professor and subject rep to coordinate and track class-wide assignment flow.

🧰 Tech Stack

Technology	Purpose
PHP (Vanilla)	Backend logic and data handling
MySQL	Database for assignments & student records
Bootstrap 5	Clean, responsive user interface
Chart.js	Interactive charts for progress tracking
FontAwesome	Icons to improve UI clarity
HTML/CSS/JavaScript	Frontend structure and interactivity
XAMPP	Local development and testing environment

I kept it simple, lightweight, and deployable on any basic server — perfect for quick academic tools.

⚙️ Architecture & Documentation (Coming Soon!)

To make it scalable and maintainable, I’m documenting everything, including:

🧾 DFD (Data Flow Diagram) – Data movement between modules
🧱 ER Diagram – Entity relationships for assignments, students, and subjects
🎭 Use Case Diagram – Role-based system interactions
⚡ API Documentation – For potential integration with student/teacher login systems

All documentation will soon be available on the GitHub repo.

🖥️ Preview & Source Code

📂 GitHub Repository:
👉 Assignment Checklist Web App

🌐Preview(Static):

🌐 Live Preview:
Coming soon! (Will update once deployed publicly.)

🔍 Behind the Scenes: What I Learned

This project taught me way more than I expected:

Excel doesn’t scale — especially for 125 students 😅
UI/UX matters — teachers don’t want to “figure things out”; it has to just work
Database design is the backbone — normalization and relationships made progress tracking smooth
Automation saves time — what took hours in Excel now happens instantly
Collaboration needs structure — the app became the single source of truth for all assignment updates

💬 Future Plans

I’m currently expanding Assignment Checklist into something even more powerful:

🔐 User Authentication: Separate dashboards for teachers, reps, and students
📱 Mobile-First UI: Redesign using Tailwind CSS for smoother mobile access
📬 Automated Notifications: Email/SMS alerts for pending or upcoming assignments
📤 PDF Reports: One-click export of student progress for professors
☁️ Cloud Deployment: Online hosting for real-time access

🤝 Contributing

I’d love your thoughts, feedback, or pull requests!

Fork the repo
Create your feature branch
Submit a PR with your improvement

You can also connect directly via GitHub.
If you like the project, leave a ⭐ on the repo — it really helps!

👨‍💻 About the Author

Hey, I’m Ashish (aka Anticoder03) — a coding enthusiast, anime lover, and someone who believes in building solutions that make everyday life easier.

I enjoy taking small, repetitive academic tasks and turning them into creative coding projects. This one’s a perfect example — what started as “track Excel assignments” became a real working system that helps 125 students and my professor every day.

💡 “If a task feels repetitive, automate it. If it feels boring, make it creative.”

🏁 Final Words

This project started as a small helper tool for my class, but it became something way bigger — a digital system that connects professors, reps, and students, making academic coordination smoother and more efficient.

If you’re a student, rep, or teacher tired of manually updating spreadsheets, take it from me — building your own web app might just be the best learning experience you’ll have this semester.

Thanks for reading! ❤️
Let’s connect and collaborate —
🔗 GitHub: Anticoder03

🧩 TL;DR

Built a full web app to replace Excel-based assignment tracking and class communication for 125 students using PHP, MySQL, and Bootstrap — complete with analytics, reports, and secure access.

Because… developers don’t just manage data — they build systems. 💪

🚀 Build Your Own Anime Explorer with HTML, Tailwind & the Jikan API!

Ashish prajapati — Thu, 26 Jun 2025 05:25:19 +0000

Are you an anime fan and a web dev? Why not combine both and build something epic? 💥

Introducing AnimeForge – a fully responsive web app that shows top-rated anime, movies, and even lets you search and view detailed info using the Jikan API (MyAnimeList Unofficial API). This project is built with HTML, Tailwind CSS, and JavaScript – no frameworks, just clean code and otaku energy! ⚔️👨‍💻

🌟 Features

✅ Explore top-rated anime series

✅ Browse anime movies

✅ View full anime details (genre, episodes, rating, synopsis, etc.)

✅ Dark / Light Theme Toggle 🌗

✅ Live Search functionality 🔍

✅ Responsive layout with Tailwind CSS

✅ Built with 🧠 and ❤️ by a fellow otaku

🧪 Tech Stack

📄 HTML5
🎨 Tailwind CSS
🔥 Vanilla JavaScript
📡 Jikan API – for anime data

🖼️ Screenshots

All UI is responsive and works great on mobile & desktop.

📂 Project Structure

AnimeForge/
├── index.html             # Top Anime Page
├── movies.html            # Movie Page
├── anime.html             # Anime Details Page
├── about.html             # About Me Page
├── theme_change.js        # Dark mode logic
├── screenshorst/          # Screenshots
└── README.md / LICENSE

🔧 How It Works

We use the Jikan REST API to fetch:

📺 Top anime series → https://api.jikan.moe/v4/top/anime?type=tv
🎬 Top anime movies → https://api.jikan.moe/v4/anime?type=movie
🔍 Search anime by name → https://api.jikan.moe/v4/anime?q={search}

All cards are dynamically generated using plain JS DOM magic. Clicking on a card opens anime.html?id=XXXX, fetches full info, and renders a beautiful detail view.

💡 Live Demo

🚀 https://animeforge.netlify.app/

📁 Or just clone it and run locally:

git clone https://github.com/Anticoder03/animeforge.git
cd animeforge
open index.html

🙋‍♂️ About the Developer

Hey! I'm Ashish Prajapati – a full-stack learner, anime lover, and terminal ninja from 🇮🇳
Built this as a fun side project to combine code + anime 👨‍💻⚔️

🐙 GitHub: Anticoder03
📸 Instagram: @ashiah03_prajapati

📜 License

Licensed under the MIT License. Use it, remix it, share it freely 🪄

“Anime taught me never to give up. Code made me unstoppable.” – Ashish (Anticoder03)

✨ Let’s Connect!

💬 Drop a comment if you liked it or want more anime-themed dev content.
💡 Thinking of building a React/GSAP version next — who’s in?

🚀 Chrome 135 Brings `::scroll-button()` and `::scroll-marker()` — Say Goodbye to JavaScript Carousels

Ashish prajapati — Fri, 13 Jun 2025 05:00:18 +0000

With the release of Chrome 135, web developers finally get access to two powerful new pseudo-elements:

::scroll-button()
::scroll-marker()

These pseudo-elements unlock fully functional carousels, sliders, and scrollable components without a single line of JavaScript.

TL;DR: These new features make interactive scroll experiences accessible, stylable, and keyboard-friendly — all from your CSS file.

🆕 What Are `::scroll-button()` and `::scroll-marker()`?

`::scroll-button()`

This pseudo-element renders scroll control buttons — left/right or up/down depending on the scroll direction. You can style them like any element, and users can interact with them out of the box.

`::scroll-marker()`

Think of this like scrollable radio dots — showing the position of each scroll snap point. They’re interactive, accessible, and visual indicators of your scroll progress.

Why They're a Big Deal

✅ Automatically accessible (screen reader + keyboard support)
✅ Pairs with scroll-snap-type
✅ No JavaScript needed
✅ Fully stylable using CSS

🔥 Real-World Carousel Example (JavaScript Fallback)

Here’s a simple JavaScript-based carousel (for legacy support), which will soon be entirely CSS-driven using ::scroll-button() and ::scroll-marker() in Chrome 135+:

👉 Live Demo Here

<!-- Full working demo with scroll + JS -->
<div class="carousel">
  <!-- Slides -->
</div>

[Full code example here... already shown above]

💡 What This Will Look Like in Pure CSS

.scroll-container::scroll-button(start) {
  content: '◀';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}

.scroll-container::scroll-button(end) {
  content: '▶';
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}

No JavaScript. No event listeners. Just drop in a scroll-snap container, and the browser handles it.

🎯 Why This Matters

Using ::scroll-button() and ::scroll-marker() means:

✅ Native accessibility (no ARIA hoops to jump through)
✅ Built-in keyboard support
✅ Zero JS needed for sliders
✅ Smaller bundle sizes, better perf

🧪 Browser Support (as of Chrome 135)

Browser	Support
✅ Chrome 135+	Full
⚠️ Edge (Chromium)	Behind flag
❌ Firefox	Not yet
❌ Safari	Not yet

To enable the feature in Chrome manually:

chrome://flags/#enable-experimental-web-platform-features

🧠 Final Thoughts

This is a huge leap for native web components. Once Firefox and Safari catch up, we’ll finally have fully accessible carousels and sliders without needing bloated libraries or JS hacks.

Until then — progressive enhancement is your best friend.

🙋‍♂️ Let’s Talk!

What would you build with ::scroll-button()?

A portfolio carousel?
A product slider?
An onboarding walkthrough?

Should developers ditch JS sliders forever? Or is it too early?

👉 Try the full responsive carousel demo:
🔗 https://clever-cocada-9cd821.netlify.app/

Follow me for more frontend deep dives!
#CSS #HTML #Chrome135 #Frontend #WebDev #Accessibility #scrollbutton #nativecarousel #DevTo

🧾 Build Your Own Modern Resume Builder with HTML, Tailwind CSS & JavaScript

Ashish prajapati — Sun, 04 May 2025 04:33:12 +0000

Creating a professional resume shouldn't feel like a daunting task. That’s why I built a sleek, responsive Resume Builder that allows anyone to craft beautiful resumes in minutes. Whether you’re a student, developer, or job-seeker — this tool is designed for you!

✨ Key Features

✅ 4 Unique Templates
✅ Form-based Input Interface
✅ PDF Export Functionality
✅ Fully Responsive Design
✅ Tailwind-Powered UI
✅ Customizable & Open Source

💻 Tech Stack

Frontend: HTML5, Tailwind CSS, JavaScript
PDF Library: html2pdf.js
Fonts: Google Fonts
Hosting: GitHub Pages

🧠 Why I Built This

I noticed many resume builders out there are either too complex or behind a paywall. So I asked myself:

"Why not build something simple, stylish, and open-source?"

And that's exactly what I did — a free, modern resume builder anyone can use and customize.

🖼️ Available Templates

Sidebar Design — Neatly organized layout with personal info on the side.
Header Design — Eye-catching header with a clean two-column format.
Timeline Design — Great for showcasing experience with a vertical timeline.
Card Design — Minimal card layout with hover animations and clean typography.

📥 How It Works (Under the Hood)

🧾 1. User Input

<form id="resumeForm">
  <input type="text" id="name" placeholder="Full Name" required />
  <!-- More fields here -->
</form>

🎨 2. Template Selection Logic

const template = document.getElementById('template').value;
window.location.href = `templates/${template}.html?${params}`;

📄 3. PDF Generation

const opt = {
  margin: 0.2,
  filename: 'resume.pdf',
  image: { type: 'jpeg', quality: 0.98 },
  html2canvas: { scale: 2 },
  jsPDF: { unit: 'in', format: 'letter', orientation: 'portrait' }
};
html2pdf().set(opt).from(document.getElementById('resume-content')).save();

📱 Responsive Design Sample

.resume-container {
  width: 8.5in;
  min-height: 11in;
  margin: 0 auto;
  padding: 1in;
  background: white;
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

🚀 Getting Started

git clone https://github.com/Anticoder03/resume-builder.git
cd resume-builder
open index.html  # or just double click the file

Then, just fill the form and generate your PDF!

🏗️ Development Process

🔹 Planning Phase

Defined user needs & ideal features
Created mockups & UI flows
Designed responsive breakpoints

🔹 Development Phase

Built input form with Tailwind CSS
Added 4 switchable templates
Implemented html2pdf.js for download

🔹 Testing & Optimization

Cross-browser & mobile tested
Print styles refined
PDF quality tuned

⚙️ Challenges & Solutions

🐞 PDF Rendering Glitches

Fixed by optimizing html2canvas settings and using useCORS.

📱 Mobile Responsiveness

Used Tailwind's responsive classes and adjusted layout with breakpoints.

🧪 Form Data Validation

Implemented custom JS validation and feedback messages.

🎭 Smooth Template Switching

Used fade transitions and lightweight rendering logic.

🔮 Future Plans

Dark Mode
More Templates
Multi-language Support
AI-Powered Resume Suggestions
Backend for Save/Edit functionality

📚 Key Learnings

✅ Mastered responsive design & media queries
✅ Gained practical experience with html2pdf.js
✅ Understood how to collect, validate, and pass form data via query params
✅ Refined UI/UX practices for web apps

🔗 Useful Links

🔗 GitHub Repo
🌐 Live Demo

🙌 Final Words

This project has been a labor of love — merging functionality with elegant design. I hope it helps you or inspires your next side project!

If you found this helpful, consider giving it a ⭐ on GitHub or sharing it with friends.

Feel free to drop feedback or connect on LinkedIn!

✨ Visualizing a Feeling Through Particles, Anime.js, and Dreamy Backgrounds ✨

Ashish prajapati — Sat, 26 Apr 2025 18:28:44 +0000

Hey everyone! 👋

Today I’m not just sharing a project — I’m sharing a feeling.

A feeling I tried to translate into visuals: ✨motion, freedom, softness, a dream.✨

Through moving particles, floating animations, and soft color shifts, I tried to capture what I often feel — a quiet, slow dance between energy and peace. 🕊️

This feeling was inspired by a story that really touched my heart — an emotion I carried from the anime Darling in the Franxx.

It’s not a direct recreation — it’s more like the echo of what I felt while watching it: the hope, the loneliness, the gentle freedom of dreams in the sky.

🎯 What This Represents for Me

Particles are my scattered thoughts, moving gently, sometimes colliding, always alive.
Flying birds are my dreams — drifting slowly across endless skies.
Anime.js animations of hearts, wings, feathers — are pieces of emotion that keep moving, floating, never fully still.
Smooth scrolling through soft background changes feels like the way emotions flow — not in sudden bursts, but gradual, natural, effortless.

This isn’t just a page with effects.

It's the visual version of something inside me.

⚙️ How I Built My Feeling (Technologies Used)

HTML5
CSS3
JavaScript (ES6)
Particles.js
Anime.js
Intersection Observer API
Smooth Scroll Behavior

📜 Small Glimpses of the Code

Particles Moving Like Gentle Chaos

particlesJS('particles-js', {
  particles: {
    number: { value: 80 },
    color: { value: '#ff6b6b' },
    shape: { type: 'circle' },
    move: { speed: 2, random: true }
  }
});

The particles aren't random. They're lively, yet peaceful — like a mind daydreaming.

A Heart That Breathes

anime({
  targets: '.heart',
  scale: [1, 1.2, 1],
  duration: 3000,
  loop: true,
  easing: 'easeInOutQuad'
});

This little animation is the way my heart sometimes feels — expanding with hope, shrinking with fear, expanding again.

Soft Transitions Between Feelings (Sections)

const observer = new IntersectionObserver((entries) => {
  entries.forEach((entry) => {
    if (entry.isIntersecting) {
      const colors = {
        first: '#1a0f2e',
        second: '#2d1b4e',
        third: '#4a1942',
        fourth: '#6b2c70',
        fifth: '#8e3a8e'
      };
      document.body.style.backgroundColor = colors[entry.target.id];
    }
  });
}, { threshold: 0.3 });

Each background color is a different emotion for me. A small shift, but meaningful.

A Dream Floating Across the Sky (Flying Bird)

let birdPosition = 0;
function animateBird() {
  birdPosition += 0.5;
  const yOffset = Math.sin(birdPosition * 0.05) * 50;
  bird.style.transform = `translateX(${birdPosition}px) translateY(${yOffset}px)`;
  if (birdPosition > window.innerWidth) {
    birdPosition = -100;
  }
  requestAnimationFrame(animateBird);
}
animateBird();

Just like how some dreams move — a little lost, a little aimless, but always moving.

📸 A Glimpse Into My Dream

[Link to the Feeling] : (https://my-dream-story.netlify.app/)

💬 What I Felt While Building This

Honestly?

Calmness.
Nostalgia.
A little sadness.
A lot of peace.

I wasn’t building a "project" this time. I was painting an emotion with code. 🎨

Code became my canvas, and these tiny interactions became my little world for a while.

And somewhere in this creation,

I kept thinking about the story of Zero Two and Hiro, the loneliness they faced, the skies they dreamed about —

and how even when everything felt heavy, their dreams always found a way to float. 🕊️

🚀 If You Ever Feel Like Coding a Feeling...

Here’s my advice:

Don’t worry about "making it perfect."
Focus on how it feels, not just how it looks.
Let animations breathe.
Let your emotions guide the color palette, the speed, the flow.

Because sometimes, code isn’t logic — it’s art. ✨

🎉 Thank You for Reading

This was deeply personal for me.

If you’ve ever felt something you couldn’t put into words — maybe try putting it into code. It’s surprisingly healing. 💖

Would love to hear if you've ever built something emotional too!

Stay dreamy, stay coding. 🌌

Inspired in spirit by the anime "Darling in the Franxx" — to the dreamers who keep flying, no matter what. 🌸

Day 7: Animated Landing Page — Interactive Product Showcase 🚀

Ashish prajapati — Sat, 26 Apr 2025 10:44:14 +0000

Hey everyone! 👋

Today is Day 7 of my creative animation journey.

I'm super excited to share what I worked on: an Animated Landing Page concept that utilizes ScrollTriggers, Anime.js timelines, staggered animations, and interactive effects!

🌟 Project Concept

Theme: Furniture Product Launch / Furniture Agency Showcase

Goal: To create an immersive landing page experience using scroll-based animations, interactive hover effects, and a fluid timeline of motion that draws users deeper into the collection.

🎨 Design Layout & Animation Flow

🔹 Header Section

Hero Background: Dynamic image showcasing elegant furniture pieces.
Scroll Animation: Tagline and brand name animate in with smooth fades and staggered text reveals.
Interactivity: Hovering over the furniture slightly zooms the image for a lively feel.
CTA Button: "Explore Collection" appears with a subtle scaling animation.

🔹 Features Section

3-Column Layout: Highlighting key features like premium materials, craftsmanship, and customizable options.
Scroll Triggered Animation: Each feature slides up into view with staggered motion.
Icon Animations: Icons related to each feature animate from different directions.

🔹 Product Showcase

Image Gallery: Show different views or setups of the furniture in styled spaces.
Anime Timeline: A sequence where furniture items appear one after another as the user scrolls.
Hover Effects: Slight zoom and tilt on hover for interactivity.

🔹 Testimonials Section

Carousel of Testimonials: Each review fades and slides in.
Typewriter Animation: Customer quotes appear word-by-word for added anticipation.
Extra Info Popups: Clicking on a testimonial reveals more details.

🔹 Footer Section

Smooth Slide-in: Contact links and social icons animate in staggered fashion.
Scroll Progress Animation: A progress indicator animates based on how far down the page the user has scrolled.

⚡ Technical Highlights

Scroll Triggers: Different animations trigger when sections enter the viewport.
Anime.js Timeline: Used to sequence multiple animations smoothly.
Staggered Effects: Texts, images, and links appear one after another.
Interactivity: Hover and click animations to make the page feel alive.
Responsive Design: Works smoothly on mobile and desktop screens.

🛠️ Technologies Used

HTML, CSS, and JavaScript
Anime.js for powerful timeline-based animations
GSAP ScrollTrigger (optional for deeper scroll control)

📸 Sneak Peek

Check out my live demo here:

🚀 Final Thoughts

Creating this landing page was a ton of fun!

Animating the furniture collection while keeping performance and creativity in balance taught me a lot about crafting immersive user experiences.

Stay tuned for even more crazy ideas coming up in the next few days! 🎯

Thanks for checking it out! 🙌

If you liked it or have feedback/suggestions, feel free to drop a comment.

Let's keep animating and making the web more magical! 🌈

👨‍💻 Author

Ashish Prajapati

💼 LinkedIn

✍️ Dev.to Blog

💻 GitHub

DEV Community: Ashish prajapati

🚀 Spring Boot Journey – Day 3: Mastering CRUD Operations, Lombok & JPA Query Methods

📌 What I Learned Today

📚 Adding Multiple Records

⚡ Making Code Cleaner with Lombok

🗄️ Repository Layer with Spring Data JPA

🔍 JPA Query Methods

⚠️ Exception Handling

🏗️ Project Architecture

📖 Key Concepts Covered Today

💭 My Takeaway

#SpringBootJourney Day 3

🚀 Spring Boot Journey – Day 2: Setting Up My Development Environment & Building My First REST API

🛠️ Development Environment

📦 Creating My First Entity: Product

🗂️ Understanding Spring Boot Project Structure

📌 Controller Layer

GET /get-all

POST /save-prod

📌 Repository Layer

📌 Service Layer

🔄 Request Flow

📚 Concepts I Learned Today

💭 My Takeaway

#SpringBootJourney Day 2

🚀 Spring Boot Journey - Day 1: Introduction to Spring Boot

📌 What is Spring Boot?

✨ Key Features

⚙️ How Spring Boot Works

🎯 Advantages

📚 What I Learned Today

SpringBoot #Java #BackendDevelopment #Programming #LearningInPublic #JavaDeveloper #100DaysOfCode #SoftwareDevelopment #CodingJourney #Developers

My GitHub Streak Broke

My GitHub Streak Broke, and It Taught Me an Important Lesson

Why You Should Start Using Linux

🚀 Performance Matters

🔒 Better Security

💰 Completely Free

🛠 Perfect for Developers

🎨 Freedom and Customization

🌍 Amazing Community

Is Linux Perfect?

Why CRUD Apps Are Slowly Dying

But the Industry Has Changed

Does That Mean Software Engineering Is Dead?

The Real Shift Happening in Tech

CRUD Is Becoming a Feature — Not the Product

Skills That Matter More in 2026

Final Thought

🚀 From Excel to Web App: How I Built a Smart Assignment Management System for 125 Students

👋 Introduction

💡 The Idea: Turning Manual Management into a Smart Web App

🧭 What Is “Assignment Checklist”?

✨ Key Features

🧰 Tech Stack

⚙️ Architecture & Documentation (Coming Soon!)

🖥️ Preview & Source Code

🔍 Behind the Scenes: What I Learned

💬 Future Plans

🤝 Contributing

👨‍💻 About the Author

🏁 Final Words

🧩 TL;DR

🚀 Build Your Own Anime Explorer with HTML, Tailwind & the Jikan API!

🌟 Features

🧪 Tech Stack

🖼️ Screenshots

📂 Project Structure

🔧 How It Works

💡 Live Demo

🙋‍♂️ About the Developer

📜 License

✨ Let’s Connect!

🚀 Chrome 135 Brings `::scroll-button()` and `::scroll-marker()` — Say Goodbye to JavaScript Carousels

🆕 What Are ::scroll-button() and ::scroll-marker()?

::scroll-button()

::scroll-marker()

Why They're a Big Deal

🔥 Real-World Carousel Example (JavaScript Fallback)

💡 What This Will Look Like in Pure CSS

GET `/get-all`

POST `/save-prod`

🆕 What Are `::scroll-button()` and `::scroll-marker()`?

`::scroll-button()`

`::scroll-marker()`