DEV Community: Daniel Lima

⛳ Avoid problems with Feature Flags

Daniel Lima — Wed, 17 Jul 2024 15:11:23 +0000

Imagine you have an online application, a product, with numerous users hitting your API client-side, and everything seems fine.

But one day, your application encounters a severe bug in the payments section. Someone accidentally discovered a bug that allows infinite money withdrawal on your cashout, and they're withdrawing or attempting to withdraw like crazy. It's as if they're exploiting a GTA5 glitch to generate endless money.

You urgently alert the entire development team about the issue. After discussing it, everyone agrees that until the problem is resolved, it's best to take down the production app to prevent anyone from exploiting the infinite withdrawal glitch.

As a result, you shut down the entire application due to a single bug.

⛳ Feature flags

Imagine if you had a magic button that could disable only one feature (like your cashout in this case) for everyone, allowing you and your team to work more calmly and effectively.

That's exactly where we're heading.

Feature Flags are essentially an if statement that helps minimize damage.

You can implement it natively, creating your backend with various boolean values that are toggled through a custom admin dashboard.

But I'll show you at the end one of the many tools that can make your life easier, especially for indie hackers and self-made developers who lack time and resources.

This way, you can temporarily remove a feature, work on fixing it securely, and once everything is resolved, reintroduce it into the production environment.

More Than Just an If

I know, I initially described it as just an if for simplicity, but it can be more than that.

For instance, you can roll out a feature to only 50% of users, monitor its performance, and then release it to the remaining users.

In an application with 100k users, after fixing the issue, you can release it to 10k users, then another 20k, followed by 30k, and finally, to everyone.

The possibilities are vast when it comes to rolling out features. But the core idea remains the same.

If true, show it. If false, don't show it and move on.

User-Specific Flags

Additionally, you can create flags that carry parameters like user id to make changes for a specific user or a group of users with common characteristics.

This helps maintain your platform and gives you greater control over each user.

PostHog and Tools

One way to save time is by using a ready-made tool.
The best one I've tested so far is PostHog.

I could teach you how to implement it step by step, but honestly, their documentation is so good that it would be redundant for me to explain.

It's the only documentation I've copied and pasted that worked without needing any changes or bug fixes.

https://posthog.com/docs/feature-flags

For Next.js - https://posthog.com/tutorials/nextjs-analytics

Don't Just Disappear

When deactivating a feature, especially if it's a core part of your product like cashout, you shouldn't just make the button disappear and leave your user confused. This could overwhelm your support team due to the missing button.

For better UX, inform your users about what's happening. Ask for their patience and reward them with improvements.

In a chaotic scenario, preparing this way significantly helps reduce damage.

If you enjoy this kind of content and plan to launch your own SaaS someday, follow me for daily content on Twitter and weekly videos on YouTube.
This article will also be available in video format soon on my YouTube channel:
https://youtube.com/@daniellimae

https://x.com/daniellimae

🏆 Best guide to SEO for devs

Daniel Lima — Wed, 10 Jul 2024 14:50:47 +0000

SEO, or Search Engine Optimization, is a set of techniques and practices you can adopt as a strategy to enhance the way users find you and your company/product online.

In other words, it's a way to stake your claim and ensure that when someone searches for a problem or your name specifically, you appear as the primary solution for them.

Throughout this article, I will provide some examples, but it is important that you DO NOT COPY AND PASTE THEM without first changing what is written and improving it for your context.

But I need to leave a very important message.
If you entered this article thinking there is a magic pill that you will put on your site and everything will be resolved overnight, you can forget about it.

There is no magic pill, my friend. SEO is like going to the gym, a way to build your name and a set of good practices and tools that, over time, will help you have better contact with those whose problems your company solves.

If in the gym you need to eat well and exercise every day, SEO works the same way. You need to constantly evolve and adapt to changes.

Because it only takes a move from a company like Google and you lose your throne as the top spot.

I mean, there is a magic pill; the anabolic steroids in this case would be paid traffic, but that's not our focus here. Everything we use will be done 100% naturally and organically 🌱.

So, stay tuned and stay natty, kids.

It all started when I had to do this myself for a platform I own called Alertpix , focused on streamers and solutions for live streamers.

We felt at first that our search results were very poor. People searched for our name and only found Twitter or articles from sites talking about us in some way. But our actual site, which was good, nothing.

So, I turned to my partner Chris and committed to learning as much as possible about how to solve this problem and appear more when people search for the problems we can solve.

Well, after extensive research, I made a list of several things we could improve; this was the result:

Optimize Lighthouse
Better hierarchy (h1, h2, h3)
Alt tags on images
Metatags (meta description)
O.G (Open Graph)
json-ld
Blog with long tail content
pSEO + long tail volume
Sufficient amount of keywords per page
robots.txt
Sitemap
Google Keyword Planner, SEMrush, and Ahrefs (keywords)
Canonical tag

I will address each one and give a practical example of how you can improve your site as well.

I will be using Next.js here because it is a framework that already comes with many SEO-oriented features, but you can use and implement it in the framework of your choice.

Optimize Lighthouse

Lighthouse is a tool that we use as a Google extension to measure how optimized our application is for the end user.

It provides several useful metrics to keep an eye on, such as accessibility, performance, best practices, among others. But here, we will focus on SEO.

The idea is always to improve according to what the tool tells you, and even if it's not 100% perfect, it's still very worthwhile to stick to what the tool delivers and make the improvements it proposes.

Oh, and speaking of accessibility, here is another item on our list.

Alt + Hierarchy / HTML Semantics
After all, can the accessibility of a site interfere with its SEO?

What Google and other search engines can consider is whether your images have well-defined alt tags, if your HTML semantics are clear, and if your tags are well hierarchized (i.e., using h1, h2, h3, and other tags correctly).

So, from that perspective, yes. Characteristics of a well-accessible site are healthy habits for good SEO.

Avoid misleading titles or clickbait.
Do not use a list of keywords as a title or a generic alt for everything.

Metatags

Meta tags are HTML elements that provide information about the web page to browsers and search engines. These information are not directly displayed to page visitors, but are used for various purposes, such as search engine optimization (SEO), social media sharing, and mobile device display configuration. Some common types of meta tags include:

Meta Description: Provides a short summary of the page. This text often appears in search results, helping to attract clicks.

<meta name="description" content="A brief and informative description of the page.">

Meta Keywords: Lists relevant keywords for the page. Although its importance for SEO has diminished, it is still occasionally used.

<meta name="keywords" content="keyword1, keyword2, keyword3">

Meta Charset: Defines the character set used on the page, helping to ensure text display.

<meta charset="UTF-8">

Meta Viewport: Configures the page display on mobile devices, allowing for a better user experience across different screen sizes.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Meta Robots: Indicates to search engines how to index or not index the page. It can be used to allow or block the page from being indexed.

<meta name="robots" content="index, follow">

Meta Author: Specifies the author of the page or content.

<meta name="author" content="Author Name">

Meta Open Graph: Used for integration with social networks like Facebook, improving the display when the page is shared.

<meta property="og:title" content="Page Title">
<meta property="og:description" content="Page Description">
<meta property="og:image" content="Image URL">
<meta property="og:url" content="Page URL">

These tags are placed within the

section of the HTML document.

Each meta tag has a specific purpose and can be used according to the needs of the page developer.

All of this matters greatly for search tools like Google to know and make your content available.

O.G Open Graph

Open Graph (OG) is a protocol developed by Facebook to integrate any web page with the social network, allowing page content to be shared in a richer and more attractive way. When a web page contains Open Graph meta tags, shared links on social networks can display titles, descriptions, images, and other details in an optimized manner. This improves the appearance and functionality of links, encouraging more interactions and clicks.

Here are some of the most common Open Graph meta tags and their uses:

Defines the page title that will be displayed when the content is shared.

<meta property="og:title" content="Título da Página">

Provides a short and attractive description of the page.

<meta property="og:description" content="Page description.">

Specifies the URL of a representative image of the page. This image will be displayed as a thumbnail when the page is shared.

<meta property="og:image" content="URL da Imagem">

Defines the canonical URL of the page, ensuring that the correct URL is associated with the content.

<meta property="og:url" content="URL da Página">

Indicates the type of content on the page, such as "website", "article", "video", etc.

<meta property="og:type" content="website">

Name of the site where the page is hosted.

<meta property="og:site_name" content="Nome do Site">

Benefits of Using Open Graph

Visual Attraction: Improves the appearance of shared links, displaying images and additional information.
Increased Clicks: Optimized titles and descriptions can increase the click-through rate (CTR) on links.
Content Control: Allows site owners to control how their content is displayed on social networks.
Consistency: Ensures that shared links have a consistent appearance, regardless of where they are shared.

Implementing Open Graph meta tags is a recommended practice for any site that wants to increase its visibility and attractiveness on social media platforms.

You can check if your site is okay and how it appears on different platforms using tools like this: https://opengraph.dev/panel?url=https://alertpix.live

Thus, every time you share your site link, you make it more attractive and less sketchy. This gives a professional touch to your site.

json-ld

JSON-LD (JavaScript Object Notation for Linked Data) is a JSON-based format used to structure data in a way that can be easily understood by machines. It is commonly used to add metadata to web pages so that search engines and other applications can process and understand this data more efficiently.

JSON-LD is often used to implement structured data schemas (such as schema.org), allowing information about products, events, organizations, people, recipes, and much more to be included on a web page. These structured data can significantly improve SEO and increase the visibility of content in search results, displaying rich snippets.

In other words, another tool for you to communicate directly with servers and search engines. Basically, it's a way of telling Google, "Hi, this is me, I do this, and I solve this..."

An example of how we use this at AlertPix is to create a kind of FAQ with questions and answers that are commonly searched by our audience.

Like this:

But you might be wondering, what were these questions and where did I get them from?

And here I'll show you a tip that I could easily charge for:

You don't decide this.
It's a mistake to think you know more about your business than Google.

Go and ask Google, but in a different way.

Let me introduce you to Keyword Planner + Google ADS

There are several smart ways to discover which words are ideal for you to use on your site, but I'll tell you now, it's not from your own mind. Do some research, refine, and get the pure juice of the keywords.

This is a practice that takes some time but pays off a lot.
It's also worth researching your competitors' websites and seeing how people find them. Copy what works :)

Long Tail

The concept of "long tail" is about selling a huge variety of unique items in small quantities, rather than focusing on a few popular items in large quantities. In SEO and content marketing, this means using more specific and less competitive keywords that have fewer searches but attract people with clear buying intent and less competition.

So, instead of using "sneakers" to sell running shoes, you can use "Women's running shoes up to $100," for example.
It's all about niching down and being extremely specific. You can incorporate this into your site using blog posts, making YouTube videos and linking them to your site, and in other ways too.

Again, it's not you who defines these ideal words. Use tools like Google Keyword Planner, Ahrefs, SEMrush, and Ubersuggest to identify long-tail keyword opportunities.

And when using them, make sure to include them in titles, subtitles, and the tags I've already shown you in this article.

The robots.txt file is a file that tells search engines what they can and cannot access on your site. It resides in the root of the domain and has a simple structure:

Basic Structure

User-agent: *
Disallow: /admin/
Disallow: /private/
Allow: /public/

Sitemap: https://www.exemplo.com/sitemap.xml

Key Elements

User-agent: Specifies which robots the rule applies to. * applies to all.
Disallow: Blocks directories or files.
Allow: Allows specific directories or files. Benefits
Indexing Control: Decides what search engines see.
Security: Protects sensitive areas.
Optimization: Directs robots to important parts of the site.

Remember: Anyone can view your robots.txt, and not all robots follow the rules.

Sitemaps

A sitemap is a file that lists all the pages of your site to help search engines find, crawl, and index your content more efficiently. It can be in XML or HTML format.

Types of Sitemaps

XML Sitemap: Made for search engines. Contains URLs and information like last update, change frequency, and relative importance of pages.
HTML Sitemap: Made for users. Provides an overview of the site's content, making navigation easier.
Basic Structure of an XML Sitemap
Here's a basic example of an XML sitemap:

<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
   <url>
      <loc>https://www.example.com/</loc>
      <lastmod>2024-07-08</lastmod>
      <changefreq>monthly</changefreq>
      <priority>1.0</priority>
   </url>
   <url>
      <loc>https://www.example.com/page1</loc>
      <lastmod>2024-07-08</lastmod>
      <changefreq>weekly</changefreq>
      <priority>0.8</priority>
   </url>
   <!-- Mais URLs -->
</urlset>

Key Elements of an XML Sitemap

<loc>: URL of the page.
<lastmod>: Date of last modification.
<changefreq>: Expected change frequency (daily, weekly, monthly, etc.).
<priority>: Relative importance of the page (0.0 to 1.0).

Benefits of a Sitemap

Better Crawling: Helps search engines find all pages, even deep ones.
Quick Indexing: New or updated pages are indexed faster.
Organization: Keeps the site well-organized and improves user navigation (for HTML sitemap).

How to Use:

Create the Sitemap: Use tools like Yoast SEO (for WordPress), Screaming Frog, or online sitemap generators.

Submit to Search Engines: Submit the sitemap through Google Search Console and Bing Webmaster Tools.

Example of Inclusion in robots.txt

Sitemap: https://www.exemplo.com/sitemap.xml

A sitemap is essential to ensure that search engines find and index all the important content on your site, helping to improve SEO and user experience.

Bonus - Use Next.js

Next.js is a powerful framework that brings us some advantages in improving SEO.
But I need to be honest, it's not the only one. There are others like Astro and Nuxt that also do this very well and make your life easier.
SSR, SSG, Image optimization, among other advantages make Next.js a great tool to assist you on this journey.

Well guys, that's it.
With these practices, you'll be on the right track to increase qualified traffic and the success of your blog.
Remember that SEO changes all the time, so always seek the best and most updated strategy for you.

If you like this type of content and plan to launch your own SaaS someday, come with me and follow me. I post daily content on my Twitter and weekly on my YouTube channel.
This article will also be available in video format very soon on my YouTube channel:
https://youtube.com/@daniellimae

https://x.com/daniellimae

how to get more views

Daniel Lima — Thu, 04 Jan 2024 20:08:40 +0000

If you write articles in english, this post is for you.
This was a game changer for me in my articles.
This was how I grew my audience in one simple step:

Everything that I wrote I pasted at GPT and prompt "Do better"..
To seams like a "native guy", BUT, guess what:
I'm not a native, and the reader probably neither.

The main issue was thinking that english is a tool to use with only
u.s.a / Europe persons.
But is a tool to communicate between the whole world.
And the majority ✨ don't is native speaker✨.

So fancy words by GPT will became boring.

If you want to seams smart, and cool use fancy words. Keep going.

BUT, if you really want to be understood and pass on valuable knowledge:

A good teacher transform hard in easy.
Talk easy. Write easy.✌🏽

Article Every Day April

Daniel Lima — Sun, 16 Apr 2023 04:59:52 +0000

1# April, I decide to be a more productivity person.
At first, the main idea was to record videos, and --force me to learn new things every day.

So I decide to start my journey building articles, and create this challenge in order to help me learn how to communicate with my public.

And here are the main things that i learned until day 15.

Improve My English Skills

My mother language is Portuguese ( I'm from Brazil 🇧🇷 ).

Of course that write every day using english was a game change for my language skills. My communication in english just became much better. The words come into my mind much easier.

Now I think and write just in English, don't need to translate every time anymore. And in case I don't know a word or if I want to say the hole think in a better way, I force myself to write that in another perspective.

It's more about me than pass content

I can just lie for you and say that my main thing is to just pass information for a person who don't know about the article title. But sometimes even I din't knew every thing about the article title. Write force me to learn. Or if I learn some new, it force me to write . Is a two-way street.

I guess this of course is my intention, but is not the main.

My main intention writing articles is to improve my skills, make a "DUMP" of what I learned.
If you learned something about what i wrote, good for you. I'm glad too about it!

Deal with criticism, not everybody likes you

I receive fews bad feedbacks, but at begin i was too scary about how people could criticism me like :

Bro wtf, this is not real, because I'm a bad ass on this subject and you are totally wrong .

But I just realized that if my main intention was to learn and improve my skills, even if I'm totally wrong, that is ok.
If someone correct me or add a new issue about what I write i will be GLAD and not scary.

Of course that I try my maximum to pass a real and truth information. But I make mistakes, and that is ok .

Learn how to learn 🤯

The first think you should do as a developer is learn the right way to put new content in your mind.

And this is a hard task because I can not give you a to-do list or a tutorial to show the best ways to fix something. Of course I can give you ways that are good for me, but learn the "right" way to lear is a thing that only you can discover.

For example, I don't like to take notations about every thing at Notion. I guess this take a huge time for me and I never come back to read. So I discover that write articles and do some content at public is the best way FOR ME.

GTP: use but not abuse

To write content at begin I input every phase at GPT and ask him to "improve" or to "write this in a better way". And in my opinion this is the wrong way for me. I was insecure about my english skills and try hard to make sure that my article should have the "best english ever".

But this is a mistake. The most part of my audience ( and I ) are not native english speakers. So write in a simple way, without using fancy words is the best way to learn.

So now you can see several gramar errors, but my main intention is to communicate with you and dump info for me at future.

## Every day was not cool for me

Now I realized that the best option is one video per week with a good and more elaborate article. I guess that allows me to understand more about the hole theme.

Make a unique article per day don't allow me to get deep at the subject. So for now I will reduce the occurrence, to 1 video and article/week .

Follow me here if you want to see more content :)
Or at twitter @daniellimae

🔒Security Tips for Frontend

Daniel Lima — Fri, 14 Apr 2023 22:49:12 +0000

Do a frontend app is more than just center a div and background color your button ( unfortunately ).

As a front-end developer, it's important to prioritize security measures in your code.

Despite focusing on performance, SEO, and UI/UX, security is just as crucial. Even big frameworks like React and Angular can leave your code vulnerable to cross-site scripting (XSS) attacks due to risky operations like dangerouslySetInnerHTML and bypassSecurityTrust APIs.

It's essential to remember that front-end development has just as much responsibility for security as back-end or DevOps. Malicious attacks can occur from the front end, so it's important to take proactive steps to protect against them.

So, today i'm going to show you how hackers can enjoy about your Frontend application gap.

Data Stored in Browser Memory

Nowadays get vantage about cookies and Local Storage is a common and very effective way to bad folks stole your user information.

So be aware at store info at browser those data,

Avoid storing sensitive data such as authentication tokens or passwords in browser memory. Instead, use secure HTTP-only cookies or other secure storage mechanisms.
Use HTTPS to encrypt all data transmitted between the client and server. This can help prevent attackers from intercepting and accessing sensitive data.
Use encryption to protect sensitive data stored in local storage or cookies. This can make it more difficult for attackers to decipher any data they may obtain.
Implement proper input validation and sanitation to prevent attackers from injecting malicious code into web forms or other input fields.
Monitor and log all client-side activity, including data stored in local storage and cookies, to detect any suspicious activity.
Avoid using input type="hidden" fields to hide sensitive data in web pages, as this data can be easily accessed and manipulated by attackers. And about that topic ...

Inputs and Hidden information

It's important to be cautious when using hidden fields or storing sensitive data in the browser's memory.

Adding input type="hidden" or storing information in localStorage, sessionStorage, or cookies does not guarantee safety. Attackers can easily access everything stored in the browser's memory, including in-memory variables, by opening dev tools.

If you've hidden an authentication page based on values stored in the browser, attackers can use inspection tools like ZapProxy to expose those values and use them for further attacks.

Therefore, it's best to avoid using type="hidden" and store keys and authentication tokens elsewhere instead of in the browser's memory storage.

Inputs strict

It's crucial to ensure that user input is strictly regulated to prevent security vulnerabilities such as SQL injection and clickjacking. To accomplish this, it's essential to validate and sanitize user input before transmitting it to the back end.

SQL Inject

While SQL injection attacks are usually associated with vulnerabilities on the server-side, it's still possible for attackers to manipulate data entered on the client-side in such a way that it causes a SQL injection vulnerability.

Here is a quick resume about it:

Use prepared statements or parameterized queries to interact with the database. This can help prevent SQL injection attacks by automatically escaping and quoting user input.
Avoid dynamically building SQL queries with user input. Instead, consider using an ORM (Object-Relational Mapping) library, which can handle SQL interactions automatically.
Use server-side validation to ensure that only expected types of input are accepted, and to limit the size of inputs. This can help prevent SQL injection attacks that use long strings to exploit vulnerabilities.
Avoid displaying SQL errors on the front end, which could give attackers insight into potential vulnerabilities. Instead, log errors on the server-side and provide a generic error message to users.
Consider using a web application firewall (WAF) to help prevent SQL injection attacks. A WAF can inspect incoming requests and block those that appear to be malicious.

By following these best practices, you can help ensure that your frontend code is less vulnerable to SQL injection attacks.

Disable iframe Embedding

One way to protect against clickjacking attacks is to disable iframes. To do this, you can include the "X-Frame-Options": "DENY" header in the request, which prevents the website from being rendered in a frame.

Another technique is to use the frame-ancestors CSP directive. This allows you to control which parents are allowed to embed the page in an iframe, giving you more control over the context in which your website can be displayed.

Always Set Referrer-Policy

When you include links that navigate away from your website using an anchor tag, it's important to use header policies like "Referrer-Policy": "no-referrer" or set rel="noopener" or rel="noreferrer".

If you don't set these headers or attributes, the destination website can potentially obtain sensitive data such as session tokens or database IDs. By using these measures, you can help protect against data leaks and keep your users' information secure.

Avoid Third-Party Services

Didn't your mother tell you to avoid talking to strangers? The same goes for that dubious library to format phone numbers (just an example).

Adding just a single line of code for third-party services such as Google Analytics, Google Tag Manager, Intercom, or Mixpanel can create a vulnerability in your web application. Imagine a scenario where one of these services gets compromised.

To prevent this, it's important to have a strong Content Security Policy (CSP) in place. Most third-party services have a defined CSP directive, so make sure to add them.

Additionally, whenever you add a script tag, be sure to include the integrity attribute whenever possible. This feature, known as Subresource Integrity, validates the cryptographic hash of the script to ensure that it hasn't been tampered with. By taking these steps, you can help protect your web app from potential security threats.

Here are some others articles about that topic :
https://betterprogramming.pub/frontend-app-security-439797f57892

https://securitytrails.com/blog/frontend-security-best-practices

👥 How to clone a website into a Chrome Extension.

Daniel Lima — Thu, 13 Apr 2023 23:41:47 +0000

This is a simple tutorial to how clone a website into a chrome extension .

Full repo : https://github.com/bolodissenoura/chrome-extension

Actually is not a real clone, we will reproduce the hole website if a iframe tag and show it on a google extension.

There are some reasons to you do it. But today i will clone a real open-source project called Phived.

Phived is a dead-simple, anti-procrastination to-do list. you can have up to 5 tasks at a time. to add more tasks, complete some of your ongoing ones. no login, no cookies, no images and no ads.

Phived website: https://www.phived.com/

Let's start

Step 1# - Create a folder

mkdir my-extension

Step 2# - Create a `128.png` file as your logo

Create a 128p by 128p logo for your app.
In the app folder, save the file as 128.png.

Step 3# - Create a `Popup.html` file

At the src you should put your website.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Phived</title>
  </head>
  <body>
    <iframe
      src="https://www.phived.com/"
      style="
        overflow: auto;
        height: 500px;
        width: 500px;
      "
      title="W3Schools Free Online Web Tutorials"></iframe>
  </body>
</html>
Ï

Step 4# - Create a `manifest.json` file


{
  "manifest_version": 2,
  "name": "phived",
  "version": "1.0.0",
  "icons": {
    "128": "128.png"
  },
  "description": "Anti-procrastination to-do list. you can have up to 5 tasks at a time. to add more tasks, complete some of your ongoing ones. no login, no cookies, no images and no ads.",
  "content_scripts": [{ "matches": ["<all_urls>"], "js": ["Content.js"] }],
  "browser_action": {
    "default_popup": "Popup.html",
    "default_title": "phived"
  }
}

Step 5# - Run and test

Save the app or extension folder on your test device.
Go to chrome://extensions/.
At the top right, turn on Developer mode.
Click Load unpacked.
Find and select the app or extension folder.
Open a new tab in Chromeand thenclick Appsand thenclick the app or extension. Make sure it loads and works correctly. If needed, make changes in the manifest.json file, host the app folder, and retest it. Repeat until the app or extension works correctly.

If every things runs ok, you should see your extension like that:

Hope this post can be helpful!
For some feedback or more content, follow me on twitter or github

👨🏽‍🎨 The art of frontend freelancing - My journey

Daniel Lima — Thu, 13 Apr 2023 00:38:41 +0000

If you just want to code, this article isn't for you.

Be a freelancer is more than just go to platforms, get a job and start to code.

And, in my opinion, be a developer is much more than just code and chill.

In this article i will show a new way to get new clients and to make your career as a freelancer grow up.

My experience as a freelancer

I did freelances job for 2 years. I was not just a freelancer ( i worked as a Software Developer too), but 1/3 of my money at this time came from those jobs. So at this time i learned how to get new clients and how to make then happy with the product 😄.

I founded a marketing and websites agency, called ©Vetrin. At begin was just me. myself and I doing everything. And at the end of my journey at this company I was with 4 people working with me at the agency.

Freelances Plataform

It's important to treat your freelance work like a real business and not just as a developer. This means taking a 'holistic' approach to your work by focusing on marketing, improving your clients' experiences, and always looking to grow and scale.

While freelancing platforms like Workana can be a great way to find clients, I have never got lucky with then ( and i tried a lot ). But never succeed.

 Success as a freelancer takes time, effort, and dedication. But by treating your work like a real business and focusing on marketing and growth, you can create a sustainable and fulfilling career for yourself.  

But if you want to just develop and don't care about "marketing" and "company stuffs", a good start is to search about freelance agencies, show some projects in a portfolio .

How to find clients tho ?

All my clients were from indications and marketing adds that I launched for my service. Is good to be focused on a specific niche tho.

What niche ? How do i start tho ?

I started my freelance wallet with doctors that need websites ( for example ). And a part of my job was found those potential clients and approach then with problems.

After storing telling about problems I bring solutions and sell it for then.

But you can approach and start for any niche. Everybody needs a website or a solution to improve the routine. You need just to learn about "how to be a good seller".

Think like a company.

💨 Running adds, approach clients. Move !

Have a portfolio is a duty. You need it !

Why should i pay for you if i don't know if you really can do it for me ?

And if you show a niche portfolio for your client he will felling a FOMO ( Fear Of Messing Out ). So you must and want induce this feeling in then.

In each niche the approach technique could be different, but a general and easy way is: go at instagram profile, if the account have not a website on bio, congrats, you have a potential lead.

If the lead already have a website ( and if you can do better ) you can approach tho.

Running adds on TikTok and Facebook Ads for Instagram is a good ideia too ! Do it if you want, a simple video with a good Call To Action ( CTA ) should bring you a lot of leads.

After start and why i stopped.

The beginning is the hardest part. After conclude some jobs and make some clients happy, they will telling about you for their friends, you could have a coupon too to stimulate that ( there are some techniques for that ).

All things were looking fine, the team was growing. But, it is not scalable. Or if it is I did not found the way of scaling these kind of agency.

Today with AI revolution, maybe could be easier to scaling those jobs. But have clients is a hard work, especially if you have to talk with then every single day.

So I just sell my part of company and quit.

In this part I felt that I needed to study more and spend more time with my hard skills. But now i understand that i'm a life long learning :)

🎒 localStorage or 🍪 cookies : What's the difference?

Daniel Lima — Wed, 12 Apr 2023 02:35:09 +0000

LocalStorage vs cookies

The both are there for one reason: storage some information ( setItem ) and use it in other instance.

But there are some differences between then that you should know to choose the best option.

And you should avoid to only use one for every situation, think every time what is the best one for you in the moment. You can use both on your application for multiple screens and features.

🎒 Local Storage

LocalStorage is a storage mechanism available in modern web browsers that allows web applications to store data in the user's browser.

It provides a simple key-value store for data that can be accessed by JavaScript running in the user's browser.

The data stored in LocalStorage is persistent, meaning it will remain even if the user closes their browser or turns off their computer.

LocalStorage is typically used to store larger amounts of data that need to be accessed frequently, such as user preferences or session data.

🍪 Cookies

Cookies, on the other hand, are small text files that are stored in the user's browser by websites they visit.

Unlike LocalStorage, cookies can be set with an expiration date, meaning they will automatically be deleted after a certain amount of time.

Cookies are typically used to store smaller amounts of data, such as a user's login credentials or their shopping cart items.

Cookies are also sent back to the server with each request, which can be useful for things like tracking user behavior or maintaining a user's session.

About Next.js and SSR

If you're using Next.js, it's important to be aware that LocalStorage may not work as expected with server-side rendering (SSR). This is because LocalStorage relies on the browser's window object, which is not available during SSR. As a result, any attempts to access LocalStorage during SSR will fail.

To work around this limitation, you can use cookies instead. Cookies are supported during SSR, so you can use them to store data that needs to be accessed on both the client and server. There are libraries available, such as nookiesjs, that make it easy to manipulate cookies in Next.js applications.

By using cookies instead of LocalStorage, you can ensure that your application works as expected during SSR, while still being able to store and access data on the client-side.

What is the best option for me ?

Avoid to choose then like a soccer team, or some like this. Choose the best one for your feature and change if necessary.

In summary, LocalStorage and cookies are both useful storage mechanisms for web applications, but they have distinct differences that make them suitable for different use cases. By understanding the differences between these two mechanisms, developers can choose the best approach for their specific needs.

Hope this post can be helpful!
For some feedback or more content, follow me on twitter or github

How to refresh-token

Daniel Lima — Mon, 10 Apr 2023 22:09:09 +0000

Today i'm going to show you one way to refresh your token at front-end applications.

What is a token ?

In the context of computer programming, a token is a sequence of characters that represents a single, meaningful unit of information. Tokens are often used in programming languages, where they serve as the basic building blocks of code.

And in web applications we currently Json Web Tokens ( JWT ) to pass information and do/control authentication and authorization.

Ok, why i need to refresh it ?

Refresh tokens add to the security of OAuth since they allow the authorization server to issue access tokens with a short lifetime and reduced scope, thus reducing the potential impact of access token leakage. Refresh tokens are a convenient and UX-friendly way to obtain new access tokens after the expiration of older access tokens.

One reason for using refresh tokens is that they allow the server to revoke access, although not immediately, of users. Refresh tokens provide a nice division of responsibility and abstract out a large portion of the application in a well-documented, standard-based way. Refresh tokens also allow the same access token to be used for each request without reissuing it, which can significantly improve performance.

In fact, the real "excuse" for us for using refresh tokens is to provide a better user experience. A short-lived access token improves the security of applications, but frequent re-authentication can diminish the perceived user experience of the application. Refresh tokens help balance security with usability by allowing client applications to request new access tokens after the shorter-lived access tokens expire.

How can i do it ?

We have some option to do it, but the traditional way is :

Do the authentication, wait for the token expires, and when your user hit a 401 error do the refresh token and refetch the original request.

This is a noiseless way, your user don't will be alert about that, and will just keep using the app.

But, you there is another way to do it. You actually don't need to wait the 401 error, once you already know when the access_token will expires.

So, you can avoid those requestions, and when the toke is near to expires you do the refresh token without get the 401.

In that way, you will avoid several 401 errors and keep maintaining your refresh in a silent way.

Code example

This is a example using javascript, axios instances to listen the 401 and intercept it.

import axios from 'axios';

const api = axios.create({
  baseURL: 'https://api.example.com',
});

// Add the interceptors
api.interceptors.request.use(
  (config) => {
    const accessToken = localStorage.getItem('access_token');
    if (accessToken) {
      config.headers.Authorization = `Bearer \${accessToken}`;
    }
    return config;
  },
  (error) => Promise.reject(error),
);

// Add interceptor response
api.interceptors.response.use(
  (response) => response,
  async (error) => {
    const originalRequest = error.config;


    if (error.response.status === 401 && !originalRequest._retry) {
      originalRequest._retry = true;

      const refreshToken = localStorage.getItem('refresh_token');
      if (!refreshToken) {
        // Redirecionar para a página de login
        window.location.href = '/login';
        return Promise.reject(error);
      }

      try {
        const response = await axios.post('https://auth.example.com/refresh', {
          refresh_token: refreshToken,
        });
        const accessToken = response.data.access_token;

        // Storage the token
        // If you are using next, use nookies library to persist those data in cookies.
        localStorage.setItem('access_token', accessToken);
        api.defaults.headers.common.Authorization = `Bearer \${accessToken}`;

        // Send again the original request
        return api(originalRequest);
      } catch (error) {
        window.location.href = '/login';
        return Promise.reject(error);
      }
    }

    return Promise.reject(error);
  },
);

export default api;

Hope this post can be helpful!
For some feedback or more content, follow me on twitter or github

Emergency fund is mandatory for all developers

Daniel Lima — Sun, 09 Apr 2023 01:56:25 +0000

Money is a fundamental part of our lives. Everyone living in a capitalist system needs money. Whether you have a simple or expensive lifestyle, you need to provide for food, housing, and other necessities.

Today, I will argue why having an emergency fund is mandatory for anyone, especially for a developer.

In the Stone Age, people hunted and cultivated to have food. They made stocks to survive the winter and ensure that they and their families would survive. This behavior is not exclusive to humans; bears do it, bees do it, even plants store resources in case of scarcity.

And today, the main resource in a capitalist world is money. Homo sapiens sapiens need to work to buy food, a house, a car, Air Jordan 1s, and Macbooks.

And today you may (or may not) be in a privileged position to have everything in abundance, but unfortunately, that can change, and you MUST be prepared for it.

Once up a time, Joel the developer

Joel ever time felt afraid to report some problems that arose in his project for fear of losing his job.

He knew the company was going through financial difficulties and his team was overloaded with several projects. As a result, Joel ended up overwhelmed and could not complete all tasks on time.

Unfortunately, the situation worsened when one of the projects Joel worked on was completed with delay and errors due to work overload. As a result, the company had to lay off some employees, including Joel.

If Joel had an emergency fund, he could have faced the time off work with more ease and felt safer to report problems to his superiors. This could have helped the team fix errors and improve the project's performance, thus avoiding Joel's dismissal. The lack of an emergency fund affected not only Joel's financial life but also his career.

Fear of reporting and asserting oneself in a discussion for "losing the job" should not exist.

Unfortunately, this fake story of Joel happens frequently.

And you will only have no fear of lose your job if you have a solid base and money.

If the company where you work is like this, you need to have complete freedom to speak your mind and assert yourself in situations without fear of losing your position. This will help you grow as a professional.

Working without this "fear" is 100% crucial for a developer's life. Having a clear and fear-free mind is something that will improve your performance as a dev.

Overall

An emergency fund can have a significant impact on both your personal and professional life, especially as a developer. By having a financial cushion, you can avoid feeling anxious or fearful about unexpected events that may arise in your life. This can help you to have a more confident and assertive voice in your workplace, as you won't be weighed down by the fear of losing your job.

As a developer, having an emergency fund should be a top priority. It can give you peace of mind and allow you to focus on your work without worrying about financial stressors. Additionally, having a safety net can help you to take risks and pursue new opportunities, such as learning a new skill or taking on a challenging project.

An emergency fund is essential for anyone looking to maintain financial stability and achieve success in their career.

It can provide a sense of security and confidence that will allow you to thrive both personally and professionally.

Hope this post can be helpful!
For some feedback or more content, follow me on twitter or github

🌸 A elegant way to consume API's at front-end

Daniel Lima — Fri, 07 Apr 2023 23:00:18 +0000

Pros and cons / when to use the react-query library.

What is react-query and what pain point does it solve?

What is react-query and what pain point does it solve? Even though the library has changed its name (to TanStack Query), we will still refer to it as react-query here, ok?

On the library's website, it is described as: "The missing data fetching library for React apps, but in more technical terms, it makes it very easy to fetch, cache, synchronize and update server state in your React apps."

We can interpret this as: "I am a library that helps you fetch data more efficiently using my own hooks, store that data in cache for better performance, create a more reliable loading screen. In addition, I make the code more readable and easier to handle."

What other way is there to do this?

If you have used React in a project, you have probably come across the following syntax:

Explaining the code would be:

Importing axios and creating an auxiliary state for each functionality (error, data, and loading...) :

Using useEffect to call our function to hit the API and bring this data to set in our data State every time the component (or screen) is loaded.

But first, we set our two error and loading states to give the impression that it is "loading..." and that "there is no error", which is a lie because what is happening is "I haven't hit the API yet, I don't know what's going on there."

This way, the first thing your function does is not to hit the API but to set the various states.

I recommend reading "Why useEffect is a bad place to make API calls": https://articles.wesionary.team/why-useeffect-is-a-bad-place-to-make-api-calls-98a606735c1c.

and finally consume this data and states in our JSX return statement:

Although it may not be entirely accurate, this logic still works! And if your app doesn't have a large number of users and requests, I believe this code will serve its purpose without major issues.

What pain does React-Query solve?

Error handling: React Query provides an integrated way to handle server request errors. This can help you easily deal with common error scenarios, such as network failures and server errors.
With this, goodbye setIsError and its derivatives. Now, controlling error and loading states with React Query's own hooks has become much better:

We can also create a folder called "hooks" and fill it with hooks for each endpoint or API request. With this, we don't necessarily need this inelegant useEffect body with a new function call in each component/screen.

Simplified code: React Query can help simplify your code by reducing the amount of boilerplate code you need to write to handle server responses.

👉🏽 And the key differential of the library, for me, is:

Cache:

React Query's cache layer can help improve application performance by reducing the number of network requests needed to retrieve data. This can improve the responsiveness of the application and reduce server load a lot.

Optimistic updates: React Query allows you to update the cache with optimistic updates, which means you can update the user interface before waiting for the server response. This can make your application seem faster and more responsive.

When not to use it?

As great as the library may be, it's important to be cautious about over-engineering.

Learning curve:

React Query has its own API and it can take some time to learn how to use it effectively. It is also necessary to understand the underlying concepts of the library, such as cache, invalidation, and so on.

Not always necessary:

For smaller applications, it may not be necessary to use React Query. The cache and error handling features may not be as useful in small-scale applications where performance is not a major concern.

Integration with existing code:

If you are adding React Query to an existing codebase, you may need to refactor your existing code to work with the library. This can be time-consuming and increase the overall complexity of your code.

Overhead:

Like any library, React Query has overhead in terms of package size and performance. For small applications, this overhead may not be justified.

Final considerations

This article does not intend to teach you how to use react-query, but you can follow the step-by-step guide in the documentation:
https://tanstack.com/query/v4/docs/react/installation

Or if you need a video, we have Fernanda Kipper:
https://www.youtube.com/watch?v=ZI9uLACYAd0

Or a more specific one about cache:
https://www.youtube.com/watch?v=YmS5uo9ty2Q

Hope this post can be helpful!
For some feedback or more content, follow me on twitter or github

Beyond Changing Technology: Scaling Your Applications Efficiently

Daniel Lima — Fri, 07 Apr 2023 02:14:49 +0000

Often, when facing scalability issues in our applications, the first reaction is to think about changing the language or framework.

The technologies we use are indeed VERY important for how fast and scalable our application can be. However, they are not the only factors to consider.

However, this decision may not be the best one, as there are several ways to make your application faster and more efficient without changing technology.

Before we dive into the details of how to scale your application, it's important to understand what happens when a request reaches the server. When this happens, a web server (such as NGINX or APACHE) is responsible for processing the request and forwarding it to the corresponding application.

In other words, the web server is the first point of contact between your application and the user.

But as we are talking about dynamic applications, the path taken by the request does not end at the web server. The code of your application needs to be executed in some way, either through a script (in the case of Laravel, for example) or a process managed by an application server (such as Passeger, in the case of Rails). And of course, the information manipulated by the application is stored in a database.

All this to say that the scalability of an application depends on many factors beyond technology choice. To ensure that your application is scalable and does not present bottlenecks, it is necessary to take into account all these elements and optimize them in the best possible way.

In your application workflow, everything can be synchronous, meaning that if your database takes one second to load, your request will be delayed by one second. In such cases, the choice of your framework won't make a difference, as the bottleneck is likely to be at the database, server, or some other point in your application.

If you want a fast app, you need to be fast at every process.

Identify the bottlenecks.

For that you can use some tools, like New Relic

There are situations where everything seems to be okay.

Your application is configured correctly, but still, everything seems a bit stiff and slow in your product. I will address 3 common scenarios:

1 - Slow tasks:

Imagine that you have a feature where when the user uploads a CSV file, your application scans each line of that archive and saves it in a database.

If your CSV has 15 lines, it will be quick, but if it has a million lines, it may start to get slow. In this case, there isn't much to escape 😔.

It's a naturally slow process and task. But a good solution to improve your user's experience is to implement the concept of QUEUES 😎.

A queue works like this: you take a process that is being executed synchronously, and you isolate it in what we call JOBS. So now we have a Job that we can call "ProcessCSV." You put this in a separate class, and when the user sends the CSV, instead of processing it at that time, you send that job to the queue, which is another process that will take the jobs sent, process them, and delete them after processing. In other words, you make your application more asynchronous.

But this requires good UX; you have to make it clear to your user. Your client needs to know what is happening with the task they requested for your application. For that, I also recommend reading about State Machines.

2 - Cache is love, but not always love is good.

Let's say you have an application that returns a common API. It makes a query and returns the data from a table. If the data doesn't have a very fast mutability, meaning if you know that in a little while, if the user doesn't make any changes, the data will be the same, you can work with a cache. When making a mutation in your application, it's possible to implement an update of your cache when the mutation is completed. If you want to add new data, you can manipulate your cache to add this new post instantly to your user, without needing a refetch every time the user changes something.

Do not have outdated data, be careful.

However, this is not always good to do. Let's say your site returns the updated value of Bitcoin in relation to the dollar. For this, it's not interesting to persist this data 100% in cache, considering that in a short period of time, your user wants to know the new value of Bitcoin, given that it fluctuates a lot.

You can watch a comprehensive video where I explain how I implement cache writing in my frontend application

Tools for cache and examples of using

Imagine that you need to build a news website. If your site is small, it's fine to make 30 requests and query your database 30 times. However, if your task is to create the primary news portal for your country, there will be millions of requests at any given time for data that typically doesn't change very often. After all, the most that will happen is a writer editing a few details or deleting the news entirely, but they won't typically make thousands of edits per day.

To handle this level of traffic, you can use tools such as Varnish HTTP Cache, which caches the information of a news article starting from the first user who accesses and makes the request. Once Varnish caches the page, subsequent users will receive a response that is saved in memory. This process allows you to avoid unnecessary synchronous requests and send a quick response to users.

In other words, Varnish intercepts the request and sends a pre-cached, beautiful, and fragrant response to your users without overwhelming the server with millions of unnecessary requests. However, it's important to take some security measures, such as validating whether the news has been altered or checking if the content has changed.

Using a tool like Varnish HTTP Cache is a great way to make your page faster and handle high traffic volume with ease.

Last but not least - IMPROVE YOUR CODE

I will write a entire article about that, but for now:

Improving your code is crucial for the success of any programming project.
Bad code make all feature more difficult and take more time to be deployed. And time is money.

If you're working in a team, it's important to have the right tools and processes in place to ensure that everything is running smoothly. While there are many ways to achieve this, here are some key tips that you can implement:

Utilize efficient debugging tools to identify and resolve errors quickly.
Thoroughly test your code to catch any potential issues before they cause problems.
Use clear and descriptive variable names to improve readability and maintainability.
Make use of Lint tools to identify and fix common coding mistakes.

... (add additional tips as appropriate)

By following these best practices and continually refining your approach, you can ensure that your code is well-organized, reliable, and easy to maintain, ultimately leading to more successful projects and happier stakeholders.

Thanks @sibelius for give the question.
Thanks Fabio Akita and Mateus Guimarães for explain me some topics.

Hope this post can be helpful!
For some feedback or more content, follow me on twitter or github

DEV Community: Daniel Lima

⛳ Avoid problems with Feature Flags

⛳ Feature flags

More Than Just an If

User-Specific Flags

PostHog and Tools

Don't Just Disappear

🏆 Best guide to SEO for devs

Optimize Lighthouse

Metatags

O.G Open Graph

Defines the page title that will be displayed when the content is shared.

Provides a short and attractive description of the page.

Specifies the URL of a representative image of the page. This image will be displayed as a thumbnail when the page is shared.

Defines the canonical URL of the page, ensuring that the correct URL is associated with the content.

Indicates the type of content on the page, such as "website", "article", "video", etc.

Name of the site where the page is hosted.

Benefits of Using Open Graph

json-ld

Long Tail

Key Elements

Sitemaps

Types of Sitemaps

How to Use:

Bonus - Use Next.js

how to get more views

Article Every Day April

Improve My English Skills

It's more about me than pass content

Deal with criticism, not everybody likes you

Learn how to learn 🤯

GTP: use but not abuse

🔒Security Tips for Frontend

Data Stored in Browser Memory

Inputs and Hidden information

Inputs strict

SQL Inject

Disable iframe Embedding

Always Set Referrer-Policy

Avoid Third-Party Services

👥 How to clone a website into a Chrome Extension.

Let's start

Step 1# - Create a folder

Step 2# - Create a 128.png file as your logo

Step 3# - Create a Popup.html file

Step 4# - Create a manifest.json file

Step 5# - Run and test

👨🏽‍🎨 The art of frontend freelancing - My journey

If you just want to code, this article isn't for you.

My experience as a freelancer

Freelances Plataform

How to find clients tho ?

What niche ? How do i start tho ?

💨 Running adds, approach clients. Move !

After start and why i stopped.

🎒 localStorage or 🍪 cookies : What's the difference?

LocalStorage vs cookies

🎒 Local Storage

The data stored in LocalStorage is persistent, meaning it will remain even if the user closes their browser or turns off their computer.

🍪 Cookies

Unlike LocalStorage, cookies can be set with an expiration date, meaning they will automatically be deleted after a certain amount of time.

About Next.js and SSR

What is the best option for me ?

How to refresh-token

What is a token ?

Ok, why i need to refresh it ?

How can i do it ?

But, you there is another way to do it. You actually don't need to wait the 401 error, once you already know when the access_token will expires.

Code example

Emergency fund is mandatory for all developers

Once up a time, Joel the developer

Fear of reporting and asserting oneself in a discussion for "losing the job" should not exist.

Overall

It can provide a sense of security and confidence that will allow you to thrive both personally and professionally.

🌸 A elegant way to consume API's at front-end

Pros and cons / when to use the react-query library.

What is react-query and what pain point does it solve?

What other way is there to do this?

Explaining the code would be:

What pain does React-Query solve?

Step 2# - Create a `128.png` file as your logo

Step 3# - Create a `Popup.html` file

Step 4# - Create a `manifest.json` file