Skip to content

Instantly share code, notes, and snippets.

Avatar
🎨
Building accessible UIs

Vitaly Kondratiev vitkon

🎨
Building accessible UIs
View GitHub Profile
@vitkon
vitkon / monorepo-comparison.md
Created Apr 16, 2020
Monorepo tools comparison
View monorepo-comparison.md

Mono Repository Tool Comparison

For Web Client / Front End Projects

(That Probably Use HTML, CSS, and JS)

I made a list of 20 things I might want out of a monorepo tool for a Design System to use as a basis for comparing some of the options including Lerna, Northbrook, and Rush.

⚠️ Northbrook's author says the project is pretty dead and now uses Lerna.

Qualifications Wanted

@vitkon
vitkon / base.css
Created Sep 28, 2018
fluid typography
View base.css
/* Fluid typography with 16-24px font size range based on the width of the viewport */
/* reference - https://css-tricks.com/snippets/css/fluid-typography/ */
:root {
--min-content-width: 320;
--max-content-width: 1600;
--min-font-size: 16;
--max-font-size: 24;
}
@vitkon
vitkon / App.spec.tsx
Created Feb 19, 2018
Poi article files
View App.spec.tsx
import * as React from 'react';
import { shallow } from 'enzyme';
import App from '../App';
describe('App', () => {
it('should exist', () => {
expect(App).toBeDefined();
});
@vitkon
vitkon / setupTests.js
Created Feb 19, 2018
Poi article files
View setupTests.js
import { configure } from 'enzyme';
import * as Adapter from 'enzyme-adapter-react-16';
configure({ adapter: new Adapter() });
@vitkon
vitkon / package.json
Last active Feb 18, 2018
Poi article files
View package.json
{
"jest": {
"transform": {
"^.+\\.tsx?$": "ts-jest"
},
"setupTestFrameworkScriptFile": "./setupTests.ts",
"testRegex": "(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$",
"moduleNameMapper": {
"\\.(css|jpg|png|svg)$": "<rootDir>/node_modules/jest-css-modules"
},
@vitkon
vitkon / App.tsx
Created Feb 18, 2018
Poi article files
View App.tsx
import * as React from 'react';
import * as styles from './App.module.css';
const App: React.SFC<{}> = () => <div>
<h1 className={styles.heading}>My App</h1>
</div>;
export default App;
@vitkon
vitkon / App.module.css
Created Feb 18, 2018
Poi article files
View App.module.css
.heading {
color: purple
}
@vitkon
vitkon / App.tsx
Created Feb 18, 2018
Poi article files
View App.tsx
import * as React from 'react';
const App: React.SFC<{}> = () => <div>
<h1>My App</h1>
</div>;
export default App;
@vitkon
vitkon / tsconfig.json
Created Feb 18, 2018
Poi article files
View tsconfig.json
{
"compilerOptions": {
"target": "esnext",
"strict": true,
"module": "es2015",
"moduleResolution": "node",
"jsx": "react"
}
}
@vitkon
vitkon / poi.config.js
Created Feb 18, 2018
Poi article files
View poi.config.js
module.exports = {
presets: [
require('poi-preset-react')(),
require('poi-preset-typescript')()
]
}