DEV Community: Dev.to Rater Organization

Modern React website with stunning animations and free code

Nikola Perišić — Thu, 20 Feb 2025 10:26:46 +0000

Tech stack: React.js + TypeScript + Vite

Live preview: https://dev-to-rater.xyz

Repository: https://github.com/perisicnikola37/dev-to-rater

The end: Create React App (2016-2025)

Nikola Perišić — Tue, 18 Feb 2025 07:13:35 +0000

The Sunsetting of Create React App

On February 14, 2025, React officially deprecated Create React App (CRA), marking the end of an era for React developers. For years, CRA was the go-to tool for bootstrapping new React projects.

Why is Create React App Being Deprecated?

React ecosystem has evolved significantly since CRA’s introduction in 2016. Modern frameworks and build tools have surpassed CRA in both performance and flexibility. With no active maintainers and better alternatives available, the React team decided to retire CRA. The React team is encouraging developers to migrate to frameworks like Next.js or build tools like Vite.

Also because:

CRA does not provide a routing system
CRA lacks optimized data-fetching strategies
CRA ships apps as a single JavaScript bundle, which can result in longer load times. Modern frameworks automatically handle code splitting
CRA has lacked active maintainers

What now?

Starting today, developers installing Create React App will see a deprecation warning:

create-react-app is deprecated.

You can find a list of up-to-date React frameworks on react.dev
For more info see: react.dev/link/cra

CRA will still function in maintenance mode and has been updated to support React 19. However, no new features will be added, and developers are strongly encouraged to migrate to modern solutions.

How to Migrate Away from Create React App

You can visit the official guide at the React blog post here.

Final Thoughts

Our tip: If you're looking for the simplest and most efficient way to set up a new React project after Create React App's deprecation, React + Vite is the way to go.

What are your thoughts on this change? Let’s discuss in the comments! 🚀

The biggest backend mistakes you can do

Nikola Perišić — Fri, 14 Feb 2025 09:13:35 +0000

Hello, fellow devs! Welcome to the second part of our series how to become a better developer. You really liked the first part (The biggest frontend mistakes) sooo, voila!

Today we will learn about common backend mistakes. I'll highlight some of these mistakes and show you how to avoid them.

1. Missing security

I intentionally set this as the first point. As a backend developer, you build the system.

Of course, that system need to be secured. I can’t believe how many people still neglect security features like CORS or Rate Limiting in their applications, but sadly, it happens. These topics are crucial for protecting your system against vulnerability attacks. Below, I’ve made a checklist of essential topics to test your system with.

Security Checklist:

Category	Security Measures
Network Security	Enable HSTS
	Use SSL
	Check SSL Version, Algorithms, Key length
Authentication & Session	Use Secure cookies
	Implement SHA256 encryption for passwords
Authorization & Access Control	Implement CSRF
	Test for bypassing authorization schema on forms
Input & Data Validation	Test for HTML and SQL Injection
	Test file extensions handling
Client-Side Security	Check for sensitive data in client-side code
	Use reCAPTCHA whenever you can

2. Poor Database Design

Lack of Proper Indexing: Developers sometimes forget to add indexes or add too many. Neither is good. You should find the right balance. Without indexes, queries become slow as the database scans entire tables. On the other hand, excessive indexing increases storage use and slows down write operations. So be careful.

Our tip: Add indexes only for columns that are queried frequently.

Ignoring Scalability and Future Growth in the beggining: Many developers design databases based on current needs without considering future growth. This leads to issues like lack of partitioning, poor choice of data types, and difficulty in handling high traffic loads later on.

Our tip: You might think that spending a lot of time on database design is unnecessary, but it's not. Database planning requires you to think about current needs and for future growth. As in a previous example, here also, you need to strike for the right balance. We suggest using this formula:

currentNeeds = 10GB // For example

myDatabase = currentNeeds x 0.20 // So add 20%

Practical Explanation:

This formula helps you plan your database by accounting for not just your current needs, but also future growth.

currentNeeds -> This is how much space or how many resources your database currently requires. Think of it as the size of your existing data or the capacity you need for your current operations.
myDatabase -> This is the final size or capacity of your database, which is the combination of your current needs and the additional buffer (20%).

So, instead of just allocating 10GB for your database, you plan for 12GB. This 20% extra space accounts for growth, ensuring your database won't run out of space as you add more data or features over time.

Additional Considerations:

Column Choices: Use appropriate data types. For example, instead of using a VARCHAR(255) for a field that will never exceed 100 characters, use VARCHAR(100) to save space.
Growth Monitoring: Continuously monitor your database's growth. You can set up alerts based on disk usage, table size, and the number of rows. More about database alerts you can find here.

By thinking ahead and allocating 20% more space for growth, you're avoiding potential problems related to database performance and the need for frequent redesigns.

3. Not Considering Caching

Caching is an essential aspect of backend development, yet it's often overlooked.

Why it’s important:

Without caching, your system might become slow as more users access your app. Every time a request is made to the server, the system has to process the request fully, which can lead to latency and performance issues and surely you don't want that.

Our tip: Use in-memory data stores like Redis or Mem****cached to cache frequently accessed data (like product details or user sessions). Also remember to set expiration times and cache invalidation strategies to ensure that the cache is refreshed with the latest data.

4. Hardcoding Values

Hardcoding values such as database connection strings, API keys, and other configuration parameters directly in your code is a common and BIG mistake.

Why it’s bad:

It makes the code harder to maintain.
Exposing sensitive information, like API keys, in code can lead to security issues.
If you need to change a configuration value, you’ll have to search through the entire codebase and update it everywhere.

Bad ❌

public class UserService
{
    public void ConnectToDatabase()
    {
        // Hardcoded connection string, making it difficult to change or secure
        string connectionString = "Server=myServerAddress;Database=myDataBase;User Id=myUsername;Password=myPassword;";
        // Code to establish a connection...
    }
}

Good ✅

public class UserService
{
    public void ConnectToDatabase()
    {
        // Use environment variable to get the connection string securely
        string connectionString = Environment.GetEnvironmentVariable("DB_CONNECTION_STRING");

        if (string.IsNullOrEmpty(connectionString))
        {
            throw new Exception("Database connection string not found.");
        }

        // Code to establish a connection...
    }
}

5. Not Using Version Control Properly

If you write commit messages like this:

git commit -m "fix"
git commit -m "fix v1.2"
git commit -m "fix something"
git commit -m "fix bug"
git commit -m "change"
git commit -m "optimization"

Don't push.

Why it’s bad:

Other developers don't know what you've done in that commit without checking the changed files which requires time.
By doing this you can easily have a lot of commits with same/similar message.
When you need to revert to the old commit, and by seeing commit log like the above one, you cannot know to which one to reset.
In the future you will not know for which part of the application was fix commit, for example.

Good ✅

git commit -m "chore: modify README.md file"
git commit -m "fix: user validation not working"
git commit -m "feat: user validation of create form"
git commit -m "docs: add our team page"
git commit -m "ui: add image swiper on the home page"

Bonus tip: Always write commit messages in Present Tense. So instead of changed write change. You can learn about Conventional Commits here.

6. Not Separating Business Logic, Infrastructure, and Other Concerns

One of the common mistakes backend developers make is not properly separating concerns in their codebase. Specifically, mixing business logic, infrastructure code, data access, and API routes into a single class or module.

Why it’s bad:

Tight coupling: When business logic is tightly coupled with infrastructure code (such as database operations, third-party service integrations, etc.), it becomes difficult to test and maintain. A small change in the infrastructure may break your business logic.
Hard to scale: As your codebase grows, the lack of separation leads to more complexity, making it harder to scale the application and develop new features without breaking existing functionality.

Our tip: Separate these concerns into different layers or components. This follows the Separation of Concerns (SoC) principle and improves readability, scalability, and maintainability.

Examples: Clean Architecture, Hexagonal Architecture, Layered Architecture, Microservices Architecture, CQRS, Event-Driven Architecture, Domain-Driven Architecture

Conclusion

Keep these tips in mind as you continue your development journey, and remember: testing, optimizing, and following best practices will always pay off in the long run!

If I forgot something or you liked the article, please leave a comment down below 💬

Thanks for the reading :)

Support us on Product Hunt:

We are on Product Hunt!

Dev-to Rater — Thu, 13 Feb 2025 08:03:23 +0000

Big news! Dev.to Rater, is officially live on Product Hunt! 🎉

What is Dev.to Rater?

If you're a developer, writer, or tech enthusiast who loves creating and consuming content on Dev.to, our tool is built just for you. Dev.to Rater helps analyze blog posts to uncover trends, engagement metrics, and quality insights so you can optimize your content strategy and gain more visibility for your posts.

Why We Built It

✅ Understand which topics are trending
✅ Detect AI content
✅ Analyze post performance metrics
✅ Get actionable insights to improve content quality

Join the Discussion & Support Us!

We would love your feedback, upvotes, and comments on Product Hunt. Your support means to us and helps us grow this project into something even more valuable for the community.

👉 Check us out on Product Hunt and join the conversation!

Thank you for being part of this journey. Let’s make Dev.to an even better space for tech content together!

I've made Tool That Analyzes your Dev.to Posts

Nikola Perišić — Tue, 11 Feb 2025 21:19:27 +0000

Hello Dev.to writers and readers, I'm presenting Dev.to Rater.

Tool that I built using React.js and Typescript.

Live Website
Code on GitHub
Demo video on YouTube

Why did I create Dev.to Rater?

As a content creator on dev.to, one of the biggest challenges I faced was figuring out whether my articles were engaging.

This inspired me to build Dev.to Rater.

🛠 About the project

Dev.to Rater analyzes your post content, such as headings, paragraphs, images, and links. It calculates the blog post score and tells you how to improve it.

This tool makes your posts more impactful and engaging.

All you have to do is put your dev.to blog post URL in the input field and click "Analyze". That's it!

How Dev.to Rater analyze posts?

For now, we are measuring the following:

heading length
sentence length
total characters
reading time
links frequency
emoji frequency
repeating words

In the future, we plan to add more.

📖 Documentation?

For official documentation click here.

In our documentation you can find the following:

Core logics explained and linked to code in the repository
Version support
FAQ Note: If you want to contribute to it, feel free to do it :)

What about versions?

For version support click here
Currently, the latest version is v2.

Reaction stats? Now available.

🤝 Contributing

If you’re passionate about contributing to the open-source projects, feel free to contribute. We are open for contributors.

Guess what?

This blog post was scanned using our tool 🎯

It is 9.80. It needs your reactions to be 10 out of 10. 💖

📢 Will you use this tool?

Please, tell us in the comments down below! 💬

Feel free to share your blog posts and their rating!

Don’t forget to leave a star for support ⭐

P.S. We plan to support Medium also in the future 😀

Thanks for reading,
Dev.to™

The biggest frontend mistakes you can do

Nikola Perišić — Sat, 01 Feb 2025 11:48:27 +0000

Hello, fellow devs!

Frontend development can be very interesting because we can immediately see the results of our work. However, during this process, we often forget very important concepts and we make mistakes.

In this article, I'll highlight some of these mistakes and show you how to avoid them.

1. Ignoring Meta tags and Open Graph

These tags are essential for controlling how your content appears when shared on social media. Without them, your links may not display as intended, which can hurt your engagement.

Missing viewport meta tag - This tag ensures that your site is responsive and adapts to different screen sizes

Missing description and keywords meta tags - These tags lay a role in SEO and help search engines understand what your page is about

Good example:

<!-- Basic Open Graph tags -->
<meta property="og:title" content="Your Page Title Here" />
<meta property="og:description" content="A brief description of your content." />
<meta property="og:image" content="URL to an image that represents your content" />
<meta property="og:url" content="URL of the page" />
<meta property="og:type" content="website" />

<!-- Optional: Additional Open Graph tags for more control -->
<meta property="og:site_name" content="Your Website Name" />
<meta property="og:locale" content="en_US" />

<!-- Twitter Card tags (for better Twitter integration) -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Your Page Title Here" />
<meta name="twitter:description" content="A brief description of your content." />
<meta name="twitter:image" content="URL to an image for Twitter" />

2. Ignoring performance optimization

Not optimizing images - It's important to compress your images and use formats like WebP or JPEG instead of PNGs for better performance.

Not minifying CSS and JavaScript files - There's nothing worse than seeing a CSS file with over 1,000 lines. Please, minify these. Bonus tip: Use Sass for more efficient styles. For minifying, you can use this free tool.

Loading too many unnecessary libraries - I often see people loading too much libraries when many functionalities can be custom build. Remember, when you import library you are not importing only it's code, you are importing a greater responsibility because every library you import has the possibility that it will go maintenance at some point. You also run the risk of a bug and that your UI will stop working and sure you don't want that.

Not using lazy loading for images and components - Not using mentioned will block UI, and your website can seem slow.

Not using lazy imports - Use lazy imports for better optimizations. This will make separate chunks for your imports and optimize build times by storing chunks in cache. This blog post is a good example of 75% optimization.

Additional tips:

Use image optimization tools like TinyPNG or GitHub Image Bot
Minify assets using build tools like Webpack or Parcel
Implement lazy loading with the loading="lazy" attribute

3. Poor HTML Structure and Semantics

Unfortunately, many frontend developer ignore proper HTML semantics, leading to accessibility and SEO issues. Common mistakes include:

Using <div>s for everything instead of tags like <article>, <section> and <nav>

Missing alt and title attributes on images

Using heading tags (<h1> - <h6>) inconsistently

Additional tips:

Always provide meaningful alt text for images
Structure headings properly to maintain a logical HTML structure
Use W3C Markup Validation Service

4. Using fixed units and bad responsive design

Hardcoding pixel values for height, width and etc.

Not testing on different screen sizes and devices

Additional tips:

Use relative units like en, rem and %
Use responsive design techniques like Flexbox and CSS Grid
Use Mobile simulator extension

5. Relying too much on `!important`

Using important too much can lead to unnecessary conflicts. Use this carefully and not too much.

6. Not handling cross-browser compatibility

Using CSS and JavaScript features that aren’t supported in all browsers

For example:

.element {
  backdrop-filter: blur(10px); /* Not supported in older versions of Edge */
}

Solution:

@supports (backdrop-filter: blur(10px)) {
  .element {
    backdrop-filter: blur(10px);
  }
}

.element {
  background: rgba(0, 0, 0, 0.5); /* Fallback */
}

7. Not using HTML Entities

Instead use these:

&nbsp; -> for blank space
&reg; -> for trademark
&copy; -> for copyright
and etc.

8. Not using current year function

Instead of this:

<p>2024 ©</p>

Use this:

<p><span id="year"></span>copy;</p>

<script>
  document.getElementById('year').textContent = new Date().getFullYear();
</script>

By using JS, you ensure the year will always be the latest one.

Conclusion

Keep these tips in mind as you continue your development journey, and remember: testing, optimizing, and following best practices will always pay off in the long run!

If I forgot something or you liked the article, please leave a comment down below 💬

Check yourself! Checklist ✅

viewport meta tag for responsive design
description and keywords meta tags for SEO
Open Graph meta tags
og:title
og:description
og:image
og:url
og:type
twitter:card
twitter:title
twitter:description
twitter:image
compressed images
WebP and/or JPEG images
lazy loading
lazy imports
alt and title attributes on images
HTML semantics and structure
W3C Markup Validation
using relative units like em, rem and %
avoiding using !import too much
ussing @supports for unsupported features
minified assets
not loaded too much libraries
using function for current year

DEV Community: Dev.to Rater Organization

Modern React website with stunning animations and free code

Tech stack: React.js + TypeScript + Vite

Live preview: https://dev-to-rater.xyz

Repository: https://github.com/perisicnikola37/dev-to-rater

The end: Create React App (2016-2025)

The Sunsetting of Create React App

Why is Create React App Being Deprecated?

What now?

How to Migrate Away from Create React App

Final Thoughts

The biggest backend mistakes you can do

1. Missing security

Security Checklist:

2. Poor Database Design

3. Not Considering Caching

Why it’s important:

4. Hardcoding Values

Why it’s bad:

5. Not Using Version Control Properly

Why it’s bad:

6. Not Separating Business Logic, Infrastructure, and Other Concerns

Why it’s bad:

Conclusion

Support us on Product Hunt:

We are on Product Hunt!

What is Dev.to Rater?

Why We Built It

Join the Discussion & Support Us!

I've made Tool That Analyzes your Dev.to Posts

Why did I create Dev.to Rater?

🛠 About the project

How Dev.to Rater analyze posts?

📖 Documentation?

What about versions?

Reaction stats? Now available.

🤝 Contributing

Guess what?

📢 Will you use this tool?

The biggest frontend mistakes you can do

1. Ignoring Meta tags and Open Graph

2. Ignoring performance optimization

Additional tips:

3. Poor HTML Structure and Semantics

Additional tips:

4. Using fixed units and bad responsive design

Additional tips:

5. Relying too much on !important

6. Not handling cross-browser compatibility

7. Not using HTML Entities

8. Not using current year function

Conclusion

Check yourself! Checklist ✅

Support us on Product Hunt:

5. Relying too much on `!important`