https://blog.keitel.xyz/ Recent content on Tech Manual Blog Hugo -- gohugo.io en-us Fri, 30 Mar 2018 08:47:12 -0500 https://blog.keitel.xyz/projects/packet-guardian/ Fri, 30 Mar 2018 08:47:12 -0500 https://blog.keitel.xyz/projects/packet-guardian/ Packet Guardian Documentation Current Release: v1.3.0 Packet Guardian is a network captive portal used to make users register a device before being granted network access. The application uses Nginx, Bind, DHCP, and a web interface to redirect client devices to a registration page where they can either enter a username and password, phone number for guest access, or simply click through a use policy agreement. Users can manage their registered devices to remove devices no longer in use or manually register devices that don't have web browsers or don't support captive portals. https://blog.keitel.xyz/blog/2018/03/packet-guardian-release-1.3.0/ Fri, 30 Mar 2018 08:47:12 -0500 https://blog.keitel.xyz/blog/2018/03/packet-guardian-release-1.3.0/ GitHub: https://github.com/packet-guardian/packet-guardian Version 1.3.0 is a bug and security fix release. It's highly recommended that all instances of Packet Guardian be updated to 1.3.0. This version contains a database migration to allow user permissions to be manageable from the web interface. This migration will take place automatically when the program starts. As always, make a backup of the database before any upgrade. Changelog Fixes Permissions on blacklisted users 918adf2 Old sessions cleanup task ee1435a Issues with stale database connections ac2f5c9 JSON encoding of Device object dc769fb Permissions on GET device api 525b6fd Error when blacklisting a blacklisted device fc6de6f GET device api consistency cff340e Couple formatting issues on smaller screens b2644d7, 2506717 New Status api /api/status c09027b Manage user permissions through web interface bee5d98 GET user api /api/user/{username} 1426f6b https://blog.keitel.xyz/blog/2017/10/javascript30-lesson-11/ Mon, 23 Oct 2017 19:09:04 -0500 https://blog.keitel.xyz/blog/2017/10/javascript30-lesson-11/ Lesson 11 has been the most fun so far. This lesson looked at creating custom HTML5 video controls. Browsers have builtin controls for video and audio elements but they don't offer all the features one may want. Also, they typically don't fit stylistically with the rest of a site. In this case, custom controls can be created using CSS and JavaScript to add functionality and fit the style and flow of a site. https://blog.keitel.xyz/blog/2017/10/javascript30-lesson-10/ Thu, 19 Oct 2017 20:50:39 -0500 https://blog.keitel.xyz/blog/2017/10/javascript30-lesson-10/ So, I'm not gonna lie. This lesson was difficult. The JavaScript itself wasn't difficult, but the logic in the implementation. Honestly this lesson touched on one of the big issues I feel I have with programming which is thinking through a solution in a concise and logical way. I feel like many implementations and solutions I write simply aren't correct. They may work, but I know it's not the right way to do it. https://blog.keitel.xyz/blog/2017/10/javascript30-lesson-8/ Tue, 17 Oct 2017 19:40:14 -0500 https://blog.keitel.xyz/blog/2017/10/javascript30-lesson-8/ Lesson 8 so far has been the most fun. It focused around HTML canvases with the goal being to make a simple painting application. I have some experience with canvases before this lesson. A couple years ago I made an implementation of Conway's Game of Life using the canvas element. I have it setup at the bottom of this post if you want to play it. Source code it here. https://blog.keitel.xyz/blog/2017/10/javascript30-lesson-6-7/ Sun, 15 Oct 2017 21:30:30 -0500 https://blog.keitel.xyz/blog/2017/10/javascript30-lesson-6-7/ For this post I decided to lump together lessons 6 and 7 because 7 was another one that dealt with array functions. It went over four functions .some(), .every(), .find(), and .findIndex(). All of them are simple to understand. The some() function returns if any item in an Array satisfies the function you give to some. This could be used to determine if an Array of people has at least one adult (age >= 18). https://blog.keitel.xyz/blog/2017/10/javascript30-lesson-5/ Sun, 15 Oct 2017 15:29:42 -0500 https://blog.keitel.xyz/blog/2017/10/javascript30-lesson-5/ After the last lesson which was only JavaScript, this lesson dealt mainly with CSS in particular flex box. The JavaScript that was used had already been covered in previous lessons such as .querySelectorAll(), .forEach(), and classList. In this lesson, you make a photo gallery page where each image is shown and clicking on an image will expand it to take up more space to get a better look. With the expanding image, some text also animates in from the top and bottom giving a nice, smooth feel to the whole thing. https://blog.keitel.xyz/blog/2017/10/javascript30-lesson-4/ Sat, 14 Oct 2017 13:30:00 -0500 https://blog.keitel.xyz/blog/2017/10/javascript30-lesson-4/ This lesson dealt with JavaScript array fundamentals rather than making a functional application. Not as fun, but still very important. What I Learned I've used array functions like map, filter, and reduce in other languages but not JavaScript. The implementations are simple to understand and doesn't take long to learn. My solutions to the sort problems are a bit simpler then what Wes used in the video: // Problem 3 // Original Answer const ordered = inventors. https://blog.keitel.xyz/blog/2017/10/javascript30-lesson-3/ Sat, 14 Oct 2017 12:30:00 -0500 https://blog.keitel.xyz/blog/2017/10/javascript30-lesson-3/ Lesson 3 dealt more with CSS than JavaScript. This lesson demonstrated the use of variables in standard CSS. Although CSS preprocessors have had variables for quite some time, the values of them can't be changed at runtime. Meaning, there's no way to change a single value and have all other dependent properties update with the new value. In contrast, when a variable in CSS is altered, every property that uses it will also be updated and repainted. https://blog.keitel.xyz/blog/2017/10/javascript30-lesson-2/ Sat, 14 Oct 2017 09:30:00 -0500 https://blog.keitel.xyz/blog/2017/10/javascript30-lesson-2/ Lesson 2 of JavaScript30 was to make a realtime clock with second, minute, and hour hands. This lesson focused on both CSS and JavaScript. With CSS, styles were applied to adjust the start position of the hands, make them look like a real clock where they overshoot slightly before bouncing back into place, and ensuring a smooth transition between positions. JavaScript was used to adjust the rotation of the hands in accordance with the current time. https://blog.keitel.xyz/blog/2017/10/javascript30-lesson-1/ Fri, 13 Oct 2017 18:35:09 -0500 https://blog.keitel.xyz/blog/2017/10/javascript30-lesson-1/ The first lesson of JavaScript30 is to make a page where pressing a key on the homerow of a qwerty keyboard caused the browser to play a sound such as a bass drum, cymbal, or snare drum. This lesson focused on event handlers and manipulating the HTML audio element. What I Learned I was already familiar with event handlers and query selectors. I've never used an audio element before so that was new. https://blog.keitel.xyz/blog/2017/10/javascript30-my-journey/ Fri, 13 Oct 2017 18:35:09 -0500 https://blog.keitel.xyz/blog/2017/10/javascript30-my-journey/ Although I've been doing basic web development for a few years, I've done a poor job of keeping up-to-date with modern JavaScript technologies and modern APIs. I've focused more on server-side development and neglected the frontend both JavaScript and CSS. Over the next few weeks I'll be working through a JavaScript course called JavaScript30 while documenting my progress along the way. What Is JavaScript30 JavaScript30 is a free JavaScript course created by Wes Bos. https://blog.keitel.xyz/projects/dandelion/ Wed, 11 Oct 2017 20:50:00 -0500 https://blog.keitel.xyz/projects/dandelion/ Dandelion Dandelion is a PHP application that does one thing, well two but mainly one. Keep track of when something happens. Dandelion is a simple web log platform that allows teams, or individuals, keep a running history of what they did in their environment or infrastructure. This is meant for physical changes such as a new server, swapping a switch, changing UPS batteries, etc. Dandelion can group a log entry into hierarchical categories to easiy search and find logs about a particular system or area. https://blog.keitel.xyz/blog/2017/10/start-of-blog/ Wed, 11 Oct 2017 20:50:00 -0500 https://blog.keitel.xyz/blog/2017/10/start-of-blog/ Thanks for reading the first post on my new blog! I'm starting this blog as an avenue to document, discuss, and showcase the ongoing process of my learning programming, technology, and other things. This blog won't focus on any specific technology, language, or product family. Instead I intend to discuss anything and everything tech related. Equally to the best of my ability. Let's see how this goes.