DEV Community: Nasser El Idrissi

NeoHtop: A Cross-Platform Activity Monitor Written in Svelte and Tauri🚀

Nasser El Idrissi — Sat, 09 Nov 2024 21:04:31 +0000

Hey everyone! I’m excited to share with you NeoHtop, a new Cross-Platform Activity Monitor that I built using Rust, Svelte, and Tauri. Inspired by classic tools like Htop, NeoHtop combines modern design with the responsiveness of Svelte for a clean, powerful user experience.

Key Features:
Modular and Customizable: Tweak it to your needs with various modules for resource monitoring.

Cross-Platform: Fully compatible with Windows, macOS, and Linux, so you can keep your favorite tool across systems.

Modern UI: Uses Svelte for a smooth and intuitive interface.

Performance-Focused: Built with Rust, offering reliability and efficiency without sacrificing speed.

Themable: VSCode inspired theming system.

and many more to discover by yourself

Github https://github.com/Abdenasser/neohtop
Website https://abdenasser.github.io/neohtop/

A fun story about coding

Nasser El Idrissi — Wed, 06 Nov 2024 13:32:27 +0000

It all started on a lazy Sunday afternoon. You know those days when you’re just scrolling mindlessly through Twitter, and your browser starts acting up? Yeah, one of those. My ARC browser was being particularly dramatic that day, probably throwing a tantrum because I had about 47 tabs open (don’t judge, we all do it - that’s why we switched to ARC in the first place, right?).

So there I was, desperately trying to figure out why my RAM was disappearing faster than free pizza at a developer meetup. I opened Activity Monitor, but come on - its interface looks like it was designed in the era when people still debated tabs vs spaces. That’s when nostalgia hit me, and I found myself missing the clean, terminal-based beauty of htop from my Linux days.

“Let me home brew a htop (I don’t have it installed on my mac, like seriously? during my career I used monitoring tools like top, htop, 3 or 4 times and I’m not even kidding, like what the fuck I’d need them for? 🤷‍♂️), then I thought wait is there a decent gui alternative for macOS,” I thought. Big mistake. Or maybe the best mistake ever?

After browsing through some alternatives that looked like they were designed when dial-up internet was still cool 💾, I had what alcoholics call a “moment of clarity”: “Hey, I’ve been meaning to learn Rust, and everyone’s talking about this Tauri shit… and I don’t want to build the next 1 billion dollar todo list app 🤔”

“How hard could it be to build a system monitor? It’s just numbers going up and down, right?”

Oh, sweet summer child.

First stop: The Rust book. You know, the one everyone says you should read cover to cover before even thinking about writing “Hello, World!” I made it halfway through, just enough to understand ownership and borrowing (which is like learning about relationships in therapy - it’s all about who owns what and who’s just borrowing feelings), and that Traits are basically Rust’s way of doing interfaces like in Go. Then I had my second moment of clarity: “Wait a minute, Rust is a systems language… there’s gotta be a crate for system stuff, right?”

Turns out, there were like fifty of them. But hey, decision paralysis is just part of the modern developer experience, right?

Now for the frontend. Tauri is framework-agnostic, which means I could’ve used React or Angular. But let’s be real - shipping your app with React is like bringing an entire orchestra when all you needed was a kazoo. Plus, I’ve got principles, dammit! That’s when I remembered Svelte, that beautiful compiler-first framework that React developers are now trying to copy with their “compiler magic” (How’s that for innovation, Zuck?).

The first iteration was… functional. Basic Tauri invokes were working (just sprinkle invoke() everywhere like it’s fairy dust ✨), but it looked about as exciting as a terminal running ping. And if we’re making a GUI (and not shipping an entire Chromium instance like some other electron-ic frameworks I could mention - yeah, we’re using native webview because we’re not monsters), it better look good. That’s when the icon adventure began…

I spent THREE DAYS just trying to figure out how to get proper icons for processes. THREE. DAYS. The solution? A weird combination of SimpleIcons and some regex magic that I’m pretty sure summoned a minor demon in the process.

But then something magical happened. The UI started coming together, and it actually looked… good? The dark mode wasn’t burning my retinas (looking at you, htop), and the performance metrics were dancing across the screen like they were at a disco.

You see, I’d been spending way too much time on Reddit looking at those fancy neofetch screenshots that cool kids keep sharing (you know the ones - where their terminal looks cooler than most people’s entire desktop setup). That’s actually what inspired the name “NeoHtop” - a little nod to neofetch and its aesthetic-obsessed community. But why stop at just pretty colors?

That’s when it hit me - if developers can spend hours customizing their code editors 🎨, why not let them do the same with their system monitor? Making the app themable wasn’t just about looking pretty; it was about giving users that same dopamine hit they get from perfectly customizing their VS Code setup. (And let’s be honest, we all know at least one developer who spends more time theming their editor than actually coding.)

I threw in some fancy animations, because why not? If we’re monitoring system resources, might as well do it with style. The irony of potentially using more resources to monitor resources was not lost on me.

And I kept going! Because apparently, I can’t leave well enough alone. I added search functionality (because scrolling is so 2023), filtering by status (for those who really need to know which processes are “sleeping” - you know, like we all wish we were), and even pagination (why would an activity monitor need pagination, you ask? Well… I asked myself the same question, but couldn’t come up with a good reason why NOT to add it 🤷‍♂️).

I even wrote a few posts about it on Reddit and dev.to, with a little help from ChatGPT (because who has time to write coherent sentences when you’re busy adding unnecessary features? 🤪). That backfired a bit when some keyboard warrior on dev.to decided to call me out for using ChatGPT - which I hadn’t even denied! But karma works in mysterious ways: the post got so popular that dev.to blessed me with some admin superpowers. Let’s just say certain negative comments found themselves taking a journey to the bottom of the thread. Hey, with great power comes great… ability to reorganize comments? 😈

Then came the real “oh shit” moment. Thanks to Marouane (my friend and coworker who I’ll never forgive for this), I decided to post it on GitHub, thinking “maybe a few people will find it useful.” You know, the usual: mom, my puppy, and that one friend who stars everything I post.

But apparently, I wasn’t the only one who thought Activity Monitor needed a glow-up ✨. Within 24 hours, the stars started rolling in. By day six, we hit 1,000 stars 🌟. My notifications were going crazy, and my impostor syndrome was having the time of its life…and started asking myself what is this madness? what am I doing with my life? Am I going to spend the rest of my life replying to peoples issues on GitHub? I mean, I love open source and all, but I had a life too! and a little kid to take care of! and a wife! and a house! and a mortgage! and a cat! and a dog! and a life! what the kind of shit I stepped into now?.. anyways it’s just a little tool right? not like I’m building the next big thing here…a bit of a stretch, but ok.

The best part? People actually started using it! Real people! And they were sending PRs and opening issues for suggestions.. stupid ones but also lot of good ones too!

And here we are now, with a full-featured system monitor that started because Arc was being a memory hog for the first time in months. The moral of the story? Sometimes the best projects come from the most mundane problems. it not really about the project, it’s about the process.. the experience.. the journey.. the lessons.. the people.. the laughs.. the memories.. what the fuck am I doing with my life? what memories? what laughs? what lessons? what journey? what process? what project?… just kidding, it’s about the learning by doing.

P.S. If you’re wondering about the version history (spoiler: there were a lot of “fix typo” commits hidden in the commit history under other commits messages like “updating dependencies”, “updating icons”, “updating download links”, etc.):

Yeah, we’re at 1.0.5 now. Each version bump represents at least one “it works on my machine” moment and several sips of coffee.

Remember kids: Sometimes the best way to learn new tech is to build something you need, even if you end up way over your head. Just make sure to add some nice animations – they hide the pain of debugging memory leaks. And if you’re going to name your project after something, might as well pick something that the cool kids are already hyping up on Reddit! 😅

P.S.S. If you’re wondering how I’m writing this post, remeber I’m not using ChatGPT for this one.. with great power comes great responsibility.

Give NeoHtop a try, it’s free and open source: NeoHtop on GitHub

I love Rust/Tauri & Svelte

Nasser El Idrissi — Fri, 01 Nov 2024 13:41:35 +0000

Hey DEV community! 👋 I recently built a native task manager for macOS that brings the htop experience to the desktop. After sharing it on Reddit and getting amazing feedback, I wanted to share what I learned here as well.

The Project: NeoHtop

NeoHtop is a modern, native process monitoring tool that combines the power of terminal-based system monitors with a clean, desktop-native UI. Check it out:

🔗 Website
💻 GitHub Repo

Key Features

🚀 Real-time process monitoring
💻 CPU and Memory usage tracking
🎨 Beautiful, modern UI with dark/light themes
🔍 Process search and filtering
📌 Pin important processes
🛠 Process management (kill processes)
🎯 Sort by any column
🔄 Auto-refresh system stats

and more...

Tech Stack & Architecture

For this project, I went with a Rust and Tauri backend paired with a Svelte frontend. The backend uses the fantastic sysinfo crate to collect system metrics efficiently. What I love about this combination is how Rust handles all the heavy lifting - from process monitoring to CPU/Memory calculations - while Tauri seamlessly bridges the gap between native capabilities and web technologies.

On the frontend side, Svelte has been a joy to work with. Its reactive nature made it perfect for building the UI components that need constant updates. I particularly enjoyed implementing the themes switcher and integrating SimpleIcons to give each process a distinctive visual identity.

Technical Challenges & Solutions

Building NeoHtop came with its fair share of interesting challenges. Performance was the biggest one - keeping everything smooth while updating multiple processes in real-time isn't trivial. The solution came from leveraging Rust's efficiency for heavy computations and establishing a fast IPC bridge to the frontend.

The most... interesting part? Dealing with Apple's certification process 😅. Between code signing, notarization, and configuring entitlements, it felt like navigating a maze. But hey, it was a great learning experience!

Lessons Learned

This project really opened my eyes to the power of Rust and Tauri for desktop applications. The developer experience was fantastic, and the performance speaks for itself. Svelte's simplicity made frontend development a breeze, though I learned to be extra careful when dealing with native APIs, especially on macOS.

What's Next?

I'm excited about the future of NeoHtop! I'm planning to add Linux support, implement more process management features, and include detailed system metrics. Network usage monitoring is high on the priority list too. I'm also planning to write a detailed technical article diving deep into the implementation details, especially around performance optimization and the IPC bridge.

Join the Journey!

I'd love for you to try out NeoHtop and share your thoughts. Have you built desktop apps with Tauri? How was your experience with Rust in desktop development? Let's chat in the comments!

Stay tuned for my upcoming technical deep-dive article where I'll break down the architecture and share some code snippets! 🚀

Try It Out!

📥 Download NeoHtop
⭐ Star on GitHub

10x django developer

Nasser El Idrissi — Fri, 03 Sep 2021 18:57:57 +0000

if you are wondering what this is using here is the package and don't forget to support it by dropping a star ⭐

github repo: dr_scaffold

tutorial: make a full api in seconds

My personal django rest framework serializer notes

Nasser El Idrissi — Thu, 02 Sep 2021 09:46:03 +0000

Before today it was only me and God who can read my hand writing, but today it is only God who can... today I got stuck reading one of my DRF drafts about serializers and decided that it's that time of the year again where I start thinking that I should have a blog where I can save my notes -then forget about it again-, but as I already got a blog I said why not 🤔 ? ... let's create a digital copy of my drf serializer notes, maybe someone will find it useful.

save time creating django apis with this cool django package, and support the repository by dropping a star ⭐

Let's define an Index or a table of content that we can use as reference in the future.

Table of content

1 - Fields
  --------------------------
  - Serializer Method Field
  - Read Only Field
  - Custom Field Validation
  - Using Multiple Serializers
  --------------------------
2 - Data
  --------------------------
  - Custom Data Validation
  - Custom Output with `to_representation`()
  - Custom Input with `to_internal_value`().
  - Pass additional data directly to `save()`
  --------------------------
3 - Keywords
  --------------------------
  - The `source` Keyword
  - The `context` Keyword

1- Fields

Serializer Method Field

This is a read-only field. It gets its value by calling a method on the serializer class it is attached to. It can be used to add any sort of data to the serialized representation of your object.

SerializerMethodField gets its data by calling get_<field_name>.

Example:

class UserSerializer(serializers.ModelSerializer):
    days_since_joined = serializers.SerializerMethodField()

    class Meta:
        model = User
        fields = '__all__'

    def get_days_since_joined(self, obj):
        return (now() - obj.date_joined).days

Read Only Field

Read-only fields are included in the API output, but should not be included in the input during create or update operations. Any read_only fields that are incorrectly included in the serializer input will be ignored.

Example:

class AccountSerializer(serializers.Serializer):
    id = IntegerField(label='ID', read_only=True)

Custom Field Validation

Validation in Django REST framework serializers is handled a little differently to how validation works in Django's ModelForm class.

With ModelForm the validation is performed partially on the form, and partially on the model instance. With REST framework the validation is performed entirely on the serializer class.

Let's take an example where we want to only allow students that have age between 12 and 18:

class StudentSerializer(serializers.ModelSerializer):
    ...
    def validate_age(self, age):
        if age > 18 or age < 12:
            raise serializers.ValidationError('Age has to be between 12 and 18.')
        return age

Using Multiple Serializers

You can override the get_serializer_class() of your ViewSet when for example you want to use a different Serializer in your create and update actions like the following:

class MyViewSet(viewsets.ModelViewSet):
    queryset = MyModel.objects.all()

    def get_serializer_class(self):
        if self.action in ["create", "update"]:
            return WriteSerializer
        return ReadSerializer

2- Data

Custom Data Validation

Besides Custom Field Validation, there are two additional ways we can use to validate our data, when for example we need to compare some of our fields between each other the best way to do that is on the object level.

example:

class OrderSerializer(serializers.ModelSerializer):
    ...
    def validate(self, data):
        if data['discount_amount'] > data['total_amount']:
            raise serializers.ValidationError('discount cannot be bigger than the total amount')
        return data

Another good way to do validation is when a validation logic is repeated multiple times in some serializers, you can then extract it to a function, example:

def is_valid_age(value):
    if age < 12:
        raise serializers.ValidationError('age cannot be lower than 12.')
    elif age > 18:
        raise serializers.ValidationError('age cannot be higher than 18')

Then you can pass it like this in the other serializers:

class AnotherSerializer(serializers.ModelSerializer):
    age = IntegerField(validators=[is_valid_age])

Custom Output with `to_representation()`

When you want to customize the output right before it is sent use to_representation(), imagine you have an output like the following after serialization is completed:

{
  "id": 1,
  "username": "abdenasser",
  "bio": "Hey ... you already know!",
  "followed_by": [2, 3]
}

and you want to add a total followers count to it... you can simply do:

class ResourceSerializer(serializers.ModelSerializer):
    ...
    def to_representation(self, instance):
        representation = super().to_representation(instance)
        representation['followers'] = instance.followed_by.count()
        return representation

Then you'll get:

{
  "id": 1,
  "username": "abdenasser",
  "bio": "Hey ... you already know!",
  "followed_by": [2, 3],
  "followers": 2
}

Custom Input with `to_internal_value()`

Let's say that your API is expecting some input from a 3rd party service and you are only interested in a chunk of that input, you can use to_internal_value() as follow:

class SomeSerializer(serializers.ModelSerializer):
    ...
    def to_internal_value(self, data):
        useful_data = data['useful']
        return super().to_internal_value(useful_data)

Pass additional data directly to save()

Calling .save() will either create a new instance, or update an existing instance, depending on if an existing instance was passed when instantiating the serializer class:

# .save() will create a new instance.
serializer = CommentSerializer(data=data)

# .save() will update the existing `comment` instance.
serializer = CommentSerializer(comment, data=data)

3- Keywords

The source Keyword

In essence, you can use source in a field like this

field_name = serializers.SomeFieldType(source='prop')

where prop could be a call for a function that return some value, or a property that exists in a related model like ...(source='author.bio') or even a serializer field that you want to rename in output.

You can also attach the whole object with source='*' if you need.

The context Keyword

You can provide arbitrary additional context by passing a context argument when instantiating a serializer. For example:

resource = Resource.objects.get(id=1)
serializer = ResourceSerializer(resource, context={'key': 'value'})

The context dictionary can then be used within any serializer field logic, such as a custom .to_representation() method, by accessing the self.context attribute.

def to_representation(self, instance):
    representation = super().to_representation(instance)
    representation['key'] = self.context['key']

    return representation

Final word:

Django Rest Framework has a very good documentation which you can find and read here, try to spend some time on it and use it as a fall back any time you feel that things started getting complicated in your serializers, also bare in mind that while you are using serializers you are most of the time using, overriding or extending the base serializer functionalities so go check it out and take a look at it here.

Scaffold django apis like a champion

Nasser El Idrissi — Wed, 25 Aug 2021 10:58:42 +0000

Hey ✋ my name is Abdenasser I'm the creator of this little django scaffold generator https://github.com/Abdenasser/dr_scaffold and today I'm gonna show you how to use it to create ready to use and fully functional REST apis with django only using the command line, let's get started.

Setting a django environement is outside of the scope of this article, I'm sure there's a lot of guides and tutorials on how to do that all over internet you can follow one of them and get back, we'll be waiting just right here!

In a nutshell here is the tasks we gonna do through this article:

Create a django project
Setup djangorestframework and dr_scaffold
Scaffold a blog api with Articles and Authors
Enjoying 🎉

1. Create a django project:

Le't create a django project using this django-admin command:

$ django-admin startproject myApi

this command does the same as python manage.py startproject myApi

Let's then cd to our newly created django project cd myApi and create a virtualenv with:

$ python3 -m virtualenv env

Finally let's activate our virtual env with:

$ source env/bin/activate

2. Setup djangorestframework and dr_scaffold:

Let's install django rest framework and dr_scaffold packages using pip like the following:

$ pip install djangorestframework
$ pip install dr-scaffold

Next let's add these packages to our project INSTALLED_APPS inside myApi/settings.py like this:

INSTALLED_APPS = [
    ...,
    'rest_framework',
    'dr_scaffold'
]

Then let's add our core and api folders settings to myApi/settings.py, (for the simplicity of the tutorial we'll leave them empty):

CORE_FOLDER = ""  # you can leave them empty
API_FOLDER = ""   # or set them to be the same

3. Scaffold a blog api with Articles and Authors

Our blog api will be composed of two main resources an Article and a Author.

Let's scaffold our Author first:

$ python manage.py dr_scaffold blog Author name:charfield

🎉 Your RESTful Author api resource is ready 🎉

this command will generate a blog folder with models.py
admin.py views.py serializers.py urls.py all populated with appropriate code that your REST api needs for Author resource

Lets also generate the Article resource:

$ python manage.py dr_scaffold blog Post body:textfield author:foreignkey:Author

🎉 Your RESTful Post api resource is ready 🎉

this command will do the same thing but also will add a relation to our Author resource through a foreignkey field.

In order to generate the database tables let's add blog to our INSTALLED_APPS inside myApi/settings.py:

INSTALLED_APPS = [
    ...,
    'rest_framework',
    'dr_scaffold',
    'blog'
]

Then let's run these commands to generate our migrations and migrate the database:

$ python manage.py makemigrations
$ python manage.py migrate

Finally add our blog to our project's urlpatterns inside myApi/urls.py:

urlpatterns = [
    ...,
    path("blog/", include("blog.urls")),
]

Don't forget to import include in your project's urls.py like so :

from django.conf.urls import include

Your urls.py should look something like this in the end:

from django.conf.urls import include #our added import
from django.contrib import admin
from django.urls import path

urlpatterns = [
    path('admin/', admin.site.urls),
    path("blog/", include("blog.urls")), #our added bol path
]

Now run python manage.py runserver and head over to http://127.0.0.1:8000/blog/ to see your fully created REST blog API.. and also you can generate a super user with python manage.py createsuperuser then head over to http://127.0.0.1:8000/admin to check the admin panel.

Don't forget to star the repo on github If you like it.. Enjoy 🎉 !