Bob Ralian

What follows is a stream-of-consciousness replay of me messing around with TypeScript. It’s from the point of view of a vaguely competent JavaScript hacker. I’m including the warts and brain-farts in the hopes they’re either interesting or useful.

---

> Google “getting started with TypeScript”, click to TypeScript in Five Minutes.

OK, cool, so types are specified for the parameters and output of a function by adding a trailing colon and type name, like this.

[code language=”javascript”]
function isBigString(someParameter: string): boolean {
return (someParameter.length > 4 );
}
[/code]
They also have a concept of “Interfaces”, where you can specify the shape of an object, like this.

[code language=”javascript”]
interface Person {
firstName: string;
lastName: string;
}
[/code]
It seems kinda weird that they use css-style notation (declarations end with semicolons) rather than JavaScript object notation, but whatevs. Easy, peasy.

> Install Visual Studio Code, the suggested IDE for TypeScript, also made by Microsoft.

Hey, this is pretty snazzy. Works really well with TypeScript, which… well duh.

Wait, how do you open a project in VSC from command line?

[code language=”bash”]> vsc .[/code]
No, that’s not it.

[code language=”bash”]> vs .[/code]
Nope, not that either.

> Google “open visual studio code from command line”. Find this setup page.

OK, have to open the command pallete and install the shell command.

[code language=”bash”]> code .[/code]
That’s the ticket.

OK, let’s go deeper than the five-minute tutorial. Looks like typescriptlang.org has a bunch of Quickstart guides. I’ll try the React guide.

They’re using create-react-app so I have to install that first.

[code language=”bash”]> npm install -g create-react-app[/code]
then

[code language=”bash”]
> create-react-app my-app –scripts-version=react-scripts-ts[/code]
Alright, now it’s doing a bunch of stuff. Probably installing a million dependencies.

[code language=”bash”]> ls node_modules[/code]
Confirmed, that’s one million modules. Somewhere a neckbeard is crying. OK, whatevs.

[code language=”bash”]> npm start[/code]
And there it goes.

[code language=”bash”]
Compiled successfully!

You can now view my-app in the browser.

Local: http://localhost:3000/
On Your Network: http://10.5.96.6:3000/

Note that the development build is not optimized.
To create a production build, use npm run build.
[/code]
Hey, that’s really cool! It automatically makes the site available on my local network.

> Go to http://10.5.96.6:3000 in my iPhone

Yup, there it is. Well hell, that makes mobile testing easy.

[code language=”bash”]> npm test[/code]
What the heck?

[code language=”bash”]Determining test suites to run…
–watch is not supported without git/hg, please use –watchAll
npm ERR! Test failed. See above for more details.
[/code]
> google “watch is not supported without git/hg”, read this issue on github.

Ugh, do I need to change the “watch” command to “watchAll”? Where do I even do that?

> read more

Oh! It’s just complaining because I don’t have git initialized in this project. That could be more clear.

[code language=”bash”]> git init
> npm test[/code]
Back in business.

[code language=”bash”]
PASS src/App.test.tsx
✓ renders without crashing (19ms)

Test Suites: 1 passed, 1 total
Tests: 1 passed, 1 total
Snapshots: 0 total
Time: 4.327s
Ran all test suites related to changed files.

Watch Usage
› Press a to run all tests.
› Press f to run only failed tests.
› Press p to filter by a filename regex pattern.
› Press t to filter by a test name regex pattern.
› Press q to quit watch mode.
› Press Enter to trigger a test run.
[/code]
Oh, I like this. Really well done.

> Go back to the React walkthrough and create Hello.tsx using sample code.

Hmm… why does the file start with this comment?

[code language=”javascript”]
// src/components/Hello.tsx
[/code]
I don’t get it. Is that necessary? There must be some meaning here. Does that somehow help the compiled (ahem transpiled) code map to the source code? Oh wait, it’s probably just so I know where the file should go. I’m an idiot.

> Continue the tutorial, implementing the new component and adding CSS.

Hmm… plain old CSS. What am I a caveman? What transpiled-to-css languages are the cool kids using nowadays?

> Googles around to see what people are using.

Looks like Sass is still the go-to. Anyway, that was a pointless diversion. I hate myself.

> Continue the tutorial, wherein we start writing tests with Jest.

Looks like I’m supposed to install a bunch of stuff now.

[code language=”bash”]
> npm install -D enzyme @types/enzyme react-addons-test-utils
[/code]
Uh oh, first chink in the armor, Ted.

[code language=”bash”]
➜ test3 git:(master) ✗ npm install -D enzyme @types/enzyme react-addons-test-utils
npm WARN deprecated nomnom@1.6.2: Package no longer supported. Contact support@npmjs.com for more info.
npm WARN ajv-keywords@3.2.0 requires a peer of ajv@^6.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN react-addons-test-utils@15.6.2 requires a peer of react-dom@^15.4.2 but none is installed. You must install peer dependencies yourself.

+ @types/enzyme@3.1.11
+ react-addons-test-utils@15.6.2
+ enzyme@3.3.0
added 28 packages from 33 contributors and audited 30811 packages in 16.696s
found 0 vulnerabilities
[/code]
What the hell is nomnom? And why would I contact support@npmjs.com about it? I’m fairly certain they would tell me to f*** right off if I said “uh… could you help me with nomnom?” The docs are inscrutable. “It noms your args and gives them back to you in a hash.” Gee thanks. Maybe it’s clear to regular people and I’m just stupid. Or maybe nom just sucks. Well it’s only deprecated, let’s skip that warning for now.

> Google “ajv-keywords@3.2.0 requires a peer of ajv@^6.0.0 but none is installed. You must install peer dependencies yourself”, find this github issue for npm.

Umm… so… that’s a lot of words. What do I need exactly? Am I supposed to install ajv@^6.0.0? The issue is opened on npm itself, not on ajv. That seems bad. What is ajv anyway? Oh, JSON schema validator? Alright then.

> read this stackoverflow article about the issue.

OK, so that says I’m supposed to update my installation of npm and install ajv@6directly.

> take a flyer, update npm and install ajv directly

[code language=”bash”]
> npm install -D ajv@6
[/code]
Now I’ll try that other command again, see if I get the same errors.

[code language=”bash”]
➜ test3 git:(master) ✗ npm install -D enzyme @types/enzyme react-addons-test-utils
npm WARN deprecated nomnom@1.6.2: Package no longer supported. Contact support@npmjs.com for more info.
npm WARN react-addons-test-utils@15.6.2 requires a peer of react-dom@^15.4.2 but none is installed. You must install peer dependencies yourself.

+ @types/enzyme@3.1.11
+ enzyme@3.3.0
+ react-addons-test-utils@15.6.2
updated 3 packages and audited 30817 packages in 10.298s
found 0 vulnerabilities
[/code]
Success! I got past that error about ajv.

> googles “react-addons-test-utils@15.6.2 requires a peer of react-dom@^15.4.2 but none is installed. You must install peer dependencies yourself.”

Ok, reading several different threads and github issues (the humanity!), but eventually find this one, which explains

There is no bug here. react-addons-test-utils doesn’t exist in React 16. Use react-dom/test-utilsinstead.

Bloody hell… ok, so the TypeScript/React tutorial is based on an older version of React. Let’s see if the tutorial has any issues or pull requests addressing this. Ah yes, there are several. Some with different solutions. This one looks the best. It’s approved, but for some reason it’s not merged. Why can’t they keep things up-to-date? But my github is full of stuff I’ll never touch or keep up to date myself, so who am I to judge? Well, let’s look at the code.

OK, I need to install a different set of test helpers, and I need a test-setup file. Hmm… I wonder if I even needed that ajv thing if I’m updating this other stuff. Well, lemme uninstall react-addons-test-utils and that ajv thing first.

[code language=”bash”]
> npm uninstall react-addons-test-utils
> npm uninstall ajv@6
> npm install -D enzyme @types/enzyme enzyme-adapter-react-16 @types/enzyme-adapter-react-16 react-test-renderer[/code]
OK, this is looking groovy. Now I’ll add the test helper file as mentioned in the pull request.

Wait… now my test-runner (which I’ve kept running this whole time) is failing.

[code language=”bash”]
Enzyme Internal Error: Enzyme expects an adapter to be configured, but found none. To
configure an adapter, you should call `Enzyme.configure({ adapter: new Adapter() })`
before using any of Enzyme’s top level APIs, where `Adapter` is the adapter
corresponding to the library currently being tested. For example:

import Adapter from ‘enzyme-adapter-react-15’;

To find out more about this, see http://airbnb.io/enzyything frme/docs/installation/index.html
[/code]
What? Why is it complaining about enzyme-adapter-react-15? That doesn’t make sense, I installed everything for react-16. Suck a butt.

> goes down a long rabbit hole of google searches and whatnot with no success.

Why does everything have to be so dang hard? Ugh, why can’t they keep the stupid tutorial up-to-date? This is such a pain. I HAVE EVERYTHING!

> Realize I never restarted the test-runner, so it never picked up my test setup file. Restart the test-runner.

Oh yeah, I’m an idiot. It’s happy again.

[code language=”bash”]
PASS src/components/Hello.test.tsx
PASS src/App.test.tsx

Test Suites: 2 passed, 2 total
Tests: 6 passed, 6 total
Snapshots: 0 total
Time: 5.571s
Ran all test suites related to changed files.

Watch Usage
› Press a to run all tests.
› Press f to run only failed tests.
› Press p to filter by a filename regex pattern.
› Press t to filter by a test name regex pattern.
› Press q to quit watch mode.
› Press Enter to trigger a test run.
[/code]

Wrapup

So… this all probably took me about 10–15 minutes to do in realtime and about 2–3 hours to document in this post (I’m a developer, so multiply everything by 3), but at this point I’m at a good stopping point. I’ve got it all running, learned a few things. Out of respect for the reader, let’s call this Part One and I’ll pick it up for Part Two in the next post.

An honest apology is a powerful tool that will serve you well throughout your life. It can ease your conscience and it can strengthen a relationship. It’s not easy, and some people never master this skill. Having the ability to make a heartfelt apology is a mark of emotional maturity.

I believe you need five ingredients to make a full, honest, and heartfelt apology.

1. Say you’re sorry. Look the offended party in the eye, and include their name.
2. State what you did wrong. Be clear about what you did. This isn’t the time to argue. If you disagree about what happened, say what you did honestly and simply.
3. Say why your actions were wrong. How was the action wrong, unfair, or unethical? You must understand why your actions were wrong to take responsibility.
4. Acknowledge the impact of your actions. Show empathy, that you understand the impact of your actions. More than anything people want you to acknowledge how they feel. It also opens the dialog for them to clarify the impact to you.
5. Say how you will change your behavior. An apology should be an acknowledgement that you need to change. If you won’t work to improve your behavior, you’re not really sorry.

Simple Example

I’m sorry Bill. I took the last piece of pizza. I wasn’t paying attention, so you didn’t get your share. I understand if you feel cheated. I will do my best to hold back next time and make sure you everyone gets a fair share. Do you want the rest of the garlic bread?

More Than Words

Those five ingredients are about the words of the apology. But there’s more to it. They can’t just be words. You need to honestly regret your actions. You need to want to change. You need to work to make that change.

Without that intention to change an apology is just hollow manipulation. And without that work to change apologies become meaningless over time.

It’s Difficult and That’s a Good Thing

Offering a good apology can be really difficult. It’s part of human nature that we don’t like to admit when we’re wrong. We don’t like to admit our mistakes. We don’t like to think of ourselves as the “bad guy” in our own internal morality play.

But it should be hard. It should be uncomfortable. That’s why it’s meaningful. That’s what motivates us to change. Admitting our mistakes and learning from them is how we grow. That’s how we become better people.

A few months ago I transitioned into a new role that is somewhat of a hybrid of division lead and team lead (independent division with a business-critical function, but only one large-ish team). Many of the responsibilities for these roles overlap, but I found it helpful to think through what I think is most important for both roles to determine where I should focus my energy. These are my own notes and opinions and anyone is free to disagree. They’re what I think is needed to do a good job in the roles and what I gauge myself against, not points where I claim to excel personally.

Division Lead Responsibilities

• Understand Your Division — Deeply understand how your team contributes to the overall health and opportunity of the company. Know what you’re doing well and what you’re not doing well. Where you have pain points. Where you have opportunities. Understand where you perform relative to others, inside and outside the company, inside and outside your industry. Know the numbers inside and out. Make sure you understand what metrics are important, make sure they’re getting calculated regularly and correctly. Make sure your team understands them and why they’re important.
• Understand the State of the Business — Knowing your division is important, but knowing the state of the company is equally important. Do you need short-term growth? Are you in a cash-crunch? Are you optimizing for customer growth? Are you optimizing for long-term revenue growth? The state of the company, and what the company needs should inform the strategy for your division.
• Set Division Priorities — Given an understanding of the business and a knowledge of your division, set priorities confidently for what your division needs to do to be successful and to help make the company successful. Select and prioritize projects according to these priorities with input from the team leads and team. Make sure the priorities are clear and understood by the teams.
• Plan the Path Forward — Tell a confident, coherent, and believable narrative about what needs to be done and how your team will get there. Repeat it. Make sure everyone in the division understands what you’re doing, why you’re doing it, and how you’ll get there.
• Say “No” to Non-Priorities — Given the priorities and plan forward, say “no” to non-priorities and eliminate distractions as much as possible. Do your best to keep the team focused on the highest value work.
• Communicate Everywhere — Make sure the lines of communication are open; up, down, and across… that you coordinate with other divisions and teams, that you set expectations correctly, and that you communicate problems and delays quickly. Make sure your lead and other division leads know how important projects are going. Make sure the team knows about relevant events in other areas. Listen to the concerns of your division and take them into account.
• Collaborate on Company Strategy — Offer input and opinions on overall company strategy based on your areas of expertise.
• Coach Team Leads — Coach the next generation of team leads to become better leaders and give them opportunities to “step out of their role” and take on greater responsibilities. Always be coaching your replacement.

Team Lead Responsibilities

• Care for the Team — Help team members who are having a hard time both professionally and personally. Make sure people have reasonable workloads to be productive over the long-term. Protect people against “burnout”. Help team members think through goals and plan purposefully for their career.
• Clarify and Assign Tasks — Ensure that people on the team never feel confused or uncertain about what they should be working on. If this happens it’s a serious failure of management. It causes stress, frustration, and friction on the team.
• Communicate Projects — Make sure projects are well-scoped, well-documented, and well-communicated with frequent updates and adjustments as necessary. This can be done by the team lead or by a team member acting as project lead, but it’s the responsibility of the team lead to make sure it’s done well.
• Eliminate Roadblocks — Jump in to help the team if problems arise or they are stuck. Smooth out relationships. Find alternatives. Shield them from distractions and frustrations.
• Ensure the Quality of Work — Poke holes in projects, find nooks and crannies and cracks. Make sure your team is thinking and planning for more than the “happy path.” Make sure you’ve dotted every I and crossed every T. Listen to feedback after a launch to allow for fixing new problems.
• Coach Team Members — Coach team members to help them be more effective and productive. Help them achieve career goals. Help them through difficulties. Help them to be more successful at the company.

My buddy Matias and me, we’re the beeest friends that could be…. 🎶

A few years ago I read a review of a mobile app called Zombies, Run! It’s a neat idea, basically a narrative that you listen to while you go out in the real world and run. It’s kind of like a radio play, where the DJ is the “dispatcher” who has sent you, a runner, out from your home settlement into the post-apocalyptic zombie-filled world to pick up supplies. Of course, as you’re running you will come across packs of zombies and the dispatcher will exhort you to run faster as you hear zombies growling and chasing you.

Running is my least favorite exercise. It hurts and it’s boring. No other exercise gives me quite the same “feels like my lungs are bleeding” feeling. But I have to admit, having some fun little narrative to focus on helps to pass the time and distract me from hating running.

The app isn’t one long radio play though. You can pick music from your library to play, and the app will play these audio vignettes in between the songs (like I said, just like a DJ). However, for some reason, the only music the app recognized from my library was an album by Florence + The Machine. Probably some weird thing with incompatible DRM.* That’s OK, I can dig it. Go with the Flo, so to speak. Sorry.

Anyway, so I was running pretty regularly, every time listening to the same Florence + The Machine album, and then hearing zombies approaching in between songs. I got a little better at running, and I got in a little better shape. And then work got busy and I fell out of the habit. I should really pick it up again.

But here’s the thing, I’ve noticed now that whenever I hear a song by Florence + The Machine, I get this paranoid feeling that zombies are going to pop out around the corner and start chasing me. So if we’re hanging out somewhere and “The dog days are ooooverrrr……” starts coming out of the speaker, that’s why I’m looking around and checking all the blind spots.

---

* Sidenote; Apple, your iTunes software is bad and you should feel bad.

Noodling around on this. Hope you enjoy it.

Every morning in school, millions of children pledge their allegiance to the flag. But the flag itself is a piece of cloth with colored ink, probably made in China. It’s not imbued with divine powers. It doesn’t think and feel. And it doesn’t care about your allegiance.

The flag is of course a powerful symbol. And institutions use symbols to inspire and motivate. In that sense the flag does have real power and importance. People have sacrificed themselves for this literal symbol, and I don’t mean to question that or demean it.

But powerful symbols can also be misused, especially when there is blind allegiance to them. The common trope is a crooked politician draping himself in the flag while violating the core values and principles that flag represents. And those who object are summarily dismissed as un-patriotic and treasonous.

This kind of blind patriotism is focused on “otherness”. It’s not about honoring what makes us strong. It feeds an “Us vs Them” and “America First” mentality. These are popular chants, but they are not our core principles.

No, allegiance should not be given to a symbol, which is just an image or object that represents something greater. Allegiance belongs instead to that thing which a symbol represents, and in this case we are talking about the core principles of the United States.

The Core Principles of the United States

If the flag and “America First” are not core principles of the United States, then what are our principles? We can have different opinions about this, but I’ll share my thoughts. I take them from our history, our founders, and our documents. We can start with the words of the Declaration of Independence.

We hold these truths to be self-evident, that all men[*] are created equal, that they are endowed by their Creator with certain unalienable Rights, that among these are Life, Liberty and the pursuit of Happiness.

The Preamble to The Constitution of the United States continues this (emphasis mine).

We the People of the United States, in Order to form a more perfect Union, establish Justice, insure domestic Tranquility, provide for the common defence, promote the general Welfare, and secure the Blessings of Liberty to ourselves and our Posterity, do ordain and establish this Constitution for the United States of America.

And if we say the Pledge of Allegiance to its end we find.

[…] with Liberty and Justice for All.

I would also include words The New Collossus (aka, the Statue of Liberty Poem).

Give me your tired, your poor, Your huddled masses yearning to breathe free, The wretched refuse of your teeming shore. Send these, the homeless, tempest-tost to me, I lift my lamp beside the golden door!

This is what makes America great, and these are the principles for which we should stand.

Liberty

Personal liberty and freedom is the foundation and bedrock of the United States. Liberty means that we must not allow the government to intrude into our lives, to restrict our way of life, our behavior, and our political and religious views. The founders would have been deeply disturbed by our militarized police force, our warrantless wiretapping, and the general erosion of civil liberties we have seen, particularly since the USA PATRIOT Act. I personally agree with Benjamin Franklin’s quote.**

Those who would give up essential Liberty, to purchase a little temporary Safety, deserve neither Liberty nor Safety.

Questioning Authority

The founding fathers felt that power corrupts and deeply mistrusted government, including our own. This is why our Constitution sets forth limits on governmental powers, in particular in the first Article.

Article I: Congress shall make no law respecting an establishment of religion, or prohibiting the free exercise thereof; or abridging the freedom of speech, or of the press; or the right of the people peaceably to assemble, and to petition the Government for a redress of grievances.

The founders protected dissent, valuing a free and independent press and the right to assembly and petition the government for a redress of grievances. We must be vigilant against a government that seeks to silence or delegitimize dissent or the independent press. This is the first step towards tyranny.

This is also why the founders created a system with careful checks and balances. The founders were careful to balance power between the states and the federal government, and also to split the federal government between three different branches that are meant to keep each other in check. When we see our politicians ignoring or circumventing rules for personal benefit or political gain, we need to hold them accountable.

Justice For All

We believe in Justice for All and that All People are created equal. We do not have a nobility class in the United States. However, the powerful have continued to consolidate power, and the wealthy have continued to expand their share of the pie.

We need to protect the rights of the poor, the powerless, and the unpopular. We must not allow the privileged to put their thumb on the scales of justice. We must ensure the system is not rigged for the wealthy and powerful.

Diversity

The United States is almost entirely a nation of immigrants. Wave after wave of immigrants have come to America to make a new life. And we have been enriched by their struggles, their labor, their art, their culture. This diversity of perspective helps gives rise to American inventiveness. And our shared culture of starting fresh helps give rise to our drive, our hope, our perseverance, and our fierce independence. Simply put, our diversity is one of our greatest strengths and has helped to make us the greatest nation on this Earth.

Living By Our Principles

The next time you say the pledge of allegiance, look past the flag and think about these core things that have made America the great nation that it is today. Speak your allegiance to them.

And as you listen to the news, forget the fear, the noise, the diversions. Think about our principles and what has really made America Great. Forget the politicians, the personalities, the talking heads shouting on the radio and the television. Think about whether we are strengthening the principles to which you are pledging your allegiance or betraying them. Then follow your heart.

---

* I recognize that “all men” is an anachronism, and the treatment of women and minorities in the United States throughout much of our history has been shameful. I think we must acknowledge this to mean “all people” and act accordingly.

** This quote is a little out of historical context (npr article). I don’t care, I fully agree with the meaning applied here whether it was the intent or not.

A lot of people say “Bob, I love it when you say stuff, I want that all the time.” Or “Your facebook posts are so funny, I wish they were longer and made me click a link.” A lot of people.

Well friends, I have exciting news. I am the owner of the shiny new domain bob.blog upon which I shall write my words.

I’ll post about being a human person, tech, fatherhood, maybe a recipe or two. I’ll post some videos. Maybe some reviews. I’ll try to skip politics because 2016 sorta ruined everything.

You might learn a thing or two. Or you might get dumber. If that floats your boat follow me on your drug of choice.

I’ll start it off with this video I made to introduce myself to my company, Automattic. Of course set to music.

Took the kids to the Calatrava art museum. Dey got some good art dere.