Posts

Brad Frost created a design system for thinking about developing for the web as a front-end specialist. Atomic Design System is essentially boiled down into 5 separate categories: Atoms (Elements) - These are the smallest functional elements of a page, such as text labels, buttons, inputs or other HTML elements that can’t further be broken down. Molecules (Components) - Simple compositions or groups of atoms that comprise a single unit. This may be an input box with a search button next to it and a label above it. Within Brad’s book he mentions these should follow the “S” in “SOLID” from Robert C. Martin’s Principles of Object Oriented Design which stands for Single Responsibility Principle. By this Brad implies that the molecule must only do one specific thing, not necessarily that it has only one reason to change. Brad refers to molecules near the end as “simple, functional, reusable components.” Organisms (Widgets) - Comprised of potentially multiple molecules or atoms and molecules in conjunction to form a cohesive purpose. Here Brad specifically refers to organisms as “components” numerous times as well. In comparison, these may be more sophisticated components compared to molecules. Templates - Templates are simply a collection of elements, components and widgets that when together build an entire page and lays it out without actual data. You can think of these as a Class in object oriented design. Pages - Pages are instanced Templates, or Templates with actual data. The actual benefit of the design system is in it’s name. Atomic Design System helps by putting an emphasis on breaking things down into their most atomic units and creating categories of complexity that are well-named to be able to refer to them. ...

Here are some concise steps on how to step-by-step block ads on your network with pihole’s DNS-level ad blocker. Enabling SSH on UDM Pro Go to 192.168.1.1 or wherever you’re hosting your UDM Pro Within “settings” cog, click on “system” tab Click “enabled” on SSH near the bottom Leverage “change password” button if you don’t remember it Log Into SSH & Get Unifi-OS Scripts Open Terminal and ssh [email protected] -o HostKeyAlgorithms=+ssh-rsa Jump into Unifi shell with unifi-os shell Download package curl -L https://udm-boot.boostchicken.dev -o udm-boot.deb Install package dpkg -i udm-boot.deb Enable boot script with systemctl enable udm-boot Leave Unifi shell but stay within ssh with exit Create Network Within UDM Web GUI Create a pihole network with the following settings: ...

tl;dr: The utility is open-source, you can download, contribute or learn more on github here. A credential broker service stores all sensitive information and has a command-line client which can act as a streaming pre-hook to initialize environment variables upon an application at runtime that does not store anything to disk. The broker service itself stores everything in encrypted format with the broker client having a key to unlock the data, provided the user is authenticated and has been authorized for the data requested. The server mimics an SSH authentication using Diffie-Hellman to establish encryption of traffic, performing a challenge to validate a user owns the private OpenPGP key to their account and a 2FA request at a configurable time period to ensure the user hasn’t been compromised. SSL should be configured on the server to help prevent man-in the middle. ...

Kepler452b is available for Windows, Linux & MacOS. Enjoy a roguelike with one of 8 classes, 5 unique worlds, beautiful graphics by Oryx, music by Scott Buckley & Sergey Cheremisinov, 28 unique enemies, 101 supervisors to modify your gameplay, a story and much more! Whether you prefer to sneak around and backstab with the assassin, use a flamethrower as a pyrotechnic or grapple enemies to you and poison them, there’s bound to be a play style you will enjoy! ...

It’s possible to intercept, adjust and otherwise tamper with a XHR request with javascript in the browser. The most common way of doing this is simply making a pointer reference to the original XMLHttpRequest.prototype.send function, overwriting that function with a new one that does the tampering and then calls the original send function once finished. Here’s an example: const XHR = XMLHttpRequest, XHRopen = XHR.prototype.open; XHR.prototype.open = function() { onFinish(); XHRopen.apply(this, arguments); }; Identifying Tampering It’s very straight forward to identify tampering of the function. Simply ensure that the XMLHttpRequest.prototype.open.toString() === 'function send() { [native code] }'; evaluates to true. The function should always be native code if it wasn’t corrupted or tampered with. ...

August 4th, 2020 Update: v1.0.0 Release Official release page is here. You can submit bugs or request features here. Downloads & Links Windows Download Mac Download Linux Snapfile Download Linux App Image Download Screenshots ...

At numerous times I’ve created demos trying to figure out how to merge a traditional roguelike into a FPS without sacrificing it’s roots. Here’s an article I made in 2017. Unlike many others I don’t feel like just random maps makes a roguelike, I’ve even gone so far as saying no FPS is a roguelike. In this experiment I’ve tried to merge those ascii characters into the map itself and dropped the textures. The code can be executed and ran or viewed in its entirety on Github here. ...

This summer I’ve worked on a behavior and trait mapper in C++ that establishes entirely dynamic AI routines, allowing actors to propagate and interact with each other in unique ways. You can think of it as a super sophisticated Langton's Ant, where the goal was to identify the reflective sociological impacts of personal traits from as minute and mundane as a vegan to criminal desires like burglary, sexual preferences like pansexual or uncontrollable hunger desires of a cannibal, etc. The graphing of the application was with Vis.js. ...

Introduction Pipeline patterns are most commonly used for simple data workflows like general functional composition or user registration processes. After briefly describing the basics, this article focuses on a couple of behavioral software design patterns under the strategy pattern we’ll refer to as “runtime patterns” for use with pipelines. Their power in modern applications is allowing pipelines to expand or contract dynamically. Whether it be through behavior modeling with ai, blueprint fulfilling or more basic conditional pipeline adaptation, the runtime patterns are helpful and with forethought can be simply understood and implemented. ...

Creating synchronously chained functions is straight forward. Codepen. const UserCollectionSync = { find(id=''){ document.writeln('1'); return this; }, update(){ document.writeln('2'); return this; }, save(){ document.writeln('3'); return this; } } UserCollectionSync .find() .update() .save(); But when we decide to just throw some ‘async’ ‘await’ flags on those functions everything doesn’t work. FOLLOWING CODE IS WRONG: Codepen. // delay is used to represent some asynchronous work function delay(ms){ return new Promise(resolve => setTimeout(resolve, ms)); } //end delay() const UserCollectionAsync = { async find(id=''){ await delay(1000) document.writeln('1'); return this; }, async updateFor(options={}){ await delay(50); document.writeln('2'); return this; }, async save(){ await delay(50); document.writeln('3'); return this; } } UserCollectionAsync .find() .updateFor('') .save(); The reason it fails is because when the ‘find()’ is called it returns a promise that hasn’t resolved instead of the ‘UserCollectionAsync’ object (Factory pattern.) Therefor you can’t find a function ‘update()’ on a promise. One common way of solving the issue is by allowing the factory to maintain a queue and force the user to add ‘done()’ at the end of the chain: Codepen. ...