Hello after a long period of silence.

I've been entertaining the idea of creating a new personal website for a technical blog. This was sparked by applying for new jobs recently, and needing to update my resume and git repositories. I found I didn't really have much to show in the public space aside from the web control script, which hasn't been working on in a while. Zackman and I have agree'd we could rewrite the whole program in a much better way if we were to do it again. Whether that will happen or not is still an ongoing discussion, and a matter of time :) But since I was only thinking about a new blog, I haven't yet created one. For now, this is not a bad place to keep some fun tech stuff going!

I have only recently discovered Apple Scripts as a method of automating tasks on a Mac. I don't yet know the scope of what it allows, but it does seem more things can be customized than I originally thought. 

In this random new post out of nowhere, I'm basically copying what's been shown in howchoo's blog post for creating a keyboard shortcut to connect to airpods. At my new job (my resume updated paid off) I've been utilizing my Airpod's a lot more. It's been a minor annoyance that sometimes they don't always auto-connect to my Macbook. They seem to struggle to recognize when they should be connected to my phone, ipad, or my laptop. Having a keyboard shortcut to force a connection would save a lot of time, and more importantly, keep me from diverting my focus. Between howchoo's post, a reddit post, and apple's documentation, I've found a solution customized to me that I like. For prosperity and the chance I'll have to go through all of this again, here's a record of my own spin on things.

use framework "IOBluetooth"
use scripting additions

set AirPodsName to "Stud’s AirPods Pro"

on getFirstMatchingDevice(deviceName)
	repeat with device in (current application's IOBluetoothDevice's pairedDevices() as list)
		if (device's nameOrAddress as string) contains deviceName then return device
	end repeat
end getFirstMatchingDevice

on toggleDevice(device)
	if not (device's isConnected as boolean) then
		device's openConnection()
		display notification "" with title "AirPods connecting..." sound name "Frog"
		return "Connecting " & (device's nameOrAddress as string)
	else
		-- device's closeConnection()
		-- return "Disconnecting " & (device's nameOrAddress as string)
		display notification "" with title "AirPods already connected" sound name "Frog"
		return (device's nameOrAddress as string) & " Already connected"
	end if
end toggleDevice

return toggleDevice(getFirstMatchingDevice(AirPodsName))

This is an improvement on howchoo's code, and with the supposed addition of display notifications. I say supposed, because when this should give me a simple pop-up, but when I run it from my keyboard shortcut, this doesn't happen. It works from the Script Editor though. So it's close.

If I figure out this piece to complete this, I'll update this blog. If you have any idea's check out my gitlab snippet to comment.

On a random finishing note, I see that the blog formatting is cutting off some text.
I'll have to look into this as well. I apologize for the malformation...

I am proud to introduce the newest 3Ra Factorio Scenario: The Labyrinth!

The Labyrinth is a PvP scenario with two teams: Blue and Green. It takes place on a height-limited ribbon world. Green spawns on the left while Blue spawns on the right. The two teams are separated by the Labyrinth, a maze that constantly changes. The Labyrinth is made up of many cells. These cells contain bonuses. A team can gain the use of a bonus by capturing a cell.

Capturing a cell is done by standing in it for a certain amount of time. A countdown will appear in the center of a cell when a player is standing in it. The countdown will freeze if an enemy unit enters the cell. Cells can only be captured if there are no opposing players or turrets present in the cell.

There are currently two win conditions: Domination and Elimination. Domination is won by controlling a certain percentage of the cells. Elimination is won by gaining a certain amount of points. Points are earned by killing enemies and launching rockets. The scenario features auto-restart capabilities, so the game will automatically restart itself without having to make a new save file.

Bonuses that can be found in the Labyrinth include:

• Roboports
• Radars
• Mines producing various ores
• Assembly Machines producing various items
• Turrets that increase your own turret damage
• Markets featuring various bonuses to your team (Currently broken due to Factorio bug, will be fixed in 0.16)
• An electric-energy-interface set to produce 36 MW of power for free

All bonuses provide their own power, so they do not need to be powered themselves.

Screenshots:
Map of Controlled Cells:

Map of Bonuses:

Detailed Map Tooltips:

High Customizability:

Mazes:

Optional Biter Force:

Certainly, I am not a world master at all things computers. But I sure do seem to have a broad knowledge in many things. Today's example is using Apache2 as a webproxy, specifically for redirecting traffic intended for another server.

The best example I have for this is the LDSGamers Minecraft server we are currently hosting. I'm a part of their gaming community as well, and when their Minecraft host took a years payment (facts may be exaggerated) then closed up shop, they were hosed on where to put their server for a while. Luckily, I had a little machine available that would be perfect for such a thing. The only problem being, I only have one IP address, and I am already hosting a Factorio Server on a different machine. The game server itself isn't a problem, since it should run on a different port from factorio. But to easily manage the server via web gui? It's much easier to not need worry about using different ports in URL's just to manage something. My work place also blocks all ports but basic web traffic, so if I need to administer the server, using a different port isn't an option for me.

Que in, ProxyPass: A feature optional in Apache that allows the server to channel traffic destined for one place to traverse (unknowingly to the client) to another. In my fun case, we're also using multiple domain names directed at my IP, and my server is effectively routing the traffic to the proper servers management gui's.

Have a code example:

<IfModule mod_ssl.c>
        <VirtualHost *:443>
                ServerName fac-admin.3ragaming.com

                DocumentRoot /var/www/html

                SSLEngine on
                SSLCertificateFile    /etc/ssl/factorio/certificate.crt
                SSLCertificateKeyFile /etc/ssl/factorio/private.key
        </VirtualHost>
        <VirtualHost *:443>
                ServerName mine.ldsgamers.com

                SSLEngine On
                SSLCertificateFile /etc/ssl/mine.ldsgamers.org/certificate.crt
                SSLCertificateKeyFile /etc/ssl/mine.ldsgamers.org/private.key

                ProxyPass / http://192.168.1.117:8080/
                ProxyPassReverse / http://192.168.1.117:8080/
        </VirtualHost>
</IfModule>

I should add a disclaimer: I would not be surprised if a couple things in this code could be done better. But what I have works none the less. Also, the actual domain name paths have been changed for the sake of this example.

Now that that's out of the way. As we see in the code, this is specifically to use SSL (that fancy "secure" https) for these web servers. We have the 3Ra factorio management (mgmt), "fac-admin.3ragaming.com", and the LDSGamers Minecraft mgmt, "mine.ldsgamers.com". Factorio mgmt is local to the same server, while the Minecraft mgmt is hosted on another machine in the local network. The Minecraft mgmt is also not secure by default (although the program we use (McMyAdmin) does support it natively. I'll get to this later), so this proxy is also applying some secure SSL to the connection.

Should be simple enough to read. We have ServerName, for the dns addresses. We have the filepath to each SSL file needed for each server. Factorio has it's web directory set. And Minecraft has the IP and port number to both redirect the traffic to, and expect return traffic from.

Easy peasy, we are sharing one public IP address with two different web servers on the same network. We take this one step further with our Minecraft DynMap. The map plugin, by default, uses port 8123. Although I have this port forwarded through the router, we're back to the scenario of "using ports on URL's is annoying." So we add a proxy pass rule for that! 

ProxyPassMatch ^/map$ !
RedirectMatch ^/map$ /map/
ProxyPass /map/ http://192.168.1.117:8123/
ProxyPassReverse /map/ http://192.168.1.117:8123/
ProxyPass / http://192.168.1.117:8080/
ProxyPassReverse / http://192.168.1.117:8080/

Now we can use the same URL (mine.ldsgamers.com) only need to add /map to it, and we can view the map, proxy tunneled to the server, but on a different port from the regular web traffic. I found that this only worked if the full URL included a trailing / on the address (mine.ldsgamers.com/map/ intead of just /map), but that was easy enough to protect against using a smart redirect rule to force the trailing / to be added. I'm glad to be recording all of this as well, since I found no examples including this being a requirement. I believe this to be due to some sort of coding flaw in the javascript. Perhaps an example will do

<script type="text/javascript" src="version.js"></script>

Given the URL, https://mine.ldsgamers.com/, this will attempt to pull the "version.js" file from mine.ldsgamers.com/version.js. Normal, and expected. If the javascript attempts to pull from another other source, they will likely also be pulled from / or the root address.
Given the URL, https://mine.ldsgamers.com/map, however, it appears that version.js loaded properly from /map/, but it's sources are still attempting to pull from mine.ldsgamers.com/ or the root address. When a trailing / is added to the URL, they then seem to source from the correct /map/ directory. Odd behavior, but this was corrected both by using /map/ as the proxy pass path, and using a redirect filer to ensure /map is changed to /map/. Otherwise /map is send to the mgmt gui, which reports a 404 error.

Tricky, yet effective.

Lastly, regarding SSL forwarding. I mentioned that the Minecraft mgmt software allows SSL natively. However, if the target server is using SSL, then the proxy server must know how to negotiate that SSL also. I had to discover how to make this work with an OpenVPN Access Server I am running for a business. OpenVPN supports SSL, and I had the certificate installed. But in development, they were wanting to use the same server for Apache web traffic if possible. The only way to make OpenVPN allow this was to change it's management port away from 443, and proxy tunnel the vpn domain to the new port. OpenVPN-AS will only do SSL though. So a way to proxy the SSL traffic had to be found. For sake of regularity, I'm going to use the minecraft server as the example still, and pretend that the McMyAdmin software is configured for SSL also. The steps really aren't that much more difficult. As long as both servers have he proper certificate and key files, and the Apache service is configured for it, A simple SSLProxyEngine On is used below SSLEngine On, and the service will now to Proxy the traffic securely. This method would be recommended more specifically for proxying traffic that is external to the proxy server.

I hope this helps someone searching for guidance on some proxypass rules. I use Proxy pass a lot now. One thing I would like to figure out would be a way to send the client IP along with the proxy pass, so the target server knows who's sending the request. Right now it only knows of the proxy server. Supposedly, there is a way to do this. I just have not attempted it yet.

EDIT: Got it work, and was much easier than expected once I found the right informaion. Apache2 comes with the mod "remoteip", it just needs to be enabled on the target server (not the proxy) with: "a2enmod remoteip". Then you add "RemoteIPHeader X-Forwarded-For". Now the target server can report the client. Useful for php and tracking IPs.

To future expeditions!

I don't really plan on copying the Factorio Dev's by producing a blog post every Friday. But who knows what could happen if we stay busy enough. Carrying on...

So the fun nature of dumping someone else's code into your system is bound to often be imperfect. NibbleBlog has it's own quirks.,And even with the many improvements I found someone had made to the original authors model, I have found several things I will eventually be improving. A web page template is typically sensitive to change. When you preview a design on the creators page, the demo has been made and guaranteed to work perfectly (well... usually). Problems often arise when you change any of the content to your own. Sometimes your sentences don't line up perfectly. Perhaps the paragraph has a finite amount of characters it can hold before the text will run out of it's visually pleasing box. In our case, the width of this template is fixed to 1200 pixels. Not unexpected. This is still common with web pages to have static size limitations, and I was expecting this design would be no different. The behavior of this particular template is, however, the frustrating part.

Example A - The Hideous Bar:

This only appeared on mobile versions of the site. Although I mentioned in the previous article that a mobile adaptation was needed, I hadn't quite expected this kind of a render on my cell phone. When I first released this template to our website, community members reported that it didn't look right on mobile phones. I ignorantly assumed they just meant the text was too small, like they were viewing a desktop version of the site. When I released the blog, the community had reported that the blog looked great on phones! I think it was more a first glance at the formatting though. The blog has started with a side bar on the right page for a little navigation. So the blog article itself was perfectly visible, but the sidebar was cut off or hidden entirely. So naturally, it seemed all-right if you weren't expecting a sidebar. Then I tried mobile for myself.

Since the bar cover was not noticed by others at first, I believed my iPhone to be inferior. It was strange though, that the mysterious bar appeared on the Chrome app, and in Safari. It was then I tested Chrome on my laptop, and used the developer tools to simulate a mobile device. And then I saw it. The hideous dark banner had manifested itself!

Figuring out the problem took longer than it probably should have. Some inquiries to the community were mostly fruitless. I knew it had to be something with the CSS style. Upon extracting a fresh copy of the template, the behavior was the same. So at the least, the problem was with the original developer and not some foolish mistake I had made myself. I tried removing HTML objects piece by piece, I resized them, and I used the aforementioned developer tools to change the css "live" to just plain hide them. The very last thing I noticed, was the footer appears unscathed from this issue. Then, I found it

.container
{
    margin: 0px auto;
    width: 1200px;
}

This width value is the problem for mobile devices. Some of the content is wrapped in this class. The html body is not, allowing parts to expand centered past this value on a wide screen desktop. Any window size below this, and the rest of the objects keep their place, forcing you to scroll horizontally to view the whole page. Yet for whatever reason, this little value is not handled well on a mobile device when the screen width is below this value. If I remove it this CSS line, the site is no longer formatted nicely. If I give the body the same attribute, it's no longer centered. CSS sure can be a pain to work with. I enjoy this look on the site, but surly I'll have to re-write some of it from the ground up to achieve the same look with different methods, that hopefully wont clash in this interesting way.

The solution after, some playing around, has been to discover how the "container" and how the "wrapper" are designed on this layout (developers names for them inside the code). A wrapper is the object which is viewed after the page extends past 1200px, to give a seamless stretch to the sides of content. The container holds the content that should stay centered in that 1200px window. Best I can describe the problem: the template was scripted with some classes in the incorrect locations. There was also a class "div banner-wrapper" (which needs a new name, since it already has a wrapper, and this is technically a container) which had an "overflow: hidden" style line applied, effectively hiding the content when the window width dropped below 1200px , instead of the container object. So put the .container classes in the correct places, and give the "min-width" value to others (like the homepage banner image), and we're in business! 

The template is now sufficiently mobile view-able, even if not in a true mobile friendly way. Now I can move on with my life to greater things! Like an actual mobile compatible make of this web style, or meta data so the blog title and images link correctly in Facebook and discord.

Although the comment system we want is not yet implemented, I am enabling comments for this post in the case you wish to leave some helpful tips for me. Also... I know I need to get the comment CSS formatting corrected, so this is my chance to play with it. Use this privilege nicely! : ) 

-StudMuffin

Here we have our first blog post. There shall surely be more to come. But for now, this is an example post while we get our layout configured to work with the blog software.

We hope to use this blog mostly to log our development work and activities. We do a fair bit of coding in this community, and are hoping to delve a little into game development as well. It's not entirely improbable that we will occasionally post a video or community event announcement here. We'll try to use our categories and tags intelligently so stuff is easy to find. I (studmuffin) have some business pursuits I'm indulging in as well. Much of this involves server hardware and custom coding programs to do my bidding. Many of the things I do are custom created from the ground up, with a little help from code bits around the distant corners of the internet. So it's my hope to record some of my work in the case it proves useful for others like me down the line.

One thing we'll have to program is comments. This blog software has a comment system, but I'd rather use a little discord authentication to verify users. If that will work on this simple godaddy webhost, then we could use it for blog content creator login's as well. Then allowing new blog posters would be as simple as a discord blog role! Man, do I love integration :)

The css style of this blog is likely to change as we discover how it's best viewed. One thing we definitely need is mobile compatibility. The main template for the website was mutated from the folks over at templated.co. Props to them for having a free template I actually found useful. The templates of today are often too bulky for my taste. Even this style has been compacted a little bit. As a result of using a template, there is a lot of bloated and unneeded css. Couple that with the blog themes which came with this blog software (blog is an adaptation of NibbleBlog php. I've got a forked gitlab here), and we've got a mess on our hands. 

Goal 1) Get site formatted for desktop however is necessary
Goal 2) Clean up CSS and store all relevant style code in .css files
Goal 3) Work on mobile adaptation
Step 4) ???
Step 5) Profit.

No code examples today. So here is a duck instead!

-StudMuffin