We use i18next to handle our localizationrequirement. We have written in great detail how we usei18next and react-i18next librariesin our applications. As our translations grew, we realized instead of adding every combination of thetexts as separate entries in the translation file, we can reuse most of them byutilizing the i18next interpolation feature. Interpolation isone of the most used functionalities in i18n. It allows integrating dynamicvalues into our translations. { "key": "{{what}} is {{how}}"} i18next.t("key", { what: "i18next", how: "great" });// -> "i18next is great" Proble ..read more

When developing a web application, there could be numerous instances where wedeal with timers. The timer functions such as setTimeout, and setIntervalare basic browser APIs that all web developers are well acquainted with. Whentrying to implement something like a self-advancing timer, these timer APIs makethe job easy. Let's consider a simple use case. In React, if we are asked to implement acountdown timer that updates the time on the screen every second, we can use thesetInterval method to get the job done. const CountDownTimer = () => { const [time, setTime] = useState(10); useEffect ..read more

This is part 3 of our blog on how we are buildingneetoRecord, a Loom alternative. Here arepart 1andpart 2. In the part 1 of our blog, we uploaded the recording from the browser to S3 insmall parts and stitched them together to get the final WEBM video file. Wecould use this WEBM file to share our recording with our audience, but it has afew drawbacks: WEBM is not universally supported. Though most modern browsers support WEBM,a few browsers, especially devices in the Apple ecosystem, do not play WEBMreliably. Metadata for timestamps and duration are not present in WEBM videos. So,these vid ..read more

This is part 2 of our blog on how we are buildingneetoRecord, a Loom alternative. Here arepart 1andpart 3. In the previous blog, we learned how to use the Browser APIs to record screenand generate a WEBM file. We now need to upload this file to persistent storageto have a URL to share our recording with our audience. Uploading a large file all at once is time-consuming and prone to failure due tonetwork errors. The recording is generated in parts, each part pushed to anarray and joined together. So it would be ideal if we could upload these smallerparts as and when they are generated, and then ..read more

This is part 1 of our blog on how we are buildingneetoRecord, a Loom alternative. Here arepart 2andpart 3. At neeto, the product team, developers and the UI teamoften communicate using short videos and screen recordings. We relied on popularsolutions like Loom and Bubbles. But they allowed only a small number ofrecordings in their free versions and Soon, they presented us with the upgradedscreens - upgrades were quite expensive for our team due to our team size andthe number of recordings we made daily. So, we thought of building a solution of our own. We found the browser'sMediaStream Recordi ..read more

In the world of web development, conventions often differ between backend andfrontend technologies. This becomes evident when comparing variable naming caseconventions used in Ruby on Rails (snake case) and JavaScript (camel case). Atneeto, this difference posed a major hurdle: the requirement for manual caseconversion between requests and responses. As a result, there was a significantamount of repetitive code needed to handle this conversion. Heres a snippet illustrating the issue faced by our team: // For requests, we had to manually convert camelCase values to snake_case.const createUser ..read more

BigBinary is building a suite of products under neeto. Wecurrently have around 22 products under development and all of the products areusing Sidekiq. After thelaunch of Solid Queue, wedecided to migrate neetoForm from Sidekiq toSolid Queue. Please note that Solid Queue currently doesn't support cron-style or recurringjobs. There is a PR openregarding this issue. We have only partially migrated to Solid Queue. Forrecurring jobs, we are still using Sidekiq. Once the PR is merged, we willmigrate completely to Solid Queue. Migrating to Solid Queue from Sidekiq Here is a step-by-step migration gui ..read more

At Neeto, our product development involves reusing common components, utilities,and initializers across various projects. To maintain a cohesive andstandardized codebase, we've created specialized packages, or "nanos" such asneeto-commons-frontend, neeto-fields-nano, and neeto-team-members-nano. neeto-commons-frontend houses utility functions, components, hooks,configuration settings etc. neeto-fields-nano manages dynamic fieldcomponents, while neeto-team-members-nano handles team member managementfunctionalities. These nanos, along with others, reduce redundancy and promote consistencyacross ..read more

Introduction neetoUI is an open-source React component librarydeveloped for neeto. It makes it easier to buildaccessible and consistent UI in React applications. It is currently being usedin more than 20 neeto products. In this blog post, we will explore the excitingnew features and enhancements of neetoUI. The Spark Though we were using neetoUI across all our products, we had to avoid neetoUI incertain products that followed a different UI style. For example,neetoCode, a coding platform built by BigBinary, hasits own special design that is drastically different from the establishedneetoUI sty ..read more

Memory leaks can occur when resources allocated for a particular task have notbeen released after the task is finished. This leads to the accumulation ofmemory until applications do not have enough for the required tasks. In React,memory leaks can occur due to a multitude of reasons. Components are not unmounted properly. Event listeners are not cleared after use. Unnecessary data stored in the state as well as not resetting the state. This video shows how we can use the memory tab in Chrome Developer Tools to testour application for memory leaks. The following video was made for internal us ..read more