DEV Community: Bilal Budhani 👨‍💻

Currency Input Masking with Cleave.js and Money gem in Ruby On Rails

Bilal Budhani 👨‍💻 — Tue, 21 May 2019 19:02:19 +0000

Relying on the user's input is a crucial part of building a robust application. That's why I try to apply strong validations on the incoming data on forms or otherwise. One of the important input which needs to be captured very precisely is –– Amount. Thou Rails ecosystem has an amazing gem called Money to work with the amount. However, I wanted an equally elegant experience while dealing with amount related inputs for my users on the front-end.

After playing around with a couple of Javascript libraries –– I ended up picking Cleave.js. I configured it to work in conjunction with Money gem. Here is the end result

Here's how to achieve this experience

First, let's get our dependencies added in our project



gem 'money-rails'



yarn add cleave.js

rails g money_rails:initializer

Then once we configure config/initializers/money.rb based on our requirements, we will move to set up the Javascript part.

In our app/views/layouts/application.html.slim we will define a global object in respect to Cleave.js configuration in the head tag. It should look something like this



/ Global config for input masking in Cleave library
javascript:
    window.__AMOUNT_INPUT_MASK__ = {
    prefix: "#{raw Money.default_currency.symbol} ",
    numeral: true,
    numeralThousandsGroupStyle: 'lakh',
    rawValueTrimPrefix: true
};

tweak numeralThousandsGroupStyle config based on your requirement

In our app/assets/javascripts/application.js we will write a small piece of JS snippet which will attach input masking as per our defined Money config to any input which has a class currency-input-mask



document.addEventListener("DOMContentLoaded", function(event) {
    // Input Mask
    document.querySelectorAll("input.currency-input-mask").forEach(function(el) {
        new Cleave(el, window.__AMOUNT_INPUT_MASK__);
    });
});

Now, any input field with above mentioned class will allow our users to enter values in a much more controlled fashion –– reducing the chance of human errors with more refined data.

There is just one last step which needs to be taken care before we move on. Because our input value now holds other data like currency & commas, which is what we are going to receive in parameters in our controller when the user submits the form.

To address this part, we will need to clean up the value before we can pass it on to our Model. Let's create a helper file in app/helpers called input_helper.rb and define a method to shave off wanted characters from the value



module InputHelper 
    def strip_inputmask(amount)
      amount.is_a?(String) ? amount.gsub(/#{Money.default_currency.symbol}|,/, '').strip.to_i : amount
    end
end

Lastly, In our controller, we will include this helper and use the method we just defined



class ApplicationController 
 include InputHelper


 ...
 model.amount = strip_amount(params[:model][:amount])
 ...
end

I believe this little care to our application has a drastic impact overall to the entire project and brings peace amongst all the stakeholders.

👋 Do let me know your thoughts or feedback if this was valuable in any way

originally posted on https://bilalbudhani.com/currency-input-masking-with-cleave-js-and-money-gem-in-ruby-on-rails/

Using Next.js With Styled Components

Bilal Budhani 👨‍💻 — Mon, 22 Jan 2018 11:52:50 +0000

I have been fiddling around with Next.js library for the past couple of months and it has been really fun so far.

Styled-Components is another great library I've started using in my production applications which has improved my development cycle.

Let's talk business now, Next.js is server-rendered library we will need to utilize Styled-Components server side rendering functions to get them working together.

Add styled-components package in your Next.js project:

yarn add styled-components

Now in the pages folder create a new file called _document.js and paste the following code snippet in it.

import Document, { Head, Main, NextScript } from 'next/document'
import { ServerStyleSheet } from 'styled-components'

export default class MyCustomDocument extends Document {
  static getInitialProps ({ renderPage }) {
    const sheet = new ServerStyleSheet()
    const page = renderPage(App => props => sheet.collectStyles(<App {...props} />))
    const styleTags = sheet.getStyleElement()
    return { ...page, styleTags } // return styles collected
  }

  render () {
    return (
      <html>
        <Head>
          <title>My Page Title</title>
          {this.props.styleTags}
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </html>
    )
  }
}

Above code collects all the styles defined using styled-components in the application and return them to be populated as props before the page is rendered. Now inside render function the {this.props.styleTags} injects those collected styles in the head part of the page. Makes sense?

Moreover, If there is a need to apply global styles then import another function called injectGlobal and provide your styles before defining your custom document component.

import { ServerStyleSheet, injectGlobal } from "styled-components";

injectGlobal`
  html {
    font-size: 10px;
  }
  body {
    font-family: "Merriweather", serif;
    font-size: 1.6em;
    line-height: 1.6;
  }
`;

export default class MyCustomDocument extends Document {
//....

That's it! I'm finding Next.js + Styled Component combination very productive and flexible. You can let me know your thoughts on this combo on twitter.

P.S: originally posted on personal blog: https://bilalbudhani.com/using-next-js-with-styled-components/

Running Sidekiq On Heroku Free Dyno With Puma

Bilal Budhani 👨‍💻 — Mon, 27 Nov 2017 17:55:22 +0000

In my opinion, Heroku is the nearly perfect place to deploy a project. It provides support for a lot of technologies out of the box with minimal or no configuration.

Similarly, Sidekiq is what I strongly prefer whenever there is a need for background job processing. It ships with all the right set of APIs to deal with background processing and more importantly a great monitoring dashboard.

So, Last weekend I decide to hack on a side-project which has been on my mind forever (I will write about this project in another blog post). I rolled up a new rails project, added Sidekiq with Redis and pieced together a basic functional prototype. When I moved to deployment process I realised - I have to run another dyno to keep the Sidekiq process running.

Now let me be honest with you here, I have an inch for creating side-projects. Once I get hit by a problem I take some time out to hack on it & later I struggle to find time to work on the project again. That's why I don't go with any paid plan in project's infant days.

Coming back to our problem at hand, Heroku already provides a free tier of Redis as an addon – which does

heroku addons:create heroku-redis:hobby-dev

The other half is to figure out how to spawn a Sidekiq process within the same dyno. After some digging I found a great blog post Sidekiq on Heroku with Redis To Go Nano describing how to achieve the same in Unicorn. From here is just a matter of figuring out how to replicate this behaviour in Puma.

...some experiments later...

I got the puma.rb inside config to mimic the same behaviour for me – keeping Heroku Redis' client connection limit in check. Here is the config:

threads_count = ENV.fetch("RAILS_MAX_THREADS") { 5 }

threads threads_count, threads_count

port        ENV.fetch("PORT") { 3000 }

environment ENV.fetch("RAILS_ENV") { "development" }

workers ENV.fetch("WEB_CONCURRENCY") { 2 }

preload_app!

on_worker_boot do
  @sidekiq_pid ||= spawn('bundle exec sidekiq -c 2 -t 25')
  ActiveRecord::Base.establish_connection if defined?(ActiveRecord)
end

on_restart do
  Sidekiq.redis.shutdown { |conn| conn.close }
end

plugin :tmp_restart

Copy this to your Puma config and deploy this with your Heroku app.

git push heroku master

Be sure to point Procfile to right puma config

bundle exec puma -C config/puma.rb

Post was originally published at https://bilalbudhani.com/running-sidekiq-on-heroku-free-dyno/

P.S: I'm available for consulting projects.

Building Algolia Powered Search In React Native

Bilal Budhani 👨‍💻 — Sat, 14 Oct 2017 11:08:00 +0000

Building Algolia Powered Search In React Native

Algolia provides in a nutshell, Search As A Service, which if you think is a pretty cool service. It takes away all the heavy lifting of building & maintaining a search infrastructure, gives you a nice API to work with and a robust monitoring to keep everything in check.

The team at Algolia has open sourced API client for most of the programming languages & also built libraries for a bunch of popular platforms out there. React-InstantSearch is one of
such library which we will be using in this example.

Here is the demo of what we’re going to build in this blog post

Add the library we’re going to use to build this

    yarn add react-instantsearch

Let’s open App.js in our editor and initialise InstantSearch

<InstantSearch
   appId="TLCDTR8BIO"
   apiKey="686cce2f5dd3c38130b303e1c842c3e3"
   indexName="repositories"
>
<View style={styles.searchBoxContainer}>
  <SearchBox />
</View>
  <Results />
</InstantSearch>

InstantSearch component above will empower our search –– think of it as a
pipeline which takes appId, apiKey & indexName as a prop and connects us to
Algolia service. This component also takes child components which will provide
us with a search box & results provided.

Let’s code SearchBox component to be able to perform search against the data

import { connectSearchBox } from "react-instantsearch/connectors";
//...
const SearchBox = connectSearchBox(({ refine, currentRefinement }) => {
return (
        <TextInput
           style={styles.textBox}
           onChangeText={text => refine(text)}
           value={currentRefinement}
           placeholder="Search Something"
           clearButtonMode="always"
           spellCheck={false}
           autoCorrect={false}
           autoCapitalize="none"
         />
       );
});

InstantSearch library ships with connectors which provides ready to use
functions which can be hooked to the components to be able to perform defined
actions –– saving us all the effort of writing those logics.

In this case connectSearchBox enables us to connect our TextInput and
perform search directly on our dataset (Pretty Cool? Huh).

Let’s now add Results component to handle result sets provided by Algolia
service.

import { connectInfiniteHits } from "react-instantsearch/connectors";
//...
const Results = connectInfiniteHits(({ hits, hasMore, refine }) => {
const onEndReached = () => {
  if (hasMore) {
    refine();
  }
};
return (
    <FlatList
      data={hits}
      onEndReached={onEndReached}
      keyExtractor={repo => repo.objectID}
      renderItem={({ item }) => <Repository repo={item} />}
    />
   );
});

Similarly connectInfiniteHits function provides us with the data that can be
used to display the result sets.

Let us now write the component which will be responsible to display search item
and highlight searched term

const Repository = ({ repo }) => (
  <View style={styles.repoContainer}>
    <FontAwesome name="github" style={styles.repoIcon} />
    <View style={{ flex: 1 }}>
      <Text style={styles.repoTitle}>

  <Highlight attributeName="name" hit={repo} style={styles.repoTitle} />
      </Text>
      <Text
        ellipsizeMode="tail"
        numberOfLines={2}
        style={styles.repoDescription}
      >
       {repo.description}
     </Text>
   </View>
   <View style={styles.metaContainer}>
     <FontAwesome name="star" style={styles.starIcon} />
     <Text>{repo.stars}</Text>
   </View>
  </View>
);

If you’re familiar with React Native than you should be fairly comfortable with
the above code except Highlight component (Don’t worry I’ve explained that
below).

Everything is now in place except one thing. Now, Let us write the last piece of
the puzzle. I’m going to break down the component into small chunks to make it
easier for understanding.

As we would expect there’s a connector ship with the library to help us figure
out the part as well

import { connectHighlight } from "react-instantsearch/connectors";

//...
const Highlight = connectHighlight(
({ highlight, attributeName, hit }) => {
const parsedHit = highlight({
    attributeName,
    hit,
});

If you remember the Repository component code we’ve used Highlight component
and passed some props (go refer that above). We will accept those props with one
more extra prop which is provided by connectHighlight called highlight

We will compose parsedHit function using highlight & other props. This
function will return us an array of the objects with a property called
isHighlighted –– which can be used to build highlight functionality in our
app. Let’s complete the above component code

const highlightedHit = parsedHit.map((part, idx) => {
if (part.isHighlighted) {
   return (
     <Text key={idx} style={{ backgroundColor: "#ffff00" }}>
        {part.value}
     </Text>
   );
}
 return part.value;
});

If the part of the content is highlighted then wrap it with Text component
with a background color yellow else do nothing just return the content.

That’s it! You should now have a fully working search with a searched term
highlight functionality. You can be more creative and add *animations *or any
other fancy functionality as per your design requirements.

I’ve kept the code snippets to minimal for brevity purpose –– whole code of the
example application shown in the video above is hosted on Github

Github link: https://github.com/codeinfuse/react-native-github-algolia-search

originally posted at: https://blog.codeinfuse.com/building-algolia-powered-search-in-react-native-ee3621775f2

Upload Multiple Files To Cloudinary Using React Dropzone & Axios

Bilal Budhani 👨‍💻 — Tue, 25 Jul 2017 13:31:32 +0000

We had a requirement in one of our recent client’s project to provide a lot of file uploading. Being a developer we are quite used to the whole uploading process & the time it takes on the internet. However, file upload can be a daunting experience for a massive amount of users on the internet so, be mindful when you’re working on one.

We’ve good experience in building file uploadingâ€Š–â€ŠBy leveraging all those experience our aim was to build a delightful user experience around it. I’ve described below the service & libraries we used to build that experience.

Cloudinaryâ€Š–â€ŠThis service has become my de facto place to host assets for a long time now, the reason being they not just provide great image processing features on the fly but also provide super simple file uploading process directly from the browser without involving any backend.

React Dropzoneâ€Š–â€ŠWe’re big fan of React’s declarative approach towards building UI. Similarly, dropzone provides an intuitive declarative api for enabling file upload across browsers.

Axiosâ€Š–â€ŠA sleek promise based HTTP robust client library which helps us to talk to third party services & backend without breaking a sweat.

How To ðŸ‘¨ðŸ¼”ðŸ’»

Firstly register on Cloudinary, (if you don’t have an account already) and obtain your API KEY & Image upload URL

Secondly, We will need to enable unsigned upload in our account settings

Once we’ve enabled unsigned uploading, we should see something like this

Note down the preset name we will need it later in the code.

Now, Head over to your projectâ€Š–â€Šadd React Dropzone & Axios

npm install --save react-dropzone axios

Let’s import these newly added dependencies to the React component where we want to provide uploading feature

import Dropzone from 'react-dropzone'
import axios from 'axios'

We’ll now add the code for uploading

<Dropzone 
  onDrop={this.handleDrop} 
  multiple={true}
  accept="image/*" 
  style={styles.dropzone}
>
  <p>Drop your files or click here to upload</p>
</Dropzone>

Dropzone will trigger handleDrop function with the first parameter as an array of File when our user is done choosing the files to upload.
Now let’s add code which will upload those files to our Cloudinary Account

handleDrop = files => {
  // Push all the axios request promise into a single array
  const uploaders = files.map(file => {
    // Initial FormData
    const formData = new FormData();
    formData.append("file", file);
    formData.append("tags", `codeinfuse, medium, gist`);
    formData.append("upload_preset", "pvhilzh7"); // Replace the preset name with your own
    formData.append("api_key", "1234567"); // Replace API key with your own Cloudinary key
    formData.append("timestamp", (Date.now() / 1000) | 0);

    // Make an AJAX upload request using Axios (replace Cloudinary URL below with your own)
    return axios.post("https://api.cloudinary.com/v1_1/codeinfuse/image/upload", formData, {
      headers: { "X-Requested-With": "XMLHttpRequest" },
    }).then(response => {
      const data = response.data;
      const fileURL = data.secure_url // You should store this URL for future references in your app
      console.log(data);
    })
  });

  // Once all the files are uploaded 
  axios.all(uploaders).then(() => {
    // ... perform after upload is successful operation
  });
}

(Replace the Cloudinary image upload URL, upload preset, API key with your own)

Voila! We just got ourselves a completely functional file upload mechanism without any involvement of backend code.

This article first appeared at https://blog.codeinfuse.com/upload-multiple-files-to-cloudinary-using-react-dropzone-axios-27883c2a5ec6

Codeinfuse is full stack development shop. Have a project in mind where we can assist? Feel free to talk to us at hello@codeinfuse.com

DEV Community: Bilal Budhani 👨‍💻

Currency Input Masking with Cleave.js and Money gem in Ruby On Rails

Here's how to achieve this experience

Using Next.js With Styled Components

Running Sidekiq On Heroku Free Dyno With Puma

Building Algolia Powered Search In React Native

Building Algolia Powered Search In React Native

Upload Multiple Files To Cloudinary Using React Dropzone & Axios

How To ðŸ‘¨ðŸ¼”ðŸ’»

How To ðŸ‘¨ðŸ¼”ðŸ’»