Two Useful Tools To Speed Up Your Code Workflow

Alfred 2 Keyboard Maestro

 

Sherlock Holmes once said that he tried not to clutter his brain with useless things…

while reserving space for the useful…

The rest of us aren’t like Holmes because we can’t remember everything and neither should we.

That’s what Google and the Internet is for.

Yet programmers and developers need to remember what X and Y does… and it doesn’t help if you have to remember the rarely used pieces of code that take 5, 10 or 15 minutes to look up.

Well there’s an answer to that.

Use tools like Alfred 2 or Keyboard Maestro to speed up your workflow.  

Call it “digital delegation”.

Note that Alfred and Maestro are both Mac only applications, Windows developers. 

 

How Does Alfred 2 Help?

In my workflow Alfred helps as an application launcher, calculator, clippings and a snippet box.  

 

Now I don’t have to hunt for an app by clicking through several windows.

The same goes for finding specific files.

In Mac OS X Yosemite Spotlight has copied much of Alfred 2’s functionality however I still prefer Alfred.  

It’s an inertia thing.

 

The calculator function lets you do math in the launch bar that pops up when you bring up Alfred 2.  

I use it often to convert pixels to ems by dividing the value by 16 and pasting it into Sublime Text SCSS files.

This is far more convenient than opening another calculator app or trying to do it in your head.

 

The clippings feature is under Features > Clipboard and I use it more than any other feature.  

Copying a SCSS or Javascript variable or value over and over?

Just type “clip” in Alfred and it shows you all the things you’ve cut and pasted for up to a few months (or whatever you set it as).

I find I use this feature constantly especially when I don’t want to reference my typography.scss file for the $basefontsize variable or a specific theme colour.

 

The Alfred 2 snippets are also found under Features > Clipboard.  

I mainly use it to remember links (<link>) and scripts (<script>) for Font Awesome, jQuery and other CDN links.  

That saves a few more minutes every time I’m working on a new project (otherwise I include it in my current project template).

The Alfred 2 snippets aren’t perfect in that it’s hard to auto-indent it when pasted into Sublime Text.

It takes some trial and error with some snippets because of the indentation.

So if you have a piece of code you use often and it’s indented… and you copy it into a snippet in Alfred 2 and then paste it from Alfred… the indenting will be all wrong.

Which may drive those with OCD nuts…

 

Another powerful benefit of Alfred are the workflows that others have built.  

Need to convert units?

Someone out there has likely created a work flow for that.  

Do you use Dash?

There’s a workflow you can import that lets you search your Dash app for documentation entries.

My favourite workflow is the one for Font Awesome that lets you search out the class to slap onto an html element so you have an icon (see the resources below).

 

Some of Alfred 2’s features are only available if you’ve purchased their $15 USD power pack…

I believe the most useful ones however don’t require Power Pack.

 

Now what about Maestro…?

 

How Does Keyboard Maestro Help?

Keyboard Maestro is Alfred 2 snippet power on steroids.

It has a bit of a learning curve however you can customize to not just cut and paste — it can actually “type” out text as if it were you

 

This partly solves issues of cutting and pasting code into Sublime Text.

 

You can even make it use the same hot keys Sublime Text uses to “Cut and Indent” so that everything is lined up instantly.

There are so many possible ways to do it that it’s insane.

You can set hot keys, set “typed text” triggers (i.e. I type “jon” and it writes out an entire email to Jon from a template) and more.

It actually helps me break up my code because it makes commenting easier.

I create entire templates of “comment sections” where I insert my code between the comment start and end marks.

Like writing good ad copy, you write better code by “breaking” things up with “comment space” — complete with comment headings like “Header”, “Footer”, “Navbar”…

 

Unlike Alfred, Keyboard Maestro doesn’t quite have the kind of community that provides the “macros’ the way the Alfred community provides “workflows” so you may not always find a solution to your problem the way you might with Alfred.

 

You could use Sublime Text’s snippets function which is under Tools > Snippets… and if you code only in Sublime Text then sure I guess that’s fine.

I’ve always found it somewhat glitchy unless you don’t try to limit Sublime Text’s source file… meaning you don’t say the snippet only works in certain types of files like HTML.

 

Still I prefer to have my snippets in a kind of universal space that I can use anywhere on my computer — like email or for writing ads or marketing content.

 

The bottom line is that a developer shouldn’t try to remember every little detail and instead use “external memory” (a Ghost in the Shell reference) to manage the small yet useful things that you need for your projects.

 

Later on I’ll probably chat about more specific tactics and techniques as I’m only scratching the surface of what they might do for you.

For now investigate these two tools and see how they can help you.

I’ve included some resources below.

 

Cheers,

Sunny Lam

 

Alfred 2 Select Resources

Alfred 2 Workflows I use Everyday by Jan Beck 

Alfred 2 Font Awesome Workflow (for developers this one is one you can’t live without) 

Alfred 2 Workflow To “Switch” On Keyboard Maestro Macros (without using Maestro’s own launcher)

 

Keyboard Maestro Select Resources

Keyboard Maestro Examples by Sayzlim

Keyboard Maestro on Mac Automation Tips

 

 

Photo Credit:  www.audio-luci-store.it

Technorati Tags: , , ,

How “Inception” Thinking Helps You Master Positioning (With Flexbox)

 

While upgrading myself at HackerYou’s Bootcamp I ran across a sneaky-at-first-glance challenge that looked like this…

Flexbox within Flexbox

You’re wondering how this might be challenging right?

To a non-developer this seems like nothing out of the ordinary.

To a developer however it’s a positioning challenge.

 

Normally you’d need a grid system like Semantic GS, Bootstrap, Foundation or Bourbon Neat.

They all use floats, margins and/or padding.

 

As the web marches forward, flexbox is now supported on all modern browsers yet many agencies are slow to adopt this powerful, simple and easy tool to position elements naturally…

… in a way that adapts to the content.

The up side is that it uses no floats and automatically figures out the right margins and spacing for you.

 

Look Ma!  No hands!

 

Coming from a marketing and ad writing background a website should flow and support the copy not the other way around.

 

A developer needs to look at the image and break things up so that he can understand how to put the pieces together to get the final product.

 

Diving Into the Positioning Dream…

 

So this is what happened as I constructed the Lady E-commerce Demo

 

Break Down the MockUp for Flexbox Planning

 

Each box represents a <div> element or <section>.  

 

The best way to approach this is to start from the highest level or outermost level and work inwards.

 

This is very much like the movie Inception with Leonardo Dicaprio.

 

It’s a div within a div within a div…  like a dream within a dream within a dream…

 

If you tried to organize something like this without a grid system or flexbox it would be a nightmare… regular float properties won’t cut it.

Here’s a partial step by step process using pictures.

 

Flexbox Inception Step 1

  1.  We start with the highest level parent container (red) and its immediate children containers in blue.

That would be something like:

section.parent

div.left1

div.right1

 

We apply display: flex on section.parent with flex-flow: row-wrap so that div.left1 and div.right1 smack up right beside each other.

This is the most basic number of properties to apply — you’d use justify-content, align-content and align-items too — however I’m skipping those to keep things as crystal clear as glass.

 

 

Flexbox Inception Step 2

  1.  Here’s where the Inception thinking starts.

We focus on div.left1 (red) and break it down into a div.leftTop1 and div.leftBottom1 (blue).

Now you shift your “perception” of who is the parent.

div.left1 is now the parent and div.leftTop1 and div.leftBottom1 are the children.

 

You apply display:flex on div.left1 and flex-flow: column.

Since flexbox has no way of controlling the proportions of height like saying the top is twice as large as the bottom (right now it can do that only horizontally) you have to set an actual height on both div.leftTop1 and div.leftBottom1.

 

Flexbox Inception Step 3

 

  1.  Finally you drill deeper into the top and the bottom.

By now you get the picture.  

When you dig into div.leftTop1, it becomes the new parent so you apply display: flex to it and flex-flow: row wrap.

The blue squares are div.leftTopLeft and div.leftTopRight and take up equal horizontal space.

This is where you use flexbox children properties.

In this case div.leftTopLeft and div.leftTopRight are flex: 1 0 50% or flex: 1 50%.

 

Where flex-grow 1 means they both grow equally, 0 for flex-shrink doesn’t make any sense (so you could skip it) and flex-basis 50% means that the element should always be 50% of the parent’s width and never any larger or smaller.

 

This gets both sections right up against each other.

 

If you burrowed deeper into div.leftTopRight you could split it into div.leftTopRightTop and div.leftTopRightBottom.

Then you’d repeat what you did in Step 2.

 

And what about div.right1?  It’s a similar setup as the left side.

 

So Why Use Flexbox Here?

As you can imagine it’s a lot of <div> or <section> elements (or whatever you use).

 

The benefits however are great.  

It makes responsive coding and changes much easier as flexbox automatically adjusts element positions automatically, often cutting your responsive coding time in half or more.

In this situation you’re media queries would be sparse. 

 

Why?

 

Because you need only change things like flex: 1 50% to flex: 1 100% for the element to stretch across the screen when on a mobile device like the iPhone with 480px width.

There’s no margin, padding or float fidgeting.

 

Now you could use Bootstrap for example, use classes for non-semantic HTML5 markup and have it automatically do media queries.

If you don’t want to load more Javascript then using flexbox is a great option.

 

After Drew Minns demonstrated the use of Semantic GS and his own Deadset grid system to me, I used them until flexbox came along like a thundering train.  

Both are SCSS/SASS based and require no Javascript at all.

 

Regardless of what you use, the same ideas of breaking down the final end product and seeing the “building blocks” that you need to construct it are vital to positioning.

 

Work backwards.

 

Cheers,

Sunny Lam

 

Writing north of Queen Street East

 

Above GIF Source:  Giphy

Technorati Tags: , , ,

The Tried-And-True Tool You Should Know For Responsive Design

Responsive Design Google Chrome Developer Tools Device Mode Testing By Sunny Lam Front End Web Developer

Responsive design.

The term can seem broad as the horizon to any lay person out there.

For us developers it can mean one site capable of transforming itself for any device or screen…

… depending on the audience’s needs.

 

These days there are a lot of devices.

With Apple’s massive iWatch success it’s another two screen sizes to build for.

 

A device lab would be really handy in these cases.

What is that?

A work room where you can view your site on all many of the current or older devices — just like someone using them would.

 

What if you can’t access one or don’t have the time?

Simple.

Google Chrome.

Let me explain that…

 

It’s All About Device Mode

When I first learned responsive design I thought it was all about flipping the switch on Inspect Elements in Google Chrome’s Developer Tools and re-sizing the screen for the common break points.

High definition desktops… min-width: 940px…

Desktops… max-width:  940px…

Tablets… max-width:  768px…

Phones… max-width:  480px…

 

That however only scratches the surface of the screens that you have to design for.

I’ve found that responsive design for those break points isn’t enough.

And simply dragging your screen down a notch and coding responsive media queries in the Element inspector isn’t enough.

In fact I’ve found it isn’t very precise.

 

So what’s the solution?

 

How do you get 80% of the benefits of a Device Lab from the comfort of your own computer without venturing forth into pounding heat waves or bone-breaking hail over and over? 

 

Use Device Mode.

 

On the Mac enable it by hitting Cmd + Option + I.

Turn On Google Chrome Device Mode Explained By Sunny Lam Front End Web Developer

Then strike the Device icon as you see in the above image in order to activate Device Mode.

 

Once Device Mode is switched on you should see…

Google Chrome Device Mode Sunny Lam Front End Web Developer

 

You’ll notice that you can choose the device you want Google Chrome to “emulate” or pretend to be from a dropdown menu on the left.

Google Chrome Device Mode Sunny Lam Front End Web Developer

You don’t really need to bother with the Network option to its right for now.

 

You may witness a message that says, “You might need to reload the page for proper user agent spoofing and viewport rendering.

Just reload your page and it should go away.

 

Under the Device selection dropdown is the screen dimensions in pixels.  

You can change it manually if you want by clicking on them and entering numbers.

I typically stick with the Device selections instead though if you’re coding responsive for iWatch sized screens for example then you may have to enter them manually. 

 

You’ll find this works so much better than simply re-sizing your browser screen

… because you won’t miss gaping details.

 

You also get a “click-only” space just like you would if you were using a mobile device like an iPad, Note or iPhone.

In which case hover events won’t work which is exactly what you want.

 

You can toggle the screen dimensions between portrait and landscape which helps when designing nav menus

… and start realizing that your nav menu steals 50% or half of the screen real estate…  like in the image below…

 

Responsive Design for Nav Menus by Sunny Lam Front End Web Developer

I drew in the edge of a fixed nav menu.

If you scrolled on an iPhone in landscape mode you’d realize that the fixed nav menu gobbled up half the screen real estate… forever.

If you only used screen re-sizing in your browser without Device Mode you’d never have noticed this at all.

Without Google Chrome Device Mode On By Sunny Lam Front End Web Developer

This is more of an issue with fixed menus in this case however you get the idea.

 

You’d redesign the nav menu… maybe use an absolute positioned “Menu” icon in the right or left corner for example… shift the title to make space… etc.

Responsive Design Mock Up Changes by Sunny Lam Front End Web Developer

 

Yet on the other hand…

 

Device Mode May Not Be Enough

You should realize that it’s always a good idea to test it on an actual device for more than responsive design.  

  • What if your ideal web site user tends to hold their device in a certain way that covers half the screen for some reason?
  • What if there’s some sort of spacing on an Android device that doesn’t exist on an iOS device?
  • It’s still limited to only screen sizes of width and height
  • It doesn’t actually use that device’s “rendering engine”.
  • Certain features that you might use in your web site may not be supported on certain mobile devices anyway and you certainly won’t notice using the current version of Google Chrome’s Developer Tools.

 

Google might make major strides with Device Mode in the future… yet today it’s not yet where it needs to be.

 

Which means that if your project is mission critical you should dash over to your nearest device lab no matter what.

 

Cheers,

Sunny Lam

 

Writing just north of the Beaches

Toronto, Ontario

Canada

 

P.S. HackerYou has an open device lab that they’ve been building up here in Toronto down at their Queen Street West location.

 

Above Photo:  “Device testing at the @Clearleft open device lab. http://clearleft.com/testlab | Flickr – Photo Sharing!,” Flickr, accessed Sunday, April 19, 2015, https://www.flickr.com/photos/adactio/14793668147/.

Technorati Tags: , ,

Technorati Tags: , ,

How Do You Vertically Align Your Elements? (Without Tearing Out Your Hair)

Using Flexbox and Line Height for Vertical Alignment Positioning... Man Flexing Bicep Muscles

Positioning.

It can be a bloody pain.

Vertically aligning items can often be a knife being twisted in your guts.

(Though it may not be as bad as ghost spacing and the mind blowing z-index.)

If you’re going into HTML code for the first time (and you know who you are) then it can drive you nuts for hours as you rip out your hair trying to line everything up like peas in a pod.

If you’ve ever tried CSS vertical-align: center or baseline you may find it doesn’t work like you expect it to or it doesn’t work at all…

… it only works on inline or table-cell boxes according to my Dash entry.

The answer ain’t clear (hence why positioning drives most people nuts).

I can’t promise you’ll find the best answer in what follows however this is what has worked for me (and I’ve had months of in the trenches wrestling with it)…

 

Option 1:  You Can Use Line Height

This was a lovely trick that I learned from Jessica Duarte, a fine mentor and front-end developer during my HackerYou HTML & CSS 2014 days (who happened to be the room-mate of an old Queen’s University acquaintance of mine named Francis D — what a small world eh?).  

Say you’ve got a Font Awesome icon logo that you’ve built with a span.fa.fa-gears.fa-5x.

Font Awesome Gears Icons

 

And you set the width and height to say… 2em each… (I find padding in this case to be an ugly way of “bulking” up the icon to the right shape.)

 

Font Awesome Gears Out of Whack Vertical Alignment

You’ll notice that the Font Awesome icon is not vertically “centred” or aligned.

 

If you try the logical answer of vertical-align nothing should happen (resulting in you tearing out your hear a quarter hour later).

 

So what do you do?

 

You change the line-height my friend.

 

And you realize it has nothing to do with positioning commands at all.

 

’Tis text related.

 

Simple yet not obvious (until you’re told by someone who’s already suffered on your behalf).

 

So I set the line-height to 2em (because I’m big on responsive and hate using pixels unless it’s the wrapper or someone puts a gun to my head).

Font Awesome Gear Icons Vertically Aligned

 

CSS Code Snippet for Line Height for Vertical Aligning an Element

 

I figure that since you set the width and height of the span.fa to 2em, matching the line-height helps to “fill it out” or “flesh it out” which puts everything back into a kind of vertical centred alignment.

So what’s the second option that I discovered?

It’s… 

 

Option 2:  You Can Use Flexbox

This is a new CSS3 property that isn’t supported on the older browsers and likely IE 9 or earlier I think…  

I wouldn’t quote me on that one because I heard that semi-first hand from HackerYou lead instructor and developer Drew Minns who’s been adding flexbox to the course curriculum.

He ran a workshop a week or two back which I missed and will be running it again for us alumni (methinks) after the Side Project Session on April 26th from 2:30 to 4:30 pm.

Sadly that won’t help you unless you happen to be bouncing around Toronto.

Well I learned about it anyway because there was a nasty glitch with Semantic GS when I was positioning some div elements for my Simple Resume example where the 4th div block was always out of alignment.

When I saw Drew’s email I realized I might have found the current “Holy Grail” for not only “side-to-side” horizontal positioning but also vertical positioning…

… as long as you know your web site or app isn’t going to be used by many IE users anyway.

So what do you do?

Say you’ve got a nav bar for example like what I have in this theme derivative of mine…

Flex Box Nav Menu Item 1

Say you want the bottoms of the buttons or the baseline to line up — for both the right buttons and the smaller left side buttons.

We’re not talking the central axis here.

Say the parent of both of these nav menus is header#demo-header.flex-container (in the CSS/SCSS) where I use .flex-container class to hold these two rowdy “children” menus.

 

Using Flexbox for Vertical Alignment and Positioning

 

I apply display: flexbox to the parent so I can get these two kids “in line” — specifically baseline (where they both sit their rumps on the floor instead of jumping up to the central axis).

The CSS/CSS3 code looks something like this:

display: flex;

flex-flow: row wrap;

justify-content: space around;

align-items: baseline;

align-content: center;

(Note:  I didn’t bother with vendor prefixes in this example.  Use a preprocessor program like Prepros or use Autoprefixr CSS to make your life easier.)

The key property on the parent is align-items: baseline though you could use “center” if you wanted the nav menus to be “skewered” like a shish kebab.

 

What About Using Flexbox In The Example From Option 1?

Let’s be clear that in the situation I used in option 1, flexbox will work for you however it’s a tad tricky.

You’d have to apply display: flex on the parent (i.e. section.highlights .hl_block span.fa).

 

Using Flexbox for Vertical Align Positioning

 

Since the actual Font Awesome icon is actually stored in the ::before element which in the DOM is a child of “section.highlights .hl_block span.fa” it will work.

The code looks something like this…

display: flex;

justify-content: center;

align-items: center; (this time we’re “skewering” or vertically aligning through the central axis)

If you left it at that however this is what your icon would look like inside of its containing parent…

Vertical Alignment Positioning Using Flexbox

At first you’d think this is game over:  “Aw blimey, the flexbox messed up the centring of the icon inside its parent even though the icon is perfectly centred vertically and horizontally.”

Don’t worry — just centre it by applying margin: 0 auto which is the magic wand here.

Using Flexbox to Fix Vertical Alignment

 

The final code tally that’s spit out by Chrome Dev Tools is:

Using Flexbox to Fix Vertical Alignment Positioning

 

 

Are these the only two options?  

Likely not.

Someone may have come up with something more clever (or more complex).

Maybe CSS4 will make vertical alignment drop dead simple.

It’s the endless march, ladies and gents.

These are the two solutions I’ve found so far.

If you’ve got a better way drop a line.

 

Cheers,

Sunny Lam

Writing from the Beaches

Toronto, Ontario

 

P.S.  Do you want to get the low down on the “flexbox” Holy Grail?  Check out the CSS tricks Complete Guide to Flexbox.

 

Above Photo Credit

muscle power | Flickr – Photo Sharing!,” last modified June 13, 2010, https://www.flickr.com/photos/skinnyghost/4697434586/.

Technorati Tags: ,

Technorati Tags: , ,