All posts by ernani

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. 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.
  6. 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 very 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.

Into Docker: Layer caching for development

When you create your docker file, you don’t want to just copy your whole directory in a folder. As everytime you run your docker image because you changed your source code, it will keep on installing fresh dependency packages all the time. And this will become slow.

Remember every RUN you make on docker, creates a layer on top of the image. This layer get cache. So everytime you build your container if nothing has change from your package requirements , it will use the one from the cache making it faster to rebuild.

This technique works for any projects. Like python(flask) or nodejs(package.json). Footnote though and what to watch out for. If your package requirements always points to the latest, you might want to have a fixed version number otherwise if you like to get the latest version of the packages. You might need to clear your cache to get a fresh updated copy in your container.

CSS Cheatsheet for responsive-ness

Old school! We have lots of libraries now to make frond-end development easier especially making our layout responsive.

Sometimes we need to step back and really see how CSS queries  are structured for this feat. Found a really nice CSS cheat sheet to ponder upon or maybe used for our projects or just reference.

https://gist.github.com/bartholomej/8415655

And whats the go with “ONLY” query. Apparently old browsers ignores this.

https://stackoverflow.com/questions/8549529/what-is-the-difference-between-screen-and-only-screen-in-media-queries

Project/CMS Development Workflow

Lately I been pondering about CMS development since I work alone on projects. It didnt matter but then what if I dont work alone? What if we use WP or Drupal on our website. I read a lot of articles how it can be done.

I keep getting swept away about this article and how they are doing it. Then I realised , well I am already learning Docker/Vagrant. But its just fixing one issue anyways. Here I most of the issue encounters when developing a project be it a CMS or a stand alone one.

  • Setting up development-server ENV. This includes the server, this is where Docker comes in.
  • Setting up development set-up , the stacks you use for your project SPA, a plugin for CMS, theme , etc. (try to include unit testing)
  • Database migration set up. You cant just develop a database driven project without thinking how you can easily migrate your database schema, required data , etc. It is as important as your main application itself.
  • Using version control. You also have to think what files needs to be included to your repository. If its a public repo and your project is a public facing site, you might want to have .gitignore and exclude config files and other folders like node_modules etc.
  • Above has although bullet-ed does not mean straight forward. There is a lot of separation that needs to be done to make your workflow manageable and understandable for you(or your team).
  • Deployment. And high overview how its going to work after we set up the development side. We DEVELOP -> PUSH TO GIT -> AUTOMATION SERVER (eg. Jenkins) -> FEEDBACK TO DEVELOPER(testing etc) -> CREATE IMAGE FROM DOCKER -> DEPLOY TO PRODUCTION (CLOUD)
  • There is a lot in deployment , I mean a LOT of moving parts. But in the end, you do it often and hopefully like driving it becomes second nature until another NEW KID in town comes along. Such life for us Technologizt.

Learning Python: Gunicorn

Just putting this on here little quick.

What is Gunicorn? Apparently its sort of like a middle man between your user and application. Python is good and all handling request but its not made to be a web server handling 1000s or more of requests. For eg. Flask application can handle several request at ones locally. Web servers are good with that.

So the workflow pretty much like this:

[USER] -> [LOAD BALANCER (eg. nginx) ] -> [WEB SERVER LIKE (GUNICORN) ] -> [FLASK APP]

Very intuitive indeed!