DEV Community: Juan Carlos Valerio Barreto

Moving a Square with CSS Grid and Minimal JavaScript

Juan Carlos Valerio Barreto — Sat, 07 Oct 2023 01:00:36 +0000

In a recent technical interview, I was tasked with a problem where a square had to be moved within a grid using buttons. The solution I initially thought of required more complex logic and JavaScript, but I realized I could use CSS Grid to handle most of the heavy lifting. In this post, I'll explain how I used grid properties to solve the problem with minimal JavaScript.

Example

The Problem

I had to move a square within a grid with the help of four buttons: up, down, left, and right. The grid and buttons are defined as follows:

.grid {
  display: grid;
  grid-template-columns: repeat(11, 20px);
  grid-template-rows: repeat(17, 20px);
}

.square {
  grid-column-start: 6;
  grid-row-start: 9;
  background-color: red;
}

.btn {
  display: grid;
  width: 100%;
  height: 100%;
}

.btn-up {
  grid-column-start: 2;
  grid-column-end: 11;
}

.btn-down {
  grid-column-start: 2;
  grid-column-end: 11;
  grid-row-start: 17;
}

.btn-right {
  grid-column-start: 11;
  grid-row-end: 17;
  grid-row-start: 2;
}

.btn-left {
  grid-column-start: 1;
  grid-row-end: 17;
  grid-row-start: 2;
}

The JavaScript Solution with React

Instead of manually moving the square's position in the DOM, I used CSS grid properties combined with React's state to determine the square's position on the grid.

Here's the JavaScript code:

import React, { useState } from "react";

const Board = () => {
  const [axisX, setAxisX] = useState(6);
  const [axisY, setAxisY] = useState(9);

  const handleMoveSquare = (direction) => {
    switch (direction) {
      case "up":
        if (axisY > 2) setAxisY(prevY => prevY - 1);
        break;
      case "down":
        if (axisY < 16) setAxisY(prevY => prevY + 1);
        break;
      case "right":
        if (axisX < 10) setAxisX(prevX => prevX + 1);
        break;
      default:
        if (axisX > 2) setAxisX(prevX => prevX - 1);
        break;
    }
  };

  return (
    <div className="grid">
      <div className="btn btn-up">
        <button onClick={() => handleMoveSquare("up")} />
      </div>
      {/* ...other buttons... */}
      <div className="square" style={{ gridColumnStart: axisX, gridRowStart: axisY }}></div>
    </div>
  );
};

Demo

Conclusion

CSS Grid properties combined with React's state management provide a powerful way to create dynamic interfaces without much manipulation of the DOM. By setting the grid properties dynamically based on React's state, we can create fluid interfaces that react to user interactions.

Would love to hear your thoughts on other creative uses of CSS Grid!

The 2MB Tailwind CSS Dilemma: Performance Snag or Not? Explore Alternatives with BundlePhobia & Moiva

Juan Carlos Valerio Barreto — Fri, 22 Sep 2023 21:45:12 +0000

In a world that is steadily marching towards 5G, significant areas still rely on 3G connections. This digital disparity necessitates a prudent choice in packages and libraries while developing applications intended for use in such regions. A case in point is the recent update of Tailwind CSS, which now tips the scales at over 2MB. This size uptick can pose concerns, particularly in 3G-dominated scenarios.

The Importance of Lightness:

The gravitas of lightweight libraries cannot be overstated. They are pivotal in ensuring optimal performance, faster load times, and superior UX/UI—particularly crucial in areas where 3G is the norm. A lighter library translates to quicker loading times, which, in turn, plays a vital role in SEO and user retention. In a slow internet scenario, every byte saved contributes to a smoother and more enjoyable user experience.

Analyzing Alternatives:

In our journey to explore lightweight and efficient alternatives to Tailwind CSS, especially suited for 3G prevalent areas, let’s delve into a comparative analysis of some widely recognized libraries and frameworks: Chakra UI, @mui/material, antd (Ant Design), React Bootstrap, Semantic UI React, and Tailwind CSS itself.

Chakra UI:

Summary: Chakra UI is a simple, modular and accessible component library that provides a set of high-quality components out of the box.
Pros:
- Highly accessible and easy to use with strong community support.
- Customizable to align with your design requirements.
Cons:
- Less comprehensive compared to some other libraries.
- Might require additional configurations for more advanced design systems.

Bundlephobia Report

Source: https://bundlephobia.com/package/@chakra-ui/react@2.8.1

@mui/material (formerly Material-UI):

Summary: This is a popular React UI framework that follows Google's Material Design guidelines.
Pros:
- Rich set of components and strong community support.
- Built-in theming and customization capabilities.
Cons:
- The design is very specific to Material Design, which may not suit all projects.
- Could be heavyweight depending on the usage and configurations.

Bundlephobia Report

Source https://bundlephobia.com/package/@mui/material@5.14.10

antd (Ant Design):

Summary: A design system for enterprise-level products, creating an enhanced user interface experience.
Pros:
- Provides a robust set of high-quality components.
- Ideal for building enterprise-level applications with a modern design.
Cons:
- The library size can be on the larger side which might impact load times.
- May require more configurations for customization outside the default design.

Bundlephobia Report

Source: https://bundlephobia.com/package/antd@5.9.2

React Bootstrap:

Summary: Combines Bootstrap with React, delivering the Bootstrap's frontend elements through React components.
Pros:
- Leveraging Bootstrap’s robustness with React’s flexibility.
- Great documentation and community support.
Cons:
- If Bootstrap's design doesn't align with your project, customization can be tedious.
- Sometimes can feel bloated with unnecessary features.

Bundlephobia Report

Source https://bundlephobia.com/package/react-bootstrap@2.8.0

Semantic UI React:

Summary: A development framework that helps create beautiful, responsive layouts using human-friendly HTML.
Pros:
- User-friendly and intuitive to use.
- Provides a more semantic, human-readable syntax.
Cons:
- Might not have as many built-in components or utilities compared to other libraries.
- Some developers find the customization to be less intuitive compared to other frameworks.

Bundlephobia Report

Source https://bundlephobia.com/package/semantic-ui-react@2.1.4

Tailwind CSS:

Summary: A utility-first CSS framework for rapidly building custom designs.
Pros:
- High level of customization and utility-based design approach.
- Encourages component reuse and maintainability.
Cons:
- The recent size increase crossing 2MB could impact performance, especially in 3G scenarios.
- Initial learning curve can be steep if coming from a traditional CSS background.

Bundlephobia Report

Source https://bundlephobia.com/package/tailwindcss@3.3.3

Each of these libraries and frameworks comes with its own set of advantages and drawbacks. The choice among them would largely depend on the specific requirements of your project, your team’s familiarity with the library, and of course, the network conditions under which your application will predominantly operate.

Utilizing BundlePhobia and Moiva for Intelligent Selections:

Tools like BundlePhobia and Moiva are indispensable for developers keen on making informed decisions. BundlePhobia allows one to analyze the size and performance impact of different packages before making a choice, while Moiva assists in comparing the alternatives.

Head-to-Head: Chakra UI vs @mui/material vs antd vs React Bootstrap vs Semantic UI React vs Tailwind CSS Analysis by Moiva

By Popularity

Tailwind CSS with 26.6M of downloads
@mui/material with 12.5M of downloads
React Bootstrap 9.8M of downloads
Ant Design 5.4M of downloads
Chakra UI 2.1M of downloads
Semantic UI React 1.1M of downloads

Conclusion:

The realm of front-end development is rich with choices when it comes to CSS frameworks and libraries. While Tailwind CSS stands tall in terms of popularity and community support, its recent size increase rings alarm bells for developers building applications for regions predominantly relying on 3G connectivity. It's vital to remember that popularity does not always equate to suitability. The key lies in understanding the unique requirements of your project and the network conditions under which your application will function.

In environments where network speed is a limiting factor, opting for more lightweight libraries could spell the difference between a snappy user experience and a sluggish, frustrating interface. The comparative analysis of different libraries like Chakra UI, @mui/material, antd, React Bootstrap, and Semantic UI React sheds light on how each has its own set of pros and cons, and how some may offer a more performance-optimized solution over Tailwind CSS in 3G conditions.

In conclusion, the quest for optimal performance especially in lower network speed scenarios, demands a well-considered, informed choice of libraries and frameworks. Tools like BundlePhobia and Moiva further empower developers in making these crucial decisions. Hence, despite the allure of popular libraries, a discerning examination of alternatives against the backdrop of network conditions and project requirements is indispensable in crafting applications that are not only functional and aesthetically pleasing but also performance-optimized for a broader user base.

Share your thoughts and experiences in the comments below on how you navigated the library and package selection landscape to optimize your projects for different network conditions!

Full Moiva Source

The Power of Pure Functions: Why Every JavaScript Dev Should Care!

Juan Carlos Valerio Barreto — Tue, 05 Sep 2023 18:28:53 +0000

If you're on a quest to write cleaner, more maintainable, and bug-resistant code, pure functions should definitely be in your toolbox. Let's deep dive into this topic and understand why it's such a game-changer for JavaScript developers.

What are Pure Functions? 🧐

In a nutshell:

They always return the same output for the same input.
They have no side-effects; they don't change anything in the outer world.

A Real-world Example 🛍️: Online Shopping Cart

Let's understand this with a juicy example - calculating the total of an online shopping cart, including discounts and taxes.

Without Pure Functions:

Imagine using a function relying on global variables:

let discount = 10; // default 10% discount
let tax = 0.05;    // 5% tax

function calculateTotal(cart) {
    let total = 0;
    for (let product of cart) {
        total += product.price;
    }
    total = total - total * (discount / 100);
    total = total + total * tax;
    return total;
}

Here, calculateTotal isn't pure since it leans on global variables discount and tax. If discount or tax accidentally changes somewhere in your code, it can lead to incorrect calculations.

With Pure Functions:

The better approach? Make calculateTotal pure by taking all its needed values as arguments:

function calculateTotal(cart, discount, tax) {
    let total = 0;
    for (let product of cart) {
        total += product.price;
    }
    total = total - total * (discount / 100);
    total = total + total * tax;
    return total;
}

Why You Should Care! 🌟

Predictability: With pure functions, you know that given the same arguments, they'll always return the same result. No more unexpected surprises!
Testability: Pure functions are a breeze to test. You can easily mock inputs and verify outputs without setting up and tearing down external states.
Reusability: They tend to be more reusable since they're not tied to any specific state or context.
Optimization and Parallelism: Certain platforms/libraries can make specific optimizations when they know a function is pure. Think about memoization or parallel processing. Neat, right?

Wrap Up 🎁

Pure functions are not just a "nice-to-have"; they can significantly improve the quality of your codebase. So, the next time you're about to write a function, ask yourself: "Can I make this pure?"

And hey, if you found this useful, don't forget to smash that ❤️ button and share with your friends! Let's keep the conversation going. How have pure functions made a difference in your coding journey? Drop your thoughts below! 👇

🎨 Diving Deep into the Colorful World of 'State of CSS' 2023: Trends, Tools, and More! 🚀

Juan Carlos Valerio Barreto — Mon, 04 Sep 2023 20:52:40 +0000

Hello dev.to community! ✨

Today, I want to share with you something about the "State of CSS" 🎨, an annual survey I've been closely following for some time. For those unfamiliar, State of CSS collects data on trends, technologies, and techniques we web developers use, focusing specifically on our beloved CSS.

Ever heard of "State of JS"? 📊 Well, "State of CSS" is its counterpart, zooming in on the world of stylesheets. I find these surveys incredibly helpful for pinpointing emerging trends within our community 🌐. They help me grasp which tools are gaining traction and which might be fading away.

In the "State of CSS" reports, I've discovered:

CSS features my fellow developers are using or wanting to learn 📚.
Info on preprocessing tools I adore, like Sass and LESS ❤️.
Insights on trending CSS frameworks and libraries 🛠️.
And about CSS writing methodologies, such as BEM and OOCSS 🔍.
Plus, there's always a segment on opinions (sometimes controversial ones!) around trends like CSS in JS 💬.

If you're someone keen on staying updated with the best practices and most popular tools in web design and development, I'd definitely recommend giving it a look 🔥.

Catch you next time, devs! 🚀👩‍💻👨‍💻

https://2023.stateofcss.com/en-US/

Unveiling AnalogJS: Crafting Angular Applications with a Fullstack Meta-Framework

Juan Carlos Valerio Barreto — Wed, 23 Aug 2023 04:18:17 +0000

Analog is a meta-framework for building applications and websites with Angular.

Similar to other meta-frameworks such as Next.JS, Nuxt, SvelteKit and others, Analog provides a similar experience, building on top of Angular created by brandontroberts.

Are you an Angular enthusiast who's always on the lookout for cutting-edge tools to enhance your development process? Look no further! We're excited to introduce you to AnalogJS, a groundbreaking fullstack meta-framework designed to transform your Angular app-building journey.

Why AnalogJS?

Picture a world where you can seamlessly combine the power of Angular with the ease of use provided by meta-frameworks like Next.js and Nuxt.js. AnalogJS does just that - it marries the versatility of Angular with the efficiency of a meta-framework, creating a developer-friendly ecosystem that accelerates your project development.

Documentation

Visit the docs at https://analogjs.org

Features

Supports Vite/Vitest/Playwright
File-based routing
Support for using markdown as content routes
Support for API/server routes
Hybrid SSR/SSG support
Supports Angular CLI or Nx workspaces

Getting Started

Use your package manager of choice to create a new project

With yarn:

yarn create analog

With npm:

npm init analog

Follow the prompts to scaffold the project and start the development server.

Elevate your Angular experience with AnalogJS - where Angular meets meta-framework magic!

*Creator: *
https://dev.to/brandontroberts

Unlocking Your #dev.to Portfolio: Elevate Your Web Presence with Integrated Article Showcase

Juan Carlos Valerio Barreto — Tue, 22 Aug 2023 00:01:45 +0000

In today's fast-paced tech world, showcasing your expertise is paramount. You've penned insightful articles on #dev.to, and now it's time to amplify your reach.

Imagine seamlessly merging your dev.to articles into your personal portfolio website, creating a comprehensive showcase of your accomplishments.

In this tutorial, we'll embark on an exciting journey to integrate the dev.to API with your portfolio section built in React. Get ready to empower your web presence and captivate your audience with a harmonious blend of technology and content.

Installing React

These are the initial steps to create your application in react.

Step 1: Environment Setup

Before you start, make sure you have Node.js installed on your computer, as React requires Node.js to run. You can download it from https://nodejs.org/.

Step 2: Create a new React application

To create a new application in React, you can use the official command line tool called "Create React App". Open your terminal and run the following command:

npx create-react-app my-personal-site

Step 3: Navigate to the Application Directory

After creating the application, navigate to the directory where it was generated using the command:

cd my-personal-site

Step 4: Run the Application

Once you are in the application directory, you can start a development server to see how your application looks in the browser. Run the following command:

npm start

Step 5: Declaring Variables

To save the list posts, the username that you have on dev.to and last the URL path for the API.

const [posts, setPosts] = useState([]);
const USERNAME = 'jcvb';
const DEV_TO_API =  `https://dev.to/api/articles?username=${USERNAME}`;

Step 6: Get the posts

Used the useEffect hook to fetch the data after the component mounts. The empty dependency array ([]) ensures that the effect runs only once, similar to the behavior of componentDidMount in class components.

useEffect(() => {
  async function fetchPosts() {
    try {
      const response = await fetch(DEV_TO_API);
      const postsData = await response.json();
      setPosts(postsData);
    } catch (error) {
      console.error('Error fetching posts:', error);
    }
  }

  fetchPosts();
}, []); // Empty dependency array means this effect runs once after mount

Step 7: Render the results

Added a key prop to each

element to provide a unique identifier for React to efficiently update the list.

return (
  <div>
    <h1>Post Lists</h1>
    {posts.length > 0 ? (
      <ul>
        {posts.map((post) => (
          <li key={post.id}>{post.title}</li>
        ))}
      </ul>
    ) : (
      <p>No posts available.</p>
    )}
  </div>
);

DEV Community: Juan Carlos Valerio Barreto

Moving a Square with CSS Grid and Minimal JavaScript

Example

The Problem

The JavaScript Solution with React

Demo

Conclusion

The 2MB Tailwind CSS Dilemma: Performance Snag or Not? Explore Alternatives with BundlePhobia & Moiva

The Importance of Lightness:

Analyzing Alternatives:

Chakra UI:

Bundlephobia Report

@mui/material (formerly Material-UI):

Bundlephobia Report

antd (Ant Design):

Bundlephobia Report

React Bootstrap:

Bundlephobia Report

Semantic UI React:

Bundlephobia Report

Tailwind CSS:

Bundlephobia Report

Utilizing BundlePhobia and Moiva for Intelligent Selections:

Head-to-Head: Chakra UI vs @mui/material vs antd vs React Bootstrap vs Semantic UI React vs Tailwind CSS Analysis by Moiva

By Popularity

Conclusion:

The Power of Pure Functions: Why Every JavaScript Dev Should Care!

What are Pure Functions? 🧐

A Real-world Example 🛍️: Online Shopping Cart

Without Pure Functions:

With Pure Functions:

Why You Should Care! 🌟

Wrap Up 🎁

🎨 Diving Deep into the Colorful World of 'State of CSS' 2023: Trends, Tools, and More! 🚀

Hello dev.to community! ✨

Unveiling AnalogJS: Crafting Angular Applications with a Fullstack Meta-Framework

Analog is a meta-framework for building applications and websites with Angular.

Why AnalogJS?

Documentation

Features

Getting Started

Unlocking Your #dev.to Portfolio: Elevate Your Web Presence with Integrated Article Showcase

Installing React

Step 1: Environment Setup

Step 2: Create a new React application

Step 3: Navigate to the Application Directory

Step 4: Run the Application

Step 5: Declaring Variables

Step 6: Get the posts

Step 7: Render the results

Final result