DEV Community: Emmanuel Mendoza

AI Breakthroughs You Need to Know: The Future is Now

Emmanuel Mendoza — Tue, 28 Jan 2025 16:53:42 +0000

The AI world has been buzzing with excitement this month, and it’s not just the tech giants in Silicon Valley making waves. From new tools for developers to revolutionary platforms that could reshape how we browse the web, the AI race is accelerating—and we need to pay attention. Let’s dive into the latest developments and what they mean for us as web professionals.

TRAE AI: TikTok's AI-Powered Code Editor

First up, TikTok surprised everyone by releasing its very own AI-powered code editor for free. Yes, TikTok—the social media platform known for its viral videos—is now a player in the developer tools space. This editor is packed with features that rival popular tools like Cursor and even VS Code with Copilot.

Imagine creating clean, efficient code in a fraction of the time, all thanks to advanced AI suggestions and seamless integrations. Whether you're debugging, prototyping, or writing production-level code, TikTok’s tool is a game changer—and it’s free! If this isn’t a sign to start leveraging AI in our workflows, what is?

OpenAI Operator: The Future of Browsing?

Next, OpenAI has introduced the OpenAI Operator, which many are calling the "new way to browse" in 2025. This isn’t just an incremental upgrade; it’s a paradigm shift. Imagine a browsing experience where search results are not just listed but contextualized, personalized, and presented with actionable insights—all powered by cutting-edge AI.

Some are even speculating this could mark the beginning of the end for traditional search engines like Google. The Operator redefines what it means to interact with information online, making browsing more intuitive, efficient, and intelligent. If you’re not already exploring AI-enhanced tools, you’re missing out on the future of web interaction.

DeepSeek R1: China’s Open Source Contender

And just when we thought the month couldn’t get any more exciting, China enters the spotlight with DeepSeek R1. This new AI platform directly competes with OpenAI’s o1, and it’s making waves for all the right reasons. What sets DeepSeek R1 apart? It’s open source, which means you can download it, run it locally, and even commercialize it. Yes, it’s free, and the API pricing is remarkably affordable.

DeepSeek R1 isn’t just a technological feat; it’s a statement. China is stepping up as a serious competitor in the AI race, and by making this tool accessible, they’re ensuring that innovation isn’t limited to those with deep pockets. For developers, businesses, and enthusiasts alike, this opens up a world of possibilities.

Embrace the Present: AI is Here

The takeaway from all these breakthroughs is clear: AI isn’t the future anymore—it’s the present. From TikTok’s free code editor to OpenAI’s game-changing browsing platform and China’s open-source revolution, the pace of innovation is staggering. And this is just the beginning.

As software professionals, we have a choice: adapt or be left behind. AI tools are no longer optional—they’re essential for maximizing productivity, staying competitive, and delivering value to clients. Let’s commit to learning and leveraging these technologies. The AI race is on, and the best way to stay ahead is to dive in.

Remember, this isn’t about replacing us; it’s about empowering us to do more, faster, and better. Let’s lead the way in embracing AI and ensuring our skills and practices remain at the cutting edge.

UI Challenge - Elevate CSS masking techniques - Pt2

Emmanuel Mendoza — Tue, 27 Jun 2023 17:57:07 +0000

In this post I will be showing a use case for the Avatar component just built on previous post.

The Grid

Our goal is building a Grid component that will take Avatars with some additional text info as children, to then add some cool video playing in the background. In order to achieve this the following steps will be performed:

Create an Avatar Card component that will be using the Avatar component followed by 2 text fields holding the Name and Role info.
Putting a couple of Avatar Card components together in a grid.
Adding a video that will be playing nicely and quietly in the page background.

While on paper it seems to be quite normal html/css coding, some complications were hit down the road as I couldn't use any background on any Avatar parent element to produce the desired effect.
When coding a web component, I try to maximize the HTML/CSS code but sometimes JS is the cleanest and simplest way to achieve certain functionallity as in this case. I was looking for creating a Grid component where items are centered (just like CSS Grid justify-content: center property does) but after some attempts using CSS only, and keeping in mind that we need to make the Grid responsive and flexible (Grid component is not aware of children element size) I realized that JS will be the best way to go. Once again, I like to keep the code as readable and clean as possible, and that includes CSS code (and here is where using the shape to clip all outside content rathen that creating a new shape - e.g. an square containing an hexagon - and be able to manage the aspect ratio of it take relevance, as the mask container can horizontally grow as much as needed without affecting the shape aspect ratio, so we don't need any extra empty side elements to get the same element growing effect), so if CSS is getting too complicated I tend to reconsider the implementation design but of course, this is just a personal coding style choice.

So, in order to get items sorted in a centered fashion, I created the below component (made it with React TS). Below is the code:

const SideGrowingGrid: React.FC<SideGrowingGridProps> = ({ coverColor = 'white', children }): ReactElement => {
    const [gridRef, { width }] = useElementSize();
    const [itemRef, { width: iWidth }] = useElementSize();
    const childs = ( (children as JSX.Element[]).map ? children : [(children as JSX.Element)] ) as JSX.Element[]; 
    const itemsPerRow : number = iWidth === 0 ? childs.length : iWidth > width ? 1 : Math.floor(width / iWidth);

    return (
        <div className='sgg-container'
            ref={gridRef}>
            {
                ([...Array(Math.ceil(childs.length / itemsPerRow))]).map((e, i) =>  (
                    <div className='sgg-row' key={i}>
                        <div style={{backgroundColor: coverColor, flexGrow: 1}}></div>
                    {      
                        childs.slice(i * itemsPerRow, i * itemsPerRow + itemsPerRow).map((child, j) => (
                            <div key={j} ref={(i === 0 && j === 0) ? itemRef : null}>
                                {child}
                            </div>
                        ))
                    }
                        <div style={{backgroundColor: coverColor, flexGrow: 1}}></div>
                    </div>
                ))
            }
        </div>
    );
}

Component is quite simple:

Use custom hooks to get the Grid size and Grid items size (Note: It assumes all items have the same size).
Compute the number of items per Grid row to later create row elements that wraps such children accordingly.
Add empty elements in the beginnig and the end of each row that grow and cover the Grid far ends using whatever color it's passed as component property.

That's it, we have our Grid component ready! Nonetheless if you are fine with the items sorting like the CSS Grid - Space Around does, it's quite easy to implement it using CSS only. You can check below Pen implementation and play with it.

Imagination is limitless

Now we have the Grid component, we just need to add a cool background to get most of it. In the company's website we used something subtle (an animated gradient and doodle background), but for this use case, I added a video where visitor can easily tell all Avatars are sharing the same background.

You can take a look to the full implementation here

And in below link you can check the live result:

Avatar Grid

avatar-grid.vercel.app

< UI Challenge - Elevate CSS masking techniques - Pt1

Thank you

That's it, I hope you find this post useful and if you have some cool use case ideas don't hesitate to share them! If you want to connect, you can find me in LinkedIn

UI Challenge - Elevate CSS masking techniques

Emmanuel Mendoza — Mon, 26 Jun 2023 23:45:34 +0000

The premise

I am currently working for an IT company that few months ago started a re-branding project. As the lead of the company's Web practice, I worked shoulder-to-shoulder with the head of the Design Guild to make sure the new brand of the company reflects our status and true potential to the world. As all projects of this nature, we were holding regular meetings with the Design team, to review their designs and their expected functionality.

The challenge

During one of those meetings, the Design team came up with the following piece:

At first sight, it looks like a regular design till they explained something that changed everything; the idea is that all avatars (as they’re meant to show people pics) share the same background of whatever element it's behind (per design, we will be using a gradient and a doodle as background); this implies each avatar background will look different in each device as their position will vary depending on the viewport size.
At that point, we had not realized the challenge the design team put in front of us, it was till we started to brainstorm about how to implemenat it that we figured it was not going to be that simple. This component caught my attention as I had never built one like this before so I took it for myself.
Before jumping to the technical solution, it's worth to mention some relevant facts related to it:

The component is used in several pages and the shape (e.g. hexagon) is different in some of them.
The shape is used for another website components.

The solution

Now let's talk about the solution; for this, we are going to need 2 components:

The Avatar component
The Avatar Grid component

But first, in case you are like me, a desperate person, you could take a look to an implemented use case here. Now lets begin.

The Avatar component

Our goal is creating a visual effect that a person is coming out of the shape. In order to achieve that I needed 3 layers:

Back Layer - The shape container

For this layer I needed to consider the following:

The solution should allow to manage the shape aspect ratio regardless of its size (this way the component responsiveness will be easy to handle)
The solution should allow to use a shape and clip whatever is outside of it as shapes are used in another web components (creating a new shape would be an alternative but it would bring another complications when using it in a grid and also would take the fun away of it). And after some reading/researching/coding, I came up with the piece of CSS code that did the trick:

.masked {
  mask-image: url(https://atwebsite.blob.core.windows.net/images/hexagon.svg), linear-gradient(#fff,#fff);
  mask-size: calc(100% - 20px) calc(100% - 20px), 120%;
  mask-composite: exclude;
  mask-origin: content-box;
  mask-repeat: no-repeat;
  mask-position: center;
}

This CSS tecnique allows to take several shapes (in this case we are using an hexagon and the square drawed by the gradient) and clip whatever portion of the element where shapes are not colliding.

This approach perfectly fits the solution needs mentioned above.

Middle Layer - The picture container

The second layer will hold the picture, there is not much going on here, just usual CSS. I scaled the picture up so it's always bigger than the shape which is needed for the coming out of the shape effect.

Front Layer - The bottom half of the shape container

As you could imagine, I just simple reused the shape container built in the first layer but also added a parent (container) so I can handle the portion of the picture I want to be covered from the bottom to the top.

Below you'll find a Pen with a full implementation of this component and a couple of CSS variables you can play with.

UI Challenge - Elevate CSS masking techniques - Pt2 >

Thank you

That's it for our first piece of this solution, I hope you are finding this post useful and if you want to connect, you can find me in LinkedIn