DEV Community: Răzvan Stătescu

Unique Identifiers: UUID vs NanoID

Răzvan Stătescu — Mon, 01 Nov 2021 09:46:03 +0000

I think every developer used unique identifiers at least once in their life. You can use those to generate a primary key in a database, a unique filename, etc.

In this article, I'll compare the popular UUID with the rising start NanoID.

UUID

This is one of the most popular libraries to generate unique identifiers right now.

It's small in size (483 bytes)
11.6k starts on Github and over 59 million weekly downloads on NPM
It has zero dependencies
Supports for CommonJS, ECMAScript Modules and CDN builds
Supports for all major browsers (including IE 11 😅)
It's secure and well documented

Quickstart

Install

npm install uuid

Generate UUID

ES6 syntax

import { v4 as uuidv4 } from 'uuid';
uuidv4();

CommonJS syntax

const { v4: uuidv4 } = require('uuid');
uuidv4();

NanoID

NanoID is a tiny, secure, URL-friendly, unique string ID generator for JavaScript.

It's not as popular as UUID but it has grown very fast in the last period and looks very promising. It has 14.5k starts on Github right now (more than UUID).

Very small in size (130 bytes - minified and gzipped)
No dependencies
2 times faster than UUID
Safe (it uses a hardware random generator)
Shorter IDs (21 symbols) than UUID (because it uses a larger alphabet)
Available in 19 programming languages
Supports modern browsers, Node.js and React Native

Quickstart

Install

npm i nanoid

Generate NanoID

import { nanoid } from 'nanoid'
cosnt id = nanoid()

Conclusion

I've recently started using NanoID in my projects and it's working very well. I like the fact that the strings are shorter.

If you want to reach me, check out my twitter.

Article posted using bloggu.io. Try it for free.

How to run custom SQL queries using functions in Supabase

Răzvan Stătescu — Thu, 28 Oct 2021 18:56:02 +0000

Recently I needed to run custom SQL functions in a Supabase project. Their Javascript SDK doesn't support this so the only way is via database functions. You can then call those functions using the Javascript SDK.

Let's look at a very simple example using a table called users

CREATE OR REPLACE FUNCTION all_users()
  RETURNS TABLE (f_id   uuid   
               , f_email   text
               , f_full_name text)
  LANGUAGE plpgsql AS
$func$
BEGIN
   RETURN QUERY
   SELECT id, email, full_name FROM users
END
$func$;

The above function will return the id, email, full_name for all users in the table. To quickly test the function you can run SELECT * FROM all_users();.

Now, moving to your Javascript code, you can run the function using the following syntax:

let { data, error } = await supabase.rpc('all_users')

It's that simple 😅.

Now, let's look at a function that receives two parameters:

CREATE OR REPLACE FUNCTION all_users(created_from timestamp, created_to timestamp)
  RETURNS TABLE (f_id   uuid   
               , f_email   text
               , f_full_name text)
  LANGUAGE plpgsql AS
$func$
BEGIN
   RETURN QUERY
   SELECT id, email, full_name FROM users BETWEEN created_from AND created_to
END
$func$;

And, we can call this function from the Javascript SDK like this:

const { data, error } = await supabase
  .rpc('all_users', { created_from: ..., created_to: ... })

If you want to reach me, check out my Twitter.

Article posted using bloggu.io. Try it for free.

Set-up Mac for Web Development in 2021

Răzvan Stătescu — Mon, 15 Mar 2021 10:46:38 +0000

I've recently had to reinstall Mac OS on my 2018 Macbook Pro because the last time I've done this is more than 4 years ago and I start having some issues after upgrading to Big Sur like the internet was randomly not working, git was not working properly, the mac was kind of slow. Also, the SSD was full of junk from the past years.

To reinstall Big Sur on my Mac, I've followed this guide from Apple.

General Settings

Now, after I've finished installation and configurations, the first thing I check is if there are any updates for Mac OS.

After this, I've gone to Settings and started going through all the categories: General, Desktop & Screen Saver, Dock & Menu Bar, etc, and configuring it the way I like it. Some important security features to make sure you have turned on are on Security & Privacy > FileVault / Firewall.

General Software

After finishing with the Mac settings, is time to start installing all the software I use on a daily basis. I'll split this into general software and web development software.

Amphetamin‪e‬

This is a great software that you can use to keep your Mac awake. For example, if I do a time-consuming operation and I want to make sure my mac won't go to sleep, I use Amphetamine‬.

Avast

I use the following products from Avast: Avast Premium Security, Avast Anti-Track, Avast CleanUp, and Avast VPN. You need to make sure you have an up-to-date antivirus on your computer.

Figma

Figma is my go-to software for web design, quick logos, wireframes, social media content, basically everything in this area.

Grammarly

Grammarly it's been with me since February 2019 and I can say I love it. It helps me avoid mistakes when writing in English. I'm using it right now when writing this article.

Maccy

This is the best macOS clipboard manager I've used so far (in my opinion). It's not free, but I can say it's worth the money and as you get used to it, it will save you a lot of time.

Slack

This is my go-to communication software with clients and for personal projects. It's great and has integrations with a lot of software.

Spark

I've been using Spark for a few months now as my main Mail Client both on my Mac and on my iPhone. I can say it's better than the GMail client. It helps me organize my emails better, and postpone reading specific emails.

Zoom

I'm mainly using Zoom and Google Meet for video calls these days so, this is a very important software I use every single day.

Development Software

I've tried a lot of software over time, hoping it will help me increase my productivity and save me time as a web developer.

Postman

Postman is more than just a tool you can use to test APIs. It's as they describe on their website "The Collaboration Platform for API Development". You can use it to document your APIs, collaborate with the team, test APIs and more.

Table Plus

I use Table Plus to manage databases.

Mongo Compass

This is a tool you can use to execute CRUD operations over Mongo Databases.

Docker

I don't think I've made an app in the past 1-2 years without Docker. So, if you're not using Docker, start using it 😀.

Termius

This is an SSH client for both Mobile and Desktop. You can save all your servers, group them and connect them from your mobile device.

VS Code

This is my main code editor right now. Before that, I used Web Storm for like a year. I kind of like changing them and experience what works best for me.

Homebrew

Homebrew is a packet manager for macOS.

oh my zsh

As they say on their website "Oh-My-Zsh is a delightful, open-source, community-driven framework for managing your ZSH configuration.". You can basically improve your basic, boring Terminal 🚀.

NVM

NVM stands for Node Version Manager. You can basically switch between different NodeJS versions. It's very helpful if you work on multiple projects at the same time.

Let me know in the comments what software do you use on your Mac.

If you have any questions or just want to reach me, check out my website.

Realtime experience for Web Apps with Pusher Channels

Răzvan Stătescu — Tue, 09 Mar 2021 18:09:28 +0000

Before we begin, Pusher Channels (or simply Pusher) provides real-time communication between Servers and Apps. We used it when building Brunch, and it really helped us improve the overall User Experience.

What is Pusher?

With Pusher Channels you can build basically any real-time feature. To be more specific, you can do things like real-time charts, user lists, maps, notifications, multiplayer games, and many other kinds of UI updates. The possibilities are endless.

Let’s dive more into this and see how Pusher does this. When something happens on your server, it can send an update to your Web App so you can update your UI. It also works the other way around; when an event happens on your Web App, it can notify the server. Under the hood, Pusher uses WebSockets and HTTP, and provides fallbacks for devices that don’t support WebSockets.

I’ve also added a piece of code at the end of this article to help you get started with Pusher in no time.

How we use Pusher at Brunch?

To better understand Pusher and how can you use it in your own Web App, let’s take a real example of how we use it here at Brunch for delivering Notifications.

When a user goes to Brunch, it will subscribe to a Private Channel. Pusher has 4 kinds of channels: Public, Private, Encrypted, and Presence. You can read more about each of them in their documentation. We use Private Channels here because they will authenticate the user before letting him connect to the channel. Basically, it will call an endpoint in our API that will tell Pusher if the user can connect to the channel or not.

Now that we established a connection between the user and the server; when an event like “a team member creates a new project” or “a feedback is added in one of the teams I’m part of” occurs, the server will publish the notification to the user’s private channel. From there, on the Front-End, a new event is triggered, so we can update the UI and display the notification to the user.

Another example from Brunch is using Pusher Presence channels to show online members working on the same project page and keep changes in sync. When multiple users are on the same project page, you can see a list of all connected members and if a user makes an action (for example add a new feedback) the change is then pushed to the other members so their UI is also up to date with the latest change. This really helps us create a good collaborative experience.

These are only 2 examples of how we use Pusher here at Brunch. I hope this helped you understand how this kind of service can significantly improve the User Experience of a Web App in 2021.

Find below a very simple example using public channels with a NodeJS server and a Javascript client.

For a more in-depth quick start guide and more examples, check out their documentation.

If you have any questions or want to reach me, check out my website.

How I made an app and pushed it live in 4 days

Răzvan Stătescu — Sat, 13 Feb 2021 20:10:28 +0000

Hi guys 👨‍💻 and girls 👩‍💻. In January I've made Postzy. You can use Postzy to schedule ⏰ and manage your LinkedIn posts.

One of my goals for 2021 is to build some micro-products that will generate some income. I want to learn to develop an MVP as fast as possible, validate the idea, and improve it. (if it's the case 😃).

Now, let's see how I managed to push an MVP for Postzy in ~4 days.

Tech Stack

My go-to stack right now for developing micro-products and fast prototyping is:

Next.JS for Front-End
Next.JS API routes for serverless back-end
MongoDB for database
Vercel or Netlify for hosting
Stripe for payment
Next Auth for implementing authentication in Next.JS
Plausible for analytics

In addition to this, depending on the project, I'm using all kinds of libraries or services to speed up my development process.

Planning

Before I jump and build something, I do my research. I use Notion to organize my ideas and my research. I start by defining what I want to build, why, and how I'm going to build that. Also, while I do my research I bookmark in Notion articles, tutorials, libraries, GitHub tickets, ... Basically everything that I think will help me while building the app.

Day 1

The first day was dedicated to research. I've written down what I want to build and started to see how can I build that.

Day 2

Started to set up the project, made some sketches for the app in Figma, and implemented Next Auth.

Day 3

On the 3rd day, I've implemented the core functionality of the app, using the LinkedIn API. At the end of the day, I've been able to post to LinkedIn using the app.

Day 4

On the last day, I've implemented payment processing using Stripe. I've gone with the easiest approach, letting Stripe to handle the checkout process.

Let's talk in the comments about MVP and fast prototyping.

If you have any questions or want to reach me, check out my website

You need to try this NPM Package

Răzvan Stătescu — Mon, 25 Jan 2021 09:14:23 +0000

The title might sound clickbait but I really find this NPM Package to be extremely useful. The Package I'm talking about is patch-package.

Last week I've made an app, Postzy, and I needed a clean way to slightly modify one NPM Package I was using. This is when I come across patch-package. I was so happy because it was doing exactly what I needed it to do (and this rearely happens with a package 😃).

How does it work?

It's very simple to use.

Patch a package

You first need to go and make some changes to a package inside your node_modules folder.

After that, you can run npx patch-package [package-name] or yarn, if you're using yarn.

It will create a folder called "patches" inside the root folder of your project. You'll need to commit this folder to git to share the patch with your team and also deploy the changes to your server (depending on your deploy flow).

Apply a patch

After you made a patch, to apply it you can define a npm run command like "postinstall": "patch-package". You can run this command on the server after npm install or on your local machine to apply the patch.

If you have any question, don't hesitate to contact me.

How to set your rate as a freelancer?

Răzvan Stătescu — Tue, 19 Jan 2021 16:35:23 +0000

This is a very controversial topic, as well as salaries: everybody talks about it but nobody actually says anything.

I don't say I have THE answer for you (unfortunately 😞), but I'll try to give you some starting points and tips that will help you get started. As well as driving a car or running a business, you'll get better at this over time, as you get more experience.

I've been freelancing for 4 years and some simple but very important things I learned about rates are: you need to be comfortable with it (don't blame yourself that you work for too little or always be afraid that you ask too much) and you have to be realistic about it (we all want to earn more but if I'm going tomorrow and ask a client to pay me $1000 per hour he'll most probably ask me if I'm ok 😂).

Now, that we created a bit of context around this subject, let's see how you can get started and have some actual numbers.

Use your salary

This is a very simple technique that I present to all people asking me how to set their rate when starting freelancing. If you had a job recently, this might be a good starting point for you.

Let's assume you'll work 8h/day. Take your annual gross salary (NOT net salary) and divide that by 40hours/week * 52weeks/year.
Example
$100,000(salary) / (40(hours/week) * 52(weeks/year)) = 100,000/(40*52) = 100,000 / 2080 = ~$48/hour

I've made a very simple rate calculator starting from this formula on my website.

After your first year as a freelancer, you start having some numbers that you can use to improve this rate.
You can see how much money you made, how much you paid in taxes, what other expenses you had (bills, subscriptions, equipment, etc).

Take those numbers, determine how much you need to make this year, and input those in the rate calculator to see your hourly rate.

As you start freelancing, you might now see many expenses but let me tell you some common ones:

Rent
Bills for telephone, internet, utilities
Software and service subscriptions
Taxes
Marketing costs
Legal and accounting costs
Courses

If you want to reach me, check out my website.

Twilio Chat/Video

Răzvan Stătescu — Wed, 13 Jan 2021 11:27:53 +0000

Hi guys!

I'll soon have to implement private chat/video between users. Anyone any experience with Twilio on this side? Maybe can recommend some resources / GitHub repos?

Thanks,
Have a great day!

Why is it cheaper to hire a freelancer?

Răzvan Stătescu — Sun, 10 Jan 2021 08:57:09 +0000

Last week I did a post about this on LinkedIn and people reacted well; so I said, I'll write a short article about this.

I've been freelancing for around 4 years now and in all this time, I've come to realize quite a few things about rates, money, etc. I'll share those things with you today.

Let's start by making a quick comparison between an employee and a freelancer in terms of money & benefits. A freelancer doesn't have:
🚫 paid holidays
🚫 medical/life/... insurance
🚫 gym subscription
🚫 free courses/training
🚫 free coffee/water/food
🚫 any kind of benefit

So, usually, a freelancer has to pay for all the above and:
💳 taxes
💳 bills (internet, electricity, ...)
💳 subscriptions (services that help him run his business)
💳 equipment (laptop, monitor, headset, mouse, ...)

In addition to all of this, a freelancer has to take care of:
👨‍💻 client communication
👨‍💻 proposals
👨‍💻 estimates
👨‍💻 marketing
👨‍💻 sales
👨‍💻 finances (invoices, payments, ...)
👨‍💻 and much more

When you set your hourly rate, you need to take all of that into account.

From a Client perspective, hiring a freelancer will simplify your cost per employee a lot. You no longer have to think about the things mentioned above (taxes, paid holiday, insurance, coffee, ...) and you can just think about the invoice you get from the freelancer.

Hiring a freelancer will not only simplify the process but will also make you pay less. Let's look at this article Cost of Hiring Full-Time vs. Freelance Software Developers. You can go ahead and read the full article, it's very interesting. But let's look at the numbers: the cost to hire a full-time developer with 5 years of experience is $198,974 and the cost to hire a freelance developer with 5 years of experience is $107,400 - $179,000 (based on his hourly rate). For a more detailed breakdown of those prices, go ahead and read the article above.

To sum everything up, as a business, you could save up to almost 50% by hiring freelancers instead of full-time employees!

Now that we clarified some things, let's try and destroy a mith

If a freelancer gets $100, he will keep $100
That's totally wrong. Depending on the country you're in you'll have to pay taxes, after that you'll have to cover different expenses covered above (bills, subscriptions, equipment, ...).

Extra: set your hourly rate

If you're a freelancer / want to become a freelancer and have no idea how to set your rate, a simple thing you can do is think of your salary. Let's assume $2880 for this example (this is your net salary). We want to get your gross salary now. Let's say the employer has to pay 40% in taxes, so if you have a $2880 net salary this means your gross salary is $4800. Divide that by 160 (the number of workable hours in a month). This will get you a $30 hourly rate. You can use this technique as a starting point.

Let me know what you think about this subject in the comments 👇🏻

If you want to reach me, check out my website.

What language you prefer for YouTube tutorials?

Răzvan Stătescu — Thu, 07 Jan 2021 05:32:43 +0000

Hi guys 👋🏻!

Last year I've started a Web Dev YouTube channel and I try to figure out if I should post in my native language or in English.

So, if your native language isn't English, what language do you prefer for watching programming tutorials on YouTube?

Thanks!

Tools I use as a Freelance Web Developer 🛠

Răzvan Stătescu — Wed, 06 Jan 2021 08:19:42 +0000

I started freelancing about 4 years ago, and as I grew my freelance business, I used a lot of tools to help me with that.

Yes, freelancing is a business, so I'll split the tools in two main categories:

Programming
Business

🖥 Programming

It is not about how many hours you work, but about how you worked and what you managed to achieve in those hours.

IDE / Code Editor

Atom (Free)

When I started web development, I used Atom. Back then, I was mainly doing PHP, HTML, CSS, FPTing into servers, and uploading files.

VS Code (Free)

After Atom, I switched to VS Code. I liked the UI and the fact that there were so many useful plugins.

Web Storm (Paid)

For the last 2 years, I mainly used Web Storm. I left VS Code for it because I felt it help me more than VS Code, it has more options and stuff like that.

Now, in Jan 2021 I switched back to VS Code. You can see here how my VS Code looks like (what theme and font I use).

How to change your VS Code appearance

Răzvan Stătescu ・ Dec 30 '20

#vscode #productivity

Git

This is like air for programmers. I don't think there should be any programmer that doesn't use git. If you are a freelancer, if you work in a team, if you code in PHP, if you do HTML/CSS websites, just use git.

Bitbucket

When I started my git adventure, I used Bitbucket because it allowed me to have private repositories for free. I still use it as some of my clients do.

Github

This is my main git platform right now since it allows private repositories for free.

Browser

Sizzy

This is, as they say, the browser for developers. Sizzy allows you to see the same web page on multiple resolutions at the same time, scroll on all devices at the same time, take screenshots on multiple resolutions, etc.

When I'm doing front-end work, Sizzy is a game-changer in my opinion.

Others

And of course, the other browsers: Safari, Chrome, Firefox...

Postman

As a web developer, you always need to make API calls, check the response, the headers, debug things. Postman is the perfect tool for both Front-End Developers and Back-End Developers.

Termius

Termius is an SSH Client for both desktop and mobile. I often need to ssh into servers so Termius comes in handy for that. You can save servers and organize them in groups.

Antivirus

Your online security is very important, especially when working with different clients. Is your responsibility to have an up-to-date antivirus and VPN (especially on public networks).

I've used Mullvad VPN and Avast SecureLine.

Intrenet

Last but not least, the internet (Google, Stackoverflow, dev.to, etc...). No one will memorize the whole Angular documentation or all lodash functions. As a freelance web developer, you need to be able to work independently so please learn to search on the internet.

A good developer is not someone that knows everything, is someone that can use the tools he has to build great things.

💰 Business

I try to spend more on coding, and less on business things. For this, I use a set of tools to save me time. Also, managing multiple clients, you have to be smart and organized about this.

Time Tracking

With some of my clients, I work per hour so I need to log my time in order to bill the client. Sometimes I use the client time tracking software, sometimes I use mine (and send a report and the end of the month/week).

Toggl (Free)

This is the software I'm currently using to track time and generate reports for clients.

Even tho Toggl has a free plan, I've upgraded to Starter plan($10/month) so I can manage better this time situation with things like billable/non-billable hours, save reports, etc...

They also have a great desktop app that reminds me to take a break after a certain time. (yea, as a developer, is good to take breaks from time to time. 😃)

Harvest (Free)

This is another time tracking app you can try, they also a free plan but I consider it more limited than Toggl.

Task Management

Asana
Trello
Others

Other task management tools for bigger teams are: YouTrack or Jira

Communication

Yea, we all have to manage emails from clients, collaborators, team members, etc.

I have a GSuite subscription for my freelance business. I find it very useful and besides GMail, it comes with a lot of other tools/services like drive, meet, etc.

I'm using Apple products (iPhone and Mac). The GMail app is ok, but not great. I started using Spark (an email client) on both my phone and laptop and I like it. It helps me manage my emails better.

Slack

I'm using Slack with almost all my clients to communicate with them and their team.

Meet & Zoom

For calls, I'm mainly using Meet (from Google) and Zoom, depending on the client.

Invoices

This is a pretty difficult topic to cover, considering that every country has its own financial laws. This is why you should find an app that's compliant with your country's laws.

SmartBill

I'm from Romania 🇷🇴 🇪🇺 so because of that, I'm using SmartBill, a Romanian app that's specially made for Romanian businesses.

Wave

Before SmartBill, I've been using Wave. I liked that it was simple and free. I decided to leave it, and use SmartBill because it was more helpful, considering that is made especially for Romanian businesses.

Others

Google Calendar

For managing my schedule, I use Google Calendar. As a freelancer, especially if you work with multiple clients, is very important to stay organized. This way, you make sure you don't forget things and respect deadlines ✅.

Notes from Apple

If I need to write down an idea, plat a quick blog post, etc I use Notes from Apple. I like that they are simple, I can organize them in folders and they sync between my iPhone and Mac. From there I can transform them into tasks, events, etc.

Please let me know in the comments, what tools do you use?

If you want to reach me, visit my website.

Weather card with TailwindCSS

Răzvan Stătescu — Sun, 03 Jan 2021 11:20:00 +0000

From time to time, I like to play with TailwindCSS, especially when a new version is released.

If you haven't used tailwind so far, give it a try. 99% you'll fall in love with it.

Look how simple is to create a weather card:

Use the tailwind playground to customize this card.

If you have any questions, you can find my contact details on my website.