BRIEFS logo BRIEFS

Why I don't normally use scoped packages

02/21/2017 , 2m, 56s

This is another answer to a question on my ama: Why not use a scoped package for nps?

Maintainable Tests

02/16/2017 , 2m, 43s

Just some thoughts on how to structure tests (specifically setup) in a way that makes them easier to understand in the future.

Learning new tech and working on side projects

02/10/2017 , 2m, 47s

I got a question on my AMA asking me how to learn new tech and work on side projects. Here's my answer.

Links:

See you all on twitter!

Learning Codebases

02/10/2017 , 2m, 43s

I got a question on my AMA asking me how I read and learn codebases. Here's my answer!

See you all on twitter!

AMA: TypeScript or Babel?

02/09/2017 , 2m, 54s

I got a question on my AMA asking me about whether I prefer TypeScript or Babel. I prefer Babel because it has better interop and a wider community. For more, listen to this 3 minute podcast :)

See you all on twitter!

Change the pace of your day-to-day

01/19/2017 , 2m, 38s

I've recently been working on prettier-eslint and an accomanying cli and it's been a lot of fun. I really think that doing this kind of thing can really change the pace of your day-to-day and encourage you to do the same!

See you all on twitter!

Q&A: Deploying and Build Process

08/23/2016 , 2m, 51s

David asked me about my Deploy/Build process and it was easier to answer in audio form :)

Links: What we can learn about testing from the wheel (my talk at Ignite Fluent 2016)

See you all on twitter!

Lodash Tooling and Optimizations

07/13/2016 , 2m, 58s

My co-worker asked me about why the babel-plugin-lodash module is useful and I explain that and the lodash-webpack-plugin too :-)

Testing and Transpilation

06/24/2016 , 2m, 59s

I got a question about why we test our pre-transpiled code (or rather, instrument that code for coverage) rather than our post-transpiled code. So here's my answer. I reference babel-plugin-__coverage__ (use this with karma) and nyc (use this with tests run in node, like with mocha or ava).

Good luck!

My Daughter, JavaScript Air, Pam Selle, and Diversity in Tech

06/08/2016 , 2m, 56s

I had an enlightening experience today after hearing my 4 year old daughter Becca's response to watching some of the JavaScript Air episode on webpack today. Pam Selle is a regular panelist.

Q&A: Thoughts on TDD (Test Driven Development)

06/07/2016 , 2m, 57s

I was asked on my AMA about my opinoin on Test Driven Development (or TDD).

Q&A: Aphrodite vs. Radium

06/06/2016 , 2m, 48s

Alex Booker asks:

Hi, Kent

I've seen you advocating Aphrodite on Twitter and noticed you're using it for the JavaScript Air site

Just wondering what drew you to Aphrodite over it's competitors (most notably Radium)

I have a small amount of exposure to both and they seem to accomplish same thing but Radium is more mature

Thanks

P.S. I hope you're having a nice trip, mate πŸ˜€

Also, you might be interested in this CSS in JS comparison. (Note this PR)

I hope this answer helps!

Nested Unit Tests: An Anti-Pattern

05/25/2016 , 2m, 58s

At first I was really bothered that AVA didn't have support for nested tests, but now I consider nesting tests to be an anti-pattern.

Here's an example of the kind of thing I mean (see this in a syntax-highlighted gist here):

Mocha with nesting (don't mind the actual tests, just imagine what this would be like with a larger test file):

import Customers from './Customers'
import getMockCustomers from './Customers/mocks'
describe('Customers', () => {

  let mockCustomers

  beforeEach(() => {
    Customers.setCustomers([]) // initialize to empty for most tests
    mockCustomers = getMockCustomers() // have mock customers available
  })

  afterEach(() => {
    Customers.setCustomers([]) // clean up just in case
  })

  describe('getCustomers', () => {
    beforeEach(() => {
      Customers.setCustomers(mockCustomers)
    })

    it('should return the existing customers', () => {
      const customers = Customers.getCustomers()
      expect(customers).to.be.eql(mockCustomers)
      // questions you must ask if you're not familiar with this file and
it's bigger:
      // - where does `mockCustomers` come from?
      // - what make `getCustomers` return the mockCustomers?
    })
  })

  describe('setCustomers', () => {
    it('should set the customers array', () => {
      Customers.setCustomers(mockCustomers)
      const customers = Customers.getCustomers()
      expect(customers).to.be.eql(mockCustomers)
      // question you must ask if you're not familiar with this file and
it's bigger:
      // - where does `mockCustomers` come from? What is it initialized as?
    })
  })
})

Here's what it would look like without nesting (with AVA, though you could mostly do this with Mocha too):

import test from 'ava'

test('getCustomers: should return the existing customers', t => {
  const mockCustomers = initializeCustomers()
  const customers = Customers.getCustomers()
  t.deepEqual(customers, mockCustomers)
  cleanupCustomers()
})

test('setCustomers: should set the customers array', t => {
  initializeCustomers([])
  const mockCustomers = getMockCustomers()
  Customers.setCustomers(mockCustomers)
  const customers = Customers.getCustomers()
  t.deepEqual(customers, mockCustomers)
  cleanupCustomers()
})

function initializeCustomers(initialCustomers = getMockCustomers()) {
  Customers.setCustomers(initialCustomers)
  return initialCustomers
}

function cleanupCustomers() {
  Customers.setCustomers([])
}

Like I said, this may be a bad example. Don't be distracted by the tests themselves. Just look at the it blocks above in the Mocha tests and compare it to the test block in the AVA tests below. The difference is that with the it blocks, you have to keep in your head what's going on in a beforeEach and that relationship is implicit. In the test block, there is a level of abstraction, but it's explicit so you don't need to worry about keeping it in your head because it's in front of your face.

I hope this is helpful!

OSS Licenses

05/25/2016 , 2m, 22s

Check out the Open Source Definition. A license is required for your project to be considered Open Source. I recommend you choose a license.

Generators, Boilerplates, and Starter Kits

05/25/2016 , 2m, 21s

There are thousands of generators, boilerplates, and starter kits available on npm right now. While these tools are super handy to get started, using them will bite you in the long run. I recommend that you make and use your own, and only use others as a reference.

The value of an AMA

04/27/2016 , 2m, 42s

I was just thinking about my AMA and decided that I'd talk about how I've found it to be valuable and encourage you to start your own!

Here's mine: https://github.com/kentcdodds/ama Here's Sindre's: https://github.com/sindresorhus/ama

Aphrodite vs BEM (CSS)

04/21/2016 , 2m, 51s

I was talking with my good friend Jamund Ferguson today and he mentioned that he just really likes the simplicity of using regular (non-preprocessed) CSS with BEM and here are some of the reasons I still prefer Aphrodite.

I didn't mention in this that I also love that Aphrodite automatically vendor-prefixes everything for me as well.

Hope this is helpful!

JavaScript Air Stats celebration (100k downloads!! πŸŽ‰)

04/18/2016 , 2m, 59s

JavaScript Air just passed 100,000 downloads on the audio podcast hosted by podbean.com πŸŽ‰ 🎊

Things are going really well for the show so I wanted to share a bunch of stats about the show with you today. Here are the promised stats screenshots: http://jsair.io/stats-2016-04

See you on twitter!

Q&A: Aphrodite vs CSS Modules?

04/08/2016 , 2m, 58s

My friend Matt Winchester asked me what I think of Aphrodite compared to css-modules. Here's my answer.

Here's an example of me migrating from CSS (processed with PostCSS) to Aphrodite: https://github.com/javascriptair/site/commit/d8b8bf349f6c94a1d00539bb285240615baf5b7d

Oh! And one other thing I didn't mention as a benefit of Aphrodite that can be a killer feature is because your CSS is colocated with the components that are using it, you can ship only the styles that are needed and used, rather than shipping ALL of your styles. A lot of problems go away when you have an explicit relationship between your styles and your components πŸ‘

I hope this is helpful :-) Feel free to ask more questions on my AMA

Q&A: Recording audio/video for JavaScript Air

04/07/2016 , 2m, 10s

Adam Morgan asked me how I record audio and video for JavaScript Air. Here's my answer.

Links:

I hope this is helpful! Feel free to ask me more questions on my AMA

How JavaScript Code Coverage Works

04/06/2016 , 2m, 53s

Just a quick explanation of how tools instrument your JavaScript code to record and report code coverage. Common tools:

You may also be interested in this video + this repo where I go through setting up code coverage with ES6, Webpack, and Karma. Just replace where I use isparta with using babel-plugin-__coverage__ (like this) and it should work great πŸ‘

I hope this is helpful!

See you on twitter!

Working from home: Snacks

04/05/2016 , 1m, 35s

Just a quick pro-tip for those of you working from home. Keep the snacks outside of arms reach! And drink lots of water!

Automating JavaScript Air

04/05/2016 , 2m, 54s

I've automated a ton of stuff for JavaScript Air. There's definitely still more to do, but I'm pretty happy with how much is automated. You can find most of the automation stuff in the npm scripts in the package.json in the repo. Many of these reference scripts found in the other directory.

Automation is great. In fact, this very episode used some of the automation found in this repo to make it mono and compress the audio. As I often say: Saving time is not the only reason to automate workflows.

See you on twitter!

From vim to Atom + vim mode

04/05/2016 , 2m, 58s

For the last 24 hours I've been using Atom with vim mode and so far I'm liking it a lot. Here are the plugins I've installed so far:

See you on twitter!

Our Community is Like a Fire πŸ”₯

03/09/2016 , 1m, 28s

I was talking with some of the other Fluent Conf speakers this evening about one of my favorite features of our community: The more we share with each other, the better it is for everyone.

See you on twitter

Go to meetups/conferences and meet new people

03/08/2016 , 2m, 26s

The best part of going to meetups and conferences is getting to know new people you haven't met before and learn about their perspective and experiences. It will make you a better person and software developer πŸ‘

See you on twitter!

First things first

03/05/2016 , 28s

Today I'm playing with my kids and I'm reminded how important they are in life. I am giving two talks at Fluent Conf next week and doing a live JavaScript Air show and I have a lot to prepare and practice. However today I'm focusing on one of the most important things in my life: my relationship with my children. Don't forget what matters most.

Gifs in PRs

02/29/2016 , 1m, 31s

When making a pull request it's often really helpful to take a screenshot of before/after, make an animated gif, or do a screencast. Here are some handy resources about this:

See you on twitter!

Lessons learned broadcasting live at React Conf

02/23/2016 , 2m, 52s

I just finished the show Live at React Conf. This is just a few lessons learned from this experience.

See you on twitter!

Why I can't do your job for you

02/23/2016 , 2m, 52s

Got an email asking me to help someone by basically doing their job for them. I realize that this crazy world of the web can be a little exhausting with all the tooling and stuff, and I'm really motivated to help people learn. But I just simply don't have the time to help everyone that asks me for help. Here's a little bit on why.

Angular and Webpack for Modular Applications

See you on twitter!

React's New Versioning Scheme

02/20/2016 , 2m, 59s

Just my opinion on React's new versioning scheme in which I reference semver.org.

See you on twitter!

Ignite Talk Proposal: What we can learn about testing from the wheel

02/19/2016 , 2m, 43s

I just made an ignite talk proposal about testing that I think could really help clear up the question about what and how to test your applications. Here's a little teaser of what it's about.

Submit your own proposal here.

See you on twitter!

Sharing your learning: Egghead a day

02/18/2016 , 1m, 50s

Every weekday I tweet at the hashtag #eggheadADay. I share this with my co-workers and we have a discussion about the lesson of the day. It's a great way to keep your skills sharp. Here's the Google Doc I use.

See you on twitter.

New maintainer(s) needed for angular-formly

02/18/2016 , 2m, 54s

This explains the what, why, and how for me requesting a new maintainer (or several) for the angular-formly project. Links:

See you on twitter!

Got a PR Merged into ReactJS πŸŽ‰ + Tips

02/18/2016 , 2m, 51s

Super excited that my first pull request to the ReactJS project was merged last night! It was based on this issue I filed. So excited to have something I've done help the React community :-)

Big thank you to Dan Abramov, Paul O’Shannessy, Jim, and Facebook Community Bot for iterating on the PR with me :-)

In this show I give a few tips about contributing to open source projects and reference my (free) Egghead.io series: How to Contribute to an Open Source Project on GitHub. Also check out my blogpost What open source project should I contribute to? This gives tips on how to identify how you can contribute.

See you on twitter!

Refactoring Big React Components

02/17/2016 , 2m, 21s

Been refactoring a big react component into smaller stateless components to make it easier to understand dependencies for the different pieces of the component. Merrick Christensen demonstrates how to do this in his Egghead.io lesson Extracting Private React Components

See you on twitter!

Workshop Tips

02/16/2016 , 2m, 31s

Last week I gave a workshop about using the AVA framework to test React. One thing that I tried is this idea from A better way to teach technical skills to a group by Dean Hochman which utilizes post-it notes in an interesting way.

I also utilized a little emoji I affectionately call Terry the Tiger 🐯 to direct people to the actionable items in my thorough workshop instructions

See you on twitter!

Let's be nice

02/09/2016 , 2m, 57s

In this first episode of 3 minutes with Kent, I talk about the value of being nice in our industry.