How to enable HTTPS on Webpack Dev Server

crysfel Programming

One of the most popular feature requests of the Music App is to support memberships using Stripe. A few days ago I decided to work on this new feature, however, I found a few challenges along the way. First of all, if we want to use Stripe we need to run our application over HTTPS, otherwise the JavaScript SDK doesn't run properly. In production that's quite easy to accomplish, in fact, the demo version, as well as the community I run using this software, are both running over HTTPS. But when Continue reading

The number of method references in a .dex file cannot exceed 64K

crysfel Programming

I've been maintaining a React Native app for several years now, I'm really happy with my stack as I can quickly add new features and iterate for Android an iOS. However, a few days ago I migrated to Sentry as my third-party service to keep track of crashes and errors in the app. Everything went well on iOS after installation, however, on Android, I started getting errors when trying to build the app. D8: Cannot fit requested classes in a single dex file (# fields: 67142 > Continue reading

Translating your product into multiple languages

crysfel Programming

Presenting your product to different audiences in different languages is very challenging. Over the years I've tried different approaches, but the one problem in common for all those approaches is the maintenance of the translations, is just impossible to keep track of all the changes over time. In this post, I will explain the different attempts to solve this problem and will show you what has worked for me. Loading JSON files on demand The first and most popular approach when it comes to Continue reading

Creating a hero header with a fixed image

crysfel Design

In this tutorial I'm going to show you how to create a Hero header with a fixed image as the background and an overlay gradient on top. The image will have cover the whole screen with some text and a call to action in the middle. As always, we are going to use tailwind for this! You can take a look at the final result here: See the Pen Fixed Hero Header by Crysfel (@crysfel) on CodePen. Defining the markup The first thing we are going to do is to define the markup for the header, as a rule of Continue reading

Downloading images with nodejs

crysfel Programming

A couple of weeks ago Facebook sent me an email informing me that all profile images will not be accessible anymore unless there's a token on every request. Given that I'm no longer supporting Facebook login, but still many of my users are using their Facebook profile image, I decided to pull all those images into my own server before facebook implements the new requirements. After a few hours of googling how to download images/binaries on NodeJS, and only finding old/deprecated implementations Continue reading

Optimizing aync calls in Node JS

crysfel Programming

A few months ago I was cleaning up an old node codebase, the endpoint was using promises to call several other API endpoints on the network, waiting for the response on all calls, and then building a JSON response to the client. While I was doing the refactor and cleaning up the code, I found some optimizations I'd like to share in this post. Improving readability In order to improve code readability and therefore lowering the maintenance cost for this service, I was introducing async/await to Continue reading

Why you should use tailwind for your next project

crysfel Opinions

Over the last 12 years I've been building Single Web Applications (SPAs). I've seen how the CSS landscape has changed, from the introduction of SASS, BEM, Bootstrap like frameworks, css modules, style components, etc. All of them trying to bring some sanity to the CSS madness! Definately some improvements over the years, but still all of these solution fail at some point. In the summer of 2018, I learned about a new utility framework called tailwind, the approach is completely different from Continue reading

Sticky banner with Tailwind

crysfel Programming

A few days ago I had to implement a sticky banner at work, at first I thought it would be a simple task but it took me quite some time to figure everything out. On the bright side, I've learned a few new things about CSS in the process. Here are the requirements: The component might be present sometimes depending on some custom logic on the backend. When present, it had to push all the content down and when closed by the user, it had to disappear with a slide up animation. Effectively animating Continue reading