Tag: development

Capturing Animated GIFS on Linux with Spectacle

OK. Honestly, I’m just dropping a quick one in here because it’s necessary. You can easily capture Animated GIFS, Screen Recordings, Animated PNGS on Linux with KDE Spectacle.

Background

Here’s the deal. Windows 10 be complaining that it’s End-of-Life and it won’t run on my laptop anymore and they need me to update my hardware. You know what OS doesn’t need me to update my hardware? That’s right, it’s Linux. So I went ahead and dropped Fedora KDE Plasma Desktop on my laptop and it’s working great. I used Kubuntu years ago and I’m super impressed at how far Linux has come along. There’s pretty much a Linux alternative to all the tools I use, not to mention that a lot of the tools I use are Linux native anyways.

The one thing that I couldn’t quite replicate is ShareX on Linux. I used ShareX on Windows to do the following things:

  1. Capture screenshots
  2. Capture screen recordings

And that’s it. I don’t use any sharing features. Try as I may, I couldn’t find something that would allow me to do that easily in KDE. I tried Flameshot, and it’s pretty cool, but I found it’s not quite as good as what I’m used to with ShareX. My experience is that opening flameshot basically took a screenshot of what’s on my screen and then tried to give me a selection tool. But the way it worked was it offset all my screens so just opening Flameshot made everything on my screen look different.

There’s also a very promising ShareX fork called SnapX. It looks pretty cool, basically like ShareX but for everywhere! However, it’s still very much in active development and I didn’t feel like trying to beta test the tool.

Solution

Enter Spectacle. Yeah, I know what you’re thinking. That’s just a simple screenshot tool, it’s not going to check off both your boxes. But, here’s the thing. It does check off both boxes. The docs don’t tell you about it, nothing published seems to say anything about it, but the ability to capture both a screenshot and a screen recording is legit right there in the interface for Spectacle. (I’ll go ahead and drop in a super grainy picture of my monitor to illustrate).

See – it’s right there. Spectacle gives you the opportunity to take a screenshot or a screen recording, right there with sweet rectangular selection, window, or fullscreen options.

How can you save animated gifs or png’s though? You just need to set that as the output format in Spectacle’s settings. The way I accessed that is by clicking the Options button just to the right of “New Recording” (see above uber grainy screenshot of monitor). From there you can navigate to Video Saving. Right next to the Filename text field there is a file type dropdown. Your options are WebM/VP9, MP4/H.264, Animated WebP (better than GIF), and GIF (compatible, but inefficient). Sweet right?

Important Note: Screenshots are stored in your Pictures/Screenshots folder and screen recordings are stored in your Videos/Screencasts folder.

Here’s a list of the keyboard shortcuts available to use.

KDE Spectacle – Screenshot & Recording Keyboard Shortcuts

Global keyboard shortcuts available in KDE Spectacle for screenshots and screen recording.
Action Global Shortcut Global Alternate
Capture Active Window Meta+Print
Capture Current Monitor Shift+Print
Capture Entire Desktop Meta+Shift+Print
Capture Rectangular Region Meta+Shift+Print
Capture Selected Window Meta+Ctrl+Print
Launch Spectacle Print Meta+Shift+S
Launch Spectacle without capturing
Start/Stop Region Recording Meta+Shift+R Meta+R
Start/Stop Screen Recording Meta+Alt+R
Start/Stop Window Recording Meta+Ctrl+R

Proof

A Screenshot taken with Spectacle
A Screen recording taken with Spectacle
An Animated GIF taken with Spectacle

Final Thoughts

While it was frustrating to find this tool, and that it doesn’t seem to be documented main stream – it’s awesome that it exists and it’s built in to KDE! Props to the Spectacle team.

Get the word out, you can screen capture and screen record right from Spectacle. The tool is awesome 💥

Clerk Auth Redirect/Reload Loop

I am currently looking into alternative forms of user authorization and authentication. Among the solutions I am looking into is Clerk. It’s pretty sweet and has a lot of cool features baked in. (Although the MFA support is a premium add-on and they aren’t super upfront about that).

One of the issues I ran into while implementing Clerk was a redirect loop. I set my home page within the Clerk Dashboard and when I reloaded my app, boom REDIRECTION FOR DAYS. Clerk was continuing to reload the home page for all eternity.

So, I added an onbeforeunload event into the page with a debugger call inside of it. This paused the page in the inspector before it reloaded and allowed me to actually see what was going on.

It turns out that Clerk was outputting an error message into the console. This error message is pictured below:

Clerk Error Message in JS Console

The <SignUp/> and <SignIn/> components cannot render when a user is already signed in, unless the application allows multiple sessions. Since a user is signed in and this application only allows a single session, Clerk is redirecting to the Home URL instead. (This notice only appears in development)

? Clerk

Well – ok then. Clerk is redirecting to the Home URL (which is the one it’s already on) and causing a permanent redirect loop. It seems like this would be handled better by simply _not_ loading the SignIn or SignUp components should the conditions for their existence fail.

Hopefully this helps you out! You might consider making your home page and your sign in pages different pages, or conditionally load those components, so that Clerk can be happy and not mess things up.

PHP: What is the difference between .env files and .ini files?

That’s a good question. You might ask this when you are implementing a new project and trying to figure out where to store your secret configuration values.

Before getting into the difference, let’s state the similarities:

  1. Both allow storage of environment specific configuration values and secrets from outside of your codebase.
  2. Both allow retrieval of environment specific configuration values and secrets from outside your codebase.
  3. Both files use a key value pair type format.
  4. Both allow comments within the files.

So what about the differences?

  1. The names are different .ini vs .env
  2. The method of storing the data is different.
  3. The method of retrieving the data is different.
  4. The syntax is different.

That probably doesn’t answer your question though. You likely aren’t interested as much in what the differences are as you are in why you would use one over the other.

Why use .env instead of .ini or .ini instead of .env?

This is likely what you are wanting to know, why would you use one over the other. So let’s list some pro’s and cons of each format to help make the decision.

.env Pros

  • language-agnostic
  • allows referencing other .env values as variables
  • libraries like phpdotenv provide robust functionality

Let’s expand a little on the language-agnostic pro above.

First Scenario. You are coming to PHP from another environment, like Ruby, you are probably wondering where to put your secrets and configuration values for your code. A .env file just makes sense, these are supported in Ruby so there must be a way to add them in PHP. Voila! There is a package that supports .env files that you can easily include in your PHP code and you don’t have to think anymore about it. It probably doesn’t even occur to you to use the build in .ini support.

Second Scenario. You are using both server side JS, like Node, and PHP. You want to share configuration values between the two systems. Both support .env files allowing you to easily share your secrets between both languages.

.ini Pros

  • built-in PHP Support
  • allows grouping of values via sections
  • supports typed values via INI_SCANNER_TYPED
  • allows interpolating other config values and environment variables

.env Cons

  • requires third party library and composer to work
  • features provided change based on library used for loading
  • *some libraries load configuration secrets into globally accessible variables like $_SERVER or $_ENV which will could expose your secrets to code you don’t intend to

.ini Cons

  • requires familiarity with PHP

Which one should I use?

I’m going to give you the answer you don’t want to hear. That’s up to you. It really depends on the needs of your environment and your program.

As far as my personal preferences go. I don’t like including unnecessary dependencies in my codebase. Therefore, if I’m using PHP to develop my app, and I have no need to share my config secrets with other languages, then I would use an .ini file and the built in support for those that PHP provides.

Converting a JavaScript Map to JSON

Ok, let’s cut to the chase. Everyone knows that converting a JavaScript Map to JSON does not work out of the box. By default, the JSON.stringify method will return a {} when converting a Map. It’s super helpful, because it returns an empty object, which is usually precisely what we don’t want. That’s a wee bit frustrating!

How Not to Serialize a Map to JSON

The internet has provided us with the silver bullet, though, right? Object.entries is great and can do all things, right? WRONG. That is wrong and you are wrong if you think that it’s right. You see what I’m getting at?

The existing advice is to use Object.fromEntries and Object.entries in tandem to make it easy to convert a map to and from JSON. The code below shows you this method in all it’s glory.

// ### inspired code below
const mapToSerialize = new Map([[1, 'first key']])
const serializedMap = JSON.stringify(Object.fromEntries(mapToSerialize ))

// now deserialize
const deserializedMap = new Map(Object.entries(JSON.parse(serializedMap)))

Isn’t the code above beautiful? Doesn’t it just wonderfully handle our serialization in the best of ways? No! It doesn’t. Let’s compare the original map to the deserialized map and see how amazing the code works.

The original map looks like this when logged to the console Map(1) {1 => 'first key'}. The deserialized map looks like this when logged to the console: Map(1) {'1' => 'first key'}. Did you spot the difference?

Just to make things clear, let’s try to delete the keyed value out of our Map.

Hey look, deleting that value totally didn’t work

So really, in the end, our serialization using the currently advised method totally works. We serialize our map, deserialize it, and then can’t use it properly. Just as we expected.

NO. It doesn’t work correctly. The difference is that the original map uses an integer key, and the deserialized map uses a string key. When we attempt to delete the value out of the deserialized map, using the key, it fails because the type doesn’t match.

How to Serialize a Map to JSON

I am proposing a different way to serialize a map to JSON.

  1. Create a new array from the existing map
  2. Serialize the array to JSON
  3. Create a new map from the deserialized JSON

The code I propose looks like this. You might not want to keep the logging at the end in your own implementations.

/// ### ugly code below
const mapToSerialize = new Map([[1, 'first key']])

// convert the map to JSON
const arrayToSerialize = []
mapToSerialize.forEach((value, key) => arrayToSerialize.push([key, value]))
const serializedMap = JSON.stringify(arrayToSerialize)

// convert the JSON back to a map
const deserializedMap = new Map(JSON.parse(serializedMap))

// log to console for inspection
console.log(mapToSerialize)
console.log(deserializedMap)

This code correctly works to serialize and deserialize a map to/from JSON.

Look at that, both maps match

In Conclusion

Serializing a Map to and from JSON isn’t as simple as it looks on the outside. Especially if from the outside it looks like it would be super simple. The Object.entries silver bullet only works for Maps with string keys, and attempting to use it for Maps with integer keys will end up with you hating your life. You probably will start listening to Barry Manilow constantly. You might even start eating Quinoa. I’m sure it happens all of the time due to Map serialization woes.

Anyways, if you prefer to not eat Quinoa, then go ahead and convert your Maps to and from JSON the way I suggested above.

That’s all I have to say about that.

Change the Display of the Tab Character in PHPStorm

Update 2022-02-18

You can now change the display of the Tab Character directly in the PHPStorm advanced settings. (Thanks to a comment by destinydriven!)

The Tab Character Rendering can be changed in Advanced Settings

Original Article

Recently the way the Tab Character is rendered in PHPStorm was changed. The character used to be rendered in a way that allowed you to see the entire tab character. However, after a recent change the tab character now displays as a single >.

The new tab character is likely a welcome change for some. But there are others of us who really appreciated the old rendering. The new rendering does not indicate how much whitespace is taken by the tab character. For this reason I don’t find it helpful and wanted a way to change it back.

Luckily, recently, the JetBrains team threw in a small registry setting to re-enable to old rendering of tab characters. This setting is available in version 2019.3.2. Access this setting by pressing “Shift” + “Shift” while in PHPStorm. Afterwards search for and select the “Registry…” option.

A Comparison of default tab rendering in PHPStorm
A Comparison of styles – it’s nice to have options.

You’ll find the editor.old.tab.painting option about a quarter of the way down the list. Check it to re-enable the old PHPStorm tab rendering. You can breathe freely now.

The location of the editor.old.tab.painting within the registry.
The editor.old.tab.painting option is about a quarter of the way down the list

Chassis.io Timeout Issue

TL:DR -> Try enabling Virtualization in your BIOS.

I’m trying out http://chassis.io as a way to easily setup a WordPress development environment on Windows. It’s actually quite easy and everything works almost exactly like the Chassis Get Started guide describes.

However, I ran into a timeout issue when attempting to boot up the Virtual Machine using vagrant up. On first run the process installed necessary dependencies and wired most things up. However, it hung for a considerable amount of time when booting up the virtual machine. Eventually it told me that it had timed out. It didn’t start the virtual machine.

VT-x/AMD-V hardware acceleration is not available on your system

Hrmm… I wonder why it’s timing out. Chassis.io uses Vagrant and VirtualBox. So I spun up VirtualBox to see if I could manually start the VM myself. As it turns out, I could not. VirtualBox threw up the following error:

VirtualBox - Error
VT-x/AMD-V hardware acceleration is not available on your system. Your 64-bit guest will fail to detect a 64-bit CPU and will not be able to boot.

Well, that’s nice… (Hint: it’s not nice).

First Try: Disabling Hyper-V

I did some searching. I found a number of posts that indicated the solution was to disable Hyper-V. It sounds like this works for a lot of people. Scott Hanselman actually wrote up a post about how to “Switch easily between VirtualBox and Hyper-V with a BCDEdit boot Entry in Windows 8.1“. I tried this approach. It did not work for me (you can remove a bcdEdit entry using bcdedit /delete {ENTRYGUID} btw).

Second Try: Enabling Virtualization via BIOS

During my search I stumbled upon this SuperUser answer. The answer indicated that, depending on your system, Virtualization could be enabled via the BIOS.

In my case, enabling Virtualization via BIOS involved booting to the UEFI Firmware Settings. I’ve outlined the steps below.

  1. Hold down the Shift key while you click Restart. This will cause your computer to bring up a special menu.

    Hold Down Shift and Restart
    Hold down “SHIFT” and click Restart
  2. Next you need to navigate the option screens to find “UEFI Firmware Settings”
    1. Select “Troubleshoot”
    2. Select “Advanced options”
    3. Select “UEFI Firmware Settings”
    4. Restart

    Steps to UEFI Firmware Settings
    Steps to UEFI Firmware Settings
  3. This will reboot you into your PC’s UEFI settings which looks a lot like a typical BIOS menu.
  4. Enable Virtualization
    Your system may be different. My system had a “Virtualization” setting located under the “Security” tab. Once I located the “Virtualization” setting I noticed that “Intel (R) Virtualization Technology” was indeed set to Disabled. I enabled it, saved the setting, and restarted my machine.

    Enable Virtualization via BIOS
    Enable Virtualization via BIOS

After enabling “Virtualization” I tried to start the VirtualBox VM one more time. BOOM. It worked. I ran vagrant up via a ConEmu console and… success.

In Conclusion

Chassis.io is a pretty sweet project. If your system is setup correctly then Chassis.io “just works”. In my case my system needed “Virtualization” enabled via a UEFI Firmware Setting.

Have a stupendous day! 🙂