Category Archives: Web Development

Anything web development stuff!

Apache Cordova Gotchas

Few months ago I have started developing a hybrid mobile app using Cordova. I encountered a lot of headaches and frustrations using this technology but the more time you spend on it, the better you get at googling about your issues (lol). Here I list all my headache and quirk fixes I found make it at least bearable to develop for Cordova.

  • Apache Cordova is Phonegap/Ionic . Phonegap and Ionic builds on top of Cordova so most likely ionic or phonegap plugin will work with Cordova.
  • Push notifications.  Use Google Firebase (https://firebase.google.com/docs/cloud-messaging) messaging platform. You create an application for free app for iOS and Android. You must provide the same app ID you set in your application. Use this plugin https://www.npmjs.com/package/cordova-plugin-fcm-with-dependecy-updated , as this allows you to avoid build errors.
  • Use the latest version of Cordova. If for some reason the current version is spitting out errors , use Cordova 8. npm install -g cordova@8.1.2 as this is a stable version.
  • Accessing photos , camera, videos and files. If by any chance you need to access the local resources of the device. Use
    cordova-plugin-file plugin. Take note android/ios has different path scheme. Use window.resolveLocalFileSystemURL to access the local file to get the blob or base64 encoded data eg. data://…  Dont forget that also when you take a photo, the image orientation might not be correct. Use https://github.com/blueimp/JavaScript-Load-Image , this library will sniff the EXIF data and return the correct orientation of the image as a BLOB.
  • Fetch() is a function that lets you grab the blob of the file to be inserted into formData to submit files to the server. It works for base64 encoded data or localhost file such as ‘/path/to/something’
  • Keyboard is recently my main issue making chat system by having a text field on top of soft keyboard. Use cordova-plugin-keyboard (iOS) , cordova-plugin-ionic-keyboard (Android) . Make sure you have cordova-plugin-ionic-webview installed otherwise on iOS you will see a black panel when keyboard is up. And since you are using ionic webview, you must add <preference name=”ScrollEnabled”value=”true”/> to enable body scrolling particularly with iOS.
  • Chat feature , creating a chat feature in cordova is hard/tricky. Remember when the soft keyboard in iOS is up , position: fixed wont work anymore. Remember to Keyboard.shrinkView(true); (disable by default) for the view to shrink and make the div bottom: 0px to attach to the keyboard. It will also help to
    Keyboard.disableScrollingInShrinkView(true); to disable any scrolling while the soft keyboard is up. Put them back to normal afterwards.

CSP (Content-Security-Policy) Introduction for your HTML page.

Hey folks!

Ever wondered what this tag means in your HTML page?

<meta http-equiv=”Content-Security-Policy” content=”script-src ‘self’ ‘unsafe-eval’ ‘unsafe-inline’ ; font-src ‘self’; ” …. >

 

Its basically a way to white-list a certain website/domain to access your page. By setting this up, for any reason a script was loaded to your page and sourcing a certain file from unknown domain, then browser will stop it from doing so.

As you might have guess, its for security purposes. I have to consider it while developing a cordova app. As Android and iOS have some stuff(required) in it  for it to actually work plus it makes your application a bit more secure. Of course in general when you are building a website its nice to know these things 🙂

Below is a brief explanation about it. And if you dont understand what I mean, check the link below and you’ll get the gist of it.

For example: script-src ‘self’ https://mysite.com htts://site2.com
This means only a script from ‘self’ (local) and a script from mysite.com and https://site2.com is able to be included and run. But there is also another thing to be aware of, any script from the allowed domain cannot run any on* code or eval() code. Just in case your trusted domain try anything to change how your site behaves.

 

To allow them to do so and you trust them completely. You must add ‘unsafe-eval’ and ‘unsafe-inline’ and this becomes

 

script-src ‘self’ https://mysite.com htts://site2.com ‘unsafe-eval’ ‘unsafe-inline’

 

There is a directive called ‘default-src’ meaning this becomes a default for any other directive you did not specify. For example style-src, font-src, img-src etc. If the policy does not match your default-src then the browser wont allow it.

 

To learn more about this
Go to this link:

 

Very informative and easy explanation to boot.

 
Kiddo Test

Apache Cordova – Set up Windows & Mac

I have finally entered the world of mobile app. Namely Cordova.  Before anything else … Its a pain. Nothing like elbow grease! For anyone reading this section, and you are starting out on your journey with hybrid-app, especially when you develop in Visual Studio. DONT DO IT.  Anyways as I learn the hard way, I thought VS can make the installation of packages easy, as it turns out It did not.

How to set up your Windows for Apache Cordova (Not in order)

  1. Install Node.JS,
    • Run npm install -g cordova
  2. Install Java (JDK)
    • Add the /bin folder to the PATH
    • Add a new environment variable named JAVA_HOME and set value to the JDK path.
  3. Install Gradle (https://gradle.org/install/)
    • Add the /bin folder to the PATH
  4. Install Android SDK (https://developer.android.com/studio/)
    • Add the [sdk folder]/tools folder to the PATH
    • Add the [sdk folder]/platform-tools folder to the PATH
    • Add a new environement variable named ANDROID_HOME and set the value to the SDK path folder.
  5. Then run “cordova requirements” to see whether you have installed everything right.
  6. Now you are ready to create your first mobile hybrid app using HTML/CSS/JS.
    • run “cordova create FolderName com.yourdomain.app MyAppName”

How to set up your Mac for Apache Cordova (Not in order)

  1. Check this link for detailed info: https://www.fiznool.com/blog/2017/05/29/a-guide-to-installing-cordova-on-your-mac/
  2. Install Xcode from the website or app store.
    • Run “xcode-select  –install” on the terminal. This will install cli for Xcode.
  3. Install Java JDK http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html
  4. Install Android SDK https://developer.android.com/studio/index.html#command-tools
    • Extract the content(/tools) under /android anywhere in your drive system.
    • Run cmd
      • cd ~/android/tools/bin
        ./sdkmanager "build-tools;25.0.3" "emulator" "platforms;android-25" "platform-tools" "system-images;android-25;google_apis;x86" --verbose
        ./avdmanager -v create avd -n x86 -k "system-images;android-25;google_apis;x86" -g "google_apis"
    • This will generate /build-tools, /emulator, /platforms and /system-images.
  5. Install Gradle https://gradle.org/releases
    • Unzip the gradle content inside the android we created.
  6. Configure ANDROID_HOME env variable and PATH.
    • Open ~/.bash_profile and enter and save.
    • export ANDROID_HOME=$HOME/android
      export PATH=$PATH:$ANDROID_HOME/emulator:$ANDROID_HOME/gradle/bin:$ANDROID_HOME/platform-tools:$ANDROID_HOME/tools/bin
    • Depends where you extracted /android-sdk, /gradle and android tools.
  7. Install Cordova via NPM “npm install -g cordova”
  8. Install iOS-sim and iOS-deploy “npm install -g ios-sim ios-deploy” Lets you deploy to simulator and device.
  9. Then you can start creating projects using “cordova create myapp me.domain.myapp myapp”
  10. After you created your app and adding a iOS platform. You would build it “cordova build ios”. And the .xcworkspace in the platforms/ios/ folder must be opened in Xcode and you would build it from Xcode.

Notes: AVD Manager manages virtual devices while SDK Manager manages APIs currently installed on the system.

References:

https://docs.microsoft.com/en-us/visualstudio/cross-platform/tools-for-cordova/publishing/publish-to-a-store?view=toolsforcordova-2017

—-

Troubleshooting:

  1. Error: Cordova Could not reserve enough space for 2097152KB object heap

—-

Tips

  1. Run “cordova emulate android” to deploy application to virtual emulator device.
  2. If you are using AVD(Android Virtual Device). And run your emulator and get “PANIC: Cannot find AVD system path. Please define ANDROID_SDK_ROOT”. Set your environment to where your android-sdk is, and this should fix it. Note: You would need HAXM Accelerator and you will need Hyper-V disabled if you are using Windows. Download and install this in the SDK Manager.

And just bite on something and hope for the best. You will want look how to deploy and debug your app. I recommend using Visual studio code -> cordova plugin. It allows you to have a emulator for the browser to just hammer on development.

Good luck!

PHP handler Cgi, fastCGI , Php PFM etc.

So what do these terms really mean?

With the Apache server. There is this way to handle scripts. There are 2 protocols that Apache uses CGi and FastCGI. Cgi is not used anymore as this is old and slow. FastCGI now is basically the default.

In relation with PHP script. Like any other script in Apache. You can treat this scripts by  “handlers“. There are few ways to handle PHP depending on your needs.

Taken from inmotionhosting.com website

 

So basically these are modules that can be installed and set depending on your needs.

See link below for detailed information. Thanks to them I finally understand the mystery.

https://www.inmotionhosting.com/support/website/php/choosing-the-best-php-handler

Now what is php FPM? Well its FastCGI Process Manager . From the website description, its an alternative FastCGI with extra feature. Its got more functionality.

There are tons more information about PHP FPM. But hopefully have a clear understanding to what they are and what it all means.

WAMP Server and PHP ZeroMQ Extension Installation

I spend a lot of hours to do this , so I dont forget how it all works and all. ZeroMQ is a PHP extension that allows PHP to do Websockets for live communication. When you do your development specially on a Windows platform , Wamp is just my go to program to install to do some easy PHP development.

Follow these step:

  1. After downloading and installing WAMP Server.
  2. Download the DLL extension https://pecl.php.net/package/zmq . Make sure you download the version for the PHP you are using. There is some stuff you need to consider before attempting this and making sure you get the right one.
    • Thread Safety or Non-thread Safety. Make sure you choose the one appropriate with your PHP installation. Check phpinfo() to see whether its TS or Non-TS.
    • Also check you have the Visual C++ Redistributable installed. Again see the version of VC++ Redistributable you need in phpinfo() VC11 is usually version 2012.
    • Finally check whether you are running x86(32bit) or 64 bit version of WAMP.
  3. Then move php_zmq.dll in your EXT folder of your PHP directory.
  4. Importantly either/both copy libzmq.dll in your root PHP folder or APACHE folder. This is the one Im having issues with.
  5. Now add a line in your php.ini “extension=php_zmq.dll” through your wamp icon and inside your PHP folder ini. This allows zmq loaded on your CLI too.
  6. When you restart WAMP and you dont see any changes happening. Check for the PHP_LOG if there is any error. Usually there will be but if not. You are good to go. Also RESTART WINDOWS. And double check in your phpinfo() if the extension has been loaded or not.
  7. And you should be done!

IMPORTANT NOTE AND TIPS:

Sometimes or most likely WAMP will complain about PHP folder is in your PATH environment variables. We definitely want PHP on there and Composer need this path. You can ignore the error by going to WAMP icon right click on it and go to WAMP settings and check “Do not verify path”.

Please be aware this might be an issue with WAMP. WAMP allows us to change version of PHP to use. So know that when you are changing PHP version. Better to remove PHP path from the environment variables and restarting before changing PHP version to prevent any issues.

Although Its weird that to use ZEROMQ we definitely need the PHP path there to save us time from typing the whole complete path PHP cli. Remember WAMP is just our development platform. You can probably get away from WAMP and use DOCKER instead but WAMP is just so easy. But that is just a topic for some other time.

Cheerios!

JS: Using import/export VS require (file)

In JavaScript there is 2 ways of importing a file from another file.

  • import /export is ES6 syntax and not every browser support yet. Using Babel to transpile javascript is actually using CommonJS which NodeJS use.
Example1:
import "myfile.js"; 
// include the file as is

Example2:
file1.js
export default function(){
 return 1
}
file2.js
import func from "file1.js"
var x = func();

Example3:
file1.js
var func1 = ()=> { return 1; };
var func2 = ()=> { return 0; };
export func1;
export func2;
file2.js
import {func1} from "file1.js";
import {func2} from "file1.js";
  • require(file) is mostly used in CommonJS and Node.JS
Example1:
file1.js
module.exports = {
   x: 0, func1: ()=> 1
}
file2.js
var obj = require("file1.js");
console.log ( obj.x); // return 0

When you are using NodeJS you are more likely to use “require” but in other situation like React. It is most likely ES6 import and export.

Here below is  nice quick cheat sheet I found on the net.

https://hackernoon.com/import-export-default-require-commandjs-javascript-nodejs-es6-vs-cheatsheet-different-tutorial-example-5a321738b50f

Webpack 4

Howdy you! Its been 2 months since my last post. And I have been taken aback from my usual routine of learning stuff everyday. (Damn you gaming!). Here I want to remind myself of the basic of Webpack configuration primarily v4.

module.exports = {
 entry: __dirname + "/app/entry.js",
 // This is where you set the entry point of your script.
 output: {
   path: __dirname + "/public",
   // where you would put your bundle.js
   filename: "bundle.js"
   // the name of your outputted file to include
 },
 devtool: "eval-source-map",
 // devtool option allows webpack to create source-map so browser can point to an specific line in the script making debugging easier for developers.
 devServer : {
   contentBase: "./public",
   // contentBase is where to watch changes for, for auto-reloading with web-dev-server
   port: "8080",
   // port to use by web-dev-server
   colors: "red",
   inline: true, 
   // set to true if you want all info about auto-reload in the console false if you want it displayed in your app as an IFRAME
   historyApiFallback: true
   // good for SPA. Set to true if you want the browser when back button is press to go to your main index.html not the actual previous history page.
 }
 // devServer is used when you have web-dev-server installed as well. There is alot more options available
  plugin: {
  }
}

Each object entry in webpack above has purpose to learn more of its configuration head to:

https://webpack.js.org/configuration/

The documentation is pretty easy to follow!

So future self remember. Every “entry”, “output”, “devServer” in your webpack configuration points to more option specific to the entry.

All about React and boilerplate

Here I am going to delve right deeper in the React world but in a very basic term. As a full-stack developer (please dont take this as being know everything do everything this is just what I see myself do nowadays) I keep going in and out of front-end and back-end side of things, I tend to forget this nitty gritty details. Anyways.

React on its own resemble this

// without Babel JSX
var hello = React.createElement("div",{property: value},"Inner html with ${this.props.name}" }
ReactDom.Render(hello,document.getElementById("container"));
// with Babel JSX
let Hello = (props) => <div>Hello</div>;

Most of the time we want to develop with JSX and Babel is pretty much the defacto transpiler for it. So if you plan to use React in JSX on your page you make sure you include react , react-dom and babel-jsx in your script.

Boilerplate React Development

Now with boilerplate, React is very good with SPA(Single Page App) and Hybrid (React with your HTML page). We will focus on SPA of what we are going to need to start developing using NPM as our package manager.

  • React – this is the core react library
    • npm install --save react react-dom
    • [optional] - if you are looking for more react exclusive functionality for example the routing capability etc. Install these to your package.
      
      npm install --save react-router-dom 
      
      react-router-dom: is the v4 of react router. No need to use "react-router" as this is v3
  • Babel – the core transpiler for JSX
    • npm install --save-dev babel-core babel-loader
  • Babel-presets – babel use to have all features in one package <version 6. In babel 6 they have separated all these features and plugins hence. We now need to install each feature separately. babel-preset-2015 supports ES6 and React
    • npm install --save-dev babel-preset-env babel-preset-react
      
      babel-preset-env: new support for ecmascript+ down to ES5.
      babel-preset-react: to allow react syntax to be transpiled.
      
  • Webpack – now our module bundler that will tie everything together. Webpack-dev-server is for hot reloading while developing. Very handy indeed
    • npm install --save-dev webpack-cli webpack
      npm install -g webpack-dev-server 
      
      web-dev-server: must be global
  • Loaders – loaders are a way to bundle your static assets into few different things used in webpack
    • npm install --save-dev url-loader style-loader file-loader css-loader resolve-url-loader
      
      url-loader: makes your assets like images embedded inside your JS using base64 encoding. Useful for smaller files. Set the limit and let file-loader do the rest for bigger files
      file-loader: it handles assets and emits(create a separate file) to another location. Good for bigger files.
      css-loader: the css loader takes the CSS and convert it to a string. eg. var css = require('css-loader!./css/mycss.css'); it just loads the string of css as javascript/node dont know how to parse .css file.
      style-loader: usually used conjunction with css-loader and inserts it into the page by add a <style>...</style> tag to the javascript.
      resolve-url-loader: resolves url() relative path in your css, specially for scss. When you are importing another .SCSS file to your base scss, css-loader context path is the base importer. This will screw up any url in the importee path. Use this to make any imported scss file folder context as if the imported scss is the parent.
    • [optional] npm install --save-dev sass-loader  node-sass postcss-loader autoprefixer
      
      postcss-loader: by itself it doesnt do anything, but it pretty much a foundation for all its plugin. So if you want to use autoprefixer, you will need to install postcss-loader first. 
      sass-loader: sass loader adds support for sass files and then to css then to your normal css-loaders. 
      node-sass: is required for peer-dependency (plugin-that-needs-another-plugin)
    • Production Package
      • npm install --save-dev mini-css-extract-plugin
        
        mini-css-extract-plugin: works with webpack 4, allows to separate CSS to its own file. [Important Note] This plugin dont work with webpack-dev-server. Use webpack itself to build for production.
    • Plugins [optional]
      • npm install --save-dev html-webpack-plugin 
        
        html-webpack-plugin: This lets you process the main index.html and injects assets into it automatically. It is required if you like to hash your assets for busting caching browsers.

BLOG: NodeJS – Server Side Rendering

Its a technique in the web development world most of your front end rendering(javascript) is rendered by the server, hence the title.

Basically what its saying is most front-end javascript processing happens in the browser. But with server side rendering, your javascript is pre-compiled and delivered with values pre-populated by the server stack. In this case NodeJS.

Im not sure how it works on Apache server yet. Or any other platform stack that does not use javascript. Here is a video about React – Server side scripting works using express/webpack combination.

.HTACCESS

We all know how .htaccess change the way you access a particular URL in your web server. Mainly use for apache web servers. When starting one always start with

RewriteEngine On 

Options +Indexes = Allows folder to be indexed.
ErrorDocument 404 /notfound.html = Allow to set error page.
401 – Authorization Required
400 – Bad request
403 – Forbidden
500 – Internal Server Error
404 – Wrong page

RewriteBase / = change the context as root folder
RewriteCond %{THE_REQUEST} !^[A-Z]{3,9}\ [a-zA-Z0-9\.\+_/\-\?\=\&]+\ HTTP/ [NC]  = Like an if statement if true continue below
RewriteRule .* – [F,NS,L] = L means stop, F causes forbidden access 403 page, NC not case sensitive, NS no sub request if page is included, R redirection. Rewrite rule only gets the page.

QSA allow to be included to query string

When the replacement URI contains a query string, the default behavior of RewriteRule is to discard the existing query string, and replace it with the newly generated one. Using the [QSA] flag causes the query strings to be combined.

Consider the following rule:

RewriteRule "/pages/(.+)" "/page.php?page=$1" [QSA]

With the [QSA] flag, a request for /pages/123?one=two will be mapped to /page.php?page=123&one=two. Without the [QSA] flag, that same request will be mapped to /page.php?page=123 – that is, the existing query string will be discarded.