I was getting annoyed that my Emmet shortcuts were not working in Atom when I’m writing React/JSX files. None of the Emmet shorthands were expanding, until I found this bit of information.

Making Emmet shortcuts work for JSX files in Atom

  1. Open Atom menu -> Keymap…
  2. Add this line to the keymap file

    atom-text-editor[data-grammar=”source js jsx”]:not([mini])’: ‘tab’: ’emmet:expand-abbreviation-with-tab

This will expand .col-sm-8 to

<div className="col-sm-8"></div>

Backstory

On Mac OSX, it would annoy me whenever I wanted to open a new Chrome browser on a 2nd workspace, and it would autoswitch to the first instance on the 1st workspace. We can disable it by desktop spaces auto-switching by entering a terminal command.

How to Disable Desktop Autoswitching

Open terminal and enter this command:

defaults write com.apple.dock workspaces-auto-swoosh -bool NO

Then restart the Dock by entering this command in terminal:

killall Dock

Enable Desktop Autoswitching

Open terminal and enter these two commands:

 defaults write com.apple.dock workspaces-auto-swoosh -bool YES
 killall Dock

Google App 20% off Promo Code

I have an extra promo code for Google Apps that gets you 20% off per user for the first year of Google Apps.

Google Apps for Work Promo Codes for US

  • 3N4E93GHUVR6M4
  • 76N6K37LPRCUWJ
  • 43N9K6PQY64QR7
  • 6W9UEQQRJFXQ6P
  • 3HULW4UFNJJDG7
  • 6KDF3NGGJU6H49
  • 7D3NRNNP4VXRW4
  • A3KXQEETX9PTRU
  • 7AHD4TLELYJN6W
  • DGWLTJ9QADLWEX

I was able to score some Canada coupon codes.

Canada Google Apps For Work Promo Codes

  • 6Y4QR6APLMNFFN
  • AWF9D9HRGV6FNM
  • 3C3A4E46XHYE9Y
  • AJCDRKJADCAJQD
  • 3MKHR7RAA4EWJ4
  • CQKMNWJ37DXNQ6
  • AHYEAYLL9HVCVL
  • 9TA4PXRMX6EWGX
  • A3AUAVNUGDHURX
  • 9XJMJDPLLHV76U

Comment if you need more.

How to redeem

  1. Sign up for Google Apps
  2. Go to your billing settings
  3. Choose your payment plan
  4. Enter your promo code
    These codes expire June 30th, 2016.

Scale Value with Javascript

I was looking for a quick and easy way to get a scale value of a css -webkit-transform with javascript.

The html and css:

<div id="transformed"></div>

#transform {
    -webkit-transform: scale(.8);
}

First, we need to get the property value of -webkit-transform. I’ll use jQuery.

var div = $('#transform').css('transform');

The transform property will return matrix(0.8, 0, 0, 0.8, 0, 0).

To get the scale from the matrix, we will need to turn the matrix into individual values, then we can do math:
var values = div.split(‘(‘)[1];
values = values.split(‘)’)[0];
values = values.split(‘,’);

var a = values[0];
var b = values[1];

var scale = Math.sqrt(a*a + b*b);
console.log(scale) // .80

I switched over to Atom from Sublime Text a couple of months ago.
I couldn’t be happier.
Lots of Sublime Text packages are built in, so no need to look for extra packages.
Atom has its own package manager which is easy to use.
Give Atom a try if you are a Sublime user.

Atom Reaches 1M Active Users

Detect OSX or Windows with Javascript

We can easily detect whether client’s machine is PC or Mac with Javascript.
We can just analyze the value of navigator.appVersion or navigator.userAgent. Be careful, some clients will spoof the userAgent.

// Javascript code for OSX or Windows detection
var OSName="Unknown OS";
if (navigator.appVersion.indexOf("Win")!=-1) OSName="Windows";
if (navigator.appVersion.indexOf("Mac")!=-1) OSName="MacOS";

document.write('Your OS: '+OSName);

Regex Password Validation

I needed to find a regex pattern for validating a password for an Angular app.
The requirement were to have at least 1 lowercase character, 1 uppercase character, 1 number, and no repeating character more than 2. For the ng-pattern, I came up with is below

/^(?!.*([A-Za-z0-9])\1{2})(?=.*[a-z])(?=.*[A-Z])(?=.*\d).+$/

Breaking It Down

(?!.*([A-Za-z0-9])\1{2}) Make sure that no characters repeat more than twice

(?=.*[a-z]) requires at least one lowercase

(?=.*[A-Z]) requires at least one uppercase

(?=.*\d) requires at least one digit

Idea Generation

It’s easier to filter the million ideas in your head when you have an idea system. Most ideas that we work on are actually fragile, where we get discouraged when we start working on it. John Carmack believes in an antifragile idea system which is outlined below.

  1. You are working on a problem and you get an idea and with it the initial idea high
  2. You should instantly try to defeat your idea – think of all the ways it could not work, test it out, put it under stress
  3. If the idea survive the brutal scrutiny then it has legs for further investigations or implementation
  4. If the idea is implemented and it works then that’s great
  5. If the idea fails the scrutiny or implementation you can quickly move on to the next idea without feeling the lows because you haven’t obsessed or talked about it i.e. it’s not your pet idea.

From Amjad Masad

Problem
In jQuery, getting a numeric property returns a string.
What if we want a css property value as an integer or float?

Solution

parseInt($('#elem').css('top'));
parseFloat($('#elem').css('top'));

Expand Div with Floats

February 10, 2016 — Leave a comment

Problem

How do you expand a div to contain floats?
Elements like div’s grow to fit its contents, but when you use the float property on its children, the div will not expand.
The div will show a height of 0.

Solution to Contain a Float

Set the parent to overflow:auto.

<div style="overflow: auto;">
    <div style="float: left;">Div 1</div>
    <div style="float: left;">Div 2</div>        
</div>