How to keep using port 10080 after many browsers block it as an unsafe port

If you have been doing web development using port 10080 you might have run into some issues recently since many browsers including Chrome and Firefox have decided to add that port to their blocked ports list.

I use a tool called InstantWP for WordPress development and it’s using port 10080 for http by default.

I first researched the option to change the ports IWP is using. It seems like it could be done from the config file which you can open from the “Advanced” tab by clicking “Edit Config File”. In the file that opens you should see a setting called PortOffset. I tried to change that but couldn’t get it to work even after trying many different numbers for the port offset.

I also tried to add a flag into Chrome’s startup parameters by right-clicking the Chrome icon and choosing properties. Then I replaced the value under “target” with the following string:

“C:\Program Files (x86)\Google\Chrome\Application\chrome.exe” –explicitly-allowed-ports=10080

However that didn’t seem to fix the situation in my case. I still got the same “unsafe port” error from Chrome.

What finally helped was switching to Firefox and performing these steps:

  1. Type about:config to the address bar and click on the “accept the risk and continue” button.

Then paste in this string to the search bar:

network.security.ports.banned.override

Choose “string” as the type (I know, number would seem more logical), click on the + button and enter the port number you want to allow (in my case 10080).

Now you should be able to access applications via that port!

Full screen preview for second monitor in DaVinci Resolve

Most video editors have at least two monitors these days. If you want to see the footage your editing fullscreen on your second monitor while having the timeline and the rest of the panels on the other monitor, here are the steps for doing that:

  1. Make sure Workspace->dual screen is set to “off” (I know, sounds a bit counter-intuitive)
  2. Go to Workspace->video clean feed and select your monitor from there.

Increment integer value in a database field using WPDB

Sometimes you need to update values incrementally in your WordPress database. You might for example have an upvote feature to which you automatically add points in an incremental fashion.

It was surprisingly hard to find examples of how to do this using Wpdb. But here’s an example of doing just that:

/* Have to use wpdb->query instead of wpdb->update because the latter assumes strings  */
  $results = $wpdb->query($wpdb->prepare("UPDATE foodsenglish SET popularity = popularity + 1 WHERE dbID = %d", $foodIdToSendThePointFor), ARRAY_A);

Zoom: Don’t show camera while screen sharing

If you are doing a lot of screencasts with Zoom in which you share your screen, you might be wondering how you can stop the little video frame from the webcam being included in the recording. Luckily there is an option in the zoom settings to do just that.

Start by clicking on the little cogwheel symbol in order to open the Zoom settings:

Next go to the “Recording” tab and there you can find the “Record video during screen sharing” setting:

Construct 3 Spritefonts with Photoshop

Creating your own Spritefonts (sometimes also called bitmap fonts) for Scirra’s Construct 3 game engine using Photoshop can be surprisingly tricky. The main difficulty seems to be in creating a grid of evenly spaced characters so that the automatic Sprite font slicing mechanism in Construct can slice them up properly. A monospace font makes this much more simple since all the characters will take up the same space by default, but monospace fonts are quite limiting stylistically. What if you want to have non-monospaced fonts neatly organized in a grid for Construct?

There are helpful tools like “Give Your Fonts Mono” which can convert a regular font into a sprite font and it even generates the spacing data for Construct 3 which you paste into the Spritefont plugin settings. The spacing data looks typically something like this;

[[20,” “],[9,”l|”],[10,”Ii.,;:!'”],[16,”`”],[17,”[]”],[18,”j”],[20,”()”],[21,”t”],[22,”1-\”\/°”],[23,”r”],[25,”f”],[26,”*”],[31,”J”],[33,”u”],[34,”hkns”],[35,”Ldq”],[36,”bcgpz03789?”],[37,”Favy256+=$<>”],[38,”eox4~”],[40,”£”],[42,”BEP#€”],[44,”HNSTUZ_”],[45,”K”],[46,”D&”],[48,”R”],[49,”C”],[50,”VXY”],[51,”AG”],[52,”MO”],[53,”Q”],[54,”mw”],[58,”%”],[69,”W”],[70,”@”]]

You can’t however do any fancy stuff like giving your characters drop shadows, strokes or gradient fills etc. But there is a work around! Just save your tranparent png image from GYFM and open that in Photoshop. Then you can play with layer styles etc as long as you don’t cross the bounding box given for each character. You can increase the bounding box size in Give your fonts mono to give yourself more room. In Photoshop you might need to cut some of the rows into their separate layers for consistent gradients, but other than that this workflow should be pretty straightforward. When done in PS, simply re-save as PNG and import to Construct 3.

Unfortunately Construct doesn’t seem to support kerning at the moment so that would have to be handled with events. It’s not the easiest of programming challenges though.

Another possibility (besides custom events) might be to make a copy of the most difficult characters in the Spritefont sheet and give them special spacing rules. Then you would need to pick that special character in the situations in which your kerning looks bad. That’s also a bit hacky and tedious. So before Construct gets proper kerning support for Spritefonts, it might be best to stick to monospace Spritefonts.

Installing Duplicator packages in Instant WordPress

TIP: If you forgot to include the installer.php file, you can unzip the zipped archive and copy the “installer-backup.php” file from there and just rename it “installer.php”.

In the Duplicator FAQ they recommend uploading the packages through the “theme folder” button in IWP. That didn’t really make a difference in my tests though (I just uploaded the files by copy-pasting with SFTP Net Drive). Note that the installer will throw an error if there are other files present in the installation folder so make sure you delete the old WordPress files. Unfortunately even with these steps we seem to get stuck on Step 3. I recommend checking the error log if this happens. You might need to install php-xml with sudo apk add php-xml. Or you might have to update your PHP version if you are getting errors like this;

INSTALLER ERROR: [PHP ERR][FATAL] MSG:Uncaught Error: Call to undefined function token_get_all() in /var/www/localhost/htdocs/wordpress/duplicator/dup-installer/lib/config/class.wp.config.tranformer.php:387

That wasn’t the main problem in my case though (it seems like a function should be enabled “By web host”).

If you get an error when trying to install that the folder doesn’t have write permissions, do the following: Check the working directory you are in with “pwd” and the contents of the folder you are currently in with “ls”. You might have to elevate yourself to root user with sudo -s and the type in cd /var/. If you can see “var” in the list, then cd into it with cd var. You can cd into localhost even if it’s not listed with cd localhost. You shouldn’t need to change folder permissions here, but if you need to do that in some other situation, you can use chmod like in this example we are giving a folder called wp2 full permissions: chmod 777 wp2.

This is what you should fill in for the configuration:

If nothing else works, just stop the installation process. Things might still work (since it might have succesfully extracted the files and inserted the data into the database). Just delete all the duplicator files from the WordPress root folder. If you get a message saying “Briefly unavailable for scheduled maintenance. Check back in a minute.” you need to also delete the .maintenance file.

DaVinci Resolve is killing Premiere Pro

I usually don’t post opinion pieces about software, but this time I just can’t help myself.

I have been an Adobe Premiere user since 2004. I own CS3 Master Collection, CS4 Creative suite and CS6 Master Collection. I have been using CC at work.

I was not happy when Adobe forced everyone into a subscription model. It was good for new users though as they had a lower bar to entry. But for us long time users it was not a good move. Many of us expressed skepticism if Adobe would still be motivated to innovate new features for programs like Premiere and After Effects now that they would get our paychecks regardless. I think that skepticism has been proven right over the years.

I think we users can sympathize with software development being complex, difficult and time consuming. So we forgive a lot even when we only see cosmetic features after years and years of waiting. But then DaVinci Resolve steps up and shows everyone how rapidly a piece of software can actually be developed.

It was not that long ago that Resolve 16 was released with an amazing list of new features. And many of them big features, like the Cut page, adjustment clips, the neural engine for AI goodness, object removal etc. So I was not expecting to see as big of a release as Resolve 17 so soon. But here it is, filled with even more AI-based tools like the magic mask, massive Fairlight updates like improved architecture, automatic beat and word detection, new proxy workflows and render in place, new in-timeline chroma keyer, scene cut detection and 90+ smaller features.

I’m not sure if I have ever seen so quick software development, maybe excluding Blender. With speed like this one might expect tons of bugs and crashing, but so far Resolve 17 has been rock solid on my computer.

DaVinci Resolve just starts to seem like an absolute no-brainer at this point. It has editing, VFX-compositing (via Fusion), color grading and audio editing (Fairlight) all in one package. And it’s completely free to use for most purposes. But if you want all the goodness that is available including the neural engine, even then the cost of a perpetual license is only around $300. At the moment you can even get the Speed Editor keyboard thrown in the bundle for free. Now get this: not only is the license perpetual (yours forever), but you will even get free upgrades.

Boy is it nice to see competition like this against Adobe CC! I think we will see people jumping the Adobe ship in masses.

Blender Video Editor Tips

Blender, being the Swiss-army-knife -tool that it is, can also do video editing. Setting up a video editing layout is easier than ever with the new “Workspace” -system of Blender. Simply click on the + button at the end of the workspace tabs and choose Video Editing –> Video Editing. Here’s a picture:

When using Blender as a video editor, a couple of questions immediately come to mind:

  1. How do I perform a cut? Answer: Simply press K.
  2. How do I perform a ripple delete (an edit in which the gap of the deleted content is automatically closed)? Answer: There is no ripple edit feature at the moment, but it can still be done very quickly by hitting “Del” to delete, then “Page up” to jump the playhead to the previous cut and finally “Backspace” to “Close gap”.
  3. How can I “render the timeline” for better playback performance? Answer: The best way might be to create Proxies. In the Proxy workflow, Blender will create new, better performing versions of your video files and use them for better work speed. These are the steps you need to take to enable Proxies in Blender Video Editor:

First find the Proxy Panel. It lives usually on the right side of the Sequencer (timeline looking panel). Select the clips you want to create a proxy for in the sequence. Click on “Set selected strip proxies” to set these clips up for proxy creation. It will ask for a desired proxy resolution. Then click “Rebuild Proxy and Timecode Indices”. Blender should now start creating the proxy files, next to your original files (although this location can be changed in the settings). It might take a while, but after it’s done, your playback should be much better.

Deleting colors from a forced color palette in Photoshop

This is a very specific topic, but it was hard to find information about it online, so I’ll post my findings here.

If you want to force a certain color palette on your image in Photoshop you can choose

Image –> Mode –> Indexed Color.

A window will pop up where you can choose a palette. If you want to create your own palette in which you select all the colors, you can do this:

Set the palette to “custom”. A color table window will open. You can delete existing colors by ctrl-clicking on them. You can add more colors by clicking an empty color slot and picking a color for it.

Here’s a quick gif-like video of creating custom color tables (ACT-files) in Photoshop and saving them for later use: