DEV Community: Mateus Abelli

The History API in 256 characters!

Mateus Abelli — Thu, 21 Mar 2024 12:00:00 +0000

This is a submission for DEV Challenge v24.03.20, One Byte Explainer: Browser API or Feature.

Explainer

Move back and forward between your page history! All you need is access to the window global object then call history.forward() or history.back(), but you can also jump to a specific index with history.go(2), use history.length to see the total of entries.

Additional Context

I picked this one for the challenge because I knew it would not be very complex to write in a tutorial format. I used MDN as reference and charactercountonline to count the characters while composing the text.

I hope this packs enough info to actually help you learn about the history API, it is indeed that simple.

Cover Art created with GIMP
Photo by Suzy Hazelwood at Pexels

Thanks for reading!

#DEVResolutions2024

Mateus Abelli — Wed, 31 Jan 2024 02:50:15 +0000

I'm a bit late to the party but here it is my dev resolutions for 2024.

Professional Goals:

Goal: Learn C# ASP.NET Core, SQL Server and Azure.
Action Steps: Study on Microsoft Learn and YouTube.
Timeline: I think within 3 months I'll be able to develop some cool projects.

Personal Aspirations:

Aspiration: This year I'd like to take better care of my health.
Why it Matters: Coding all day could be a fun and cool activity but not so cool on your body.
Support System: I'm starting to play with a small ball outside at least a few minutes a day.

DEV Community Contributions:

Contribution Goal: Although I'm not a good writer, posting on DEV seems like an awesome goal but I'm probably going to contribute to the FOREM project on GitHub.
Collaboration Plans: I'd like to help enhance the experience for other members, fix bugs and close some issues.
Measuring Impact: The amount of PR's merged seems like a good way to measure it.

File transfer through SSH is easy!

Mateus Abelli — Sun, 20 Aug 2023 18:51:42 +0000

For newcomers, SSH itself might look hard at first and file transferring even more complicated. How to connect to a remote machine to send or copy files from it?

I'm going to show you that it is not as complicated as it looks. As a matter of fact, it's quite easy!

First let's define the appearance of our remote connection for our examples:

User: dev
Address: 123.45.67.89

Replace it with your real remote machine connection while following the examples

The interactive way

Let's use the SSH File Transfer Protocol, or SFTP.

With this tool, we connect to our remote machine and use it with a bash-like shell. Let's see how it works:

sftp dev@123.45.67.89

With SFTP we rely on file browsing to either receive or send files, after opening our connection let's explore the remote and local working directories.

Inside the remote we can navigate freely using cd and ls commands. See all available commands with help.

sftp> pwd
Remote working directory: /home/dev

sftp> lpwd
Local working directory: /c/Users/User

Sending files from 💻 local machine to the 🌐 remote machine:

sftp> put # Press Tab
myfile1.txt 
myfile2.txt

sftp> put myfile2.txt # 👈 Send myfile2.txt to the remote working directory

Receiving files or folders from 🌐 remote machine to 💻 local machine:

sftp> ls
file1.txt
file2.txt
folder

sftp> get file1.txt # 👈 Gets file1.txt to the local working directory

sftp> get -r folder
        # 👆 To get an entire directory

The non-interactive way

We will be using the Secure Copy Protocol, or SCP.

It's a nice and quick way and all it takes is a ssh-like command with the file paths, a login prompt and there you go!

Sending files from 💻 local machine to the 🌐 remote machine:

scp ./file.txt dev@123.45.67.89:/home/dev/file.txt
    # 👆 Your local file path   👆 Where to place it on the remote

Receiving files or folders from 🌐 remote machine to 💻 local machine:

                                      # 👇 Where to place it on the local
scp dev@123.45.67.89:/home/dev/file.txt ./file.txt
                  # 👆 The remote file path

scp -r dev@123.45.67.89:/home/dev/folder ./folder
  # 👆 To copy an entire directory

Although this is an easy way for a quick file transfer there are some caveats.

According to OpenSSH developers in April 2019, SCP is outdated, inflexible and not readily fixed; they recommend the use of more modern protocols like SFTP and rsync for file transfer.[3] As of OpenSSH version 9.0, scp client therefore uses SFTP for file transfers by default instead of the legacy SCP/RCP protocol.[4

— Wikipedia

Conclusion

As you can see, file transferring through SSH is not that hard. There are a few methods to accomplish it and after you get used to it, it's just like doing a regular connection.

Now you can get that file or send it to your remote box, have fun!

Attributions and Sources

Prompteer - AI Prompts & Engaging comments

Mateus Abelli — Thu, 20 Jul 2023 00:13:02 +0000

🧪 What I built

I built a prompt sharing platform where users can share their AI prompts and receive comments

🥗 My recipe

nextjs, because a great SaaS needs server side rendering
typescript, to stay safe from the javascript horrors
next-auth, to make authentication with nextjs nice and easy
prisma, to make databases best friends with frontend devs
supabase, to store all the data consumed by the app
refine, to easily handle and manage the app's CRUD operations
material-ui, for a streamlined look and feel

🏆 Category Submission:

Best Overall Project
Most Visually Pleasing
Most Technical Impressive
Best Project built using Supabase as the main data provider for the refine app.
Best Project built using Material UI as the main UI framework for the refine app.

🔗 App Link

https://prompteer.netlify.app/

🖼 Video demonstration

2023-07-18 20-20-08.mkv - Google Drive

drive.google.com

🖼 Screenshots

Prompt listing page

View prompt page

Create prompt

📋 Description

Prompteer is a web app that allows you to share your creative AI prompts and receive feedback through comments, you can also comment on other peoples prompts.

In the Free plan you're allowed to publish prompts containing a title, the prompt itself, choose the AI Model and language written. Upgrading your account the Pro plan unlocks additional fields to write your prompts, such as Parameters and Details.

The app uses OAuth (GitHub or Discord) to sign in new users, and when it's their first sign in, the app automatically creates a stripe customer based on the email from OAuth. After a successful login, the user is presented with a dashboard-like experience provided by the refine framework. Most of the content are built upon the framework so the development went way faster than starting from scratch.

🔗 Link to Source Code

https://github.com/mateusabelli/prompteer

📜 Permissive License

💭 Background

I watched a tutorial from Javascript Mastery where it showed how to make a similar web app so I wanted to do it on my own, when I started doing the design in Figma I saw the Hackathon and decided to hop try to make this a fully fledged SaaS. Looking back at it, it kind of holds up to my expectations, even though I had to cut a few features due to time constraints.

📚 How I built it

refine was great to provide the dashboard-like experience, and I learned a lot of things, I documented most of my progress in my previous post. The tech stack that I used can be seen at the top. Most of my choices didn't had planned reasons, some of them were to just "work" when something else didn't.

Development Updates #RefineHackathon

Mateus Abelli — Mon, 03 Jul 2023 00:10:38 +0000

👋 Hello there

I'm Mateus and this is my development progress during the Refine + DEV Hackathon.

This post is going to be huge due the reference links and images. For the first time I'm going to try to give you (the reader) a close feeling to my progress and research. Hope you enjoy.

I'm going to try to keep these updated day by day but during busy weeks it won't be possible, if that happens I'll provide a summary with a date range during the events.

✨ The project

Here is an overview of what I'm building and know so far.

The app will be called Prompteer
It will be a platform where you can share you creative AI prompts
The app will be a fully fledged SaaS, with free and paid subscriptions
The UI/UX will be the best among other prompt platforms

🥗 My recipe

nextjs, because a great SaaS needs server side rendering
typescript, to say safe from the javascript horrors
next-auth, to make authentication with nextjs nice and easy
prisma, to make databases best friends with frontend devs
supabase, to store all the data consumed by the app
refine, to easily handle and manage the app's CRUD operations
material-ui, for a streamlined look and feel

📅 June 23rd to 25th

Initial design and general app ideas, brainstorming and design study phase. Using multiple references, I came up with a basic black and white and full of Lorem Ipsums figma file.

🔗 References:

📅 June 26th to 30th

Studying the refine framework and how to work with it, had a rollercoaster of emotions in this phase, frustration and excitement went side by side.

🔗 References:

📅 July 1st

I managed to do a proper auth setup using next-auth and Supabase. People can now sign in using GitHub or Discord and their data will be stored on the database. I chose OAuth because by default I’m going to get a name and profile picture in most cases, this is good to populate my UI.

🔗 References:

📅 July 2nd

I integrated Stripe with my previous auth setup and database. People can now sign in to their accounts and go to the pricing page, pick a plan and go to the checkout page, pay and be redirected back to the app. Everything is in sync! I would not be able to do this whole process if it wasn’t for a wonderful DEV post linked down below.

🔗 References:

📅 July 3rd to 10th

I created the prompts table on the database and other supporting tables such as languages, because you will be able to write cool prompts in different languages, along side the languages table, a comments table and an ai models table were also created. A lot of relationships were built. Some redesign were made to the UI, now it looks cleaner and more intuitive. I also accepted that I won't be able to finish this project to its fully desired result and that's okay.

🔗 References:

📅 July 11th to 15th

In this phase I’m focusing on the major features such as creation and deletion of prompts, comments, the subscription of paid plans and the overall UX. At this point I’m not worried about optimizing my code, it’s a mess but a functional mess, and hopefully my spaghetti code provides a good experience for anyone who tries to use the app. I’m still fighting with the entire stack but I do have some fun at random moments. I thought it would never happen to me but I suffered with the horrors of dates in javascript.

Here is a summary of what is possible to do in the app at this point:

View a nice home, pricing and about page
Sign in with OAuth
Purchase a paid subscription
Publish and delete prompts
Write and delete comments on prompts

🔗 References:

📅 July 16th

I’m wrapping up the development for the final release, I had to eliminate a few features due to the time constraint but the whole app is working as expected, except for the search bar and some filters.

Today I pushed through some final touches on the front pages, stripped a few visual features away from the dashboard and polished some interactions, such as the paid subscription. I also created a seed script for the DB, now it’s easier to populate the app with some data.

🔗 References:

📅 July 17th to 18th

This is my last update, I've frozen the code updates and limited the changes only for small refactoring and some cleanup.

Introducing Pull Request Tracker - A GitHub Action

Mateus Abelli — Wed, 17 May 2023 21:54:48 +0000

🧪 What I built

A GitHub Action that will help maintainers keep track of new Pull Requests by giving them detailed information if someone might be trying to push similar or duplicate changes.

🏆 Category Submission:

Maintainers Must-Have: Make the lives of Open Source maintainers easier.

🔗 App Link

https://github.com/marketplace/actions/pull-request-tracker

🖼 Screenshots

💬 Description

Pull Request Tracker is a GitHub Action to easily track similar or duplicated PRs. It runs automatically whenever someone opens a new PR and scans all open PRs for different patterns. The output is a detailed comment with useful information including diff links in case of detected conflicts.

🔗 Link to Source Code

https://github.com/mateusabelli/pr-tracker

📜 Permissive License

Pull Request Tracker is free and open-source software licensed under the MIT License.

👨‍💻 Background

What made you decide to build this particular app? What inspired you?

My initial idea was to create a tool that could identify if someone is opening a PR that makes the same or similar changes of other contributors with open PRs. To achieve this, I planned three major modules, one for checking pulls, checking conflicts and one for checking hunks.

⚙ How I built it

How did you utilize GitHub Actions or GitHub Codespaces? Did you learn something new along the way? Pick up a new skill?

I created this project as a composite action, at the beginning I wanted to try making a JavaScript action but I've always felt like the features were easily executed from the command line or using the GitHub CLI gh. So that's when decided to go with a composite action running a few shell scripts.

I didn't know how to use shell before, but it felt like a very simple and flexible scripting language, everything that I attempted to do with it, kind of worked, specially integrating the usage of CLI tools, using grep and even some JS code with node.

I learned about GitHub Actions, Shell scripting, a basic usage of GraphQL, the awesome GitHub API, the powerful GitHub CLI gh, and I also wrote my best README so far.

🔎 Additional Resources/Info

These videos helped understand GitHub Actions:

Thanks for reading. Have a nice day!

Make images responsive to light/dark mode on GitHub

Mateus Abelli — Wed, 17 May 2023 18:26:06 +0000

Introduction

Hello there, today I'd like to share with you something that I've been using lately on my READMEs to have my images responsive the light or dark modes. It's a very simple feature on GitHub but not many people know about it.

Demonstration

Here is the result on my new open source project pr-tracker

How to use it

To use this feature, you are going to need to have two images or URL pointing at your light and dark image versions. In my example I had the following:

.github/
├── demo-dark.png
├── demo-light.png

with Markdown

If you prefer to add your images with Markdown all you need to do is to append #gh-dark-mode-only or #gh-light-mode-only at the end of the URL. Like this:

![Demo-Light](.github/demo-dark.png#gh-dark-mode-only)
![Demo-Dark](.github/demo-light.png#gh-light-mode-only)

with HTML

Or you can use the <picture /> tag with the new media feature, specifying the value (prefers-color-scheme: dark) or (prefers-color-scheme: light) like this:

<picture>
  <source
    srcset=".github/demo-dark.png"
    media="(prefers-color-scheme: dark)"
  />
  <source
    srcset=".github/demo-light.png"
    media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)"
  />
  <img src=".github/demo-light.png" />
</picture>

Sources

I didn't figured this on my own, the first time I learned about this feature was through the github-readme-stats project, under the responsive-card-theme section, it showed examples that I've used in my profile README and I've been also using on repositories as well.

The cover image used belongs to the first link below.

Useful links:

Questions

Have you ever seen this feature before?
Have you ever used this before?
Do you have plans to apply this feature somewhere?

Thanks for reading. Have a nice day!

My Progress #GitHubHack23

Mateus Abelli — Fri, 28 Apr 2023 01:39:16 +0000

26/04 - First idea

I received an email from DEV in the morning and was happy to read about a new Hackathon that had just begun. My initial thoughts went wild, so many possibilities and ideas but only one was left.

A GitHub Action called diffcool and the tag line would be something like “Because diff should be cool not difficult”. I loved this project! but when the time to think of a more practical concept for production came, I hit a wall. My cool project, the way I imagined it suddenly didn’t quite fit on the category that I wanted to participate in.

It was a though hour to circle around new ideas, even ChatGPT wasn’t being helpful. I needed something unique. After researching previous Hackathons, other GH Actions and refining my thoughts using my previous failure. I came up with a new idea, this is going to fit and it’s going to awesome.

27/04 - Initial steps with GraphQL

I thought that going through pages and pages of documentation would be a pain, but GitHub provides such an awesome tool called Explorer, from this I managed to quickly learn how to query and assemble pieces of information needed for my project.

I managed to get my first feature from drawings and imagination to a more practical concept through a few GraphQL queries, it doesn’t work yet but those queries being integrated together could really turn my feature into reality.

28/04 - My first Action

I completed the practical concept for most of the features, on some of them I resorted to use the good an old git command, I hope it’s not too tricky to combine API calls with “local” commands during the Action workflow run.

After planning for a while (not done yet) it was time to get to know how it was to build the actual GitHub Action. I’ve found this awesome video by Tug on Dev! that really simplified the entire process of creating the action and testing it, the development felt surprisingly simple.

01/05 - Interesting turn of events

After looking for more learning resources I’ve found another great video by glitch.stream on YouTube, this time it was full course on Actions with CI/CD pipelines but I had to skip some of this stuff to focus more on how the runners worked, and also to avoid falling again into tutorial hell.

I finally started the actual development of my own Action and since I’ve exposed to so many different ways to build and consume then, I ended up with bash. It’s not what I’ve been planning to use, but it seems very flexible to use, it’s so flexible that I’ve managed to integrate the gh CLI for GraphQL queries and also run a bit of JavaScript with node inside a single Bash script file.

04/05 - It works

From a bit more than a week ago to today I can finally say “It works”. There’s nothing polished yet but with lots of trial and error the core functionality is there.

I’m building a Pull Request Tracker, with 3 planned features, the main one is for checking if there are other PR with the same files, the second one is for checking if there are conflicts in between them and the last one is for checking if there are duplicated hunks among those files.

This is a markdown mock of the contents of the comment that this Action is going to produce

Checks	PR Tracker Status
☑️	3 pull request(s) found with the same file(s)
✅	0 conflict(s) detected among them
✅	0 similar hunk(s) spotted

07/05 - Features development

From my previous report I was left with the check pulls feature done, yesterday I implemented the check conflicts and today it was the check hunks. I definitely moved way faster than when I was pushing the first feature, because this time there is a base do build on top of.

The check conflicts feature basically clones the repo then uses the gh cli command to checkout into the PRs and does a "dry run" of the git merge command to check if there are conflicts in between those branches.

The check hunks is giving a bit more of trouble because it needs to reference the files and from the files their diffs to extract the hunks and compare them. It's giving false positives at the moment so I had to temporarily disable it.

This is a screenshot the current state of the project:

17/05 - v0.0.1-alpha

I did it, yesterday I published the very first version of this project to the GitHub Actions marketplace. It was a long road but this project has finally gone live to the world.

The development so far has not changed a lot from my previous report, I did make some refactoring specially on the comment module, now it's responsible for actually composing the comments with data exported from the other shell modules, instead of receiving a pre-baked comment.

I've just posted the official release post for the Hackathon and I'll be doing a few more tests and updating the code. I hope this project attracts people and be helpful for them.

https://github.com/mateusabelli/pr-tracker

Thanks for reading. Have a nice day!

OmeDEV - Talk to Developers! MongoDB Atlas Hackathon 2022 on DEV

Mateus Abelli — Wed, 07 Dec 2022 02:51:07 +0000

What I built

OmeDEV is an Omegle clone that lets you connect "randomly" with stranger developers to have a nice chat.

Category Submission: Choose Your Own Adventure

App Link

https://omedev.vercel.app/

Demo

Screenshots

Dark theme

Light theme

Description

When you connect with someone, the chats attempts to be anonymous by searching for the first room available, if it does not exist one will be created for you. The next user will automagically be joined in a FIFO style (First in, First out). To prevent predictions on who will be joining theres a random delay applied to each user. Your messages are sent and received through websocket and only the rooms ids are stored in database for no longer than one day.

Link to Source Code

https://github.com/mateusabelli/omedev

Permissive License

MIT

Background

I wanted the build something beyond my current skills, to imagine something and code it into reality, this project has proven me that it is possible and taught me valuable lessons. I choose to do an Omegle clone because it is my first chat application.

How I built it

The chat rooms are stored in MongoDB Atlas. It stores the ID for the Pusher presence channel which allows the app to receive events whenever someone joins or leaves the channel.

I've learned a ton but the biggest lesson was to always try to organize the ideas and plan out before coding. This application was built while I was learning about how everything would work, so there was little to no planning in the project.