├── store ├── index.js └── columns.js ├── static ├── favicon.ico ├── logo-small.png ├── favicon_dark.ico └── logo_dark-small.png ├── assets ├── fonts │ ├── Inter │ │ ├── Inter.otf │ │ ├── Inter.var.woff2 │ │ ├── Inter-roman.var.woff2 │ │ └── Inter-italic.var.woff2 │ └── fonts.css └── scss │ ├── partials │ ├── _mixins.scss │ ├── _typography.scss │ ├── _post.scss │ ├── _variables.scss │ ├── _helpers.scss │ └── _reset.scss │ └── main.scss ├── layouts ├── error.vue └── default.vue ├── jsconfig.json ├── .editorconfig ├── content ├── notes.md ├── product-led-growth-and-bottom-up-sales.md ├── transformational-things-start-out-by-looking-like-toys.md ├── 404.md ├── good-software.md ├── influences.md ├── webgl.md ├── the-next-generation-of-good-software-may-require-long-development-cycles.md ├── webassembly.md ├── aphorisms.md ├── the-flywheel-effect-of-protesting-and-rioting.md ├── haroon-meer.md ├── ruthlessly-eliminate-pages-from-your-software.md ├── attention-is-the-best-asset-today.md ├── colophon.md ├── canary.md ├── figma.md ├── about.md ├── webgl-and-webassembly-for-high-performant-gpu-intensive-applications.md ├── good-software-is-unconscious.md ├── be-wary-of-the-late-majority-and-laggards.md ├── andy-matuschaks-note-taking-system.md └── work-at-a-scale-that-resonates-with-you.md ├── middleware └── README.md ├── .eslintrc.js ├── components ├── PostItem.vue ├── global │ ├── PostList.vue │ ├── InterLink.vue │ └── NewsletterForm.vue ├── PopoverContent.vue ├── NavbarProfile.vue ├── Navbar.vue ├── Grid.vue ├── Popover.vue ├── ColumnHeader.vue ├── ColumnCloseButton.vue ├── PostListItem.vue ├── OverloadModal.vue ├── NavbarSocial.vue └── Column.vue ├── README.md ├── package.json ├── .gitignore ├── mixins └── interLinks.js ├── nuxt.config.js └── pages └── _slug.vue /store/index.js: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /static/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ycparak/pkms/HEAD/static/favicon.ico -------------------------------------------------------------------------------- /static/logo-small.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ycparak/pkms/HEAD/static/logo-small.png -------------------------------------------------------------------------------- /static/favicon_dark.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ycparak/pkms/HEAD/static/favicon_dark.ico -------------------------------------------------------------------------------- /static/logo_dark-small.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ycparak/pkms/HEAD/static/logo_dark-small.png -------------------------------------------------------------------------------- /assets/fonts/Inter/Inter.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ycparak/pkms/HEAD/assets/fonts/Inter/Inter.otf -------------------------------------------------------------------------------- /assets/fonts/Inter/Inter.var.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ycparak/pkms/HEAD/assets/fonts/Inter/Inter.var.woff2 -------------------------------------------------------------------------------- /assets/fonts/Inter/Inter-roman.var.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ycparak/pkms/HEAD/assets/fonts/Inter/Inter-roman.var.woff2 -------------------------------------------------------------------------------- /assets/fonts/Inter/Inter-italic.var.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ycparak/pkms/HEAD/assets/fonts/Inter/Inter-italic.var.woff2 -------------------------------------------------------------------------------- /layouts/error.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 13 | 14 | 16 | -------------------------------------------------------------------------------- /jsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "baseUrl": ".", 4 | "paths": { 5 | "~/*": ["./*"], 6 | "@/*": ["./*"], 7 | "~~/*": ["./*"], 8 | "@@/*": ["./*"] 9 | } 10 | }, 11 | "exclude": ["node_modules", ".nuxt", "dist"] 12 | } 13 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | # editorconfig.org 2 | root = true 3 | 4 | [*] 5 | indent_style = space 6 | indent_size = 2 7 | end_of_line = lf 8 | charset = utf-8 9 | trim_trailing_whitespace = true 10 | insert_final_newline = true 11 | 12 | [*.md] 13 | trim_trailing_whitespace = false 14 | -------------------------------------------------------------------------------- /content/notes.md: -------------------------------------------------------------------------------- 1 | --- 2 | depth: 1 3 | title: All Notes 4 | abstract: A navigational list of all my notes. Ordered by most recently updated. This site is still new and I'm still migrating notes, so some may be blank placeholders. 5 | collection: Note 6 | --- 7 | -------------------------------------------------------------------------------- /content/product-led-growth-and-bottom-up-sales.md: -------------------------------------------------------------------------------- 1 | --- 2 | depth: 2 3 | title: Product led growth and bottom-up sales 4 | abstract: "Product led growth and bottom-up sales" 5 | collection: Note 6 | --- 7 | 8 | --- 9 | Links to this note: 10 | - Canary -------------------------------------------------------------------------------- /content/transformational-things-start-out-by-looking-like-toys.md: -------------------------------------------------------------------------------- 1 | --- 2 | depth: 1 3 | title: Transformational things often start out looking like toys 4 | abstract: "Transformational things often start out looking like toys" 5 | collection: Note 6 | --- 7 | 8 | --- 9 | Links to this note: 10 | - -------------------------------------------------------------------------------- /middleware/README.md: -------------------------------------------------------------------------------- 1 | # MIDDLEWARE 2 | 3 | **This directory is not required, you can delete it if you don't want to use it.** 4 | 5 | This directory contains your application middleware. 6 | Middleware let you define custom functions that can be run before rendering either a page or a group of pages. 7 | 8 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/routing#middleware). 9 | -------------------------------------------------------------------------------- /assets/fonts/fonts.css: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: 'Inter var'; 3 | font-weight: 100 900; 4 | font-style: normal; 5 | font-named-instance: 'Regular'; 6 | font-display: swap; 7 | src: url("./Inter/Inter.var.woff2") format("woff2"); 8 | } 9 | @font-face { 10 | font-family: 'Inter var'; 11 | font-weight: 100 900; 12 | font-style: italic; 13 | font-named-instance: 'Italic'; 14 | font-display: swap; 15 | src: url("./Inter/Inter-italic.var.woff2") format("woff2"); 16 | } -------------------------------------------------------------------------------- /assets/scss/partials/_mixins.scss: -------------------------------------------------------------------------------- 1 | @mixin daynight { 2 | transition-property: all; 3 | transition-duration: 200ms; 4 | transition-timing-function: ease-in-out; 5 | } 6 | 7 | @mixin colors { 8 | background-color: var(--background-color); 9 | color: var(--text-color); 10 | } 11 | 12 | @mixin colors-inverted { 13 | background-color: var(--text-color); 14 | color: var(--background-color); 15 | } 16 | 17 | @mixin selected-color { 18 | background-color: var(--selected-color); 19 | color: var(--background-color); 20 | } -------------------------------------------------------------------------------- /content/404.md: -------------------------------------------------------------------------------- 1 | --- 2 | depth: 1 3 | title: Err, 404. Not found. 4 | collection: Note 5 | --- 6 | Whatever you were looking for either no longer exists or (more likely) never existed in the first place. Here's a few links to help you find civilisation again: 7 | - About me 8 | - Notes 9 | - Aphorisms 10 | - Influences 11 | - Colophon -------------------------------------------------------------------------------- /layouts/default.vue: -------------------------------------------------------------------------------- 1 | 13 | 14 | 24 | 25 | 27 | -------------------------------------------------------------------------------- /.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | env: { 4 | browser: true, 5 | node: true 6 | }, 7 | parserOptions: { 8 | parser: 'babel-eslint' 9 | }, 10 | extends: [ 11 | '@nuxtjs', 12 | 'plugin:nuxt/recommended' 13 | ], 14 | rules: { 15 | 'no-unused-vars': 'off', 16 | 'no-console': 'off', 17 | "vue/html-closing-bracket-newline": ["error", { 18 | "singleline": "never", 19 | "multiline": "never" 20 | }], 21 | "space-before-function-paren": ["error", { 22 | "anonymous": "never", 23 | "named": "never", 24 | "asyncArrow": "always" 25 | }], 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /components/PostItem.vue: -------------------------------------------------------------------------------- 1 | 11 | 12 | 24 | 25 | 33 | -------------------------------------------------------------------------------- /content/good-software.md: -------------------------------------------------------------------------------- 1 | --- 2 | depth: 2 3 | title: Good software 4 | abstract: "Explorations and research into trying to figure out repeatable principles that can be a benchmark for building good software." 5 | collection: Note 6 | --- 7 | - Good software is unconscious 8 | - Good software is purposeful 9 | - Good software is fast 10 | - Good software is reliable 11 | - Good software is designed before being built 12 | - Good software is not designed with an asthetic in mind 13 | 14 | 15 | --- 16 | Links to this note: 17 | - 18 | - Figma 19 | -------------------------------------------------------------------------------- /components/global/PostList.vue: -------------------------------------------------------------------------------- 1 | 11 | 12 | 35 | 36 | 38 | -------------------------------------------------------------------------------- /components/PopoverContent.vue: -------------------------------------------------------------------------------- 1 | 13 | 14 | 25 | 26 | 39 | -------------------------------------------------------------------------------- /content/influences.md: -------------------------------------------------------------------------------- 1 | --- 2 | depth: 2 3 | title: People and things that have influenced me 4 | abstract: "This note is still a work in progress. It takes time, if you hadn't documented it already, to list out your influences. But I think it's important to recognise that we stand on the shoulders of giants." 5 | collection: Note 6 | --- 7 | This note is still a work in progress. It takes time, if you hadn't documented it already, to list out your influences. So if it seems bare it's only because I haven't yet listed everything. Regardless, I think it's important to recognise that we stand on the shoulders of giants. In no particular order: 8 | - Canary 9 | - Haroon Meer 10 | - Andy Matuschak's note taking system 11 | -------------------------------------------------------------------------------- /components/NavbarProfile.vue: -------------------------------------------------------------------------------- 1 | 11 | 12 | 17 | 18 | 39 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # PKMS 2 | 3 | Note taking system inspired by [Andy Matuschak’s notes](https://notes.andymatuschak.org/About_these_notes), built with Vue and Nuxt.js. 4 | 5 | As an interface paradigm, horizontal panning seems to me to encourage ephemeral rabbit hole consumption, I think this takes advantage of that, and intuitevly feels like it holds higher end-user retentention. OTOH, I think that it possibly comes at the expense of deeper knowledge study / understanding. 6 | 7 | ![5](https://github.com/ycparak/pkms/assets/12952566/12a3ccfb-bb77-4f86-92c5-b179e31d5a25) 8 | 9 | ## Use 10 | 11 | ```bash 12 | # install dependencies 13 | $ npm install 14 | 15 | # serve with hot reload at localhost:3000 16 | $ npm run dev 17 | 18 | # build for production and launch server 19 | $ npm run build 20 | $ npm run start 21 | 22 | # generate static project 23 | $ npm run generate 24 | ``` 25 | 26 | For detailed explanation on how things work, check out [Nuxt.js docs](https://nuxtjs.org). 27 | -------------------------------------------------------------------------------- /content/webgl.md: -------------------------------------------------------------------------------- 1 | --- 2 | depth: 2 3 | title: WebGL 4 | abstract: "WebGL is a rasterisation engine implemented as a Javascript API. It's designed to compute 2D/3D graphics very fast in a Web browser. It does this by tapping into the processing power of the GPU being used. I don't yet understand WebAssembly well enough to give a better description than that. Even that description may be slightly wrong." 5 | collection: Note 6 | --- 7 | WebGL is a rasterisation engine implemented as a Javascript API. It's designed to compute 2D/3D graphics very fast in a Web browser. It does this by tapping into the processing power of the GPU being used. 8 | 9 | I don't yet understand WebAssembly well enough to give a better description than that. Even that description may be slightly wrong. 10 | 11 | --- 12 | Links to this note: 13 | - WebGL and WebAssembly for high performant GPU intensive applications 14 | - Figma 15 | -------------------------------------------------------------------------------- /content/the-next-generation-of-good-software-may-require-long-development-cycles.md: -------------------------------------------------------------------------------- 1 | --- 2 | depth: 2 3 | title: The next generation of great software may require a long initial development time 4 | abstract: "Figma took 3 years to get to preview release. Superhuman took a similarly long period. Both companies were going after markets with deeply entrenched existing players. The next generation of software may also have to spend a long time in initial development. This has tension with the common wisdom of moving fast and getting to initial release as quickly as possible." 5 | collection: Note 6 | --- 7 | Figma took 3 years to get to preview release. Superhuman took a similarly long period. Both companies were going after markets with deeply entrenched existing players. The next generation of software may also have to spend a long time in initial development. This has tension with the common wisdom of moving fast and getting to initial release as quickly as possible. 8 | 9 | --- 10 | 11 | Links to this note: 12 | - Figma -------------------------------------------------------------------------------- /content/webassembly.md: -------------------------------------------------------------------------------- 1 | --- 2 | depth: 2 3 | title: WebAssembly 4 | abstract: "WebAssembly is a binary format for machine code that was specifically designed with browsers in mind. Apps compiled to WebAssembly aim to execute as fast as native apps. This means WebAssembly has the potential to change the way software is written on the web. I don't yet understand it well enough to give a better description than that. Even that description may be slightly wrong." 5 | collection: Note 6 | --- 7 | WebAssembly is a binary format for machine code that was specifically designed with browsers in mind. Apps compiled to WebAssembly aim to execute as fast as native apps. This means WebAssembly has the potential to change the way software is written on the web. 8 | 9 | I don't yet understand WebAssembly well enough to give a better description than that. Even that description may be slightly wrong. 10 | 11 | --- 12 | 13 | Links to this note: 14 | - WebGL and WebAssembly for high performant GPU intensive applications 15 | - Figma 16 | -------------------------------------------------------------------------------- /content/aphorisms.md: -------------------------------------------------------------------------------- 1 | --- 2 | depth: 2 3 | title: Aphorisms 4 | abstract: "An unordered list of aphorisms. Some are included because of clever wordplay. Others are included because of some unique insight." 5 | collection: Note 6 | --- 7 | > I am not who you think I am; I am not who I think I am; I am who I think you think I am - Thomas Cooley 8 | 9 | > There are two kinds of companies, those that work to try to charge more and those that work to charge less - Jeff Bezos 10 | 11 | > …when the ambitious man whose slogan is “Either Caesar or nothing” does not get to be Caesar, he despairs over it. But this also means something else: precisely because he did not get to be Caesar, he now cannot bear to be himself - Søren Kierkegaard 12 | 13 | > The urge to save humanity is almost always a false front for the urge to rule. - H. L. Mencken 14 | 15 | > Yesterday I was clever, so I wanted to change the world. Today I am wise, so I am changing myself. - Rumi 16 | 17 | > For what shall it profit a man, if he shall gain the whole world, but lose his soul? -Mark 8:36 18 | 19 | > The brave don't live forever but the cautious don't live at all. The only thing that's truly terrifying is the unlived life. - Unkown 20 | 21 | -------------------------------------------------------------------------------- /components/global/InterLink.vue: -------------------------------------------------------------------------------- 1 | 15 | 16 | 35 | 36 | 56 | -------------------------------------------------------------------------------- /components/Navbar.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 13 | 14 | 59 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "ycparak", 3 | "version": "1.0.0", 4 | "description": "Yusuf Parak's (@ycparak) personal site and blog.", 5 | "author": "Yusuf Parak", 6 | "private": true, 7 | "scripts": { 8 | "dev": "nuxt", 9 | "build": "nuxt build", 10 | "start": "nuxt start", 11 | "generate": "nuxt generate", 12 | "lint": "eslint --ext .js,.vue --ignore-path .gitignore ." 13 | }, 14 | "dependencies": { 15 | "@nuxt/content": "^1.5.3", 16 | "@nuxtjs/axios": "^5.12.0", 17 | "@nuxtjs/dotenv": "^1.4.0", 18 | "@nuxtjs/feed": "^2.0.0", 19 | "@nuxtjs/moment": "^1.6.1", 20 | "@popperjs/core": "^2.4.4", 21 | "nuxt": "^2.14.0", 22 | "reading-time": "^1.2.0", 23 | "rehype-minify-whitespace": "^4.0.4", 24 | "vue-feather-icons": "^5.0.0", 25 | "vue-fragment": "^1.5.1", 26 | "vue-scrollto": "^2.18.2" 27 | }, 28 | "devDependencies": { 29 | "@aceforth/nuxt-optimized-images": "^1.2.0", 30 | "@nuxtjs/color-mode": "^1.0.2", 31 | "@nuxtjs/eslint-config": "^2.0.0", 32 | "@nuxtjs/eslint-module": "^1.0.0", 33 | "@nuxtjs/google-analytics": "^2.4.0", 34 | "@nuxtjs/style-resources": "^1.0.0", 35 | "babel-eslint": "^10.0.1", 36 | "eslint": "^6.1.0", 37 | "eslint-plugin-nuxt": ">=0.4.2", 38 | "imagemin-pngquant": "^9.0.0", 39 | "node-sass": "^4.14.1", 40 | "sass-loader": "^8.0.2" 41 | } 42 | } 43 | -------------------------------------------------------------------------------- /content/the-flywheel-effect-of-protesting-and-rioting.md: -------------------------------------------------------------------------------- 1 | --- 2 | depth: 2 3 | title: The Flywheel Effect of Protesting and Rioting 4 | abstract: "A nonviolent protest provides the cover for those who would loot and vandalise. At the same time, violent actions put an emphasis on the protests, which give a sense of urgency to end them quicker. This brings in more nonviolent protestors inspired by the fervour and growing movement. Which in turn provides cover for more looters and vandals. In essence, a sufficiently large protest will have a flywheel effect, created in part, because of bad actors." 5 | collection: Note 6 | --- 7 | Is violence a separate entity which can be disassociated from a protest? Or are violent and non-violent actors co-mingled in a way that cannot be separated? 8 | 9 | - A nonviolent protest provides the cover for those who loot and vandalise. At the same time, violent actions put an emphasis on the protests, which gives attention and a sense of urgency to end them quicker. 10 | - 11 | - Inspired by the fervour and growing movement, more protestors join in. This provides further cover for more looters and vandals. 12 | - . 13 | - In essence, a sufficiently large protest will have a flywheel effect, created in part, because of bad actors. 14 | 15 | -------------------------------------------------------------------------------- /store/columns.js: -------------------------------------------------------------------------------- 1 | export const state = () => ({ 2 | loading: true, 3 | isPopoverVisible: false, 4 | popover: null, 5 | columns: [] 6 | }) 7 | 8 | export const getters = { 9 | isLoading(state) { 10 | return state.loading 11 | }, 12 | getPopover(state) { 13 | return state.popover 14 | }, 15 | getColumns(state) { 16 | return state.columns 17 | } 18 | } 19 | 20 | export const actions = { 21 | setLoading(context, loading) { 22 | context.commit('setLoading', loading) 23 | }, 24 | setPopover(context, popover) { 25 | context.commit('setPopover', popover) 26 | }, 27 | setColumns(context, columns) { 28 | context.commit('setColumns', columns) 29 | }, 30 | addColumn(context, column) { 31 | context.commit('addColumn', column) 32 | }, 33 | removeColumn(context, index) { 34 | context.commit('removeColumn', index) 35 | } 36 | } 37 | 38 | export const mutations = { 39 | setLoading(state, loading) { 40 | state.loading = loading 41 | }, 42 | setPopover(state, options) { 43 | if (options.isPopoverVisible) { 44 | state.popover = options 45 | } else { 46 | state.popover = null 47 | } 48 | }, 49 | setColumns(state, columns) { 50 | state.columns = columns 51 | }, 52 | addColumn(state, column) { 53 | state.columns.push(column) 54 | }, 55 | removeColumn(state, index) { 56 | state.columns.splice(index, 1) 57 | } 58 | } 59 | -------------------------------------------------------------------------------- /content/haroon-meer.md: -------------------------------------------------------------------------------- 1 | --- 2 | depth: 2 3 | title: Haroon Meer 4 | abstract: "Haroon Meer is the founder of Thinkst Canary. This note is still a work in progress. There's a bunch of lessons I've learnt from working with Haroon that I'll get to adding at some point." 5 | collection: Note 6 | --- 7 | Haroon Meer is the founder of Thinkst Canary. This note is still a work in progress. There's a bunch of lessons I've learnt from working with Haroon that I'll get to adding at some point. Here's some ways he's influenced me or at least some lessons learnt working with him: 8 | - Ruthlessly eliminate pages from your software 9 | - 10 | - Once you reach a certain scale, being a CEO means more than anything being a coach. Your job is to constantly be the bearer for reminding everyone what they're fighting for, why it's worth fighting for, and making sure that vision is table stakes. 11 | 12 | --- 13 | Links to this note: 14 | - Canary 15 | - People and things that have influenced me 16 | - Ruthlessly eliminate pages from your software 17 | - 18 | 19 | -------------------------------------------------------------------------------- /assets/scss/main.scss: -------------------------------------------------------------------------------- 1 | html, body { 2 | font-size: clamp(15px, 2.5vw, 16px); 3 | line-height: 1.7; 4 | font-feature-settings: "kern" 1; 5 | font-kerning: normal; 6 | font-style: normal; 7 | -ms-text-size-adjust: 100%; 8 | -webkit-text-size-adjust: 100%; 9 | -moz-osx-font-smoothing: grayscale; 10 | -webkit-font-smoothing: antialiased; 11 | box-sizing: border-box; 12 | font-variant-ligatures: normal; 13 | text-rendering: optimizeLegibility; 14 | @include colors; 15 | } 16 | html { 17 | font-family: 'Inter var', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; 18 | font-variant-ligatures: normal; 19 | text-rendering: optimizeLegibility; 20 | scroll-behavior: smooth; 21 | } 22 | body { 23 | overflow: hidden; 24 | } 25 | button, input { 26 | margin: 0; 27 | padding: 0; 28 | font-family: inherit; 29 | background-color: none; 30 | border: none; 31 | outline: none; 32 | border-radius: 0; 33 | font-size: 15px; 34 | text-decoration: none; 35 | @include colors; 36 | } 37 | 38 | .section { 39 | scroll-snap-type: y mandatory; 40 | height: calc(100vh - 8vw - 60px - 42px); 41 | overflow-y: auto; 42 | position: relative; 43 | z-index: 500; 44 | opacity: 1; 45 | padding-bottom: 80px !important; 46 | @media (min-width: 768px) { 47 | height: calc(100vh - 28px - 28px - 40px); 48 | padding-bottom: 0 !important; 49 | } 50 | } -------------------------------------------------------------------------------- /assets/scss/partials/_typography.scss: -------------------------------------------------------------------------------- 1 | h1 { 2 | &.title { 3 | font-size: clamp(26px, 2.5vw, 36px); 4 | line-height: 1.22; 5 | font-weight: 700; 6 | color: var(--icon-color); 7 | margin: 0; 8 | } 9 | } 10 | 11 | p { 12 | line-height: 1.7; 13 | text-align: left; 14 | font-weight: 449; 15 | color: var(--text-color); 16 | margin: 12px 0; 17 | letter-spacing: -0.2px; 18 | em { font-style: italic; } 19 | &:first-child { margin-top: 0; } 20 | &:last-child { margin-bottom: 0; } 21 | strong { 22 | font-weight: 649; 23 | } 24 | } 25 | 26 | a { 27 | font-size: inherit; 28 | line-height: inherit; 29 | font-weight: inherit; 30 | text-decoration: none; 31 | color: inherit; 32 | cursor: pointer; 33 | &:active, &:focus, &:hover { 34 | outline: none; 35 | border: none; 36 | box-shadow: none; 37 | } 38 | } 39 | 40 | .subtitle { 41 | font-size: 11px; 42 | font-weight: 640; 43 | line-height: 1; 44 | text-transform: uppercase; 45 | } 46 | 47 | .link { 48 | text-decoration: underline; 49 | } 50 | 51 | ol, ul { 52 | margin-top: 0; 53 | margin-bottom: 0; 54 | margin-left: 40px; 55 | font-size: 16px; 56 | line-height: 27px; 57 | > ol, ul { 58 | margin-left: 28px; 59 | } 60 | } 61 | ol { list-style-type: decimal; margin-bottom: 8px } 62 | ul { list-style-type: disc; } 63 | li { 64 | padding-left: 0; 65 | color: var(--text-color); 66 | &:first-child { margin-top: 0; } 67 | } -------------------------------------------------------------------------------- /content/ruthlessly-eliminate-pages-from-your-software.md: -------------------------------------------------------------------------------- 1 | --- 2 | depth: 2 3 | title: Ruthlessly eliminate pages from your software 4 | abstract: "This site has only one page. Columns open next to one another. The idea of having only one page in an application is something Haroon Meer actively pushes for. When I joined Canary, I was adamant that spliting functionality into context specific pages was a good thing. I've since changed my mind on this completely. Every page adds more state that the user has to keep track of. They have to remember that x is located on y page. The other problem with seperate pages is it has switching costs. Those costs can take a user out of unconscious thought." 5 | collection: Note 6 | --- 7 | This site has only one page. Columns open next to one another. The idea of having only one _page_ in an application is something Haroon Meer actively pushes for. When I joined Canary, I was adamant that spliting functionality into context specific pages was a good thing. I've since changed my mind on this completely. Every page adds more state that the user has to keep track of. They have to remember that `x` is located on `y` page. The other problem with seperate pages is it has switching costs. Those costs can take a user out of unconscious thought (Good software is unconscious). 8 | 9 | --- 10 | Links to this note: 11 | - -------------------------------------------------------------------------------- /components/Grid.vue: -------------------------------------------------------------------------------- 1 | 13 | 14 | 47 | 48 | 68 | -------------------------------------------------------------------------------- /components/global/NewsletterForm.vue: -------------------------------------------------------------------------------- 1 | 9 | 10 | 20 | 21 | 66 | -------------------------------------------------------------------------------- /content/attention-is-the-best-asset-today.md: -------------------------------------------------------------------------------- 1 | --- 2 | depth: 2 3 | title: Attention is the Most Important Asset Today 4 | abstract: "There's a funny joke that keeps repeating itself on Twitter — would you rather have a Harvard degree or a large (> 20k) engaged Twitter following. Assuming that Twitter following has some purchasing power or will in the future, it's a hard choice. That seems crazy to say, 10 years ago it would have been obvious. Now, everyone knows the benefits of having a large following. You'd only need to convince 1% of that 20k into buying a $50 product to make $10k. If it's a recurring product, you've just setup a level of financial freedom most would dream of. But it's not only the monetary benefits that come with having a large following" 5 | collection: Note 6 | --- 7 | There's a funny joke that keeps repeating itself on Twitter — would you rather have a Harvard degree or a large (> 20k) engaged Twitter following. 8 | 9 | Assuming that Twitter following has some purchasing power or will in the future, it's a hard choice. That seems crazy to say, 10 years ago it would have been obvious. Now, everyone knows the benefits of having a large following. You'd only need to convince 1% of that 20k into buying a $50 product to make $10k. If it's a recurring product, you've just setup a level of financial freedom most would dream of. 10 | 11 | But it's not only the monetary benefits that come with having a large following... 12 | 13 | --- 14 | 15 | Links to this note: 16 | - 17 | - 18 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Created by .ignore support plugin (hsz.mobi) 2 | ### Node template 3 | # Logs 4 | /logs 5 | *.log 6 | npm-debug.log* 7 | yarn-debug.log* 8 | yarn-error.log* 9 | 10 | # Runtime data 11 | pids 12 | *.pid 13 | *.seed 14 | *.pid.lock 15 | 16 | # Directory for instrumented libs generated by jscoverage/JSCover 17 | lib-cov 18 | 19 | # Coverage directory used by tools like istanbul 20 | coverage 21 | 22 | # nyc test coverage 23 | .nyc_output 24 | 25 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 26 | .grunt 27 | 28 | # Bower dependency directory (https://bower.io/) 29 | bower_components 30 | 31 | # node-waf configuration 32 | .lock-wscript 33 | 34 | # Compiled binary addons (https://nodejs.org/api/addons.html) 35 | build/Release 36 | 37 | # Dependency directories 38 | node_modules/ 39 | jspm_packages/ 40 | 41 | # TypeScript v1 declaration files 42 | typings/ 43 | 44 | # Optional npm cache directory 45 | .npm 46 | 47 | # Optional eslint cache 48 | .eslintcache 49 | 50 | # Optional REPL history 51 | .node_repl_history 52 | 53 | # Output of 'npm pack' 54 | *.tgz 55 | 56 | # Yarn Integrity file 57 | .yarn-integrity 58 | 59 | # dotenv environment variables file 60 | .env 61 | 62 | # parcel-bundler cache (https://parceljs.org/) 63 | .cache 64 | 65 | # next.js build output 66 | .next 67 | 68 | # nuxt.js build output 69 | .nuxt 70 | 71 | # Nuxt generate 72 | dist 73 | 74 | # vuepress build output 75 | .vuepress/dist 76 | 77 | # Serverless directories 78 | .serverless 79 | 80 | # IDE / Editor 81 | .idea 82 | 83 | # Service worker 84 | sw.* 85 | 86 | # macOS 87 | .DS_Store 88 | 89 | # Vim swap files 90 | *.swp -------------------------------------------------------------------------------- /components/Popover.vue: -------------------------------------------------------------------------------- 1 | 10 | 11 | 65 | 66 | 79 | -------------------------------------------------------------------------------- /content/colophon.md: -------------------------------------------------------------------------------- 1 | --- 2 | depth: 2 3 | title: Colophon 4 | abstract: "This site is built with VueJS and NuxtJS. It uses the fantastic Nuxt Content module under the hood. Nuxt Content allows me to write in markdown, include Vue components in the markdown, and then query those markdown files in a MongoDB like way. I use SCSS as a CSS pre-processor. The site is hosted on Vercel. Initial wireframing was done in Figma. I wanted to use a typeface that felt modern and legible at all screen sizes. I also wanted to play around with variable fonts. Inter designed by Rasmus Andersson fit the bill beautifully." 5 | collection: Note 6 | --- 7 | This site is built with VueJS and NuxtJS. It uses the fantastic [Nuxt Content](https://content.nuxtjs.org/) module under the hood. Nuxt Content allows me to write in markdown, include Vue components in the markdown, and then query those markdown files in a MongoDB like way. I use SCSS as a CSS pre-processor. The site is hosted on Vercel. Initial wireframing was done in Figma. 8 | 9 | I wanted to use a typeface that felt modern and legible at all screen sizes. I also wanted to play around with variable fonts. [Inter](https://rsms.me/inter/) designed by [Rasmus Andersson](https://rsms.me/) fit the bill beautifully. 10 | 11 | The design and ux takes inspiration from a bunch of places: 12 | - Andy Matuschak's note taking sytem 13 | - Emmad's [Blackout Poetry Generator](https://blackout-poetry-generator.glitch.me/) 14 | - Frank Chimero's [personal website](https://frankchimero.com/) 15 | - Sarah Dayan's [website](https://sarahdayan.dev/) 16 | - Maggie Appleton's [illustrations and website](https://maggieappleton.com/) 17 | - Phil Coffman's [personal website](https://philcoffman.com/) 18 | -------------------------------------------------------------------------------- /content/canary.md: -------------------------------------------------------------------------------- 1 | --- 2 | depth: 2 3 | title: Thinkst Canary 4 | abstract: "Thinkst Canary is an infosec company founded by Haroon Meer. The core thesis is that most companies find out way too late that they've been breached. Canary solves this by providing super simple, easy to deploy, honeypots, that require 0 overhead. The operative words being 'super simple', 'easy to deploy' and '0 overhead'." 5 | collection: Note 6 | --- 7 | [Thinkst Canary](https://canary.tools/) is an infosec company founded by Haroon Meer. The core thesis is that most companies find out way too late that they've been breached. Canary solves this by providing super simple, easy to deploy, honeypots, that require 0 overhead. The operative words being 'super simple', 'easy to deploy' and '0 overhead'. 8 | 9 | It's an extreme example of unconscious software. People setup Canaries on their network in minutes, and can then proceed to forget about them. If you get an alert from one of your Canaries, that's when you know something bad is happening. I obviously have skin in the game, but I think that signal to noise ratio is immense. 10 | 11 | Canary is interesting because it's an example of product led growth and bottom-up sales. We have one sales person (maybe 2 now) and yet it's being used by the best of the best in Silicon Valley, some notable government organisations, and many of the Fortune 500. I joined Canary early in 2019, because it's hard to pass on doing work at that scale. 12 | 13 | --- 14 | 15 | Links to this note: 16 | - Haroon Meer 17 | - Good software is unconscious 18 | - People and things that have influenced me 19 | -------------------------------------------------------------------------------- /components/ColumnHeader.vue: -------------------------------------------------------------------------------- 1 | 18 | 19 | 48 | 49 | 81 | -------------------------------------------------------------------------------- /content/figma.md: -------------------------------------------------------------------------------- 1 | --- 2 | depth: 2 3 | title: Figma 4 | abstract: "Figma is an interface design and collaboration tool. Figma came out with a browser-first design tool that felt magical to use. It felt magical because until then it seemed crazy that you’d use the browser to do anything as GPU intensive as designing an interface. And what’s even crazier — in some instances the browser based Figma felt faster and lighter to use than the native desktop design tools of the time." 5 | collection: Note 6 | --- 7 | Figma is an interface design and collaboration tool. It came out for preview release in December 2015 after being in development for 3 years (). And since then has gone on to (probably) become the dominant design interface tool used by teams today. 8 | 9 | Figma came out with a browser-first design tool! It's impressive because it seemed crazy that you’d use the browser to do anything near as GPU intensive as designing an interface. Figma was able to do this because they took advantage of a large technological shift: . 10 | 11 | Figma is . Their technological advantage allows them to build other impressive things on top of their core design tool. Collaboration and multiplayer mode, are first class citizens and feel both frictionless and instantaneous. Their plugin ecosystem is rich and amazing at filling edge cases or levelling up specific parts of a design. 12 | 13 | --- 14 | 15 | Links to this note: 16 | - 17 | - 18 | - 19 | - 20 | - WebGL and WebAssembly for high performant GPU intensive applications 21 | 22 | -------------------------------------------------------------------------------- /content/about.md: -------------------------------------------------------------------------------- 1 | --- 2 | depth: 0 3 | title: Yo, I’m Yusuf. Welcome. 4 | abstract: "I'm a South African software engineer and designer working at Thinkst Applied Research. There, I work on Canary — one of the most loved security products around. If Stripe's goal is to increase the GDP of the internet — I'm interested in finding and researching the areas where GDP growth is arbitrageable by small indie teams. My other area of focus is in deeply trying to understand and craft great software." 5 | collection: Note 6 | --- 7 | I'm a South African software engineer and designer working at Thinkst Applied Research. There, I work on Canary — one of the most loved security products around. 8 | 9 | This site is a public collection of my notes. I built it after being deeply inspired by Andy Matuschak and his note taking system. If these notes seem confusing, controversial and/or half-baked, it's probably because I wrote them for myself. I also maintain collections on interesting aphorisms I've come across, and people and things that have influenced me. This site has a colophon, and the code is open sourced [here](https://github.com/ycparak/ycparak.com). 10 | 11 | If Stripe’s goal is to increase the GDP of the internet — I'm interested in finding and researching the areas where GDP growth is arbitrageable, particularly by small indie teams. My other area of focus is in deeply trying to understand and craft good software. 12 | 13 | If the intersection of that venn diagram, `internet opportunity && software craftsmanship`, weirdly turns you on — be sure to subscribe to my email list (substack). Alas, I'm not on Facebook, Instagram or LinkedIn but you can find me on [Twitter](https://twitter.com/ycparak) (DM's open). 14 | 15 | 16 | -------------------------------------------------------------------------------- /components/ColumnCloseButton.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 47 | 48 | 78 | -------------------------------------------------------------------------------- /components/PostListItem.vue: -------------------------------------------------------------------------------- 1 | 20 | 21 | 40 | 41 | 90 | -------------------------------------------------------------------------------- /content/webgl-and-webassembly-for-high-performant-gpu-intensive-applications.md: -------------------------------------------------------------------------------- 1 | --- 2 | depth: 2 3 | title: WebGL and WebAssembly for high performant GPU intensive applications 4 | abstract: "One of the recent and larger technological advancements in the world of browser based software has been the rise of WebGl and WebAssembly. These technologies allow you to cut past the browser and talk directly to the hardware. Meaning you can now build browser based GPU intensive applications and have them work pretty well." 5 | collection: Note 6 | --- 7 | One of the recent and larger technological advancements in the world of browser based software has been the rise of WebGL and WebAssembly. These technologies allow you to cut past the browser and talk directly to the hardware. Meaning you can now (I say now but this has been possible for a few years) build browser based GPU intensive applications and have them work pretty well. 8 | 9 | One example of a company using this stack is . They've adopted this as their core stack to create an impressive design interface tool. Prior to Figma, it seemed crazy to think you would do anything close to designing applications in a browser. Figma’s CTO Evan Wallace explained this in a blog post 4 days after their launch (December 3, 2015): 10 | 11 | > This lack of general primitives on the web is [starting to change](https://extensiblewebmanifesto.org/) and now there are technologies like WebGL and asm.js that let developers cut past the browser and talk directly to the hardware. It’s this advancement that’s finally made high-performance web-based graphics applications practical. Developers no longer need to wait for the exact features they need to be added to the web, they can build those features themselves! 12 | 13 | Since then, WebAssembly was released, and the Figma team promptly [moved from asm.js to WebAssembly](https://www.figma.com/blog/webassembly-cut-figmas-load-time-by-3x/). Which incidentally improved their load time by 3x. 14 | 15 | --- 16 | 17 | Links to this note: 18 | - Figma 19 | -------------------------------------------------------------------------------- /assets/scss/partials/_post.scss: -------------------------------------------------------------------------------- 1 | .nuxt-content { 2 | display: grid; 3 | margin-bottom: 44px; 4 | grid-template-columns: 20px 16px 120px 1fr 120px 16px 20px; 5 | @media (max-width: 767px) { 6 | grid-template-columns: 16px 12px 100px 1fr 100px 12px 16px; 7 | } 8 | 9 | * { 10 | grid-column-start: 3; 11 | grid-column-end: 6; 12 | + h2 { margin-top: 20px; } 13 | + h3 { margin-top: 12px; } 14 | } 15 | a { 16 | text-decoration: underline; 17 | } 18 | h2 { 19 | font-size: clamp(20px, 2.5vw, 24px); 20 | font-weight: 800; 21 | + * { margin-top: 4px; } 22 | } 23 | h3 { 24 | font-size: clamp(17px, 2.5vw, 18px); 25 | font-weight: 700; 26 | + * { margin-top: 2px; } 27 | } 28 | blockquote { 29 | grid-column-start: 2; 30 | grid-column-end: 6; 31 | border-left: 3px solid var(--icon-color); 32 | margin: 16px 0; 33 | padding-left: 13px; 34 | padding-bottom: 4px; 35 | p { 36 | font-style: italic; 37 | &:first-child { margin-top: 0; } 38 | &:last-child { margin-top: 0; } 39 | &:only-child { margin: 0; } 40 | } 41 | } 42 | code { 43 | font-family: Monaco, "Courier New", Courier, monospace; 44 | background-color: var(--code-block); 45 | border-radius: 4px; 46 | padding: 0 4px 1px 4px; 47 | font-size: 15px; 48 | color: var(--text-color); 49 | text-shadow: none; 50 | } 51 | .nuxt-content-highlight { 52 | grid-column-start: 2; 53 | grid-column-end: 7; 54 | pre { 55 | font-family: Consolas, "Andale Mono WT", "Andale Mono", Monaco, "Courier New", Courier, monospace; 56 | background-color: var(--accent-color); 57 | padding: 12px 16px 16px 16px; 58 | tab-size: 2; 59 | white-space: pre-wrap; 60 | word-break: normal; 61 | hyphens: none; 62 | border-radius: 8px; 63 | margin: 16px 0; 64 | line-height: 1.35; 65 | code { 66 | overflow-x: scroll; 67 | padding: 0; 68 | background: none; 69 | } 70 | } 71 | } 72 | hr { 73 | grid-column: 4; 74 | border: 1px solid var(--line-color); 75 | margin: 28px 0; 76 | display: block; 77 | } 78 | } -------------------------------------------------------------------------------- /content/good-software-is-unconscious.md: -------------------------------------------------------------------------------- 1 | --- 2 | depth: 2 3 | title: Good software is unconscious 4 | abstract: Google is an example of software that feels like this. When you open it, you don’t get the feeling that you’re opening a web application. It even seems crazy to think that Google is a web application. Like conscious vs unconscious thought, most applications feel conscious, Google feels unconscious." 5 | collection: Note 6 | --- 7 | Good software exists to serve a purpose. And serves it so singularly that it blends and becomes hidden behind the user's end goal. Like a good watch, it becomes one with its master, only noticed when broken or when absent. 8 | 9 | Google is an easy example of software that used to feel like this. They've lost it now, but when you opened that tab and hit their homepage, you didn't get the feeling that you were using a _web application_. It even seems crazy to think that Google was a web application. Like conscious vs unconscious thought, most applications felt conscious, Google felt unconscious. 10 | 11 | There’s other examples of software that’s so good it feels hidden. But like any good thing, there’s very few. I’m biased but I think Canary is an (extreme) example of this. Figma is another example. Figma won’t feel unconscious to a new user. It takes time to learn it. But a proficient Figma designer doesn’t even think about the tool, the tool is unconscious, it’s the user's design that becomes the center stage for conscious thought. 12 | 13 | For software to be unconscious, it has to work **all of the time**. If the software fails me once, the next time I open it, I worry it will fail me again. [It also has to be fast](https://craigmod.com/essays/fast_software/). Software that has latency issues makes me worry that it has other more important issues. And worrying means I’m no longer operating in unconscious thought. 14 | 15 | --- 16 | 17 | Links to this note: 18 | - Good software 19 | - Figma 20 | - Thinkst Canary 21 | - Haroon Meer 22 | -------------------------------------------------------------------------------- /content/be-wary-of-the-late-majority-and-laggards.md: -------------------------------------------------------------------------------- 1 | --- 2 | depth: 2 3 | title: Be Wary of the Late Majority and Laggards 4 | abstract: "Be wary. Be wary, because every new person that now joins your cause didn't have the insight to initially believe in it nor seek it out. And some percentage of these people will join solely because everyone else is — it's these people you have to worry about. 5 | 6 | The late majority of employees to join a company for example — won't necessarily be joining because they believe in the initial principles the company was founded on. They'll be joining for other reasons. Chief among them will be the prestige and CV trophy, of joining a company of that scale." 7 | collection: Note 8 | --- 9 | There's an oft overlooked consequence of passing the diffusion of innovation tipping point. If you start a cause that reaches this milestone: 10 | 1. Congratulations i.e. Attention is the Most Important Asset Today. 11 | 2. Be wary. Be wary, because every new person that now joins your cause didn't have the insight to initially believe in it nor seek it out. And some percentage of these people will join solely because everyone else is — it's these people you have to worry about. 12 | 13 | The late majority to join a social justice cause for example, won't necessarily be joining because they believe what you believe. They'll be doing so, because it would have now become socially dangerous not too. 14 | 15 | The late majority of employees to join a company — won't necessarily be joining because they believe in the initial principles the company was founded on. They'll be joining for other reasons. Chief among them may be the prestige of joining a company of that scale. 16 | 17 | Why should you worry about these people? For companies it's obvious. You want these late employees to have the same sense of care that your early employees had. The consequences for not having that care could cause a rot of mediocrity in your company that may be fatal. 18 | 19 | --- 20 | 21 | Links to this note: 22 | - 23 | - 24 | -------------------------------------------------------------------------------- /components/OverloadModal.vue: -------------------------------------------------------------------------------- 1 | 19 | 20 | 40 | 41 | 86 | -------------------------------------------------------------------------------- /content/andy-matuschaks-note-taking-system.md: -------------------------------------------------------------------------------- 1 | --- 2 | depth: 2 3 | title: Andy Matuschak's note taking sytem 4 | abstract: "The first time I came across Andy's notes, I recall having a wide grin on my face. Interacting with his notes felt like a lightning bolt moment. I immedietely grokked: (1) How having a system like his could help sift out insights. (2) The elegance of his user experience in facilitating (1). And (3), the importance of evergreen note taking as it contributes to knowledge work." 5 | collection: Note 6 | --- 7 | The first time I came across Andy's notes, I recall having a wide grin on my face. Interacting with it felt like a lightning bolt moment. I immedietely grokked: 8 | 1. How having a system like his could help sift out [insights](https://notes.andymatuschak.org/z6cFzJWgj9vZpnrQsjrZ8yCNREzCTgyFeVZTb). 9 | 2. The elegance of his user experience in facilitating (1). 10 | 3. The importance of [evergreen note taking as it contributes to knowledge work](https://notes.andymatuschak.org/z3SjnvsB5aR2ddsycyXofbYR7fCxo7RmKW2be). 11 | 12 | 13 | Up until that point, I wasn't much of a note taker. I typically used notes for remembering ephemeral tasks. I had known about the renaissance happening in note taking and [tools for thought](https://numinous.productions/ttft/). But I hadn't paid it much due, partly because of intellectual laziness and partly because it didn't feel important enough. That's funny because transformational things often start out looking like toys. 14 | 15 | Using his system also felt like a UX breakthrough. And I don't mean that light heartedly. Having the ability to open notes side by side sounds trivial. But that, combined with backlinks and dense interlinking opens up so many possibilities. Internal or external company knowledge bases are an easy example. A better Wikipedia that facilitates even more rabit hole digging is another. 16 | 17 | It's also worth noting that — point & click, copy & paste or even pull to refresh — would have all sounded trivial at one point. Now they're staples of everyday life. I think this could become one too. 18 | 19 | --- 20 | 21 | Andy has a Patreon account, I'd highly recommend contributing to it. You can do so [here](https://www.patreon.com/quantumcountry/posts). 22 | 23 | --- 24 | 25 | Links to this note: 26 | - 27 | -------------------------------------------------------------------------------- /assets/scss/partials/_variables.scss: -------------------------------------------------------------------------------- 1 | :root { 2 | --icon-toggle-shadow: inset 0px 0px 0px 1.5px var(--icon-color); 3 | --icon-toggle-shadow-hover: inset 0px 0px 0px 1.5px var(--icon-color); 4 | 5 | --tablet: 768px; 6 | 7 | /* 8 | ** Lightmode variables 9 | */ 10 | --tooltip-shadow: 0 4px 12px 0 var(--note-color-15); 11 | --column-shadow: -10px 2px 20px 0px var(--note-color-9); 12 | --column-top-shadow: 0 12px 20px 0 var(--note-color-5); 13 | --column-bottom-shadow: 0 -12px 20px 0 var(--note-color-5); 14 | --navbar-shadow: 0 0 20px 0 var(--note-color-9); 15 | --intense-shadow: 0 4px 12px var(--note-color-45); 16 | 17 | --note-color: red; 18 | --neutral-color: red; 19 | --background-color: #f1ebe4; 20 | --accent-color: #eee4d7; 21 | --accent-color-1: #F1ECE6; 22 | --accent-color-2: #ECDDCB; 23 | --line-color: var(--note-color); 24 | --icon-color: var(--note-color); 25 | --text-color: #171717; 26 | --navbar-color: var(--background-color); 27 | --newletter-submit-border: var(--note-color); 28 | --code-block: var(--note-color-5); 29 | --close-button: #E4CEB4; 30 | --newsletter-backdrop: var(--note-color); 31 | 32 | --note-color-45: rgba(255, 0, 0, 0.45); 33 | --note-color-15: rgba(255, 0, 0, 0.15); 34 | --note-color-9: rgba(255, 0, 0, 0.1); 35 | --note-color-5: rgba(255, 0, 0, 0.05); 36 | 37 | --darkmode-toggle-translate: 50%; 38 | } 39 | 40 | .dark-mode { 41 | --tooltip-shadow: 0 4px 12px 0 var(--background-color); 42 | --column-shadow: -10px 0px 20px 0px var(--background-color); 43 | --column-top-shadow: 0 12px 20px 0 var(--background-color); 44 | --column-bottom-shadow: 0 -12px 20px 0 var(--background-color); 45 | --navbar-shadow: 0 12px 20px 0 var(--background-color); 46 | --intense-shadow: var(--tooltip-shadow); 47 | --button-shadow: var(--tooltip-shadow); 48 | 49 | --note-color: #00FFAA; 50 | --neutral-color: #777; 51 | --background-color: #201f23; 52 | --accent-color: #292A2D; 53 | --accent-color-1: #2E2F33; 54 | --accent-color-2: #35363B; 55 | --line-color: var(--accent-color-2); 56 | --icon-color: #fff; 57 | --navbar-color: var(--accent-color); 58 | --text-color: #fff; 59 | --newletter-submit-border: var(--accent-color-2); 60 | --code-block: var(--accent-color-1); 61 | --close-button: var(--accent-color-2); 62 | --newsletter-backdrop: var(--background-color); 63 | 64 | --backdrop-color: rgba(31, 32, 35, 0.6); 65 | 66 | 67 | --darkmode-toggle-translate: -52.5%; 68 | } -------------------------------------------------------------------------------- /content/work-at-a-scale-that-resonates-with-you.md: -------------------------------------------------------------------------------- 1 | --- 2 | depth: 2 3 | title: Work at A Scale that Resonates to You 4 | abstract: Does affecting one hundred lives turn you on? A thousand? A million? A billion? Why? What does it mean to have a positive impact on a life? How intimate does that connection need to be? Understanding your scale — the scale that moves you — is critical to understanding with whom and how you should work, how you should live. 5 | collection: Note 6 | --- 7 | This transcript is taken from an [Offscreen Magazine interview](https://craigmod.com/essays/offscreen_interview/) with, the always deeply introspective and thoughtful, Craig Mod. The whole interview transcript is worth reading. But this portion really floats my boat. 8 | 9 | --- 10 | ### Question 11 | Some time after writing those essays you took on a design role at Flipboard, but you eventually went back to being independent so that you could focus on writing. Was working for a tech company not what you expected? 12 | 13 | ### Answer 14 | _It was everything I expected. Working with Marcos Weskamp and the team at Flipboard is one of the highlights of my life. They were outstanding humans and outstanding designers and engineers. I’ve never been in a room with more talent. And all of us were moving in synchronicity, with aligned goals, during the headiest time of digital publishing, the iPad fresh, infinite possibility with a nearly infinite budget — nothing was constrained except for our imaginations. Truly. A once in a millennium moment in an ancient industry. And we spent some acid-trip like adventures exploring bizarro interface tendrils that never made it out into the world. I learned a lot._ 15 | 16 | _I learned how vital a strong mythology was for leading a company, for raising a huge sum of money. You need product, you need market-fit, but you also need a helluva story. It was all a high. And I have gratitude for everyone on the team. 17 | We launched Flipboard for iPhone and instantly — boom! — had millions of new users. But I didn’t feel my heart move. Not an inch. It was just an observation, a truth. You have to acknowledge these truths. It came with no judgment. My heart didn’t move. I loved the people and the work, but the object, the artifact, did not move my heart. By that point in my career I had worked on enough projects that had moved me to understand what was happening. I had archetypes to lean on._ 18 | 19 | _Simultaneously, as we made the app I made a meta-book about our making of the app — the design detritus, the engineering commits — and presented that to the team. Jesus, my heart moved a mile. It was difficult not to cry. I realized in that moment that scale is secondary to grace or movement._ 20 | 21 | _Does affecting one hundred lives turn you on? A thousand? A million? A billion? Why? What does it mean to have a positive impact on a life? How intimate does that connection need to be? Understanding your scale — the scale that moves you — is critical to understanding with whom and how you should work, how you should live._ 22 | -------------------------------------------------------------------------------- /mixins/interLinks.js: -------------------------------------------------------------------------------- 1 | import VueScrollTo from 'vue-scrollto' 2 | 3 | export default { 4 | data() { 5 | return { 6 | post: {}, 7 | popoverOptions: { 8 | popoverReference: null, 9 | placement: 'right', 10 | offset: [0, 16] 11 | } 12 | } 13 | }, 14 | computed: { 15 | getLink() { 16 | if (this.includedPost) { 17 | return this.includedPost.path.split('/')[1] 18 | } 19 | return this.href 20 | }, 21 | isActiveLink() { 22 | const slug = this.$route.params.slug 23 | const currentQueries = this.$route.query.col 24 | 25 | if (currentQueries === undefined) { 26 | return '' 27 | } else if (currentQueries === this.getLink || (currentQueries.includes(this.getLink) && typeof currentQueries !== 'string')) { 28 | return true 29 | } else if (this.getLink === this.$route.params.slug) { 30 | return true 31 | } 32 | return false 33 | }, 34 | classnames() { 35 | let classes = '' 36 | if (this.isActiveLink) { classes = 'active' } 37 | if (this.spaceBefore) { classes = `${classes} space-before` } 38 | return classes 39 | } 40 | }, 41 | async mounted() { 42 | if (this.includedPost) { 43 | this.post = this.includedPost 44 | } else { 45 | try { 46 | this.post = await this.$content(this.href).fetch() 47 | } catch (error) { 48 | console.log(error) 49 | } 50 | } 51 | this.popoverOptions.popoverReference = this.$refs.popoverReference 52 | }, 53 | methods: { 54 | handleInterlink() { 55 | const cols = this.$store.getters['columns/getColumns'] 56 | if (cols.length >= 14) { 57 | this.$root.$emit('popOverloadModal') 58 | } else if (!this.isActiveLink) { 59 | this.handlePopover(false) 60 | 61 | let slug = this.$route.params.slug 62 | if (!slug) { 63 | slug = '/' 64 | } 65 | const currentQueries = this.$route.query.col 66 | 67 | let newQuery = this.getLink 68 | if (newQuery === slug) { return } 69 | 70 | if (currentQueries !== undefined) { 71 | if (newQuery === currentQueries || (currentQueries.includes(this.getLink))) { return } 72 | newQuery = [].concat(currentQueries, this.getLink) 73 | } 74 | 75 | this.$router.push({ path: slug, query: { col: newQuery } }) 76 | } else { 77 | this.scrollToLink() 78 | } 79 | }, 80 | scrollToLink() { 81 | const cols = this.$store.getters['columns/getColumns'] 82 | const index = cols.map(c => c.slug).indexOf(`/${this.getLink}`) 83 | const postIndex = cols.map(c => c.slug).indexOf(`/${this.post.slug}`) 84 | 85 | let offset = (index * -32) - 136 86 | if (index < postIndex) { 87 | offset = -2000 88 | } 89 | 90 | const options = { 91 | container: '#grid', 92 | easing: 'linear', 93 | offset, 94 | force: true, 95 | cancelable: true, 96 | x: true, 97 | y: false 98 | } 99 | VueScrollTo.scrollTo(`#column-${index}`, 350, options) 100 | }, 101 | handlePopover(show) { 102 | const popover = { 103 | isPopoverVisible: show, 104 | post: this.post, 105 | popoverOptions: this.popoverOptions 106 | } 107 | this.$store.dispatch('columns/setPopover', popover) 108 | } 109 | } 110 | } 111 | -------------------------------------------------------------------------------- /nuxt.config.js: -------------------------------------------------------------------------------- 1 | 2 | export default { 3 | mode: 'universal', 4 | target: 'static', 5 | /* 6 | ** Headers of the page 7 | */ 8 | head: { 9 | title: 'Yusuf Parak (@ycparak)', 10 | meta: [ 11 | { charset: 'utf-8' }, 12 | { name: 'viewport', content: 'width=device-width, initial-scale=1' }, 13 | { hid: 'description', name: 'description', content: process.env.npm_package_description || '' } 14 | ] 15 | }, 16 | /* 17 | ** Customize the progress-bar color 18 | */ 19 | loading: false, 20 | /* 21 | ** Global CSS 22 | */ 23 | css: [ 24 | '@/assets/fonts/fonts.css', 25 | '@/assets/scss/main.scss' 26 | ], 27 | /* 28 | ** Plugins to load before mounting the App 29 | */ 30 | plugins: [ 31 | ], 32 | /* 33 | ** Nuxt.js dev-modules 34 | */ 35 | buildModules: [ 36 | // Doc: https://github.com/nuxt-community/eslint-module 37 | '@nuxtjs/eslint-module', 38 | '@nuxtjs/style-resources', 39 | '@nuxtjs/color-mode', 40 | '@nuxtjs/moment', 41 | '@nuxt/components', 42 | '@aceforth/nuxt-optimized-images', 43 | '@nuxtjs/google-analytics' 44 | ], 45 | 46 | googleAnalytics: { 47 | id: process.env.GOOGLE_ANALYTICS_ID 48 | }, 49 | 50 | /* 51 | ** Custom additions 52 | */ 53 | styleResources: { 54 | scss: [ 55 | '~assets/scss/partials/*.scss' 56 | ] 57 | }, 58 | 59 | /* 60 | ** Nuxt.js modules 61 | */ 62 | modules: [ 63 | '@nuxtjs/axios', 64 | '@nuxtjs/dotenv', 65 | '@nuxt/content', 66 | '@nuxtjs/feed', 67 | ['vue-scrollto/nuxt', { duration: 300 }] 68 | ], 69 | generate: { 70 | async routes() { 71 | const { $content } = require('@nuxt/content') 72 | const files = await $content({ deep: true }).only(['path']).fetch() 73 | 74 | return files.map(file => file.path === '/index' ? '/' : file.path) 75 | } 76 | }, 77 | feed: [ 78 | { 79 | path: '/feed.xml', 80 | async create(feed) { 81 | feed.options = { 82 | title: 'Yusuf Parak (@ycparak)', 83 | description: "Yusuf Parak's brain", 84 | link: process.env.NODE_ENV === 'production' ? 'https://www.ycparak.com/feed.xml' : 'localhost:3000/feed.xml' 85 | } 86 | 87 | // eslint-disable-next-line global-require 88 | const { $content } = require('@nuxt/content') 89 | const posts = await $content().fetch() 90 | 91 | posts.forEach((post) => { 92 | const url = process.env.NODE_ENV === 'production' ? `https://www.ycparak.com/${post.slug}` : `localhost:3000/${post.slug}` 93 | feed.addItem({ 94 | title: post.title, 95 | id: url, 96 | link: url, 97 | description: post.blurb, 98 | content: post.bodyPlainText 99 | }) 100 | }) 101 | }, 102 | 103 | cacheTime: 1000 * 60 * 15, 104 | type: 'rss2' 105 | } 106 | ], 107 | hooks: { 108 | 'content:file:beforeInsert': (document) => { 109 | if (document.extension === '.md') { 110 | const readingTime = require('reading-time') 111 | const { text } = readingTime(document.text) 112 | document.readingTime = text 113 | document.bodyPlainText = document.text 114 | } 115 | } 116 | }, 117 | 118 | /* 119 | ** Axios module configuration 120 | ** See https://axios.nuxtjs.org/options 121 | */ 122 | axios: {}, 123 | /* 124 | ** Build configuration 125 | */ 126 | build: { 127 | /* 128 | ** You can extend webpack config here 129 | */ 130 | extend(config, ctx) { 131 | } 132 | }, 133 | /* 134 | ** Custom additions 135 | */ 136 | components: true, 137 | content: { 138 | liveEdit: false, 139 | markdown: { 140 | rehypePlugins: ['rehype-minify-whitespace'] 141 | } 142 | } 143 | } 144 | -------------------------------------------------------------------------------- /components/NavbarSocial.vue: -------------------------------------------------------------------------------- 1 | 17 | 18 | 58 | 59 | 156 | -------------------------------------------------------------------------------- /pages/_slug.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 130 | -------------------------------------------------------------------------------- /assets/scss/partials/_helpers.scss: -------------------------------------------------------------------------------- 1 | .text-left { 2 | text-align: left; 3 | } 4 | .text-center { 5 | text-align: center; 6 | } 7 | .text-right { 8 | text-align: right; 9 | } 10 | 11 | /* Left margin */ 12 | .margin-left--0 { 13 | margin-left: 0 !important; 14 | } 15 | .margin-left--4 { 16 | margin-left: 4px !important; 17 | } 18 | .margin-left--8 { 19 | margin-left: 8px !important; 20 | } 21 | .margin-left--12 { 22 | margin-left: 12px !important; 23 | } 24 | .margin-left--16 { 25 | margin-left: 16px !important; 26 | } 27 | .margin-left--20 { 28 | margin-left: 20px !important; 29 | } 30 | 31 | /* Right margin */ 32 | .margin-right--0 { 33 | margin-right: 0 !important; 34 | } 35 | .margin-right--4 { 36 | margin-right: 4px !important; 37 | } 38 | .margin-right--8 { 39 | margin-right: 8px !important; 40 | } 41 | .margin-right--12 { 42 | margin-right: 12px !important; 43 | } 44 | .margin-right--16 { 45 | margin-right: 16px !important; 46 | } 47 | .margin-right--20 { 48 | margin-right: 16px !important; 49 | } 50 | 51 | /* Top margin */ 52 | .margin-top--0 { 53 | margin-top: 0 !important; 54 | } 55 | .margin-top--4 { 56 | margin-top: 4px !important; 57 | } 58 | .margin-top--8 { 59 | margin-top: 8px !important; 60 | } 61 | .margin-top--12 { 62 | margin-top: 12px !important; 63 | } 64 | .margin-top--16 { 65 | margin-top: 16px !important; 66 | } 67 | .margin-top--20 { 68 | margin-top: 20px !important; 69 | } 70 | 71 | /* Bottom margin */ 72 | .margin-bottom--0 { 73 | margin-bottom: 0 !important; 74 | } 75 | .margin-bottom--4 { 76 | margin-bottom: 4px !important; 77 | } 78 | .margin-bottom--8 { 79 | margin-bottom: 8px !important; 80 | } 81 | .margin-bottom--12 { 82 | margin-bottom: 12px !important; 83 | } 84 | .margin-bottom--16 { 85 | margin-bottom: 16px !important; 86 | } 87 | .margin-bottom--20 { 88 | margin-bottom: 20px !important; 89 | } 90 | 91 | /* Horizontal margin */ 92 | .margin-horizontal--0 { 93 | margin-right: 0 !important; 94 | margin-left: 0 !important; 95 | } 96 | .margin-horizontal--4 { 97 | margin-right: 4px !important; 98 | margin-left: 4px !important; 99 | } 100 | .margin-horizontal--8 { 101 | margin-right: 8px !important; 102 | margin-left: 8px !important; 103 | } 104 | .margin-horizontal--12 { 105 | margin-right: 12px !important; 106 | margin-left: 12px !important; 107 | } 108 | .margin-horizontal--16 { 109 | margin-right: 16px !important; 110 | margin-left: 16px !important; 111 | } 112 | .margin-horizontal--20 { 113 | margin-right: 20px !important; 114 | margin-left: 20px !important; 115 | } 116 | 117 | /* Vertical margin */ 118 | .margin-vertical--0 { 119 | margin-top: 0 !important; 120 | margin-bottom: 0 !important; 121 | } 122 | .margin-vertical--4 { 123 | margin-top: 4px !important; 124 | margin-bottom: 4px !important; 125 | } 126 | .margin-vertical--8 { 127 | margin-top: 8px !important; 128 | margin-bottom: 8px !important; 129 | } 130 | .margin-vertical--12 { 131 | margin-top: 12px !important; 132 | margin-bottom: 12px !important; 133 | } 134 | .margin-vertical--16 { 135 | margin-top: 16px !important; 136 | margin-bottom: 16px !important; 137 | } 138 | .margin-vertical--20 { 139 | margin-top: 20px !important; 140 | margin-bottom: 20px !important; 141 | } 142 | 143 | /* Left padding */ 144 | .padding-left--0 { 145 | padding-left: 0 !important; 146 | } 147 | .padding-left--4 { 148 | padding-left: 4px !important; 149 | } 150 | .padding-left--8 { 151 | padding-left: 8px !important; 152 | } 153 | .padding-left--12 { 154 | padding-left: 12px !important; 155 | } 156 | .padding-left--16 { 157 | padding-left: 16px !important; 158 | } 159 | .padding-left--20 { 160 | padding-left: 20px !important; 161 | } 162 | .padding-left--24 { 163 | padding-left: 24px !important; 164 | } 165 | 166 | /* Right padding */ 167 | .padding-right--0 { 168 | padding-right: 0 !important; 169 | } 170 | .padding-right--4 { 171 | padding-right: 4px !important; 172 | } 173 | .padding-right--8 { 174 | padding-right: 8px !important; 175 | } 176 | .padding-right--12 { 177 | padding-right: 12px !important; 178 | } 179 | .padding-right--16 { 180 | padding-right: 16px !important; 181 | } 182 | .padding-right--20 { 183 | padding-right: 20px !important; 184 | } 185 | 186 | /* Top padding */ 187 | .padding-top--0 { 188 | padding-top: 0 !important; 189 | } 190 | .padding-top--4 { 191 | padding-top: 4px !important; 192 | } 193 | .padding-top--8 { 194 | padding-top: 8px !important; 195 | } 196 | .padding-top--12 { 197 | padding-top: 12px !important; 198 | } 199 | .padding-top--16 { 200 | padding-top: 16px !important; 201 | } 202 | .padding-top--20 { 203 | padding-top: 20px !important; 204 | } 205 | 206 | /* Bottom padding */ 207 | .padding-bottom--0 { 208 | padding-bottom: 0 !important; 209 | } 210 | .padding-bottom--4 { 211 | padding-bottom: 4px !important; 212 | } 213 | .padding-bottom--8 { 214 | padding-bottom: 8px !important; 215 | } 216 | .padding-bottom--12 { 217 | padding-bottom: 12px !important; 218 | } 219 | .padding-bottom--16 { 220 | padding-bottom: 16px !important; 221 | } 222 | .padding-bottom--20 { 223 | padding-bottom: 20px !important; 224 | } 225 | 226 | /* Horizontal padding */ 227 | .padding-horizontal--0 { 228 | padding-right: 0 !important; 229 | padding-left: 0 !important; 230 | } 231 | .padding-horizontal--4 { 232 | padding-right: 4px !important; 233 | padding-left: 4px !important; 234 | } 235 | .padding-horizontal--8 { 236 | padding-right: 8px !important; 237 | padding-left: 8px !important; 238 | } 239 | .padding-horizontal--12 { 240 | padding-right: 12px !important; 241 | padding-left: 12px !important; 242 | } 243 | .padding-horizontal--16 { 244 | padding-right: 16px !important; 245 | padding-left: 16px !important; 246 | } 247 | .padding-horizontal--20 { 248 | padding-right: 20px !important; 249 | padding-left: 20px !important; 250 | } 251 | 252 | /* Padding vertical */ 253 | .padding-vertical--0 { 254 | padding-top: 0 !important; 255 | padding-bottom: 0 !important; 256 | } 257 | .padding-vertical--4 { 258 | padding-top: 4px !important; 259 | padding-bottom: 4px !important; 260 | } 261 | .padding-vertical--8 { 262 | padding-top: 8px !important; 263 | padding-bottom: 8px !important; 264 | } 265 | .padding-vertical--12 { 266 | padding-top: 12px !important; 267 | padding-bottom: 12px !important; 268 | } 269 | .padding-vertical--16 { 270 | padding-top: 16px !important; 271 | padding-bottom: 16px !important; 272 | } 273 | .padding-vertical--20 { 274 | padding-top: 20px !important; 275 | padding-bottom: 20px !important; 276 | } -------------------------------------------------------------------------------- /components/Column.vue: -------------------------------------------------------------------------------- 1 | 64 | 65 | 156 | 157 | 271 | -------------------------------------------------------------------------------- /assets/scss/partials/_reset.scss: -------------------------------------------------------------------------------- 1 | /* http://meyerweb.com/eric/tools/css/reset/ 2 | v2.0-modified | 20110126 3 | License: none (public domain) 4 | */ 5 | *, 6 | *:before, 7 | *:after { 8 | box-sizing: border-box; 9 | margin: 0; 10 | } 11 | html, body, div, span, applet, object, iframe, 12 | h1, h2, h3, h4, h5, h6, p, blockquote, pre, 13 | a, abbr, acronym, address, big, cite, code, 14 | del, dfn, em, img, ins, kbd, q, s, samp, 15 | small, strike, strong, sub, sup, tt, var, 16 | b, u, i, center, 17 | dl, dt, dd, ol, ul, li, 18 | fieldset, form, label, legend, 19 | table, caption, tbody, tfoot, thead, tr, th, td, 20 | article, aside, canvas, details, embed, 21 | figure, figcaption, footer, header, hgroup, 22 | menu, nav, output, ruby, section, summary, 23 | time, mark, audio, video { 24 | margin: 0; 25 | padding: 0; 26 | border: 0; 27 | font-size: 100%; 28 | font: inherit; 29 | vertical-align: baseline; 30 | } 31 | 32 | /* make sure to set some focus styles for accessibility */ 33 | :focus { 34 | outline: 0; 35 | } 36 | 37 | /* HTML5 display-role reset for older browsers */ 38 | article, aside, details, figcaption, figure, 39 | footer, header, hgroup, menu, nav, section { 40 | display: block; 41 | } 42 | 43 | body { 44 | line-height: 1; 45 | } 46 | 47 | ol, ul { 48 | list-style: none; 49 | } 50 | 51 | blockquote, q { 52 | quotes: none; 53 | } 54 | 55 | blockquote:before, blockquote:after, 56 | q:before, q:after { 57 | content: ''; 58 | content: none; 59 | } 60 | 61 | table { 62 | border-collapse: collapse; 63 | border-spacing: 0; 64 | } 65 | 66 | input[type=search]::-webkit-search-cancel-button, 67 | input[type=search]::-webkit-search-decoration, 68 | input[type=search]::-webkit-search-results-button, 69 | input[type=search]::-webkit-search-results-decoration { 70 | -webkit-appearance: none; 71 | -moz-appearance: none; 72 | } 73 | 74 | input[type=search] { 75 | -webkit-appearance: none; 76 | -moz-appearance: none; 77 | -webkit-box-sizing: content-box; 78 | -moz-box-sizing: content-box; 79 | box-sizing: content-box; 80 | } 81 | 82 | textarea { 83 | overflow: auto; 84 | vertical-align: top; 85 | resize: vertical; 86 | } 87 | 88 | /** 89 | * Correct `inline-block` display not defined in IE 6/7/8/9 and Firefox 3. 90 | */ 91 | 92 | audio, 93 | canvas, 94 | video { 95 | display: inline-block; 96 | *display: inline; 97 | *zoom: 1; 98 | max-width: 100%; 99 | } 100 | 101 | /** 102 | * Prevent modern browsers from displaying `audio` without controls. 103 | * Remove excess height in iOS 5 devices. 104 | */ 105 | 106 | audio:not([controls]) { 107 | display: none; 108 | height: 0; 109 | } 110 | 111 | /** 112 | * Address styling not present in IE 7/8/9, Firefox 3, and Safari 4. 113 | * Known issue: no IE 6 support. 114 | */ 115 | 116 | [hidden] { 117 | display: none; 118 | } 119 | 120 | /** 121 | * 1. Correct text resizing oddly in IE 6/7 when body `font-size` is set using 122 | * `em` units. 123 | * 2. Prevent iOS text size adjust after orientation change, without disabling 124 | * user zoom. 125 | */ 126 | 127 | html { 128 | font-size: 100%; /* 1 */ 129 | -webkit-text-size-adjust: 100%; /* 2 */ 130 | -ms-text-size-adjust: 100%; /* 2 */ 131 | } 132 | 133 | /** 134 | * Address `outline` inconsistency between Chrome and other browsers. 135 | */ 136 | 137 | a:focus { 138 | outline: thin dotted; 139 | } 140 | 141 | /** 142 | * Improve readability when focused and also mouse hovered in all browsers. 143 | */ 144 | 145 | a:active, 146 | a:hover { 147 | outline: 0; 148 | } 149 | 150 | /** 151 | * 1. Remove border when inside `a` element in IE 6/7/8/9 and Firefox 3. 152 | * 2. Improve image quality when scaled in IE 7. 153 | */ 154 | 155 | img { 156 | border: 0; /* 1 */ 157 | -ms-interpolation-mode: bicubic; /* 2 */ 158 | } 159 | 160 | /** 161 | * Address margin not present in IE 6/7/8/9, Safari 5, and Opera 11. 162 | */ 163 | 164 | figure { 165 | margin: 0; 166 | } 167 | 168 | /** 169 | * Correct margin displayed oddly in IE 6/7. 170 | */ 171 | 172 | form { 173 | margin: 0; 174 | } 175 | 176 | /** 177 | * Define consistent border, margin, and padding. 178 | */ 179 | 180 | fieldset { 181 | border: 1px solid #c0c0c0; 182 | margin: 0 2px; 183 | padding: 0.35em 0.625em 0.75em; 184 | } 185 | 186 | /** 187 | * 1. Correct color not being inherited in IE 6/7/8/9. 188 | * 2. Correct text not wrapping in Firefox 3. 189 | * 3. Correct alignment displayed oddly in IE 6/7. 190 | */ 191 | 192 | legend { 193 | border: 0; /* 1 */ 194 | padding: 0; 195 | white-space: normal; /* 2 */ 196 | *margin-left: -7px; /* 3 */ 197 | } 198 | 199 | /** 200 | * 1. Correct font size not being inherited in all browsers. 201 | * 2. Address margins set differently in IE 6/7, Firefox 3+, Safari 5, 202 | * and Chrome. 203 | * 3. Improve appearance and consistency in all browsers. 204 | */ 205 | 206 | button, 207 | input, 208 | select, 209 | textarea { 210 | font-size: 100%; /* 1 */ 211 | margin: 0; /* 2 */ 212 | vertical-align: baseline; /* 3 */ 213 | *vertical-align: middle; /* 3 */ 214 | } 215 | 216 | /** 217 | * Address Firefox 3+ setting `line-height` on `input` using `!important` in 218 | * the UA stylesheet. 219 | */ 220 | 221 | button, 222 | input { 223 | line-height: normal; 224 | } 225 | 226 | /** 227 | * Address inconsistent `text-transform` inheritance for `button` and `select`. 228 | * All other form control elements do not inherit `text-transform` values. 229 | * Correct `button` style inheritance in Chrome, Safari 5+, and IE 6+. 230 | * Correct `select` style inheritance in Firefox 4+ and Opera. 231 | */ 232 | 233 | button, 234 | select { 235 | text-transform: none; 236 | } 237 | 238 | /** 239 | * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` 240 | * and `video` controls. 241 | * 2. Correct inability to style clickable `input` types in iOS. 242 | * 3. Improve usability and consistency of cursor style between image-type 243 | * `input` and others. 244 | * 4. Remove inner spacing in IE 7 without affecting normal text inputs. 245 | * Known issue: inner spacing remains in IE 6. 246 | */ 247 | 248 | button, 249 | html input[type="button"], /* 1 */ 250 | input[type="reset"], 251 | input[type="submit"] { 252 | -webkit-appearance: button; /* 2 */ 253 | cursor: pointer; /* 3 */ 254 | *overflow: visible; /* 4 */ 255 | } 256 | 257 | /** 258 | * Re-set default cursor for disabled elements. 259 | */ 260 | 261 | button[disabled], 262 | html input[disabled] { 263 | cursor: default; 264 | } 265 | 266 | /** 267 | * 1. Address box sizing set to content-box in IE 8/9. 268 | * 2. Remove excess padding in IE 8/9. 269 | * 3. Remove excess padding in IE 7. 270 | * Known issue: excess padding remains in IE 6. 271 | */ 272 | 273 | input[type="checkbox"], 274 | input[type="radio"] { 275 | box-sizing: border-box; /* 1 */ 276 | padding: 0; /* 2 */ 277 | *height: 13px; /* 3 */ 278 | *width: 13px; /* 3 */ 279 | } 280 | 281 | /** 282 | * 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome. 283 | * 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome 284 | * (include `-moz` to future-proof). 285 | */ 286 | 287 | input[type="search"] { 288 | -webkit-appearance: textfield; /* 1 */ 289 | -moz-box-sizing: content-box; 290 | -webkit-box-sizing: content-box; /* 2 */ 291 | box-sizing: content-box; 292 | } 293 | 294 | /** 295 | * Remove inner padding and search cancel button in Safari 5 and Chrome 296 | * on OS X. 297 | */ 298 | 299 | input[type="search"]::-webkit-search-cancel-button, 300 | input[type="search"]::-webkit-search-decoration { 301 | -webkit-appearance: none; 302 | } 303 | 304 | /** 305 | * Remove inner padding and border in Firefox 3+. 306 | */ 307 | 308 | button::-moz-focus-inner, 309 | input::-moz-focus-inner { 310 | border: 0; 311 | padding: 0; 312 | } 313 | 314 | /** 315 | * 1. Remove default vertical scrollbar in IE 6/7/8/9. 316 | * 2. Improve readability and alignment in all browsers. 317 | */ 318 | 319 | textarea { 320 | overflow: auto; /* 1 */ 321 | vertical-align: top; /* 2 */ 322 | } 323 | 324 | /** 325 | * Remove most spacing between table cells. 326 | */ 327 | 328 | table { 329 | border-collapse: collapse; 330 | border-spacing: 0; 331 | } 332 | 333 | html, 334 | button, 335 | input, 336 | select, 337 | textarea { 338 | color: #222; 339 | } 340 | 341 | 342 | ::-moz-selection { 343 | background: #b3d4fc; 344 | text-shadow: none; 345 | } 346 | 347 | ::selection { 348 | background: #b3d4fc; 349 | text-shadow: none; 350 | } 351 | 352 | img { 353 | vertical-align: middle; 354 | } 355 | 356 | fieldset { 357 | border: 0; 358 | margin: 0; 359 | padding: 0; 360 | } 361 | 362 | textarea { 363 | resize: vertical; 364 | } 365 | 366 | .chromeframe { 367 | margin: 0.2em 0; 368 | background: #ccc; 369 | color: #000; 370 | padding: 0.2em 0; 371 | } --------------------------------------------------------------------------------