React Native with Facebook Login

This is done on a Mac and tested with XCode and IOS simulator. I have not gotten around to the Android version yet…

How to create a Facebook login button for React Native app on IOS.

Start by installing react-native via NPM:

npm install -g react-native

Then, change into your projects directory and run the following to create your project:

react-native init babiesdigest_native
cd babiesdigest_native
open ios/babiesdigest_native.xcodeproj

In a browser, open and select your app – Click “Quickstart” under the products section and note that we will be doing steps 1-6 here

Once XCode is open, click the project in the menu on the left and select General. Set the project identity and the signing team.

Right click project name and click “Add Group”, rename to “Frameworks”

Drag 4 .framework files from FacebookSDK ( into new “Frameworks” group:

* Bolts.framework
* FBSDKCoreKit.framework
* FBSDKLoginKit.framework
* FBSDKShareKit.framework

Add FacebookSDK directory to search path under project “Build Settings”

In the site, add your bundle id from XCode

In Faceobook, enable single sign-on

Copy Facebook’s PList code and paste into XCode

Make AppDelegate.m changes:

For the first block, you must paste the import at the top of the file with the rest of them, and add the
code as follows:

For the second block, add the method below the first method before the @end:

In your terminal, run the bundler app with npm start

Click the run button in XCode to start your simulator, and you should see the app:

Open App.js and import the Facebook classes we’ll use:

Add Button to the list of imports from react-native:

Add a button to the UI in App.js:

Reload the simulator:

Click the login button:

This launches the FB login/confirmation:

Once you login, you get the alert and the stringifyied object in an alert

Migrate WordPress to Docker WordPress

I had several problems when migrating wordpress to Docker wordpress.

  • Blank white page
  • Infinite redirect on wp-admin login page
  • Need to update wp-config.php file for ssl

To fix this, enable SSL on the site everywhere, update wp-config.php (you have to create a docker volume and mount /var/www/html on it, or create your own docker image) to have $_SERVER['HTTPS'] = 'on'; and update the database table so that these 2 options are set correctly:

MariaDB [blog]> select * from wp_options where option_value like 'https://%';
| option_id | option_name | option_value | autoload |
| 1 | siteurl | | yes |
| 33 | home | | yes |
2 rows in set (0.00 sec)

FFMPEG make an animated gif out of a video

Create the palette first – skip 60 seconds and make it 6 seconds long and 800 px wide with a matching height:

Create the gif, same time parameters

React – new project

create-react-app projectName

cd projectName

npm install

npm start

npm --save install material-ui
npm --save install isomorphic-fetch
npm --save install react-tap-event-plugin
npm --save install react-redux
npm --save install redux-thunk
npm --save install fetch-polyfill

In App.js:

import {MuiThemeProvider} from 'material-ui';
import injectTapEventPlugin from 'react-tap-event-plugin';

constructor(props) {

return (



Docs are here:

Icons are here:

JQuery Stateful Plugin

Creating a JQuery plugin ( for filtering objects on a page, I needed a way to create a stateful JQuery plugin.

This is done by attaching all of the configuration for the plugin to the actual DOM element we create the plugin on. This allows multiple separate “instances” of the plugin on the page. The only catch is that each must be on a separate DOM entity.

Here’s the example code, here it is on JSFiddle: and here is the github plugin:

Note that we proxy the click listener so that “this” in the callback function points to the DOM element that the configuration is attached to.

Here’s a practical example ->

Java EE Custom Annotation Lookup

Thinking about plugins in a webapp, I wanted a way to have an interface that my code would call when certain things happened.

As a POC, I created an annotation and interface to run after an action completes. First we create the interface:

We will call the afterComplete() method when the action is complete. For simplicity, it just takes a String.

Now, we need an annotation so we can look it up in the container’s context:

This is a simple annotation that allows us to locate each bean that is annotated with it, and get the implementing class. If we create the EJB we want to discover like this, we can easily find it. This is a simple class that prints a log message:

The following code will find all the EJBs that have our @AfterComplete annotation and call their afterComplete(…) method with a simple String:

We can use this method in a Servlet, REST endpoint, or whatever else we want to create callbacks for different methods. There is an example Servlet and 2 beans that have a discover-able annotation at that is a Maven project that can be used for a demonstration.

Check it out and run mvn package to generate a war file, then deploy it and go to:

http://localhost:8080/ejb-custom-annotations-1.0/ to see the output. The output should be:

class net.mikeski.ejb_annotations.AfterCompletePrinterclass net.mikeski.ejb_annotations.AfterCompleteErrPrinter

and your console should have 2 log messages like this:

18:45:51,937 INFO [stdout] (default task-43) After complete printer: After complete called on Proxy for view class: net.mikeski.ejb_annotations.IAfterComplete of EJB: AfterCompletePrinter

18:45:51,939 ERROR [stderr] (default task-43) After complete called on Proxy for view class: net.mikeski.ejb_annotations.IAfterComplete of EJB: AfterCompleteErrPrinter

Angular helper to encode object as www/formdata

Helper to serialize data to www/formdata – needed for turning a javascript object into encoded form data to POST:

Apache Shiro – HTTP auth and Form auth in same project

I wanted a way to do regular form auth with an application. The idea is that regular users would use form authentication, and API users could use Simple HTTP authorization.

I had a REST service that I exposed at 2 different URLs by creating 2 Application classes extending and using;

to expose 2 different URLs. The first is at /rest and the second is at /api. Now, in the shiro.ini I setup a different filter for each path, and to access /rest you have to be logged in via form auth, and to access /api you must be logged in with HTTP Simple authentication.

I implemented a custom AuthorizationRealm and added the api role to the users that can access the API.

That works great, and simplifies any API connections by allowing Simple auth. Simple auth should also force SSH because it is not secure over clear HTTP, but that’s well documented by the Shiro project. There will be a post coming soon about how to implement a custom AuthorizingRealm to use your own DAOs to lookup users, but it is only 3 methods and is pretty straightforward.