Forem: Razvan Zamfir

<div class="container">
  <div class="calculator">
    <div class="display">
      <div class="track">
        12 &times; 4 =
      </div>

      <div class="result">
        48
      </div>
    </div>

    <div class="buttons-container">
      <ol>
        <li class="orange">C</li>
        <li class="orange">&radic;</li>
        <li class="orange">&percnt;</li>
        <li class="orange">+/-</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
        <li class="orange">&divide;</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li class="orange">&times;</li>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li class="orange">-</li>
        <li>0</li>
        <li>&middot;</li>
        <li class="orange">+</li>
        <li class="orange">=</li>
      </ol>
    </div>
  </div>
</div>

We split the UI into 3 main parts:

.calculator → the main calculator body
.display → shows calculation and result
.buttons-container → holds all buttons in a grid

I chose to use an ordered list for the calculator buttons part.

Base Styling

body {
  margin: 0;
  padding: 0;
  background-color: #80d0c7;
  font-family: Montserrat, sans-serif;
}

body * {
  box-sizing: border-box;
}

Centering the Calculator

.container {
  min-height: 100vh;
  width: 100%;
  padding: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
}

This is classic Flexbox centering:

display: flex enables flex layout
align-items: center centers vertically
justify-content: center centers horizontally
min-height: 100vh makes it fill the full screen height

This way, the calculator always stays centered.

Styling the Calculator's Body

.calculator {
  width: 100%;
  max-width: 360px;
  min-width: 300px;
  margin: 10px auto;
  padding: 36px;
  background: #515151;
  border-radius: 18px;
  box-shadow:
    0 10px 30px rgba(0, 0, 0, 0.25),
    inset -4px -4px 10px rgba(0, 0, 0, 0.25);
}

The last line gives the calculator the appearance of depth.

Display Area

.display {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 12px 20px;
  margin-bottom: 34px;
  background: #c0d3c0;
  border-radius: 16px;
  border: 1px solid rgba(0,0,0,0.6);
  box-shadow: inset 0 0 4px 2px rgba(0,0,0,0.25);
  overflow: hidden;
}

Explanation

background mimics LCD screen
inset shadow gives screen depth

Display Text Alignment

.track,
.result {
  display: flex;
  justify-content: flex-end;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

Explanation

This ensures calculator-style alignment:

justify-content: flex-end → numbers align right
white-space: nowrap → prevents line breaks
text-overflow: ellipsis → adds “…” if too long

Calculation History

.track {
  position: absolute;
  top: 8px;
  left: 20px;
  right: 20px;
  font-size: 12px;
  font-weight: 600;
  opacity: 0.6;
}

Explanation

position: absolute floats it inside display
opacity: 0.6 makes it less important than the result

Result Styling

.result {
  margin-top: 16px;
  font-size: clamp(2rem, 8vw, 3rem);
  font-weight: 700;
}

Explanation

clamp() makes font responsive:
font-weight: 700 makes the result visually dominant

Button Grid Layout (CSS Grid)

.buttons-container ol {
  list-style-type: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

How it works:

display: grid enables grid system
repeat(4, 1fr) creates 4 equal columns
gap controls spacing between buttons

Button Styling

.buttons-container li {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
  font-size: 36px;
  font-weight: 600;
  background: #e7e7e7;
  color: #242424;
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,0.7);
  box-shadow: inset -3px -3px 3px rgba(0,0,0,0.15);
  cursor: pointer;
  user-select: none;
  transition: transform 0.08s ease, filter 0.15s ease;
}

How it works:

We make sure the buttons are always square with aspect-ratio: 1. We use box-shadow: inset -3px -3px 3px rgba(0,0,0,0.15) for the illusion of depth.

Click Effect

We simulate real button press with:

.buttons-container li:active {
  transform: translateY(2px);
}

Operator Buttons (Orange)

We use a nice orange color for the operation buttons:

.buttons-container .orange {
  background: #d88d43;
  color: #fff;
  border: 1px solid rgba(0,0,0,0.5);
}

Here is a Codepen with the final result I got! 😊

Brave CMS – A CMS Built for Simplicity, Flexibility, and Scalability

Razvan Zamfir — Sat, 23 May 2026 21:38:32 +0000

In a world filled with bloated content management systems and overly complex admin platforms, developers often search for a solution that balances simplicity, performance, customization, and maintainability. That is where Brave CMS comes in.

Brave CMS is an open-source modern content management system built with Laravel, MySQL, and Bootstrap 5, designed for developers and businesses that want a clean, extensible foundation for building websites, blogs, and online newspapers.

Rather than trying to be everything for everyone, Brave CMS focuses on excelling at the fundamentals: content management, role-based access control, security, customization, scalability, and developer experience.

Built with Laravel, MySQL, and Bootstrap 5

One of the biggest strengths of Brave CMS is the technology stack behind it.

The project is built with Laravel, MySQL, and Bootstrap 5.

Laravel serves as the backbone of the platform, bringing with it a clean MVC architecture, elegant syntax, powerful routing, authentication systems, middleware support, and an excellent developer experience overall.

Instead of dealing with messy legacy code or outdated patterns, developers work inside a structure that feels organized and maintainable from the start.

Because Brave CMS is powered by Laravel, adding new features is easy.

For the database layer, the project uses MySQL, which remains one of the most trusted relational database systems in the industry. It is fast, stable, widely supported, and perfectly suited for content-driven applications.

On the frontend side, Bootstrap 5 provides the UI foundation. The admin panel is clean, responsive, and modern without becoming visually overwhelming. Bootstrap also makes customization easier, especially for developers who want to rapidly adapt layouts or redesign parts of the interface.

The result is a CMS that feels lightweight and modern while still giving developers the structure needed for long-term projects.

Enhanced Security Features

Security is one of the areas where Brave CMS tries to take a more modern and responsible approach.

A lot of older CMS platforms became difficult to maintain over time because they relied heavily on outdated plugins, inconsistent code quality, or insecure third-party extensions. Brave CMS avoids much of that complexity by building on Laravel’s mature ecosystem and security-focused architecture.

Laravel already provides strong protection against many common vulnerabilities, including CSRF attacks, SQL injection attempts, and insecure password storage. Brave CMS benefits directly from those protections while keeping the codebase structured and predictable.

Authentication and route protection are handled through Laravel’s middleware system, which makes access control cleaner and easier to manage. Validation and sanitization are also built into the workflow, helping reduce the chances of malformed or malicious input becoming a problem.

But security is not only about technical protection.

A secure application is also one that developers can actually understand and maintain. Overly complicated systems often become insecure simply because nobody wants to touch them anymore.

Brave CMS keeps things organized and transparent, which makes long-term maintenance significantly easier.

Easy to Customize

Customization is one of the most important qualities of a modern CMS.

Many platforms promise flexibility but eventually trap developers inside rigid architectures or endless plugin dependencies. Brave CMS takes a different approach by giving developers a clean foundation that can evolve naturally depending on project requirements.

Since the platform is built on Laravel, developers can easily extend almost every part of the system. Whether it is creating new routes, building custom admin functionality, integrating external APIs, adding new content structures, or modifying frontend templates, the architecture stays approachable and easy to work with.

This flexibility makes Brave CMS suitable for far more than simple blogs.

It can serve as the base for company websites, content platforms, admin dashboards, publishing systems, or fully customized web applications.

The Bootstrap 5 frontend also helps significantly when it comes to UI customization. Developers can quickly adapt layouts, components, spacing, colors, and responsiveness without needing to redesign everything from scratch.

Instead of locking developers into a rigid ecosystem, Brave CMS gives them room to build.

Designed to Scale

A good CMS should not only work for small projects.

It should also be capable of growing alongside the application.

Brave CMS was designed with scalability in mind, largely because it inherits many of Laravel’s strengths. The framework already supports caching systems, queues, modular application structures, API development, and performance optimization tools.

That means developers can start with a relatively small project and gradually expand functionality without needing to rebuild the platform later.

As traffic and complexity increase, Brave CMS can integrate with tools like Redis caching, queue workers, CDN services, and cloud-based hosting environments. The clean separation between backend logic, frontend rendering, and database structure also makes maintenance easier as projects grow.

Scalability is not only about handling more users.

It is also about keeping the codebase manageable over time.

One of the biggest frustrations developers face with older CMS platforms is technical debt caused by years of patchwork plugins and inconsistent architecture. Brave CMS avoids much of that by embracing modern Laravel development principles from the beginning.

Theme Support

Another important feature of Brave CMS is theme support.

If you are a UI designer/developer looking for a way to turn your HTML templates into database-powered websites, Brave CMS is perfect for you.

Instead of rebuilding the frontend structure every time, developers can create reusable themes and adapt them for different purposes.

The active theme can be easily set from the admin panel's Settings section. That means that making a new theme and using it has zero downtime.

Comprehensive Documentation and Guides

Even the best software becomes frustrating if the documentation is poor.

One of the practical strengths of Brave CMS is that it includes a comprehensive guide designed to help developers understand installation, configuration, customization, and theme development.

Instead of spending hours digging through outdated forum posts or incomplete tutorials, developers can follow a more structured workflow and understand how the platform is intended to work.

This is particularly valuable for developers who are newer to Laravel or transitioning from older CMS ecosystems.

Clear documentation lowers friction, reduces setup time, and makes customization far less intimidating.

For long-term projects, that matters just as much as the code itself.

Final Thoughts

Brave CMS represents a modern approach to content management.

Instead of overwhelming developers with unnecessary complexity, it focuses on clean architecture, strong foundations, customization, scalability, and practical usability.

Built with Laravel, MySQL, and Bootstrap 5, the platform combines modern backend engineering with responsive frontend design.

Its enhanced security structure helps developers build safer applications, while its flexible architecture allows projects to evolve naturally over time.

For developers looking for a Laravel-powered CMS that is clean, scalable, customizable, and grounded in modern development practices, Brave CMS is a compelling option worth exploring.

A clean Bootstrap 5 form with floating labels, for a superior user experience.

Razvan Zamfir — Fri, 22 May 2026 20:59:24 +0000

Razvan Zamfir

May 22

Design a Clean Form with Floating Labels in Bootstrap 5

#frontend #html #tutorial #ui

Comments

2 min read

Design a Clean Form with Floating Labels in Bootstrap 5

Razvan Zamfir — Fri, 22 May 2026 20:57:52 +0000

Bootstrap 5 comes with built-in floating labels, but the default inputs can feel a bit too tall for compact forms.

Here’s a cleaner version with a more balanced height and a simple card layout.

The HTML structure:

<link
  href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
  rel="stylesheet"
/>

<div class="container py-4">
  <div class="row justify-content-center">
    <div class="col-md-6">
      <div class="card bg-white shadow-sm">
        <div class="card-header h6 py-3 fw-bold">
          Register
        </div>

        <div class="card-body">
          <form method="#" autocomplete="off">
            <div class="row">
              <div class="col-md-6">
                <div class="form-floating mb-3">
                  <input type="text" class="form-control" id="first_name" name="first_name" placeholder="First name">
                  <label for="first_name">First name</label>
                </div>
              </div>

              <div class="col-md-6">
                <div class="form-floating mb-3">
                  <input type="text" class="form-control" id="last_name" name="last_name" placeholder="Last name">
                  <label for="last_name">Last name</label>
                </div>
              </div>
            </div>

            <div class="form-floating mb-3">
              <input type="email" class="form-control" id="email" name="email" placeholder="Email address">
              <label for="email">Email address</label>
            </div>

            <div class="form-floating mb-3">
              <input type="password" class="form-control" id="password" name="password" placeholder="Password">
              <label for="password">Password</label>
            </div>

            <div class="form-floating mb-3">
              <input type="password" class="form-control" id="password_confirmation" name="password_confirmation" placeholder="Confirm Password">
              <label for="password_confirmation">Confirm Password</label>
            </div>

            <button type="submit" class="btn btn-primary w-100">
              Register
            </button>
          </form>
        </div>
      </div>
    </div>
  </div>
</div>

We need just a little bit of custom CSS:

.form-floating > .form-control {
    height: 48px;
    min-height: 48px;
    padding: 1rem 0.75rem 0.25rem;
  }

  .form-floating > label {
    padding: 0.75rem;
  }

  .form-control:focus {
    box-shadow: none;
  }

And here's our nice form! 😊

Building simple tabs with HTML, CSS, and Vanilla JavaScript.

Razvan Zamfir — Fri, 15 May 2026 11:47:53 +0000

Razvan Zamfir

May 15

Building Simple Tabs with Vanilla JavaScript

#javascript #css

Comments 1

2 min read

Building Simple Tabs with Vanilla JavaScript

Razvan Zamfir — Fri, 15 May 2026 11:26:06 +0000

Tabs are one of those UI patterns you see everywhere — dashboards, settings pages, pricing sections, docs, etc.

In this post, we’ll build a fully working tab system using only HTML, CSS, and JavaScript.

HTML Structure

The HTML Structure is minimalistic:

<div class="tabbed-content">
  <ul class="tabs" role="tablist">
    <li role="tab" aria-selected="true" class="active">Tab 1</li>
    <li role="tab" aria-selected="false">Tab 2</li>
    <li role="tab" aria-selected="false">Tab 3</li>
  </ul>

  <div class="content">
    <div class="show">
      <h2>Tab 1 content</h2>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
    </div>

    <div>
      <h2>Tab 2 content</h2>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
    </div>

    <div>
      <h2>Tab 3 content</h2>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
    </div>
  </div>
</div>

As you can see, on page load, the first tab has the class name active, and the first panel has the class name show. The aria-selected attribute helps with accessibility.

The CSS Styling

.tabbed-content {
  margin: 10px auto;
  max-width: 500px;
}

.tabs {
  display: flex;
}

.tabs li {
  flex: 1;
  border: 1px solid #ddd;
  border-radius: 4px 4px 0 0;
  background: #eee;
  cursor: pointer;
  height: 36px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.tabs li.active {
  border-bottom: 1px solid #fff;
  background: #fff;
}

.content {
  padding: 10px;
  border: 1px solid #ddd;
  border-top: none;
}

.content > div {
  display: none;
}

.content > div.show {
  display: block;
}

.content h2 {
  font-size: 18px;
  margin-bottom: 10px;
}

.content p {
  font-size: 14px;
}

The JavaScript Logic

const tabbedContent = document.querySelector('.tabbed-content');
const tabs = tabbedContent.querySelectorAll('.tabs li');
const contentItems = tabbedContent.querySelectorAll('.content > div');

tabs.forEach((tab, index) => {
  tab.addEventListener('click', () => {
    // Reset all tabs
    tabs.forEach((t) => {
      t.classList.remove('active');
      t.setAttribute('aria-selected', 'false');
    });

    // Hide all content
    contentItems.forEach((item) => {
      item.classList.remove('show');
    });

    // Activate clicked tab
    tab.classList.add('active');
    tab.setAttribute('aria-selected', 'true');

    // Show matching content
    contentItems[index].classList.add('show');
  });
});

How It Works

We match Tab 1 to Content 1, Tab 2 to Content 2, and Tab 3 to Content 3 by using index: tabs.forEach((tab, index) => {}). So when a tab is clicked, we show the corresponding panel with contentItems[index].classList.add('show').

Before activating a new tab, we always reset everything using:

tabs.forEach(t => {
  t.classList.remove('active');
});

contentItems.forEach(item => {
  item.classList.remove('show');
});

This ensures only one tab is active and only one panel is displayed at a time.

Conclusion

In conclusion, each tab controls one content panel, and everything else is just state management.

No frameworks needed. You can take these tabs and style them as you need.

Longest Word JavaScript challenge

Razvan Zamfir — Sat, 11 Feb 2023 13:41:25 +0000

Coderbyte has this challenge among the free ones:

Have the function LongestWord(sen) take the sen parameter being passed and return the longest word in the string. If there are two or more words that are the same length, return the first word from the string with that length. Ignore punctuation and assume sen will not be empty. Words may also contain numbers, for example "Hello world123 567".

Here is my solution, with explanations in the form of comments:

function LongestWord(sen) { 
  // An aray of words made up of letters only
  let cleanWords = [];

  let words = sen.split(' ');
  words.forEach(word => {
    // Clean up the words and push them into "cleanWords"
    cleanWords.push(word.replace(/[^a-zA-Z0-9]/g, ''));
  });

  // Order by size
  let cleanWordsBySize = cleanWords.sort((a, b) => b.length - a.length);

  // Get the first
  return cleanWordsBySize[0];
}

It passed all the tests. :)

Meet Brave CMS

Razvan Zamfir — Wed, 31 Mar 2021 09:18:49 +0000

I have been working on this CMS and I am hoping that a lot of people will find it useful.

What it is

It is an easy-to-use Content Management System built with the good old LAMP stack. I have called it Brave CMS (link to Github repo).

Video demo

What it offers

It offers UI/UX developers and designers the possibility to very easily turn their HTML templates into database-powered websites.

I worked as a WordPress theme developer for quite a while and I have found turning an HTML template into a WordPress theme is time-consuming and tedious.

It is why I came up with Brave CMS. You can turn an HTML template into a Brave CMS template in half the time you would turn it into a WordPress theme.

Why is Brave CMS so easy to use?

For these 3 reasons:

Brave's themes are completely separated from the content manager.
Every theme is comprised of its views (Twig files) and its assets. As you very likely already know, Twig has a very clean and clear syntax.
The directory name of the active theme is stored in a variable named theme_directory. This variable is passed to the theme's master template file, layout.twig (the value held by the theme_directory variable is easy to change, from the Static_model model).

Why could the project use your help?

I believe Brave CMS has the potential to replace WordPress one day, but it needs contributions from more developers (smarter than I am).

So, if you know you are an outstanding PHP developer, feel free to contribute.

Awesome Online Newspaper CMS

Razvan Zamfir — Mon, 12 Oct 2020 15:18:15 +0000

I've made an open-source online newspaper application and I believe it is worth dedicating a bit of time to analyzing it.

I am proud of it but at the same time I realize it is not perfect. It is why I decided to write this short article with the main purpose of asking for constructive feedback.

A quick video demo of it in action

Technologies, frameworks

The technologies used are PHP, MySQL, JavaScript, Codeigniter 3 and Bootstrap 4.

How to use it

The deployment/installation process is very simple (it is the main reason I chose to make it with Codeigniter 3): you write the database credentials in application/config/database.php, then run the Install controller which will create all the necessary tables.

Then you register (after creating the necessary tables you are redirected to the account creation page) and... you are an author on your own online newspaper!

The next authors who register need their accounts to be approved by you. In other words, you are the editor-in-chief.

You choose who you collaborate with, the first created author account is also the admin account. You can test all that on a local (XAMPP, WAMP) server.

What I already know is not so great about it

It does not have a very clear separation between the Admin and the Frontend. I wish I could find a way to introduce themes for the Frontend.

If you like it

If you are a PHP professional and want to get involved in any way that's useful, please do.

The perfect way to check for a palindrome, in JavaScript

Razvan Zamfir — Sun, 20 Sep 2020 09:34:44 +0000

First, let's clarify what a palindrome is.

According to Wikipedia "a palindrome is a word, number, phrase, or other sequence of characters which reads the same backward as forward".

In the above definition, the word "reads" is key: a phrase like "Red rum, sir, is murder" is read, not written the same backward as forward. That is because of the punctuation and case.

The above is a clue for what the first two steps we need to take are: eliminate punctuation and spaces and force lower case.

After that, we can proceed with getting comparing the string to check with its reverse.

The function looks like this:

 const isPalindrome = (str) => {
  // Force to string
  // Eliminate punctuation and spaces
  // Force lower case
  // Split
  let arr = str.toString().replace(/[^A-Za-z0-9_]/g, "").toLowerCase().split('');

  // Join into one word
  let joined = arr.join('');

  // Reverse and join into one word
  let reverseJoined = arr.reverse().join('');

  //compare
  return joined == reverseJoined;
}

After making sure our expression-to-check is a string, we use str.replace(/[^A-Za-z0-9_]/g, "") to eliminate punctuation and spaces and force lowercase with toLowerCase().

We need to make an array from the resulted string, so that we get the reverse of the string by reversing the array and then joining it into a string. This is the "original" array:

let arr = str.toString().replace(/[^A-Za-z0-9_]/g, "").toLowerCase().split('');

The "original", lower case, no spaces, no punctuation string:

let joined = arr.join('');

The reversed string:

let reverseJoined = arr.reverse().join('');

Finally, the comparaison, that returns a Boolean:

return joined == reverseJoined;

And with that we are done making a palindrome checker that works for words and phrases too. You can see it in action here.