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

Tag: web development

Using An iPad For Web Development

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

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

How to use custom pivot tables in Laravel 6.x

Have you run into this before?

Your app’s database table structure is predefined and unalterable. There are lookup tables (called pivot table in Laravel) that create many to many relationships between tables using YOUR naming convention. It makes sense in the context of your application, but you quickly find out that Laravel’s relationship defaults do not match it well.

Lets take this scenario for example:

You have users who are part of organizations, and organizations can have groups in them, created by the users.

There are three primary tables:

  • users
  • organizations
  • groups

Additionally there is a lookup table called organization_groups. The lookup table contains not only the related id, but several other relevant data points, including a field called “created_by_user_id”.

This looks good in theory, however Laravel is going to require the pivot (lookup) table to be named groups_organizations out of the box. In your data structure it logically makes sense to have the table named organization_groups though. Luckily this is entirely possible, though the documentation on how to do it leaves a little to be desired.

Step One: The basic models

Let’s start out by creating the basic models. This can be easily done with Laravel’s artisan command

php artisan make:model Users
php artisan make:model Organizations
php artisan make:model Groups

It should be noted here that I used the build in Laravel users model that comes with the authentication mechanisms. I did not actually run the make:model command for that. You will not need to if you use Laravel’s users either.

Step Two: Related Groups to the Organizations model

This was the most annoying part to figure out, and the least well documented…..

When you load an organization you will be able to access all the groups via a class property. For example:

$org = Organization::find( $id );

$groups = $org->groups;

Laravel is doing some magic behind the scenes here- first, “groups” is not a property. When requested, Laravel checks to see if a corresponding method exists. In this case it looks for “public function groups()”. The method must return a relationship, such as “belongsToMany”.

By default, Laravel will use the “groups_organizations” table, but by messing with parameters I determined how to properly switch the table. Laravel does a lot of magic with parameters- depending on how many you use the meaning of the parameter changes. In our case it looks like

$this->belongsToMany( CLASS, TABLE, KEY-RELATING-THIS-MODEL, KEY-FOR-OTHER-MODEL )

which comes out to

$this->belongsToMany( Groups::class, ‘organization_groups’, ‘organization_id, ‘group_id’ )

Notice the keys are singular. Laravel is expecting them to be plural (like the table name I think) so have have to be explicitly specified here.

Here is the full code to create the relation. This code belongs in the Organizations model.

public function groups() {
   return $this->belongsToMany( Groups::class, ‘organization_groups’, ‘organization_id, ‘group_id’ );
}

Now we will be able to do things such as:

$org = Organizations::find( 42 );

foreach( $org->groups as $group ) {
    echo $group->name;
}

Step Three: Relate a User to the Group

Here each Group has a single User set in the “created_by_user_id” field.

Laravel’s many-to-one relationship used “hasOne”. In the Groups model class we add:

public function createdBy() {
    return $this->hasOne( User::class, 'id', 'created_by_user_id' );
}

Now we can find which user created a group with

$group->createdBy->name;

In the organizational context, we may have a list of all groups and who created them.

$org = Organizations::find( 42 );
foreach( $org->groups as $group ) {
    echo “Group: “ . $group->name . “ - Created by: “ . $group->createdBy->name ;
}

Hope that helps!

Cookies disappear after adding Set-Cookies in .htaccess? Here is how to get them back

I needed to set a cookie via .htaccess, to ensure it was always in the browser, regardless of what the website was doing. Setting a cookie is rather easy, it will look similar to:

Header set Set-Cookie "cookieName=value; Expires=Wed, 15 May 2222 07:28:00 GMT"

The next morning I attempted to login to the site and could not. It turned out the login cookies were not being set. The issue was insidious. Re-read the line above, at first glance it seems fine when you want to set a cookie, however if there are other cookies that need to run you need to add the cookie.

This three letter change resolved the issue and allows all the other cookies to operate properly:

Header add Set-Cookie "siglock=hello-world; Expires=Wed, 15 May 2222 07:28:00 GMT"

Using wget to crawl your website

If you are looking to crawl your website for something like cache warming you can do so with wget quite easily.

The following wget command will crawl a site and leave nothing behind on the local filesystem afterward.

wget --mirror -q -e robots=off -p -r --delete-after -nd http://www.isleofmtv.com
–mirror crawls the entire site
-q prevents wget from writing output to the buffer
-e robots=off ignores directives in robots.txt
-p get all page assets
-r recursively request pages
–delete-after clean up any local files after running wget
-nd prevents wget from writing a directory structure that gets left behind

Powered by WordPress & Beards