Forem: Rogerio Taques

Setting up a NodeJS app with themed UI powered by SASS

Rogerio Taques — Wed, 23 Mar 2022 03:16:51 +0000

Hi, there! 👋

Straight to the point, we are going to see in this post how to set up a project that delivers a NodeJS app with a themed User Interface (UI) powered by SASS.

My assumptions are:

You are minimally familiarized with NodeJS apps
You know how to install Node packages with NPM
And, last but not least, you have a NodeJS project already 🙃

So, let's rock ...

Once upon a time, there is an app that needs to have multiple themes so your users could choose the one that suits them the most.

Surely you can create such themes using vanilla CSS, but that would be a waste of your precious time. And, as you may know, when it comes to serve your users, time is money! 🤑

So, to improve your results and optimize your time, let's use SASS to output the multiple themed CSS files.

Installing the necessary packages

We are gonna need the following packages to make it right, so please install them all as follows:

concurrently
gulp
gulp-sass
node-sass (or sass if you wish)

$ npm install -D concurrently gulp gulp-sass node-sass

Update your `package.json` scripts

You probably have your package.json already set up with some useful scripts, but let's update that in order to make it easier to start everything at once.

Add a watch script to take care of the gulp while developing the app.
Rename your start script with dev (or something else that makes sense to you, if you already have a dev script set).
Finally, add a new start so we can start everything at once

Once done, the script section of your packages.json file should looks like the following snippet:

"scripts": {
  ...

  "start": "concurrently --kill-others --names 'GULP,NODE' -c 'blue,green' 'npm run watch' 'npm run dev'",
  "watch": "gulp watch",
  "dev": "node index.js",

  ...
}

The task manager

The next step is creating a gulpfile.js which will be responsible for transpiling our SASS files into CSS.

Touch a new gulpfile.js file and paste the following content into it:

// gulpfile.js

const gulp = require('gulp');
const sass = require('gulp-sass')(require('node-sass'));

gulp.task('transpile', () => {
    return gulp
        .src('./themes/**/*.scss', { base: process.cwd() })
        .pipe(sass().on('error', sass.logError))
        .pipe(gulp.dest(function (file) {
            return file.base;
        }));
});

gulp.task('watch', () => {
    gulp.watch('./**/*.scss', (done) => {
        gulp.series(['transpile'])(done);
    });
});

gulp.task('default', gulp.series(['transpile']));

Note that there are 2 tasks in this Gulp file:

gulp.task('`transpile`', ...)

Converts any .scss file that is found in ./themes, outputting a .css file in the same location.

gulp.task('`watch`', ...)

Keeps an eye for any SASS file in your project and, when something is changed, calls transpile again, so a new output is built.

Theming up

For the sake of this exercise, let's have 2 super simple themes: default and red.

Assuming we do have a HTML boilerplate file already (e.g index.html), let's add a default class to the <body /> and import all the themes similarly to the example below:

<html >
  <head >
    <!-- ... -->
    <link rel="stylesheet" href="/themes/default/style.css" />
    <link rel="stylesheet" href="/themes/red/style.css" />
  </head>
  <body class="default">
    <!-- ... -->
  </body>
</html>

With the HTML updated, now, let's have the themes!

Create a themes folder at the root folder of your project.

Within that, create a default and a red folder respectively. Then, last but not least, create 2 style.scss files, one for each theme folder.

You should end up with something like:

/project
--/themes
----/default
------/style.scss
----/red
------/style.scss
--/ ...

Now, that the file structure is ready, some ID needs to be given to your newly created themes. In a very simple example, let's add the following code into your SASS files:

/* ./themes/default/style.scss */

html, body {
    &.default {
        background-color: aqua;
    }
}

and

/* ./themes/red/style.scss */

html, body {
    &.red {
        background-color: palevioletred;
    }
}

Wrapping things up

At this point you should be ready to have your themed app up. So, from a terminal window, run your app by typing the following inside your project folder:

$ npm start

Once your app is running, in the browser DevTool, try to replace the default class from the <body /> with red.

If everything went well, you should be able to see the background color of your page changing from aqua to palevioletred.

Great job! 👏 🚀

Happy coding.

Photo by BBiDDac on Unsplash

Using HestiaCP to manage a Virtual Private Server (VPS)

Rogerio Taques — Mon, 17 Jan 2022 02:54:00 +0000

Howdy! 👋

It has been a while since I posted for the last time! But, yeah, it's 2022, a new year has just begun and it's time for a new post. 🙌

Many years ago, I was used to have Virtualmin/Webmin installed as the control panel for the VPSs I do maintain, so I could manage them through a User Interface (UI) instead of making everything in the command line.

Despite the fact that these were powerful solutions to manage servers, I got bored because they also are quite complicated to operate, so I started looking for simpler options and came across another an option called VestaCP.

VestaCP was an outstanding open-source solution, built with PHP and very intuitive to be used. Well, it's true that the simplicity comes with a price: unlike Virtualmin/Webmin, some tasks would need to be performed in the command line if using VestaCP, but, that was a good trade-off considering my profile and needs.

If you already run a VestaCP and are looking for putting your VPS behind CloudFlare, I've posted here about how to change the VestaCP Admin Panel default port to work with CloudFlare, check it out.

For some reason, since I started using VestaCP, it looks like its team has not been able to release any major updates to the product, which gives me the impression that the product is not in active maintenance and, therefore, is degrading with the time! 🤔

Then, about 5 months ago, I (accidentally) found HestiaCP, another open-source Control Panel (CP) that seems to be an outstanding option to be considered!

In fact, HestiaCP is a fork from VestaCP, improved in so many different ways that it looks a completely different solution, even though keeping the simplicity and intuitiveness. Kudos to the HestiaCP Team! 🍾

Also, it looks like HestiaCP maintainers community is much more active and supportive when it comes to helping users out.

So, I decided to give it a try and taking the opportunity that I would need to setup a new VPS for a new product I'm working on, I went with HestiaCP at this time and ... everything has been working greatly since then. No complaints at all! 🍾 🙌

And, because it's based on VestaCP, to make it working behind CloudFlare requires the exact same steps as written in my previous article. The only difference is that you'll need to replace all vesta occurrences with hestia. 🤗

Have you ever used HestiaCP?

Please, share your experience in the comments bellow 👇🙇‍♂️

Signing up to online services with unique credentials

Rogerio Taques — Sun, 23 Aug 2020 11:41:12 +0000

Hey! 👋

I'm pretty sure that you have already heard (at least once at this point) about online services that were hacked and got their (users) data stolen and sold online, right?

If not, no worries, you definitely can see a (huge) list of hacked services right here: https://haveibeenpwned.com/PwnedWebsites. 👈

With over 10 trillion records in a bit more than 400 identified hacked websites (as for Aug 5th, 2020), chances are you'll be able to find (at least one) of your email addresses within one of those data-breaches!

Damn, I found mine in 9 of them! 😡

Right! An what now, you might be asking! How to (try to) prevent such a thing?

Well, I'd say that one of the best approaches I've ever found is to use credentials with a unique combination of emails and passwords for every single service out there, without repeating.

Sadly I only figured this out once my emails were already leaked! 😟

Indeed, this alone will not prevent the service provider to be hacked, nor the stolen data to be sold online, however, it'll help minimize the impact over any other service you use, reducing the risk of having your other accounts pwned by the same credentials reused here and there.

So, considering that the human being is known to be terrible at creating completely random passwords (because of our memory limitations), how would we create and (most importantly) manage all those unique combinations of unique emails and passwords?

Here's where password managers come to rescue us all!

There's plenty of password managers options in the market, both free, open-source, and paid solutions, and I'm pretty sure you'll be able to find one that suits your need.

I've been using 1Password for over a year now and am truly happy, even though its paid version has been a bit more expensive than some of its competitors in the market.

The password manager helps us to create truly random and secure passwords using a strong combination of alphanumeric characters and special symbols, and also link those with the services they were created for. Great, right?

Right. However, most of the time you're gonna be using random (and strong) passwords associated with a single email address, or a very small range of different addresses. That alone is already very useful, but what if you want to create a unique combination of email addresses and passwords for every single service you sign up?

Here's where Mail Shield comes to rescue us all 🤩 (Spoiler, I've created Mail Shield).

Mail Shield is a micro-service that creates random and unique aliases for Gmail accounts with a single click. Every alias can be used out there replacing the "real" Gmail address when signing up to online services or contact forms.

Every message sent to an alias will be delivered to the original Gmail inbox and people using the complete (premium) pack from Mail Shield, can have an unlimited number of different aliases, all of them "magically" delivering messages to a single inbox.

This is very handy when it comes to protecting your real email address and/ or creating a truly unique credential for every single online service you may subscribe to.

An alias (or shield as I'm used to calling it) can be paused or deleted at any time, blocking any received message to reach the user's inbox. Also, it's possible to block a specific sender, preventing annoying messages while keeping the shield working. 🤘

Now, talking again about the 10 trillion accounts leaked from online services, you can significantly reduce the risk of been pwned using Mail Shield with a password manager (again, 1Password was my choice).

When you get notified that one of the services you use got hacked and had their database leaked, you can easily update your account for that service with a completely new (and unpredictable) credential, using a unique and random shield and a secure automatically generated password!

Cool, isn't it? 🙌

By the way, if you choose to go with the complete (premium) pack from Mail Shield, it'll watch your registered email and all your shields for data-breaches, notifying you always one of them is found into datasets available on the web, so you can act quickly. 😉

Hope this can help you to improve your online privacy!

Cheers! 🍻

Automated server security package watcher in PHP

Rogerio Taques — Mon, 13 Jul 2020 06:26:56 +0000

Hi 👋,

I'm back and in this new article, we'll see how to set up a simple yet useful script that watches a (virtual private) server, notifying you (by email) always any security packages are available to be installed.

Also, as a bonus, the script will include a watcher for disk usage rate and whether the server needs a reboot, after any core update. 🙌 This's a very useful way to automate the server monitoring that works like a charm (at least for me 😅)!

All the code examples given here are gonna be written in PHP, however, you should be able to implement it using any other server-side language of your choice. So, feel free to use any other language you feel more comfortable with. If you choose to use a different one, lemme know and I'll be more than happy to also share it here. 🚀

If you're in a hurry (or lazy of reading till the end), just get the sample file here. This will give you the file ready to be used. Just don't forget to change the variables' contents.

.
.
.
.
.
.

Wow, glad to see you prefer to keep reading it! 😇

Great! So, let's jump to the funny part ... the code! 😉

The entire script will be written in a single file, let's create a PHP file (I'm calling it sec-watcher.php, but you name it as your wish) and add our first lines:

<?php 

/**
 * sec-watcher.php
 * Server security packages watcher.
 */

We may want to reuse this file across multiple servers, tho, let's put some variables to hold settings that can be easily changed (or automatically replaced in a CI/CD workflow) when deploying this to our servers.


# Who is sending the notification
$sender = 'admin@domain.tld';

# To who the notification will be sent.
# Wanna notify more people? Simply put multiple addresses
# separated by commas (,).
$notify = 'you@domain.tld';

# Give a name to identify your server. Usually the hostname.
$server = 'myserver.com'; 

# What mounted disk should be checked.
# Use '/dev/disk1s1' when on macOS.
$mountedDisk = '/dev/sda'; 

# What's the maximum usage before sending a notification
# for disk over-usage (don't go too low or too high here).
$diskUsageBoundary = 80; # %

Don't forget to replace these variable contents (e.g admin@domain.tld, you@domain.tld, and myserver.com) with values that make sense to you, right? 😉

Next, let's check whether our server needs a reboot. Linux distributions create a file that indicates when the system needs a reboot. We can check for the existence of that file to identify if our machine needs it.

// If this file exist, a reboot is required
$reboot = file_exists('/var/run/reboot-required');

Now, let's double-check if our server is running out of space on its disk. For that, we'll need to execute the command df and process its return.

We'll be looking for a specific pattern in the results that will contain the disk-usage rate and this will be emailed to you always the value is beyond your defined boundary.

// Gather info about disk usage
$res = exec("df -h | grep {$mountedDisk}");
$res = preg_replace('/\s{2,}/', ' ', $res);

$intUsedRate = 0;
$usedRate    = null;

if (!empty($res) && $res) {
    list($mountPoint, $totalSize, $usedSpace, $freeSpace, $usedRate) = explode(' ', $res);
    $intUsedRate = (int) preg_replace('/[^0-9]/i', '', $usedRate);
}

// Clear used rate when not passed the boundary
if ($diskUsageBoundary > $intUsedRate) {
    $usedRate = null;
}

Finally, let's gather the necessary information to determine whether our server has pending security packages to be installed.

Similarly to what happens when a reboot is required, Linux distributions have a special file in the system which is updated with the summary aways the system has packages to be installed, including the security ones.

The approach here will be watching for that file to figure out what we want to know.

// Gather info about available updates
$matches = [];
$note    = @file_get_contents('/var/lib/update-notifier/updates-available');
$note    = preg_replace("/\n/", " ", $note);

Great! With all the information we need in place, let's make sure our script really needs to email us ...

// Set a flag to control whether to send or not send a notification
$shouldNotify = (bool) (preg_match("/\d+\supdates?/i", $note, $matches) || !empty($usedRate) || $reboot);

Awesome! Our script is almost done.

All we need to do now is test if the notification should be sent or not sent and perform it to finalize. Here you go ...


// Notify when needed
if ($shouldNotify) {
    $headers = "From: {$sender} \n";

    $body = [
        "This is an automated message. \n",
    ];

    $count = (int) preg_replace("/[^0-9]/i", '', $matches[0]);

    if ($count) {
        $body[] = "{$count} pending security updates has been found.";
    }

    if (!empty($usedRate)) {
        $body[] = "{$mountedDisk} is {$usedRate} used. Needs an urgent review.";
        $body[] = "As general it is like: ";

        exec("df -h", $out);
        $body[] = "\t" . implode("\n\t", $out);
    }

    if ($reboot) {
        $body[] = "** A reboot is required. **";
    }

    $body[] = "Please review the '{$server}' server ASAP.";

    // echo implode("\n", $body) . "\n";
    mail($notify, "Server '{$server}' Pending Review", implode("\n", $body) . "\n", $headers, "-f {$sender}");
}

And just one more line to communicate we've done: 😅

echo "Daily updates review complete. \n";

If you prefer, you can get the file here 👈

Buuuuut, hold on. The job is not done yet!

.
.
.
.
.

We'll need to properly define the file permissions and schedule a CRON to run that file on a regular basis (let's say once a day?) ...

Upload the file to a directory of your preference on your server (remember, it doesn't need to be accessible from the web, right?).

Once you've uploaded it, we'll need to give its ownership to the root user and also instruct the system that our current (not privileged user) can run it.

So, from a terminal window (connected to your server, via SSH), run the following commands:

# This will change the ownership
$ sudo chown root:root /path/to/file/sec-watcher.php

Then, open the sudo config file (with visudo, please) and add an instruction to enable our user to call our file without the need for a password ...

$ sudo visudo

When the visudo file is open, add this line:

YOUR-USER-HERE   ALL=(ALL) NOPASSWD: /home/YOUR-USER-HERE/path/to/file/sec-watcher.php

Don't forget to replace YOUR-USER-HERE and /path/to/file/ with the user you are used to connecting to your server and the actual path to the directory you've chosen.

Finally ... yes, truly 😅 let's finish up by scheduling a CRON job that will call our file on a regular basis. Run the following command in your terminal window (that one connected to your server via SSH):

$ crontab -e

And add the following line ...

30 6 * * *  PHP -q /home/YOUR-USER-HERE/path/to/file/sec-watcher.php >/dev/null 2>&1

Save the file with CTRL + X and type Y.

Don't forget to replace YOUR-USER-HERE and /path/to/file/ with the user you are used to connecting to your server and the actual path to the directory you've chosen.

That's it! 😎 Now, you just need to welcome the email notifications coming to your inbox, always your server has a package pending to be updated or whenever its disk is getting closer to be full!

I hope it can help you!

Happy coding. 🤘🚀

An easy way to get the (real) client IP in PHP

Rogerio Taques — Thu, 11 Jun 2020 12:03:52 +0000

Here we go with another post! 🤘

In the other day I noticed all IPs recorded from visitor on one of my apps were the same, with a very little variation each-other! Aha~ found a bug!

Well, not much! 🙄 After a quick Google search I figured out that those IPs were all from CloudFlare (the CDN provider my apps are behind)! So, CloudFlare replaces the commonly used $_SERVER['REMOTE_ADDR'] variable with their own IP.

Fair enough!

So, if you're reading this, the chances are you are facing a similar problem and are looking for a solution ... or perhaps you're just curious, which is fine too. 🤪

Here's a very simple way to get the (real) client IP address. Note that the sintax used here is PHP7+, which means for earlier versions you're gonna need to apply some chained ifs and elses.

<?php

# PHP7+
$clientIP = $_SERVER['HTTP_CLIENT_IP'] 
    ?? $_SERVER["HTTP_CF_CONNECTING_IP"] # when behind cloudflare
    ?? $_SERVER['HTTP_X_FORWARDED'] 
    ?? $_SERVER['HTTP_X_FORWARDED_FOR'] 
    ?? $_SERVER['HTTP_FORWARDED'] 
    ?? $_SERVER['HTTP_FORWARDED_FOR'] 
    ?? $_SERVER['REMOTE_ADDR'] 
    ?? '0.0.0.0';

# Earlier than PHP7
$clientIP = '0.0.0.0';

if (isset($_SERVER['HTTP_CLIENT_IP'])) {
    $clientIP = $_SERVER['HTTP_CLIENT_IP'];
} elseif (isset($_SERVER['HTTP_CF_CONNECTING_IP'])) {
    # when behind cloudflare
    $clientIP = $_SERVER['HTTP_CF_CONNECTING_IP']; 
} elseif (isset($_SERVER['HTTP_X_FORWARDED_FOR'])) {
    $clientIP = $_SERVER['HTTP_X_FORWARDED_FOR'];
} elseif (isset($_SERVER['HTTP_X_FORWARDED'])) {
    $clientIP = $_SERVER['HTTP_X_FORWARDED'];
} elseif (isset($_SERVER['HTTP_FORWARDED_FOR'])) {
    $clientIP = $_SERVER['HTTP_FORWARDED_FOR'];
} elseif (isset($_SERVER['HTTP_FORWARDED'])) {
    $clientIP = $_SERVER['HTTP_FORWARDED'];
} elseif (isset($_SERVER['REMOTE_ADDR'])) {
    $clientIP = $_SERVER['REMOTE_ADDR'];
}

echo "My client IP: ", $clientIP;

Happy coding! 👋

Image reflection with CSS(3) 🤘

Rogerio Taques — Wed, 13 May 2020 15:21:05 +0000

Hi 👋,

Some time ago I came across a really cool feature from CSS3 that (to be honest) is not too much useful but still very handy if you're pursuing a special "look" to an image gallery on your website.

The image reflection! 👀

I was used to seeing people creating such effects with photo editors, applying the reflection to the image, and using that image on the website. But, this CSS3 feature brings us to the next level.

It creates an opportunity for your (website) users to quickly upload images thru your CMS and get those images automatically set with a (super cool) reflection effect!

But, don't get too excited with that and use with caution, after all, this feature is (yet) not standard and not supported by some browsers!

You can check the support HERE.

Right! Then, let's see the code:

img {
   -webkit-box-reflect: below;
}

This creates the basic reflection below your image. Pretty simple, isn't it?

Now, let's be honest! A reflection without a (little) gap and a gradient mask won't feel a real reflection, isn't it?

Then, check the next code:

img {
  -webkit-box-reflect: below 10px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(70%, transparent) , to(rgba(250, 250, 250, 0.1)));
}

This code will create a gradient-masked reflection below your image with a 10px gap with about 30% of the image visible in the reflection.

To adjust the length of your reflection, you need to use the color-stop to control the transition.

WFH tips I gave to my team

Rogerio Taques — Mon, 06 Apr 2020 04:15:29 +0000

Hi everybody!

As we've seen many companies around the world adhering to the Work From Home (WFH) strategy in an attempt to stop the spreading of the coronavirus, this was not different here.

Last month, we released everyone from the company to WFH and to give them some inspiration and a guideline on how to keep focused and highly motivated, I shared with them the following tips, which may also be very useful to you, if you're in the same page. Here we go:

1) Stick to a (good) routine. Every weekday you should:

a) Get up at the same time

Doesn’t matter what time you’ve gone to bed in the previous day, avoid waking up right before you start working. Try to have (at least) 7 hours of sleep and wake up at the same time.

b) Make your bed

Oh, yeah! Sounds like mom's advice, right? But making your bed every morning after you get up will create a sense of accomplishment and will give your brain (and body) the message that a (productive) day has started.

c) Stretch yourself and perhaps do some sort of exercise

Stretching in the morning will help your blood to circulate and take off from you the laziness. Doing some sort of exercise also helps you to energize your body (and mind) to start a fresh and productive day.

d) Perhaps take a shower, but definitely dress up as if you’re going out

Taking a shower in the morning is optional (even tho advised). But, definitely, you should dress up if you’re going out. I know it’s tempting to work the entire day in your pajamas, but you should avoid it. Dressing up will give your brain the message that it should wake up and get vigilant to whatever comes next.

e) Have a good breakfast

Coffee is optional, but I’d really suggest you have a good cup of it in the morning! However, eating something fresh and tasteful in the morning helps a lot by giving you the energy to start the day.

2) Find a place where you can work comfortably and stick with it

I know, it sounds like a cliché!

But finding a comfortable place to sit down and work helps you get focused and does not harm your body after a long working journey. Places close to the window will give you enough natural light to work and do not give you the enclosure feeling.

Oh, sure … get out of the bed! Working sitting on your bed (with your laptop) sounds tempting, right? But that’s what you must avoid at all costs. As time passes, you’ll get sleepy, the “comfortable” becomes “uncomfortable” and your productivity (and focus) will drop sharp!

3) Secure a good Internet connection and tools

Working from home is awesome, but you need to secure the right tools and environment for doing it great. Since every tool we use is on the cloud (or based on online services) a good Internet connection is extremely necessary and important.

Give priority to a wired network (if you can) over the wireless one, because it will give you higher speed connection and less latency. If not possible, try to stay closer to the Wi-Fi router to avoid shadow zones where your connection may get unstable.

4) Organize your working day with a predefined agenda

Writing down a to-do list with the tasks you’re expected to do helps you stay focused and gives you a strong sense of accomplishment as always one of the written tasks are complete. This motivates you to keep moving and at the end of the day, you’ll see you have been more productive and efficient with your work.

Try to do this ahead of your day. Create your to-do list in the previous day, thinking and planning the tasks you need to perform the next day.

5) Avoid distractions as if you are in the office

Let’s be honest here. Working from home creates a huge opportunity for us to get more relaxed, therefore distracted, because there’s no one looking on our shoulders, right? So easy to keep the TV on and spend an enormous amount of time surfing online (or even watching Netflix or YouTube) … procrastinating!

Wrong! First because, even tho no one is physically watching you to work, your results and performance can be easily measured at the end of the day (week, month or quarter) by the results you bring, the intensity of your communication with others and online presence and, of course, with the help of all the logs from all the services and tools we use for work.

So, avoid distractions while working at all costs! Turn off the TV and stay away from online streaming services, unless you use them to stream some (cool and inspiring) music to animate your environment if that makes you get more focused. ;)

6) Work focused, but healthy

When working from home we need to be even more focused and organized. That’s the key to keep up productivity and performance. Just be 200% focused while working.

However, to be really focused you need some break time as well. So, I strongly recommend that you take a 5 - 10 minutes break every 1 (or two) hours … this will help you to keep the focus by refreshing your mind.

Stand up, go to the window and look up to the horizons. This will help your eyes to get relaxed from the focus on the laptop screen and also helps your mind to relax and, perhaps, get insights about how to finish up one of your written tasks (perhaps you’d like to review the tip #4!).

7) Ramp up the communication

Work from home also brings some sort of “isolation” feeling, I know, especially if you leave alone. Because you’re not in the office, sharing a space with other people who you can simply jump to a professional or a casual conversation, sometimes this slows you down.

Keep the communication up! We have good tools available to keep the (written and spoken) communication alive. The more you communicate, the more your team and coworkers will understand what tasks you’re working on, what challenges you’re facing and, perhaps, how they can help you.

Send regular updates on chat channels. When some topic needs to be discussed, jump straight to a video (or audio) call that speeds up the understanding of whatever needs to be discussed.

8) Get disconnected

Oh, yeah! At the end of the day, we have focused a lot and spent a lot of energy working and finding new ways to be productive and bring (excellent) results, right? Yes, right.

So, don’t forget to disconnect when your job is done! You will need the time to relax and refresh to get prepared for the next day of work, that you’ll need to be (again) 200% committed to.

When your work-day gets to the end, make sure to clean (and organize) your working space in a way you can get back in the next day and feel comfortable again.

Coding better with ESLint + Gulp

Rogerio Taques — Mon, 17 Feb 2020 02:52:10 +0000

Yo, there!

If you don’t lint your javascript code yet, you must start doing it right now!

Let me share how to setup ESLint alongside with Gulp to improve the quality of your Javascript code, reduce the chances of you find stupid bugs on your apps, and make your life easier. 😉

This content was originally posted here.

I am assuming here you already have your project up and running with Gulp, so what I am gonna tell you is how to attach ESLint on it. However, ESLint can be used with Webpack, Parcel and any other bundler (or task manager, as Gulp) out there.

1- First, let’s add the gulp-eslint and other needed modules to your package.json by running the following code in a terminal window:

$ npm i -D gulp-eslint 
$ npm i -D eslint-config-airbnb-base eslint-plugin-import

2- Then let’s create a ESLint setting file to your project. Touch a file called .eslintrc to the root folder of your project:

$ touch .eslintrc 
$ nano .eslintrc

And add the following instructions on it:

{
  "extends": ["airbnb-base"]
}

Or, you may rather get the one I am using.

3- The next step is creating a gulp task for ESLint. Open the Gulpfile.js from your project and write the following block of code there:

// The lint task
gulp.task('lint', function() {
  return gulp    
    // Define the source files
    .src('src/**/*.js').pipe(eslint({}))
    // Output the results in the console
    .pipe(eslint.format());
});

// The default task
// You might have one already, in that case, just add ['lint']
gulp.task('default', ['lint']);

Good, good! It is done. 🙌

Now, once you have all settings done, you can already start checking your code lint reports, basically outputted in the terminal where you’re running Gulp.

Happy coding. 🤟

Uploading PDF files as base64 strings in PHP and saving it in the hard-disk.

Rogerio Taques — Fri, 14 Feb 2020 04:33:44 +0000

Hi there!

If you’re reading this post, chances are you’re having some issues when trying to upload (PDF) files as base64 strings to later store them “physically” in the hard-disk. No worries, it might be simpler than you think and I got you covered in this article. 😉

I’ve spent a few hours on the other day trying to figure out how to do it right. Neither Google nor Stackoverflow helped me at that time, as I searched for a while without any luck on finding any working solution! So, I hope this can help you.

First, a bit of context.

My team and I am building a Single Page Application (SPA) CRM which has a feature where the employees are required to upload a PDF file, via an ajax call against a RESTful API. As per the requirements, once received, the PDF file should be “physically” stored in the server alongside other documents (not in the database).

The approach taken was to convert the PDF file into a base64 string and submit that alongside the complementary data via POST method. The API, then, would be responsible to get that string and reconstruct the file to be stored in the disk.

Implementing this was fairly simple, however, it took us a while until we manage to properly revert the base64 string into the PDF file to be saved.

Here is how we’ve initially coded it:


// <file>.ts

// Converting a PDF file to a base64 string with Javascript. 
// This method is part of a bigger Vue.js component.

getFileInfo(evt: any): void {
  const reader: FileReader = new FileReader();
  const files: Array<any> = evt.target.files || evt.dataTransfer.files;

  reader.addEventListener(
    'load',
    () => {
      this.form.file_path = reader.result;
    },
    false
  );

  if (files[0]) {
    reader.readAsDataURL(files[0]);
  }
} // getFileInfo


// <file>.php
// The non-working solution for converting a base64 to PDF with PHP.

public function uploadFileFromBlobString($base64string = '', $file_name = '', $folder = '')
{
    $file_path = "";
    $result = 0;

    // Convert blob (base64 string) back to PDF
    if (!empty($base64string)) {
        $base64data = base64_decode($base64string, true);
        $file_path  = "{$folder}/{$file_name}";

        // Return the number of bytes saved, or false on failure
        $result = file_put_contents("{$this->_assets_path}/{$file_path}", $base64data);
    }

    return $result;
} // uploadFileFromBlobString

With the above approach, everything was working fine except by the fact that the saved PDF file was getting “corrupted” and one was not been able to open it back.

The problem was that when converting the PDF file to a base64 string, it receives an extra piece of data as a prefix ( data:application/pdf;base64,) which when converted back to PDF simply corrupts the file.

So, as you may have already figured out, the solution was simply removing the base64 header from the string before converting it back to PDF, as follows:


// <file>.php
// The working solution for converting a base64 string to a PDF file with PHP. 

public function uploadFileFromBlobString($base64string = '', $file_name = '', $folder = '')
{

    $file_path = "";
    $result = 0;

    // Convert blob (base64 string) back to PDF
    if (!empty($base64string)) {

        // Detects if there is base64 encoding header in the string.
        // If so, it needs to be removed prior to saving the content to a phisical file.
        if (strpos($base64string, ',') !== false) {
            @list($encode, $base64string) = explode(',', $base64string);
        }

        $base64data = base64_decode($base64string, true);
        $file_path  = "{$folder}/{$file_name}";

        // Return the number of bytes saved, or false on failure
        $result = file_put_contents("{$this->_assets_path}/{$file_path}", $base64data);
    }

    return $result;
} // uploadFileFromBlobString

As you may see above, to get it working we just had to include the following conditional block to the function we’ve written before:


// Detects if there is base64 encoding header in the string.
// If so, it needs to be removed prior to saving the content to a physical file.
if (strpos($base64string, ',') !== false) {
    @list($encode, $base64string) = explode(',', $base64string);
}

And if the base64 prefix is found, all that needs to be done is removing it from the string before writing it back in the hard disk as a PDF file! 🤘

That’s pretty much it.

I hope it can help you to not be struggling with such a simple issue, as I was for a few hours until figure this out! 😉

Happy coding! 🤘

Empty $_POST and/or $_FILES in PHP?

Rogerio Taques — Thu, 13 Feb 2020 10:46:44 +0000

Hey!

I’m assuming that you’ve reached this article because you’re (probably desperate) looking for a solution to fix your issues with empty $_POST or $_FILES variables in PHP, right?

This content was originally posted on my Medium blog.

Well, I was pretty much like you up to 2 days ago and what I can tell you is, the solution might be far simpler than what you’re thinking!

Making a long sentence short: Check on your php.ini file if the enable_post_data_reading property is On.

The PHP relies on that property to know whether populate or not populate the $_POST and $_FILES superglobal variables.

Back to my story …

I first noticed the problem when trying to make some changes to my client’s project, an OpenCart based e-commerce. Basically, the entire store was working fine, but I couldn’t login at all, neither as a client or administrator.

After spending some days googling about OpenCart and a possible authentication issue, with any success at all, I realized that the problem could be on the PHP configuration when I remembered that my Mac OS was updated few months before, which also has made some changes to the Apache and PHP settings!

Tada~! Solution found!

Looking into the PHP ini file, I did figure out that the property enable_post_data_reading was set to Off, while it’s advised to be On. Actually, it’s supposed to be On by default, but for some unknown reason, it was turned off by the time I’ve updated the OS!

Once that property was set back to On, everything starts working back. 🙂

By the way, if you need to check all other properties from the PHP settings, you can refer to this website:

http://php.net/manual/en/ini.core.php

See you soon! Cheers. 🍻

VestaCP And CloudFlare, Changing the default port of the Admin Panel

Rogerio Taques — Wed, 12 Feb 2020 13:47:42 +0000

Hi!

This content was originally published on my Medium blog.

If you have a VPS to manage, chances are you also have installed a Hosting Control Panel which helps you visually do that.

There are many solutions in the market, some paid, other free. I’m using the free VestaCP in both of my client’s servers, as well as in my own VPS and I’d recommend you to have a look in it.

Also, I’m used to having CloudFlare to manage the DNS settings, as well as given me a huge hand with content distribution and caching. You can even start using it for free!

However, there's a problem when you have such a combination.

By default, VestaCP listen to the port 8083 for its interface, while CloudFlare does not forward such port on the free plan! If you chose to keep using the standard port, it’s absolutely fine because you can always access your panel with the server IP address.

But, if you’d like to get your team accessing the panel using one domain name (e.g: your-business.com) then, you’ll need to keep reading a bit more! 😉

Check here all the ports CloudFlare supports on the free plan. If you strictly need support to any other port, then consider upgrading to a paid plan! It starts with as little as $20/ mo (as for July of 2019).

But, if you want to use VestaCP and still would like to stick with the free plan, then you can always change the port used by the Hosting Control Panel. You can choose any one of the supported ports from CloudFlare, for instance, 2096.

1 Step: Adding a new firewall rule

We need this to enable the firewall accepting traffic in the chosen port. If you’re not using a firewall on your machine (highly unrecommended), skip this step.

Go to https://[your-server-ip]:8083/list/firewall/ and click over the “Add rule” button, and fill the form like the example below and complete by hitting the “Add” button.

!["VestaCP Firewall Add-Rule Form"](https://miro.medium.com/max/1804/1*9VF1QBkdXaf7-9Nu0TqDug.png) *(VestaCP Firewall Add-Rule Form)*

All done! Time for changing the Nginx settings and restart VestaCP service.

2 Step: Changing Nginx configuration:

Open a new terminal window and connect to your server over SSH. Note that this should be done using an account with sufficient privilege to editing files under /usr/local.

Just open the config file:

$ editor /usr/local/vesta/nginx/conf/nginx.conf

Search for the text listen. You can do it by pressing CTRL + W …

Once you find the line, change the port number from 8083 to 2096 (or any other port number you choose). The final result will look something like:

# Vhost
server {
    listen 2096;
    ...
}

All good, just save the config file. You can do it by pressing CTRL + X and typing Y followed by ENTER to confirm the file’s changes.

3 Step: Restarting VestaCP service

All you need to do now is restart the service to get it working properly. The service can be restarted with:

/etc/init.d/vesta restart

All done!

Now you should be able to access the VestaCP thru your domain name and the new defined port, e.g: https://your-domain.com:2096/

Good job!