DEV Community: Jeremy Hernandez

Intro into Phaser.js

Jeremy Hernandez — Mon, 02 Dec 2024 09:31:48 +0000

When I first started tinkering with game development, I came across Phaser.js and honestly, I would say it's been fun. Whether you’re just curious about making games or want to create something polished, this framework seems to have a lot to offer. I will go into what some benefits I found were but before that, let's clear up an important question. What is Phaser.js?

What is Phaser.js?

Phaser.js is a fast, free, and open-source HTML5 game framework that simplifies the creation of 2D games for web browsers. It leverages modern web technologies like WebGL and Canvas for rendering, ensuring smooth performance across devices.

Now, since I’ve spent some time exploring it, and here are three things that really stood out to me.

1. It’s Super Easy to Get Started

I’ll admit, I was a little intimidated when I first opened the Phaser.js documentation. Game development sounded complicated, but Phaser actually makes it easier to dive into.

Here, I'll provide a template pulled straight from Phaser docs.
This example initializes a Phaser game, loads assets, and displays a background with a sprite. It demonstrates how easy it is to set up a game scene with Phaser.

const config = {
  type: Phaser.AUTO,
  scale: {
    mode: Phaser.Scale.FIT,
    autoCenter: Phaser.Scale.CENTER_BOTH,
    width: 800,
    height: 600,
  },
  scene: [TitleScreen],
  physics: {
    default: 'arcade',
    arcade: {
      gravity: { y: 0 },
    },
  },
};

const game = new Phaser.Game(config);

function preload() {
  this.load.image('sky', 'assets/sky.png');
  this.load.image('star', 'assets/star.png');
}

function create() {
  this.add.image(400, 300, 'sky');
  const star = this.add.sprite(400, 300, 'star');
}

function update() {
}

Now if I wanted to set up a basic game, it can as easy as adding a few lines of code. Here’s something I made recently—a simple version of a Pong-like game:

class Game extends Phaser.Scene {
  preload() {}

  create() {
    // Ball
    const ball: any = this.add.circle(400, 250, 10, 0xffffff, 1);
    this.physics.add.existing(ball);
    ball.body.setBounce(1, 1);
    ball.body.setCollideWorldBounds(true, 1, 1);
    ball.body.setVelocity(-200, 0);

    // Left Paddle
    const paddleLeft: any = this.add.rectangle(50, 250, 25, 125, 0xffffff);
    this.physics.add.existing(paddleLeft, true);
    const body = paddleLeft.body;
    this.physics.add.collider(paddleLeft, ball);
    body.setMass(5000);

    // Right Paddle
    const paddleRight: any = this.add.rectangle(750, 250, 25, 125, 0xffffff);
    this.physics.add.existing(paddleRight, true);
    const bod = paddleRight.body;
    this.physics.add.collider(paddleRight, ball);
    bod.setMass(5000);
  }
}
export default Game;


const config = {
  type: Phaser.AUTO,
  width: 800,
  height: 600,
  scene: [TitleScreen],
  physics: {
    default: 'arcade',
    arcade: {
      gravity: { y: 0 },
    },
  },
};

const game = new Phaser.Game(config);

game.scene.add('game', Game);

game.scene.start('game');

What’s cool here is that I didn’t have to do much heavy lifting. Phaser takes care of things like adding physics to the ball, handling collisions, and making everything bounce off walls and paddles.

2. Built-In Physics Systems

Phaser.js comes with Arcade Physics, Matter.js, and other physics engines built-in, allowing you to add realistic movement, gravity, and collisions without external libraries. This is particularly useful for developers who want to focus on gameplay rather than implementing low-level physics.

Here’s how I added physics to a simple bouncing ball:

create() {
    // Ball
    // adds sprite with physics
    const ball: any = this.add.circle(400, 250, 10, 0xffffff, 1);
    this.physics.add.existing(ball);
    //adds bounce
    ball.body.setBounce(1, 1);
    ball.body.setCollideWorldBounds(true, 1, 1);
    //adds movement
    ball.body.setVelocity(-200, 0);

This snippet creates a sprite that bounces around the screen, leveraging Phaser's Arcade Physics for collision detection and velocity handling.

3. Cross-Platform Compatibility

Phaser.js games can run on any modern web browser, making it an ideal choice for cross-platform deployment. From desktops to mobile devices, your games will work seamlessly without requiring significant code changes.

const config = {
  type: Phaser.AUTO,
  scale: {
    mode: Phaser.Scale.FIT,
    autoCenter: Phaser.Scale.CENTER_BOTH,
    width: 800,
    height: 600,
  },
  scene: [TitleScreen],
  physics: {
    default: 'arcade',
    arcade: {
      gravity: { y: 0 },
    },
  },
};

By using Phaser.AUTO, Phaser attempts to use WebGL first because it provides better performance and additional features. If WebGL isn't supported by the browser or the device, Phaser falls back to the Canvas renderer to ensure the game runs smoothly.

Setting the scale mode to Phaser.Scale.FIT, this ensures the game scales properly to fit different screen sizes while maintaining aspect ratio.

Final Thoughts

Phaser.js has been such a fun discovery for me. It’s not too difficult and is packed with features. If you’re even a little curious about making games, I totally recommend giving it a try.
What’s the first game you’d make? For me, it was a simple bouncing ball, but now I’m dreaming up bigger projects. Time to get coding! 🎮

Sources

Intro Into Bulma CSS: How Good Is It?

Jeremy Hernandez — Sun, 17 Nov 2024 05:17:13 +0000

If you've ever spent hours tweaking CSS just to get a simple layout to work across different devices, you're not alone. While researching, I came across Bulma CSS. It's a lightweight CSS framework with a component-based approach that simplifies the process of building responsive websites. Whether you're a seasoned developer or just starting out, Bulma offers a straightforward approach to creating flexible designs without getting bogged down by complex styling.

What is Bulma CSS?

Bulma is a modern CSS framework that helps you design clean and responsive websites quickly. Unlike other frameworks that require you to work with complex JavaScript, Bulma is built entirely with CSS, making it lightweight and easy to use. It offers a flexible grid system, components for navigation, buttons, forms, and more, and everything you need to get a website up and running with minimal effort.

Why Choose Bulma CSS?

Here are 4 standout features that make Bulma CSS effective for both beginners and experienced developers alike:

Simplicity and Readability
Responsive Design Built-In
Flexible and Easy-to-Use Grid System
Quicker prototyping

Simplicity and Readability

One thing that stands out about Bulma is how simple it tries to make things. It uses Flexbox under the hood, which can make layout creation easier than writing traditional CSS. The class names are pretty clear, so it's not hard to understand what each one does at first glance. That said, it does feel a bit limiting at times. Instead of allowing for more flexibility, you’re often left working within the framework's constraints. While it’s definitely easier than writing long CSS rules, I can’t help but feel that it doesn’t offer the same level of control and customization that other frameworks like Tailwind provide. For simple projects or quick prototyping, it’s fine, but if you want more freedom, it might leave you wanting more.

 <div class="container">
        <h1 class="title has-text-centered">Grocery Store</h1>
        <div class="card has-background-grey-lighter ">
          <div class="card-content is-justify-content-center is-align-items-center">
            <h2 class="title has-text-centered">Vegetable</h2>
            <p class="has-text-centered">This should be nutrition facts about a vegetable.</p>
            <button class="button is-rounded custom-blue-button m-3">Buy Now</button>
          </div>
        </div>
      </div>

In this example, Bulma provides minimally styled components out of the box, but to add custom stylings like colors.

To style Bulma components, you would either have to do some inline styling on the component itself or add CSS rules in a styles.css.

Here's how I did it for this Vegetable card.

body {
  padding: 24px;
  margin: 0;
  height: 100vh;
}
.custom-blue-button {
  background-color: #007ACC; /* Custom blue color */
  color: white;              /* White text */
  border: none;             /* Remove border */
}

.custom-blue-button:hover {
  background-color: #005f8c; /* Darker blue on hover */
  color: white;              /* Keep the text color white */
}

Responsive Design Built-In

Bulma comes with a grid system that simplifies building responsive layouts. Instead of manually writing media queries, you can rely on its predefined classes to adjust the layout for different screen sizes. This can save time and reduce the hassle of tweaking your design for various devices.

For instance, creating a grid layout with cards that reshapes based on screen size is straightforward with Bulma’s classes. It’s a helpful feature, especially if you’re looking for a quick way to ensure your site looks good on phones, tablets, and desktops.

      <div class="columns is-multiline">
  <div class="column is-12-mobile is-6-tablet is-4-desktop">
    <div class="card">
      <div class="card-content has-background-grey-lighter">
        <h3 class="title">Kiwi</h3>
        <p>are brown but green on the inside!</p>
      </div>
    </div>
  </div>
  <div class="column is-12-mobile is-6-tablet is-4-desktop">
    <div class="card">
      <div class="card-content has-background-grey-lighter">
        <h3 class="title">Cherry</h3>
        <p>on top!</p>
      </div>
    </div>
  </div>
  <div class="column is-12-mobile is-6-tablet is-4-desktop">
    <div class="card">
      <div class="card-content has-background-grey-lighter">
        <h3 class="title">Strawberry</h3>
        <p>tastes good.</p>
      </div>
    </div>
  </div>
</div>

Below, is how these screen sizes are reshaping the way the cards are displayed.

Mobile Screens

Medium Screens

Larger Screens

Here, the columns class defines the overall grid, and each column gets specific classes for different screen sizes like is-12-mobile, is-6-tablet, and is-4-desktop. These classes ensure that the layout adjusts accordingly: one column on small screens, two on tablets, and three on desktops.

Flexible and Easy-to-Use Grid System

The grid system in Bulma is simple yet powerful. It’s built using Flexbox, making it easy to create both simple and complex layouts. The grid is based on a 12-column structure, so you can easily adjust the width of columns by specifying the number of columns you want them to span. The grid system is flexible and supports both fixed-width and fluid columns.

For example, to create a two-column layout on a desktop and stack them on mobile, you can use:

<div class="columns">
  <div class="column is-half">
    <p>Column 1 content</p>
  </div>
  <div class="column is-half">
    <p>Column 2 content</p>
  </div>
</div>

In this layout, is-half makes each column take up 50% of the container’s width. On smaller screens, the columns automatically stack on top of each other, so you don’t have to write custom media queries.

Quick Prototyping

With Bulma, you can create prototypes quickly by simply using the pre-defined classes. If you want to slap together some components with minimum styling, Bulma is great for that. The minimalistic design system of Bulma also means you can easily tweak or extend the styles to fit your project’s needs. Want to change the primary button color? Just update the button class with a different modifier, like is-link for a blue button, or is-danger for a red one.

Here’s a simple navigation bar using Bulma's predefined class:

<nav class="navbar is-primary">
  <div class="navbar-brand">
    <a class="navbar-item" href="#">Brand</a>
    <a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false">
      <span aria-hidden="true"></span>
      <span aria-hidden="true"></span>
      <span aria-hidden="true"></span>
    </a>
  </div>
  <div class="navbar-menu">
    <div class="navbar-end">
      <a class="navbar-item" href="#">Home</a>
      <a class="navbar-item" href="#">About</a>
      <a class="navbar-item" href="#">Services</a>
      <a class="navbar-item" href="#">Contact</a>
    </div>
  </div>
</nav>

Mobile Screens

Larger Screens

The navbar, navbar-item, and navbar-burger classes are all part of Bulma’s pre-defined component system. You can use them to create a fully responsive navigation bar without writing any custom CSS.

Conclusion

While using Bulma CSS, I would say it has been an interesting experience. While it’s a solid framework that provides a set of pre-styled components, it feels a bit more traditional compared to utility-first frameworks like Tailwind. Bulma is great for beginners looking for a simple, flexible design system, but it doesn’t offer the same level of customizability and control that Tailwind does.

To be honest, Bulma is a good starting point for those just getting into CSS frameworks, but there are probably better frameworks to invest your time in.

Sources

Intro into Tailwind CSS

Jeremy Hernandez — Sun, 10 Nov 2024 23:53:03 +0000

If you’ve ever built a website, you know that styling can sometimes be tedious, repetitive, and time-consuming. You write CSS rules, try to manage class names, and occasionally find yourself rewriting the same code over and over. That’s where Tailwind CSS comes in! Tailwind is a popular utility-first CSS framework that helps you build clean, modern, and fully responsive designs without the headache of traditional CSS.

What is Tailwind CSS?

Tailwind CSS is a utility-first CSS framework where each class performs a single function. Rather than writing custom CSS, you use a large set of pre-defined utility classes directly in your HTML. This approach speeds up the design process by making it easy to apply styles and allowing you to focus on the layout and feel of your website, rather than writing custom CSS from scratch.

Why Choose Tailwind CSS?

Here are three standout features that I found that make Tailwind CSS cool and effective for both beginners and experienced developers alike:

Highly Customizable Utility Classes
Responsive Design Made Simple
Rapid Prototyping with Minimal CSS

Customizable Utility Classes

Tailwind offers a comprehensive set of pre-defined utility classes, from padding and margin to font size, color, and grid layouts. Tailwind is designed to be flexible and customizable; you can easily adjust classes to suit your design needs or even configure the framework itself to include your unique styles and preferences.

Below, I apply padding using p-6, set background to white using bg-white and apply rounded corners and shadow with rounded-lg and shadow-lg.

<div class="bg-white p-6 m-10 max-w-sm rounded-lg shadow-lg border border-gray-200">
  <h2 class="text-xl font-semibold text-gray-800">Product Card</h2>
  <p class="mt-4 text-gray-600">This is a simple product card with customizable styles.</p>
  <button class="mt-4 px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600">
    Buy Now
  </button>
</div>

If I wanted to customize those predefined classes, I could go into my tailwind.config.js to do it!

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        customBlue: '#007ACC',
      },
      borderRadius: {
        'xl': '1.5rem',
      },
    },
  },
};

<button class="mt-4 px-4 py-2 bg-customBlue text-white rounded-xl hover:bg-blue-600">
  Buy Now
</button>

Simplistic Responsive Design

Tailwind makes it easy to build responsive websites without writing custom media queries. Each utility class can be tailored to specific screen sizes by using prefixes like sm:, md:, lg:, and xl:. This structure makes it easy to create layouts that adapt seamlessly across devices, providing a better user experience with minimal effort.
Here I have have an example of how I would create 3 'cards' to dynamically change size depending on the screen size. grid-cols-1 creates only 1 column on small screens, md:grid-cols-2 changes it to 2 columns on medium screens, and lg:grid-cols-3 changes it to 3 columns on large ones!

<div class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
  <div class="bg-white p-6 rounded-lg shadow-md">
    <h3 class="text-lg font-semibold">Apple</h3>
    <p class="mt-2 text-gray-600">Keeps the doctor away!</p>
  </div>
  <div class="bg-white p-6 rounded-lg shadow-md">
    <h3 class="text-lg font-semibold">Mango</h3>
    <p class="mt-2 text-gray-600">My favorite fruit</p>
  </div>
  <div class="bg-white p-6 rounded-lg shadow-md">
    <h3 class="text-lg font-semibold">Banana</h3>
    <p class="mt-2 text-gray-600">Are good when they're yellow!</p>
  </div>
</div>

Rapid Prototyping

With Tailwind, you can quickly create polished prototypes directly in HTML, saving you time and allowing you to focus on the design and functionality of your app. This utility-based approach means less time writing custom CSS, which ultimately leads to faster project delivery. Since you can see the effects of each class immediately, it’s perfect for experimentation and refinement.

Below, I can set a background color for nav bar using bg-gray-800, flex, justify-between, and items-center create a flexible, centered layout, and md:hidden hides the menu button on medium screens and up, while md:flex displays the navigation links on medium screens and up.

<nav class="bg-gray-800 p-4 text-white">
  <div class="container mx-auto flex justify-between items-center">
    <a href="#" class="text-2xl font-bold">Brand</a>
    <ul class="hidden md:flex space-x-4">
      <li><a href="#" class="hover:text-gray-300">Home</a></li>
      <li><a href="#" class="hover:text-gray-300">About</a></li>
      <li><a href="#" class="hover:text-gray-300">Services</a></li>
      <li><a href="#" class="hover:text-gray-300">Contact</a></li>
    </ul>
    <button class="md:hidden bg-gray-700 p-2 rounded">Menu</button>
  </div>
</nav>

Conclusion

To wrap things up, trying out Tailwind CSS as a new developer has been a game-changer for me. Compared to libraries like MUI or Chakra, which give you ready-made components, Tailwind’s utility-first approach feels liberating. I can build exactly what I envision directly in my HTML without having to dig through pre-styled components or worry about overriding defaults. At first, using so many classes in my HTML felt unusual, but it quickly made sense as I saw how fast I could style and adapt layouts without writing new CSS.

Tailwind’s responsive utilities make it super easy to understand and build for different screen sizes, and prototyping is a breeze—I can experiment and adjust quickly without hopping between files. While MUI and Chakra are fantastic for projects that need polished components out of the box, Tailwind has been invaluable for learning the nuts and bolts of responsive design and building my own styles from scratch.

Overall, Tailwind has been overall, a fantastic experience for me so far. The only difficulties I faced were having to learn Tailwind metrics and keywords. If you’re looking to learn more about styling or want to create layouts with your unique style, Tailwind CSS is definitely worth exploring!

sources

Role of AI In Enhancing VR Experiences

Jeremy Hernandez — Mon, 07 Oct 2024 03:45:07 +0000

I have always wondered, “What are the limits of Artificial Intelligence?” Whether we realize it or not, AI has been around in recognizable form since the 1950's, when two software-based AI programs were created to play checkers and chess. Now, it has started to make itself more prevalent in our world, leaving an impact that will last for the foreseeable future. As our world continues to advance in technology, AI will keep influencing our experiences, particularly in Virtual Reality (VR).

Today, there are many concerns for AI, but we stand to benefit a great deal in regards to VR. Virtual Reality can be greatly, enhanced in almost every aspect by AI, as if, they were created together. With the implementation of AI, there are four key areas:

Optimizations for Graphics Rendering
Object Recognition
Behavioral Analysis
Personalization & Customizations

Optimization for Graphics Rendering

The rendering of graphics has always been known to be a resource-intensive process. With the need for powerful hardware to handle processes, many developers use AI-driven techniques instead to save costs. Some examples are real-time adjustments to lighting, shadows, and textures. By using machine learning algorithms, AI is becoming more equipped to analyze environments, predict pixels in real time and enhance visual effects and realistic simulations. With this, our experience becomes more immersive and life-like.

Here we have Nvidia testing the limits of AI algorithms.

Object Recognition

With the use of Object Recognition algorithms laying the foundations for spatial learning, VR apps are able to see objects in virtual space. They can see gestures and movements while recognizing environmental components and interact with them. With real-time tracking of gestures, this allows the users to have a sense of presence and immersion while also improving the usability and accessibility for those who need it. Many companies and video games already use Object Recognition.

Behavioral Analysis

Behavioral Analysis is a specific field of AI focuses on analyzing users' actions and behaviors. With the collective insights developed from that data, along with predictive modeling techniques, VR developers are able to collect information and analyze a user's actions, emotions and interactions with the virtual environment. By using this data, they can develop VR applications to cater to an individual user's needs, which opens the door to an improved, overall experience that leaves us with a better sense of satisfaction and engagement. I believe there is also an opportunity to collect data and contribute to the studies of mental health.

Personalizations & Customizations

Using AI algorithms, VR apps are able to track a user's behavior and actions and give user's possible personalized content, recommendations or experience that are tailored to their needs or interests. How cool would it be if there was a game that could change or adapt according to you? Personalizations can also include adaptable video game mechanics that change according to user's capabilities, customized avatar designs or even interactive virtual simulations that keep you engaged.

Closing Thoughts

There are limitless opportunities when it comes to the implementation of Artificial Intelligence. With the proper use and cautiousness, we can use it to enhance every aspect of Virtual Reality. From improving realistic simulations to crafting adaptable and unique experiences, we have much to look forward to. I believe the world will continue to rapidly advance in technology and the use of it.

Sources

Intro to Ember.js Components

Jeremy Hernandez — Mon, 30 Sep 2024 04:41:41 +0000

When you're researching what frameworks to use when developing an app, it's like going to a car dealership. Each car brand is, in essence, a framework. Deciding what framework would be best for developing an app comes down to preference. If you've come across Ember.js, then I welcome you!

If you're just starting out with Ember.js, one of the most exciting and important aspects you'll encounter is components. Components are the building blocks of any Ember.js application and help you break down your interface into reusable pieces. But don't worry—though they sound technical, components are a great way to keep your app organized and scalable.
If you've search anything related to Ember, you will find there is basically two versions- class Ember and Ember with Glimmer, I'll walk you through classic Ember.js components, helping you understand what they are, how they work, and how to create your first one!

Components

Components in Ember.js are like small, self-contained UI elements that have their own functionality and style. Let's think of them as the LEGO blocks of our application. Each block will have its own specific purpose, but when put together, they build the complete interface.

For example, a button, a navigation bar, or a modal window can all be individual components. They can take inputs, manage their own state, and send actions or events to other parts of the application.

If you ever ask yourself, "Why should we use components?", here are three great points.

Reusability: Components can be reused across multiple parts of our application, saving us time and effort.
Separation of Concerns: Components encapsulate their behavior and template, which helps to organize code better.
Maintainability: When components are well-structured, it’s easier to update and maintain them as our app grows.

Let's start with what makes a component. An Ember component typically consists of:

Template: This is the HTML with handlebars that defines the visual structure.
Javascript Class: This file would contain the logic behind the component such as managing state or handling a user's input.
Styles: You can define CSS or SCSS styles specific to the component to ensure it looks just the way you want.

Template

Now let's get started on creating a component's template.
Assuming that we already installed ember and its dependencies, lets start by opening up our app in a coding environment. Now remember, templates are responsible for html structures of our components. In our app, we should have an existing application.hbs. We want to display a list of bears, so we would need to create a template for bear-list. For naming convention of ember components, they need to be Pascalcase, which is hyphenated and file type is .hbs (handlebars).

App/templates/components/bear-list.hbs

Now we should have two templates for two components. Next, we will want to add structure in our bear-list.hbs. Let's add a loop that will list each bear from a bears array that we will create later. You'll notice that ember uses mustache syntax to insert dynamic content, handle expressions, and invoke helpers or components.

Javascript Class

Now, that we have our templates for our components, all there is left to do is create our JS files for our our bears-list component. For our bears-list, we need to defined a bears array and an action to that'll allow us to push new bears to array from an input. I won't delve too deep into what our application.js will be responsible for, but it simplest terms, it will handle our state of the app and manage the data from an API.

App/component/bears-list.js

Styles

After the bones of our application has been created, we can focus on styling our app. There should be a default app.css file that we can edit. I've decided to style our button and page. Styling is used with normal CSS formatting.

Conclusion

As for an introduction to Ember JS components, we can see that that components are essentially lego blocks that we can dynamically use to create interactive user interfaces for our ember applications. I hope soon to learn even more to be able to implement the use of API and routes in ember.

Sources

Why is less more? Minimalistic UI

Jeremy Hernandez — Mon, 23 Sep 2024 01:32:50 +0000

In today’s fast-paced digital world, technology plays a vital role in nearly every aspect of our lives. From mobile apps to web platforms, and from smart devices to enterprise software, one of the key elements that often determines the success of any technology is its User Interface (UI). UI design serves as the bridge between users and technology, shaping how people interact with digital products. A well-designed UI not only enhances the user experience but also boosts engagement, satisfaction, and the overall success of a product.

Minimalist UI (MUI) design is grounded in the principle of "less is more." As the years go by, this approach has slowly been trending in the many facets of our daily lives. Many well-known companies have implemented this concept already without us realizing it.

So how does one create a minimalistic user-interface? Since there are various components in a UI, I'll focus on a few key concepts. By focusing only on essential elements, we can strip away all the unnecessary components, creating a clean and efficient user interface. This design approach believes that simplicity enhances both usability and user experience, making interactions more intuitive and enjoyable.

Simplicity and Clarity

Minimalist design is all about the simplicity. This means creating interfaces with minimal visual elements while keeping the core functionality intact. If there are less elements, that opens up the option for essential elements to be larger and better use of negative space between elements. Clutter-free screens make it easier for users to find what they need without distractions. Many apps such as DuoLingo, Spotify and even Instagram use the minimalistic approach.

As mentioned above, we can implicitly, prove simplicity has been shown to translate to increased user satisfaction.
If we stop and look around us, we'll notice that the devices we hold in our hands already display this. A great example of this would be Apple.

Clear navigation and legibility are at the forefront of (UID). Users should immediately understand how to interact with the system, without needing to wade through unnecessary buttons or text. By eliminating excess, the interface becomes more intuitive, helping users complete tasks quickly and efficiently.

Increased Focus and Faster Load Times

When unnecessary elements are removed, the user can focus on the key functionalities. If we do that, it encourages the removal of distractions, allowing users to concentrate on what's important, whether that’s content or the primary actions within the app. We can open up room to choose a color scheme. A proper color palette for a UI can elevate a product from the rest, such as small selection of neutral and soft colors that's less jarring to the eyes. A smooth transition between contrasting colors could make all the difference.

Along with improved focus, fewer elements contribute to faster load times, a crucial aspect of user satisfaction—especially in mobile environments. Faster performance reduces frustration and increases the likelihood of continued usage, benefiting both users and developers. I'm sure there are many who will agree with me when I say no one likes to wait for apps or pages to load

Cross-Platform Consistency and Timelessness

MUI designs tend to be more adaptable across various platforms and devices. With fewer elements to scale or adjust, the experience remains consistent whether on a desktop, tablet, or mobile phone. Minimalist designs are also timeless, avoiding trends that can become outdated quickly.

The longevity of minimalist designs is a major benefit. Simple, clean interfaces tend to age better because they don’t rely on overly ornate or trendy elements. This makes the design sustainable, requiring fewer updates to stay relevant over time.

I believe the advantages of minimalist UI design are clear. It can enhance user experiences, improve focus, speed up load times, and provide a consistent experience across most devices. While there are challenges—such as balancing simplicity with functionality—when executed well, minimalism can offer a sleek, enduring solution for modern UI design.

Sources:

Array Method Sort on Numbers;

Jeremy Hernandez — Thu, 08 Aug 2024 15:24:36 +0000

First experience with Sort()

As a beginner developer learning Javascript, there were a few things I found confusing.
During my learning of Javascript Arrays, one of those things was Sort().

Sort was a native array method that would take an array, compare each element with the next and automatically sort its elements in ascending order. Simple right? But I had to ask myself, "What is actually happening under the hood?."

Take this example below.

Here, I have an array of numbers, in which I would then apply the sort method on.
In my mind, I'm thinking, "If every number is sorted in ascending order, why is 10 not at the end of this array?".
Obviously, I have zero clue on what is happening as I have had zero prior experience with programming.
Sort() is not behaving like I'd expect.

Googling

After browsing a few online forums and a couple videos, I felt like I started to understand.

If we use the sort() by itself, with no argument passed into it, the method will sort the elements in the array. But the only issue is, this method will convert the elements it reads into datatype-- strings.

We have to remember that a method will behave like a robot so when it is reading a multi-digit string, it's seeing it as a series of numbers and not as a whole.

As strings, it will compare the Unicode numerical code values of the first character in those string numbers. The number 10's first character is 1 which has a value less than number 2.

Solution

In the midst of googling up a storm on sort(), I came across some solutions to how we can change up how the sort method operates.

Here, I have an array named numbers with its elements in random order but I'd like to sort them in ascending order.

Firstly, as an array method, Sort has () because it can accept an argument. This is what I used to change the method.

Instead of allowing the method to read elements as strings, I passed in a parameter. A function, more specifically. The function itself, will take in comparative parameters, a and b. The function will then return a value and depending on that value, it will determine the order in which the method will sort.

In the example above, we can see the sort() taking in a function which has parameters (a, b) and it will no longer compare a and b as strings but integers, and then it returns the value resulting from a - b.

Now, as I said before, the value will determine the sorting action. But how?

In the code example, a - b, it will subtract b from a.
The resulting value can only be 1 out of 3.

Negative number
Positive number
0

If a - b results in a number that is negative, a will come before b.
Below, if we see a as 1 and b as 10, the difference would be -9.
So 1 would come before 10.

Now, if a - b results to a positive number, b will come before a.
If b comes before a, 2 will now be before 10.

Lastly, if a - b equates to zero, then order will remain the same.
If my numbers array above had a duplicate number, this value would occur once.

Also, on the side note, if you wanted to sort in descending order, you could do b - a, which would sort inversely.

As as example,

If a - b, was 5 minus 5, it would result to zero.

Thoughts

To wrap up, if you wanted to apply sort method to an array of numbers in ascending order, be sure to pass in a function like (a, b) => a - b;

Credits

https://forum.freecodecamp.org/t/arr-sort-a-b-a-b-explanation/167677
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort
https://www.youtube.com/watch?v=CTHhlx25X-U
https://www.freecodecamp.org/news/how-to-sort-javascript-array-accurately/
https://www.freecodecamp.org/news/how-does-the-javascript-sort-function-work/