DEV Community: Vitor Amaral

Feature Flags in Action: 13 Real-World Scenarios

Vitor Amaral — Fri, 06 Oct 2023 16:36:25 +0000

Feature flags have a wide range of use cases in software development and product management. They provide flexibility and control over feature releases and can be applied in various scenarios to improve development processes and user experiences.

Here are some common use cases for feature flags:

Phased Rollouts: Gradual feature rollouts are one of the primary use cases for feature flags. By releasing a feature to a small subset of users initially and gradually expanding access, you can closely monitor its performance and gather feedback, which helps identify and fix issues before a full-scale release.
A/B Testing: Feature flags enable A/B testing, where different variations of a feature are tested with distinct user groups to determine which version performs better in terms of user engagement, conversion rates, or other key metrics. This approach helps make data-driven decisions about feature design and functionality.
Canary Releases: Canary releases involve deploying a new feature to a subset of your production environment. Feature flags make it easy to create canary releases, allowing you to test new features in a real-world environment with reduced risk. If issues arise, you can quickly disable the feature for the affected users.
Hotfixes and Rollbacks: In the event of a critical bug or security vulnerability, feature flags can be used to quickly disable the problematic feature without requiring a full software redeployment. This ensures that the issue is mitigated while a fix is implemented.
Feature Toggles for SaaS Products: SaaS (Software as a Service) providers can use feature flags to control access to premium features or provide early access to new functionality for specific customers or user groups.
User Permissions and Entitlements: Feature flags can be used to manage user permissions and entitlements dynamically. They allow you to control which users or user groups have access to specific features based on subscription levels, user roles, or other criteria.
Configuration Management: Feature flags can be used for dynamic configuration management, enabling you to adjust application behavior without requiring code changes or redeployment. This is valuable for configuring application settings, external service endpoints, or feature parameters.
Feature Gating for Beta Programs: When running beta programs, feature flags can control which participants have access to beta features. This allows you to gather feedback from a select group of users before a wider release.
Dark Launching: Dark launching involves deploying a feature to production but keeping it hidden from users. Feature flags are essential for this use case, as they allow you to activate the feature for internal testing or monitoring while keeping it hidden from external users.
Geo-Targeting and Localization: Feature flags can be used to deliver region-specific or language-specific features to users in different geographical locations or language preferences. This is especially useful for global applications.
User Onboarding and Feature Tours: Feature flags can control the visibility of onboarding experiences and feature tours for new users, ensuring that they receive a guided introduction to the application's key features.
Performance Optimization: Feature flags can be used to enable or disable resource-intensive features dynamically to optimize application performance during peak usage times or on devices with limited capabilities.
Emergency Kill Switches: In the case of a critical issue or security breach, feature flags can serve as emergency kill switches, allowing you to instantly disable specific features across all instances of your application to mitigate the problem.

These use cases illustrate the versatility and power of feature flags in modern software development, enabling teams to manage features, test hypotheses, and respond to changing circumstances with agility and control.

Basestack Platform

Basestack is an open-source stack designed specifically for developers and startups. It offers a suite of tools, including Feature Flags, with additional tools such as Feedback, Forms, and more on the horizon. Our goal is to empower you to build great products.

🌐 Website | 📘 Docs | 💻 Github | 🐦 Twitter

September 🧑‍💻 Changelog

Vitor Amaral — Thu, 28 Sep 2023 17:19:44 +0000

This month, our focus was on enhancing deployment options for the platform and introducing the ability to access the complete project activity history.

Here are some of the key highlights from this month's updates:

🚢 Deploy to Render

We have recently added a deployment guide to our documentation that provides step-by-step instructions on how to deploy the platform on Render.

To simplify the process, we have included a render.yaml file at the root of the project, which contains all the essential services required to run the entire platform seamlessly within Render. These services include the Database, the PgBouncer Service, and the Feature Flags Platform.

When you fork and clone the repository and import it into your Render Account, Render will automatically detect the configuration file and provide guidance on filling in the necessary details.

🪐 Deploy to Netlify

Much like Vercel, Netlify simplifies the deployment of front-end applications for developers. We've now included a comprehensive guide in our documentation on deploying the Feature Flags Platform with Netlify. The platform leverages Netlify Functions to deploy serverless code efficiently.

Please note that you will still require an external Postgres Database Service (such as Neon) for seamless operation.

⌛ Project Activity Page

We initially introduced the Feature Flags Platform with the capability to track Flag Activity, which proved invaluable for team collaboration. However, we noticed that once a Flag was deleted, the associated activity was no longer visible.

To address this, we've now introduced a General Activity Modal for the Project. This enhancement allows any developer or team member to access a comprehensive activity log, even when a flag has been deleted. It's a valuable addition to tracking project changes and maintaining transparency within your team.

⛓️ Upgrade to Node 18

We were using Node.js version 16, but to stay up-to-date with security enhancements and Node.js features, we upgraded to Node.js version 18. As a result, the required version to run the project or deploy is now Node.js 18.

🎯 Improvements and fixes

As part of our routine maintenance, we've cleaned up, fixed, and improved various aspects of the platform. Additionally, we've upgraded the packages used to ensure we stay current with the latest features and security patches.

Basestack Platform

🌐 Website | 📘 Docs | 💻 Github | 🐦 Twitter

Feature Flags with JavaScript Proxies

Vitor Amaral — Tue, 12 Sep 2023 18:20:20 +0000

JavaScript Proxies are objects that can intercept and customize the behavior of fundamental operations on other objects, such as getting and setting properties, invoking functions, and much more.

With JavaScript Proxies, you can create "virtual" objects that behave like real objects. This is achieved by intercepting calls to certain methods and functions and allowing you to customize the behavior of those calls.

const targetObject = {
  name: 'Alice',
  age: 28
};

const handler = {
  get: function(target, property) {
    console.log(`Getting ${property}`);
    return target[property];
  },
  set: function(target, property, value) {
    console.log(`Setting ${property} to ${value}`);
    target[property] = value;
  }
};

const proxyObject = new Proxy(targetObject, handler);

console.log(proxyObject.name); // Logs "Getting name" and "Alice"
proxyObject.age = 29; // Logs "Setting age to 29"

Proxies can be used to implement feature flags in JavaScript in a flexible and powerful way. Here are some of the benefits of using proxies for feature flags:

Dynamic feature flag evaluation: Using proxies, you can dynamically evaluate whether or not a particular feature flag is enabled or disabled. This allows you to change the behavior of your application in real-time, without having to restart the application or update the code.
Customizable flag behavior: Proxies allow you to customize the behavior of a feature flag based on the context of the application. For example, you could enable a feature flag for a particular user or group of users, or enable a feature flag only in a particular environment.
Separation of concerns: By using proxies to implement feature flags, you can separate the concerns of feature flag management and application logic. This allows you to more easily manage your feature flags and update them without having to modify the application code.
Testing and experimentation: Using proxies, you can experiment with different feature flag configurations and test the impact of those changes on your application. This allows you to make data-driven decisions about feature flag behavior and optimize the user experience.

Examples of how you can use JavaScript proxies to implement feature flags:

1. Dynamic flag evaluation

In this example, we use a proxy to dynamically evaluate the newFeatureEnabled feature flag based on the current date. The get method of the proxy intercepts calls to the newFeatureEnabled property and returns true if the current date is after September 1, 2023. This allows us to enable the new feature dynamically without having to restart the application or update the code.

const featureFlags = new Proxy({
  newFeatureEnabled: false
}, {
  get(target, property) {
    if (property === 'newFeatureEnabled') {
      const date = new Date();
      return date >= new Date('2023-09-01');
    }
    return target[property];
  }
});

if (featureFlags.newFeatureEnabled) {
  // Code for new feature goes here
}

2. Customizable flag behavior

In this example, we use a proxy to customize the behavior of the newFeatureEnabled feature flag based on the current user. The get method of the proxy intercepts calls to the newFeatureEnabled property and returns true if the current user has access to the new feature. This allows us to enable the new feature for certain users or groups of users.

const featureFlags = new Proxy({
  newFeatureEnabled: false
}, {
  get(target, property) {
    if (property === 'newFeatureEnabled') {
      const user = getCurrentUser();
      return user.hasAccessToNewFeature;
    }
    return target[property];
  }
});

if (featureFlags.newFeatureEnabled) {
  // Code for new feature goes here
}

3. Separation of concerns

In this example, we use a proxy to separate the concerns of feature flag management and application logic. The get method of the proxy intercepts calls to any property and fetches the corresponding feature flag value from the server. This allows us to update the feature flag values without having to modify the application code.

const featureFlags = new Proxy({}, {
  get(target, property) {
    // Fetch feature flag value from server
    const value = fetchFeatureFlagValue(property);
    return value;
  }
});

if (featureFlags.newFeatureEnabled) {
  // Code for new feature goes here
}

4. Testing and experimentation

In this example, we use a proxy to experiment with the newFeatureEnabled feature flag. The get method of the proxy intercepts calls to the newFeatureEnabled property and returns true for users in the experimental group. This allows us to test the impact of the new feature on a small group of users before rolling it out to everyone.

const featureFlags = new Proxy({
  newFeatureEnabled: false
}, {
  get(target, property) {
    if (property === 'newFeatureEnabled') {
      const experimentGroup = getCurrentExperimentGroup();
      if (experimentGroup === 'experimentalGroup') {
        return true;
      }
    }
    return target[property];
  }
});

if (featureFlags.newFeatureEnabled) {
  // Code for new feature goes here
}

Conclusion

Overall, using proxies for feature flags can provide a more flexible and powerful way to manage feature flag behavior in your JavaScript application. By separating the concerns of feature flag management and application logic, you can more easily manage your feature flags and optimize the user experience of your application.

Basestack Platform

Hello, World!

Vitor Amaral — Thu, 31 Aug 2023 19:04:27 +0000

This simple "Hello, World!" is here to introduce you to Basestack and let you know that we're developing this project transparently and in the open.

What Exactly is Basestack?

Basestack is an open-source stack designed specifically for developers and startups. It offers a comprehensive suite of tools, including Feature Flags, with additional tools such as Feedback, Forms, and more on the horizon. Our goal is to empower you in building great products.

Why Choose Our Feature Flags Platform?

Basestack Feature Flags is a self-hosting platform that provides an effortless method to host your very own Feature Flags management platform. By leveraging services like Vercel, any developer, whether an indie or startup, gains full control over their features and data. Ultimately, the platform is housed in your account, under your management, giving you complete control over your data.

Tools

⛳ Feature Flags (Beta) Docs | Website
📄 Forms (Planned)
💬 Feedback (Planned)

Check more at:

Sudoku Neumorphism Design

Vitor Amaral — Mon, 10 Jan 2022 18:33:50 +0000

Sudoku Neumorphism Design

This CodePen was created by @amaralflavio (aka my little brother), it shows a take on Neumorphism Design, the code is on codepen to try it out and the credit to the author of the design. The code and demo https://codepen.io/flavio_amaral/pen/oNGPqEN

Sharing here to give him some love.

Credits: - Design based: https://dribbble.com/shots/10474707-Experimental-UI-animation - Font: https://fonts.google.com/

Dropdown Menu with effect of replacing system cursor through hover

Vitor Amaral — Mon, 14 Jun 2021 13:20:36 +0000

Dropdown Menu with effect of replacing system cursor through hover

This CodePen was created by @amaralflavio, it shows a dropdown with a different take on the hover effect. When hovering on each item, the icon of each social network appears, replacing the system cursor.

The code and demo https://codepen.io/flavio_amaral/pen/xxqQLoa

Diary (Free) by Storytics / Journal with Pin

Vitor Amaral — Sat, 29 May 2021 13:11:33 +0000

Diary (Free) by Storytics is a diary/journal where you can use to reflect on the past or plan for the future. Focused on simplicity, keep your thoughts organized by several diaries/journals with unlimited pages securely through a pin code.

With a simple and clear design, you can easily focus on writing and if you write your diaries/journals at night, take the opportunity to switch to the dark theme and write in a beautiful text-focused editor.

Secure and Private:

Write your diaries in a safe environment where only you have control over the content that is created, and if you want you can enable a pin code/biometry layer to your Diaries or Journal.

Customizable, Easy, and Minimalist:

Simple and minimalist, Diary by Storytics offers a simple experience of writing journals, diaries with support for light and dark themes. Finally, organize your diaries through color customization, a simple way to organize your memories.

Automatic Database Backup:

If you want to keep your diaries and journals in a safe place without losing them in case something happens to your phone, then the premium plan is perfect for you.

Included in your Diary:

Simple and beautiful design;
Text-focused editor;
Private and with support for Pin Code;
Dark and light themes;
Customization of diaries/journals through colors;
Automatic Database Backup with Premium (optional)

Useful links

Our First App on Google Play and is a Diary/Journal App

Vitor Amaral — Tue, 11 May 2021 16:21:26 +0000

First of all, a little description about the App

Diary by Storytics is a private and offline-first diary where you can use to reflect on the past or plan for the future. Focused on simplicity, keep your thoughts organized by several diaries/journals with unlimited pages securely through a pin code.

About Us

My brother (@amaralflavio) and I we create web templates under the Storytics brand and we proposed to challenge ourselves by creating our first Android App, we have worked in this area (programming) for some time and we have always made web and mobile apps for others (companies) but never something of ours, with our vision and design.

Why another Diary App?

Everything I would say about Diary apps already exists and probably hundreds of them. Our goal was not to reinvent the wheel or create the next big thing. We just wanted to develop and launch something that was ours.

So, our focus was:

No need for internet connection, no trackers, no ads and if you want you can enable a pin code/biometry layer. Simple and minimalist, with a simple experience of writing journals, diaries with support for light and dark themes.

What was our tech stack?

Below, only the libraries that stand out are mentioned, what we can get out of here is that the app was developed with Expo.

From the Expo Docs: "Expo is a framework and a platform for universal React applications. It is a set of tools and services built around React Native and native platforms that help you develop, build, deploy, and quickly iterate on iOS, Android, and web apps from the same JavaScript/TypeScript codebase."

Expo & React Native
TypeScript
Styled-Components
i18n-js
SQLite
DayJS
React Navigation

Why is it paid and no support for iOS?

The app is paid because in this way it supports our work and keeps the app in development (new features, fixes and updates). When it comes to iOS it is due to the same reason, because the app is ready to be launched for iOS and all this thanks to Expo.

We did not want to follow this path, but we want to give the same experience to users who prefer free apps and for this we are creating a version of the app with all the features but in this case, there will be ads

How can you help us?

One of the ways you can support us is by downloading the app on Google Play. But all contributions are welcome, contributions such as: Share the App on social networks or comment below with your feedback.

Amazing Tab Bar (Animated)

Vitor Amaral — Sun, 11 Apr 2021 12:44:17 +0000

Animated Mobile Tab Bar

This CodePen was created by @amaralflavio (aka my little brother), it shows a cool tab bar animation that can be used for a mobile navigation. The code and demo https://codepen.io/flavio_amaral/full/xxgYGrR

Sharing here to give him some love.

Credits: - Design based: https://dribbble.com/shots/10474707-Experimental-UI-animation - Icons: https://icons.getbootstrap.com - Colors: https://material.io/resources/color - Font: https://fonts.google.com/ - Image: https://www.pexels.com/ - Jello Animation: https://animista.net/play/basic

Just launched UpStamps on ProductHunt 🚀

Vitor Amaral — Sun, 28 Jun 2020 14:36:46 +0000

What is UpStamps?

UpStamps is a Feature Flag Management Platform that lets you manage every feature with a central visibility and control user interface. Teams and developers are managing their projects using feature management to progressively deliver features to users with confidence.

UpStamps helps you test in production without deployments and offers easy to use SDKs and Components for development teams to quickly build and deploy applications.

Key Features:

Create Projects:

Integrate different Feature Flags across multiple projects and manage across the web, mobile, and server-side applications.

Organize by Environments:

Separate features deployment across different environments and control their feature lifecycles.
Easily Deploy with Feature & Remote Flags:

Use flags to test faster in Production, eliminating the risk by maintaining control of the deployments. Use Remote Flags to change in real-time behavior of features through response data.

Run A/B Tests:

Use A/B Tests to randomized experiments with two variants and compare them with the user's response. Decide by your user's feedback which variant is more effective to launch.
Target Specific Segments:

Control who has access to new features with Segments and define Targets based on Users Device or Location.

Why I created UpStamps?

Why did I create UpStamps? In the projects where I work professionally, I started to notice a fear of launching new features for production. The old method delayed the launch of new features and this was not even the most relevant point. Sometimes there were situations where it was necessary to have certain features in production for specific users and we (the developers) had to use localStorage and variables to manipulate the visibility of the feature, then we always had to work on the code to disable or activate it.

So I developed a simple platform to help teams and developers to launch production features more confidently

Let me know what you think and comment below if you’d like! ❤️

ProductHunt Link

Web Friday: Hunt 2

Vitor Amaral — Fri, 05 Jun 2020 17:29:55 +0000

Web Friday Hunt is new series of publications that I will start doing every Friday, sharing here links to articles, applications, tools, tutorials or anything related to developers that I will find on the internet.

In context, I am always looking for new things on the internet related to programmers, this can be new tools, libraries or even frameworks. Most I keep in my bookmarks to be able to use or even experiment in the future

I hope you like the list below, contribute or discuss any of the links mentioned by leaving a comment.

Previous hunts: [1]

The Hunt

Tools, Libraries & Frameworks

Open Source

Apps & Products

Articles & Tuts

Summary

As you can see, it is a highly opinionated list, but these are things that I find and keep and now I will share with you every Friday.

Leave in the comments how I can improve with new categories, or another aspect. Thank you for your time and good Friday. 🚀

Web Friday: Hunt 1

Vitor Amaral — Fri, 29 May 2020 20:05:50 +0000

Web Friday Hunt is a new series of publications that I will start doing every Friday, sharing here links to articles, applications, tools, tutorials or anything related to developers that I will find on the internet.

I hope you like the list below, contribute or discuss any of the links mentioned by leaving a comment. By the way, I wanted to know if you prefer these posts with a cover or without a cover image?

The Hunt

Tools, Libraries & Frameworks

Open Source

Apps & Products

Articles & Tuts

Summary

As you can see, it is a highly opinionated list, but these are things that I find and keep and now I will share with you every Friday.

Leave in the comments how I can improve with new categories, or another aspect. Thank you for your time and good Friday. 🚀