Forem: Gionatha

My TOP 3 UI Design TIPS for Developers

Gionatha — Thu, 22 Dec 2022 22:43:02 +0000

Introduction
Start with features
Don't focus on details
Split your features
Conclusions

Introduction

As a developer, when it comes to build my own application, I always have the tendency to borrow UI design from other websites or simply to work with design created by someone else, like a designer.

I never cared about design concepts such as colors, fonts, typoghraphy, emphasizing techniques, hierarchy patterns etc..

I used to think that Designing and Implementing an UI were 2 separate world that which must be handled from different roles (a designer and a developer).

Well i was wrong.

Recently i came across a book called Refactoring UI written by the creators of TailwindCSS (shout out to them).

That book changed my idea of just being a developer who is only capable to work with pre designed UI to be a developer who are able to design his own UI.

If you are like me and never approach before the concepts beyond UI / UX design and only cared about how to implement an UI with the latest frontend framework, I highly recommend you to read this book because is full of insights made specifically for developers.

While reading this book i came across with 3 useful designing tips which i'm sure will benefit your journey as a frontend developer dealing with Design.

Let's see them.

1. Start with features

Every time i start working on the design of a brand new application, i used to always start implementing first the layout of the application.

So i generally start thinking about whether to choose from a top navbar instead of a sidebar, how to display the navigation links, whether to choose from a container layout instead of a full width layout and so on.

Well let me say that this approach might be not the best, because at this early stage of development we are lacking of informations

Especially if you are on your own and don't have an UI design to follow through, a better approach will be to start implementing first some basic features of your application.

For example let's say i'm working on an hotel booking platform.

Following this approach, the first thing that i would start implementing , will be a feature that will permits the user to search for an hotel.

In this case i would start to laid out a form where the user can fill out:

the place where he will stay
the check in and check out dates
the price range
the numbers of bedroom that he needs
and a search button

After that i get my input search functionality, i could start working on a new feature, for instance the result list of hotels that the search has found.

In this case i would need to implement a list of hotel preview template where each one will have:

an hotel image
hotel’s address
hotel's price
and the button to send the reservation to the hotel

Only after having implemented at least some basic functionalities around my app, i could start caring about things like:

how to manage the navigation between these pages
choosing from a navigation bar or a sidebar
implementing a footer
or where to place the application logo image

In this way i would have much more information about my app functionalities and therefore i will make better decision when it comes to dealing with the layout offered by the application.

Remember when it comes to design an user interface we often have to take important decision in order to achieve a great user experience..

So the more information we'll have on our side the better decisions we'll make

2. Don't focus on details

In the earliest stages of designing a new feature like the hotel booking search functionality, it’s important that we don’t get hung up making low-level decisions about particular details like colors, font styles, shadows, icons, and things like that.

In particular I identified 3 cases in which i personally tend to spend too much time, early on.

Colors picking

This is particularly annoying, because I basically start spending time on trying to figure out what color could be the best suit for a background or a text, up until i find one that pleased me off.

Unless you have a color palette already set up for you app design, a very simple trick that i usually follow to not fall into the trap of colors picking is starting with grayscale colors.

When i don't know what colors to choose for a particular element, i just fallback on some shade of gray.

Later on when my feature will have all the components that it needs, i could start enhancing it with a specific color already in mind (hopefully).

Implementing interactivity

This means starting implementing early on the interactivity parts of a feature, things like button handlers, scrolling effects, form submit, etc..

These are very time consuming tasks which often requires to implement some sort of state management pattern around or some sophisticated algorithms for implementing things like parallax effect..

Not to mention that these are the main source of bugs when it comes to developing an UI.

The trick here is to implement first a static mockup of your feature and, only later on, start to adding all the interactivity parts.

Focusing on edge cases

This means to start thinking about particular edge cases that could affect your feature.

Something like:
How should the design looks like if the search has no results or if it generate too many results ?
What if a particular hotel has all rooms already reserved ? Should i display a disabled Book button or don't show it at all ?

These are important decision making situations which you often experience only when you start diving into the various scenarios of the features you are taking on.

What i generally suggest in this cases is to simply annotate the edge cases which you encounter while working on your feature and simply handle them later on, when you'll have all the necessary informations to deal with them.

So these were only just some of the common cases where I generally start to worry about details early on.
The main takeaway here is to avoiding designing everything up front.

Usually i like to follow a more iterative approach where i continuously switch from a Design phase to an Implement phase.

Essentially i start by designing a small piece of my feature and then implement it, then back to designing another piece and then implement it as well.

I repeat this process iteratively until there are no more issues left to solve and i'm happy about the result that I achieved.

3. Split your features

Whenever I start working on a big feature (such as a Chat system, for example), I usually divide the feature into several subtasks to which I assign 2 possible priorities

Required
Nice to have

For instance, let's say that i'm working on a chat system.

The required functionalities of this chat are essentially:

the area to display the chat messages
the textarea to type the message
the button for sending the message

But at some point i start realizing i'd like the users to be able to send images or videos inside this chat, so i decide to include also an attachments section in my Chat required functionalities.

I got deep into the implementation of this functionality only to discover later on that supporting attachments is going to be a lot more work than i've anticipated

In fact i'll need for example to manage all the process of a uploading a file, which can be not so easy to implement.

Now, If I was working on other tasks in the meantime and suddenly discover that one of those task require an higher priority rather than my chat system, i soon realize that i won't be able to ship my chat on production due the lack of this attachment functionality which is currently not completed.

So I went from being able to get a simple working chat ready to use, to not having a chat at all due to a core functionality missing (the attachment part).

As rule of thumb, to avoid these type of situations you need to always design the easiest version you are able to ship.

If part of a feature could be considered as a “nice-to-have” functionality then it could be designed and implemented later on.

In this case the attachment functionality can be safely marked as a "nice-to-have: functionality, so it may be added in a future version of the chat system.

Following this approach, can also increase your productivity, because you will be able to ship more basic features rather than 1 or 2 complex features at the time.

So here it’s important to remember to always design and implement first the easiest version possible of your feature.

Conclusions

So that's it! These were my top 3 tips that i wanted to share here today with you.

One last thing that i'd like to add is that the main ideas around the concepts that we have been discussing so far, is that they can be safely applied to other fields of software development or Software Engineering in general.

Whether you are a backend developer, a solution architect a designer or whatever, i'm sure that if you'll be able to apply those simple rules in your day to day job, your work will come much much easier.

How i build a modern full stack application | 2022 Edition

Gionatha — Thu, 01 Dec 2022 21:59:15 +0000

Development workflow
Nextjs
Typescript support
Nextjs as a Frontend Framework
Chakra UI
Nextjs as a Backend framework
tRPC
Data Persistence
Prisma
NextAuth
Deployments
1. Vercel
2. Planetscale
Monitoring
1. Sentry
2. Google Analitycs
3. SplitBee
Marketing
1. Product Hunt
Conclusions

In this post i will talk about the modern web technologies i personally used for building and deploy a modern full stack application.

Hi, my name is Gionatha and i'm the founder of Featbacks.

Featbacks is an open platform where you and your audience can discuss about different aspects of your side projects.

If you are searching for a free platform for collecting or sharing ideas, questions, announcements, reporting issues about your side projects, Featbacks is the right place to do it.

So be sure to give it a try at featbacks.com

Development workflow

First off i want to talk about my development workflow, which i follow when i'm building a full stack application in solo..so without the collaboration of other people or a being in a team.

Starting with the frontend 👀...

I usually i start by building the visual part of the application i want to create, which is often called UI or Frontend.

Starting from the frontend, helps me to better define all the requirements that the application needs.

In this way i'm assuring that all the data that the frontend need to display to the end user, will be stored on the backend as well.

...then the backend 🚀

Once i've built a mocked version of my application i can start working on the backend system of the application.

The backend is like the engine of the application itself, so it contains all the business logic for handling multiple events..
In terms of Featbacks this means the process of creating a project, creating a discussion, voting a reply, reply to a discussion, etc..

Building the backend generally means dealing with data persistence into database, manage users authentication, check user permissions, manage error reporting and so on.

So it's fair big world! 🌍

Nextjs

Since i use React and Typescript for building my applications, i tend to choose NextJS for building both my front and backend system.

In my opinion Nextjs is one of the best framework available nowadays for building new React-based application from scratch.

Typescript support

For example Nextjs supports Typescript, so it comes without the need to configure Typescript completely from scratch.

And this is awesome, because i always work with typescript in all my projects, because it permits me to have a type-safety approach while i'm coding

Using typescript permits to unlock the full power of the code editor that i'm using (VSCode).
I'm talking about Intellisense support, code completion hints, error detection at static time and much more..

This crucial for me, because it boost my productivity.

Eventually i know that i will be at least 2 times faster using typescript rather than not using it.

So my advice is to always use typescript for your personal projects.

NextJs as a Frontend framework

Other cool features that Nextjs brings when it comes to frontend development are:

a File system based Routing: Nextjs has this directory called pages where the files inside are turned into web pages available from our application. So creating a new page it's very easy and straightforward.
Multiple Data Fetching methods: Nextjs provide different method to render a specific pages, for example we can choose to server side rendering the page or generate a static version of that page that will consequently be cached inside a CDN or even decide to just client side rendering the page if for example the SEO is not relevant and the page content tend to change frequently
NextJs has also an integrated compiler called SWC that automatically transform and minify our code for production. So we won't need to install and configure third party tools such as Babel for example

So these were the main features of NextJs when it comes to frontend development, but of course it comes out with many others feature as well like: Fast-Refresh, Image Optimization, support for internatinalization and many more...

ChakraUI

Since most of the time i work in solo, i usually use React component based library, because it saves me from the problem of implementing most the most common ui components from scratch (such as menu, dialogs, buttons, layouts, tooltips, etc..)

One of my favourite library, which i also used for developing Featbacks is ChakraUI.

The reason why i choose ChakraUI it's because it's very easy to use and especially it's easy to customize.

In fact all the components that Chakra provides can be easily customized thanks to the style props feature.

Essentially given a specific component such as a Text, you can add your own style to that component by specifying the attributes you want to customize.

  <Text
     ml={2}
     textTransform="uppercase"
     fontSize="sm"
     fontWeight="bold"
     color="pink.800" 
  >
     Verified &bull; Cape Town
  </Text>

In addition to this, all the components that Chakra provides are already wrapped up with all the accessibility attributes that every component should have, so you won't need to think about this.

So my final thought is that React component libraries are particularly useful especially if you don't need an highly specific design system for your UI.

NextJS as a Backend framework

As i said before, NextJs can also be used as a backend framework, thanks to one of the coolest feature i've seen in a while in a framework, called API Routes.

API routes essentially are REST endpoints that are exposed directly from the underline Nextjs server.

So you can basically write your own API without creating a new dedicated backend application such as a NodeJS Express application that you have to build from scratch.

export default function handler(req, res) {
  res.status(200).json({ name: 'John Doe' })
}

And this is awesome, because you will get also the benefit of being able to share code between the frontend and the backend like models or functions.

And this believe me saves me sooo much time, because you will be able also to deploy your frontend and backend as single instance of Nextjs application.

tRPC

One library that comes in handy when building a backend system, especially using Nextjs Api Routes is tRPC.

tRPC allows you to easily build & consume fully typesafe APIs without schemas or code generation.

All that this library does is wrapping your Nextjs project and particularly the API functions that you write, and automatically generate some react hooks or a client that you can use within your react components or inside the data fetching methods that we have mention before.

And everything comes out with fully typescript support.

So if you change something on your Api functions, your changes will be immediately reflected on your frontend, without relying on some third party tools to generate api contracts for example.

This let me say it's AMAZING! The time that this library saves me as solo developer is invaluable.

tRPC has also different adapters for most of the modern popular framework, so it doesn’t rely specifically on React or NextJS.

Data persistence

When it comes to backend development we cannot talk about data persistence and especially databases.

There are different ways to store our data regarding on our use cases.

We have relational databases or SQL databases, such as MySQL or Postgres
We have NON relational database or NO-SQL databases, such as MongoDB
And we also have Key-Value store databases, such as Redis.

Obviously each of those paradigm have their own pros and cons and their own specific use cases.

One will perform better than another regarding what we need to deal with.

I'm not going to dwell on this topic because it's very broad and there are plenty of informations about it.

What i can tell you is that while developing Featbacks i need to store mainly relational data such as users, projects, discussions, replies, votes and to do so i used a MySQL database.

Prisma

One of the most useful library that i came across when dealing with databases was Prisma.

Prisma is a next-generation typescript ORM, that make easy working with databases.

The workflow of Prisma is very easy to understand:

You start by defining a schema using the Prisma syntax. In this schema you will define all of your application domain models and relations between them.

model Post {
  id         Int        @id @default(autoincrement())
  createdAt  DateTime   @default(now())
  title      String
  published  Boolean    @default(false)
  categories Category[] @relation(references: [id])
  author     User       @relation(fields: [authorId], references: [id])
  authorId   Int
}

From this schema you can then run the prisma client that will automatically generate all the type-safety models of your application and it will also generate a query builder client from which you can run your database operations.

// Find the first user that contains Ada
const userByName = await prisma.user.findFirst({
  where: {
    name: {
      contains: 'Ada',
    },
  },
})

In addition to this prisma provides also a tool called prisma migrate that basically read your schema and generate a migration script that can be applied to your development or production database
Finally it also provide a nice user interface called prisma studio to view and edit your database data.

Obviously Prisma has different adapters both for both SQL e NOSQL databases so it's the perfect fit for the majority of the databases available out there.

NextAuth

One common piece of a backend system usually is dealing with authentication.

Authentication means having a system that permit users to sign in or sign out from the application itself and also figure out who is trying to do a particular action like creating a discussion or voting a reply (this latter part is often called authorization)

Fortunately there is a library called NextAuth, which is an open source authentication solution built exclusively for Nextjs.

Some key points about NextAuth are:

is designed to work with any Oauth Service (like Google, Github, Microsoft, Twitter and so on)
Supports email with passwordless authentication
Supports both JSON Web Tokens and database sessions
is designed for Serverless environment ( Nextjs Api functions, AWS Lambda, Docker, Heroku, etc…)

NextAuth can be used with or without a database. For example in Featbacks i choose to store the user sessions inside a dedicated database table.

The great thing about NextAuth is that it comes out with an adapter for Prisma.
So once you've configured NextAuth with your Prisma instance you'll have a database authentication system ready to go.

From there you will need only to set up your authentication methods like email and password or third party oauth services like google or github and Nextauth will take care of the rest.

Deployments

When it comes to deployments there's a ton of cloud based services that could be used to achieve what we are trying to do here.

In my case what i needed was to deploy both my frontend and backend system along with my database instance.

Vercel

Since i used NextJS, one of the easiest way to deploy a NextJS application is to use the Vercel platform.

Vercel is the company that developed NextJS and they also developed a platform that permit to deploy a Nextjs application (but even other popular frameworks different from Nextjs) in a very straightforward and easy way.

Essentially what they need is the access to the github project that you want to deploy, in order to set some CICD pipelines.

From there, each time you push something on your main branch it will trigger a new build of your application and therefore your app will be automatically deployed on their server.

This remove the needs of having a person that manage this kind of tasks (they are often called DevOps engineer).

Planetscale

Of course we need also to deploy our database in some way.

When it comes to Featbacks, my option fell on PlanetScale.

Planetscale is a serverless database platform, built on top of MySQL and Vitess.

Vitess is a clustering system for horizontal scaling a MySQL database. Essentially Vitess automatically scale your MySQL database by using a technique called sharding.

Sharding consist in splitting the data inside your database into multiple database instances in order to avoid to overload a single or a few database instances.

Planetscale is also very easy to integrate with Prisma and Nextjs and there are plenty of examples that shows you how to setup it with this latter technologies, so i think it's one of the best pick available out there, if you are looking for a MySql database instance.

Monitoring

After you have launched a first version of your application, it's very important to have something that permits you to monitor your application.

The most important aspects to monitor are, in my opinion:

Error detection or crash reporting
Tracking user engagement

Sentry

When it comes to acknowledge if something went wrong in your application, one of the best tool that i came across is Sentry.

Sentry is a crash reporting platform that provides you with real-time insight into production deployments with info to reproduce and fix crashes.

It notifies you of exceptions or errors that your users run into while using your app, and organizes them for you on a web dashboard.

Reported exceptions include stacktraces, device info, version, and other relevant context automatically; you can also provide additional context that is specific to your application, like the current route or user id.

One of the most cool feature that i found in Sentry is that it permits to send you a notification via email or even via a Slack notification message when a new error occur or if some other criteria are met.

And this is awesome because you will immediately know if something is going wrong in your app.

Google Analytics

When it comes to tracking metrics such as daily users, new users, average session duration, page views, events or conversions, one the best free tool available is Google Analytics.

Google Analytics helps you collect all of these user engagement metrics that gives you insight about the application user experience.

So in this way you can understand what part of your application is more used and which one are less used.

Tracking these metrics will also help you to better understand what parts of your application need improvements or if there is like a particularly critical section of your app.

The main advantage of Google Analytics is that is completely free, but i don’t quite like the user interface, because i don't find it very intuitive.

But apart from that it does the job pretty well, and it is also very easy to setup into NextJs.

An alternative to Google Analytics: SplitBee

I also came across with an other platform for collecting analytics called SplitBee and their user interface is insanely good and intuitive.

Since Splitbee is a Freemium product, i eventually decided to opt in for Google Analytics, but in the future i would like to migrate to Splitbee because as i said their UI is so simple and clean rather than Google Analytics.

Marketing

In the final part of this long post, i wanna briefly talk about another important aspect of launching an application such as Featbacks, and that's Marketing.

Product Hunt

Although i'm not an expert in marketing, i found a very good platform for sponsoring your app that is called Product Hunt.

Product Hunt is an online platform to share and discovering new tech products.

The app is both for the creators whose come here to launch their products, and for consumers that come to find the latest and greatest products in tech.

The best part about Product Hunt is the community element.

On the homepage, new products get ranked by their popularity. This popularity is determined by the upvotes from fellow community members.
If you like a product, you upvote it, simple as.
The more upvotes a product has, the higher on the homepage it sits.

Conclusions

Alright we've just arrived at the end of this long post.

I hope that sharing my experience and insight about building a modern full stack application such as Featbacks in 2022, might have help you learn something that you were unaware of.

Let me know if you are using any of these technologies for building your personal projects, or if you're using something that i've not mentioned.

Cheers 🍻

I built a platform for collecting feedbacks

Gionatha — Wed, 16 Nov 2022 13:49:13 +0000

Hi everyone, my name is Gionatha and today i would like to present and show you a new app that i built called Featbacks👂

Featbacks is an open platform that permits to collect, share and talk about different aspects of a product that you own, directly with your audience.

So if you have any kind of product like an online application, a website, a school project, YouTube channel or whatever it might be, with Featbacks you can create a shared space called project, where you and your audience are able to talk about ideas, features, questions, give announcements reporting problems or just share thoughts about your product.

I created Featbacks mainly because i was looking for an online platform that will permit me to collect feedbacks about some of my personal projects without incurring into expensive cost… but many of the platforms i found were not 100% free.

So i decided to build one on my own, free to use
Be sure to check out the app at featbacks.com

Thanks for your time, i hope you will find the application useful.

How to create a Twitch Chat Clone with React and Socket.io

Gionatha — Sat, 24 Sep 2022 15:45:35 +0000

Best resources for preparing a Frontend Interview in 2022 👨🏻‍💻🙋🏼‍♀️ (No W3Schools)

Gionatha — Mon, 12 Sep 2022 20:41:47 +0000

Would you like to start preparing yourself for a frontend interview, but you don't know what are the best resources to learn from ?

Well today, i will list you the best online resources that i actually used for preparing myself. Let's start!

Javascript

Javascript is usually one of the most important topic during a Frontend Interview, because it is generally subject of trivia questions but also for small coding problems, so you need to master it both theoretically and practically.

Here i suggest you javascript.info

It's the simplest and detailed explanation of javascript that i ever found!
It's divided in 3 sections:

The javascript language (variables, functions, loop, conditionals ,etc.)
The browser (HTML DOM, Events, Resource Loading)
Miscellaneous (LocalStorage, Session Storage, Cookies, Network Request, CORS)

HTML & CSS

This is also a very important topic because the foundation of Frontend Development (especially web development) rely on HTML and CSS.
Needles to say that most of the trivia questions and practice tests rely on the knowledge of the latter.

Here the best resources that i found are provided by MDN

HTML

CSS

Accessibility This is very important too!

Interview Question and Answers

Once you have mastered the basics of Frontend/Web Development, it's time to test your knowledge with some common interview question.

Here i have multiple resources to suggest you:

30 Seconds of Interview (very friendly application, it cover all the various topics questions with answers too!)

HTML Questions & Answers

CSS Questions & Answers

Javascript Questions & Answers

Bonus: General Questions

Generally interviews begin with few questions about yourself: who you are, what experiences you have made, what are your strengths and weaknesses and so on.
So it's better to be prepared also to this type of questions.

Here some resources containing common questions with attached an explanation of possible answers that you can give back:

Top 10 Common Job Interview Questions

17 Top Interview Questions for Software Engineer

Wait! Where are (React/Angular/Vue/Svelte) resources ?

Well here it depends on the actual framework or library the company you are applying for is using.

Generally the official docs of these client side framework cover all you need to know!

I mainly use React, so i can suggest some React Resources that i used to cover this topic:

React Docs Beta (i think this has been written by Dan Abramov, but i'm not sure!)

React Interview Questions

Conclusion

Well, this is what i've to share. I hope you find these resources helpful, at least they have been for me!

I know that are tons of other useful resources scattered around the web, but as i said these are the ones that i personally used.

Let me know in the comment what resources have you used to prepare yourself for a Frontend Interview. See ya!

How to create a drag and droppable Kanban Board with React and Chakra UI

Gionatha — Wed, 31 Aug 2022 09:13:57 +0000

Hello folks! Today i want to show you how to build a modern drag and droppable Kanban Board using React.

The stack that we are going to use will consist of:

Vite (for creating the project)
React
Chakra UI (a component library build for React)
React DnD (a Drag and Drop library made for React)
React TextArea Autosize (a TextArea component that grows when the content inside increase)
other utilities libraries (useHook-ts, lodash, uuid, etc.)

Hope you enjoy!

How to create a Speed Typing app with React, TailwindCSS and Framer Motion

Gionatha — Wed, 03 Aug 2022 12:55:00 +0000

Forem: Gionatha

My TOP 3 UI Design TIPS for Developers

Table of contents

Introduction

1. Start with features

2. Don't focus on details

Colors picking

Implementing interactivity

Focusing on edge cases

3. Split your features

Conclusions

How i build a modern full stack application | 2022 Edition

Table of Contents

Development workflow

Starting with the frontend 👀...

...then the backend 🚀

Nextjs

Typescript support

NextJs as a Frontend framework

ChakraUI

NextJS as a Backend framework

tRPC

Data persistence

Prisma

NextAuth

Deployments

Vercel

Planetscale

Monitoring

Sentry

Google Analytics

An alternative to Google Analytics: SplitBee

Marketing

Product Hunt

Conclusions

I built a platform for collecting feedbacks

How to create a Twitch Chat Clone with React and Socket.io

Best resources for preparing a Frontend Interview in 2022 👨🏻‍💻🙋🏼‍♀️ (No W3Schools)

Javascript

HTML & CSS

Interview Question and Answers

Bonus: General Questions

Wait! Where are (React/Angular/Vue/Svelte) resources ?

Conclusion

How to create a drag and droppable Kanban Board with React and Chakra UI

How to create a Speed Typing app with React, TailwindCSS and Framer Motion