teleren/devto huggingface dataset:
JEE Main: Your Gateway to Premier Engineering Institutes
Published: 2024-01-10 18:56:49

The [Joint Entrance Examination (JEE)](https://studyincountries.in/joint-entrance-examination-jee-main/) Main is a prestigious engineering entrance exam in India. Administered by the National Testing Agency (NTA), it serves as the gateway for admission to various undergraduate engineering programs at renowned institutions like the Indian Institutes of Technology (IITs), National Institutes of Technology (NITs), and other centrally funded technical institutes.

JEE Main is conducted in two phases – Paper 1 for admission to B.E./B.Tech programs and Paper 2 for B.Arch and B.Planning courses. The exam assesses candidates' proficiency in Physics, Chemistry, and Mathematics, evaluating their problem-solving skills and understanding of scientific principles.

As one of the most competitive exams in the country, JEE Main demands rigorous preparation. Candidates often enroll in coaching programs, practice extensive self-study, and take mock tests to enhance their performance.

Scoring well in JEE Main opens doors to pursue engineering education at premier institutions, shaping the academic and professional trajectory of thousands of aspirants each year. The exam's comprehensive nature and emphasis on conceptual understanding make it a benchmark for excellence in the field of engineering education in India.
JEE Main is renowned for its challenging nature, testing not only candidates' knowledge but also their problem-solving abilities and time management skills. The inclusion of both online and offline modes for Paper 1 allows flexibility for candidates with different preferences.

The exam's significance extends beyond the IITs and NITs. JEE Main scores are widely accepted by various engineering colleges across the country, making it a crucial examination for students aspiring to pursue engineering at the undergraduate level.

To aid candidates in their preparation, numerous resources are available, including official syllabi, sample papers, and practice tests. Additionally, coaching institutes and online platforms offer specialized guidance and study materials to enhance candidates' readiness for the exam.

JEE Main is not just an academic challenge; it's a competitive journey that shapes the future of aspiring engineers. The counseling and seat allocation process, often facilitated by the Joint Seat Allocation Authority (JoSAA), adds another layer of complexity as candidates vie for seats in their preferred institutes and branches.

As the landscape of education evolves, JEE Main continues to adapt, incorporating changes to align with contemporary needs. Keeping abreast of these modifications is crucial for aspirants, ensuring they are well-prepared for the challenges and opportunities that JEE Main presents on their academic journey.






![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wxzke22mp9c0gtxdz0g2.png)
the silliest UI mistake
Published: 2024-01-10 18:16:03


### what is it?

a "false click button" is an element that looks like a button, but has a "dead area" that triggers nothing when clicked.

sometimes, clicking said area even triggers typical click animations (such as translate and scale changes), which further aggravates the user experience.

### why does it happen?

this happens when the event is mispositioned on a child element/container instead of the wrapper element.

### where does it happen?

i thought this happened only in products that don't care about ui/ux, but i saw it recently in two products that are industry references in design: duolingo and airbnb.

[i can't  upload gifs here](https://x.com/LukeberryPi/status/1745144209240137801?s=20) for some reason, so check out my twitter/x posts of it happening: in the [duolingo website](https://x.com/LukeberryPi/status/1744717524011192440?s=20) and the [airbnb website](https://x.com/LukeberryPi/status/1743726946125570389?s=20)

### why is it a problem?

a "false click button" can lead a user to click multiple times in frustration, to interpret that there is an error with their internet, or ultimately, to give up and leave your site.

### how to fix it

place the event on the wrapper element, instead of inside a child element/container. also ensure that animations/pointer cursor only happen in the same level where the event happens (again, the wrapper element).

### important

ideally, this wrapper element will be a button, for accessibility reasons. if you must use another element for this, be mindful of [role=button attribute](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/button_role#description) and other a11y implications.

### conclusion

this is an easy bug to fix with significant UX wins. it is definitely worth fixing. i'm a website bug collector, so [follow me on x](https://twitter.com/LukeberryPi) if you want to see more.
css breakfast #1
Tags: webdev, css
Published: 2024-01-10 18:13:43


## `clamp()`

starting a mini blog series where i take a css concept and do a little dive onto how to use it and why i like it!!

calling the series "css breakfast" because like the most important meal of the day, it is important to learn how to use the tools of the web without relying on JS or utility frameworks... >.< ( ok ok ok i will put away my soapbox now)

we are starting off the blog series strong with a new favorite `clamp()`!! it takes three params: `min`, `current`, and `max`.

things we like: 
- replaces media queries for dynamic typography!
- good browser support!  ( whatevs IE )

things we don't like:
- you gotta be careful when using a relative unit for the current param as it affects manual zooming in and zooming out ( aka the size does not change when you do that )

^^^ in order to fix that problem it is best to mix the units for the current param: `clamp(50px, calc(7vw + 1 rem), 100px)`

imho the coolest thing you can do with this is set css variables with all your font sizes!! look at how gorgeous that is <333

```
  --fs-300: clamp(0.94rem, calc(0.92rem + 0.08vw), 0.98rem);
  --fs-400: clamp(1.13rem, calc(1.06rem + 0.33vw), 1.31rem);
  --fs-500: clamp(1.35rem, calc(1.21rem + 0.69vw), 1.75rem);
  --fs-600: clamp(1.62rem, calc(1.37rem + 1.24vw), 2.33rem);
  --fs-700: clamp(1.94rem, calc(1.54rem + 2.03vw), 3.11rem);
  --fs-800: clamp(2.33rem, calc(1.7rem + 3.15vw), 4.14rem);
  --fs-900: clamp(2.8rem, calc(1.85rem + 4.74vw), 5.52rem);
```

as with anything you gotta play around with the best sizes for your site! but say goodbye to those old dusty media queries and say hello to `clamp`!


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


**resources**:
https://developer.mozilla.org/en-US/docs/Web/CSS/clamp
https://www.youtube.com/watch?v=erqRw3E-vn4
https://www.youtube.com/watch?v=U9VF-4euyRo
https://www.youtube.com/watch?v=pbD55DJgOlw


-----

if anything is wrong lemme know! i aint perfect.
#DEVResolutions2024 — My Goals for the New Year! 📝🥦💪🎶📚🧳🏔💚
Tags: devresolutions2024
Published: 2024-01-10 17:58:47

## Professional Goals
These are some of the professional goals I'm pursuing in 2024.

### 1. Overcome procrastination 😅
I'm bad about putting things off until the last minute and would like to change this behavior.

**Action Steps:**
1. Effectively plan ahead with a todo-list.
2. Set aside specific times to work on tasks and timebox them + signal to my team over Slack that I'm unavailable.
3. Do a better job of identifying and prioritizing tasks that need the most attention. 

**Timeline:**
I hope to start working on this immediately, but it's not a finite goal and so will be continuous.

### 2. Help mentors and mentees connect 🤝
I'd like to create a piece of ritual content that allows for mentors and mentees to connect with one another.

**Action Steps:**
1. Draft the post and run it by the team.
2. Contact various folks: those who have requested this program in the past & those who I think might want to put themselves out there as mentors.
3. Continuously share and promote this new post on a regular cadence.

**Timeline:**
I hope to get this one rolling before the month is up!

### 3. Improve AI and listicle moderation 🤖📝
This year, I'd like for us to make progress with our abilities and process for moderating AI and listicles posts — 2 types of posts that quite a few community members have let us know they wish they could filter out from their feeds.

**Action Steps:**
1. Confer with various parties to gather ideas that we could use to improve our methods.
2. Select a number of these ideas to take to the next stage and implement various solutions.
3. Come up with solid ways of measuring the success of these solutions and community sentiment to see if we've made progress.

**Timeline:**
This is something I plan to work on all year.

## Personal Aspirations
For this section, I plan to keep it a little looser... here's my list:
- Participate in [Veganuary](https://veganuary.com/en-us/) (though as noted [here](https://dev.to/michaeltharrington/comment/2c36j), I've technically already lost 😅)
- Completing this [22 day ab workout](https://www.youtube.com/watch?v=CMKw77fbkOs&t=306s&ab_channel=ATHLEAN-X%E2%84%A2) (and continuing to work on my core afterwards)
- Getting to where I can do 3 sets of 10 pullups
- Write, record, and produce a full-length original song
- Play a concert with my band
- Read a book at least 2 hours/week (online articles don't count)
- Travel out west in the USA to experience some rugged terrain
- Find a good way to give back to my community
- Hopefully, _hopefully_ finish building my house 🤞
Tools for creating 2D assets for games
Published: 2024-01-10 17:52:54

Some of the tools used for creating 2D assets for games are:

- Aseprite
- Pyxel Edit
- Piskel
- Adobe Illustrator
- Inkscape
- Affinity Designer

Did I miss any? Let us know in the comments! Also which of these have you used? I have used Aseprite.
Iotawise: An Open-Source Habit Tracking App
Tags: showdev, nextjs, typescript, webdev
Published: 2024-01-10 17:50:16

Introducing **Iotawise**, an open-source habit tracking app I built using latest technologies such as Next.js `/app` dir and shadcn/ui, designed to make tracking habits and building activity streaks effortless!

Github Repository: [Source](https://github.com/redpangilinan/iotawise)
Live Website: [Iotawise](https://iotawise.rdev.pro)

## Features 📙

- **User-Friendly Interface**: With Iotawise, tracking your habits is as easy as it gets. The intuitive interface ensures a seamless experience for users of all levels.

- **Habit/Activity Tracking**: Monitor your daily habits effortlessly and keep a close eye on your progress over time.

- **Activity Streak Monitoring**: Stay motivated by visualizing your activity streaks. Celebrate your accomplishments and stay on track with your goals.

- **Dashboard Analytics**: Gain valuable insights into your habits with analytics and visualization on the dashboard. Understand patterns and optimize your routines for success.

- **Cross-Platform Support (PWA)**: Access Iotawise from any device with cross-platform support, thanks to its Progressive Web App (PWA) capabilities.

## Tech Stack 🛠️

- [Next.js](https://nextjs.org): Using the `/app` directory for the utilization of cutting-edge technologies.

- [TypeScript](https://www.typescriptlang.org): Ensuring type-safe and scalable code.

- [Tailwind CSS](https://tailwindcss.com): Styling made easy for a sleek and responsive design.

- [shadcn/ui Components](https://ui.shadcn.com): Leveraging components for a consistent and polished UI.

- [NextAuth.js](https://next-auth.js.org): Implementing secure Google Authentication.

- [Prisma](https://www.prisma.io): An ORM for seamless database interactions.

- [Zod](https://zod.dev): Utilizing Zod for robust data validations.

- [PlanetScale](https://planetscale.com): The MySQL database ensuring data integrity and performance.

## Contribute 🤝

Iotawise is open source, and your contributions are more than welcome! Whether you're a developer, designer, or habit enthusiast, join me in making Iotawise even better. Check out the GitHub repository and feel free to contribute!
Works for home Netflix Jobs
Tags: job, webdev, beginners, tutorial
Published: 2024-01-10 17:46:23

if you want to work for Netflix and are looking for work from home jobs,this link is for you
**[Join Now](https://shorturl.at/cmqIL
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/em8q5xwtl3z6um3v5eks.jpg))**
Tools used for Game Development (Different Game Engines)
Published: 2024-01-10 17:43:26

Some of the game engines used for game development are:

- Unity 3D Game Engine
- Unreal Engine
- Godot
- CryEngine
- GameMaker Studio

Let me know down below in the comments if I have missed out any. And also let us know which of these game engines you have used? I have used only Unity so far..
What was the best moment in your dev career??
Published: 2024-01-10 17:24:08

Hey fellow developers! 🚀 

We're a community of extraordinary minds, each contributing to the tech world in our own unique ways. From crafting elegant lines of code to building robust systems, we've all achieved some amazing feats. 

Some of us have tackled complex algorithms, while others have created sleek user interfaces that redefine user experiences and maybe some have just changed border radius of a link (jk).

I'm curious to hear about the moments in your career that truly pushed your limits. What's the most intricate problem you've solved, the most challenging project you've undertaken, or the feature that seemed impossible at first but you conquered?

---

Let's share our triumphs and learn from the hurdles that shaped us. Drop your stories below and let's celebrate the brilliance that resides in our developer community!


---

I am a indiehacker and building my startup [devtree](https://devtree.app?utm_source=devto) in public and share my insights, lessons and successes along the way. 

You can also find me on [twitter](https://twitter.com/zainnazirbutt) and [linkedin](https://linkedin.com/in/zainnazirbutt)
Wordpress SCAM Plugin Being Sent to Site Owners
Published: 2024-01-10 17:16:28

Hey everyone,

Most of you probably already know about this, but several of my clients received the below email. Turns out this is a fake URL (looks legit to the average person) and its a malicious plugin.

Dear user
The WordPress Security Team has identified a critical vulnerability on the website: CLIENTSWEBSITE.COM

 
The Remote Code Execution (RCE) vulnerability identified on your site is classified as a critical threat, potentially allowing malicious code execution and putting your data, user details, and overall site security at risk.

 
We advise you to apply the CVE-2024-46188 Patch immediately, while we are working on fixing this critical security concern in the next WordPress version.

 
Simply download the plugin by clicking the button below, install and activate it on your site. This guarantees prompt and trouble-free defense against potential exploits and malicious actions linked to this vulnerability.

#wordpress
#scams
#maliciouscode
So .. I coded in Python
Published: 2024-01-10 17:14:27

I have been using PHP for as long as I can remember. However, recently, I decided to pick up another programming language. As an API developer, one of the my biggest searches when building scalable APIs is how much requests can the api take before giving up.


![Photo by Markus Spiske: https://www.pexels.com/photo/black-laptop-computer-turned-on-showing-computer-codes-177598/](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nevebhe2twuqjraqmmas.jpg)

I initially attempted to learn Scala but that syntax looked like hieroglyphics to me and the set up was just way to cumbersome. I also tried working on other (backend) languages like Go and even NodeJS. _By the way, Scala is really fast. No seriously!_

Finally, I decided to give Python a real go (no pun intended). It was tedious at first, you had to indent properly. A case of a missing line can cost you sleepless debug minutes.

Then you have random variables like ****kwargs** and the rest. Sigh.

After breaking through the initial barriers however, I started to appreciate the language some more. I learnt about list comprehension, the difference between (lists) and dicts, strict typings and my personal favourite; [Protocols](https://peps.python.org/pep-0544/).
_Photo by Markus Spiske: https://www.pexels.com/photo/black-laptop-computer-turned-on-showing-computer-codes-177598/_

Also, great thanks to the team at Django for an awesome framework, definitely made things a lot smoother. I have now completed my first project that I will be shipping into production this week. What a journey it has been. Sure it could have been easier with PHP, but back to the latency issue. My code looks more succint and chops through tasks at an alarming rate (this is a good thing).

So if you are looking for a part time language, pick Python. I mean, look at this beauty:

```
        if res.ok:
            response_body = json.loads(res.content)
            web_ids = {item['reference']: item['id'] for item in response_body['data']}
            cases = [When(reference=key, then=value) for key, value in web_ids.items()]
            Place.objects.filter(reference__in=web_ids.keys()).update(webId=Case(*cases))
```

Here is an AI generated joke for you:

### Why do Python programmers prefer dark mode?

Because light attracts bugs!
Difference Between Singleton Class vs. Static Class - Recap
Published: 2024-01-10 17:00:56

In C#, understanding the difference between a Singleton class and a Static class is essential for various scenarios in software development. Both have unique characteristics and uses:

## Singleton Class

1. **Purpose**: A Singleton class ensures that a class has only one instance and provides a global point of access to it.
Instantiation: It is instantiated once, and the same instance is reused.
2. **Lazy Loading**: Singleton supports lazy loading, meaning the instance is created only when it is needed.
3. **Inheritance**: A Singleton can inherit from other classes and implement interfaces.
4. **State**: It can maintain state across multiple calls and instances of the application.

### Example Use: 
Database connections or a file manager where a single instance manages the resources throughout the application.

## Static Class

1. **Purpose**: A static class is a class that cannot be instantiated. Its members are accessible without creating an object of the class.
2. **Instantiation**: Cannot be instantiated. All members are static and accessed directly with the class name.
3. **Lazy Loading**: Does not support lazy loading in a conventional way. The class is loaded once by the CLR when it is accessed for the first time.
4. **Inheritance**: Cannot inherit from other classes (except for Object) and cannot implement interfaces.
5. **State**: Cannot maintain state as it doesn't support instance variables. All members are static.

### Example Use: 
Utility or helper functions that are generic and don't require object state, like mathematical functions.

## Key Differences:

1. **Instantiation Control**: Singleton controls the instantiation, allowing only one instance. Static classes are never instantiated.
2. **Memory Allocation**: Singleton objects are stored in the heap, while static class objects are stored in the high frequency heap area.
3. **Inheritance and Interfaces**: Singleton can implement interfaces and inherit, while static classes cannot.
4. **State Maintenance**: Singleton can maintain state, but static classes cannot.

## Choosing Between Them:
Use a Singleton when you need a single instance with stateful data across the application.

Use a static class for stateless utility or helper functions that don't require instantiation.

Both Singleton and Static classes promote specific design principles in C#, each serving different purposes based on the requirements of the application.
Imgage: Transforming Creativity – Now on Product Hunt!
Tags: ai, socialmedia
Published: 2024-01-10 16:56:14

We are thrilled to announce the launch of Imgage, an exciting new platform that's set to redefine the way we create and share visual art. Imgage is all about unleashing your creativity and turning ordinary photos into stunning artworks with the power of AI. Today, we're excited to share our journey with the Product Hunt community and invite you to be a part of it.


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

**The Birth of Imgage:**
Imgage was born out of a desire to democratize digital art creation. Our team of passionate artists and developers came together with a singular goal: to make art accessible to everyone, regardless of their technical skills. We wanted to create a space where people could effortlessly transform their ideas into visual masterpieces.


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

**Join Us on Product Hunt:**
We believe in the power of community, and that's why we've chosen Product Hunt as our launchpad. We want you, our early adopters, to be a part of our journey. Your feedback will help us refine Imgage and make it the ultimate creative hub.

[Visit Product Hunt](https://www.producthunt.com/posts/imgage-ai-social-site)
Business card printing in Dubai
Published: 2024-01-10 16:48:25

Both digital and offset printing are available, so it’s easy to make your choice. We take care of the printing needs and wants of our customers. Our goal is to provide a seamless printing experience for our customers. Whether you prefer the vibrant colors of CMYK or the precise details of offset printing, we can meet your needs. Our team ensures that every business card we print reflects your unique style and professionalism. Website: https://printzo.ae/product-category/business-cards/
How to create a Dialog component with RadixUI and TailwindCSS
Published: 2024-01-10 16:37:25


### Why use RadixUI?
RadixUI is an open-source component library used to build friendly and accessible design systems and web applications. These components are unstyled and can be customized to user preferences.

RadixUI offers a wide range of UI components, including buttons, forms, modals, menus, tooltips, and more, focusing on simplicity, performance, and accessibility.

---

#### Getting started…
In this tutorial we are going to create a RadixUI modal dialog component which focus is automatically trapped, works in an uncontrolled way by default but can also be controlled . We are going to use TailwindCSS to style it.

1. You can use npm or yarn to install the package, here we use npm:

`npm install @radix-ui/react-dialog`

2. Import the Dialog component:

![import](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rz99w8bw3lubrmbntbhw.png)

_Let’s assume that TailwindCSS is already installed in the project._

3. Create a dialog modal as the code below:

![dialog-code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dda2crwg4qsupxki5ubx.png)

**< Dialog.Root>** contains all the parts of a dialog.

**< Dialog.Trigger >** component is used to trigger the opening of the modal.

**< Dialog.Portal >** component portals your overlay and content parts into the body.

**< Dialog.Close >** component is used to close the modal.

**< Dialog.Overlay >** component creates a overlay behind the modal.

**< Dialog.Title >** an accessible title to be announced when the dialog is opened.

**< Dialog.Content >** contains content to be rendered in the open dialog.

---

The Dialog component created will look like this:

![dialog-component](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9vh77fgklaxtcr4tqrkz.jpg)

RadixUI simplifies the development process while ensuring accessibility and performance.

---

**Thank you for reading.
If you liked this article shared it!
I appreciate your feedback.**