DEV Community: Ammar Yaser

C

Ammar Yaser — Tue, 28 Oct 2025 09:50:56 +0000

Cara

Ammar Yaser — Tue, 28 Oct 2025 09:46:43 +0000

My First Impression of Zed AI Code Editor

Ammar Yaser — Fri, 29 Mar 2024 22:51:32 +0000

For those who don't know Zed, it's a new AI Code Editor that emerged weeks ago, from the creators of the Editor most of us loved and worked with before, Atom ♥️.

What sets Zed apart from others, especially the famous VS Code, is the speed and smoothness that are very noticeable from the first use. This is because it's built on Rust, a multi-purpose programming language that has gained popularity recently due to its many features like Memory Management, Concurrency, and more. 🔃 💾

Additionally, after releasing the M Chips, or what's known as Apple Silicon, Apple recently developed many tools tailored for Rust Development that integrate with it natively. This allows developers to make the most out of the device's hardware, utilizing both CPU and GPU together, making it perform like a video game and achieving 120 FPS. Currently, the program is only available for MacOS 🥲.

This makes it outperform VS Code in terms of performance, as VS Code is built on Electron, essentially a browser window with a Chrome instance inside, consuming a lot of your device's resources 😏.

And of course, in the era of AI, it comes with (Built-In) GitHub Copilot and Open AI 🤖.

The program has a minimal beautiful interface, making software nowadays excel in simplicity, away from complexity 🖥️.

It also provides the feature of Live Coding Collaboration and a Chat Window where you can communicate with your team through typing and voice, similar to Discord, all built-in 🧑🏻‍💻.

Of course, there aren't as many extensions available as VS Code yet, because what distinguishes VS Code is its web-based nature, making it easy to develop plugins using web technologies like JavaScript. However, the Zed team promises many updates soon.

You can try it out by downloading it from here https://zed.dev/

Stay well 🥰

How To Make Filterable Portfolio With React.js

Ammar Yaser — Fri, 15 Oct 2021 14:01:44 +0000

In the past, it was not easy to control a web application, if you wanted to do a simple function, it required a lot of code, but now with the advancement of technology, it has become easy to do these functions.

So, I’m coming today with the easiest way to make a filterable portfolio by categories using React.js

First, you need to install create-react-app

npx create-react-app my-app
cd my-app
npm start

Now you have created a react app :)

The next step is to create a file called portfolio.js in src/portfolio/portfolio.js
And configure it in the App.js file

import React from 'react';
import { BrowserRouter as Router, Switch, Route } from "react-router-dom";

import Portfolio from "./pages/Portfolio/Portfolio";

function App() {

  return ( 
    <div className="Main">

      <Router>
        <Switch>
          <Route path="/portfolio" exact component={Portfolio} />
        </Switch>
      </Router>
    </div>
  );
}

export default App;

Now we have an empty file called portfolio.js let’s create the component

import React, { Component } from "react";

class Portfolio extends Component {
    render() {
        return (
            <div>Portfolio Page</div>
        )
    }
}

export default Portfolio;

We need to create states to control the the portfolio

getAllPortfolio: contain all the portfolio items
portfolio: contain the current state of portfolio (on category change)
categories: contain our categories
selectedCategory: contain the selected category

import React, { Component } from "react";

class Portfolio extends Component {
    state = {
        getAllPortfolio: [
            {
                id: 1,
                name: "Project 1",
                category: "Devices"
            },
            {
                id: 2,
                name: "Project 2",
                category: "Accessories"
            },
            {
                id: 3,
                name: "Project 3",
                category: "Devices"
            },
            {
                id: 4,
                name: "Project 4",
                category: "Tools"
            },
            {
                id: 5,
                name: "Project 5",
                category: "Fruits"
            },
        ],
        portfolio: [],

        categories: ["All", "Devices", "Accessories", "Tools", "Fruits", "Shoes"],
        selectedCategory: "All",
    };
    render() {
        return (
            <div>Portfolio Page</div>
        )
    }
}

export default Portfolio;

Now this is the time that we will make these states work together and perform the action, we will write a function filterItems()

filterItems = (e, category) => {
    e.preventDefault();

    if (category === "All") {
      this.setState({
        selectedCategory: category,
        portfolio: this.state.getAllPortfolio,
      });
    } else {
      this.setState({
        selectedCategory: category,
        portfolio: this.state.getAllPortfolio.filter(
          (item) => item.category === category
        ),
      });
    }
  };

Then, let’s render our elements to the DOM

render() {
        const portfolioItems = this.state.portfolio.map((item) => (
            <div className="work" key={item.id}>
                <h3>{item.name}</h3>
                <span>{item.category}</span>
            </div>
        ));

        const categoriesList = this.state.categories.map((cat) => (
            <a
                href="#"
                className={cat === this.state.selectedCat ? "active" : ""}
                onClick={(e) => this.filterItems(e, cat)}
            >
                {cat}
            </a>
        ));

        return (
            <div className="Portfolio">
                <div className="all-content">
                    <section>
                        <h3>Portfolio</h3>
                        <div className="categories">{categoriesList}</div>
                    </section>
                    <div className="works">
                        <div className="row">{portfolioItems}</div>
                    </div>
                </div>
            </div>
        );
    }

I hope you like it and learn something new :)
You can follow me on Twitter, Behance, Dribbble, GitHub