Category: Computing Page 1 of 50

My obsession with using an iPad for web development started all the way back with the first generation iPad. Tools then were sparse, but I made it work by jumping through some hoops. Today’s iPad is a much superior machine, and the available apps have come a long way toward making the iPad comfortable enough, and capable of being a web development machine.

Long have I thought about writing an article on how I use my iPad for web development. I think I just needed the right impetus, which came about today.

A long time business friend texted me a challenge, to gather a list of URLs for all images uploaded to a particular website. The kicker- I had to do it faster, and more elegantly, than another mutual friend we have. An iPad was already in my hands, all I needed was a stand to hold it up, and a Bluetooth keyboard for convenience. While our mutual friend has an impressive desktop machine, in less than 10 minutes, I was able to come up with a solution, code it, and publish it as a generic utility.

There are really only three tools that I need to enable web development on my iPad. I will describe those, but first, a bit about the iPad I use.

The Platform — 2018 iPad

You might think the latest, greatest, most powerful iPad it needed, but that is not the case. My iPad is from 2018, a couple years old as of the writing of this article. It is also the base model iPad. Nothing fancy to it.

I would love to have the latest iPad Pro, but since I am not doing hardcore graphics or video editing, it is not necessary.

Now let’s talk about the tools I use for web development from an iPad.

The Server — 100% Remote

The development server is fully remote. It is possible to run a local server, but it is a lot of work, and not worth the hassle. I have a Droplet running on Digital Ocean that hosts all work in progress. Code is edited via ssh.

Security is paramount- the server is locked down and will only respond to my IP address.

For an in-depth look at this set up, read my article at https://medium.com/@benlobaugh/the-unchained-developer-free-your-workflow-and-become-device-agnostic-ce0450e238de

SSH Client — Terminus

The key to making the iPad a useable web development platform for me is SSH. No code is created locally. In fact, all of the resources related to a project live remotely. This means the choice of an SSH client is critical. A few years ago, SSH app choices were limited, and none were what I would consider to be quality enough to spend hours using. They were for quick commands only. Then, I used web based SSH clients, which have their own set of quirks. Today, the quality and selection of apps has improved.

My SSH client app of choice is Terminus. Terminus works across several platforms. It has built in sftp, mosh, and telnet clients; will run fully in the background without disconnecting; and has a lot of other great features. It really shines as an SSH client though. I am able to define hosts and reconnect with a quick tap.

Once connected, there are a plethora of tools at my disposal. The most critical tools to my success are:

Docker
Vim
Tmux
Git

With them, I have been able to set up any project. When other tools are called for, such as composer or npm, I will often run them inside of a Docker container.

Another critical need is the ability to transfer files between machines. File transfers are a breeze, with common Linux tools.

Web Browser

The last, and possibly most critical, piece for web development on an iPad is, of course, a web browser. Apple updated Safari to handle desktop versions of sites, freeing the iPad from a mobile only experience.

It seems that everyone has a browser they are devoted to, for better or worse. I happen to find Safari to be acceptable, and with the integrations Apple has created it was a no-brainer choice. Safari handles nearly all my needs. Combine it with a tool such as Cross Browser Testing and anything can be accomplished.

Helpful Hardware

The apps get me running from the software side, and are all I need, but there are two pieces of hardware that I find extremely valuable from a comfort and efficiency standpoint: a tablet stand and a Bluetooth keyboard. Really any will do. Specifically I use the following:

Amazon Basics Adjustable Tablet Holder — I like how flexible it is for sizing and angles. Folds up compactly as well.
Logitech multidevice backlit keyboard. Unfortunately Logitech no longer makes this keyboard. A bummer since I believe it is the best keyboard they ever made. Logitech has other Bluetooth keyboards that will work also, such as this Bluetooth keyboard, that also has a tablet stand built in.

Fin

That’s it. Those three tools; remote server, ssh, web browser; provide 99% of my needs as a web developer. In fact, if you look at my laptop, you will notice my workflow there is very similar. I have even used the same setup on my iPhone to code while riding a bus!

There are a couple tools I use on the laptop that have good iPad equivalents as well.

Postman -> HTTPbot for all query testing needs
Browser debugger — this is an area that is still weak for the iPad. There are some promising tools though, such as MIHTool
Of course, Slack for accessing developer chat communities

I hope this helps you kick start your own iPad web development journey. Let me know in the comments if there is any way I can help you.

If you already used your iPad for web development, what tools and techniques do you have?

Quick tip to access protected properties in PHP object

By Ben Lobaugh (blobaugh)

On May 27, 2020

In Computing, PHP, Programming

Calling an object that has a protected property that you need access to? This function will allow you to quickly access data stored in protected properties of PHP objects.

Note: I tested this on PHP 7.4. It will likely work on other versions, but may need tweaking.

Good developers will protect the internals of their objects with private and protected scopes. That means from outside of the object your code will not be able to access whatever is protected. What I am about to show you breaks that encapsulation. Generally, this is not something you want to do, however, if you are working with an object you have no control over, it may be necessary. I ran across this while working with an object from an external library.

This method works by typecasting the object to an array. You can then access the property using a little known method.

Let’s see the code!

    function getProtectedValue( $object, $prop_name ) { 
        $array = ( array ) $object;
        $prefix = chr( 0 ) . '*' . chr( 0 );
        return $array[ $prefix . $prop_name ];
    }

Photo courtesy of Unsplash https://unsplash.com/photos/Vp3oWLsPOss

The Unchained Developer- Free Your Workflow and Become Device Agnostic

By Ben Lobaugh (blobaugh)

On May 4, 2020

In Computing, Web Development

Back in 2011, I was getting frustrated with my aging development machine. It could barely keep up with me, though I resisted getting a new machine because it can be so frustratingly time-consuming to set up a new machine. As I pondered what to do a thought struck me, “you are a WEB developer Ben…. DUH!!” Right, thanks self. The web does not care what device is connected to it. Why couldn’t I also be device agnostic?

With that in mind, I set off to see if I could truly unchain my development and work from a specific device, and operate from anywhere. Not only was I successful, but I have also been using the same setup for nine years. I have even created patches from my iPhone while riding a city bus to meet a friend for coffee!

If you’ve been pondering the same, I would like to share how, with a little effort and very little cash, you too can become an unchained developer.

I started out with some strict criteria in mind:

Cheap
Accessible from anywhere
Simple file management
Strong security
FAST
Flexible
Ability to tap into other systems
Smooth editing experience

Step One – Decouple the development environment

Like many developers, I was running a (M/L)AMP stack on my machine. That meant installing Nginx or Apache, MySQL, PHP, and all other necessary packages directly onto my machine, but what is a web server? Generally, for my work, Nginx or Apache, MySQL, and PHP. It was easy enough to transition those components to a remote machine.

After some research, I selected Digital Ocean as my host of choice. Digital Ocean has been very good to me, over the years. Their offerings are easy to understand and their cost is super cheap. I started with the $5/mo server, and, if your criteria are similar to mine, I recommend you do the same.

When I need more horsepower for running data migrations and other intense processes I simply tell Digital Ocean to temporarily upgrade the machine. In a matter of minutes, I can go from a small, single-core machine to 32 cores and 3,840 gigabytes of RAM! Because Digital Ocean charges by the hour, I can run hefty scripts and only spend a couple of dollars when temporarily upsizing, vs sometimes days of processing data on the smaller machine size.

The primary limitation I have had to contend with is storage space. Digital Ocean to the rescue again! They offer a service called “Volumes” that mount directly to the machine. The volume interacts just like an attached hard drive, and you only pay for what you use. Volumes scale up to terabytes in size. I started with a 50 gigabyte volume, at a cost of another $5 per month.

At this point, the hosting cost is $10 per month. For the cost of a coffee and a pastry, I successfully removed my local machine as a barrier for hosting development sites!

Server security

When my laptop was the development environment, the sites and databases were, by default, kept out of the eye of the general public. With the move to the Digital Ocean server came a new concern, security of my client’s data. An unauthorized person stumbling upon one of these sites could have dire legal consequences for both me and the client.

Digital Ocean provides free firewalls; easy to provision and with a simple UI for management. Using this firewall, I blocked all ports except the web (http, https) and ssh. I went one step further and limited access to only an IP whitelist. This list is manually managed. It does make accessing the server a bit more onerous while traveling, but adding and removing IPs by hand provides a visual indicator that security is tight, and only those machines that need it have access.

Safe on dropped connections

When running a long script locally, it is no big deal to pop open a terminal, start the script, and walk away, trusting it will continue. When running a script via ssh on a remote server you enter a whole new ball game. I needed to have the same confidence that scripts would continue to run whether my connection dropped or not. Enter tmux.

Tmux is an incredibly powerful tool. At its heart, tmux is a terminal multiplexer. Meaning, from a single terminal session, you can create splits into multiple shells, each running its own commands, and different panes. The most important feature to me, however, is that tmux keeps its terminal session running even if you are no longer connected via ssh. That means I can run a command and walk away with confidence it will continue to run. Heck, if I am on a laptop I can turn the laptop off and tmux keeps that command running.

With tmux, I can even connect from a different device to that same session. That is, in fact, how I was coding from my iPhone while riding a city bus. I had the files open on my laptop in tmux and vim from before I turned off the laptop. I reconnected the ssh session from my phone and BAM, instantly back in the editor, right where I left off.

Another great benefit of running commands on the server is that it consumes zero local resources. That means whether I start the command from my MacBook Pro or my iPhone, it will run without creating a burden on my local device.

Docker for simplicity

I did not want to get locked into a difficult to manage web server solution and I desired the flexibility to utilize different versions of software, and different types of servers, such as Nginx, Node, and Apache. Docker is a natural fit. It allows me to run client projects in complete isolation of each other.

My preferred way to structure a client project with Docker is:

Nginx reverse proxy – Takes care of domain lookups and routing to the proper client site
MySQL – I run a new MySQL instance for each client, to prevent information spillage between private client databases.
Service 1 (Such as Elasticsearch)
Service 2 (Such as Redis)
Service N (Whatever else is needed!)
Webserver

File management

So far, I have solved the web server side of things. Now I need to get files to the server to develop on. There are three methods typically used:

sftp/scp
Github/git
Direct download

sftp/scp

Both sftp and scp allow you to connect to a remote server to send files. I prefer scp as it is simple and comes with all ssh clients, meaning it is available out of the box on Linux and MacOS. This is the method that I typically use to get local files to the server.

Using scp to transfer a local project to the server is as simple as:

$ scp -r local_project_folder server:/path/to/projects

As a bonus, scp can work in both directions. Call the server first to retrieve files from the remote machine.

Github/git

My preferred method of assessing project code is via a git repository, such as Github. A simple git clone and your files are available on the server. I typically do this via an ssh cli, in fact, I really enjoy the cli so most of my work is done via cli.

Once the project is pulled from git and all the build tools are installed, you will be able to run composer, npm, grunt, etc., just like you would locally.

Direct download

At times, I may need to download a file directly. Prior to working on a remote server, I would be at the mercy of my internet connection. Let me tell you this, I lived on a boat for nearly four years and the internet was slooooow. If a client sent me a database, it would take all day to download. The Digital Ocean, server has a crazy fast connection and the same download now takes minutes, if that. This saved a ton of time and angst over dropped downloads. The file needed to be on the server anyway, so downloading direct prevented two days’ worth of file transfers!

The wget tool is my go-to tool for downloading due to its simplicity. Curl is also a great option, though. Downloading a file with wget is as simple as:

$ wget https://example.com/file.zip

Smooth editing experience

When it comes down to it, editing text is the primary job of a web developer, therefore, having a smooth editing experience is crucial.

Being a long time Linux guy, and lover of the cli, I naturally turned to vim as my defacto editor.

Now wait a minute, before you go smirking to Sublime, or VS Code, or whatever the current hotness is, recall that vim has been around for ages. It has a robust plugins system integrating every functionality you can imagine. Not only that, using vim directly on the server frees me from any reliance on a local editor or IDE. I have the freedom and flexibility to really program from any device I desire. I have worked from all sorts of devices: MacBooks, iPhone, iPad, Android tablet, multiple flavors of Windows, and Linux with complete freedom to open a file, edit, and then reconnect, exactly where I left off from another machine.

A few years back, a buddy scoffed at my “cute little [vim] editor”. He was proud of his Sublime setup. It really was rather nifty. I mocked him right back saying, “vim can do anything Sublime can do, better and faster- and you call yourself a Linux guy….” He laughed it off and we carried on with our projects. The next morning he called, sounding a bit off. “Remember when you made fun of me yesterday for being a ‘Linux guy’ and using Sublime instead of vim?” “Yeeesssssss,” came my hesitant reply, not sure where this was going. “Well,” he angrily spat , “That comment bugged me all day. I decided to pull up vim and prove you wrong! I stayed up all night, trying to prove you wrong and you know what happened? I have a really cool vim setup that is identical to the Sublime setup! I deleted Sublime.”

True story, I swear!

All joking aside though, most editors and IDEs these days do support ssh. It is likely that whatever editor you prefer to use will still be compatible with remote development. Check out the editor support articles for guidance.

That’s it!

And that is really all it took to unchain my development workflow from a single machine and free me up to work anywhere, on anything. I no longer worry about a laptop dying on me. If it goes up in smoke, I can grab my iPad and be back up and running as fast as ssh reconnects.

Bonus Round – Mobility

I wanted to see how far I could take the unchained approach and continued to push the envelope. To this day, there is nothing I run that requires a specific machine. The “move to the cloud” movement has only made things easier.

Here are some of the other things that allowed me to become 100% unchained from a single machine:

Communication

Webmail, or IMAP connections, via an app
Slack facilitates instant team communication. There are apps for everything and a web UI as a fallback
IRC. Yes, IRC. The first chat groups I was ever part of were via IRC on the Freenode network, where I am still active today
Zoom. Great video conferencing software that requires very little bandwidth to operate

Connectivity

In-home wifi
On the go, the cell hotspot hits the spot
Most coffee shops and many public spaces have free wifi now

Secure connections

Use a VPN to prevent traffic snooping
SSH tunnels can also be used to route traffic directly to the server

I hope this article has inspired you to become an unchained developer and saved you some time in the process. I love the freedom and stress reduction it has afforded me. If you have a low powered machine that struggles under the weight of your development environment, this could save you big $$$ on an upgrade!

Are you already an unchained developer? What tips and tricks can you share in the comments?

Questions or need help designing your unchained server? I am happy to help you find an answer. Drop me a line on my contact page.

How to Force SSL (HTTPS) in Laravel

By Ben Lobaugh (blobaugh)

On March 10, 2020

In Computing, Web Development

Out of the box, Laravel will allow both HTTPS and HTTP requests to your website or application. Ideally all requests are served via SSL. There are several ways to accomplish this, some of which require access to server configs. I am going to show you how you can easily force SSL in your Laravel application to ensure HTTPS will be on no matter where you application is deployed. Of course the server still requires a valid SSL certificate to run- that is outside the scope of this tutorial.

Assumptions

Working server with the SSL certificate already installed
Laravel app running
Requests being fulfilled on both HTTP and HTTPS
Basic Laravel knowledge

Time to complete in your app

30 minutes or less!

How it works

Laravel provides a mechanism for filtering HTTP requests called Middleware. Middleware has many use cases, a few of which include: user verification, CORS headers, logging requests, etc. Only after all Middleware conditions have been met is the app able to fulfill the visitor’s request. This is the perfect place for us to enforce SSL.

Read more about Middleware in the on the official Laravel docs https://laravel.com/docs/master/middleware

Step One: Create the Middleware Base

Middleware can be generated automatically with artisan with the following command:

php artisan make:middleware ForceSSL

The new file will be created in app/Http/Middleware/ForceSSL.php

namespace App\Http\Middleware;

use Closure;

class ForceSSL
{

    /**
     * Handle an incoming request.
     *
     * @param  \Illuminate\Http\Request  $request
     * @param  \Closure  $next
     * @return mixed
     */
    public function handle($request, Closure $next)
    {
        return $next($request);
    }
}

Step Two: Update the handler

All we have to do now is look at the request and if it is not secure redirect to the secure version of the url!

Update the handle method like so

    public function handle($request, Closure $next)
    {

        // If the request is not secure, redirect to the HTTPS url.
        if( !$request->secure() ) {
            return redirect()->secure( $request->getRequestUri() );
        }

        // Otherwise carry on.
        return $next($request);
    }

Step Three: Test

That is it.

Really.

Go test it.

Step Four: Enjoy a nice scotch

‘nuff said

Photo by Anita Jankovic on Unsplash

Add a Mailchimp email subscription form in Laravel – double opt in!

By Ben Lobaugh (blobaugh)

On March 8, 2020

In Computing, Web Development

With several fantastic extension out there, integrating a Mailchimp email subscription form in Laravel has never been easier!

I am going to show you an example integration that collects an email address in a simple form. We will be using the laravel-newsletter package by spatie.

Assumptions

You have a Laravel application already running
You have a Mailchimp account
You have a basic understanding of Laravel

Step One: Include the spatie/laravel-newsletter package

Include the spatie/laravel-newsletter package in your project with

composer require spatie/laravel-newsletter

This package contains a very easy to use set of methods to control all aspects of your subscribers and user management. In this tutorial we will only be using the subscribe functionality.

Step Two: Configuration

The default configuration file will be generated with

php artisan vendor:publish --provider="Spatie\Newsletter\NewsletterServiceProvider"

A file will be created at config/newsletter.php. In this file are a set of variables that will be needed in the .env file.

MAILCHIMP_APIKEY – Find it at https://us10.admin.mailchimp.com/account/api-key-popup
MAILCHIMP_LIST_ID – Find it with http://kb.mailchimp.com/lists/managing-subscribers/find-your-list-id

Step Three: Create the Controller

A Controller will be used to send off the subscriber’s email to the Mailchimp service. Other tutorials on form submission will also include a Model and Migration here. I am choosing to skip that since we are not putting data into a database, but rather are acting as a passthrough.

php artisan make:controller Subscriber

The controller file will be created at app/Http/Controllers/Subscriber.php

Add a method called addSubscriber

    public function addSubscriber( Request $request ) {

        $validatedData = $request->validate([
            'email' => 'required|email',
        ]);

        // Do additional validation and security checks here....

        // Sign up the user!
        Newsletter::subscribePending( $validatedData['email'] );

        if( Newsletter::lastActionSucceeded() ) {
            $status = json_encode( [ 'success' => true, 'message' => 'You have been added to the list! Please check your email to confirm.' ] );
        } else {
            $status = json_encode( [ 'success' => false, 'message' => 'There was an issue adding you to the list! Please try again or contact the admin.', 'error' => Newsletter::getLastError() ] );
        }

        return $status;
    }

Step Four: Update routes

Next you will need to update your routes file to add the new endpoint. Do this in routes/web.php

Route::get('subscriber/add’, 'Subscriber@addSubscriber');

If you are building this into an API you can use the routes/api.php file.

Step Five: Wire up your form

This is the final step to world domination!…. or at least having your subscription form ready for prime time. Simply wire up your form to use this new endpoint. I am going to assume that you know how to handle html forms here 😉

Step Six: Final Testing

Because we set this up as a GET query, testing is as simple as passing the email query parameter. Submit an email and see it populate in your Mailchimp account!

Step Seven: Drink Scotch

The final and most important step!

I think, therefore I am. I am, therefore I sail

Category: Computing Page 1 of 50

Using An iPad For Web Development

The Platform — 2018 iPad

The Server — 100% Remote

SSH Client — Terminus

Web Browser

Helpful Hardware

Fin

Quick tip to access protected properties in PHP object

The Unchained Developer- Free Your Workflow and Become Device Agnostic

Step One – Decouple the development environment

Server security

Safe on dropped connections

Docker for simplicity

File management

sftp/scp

Github/git

Direct download

Smooth editing experience

That’s it!

Bonus Round – Mobility

How to Force SSL (HTTPS) in Laravel

Assumptions

Time to complete in your app

How it works

Step One: Create the Middleware Base

Step Two: Update the handler

Step Three: Test

Step Four: Enjoy a nice scotch

Add a Mailchimp email subscription form in Laravel – double opt in!

Assumptions

Step One: Include the spatie/laravel-newsletter package

Step Two: Configuration

Step Three: Create the Controller

Step Four: Update routes

Step Five: Wire up your form

Step Six: Final Testing

Step Seven: Drink Scotch