Shell scripts for easier website shell scaffolding

So I’ve played around with Yeoman.

And I’ve played with NPM, Gulp, and Grunt.

There’s lots of things I like about these tools. But one thing that I dislike about all of them is the general difficulty of building your own customized website scaffolding system with them. And there’s an over-abundance of dependencies in my opinion. So back to the shell I say!

Here’s some of my own shell scripts (Bash flavored) to quickly scaffold out common site structures I use frequently.


Generic Scaffold (.NET 4 MVC approach)

scaffold()
{
echo “Creating Content directory”
mkdir Content
echo “Creating Scripts directory”
mkdir Scripts
echo “Moving into Content directory”
cd Content
echo “Creating assets folder for theme”
mkdir assets
echo “Moving into Content/assets directory”
cd assets
echo “Making css, fonts, and img directories”
mkdir css
mkdir fonts
mkdir img
echo “And heading back out to the root directory”
cd ../..
}

Bootstrap Scaffold (.NET 4 MVC approach)*

*Uses Bower to handle front-end dependencies

scaffold-bootstrap()
{
echo “Creating Content directory”
mkdir Content
echo “Creating Scripts directory”
mkdir Scripts
echo “Moving into Content directory”
cd Content
echo “Creating assets folder for theme”
mkdir assets
echo “Moving into Content/assets directory”
cd assets
echo “Making css, fonts, and img directories”
mkdir css
mkdir fonts
mkdir img
echo “Using Bower to download front-end dependencies”
echo “Using Bower to install jQuery#1 – latest”
bower install jquery#1
echo “Using Bower to install Bootstrap”
bower install bootstrap
echo “Using Bower to install FontAwesome”
bower install fontawesome
echo “Using Bower to install animate.css”
bower install animate.css
echo “Moving things into place…”
cd bower_components/animate.css
rsync -r animate.min.css ../../css
cd ../bootstrap/dist
cd css
rsync -r bootstrap.min.css ../../../../css
cd ../fonts
rsync -r * ../../../../fonts
cd ../js
rsync -r bootstrap.min.js ../../../../../../Scripts
cd ../../../font-awesome/css
rsync -r font-awesome.min.css ../../../css
cd ../fonts
rsync -r * ../../../fonts
cd ../../jquery/dist
rsync -r jquery.min.js ../../../../../Scripts
echo “And heading back out to the root directory”
cd ../..
}


I’ve added these scripts to my Bash profile (.bash_profile in your user account). For more info on bash scripting, see http://www.tldp.org/LDP/abs/html/index.html or use your favorite web search engine.

I’ll probably create a deployment-preparation script to copy the appropriate files/directories into a deployment folder for build/deployment. Anyway, I found Bash much easier to use to setup my web project scaffolding in the way I want it to be.

Update: Welp here’s a real world reason to go with shell scripts and minimize your external dependencies: http://arstechnica.com/information-technology/2016/03/rage-quit-coder-unpublished-17-lines-of-javascript-and-broke-the-internet/

An interesting CSS flexbox issue with Apple’s iOS

I ran into an interesting issue recently with CSS Flexible Box Layout and Apple’s iOS Safari (latest version) – and the issue only occurs on iOSĀ  Safari.

Let’s say you have a parent element with a display: flex;. And let’s say some children elements of this parent element also use display: flex;. These children elements also use vw/vh measurements for min/max width.

And iOS Safari seems to have issues with this – the layout, for some child elements, went bizarre and iOS Safari seemed to add extra margin to the right pushing the main content in.

So far the only workaround I got is to detect (via Modernizr) if it’s an iOS device and change my css from display: flex; to display: inline-block;. It’s not perfect, there’s some things I’d love to figure out better. But for now it does the job.

Addendum: Apparently this is a known (and as yet) unfixed bug: https://bugs.webkit.org/show_bug.cgi?id=136041

CSS classes based on page location

When styling SharePoint sites, it can be very useful to add specific styles to specific “pages” or views. Here’s a bit of jQuery/javascript code to make that possible. It works by grabbing the page location turning it into classes that are added to the body tag.


jQuery(document).ready(function($){
//use a javascript variable to hold the results of jQuery's "find the body tag" call
var $body = $('body');
//use a variable to capture and store the page url, also removing the 'http(s)://'
var url = window.location.href.replace(/http[s]?:\/\//, '');
//replace any .html, .asp(x), .php or .jsp file extensions
url = url.replace(/\.(htm[l]?|asp[x]?|php|jsp)$/,'');
//replace any '.' with '_' - ie. 'example.com' will become 'example_com'
url = url.replace(/[.]/g, "_");
//Wherever there is a '/', split url into a segment
var segments = url.split('/');
//Take these segments and add them as classes to the body
for (var i = 0; i < segments.length; i++) { $body.addClass(segments[i]); } });

For servers that prefer case sensitivity but allow either case to work (like SharePoint), and where that may cause unwanted headaches you can replace the line where we first define 'var url' with this:

var url = window.location.href.toLowerCase().replace(/http[s]?:\/\//, '');