Stuff I Learned This Week: Jan 15-19 (actually, it’s February)

First post of 2018 is all about new resources and tools I learned in January, even though I’m writing in February.

Well, it’s a new year and it’s time to get back into writing. I had hoped to be a little more rigorous this year, as well as posting at least once a month, but I’d started writing this post way back in January and I’m just now getting to it in Feb.

So far, there are two subjects I definitely want to write about this year. The first is my experience learning front-end web development. The second is a critical commentary on UX hiring practices. I’ve started writing the second, but I just haven’t gotten the formatting quite right. I also have a few other topics waiting to the side, and I’m excited to get to those, too.

In the meantime, here are a few interesting things I learned this week (back in January).

The Current State of E-Commerce Product Page UX Performance (19 Common Pitfalls)

Now that I am working in e-commerce, I’m really interested in learning more about e-commerce experiences. The goals are a little different from web applications and digital products, but actually more straightforward. The goal is, essentially, getting out of the way of people making purchases. Although the results found on this site are hidden unless you pay, it’s still helpful to just have the names of the sites to review.

Laws of UX

Laws of UX. “Fitt’s Law”

A site that goes over many psychological principles of user experience. Some of these are also similar to fallacies or biases, such as the recency bias. One of them is not actually a “law”, and is just a renaming of Gestalt. I’m not a fan of renaming terms that have perfectly good names. But I am a fan of this concept and the site itself. It gives me ideas for the design of another site – maybe a site about goats.

Nunjucks Templating Language for JavaScript

As I explored the laws of UX site, I found that it had been built on a templating language that I was not aware existed. Nunjucks seems a lot like Pug (or Jade), in that you have a template with content chunks that get written independently and ported in via extend calls. I’m not explaining it well, but templating is amazing.

IBM has a new font

It is called “IBM Plex”. I like it, but it kind of looks like it would be the favorite font of Lt Commander Data.

Zappos Mobile App: Search with emojis

Presumably I downloaded this app because I was looking for shoes. Rain boots, really. Anyway, I was pretty (ahem) delighted to discover that you can search via emoji on the Zappos app. Here are some screen captures from my iPhone, where I’m searching for women’s dress boots.

Version Control Tools for Designers

This week I also came across some version control tools for designers. These are all for Mac computers, and specifically Sketch files. (Sketch is OK, but not great, IMO.) Abstract made the most sense to me; it seemed the closest to git. But here is the list for all 3. I haven’t used any of them.

Namasketch – Yoga For Beginners

Namasketch is a short yoga session for beginners, told in doodles. This sequence consists of ten basic poses in a six-minute flow. The goal is to help you create a strong foundation and develop a love for yoga before you move on to the next level.

A short, intro yoga class for yoga beginners.

It’s cute and friendly, using sketchy animation to demonstrate the poses. I think I might send this to my mom.

You can read more about the production process over at Product Hunt. Looks like he used a product called “Hype” which is the first I’m hearing of it. It’s only $50(!), but doesn’t sound like it’s for production, unless you have a small project like this.

Anyway, that’s what I learned! Until next time… 🙂

Announcement: Mobile Web Specialist Google Developer Challenge Scholarship

I am way late to be posting this, but…hey, I got a developer scholarship! Last year, I saw a post on my local Girl Develop It Slack channel about scholarships being offered by Google and Udacity to US residents.

They have 2 tracks, Android developer and Web developer. Within each track there are 2 levels, beginner and intermediate. Out of (what I read was) 100,000 applications, I ended up getting one of 10,000 places in the intermediate-level, Mobile Web Specialist track.

A few others in GDI also got seats, for both tracks and levels. Google and Udacity also offer this same experience for residents of Europe, Russia, Egypt, Israel and Turkey.

Instruction

The video-based courses are all on Udacity, and the instructor has so far been Jake Archibald, who is the supreme leader of all things Service Workers and Promises. In my opinion, the course is a little more advanced than intermediate, but maybe I just don’t understand JavaScript as well as other people. In any case, I’m glad to have this opportunity.

What is the course about?

So far the course is structured around creating an “offline-first” experience, using Service Workers. What this means is when people are using your website or app, they will still be able to get content, even when they don’t have internet connectivity.

Offline connectivity!? How does this happen?

This happens because those apps and websites are using Service Workers, which intercept the connection between the app and the internet (the network). The service worker allows developers to create custom responses and other behaviors when there is no internet connectivity or when there is poor internet connectivity.

What does the course cover?

As mentioned above, the course covers service workers, the Fetch API, the Cache API, and IndexedDB using Jake Archibald’s Promised library. The course also covers Promises, which ties all this together. In addition, as I’ve read through the forums and discussions that the course designers have provided for us, I’ve come to realize that we are also learning about ES6 (ECMAScript 6) and Progressive Web Apps, which might just be another way of saying “offline first”.

There are some great resources I’ve found. First, I’ve again turned to Lynda to help me learn more about ES6. Although currently the Lynda ES6 course I chose to review is not as comprehensive as this class, but that’s OK. I’ve also had to spend extra time on YouTube learning about Promises, because these are not exactly intuitive if you don’t have too much experience with JavaScript. The goldmine I’ve found so far is the Progressive Web Apps course also offered by Google. After finding all of this information, especially Google’s information, I have more respect for how much Google values it’s technology, the robustness of their applications, and how much time they spend evangelizing technology and helping developers get better.

In addition to this course, I’ve also found another “Grow With Google” course. The Google IT Support Professional Certificate, which is accessed on Coursera.

Official Scholarship Badge

I haven’t discussed this course or this scholarship with people at work. I have misgivings about sharing this news. I guess I’m in a wait and see approach. Maybe if I move onto the nanodegree…or maybe not. I have until April to finish the course.

Ladies of Creative Coding, CSS and Web Animations

I was inspired by this post after someone sent a funny video about how a dev team solved a problem and the only woman was the “mean” project manager. Like a few other women who got the link to the video, I thought it was a little stereotypical. That is because as I’ve learned more about CSS and creative uses of CSS and web animations, I’ve come to notice that a few experts and thought leaders in creative CSS and SVG animation are female. There are obviously more than I’m going to list here, but this post is based on my personal experiences with what they’ve put out.

In the order of whose work I last interacted with:

Sarah Drasner

I just finished Sarah’s course on Lynda, Advanced SVG Animations. It was originally produced by Frontend Masters, not Lynda. It’s more of an edited live course (with students in the room) than an online course, so the educational style is very different from Lynda. (I personally did not like this format for Lynda, but I think it would be much better as an in-person course.)

Her course went into using GreenSock Animation Plugin (GSAP) and a few of their plug-ins: Draggable, DrawSVG [Plugin], motion on a path as an animation technique, SplitText, and HSL color tweens. She also talked about how she plans her animations and showed examples of her work throughout the course.

 

Sarah also made an appearance on The Coding Train, on YouTube. Here she is giving a tutorial on web animations and Mo.js.

Sarah seems like an expert – a Frontend Master, if you will – on web animations, especially with SVG, GSAP, and any host of JavaScript or web plugins related to animation. In her Lynda/Frontend Master’s course, Sarah said she makes it a point to learn the animation capabilities for new JavaScript libraries and plugins. So for React, she’d learn the animation capabilities in React. For Angular, the animation capabilities in Angular. And so on, and so forth. That seems like a really smart way to keep up to date in an area of programming/web that you’re really interested in. (Mental note: I should do this too.)

 

Val Head

I came across Val’s course, also on Lynda, where she teaches a course on CSS Animations.

In looking up Val’s Lynda profile, I’ve also just discovered that she also teaches a course on responsive typography, called Responsive Typography Techniques! This course looks like it would go really well with the two web typography courses by Laura Franz, Typography for Web Designers and Choosing and Using Web Fonts, both of which I also highly, highly recommend.

Val was also a guest instructor on the Coding Train.

Val also teaches an in-person web animation course with…Sarah Drasner! Web Animation Workshops. These are one- and two-day courses, in multiple cities around North America and Europe (and possibly even further than that). Given that it’s now October, there aren’t many left this year. But, check out the website now so you can ask your boss for some funding for next year. They also have scholarships for underrepresented groups, if you happen to belong to one. You can sign up for announcements on new classes on the website.

Val also curates the UI Animation newsletter. The newsletter is how I found out about and joined, the Creative Coding Club. I feel terrible saying that I haven’t read many of Val’s UI Animation articles in a while. (Let’s be honest: I haven’t had much time to keep up with Creative Coding Club either. And let’s be even more honest and say I haven’t had time to keep up with much of my personal email, in general!) I might need to resubscribe with a different email address, because the links she shares are very inspirational and educational. And I want to keep up with what’s going on.

 

Leah Verou

I am not quite sure when or where I came across Leah Verou’s work, but it was obviously while I was trying to figure out CSS gradients because I’ve had her wonderful site, CSS Patterns Gallery, bookmarked for a year or two. You can look at my own project sites to see that I’ve used her CSS background patterns multiple times on my own projects. I probably also came across her Cubic Bezier site, as well, most likely during a CSS animation tutorial. You can find more of her projects on her website, http://lea.verou.me/projects/.

As I’m writing this, I cannot remember all the things that made me think of Leah, except for the bookmarks to her CSS gradients page. I think that at one point in the semi-recent past, it seemed that every time I looked for some building block for some cool CSS thing-a-ma-jig, turned out she’d already built it. I really hope she teaches a class somewhere, someday, because she really seems to know her stuff!

 

Rachel Nabors

To be fair, I have not signed up for any course with Rachel Nabors. Nor have I had much experience with her work. But, she does run a web animation Slack channel, called Animation at Work. Many of the discussions there seem a little over my head right now, but I want to keep involved and stay learning. She also offers a few online courses and has a book published by A Book Apart, called Animation at Work. She also runs a web animation newsletter, Web Animation Weekly. Check out the Archive if you’re interested in learning more. (As you’ve guessed, I am not really reading this newsletter either.)

Rachel is also an amazing Illustrator, and her animations look really good! You can find examples of her work, and get a sense of what I mean about her animation/cartooning skills, by checking out her website(s):

Many of her courses seem to cover a lot of topics as Val Head. But, if you’re interested in CSS animation, motion, and transitions, my experience has been that the best results come from learning from as many sources as possible. Sign up for both!

 

Shoutouts and More Ladies to Look Up:

Sarah Drasner mentioned Sara Soueidan (pronounced Sweden) a couple of times in her course. I looked her up and she seems like a pretty amazing front-end developer. She is on Twitter @SaraSoueidan. Sarah also mentioned Joni Trythall and Amelia Bellamy-Royds in her credits at the end of her course. I will have to look them up later…

Nat Cooper is the founder of the Creative Coding Club. Like Rachel Nabors, she has amazing graphics skills and comes up with some pretty sweet animations and keeps the group motivated every month. Find her on Twitter @natacoops and the Creative Coding Club (@artcodeclub).