Category Archives: Javascript

Notes from CodeStock 2014′s “Regular Expressions” presentation

FacebookTwitterGoogle+PinterestShare

Brian Friesen’s talk on Regular Expressions was probably my favorite of the conference. You gotta admire a guy who builds a regular expression engine to properly demo and train folks up on the ‘devil’s language’ (as I and others I’ve known have called it)… Folks that hate regex and those that live and breathe the stuff all got something from the session. Good stuff.

Regular Expressions – now you have two problems

Brian Friesen
@brianfriesen

Works at Quicken Loans (side note, I used QL last year – hands down the best UX I’ve ever seen in a mortgage product/service)

github.com/QuickenLoans/RegExpose

Regexper.com

Regular-expressions.info

The Bible:
Mastering Regular Expressions by Jeffery Friedl
– can read the first 2/5 of the book and you have enough
———————————————————————–

1. RegEx are hierarchical

Root node = the whole expression

ABC would tree out like this:

ABC – root
A – character literal
B – character literal
C – character literal

2. RegEx do their thing sequentially

A RegEx will match if each of its child nodes matches in sequence
After a match, the RegEx engine will continue trying to find further matches until it has covered the entire string.

RegEx are by default case-sensitive

Character classes are surrounded by square brackets
– for a range, use a dash.
– if you need a dash in the match, put it at the beginning of your set within square brackets
– you can also include specific characters or numbers to match against
– can include a-z and A-Z, or you can pass an additional param to ignore case
– a negated character class = add a “^” carat character before a match. ie [^a-f0-9] would ignore a-f

Shorthand matches
– \d is the same as [0-9]
– \D is the same as [^0-9]
– \s matches whitespace chars
– \w is the same as any word character, meaning [A-Za-z0-9_]
– . matches any character, depending on options (ie except for new line character)

Alternation
(it’s a pipe dream)

| character means “or”
– linos|tigers|bears ‘lions’ would match, but regExp doesn’t know if its the BEST match, so it saves state (a breadcrumb) and moves to check the other choices.
– if a match hits on the last option in a set of choices, no state will be saved, no breadcrumbs etc.

Quantifiers (quantifiers are always AFTER)
(Because sometimes, quantity trumps quality)

Greedy Quantifiers (greedy means quantifier always wants more, ie. will keep going)
——————
– ? = optional
– * = will match zero, will match many
– PO*P would match “PP” as well as “POOP”
– + = must match at least once to succeed
– NO+! would match “NO!” as well as “NOOOOOOOOOOO!”
– {} = match a specific number of things
– \d{3} = this means match exactly 3 digits
– \d{3,15} = this means match at least 3, but up to 15
– \d{3,} = this means match at least 3 with no high end limit

Ultimate lazy quantifier: .*

Causion against using “*.” – can lead to a match failing since the greedy ‘any character as many as possible’ matching could lead to skipping more specific matches after the *.

Lazy Quantifiers – will only match as much as is needed, without going overboard
Once a match is made it will pass control to the next match paramater until it’s needed again…
—————-
.*? = Lazy
{3,5}? = also Lazy (in this case, once 3 digits were matched, the next node in regexp would be matched)

– ab.*?cd would match “abc12345cd” with the lazy quantifier returning to the ‘c’ character repeatedly before going back to the next number character

More alternation
—————-
(?:white|dog|brick) house
– match against “dog house”

Quantifers + grouping
———————
(?:NaN)+
– match against “NaNNaNNaNNaNNaN”

Notes from CodeStock 2014′s “Angular Is Awesome” presentation

Josh walked us through building a simple Angular app, using the lessons learned from Wintellect’s recent dev and launch of a global enterprise software app.

Angular is for AWESOME!
Josh Carroll
@jwcarroll
technofattie.com

The code
github.com/jwcarroll.ng-contacts

directives – typically an attribute on an element

————————————————-
ng-app
ng-init (used to inject a title in his demo)
– ng-init=”contacts=[bob1,bob2,bob3]”
– plugged it in with {{title}}
ng-model
– he bound an input to the ‘title’ var he had leveraged in the injected title
– ng-model=’title’
ng-repeat
-ng-repeat=”contact in contacts”>{{contact}}
ng-search
– “searching by ‘{{search}}'”
ng-if
– truthy comparison results in rendering the stuff
– empty string resolves to 0 so nothing would render

ng-controller – find the controller, and hand off DOM control to the controller by adding ng-controller to an element (ie a containing element)
– ng-controller contactListCtrl as ctrl (do a one time all inclusive effort to make $scope aware of all your controller’s functionality)

ng-view (a new html tag by virtue of angular)
– ala

ng-animate – a way to harness css3 animations

General
pipes (|) are filters. (think gulp)
– takes in something and returns something
– example was var AgeFilter (which returned a function as the filter)

$http as a param passed to function
– this.$http.prop etc.
– _this.$http.get(){
.success(callback) //this is a promise
}
– same for delete, etc

Modules
– used an IFFE function
– a module is a container holding the stuff related to the application

Controllers – just a JS object
$inject = a way to tell NG you need a component (used with $scope)
– $scope being where the data binding happens

Lodash (_. prefix)

Services
– must register a service
– can inject a service into a controller

Routing
– ngRoute (out of the box routing within angular)
– colon (:) is a routing parameter
– as in /contact/:contactId?
– routing as SPA method.. each route can be passed a different controllers (essentially a path-specific template) etc.

Handling when a route fails (ie error handling)
– he made a new js file: routeError.js (again, directive is a new html tag)
– which contained a new directive

Getting back in the saddle

It’s been some time since I redesigned Minotaurdesign.com. (2006, to be precise.) It’s been my business site since I had a business (1999) and it has gone through intense periods of work with much love/attention being paid to it – alternating with periods of inactivity.

I’m now coming off several years of letting the website sit untouched. If it mattered, I could point the finger at a number of things: parenthood, juggling the duties of a part-time landlord with a full time job, and feeling a lack of creativity fueled by having roles that put increasingly less emphasis on DESIGNING vs MANAGING, to name a few. Regardless, regret at having let the site sit idle does no good – so onward and upward!

As I gear up for a substantial redesign and some strategic shifts in focus, I have to credit a number of factors when looking at what has moved me to action:

  1. Recruiters

    I know what you’re thinking… recruiters? aren’t they the underbelly of our working world, constantly pinging you when you have no interest and making statements and promises that simply demonstrate their lack of any real knowledge about your chosen field…? Well, that can be the case, certainly.

    In my case, being contacted by one of the most influential companies for me on both a personal and professional level was an eye opening experience. When Apple first pinged me (via a well known business social media platform) I thought it was spam. After a bit of research I found the inquiry to be legit, which led to a number of conversations with recruiters and hiring managers on the west coast. The long and short of it was that our discussions led to one recurring observation:

    They felt I wasn’t solely dedicated to the discipline of front end development, and that I (still) seemed to harbor interest in the design side of the web.

    After much reflection, I realized they were right. With a background in illustration & advertising design, with a large side of fine art – I had to admit to myself that despite a full time job with an incredible company, serving terrific family-friendly brands, and working with amazing people – in the end i could not say I was fulfilled by the roles I’d held in recent years.

  2. Old friends

    In the first few years of my professional career I was part of a rapidly growing company that built multimedia sales platforms for auto dealers and which eventually turned into doing websites for automotive OEMs and dealer groups. Our team was home to a group of truly talented, passionate folks – many of whom are still in contact today. 2013 brought some significant career changes to three of those very influential friends from the early days:

    • One fellow had been out of the loop so long he no longer felt able to get back up to speed and took a retail job to pay the bills. He despaired of every returning to the web industry. This was a gentleman to whom myself and other young folks had looked up as an early adopter, a pioneer – with many different skill sets and a daunting intellect.
    • Another close friend was a renowned expert in his field, and a published author several times over. He was a trusted source for guidance in many forums over a number of years, a born teacher, and a truly remarkable human being as well. This friend had been a full time freelance developer for more close to 10 years, but his chosen area of expertise began to lose relevancy and his work dried up. He had to take a corporate job, and he too felt the pinch of having let his skills in many areas fall out of practice – easy to do in a world where innovation and major shifts in accepted practices happen all the time. In conversations over the course of the year, I had to admit I was very much in danger of falling prey to the same kind of threat.
    • A third friend, who some would have voted ‘most likely to remain a no-good punk for life‘, instead went on to consistently make wise choices in the roles he took on and the contacts he made in the industry. He adopted an attitude of humility and eagerness to learn, and was rewarded by the well-earned regard of his employees, employers and peers. His path remained aligned with his core values, with the things he’d grown to value: open, clear communication, advocacy for the users of the products he touched, and the courage to call BS when necessary. This year brought an amazing opportunity for him and his family, and hearing the joy he found in continuing to pursue his chosen path was encouraging to say the least.

  3. Family

    My family has been supportive over the years – grateful for the extra income my work has brought in under the Minotaur Design banner and happy that I was content in my work. It’s been obvious in recent years that I was left somewhat incomplete by the roles I’ve held by day, and my family has urged me to indulge in creative outlets while remaining understanding when I didn’t feel I had the energy or will to do so. My wife and daughter are the subject in many portraits done over past years, and so too are they supportive of my desire to steer back towards more creative professional roles.

  4. Twitter

    I admit it…

    I didn’t really GET Twitter when it launched. In fact, I didn’t really get it for years. It didn’t help to have set my privacy settings to “Ostrich with head in sand” when I initially signed up.

    Not until somewhat recently did I awaken to the second-by-second stream-of-consciousness zeitgeist that Twitter had become. Taking part in active conversations with other designers, developers and assorted experts has been at once humbling and exhilarating. Keeping up to date via blog entries and published articles has gotten harder year by year, and I’m starting to see how much more accessible it is to use tools like Twitter to stay abreast of the always changing world of the wide, wide web.

There are so many more choices available today than when I last redesigned the site. It used to be you simply coded out your design from scratch, did some testing with friends, peers and prospective clients, and breathed a sigh of relief when it was done and you could get back to paying work.

These days there are a lot of factors to juggle:

  1. Goals: Are you building the site to get new business? To show off your chops in hopes of scoring a plumb day job? To demonstrate hard-won expertise and hawk your latest book, seminar or conference tour?
  2. Platforms: Are you building from scratch or Using a publishing platform like WordPress or Drupal and/or relying on a framework like Bootstrap or Foundation?
  3. Deployment methodologies: Are you pushing everything up to your server manually via FTP, or are you using advanced IDE software, employing enhanced workflows, and jumping through the hoops of Node.js, NPM and Gruntc?
  4. Stylesheets: Still writing your CSS the old fashioned way? Pull up a stool and skill up on dynamic stylesheets: LESS, SASS, mixins and varying levels of automation wired any which way.
  5. Speed: Do you have site performance in mind? Think it’s still enough to just watch the filesize of your jpeg files? Are you loading all your script and style assets for every page, or building things in a modular fashion and only loading what’s needed, ala Require.js, Yepnope, or LabJS?
  6. SEO: It’s not enough to have a nice website these days. You’ve got to have it set up so it’s searchable, relevant, semantic and well-liked (well-linked). You may even have to pay for some exposure – SEO isn’t enough, SEM to the rescue.
  7. Research: Operating on hunches about what your users are doing? No bueno. You’ve got to wire up your site to some analytics – get some real insight into traffic patterns, user behavior, and the effectiveness of your marketing efforts.
  8. Marketing: What, you’re not doing much marketing? Too bad, you just lost the first round. Many FREE and PAID options abound, from Facebook and Twitter to LinkedIn, Tumblr, Quora, Pinterest and more. Seperating the signal from the noise is part of the challenge, as is learning to employ your research in focusing your marketing efforts.
  9. User Experience: Great, you’ve got users on the site. Now, CAN THEY USE IT? Usability was a concern back in the day, but now it’s become an increasingly important discipline to practice, and one that relies on many of the prior factors – research primary among them. Is your content organized well? Does the visual design enhance or obstruct your message? Can your users follow the desired courses of action you’ve laid out for them? Are your objectives served by each and every choice you’ve made along the way?

All of this is enough to induce a case of decision paralysis – but I’m powering on.

I’ve finally rediscovered the passion I felt in the early days of designing for the web, and I can’t wait to find out what comes next.