How I secured my WordPress site

I recently came across malware in my WordPress installation even though I am running the latest version of WordPress and not running any other plugin apart from JetPack. I tried removing the malware and updating all the WordPress files only to get infected again a few days after. So Far these steps have mitigated the malware from infecting  and/or penetrating my site.

.htaccess conditions

I added these rules to my .htaccess file. This will append or replace the existing rules of WordPress as well as the WordFence Plugin if you use it,

Installed WordFence and Really Simple SSL Plug-in

I installed WordFence to scan and replace WordPress core files. I only use the free version, though there is a premium version available with more automation features. I also installed a SSL certificate on my server and installed Really Simple SSL to force HTTPS on my main site.

Updated passwords and changed DB table prefix

If you haven’t already, I updated all database and user passwords in my current WordPress installation as well as changing the default database table prefix (wp_) to something obscure.

Set file and directory permissions

Set directories to 755 and files to 644. I simply run these commands via SSH

Limit or disable access to XML-RPC

I use .htaccess to limit access to the xmlrpc.php file since I use the WordPress app. You can opt to simply deny access to the file all together if you don’t plan on using it.

 

Gulp! My assets pipeline 2.0 on WIndows

image

This is an update to my previous setup I wrote about on: How I build my assets pipeline on Windows using NodeJS. This time around I use Gulp to simplify things and add more automation.

First up, you’ll need to install gulp globally (npm i -g gulp) if you haven’t yet, then install it in your project directory (npm i gulp -D). The goal is accomplish the following automatically:

  • compile and minify my javascript files when changes are made
  • compile and compress my sass into css when changes are made
  • automatically reload my browser when the css/js is compiled

Here’s a list of the plugins I use and what they in relation to my workflow. This assumes you are familiar with NodeJS already, if not you may read this post first.

Some none-gulp plugins we’ll also need are:

Once you have all these installed, create a gulpfile.js in your project directory (where your package.json is) then you can start creating task. In my setup, I simply run the gulp command to watch my JavaScript and sass files, compile them, and reload the browser. I have a different gulp task to compress the images since this is not done often. Note that the paths may vary depending on how you structure your working environment.

UPDATE April 5, 2018fix for deprecated packages and missing Python executable. UPDATE: October 6, 2018 – I updated the image compress gulp task for better compression and added SVG, and GIF support. Also added the default task to trigger image compression when the source image folder contents are updated. Website Planet has an  image compression tool which inspired this update.

UPDATE October 11, 2019 – updated the gulp plugin dependency changes and added a non-minified version of the bundled CSS and JS files

Delete deep nested node_modules folders

Some node modules have too much dependencies that break the WIndows NTFS file system e.g.(node-sass, gulp). There were articles mentioning that Windows 10 has removed the the limit to the maximum path length but I for one still encounter the problem… and for some reason the rm -rf command doesn’t work anymore.

So I use rimraf, which basically does what rm -rf does. Simply install it (globally) and run the command:

Open cmd.exe here for NodeJS

Since NodeJS works off the Windows’ shell (command prompt) I find myself needing to open the terminal (cmd.exe) more often now. Here are several ways I open the Command Prompt in a specific location within Windows Explorer on Windows 10.

method 1: simply navigate to the desired folder within Windows Explorer and type cmd in the location bar then press enter.

method 2: Navigate to the desired location within Windows Explorer then press (ALT F, M) on your keyboard. This will give you an option to open either an Elevated Command window (ALT F, M, A) or a normal Command window (ALT F, M P).

method 3: hold shift on your keyboard then right click within the desired folder location within Windows Explorer. AN “Open Command window here” context menu will appear.

How I build my assets pipeline on Windows using NodeJS

image

I develop on Windows 10 (currently) with NodeJS, I am assuming you are running both already. Below is a bare-bones list of modules i use:

  • browserify – this allows my to write my JavaScript in the NodeJS convention as well as concatenate multiple JavaScript dependencies like jQuery and GSAP.
  • uglify-js – this will allow me to minify all my javascript code and dependencies.
  • watchify – will give give us the ability to monitor my javascript files for any changes.
  • node-sass – SASS compiler without having to know or setup Ruby. THis also compresses the output CSS code.
  • nodemon – monitor our scss files for any changes.
  • concurrently – will allow us to run multiply npm command concurrently on Windows using one terminal window.

Some optional modules I use are:
jquery and, bootstrap-sass.

Now we initialize our project with the following commands

  • mkdir public – this will be my webroot folder. This will be the destination folders (public/assets/css,
    public
    /assets/js

    ) for the output files nodeJS will generate for us.

  • mkdir client – this will where my source files will be
  • npm init – create a package.json file for our project
  • npm i <module_name> -D – this is how I install the node modules i need. the -D option will put the module in our package.json as a dependency.

once all the the modules I need are installed, I openup my package.json file and write the scripts I will be using to monitor and compile my CSS and JS files. The gist is to output 2 files bundle.js and bundle.css where all dependencies and custom code are concatenated into one file respectively and compressed.

  • build-js – will read my index.js file which is my main node javascript file and concatenate and minify all the custom code and dependencies into my production bundle.js file.
  • watch-js – will monitor any changes on my index.js file then automatically compile it.
  • build-css– will compile all my scss files and compress it into one bundle.css file. I also included a folder where I put my other scss snippet files.
  • watch-css – this will monitor all .scss files specified in the watch-css command then run build-css once changes are saved on any of the files.
  • build-assets– will build my js and css files
  • watch-assets – will monitor my scss and js files and compile them once changes have been made.

Once I have this setup, i simply do npm run-watch-assets while I am developing to automatically compile all my assets on the files while I code. It’s a great time saver and cleans up my code a whole lot, especially since I only have to include 1 .js file and .css file in my html files for all the dependencies and plugins i use..

My webdev environment on Windows

Here the web development environment I have setup on my laptop. It’s simply a run-through and short tutorial of the things I use for those of you who are interested in getting into the web development scene.

To start of, here’s a list of apps I use:

  • WAMP – This basically has everything you need to get started; it also included some extensions you may find useful like XDebug.
  • Node.js – I primarily use this as a command line interface for the tools I use like Bower and Grunt.
  • Sublime Text – this is the best text editor I’ve used. It’s free to try but you can buy it if you like it.

Setting things up is pretty straight forward for WAMP and Node.js, configuration will be subjective so I’ll leave that to your personal preferences. Node.js already comes with npm.  so you can jump right into installing Grunt and Bower via the Node.js CLI (Command Line Interface). You can also use npm in other development environments like Phonegap apps.

If you’re on Windows like me, you will need to install GIT for Windows to get Bower working properly.  You can also use this tool to manage your repositories if you have any.

image

After installing git you will need to add the installation path to your PATH Environment Variable, which is typically located in C:Program Files (x86)Gitcmd. You may have to restart your system for the changes to take effect.

Once you’re done with that you can turn your attention to Sublime Text. I like the simplicity versatility and light foot print it has over other text editors. Like npm it also has a a package manager called Package Control you can use to add more functionality to it. You will need to enable this by opening the Sublime Text console (Control + `) and paste the code below. For detailed instructions you can visit the installation guide.

Sublime Text 3

Sublime Text 2

After that you will see the Package Control menu by going to Preferences > Package Control.

phonegap setup guide for android on Windows

This is a short guide on how to setup a working and testing environment for either native or Phonegap/Cordova based Android app development on a Windows machine.

NOTE: the versions of the software I list here are the current versions available  as of this article’s posting, or my personal preference.

To get you on your merry way of building android apps via Phonegap on Windows 8/8.1 you’ll be needing the following software:

Now we set things up one at a time…

Java SDK

Install the JDK first since it is required by both the Android Studio and Apache-Ant. After installing take note of the installation folder which is typically in C:Program FilesJavajre7, we will be appending this to our PATH environment variable later on. We will need this to access the Java keytool for signing our apps.

Android Studio

After installing this in your preferred settings open the SDK Manager and check the tools you’ll need. This is dependent on which version of android you plan to support; also make sure to select ARM-EABI System image for each version of android you on using. If your system supports Intel Virtualization be sure to check Intel x86 Emulator Accelerator as well. Now that you’re done click on Install Packages.

image

While that’s downloading we will setup paths. Navigate to System Properties (you can search system environment in Windows 8 to open the dialog) then click on Environment Variables. Once there we will be adding some variables, you may choose to either add it globally or for the current user.

image

Add the variable ANDROID_HOME with value of the SDK path found in the SDK Manager dialog (see the image up top). After that you’ll want edit the PATH variable and append the path to Android’s tools and platform-tools folder like so (note the semi-colon as the separator)

Notice the ANT_HOME variable? to save time we will segue a bit and set this up now. Simply extract the apache-ant archive to your preferred location, this will be the value of the ANT_HOME variable (e.g.C:apache-ant-1.9.4).

We also added the the bin folder location of our Java SDK which is in the installation directory we noted earlier.

That’s it! Just remember that we also appended the %ANT_HOME%bin to the PATH variable as well.

Before proceeding any further open your commend prompt and test to see if the paths are properly set by echoing each variable you added/changed (e.g. echo %ANDROID_HOME%). You may have to restart your system for the variables to take effect. You may also try the “ant -diagnostics” command without quotes to see if the paths for it are correct. You may encounter an error like Unable to locate tools.jar. which you can ignore.

Assuming that the packages are done downloading and installed. If your system supports Intel Virtualization (VT-x, VT-d). proceed to your Android SDK folder then look for the Intel x86 Emulator Accelerator which is typically in extraIntelHardware_Accelerated_Execution_Managerintelhaxm-android.exe and install it manually.

If you are getting errors during installing despite having support for Virtualization:

  1. check if you are running Hyper-V (a Windows 8 Pro feature) and disable it in the control panel.
  2. if you are running Avast, navigate to Setting > Troubleshooting then uncheck Enable Assisted Hardware Acceleration.
image

Now proceed to Tools > Android > AVD Manager (Android Virtual Device) in Android Studio and ad a virtual device for testing. For the System Image setting it is much faster to use the x86/x86_x64 if your system supports Virtualization; if not choose the ARMEABI albeit really slow.

image

Node.js and Phonegap

After installing Node.js locate and open the Node.js command prompt shortcut then install phonegap and cordova by executing the commands below. This will download and install the latest versions of the packages.

once that is done, you can now start building and testing phonegap apps.

Phonegap Build caveat

There is also a Phonegap build service you may use for free.Simply supply your html files in zip format from either  a public repository or by uploading them to their servers and in turn will supply you with a compiled app for the platforms you choose.

The disadvantage being that you will have to upload files every time you want to rebuild/debug the source. It doesn’t not provide emulation or testing environment either; So what ever time you save skipping the setup of your development environment will be negated sooner than later when you start to test.