Amanda Olsen

Front End Developer User Experience Enthusiast

Blog

Thoughts on the industry

Forward JS: San Francisco, 2016

I was lucky enough to attend the Forward JS conference in San Francisco in late July. It was fantastic!

The conference occurs twice a year: in the earlier part of the year it is your standard in-person conference, in the later part of the year it is an online conference.

I attended the in-person conference, and did two workshops and one conference day: “Advanced JavaScript Fundamentals” with Kyle Simpson (workshop 1) and “Four Semesters of Computer Science in Six Hours” with Brian Holt (workshop 2).

While the content on the conference day was nice, I attended this conference because of the workshops. In fact, if I could have skipped the conference day, I would have. Why? I wanted hands-on, stick-in-my-mind, non-fluff non-excited-for-the-sake-of-being-excited (i.e. the way I assume most conferences are) kind of information.

Their workshops did not disappoint! Kyle Simpson is an incredible instructor and JavaScript master. Brian’s content was perfect for UI Engineers like me who feel like we may have missed something important in not getting a computer science degree. (I was actually surprised to see how little I was missing, i.e. what I already knew, but now I know what to focus on to make up for the rest!)

At a later point, I hope to post specific information from both of these workshops. For now: I could not recommend Forward JS more! (Or the city of San Francisco!)

Edit (Feb 2017): presentation I made of my Learnings from Forward JS Conference (PDF)

Regular Expression Basics

Note: I prepared the following notes for a presentation/workshop that I recently gave at work to the UI Engineer community.

Terms

  1. Regular Expression – a pattern describing a certain amount of text
    1. It is case sensitive.
  2. Literal character – a character we want to find
  3. Metacharacter – a character which does the finding

Metacharacters

  1. All Metacharacters: . | () [] ^ $ ? * + {} \
  2. Descriptions
    1. .
      1. Official Name: period or dot or wild.
      2. Shorthand: period
      3. Matches: any character except newline
      4. Example: .
    2. |
      1. Official Name: alternator
      2. Shorthand: Pipe
      3. Matches: the lefthand or righthand value
        1. If the lefthand side is found, it will skip the righthand side.
        2. Example:
          1. find e or m
          2. e|m
    3. ()
      1. Official Name: capture group
        1. A slightly more official name might be “subexpression”.
        2. They can be nested to any depth.
      2. Matches: a group
        1. Example:
          1. Find ‘gray’ or ‘grey’
          2. RegEx: gr(a|e)y
        2. However, it also create a variable which some call a “backreference”.
          1. $1 through $9
          2. Example:
            1. Wrap all “grays/greys” in strong tag
              1. Find: (gr(a|e)y)
              2. RegEx:
                <strong>$1</strong>
      3. Shorthand Name: none
    4. []
      1. Official name: Character Class
      2. Shorthand Name: Character Set
      3. Match: the first character, if it doesn’t exist try the next one, etc.
        1. Matches each character individually (i.e. it is not matching a string of characters).
        2. The order of the characters does not matter.
        3. If set to global, will match all characters.
      4. Examples:
        1. Find: all lowercase letters
          1. RegEx: [a-z]
          2. RegEx: [a-g1-4]
        2. Find: gray and grey
          1. RegEx: gr[ae]y
      5. Shorthand Character Classes (sometimes simply called “Character Classes”, but that’s less accurate)
        1. \d any number – shorthand for [0-9]
        2. \D anything but a number
        3. \s any space
        4. \S anything but a space
        5. \w any letter
        6. \W anything but a letter
  3. Anchors
    1. ^
      1. Official Name:
        1. Left Anchor (if outside of square brackets)
        2. Caret (if inside square brackets)
      2. Shorthand Name: none
      3. Matches
        1. If it’s before a letter, it means the letter following must be at the beginning of a string.
          1. Find: S at beginning of line
          2. RegEx: ^S
        2. If it’s inside square brackets, it means “not”.
          1. Example: [^m-z]
    2. $
      1. Offical Name: Right Anchor
      2. Shorthand: none
      3. Matches: If after a letter, it means the letter previous must be at the end of a string.
      4. Example
        1. Find: ! at end of string
        2. RegEx: !$
  4. Quantifiers – controls the number of times the preceding character is found
    1. ?
      1. Official name: question mark
      2. Shorhand Name: none
      3. Matches: 0 or 1 repetition of the preceding character
      4. Unsure, but careful
        1. I don’t know what I want! I just know I don’t want a lot of it.
      5. Example
        1. Find metacharacter with or without the “s”
          1. RegEx: metacharacters?
        2. Find all variations of Jennifer
          1. Jenn(ifer)?(s)?
          2. Jenn(ifer)?(s|y)?
          3. we’ll do further variation on this in the next section
    2. *
      1. Official Name: Asterisk or Star
      2. Matches: 0 or more repetition of the preceding character
      3. Shorthand Name: The Star
        • I’m the star, I’ll take everything, even if it’s not there.
          1. “Even if it’s not there” means it won’t break the regular expression.
      4. Example
        • Find metacharacter with or without the “s”
          1. RegEx: metacharacters*
        • Find all variations of Jennifer and includ the last name (whether or not it exists).
          1. Jenn(ifer)?(s|y)?\s\w
        • Find dollar amounts with or without dollars (i.e. could be sense only).
          1. \$\d*.
    3. +
      1. Official Name: Plus sign
      2. Matches: 1 or more repetitions of the preceeding character
      3. Shorthand Name: More friends!
        • He always wants more friends, and won’t take no for an answer.
      4. Example
        • Find: metacharacter with one or more s’s
        • RegEx: metacharacters+
    4. {}
      1. Official Name: Repetition Operator
      2. Shorthand Name: quantifier, or curly brackets
      3. Matches: n number of repetitions of the preceding character
      4. Example
        1. Find: metacharacters where there are 3 “s” only
          1. RegEx: metacharacters{3}
          2. RegEx: metacharacters{2,3}
          3. RegEx: metacharacters{4,}
        2. Find a standard telephone number
          1. {n} [0-9]{3}-[0-9]{4} finds 123-4567 (a standard telephone number)
  5. \
    1. Official Name: Backslash
    2. Matches: forces the following metacharacter to be treated as a literal character.
    3. Example
      1. Find: dollar amounts
      2. RegEx: \$\d*.\d{2}

Resources

Notes on Page Performance

[Note: I wrote this 03-31-2015 with the primary subject being CDW.com. This was my research at the time and not all statements may be true.]

  • Terms
    1. Page Performance
      1. How fast the page loads
    2. User Experience (in this context)
      1. How fast the user thinks the page loads
    3. Parse
      1. Break into pieces, and/or step through the pieces.
  • Page performance vs. user experience
    1. A page can perform well, but be a bad user experience.
    2. More about this later.
  • Load times
    1. Optimal: under 1 sec
    2. How fast is the CDW.com homepage?
      1. 5 seconds
      2. 2171 DOM elements
      3. (Source: http://www.webpagetest.org)
  • How a page is built/rendered
    1. The execution is top down and single threaded.
      1. Single threaded: processing one command at a time
    2. As soon as the parser hits a closing script tag, it must download and execute the entire script before parsing any more of the HTML (source).
      1. “This means often the parser must idly wait while scripts and stylesheets are downloaded.”
      2. Unless it has the async attribute.
    3. JS can not execute until all CSS has been downloaded.
      1. $(document).ready()  fires when the DOM is complete. – not necessarily needed
        1. It seems that’s when all CSS is downloaded and all JS has been executed… that can not be right.
    4. Process (overly simplistic)
      1. Read the HTML and parse it into a DOM tree.
      2. Load linked resources (stylesheets, scripts, images, media)
      3. Calculate the page layout (positions, sizes, colors, fonts, etc.)
      4. Render the page
  • Make it faster (for real):
    1. Reduce file size – greatest advantage here usually
      1. Minify CSS and JS
      2. “the average web page is now more than 1.8 megabytes, with images alone accounting for a full megabyte of that.” (source)
      3. “62% of the weight of the web is images” (source)
      4. CDW.com home page – 1.3 MB
        1. 653 KB were images
        2. 500 KB were JS
    2. Reduce number of files
    3. Move CSS and JS to external files
      1. Research blocks of styles – how bad this – Solutions pages
        1. Definitely, this should go into an external file
    4. Reduce the number of inline scripts
    5. Use CSS/HTML to replace images where possible
    6. Reduce the number of domains which your assets are called from
      1. https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Tips_for_authoring_fast-loading_HTML_pages
    7. Images: set height and width so browser doesn’t have to calculate this
      1. Is this still true? Especially given responsive design
    8. Use valid markup
      1. Browsers do not need to error-correct when you do this
    9. Reduce by depth
      1. When reflow happens, it executes faster if DOM is not super deep.
    10. Target a select set of browsers to develop for
      1. “Do not require your content to appear pixel-perfect in all browsers” (https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Tips_for_authoring_fast-loading_HTML_pages)
    11. Smart page structure
      1. head
        1. css
        2. scripts (necessary during page load)
      2. body
        1. content
        2. scripts (not necessary during page load – majority of scripts should go here)
          1. Scripts are parser blocking, meaning when the browser comes to a script tag, it downloads the entire file before continuing with the parsing.
    12. Javascript calls
      1. Use async where possible <script async >
        1. “Otherwise the browser will not render anything that is after the script tags that do not have these attributes.”
        2. Good to use when the DOM does not need to be finished while this JS runs and when no other scripts depend on this one being loaded.
        3. Best used for third party scripts.
        4. There’s no need to use async of script is loaded at the bottom of the page.
        5. Download and execute while the page is loading.
    13. Minimise browser reflow
      1. “Reflow is .. the web browser process for re-calculating the positions and geometries of elements in the document” (source)
      2. What triggers reflow?
        1. Add/remove element from the DOM
        2. Change an element’s class
        3. Resize the window
    14. Optimize CSS
      1. Remove unused CSS
      2. Minimize complex CSS selectors – descendant selectors in particular
        1. This may be something that we ignore as we use a CSS preprocessor. And that’s fine with me.
    15. Optimize JS
  • Make it faster (perceived)
    1. Speed Index: time for above-the-fold content to load (source)
      1. Load content above the fold quicker than all other content.
    2. Place most important/desired content at the top
      1. Perception of speed is influenced by how efficiently users can get what they most want out of your site
    3. Reassure users during wait times.
  • Chrome dev tools and Firebug
    1. Chrome – Network panel – better
      1. Nifty options at the top, “from cache”
    2. Firefox – Net panel – has some cool stuff
  • Browser differences
    1. “in Firefox there is this setting which limits the number of simultaneous requests per domain”
      1. http://stackoverflow.com/questions/1795438/load-and-execution-sequence-of-a-web-page
  • How fast is my function?
    1. var t0 = performance.now();
      [function here]
      var t1 = performance.now();
      console.log(“Call to doSomething took ” + (t1 – t0) + ” milliseconds.”);
    2. Chrome – Profiles – “Collect JavaScript CPU Profile”
      1. Start the profile, refresh the page, and then stop the profiler
  • Sources
    1. https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Tips_for_authoring_fast-loading_HTML_pages
    2. http://gent.ilcore.com/2011/05/how-web-page-loads.html
    3. http://stackoverflow.com/questions/1795438/load-and-execution-sequence-of-a-web-page
    4. Kind of helpful page on the “Net” panel in Firebug: https://getfirebug.com/wiki/index.php/Net_Panel
    5. http://www.smashingmagazine.com/2012/06/12/javascript-profiling-chrome-developer-tools/
    6. http://www.sitepoint.com/speed-index-measuring-page-load-time-different-way/
    7. http://www.sitepoint.com/optimizing-critical-rendering-path/
    8. https://developer.mozilla.org/en-US/docs/Web/API/Performance.now

Published Chrome Extension: Generate the Optimum jQuery Selector

I published my first Chrome Extension yesterday:

https://chrome.google.com/webstore/search/Optimum%20jQuery%20Selector

It can also be found on GitHub: https://github.com/amandaol/generate-selector

There’s certainly a Phase 2 or Phase 3 worth of features I’d like to add, to make it far more valuable, and I don’t think it’s totally bug free, but, “beta version” is live.

Enjoy!

Creative Layouts

I haven’t posted in a while but felt the need to post this:

http://www.buildinamsterdam.com/

Their layout and interactions are unique but not unintuitive – definitely creative and certainly thought provoking for considering more new/different/effective layouts and animations.

And I probably like this one because it looks a lot like my site. That said, it does things my site doesn’t, and I appreciate it’s uniqueness:

http://craftedbygc.com/

This is an interesting layout, also with some great animation, but it doesn’t work on all breakpoints. Probably just needed a bit more work.

http://melaniedaveid.com/

Appropriate, smart use of the full-screen approach – beautiful for this journalistic enterprise.

http://magazine.good.is/

Love this as an excellent example of responsive design. Also the particular design elements they chose aren’t obvious, so it’s a nice deviation from the normal (for example, no use of the hamburger icon).

https://www.fieldmuseum.org/

Super fun use of a map and a very creative UI in general: http://50problems50days.com/

Fabulous layout (albeit not that new) combined with video in a very effective manner: http://www.bbqcultures.com/en_GB/intro

Principles of Selecting Tags

  1. Divs should be used as a last resort.
  2. Divs are not evil.
    1. Feel free to use them. As a last resort.
  3. How do I know when to use a div?
    1. When no other tag will do.
  4. How do I  know when no other tag will do?
    1. By learning what those other tags do.
      1. Please go here: https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/HTML5_element_list
  5. But it’s all so amorphous! Everything is so unclear! We don’t know exactly when to use these tags!
    1. First, calm down.
    2. Second, they are intentionally broad in scope. This is called flexibility.
    3. Third, this is where your team comes in.
      1. Decide how you plan to use the tags.
      2. Leaving some flexibility is ok and probably preferable.
      3. Giving your team time to learn is ok, in fact, it’s expected.
    4. Fourth, to some small extent, the standard is still being developed.
      1. This is normal in web development and does not negate the value that using the standard provides.
    5. Fifth, this is not moral.
      1. This is not a situation of right and wrong. No one dies if you do this “wrong” (primarily because there is no wrong). These are HTML tags for crying out loud!
  6. Do I replace all divs with sections?
    1. No!
    2. A section is a set of elements you wish to group.
      1. Most likely your section will contain many divs.
  7. Are these nestable? How many times can I use them?
    1. All are nestable (although probably not nav and button).
    2. There is no limit to how many times you can use them.
      1. Why? You probably have  more than one nav, more than one article or section, etc.
    3. Principle of the matter: each set of content is wrapped in something which accurately describes the purpose of the content inside.
  8. What about header tags?
    1. Inside sectioning elements (article, aside, section, and nav), these restart (i.e. you start over at H1).
    2. They should still be used.
    3. Didn’t they provide structure before?
      1. No, they didn’t. Read the smashing magazine article below.
  9. Just make it easy for me so I don’t have to read anything:
    1. Article – stuff about one topic and where it can stand alone and still make sense
    2. Aside – peripheral information
    3. Header – stuff that is not main content that goes at the top
    4. Footer – stuff that is not main content that goes at the bottom
    5. Nav – self explanatory
    6. Button – self explanatory
    7. Section – stuff you wish to group which doesn’t fit any of the above tags
  10. Why does this matter?
    1. We have a worthless DOM otherwise.
      1. A primary purpose of the DOM is to communicate the meaning of the content. Since, by definition, divs mean nothing, making divs the backbone of your page means your DOM is communicating nothing.
    2. With a non-worthless DOM, we give parsers what they’ve always needed: a DOM which actually communicates the meaning of primary parts of the page.
    3. There’s also CSS and JS benefits we can get into later.
  11. It still doesn’t make sense!
    1. Give yourself time to learn (and also fix anything I may have gotten wrong above).
    2. Please read: http://www.smashingmagazine.com/2013/01/18/the-importance-of-sections/

Example: full-screen, responsive animation/interaction done well

http://www.nytimes.com/newsgraphics/2013/08/18/reshaping-new-york/

I haven't fully looked into this, or looked at the code much, but the user experience (at least on desktop) is pretty great. This is an example of using some trends – full-screen images, snapping-to, and some animation and video – well. It's easy to use trends/"new exciting things" poorly, but this site is even responsive! And, most importantly, the technology (the trends I listed above) actually fit the content. In other words, the medium fits the message, as opposed to just using a technique because it's cool or flashy. Here, it makes sense that the map is full screen, the images full screen, and they snap into place.

Sublime Text – Auto Saving

A common problem is refreshing a browser, noticing no change, assuming your code is wrong, attempting to fix it, no worky, and then after a long time realizing that you had simply never saved the file and probably your code was fine the whole time.

In walks Sublime! Go to "Preferences" then "Settings – User" and add the following line:

"save_on_focus_lost": true,

And you are done! Now every time that file in Sublime no longer has focus, it will automatically save.

Write a Macro and an Advanced Find/Replace for Sublime Text 2

I was recently given the task of converting many PDFs to HTML. This is not fun. However, it’s fun if you get to play with the Sublime Text 2 settings/packages/amazing stupedous power. Here’s what I wanted to do:

  1. In Adobe Reader, save PDF as HTML. Against that, do all of the following.
  2. run HTML Tidy
  3. delete doctype tag
  4. delete opening/closing HTML tags, and closing Body tag
  5. unindent two tabs
  6. delete opening Body tag
  7. delete head tag (and all child tags)
  8. delete style blocks
  9. delete all br tags
  10. delete all •
  11. delete all classes
  12. delete all span tags
  13. remove all width and height attributes from image tags
  14. replace “ with “
  15. replace ” with “
  16. replace ’ with ‘
  17. replace copyright symbol ©
  18. replace trademark sybmol ™
  19. replace registration symbol ®
  20. reconnect words that have been randomly broken into multiple “words”
  21. convert all totally uppercase strings to “Title Case”
  22. wrap each section in the appropriate tag
  23. style as needed (should hardly need anything given the previous step and the fact that styles have already been written)

Using Sublime Text, steps 2 through 19 could be automated. Here’s how.

  1. Install “HtmlTidy” package
    1. Oen Command Palette, type “install package”, type “HtmlTidy”.
    2. This assumes you’ve already installed the package “Package Control”. If no, do so.
  2. Install “RegReplace” package
    1. Open Command Palette, type “install package”, type “RegReplace”.
    2. It actually appears this is the only way to automate a large set of find/replace commands in Sublime Text. Rather surprising, but true. Anyway, this package works great.
  3. Read up on Macros. It’s really, really easy. Mostly you just need to know ctrl+q. This command both starts and stops recording of a macro.
  4. Record a macro for steps 2 through 5. Ctrl+q to both start and stop it. After that Tools -> Save Macro. Name it for future use.
  5. Start using RegReplace to do steps 6 through 19.
    1. You’ll want to copy over two files, and then customize those files to your heart’s content.
  6. (There’s actually more that could be said here, more detail, but I’ve run out of time, and my memory is bad. Either way! This post is mostly complete and still has some value.)

My sources:
http://superuser.com/questions/605861/how-do-i-record-and-run-multiple-find-replace-with-sublime-text-2
http://stackoverflow.com/questions/18656560/batch-find-and-replace-for-sublime-text-2
http://www.regexr.com/

 

Who Woulda Known

In my typical fashion, I'm going to create a new blog post to retain information that should be managed in a different way in the hopes that someday I add that missing functionality.

Goal (in the far off nebulous but very happy future):
Add a "Who Woulda Known" section to my site to record the quirks and anomolies that drive us nuts. Or at least me. I'm sure others could benefit too. For now, all such content will go below.

Content:

  1. In WordPress, if using a child theme and you want to update an include file (from the parent theme) and it just isn't working, then check the path to that file. If it is get_template_directory(), change it to get_stylesheet_directory(). Works like a charm.

     

    1. Source: http://codex.wordpress.org/
    2. If you are in functions.php and overriding the parent theme, use get_stylesheet_directory_uri().

Object Oriented Programming

Not actually being a back end developer, I lack some helpful concepts for the relatively small amount of programming that front end developers do (JavaScript primarily). And one concept that has always eluded me a bit is "Object Oriented Programming". What, my friends, is an object?! I had never really heard it defined. I just ran into the following and wanted to share it:

You may be wondering what OOP means by now. Object Oriented Programming is a relatively new concept, whereas the sum of the parts of a program make up the whole. Think of it this way: you are building a model car. You build the engine first. It can stand alone. It is an engine and everyone can see it's an engine. Next you build the body. It can also stand alone. Finally, you build the interior including the seats, steering wheel, and whatnot. Each, by itself is a object. But it is not a fully functioning car until all the pieces are put together. The sum of the objects (parts) make up the whole.

Continuing with the model car example, when you built the engine, you didn't use any of the parts that would later build the seats (a 350 four-barrel engine with a seat belt sticking out if the piston would look pretty silly). The point is that all the parts that made up the engine were of a certain class of parts. They all went together. Ditto with the body and then the interior.

Source: http://www.htmlgoodies.com/beyond/javascript/article.php/3470971/Java-vs-JavaScript.htm

 

Super Awesomeness: snippets in Sublime Text, dollar signs and more

http://stackoverflow.com/questions/11920176/how-to-use-dollar-signs-jquery-with-sublimetext2-snippets

First, I had the issue of a new snippet not appearing when I tried to insert it. And then, the above page not only fixed that but shows how to insert as many cursor insertion points into the code snippet as you would like (to tab through them). I was hoping that could be done, and sure enough it can.

Reordering fields for comments.php in WordPress

As best as I can tell, there is no way, in the PHP, to reorder all of the fields for comments.php in WordPress. You can reorder some, but you can’t move the textarea above the three primary fields. I ultimately achieved this by “cheating” – a wee bit of jquery. But I would have preferred to do this 1) in the PHP and 2) without modifying core. And, like I said, I see no way to do that. Am I wrong? I’ll post back if I ever find that I am. (And no, I did not modify core. I understand the consequences.)

Don’t Make Me Think

Don’t Make Me Think” is a book that takes it’s own medicine. Steve Krug is the author and it is probably the most well known book in the field of Usability. (In the larger field of UX, I imagine the most well known book is “The Design of Everyday Things” by Don Norman.)

This book is stripped down. Way stripped down. There are no extra words. No extra thoughts. In fact, there is very little content in the book, relatively speaking. It’s an easy read. 185 pages. But if you remove all the graphics and change the line height to 1 instead of 1.5 or 2, I would bet the book is no more than 100 pages.

The reason I’m so impressed with the paired-down copy is that I have read many other UX books and they do not do this. For an author to actually say less, means he has to figure out what he is really saying. That’s hard work. And what is true in copy is also true visually. To pair down means you have to go through the painful process of prioritizing, and then tossing some things. But this creates an excellent user experience. Now the user doesn’t have to wade through your words to figure out what you mean or wade through your visual layout to find out what the page is about. It facilitates a crystal clear experience which in turn requires no thinking.

Here’s what I learned from “Don’t Make Me Think”, which I think is the best usability book I’ve read yet.

  • Usability is not rocket science.
  • Usability is so important that it is better to do it “poorly” than not at all.
  • People don’t use things that are hard.
  • The first rule of usability is “Don’t make me think”
  • We don’t read pages. We scan them. Feverishly.
  • We don’t make optimal choices. We satisfice.
  • We don’t figure out how things work. We muddle through.
  • “If your audience is going to act like you’re designing billboards, then design great billboards.”
  • The second rule of usability is “It doesn’t matter how many times I have to click, as long as each click is a  mindless, unambiguous choice.”
  • The third rule of usability is “get rid of half the words on each page, then get rid of half of what’s left.”
  • There’s no substitute for testing.
  • Testing one user is 100 percent better than testing none.
  • Testing one user early in the project is better than testing 50 near the end.
  • The point of testing is not to prove or disprove something. It’s to inform your judgment.
  • Testing is an iterative process.
  • Worthwhile testing can be done with just three or four people.

The book then moves into usability testing (it’s relievingly easy/non-stressful) and talks about how to handle internal requests for something that will definitely result in poor usability. Overall, the book provides a way of thinking that is beneficial, attainable, and even reassuringly logical/simple, and then models that thinking in the user experience of the book itself. It was initially written in 2000 – which would usually mean I wouldn’t touch the book – but fortunately, while technology changes at the speed of light, design principles do not.