DEV Community: FRicardi

Should I stay or should I Go?

FRicardi — Tue, 03 Oct 2023 03:00:00 +0000

One of the thing that has been helping me to keep pushing with my studies is to share them. This is something that makes me stay focused on doing things properly, without skipping steps. So, on this article I will be sharing my thoughts on how it was to learn Go Lang and how I've explored some tools.

What I want?

So, first of all, for you to understand what I was trying to accomplish here, let me introduce myself. On the start of my career, I've worked mostly with landing pages creation with pure HTML/CSS/JS, as well as some simple PHP systems. Later on, spent some time on a Node JS with microservices migration project, and a complex Java Spring based tool. Recently, working almost full time on frontend with React.
To make sure that I will not be retained only to learning the tools I'm currently working, I've started exploring some trending techs and documenting them here. On this article, you can find my thoughts on how it was to work with Svelte (spoiler: I loved it!).
GoLang is something that I've always wanted to check because of its pointer usage, as well as error handling techniques and performance. First of all, I want to know how to make a basic API. Later on, I will try to implement the Rinha de Backend challenge to dive deeper in some topics.

Getting started

To install Go to my system, I've used this great post and the official documentation. The entire setup did not took more than 5 minutes, which is a great starting point.

On the official site, Go has a tour that showcases the functionalities and syntax of the language, using some examples and exercises to make sure that you understood that.

Highlights

The first few concepts were nothing to write home about, mostly present on all languages, so the only thing to take away was how to write it in Go. A really nice thing on the functions is that you can return two (or more) values, which allows you to do a lot of fun things, which we'll talk about later. Other small thing is that switch/case has the break functionality by default on each case.

One remarkable concept is that they use the for loop encapsulates the functionalities of for, do while, while and for each. It is nice to have only one keyword for it, although I can see that as difficult to grasp for beginners. By the time I've ended my proof of concept, it was totally natural to use the for loop.

Being able to use scoped variables on the if clause, combined with functions returning two values makes it work almost as a try/catch block. It took a while for me to adapt to this mindset.

    if data, error := service.GetData(); error == nil {
        fmt.Println(data)
    } else {
        fmt.Println(error)
    }

Now we are getting to my Achilles heel: pointers. It was an alien concept for me when I've learned C. Not because I've didn't understand it, but because I've never got to learn C on real world examples, so I haven't internalized it. On the docs, it seemed straight forward how go uses it, and the preferences to send a reference to an object and assign to it inside a method. For now, seems enough.

The first time I've looked to Arrays in Go I thought I was going to drop the goal of learning this language. Honestly, what the f* are slices? Why would I need an extra abstraction for it? Java all over again...

But fear no more, when the tour start showing how to use slices and how they behave, you understand that there's no need for panicking about it.

Other powerful feature, which I haven't got the chance to use on my POC, was the defer clause. It waits for the method to return before executing the code near to it. I can see it saving my life in some real world cases.

Rest API

On Go official documentation, they have a walkthrough on web services with gin.

It's nice to see that we can create a struct and add properties to it, such as changing their accessors when it is transformed to JSON for RestAPI returns. Since Go uses PascalCase for package accessors, that is specially helpful to maintain consistency.

Other than that, there's not much to say as someone who is already familiar with web services. You create a router, assign HTTP verbs with paths and a method to handle it, and raise the server. To return a value, you can use gin context to return an HTTP status and the data that you want to send to the consumer.

func GetAlbums(ctx *gin.Context) {
    if albums, error := albumService.GetAlbums(); error == nil {
        ctx.IndentedJSON(http.StatusOK, albums)
    } else {
        ctx.IndentedJSON(http.StatusNotFound, gin.H{"message": error})
    }
}

Adding database

First example from the tutorial was with data stored on an array, the next step was to add database access to improve the POC.
The way I've chosen to do it was by creating a global variable on a connector file, and creating a Getter method to access that variable on other places

I've implemented a first version with the raw database connector, using queries, etc. It was not hard, but, as usual when not using an ORM, it was too verbose.

For a final version, I've used GORM, which abstracts a lot the database usage. In my opinion, the final code ended up being quite readable.

connector.go

var db *gorm.DB

func ConnectToDatabase() {
    var err error
    db, err = gorm.Open(sqlite.Open("database.sqlite"), &gorm.Config{})

    if err != nil {
        log.Fatal(err)
    }

    fmt.Println("Connected!")

    db.AutoMigrate(&types.Album{})

    fmt.Println("Migrated successfully!")
}

func GetDB() *gorm.DB {
    if db == nil {
        ConnectToDatabase()
    }

    return db
}

albumService.go

func GetAlbums() ([]types.Album, error) {
    var albums []types.Album

    result := connector.GetDB().Find(&albums)

    if result.Error != nil {
        return nil, errors.New("Could not find albums")
    }

    return albums, nil
}

Conclusion

Starting this session with a shout out to Go team: what an amazing documentation. Gotta show some love to the people maintaining it. It's totally doable to learn the language only from the official docs, from their tutorials, tours and technical doc itself.

The language has a lot of quirks of its own, which is really messy at first sight. I feel that, for most of these, seeing it in action was enough to understand why it is there and what was the thought process of doing it that way.

Error handling and pointers seems to be two of the many things that will make this technology shine and worth choosing on a real use case.

What I've tried to explore the most out of the official tutorials was to create separate files for each concern, such as controllers, services and database connectors. Go packages and their scopes were not hard, but I've stumbled a lot on the beginning, when I've tried to understand what I could and could not access.

Given this, I feel that my first goal was accomplished. And, if I see myself on a situation where I need to use Go, I won't be totally lost and know where to look for some answers. On top of that, Go community seem to be quite supportive and growing, which will help on edge cases.

See you on the next learning endeavors!

You can find the source code of my POC here.

A new way of saying good morning to my dad

FRicardi — Thu, 07 Sep 2023 15:43:40 +0000

Motivation

My dad loves good morning images. Those with happy little animals, whimsical forests and a happy message to start the day. Every morning he receives a lot of them, and forwards to his friends and family.

The problem is that, sometimes, he have to recycle images from other days if he does not receive any new images. Because of that, I want to send him fresh images everyday, with a unique scenery!

Since I am absolutely awful with image editing, what would be better to accomplish that than generating images with Imagine, texts with ChatGPT and overlaying them on Svelte? Let's get to work!

Understanding the AI tools

I've never worked with AI tools before. So, the first thing I've done for this project was to understand how their API's work. For the first version, I choose not to dive deep with the prompts, focusing on integrating the tools. Since OpenAI gives $5.00 as credits, I will be using their ChatGPT to create the texts. But, I did not use Dall-E to generate the images, because I would not be able to test the image prompts on their website for free. Thus, I've used Imagine.

Imagine

On Imagine website, we can test their prompts and modifiers. This helps a lot to understand what each option change and how to use it later. By registering on their website, you receive 50 credits monthly for free.

Their API usage is quite straightforward. It is basically a POST request, pass your token as a bearer on the header, and the parameters as multipart/form data. Prompt and style are mandatory. For the style, we can use their playground to see which one fits better.

Using the parameters that I've found on the playground, I was able to quickly test the API and get similar results.

ChatGPT

Also a very good documentation! Here we are also able to test the requests on their playground, which allowed me to understand how to craft a good prompt to create the message that will go on the image.

To generate something, you will need to pick a model and also add some modifiers to set the tone of the message. Similar to my approach with the images, I retained myself to first get the API going with a simple prompt, and study them further on the future.

The project

With the API's already figured out, the next step is to understand what I would build to integrate it. My idea was to create a simple page that allows the user to generate the image with Imagine, and the tool will ask for a motivational phrase to ChatGPT to place over the image. My choice was to create some arrays of options to generate the prompt.

Generating the content

Message

If you want just to generate something, ChatGPT's library makes that as easy as it can get. You send the prompt and the modifiers that you want, and it responds with an array of completions. In this case, it will be only one response anyways. That way, we can just access the message from the first completion of the response. I've reduced a lot the maximum number of tokens, so it would not use
many credits.

Since the response is deterministic, if you give the same prompt, you will have the same response. Because of that, I've created a basic random prompt generator, that sets the tone of the message. Positivity, blessings, motivational and friendship are some of them. Still need to improve that list so it does not get repetitive over time.

Image

For the image generation, Imagine Art was called via API. With the image returned, got it as a blob and saved it into the static folder.

Crafting the final art

To place the text over the image, I've used Jimp. It was quite easy to use it, the only tricky part was that, to print some text with a font that its not their default ones, it requests a font in bitmap format. They provide some good tools that performs that conversion. So, I've downloaded a font from Google fonts and added the generated bitmap to the project.

Since, with bitmap, the font has only one color, I've used the trick to create text over a transparent image and transform its color to obtain sort of a shadow effect and improve readability.

Results

With the landing page created and all the login set up, we are up and running!

The first image generated with this tool represents very well the objective, with the phrase "Have a good day full of possibilities".

Overall, the tools used were really good and had a nice interface. I struggled a bit with the image handling, since I was not familiar with it. I was trying to return the blob from the server side to client side and work with it there, but, ultimately, decided to save it to the static folder and handle it entirely on the server side, with the frontend just consuming the image from the static folder.

It was really good to find tools such as Jimp, I see it helping me on the future on other situations. Albeit simple, it has a lot of tweaks and hacks that allow to create complex images.

Next steps

To further improve this project, the biggest improvement would be on creating the prompts. Currently, the most "Whastapp like" image that I could generate with simple prompts, would be some cute animals on a plant background. So, on the future, it would be nice to feed the model with other good morning messages and receive better results.

Also, improve it to other circumstances, such as good night, happy birthday, merry Christmas, and other festive occasions. For that, the message and the image should be improved, to understand the context based on the user selection.

Let me know if you have some suggestion or tips! Drop a heart if you liked this article :D

Code for this project can be found on: https://github.com/FRicardi/good-morning-sunshine

Svelte - My new pet framework

FRicardi — Sun, 16 Jul 2023 15:18:55 +0000

Some time ago, in a college project, I've posted here about my experience with Svelte and some newbie questions about the overall structure of the framework. Recently, I was developing a prototype for my final paper at college and had the opportunity to revisit Svelte with Sveltekit and, hopefully, solve my earlier questions.

While studying the framework itself and its capabilities, I came across Joy Of Code blog and YouTube channel, which I strongly recommend for those who are willing to understand more about it.

Development itself was way smoother than the first journey, since I knew some more about the limitations of the platform. Furthermore, I almost instantaneously loved the structure of Sveltekit, it was so easy to navigate and read components and pages. But the thing I've liked the most about it is how the logic can be well separated, it just makes sense. Well, at least for me lol.

So, let's get to my remarks on this (lovely) experience:

Project Structure

The first thing you have to put your mind into while using Sveltekit is its hierarchy on the file structure. When using layouts, you can nest them, and it will be prioritized from the outermost to the innermost, what gives you a powerful tool to scaffold your application.

The bad (or different, may I say) part of it is that I saw myself rarely using the file tree to navigate the project, since most of the files would have the +page.svelte or +page.server.ts name. Mainly, I've used the ctrl + p feature from VSCode to search for the wanted file.

Isolating the logic from the server from the client using file was really nice, making it so much easier to understand which code would run server side and which would be client side. Since I've never worked on a full project with SSR in place, it was kinda hard for me to get the grip of it, but this helped me a lot, which leads to the next point.

Server side capabilities

I know that SSR is no exclusive for Sveltekit, and surely no new concept overall (Omg hiiiii PHP <3), but this framework made it so readable and extendable that it matches almost exactly my thought process on building a system.

What I've liked the most on this bit was that the lifecycle of the server was clear, so I could enter my +page.server.ts file and check what I'm doing on load and what are the actions available on that given page. I felt that it was organized and clean, making it easier to reuse logic and also straightforward to write new code.

Reviewing my old comments

On my first post, I've asked some questions, and now I have an answer for them (or at least more knowledge about it).

Components

I'm not really sure why I was struggling here. On my current project, I was able to create components just like this, and accomplish exactly the behavior I was looking for. It looked great!

Also, I now see that sometimes there's no problem on creating a new component that will be kind of specific if that helps on readability, for example. In this project I was more prone to let my feeling guides me towards the right approach, and that worked great until now. Since I had a time crunch to deliver, that helped on not being so much strict on creating atomic components, preferring what would make the code run better.

Svelte community is, as per my perception, still being crafted. There is a lot of people creating great content for the framework, but it is still years away from React, for example, in terms of finding answers quick and components ready to use. That being said, I see that webcomponents usage is extremely useful, which I would loved to have used more now that I got to look back.

Authentication and authorization

My heart and soul goes to Sveltekit on this specific point. Layouts are just so extremely useful and readable to accomplish user authorization. Mostly, I've just created a mechanism to redirect the user if they are not logged in trying to enter a guarded area. Also, login was managed with cookies + locals object on the framework. Quick to set up and easy to extend. Also, the locals object could easily be used to guard roles with inner layouts/pages.

Newer final thoughts

As described on the title, Svelte and Sveltekits now are my pet frameworks. Although I have years of experience in React, Vue and Angular, I found that Svelte made me worry less about a complicated file/folder structure, giving so much more time to create a strong logic for my project.

It surely seems weird to do so (mostly because we are not used to it), but I could write simple backend code on it with confidence, something I couldn't grasp with Next and Nuxt, for example. For sure we have scalability concerns, but for small systems I would go all in on this approach and feel good with it.

For those who want to take a look on how the project, here is the github link. It has a lot of unfinished ideas because of time, but it was so nice to finally make an end to end project with this tech. I'm looking forward to contribute to this community and see it being even more promoted on the future.

I'd love to read about your experience on this framework and what do you think about the future of this tech :D

Svelte - Where to go from here?

FRicardi — Thu, 25 Nov 2021 04:08:25 +0000

The basics

I was looking forward to learn a little bit about svelte, since i've heard a lot of fuzz on it on the last couple years. There was this college task to create a web project, and my group decided to do it with svelte.
At first, i was really thrilled with how easy it was to create new things and how fast the application was being built.
After finishing the MVP for the college discipline, i was left with some questions, which i would love to receive your inputs on, since i was kinda on a hurry developing this but would love to come back to it and code it properly! :)

How to properly extend components?

The first thing that struck me was how to properly extend components and leverage most of the structure. The project i've created contained some forms, and i was used to the pattern that consist on creating components for inputs so it is easier to add form group inputs to a form. On svelte, it seems that i'm not able to create a component like:

<script>
    export let type = 'text';
    export let label;
</script>
<div>
    <span>{label}</span>
    <input {type} />
</div>

The error/warning i'm getting is that the type cannot be dynamic here. The approach I took, only to finish it quicker, was to create a component for each type i've had to use, which sounded bad. very bad. At this point it was easier to recreate the span/input structure on each input.

Authentication store and user

In order to save the bearer token used to prove authentication on the api calls, i've created a store using writable. To this project, i've created one for the authentication and other one to the user data. The user data one contains just the roles currently, just because i didn't need other informations so far. They looked like this:
auth.js

import user from './user';
import { writable } from 'svelte/store'
const { subscribe, set } = writable(localStorage.getItem('token'));

const logout = () => {
    set(null);
    localStorage.removeItem('token');
    user.resetUserRole();
}

const update = (newToken) => {
    localStorage.setItem('token', newToken);
    set(newToken);
    user.populateUserData();
}

export default {
    subscribe, logout, update
}

user.js

import { writable } from 'svelte/store'
import auth from './auth'
import { userConnector } from '../backend-connector';

const { subscribe, set } = writable(localStorage.getItem('role'))

const resetUserRole = () => {
    set(null);
    localStorage.removeItem('role');
}

const updateUserRole = (newRole) => {
    localStorage.setItem('role', newRole);
    set(newRole);
}

const populateUserData = () => {
    userConnector.getUserData().then((response) => {
        if (response.ok) {
            response.json().then((data) => {
                updateUserRole(data.roles.map((role) => role.name));
            });
        } else {
            auth.logout();
        }
    }).catch(() => {
        auth.logout();
    });
}

export default {
    subscribe, resetUserRole, updateUserRole, populateUserData
}

The .then() structure used instead of await was used just because i was teaching my colleague how a promise works and forgot to change to the classier await syntax, i know it looked lame hehe
The objective of the populateUserData method was to update user informations whenever they log in or enter the system, keeping them consistent with the localStorage so it is kept whenever the user quits the tab and enter again. Although i've liked the result, and using the svelte/store get method to read the content of any store was quite easy, i would like to know how you would place this structure!

Role guards on route

Since there isn't any platform component for that, I've tried to create a structure that represent guards to some route based on their role on the system. It looked like this:

<script>
    import { Route } from 'svelte-navigator';
    import auth from '../../store/auth';
    import user from '../../store/user';

    export let path;
    export let componentToRoleMapping;

    $: isAuthenticated = $auth;
    $: role = $user;
</script>

{#if isAuthenticated && componentToRoleMapping[role] != null}
    <Route path={path} component={componentToRoleMapping[role]} />
{:else}
    <Route path={path} component={componentToRoleMapping['ELSE']} />
{/if}

And the componentToRoleMapping object looks like this:

let feedComponentToRoleMapping = {
     'DONOR': DonorFeed,
     'ADMIN': AdminFeed,
     'ELSE': Login
}

Is there some way to improve this? it felt quite right but as if something is missing.

Final thoughts

Svelte was a nice framework to learn, i feel like there is a lot of room for improvement, but it was one of the easiest ways to code from zero to hero that i've found so far. Almost zero bureaucracy and a lot of shortcuts, i would love to work with it in the future. If you have any inputs on how to improve this code, and/or have some material to learn more about the technology, i would love to see that!