Skip to main content

Posts

Enabling use of environment variables in ReactJS applications

I just wanted to share this small tidbit of information about a situation when you want to use environment variables in your ReactJS application. You can for example set a variable to TEST vs PRODUCTION to switch how your code operates (such as use a test db vs real db) First off, I am assuming you are using something like react-scripts which makes this a lot easier. If not you may have to first setup something like dotenv in your app But this just works if you are using react-scripts Create a .env file at the application root location (I think the REACT_APP prefix is needed for this to work) REACT_APP_SERVER=http://serverlocationDefault Now you can use this in your app like this render() {       return (     <Sessions server={process.env.REACT_APP_SERVER}/>       );     } Believe it or not , that's it! Now when you want to run with a different server all you have to run is run your app with th...

Allowing cross origin requests using CORS and Content Security Policy settings

I learned about Content Security policy (CSP) while working on a project involving a Cordova mobile app which needed to communicate with a back end server I wrote in NodeJS. So I figured I would share with anyone running into this type of issue. So when I had my server deployed at a url like http://x.y.z:8080 Without additional configuration, my app would not be able to communicate with the server successfully and I would get a blank screen or some other behavior I did not expect. When debugging (in this case using Safari developer tools because this was Cordova with iOS), I found the calls were getting blocked with this error After referring to these documents,  https://developers.google.com/web/fundamentals/security/csp/ https://cordova.apache.org/docs/en/latest/reference/cordova-plugin-whitelist/ I did the following to resolve the issue First I added code like this to my nodejs express app.js file to setup the server to send the correct Cross origin headers ...

Adding code to Rails projects other than MVC

I wanted to have development code separate from the M V C of the rails code so I added a folder lib/rubyscripts Then in config/application.rb, added this line to load the code there automatically config.autoload_paths << Rails .root.join( " lib/rubyscripts " ) After this, I can access code from this area in my controllers etc by using require "class_name" What is funny about this setup though is that, unlike in the controllers (where I can just use require "class_name" ) I still have to use the relative location rubyscripts/class_name in my spec files when referring to this code, don't exactly know why! For example, spec/lib/rubyscripts/count_finder_spec.rb @@ -0,0 +1,14 @@ + require " spec_helper " + require " rubyscripts/countFinder " + + # Test for lib/rubyscripts/count_finder.rb + + RSpec .describe " CountFinder " do + it " calculates counts " do + cc = Cou...

Track Twitter feeds live in your console with Ruby, Rake and Awesome print

Tools used   Twitter streaming api in Ruby : https://github.com/tweetstream/tweetstream    Rake (I am using this in a Rails application but you can use just ruby/rake)   Awesome print Ruby Gem (prints objects in a nice format into standard out): https://github.com/michaeldv/awesome_print  Sign up for a Twitter app at apps.twitter.com to get your auth keys to use in the code. Setup ruby, then install the awesome_print gem and tweetstream gem gem install tweetstream gem install awesome_print or if using Rails, add to your Gemfile gem 'awesome_print' gem 'tweetstream' then run bundle install If you run this task as rake tweets:tweet1, you can live track tweets of your choosing on your console, sweet. See this gist I posted with the tracker code, very very simple, try it out! https://gist.github.com/binodpanta/d577b24bb776a99a43aa

Tail recursion in Scala

Today I learned that tail recursion optimization can really solve the classic problem of stack overflow in recursive functions that depend on data size this I saw by writing a simple sum function in Scala that sums up a list val x = (1 to 3).toList // simple recursive function def sum(x: List[Int]): Int = {    if (x.isEmpty) 0   else x.head + sum(x.tail) } ok so far so good, this works, and return 6 for the simple list of size 3. But change the 3 to 300000 and you will see a stackOverFlow in the Scala workspace (you save the workspace and Scala will re compute). This is because a new frame is added to the stack for each recursive call and soon that exceeds the stack limit. How do you solve this? Tail recursion comes to the rescue. The term applies to functions whose last call is actually a self call, without any other computations. Scala compiler will internally then convert such functions into a while loop with goto, instead of pure recursion, h...

Plot csv data using D3.js

I tried my first D3.js data visualization using csv data source My 'graph' would plot circles, where the x position of the circle would represent the value of the second column (file size) in my csv. The larger files would be plotted to the right. I posted my example d3csv.html at  https://github.com/binodpanta/webvisualizer I should be able to do some more interesting things with this, such as realtime monitor files. Enjoy!

Using Sublime Text build system to open your files in your favorite Mac app

A quick hack on Sublime text when working on Macs is to get the editor to invoke the 'open' command so that you can hit command+B to 'open' the file in your favorite app. My favorite use for it is when editing html files, i want it to open in my favorite browser. On a Mac, 'open' is the equivalent of the default file association in Windows, such as when you click on a text file, you can have it open in your favorite editor. In sublime, go to Tools > Build System Select New build system In the file that opens type this in into the pre-filled section and save the file with a name you want, such as 'open.sublime-build': { "cmd": ["open", "$file"] } Then go back to the file you were editing, Tools > Build System. Now select your newly saved build system. Now every time you hit command + B you get the file to open on Chrome (which is what my Mac is setup by default to open html files with)! Obvi...