CR Rollyson

CR Rollyson is a Digital User Experience & Web Manager for a S&P 500 Fintech company and is the COO of Side Role, a marketing team in Charlotte North Carolina partnering with In-house Teams & Agencies, Non-profits, and Start-Ups. Learn more about Side Role at https://siderole.com

[crrollyson]

[Terminal] Delete All Duplicate Files, Delete Empty Folders

Delete All Duplicate Files: parenthesis example

In terminal type: “cd” including a follow space. 

In finder: drag/drop the top level folder you want to search on the terminal window. This will show the folder path

In terminal: hit enter

(optional) In terminal type: “ls” to view all folders and files.

In terminal type: find . -type f -name “*(*)*” -print. This will print a list of all the matching files found, that include any character (notated by the first *) that proceeds an open parenthesis “(”, followed by any character(s) (notated by the second * symbol), followed by a closing parenthesis “)”, followed by any character (notated by the last * symbol). -print is a common safe way to test returned results, before executing a permanent command like -delete.

Delete All Empty Folders:

In terminal type: “cd” including a follow space.

In finder: drag/drop the top level folder you want to search on the terminal window. This will show the folder path

In terminal: hit enter

(optional) In terminal type: “ls” to view all folders and files.

In terminal type: find . -type d -empty -print. This will print a list of all the matching folders (directories) that are empty within the specified folder (directory) being searched. -print is a common, safe way to test returned results, before executing a permanent command like -delete.

Command definition for completeness:

cd = change directory

ls = list contents of specified directory

find . = dot represents the current directory. (Some versions of find require that you provide a path argument)

-type = find files of type

f = f is shorthand for file

d = d is shorthand for directory

-name = searching file names

“*whatever_you_are_looking_for*” = * allows a match to any character proceeding or following the match character(s) within the regex

-empty = finds folders (directories) that are empty / contain no files

-print = will print a list of files returned from the search

-delete = replace -print with -delete to remove all found files

[crrollyson]

Responsive CSS option to center a button vertically and horizontally

DATA-UI Responsive Center Button in Div 

Author: CR Rollyson @crrollyson

There are a lot of options when it comes to dev. A lot of options are compilations of trial and error discovery, compiled from multiple brains and multiple skill levels. Coding is opinionated and full of avenues. I try to offer clarity when possible. Here is my favorite responsive solution:

Details: Responsive CSS option to center a button vertically and horizontally without being concerned with parent element size (using data attribute hooks for clarity and separation concerns).

HTML

<div data-element="card"> <div data-container="button">   <button>CTA...</button> </div> </div>

CSS

[data-element="card"] {  background: #ff9900; //just for visual  height: 100%; // just for visual  width: 100%; // just for visual }

[data-container="button"] {  position: absolute;  top: 50%;  text-align: center;  width: 100%; }

Fiddle: https://jsfiddle.net/crrollyson/zebo1z8f/ Stack Overflow: http://stackoverflow.com/a/42236237/2903963

[crrollyson]

“Trello and The Markdown Syntax” – indie of the year, exclaims Brooklyn Vegan!

Trello rules.

Learning a few of these stylistic options, you too can feel great enough to stop working and write a blog about it!

Syntax for card descriptions, comments, checklist items, and your bio:

Bold text: Mark text in double asterisks, like **this**, to make it bold.

Italic text: Mark text in single asterisks, like *this*, to make it italic.

Links: [this is a link](http://www.trello.com).

Horizontal line: ---

Code block - four spaces at the start

Indent text / Block Quotes: >

All the goods – http://help.trello.com/article/821-using-markdown-in-trello

[crrollyson]

Having Dual Monitor Dock Issues on your Mac?

Dual monitors are great. Having to control one monitor from another is not so great. For instance, accessing the toolbar of the program you are feverishly corralling ...

So to make it easy on Mac: 

Set Both displays feature the toolbar and have separate spaces (windows will not shared between screens – good if you move from dual to single a lot):

System Preferences » Mission Control

Check “Displays have separate Spaces” 

Restart

Or if you want to change which screen has the default Dock and toolbar

System Preferences » Displays

Click “Arrangement” in the toolbar

Drag the white bar to the preferred display

[crrollyson]

Microsoft Word Convert Special Characters to web ready UTF-8

This is useful if you are receiving Word docs for web copy. Often the encoding is different between programs and copying from one to paste into another can render oddities in the browser. 

café when it should be café.

Example Mac Word:

Open the file

File > “Save As”

File Format: Plain Text (.txt)

Save – (File Conversion window opens)

Select “Other encoding” radio option

Choose “Unicode (UTF-8)”

Select “Allow character substitution” Option

Click “OK”

Open in text editor

[crrollyson]

Visual walkthrough of removing outdated recurring meeting invites from your Mac Outlook calendar

[crrollyson]

Javascript Get Scroll/Wheel Direction

document window has a “wheel” event. Nothing beats the practice of exploring the browser console to see what information is readily available. 

console logging the wheel event returns a lot of useful info, including direction via deltaY. This number either increases positively or decreases negatively.  

The code:

Add event listener (do something special for Internet Explorer because it’s special)

if(window.addEventListener){  addEventListener('wheel', whichDirection, false); } else if (window.attachEvent) { // ie  attachEvent('wheel', whichDirection, false); }

Create function (naming the parameter ‘event’ is good practice offering clarity)

function whichDirection(event){  console.log(event + ' WheelEvent has all kinds of good stuff to work with');  var scrollDirection = event.deltaY;  if(scrollDirection === 1){    console.log('meet me at the club, going down’, scrollDirection);  } else if(scrollDirection === -1) {    console.log('Going up, on a tuesday’, scrollDirection);  } }

Using jQuery (the function remains the same)

$(window).on('wheel', function(){  whichDirection(event); });

Throttle / Debounce:

Watch this in the console, you’ll see the WheelEvent firing over and over. Check out David Walsh’s article on creating a Debounce Function. You’ll be up and running with some hotness in short order. 

Response Given to Stack Overflow Question here

[crrollyson]

User Input, Regex, Linguistics, and the Power of the Internet

I have been working on a new app and as it tends to happen, a routine requirement (parsing user input) quickly became a 2 day conundrum. 

I considered the parsing task complete over the weekend and rewarded myself with a swim in the ocean and a delicious IPA. But then... 

All hail/Ah hell... User Input! 

As a quick reference/aside, User Input is like the hair of my sister’s high school boyfriend – unpredictable and sometimes unkempt (see: 80′s Jon Bon Jovi).

Over the past few mornings (mornings start proportionately earlier as a task becomes a roadblock), I hit a wall trying to figure out how to simply get around a common task:

Task: Split user input by multiple common separators: commas, tabs, spaces, linebreaks/returns, semicolons, colons (some people are into that) Example: User enters names: Tom Tomato, Tim Tomillio, Todd Thoas Solution: Javascript’s handy Split() Method Output As:  • Tom Tomato • Tim Tomillio • Todd Thoas

Easy enough.

“But wait”, my wife seems to eagerly point out, “What if I want to enter a formal name that includes a shortened version or a nickname... like yours?” F. Touché ladybird, touché. 

Okay, so shouldn’t be that hard: 

Updated Task: Modify the parser to account for common ways people type these out.  Example: Thomas (Tom, Tmoney), Timothy (Tim Timmy), Todd (Toodles)  Solution: ... many attempts ... many failures. 

What’s the issue? 

Todd (Toodles), – None. Passes easily. The match finds the comma and separation is correct.

Timothy (Tim Timmy), – One. The space after “(Tim” is causing “Timmy)” to output separately. So we remove the option in our split of separating User Input by spaces, the match finds the comma and separation is correct. Sweet.

Thomas (Tom, Tmoney), – One and it becomes a bricklayer. The match ignores the space between “(Tom,” and “Tmoney),” – so that is a success. However, the match finds the comma between "(Tom”, and “Tmoney)” and outputs “Thomas (Tom’ and “Tmoney)” separately. Turns out, this is the jackleg.

So what is the issue?

Commas in development are cunning Linguists!

Commas are one of the (if not the most) common separators in the history of User Input. This is not based on facts, but more a logical assumption. So they are here to stay. 

This led to a series of clever attempts, scientific regular expression theory, work-around hacks, brute force, and finally a resolve thanks to the brilliant mind of this regex genius who was kind enough to help someone who was in a similar situation.

Avinash’s Regex Solution:

,(?![^()]*(?:\([^()]*\))?\))

His Regex Explanation:

// ,            ',' // (?!          look ahead to see if there is not: //   [^()]*     any character except: '(', ')' (0 or more times) //   (?:        group, but do not capture (optional): //     \(       '(' //     [^()]*   any character except: '(', ')' (0 or more times) //     \)       ')' //   )?         end of grouping, ? after the non-capturing group makes the whole non-capturing group as optional. //   \)         ')' // )            end of look-ahead

His Example on Regex101 His Answer on Stack Overflow

The implementation that works for my particular brickhouse:

var cleanUserInput = str.replace(/,(?![^()]*(?:\([^()]*\))?\))/gm, '\r'); return cleanUserInput.split(/[\r\n;]+/);

[crrollyson]

[].forEach, Todd Motto, & coding with intent

If you are a front end developer, you most likely know and appreciate Todd Motto. I do for sure. A while back (2014) he blogged about his opinion on using forEach and how he thought it was a hack [read here]. Below are my thoughts on his article and a differing view on coding with intent. 

Realize this is an older post, but isn't using the forEach function considered coding with intent – as it is meant to be used with an object collection? From the docs: "Invokes the iterator function once for each item in obj collection, which can be either an object or an array..." The only issue I see, is your choice in trying to use it for arrays that are not object collections. At your status, declaring this to be a hack because you don't like it, is misleading and misguidance for folks who are not as advanced in the understanding of good code practices. The forEach function is not intended to replace a "for loop", it is specifically for working with objects. By coding with intent, other developers can quickly understand what data is being worked on. And there is nothing hip or hipsterish about coding.

[crrollyson]

Get dynamic values from Angular-Material md-radio-group

Situation: Advanced Angular-Material Form with multiple elements, each having radio groups (basic but complete setup)

Setup: Angular, Angular-Material, “md-radio-group”, “controller as”

Output: console.log selected radio options

Get after it:

HTML

<form name="myForm" ng-controller="DataController as data" ng-submit="submit(data)" novalidate ng-cloak>    <table>        <thead>            <tr>                <th rowspan="2">SOLUTIONS</th>                <th colspan="3">EVALUATIONS PLANNED</th>            </tr>            <tr>                <th>CONDUCTING RESEARCH</th>                <th>PLAN FIRST-TIME IMPLEMENTATION</th>                <th>PLAN TO REPLACE EXISTING SOLUTION</th>            </tr>        </thead>        <tbody ng-repeat="data in data.solutions">            <tr>                <td colspan="4">{{data.name}}</td>            </tr>            <tr ng-repeat="item in data.solutions">                <td>{{ item.product }}</td>                <td colspan="3">                    <md-radio-group ng-model="value" ng-change="onChangeNeed(value)">                        <md-radio-button value="{{ item.product }} Conducting" aria-label="{{ item.product }} Conducting">Conducting</md-radio-button>                        <md-radio-button value="{{ item.product }} Planning" aria-label="{{ item.product }} Planning">Planning</md-radio-button>                        <md-radio-button value="{{ item.product }} Replacing" aria-label="{{ item.product }} Replacing">Replacing</md-radio-button>                    </md-radio-group>                </td>            </tr>        </tbody>    </table> </form>

JS – Controller

$scope.onChangeNeed = function(value) {   console.log(value); };

JSON DATA (Example – in controller for example)

var vm = this; 

vm.solutions = [{            "name": "Core System",            "solutions": [                { "product": "Core System" },                { "product": "Core System Evaluation" },                { "product": "Outsourcing" },                { "product": "Operational Assessments" },                { "product": "Customization Assistance" },                { "product": "Internal Security Monitoring" },                { "product": "Internal Help Desk" }            ]        }, {            "name": "Call Center Solution",            "solutions": [                { "product": "Call Center Solutions" },                { "product": "In-House Call Center Automation" },                { "product": "Outsourced Call Center Services" }            ] }];

[crrollyson]

One of the challenges of being a digital creative is battling legacy. This includes legacy structure, legacy processes, legacy practices, and out-right legacy thinking. 

“This is how it is, because it was our solution to the legacy problem back then.” 

Now think about that. We (as creatives) know or should know, at some point our attachment to any found and cherished processes will be challenged. Rightfully so. 

If you are involved in digital marketing – in any way (ie/eg/daf = project managers, graphic designers, front end developers, back end developers, content creators, info architects, tastemakers [whatever the f that means], thought-leaders, creatives, directors, general mgrs, assist to the regional manager) – you hear “it works for us” and think about packing your birdnest of a desk and moving on. And a little pep jives into your step with thoughts of: 

“Somewhere less confined, more progressive, better coffee, and space for your life (dog/bike/booze in my case). Somewhere with loud speakers rotating great music and open seating.” Channeling the best version of what you believe to be the only thing better than being at the beach/bar/house or on vacation. 

But we (as digital creatives) know the very thing that drives us absolutely crazy, is what keeps us engaged. We want the satisfaction of being right/heard and openingly accept the challenge of driving change – for change is why we came and our expertise is why we get paid (even if they don’t understand what we do – thank goodness for that, that summons a completely different battle).

In my professional pursuit over the years, I’ve found one common thing that works well to gain the attention of those responsible for handing off the keys. Any idea? Emails sure af do not work, bitching does not work, logic does not work, acting like an ass definitely does not work, and a million combinations of various things do not work. But the one thing that does work 100% of the time is showing the value. We all understand basic economics – Time = Dollars. And once something is seen (remember reading it in an email does not work tl;dr) it can not be unseen. Couple that with the increasing threat of open communication firing up the professional chain that may jeopardize bonus structures and BOOM – you have found your solution. 

This (video showing the difference between publishing a small app to sharepoint and publishing the same exact small app to Firebase) is a very small example featuring a recurring 6 minute (at best - depending on the network) loss on a standard process like publishing sites files.

“That is the cost of doing business”, says the guy whose career you are challenging. 

Providing proof (like this video) does not always work right away. Some stories involve people leaving and returning (personally I’ve never gotten into the Ike and Tina Turner game, but that does not mean I wouldn’t consider it). My point is, if you want your way – visually show anyone and everyone who can help your cause, where efficiencies are being lost. And by efficiencies I mean straight dollar bills. Chances are, even if they are resistant to change, they will be forced to tell you no (at which point you get to enjoy an entirely new strategy - if you are in marketing you enjoy strategy) or they will promote you for saving them from worry and countless headaches of trying to figure out how it is you do what you do (especially when some legacy bullshit goes wrong). I consider both a success. 

Spend less time defending your work and more time battling legacy. 

[crrollyson]

Angularfire Email/PW Auth with User db creation – Angular Factory

You can authenticate a user with the new Firebase email and password auth, but you are too lazy to dig through the new codebase to figure out how to create a user in the database on the returned promise? I was too and couldn’t find the answer until I stopped, regrouped, grabbed a beer, and read the new docs. 

This assumes your app is using the using firebase 3.0.4+ and angularfire 2.0.2+ with the new config apiKey, authDomain, databaseURL:

myApp.factory('Authentication',    ['$rootScope', '$firebaseObject', '$firebaseAuth',    function($rootScope, $firebaseObject, $firebaseAuth){

       var ref = firebase.database().ref();        var auth = $firebaseAuth();

       return {            login: function(user) {                $rootScope.message = "Welcome " + $scope.user.email;            }, //login

           register: function(user) {                var email = user.email,                    password = user.password;

               auth.$createUserWithEmailAndPassword(email, password).then(function(regUser) {

                   var regRef = ref.child('users/' + regUser.uid).set({                        date: firebase.database.ServerValue.TIMESTAMP,                         regUser: regUser.uid,                        firstname: user.firstname,                        lastname: user.lastname,                        email: user.email                    });

                   $rootScope.message = "Hi " + user.firstname +                    ", Thanks for registering";                }).catch(function(error) {                    $rootScope.message = error.message;                });            } //register        };

}]);

If you want the entire setup, message me. If you have a better way to structure this, have enhancements, please share it. It is all about progression. 

[crrollyson]

Shortcut to getting grunt-bower-concat to compile bootstrap css all proper like with gruntfile.js example

Gotta cut this one short. If you are reading this, it is highly likely you have already be down some rabbit holes of nerd-tennis/back-and-forth about what is causing the issue – but you just need a fix, here is how and be sure to pass it on if it works for you – progress is slow enough:

Terminal:

npm init

npm install grunt --save-dev (for workflow processing)

Install additional grunt plugins:

npm install grunt-contrib-concat

npm install grunt-contrib-watch

npm install grunt-contrib-connect

Setup gruntfile.js

bower init (conveniently has the same commands as npm)

Install additional bower plugins:

bower install --save jquery

bower install --save bootstrap-css (this includes bootstrap.js)

Install wiredep to manage bower dependency files:

npm install --save-dev grunt-wiredep

Create wiredep task in gruntfile.js

Install grunt-bower-concat 

Create bower_concat task in gruntfile.js – pay close attention to the structure

bower_concat: {

  all: {

    dest: {

      js: ‘builds/development/js/_bower.js’,

      css: ‘builds/development/css/_bower.css

    }

  }

}

gruntfile.js example:

module.exports = function(grunt) { grunt.initConfig({

concat: { options : { separator: '\n\n//----------------------------------\n', banner: '\n\n//----------------------------------\n' }, dist: { src: ['components/scripts/**/*.js'], dest: 'builds/development/js/script.js' } },

bower_concat: { all: { dest: { js: 'builds/development/js/_bower.js', css: 'builds/development/css/_bower.css' }, dependencies: { ’bootstrap’: ‘jquery’ //get jQ to go along with the build  } } },

wiredep: { task: { src: 'builds/development/**/*.html' } },

connect: { server: { options: { hostname: 'localhost', port: 3000, base: 'builds/development/', livereload: true } } },

watch: { options: { spawn: false, livereload: true }, scripts: { files: ['builds/development/**/*.html', 'components/scripts/**/*.js', 'components/styles/**/*.css'], tasks: ['concat'] } }

}); //initConfig

grunt.loadNpmTasks('grunt-contrib-concat'); grunt.loadNpmTasks('grunt-contrib-watch'); grunt.loadNpmTasks('grunt-contrib-connect'); grunt.loadNpmTasks('grunt-wiredep'); grunt.loadNpmTasks('grunt-bower-concat');

grunt.registerTask('default', ['wiredep', 'bower_concat', 'concat', 'connect', 'watch']);

}; //wrapper func

If this worked for you, holla but more importantly share it, tweet it, blog it, use it. √

[crrollyson]

Javascript ScrollTo Issue-To-Fix » Overflow: Hidden

Recently come across a post on stackoverflow titled “jQuery scrollTop() method not working”. 

One of the many great things about Stack Overflow is the community covers all skill levels – all over the board – with plenty of folks more than willing to offer up suggestions. Since there are multiple ways to do almost anything in coding, this is a great thing. 

I typically read through the given answers and see if something has been missed or not considered and try to expand upon it or at least offer some troubleshooting consideration – especially when I see language barriers. So I try to break it down, like so many people have done for me over the years. Here’s where this landed: 

A common scrollTo issue is having overflow set on the "html, body" element in css. Rarely mentioned as a gotcha when having scrolling/animating issues on html/body elements and can end up in excessive over-engineering.

If overflow needs to be set, put it on the body element only » Not both html,body.

It is also a good habit to use a data-* attribute in place of classes or IDs in your html. This gets you in the habit of separating styles from code. Consider this to make your life easier in the future:

**Create Reusable Scroll Function**

   scrollioreceiver = function(sender) {

     $(sender).on({        click: sentFrom      });

     function sentFrom(){        var dataMine = $(this).attr('data-sender'),            dataSend = $('[data-receiver="'+dataMine+'"]');

       $('html, body').animate({            scrollTop: $(dataSend).offset().top - 70        }, 800, function() {            // if you need a callback function        });      }    }

Create data attributes to html elements (data-name is arbitrary and should make sense):

**ADD HTML LINK**

   <a data-sender="ScrollToMatch">Link To Click To Scroll To Match Attribute</a>

**ADD HTML ELEMENT**

   <div data-receiver="ScrollToMatch">Scrolls To This Element</div>

**VERIFY CSS** » overflow added to "html,body" won't work

   body { overflow-x: hidden; }

**INIT FUNCTION ON READY** » initialize on doc ready with attribute name selector to create flexibility on multiple calls

   scrollioreceiver('[data-sender]');

http://stackoverflow.com/a/38063761/2903963

[crrollyson]

Received this weeks “check out our new courses” email from Lynda.com. I saw “Up and Running with LinkedIn Sponsored Content”. 

My first thought was “ah, Sponsored Content is the new sidebar ad”. So I had to tweet about it as I’m curious to see how ROI is being valued. We know tracking views alone doesn’t do anything – Facebook sponsored content has been proving that for a while. If you get action on your sponsored content, what is the conversion measurable against? 

Is it a predefined success message – based on the level of content the person (user is a derogatory term) sifted through? 

Is it tied to an actual monetary value? 

Theoretical, right...

Then what happened?

In rapid succession, the nog switches to: 

“LinkedIn owns lynda.com and they are posting videos on how to spend more money on linkedin sponsored ads.” 

Immediately followed by:

“Oh damn, Microsoft purchased LinkedIn...”

If LinkedIn is speaking in third person on Lynda.com about their own content creation, I can’t imagine what Microsoft is about to do. And that’s how I ended up with the image above. One of the best bands, mimicking the Russian Doll that has become #lyndInSoft. It’s worth mentioning, Microsoft comes before Apple in the relevant sidebar navigations on lynda.com

What the shock?

A look at the purchase history timeline:

April 9, 2015 » LinkedIn purchases Lynda.com

June 13, 2016 » Microsoft purchases LinkedIn

Present Day » #OneStepCloserToTheDinosaur

[crrollyson]

Shortcut To Centering And Vertically Aligning Text Over Responsive Image With Position Absolute

Objectives: Simple, Effective, and Hack-Free.

Requirements: 

Support all major browsers

Have fallback for non-supported/legacy browsers

Feature a responsive hero image

Include and center multiple elements (headline, call-to-action, video, button, link)

Logistics: 

You try background-cover, but realize setting and adjusting height is too much work and throwing window.height checks with javascript is overkill

You consider using Bootstrap’s .jumbotron class on the outer div, but realize it will require more work to override default bootstrap styles – not to mention messing with your super clean css flow

You have a short lapse in judgement and think “f this, Imma html4 this into table submission layout”, but you know someone is going to see it and any credibility you once had will be gone

Flexbox... right – probably needs to work in some legacy browsers because “marketing” to people outside of personal computers (see previous bullet)

Solution:

CSS “calc” property

position: relative on the parent

position: absolute on a child div

Code (html):

<div class="container-fuild hero">        <img src="img/hero.jpg" class="img-responsive" alt="use alt tags">        <div>            <h1>Center This</h1>            <a href="" title=“use title tags”>Center This</a>        </div>  </div>

Code (css):

h1 {     font-size: 32px; } .hero {    position: relative; } .hero div {    position: absolute;    top: 38%;  /* fallback – note A below */    top: calc(50% - 32px); /* css calc – note B below */    left: 0;    text-align: center;    width: 100%; }

Explanation (comments in above css):

Twinning “top:” Properties » Defining identical classes multiple times in the same CSS block is a common practice used to engage fallback support for legacy browsers that lack support (do not understand, do not recognize, ignore, does not compute) a css property

top: calc(expression) » “calc” takes the expression and returns a value 

top: calc(50% - 32px) » vertically aligns the element based on the return value. The example expression adds the <h1> font-size of 32px

Note A » In this case, IE8 and Opera Mini does not recognize the “calc” value and ignores it. CSS cascades, so the unsupported browser ignores the second “top calc” property/value pair and settles on the first “top” property/value pair (top: 38%) 

Note B » Returns the value of the expression (32px minus 50% of the targeted height (in this case the parent “hero” div)

Gotchas: Centering undefined heights in responsive design can/will-likely shoot you straight down the rabbit hole – go with it – there are massive benefits to over-engineering and over-thinking. You’ll start to rethink/reconsider your initial plan and likely find yourself coming up with simpler solutions like this.

[crrollyson]

10 HTML Entity Crimes

Ah, logic. Good post about getting your life together when working with HTML characters from @Line25Blog

http://line25.com/articles/10-html-entity-crimes-you-really-shouldnt-commit