Table of Contents

• What is Jest Preview and why I built it?
• What struggles do I have to overcome when building an OSS project?
• What did I receive from doing OSS?
• Some tips if you want to dip your toes into OSS.
• Q&A

What is Jest Preview and why I built it?

What is Jest Preview and why I built it?

What struggles do I have to overcome when building an OSS project?

Struggles

• It’s difficult.

import styles from './styles.module.css';

<div className={styles.button}>Click me</div>
import styles from './styles.module.css';

<div className={styles.button}>Click me</div>

E.g: We might know how to use CSS Modules, but we might not need to know how CSS Modules work under the hood

require('postcss-modules')({
  getJSON: (cssFileName, json, outputFileName) => {
    console.log(JSON.stringify(json));
  },
  generateScopedName: function (name, filename, css) {
    const stringHash = require('string-hash');
    const i = css.indexOf('.' + name);
    const line = css.substr(0, i).split(/[\\r\\n|\\n|\\r]/).length;
    const removedNewLineCharactersCss = css.replace(/(\\r\\n|\\n|\\r)/g, '');
    const hash = stringHash(removedNewLineCharactersCss).toString(36).substr(0, 5);
    return '_' + name + '_' + hash + '_' + line;
  },
})
require('postcss-modules')({
  getJSON: (cssFileName, json, outputFileName) => {
    console.log(JSON.stringify(json));
  },
  generateScopedName: function (name, filename, css) {
    const stringHash = require('string-hash');
    const i = css.indexOf('.' + name);
    const line = css.substr(0, i).split(/[\\r\\n|\\n|\\r]/).length;
    const removedNewLineCharactersCss = css.replace(/(\\r\\n|\\n|\\r)/g, '');
    const hash = stringHash(removedNewLineCharactersCss).toString(36).substr(0, 5);
    return '_' + name + '_' + hash + '_' + line;
  },
})

What did I receive from doing open source software?

• Knowledge. A lot of knowledge.

• Read open source code a lot => code reading/ debugging skills improved

• Understand how the tools you use everyday work under the hood => Better programmer

• Rabbit hole: Jest, Vite core, CRA core, Websocket, chokidar, shebang, PostCSS, Babel…

What did I receive from doing open source software?

• Opportunities:

• Nominated for the Most Exciting Use of Technology, React Open Source Awards, React Summit

• Jobs: Companies reach out

• Conferences/ Tech events

What did I receive from doing open source software?

Know great developers:

• Twitter

What did I receive from doing open source software?

Know great developers:

• In-person

• You guys at JSConf Korea 2022 ❤️

What did I receive from doing open source software?

I received a lot of thanks:

How to choose an open source project to work on?

• Should be projects you use every day

• Should solve your own problem

Find a maintainer

Do not start at 1.x

• A new project is full of PoC and experiments
• 1.x means your software must be backward compatible
• Major version zero (0.y.z) is for initial development. Anything MAY change at any time. The public API SHOULD NOT be considered stable.

Use your own software

• When you use it as a normal user, you know if you need to adjust or add more features to make it usable

Ask for feedback

• Your software can be subjective

Learn from others