Tom Norian Site Services an on-call resource for a select clientele

Tom Norian Site Services 2019-06-05T12:35:58-07:00 http://tomnorian.com Tom Norian tomnorian@gmail.com React Serverless Get Started 2017-10-16T00:00:00-07:00 http://tomnorian.com/React-Serverless-Get-Started Get a quick start on a ReactJS static, serverless site by cloning my git Repo. This starter pack uses Webpack and Babel to compile bundled files into a public directory that can be placed on any cheap server or website enabled S3 bucket. To make it better I’ve got all the settings to use SASS with ReactJS, and a Bootstrap Navbar to have a really nice “Hello World” up in no time. This is not a ReactJS or webpack tutorial … just look at it as a “cheat-sheet for Webpack and ReactJS site launched using SASS and Bootstrap for compiled CSS creation” What I’m Sharing: <ul> <li>a git repo to clone for a basic React site.</li> <li>NPM commands necessary to load the Node dependencies</li> <li>Package.json and wepback examples are also included in this post itself.</li> </ul> Ok, let’s get started ! demo: <a class="markdown-external-link" target="_blank" href="http://rankarooski.com/react/index.html">check out the live demo</a> GitHub repo: <a class="markdown-external-link" target="_blank" href="https://github.com/Tom2277/ReactStaticSiteStarter">ReactStaticSiteStarter GitHub repository</a>. Download the zip file for the repo above (or clone it at your preference) … then … <code class="highlighter-rouge">npm i webpack@3.4.0 -D</code> <code class="highlighter-rouge">npm i babel-core@6 babel-loader@6 babel-preset-react@6 -D</code>  <code class="highlighter-rouge">npm i react@15 react-dom@15 -D</code> <code class="highlighter-rouge">npm i css-loader node-sass sass-loader extract-text-webpack-plugin -D</code> Check the package.json below to be sure ! <h3 id="look-only-dev-dependencies">LOOK! Only Dev dependencies!?</h3> Yep - all the React code gets compiled into a js file .. the SASS gets turned into simple CSS. You might want to use a small subsection of Bootstrap or another libary which you can include within the ‘src/css’ folder. The files will get treated correctly depending on whether they have a .scss or .css extension. Create a basic HTML index file in the PUBLIC folder. NOTE: I am using CDNs for Bootstrap and JQuery - This index.html is in the Repo already. <div class="language-html highlighter-rouge"><pre class="highlight"><code> <!DOCTYPE html> <html> <head> <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> <title>Tom's React Starter Kit</title> <link rel="stylesheet" href="css/bundle.css"> </head> <body> <div id="content"></div> <script type="text/javascript" src="js/bundle.js"> </script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> </body> </html> </code></pre> </div> All of the JSX is in the jsx folder inside the src folder. (yes this project also uses the JSX choice of syntax DSL with React) Again, this is not a tutorial, but syntax can be tricky. Here is how I configured my Webpack file to compile only the needed code into the public file. <div class="language-javascript highlighter-rouge"><pre class="highlight"><code>// webpack.config.js var ExtractTextPlugin = require('extract-text-webpack-plugin'); module.exports = { entry: ['./src/jsx/app.jsx', './src/css/custom.css', './src/css/main.scss',], output: { path: __dirname + '/public/js/', filename: 'bundle.js' }, module: { loaders: [ { test: /\.jsx?$/, exclude: /(node_modules)/, loaders: ['babel-loader'] }, { test: /\.css$/, loader: ExtractTextPlugin.extract(['css-loader']), }, { test: /\.(sass|scss)$/, loader: ExtractTextPlugin.extract(['css-loader', 'sass-loader']) } ] }, plugins: [ new ExtractTextPlugin({ filename: '../css/bundle.css', allChunks: true, }) ] } </code></pre> </div> This excellent article: <a class="markdown-external-link" target="_blank" href="https://jonathanmh.com/webpack-sass-scss-compiling-separate-file/">great reference to enable SASS with webpack</a> got me most of the way. There were some changes you see in my file that differ from his. (things are always changing ! :) ) For good measure here is what your final package.json should look like. If we missed any dependencies go and fetch them with <code class="highlighter-rouge">npm i modulename -D</code> <div class="language-js highlighter-rouge"><pre class="highlight"><code>// package.json { "name": "ReactWithSassQuickStart", "version": "1.0.0", "description": "This is a starter kit to create a static ReactJS website with Sass, Bootstrap with Navbar", "main": "index.js", "scripts": { "build": "./node_modules/.bin/webpack", "build-watch": "./node_modules/.bin/webpack -w" }, "author": "", "license": "ISC", "babel": { "presets": [ "react" ] }, "devDependencies": { "babel-core": "^6.26.0", "babel-loader": "^6.4.1", "babel-preset-react": "^6.24.1", "css-loader": "^0.28.7", "extract-text-webpack-plugin": "^3.0.1", "node-sass": "^4.5.3", "react": "^15.6.2", "react-dom": "^15.6.2", "sass-loader": "^6.0.6", "style-loader": "^0.19.0", "webpack": "^3.4.0" } } </code></pre> </div> Again, here is the demo: <a class="markdown-external-link" target="_blank" href="http://rankarooski.com/react/index.html">check out the live demo</a> And here is the GitHub repo: <a class="markdown-external-link" target="_blank" href="https://github.com/Tom2277/ReactStaticSiteStarter">ReactStaticSiteStarter GitHub repository</a>. <h3 id="now-compile-and-deploy">Now, Compile and Deploy!</h3> Simply run the script to see that it looks right on your local machine. (the script is defined within the package.json file shown above) <code class="highlighter-rouge">root[master]>npm run build-watch</code> I serve it using the the node ‘static’ tool (install that globally: npm i static -g ) by typing <code class="highlighter-rouge">npm i static -g</code> <code class="highlighter-rouge">public[master]> static</code> Take a look in your web browser at : http://127.0.0.1:8080/# If it looks good, use your favorite server SCP tool or method to push the entire contents of your Public folder - including the ‘css’, ‘js’ and ‘images’ folders which now have compiled versions of your js and css files within them. Presto.. you should be in action just like on the live demo page above. As always, let me know anything I missed with comments and suggestions! All The Named Colors Css 2017-03-13T00:00:00-07:00 http://tomnorian.com/All-The-Named-Colors-CSS How many named colors are there on the web? Well, that is a complicated question that can be answered in the <a class="markdown-external-link" target="_blank" href="https://en.wikipedia.org/wiki/Web_colors">continually updated Wikipedia article on Web Colors</a> . Not all browsers support all colors and while the effective number of colors has grown, the list of named CSS colors I found that almost all browsers supported was about 140… I have 138 below I believe. The are other standards with multiple numbered shades of given colors would add up to a greater number. Again, you can read about it all at Wikipedia. Would you like an array of all named the CSS colors widely accepted on all browsers? Named colors with their both their hexadecimal and their RGB codes available by index ? Here is one…free of charge…all typed up and grouped in a rough way. I have them displayed below that and you can hover for the color name. Do you like guessing colors? Try a <a class="markdown-external-link" target="_blank" href="http://huecolorgame.com">color game</a> that I made right after BootCamp. I hand formatted this array a couple years ago before I knew what I was doing. I probably would have made them objects if I had it to do again but, as Tim Gunn says, if you need something like this quickly you can “make it work”. <div class="language-javascript highlighter-rouge"><pre class="highlight"><code>var colors = [ ["maroon", "#800000", 128, 0, 0], ["darkred", "#8B0000", 139, 0, 0], ["firebrick", '#B22222', 178, 34, 34], ["crimson", "#DC143C", 220, 20, 60], ["red", "#FF0000", 255, 0, 0], ["tomato", "#FF6347", 255, 99, 71], ["coral", "#FF7F50", 255, 127, 80], ["indianred", "#CD5C5C", 205, 92, 92], ["lightcoral", "#F08080", 240, 128, 128], ["darksalmon", "#E9967A", 233, 150, 122], ["salmon", "#FA8072", 250, 128, 114], ["lightsalmon", "#FFA07A", 255, 160, 122], ["bisque", "#FFE4C4", 255, 228, 196], ["blanchedalmond", "#FFEBCD", 255, 235, 205], ["peachpuff", "#FFDAB9", 255, 218, 185], ["wheat", "#F5DEB3", 245, 222, 179], ["navajowhite", "#FFDEAD", 255, 222, 173], ["cornsilk", "#FFF8DC", 255, 248, 220], ["saddlebrown", "#8B4513", 139, 69, 19], ["sienna", "#A0522D", 160, 82, 45], ["orangered", "#FF4500", 255, 69, 0], ["darkorange", "#FF8C00", 255, 140, 0], ["orange", "#FFA500", 255, 165, 0], ["brown", "#A52A2A", 165, 42, 42], ["gold", "#FFD700", 255, 215, 0], ["darkgoldenrod", "#B8860B", 184, 134, 11], ["goldenrod", "#DAA520", 218, 165, 32], ["palegoldenrod", "#EEE8AA", 238, 232, 170], ["darkkhaki", "#BDB76B", 189, 183, 107], ["khaki", "#F0E68C", 240, 230, 140], ["moccasin", "#FFE4B5", 255, 228, 181], ["antiquewhite", "#FAEBD7", 250, 235, 215], ["beige", "#F5F5DC", 245, 245, 220], ["lemonchiffon", "#FFFACD", 255, 250, 205], ["lightgoldenrodyellow", "#FAFAD2", 250, 250, 210], ["lightyellow", "#FFFFE0", 255, 255, 224], ["chocolate", "#D2691E", 210, 105, 30], ["peru", "#CD853F", 205, 133, 63], ["sandybrown", "#F4A460", 244, 164, 96], ["burlywood", "#DEB887", 222, 184, 135], ["tan", "#D2B48C", 210, 180, 140], ["rosybrown", "#BC8F8F", 188, 143, 143], ["yellow", "#FFFF00", 255, 255, 0], ["olive", "#808000", 128, 128, 0], ["darkolivegreen", "#556B2F", 85, 107, 47], ["olivedrab", "#6B8E23", 107, 142, 35], ["lawngreen", "#7CFC00", 124, 252, 0], ["chartreuse", "#7FFF00", 127, 255, 0], ["greenyellow", "#ADFF2F", 173, 255, 47], ["darkgreen", "#006400", 0, 100, 0], ["green", "#008000", 0, 128, 0], ["forestgreen", "#228B22", 34, 139, 34], ["lime", "#00FF00", 0, 255, 0], ["lightcyan", "#E0FFFF", 224, 255, 255], ["limegreen", "#32CD32", 50, 205, 50], ["lightgreen", "#90EE90", 144, 238, 144], ["palegreen", "#98FB98", 152, 251, 152], ["darkseagreen", "#8FBC8F", 143, 188, 143], ["mediumspringgreen", "#00FA9A", 0, 250, 154], ["springgreen", "#00FF7F", 0, 255, 127], ["yellowgreen", "#9ACD32", 154, 205, 50], ["seagreen", "#2E8B57", 46, 139, 87], ["mediumaquamarine", "#66CDAA", 102, 205, 170], ["mediumseagreen", "#3CB371", 60, 179, 113], ["lightseagreen", "#20B2AA", 32, 178, 170], ["darkslategray", "#2F4F4F", 47, 79, 79], ["teal", "#008080", 0, 128, 128], ["darkcyan", "#008B8B", 0, 139, 139], ["aqua", "#00FFFF", 0, 255, 255], ["cyan", "#00FFFF", 0, 255, 255], ["darkturquoise", "#00CED1", 0, 206, 209], ["turquoise", "#40E0D0", 64, 224, 208], ["mediumturquoise", "#48D1CC", 72, 209, 204], ["paleturquoise", "#AFEEEE", 175, 238, 238], ["aquamarine", "#7FFFD4", 127, 255, 212], ["powderblue", "#B0E0E6", 176, 224, 230], ["cadetblue", "#5F9EA0", 95, 158, 160], ["steelblue", '#4682B4', 70, 130, 180], ['cornflowerblue', "#6495ED", 100, 149, 237], ["deepskyblue", "#00BFFF", 0, 191, 255], ["dodgerblue", "#1E90FF", 30, 144, 255], ["lightblue", "#ADD8E6", 173, 216, 230], ["skyblue", "#87CEEB", 135, 206, 235], ["lightskyblue", "#87CEFA", 135, 206, 250], ["midnightblue", "#191970", 25, 25, 112], ["navy", "#000080", 0, 0, 128], ["darkblue", "#00008B", 0, 0, 139], ["mediumblue", "#0000CD", 0, 0, 205], ["blue", "#0000FF", 0, 0, 255], ["royalblue", "#4169E1", 65, 105, 225], ["blueviolet", "#8A2BE2", 138, 43, 226], ["indigo", "#4B0082", 75, 0, 130], ["darkslateblue", "#483D8B", 72, 61, 139], ["slateblue", "#6A5ACD", 106, 90, 205], ["mediumslateblue", "#7B68EE", 123, 104, 238], ["mediumpurple", "#9370DB", 147, 112, 219], ["darkmagenta", "#8B008B", 139, 0, 139], ["darkviolet", "#9400D3", 148, 0, 211], ["darkorchid", "#9932CC", 153, 50, 204], ["mediumorchid", "#BA55D3", 186, 85, 211], ["purple", "#800080", 128, 0, 128], ["thistle", "#D8BFD8", 216, 191, 216], ["plum", "#DDA0DD", 221, 160, 221], ["violet", "#EE82EE", 238, 130, 238], ["magenta", "#FF00FF", 255, 0, 255], ["orchid", "#DA70D6", 218, 112, 214], ["mediumvioletred", "#C71585", 199, 21, 133], ["palevioletred", "#DB7093", 219, 112, 147], ["deeppink", "#FF1493", 255, 20, 147], ["hotpink", "#FF69B4", 255, 105, 180], ["lightpink", "#FFB6C1", 255, 182, 193], ["pink", "#FFC0CB", 255, 192, 203], ["mistyrose", "#FFE4E1", 255, 228, 225], ["lavenderblush", "#FFF0F5", 255, 240, 245], ["linen", "#FAF0E6", 250, 240, 230], ["oldlace", "#FDF5E6", 253, 245, 230], ["papayawhip", "#FFEFD5", 255, 239, 213], ["seashell", "#FFF5EE", 255, 245, 238], ["mintcream", "#F5FFFA", 245, 255, 250], ["slategray", "#708090", 112, 128, 144], ["lightslategray", "#778899", 119, 136, 153], ["lightsteelblue", "#B0C4DE", 176, 196, 222], ["lavender", "#E6E6FA", 230, 230, 250], ["floralwhite", "#FFFAF0", 255, 250, 240], ["aliceblue", "#F0F8FF", 240, 248, 255], ["ghostwhite", "#F8F8FF", 248, 248, 255], ["honeydew", "#F0FFF0", 240, 255, 240], ["ivory", "#FFFFF0", 255, 255, 240], ["azure", "#F0FFFF", 240, 255, 255], ["snow", "#FFFAFA", 255, 250, 250], ["black", "#000000", 0, 0, 0], ["dimgray", "#696969", 105, 105, 105], ["gray", "#808080", 128, 128, 128], ["darkgray", "#A9A9A9", 169, 169, 169], ["silver", "#C0C0C0", 192, 192, 192], ["lightgray", "#D3D3D3", 211, 211, 211], ["gainsboro", "#DCDCDC", 220, 220, 220], ["whitesmoke", "#F5F5F5", 245, 245, 245], ["white", "#FFFFFF", 255, 255, 255] ]; </code></pre> </div> <div class="color-chip" title="maroon" alt="maroon named color" style="height: 80px; width: 80px; display: inline-block; background-color:#800000"> </div> <div class="color-chip" title="darkred" alt="darkred named color" style="height: 80px; width: 80px; display: inline-block; background-color:#8B0000"> </div> <div class="color-chip" title="firebrick" alt="firebrick named color" style="height: 80px; width: 80px; display: inline-block; background-color:#B22222"> </div> <div class="color-chip" title="crimson" alt="crimson named color" style="height: 80px; width: 80px; display: inline-block; background-color:#DC143C"> </div> <div class="color-chip" title="red" alt="red named color" style="height: 80px; width: 80px; display: inline-block; background-color:#FF0000"> </div> <div class="color-chip" title="tomato" alt="tomato named color" style="height: 80px; width: 80px; display: inline-block; background-color:#FF6347"> </div> <div class="color-chip" title="coral" alt="coral named color" style="height: 80px; width: 80px; display: inline-block; background-color:#FF7F50"> </div> <div class="color-chip" title="indianred" alt="indianred named color" style="height: 80px; width: 80px; display: inline-block; background-color:#CD5C5C"> </div> <div class="color-chip" title="lightcoral" alt="lightcoral named color" style="height: 80px; width: 80px; display: inline-block; background-color:#F08080"> </div> <div class="color-chip" title="darksalmon" alt="darksalmon named color" style="height: 80px; width: 80px; display: inline-block; background-color:#E9967A"> </div> <div class="color-chip" title="salmon" alt="salmon named color" style="height: 80px; width: 80px; display: inline-block; background-color:#FA8072"> </div> <div class="color-chip" title="lightsalmon" alt="lightsalmon named color" style="height: 80px; width: 80px; display: inline-block; background-color:#FFA07A"> </div> <div class="color-chip" title="bisque" alt="bisque named color" style="height: 80px; width: 80px; display: inline-block; background-color:#FFE4C4"> </div> <div class="color-chip" title="blanchedalmond" alt="blanchedalmond named color" style="height: 80px; width: 80px; display: inline-block; background-color:#FFEBCD"> </div> <div class="color-chip" title="peachpuff" alt="peachpuff named color" style="height: 80px; width: 80px; display: inline-block; background-color:#FFDAB9"> </div> <div class="color-chip" title="wheat" alt="wheat named color" style="height: 80px; width: 80px; display: inline-block; background-color:#F5DEB3"> </div> <div class="color-chip" title="navajowhite" alt="navajowhite named color" style="height: 80px; width: 80px; display: inline-block; background-color:#FFDEAD"> </div> <div class="color-chip" title="cornsilk" alt="cornsilk named color" style="height: 80px; width: 80px; display: inline-block; background-color:#FFF8DC"> </div> <div class="color-chip" title="saddlebrown" alt="saddlebrown named color" style="height: 80px; width: 80px; display: inline-block; background-color:#8B4513"> </div> <div class="color-chip" title="sienna" alt="sienna named color" style="height: 80px; width: 80px; display: inline-block; background-color:#A0522D"> </div> <div class="color-chip" title="orangered" alt="orangered named color" style="height: 80px; width: 80px; display: inline-block; background-color:#FF4500"> </div> <div class="color-chip" title="darkorange" alt="darkorange named color" style="height: 80px; width: 80px; display: inline-block; background-color:#FF8C00"> </div> <div class="color-chip" title="orange" alt="orange named color" style="height: 80px; width: 80px; display: inline-block; background-color:#FFA500"> </div> <div class="color-chip" title="brown" alt="brown named color" style="height: 80px; width: 80px; display: inline-block; background-color:#A52A2A"> </div> <div class="color-chip" title="gold" alt="gold named color" style="height: 80px; width: 80px; display: inline-block; background-color:#FFD700"> </div> <div class="color-chip" title="darkgoldenrod" alt="darkgoldenrod named color" style="height: 80px; width: 80px; display: inline-block; background-color:#B8860B"> </div> <div class="color-chip" title="goldenrod" alt="goldenrod named color" style="height: 80px; width: 80px; display: inline-block; background-color:#DAA520"> </div> <div class="color-chip" title="palegoldenrod" alt="palegoldenrod named color" style="height: 80px; width: 80px; display: inline-block; background-color:#EEE8AA"> </div> <div class="color-chip" title="darkkhaki" alt="darkkhaki named color" style="height: 80px; width: 80px; display: inline-block; background-color:#BDB76B"> </div> <div class="color-chip" title="khaki" alt="khaki named color" style="height: 80px; width: 80px; display: inline-block; background-color:#F0E68C"> </div> <div class="color-chip" title="moccasin" alt="moccasin named color" style="height: 80px; width: 80px; display: inline-block; background-color:#FFE4B5">  </div> <div class="color-chip" title="antiquewhite" alt="antiquewhite named color" style="height: 80px; width: 80px; display: inline-block; background-color:#FAEBD7"> </div> <div class="color-chip" title="beige" alt="beige named color" style="height: 80px; width: 80px; display: inline-block; background-color:#F5F5DC"> </div> <div class="color-chip" title="lemonchiffon" alt="lemonchiffon named color" style="height: 80px; width: 80px; display: inline-block; background-color:#FFFACD"> </div> <div class="color-chip" title="lightgoldenrodyellow" alt="lightgoldenrodyellow named color" style="height: 80px; width: 80px; display: inline-block; background-color:#FAFAD2"> </div> <div class="color-chip" title="lightyellow" alt="lightyellow named color" style="height: 80px; width: 80px; display: inline-block; background-color:#FFFFE0"> </div> <div class="color-chip" title="chocolate" alt="chocolate named color" style="height: 80px; width: 80px; display: inline-block; background-color:#D2691E"> </div> <div class="color-chip" title="peru" alt="peru named color" style="height: 80px; width: 80px; display: inline-block; background-color:#CD853F"> </div> <div class="color-chip" title="sandybrown" alt="sandybrown named color" style="height: 80px; width: 80px; display: inline-block; background-color:#F4A460"> </div> <div class="color-chip" title="burlywood" alt="burlywood named color" style="height: 80px; width: 80px; display: inline-block; background-color:#DEB887"> </div> <div class="color-chip" title="tan" alt="tan named color" style="height: 80px; width: 80px; display: inline-block; background-color:#D2B48C"> </div> <div class="color-chip" title="rosybrown" alt="rosybrown named color" style="height: 80px; width: 80px; display: inline-block; background-color:#BC8F8F"> </div> <div class="color-chip" title="yellow" alt="yellow named color" style="height: 80px; width: 80px; display: inline-block; background-color:#FFFF00"> </div> <div class="color-chip" title="olive" alt="olive named color" style="height: 80px; width: 80px; display: inline-block; background-color:#808000"> </div> <div class="color-chip" title="darkolivegreen" alt="darkolivegreen named color" style="height: 80px; width: 80px; display: inline-block; background-color:#556B2F"> </div> <div class="color-chip" title="olivedrab" alt="olivedrab named color" style="height: 80px; width: 80px; display: inline-block; background-color:#6B8E23"> </div> <div class="color-chip" title="lawngreen" alt="lawngreen named color" style="height: 80px; width: 80px; display: inline-block; background-color:#7CFC00"> </div> <div class="color-chip" title="chartreuse" alt="chartreuse named color" style="height: 80px; width: 80px; display: inline-block; background-color:#7FFF00"> </div> <div class="color-chip" title="greenyellow" alt="greenyellow named color" style="height: 80px; width: 80px; display: inline-block; background-color:#ADFF2F"> </div> <div class="color-chip" title="darkgreen" alt="darkgreen named color" style="height: 80px; width: 80px; display: inline-block; background-color:#006400"> </div> <div class="color-chip" title="green" alt="green named color" style="height: 80px; width: 80px; display: inline-block; background-color:#008000"> </div> <div class="color-chip" title="forestgreen" alt="forestgreen named color" style="height: 80px; width: 80px; display: inline-block; background-color:#228B22"> </div> <div class="color-chip" title="lime" alt="lime named color" style="height: 80px; width: 80px; display: inline-block; background-color:#00FF00"> </div> <div class="color-chip" title="lightcyan" alt="lightcyan named color" style="height: 80px; width: 80px; display: inline-block; background-color:#E0FFFF"> </div> <div class="color-chip" title="limegreen" alt="limegreen named color" style="height: 80px; width: 80px; display: inline-block; background-color:#32CD32"> </div> <div class="color-chip" title="lightgreen" alt="lightgreen named color" style="height: 80px; width: 80px; display: inline-block; background-color:#90EE90"> </div> <div class="color-chip" title="palegreen" alt="palegreen named color" style="height: 80px; width: 80px; display: inline-block; background-color:#98FB98"> </div> <div class="color-chip" title="darkseagreen" alt="darkseagreen named color" style="height: 80px; width: 80px; display: inline-block; background-color:#8FBC8F"> </div> <div class="color-chip" title="mediumspringgreen" alt="mediumspringgreen named color" style="height: 80px; width: 80px; display: inline-block; background-color:#00FA9A"> </div> <div class="color-chip" title="springgreen" alt="springgreen named color" style="height: 80px; width: 80px; display: inline-block; background-color:#00FF7F"> </div> <div class="color-chip" title="yellowgreen" alt="yellowgreen named color" style="height: 80px; width: 80px; display: inline-block; background-color:#9ACD32"> </div> <div class="color-chip" title="seagreen" alt="seagreen named color" style="height: 80px; width: 80px; display: inline-block; background-color:#2E8B57"> </div> <div class="color-chip" title="mediumaquamarine" alt="mediumaquamarine named color" style="height: 80px; width: 80px; display: inline-block; background-color:#66CDAA"> </div> <div class="color-chip" title="mediumseagreen" alt="mediumseagreen named color" style="height: 80px; width: 80px; display: inline-block; background-color:#3CB371"> </div> <div class="color-chip" title="lightseagreen" alt="lightseagreen named color" style="height: 80px; width: 80px; display: inline-block; background-color:#20B2AA"> </div> <div class="color-chip" title="darkslategray" alt="darkslategray named color" style="height: 80px; width: 80px; display: inline-block; background-color:#2F4F4F"> </div> <div class="color-chip" title="teal" alt="teal named color" style="height: 80px; width: 80px; display: inline-block; background-color:#008080"> </div> <div class="color-chip" title="darkcyan" alt="darkcyan named color" style="height: 80px; width: 80px; display: inline-block; background-color:#008B8B"> </div> <div class="color-chip" title="aqua" alt="aqua named color" style="height: 80px; width: 80px; display: inline-block; background-color:#00FFFF"> </div> <div class="color-chip" title="cyan" alt="cyan named color" style="height: 80px; width: 80px; display: inline-block; background-color:#00FFFF"> </div> <div class="color-chip" title="darkturquoise" alt="darkturquoise named color" style="height: 80px; width: 80px; display: inline-block; background-color:#00CED1"> </div> <div class="color-chip" title="turquoise" alt="turquoise named color" style="height: 80px; width: 80px; display: inline-block; background-color:#40E0D0"> </div> <div class="color-chip" title="mediumturquoise" alt="mediumturquoise named color" style="height: 80px; width: 80px; display: inline-block; background-color:#48D1CC"> </div> <div class="color-chip" title="paleturquoise" alt="paleturquoise named color" style="height: 80px; width: 80px; display: inline-block; background-color:#AFEEEE"> </div> <div class="color-chip" title="aquamarine" alt="aquamarine named color" style="height: 80px; width: 80px; display: inline-block; background-color:#7FFFD4"> </div> <div class="color-chip" title="powderblue" alt="powderblue named color" style="height: 80px; width: 80px; display: inline-block; background-color:#B0E0E6"> </div> <div class="color-chip" title="cadetblue" alt="cadetblue named color" style="height: 80px; width: 80px; display: inline-block; background-color:#5F9EA0"> </div> <div class="color-chip" title="steelblue" alt="steelblue named color" style="height: 80px; width: 80px; display: inline-block; background-color:#4682B4"> </div> <div class="color-chip" title="cornflowerblue" alt="cornflowerblue named color" style="height: 80px; width: 80px; display: inline-block; background-color:#6495ED"> </div> <div class="color-chip" title="deepskyblue" alt="deepskyblue named color" style="height: 80px; width: 80px; display: inline-block; background-color:#00BFFF"> </div> <div class="color-chip" title="dodgerblue" alt="dodgerblue named color" style="height: 80px; width: 80px; display: inline-block; background-color:#1E90FF"> </div> <div class="color-chip" title="lightblue" alt="lightblue named color" style="height: 80px; width: 80px; display: inline-block; background-color:#ADD8E6"> </div> <div class="color-chip" title="skyblue" alt="skyblue named color" style="height: 80px; width: 80px; display: inline-block; background-color:#87CEEB"> </div> <div class="color-chip" title="lightskyblue" alt="lightskyblue named color" style="height: 80px; width: 80px; display: inline-block; background-color:#87CEFA"> </div> <div class="color-chip" title="midnightblue" alt="midnightblue named color" style="height: 80px; width: 80px; display: inline-block; background-color:#191970"> </div> <div class="color-chip" title="navy" alt="navy named color" style="height: 80px; width: 80px; display: inline-block; background-color:#000080"> </div> <div class="color-chip" title="darkblue" alt="darkblue named color" style="height: 80px; width: 80px; display: inline-block; background-color:#00008B"> </div> <div class="color-chip" title="mediumblue" alt="mediumblue named color" style="height: 80px; width: 80px; display: inline-block; background-color:#0000CD"> </div> <div class="color-chip" title="blue" alt="blue named color" style="height: 80px; width: 80px; display: inline-block; background-color:#0000FF"> </div> <div class="color-chip" title="royalblue" alt="royalblue named color" style="height: 80px; width: 80px; display: inline-block; background-color:#4169E1"> </div> <div class="color-chip" title="blueviolet" alt="blueviolet named color" style="height: 80px; width: 80px; display: inline-block; background-color:#8A2BE2"> </div> <div class="color-chip" title="indigo" alt="indigo named color" style="height: 80px; width: 80px; display: inline-block; background-color:#4B0082"> </div> <div class="color-chip" title="darkslateblue" alt="darkslateblue named color" style="height: 80px; width: 80px; display: inline-block; background-color:#483D8B"> </div> <div class="color-chip" title="slateblue" alt="slateblue named color" style="height: 80px; width: 80px; display: inline-block; background-color:#6A5ACD"> </div> <div class="color-chip" title="mediumslateblue" alt="mediumslateblue named color" style="height: 80px; width: 80px; display: inline-block; background-color:#7B68EE"> </div> <div class="color-chip" title="mediumpurple" alt="mediumpurple named color" style="height: 80px; width: 80px; display: inline-block; background-color:#9370DB"> </div> <div class="color-chip" title="darkmagenta" alt="darkmagenta named color" style="height: 80px; width: 80px; display: inline-block; background-color:#8B008B"> </div> <div class="color-chip" title="darkviolet" alt="darkviolet named color" style="height: 80px; width: 80px; display: inline-block; background-color:#9400D3"> </div> <div class="color-chip" title="darkorchid" alt="darkorchid named color" style="height: 80px; width: 80px; display: inline-block; background-color:#9932CC"> </div> <div class="color-chip" title="mediumorchid" alt="mediumorchid named color" style="height: 80px; width: 80px; display: inline-block; background-color:#BA55D3"> </div> <div class="color-chip" title="purple" alt="purple named color" style="height: 80px; width: 80px; display: inline-block; background-color:#800080"> </div> <div class="color-chip" title="thistle" alt="thistle named color" style="height: 80px; width: 80px; display: inline-block; background-color:#D8BFD8"> </div> <div class="color-chip" title="plum" alt="plum named color" style="height: 80px; width: 80px; display: inline-block; background-color:#DDA0DD"> </div> <div class="color-chip" title="violet" alt="violet named color" style="height: 80px; width: 80px; display: inline-block; background-color:#EE82EE"> </div> <div class="color-chip" title="magenta" alt="magenta named color" style="height: 80px; width: 80px; display: inline-block; background-color:#FF00FF"> </div> <div class="color-chip" title="orchid" alt="orchid named color" style="height: 80px; width: 80px; display: inline-block; background-color:#DA70D6"> </div> <div class="color-chip" title="mediumvioletred" alt="mediumvioletred named color" style="height: 80px; width: 80px; display: inline-block; background-color:#C71585"> </div> <div class="color-chip" title="palevioletred" alt="palevioletred named color" style="height: 80px; width: 80px; display: inline-block; background-color:#DB7093"> </div> <div class="color-chip" title="deeppink" alt="deeppink named color" style="height: 80px; width: 80px; display: inline-block; background-color:#FF1493"> </div> <div class="color-chip" title="hotpink" alt="hotpink named color" style="height: 80px; width: 80px; display: inline-block; background-color:#FF69B4"> </div> <div class="color-chip" title="lightpink" alt="lightpink named color" style="height: 80px; width: 80px; display: inline-block; background-color:#FFB6C1"> </div> <div class="color-chip" title="pink" alt="pink named color" style="height: 80px; width: 80px; display: inline-block; background-color:#FFC0CB"> </div> <div class="color-chip" title="mistyrose" alt="mistyrose named color" style="height: 80px; width: 80px; display: inline-block; background-color:#FFE4E1"> </div> <div class="color-chip" title="lavenderblush" alt="lavenderblush named color" style="height: 80px; width: 80px; display: inline-block; background-color:#FFF0F5"> </div> <div class="color-chip" title="linen" alt="linen named color" style="height: 80px; width: 80px; display: inline-block; background-color:#FAF0E6"> </div> <div class="color-chip" title="oldlace" alt="oldlace named color" style="height: 80px; width: 80px; display: inline-block; background-color:#FDF5E6"> </div> <div class="color-chip" title="papayawhip" alt="papayawhip named color" style="height: 80px; width: 80px; display: inline-block; background-color:#FFEFD5"> </div> <div class="color-chip" title="seashell" alt="seashell named color" style="height: 80px; width: 80px; display: inline-block; background-color:#FFF5EE"> </div> <div class="color-chip" title="mintcream" alt="mintcream named color" style="height: 80px; width: 80px; display: inline-block; background-color:#F5FFFA"> </div> <div class="color-chip" title="slategray" alt="slategray named color" style="height: 80px; width: 80px; display: inline-block; background-color:#708090"> </div> <div class="color-chip" title="lightslategray" alt="lightslategray named color" style="height: 80px; width: 80px; display: inline-block; background-color:#778899"> </div> <div class="color-chip" title="lightsteelblue" alt="lightsteelblue named color" style="height: 80px; width: 80px; display: inline-block; background-color:#B0C4DE"> </div> <div class="color-chip" title="lavender" alt="lavender named color" style="height: 80px; width: 80px; display: inline-block; background-color:#E6E6FA"> </div> <div class="color-chip" title="floralwhite" alt="floralwhite named color" style="height: 80px; width: 80px; display: inline-block; background-color:#FFFAF0"> </div> <div class="color-chip" title="aliceblue" alt="aliceblue named color" style="height: 80px; width: 80px; display: inline-block; background-color:#F0F8FF"> </div> <div class="color-chip" title="ghostwhite" alt="ghostwhite named color" style="height: 80px; width: 80px; display: inline-block; background-color:#F8F8FF"> </div> <div class="color-chip" title="honeydew" alt="honeydew named color" style="height: 80px; width: 80px; display: inline-block; background-color:#F0FFF0"> </div> <div class="color-chip" title="ivory" alt="ivory named color" style="height: 80px; width: 80px; display: inline-block; background-color:#FFFFF0"> </div> <div class="color-chip" title="azure" alt="azure named color" style="height: 80px; width: 80px; display: inline-block; background-color:#F0FFFF"> </div> <div class="color-chip" title="snow" alt="snow named color" style="height: 80px; width: 80px; display: inline-block; background-color:#FFFAFA"> </div> <div class="color-chip" title="black" alt="black named color" style="height: 80px; width: 80px; display: inline-block; background-color:#000000"> </div> <div class="color-chip" title="dimgray" alt="dimgray named color" style="height: 80px; width: 80px; display: inline-block; background-color:#696969"> </div> <div class="color-chip" title="gray" alt="gray named color" style="height: 80px; width: 80px; display: inline-block; background-color:#808080"> </div> <div class="color-chip" title="darkgray" alt="darkgray named color" style="height: 80px; width: 80px; display: inline-block; background-color:#A9A9A9"> </div> <div class="color-chip" title="silver" alt="silver named color" style="height: 80px; width: 80px; display: inline-block; background-color:#C0C0C0"> </div> <div class="color-chip" title="lightgray" alt="lightgray named color" style="height: 80px; width: 80px; display: inline-block; background-color:#D3D3D3"> </div> <div class="color-chip" title="gainsboro" alt="gainsboro named color" style="height: 80px; width: 80px; display: inline-block; background-color:#DCDCDC"> </div> <div class="color-chip" title="whitesmoke" alt="whitesmoke named color" style="height: 80px; width: 80px; display: inline-block; background-color:#F5F5F5"> </div> <div class="color-chip" title="white" alt="white named color" style="height: 80px; width: 80px; display: inline-block; background-color:#FFFFFF"> </div> Angularjs Directives With Actions 2017-03-03T00:00:00-08:00 http://tomnorian.com/angularjs-directives-with-actions I decided to take a look back at AngularJS this week after having spent the last few months with other front-end DSL environments and platforms. (EmberJS and, to the extent it qualifies, Jekyll/Liquid). I think the time I spent learning EmberJS late in 2016 really began to get me in the mind-set of web components. More on EmberJS in other posts, and I’ll leave the “meta” discussion of web components up to the trend setters…I’m following you though! AngularJS has been <a class="markdown-external-link" target="_blank" href="https://docs.angularjs.org/guide/component">actively moving toward components</a> itself, even in Angular 1.X which has an aura of being ‘deprecated’. As RTFM works, you can find out these things! What’s more, some precursors to components were there in angularJS all along. What I’m Sharing: <ul> <li>a basic example of a directive that can modularize “sortable tables”</li> <li>a few examples of AngularJS bells and whistles in use</li> <li>an example how you can pass different actions to the same reusable custom directive you create.</li> </ul> <img src="/images/blog/angularjs-sortable-table.png" alt="sortable table demo" title="" width="100%" /> <label class="tn-image-inline-caption"></label> Really it is that last one, the passing of a function name to a directive, enabling the same directive to be used in different ways, that made me want to share this. While I’m not sure I nailed the “AngularJS way”, the process had me taking a deeper dive. The AngularJS website and style guides didn’t really have any great examples so, maybe seeing my syntax will get your juices flowing. A quick reminder why to use directives First, <a class="markdown-external-link" target="_blank" href="http://rankarooski.com/#/angular-directive-demo">open up the (external) live demo</a> to see the two sortable lists where we’ll reuse page segments that are more than flat information displays.  Second, open the code toggle below for something ugly! <div class="panel-group"> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <button data-toggle="collapse" data-target="#long-unrefactored"> Long, Logic in View </button> </h4> </div> <div id="long-unrefactored" class="panel-collapse collapse"> <div class="panel-body"> <div class="language-html highlighter-rouge"><pre class="highlight"><code> <div class="container" > <div class="col-md-12"> <div ng-controller="RatingListController as list "> <div class="col-md-3 master-list"> <table id="all-performer-table" class="table table-bordered table-striped"> <thead ng-init="sortType='score'; sortReverse=true "> <tr> <td> <a href="#" ng-click="sortType = '-name'; sortReverse = !sortReverse"> Select From Below <span ng-show="sortType == '-name' && sortReverse" class="fa fa-caret-down"> <span ng-show="sortType == '-name' && !sortReverse" class="fa fa-caret-up"> </a> </td> <td> <a href="#" ng-click="sortType = 'score'; sortReverse = !sortReverse"> Score <span ng-show="sortType == 'score' && !sortReverse" class="fa fa-caret-down"> <span ng-show="sortType == 'score' && sortReverse" class="fa fa-caret-up"> </a> </td> <td class="check-box-label"> +<span style="color: red;"> - </td> </tr> </thead> <tr ng-repeat="item in list.itemsInSet | orderBy:sortType:sortReverse"> <td ng-class="{limeHighlight: item.selected}" >{{item.name}}</td> <td>{{item.score}}</td> <td><input type="checkbox" ng-model=item.selected ng-click="list.addOrRemoveFromRatedItems(item)"></td> </tr> </table> </div> <div class="col-md-4 selected-list"> <ol class="selected-item-list"> <li ng-repeat="selItem in list.ratedItems" class="selected-item-rated"> <span >{{selItem.name}}- {{selItem.$$hashKey}} <div class="list-making-tools pull-right" > <span class="glyphicon glyphicon-remove-circle text-danger" ng-click="list.removeFromRatedItems(selItem)"> <span class="glyphicon glyphicon-arrow-down text-warning " ng-click="list.moveDownRatedItems(selItem)"> <span class="glyphicon glyphicon-arrow-up text-success" ng-click="list.moveUpRatedItems(selItem)"> </div> </li> </ol> </div> </div>  <div class="col-md-5 demo-explanation " ng-controller="PhotoDisplayController as photos"> <div class="photo-box"> <img ng-src="{{photos.chosenPhoto.photo_url}}" alt="{{photos.chosenPhoto.title}}"> </div> <table id="photo-table" class="table table-bordered table-striped"> <thead ng-init="sortType='score'; sortReverse=true "> <tr> <td> <a href="#" ng-click="sortType = '-name'; sortReverse = !sortReverse"> Select From Below <span ng-show="sortType == '-name' && sortReverse" class="fa fa-caret-down"> <span ng-show="sortType == '-name' && !sortReverse" class="fa fa-caret-up"> </a> </td> <td> <a href="#" ng-click="sortType = 'score'; sortReverse = !sortReverse"> Year <span ng-show="sortType == 'score' && !sortReverse" class="fa fa-caret-down"> <span ng-show="sortType == 'score' && sortReverse" class="fa fa-caret-up"> </a> </td> <td class="check-box-label"> +<span style="color: red;"> - </td> </tr> </thead> <tr ng-repeat="item in photos.itemsInSet | orderBy:sortType:sortReverse"> <td ng-class="{limeHighlight: item.selected}" >{{item.name}}</td> <td>{{item.year}}</td> <td><input type="checkbox" ng-model=item.selected ng-click="list.addOrRemoveFromRatedItems(item)"></td> </tr> </table> </div> </div> </div> </code></pre> </div> </div> <div class="panel-footer">Ugh, logic or display?!</div> </div> </div> </div>  That sort of mess of logic in the view is why AngularJS got a bad rap… but! … that was never how it was supposed to be! Here is how that HTML page looks with the content broken out into directives: <div class="language-html highlighter-rouge"><pre class="highlight"><code> <div class="col-md-12"> <div class="first-two-columns" ng-controller="RatingListController as list "> <div class="col-md-3 master-list"> <tn-sortable-table list-data='list' cols-displayed="name,score" cols-labels="Character,Rating" check-action='addOrRemoveFromRatedItems' sort-col='score' sort-desc='true'> </tn-sortable-table> </div> <div class="col-md-4 selected-list"> <user-selected-list></user-selected-list> </div> </div>  <div class="col-md-5 photo-display-list " ng-controller="PhotoDisplayController as photos"> <div class="photo-box"> <img ng-src="{{photos.chosenPhoto.photo_url}}" alt="{{photos.chosenPhoto.title}}"> </div> <tn-sortable-table list-data='photos' cols-displayed="title,category,year" cols-labels="Photos of Tom,Activity,Year" check-action="pickPhoto" sort-col='title' sort-desc='false'> </tn-sortable-table> </div>  </div> </code></pre> </div> See? The main page segments are called by custom tag with their specific code factored out. The key element is the creation of the DSL like <code class="highlighter-rouge"><sortable-table></code> tags. You can use data from mutiple controllers, name the data columns you want to see, give custom column labels, and specify which columns and direction to sort by. AND, you can dictate what action will be performed after checking…all from one directive line. I will indent and comment for easier reading: <div class="language-html highlighter-rouge"><pre class="highlight"><code><tn-sortable-table list-data='list'   cols-displayed="name,score" cols-labels="Character Name,Rating" sort-col='score' sort-desc='true' check-action='addOrRemoveFromRatedItems'> </tn-sortable-table> </code></pre> </div> The first above lets a visitor choose names from a master list and put them into their own order. You can see my project where you can use something similar to <a class="markdown-external-link" target="_blank" href="http://toptenmaker.com">make Top Ten Lists</a> and have your votes added to the public score as well as make image of your own opinions to share via social media. And my second use of the directive, this time as a control feature for a photo display as you saw in the linked demo. <div class="language-html highlighter-rouge"><pre class="highlight"><code><tn-sortable-table list-data='photos'  cols-displayed="title,category,year" cols-labels="Photos of Tom,Activity,Year" sort-col='title' sort-desc='false' check-action="pickPhoto" > </tn-sortable-table> </code></pre> </div> The parameters: list-data , passes all the list data downward as well as the scope needed to execute your action. The ‘cols-displayed’ and ‘cols-labels’ do what you think.. the first is used as a key and the second as text in the table headers. Note, AngularJS will not take arrays. I chose comma separated strings as the easiest alternative to type. It is easy to allow a content creator to choose what column the tables should be ranked on when landing with sort-col (name of the data key column) and sort-desc (true or false). The checkAction is a string name of the function on the controller that will be called. You can see the directive’s JS file below: Here is the directive’s JS file that handles those the <code class="highlighter-rouge"><tn-sortable-table></code> tags above. <div class="language-javascript highlighter-rouge"><pre class="highlight"><code>// js/directives/sortable-table.js angular .module('demo-directive-app') .directive('tnSortableTable', sortableTable); function sortableTable(){ return { restrict: 'E', scope:{ listData : "=listData" }, templateUrl: 'templates/directives/sortable-table.html', link: function(scope, element, attrs){ scope.colsDisplayed = attrs.colsDisplayed.split(','); scope.colsLabels = attrs.colsLabels.split(','); scope.sortCol = attrs.sortCol; scope.sortDesc = (attrs.sortDesc == "true"); scope.itemsInSet = scope.listData.itemsInSet; scope.checkAction = function(item){ scope.listData[attrs.checkAction](item); } } }; }; </code></pre> </div> There are a few tricky things there. The kebab - separated names get ‘normalized’ into camel case in the JS file. (i.e. cols-displayed must be changed to colsDisplayed). I use the setter format “=listData” to expand the page scope into the directive scope. An alternative way that you need when you’ll manipulate the data is the use of the ‘link: function() ‘ syntax. I am going to cop-out on a true explanation of how this all works. That would be longer than this post all together. Here are a few links <a class="markdown-external-link" target="_blank" href="http://stackoverflow.com/questions/14049480/what-are-the-nuances-of-scope-prototypal-prototypical-inheritance-in-angularjs/14049482#14049482">Stack overflow essay on AngularJS inheritance</a> and the <a class="markdown-external-link" target="_blank" href="https://docs.angularjs.org/guide/directive">main AngularJS developer guide on directives</a> I worry somewhat about the elegance of passing the entire scope via ‘listData’ however it’s important to realize …. and you might pound your head against the table for a few hours … that you can’t have <code class="highlighter-rouge">ng-click</code>’s given action build a regex or function via interpolated elements of expressions! from their site: <blockquote> <h2 id="no-function-declarations-or-regexp-creation-with-literal-notation">No function declarations or RegExp creation with literal notation</h2> You can’t declare functions or create regular expressions from within AngularJS expressions. This is to avoid complex model transformation logic inside templates. Such logic is better placed in a controller or in a dedicated filter where it can be tested properly. </blockquote> So, that explains why I was sure that the parent scope of the controller was available to the directive via the “listData” param. You CAN use a directive parameter to -be executed- . Ng-click looks at what is between the “quotes” and first tries to execute it rather than interpolating {{}} first then executing. Many work-arounds attempts will stop the entire page from executing. What I do below is one working approach: <div class="language-html highlighter-rouge"><pre class="highlight"><code> <table id="all-performer-table" class="table table-bordered table-striped"> <thead ng-init="sortType=colTwo; sortReverse=true "> <tr> <td sortable-table-header inner-type='sortType' inner-reverse ='sortReverse' this-col='colOne'></td> <td sortable-table-header inner-type='sortType' inner-reverse ='sortReverse' this-col='colTwo'></td > <td class="check-box-label"> +<span style="color: red;"> - </td> </tr> </thead> <tr ng-repeat="item in listData.itemsInSet | orderBy:sortType:sortReverse" > <td ng-class="{limeHighlight: item.selected}" > {{item[colOne]}} </td> <td> {{item[colTwo]}} </td> <td> <input type="checkbox" ng-model=item.selected ng-click="listData[checkAction](item)"> </td> </tr> </table> </code></pre> </div> You’ll see that I have yet another directive, the <sortable-table-header> directive, nested withing the <sortable-table> directives.</sortable-table></sortable-table-header> That inner hidden directive is passed a column name to label the column from the parent parameter. <ul> <li>the single quotes around ‘colOne’ passes teh value of ‘colOne’, not the string “colOne”.</li> <li>to retrieve the column information using that dynamic parameter, use bracket notation.</li> </ul> **By breaking out the header elements further, we cleans out the repeated glyphicon references. Even more importantly it is a step towards being able to iterate over an array of column names to accommodate a variable number of columns using a single directive. ** A developer won’t need to know the internal hand-off as it is encapsulated within the outer tags like a DSL. For good measure though, here is the internal working: <div class="language-js highlighter-rouge"><pre class="highlight"><code>// js/sortable-2col-header.js angular .module('demo-directive-app') .directive('sortableTableHeader', sortableTableHeader); function sortableTableHeader(){ return { scope: { thisCol : "=thisCol", innerReverse : "=innerReverse", innerType : "=innerType" }, templateUrl: 'templates/sortable-table-header-cell.html' }; }; </code></pre> </div> <div class="language-html highlighter-rouge"><pre class="highlight"><code> <table id="all-performer-table" class="table table-bordered table-striped"> <thead > <tr> <td ng-repeat="label in colsLabels"> <a href="" ng-click=" $parent.sortCol == $parent.colsDisplayed[$index] ? $parent.sortDesc = !$parent.sortDesc : $parent.sortCol = $parent.colsDisplayed[$index]" > {{label}} <span ng-show="$parent.sortCol == $parent.colsDisplayed[$index] && $parent.sortDesc" class="fa fa-caret-down"> <span ng-show="$parent.sortCol == $parent.colsDisplayed[$index] && !$parent.sortDesc" class="fa fa-caret-up"> </a> </td > <td class="check-box-label"> + <span style="color: red;"> - </td> </tr> </thead> <tr ng-repeat="item in itemsInSet | orderBy:sortCol:sortDesc" > <td ng-repeat="col in colsDisplayed" ng-class="{limeHighlight: item.selected}" > {{$parent.item[col]}} </td> <td> <input type="checkbox" ng-model=item.selected ng-click="$parent.checkAction(item)" > </td> </tr> </table> </code></pre> </div> I hope these examples might help someone toying with the same issues out. Note that last line! <div class="language-javascript highlighter-rouge"><pre class="highlight"><code> <input type="checkbox" ng-model=item.selected ng-click="$parent.checkAction(item)" > </code></pre> </div> That might have been worth reading this blog entry alone if you’d been in a pinch. (LOL). I could point out more in the template above, but most of it is basic sorting and filtering mechanisms that make AngularJS so easy to use for state centric displays. I will -not- share the two controllers code with you. They’re very basic scaffolds to let the demo actually do something when you click. Again, <a class="markdown-external-link" target="_blank" href="http://rankarooski.com/#/angular-directive-demo">check out the live demo</a> And/Or you can check out the entire little sandbox in this <a class="markdown-external-link" target="_blank" href="https://github.com/Tom2277/angularjs-custom-directive-demo">angularjs-custom-directive-demo GitHub repository</a>. Within that Repo you can check out a few earlier iterations, AND check out my more extensive and ambitious handlebars solution to the same types of displays but with more robust and reusable controllers and interesting approaches to making the pages maintain display state without watches and two way binding. Post on that will be linked here soon!. Angularjs Cors Template Error 2017-02-28T00:00:00-08:00 http://tomnorian.com/AngularJs-CORS-Template-error If you’re like me you often learn new technologies by doing while you read the manuals. In re-exploring the preferred syntax for AngularJS directives, I was coding along with their <a class="markdown-external-link" target="_blank" href="https://docs.angularjs.org/guide/directive">developer guide</a> . I found that my Chrome browser was throwing cross origin errors when using simple examples like: <div class="language-javascript highlighter-rouge"><pre class="highlight"><code> .directive('myCustomer', function() { return { restrict: 'E', templateUrl: 'templates/sortable-table.html' }; }); </code></pre> </div> The dev-tools console error: <div class="highlighter-rouge"><pre class="highlight"><code> XMLHttpRequest cannot load file:///Users/tomnorian/Documents/tutorials/demo-code/templates/sortable-table.html. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource. </code></pre> </div> I hadn’t had this problem in the past as I was usually running a NodeJS or Rails server…but when you’re learning code in the sandbox it might just be you and your sleek code editor.  I came across this StackOverflow thread which is still <a class="markdown-external-link" target="_blank" href="http://stackoverflow.com/questions/27742070/angularjs-error-cross-origin-requests-are-only-supported-for-protocol-schemes">a good resource for this CORS issue</a>. The problem seems to be more isolated to Google Chrome, although at it’s essence they are putting in a good security constraint on the browser. The best work-arounds from the thread were to serve your static development project, or use an IDE that does, rather than relying on simply opening the HTML pages directly as you usually can. A really nice open source tool is created and maintained here: <a class="markdown-external-link" target="_blank" href="https://github.com/indexzero/http-server">http-server:a command-line HTTP server</a> If you have node installed on your development machine all you need to do is: <div class="language-bash highlighter-rouge"><pre class="highlight"><code> npm install http-server -g </code></pre> </div> to use it their directions are: <div class="language-bash highlighter-rouge"><pre class="highlight"><code> http-server [path] [options] </code></pre> </div> More explicitly: <ul> <li>you can simply navigate to the folder of your project you would like to serve and then type ‘http-server’ in your bash terminal to have that directory you are in served as a root.</li> </ul> What you’ll see: <div class="language-bash highlighter-rouge"><pre class="highlight"><code> demo-code :> http-server Starting up http-server, serving ./ Available on: http://127.0.0.1:8080 http://10.0.0.5:8080 Hit CTRL-C to stop the server [Wed Mar 01 2017 11:30:13 GMT-0800 (PST)] "GET /index.html" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_10_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/56.0.2924.87 Safari/537.36" </code></pre> </div> Open your browser to http://127.0.0.1:8080 and if you have a index.html file it will be served to you; or type in the filenames (with additional relative paths, if nested) to see them. That quickly got me around the Chrome CORS issue and onto working AngularJS directive templates; working directly from Sublime Text 2 and Chrome. This post is mostly to give those guys working on the http-server some well deserved love! A Liquid Tag Cloud For Jekyll Blogs 2017-02-21T00:00:00-08:00 http://tomnorian.com/a-liquid-tag-cloud-for-jekyll-blogs Even though Jekyll is a “static” site generator, with a little ingenuity you can give add many rich features to the generated site. I wanted a tag-cloud! A good tag cloud. You know, one where the tags showed the number of posts next to them as well as growing in size according to the number of posts. One like you see to the left or in the lead image of this post.(yay!) I also wanted a tagging system that allowed me to combine tags for posts and tags in Jekyll collections: the built-in Jekyll category and tag system doesn’t currently handle tags in collections. To create an across all posts and an across all collections tag system just requires a name other than ‘tags’. You’ll use that custom-tag name in front matter array just as you would add the standard tags to a post.  Using a custom tag system does lead to some extra looping as you’ll see below. As this tagging system does not use plugins, I believe it could work on a GitHub deployment… no promises there.( I would love to hear if it works at GitHub, though ) Issues and Apologies Everything I’ve learned and all my gut wants me to use a hash-map, create the view-partial only once, and keep the time complexity, “big O” to a reasonable level. This solution, forced by the limitations of Jekyll and Liquid in their pursuit of simplicity, loops over every post numerous times. There is the nested loop of looking at every content item for each unique tag after we’ve also loop through all the posts to find unique tags. Clearly a hash tags as keys and values comprised of arrays of associated posts would take a single pass with a second pass to render the tags of various sizes and item counts. If I had used their tag system it could have been a few steps more efficient(but again, that wouldn’t work for collection-tags) Even worse, (yes it gets worse), the generator recreates the the tag map for each page….we’re almost looking at O cubed. Why haven’t I found a work around for that? I could use a plugin to find the unique tags and set an environmental variable for that. There are also techniques to generate the tag-cloud once using rake or gulp, or even just generate a static page onto a blank layout normally and cutting and pasting it into an _include. To some degree, the simplicity is part of the Jekyll philosophy. These posts might stimulate thoughts on better work-arounds and I’d love to hear ideas. <a class="markdown-external-link" target="_blank" href="http://stackoverflow.com/questions/30523270/jekyll-generate-an-include-once-and-include-it-to-all-pages">Generate an _include file Once at StackOverflow</a> and <a class="markdown-external-link" target="_blank" href="https://github.com/jekyll/jekyll/issues/5868">Define and Compute custom Variables at the Jekyll Github Repository</a>. It would be really nice to be able to us a plugin generate an “_include” or YAML data file. In the end, this current method will work with the number of posts I anticipate making while maintaing the basic Jekyll work-flow. Because we’re generating a static site none of the redundant calculations will effect client experience, there is no database load(as there isn’t one), and it is certainly more simple for non-developers to use. If the number of posts scaled to the point that the generation was impeding workflow, it would be easy enough to comment out the tag-cloud generation for all but the times you were going to push your new content to a production server. On to the code: The comments should explain how it works: <div class="language-html highlighter-rouge"><pre class="highlight"><code>  {% assign many_tags = '' | split: ',' %} {% assign unique_tags = '' | split: ',' %}  {% for c in site.collections %}  {% assign collectionTags = c.docs | map: 'subject-tags' | join: ',' | split: ',' %}  {% for tag in collectionTags %} {% assign many_tags = many_tags | push: tag %} {% endfor %} {% endfor %}  {% assign unique_tags = many_tags | uniq | sort %} <div class="tag-cloud">  {% for cloud-tag in unique_tags %}  {% assign tags_posts = '' | split: ',' %}  {% for c in site.collections %}  {% for content-item in c.docs %}  {% for subtag in content-item.subject-tags %}  {% if subtag == cloud-tag %} {% assign tags_posts = tags_posts | push: content-item %} {% endif %} {% endfor %} {% endfor %} {% endfor %}   {% assign tag-quant = tags_posts | size %} {% if tag-quant < 3 %} {% assign tag-cloud-size = "tag-cloud-size-1" %} {% elsif tag-quant < 5 %} {% assign tag-cloud-size = "tag-cloud-size-2" %} {% elsif tag-quant < 8 %} {% assign tag-cloud-size = "tag-cloud-size-3" %} {% elsif tag-quant < 12 %} {% assign tag-cloud-size = "tag-cloud-size-4" %} {% elsif tag-quant < 18 %} {% assign tag-cloud-size = "tag-cloud-size-5" %} {% else %} {% assign tag-cloud-size = "tag-cloud-size-6" %} {% endif %}   {% if tag-quant > 0 %}  <a href="/site-index.html#{{ cloud-tag|slugify }}"> <span class="tag-cloud-full-tag" > <span class="tag-cloud-title {{tag-cloud-size}}">{{cloud-tag}} <span class="tag-cloud-quantity">({{tag-quant}}) </a> {% endif %} {% endfor %}  </div> </code></pre> </div> Yes, there are a lot of loops in there, and like I mentioned in the preceding section, we do this for every page with a tag cloud on it. If I were going to have thousands of pages I would create a static page, with or without a plugin, and do the cut and paste hack I mentioned. There are also a number of contortions to fit Liquid quirks like the technique of initiating the empty arrays to push to and the use of finding the size of an array of objects rather than an incrementing variable. You’ll note that the tags are links to the tag location on an index page. CSS: <div class="language-css highlighter-rouge"><pre class="highlight"><code>.tag-cloud{ margin: 0px 0px 0px -5px; position: relative; } .tag-cloud-full-tag{ transform: scale(1.0); transition: all 525ms ease-out; display: inline-block; padding: .1em; border-radius: 4px; position: relative; } .tag-cloud-full-tag:hover{ transform: scale(1.35); background-color: $main-background; opacity: 1; z-index: 600; } .tag-cloud-title{ padding: 0px; } .tag-cloud-size-1{ font-size: .7em; } .tag-cloud-size-2{ font-size: .9em; } .tag-cloud-size-3{ font-size: 1.1em; } .tag-cloud-size-4{ font-size: 1.25em; } .tag-cloud-size-5{ font-size: 1.5em; } .tag-cloud-size-6{ font-size: 1.7em; } .tag-cloud-quantity{ font-size: .5em; margin-left: -.2em; z-index: 700; } </code></pre> </div> Do you want the index page too? <div class="panel-group"> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <button data-toggle="collapse" data-target="#index-page-code"> Site-Index page code </button> </h4> </div> <div id="index-page-code" class="panel-collapse collapse"> <div class="panel-body"> <div class="language-html highlighter-rouge"><pre class="highlight"><code> --- layout: side-nav page-label: Site Index permalink: /site-index.html --- {% assign many_tags = '' | split: ',' %} {% assign unique_tags = '' | split: ',' %} {% for c in site.collections %} {% assign collectionTags = c.docs | map: 'subject-tags' | join: ',' | split: ',' %} {% for tag in collectionTags %} {% assign many_tags = many_tags | push: tag %} {% endfor %} {% endfor %} {% assign unique_tags = many_tags | uniq | sort %} {% for index-tag in unique_tags %} {% assign tags_posts = '' | split: ',' %} {% for c in site.collections %} {% for item in c.docs %} {% for subtag in item.subject-tags %} {% if subtag == index-tag %} {% assign tags_posts = tags_posts | push: item %} {% endif %} {% endfor %} {% endfor %} {% endfor %} {% assign tag-quant= tags_posts | size %} {% if tag-quant > 0 %} <div id="{{ index-tag|slugify }}" class="subject-tag-container well well-sm" > <div class="site-index-label"> <h2> {{index-tag}} <span class="badge">{{ tags_posts | size }} <a href="#{{index-tag|slugify}}"> <i class="site-index-target-toggle fa fa-plus-square pull-right" aria-hidden="true"> </a> </h2> </div> <table> {% for content-item in tags_posts %} <tr> <td> <img src="../images/{{content-item.lead-image}}" alt=""> </td> <td> <a href="{{content-item.url}}"> <div class="site-index-title"> {{content-item.post-title}} </div> <div class="site-index-subtitle"> {{content-item.subtitle}} </div> </a> </td> </tr> {% endfor %} </table> </div> {% endif %} {% endfor %} </code></pre> </div> And then there is the SCSS (not currently in pure CSS form) Note the use of the :target pseudo element. <div class="language-scss highlighter-rouge"><pre class="highlight"><code>.site-index-label{ h2{ padding-top: 0px; margin-top: 0px; .site-index-target-toggle{ display: initial; font-size: .7em; } } } .subject-tag-container{ width: 300px; font-size: .9em; transition: all 525ms ease; background-color: $main-background; display: inline-block; li{ list-style-type: none; } img{ display: none; } &:target{ box-shadow: 5px 5px 5px $title-text; width: 600px; font-size: 1.2em; a{ color: $link-two; &:hover{ color: $link-hover; } } img{ display: initial; width: 80px; padding: 10px 0px; } .site-index-target-toggle{ display: none; } } tr{ padding-bottom: 1em; } .site-index-title{ // font-size: .8em; padding-left: 1em; } .site-index-subtitle{ font-size: .8em; padding-left: 2em; } } </code></pre> </div> </div> <div class="panel-footer">Cheers!</div> </div> </div> </div>  ….for a completely cheesy finish: Hover over this: <div class="demo-thats-all-container"> <div class="demo-thats-all-folks"> That's All Folks </div> </div> Toggle Code Display Jekyll 2017-02-20T00:00:00-08:00 http://tomnorian.com/toggle-code-display-jekyll In a previous post I described how you can use variables in ‘_includes’. I took advantage of those variables to create a ‘widget’ that allowed something similar to extending liquid with a plugin created tag. In this post I take the same approach to create a widget that creates a data-toggle element to hide blocks of code or text you might only want available to readers on demand. (demo follows later) We’re already using Bootstrap through-out the template we may as well use their tool here as well. Behind the scenes Bootstrap uses JQuery so this isn’t a pure HTML solution but it is an easily reusable element you can access directly while creating markdown content. I’ve gave the ‘widget’ a name of toggle-field.html and placed it within a ‘widgets’ folder inside the _includes folder. Directions: This is how you use the ‘widget’: <div class="language-html highlighter-rouge"><pre class="highlight"><code> {% capture text-capture %} ```html <div class="demo-thats-all-container"> <div class="demo-thats-all-folks"> That's All Folks </div> </div> \```  {% endcapture %} {% include widgets/toggle-field.html toggle-name="toggle-thats" button-text="Cod for Thats All Folks" toggle-text=text-capture footer="cheers!" %} </code></pre> </div> where: <ul> <li>button allows for a custom button name (defaults to “Open” if omitted) </li> <li>toggle-text is the markdown text that is captured between the curly liquid brackets</li> <li>footer is for an optional label in the toggle block footer.</li> </ul> how ‘capture’ works: As you can see in the code screen-shot, you’ll need to use Jekyll’s ‘capture’ variable assignment via the liquid capture tags. I use the shorthand notation of three ‘`’s for code blocks, but that is just standard markdown and any markdown, will work between the capture and endcapture tags. Copy, paste and substitute content and you’ll have toggle-blocks quickly accessible. Here is the above code in action: <div class="panel-group"> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <button data-toggle="collapse" data-target="#toggle-thats"> Code for Thats All Folks </button> </h4> </div> <div id="toggle-thats" class="panel-collapse collapse"> <div class="panel-body"> <div class="language-html highlighter-rouge"><pre class="highlight"><code> <div class="demo-thats-all-container"> <div class="demo-thats-all-folks"> That's All Folks </div> </div> </code></pre> </div> </div> <div class="panel-footer">cheers!</div> </div> </div> </div>  This second example show’s that this toggle ‘widget’ with any markdown…not just code-blocks. <div class="panel-group"> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <button data-toggle="collapse" data-target="#toggle-two"> This Toggle has no Code </button> </h4> </div> <div id="toggle-two" class="panel-collapse collapse"> <div class="panel-body"> <h3 id="the-rain-in-spain-falls-mainly-on-the-plain">The rain in Spain falls mainly on the plain.</h3> <ul> <li>How much wood could a woodchuck chop if a woodchuck could chop wood?</li> </ul> </div> <div class="panel-footer">See, no Code</div> </div> </div> </div>  <hr /> Behind the scenes, this is the ‘_includes/widgets/toggle-field.html’ ‘widget’ : <div class="language-html highlighter-rouge"><pre class="highlight"><code> <div class="panel-group"> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <button data-toggle="collapse" data-target="#{{include.toggle-name}}" > {% if include.button-text %} {{include.button-text}} {% else %} Open {% endif %} </button> </h4> </div> <div id="{{include.toggle-name}}" class="panel-collapse collapse"> <div class="panel-body">{{include.toggle-text | markdownify }}</div> <div class="panel-footer">{{include.footer}}</div> </div> </div> </div> </code></pre> </div> Note the use of the humorously(to me at least) named liquid filter ‘markdownify’ which translates the captured markdown. Why? Does this really make writing a blog easier? While writing a blog using Jekyll doesn’t have a flashy GUI, getting accustomed to markdown isn’t hard. It is true that more of these ‘widgets’ you use, the more Domain Specific Languages you have to remember. That said, these things like inline photos and toggle text boxes take a bit of a learning curve even within a fancy CMS. Keep the code snippets easy to copy and paste and fill in the variables: the extra media in your posts really helps. Variables In Jekyll Includes 2017-02-17T00:00:00-08:00 http://tomnorian.com/variables-in-jekyll-includes Custom reusable ‘_includes’ - Alternatives to Plugins This Jekyll Template uses a few ‘plugins’. We have one plugin to allow markdown snippets to be included in HTML pages, and another for external links. While plugins like those let you use custom Liquid tags in your markup, I have a few issues with them. It took a lot of parsing to separate values you want to pass. The custom parsing also made it harder to extend those plugins, and lastly, you had to remember a lot more syntax when utilizing the tags That all lead me to think, “there has to be a better way”. I wanted to be able to pass data using mutiple variables and it turns out you can do just that. We learn by Googling and Experimenting. My first Widget I’m not sure what to call this sort of reusable _include, but “widgets” works well enough. I needed to call them something to keep the includes directory tidy. In Googling the use of variables within ‘liquid’ tags, I cam across <a class="markdown-external-link" target="_blank" href="http://stackoverflow.com/questions/19331362/using-an-image-caption-in-markdown-jekyll">this StackOverflow post</a> on how to include a caption on a photo.  I wanted to do was similar: creating way to put inline photo’s within my markdown in a way that I could easily not only include caption and ‘alt’ fields, but also adjust the width of a photo. It turned out to be a very straightforward thing to do that really makes it easier to have more media within a post. How to use variables with includes It’s simple. Here is a standard _include that you might use to insert your site title and slogan partial named ‘title-group.html’ <div class="language-markdown highlighter-rouge"><pre class="highlight"><code> {% include title-group.html %} </code></pre> </div> You could pass that ‘title-group.htm’ a variable to customize that slogan. <div class="language-markdown highlighter-rouge"><pre class="highlight"><code> {% include title-group.html custom-slogan="whatever you say dude" %} </code></pre> </div> Now, before moving to how that works lets consider the limitations of basic markdown images. Here is how you can use the most basic markdown image tag: <div class="language-markdown highlighter-rouge"><pre class="highlight"><code> ![alt text](https://github.com/adam-p/markdown-here/raw/master/src/common/images/icon48.png "Logo Title Text 1") </code></pre> </div> But, what if you want to change it’s width or add a caption? And, without a class, you’d have a hard time styling those inline images. Here’s the solution I came up with. Directions for inserting Inline images in your blog posts Cut and paste the code below and substitute and delete as desired: <div class="language-markdown highlighter-rouge"><pre class="highlight"><code> {% include image-inline.html url="/images/subfolder-in-images/filename.png" width="33%" alt=page.post-title caption="whatever you want here(or nothing)" class="optional-further-styling-class" %} </code></pre> </div> <ul> <li> url is the path to the image </li> <li> width is a string with a number and the ‘%’ symbol (“100%” will span the full text collumn, “33%”” will have blog text wrap around the third it takes up) </li> <li> url is what screen readers see as well as having important SEO ramifications. You can set it with front matter like I did or include custom text like “whatever words give me the best Google score” </li> <li> caption is a bold lable text directly beneath the photo. Like with “alt” you could use front matter instead. </li> <li> class another optional, field, this would help you style different types of inserts(maybe you wanted all table images have a border?). </li> </ul> <hr /> If you just want to use this feature you don’t need to read the rest of this: follow the instructions in the section immediately above. HTML: Here is the markup that the using the “image-inline.html” include ‘widget’ will generate: <div class="language-html highlighter-rouge"><pre class="highlight"><code> <span class="tn-image-inline {{include.class}}" style="width:{{include.width}}"> <img src="{{ include.url }}" alt="{{ include.alt }}" title="{{include.caption}}" width="100%"> <label class="tn-image-inline-caption">{{ include.caption }}</label> </code></pre> </div> CSS: <div class="language-css highlighter-rouge"><pre class="highlight"><code>.tn-image-inline{ position: relative; display: inline-block; float: left; padding: 0px 20px 0px 0px; text-align: center; } </code></pre> </div> I’m really glad I can use Jekyll create these reusable widgets. They do walk a line towards expanding the liquid domain specific language but short of a GUI on a CMS, it’s a very simple way to go. In another post I show how to use the same concept to <a href="/toggle-code-display-jekyll.html">create togglable page sections</a> Css Only Tootips 2017-02-15T00:00:00-08:00 http://tomnorian.com/css-only-tootips There are countless tricks to add a little motion to the page CSS and HTML alone; while I love JavaScript and JQuery, if you can find a native CSS solution it is good practice to take it. I’m not a web-designer so, perhaps it’s silly for me to even post on this. There are terrific references out there on the web and these are pretty basic. Still, because I used these within this blog’s Jekyll template, I thought I’d point out how they work. None of the code below requires Jekyll. Hover over the portions of the sentence below(I’ll explain the code after): <div class="demo-swell-tooltip"> <div>Demo:</div> See something SWELL. <div class="demo-tooltip-trigger"> The modal box tool-tip is on the top right on this one. <div class="demo-tooltip"> This tool tip is in absolute position to the parent 'div'. </div> </div> <div> No, the text around the resized items doesn't move! </div> </div> With the use of “_includes” and Jekyll variables you can use front matter to populate more complex ‘flyouts’ like I use on my “about-me” page. Both of the above examples are really simple. HTML: There really isn’t anything to this, other than the nested tool-tip div which will be hidden until the hover pseudo-class triggers:  <div class="language-html highlighter-rouge"><pre class="highlight"><code><div class="demo-swell-tooltip"> <div>Demo:</div> <span class="demo-flyout-left"> See something SWELL. <div class="demo-for-top-right"> The modal box tool-tip is on the top right on this one. <div class="demo-tooltip"> This tool tip is in absolute position to the parent 'div' </div> </div> <div> No, the text around the resized items doesn't move! </div> </div> </code></pre> </div> CSS: Be sure to make the span container: <code class="highlighter-rouge">position: relative</code> and <ul> <li> If you’d like it smooth, use a transition effect like ‘ease’: <code class="highlighter-rouge">transition: all 525ms ease;</code> </li> <li> for the ‘swelling’ technique to transition both ways set the initial scale to 1 <code class="highlighter-rouge">transform: scale(1.0);</code>. </li> </ul> On the :hover pseudo-class all you really need for the ‘swelling’ is <ul> <li>the size you want to increase to <code class="highlighter-rouge">transform: scale(2.7);</code></li> <li>and to be sure to set the z-index in front of the other content if you use a background color especially <code class="highlighter-rouge">z-index: 600;</code></li> </ul> Here is the CSS for the swell effect including some stying for a change in color Note the class name and hover syntax: <div class="language-css highlighter-rouge"><pre class="highlight"><code> .demo-flyout-left{ color: green; position: relative; transform: scale(1.0); display: inline-block; transition: all 525ms ease; } .demo-flyout-left:hover{ color: red; background-color: white; transform: scale(2.7); z-index: 600; } </code></pre> </div> <hr /> CODE: for a simple tool-tip: Here I’m using the “absolute” property as well as “display: none” to reveal the tool tip upon hovering over a trigger “”. Note: you also have choices of hiding the elements with <code class="highlighter-rouge">opacity: 0</code> or <code class="highlighter-rouge">visibility: hidden</code> as alternatives to the <code class="highlighter-rouge">display: none</code> I use here. Here is a <a class="markdown-external-link" target="_blank" href="http://stackoverflow.com/questions/272360/does-opacity0-have-exactly-the-same-effect-as-visibilityhidden/273076#273076">discussion of the rendering differences at StackOverflow</a> HTML: Again, the HTML is very simple: <div class="language-html highlighter-rouge"><pre class="highlight"><code> <div class="demo-tooltip-trigger"> The modal box tool-tip is on the top right on this one. <div class="demo-tooltip"> This tool tip is in absolute position to the parent 'div' </div> </div> </code></pre> </div> CSS: The CSS is also very simple but, like CSS can be, it’s that ‘one thing’ you miss that gets you. The container or “trigger” span or div must be <code class="highlighter-rouge">position: relative</code> as well as an ‘display:inline-block’ element to give the position absolute something to anchor onto. You can then display the styled tooltip at offsets to the left, right, top, or bottom of the trigger block. (you’ll likely want to add a width, border, different colors too) As for the “trigger”, we use the CSS pseudo-element :hover again. The tooltip is initially hidden using <code class="highlighter-rouge">display:none</code> and drawn (see linked discussion) by changing the tip CSS to <code class="highlighter-rouge">display:inline-block</code> on hover. <div class="language-css highlighter-rouge"><pre class="highlight"><code> .demo-tooltip-trigger{ color: navy; position: relative; display: inline-block; } .demo-tooltip{ display: none; } .demo-tooltip-trigger:hover .demo-tooltip{ color: black; background-color: white; border: 1px solid black; border-radius: 4px; font-size: .75em; padding: 5px; z-index: 600; display: inline-block; position: absolute; width: 160px; bottom: .75em; } </code></pre> </div> Well, again, I’m not a designer and I haven’t broken any new ground here. That being said, from personal experience, I know it sometimes helps to see another example a specific use case. Now, ….for a completely cheesy finish: Hover over this: <div class="demo-thats-all-container"> <div class="demo-thats-all-folks"> That's All Folks </div> </div> <div class="panel-group"> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <button data-toggle="collapse" data-target="#toggle-thats-all"> Code for Thats All Folks </button> </h4> </div> <div id="toggle-thats-all" class="panel-collapse collapse"> <div class="panel-body"> <div class="language-html highlighter-rouge"><pre class="highlight"><code> <div class="demo-thats-all-container"> <div class="demo-thats-all-folks"> That's All Folks </div> </div> </code></pre> </div> <div class="language-css highlighter-rouge"><pre class="highlight"><code> .demo-thats-all-container{ display: block; position:relative; text-align: center; font-size: 1.5em; color: maroon; } .demo-thats-all-folks{ position: relative; display: inline-block; padding: 10px; transition: all 525ms ease; height: 100px; } .demo-thats-all-folks:hover{ font-family: cursive; transform: translateY(-5em) rotate(360deg) scale(4.0); background-color: maroon; color: white; transition: all 525ms ease; z-index: 700; border: solid 2px black; background: maroon; /* For browsers that do not support gradients */ background: -webkit-repeating-radial-gradient(circle, red, maroon 10%, black 15%); /* For Opera 11.6 to 12.0 */ background: -o-repeating-radial-gradient(circle, red, maroon 10%, black 15%); /* For Firefox 3.6 to 15 */ background: -moz-repeating-radial-gradient(circle, red, maroon 10%, black 15%); /* Standard syntax */ background: repeating-radial-gradient(circle, red, maroon 10%, black 15%); } </code></pre> </div> </div> <div class="panel-footer">cheers!</div> </div> </div> </div>  License And Directions 2017-02-14T00:00:00-08:00 http://tomnorian.com/license-and-directions <h4 id="for-alternative-access-i-include-the-read_memd-file-for-this-sites-jekyll-template-below">For alternative access, I include the READ_ME.md file for this site’s Jekyll template below:</h4> <hr /> <hr /> <hr />  <h2 id="cheap-and-easy-jekyll-blog-template-for-web-developers">Cheap and Easy Jekyll Blog Template for Web Developers</h2> <h3 id="usage">Usage</h3> Once you have Jekyll fully installed clone the repository and delete my content in Posts, and the collection folders after you’ve used them as demos. <pre><code>git clone https://github.com/Tom2277/tn-easy-weblog.io my-blog </code></pre> <h2 id="getting-started-with-jekyll-">Getting started with Jekyll ?</h2> See my links in this post: <a href="http://tomnorian.com">Jekyll Blogging for Web Developers</a> The post above discusses some of the choices I made as well as links to other posts about how some of the template features are implemented. You’ll also want to consult those external links for actual deployment. <h3 id="global-variables">Global Variables</h3> <ul> <li>Go to the _global.yml file in the _data directory and substitute in your own information <ul> <li>Note that you’ll need to switch back and forth between the base URL of your local host and your production server address when you run the server locally.</li> </ul> </li> </ul> <h3 id="front-matter-conventions-for-this-template">Front-matter Conventions for this Template</h3> <ul> <li>page-label: < optional page title that will appear in addition to the title of your post header > <ul> <li>for example Blog at the top of the blog role or Site-Index ? Attention Cat Owners for cat posts?</li> </ul> </li> <li>post-title: < insert a title you want to give a post like “Wonder Cats” ></li> <li>post-subtitle: < insert a line like “including information on feeding”></li> <li>lead-image: < image file name or URL within images folder i.e. my_photo.png or blog/my_phot.jpg > <ul> <li>This image will be displayed in post or collection item’s header and in menus*></li> </ul> </li> <li>post.excerpt is standard Jekyll functionality (It does not need to be included in front matter.) <ul> <li>on this template, insert <!–more–> within your posts to set the break point.</li> </ul> </li> <li>author: < type in name of author or creator(collection) > <ul> <li>optional: if left blank no author will appear</li> </ul> </li> <li>subject-tags: < insert an array of tags on separate lines below with a ‘-‘ in front.> <ul> <li>‘Subject tags’ bypass the Jekyll tagging and category system. I chose this custom method to allow the same tags to work with both ‘posts’ and ‘collections’</li> </ul> </li> <li>activity-tags < insert an array of tags on separate lines below with a ‘-‘ in front.> *</li> <li>website-name: < external website-name under post image if desired></li> <li>website-url: < external website full URL if desired - will open in new tab ></li> </ul> <h3 id="markdown-info">Markdown info</h3> <ul> <li>Kramdown This template uses the Kramdown flavor of mardown. Most standard markdown works</li> <li>Code Blocks Use three back ticks followed by a lower case language name, on separate lines before and after your code. <ul> <li>this template uses the pygments gem an I’ve chosen the ‘monokai’ code highlighting scheme (with a few alterations).</li> <li>you can include a different color scheme by substituting it’s scss files in the appropriate folders</li> </ul> </li> <li>See my blog for custom tags: external links, inline images, toggle code blocks, including markdown segments within HTML and more.</li> </ul> <h3 id="credits">Credits:</h3> I initially started with the Bootstrap Blog template included with <a href="https://scotch.io/tutorials/getting-started-with-jekyll-plus-a-free-bootstrap-3-starter-theme">this tutorial by Nicholas Cerminara at Scotch.io</a>. There is little left of his code although his folder structure and a few css features, including pagination, still remain. Either way, thanks are due. The entire CSS layout structure is built using Twitter’s <a href="http://getbootstrap.com/">Bootstrap</a> Most of all we need to thank the Jekyll community. You are welcome to reuse my code as per the following license. (as Twitter and N Cerminara used as well) <h2 id="the-mit-license-mit">The MIT License (MIT)</h2> Copyright (c) 2016-2017 Thomas Norian, Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. Jekyll Blog For Web Developers 2017-02-01T00:00:00-08:00 http://tomnorian.com/jekyll-blog-for-web-developers <h3 id="why-a-blog-">Why a Blog ?</h3> I’m using Jekyll to build a blog to share bits and pieces of my coding experiences. We all help each other out when we share approaches. <h4 id="why-jekyll-">Why Jekyll ?</h4> Jekyll is a tool that generates static HTML sites that have the rich features of blogs that use a CMS like Wordpress, Joomla, or Drupal. <img src="/images/blog/jekyll-logo.png" alt="Try Jekyll Out" title="" width="100%" /> <label class="tn-image-inline-caption">Try out Jekyll</label> You can deploy static HTML in a S3 bucket or using as simple web host. Many people use their free GitHub account (although there are some special circumstances for Github - but you can always push only the pre-compiled code). ‘Cheap and Easy’ is good! You don’t need to spend time with server mechanics or pay that fee for a database that might cost you a night on the town every other month.  Jekyll is written in ruby, but you really don’t need to use any ruby at all if you load a theme someone else has constructed. Use a text editor to write your content and fill in a few values for things like title, author and tags. You might want to learn something about Jekyll and “liquid”, a domain specific language, but you don’t need to to use the Template as it is. <h4 id="sites-for-learning-jekyll">Sites for Learning Jekyll</h4> I’m not going to reinvent the wheel. There are some great tutorials done by very experienced Jekyll users. To learn Jekyll and all it can do, visit: <a class="markdown-external-link" target="_blank" href="https://jekyllrb.com/">JekyllRB, the primary Jekyll site </a>. with easy to read glossaries and more. <a class="markdown-external-link" target="_blank" href="http://jekyll.tips/">JekyllTips JekyllCasts</a> is a really great beginner through intermediate site with both video and written tutorials, cheat sheets, and more. <a class="markdown-external-link" target="_blank" href="https://scotch.io/tutorials/getting-started-with-jekyll-plus-a-free-bootstrap-3-starter-theme">Scotch.IO: Getting Started with Jekyll</a> I used this tutorial on my first Jekyll projects(although it might be getting dated). I got in a few habits from what I learned there. A Google search will find you others. Find one that’s right for you. <h4 id="what-im-adding-with-this-post-a-template">What I’m adding with this post: a Template!</h4> You are welcome to use and share this template that I’m using on this blog. Once you have Jekyll fully installed,(see the external tutorials above) you can install my template available here or using the following command: ###NOT PUBLIC YET - (check back next week!) <div class="language-bash highlighter-rouge"><pre class="highlight"><code> git clone https://github.com/Tom2277/jekyll-blog-template-private.git my-blog </code></pre> </div> In other posts I will share code on how I created custom parts of the template: <a href="/license-and-directions.html">License and Directions</a> <a href="/variables-in-jekyll-includes.html">Inline Photos</a> <a href="/toggle-code-display-jekyll.html">Toggle Sections</a>