"We can not solve our problems with the same level of thinking that created them" ― Albert Einstein

Bootstrap4 Alpha6 and Github Work

Bootstrap 4, Alpha6 was released today. As with any Alpha release there were several breaking changes. I'm not going into the ones which were relevant to this site because is it's easy enough to track changes related to your own project if you're on the alpha release branch for your testing purposes. I will say that the navbar changed dramatically again.

I've updated the code for Lodgik.com to make use of the latest Alpha6 release. I've also added a couple quick-links to the home-page status message area. These direct to the Github repositories I've published. In 2017 I'm making a concerted effort to contribute more code to the open-source community in general. So far, it's come in the form of a couple useful (hopefully) Docker configurations.

I welcome your feedback or contributions to those two (very small) projects. Larger and more meaningful contributions to come soon.

Migrating to Bootstrap 4

If you're a front-end developer, you're already fully aware of Twitter Bootstrap. Bootstrap 3 is already "the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web." Yes, that's a quote from Bootstrap's site, but it also happens to be true. Even though Bootstrap 3 is an incredibly powerful, flexible and useful framework, it has always lacked in a few areas. Vertical alignment of "cells" being one of the most pervasive. Also, it was heavily reliant on basic CSS or LESS for its styling system. While LESS is a great CSS-preprocessor, it's not nearly as versatile or logical as SASS (in my opinion). There's been a consistent migration for many front-end developers away from LESS, moving more towards SASS. The fact that you had to find a port of Bootstrap 3 in order to utilize SASS's features was a point of contention. Thankfully, with Bootstrap 4 the team has made the transition from CSS/LESS to SASS as a foundation of the framework. Here's an overview of changes in Bootstrap 4: http://v4-alpha.getbootstrap.com/migration/ 

Now let's move beyond the fundamentals of styling. In Bootstrap 4 they have overhauled the grid-system, utilities and the navbar. And all of the changes are welcome ones. Regarding the grid-system, you're welcome to continue using the default table-cell structure (this is currently the default as of Alpha5) but there's a ready-to-use variable which switches "everything" over to flexbox mode. This is where CSS is headed and rightly so. Flexbox offers more features, flexibility and is more logically constructed. Here's a quick primer on flexbox https://css-tricks.com/snippets/css/a-guide-to-flexbox/ 

Right now, Bootstrap 4 is still in its earliest stages of development. The latest version as of this post is Alpha-5. Each update to the framework comes with massive breaking changes. So am I using Bootstrap 4 on Lodgik.com? Because I know the future is going to embrace the changes that come with Bootstrap 4 and I want to be fully educated on how those changes translate into real-world builds. Knowing how to migrate from v3 to v4 is going to be a huge benefit to front-end developers. Rather than wait for the actual release and try to get up to speed quickly, I think it's important to watch and experiment with the ongoing changes to better understand the reasoning behind said changes. 

I'd never use or recommend anyone use Bootstrap 4 on a production web application. However, if you have a project that lends itself to experimentation, then I highly encourage you try v4 out for yourself. Watch how structural changes evolve, keep track of project commits and if you have the time, offer your own contributions.

Since Lodgik is a site built on cutting-edge, experimental technologies, this is a perfect fit for us. If you have any thoughts on Bootstrap 4, please feel free to share them via Twitter or our contact-form. 

Basic Contact Form Added

It's just a basic contact form. I used the 'mail' gem and ActionMailer to implement a basic contact form for the site. It's as basic as it gets, but it's incredibly easy to implement using Rails. In the future, I'll be adding some spam prevention functionality.

Behind the Scenes

What Technology Drives This Site?
Even though the site itself is extremely basic in form, I've used some relatively advanced (over-developed) solutions to get it up and running. One of the technologies I'm most excited about is Docker ( https://docker.com ). If you aren't yet familiar with Docker, the easiest way to describe it is to begin with Docker's own explanation and then to expand on that...

"Docker containers wrap a piece of software in a complete filesystem that contains everything needed to run: code, runtime, system tools, system libraries – anything that can be installed on a server. This guarantees that the software will always run the same, regardless of its environment."
The way I think of Docker is to think of it as a Virtualization layer that you can run on any computer, server or even virtual machine. The idea is that you can spin up a virtual machine, install Docker and then deploy multiple Docker "containers" -- each container will run a very specific application. For example: This site uses multiple Docker containers. One container handles caching/load-balancing... This is an Nginx container. Two others run the Rails application that serves the site itself. And finally the last container handles the database for User and Blog data. Normally you might spin up multiple VMs to accomplish this (similar to containers) or you might install all of the above on a single server/VM and setup interconnectivity. The down-side of doing this in a traditional way is that VMs take time to configure, spin up and secure. A single server solution requires that you consider memory and CPU limitations. Using Docker, we can address these issues as follows...

Each Docker container can spin up in seconds instead of minutes as is standard with many VMs. Each container is completely isolated and only connections that are specifically allowed are enabled. The nice thing here is that I can spin up and shut down these containers with minimal effort and everything is entirely scriptable. Meaning I can configure these containers using Dockerfiles which are basically text files. This means I can configure and test an entire application solution with multiple containers (services/apps) all on my local machine and I can trust that such configurations translate perfectly to any other server/machine.

You have a WordPress site setup on a remote server/VM. You are hacked due to poor choices made by people who have administration accounts. Rather than worry about restoring from backups and then trying to better configure the server, you can tweak your local Docker configuration, shut down the remote containers and spin up the new ones (completely clean and void of infection) in seconds.

I could go on about the other benefits to Docker, but rather than do that, I suggest you have a look at Docker.com and see for yourself. Let me know if you have any questions.

And so it begins...

The all new Lodgik site has launched. I plan on sharing a lot of useful (hopefully) information about how the site is constructed, hosted and even eventually making the code open source. The goal is to help share experiences, shortcuts and whatever else proves useful with anyone interested.