Atomic Habits that will turn you into a Superhero

Drawing on numerous resources, this presentation investigates what habits are, how they work, and how building the right ones into your life will turn you into a literal superhero. We’ll take a look at triggers, cravings, and rewards; the formation of good habits and the destruction of bad habits; and the top 6 High Performance Habits developed by Brendon Burchard and the High Performance Institute after over a decade of research and coaching.

Have you ever felt too busy? Overwhelmed? Stretched too thin? Your work doesn’t have to be like that. Your life in particular, shouldn’t be like that.

Drawing on numerous resources, this presentation investigates what habits are, how they work, and how building the right ones into your life will turn you into a literal superhero. We’ll take a look at triggers, cravings, and rewards; the formation of good habits and the destruction of bad habits; and the top 6 High Performance Habits developed by Brendon Burchard and the High Performance Institute after over a decade of research and coaching.

If you’ve ever wondered such things as “How long does it take to develop a new habit?” or “What if I fail in maintaining my habits?” or even “Which habits will move the needle the most in my professional and personal life?” then this talk is for you. The talk also ends with a discussion on good and bad teaching habits and how to improve yourself in your classroom and office.


Overview

What’s the difference between superheroes and us “normal” people?

Could it be living a life of purpose? Purpose leads to fulfillment. Fulfillment equals happiness.

Some people die at 25 and aren’t buried until 75.

Ben Franklin

A basic framework for happiness:

  • Engagement: Time spent daily, hopefully in a job that challenges us, but also in our after-hours hobbies. (see Power of Full Engagement)
  • Mastery: An ability to show ourselves that we are making consistent progress and improvements toward a specified goal. (see Drive)
  • Flow: Energy and attention dedicated each day to an activity that puts us in the zone. (see Flow)

Happiness is a consequence of the things you do daily, not a reward.

Steve Kamb, Level Up Your Life

Your (Super) Hero’s Journey

  1. Act 1
    1. Introduction to the protagonist’s world (that’s you!)
    2. Call to Action: Habits? What about Freedom?
      1. Neuro-pathways & Significance of your Identity
    3. Crossing the Threshold: How habits work
      1. Immediacy and addiction
  2. Act 2
    1. Meet the Mentor(s)
      1. Be intentional
      2. Reframe your mind
      3. Get some Accountability
    2. First Challenge: Make Good Habits inevitable
      1. The Law of Least Effort & The Goldilocks Principle
      2. Keystone habits & Habit stacking
    3. Temptation: Make Bad Habits impossible
    4. Dark Moment: 
      1. Importance of your Environment
      2. Schedule over Scope (Don’t break the Chain)
      3. Frequency: “How long”? Try “how much”?
  3. Act 3
    1. Final Conflict: High Performance (Superhero) Habits
      1. Personal: Seek Clarity
      2. Personal: Generate Energy
      3. Personal: Raise Necessity
      4. Social: Increase Productivity
      5. Social: Develop Influence
      6. Social: Demonstrate Courage
    2. Return home (changed): Systems trump Goals (“Continue playing for the love of the game”)

Ready Player One

1.1 Introduction

How’s life? 

Have you ever felt too busy? Overwhelmed? Stretched too thin? Your work doesn’t have to be like that. Your life in particular, shouldn’t be like that. 

A 2006 Duke University study indicates that more than 40% of your daily activities are habitual. Not enjoying your day? Change your habits.

We are what we repeatedly do. Excellence, then is not an act, but a habit.

Will Durant

1.2 Call To Action

Once more, from above: “Not enjoying your day? Change your habits.”

But what about Freedom?

Many people think that increasing our Habits decreases our Freedom for choice in life. But the opposite is actually true.

  • Jocko Willink (former US Navy Seal): posted a picture of himself surfing with his son before work one morning.
    • Commenter #1: “Must be nice.”
    • Commenter #2: “Discipline equals freedom.”
    • Advice: Be incredibly disciplined about parts of your day so that you have the freedom to enjoy the rest of your day.
  • Steve Jobs (& Mark Zuckerberg): often wear the same thing every day
    • Advice: Make decisions in advance, be as habitual as possible about certain things, to reduce cognitive load and allow yourself more brain power for the things that truly matter.

Introduction to “Neuro-pathways”

Neuro-pathways are connections formed in the brain between neurons in different areas of the brain. The more you perform a certain habit, the more deeply ingrained it becomes. But, we can change our neuro-pathways.

Your life moves in the direction of your strongest thoughts. Don’t like where your life is moving? Change your thoughts!

Craig Groeschel (paraphrase)

Every thought or action is a “vote” for who you are or want to become. Over time, will “Future You” thank you for the decisions “Current You” is making to shape his/her identity?

1.3 Crossing the Threshold

Charles Duhigg wrote an excellent book called The Power of Habit that clearly lays out how habits work, how to change bad habits into good ones, and how to create new habits.

How Habits work

  1. Cue: Something triggers your habit or a Craving
  2. Routine: You do something to satisfy this
  3. Reward: The cycle has a clear ending

Often, you cannot fully control the Cue nor the Reward. Therefore, Duhigg argues that to change a habit, you should focus on the Routine. In truth, all people have control over the choices they make about their habit routines. But many people feel controlled by their habits, not in control of them. 

  • Why do I do what I don’t want to do?
  • Why don’t I do what I want to do?

Additionally, many people express difficulty in creating new habits or breaking old, deeply ingrained ones.

Immediate Consequences

In the book Atomic Habits, James Clear points out that “immediate” rewards or consequences are the key. 

  • That which is immediately rewarded = repeated
  • That which is immediately punished = prevented

Returning to our discussion of “Future You” vs. “Current You,” we can understand how “Current You” is more in favor of Netflix and ice cream after a long day at work than in helping “Future You” become fit. The craving for immediate, visible gratification often outweighs our desire for long-term positive outcomes precisely because we cannot immediately perceive that our efforts have had any effect. 

  • Netflix + ice cream = immediate stress relief and relaxation
  • Exercise at the gym = muscular pain for…. what? long-term health? No thanks, I’ll take the immediate hit of sugar and comedy~

Rising Action

2.1 Meeting the Mentor(s)

Much of this next section includes notes from James Clear’s Atomic Habits. Check out his blog for more great articles.


Humans tend to be weak in the moments of Craving or HATS (Hunger, Anger, Tiredness, Stress). But there are a few things we can do about it:

  1. Release tension, Set intention (from High Performance Habits)
  2. Reframe the Cues
  3. Get some Accountability

Set intention practices

  • During the pauses between activities, mentally release what was, and decide on what you will make of what is to come.
    • After work, in front of my door, take 10 deep breaths, release my work stress, determine to smile at my wife and greet my children with hugs first upon entering the house
  • Visualize the outcome you want
    • Michael Phelps: famously played “mental videotapes” in his head every night before bed during training and before every meet in which he “performed” at his peak – when the race came, he did
    • Arnold Schwarzenegger: when interviewed after his first movie “Hercules in New York” flopped, claimed he’d “be the biggest name in Hollywood” 
  • Write out an “Implementation Intention
    • Research indicates that writing down your intention to do a certain thing at a certain time and place raises the likelihood you’ll stick with your intention to 91% (compared with 35-38% success if you rely on motivation or self-control alone)

Reframing practices

  • Your Cue can be deceptive and you can change how you interpret it
    • You don’t crave chips, you crave something sweet and crunchy
    • You don’t crave alcohol, but you are thirsty, need to relax, and want some flavor
    • You don’t crave a cigarette, you crave conversation (or alone time) outside the office in the cool fall air
    • You don’t crave sex with a stranger, you crave physical release (exercise) or human contact (snuggling)
    • Your heart rate and breathing increasing, palms getting sweaty before a competition or presentation isn’t you being afraid of that, it’s your body preparing you to perform at the highest level

Accountability practices

  • Find someone who’s already doing what you want, and ask to join them (training at the gym)
  • Sign a “Habit Contract” with a partner that lays out immediate consequences (like giving a set amount of money to something or someone you hate) if you fail to live up to your end of the bargain

2.2 First Challenge

Time to put what you’ve learned about Habits to work. Let’s create a NEW one! Advise: start small. The “Path of Least Resistance” teaches us that the easiest thing to do is the thing you will do. So, setting a goal of ONE pull-up per day is a much easier (and better) way to get started exercising than trying to begin going to the gym everyday. 

(Note: I literally remade my life in 2013 in a similar fashion after I first listened to The Power of Habit.) 

Make Good Habits inevitable

  1. Cue: Make it obvious
    1. An alarm, a time of day, after a certain activity, in a certain place
    2. You can also pair a new habit with a Keystone habit (one that is the “gateway” to other habits), or Stack your habits
  2. Craving: Make it attractive
    1. Temptation bundling = give yourself something you want (chocolate) for doing something you need to do (exercise)
  3. Routine: Make it easy
    1. Use the “Path of Least Resistance” to determine the smallest step you need to take to begin a new habit. 
      1. Want to run? Set out your clothes the night before.
      2. Read more? Set a book on your bed after you make it.
      3. Wake up early? Get home by 10pm.
    2. Additionally, the “Goldilocks Rule” says that if something is too easy or too hard, you won’t stay motivated. Things within 4% of a “stretch” are “just right” and allow us to continually progress.
  4. Reward: Make it satisfying
    1. Satisfy your Craving – eat the chocolate, watch the Netflix show, drink your special coffee, etc

Here’s a practical example of something I should start doing a better job of.

My example: Grading student work:

  1. Cue: Every Friday at 3pm
  2. Craving: need a mid-afternoon energy boost
  3. Routine: sit down at the computer, open the Gradebook on the left and assignments on the right, begin grading
  4. Reward: buy a latte (I don’t buy them often), or eat my favorite chocolate

Keystone habits & Habit Stacking

  • Keystone habits are habits that set the foundation for and naturally lead in to other habits
    • Good ones:
      • I wake up early so
      • I eat breakfast and go to the gym so
      • I shower so
      • I shave so
      • I brush my teeth so
      • I feel healthy so
      • I’m energized so
      • I arrive at work energized so
      • I do my best work so
      • I get promoted…
    • Bad ones:
      • I wake up late so
      • I’m rushed so
      • I don’t eat breakfast so
      • I’m angry on the road to work so
      • I get in an accident so
      • I arrive late so
      • I snap at my coworkers so
      • I under-perform so
      • I get fired… 
  • Habit stacking is where you look through your current habits and determine a place (with a Cue that is the completion of one habit) where you can insert a new habit
    • For example, in the “Good” list above, how about inserting “read for 15 minutes” after “I brush my teeth”? Then, you list will read:
      • … I brush my teeth so
      • <I read for 15 minutes so>
      • I feel healthy <and smart> so

2.3 Temptation

Reverse the habit loop above to flip bad habits upside down and destroy them!

Make Bad Habits impossible

  1. Cue: Make it invisible
    1. Put the TV in the closet, keep your phone in another room, keep junk food out of the house, drive down a different road at lunch
  2. Craving: Make it ugly
    1. Picture yourself with 20 extra kg, visualize the fat and calories seeping into your blood stream and clogging your arteries, enable black & white mode on your phone
  3. Routine: Make it difficult
    1. Remove batteries from the remote, delete the app altogether, change your environment (more on this in the next section)
  4. Reward: Make it empty
    1. Chide yourself whenever you engage in that behavior, remove one good thing you enjoy from your life as a consequence, pay the dues of your “Habit Contract” (above)

My example: Checking Facebook:

  1. Cue: I’m bored, need entertained, or want some connection
  2. Craving: I visualize it as a slot machine that delivers politically-charged negativity more than it delivers real satisfaction
  3. Routine: Deleted the Facebook app in June
  4. Reward: (also with YouTube) I only give it one page scroll when I’m in a “bored” state of mind

2.4 Dark Moment

But what if you fail? Obviously we cannot succeed 100% of the time.

When you FAIL at Good Habits

  •  Never Miss Twice: Get back on the horse as quickly as possible. Anyone (everyone) can have a bad day. It’s not a single mistake that changes the direction of your life. But a series of many missteps over many years, a repeated pattern of “bad” behavior will. Correct yourself as quickly as possible and get back at it.
  • Don’t Break the Chain: Use a calendar and put a green circle around any day you perform your good habit. After a while, you will start a series of green circles (indicating success), and you will find yourself mentally looking for ways to NOT break your cycle.

When you FAIL at controlling Bad Habits

  • Environment: Understand that your environment has a HUGE impact on your habits
    • In the Vietnam War, up to 20% of soldiers became addicted to heroin (35% reported having tried it). After returning home (to a new environment), only 5% of them were re-addicted in one year (12% in three years)
    • The opposite statistics are often true for domestic heroin addicts who go to rehab, get clean, and then return to the same old environment that led to their addiction
    • Upgrade your Bat Cave (from Level Up Your Life): If your environment is causing you to stumble, change it! You have control over the many of the things you see, listen to, do, and eat every day.
  • Identity: Remind yourself of who you ARE deep down (like Simba in the Lion King). Are you really the kind of person who does these things? No! Remind yourself who you ARE and that each vote (action) FOR or AGAINST that identity will make it stronger or weaker.

Anecdote on Identity:

There was a young boy who loved to play baseball. He would go out to the field all the time, throw the ball up in the air, and try to hit it.

  1. On the first throw, he said, “Here comes Johnny, the greatest hitter who has ever lived!” He threw it up. A swing, and a miss.
  2. On the second throw, “I’m still the greatest hitter who has ever lived!” A throw, a swing, and a miss.
  3. On the third throw, “I’m still the greatest hitter who has ever lived!” Again, throw, swing, miss.
  4. Finally, he exclaimed: “WOW! I can’t believe it! I’m also the greatest pitcher who has ever lived! Because I just struck out the greatest hitter who has ever lived!”

Climax

The habits outlined in this next section come from Brendon Burchard’s High Performance Habits. Check out his blog for more great articles.

3.1 Final Conflict

So, what are THE best habits you can cultivate in your own life? Here are notes about 6 that have been compiled by Brendon Burchard at the High Performance Institute after over a decade of hands-on research and coaching with world-class performers.

I’ve mapped these habits to many of the spokes on Dan Miller’s Wheel of Life from his book 48 Days to the Work You Love:

High Performance Habits

Personal Habits

  1. Seek Clarity (Mind)
    1. What’s your Identity? Are you who you want to be? What kinds of things would that person do / not do? Am I living into that Identity?
    2. What are your Habits? Be mindful of this. Perform a self-inventory and determine where there’s room for improvement.
    3. Set up Quarterly reviews. I’ve personally found it very helpful to quarterly take a FULL day away to brainstorm and become VERY clear about myself, my habits, environment, and vision for the future. It makes the next quarter much smoother. Two good resources:
      1. Your Best Year Ever by Michael Hyatt
      2. The 12-Week Year by Brian P. Moran & Michael Lennington 
  2. Generate Energy (Body)
    1. Physically, do you have enough energy? Exercise has been shown to help increase energy levels (as has proper nutrition)
    2. Can you bring energy to what you do? Are you passionate and alive about it?
    3. Personally: I go to the gym every morning before 7am and commute by bike. The mental and physical benefits are immeasurable.
  3. Raise Necessity (Spirit)
    1. People with a greater sense of “necessity” are more likely to follow-through with their tasks. Raise your “necessity”, raise your follow-though.
    2. How important is it that you get a certain thing done?
    3. Personally: When I find myself slacking, I have to constantly go back to my “Why” (Start with Why) to remind myself why I’m pushing and hustling and working hard.

Social Habits

  1. Increase Productivity (Career)
    1. How can you do more with less? How can you be more efficient with what you have? How can you accomplish tasks more quickly with the same level of quality?
    2. Set a Schedule, not a Deadline: The problem with deadlines is when we miss them, we feel guilty, and sometimes even give up on what we were doing – even if we’re better off now than when we started.
    3. Personally: This means getting up every single morning (even Sundays) well before the sun is up. I try to set aside a minimum of 3 hours every morning before work to accomplishing my personal (non-work related) most important tasks.
    4. Prioritize Education over Entertainment: I’ve also not had a TV for 10 years. I spend the majority of my “down” time engaged in some kind of “active” relaxation that is stimulating my brain and helping me learn new skills. Increase the output that matters and get insanely good at new skills.
  2. Develop Influence (Social)
    1. Get out there and meet people. You can’t accomplish much alone. Build a team before trying to change the world.
    2. Lead by Example: Be a leader. Stand up and role model the way. Encourage others to follow your example.
    3. Personally: I’m involved in a few organizations where, if something needs done, I just do it. This has led to others being more open about stepping up and helping out as well. 
  3. Demonstrate Courage (Legacy)
    1. Find someone to fight for. Who needs your “A game”? Play big or go home. Take bold action. Dream big dreams.
    2. Personally: After my wife gave birth to our first child (son), I had a sudden, sinking realization that my life was no longer my own, and that my base income was no longer sufficient to sustain a growing family. I raised my “A game” and courageously stepped out into every opportunity that presented itself.

3.2 Return Home (changed)

Continue playing for love of the Game (or why Systems trump Goals)

Five years ago tomorrow, Scott Adams, creator of Dilbert wrote on his blog about the difference between Goals and Systems (James Clear expands upon the failings of setting Goals without Systems):

In my new book, How to Fail at Almost Everything and Still Win Big: Kind of the Story of My Life, I talk about using systems instead of goals. For example, losing ten pounds is a goal (that most people can’t maintain), whereas learning to eat right is a system that substitutes knowledge for willpower.

Scott Adams

What’s the difference?

Systems vs. Goals

  1. Winners and losers have the same goals, but winners create superior systems to accomplish those goals
  2. Achieving a goal is momentary, but systems last a lifetime
  3. Goals actually restrict your happiness by telling you “once I reach XYZ goal, then I’ll be happy”, but systems enable happiness in the moment
  4. Goals create a “yo-yo” effect – once you pass the finish line, you stop working hard for a while until the next goal is looming, but systems enable continual, long-term, sustained effort “for love of the game

Change your game

Play the game you can win at.

  • Hicham El Guerrouj: Moroccan 2-time gold medalist and world-record holder in middle-distance running 
  • Michael Phelps: #1 most decorated Olympian in history (swimming); 7 inches taller & 40 percent heavier than Hicham

These two appear to be very different. But there is one thing they have in common: the wear the same length inseam on their pants.

But would either of them, if they switched places, under the same training and circumstances, have been the same caliber athlete as the other? Not a chance. Phelps’ body is built for swimming; Hicham’s is built for running.

Create a new game

Do you find you’re not succeeding at the game you’re playing? Create and play a new game altogether. 

A good player works hard to win the game everyone else is playing. A great player creates a new game that favors their strengths and avoids their weaknesses…

Specialization is a powerful way to overcome the “accident” of bad genetics. The more you master a specific skill, the harder it becomes for others to compete with you.

James Clear, Atomic Habits

Everyone has at least a few areas in which they could be in the top 25% with some effort. In my case, I can draw better than most people, but I’m hardly an artist. And I’m not any funnier than the average standup comedian who never makes it big, but I’m funnier than most people. The magic is that few people can draw well and write jokes. It’s the combination of the two that makes what I do so rare. And when you add in my business background, suddenly I had a topic that few cartoonists could hope to understand without living it. 

Scott Adams, creator of Dilbert

What are you skilled at? What are you fascinated by? What do you enjoy doing most that many people would argue is painful or hard to do? 

Perhaps you’ve found a new game to begin developing.


Resources

The following authors, their blogs, and books have had an enormous impact on my life. The book links are Amazon Affiliate links, but I’ve also linked to their “Academies” where applicable:

  1. Best blogs
    1. James Clear (Atomic Habits) | HabitsAcademy
    2. Steve Kamb (Level Up Your Life)| Nerd Fitness Academy 
    3. Michael Hyatt (Your Best Year Ever)
  2. Great books
    1. Brendon Burchard (High Performance Habits) | High Performance Institute
    2. Charles Duhigg (The Power of Habit)

The following collection of books are those that I’ve referenced in this talk. Each has had a significant impact on my life. Many I’ve read more than once, and some I’ve desired to read again immediately upon finishing.

Welcome to WP-CLI!

I have limited experience with wp-cli but I know it’s a really quick and convenient way to manage WordPress installations. And recently I’ve been using ssh to to manage my sites more often, so I thought it would be a good time to investigate it more deeply.

I’m hosting this site on Dreamhost.com (my host since 2009), and I recently went through their One-Click install to quickly add WordPress here. But, strange thing is, I didn’t receive an email from them with my username/password combination – so I had no way to login (at first). 

After a quick Google search, I noticed that Dreamhost has a page about resetting your password – including a section on using wp-cli

I have limited experience with wp-cli but I know it’s a really quick and convenient way to manage WordPress installations. And recently I’ve been using ssh to to manage my sites more often, so I thought it would be a good time to investigate it more deeply.

Here’s a list of the very first commands I’m running on my new WP install – as well as some I intend to put to greater use in the future.

Login

First of all, we need to ssh into the server and access the site.

$ ssh username@site.com
$ cd site.com/wordpress

Change user password

$ wp user list
+----+-------------+---------------+------------------+---------------------+---------------+
| ID | user_login | display_name | user_email | user_registered | roles |
+----+-------------+---------------+------------------+---------------------+---------------+
| 1 | myusername | myusername | user@example.com | 2018-03-17 11:14:28 | administrator |
+----+-------------+---------------+------------------+---------------------+---------------+
$ wp user update 1 --user_pass=NewerBetterStrongerPassword123$
Success: Updated user 1

Create an alias to check for updates

One of the coolest things I found was that you can create an alias to run a series of wp-cli commands one after the other. The following command will check for WP core, plugin, and theme updates at once.

$ alias check-all='wp core check-update && wp plugin list --update=available && wp theme list --update-available'
$ check-all
Success: WordPress is at the latest version.
+------+--------+--------+---------+
| name | status | update | version |
+------+--------+--------+---------+
+------+--------+--------+---------+
+-----------------+----------+--------+---------+
| name | status | update | version |
+-----------------+----------+--------+---------+
| twentyfifteen | inactive | none | 2.0 |
| twentyseventeen | active | none | 1.7 |
| twentysixteen | inactive | none | 1.5 |
+-----------------+----------+--------+---------+

Update and manage core, plugins, & themes

While I could probably create another alias to update everything at once, I haven’t yet because I still like to do some things step-by-step. So, here are the three commands needed to update or manage WP core, plugins, and themes:

$ wp core update
$ wp core update --version=4.7.1

$ wp plugin update --all
$ wp plugin status
$ wp plugin install plugin-name
$ wp plugin activate plugin-name
$ wp plugin deactivate plugin-name
$ wp plugin delete plugin-name

$ wp theme update --all
$ wp theme status theme-name
$ wp theme install theme-name --activate

Many of the plugin and theme commands are quite similar and you can do certain things like stringing together some of them (wp theme install theme-name --activate).

Check your config file or databases

A couple more useful commands are to check out your wp-config file’s constants and globals, and work with your database:

$ wp config get

$ wp db size --tables
$ wp db optimize
$ wp db repair
$ wp db export filename.sql

Clean up post revisions

Sometimes you just need to clean up your post revisions, especially if your site is old or has loads of them. But first, you’ll need to install an additional wp-cli package.

$ wp package install trepmal/wp-revisions-cli
$ wp revisions clean

Or, for specific posts and/or dates:

$ wp revisions list --post_id=ID
$ wp revisions clean --post_id=ID --before-date="YYYY-MM-DD"

Remove all spam comments

This one looks to be a great help, especially for big installations that get a lot of spam. But there are quite a few other commands to help manage comments.

$ wp comment delete $(wp comment list --status=spam --format=ids)

Resources

Increase your Professional Performance

Over the years, I’ve collected numerous tips for better teaching, better presentations, making course materials, and presenting your best professional face to the world – both in person and online. This talk will include a collection of at least 10 such tips.

The best Teachers are Life-long Learners

With this presentation, I hope to convey to you that becoming life-long learners is the #1 best way to become a better teacher. Over the past 10 years, I’ve accomplished the following and grown immeasurably:

  • 170 Lynda.com (LinkedIn Learning) courses
  • 100+ books (Audible.com)
  • Online Master’s degree (Full Sail University)
  • Online Nanodegree (Udacity)

If you want to stay “ahead of the curve” in any industry (or even keep up, let alone catch up) you need to become a life-long learner and make a habit of keeping up to date with the goings-on in that industry.

Contents

  1. Google
    1. Google Classroom
    2. Google Tips
    3. Google Drive
  2. Korean
    1. Korean Grammar
    2. Korean Vocabulary
    3. Korean Games
  3. Apps
    1. Lightshot
    2. Audacity
    3. LinkedIn
  4. Bonus
    1. Bullet Journal

1.1 Google Classroom

Google Classroom is a great way to stay organized as a teacher and distribute assignments to students in a whole class or individually. Check out the following links for some of my other presentations on Classroom:

1.2 Google Tips

Google Service is the most ubiquitous, powerful, and yet also the most under-utilized Google service. Follow the link below to get some tips for making the most of it. There are 10 other Google Services listed as well:

1.3 Google Drive

Drive acts like a hard drive in the cloud, but has some pretty unique features that you may not know about.

  • Sharing & simultaneous collaborative editing
  • Preview files you don’t have programs for (.AI, .PSD)
  • Review Drive activity ( Info)
  • Review File Revision history
  • Add-Ons (DriveTunes)

Plus, Drive is a great way to keep your USBs safe (by simply not using them). But if you insist on hanging onto your USBs, you should really install Panda USB Vaccine to disable Autorun that often gets you viruses when you plug it into an infected computer.

2.1 Korean Grammar

As you learn more Korean grammar, you’ll be better able to teach English grammar. You’ll be better able to pick out common mistakes and explain English grammar patterns in a way that is easily understandable. 

But first, you might want to learn Hangul touch typing. This will save you loads of time in the future, if you type in Korean much. It can also be quite beneficial in class to type 명사, 동사, and 형용사 (noun, verb, adjective) and other things to help you explain the grammar patterns better.

2.2 Korean Vocabulary

Did you know it’s possible to learn 3600 new vocabulary words in 4 months by only practicing for around 30 minutes per day? Have you ever tried it? I’m living proof that the method outlined in the link above works.

And here’s a video with 10 more suggestions to learn new words. Use it yourself or share it with your class:

2.3 Korean Games

Learning a little Korean pop culture also provides you with a great opportunity to connect with your students on a new level and make classes more interesting and engaging for them. Here are three games that they’ll all be familiar with that you can learn in class to teach new vocabulary:

3 Korean word games to test or improve your Korean vocabulary

3.1 Lightshot

Lightshot is hands down the BEST screenshot app I’ve ever come across (yet). It’s so good, I install it on every computer I have access to. I’ve also installed it on every computer in the lab at the high school I work at. 

  • Simply press the PrtSc button to darken the screen and get a crosshairs mouse pointer
  • Draw a shape around the area you want to copy, print, or save
  • The editing tools in the app also give you the ability to DRAW or type anything within the space you’ve outlined
  • Key point: Basically, you’ll be able to create an instant on-screen whiteboard in any class to draw on scans of the book or highlight grammar points in a document you’re showing on the projector

3.2 Audacity

Audacity is the best FREE audio editing app, and it’s great for making listening tests. It’s so versatile that I’ve used it for the following:

  • Recording podcasts
  • Editing sound for movie production
  • Creating pop song remixes and mashups

3.3 LinkedIn

Find me on LinkedIn here. I’ve optimized my profile to showcase my professional skills and abilities. These days, your “resume” isn’t just something you hand in on paper. Every employer can (and will) Google Search you, so it’s important to have something online that is complete, professional, and highlights your accomplishments.

There are plenty of great books online to help you optimize yours. 

Bonus: “Real” online resumes with WordPress

If you couldn’t tell by the rest of this site, I’m a big fan of WordPress (this site is built on it as well). WordPress is the BEST way to get started cultivating your professional online presence. You have two to choose from:

  1. WordPress.com is a managed host – you just pay the bill
  2. WordPress.org is self-hosted – meaning you need:
    1. URL name registration (around $12.95 for a .com)
    2. Hosting (affiliate) (starting at $2.59/mo)

Bonus: Bullet Journal

If you really want to stay organized (a very good idea in today’s busy world), going analog (paper) is so much better than taking everything digital (too many distractions). The Bullet Journal is one of the best methods I’ve found for staying organized. Check out the following for more details:

Conclusion

Let me leave you with three quotes from some of my favorite authors and public speakers regarding your “Professional Performance.”

Either run the day, or the day runs you… Time is more valuable than money. You can get more money, but you cannot get more time… Time management is the best kept secret of the rich.

Jim Rohn

The whole purpose of time management and getting more done in less time is to enable you to have more time to spend with the people you love, doing the things you enjoy.

Brian Tracy

‘Time management’ is really a misnomer – the challenge is not to manage time but ourselves. The key is not to prioritize what’s on your schedule, but to schedule your priorities.

Stephen Covey

Bio

Aaron Snowberger is a Google Certified Educator, Trainer, and G Suite Administrator. He teaches Computer Science & Graphic Design at Global Prodigy Academy and English at Jeonju University. He also does freelance graphic design and website programming work, specializing in WordPress and React. He has designed multiple publications, websites, and KOTESOL posters, and has previously presented at the KOTESOL National and International Conferences, as well as the Seoul WordPress Grand Meetup. Apart from work, Aaron also enjoys cycling and playing musical instruments (like bass guitar).

11 Great Google Services (for your classroom)

I want to briefly introduce you to 11 powerful Google Services that can have a big impact on your teaching. These are things that I personally use nearly everyday. I’ll start with the most commonly used and easiest-to-learn tools, and progressively take us through more difficult or less commonly used tools.

View Slides →


Self Introduction

  • Google Certified Educator & Trainer (Feb. 2017)
  • G Suite Admin @ GPA HS (Certified Feb. 2017)
  • Computer Science & Graphic Design Teacher @ GPA HS (Feb. 2013)
  • ESL Teacher (Jeonju University Mar. 2010, Korea July 2006)
  • WordPress & web designer/developer (2010)
  • Freelance Graphic designer (MFA Apr. 2011)

Overview

I want to briefly introduce you to 11 powerful Google Services that can have a big impact on your teaching. These are things that I personally use nearly everyday. I’ll start with the most commonly used and easiest-to-learn tools, and progressively take us through more difficult or less commonly used tools.

  • Easiest (Search, Gmail, Translate)
  • Normal (Drive, Docs, Slides)
  • Harder (Forms, Drawings, Classroom)
  • Expert (Photos, Sheets)

Please, join my Class:

Class code: qa3d0gu


Easiest

#1 Search

The most ubiquitous Google Service is also the most powerful, and the most under-utilized Google service. Here are some tips to get the most of it. I’ve also linked to Google’s full Tips & Tricks page below.

Find stuff for class:

Use in class:

All Google Search Tricks →

#2 Gmail

Personally, the greatest 2 tricks to using Gmail are:

25 Gmail Keyboard Shortcuts that save me 60 hours per year →

#3 Translate

I know many people don’t think Google Translate is a really efficient tool, but there have been some really great updates to it recently that make it a much better tool.

  • Handwriting
  • Audio input (speak in English, HEAR and SEE the Korean response)
  • Camera input (for signs, etc)
  • Tap to Translate is the BEST thing I’ve recently discovered – it allows me to use Translate within ANY app, without switching
  • Translate dictionaries are also available OFFLINE

Tap to Translate video


Normal

#4 Drive

Drive acts like a hard drive in the cloud, but has some pretty unique features that you may not know about.

  • Sharing & simultaneous collaborative editing
  • Preview files you don’t have programs for (.AI, .PSD)
  • Review Drive activity ( Info)
  • Review File Revision history
  • Add-Ons (DriveTunes)

#5 Docs

Google Docs acts as an online Word document editor – but it has some unique features that are only available through a cloud service like this.

#6 Slides

One of the most powerful features in Google Slides is the ability to crop and edit images directly within the Slides window itself.

  • Templates & Master Slides View > Master
  • Image manipulation
    • Crop into shapes Format > Crop image
    • Recolor Format > Format options

I’ve previously created a complex PPT using the cropping images feature. I’ve included a link to this PPT below.

I’ve also linked to some really great Slides Templates and an alternate to PPT (slides.com) – that this presentation is based on.


Harder

#7 Forms

Google Forms allows you to create self-grading assignments and quizzes.

I’ve personally used Forms for Homework, surveys, quizzes, and chapter tests. It allows you to specify

  • Multiple Choice answers
  • Checkbox answers
  • Dropdown answers
  • Short answers

And if you need more flexibility and grading features, check out Flubaroo as a Google Sheets Add-on which can also analyze your student data and help you to see which questions were the most troublesome for a class.

#8 Drawings

Google Drawings allows you to create complex vector shapes (like logos). They can even be embedded into Docs.

But one of the most useful features I recently discovered was the “yellow handle” (shaped like a diamond) on some shapes that allows you to change its dimensions. I was able to recreate the KOTESOL logo in Google Drawings using this feature:

#9 Classroom

I’ve previously presented on Google Classroom at the KOTESOL 2017 International Conference. One exciting new feature that I’ve discovered since then is that it’s now possible (since January 2017) to assign work to INDIVIDUAL students as well as the whole class. This allows me to personalize assignments for students.


Expert

#10 Photos

Google claims you can have UNLIMITED storage of photos and videos on their service – at a reduced quality (their uploader converts it automatically) – I haven’t run out of space yet.

You can also create Shared albums that people with the link can “Add” themselves to and add their own photos. This is great for schools, families, and groups that want to easily encourage participants to upload and share their individual photos.

Read more about this on the article Google Photos adds smarter sharing, suggestions and shared libraries.

  • Unlimited storage with file reduction
  • Share album to allow uploaders

#11 Sheets

Sheets is a VERY powerful program once you start getting beneath the surface of things. It includes at least TWO useful features I’ll introduce here: Data Validation and Pivot Tables.

I’ve previously presented at the JNJ KOTESOL 2012 Conference about this topic – to create a Gradebook that only accepts certain values.


BONUS!

You can get Google Certified too!

There are two levels of Google Educator, tests are $10 each (online, and require a web cam).


Review & Resources

This is a list of ALL the resources I gathered for this talk.

  1. Search
    1. ALL Search Tips & Tricks – Inside Search
  2. Gmail
    1. Keyboard Shortcuts
    2. The 25 Gmail Keyboard shortcuts that save me 60 hours per year
    3. Gmail Guide: Inbox Management and Labels
  3. Translate
    1. Translate
    2. Camera Input example: La Bamba
    3. YouTube: Introducing Tap to Translate
  4. Drive
    1. View activity & file versions
    2. DriveTunes Add-On
  5. Docs
    1. Docs Template Gallery
    2. Google Fonts
    3. Version History
    4. How to Add Stock Photos to Google Docs
  6. Slides
    1. Slides Template Gallery
    2. SlidesCarnival.com (Copy additional, stylish Slides Templates)
    3. Slides.com – Make Better Presentations
    4. KOTESOL slides: Become a Better Presenter
    5. How to crop & edit images
    6. Editing Master Slides
  7. Forms
    1. Forms Template Gallery
    2. Flubaroo Video (better auto-grading of Forms)
    3. Flubaroo Sheets Add-on Link
    4. Example of my Google Site with Quizzes
    5. Create & grade quizzes with Google Forms
  8. Drawings
    1. 8 Creative Uses of Google Drawings
    2. Google Drawings for Graphic Organizers – Link
    3. KOTESOL Logo in Google Drawings
    4. Google Drawings: Semicircle
    5. Google Drawings on YouTube
  9. Classroom
    1. Using Google Classroom (5 page) – Link
    2. Google Classroom Manual (15 page) – Link
    3. Aaron.kr: Google Classroom 101 Talk
    4. Google Classroom updated
    5. Digital Differentiation with Google Classroom
    6. Individual Assignments & Small Group Work
  10. Photos
    1. YouTube: Introducing Shared Albums
    2. Google Photos About
    3. Shared memories made easy with Google Photos
    4. Google Photos adds smarter sharing, suggestions and shared libraries
  11. Sheets
    1. Sheets Template Gallery
    2. Data validation in Google Sheets
    3. Get Organized with 2 Google Spreadsheet Features
    4. My KOTESOL Gradebook Presentation
    5. How to Create a Pivot Table in Google Sheets
    6. Google Sheets Pivot Table Tutorial
    7. Pivot Tables in Google Sheets (Ultimate Guide)
    8. Tutorial: How to make pivot tables in Google Sheets
  12. BONUS! Get Google Certified
    1. G Suite Training – Chrome Web Store
    2. G Suite Training
    3. Training Center: Certification
  13. Other Resources
    1. Naver Office

Thank You!

Google Classroom 101

Google Classroom is an excellent way to stay organized as a teacher and distribute learning material to a whole class or individual students. This presentation gives an overview of how Google Classroom works and how you can use it to your advantage.

View Slides →


Self Introduction

  • Google Certified Educator & Trainer (Feb. 2017)
  • G Suite Admin @ GPA HS (Certified Feb. 2017)
  • Computer Science & Graphic Design Teacher @ GPA HS (Feb. 2013)
  • ESL Teacher (Jeonju University Mar. 2010, Korea July 2006)
  • WordPress & web designer/developer (2010)
  • Freelance Graphic designer (MFA Apr. 2011)

You can get Google Certified too!

There are two levels of Google Educator, tests are $10 each (online, and require a web cam).


Overview

  • Intro
  • Student View
  • Teacher View
  • Tips

Caveat

You (and the students) need a Google Account in order to use Google Classroom. But only you need a Google Account to use Google Drive. I’ll show you both. We’ll start with Google Drive.

So, please, join my Class:

Class code: jklasdf

Student View

While you’re joining my class, let’s take a look at some student opinions about Google Classroom.

Now, let me introduce you to the most common types of files I share in Google Classroom. You have access to all these files when you click the “Open” button.

Now, please complete the “Assignment” in the Google Doc and Turn it In using the button in the upper-right of your Doc.


Teacher View

While you’re completing the “Assignment”, let’s take a look at what some other teachers have to say about Google Classroom.

Let me show you some more of what Google Classroom can do from the Teacher’s Viewpoint.

  • Share files – View only
  • Share files – Editable
  • Each student gets a copy
  • Assign topics and due dates
  • Schedule assignments (or Save Drafts)
  • Grade assignments

Tips

This all seems well and good, but what if you can’t, or don’t want to, force all your students to use Google? The next section will give you some tips and suggestions for using Google Drive and Google Classroom, even without adding students to a class.

  1. Throw away your (insecure) USB key
  2. Go paperless
  3. Run a more organized classroom
  4. Use Google Sites and Forms for Quizzes and Homework
  5. Flubaroo for grading Form answers
  6. Use Naver Office if you want the Korean version
  7. Make better PPTs with SlidesCarnivaland Slides.com

Check out what Flubaroo can do.


Review & Resources

Here’s one more video reviewing all I’ve just covered.

  1. G Suite Training – Chrome Web Store
  2. G Suite Training
  3. Training Center: Certification
  4. Docs Template Gallery
  5. Sheets Template Gallery
  6. Slides Template Gallery
  7. SlidesCarnival.com (Copy additional, stylish Slides Templates)
  8. 8 Creative Uses of Google Drawings
  9. Forms Template Gallery
  10. Example of my Google Site with Quizzes
  11. Google Drawings for Graphic Organizers – Link
  12. Using Google Classroom (5 page) – Link
  13. Google Classroom Manual (15 page) – Link
  14. Slides.com – Make Better Presentations
  15. Naver Office
  16. Flubaroo Video (better auto-grading of Forms)
  17. Flubaroo Sheets Add-on Link

Thank You!

Google Classroom & G Suite for Education Training

This talk provides an overview of what Google Classroom is, how it works, and gives practical tips for how to incorporate Google’s other main product apps (Docs, Sheets, Slides, Drawings, and Forms) into your classroom.

This presentation was given as part of a training seminar at Global Prodigy Academy international high school in Jeonju. It covers the following:

  1. What Google Classroom is & can do
  2. G Suite services that work well with Google Classroom
  3. Caveat for using Google Classroom
  4. Alternate ideas if Google Classroom is not a viable option for your classroom

What Google Classroom can do

Class

Classroom allows you to do the following:

  1. Add Class (+ symbol in the upper-right)
  2. Join class (+ symbol in the upper-right)
    1. by email (Students tab -> Invite Students)
    2. with a code (you can also display this in huge letters on the projector. Go to the Gear wheel -> Class code -> Display)
  3. Create Assignment (now also Reuse Assignment is possible)
    1. Add attachments (files)
    2. Insert videos / links
    3. Schedule the assignment / Save Draft
    4. Groups Assignments within Topics
    5. Give Assignments Due dates
  4. Grading (I personally don’t use this feature, but it’s wonderful for keeping student Assignments organized and in a central location)
Classroom’s Grading feature keeps assignments organized

Assignment Types

Classroom is best used in connection with Google Drive and gives you access to a number of Microsoft-esque products that you can use to create assignments:

  1. “Microsoft”-esque
    1. Docs (like MS Word)
      1. The best tool I introduce to students in Docs is the paragraph styles
    2. Sheets (like MS Excel)
      1. The tools I focus on teaching students in Sheets are the spreadsheet functions and chart creation tools
    3. Slides (like MS PowerPoint)
      1. One great feature to learn in Slides is where to edit the Master Slides (View -> Master)
  2. Non-MS
    1. Drawings (Can be created separately and downloaded as PDFs or image files, or can be inserted into Docs)
    2. Forms (great for giving tests/quizzes – and can also be self-grading if you input answers)
  3. Distribution methods
    1. Students can view (This is best used for things like class Slides and lecture notes that shouldn’t be edited)
    2. Students can edit (Use this to collaborate on a Shared Document or Spreadsheet where each student needs to add their input to the collective – like shared vocab lists)
    3. Student copy (This copies the file and inputs it directly to each Student account while also linking it to the Grading portion of that assignment to keep things organized)
Distribution methods and Lesson Planning

Organize your Lesson Plans

Personally, I use Google Classroom to help me better organize my Lesson Plans and stay focused during the class. Whenever I create a new assignment, I write down notes about the topic, points to cover, or steps to take. Then, while presenting the lesson, I can refer back to my “Lesson Plan” in the Google Classroom Assignment.

Student / Teacher View

There is a difference between the Teacher View and the Student View, so if you want to explore them both, either:

  • login as a student in your class, or
  • add another account (on the SAME Google domain) to your class and explore as both Teacher and Student

Caveat:

Student accounts and Teacher accounts MUST reside within the SAME Google domain in order to work. (i.e. Gmail users can join Gmail user classes and .com users can join .com user classes, but Gmail users CANNOT join .com user classes)
  1. The Teacher View helps you to stay organized with:
    1. Organized assignments / a grading section
    2. Archived classes (from which you can now Reuse Assignments)
    3. Reorder classes (by clicking and dragging them around the screen, you can place them in the order you will teach them during the day)
  2. The Student View is obviously more limited. Students can:
    1. “Open” files – individual files will be contained IN the Assignment at the bottom, under other files and attachments, in a separate box
    2. Submit (“Turn In”) – students will need to “Unsubmit” work if they want to edit it further – once it’s submitted, it’s no longer editable
    3. Quiz multi-submit – students can submit Quizzes more than once if that option is enabled in the Form settings
    4. Edit together – Students can collaborate on shared Docs

Alternate Ideas

Once again, using Google Classroom comes with a Caveat

Student accounts and Teacher accounts MUST reside within the SAME Google domain in order to work. (i.e. Gmail users can join Gmail user classes and .com users can join .com user classes, but Gmail users CANNOT join .com user classes)

However, even if you feel unable to use Google Classroom with your students in your Classroom, you’ll still be able to use it yourself if you have a Gmail account. The following are some suggestions for using Classroom without students joining it.

  1. Personal Organization (Lesson Planning)
  2. Document Use
    1. Docs (Word)
    2. Sheets (Excel)
    3. Slides (PPT)
    4. Drawings (insert)
    5. Forms (tests/quizzes)
  3. Distribution
    1. Share Link
    2. Google Sites

Personal Organization

Using Classroom for your own personal organization of Lesson Plans is still a great idea. You can write out all your lessons, notes about the content, and any links you want to share with the class.

(This is actually how I give many of my presentations on Google – because no students are “joining” the class, but I still want to use Classroom.)

Sharing & Distribution

You’ll still be able to “Share” Google Docs, Sheets, Slides, Drawings, and Forms by clicking the blue Share button in the upper-right corner of any page. You can use Google’s built-in URL shortener, or another one like https://is.gd/ which allows you to customize the link text. Then, write the shortlink on the board to give students access.

Here are some suggestions for how to use and Share each Google Doc type with students who aren’t in your class:

  • Docs: Share test reviews, directions for written assignments, or your syllabus
  • Sheets: Share vocabulary lists, calendars, or schedules
  • Slides: Share your lecture slides, or play PPT games
  • Drawings: Share teacher-created flowcharts and illustrations
  • Forms: You can still share surveys or quizzes and students will be able to do those on their mobile devices. (I’ve used this in large classes of 40 students to quickly “collect” and grade homework.)
  • Sites: And if you want to remove the middleman altogether (the shortened URL you write on the board), create a Google Site and update the assignments and links in there. Then students will only need to know ONE link throughout the semester where they can find all their assignments.

Conclusion

This is only the tip of the iceberg for the kinds of things Google can do for your classroom. Here are two more ways to become a Google Education pro.

  1. Watch FREE video training on ANY Google product
  2. Get Certified!

Teacher Tech Tips

This presentation covers numerous tips and tricks that can benefit classroom teachers who need to use technology. While the middle two sections are most relevant to GPA teachers, the remaining sections contain lots of good advice for any teacher who needs to use technology in their work in nearly any capacity.

Teacher Tech Tips Update

This talk has now been updated for 2021. It combines that talk with another presentation I’ve given to my high school classes on Internet Security and Safety, as well as introduces possible app options to learn during this Teacher Training course.

This presentation was given as part of a training seminar at Global Prodigy Academy international high school in Jeonju. It covers the following:

  1. Useful Computer Tricks (keyboard shortcuts) for teachers
  2. GPA’s Acceptable Use Policy (Brief)
  3. Website(s) pertinent to GPA teachers
  4. Gmail tips & tricks
  5. Google Calendar tips & tricks

Useful Computer Tricks

The following are some of THE very best computer tricks for teachers I’ve picked up over the years (and use on a nearly daily basis):

  1. Browser Tricks
    1. CTRL + SHIFT + N = Chrome’s Incognito mode (doesn’t save passwords, browsing history, etc)
    2. CTRL + SHIFT + T = Re-open the most recently closed tab
    3. In Gmail, with keyboard shortcuts enabled: C = compose new message
    4. For printing in the computer lab, the Teacher’s computer must be ON because all the lab computers are routed through it to the printers
  2. Windows Shortcuts
    1. CTRL + ALT + DELETE = Slow, additional step to Task Manager
    2. CTRL + SHIFT + ESC = FAST, direct Task Manager access
    3. Win + ← or Win + → = Move current window to half screen
    4. Win + L = Instant logout
    5. Win + P = Change Presentation (projector) mode
    6. PrtSc = screenshot (with Lightshot app installed)
  3. Text Editing
    1. Use CTRL + SHIFT + V instead of CTRL + V to remove styling from text you copy-paste
    2. CTRL + K = create hyperlink from selected text

Acceptable Use Policies

GPA’s Stuff (Google Account / Computers)

  1. Keep it professional (all channels)
  2. Google account:Contract end:
    1. Keep it (~6 months non-use)
    2. Termination: Lose it
  3. Legal issues: GPA owns it

YOUR Stuff (SNS / Messaging)

  1. Keep it professional (all channels)
  2. Socializing with students outside school
    1. KakaoTalk, etc
    2. Scheduling things outside school hours (admin)

STUDENT Stuff (Reminders (from personal experience))

  1. Keep door codes/passwords secret (shoulder surfing)
  2. No food/drink at the computers (in the lab)
  3. No downloading/installing games/programs
  4. Zero-tolerance policy for bullying (online or off)
  5. Teacher’s computer is “unfrozen”

GPA websites

Gmail tips & tricks

There are three great ways you can immediately personalize and start taking control of your Gmail account:

  1. Personalize it
    1. Change your profile picture
    2. Change your email signature
  2. Organize it
    1. Configure your Inbox (multiple inboxes, view settings, etc)
    2. Create Labels (which act like folders)
    3. Create Filters to automatically sort incoming emails
  3. Customize it
    1. Change the appearance with Themes
    2. Change the functionality with Labs

Google Calendar tips & tricks

Some of the best tricks I’ve learned regarding Google Calendar are:

  1. Sharing public calendars
  2. Creating Appointment Slots

(And with Calendar’s recent redesign, it’s much more fun to use too~)

The admin can manage the school calendar and share it publicly with all the teachers and/or students. We then create Appointment Slots in separate calendars for each teacher to allow parents to sign up for Parent-Teacher Conferences.


Thank you!

Coding an Advent Calendar: Day 16

This year, I decided to create an Advent Calendar website in HTML5, CSS3, and JavaScript. My hopes for the site are to showcase some of my frontend development abilities as well as make something fun, functional, and reusable.

Day 16

Disclaimer: I’ve been incredibly busy as of late with the following items and so haven’t had nearly as much time to work on this Advent Calendar as I’d have liked to.

  1. Giving final tests at my university (8) – I teach ESL
  2. Giving final tests at my high school (3) – I teach Graphic Design + Computer Science
  3. Wrapping up year-end grading (and “reporting”) for 2 schools
  4. Custom plugin development for a client in China
  5. Custom theme development + website building for a client in Korea (due Tuesday morning)

I’d hoped to continue making 3 adjustments per day, but it just wasn’t possible yesterday. Still, if I can at least add 1 thing per day, I can keep up some momentum and see this project completed by Christmas.

Add Argyle CSS background pattern
A while back, I stumbled upon a very interesting Christmas background design on some company’s old 2014 website (I searched my browser history this morning for about an hour to try to find that site and grab a screenshot, but for the life of me, I couldn’t). What I remember most clearly about it was that the background had a very interesting pattern: Argyle (it also took me a while to remember the name of it).

Anyway, I thought it would be a cool addition to the background for my Posts, especially if it was created entirely in CSS. So, thanks to the help of CSS3 Patterns Gallery, I was able to find something great and modify it for my needs:

#posts {
  background-color: rgba(42,111,176,0.8);
  background-image:
    repeating-linear-gradient(120deg, rgba(255,255,255,.1), rgba(255,255,255,.1) 2px, transparent 2px, transparent 120px),
    repeating-linear-gradient(60deg, rgba(255,255,255,.1), rgba(255,255,255,.1) 2px, transparent 2px, transparent 120px),
    linear-gradient(60deg, rgba(0,0,0,.1) 25%, transparent 25%, transparent 75%, rgba(0,0,0,.1) 75%, rgba(0,0,0,.1)),
    linear-gradient(120deg, rgba(0,0,0,.1) 25%, transparent 25%, transparent 75%, rgba(0,0,0,.1) 75%, rgba(0,0,0,.1));
  background-size: 138px 240px;
}

The result is what you see in the screenshot above!


Work Completed (to date)

  • December 16, 2016
    • Add Argyle CSS background pattern to Post background
  • December 15, 2016
    • Begin creating JSON file for additional Advent data
    • Attempt external load of JSON data
    • Work on style for additional Advent data
  • December 14, 2016
    • More individual styling of REST Posts
    • Break apart the project into Component pieces & create a Codepen Collection
    • Convert all the old HTML into real React Components
  • December 13, 2016
    • Add JS handlers for “Today”
    • Better styling of REST Posts
    • Begin Building a Web Interface with React.js (Lynda.com)
  • December 12, 2016
    • Storybook on Windows (FAIL)
    • Continue styling <Tag> Components
    • Begin responsive styles
  • December 11, 2016
    • Begin separating out CSS per Component
    • Attempt to load in static files & Sass
    • Begin coding a Tag for the Gifts
  • December 10, 2016
    • Finish Lynda.com videos
    • Get all React Components working in Storybook
    • Begin creating a Christmas Scene
  • December 9, 2016
    • Learn and use Create-React-App
    • Learn and use Storybook for developing React Components in isolation
    • Update npm and node and figure out my git process between Windows and Mac
  • December 8, 2016
    • Use React and Babel via CDN to get it working “locally”
    • Install React developer Tools for Chrome
    • Create very basic React.js pages to learn it
  • December 7, 2016
    • Pull post data with the WP REST API in WordPress core!!
    • Write structural code for the React Component to be rendered
    • Install and setup BabelJS to compile the React code
  • December 6, 2016
    • Add README.md
    • Add a GitHub Issue to hold usable images
    • Add LICENSE
  • December 5, 2016
    • Create a GitHub repository and full site files for easier management
    • Setup Grunt.js to compile my Sass into CSS
    • Begin blogging about the process
  • December 4, 2016
    • Countdown clock (JS Date class & jQuery Easing) with SVGs
    • Dynamic text output for Year based on the current date
    • CSS only slider (off by 5px each slide)
  • December 3, 2016
    • CSS bow & ribbon
    • Footer with FontAwesome presents
    • Hover, active, and “Christmas Day” styles for footer presents
  • December 2, 2016
    • React.js + Axios.js initial code structure
    • Color palette
    • CSS → Sass
  • December 1, 2016
    • Let it snow
    • Typography choices
    • CSS presents (first design)
    • Design notes menu

Coding an Advent Calendar: Day 15

This year, I decided to create an Advent Calendar website in HTML5, CSS3, and JavaScript. My hopes for the site are to showcase some of my frontend development abilities as well as make something fun, functional, and reusable.

Day 15

Begin creating JSON file for additional Advent data
As I continued watching Build a Web Interface with React.js, I decided to start trying to gradually implement each step of the process into my Advent Calendar Interface. The next step today was to create some JSON objects from which to load data (this is, after all, essentially what the WordPress REST API is doing anyway – now I’m just approaching this from a more foundational level to learn how this works at its most basic level).

Since I’d previously mentioned wanting to share my favorite Typography in this Advent Calendar (and I’ve also always enjoyed sharing Christmas music), I decided to create two JSON key-object pairs in each member of the JSON array (which I later expanded to three to include the specific WordPress Post ID for that day’s date). These are to be used to store various data related to each day for the Calendar:

{
  "wpPostId": "31190",
  "font": {
    "typeface": "Sonsie One",
    "googleFont": true,
    "url": "",
    "fontMsg": "Selected for the large, stylized numerals."
  },
  "video": {
    "provider": "youtube",
    "videoId": "l5Y0lVM-44k",
    "videoTitle": "Jordan Smith sings "The Grinch"",
    "videoMsg": "I've always enjoyed this song - and this is a great rendition of it."
  }
},

I figured I didn’t need to write entirely new WordPress blog posts for each bit of “Christmas cheer” I wanted to share (posts, fonts, and videos), but adding a short message would still be useful. Therefore, I added a key for the messages in each.

Attempt external load of JSON data
Ray builds his Web Interface in a localhost environment using Webpack, but I was building this one on a new Codepen. So, even though I attempted to load an external JSON file that included all my data like he did, it didn’t quite work out as expected.

Later, I re-built the page in React Storybook and found some of my problems:

  1. I had a few typos in my JSON file – including mismatched curly brackets
  2. I was attempting to pass the file as an Object of JSON Objects, rather than an Array of JSON Objects. I realized Objects without an identifying “key” value must be stored in an Array – if I want to store it in an Object, then I’d need to identify it with a “key” value of some kind: like
    { "advent": { "day1": { ... }, "day2": { ... } } }, etc.
  3. Additionally, I tried to add comments // comment in there, which doesn’t work
  4. And, I used single quotes in certain places rather than double quotes everywhere with backslash escaped double quotes for speech, for example

Initially, I tried to load the RAW version of a Gist I wrote for this JSON file on GitHub. But due to my errors, it obviously didn’t work. And Codepen – even the Developer Tools and console didn’t provide helpful enough messages to get this sorted. However, after putting it together in React Storybook, I think I got my JSON file mostly fixed, so it’ll be worth another try.

Work on style for additional Advent data
Finally, even though I couldn’t completely get the new React Component and external JSON file working properly together, I decided I could at least add some styling to the “proposed” elements. This is what the Featured Image for this Post shows – I used the same kind of styling for this Advent data that I’ve done for my WordPress blog Posts.

The following are some ideas for further development of this feature:

  • Create a CSS stocking that holds a “package” with the name of the font I’ve chosen. When hovered over, CSS animation pulls it from the stocking so it can be clicked to “open”. When opened, it displays the message.
  • Allow non-YouTube video IDs (Vimeo) and non-Google Fonts font URLS (Font Awesome, etc).
  • Include WordPress Post IDs for each date
  • Add a radio button Component that allows switching between loading WordPress blog Posts or the “Christmas content” (typography and videos)
  • Add a feature to display the entire Christmas playlist somewhere (using only my JSON data – and not an actual YouTube playlist)
  • Get each font to load on its own package and message

And just for fun, here’s the Christmas song I’ve chosen for today:

https://www.youtube.com/watch?v=l5Y0lVM-44k


Work Completed (to date)

  • December 15, 2016
    • Begin creating JSON file for additional Advent data
    • Attempt external load of JSON data
    • Work on style for additional Advent data
  • December 14, 2016
    • More individual styling of REST Posts
    • Break apart the project into Component pieces & create a Codepen Collection
    • Convert all the old HTML into real React Components
  • December 13, 2016
    • Add JS handlers for “Today”
    • Better styling of REST Posts
    • Begin Building a Web Interface with React.js (Lynda.com)
  • December 12, 2016
    • Storybook on Windows (FAIL)
    • Continue styling <Tag> Components
    • Begin responsive styles
  • December 11, 2016
    • Begin separating out CSS per Component
    • Attempt to load in static files & Sass
    • Begin coding a Tag for the Gifts
  • December 10, 2016
    • Finish Lynda.com videos
    • Get all React Components working in Storybook
    • Begin creating a Christmas Scene
  • December 9, 2016
    • Learn and use Create-React-App
    • Learn and use Storybook for developing React Components in isolation
    • Update npm and node and figure out my git process between Windows and Mac
  • December 8, 2016
    • Use React and Babel via CDN to get it working “locally”
    • Install React developer Tools for Chrome
    • Create very basic React.js pages to learn it
  • December 7, 2016
    • Pull post data with the WP REST API in WordPress core!!
    • Write structural code for the React Component to be rendered
    • Install and setup BabelJS to compile the React code
  • December 6, 2016
    • Add README.md
    • Add a GitHub Issue to hold usable images
    • Add LICENSE
  • December 5, 2016
    • Create a GitHub repository and full site files for easier management
    • Setup Grunt.js to compile my Sass into CSS
    • Begin blogging about the process
  • December 4, 2016
    • Countdown clock (JS Date class & jQuery Easing) with SVGs
    • Dynamic text output for Year based on the current date
    • CSS only slider (off by 5px each slide)
  • December 3, 2016
    • CSS bow & ribbon
    • Footer with FontAwesome presents
    • Hover, active, and “Christmas Day” styles for footer presents
  • December 2, 2016
    • React.js + Axios.js initial code structure
    • Color palette
    • CSS → Sass
  • December 1, 2016
    • Let it snow
    • Typography choices
    • CSS presents (first design)
    • Design notes menu

Coding an Advent Calendar: Day 14

This year, I decided to create an Advent Calendar website in HTML5, CSS3, and JavaScript. My hopes for the site are to showcase some of my frontend development abilities as well as make something fun, functional, and reusable.

Day 14

Individual Post Styles
As I mentioned yesterday, I wanted to only show one WordPress post at a time when any package is clicked on. So, that’s what I set about doing today (as the Featured Image above shows). There are a few things I still need to take care of however:

  1. IF the Gift clicked on doe NOT (yet) have a Post for that date, show some kind of “Coming Soon” message.
  2. The Posts need to either be in a Carousel that mirrors the Gift carousel, OR they need to be dynamically loaded by the WP REST API and React based on the ID number (date) of the Gift clicked on.
  3. The “prev” and “next” buttons need some style corrections (like text-alignment and z-index to place them OVER the Post border) as well as functionality.
  4. Ideally, if a user clicks “prev” or “next”, the Post background (dark blue) would remain unchanged, and only the Posts would slide left or right (as a carousel).
Codepen Collection
I was still having trouble with my Gift carousel being off by a few pixels each time the carousel rotated, and then I tried to make the Gifts scale when hovered over:

Oops. What happened?

Well, I decided that since I started having THIS problem with scaling the Gifts AND I was already having trouble with getting the carousel to display and function properly, I probably had an error in my code somewhere that I was overlooking. Therefore, I decided to start breaking apart all the various pieces and components of this project to take a closer look at each of them individually.

It turns out the scale problem was happening because I didn’t have some kind of <div class="gift-wrapper"> surrounding my Gifts. So scale was scaling the CSS image from the center of itself (and thus pushing it out of the center of the page), rather than from the center of the wrapper which would allow it to remain centered in the page. Here’s what it looks like now with a <div class="gift-wrapper">:

In addition to the Gift Component, I also extracted out the Countdown Clock, and the individual Blog Post Component into separate Codepens and added them to a Collection:

  1. Gift Component
  2. Countdown Clock Component
  3. Post Component

From here, it allows me to continue working on the individual Components for the site even from my Windows computer. And once these pieces are perfected, I can then compile them all back together again as a “real” website.

React-ify All the Things!

So, since I’ve now separated out all the Components of the project, I decided it would be a great time to convert my existing HTML into true React Components. Now, the only HTML I have sitting in the Codepens above are:

<div id="react-component-name"></div>

All the markup is now handled entirely by React. And now, I feel like I’m ready to continue with Ray Villalobos’ Course: Building a Web Interface with React.js to learn better how I can get these various Component pieces to interact with each other better.

Side note: One additional thing I learned while working with these React Components is that: in order for jQuery (or any other JavaScript) to work and interact with these Components, React must be allowed to BUILD the Components on the page FIRST – before any other JavaScript functions are declared. Otherwise, jQuery will attempt to bind a "click" function (for example) on a tag that has not yet been created.


Work Completed (to date)

  • December 14, 2016
    • More individual styling of REST Posts
    • Break apart the project into Component pieces & create a Codepen Collection
    • Convert all the old HTML into real React Components
  • December 13, 2016
    • Add JS handlers for “Today”
    • Better styling of REST Posts
    • Begin Building a Web Interface with React.js (Lynda.com)
  • December 12, 2016
    • Storybook on Windows (FAIL)
    • Continue styling <Tag> Components
    • Begin responsive styles
  • December 11, 2016
    • Begin separating out CSS per Component
    • Attempt to load in static files & Sass
    • Begin coding a Tag for the Gifts
  • December 10, 2016
    • Finish Lynda.com videos
    • Get all React Components working in Storybook
    • Begin creating a Christmas Scene
  • December 9, 2016
    • Learn and use Create-React-App
    • Learn and use Storybook for developing React Components in isolation
    • Update npm and node and figure out my git process between Windows and Mac
  • December 8, 2016
    • Use React and Babel via CDN to get it working “locally”
    • Install React developer Tools for Chrome
    • Create very basic React.js pages to learn it
  • December 7, 2016
    • Pull post data with the WP REST API in WordPress core!!
    • Write structural code for the React Component to be rendered
    • Install and setup BabelJS to compile the React code
  • December 6, 2016
    • Add README.md
    • Add a GitHub Issue to hold usable images
    • Add LICENSE
  • December 5, 2016
    • Create a GitHub repository and full site files for easier management
    • Setup Grunt.js to compile my Sass into CSS
    • Begin blogging about the process
  • December 4, 2016
    • Countdown clock (JS Date class & jQuery Easing) with SVGs
    • Dynamic text output for Year based on the current date
    • CSS only slider (off by 5px each slide)
  • December 3, 2016
    • CSS bow & ribbon
    • Footer with FontAwesome presents
    • Hover, active, and “Christmas Day” styles for footer presents
  • December 2, 2016
    • React.js + Axios.js initial code structure
    • Color palette
    • CSS → Sass
  • December 1, 2016
    • Let it snow
    • Typography choices
    • CSS presents (first design)
    • Design notes menu