Category: Education

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).

Learning About Lean, Kanban, Six Sigma, and Kaizen

A few months ago, a friend of mine recently asked on LinkedIn if anyone had any information about Six Sigma certification. It caught my eye, not only because a friend asked, but also because I’d recently come across a conversation on Reddit about Six Sigma, which got me thinking about the concept of kaizen, which is Japanese for “continuous improvement”. Following this path further, I learned more about the connections between kaizen, Six Sigma, and Lean. Six Sigma appears to be one way to implement Lean, which appears to be the way to implement/interpret kaizen*.

NYC Lean/Kanban Meetup, June 2017

Cut to the NYC Lean/Kanban Meetup, which I attended in June to learn more. Unfortunately, it was the last of the season, until September, but they have an ongoing weekly morning get-together on Fridays at 8:30 AM.

https://www.meetup.com/nyc-kanban/

Event Recap

The event was meant to recap a recent series of meetups on Lean as well as a planning session for the next year/season. The talk was interesting, but it’s clear that I’m an n00b. I picked up a few names, book titles, and resources, listed below.

People

Book

During the speaker’s recap, he mentioned a book title, This Is Lean. The book can be found at www.thisislean.com.

A video on ThisIsLean.com explains more about the book:

Radio

The speaker also mentioned a This American Life episode on NUMMI, a GM + Toyota manufacturing partnership. Interestingly, I also found an article disputing the TAL episode, although I think that might be more due to a pro-union POV than actual criticism of the article.

Storymapping

After the speaker’s presentation, we got together to talk about a few ideas for the next year. The table I joined was on story mapping, which someone had suggested as a topic. I joined this table because I wanted to learn more about story mapping. And a few other people at the table didn’t seem to know exactly how the person who suggested it could use it in the example she provided. But, eventually, we eliminated other choices and figured out how it could work. So, it will be a topic next “year”, after the summer break, and I hope to learn more. Although it’s meant to be used in Agile, I guess you could use it even if you don’t work in Agile.

Resources:

Story Mapping Tools: 

  • Cardboardit.com – https://cardboardit.com/
  • Feature map – https://www.featuremap.co/en

Certification

Also, in chatting with someone there, I learned that there is Scrum Product Owner certification that you can get in 2 days. I found a session in Saint Paul, MN, and that one is $1,095 per person at regular price. There was an option to filter for discount only, but I’m guessing it will still be several hundred dollars.

Implementing Kaizen Without Knowing It

As a side note, I used to own a book called, One Small Step Can Change Your Life: The Kaizen Way. (There’s also a summary of the book’s contents on YouTube, by someone unrelated to the book and the author.) But after getting through the audiobook of The Life Changing Magic of Tidying Up, I sold it to The Strand.

Incidentally, “tidying” (and cleaning) is another cultural efficiency practice from Japan, which I first learned about on Japanology Plus. It might not be as respected in business circles as kaizen or Lean, but it appears to be very much a part of Japanese culture.

Even though I gave up the kaizen book, I have been using the concept of small changes and small steps. One instance of this is trying to learn new languages with the Duolingo iPhone app, by focusing on just getting through at least one lesson a day. I hope to post my progress on LinkedIn, once I get to 25% in any language.

Also, in chatting with someone there, I learned that there is Scrum Product Owner certification that you can get in 2 days. I found a session in Saint Paul, MN, and that one is $1,095 per person at regular price. There was an option to filter for discount only, but I’m guessing it will still be several hundred dollars.

Event: Advancing The Careers of Technical Women (ACT-W), Details

Speakers and Notes from “Advancing The Careers of Technical Women (ACT-W)” New York 2017 Conference

Following up from my previous post about the very inspiring ACT-W NY conference with a write-up of my notes.

Unfortunately, I could not attend all of the presentations, but they were all interesting an inspiring. Below are notes from just a few of the speakers I heard.

Presentation One: Advice about promoting yourself, by Natasha Awasthi

Her advice came in two parts, due to being a speaker in two presentations at the conference. I liked what she had to say in the first one, I went to the second.

  1. It’s not bragging to talk about your accomplishments. You’re earning trust:
    • I can completely relate with the idea of feeling like I’m bragging when talking about past accomplishments. So much so that I might avoid talking about what I’ve done in the past, even though it would be very relevant. Now that I can frame my past as a credential to build trust, I will be “bragging” about my past accomplishments as much as possible
  2. Don’t network. Build a community:
    • As an introverted person, the idea walking up to people and introducing myself for the sake of “business connections” or “networking” is almost like a 4-letter word. It sounds so fake and manufactured; like you’re “using” people. But when framed as “community building”, that is a concept I can get behind. It’s not so scary. I can definitely do that.
  3. Don’t get mad. Get what you want. (Create an action plan.)

 

Presentation 2: A story about diversity, by YZ Chin

Her advice was about diversity and the importance of being yourself. There were two main take-aways:

One: Diversity is important because if everyone is the same, it means they can all fail the same way. She went on to give an example about how, as a new member of the engineering team, she solved a critical error that all the other experienced team members failed to recognize. Her value to the team was her knowledge about their customers, not her skill as a software engineer.

Two: It’s important to be honest. In her example, she recognized that you’re not an impostor if you say you’re 2nd best. She again related a story where her manage told her that he didn’t hire her to be the best engineer. He hired her for her customer expertise.

 

Presentation 3: What she did well / What she wishes she done better, by Natasha Awasthi 

In Natasha’s second talk, she presented a list of career aphorisms based on what she had done well vs things she wishes she could have done better. I think the first list mostly speaks for itself. But I’ll explain the second a little more, because I think it’s interesting and helpful.

What she wishes she had done better
  1. Show don’t tell.
  2. Seek to clarify before you criticize.
  3. Find a kernel of truth.
  4. Ask for help.
  5. Have a board of people as advisors (not friends or family):
    • This is a group of professional contacts, that will give you difficult but critical feedback on your ideas, projects, career, etc. I thought this tied in really well with the point from her earlier presentation, about building community. People like this would be a great addition.
  6. Working together means going slower.
What she did well
  1. Act on little knowledge & lot of imagination.
  2. Ask for help, twice:
    • What she means is, instead of getting angry and assume people have simply ignored your request for help, just ask again.
  3. Declare your ignorance:
    • This is sort of like getting lost. Sometimes you just continue on the same path, thinking you’re going the right way and then realize you’re way off path. It would be better to just admit you’re lost and find out where you are and where you need to go, than to just start walking. Same here: rather than pretend you know the answer, admit you don’t and find someone who can help.
  4. Make it easy to have hard conversations:
    • I’m actually quite bad at this, probably because of my desire to separate my professional and personal life. In her example, if you never talk to a colleague about anything, good or bad, that one time you’ve got to have a conversation it’s clearly probably about something terrible. So, take the time to get to know your colleague on a more personal basis and build up a congenial rapport.
  5. Focus on what you want.
  6. Follow your obsessions:
    • She mentioned that she was a writer, who wrote articles for Fast Company. She said she also taught classes at General Assembly.

 

Presentation 3: How to Tell Your Story / Personal Brand, by General Assembly

This talk was given by two people from General Assembly. I think their job was to help students find jobs, or help them find support. (Another example of working in tech, but not being technical.)

At first, I was really annoyed when this talk started. I thought it would be about building a personal brand, which is an area where I felt I could use help. Instead the dual presenters gave somewhat detailed stories about their backgrounds, which I was kind of annoyed by. However, they helped make it useful by talking about how to use your story to convey to employers how you can help them.

The Q&A and Summary section really clarified a few points from them, about what employers are looking for when it comes to the non-technical qualities of an employment candidate:

  1. Employers want to know you have leadership qualities, which they described as seeking personal growth. I personally am not sure what leadership means to me, but I do know that I am growth-minded in that I am always looking to learn and expand my skillset. I want to know what I don’t know.
  2. Employers want to know that you take criticism well. I suppose I always knew this, but it’s good to hear it spelled out like this. For me, trying to apply the improv “Yes, and…” technique might be a good way to accept criticism when I don’t want to accept it. “Yes, I see your critique…and X-Y-Z.”
  3. Coming up with a story can be hard. So they suggested asking friends or acquaintances, maybe that board of advisors, to send 3 characteristics that they would use to describe you. And using that list to help guide your story.

In addition, in combination with YZ Chin’s story above, I came away with the idea that I should think of my story into tech as unique to me – and I shouldn’t feel ashamed or embarrassed to talk about how I didn’t go to design school or study engineering. I’m not being an impostor by admitting that my path into the tech industry was a straight line. Some employers might find that meandering experience valuable.

 

Final Talk of the Day

My last talk of the day, I actually cannot remember what it was called. But it was about finding peace at work and learning to cope with difficult situations.

In this story, the presenter talked about how she created her own job, at her current company, after running into resistance and unhappiness in her previous role.

A quote:

If you think it, you will say it. If you say it, you will do it.

They attributed that to Confucius but many people have said something similar.

A few more:
  • Move towards vs move away
  • Bearing down. (Sometimes you just have to work through difficult times, rather than run away.)
  • Crowd source advice from toughest critics. (Sound familiar? This theme is common, I guess.)

Event: Advancing The Careers of Technical Women (ACT-W), Highlights

Wisdom from “Advancing The Careers of Technical Women (ACT-W)” New York 2017 Conference

Or How a Woman’s Tech Conference Saved My Butt

Kind of on a whim, I decided to attend the Advancing The Careers of Technical Women (ACT-W), 1-day conference. The purpose was to provide career advice for women in all parts of the tech world, not just for developers. Overall, it was incredibly inspiring and energizing, which I really needed. Job hunts can be very depressing.

In an upcoming post, I will share detailed notes from each speaker. But for now, I will share some highlights and how I’ve applied the advice I learned from attending.

Highlights of Wisdom, Summarized

  • build a community; don’t network
  • create an objective panel of reviewers
  • tell your unique story
  • diversity of opinions and experience is important
  • earn trust
  • ask for help
  • be honest

Taking Action

Examples of how I applied the advice I learned by taking action:

1 – BUILDING A COMMUNITY

I immediately started applying the concept of community building. I got some business cards and names, from a few attendees, and I connected with them on LinkedIn and sent emails. I’ve even been reaching out to complete strangers on LinkedIn!

Coincidentally, this was kind of happening in real life, too, which made everything a little overwhelming but also provided another opportunity to try out these new ideas.

2 – ASKING FOR HELP

I decided to ask for help from people I haven’t tried before. For instance, I reached out to employers that rejected me for a job, to ask for help. Either to ask what they look for or to ask for career advice.

3 – BUILDING TRUST

I’ve been working on redoing my website (again) and this time, I included more information highlighting my expertise. Not to brag, but to build trust.

4 – TELLING MY STORY

As a part of redoing my website, I’ve included an About page. I’ve used part of that page to go into more detail into my background and how I got to where I am.

My new “About Me” page has a “My Story” section.

 

My next post will include detailed notes from the speakers.

Display Text Typography Projects

Continuing with my ongoing education in design, I focused recently on typography and layout. And I went through two Lynda.com courses to do it.

Those courses are called Learning to Set Display Type and Learning Graphic Design: Set Perfect Text. They are both taught by John McWade.

The classes John McWade teaches are exceptional because he is such an excellent instructor and quite good at explaining the concepts he is trying to get across. I recommend both of the classes I mentioned above, as well as other classes in the Lynda library by this instructor. Here are previews of these two courses.

Neither of these classes include exercise files. But after watching both of these courses I was inspired and motivated to try my own type projects, to put his advice into use.

Type Rules I Learned

It sounds basic, but I wasn’t aware that some fonts have additional glyphs that can be used instead of the regular font. Bookmania is an example of a font with tons of extra options for letters.
I also learned about justifying text, using hyphenation and spacing to help words fit. I also learned about using hair-spaces and thin-spaces, and using drop-caps.
Actually, the class doesn’t go into how exactly one would create a dropcap. So, I turned to YouTube – or as I like to call it, the second internet – to find another tutorial.
And I found one. This one is actually by another Lynda instructor, Anne-Marie Concepcion. She makes it look so easy.

 As soon as I learned how to do this, I wanted to try it right away. Voila!

Type Stuff I Made

dropcaps

Now we’re getting to the fun part. First is the dropcap I made after watching the YouTube video.
Drop cap and Display type
Used Bookmania and a Lynda tutorial to create a dropcap.

In this one, I was able to move the text corners so that the text flowed around the dropcap R. Looks cool.

I was inspired to use the extra glyphs in Bookmania to create my own name. I used the smallcap version of the letter ‘A’ in the word, “alliwalk”.

Projects with Images

I like to collect stock photos – I know, it’s a bad habit – because I think that someday I’ll use one for a project. So, I end up with many stock photos that I don’t use. (Sometimes I use them here on my blog.) Well, I was finally able to put a few to good use.

All Dressed Up

The first is this nice “Man in a suit putting on a tie”. I wasn’t sure what I was going for. Maybe a book cover or magazine spread. But, I think what I have is some sort of flyer concept.

This image uses Bickham Script Pro and Didot.

This image uses Bickham Script Pro, which has tons of fancy glyphs, and Didot. Didot has a certain fashionable sense to it, and I think it works. I wanted this to have a bespoke aura about it, yet still masculine. The italicized Dido, and the extra swirls from Bickham Script Pro help to get that across.

New rules of computer technology

BarryW90-Black, BarryW90-Thin, Futura Medium, and Minion Pro

In this case I wanted to use justified type, as John McWade had shown in his course. I stuck with Minion Pro, because it was easier to work with. And I added in a few random elements – a few numbers, some quotes, some pronouns – just to incorporate some of the lessons from the course. One thing I wasn’t able to replicate was keeping the subsequent letters from the word in the dropcap closer than the other words on lines 2 and 3. InDesign just wasn’t cooperating for me.

But I did enjoy this project. BarryW90-Black and Thin are highly stylized, very technical-looking fonts. I was inspired to find a new stock photo for them. Something computer-oriented.

 

Next time…

In my next post, I’ll talk about a few more projects in InDesign, and another type/logo(!) project I made for a fake company I invented called Apex Travel.