AI-assisted coding is not new, and if you haven’t been doing it then you’re missing out. However, what Anima is doing takes web development to the next level.

In prior versions of Anima, you were able to take a Figma design and turn it into working code in seconds (I literally wrote an article about it), however, with the latest version you’re also able to talk to your code!

That’s right, with the latest version of AnimaApp, their online playground got upgraded into an agentic playground.

You’re not ready for this level of coding efficiency!

Getting the design

Like with my latest experiment, we’re taking the design right off the Figma Community. This time around, we’re building a nice online portfolio.

The generic design looks like this:

Nice-looking design, however, it’s also quite generic and it would also seem to be aimed at designers, but I’m a developer. So let’s take a quick look at how we can transform this beautiful design into an actual working site.

Getting the initial code

First things first, to get this going I’m assuming you’ve already signed up to AnimaApp and configured the plug-in. If you haven’t, you can check out my previous article.

With that out of the way, let’s get the code generation going. First, while you’re on Figma, right click on the design and select “Plugins -> Anima — Figma to Code”.

This will start generating the code using MUI with React by default. You can of course customize the code generation with multiple options like Shadcn, AntD, TypeScript or even going all the way to changing the underlying tech (like Vue or simple HTML).

For the sake of this example, we’ll stick to the default settings, after all we want to customize it further.

Once the code generation ends, you’ll have the option to open it in the playground.

This will open up Anima’s playground, which is an online IDE that runs your code and even gives you a live preview of your site.

You can either start editing the files on your own, or, like we’re about to do, start prompting away.

Customize your code with Anima’s agent

Like with any good LLM, you can give the agent orders and it will use the context of the project to follow them to the letter.

In this scenario, I’m using the agent to customize my own portfolio. There are two main things we need to worry about:

1. Making sure the website is under my name. My name and the fact that I’m a software developer should be front and center, after all, it’s my portfolio site, right?
2. Adding a few projects of my own. The website should show my work, so I need to add a few projects I’ve built, probably also mentioning the technologies I’ve used on them.

Retargeting the website

For the first prompt, I’m going to explain to Anima’s agent that I’m a software developer and I’m going to give it my name.

Notice how I barely gave it my name and a small detail about me (my profession and for how long I’ve been doing it). The result, however, is quite interesting:

The agent was able to pick up extra details from my name, either already having that information or gleaning it from a quick internet search. Either way, the agent crafted a very accurate description, and leaving the layout issues, we’re already in good shape.

Let’s keep going.

Adding my projects

For the sake of simplicity, I’ll just make up a few projects, however feel free to add your own here. Also, here would be a great place to add as much detail as you can (unlike what I did with my prompt):

Through this simple prompt, I’m adding 3 new projects related to my actual experience without me having to write a single line of code. In fact, I didn’t even have to understand the code structure, or consider any new component to be added into the existing code.

Notice the highlighted projects, those are the ones I prompted for (see how it actually added custom names to them), and then it also added a few more to fill in the gaps.

Of course, if I wanted to remove them, I could’ve prompted them away, however I’ll leave that to you as an extra exercise.

You can check out the working final version here.

The conclusion

Anima’s new prompt-based code customization is a game-changer for developers and designers. They managed to remove much of the manual effort typically involved in turning a Figma design into a polished, functional website through the addition of agentics into their playground.

Something that used to require meticulous hand-coding can now be achieved with simple, natural language instructions and in a fraction of the time, making web development faster and more accessible.

This evolution of Anima’s platform is more than just an incremental improvement — it represents a leap ahead in terms of how we interact with code.

For developers, this means more time spent on building unique features rather than wrestling with boilerplate code. For designers, it bridges the gap between static designs and real, interactive products with minimal friction. And for anyone looking to speed up their workflow, Anima’s agentic approach offers an intuitive solution.

If you haven’t tried Anima’s latest features yet, now’s the perfect time!

Next-Level Design-to-code Automation was originally published in ITNEXT on Medium, where people are continuing the conversation by highlighting and responding to this story.

Launching a product or service is challenging, and you only get one shot to make a great first impression. A well-crafted landing page can make all the difference, turning visitors into loyal customers. But creating one from scratch can feel overwhelming — especially if you’re not a designer or a developer.

What if you could skip the struggle entirely? Imagine transforming a professional Figma design into a fully functional landing page in less time than it takes to drink a cup of coffee.

Thanks to Anima and a touch of AI, you can.

In this article, I’ll walk you through how to generate clean, ready-to-use code for a stunning landing page — all in under 10 minutes. No extensive coding. No design headaches. Let’s get started!

Getting the design from the Figma community

To maximize the impact of this experiment, we’re going to get the design from Figma’s community for free. Of course, if you’d like to pay for one of the more elaborate designs, you’re more than welcome. The key here is to find a good-looking landing page design that fits your product’s look and feel.

For the purpose of this article, we’ll be using the “Whitespace” design which you can find here.

If you’re familiar with these designs, you’ll know that there are many different variations inside it, so feel free to browse a bit and pick the one you like.

Once you’re done and before we move on to Anima, make sure you right-click on the version you like and select the “Add auto layout” option.

With that step out of the way, let’s move on to getting the full source code of our new landing page.

Turning a design into code

For this, we’ll be using the Anima App, which uses AI to generate readable and maintainable code. Pay special attention to the last part, “maintainable code”, because generating code through some form of AI-model is trivial at this stage, however, ensuring the generated code is usable and easy to maintain is a whole different beast, that not many even dared to try and tame.

Lucky for you, Anima has cracked the code, and through their Figma plug-in, you’re able to generate working code without human supervision.

So let’s get started!

Step 1: Sign up for Anima

The first thing you gotta do is go to https://www.animaapp.com and click on the “Start for Free” button located on the top right corner of the screen.

Through that button, you’ll be able to set up your brand new account, and you won’t have to pay a dime.

It’s that easy!

Step 2: Create a new project

Once logged in, you’ll be redirected to your main dashboard, where you can see the currently available projects.

This is what I see, but in your case, you’ll probably only see the option to create a new project.

Now look on the left-side menu, click on “Plugins” like it’s shown on the following image:

After that, you should be redirected to the plugin’s landing page, which shows all three options.

Step 3: Install Figma’s Plugin

In this tutorial we’re going to use the first option, so click on “Anima for Figma”. As an added note, you’ll see that you also have the option to use Sketch or XD, however, that’s outside of the scope of this article.

By now, you should’ve landed on the plugin’s landing page with a big green button titled “Open in…”

When clicked, you’ll be presented with a list of your latest Figma files. Decide the one you’re working on, and click on it.

Step 4: Generate the code

It’s magic time!

Let’s open the chosen Figma design, and pick the page you like the most, in my case that is the following one:

If you’ve been following along so far, you’ll see the option to use Anima’s plugin.

You can see in the following image where the option is located.

Once clicked, that option will open a modal window and it will immediately start generating your code!

Anima’s specialized AI will go through the components defined in the Figma file and it will create clean, maintainable, and best practices-filled code that you can take home and expand on, without a problem.

Step 5: Customizing the code generation

Let me be clear, at this stage, you already have what you were looking for: your own coded landing page that follows an attractive design. You can take this code and run with it.

However, Anima’s plugin allows you to customize the results even more, by letting you pick between React-based code, Vue-based code, or plain HTML.

For React-based code, you have the following options:

• MUI, which is the Material UI library.
• AntD a clean and beautiful-looking React framework.
• Shadcn a library of clean and minimalistic React components you can use to build a UI.

Of course, you also have the option of not going with anything on top of React, however, using one of these libraries will usually render shorter, more maintainable code.

Now, in the case of Vue, right now you only have the choice between Vue 2 and 3.

On top of all these options, you have the ability to choose between JavaScript code and TypeScript code. And finally, you also have a choice when it comes to CSS framework.

This is all to say, you don’t have to adapt to Anima’s code, you can adapt the code to your own standards, which is a fantastic feature if we’re talking about having the ability to create code you can easily maintain.

Step 6: Exporting your code

Now that we have our code, we have two options: we can either download it right there and then, or open it on an online playground, where we can play with it, tweak it and test it before we’re ready to download it.

For the sake of speed, we’re going to set up a React-based project (we’ll be using MUI as a library):

And then, let’s click on “Download selection” now (see below image) and get the full website’s code in less than a minute.

And here’s the output we get as a result:

Notice how this is a full-blown project. We’re not just getting isolated code that needs to be injected into a working project, this IS a working project.

Step 7: Running & deploying the project

Now that we have a full project, let’s try to run it. The first and easiest test is to execute npm install from the root of the folder.

This process will install all dependencies and leave you ready to execute it with a simple npm run dev.

That will take care of your local version, simply visit http://localhost:5173 and you’ll see the site working (note that this will only work if you executed the command prior to clicking the link, otherwise the link won’t work for you):

With the site working on dev mode, let’s test the build process with: npm run build

If everything goes according to plan, you should get all good results, meaning we’re ready to deploy our site.

For this article, I’ll be using Netlify to host the website, since it has great compatibility with React-based projects. For this you can follow this detailed guide, however, in a nutshell, this is what you’ll have to do:

1. Push your code into a Github repo.
2. Log in to Netlify.
3. Create a new site and link it to the new repo.
4. Hit the “Deploy” button.

All the default configurations should do the trick, so you don’t really have to do much (reason why I love Netlify so much).

Once the process is done, the website will be publicly available. I’ve done it myself, you can click here to check it out.

Conclusion

Thanks to Figma and AnimaApp, creating a stunning, functional landing page no longer requires extensive coding or design expertise. In less than 10 minutes, you can:

• Source a design from Figma’s community.
• Generate clean, maintainable code with Anima.
• Customize the output to match your standards.
• Deploy it live with Netlify.

This combination of AI tools empowers entrepreneurs, designers, and developers to focus on what truly matters: delivering value to users.

What are you waiting for? Get your next landing page live in 10 minutes or less!

From Zero to Landing Page in Less Than 10 Minutes was originally published in ITNEXT on Medium, where people are continuing the conversation by highlighting and responding to this story.

Artificial Intelligence (AI) is no longer a futuristic concept or a buzzword — it’s here, and it’s changing the way we work, particularly for developers. Despite all the excitement around AI, I still see many developers who hesitate to integrate AI into their daily workflow. Why? Well, the most common reason is they don’t fully understand what it can do for them. They see AI tools like GitHub Copilot and worry that using them will disrupt their code or even replace them in the future.

Let me tell you, that couldn’t be further from the truth. In this article, I’m going to show you the many ways AI can benefit your development process and how you should be taking advantage of it right now.

And if you don’t want to read but rather listen/watch, there is a video version of this article here:

The Misconception: AI is Just a Co-Pilot

Many developers view AI as nothing more than a “co-pilot” — something that might help you write code but doesn’t do much else. This mindset often leads to developers ignoring AI altogether because they think it interferes with their unique coding style. But here’s the reality: AI isn’t here to take over how you code; it’s here to enhance it.

AI tools can assist you in ways that go beyond just auto-suggesting lines of code. They can help you debug faster, test more efficiently, automate repetitive tasks, and even provide insights that would take you hours to discover on your own.

Why You Should Be Using AI?

Still not convinced? Let’s look at why AI should be part of your daily workflow.

Boost Efficiency

AI can help you automate mundane tasks like testing, debugging, and even writing documentation.

In other words, right now I’m referring to LLMs and their ability to generate text at a mind-boggling speed.

Is it the correct text? That’s definitely up for debate, and there are many ways in which you can help make sure it is.

However, LLMs tackle one aspect of our profession that we’ve made core even though is one of the lest impactful parts of it: writing.

We write code every single day, however, that code is just the output of all of our other tasks, like problem solving, coming up with innovative solutions, implementing or even creating new algorithms, and so on.

In other words, our biggest tool is not our keyboard, but rather our brain and our originality.

Writing code is just the inevitable output of using those tools.

At least until now.

Having LLMs write the code for us, under our guidance, is a fantastic way to increase the speed at which we deliver solutions. Not a way to replace us.

We as developer will still be doing all the hard work, AI will only do the boring part: writing.

Writing unit tests.

Writing documentation.

Writing features.

We do the thinking, AI does the writing. It’s a Win-Win!

Catch Bugs Earlier

With AI-powered tools, you can spot errors and inconsistencies in your code early on. You can have an LLM review your code looking for obvious issues like trying to modify the value of a constant, or logic errors, when you try to solve a problem incorrectly.

Mind you, some of the hardest problems to detect would only be picked up by some of the most advanced models, but that’s just now. Think 5 years from now.

The quality of these models will be so high that we’ll probably be using them to review entire codebases in seconds.

Improve Code Quality

Right now, we use linters to make sure teams of many developers generate the same type of code, following the same rules. However, there are many nuances that linters just can’t pick up on.

AI can offer suggestions that you might not have thought of, improving the overall quality and performance of your code and ensuring that entire teams work together following the same quality standards.

In the end, all of these benefits translate to the same single point: we become better developers through AI.

Addressing the Big Question: Will AI Replace Developers?

Now, whenever AI comes up in conversation, the inevitable question is: “Is AI going to replace developers?”

The short answer is no, absolutely not.

AI is not here to replace us, but to augment our abilities and make us more efficient. It takes care of the repetitive, low-impact work so we can focus on the more meaningful aspects of development.

As I’ve already mentioned, writing code, as important as it is, is just a small piece of the puzzle.

Our value lies in designing solutions, solving real problems, and thinking critically — things AI simply can’t do.

Instead of fearing AI, we should see it as a powerful tool that allows us to focus on the tasks that really matter.

The Tools You Should Start Using Today

Now that we’ve stablished why you should be using AI for your day-to-day as a developer, the question is: what tools are out there for me?

There are a ton of AI tools out there, but which ones should you start with? Here are my top recommendations:

• GitHub Copilot: You’ve probably heard of it, but the real question is — are you using it to its full potential? Copilot goes beyond just code suggestions; it helps you think through complex problems and even generates test cases. Many companies are already paying for it for their developers, so ask around if you’re interested but you just don’t want to pay for it.
• Codeium: A solid alternative to Copilot that prioritizes code privacy. It’s a great option if you’re concerned about keeping your proprietary code secure while still benefiting from AI-powered assistance. It features all the functionalities from Copilot plus a few others. And the best part? It’s completely free for individual users, so you can test it right now!
• OpenAI’s models or Claude for Documentation: Writing documentation can be tedious, but it’s crucial. Tools like ChatGPT (or OpenAI’s assistants) or even Claude can help generate documentation based on your code, making the process smoother and faster. In fact, if you feed it your code (careful here about privacy concerns), it’ll be able to explain the code back to you. Give it a more elabore prompt, and you’ll get some fantastic documentation about it, much better than what you would get through tools like Doxygen.
• AI-Driven Test Automation: Tools like Mabl can speed up the testing process by automating various types of tests, helping you push higher-quality code faster.
• Code reivew & security: Because it’s not just about writing the code and push it, code review is a critical part of the SDLC (Software Development Lifecycle). Of course, we always do this with coleagues, after all, who better to audit our code than other humans? Right? Well, yes, but the second best and much faster alternative is AI. Tools like Snyk and Codacy can help us find problems with our code, both in the form of unmet standards, hidden bugs or even security vulnerabilities that we haven’t picked up on.

The AI Hype: Should You Be Worried About Your Job?

Whenever the topic of AI comes up in developer circles, there’s always the inevitable question: “Is this going to replace us?” The short answer is no, it won’t. AI is here to assist and augment your capabilities, not take over your job. If anything, it will make you more efficient and open up more opportunities for you to focus on higher-level tasks rather than getting bogged down in repetitive work.

AI is not replacing developers — it’s freeing them up to be more innovative and productive.

Final Thoughts

AI is no longer an optional add-on for developers. It’s becoming an essential part of the workflow, allowing you to work faster, smarter, and with fewer errors. I

f you’ve been hesitant to dive into AI tools, now is the time. Start small with tools like Copilot or Codeium, and gradually explore more advanced options. Trust me, once you get the hang of it, you’ll wonder how you ever worked without it.

Remember when the MERN stack was the Beyoncé of web development stacks? It was everywhere, and if you weren’t using it, you were probably missing out on some secret sauce.

But here we are in 2024, and it’s time to ask the question that’s been on the minds of developers everywhere: Is the MERN stack still relevant, or has it become the MySpace of web development?

What is the MERN Stack?

The MERN stack is a full-stack development bundle that combines four powerful technologies, all revolving around JavaScript. It allows developers to build robust, dynamic web applications using a single programming language from the front end to the back end, simplifying the development process and improving efficiency.

Let’s break down each component:

• MongoDB: Serving as the database layer, MongoDB is a NoSQL database known for its flexibility and scalability. Unlike traditional SQL databases that use tables and rows, MongoDB stores data in a JSON-like format called BSON (Binary JSON). This makes it particularly adept at handling large amounts of unstructured data and allows developers to store complex data structures without needing to define a schema upfront. This flexibility is one of the reasons MongoDB became the go-to choice for many developers looking for a more adaptable database solution.
• Express.js: This is the web application framework sitting on top of Node.js, providing a set of robust features for building web and mobile applications. Express makes it simpler to write server-side code, offering a lightweight and minimalistic structure that doesn’t impose too many restrictions on how you organize your app. It provides essential functionality like routing, middleware support, and templating engines, allowing developers to create APIs and handle HTTP requests and responses efficiently.
• React: React is the “R” in MERN and arguably the star of the stack when it comes to front-end development. Created and maintained by Facebook, React has revolutionized how we build user interfaces with its component-based architecture. It allows developers to build reusable UI components that manage their own state, resulting in a more organized and efficient way to develop complex, interactive user interfaces. React’s virtual DOM and one-way data flow contribute to its high performance, making it a popular choice for building dynamic, high-performing web apps.
• Node.js: The “N” in MERN stands for Node.js, a runtime environment that allows you to run JavaScript on the server side. Before Node.js, JavaScript was confined to the browser, but with the introduction of Node, developers could now use JavaScript to write server-side code. Node.js is built on the V8 JavaScript engine (the same engine used in Chrome) and is known for its non-blocking, event-driven architecture, making it ideal for building scalable network applications. Its ability to handle multiple connections concurrently without blocking makes it perfect for real-time applications like chat apps and online gaming.

The beauty of the MERN stack lies in its unified language across the stack. This means developers can use JavaScript everywhere, from querying the database with MongoDB to managing the server with Express and Node.js, to building interactive user interfaces with React. This homogeneity reduces the need for context switching between languages, leading to a more streamlined and efficient development process. It’s no wonder the MERN stack has been a favorite among startups and small teams looking to build full-featured web applications quickly and efficiently.

But as the web development landscape evolves, it’s important to question whether sticking to this tried-and-true stack is the best choice moving forward.

The Current State of the MERN Stack

So, how does the MERN stack fare in today’s rapidly changing development landscape?

Pros:

• Unified Language: JavaScript rules both the client and server sides, reducing context switching and making development more streamlined.
• Vast Ecosystem: The community around the MERN stack is massive, providing countless libraries, tools, and resources.
• Active Support: From numerous tutorials to extensive documentation, getting help with MERN-related issues is relatively easy.

Cons:

• Performance Bottlenecks: While great for many applications, the MERN stack can run into performance issues, especially with complex, data-heavy apps.
• Scaling Challenges: As applications grow, scaling can become a headache, often requiring additional tools and infrastructure.
• Rise of New Technologies: With new stacks and frameworks emerging, MERN is no longer the shiny new toy in the playground.

Alternatives and Modern Trends

In the world of web development, alternatives are plenty. Let’s briefly look at some of the contenders:

• MEVN Stack: A slight twist on MERN, replacing React with Vue.js. For those who prefer Vue’s simplicity and ease of integration, this is an attractive option. Learn more about MEVN
• MEAN Stack: Another popular variant, using Angular instead of React. It’s known for its robustness and extensive tooling. Check out MEAN
• JAMstack: A modern approach emphasizing performance and scalability by decoupling the front-end from the back-end. Perfect for static sites and dynamic apps, JAMstack is all about speed and security. Dive into JAMstack

Other trends are also changing how we build web applications, including:

• Next.js: Offering server-side rendering and static site generation for React apps, making it a powerful tool for building fast, SEO-friendly applications.
• Serverless Architectures: Reducing the need to manage servers, allowing developers to focus more on code and less on infrastructure.
• Microservices: Breaking applications into smaller, independent services for better scalability and maintainability.

When to Use the MERN Stack

While the MERN stack may not be the shiny new tech on the block anymore, it still has its place in the developer toolkit. It’s not about whether the MERN stack is the “best” option, but whether it’s the right fit for the specific needs of your project. Here are some scenarios where the MERN stack shines and is worth considering:

Rapid Prototyping and Development:

• Startups and MVPs: If you’re building a Minimum Viable Product (MVP) or a prototype to test an idea quickly, MERN is a solid choice. The stack allows for rapid development due to its simplicity and the fact that developers can use JavaScript across the entire stack. This unified language approach speeds up the development process, making it easier to get your product to market quickly.
• Iterative Development: MERN is great for projects that require frequent updates and iterations. With React’s reusable components and MongoDB’s flexible schema, you can easily modify your application as new requirements arise or user feedback is gathered.

Single Page Applications (SPAs):

• Dynamic and Interactive UIs: If your project involves building a highly interactive Single Page Application (SPA) where user experience and responsiveness are paramount, React within the MERN stack is an excellent choice. React’s virtual DOM and efficient rendering make it well-suited for applications that require real-time updates without refreshing the page.
• Complex Front-End Logic: For apps that need to handle complex front-end logic, React offers a structured way to manage state and components. This makes it easier to develop and maintain intricate user interfaces, like dashboards or data visualization tools.

JavaScript-Centric Projects:

• Unified Language Across the Stack: If your development team is well-versed in JavaScript and prefers to stick to a single language across the entire application, MERN is ideal. This minimizes context switching between different programming languages and can streamline the development process. It’s also beneficial for smaller teams or individual developers who want to manage both the front-end and back-end without learning additional languages.
• Full-Stack JavaScript: Projects that aim to leverage the power of JavaScript on both the client and server sides will benefit from the MERN stack’s capabilities. This can lead to a more consistent and cohesive codebase, easier debugging, and faster development.

Flexible Data Structure Needs:

• Dynamic and Evolving Data Models: If your application deals with data that doesn’t fit neatly into a traditional SQL schema or is subject to change frequently, MongoDB’s document-oriented database is a strong choice. Its flexible schema allows you to store complex data types without the need for predefined structures, making it ideal for projects where the data model is expected to evolve over time.
• High Data Variety: Applications that need to store diverse types of data, such as user profiles, content management systems, or IoT data, can benefit from MongoDB’s ability to handle various data formats and types with ease.

Small to Medium-Sized Projects:

• Scalability at a Modest Scale: MERN is well-suited for small to medium-sized applications where scalability is required but not to an extreme level. It can handle a fair amount of traffic and data if set up correctly, making it suitable for applications like blogs, e-commerce platforms, and social networking sites with a moderate user base.
• Resource-Conscious Development: For teams or organizations with limited resources, the MERN stack offers an efficient way to build a complete web application without the need for a large team or extensive infrastructure. Its open-source nature and large community support also mean you can find plenty of free resources and libraries to enhance your project.

Projects Requiring Reusable Components:

• Modular Development: React’s component-based architecture allows you to build reusable UI components, which can save development time and effort. If your project can benefit from modular design, where elements like buttons, forms, and navigation can be reused across different parts of the application, the MERN stack’s React component system is a major advantage.
• Consistent User Interfaces: For applications that need a consistent look and feel across various sections or features, React makes it easier to maintain uniformity by reusing components and ensuring consistent styling and behavior.

When to Look Elsewhere

However, the MERN stack isn’t a one-size-fits-all solution. There are situations where you might want to consider other options:

• High-Performance Requirements: If your application demands the utmost performance, such as in high-frequency trading platforms or real-time analytics, other stacks or technologies might offer better optimization and speed.
• Heavy Data Processing: For applications that need to handle complex data processing or transactions, a relational database like PostgreSQL or a stack specifically tailored for heavy data manipulation might be more suitable.
• Scalability Concerns: If you’re building an application that expects to scale massively, such as a large-scale social media platform or a cloud-based service with millions of users, you might encounter challenges with MERN’s scalability. In such cases, microservices architecture or a more robust backend solution might be preferable.

In other words, the MERN stack is still a valid choice for many scenarios, especially when you need to move quickly and efficiently with a JavaScript-centric approach. But like any tool, it’s essential to evaluate it against your project’s unique needs and constraints before diving in.

Is the MERN Stack Here to Stay?

That’s the question, isn’t it?

The MERN stack has shown a remarkable ability to adapt and remain relevant. With a huge community and a wealth of resources, it’s still a great way for new developers to learn full-stack development using JavaScript.

Plus, it’s not like MongoDB, Express, React, or Node.js are going away anytime soon; they’re all still evolving and improving.

So give it a try! (maybe?)

Conclusion

So, is the MERN stack still valid? Absolutely, but with caveats. While it’s no longer the only player in town, it remains a solid choice for certain projects and use cases. It’s particularly great for developers looking to leverage their JavaScript knowledge across the full stack.

But as with any technology decision, it’s crucial to assess the specific needs of your project. If you’re curious to see how other stacks compare or want to join in on the debate, check out Code-clash.net for more insights on stack wars and modern development trends.

Whether you’re team MERN, JAMstack, or something else entirely, the key is finding the right tool for the job.

Is the MERN Stack Still Valid? was originally published in ITNEXT on Medium, where people are continuing the conversation by highlighting and responding to this story.

Whether you’re just starting out on your programming journey or you’ve recently graduated and are ready to take your skills to the next level, you’ve probably realized something: the tech world is HUGE. There are dozens of programming languages out there, each with its own strengths, quirks, and learning curves. It’s exciting, but let’s be honest — it can also be pretty overwhelming.

How do you know which language to learn first?

Which one will best align with your career goals?

And what if you pick the wrong one?

That’s where CodeClash comes in. Think of it as your go-to resource in this vast and sometimes confusing landscape of programming languages. They’re here to help you cut through the noise, so you can focus on what really matters — building awesome projects, learning new skills, and landing that dream job!

The Problem — Too Many Choices, Not Enough Guidance

Let’s face it: The sheer number of programming languages available today can make your head spin. Should you start with Python because it’s known to be beginner-friendly? Or maybe dive into Java since it’s used by tons of large companies? What about JavaScript, the backbone of web development? And then there’s C++, Swift, Ruby, Rust, Go… the list seems endless!

For students and new graduates, especially, this abundance of choices can feel more paralyzing than empowering. You want to make sure you’re investing your time in learning something that will pay off in the long run, but without clear guidance, it’s easy to get stuck in analysis paralysis — spending more time researching than actually coding.

How CodeClash Simplifies Decision-Making

This is exactly where CodeClash shines — by making it easier for you to make informed choices without having to spend hours or even days sifting through endless articles and forums.

CodeClash provides detailed, side-by-side comparisons of popular programming languages and technologies. But they don’t just bombard you with technical jargon and expect you to figure it out. Their comparisons are specifically designed with students and new graduates in mind. They break down the pros, cons, and best use cases for each language in a way that’s easy to understand — even if you’re just starting out.

For example, if you’re torn between learning Rust and Go, you can quickly see how they stack up against each other in terms of performance, ease of learning, and real-world applications. This means you can spend less time worrying about whether you’re choosing the “right” language and more time actually learning and building.

Key Features of CodeClash

So, what makes CodeClash the ultimate resource for budding developers? Let’s break it down:

• In-Depth Comparisons: They don’t just skim the surface. Their comparisons dig deep, covering everything from performance and syntax to community support and real-world applications. Whether you’re deciding between Python and JavaScript or trying to figure out if Rust is worth your time, they got you covered.
• Beginner-Friendly Content: Not everyone starts out as a seasoned developer, and that’s okay. They avoid confusing technical terms and instead use straightforward language that anyone can grasp. Whether you’re still in your first coding class or recently graduated, their content is designed to be accessible.
• Real-World Applications: It’s one thing to read about a language’s features, but it’s another to see how those features play out in real life. Some of their comparisons provide examples of where and how different languages are used in the industry, helping you understand which ones align with your interests and career goals.
• Roadmaps and Learning Paths: Not sure where to start? No problem! As part of their analysis, they’ll link you to learning paths and roadmaps that guide you from beginner to pro, helping you focus on the skills and languages that will make the biggest impact on your future career.

The Benefits for Students and New Graduates

Now, let’s talk about what all this means for you, the student or new graduate looking to make your mark in the tech world.

• Building Confidence: When you understand why you’re learning a particular language, you feel more confident in your choices. CodeClash helps you make informed decisions, so you can dive into your coding journey with a clear direction and purpose, knowing you’re on the right path.
• Preparing for the Job Market: Understanding the strengths and weaknesses of different languages is crucial when you’re job hunting. With CodeClash, you’ll know exactly what employers are looking for and how to position yourself as the ideal candidate. Whether it’s knowing that JavaScript is key for front-end roles or understanding that Python is essential for data science, you’re better prepared to match your skills with job market demands.
• Enhancing Learning Efficiency: Time is precious, especially when you’re balancing studies, projects, and maybe even job applications. CodeClash helps you cut through the noise, allowing you to focus on learning the languages and technologies that will give you the biggest return on your investment. No more wasting time on languages that won’t serve your goals — just clear, actionable advice to get you where you want to be.

Conclusion

Choosing the right programming language can be daunting, especially when you’re just starting out. But with the right guidance, it doesn’t have to be. CodeClash is here to help you navigate the world of programming languages with confidence, so you can focus on what you love — learning, building, and coding your way to success.

So why wait? Start exploring the world of programming languages with CodeClash today, and take the first step toward mastering the skills that will shape your future!

Don’t Know How To Pick Your Next Technology? Check Out CodeClash was originally published in ITNEXT on Medium, where people are continuing the conversation by highlighting and responding to this story.

Keyboards are an essential part of any developer’s toolkit, and when you find one that feels like it was made just for you, it’s a game-changer.

In this review, we’ll delve into the X-Bows Crystal Programmable Mechanical Keyboard, which might just be the next must-have for coding enthusiasts.

FYI, this article is also in video format, so feel free to watch it here:

First Impressions: Unboxing the X-Bows Crystal

The unboxing experience of the X-Bows Crystal keyboard sets the tone for the quality of the product. The keyboard arrives in a hefty package with a magnetic lid, which adds a touch of elegance right from the start.

Inside, you find the keyboard nestled in foam, displaying its sleek design and transparent background. The X-Bows Crystal is a 70 percent keyboard, meaning it foregoes some keys for a more compact size, and it’s also wireless, which adds to its modern appeal.

Specifically, as a 70% keyboard, the Crystal doesn’t have any function keys nor a numpad section, however, as we’ll see in a second, that’s not an issue for this keyboard.

Included in the box are a USB-A to USB-C cable and a key switch puller, a hint at the keyboard’s hot-swappable feature. This allows users to customize their typing experience further by easily changing out the switches.

Customizability for the Developer

As a developer, having a keyboard that can be tailored to your specific needs is crucial. The X-Bows Crystal shines in this department. It comes with silent red, normal red, or brown switches, and the choice between Mac or Windows layouts.

The keyboard boasts RGB lighting, enhancing its aesthetic appeal with 16.8 million colors, especially elegant due to the transparent body. While not necessarily a productivity booster, it’s a nice touch that many will appreciate.

But the real draw is the keyboard’s programmability. It’s fully customizable through QMK, a powerful firmware that allows for extensive key remapping, macro creation, and layer configurations. And in this particular case, the entire configuration is done through a Web UI, which simplifies the process even further!

Simply go to KeyboardLab.club, select the “Crystal” keyboard, and start configuring your ideal layout. Once you’re done, click on “Download Config File” and drop the new configuration into your USB-connected keyboard (more details on the video at the top of this article!).

These features enable users to access more functionality without additional physical keys, a boon for any developer looking to streamline their workflow.

Ergonomic Design

While the X-Bows Crystal isn’t a fully ergonomic keyboard, it does offer several ergonomic benefits.

The key columns are aligned to reduce finger travel (it’s a columnar layout), and the keys are angled to match the natural positioning of your hands allowing you to use your hands in a relaxed position, which can help prevent repetitive strain injuries (RSIs).

See the following “hyper-detailed” visual explanation of what a natural typing position looks like vs the standard one you’re forced to adopt with regular keyboards.

However, it lacks the ability to tent or tilt like some other ergonomic keyboards, so while it’s a step in the right direction, it might not be THE ultimate solution for those already suffering from RSIs.

Build Quality and Sound

The X-Bows Crystal mechanical keyboard impresses not only with its transparent design aesthetics but also with its robust build quality.

The heft of the keyboard is immediately noticeable, suggesting that the materials used are of high caliber. This is not a keyboard that feels like it will slide around your desk or show wear and tear after a few months of heavy use. Its substantial weight “feels right”, conveying a sense of durability that you’d want from a device that is an integral part of your daily routine.

When it comes to the sound of the keyboard, the X-Bows Crystal offers a satisfying tactile feedback that auditory and touch typists will appreciate.

The choice between silent red, normal red, or brown switches allows for personalization not only in feel but also in sound. The brown switches, often favored for their tactile bump and audible click (which I love!), provide a typing experience that is both engaging and efficient.

The keyboard’s hot-swappable nature takes this customization further, allowing users to replace switches without soldering, which is a welcome feature for enthusiasts who may prefer a different switch feel or sound over time.

The keycaps themselves contribute to the overall acoustics of the keyboard, with a sound profile that strikes a balance between “clacky” and “thocky” (those are the actual technical terms BTW!)— providing a deep, satisfying sound on each keystroke without being too loud or distracting.

For developers and typists who take pleasure in the auditory feedback of their keystrokes, the X-Bows Crystal does not disappoint.

Pricing and Value: Worth the Investment?

At approximately $260, the X-Bows Crystal is positioned as a premium keyboard within the mechanical keyboard market.

While the price tag might seem steep for those accustomed to more conventional keyboards, it’s important to consider the value that the Crystal provides.

For professionals who spend countless hours coding, writing, or gaming, the return on investment can be measured in terms of comfort, efficiency, and satisfaction.

The keyboard’s fully programmable nature means that it can adapt to the user’s workflow, potentially streamlining tasks and reducing the likelihood of repetitive strain from unnecessary key travel or awkward hand positions.

Moreover, the build quality suggests that the X-Bows Crystal is built to last, potentially outliving cheaper alternatives that might need to be replaced more frequently. This longevity, combined with the ability to modify and replace switches, means the keyboard can evolve with your preferences and requirements over time.

In comparison to other high-end mechanical keyboards, particularly those targeted at the ergonomic and customizability-conscious market, the Crystal holds its own.

Competitors such as the Moonlander or Dygma Raise may offer additional ergonomic features like split design and thumb clusters but come at a higher cost. The X-Bows Crystal provides a middle ground, offering a significant number of high-demand features while remaining more accessible price-wise.

Ultimately, whether the Crystal’s price tag is justified will depend on the individual user’s needs and priorities. For those who view their keyboard as an essential tool in their productivity arsenal and are willing to invest in quality, the X-Bows Crystal offers a compelling blend of features that could well justify its cost.

A little gift for you!

If you’ve made it this far, I have a little present for you!

The good folks from X-Bows have agreed to create a special discount code for everyone who reads this article.

During checkout, use the code FER20 to get a whopping 20% off of any of the Crystal keyboards!

Conclusion

The X-Bows Crystal Programmable Mechanical Keyboard is a solid choice for developers who prioritize customization, comfort, and build quality. Its programmable features and ergonomic design make it a contender for those looking to optimize their setup without breaking the bank. While it may not be the ultimate ergonomic keyboard, it offers a significant step towards a more comfortable typing experience.

For those on the fence, the X-Bows Crystal might just be worth giving a try. Its blend of style, comfort, and customizability could very well make it a beloved part of your coding life.

The biggest benefit of micro frontends, if you don’t know about them, is that you can use them as building blocks for different projects, keeping a consistent look and user experience across all your applications.

In theory, that sounds great, but then again, building such a “technological wonder” is not trivial. If you’re building multiple projects with them and trying to get the most out of your micro frontends, then you’ll start running into a very common problem: repeated code.

Granted, more like a problem is, this is the perfect opportunity for you to abstract and share code across multiple individual micro frontends. But how can you do it?

In this article, I’m going to show you how you can use Bit to achieve exactly this!

Bit. Composable software.

The example project

For this example, we’ll be using Bit. And if you don’t know what that is, Bit offers tools for component-driven development, source code control, versioning, dependency management, packaging, distribution, sharing, collaboration, discoverability, search, consumption, installation, and integration. The concept of “component” within Bit encapsulates code, tests, and documentation, making it suitable for shared code among micro frontends

To illustrate how everything works, I’m going to use the following project where I have 2 working micro frontends (bit applications) that have code that could be shared instead of repeated in their individual code bases.

So for this example I’ll be using 2 micro frontends I’ve created using Bit, they’re actually Bit component applications, which means they can be deployed and executed individually. I’ll show you their code and how they share a single component that could be re-used, if refactored properly.

In the end, using Bit, I will show you how to refactor that component, extract it into an individual Bit component, and modify the other two micro frontends to use the common code instead of repeating logic.

Reviewing the micro frontends

So let’s start by reviewing our micro frontends and understanding where the repeated code/logic is. We have two micro frontends:

• my-docs: This little micro frontend acts as a small documentation site. It lets you navigate between different sections of the documentation.
• my-blog: This micro frontend acts as a quick and dirty blog, which has 3 different articles inside and also lets you navigate between the different pages using a menu.

The documentation site

This application shows a navigation bar at the top, and then renders an internal page. Here’s the code for it:

import React from 'react';
import {  Routes, Route}  from 'react-router-dom';
import Home from './Home';
import GettingStarted from './GettingStarted';
import APIReference from './ApiReference';
import './docs.module.css'

export function Documentation() {
  
  let prefix = ""
  
  const defaultRoutes = [
    {
      path: prefix + "/getting-started",
      element: <GettingStarted />
    }, 
    {
      path: prefix + "/api-reference",
      element: <APIReference />
    },
    {
      path: prefix + "/",
      element: <Home />
    }
  ]  
    return (
        <Routes>{
            defaultRoutes.map( (r, index) => {
                return (<Route key={index} path={r.path} element={r.element} />);
            })
        }
        </Routes>
      );
    }

As you can see, the code is using react-router-dom to navigate between pages. And the code for the nav bar at the top, is the following:

import React from 'react';
import {  Link, useLocation } from 'react-router-dom';

export function Nav() {
  let location = useLocation()
  let pathParts = location.pathname.split("/")
  let usePrefix = pathParts[1].indexOf("docs") != -1
  let prefix = ""
   
  if(usePrefix) {
    let pathParts = location.pathname.split("/")
    prefix = "/" + pathParts[1]
  }
  return (
     <div>
        <nav>
          <ul>
            <li>
              <Link to={ prefix + "/"}>Home</Link>
            </li>
            <li>
              <Link to={ prefix + "/getting-started"}>Getting Started</Link>
            </li>
            <li>
              <Link to= {prefix +  "/api-reference"}>API Reference</Link>
            </li>
          </ul>
        </nav>
      </div>
  )
}

Granted, the links are hard-coded, but you get the point.

Let’s now take a look at the next micro frontend.

The blog

In the case of this micro frontend, we have yet another top navigation (one that has no styles), and then we can see the content of each post underneath the menu.

Pretty basic stuff, but if you notice, the navigation logic is the same as before. Let’s take a look at the code now.

import React from 'react';
import {Routes, Route} from 'react-router-dom'
import Post1 from './posts/post1'
import Post2 from './posts/post2'
import Post3 from './posts/post3'

const posts = [
  { url: '/posts/1', component: <Post1 />},
  { url: '/posts/2', component: <Post2 />},
  { url: '/posts/3', component: <Post3 />},
];

export function BlogComponent() {
  return (
    <Routes>
      {posts.map( (post, index) => (
        <Route key={index} path={post.url} element={post.component} />
      ))}
    </Routes>
  );
}

As you can appreciate, the code for this one is very similar to the other. It’s essentially listing a set of routes and associating different components to these routes. Each of these internal components (the posts), uses the Nav component, which looks like this:

import React from 'react';
import {  Link, useLocation } from 'react-router-dom';

export function Nav() {
  let location = useLocation()
  let pathParts = location.pathname.split("/")
  let usePrefix = pathParts[1].indexOf("docs") != -1
  let prefix = ""

  if(usePrefix) {
    let pathParts = location.pathname.split("/")
    prefix = "/" + pathParts[1]
  }

  return (
     <div>
        <nav>
          <ul>
            <li>
              <Link to={ prefix + "/posts/1"}>Post1</Link>
            </li>
            <li>
              <Link to={ prefix + "/posts/2"}>Post2</Link>
            </li>
            <li>
              <Link to= {prefix +  "/posts/3"}>Post3</Link>
            </li>
          </ul>
        </nav>

      </div>
  )
}

In case you haven’t noticed, this is the exact same code as with the other navigation menu, but it has 3 different links.

So now we understand the problem: the Nav component can be shared between both micro frontends.

Let’s see how we can do that.

The solution

Here’s what we need to do:

1. We need to access the code of both micro frontends.
2. Create a Bit component containing the code of the Nav component, refactored so that it can be used in different places.
3. Export the component so that it can be re-used everywhere.
4. Install the component in both micro frontends and publish their new version.

Easy right? Let’s get started!

Accessing the code of both micro frontends

Given how both micro frontends are Bit components, you can install them through NPM in any application. However, in that situation, they would be downloaded into your node_modules folder, and you wouldn't have access to their code.

So, instead, we’re going to use Bit to import the components into an empty project. The bit import command will do two things for us:

1. It’ll download the code of our micro frontends into a folder at the root of the project.
2. It’ll create symlinks inside the node_modules folder so that if you try to use any of them inside another project as a normal dependency, you'll still be able to import it as any other regular dependency.

Now, use the following commands to get you going:

mkdir new-project && cd new-project
bit init
bit import deletemangroup.microfe/apps/my-docs
bit import deletemangroup.microfe/apps/my-blog

After running these commands, you’ll have the following folder structure:

We can now start editing one of the versions of theNav component from one of the micro frontends. Let's pick the version with styles from themy-docs micro frontend.

But first, we’re going to create a new component, which is where we’re going to put our code:

bit create react navigation/topbar

At this stage, we have two micro frontends and an empty component. If we run bit start at the root of our folder, we'll get the dev server, which will let us test everything we have:

Let’s now perform the code updates on the component we want.

Let’s edit the topbar.tsx file inside our new component and add the following code:

import React, { ReactElement } from 'react';
import {  Link, useLocation } from 'react-router-dom';

export type TopbarProps = [
  {
    url: string,
    text: string
  }
]

export function Topbar({routes}: { routes: TopbarProps}) {
  let location = useLocation()

  let pathParts = location.pathname.split("/")
  let usePrefix = pathParts[1].indexOf("docs") != -1
  let prefix = ""

  if(usePrefix) {
    let pathParts = location.pathname.split("/")
    prefix = "/" + pathParts[1]
  }

  return (
     <div>
        <nav>
          <ul>
            { routes.map( r => (
              <li>
                <Link to={r.url}>{r.text}</Link>
              </li>
            ))}
          </ul>
        </nav>
      </div>
  )
}

This code is now accepting the list of routes as a mandatory prop, and it’s also exporting the type definition for the format of the routes array, so we make sure we know exactly how to create it.

With this change, we can now go to our my-docs component (inside the same project) and edit the internal pages of the documentation.

For example, the “Home” section looked like this before:

import React from 'react';
import { Nav } from './nav'

function Home() {
  return (
    <div>
      <Nav />
      <h2>Home</h2>
      <p>Welcome to the documentation site!</p>
    </div>
  );
}

export default Home;

And now, it should look like this:

import React from 'react';
import { MenuItems } from './MenuItems';
import { Topbar, TopbarProps } from '@deletemangroup/microfe.navigation.topbar';

function Home() {
  return (
    <div>
      <Topbar routes={MenuItems as TopbarProps} />
      <h2>Home</h2>
      <p>Welcome to the documentation site!</p>
    </div>
  );
}
export default Home;

Notice how I’m importing the new Topbar component as a regular module, instead of referencing the relative path of my file. This is thanks to the fact that I've created the component with Bit first. Bit created the symlink inside my node_modules folder so I could do this without having to first upload and publish the component somewhere.

I’ve also defined the list of routes (as you can see), inside another local file. It simply exports an array of objects like this:

export const MenuItems = [
    {url: "/", text: "Home"},
    {url: "/getting-started", text: "Getting Started"},
    {url: "/api-reference", text: "API Reference"}
]

We can now proceed to do this on the other project, the my-blog project. We'll edit the posts for this one, when before they looked like this:

import { Nav } from "../nav"

export default function () {

    return (
        <div>
            <Nav />
            <h1>Post #1</h1>
            <p>
                This is the text of the first blog post
            </p>
        </div>
    )
}

Now, they’ll look like this:

import { MenuItems } from "../BlogRoutes"
import { Topbar, TopbarProps } from "@deletemangroup/microfe.navigation.topbar"

export default function () {

    return (
        <div>
            <Topbar routes={MenuItems as TopbarProps} />
            <h1>Post #1</h1>
            <p>
                This is the text of the first blog post
            </p>
        </div>
    )
}

As before, I’ve defined the list of routes for my blog inside a new file called BlogRoutes and now I’m importing the Topbar component instead of the local Nav one.

Wanna see the results? Simply go back to the browser, using the dev server, and visit each micro frontend, the automatic documentation will render each component for you:

We’re now clearly importing the same component, with the added benefit that now both micro frontends have the same styles on the nav menu (which wasn’t the case before).

The last thing to do, is to publish the new component, and to update the micro frontends by publishing the new, updated code into Bit.cloud.

We can easily do that with the following commands:

bit install add-missing-deps #to make sure all dependencies are already installed
bit tag #to version all components
bit export #to publish the new versions

Once you’ve tagged all components correctly, you should get something like this:

You can see how the new versions have been auto-assigned to both the micro frontends and the new component.

Now simply export them with bit export and you're done!

Compiling everything together

One last detail that I haven’t mentioned yet: thanks to Bit’s understanding of the relationship between these components (our new component and the two micro frontends), whenever we change our common code, it will automatically re-build all dependent packages (in our case, both micro frontends).

This is called RippleCI, and you can see it if you go to your scope and click on the RippleCI option. This is what I see when I push a new version of the Topbar component:

You’ll notice how the Topbar component is being built, but the other two are queued up waiting for it to finish, so they can also be built (and tested).

If everything goes according to plan, you should see something like this (all green):

This way, whenever you make a change to one of your components, all other components that use it, will be re-tested to make sure the updates are valid.

Cool right?!

Conclusion

Alright, we’re done.

During this article, we saw how you can use Bit to extract common code from micro frontends, turn that code into a component, and then reuse it everywhere. All with a single tool: Bit.

Why did we do this?

Because by doing so, we’ve:

• Simplified to code of our micro frontends by removing code that didn’t have to live inside them.
• Removed duplicated logic.
• Homogenized the look and feel of our components by using the same one everywhere.

We did all of this without creating new repositories or assigning ownership of this new component to any external team. As you can see, through Bit, you can easily collaborate with others without too much hustle.

Let me know what you thought about it and if you have any questions, you can always check out the code of the components here.

To learn more about Bit, see the official documentation:

Bit. Composable software.

How to Share Code Between Micro Frontends was originally published in Bits and Pieces on Medium, where people are continuing the conversation by highlighting and responding to this story.