The internet, web and mobile, especially social media, are built and used as an addiction.
Like a casino, or a drug, the mobile phone and web browser have become the gateway to an addicted lifestyle for a billion plus people. With current trends, this is only getting worse.
As far as I know, in the entire world, there are two open source, production-based, bespoke configuration management systems.
In other words, if you want to run a full data center, network, production system and you want a system that has been designed and built and TESTED in production already to work, you only have two options.
Sure you can make your own system and test everything together, you can make a bricolage of existing roles and custom roles and make it work. But there will always be a long tail of implementation issues.
One such project comes from the US federal government, the NSA, SIMP, is based on Redhat and uses Puppet. There is excellent documentation and its compliant with the highest security standards (docs).
The other comes from a medical university in Europe and is based on Debian. Being an Ubuntu user, I’ll start with the Debian system. The second system is called Debops, the Debian data center in a box.
Debops is a Debian Data Center in a Box
Debops is based on the concept of an Ansible controller, i.e. a desktop or laptop which acts as the controller for the entire network.
I am going to install a bastion server, a VMware based VM which will be encrypted and also act as the bastion server for the entire network. This way my laptop does not become the weakest link in the entire chain.
I am running the VMware bastion VM from the RAID drive, and will give it a static IP, from within the VM and also at the router. My Comcast business router has annoying IP reassignment settings that kick in at very unfortunate times, such as after a power out etc. I force them to stick with dedicated IP.
Bastion set-up
I installed the operating system on the server, configure bridged, static public and private IP, setup DNS with Cloudflare, VNC access and openssh-server. I also install Ubuntu Desktop, 1, because I have loads of RAM and 2 I want the flexibility of using VNC if needed. I know, shell purists roll their eyes now.
Install openssh-server, keygens, and then allow root login with keys, create a root password, and then connect locally and remotely ssh [email protected] This is super important as otherwise you will be locked out of ssh from remote and can only use VNC. Also when you run debops for the first time you debops adds root to the users for remote logins. I also had to su devekko to change from root to my main sudo user to run the debops python scripts.
Now we begin our Debops project. Debops is designed to have separate projects for separate networks of servers and applications. From Getting Started installs the Debops roles, playbooks and some handy Python scripts for shortcuts to standard verbose Ansible
cd /home/devekko
debops-update
DebOps playbooks have not been found, installing into /home/devekko/.local/share/debops/debops-playbooks
for a total of 107 playbooks
Initiate Project
debops-init /home/devekko/devekko-io
Creating new DebOps project in /home/devekko/devekko-io ...
Inventory
We now add our bastion server to the inventory
cd devekko-io
vi ansible/inventory/hosts
[debops_all_hosts]
bastion ansible_connection=local
Now we run Debops on our Bastion server
debops
....
PLAY RECAP ******************************************************************************************
bastion : ok=218 changed=124 unreachable=0 failed=0
I want to start my Phoenix Elixir FolkBot project and want to see if I can implement some of the new features today.
I should be simply using the latest release and upgrading them, and I might revert, but lets see what we can learn now.
Fork the Phoenix Framework repo
I had the honor of being the 1000th fork of the Phoenix Framework, Phoenix project and I will use Gitkraken to review the changes and JetBrains IDEA to review the code in some detail.
Gitkraken
Based on the Electron IDE, which is also the basis of the Atom IDE, Gitkraken is a cross-platform GIT code review tool.
Gitkraken is perfect for moments like this where there are a few branches and and I want to understand the significant commits.
GitKraken
we can select a branch and see on the right side what changes where made to what files
GitKraken
We can see in this commit abc685656ab37f4a9ec8502f91ab406f422cbce7 that a bunch of big changes occurred “Add phx.gen.html and phx.gen.schema”.
GitKraken
JetBrains IDEA
Now we have a sense of what files we want to review, lets install JetBrains IDEA.
We install the JetBrains Toolbox app to allow us to install and update applications.
JetBrains Toolbox
Once Jetbrains IDEA is installed we open the Phoenix GIT repo which is checked out to the “cm-phx-gen-next” branch.
We install the Elixir Plugins, restart and now we can view some of the files and changes.
one of the key changes is the Schema and Context which is explained in the docs, the generators are chained and the generator with the largest scope is Mix.Tasks.Phx.Gen.Html
Generates controller, views, and bounded context for an HTML resource.
mix phx.gen.html Accounts User users name:string age:integer
The first argument is the context name followed by
the schema module and its plural name (used for resources and schema).
The above generated resource will contain:
* a context module in lib/accounts.ex, serving as the API boundary
to the resource
* a schema in lib/accounts/user.ex, with an `accounts_users` table
* a view in lib/web/views/user_view.ex
* a controller in lib/web/controllers/user_controller.ex
* a migration file for the repository
* default CRUD templates in lib/web/templates/user
* test files for generated context and controller features
another big, significant commit is fb5c340e351715ecd324d3d8ceb18b4f0c779d5a
For business and personal, for projects and task management, I use the Australian company Atlassian’s industry standard Jira.
On those mornings when another cup of coffee just can’t remind me of my pressing tasks, there is nothing quite like pulling up the Project list and picking a task and moving it to In Progress.
Also, when you have those great ideas, CAPTURE them, NOW, dump every single idea into a Epic, Story, Task. Don’t wait for next week, it will be gone. I can’t tell you how many times, I’ve come back to a project list and said to myself, what a good idea, I completely forgot about all that.
Avoid Rabbit Holes of Complexity
It’s totally possible to get lost in all sorts of complexity and setup with Jira and it can become a huge time sink.
Presumably this is why products like Wrike, Asana, Trello (now purchased by Atlassian), Basecamp are growing also.
Basic Jira
There are very, very many screens and views available, the standard one allows browsing of tickets on the left and refresh on right
[TECH-52] tech shopping – Devekko JIRA – Google Chrome_002
Kanban Boards
A super simple Kanban board interface is great for Agile type projects. Select a task for Development or In Progress and get it Done.
Kanban
Structure
A more advanced, but super useful Atlassian marketplace paid plugin is called Structure. It has a great UX with intuitive shortcuts and allows creation of folders in which you can quickly add Tasks and Sub Tasks
Structure
Plain Tasks
Possibly the very simplest Task management plugins is the very aptly named Plain Tasks. Again keyboard shortcuts and a simple UX allow quick and easy creation of lists from a brain dump of issues.
Nothing quite like dumping every conceivable thought into a huge list when first brainstorming a project. Of course, prioritization and structure can follow, but the most important thing is to get that list down, capture those ideas. Tomorrow morning they WILL BE GONE.
Plain Tasks
Jira In Motion; Android App
The default Jira mobile interface is ready only and basically is rubbish.
A nice app for Android is Jira in Motion, its fremium and organized around boards. So you need your project in Agile Boards, either Scrum or Kanban for this app to work.
Jira In Motion BoardJira In Motion Board DONE
Project & Task Management
Having been a professional project manager on some quite large projects (and also small projects!), its vital to have a kind of living contract with yourself, developers, business and client etc.
A project and task management system is possibly the most important tool for making sure project and tasks are delivered as agreed.
Without these systems, you are basically in a he-said/she-said situation when it comes to the almost inevitable mis-understanding or dispute.
In those very, very, very rare instances where you have a high-trust environment, its easy to resolve.
If not high trust, then you are toast without a project and task system. Basically, you need to Cover Your Arse.
Project & Task management doesn’t have to be overly complex or time consuming and with Agile methods like Scrum and Kanban and tools like Jira in Motion you can manage business as well as technical projects.
I am trying to standardize on Bootstrap 4 and Material Design and am going to test the UnderStrap theme direct from Github and will use the UnderStrap child-theme for our FolkBot WordPress theme.
We create the WordPress site, salts, database, user and gitignore
We change to the themes folder and use ZIP to download the parent and child-theme and the child-theme will have its own name folkbot-understrap.
we add the themes to GIT, create a repo on Gitlab and push the entire site repo.
git add .
git status
git commit -am "Understrap and Folkbot Understrap"
git status
git remote add gitlab_com [email protected]:folkbot/folkbot_wordpress.git
git push gitlab_com master
we activate the theme using WP cli
wp theme activate understrap
Success: Switched to 'UnderStrap' theme.
we check the browser and we see with our biological eyes in our human heads we have an Understrap theme
Folkbot Understrap default
we activate the new FolkBot Understrap child theme
We change the gulpfile.js so it works for our DNS and in our folder we run gulp watch
Now in folkbot-understrap/sass/theme/_child_theme_variables.scss we can change our $brand-primary: #4c4d4a; and gulp watch updates and we get a new theme color
Material Design
Next, we want to integrate Material Design
// Material Design for Bootstrap 4
@import "material/assets/sass/material";
@import "theme/child_theme_variables"; // <--------- Add your variables into this file. Also add variables to overwrite Bootstrap variables here
@import "assets/bootstrap4";// <--------- Loads Bootstrap3 or Bootstrap4. Change from /bootstrap3 to /bootstrap4 Watch out! just for testing in the moment!
@import "../src/sass/understrap/understrap/understrap";// <-------- Loads the UnderStrap defaults. Just a few classes to incorporate BS in WP
@import "../src/sass/understrap/theme/contact-form7";// <-------- Loads some basic styling for contact form 7 plugin
//Optional files - If you don´t use the corresponding scripts/fonts comment em out
@import "assets/font-awesome"; // <------- Font Awesome Icon font
@import "assets/underscores"; // <------- Underscores media styles
// Any additional imported files //
@import "theme/child_theme"; // <--------- Add your styles into this file
to modify Understrap theme settings we need to bring variables across from the theme and place them into
folkbot-understrap/sass/theme/_child_theme_variables.scss
$brand-primary: #fe9ecd;
// Basics of a navbar
$navbar-height: 60px;
$navbar-margin-bottom: 0px;
$navbar-border-radius: 0px;
we can now add the kitchen sink from Bootswatch Bootstrap 4 and we can see Material Design Bootstrap 4
we also change material design folkbot-understrap/sass/material/assets/sass/variables/_colour.scss and other variables
I am trying to focus on a single CSS framework for FolkBot and some implementations in distributions, binaries, products and SAAS.
There is a very excellent, non free, paid and premium theme, called Material Design for Bootstrap. It actually has a fremium kind of model. It has a well structured license and business model, BUT, none of the options allow embedding in an open source project, and since I want complete freedom I have chosen another implementation.
This Material Design for Bootstrap 4 by an Australian web agency called Daemonite. This seems the most active, if not the most popular, and since Bootstrap 4 is still in development I want a responsive team behind the codebase. It seems to have all the components and kitchen sink with great docs.
Like the web at large, the formerly Twitter Bootstrap base theme is now the de-facto standard, the go-to theme in Drupal.
The internet is increasingly being dominated by mega corporations, and the leading FLOSS projects are often coming from projects sponsored by them.
For instance the Zurb Foundation project is struggling and many of its ambitious branches are un-maintained, from the issues on GH it seems competition from Google is denying Zurb oxygen.
Drupal 8 Custom Theme
Let’s build a custom distribution for the Folk Bot Drupal 8 Distribution.
[code lang=text]
core: 8.x
type: theme
base theme: bootstrap
name: 'FolkBot Bootstrap'
description: 'FolkBot Uses the Bootstrap framework Sass source files and must be compiled (not for beginners).'
package: 'Bootstrap'
We need the Ruby package manager for gems, called Bundler
[code lang=text]
gem install bundler
Fetching: bundler-1.14.4.gem (100%)
Did you know that maintaining and improving Bundler and RubyGems.org costs more than $25,000 USD every month? Help us keep the gem ecosystem free for everyone by joining the hundreds of companies and individuals who help cover these costs: https://ruby.to/support-bundler
Successfully installed bundler-1.14.4
Parsing documentation for bundler-1.14.4
Installing ri documentation for bundler-1.14.4
Done installing documentation for bundler after 5 seconds
1 gem installed
[/code]
we now install SASS
[code lang=text]
gem install sass
Fetching: sass-3.4.23.gem (100%)
Successfully installed sass-3.4.23
Parsing documentation for sass-3.4.23
Installing ri documentation for sass-3.4.23
Done installing documentation for sass after 4 seconds
1 gem installed
[/code]
Now we need to download the Bootstrap SASS code into our new subtheme as described in the Drupal Bootstrap <a href="http://drupal-bootstrap.org/api/bootstrap/starterkits%21sass%21README.md/group/sub_theming_sass/8">docs</a>