From 8e4b1c10fce7e228283d85f92d757493c171fcfe Mon Sep 17 00:00:00 2001 From: brookback Date: Wed, 25 Oct 2023 19:41:47 +0000 Subject: [PATCH] =?UTF-8?q?Deploying=20to=20gh-pages=20from=20@=20johanbro?= =?UTF-8?q?ok/johanbrook.com@9f8eb1580aa6aa1eadc991848e94be4c162537c8=20?= =?UTF-8?q?=F0=9F=9A=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .well-known/webfinger | 4 ++-- about/index.html | 2 +- api.json | 8 ++++---- changelog/index.html | 2 +- credits/index.html | 2 +- every-child/index.html | 2 +- index.html | 2 +- johan.css | 2 +- johan.css.map | 2 +- mind/index.html | 2 +- music/index.html | 2 +- notes/2021-07-09/index.html | 2 +- notes/2021-09-30/index.html | 2 +- notes/2022-01-04-09-37/index.html | 2 +- notes/2022-01-06-11-55/index.html | 2 +- notes/2022-01-11-22-16/index.html | 2 +- notes/2022-01-17-09-32/index.html | 2 +- notes/2022-01-23-11-50/index.html | 2 +- notes/2022-01-24-23-01/index.html | 2 +- notes/2022-01-30-14-02/index.html | 2 +- notes/2022-01-30-17-15/index.html | 2 +- notes/2022-02-02-17-51/index.html | 2 +- notes/2022-02-08-08-50/index.html | 2 +- notes/2022-02-14-10-20/index.html | 2 +- notes/2022-02-17-12-48/index.html | 2 +- notes/2022-02-22-21-14/index.html | 2 +- notes/2022-03-15-10-12/index.html | 2 +- notes/2022-03-16-19-58/index.html | 2 +- notes/2022-04-06-18-07/index.html | 2 +- notes/2022-05-03-19-37/index.html | 2 +- notes/2022-07-16-18-54/index.html | 2 +- notes/2022-08-28-19-15/index.html | 2 +- notes/2022-10-27-20-24/index.html | 2 +- notes/2023-01-30-20-53/index.html | 2 +- notes/2023-02-19-19-34/index.html | 2 +- notes/2023-03-20-20-29/index.html | 2 +- notes/2023-04-11-19-58/index.html | 2 +- notes/2023-04-11-23-55/index.html | 2 +- notes/2023-05-03-21-34/index.html | 2 +- notes/2023-08-11-08-01/index.html | 2 +- notes/2023-08-23-09-06/index.html | 2 +- notes/2023-08-24-07-59/index.html | 2 +- notes/2023-09-14-14-29/index.html | 2 +- now/index.html | 2 +- principles/index.html | 2 +- quotes/index.html | 2 +- reading.xml | 18 +++++++++--------- reading/index.html | 2 +- to-read/index.html | 2 +- writings/a-creative-person/index.html | 2 +- .../index.html | 2 +- .../a-greenhorns-freelance-advice/index.html | 2 +- writings/a-markdown-teleprompter/index.html | 2 +- writings/a-note-to-people-that-hire/index.html | 2 +- writings/a-simple-icon/index.html | 2 +- .../a-simpler-css3-gradient-syntax/index.html | 2 +- writings/a-symbol-for-sex/index.html | 2 +- writings/a-typographic-poster/index.html | 2 +- writings/a-word-about-testing-code/index.html | 2 +- writings/about-guys-who-fix-stuff/index.html | 2 +- .../index.html | 2 +- .../index.html | 2 +- .../index.html | 2 +- .../index.html | 2 +- writings/after-hours/index.html | 2 +- .../index.html | 2 +- .../index.html | 2 +- .../index.html | 2 +- writings/autocomplete-in-textedit/index.html | 2 +- .../index.html | 2 +- writings/balancing-greatness/index.html | 2 +- writings/bdgt-for-iphone/index.html | 2 +- writings/better-spaghetti-bolognese/index.html | 2 +- .../index.html | 2 +- writings/bringing-order-to-css/index.html | 2 +- .../can-you-make-the-logo-smaller/index.html | 2 +- .../index.html | 2 +- .../chocolat-the-heir-of-textmate/index.html | 2 +- writings/coding-like-knitting/index.html | 2 +- writings/coffee-and-free-software/index.html | 2 +- .../index.html | 2 +- .../index.html | 2 +- .../index.html | 2 +- .../index.html | 2 +- .../debugging-css-media-queries/index.html | 2 +- writings/deno/index.html | 2 +- writings/device-independency/index.html | 2 +- writings/digital-magazines-and-html/index.html | 2 +- .../dustin-diazs-dollarscriptjs/index.html | 2 +- writings/dyluni-for-wordpress/index.html | 2 +- writings/eric-meyer-reset-revisited/index.html | 2 +- writings/euphoria/index.html | 2 +- writings/figma-api-colors-css/index.html | 2 +- writings/firefox-4-a-bitter-taste/index.html | 2 +- .../index.html | 2 +- .../index.html | 2 +- writings/flow-out-of-beta/index.html | 2 +- .../formalize-css-consistent-forms/index.html | 2 +- writings/frp-app-arch/index.html | 2 +- writings/generalist-specialists/index.html | 2 +- .../index.html | 2 +- writings/git-guidelines/index.html | 2 +- .../good-software-is-like-a-knot/index.html | 2 +- .../index.html | 2 +- .../index.html | 2 +- .../index.html | 2 +- .../index.html | 2 +- .../hiring-developers-2012-style/index.html | 2 +- writings/homemade-is-best/index.html | 2 +- .../index.html | 2 +- .../index.html | 2 +- .../how-ryan-singer-builds-products/index.html | 2 +- .../index.html | 2 +- writings/i-dont-like-counting-hours/index.html | 2 +- writings/im-apparently-a-unicorn/index.html | 2 +- writings/index.html | 2 +- .../index.html | 2 +- writings/intimate-remote-work/index.html | 2 +- writings/ios-fonts/index.html | 2 +- writings/ios-homescreen-web-app/index.html | 2 +- .../index.html | 2 +- .../index.html | 2 +- writings/jawbones-jambox/index.html | 2 +- .../index.html | 2 +- writings/kod-app-is-now-open-source/index.html | 2 +- writings/learnable-programming/index.html | 2 +- .../index.html | 2 +- .../index.html | 2 +- .../index.html | 2 +- writings/master-of-many-trades/index.html | 2 +- writings/mastodon/index.html | 2 +- .../index.html | 2 +- .../index.html | 2 +- .../minimal-skype-5-message-style/index.html | 2 +- writings/minimalistic-oscar-posters/index.html | 2 +- writings/my-favourite-software/index.html | 2 +- writings/my-personal-gym-faq/index.html | 2 +- writings/my-spaghetti-bolognese/index.html | 2 +- .../index.html | 2 +- .../index.html | 2 +- .../new-safari-downloads-ui-in-lion/index.html | 2 +- writings/new-watch/index.html | 2 +- .../index.html | 2 +- writings/old-book-illustrations/index.html | 2 +- writings/old-hardware-still-rocks/index.html | 2 +- writings/on-scala/index.html | 2 +- writings/on-socialising/index.html | 2 +- .../index.html | 2 +- .../index.html | 2 +- writings/on-using-your-time/index.html | 2 +- .../index.html | 2 +- writings/out-with-the-old/index.html | 2 +- writings/pain-points-and-incentives/index.html | 2 +- .../index.html | 2 +- .../index.html | 2 +- writings/perfection-doesnt-exist/index.html | 2 +- .../photos-of-national-geographic/index.html | 2 +- writings/php-needs-to-die/index.html | 2 +- .../posters-by-avraham-cornfeld/index.html | 2 +- .../programming-and-communication/index.html | 2 +- .../index.html | 2 +- writings/rasmus-andersson-on-kod/index.html | 2 +- writings/react-hooks-streams/index.html | 2 +- writings/realigning-johanbrookcom/index.html | 2 +- writings/recently-in-books-ii/index.html | 2 +- writings/recently-in-books/index.html | 2 +- writings/redesigned-and-reimagined/index.html | 2 +- writings/redesigned/index.html | 2 +- .../index.html | 2 +- .../index.html | 2 +- writings/remote-pair-programming/index.html | 2 +- .../index.html | 2 +- writings/retro-airline-bags/index.html | 2 +- .../index.html | 2 +- .../index.html | 2 +- .../index.html | 2 +- .../index.html | 2 +- writings/shipped-with-fear/index.html | 2 +- writings/signal-vs-noise/index.html | 2 +- writings/software-is-handcrafted/index.html | 2 +- .../index.html | 2 +- writings/songs-to-code-by/index.html | 2 +- .../index.html | 2 +- writings/spotimood/index.html | 2 +- .../index.html | 2 +- .../index.html | 2 +- .../index.html | 2 +- .../index.html | 2 +- writings/styled-components-vdom/index.html | 2 +- writings/sublime-text-deno/index.html | 2 +- .../index.html | 2 +- writings/support/index.html | 2 +- writings/sync-is-about-safety/index.html | 2 +- .../index.html | 2 +- .../index.html | 2 +- writings/take-a-step-back/index.html | 2 +- .../index.html | 2 +- writings/the-art-of-quality/index.html | 2 +- .../index.html | 2 +- .../the-hawk-catches-the-sparrow/index.html | 2 +- writings/the-ocean/index.html | 2 +- .../index.html | 2 +- writings/the-shape-of-design/index.html | 2 +- writings/the-slow-web-movement/index.html | 2 +- writings/the-white-duck/index.html | 2 +- writings/thomas-fuchs-web-dev-tools/index.html | 2 +- .../index.html | 2 +- writings/timeless-fashion/index.html | 2 +- .../index.html | 2 +- .../index.html | 2 +- .../index.html | 2 +- writings/universal-wrapping-paper/index.html | 2 +- .../index.html | 2 +- .../index.html | 2 +- .../index.html | 2 +- .../index.html | 2 +- .../index.html | 2 +- .../index.html | 2 +- writings/what-matters/index.html | 2 +- writings/whats-happened-so-far/index.html | 2 +- writings/whats-new-in-safari-9/index.html | 2 +- .../index.html | 2 +- .../whiteboard-theme-for-wordpress/index.html | 2 +- writings/whos-suing-whom/index.html | 2 +- .../why-google-cant-build-instagram/index.html | 2 +- .../index.html | 2 +- writings/writing-contextual-css/index.html | 2 +- .../index.html | 2 +- .../index.html | 2 +- writings/yet-another-site-redesign/index.html | 2 +- .../index.html | 2 +- 231 files changed, 243 insertions(+), 243 deletions(-) diff --git a/.well-known/webfinger b/.well-known/webfinger index de4c31f8a..bd06bdf9c 100644 --- a/.well-known/webfinger +++ b/.well-known/webfinger @@ -106,10 +106,10 @@ Writings
  • - Now + On my mind
  • - On my mind + Now
  • Reading diff --git a/about/index.html b/about/index.html index 80030d0fa..f2a8547c6 100644 --- a/about/index.html +++ b/about/index.html @@ -1 +1 @@ -About me / Johan Brook

    About me.

    I like building things for the web. You’d probably enjoy grabbing a beer or coffee with me. I also like reading, writing, strolling around in cities, playing the guitar, coffee, cooking, and photography.

    I’ve been designing and writing code since my late teens (that period seems further and further away now!). So far, I’ve avoided to put myself under one label — to specialise in one thing only — and instead gone for this Jack of all Trades role in the various teams I’ve had the pleasure of working with. I like all things graphic and digital design, front and backend development, product and strategy, typography and API design, copywriting and CSS architecture.

    Since 2014, I work as generalist at Lookback. I came on early, and have helped shape the frontend architecture, built backends, performed UX testing and research, fixed bugs, and have learned tons about working in a small startup. We’ve gone from being a small group with loose product focus to being a tight team with laser focus on the mission. I’ve loved and love being part of that journey.

    My day-to-day duties include being lead for the product team at Lookback, as well as building our web based products. I’ve enjoyed writing a lot of Typescript in the Functional Reactive pattern recently, with a dash of React. After writing HTML and CSS for around a decade using various techniques and dogmas, I’m really interested in building scalable frontends these days. That includes component based thinking and functional CSS. On the backend side of things, I’ve learned more about GraphQL recently. I helped shape Lookback’s initial GraphQL server, which now has grown to a central piece in our infrastructure.

    As for non-tech things in startups, I’ve become more and more interested in the methods of leading teams and how to work smarter. That is, how the well-being of each team member is kept central while the work can progress in a smooth way.

    I love traveling. I lived in Canada for a year before university, where I went completely offline and worked as a barista. In September 2015, I embarked upon this nomad thing of traveling the world while working remote. So far, I’ve lived and worked in Vienna, London, San Francisco, New York, Montréal, Asunción, Rio de Janeiro, Copenhagen, and Lisbon. Keep an eye out on Now for updates. As of January 2018, I’ve settled in Stockholm, Sweden.

    Writing is something I try to do more and more (been posting pieces here since 2010). I’ve had a blog since my mid teens and I’m currently experimenting with much shorter texts to lower the ambition but increase the Time To Publish.

    As always, I love getting emails and talk with people. Reach me at webmaster@johan.im about anything.

    👋

    \ No newline at end of file +About me / Johan Brook

    About me.

    I like building things for the web. You’d probably enjoy grabbing a beer or coffee with me. I also like reading, writing, strolling around in cities, playing the guitar, coffee, cooking, and photography.

    I’ve been designing and writing code since my late teens (that period seems further and further away now!). So far, I’ve avoided to put myself under one label — to specialise in one thing only — and instead gone for this Jack of all Trades role in the various teams I’ve had the pleasure of working with. I like all things graphic and digital design, front and backend development, product and strategy, typography and API design, copywriting and CSS architecture.

    Since 2014, I work as generalist at Lookback. I came on early, and have helped shape the frontend architecture, built backends, performed UX testing and research, fixed bugs, and have learned tons about working in a small startup. We’ve gone from being a small group with loose product focus to being a tight team with laser focus on the mission. I’ve loved and love being part of that journey.

    My day-to-day duties include being lead for the product team at Lookback, as well as building our web based products. I’ve enjoyed writing a lot of Typescript in the Functional Reactive pattern recently, with a dash of React. After writing HTML and CSS for around a decade using various techniques and dogmas, I’m really interested in building scalable frontends these days. That includes component based thinking and functional CSS. On the backend side of things, I’ve learned more about GraphQL recently. I helped shape Lookback’s initial GraphQL server, which now has grown to a central piece in our infrastructure.

    As for non-tech things in startups, I’ve become more and more interested in the methods of leading teams and how to work smarter. That is, how the well-being of each team member is kept central while the work can progress in a smooth way.

    I love traveling. I lived in Canada for a year before university, where I went completely offline and worked as a barista. In September 2015, I embarked upon this nomad thing of traveling the world while working remote. So far, I’ve lived and worked in Vienna, London, San Francisco, New York, Montréal, Asunción, Rio de Janeiro, Copenhagen, and Lisbon. Keep an eye out on Now for updates. As of January 2018, I’ve settled in Stockholm, Sweden.

    Writing is something I try to do more and more (been posting pieces here since 2010). I’ve had a blog since my mid teens and I’m currently experimenting with much shorter texts to lower the ambition but increase the Time To Publish.

    As always, I love getting emails and talk with people. Reach me at webmaster@johan.im about anything.

    👋

    \ No newline at end of file diff --git a/api.json b/api.json index 9eba0aa23..608cbf871 100644 --- a/api.json +++ b/api.json @@ -59,8 +59,8 @@ "cv": "https://johan.im/johanbrook-cv.pdf", "versions": { "johan": "4.0.0", - "build": "3dab65cb6cf64b3a5c64503cea91d3a9b220bae8", - "builtAt": "2023-10-24T14:08:42.597Z" + "build": "9f8eb1580aa6aa1eadc991848e94be4c162537c8", + "builtAt": "2023-10-25T19:41:42.196Z" } } @@ -97,10 +97,10 @@ Writings
  • - Now + On my mind
  • - On my mind + Now
  • Reading diff --git a/changelog/index.html b/changelog/index.html index e0960ca0d..af8029368 100644 --- a/changelog/index.html +++ b/changelog/index.html @@ -1 +1 @@ -Changelog / Johan Brook

    Changelog.

    My life so far – versioned. Also check out experimental development: what I’m doing now.

    4.1

    • Became a father again.

    4.0

    • Became a father.

    Version 3.7

    • Married aforementioned fiancée 🌷
    • Bought a car.
    • Realised that I don’t want to live in a city mid to long term.

    Version 3.6

    • Engaged with awesome girlfriend, now fiancée 💍

    Version 3.5

    • Bought my first apartment together with girlfriend.
      • Entered the “Slowly Furnish Apartment” phase.
    • Started a private micro journal.
      • Note a couple of thoughts per day.
    • Made effort to eat way less red meat.
    • Learned Typescript and React.

    Version 3.4

    • Met a beautiful, cool, and loving girlfriend 🌻
      • Made Stockholm the base of operations for the near future.
    • Got myself some eye glasses.
    • Started saving for retirement.

    Version 3.3.2

    • Started going to the gym to build muscle.
      • Made effort to eat more regularly and with more detail.
    • Started noting three things I’m grateful for each day in a notebook.

    Version 3.3.1

    • Decided to cut down on beer, due to being generally bored with it.
      • Turned focus to red wine and hard liquor.
    • Started doing yoga and stretching exercises more regularly.
    • Cut off long hair.

    Version 3.3

    • Thanks to flexible remote work opportunity in Lookback, I decided to start travelling full time (“nomading”).
      • Lived in Brazil, UK, Spain, United States, Austria, Canada, and Paraguay.
      • Gained invaluable experiences in foreign cultures.
      • Made friends with crazy warm people from all over the world, but felt more lonely than in a long while.
    • Started to appreciate South American culture very much.

    Version 3.2

    • Decided to drop out of university to join Lookback.
      • Gained huge experience in remote communication.
      • Enabled a flexible work life style, but decrease in work-life balance.
    • Got new journal.

    Version 3.1

    • Joined sexIT — the social society at the Software Engineering faculty at Chalmers.
      • Had the time of my life.

    Version 3.0

    • Started studying Software Engineering at Chalmers University of Technology in Gothenburg, Sweden.
      • Was severely challenged in technical studies.
      • Gained closest relationships I’ve ever had and still have.
    • Learned about love, and how to screw it up.

    Version 2.1

    • Started freelancing in graphic and web design/development. Gained experience in working with small, medium, and large company clients. Developed in business communication and tech skills, as well as dealing with setting up my own company.
    • Began noting thoughts, poems, sketches, lyrics and quotes in a Moleskine journal.

    Version 2.0

    • Moved to Calgary, Canada for a year, to stay with relatives.
      • Started working at Starbucks in Calgary. Earned bullshit “Certified Barista” badge.
      • Emerged in foreign environment and developed in English, social interactions, as well as learning to take care of myself, to some extent.
      • Visited Hawaii, Saskatchewan, and British Columbia.
    • Bought johanbrook.com and started iterating on my own homepage.

    Version 1.2

    • Ended high school, with personal focus on web design and development.
    • Developed as a person in social interactions.
    • Decided to not apply for university right after, and instead try to work in a non-computerized environment.

    Version 1.1

    • Began high school at technical program. Develops deeper interests for programming and development.
    • Found great friends with similar interests.

    Version 1.0

    • Born. Note: At this stage, my external APIs was conceived, but they were not regarded as “stable” until 2.0.
    \ No newline at end of file +Changelog / Johan Brook

    Changelog.

    My life so far – versioned. Also check out experimental development: what I’m doing now.

    4.1

    • Became a father again.

    4.0

    • Became a father.

    Version 3.7

    • Married aforementioned fiancée 🌷
    • Bought a car.
    • Realised that I don’t want to live in a city mid to long term.

    Version 3.6

    • Engaged with awesome girlfriend, now fiancée 💍

    Version 3.5

    • Bought my first apartment together with girlfriend.
      • Entered the “Slowly Furnish Apartment” phase.
    • Started a private micro journal.
      • Note a couple of thoughts per day.
    • Made effort to eat way less red meat.
    • Learned Typescript and React.

    Version 3.4

    • Met a beautiful, cool, and loving girlfriend 🌻
      • Made Stockholm the base of operations for the near future.
    • Got myself some eye glasses.
    • Started saving for retirement.

    Version 3.3.2

    • Started going to the gym to build muscle.
      • Made effort to eat more regularly and with more detail.
    • Started noting three things I’m grateful for each day in a notebook.

    Version 3.3.1

    • Decided to cut down on beer, due to being generally bored with it.
      • Turned focus to red wine and hard liquor.
    • Started doing yoga and stretching exercises more regularly.
    • Cut off long hair.

    Version 3.3

    • Thanks to flexible remote work opportunity in Lookback, I decided to start travelling full time (“nomading”).
      • Lived in Brazil, UK, Spain, United States, Austria, Canada, and Paraguay.
      • Gained invaluable experiences in foreign cultures.
      • Made friends with crazy warm people from all over the world, but felt more lonely than in a long while.
    • Started to appreciate South American culture very much.

    Version 3.2

    • Decided to drop out of university to join Lookback.
      • Gained huge experience in remote communication.
      • Enabled a flexible work life style, but decrease in work-life balance.
    • Got new journal.

    Version 3.1

    • Joined sexIT — the social society at the Software Engineering faculty at Chalmers.
      • Had the time of my life.

    Version 3.0

    • Started studying Software Engineering at Chalmers University of Technology in Gothenburg, Sweden.
      • Was severely challenged in technical studies.
      • Gained closest relationships I’ve ever had and still have.
    • Learned about love, and how to screw it up.

    Version 2.1

    • Started freelancing in graphic and web design/development. Gained experience in working with small, medium, and large company clients. Developed in business communication and tech skills, as well as dealing with setting up my own company.
    • Began noting thoughts, poems, sketches, lyrics and quotes in a Moleskine journal.

    Version 2.0

    • Moved to Calgary, Canada for a year, to stay with relatives.
      • Started working at Starbucks in Calgary. Earned bullshit “Certified Barista” badge.
      • Emerged in foreign environment and developed in English, social interactions, as well as learning to take care of myself, to some extent.
      • Visited Hawaii, Saskatchewan, and British Columbia.
    • Bought johanbrook.com and started iterating on my own homepage.

    Version 1.2

    • Ended high school, with personal focus on web design and development.
    • Developed as a person in social interactions.
    • Decided to not apply for university right after, and instead try to work in a non-computerized environment.

    Version 1.1

    • Began high school at technical program. Develops deeper interests for programming and development.
    • Found great friends with similar interests.

    Version 1.0

    • Born. Note: At this stage, my external APIs was conceived, but they were not regarded as “stable” until 2.0.
    \ No newline at end of file diff --git a/credits/index.html b/credits/index.html index 9d0ee943f..ade1e0399 100644 --- a/credits/index.html +++ b/credits/index.html @@ -3,4 +3,4 @@ You may steal the code of this site, and be inspired by its structure. You may not steal any writings of mine and claim them as your own. - \ No newline at end of file + \ No newline at end of file diff --git a/every-child/index.html b/every-child/index.html index eb33781f3..9a07be22d 100644 --- a/every-child/index.html +++ b/every-child/index.html @@ -1 +1 @@ -Things every child needs to hear / Johan Brook

    Things every child needs to hear.

    1. I love you.
    2. I am proud of you.
    3. I am sorry.
    4. I forgive you.
    5. I am listening.
    6. You have what it takes.
    \ No newline at end of file +Things every child needs to hear / Johan Brook

    Things every child needs to hear.

    1. I love you.
    2. I am proud of you.
    3. I am sorry.
    4. I forgive you.
    5. I am listening.
    6. You have what it takes.
    \ No newline at end of file diff --git a/index.html b/index.html index 815521d72..74d112c34 100644 --- a/index.html +++ b/index.html @@ -55,4 +55,4 @@ loading.textContent = original; } } - \ No newline at end of file + \ No newline at end of file diff --git a/johan.css b/johan.css index 152aad2e5..723af66d1 100644 --- a/johan.css +++ b/johan.css @@ -1 +1 @@ -/* Styles for Johan Brook.com Built for IE6, made in Dreamweaver. Just kidding. --------------------------------------------- */ @layer setup, base, views, components, utils; @layer setup{ /* https://github.com/mayank99/reset.css/blob/main/package/index.css@0.7.0 */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } :where([hidden]:not([hidden='until-found'])) { display: none !important; } :where(html) { -webkit-text-size-adjust: none; color-scheme: dark light; } } @layer setup{ @media (prefers-reduced-motion: no-preference) { :where(html:focus-within) { scroll-behavior: smooth; } } } @layer setup{ :where(body) { line-height: 1.5; font-family: system-ui, sans-serif; -webkit-font-smoothing: antialiased; } :where(input, button, textarea, select) { font: inherit; color: inherit; } :where(textarea) { resize: vertical; resize: block; } :where(button, label, select, summary, [role='button'], [role='option']) { cursor: pointer; } :where(:disabled) { cursor: not-allowed; } :where(label:has(> input:disabled), label:has(+ input:disabled)) { cursor: not-allowed; } :where(button) { border-style: solid; } :where(a) { color: inherit; text-underline-offset: 0.2ex; } :where(ul, ol) { list-style: none; } :where(img, svg, video, canvas, audio, iframe, embed, object) { display: block; } :where(img, picture, svg, video) { max-inline-size: 100%; block-size: auto; } :where(p, h1, h2, h3, h4, h5, h6) { overflow-wrap: break-word; } :where(h1, h2, h3) { line-height: calc(1em + 0.5rem); text-wrap: balance; } :where(hr) { border: none; -webkit-border-before: 1px solid; border-block-start: 1px solid; color: inherit; block-size: 0; overflow: visible; } :where(:focus-visible) { outline: 3px solid Highlight; outline-offset: 2px; scroll-margin-block: 10vh; } :where(.visually-hidden:not(:focus-within, :active)) { -webkit-clip-path: inset(50%) !important; clip-path: inset(50%) !important; height: 1px !important; width: 1px !important; overflow: hidden !important; position: absolute !important; white-space: nowrap !important; border: 0 !important; } } @layer setup{ :root { /* Colors */ --neon: hsl(145 56% 57%); --yellow: hsl(50 93% 56%); --grey: hsl(214.51 7.24% 47.56%); --grey-light: hsl(173 7% 36% / 0.5); --grey-lightest: hsl(173 7% 93%); --color-bg: #fff; --color-bg-secondary: hsl(112 29.98% 97%); --color-text: hsl(0 0% 13%); --color-text-high-contrast: black; --color-text-detail: var(--grey); --link-color: hsl(201.43, 100%, 37.25%); --link-color-hover: hsl(201.43, 100%, 25.25%); --link-color-visited: hsl(266 100% 44%); --link-underline-color: hsl(201.43 43.1% 56.06% / 0.47); --border-color: var(--grey); --btn-color: hsl(213 100% 50%); --btn-color-hover: hsl(213 100% 41%); --btn-color-active: hsl(213 100% 33%); --btn-color-disabled: var(--grey); --focus-color: var(--link-color); --pre-background: var(--color-bg-secondary); --code-background: var(--color-bg-secondary); --code-color: hsl(112 30% 30%); --hr-color: var(--color-text); /* Typography */ --sans: system-ui, sans-serif; --mono: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace; --serif: 'Iowan Old Style', 'Palatino Linotype', 'URW Palladio L', P052, serif; --font-size-base: 18; --leading: 1.618; /* Rhythm unit */ --lineheight: calc(var(--leading) * 1rem); --tracking: -0.014em; --tracking-f0: -0.022em; --tracking-f1: -0.021em; --tracking-f2: -0.02em; --tracking-f3: -0.018em; --tracking-f4: -0.014em; --tracking-f5: -0.009em; --tracking-f6: -0.0025em; --f0: calc((72 / var(--font-size-base)) * 1rem); --f1: calc((36 / var(--font-size-base)) * 1rem); --f2: calc((30 / var(--font-size-base)) * 1rem); --f3: calc((26 / var(--font-size-base)) * 1rem); --f4: 1rem; --f5: calc((15 / var(--font-size-base)) * 1rem); --f6: calc((13 / var(--font-size-base)) * 1rem); --f7: calc((11 / var(--font-size-base)) * 1rem); /* Measures */ --inset: calc(var(--lineheight) / 2); --measure: 65ch; --measure-narrow: 45ch; --measure-wide: 100ch; --content-width: var(--measure); --spacing-base: var(--lineheight); --spacing-none: 0; --spacing-extra-small: calc(var(--spacing-base) / 5); --spacing-small: calc(var(--spacing-base) / 2); --spacing-medium: var(--spacing-base); --spacing-large: calc(var(--spacing-base) * 2); --spacing-extra-large: calc(var(--spacing-base) * 3); --spacing-extra-extra-large: calc(var(--spacing-base) * 4); --spacing-extra-extra-extra-large: calc(var(--spacing-base) * 6); } @supports (color: color(display-p3 1 1 1 / 1)) { :root { --link-color: color(display-p3 0 0.425 0.73); --link-color-hover: color(display-p3 0.01 0.295 0.495); --link-color-visited: color(display-p3 0.431 0.053 0.965); } } @media screen and (prefers-color-scheme: dark) { :root { --yellow: #c3a507; --grey: hsl(214.51, 6.64%, 61.44%); --grey-lightest: hsl(173 7% 17%); --color-bg: #1a1a1a; --color-bg-secondary: hsl(240 3.36% 14.51%); --color-text: hsl(0, 0%, 86%); --color-text-high-contrast: white; --link-color: hsl(201.43 94.7% 62.23%); --link-color-hover: hsl(201.43, 93.43%, 69.58%); --link-underline-color: hsl(201.43 57.86% 50.17% / 0.47); --link-color-visited: #7a8be5; --border-color: var(--color-text-detail); --code-color: hsl(112 80% 80%); } @supports (color: color(display-p3 1 1 1 / 1)) { :root { --link-color: color(display-p3 0.38 0.742 1); --link-color-hover: color(display-p3 0.577 0.82 0.995); } } } @media screen and (max-width: 980px) { :root { --inset: var(--lineheight); --font-size-base: 16; } } } @layer base{ /* =ELEMENTS --------------------------------------------- */ html { /* https://kilianvalkhof.com/2022/css-html/your-css-reset-needs-text-size-adjust-probably/ */ -moz-text-size-adjust: none; -webkit-text-size-adjust: none; text-size-adjust: none; } :where(body, html) { font: normal calc(var(--font-size-base) * 1px) / var(--leading) var(--serif); background-color: var(--color-bg); color: var(--color-text); } body { padding: var(--inset); line-height: var(--leading); letter-spacing: var(--tracking); font-feature-settings: /* Contextual alternates */ 'calt' 1, 'kern' 1, 'liga' 1; font-variant-ligatures: contextual common-ligatures; } @media screen and (prefers-color-scheme: dark) { body { word-spacing: 0.05em; } } @media screen and (min-width: 980px) { body { padding-top: calc(var(--inset) * 2); } } main { max-width: var(--content-width); margin-bottom: calc(var(--lineheight) * 3); } :target { scroll-margin-block: 5ex; } :focus-visible { outline: 2px solid black; box-shadow: 0 0 0 4px white; border-radius: .25em; } /* =HEADINGS --------------------------------------------- */ h1, h2, h3, h4, h5, h6 { -webkit-margin-after: 0; margin-block-end: 0; margin-bottom: calc(var(--lineheight) / 2); color: var(--color-text-high-contrast); } .f0, .title { font-size: clamp(var(--f1), 12vw, var(--f0)); letter-spacing: var(--tracking-f0); line-height: calc(var(--leading) * 0.75); } h1, .f1 { font-size: var(--f1); letter-spacing: var(--tracking-f1); } h2, .f2 { font-size: var(--f2); letter-spacing: var(--tracking-f2); } h3, .f3 { font-size: var(--f3); letter-spacing: var(--tracking-f3); } h4, .f4 { font-size: var(--f4); letter-spacing: var(--tracking-f4); } h5, .f5 { font-size: var(--f5); letter-spacing: var(--tracking-f5); } h6, .f6 { font-size: var(--f6); letter-spacing: var(--tracking-f6); } .f7 { font-size: var(--f7); } ul, ol { padding-left: 0; } nav ul { list-style: none; margin: 0; padding: 0; } a, .link { color: var(--link-color); position: relative; text-decoration: none; text-underline-offset: 3px; } :is(a,.link):not(.prose :is(a,.link)) { font-family: var(--sans); } .block:is(a,.link) { text-decoration: none; font-weight: unset; } :is(a,.link):hover, :is(a,.link):hover .link { color: var(--link-color-hover); text-decoration-color: currentColor; } :is(a,.link):not(.block):hover, :is(a,.link):hover .link { text-decoration: underline; } :is(a,.link):active { top: 1px; } .muted:is(a,.link) { text-decoration: none; } .muted:is(a,.link):hover { text-decoration: underline; } p, ul, ol, blockquote, table, figure, pre { margin: 0 0 var(--lineheight); } img { max-width: 100%; height: auto; } pre, code { font-family: var(--mono); } :not(pre)>code { background-color: var(--code-background); padding: 2px 4px; border-radius: 4px; color: var(--code-color); } figcaption { color: var(--grey); } table { --spacing: 0.25em; text-align: left; width: 100%; border-collapse: collapse; border-spacing: 0; } table.textual { --spacing: .6em; } table.textual th { text-transform: lowercase; font-weight: normal; font-size: var(--f4); font-variant: small-caps; } table.textual td { vertical-align: top; border-bottom: 1px solid var(--grey-lightest); } table.textual tr>td:first-of-type { font-weight: bold; width: 25%; } table.textual tr>td:nth-of-type(2) { width: 15%; } th { border-bottom: 2px solid var(--grey-light); padding: var(--spacing); font-weight: bold; font-size: var(--f5); position: sticky; top: 0; background-color: var(--color-bg); } td { padding: var(--spacing); } th:first-child, td:first-child { padding-left: 0; } pre { --tab-size: 2; --top-inset: calc(var(--lineheight) / 2); direction: ltr; text-align: left; line-height: var(--leading); white-space: pre; word-spacing: normal; word-break: normal; -webkit-hyphens: none; hyphens: none; -moz-tab-size: var(--tab-size); -o-tab-size: var(--tab-size); tab-size: var(--tab-size); background: var(--pre-background); color: var(--code-color); border-radius: 8px; padding: var(--top-inset) calc(var(--lineheight)); -webkit-font-smoothing: subpixel-antialiased; -moz-osx-font-smoothing: none; font-size: var(--f5); overflow: auto; position: relative; } @media screen and (max-width: 480px) { pre { padding-left: 0.25em; } } pre .line-highlight { --cycle: 27px; --color: 112 20% 50%; text-decoration: none; position: absolute; height: calc(var(--rows) * var(--cycle)); top: calc(var(--top-inset) + (var(--start) - 1) * var(--cycle)); background-color: hsl(var(--color) / 4%); color: hsl(var(--color) / 80%); left: 0; width: 100%; display: block; pointer-events: none; padding: 0 6px; font-size: var(--f7); } li>pre { margin-top: calc(var(--lineheight) / 2); margin-bottom: calc(var(--lineheight) / 2); } /* Syntax highlighting */ code[class*='language-'] { display: block; } blockquote { border-left: 2px solid var(--grey-light); margin: calc(var(--lineheight) * 2) 2rem calc(var(--lineheight) * 2) 0; padding-left: 1rem; padding-right: 1rem; color: var(--color-text-high-contrast); } blockquote>p { margin-bottom: calc(var(--lineheight) / 2); } blockquote footer { color: var(--grey); margin-top: var(--lineheight); } hr { border: 0; background-color: var(--hr-color); height: .7rem; aspect-ratio: 1 / 1; margin: calc(var(--lineheight) * 2) 0; border-radius: 100%; } textarea { padding: 0.5em; border: 1px solid var(--grey); border-radius: 0.4em; resize: vertical; } textarea:focus { outline: 0; border-color: var(--link-color); } } @layer utils{ .skip-link { position: fixed; top: var(--inset); left: var(--inset); } /* BUTTONS ----------------------------------------------------------------*/ .btn { -webkit-appearance: none; -moz-appearance: none; appearance: none; border: 0; background: none; text-decoration: none; color: var(--link-color); text-align: center; text-transform: lowercase; border-radius: 6px; font-weight: 500; box-shadow: currentColor 0 0 0 1px; padding: 0.3em 0.6em; white-space: nowrap; text-overflow: ellipsis; display: inline-block; overflow: hidden; max-width: 100%; } .btn:not([disabled]) { cursor: pointer; } .btn:hover { text-decoration: none; } .btn:hover { text-decoration: none; color: var(--link-color-hover); } .btn:active, .btn:active { color: var(--link-color-active); } .btn[disabled] { color: var(--btn-color-disabled); } /* OPEN TYPE ----------------------------------------------------------------*/ .plain-font-features { font-feature-settings: /* Contextual alternates */ 'calt' 1, 'kern' 1, 'liga' 1, /* Open digis */ 'ss01' 1, /* Curved 'r' */ 'ss03' 1, /* Disambiguation */ 'ss04' 0, 'frac' 1; } /* FONT STYLES ----------------------------------------------------------------*/ .i { font-style: italic; } /* FONT WEIGHTS ----------------------------------------------------------------*/ .normal { font-weight: normal; } .b { font-weight: bold; } .fw1 { font-weight: 100; } .fw2 { font-weight: 200; } .fw3 { font-weight: 300; } .fw4 { font-weight: 400; } .fw5 { font-weight: 500; } .fw6 { font-weight: 600; } .fw7 { font-weight: 700; } .fw8 { font-weight: 800; } .fw9 { font-weight: 900; } /* TEXT ALIGNMENT ----------------------------------------------------------------*/ .tl { text-align: left; } .tr { text-align: right; } .tc { text-align: center; } .tj { text-align: justify; } .w-full { width: 100%; } .block { display: block; } /* FLEXBOX ----------------------------------------------------------------*/ .flex { display: flex; } .inline-flex { display: inline-flex; } .gap-1 { gap: 0.5em; } .gap { gap: 1.5em; } /* 1. Fix for Chrome 44 bug. * https://code.google.com/p/chromium/issues/detail?id=506893 */ .flex-auto { flex: 1 1 auto; min-width: 0; /* 1 */ min-height: 0; /* 1 */ } .flex-1 { flex: 1; } .flex-none { flex: none; } .flex-column { flex-direction: column; } .flex-row { flex-direction: row; } .flex-wrap { flex-wrap: wrap; } .flex-nowrap { flex-wrap: nowrap; } .flex-wrap-reverse { flex-wrap: wrap-reverse; } .flex-column-reverse { flex-direction: column-reverse; } .flex-row-reverse { flex-direction: row-reverse; } .items-start { align-items: flex-start; } .items-end { align-items: flex-end; } .items-center { align-items: center; } .items-baseline { align-items: baseline; } .items-stretch { align-items: stretch; } .self-start { align-self: flex-start; } .self-end { align-self: flex-end; } .self-center { align-self: center; } .self-baseline { align-self: baseline; } .self-stretch { align-self: stretch; } .justify-start { justify-content: flex-start; } .justify-end { justify-content: flex-end; } .justify-center { justify-content: center; } .justify-between { justify-content: space-between; } .justify-around { justify-content: space-around; } .justify-evenly { justify-content: space-evenly; } .content-start { align-content: flex-start; } .content-end { align-content: flex-end; } .content-center { align-content: center; } .content-between { align-content: space-between; } .content-around { align-content: space-around; } .content-stretch { align-content: stretch; } /* SPACING ----------------------------------------------------------------*/ .pa0 { padding: var(--spacing-none); } .pa1 { padding: var(--spacing-extra-small); } .pa2 { padding: var(--spacing-small); } .pa3 { padding: var(--spacing-medium); } .pa4 { padding: var(--spacing-large); } .pa5 { padding: var(--spacing-extra-large); } .pa6 { padding: var(--spacing-extra-extra-large); } .pa7 { padding: var(--spacing-extra-extra-extra-large); } .pl0 { padding-left: var(--spacing-none); } .pl1 { padding-left: var(--spacing-extra-small); } .pl2 { padding-left: var(--spacing-small); } .pl3 { padding-left: var(--spacing-medium); } .pl4 { padding-left: var(--spacing-large); } .pl5 { padding-left: var(--spacing-extra-large); } .pl6 { padding-left: var(--spacing-extra-extra-large); } .pl7 { padding-left: var(--spacing-extra-extra-extra-large); } .pr0 { padding-right: var(--spacing-none); } .pr1 { padding-right: var(--spacing-extra-small); } .pr2 { padding-right: var(--spacing-small); } .pr3 { padding-right: var(--spacing-medium); } .pr4 { padding-right: var(--spacing-large); } .pr5 { padding-right: var(--spacing-extra-large); } .pr6 { padding-right: var(--spacing-extra-extra-large); } .pr7 { padding-right: var(--spacing-extra-extra-extra-large); } .pb0 { padding-bottom: var(--spacing-none); } .pb1 { padding-bottom: var(--spacing-extra-small); } .pb2 { padding-bottom: var(--spacing-small); } .pb3 { padding-bottom: var(--spacing-medium); } .pb4 { padding-bottom: var(--spacing-large); } .pb5 { padding-bottom: var(--spacing-extra-large); } .pb6 { padding-bottom: var(--spacing-extra-extra-large); } .pb7 { padding-bottom: var(--spacing-extra-extra-extra-large); } .pt0 { padding-top: var(--spacing-none); } .pt1 { padding-top: var(--spacing-extra-small); } .pt2 { padding-top: var(--spacing-small); } .pt3 { padding-top: var(--spacing-medium); } .pt4 { padding-top: var(--spacing-large); } .pt5 { padding-top: var(--spacing-extra-large); } .pt6 { padding-top: var(--spacing-extra-extra-large); } .pt7 { padding-top: var(--spacing-extra-extra-extra-large); } .pv0 { padding-top: var(--spacing-none); padding-bottom: var(--spacing-none); } .pv1 { padding-top: var(--spacing-extra-small); padding-bottom: var(--spacing-extra-small); } .pv2 { padding-top: var(--spacing-small); padding-bottom: var(--spacing-small); } .pv3 { padding-top: var(--spacing-medium); padding-bottom: var(--spacing-medium); } .pv4 { padding-top: var(--spacing-large); padding-bottom: var(--spacing-large); } .pv5 { padding-top: var(--spacing-extra-large); padding-bottom: var(--spacing-extra-large); } .pv6 { padding-top: var(--spacing-extra-extra-large); padding-bottom: var(--spacing-extra-extra-large); } .pv7 { padding-top: var(--spacing-extra-extra-extra-large); padding-bottom: var(--spacing-extra-extra-extra-large); } .ph0 { padding-left: var(--spacing-none); padding-right: var(--spacing-none); } .ph1 { padding-left: var(--spacing-extra-small); padding-right: var(--spacing-extra-small); } .ph2 { padding-left: var(--spacing-small); padding-right: var(--spacing-small); } .ph3 { padding-left: var(--spacing-medium); padding-right: var(--spacing-medium); } .ph4 { padding-left: var(--spacing-large); padding-right: var(--spacing-large); } .ph5 { padding-left: var(--spacing-extra-large); padding-right: var(--spacing-extra-large); } .ph6 { padding-left: var(--spacing-extra-extra-large); padding-right: var(--spacing-extra-extra-large); } .ph7 { padding-left: var(--spacing-extra-extra-extra-large); padding-right: var(--spacing-extra-extra-extra-large); } .ma0 { margin: var(--spacing-none); } .ma1 { margin: var(--spacing-extra-small); } .ma2 { margin: var(--spacing-small); } .ma3 { margin: var(--spacing-medium); } .ma4 { margin: var(--spacing-large); } .ma5 { margin: var(--spacing-extra-large); } .ma6 { margin: var(--spacing-extra-extra-large); } .ma7 { margin: var(--spacing-extra-extra-extra-large); } .ml0 { margin-left: var(--spacing-none); } .ml1 { margin-left: var(--spacing-extra-small); } .ml2 { margin-left: var(--spacing-small); } .ml3 { margin-left: var(--spacing-medium); } .ml4 { margin-left: var(--spacing-large); } .ml5 { margin-left: var(--spacing-extra-large); } .ml6 { margin-left: var(--spacing-extra-extra-large); } .ml7 { margin-left: var(--spacing-extra-extra-extra-large); } .mx-auto { margin-left: auto; margin-right: auto; } .mx1 { margin-right: var(--spacing-extra-small); margin-left: var(--spacing-extra-small); } .mr0 { margin-right: var(--spacing-none); } .mr1 { margin-right: var(--spacing-extra-small); } .mr2 { margin-right: var(--spacing-small); } .mr3 { margin-right: var(--spacing-medium); } .mr4 { margin-right: var(--spacing-large); } .mr5 { margin-right: var(--spacing-extra-large); } .mr6 { margin-right: var(--spacing-extra-extra-large); } .mr7 { margin-right: var(--spacing-extra-extra-extra-large); } .mb0 { margin-bottom: var(--spacing-none); } .mb1 { margin-bottom: var(--spacing-extra-small); } .mb2 { margin-bottom: var(--spacing-small); } .mb3 { margin-bottom: var(--spacing-medium); } .mb4 { margin-bottom: var(--spacing-large); } .mb5 { margin-bottom: var(--spacing-extra-large); } .mb6 { margin-bottom: var(--spacing-extra-extra-large); } .mb7 { margin-bottom: var(--spacing-extra-extra-extra-large); } .mt0 { margin-top: var(--spacing-none); } .mt1 { margin-top: var(--spacing-extra-small); } .mt2 { margin-top: var(--spacing-small); } .mt3 { margin-top: var(--spacing-medium); } .mt4 { margin-top: var(--spacing-large); } .mt5 { margin-top: var(--spacing-extra-large); } .mt6 { margin-top: var(--spacing-extra-extra-large); } .mt7 { margin-top: var(--spacing-extra-extra-extra-large); } .mv0 { margin-top: var(--spacing-none); margin-bottom: var(--spacing-none); } .mv1 { margin-top: var(--spacing-extra-small); margin-bottom: var(--spacing-extra-small); } .mv2 { margin-top: var(--spacing-small); margin-bottom: var(--spacing-small); } .mv3 { margin-top: var(--spacing-medium); margin-bottom: var(--spacing-medium); } .mv4 { margin-top: var(--spacing-large); margin-bottom: var(--spacing-large); } .mv5 { margin-top: var(--spacing-extra-large); margin-bottom: var(--spacing-extra-large); } .mv6 { margin-top: var(--spacing-extra-extra-large); margin-bottom: var(--spacing-extra-extra-large); } .mv7 { margin-top: var(--spacing-extra-extra-extra-large); margin-bottom: var(--spacing-extra-extra-extra-large); } .mh0 { margin-left: var(--spacing-none); margin-right: var(--spacing-none); } .mh1 { margin-left: var(--spacing-extra-small); margin-right: var(--spacing-extra-small); } .mh2 { margin-left: var(--spacing-small); margin-right: var(--spacing-small); } .mh3 { margin-left: var(--spacing-medium); margin-right: var(--spacing-medium); } .mh4 { margin-left: var(--spacing-large); margin-right: var(--spacing-large); } .mh5 { margin-left: var(--spacing-extra-large); margin-right: var(--spacing-extra-large); } .mh6 { margin-left: var(--spacing-extra-extra-large); margin-right: var(--spacing-extra-extra-large); } .mh7 { margin-left: var(--spacing-extra-extra-extra-large); margin-right: var(--spacing-extra-extra-extra-large); } /* DISPLAY ----------------------------------------------------------------*/ .d-i { display: inline; } .d-ib { display: inline-block; } .d-b { display: block; } /* BORDERS ----------------------------------------------------------------*/ .border { border: 1px solid var(--border-color); } .border-b { border-left-width: 0; border-right-width: 0; border-bottom-width: 1px; } .border-t { border-left-width: 0; border-right-width: 0; border-top-width: 1px; } .border-b { border-left-width: 0; border-right-width: 0; border-top-width: 0; border-bottom-width: 1px; } /* COLOURS ----------------------------------------------------------------*/ .text-bg { color: var(--color-bg); } .comp-neon { color: var(--neon); } .comp-yellow { color: var(--yellow); } .bg-comp-neon { background-color: var(--neon); } .bg-yellow { background-color: var(--yellow); } .text-color { color: var(--color-text); } .muted { color: var(--color-text-detail); } /* OPACITY ----------------------------------------------------------------*/ .dimmed { opacity: 0.7; } /* TYPOGRAPHY ----------------------------------------------------------------*/ .leading-tight { line-height: 1.2; } .font-mono { font-family: var(--mono); } .font-sans { font-family: var(--sans); } .font-serif { font-family: var(--serif); } .text-balance { text-wrap: balance; } /* Measure is limited to ~78 characters */ .measure { max-width: var(--measure); } /* Measure is limited to ~80 characters */ .measure-wide { max-width: var(--measure-wide); } /* Measure is limited to ~45 characters */ .measure-narrow { max-width: var(--measure-narrow); } .uppercase { text-transform: uppercase; } .tracking { letter-spacing: 1px; } .rounded-small { border-radius: .25em; } .no-underline { text-decoration: none; } .no-underline:hover { text-decoration: underline; } .badge { font-size: var(--f7); text-transform: lowercase; border-radius: 4px; font-weight: 500; background-color: var(--neon); color: var(--color-bg); padding: 0.4em 0.8em; } .badge:hover { text-decoration: none; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0; } } @layer utils{ @media screen and (max-width: 980px) { .sr-only-mobile { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0; } } } @layer utils{ @media screen and (min-width: 981px) { .only-mobile { display: none; } } } @layer utils{ .sep { color: var(--color-text-detail); display: inline-block; margin: 0 0.5em; } .no-wrap { white-space: nowrap; } .checkbox-fix { position: relative; top: -1px; } .truncate { white-space: nowrap; text-overflow: ellipsis; display: inline-block; overflow: hidden; max-width: 100%; } .icon { fill: currentColor; width: 1em; height: auto; aspect-ratio: 1 / 1; vertical-align: middle; display: inline-block; font-size: .9em; } a:hover .icon-feed { color: var(--yellow); } .drop-cap::first-letter { font-size: 3.2rem; font-weight: bold; float: left; margin-right: 0.1em; line-height: 1; } } @layer base{ /* FOOTER ----------------------------------------------------------------*/ [role='contentinfo']::before { content: ''; background: url('data:image/svg+xml;utf8,') no-repeat; display: block; color: var(--hr-color); font-size: 8rem; height: 0.7rem; line-height: 1; aspect-ratio: 1 / 1; margin: calc(var(--lineheight) * 2) 0; } [role='contentinfo'] nav ul { line-height: 2; } [role='contentinfo'] nav a { white-space: nowrap; } [role='contentinfo'] nav li[aria-current="page"] a { color: var(--grey); cursor: default; text-decoration: none; } @media screen and (min-width: 58rem) { [role='contentinfo'] { font-size: var(--f5); } [role='contentinfo'] nav ul { display: flex; } [role='contentinfo'] nav ul li:not(:last-child)::after { content: ' / '; display: inline-block; margin: 0 .75em; color: var(--color-text-detail); transform: scaleY(1.2); opacity: .7; } } } @layer base{ .Content { max-width: var(--content-width); margin: 0 auto; display: flex; flex-direction: column-reverse; } .Content.wide { --content-width: var(--measure-wide); } @media screen and (min-width: 981px) { html:not(.admin) .Content { max-width: none; display: grid; place-content: center; grid-template-columns: var(--content-width) auto; gap: var(--spacing-extra-large); } } } @layer views{ #app[data-state] .pane { display: none; } #app[data-state='INITED'] #INITED { display: block; } #app[data-state='sign-in'] #sign-in { display: block; } #app[data-state='START'] #START { display: block; } } @layer views{ /* =CHANGELOG --------------------------------------------- */ .changelog .prose>ul { padding-left: 0; margin-bottom: var(--lineheight); } .changelog .prose>ul ul { margin-bottom: 0; } } @layer components{ .NotesList article { scroll-margin: var(--lineheight); } .NotesList article header .target:hover span { color: var(--neon); } .NotesList article:target .target { color: var(--neon); } .NotesList header h1 a { color: var(--color-text-high-contrast); } .NotesList>li:not(:last-child) { margin-bottom: calc(var(--lineheight) * 4); } .NotesList>li:has(:target)::after { border-color: var(--neon); } } @layer components{ .NavCommon a { color: var(--color-text); white-space: nowrap; text-decoration: none; } .NavCommon a:hover { color: var(--link-color-hover); text-decoration: underline; } .MainNav { position: relative; z-index: 2; } .MainNav .sticky { position: sticky; top: 0; } .MainNav h1>a { font-weight: 500; color: var(--color-text); white-space: nowrap; text-decoration: none; } .MainNav a:is(:hover, :focus-visible) { outline: 0; color: var(--link-color-hover); text-decoration: underline; } .MainNav ul a { font-weight: normal; position: revert; } .MainNav ul a:not([aria-current='page'] > :is(.MainNav ul a)):not(.MainNav ul a:hover):not(.MainNav ul a:focus-visible) { opacity: .8; } :where([aria-current='page'] :is(.MainNav ul a),.MainNav ul a:focus) { outline: 0; } :where([aria-current='page'] :is(.MainNav ul a),.MainNav ul a:focus)::after { content: '⇠'; display: inline; margin-left: .5em; white-space: nowrap; } .MainNav ul [aria-current='page'] { position: relative; } .MainNav ul [aria-current='page'] a { font-weight: 700; } .MainNav h1 { --offset-top: 18px; line-height: calc(var(--lineheight) * 3); margin-bottom: -4px; padding-top: var(--offset-top); } @media screen and (max-width: 980px) { .MainNav { width: calc(100% + var(--inset) * 2); margin: calc(var(--inset) * -1); padding: calc(var(--lineheight) / 2) calc(var(--inset) * 1); margin-bottom: calc(var(--lineheight) / 2 - 1px); position: sticky; inset: 0; overflow-x: auto; background-color: var(--color-bg); font-size: var(--f5); } .MainNav h1 { position: absolute; left: -9999em; } .MainNav ul { display: flex; margin: 0; flex-direction: row; gap: 1em; } .MainNav [aria-current='page'] a::after, .MainNav a:focus::after { display: none; } } .BackLink { text-decoration: none; color: var(--color-text); background-color: var(--grey-lightest); width: 1.6em; text-align: center; line-height: 1.6em; aspect-ratio: 1/1; display: inline-block; border-radius: 4em; opacity: .8; } a:is(:hover, :focus)>.BackLink { opacity: 1; } } @layer components{ .PageNav { text-align: center; } .PageNav a { color: var(--grey); display: inline-block; padding: 0.3em 0.5em; text-decoration: none; } .PageNav a:hover { color: var(--link-color); text-decoration: underline; } .PageNav .separator { color: var(--color-text); font-weight: 500; letter-spacing: -1px; font-size: 1.2em; margin: 0 3px; } } @layer components{ /* POSTS LIST ----------------------------------------------------------------*/ .PostItem { display: flex; align-items: center; justify-content: space-between; } .PostItem:last-child { border-bottom: 0; } .PostItem time { font-size: var(--f5); font-variant-numeric: tabular-nums; letter-spacing: var(--tracking-f0); } .PostItem time:not(.PostItem:hover :is(.PostItem time)) { color: var(--color-text-detail); } .PostItem .PostItem__Link { display: block; padding: calc(var(--lineheight) / 3) 0; flex: 1; } .PostItem .PostItem__Link:visited { color: var(--link-color-visited); text-decoration-color: var(--link-color-visited); } @media screen and (max-width: 480px) { .PostItem { align-items: flex-start; flex-direction: column; margin-bottom: calc(var(--lineheight) / 3); } .PostItem .PostItem__Link { max-width: 90%; font-size: 1em; } } .PostsList { list-style: none; } .PostsList .PostsList--Tight .PostItem { border: 1px solid var(--grey-light); border-width: 0 0 1px; margin: 0; } @media screen and (prefers-color-scheme: dark) { .PostsList .PostsList--Tight .PostItem { border: 0; } } } @layer utils{ /* From https://css-tricks.com/the-cleanest-trick-for-autogrowing-textareas/ */ .grow-wrap { /* easy way to plop the elements on top of each other and have them both sized based on the tallest one's height */ display: grid; } .grow-wrap::after { /* Note the weird space! Needed to preventy jumpy behavior */ content: attr(data-replicated-value) ' '; /* This is how textarea text behaves */ white-space: pre-wrap; /* Hidden from view, clicks, and screen readers */ visibility: hidden; } .grow-wrap>textarea { /* You could leave this, but after a user resizes, then it ruins the auto sizing */ resize: none; /* Firefox shows scrollbar on growth, you can hide like this. */ overflow: hidden; } .grow-wrap>textarea, .grow-wrap::after { /* Identical styling required!! */ border-width: 1px; padding: 0.5em; font: inherit; /* Place on top of each other */ grid-area: 1 / 1 / 2 / 2; } } @layer components{ /* PROSE ----------------------------------------------------------------*/ .prose { --link-color: var(--color-text); } .prose> :last-child { margin-bottom: 0; } .prose a:not([class]) { text-decoration: underline; -webkit-text-decoration-skip: ink; text-decoration-skip-ink: auto; } .prose img, .prose iframe, .prose figure, .prose svg { --side-margin: calc(var(--lineheight) * 2); margin: var(--side-margin) auto; display: block; } @media screen and (max-width: 480px) { .prose img, .prose iframe, .prose figure, .prose svg { --side-margin: var(--lineheight); } } @media screen and (prefers-color-scheme: dark) { .prose img { opacity: 0.9; box-shadow: rgba(0, 0, 0, 0.3) 0 0 6px; } } .prose ul, .prose ol { padding-left: 1em; margin-left: 1rem; } .prose ul:where(ul), .prose ol:where(ul) { list-style-type: disc; } .prose ul:where(ul) ::marker, .prose ol:where(ul) ::marker { font-size: 1.2em; } .prose ul:where(ol), .prose ol:where(ol) { list-style-type: decimal; } .prose ul ::marker, .prose ol ::marker { color: var(--color-text-detail); } .prose ul li>ul, .prose ol li>ul, .prose ul li>ol, .prose ol li>ol { padding-left: 1.5rem; margin-bottom: 0; } .prose figcaption { padding: 1rem 0; text-align: center; font-family: var(--sans); font-size: 0.9em; } /* Break links and code */ .prose code:not(pre > code), .prose a { word-break: break-word; word-wrap: break-word; overflow-wrap: break-word; } .prose figure.image--full { margin: calc(var(--lineheight) * 2) -14vw; } .prose figure.image--full img { display: block; margin: 0 auto; } @media screen and (max-width: 960px) { .prose figure.image--full { /* Edge-to-edge pixelfucking. */ margin-left: auto; margin-right: auto; } } } @layer base{ /* Matrix theme in light and dark versions by Johan. */ code[class*='language-'], pre[class*='language-'] { color: hsl(112 30% 30%); background-color: hsl(112 29.98% 97%); } @media (prefers-color-scheme: dark) { code[class*='language-'], pre[class*='language-'] { color: hsl(112, 70%, 80%); background-color: hsl(112, 1.27%, 13.33%); } } .token { --hue: 112; --sat: 40%; --lit: 25%; --alpha: 1; --base: hsl(var(--hue) var(--sat) var(--lit) / var(--alpha)); color: var(--base); } .token.comment, .token.prolog, .token.doctype, .token.cdata { --alpha: 80%; } .token.punctuation { --lit: 50%; --sat: 20%; } .namespace { opacity: 0.7; } .token.property, .token.tag, .token.constant, .token.symbol, .token.deleted { --lit: 35%; --sat: 30%; } .token.number, .token.boolean { --lit: 20%; --sat: 70%; } .token.selector, .token.attr-name, .token.char, .token.builtin, .token.inserted { font-weight: bold; } .token.selector, .token.builtin { background-color: hsla(112, 42.86%, 46.9%, 0.15); } .token.operator, .token.entity, .token.url, .language-css .token.string, .style .token.string, .token.variable { --lit: 60%; --sat: 20%; } .token.atrule, .token.attr-value, .token.function, .token.class-name { --sat: 50%; --lit: 25%; font-weight: bold; } .token.keyword, .token.rule { --sat: 20%; --lit: 50%; } .token.regex, .token.important { --hue: 40; --sat: 80%; --lit: 70%; } } @layer base{ @media (prefers-color-scheme: dark) { .token { --hue: 112.08; --sat: 49.53%; --lit: 58.04%; --alpha: 1; --base: hsl(var(--hue) var(--sat) var(--lit) / var(--alpha)); color: var(--base); } .token.comment, .token.prolog, .token.doctype, .token.cdata { --sat: 10%; } .token.punctuation { --lit: 40%; --sat: 20%; } .namespace { opacity: 0.7; } .token.property, .token.tag, .token.constant, .token.symbol, .token.deleted { --lit: 80%; --sat: 100%; } .token.number, .token.boolean { --lit: 80%; } .token.selector, .token.attr-name, .token.string, .token.char, .token.builtin, .token.inserted { --lit: 70%; } .token.selector, .token.builtin { background-color: hsla(112, 42.86%, 46.9%, 0.08); } .token.operator, .token.entity, .token.url, .language-css .token.string, .style .token.string, .token.variable { --lit: 80%; --sat: 60%; } .token.atrule, .token.attr-value, .token.function, .token.class-name { --sat: 31%; --lit: 75%; } .token.keyword, .token.rule { --sat: 20%; --lit: 60%; } .token.regex, .token.important { --hue: 40; --sat: 80%; --lit: 70%; } } } @layer base{ .token.important, .token.bold, .token.rule { font-weight: bold; } .token.italic { font-style: italic; } .token.entity { cursor: help; } } @layer utils{ /* Small caps */ .small-caps { font-family: 'Charter SC', serif; font-variant: small-caps; } /* Double quotation marks (") */ .pull-double { margin-left: -.46em } .push-double { margin-right: .46em } /* Single quotation marks (') */ .pull-single { margin-left: -.27em } .push-single { margin-right: .27em } .pull-double, .push-double, .pull-single, .push-single { display: inline-block } /* Optical margin alignment for particular letters */ .pull-T, .pull-V, .pull-W, .pull-Y { margin-left: -0.1em; } .push-T, .push-V, .push-W, .push-Y { margin-right: 0.1em; } .pull-O, .pull-C, .pull-o, .pull-c { margin-left: -0.04em; } .push-O, .push-C, .push-o, .push-c { margin-right: 0.04em; } .pull-A { margin-left: -0.03em; } .push-A { margin-right: 0.03em; } } /*# sourceMappingURL=./johan.css.map */ \ No newline at end of file +/* Styles for Johan Brook.com Built for IE6, made in Dreamweaver. Just kidding. --------------------------------------------- */ @layer setup, base, views, components, utils; @layer setup{ /* https://github.com/mayank99/reset.css/blob/main/package/index.css@0.7.0 */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } :where([hidden]:not([hidden='until-found'])) { display: none !important; } :where(html) { -webkit-text-size-adjust: none; color-scheme: dark light; } } @layer setup{ @media (prefers-reduced-motion: no-preference) { :where(html:focus-within) { scroll-behavior: smooth; } } } @layer setup{ :where(body) { line-height: 1.5; font-family: system-ui, sans-serif; -webkit-font-smoothing: antialiased; } :where(input, button, textarea, select) { font: inherit; color: inherit; } :where(textarea) { resize: vertical; resize: block; } :where(button, label, select, summary, [role='button'], [role='option']) { cursor: pointer; } :where(:disabled) { cursor: not-allowed; } :where(label:has(> input:disabled), label:has(+ input:disabled)) { cursor: not-allowed; } :where(button) { border-style: solid; } :where(a) { color: inherit; text-underline-offset: 0.2ex; } :where(ul, ol) { list-style: none; } :where(img, svg, video, canvas, audio, iframe, embed, object) { display: block; } :where(img, picture, svg, video) { max-inline-size: 100%; block-size: auto; } :where(p, h1, h2, h3, h4, h5, h6) { overflow-wrap: break-word; } :where(h1, h2, h3) { line-height: calc(1em + 0.5rem); text-wrap: balance; } :where(hr) { border: none; -webkit-border-before: 1px solid; border-block-start: 1px solid; color: inherit; block-size: 0; overflow: visible; } :where(:focus-visible) { outline: 3px solid Highlight; outline-offset: 2px; scroll-margin-block: 10vh; } :where(.visually-hidden:not(:focus-within, :active)) { -webkit-clip-path: inset(50%) !important; clip-path: inset(50%) !important; height: 1px !important; width: 1px !important; overflow: hidden !important; position: absolute !important; white-space: nowrap !important; border: 0 !important; } } @layer setup{ :root { /* Colors */ --neon: hsl(145 56% 57%); --yellow: hsl(50 93% 56%); --grey: hsl(214.51 7.24% 47.56%); --grey-light: hsl(173 7% 36% / 0.5); --grey-lightest: hsl(173 7% 93%); --color-bg: #fff; --color-bg-secondary: hsl(112 29.98% 97%); --color-text: hsl(0 0% 13%); --color-text-high-contrast: black; --color-text-detail: var(--grey); --link-color: hsl(201.43, 100%, 37.25%); --link-color-hover: hsl(201.43, 100%, 25.25%); --link-color-visited: hsl(266 100% 44%); --link-underline-color: hsl(201.43 43.1% 56.06% / 0.47); --border-color: var(--grey); --btn-color: hsl(213 100% 50%); --btn-color-hover: hsl(213 100% 41%); --btn-color-active: hsl(213 100% 33%); --btn-color-disabled: var(--grey); --focus-color: var(--link-color); --pre-background: var(--color-bg-secondary); --code-background: var(--color-bg-secondary); --code-color: hsl(112 30% 30%); --hr-color: var(--color-text); /* Typography */ --sans: system-ui, sans-serif; --mono: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace; --serif: 'Iowan Old Style', 'Palatino Linotype', 'URW Palladio L', P052, serif; --font-size-base: 18; --leading: 1.618; /* Rhythm unit */ --lineheight: calc(var(--leading) * 1rem); --tracking: -0.014em; --tracking-f0: -0.022em; --tracking-f1: -0.021em; --tracking-f2: -0.02em; --tracking-f3: -0.018em; --tracking-f4: -0.014em; --tracking-f5: -0.009em; --tracking-f6: -0.0025em; --f0: calc((72 / var(--font-size-base)) * 1rem); --f1: calc((36 / var(--font-size-base)) * 1rem); --f2: calc((30 / var(--font-size-base)) * 1rem); --f3: calc((26 / var(--font-size-base)) * 1rem); --f4: 1rem; --f5: calc((15 / var(--font-size-base)) * 1rem); --f6: calc((13 / var(--font-size-base)) * 1rem); --f7: calc((11 / var(--font-size-base)) * 1rem); /* Measures */ --inset: calc(var(--lineheight) / 2); --measure: 65ch; --measure-narrow: 45ch; --measure-wide: 100ch; --content-width: var(--measure); --spacing-base: var(--lineheight); --spacing-none: 0; --spacing-extra-small: calc(var(--spacing-base) / 5); --spacing-small: calc(var(--spacing-base) / 2); --spacing-medium: var(--spacing-base); --spacing-large: calc(var(--spacing-base) * 2); --spacing-extra-large: calc(var(--spacing-base) * 3); --spacing-extra-extra-large: calc(var(--spacing-base) * 4); --spacing-extra-extra-extra-large: calc(var(--spacing-base) * 6); } @supports (color: color(display-p3 1 1 1 / 1)) { :root { --link-color: color(display-p3 0 0.425 0.73); --link-color-hover: color(display-p3 0.01 0.295 0.495); --link-color-visited: color(display-p3 0.431 0.053 0.965); } } @media screen and (prefers-color-scheme: dark) { :root { --yellow: #c3a507; --grey: hsl(214.51, 6.64%, 61.44%); --grey-lightest: hsl(173 7% 17%); --color-bg: #1a1a1a; --color-bg-secondary: hsl(240 3.36% 14.51%); --color-text: hsl(0, 0%, 86%); --color-text-high-contrast: white; --link-color: hsl(201.43 94.7% 62.23%); --link-color-hover: hsl(201.43, 93.43%, 69.58%); --link-underline-color: hsl(201.43 57.86% 50.17% / 0.47); --link-color-visited: #7a8be5; --border-color: var(--color-text-detail); --code-color: hsl(112 80% 80%); } @supports (color: color(display-p3 1 1 1 / 1)) { :root { --link-color: color(display-p3 0.38 0.742 1); --link-color-hover: color(display-p3 0.577 0.82 0.995); } } } @media screen and (max-width: 980px) { :root { --inset: var(--lineheight); --font-size-base: 16; } } } @layer base{ /* =ELEMENTS --------------------------------------------- */ html { /* https://kilianvalkhof.com/2022/css-html/your-css-reset-needs-text-size-adjust-probably/ */ -moz-text-size-adjust: none; -webkit-text-size-adjust: none; text-size-adjust: none; } :where(body, html) { font: normal calc(var(--font-size-base) * 1px) / var(--leading) var(--serif); background-color: var(--color-bg); color: var(--color-text); } body { padding: var(--inset); line-height: var(--leading); letter-spacing: var(--tracking); font-feature-settings: /* Contextual alternates */ 'calt' 1, 'kern' 1, 'liga' 1; font-variant-ligatures: contextual common-ligatures; } @media screen and (prefers-color-scheme: dark) { body { word-spacing: 0.05em; } } @media screen and (min-width: 980px) { body { padding-top: calc(var(--inset) * 2); } } main { max-width: var(--content-width); margin-bottom: calc(var(--lineheight) * 3); } :target { scroll-margin-block: 5ex; } :focus-visible { outline: 2px solid black; box-shadow: 0 0 0 4px white; border-radius: .25em; } /* =HEADINGS --------------------------------------------- */ h1, h2, h3, h4, h5, h6 { -webkit-margin-after: 0; margin-block-end: 0; margin-bottom: calc(var(--lineheight) / 2); color: var(--color-text-high-contrast); } .f0, .title { font-size: clamp(var(--f1), 12vw, var(--f0)); letter-spacing: var(--tracking-f0); line-height: calc(var(--leading) * 0.75); } h1, .f1 { font-size: var(--f1); letter-spacing: var(--tracking-f1); } h2, .f2 { font-size: var(--f2); letter-spacing: var(--tracking-f2); } h3, .f3 { font-size: var(--f3); letter-spacing: var(--tracking-f3); } h4, .f4 { font-size: var(--f4); letter-spacing: var(--tracking-f4); } h5, .f5 { font-size: var(--f5); letter-spacing: var(--tracking-f5); } h6, .f6 { font-size: var(--f6); letter-spacing: var(--tracking-f6); } .f7 { font-size: var(--f7); } ul, ol { padding-left: 0; } nav ul { list-style: none; margin: 0; padding: 0; } a, .link { color: var(--link-color); position: relative; text-decoration: none; text-underline-offset: 3px; } :is(a,.link):not(.prose :is(a,.link)) { font-family: var(--sans); } .block:is(a,.link) { text-decoration: none; font-weight: unset; } :is(a,.link):hover, :is(a,.link):hover .link { color: var(--link-color-hover); text-decoration-color: currentColor; } :is(a,.link):not(.block):hover, :is(a,.link):hover .link { text-decoration: underline; } :is(a,.link):active { top: 1px; } .muted:is(a,.link) { text-decoration: none; } .muted:is(a,.link):hover { text-decoration: underline; } p, ul, ol, blockquote, table, figure, pre { margin: 0 0 var(--lineheight); } img { max-width: 100%; height: auto; } pre, code { font-family: var(--mono); } :not(pre)>code { background-color: var(--code-background); padding: 2px 4px; border-radius: 4px; font-size: .9rem; } figcaption { color: var(--grey); } table { --spacing: 0.25em; text-align: left; width: 100%; border-collapse: collapse; border-spacing: 0; } table.textual { --spacing: .6em; } table.textual th { text-transform: lowercase; font-weight: normal; font-size: var(--f4); font-variant: small-caps; } table.textual td { vertical-align: top; border-bottom: 1px solid var(--grey-lightest); } table.textual tr>td:first-of-type { font-weight: bold; width: 25%; } table.textual tr>td:nth-of-type(2) { width: 15%; } th { border-bottom: 2px solid var(--grey-light); padding: var(--spacing); font-weight: bold; font-size: var(--f5); position: sticky; top: 0; background-color: var(--color-bg); } td { padding: var(--spacing); } th:first-child, td:first-child { padding-left: 0; } pre { --tab-size: 2; --top-inset: calc(var(--lineheight) / 2); direction: ltr; text-align: left; line-height: var(--leading); white-space: pre; word-spacing: normal; word-break: normal; -webkit-hyphens: none; hyphens: none; -moz-tab-size: var(--tab-size); -o-tab-size: var(--tab-size); tab-size: var(--tab-size); background: var(--pre-background); color: var(--code-color); border-radius: 8px; padding: var(--top-inset) calc(var(--lineheight)); -webkit-font-smoothing: subpixel-antialiased; -moz-osx-font-smoothing: none; font-size: var(--f5); overflow: auto; position: relative; } @media screen and (max-width: 480px) { pre { padding-left: 0.25em; } } pre .line-highlight { --cycle: 27px; --color: 112 20% 50%; text-decoration: none; position: absolute; height: calc(var(--rows) * var(--cycle)); top: calc(var(--top-inset) + (var(--start) - 1) * var(--cycle)); background-color: hsl(var(--color) / 4%); color: hsl(var(--color) / 80%); left: 0; width: 100%; display: block; pointer-events: none; padding: 0 6px; font-size: var(--f7); } li>pre { margin-top: calc(var(--lineheight) / 2); margin-bottom: calc(var(--lineheight) / 2); } /* Syntax highlighting */ code[class*='language-'] { display: block; } blockquote { border-left: 2px solid var(--grey-light); margin: calc(var(--lineheight) * 2) 2rem calc(var(--lineheight) * 2) 0; padding-left: 1rem; padding-right: 1rem; color: var(--color-text-high-contrast); } blockquote>p { margin-bottom: calc(var(--lineheight) / 2); } blockquote footer { color: var(--grey); margin-top: var(--lineheight); } hr { border: 0; background-color: var(--hr-color); height: .7rem; aspect-ratio: 1 / 1; margin: calc(var(--lineheight) * 2) 0; border-radius: 100%; } textarea { padding: 0.5em; border: 1px solid var(--grey); border-radius: 0.4em; resize: vertical; } textarea:focus { outline: 0; border-color: var(--link-color); } } @layer utils{ .skip-link { position: fixed; top: var(--inset); left: var(--inset); } /* BUTTONS ----------------------------------------------------------------*/ .btn { -webkit-appearance: none; -moz-appearance: none; appearance: none; border: 0; background: none; text-decoration: none; color: var(--link-color); text-align: center; text-transform: lowercase; border-radius: 6px; font-weight: 500; box-shadow: currentColor 0 0 0 1px; padding: 0.3em 0.6em; white-space: nowrap; text-overflow: ellipsis; display: inline-block; overflow: hidden; max-width: 100%; } .btn:not([disabled]) { cursor: pointer; } .btn:hover { text-decoration: none; } .btn:hover { text-decoration: none; color: var(--link-color-hover); } .btn:active, .btn:active { color: var(--link-color-active); } .btn[disabled] { color: var(--btn-color-disabled); } /* OPEN TYPE ----------------------------------------------------------------*/ .plain-font-features { font-feature-settings: /* Contextual alternates */ 'calt' 1, 'kern' 1, 'liga' 1, /* Open digis */ 'ss01' 1, /* Curved 'r' */ 'ss03' 1, /* Disambiguation */ 'ss04' 0, 'frac' 1; } /* FONT STYLES ----------------------------------------------------------------*/ .i { font-style: italic; } /* FONT WEIGHTS ----------------------------------------------------------------*/ .normal { font-weight: normal; } .b { font-weight: bold; } .fw1 { font-weight: 100; } .fw2 { font-weight: 200; } .fw3 { font-weight: 300; } .fw4 { font-weight: 400; } .fw5 { font-weight: 500; } .fw6 { font-weight: 600; } .fw7 { font-weight: 700; } .fw8 { font-weight: 800; } .fw9 { font-weight: 900; } /* TEXT ALIGNMENT ----------------------------------------------------------------*/ .tl { text-align: left; } .tr { text-align: right; } .tc { text-align: center; } .tj { text-align: justify; } .w-full { width: 100%; } .block { display: block; } /* FLEXBOX ----------------------------------------------------------------*/ .flex { display: flex; } .inline-flex { display: inline-flex; } .gap-1 { gap: 0.5em; } .gap { gap: 1.5em; } /* 1. Fix for Chrome 44 bug. * https://code.google.com/p/chromium/issues/detail?id=506893 */ .flex-auto { flex: 1 1 auto; min-width: 0; /* 1 */ min-height: 0; /* 1 */ } .flex-1 { flex: 1; } .flex-none { flex: none; } .flex-column { flex-direction: column; } .flex-row { flex-direction: row; } .flex-wrap { flex-wrap: wrap; } .flex-nowrap { flex-wrap: nowrap; } .flex-wrap-reverse { flex-wrap: wrap-reverse; } .flex-column-reverse { flex-direction: column-reverse; } .flex-row-reverse { flex-direction: row-reverse; } .items-start { align-items: flex-start; } .items-end { align-items: flex-end; } .items-center { align-items: center; } .items-baseline { align-items: baseline; } .items-stretch { align-items: stretch; } .self-start { align-self: flex-start; } .self-end { align-self: flex-end; } .self-center { align-self: center; } .self-baseline { align-self: baseline; } .self-stretch { align-self: stretch; } .justify-start { justify-content: flex-start; } .justify-end { justify-content: flex-end; } .justify-center { justify-content: center; } .justify-between { justify-content: space-between; } .justify-around { justify-content: space-around; } .justify-evenly { justify-content: space-evenly; } .content-start { align-content: flex-start; } .content-end { align-content: flex-end; } .content-center { align-content: center; } .content-between { align-content: space-between; } .content-around { align-content: space-around; } .content-stretch { align-content: stretch; } /* SPACING ----------------------------------------------------------------*/ .pa0 { padding: var(--spacing-none); } .pa1 { padding: var(--spacing-extra-small); } .pa2 { padding: var(--spacing-small); } .pa3 { padding: var(--spacing-medium); } .pa4 { padding: var(--spacing-large); } .pa5 { padding: var(--spacing-extra-large); } .pa6 { padding: var(--spacing-extra-extra-large); } .pa7 { padding: var(--spacing-extra-extra-extra-large); } .pl0 { padding-left: var(--spacing-none); } .pl1 { padding-left: var(--spacing-extra-small); } .pl2 { padding-left: var(--spacing-small); } .pl3 { padding-left: var(--spacing-medium); } .pl4 { padding-left: var(--spacing-large); } .pl5 { padding-left: var(--spacing-extra-large); } .pl6 { padding-left: var(--spacing-extra-extra-large); } .pl7 { padding-left: var(--spacing-extra-extra-extra-large); } .pr0 { padding-right: var(--spacing-none); } .pr1 { padding-right: var(--spacing-extra-small); } .pr2 { padding-right: var(--spacing-small); } .pr3 { padding-right: var(--spacing-medium); } .pr4 { padding-right: var(--spacing-large); } .pr5 { padding-right: var(--spacing-extra-large); } .pr6 { padding-right: var(--spacing-extra-extra-large); } .pr7 { padding-right: var(--spacing-extra-extra-extra-large); } .pb0 { padding-bottom: var(--spacing-none); } .pb1 { padding-bottom: var(--spacing-extra-small); } .pb2 { padding-bottom: var(--spacing-small); } .pb3 { padding-bottom: var(--spacing-medium); } .pb4 { padding-bottom: var(--spacing-large); } .pb5 { padding-bottom: var(--spacing-extra-large); } .pb6 { padding-bottom: var(--spacing-extra-extra-large); } .pb7 { padding-bottom: var(--spacing-extra-extra-extra-large); } .pt0 { padding-top: var(--spacing-none); } .pt1 { padding-top: var(--spacing-extra-small); } .pt2 { padding-top: var(--spacing-small); } .pt3 { padding-top: var(--spacing-medium); } .pt4 { padding-top: var(--spacing-large); } .pt5 { padding-top: var(--spacing-extra-large); } .pt6 { padding-top: var(--spacing-extra-extra-large); } .pt7 { padding-top: var(--spacing-extra-extra-extra-large); } .pv0 { padding-top: var(--spacing-none); padding-bottom: var(--spacing-none); } .pv1 { padding-top: var(--spacing-extra-small); padding-bottom: var(--spacing-extra-small); } .pv2 { padding-top: var(--spacing-small); padding-bottom: var(--spacing-small); } .pv3 { padding-top: var(--spacing-medium); padding-bottom: var(--spacing-medium); } .pv4 { padding-top: var(--spacing-large); padding-bottom: var(--spacing-large); } .pv5 { padding-top: var(--spacing-extra-large); padding-bottom: var(--spacing-extra-large); } .pv6 { padding-top: var(--spacing-extra-extra-large); padding-bottom: var(--spacing-extra-extra-large); } .pv7 { padding-top: var(--spacing-extra-extra-extra-large); padding-bottom: var(--spacing-extra-extra-extra-large); } .ph0 { padding-left: var(--spacing-none); padding-right: var(--spacing-none); } .ph1 { padding-left: var(--spacing-extra-small); padding-right: var(--spacing-extra-small); } .ph2 { padding-left: var(--spacing-small); padding-right: var(--spacing-small); } .ph3 { padding-left: var(--spacing-medium); padding-right: var(--spacing-medium); } .ph4 { padding-left: var(--spacing-large); padding-right: var(--spacing-large); } .ph5 { padding-left: var(--spacing-extra-large); padding-right: var(--spacing-extra-large); } .ph6 { padding-left: var(--spacing-extra-extra-large); padding-right: var(--spacing-extra-extra-large); } .ph7 { padding-left: var(--spacing-extra-extra-extra-large); padding-right: var(--spacing-extra-extra-extra-large); } .ma0 { margin: var(--spacing-none); } .ma1 { margin: var(--spacing-extra-small); } .ma2 { margin: var(--spacing-small); } .ma3 { margin: var(--spacing-medium); } .ma4 { margin: var(--spacing-large); } .ma5 { margin: var(--spacing-extra-large); } .ma6 { margin: var(--spacing-extra-extra-large); } .ma7 { margin: var(--spacing-extra-extra-extra-large); } .ml0 { margin-left: var(--spacing-none); } .ml1 { margin-left: var(--spacing-extra-small); } .ml2 { margin-left: var(--spacing-small); } .ml3 { margin-left: var(--spacing-medium); } .ml4 { margin-left: var(--spacing-large); } .ml5 { margin-left: var(--spacing-extra-large); } .ml6 { margin-left: var(--spacing-extra-extra-large); } .ml7 { margin-left: var(--spacing-extra-extra-extra-large); } .mx-auto { margin-left: auto; margin-right: auto; } .mx1 { margin-right: var(--spacing-extra-small); margin-left: var(--spacing-extra-small); } .mr0 { margin-right: var(--spacing-none); } .mr1 { margin-right: var(--spacing-extra-small); } .mr2 { margin-right: var(--spacing-small); } .mr3 { margin-right: var(--spacing-medium); } .mr4 { margin-right: var(--spacing-large); } .mr5 { margin-right: var(--spacing-extra-large); } .mr6 { margin-right: var(--spacing-extra-extra-large); } .mr7 { margin-right: var(--spacing-extra-extra-extra-large); } .mb0 { margin-bottom: var(--spacing-none); } .mb1 { margin-bottom: var(--spacing-extra-small); } .mb2 { margin-bottom: var(--spacing-small); } .mb3 { margin-bottom: var(--spacing-medium); } .mb4 { margin-bottom: var(--spacing-large); } .mb5 { margin-bottom: var(--spacing-extra-large); } .mb6 { margin-bottom: var(--spacing-extra-extra-large); } .mb7 { margin-bottom: var(--spacing-extra-extra-extra-large); } .mt0 { margin-top: var(--spacing-none); } .mt1 { margin-top: var(--spacing-extra-small); } .mt2 { margin-top: var(--spacing-small); } .mt3 { margin-top: var(--spacing-medium); } .mt4 { margin-top: var(--spacing-large); } .mt5 { margin-top: var(--spacing-extra-large); } .mt6 { margin-top: var(--spacing-extra-extra-large); } .mt7 { margin-top: var(--spacing-extra-extra-extra-large); } .mv0 { margin-top: var(--spacing-none); margin-bottom: var(--spacing-none); } .mv1 { margin-top: var(--spacing-extra-small); margin-bottom: var(--spacing-extra-small); } .mv2 { margin-top: var(--spacing-small); margin-bottom: var(--spacing-small); } .mv3 { margin-top: var(--spacing-medium); margin-bottom: var(--spacing-medium); } .mv4 { margin-top: var(--spacing-large); margin-bottom: var(--spacing-large); } .mv5 { margin-top: var(--spacing-extra-large); margin-bottom: var(--spacing-extra-large); } .mv6 { margin-top: var(--spacing-extra-extra-large); margin-bottom: var(--spacing-extra-extra-large); } .mv7 { margin-top: var(--spacing-extra-extra-extra-large); margin-bottom: var(--spacing-extra-extra-extra-large); } .mh0 { margin-left: var(--spacing-none); margin-right: var(--spacing-none); } .mh1 { margin-left: var(--spacing-extra-small); margin-right: var(--spacing-extra-small); } .mh2 { margin-left: var(--spacing-small); margin-right: var(--spacing-small); } .mh3 { margin-left: var(--spacing-medium); margin-right: var(--spacing-medium); } .mh4 { margin-left: var(--spacing-large); margin-right: var(--spacing-large); } .mh5 { margin-left: var(--spacing-extra-large); margin-right: var(--spacing-extra-large); } .mh6 { margin-left: var(--spacing-extra-extra-large); margin-right: var(--spacing-extra-extra-large); } .mh7 { margin-left: var(--spacing-extra-extra-extra-large); margin-right: var(--spacing-extra-extra-extra-large); } /* DISPLAY ----------------------------------------------------------------*/ .d-i { display: inline; } .d-ib { display: inline-block; } .d-b { display: block; } /* BORDERS ----------------------------------------------------------------*/ .border { border: 1px solid var(--border-color); } .border-b { border-left-width: 0; border-right-width: 0; border-bottom-width: 1px; } .border-t { border-left-width: 0; border-right-width: 0; border-top-width: 1px; } .border-b { border-left-width: 0; border-right-width: 0; border-top-width: 0; border-bottom-width: 1px; } /* COLOURS ----------------------------------------------------------------*/ .text-bg { color: var(--color-bg); } .comp-neon { color: var(--neon); } .comp-yellow { color: var(--yellow); } .bg-comp-neon { background-color: var(--neon); } .bg-yellow { background-color: var(--yellow); } .text-color { color: var(--color-text); } .muted { color: var(--color-text-detail); } /* OPACITY ----------------------------------------------------------------*/ .dimmed { opacity: 0.7; } /* TYPOGRAPHY ----------------------------------------------------------------*/ .leading-tight { line-height: 1.2; } .font-mono { font-family: var(--mono); } .font-sans { font-family: var(--sans); } .font-serif { font-family: var(--serif); } .text-balance { text-wrap: balance; } /* Measure is limited to ~78 characters */ .measure { max-width: var(--measure); } /* Measure is limited to ~80 characters */ .measure-wide { max-width: var(--measure-wide); } /* Measure is limited to ~45 characters */ .measure-narrow { max-width: var(--measure-narrow); } .uppercase { text-transform: uppercase; } .tracking { letter-spacing: 1px; } .rounded-small { border-radius: .25em; } .no-underline { text-decoration: none; } .no-underline:hover { text-decoration: underline; } .badge { font-size: var(--f7); text-transform: lowercase; border-radius: 4px; font-weight: 500; background-color: var(--neon); color: var(--color-bg); padding: 0.4em 0.8em; } .badge:hover { text-decoration: none; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0; } } @layer utils{ @media screen and (max-width: 980px) { .sr-only-mobile { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0; } } } @layer utils{ @media screen and (min-width: 981px) { .only-mobile { display: none; } } } @layer utils{ .sep { color: var(--color-text-detail); display: inline-block; margin: 0 0.5em; } .no-wrap { white-space: nowrap; } .checkbox-fix { position: relative; top: -1px; } .truncate { white-space: nowrap; text-overflow: ellipsis; display: inline-block; overflow: hidden; max-width: 100%; } .icon { fill: currentColor; width: 1em; height: auto; aspect-ratio: 1 / 1; vertical-align: middle; display: inline-block; font-size: .9em; } a:hover .icon-feed { color: var(--yellow); } .drop-cap::first-letter { font-size: 3.2rem; font-weight: bold; float: left; margin-right: 0.1em; line-height: 1; } } @layer base{ /* FOOTER ----------------------------------------------------------------*/ [role='contentinfo']::before { content: ''; background: url('data:image/svg+xml;utf8,') no-repeat; display: block; color: var(--hr-color); font-size: 8rem; height: 0.7rem; line-height: 1; aspect-ratio: 1 / 1; margin: calc(var(--lineheight) * 2) 0; } [role='contentinfo'] nav ul { line-height: 2; } [role='contentinfo'] nav a { white-space: nowrap; } [role='contentinfo'] nav li[aria-current="page"] a { color: var(--grey); cursor: default; text-decoration: none; } @media screen and (min-width: 58rem) { [role='contentinfo'] { font-size: var(--f5); } [role='contentinfo'] nav ul { display: flex; } [role='contentinfo'] nav ul li:not(:last-child)::after { content: ' / '; display: inline-block; margin: 0 .75em; color: var(--color-text-detail); transform: scaleY(1.2); opacity: .7; } } } @layer base{ .Content { max-width: var(--content-width); margin: 0 auto; display: flex; flex-direction: column-reverse; } .Content.wide { --content-width: var(--measure-wide); } @media screen and (min-width: 981px) { html:not(.admin) .Content { max-width: none; display: grid; place-content: center; grid-template-columns: var(--content-width) auto; gap: var(--spacing-extra-large); } } } @layer views{ #app[data-state] .pane { display: none; } #app[data-state='INITED'] #INITED { display: block; } #app[data-state='sign-in'] #sign-in { display: block; } #app[data-state='START'] #START { display: block; } } @layer views{ /* =CHANGELOG --------------------------------------------- */ .changelog .prose>ul { padding-left: 0; margin-bottom: var(--lineheight); } .changelog .prose>ul ul { margin-bottom: 0; } } @layer components{ .NotesList article { scroll-margin: var(--lineheight); } .NotesList article header .target:hover span { color: var(--neon); } .NotesList article:target .target { color: var(--neon); } .NotesList header h1 a { color: var(--color-text-high-contrast); } .NotesList>li:not(:last-child) { margin-bottom: calc(var(--lineheight) * 4); } .NotesList>li:has(:target)::after { border-color: var(--neon); } } @layer components{ .NavCommon a { color: var(--color-text); white-space: nowrap; text-decoration: none; } .NavCommon a:hover { color: var(--link-color-hover); text-decoration: underline; } .MainNav { position: relative; z-index: 2; } .MainNav .sticky { position: sticky; top: 0; } .MainNav h1>a { font-weight: 500; color: var(--color-text); white-space: nowrap; text-decoration: none; } .MainNav a:is(:hover, :focus-visible) { outline: 0; color: var(--link-color-hover); text-decoration: underline; } .MainNav ul a { font-weight: normal; position: revert; } .MainNav ul a:not([aria-current='page'] > :is(.MainNav ul a)):not(.MainNav ul a:hover):not(.MainNav ul a:focus-visible) { opacity: .8; } :where([aria-current='page'] :is(.MainNav ul a),.MainNav ul a:focus) { outline: 0; } :where([aria-current='page'] :is(.MainNav ul a),.MainNav ul a:focus)::after { content: '⇠'; display: inline; margin-left: .5em; white-space: nowrap; } .MainNav ul [aria-current='page'] { position: relative; } .MainNav ul [aria-current='page'] a { font-weight: 700; } .MainNav h1 { --offset-top: 18px; line-height: calc(var(--lineheight) * 3); margin-bottom: -4px; padding-top: var(--offset-top); } @media screen and (max-width: 980px) { .MainNav { width: calc(100% + var(--inset) * 2); margin: calc(var(--inset) * -1); padding: calc(var(--lineheight) / 2) calc(var(--inset) * 1); margin-bottom: calc(var(--lineheight) / 2 - 1px); position: sticky; inset: 0; overflow-x: auto; background-color: var(--color-bg); font-size: var(--f5); } .MainNav h1 { position: absolute; left: -9999em; } .MainNav ul { display: flex; margin: 0; flex-direction: row; gap: 1em; } .MainNav [aria-current='page'] a::after, .MainNav a:focus::after { display: none; } } .BackLink { text-decoration: none; color: var(--color-text); background-color: var(--grey-lightest); width: 1.6em; text-align: center; line-height: 1.6em; aspect-ratio: 1/1; display: inline-block; border-radius: 4em; opacity: .8; } a:is(:hover, :focus)>.BackLink { opacity: 1; } } @layer components{ .PageNav { text-align: center; } .PageNav a { color: var(--grey); display: inline-block; padding: 0.3em 0.5em; text-decoration: none; } .PageNav a:hover { color: var(--link-color); text-decoration: underline; } .PageNav .separator { color: var(--color-text); font-weight: 500; letter-spacing: -1px; font-size: 1.2em; margin: 0 3px; } } @layer components{ /* POSTS LIST ----------------------------------------------------------------*/ .PostItem { display: flex; align-items: center; justify-content: space-between; } .PostItem:last-child { border-bottom: 0; } .PostItem time { font-size: var(--f5); font-variant-numeric: tabular-nums; letter-spacing: var(--tracking-f0); } .PostItem time:not(.PostItem:hover :is(.PostItem time)) { color: var(--color-text-detail); } .PostItem .PostItem__Link { display: block; padding: calc(var(--lineheight) / 3) 0; flex: 1; } .PostItem .PostItem__Link:visited { color: var(--link-color-visited); text-decoration-color: var(--link-color-visited); } @media screen and (max-width: 480px) { .PostItem { align-items: flex-start; flex-direction: column; margin-bottom: calc(var(--lineheight) / 3); } .PostItem .PostItem__Link { max-width: 90%; font-size: 1em; } } .PostsList { list-style: none; } .PostsList .PostsList--Tight .PostItem { border: 1px solid var(--grey-light); border-width: 0 0 1px; margin: 0; } @media screen and (prefers-color-scheme: dark) { .PostsList .PostsList--Tight .PostItem { border: 0; } } } @layer utils{ /* From https://css-tricks.com/the-cleanest-trick-for-autogrowing-textareas/ */ .grow-wrap { /* easy way to plop the elements on top of each other and have them both sized based on the tallest one's height */ display: grid; } .grow-wrap::after { /* Note the weird space! Needed to preventy jumpy behavior */ content: attr(data-replicated-value) ' '; /* This is how textarea text behaves */ white-space: pre-wrap; /* Hidden from view, clicks, and screen readers */ visibility: hidden; } .grow-wrap>textarea { /* You could leave this, but after a user resizes, then it ruins the auto sizing */ resize: none; /* Firefox shows scrollbar on growth, you can hide like this. */ overflow: hidden; } .grow-wrap>textarea, .grow-wrap::after { /* Identical styling required!! */ border-width: 1px; padding: 0.5em; font: inherit; /* Place on top of each other */ grid-area: 1 / 1 / 2 / 2; } } @layer components{ /* PROSE ----------------------------------------------------------------*/ .prose { --link-color: var(--color-text); } .prose> :last-child { margin-bottom: 0; } .prose a:not([class]) { text-decoration: underline; -webkit-text-decoration-skip: ink; text-decoration-skip-ink: auto; } .prose img, .prose iframe, .prose figure, .prose svg { --side-margin: calc(var(--lineheight) * 2); margin: var(--side-margin) auto; display: block; } @media screen and (max-width: 480px) { .prose img, .prose iframe, .prose figure, .prose svg { --side-margin: var(--lineheight); } } @media screen and (prefers-color-scheme: dark) { .prose img { opacity: 0.9; box-shadow: rgba(0, 0, 0, 0.3) 0 0 6px; } } .prose ul, .prose ol { padding-left: 1em; margin-left: 1rem; } .prose ul:where(ul), .prose ol:where(ul) { list-style-type: disc; } .prose ul:where(ul) ::marker, .prose ol:where(ul) ::marker { font-size: 1.2em; } .prose ul:where(ol), .prose ol:where(ol) { list-style-type: decimal; } .prose ul ::marker, .prose ol ::marker { color: var(--color-text-detail); } .prose ul li>ul, .prose ol li>ul, .prose ul li>ol, .prose ol li>ol { padding-left: 1.5rem; margin-bottom: 0; } .prose figcaption { padding: 1rem 0; text-align: center; font-family: var(--sans); font-size: 0.9em; } /* Break links and code */ .prose code:not(pre > code), .prose a { word-break: break-word; word-wrap: break-word; overflow-wrap: break-word; } .prose figure.image--full { margin: calc(var(--lineheight) * 2) -14vw; } .prose figure.image--full img { display: block; margin: 0 auto; } @media screen and (max-width: 960px) { .prose figure.image--full { /* Edge-to-edge pixelfucking. */ margin-left: auto; margin-right: auto; } } } @layer base{ /* Matrix theme in light and dark versions by Johan. */ code[class*='language-'], pre[class*='language-'] { color: hsl(112 30% 30%); background-color: hsl(112 29.98% 97%); } @media (prefers-color-scheme: dark) { code[class*='language-'], pre[class*='language-'] { color: hsl(112, 70%, 80%); background-color: hsl(112, 1.27%, 13.33%); } } .token { --hue: 112; --sat: 40%; --lit: 25%; --alpha: 1; --base: hsl(var(--hue) var(--sat) var(--lit) / var(--alpha)); color: var(--base); } .token.comment, .token.prolog, .token.doctype, .token.cdata { --alpha: 80%; } .token.punctuation { --lit: 50%; --sat: 20%; } .namespace { opacity: 0.7; } .token.property, .token.tag, .token.constant, .token.symbol, .token.deleted { --lit: 35%; --sat: 30%; } .token.number, .token.boolean { --lit: 20%; --sat: 70%; } .token.selector, .token.attr-name, .token.char, .token.builtin, .token.inserted { font-weight: bold; } .token.selector, .token.builtin { background-color: hsla(112, 42.86%, 46.9%, 0.15); } .token.operator, .token.entity, .token.url, .language-css .token.string, .style .token.string, .token.variable { --lit: 60%; --sat: 20%; } .token.atrule, .token.attr-value, .token.function, .token.class-name { --sat: 50%; --lit: 25%; font-weight: bold; } .token.keyword, .token.rule { --sat: 20%; --lit: 50%; } .token.regex, .token.important { --hue: 40; --sat: 80%; --lit: 70%; } } @layer base{ @media (prefers-color-scheme: dark) { .token { --hue: 112.08; --sat: 49.53%; --lit: 58.04%; --alpha: 1; --base: hsl(var(--hue) var(--sat) var(--lit) / var(--alpha)); color: var(--base); } .token.comment, .token.prolog, .token.doctype, .token.cdata { --sat: 10%; } .token.punctuation { --lit: 40%; --sat: 20%; } .namespace { opacity: 0.7; } .token.property, .token.tag, .token.constant, .token.symbol, .token.deleted { --lit: 80%; --sat: 100%; } .token.number, .token.boolean { --lit: 80%; } .token.selector, .token.attr-name, .token.string, .token.char, .token.builtin, .token.inserted { --lit: 70%; } .token.selector, .token.builtin { background-color: hsla(112, 42.86%, 46.9%, 0.08); } .token.operator, .token.entity, .token.url, .language-css .token.string, .style .token.string, .token.variable { --lit: 80%; --sat: 60%; } .token.atrule, .token.attr-value, .token.function, .token.class-name { --sat: 31%; --lit: 75%; } .token.keyword, .token.rule { --sat: 20%; --lit: 60%; } .token.regex, .token.important { --hue: 40; --sat: 80%; --lit: 70%; } } } @layer base{ .token.important, .token.bold, .token.rule { font-weight: bold; } .token.italic { font-style: italic; } .token.entity { cursor: help; } } @layer utils{ /* Small caps */ .small-caps { font-family: 'Charter SC', serif; font-variant: small-caps; } /* Double quotation marks (") */ .pull-double { margin-left: -.46em } .push-double { margin-right: .46em } /* Single quotation marks (') */ .pull-single { margin-left: -.27em } .push-single { margin-right: .27em } .pull-double, .push-double, .pull-single, .push-single { display: inline-block } /* Optical margin alignment for particular letters */ .pull-T, .pull-V, .pull-W, .pull-Y { margin-left: -0.1em; } .push-T, .push-V, .push-W, .push-Y { margin-right: 0.1em; } .pull-O, .pull-C, .pull-o, .pull-c { margin-left: -0.04em; } .push-O, .push-C, .push-o, .push-c { margin-right: 0.04em; } .pull-A { margin-left: -0.03em; } .push-A { margin-right: 0.03em; } } /*# sourceMappingURL=./johan.css.map */ \ No newline at end of file diff --git a/johan.css.map b/johan.css.map index 223e69213..4ffd07787 100644 --- a/johan.css.map +++ b/johan.css.map @@ -1 +1 @@ -{"version":3,"sources":["/src/johan.css","/css/reset.css","/%3Cno%20source%3E","/css/variables.css","/css/base.css","/css/utils.css","/css/footer.css","/css/layout.css","/css/admin.css","/css/changelog.css","/css/notes.css","/css/navigation.css","/css/page-nav.css","/css/posts-list.css","/css/autogrow.css","/css/prose.css","/css/prism-matrix.css","/css/typeset.css"],"names":[],"mappings":"AAAA;;;;;+CAK+C;;AAE/C;;;;KAIK;;ACXL;AAAA,6EAA6E;AAC7E;;;CAGC,SAAS;CACT,UAAU;CACV,sBAAsB;AACvB;;AAEA;CACC,wBAAwB;AACzB;;AAEA;CACC,8BAA8B;CAC9B,wBAAwB;AACzB;CChBA;;ADkBA;;AAAA;CACC;EACC,uBAAuB;CACxB;AACD;AAAA;;AAtBA;;AAwBA;CACC,gBAAgB;CAChB,kCAAkC;CAClC,mCAAmC;AACpC;;AAEA;CACC,aAAa;CACb,cAAc;AACf;;AAEA;CACC,gBAAgB;CAChB,aAAa;AACd;;AAEA;CACC,eAAe;AAChB;;AAEA;CACC,mBAAmB;AACpB;;AAEA;CACC,mBAAmB;AACpB;;AAEA;CACC,mBAAmB;AACpB;;AAEA;CACC,cAAc;CACd,4BAA4B;AAC7B;;AAEA;CACC,gBAAgB;AACjB;;AAEA;CACC,cAAc;AACf;;AAEA;CACC,qBAAqB;CACrB,gBAAgB;AACjB;;AAEA;CACC,yBAAyB;AAC1B;;AAEA;CACC,+BAA+B;CAC/B,kBAAkB;AACnB;;AAEA;CACC,YAAY;CACZ,gCAA6B;SAA7B,6BAA6B;CAC7B,cAAc;CACd,aAAa;CACb,iBAAiB;AAClB;;AAEA;CACC,4BAA4B;CAC5B,mBAAmB;CACnB,yBAAyB;AAC1B;;AAEA;CACC,wCAAgC;SAAhC,gCAAgC;CAChC,sBAAsB;CACtB,qBAAqB;CACrB,2BAA2B;CAC3B,6BAA6B;CAC7B,8BAA8B;CAC9B,oBAAoB;AACrB;CCzGA;;ACAA;AAAA;CACC,WAAW;;CAEX,wBAAwB;CACxB,yBAAyB;CACzB,gCAAgC;CAChC,mCAAmC;CACnC,gCAAgC;;CAEhC,gBAAgB;CAChB,yCAAyC;CACzC,2BAA2B;CAC3B,iCAAiC;CACjC,gCAAgC;;CAEhC,uCAAuC;CACvC,6CAA6C;CAC7C,uCAAuC;CACvC,uDAAuD;CACvD,2BAA2B;;CAE3B,8BAA8B;CAC9B,oCAAoC;CACpC,qCAAqC;CACrC,iCAAiC;;CAEjC,gCAAgC;;CAEhC,2CAA2C;CAC3C,4CAA4C;CAC5C,8BAA8B;;CAE9B,6BAA6B;;CA8B7B,eAAe;;CAEf,6BAA6B;CAC7B,wGAAwG;CACxG,8EAA8E;;CAE9E,oBAAoB;CACpB,gBAAgB;CAChB,gBAAgB;CAChB,yCAAyC;;CAEzC,oBAAoB;CACpB,uBAAuB;CACvB,uBAAuB;CACvB,sBAAsB;CACtB,uBAAuB;CACvB,uBAAuB;CACvB,uBAAuB;CACvB,wBAAwB;;CAExB,+CAA+C;CAC/C,+CAA+C;CAC/C,+CAA+C;CAC/C,+CAA+C;CAC/C,UAAU;CACV,+CAA+C;CAC/C,+CAA+C;CAC/C,+CAA+C;;CAE/C,aAAa;;CAEb,oCAAoC;;CAEpC,eAAe;CACf,sBAAsB;CACtB,qBAAqB;;CAErB,+BAA+B;;CAE/B,iCAAiC;;CAEjC,iBAAiB;CACjB,oDAAoD;CACpD,8CAA8C;CAC9C,qCAAqC;CACrC,8CAA8C;CAC9C,oDAAoD;CACpD,0DAA0D;CAC1D,gEAAgE;AAMjE;;CAlFC;AAlCD;EAmCE,4CAA4C;EAC5C,sDAAsD;EACtD,yDAAyD;AA+E3D;CA9EC;;CAEA;AAxCD;EAyCE,iBAAiB;EACjB,kCAAkC;EAClC,gCAAgC;;EAEhC,mBAAmB;EACnB,2CAA2C;EAC3C,6BAA6B;EAC7B,iCAAiC;EACjC,sCAAsC;EACtC,+CAA+C;EAC/C,wDAAwD;EACxD,6BAA6B;EAC7B,wCAAwC;EACxC,8BAA8B;AA8DhC;;EA5DE;AAxDF;GAyDG,4CAA4C;GAC5C,sDAAsD;AA0DzD;EAzDE;CACD;;CAoDA;AAhHD;EAiHE,0BAA0B;EAC1B,oBAAoB;AAEtB;CADC;CDnHD;;AEAA;;AAAA;+CAC+C;;AAE/C;CACC,4FAA4F;CAC5F,2BAA2B;CAC3B,8BAA8B;CAC9B,sBAAsB;AACvB;;AAEA;CACC,4EAA4E;CAC5E,iCAAiC;CACjC,wBAAwB;AACzB;;AAEA;CACC,qBAAqB;CACrB,2BAA2B;CAC3B,+BAA+B;CAC/B;;;;UAIS;CACT,mDAAmD;AASpD;;CAPC;;AAXD;EAYE,oBAAoB;AAMtB;CALC;;CAEA;;AAfD;EAgBE,mCAAmC;AAErC;CADC;;AAGD;CACC,+BAA+B;CAC/B,0CAA0C;AAC3C;;AAEA;CACC,wBAAwB;AACzB;;AAEA;IACI,wBAAwB;IACxB,2BAA2B;IAC3B,oBAAoB;AACxB;;AAEA;+CAC+C;;AAE/C;;;;;;CAMC,uBAAmB;SAAnB,mBAAmB;CACnB,0CAA0C;CAC1C,sCAAsC;AACvC;;AAEA;;CAEC,4CAA4C;CAC5C,kCAAkC;CAClC,wCAAwC;AACzC;;AAEA;;CAEC,oBAAoB;CACpB,kCAAkC;AACnC;;AAEA;;CAEC,oBAAoB;CACpB,kCAAkC;AACnC;;AAEA;;CAEC,oBAAoB;CACpB,kCAAkC;AACnC;;AAEA;;CAEC,oBAAoB;CACpB,kCAAkC;AACnC;;AAEA;;CAEC,oBAAoB;CACpB,kCAAkC;AACnC;;AAEA;;CAEC,oBAAoB;CACpB,kCAAkC;AACnC;;AAEA;CACC,oBAAoB;AACrB;;AAEA;;CAEC,eAAe;AAChB;;AAEA;CACC,gBAAgB;CAChB,SAAS;CACT,UAAU;AACX;;AAEA;;CAEC,wBAAwB;CACxB,kBAAkB;CAClB,qBAAqB;CACrB,0BAA0B;AAgC3B;;CA9BC;EACC,wBAAwB;CACzB;;CAEA;EACC,qBAAqB;EACrB,kBAAkB;CACnB;;CAEA;;EAEC,8BAA8B;EAC9B,mCAAmC;CACpC;;CAEA;EACC,0BAA0B;CAC3B;;CAEA;EACC,QAAQ;CACT;;CAEA;EACC,qBAAqB;CAKtB;;EAHC;GACC,0BAA0B;EAC3B;;AAIF;;;;;;;CAOC,6BAA6B;AAC9B;;AAEA;CACC,eAAe;CACf,YAAY;AACb;;AAEA;;CAEC,wBAAwB;AACzB;;AAEA;CACC,wCAAwC;CACxC,gBAAgB;CAChB,kBAAkB;CAClB,wBAAwB;AACzB;;AAEA;CACC,kBAAkB;AACnB;;AAEA;CACC,iBAAiB;;CAEjB,gBAAgB;CAChB,WAAW;CACX,yBAAyB;CACzB,iBAAiB;AA0BlB;;CAxBC;EACC,eAAe;CAsBhB;;EApBC;GACC,yBAAyB;GACzB,mBAAmB;GACnB,oBAAoB;GACpB,wBAAwB;EACzB;;EAEA;GACC,mBAAmB;GACnB,6CAA6C;EAC9C;;EAEA;GACC,iBAAiB;GACjB,UAAU;EACX;;EAEA;GACC,UAAU;EACX;;AAIF;CACC,0CAA0C;CAC1C,uBAAuB;CACvB,iBAAiB;CACjB,oBAAoB;CACpB,gBAAgB;CAChB,MAAM;CACN,iCAAiC;AAClC;;AAEA;CACC,uBAAuB;AACxB;CAIC;EACC,eAAe;CAChB;;AAGD;CACC,aAAa;CACb,wCAAwC;;CAExC,cAAc;CACd,gBAAgB;CAChB,2BAA2B;CAC3B,gBAAgB;CAChB,oBAAoB;CACpB,kBAAkB;CAClB,qBAAa;SAAb,aAAa;CACb,8BAAyB;GAAzB,4BAAyB;MAAzB,yBAAyB;CACzB,iCAAiC;CACjC,wBAAwB;CACxB,kBAAkB;CAClB,iDAAiD;CACjD,4CAA4C;CAC5C,6BAA6B;CAC7B,oBAAoB;CACpB,cAAc;CACd,kBAAkB;AAsBnB;;CApBC;;AAtBD;EAuBE,oBAAoB;AAmBtB;CAlBC;;CAEA;EACC,aAAa;EACb,oBAAoB;EACpB,qBAAqB;EACrB,kBAAkB;EAClB,wCAAwC;EACxC,+DAA+D;EAC/D,wCAAwC;EACxC,8BAA8B;EAC9B,OAAO;EACP,WAAW;EACX,cAAc;EACd,oBAAoB;EACpB,cAAc;EACd,oBAAoB;CACrB;;AAGD;CACC,uCAAuC;CACvC,0CAA0C;AAC3C;;AAEA,wBAAwB;AACxB;CACC,cAAc;AACf;;AAEA;CACC,wCAAwC;CACxC,sEAAsE;CACtE,kBAAkB;CAClB,mBAAmB;CACnB,sCAAsC;AAUvC;;CARC;EACC,0CAA0C;CAC3C;;CAEA;EACC,kBAAkB;EAClB,6BAA6B;CAC9B;;AAGD;CACC,SAAS;CACT,iCAAiC;CACjC,aAAa;CACb,mBAAmB;CACnB,qCAAqC;CACrC,mBAAmB;AACpB;;AAEA;CACC,cAAc;CACd,6BAA6B;CAC7B,oBAAoB;CACpB,gBAAgB;AAMjB;;CAJC;EACC,UAAU;EACV,+BAA+B;CAChC;CFjVD;;AGAA;;AAAA;CACC,eAAe;CACf,iBAAiB;CACjB,kBAAkB;AACnB;;AAEA;;iEAEiE;;AAEjE;CACC,wBAAgB;IAAhB,qBAAgB;SAAhB,gBAAgB;CAChB,SAAS;CACT,gBAAgB;CAChB,qBAAqB;CACrB,wBAAwB;CACxB,kBAAkB;CAClB,yBAAyB;CACzB,kBAAkB;CAClB,gBAAgB;CAChB,kCAAkC;CAClC,oBAAoB;CACpB,mBAAmB;CACnB,uBAAuB;CACvB,qBAAqB;CACrB,gBAAgB;CAChB,eAAe;AAuBhB;;CArBC;EACC,eAAe;CAChB;;CAEA;EACC,qBAAqB;CACtB;;CAEA;EACC,qBAAqB;EACrB,8BAA8B;CAC/B;;CAEA;;EAEC,+BAA+B;CAChC;;CAEA;EACC,gCAAgC;CACjC;;AAGD;;iEAEiE;;AAEjE;CACC;;;;;;;;;oBASmB;AACpB;;AAEA;;iEAEiE;;AAEjE;CACC,kBAAkB;AACnB;;AAEA;;iEAEiE;;AAEjE;CACC,mBAAmB;AACpB;;AAEA;CACC,iBAAiB;AAClB;;AAEA;CACC,gBAAgB;AACjB;;AAEA;CACC,gBAAgB;AACjB;;AAEA;CACC,gBAAgB;AACjB;;AAEA;CACC,gBAAgB;AACjB;;AAEA;CACC,gBAAgB;AACjB;;AAEA;CACC,gBAAgB;AACjB;;AAEA;CACC,gBAAgB;AACjB;;AAEA;CACC,gBAAgB;AACjB;;AAEA;CACC,gBAAgB;AACjB;;AAEA;;iEAEiE;;AAEjE;CACC,gBAAgB;AACjB;;AAEA;CACC,iBAAiB;AAClB;;AAEA;CACC,kBAAkB;AACnB;;AAEA;CACC,mBAAmB;AACpB;;AAEA;CACC,WAAW;AACZ;;AAEA;CACC,cAAc;AACf;;AAEA;;iEAEiE;;AAEjE;CACC,aAAa;AACd;;AAEA;CACC,oBAAoB;AACrB;;AAEA;CACC,UAAU;AACX;;AAEA;CACC,UAAU;AACX;;AAEA;+DAC+D;AAC/D;CACC,cAAc;CACd,YAAY;CACZ,MAAM;CACN,aAAa;CACb,MAAM;AACP;;AAEA;CACC,OAAO;AACR;;AAEA;CACC,UAAU;AACX;;AAEA;CACC,sBAAsB;AACvB;;AAEA;CACC,mBAAmB;AACpB;;AAEA;CACC,eAAe;AAChB;;AAEA;CACC,iBAAiB;AAClB;;AAEA;CACC,uBAAuB;AACxB;;AAEA;CACC,8BAA8B;AAC/B;;AAEA;CACC,2BAA2B;AAC5B;;AAEA;CACC,uBAAuB;AACxB;;AAEA;CACC,qBAAqB;AACtB;;AAEA;CACC,mBAAmB;AACpB;;AAEA;CACC,qBAAqB;AACtB;;AAEA;CACC,oBAAoB;AACrB;;AAEA;CACC,sBAAsB;AACvB;;AAEA;CACC,oBAAoB;AACrB;;AAEA;CACC,kBAAkB;AACnB;;AAEA;CACC,oBAAoB;AACrB;;AAEA;CACC,mBAAmB;AACpB;;AAEA;CACC,2BAA2B;AAC5B;;AAEA;CACC,yBAAyB;AAC1B;;AAEA;CACC,uBAAuB;AACxB;;AAEA;CACC,8BAA8B;AAC/B;;AAEA;CACC,6BAA6B;AAC9B;;AAEA;CACC,6BAA6B;AAC9B;;AAEA;CACC,yBAAyB;AAC1B;;AAEA;CACC,uBAAuB;AACxB;;AAEA;CACC,qBAAqB;AACtB;;AAEA;CACC,4BAA4B;AAC7B;;AAEA;CACC,2BAA2B;AAC5B;;AAEA;CACC,sBAAsB;AACvB;;AAEA;;iEAEiE;;AAEjE;CACC,4BAA4B;AAC7B;;AAEA;CACC,mCAAmC;AACpC;;AAEA;CACC,6BAA6B;AAC9B;;AAEA;CACC,8BAA8B;AAC/B;;AAEA;CACC,6BAA6B;AAC9B;;AAEA;CACC,mCAAmC;AACpC;;AAEA;CACC,yCAAyC;AAC1C;;AAEA;CACC,+CAA+C;AAChD;;AAEA;CACC,iCAAiC;AAClC;;AAEA;CACC,wCAAwC;AACzC;;AAEA;CACC,kCAAkC;AACnC;;AAEA;CACC,mCAAmC;AACpC;;AAEA;CACC,kCAAkC;AACnC;;AAEA;CACC,wCAAwC;AACzC;;AAEA;CACC,8CAA8C;AAC/C;;AAEA;CACC,oDAAoD;AACrD;;AAEA;CACC,kCAAkC;AACnC;;AAEA;CACC,yCAAyC;AAC1C;;AAEA;CACC,mCAAmC;AACpC;;AAEA;CACC,oCAAoC;AACrC;;AAEA;CACC,mCAAmC;AACpC;;AAEA;CACC,yCAAyC;AAC1C;;AAEA;CACC,+CAA+C;AAChD;;AAEA;CACC,qDAAqD;AACtD;;AAEA;CACC,mCAAmC;AACpC;;AAEA;CACC,0CAA0C;AAC3C;;AAEA;CACC,oCAAoC;AACrC;;AAEA;CACC,qCAAqC;AACtC;;AAEA;CACC,oCAAoC;AACrC;;AAEA;CACC,0CAA0C;AAC3C;;AAEA;CACC,gDAAgD;AACjD;;AAEA;CACC,sDAAsD;AACvD;;AAEA;CACC,gCAAgC;AACjC;;AAEA;CACC,uCAAuC;AACxC;;AAEA;CACC,iCAAiC;AAClC;;AAEA;CACC,kCAAkC;AACnC;;AAEA;CACC,iCAAiC;AAClC;;AAEA;CACC,uCAAuC;AACxC;;AAEA;CACC,6CAA6C;AAC9C;;AAEA;CACC,mDAAmD;AACpD;;AAEA;CACC,gCAAgC;CAChC,mCAAmC;AACpC;;AAEA;CACC,uCAAuC;CACvC,0CAA0C;AAC3C;;AAEA;CACC,iCAAiC;CACjC,oCAAoC;AACrC;;AAEA;CACC,kCAAkC;CAClC,qCAAqC;AACtC;;AAEA;CACC,iCAAiC;CACjC,oCAAoC;AACrC;;AAEA;CACC,uCAAuC;CACvC,0CAA0C;AAC3C;;AAEA;CACC,6CAA6C;CAC7C,gDAAgD;AACjD;;AAEA;CACC,mDAAmD;CACnD,sDAAsD;AACvD;;AAEA;CACC,iCAAiC;CACjC,kCAAkC;AACnC;;AAEA;CACC,wCAAwC;CACxC,yCAAyC;AAC1C;;AAEA;CACC,kCAAkC;CAClC,mCAAmC;AACpC;;AAEA;CACC,mCAAmC;CACnC,oCAAoC;AACrC;;AAEA;CACC,kCAAkC;CAClC,mCAAmC;AACpC;;AAEA;CACC,wCAAwC;CACxC,yCAAyC;AAC1C;;AAEA;CACC,8CAA8C;CAC9C,+CAA+C;AAChD;;AAEA;CACC,oDAAoD;CACpD,qDAAqD;AACtD;;AAEA;CACC,2BAA2B;AAC5B;;AAEA;CACC,kCAAkC;AACnC;;AAEA;CACC,4BAA4B;AAC7B;;AAEA;CACC,6BAA6B;AAC9B;;AAEA;CACC,4BAA4B;AAC7B;;AAEA;CACC,kCAAkC;AACnC;;AAEA;CACC,wCAAwC;AACzC;;AAEA;CACC,8CAA8C;AAC/C;;AAEA;CACC,gCAAgC;AACjC;;AAEA;CACC,uCAAuC;AACxC;;AAEA;CACC,iCAAiC;AAClC;;AAEA;CACC,kCAAkC;AACnC;;AAEA;CACC,iCAAiC;AAClC;;AAEA;CACC,uCAAuC;AACxC;;AAEA;CACC,6CAA6C;AAC9C;;AAEA;CACC,mDAAmD;AACpD;;AAEA;CACC,iBAAiB;CACjB,kBAAkB;AACnB;;AAEA;CACC,wCAAwC;CACxC,uCAAuC;AACxC;;AAEA;CACC,iCAAiC;AAClC;;AAEA;CACC,wCAAwC;AACzC;;AAEA;CACC,kCAAkC;AACnC;;AAEA;CACC,mCAAmC;AACpC;;AAEA;CACC,kCAAkC;AACnC;;AAEA;CACC,wCAAwC;AACzC;;AAEA;CACC,8CAA8C;AAC/C;;AAEA;CACC,oDAAoD;AACrD;;AAEA;CACC,kCAAkC;AACnC;;AAEA;CACC,yCAAyC;AAC1C;;AAEA;CACC,mCAAmC;AACpC;;AAEA;CACC,oCAAoC;AACrC;;AAEA;CACC,mCAAmC;AACpC;;AAEA;CACC,yCAAyC;AAC1C;;AAEA;CACC,+CAA+C;AAChD;;AAEA;CACC,qDAAqD;AACtD;;AAEA;CACC,+BAA+B;AAChC;;AAEA;CACC,sCAAsC;AACvC;;AAEA;CACC,gCAAgC;AACjC;;AAEA;CACC,iCAAiC;AAClC;;AAEA;CACC,gCAAgC;AACjC;;AAEA;CACC,sCAAsC;AACvC;;AAEA;CACC,4CAA4C;AAC7C;;AAEA;CACC,kDAAkD;AACnD;;AAEA;CACC,+BAA+B;CAC/B,kCAAkC;AACnC;;AAEA;CACC,sCAAsC;CACtC,yCAAyC;AAC1C;;AAEA;CACC,gCAAgC;CAChC,mCAAmC;AACpC;;AAEA;CACC,iCAAiC;CACjC,oCAAoC;AACrC;;AAEA;CACC,gCAAgC;CAChC,mCAAmC;AACpC;;AAEA;CACC,sCAAsC;CACtC,yCAAyC;AAC1C;;AAEA;CACC,4CAA4C;CAC5C,+CAA+C;AAChD;;AAEA;CACC,kDAAkD;CAClD,qDAAqD;AACtD;;AAEA;CACC,gCAAgC;CAChC,iCAAiC;AAClC;;AAEA;CACC,uCAAuC;CACvC,wCAAwC;AACzC;;AAEA;CACC,iCAAiC;CACjC,kCAAkC;AACnC;;AAEA;CACC,kCAAkC;CAClC,mCAAmC;AACpC;;AAEA;CACC,iCAAiC;CACjC,kCAAkC;AACnC;;AAEA;CACC,uCAAuC;CACvC,wCAAwC;AACzC;;AAEA;CACC,6CAA6C;CAC7C,8CAA8C;AAC/C;;AAEA;CACC,mDAAmD;CACnD,oDAAoD;AACrD;;AAEA;;iEAEiE;;AAEjE;CACC,eAAe;AAChB;;AAEA;CACC,qBAAqB;AACtB;;AAEA;CACC,cAAc;AACf;;AAEA;;iEAEiE;;AAEjE;CACC,qCAAqC;AACtC;;AAEA;CACC,oBAAoB;CACpB,qBAAqB;CACrB,wBAAwB;AACzB;;AAEA;CACC,oBAAoB;CACpB,qBAAqB;CACrB,qBAAqB;AACtB;;AAEA;CACC,oBAAoB;CACpB,qBAAqB;CACrB,mBAAmB;CACnB,wBAAwB;AACzB;;AAEA;;iEAEiE;;AAEjE;CACC,sBAAsB;AACvB;;AAEA;CACC,kBAAkB;AACnB;;AAEA;CACC,oBAAoB;AACrB;;AAEA;CACC,6BAA6B;AAC9B;;AAEA;CACC,+BAA+B;AAChC;;AAEA;CACC,wBAAwB;AACzB;;AAEA;CACC,+BAA+B;AAChC;;AAEA;;iEAEiE;;AAEjE;CACC,YAAY;AACb;;AAEA;;iEAEiE;;AAEjE;CACC,gBAAgB;AACjB;;AAEA;CACC,wBAAwB;AACzB;;AAEA;CACC,wBAAwB;AACzB;;AAEA;CACC,yBAAyB;AAC1B;;AAEA;CACC,kBAAkB;AACnB;;AAEA,yCAAyC;AACzC;CACC,yBAAyB;AAC1B;;AAEA,yCAAyC;AACzC;CACC,8BAA8B;AAC/B;;AAEA,yCAAyC;AACzC;CACC,gCAAgC;AACjC;;AAEA;CACC,yBAAyB;AAC1B;;AAEA;CACC,mBAAmB;AACpB;;AAEA;CACC,oBAAoB;AACrB;;AAEA;CACC,qBAAqB;AAKtB;;CAHC;EACC,0BAA0B;CAC3B;;AAGD;CACC,oBAAoB;CACpB,yBAAyB;CACzB,kBAAkB;CAClB,gBAAgB;CAChB,6BAA6B;CAC7B,sBAAsB;CACtB,oBAAoB;AAKrB;;CAHC;EACC,qBAAqB;CACtB;;AAGD;CACC,kBAAkB;CAClB,UAAU;CACV,WAAW;CACX,UAAU;CACV,YAAY;CACZ,gBAAgB;CAChB,sBAAsB;CACtB,mBAAmB;CACnB,eAAe;AAChB;CHt8BA;;AGy8BA;;;AAAA;CACC;EACC,kBAAkB;EAClB,UAAU;EACV,WAAW;EACX,UAAU;EACV,YAAY;EACZ,gBAAgB;EAChB,sBAAsB;EACtB,mBAAmB;EACnB,eAAe;CAChB;AACD;AAAA;;AAEA;;AAAA;CACC;EACC,aAAa;CACd;AACD;AAAA;;AA39BA;;AA69BA;CACC,+BAA+B;CAC/B,qBAAqB;CACrB,eAAe;AAChB;;AAEA;CACC,mBAAmB;AACpB;;AAEA;CACC,kBAAkB;CAClB,SAAS;AACV;;AAEA;CACC,mBAAmB;CACnB,uBAAuB;CACvB,qBAAqB;CACrB,gBAAgB;CAChB,eAAe;AAChB;;AAEA;CACC,kBAAkB;CAClB,UAAU;CACV,YAAY;CACZ,mBAAmB;CACnB,sBAAsB;CACtB,qBAAqB;CACrB,eAAe;AAChB;;AAEA;CACC,oBAAoB;AACrB;;AAEA;CACC,iBAAiB;CACjB,iBAAiB;CACjB,WAAW;CACX,mBAAmB;CACnB,cAAc;AACf;CHxgCA;;AIAA;;AAAA;;iEAEiE;CAGhE;EACC,WAAW;EACX,moBAAmoB;EACnoB,cAAc;EACd,sBAAsB;EACtB,eAAe;EACf,cAAc;EACd,cAAc;EACd,mBAAmB;EACnB,qCAAqC;CACtC;EAGC;GACC,cAAc;EACf;;EAEA;GACC,mBAAmB;EACpB;IAIE;KACC,kBAAkB;KAClB,eAAe;KACf,qBAAqB;IACtB;;CAKH;;AAjCD;EAkCE,oBAAoB;AAiBtB;;EAfE;GACC,aAAa;EAYd;IATE;KACC,cAAc;KACd,qBAAqB;KACrB,eAAe;KACf,+BAA+B;KAC/B,sBAAsB;KACtB,WAAW;IACZ;CAGH;CJtDD;;AKAA;AAAA;CACC,+BAA+B;CAC/B,cAAc;CACd,aAAa;CACb,8BAA8B;AAe/B;;CAbC;EACC,oCAAoC;CACrC;;CAEA;EACC;GACC,eAAe;GACf,aAAa;GACb,qBAAqB;GACrB,gDAAgD;GAChD,+BAA+B;EAChC;CACD;CLlBD;;AMAA;;AAAA;CACC,aAAa;AACd;CAGC;EACC,cAAc;CACf;CAIA;EACC,cAAc;CACf;CAIA;EACC,cAAc;CACf;CNnBD;;AOAA;;AAAA;+CAC+C;EAI7C;GACC,eAAe;GACf,gCAAgC;EAKjC;;GAHC;IACC,gBAAgB;GACjB;CPXH;;AQAA;CACC;EACC,gCAAgC;CAWjC;;EATC;GACC,kBAAkB;EACnB;GAGC;IACC,kBAAkB;GACnB;;CAIF;EACC,sCAAsC;CACvC;;CAEA;EACC,0CAA0C;CAC3C;;CAEA;EACC,yBAAyB;CAC1B;CRzBD;;ASAA;CACC;EACC,wBAAwB;EACxB,mBAAmB;EACnB,qBAAqB;CAMtB;;EAJC;GACC,8BAA8B;GAC9B,0BAA0B;EAC3B;;AAIF;CACC,kBAAkB;CAClB,UAAU;AA0FX;;CAxFC;EACC,gBAAgB;EAChB,MAAM;CACP;;CAEA;EACC,gBAAgB;EAChB,wBAAwB;EACxB,mBAAmB;EACnB,qBAAqB;CACtB;EAGC;GACC,UAAU;GACV,8BAA8B;GAC9B,0BAA0B;EAC3B;;EAKA;GACC,mBAAmB;GACnB,gBAAgB;EAgBjB;;GAdC;IACC,WAAW;GACZ;;GAEA;IACC,UAAU;GAQX;;IANC;KACC,YAAY;KACZ,eAAe;KACf,iBAAiB;KACjB,mBAAmB;IACpB;;EAIF;GACC,kBAAkB;EAKnB;;GAHC;IACC,gBAAgB;GACjB;;CAIF;EACC,kBAAkB;EAClB,wCAAwC;EACxC,mBAAmB;EACnB,8BAA8B;CAC/B;;CAEA;;AA9DD;EA+DE,oCAAoC;EACpC,+BAA+B;EAC/B,2DAA2D;EAC3D,gDAAgD;EAChD,gBAAgB;EAChB,QAAQ;EACR,gBAAgB;EAChB,iCAAiC;EACjC,oBAAoB;AAqBtB;;EAnBE;GACC,kBAAkB;GAClB,aAAa;EACd;;EAEA;GACC,aAAa;GACb,SAAS;GACT,mBAAmB;GACnB,QAAQ;EACT;GAIC;IACC,aAAa;GACd;CAEF;;AAGD;CACC,qBAAqB;CACrB,wBAAwB;CACxB,sCAAsC;CACtC,YAAY;CACZ,kBAAkB;CAClB,kBAAkB;CAClB,iBAAiB;CACjB,qBAAqB;CACrB,kBAAkB;CAClB,WAAW;AAKZ;;CAHC;EACC,UAAU;CACX;CTzHD;;AUAA;AAAA;CACC,kBAAkB;AAqBnB;;CAnBC;EACC,kBAAkB;EAClB,qBAAqB;EACrB,oBAAoB;EACpB,qBAAqB;CAMtB;;EAJC;GACC,wBAAwB;GACxB,0BAA0B;EAC3B;;CAGD;EACC,wBAAwB;EACxB,gBAAgB;EAChB,oBAAoB;EACpB,gBAAgB;EAChB,aAAa;CACd;CVrBD;;AWAA;;AAAA;;iEAEiE;;AAEjE;CACC,aAAa;CACb,mBAAmB;CACnB,8BAA8B;AAqC/B;;CAnCC;EACC,gBAAgB;CACjB;;CAEA;EACC,oBAAoB;EACpB,kCAAkC;EAClC,kCAAkC;CAKnC;;EAHC;GACC,+BAA+B;EAChC;;CAGD;EACC,cAAc;EACd,sCAAsC;EACtC,OAAO;CAMR;;EAJC;GACC,gCAAgC;GAChC,gDAAgD;EACjD;;CAGD;;AA9BD;EA+BE,uBAAuB;EACvB,sBAAsB;EACtB,0CAA0C;AAO5C;;EALE;GACC,cAAc;GACd,cAAc;EACf;CACD;;AAGD;CACC,gBAAgB;AAiBjB;EAdE;GACC,mCAAmC;GACnC,qBAAqB;GACrB,SAAS;EACV;;CAGD;GAEE;IACC,SAAS;GACV;CAEF;CX/DD;;AYAA;;AAAA,8EAA8E;;AAE9E;CACC,kHAAkH;CAClH,aAAa;AACd;;AAEA;CACC,4DAA4D;CAC5D,wCAAwC;;CAExC,sCAAsC;CACtC,qBAAqB;;CAErB,iDAAiD;CACjD,kBAAkB;AACnB;;AAEA;CACC,kFAAkF;CAClF,YAAY;;CAEZ,+DAA+D;CAC/D,gBAAgB;AACjB;;AAEA;;CAEC,iCAAiC;CACjC,iBAAiB;CACjB,cAAc;CACd,aAAa;;CAEb,+BAA+B;CAC/B,wBAAwB;AACzB;CZnCA;;AaAA;;AAAA;;iEAEiE;;AAEjE;CACC,+BAA+B;AAwFhC;;CAtFC;EACC,gBAAgB;CACjB;;CAEA;EACC,0BAA0B;EAC1B,iCAA8B;UAA9B,8BAA8B;CAC/B;;CAEA;;;;EAIC,0CAA0C;EAC1C,+BAA+B;EAC/B,cAAc;CAKf;;EAHC;;CARD;;;;GASE,gCAAgC;CAElC;EADC;;CAGD;EACC;GACC,YAAY;GACZ,sCAAsC;EACvC;CACD;;CAEA;;EAEC,iBAAiB;EACjB,iBAAiB;CAuBlB;;EArBC;GACC,qBAAqB;EAKtB;;GAHC;IACC,gBAAgB;GACjB;;EAGD;GACC,wBAAwB;EACzB;;EAEA;GACC,+BAA+B;EAChC;;EAEA;;;;GAEC,oBAAoB;GACpB,gBAAgB;EACjB;;CAGD;EACC,eAAe;EACf,kBAAkB;EAClB,wBAAwB;EACxB,gBAAgB;CACjB;;CAEA,yBAAyB;CACzB;;EAEC,sBAAsB;EACtB,qBAAqB;EACrB,yBAAyB;CAC1B;;CAEA;EACC,yCAAyC;CAY1C;;EAVC;GACC,cAAc;GACd,cAAc;EACf;;EAEA;;CARD;GASE,+BAA+B;GAC/B,iBAAiB;GACjB,kBAAkB;CAEpB;EADC;Cb3FF;;AcAA;;AAAA,sDAAsD;;AAEtD;;CAEC,uBAAuB;CACvB,qCAAqC;AAMtC;;CAJC;;AALD;;EAME,yBAAyB;EACzB,yCAAyC;AAE3C;CADC;;AAGD;CACC,UAAU;CACV,UAAU;CACV,UAAU;CACV,UAAU;CACV,4DAA4D;;CAE5D,kBAAkB;AACnB;;AAEA;;;;CAIC,YAAY;AACb;;AAEA;CACC,UAAU;CACV,UAAU;AACX;;AAEA;CACC,YAAY;AACb;;AAEA;;;;;CAKC,UAAU;CACV,UAAU;AACX;;AAEA;;CAEC,UAAU;CACV,UAAU;AACX;;AAEA;;;;;CAKC,iBAAiB;AAClB;;AAEA;;CAEC,gDAAgD;AACjD;;AAEA;;;;;;CAMC,UAAU;CACV,UAAU;AACX;;AAEA;;;;CAIC,UAAU;CACV,UAAU;CACV,iBAAiB;AAClB;;AAEA;;CAEC,UAAU;CACV,UAAU;AACX;;AAEA;;CAEC,SAAS;CACT,UAAU;CACV,UAAU;AACX;CdjGA;;AcmGA;;AAAA;CACC;EACC,aAAa;EACb,aAAa;EACb,aAAa;EACb,UAAU;EACV,4DAA4D;;EAE5D,kBAAkB;CACnB;;CAEA;;;;EAIC,UAAU;CACX;;CAEA;EACC,UAAU;EACV,UAAU;CACX;;CAEA;EACC,YAAY;CACb;;CAEA;;;;;EAKC,UAAU;EACV,WAAW;CACZ;;CAEA;;EAEC,UAAU;CACX;;CAEA;;;;;;EAMC,UAAU;CACX;;CAEA;;EAEC,gDAAgD;CACjD;;CAEA;;;;;;EAMC,UAAU;EACV,UAAU;CACX;;CAEA;;;;EAIC,UAAU;EACV,UAAU;CACX;;CAEA;;EAEC,UAAU;EACV,UAAU;CACX;;CAEA;;EAEC,SAAS;EACT,UAAU;EACV,UAAU;CACX;AACD;AAAA;;AAxLA;;AA0LA;;;CAGC,iBAAiB;AAClB;;AAEA;CACC,kBAAkB;AACnB;;AAEA;CACC,YAAY;AACb;CdtMA;;AeAA;AAAA,eAAe;AACf;CACC,gCAAgC;CAChC,wBAAwB;AACzB;;AAEA,+BAA+B;AAC/B;CACC;AACD;;AAEA;CACC;AACD;;AAEA,+BAA+B;AAC/B;CACC;AACD;;AAEA;CACC;AACD;;AAEA;;;;CAIC;AACD;;AAEA,oDAAoD;AACpD;;;;CAIC,mBAAmB;AACpB;;AAEA;;;;CAIC,mBAAmB;AACpB;;AAEA;;;;CAIC,oBAAoB;AACrB;;AAEA;;;;CAIC,oBAAoB;AACrB;;AAEA;CACC,oBAAoB;AACrB;;AAEA;CACC,oBAAoB;AACrB;CflEA","file":"/johan.css.map","sourcesContent":["/* Styles for Johan Brook.com\n\nBuilt for IE6, made in Dreamweaver.\n\nJust kidding.\n--------------------------------------------- */\n\n@layer setup,\nbase,\nviews,\ncomponents,\nutils;\n\n@import 'css/reset.css' layer(setup);\n@import 'css/variables.css' layer(setup);\n\n@import 'css/base.css' layer(base);\n@import 'css/utils.css' layer(utils);\n@import 'css/footer.css' layer(base);\n\n@import 'css/layout.css' layer(base);\n\n@import 'css/admin.css' layer(views);\n@import 'css/changelog.css' layer(views);\n\n@import 'css/notes.css' layer(components);\n@import 'css/navigation.css' layer(components);\n@import 'css/notes.css' layer(components);\n@import 'css/page-nav.css' layer(components);\n@import 'css/posts-list.css' layer(components);\n@import 'css/autogrow.css' layer(utils);\n@import 'css/prose.css' layer(components);\n\n@import 'css/prism-matrix.css' layer(base);\n@import 'css/typeset.css' layer(utils);\n","/* https://github.com/mayank99/reset.css/blob/main/package/index.css@0.7.0 */\n*,\n*::before,\n*::after {\n\tmargin: 0;\n\tpadding: 0;\n\tbox-sizing: border-box;\n}\n\n:where([hidden]:not([hidden='until-found'])) {\n\tdisplay: none !important;\n}\n\n:where(html) {\n\t-webkit-text-size-adjust: none;\n\tcolor-scheme: dark light;\n}\n\n@media (prefers-reduced-motion: no-preference) {\n\t:where(html:focus-within) {\n\t\tscroll-behavior: smooth;\n\t}\n}\n\n:where(body) {\n\tline-height: 1.5;\n\tfont-family: system-ui, sans-serif;\n\t-webkit-font-smoothing: antialiased;\n}\n\n:where(input, button, textarea, select) {\n\tfont: inherit;\n\tcolor: inherit;\n}\n\n:where(textarea) {\n\tresize: vertical;\n\tresize: block;\n}\n\n:where(button, label, select, summary, [role='button'], [role='option']) {\n\tcursor: pointer;\n}\n\n:where(:disabled) {\n\tcursor: not-allowed;\n}\n\n:where(label:has(> input:disabled), label:has(+ input:disabled)) {\n\tcursor: not-allowed;\n}\n\n:where(button) {\n\tborder-style: solid;\n}\n\n:where(a) {\n\tcolor: inherit;\n\ttext-underline-offset: 0.2ex;\n}\n\n:where(ul, ol) {\n\tlist-style: none;\n}\n\n:where(img, svg, video, canvas, audio, iframe, embed, object) {\n\tdisplay: block;\n}\n\n:where(img, picture, svg, video) {\n\tmax-inline-size: 100%;\n\tblock-size: auto;\n}\n\n:where(p, h1, h2, h3, h4, h5, h6) {\n\toverflow-wrap: break-word;\n}\n\n:where(h1, h2, h3) {\n\tline-height: calc(1em + 0.5rem);\n\ttext-wrap: balance;\n}\n\n:where(hr) {\n\tborder: none;\n\tborder-block-start: 1px solid;\n\tcolor: inherit;\n\tblock-size: 0;\n\toverflow: visible;\n}\n\n:where(:focus-visible) {\n\toutline: 3px solid Highlight;\n\toutline-offset: 2px;\n\tscroll-margin-block: 10vh;\n}\n\n:where(.visually-hidden:not(:focus-within, :active)) {\n\tclip-path: inset(50%) !important;\n\theight: 1px !important;\n\twidth: 1px !important;\n\toverflow: hidden !important;\n\tposition: absolute !important;\n\twhite-space: nowrap !important;\n\tborder: 0 !important;\n}\n",null,":root {\n\t/* Colors */\n\n\t--neon: hsl(145 56% 57%);\n\t--yellow: hsl(50 93% 56%);\n\t--grey: hsl(214.51 7.24% 47.56%);\n\t--grey-light: hsl(173 7% 36% / 0.5);\n\t--grey-lightest: hsl(173 7% 93%);\n\n\t--color-bg: #fff;\n\t--color-bg-secondary: hsl(112 29.98% 97%);\n\t--color-text: hsl(0 0% 13%);\n\t--color-text-high-contrast: black;\n\t--color-text-detail: var(--grey);\n\n\t--link-color: hsl(201.43, 100%, 37.25%);\n\t--link-color-hover: hsl(201.43, 100%, 25.25%);\n\t--link-color-visited: hsl(266 100% 44%);\n\t--link-underline-color: hsl(201.43 43.1% 56.06% / 0.47);\n\t--border-color: var(--grey);\n\n\t--btn-color: hsl(213 100% 50%);\n\t--btn-color-hover: hsl(213 100% 41%);\n\t--btn-color-active: hsl(213 100% 33%);\n\t--btn-color-disabled: var(--grey);\n\n\t--focus-color: var(--link-color);\n\n\t--pre-background: var(--color-bg-secondary);\n\t--code-background: var(--color-bg-secondary);\n\t--code-color: hsl(112 30% 30%);\n\n\t--hr-color: var(--color-text);\n\n\t@supports (color: color(display-p3 1 1 1 / 1)) {\n\t\t--link-color: color(display-p3 0 0.425 0.73);\n\t\t--link-color-hover: color(display-p3 0.01 0.295 0.495);\n\t\t--link-color-visited: color(display-p3 0.431 0.053 0.965);\n\t}\n\n\t@media screen and (prefers-color-scheme: dark) {\n\t\t--yellow: #c3a507;\n\t\t--grey: hsl(214.51, 6.64%, 61.44%);\n\t\t--grey-lightest: hsl(173 7% 17%);\n\n\t\t--color-bg: #1a1a1a;\n\t\t--color-bg-secondary: hsl(240 3.36% 14.51%);\n\t\t--color-text: hsl(0, 0%, 86%);\n\t\t--color-text-high-contrast: white;\n\t\t--link-color: hsl(201.43 94.7% 62.23%);\n\t\t--link-color-hover: hsl(201.43, 93.43%, 69.58%);\n\t\t--link-underline-color: hsl(201.43 57.86% 50.17% / 0.47);\n\t\t--link-color-visited: #7a8be5;\n\t\t--border-color: var(--color-text-detail);\n\t\t--code-color: hsl(112 80% 80%);\n\n\t\t@supports (color: color(display-p3 1 1 1 / 1)) {\n\t\t\t--link-color: color(display-p3 0.38 0.742 1);\n\t\t\t--link-color-hover: color(display-p3 0.577 0.82 0.995);\n\t\t}\n\t}\n\n\t/* Typography */\n\n\t--sans: system-ui, sans-serif;\n\t--mono: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace;\n\t--serif: 'Iowan Old Style', 'Palatino Linotype', 'URW Palladio L', P052, serif;\n\n\t--font-size-base: 18;\n\t--leading: 1.618;\n\t/* Rhythm unit */\n\t--lineheight: calc(var(--leading) * 1rem);\n\n\t--tracking: -0.014em;\n\t--tracking-f0: -0.022em;\n\t--tracking-f1: -0.021em;\n\t--tracking-f2: -0.02em;\n\t--tracking-f3: -0.018em;\n\t--tracking-f4: -0.014em;\n\t--tracking-f5: -0.009em;\n\t--tracking-f6: -0.0025em;\n\n\t--f0: calc((72 / var(--font-size-base)) * 1rem);\n\t--f1: calc((36 / var(--font-size-base)) * 1rem);\n\t--f2: calc((30 / var(--font-size-base)) * 1rem);\n\t--f3: calc((26 / var(--font-size-base)) * 1rem);\n\t--f4: 1rem;\n\t--f5: calc((15 / var(--font-size-base)) * 1rem);\n\t--f6: calc((13 / var(--font-size-base)) * 1rem);\n\t--f7: calc((11 / var(--font-size-base)) * 1rem);\n\n\t/* Measures */\n\n\t--inset: calc(var(--lineheight) / 2);\n\n\t--measure: 65ch;\n\t--measure-narrow: 45ch;\n\t--measure-wide: 100ch;\n\n\t--content-width: var(--measure);\n\n\t--spacing-base: var(--lineheight);\n\n\t--spacing-none: 0;\n\t--spacing-extra-small: calc(var(--spacing-base) / 5);\n\t--spacing-small: calc(var(--spacing-base) / 2);\n\t--spacing-medium: var(--spacing-base);\n\t--spacing-large: calc(var(--spacing-base) * 2);\n\t--spacing-extra-large: calc(var(--spacing-base) * 3);\n\t--spacing-extra-extra-large: calc(var(--spacing-base) * 4);\n\t--spacing-extra-extra-extra-large: calc(var(--spacing-base) * 6);\n\n\t@media screen and (max-width: 980px) {\n\t\t--inset: var(--lineheight);\n\t\t--font-size-base: 16;\n\t}\n}\n","/* =ELEMENTS\n--------------------------------------------- */\n\nhtml {\n\t/* https://kilianvalkhof.com/2022/css-html/your-css-reset-needs-text-size-adjust-probably/ */\n\t-moz-text-size-adjust: none;\n\t-webkit-text-size-adjust: none;\n\ttext-size-adjust: none;\n}\n\n:where(body, html) {\n\tfont: normal calc(var(--font-size-base) * 1px) / var(--leading) var(--serif);\n\tbackground-color: var(--color-bg);\n\tcolor: var(--color-text);\n}\n\nbody {\n\tpadding: var(--inset);\n\tline-height: var(--leading);\n\tletter-spacing: var(--tracking);\n\tfont-feature-settings:\n\t\t/* Contextual alternates */\n\t\t'calt' 1,\n\t\t'kern' 1,\n\t\t'liga' 1;\n\tfont-variant-ligatures: contextual common-ligatures;\n\n\t@media screen and (prefers-color-scheme: dark) {\n\t\tword-spacing: 0.05em;\n\t}\n\n\t@media screen and (min-width: 980px) {\n\t\tpadding-top: calc(var(--inset) * 2);\n\t}\n}\n\nmain {\n\tmax-width: var(--content-width);\n\tmargin-bottom: calc(var(--lineheight) * 3);\n}\n\n:target {\n\tscroll-margin-block: 5ex;\n}\n\n:focus-visible {\n outline: 2px solid black;\n box-shadow: 0 0 0 4px white;\n border-radius: .25em;\n}\n\n/* =HEADINGS\n--------------------------------------------- */\n\nh1,\nh2,\nh3,\nh4,\nh5,\nh6 {\n\tmargin-block-end: 0;\n\tmargin-bottom: calc(var(--lineheight) / 2);\n\tcolor: var(--color-text-high-contrast);\n}\n\n.f0,\n.title {\n\tfont-size: clamp(var(--f1), 12vw, var(--f0));\n\tletter-spacing: var(--tracking-f0);\n\tline-height: calc(var(--leading) * 0.75);\n}\n\nh1,\n.f1 {\n\tfont-size: var(--f1);\n\tletter-spacing: var(--tracking-f1);\n}\n\nh2,\n.f2 {\n\tfont-size: var(--f2);\n\tletter-spacing: var(--tracking-f2);\n}\n\nh3,\n.f3 {\n\tfont-size: var(--f3);\n\tletter-spacing: var(--tracking-f3);\n}\n\nh4,\n.f4 {\n\tfont-size: var(--f4);\n\tletter-spacing: var(--tracking-f4);\n}\n\nh5,\n.f5 {\n\tfont-size: var(--f5);\n\tletter-spacing: var(--tracking-f5);\n}\n\nh6,\n.f6 {\n\tfont-size: var(--f6);\n\tletter-spacing: var(--tracking-f6);\n}\n\n.f7 {\n\tfont-size: var(--f7);\n}\n\nul,\nol {\n\tpadding-left: 0;\n}\n\nnav ul {\n\tlist-style: none;\n\tmargin: 0;\n\tpadding: 0;\n}\n\na,\n.link {\n\tcolor: var(--link-color);\n\tposition: relative;\n\ttext-decoration: none;\n\ttext-underline-offset: 3px;\n\n\t&:not(.prose &) {\n\t\tfont-family: var(--sans);\n\t}\n\n\t&.block {\n\t\ttext-decoration: none;\n\t\tfont-weight: unset;\n\t}\n\n\t&:hover,\n\t&:hover .link {\n\t\tcolor: var(--link-color-hover);\n\t\ttext-decoration-color: currentColor;\n\t}\n\n\t&:not(.block):hover, &:hover .link {\n\t\ttext-decoration: underline;\n\t}\n\n\t&:active {\n\t\ttop: 1px;\n\t}\n\n\t&.muted {\n\t\ttext-decoration: none;\n\n\t\t&:hover {\n\t\t\ttext-decoration: underline;\n\t\t}\n\t}\n}\n\np,\nul,\nol,\nblockquote,\ntable,\nfigure,\npre {\n\tmargin: 0 0 var(--lineheight);\n}\n\nimg {\n\tmax-width: 100%;\n\theight: auto;\n}\n\npre,\ncode {\n\tfont-family: var(--mono);\n}\n\n:not(pre)>code {\n\tbackground-color: var(--code-background);\n\tpadding: 2px 4px;\n\tborder-radius: 4px;\n\tcolor: var(--code-color);\n}\n\nfigcaption {\n\tcolor: var(--grey);\n}\n\ntable {\n\t--spacing: 0.25em;\n\n\ttext-align: left;\n\twidth: 100%;\n\tborder-collapse: collapse;\n\tborder-spacing: 0;\n\n\t&.textual {\n\t\t--spacing: .6em;\n\n\t\t& th {\n\t\t\ttext-transform: lowercase;\n\t\t\tfont-weight: normal;\n\t\t\tfont-size: var(--f4);\n\t\t\tfont-variant: small-caps;\n\t\t}\n\n\t\t& td {\n\t\t\tvertical-align: top;\n\t\t\tborder-bottom: 1px solid var(--grey-lightest);\n\t\t}\n\n\t\t& tr>td:first-of-type {\n\t\t\tfont-weight: bold;\n\t\t\twidth: 25%;\n\t\t}\n\n\t\t& tr>td:nth-of-type(2) {\n\t\t\twidth: 15%;\n\t\t}\n\t}\n}\n\nth {\n\tborder-bottom: 2px solid var(--grey-light);\n\tpadding: var(--spacing);\n\tfont-weight: bold;\n\tfont-size: var(--f5);\n\tposition: sticky;\n\ttop: 0;\n\tbackground-color: var(--color-bg);\n}\n\ntd {\n\tpadding: var(--spacing);\n}\n\nth,\ntd {\n\t&:first-child {\n\t\tpadding-left: 0;\n\t}\n}\n\npre {\n\t--tab-size: 2;\n\t--top-inset: calc(var(--lineheight) / 2);\n\n\tdirection: ltr;\n\ttext-align: left;\n\tline-height: var(--leading);\n\twhite-space: pre;\n\tword-spacing: normal;\n\tword-break: normal;\n\thyphens: none;\n\ttab-size: var(--tab-size);\n\tbackground: var(--pre-background);\n\tcolor: var(--code-color);\n\tborder-radius: 8px;\n\tpadding: var(--top-inset) calc(var(--lineheight));\n\t-webkit-font-smoothing: subpixel-antialiased;\n\t-moz-osx-font-smoothing: none;\n\tfont-size: var(--f5);\n\toverflow: auto;\n\tposition: relative;\n\n\t@media screen and (max-width: 480px) {\n\t\tpadding-left: 0.25em;\n\t}\n\n\t& .line-highlight {\n\t\t--cycle: 27px;\n\t\t--color: 112 20% 50%;\n\t\ttext-decoration: none;\n\t\tposition: absolute;\n\t\theight: calc(var(--rows) * var(--cycle));\n\t\ttop: calc(var(--top-inset) + (var(--start) - 1) * var(--cycle));\n\t\tbackground-color: hsl(var(--color) / 4%);\n\t\tcolor: hsl(var(--color) / 80%);\n\t\tleft: 0;\n\t\twidth: 100%;\n\t\tdisplay: block;\n\t\tpointer-events: none;\n\t\tpadding: 0 6px;\n\t\tfont-size: var(--f7);\n\t}\n}\n\nli>pre {\n\tmargin-top: calc(var(--lineheight) / 2);\n\tmargin-bottom: calc(var(--lineheight) / 2);\n}\n\n/* Syntax highlighting */\ncode[class*='language-'] {\n\tdisplay: block;\n}\n\nblockquote {\n\tborder-left: 2px solid var(--grey-light);\n\tmargin: calc(var(--lineheight) * 2) 2rem calc(var(--lineheight) * 2) 0;\n\tpadding-left: 1rem;\n\tpadding-right: 1rem;\n\tcolor: var(--color-text-high-contrast);\n\n\t&>p {\n\t\tmargin-bottom: calc(var(--lineheight) / 2);\n\t}\n\n\t& footer {\n\t\tcolor: var(--grey);\n\t\tmargin-top: var(--lineheight);\n\t}\n}\n\nhr {\n\tborder: 0;\n\tbackground-color: var(--hr-color);\n\theight: .7rem;\n\taspect-ratio: 1 / 1;\n\tmargin: calc(var(--lineheight) * 2) 0;\n\tborder-radius: 100%;\n}\n\ntextarea {\n\tpadding: 0.5em;\n\tborder: 1px solid var(--grey);\n\tborder-radius: 0.4em;\n\tresize: vertical;\n\n\t&:focus {\n\t\toutline: 0;\n\t\tborder-color: var(--link-color);\n\t}\n}\n",".skip-link {\n\tposition: fixed;\n\ttop: var(--inset);\n\tleft: var(--inset);\n}\n\n/*\nBUTTONS\n----------------------------------------------------------------*/\n\n.btn {\n\tappearance: none;\n\tborder: 0;\n\tbackground: none;\n\ttext-decoration: none;\n\tcolor: var(--link-color);\n\ttext-align: center;\n\ttext-transform: lowercase;\n\tborder-radius: 6px;\n\tfont-weight: 500;\n\tbox-shadow: currentColor 0 0 0 1px;\n\tpadding: 0.3em 0.6em;\n\twhite-space: nowrap;\n\ttext-overflow: ellipsis;\n\tdisplay: inline-block;\n\toverflow: hidden;\n\tmax-width: 100%;\n\n\t&:not([disabled]) {\n\t\tcursor: pointer;\n\t}\n\n\t&:hover {\n\t\ttext-decoration: none;\n\t}\n\n\t&:hover {\n\t\ttext-decoration: none;\n\t\tcolor: var(--link-color-hover);\n\t}\n\n\t&:active,\n\t&:active {\n\t\tcolor: var(--link-color-active);\n\t}\n\n\t&[disabled] {\n\t\tcolor: var(--btn-color-disabled);\n\t}\n}\n\n/*\nOPEN TYPE\n----------------------------------------------------------------*/\n\n.plain-font-features {\n\tfont-feature-settings:\n\t\t/* Contextual alternates */\n\t\t'calt' 1, 'kern' 1,\n\t\t'liga' 1,\n\t\t/* Open digis */\n\t\t'ss01' 1,\n\t\t/* Curved 'r' */\n\t\t'ss03' 1,\n\t\t/* Disambiguation */\n\t\t'ss04' 0, 'frac' 1;\n}\n\n/*\nFONT STYLES\n----------------------------------------------------------------*/\n\n.i {\n\tfont-style: italic;\n}\n\n/*\nFONT WEIGHTS\n----------------------------------------------------------------*/\n\n.normal {\n\tfont-weight: normal;\n}\n\n.b {\n\tfont-weight: bold;\n}\n\n.fw1 {\n\tfont-weight: 100;\n}\n\n.fw2 {\n\tfont-weight: 200;\n}\n\n.fw3 {\n\tfont-weight: 300;\n}\n\n.fw4 {\n\tfont-weight: 400;\n}\n\n.fw5 {\n\tfont-weight: 500;\n}\n\n.fw6 {\n\tfont-weight: 600;\n}\n\n.fw7 {\n\tfont-weight: 700;\n}\n\n.fw8 {\n\tfont-weight: 800;\n}\n\n.fw9 {\n\tfont-weight: 900;\n}\n\n/*\nTEXT ALIGNMENT\n----------------------------------------------------------------*/\n\n.tl {\n\ttext-align: left;\n}\n\n.tr {\n\ttext-align: right;\n}\n\n.tc {\n\ttext-align: center;\n}\n\n.tj {\n\ttext-align: justify;\n}\n\n.w-full {\n\twidth: 100%;\n}\n\n.block {\n\tdisplay: block;\n}\n\n/*\nFLEXBOX\n----------------------------------------------------------------*/\n\n.flex {\n\tdisplay: flex;\n}\n\n.inline-flex {\n\tdisplay: inline-flex;\n}\n\n.gap-1 {\n\tgap: 0.5em;\n}\n\n.gap {\n\tgap: 1.5em;\n}\n\n/* 1. Fix for Chrome 44 bug.\n * https://code.google.com/p/chromium/issues/detail?id=506893 */\n.flex-auto {\n\tflex: 1 1 auto;\n\tmin-width: 0;\n\t/* 1 */\n\tmin-height: 0;\n\t/* 1 */\n}\n\n.flex-1 {\n\tflex: 1;\n}\n\n.flex-none {\n\tflex: none;\n}\n\n.flex-column {\n\tflex-direction: column;\n}\n\n.flex-row {\n\tflex-direction: row;\n}\n\n.flex-wrap {\n\tflex-wrap: wrap;\n}\n\n.flex-nowrap {\n\tflex-wrap: nowrap;\n}\n\n.flex-wrap-reverse {\n\tflex-wrap: wrap-reverse;\n}\n\n.flex-column-reverse {\n\tflex-direction: column-reverse;\n}\n\n.flex-row-reverse {\n\tflex-direction: row-reverse;\n}\n\n.items-start {\n\talign-items: flex-start;\n}\n\n.items-end {\n\talign-items: flex-end;\n}\n\n.items-center {\n\talign-items: center;\n}\n\n.items-baseline {\n\talign-items: baseline;\n}\n\n.items-stretch {\n\talign-items: stretch;\n}\n\n.self-start {\n\talign-self: flex-start;\n}\n\n.self-end {\n\talign-self: flex-end;\n}\n\n.self-center {\n\talign-self: center;\n}\n\n.self-baseline {\n\talign-self: baseline;\n}\n\n.self-stretch {\n\talign-self: stretch;\n}\n\n.justify-start {\n\tjustify-content: flex-start;\n}\n\n.justify-end {\n\tjustify-content: flex-end;\n}\n\n.justify-center {\n\tjustify-content: center;\n}\n\n.justify-between {\n\tjustify-content: space-between;\n}\n\n.justify-around {\n\tjustify-content: space-around;\n}\n\n.justify-evenly {\n\tjustify-content: space-evenly;\n}\n\n.content-start {\n\talign-content: flex-start;\n}\n\n.content-end {\n\talign-content: flex-end;\n}\n\n.content-center {\n\talign-content: center;\n}\n\n.content-between {\n\talign-content: space-between;\n}\n\n.content-around {\n\talign-content: space-around;\n}\n\n.content-stretch {\n\talign-content: stretch;\n}\n\n/*\nSPACING\n----------------------------------------------------------------*/\n\n.pa0 {\n\tpadding: var(--spacing-none);\n}\n\n.pa1 {\n\tpadding: var(--spacing-extra-small);\n}\n\n.pa2 {\n\tpadding: var(--spacing-small);\n}\n\n.pa3 {\n\tpadding: var(--spacing-medium);\n}\n\n.pa4 {\n\tpadding: var(--spacing-large);\n}\n\n.pa5 {\n\tpadding: var(--spacing-extra-large);\n}\n\n.pa6 {\n\tpadding: var(--spacing-extra-extra-large);\n}\n\n.pa7 {\n\tpadding: var(--spacing-extra-extra-extra-large);\n}\n\n.pl0 {\n\tpadding-left: var(--spacing-none);\n}\n\n.pl1 {\n\tpadding-left: var(--spacing-extra-small);\n}\n\n.pl2 {\n\tpadding-left: var(--spacing-small);\n}\n\n.pl3 {\n\tpadding-left: var(--spacing-medium);\n}\n\n.pl4 {\n\tpadding-left: var(--spacing-large);\n}\n\n.pl5 {\n\tpadding-left: var(--spacing-extra-large);\n}\n\n.pl6 {\n\tpadding-left: var(--spacing-extra-extra-large);\n}\n\n.pl7 {\n\tpadding-left: var(--spacing-extra-extra-extra-large);\n}\n\n.pr0 {\n\tpadding-right: var(--spacing-none);\n}\n\n.pr1 {\n\tpadding-right: var(--spacing-extra-small);\n}\n\n.pr2 {\n\tpadding-right: var(--spacing-small);\n}\n\n.pr3 {\n\tpadding-right: var(--spacing-medium);\n}\n\n.pr4 {\n\tpadding-right: var(--spacing-large);\n}\n\n.pr5 {\n\tpadding-right: var(--spacing-extra-large);\n}\n\n.pr6 {\n\tpadding-right: var(--spacing-extra-extra-large);\n}\n\n.pr7 {\n\tpadding-right: var(--spacing-extra-extra-extra-large);\n}\n\n.pb0 {\n\tpadding-bottom: var(--spacing-none);\n}\n\n.pb1 {\n\tpadding-bottom: var(--spacing-extra-small);\n}\n\n.pb2 {\n\tpadding-bottom: var(--spacing-small);\n}\n\n.pb3 {\n\tpadding-bottom: var(--spacing-medium);\n}\n\n.pb4 {\n\tpadding-bottom: var(--spacing-large);\n}\n\n.pb5 {\n\tpadding-bottom: var(--spacing-extra-large);\n}\n\n.pb6 {\n\tpadding-bottom: var(--spacing-extra-extra-large);\n}\n\n.pb7 {\n\tpadding-bottom: var(--spacing-extra-extra-extra-large);\n}\n\n.pt0 {\n\tpadding-top: var(--spacing-none);\n}\n\n.pt1 {\n\tpadding-top: var(--spacing-extra-small);\n}\n\n.pt2 {\n\tpadding-top: var(--spacing-small);\n}\n\n.pt3 {\n\tpadding-top: var(--spacing-medium);\n}\n\n.pt4 {\n\tpadding-top: var(--spacing-large);\n}\n\n.pt5 {\n\tpadding-top: var(--spacing-extra-large);\n}\n\n.pt6 {\n\tpadding-top: var(--spacing-extra-extra-large);\n}\n\n.pt7 {\n\tpadding-top: var(--spacing-extra-extra-extra-large);\n}\n\n.pv0 {\n\tpadding-top: var(--spacing-none);\n\tpadding-bottom: var(--spacing-none);\n}\n\n.pv1 {\n\tpadding-top: var(--spacing-extra-small);\n\tpadding-bottom: var(--spacing-extra-small);\n}\n\n.pv2 {\n\tpadding-top: var(--spacing-small);\n\tpadding-bottom: var(--spacing-small);\n}\n\n.pv3 {\n\tpadding-top: var(--spacing-medium);\n\tpadding-bottom: var(--spacing-medium);\n}\n\n.pv4 {\n\tpadding-top: var(--spacing-large);\n\tpadding-bottom: var(--spacing-large);\n}\n\n.pv5 {\n\tpadding-top: var(--spacing-extra-large);\n\tpadding-bottom: var(--spacing-extra-large);\n}\n\n.pv6 {\n\tpadding-top: var(--spacing-extra-extra-large);\n\tpadding-bottom: var(--spacing-extra-extra-large);\n}\n\n.pv7 {\n\tpadding-top: var(--spacing-extra-extra-extra-large);\n\tpadding-bottom: var(--spacing-extra-extra-extra-large);\n}\n\n.ph0 {\n\tpadding-left: var(--spacing-none);\n\tpadding-right: var(--spacing-none);\n}\n\n.ph1 {\n\tpadding-left: var(--spacing-extra-small);\n\tpadding-right: var(--spacing-extra-small);\n}\n\n.ph2 {\n\tpadding-left: var(--spacing-small);\n\tpadding-right: var(--spacing-small);\n}\n\n.ph3 {\n\tpadding-left: var(--spacing-medium);\n\tpadding-right: var(--spacing-medium);\n}\n\n.ph4 {\n\tpadding-left: var(--spacing-large);\n\tpadding-right: var(--spacing-large);\n}\n\n.ph5 {\n\tpadding-left: var(--spacing-extra-large);\n\tpadding-right: var(--spacing-extra-large);\n}\n\n.ph6 {\n\tpadding-left: var(--spacing-extra-extra-large);\n\tpadding-right: var(--spacing-extra-extra-large);\n}\n\n.ph7 {\n\tpadding-left: var(--spacing-extra-extra-extra-large);\n\tpadding-right: var(--spacing-extra-extra-extra-large);\n}\n\n.ma0 {\n\tmargin: var(--spacing-none);\n}\n\n.ma1 {\n\tmargin: var(--spacing-extra-small);\n}\n\n.ma2 {\n\tmargin: var(--spacing-small);\n}\n\n.ma3 {\n\tmargin: var(--spacing-medium);\n}\n\n.ma4 {\n\tmargin: var(--spacing-large);\n}\n\n.ma5 {\n\tmargin: var(--spacing-extra-large);\n}\n\n.ma6 {\n\tmargin: var(--spacing-extra-extra-large);\n}\n\n.ma7 {\n\tmargin: var(--spacing-extra-extra-extra-large);\n}\n\n.ml0 {\n\tmargin-left: var(--spacing-none);\n}\n\n.ml1 {\n\tmargin-left: var(--spacing-extra-small);\n}\n\n.ml2 {\n\tmargin-left: var(--spacing-small);\n}\n\n.ml3 {\n\tmargin-left: var(--spacing-medium);\n}\n\n.ml4 {\n\tmargin-left: var(--spacing-large);\n}\n\n.ml5 {\n\tmargin-left: var(--spacing-extra-large);\n}\n\n.ml6 {\n\tmargin-left: var(--spacing-extra-extra-large);\n}\n\n.ml7 {\n\tmargin-left: var(--spacing-extra-extra-extra-large);\n}\n\n.mx-auto {\n\tmargin-left: auto;\n\tmargin-right: auto;\n}\n\n.mx1 {\n\tmargin-right: var(--spacing-extra-small);\n\tmargin-left: var(--spacing-extra-small);\n}\n\n.mr0 {\n\tmargin-right: var(--spacing-none);\n}\n\n.mr1 {\n\tmargin-right: var(--spacing-extra-small);\n}\n\n.mr2 {\n\tmargin-right: var(--spacing-small);\n}\n\n.mr3 {\n\tmargin-right: var(--spacing-medium);\n}\n\n.mr4 {\n\tmargin-right: var(--spacing-large);\n}\n\n.mr5 {\n\tmargin-right: var(--spacing-extra-large);\n}\n\n.mr6 {\n\tmargin-right: var(--spacing-extra-extra-large);\n}\n\n.mr7 {\n\tmargin-right: var(--spacing-extra-extra-extra-large);\n}\n\n.mb0 {\n\tmargin-bottom: var(--spacing-none);\n}\n\n.mb1 {\n\tmargin-bottom: var(--spacing-extra-small);\n}\n\n.mb2 {\n\tmargin-bottom: var(--spacing-small);\n}\n\n.mb3 {\n\tmargin-bottom: var(--spacing-medium);\n}\n\n.mb4 {\n\tmargin-bottom: var(--spacing-large);\n}\n\n.mb5 {\n\tmargin-bottom: var(--spacing-extra-large);\n}\n\n.mb6 {\n\tmargin-bottom: var(--spacing-extra-extra-large);\n}\n\n.mb7 {\n\tmargin-bottom: var(--spacing-extra-extra-extra-large);\n}\n\n.mt0 {\n\tmargin-top: var(--spacing-none);\n}\n\n.mt1 {\n\tmargin-top: var(--spacing-extra-small);\n}\n\n.mt2 {\n\tmargin-top: var(--spacing-small);\n}\n\n.mt3 {\n\tmargin-top: var(--spacing-medium);\n}\n\n.mt4 {\n\tmargin-top: var(--spacing-large);\n}\n\n.mt5 {\n\tmargin-top: var(--spacing-extra-large);\n}\n\n.mt6 {\n\tmargin-top: var(--spacing-extra-extra-large);\n}\n\n.mt7 {\n\tmargin-top: var(--spacing-extra-extra-extra-large);\n}\n\n.mv0 {\n\tmargin-top: var(--spacing-none);\n\tmargin-bottom: var(--spacing-none);\n}\n\n.mv1 {\n\tmargin-top: var(--spacing-extra-small);\n\tmargin-bottom: var(--spacing-extra-small);\n}\n\n.mv2 {\n\tmargin-top: var(--spacing-small);\n\tmargin-bottom: var(--spacing-small);\n}\n\n.mv3 {\n\tmargin-top: var(--spacing-medium);\n\tmargin-bottom: var(--spacing-medium);\n}\n\n.mv4 {\n\tmargin-top: var(--spacing-large);\n\tmargin-bottom: var(--spacing-large);\n}\n\n.mv5 {\n\tmargin-top: var(--spacing-extra-large);\n\tmargin-bottom: var(--spacing-extra-large);\n}\n\n.mv6 {\n\tmargin-top: var(--spacing-extra-extra-large);\n\tmargin-bottom: var(--spacing-extra-extra-large);\n}\n\n.mv7 {\n\tmargin-top: var(--spacing-extra-extra-extra-large);\n\tmargin-bottom: var(--spacing-extra-extra-extra-large);\n}\n\n.mh0 {\n\tmargin-left: var(--spacing-none);\n\tmargin-right: var(--spacing-none);\n}\n\n.mh1 {\n\tmargin-left: var(--spacing-extra-small);\n\tmargin-right: var(--spacing-extra-small);\n}\n\n.mh2 {\n\tmargin-left: var(--spacing-small);\n\tmargin-right: var(--spacing-small);\n}\n\n.mh3 {\n\tmargin-left: var(--spacing-medium);\n\tmargin-right: var(--spacing-medium);\n}\n\n.mh4 {\n\tmargin-left: var(--spacing-large);\n\tmargin-right: var(--spacing-large);\n}\n\n.mh5 {\n\tmargin-left: var(--spacing-extra-large);\n\tmargin-right: var(--spacing-extra-large);\n}\n\n.mh6 {\n\tmargin-left: var(--spacing-extra-extra-large);\n\tmargin-right: var(--spacing-extra-extra-large);\n}\n\n.mh7 {\n\tmargin-left: var(--spacing-extra-extra-extra-large);\n\tmargin-right: var(--spacing-extra-extra-extra-large);\n}\n\n/*\nDISPLAY\n----------------------------------------------------------------*/\n\n.d-i {\n\tdisplay: inline;\n}\n\n.d-ib {\n\tdisplay: inline-block;\n}\n\n.d-b {\n\tdisplay: block;\n}\n\n/*\nBORDERS\n----------------------------------------------------------------*/\n\n.border {\n\tborder: 1px solid var(--border-color);\n}\n\n.border-b {\n\tborder-left-width: 0;\n\tborder-right-width: 0;\n\tborder-bottom-width: 1px;\n}\n\n.border-t {\n\tborder-left-width: 0;\n\tborder-right-width: 0;\n\tborder-top-width: 1px;\n}\n\n.border-b {\n\tborder-left-width: 0;\n\tborder-right-width: 0;\n\tborder-top-width: 0;\n\tborder-bottom-width: 1px;\n}\n\n/*\nCOLOURS\n----------------------------------------------------------------*/\n\n.text-bg {\n\tcolor: var(--color-bg);\n}\n\n.comp-neon {\n\tcolor: var(--neon);\n}\n\n.comp-yellow {\n\tcolor: var(--yellow);\n}\n\n.bg-comp-neon {\n\tbackground-color: var(--neon);\n}\n\n.bg-yellow {\n\tbackground-color: var(--yellow);\n}\n\n.text-color {\n\tcolor: var(--color-text);\n}\n\n.muted {\n\tcolor: var(--color-text-detail);\n}\n\n/*\nOPACITY\n----------------------------------------------------------------*/\n\n.dimmed {\n\topacity: 0.7;\n}\n\n/*\nTYPOGRAPHY\n----------------------------------------------------------------*/\n\n.leading-tight {\n\tline-height: 1.2;\n}\n\n.font-mono {\n\tfont-family: var(--mono);\n}\n\n.font-sans {\n\tfont-family: var(--sans);\n}\n\n.font-serif {\n\tfont-family: var(--serif);\n}\n\n.text-balance {\n\ttext-wrap: balance;\n}\n\n/* Measure is limited to ~78 characters */\n.measure {\n\tmax-width: var(--measure);\n}\n\n/* Measure is limited to ~80 characters */\n.measure-wide {\n\tmax-width: var(--measure-wide);\n}\n\n/* Measure is limited to ~45 characters */\n.measure-narrow {\n\tmax-width: var(--measure-narrow);\n}\n\n.uppercase {\n\ttext-transform: uppercase;\n}\n\n.tracking {\n\tletter-spacing: 1px;\n}\n\n.rounded-small {\n\tborder-radius: .25em;\n}\n\n.no-underline {\n\ttext-decoration: none;\n\n\t&:hover {\n\t\ttext-decoration: underline;\n\t}\n}\n\n.badge {\n\tfont-size: var(--f7);\n\ttext-transform: lowercase;\n\tborder-radius: 4px;\n\tfont-weight: 500;\n\tbackground-color: var(--neon);\n\tcolor: var(--color-bg);\n\tpadding: 0.4em 0.8em;\n\n\t&:hover {\n\t\ttext-decoration: none;\n\t}\n}\n\n.sr-only {\n\tposition: absolute;\n\twidth: 1px;\n\theight: 1px;\n\tpadding: 0;\n\tmargin: -1px;\n\toverflow: hidden;\n\tclip: rect(0, 0, 0, 0);\n\twhite-space: nowrap;\n\tborder-width: 0;\n}\n\n\n@media screen and (max-width: 980px) {\n\t.sr-only-mobile {\n\t\tposition: absolute;\n\t\twidth: 1px;\n\t\theight: 1px;\n\t\tpadding: 0;\n\t\tmargin: -1px;\n\t\toverflow: hidden;\n\t\tclip: rect(0, 0, 0, 0);\n\t\twhite-space: nowrap;\n\t\tborder-width: 0;\n\t}\n}\n\n@media screen and (min-width: 981px) {\n\t.only-mobile {\n\t\tdisplay: none;\n\t}\n}\n\n.sep {\n\tcolor: var(--color-text-detail);\n\tdisplay: inline-block;\n\tmargin: 0 0.5em;\n}\n\n.no-wrap {\n\twhite-space: nowrap;\n}\n\n.checkbox-fix {\n\tposition: relative;\n\ttop: -1px;\n}\n\n.truncate {\n\twhite-space: nowrap;\n\ttext-overflow: ellipsis;\n\tdisplay: inline-block;\n\toverflow: hidden;\n\tmax-width: 100%;\n}\n\n.icon {\n\tfill: currentColor;\n\twidth: 1em;\n\theight: auto;\n\taspect-ratio: 1 / 1;\n\tvertical-align: middle;\n\tdisplay: inline-block;\n\tfont-size: .9em;\n}\n\na:hover .icon-feed {\n\tcolor: var(--yellow);\n}\n\n.drop-cap::first-letter {\n\tfont-size: 3.2rem;\n\tfont-weight: bold;\n\tfloat: left;\n\tmargin-right: 0.1em;\n\tline-height: 1;\n}\n","/*\nFOOTER\n----------------------------------------------------------------*/\n\n[role='contentinfo'] {\n\t&::before {\n\t\tcontent: '';\n\t\tbackground: url('data:image/svg+xml;utf8,') no-repeat;\n\t\tdisplay: block;\n\t\tcolor: var(--hr-color);\n\t\tfont-size: 8rem;\n\t\theight: 0.7rem;\n\t\tline-height: 1;\n\t\taspect-ratio: 1 / 1;\n\t\tmargin: calc(var(--lineheight) * 2) 0;\n\t}\n\n\t& nav {\n\t\t& ul {\n\t\t\tline-height: 2;\n\t\t}\n\n\t\t& a {\n\t\t\twhite-space: nowrap;\n\t\t}\n\n\t\t& li {\n\t\t\t&[aria-current=\"page\"] {\n\t\t\t\t& a {\n\t\t\t\t\tcolor: var(--grey);\n\t\t\t\t\tcursor: default;\n\t\t\t\t\ttext-decoration: none;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\n\t@media screen and (min-width: 58rem) {\n\t\tfont-size: var(--f5);\n\n\t\t& nav ul {\n\t\t\tdisplay: flex;\n\n\t\t\t& li {\n\t\t\t\t&:not(:last-child)::after {\n\t\t\t\t\tcontent: ' / ';\n\t\t\t\t\tdisplay: inline-block;\n\t\t\t\t\tmargin: 0 .75em;\n\t\t\t\t\tcolor: var(--color-text-detail);\n\t\t\t\t\ttransform: scaleY(1.2);\n\t\t\t\t\topacity: .7;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n}\n",".Content {\n\tmax-width: var(--content-width);\n\tmargin: 0 auto;\n\tdisplay: flex;\n\tflex-direction: column-reverse;\n\n\t&.wide {\n\t\t--content-width: var(--measure-wide);\n\t}\n\n\t@media screen and (min-width: 981px) {\n\t\thtml:not(.admin) & {\n\t\t\tmax-width: none;\n\t\t\tdisplay: grid;\n\t\t\tplace-content: center;\n\t\t\tgrid-template-columns: var(--content-width) auto;\n\t\t\tgap: var(--spacing-extra-large);\n\t\t}\n\t}\n}\n","#app[data-state] .pane {\n\tdisplay: none;\n}\n\n#app[data-state='INITED'] {\n\t& #INITED {\n\t\tdisplay: block;\n\t}\n}\n\n#app[data-state='sign-in'] {\n\t& #sign-in {\n\t\tdisplay: block;\n\t}\n}\n\n#app[data-state='START'] {\n\t& #START {\n\t\tdisplay: block;\n\t}\n}\n","/* =CHANGELOG\n--------------------------------------------- */\n\n.changelog {\n\t& .prose {\n\t\t&>ul {\n\t\t\tpadding-left: 0;\n\t\t\tmargin-bottom: var(--lineheight);\n\n\t\t\t& ul {\n\t\t\t\tmargin-bottom: 0;\n\t\t\t}\n\t\t}\n\t}\n}\n",".NotesList {\n\t& article {\n\t\tscroll-margin: var(--lineheight);\n\n\t\theader .target:hover span {\n\t\t\tcolor: var(--neon);\n\t\t}\n\n\t\t&:target {\n\t\t\t& .target {\n\t\t\t\tcolor: var(--neon);\n\t\t\t}\n\t\t}\n\t}\n\n\t& header h1 a {\n\t\tcolor: var(--color-text-high-contrast);\n\t}\n\n\t&>li:not(:last-child) {\n\t\tmargin-bottom: calc(var(--lineheight) * 4);\n\t}\n\n\t&>li:has(:target)::after {\n\t\tborder-color: var(--neon);\n\t}\n}\n",".NavCommon {\n\t& a {\n\t\tcolor: var(--color-text);\n\t\twhite-space: nowrap;\n\t\ttext-decoration: none;\n\n\t\t&:hover {\n\t\t\tcolor: var(--link-color-hover);\n\t\t\ttext-decoration: underline;\n\t\t}\n\t}\n}\n\n.MainNav {\n\tposition: relative;\n\tz-index: 2;\n\n\t& .sticky {\n\t\tposition: sticky;\n\t\ttop: 0;\n\t}\n\n\t& h1>a {\n\t\tfont-weight: 500;\n\t\tcolor: var(--color-text);\n\t\twhite-space: nowrap;\n\t\ttext-decoration: none;\n\t}\n\n\t& a {\n\t\t&:is(:hover, :focus-visible) {\n\t\t\toutline: 0;\n\t\t\tcolor: var(--link-color-hover);\n\t\t\ttext-decoration: underline;\n\t\t}\n\t}\n\n\t& ul {\n\n\t\t& a {\n\t\t\tfont-weight: normal;\n\t\t\tposition: revert;\n\n\t\t\t&:not([aria-current='page'] > &):not(&:hover):not(&:focus-visible) {\n\t\t\t\topacity: .8;\n\t\t\t}\n\n\t\t\t:where([aria-current='page'] &, &:focus) {\n\t\t\t\toutline: 0;\n\n\t\t\t\t&::after {\n\t\t\t\t\tcontent: '⇠';\n\t\t\t\t\tdisplay: inline;\n\t\t\t\t\tmargin-left: .5em;\n\t\t\t\t\twhite-space: nowrap;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\t& [aria-current='page'] {\n\t\t\tposition: relative;\n\n\t\t\t& a {\n\t\t\t\tfont-weight: 700;\n\t\t\t}\n\t\t}\n\t}\n\n\t& h1 {\n\t\t--offset-top: 18px;\n\t\tline-height: calc(var(--lineheight) * 3);\n\t\tmargin-bottom: -4px;\n\t\tpadding-top: var(--offset-top);\n\t}\n\n\t@media screen and (max-width: 980px) {\n\t\twidth: calc(100% + var(--inset) * 2);\n\t\tmargin: calc(var(--inset) * -1);\n\t\tpadding: calc(var(--lineheight) / 2) calc(var(--inset) * 1);\n\t\tmargin-bottom: calc(var(--lineheight) / 2 - 1px);\n\t\tposition: sticky;\n\t\tinset: 0;\n\t\toverflow-x: auto;\n\t\tbackground-color: var(--color-bg);\n\t\tfont-size: var(--f5);\n\n\t\t& h1 {\n\t\t\tposition: absolute;\n\t\t\tleft: -9999em;\n\t\t}\n\n\t\t& ul {\n\t\t\tdisplay: flex;\n\t\t\tmargin: 0;\n\t\t\tflex-direction: row;\n\t\t\tgap: 1em;\n\t\t}\n\n\t\t& [aria-current='page'] a,\n\t\t& a:focus {\n\t\t\t&::after {\n\t\t\t\tdisplay: none;\n\t\t\t}\n\t\t}\n\t}\n}\n\n.BackLink {\n\ttext-decoration: none;\n\tcolor: var(--color-text);\n\tbackground-color: var(--grey-lightest);\n\twidth: 1.6em;\n\ttext-align: center;\n\tline-height: 1.6em;\n\taspect-ratio: 1/1;\n\tdisplay: inline-block;\n\tborder-radius: 4em;\n\topacity: .8;\n\n\ta:is(:hover, :focus)>& {\n\t\topacity: 1;\n\t}\n}\n",".PageNav {\n\ttext-align: center;\n\n\t& a {\n\t\tcolor: var(--grey);\n\t\tdisplay: inline-block;\n\t\tpadding: 0.3em 0.5em;\n\t\ttext-decoration: none;\n\n\t\t&:hover {\n\t\t\tcolor: var(--link-color);\n\t\t\ttext-decoration: underline;\n\t\t}\n\t}\n\n\t& .separator {\n\t\tcolor: var(--color-text);\n\t\tfont-weight: 500;\n\t\tletter-spacing: -1px;\n\t\tfont-size: 1.2em;\n\t\tmargin: 0 3px;\n\t}\n}\n","/*\nPOSTS LIST\n----------------------------------------------------------------*/\n\n.PostItem {\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: space-between;\n\n\t&:last-child {\n\t\tborder-bottom: 0;\n\t}\n\n\t& time {\n\t\tfont-size: var(--f5);\n\t\tfont-variant-numeric: tabular-nums;\n\t\tletter-spacing: var(--tracking-f0);\n\t\t\n\t\t&:not(.PostItem:hover &) {\n\t\t\tcolor: var(--color-text-detail);\n\t\t}\n\t}\n\n\t& .PostItem__Link {\n\t\tdisplay: block;\n\t\tpadding: calc(var(--lineheight) / 3) 0;\n\t\tflex: 1;\n\n\t\t&:visited {\n\t\t\tcolor: var(--link-color-visited);\n\t\t\ttext-decoration-color: var(--link-color-visited);\n\t\t}\n\t}\n\n\t@media screen and (max-width: 480px) {\n\t\talign-items: flex-start;\n\t\tflex-direction: column;\n\t\tmargin-bottom: calc(var(--lineheight) / 3);\n\n\t\t& .PostItem__Link {\n\t\t\tmax-width: 90%;\n\t\t\tfont-size: 1em;\n\t\t}\n\t}\n}\n\n.PostsList {\n\tlist-style: none;\n\n\t& .PostsList--Tight {\n\t\t.PostItem {\n\t\t\tborder: 1px solid var(--grey-light);\n\t\t\tborder-width: 0 0 1px;\n\t\t\tmargin: 0;\n\t\t}\n\t}\n\n\t@media screen and (prefers-color-scheme: dark) {\n\t\t& .PostsList--Tight {\n\t\t\t& .PostItem {\n\t\t\t\tborder: 0;\n\t\t\t}\n\t\t}\n\t}\n}\n","/* From https://css-tricks.com/the-cleanest-trick-for-autogrowing-textareas/ */\n\n.grow-wrap {\n\t/* easy way to plop the elements on top of each other and have them both sized based on the tallest one's height */\n\tdisplay: grid;\n}\n\n.grow-wrap::after {\n\t/* Note the weird space! Needed to preventy jumpy behavior */\n\tcontent: attr(data-replicated-value) ' ';\n\n\t/* This is how textarea text behaves */\n\twhite-space: pre-wrap;\n\n\t/* Hidden from view, clicks, and screen readers */\n\tvisibility: hidden;\n}\n\n.grow-wrap>textarea {\n\t/* You could leave this, but after a user resizes, then it ruins the auto sizing */\n\tresize: none;\n\n\t/* Firefox shows scrollbar on growth, you can hide like this. */\n\toverflow: hidden;\n}\n\n.grow-wrap>textarea,\n.grow-wrap::after {\n\t/* Identical styling required!! */\n\tborder-width: 1px;\n\tpadding: 0.5em;\n\tfont: inherit;\n\n\t/* Place on top of each other */\n\tgrid-area: 1 / 1 / 2 / 2;\n}\n","/*\nPROSE\n----------------------------------------------------------------*/\n\n.prose {\n\t--link-color: var(--color-text);\n\n\t&> :last-child {\n\t\tmargin-bottom: 0;\n\t}\n\n\ta:not([class]) {\n\t\ttext-decoration: underline;\n\t\ttext-decoration-skip-ink: auto;\n\t}\n\n\t& img,\n\t& iframe,\n\t& figure,\n\t& svg {\n\t\t--side-margin: calc(var(--lineheight) * 2);\n\t\tmargin: var(--side-margin) auto;\n\t\tdisplay: block;\n\n\t\t@media screen and (max-width: 480px) {\n\t\t\t--side-margin: var(--lineheight);\n\t\t}\n\t}\n\n\t@media screen and (prefers-color-scheme: dark) {\n\t\t& img {\n\t\t\topacity: 0.9;\n\t\t\tbox-shadow: rgba(0, 0, 0, 0.3) 0 0 6px;\n\t\t}\n\t}\n\n\t& ul,\n\t& ol {\n\t\tpadding-left: 1em;\n\t\tmargin-left: 1rem;\n\n\t\t&:where(ul) {\n\t\t\tlist-style-type: disc;\n\n\t\t\t::marker {\n\t\t\t\tfont-size: 1.2em;\n\t\t\t}\n\t\t}\n\n\t\t&:where(ol) {\n\t\t\tlist-style-type: decimal;\n\t\t}\n\n\t\t& ::marker {\n\t\t\tcolor: var(--color-text-detail);\n\t\t}\n\n\t\t& li>ul,\n\t\t& li>ol {\n\t\t\tpadding-left: 1.5rem;\n\t\t\tmargin-bottom: 0;\n\t\t}\n\t}\n\n\t& figcaption {\n\t\tpadding: 1rem 0;\n\t\ttext-align: center;\n\t\tfont-family: var(--sans);\n\t\tfont-size: 0.9em;\n\t}\n\n\t/* Break links and code */\n\t& code:not(pre > code),\n\t& a {\n\t\tword-break: break-word;\n\t\tword-wrap: break-word;\n\t\toverflow-wrap: break-word;\n\t}\n\n\t& figure.image--full {\n\t\tmargin: calc(var(--lineheight) * 2) -14vw;\n\n\t\t& img {\n\t\t\tdisplay: block;\n\t\t\tmargin: 0 auto;\n\t\t}\n\n\t\t@media screen and (max-width: 960px) {\n\t\t\t/* Edge-to-edge pixelfucking. */\n\t\t\tmargin-left: auto;\n\t\t\tmargin-right: auto;\n\t\t}\n\t}\n}\n","/* Matrix theme in light and dark versions by Johan. */\n\ncode[class*='language-'],\npre[class*='language-'] {\n\tcolor: hsl(112 30% 30%);\n\tbackground-color: hsl(112 29.98% 97%);\n\n\t@media (prefers-color-scheme: dark) {\n\t\tcolor: hsl(112, 70%, 80%);\n\t\tbackground-color: hsl(112, 1.27%, 13.33%);\n\t}\n}\n\n.token {\n\t--hue: 112;\n\t--sat: 40%;\n\t--lit: 25%;\n\t--alpha: 1;\n\t--base: hsl(var(--hue) var(--sat) var(--lit) / var(--alpha));\n\n\tcolor: var(--base);\n}\n\n.token.comment,\n.token.prolog,\n.token.doctype,\n.token.cdata {\n\t--alpha: 80%;\n}\n\n.token.punctuation {\n\t--lit: 50%;\n\t--sat: 20%;\n}\n\n.namespace {\n\topacity: 0.7;\n}\n\n.token.property,\n.token.tag,\n.token.constant,\n.token.symbol,\n.token.deleted {\n\t--lit: 35%;\n\t--sat: 30%;\n}\n\n.token.number,\n.token.boolean {\n\t--lit: 20%;\n\t--sat: 70%;\n}\n\n.token.selector,\n.token.attr-name,\n.token.char,\n.token.builtin,\n.token.inserted {\n\tfont-weight: bold;\n}\n\n.token.selector,\n.token.builtin {\n\tbackground-color: hsla(112, 42.86%, 46.9%, 0.15);\n}\n\n.token.operator,\n.token.entity,\n.token.url,\n.language-css .token.string,\n.style .token.string,\n.token.variable {\n\t--lit: 60%;\n\t--sat: 20%;\n}\n\n.token.atrule,\n.token.attr-value,\n.token.function,\n.token.class-name {\n\t--sat: 50%;\n\t--lit: 25%;\n\tfont-weight: bold;\n}\n\n.token.keyword,\n.token.rule {\n\t--sat: 20%;\n\t--lit: 50%;\n}\n\n.token.regex,\n.token.important {\n\t--hue: 40;\n\t--sat: 80%;\n\t--lit: 70%;\n}\n\n@media (prefers-color-scheme: dark) {\n\t.token {\n\t\t--hue: 112.08;\n\t\t--sat: 49.53%;\n\t\t--lit: 58.04%;\n\t\t--alpha: 1;\n\t\t--base: hsl(var(--hue) var(--sat) var(--lit) / var(--alpha));\n\n\t\tcolor: var(--base);\n\t}\n\n\t.token.comment,\n\t.token.prolog,\n\t.token.doctype,\n\t.token.cdata {\n\t\t--sat: 10%;\n\t}\n\n\t.token.punctuation {\n\t\t--lit: 40%;\n\t\t--sat: 20%;\n\t}\n\n\t.namespace {\n\t\topacity: 0.7;\n\t}\n\n\t.token.property,\n\t.token.tag,\n\t.token.constant,\n\t.token.symbol,\n\t.token.deleted {\n\t\t--lit: 80%;\n\t\t--sat: 100%;\n\t}\n\n\t.token.number,\n\t.token.boolean {\n\t\t--lit: 80%;\n\t}\n\n\t.token.selector,\n\t.token.attr-name,\n\t.token.string,\n\t.token.char,\n\t.token.builtin,\n\t.token.inserted {\n\t\t--lit: 70%;\n\t}\n\n\t.token.selector,\n\t.token.builtin {\n\t\tbackground-color: hsla(112, 42.86%, 46.9%, 0.08);\n\t}\n\n\t.token.operator,\n\t.token.entity,\n\t.token.url,\n\t.language-css .token.string,\n\t.style .token.string,\n\t.token.variable {\n\t\t--lit: 80%;\n\t\t--sat: 60%;\n\t}\n\n\t.token.atrule,\n\t.token.attr-value,\n\t.token.function,\n\t.token.class-name {\n\t\t--sat: 31%;\n\t\t--lit: 75%;\n\t}\n\n\t.token.keyword,\n\t.token.rule {\n\t\t--sat: 20%;\n\t\t--lit: 60%;\n\t}\n\n\t.token.regex,\n\t.token.important {\n\t\t--hue: 40;\n\t\t--sat: 80%;\n\t\t--lit: 70%;\n\t}\n}\n\n.token.important,\n.token.bold,\n.token.rule {\n\tfont-weight: bold;\n}\n\n.token.italic {\n\tfont-style: italic;\n}\n\n.token.entity {\n\tcursor: help;\n}\n","/* Small caps */\n.small-caps {\n\tfont-family: 'Charter SC', serif;\n\tfont-variant: small-caps;\n}\n\n/* Double quotation marks (\") */\n.pull-double {\n\tmargin-left: -.46em\n}\n\n.push-double {\n\tmargin-right: .46em\n}\n\n/* Single quotation marks (') */\n.pull-single {\n\tmargin-left: -.27em\n}\n\n.push-single {\n\tmargin-right: .27em\n}\n\n.pull-double,\n.push-double,\n.pull-single,\n.push-single {\n\tdisplay: inline-block\n}\n\n/* Optical margin alignment for particular letters */\n.pull-T,\n.pull-V,\n.pull-W,\n.pull-Y {\n\tmargin-left: -0.1em;\n}\n\n.push-T,\n.push-V,\n.push-W,\n.push-Y {\n\tmargin-right: 0.1em;\n}\n\n.pull-O,\n.pull-C,\n.pull-o,\n.pull-c {\n\tmargin-left: -0.04em;\n}\n\n.push-O,\n.push-C,\n.push-o,\n.push-c {\n\tmargin-right: 0.04em;\n}\n\n.pull-A {\n\tmargin-left: -0.03em;\n}\n\n.push-A {\n\tmargin-right: 0.03em;\n}\n"],"sourceRoot":"file:///home/runner/work/johanbrook.com/johanbrook.com"} \ No newline at end of file +{"version":3,"sources":["/src/johan.css","/css/reset.css","/%3Cno%20source%3E","/css/variables.css","/css/base.css","/css/utils.css","/css/footer.css","/css/layout.css","/css/admin.css","/css/changelog.css","/css/notes.css","/css/navigation.css","/css/page-nav.css","/css/posts-list.css","/css/autogrow.css","/css/prose.css","/css/prism-matrix.css","/css/typeset.css"],"names":[],"mappings":"AAAA;;;;;+CAK+C;;AAE/C;;;;KAIK;;ACXL;AAAA,6EAA6E;AAC7E;;;CAGC,SAAS;CACT,UAAU;CACV,sBAAsB;AACvB;;AAEA;CACC,wBAAwB;AACzB;;AAEA;CACC,8BAA8B;CAC9B,wBAAwB;AACzB;CChBA;;ADkBA;;AAAA;CACC;EACC,uBAAuB;CACxB;AACD;AAAA;;AAtBA;;AAwBA;CACC,gBAAgB;CAChB,kCAAkC;CAClC,mCAAmC;AACpC;;AAEA;CACC,aAAa;CACb,cAAc;AACf;;AAEA;CACC,gBAAgB;CAChB,aAAa;AACd;;AAEA;CACC,eAAe;AAChB;;AAEA;CACC,mBAAmB;AACpB;;AAEA;CACC,mBAAmB;AACpB;;AAEA;CACC,mBAAmB;AACpB;;AAEA;CACC,cAAc;CACd,4BAA4B;AAC7B;;AAEA;CACC,gBAAgB;AACjB;;AAEA;CACC,cAAc;AACf;;AAEA;CACC,qBAAqB;CACrB,gBAAgB;AACjB;;AAEA;CACC,yBAAyB;AAC1B;;AAEA;CACC,+BAA+B;CAC/B,kBAAkB;AACnB;;AAEA;CACC,YAAY;CACZ,gCAA6B;SAA7B,6BAA6B;CAC7B,cAAc;CACd,aAAa;CACb,iBAAiB;AAClB;;AAEA;CACC,4BAA4B;CAC5B,mBAAmB;CACnB,yBAAyB;AAC1B;;AAEA;CACC,wCAAgC;SAAhC,gCAAgC;CAChC,sBAAsB;CACtB,qBAAqB;CACrB,2BAA2B;CAC3B,6BAA6B;CAC7B,8BAA8B;CAC9B,oBAAoB;AACrB;CCzGA;;ACAA;AAAA;CACC,WAAW;;CAEX,wBAAwB;CACxB,yBAAyB;CACzB,gCAAgC;CAChC,mCAAmC;CACnC,gCAAgC;;CAEhC,gBAAgB;CAChB,yCAAyC;CACzC,2BAA2B;CAC3B,iCAAiC;CACjC,gCAAgC;;CAEhC,uCAAuC;CACvC,6CAA6C;CAC7C,uCAAuC;CACvC,uDAAuD;CACvD,2BAA2B;;CAE3B,8BAA8B;CAC9B,oCAAoC;CACpC,qCAAqC;CACrC,iCAAiC;;CAEjC,gCAAgC;;CAEhC,2CAA2C;CAC3C,4CAA4C;CAC5C,8BAA8B;;CAE9B,6BAA6B;;CA8B7B,eAAe;;CAEf,6BAA6B;CAC7B,wGAAwG;CACxG,8EAA8E;;CAE9E,oBAAoB;CACpB,gBAAgB;CAChB,gBAAgB;CAChB,yCAAyC;;CAEzC,oBAAoB;CACpB,uBAAuB;CACvB,uBAAuB;CACvB,sBAAsB;CACtB,uBAAuB;CACvB,uBAAuB;CACvB,uBAAuB;CACvB,wBAAwB;;CAExB,+CAA+C;CAC/C,+CAA+C;CAC/C,+CAA+C;CAC/C,+CAA+C;CAC/C,UAAU;CACV,+CAA+C;CAC/C,+CAA+C;CAC/C,+CAA+C;;CAE/C,aAAa;;CAEb,oCAAoC;;CAEpC,eAAe;CACf,sBAAsB;CACtB,qBAAqB;;CAErB,+BAA+B;;CAE/B,iCAAiC;;CAEjC,iBAAiB;CACjB,oDAAoD;CACpD,8CAA8C;CAC9C,qCAAqC;CACrC,8CAA8C;CAC9C,oDAAoD;CACpD,0DAA0D;CAC1D,gEAAgE;AAMjE;;CAlFC;AAlCD;EAmCE,4CAA4C;EAC5C,sDAAsD;EACtD,yDAAyD;AA+E3D;CA9EC;;CAEA;AAxCD;EAyCE,iBAAiB;EACjB,kCAAkC;EAClC,gCAAgC;;EAEhC,mBAAmB;EACnB,2CAA2C;EAC3C,6BAA6B;EAC7B,iCAAiC;EACjC,sCAAsC;EACtC,+CAA+C;EAC/C,wDAAwD;EACxD,6BAA6B;EAC7B,wCAAwC;EACxC,8BAA8B;AA8DhC;;EA5DE;AAxDF;GAyDG,4CAA4C;GAC5C,sDAAsD;AA0DzD;EAzDE;CACD;;CAoDA;AAhHD;EAiHE,0BAA0B;EAC1B,oBAAoB;AAEtB;CADC;CDnHD;;AEAA;;AAAA;+CAC+C;;AAE/C;CACC,4FAA4F;CAC5F,2BAA2B;CAC3B,8BAA8B;CAC9B,sBAAsB;AACvB;;AAEA;CACC,4EAA4E;CAC5E,iCAAiC;CACjC,wBAAwB;AACzB;;AAEA;CACC,qBAAqB;CACrB,2BAA2B;CAC3B,+BAA+B;CAC/B;;;;UAIS;CACT,mDAAmD;AASpD;;CAPC;;AAXD;EAYE,oBAAoB;AAMtB;CALC;;CAEA;;AAfD;EAgBE,mCAAmC;AAErC;CADC;;AAGD;CACC,+BAA+B;CAC/B,0CAA0C;AAC3C;;AAEA;CACC,wBAAwB;AACzB;;AAEA;IACI,wBAAwB;IACxB,2BAA2B;IAC3B,oBAAoB;AACxB;;AAEA;+CAC+C;;AAE/C;;;;;;CAMC,uBAAmB;SAAnB,mBAAmB;CACnB,0CAA0C;CAC1C,sCAAsC;AACvC;;AAEA;;CAEC,4CAA4C;CAC5C,kCAAkC;CAClC,wCAAwC;AACzC;;AAEA;;CAEC,oBAAoB;CACpB,kCAAkC;AACnC;;AAEA;;CAEC,oBAAoB;CACpB,kCAAkC;AACnC;;AAEA;;CAEC,oBAAoB;CACpB,kCAAkC;AACnC;;AAEA;;CAEC,oBAAoB;CACpB,kCAAkC;AACnC;;AAEA;;CAEC,oBAAoB;CACpB,kCAAkC;AACnC;;AAEA;;CAEC,oBAAoB;CACpB,kCAAkC;AACnC;;AAEA;CACC,oBAAoB;AACrB;;AAEA;;CAEC,eAAe;AAChB;;AAEA;CACC,gBAAgB;CAChB,SAAS;CACT,UAAU;AACX;;AAEA;;CAEC,wBAAwB;CACxB,kBAAkB;CAClB,qBAAqB;CACrB,0BAA0B;AAgC3B;;CA9BC;EACC,wBAAwB;CACzB;;CAEA;EACC,qBAAqB;EACrB,kBAAkB;CACnB;;CAEA;;EAEC,8BAA8B;EAC9B,mCAAmC;CACpC;;CAEA;EACC,0BAA0B;CAC3B;;CAEA;EACC,QAAQ;CACT;;CAEA;EACC,qBAAqB;CAKtB;;EAHC;GACC,0BAA0B;EAC3B;;AAIF;;;;;;;CAOC,6BAA6B;AAC9B;;AAEA;CACC,eAAe;CACf,YAAY;AACb;;AAEA;;CAEC,wBAAwB;AACzB;;AAEA;CACC,wCAAwC;CACxC,gBAAgB;CAChB,kBAAkB;CAClB,gBAAgB;AACjB;;AAEA;CACC,kBAAkB;AACnB;;AAEA;CACC,iBAAiB;;CAEjB,gBAAgB;CAChB,WAAW;CACX,yBAAyB;CACzB,iBAAiB;AA0BlB;;CAxBC;EACC,eAAe;CAsBhB;;EApBC;GACC,yBAAyB;GACzB,mBAAmB;GACnB,oBAAoB;GACpB,wBAAwB;EACzB;;EAEA;GACC,mBAAmB;GACnB,6CAA6C;EAC9C;;EAEA;GACC,iBAAiB;GACjB,UAAU;EACX;;EAEA;GACC,UAAU;EACX;;AAIF;CACC,0CAA0C;CAC1C,uBAAuB;CACvB,iBAAiB;CACjB,oBAAoB;CACpB,gBAAgB;CAChB,MAAM;CACN,iCAAiC;AAClC;;AAEA;CACC,uBAAuB;AACxB;CAIC;EACC,eAAe;CAChB;;AAGD;CACC,aAAa;CACb,wCAAwC;;CAExC,cAAc;CACd,gBAAgB;CAChB,2BAA2B;CAC3B,gBAAgB;CAChB,oBAAoB;CACpB,kBAAkB;CAClB,qBAAa;SAAb,aAAa;CACb,8BAAyB;GAAzB,4BAAyB;MAAzB,yBAAyB;CACzB,iCAAiC;CACjC,wBAAwB;CACxB,kBAAkB;CAClB,iDAAiD;CACjD,4CAA4C;CAC5C,6BAA6B;CAC7B,oBAAoB;CACpB,cAAc;CACd,kBAAkB;AAsBnB;;CApBC;;AAtBD;EAuBE,oBAAoB;AAmBtB;CAlBC;;CAEA;EACC,aAAa;EACb,oBAAoB;EACpB,qBAAqB;EACrB,kBAAkB;EAClB,wCAAwC;EACxC,+DAA+D;EAC/D,wCAAwC;EACxC,8BAA8B;EAC9B,OAAO;EACP,WAAW;EACX,cAAc;EACd,oBAAoB;EACpB,cAAc;EACd,oBAAoB;CACrB;;AAGD;CACC,uCAAuC;CACvC,0CAA0C;AAC3C;;AAEA,wBAAwB;AACxB;CACC,cAAc;AACf;;AAEA;CACC,wCAAwC;CACxC,sEAAsE;CACtE,kBAAkB;CAClB,mBAAmB;CACnB,sCAAsC;AAUvC;;CARC;EACC,0CAA0C;CAC3C;;CAEA;EACC,kBAAkB;EAClB,6BAA6B;CAC9B;;AAGD;CACC,SAAS;CACT,iCAAiC;CACjC,aAAa;CACb,mBAAmB;CACnB,qCAAqC;CACrC,mBAAmB;AACpB;;AAEA;CACC,cAAc;CACd,6BAA6B;CAC7B,oBAAoB;CACpB,gBAAgB;AAMjB;;CAJC;EACC,UAAU;EACV,+BAA+B;CAChC;CFjVD;;AGAA;;AAAA;CACC,eAAe;CACf,iBAAiB;CACjB,kBAAkB;AACnB;;AAEA;;iEAEiE;;AAEjE;CACC,wBAAgB;IAAhB,qBAAgB;SAAhB,gBAAgB;CAChB,SAAS;CACT,gBAAgB;CAChB,qBAAqB;CACrB,wBAAwB;CACxB,kBAAkB;CAClB,yBAAyB;CACzB,kBAAkB;CAClB,gBAAgB;CAChB,kCAAkC;CAClC,oBAAoB;CACpB,mBAAmB;CACnB,uBAAuB;CACvB,qBAAqB;CACrB,gBAAgB;CAChB,eAAe;AAuBhB;;CArBC;EACC,eAAe;CAChB;;CAEA;EACC,qBAAqB;CACtB;;CAEA;EACC,qBAAqB;EACrB,8BAA8B;CAC/B;;CAEA;;EAEC,+BAA+B;CAChC;;CAEA;EACC,gCAAgC;CACjC;;AAGD;;iEAEiE;;AAEjE;CACC;;;;;;;;;oBASmB;AACpB;;AAEA;;iEAEiE;;AAEjE;CACC,kBAAkB;AACnB;;AAEA;;iEAEiE;;AAEjE;CACC,mBAAmB;AACpB;;AAEA;CACC,iBAAiB;AAClB;;AAEA;CACC,gBAAgB;AACjB;;AAEA;CACC,gBAAgB;AACjB;;AAEA;CACC,gBAAgB;AACjB;;AAEA;CACC,gBAAgB;AACjB;;AAEA;CACC,gBAAgB;AACjB;;AAEA;CACC,gBAAgB;AACjB;;AAEA;CACC,gBAAgB;AACjB;;AAEA;CACC,gBAAgB;AACjB;;AAEA;CACC,gBAAgB;AACjB;;AAEA;;iEAEiE;;AAEjE;CACC,gBAAgB;AACjB;;AAEA;CACC,iBAAiB;AAClB;;AAEA;CACC,kBAAkB;AACnB;;AAEA;CACC,mBAAmB;AACpB;;AAEA;CACC,WAAW;AACZ;;AAEA;CACC,cAAc;AACf;;AAEA;;iEAEiE;;AAEjE;CACC,aAAa;AACd;;AAEA;CACC,oBAAoB;AACrB;;AAEA;CACC,UAAU;AACX;;AAEA;CACC,UAAU;AACX;;AAEA;+DAC+D;AAC/D;CACC,cAAc;CACd,YAAY;CACZ,MAAM;CACN,aAAa;CACb,MAAM;AACP;;AAEA;CACC,OAAO;AACR;;AAEA;CACC,UAAU;AACX;;AAEA;CACC,sBAAsB;AACvB;;AAEA;CACC,mBAAmB;AACpB;;AAEA;CACC,eAAe;AAChB;;AAEA;CACC,iBAAiB;AAClB;;AAEA;CACC,uBAAuB;AACxB;;AAEA;CACC,8BAA8B;AAC/B;;AAEA;CACC,2BAA2B;AAC5B;;AAEA;CACC,uBAAuB;AACxB;;AAEA;CACC,qBAAqB;AACtB;;AAEA;CACC,mBAAmB;AACpB;;AAEA;CACC,qBAAqB;AACtB;;AAEA;CACC,oBAAoB;AACrB;;AAEA;CACC,sBAAsB;AACvB;;AAEA;CACC,oBAAoB;AACrB;;AAEA;CACC,kBAAkB;AACnB;;AAEA;CACC,oBAAoB;AACrB;;AAEA;CACC,mBAAmB;AACpB;;AAEA;CACC,2BAA2B;AAC5B;;AAEA;CACC,yBAAyB;AAC1B;;AAEA;CACC,uBAAuB;AACxB;;AAEA;CACC,8BAA8B;AAC/B;;AAEA;CACC,6BAA6B;AAC9B;;AAEA;CACC,6BAA6B;AAC9B;;AAEA;CACC,yBAAyB;AAC1B;;AAEA;CACC,uBAAuB;AACxB;;AAEA;CACC,qBAAqB;AACtB;;AAEA;CACC,4BAA4B;AAC7B;;AAEA;CACC,2BAA2B;AAC5B;;AAEA;CACC,sBAAsB;AACvB;;AAEA;;iEAEiE;;AAEjE;CACC,4BAA4B;AAC7B;;AAEA;CACC,mCAAmC;AACpC;;AAEA;CACC,6BAA6B;AAC9B;;AAEA;CACC,8BAA8B;AAC/B;;AAEA;CACC,6BAA6B;AAC9B;;AAEA;CACC,mCAAmC;AACpC;;AAEA;CACC,yCAAyC;AAC1C;;AAEA;CACC,+CAA+C;AAChD;;AAEA;CACC,iCAAiC;AAClC;;AAEA;CACC,wCAAwC;AACzC;;AAEA;CACC,kCAAkC;AACnC;;AAEA;CACC,mCAAmC;AACpC;;AAEA;CACC,kCAAkC;AACnC;;AAEA;CACC,wCAAwC;AACzC;;AAEA;CACC,8CAA8C;AAC/C;;AAEA;CACC,oDAAoD;AACrD;;AAEA;CACC,kCAAkC;AACnC;;AAEA;CACC,yCAAyC;AAC1C;;AAEA;CACC,mCAAmC;AACpC;;AAEA;CACC,oCAAoC;AACrC;;AAEA;CACC,mCAAmC;AACpC;;AAEA;CACC,yCAAyC;AAC1C;;AAEA;CACC,+CAA+C;AAChD;;AAEA;CACC,qDAAqD;AACtD;;AAEA;CACC,mCAAmC;AACpC;;AAEA;CACC,0CAA0C;AAC3C;;AAEA;CACC,oCAAoC;AACrC;;AAEA;CACC,qCAAqC;AACtC;;AAEA;CACC,oCAAoC;AACrC;;AAEA;CACC,0CAA0C;AAC3C;;AAEA;CACC,gDAAgD;AACjD;;AAEA;CACC,sDAAsD;AACvD;;AAEA;CACC,gCAAgC;AACjC;;AAEA;CACC,uCAAuC;AACxC;;AAEA;CACC,iCAAiC;AAClC;;AAEA;CACC,kCAAkC;AACnC;;AAEA;CACC,iCAAiC;AAClC;;AAEA;CACC,uCAAuC;AACxC;;AAEA;CACC,6CAA6C;AAC9C;;AAEA;CACC,mDAAmD;AACpD;;AAEA;CACC,gCAAgC;CAChC,mCAAmC;AACpC;;AAEA;CACC,uCAAuC;CACvC,0CAA0C;AAC3C;;AAEA;CACC,iCAAiC;CACjC,oCAAoC;AACrC;;AAEA;CACC,kCAAkC;CAClC,qCAAqC;AACtC;;AAEA;CACC,iCAAiC;CACjC,oCAAoC;AACrC;;AAEA;CACC,uCAAuC;CACvC,0CAA0C;AAC3C;;AAEA;CACC,6CAA6C;CAC7C,gDAAgD;AACjD;;AAEA;CACC,mDAAmD;CACnD,sDAAsD;AACvD;;AAEA;CACC,iCAAiC;CACjC,kCAAkC;AACnC;;AAEA;CACC,wCAAwC;CACxC,yCAAyC;AAC1C;;AAEA;CACC,kCAAkC;CAClC,mCAAmC;AACpC;;AAEA;CACC,mCAAmC;CACnC,oCAAoC;AACrC;;AAEA;CACC,kCAAkC;CAClC,mCAAmC;AACpC;;AAEA;CACC,wCAAwC;CACxC,yCAAyC;AAC1C;;AAEA;CACC,8CAA8C;CAC9C,+CAA+C;AAChD;;AAEA;CACC,oDAAoD;CACpD,qDAAqD;AACtD;;AAEA;CACC,2BAA2B;AAC5B;;AAEA;CACC,kCAAkC;AACnC;;AAEA;CACC,4BAA4B;AAC7B;;AAEA;CACC,6BAA6B;AAC9B;;AAEA;CACC,4BAA4B;AAC7B;;AAEA;CACC,kCAAkC;AACnC;;AAEA;CACC,wCAAwC;AACzC;;AAEA;CACC,8CAA8C;AAC/C;;AAEA;CACC,gCAAgC;AACjC;;AAEA;CACC,uCAAuC;AACxC;;AAEA;CACC,iCAAiC;AAClC;;AAEA;CACC,kCAAkC;AACnC;;AAEA;CACC,iCAAiC;AAClC;;AAEA;CACC,uCAAuC;AACxC;;AAEA;CACC,6CAA6C;AAC9C;;AAEA;CACC,mDAAmD;AACpD;;AAEA;CACC,iBAAiB;CACjB,kBAAkB;AACnB;;AAEA;CACC,wCAAwC;CACxC,uCAAuC;AACxC;;AAEA;CACC,iCAAiC;AAClC;;AAEA;CACC,wCAAwC;AACzC;;AAEA;CACC,kCAAkC;AACnC;;AAEA;CACC,mCAAmC;AACpC;;AAEA;CACC,kCAAkC;AACnC;;AAEA;CACC,wCAAwC;AACzC;;AAEA;CACC,8CAA8C;AAC/C;;AAEA;CACC,oDAAoD;AACrD;;AAEA;CACC,kCAAkC;AACnC;;AAEA;CACC,yCAAyC;AAC1C;;AAEA;CACC,mCAAmC;AACpC;;AAEA;CACC,oCAAoC;AACrC;;AAEA;CACC,mCAAmC;AACpC;;AAEA;CACC,yCAAyC;AAC1C;;AAEA;CACC,+CAA+C;AAChD;;AAEA;CACC,qDAAqD;AACtD;;AAEA;CACC,+BAA+B;AAChC;;AAEA;CACC,sCAAsC;AACvC;;AAEA;CACC,gCAAgC;AACjC;;AAEA;CACC,iCAAiC;AAClC;;AAEA;CACC,gCAAgC;AACjC;;AAEA;CACC,sCAAsC;AACvC;;AAEA;CACC,4CAA4C;AAC7C;;AAEA;CACC,kDAAkD;AACnD;;AAEA;CACC,+BAA+B;CAC/B,kCAAkC;AACnC;;AAEA;CACC,sCAAsC;CACtC,yCAAyC;AAC1C;;AAEA;CACC,gCAAgC;CAChC,mCAAmC;AACpC;;AAEA;CACC,iCAAiC;CACjC,oCAAoC;AACrC;;AAEA;CACC,gCAAgC;CAChC,mCAAmC;AACpC;;AAEA;CACC,sCAAsC;CACtC,yCAAyC;AAC1C;;AAEA;CACC,4CAA4C;CAC5C,+CAA+C;AAChD;;AAEA;CACC,kDAAkD;CAClD,qDAAqD;AACtD;;AAEA;CACC,gCAAgC;CAChC,iCAAiC;AAClC;;AAEA;CACC,uCAAuC;CACvC,wCAAwC;AACzC;;AAEA;CACC,iCAAiC;CACjC,kCAAkC;AACnC;;AAEA;CACC,kCAAkC;CAClC,mCAAmC;AACpC;;AAEA;CACC,iCAAiC;CACjC,kCAAkC;AACnC;;AAEA;CACC,uCAAuC;CACvC,wCAAwC;AACzC;;AAEA;CACC,6CAA6C;CAC7C,8CAA8C;AAC/C;;AAEA;CACC,mDAAmD;CACnD,oDAAoD;AACrD;;AAEA;;iEAEiE;;AAEjE;CACC,eAAe;AAChB;;AAEA;CACC,qBAAqB;AACtB;;AAEA;CACC,cAAc;AACf;;AAEA;;iEAEiE;;AAEjE;CACC,qCAAqC;AACtC;;AAEA;CACC,oBAAoB;CACpB,qBAAqB;CACrB,wBAAwB;AACzB;;AAEA;CACC,oBAAoB;CACpB,qBAAqB;CACrB,qBAAqB;AACtB;;AAEA;CACC,oBAAoB;CACpB,qBAAqB;CACrB,mBAAmB;CACnB,wBAAwB;AACzB;;AAEA;;iEAEiE;;AAEjE;CACC,sBAAsB;AACvB;;AAEA;CACC,kBAAkB;AACnB;;AAEA;CACC,oBAAoB;AACrB;;AAEA;CACC,6BAA6B;AAC9B;;AAEA;CACC,+BAA+B;AAChC;;AAEA;CACC,wBAAwB;AACzB;;AAEA;CACC,+BAA+B;AAChC;;AAEA;;iEAEiE;;AAEjE;CACC,YAAY;AACb;;AAEA;;iEAEiE;;AAEjE;CACC,gBAAgB;AACjB;;AAEA;CACC,wBAAwB;AACzB;;AAEA;CACC,wBAAwB;AACzB;;AAEA;CACC,yBAAyB;AAC1B;;AAEA;CACC,kBAAkB;AACnB;;AAEA,yCAAyC;AACzC;CACC,yBAAyB;AAC1B;;AAEA,yCAAyC;AACzC;CACC,8BAA8B;AAC/B;;AAEA,yCAAyC;AACzC;CACC,gCAAgC;AACjC;;AAEA;CACC,yBAAyB;AAC1B;;AAEA;CACC,mBAAmB;AACpB;;AAEA;CACC,oBAAoB;AACrB;;AAEA;CACC,qBAAqB;AAKtB;;CAHC;EACC,0BAA0B;CAC3B;;AAGD;CACC,oBAAoB;CACpB,yBAAyB;CACzB,kBAAkB;CAClB,gBAAgB;CAChB,6BAA6B;CAC7B,sBAAsB;CACtB,oBAAoB;AAKrB;;CAHC;EACC,qBAAqB;CACtB;;AAGD;CACC,kBAAkB;CAClB,UAAU;CACV,WAAW;CACX,UAAU;CACV,YAAY;CACZ,gBAAgB;CAChB,sBAAsB;CACtB,mBAAmB;CACnB,eAAe;AAChB;CHt8BA;;AGy8BA;;;AAAA;CACC;EACC,kBAAkB;EAClB,UAAU;EACV,WAAW;EACX,UAAU;EACV,YAAY;EACZ,gBAAgB;EAChB,sBAAsB;EACtB,mBAAmB;EACnB,eAAe;CAChB;AACD;AAAA;;AAEA;;AAAA;CACC;EACC,aAAa;CACd;AACD;AAAA;;AA39BA;;AA69BA;CACC,+BAA+B;CAC/B,qBAAqB;CACrB,eAAe;AAChB;;AAEA;CACC,mBAAmB;AACpB;;AAEA;CACC,kBAAkB;CAClB,SAAS;AACV;;AAEA;CACC,mBAAmB;CACnB,uBAAuB;CACvB,qBAAqB;CACrB,gBAAgB;CAChB,eAAe;AAChB;;AAEA;CACC,kBAAkB;CAClB,UAAU;CACV,YAAY;CACZ,mBAAmB;CACnB,sBAAsB;CACtB,qBAAqB;CACrB,eAAe;AAChB;;AAEA;CACC,oBAAoB;AACrB;;AAEA;CACC,iBAAiB;CACjB,iBAAiB;CACjB,WAAW;CACX,mBAAmB;CACnB,cAAc;AACf;CHxgCA;;AIAA;;AAAA;;iEAEiE;CAGhE;EACC,WAAW;EACX,moBAAmoB;EACnoB,cAAc;EACd,sBAAsB;EACtB,eAAe;EACf,cAAc;EACd,cAAc;EACd,mBAAmB;EACnB,qCAAqC;CACtC;EAGC;GACC,cAAc;EACf;;EAEA;GACC,mBAAmB;EACpB;IAIE;KACC,kBAAkB;KAClB,eAAe;KACf,qBAAqB;IACtB;;CAKH;;AAjCD;EAkCE,oBAAoB;AAiBtB;;EAfE;GACC,aAAa;EAYd;IATE;KACC,cAAc;KACd,qBAAqB;KACrB,eAAe;KACf,+BAA+B;KAC/B,sBAAsB;KACtB,WAAW;IACZ;CAGH;CJtDD;;AKAA;AAAA;CACC,+BAA+B;CAC/B,cAAc;CACd,aAAa;CACb,8BAA8B;AAe/B;;CAbC;EACC,oCAAoC;CACrC;;CAEA;EACC;GACC,eAAe;GACf,aAAa;GACb,qBAAqB;GACrB,gDAAgD;GAChD,+BAA+B;EAChC;CACD;CLlBD;;AMAA;;AAAA;CACC,aAAa;AACd;CAGC;EACC,cAAc;CACf;CAIA;EACC,cAAc;CACf;CAIA;EACC,cAAc;CACf;CNnBD;;AOAA;;AAAA;+CAC+C;EAI7C;GACC,eAAe;GACf,gCAAgC;EAKjC;;GAHC;IACC,gBAAgB;GACjB;CPXH;;AQAA;CACC;EACC,gCAAgC;CAWjC;;EATC;GACC,kBAAkB;EACnB;GAGC;IACC,kBAAkB;GACnB;;CAIF;EACC,sCAAsC;CACvC;;CAEA;EACC,0CAA0C;CAC3C;;CAEA;EACC,yBAAyB;CAC1B;CRzBD;;ASAA;CACC;EACC,wBAAwB;EACxB,mBAAmB;EACnB,qBAAqB;CAMtB;;EAJC;GACC,8BAA8B;GAC9B,0BAA0B;EAC3B;;AAIF;CACC,kBAAkB;CAClB,UAAU;AA0FX;;CAxFC;EACC,gBAAgB;EAChB,MAAM;CACP;;CAEA;EACC,gBAAgB;EAChB,wBAAwB;EACxB,mBAAmB;EACnB,qBAAqB;CACtB;EAGC;GACC,UAAU;GACV,8BAA8B;GAC9B,0BAA0B;EAC3B;;EAKA;GACC,mBAAmB;GACnB,gBAAgB;EAgBjB;;GAdC;IACC,WAAW;GACZ;;GAEA;IACC,UAAU;GAQX;;IANC;KACC,YAAY;KACZ,eAAe;KACf,iBAAiB;KACjB,mBAAmB;IACpB;;EAIF;GACC,kBAAkB;EAKnB;;GAHC;IACC,gBAAgB;GACjB;;CAIF;EACC,kBAAkB;EAClB,wCAAwC;EACxC,mBAAmB;EACnB,8BAA8B;CAC/B;;CAEA;;AA9DD;EA+DE,oCAAoC;EACpC,+BAA+B;EAC/B,2DAA2D;EAC3D,gDAAgD;EAChD,gBAAgB;EAChB,QAAQ;EACR,gBAAgB;EAChB,iCAAiC;EACjC,oBAAoB;AAqBtB;;EAnBE;GACC,kBAAkB;GAClB,aAAa;EACd;;EAEA;GACC,aAAa;GACb,SAAS;GACT,mBAAmB;GACnB,QAAQ;EACT;GAIC;IACC,aAAa;GACd;CAEF;;AAGD;CACC,qBAAqB;CACrB,wBAAwB;CACxB,sCAAsC;CACtC,YAAY;CACZ,kBAAkB;CAClB,kBAAkB;CAClB,iBAAiB;CACjB,qBAAqB;CACrB,kBAAkB;CAClB,WAAW;AAKZ;;CAHC;EACC,UAAU;CACX;CTzHD;;AUAA;AAAA;CACC,kBAAkB;AAqBnB;;CAnBC;EACC,kBAAkB;EAClB,qBAAqB;EACrB,oBAAoB;EACpB,qBAAqB;CAMtB;;EAJC;GACC,wBAAwB;GACxB,0BAA0B;EAC3B;;CAGD;EACC,wBAAwB;EACxB,gBAAgB;EAChB,oBAAoB;EACpB,gBAAgB;EAChB,aAAa;CACd;CVrBD;;AWAA;;AAAA;;iEAEiE;;AAEjE;CACC,aAAa;CACb,mBAAmB;CACnB,8BAA8B;AAqC/B;;CAnCC;EACC,gBAAgB;CACjB;;CAEA;EACC,oBAAoB;EACpB,kCAAkC;EAClC,kCAAkC;CAKnC;;EAHC;GACC,+BAA+B;EAChC;;CAGD;EACC,cAAc;EACd,sCAAsC;EACtC,OAAO;CAMR;;EAJC;GACC,gCAAgC;GAChC,gDAAgD;EACjD;;CAGD;;AA9BD;EA+BE,uBAAuB;EACvB,sBAAsB;EACtB,0CAA0C;AAO5C;;EALE;GACC,cAAc;GACd,cAAc;EACf;CACD;;AAGD;CACC,gBAAgB;AAiBjB;EAdE;GACC,mCAAmC;GACnC,qBAAqB;GACrB,SAAS;EACV;;CAGD;GAEE;IACC,SAAS;GACV;CAEF;CX/DD;;AYAA;;AAAA,8EAA8E;;AAE9E;CACC,kHAAkH;CAClH,aAAa;AACd;;AAEA;CACC,4DAA4D;CAC5D,wCAAwC;;CAExC,sCAAsC;CACtC,qBAAqB;;CAErB,iDAAiD;CACjD,kBAAkB;AACnB;;AAEA;CACC,kFAAkF;CAClF,YAAY;;CAEZ,+DAA+D;CAC/D,gBAAgB;AACjB;;AAEA;;CAEC,iCAAiC;CACjC,iBAAiB;CACjB,cAAc;CACd,aAAa;;CAEb,+BAA+B;CAC/B,wBAAwB;AACzB;CZnCA;;AaAA;;AAAA;;iEAEiE;;AAEjE;CACC,+BAA+B;AAwFhC;;CAtFC;EACC,gBAAgB;CACjB;;CAEA;EACC,0BAA0B;EAC1B,iCAA8B;UAA9B,8BAA8B;CAC/B;;CAEA;;;;EAIC,0CAA0C;EAC1C,+BAA+B;EAC/B,cAAc;CAKf;;EAHC;;CARD;;;;GASE,gCAAgC;CAElC;EADC;;CAGD;EACC;GACC,YAAY;GACZ,sCAAsC;EACvC;CACD;;CAEA;;EAEC,iBAAiB;EACjB,iBAAiB;CAuBlB;;EArBC;GACC,qBAAqB;EAKtB;;GAHC;IACC,gBAAgB;GACjB;;EAGD;GACC,wBAAwB;EACzB;;EAEA;GACC,+BAA+B;EAChC;;EAEA;;;;GAEC,oBAAoB;GACpB,gBAAgB;EACjB;;CAGD;EACC,eAAe;EACf,kBAAkB;EAClB,wBAAwB;EACxB,gBAAgB;CACjB;;CAEA,yBAAyB;CACzB;;EAEC,sBAAsB;EACtB,qBAAqB;EACrB,yBAAyB;CAC1B;;CAEA;EACC,yCAAyC;CAY1C;;EAVC;GACC,cAAc;GACd,cAAc;EACf;;EAEA;;CARD;GASE,+BAA+B;GAC/B,iBAAiB;GACjB,kBAAkB;CAEpB;EADC;Cb3FF;;AcAA;;AAAA,sDAAsD;;AAEtD;;CAEC,uBAAuB;CACvB,qCAAqC;AAMtC;;CAJC;;AALD;;EAME,yBAAyB;EACzB,yCAAyC;AAE3C;CADC;;AAGD;CACC,UAAU;CACV,UAAU;CACV,UAAU;CACV,UAAU;CACV,4DAA4D;;CAE5D,kBAAkB;AACnB;;AAEA;;;;CAIC,YAAY;AACb;;AAEA;CACC,UAAU;CACV,UAAU;AACX;;AAEA;CACC,YAAY;AACb;;AAEA;;;;;CAKC,UAAU;CACV,UAAU;AACX;;AAEA;;CAEC,UAAU;CACV,UAAU;AACX;;AAEA;;;;;CAKC,iBAAiB;AAClB;;AAEA;;CAEC,gDAAgD;AACjD;;AAEA;;;;;;CAMC,UAAU;CACV,UAAU;AACX;;AAEA;;;;CAIC,UAAU;CACV,UAAU;CACV,iBAAiB;AAClB;;AAEA;;CAEC,UAAU;CACV,UAAU;AACX;;AAEA;;CAEC,SAAS;CACT,UAAU;CACV,UAAU;AACX;CdjGA;;AcmGA;;AAAA;CACC;EACC,aAAa;EACb,aAAa;EACb,aAAa;EACb,UAAU;EACV,4DAA4D;;EAE5D,kBAAkB;CACnB;;CAEA;;;;EAIC,UAAU;CACX;;CAEA;EACC,UAAU;EACV,UAAU;CACX;;CAEA;EACC,YAAY;CACb;;CAEA;;;;;EAKC,UAAU;EACV,WAAW;CACZ;;CAEA;;EAEC,UAAU;CACX;;CAEA;;;;;;EAMC,UAAU;CACX;;CAEA;;EAEC,gDAAgD;CACjD;;CAEA;;;;;;EAMC,UAAU;EACV,UAAU;CACX;;CAEA;;;;EAIC,UAAU;EACV,UAAU;CACX;;CAEA;;EAEC,UAAU;EACV,UAAU;CACX;;CAEA;;EAEC,SAAS;EACT,UAAU;EACV,UAAU;CACX;AACD;AAAA;;AAxLA;;AA0LA;;;CAGC,iBAAiB;AAClB;;AAEA;CACC,kBAAkB;AACnB;;AAEA;CACC,YAAY;AACb;CdtMA;;AeAA;AAAA,eAAe;AACf;CACC,gCAAgC;CAChC,wBAAwB;AACzB;;AAEA,+BAA+B;AAC/B;CACC;AACD;;AAEA;CACC;AACD;;AAEA,+BAA+B;AAC/B;CACC;AACD;;AAEA;CACC;AACD;;AAEA;;;;CAIC;AACD;;AAEA,oDAAoD;AACpD;;;;CAIC,mBAAmB;AACpB;;AAEA;;;;CAIC,mBAAmB;AACpB;;AAEA;;;;CAIC,oBAAoB;AACrB;;AAEA;;;;CAIC,oBAAoB;AACrB;;AAEA;CACC,oBAAoB;AACrB;;AAEA;CACC,oBAAoB;AACrB;CflEA","file":"/johan.css.map","sourcesContent":["/* Styles for Johan Brook.com\n\nBuilt for IE6, made in Dreamweaver.\n\nJust kidding.\n--------------------------------------------- */\n\n@layer setup,\nbase,\nviews,\ncomponents,\nutils;\n\n@import 'css/reset.css' layer(setup);\n@import 'css/variables.css' layer(setup);\n\n@import 'css/base.css' layer(base);\n@import 'css/utils.css' layer(utils);\n@import 'css/footer.css' layer(base);\n\n@import 'css/layout.css' layer(base);\n\n@import 'css/admin.css' layer(views);\n@import 'css/changelog.css' layer(views);\n\n@import 'css/notes.css' layer(components);\n@import 'css/navigation.css' layer(components);\n@import 'css/notes.css' layer(components);\n@import 'css/page-nav.css' layer(components);\n@import 'css/posts-list.css' layer(components);\n@import 'css/autogrow.css' layer(utils);\n@import 'css/prose.css' layer(components);\n\n@import 'css/prism-matrix.css' layer(base);\n@import 'css/typeset.css' layer(utils);\n","/* https://github.com/mayank99/reset.css/blob/main/package/index.css@0.7.0 */\n*,\n*::before,\n*::after {\n\tmargin: 0;\n\tpadding: 0;\n\tbox-sizing: border-box;\n}\n\n:where([hidden]:not([hidden='until-found'])) {\n\tdisplay: none !important;\n}\n\n:where(html) {\n\t-webkit-text-size-adjust: none;\n\tcolor-scheme: dark light;\n}\n\n@media (prefers-reduced-motion: no-preference) {\n\t:where(html:focus-within) {\n\t\tscroll-behavior: smooth;\n\t}\n}\n\n:where(body) {\n\tline-height: 1.5;\n\tfont-family: system-ui, sans-serif;\n\t-webkit-font-smoothing: antialiased;\n}\n\n:where(input, button, textarea, select) {\n\tfont: inherit;\n\tcolor: inherit;\n}\n\n:where(textarea) {\n\tresize: vertical;\n\tresize: block;\n}\n\n:where(button, label, select, summary, [role='button'], [role='option']) {\n\tcursor: pointer;\n}\n\n:where(:disabled) {\n\tcursor: not-allowed;\n}\n\n:where(label:has(> input:disabled), label:has(+ input:disabled)) {\n\tcursor: not-allowed;\n}\n\n:where(button) {\n\tborder-style: solid;\n}\n\n:where(a) {\n\tcolor: inherit;\n\ttext-underline-offset: 0.2ex;\n}\n\n:where(ul, ol) {\n\tlist-style: none;\n}\n\n:where(img, svg, video, canvas, audio, iframe, embed, object) {\n\tdisplay: block;\n}\n\n:where(img, picture, svg, video) {\n\tmax-inline-size: 100%;\n\tblock-size: auto;\n}\n\n:where(p, h1, h2, h3, h4, h5, h6) {\n\toverflow-wrap: break-word;\n}\n\n:where(h1, h2, h3) {\n\tline-height: calc(1em + 0.5rem);\n\ttext-wrap: balance;\n}\n\n:where(hr) {\n\tborder: none;\n\tborder-block-start: 1px solid;\n\tcolor: inherit;\n\tblock-size: 0;\n\toverflow: visible;\n}\n\n:where(:focus-visible) {\n\toutline: 3px solid Highlight;\n\toutline-offset: 2px;\n\tscroll-margin-block: 10vh;\n}\n\n:where(.visually-hidden:not(:focus-within, :active)) {\n\tclip-path: inset(50%) !important;\n\theight: 1px !important;\n\twidth: 1px !important;\n\toverflow: hidden !important;\n\tposition: absolute !important;\n\twhite-space: nowrap !important;\n\tborder: 0 !important;\n}\n",null,":root {\n\t/* Colors */\n\n\t--neon: hsl(145 56% 57%);\n\t--yellow: hsl(50 93% 56%);\n\t--grey: hsl(214.51 7.24% 47.56%);\n\t--grey-light: hsl(173 7% 36% / 0.5);\n\t--grey-lightest: hsl(173 7% 93%);\n\n\t--color-bg: #fff;\n\t--color-bg-secondary: hsl(112 29.98% 97%);\n\t--color-text: hsl(0 0% 13%);\n\t--color-text-high-contrast: black;\n\t--color-text-detail: var(--grey);\n\n\t--link-color: hsl(201.43, 100%, 37.25%);\n\t--link-color-hover: hsl(201.43, 100%, 25.25%);\n\t--link-color-visited: hsl(266 100% 44%);\n\t--link-underline-color: hsl(201.43 43.1% 56.06% / 0.47);\n\t--border-color: var(--grey);\n\n\t--btn-color: hsl(213 100% 50%);\n\t--btn-color-hover: hsl(213 100% 41%);\n\t--btn-color-active: hsl(213 100% 33%);\n\t--btn-color-disabled: var(--grey);\n\n\t--focus-color: var(--link-color);\n\n\t--pre-background: var(--color-bg-secondary);\n\t--code-background: var(--color-bg-secondary);\n\t--code-color: hsl(112 30% 30%);\n\n\t--hr-color: var(--color-text);\n\n\t@supports (color: color(display-p3 1 1 1 / 1)) {\n\t\t--link-color: color(display-p3 0 0.425 0.73);\n\t\t--link-color-hover: color(display-p3 0.01 0.295 0.495);\n\t\t--link-color-visited: color(display-p3 0.431 0.053 0.965);\n\t}\n\n\t@media screen and (prefers-color-scheme: dark) {\n\t\t--yellow: #c3a507;\n\t\t--grey: hsl(214.51, 6.64%, 61.44%);\n\t\t--grey-lightest: hsl(173 7% 17%);\n\n\t\t--color-bg: #1a1a1a;\n\t\t--color-bg-secondary: hsl(240 3.36% 14.51%);\n\t\t--color-text: hsl(0, 0%, 86%);\n\t\t--color-text-high-contrast: white;\n\t\t--link-color: hsl(201.43 94.7% 62.23%);\n\t\t--link-color-hover: hsl(201.43, 93.43%, 69.58%);\n\t\t--link-underline-color: hsl(201.43 57.86% 50.17% / 0.47);\n\t\t--link-color-visited: #7a8be5;\n\t\t--border-color: var(--color-text-detail);\n\t\t--code-color: hsl(112 80% 80%);\n\n\t\t@supports (color: color(display-p3 1 1 1 / 1)) {\n\t\t\t--link-color: color(display-p3 0.38 0.742 1);\n\t\t\t--link-color-hover: color(display-p3 0.577 0.82 0.995);\n\t\t}\n\t}\n\n\t/* Typography */\n\n\t--sans: system-ui, sans-serif;\n\t--mono: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace;\n\t--serif: 'Iowan Old Style', 'Palatino Linotype', 'URW Palladio L', P052, serif;\n\n\t--font-size-base: 18;\n\t--leading: 1.618;\n\t/* Rhythm unit */\n\t--lineheight: calc(var(--leading) * 1rem);\n\n\t--tracking: -0.014em;\n\t--tracking-f0: -0.022em;\n\t--tracking-f1: -0.021em;\n\t--tracking-f2: -0.02em;\n\t--tracking-f3: -0.018em;\n\t--tracking-f4: -0.014em;\n\t--tracking-f5: -0.009em;\n\t--tracking-f6: -0.0025em;\n\n\t--f0: calc((72 / var(--font-size-base)) * 1rem);\n\t--f1: calc((36 / var(--font-size-base)) * 1rem);\n\t--f2: calc((30 / var(--font-size-base)) * 1rem);\n\t--f3: calc((26 / var(--font-size-base)) * 1rem);\n\t--f4: 1rem;\n\t--f5: calc((15 / var(--font-size-base)) * 1rem);\n\t--f6: calc((13 / var(--font-size-base)) * 1rem);\n\t--f7: calc((11 / var(--font-size-base)) * 1rem);\n\n\t/* Measures */\n\n\t--inset: calc(var(--lineheight) / 2);\n\n\t--measure: 65ch;\n\t--measure-narrow: 45ch;\n\t--measure-wide: 100ch;\n\n\t--content-width: var(--measure);\n\n\t--spacing-base: var(--lineheight);\n\n\t--spacing-none: 0;\n\t--spacing-extra-small: calc(var(--spacing-base) / 5);\n\t--spacing-small: calc(var(--spacing-base) / 2);\n\t--spacing-medium: var(--spacing-base);\n\t--spacing-large: calc(var(--spacing-base) * 2);\n\t--spacing-extra-large: calc(var(--spacing-base) * 3);\n\t--spacing-extra-extra-large: calc(var(--spacing-base) * 4);\n\t--spacing-extra-extra-extra-large: calc(var(--spacing-base) * 6);\n\n\t@media screen and (max-width: 980px) {\n\t\t--inset: var(--lineheight);\n\t\t--font-size-base: 16;\n\t}\n}\n","/* =ELEMENTS\n--------------------------------------------- */\n\nhtml {\n\t/* https://kilianvalkhof.com/2022/css-html/your-css-reset-needs-text-size-adjust-probably/ */\n\t-moz-text-size-adjust: none;\n\t-webkit-text-size-adjust: none;\n\ttext-size-adjust: none;\n}\n\n:where(body, html) {\n\tfont: normal calc(var(--font-size-base) * 1px) / var(--leading) var(--serif);\n\tbackground-color: var(--color-bg);\n\tcolor: var(--color-text);\n}\n\nbody {\n\tpadding: var(--inset);\n\tline-height: var(--leading);\n\tletter-spacing: var(--tracking);\n\tfont-feature-settings:\n\t\t/* Contextual alternates */\n\t\t'calt' 1,\n\t\t'kern' 1,\n\t\t'liga' 1;\n\tfont-variant-ligatures: contextual common-ligatures;\n\n\t@media screen and (prefers-color-scheme: dark) {\n\t\tword-spacing: 0.05em;\n\t}\n\n\t@media screen and (min-width: 980px) {\n\t\tpadding-top: calc(var(--inset) * 2);\n\t}\n}\n\nmain {\n\tmax-width: var(--content-width);\n\tmargin-bottom: calc(var(--lineheight) * 3);\n}\n\n:target {\n\tscroll-margin-block: 5ex;\n}\n\n:focus-visible {\n outline: 2px solid black;\n box-shadow: 0 0 0 4px white;\n border-radius: .25em;\n}\n\n/* =HEADINGS\n--------------------------------------------- */\n\nh1,\nh2,\nh3,\nh4,\nh5,\nh6 {\n\tmargin-block-end: 0;\n\tmargin-bottom: calc(var(--lineheight) / 2);\n\tcolor: var(--color-text-high-contrast);\n}\n\n.f0,\n.title {\n\tfont-size: clamp(var(--f1), 12vw, var(--f0));\n\tletter-spacing: var(--tracking-f0);\n\tline-height: calc(var(--leading) * 0.75);\n}\n\nh1,\n.f1 {\n\tfont-size: var(--f1);\n\tletter-spacing: var(--tracking-f1);\n}\n\nh2,\n.f2 {\n\tfont-size: var(--f2);\n\tletter-spacing: var(--tracking-f2);\n}\n\nh3,\n.f3 {\n\tfont-size: var(--f3);\n\tletter-spacing: var(--tracking-f3);\n}\n\nh4,\n.f4 {\n\tfont-size: var(--f4);\n\tletter-spacing: var(--tracking-f4);\n}\n\nh5,\n.f5 {\n\tfont-size: var(--f5);\n\tletter-spacing: var(--tracking-f5);\n}\n\nh6,\n.f6 {\n\tfont-size: var(--f6);\n\tletter-spacing: var(--tracking-f6);\n}\n\n.f7 {\n\tfont-size: var(--f7);\n}\n\nul,\nol {\n\tpadding-left: 0;\n}\n\nnav ul {\n\tlist-style: none;\n\tmargin: 0;\n\tpadding: 0;\n}\n\na,\n.link {\n\tcolor: var(--link-color);\n\tposition: relative;\n\ttext-decoration: none;\n\ttext-underline-offset: 3px;\n\n\t&:not(.prose &) {\n\t\tfont-family: var(--sans);\n\t}\n\n\t&.block {\n\t\ttext-decoration: none;\n\t\tfont-weight: unset;\n\t}\n\n\t&:hover,\n\t&:hover .link {\n\t\tcolor: var(--link-color-hover);\n\t\ttext-decoration-color: currentColor;\n\t}\n\n\t&:not(.block):hover, &:hover .link {\n\t\ttext-decoration: underline;\n\t}\n\n\t&:active {\n\t\ttop: 1px;\n\t}\n\n\t&.muted {\n\t\ttext-decoration: none;\n\n\t\t&:hover {\n\t\t\ttext-decoration: underline;\n\t\t}\n\t}\n}\n\np,\nul,\nol,\nblockquote,\ntable,\nfigure,\npre {\n\tmargin: 0 0 var(--lineheight);\n}\n\nimg {\n\tmax-width: 100%;\n\theight: auto;\n}\n\npre,\ncode {\n\tfont-family: var(--mono);\n}\n\n:not(pre)>code {\n\tbackground-color: var(--code-background);\n\tpadding: 2px 4px;\n\tborder-radius: 4px;\n\tfont-size: .9rem;\n}\n\nfigcaption {\n\tcolor: var(--grey);\n}\n\ntable {\n\t--spacing: 0.25em;\n\n\ttext-align: left;\n\twidth: 100%;\n\tborder-collapse: collapse;\n\tborder-spacing: 0;\n\n\t&.textual {\n\t\t--spacing: .6em;\n\n\t\t& th {\n\t\t\ttext-transform: lowercase;\n\t\t\tfont-weight: normal;\n\t\t\tfont-size: var(--f4);\n\t\t\tfont-variant: small-caps;\n\t\t}\n\n\t\t& td {\n\t\t\tvertical-align: top;\n\t\t\tborder-bottom: 1px solid var(--grey-lightest);\n\t\t}\n\n\t\t& tr>td:first-of-type {\n\t\t\tfont-weight: bold;\n\t\t\twidth: 25%;\n\t\t}\n\n\t\t& tr>td:nth-of-type(2) {\n\t\t\twidth: 15%;\n\t\t}\n\t}\n}\n\nth {\n\tborder-bottom: 2px solid var(--grey-light);\n\tpadding: var(--spacing);\n\tfont-weight: bold;\n\tfont-size: var(--f5);\n\tposition: sticky;\n\ttop: 0;\n\tbackground-color: var(--color-bg);\n}\n\ntd {\n\tpadding: var(--spacing);\n}\n\nth,\ntd {\n\t&:first-child {\n\t\tpadding-left: 0;\n\t}\n}\n\npre {\n\t--tab-size: 2;\n\t--top-inset: calc(var(--lineheight) / 2);\n\n\tdirection: ltr;\n\ttext-align: left;\n\tline-height: var(--leading);\n\twhite-space: pre;\n\tword-spacing: normal;\n\tword-break: normal;\n\thyphens: none;\n\ttab-size: var(--tab-size);\n\tbackground: var(--pre-background);\n\tcolor: var(--code-color);\n\tborder-radius: 8px;\n\tpadding: var(--top-inset) calc(var(--lineheight));\n\t-webkit-font-smoothing: subpixel-antialiased;\n\t-moz-osx-font-smoothing: none;\n\tfont-size: var(--f5);\n\toverflow: auto;\n\tposition: relative;\n\n\t@media screen and (max-width: 480px) {\n\t\tpadding-left: 0.25em;\n\t}\n\n\t& .line-highlight {\n\t\t--cycle: 27px;\n\t\t--color: 112 20% 50%;\n\t\ttext-decoration: none;\n\t\tposition: absolute;\n\t\theight: calc(var(--rows) * var(--cycle));\n\t\ttop: calc(var(--top-inset) + (var(--start) - 1) * var(--cycle));\n\t\tbackground-color: hsl(var(--color) / 4%);\n\t\tcolor: hsl(var(--color) / 80%);\n\t\tleft: 0;\n\t\twidth: 100%;\n\t\tdisplay: block;\n\t\tpointer-events: none;\n\t\tpadding: 0 6px;\n\t\tfont-size: var(--f7);\n\t}\n}\n\nli>pre {\n\tmargin-top: calc(var(--lineheight) / 2);\n\tmargin-bottom: calc(var(--lineheight) / 2);\n}\n\n/* Syntax highlighting */\ncode[class*='language-'] {\n\tdisplay: block;\n}\n\nblockquote {\n\tborder-left: 2px solid var(--grey-light);\n\tmargin: calc(var(--lineheight) * 2) 2rem calc(var(--lineheight) * 2) 0;\n\tpadding-left: 1rem;\n\tpadding-right: 1rem;\n\tcolor: var(--color-text-high-contrast);\n\n\t&>p {\n\t\tmargin-bottom: calc(var(--lineheight) / 2);\n\t}\n\n\t& footer {\n\t\tcolor: var(--grey);\n\t\tmargin-top: var(--lineheight);\n\t}\n}\n\nhr {\n\tborder: 0;\n\tbackground-color: var(--hr-color);\n\theight: .7rem;\n\taspect-ratio: 1 / 1;\n\tmargin: calc(var(--lineheight) * 2) 0;\n\tborder-radius: 100%;\n}\n\ntextarea {\n\tpadding: 0.5em;\n\tborder: 1px solid var(--grey);\n\tborder-radius: 0.4em;\n\tresize: vertical;\n\n\t&:focus {\n\t\toutline: 0;\n\t\tborder-color: var(--link-color);\n\t}\n}\n",".skip-link {\n\tposition: fixed;\n\ttop: var(--inset);\n\tleft: var(--inset);\n}\n\n/*\nBUTTONS\n----------------------------------------------------------------*/\n\n.btn {\n\tappearance: none;\n\tborder: 0;\n\tbackground: none;\n\ttext-decoration: none;\n\tcolor: var(--link-color);\n\ttext-align: center;\n\ttext-transform: lowercase;\n\tborder-radius: 6px;\n\tfont-weight: 500;\n\tbox-shadow: currentColor 0 0 0 1px;\n\tpadding: 0.3em 0.6em;\n\twhite-space: nowrap;\n\ttext-overflow: ellipsis;\n\tdisplay: inline-block;\n\toverflow: hidden;\n\tmax-width: 100%;\n\n\t&:not([disabled]) {\n\t\tcursor: pointer;\n\t}\n\n\t&:hover {\n\t\ttext-decoration: none;\n\t}\n\n\t&:hover {\n\t\ttext-decoration: none;\n\t\tcolor: var(--link-color-hover);\n\t}\n\n\t&:active,\n\t&:active {\n\t\tcolor: var(--link-color-active);\n\t}\n\n\t&[disabled] {\n\t\tcolor: var(--btn-color-disabled);\n\t}\n}\n\n/*\nOPEN TYPE\n----------------------------------------------------------------*/\n\n.plain-font-features {\n\tfont-feature-settings:\n\t\t/* Contextual alternates */\n\t\t'calt' 1, 'kern' 1,\n\t\t'liga' 1,\n\t\t/* Open digis */\n\t\t'ss01' 1,\n\t\t/* Curved 'r' */\n\t\t'ss03' 1,\n\t\t/* Disambiguation */\n\t\t'ss04' 0, 'frac' 1;\n}\n\n/*\nFONT STYLES\n----------------------------------------------------------------*/\n\n.i {\n\tfont-style: italic;\n}\n\n/*\nFONT WEIGHTS\n----------------------------------------------------------------*/\n\n.normal {\n\tfont-weight: normal;\n}\n\n.b {\n\tfont-weight: bold;\n}\n\n.fw1 {\n\tfont-weight: 100;\n}\n\n.fw2 {\n\tfont-weight: 200;\n}\n\n.fw3 {\n\tfont-weight: 300;\n}\n\n.fw4 {\n\tfont-weight: 400;\n}\n\n.fw5 {\n\tfont-weight: 500;\n}\n\n.fw6 {\n\tfont-weight: 600;\n}\n\n.fw7 {\n\tfont-weight: 700;\n}\n\n.fw8 {\n\tfont-weight: 800;\n}\n\n.fw9 {\n\tfont-weight: 900;\n}\n\n/*\nTEXT ALIGNMENT\n----------------------------------------------------------------*/\n\n.tl {\n\ttext-align: left;\n}\n\n.tr {\n\ttext-align: right;\n}\n\n.tc {\n\ttext-align: center;\n}\n\n.tj {\n\ttext-align: justify;\n}\n\n.w-full {\n\twidth: 100%;\n}\n\n.block {\n\tdisplay: block;\n}\n\n/*\nFLEXBOX\n----------------------------------------------------------------*/\n\n.flex {\n\tdisplay: flex;\n}\n\n.inline-flex {\n\tdisplay: inline-flex;\n}\n\n.gap-1 {\n\tgap: 0.5em;\n}\n\n.gap {\n\tgap: 1.5em;\n}\n\n/* 1. Fix for Chrome 44 bug.\n * https://code.google.com/p/chromium/issues/detail?id=506893 */\n.flex-auto {\n\tflex: 1 1 auto;\n\tmin-width: 0;\n\t/* 1 */\n\tmin-height: 0;\n\t/* 1 */\n}\n\n.flex-1 {\n\tflex: 1;\n}\n\n.flex-none {\n\tflex: none;\n}\n\n.flex-column {\n\tflex-direction: column;\n}\n\n.flex-row {\n\tflex-direction: row;\n}\n\n.flex-wrap {\n\tflex-wrap: wrap;\n}\n\n.flex-nowrap {\n\tflex-wrap: nowrap;\n}\n\n.flex-wrap-reverse {\n\tflex-wrap: wrap-reverse;\n}\n\n.flex-column-reverse {\n\tflex-direction: column-reverse;\n}\n\n.flex-row-reverse {\n\tflex-direction: row-reverse;\n}\n\n.items-start {\n\talign-items: flex-start;\n}\n\n.items-end {\n\talign-items: flex-end;\n}\n\n.items-center {\n\talign-items: center;\n}\n\n.items-baseline {\n\talign-items: baseline;\n}\n\n.items-stretch {\n\talign-items: stretch;\n}\n\n.self-start {\n\talign-self: flex-start;\n}\n\n.self-end {\n\talign-self: flex-end;\n}\n\n.self-center {\n\talign-self: center;\n}\n\n.self-baseline {\n\talign-self: baseline;\n}\n\n.self-stretch {\n\talign-self: stretch;\n}\n\n.justify-start {\n\tjustify-content: flex-start;\n}\n\n.justify-end {\n\tjustify-content: flex-end;\n}\n\n.justify-center {\n\tjustify-content: center;\n}\n\n.justify-between {\n\tjustify-content: space-between;\n}\n\n.justify-around {\n\tjustify-content: space-around;\n}\n\n.justify-evenly {\n\tjustify-content: space-evenly;\n}\n\n.content-start {\n\talign-content: flex-start;\n}\n\n.content-end {\n\talign-content: flex-end;\n}\n\n.content-center {\n\talign-content: center;\n}\n\n.content-between {\n\talign-content: space-between;\n}\n\n.content-around {\n\talign-content: space-around;\n}\n\n.content-stretch {\n\talign-content: stretch;\n}\n\n/*\nSPACING\n----------------------------------------------------------------*/\n\n.pa0 {\n\tpadding: var(--spacing-none);\n}\n\n.pa1 {\n\tpadding: var(--spacing-extra-small);\n}\n\n.pa2 {\n\tpadding: var(--spacing-small);\n}\n\n.pa3 {\n\tpadding: var(--spacing-medium);\n}\n\n.pa4 {\n\tpadding: var(--spacing-large);\n}\n\n.pa5 {\n\tpadding: var(--spacing-extra-large);\n}\n\n.pa6 {\n\tpadding: var(--spacing-extra-extra-large);\n}\n\n.pa7 {\n\tpadding: var(--spacing-extra-extra-extra-large);\n}\n\n.pl0 {\n\tpadding-left: var(--spacing-none);\n}\n\n.pl1 {\n\tpadding-left: var(--spacing-extra-small);\n}\n\n.pl2 {\n\tpadding-left: var(--spacing-small);\n}\n\n.pl3 {\n\tpadding-left: var(--spacing-medium);\n}\n\n.pl4 {\n\tpadding-left: var(--spacing-large);\n}\n\n.pl5 {\n\tpadding-left: var(--spacing-extra-large);\n}\n\n.pl6 {\n\tpadding-left: var(--spacing-extra-extra-large);\n}\n\n.pl7 {\n\tpadding-left: var(--spacing-extra-extra-extra-large);\n}\n\n.pr0 {\n\tpadding-right: var(--spacing-none);\n}\n\n.pr1 {\n\tpadding-right: var(--spacing-extra-small);\n}\n\n.pr2 {\n\tpadding-right: var(--spacing-small);\n}\n\n.pr3 {\n\tpadding-right: var(--spacing-medium);\n}\n\n.pr4 {\n\tpadding-right: var(--spacing-large);\n}\n\n.pr5 {\n\tpadding-right: var(--spacing-extra-large);\n}\n\n.pr6 {\n\tpadding-right: var(--spacing-extra-extra-large);\n}\n\n.pr7 {\n\tpadding-right: var(--spacing-extra-extra-extra-large);\n}\n\n.pb0 {\n\tpadding-bottom: var(--spacing-none);\n}\n\n.pb1 {\n\tpadding-bottom: var(--spacing-extra-small);\n}\n\n.pb2 {\n\tpadding-bottom: var(--spacing-small);\n}\n\n.pb3 {\n\tpadding-bottom: var(--spacing-medium);\n}\n\n.pb4 {\n\tpadding-bottom: var(--spacing-large);\n}\n\n.pb5 {\n\tpadding-bottom: var(--spacing-extra-large);\n}\n\n.pb6 {\n\tpadding-bottom: var(--spacing-extra-extra-large);\n}\n\n.pb7 {\n\tpadding-bottom: var(--spacing-extra-extra-extra-large);\n}\n\n.pt0 {\n\tpadding-top: var(--spacing-none);\n}\n\n.pt1 {\n\tpadding-top: var(--spacing-extra-small);\n}\n\n.pt2 {\n\tpadding-top: var(--spacing-small);\n}\n\n.pt3 {\n\tpadding-top: var(--spacing-medium);\n}\n\n.pt4 {\n\tpadding-top: var(--spacing-large);\n}\n\n.pt5 {\n\tpadding-top: var(--spacing-extra-large);\n}\n\n.pt6 {\n\tpadding-top: var(--spacing-extra-extra-large);\n}\n\n.pt7 {\n\tpadding-top: var(--spacing-extra-extra-extra-large);\n}\n\n.pv0 {\n\tpadding-top: var(--spacing-none);\n\tpadding-bottom: var(--spacing-none);\n}\n\n.pv1 {\n\tpadding-top: var(--spacing-extra-small);\n\tpadding-bottom: var(--spacing-extra-small);\n}\n\n.pv2 {\n\tpadding-top: var(--spacing-small);\n\tpadding-bottom: var(--spacing-small);\n}\n\n.pv3 {\n\tpadding-top: var(--spacing-medium);\n\tpadding-bottom: var(--spacing-medium);\n}\n\n.pv4 {\n\tpadding-top: var(--spacing-large);\n\tpadding-bottom: var(--spacing-large);\n}\n\n.pv5 {\n\tpadding-top: var(--spacing-extra-large);\n\tpadding-bottom: var(--spacing-extra-large);\n}\n\n.pv6 {\n\tpadding-top: var(--spacing-extra-extra-large);\n\tpadding-bottom: var(--spacing-extra-extra-large);\n}\n\n.pv7 {\n\tpadding-top: var(--spacing-extra-extra-extra-large);\n\tpadding-bottom: var(--spacing-extra-extra-extra-large);\n}\n\n.ph0 {\n\tpadding-left: var(--spacing-none);\n\tpadding-right: var(--spacing-none);\n}\n\n.ph1 {\n\tpadding-left: var(--spacing-extra-small);\n\tpadding-right: var(--spacing-extra-small);\n}\n\n.ph2 {\n\tpadding-left: var(--spacing-small);\n\tpadding-right: var(--spacing-small);\n}\n\n.ph3 {\n\tpadding-left: var(--spacing-medium);\n\tpadding-right: var(--spacing-medium);\n}\n\n.ph4 {\n\tpadding-left: var(--spacing-large);\n\tpadding-right: var(--spacing-large);\n}\n\n.ph5 {\n\tpadding-left: var(--spacing-extra-large);\n\tpadding-right: var(--spacing-extra-large);\n}\n\n.ph6 {\n\tpadding-left: var(--spacing-extra-extra-large);\n\tpadding-right: var(--spacing-extra-extra-large);\n}\n\n.ph7 {\n\tpadding-left: var(--spacing-extra-extra-extra-large);\n\tpadding-right: var(--spacing-extra-extra-extra-large);\n}\n\n.ma0 {\n\tmargin: var(--spacing-none);\n}\n\n.ma1 {\n\tmargin: var(--spacing-extra-small);\n}\n\n.ma2 {\n\tmargin: var(--spacing-small);\n}\n\n.ma3 {\n\tmargin: var(--spacing-medium);\n}\n\n.ma4 {\n\tmargin: var(--spacing-large);\n}\n\n.ma5 {\n\tmargin: var(--spacing-extra-large);\n}\n\n.ma6 {\n\tmargin: var(--spacing-extra-extra-large);\n}\n\n.ma7 {\n\tmargin: var(--spacing-extra-extra-extra-large);\n}\n\n.ml0 {\n\tmargin-left: var(--spacing-none);\n}\n\n.ml1 {\n\tmargin-left: var(--spacing-extra-small);\n}\n\n.ml2 {\n\tmargin-left: var(--spacing-small);\n}\n\n.ml3 {\n\tmargin-left: var(--spacing-medium);\n}\n\n.ml4 {\n\tmargin-left: var(--spacing-large);\n}\n\n.ml5 {\n\tmargin-left: var(--spacing-extra-large);\n}\n\n.ml6 {\n\tmargin-left: var(--spacing-extra-extra-large);\n}\n\n.ml7 {\n\tmargin-left: var(--spacing-extra-extra-extra-large);\n}\n\n.mx-auto {\n\tmargin-left: auto;\n\tmargin-right: auto;\n}\n\n.mx1 {\n\tmargin-right: var(--spacing-extra-small);\n\tmargin-left: var(--spacing-extra-small);\n}\n\n.mr0 {\n\tmargin-right: var(--spacing-none);\n}\n\n.mr1 {\n\tmargin-right: var(--spacing-extra-small);\n}\n\n.mr2 {\n\tmargin-right: var(--spacing-small);\n}\n\n.mr3 {\n\tmargin-right: var(--spacing-medium);\n}\n\n.mr4 {\n\tmargin-right: var(--spacing-large);\n}\n\n.mr5 {\n\tmargin-right: var(--spacing-extra-large);\n}\n\n.mr6 {\n\tmargin-right: var(--spacing-extra-extra-large);\n}\n\n.mr7 {\n\tmargin-right: var(--spacing-extra-extra-extra-large);\n}\n\n.mb0 {\n\tmargin-bottom: var(--spacing-none);\n}\n\n.mb1 {\n\tmargin-bottom: var(--spacing-extra-small);\n}\n\n.mb2 {\n\tmargin-bottom: var(--spacing-small);\n}\n\n.mb3 {\n\tmargin-bottom: var(--spacing-medium);\n}\n\n.mb4 {\n\tmargin-bottom: var(--spacing-large);\n}\n\n.mb5 {\n\tmargin-bottom: var(--spacing-extra-large);\n}\n\n.mb6 {\n\tmargin-bottom: var(--spacing-extra-extra-large);\n}\n\n.mb7 {\n\tmargin-bottom: var(--spacing-extra-extra-extra-large);\n}\n\n.mt0 {\n\tmargin-top: var(--spacing-none);\n}\n\n.mt1 {\n\tmargin-top: var(--spacing-extra-small);\n}\n\n.mt2 {\n\tmargin-top: var(--spacing-small);\n}\n\n.mt3 {\n\tmargin-top: var(--spacing-medium);\n}\n\n.mt4 {\n\tmargin-top: var(--spacing-large);\n}\n\n.mt5 {\n\tmargin-top: var(--spacing-extra-large);\n}\n\n.mt6 {\n\tmargin-top: var(--spacing-extra-extra-large);\n}\n\n.mt7 {\n\tmargin-top: var(--spacing-extra-extra-extra-large);\n}\n\n.mv0 {\n\tmargin-top: var(--spacing-none);\n\tmargin-bottom: var(--spacing-none);\n}\n\n.mv1 {\n\tmargin-top: var(--spacing-extra-small);\n\tmargin-bottom: var(--spacing-extra-small);\n}\n\n.mv2 {\n\tmargin-top: var(--spacing-small);\n\tmargin-bottom: var(--spacing-small);\n}\n\n.mv3 {\n\tmargin-top: var(--spacing-medium);\n\tmargin-bottom: var(--spacing-medium);\n}\n\n.mv4 {\n\tmargin-top: var(--spacing-large);\n\tmargin-bottom: var(--spacing-large);\n}\n\n.mv5 {\n\tmargin-top: var(--spacing-extra-large);\n\tmargin-bottom: var(--spacing-extra-large);\n}\n\n.mv6 {\n\tmargin-top: var(--spacing-extra-extra-large);\n\tmargin-bottom: var(--spacing-extra-extra-large);\n}\n\n.mv7 {\n\tmargin-top: var(--spacing-extra-extra-extra-large);\n\tmargin-bottom: var(--spacing-extra-extra-extra-large);\n}\n\n.mh0 {\n\tmargin-left: var(--spacing-none);\n\tmargin-right: var(--spacing-none);\n}\n\n.mh1 {\n\tmargin-left: var(--spacing-extra-small);\n\tmargin-right: var(--spacing-extra-small);\n}\n\n.mh2 {\n\tmargin-left: var(--spacing-small);\n\tmargin-right: var(--spacing-small);\n}\n\n.mh3 {\n\tmargin-left: var(--spacing-medium);\n\tmargin-right: var(--spacing-medium);\n}\n\n.mh4 {\n\tmargin-left: var(--spacing-large);\n\tmargin-right: var(--spacing-large);\n}\n\n.mh5 {\n\tmargin-left: var(--spacing-extra-large);\n\tmargin-right: var(--spacing-extra-large);\n}\n\n.mh6 {\n\tmargin-left: var(--spacing-extra-extra-large);\n\tmargin-right: var(--spacing-extra-extra-large);\n}\n\n.mh7 {\n\tmargin-left: var(--spacing-extra-extra-extra-large);\n\tmargin-right: var(--spacing-extra-extra-extra-large);\n}\n\n/*\nDISPLAY\n----------------------------------------------------------------*/\n\n.d-i {\n\tdisplay: inline;\n}\n\n.d-ib {\n\tdisplay: inline-block;\n}\n\n.d-b {\n\tdisplay: block;\n}\n\n/*\nBORDERS\n----------------------------------------------------------------*/\n\n.border {\n\tborder: 1px solid var(--border-color);\n}\n\n.border-b {\n\tborder-left-width: 0;\n\tborder-right-width: 0;\n\tborder-bottom-width: 1px;\n}\n\n.border-t {\n\tborder-left-width: 0;\n\tborder-right-width: 0;\n\tborder-top-width: 1px;\n}\n\n.border-b {\n\tborder-left-width: 0;\n\tborder-right-width: 0;\n\tborder-top-width: 0;\n\tborder-bottom-width: 1px;\n}\n\n/*\nCOLOURS\n----------------------------------------------------------------*/\n\n.text-bg {\n\tcolor: var(--color-bg);\n}\n\n.comp-neon {\n\tcolor: var(--neon);\n}\n\n.comp-yellow {\n\tcolor: var(--yellow);\n}\n\n.bg-comp-neon {\n\tbackground-color: var(--neon);\n}\n\n.bg-yellow {\n\tbackground-color: var(--yellow);\n}\n\n.text-color {\n\tcolor: var(--color-text);\n}\n\n.muted {\n\tcolor: var(--color-text-detail);\n}\n\n/*\nOPACITY\n----------------------------------------------------------------*/\n\n.dimmed {\n\topacity: 0.7;\n}\n\n/*\nTYPOGRAPHY\n----------------------------------------------------------------*/\n\n.leading-tight {\n\tline-height: 1.2;\n}\n\n.font-mono {\n\tfont-family: var(--mono);\n}\n\n.font-sans {\n\tfont-family: var(--sans);\n}\n\n.font-serif {\n\tfont-family: var(--serif);\n}\n\n.text-balance {\n\ttext-wrap: balance;\n}\n\n/* Measure is limited to ~78 characters */\n.measure {\n\tmax-width: var(--measure);\n}\n\n/* Measure is limited to ~80 characters */\n.measure-wide {\n\tmax-width: var(--measure-wide);\n}\n\n/* Measure is limited to ~45 characters */\n.measure-narrow {\n\tmax-width: var(--measure-narrow);\n}\n\n.uppercase {\n\ttext-transform: uppercase;\n}\n\n.tracking {\n\tletter-spacing: 1px;\n}\n\n.rounded-small {\n\tborder-radius: .25em;\n}\n\n.no-underline {\n\ttext-decoration: none;\n\n\t&:hover {\n\t\ttext-decoration: underline;\n\t}\n}\n\n.badge {\n\tfont-size: var(--f7);\n\ttext-transform: lowercase;\n\tborder-radius: 4px;\n\tfont-weight: 500;\n\tbackground-color: var(--neon);\n\tcolor: var(--color-bg);\n\tpadding: 0.4em 0.8em;\n\n\t&:hover {\n\t\ttext-decoration: none;\n\t}\n}\n\n.sr-only {\n\tposition: absolute;\n\twidth: 1px;\n\theight: 1px;\n\tpadding: 0;\n\tmargin: -1px;\n\toverflow: hidden;\n\tclip: rect(0, 0, 0, 0);\n\twhite-space: nowrap;\n\tborder-width: 0;\n}\n\n\n@media screen and (max-width: 980px) {\n\t.sr-only-mobile {\n\t\tposition: absolute;\n\t\twidth: 1px;\n\t\theight: 1px;\n\t\tpadding: 0;\n\t\tmargin: -1px;\n\t\toverflow: hidden;\n\t\tclip: rect(0, 0, 0, 0);\n\t\twhite-space: nowrap;\n\t\tborder-width: 0;\n\t}\n}\n\n@media screen and (min-width: 981px) {\n\t.only-mobile {\n\t\tdisplay: none;\n\t}\n}\n\n.sep {\n\tcolor: var(--color-text-detail);\n\tdisplay: inline-block;\n\tmargin: 0 0.5em;\n}\n\n.no-wrap {\n\twhite-space: nowrap;\n}\n\n.checkbox-fix {\n\tposition: relative;\n\ttop: -1px;\n}\n\n.truncate {\n\twhite-space: nowrap;\n\ttext-overflow: ellipsis;\n\tdisplay: inline-block;\n\toverflow: hidden;\n\tmax-width: 100%;\n}\n\n.icon {\n\tfill: currentColor;\n\twidth: 1em;\n\theight: auto;\n\taspect-ratio: 1 / 1;\n\tvertical-align: middle;\n\tdisplay: inline-block;\n\tfont-size: .9em;\n}\n\na:hover .icon-feed {\n\tcolor: var(--yellow);\n}\n\n.drop-cap::first-letter {\n\tfont-size: 3.2rem;\n\tfont-weight: bold;\n\tfloat: left;\n\tmargin-right: 0.1em;\n\tline-height: 1;\n}\n","/*\nFOOTER\n----------------------------------------------------------------*/\n\n[role='contentinfo'] {\n\t&::before {\n\t\tcontent: '';\n\t\tbackground: url('data:image/svg+xml;utf8,') no-repeat;\n\t\tdisplay: block;\n\t\tcolor: var(--hr-color);\n\t\tfont-size: 8rem;\n\t\theight: 0.7rem;\n\t\tline-height: 1;\n\t\taspect-ratio: 1 / 1;\n\t\tmargin: calc(var(--lineheight) * 2) 0;\n\t}\n\n\t& nav {\n\t\t& ul {\n\t\t\tline-height: 2;\n\t\t}\n\n\t\t& a {\n\t\t\twhite-space: nowrap;\n\t\t}\n\n\t\t& li {\n\t\t\t&[aria-current=\"page\"] {\n\t\t\t\t& a {\n\t\t\t\t\tcolor: var(--grey);\n\t\t\t\t\tcursor: default;\n\t\t\t\t\ttext-decoration: none;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\n\t@media screen and (min-width: 58rem) {\n\t\tfont-size: var(--f5);\n\n\t\t& nav ul {\n\t\t\tdisplay: flex;\n\n\t\t\t& li {\n\t\t\t\t&:not(:last-child)::after {\n\t\t\t\t\tcontent: ' / ';\n\t\t\t\t\tdisplay: inline-block;\n\t\t\t\t\tmargin: 0 .75em;\n\t\t\t\t\tcolor: var(--color-text-detail);\n\t\t\t\t\ttransform: scaleY(1.2);\n\t\t\t\t\topacity: .7;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n}\n",".Content {\n\tmax-width: var(--content-width);\n\tmargin: 0 auto;\n\tdisplay: flex;\n\tflex-direction: column-reverse;\n\n\t&.wide {\n\t\t--content-width: var(--measure-wide);\n\t}\n\n\t@media screen and (min-width: 981px) {\n\t\thtml:not(.admin) & {\n\t\t\tmax-width: none;\n\t\t\tdisplay: grid;\n\t\t\tplace-content: center;\n\t\t\tgrid-template-columns: var(--content-width) auto;\n\t\t\tgap: var(--spacing-extra-large);\n\t\t}\n\t}\n}\n","#app[data-state] .pane {\n\tdisplay: none;\n}\n\n#app[data-state='INITED'] {\n\t& #INITED {\n\t\tdisplay: block;\n\t}\n}\n\n#app[data-state='sign-in'] {\n\t& #sign-in {\n\t\tdisplay: block;\n\t}\n}\n\n#app[data-state='START'] {\n\t& #START {\n\t\tdisplay: block;\n\t}\n}\n","/* =CHANGELOG\n--------------------------------------------- */\n\n.changelog {\n\t& .prose {\n\t\t&>ul {\n\t\t\tpadding-left: 0;\n\t\t\tmargin-bottom: var(--lineheight);\n\n\t\t\t& ul {\n\t\t\t\tmargin-bottom: 0;\n\t\t\t}\n\t\t}\n\t}\n}\n",".NotesList {\n\t& article {\n\t\tscroll-margin: var(--lineheight);\n\n\t\theader .target:hover span {\n\t\t\tcolor: var(--neon);\n\t\t}\n\n\t\t&:target {\n\t\t\t& .target {\n\t\t\t\tcolor: var(--neon);\n\t\t\t}\n\t\t}\n\t}\n\n\t& header h1 a {\n\t\tcolor: var(--color-text-high-contrast);\n\t}\n\n\t&>li:not(:last-child) {\n\t\tmargin-bottom: calc(var(--lineheight) * 4);\n\t}\n\n\t&>li:has(:target)::after {\n\t\tborder-color: var(--neon);\n\t}\n}\n",".NavCommon {\n\t& a {\n\t\tcolor: var(--color-text);\n\t\twhite-space: nowrap;\n\t\ttext-decoration: none;\n\n\t\t&:hover {\n\t\t\tcolor: var(--link-color-hover);\n\t\t\ttext-decoration: underline;\n\t\t}\n\t}\n}\n\n.MainNav {\n\tposition: relative;\n\tz-index: 2;\n\n\t& .sticky {\n\t\tposition: sticky;\n\t\ttop: 0;\n\t}\n\n\t& h1>a {\n\t\tfont-weight: 500;\n\t\tcolor: var(--color-text);\n\t\twhite-space: nowrap;\n\t\ttext-decoration: none;\n\t}\n\n\t& a {\n\t\t&:is(:hover, :focus-visible) {\n\t\t\toutline: 0;\n\t\t\tcolor: var(--link-color-hover);\n\t\t\ttext-decoration: underline;\n\t\t}\n\t}\n\n\t& ul {\n\n\t\t& a {\n\t\t\tfont-weight: normal;\n\t\t\tposition: revert;\n\n\t\t\t&:not([aria-current='page'] > &):not(&:hover):not(&:focus-visible) {\n\t\t\t\topacity: .8;\n\t\t\t}\n\n\t\t\t:where([aria-current='page'] &, &:focus) {\n\t\t\t\toutline: 0;\n\n\t\t\t\t&::after {\n\t\t\t\t\tcontent: '⇠';\n\t\t\t\t\tdisplay: inline;\n\t\t\t\t\tmargin-left: .5em;\n\t\t\t\t\twhite-space: nowrap;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\t& [aria-current='page'] {\n\t\t\tposition: relative;\n\n\t\t\t& a {\n\t\t\t\tfont-weight: 700;\n\t\t\t}\n\t\t}\n\t}\n\n\t& h1 {\n\t\t--offset-top: 18px;\n\t\tline-height: calc(var(--lineheight) * 3);\n\t\tmargin-bottom: -4px;\n\t\tpadding-top: var(--offset-top);\n\t}\n\n\t@media screen and (max-width: 980px) {\n\t\twidth: calc(100% + var(--inset) * 2);\n\t\tmargin: calc(var(--inset) * -1);\n\t\tpadding: calc(var(--lineheight) / 2) calc(var(--inset) * 1);\n\t\tmargin-bottom: calc(var(--lineheight) / 2 - 1px);\n\t\tposition: sticky;\n\t\tinset: 0;\n\t\toverflow-x: auto;\n\t\tbackground-color: var(--color-bg);\n\t\tfont-size: var(--f5);\n\n\t\t& h1 {\n\t\t\tposition: absolute;\n\t\t\tleft: -9999em;\n\t\t}\n\n\t\t& ul {\n\t\t\tdisplay: flex;\n\t\t\tmargin: 0;\n\t\t\tflex-direction: row;\n\t\t\tgap: 1em;\n\t\t}\n\n\t\t& [aria-current='page'] a,\n\t\t& a:focus {\n\t\t\t&::after {\n\t\t\t\tdisplay: none;\n\t\t\t}\n\t\t}\n\t}\n}\n\n.BackLink {\n\ttext-decoration: none;\n\tcolor: var(--color-text);\n\tbackground-color: var(--grey-lightest);\n\twidth: 1.6em;\n\ttext-align: center;\n\tline-height: 1.6em;\n\taspect-ratio: 1/1;\n\tdisplay: inline-block;\n\tborder-radius: 4em;\n\topacity: .8;\n\n\ta:is(:hover, :focus)>& {\n\t\topacity: 1;\n\t}\n}\n",".PageNav {\n\ttext-align: center;\n\n\t& a {\n\t\tcolor: var(--grey);\n\t\tdisplay: inline-block;\n\t\tpadding: 0.3em 0.5em;\n\t\ttext-decoration: none;\n\n\t\t&:hover {\n\t\t\tcolor: var(--link-color);\n\t\t\ttext-decoration: underline;\n\t\t}\n\t}\n\n\t& .separator {\n\t\tcolor: var(--color-text);\n\t\tfont-weight: 500;\n\t\tletter-spacing: -1px;\n\t\tfont-size: 1.2em;\n\t\tmargin: 0 3px;\n\t}\n}\n","/*\nPOSTS LIST\n----------------------------------------------------------------*/\n\n.PostItem {\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: space-between;\n\n\t&:last-child {\n\t\tborder-bottom: 0;\n\t}\n\n\t& time {\n\t\tfont-size: var(--f5);\n\t\tfont-variant-numeric: tabular-nums;\n\t\tletter-spacing: var(--tracking-f0);\n\t\t\n\t\t&:not(.PostItem:hover &) {\n\t\t\tcolor: var(--color-text-detail);\n\t\t}\n\t}\n\n\t& .PostItem__Link {\n\t\tdisplay: block;\n\t\tpadding: calc(var(--lineheight) / 3) 0;\n\t\tflex: 1;\n\n\t\t&:visited {\n\t\t\tcolor: var(--link-color-visited);\n\t\t\ttext-decoration-color: var(--link-color-visited);\n\t\t}\n\t}\n\n\t@media screen and (max-width: 480px) {\n\t\talign-items: flex-start;\n\t\tflex-direction: column;\n\t\tmargin-bottom: calc(var(--lineheight) / 3);\n\n\t\t& .PostItem__Link {\n\t\t\tmax-width: 90%;\n\t\t\tfont-size: 1em;\n\t\t}\n\t}\n}\n\n.PostsList {\n\tlist-style: none;\n\n\t& .PostsList--Tight {\n\t\t.PostItem {\n\t\t\tborder: 1px solid var(--grey-light);\n\t\t\tborder-width: 0 0 1px;\n\t\t\tmargin: 0;\n\t\t}\n\t}\n\n\t@media screen and (prefers-color-scheme: dark) {\n\t\t& .PostsList--Tight {\n\t\t\t& .PostItem {\n\t\t\t\tborder: 0;\n\t\t\t}\n\t\t}\n\t}\n}\n","/* From https://css-tricks.com/the-cleanest-trick-for-autogrowing-textareas/ */\n\n.grow-wrap {\n\t/* easy way to plop the elements on top of each other and have them both sized based on the tallest one's height */\n\tdisplay: grid;\n}\n\n.grow-wrap::after {\n\t/* Note the weird space! Needed to preventy jumpy behavior */\n\tcontent: attr(data-replicated-value) ' ';\n\n\t/* This is how textarea text behaves */\n\twhite-space: pre-wrap;\n\n\t/* Hidden from view, clicks, and screen readers */\n\tvisibility: hidden;\n}\n\n.grow-wrap>textarea {\n\t/* You could leave this, but after a user resizes, then it ruins the auto sizing */\n\tresize: none;\n\n\t/* Firefox shows scrollbar on growth, you can hide like this. */\n\toverflow: hidden;\n}\n\n.grow-wrap>textarea,\n.grow-wrap::after {\n\t/* Identical styling required!! */\n\tborder-width: 1px;\n\tpadding: 0.5em;\n\tfont: inherit;\n\n\t/* Place on top of each other */\n\tgrid-area: 1 / 1 / 2 / 2;\n}\n","/*\nPROSE\n----------------------------------------------------------------*/\n\n.prose {\n\t--link-color: var(--color-text);\n\n\t&> :last-child {\n\t\tmargin-bottom: 0;\n\t}\n\n\ta:not([class]) {\n\t\ttext-decoration: underline;\n\t\ttext-decoration-skip-ink: auto;\n\t}\n\n\t& img,\n\t& iframe,\n\t& figure,\n\t& svg {\n\t\t--side-margin: calc(var(--lineheight) * 2);\n\t\tmargin: var(--side-margin) auto;\n\t\tdisplay: block;\n\n\t\t@media screen and (max-width: 480px) {\n\t\t\t--side-margin: var(--lineheight);\n\t\t}\n\t}\n\n\t@media screen and (prefers-color-scheme: dark) {\n\t\t& img {\n\t\t\topacity: 0.9;\n\t\t\tbox-shadow: rgba(0, 0, 0, 0.3) 0 0 6px;\n\t\t}\n\t}\n\n\t& ul,\n\t& ol {\n\t\tpadding-left: 1em;\n\t\tmargin-left: 1rem;\n\n\t\t&:where(ul) {\n\t\t\tlist-style-type: disc;\n\n\t\t\t::marker {\n\t\t\t\tfont-size: 1.2em;\n\t\t\t}\n\t\t}\n\n\t\t&:where(ol) {\n\t\t\tlist-style-type: decimal;\n\t\t}\n\n\t\t& ::marker {\n\t\t\tcolor: var(--color-text-detail);\n\t\t}\n\n\t\t& li>ul,\n\t\t& li>ol {\n\t\t\tpadding-left: 1.5rem;\n\t\t\tmargin-bottom: 0;\n\t\t}\n\t}\n\n\t& figcaption {\n\t\tpadding: 1rem 0;\n\t\ttext-align: center;\n\t\tfont-family: var(--sans);\n\t\tfont-size: 0.9em;\n\t}\n\n\t/* Break links and code */\n\t& code:not(pre > code),\n\t& a {\n\t\tword-break: break-word;\n\t\tword-wrap: break-word;\n\t\toverflow-wrap: break-word;\n\t}\n\n\t& figure.image--full {\n\t\tmargin: calc(var(--lineheight) * 2) -14vw;\n\n\t\t& img {\n\t\t\tdisplay: block;\n\t\t\tmargin: 0 auto;\n\t\t}\n\n\t\t@media screen and (max-width: 960px) {\n\t\t\t/* Edge-to-edge pixelfucking. */\n\t\t\tmargin-left: auto;\n\t\t\tmargin-right: auto;\n\t\t}\n\t}\n}\n","/* Matrix theme in light and dark versions by Johan. */\n\ncode[class*='language-'],\npre[class*='language-'] {\n\tcolor: hsl(112 30% 30%);\n\tbackground-color: hsl(112 29.98% 97%);\n\n\t@media (prefers-color-scheme: dark) {\n\t\tcolor: hsl(112, 70%, 80%);\n\t\tbackground-color: hsl(112, 1.27%, 13.33%);\n\t}\n}\n\n.token {\n\t--hue: 112;\n\t--sat: 40%;\n\t--lit: 25%;\n\t--alpha: 1;\n\t--base: hsl(var(--hue) var(--sat) var(--lit) / var(--alpha));\n\n\tcolor: var(--base);\n}\n\n.token.comment,\n.token.prolog,\n.token.doctype,\n.token.cdata {\n\t--alpha: 80%;\n}\n\n.token.punctuation {\n\t--lit: 50%;\n\t--sat: 20%;\n}\n\n.namespace {\n\topacity: 0.7;\n}\n\n.token.property,\n.token.tag,\n.token.constant,\n.token.symbol,\n.token.deleted {\n\t--lit: 35%;\n\t--sat: 30%;\n}\n\n.token.number,\n.token.boolean {\n\t--lit: 20%;\n\t--sat: 70%;\n}\n\n.token.selector,\n.token.attr-name,\n.token.char,\n.token.builtin,\n.token.inserted {\n\tfont-weight: bold;\n}\n\n.token.selector,\n.token.builtin {\n\tbackground-color: hsla(112, 42.86%, 46.9%, 0.15);\n}\n\n.token.operator,\n.token.entity,\n.token.url,\n.language-css .token.string,\n.style .token.string,\n.token.variable {\n\t--lit: 60%;\n\t--sat: 20%;\n}\n\n.token.atrule,\n.token.attr-value,\n.token.function,\n.token.class-name {\n\t--sat: 50%;\n\t--lit: 25%;\n\tfont-weight: bold;\n}\n\n.token.keyword,\n.token.rule {\n\t--sat: 20%;\n\t--lit: 50%;\n}\n\n.token.regex,\n.token.important {\n\t--hue: 40;\n\t--sat: 80%;\n\t--lit: 70%;\n}\n\n@media (prefers-color-scheme: dark) {\n\t.token {\n\t\t--hue: 112.08;\n\t\t--sat: 49.53%;\n\t\t--lit: 58.04%;\n\t\t--alpha: 1;\n\t\t--base: hsl(var(--hue) var(--sat) var(--lit) / var(--alpha));\n\n\t\tcolor: var(--base);\n\t}\n\n\t.token.comment,\n\t.token.prolog,\n\t.token.doctype,\n\t.token.cdata {\n\t\t--sat: 10%;\n\t}\n\n\t.token.punctuation {\n\t\t--lit: 40%;\n\t\t--sat: 20%;\n\t}\n\n\t.namespace {\n\t\topacity: 0.7;\n\t}\n\n\t.token.property,\n\t.token.tag,\n\t.token.constant,\n\t.token.symbol,\n\t.token.deleted {\n\t\t--lit: 80%;\n\t\t--sat: 100%;\n\t}\n\n\t.token.number,\n\t.token.boolean {\n\t\t--lit: 80%;\n\t}\n\n\t.token.selector,\n\t.token.attr-name,\n\t.token.string,\n\t.token.char,\n\t.token.builtin,\n\t.token.inserted {\n\t\t--lit: 70%;\n\t}\n\n\t.token.selector,\n\t.token.builtin {\n\t\tbackground-color: hsla(112, 42.86%, 46.9%, 0.08);\n\t}\n\n\t.token.operator,\n\t.token.entity,\n\t.token.url,\n\t.language-css .token.string,\n\t.style .token.string,\n\t.token.variable {\n\t\t--lit: 80%;\n\t\t--sat: 60%;\n\t}\n\n\t.token.atrule,\n\t.token.attr-value,\n\t.token.function,\n\t.token.class-name {\n\t\t--sat: 31%;\n\t\t--lit: 75%;\n\t}\n\n\t.token.keyword,\n\t.token.rule {\n\t\t--sat: 20%;\n\t\t--lit: 60%;\n\t}\n\n\t.token.regex,\n\t.token.important {\n\t\t--hue: 40;\n\t\t--sat: 80%;\n\t\t--lit: 70%;\n\t}\n}\n\n.token.important,\n.token.bold,\n.token.rule {\n\tfont-weight: bold;\n}\n\n.token.italic {\n\tfont-style: italic;\n}\n\n.token.entity {\n\tcursor: help;\n}\n","/* Small caps */\n.small-caps {\n\tfont-family: 'Charter SC', serif;\n\tfont-variant: small-caps;\n}\n\n/* Double quotation marks (\") */\n.pull-double {\n\tmargin-left: -.46em\n}\n\n.push-double {\n\tmargin-right: .46em\n}\n\n/* Single quotation marks (') */\n.pull-single {\n\tmargin-left: -.27em\n}\n\n.push-single {\n\tmargin-right: .27em\n}\n\n.pull-double,\n.push-double,\n.pull-single,\n.push-single {\n\tdisplay: inline-block\n}\n\n/* Optical margin alignment for particular letters */\n.pull-T,\n.pull-V,\n.pull-W,\n.pull-Y {\n\tmargin-left: -0.1em;\n}\n\n.push-T,\n.push-V,\n.push-W,\n.push-Y {\n\tmargin-right: 0.1em;\n}\n\n.pull-O,\n.pull-C,\n.pull-o,\n.pull-c {\n\tmargin-left: -0.04em;\n}\n\n.push-O,\n.push-C,\n.push-o,\n.push-c {\n\tmargin-right: 0.04em;\n}\n\n.pull-A {\n\tmargin-left: -0.03em;\n}\n\n.push-A {\n\tmargin-right: 0.03em;\n}\n"],"sourceRoot":"file:///home/runner/work/johanbrook.com/johanbrook.com"} \ No newline at end of file diff --git a/mind/index.html b/mind/index.html index b453403f2..e88b8b752 100644 --- a/mind/index.html +++ b/mind/index.html @@ -33,4 +33,4 @@ "build" ] } -

    the last one is especially interesting. as of january 2022, there's still no way to tell sublime to ignore files in .gitignore. sublime should hide/gray out the files/folders in the sidebar, and not make them appear in the quick open dialog. so i have to add folders such as node_modules and build to the global config. people tell me to use some plugin (sublime-gitignorer), but meh... this issue from 2019 is still open.

    then i couldn't get the editorconfig plugin to work. i tried changing indent_size in my .editorconfig file, but the change wasn't reflected in the editor. joy.

    then i realised that the typescript in sublime 4 isn't really "support": it's more "the syntax highlighting" is working. one has to install a typescript package for the Language Server Plugin for intellisense (completions, etc) to work. people don't like this.

    then i installed prettier along with the sublime plugin, but formatting on every save isn't viable since it's very slow. somebody online said that vs code's prettier extension is keeping long running node processes instead of spawning a single one for each save. sublime's plugin is evidently not doing that. may have to check out dprint, but that plugin isn't even out in package control yet. hehe.

    then there are these small annoyances like i can't do backspace to delete a file when it's focused in the sidebar. or hit enter to rename it. but no can do. like, what?! this is standard file explorer shortcuts? i timeboxed 5 min to find a keybinding but couldn't. i guess my mental model from atom and vs code differs from sublime's.

    i'd really like more visual cues in the sidebar file tree about modified or added files, like vs codes does. makes it a lot easier to navigate.

    so is switching worth it? sublime is so much faster than the electron based editors it's ridiculous. when i'm comparing opening this repo's folder with code . and subl . from the command line, i understand how gaslighted i've been with the electron editors. sublime just flashes and it's open while vs code is busy booting another chromium app or whatever it's doing.

    but i dislike having to carry around a set of plugins and settings when i switch computers. vs code has this nice settings sync feature built in, but i'm 100% sure i need to sort that out myself for sublime with some esoretic github gist based thing…

    maybe Jetbrains Fleet will be The One editor: native, without bloat, and configurable?

    if anybody uses any life saving plugins for sublime, please give me a shout.

  • February 2nd, 2022 — 17:51 #

    My couch in Stockholm

    i love creating playlists. it's like the lost art of making mixtapes for yourself of somebody else. even though Spotify (and other services surely) have invested a ton content curation, i still love my own hand made playlists. spotify, for instance, have a lot of both automated and handmade playlists for a myriad of occasions. they're kinda niche and cool, but… i still think they're a bit bland.

    what i appreciate is that it's a constant, living project. this categorisation builds up over time as i discover new material, and i'm now wired to place it in a playlist if i like the track. good for future johan and others.

    here are some of them:

    • Johan Recommends 👌. this one has been around since i got a beta invite to Spotify. i dunno, perhaps 2008? the listing doesn't tell the date of the two earliest tracks added (just a blank column). this playlist is just a dump of what i'm listening to at the moment. it forms a nice history of what i liked over the years.
    • ☕ Programming. music i code to. mostly techno and instrumental.
    • 👌 Feels Good Man. reggae and dub. i've been listening to this constantly over the past year, haha. i just can't get over how good, deep, and rich this genre is.
    • 💑 Music for Eating started as a playlist for a dinner in 2012, now it's my general "turn something on 5 min before guests arrive" kind of playlist. it's mostly "safe", as in "nobody and their partner will get annoyed by the songs in here".
    • 🎶 Music from the Old World. i curate this one like a mad man. only good, timeless songs in here! think "if mankind would go under tomorrow, what would you save in a box and shoot out in outer space". this is music that i think are masterpieces and that has affected my interest in music somehow.
    • 🍝 Cooking. music i cook to! fun! creative!
    • 🌧 Moody. you know all these corny spotify playlists "Upbeat Summer" and that? this is the reverse. downbeat.
    • 🔫 Rhythm And Poetry. 90/00s hiphop – when it was good.
    • 🌞 Music I've Grown Up To. songs i've listened through from teen to adolescence. music that somehow has affected me during emo periods, travels, and just everyday life.
    • 🇧🇷 Bom día, Rio de Janeeeeiroo!. my brazilian playlist, which i created when i was in Rio. classic bossanova and samba mixed with brazilian funk.
    • 🇸🇪 Absolute Swedish. only swedish songs. makes me kind of proud over how much good music the little nation of sweden has produced.
    • 🛣 On the Highway. road trip songs without songs that mention "road trip".
    • 💦 Rain. for rainy weather.
    • 🇫🇷 The French Affair. french music. for when you wanna … listen to … french music?
    • 🎸 Soul/Jazz/Blues. a big ol' bucket with these three genres. bam!
    • 🍂 Autumn. moody music which somehow feels more autumn-y.
    • 🌻 Summer!. the mandatory, upbeat summer playlist. i'm sorry.
    • 🌅 What's the story morning glory. the morning playlist that gets you UP.
    • 📽 Hipster Internazionale. hipster and indie songs you haven't heard of.

  • January 30th, 2022 — 17:15 #

    My kitchen table in Stockholm

    i've bought a new bedside alarm clock from Braun, and it's so pretty. when activating the back light, it glows in a cool amber light, and then fades away. drool. i have no idea about the timeline of things, but the green details feels very Apple-esque. i'd guess Apple borrowed this from Braun when the former designed the iPods, which had similar green details around the physical knobs and switches.

    BC22 Braun analogue clock

  • January 24th, 2022 — 23:01 #

    My couch in Stockholm

    i've bought a new domain for this site! from now on, it's johan.im. short and sweet. johanbrook.com redirects to johan.im.

    i appreciate these services/tools soooo much right now:

    • Cloudflare
    • Fastmail

    Cloudflare's dashboard is easy to understand and efficient enough to be dangerous — even though i'm not a DNS/networking/cache elite ninja. Cloudflare might look simplistic compared to beasts like AWS, but if you look under the hood, they support more than what they show off (perhaps they should show off more?). example: like the noob i am, i just redirected johanbrook.com/* → johan.im/*. but the paths after that slash of course weren't kept. so a URL johanbrook.com/writings would just end up at johan.im (the root). uh-oh. i read in a help article that Cloudflare's Page Rules feature supports wildcard referencing. tears of joy! so i could just do johanbrook.com/* → johan.im/$1 to keep those nice paths.

    Fastmail's wizard for adding a new custom domain is so lovely. i could even pick Cloudflare as my DNS manager, and they'd customise the wizard for Cloudflare's dashboard UI.

  • January 23rd, 2022 — 11:50 #

    On the run

    the artist Meat Loaf died a few days ago. his album "Bat Out Of Hell" was the first album I recall playing on CD on my brand new music player when I was ~10 years old. that album – and especially the title track – was absolutely the thing that got me listening to classic rock as a kid, and then went on to widen my interest in music overall. i have such a strong memory of playing that album in my old room.

    "Bat Out Of Hell" was so "grand and majestic", and the songs were sooo long. a stark contrast to the pop songs that was around in the 90s. and the guitar solos sure impressed me as a young child!

    bye, Meat Loaf 💖

  • January 11th, 2022 — 22:16 #

    On the run

    hello world. this is me testing my new GUI for posting these small notes. i'll probably write a longer post about it later.

    in a nutshell, i've written a barebones JS client to talk with GitHub's API to post a new file in this repo. no dependencies used. it was a fun challenge writing old school DOM JS manipulations again.

  • January 6th, 2022 — 11:55 #

    i'm coding together something that will let me write post and notes in my static site from anywhere, and it's super fun. need to deal with github auth and their api, learning about Cloudflare Workers, and extending lume as i go.

    the idea is to create a new post or note file with a request from an authed github session. not sure how generic i want to make this code – it could be of use for others. the existing "CMSes" i've seen for static pages are just too much.

  • January 4th, 2022 — 09:37 #

    My couch in Stockholm

    i've rewrote my site (using lume 💛) and made a ton of tweaks. classic neverending parental leave chores. it's built with deno, which I love even more. i'm finally free from the node/npm APIs and build systems! everything is much simpler now, and i should probably write about it in the even more classic post of "i've rewritten my blog" which usually shows up in January every year.

  • September 30th, 2021 — 00:00 #

    Summer is over, after vacation in August down on the Swedish west and south coasts. Weather was so-so, but it was nice with a change of scenery. We also spent the month of September in Florence, Italy, which was such a blast. We travelled abroad with our 10 months old daughter for the first time, and everything went quite well actually (I had expected the worst). I was so inspired by the stay in Italy, and hope I can bring some of that energy into the day-to-day life back in Sweden.

    On Monday I'll officially start my parental leave until April 2022. Scary but exciting. I'm actually looking forward to just not work for the first time in 7 years. Who knows what kind of person I'll be after this leave?

    I was inspired by the book "What I Talk About When I Talk About Running" by Haruki Murakami, so I want to start running this Autumn.

    Also, I'd like to start making my own pasta. I took a pasta making course in Florence, and it was super fun. So simple! So fresh!

  • July 9th, 2021 — 00:00 #

    Last day in the Swedish mountains, after a week of chilling and hiking. I wonder if I'd like living here for longer periods of time, or if I'd get cabin fever. I think I'd adjust, but friends and family are far away.

    Still learning programming in Rust. Still not 100% sure of what I'm doing when it comes to memory management, but the official guide and "Possible Rust" have been of huge help. Rust feels like a very "intellectual" language (sooo much language theory has gone into it!), but I'm struck every day of how friendly the documentation and 3rd party writings on the language are. I think a super good way of learning Rust would be to actually pair program with some existing Rust programmer you know, in a non-trivial project. So that you can ask about all the small things you run into, and can be unblocked and learn forever.

    I'm going to be on parental leave from October until ~April 2022. Am nervous, but looking forward. Will be a bit weird to be off work for 6 months since I started. But I have zero doubts in that I'll be able to chill in the new role of being a parent 100% of the time. I'll miss coding for work though, BUT I guess I'll need to find myself a sIdE PrOjEct like everybody else?!

    \ No newline at end of file +

    the last one is especially interesting. as of january 2022, there's still no way to tell sublime to ignore files in .gitignore. sublime should hide/gray out the files/folders in the sidebar, and not make them appear in the quick open dialog. so i have to add folders such as node_modules and build to the global config. people tell me to use some plugin (sublime-gitignorer), but meh... this issue from 2019 is still open.

    then i couldn't get the editorconfig plugin to work. i tried changing indent_size in my .editorconfig file, but the change wasn't reflected in the editor. joy.

    then i realised that the typescript in sublime 4 isn't really "support": it's more "the syntax highlighting" is working. one has to install a typescript package for the Language Server Plugin for intellisense (completions, etc) to work. people don't like this.

    then i installed prettier along with the sublime plugin, but formatting on every save isn't viable since it's very slow. somebody online said that vs code's prettier extension is keeping long running node processes instead of spawning a single one for each save. sublime's plugin is evidently not doing that. may have to check out dprint, but that plugin isn't even out in package control yet. hehe.

    then there are these small annoyances like i can't do backspace to delete a file when it's focused in the sidebar. or hit enter to rename it. but no can do. like, what?! this is standard file explorer shortcuts? i timeboxed 5 min to find a keybinding but couldn't. i guess my mental model from atom and vs code differs from sublime's.

    i'd really like more visual cues in the sidebar file tree about modified or added files, like vs codes does. makes it a lot easier to navigate.

    so is switching worth it? sublime is so much faster than the electron based editors it's ridiculous. when i'm comparing opening this repo's folder with code . and subl . from the command line, i understand how gaslighted i've been with the electron editors. sublime just flashes and it's open while vs code is busy booting another chromium app or whatever it's doing.

    but i dislike having to carry around a set of plugins and settings when i switch computers. vs code has this nice settings sync feature built in, but i'm 100% sure i need to sort that out myself for sublime with some esoretic github gist based thing…

    maybe Jetbrains Fleet will be The One editor: native, without bloat, and configurable?

    if anybody uses any life saving plugins for sublime, please give me a shout.

  • February 2nd, 2022 — 17:51 #

    My couch in Stockholm

    i love creating playlists. it's like the lost art of making mixtapes for yourself of somebody else. even though Spotify (and other services surely) have invested a ton content curation, i still love my own hand made playlists. spotify, for instance, have a lot of both automated and handmade playlists for a myriad of occasions. they're kinda niche and cool, but… i still think they're a bit bland.

    what i appreciate is that it's a constant, living project. this categorisation builds up over time as i discover new material, and i'm now wired to place it in a playlist if i like the track. good for future johan and others.

    here are some of them:

    • Johan Recommends 👌. this one has been around since i got a beta invite to Spotify. i dunno, perhaps 2008? the listing doesn't tell the date of the two earliest tracks added (just a blank column). this playlist is just a dump of what i'm listening to at the moment. it forms a nice history of what i liked over the years.
    • ☕ Programming. music i code to. mostly techno and instrumental.
    • 👌 Feels Good Man. reggae and dub. i've been listening to this constantly over the past year, haha. i just can't get over how good, deep, and rich this genre is.
    • 💑 Music for Eating started as a playlist for a dinner in 2012, now it's my general "turn something on 5 min before guests arrive" kind of playlist. it's mostly "safe", as in "nobody and their partner will get annoyed by the songs in here".
    • 🎶 Music from the Old World. i curate this one like a mad man. only good, timeless songs in here! think "if mankind would go under tomorrow, what would you save in a box and shoot out in outer space". this is music that i think are masterpieces and that has affected my interest in music somehow.
    • 🍝 Cooking. music i cook to! fun! creative!
    • 🌧 Moody. you know all these corny spotify playlists "Upbeat Summer" and that? this is the reverse. downbeat.
    • 🔫 Rhythm And Poetry. 90/00s hiphop – when it was good.
    • 🌞 Music I've Grown Up To. songs i've listened through from teen to adolescence. music that somehow has affected me during emo periods, travels, and just everyday life.
    • 🇧🇷 Bom día, Rio de Janeeeeiroo!. my brazilian playlist, which i created when i was in Rio. classic bossanova and samba mixed with brazilian funk.
    • 🇸🇪 Absolute Swedish. only swedish songs. makes me kind of proud over how much good music the little nation of sweden has produced.
    • 🛣 On the Highway. road trip songs without songs that mention "road trip".
    • 💦 Rain. for rainy weather.
    • 🇫🇷 The French Affair. french music. for when you wanna … listen to … french music?
    • 🎸 Soul/Jazz/Blues. a big ol' bucket with these three genres. bam!
    • 🍂 Autumn. moody music which somehow feels more autumn-y.
    • 🌻 Summer!. the mandatory, upbeat summer playlist. i'm sorry.
    • 🌅 What's the story morning glory. the morning playlist that gets you UP.
    • 📽 Hipster Internazionale. hipster and indie songs you haven't heard of.

  • January 30th, 2022 — 17:15 #

    My kitchen table in Stockholm

    i've bought a new bedside alarm clock from Braun, and it's so pretty. when activating the back light, it glows in a cool amber light, and then fades away. drool. i have no idea about the timeline of things, but the green details feels very Apple-esque. i'd guess Apple borrowed this from Braun when the former designed the iPods, which had similar green details around the physical knobs and switches.

    BC22 Braun analogue clock

  • January 24th, 2022 — 23:01 #

    My couch in Stockholm

    i've bought a new domain for this site! from now on, it's johan.im. short and sweet. johanbrook.com redirects to johan.im.

    i appreciate these services/tools soooo much right now:

    • Cloudflare
    • Fastmail

    Cloudflare's dashboard is easy to understand and efficient enough to be dangerous — even though i'm not a DNS/networking/cache elite ninja. Cloudflare might look simplistic compared to beasts like AWS, but if you look under the hood, they support more than what they show off (perhaps they should show off more?). example: like the noob i am, i just redirected johanbrook.com/* → johan.im/*. but the paths after that slash of course weren't kept. so a URL johanbrook.com/writings would just end up at johan.im (the root). uh-oh. i read in a help article that Cloudflare's Page Rules feature supports wildcard referencing. tears of joy! so i could just do johanbrook.com/* → johan.im/$1 to keep those nice paths.

    Fastmail's wizard for adding a new custom domain is so lovely. i could even pick Cloudflare as my DNS manager, and they'd customise the wizard for Cloudflare's dashboard UI.

  • January 23rd, 2022 — 11:50 #

    On the run

    the artist Meat Loaf died a few days ago. his album "Bat Out Of Hell" was the first album I recall playing on CD on my brand new music player when I was ~10 years old. that album – and especially the title track – was absolutely the thing that got me listening to classic rock as a kid, and then went on to widen my interest in music overall. i have such a strong memory of playing that album in my old room.

    "Bat Out Of Hell" was so "grand and majestic", and the songs were sooo long. a stark contrast to the pop songs that was around in the 90s. and the guitar solos sure impressed me as a young child!

    bye, Meat Loaf 💖

  • January 11th, 2022 — 22:16 #

    On the run

    hello world. this is me testing my new GUI for posting these small notes. i'll probably write a longer post about it later.

    in a nutshell, i've written a barebones JS client to talk with GitHub's API to post a new file in this repo. no dependencies used. it was a fun challenge writing old school DOM JS manipulations again.

  • January 6th, 2022 — 11:55 #

    i'm coding together something that will let me write post and notes in my static site from anywhere, and it's super fun. need to deal with github auth and their api, learning about Cloudflare Workers, and extending lume as i go.

    the idea is to create a new post or note file with a request from an authed github session. not sure how generic i want to make this code – it could be of use for others. the existing "CMSes" i've seen for static pages are just too much.

  • January 4th, 2022 — 09:37 #

    My couch in Stockholm

    i've rewrote my site (using lume 💛) and made a ton of tweaks. classic neverending parental leave chores. it's built with deno, which I love even more. i'm finally free from the node/npm APIs and build systems! everything is much simpler now, and i should probably write about it in the even more classic post of "i've rewritten my blog" which usually shows up in January every year.

  • September 30th, 2021 — 00:00 #

    Summer is over, after vacation in August down on the Swedish west and south coasts. Weather was so-so, but it was nice with a change of scenery. We also spent the month of September in Florence, Italy, which was such a blast. We travelled abroad with our 10 months old daughter for the first time, and everything went quite well actually (I had expected the worst). I was so inspired by the stay in Italy, and hope I can bring some of that energy into the day-to-day life back in Sweden.

    On Monday I'll officially start my parental leave until April 2022. Scary but exciting. I'm actually looking forward to just not work for the first time in 7 years. Who knows what kind of person I'll be after this leave?

    I was inspired by the book "What I Talk About When I Talk About Running" by Haruki Murakami, so I want to start running this Autumn.

    Also, I'd like to start making my own pasta. I took a pasta making course in Florence, and it was super fun. So simple! So fresh!

  • July 9th, 2021 — 00:00 #

    Last day in the Swedish mountains, after a week of chilling and hiking. I wonder if I'd like living here for longer periods of time, or if I'd get cabin fever. I think I'd adjust, but friends and family are far away.

    Still learning programming in Rust. Still not 100% sure of what I'm doing when it comes to memory management, but the official guide and "Possible Rust" have been of huge help. Rust feels like a very "intellectual" language (sooo much language theory has gone into it!), but I'm struck every day of how friendly the documentation and 3rd party writings on the language are. I think a super good way of learning Rust would be to actually pair program with some existing Rust programmer you know, in a non-trivial project. So that you can ask about all the small things you run into, and can be unblocked and learn forever.

    I'm going to be on parental leave from October until ~April 2022. Am nervous, but looking forward. Will be a bit weird to be off work for 6 months since I started. But I have zero doubts in that I'll be able to chill in the new role of being a parent 100% of the time. I'll miss coding for work though, BUT I guess I'll need to find myself a sIdE PrOjEct like everybody else?!

    \ No newline at end of file diff --git a/music/index.html b/music/index.html index 1bd213ae7..753bc31ea 100644 --- a/music/index.html +++ b/music/index.html @@ -1 +1 @@ -Music / Johan Brook
    \ No newline at end of file +Music / Johan Brook
    \ No newline at end of file diff --git a/notes/2021-07-09/index.html b/notes/2021-07-09/index.html index 935ffea80..243d3bfbb 100644 --- a/notes/2021-07-09/index.html +++ b/notes/2021-07-09/index.html @@ -1 +1 @@ -Johan Brook

    About 1 min reading time

    Last day in the Swedish mountains, after a week of chilling and hiking. I wonder if I’d like living here for longer periods of time, or if I’d get cabin fever. I think I’d adjust, but friends and family are far away.

    Still learning programming in Rust. Still not 100% sure of what I’m doing when it comes to memory management, but the official guide and “Possible Rust” have been of huge help. Rust feels like a very “intellectual” language (sooo much language theory has gone into it!), but I’m struck every day of how friendly the documentation and 3rd party writings on the language are. I think a super good way of learning Rust would be to actually pair program with some existing Rust programmer you know, in a non-trivial project. So that you can ask about all the small things you run into, and can be unblocked and learn forever.

    I’m going to be on parental leave from October until ~April 2022. Am nervous, but looking forward. Will be a bit weird to be off work for 6 months since I started. But I have zero doubts in that I’ll be able to chill in the new role of being a parent 100% of the time. I’ll miss coding for work though, BUT I guess I’ll need to find myself a sIdE PrOjEct like everybody else?!

    \ No newline at end of file +Johan Brook

    About 1 min reading time

    Last day in the Swedish mountains, after a week of chilling and hiking. I wonder if I’d like living here for longer periods of time, or if I’d get cabin fever. I think I’d adjust, but friends and family are far away.

    Still learning programming in Rust. Still not 100% sure of what I’m doing when it comes to memory management, but the official guide and “Possible Rust” have been of huge help. Rust feels like a very “intellectual” language (sooo much language theory has gone into it!), but I’m struck every day of how friendly the documentation and 3rd party writings on the language are. I think a super good way of learning Rust would be to actually pair program with some existing Rust programmer you know, in a non-trivial project. So that you can ask about all the small things you run into, and can be unblocked and learn forever.

    I’m going to be on parental leave from October until ~April 2022. Am nervous, but looking forward. Will be a bit weird to be off work for 6 months since I started. But I have zero doubts in that I’ll be able to chill in the new role of being a parent 100% of the time. I’ll miss coding for work though, BUT I guess I’ll need to find myself a sIdE PrOjEct like everybody else?!

    \ No newline at end of file diff --git a/notes/2021-09-30/index.html b/notes/2021-09-30/index.html index ac3708535..4e36ea223 100644 --- a/notes/2021-09-30/index.html +++ b/notes/2021-09-30/index.html @@ -1 +1 @@ -Johan Brook

    About 1 min reading time

    Summer is over, after vacation in August down on the Swedish west and south coasts. Weather was so-so, but it was nice with a change of scenery. We also spent the month of September in Florence, Italy, which was such a blast. We travelled abroad with our 10 months old daughter for the first time, and everything went quite well actually (I had expected the worst). I was so inspired by the stay in Italy, and hope I can bring some of that energy into the day-to-day life back in Sweden.

    On Monday I’ll officially start my parental leave until April 2022. Scary but exciting. I’m actually looking forward to just not work for the first time in 7 years. Who knows what kind of person I’ll be after this leave?

    I was inspired by the book “What I Talk About When I Talk About Running” by Haruki Murakami, so I want to start running this Autumn.

    Also, I’d like to start making my own pasta. I took a pasta making course in Florence, and it was super fun. So simple! So fresh!

    \ No newline at end of file +Johan Brook

    About 1 min reading time

    Summer is over, after vacation in August down on the Swedish west and south coasts. Weather was so-so, but it was nice with a change of scenery. We also spent the month of September in Florence, Italy, which was such a blast. We travelled abroad with our 10 months old daughter for the first time, and everything went quite well actually (I had expected the worst). I was so inspired by the stay in Italy, and hope I can bring some of that energy into the day-to-day life back in Sweden.

    On Monday I’ll officially start my parental leave until April 2022. Scary but exciting. I’m actually looking forward to just not work for the first time in 7 years. Who knows what kind of person I’ll be after this leave?

    I was inspired by the book “What I Talk About When I Talk About Running” by Haruki Murakami, so I want to start running this Autumn.

    Also, I’d like to start making my own pasta. I took a pasta making course in Florence, and it was super fun. So simple! So fresh!

    \ No newline at end of file diff --git a/notes/2022-01-04-09-37/index.html b/notes/2022-01-04-09-37/index.html index b124329d9..fa8ad8d25 100644 --- a/notes/2022-01-04-09-37/index.html +++ b/notes/2022-01-04-09-37/index.html @@ -1 +1 @@ -Johan Brook

    About 1 min reading time

    i’ve rewrote my site (using lume 💛) and made a ton of tweaks. classic neverending parental leave chores. it’s built with deno, which I love even more. i’m finally free from the node/npm APIs and build systems! everything is much simpler now, and i should probably write about it in the even more classic post of “i’ve rewritten my blog” which usually shows up in January every year.

    \ No newline at end of file +Johan Brook

    About 1 min reading time

    i’ve rewrote my site (using lume 💛) and made a ton of tweaks. classic neverending parental leave chores. it’s built with deno, which I love even more. i’m finally free from the node/npm APIs and build systems! everything is much simpler now, and i should probably write about it in the even more classic post of “i’ve rewritten my blog” which usually shows up in January every year.

    \ No newline at end of file diff --git a/notes/2022-01-06-11-55/index.html b/notes/2022-01-06-11-55/index.html index beb2b56b4..6d920f50b 100644 --- a/notes/2022-01-06-11-55/index.html +++ b/notes/2022-01-06-11-55/index.html @@ -1 +1 @@ -Johan Brook

    About 1 min reading time

    i’m coding together something that will let me write post and notes in my static site from anywhere, and it’s super fun. need to deal with github auth and their api, learning about Cloudflare Workers, and extending lume as i go.

    the idea is to create a new post or note file with a request from an authed github session. not sure how generic i want to make this code — it could be of use for others. the existing “CMSes” i’ve seen for static pages are just too much.

    \ No newline at end of file +Johan Brook

    About 1 min reading time

    i’m coding together something that will let me write post and notes in my static site from anywhere, and it’s super fun. need to deal with github auth and their api, learning about Cloudflare Workers, and extending lume as i go.

    the idea is to create a new post or note file with a request from an authed github session. not sure how generic i want to make this code — it could be of use for others. the existing “CMSes” i’ve seen for static pages are just too much.

    \ No newline at end of file diff --git a/notes/2022-01-11-22-16/index.html b/notes/2022-01-11-22-16/index.html index 79b1e81a3..a8cb747a2 100644 --- a/notes/2022-01-11-22-16/index.html +++ b/notes/2022-01-11-22-16/index.html @@ -1 +1 @@ -Johan Brook

    About 1 min reading time

    hello world. this is me testing my new GUI for posting these small notes. i’ll probably write a longer post about it later.

    in a nutshell, i’ve written a barebones JS client to talk with GitHub’s API to post a new file in this repo. no dependencies used. it was a fun challenge writing old school DOM JS manipulations again.

    \ No newline at end of file +Johan Brook

    About 1 min reading time

    hello world. this is me testing my new GUI for posting these small notes. i’ll probably write a longer post about it later.

    in a nutshell, i’ve written a barebones JS client to talk with GitHub’s API to post a new file in this repo. no dependencies used. it was a fun challenge writing old school DOM JS manipulations again.

    \ No newline at end of file diff --git a/notes/2022-01-17-09-32/index.html b/notes/2022-01-17-09-32/index.html index e1795c89a..3529890e3 100644 --- a/notes/2022-01-17-09-32/index.html +++ b/notes/2022-01-17-09-32/index.html @@ -1 +1 @@ -Johan Brook
    \ No newline at end of file +Johan Brook
    \ No newline at end of file diff --git a/notes/2022-01-23-11-50/index.html b/notes/2022-01-23-11-50/index.html index fd77191fe..9cb984432 100644 --- a/notes/2022-01-23-11-50/index.html +++ b/notes/2022-01-23-11-50/index.html @@ -1 +1 @@ -Johan Brook

    About 1 min reading time

    the artist Meat Loaf died a few days ago. his album “Bat Out Of Hell” was the first album I recall playing on CD on my brand new music player when I was ~10 years old. that album — and especially the title track – was absolutely the thing that got me listening to classic rock as a kid, and then went on to widen my interest in music overall. i have such a strong memory of playing that album in my old room.

    “Bat Out Of Hell” was so “grand and majestic”, and the songs were sooo long. a stark contrast to the pop songs that was around in the 90s. and the guitar solos sure impressed me as a young child!

    bye, Meat Loaf 💖

    \ No newline at end of file +Johan Brook

    About 1 min reading time

    the artist Meat Loaf died a few days ago. his album “Bat Out Of Hell” was the first album I recall playing on CD on my brand new music player when I was ~10 years old. that album — and especially the title track – was absolutely the thing that got me listening to classic rock as a kid, and then went on to widen my interest in music overall. i have such a strong memory of playing that album in my old room.

    “Bat Out Of Hell” was so “grand and majestic”, and the songs were sooo long. a stark contrast to the pop songs that was around in the 90s. and the guitar solos sure impressed me as a young child!

    bye, Meat Loaf 💖

    \ No newline at end of file diff --git a/notes/2022-01-24-23-01/index.html b/notes/2022-01-24-23-01/index.html index 1a5af9f05..a6d6bcbf8 100644 --- a/notes/2022-01-24-23-01/index.html +++ b/notes/2022-01-24-23-01/index.html @@ -1 +1 @@ -Johan Brook

    About 1 min reading time

    i’ve bought a new domain for this site! from now on, it’s johan.im. short and sweet. johanbrook.com redirects to johan.im.

    i appreciate these services/tools soooo much right now:

    • Cloudflare
    • Fastmail

    Cloudflare’s dashboard is easy to understand and efficient enough to be dangerous — even though i’m not a DNS/networking/cache elite ninja. Cloudflare might look simplistic compared to beasts like AWS, but if you look under the hood, they support more than what they show off (perhaps they should show off more?). example: like the noob i am, i just redirected johanbrook.com/* → johan.im/*. but the paths after that slash of course weren’t kept. so a URL johanbrook.com/writings would just end up at johan.im (the root). uh-oh. i read in a help article that Cloudflare’s Page Rules feature supports wildcard referencing. tears of joy! so i could just do johanbrook.com/* → johan.im/$1 to keep those nice paths.

    Fastmail’s wizard for adding a new custom domain is so lovely. i could even pick Cloudflare as my DNS manager, and they’d customise the wizard for Cloudflare’s dashboard UI.

    \ No newline at end of file +Johan Brook

    About 1 min reading time

    i’ve bought a new domain for this site! from now on, it’s johan.im. short and sweet. johanbrook.com redirects to johan.im.

    i appreciate these services/tools soooo much right now:

    • Cloudflare
    • Fastmail

    Cloudflare’s dashboard is easy to understand and efficient enough to be dangerous — even though i’m not a DNS/networking/cache elite ninja. Cloudflare might look simplistic compared to beasts like AWS, but if you look under the hood, they support more than what they show off (perhaps they should show off more?). example: like the noob i am, i just redirected johanbrook.com/* → johan.im/*. but the paths after that slash of course weren’t kept. so a URL johanbrook.com/writings would just end up at johan.im (the root). uh-oh. i read in a help article that Cloudflare’s Page Rules feature supports wildcard referencing. tears of joy! so i could just do johanbrook.com/* → johan.im/$1 to keep those nice paths.

    Fastmail’s wizard for adding a new custom domain is so lovely. i could even pick Cloudflare as my DNS manager, and they’d customise the wizard for Cloudflare’s dashboard UI.

    \ No newline at end of file diff --git a/notes/2022-01-30-14-02/index.html b/notes/2022-01-30-14-02/index.html index eb73b1e5e..df49a8792 100644 --- a/notes/2022-01-30-14-02/index.html +++ b/notes/2022-01-30-14-02/index.html @@ -1 +1 @@ -Johan Brook

    About 1 min reading time

    Kyla La Grange has released new music and it’s really really good.

    \ No newline at end of file +Johan Brook

    About 1 min reading time

    Kyla La Grange has released new music and it’s really really good.

    \ No newline at end of file diff --git a/notes/2022-01-30-17-15/index.html b/notes/2022-01-30-17-15/index.html index ae93751c9..05eeef4c5 100644 --- a/notes/2022-01-30-17-15/index.html +++ b/notes/2022-01-30-17-15/index.html @@ -1 +1 @@ -Johan Brook

    About 1 min reading time

    i’ve bought a new bedside alarm clock from Braun, and it’s so pretty. when activating the back light, it glows in a cool amber light, and then fades away. drool. i have no idea about the timeline of things, but the green details feels very Apple-esque. i’d guess Apple borrowed this from Braun when the former designed the iPods, which had similar green details around the physical knobs and switches.

    BC22 Braun analogue clock

    \ No newline at end of file +Johan Brook

    About 1 min reading time

    i’ve bought a new bedside alarm clock from Braun, and it’s so pretty. when activating the back light, it glows in a cool amber light, and then fades away. drool. i have no idea about the timeline of things, but the green details feels very Apple-esque. i’d guess Apple borrowed this from Braun when the former designed the iPods, which had similar green details around the physical knobs and switches.

    BC22 Braun analogue clock

    \ No newline at end of file diff --git a/notes/2022-02-02-17-51/index.html b/notes/2022-02-02-17-51/index.html index d44849b5a..8a25086ca 100644 --- a/notes/2022-02-02-17-51/index.html +++ b/notes/2022-02-02-17-51/index.html @@ -1 +1 @@ -Johan Brook

    About 2 min reading time

    i love creating playlists. it’s like the lost art of making mixtapes for yourself of somebody else. even though Spotify (and other services surely) have invested a ton content curation, i still love my own hand made playlists. spotify, for instance, have a lot of both automated and handmade playlists for a myriad of occasions. they’re kinda niche and cool, but… i still think they’re a bit bland.

    what i appreciate is that it’s a constant, living project. this categorisation builds up over time as i discover new material, and i’m now wired to place it in a playlist if i like the track. good for future johan and others.

    here are some of them:

    • Johan Recommends 👌. this one has been around since i got a beta invite to Spotify. i dunno, perhaps 2008? the listing doesn’t tell the date of the two earliest tracks added (just a blank column). this playlist is just a dump of what i’m listening to at the moment. it forms a nice history of what i liked over the years.
    • ☕ Programming. music i code to. mostly techno and instrumental.
    • 👌 Feels Good Man. reggae and dub. i’ve been listening to this constantly over the past year, haha. i just can’t get over how good, deep, and rich this genre is.
    • 💑 Music for Eating started as a playlist for a dinner in 2012, now it’s my general “turn something on 5 min before guests arrive” kind of playlist. it’s mostly “safe”, as in “nobody and their partner will get annoyed by the songs in here”.
    • 🎶 Music from the Old World. i curate this one like a mad man. only good, timeless songs in here! think “if mankind would go under tomorrow, what would you save in a box and shoot out in outer space”. this is music that i think are masterpieces and that has affected my interest in music somehow.
    • 🍝 Cooking. music i cook to! fun! creative!
    • 🌧 Moody. you know all these corny spotify playlists “Upbeat Summer” and that? this is the reverse. downbeat.
    • 🔫 Rhythm And Poetry. 90/00s hiphop — when it was good.
    • 🌞 Music I’ve Grown Up To. songs i’ve listened through from teen to adolescence. music that somehow has affected me during emo periods, travels, and just everyday life.
    • 🇧🇷 Bom día, Rio de Janeeeeiroo!. my brazilian playlist, which i created when i was in Rio. classic bossanova and samba mixed with brazilian funk.
    • 🇸🇪 Absolute Swedish. only swedish songs. makes me kind of proud over how much good music the little nation of sweden has produced.
    • 🛣 On the Highway. road trip songs without songs that mention “road trip”.
    • 💦 Rain. for rainy weather.
    • 🇫🇷 The French Affair. french music. for when you wanna … listen to … french music?
    • 🎸 Soul/Jazz/Blues. a big ol’ bucket with these three genres. bam!
    • 🍂 Autumn. moody music which somehow feels more autumn-y.
    • 🌻 Summer!. the mandatory, upbeat summer playlist. i’m sorry.
    • 🌅 What’s the story morning glory. the morning playlist that gets you UP.
    • 📽 Hipster Internazionale. hipster and indie songs you haven’t heard of.
    \ No newline at end of file +Johan Brook

    About 2 min reading time

    i love creating playlists. it’s like the lost art of making mixtapes for yourself of somebody else. even though Spotify (and other services surely) have invested a ton content curation, i still love my own hand made playlists. spotify, for instance, have a lot of both automated and handmade playlists for a myriad of occasions. they’re kinda niche and cool, but… i still think they’re a bit bland.

    what i appreciate is that it’s a constant, living project. this categorisation builds up over time as i discover new material, and i’m now wired to place it in a playlist if i like the track. good for future johan and others.

    here are some of them:

    • Johan Recommends 👌. this one has been around since i got a beta invite to Spotify. i dunno, perhaps 2008? the listing doesn’t tell the date of the two earliest tracks added (just a blank column). this playlist is just a dump of what i’m listening to at the moment. it forms a nice history of what i liked over the years.
    • ☕ Programming. music i code to. mostly techno and instrumental.
    • 👌 Feels Good Man. reggae and dub. i’ve been listening to this constantly over the past year, haha. i just can’t get over how good, deep, and rich this genre is.
    • 💑 Music for Eating started as a playlist for a dinner in 2012, now it’s my general “turn something on 5 min before guests arrive” kind of playlist. it’s mostly “safe”, as in “nobody and their partner will get annoyed by the songs in here”.
    • 🎶 Music from the Old World. i curate this one like a mad man. only good, timeless songs in here! think “if mankind would go under tomorrow, what would you save in a box and shoot out in outer space”. this is music that i think are masterpieces and that has affected my interest in music somehow.
    • 🍝 Cooking. music i cook to! fun! creative!
    • 🌧 Moody. you know all these corny spotify playlists “Upbeat Summer” and that? this is the reverse. downbeat.
    • 🔫 Rhythm And Poetry. 90/00s hiphop — when it was good.
    • 🌞 Music I’ve Grown Up To. songs i’ve listened through from teen to adolescence. music that somehow has affected me during emo periods, travels, and just everyday life.
    • 🇧🇷 Bom día, Rio de Janeeeeiroo!. my brazilian playlist, which i created when i was in Rio. classic bossanova and samba mixed with brazilian funk.
    • 🇸🇪 Absolute Swedish. only swedish songs. makes me kind of proud over how much good music the little nation of sweden has produced.
    • 🛣 On the Highway. road trip songs without songs that mention “road trip”.
    • 💦 Rain. for rainy weather.
    • 🇫🇷 The French Affair. french music. for when you wanna … listen to … french music?
    • 🎸 Soul/Jazz/Blues. a big ol’ bucket with these three genres. bam!
    • 🍂 Autumn. moody music which somehow feels more autumn-y.
    • 🌻 Summer!. the mandatory, upbeat summer playlist. i’m sorry.
    • 🌅 What’s the story morning glory. the morning playlist that gets you UP.
    • 📽 Hipster Internazionale. hipster and indie songs you haven’t heard of.
    \ No newline at end of file diff --git a/notes/2022-02-08-08-50/index.html b/notes/2022-02-08-08-50/index.html index 3c67b9a29..b78073484 100644 --- a/notes/2022-02-08-08-50/index.html +++ b/notes/2022-02-08-08-50/index.html @@ -26,4 +26,4 @@ "build" ] } -

    the last one is especially interesting. as of january 2022, there’s still no way to tell sublime to ignore files in .gitignore. sublime should hide/gray out the files/folders in the sidebar, and not make them appear in the quick open dialog. so i have to add folders such as node_modules and build to the global config. people tell me to use some plugin (sublime-gitignorer), but meh… this issue from 2019 is still open.

    then i couldn’t get the editorconfig plugin to work. i tried changing indent_size in my .editorconfig file, but the change wasn’t reflected in the editor. joy.

    then i realised that the typescript in sublime 4 isn’t really “support”: it’s more “the syntax highlighting” is working. one has to install a typescript package for the Language Server Plugin for intellisense (completions, etc) to work. people don’t like this.

    then i installed prettier along with the sublime plugin, but formatting on every save isn’t viable since it’s very slow. somebody online said that vs code’s prettier extension is keeping long running node processes instead of spawning a single one for each save. sublime’s plugin is evidently not doing that. may have to check out dprint, but that plugin isn’t even out in package control yet. hehe.

    then there are these small annoyances like i can’t do backspace to delete a file when it’s focused in the sidebar. or hit enter to rename it. but no can do. like, what?! this is standard file explorer shortcuts? i timeboxed 5 min to find a keybinding but couldn’t. i guess my mental model from atom and vs code differs from sublime’s.

    i’d really like more visual cues in the sidebar file tree about modified or added files, like vs codes does. makes it a lot easier to navigate.

    so is switching worth it? sublime is so much faster than the electron based editors it’s ridiculous. when i’m comparing opening this repo’s folder with code . and subl . from the command line, i understand how gaslighted i’ve been with the electron editors. sublime just flashes and it’s open while vs code is busy booting another chromium app or whatever it’s doing.

    but i dislike having to carry around a set of plugins and settings when i switch computers. vs code has this nice settings sync feature built in, but i’m 100% sure i need to sort that out myself for sublime with some esoretic github gist based thing…

    maybe Jetbrains Fleet will be The One editor: native, without bloat, and configurable?

    if anybody uses any life saving plugins for sublime, please give me a shout.

    \ No newline at end of file +

    the last one is especially interesting. as of january 2022, there’s still no way to tell sublime to ignore files in .gitignore. sublime should hide/gray out the files/folders in the sidebar, and not make them appear in the quick open dialog. so i have to add folders such as node_modules and build to the global config. people tell me to use some plugin (sublime-gitignorer), but meh… this issue from 2019 is still open.

    then i couldn’t get the editorconfig plugin to work. i tried changing indent_size in my .editorconfig file, but the change wasn’t reflected in the editor. joy.

    then i realised that the typescript in sublime 4 isn’t really “support”: it’s more “the syntax highlighting” is working. one has to install a typescript package for the Language Server Plugin for intellisense (completions, etc) to work. people don’t like this.

    then i installed prettier along with the sublime plugin, but formatting on every save isn’t viable since it’s very slow. somebody online said that vs code’s prettier extension is keeping long running node processes instead of spawning a single one for each save. sublime’s plugin is evidently not doing that. may have to check out dprint, but that plugin isn’t even out in package control yet. hehe.

    then there are these small annoyances like i can’t do backspace to delete a file when it’s focused in the sidebar. or hit enter to rename it. but no can do. like, what?! this is standard file explorer shortcuts? i timeboxed 5 min to find a keybinding but couldn’t. i guess my mental model from atom and vs code differs from sublime’s.

    i’d really like more visual cues in the sidebar file tree about modified or added files, like vs codes does. makes it a lot easier to navigate.

    so is switching worth it? sublime is so much faster than the electron based editors it’s ridiculous. when i’m comparing opening this repo’s folder with code . and subl . from the command line, i understand how gaslighted i’ve been with the electron editors. sublime just flashes and it’s open while vs code is busy booting another chromium app or whatever it’s doing.

    but i dislike having to carry around a set of plugins and settings when i switch computers. vs code has this nice settings sync feature built in, but i’m 100% sure i need to sort that out myself for sublime with some esoretic github gist based thing…

    maybe Jetbrains Fleet will be The One editor: native, without bloat, and configurable?

    if anybody uses any life saving plugins for sublime, please give me a shout.

    \ No newline at end of file diff --git a/notes/2022-02-14-10-20/index.html b/notes/2022-02-14-10-20/index.html index 5e3fc4236..3986d94a3 100644 --- a/notes/2022-02-14-10-20/index.html +++ b/notes/2022-02-14-10-20/index.html @@ -1 +1 @@ -Johan Brook

    About 1 min reading time

    i love this quote from Nils van der Poel (emphasis mine):

    I think it’s important to understand that you’re not doing it for a gold medal. Regardless of which life you chose to live, you will sacrifice something, that’s the way it is.

    As soon as you go in one direction, you also choose to not go in all other directions at the same time. It’s the basic precondition for going anywhere at all.

    But on the path you take, you will experience fantastic things, even though it’s uphill there will be a great view when you’re at the top, and that’s what makes it worth it, to be on this journey with people you love. It doesn’t matter that much where the journey ends. A movie with a sad ending is also a good movie - and a movie with a nice ending makes you happy.

    I’m very happy for this medal around my neck, and for getting all the way here. But why do you do it? I don’t think you get to pick your dreams, they pick us. It’s up to us to realize them or not, and it seems like people who try to realize their dreams are happier.

    Nils van der Poel is a swedish olympic speed skater who just won two gold medals in the beijing 2022 olympics.

    source: Radiosporten’s Twitter (swedish). translated to english by jacobr.

    \ No newline at end of file +Johan Brook

    About 1 min reading time

    i love this quote from Nils van der Poel (emphasis mine):

    I think it’s important to understand that you’re not doing it for a gold medal. Regardless of which life you chose to live, you will sacrifice something, that’s the way it is.

    As soon as you go in one direction, you also choose to not go in all other directions at the same time. It’s the basic precondition for going anywhere at all.

    But on the path you take, you will experience fantastic things, even though it’s uphill there will be a great view when you’re at the top, and that’s what makes it worth it, to be on this journey with people you love. It doesn’t matter that much where the journey ends. A movie with a sad ending is also a good movie - and a movie with a nice ending makes you happy.

    I’m very happy for this medal around my neck, and for getting all the way here. But why do you do it? I don’t think you get to pick your dreams, they pick us. It’s up to us to realize them or not, and it seems like people who try to realize their dreams are happier.

    Nils van der Poel is a swedish olympic speed skater who just won two gold medals in the beijing 2022 olympics.

    source: Radiosporten’s Twitter (swedish). translated to english by jacobr.

    \ No newline at end of file diff --git a/notes/2022-02-17-12-48/index.html b/notes/2022-02-17-12-48/index.html index d6d1d3d18..747172498 100644 --- a/notes/2022-02-17-12-48/index.html +++ b/notes/2022-02-17-12-48/index.html @@ -1 +1 @@ -Johan Brook

    About 1 min reading time

    The best fruits

    1. Banana. they’re full of vitamins, fibers, and natural sugars. they provide the best energy, and are easy to a) carry around, b) peel. they’re perfect.
    2. Mango. whenever i get to pick flavours for (let’s say) ice cream, i always pick mango (or a combo of mango + something else). they are the best tropical fruits when it comes to flavour. they’re less easy to peel and deal with than a banana
    3. Clementine/Satsuma/Tangerine. easy to handle and somewhat easy to peel. the best of juices, and full of vitamins. makes the day brigher.
    4. Pear. sweeter than apples, with a soft, moist flesh full of fibres. they can be watery though, so not as rich as mangoes and bananas.

    …

    1. Pineapple. i really hate these. ugly, hard shell, weird flavour. i would never carry these on a trip, nor try to peel them as an ingredient.
    \ No newline at end of file +Johan Brook

    About 1 min reading time

    The best fruits

    1. Banana. they’re full of vitamins, fibers, and natural sugars. they provide the best energy, and are easy to a) carry around, b) peel. they’re perfect.
    2. Mango. whenever i get to pick flavours for (let’s say) ice cream, i always pick mango (or a combo of mango + something else). they are the best tropical fruits when it comes to flavour. they’re less easy to peel and deal with than a banana
    3. Clementine/Satsuma/Tangerine. easy to handle and somewhat easy to peel. the best of juices, and full of vitamins. makes the day brigher.
    4. Pear. sweeter than apples, with a soft, moist flesh full of fibres. they can be watery though, so not as rich as mangoes and bananas.

    …

    1. Pineapple. i really hate these. ugly, hard shell, weird flavour. i would never carry these on a trip, nor try to peel them as an ingredient.
    \ No newline at end of file diff --git a/notes/2022-02-22-21-14/index.html b/notes/2022-02-22-21-14/index.html index 47b61f01a..32710e72f 100644 --- a/notes/2022-02-22-21-14/index.html +++ b/notes/2022-02-22-21-14/index.html @@ -1 +1 @@ -Johan Brook

    About 1 min reading time

    i want to get more tattoos but i don’t know what motifs yet. worst feeling.

    \ No newline at end of file +Johan Brook

    About 1 min reading time

    i want to get more tattoos but i don’t know what motifs yet. worst feeling.

    \ No newline at end of file diff --git a/notes/2022-03-15-10-12/index.html b/notes/2022-03-15-10-12/index.html index 5bd53d0a5..f9265022d 100644 --- a/notes/2022-03-15-10-12/index.html +++ b/notes/2022-03-15-10-12/index.html @@ -1 +1 @@ -Johan Brook

    About 2 min reading time

    my latest favourite cocktail is this gin sour with bergamot and black tea. you’ve probably felt the scent of bergamot in earl grey tea or in perfumes. it’s a highly aromatic citrus fruit: it looks like a large, more spherical, lemon. it’s also surprisingly hard to find here in stockholm — even when it’s in season.

    i found this recipe (in swedish…) and got hold of a batch of bergamots through a restaurant friend. i’ve translated the recipe to english below:

    Gin tea sour

    Ingredients

    • 5 cl gin
    • 3 cl freshly squeezed juice from bergamot
    • 2 cl earl grey simple syrup (see below)
    • 1 egg white

    Procedure

    1. Pour gin, bergamot juice, simple syrup, and egg white in a shaker.
    2. shake like hell for a minute. it should create a lot of foam.
    3. add ice cubes to the shaker and shake until the shaker gets cold.
    4. strain into a coupe glass and decorate with something green or tea related.

    the cocktail will get a lovely orange tea-like colour too!

    Earl Grey simple syrup

    Ingredients

    • 2 dl water
    • 2 dl cane sugar
    • 1 bergamot
    • 2 strainers of black, neutral tea

    (this will make more syrup than you need for one drink.)

    Procedure

    1. combine water and sugar in a pot.
    2. add the zest of the bergamot (the outer layer of the peel, save the fruit with its juice for the drink). avoid the white layer beneath.
    3. put everything to a boil for a couple of minutes.
    4. remove from the heat, add the tea strainers with black tea.
    5. let it sit for at least 5 minutes. it should gain a strong flavour.
    6. remove the strainers and let the syrup cool.
    7. strain (to remove the bergamot zest) and pour the syrup into a small bottle and store in the fridge.

    i think the simple syrup is as best the first few days, but mine has lasted over a week now. just don’t forget it in there…

    \ No newline at end of file +Johan Brook

    About 2 min reading time

    my latest favourite cocktail is this gin sour with bergamot and black tea. you’ve probably felt the scent of bergamot in earl grey tea or in perfumes. it’s a highly aromatic citrus fruit: it looks like a large, more spherical, lemon. it’s also surprisingly hard to find here in stockholm — even when it’s in season.

    i found this recipe (in swedish…) and got hold of a batch of bergamots through a restaurant friend. i’ve translated the recipe to english below:

    Gin tea sour

    Ingredients

    • 5 cl gin
    • 3 cl freshly squeezed juice from bergamot
    • 2 cl earl grey simple syrup (see below)
    • 1 egg white

    Procedure

    1. Pour gin, bergamot juice, simple syrup, and egg white in a shaker.
    2. shake like hell for a minute. it should create a lot of foam.
    3. add ice cubes to the shaker and shake until the shaker gets cold.
    4. strain into a coupe glass and decorate with something green or tea related.

    the cocktail will get a lovely orange tea-like colour too!

    Earl Grey simple syrup

    Ingredients

    • 2 dl water
    • 2 dl cane sugar
    • 1 bergamot
    • 2 strainers of black, neutral tea

    (this will make more syrup than you need for one drink.)

    Procedure

    1. combine water and sugar in a pot.
    2. add the zest of the bergamot (the outer layer of the peel, save the fruit with its juice for the drink). avoid the white layer beneath.
    3. put everything to a boil for a couple of minutes.
    4. remove from the heat, add the tea strainers with black tea.
    5. let it sit for at least 5 minutes. it should gain a strong flavour.
    6. remove the strainers and let the syrup cool.
    7. strain (to remove the bergamot zest) and pour the syrup into a small bottle and store in the fridge.

    i think the simple syrup is as best the first few days, but mine has lasted over a week now. just don’t forget it in there…

    \ No newline at end of file diff --git a/notes/2022-03-16-19-58/index.html b/notes/2022-03-16-19-58/index.html index 45fd79904..bc56b44ef 100644 --- a/notes/2022-03-16-19-58/index.html +++ b/notes/2022-03-16-19-58/index.html @@ -5,4 +5,4 @@ assert.equal(true, true); });

    i use node’s assert for assertions. want typescript support? add esbuild and esbuild-register as dev dependencies and run tests with:

    node -r esbuild-register run-tests.ts
-

    the runner supports returning promises, as well as printing fancy file names for each test case.

    i appreciate taking this approach before jumping to npm install <dep>. it gives me very much peace of mind, as long as you don’t spend too much time maintaining your own tooling.

    \ No newline at end of file +

    the runner supports returning promises, as well as printing fancy file names for each test case.

    i appreciate taking this approach before jumping to npm install <dep>. it gives me very much peace of mind, as long as you don’t spend too much time maintaining your own tooling.

    \ No newline at end of file diff --git a/notes/2022-04-06-18-07/index.html b/notes/2022-04-06-18-07/index.html index 0e8af64a3..a571c0501 100644 --- a/notes/2022-04-06-18-07/index.html +++ b/notes/2022-04-06-18-07/index.html @@ -1 +1 @@ -Johan Brook

    About 1 min reading time

    finished two shows today: Euphoria S02 and Pam & Tommy.

    Euphoria is simply amazing. i loved season one. season two is grittier, and while it uses violence, sex, and drugs to describe the world, it’s always the characters that shine through. i’ve never seen better acting than zendaya’s performance as rue.

    pam & tommy is kinda of a curve ball. i like it! i didn’t think i would. it manages to take a story (pamela anderson & tommy lee’s stolen sex tape in the 90s) and make a whole series about it. i liked the sentimental rendition of their mutual love for each other. also, the issue of men vs. women in terms of leaked nudes is also brought up. “i was in that tape too!”, says tommy. “it’s not the same! i’m.. i’m.. a woman!”, says pamela. and it’s not just hollow talk: the series actually manages to showcase how pamela suffered.

    i also appreciated the 90s LA vibe ☀️

    \ No newline at end of file +Johan Brook

    About 1 min reading time

    finished two shows today: Euphoria S02 and Pam & Tommy.

    Euphoria is simply amazing. i loved season one. season two is grittier, and while it uses violence, sex, and drugs to describe the world, it’s always the characters that shine through. i’ve never seen better acting than zendaya’s performance as rue.

    pam & tommy is kinda of a curve ball. i like it! i didn’t think i would. it manages to take a story (pamela anderson & tommy lee’s stolen sex tape in the 90s) and make a whole series about it. i liked the sentimental rendition of their mutual love for each other. also, the issue of men vs. women in terms of leaked nudes is also brought up. “i was in that tape too!”, says tommy. “it’s not the same! i’m.. i’m.. a woman!”, says pamela. and it’s not just hollow talk: the series actually manages to showcase how pamela suffered.

    i also appreciated the 90s LA vibe ☀️

    \ No newline at end of file diff --git a/notes/2022-05-03-19-37/index.html b/notes/2022-05-03-19-37/index.html index 0ec6f3741..ee2904250 100644 --- a/notes/2022-05-03-19-37/index.html +++ b/notes/2022-05-03-19-37/index.html @@ -1 +1 @@ -Johan Brook

    About 1 min reading time

    the musical experience which had most impact on me was one time in gothenburg, at a sleazy karaoke bar. one woman came up to the mic, and it looked like she had been through a lot in her life. i don’t know, i just felt it. then she went on and did the most emotional and beautiful version of alanis morissette’s “ironic”.

    totally blew me away. the song was hers.

    \ No newline at end of file +Johan Brook

    About 1 min reading time

    the musical experience which had most impact on me was one time in gothenburg, at a sleazy karaoke bar. one woman came up to the mic, and it looked like she had been through a lot in her life. i don’t know, i just felt it. then she went on and did the most emotional and beautiful version of alanis morissette’s “ironic”.

    totally blew me away. the song was hers.

    \ No newline at end of file diff --git a/notes/2022-07-16-18-54/index.html b/notes/2022-07-16-18-54/index.html index bbd583ef1..22c90d435 100644 --- a/notes/2022-07-16-18-54/index.html +++ b/notes/2022-07-16-18-54/index.html @@ -1 +1 @@ -Johan Brook

    About 1 min reading time

    lookie here, haven’t posted in a while. this is how it goes when you have a full time job, and not being on parental leave!

    for my own memory, these are things i want to check out at the moment:

    • the SolidJS framework.
    • building a UI frontend for managing static site generators with tauri.
    • my work-in-progress app for reminding me to get in touch with friends, using remix.

    overall, things are pretty chill. i’m reading the autobiography of keith richards, and i’m actually enjoying it. thought it would be another sleazy rock star bio, but it kind “sounds” like he actually wrote it. also, he’s got a great memory. too bad i want to buy a new acoustic guitar now, AND an electric one… 💸

    i’m enjoying watching the women’s euro cup in football. there are so much less free kicks overall, due to … they’re doing less movie tricks i guess? or are just toucher. the quality is super high (more than a few years ago, they say), and i appreciate it a lot.

    \ No newline at end of file +Johan Brook

    About 1 min reading time

    lookie here, haven’t posted in a while. this is how it goes when you have a full time job, and not being on parental leave!

    for my own memory, these are things i want to check out at the moment:

    • the SolidJS framework.
    • building a UI frontend for managing static site generators with tauri.
    • my work-in-progress app for reminding me to get in touch with friends, using remix.

    overall, things are pretty chill. i’m reading the autobiography of keith richards, and i’m actually enjoying it. thought it would be another sleazy rock star bio, but it kind “sounds” like he actually wrote it. also, he’s got a great memory. too bad i want to buy a new acoustic guitar now, AND an electric one… 💸

    i’m enjoying watching the women’s euro cup in football. there are so much less free kicks overall, due to … they’re doing less movie tricks i guess? or are just toucher. the quality is super high (more than a few years ago, they say), and i appreciate it a lot.

    \ No newline at end of file diff --git a/notes/2022-08-28-19-15/index.html b/notes/2022-08-28-19-15/index.html index 549f606f9..fcda9af9b 100644 --- a/notes/2022-08-28-19-15/index.html +++ b/notes/2022-08-28-19-15/index.html @@ -1 +1 @@ -Johan Brook

    About 1 min reading time

    i bought myself a Hario Filter-in Bottle for making cold brew tea from a recommendation from a friend. excited for my new life as health guru.

    \ No newline at end of file +Johan Brook

    About 1 min reading time

    i bought myself a Hario Filter-in Bottle for making cold brew tea from a recommendation from a friend. excited for my new life as health guru.

    \ No newline at end of file diff --git a/notes/2022-10-27-20-24/index.html b/notes/2022-10-27-20-24/index.html index 57d2d4bcc..b76804f76 100644 --- a/notes/2022-10-27-20-24/index.html +++ b/notes/2022-10-27-20-24/index.html @@ -1 +1 @@ -Johan Brook

    About 2 min reading time

    hi again.

    last week, i was in portugal 🇵🇹 (right on the coast) with the rest of lookback. it was lovely to see everybody again. the heart is truly filled until next time.

    we’re going to south africa 🇿🇦 in november! we’re gonna be in franschhoek and kalk bay, on the cape. really looking forward, since a) i’ve never been in south africa, b) after researching, everything seem so cool.

    for the month long trip, i’ve made a list of books to read:

    • The Spy Who Came In From The Cold, by John le Carré
    • Grand Union, by Zadie Smith
    • Vargarna Från Evighetens Skog, by Karl Ove Knausgård
    • At the Existentialist Café: Freedom, Being, and Apricot Cocktails, by Sarah Bakewell
    • What We Owe the Future, by William MacAskill.

    just the action of making this list makes me excited.

    red hot chili peppers’ latest album “return to the dream canteen” is so good. i love anthony’s smooth vocals, and john’s solid guitar. they’re so very musical.

    i’ve bought an watch even though i’ve said i wouldn’t. to my defense, it was a) a used one, and b) i’ll only use it for exercising. it’s really nice to not bring the phone when running, since i wanna track how good i do. however, i’m really impressed by the watch so far. it’s really a marvel of engineering.

    i watch “house of the dragon” on HBO, and “rings of power” on amazon prime. the former is really good: even though it doesn’t have the intricate storylines from “game of thrones”, i like the acting and focus on relationships between parents and children. i also appreciate the focus on the hardships for women of giving birth. “rings of power” is so-so. it feels too CGI, i think, and too “joyful”. it doesn’t have the raw feeling of peter jackson’s trilogy.

    \ No newline at end of file +Johan Brook

    About 2 min reading time

    hi again.

    last week, i was in portugal 🇵🇹 (right on the coast) with the rest of lookback. it was lovely to see everybody again. the heart is truly filled until next time.

    we’re going to south africa 🇿🇦 in november! we’re gonna be in franschhoek and kalk bay, on the cape. really looking forward, since a) i’ve never been in south africa, b) after researching, everything seem so cool.

    for the month long trip, i’ve made a list of books to read:

    • The Spy Who Came In From The Cold, by John le Carré
    • Grand Union, by Zadie Smith
    • Vargarna Från Evighetens Skog, by Karl Ove Knausgård
    • At the Existentialist Café: Freedom, Being, and Apricot Cocktails, by Sarah Bakewell
    • What We Owe the Future, by William MacAskill.

    just the action of making this list makes me excited.

    red hot chili peppers’ latest album “return to the dream canteen” is so good. i love anthony’s smooth vocals, and john’s solid guitar. they’re so very musical.

    i’ve bought an watch even though i’ve said i wouldn’t. to my defense, it was a) a used one, and b) i’ll only use it for exercising. it’s really nice to not bring the phone when running, since i wanna track how good i do. however, i’m really impressed by the watch so far. it’s really a marvel of engineering.

    i watch “house of the dragon” on HBO, and “rings of power” on amazon prime. the former is really good: even though it doesn’t have the intricate storylines from “game of thrones”, i like the acting and focus on relationships between parents and children. i also appreciate the focus on the hardships for women of giving birth. “rings of power” is so-so. it feels too CGI, i think, and too “joyful”. it doesn’t have the raw feeling of peter jackson’s trilogy.

    \ No newline at end of file diff --git a/notes/2023-01-30-20-53/index.html b/notes/2023-01-30-20-53/index.html index d69333c9b..75a3a1020 100644 --- a/notes/2023-01-30-20-53/index.html +++ b/notes/2023-01-30-20-53/index.html @@ -1 +1 @@ -Johan Brook

    About 1 min reading time

    I’ve finally stopped using Twitter now. Feels weird. The reason was that they shutdown API access for 3rd party clients, like the one I’m using: Tweetbot. That was the last straw for me. I’m out. I have zero energy for using Twitter’s apps. I’m going all in on Mastodon now.

    Luckily, the creators of Tweetbot have released Ivory — an iOS app for Mastodon. It’s the same look and feel as Tweetbot, which is amazing. I’ve started to like Mastodon a lot now. I wrote a post about it too.

    Long live Twitter. Goodbye, old friend 👋

    \ No newline at end of file +Johan Brook

    About 1 min reading time

    I’ve finally stopped using Twitter now. Feels weird. The reason was that they shutdown API access for 3rd party clients, like the one I’m using: Tweetbot. That was the last straw for me. I’m out. I have zero energy for using Twitter’s apps. I’m going all in on Mastodon now.

    Luckily, the creators of Tweetbot have released Ivory — an iOS app for Mastodon. It’s the same look and feel as Tweetbot, which is amazing. I’ve started to like Mastodon a lot now. I wrote a post about it too.

    Long live Twitter. Goodbye, old friend 👋

    \ No newline at end of file diff --git a/notes/2023-02-19-19-34/index.html b/notes/2023-02-19-19-34/index.html index 6abf6c55b..5541f55c6 100644 --- a/notes/2023-02-19-19-34/index.html +++ b/notes/2023-02-19-19-34/index.html @@ -1 +1 @@ -Johan Brook

    About 1 min reading time

    Did a small re-align of my site. Nothing too big. Just some spring cleaning, visually. Feels good.

    I’ve landed in a nice rhythm of doing exercise now. Combining running and weight lifting. My constant gripe with the latter is to have to eat so goddamned much all the time to get any growth effect out of the gym sessions, but whatever.

    Watched “All Quiet On The Western Front” yesterday. It’s a Netflix produced film (but it was super good!) about a solider in the German army during World War I. It’s based on the book with the famous title, a source of many dad phrasings over the years (dads throwing in the reference “all quiet on the Western front” in conversations when receiving the question “how do you do”). The film was amazing in the sense of production, but also (I guess) authenticity (the dialogue is German 💞). The sheer horror of war was pictured in a deeply touching and soul draining way.

    \ No newline at end of file +Johan Brook

    About 1 min reading time

    Did a small re-align of my site. Nothing too big. Just some spring cleaning, visually. Feels good.

    I’ve landed in a nice rhythm of doing exercise now. Combining running and weight lifting. My constant gripe with the latter is to have to eat so goddamned much all the time to get any growth effect out of the gym sessions, but whatever.

    Watched “All Quiet On The Western Front” yesterday. It’s a Netflix produced film (but it was super good!) about a solider in the German army during World War I. It’s based on the book with the famous title, a source of many dad phrasings over the years (dads throwing in the reference “all quiet on the Western front” in conversations when receiving the question “how do you do”). The film was amazing in the sense of production, but also (I guess) authenticity (the dialogue is German 💞). The sheer horror of war was pictured in a deeply touching and soul draining way.

    \ No newline at end of file diff --git a/notes/2023-03-20-20-29/index.html b/notes/2023-03-20-20-29/index.html index b243a1dd8..fcea8e3d3 100644 --- a/notes/2023-03-20-20-29/index.html +++ b/notes/2023-03-20-20-29/index.html @@ -1 +1 @@ -Johan Brook

    About 1 min reading time

    On the night to Friday, March 17th, I became a father for the second time. Insane! A little girl was born to us.

    Thanks to me now being deep into the kids thing, this time around didn’t feel as scary as with our first. I am now able to embrace this moment to 150%, which feels a-mazing.

    \ No newline at end of file +Johan Brook

    About 1 min reading time

    On the night to Friday, March 17th, I became a father for the second time. Insane! A little girl was born to us.

    Thanks to me now being deep into the kids thing, this time around didn’t feel as scary as with our first. I am now able to embrace this moment to 150%, which feels a-mazing.

    \ No newline at end of file diff --git a/notes/2023-04-11-19-58/index.html b/notes/2023-04-11-19-58/index.html index 84cbf535e..af12eb999 100644 --- a/notes/2023-04-11-19-58/index.html +++ b/notes/2023-04-11-19-58/index.html @@ -1 +1 @@ -Johan Brook

    About 1 min reading time

    The minimalism of “Open House” by Lou Reed and John Cale is superb. So eerie and perfect. Nobody can do Lou Reed’s voice better than Lou Reed himself.

    \ No newline at end of file +Johan Brook

    About 1 min reading time

    The minimalism of “Open House” by Lou Reed and John Cale is superb. So eerie and perfect. Nobody can do Lou Reed’s voice better than Lou Reed himself.

    \ No newline at end of file diff --git a/notes/2023-04-11-23-55/index.html b/notes/2023-04-11-23-55/index.html index 654212244..e57e1c4e5 100644 --- a/notes/2023-04-11-23-55/index.html +++ b/notes/2023-04-11-23-55/index.html @@ -1 +1 @@ -Johan Brook

    About 1 min reading time

    This is me posting from my brand new iOS Shortcut! 🥰

    \ No newline at end of file +Johan Brook

    About 1 min reading time

    This is me posting from my brand new iOS Shortcut! 🥰

    \ No newline at end of file diff --git a/notes/2023-05-03-21-34/index.html b/notes/2023-05-03-21-34/index.html index 76521886f..e14c0a3c5 100644 --- a/notes/2023-05-03-21-34/index.html +++ b/notes/2023-05-03-21-34/index.html @@ -1 +1 @@ -Johan Brook

    About 1 min reading time

    Added a Music section to my site. 3rd party APIs are so much fun with:

    • serverless functions.
    • APIs with only a simple token auth.

    Brings me joy!

    \ No newline at end of file +Johan Brook

    About 1 min reading time

    Added a Music section to my site. 3rd party APIs are so much fun with:

    • serverless functions.
    • APIs with only a simple token auth.

    Brings me joy!

    \ No newline at end of file diff --git a/notes/2023-08-11-08-01/index.html b/notes/2023-08-11-08-01/index.html index ed3106335..b9bdc094d 100644 --- a/notes/2023-08-11-08-01/index.html +++ b/notes/2023-08-11-08-01/index.html @@ -1 +1 @@ -Johan Brook

    About 1 min reading time

    The show “Full Circle” on HBO is good. Made by Steven Soderbergh. It uses unconventional camera — a raw lens from lower angles — which makes the city lights of New York appear “as they really are”.

    Yesterday, I watched the series finale of “Little Drummer Girl” (also on HBO). It was so good. Park Chan-Wook directed it. The late 70s costumes, interior designs, and locations were spot on. And the characters were nuanced and non-cliché. Gotta continue my John le Carré run now by reading the novel.

    \ No newline at end of file +Johan Brook

    About 1 min reading time

    The show “Full Circle” on HBO is good. Made by Steven Soderbergh. It uses unconventional camera — a raw lens from lower angles — which makes the city lights of New York appear “as they really are”.

    Yesterday, I watched the series finale of “Little Drummer Girl” (also on HBO). It was so good. Park Chan-Wook directed it. The late 70s costumes, interior designs, and locations were spot on. And the characters were nuanced and non-cliché. Gotta continue my John le Carré run now by reading the novel.

    \ No newline at end of file diff --git a/notes/2023-08-23-09-06/index.html b/notes/2023-08-23-09-06/index.html index dcac56990..3f81d10fc 100644 --- a/notes/2023-08-23-09-06/index.html +++ b/notes/2023-08-23-09-06/index.html @@ -1 +1 @@ -Johan Brook

    About 1 min reading time

    Today is a “The Smiths” day.

    “Louder Than Bombs” is one of the best compilation albums ever made.

    \ No newline at end of file +Johan Brook

    About 1 min reading time

    Today is a “The Smiths” day.

    “Louder Than Bombs” is one of the best compilation albums ever made.

    \ No newline at end of file diff --git a/notes/2023-08-24-07-59/index.html b/notes/2023-08-24-07-59/index.html index 832a922c6..1f427a0e4 100644 --- a/notes/2023-08-24-07-59/index.html +++ b/notes/2023-08-24-07-59/index.html @@ -1 +1 @@ -Johan Brook

    About 1 min reading time

    Today is a “A Tribe Called Quest” day.

    \ No newline at end of file +Johan Brook

    About 1 min reading time

    Today is a “A Tribe Called Quest” day.

    \ No newline at end of file diff --git a/notes/2023-09-14-14-29/index.html b/notes/2023-09-14-14-29/index.html index 7c7d79840..41b3275a6 100644 --- a/notes/2023-09-14-14-29/index.html +++ b/notes/2023-09-14-14-29/index.html @@ -1 +1 @@ -Johan Brook

    About 1 min reading time

    The album “Right Time” (1976) by Mighty Diamonds might be the best reggae album I’ve heard. Even better than the epic “Heart of the Congos” (1977) by The Congos.

    \ No newline at end of file +Johan Brook

    About 1 min reading time

    The album “Right Time” (1976) by Mighty Diamonds might be the best reggae album I’ve heard. Even better than the epic “Heart of the Congos” (1977) by The Congos.

    \ No newline at end of file diff --git a/now/index.html b/now/index.html index 2a268c472..a8894f88b 100644 --- a/now/index.html +++ b/now/index.html @@ -1 +1 @@ -Now / Johan Brook

    Now.

    Updated on from Stockholm, Sweden.

    Since the last update…

    …I’ve had over a year of both regular family life things, and other stuff such as travel.

    Our daughter began preschool in late March 2022, which was huge in the sense that both me and the wife could do… other stuff (work, etc) while somebody else took care of our child. Insane (insanely cool) if you ask me. This created this rhythm of “leaving-picking up from preschool”.

    In July, we received the news that we expected another child, due in March. A girl was born on March 17th 2023. All went well, and we’re so happy. Next stage in family life begins now!

    Travelling

    In March 2022, I went to London with a group of friends to meet our other friend who lives there. London is such a cool city. I’ve completely looked past it during all these years (have only been there once before).

    We spent the summer in Sweden, both on the east and west coasts. I think we’ll do roughly the same this year.

    In August, I went to Berlin to see a friend. I love Berlin. So much. My biggest regret (except for not seeing the band Kent live before they quit) is not living there while I was nomading.

    Both me and the wife had work trips during the Autumn. She went to New York (envious) and I went to Lisbon. I spent two months in Lisbon in 2017, and it’s such a lovely city. It’s smaller than the average European capital, so it’s very homey.

    The finale was in November-December, when we went to South Africa on vacation and parental leave. It. Was. Amazing. I totally fell in love with the area. We spent most of the time in Kalk Bay, south of Cape Town. We really would love to go back next Winter, if the universe allows.

    Coming back from South Africa, we spent Christmas and New Years in the area around Stockholm. Then we went to the mountains for a week in January. The environment there is to die for. I find myself longing for that place during grey days in Stockholm.

    Exercising

    I still lift weights and run, but to a lesser extent than before I think. I’m glad I keep it up, but I don’t have the same drive anymore. I don’t keep up with the protein intake, and I don’t go out for runs 3-4 times a week. Maybe I pick it up more often during Spring. Right now, it feels more like “maintenance” rather than “growth” — which I’m completely fine with.

    Work

    Work at Lookback is great. I’m still learning new things and work on fun projects. It’s an exciting time now, with new programming languages (Rust) and new frontend technologies to keep an eye on.

    Currently reading

    See “Reading”.

    Habits to keep

    • Keep give myself alone time once in a while. Even more important with two kids. Being completely alone — either at home our out in the city — is very important to me.
    • Keep off Instagram.
    • Keep off Facebook.
    • Keep going to the gym.
    • Keep reading books.
    • Keep doing running.
    • Keep writing.

    Aspirations for 2023

    Re-used from 2022:

    • Spend as much time as I can with my daughters.
    • Travel and challenge ourselves as parents to get out of comfort zones.
    • Continue to develop this site’s looks and content.

    New:

    • Do our best to get back to South Africa during some Swedish Winter months.
    • Eat more spicy food.

    If my life changes, I’ll update this page. Also see what’s on my mind.

    Inspired by Derek Sivers.

    \ No newline at end of file +Now / Johan Brook

    Now.

    Updated on from Stockholm, Sweden.

    Since the last update…

    …I’ve had over a year of both regular family life things, and other stuff such as travel.

    Our daughter began preschool in late March 2022, which was huge in the sense that both me and the wife could do… other stuff (work, etc) while somebody else took care of our child. Insane (insanely cool) if you ask me. This created this rhythm of “leaving-picking up from preschool”.

    In July, we received the news that we expected another child, due in March. A girl was born on March 17th 2023. All went well, and we’re so happy. Next stage in family life begins now!

    Travelling

    In March 2022, I went to London with a group of friends to meet our other friend who lives there. London is such a cool city. I’ve completely looked past it during all these years (have only been there once before).

    We spent the summer in Sweden, both on the east and west coasts. I think we’ll do roughly the same this year.

    In August, I went to Berlin to see a friend. I love Berlin. So much. My biggest regret (except for not seeing the band Kent live before they quit) is not living there while I was nomading.

    Both me and the wife had work trips during the Autumn. She went to New York (envious) and I went to Lisbon. I spent two months in Lisbon in 2017, and it’s such a lovely city. It’s smaller than the average European capital, so it’s very homey.

    The finale was in November-December, when we went to South Africa on vacation and parental leave. It. Was. Amazing. I totally fell in love with the area. We spent most of the time in Kalk Bay, south of Cape Town. We really would love to go back next Winter, if the universe allows.

    Coming back from South Africa, we spent Christmas and New Years in the area around Stockholm. Then we went to the mountains for a week in January. The environment there is to die for. I find myself longing for that place during grey days in Stockholm.

    Exercising

    I still lift weights and run, but to a lesser extent than before I think. I’m glad I keep it up, but I don’t have the same drive anymore. I don’t keep up with the protein intake, and I don’t go out for runs 3-4 times a week. Maybe I pick it up more often during Spring. Right now, it feels more like “maintenance” rather than “growth” — which I’m completely fine with.

    Work

    Work at Lookback is great. I’m still learning new things and work on fun projects. It’s an exciting time now, with new programming languages (Rust) and new frontend technologies to keep an eye on.

    Currently reading

    See “Reading”.

    Habits to keep

    • Keep give myself alone time once in a while. Even more important with two kids. Being completely alone — either at home our out in the city — is very important to me.
    • Keep off Instagram.
    • Keep off Facebook.
    • Keep going to the gym.
    • Keep reading books.
    • Keep doing running.
    • Keep writing.

    Aspirations for 2023

    Re-used from 2022:

    • Spend as much time as I can with my daughters.
    • Travel and challenge ourselves as parents to get out of comfort zones.
    • Continue to develop this site’s looks and content.

    New:

    • Do our best to get back to South Africa during some Swedish Winter months.
    • Eat more spicy food.

    If my life changes, I’ll update this page. Also see what’s on my mind.

    Inspired by Derek Sivers.

    \ No newline at end of file diff --git a/principles/index.html b/principles/index.html index 791ee49a7..1e8407611 100644 --- a/principles/index.html +++ b/principles/index.html @@ -1 +1 @@ -Principles / Johan Brook

    Principles.

    1. I should always try to have a clear mind.
    2. I don’t always have to have an opinion about a given subject.
    3. I should be tolerant, accepting, and non-judgmental of people. It takes all sorts to make a world.
    4. I should think before I buy something. Do my research. Spend more on quality that lasts longer. Try to buy as much as possible locally.
    \ No newline at end of file +Principles / Johan Brook

    Principles.

    1. I should always try to have a clear mind.
    2. I don’t always have to have an opinion about a given subject.
    3. I should be tolerant, accepting, and non-judgmental of people. It takes all sorts to make a world.
    4. I should think before I buy something. Do my research. Spend more on quality that lasts longer. Try to buy as much as possible locally.
    \ No newline at end of file diff --git a/quotes/index.html b/quotes/index.html index a91677faf..1b788bf3f 100644 --- a/quotes/index.html +++ b/quotes/index.html @@ -1 +1 @@ -Quotes, sayings, and other wisdoms / Johan Brook

    Quotes, sayings, and other wisdoms.

    Wise things I've collected through my internet travels. Every quote is totally made by other people than me.

    when you don’t create things, you become defined by your tastes rather than ability. your tastes only narrow & exclude people. so create.

    — _why

    Art should comfort the disturbed and disturb the comfortable.

    — Banksy

    If you are ever tempted to look for outside approval, realize that you have compromised your integrity. If you need a witness, be your own.

    — Epictetus

    It seems that all true things must change and only that which changes remains true.

    — Carl Jung

    You can only pour from a full glass.

    It’s better to have a compass over a map.

    Everything around you that you call life was made up by people that were no smarter than you. And the minute you can understand that you can poke life, and if you push in, then something will pop out the other side; that you can change it, you can mold it — that’s maybe the most important thing: to shake off this erroneous notion that life is there, and you’re just going to live in it versus embrace it, change it, improve it, make your mark upon it.

    — Steve Jobs

    Don’t tell yourself you’ll practice thirty minutes everyday.

    This will fail.

    Instead, pick the shakuhachi [a Japanese flute] up and just hold it.

    Don’t compare your insides to other people’s outsides.

    \ No newline at end of file +Quotes, sayings, and other wisdoms / Johan Brook

    Quotes, sayings, and other wisdoms.

    Wise things I've collected through my internet travels. Every quote is totally made by other people than me.

    when you don’t create things, you become defined by your tastes rather than ability. your tastes only narrow & exclude people. so create.

    — _why

    Art should comfort the disturbed and disturb the comfortable.

    — Banksy

    If you are ever tempted to look for outside approval, realize that you have compromised your integrity. If you need a witness, be your own.

    — Epictetus

    It seems that all true things must change and only that which changes remains true.

    — Carl Jung

    You can only pour from a full glass.

    It’s better to have a compass over a map.

    Everything around you that you call life was made up by people that were no smarter than you. And the minute you can understand that you can poke life, and if you push in, then something will pop out the other side; that you can change it, you can mold it — that’s maybe the most important thing: to shake off this erroneous notion that life is there, and you’re just going to live in it versus embrace it, change it, improve it, make your mark upon it.

    — Steve Jobs

    Don’t tell yourself you’ll practice thirty minutes everyday.

    This will fail.

    Instead, pick the shakuhachi [a Japanese flute] up and just hold it.

    Don’t compare your insides to other people’s outsides.

    \ No newline at end of file diff --git a/reading.xml b/reading.xml index ac5923ba6..5a04155a4 100644 --- a/reading.xml +++ b/reading.xml @@ -25,7 +25,7 @@ The Honourable Schoolboy - 2023-10-24T14:07:44Z + 2023-10-25T19:40:59Z https://johan.im/reading#the-honourable-schoolboy @@ -77,7 +77,7 @@ The Shards - 2023-10-24T14:07:44Z + 2023-10-25T19:40:59Z https://johan.im/reading#the-shards @@ -109,7 +109,7 @@ What We Owe the Future - 2023-10-24T14:07:44Z + 2023-10-25T19:40:59Z https://johan.im/reading#what-we-owe-the-future <p>Philosopher philosophising about the future.</p> @@ -139,7 +139,7 @@ Grand Union - 2023-10-24T14:07:44Z + 2023-10-25T19:40:59Z https://johan.im/reading#grand-union <p>Just didn't like it. The short stories weren't captivating enough, and the prose was elegant but unnecessarily complex.</p> @@ -149,7 +149,7 @@ Four Thousand Weeks - 2023-10-24T14:07:44Z + 2023-10-25T19:40:59Z https://johan.im/reading#four-thousand-weeks <p>Too much &quot;self help book&quot; so far. I constantly feel: &quot;this could've been a blog post&quot; and &quot;why did I buy this&quot;.</p> @@ -159,7 +159,7 @@ Att Uppfinna Världen ("Inventing the World") - 2023-10-24T14:07:44Z + 2023-10-25T19:40:59Z https://johan.im/reading#inventing-the-world <p>Historical account about how women have been pushed aside over the years when it comes to inventions and innovation.</p> @@ -179,7 +179,7 @@ Jack - 2023-10-24T14:07:44Z + 2023-10-25T19:40:59Z https://johan.im/reading#jack <p><em>The</em> generational novel of the Swedish 1970s. Dropped it because it didn't really speak to me. I understand it must've been cool in the 70s, but not so now.</p> @@ -199,7 +199,7 @@ Life - 2023-10-24T14:07:44Z + 2023-10-25T19:40:59Z https://johan.im/reading#life <p>The autobiography of Keith Richards (guitarist in Rolling Stones).</p> @@ -249,7 +249,7 @@ Ålevangeliet - 2023-10-24T14:07:44Z + 2023-10-25T19:40:59Z https://johan.im/reading#alevangeliet diff --git a/reading/index.html b/reading/index.html index ba5167fe2..b8a55ee7d 100644 --- a/reading/index.html +++ b/reading/index.html @@ -1 +1 @@ -Reading / Johan Brook

    Reading.

    Non-exhaustive list of books I've read and am reading, in reverse chronological order.

    You can also check out what I want to read next.

    Feed

    TitleAuthorNotes
    BerlinAntony BeevorContinuing my journey towards being a fully fledged dad. 150% detailed account of the Allied invasion of Germany in 1945. So much stuff I didn't know. Lots of stories about the conditions of the soldiers, civilians, and the fates of prisoners (hint: all quite horrible).
    The Honourable SchoolboyJohn le CarréDropped
    Tinker Tailor Solder SpyJohn le CarréIf I had read the book before the movie, I would've been more surprised by the climax than what I was for the film version. I continue to be impressed by le Carré's prose too. He inserts tiny words and sentences which adds character, sarcasm, and "vibe" to the current paragraph. Looking forward to the next one in the "Karla trilogy".
    The Spy Who Came In from the ColdJohn le CarréDamn. I should've read this one after "The Legacy of Spies". The latter one — also by le Carré — is a prequel and sequel to "The Spy…", and I would've enjoyed "The Legacy…" more if waiting with reading it. In any case, I loved this one: a classic spy novel with "plots and counter plots", as it says on the back. I like the author's writing in the way that it's very on point. Like the world he's created, the prose is cold and without too many emotions.
    Brev från NollpunktenPeter EnglundI liked this one very much. The book is a collection of essays spanning from World War I, throughout the 1920s-30s Soviet Union with Stalin's purges, and into the architecture and bombings of Berlin and Nagasaki in World War II. The author's prose is very raw and truth-saying, but yet beautiful and carries a lot of weight. A very chilling account of the evil of man.
    The Legacy of SpiesJohn le CarréI'm deep into espionage fiction now. Or, I'm deep into John le Carré… This novel was both a prequel and sequel to the author's breakout piece "The Spy Who Came In from the Cold" (which I haven't read yet. Not sure if that's good or bad). I liked the prose and the pacing. His got this way of mentioning information on the fly in sentences which is very well delivered.
    The ShardsBret Easton EllisPaused
    Lou Reed – The LifeMick WallHow many rock bios may be allowed to have something with "life" as suffix?! What I especially liked with this book was that it was… short. I don't mean it's bad! More that all the other bios are so. Damn. Long. But Mick Wall compresses Lou Reed's life and captures the important events into an actually good read.
    Stockholm, Sweden
    Kent – Texter om Sveriges största rockbandSeveralCollection of reviews and articles about the band Kent, from around 1993 to 2005. I liked the interviews and descriptions of their early career through newspaper texts. The band is no more since a while back, so they obviously don't do these kind of interviews any longer.
    Stockholm, Sweden
    What We Owe the FutureWilliam MacAskillPhilosopher philosophising about the future.Paused
    DetaljernaIa GenbergBest book I've read for a long while. So intimate and delicate. Beautiful prose. Good build-ups. The format of describing the interactions with four people during an unspecified (but guessable) timeline from the perspective of the narrator is so cool.
    Fjällnäs, Sweden
    David Bowie — A LifeDylan JonesA non-traditional biography of David Bowie. Being a Bowie fan, I loved it. It was constructed as interview format rather than common phrose. It was different than other biographies I've read on Bowie, thanks to the various (well known) voices the author used in the interviews. It felt personal and real.
    Fjällnäs, Sweden
    Grand UnionZadie SmithJust didn't like it. The short stories weren't captivating enough, and the prose was elegant but unnecessarily complex.Dropped
    Four Thousand WeeksOliver BurkemanToo much "self help book" so far. I constantly feel: "this could've been a blog post" and "why did I buy this".Dropped
    Att Uppfinna Världen ("Inventing the World")Katrine MarçalHistorical account about how women have been pushed aside over the years when it comes to inventions and innovation.Paused
    Vargarna från evighetens skogKarl Ove KnausgårdI loved this even more than "Morgonstjärnan". It's more focused, and showcases Knausgård's ability to tell captivating stories about seemingly mundane characters and scenes. The book treats two characters' everyday life, with varying amounts of trauma and anxieties. The prose is simple: the 700 pages are an easy read. It's really inspiring.
    Kalk Bay, South Africa
    JackUlf LundellThe generational novel of the Swedish 1970s. Dropped it because it didn't really speak to me. I understand it must've been cool in the 70s, but not so now.Dropped
    Häng CityMikael YvesandLovely rendition of a summer in the lives of three 13 year old boys in northern Sweden in 1999. The language used is so very relatable, and so are the pop culture references. Even though "nothing" really happens, the book does describe (quite accurately) feelings, energies, places, activities, and personal traits of people from the eyes of a teenage boy.
    LifeKeith RichardsThe autobiography of Keith Richards (guitarist in Rolling Stones).Stockholm, Sweden
    Mastering the Art of French CookingJulia Child, Simone Beck, Louisette BertholleI bought the Swedish translation as paperback, and read it all in once – back to back. Quite special for a cooking book. The book includes tips and tricks around techniques, equipment, and ingredients. All the traditional French recipies are in here. What I loved about the recipies was that they were both mechanic but yet very much alive. Meaning, the authors' obsession with details, experimentation, and iteration really shined through.
    Stockholm, Sweden
    MorgonstjärnanKarl Ove KnausgårdI thought Knausgård would be a hard read, but it was not. "Morgonstjärnan" is so lovely. The author has this superb power of making seemingly mundane everyday people and tasks become interesting. His description are rich, and the pace is perfect. I was really captivated and inspired.
    Fjällnäs, Sweden
    Once Upon A Time… In HollywoodQuentin TarantinoIt's quite rare that a book is written after a film, and by the film's creator too. I loved this one: it's 100% Quentin Tarantino-ness all way through. He has space to go deeper in the conversations between the characters, whose stories he can give justice too. Like the film, it somehow entertains me without having a real plot.
    Stockholm, Sweden
    The ClashStrummer, Jones, Simonon, HeadonAn okay account of the history of the band, told by themselves in interview format.
    Stockholm, Sweden
    ÅlevangelietPatrik SvenssonDropped
    Fight ClubChuck PalahniukI honestly think the movie is better. I'm sure the book would be cool if I'd read that first, but I couldn't stand the fast paced dialogue with random sentences thrown in between lines.
    Florence, Italy
    American PsychoBret Easton EllisThe book is a lot more psycho than the movie. More explicit than I thought. The unreliable monologues of the narrator are amazingly written, and there are more layers to the book than just the obvious one.
    Florence, Italy
    What I Talk About When I Talk About RunningHaruki MurakamiI love Murakami's straight forward language. This one made me want to start running. He's very honest about himself in this semi-biography, but never sentimental. Feels very Japanese.
    Florence, Italy
    Samlade VerkLydia SandgrenThis is an epic describing the live of a couple of individuals from the 1970s until the 2010s in Gothenburg, Sweden. It really touched me, on several layers. I'm very sentimental about the city Gothenburg, and I was constantly impressed by the cultural references, the plot, and the language of the relatively young author. There's this amazing melancholia hanging over the whole work.
    Österlen, Sweden
    Zen Mind, Beginner's MindShunryu SuzukiIt took me a long time to finish this very thin book. The language is dense, and I wanted to soak every page in. I had to re-read a couple of sentences. But I liked it as a whole, especially the laser focus of the author's message.
    Stockholm, Sweden
    IshmaelDaniel QuinnA philosophical discourse about the evolution of homo sapiens. Some things are controversial, like population control. The book's dialogue is about biodiversity, climate change, urbanisation: a lot of contemporary topics. It's a nice pairing together with Sapiens.
    Österlen, Sweden
    HeraklesTheodor KallifatidesI like mythology, especially like Greek mythology. This book is a novel – I guess a bit dramatised – about the life of the hero Hercules. It was good, very vivid and nuanced.
    Stockholm, Sweden
    Normal PeopleSally RooneyI saw the series before reading the book, and both formats have their charm. The author has a great language, and manages to capture the atmosphere that surrounds that age from high school to university.
    Stockholm, Sweden
    Cosa NostraJohn DickieA non-fiction history about the Sicilian mafia. Entertaining.
    Stockholm, Sweden
    About A BoyNick HornbyVery 'fun' and unforeseeable language. The thoughts of the two main characters – the man and the boy – are written in a way that feels authentic. I liked the randomness and quick turns of the book.
    Stockholm, Sweden
    Jag Kan Ha FelBjörn Natthiko LindebladWritten by a Swedish businessman who became a Buddhist monk for 17 years. It's not a classic self help book, nor some kind of teaching about Buddhism. It's merely his story, with some of his philosophies thrown in. He mixes serious subjects with wit.
    Stockholm, Sweden
    The GodfatherMario PuzoEven better than the movie. More details (of course), and deeper descriptions of characters.
    Stockholm, Sweden
    The AlchemistPaolo CoelhoI loved it in the beginning, but then it turned out to be boring New Age-y stuff.
    Sri Lanka
    The ZahirPaolo CoelhoLike The Alchemist, this one was boring. Poorly written, boring plot, and not believable at all.
    Sri Lanka
    The Snow LeopardPeter MatthiessenA travel diary of an American in an expedition into the Himalayas. He's real goal is to catch a glimpse of the very shy Snow Leopard. This travel text captures the beauty of Zen without speaking too much about it. It's kind of dense at times, but very, very grand.
    Sri Lanka
    Men Without WomenHaruki MurakamiI like short story collections, and Murakami's language is the best. Read this.
    Sri Lanka
    The Sun Also RisesErnest Hemingway
    Barcelona, Spain
    A Brief History of TimeStephen Hawking
    Stockholm, Sweden
    A Little LifeHanya YanagiharaThe saddest book I've read in all my life. But oh so good.
    Stockholm, Sweden
    21 Lessons for the 21th CenturyYuval Noah Harari
    Stockholm, Sweden
    Hero — David BowieLesley-Ann Jones
    Lisbon, Portugal
    SapiensYuval Noah Harari
    Nice, France
    The Mountain ShadowGregory David RobertsSequel to Shantaram. Not as good, but nevertheless a good sequel.
    Gothenburg, Sweden
    M TrainPatti Smith
    New York, USA
    A Moveable FeastErnest Hemingway
    Rio de Janeiro, Brazil
    The Essential HemingwayErnest Hemingway
    Rio de Janeiro, Brazil
    Dancing with the Devil in the City of GodJuliana Barbassa
    Rio de Janeiro, Brazil
    Just KidsPatti SmithVery touching, and beautifully written.
    San Francisco, USA
    Zen and the Art of Motorcycle MaintenanceRobert M. Pirsig
    Vienna, Austria
    W. Axl RoseMick Wall
    Gothenburg, Sweden
    Becoming Steve JobsBrent Schlender & Rick Tetzeli
    Gothenburg, Sweden
    Steve JobsWalter Isaacson
    Gothenburg, Sweden
    ShantaramGregory David Roberts
    Gothenburg, Sweden
    Scar TissueAnthony KiedisRaw and honest.
    Gothenburg, Sweden
    Into the WildJon Krakauer
    Paris, France
    Black SabbathMick Wall
    The RoadCormac McCarthyThe minimal language is perfect.
    Life of PiYann Martel
    Calgary, Canada
    InfinityBrian Clegg
    Calgary, Canada
    ReworkJason Fried & David Heinemeier Hansson
    Calgary, Canada
    The Holy Blood And The Holy GrailM. Baigent, R. Leigh & H. Lincoln
    Calgary, Canada
    No One Here Gets Out AliveJerry Hopkins & Danny Sugarman
    Calgary, Canada
    Interview wih the VampireAnne Rice
    Calgary, Canada
    Led Zeppelin – When Giants Walked The EarthMick Wall
    Kauai, Hawaii
    Hammer of the Gods – The Led Zeppelin SagaStephen Davis
    Kauai, Hawaii
    The Old Man and the SeaErnest Hemingway
    1984George Orwell
    Animal FarmGeorge Orwell
    The SilmarillionJ.R.R. Tolkien
    BilboJ.R.R. Tolkien
    The Lord of the RingsJ.R.R. Tolkien

    75 books | Feed

    \ No newline at end of file +Reading / Johan Brook

    Reading.

    Non-exhaustive list of books I've read and am reading, in reverse chronological order.

    You can also check out what I want to read next.

    Feed

    TitleAuthorNotes
    BerlinAntony BeevorContinuing my journey towards being a fully fledged dad. 150% detailed account of the Allied invasion of Germany in 1945. So much stuff I didn't know. Lots of stories about the conditions of the soldiers, civilians, and the fates of prisoners (hint: all quite horrible).
    The Honourable SchoolboyJohn le CarréDropped
    Tinker Tailor Solder SpyJohn le CarréIf I had read the book before the movie, I would've been more surprised by the climax than what I was for the film version. I continue to be impressed by le Carré's prose too. He inserts tiny words and sentences which adds character, sarcasm, and "vibe" to the current paragraph. Looking forward to the next one in the "Karla trilogy".
    The Spy Who Came In from the ColdJohn le CarréDamn. I should've read this one after "The Legacy of Spies". The latter one — also by le Carré — is a prequel and sequel to "The Spy…", and I would've enjoyed "The Legacy…" more if waiting with reading it. In any case, I loved this one: a classic spy novel with "plots and counter plots", as it says on the back. I like the author's writing in the way that it's very on point. Like the world he's created, the prose is cold and without too many emotions.
    Brev från NollpunktenPeter EnglundI liked this one very much. The book is a collection of essays spanning from World War I, throughout the 1920s-30s Soviet Union with Stalin's purges, and into the architecture and bombings of Berlin and Nagasaki in World War II. The author's prose is very raw and truth-saying, but yet beautiful and carries a lot of weight. A very chilling account of the evil of man.
    The Legacy of SpiesJohn le CarréI'm deep into espionage fiction now. Or, I'm deep into John le Carré… This novel was both a prequel and sequel to the author's breakout piece "The Spy Who Came In from the Cold" (which I haven't read yet. Not sure if that's good or bad). I liked the prose and the pacing. His got this way of mentioning information on the fly in sentences which is very well delivered.
    The ShardsBret Easton EllisPaused
    Lou Reed – The LifeMick WallHow many rock bios may be allowed to have something with "life" as suffix?! What I especially liked with this book was that it was… short. I don't mean it's bad! More that all the other bios are so. Damn. Long. But Mick Wall compresses Lou Reed's life and captures the important events into an actually good read.
    Stockholm, Sweden
    Kent – Texter om Sveriges största rockbandSeveralCollection of reviews and articles about the band Kent, from around 1993 to 2005. I liked the interviews and descriptions of their early career through newspaper texts. The band is no more since a while back, so they obviously don't do these kind of interviews any longer.
    Stockholm, Sweden
    What We Owe the FutureWilliam MacAskillPhilosopher philosophising about the future.Paused
    DetaljernaIa GenbergBest book I've read for a long while. So intimate and delicate. Beautiful prose. Good build-ups. The format of describing the interactions with four people during an unspecified (but guessable) timeline from the perspective of the narrator is so cool.
    Fjällnäs, Sweden
    David Bowie — A LifeDylan JonesA non-traditional biography of David Bowie. Being a Bowie fan, I loved it. It was constructed as interview format rather than common phrose. It was different than other biographies I've read on Bowie, thanks to the various (well known) voices the author used in the interviews. It felt personal and real.
    Fjällnäs, Sweden
    Grand UnionZadie SmithJust didn't like it. The short stories weren't captivating enough, and the prose was elegant but unnecessarily complex.Dropped
    Four Thousand WeeksOliver BurkemanToo much "self help book" so far. I constantly feel: "this could've been a blog post" and "why did I buy this".Dropped
    Att Uppfinna Världen ("Inventing the World")Katrine MarçalHistorical account about how women have been pushed aside over the years when it comes to inventions and innovation.Paused
    Vargarna från evighetens skogKarl Ove KnausgårdI loved this even more than "Morgonstjärnan". It's more focused, and showcases Knausgård's ability to tell captivating stories about seemingly mundane characters and scenes. The book treats two characters' everyday life, with varying amounts of trauma and anxieties. The prose is simple: the 700 pages are an easy read. It's really inspiring.
    Kalk Bay, South Africa
    JackUlf LundellThe generational novel of the Swedish 1970s. Dropped it because it didn't really speak to me. I understand it must've been cool in the 70s, but not so now.Dropped
    Häng CityMikael YvesandLovely rendition of a summer in the lives of three 13 year old boys in northern Sweden in 1999. The language used is so very relatable, and so are the pop culture references. Even though "nothing" really happens, the book does describe (quite accurately) feelings, energies, places, activities, and personal traits of people from the eyes of a teenage boy.
    LifeKeith RichardsThe autobiography of Keith Richards (guitarist in Rolling Stones).Stockholm, Sweden
    Mastering the Art of French CookingJulia Child, Simone Beck, Louisette BertholleI bought the Swedish translation as paperback, and read it all in once – back to back. Quite special for a cooking book. The book includes tips and tricks around techniques, equipment, and ingredients. All the traditional French recipies are in here. What I loved about the recipies was that they were both mechanic but yet very much alive. Meaning, the authors' obsession with details, experimentation, and iteration really shined through.
    Stockholm, Sweden
    MorgonstjärnanKarl Ove KnausgårdI thought Knausgård would be a hard read, but it was not. "Morgonstjärnan" is so lovely. The author has this superb power of making seemingly mundane everyday people and tasks become interesting. His description are rich, and the pace is perfect. I was really captivated and inspired.
    Fjällnäs, Sweden
    Once Upon A Time… In HollywoodQuentin TarantinoIt's quite rare that a book is written after a film, and by the film's creator too. I loved this one: it's 100% Quentin Tarantino-ness all way through. He has space to go deeper in the conversations between the characters, whose stories he can give justice too. Like the film, it somehow entertains me without having a real plot.
    Stockholm, Sweden
    The ClashStrummer, Jones, Simonon, HeadonAn okay account of the history of the band, told by themselves in interview format.
    Stockholm, Sweden
    ÅlevangelietPatrik SvenssonDropped
    Fight ClubChuck PalahniukI honestly think the movie is better. I'm sure the book would be cool if I'd read that first, but I couldn't stand the fast paced dialogue with random sentences thrown in between lines.
    Florence, Italy
    American PsychoBret Easton EllisThe book is a lot more psycho than the movie. More explicit than I thought. The unreliable monologues of the narrator are amazingly written, and there are more layers to the book than just the obvious one.
    Florence, Italy
    What I Talk About When I Talk About RunningHaruki MurakamiI love Murakami's straight forward language. This one made me want to start running. He's very honest about himself in this semi-biography, but never sentimental. Feels very Japanese.
    Florence, Italy
    Samlade VerkLydia SandgrenThis is an epic describing the live of a couple of individuals from the 1970s until the 2010s in Gothenburg, Sweden. It really touched me, on several layers. I'm very sentimental about the city Gothenburg, and I was constantly impressed by the cultural references, the plot, and the language of the relatively young author. There's this amazing melancholia hanging over the whole work.
    Österlen, Sweden
    Zen Mind, Beginner's MindShunryu SuzukiIt took me a long time to finish this very thin book. The language is dense, and I wanted to soak every page in. I had to re-read a couple of sentences. But I liked it as a whole, especially the laser focus of the author's message.
    Stockholm, Sweden
    IshmaelDaniel QuinnA philosophical discourse about the evolution of homo sapiens. Some things are controversial, like population control. The book's dialogue is about biodiversity, climate change, urbanisation: a lot of contemporary topics. It's a nice pairing together with Sapiens.
    Österlen, Sweden
    HeraklesTheodor KallifatidesI like mythology, especially like Greek mythology. This book is a novel – I guess a bit dramatised – about the life of the hero Hercules. It was good, very vivid and nuanced.
    Stockholm, Sweden
    Normal PeopleSally RooneyI saw the series before reading the book, and both formats have their charm. The author has a great language, and manages to capture the atmosphere that surrounds that age from high school to university.
    Stockholm, Sweden
    Cosa NostraJohn DickieA non-fiction history about the Sicilian mafia. Entertaining.
    Stockholm, Sweden
    About A BoyNick HornbyVery 'fun' and unforeseeable language. The thoughts of the two main characters – the man and the boy – are written in a way that feels authentic. I liked the randomness and quick turns of the book.
    Stockholm, Sweden
    Jag Kan Ha FelBjörn Natthiko LindebladWritten by a Swedish businessman who became a Buddhist monk for 17 years. It's not a classic self help book, nor some kind of teaching about Buddhism. It's merely his story, with some of his philosophies thrown in. He mixes serious subjects with wit.
    Stockholm, Sweden
    The GodfatherMario PuzoEven better than the movie. More details (of course), and deeper descriptions of characters.
    Stockholm, Sweden
    The AlchemistPaolo CoelhoI loved it in the beginning, but then it turned out to be boring New Age-y stuff.
    Sri Lanka
    The ZahirPaolo CoelhoLike The Alchemist, this one was boring. Poorly written, boring plot, and not believable at all.
    Sri Lanka
    The Snow LeopardPeter MatthiessenA travel diary of an American in an expedition into the Himalayas. He's real goal is to catch a glimpse of the very shy Snow Leopard. This travel text captures the beauty of Zen without speaking too much about it. It's kind of dense at times, but very, very grand.
    Sri Lanka
    Men Without WomenHaruki MurakamiI like short story collections, and Murakami's language is the best. Read this.
    Sri Lanka
    The Sun Also RisesErnest Hemingway
    Barcelona, Spain
    A Brief History of TimeStephen Hawking
    Stockholm, Sweden
    A Little LifeHanya YanagiharaThe saddest book I've read in all my life. But oh so good.
    Stockholm, Sweden
    21 Lessons for the 21th CenturyYuval Noah Harari
    Stockholm, Sweden
    Hero — David BowieLesley-Ann Jones
    Lisbon, Portugal
    SapiensYuval Noah Harari
    Nice, France
    The Mountain ShadowGregory David RobertsSequel to Shantaram. Not as good, but nevertheless a good sequel.
    Gothenburg, Sweden
    M TrainPatti Smith
    New York, USA
    A Moveable FeastErnest Hemingway
    Rio de Janeiro, Brazil
    The Essential HemingwayErnest Hemingway
    Rio de Janeiro, Brazil
    Dancing with the Devil in the City of GodJuliana Barbassa
    Rio de Janeiro, Brazil
    Just KidsPatti SmithVery touching, and beautifully written.
    San Francisco, USA
    Zen and the Art of Motorcycle MaintenanceRobert M. Pirsig
    Vienna, Austria
    W. Axl RoseMick Wall
    Gothenburg, Sweden
    Becoming Steve JobsBrent Schlender & Rick Tetzeli
    Gothenburg, Sweden
    Steve JobsWalter Isaacson
    Gothenburg, Sweden
    ShantaramGregory David Roberts
    Gothenburg, Sweden
    Scar TissueAnthony KiedisRaw and honest.
    Gothenburg, Sweden
    Into the WildJon Krakauer
    Paris, France
    Black SabbathMick Wall
    The RoadCormac McCarthyThe minimal language is perfect.
    Life of PiYann Martel
    Calgary, Canada
    InfinityBrian Clegg
    Calgary, Canada
    ReworkJason Fried & David Heinemeier Hansson
    Calgary, Canada
    The Holy Blood And The Holy GrailM. Baigent, R. Leigh & H. Lincoln
    Calgary, Canada
    No One Here Gets Out AliveJerry Hopkins & Danny Sugarman
    Calgary, Canada
    Interview wih the VampireAnne Rice
    Calgary, Canada
    Led Zeppelin – When Giants Walked The EarthMick Wall
    Kauai, Hawaii
    Hammer of the Gods – The Led Zeppelin SagaStephen Davis
    Kauai, Hawaii
    The Old Man and the SeaErnest Hemingway
    1984George Orwell
    Animal FarmGeorge Orwell
    The SilmarillionJ.R.R. Tolkien
    BilboJ.R.R. Tolkien
    The Lord of the RingsJ.R.R. Tolkien

    75 books | Feed

    \ No newline at end of file diff --git a/to-read/index.html b/to-read/index.html index 080243f2d..4329c288e 100644 --- a/to-read/index.html +++ b/to-read/index.html @@ -1 +1 @@ -Want to read / Johan Brook

    Want to read.

    Updated on .
    TitleAuthorNotes
    Secret PilgrimJohn le Carré
    Smiley's PeopleJohn le Carré
    GomorraRoberto Saviano

    You can also check out what I've read so far.

    \ No newline at end of file +Want to read / Johan Brook

    Want to read.

    Updated on .
    TitleAuthorNotes
    Secret PilgrimJohn le Carré
    Smiley's PeopleJohn le Carré
    GomorraRoberto Saviano

    You can also check out what I've read so far.

    \ No newline at end of file diff --git a/writings/a-creative-person/index.html b/writings/a-creative-person/index.html index 7664aff42..3912c95c6 100644 --- a/writings/a-creative-person/index.html +++ b/writings/a-creative-person/index.html @@ -1 +1 @@ -I am not a creative person / Johan Brook

    I am not a creative person

    About 1 min reading time

    As Johan Brook awoke one morning from uneasy dreams he found himself not being a creative person at all.

    I’ve had this feeling, almost identity, that I’m a creative person, ever since my teenage years. I’ve been enjoying creating birthday cards, posters, magazines, websites, blog themes, code projects, blog posts, photo manipulations and poems during a long time now. But am I truly creative?

    I’m surrounded by creativity and people practicing it. This notion on the web, where creating things and being productive is the ultimate sophistication. It’s almost dizzying to see the extreme amount of stuff being created by individuals and groups of people every single day. Some of those things are changing the world, other things are just fun and silly and will be forgotten tomorrow.

    Am I envious? Perhaps. Even though I want to minimise the amount of time I spend at the computer outside of my job, I’m so amazed by the source of ideas some people have. An idea is fragile: it demands nurturing and a bravery to shoot it down, if necessary.

    I’ve been travelling (“nomading”) for about two years now. I’ve got tons of experiences I’d love to express, and potential ideas to build. But still I feel no calm in my soul for doing that.

    To be inventing something completely new. The creative spark. To create and watch something grow. Just from an idea. Those are things I miss. If I’ve ever had them. Aren’t we just copying each other anyway?

    \ No newline at end of file +I am not a creative person / Johan Brook

    I am not a creative person

    About 1 min reading time

    As Johan Brook awoke one morning from uneasy dreams he found himself not being a creative person at all.

    I’ve had this feeling, almost identity, that I’m a creative person, ever since my teenage years. I’ve been enjoying creating birthday cards, posters, magazines, websites, blog themes, code projects, blog posts, photo manipulations and poems during a long time now. But am I truly creative?

    I’m surrounded by creativity and people practicing it. This notion on the web, where creating things and being productive is the ultimate sophistication. It’s almost dizzying to see the extreme amount of stuff being created by individuals and groups of people every single day. Some of those things are changing the world, other things are just fun and silly and will be forgotten tomorrow.

    Am I envious? Perhaps. Even though I want to minimise the amount of time I spend at the computer outside of my job, I’m so amazed by the source of ideas some people have. An idea is fragile: it demands nurturing and a bravery to shoot it down, if necessary.

    I’ve been travelling (“nomading”) for about two years now. I’ve got tons of experiences I’d love to express, and potential ideas to build. But still I feel no calm in my soul for doing that.

    To be inventing something completely new. The creative spark. To create and watch something grow. Just from an idea. Those are things I miss. If I’ve ever had them. Aren’t we just copying each other anyway?

    \ No newline at end of file diff --git a/writings/a-fix-for-antialiasing-issues-in-webkit-browsers/index.html b/writings/a-fix-for-antialiasing-issues-in-webkit-browsers/index.html index 4ad11f6ec..168db66e8 100644 --- a/writings/a-fix-for-antialiasing-issues-in-webkit-browsers/index.html +++ b/writings/a-fix-for-antialiasing-issues-in-webkit-browsers/index.html @@ -1 +1 @@ -A fix for antialiasing issues in WebKit browsers / Johan Brook

    A fix for antialiasing issues in WebKit browsers

    About 1 min reading time

    Follow link to technology.posterous.com →

    CSS Transforms, Transitions and Animations are great and all, but apparently they are causing issues with some text on a page. I’ve experienced those issues on my site, and I couldn’t for my life figure out what the problem was. Some text paragraphs could suddenly lose their antialiasing, and look very jagged and, yeah, aliased. They would yet get antialiasing again when I scrolled the page up and down, or resized the browser window. Weirdness. Follow the link above for a post on the Posterous blog about the issue. Apparently, WebKit’s 3D Transforms were the culprits, since it gives the relevant elements hardware acceleration, and …

    When an element gets hardware accelerated in Webkit, sub-pixel anti-aliasing no longer works.

    Fix

    How to fix? Play around with the 3D Transforms on the page, or remove any position: relative; on parent elements. Webkit removes antialiasing on text while animating (which is a huge gain in performance), and somehow relative positioning screws things up. Better: recent WebKit nightly builds fix this issue, so I guess I have to play the waiting game.

    \ No newline at end of file +A fix for antialiasing issues in WebKit browsers / Johan Brook

    A fix for antialiasing issues in WebKit browsers

    About 1 min reading time

    Follow link to technology.posterous.com →

    CSS Transforms, Transitions and Animations are great and all, but apparently they are causing issues with some text on a page. I’ve experienced those issues on my site, and I couldn’t for my life figure out what the problem was. Some text paragraphs could suddenly lose their antialiasing, and look very jagged and, yeah, aliased. They would yet get antialiasing again when I scrolled the page up and down, or resized the browser window. Weirdness. Follow the link above for a post on the Posterous blog about the issue. Apparently, WebKit’s 3D Transforms were the culprits, since it gives the relevant elements hardware acceleration, and …

    When an element gets hardware accelerated in Webkit, sub-pixel anti-aliasing no longer works.

    Fix

    How to fix? Play around with the 3D Transforms on the page, or remove any position: relative; on parent elements. Webkit removes antialiasing on text while animating (which is a huge gain in performance), and somehow relative positioning screws things up. Better: recent WebKit nightly builds fix this issue, so I guess I have to play the waiting game.

    \ No newline at end of file diff --git a/writings/a-greenhorns-freelance-advice/index.html b/writings/a-greenhorns-freelance-advice/index.html index 172b46b9f..9c6f6438f 100644 --- a/writings/a-greenhorns-freelance-advice/index.html +++ b/writings/a-greenhorns-freelance-advice/index.html @@ -1 +1 @@ -A Greenhorn's Freelance Advice / Johan Brook

    A Greenhorn's Freelance Advice

    About 5 min reading time

    Sheep Photo by Julie_Berlin

    I started freelancing for real/professionally/full time last October (2010). I had arrived back to Sweden after a wonderful sabbatical year in Canada where I worked, met people, talked, travelled, and experienced things. Had the time of my life, and I strongly recommend getting away for a while. My interest for web design and development wasn’t washed away though: on the contrary, as a matter of fact. I hacked on my own site (redesigned it a couple of times; no big deal), smaller hobby projects, and did some graphic design jobs. In hindsight, I shouldn’t have spent so much time with code and web stuff: I should’ve travelled more and worried less about not evolving as a designer and developer (I’ll get back to that later on).

    Anyway. In October I was home again, and had a year to fill with something. I hadn’t figured out what to study yet (I knew I wanted to study, but not exactly in what field). Therefore, I took the route any respectable, young, naîve, aspiring web designer would do: go freelancing. Living the dream, eh? To me, it surely was a dream job. To be able to fully focus on my largest interest since high school was quite awesome, and to (hopefully) get paid well wasn’t bad either.

    It’s now one year later. I wouldn’t call myself experienced in any regard, but I think I know my way around the business quite well, having collaborated with some great people. I’ve also experienced some of the darker sides of freelancing (yeah, there are dark sides).

    What follows are a greenhorn’s quick warnings and advice — something to think about.

    Don’t stay up too late at night

    Pulling all-nighters seldom works out well. I consider myself both a morning and night persons, but working with projects late into the morning isn’t optimal. I discovered I disliked waking up later in the morning — it felt like I always was behind schedule. Instead, I began waking up earlier and went to bed earlier — a very simple equation. Then the days started to feel longer, and I lost the annoying sense of missing out on a couple of hours in the morning.

    Sheep Photo by Susan Gibbs

    Try to get away from home to do work

    It’s great working from home and all. You often have everything you need, and there’s no commute whatsoever. But there the pros stops and the cons begin.

    You may feel isolated By not working with people, it’ll feel weird after a while. I missed the social contact so very bad while working alone.

    Mixing work and personal spaces is bad I didn’t like working from all kinds of places in my home, week after week. A dedicated work space is almost required in hindsight.

    You may get disturbed Visiting people may not get that you’re working — not just hanging out by the computer at home.

    Go outside at least once a day

    I made this my key rule after a while. It’s really, really important. I promise that if you head outside once a day — just for a walk or to read something — the work you do inside will feel lots better. I felt bad for working by the computer all days long, but with some quiet time outside I got perspective.

    Don’t put life on hold for work

    Do other stuff as well. I guess this is a matter of experience — to learn to balance things. I’m that kind of guy who gets sucked into an interesting task, and almost can’t do anything else before it’s finished. I just can’t stop myself. But you should try to put up boundaries for work and time-off.

    Maintain distance

    Have some distance to what you’re doing. It’s perhaps not the best idea to work on a client project from 09.00 to 17.00, and then instantly jump on to hack on a hobby project of yours late into the night. I was quite tired of working with web stuff for a while, so I took a sabbatical break for a while – only doing “real” work. I kept up with the web scene with news and Twitter, but just consumed and took a break from producing. It sort of lets you get back with fresh eyes on things, and gives you perspective.

    Don’t worry about being left behind

    The web scene is fast moving community. New innovations are posted every day, and guys and girls are really pushing the limits of what you can achieve with HTML, CSS, Javascript, and other web technologies. It made me frustrated and stressed out. I also wanted to create lots of things! Web apps, blog posts, tools, techniques .. But still nothing came out of it. The important thing is that don’t feel like you have to produce stuff. Everything will get lots harder if you feel a pressure to always be creative and produce. Don’t compare yourself to others all the time — instead focus on how you can grow as a designer or developer by applying new knowledge to your work. Every time you try something new, it’ll feel like you’re on the wagon again. There are new tools and technologies emerging all the time — it’s really difficult to try them all.

    Specialize

    Don’t feel any stress to have to know it all. I’m the kind of person who wants to do everything and everything. I want to know how stuff works, and create things. I’m interested in graphic design, grid systems, typography, and colour theory. But I’m also really excited about Javascript design patterns, frameworks, new HTML5 technologies, cutting edge CSS, and programming languages such as Ruby. When you are interested in a lot of areas, the mental demands you have on yourself are getting bigger and bigger. It gets especially dangerous when you compare yourself to others in all these areas: “Oh, that guy’s poster illustration is radical! I also want to create something like that!”. “Whoa, that guy’s JS app looks pretty neat – I should try to do something for myself as well”. Your todo list grows, and eventually nothing comes out of it.

    You can’t do everything. Sometimes, you have to focus and think: “I know what this subject is about. I know the tools. I don’t need to dive too deep into it right now”. I’ve sorted a bunch of technologies into a mental folder “look-into-later-if-there’s-time”. Or even better: team up with another person whose skills are complementing yours, and evolve together.

    Don’t specialize

    Maintain your “Jack-of-all-trades”-ness. Being the guy know a little bit about everything has helped me big time. I’m not a fan of the idea of completely locking yourself into a box of your own area. In order to produce great results, you have to be aware of what you’re team mates are going through. Have a clue.

    It feels so much better saying: “Yeah, I’ve read a bit about that, and its .. . I’ll look into it, and get back to you!”, instead of “Umm .. I’ve actually never heard of that technology, and I have no idea how it works”.

    Everything gets easier if your “shape-able” into other roles in a project. You’ll get more valuable to employers/clients, and not the least your co-workers/collaborators. But don’t get me wrong: it’s also quite awesome having a guy on your team who knows a technology inside out, and is able to do all kinds of black magic with it. But if you start talking about that web designers shouldn’t code, we will have to have a discussion.

    Stay hungry

    Above everything else: Try not to lose your spark. Your spark is the inventiveness, the innovation, the curiousness; the drive to learn more. It could be easy to lose the spark — the headings above all describe potholes in which you don’t want to go. Depending on your personality, the spark may disappear in an instant, triggered by some event.

    I hope this post wasn’t too boring. It’s mainly written from my own perspective (yeah, MIND BLOWN – right?!), and is how I’ve seen and felt during a year in the industry. If you like (or hate) it, please feel free get back to me!

    \ No newline at end of file +A Greenhorn's Freelance Advice / Johan Brook

    A Greenhorn's Freelance Advice

    About 5 min reading time

    Sheep Photo by Julie_Berlin

    I started freelancing for real/professionally/full time last October (2010). I had arrived back to Sweden after a wonderful sabbatical year in Canada where I worked, met people, talked, travelled, and experienced things. Had the time of my life, and I strongly recommend getting away for a while. My interest for web design and development wasn’t washed away though: on the contrary, as a matter of fact. I hacked on my own site (redesigned it a couple of times; no big deal), smaller hobby projects, and did some graphic design jobs. In hindsight, I shouldn’t have spent so much time with code and web stuff: I should’ve travelled more and worried less about not evolving as a designer and developer (I’ll get back to that later on).

    Anyway. In October I was home again, and had a year to fill with something. I hadn’t figured out what to study yet (I knew I wanted to study, but not exactly in what field). Therefore, I took the route any respectable, young, naîve, aspiring web designer would do: go freelancing. Living the dream, eh? To me, it surely was a dream job. To be able to fully focus on my largest interest since high school was quite awesome, and to (hopefully) get paid well wasn’t bad either.

    It’s now one year later. I wouldn’t call myself experienced in any regard, but I think I know my way around the business quite well, having collaborated with some great people. I’ve also experienced some of the darker sides of freelancing (yeah, there are dark sides).

    What follows are a greenhorn’s quick warnings and advice — something to think about.

    Don’t stay up too late at night

    Pulling all-nighters seldom works out well. I consider myself both a morning and night persons, but working with projects late into the morning isn’t optimal. I discovered I disliked waking up later in the morning — it felt like I always was behind schedule. Instead, I began waking up earlier and went to bed earlier — a very simple equation. Then the days started to feel longer, and I lost the annoying sense of missing out on a couple of hours in the morning.

    Sheep Photo by Susan Gibbs

    Try to get away from home to do work

    It’s great working from home and all. You often have everything you need, and there’s no commute whatsoever. But there the pros stops and the cons begin.

    You may feel isolated By not working with people, it’ll feel weird after a while. I missed the social contact so very bad while working alone.

    Mixing work and personal spaces is bad I didn’t like working from all kinds of places in my home, week after week. A dedicated work space is almost required in hindsight.

    You may get disturbed Visiting people may not get that you’re working — not just hanging out by the computer at home.

    Go outside at least once a day

    I made this my key rule after a while. It’s really, really important. I promise that if you head outside once a day — just for a walk or to read something — the work you do inside will feel lots better. I felt bad for working by the computer all days long, but with some quiet time outside I got perspective.

    Don’t put life on hold for work

    Do other stuff as well. I guess this is a matter of experience — to learn to balance things. I’m that kind of guy who gets sucked into an interesting task, and almost can’t do anything else before it’s finished. I just can’t stop myself. But you should try to put up boundaries for work and time-off.

    Maintain distance

    Have some distance to what you’re doing. It’s perhaps not the best idea to work on a client project from 09.00 to 17.00, and then instantly jump on to hack on a hobby project of yours late into the night. I was quite tired of working with web stuff for a while, so I took a sabbatical break for a while – only doing “real” work. I kept up with the web scene with news and Twitter, but just consumed and took a break from producing. It sort of lets you get back with fresh eyes on things, and gives you perspective.

    Don’t worry about being left behind

    The web scene is fast moving community. New innovations are posted every day, and guys and girls are really pushing the limits of what you can achieve with HTML, CSS, Javascript, and other web technologies. It made me frustrated and stressed out. I also wanted to create lots of things! Web apps, blog posts, tools, techniques .. But still nothing came out of it. The important thing is that don’t feel like you have to produce stuff. Everything will get lots harder if you feel a pressure to always be creative and produce. Don’t compare yourself to others all the time — instead focus on how you can grow as a designer or developer by applying new knowledge to your work. Every time you try something new, it’ll feel like you’re on the wagon again. There are new tools and technologies emerging all the time — it’s really difficult to try them all.

    Specialize

    Don’t feel any stress to have to know it all. I’m the kind of person who wants to do everything and everything. I want to know how stuff works, and create things. I’m interested in graphic design, grid systems, typography, and colour theory. But I’m also really excited about Javascript design patterns, frameworks, new HTML5 technologies, cutting edge CSS, and programming languages such as Ruby. When you are interested in a lot of areas, the mental demands you have on yourself are getting bigger and bigger. It gets especially dangerous when you compare yourself to others in all these areas: “Oh, that guy’s poster illustration is radical! I also want to create something like that!”. “Whoa, that guy’s JS app looks pretty neat – I should try to do something for myself as well”. Your todo list grows, and eventually nothing comes out of it.

    You can’t do everything. Sometimes, you have to focus and think: “I know what this subject is about. I know the tools. I don’t need to dive too deep into it right now”. I’ve sorted a bunch of technologies into a mental folder “look-into-later-if-there’s-time”. Or even better: team up with another person whose skills are complementing yours, and evolve together.

    Don’t specialize

    Maintain your “Jack-of-all-trades”-ness. Being the guy know a little bit about everything has helped me big time. I’m not a fan of the idea of completely locking yourself into a box of your own area. In order to produce great results, you have to be aware of what you’re team mates are going through. Have a clue.

    It feels so much better saying: “Yeah, I’ve read a bit about that, and its .. . I’ll look into it, and get back to you!”, instead of “Umm .. I’ve actually never heard of that technology, and I have no idea how it works”.

    Everything gets easier if your “shape-able” into other roles in a project. You’ll get more valuable to employers/clients, and not the least your co-workers/collaborators. But don’t get me wrong: it’s also quite awesome having a guy on your team who knows a technology inside out, and is able to do all kinds of black magic with it. But if you start talking about that web designers shouldn’t code, we will have to have a discussion.

    Stay hungry

    Above everything else: Try not to lose your spark. Your spark is the inventiveness, the innovation, the curiousness; the drive to learn more. It could be easy to lose the spark — the headings above all describe potholes in which you don’t want to go. Depending on your personality, the spark may disappear in an instant, triggered by some event.

    I hope this post wasn’t too boring. It’s mainly written from my own perspective (yeah, MIND BLOWN – right?!), and is how I’ve seen and felt during a year in the industry. If you like (or hate) it, please feel free get back to me!

    \ No newline at end of file diff --git a/writings/a-markdown-teleprompter/index.html b/writings/a-markdown-teleprompter/index.html index d8b3a5249..445846259 100644 --- a/writings/a-markdown-teleprompter/index.html +++ b/writings/a-markdown-teleprompter/index.html @@ -1 +1 @@ -A Markdown teleprompter / Johan Brook

    A Markdown teleprompter

    About 1 min reading time

    Follow link to brettterpstra.com →

    Brett Terpstra has created a simple web based teleprompter, with support for Markdown. I haven’t had the chance to try it on an iPad, but I imagine this would make a great tool when having smaller presentations (I can finally get rid of cluttered paper notes).

    \ No newline at end of file +A Markdown teleprompter / Johan Brook

    A Markdown teleprompter

    About 1 min reading time

    Follow link to brettterpstra.com →

    Brett Terpstra has created a simple web based teleprompter, with support for Markdown. I haven’t had the chance to try it on an iPad, but I imagine this would make a great tool when having smaller presentations (I can finally get rid of cluttered paper notes).

    \ No newline at end of file diff --git a/writings/a-note-to-people-that-hire/index.html b/writings/a-note-to-people-that-hire/index.html index b3c3f772b..87b7af866 100644 --- a/writings/a-note-to-people-that-hire/index.html +++ b/writings/a-note-to-people-that-hire/index.html @@ -1 +1 @@ -"A note to people that hire ... " / Johan Brook

    "A note to people that hire ... "

    About 1 min reading time

    Follow link to idzr.org →

    Mitch Bartlett has written a very thoughtful, honest and true piece about and to people who initiates projects with freelancers but then, well, screws them over in the end. Please read. If you’re “the hiring guy” — don’t be that bad person who act this way when dealing with craftsmen. Pay for the work and don’t be a cheap-o.

    \ No newline at end of file +"A note to people that hire ... " / Johan Brook

    "A note to people that hire ... "

    About 1 min reading time

    Follow link to idzr.org →

    Mitch Bartlett has written a very thoughtful, honest and true piece about and to people who initiates projects with freelancers but then, well, screws them over in the end. Please read. If you’re “the hiring guy” — don’t be that bad person who act this way when dealing with craftsmen. Pay for the work and don’t be a cheap-o.

    \ No newline at end of file diff --git a/writings/a-simple-icon/index.html b/writings/a-simple-icon/index.html index 5f7ce510d..91b17ade0 100644 --- a/writings/a-simple-icon/index.html +++ b/writings/a-simple-icon/index.html @@ -1 +1 @@ -A Simple Icon / Johan Brook

    A Simple Icon

    About 5 min reading time

    This is my moka pot. There are many others like it, but this one is mine. My moka pot is my best friend. It is my life. I must master it as I must master my life. Without me, my moka pot is useless. Without my moka pot, I am useless. I must maintain my moka pot thoroughly. I must grind better than the epsresso machine, who is trying to put us down. I must brew before he brews me. I will. Before God I swear this creed: my moka pot and myself are defenders of the love for coffee, we are the masters of espresso, we are the saviors of my tastebuds. So be it, until there is no tea, but coffee. Amen.

    I have always been attracted to simple, robust and portable things I can bring on the trip and use anywhere. My Macbook is one of those things, so is my Victorinox knife, Hagor bag, and Certina wrist watch. There is something with these kind of objects — you get quite attached to them in a special way. Is it because of their history or function, or is it because of the simple philosophy behind their design?

    I received a moka pot from my uncle for Christmas two years ago. On the card it said: “Sometime you’ve got to learn” (to drink coffee, that is). I wasn’t into coffee back then, but during my year in Canada I worked at Starbucks. Funny, huh? Now I’m really a coffee enthusiast and started using my moka pot for real. I can’t love it more than I do. Moka drawing

    With only three essential parts, the moka pot is very easy to clean and maintain. Image from Wikipedia.

    Design

    First, it’s the construction of the pot. Its almost-symmetric hour glass design with iconic octagonal shapes is a joy to study, and even nicer to use. When it’s finished brewing and you’re pouring the coffee, a thin, elegant stream of pitch black wonder is coming out of the pipe. By pitch black, I mean pitch black, as coffee should be. The figure to the left describes the different parts of a moka pot. Essentially, we’ve got the water chamber (A), the coffee filter (B), and the coffee chamber (C). Three is a magic number. If you watch the figure you really notice the pot’s symetrical beauty — even on the inside. On the bottom of the coffee chamber (C) there’s another filter with a rubber seal around it, so no steam can get in the chamber but through the grinded coffee. On one of the water chamber’s walls there’s a safety valve, which should not be blocked. Because we’re dealing with pressure and steam here, we need a safety valve to release some steam if the pressure would be too much inside the water chamber. One other thing that really appeals to me is the material. Mine is made in aluminium with an ABS plastic handle. It’s elegant without being to shiny and uber-modern. To me it speaks sturdiness and “trust me”-ness (very much alike Apple’s line of Macbooks). Espresso

    How it works

    The principal behind the moka brewing process is quite similar in theory to the espresso machine. It’s not like drip coffee or the french press, where the coffee is sort of steeping in water — moka pots and espresso machines are working with steam, baby. When the water in the lower chamber is heated, it’ll eventually start boiling. Steam is produced. After a while there will be a lot of steam in the chamber, and it’ll push the remaining water down. The water is forced to go somewhere – up through the filter pipe, through the coffee and out through the small chimney in the coffee chamber. It’s sort of a simplified espresso machine, but doesn’t deal with as high water pressure though. Thanks to the quick process and pressure involved, more caffeine and flavour is extracted out of the coffee grounds than with regular drip coffee.

    Philosophy

    The moka pot is simply constructed, cheap, easy to use and bring with you — everything an espresso machine isn’t. I’m so fascinated by the simplistic design and I love my moka because of the robust construction — it’s just raw metal with very few small, movable parts. Compare it to an old Volvo car, or a kalashnikov rifle: both works almost anywhere and has a very rough construction, a very straight-forward design which is easy to maintain. After usage, just screw it apart and rinse the parts in warm water, then let dry. The only thing you need with this moka pot (and other coffee making pots as well) is water, grinded coffee and a heat source.

    How to make it

    It’s dead simple to make moka coffee. Start with using great dark roast, espresso grinded coffee. You can buy it anywhere, even your local grocery store. However, to get the best quality, consider a visit to a coffee or speciality shop.

    1. Put the coffee in the filter (B). Be quite generous, but do not tamp it! Just shake the filter a bit so the coffee is evenly distributed. I can highly recommend mixing some crushed cardamom seeds in it. Just a couple is needed. It’ll produce a little more tasting coffee, and with some cinnamon on the top you’re in nirvana.
    2. Fill the water chamber (A) with cold water up to the security valve
    3. Put the filter on top of the water chamber (make sure the coffee grounds are where they should be — inside the filter) and screw the coffee chamber (C) on top. You don’t want any steam to leak, so make sure the coffee chamber is really tight.
    4. Put the moka pot on the stove. It usually takes around 4 minutes for the water to start boiling and produce steam. When you’re starting to hear the water boiling it’s time to pay a bit of attention. If you lift the top lid you’ll see when the coffee is coming up (like a volcano, it’s actually quite cool). With my moka pot it usually takes around 30 seconds for the coffee to fill the top chamber, but I remove the pot from the heat source before that happens. That’s because you don’t want your coffee diluted with regular water or steam which will start to come out of the chimney in the end of the process.
    5. All done! Enjoy the coffee in small espresso sized cups, in larger cappuccino cups with some milk (to really bring out the underlying flavours), or together with steamed milk — latte or cappuccino style.

    The moka pot is often called “poor man’s espresso”, because it’s way more affordable than a real espresso machine. However, the coffee you get out of a moka is very similar in strength and taste to “real” espresso coffee. Almost every home in Italy got a moka pot. An unfair statement would be that espresso machines are in higher regard becasuse of the skill involved in the process of pulling the perfect shot of espresso — that these machines only are intended for an elite. Personally, I actually prefer my moka pot before my father’s espresso machine. Even though I’ve worked in a coffee shop I find the machine quite tedious to work with, and if you don’t pay attention, you might get really bad tasting espresso (which ruins the whole drink).

    Outro

    The ultimate thing would be to make the whole process “by hand”. Getting whole espresso beans and grinding them yourself, heat the water on a wood stove and then steam fresh cow or goat milk. That’s handmade stuff you don’t see too much of nowadays, in our fast-paced society. We tend to forget the quality and freshness of our food. Everything should be able to do anything. The moka pot does one thing, and it does it well: making great coffee. Moka

    \ No newline at end of file +A Simple Icon / Johan Brook

    A Simple Icon

    About 5 min reading time

    This is my moka pot. There are many others like it, but this one is mine. My moka pot is my best friend. It is my life. I must master it as I must master my life. Without me, my moka pot is useless. Without my moka pot, I am useless. I must maintain my moka pot thoroughly. I must grind better than the epsresso machine, who is trying to put us down. I must brew before he brews me. I will. Before God I swear this creed: my moka pot and myself are defenders of the love for coffee, we are the masters of espresso, we are the saviors of my tastebuds. So be it, until there is no tea, but coffee. Amen.

    I have always been attracted to simple, robust and portable things I can bring on the trip and use anywhere. My Macbook is one of those things, so is my Victorinox knife, Hagor bag, and Certina wrist watch. There is something with these kind of objects — you get quite attached to them in a special way. Is it because of their history or function, or is it because of the simple philosophy behind their design?

    I received a moka pot from my uncle for Christmas two years ago. On the card it said: “Sometime you’ve got to learn” (to drink coffee, that is). I wasn’t into coffee back then, but during my year in Canada I worked at Starbucks. Funny, huh? Now I’m really a coffee enthusiast and started using my moka pot for real. I can’t love it more than I do. Moka drawing

    With only three essential parts, the moka pot is very easy to clean and maintain. Image from Wikipedia.

    Design

    First, it’s the construction of the pot. Its almost-symmetric hour glass design with iconic octagonal shapes is a joy to study, and even nicer to use. When it’s finished brewing and you’re pouring the coffee, a thin, elegant stream of pitch black wonder is coming out of the pipe. By pitch black, I mean pitch black, as coffee should be. The figure to the left describes the different parts of a moka pot. Essentially, we’ve got the water chamber (A), the coffee filter (B), and the coffee chamber (C). Three is a magic number. If you watch the figure you really notice the pot’s symetrical beauty — even on the inside. On the bottom of the coffee chamber (C) there’s another filter with a rubber seal around it, so no steam can get in the chamber but through the grinded coffee. On one of the water chamber’s walls there’s a safety valve, which should not be blocked. Because we’re dealing with pressure and steam here, we need a safety valve to release some steam if the pressure would be too much inside the water chamber. One other thing that really appeals to me is the material. Mine is made in aluminium with an ABS plastic handle. It’s elegant without being to shiny and uber-modern. To me it speaks sturdiness and “trust me”-ness (very much alike Apple’s line of Macbooks). Espresso

    How it works

    The principal behind the moka brewing process is quite similar in theory to the espresso machine. It’s not like drip coffee or the french press, where the coffee is sort of steeping in water — moka pots and espresso machines are working with steam, baby. When the water in the lower chamber is heated, it’ll eventually start boiling. Steam is produced. After a while there will be a lot of steam in the chamber, and it’ll push the remaining water down. The water is forced to go somewhere – up through the filter pipe, through the coffee and out through the small chimney in the coffee chamber. It’s sort of a simplified espresso machine, but doesn’t deal with as high water pressure though. Thanks to the quick process and pressure involved, more caffeine and flavour is extracted out of the coffee grounds than with regular drip coffee.

    Philosophy

    The moka pot is simply constructed, cheap, easy to use and bring with you — everything an espresso machine isn’t. I’m so fascinated by the simplistic design and I love my moka because of the robust construction — it’s just raw metal with very few small, movable parts. Compare it to an old Volvo car, or a kalashnikov rifle: both works almost anywhere and has a very rough construction, a very straight-forward design which is easy to maintain. After usage, just screw it apart and rinse the parts in warm water, then let dry. The only thing you need with this moka pot (and other coffee making pots as well) is water, grinded coffee and a heat source.

    How to make it

    It’s dead simple to make moka coffee. Start with using great dark roast, espresso grinded coffee. You can buy it anywhere, even your local grocery store. However, to get the best quality, consider a visit to a coffee or speciality shop.

    1. Put the coffee in the filter (B). Be quite generous, but do not tamp it! Just shake the filter a bit so the coffee is evenly distributed. I can highly recommend mixing some crushed cardamom seeds in it. Just a couple is needed. It’ll produce a little more tasting coffee, and with some cinnamon on the top you’re in nirvana.
    2. Fill the water chamber (A) with cold water up to the security valve
    3. Put the filter on top of the water chamber (make sure the coffee grounds are where they should be — inside the filter) and screw the coffee chamber (C) on top. You don’t want any steam to leak, so make sure the coffee chamber is really tight.
    4. Put the moka pot on the stove. It usually takes around 4 minutes for the water to start boiling and produce steam. When you’re starting to hear the water boiling it’s time to pay a bit of attention. If you lift the top lid you’ll see when the coffee is coming up (like a volcano, it’s actually quite cool). With my moka pot it usually takes around 30 seconds for the coffee to fill the top chamber, but I remove the pot from the heat source before that happens. That’s because you don’t want your coffee diluted with regular water or steam which will start to come out of the chimney in the end of the process.
    5. All done! Enjoy the coffee in small espresso sized cups, in larger cappuccino cups with some milk (to really bring out the underlying flavours), or together with steamed milk — latte or cappuccino style.

    The moka pot is often called “poor man’s espresso”, because it’s way more affordable than a real espresso machine. However, the coffee you get out of a moka is very similar in strength and taste to “real” espresso coffee. Almost every home in Italy got a moka pot. An unfair statement would be that espresso machines are in higher regard becasuse of the skill involved in the process of pulling the perfect shot of espresso — that these machines only are intended for an elite. Personally, I actually prefer my moka pot before my father’s espresso machine. Even though I’ve worked in a coffee shop I find the machine quite tedious to work with, and if you don’t pay attention, you might get really bad tasting espresso (which ruins the whole drink).

    Outro

    The ultimate thing would be to make the whole process “by hand”. Getting whole espresso beans and grinding them yourself, heat the water on a wood stove and then steam fresh cow or goat milk. That’s handmade stuff you don’t see too much of nowadays, in our fast-paced society. We tend to forget the quality and freshness of our food. Everything should be able to do anything. The moka pot does one thing, and it does it well: making great coffee. Moka

    \ No newline at end of file diff --git a/writings/a-simpler-css3-gradient-syntax/index.html b/writings/a-simpler-css3-gradient-syntax/index.html index 0b33f9a3e..375e2422a 100644 --- a/writings/a-simpler-css3-gradient-syntax/index.html +++ b/writings/a-simpler-css3-gradient-syntax/index.html @@ -1,3 +1,3 @@ A simpler CSS3 Gradient syntax / Johan Brook

    A simpler CSS3 Gradient syntax

    About 1 min reading time

    Follow link to webkit.org →

    The syntax for CSS3 Gradients has in Webkit been something of a pain, frankly. I prefer Gecko’s more straight-forward version, but since I’m using Sass with its mixins, it’s not a huge deal. In a blog post posted today, the Webkit team describes a new simpler gradient syntax. The old one dealt with percent values, it wasn’t very liberal with the order of the arguments, and so on. Here’s an example of the new syntax for a linear gradient:

    -webkit-linear-gradient(left, white, black)

    Quite nice, huh? Simple, straight-forward, fully readable. The present syntax would be

    -webkit-gradient(linear, left top, right bottom, from(black), to(white));
-

    The Webkit engine takes four gradient functions:

    • linear-gradient()
    • radial-gradient()
    • repeating-linear-gradient()
    • repeating-radial-gradient()

    This is more like the Mozilla’s implementation where you specify the type (linear, radial etc.) in the function name itself, not as an argument. Even the radial-gradient function is easier to actually write from memory now. This new syntax is available in the latest Webkit nightly build, and there’s no word on when it’ll be usable in Safari or Chrome. We’ll see. Anyway, great work, Webkit team!

    \ No newline at end of file +

    The Webkit engine takes four gradient functions:

    • linear-gradient()
    • radial-gradient()
    • repeating-linear-gradient()
    • repeating-radial-gradient()

    This is more like the Mozilla’s implementation where you specify the type (linear, radial etc.) in the function name itself, not as an argument. Even the radial-gradient function is easier to actually write from memory now. This new syntax is available in the latest Webkit nightly build, and there’s no word on when it’ll be usable in Safari or Chrome. We’ll see. Anyway, great work, Webkit team!

    \ No newline at end of file diff --git a/writings/a-symbol-for-sex/index.html b/writings/a-symbol-for-sex/index.html index af92fece4..8c00ebd8a 100644 --- a/writings/a-symbol-for-sex/index.html +++ b/writings/a-symbol-for-sex/index.html @@ -1 +1 @@ -A symbol for sex / Johan Brook

    A symbol for sex

    About 2 min reading time

    “What is an appropriate symbol for sex?”. The question I asked myself some time ago might seem somewhat trivial at first, but when you dig deeper, it reveals a bunch of sub-questions and scenarios.

    The project I worked with was Spotimood, and I was in the process of creating/finding icons for the different activities. I came to “sex”. My absolutely first initial thought was going with the old male/female symbol:

    Male/female

    But this isn’t cutting it. Sex isn’t about just a male and a female person (hetero). This symbol alienates a bunch of groups of people. I did some googling and surprisingly didn’t find much noteworthy written information about a universal icon or symbol for the sex act.

    This was some time ago, and I’m afraid I didn’t document my process of finding the symbol, so let’s take a jump in time to the final result I ended up with. In all sorts of design (software, UI, graphical) it’s vital to simplify. Complicated designs are to me evil and un-human. Reduce lines, reduce shapes, reduce the visual impression to its core values. That’s what I did.

    I imagined the act itself. What is sex? It’s not only for procreation these days, so babies in the symbol was a no-no. Further it’s not only about love either, so I couldn’t bring in any heart icons or that kind of stuff. In order to create a symbol which alienates no one, I had to go very abstract: no gender specific icons, since it would be a ton of more work to incorporate every sexual orientation. To me, sex is about being one. It’s one of the unique things we share with animals in nature. In the act, we are physically and mentally so close to each other, which doesn’t exist in any other part of daily life or society.

    Sex symbol

    The above result is the most simple and abstract symbol for sex I could come up with.

    A breakdown:

    • A circle is to me a symbol for life.
    • Two almost connected circles stands for two individuals being close to one, but still being separate.
    • The two circles are equal, since the participants in the act should be just that.
    • If the act is about procreation, the circles symbolize the process of the sperm and the egg fusing into one.
    • The circle intersection is about surrendering and sharing a part of yourself to another person, since the act is about giving and taking.

    On top of all the high-level speak above, I find the symbol attractive, meaningful and simple.

    \ No newline at end of file +A symbol for sex / Johan Brook

    A symbol for sex

    About 2 min reading time

    “What is an appropriate symbol for sex?”. The question I asked myself some time ago might seem somewhat trivial at first, but when you dig deeper, it reveals a bunch of sub-questions and scenarios.

    The project I worked with was Spotimood, and I was in the process of creating/finding icons for the different activities. I came to “sex”. My absolutely first initial thought was going with the old male/female symbol:

    Male/female

    But this isn’t cutting it. Sex isn’t about just a male and a female person (hetero). This symbol alienates a bunch of groups of people. I did some googling and surprisingly didn’t find much noteworthy written information about a universal icon or symbol for the sex act.

    This was some time ago, and I’m afraid I didn’t document my process of finding the symbol, so let’s take a jump in time to the final result I ended up with. In all sorts of design (software, UI, graphical) it’s vital to simplify. Complicated designs are to me evil and un-human. Reduce lines, reduce shapes, reduce the visual impression to its core values. That’s what I did.

    I imagined the act itself. What is sex? It’s not only for procreation these days, so babies in the symbol was a no-no. Further it’s not only about love either, so I couldn’t bring in any heart icons or that kind of stuff. In order to create a symbol which alienates no one, I had to go very abstract: no gender specific icons, since it would be a ton of more work to incorporate every sexual orientation. To me, sex is about being one. It’s one of the unique things we share with animals in nature. In the act, we are physically and mentally so close to each other, which doesn’t exist in any other part of daily life or society.

    Sex symbol

    The above result is the most simple and abstract symbol for sex I could come up with.

    A breakdown:

    • A circle is to me a symbol for life.
    • Two almost connected circles stands for two individuals being close to one, but still being separate.
    • The two circles are equal, since the participants in the act should be just that.
    • If the act is about procreation, the circles symbolize the process of the sperm and the egg fusing into one.
    • The circle intersection is about surrendering and sharing a part of yourself to another person, since the act is about giving and taking.

    On top of all the high-level speak above, I find the symbol attractive, meaningful and simple.

    \ No newline at end of file diff --git a/writings/a-typographic-poster/index.html b/writings/a-typographic-poster/index.html index eb16a1abe..38dd822a4 100644 --- a/writings/a-typographic-poster/index.html +++ b/writings/a-typographic-poster/index.html @@ -1 +1 @@ -A typographic poster / Johan Brook

    A typographic poster

    About 1 min reading time

    Follow link to underconsideration.com →

    A beautiful letterpress poster with terms from the typographic language. It looks really genuine and handmade. All 100 copies are unfortunately sold out though.

    \ No newline at end of file +A typographic poster / Johan Brook

    A typographic poster

    About 1 min reading time

    Follow link to underconsideration.com →

    A beautiful letterpress poster with terms from the typographic language. It looks really genuine and handmade. All 100 copies are unfortunately sold out though.

    \ No newline at end of file diff --git a/writings/a-word-about-testing-code/index.html b/writings/a-word-about-testing-code/index.html index a5086aa39..d8e9a79f2 100644 --- a/writings/a-word-about-testing-code/index.html +++ b/writings/a-word-about-testing-code/index.html @@ -1 +1 @@ -A word about testing code / Johan Brook

    A word about testing code

    About 1 min reading time

    Follow link to 37signals.com →

    If you’re doing the right amount of testing, there should be a good chance, whenever you kick off a test run, that your actions for the next hour will change depending on the results of the run. If you typically don’t change your actions based on the information from the tests, then the effort spent to write tests gathering that information was wasted.

    Comment from the HN thread of the linked article ( Permalink) David Heinemeier Hansson writes about sane amounts of software tests, which he ranted a bit about on Twitter today. I haven’t enough experience with tests yet, so I can’t give valid comments, but I’ve begun to understand what he and others are talking about thanks to a heavy focus on unit tests in a university course. Putting tons of time on writing tests instead of actual code seem insane to me, and David’s thoughts about having advice on what not to test seems legit to me (I recommend reading the comments on the Hacker News entry as well).

    In the end I think it boils down to a healthy balance, as with everything else in life.

    \ No newline at end of file +A word about testing code / Johan Brook

    A word about testing code

    About 1 min reading time

    Follow link to 37signals.com →

    If you’re doing the right amount of testing, there should be a good chance, whenever you kick off a test run, that your actions for the next hour will change depending on the results of the run. If you typically don’t change your actions based on the information from the tests, then the effort spent to write tests gathering that information was wasted.

    Comment from the HN thread of the linked article ( Permalink) David Heinemeier Hansson writes about sane amounts of software tests, which he ranted a bit about on Twitter today. I haven’t enough experience with tests yet, so I can’t give valid comments, but I’ve begun to understand what he and others are talking about thanks to a heavy focus on unit tests in a university course. Putting tons of time on writing tests instead of actual code seem insane to me, and David’s thoughts about having advice on what not to test seems legit to me (I recommend reading the comments on the Hacker News entry as well).

    In the end I think it boils down to a healthy balance, as with everything else in life.

    \ No newline at end of file diff --git a/writings/about-guys-who-fix-stuff/index.html b/writings/about-guys-who-fix-stuff/index.html index 9aee90596..93a0971bf 100644 --- a/writings/about-guys-who-fix-stuff/index.html +++ b/writings/about-guys-who-fix-stuff/index.html @@ -1 +1 @@ -About guys who fix stuff / Johan Brook

    About guys who fix stuff

    About 2 min reading time

    In school, we recently finished a project in the GUI design course, where we (a group of four people) built an application for grocery shopping, aimed towards elderly people. The tools were quite horrible: Java, Swing, Netbeans, and the currently deprecated Swing Application Framework. In two weeks, a working prototype had to be finished, and for freshmen who just had taken an autumn of two introductory courses in Java, it seemed a bit harsh. After all, the course is about “GUI design” — that doesn’t ring very well together with “Java” and “Swing”.

    Anyway, there were four of us, building this application. Everything went very well in my opinion: through the sketches, paper prototype, user testings and finally software prototype we discussed, developed, and weighed different options. Really interesting process. We had big visions about the application’s interface features, but there was this nagging thing in my head saying that it would be hard pulling off all these things in Java and Swing. This ain’t no flexible HTML/CSS/JS, nor fancy Objective-C/Cocoa. In this case, all my skills as a web developer almost counted for nothing. Animation in Swing? I had no bloody clue how to pull that off. Showing/hiding panels? Nope. Fading, tweening, navigational patterns? Hell no. Since I’ve been working solo for some time, I instinctively started to plot things up in my head, but we divided the tasks among us, and each of us set for home with our stuff.

    Here’s the reason for this post. I had relinquished control over some key features (very unlike me) and trusted the others. And it worked. The next day, a member in the group came and casually said: “– Um, that sliding modal overlay panel we talked about - I fixed it last night. It’s pretty cool now”. I was really happy then. It was exactly as we had pictured the panel in the mockups. I never would have done it better myself (with some time perhaps). This guy just solved the problem I had been worried about for some time, and it felt great receiving those news.

    The moral of the story is that these guys who fix stuff is worth their weight in gold. I realized I’ve been that guy for many, but I experienced it myself in this project. It’s wonderful to be able to hand a problem to a person and know that they’ll go to hell and back again just to solve the bloody problem.

    They are the real programmers — stubborn, eager, and thirsty for knowledge, glory and awesome code.

    \ No newline at end of file +About guys who fix stuff / Johan Brook

    About guys who fix stuff

    About 2 min reading time

    In school, we recently finished a project in the GUI design course, where we (a group of four people) built an application for grocery shopping, aimed towards elderly people. The tools were quite horrible: Java, Swing, Netbeans, and the currently deprecated Swing Application Framework. In two weeks, a working prototype had to be finished, and for freshmen who just had taken an autumn of two introductory courses in Java, it seemed a bit harsh. After all, the course is about “GUI design” — that doesn’t ring very well together with “Java” and “Swing”.

    Anyway, there were four of us, building this application. Everything went very well in my opinion: through the sketches, paper prototype, user testings and finally software prototype we discussed, developed, and weighed different options. Really interesting process. We had big visions about the application’s interface features, but there was this nagging thing in my head saying that it would be hard pulling off all these things in Java and Swing. This ain’t no flexible HTML/CSS/JS, nor fancy Objective-C/Cocoa. In this case, all my skills as a web developer almost counted for nothing. Animation in Swing? I had no bloody clue how to pull that off. Showing/hiding panels? Nope. Fading, tweening, navigational patterns? Hell no. Since I’ve been working solo for some time, I instinctively started to plot things up in my head, but we divided the tasks among us, and each of us set for home with our stuff.

    Here’s the reason for this post. I had relinquished control over some key features (very unlike me) and trusted the others. And it worked. The next day, a member in the group came and casually said: “– Um, that sliding modal overlay panel we talked about - I fixed it last night. It’s pretty cool now”. I was really happy then. It was exactly as we had pictured the panel in the mockups. I never would have done it better myself (with some time perhaps). This guy just solved the problem I had been worried about for some time, and it felt great receiving those news.

    The moral of the story is that these guys who fix stuff is worth their weight in gold. I realized I’ve been that guy for many, but I experienced it myself in this project. It’s wonderful to be able to hand a problem to a person and know that they’ll go to hell and back again just to solve the bloody problem.

    They are the real programmers — stubborn, eager, and thirsty for knowledge, glory and awesome code.

    \ No newline at end of file diff --git a/writings/add-delight-to-web-forms-with-code-sample/index.html b/writings/add-delight-to-web-forms-with-code-sample/index.html index c55281de9..a50af6244 100644 --- a/writings/add-delight-to-web-forms-with-code-sample/index.html +++ b/writings/add-delight-to-web-forms-with-code-sample/index.html @@ -18,4 +18,4 @@ $("#city").val(json[0]).select(); }); }); -

    As you can see I’m using jQuery in this example. A simple blur event is binded to the postal code field, and the API URL is defined. Note the ?callback=? piece, which tells the jQuery XHR to treat the call as JSONP (read more in the API).

    I also removed whitespace in the postal code (some people may write it as “810 20”, and others “81020″) since I discovered the API didn’t like the whitespace formatted version (even though it’s URI encoded).

    The XHR call is made with $.getJSON specifying the postal code as query parameter. A JSON object is returned in the success callback and then I put it in the city field. In this case the JSON consisted of an array — hence the json[0] construct — and I want the first (and only) value of that array. Lastly I made sure to select/highlight the input field with select() to provide a quick way for the visitor to erase the city name if it’s incorrect.

    Try it out:

    Postal code

    City

    (As mentioned, it’s only taking Swedish postal codes. Try “810 20” and “810 22″, as an example).

    Neat, isn’t it? Thanks to jQuery and the simplicity of the postal code API, we have created this great UX feature just in a couple of lines of code. It’s easy for the visitor to get around (just erase the selected city suggestion) and it degrades well (there are no vital features depending on Javascript here).

    Outro

    When building forms: put some effort into it, and use your fantasy. “How could I make this super boring form really awesome, easy, and even fun to fill in?”. Add delight, but don’t get in the visitor’s way. Add helpful validation messages, and other help text without bloating the whitespace. Form building is truly a form of art, therefore: iterate, iterate, iterate.

    \ No newline at end of file +

    As you can see I’m using jQuery in this example. A simple blur event is binded to the postal code field, and the API URL is defined. Note the ?callback=? piece, which tells the jQuery XHR to treat the call as JSONP (read more in the API).

    I also removed whitespace in the postal code (some people may write it as “810 20”, and others “81020″) since I discovered the API didn’t like the whitespace formatted version (even though it’s URI encoded).

    The XHR call is made with $.getJSON specifying the postal code as query parameter. A JSON object is returned in the success callback and then I put it in the city field. In this case the JSON consisted of an array — hence the json[0] construct — and I want the first (and only) value of that array. Lastly I made sure to select/highlight the input field with select() to provide a quick way for the visitor to erase the city name if it’s incorrect.

    Try it out:

    Postal code

    City

    (As mentioned, it’s only taking Swedish postal codes. Try “810 20” and “810 22″, as an example).

    Neat, isn’t it? Thanks to jQuery and the simplicity of the postal code API, we have created this great UX feature just in a couple of lines of code. It’s easy for the visitor to get around (just erase the selected city suggestion) and it degrades well (there are no vital features depending on Javascript here).

    Outro

    When building forms: put some effort into it, and use your fantasy. “How could I make this super boring form really awesome, easy, and even fun to fill in?”. Add delight, but don’t get in the visitor’s way. Add helpful validation messages, and other help text without bloating the whitespace. Form building is truly a form of art, therefore: iterate, iterate, iterate.

    \ No newline at end of file diff --git a/writings/adding-custom-url-endpoints-in-wordpress/index.html b/writings/adding-custom-url-endpoints-in-wordpress/index.html index 9219462ce..9b70b7655 100644 --- a/writings/adding-custom-url-endpoints-in-wordpress/index.html +++ b/writings/adding-custom-url-endpoints-in-wordpress/index.html @@ -42,4 +42,4 @@ return $templates; } -

    I’ve hard coded the file photos.php above. Create this file in the theme folder, and you’re all set! In this template you’ve got access to the global $post variable, so you’re able to pull in all kinds of post data into it.

    Outro

    Pretty cool to bend Wordpress to your will, eh? I can imagine this functionality is pretty nifty to have when doing more advanced things in Wordpress.

    \ No newline at end of file +

    I’ve hard coded the file photos.php above. Create this file in the theme folder, and you’re all set! In this template you’ve got access to the global $post variable, so you’re able to pull in all kinds of post data into it.

    Outro

    Pretty cool to bend Wordpress to your will, eh? I can imagine this functionality is pretty nifty to have when doing more advanced things in Wordpress.

    \ No newline at end of file diff --git a/writings/adobe-shadow-device-preview-and-debugging/index.html b/writings/adobe-shadow-device-preview-and-debugging/index.html index 5482b70ae..e2818aef5 100644 --- a/writings/adobe-shadow-device-preview-and-debugging/index.html +++ b/writings/adobe-shadow-device-preview-and-debugging/index.html @@ -1 +1 @@ -Adobe Shadow – Device preview and debugging / Johan Brook

    Adobe Shadow – Device preview and debugging

    About 1 min reading time

    Follow link to labs.adobe.com →

    Shadow Adobe takes a lot of crap for making half-assed attempts on winning back the favor of the HTML/CSS people, now when Flash probably has seen its glory days. But this Adobe Shadow looks really, really cool.

    It’s basically a tool for previewing your web designs on a mobile device, such as the iPad or iPhone. Your pair the device via a native app with your computer, and while your switching tabs and even writing new code, the web view will refresh automatically on the device. It looks incredibly handy. It even supports debugging with a web inspector on the mobile device (finally!), so you’ll be able to pin down exactly what’s happening on the other end.

    Check out the video demo. I haven’t tried it yet, but it’s surely a nice idea of Adobe.

    \ No newline at end of file +Adobe Shadow – Device preview and debugging / Johan Brook

    Adobe Shadow – Device preview and debugging

    About 1 min reading time

    Follow link to labs.adobe.com →

    Shadow Adobe takes a lot of crap for making half-assed attempts on winning back the favor of the HTML/CSS people, now when Flash probably has seen its glory days. But this Adobe Shadow looks really, really cool.

    It’s basically a tool for previewing your web designs on a mobile device, such as the iPad or iPhone. Your pair the device via a native app with your computer, and while your switching tabs and even writing new code, the web view will refresh automatically on the device. It looks incredibly handy. It even supports debugging with a web inspector on the mobile device (finally!), so you’ll be able to pin down exactly what’s happening on the other end.

    Check out the video demo. I haven’t tried it yet, but it’s surely a nice idea of Adobe.

    \ No newline at end of file diff --git a/writings/advice-for-university-students-im-not-as-smart-as-i-thought-i-was/index.html b/writings/advice-for-university-students-im-not-as-smart-as-i-thought-i-was/index.html index 4c1715dd6..21a221a31 100644 --- a/writings/advice-for-university-students-im-not-as-smart-as-i-thought-i-was/index.html +++ b/writings/advice-for-university-students-im-not-as-smart-as-i-thought-i-was/index.html @@ -1 +1 @@ -Advice for university students: "I'm not as smart as I thought I was" / Johan Brook

    Advice for university students: "I'm not as smart as I thought I was"

    About 1 min reading time

    Follow link to reddit.com →

    The students that are successful look at that challenge, wrestle with feelings of inadequacy and stupidity, and begin to take steps hiking that mountain, knowing that bruised pride is a small price to pay for getting to see the view from the top. They ask for help, they acknowledge their inadequacies. They don’t blame their lack of intelligence, they blame their lack of motivation. Great text from an MIT grad about the challenges and feelings during his freshman year at MIT. Many wise quotes.

    \ No newline at end of file +Advice for university students: "I'm not as smart as I thought I was" / Johan Brook

    Advice for university students: "I'm not as smart as I thought I was"

    About 1 min reading time

    Follow link to reddit.com →

    The students that are successful look at that challenge, wrestle with feelings of inadequacy and stupidity, and begin to take steps hiking that mountain, knowing that bruised pride is a small price to pay for getting to see the view from the top. They ask for help, they acknowledge their inadequacies. They don’t blame their lack of intelligence, they blame their lack of motivation. Great text from an MIT grad about the challenges and feelings during his freshman year at MIT. Many wise quotes.

    \ No newline at end of file diff --git a/writings/after-hours/index.html b/writings/after-hours/index.html index 30e05d6f9..14842ac0d 100644 --- a/writings/after-hours/index.html +++ b/writings/after-hours/index.html @@ -1 +1 @@ -After Hours / Johan Brook

    After Hours

    About 2 min reading time

    Every person’s sleeping habits are different. You’ve heard about morning persons and evening persons, and some of that comes from the genes, I’d guess, and maybe some from practice. I remember in school how some people were just sleep-walking zombies in the morning — it was sometimes totally impossible for them to get up for the early classes. Other guys and girls couldn’t stay up too late in the evening since they were completely out of energy (aka. “party poopers”).

    I think I’m some sort of weird mixture of both. I can, for most of the times, get up relatively early in the morning and stay up way too late. Staying up late through midnight and early morning hours is sort of frowned upon in society. I state, “the night belongs to the poets and the mad men”.

    Sleeping Tiger

    What works for you?

    Instead of feeling bad over staying up and doing whatever you’re doing (work, play, or neither) you should try to figure out what’s best for you. Are you forcing yourself to go to bed semi-early to be able to get up in the morning light and “cease the day”? What if you’re most creative during the night? That’s the case with me, actually. The work I’ve created and am most proud of has been made during the night. I don’t really have a scientific explanation (of course) for that, but I’d guess it’s because of the lack of distracting elements. Think of it:

    • Most people have gone to bed by then (less e-mails, tweets, phone calls, Facebook statuses, news)
    • The outside daylight doesn’t lure you out “just for a few minutes”
    • It’s something special working alone in the dark, completely absorbed by the task

    This is how it works for me. Since I’m often tempted by other things during the day I find the night completely void and perfect for working. In school I produced the best work during the late night, and I think that could be traced to pressure: in the night you’ve got limited time (yeah, in the day as well, but it’s more apparent during the night) to finish your task. It “feels” like it’s urgent and you tend to work faster and more effective.

    Finding your rhythm

    I’m sure you’ve heard that they recommend an adult person to sleep around 7-8 hours during the night. The thing is, you don’t always have to sleep them in one run, as to speak. You may distribute those eight hours over the day as well, so why not take a nap once or twice during the afternoon? It was just recently I got into my rhythm:

    • Waking up around 9.00-9.30. Don’t be too ambitious and set the alarm too early, but on the other hand I personally hate sleeping too long.
    • Having breakfast, reading news, Twitter etc. Starting to work around 10.00.
    • Working through the afternoon with a break outside for some fresh air (huge recommendation).
    • After supper, continue working through the evening onto around 01.00-02.00. Going to bed. Repeating.

    See? I often collect my eight hours without rising up from bed in an ungodly hour. Do what feels best — feeling most creative during nighttime? Go for it! Don’t waste it.

    \ No newline at end of file +After Hours / Johan Brook

    After Hours

    About 2 min reading time

    Every person’s sleeping habits are different. You’ve heard about morning persons and evening persons, and some of that comes from the genes, I’d guess, and maybe some from practice. I remember in school how some people were just sleep-walking zombies in the morning — it was sometimes totally impossible for them to get up for the early classes. Other guys and girls couldn’t stay up too late in the evening since they were completely out of energy (aka. “party poopers”).

    I think I’m some sort of weird mixture of both. I can, for most of the times, get up relatively early in the morning and stay up way too late. Staying up late through midnight and early morning hours is sort of frowned upon in society. I state, “the night belongs to the poets and the mad men”.

    Sleeping Tiger

    What works for you?

    Instead of feeling bad over staying up and doing whatever you’re doing (work, play, or neither) you should try to figure out what’s best for you. Are you forcing yourself to go to bed semi-early to be able to get up in the morning light and “cease the day”? What if you’re most creative during the night? That’s the case with me, actually. The work I’ve created and am most proud of has been made during the night. I don’t really have a scientific explanation (of course) for that, but I’d guess it’s because of the lack of distracting elements. Think of it:

    • Most people have gone to bed by then (less e-mails, tweets, phone calls, Facebook statuses, news)
    • The outside daylight doesn’t lure you out “just for a few minutes”
    • It’s something special working alone in the dark, completely absorbed by the task

    This is how it works for me. Since I’m often tempted by other things during the day I find the night completely void and perfect for working. In school I produced the best work during the late night, and I think that could be traced to pressure: in the night you’ve got limited time (yeah, in the day as well, but it’s more apparent during the night) to finish your task. It “feels” like it’s urgent and you tend to work faster and more effective.

    Finding your rhythm

    I’m sure you’ve heard that they recommend an adult person to sleep around 7-8 hours during the night. The thing is, you don’t always have to sleep them in one run, as to speak. You may distribute those eight hours over the day as well, so why not take a nap once or twice during the afternoon? It was just recently I got into my rhythm:

    • Waking up around 9.00-9.30. Don’t be too ambitious and set the alarm too early, but on the other hand I personally hate sleeping too long.
    • Having breakfast, reading news, Twitter etc. Starting to work around 10.00.
    • Working through the afternoon with a break outside for some fresh air (huge recommendation).
    • After supper, continue working through the evening onto around 01.00-02.00. Going to bed. Repeating.

    See? I often collect my eight hours without rising up from bed in an ungodly hour. Do what feels best — feeling most creative during nighttime? Go for it! Don’t waste it.

    \ No newline at end of file diff --git a/writings/anatomy-of-a-rails-rumble-project/index.html b/writings/anatomy-of-a-rails-rumble-project/index.html index 779fed65b..391f94251 100644 --- a/writings/anatomy-of-a-rails-rumble-project/index.html +++ b/writings/anatomy-of-a-rails-rumble-project/index.html @@ -1 +1 @@ -Anatomy of a Rails Rumble project / Johan Brook

    Anatomy of a Rails Rumble project

    About 1 min reading time

    Follow link to viget.com →

    Clinton Nixon talks about a couple of things regarding this year’s Railsrumble (in which yours truly participated along with a Rails developer). Nixon brings up Ruby 1.9, Rails 3, git, and other tools.

    \ No newline at end of file +Anatomy of a Rails Rumble project / Johan Brook

    Anatomy of a Rails Rumble project

    About 1 min reading time

    Follow link to viget.com →

    Clinton Nixon talks about a couple of things regarding this year’s Railsrumble (in which yours truly participated along with a Rails developer). Nixon brings up Ruby 1.9, Rails 3, git, and other tools.

    \ No newline at end of file diff --git a/writings/andy-clarkes-hardboiled-web-design-talk-from-dibi/index.html b/writings/andy-clarkes-hardboiled-web-design-talk-from-dibi/index.html index 52ea5570b..5fceb4748 100644 --- a/writings/andy-clarkes-hardboiled-web-design-talk-from-dibi/index.html +++ b/writings/andy-clarkes-hardboiled-web-design-talk-from-dibi/index.html @@ -1 +1 @@ -Andy Clarke's Hardboiled Web Design talk from DIBI / Johan Brook

    Andy Clarke's Hardboiled Web Design talk from DIBI

    About 1 min reading time

    Follow link to stuffandnonsense.co.uk →

    Most of the time we’re not heroes at all, most of the time we just whine about what we can’t do, rather than what we can do. Clarke’s talk about his brand new book on advanced CSS3 techniques: Hardboiled Web Design. I also recommend the accompanying  slides.

    \ No newline at end of file +Andy Clarke's Hardboiled Web Design talk from DIBI / Johan Brook

    Andy Clarke's Hardboiled Web Design talk from DIBI

    About 1 min reading time

    Follow link to stuffandnonsense.co.uk →

    Most of the time we’re not heroes at all, most of the time we just whine about what we can’t do, rather than what we can do. Clarke’s talk about his brand new book on advanced CSS3 techniques: Hardboiled Web Design. I also recommend the accompanying  slides.

    \ No newline at end of file diff --git a/writings/apples-java-in-os-x-106-is-now-deprecated/index.html b/writings/apples-java-in-os-x-106-is-now-deprecated/index.html index 50ab40a27..062a8828f 100644 --- a/writings/apples-java-in-os-x-106-is-now-deprecated/index.html +++ b/writings/apples-java-in-os-x-106-is-now-deprecated/index.html @@ -1 +1 @@ -Apple’s Java in OS X 10.6 is now deprecated / Johan Brook

    Apple’s Java in OS X 10.6 is now deprecated

    About 1 min reading time

    Follow link to developer.apple.com →

    As of the release of Java for Mac OS X 10.6 Update 3, the version of Java that is ported by Apple, and that ships with Mac OS X, is deprecated. This means that the Apple-produced runtime will not be maintained at the same level, and may be removed from future versions of Mac OS X. The Java runtime shipping in Mac OS X 10.6 Snow Leopard, and Mac OS X 10.5 Leopard, will continue to be supported and maintained through the standard support cycles of those products. Was just a matter of time, if you ask me.

    \ No newline at end of file +Apple’s Java in OS X 10.6 is now deprecated / Johan Brook

    Apple’s Java in OS X 10.6 is now deprecated

    About 1 min reading time

    Follow link to developer.apple.com →

    As of the release of Java for Mac OS X 10.6 Update 3, the version of Java that is ported by Apple, and that ships with Mac OS X, is deprecated. This means that the Apple-produced runtime will not be maintained at the same level, and may be removed from future versions of Mac OS X. The Java runtime shipping in Mac OS X 10.6 Snow Leopard, and Mac OS X 10.5 Leopard, will continue to be supported and maintained through the standard support cycles of those products. Was just a matter of time, if you ask me.

    \ No newline at end of file diff --git a/writings/autocomplete-in-textedit/index.html b/writings/autocomplete-in-textedit/index.html index facd62b05..600c3de6f 100644 --- a/writings/autocomplete-in-textedit/index.html +++ b/writings/autocomplete-in-textedit/index.html @@ -1 +1 @@ -Autocomplete in TextEdit / Johan Brook

    Autocomplete in TextEdit

    About 1 min reading time

    Follow link to minimalmac.com →

    Apparently there is an undocumented autocomplete feature in Apple’s TextEdit. Type some letters and hit the Escape key, and a list of suggestions will pop up. Pretty cool.

    \ No newline at end of file +Autocomplete in TextEdit / Johan Brook

    Autocomplete in TextEdit

    About 1 min reading time

    Follow link to minimalmac.com →

    Apparently there is an undocumented autocomplete feature in Apple’s TextEdit. Type some letters and hit the Escape key, and a list of suggestions will pop up. Pretty cool.

    \ No newline at end of file diff --git a/writings/backup-everything-my-backup-setup/index.html b/writings/backup-everything-my-backup-setup/index.html index d0939a2b0..54c542acb 100644 --- a/writings/backup-everything-my-backup-setup/index.html +++ b/writings/backup-everything-my-backup-setup/index.html @@ -1 +1 @@ -Backup everything – my backup setup / Johan Brook

    Backup everything – my backup setup

    About 3 min reading time

    Backups are important. Really, really important. They say if you don’t have two or more copies of a file, the file doesn’t exist. I had no backups whatsoever until a couple of weeks ago, when I thought to myself: “What would I do if my hard drive breaks? Would I do well losing years and years of work?”. Of course not! I really had to start securing and backing up my data, and what follows is a quick writeup on the process.

    Locally

    Time Machine

    This is the first obvious backup solution in OS X for the Average Joe. Time Machine works in the background and does everything for you. No fuzz or fine tuning. I’ve got a 1TB Iomega UltraMax Plus Desktop external hard drive in RAID1 mode (mirrored, that is) for complete backups of my files (no system files). Since Time Machine do most of the work (and doing it good so far) I couldn’t motivate getting another kind of backup software. It works seamlessly, and since the drive consists of two mirrored internal hard drives, all data is actually stored in two places for extra redundancy. Normally I don’t like putting an automated application in control over the backup of my precious files, but Time Machine “feels” good. Time Machine doesn’t only work as a safety net in the case of emergency — it’s great for simply archiving your files. You’re able to roll back and forth if you realize you accidently deleted that particular file earlier that day/week/month.

    Super Duper

    While Time Machine is great and all, it’s actually just for everyday backup of your files. What if you would like a complete, bootable copy of your entire hard drive? This is where Super Duper will help you. It’s a nifty app which lets you copy the contents of your hard drive to an external drive (ideally). I find it calming to know that I have a safety net if something would happen to my computer; like physical damage, theft or something else. Then it’s just a matter of booting from that Super Duper copy. Nifty.

    Offsite backup

    What if my house would be burnt down by fire, and my precious files would be lost on the external backup drive? (which I couldn’t save from the flames). What if a burglary would leave me with no computer or drive? Offiste, over-the-air backup comes to the resque. On the courtesy of Joacim Melin I have the privilege of using CrashPlan Pro. The Crashplan client constantly copies all new and updated files over the internet to a Crashplan server, securely storing my data offsite if something would happen.

    Dropbox

    Dropbox is a wonderful service, giving you free space to store small and large files in the cloud, and doing a great job syncing them between devices. I use Dropbox to store important files, such as text files and assets, which I might want to access from my iPhone on the go, or even a completely different computer. As long as I’ve got an internet connection I’m assured that the file I’m working with is saved and synced “up to the cloud”. An interesting solution by application developers is to store libraries and configuration files in the user’s Dropbox, making syncronization between devices seamless ( 1Password is a great example: my keychain library file is synced between the application on my Mac as well as on my iPhone — no hassle with tedious typing or duplicated entries). Also, Dropbox offers basic versioning for your files, with the ability to rollback changes. Great for backup.

    More

    When writing this post, I was inspired by this post by Shawn Blanc on backups in OS X as well as Frank Chimero’s thorough writeup on his backup setup.

    \ No newline at end of file +Backup everything – my backup setup / Johan Brook

    Backup everything – my backup setup

    About 3 min reading time

    Backups are important. Really, really important. They say if you don’t have two or more copies of a file, the file doesn’t exist. I had no backups whatsoever until a couple of weeks ago, when I thought to myself: “What would I do if my hard drive breaks? Would I do well losing years and years of work?”. Of course not! I really had to start securing and backing up my data, and what follows is a quick writeup on the process.

    Locally

    Time Machine

    This is the first obvious backup solution in OS X for the Average Joe. Time Machine works in the background and does everything for you. No fuzz or fine tuning. I’ve got a 1TB Iomega UltraMax Plus Desktop external hard drive in RAID1 mode (mirrored, that is) for complete backups of my files (no system files). Since Time Machine do most of the work (and doing it good so far) I couldn’t motivate getting another kind of backup software. It works seamlessly, and since the drive consists of two mirrored internal hard drives, all data is actually stored in two places for extra redundancy. Normally I don’t like putting an automated application in control over the backup of my precious files, but Time Machine “feels” good. Time Machine doesn’t only work as a safety net in the case of emergency — it’s great for simply archiving your files. You’re able to roll back and forth if you realize you accidently deleted that particular file earlier that day/week/month.

    Super Duper

    While Time Machine is great and all, it’s actually just for everyday backup of your files. What if you would like a complete, bootable copy of your entire hard drive? This is where Super Duper will help you. It’s a nifty app which lets you copy the contents of your hard drive to an external drive (ideally). I find it calming to know that I have a safety net if something would happen to my computer; like physical damage, theft or something else. Then it’s just a matter of booting from that Super Duper copy. Nifty.

    Offsite backup

    What if my house would be burnt down by fire, and my precious files would be lost on the external backup drive? (which I couldn’t save from the flames). What if a burglary would leave me with no computer or drive? Offiste, over-the-air backup comes to the resque. On the courtesy of Joacim Melin I have the privilege of using CrashPlan Pro. The Crashplan client constantly copies all new and updated files over the internet to a Crashplan server, securely storing my data offsite if something would happen.

    Dropbox

    Dropbox is a wonderful service, giving you free space to store small and large files in the cloud, and doing a great job syncing them between devices. I use Dropbox to store important files, such as text files and assets, which I might want to access from my iPhone on the go, or even a completely different computer. As long as I’ve got an internet connection I’m assured that the file I’m working with is saved and synced “up to the cloud”. An interesting solution by application developers is to store libraries and configuration files in the user’s Dropbox, making syncronization between devices seamless ( 1Password is a great example: my keychain library file is synced between the application on my Mac as well as on my iPhone — no hassle with tedious typing or duplicated entries). Also, Dropbox offers basic versioning for your files, with the ability to rollback changes. Great for backup.

    More

    When writing this post, I was inspired by this post by Shawn Blanc on backups in OS X as well as Frank Chimero’s thorough writeup on his backup setup.

    \ No newline at end of file diff --git a/writings/balancing-greatness/index.html b/writings/balancing-greatness/index.html index 0ca55508f..1fcfa3b0a 100644 --- a/writings/balancing-greatness/index.html +++ b/writings/balancing-greatness/index.html @@ -1 +1 @@ -Balancing personal energy and greatness in product design / Johan Brook

    Balancing personal energy and greatness in product design

    About 3 min reading time

    When coming fresh from school (if you went to one) as a programmer or designer in an early stage startup, chance is that you’re used to do things the right way when building.

    In lab assignments, there is often a single correct, fast, and beautiful solution to the problem at hand. Very little is left to “real world factors”. The only parallel with the real world would be that there’s a deadline to things, but other than that, the problem is usually well constrained, has a clear definition of done, and is quite isolated in the grand scheme of things. You bring that set of problem solving mindset with you, which of course is great and what you go to school for.

    Then in your first real world venture, you’re surrounded by tough sprint deadlines, performance problems you have no fucking idea about what they are, a not-so-perfect code base that should’ve been split up into proper abstractions several months ago. And other things. Like lack of automated testing, proper QA processes, and a list of Issues at GitHub which is growing.

    What do you do? What do you do?

    You try to make it as good as you can. As always.

    You might be able to pour your heart and soul into the product, to do all those grand schemas and refactors and redesigns that you thought about from day one. But what about the long run? How long will you be able to attain that energy? Balancing that personal energy, fire, of yours is something I think is crucial. Without your creative fire, there’s just a machine that churns out code or pixels.

    After a while, you either get depressed and produce things you deep inside perhaps aren’t that proud of, or, you find the sweet balance. Think of everything you’ve taught yourself this far, put it in a blender and create a mix that is informed, pragmatic, and contextual decisions.

    Just as in the lab assignment, there usually is an optimal solution to a startup problem at the moment. Go find it! It might involve you not being able to create a whole new design language for the web app, or that you need to seduce dark forces in order to get some micro services to speak with each other in horrible ways.

    I’d guess that your company even expects you to manage this balance, since it probably doesn’t want you burned out after six months. Working in a startup is a marathon, not a sprint (or is it in fact a marathon of sprints? Nobody knows).

    Many programmers and designers with little startup experience are colliding with the “business folks” at a company in the beginning, since the latter always are optimising for financial success. The former are usually optimising for correctness, order, and simplicity in all their forms. In a startup’s case, its survival is hanging on financial success (VC, profitability — in one way or another), so the former group has to release their desire for correctness, and get on the train. It’s painful, but totally doable.

    I used to be quite focused on making things perfect some time ago. Perhaps not perfect, but make it really, really good, even if few people used it. I could sleep at night, got a few pats on the back from the colleagues. But for what? Don’t get me wrong — building quality things are super important. A cohesive, pretty, and reliable experience is gold. But all the other things are not. There are thousands of things you can do, what are the things you should do? About “Saying no”, and so on.

    A common saying is:

    A job worth doing is a job worth doing well.

    But what is “well” here? Is “well” the same as “shipping it”? Perhaps a better saying is

    A job worth doing is a job worth doing.

    in the sense of that if a task is important enough, you should do it. Otherwise not.

    After some time, you’ll almost work as a machine when landing on the crystallised conclusion: when you’re able to identify the work involved, the end result (a definition of done), and priority. Exactly like the lab assignment in school.

    This focus of energies is just as important in work as in life. Your energies are precious and finite.

    (By the way: I hope I’m not coming off as a know-it-all by writing this in second person format. It’s just easier for me to formulate myself when I think of me telling this to myself).

    \ No newline at end of file +Balancing personal energy and greatness in product design / Johan Brook

    Balancing personal energy and greatness in product design

    About 3 min reading time

    When coming fresh from school (if you went to one) as a programmer or designer in an early stage startup, chance is that you’re used to do things the right way when building.

    In lab assignments, there is often a single correct, fast, and beautiful solution to the problem at hand. Very little is left to “real world factors”. The only parallel with the real world would be that there’s a deadline to things, but other than that, the problem is usually well constrained, has a clear definition of done, and is quite isolated in the grand scheme of things. You bring that set of problem solving mindset with you, which of course is great and what you go to school for.

    Then in your first real world venture, you’re surrounded by tough sprint deadlines, performance problems you have no fucking idea about what they are, a not-so-perfect code base that should’ve been split up into proper abstractions several months ago. And other things. Like lack of automated testing, proper QA processes, and a list of Issues at GitHub which is growing.

    What do you do? What do you do?

    You try to make it as good as you can. As always.

    You might be able to pour your heart and soul into the product, to do all those grand schemas and refactors and redesigns that you thought about from day one. But what about the long run? How long will you be able to attain that energy? Balancing that personal energy, fire, of yours is something I think is crucial. Without your creative fire, there’s just a machine that churns out code or pixels.

    After a while, you either get depressed and produce things you deep inside perhaps aren’t that proud of, or, you find the sweet balance. Think of everything you’ve taught yourself this far, put it in a blender and create a mix that is informed, pragmatic, and contextual decisions.

    Just as in the lab assignment, there usually is an optimal solution to a startup problem at the moment. Go find it! It might involve you not being able to create a whole new design language for the web app, or that you need to seduce dark forces in order to get some micro services to speak with each other in horrible ways.

    I’d guess that your company even expects you to manage this balance, since it probably doesn’t want you burned out after six months. Working in a startup is a marathon, not a sprint (or is it in fact a marathon of sprints? Nobody knows).

    Many programmers and designers with little startup experience are colliding with the “business folks” at a company in the beginning, since the latter always are optimising for financial success. The former are usually optimising for correctness, order, and simplicity in all their forms. In a startup’s case, its survival is hanging on financial success (VC, profitability — in one way or another), so the former group has to release their desire for correctness, and get on the train. It’s painful, but totally doable.

    I used to be quite focused on making things perfect some time ago. Perhaps not perfect, but make it really, really good, even if few people used it. I could sleep at night, got a few pats on the back from the colleagues. But for what? Don’t get me wrong — building quality things are super important. A cohesive, pretty, and reliable experience is gold. But all the other things are not. There are thousands of things you can do, what are the things you should do? About “Saying no”, and so on.

    A common saying is:

    A job worth doing is a job worth doing well.

    But what is “well” here? Is “well” the same as “shipping it”? Perhaps a better saying is

    A job worth doing is a job worth doing.

    in the sense of that if a task is important enough, you should do it. Otherwise not.

    After some time, you’ll almost work as a machine when landing on the crystallised conclusion: when you’re able to identify the work involved, the end result (a definition of done), and priority. Exactly like the lab assignment in school.

    This focus of energies is just as important in work as in life. Your energies are precious and finite.

    (By the way: I hope I’m not coming off as a know-it-all by writing this in second person format. It’s just easier for me to formulate myself when I think of me telling this to myself).

    \ No newline at end of file diff --git a/writings/bdgt-for-iphone/index.html b/writings/bdgt-for-iphone/index.html index cec692cde..1d4451cbd 100644 --- a/writings/bdgt-for-iphone/index.html +++ b/writings/bdgt-for-iphone/index.html @@ -1 +1 @@ -Bdgt for iPhone / Johan Brook

    Bdgt for iPhone

    About 1 min reading time

    Personal budgets can be difficult and tedious. When I think of the word “budget”, I instantly think of tables, pen and paper, balance, diagrams, categories, and yadi, yadi … In the end, it’s all about keeping track of transactions and comparing the total cost of these to a given goal. How is this done fast, everywhere, and easy?

    Our proposal: BDGT for iPhone

    BDGT

    BDGT is an iPhone app which keeps track of daily transactions and will let you overlook your flow of money. In a simple and quick interface, you’re able to add a transaction, put it in a category, and you’re done. Boom. For now: in BDGT you specify a budget which always is present and shown for you.

    The general idea for the app is to simplify people’s everyday home economy, and help you keeping track of the flow.

    Feel free to visit bdgt.me and follow us on Twitter ( @BDGTme), Facebook ( BDGT), and Tumblr ( blog.bdgt.me). Feel free to ask us anything or give feedback through any of these channels. Don’t forget to sign up for the newsletter as well.

    We hope to release further info, screenshots, and videos during the period until release.

    We, the creators of BDGT, are Tapdudes with concept and design lead by Tomas Måsviken.

    Thank you!

    \ No newline at end of file +Bdgt for iPhone / Johan Brook

    Bdgt for iPhone

    About 1 min reading time

    Personal budgets can be difficult and tedious. When I think of the word “budget”, I instantly think of tables, pen and paper, balance, diagrams, categories, and yadi, yadi … In the end, it’s all about keeping track of transactions and comparing the total cost of these to a given goal. How is this done fast, everywhere, and easy?

    Our proposal: BDGT for iPhone

    BDGT

    BDGT is an iPhone app which keeps track of daily transactions and will let you overlook your flow of money. In a simple and quick interface, you’re able to add a transaction, put it in a category, and you’re done. Boom. For now: in BDGT you specify a budget which always is present and shown for you.

    The general idea for the app is to simplify people’s everyday home economy, and help you keeping track of the flow.

    Feel free to visit bdgt.me and follow us on Twitter ( @BDGTme), Facebook ( BDGT), and Tumblr ( blog.bdgt.me). Feel free to ask us anything or give feedback through any of these channels. Don’t forget to sign up for the newsletter as well.

    We hope to release further info, screenshots, and videos during the period until release.

    We, the creators of BDGT, are Tapdudes with concept and design lead by Tomas Måsviken.

    Thank you!

    \ No newline at end of file diff --git a/writings/better-spaghetti-bolognese/index.html b/writings/better-spaghetti-bolognese/index.html index ac07d3779..25449155c 100644 --- a/writings/better-spaghetti-bolognese/index.html +++ b/writings/better-spaghetti-bolognese/index.html @@ -1 +1 @@ -An Even Better Spaghetti Bolognese / Johan Brook

    An Even Better Spaghetti Bolognese

    About 2 min reading time

    This is a continuation (sequel? remix?) on the post “My Spaghetti Bolognese”. In that one, I wrote about a spaghetti bolognese recipe which I thought I’d, pretentious as I am, perfected over the years.

    We recently spent a month in Florence, Italy, where we stayed with a host family. For one birthday party for their grandchild, the family father had made a ragú sauce served with penne pasta. The sauce was amazing: rich, juicy, and smooth. I asked for the recipe, and will present it in this post.

    The ingredients

    • 1-2 finely chopped garlic cloves.
    • 500g of minced pork and beef meat.
    • 1-2 celeries.
    • 1-2 carrots.
    • 1 onion (preferrably red).
    • 750g passata (tomato sauce). I ended up adding 1200g of passata since I wanted a saucier feeling.
    • 1 glass red wine.
    • Sugar (optional).
    • Meat broth (optional).
    • Plenty of olive oil.
    • Salt and pepper.

    For the celery, carrot, and onion: the individual units aren’t as important as the ratio between them. The recipe I received said: “The same amount of celery and onion, a little less carrot”.

    The amount of olive oil is something one needs to freewheel. I usually go with covering the whole pot with almost one centimeter of oil (depending on the size of pot, of course). There’s a lot of fat coming from the pork part in the meat, so beware: that much oil might not be required.

    The steps

    1. Fry the garlic in a pot or deep pan with plenty of olive oil. Garlic should be added when the oil is hot.
    2. Add the meat, and brown it well.
    3. When the meat is well cooked, add a finely chopped mixture of celery, carrots, and onion.
    4. When the mixture is cooked, add the passata. Add salt to taste, as well as some ground pepper.
    5. Wait for the sauce to boil, and add a glass of wine. Wait for it to evaporate completely.
    6. Cook over very low heat for at least 30 minutes. If the sauce is too acidic, add a teaspoon of sugar. If it’s too dry, add a little meat broth.

    (I’ve never needed meat broth in this recipe. There’s just no way I’ve managed to get it too dry.)

    You can let it sit on the stove without a lid for a couple of hours if you’d like. Or put it on very low heat in the oven (around 100 degrees celsius in my convection oven seemed fine over 5 hours of cooking). I’m not actually sure what the benefits with the oven are — perhaps the sauce becomes different if you heat it from all directions? Who knows.

    When serving with pasta, don’t forget to add around a deciliter of pasta water to the sauce at the end. It “really ties the sauce together”, as they say. Parmesan or pecorino is nice to offer too.

    Done.

    Differences from the other recipe

    • 50/50 pork and beef instead of 100% beef. The 50/50 mix makes for a more fatty and tasty sauce, thanks to the pork.
    • Cooking the onion, carrots, and celery in the meat instead of sautéing them. This felt kind of weird to me first, since all recipes I read say that you should fry the onion, garlic, carrot, and celery in the pot before adding the meat. I’m not sure about the difference.s
    • Use of more olive oil.
    • Use of meat broth (if needed).

    This recipe felt simpler but still as good too, which I think should be the goal in cooking. The other recipe has ten steps, this one only has six steps.

    \ No newline at end of file +An Even Better Spaghetti Bolognese / Johan Brook

    An Even Better Spaghetti Bolognese

    About 2 min reading time

    This is a continuation (sequel? remix?) on the post “My Spaghetti Bolognese”. In that one, I wrote about a spaghetti bolognese recipe which I thought I’d, pretentious as I am, perfected over the years.

    We recently spent a month in Florence, Italy, where we stayed with a host family. For one birthday party for their grandchild, the family father had made a ragú sauce served with penne pasta. The sauce was amazing: rich, juicy, and smooth. I asked for the recipe, and will present it in this post.

    The ingredients

    • 1-2 finely chopped garlic cloves.
    • 500g of minced pork and beef meat.
    • 1-2 celeries.
    • 1-2 carrots.
    • 1 onion (preferrably red).
    • 750g passata (tomato sauce). I ended up adding 1200g of passata since I wanted a saucier feeling.
    • 1 glass red wine.
    • Sugar (optional).
    • Meat broth (optional).
    • Plenty of olive oil.
    • Salt and pepper.

    For the celery, carrot, and onion: the individual units aren’t as important as the ratio between them. The recipe I received said: “The same amount of celery and onion, a little less carrot”.

    The amount of olive oil is something one needs to freewheel. I usually go with covering the whole pot with almost one centimeter of oil (depending on the size of pot, of course). There’s a lot of fat coming from the pork part in the meat, so beware: that much oil might not be required.

    The steps

    1. Fry the garlic in a pot or deep pan with plenty of olive oil. Garlic should be added when the oil is hot.
    2. Add the meat, and brown it well.
    3. When the meat is well cooked, add a finely chopped mixture of celery, carrots, and onion.
    4. When the mixture is cooked, add the passata. Add salt to taste, as well as some ground pepper.
    5. Wait for the sauce to boil, and add a glass of wine. Wait for it to evaporate completely.
    6. Cook over very low heat for at least 30 minutes. If the sauce is too acidic, add a teaspoon of sugar. If it’s too dry, add a little meat broth.

    (I’ve never needed meat broth in this recipe. There’s just no way I’ve managed to get it too dry.)

    You can let it sit on the stove without a lid for a couple of hours if you’d like. Or put it on very low heat in the oven (around 100 degrees celsius in my convection oven seemed fine over 5 hours of cooking). I’m not actually sure what the benefits with the oven are — perhaps the sauce becomes different if you heat it from all directions? Who knows.

    When serving with pasta, don’t forget to add around a deciliter of pasta water to the sauce at the end. It “really ties the sauce together”, as they say. Parmesan or pecorino is nice to offer too.

    Done.

    Differences from the other recipe

    • 50/50 pork and beef instead of 100% beef. The 50/50 mix makes for a more fatty and tasty sauce, thanks to the pork.
    • Cooking the onion, carrots, and celery in the meat instead of sautéing them. This felt kind of weird to me first, since all recipes I read say that you should fry the onion, garlic, carrot, and celery in the pot before adding the meat. I’m not sure about the difference.s
    • Use of more olive oil.
    • Use of meat broth (if needed).

    This recipe felt simpler but still as good too, which I think should be the goal in cooking. The other recipe has ten steps, this one only has six steps.

    \ No newline at end of file diff --git a/writings/bjarne-stroustrup-on-cs-25th-anniversary/index.html b/writings/bjarne-stroustrup-on-cs-25th-anniversary/index.html index b78186333..114e1b977 100644 --- a/writings/bjarne-stroustrup-on-cs-25th-anniversary/index.html +++ b/writings/bjarne-stroustrup-on-cs-25th-anniversary/index.html @@ -1 +1 @@ -Bjarne Stroustrup on C++'s 25th anniversary / Johan Brook

    Bjarne Stroustrup on C++'s 25th anniversary

    About 1 min reading time

    Follow link to wired.com →

    If someone claims to have the perfect programming language, he is either a fool or a salesman or both In 1985 Bjarne Stroustrup created the C++ programming language, much because of his and his colleague’s frustration with C. Today C++ is everywhere and is in my opinion the mainstream and “godfather language” for beginners to get accustomed with. I remember my excitement and interest when I got a “Learn To Program C++ in 24 Hours” book for Christmas once. Then picture my excitement when I, Johan, wrote — created — my first usable program (a Celsius-Fahrenheit converter). Long live C++.

    \ No newline at end of file +Bjarne Stroustrup on C++'s 25th anniversary / Johan Brook

    Bjarne Stroustrup on C++'s 25th anniversary

    About 1 min reading time

    Follow link to wired.com →

    If someone claims to have the perfect programming language, he is either a fool or a salesman or both In 1985 Bjarne Stroustrup created the C++ programming language, much because of his and his colleague’s frustration with C. Today C++ is everywhere and is in my opinion the mainstream and “godfather language” for beginners to get accustomed with. I remember my excitement and interest when I got a “Learn To Program C++ in 24 Hours” book for Christmas once. Then picture my excitement when I, Johan, wrote — created — my first usable program (a Celsius-Fahrenheit converter). Long live C++.

    \ No newline at end of file diff --git a/writings/bringing-order-to-css/index.html b/writings/bringing-order-to-css/index.html index 518372dfd..3e8bcf48a 100644 --- a/writings/bringing-order-to-css/index.html +++ b/writings/bringing-order-to-css/index.html @@ -13,4 +13,4 @@ /* W3C */ background: #b4e1ea linear-gradient(#dcf1f5, #b4e1ea);

    (haven’t included code for generating SVG gradients for IE9)

    Even though this is a necessary evil until things change, you shouldn’t have to write this. It’s craziness! Tedious to maintain, bloated, and just plain wrong.

    In Sass or Less, it’s just a matter of creating a mixin returning all the different browser syntaxes and including it:

    @include linear-gradient(#dcf1f5, #b4e1ea);
-

    I’m not saying you’re getting rid of all gradient code in the final stylesheet, but you don’t have to look and work with it while writing/maintaining. Programmer happiness.

    Convention Over Configuration

    Larger projects demand a comprehensible set of CSS styles. There are many lines of code, and you shouldn’t be spending time actually trying to find your way around this huge stylesheet. “God dammit, where did the previous designer put the styles for this box?!”. Wouldn’t it be nice with a decent structure for where to put the styles? It should be self-explanatory, so the next guy or girl is able to find the exact set of properties without searching too long. Every file should have its place.

    How I worked with my stylesheets in a recent project. Notice how only sass/master.scss is compiled into stylesheets/master.css

    Above I’ve attached a screenshot of a structure I used in a recent project. Pretty straight-forward, right? You can sort of tell what the different files are doing. This is essentially what I’m talking about — a common pattern for working with stylesheets — how to name and structure them. If programmers can solve this, so can designers. This is leading me into next section:

    Modularity

    Re-use is great, actually. To grasp that you’re actually able to use the same code in different places in a project — even in several projects — is really something. Sass and Less provides import commands which lets you have all kinds of different files ready for re-use. As you saw in the screenshot in the last section, I had a file named _base.scss . In that file I keep all config variables, custom mixins, reset, helpers classes, et al. It’s really great when working with a micro- or daughter site — it’s just a matter of pulling in that base file and you’ve got access to the colour theme, font stacks, and other things that might’ve been tedious to specify all over again. If you feel for tweaking some stuff, it’s not a big deal since those changes will be imported into the other site’s stylesheet.

    Working in small modules is a valuable lesson to learn the hard way. In my case, it helps me focus on a small piece of code instead of a huge Wall of Text thing. Nowadays I like separating projects into smaller pieces of CSS: maybe one partial for all styles regarding a blog post, another for global page styles, another for the footer, and so on. A rule of thumb would be: “Better to have too many than too few”. Nah, scratch that. Having too many partials/modules would be hell on earth.

    Outro

    Imagine getting into an existing project and just get everything from the start. “Oh, the previous person made this quite easy for me to modify — I’m able to pull this off in no time and don’t waste time wading through swamps of code”. I’m reluctant to call it a “framework” — something like “guidelines”, “codex”, “common courtesy”, “pseudo-standard” — I don’t know — but I hope you get the idea.

    We’ve got the tools. Sass and Less provide the foundation, and sort-of frameworks like Compass for the former gets you started with boilerplate code in no time. Until CSS provides a native way of dealing with organizing stylesheets without resorting to the regular import methods I think Sass or Less is the way to go. It’s really not hard at all to get started. Don’t fear the command line! The projects’ sites provide great tutorials and introductions.

    In the end I guess it’s also about writing friendly, loose, extensible code. Code for change. Imagine the guy who’s about to work with your code being a crazy ax murderer coming after with you after the first bug he finds.

    \ No newline at end of file +

    I’m not saying you’re getting rid of all gradient code in the final stylesheet, but you don’t have to look and work with it while writing/maintaining. Programmer happiness.

    Convention Over Configuration

    Larger projects demand a comprehensible set of CSS styles. There are many lines of code, and you shouldn’t be spending time actually trying to find your way around this huge stylesheet. “God dammit, where did the previous designer put the styles for this box?!”. Wouldn’t it be nice with a decent structure for where to put the styles? It should be self-explanatory, so the next guy or girl is able to find the exact set of properties without searching too long. Every file should have its place.

    How I worked with my stylesheets in a recent project. Notice how only sass/master.scss is compiled into stylesheets/master.css

    Above I’ve attached a screenshot of a structure I used in a recent project. Pretty straight-forward, right? You can sort of tell what the different files are doing. This is essentially what I’m talking about — a common pattern for working with stylesheets — how to name and structure them. If programmers can solve this, so can designers. This is leading me into next section:

    Modularity

    Re-use is great, actually. To grasp that you’re actually able to use the same code in different places in a project — even in several projects — is really something. Sass and Less provides import commands which lets you have all kinds of different files ready for re-use. As you saw in the screenshot in the last section, I had a file named _base.scss . In that file I keep all config variables, custom mixins, reset, helpers classes, et al. It’s really great when working with a micro- or daughter site — it’s just a matter of pulling in that base file and you’ve got access to the colour theme, font stacks, and other things that might’ve been tedious to specify all over again. If you feel for tweaking some stuff, it’s not a big deal since those changes will be imported into the other site’s stylesheet.

    Working in small modules is a valuable lesson to learn the hard way. In my case, it helps me focus on a small piece of code instead of a huge Wall of Text thing. Nowadays I like separating projects into smaller pieces of CSS: maybe one partial for all styles regarding a blog post, another for global page styles, another for the footer, and so on. A rule of thumb would be: “Better to have too many than too few”. Nah, scratch that. Having too many partials/modules would be hell on earth.

    Outro

    Imagine getting into an existing project and just get everything from the start. “Oh, the previous person made this quite easy for me to modify — I’m able to pull this off in no time and don’t waste time wading through swamps of code”. I’m reluctant to call it a “framework” — something like “guidelines”, “codex”, “common courtesy”, “pseudo-standard” — I don’t know — but I hope you get the idea.

    We’ve got the tools. Sass and Less provide the foundation, and sort-of frameworks like Compass for the former gets you started with boilerplate code in no time. Until CSS provides a native way of dealing with organizing stylesheets without resorting to the regular import methods I think Sass or Less is the way to go. It’s really not hard at all to get started. Don’t fear the command line! The projects’ sites provide great tutorials and introductions.

    In the end I guess it’s also about writing friendly, loose, extensible code. Code for change. Imagine the guy who’s about to work with your code being a crazy ax murderer coming after with you after the first bug he finds.

    \ No newline at end of file diff --git a/writings/can-you-make-the-logo-smaller/index.html b/writings/can-you-make-the-logo-smaller/index.html index cbf48bc47..189ed27e6 100644 --- a/writings/can-you-make-the-logo-smaller/index.html +++ b/writings/can-you-make-the-logo-smaller/index.html @@ -1 +1 @@ -"Can you make the logo smaller?" / Johan Brook

    "Can you make the logo smaller?"

    About 1 min reading time

    Follow link to impressivewebs.com →

    “Things we wish clients would say” include some gems which would be like sweet, soft conditioner to designer and developer’s ears.

    \ No newline at end of file +"Can you make the logo smaller?" / Johan Brook

    "Can you make the logo smaller?"

    About 1 min reading time

    Follow link to impressivewebs.com →

    “Things we wish clients would say” include some gems which would be like sweet, soft conditioner to designer and developer’s ears.

    \ No newline at end of file diff --git a/writings/changing-perspectives-and-doing-the-crazy-thing/index.html b/writings/changing-perspectives-and-doing-the-crazy-thing/index.html index b1742cf77..8ffee28f1 100644 --- a/writings/changing-perspectives-and-doing-the-crazy-thing/index.html +++ b/writings/changing-perspectives-and-doing-the-crazy-thing/index.html @@ -1,4 +1,4 @@ Changing perspectives and doing the crazy thing / Johan Brook

    Changing perspectives and doing the crazy thing

    About 2 min reading time

    Like it or not, but tech people often have their way of doing things. Together we’ve drunk the same drink telling us that “this is the way of doing things”, and we repeatedly create products where we incorporate this way of thinking, which go generations back (slight over-exaggeration).

    This text is quite abstract and includes no concrete cases, but stay with me. I think everyone agrees on the fact that in interface and interaction design, there are some well-known and standard ways of solving problems. “This button should go in this view at the top right, and this kind of field should go here”. “You should be able to input this kind of data here, and reach this view from that view”. And so on.

    But sometimes, it doesn’t have to be like that. Sometimes, the most intuitive, pure and simple way of solving a problem comes from a single  user.

    This user is perhaps “untainted”, i.e. not tech savvy/used to these kinds of interfaces. A blunt comparison would be a child: uncynical and who’s seeing the world with youthful and optimistic eyes. This user may see things in our interface which really should be there, but isn’t, since we’ve been drilled not to put it there since it’s “crazy” and “isn’t how it’s been done”.

    This has happened to me not too many times. My parents and friends has sometimes outright said “Why can’t I achieve <action> from here?”. “Where can I see <feature>?”. That was stuff I hadn’t even imagined to put there! First, I had rejected it, since I thought it didn’t make sense, but after some contemplation, I found it totally logical and obvious from a user’s point of view.

    Thus, I think testing on real users is vital in order for your product to be a product “of the people”. The optimal thing (as I haven’t done in this post) would be to scrap the term “user” and instead use “human” or “person” instead. They help you see things you couldn’t see before. They are a medium between what your product is and what it should be, since we sometimes can’t see through the barrier ourselves. Sketch below.

    &lt; ------ | ------&gt; :D
 						^
 			User as medium
-

    Look upon it as the story about Narnia: we can’t access Narnia when we’re too old, only live it through our children. So do the crazy thing, and go where you wouldn’t go before. For fun and profit.

    \ No newline at end of file +

    Look upon it as the story about Narnia: we can’t access Narnia when we’re too old, only live it through our children. So do the crazy thing, and go where you wouldn’t go before. For fun and profit.

    \ No newline at end of file diff --git a/writings/chocolat-the-heir-of-textmate/index.html b/writings/chocolat-the-heir-of-textmate/index.html index b0b506eb1..0223aca7f 100644 --- a/writings/chocolat-the-heir-of-textmate/index.html +++ b/writings/chocolat-the-heir-of-textmate/index.html @@ -1,2 +1,2 @@ Chocolat – The Heir of Textmate? / Johan Brook

    Chocolat – The Heir of Textmate?

    About 4 min reading time

    Textmate has probably ruled the text editor universe for some years now. There are others; Coda, Espresso, BBEdit, Vim, Emacs, etc., but they don’t cut it for me personally. But Textmate is getting old. The vast number of bundles for Textmate are for some people not enough arguments for sticking by an application which hasn’t had a major update for several years.

    What I love with Textmate is its sense of lightweight-ness and the wide array of ways to customize the app. It boots in a second or two and then you’re ready to start coding or writing. Type mate from the command line to open any file in Textmate. You’re able to customize the hell out of the app with bundles, snippets, commands, macros, themes, and more. Make it fit your needs.

    This far, no other text editor has that perfect blend of great customizability and still keeps its user-friendliness (I’m no Emacs or Vim guy). It doesn’t try to be a full blown IDE (like another Neatbeans, Eclipse, etc. Thank god), nor does Textmate go half the way with features I don’t need (like Coda, Espresso, etc.). It’s a text editor with IDE capabilities.

    An heir: Chocolat

    I mentioned above that Textmate is getting old. I mean: it still works, but it would feel quite … safe if somebody would be maintaining it, actively tweaking features, and keeping it up to date in the evolving world of development. In comes Chocolat app. When I first visited the site I thought: “Yeah, another half-assed editor”. But after receiving an invite to the alpha I’m completely blown away by Chocolat.

    Out with the old … or? Chocolat’s import features

    Chocolat has full Textmate bundle, snippet and theme support. You are therefore actually able to pull in stuff from Textmate directly into Chocolat — no hassle. That weird feeling you get when you try out a new text editor (like switching shoes) is completely gone once you’ve pressed some buttons and imported your finely tuned Textmate theme. Chocolat’s version of bundles (“Truffles”) are installable from within the app, and Chocolat automatically finds local Textmate bundles and themes, and also Truffles from various GitHub repositories as well. Wicked cool. Your cozy “Bundle” navigation menu in Textmate looks exactly the same in Chocolat (“Actions”).

    The interface

    A text editor’s interface is a huge deal. After all; it’s what you stare at during the day. Chocolat looks like most other editors, but most notably Textmate. The project drawer (“Files bar”) has much more visual weight in Chocolat, and includes Espresso’s concept of active files in the top (instead of having all tabs for opened files at the top of the window, Chocolat and Espresso put them in an “Active” group in the sidebar). The Files Bar also looks better in Chocolat than the one in Textmate, but that’s just in line with the overall nice UI work in the app. It’s up-to-date OS X interface elements, and a welcomed refresh from Textmate’s somewhat outdated style.

    Split panes

    If you own a large widescreen monitor or just like having files line up vertically, Chocolat includes a vertical split option. Nice.

    Workspaces

    Instead of making the top tab bar space designated for files, Chocolat makes the tabs symbolize work spaces. You are of course free to make the tabs to be for files as well. I’m not completely sure of what work spaces will be in Chocolat, but I guess they’re for another layer of separation for your resources. For example; you could work with backend files in one work space and with front-end HTML and CSS in another. Still a bit buggy behavior when switching between work spaces though.

    Quick Open

    When a friend showed me Textmate’s “Go To File” feature (CMD + T) I was stuck. No more looking in the file browser for files — just hit the keyboard shortcut and search. Fast switching between files is a joy since the Go To File dialog remembers the files you’ve recently opened.

    Chocolat also incorporates this with its Quick Open. It’s another keyboard shortcut (CMD + D) but works the same way: type and hit Enter. However, the Quick Open dialog doesn’t keep the recently opened files, which is a bummer (discussed in this bug tracker thread on GitHub).

    CLI tool

    As I mentioned, it’s sooo cool to be able to type mate <file> in Terminal and open a file or folder in Textmate. Chocolat also ships with a CLI tool (which you explicitly have to install from “Chocolat > Install Command Line Tool …“). Works the same way:

    $ choc <file>
-

    Another check in the list.

    Summary

    Chocolat is really cool. It takes the best from Textmate and mix it with modern Cocoa and some nifty ideas. I truly hope the people behind it will continue develop it. Suggestions from the community is welcomed, and I believe the development process is quite transparent.

    IT’S AN ALPHA!

    Don’t flame on the app for being in alpha. The developers themselves have stated that they’re adding a bunch of features in the alpha stage and then focus on stability in beta (sort of the other way around compared to other software projects). I got this totally wrong; of course it’s the other way around. From the Chocolat blog:

    We’re doing Chocolat’s development “backwards”, so in the Alpha we’re fixing bugs, and in the Beta we’ll add extra features. We want a solid and usable text editor before we start adding a bunch of extra features.

    Thanks to Tim Mackey for pointing this out. The app could be quite choppy when there’s lots of code and files. I’ve experienced some scroll lag and delay when using Quick Open once in a while.

    If you have something to report, please visit the official GitHub bug tracker repo.

    (I was testing version 0.0.32 when this post was written)

    \ No newline at end of file +

    Another check in the list.

    Summary

    Chocolat is really cool. It takes the best from Textmate and mix it with modern Cocoa and some nifty ideas. I truly hope the people behind it will continue develop it. Suggestions from the community is welcomed, and I believe the development process is quite transparent.

    IT’S AN ALPHA!

    Don’t flame on the app for being in alpha. The developers themselves have stated that they’re adding a bunch of features in the alpha stage and then focus on stability in beta (sort of the other way around compared to other software projects). I got this totally wrong; of course it’s the other way around. From the Chocolat blog:

    We’re doing Chocolat’s development “backwards”, so in the Alpha we’re fixing bugs, and in the Beta we’ll add extra features. We want a solid and usable text editor before we start adding a bunch of extra features.

    Thanks to Tim Mackey for pointing this out. The app could be quite choppy when there’s lots of code and files. I’ve experienced some scroll lag and delay when using Quick Open once in a while.

    If you have something to report, please visit the official GitHub bug tracker repo.

    (I was testing version 0.0.32 when this post was written)

    \ No newline at end of file diff --git a/writings/coding-like-knitting/index.html b/writings/coding-like-knitting/index.html index 91e2e3ab3..d2f6f8603 100644 --- a/writings/coding-like-knitting/index.html +++ b/writings/coding-like-knitting/index.html @@ -1 +1 @@ -Like Knitting / Johan Brook

    Like Knitting

    About 1 min reading time

    A colleague mentioned this the other day in the company chat:

    I like coding. It’s like knitting.

    This is the perfect description of programming to me.

    I’ve yet to discover a more suitable response to tell family, friends, and my girlfriend when they ask the repeated question “What is it you love so much about coding?!”.

    While I’m writing code, I’m:

    • focusing on complex but isolated problems with a clearly marked goal.
    • watching a movie with my girlfriend.
    • gettings things done without thinking.
    • blocking out other things, for a moment.
    • getting to be creative.

    Sounds like knitting!

    \ No newline at end of file +Like Knitting / Johan Brook

    Like Knitting

    About 1 min reading time

    A colleague mentioned this the other day in the company chat:

    I like coding. It’s like knitting.

    This is the perfect description of programming to me.

    I’ve yet to discover a more suitable response to tell family, friends, and my girlfriend when they ask the repeated question “What is it you love so much about coding?!”.

    While I’m writing code, I’m:

    • focusing on complex but isolated problems with a clearly marked goal.
    • watching a movie with my girlfriend.
    • gettings things done without thinking.
    • blocking out other things, for a moment.
    • getting to be creative.

    Sounds like knitting!

    \ No newline at end of file diff --git a/writings/coffee-and-free-software/index.html b/writings/coffee-and-free-software/index.html index c608950e9..352785cfe 100644 --- a/writings/coffee-and-free-software/index.html +++ b/writings/coffee-and-free-software/index.html @@ -1 +1 @@ -Coffee and free software / Johan Brook

    Coffee and free software

    About 1 min reading time

    Follow link to raganwald.posterous.com →

    The hippie is free and you are free. The hippie hasn’t shut down the big chains, but that isn’t his goal. His goal is to sleep at night, comfortable that he has made choices compatible with his personal beliefs and that he has given other people the freedom to make choices compatible with their own personal beliefs.

    I can think of no greater definition of freedom.

    A gem. I love the ending paragraph quoted above.

    \ No newline at end of file +Coffee and free software / Johan Brook

    Coffee and free software

    About 1 min reading time

    Follow link to raganwald.posterous.com →

    The hippie is free and you are free. The hippie hasn’t shut down the big chains, but that isn’t his goal. His goal is to sleep at night, comfortable that he has made choices compatible with his personal beliefs and that he has given other people the freedom to make choices compatible with their own personal beliefs.

    I can think of no greater definition of freedom.

    A gem. I love the ending paragraph quoted above.

    \ No newline at end of file diff --git a/writings/comparison-between-a-plumber-and-a-freelancing-designer/index.html b/writings/comparison-between-a-plumber-and-a-freelancing-designer/index.html index a5f73eba8..d6f5e347a 100644 --- a/writings/comparison-between-a-plumber-and-a-freelancing-designer/index.html +++ b/writings/comparison-between-a-plumber-and-a-freelancing-designer/index.html @@ -1 +1 @@ -Comparison between a plumber and a freelancing designer / Johan Brook

    Comparison between a plumber and a freelancing designer

    About 1 min reading time

    Follow link to line25.com →

    Chris Spooner is showing the similarities between his plumber and the life of a freelancing designer, and everything is quite true.

    \ No newline at end of file +Comparison between a plumber and a freelancing designer / Johan Brook

    Comparison between a plumber and a freelancing designer

    About 1 min reading time

    Follow link to line25.com →

    Chris Spooner is showing the similarities between his plumber and the life of a freelancing designer, and everything is quite true.

    \ No newline at end of file diff --git a/writings/conditionally-composable-functions/index.html b/writings/conditionally-composable-functions/index.html index 274012a06..b22afe18d 100644 --- a/writings/conditionally-composable-functions/index.html +++ b/writings/conditionally-composable-functions/index.html @@ -67,4 +67,4 @@ return team || callback(); }; } -

    A function which returns a function which perhaps invokes a callback. So each callback in there will be one of our getter functions. And since maybeReturnTeam returns a function, it’ll play well with compose, since it’s actually only the function returned that will be directly invoked by the composition chain.

    The maybeReturnTeam will also effectively prevent other getter functions to be called if it encounters a truthy value in the first function. Great!

    So we got rid of all the if’s and created a nice, flowing chain of functions doing there thing. Sometimes it’s not worth it to go into crazy functional programming techniques in everyday code, since in a large code base and with a team, you need to keep readability (and understandability!) high. And one might argue that the original code I had there at the top is evidentally less code. But as a whole, FP makes total sense to me once you learn how to rethink how you actually do program flows today.

    \ No newline at end of file +

    A function which returns a function which perhaps invokes a callback. So each callback in there will be one of our getter functions. And since maybeReturnTeam returns a function, it’ll play well with compose, since it’s actually only the function returned that will be directly invoked by the composition chain.

    The maybeReturnTeam will also effectively prevent other getter functions to be called if it encounters a truthy value in the first function. Great!

    So we got rid of all the if’s and created a nice, flowing chain of functions doing there thing. Sometimes it’s not worth it to go into crazy functional programming techniques in everyday code, since in a large code base and with a team, you need to keep readability (and understandability!) high. And one might argue that the original code I had there at the top is evidentally less code. But as a whole, FP makes total sense to me once you learn how to rethink how you actually do program flows today.

    \ No newline at end of file diff --git a/writings/css-variables-soon-to-land-in-webkit/index.html b/writings/css-variables-soon-to-land-in-webkit/index.html index c80944878..21ad67000 100644 --- a/writings/css-variables-soon-to-land-in-webkit/index.html +++ b/writings/css-variables-soon-to-land-in-webkit/index.html @@ -10,4 +10,4 @@ color: $foreground; background-color: red; background-color: $background; - \ No newline at end of file + \ No newline at end of file diff --git a/writings/customizing-the-wordpress-admin-bar/index.html b/writings/customizing-the-wordpress-admin-bar/index.html index fb8d3bbcd..e0aaf9038 100644 --- a/writings/customizing-the-wordpress-admin-bar/index.html +++ b/writings/customizing-the-wordpress-admin-bar/index.html @@ -51,4 +51,4 @@ } } -

    Simple enough: get access to $post => Find eventual child pages => loop through and add to parent item.

    Source

    You’ll find relevant source code in the files wp-includes/class-wp-admin-bar.php and wp-includes/admin-bar.php . Funny: I just realized I had switched to Chrome for the last two screenshots. You’ll just have to put up with that.

    \ No newline at end of file +

    Simple enough: get access to $post => Find eventual child pages => loop through and add to parent item.

    Source

    You’ll find relevant source code in the files wp-includes/class-wp-admin-bar.php and wp-includes/admin-bar.php . Funny: I just realized I had switched to Chrome for the last two screenshots. You’ll just have to put up with that.

    \ No newline at end of file diff --git a/writings/debugging-css-media-queries/index.html b/writings/debugging-css-media-queries/index.html index 8af704031..5751c6895 100644 --- a/writings/debugging-css-media-queries/index.html +++ b/writings/debugging-css-media-queries/index.html @@ -5,4 +5,4 @@

    It’s exactly the same code as the first pure CSS example, but I’ve replaced the content and background values with to arguments. The mixin is later included in the media query:

    @media only screen and (min-width: 768px) and (max-width: 979px){ body{ @include debugmessage("Tablet media query fired"); } }

    Simple right? It’s clean, nice and reusable. I’m also able to go ahead and send a different colour along with the mixin (right now, semi-transparent yellow is default if no other argument is given):

    @include debugmessage("Tablet media query fired", "red");

    Debug mode

    Thanks to Sass’ variables, I’m able to declare a global, top-scope variable at the top of my Sass sheets called $DEBUG to keep track of thingss. During development I set it to true . This trick is handy when writing things you might want to turn off when the site launches:

    @if($DEBUG == true){ @include debugmessage("Mobile media query fired", "orange"); }
-

    There. Even better, right?

    Outro

    I randomly created this during a project, and it’s a quick and dirty way of detecting different viewport widths. Give it a spin, and give me a shout ( @johanbrook) if you have any thoughts.

    \ No newline at end of file +

    There. Even better, right?

    Outro

    I randomly created this during a project, and it’s a quick and dirty way of detecting different viewport widths. Give it a spin, and give me a shout ( @johanbrook) if you have any thoughts.

    \ No newline at end of file diff --git a/writings/deno/index.html b/writings/deno/index.html index 1f475264a..26f1a071e 100644 --- a/writings/deno/index.html +++ b/writings/deno/index.html @@ -23,4 +23,4 @@ } }

    Source code

    import React from 'react';
-

    Remember to specify --import-map for deno run! Nothing in Deno is implicit: it won’t pick up the import map by itself.

    Summary

    My overall impression of Deno that while it’s new technology, it’s quite mature and well documented. And if you’ve got a hairy question, you can pop into their Discord server and ask there. The std modules are very modern in the way they’re written (compared to Node, which just got Promise based APIs…). It’s actually fun to write Javascript code again. I’d attribute that to the decrease of “Javascript fatigue” in Deno, since there are so many built-in modules you’d previously assume you’d need to get from a third party.

    When (hehe) you install Deno, be sure to do deno help in a terminal to see the range of nice sub commands. deno types and deno doc are favourites of mine. deno compile is also cool if you’re writing a script which should be run as a self contained executable, suitable for distribution.

    Appendix: lume

    lume is a static site generator, built with Deno. I read through the documentation and jumped around in the source code for a while before I fell in love and ported johanbrook.com to it.

    Lume is a joy to work with. The built-in functionality and plugins fill 95% of my use cases — very little custom code needed. And if I don’t understand the documentation, reading the source code is no problem.

    It feels easier to use than other generators I’ve tried (Jekyll, Middleman, Metalsmith, Eleventy) but yet very powerful. During the porting my code I was not too annoyed during the process: something that you easily get when trying a brand new site generator. The fact that its written in Typescript is so nice, as you get static typing and don’t have to guess what objects and properties to read.

    Try it out!

    \ No newline at end of file +

    Remember to specify --import-map for deno run! Nothing in Deno is implicit: it won’t pick up the import map by itself.

    Summary

    My overall impression of Deno that while it’s new technology, it’s quite mature and well documented. And if you’ve got a hairy question, you can pop into their Discord server and ask there. The std modules are very modern in the way they’re written (compared to Node, which just got Promise based APIs…). It’s actually fun to write Javascript code again. I’d attribute that to the decrease of “Javascript fatigue” in Deno, since there are so many built-in modules you’d previously assume you’d need to get from a third party.

    When (hehe) you install Deno, be sure to do deno help in a terminal to see the range of nice sub commands. deno types and deno doc are favourites of mine. deno compile is also cool if you’re writing a script which should be run as a self contained executable, suitable for distribution.

    Appendix: lume

    lume is a static site generator, built with Deno. I read through the documentation and jumped around in the source code for a while before I fell in love and ported johanbrook.com to it.

    Lume is a joy to work with. The built-in functionality and plugins fill 95% of my use cases — very little custom code needed. And if I don’t understand the documentation, reading the source code is no problem.

    It feels easier to use than other generators I’ve tried (Jekyll, Middleman, Metalsmith, Eleventy) but yet very powerful. During the porting my code I was not too annoyed during the process: something that you easily get when trying a brand new site generator. The fact that its written in Typescript is so nice, as you get static typing and don’t have to guess what objects and properties to read.

    Try it out!

    \ No newline at end of file diff --git a/writings/device-independency/index.html b/writings/device-independency/index.html index 7ea02f012..571920172 100644 --- a/writings/device-independency/index.html +++ b/writings/device-independency/index.html @@ -1 +1 @@ -Device independency / Johan Brook

    Device independency

    About 2 min reading time

    **One thing hit me the other day. **I’ve written about sync between devices before, and now I thought about the actual physical move between them. It has sneaked up on me recently: how we use multiple devices more frequently these days. What’s interesting is how the software inside adapts to it.

    What I mean is how you are able to use Messages on a Mac on your desk, then suddenly decide to move over to Messages the iPad in the couch. Got to run? Bring your iPhone along. What’s cool is the fact that you’re able to continue the conversation from wherever you left off, on any of these devices.

    Most social media services that have apps for the three big markets (desktop, tablet, mobile) are doing the same thing. It’s not over after closing Facebook or Twitter on your computer — carry on what you were doing from your phone instead 1. Services like iCloud and Dropbox make it incredibly easy to switch between devices. Apple’s iBooks is available only for the iPhone and iPad, but still manage to create a “begin where you left off” feeling, thanks to the syncing of bookmarks. The Music app, along with iTunes on the desktop, is cool since I’m able to continue listening on a podcast on my iPad right where I left off. Instapaper is a prime example as well.

    You could call it device independency, since the content doesn’t depend on a certain device in order to function or show properly. I find it really cool to see apps and web sites just magically adapt to a different device and still let me access the content. The otherwise hard lines between devices are starting to blur out when it comes to content.

    When building stuff, in my case websites, I think it’s important to have this in mind when doing responsive design. How people move between devices, and what users want to do with the website on each device. This is getting important since we’ve got more and more devices (and screen sizes!) to build for.

    When true device independency is achieved, it’s really a tremendous joy to use a product. Let me float smoothly and seamlessly between devices while using your product, and I’ll be happy.

    1. However, many timeline based services as Twitter still have to fix the “begin where I left off” issue — to sync the last read item when switching devices. Tweetmarker has solved this for tweets.
    \ No newline at end of file +Device independency / Johan Brook

    Device independency

    About 2 min reading time

    **One thing hit me the other day. **I’ve written about sync between devices before, and now I thought about the actual physical move between them. It has sneaked up on me recently: how we use multiple devices more frequently these days. What’s interesting is how the software inside adapts to it.

    What I mean is how you are able to use Messages on a Mac on your desk, then suddenly decide to move over to Messages the iPad in the couch. Got to run? Bring your iPhone along. What’s cool is the fact that you’re able to continue the conversation from wherever you left off, on any of these devices.

    Most social media services that have apps for the three big markets (desktop, tablet, mobile) are doing the same thing. It’s not over after closing Facebook or Twitter on your computer — carry on what you were doing from your phone instead 1. Services like iCloud and Dropbox make it incredibly easy to switch between devices. Apple’s iBooks is available only for the iPhone and iPad, but still manage to create a “begin where you left off” feeling, thanks to the syncing of bookmarks. The Music app, along with iTunes on the desktop, is cool since I’m able to continue listening on a podcast on my iPad right where I left off. Instapaper is a prime example as well.

    You could call it device independency, since the content doesn’t depend on a certain device in order to function or show properly. I find it really cool to see apps and web sites just magically adapt to a different device and still let me access the content. The otherwise hard lines between devices are starting to blur out when it comes to content.

    When building stuff, in my case websites, I think it’s important to have this in mind when doing responsive design. How people move between devices, and what users want to do with the website on each device. This is getting important since we’ve got more and more devices (and screen sizes!) to build for.

    When true device independency is achieved, it’s really a tremendous joy to use a product. Let me float smoothly and seamlessly between devices while using your product, and I’ll be happy.

    1. However, many timeline based services as Twitter still have to fix the “begin where I left off” issue — to sync the last read item when switching devices. Tweetmarker has solved this for tweets.
    \ No newline at end of file diff --git a/writings/digital-magazines-and-html/index.html b/writings/digital-magazines-and-html/index.html index 25b912077..b7ebe46ad 100644 --- a/writings/digital-magazines-and-html/index.html +++ b/writings/digital-magazines-and-html/index.html @@ -1 +1 @@ -Digital magazines and HTML / Johan Brook

    Digital magazines and HTML

    About 5 min reading time

    Not too long after the original iPad was announced, the device was predicted to be the savior of magazines. Made by Apple, at least it wasn’t going to be a (huge) flop. A couple of months into the raging campaign of the iPad vs. the rest of the (newly assembled) tablet manufacturer crowd, it’s clear that the former is a hit. But what about magazines? There’s been quite a boom on the digital magazine front — large and small publishers have pushed issues out on the App Store, or via publishing platforms like Qiozk, Paperton and Mag+. But there hasn’t been any “Wow”-effect. Many of the magazines consists of static images (!) made “interactive” with flashy animations and layer effects.

    Requirements for a basic iPad magazine/news app

    Peter Esse, editor at the Swedish Mac site Allt om Mac, has constructed this list of requirements for magazine/news apps in his article:

    • Clear and simple navigation. Swipe right to go to next article, swipe down to continue read the current article.
    • The text must be readable on the iPad screen, i.e. the right size, but the reader should still be able to resize the font size.
    • Articles must the searchable, text selectable, and there should be some kind of system for looking up unknown words and phrases in the text.
    • Share articles with others, and save them for later. Note: hello, Instapaper!
    • Photos and video should be able to be resized.
    • Headings on the front cover and table of contents should be hyperlinked to the relevant article.
    • The price should be reasonable.
    • The issue shouldn’t take forever to buy/download. A newspaper has to be able to download well in the middle of nowhere.
    • Simple and slick to use. Minimal amount of loading screens.
    • The digital version mustn’t feel like a secondary spinoff to the paper issue.

    (translated to English by me) Some of these requirements may be subjective, but the list sets a good starting point. The thing is, publishers can’t expect savvy customers to pay a relatively great deal of money for magazines where the content just is static images! I highly recommend reading Oliver Reichenstein’s article about the Wired iPad app: “WIRED on iPad: Just like a Paper Tiger … ”. He brings up fundamental typographic errors, as well as strange behaviors and interaction mistakes. While I’m at it I should make sure to link to Khoi Vinh’s series of iPad magazine articles:  http://bit.ly/gSVtmY. Very thoughtful from a guy who knows what he’s talking about.

    The best of both worlds

    The problem, as I see it, with magazine production for tablets is that the sides are switched. Web designers are expected to create magazine layouts, and print designers are suddenly finding themselves producing issues for digital devices. The ultimate magazine would utilize the best of these two camps, in a native wrapper. But there’s a third camp: the native Cocoa camp. I’m one of those who think you should create applications with native tools for the platform you’re targeting. That means no Flash/Javascript-to-Objective C compilers. It just doesn’t feel right in the end. Web frameworks like Sencha Touch mimics native UI pretty well, and you could pull off pretty awesome stuff with HTML5′s Javascript APIs, but it’s nowhere near the sophistication of Apple’s native APIs – both performance wise and when it comes to user experience. Push Pop Press is an upcoming book publishing tool (?) exclusively for the iPad. Behind the project are former Apple designers and engineers, and John Grubers loves the demo he was shown. Books are said to be smooth, beautiful and slick. Pure, raw, native code. As there are no details about Push Pop Press yet, I can’t speculate further about it, except for the fact that it looks really promising.

    A tool

    We need some sort of tool/framework, in which we’re able to use the styling capabilities of HTML and CSS together with the native effects and performance of Cocoa. A perfect mix of them both, built on a solid framework for producing the HTML and CSS rapidly, would do great I think. Especially the HTML and CSS part could actually borrow a lot of philosophies from how InDesign works. Writing markup and styles by hand is quite a process — imagine writing it all over again for each new issue. Generating markup directly from InDesign is a bad idea — I don’t ever trust generated code — but we still need to produce each issue in a fairly rapid manor. I’m just thinking out loud, but a flexible base grid and an extensive set of CSS helper classes ought to do it. Issues could be easily distributed in packages of HTML, CSS and JS code, and managed by a branded “mother app” on the iPad, where you’re able to purchase and manage issues. Personally I dislike the idea of having separate apps for each issue: it just doesn’t make sense. I want to manage all the issues of a magazine subscription in a single “mother app” — not in one of the iPad’s homescreens.

    Existing tools

    Bonnier’s Mag+ tools were released to the public for a couple of days ago – free for anyone to download and use. I downloaded the package and checked it out; it’s a nice initiative and well documented. It’s basically an InDesign plugin, an Adobe AIR production tool and an iPad review app, along with InDesign templates. I like the project’s overall attitude, but it’s not optimal. The InDesign plugin still generates static images (the Popular Science magazine was built using Mag+) and you have to publish through Bonnier’s platform (which will cost you $2,500 for the first five months, then $500 per issue or month). Treesaver is a pure Javascript framework for “creating magazine-style layouts using standards-compliant HTML and CSS”. Again: it’s a great initiative. The way you structure the markup is quite alright, and I like how the magazine columns are created (text is able to flow through several columns, through several pages). However, the swiping is a bit awkward and non-native, and one of the demos crashed in iPad’s Safari a few times = a pure web solution won’t work performance wise and experience wise. Using these Javascript “substitutes” which are mimicking native functionality still doesn’t feel 100% right. Baker is built for packaging eBooks in an iPad app for release on the App Store. You create the book with web technologies, package it in the HPub format, then create a native app for it with the included Xcode project template. Really easy, straight-forward, and open. But I’m afraid this is meant primarily for books to be read as standalone apps — not vivid, rich magazines. Flipboard is not really a tool nor framework, but it’s a great app and concept. To me, they got everything right in regards to typography, performance, readability, user experience, et al. I can spend hours just reading, reading, reading stuff I would never had read on a computer display — still, the stories live in the same RSS stream of mine! And on top of that, I don’t even have to find the content myself — I’ll just check out one of the built-in channels and I’m fed with fresh, new content. Flipboard captures the newspaper feel, but never really gets in my way. Along with a great grid (which rotates seamlessly on an iPad orientation change) Flipboard is the number one app for the iPad. A fusion of these kind of projects would be my dream tool:

    • Use the flexibility of web technologies
    • Use the power of native Cocoa frameworks to follow Apple’s HIG
    • Provide an easy way to brand the native app
    • Be able to quickly produce clean, semantic HTML
    • Use a library of flexible CSS classes to provide art direction to the issue, and be able to painlessly reorder the layout if things change.
    • Blur the lines between web and native — use them together (like Flipboard does with WebViews here and there)

    Magazines on the iPad could be really great. Just don’t screw it up with incompetence, greed or lack of plain common knowledge.

    \ No newline at end of file +Digital magazines and HTML / Johan Brook

    Digital magazines and HTML

    About 5 min reading time

    Not too long after the original iPad was announced, the device was predicted to be the savior of magazines. Made by Apple, at least it wasn’t going to be a (huge) flop. A couple of months into the raging campaign of the iPad vs. the rest of the (newly assembled) tablet manufacturer crowd, it’s clear that the former is a hit. But what about magazines? There’s been quite a boom on the digital magazine front — large and small publishers have pushed issues out on the App Store, or via publishing platforms like Qiozk, Paperton and Mag+. But there hasn’t been any “Wow”-effect. Many of the magazines consists of static images (!) made “interactive” with flashy animations and layer effects.

    Requirements for a basic iPad magazine/news app

    Peter Esse, editor at the Swedish Mac site Allt om Mac, has constructed this list of requirements for magazine/news apps in his article:

    • Clear and simple navigation. Swipe right to go to next article, swipe down to continue read the current article.
    • The text must be readable on the iPad screen, i.e. the right size, but the reader should still be able to resize the font size.
    • Articles must the searchable, text selectable, and there should be some kind of system for looking up unknown words and phrases in the text.
    • Share articles with others, and save them for later. Note: hello, Instapaper!
    • Photos and video should be able to be resized.
    • Headings on the front cover and table of contents should be hyperlinked to the relevant article.
    • The price should be reasonable.
    • The issue shouldn’t take forever to buy/download. A newspaper has to be able to download well in the middle of nowhere.
    • Simple and slick to use. Minimal amount of loading screens.
    • The digital version mustn’t feel like a secondary spinoff to the paper issue.

    (translated to English by me) Some of these requirements may be subjective, but the list sets a good starting point. The thing is, publishers can’t expect savvy customers to pay a relatively great deal of money for magazines where the content just is static images! I highly recommend reading Oliver Reichenstein’s article about the Wired iPad app: “WIRED on iPad: Just like a Paper Tiger … ”. He brings up fundamental typographic errors, as well as strange behaviors and interaction mistakes. While I’m at it I should make sure to link to Khoi Vinh’s series of iPad magazine articles:  http://bit.ly/gSVtmY. Very thoughtful from a guy who knows what he’s talking about.

    The best of both worlds

    The problem, as I see it, with magazine production for tablets is that the sides are switched. Web designers are expected to create magazine layouts, and print designers are suddenly finding themselves producing issues for digital devices. The ultimate magazine would utilize the best of these two camps, in a native wrapper. But there’s a third camp: the native Cocoa camp. I’m one of those who think you should create applications with native tools for the platform you’re targeting. That means no Flash/Javascript-to-Objective C compilers. It just doesn’t feel right in the end. Web frameworks like Sencha Touch mimics native UI pretty well, and you could pull off pretty awesome stuff with HTML5′s Javascript APIs, but it’s nowhere near the sophistication of Apple’s native APIs – both performance wise and when it comes to user experience. Push Pop Press is an upcoming book publishing tool (?) exclusively for the iPad. Behind the project are former Apple designers and engineers, and John Grubers loves the demo he was shown. Books are said to be smooth, beautiful and slick. Pure, raw, native code. As there are no details about Push Pop Press yet, I can’t speculate further about it, except for the fact that it looks really promising.

    A tool

    We need some sort of tool/framework, in which we’re able to use the styling capabilities of HTML and CSS together with the native effects and performance of Cocoa. A perfect mix of them both, built on a solid framework for producing the HTML and CSS rapidly, would do great I think. Especially the HTML and CSS part could actually borrow a lot of philosophies from how InDesign works. Writing markup and styles by hand is quite a process — imagine writing it all over again for each new issue. Generating markup directly from InDesign is a bad idea — I don’t ever trust generated code — but we still need to produce each issue in a fairly rapid manor. I’m just thinking out loud, but a flexible base grid and an extensive set of CSS helper classes ought to do it. Issues could be easily distributed in packages of HTML, CSS and JS code, and managed by a branded “mother app” on the iPad, where you’re able to purchase and manage issues. Personally I dislike the idea of having separate apps for each issue: it just doesn’t make sense. I want to manage all the issues of a magazine subscription in a single “mother app” — not in one of the iPad’s homescreens.

    Existing tools

    Bonnier’s Mag+ tools were released to the public for a couple of days ago – free for anyone to download and use. I downloaded the package and checked it out; it’s a nice initiative and well documented. It’s basically an InDesign plugin, an Adobe AIR production tool and an iPad review app, along with InDesign templates. I like the project’s overall attitude, but it’s not optimal. The InDesign plugin still generates static images (the Popular Science magazine was built using Mag+) and you have to publish through Bonnier’s platform (which will cost you $2,500 for the first five months, then $500 per issue or month). Treesaver is a pure Javascript framework for “creating magazine-style layouts using standards-compliant HTML and CSS”. Again: it’s a great initiative. The way you structure the markup is quite alright, and I like how the magazine columns are created (text is able to flow through several columns, through several pages). However, the swiping is a bit awkward and non-native, and one of the demos crashed in iPad’s Safari a few times = a pure web solution won’t work performance wise and experience wise. Using these Javascript “substitutes” which are mimicking native functionality still doesn’t feel 100% right. Baker is built for packaging eBooks in an iPad app for release on the App Store. You create the book with web technologies, package it in the HPub format, then create a native app for it with the included Xcode project template. Really easy, straight-forward, and open. But I’m afraid this is meant primarily for books to be read as standalone apps — not vivid, rich magazines. Flipboard is not really a tool nor framework, but it’s a great app and concept. To me, they got everything right in regards to typography, performance, readability, user experience, et al. I can spend hours just reading, reading, reading stuff I would never had read on a computer display — still, the stories live in the same RSS stream of mine! And on top of that, I don’t even have to find the content myself — I’ll just check out one of the built-in channels and I’m fed with fresh, new content. Flipboard captures the newspaper feel, but never really gets in my way. Along with a great grid (which rotates seamlessly on an iPad orientation change) Flipboard is the number one app for the iPad. A fusion of these kind of projects would be my dream tool:

    • Use the flexibility of web technologies
    • Use the power of native Cocoa frameworks to follow Apple’s HIG
    • Provide an easy way to brand the native app
    • Be able to quickly produce clean, semantic HTML
    • Use a library of flexible CSS classes to provide art direction to the issue, and be able to painlessly reorder the layout if things change.
    • Blur the lines between web and native — use them together (like Flipboard does with WebViews here and there)

    Magazines on the iPad could be really great. Just don’t screw it up with incompetence, greed or lack of plain common knowledge.

    \ No newline at end of file diff --git a/writings/dustin-diazs-dollarscriptjs/index.html b/writings/dustin-diazs-dollarscriptjs/index.html index 97c317480..d86d30469 100644 --- a/writings/dustin-diazs-dollarscriptjs/index.html +++ b/writings/dustin-diazs-dollarscriptjs/index.html @@ -21,4 +21,4 @@ $script.ready('plugin', function() { // use your plugin :) }); -

    It adds a little bit more control over the browser loading process, and as a bonus it doesn’t block the downloading of images and other documents. Check out the blog post or follow the project on Github.

    \ No newline at end of file +

    It adds a little bit more control over the browser loading process, and as a bonus it doesn’t block the downloading of images and other documents. Check out the blog post or follow the project on Github.

    \ No newline at end of file diff --git a/writings/dyluni-for-wordpress/index.html b/writings/dyluni-for-wordpress/index.html index b624425e8..1152d29e3 100644 --- a/writings/dyluni-for-wordpress/index.html +++ b/writings/dyluni-for-wordpress/index.html @@ -1 +1 @@ -Dyluni for Wordpress / Johan Brook

    Dyluni for Wordpress

    About 2 min reading time

    When you’ve created themes for Wordpress for a while, you’re starting to feel that you’re doing the same thing over and over again (which you technically are). Since many Wordpress sites got features you can and should reuse it would be awesome with a great boilerplate theme, wouldn’t it? A stripped, starting-off theme with all the essentials.

    The theme

    I finally got around to sort out the mess in my Sites folder, and structured and cleaned up this resemblance of a boilerplate theme I’ve been using for my last couple of projects. Since I’m using Sass for generating CSS, I tossed in my pre-written Sass files as well, also known as Dyluni Framework (such lame names, but might as well be unique). Note that this is my personal setup: go ahead and remove the stuff you don’t need/want and call me a lunatic. It’s okay. I think it’s a pretty solid template for starting off new Wordpress sites, so why not share it?

    Tech

    The markup is HTML5 (gimme a ‘hell yeah’) since I firmly believe it’s the future. You’ll see some CSS3 in the styling files, but I’ve worked quite hard with the semantics of our newest version of HTML. It’s a bit trickier — not everybody are not mastering it yet (with that said, I’m of course not claiming that my markup in this theme is error-free: I’d love your suggestions and help!). ARIA roles are added and used as hooks in the CSS. I’ve prepared some media queries for responsive web design for you, as well as a nice and cozy square grid for you. It’s simply the 35 column Square Grid with a 28px baseline (column and baseline image files reside in the “images” folder). Press ‘B’ on your keyboard for toggling the grid overlay. Be sure to remove that in production though. Go though the files and code quickly to get a hold of everything. Check out the stuff so you know what’s actually happening here. By that I mean the PHP template files, the Sass files, the Javascript and the functions.php file. Not every CSS class or PHP functions is meant for use out-of-the-box. As said, it’s a boilerplate.

    Download

    I’ve put the source on Github but you may grab a finished zip download from here. I’d love suggestions and feedback!

    \ No newline at end of file +Dyluni for Wordpress / Johan Brook

    Dyluni for Wordpress

    About 2 min reading time

    When you’ve created themes for Wordpress for a while, you’re starting to feel that you’re doing the same thing over and over again (which you technically are). Since many Wordpress sites got features you can and should reuse it would be awesome with a great boilerplate theme, wouldn’t it? A stripped, starting-off theme with all the essentials.

    The theme

    I finally got around to sort out the mess in my Sites folder, and structured and cleaned up this resemblance of a boilerplate theme I’ve been using for my last couple of projects. Since I’m using Sass for generating CSS, I tossed in my pre-written Sass files as well, also known as Dyluni Framework (such lame names, but might as well be unique). Note that this is my personal setup: go ahead and remove the stuff you don’t need/want and call me a lunatic. It’s okay. I think it’s a pretty solid template for starting off new Wordpress sites, so why not share it?

    Tech

    The markup is HTML5 (gimme a ‘hell yeah’) since I firmly believe it’s the future. You’ll see some CSS3 in the styling files, but I’ve worked quite hard with the semantics of our newest version of HTML. It’s a bit trickier — not everybody are not mastering it yet (with that said, I’m of course not claiming that my markup in this theme is error-free: I’d love your suggestions and help!). ARIA roles are added and used as hooks in the CSS. I’ve prepared some media queries for responsive web design for you, as well as a nice and cozy square grid for you. It’s simply the 35 column Square Grid with a 28px baseline (column and baseline image files reside in the “images” folder). Press ‘B’ on your keyboard for toggling the grid overlay. Be sure to remove that in production though. Go though the files and code quickly to get a hold of everything. Check out the stuff so you know what’s actually happening here. By that I mean the PHP template files, the Sass files, the Javascript and the functions.php file. Not every CSS class or PHP functions is meant for use out-of-the-box. As said, it’s a boilerplate.

    Download

    I’ve put the source on Github but you may grab a finished zip download from here. I’d love suggestions and feedback!

    \ No newline at end of file diff --git a/writings/eric-meyer-reset-revisited/index.html b/writings/eric-meyer-reset-revisited/index.html index 9d36c21d8..f35aee132 100644 --- a/writings/eric-meyer-reset-revisited/index.html +++ b/writings/eric-meyer-reset-revisited/index.html @@ -1 +1 @@ -Eric Meyer: Reset Revisited / Johan Brook

    Eric Meyer: Reset Revisited

    About 1 min reading time

    Follow link to meyerweb.com →

    Eric Meyer, the markup and CSS guru, has posted an updated version of his famous CSS reset. He includes a changelog in the post, but the addition of HTML5 elements are the most notable difference.

    \ No newline at end of file +Eric Meyer: Reset Revisited / Johan Brook

    Eric Meyer: Reset Revisited

    About 1 min reading time

    Follow link to meyerweb.com →

    Eric Meyer, the markup and CSS guru, has posted an updated version of his famous CSS reset. He includes a changelog in the post, but the addition of HTML5 elements are the most notable difference.

    \ No newline at end of file diff --git a/writings/euphoria/index.html b/writings/euphoria/index.html index 62958eb49..999f4477a 100644 --- a/writings/euphoria/index.html +++ b/writings/euphoria/index.html @@ -1 +1 @@ -Euphoria / Johan Brook

    Euphoria

    About 1 min reading time

    Rue

    [Euphoria](https://en.wikipedia.org/wiki/Euphoria_(American_TV_series) on HBO is my new favourite series. Even though my experience with the American teenage upbringing is non-existent, the show is very realistic and well made. It’s like Skam but with heavier drugs and … heavier of everything.

    I especially like the cinematography and fast paced storytelling. You get sucked in pretty easily. The main character, Rue, is portrayed perfectly. I find it interesting how they don’t romanticise youth, as other shows are doing. This show is dark — be prepared – it’s not this “Youth is wasted on the young” thing. More like “I’m glad you’re still alive, carrying all this shit around″.

    \ No newline at end of file +Euphoria / Johan Brook

    Euphoria

    About 1 min reading time

    Rue

    [Euphoria](https://en.wikipedia.org/wiki/Euphoria_(American_TV_series) on HBO is my new favourite series. Even though my experience with the American teenage upbringing is non-existent, the show is very realistic and well made. It’s like Skam but with heavier drugs and … heavier of everything.

    I especially like the cinematography and fast paced storytelling. You get sucked in pretty easily. The main character, Rue, is portrayed perfectly. I find it interesting how they don’t romanticise youth, as other shows are doing. This show is dark — be prepared – it’s not this “Youth is wasted on the young” thing. More like “I’m glad you’re still alive, carrying all this shit around″.

    \ No newline at end of file diff --git a/writings/figma-api-colors-css/index.html b/writings/figma-api-colors-css/index.html index 35350eefa..07d066c03 100644 --- a/writings/figma-api-colors-css/index.html +++ b/writings/figma-api-colors-css/index.html @@ -56,4 +56,4 @@ 
    <div class="bg-blue-10">
   <h1 class="text-orange-60">Orange 60</h1>
 </div>
-

    Done! 🌈

    Recap

    1. We create colour styles in Figma, according to the art on how to create colour systems.
    2. We update our CSS codebase with the colour styles’ names and HEX codes.
    3. Those are imported into our Tailwind config and the CSS is built based on the colours.
    4. We have the colours available as config variables in our CSS code or as classes in our HTML ✨

    Anytime you’d like to adjust the colours in your system, be sure to run the script in the CSS codebase and distribute a new version of the generated CSS file.

    Future work could include specifying whole component styles in Figma and parsing that into corresponding CSS rules ✌️

    \ No newline at end of file +

    Done! 🌈

    Recap

    1. We create colour styles in Figma, according to the art on how to create colour systems.
    2. We update our CSS codebase with the colour styles’ names and HEX codes.
    3. Those are imported into our Tailwind config and the CSS is built based on the colours.
    4. We have the colours available as config variables in our CSS code or as classes in our HTML ✨

    Anytime you’d like to adjust the colours in your system, be sure to run the script in the CSS codebase and distribute a new version of the generated CSS file.

    Future work could include specifying whole component styles in Figma and parsing that into corresponding CSS rules ✌️

    \ No newline at end of file diff --git a/writings/firefox-4-a-bitter-taste/index.html b/writings/firefox-4-a-bitter-taste/index.html index acda9ffe7..3792c487a 100644 --- a/writings/firefox-4-a-bitter-taste/index.html +++ b/writings/firefox-4-a-bitter-taste/index.html @@ -1 +1 @@ -Firefox 4 – a bitter taste / Johan Brook

    Firefox 4 – a bitter taste

    About 1 min reading time

    Follow link to rsms.me →

    Rasmus Andersson on the latest release of the Firefox browser: > Although Firefox 4 is a clear improvement over the previous version, it’s not the ultimate sports car you’ve been dreaming about taking to the streets. Firefox was the knight in shining armor, fighting Internet Explorer bravely. We’ve got a lot to thank Firefox, but today it almost seems like itself is the new IE. Sluggish, non-native, and not up to date with the latest web technologies is not attractive. Sort of like that weird, anti-social cousin you have to invite to the party. Rasmus further talks about some UI/UX features and drawbacks. I’ve tested the beta, but when I installed the stable version there was this “meh” moment. I don’t hate Firefox, but I don’t love it either. It’s great for development — Firebug is superior to the WebKit Inspector sometimes — but the whole application just seems so awkward and non-native. I’ve moved to Chrome from Safari, and I love Chrome’s minimal approach and its snappiness — things Firefox lacks. Funny how Mozilla fails to get back in the game when they clearly see how Chrome gains market share, and Safari rambles on with full throttle. But since Firefox 5 most likely will arrive this summer, and Firefox 6 isn’t that far behind, Mozilla shows that they’re focused on more rapid iterations. Rasmus shows us a lot of things Mozilla still got wrong in Firefox. It’s a depressive list, to be honest.

    \ No newline at end of file +Firefox 4 – a bitter taste / Johan Brook

    Firefox 4 – a bitter taste

    About 1 min reading time

    Follow link to rsms.me →

    Rasmus Andersson on the latest release of the Firefox browser: > Although Firefox 4 is a clear improvement over the previous version, it’s not the ultimate sports car you’ve been dreaming about taking to the streets. Firefox was the knight in shining armor, fighting Internet Explorer bravely. We’ve got a lot to thank Firefox, but today it almost seems like itself is the new IE. Sluggish, non-native, and not up to date with the latest web technologies is not attractive. Sort of like that weird, anti-social cousin you have to invite to the party. Rasmus further talks about some UI/UX features and drawbacks. I’ve tested the beta, but when I installed the stable version there was this “meh” moment. I don’t hate Firefox, but I don’t love it either. It’s great for development — Firebug is superior to the WebKit Inspector sometimes — but the whole application just seems so awkward and non-native. I’ve moved to Chrome from Safari, and I love Chrome’s minimal approach and its snappiness — things Firefox lacks. Funny how Mozilla fails to get back in the game when they clearly see how Chrome gains market share, and Safari rambles on with full throttle. But since Firefox 5 most likely will arrive this summer, and Firefox 6 isn’t that far behind, Mozilla shows that they’re focused on more rapid iterations. Rasmus shows us a lot of things Mozilla still got wrong in Firefox. It’s a depressive list, to be honest.

    \ No newline at end of file diff --git a/writings/firesheep-why-https-is-important/index.html b/writings/firesheep-why-https-is-important/index.html index a6fa038d6..50a365f97 100644 --- a/writings/firesheep-why-https-is-important/index.html +++ b/writings/firesheep-why-https-is-important/index.html @@ -1 +1 @@ -Firesheep – why HTTPS is important / Johan Brook

    Firesheep – why HTTPS is important

    About 1 min reading time

    Follow link to codebutler.com →

    Eric Butler has written a Firefox extension which sniffs all connections made to insecure websites inside your current WiFi area. You can even double click on the identities in the sidebar and log in as them. Totally freaky. > HTTP session hijacking (sometimes called “sidejacking”) is when an attacker gets a hold of a user’s cookie, allowing them to do anything the user can do on a particular website. On an open wireless network, cookies are basically shouted through the air, making these attacks extremely easy. This is a widely known problem that has been talked about to death, yet very popular websites continue to fail at protecting their users. The only effective fix for this problem is full end-to-end encryption, known on the web as HTTPS or SSL.

    \ No newline at end of file +Firesheep – why HTTPS is important / Johan Brook

    Firesheep – why HTTPS is important

    About 1 min reading time

    Follow link to codebutler.com →

    Eric Butler has written a Firefox extension which sniffs all connections made to insecure websites inside your current WiFi area. You can even double click on the identities in the sidebar and log in as them. Totally freaky. > HTTP session hijacking (sometimes called “sidejacking”) is when an attacker gets a hold of a user’s cookie, allowing them to do anything the user can do on a particular website. On an open wireless network, cookies are basically shouted through the air, making these attacks extremely easy. This is a widely known problem that has been talked about to death, yet very popular websites continue to fail at protecting their users. The only effective fix for this problem is full end-to-end encryption, known on the web as HTTPS or SSL.

    \ No newline at end of file diff --git a/writings/five-record-breaking-torrent-files/index.html b/writings/five-record-breaking-torrent-files/index.html index 46c33599d..8b8a7a04b 100644 --- a/writings/five-record-breaking-torrent-files/index.html +++ b/writings/five-record-breaking-torrent-files/index.html @@ -1 +1 @@ -Five record breaking torrent files / Johan Brook

    Five record breaking torrent files

    About 1 min reading time

    Follow link to torrentfreak.com →

    TorrentFreak writes about five torrents which has broken memorial records. From the largest in size to the oldest but still alive today. I get warm and fuzzy over the geekiness of the oldest torrent: The Matrix ASCII.

    \ No newline at end of file +Five record breaking torrent files / Johan Brook

    Five record breaking torrent files

    About 1 min reading time

    Follow link to torrentfreak.com →

    TorrentFreak writes about five torrents which has broken memorial records. From the largest in size to the oldest but still alive today. I get warm and fuzzy over the geekiness of the oldest torrent: The Matrix ASCII.

    \ No newline at end of file diff --git a/writings/flow-out-of-beta/index.html b/writings/flow-out-of-beta/index.html index c65417243..b004bbbf0 100644 --- a/writings/flow-out-of-beta/index.html +++ b/writings/flow-out-of-beta/index.html @@ -1 +1 @@ -Flow out of beta / Johan Brook

    Flow out of beta

    About 1 min reading time

    Flow, the bastard child of Things and Basecamp, goes out of beta and introduces a priced business model as of today. I’ve been beta testing it for a while, and I can truly state that I’ve finally found the holy service that lets me

    1. sync tasks with my iPhone
    2. access my tasks in a quick web interface
    3. collaborate with others in projects

    I’m currently using a Simplenote solution for regular notes and text documents, since it syncs nicely with my iPhone, desktop and to a web interface. It’s not optimal for tasks and collaboration though. Flow provides a commenting system and even let you upload files along with them. The project members can assign tasks and keep track of each others’ progress. The great news of today is that a companion iPhone app is released in App Store. That’s a killer: manage everything you need from your iPhone, and it’ll sync. Collaborate, assign tasks, comment and it’ll sync. It’s free, go grab it. Put web-Flow in a Fluid app and you’re ready to roll and use it as a desktop application. Be sure to check out the official OS X menu bar app where you’re able to quick add tasks. Along with going out of beta, Flow is now a paid service. $9.99 per month, or $99 per year. The monthly price is a bit steep for me, but I can absolutely see myself pay for a year (especially since it’s $30 off for beta testers). It’s a really nice initiative from the creators, Metalab, and I’m certainly willing to support it. And they all sync. Heaven is here.

    \ No newline at end of file +Flow out of beta / Johan Brook

    Flow out of beta

    About 1 min reading time

    Flow, the bastard child of Things and Basecamp, goes out of beta and introduces a priced business model as of today. I’ve been beta testing it for a while, and I can truly state that I’ve finally found the holy service that lets me

    1. sync tasks with my iPhone
    2. access my tasks in a quick web interface
    3. collaborate with others in projects

    I’m currently using a Simplenote solution for regular notes and text documents, since it syncs nicely with my iPhone, desktop and to a web interface. It’s not optimal for tasks and collaboration though. Flow provides a commenting system and even let you upload files along with them. The project members can assign tasks and keep track of each others’ progress. The great news of today is that a companion iPhone app is released in App Store. That’s a killer: manage everything you need from your iPhone, and it’ll sync. Collaborate, assign tasks, comment and it’ll sync. It’s free, go grab it. Put web-Flow in a Fluid app and you’re ready to roll and use it as a desktop application. Be sure to check out the official OS X menu bar app where you’re able to quick add tasks. Along with going out of beta, Flow is now a paid service. $9.99 per month, or $99 per year. The monthly price is a bit steep for me, but I can absolutely see myself pay for a year (especially since it’s $30 off for beta testers). It’s a really nice initiative from the creators, Metalab, and I’m certainly willing to support it. And they all sync. Heaven is here.

    \ No newline at end of file diff --git a/writings/formalize-css-consistent-forms/index.html b/writings/formalize-css-consistent-forms/index.html index a2a956cc0..74a36eb49 100644 --- a/writings/formalize-css-consistent-forms/index.html +++ b/writings/formalize-css-consistent-forms/index.html @@ -1 +1 @@ -Formalize CSS – consistent forms / Johan Brook

    Formalize CSS – consistent forms

    About 1 min reading time

    Follow link to sonspring.com →

    Some thorough work by Nathan Smith (creator of the 960 grid system) with the goal to remove inconsistencies between browsers and platforms. > I want some measure of control over form elements, without changing them so drastically as to appear foreign in a user’s operating system. Thus, my quest to find a happy medium, where browsers would generally agree and let me keep my sanity. The result is what I’m simply referring to as  Formalize CSS. It’s some really good work he’s done there, and I’ll for sure take a closer look.

    \ No newline at end of file +Formalize CSS – consistent forms / Johan Brook

    Formalize CSS – consistent forms

    About 1 min reading time

    Follow link to sonspring.com →

    Some thorough work by Nathan Smith (creator of the 960 grid system) with the goal to remove inconsistencies between browsers and platforms. > I want some measure of control over form elements, without changing them so drastically as to appear foreign in a user’s operating system. Thus, my quest to find a happy medium, where browsers would generally agree and let me keep my sanity. The result is what I’m simply referring to as  Formalize CSS. It’s some really good work he’s done there, and I’ll for sure take a closer look.

    \ No newline at end of file diff --git a/writings/frp-app-arch/index.html b/writings/frp-app-arch/index.html index bedf8360b..764f46ff9 100644 --- a/writings/frp-app-arch/index.html +++ b/writings/frp-app-arch/index.html @@ -444,4 +444,4 @@ }, startState, ); -

    That’s it! Now we can handle all side effects in their special drivers, where they can do all kinds of reads and writes with the external world, and safely pass back their results as sources (“input”) to our app.

    Parting words

    What I love about this architecture we’ve just built are these things:

    • Reasoning in reactive streams! 😍 Forget about mutability and writing imperative code. Say hello to declarative code and “tight” business logic.
    • How well it goes along with React’s virtual DOM nature.
    • How the architecture is flexible enough to allow for all varieties of organising your app, still being strict with what types you pass around.
    • How well it scales. Almost every new feature you’ll add to your app will be written in the same style.
    • How safe I feel when everything from the library layer (Frap) to the view layer (React) is handled with a type system (Typescript).

    Here’s the complete library code:

    lookback/frap

    A huge shoutout to the creators of CycleJS. We’ve been inspired by them in just about everything. Thanks for popularising the ideas of cyclical data flows!

    Thank you so much for reading ✨

    \ No newline at end of file +

    That’s it! Now we can handle all side effects in their special drivers, where they can do all kinds of reads and writes with the external world, and safely pass back their results as sources (“input”) to our app.

    Parting words

    What I love about this architecture we’ve just built are these things:

    • Reasoning in reactive streams! 😍 Forget about mutability and writing imperative code. Say hello to declarative code and “tight” business logic.
    • How well it goes along with React’s virtual DOM nature.
    • How the architecture is flexible enough to allow for all varieties of organising your app, still being strict with what types you pass around.
    • How well it scales. Almost every new feature you’ll add to your app will be written in the same style.
    • How safe I feel when everything from the library layer (Frap) to the view layer (React) is handled with a type system (Typescript).

    Here’s the complete library code:

    lookback/frap

    A huge shoutout to the creators of CycleJS. We’ve been inspired by them in just about everything. Thanks for popularising the ideas of cyclical data flows!

    Thank you so much for reading ✨

    \ No newline at end of file diff --git a/writings/generalist-specialists/index.html b/writings/generalist-specialists/index.html index 3d21f41f4..2d2685a80 100644 --- a/writings/generalist-specialists/index.html +++ b/writings/generalist-specialists/index.html @@ -1 +1 @@ -Generalist specialists / Johan Brook

    Generalist specialists

    About 1 min reading time

    Follow link to markdotto.com →

    Mark Otto brings up an interesting subject: how to widen your horizon into other areas than your main focus. He reference to a model of a ‘T’ letter, where your skills sit in in the vertical columns. The title of his post, “Fatten Up Those T’s”, describes how you should make your own T fatter by learning new things. This is a theory I like. I’ve always been interested in a lot of stuff — from pure graphic design to back-end code. I refuse to believe that you have to be a specialist in order to land great jobs and gigs. Since there’s a myriad of web technologies available today, the demand for über specialized people aren’t that high. Imagine a pure designer person today. No HTML or CSS knowledge, and absolutely no Javascript skills whatsoever. I don’t know about you, but I would think twice before hiring that person:

    • If or when the next step comes you have to get another guy doing that work
    • If you need to add even a tiny feature, you have to find a contractor/freelancer doing that
    • If the design person hasn’t even the slightest clue about basic front-end code, how is the collaboration going to work?

    If you are something of a Jack of all trades, I’d guess you would be instantly more flexible on the job market. I’ve never been fond of locking myself into a single technology — I don’t believe it’s healthy neither for the mind nor the career. I also warmly recommend this article, ‘In Defense of the Jack of All Trades’, where the author brings up several honorable properties: endless curiosity, a love of learning, and a deep-seated need for control. Being a renaissance man on the web in 2011 is certainly possible.

    \ No newline at end of file +Generalist specialists / Johan Brook

    Generalist specialists

    About 1 min reading time

    Follow link to markdotto.com →

    Mark Otto brings up an interesting subject: how to widen your horizon into other areas than your main focus. He reference to a model of a ‘T’ letter, where your skills sit in in the vertical columns. The title of his post, “Fatten Up Those T’s”, describes how you should make your own T fatter by learning new things. This is a theory I like. I’ve always been interested in a lot of stuff — from pure graphic design to back-end code. I refuse to believe that you have to be a specialist in order to land great jobs and gigs. Since there’s a myriad of web technologies available today, the demand for über specialized people aren’t that high. Imagine a pure designer person today. No HTML or CSS knowledge, and absolutely no Javascript skills whatsoever. I don’t know about you, but I would think twice before hiring that person:

    • If or when the next step comes you have to get another guy doing that work
    • If you need to add even a tiny feature, you have to find a contractor/freelancer doing that
    • If the design person hasn’t even the slightest clue about basic front-end code, how is the collaboration going to work?

    If you are something of a Jack of all trades, I’d guess you would be instantly more flexible on the job market. I’ve never been fond of locking myself into a single technology — I don’t believe it’s healthy neither for the mind nor the career. I also warmly recommend this article, ‘In Defense of the Jack of All Trades’, where the author brings up several honorable properties: endless curiosity, a love of learning, and a deep-seated need for control. Being a renaissance man on the web in 2011 is certainly possible.

    \ No newline at end of file diff --git a/writings/get-it-out-there-matt-mullenweg-on-shipping-software/index.html b/writings/get-it-out-there-matt-mullenweg-on-shipping-software/index.html index aab5d00b4..720e3c213 100644 --- a/writings/get-it-out-there-matt-mullenweg-on-shipping-software/index.html +++ b/writings/get-it-out-there-matt-mullenweg-on-shipping-software/index.html @@ -1 +1 @@ -Get it out there – Matt Mullenweg on shipping software / Johan Brook

    Get it out there – Matt Mullenweg on shipping software

    About 1 min reading time

    Follow link to ma.tt →

    Wordpress’ Matt Mullenweg on product releases — how to get your 1.0 product out there.

    What killed us was “one more thing.” We could have easily done three major releases that year if we had drawn a line in the sand, said “finished,” and shipped the darn thing. The problem is that the longer it’s been since your last release the more pressure and anticipation there is, so you’re more likely to try to slip in just one more thing or a fix that will make a feature really shine. For some projects, this literally goes on forever. I think it’s really important just to create things and get into the game. It creates a feel of productivity, rather than having 5-10 half-assed ideas laying around, making you feel bad and stresses you out for not doing anything with them. When I’m having ideas for stuff I want to do, I can’t think of anything else during that time. Only when I start creating, and maybe quite it when realizing that it wasn’t what I expected, I’ve got good conscience. In most cases, it’s just a matter of creating a product that does ONE thing really well, and then build upon that:

    \ No newline at end of file +Get it out there – Matt Mullenweg on shipping software / Johan Brook

    Get it out there – Matt Mullenweg on shipping software

    About 1 min reading time

    Follow link to ma.tt →

    Wordpress’ Matt Mullenweg on product releases — how to get your 1.0 product out there.

    What killed us was “one more thing.” We could have easily done three major releases that year if we had drawn a line in the sand, said “finished,” and shipped the darn thing. The problem is that the longer it’s been since your last release the more pressure and anticipation there is, so you’re more likely to try to slip in just one more thing or a fix that will make a feature really shine. For some projects, this literally goes on forever. I think it’s really important just to create things and get into the game. It creates a feel of productivity, rather than having 5-10 half-assed ideas laying around, making you feel bad and stresses you out for not doing anything with them. When I’m having ideas for stuff I want to do, I can’t think of anything else during that time. Only when I start creating, and maybe quite it when realizing that it wasn’t what I expected, I’ve got good conscience. In most cases, it’s just a matter of creating a product that does ONE thing really well, and then build upon that:

    \ No newline at end of file diff --git a/writings/git-guidelines/index.html b/writings/git-guidelines/index.html index cbb6d18cc..d648c0168 100644 --- a/writings/git-guidelines/index.html +++ b/writings/git-guidelines/index.html @@ -30,4 +30,4 @@ git rebase -i HEAD~5 # or git rebase -i git-hash^ # ^ is targetting the parent commit -

    An editor will open with your included commits listed. There’ll be a legend below them describing how to rewrite history. You can drop commits (d), squash together commits (s), and more. You’ll be able to rewrite the commits messages too.

    Aftermath

    After we introduced some baselines in how we commit and share code, I personally felt much more motivated to keep things neat and tidy (aka. “Broken window syndrome”). Git isn’t just a tool to transport code from your laptop to a server: it’s a super cool tool created to help us collaborate better, and to fix stuff when things go bad (which will happen sometime).

    I found myself actually enjoying writing extended paragraphs in my commit messages. It brought back some memories in doing literate programming in CoffeeScript for university lab assignments. The shorter the commit diff, the longer my commit message would be — a funny inverse proportional property!

    It also touches me every time I go back and see somebody had put in some effort in the commit message, and documented the process, the Why, and the outcome. It’s like a time machine in your colleagues’ minds, and also in their personal development to become better programmers.

    \ No newline at end of file +

    An editor will open with your included commits listed. There’ll be a legend below them describing how to rewrite history. You can drop commits (d), squash together commits (s), and more. You’ll be able to rewrite the commits messages too.

    Aftermath

    After we introduced some baselines in how we commit and share code, I personally felt much more motivated to keep things neat and tidy (aka. “Broken window syndrome”). Git isn’t just a tool to transport code from your laptop to a server: it’s a super cool tool created to help us collaborate better, and to fix stuff when things go bad (which will happen sometime).

    I found myself actually enjoying writing extended paragraphs in my commit messages. It brought back some memories in doing literate programming in CoffeeScript for university lab assignments. The shorter the commit diff, the longer my commit message would be — a funny inverse proportional property!

    It also touches me every time I go back and see somebody had put in some effort in the commit message, and documented the process, the Why, and the outcome. It’s like a time machine in your colleagues’ minds, and also in their personal development to become better programmers.

    \ No newline at end of file diff --git a/writings/good-software-is-like-a-knot/index.html b/writings/good-software-is-like-a-knot/index.html index baff32ee5..adc8a2948 100644 --- a/writings/good-software-is-like-a-knot/index.html +++ b/writings/good-software-is-like-a-knot/index.html @@ -1 +1 @@ -Good software is like a knot / Johan Brook

    Good software is like a knot

    About 1 min reading time

    Warning: philosophical, almost silly, post about knots ahead

    While I was getting our sailing boat in order for a trip during the past weekend, I had an insight.

    Good software code is like a reliable knot

    I was tying some ropes and it hit me how knots can be as beautiful, simple, messy and complex as code is.

    • A good knot should be elegant but robust
    • A good knot should be simple enough to understand and solve by another person
    • The more complex the knot is, the more open it is to vulnerabilities and weaknesses
    • Using existing knots which are proved to work in certain conditions is good
    • A good knot in one situation may not be the optimal choice in another

    Now switch knot above to piece of code or software.

    I reckon you might be able to draw parallels about programming to many areas, but I think knots are one of the clearest comparisons.

    \ No newline at end of file +Good software is like a knot / Johan Brook

    Good software is like a knot

    About 1 min reading time

    Warning: philosophical, almost silly, post about knots ahead

    While I was getting our sailing boat in order for a trip during the past weekend, I had an insight.

    Good software code is like a reliable knot

    I was tying some ropes and it hit me how knots can be as beautiful, simple, messy and complex as code is.

    • A good knot should be elegant but robust
    • A good knot should be simple enough to understand and solve by another person
    • The more complex the knot is, the more open it is to vulnerabilities and weaknesses
    • Using existing knots which are proved to work in certain conditions is good
    • A good knot in one situation may not be the optimal choice in another

    Now switch knot above to piece of code or software.

    I reckon you might be able to draw parallels about programming to many areas, but I think knots are one of the clearest comparisons.

    \ No newline at end of file diff --git a/writings/google-h264-and-video-on-the-web/index.html b/writings/google-h264-and-video-on-the-web/index.html index 21b057ba7..f4580f52b 100644 --- a/writings/google-h264-and-video-on-the-web/index.html +++ b/writings/google-h264-and-video-on-the-web/index.html @@ -1 +1 @@ -"Google, H.264 and video on the web" / Johan Brook

    "Google, H.264 and video on the web"

    About 1 min reading time

    Follow link to farukat.es →

    What does Google have to gain from dropping H.264? Nothing at face value; it’s all to do with preventing H.264 from becoming the de facto standard for “Video on the Web”, not realizing that it already is. Perhaps Google made this move to try and dethrone H.264, but to that end, I have but one question: Why do it in a way that hurts your users when time itself would sort that out automatically? Faruk Ateş′ great write-up on the situation with Google’s rejection of the H.264 codec in Chrome. It’s one thing to invent a new codec or format, put it in your browser and lobby for other vendors and manufacturers to support it. But Google has completely shut off any chance for H.264 to be a really great standard for video on the internet. The author put it: “Time will take care of this itself”, which is quite obvious. VHS took care of Betamax, Blueray took care of HD-DVD. > If that’s really why they did it, and that’s all it is, then harming users in the process is a poor decision in my opinion. Especially since that very same goal could have been accomplished with just a little waiting.

    \ No newline at end of file +"Google, H.264 and video on the web" / Johan Brook

    "Google, H.264 and video on the web"

    About 1 min reading time

    Follow link to farukat.es →

    What does Google have to gain from dropping H.264? Nothing at face value; it’s all to do with preventing H.264 from becoming the de facto standard for “Video on the Web”, not realizing that it already is. Perhaps Google made this move to try and dethrone H.264, but to that end, I have but one question: Why do it in a way that hurts your users when time itself would sort that out automatically? Faruk Ateş′ great write-up on the situation with Google’s rejection of the H.264 codec in Chrome. It’s one thing to invent a new codec or format, put it in your browser and lobby for other vendors and manufacturers to support it. But Google has completely shut off any chance for H.264 to be a really great standard for video on the internet. The author put it: “Time will take care of this itself”, which is quite obvious. VHS took care of Betamax, Blueray took care of HD-DVD. > If that’s really why they did it, and that’s all it is, then harming users in the process is a poor decision in my opinion. Especially since that very same goal could have been accomplished with just a little waiting.

    \ No newline at end of file diff --git a/writings/google-to-release-a-webm-plugin-for-safari-and-ie9/index.html b/writings/google-to-release-a-webm-plugin-for-safari-and-ie9/index.html index f5c8c7209..c5fa67736 100644 --- a/writings/google-to-release-a-webm-plugin-for-safari-and-ie9/index.html +++ b/writings/google-to-release-a-webm-plugin-for-safari-and-ie9/index.html @@ -1 +1 @@ -Google to release a WebM plugin for Safari and IE9 / Johan Brook

    Google to release a WebM plugin for Safari and IE9

    About 1 min reading time

    Follow link to techcrunch.com →

    Clarified that the Safari and IE9 plug-ins to be released by the WebM Project Team enable WebM playback via the HTML standard <video> tag canPlayType interface and not an alternate non-standard method.

    Are Google serious? They’re now talking about this WebM plugin for browser that doesn’t support it out of the box. As TechCrunch put it: “So much for web standard”. In my world, web standards make your browser ready to go to surf the web — all batteries included. The battle against Flash was useless if another plugin will be required to play half of the web’s video. You neither can nor should call a plugin “a standard”. Dangerous move, Google, but you’ll probably get away with it. As usual.

    \ No newline at end of file +Google to release a WebM plugin for Safari and IE9 / Johan Brook

    Google to release a WebM plugin for Safari and IE9

    About 1 min reading time

    Follow link to techcrunch.com →

    Clarified that the Safari and IE9 plug-ins to be released by the WebM Project Team enable WebM playback via the HTML standard <video> tag canPlayType interface and not an alternate non-standard method.

    Are Google serious? They’re now talking about this WebM plugin for browser that doesn’t support it out of the box. As TechCrunch put it: “So much for web standard”. In my world, web standards make your browser ready to go to surf the web — all batteries included. The battle against Flash was useless if another plugin will be required to play half of the web’s video. You neither can nor should call a plugin “a standard”. Dangerous move, Google, but you’ll probably get away with it. As usual.

    \ No newline at end of file diff --git a/writings/great-articles-about-design-code-and-life/index.html b/writings/great-articles-about-design-code-and-life/index.html index 986f2418f..9d71ea03b 100644 --- a/writings/great-articles-about-design-code-and-life/index.html +++ b/writings/great-articles-about-design-code-and-life/index.html @@ -1 +1 @@ -Great articles about design, code, and life / Johan Brook

    Great articles about design, code, and life

    About 2 min reading time

    That web designers and developers share their ideas, tools and techniques is vital and one of the wonders of the modern day internet. So much knowledge, inspiration, and experience is passed on from one and another — may it be with blogs, tweets, forum posts, or post comments. I think it’s an incredible phenomenon and what’s driving the web forward: developing an idea, share it, discuss it, get feedback. I will in this post discuss some of the articles I find really interesting, smart, or just plain good read.

    Responsive Web Design by Ethan Marcotte

    http://www.alistapart.com/articles/responsive-web-design/

    What to say about this ground breaking article by Mr. Marcotte? Well, it will surely go down in the annals to our grandchildren as the one article that spawned a shift in paradigms. I remember when I first read it: I found the result very cool, but it took some effort for me to wrap my head around the techniques (the source code). Nevertheless, responsive web design is now a global “movement” (or whatever) which is becoming a standard way of building web sites among respected designers and developers. Thanks Ethan!

    The secret law of page harmony by Alex Charchar

    http://retinart.net/graphic-design/secret-law-of-page-harmony/

    I could have just linked to Retinart.net, which is where Alex Charchar writes deep and thoughtful articles about graphic design, typography, and layout. They are inspiring and do what a good article should do: grow a seed of thought in its reader. The secret law of page harmony is especially a good read, since it made me think about layout, modules, and ratios in a new way.

    Rethinking CSS grids by Mark Boulton

    http://www.markboulton.co.uk/journal/comments/rethinking-css-grids

    Mark Boulton (the King of Grids) is writing about how he should model a new grid module in CSS, i.e. how the syntax of defining columns, gutters and everything should work. Mr. Boulton is also writing a book on grid systems for the web, as well as releasing a tool – Gridset – for working with grids online.

    The design of HTML5 by Jeremy Keith

    http://adactio.com/articles/1704/

    A transcription of one of Jeremy Keith’s great talks. Recommended.

    To hell with bad devices: Responsive web design and web standards by Marc Drummond

    http://marcdrummond.com/web-standards/2011/06/20/hell-bad-devices-responsive-web-design-and-web-standards

    Essential reading about responsive web design, mobile, and all.

    Native vs. web apps by Faruk Ateş

    http://farukat.es/journal/2011/03/537-native-vs-web-apps

    Ambitious post which sums up the “Native vs. web apps” discussion quite well. I have come to the opinion that web apps should not try to mimic native apps in everything. Creating a native looking iOS for instance, will force you to squeeze water from a rock in order to duplicate every UI detail in the OS’s look and feel, which took Apple themselves a good period of time (and they wrote it in native code!). I’m talking about view transitions, touch responsiveness, and general UX. You just know when you are using a web app which is trying so hard to be native. Please don’t. Use the web’s strengths, and make web apps that are built for the web.

    The graphing calculator story by Ron Avitzur

    http://www.pacifict.com/Story/

    A post about an undercover project inside Apple (!), which is very interesting.

    Tom Williams: Hired by Apple at 14 by Derek Sivers

    http://sivers.org/tom-williams

    A story about strong will, entrepreneurship, and that anything really is possible.

    Perhaps I have forgotten some of the gems I have read, but in that case I will update this post. It’s tricky to go back in time and try to remember all the good stuff you have read. I really should try start using a link collecting service …

    \ No newline at end of file +Great articles about design, code, and life / Johan Brook

    Great articles about design, code, and life

    About 2 min reading time

    That web designers and developers share their ideas, tools and techniques is vital and one of the wonders of the modern day internet. So much knowledge, inspiration, and experience is passed on from one and another — may it be with blogs, tweets, forum posts, or post comments. I think it’s an incredible phenomenon and what’s driving the web forward: developing an idea, share it, discuss it, get feedback. I will in this post discuss some of the articles I find really interesting, smart, or just plain good read.

    Responsive Web Design by Ethan Marcotte

    http://www.alistapart.com/articles/responsive-web-design/

    What to say about this ground breaking article by Mr. Marcotte? Well, it will surely go down in the annals to our grandchildren as the one article that spawned a shift in paradigms. I remember when I first read it: I found the result very cool, but it took some effort for me to wrap my head around the techniques (the source code). Nevertheless, responsive web design is now a global “movement” (or whatever) which is becoming a standard way of building web sites among respected designers and developers. Thanks Ethan!

    The secret law of page harmony by Alex Charchar

    http://retinart.net/graphic-design/secret-law-of-page-harmony/

    I could have just linked to Retinart.net, which is where Alex Charchar writes deep and thoughtful articles about graphic design, typography, and layout. They are inspiring and do what a good article should do: grow a seed of thought in its reader. The secret law of page harmony is especially a good read, since it made me think about layout, modules, and ratios in a new way.

    Rethinking CSS grids by Mark Boulton

    http://www.markboulton.co.uk/journal/comments/rethinking-css-grids

    Mark Boulton (the King of Grids) is writing about how he should model a new grid module in CSS, i.e. how the syntax of defining columns, gutters and everything should work. Mr. Boulton is also writing a book on grid systems for the web, as well as releasing a tool – Gridset – for working with grids online.

    The design of HTML5 by Jeremy Keith

    http://adactio.com/articles/1704/

    A transcription of one of Jeremy Keith’s great talks. Recommended.

    To hell with bad devices: Responsive web design and web standards by Marc Drummond

    http://marcdrummond.com/web-standards/2011/06/20/hell-bad-devices-responsive-web-design-and-web-standards

    Essential reading about responsive web design, mobile, and all.

    Native vs. web apps by Faruk Ateş

    http://farukat.es/journal/2011/03/537-native-vs-web-apps

    Ambitious post which sums up the “Native vs. web apps” discussion quite well. I have come to the opinion that web apps should not try to mimic native apps in everything. Creating a native looking iOS for instance, will force you to squeeze water from a rock in order to duplicate every UI detail in the OS’s look and feel, which took Apple themselves a good period of time (and they wrote it in native code!). I’m talking about view transitions, touch responsiveness, and general UX. You just know when you are using a web app which is trying so hard to be native. Please don’t. Use the web’s strengths, and make web apps that are built for the web.

    The graphing calculator story by Ron Avitzur

    http://www.pacifict.com/Story/

    A post about an undercover project inside Apple (!), which is very interesting.

    Tom Williams: Hired by Apple at 14 by Derek Sivers

    http://sivers.org/tom-williams

    A story about strong will, entrepreneurship, and that anything really is possible.

    Perhaps I have forgotten some of the gems I have read, but in that case I will update this post. It’s tricky to go back in time and try to remember all the good stuff you have read. I really should try start using a link collecting service …

    \ No newline at end of file diff --git a/writings/gridset-create-advanced-grid-systems-on-the-web/index.html b/writings/gridset-create-advanced-grid-systems-on-the-web/index.html index 7bb988d48..edddc2de2 100644 --- a/writings/gridset-create-advanced-grid-systems-on-the-web/index.html +++ b/writings/gridset-create-advanced-grid-systems-on-the-web/index.html @@ -1 +1 @@ -Gridset – create advanced grid systems on the web / Johan Brook

    Gridset – create advanced grid systems on the web

    About 1 min reading time

    Follow link to gridsetapp.com →

    Gridset is a tool for making grids. It lets you create whatever type of grid you want: columnar, asymmetrical, ratio, compound, fixed, fluid, responsive and more. It serves multiple grids to your site based on breakpoints for different devices. I’m so excited for this app that I had to post it here. From Mark Boulton et al., what could go wrong? (which is the case with grid generators).

    \ No newline at end of file +Gridset – create advanced grid systems on the web / Johan Brook

    Gridset – create advanced grid systems on the web

    About 1 min reading time

    Follow link to gridsetapp.com →

    Gridset is a tool for making grids. It lets you create whatever type of grid you want: columnar, asymmetrical, ratio, compound, fixed, fluid, responsive and more. It serves multiple grids to your site based on breakpoints for different devices. I’m so excited for this app that I had to post it here. From Mark Boulton et al., what could go wrong? (which is the case with grid generators).

    \ No newline at end of file diff --git a/writings/hiring-developers-2012-style/index.html b/writings/hiring-developers-2012-style/index.html index e5b955ba5..9e595b7aa 100644 --- a/writings/hiring-developers-2012-style/index.html +++ b/writings/hiring-developers-2012-style/index.html @@ -1 +1 @@ -Hiring developers 2012 style / Johan Brook

    Hiring developers 2012 style

    About 1 min reading time

    Follow link to 37signals.com →

    David Heinemeier Hansson from 37signals on hiring developers.

    I’ve known fabulous programmers flame out in the quizzing cage and terrible ones excel. So unless you’re specifically hiring someone to design you the next sorting algorithm, making them do so on the white board is a poor gauge of future success. I’ve read many articles on this subject: how to ace an interview for a developer position. Even for front-end positions, questions about algorithms and similar “puzzles” arise. Sorry, but I actually think you have to tailor the interview material for the practical assignments the interviewee will receive.

    Today, most developers (at least web developers) don’t write computer science-y stuff all day long. We solve real world problems, read documentation, build scalable systems, cooperate (social skills are vital!), implementing other people’s code, and more. Quizzes are fine, as long as they are relevant for the actual work I am going to do.

    (Also: see 37signals job listing for an interface designer position some time ago, I wrote about and linked to it).

    \ No newline at end of file +Hiring developers 2012 style / Johan Brook

    Hiring developers 2012 style

    About 1 min reading time

    Follow link to 37signals.com →

    David Heinemeier Hansson from 37signals on hiring developers.

    I’ve known fabulous programmers flame out in the quizzing cage and terrible ones excel. So unless you’re specifically hiring someone to design you the next sorting algorithm, making them do so on the white board is a poor gauge of future success. I’ve read many articles on this subject: how to ace an interview for a developer position. Even for front-end positions, questions about algorithms and similar “puzzles” arise. Sorry, but I actually think you have to tailor the interview material for the practical assignments the interviewee will receive.

    Today, most developers (at least web developers) don’t write computer science-y stuff all day long. We solve real world problems, read documentation, build scalable systems, cooperate (social skills are vital!), implementing other people’s code, and more. Quizzes are fine, as long as they are relevant for the actual work I am going to do.

    (Also: see 37signals job listing for an interface designer position some time ago, I wrote about and linked to it).

    \ No newline at end of file diff --git a/writings/homemade-is-best/index.html b/writings/homemade-is-best/index.html index 73054f85e..6e374ef05 100644 --- a/writings/homemade-is-best/index.html +++ b/writings/homemade-is-best/index.html @@ -1 +1 @@ -Homemade is best / Johan Brook

    Homemade is best

    About 1 min reading time

    Follow link to demo.fb.se →

    The renowned Swedish agency Forsman & Bodenfors has created a pretty but unusual cook book for IKEA. > 90% of all the photographs taken in baking books look extremly alike. We wanted to try something different and present the recipes in a totally new fashion.

    \ No newline at end of file +Homemade is best / Johan Brook

    Homemade is best

    About 1 min reading time

    Follow link to demo.fb.se →

    The renowned Swedish agency Forsman & Bodenfors has created a pretty but unusual cook book for IKEA. > 90% of all the photographs taken in baking books look extremly alike. We wanted to try something different and present the recipes in a totally new fashion.

    \ No newline at end of file diff --git a/writings/how-37signals-handles-customer-service/index.html b/writings/how-37signals-handles-customer-service/index.html index 4b1f2c48c..f0accb450 100644 --- a/writings/how-37signals-handles-customer-service/index.html +++ b/writings/how-37signals-handles-customer-service/index.html @@ -1 +1 @@ -How 37signals handles customer service / Johan Brook

    How 37signals handles customer service

    About 1 min reading time

    Follow link to inc.com →

    37signals usually do things right, and customer service is not an exception. In December customers of their real-time chat application, Campfire, experienced downtimes and overall unstable behavior. Not being able to access web applications sucks, and especially if you’re a paying customer and your daily business life depends on it. But shit happens, right? This can happen to the best (customers of Apple’s MobileMe weren’t that happy in the initial shaky stages). What’s dead important and actually good act in your favor is how you handle the crisis. In the linked article Jason Fried tells us a little bit about how they communicated with their customers during the downtime. They used real words for this real problem, not corporate talk. They wrote a blog post explaining exactly what had happened and what measures they took to make sure it wouldn’t happen again. As the title of the article says, they turned this negative event to further show their customers how much they care.

    And we’ve discovered that the more honest we are, the better our customers feel. They just want to know what’s going on and what happened. They want to be informed.

    \ No newline at end of file +How 37signals handles customer service / Johan Brook

    How 37signals handles customer service

    About 1 min reading time

    Follow link to inc.com →

    37signals usually do things right, and customer service is not an exception. In December customers of their real-time chat application, Campfire, experienced downtimes and overall unstable behavior. Not being able to access web applications sucks, and especially if you’re a paying customer and your daily business life depends on it. But shit happens, right? This can happen to the best (customers of Apple’s MobileMe weren’t that happy in the initial shaky stages). What’s dead important and actually good act in your favor is how you handle the crisis. In the linked article Jason Fried tells us a little bit about how they communicated with their customers during the downtime. They used real words for this real problem, not corporate talk. They wrote a blog post explaining exactly what had happened and what measures they took to make sure it wouldn’t happen again. As the title of the article says, they turned this negative event to further show their customers how much they care.

    And we’ve discovered that the more honest we are, the better our customers feel. They just want to know what’s going on and what happened. They want to be informed.

    \ No newline at end of file diff --git a/writings/how-i-set-up-my-web-development-environment-on-os-x-lion/index.html b/writings/how-i-set-up-my-web-development-environment-on-os-x-lion/index.html index 4b6541e60..2fd3d7a24 100644 --- a/writings/how-i-set-up-my-web-development-environment-on-os-x-lion/index.html +++ b/writings/how-i-set-up-my-web-development-environment-on-os-x-lion/index.html @@ -24,4 +24,4 @@ $ curl http://npmjs.org/install.sh | sh

    And MAMP for local PHP/MySQL development in an .app.

    Dotfiles

    I’ve forked some neat dotfiles to keep in the home folder. You can find them in my GitHub project. Just do:

    $ git clone git://github.com/johanbrook/dotfiles.git
 $ rake install
-

    The dotfiles include:

    • gitignore
    • gitconfig (with aliases and settings)
    • custom bash prompt
    • git and Rake completion scripts
    • irbrc (for irb)
    • railsrc
    • gemrc

    Terminal Bright My bash prompt and Terminal colour theme.

    Outro

    And there we go! We’re done! Wasn’t so bad, eh? I suppose you can put an enormous amount of hours into configuring your setup, but this is enough for me. It’s a solid foundation with few unnecessary dependencies, which is important to me.

    Don’t hesitate to give me shout if anything is wrong, outdated, or simply suck.

    \ No newline at end of file +

    The dotfiles include:

    • gitignore
    • gitconfig (with aliases and settings)
    • custom bash prompt
    • git and Rake completion scripts
    • irbrc (for irb)
    • railsrc
    • gemrc

    Terminal Bright My bash prompt and Terminal colour theme.

    Outro

    And there we go! We’re done! Wasn’t so bad, eh? I suppose you can put an enormous amount of hours into configuring your setup, but this is enough for me. It’s a solid foundation with few unnecessary dependencies, which is important to me.

    Don’t hesitate to give me shout if anything is wrong, outdated, or simply suck.

    \ No newline at end of file diff --git a/writings/how-ryan-singer-builds-products/index.html b/writings/how-ryan-singer-builds-products/index.html index 591b5cd7a..93b3084d8 100644 --- a/writings/how-ryan-singer-builds-products/index.html +++ b/writings/how-ryan-singer-builds-products/index.html @@ -1 +1 @@ -How Ryan Singer builds products / Johan Brook

    How Ryan Singer builds products

    About 1 min reading time

    Follow link to insideintercom.io →

    Our company DNA at 37signals is make things we want, and to make them the way that we want them Ryan Singer Great interview with Ryan Singer about product design.

    \ No newline at end of file +How Ryan Singer builds products / Johan Brook

    How Ryan Singer builds products

    About 1 min reading time

    Follow link to insideintercom.io →

    Our company DNA at 37signals is make things we want, and to make them the way that we want them Ryan Singer Great interview with Ryan Singer about product design.

    \ No newline at end of file diff --git a/writings/i-cant-design-in-the-browser-either/index.html b/writings/i-cant-design-in-the-browser-either/index.html index 53a55e2db..aefc34154 100644 --- a/writings/i-cant-design-in-the-browser-either/index.html +++ b/writings/i-cant-design-in-the-browser-either/index.html @@ -1 +1 @@ -I can't design in the browser either / Johan Brook

    I can't design in the browser either

    About 2 min reading time

    Follow link to sazzy.co.uk →

    Sarah Parmenter on how she can’t design in the browser:

    For some projects, a hybrid method of producing a type of scratch file, with a general overview of the style and colours of the app/website, then going straight into HTML/CSS has worked, in others, I still need to produce full-scale visuals. I recognize the things she brings up in her post. Everytime I’ve gone straight to the browser to create something quick for myself, the result is an incomprehensible mess. Perhaps I’m not good enough yet, but my brain just isn’t in “creative mode” when I’m coding. Everything gets more bulky when you’re doing major changes (that is, not subtle colour changes, but numerous layout experiments, for instance). Doing layout changes in Photoshop? Just drag that box over there. Doing it in HTML/CSS? Um, just make that box float: left; , and clear that container, then .. .

    I’ve seen a couple of web designers writing about this before (can’t find the blog posts right now …). Someone suggested creating a mockup in Photoshop, but without any text, and then putting the mockup as a background-image for the body tag and adding text in the browser with absolute positioning.

    Andy Clarke brought up the idea consisting of that initially showing the client a browser mockup is like lying — the client get the impression of that his/her website will look exactly like that in all browsers. That’s not the case — websites don’t need to look exactly the same in all browsers. By quickly iterating in code and perhaps showing the website in Internet Explorer from the beginning, the client might think “Wow, the design looks so much better in Chrome/Firefox/Safari than in Explorer!”. We let the weakest link set the bar — not a static mockup.

    Personally, I prefer a hybrid solution, where I mockup the overall visual style in Photoshop in order to develop a colour scheme that works, contrasts in typography, and other elements. I then begin very early iterating the mockup in HTML and CSS, and jump back and forth between the browser and Photoshop. It’s much easier than doing the whole thing in code, only to realize that the design isn’t cutting it, and then having to start over coding a new design. It’s the same in Photoshop though: you can throw countless of hours into a static mockup only to recreate everything in code later on. I say a hybrid solution is most effective.

    \ No newline at end of file +I can't design in the browser either / Johan Brook

    I can't design in the browser either

    About 2 min reading time

    Follow link to sazzy.co.uk →

    Sarah Parmenter on how she can’t design in the browser:

    For some projects, a hybrid method of producing a type of scratch file, with a general overview of the style and colours of the app/website, then going straight into HTML/CSS has worked, in others, I still need to produce full-scale visuals. I recognize the things she brings up in her post. Everytime I’ve gone straight to the browser to create something quick for myself, the result is an incomprehensible mess. Perhaps I’m not good enough yet, but my brain just isn’t in “creative mode” when I’m coding. Everything gets more bulky when you’re doing major changes (that is, not subtle colour changes, but numerous layout experiments, for instance). Doing layout changes in Photoshop? Just drag that box over there. Doing it in HTML/CSS? Um, just make that box float: left; , and clear that container, then .. .

    I’ve seen a couple of web designers writing about this before (can’t find the blog posts right now …). Someone suggested creating a mockup in Photoshop, but without any text, and then putting the mockup as a background-image for the body tag and adding text in the browser with absolute positioning.

    Andy Clarke brought up the idea consisting of that initially showing the client a browser mockup is like lying — the client get the impression of that his/her website will look exactly like that in all browsers. That’s not the case — websites don’t need to look exactly the same in all browsers. By quickly iterating in code and perhaps showing the website in Internet Explorer from the beginning, the client might think “Wow, the design looks so much better in Chrome/Firefox/Safari than in Explorer!”. We let the weakest link set the bar — not a static mockup.

    Personally, I prefer a hybrid solution, where I mockup the overall visual style in Photoshop in order to develop a colour scheme that works, contrasts in typography, and other elements. I then begin very early iterating the mockup in HTML and CSS, and jump back and forth between the browser and Photoshop. It’s much easier than doing the whole thing in code, only to realize that the design isn’t cutting it, and then having to start over coding a new design. It’s the same in Photoshop though: you can throw countless of hours into a static mockup only to recreate everything in code later on. I say a hybrid solution is most effective.

    \ No newline at end of file diff --git a/writings/i-dont-like-counting-hours/index.html b/writings/i-dont-like-counting-hours/index.html index dd8bed10b..5a5119836 100644 --- a/writings/i-dont-like-counting-hours/index.html +++ b/writings/i-dont-like-counting-hours/index.html @@ -1 +1 @@ -I don't like counting hours / Johan Brook

    I don't like counting hours

    About 3 min reading time

    In the freelance and consultancy business, you often charge per work hour. It’s the rate, and then you estimate the total number of hours for a project. The estimate is … an estimate. Estimates are seldom correct, even for senior consultants. I’m not ashamed to say that I often do an initial estimate, then almost doubling it when responding to the client. One thing I’ve learnt is that it’s immensely better to land a project below the estimate than above.

    Anyway: charging per hour. I’ve grown to dislike it. It’s all depending on the project, of course. For smaller, specific tasks where I’m kind of sure how long it will take me to complete the job, I like the charge-per-hour strategy. It’s flexible for both me and the client. Another last minute fix needs to be done? Sure, no problem: just add an hour and pay me.

    For larger projects, I believe a better model is needed. For complex systems and longer time periods, the hour charging isn’t working out for me. I sincerely hate watching the account manager dabbling back and forth with big clients about hour estimates and rates. It feels like they’re not paying us for our skills, experience and creativity as designers and developers, but instead buying our time only. For consultants, it’s really lucrative charging per hour for large gigs: it’s not easy to step away from ~$100 per hour. But after some time in the industry, we should be able to decide how to charge something different for larger projects. I’ve tried a mix: charging a lump sum for up to 40-50 hours for a site, then if more has to be done outside the scope, I start charging per hour. It’s a neat trick if you’re dealing with a client who often calls you with “small fixes” without thinking of the cost. If the client goes above the hour threshold, it’s gonna cost him/her.

    But we’re still thinking in hours! Creativity isn’t about time! It can be instant, it can take a while. The more skilled and experienced you become as a designer or developer, fewer hours need to be put in for a given problem (hopefully). When you have a firm command of your tools and techniques, things usually go more smoothly than for beginners in the field. But shit happens. As a designer, you may have lost your inspiration. As a programmer, you may have problems with a framework. The hours are counting. The client is getting annoyed. I believe we have to get rid of the concept of “hours” when doing jobs.

    What hinders me when working with hours:

    • I have to remember to keep track of how much I work with a clock of some sort
    • I have to give estimates, which usually are pretty rough
    • I get stressed when I get stuck somewhere in the process
    • I focus more on putting in my hours than doing a healthy work day

    The client isn’t paying me for “getting stuck” somewhere either. He or she does care if I managed to create a great design mockup in five hours or twenty hours if I’m charging per hour. If I’m not, the concept of “wasting time” is gone, and the client only care about what’s important: the result.

    The result is everything. Great clients care about and reward the result. Great craftsmen care about the result and the process. It’s up to us to set a price on hour process as a whole, and deliver great results. When I get rid of the “hours concept”, I often tend to work more relaxed, more focused, and being happier.

    Personally I hate not being free to plan my own work day. To me, freedom is so important. Going into an office every day is something I loath. I want to be able to work from my computer from all over the world, and not having to put in eight hours during a block each day. I want to work some hours in the morning, a couple more in the afternoon, perhaps some more during the night. It fits me. Some days I may work more, some days less. My friends want me to follow along on this great-and-awesome trip one day? No problem, I’ll do my work during the night later. I may internally have some notion of how much time I put in, but in the end I want the client and my team mates care about my result. What I produce.

    If I am my own boss, I don’t care how, when or where I do my work: get the job done, and you’re good. Freedom and responsibility are keywords. We are professionals, and should demand being treated like that.

    \ No newline at end of file +I don't like counting hours / Johan Brook

    I don't like counting hours

    About 3 min reading time

    In the freelance and consultancy business, you often charge per work hour. It’s the rate, and then you estimate the total number of hours for a project. The estimate is … an estimate. Estimates are seldom correct, even for senior consultants. I’m not ashamed to say that I often do an initial estimate, then almost doubling it when responding to the client. One thing I’ve learnt is that it’s immensely better to land a project below the estimate than above.

    Anyway: charging per hour. I’ve grown to dislike it. It’s all depending on the project, of course. For smaller, specific tasks where I’m kind of sure how long it will take me to complete the job, I like the charge-per-hour strategy. It’s flexible for both me and the client. Another last minute fix needs to be done? Sure, no problem: just add an hour and pay me.

    For larger projects, I believe a better model is needed. For complex systems and longer time periods, the hour charging isn’t working out for me. I sincerely hate watching the account manager dabbling back and forth with big clients about hour estimates and rates. It feels like they’re not paying us for our skills, experience and creativity as designers and developers, but instead buying our time only. For consultants, it’s really lucrative charging per hour for large gigs: it’s not easy to step away from ~$100 per hour. But after some time in the industry, we should be able to decide how to charge something different for larger projects. I’ve tried a mix: charging a lump sum for up to 40-50 hours for a site, then if more has to be done outside the scope, I start charging per hour. It’s a neat trick if you’re dealing with a client who often calls you with “small fixes” without thinking of the cost. If the client goes above the hour threshold, it’s gonna cost him/her.

    But we’re still thinking in hours! Creativity isn’t about time! It can be instant, it can take a while. The more skilled and experienced you become as a designer or developer, fewer hours need to be put in for a given problem (hopefully). When you have a firm command of your tools and techniques, things usually go more smoothly than for beginners in the field. But shit happens. As a designer, you may have lost your inspiration. As a programmer, you may have problems with a framework. The hours are counting. The client is getting annoyed. I believe we have to get rid of the concept of “hours” when doing jobs.

    What hinders me when working with hours:

    • I have to remember to keep track of how much I work with a clock of some sort
    • I have to give estimates, which usually are pretty rough
    • I get stressed when I get stuck somewhere in the process
    • I focus more on putting in my hours than doing a healthy work day

    The client isn’t paying me for “getting stuck” somewhere either. He or she does care if I managed to create a great design mockup in five hours or twenty hours if I’m charging per hour. If I’m not, the concept of “wasting time” is gone, and the client only care about what’s important: the result.

    The result is everything. Great clients care about and reward the result. Great craftsmen care about the result and the process. It’s up to us to set a price on hour process as a whole, and deliver great results. When I get rid of the “hours concept”, I often tend to work more relaxed, more focused, and being happier.

    Personally I hate not being free to plan my own work day. To me, freedom is so important. Going into an office every day is something I loath. I want to be able to work from my computer from all over the world, and not having to put in eight hours during a block each day. I want to work some hours in the morning, a couple more in the afternoon, perhaps some more during the night. It fits me. Some days I may work more, some days less. My friends want me to follow along on this great-and-awesome trip one day? No problem, I’ll do my work during the night later. I may internally have some notion of how much time I put in, but in the end I want the client and my team mates care about my result. What I produce.

    If I am my own boss, I don’t care how, when or where I do my work: get the job done, and you’re good. Freedom and responsibility are keywords. We are professionals, and should demand being treated like that.

    \ No newline at end of file diff --git a/writings/im-apparently-a-unicorn/index.html b/writings/im-apparently-a-unicorn/index.html index 1f69b5421..8b5d498bc 100644 --- a/writings/im-apparently-a-unicorn/index.html +++ b/writings/im-apparently-a-unicorn/index.html @@ -1 +1 @@ -I'm apparently a unicorn / Johan Brook

    I'm apparently a unicorn

    About 2 min reading time

    Follow link to thenextweb.com →

    If you’re looking for a designer who can come up with your identity, design your site, create UIs with great user experience for your web and mobile apps, and on top of that code his or her work in HTML/CSS (and why not throw in Javascript in the mix!), then I’m sorry to inform you that you’re hunting unicorns.

    Sacha Greif — The Next Web, 2012 Follow the linked article above and read about why startups today can’t find decent designers. Further down the article I think the author pinpoints two issues:

    • Companies want “unicorn designers/developers”, “ninjas”, or “rockstars”, or <insert corny brogrammer term here>.
    • Their demands are set too high. Let younger guys and girls in.

    There are two sides of the designer-developer hybrid part. In the web world front-end code and design are so close together these days, and I think it’s wrong and a mistake to focus on only one of those two. Sure: you could get by, but wouldn’t it be boring not to be able to implement your own designs? Or never be able to create something nice for your own without, say Twitter’s Bootstrap?

    In the native world where the “front-end” code generally is a bit heavier and hard-core, I can see how designers really are designers, and developers are developers (if you can do both: awesome!). Personally I think it’s easier to do both code and design in the web world.

    The article says there are few “unicorn” designers/developers, e.g. hybrids. For me it’s a matter of interest and a never ending thirst of knowledge: I want to learn advanced Javascript patterns as I read about typography and grid techniques.

    Unicorns do exist! How to become one? Never stop moving. If you are one? Consider yourself lucky, and start choosing your next employer with care.

    Also, read the Hacker News comments on the linked article. I’ve also written related posts about designer-developer hybrids:

    \ No newline at end of file +I'm apparently a unicorn / Johan Brook

    I'm apparently a unicorn

    About 2 min reading time

    Follow link to thenextweb.com →

    If you’re looking for a designer who can come up with your identity, design your site, create UIs with great user experience for your web and mobile apps, and on top of that code his or her work in HTML/CSS (and why not throw in Javascript in the mix!), then I’m sorry to inform you that you’re hunting unicorns.

    Sacha Greif — The Next Web, 2012 Follow the linked article above and read about why startups today can’t find decent designers. Further down the article I think the author pinpoints two issues:

    • Companies want “unicorn designers/developers”, “ninjas”, or “rockstars”, or <insert corny brogrammer term here>.
    • Their demands are set too high. Let younger guys and girls in.

    There are two sides of the designer-developer hybrid part. In the web world front-end code and design are so close together these days, and I think it’s wrong and a mistake to focus on only one of those two. Sure: you could get by, but wouldn’t it be boring not to be able to implement your own designs? Or never be able to create something nice for your own without, say Twitter’s Bootstrap?

    In the native world where the “front-end” code generally is a bit heavier and hard-core, I can see how designers really are designers, and developers are developers (if you can do both: awesome!). Personally I think it’s easier to do both code and design in the web world.

    The article says there are few “unicorn” designers/developers, e.g. hybrids. For me it’s a matter of interest and a never ending thirst of knowledge: I want to learn advanced Javascript patterns as I read about typography and grid techniques.

    Unicorns do exist! How to become one? Never stop moving. If you are one? Consider yourself lucky, and start choosing your next employer with care.

    Also, read the Hacker News comments on the linked article. I’ve also written related posts about designer-developer hybrids:

    \ No newline at end of file diff --git a/writings/index.html b/writings/index.html index 2cf4ebf25..c31583543 100644 --- a/writings/index.html +++ b/writings/index.html @@ -1 +1 @@ -Writings / Johan Brook

    Writings.

    181 posts, from to .

    1. Mastodon
    2. My favourite software
    3. Setting up Sublime Text for Deno
    4. A whole new world with Deno
    5. Customising an iOS home screen web app in 2021
    6. An Even Better Spaghetti Bolognese
    7. Recently in books II
    8. Building a small, functional reactive app architecture
    9. Recent improvements in our git discipline
    10. Recently in books
    11. Like Knitting
    12. Euphoria
    13. Using Figma's API to sync colours with your CSS
    14. Using streams in React with Hooks
    15. New watch
    16. Styled components in a virtual DOM
    17. Better Remote Pair Programming
    18. My Spaghetti Bolognese
    19. I am not a creative person
    20. Balancing personal energy and greatness in product design
    21. My Personal Gym FAQ
    22. On interacting and learning from users in support
    23. The White Duck
    24. Conditionally Composable Functions
    25. On Socialising
    26. The Ocean
    27. Intimate remote work
    28. Shipped with fear
    29. What's new in Safari 9
    30. Pain points & Incentives
    31. What's happened so far
    32. Redesigned & Reimagined
    33. Writing contextual CSS
    34. "Master of many trades"
    35. Changing perspectives and doing the crazy thing
    36. A symbol for sex
    37. I don't like counting hours
    38. On Scala
    39. Programming and communication
    40. Tags and class names – on building flexible markup
    41. Object-oriented Programming and Modeling the Real World
    42. How Ryan Singer builds products
    43. On the importance of knowing how to program
    44. Signal vs. Noise
    45. "The Art of Quality"
    46. Spotimood
    47. "Learnable Programming"
    48. Sass 3.2 Placeholders and Object-Oriented CSS
    49. Responsive web design – the infinite grid and water
    50. Linus Torvalds on good programmers
    51. "Twitter is the Benjamin Button of startups"
    52. Good software is like a knot
    53. Jawbone's Jambox
    54. Thoughts on freedom, creativity and the internet
    55. The Hawk catches the Sparrow
    56. "Some things I've learnt about programming"
    57. Valve – the truly flat hierarchy company
    58. The Slow Web Movement
    59. 'Systemet' – A liquor store status web app
    60. On using your time
    61. CSS variables soon to land in WebKit
    62. Perfection doesn't exist
    63. Software is handcrafted
    64. Bdgt for iPhone
    65. A word about testing code
    66. Device independency
    67. I'm apparently a unicorn
    68. Sync is about safety
    69. "Stop solving problems you don't have"
    70. Coffee and free software
    71. Great articles about design, code, and life
    72. Adobe Shadow – Device preview and debugging
    73. Gridset – create advanced grid systems on the web
    74. About guys who fix stuff
    75. On the evolution of languages and frameworks
    76. I can't design in the browser either
    77. How I set up my web development environment on OS X Lion
    78. Java and beginner programming courses at universities
    79. Realigning Johanbrook.com
    80. Songs to code by
    81. Adding custom URL endpoints in Wordpress
    82. "Can you make the logo smaller?"
    83. Hiring developers 2012 style
    84. Advice for university students: "I'm not as smart as I thought I was"
    85. Measuring and sizing UIs, 2011-style
    86. Writing documentation for CSS – Knyle Style Sheets
    87. Timeless fashion
    88. The Anatomy of a Perfect Web Site
    89. PHP needs to die
    90. Subtle updates to Chrome 14's Web Inspector
    91. A Greenhorn's Freelance Advice
    92. Chocolat – The Heir of Textmate?
    93. Add delight to web forms (with code sample)
    94. "Javascript is Dead. Long Live Javascript!"
    95. Native style momentum scrolling to arrive in iOS 5
    96. Staying hungry and evolving with new technologies
    97. Zach Holman on code documentation
    98. Relative positioning and CSS Columns
    99. A fix for antialiasing issues in WebKit browsers
    100. Bringing Order to CSS
    101. Debugging CSS Media Queries
    102. New Safari downloads UI in Lion
    103. Backup everything – my backup setup
    104. Generalist specialists
    105. Redesigned
    106. Spotify revamps the Free and Open options
    107. Digital magazines and HTML
    108. Whiteboard theme for Wordpress
    109. Firefox 4 – a bitter taste
    110. Flow out of beta
    111. Universal wrapping paper
    112. Posters by Avraham Cornfeld
    113. Customizing the Wordpress Admin Bar
    114. Minimalistic Oscar posters
    115. Take a step back
    116. Photos of National Geographic
    117. OS X Lion-Mountain Lion wallpapers
    118. Quick internal linking tag in Wordpress
    119. Get it out there – Matt Mullenweg on shipping software
    120. Dustin Diaz's $script.js
    121. Homemade is best
    122. Streamlines – another kind of Twitter client
    123. Thomas Fuchs' web dev tools
    124. Send URLs from iOS to desktop browser
    125. Maven Pro – a free sans serif font
    126. Visualizing WebKit's hardware acceleration
    127. "The Shape of Design"
    128. Use the current color in CSS with the currentcolor keyword
    129. How 37signals handles customer service
    130. Rasmus Andersson on Kod
    131. Webkit to get CSS variables, mixins, nesting?
    132. Whiteboard accounting, or how to say no to yourself
    133. "Google, H.264 and video on the web"
    134. Google to release a WebM plugin for Safari and IE9
    135. A simpler CSS3 Gradient syntax
    136. After Hours
    137. Dyluni for Wordpress
    138. RSS is not dying, it's being ignored
    139. Eric Meyer: Reset Revisited
    140. Kod app is now open source
    141. "A note to people that hire ... "
    142. The road to the 37signals homepage redesign
    143. Trickle: another kind of Twitter client
    144. Native retweets to Tweetie for Mac with ReTweetie
    145. Yet Another Site Redesign
    146. What Matters
    147. Old hardware still rocks
    148. Rolling Stones' "Gimme Shelter" deconstructed
    149. Make the invisible visible – a clever campaign from Amnesty
    150. iOS Fonts
    151. Andy Clarke's Hardboiled Web Design talk from DIBI
    152. Retro airline bags
    153. Regular people and web standards
    154. A Simple Icon
    155. Why Google can't build Instagram
    156. Yet another mobile HTML5 framework ... by 37signals
    157. Five record breaking torrent files
    158. Minimal Skype 5 message style
    159. Tower – an upcoming Git client for Mac
    160. Jeremy Keith: The Design of HTML5
    161. Paris vs. New York – a graphic comparison
    162. Autocomplete in TextEdit
    163. Linked List style posts in Wordpress
    164. Formalize CSS – consistent forms
    165. Start a Facetime call from URI in browser
    166. Firesheep – why HTTPS is important
    167. Windows Phone 7 needs activation for Live
    168. A typographic poster
    169. Panic talks about the future: Coda 2
    170. Vertical Rhythm Wordpress themes
    171. The Beatles’ album covers redesigned
    172. Apple’s Java in OS X 10.6 is now deprecated
    173. Anatomy of a Rails Rumble project
    174. Out with the old
    175. Comparison between a plumber and a freelancing designer
    176. Who's suing whom?
    177. Bjarne Stroustrup on C++'s 25th anniversary
    178. Old book illustrations
    179. A Markdown teleprompter
    180. Unofficial version of Notational Velocity adds goodies
    181. Interview with David Heinemeier Hansson
    \ No newline at end of file +Writings / Johan Brook

    Writings.

    181 posts, from to .

    1. Mastodon
    2. My favourite software
    3. Setting up Sublime Text for Deno
    4. A whole new world with Deno
    5. Customising an iOS home screen web app in 2021
    6. An Even Better Spaghetti Bolognese
    7. Recently in books II
    8. Building a small, functional reactive app architecture
    9. Recent improvements in our git discipline
    10. Recently in books
    11. Like Knitting
    12. Euphoria
    13. Using Figma's API to sync colours with your CSS
    14. Using streams in React with Hooks
    15. New watch
    16. Styled components in a virtual DOM
    17. Better Remote Pair Programming
    18. My Spaghetti Bolognese
    19. I am not a creative person
    20. Balancing personal energy and greatness in product design
    21. My Personal Gym FAQ
    22. On interacting and learning from users in support
    23. The White Duck
    24. Conditionally Composable Functions
    25. On Socialising
    26. The Ocean
    27. Intimate remote work
    28. Shipped with fear
    29. What's new in Safari 9
    30. Pain points & Incentives
    31. What's happened so far
    32. Redesigned & Reimagined
    33. Writing contextual CSS
    34. "Master of many trades"
    35. Changing perspectives and doing the crazy thing
    36. A symbol for sex
    37. I don't like counting hours
    38. On Scala
    39. Programming and communication
    40. Tags and class names – on building flexible markup
    41. Object-oriented Programming and Modeling the Real World
    42. How Ryan Singer builds products
    43. On the importance of knowing how to program
    44. Signal vs. Noise
    45. "The Art of Quality"
    46. Spotimood
    47. "Learnable Programming"
    48. Sass 3.2 Placeholders and Object-Oriented CSS
    49. Responsive web design – the infinite grid and water
    50. Linus Torvalds on good programmers
    51. "Twitter is the Benjamin Button of startups"
    52. Good software is like a knot
    53. Jawbone's Jambox
    54. Thoughts on freedom, creativity and the internet
    55. The Hawk catches the Sparrow
    56. "Some things I've learnt about programming"
    57. Valve – the truly flat hierarchy company
    58. The Slow Web Movement
    59. 'Systemet' – A liquor store status web app
    60. On using your time
    61. CSS variables soon to land in WebKit
    62. Perfection doesn't exist
    63. Software is handcrafted
    64. Bdgt for iPhone
    65. A word about testing code
    66. Device independency
    67. I'm apparently a unicorn
    68. Sync is about safety
    69. "Stop solving problems you don't have"
    70. Coffee and free software
    71. Great articles about design, code, and life
    72. Adobe Shadow – Device preview and debugging
    73. Gridset – create advanced grid systems on the web
    74. About guys who fix stuff
    75. On the evolution of languages and frameworks
    76. I can't design in the browser either
    77. How I set up my web development environment on OS X Lion
    78. Java and beginner programming courses at universities
    79. Realigning Johanbrook.com
    80. Songs to code by
    81. Adding custom URL endpoints in Wordpress
    82. "Can you make the logo smaller?"
    83. Hiring developers 2012 style
    84. Advice for university students: "I'm not as smart as I thought I was"
    85. Measuring and sizing UIs, 2011-style
    86. Writing documentation for CSS – Knyle Style Sheets
    87. Timeless fashion
    88. The Anatomy of a Perfect Web Site
    89. PHP needs to die
    90. Subtle updates to Chrome 14's Web Inspector
    91. A Greenhorn's Freelance Advice
    92. Chocolat – The Heir of Textmate?
    93. Add delight to web forms (with code sample)
    94. "Javascript is Dead. Long Live Javascript!"
    95. Native style momentum scrolling to arrive in iOS 5
    96. Staying hungry and evolving with new technologies
    97. Zach Holman on code documentation
    98. Relative positioning and CSS Columns
    99. A fix for antialiasing issues in WebKit browsers
    100. Bringing Order to CSS
    101. Debugging CSS Media Queries
    102. New Safari downloads UI in Lion
    103. Backup everything – my backup setup
    104. Generalist specialists
    105. Redesigned
    106. Spotify revamps the Free and Open options
    107. Digital magazines and HTML
    108. Whiteboard theme for Wordpress
    109. Firefox 4 – a bitter taste
    110. Flow out of beta
    111. Universal wrapping paper
    112. Posters by Avraham Cornfeld
    113. Customizing the Wordpress Admin Bar
    114. Take a step back
    115. Photos of National Geographic
    116. Minimalistic Oscar posters
    117. OS X Lion-Mountain Lion wallpapers
    118. Quick internal linking tag in Wordpress
    119. Get it out there – Matt Mullenweg on shipping software
    120. Dustin Diaz's $script.js
    121. Homemade is best
    122. Send URLs from iOS to desktop browser
    123. Thomas Fuchs' web dev tools
    124. Streamlines – another kind of Twitter client
    125. Visualizing WebKit's hardware acceleration
    126. Maven Pro – a free sans serif font
    127. "The Shape of Design"
    128. Use the current color in CSS with the currentcolor keyword
    129. How 37signals handles customer service
    130. Rasmus Andersson on Kod
    131. Webkit to get CSS variables, mixins, nesting?
    132. Whiteboard accounting, or how to say no to yourself
    133. "Google, H.264 and video on the web"
    134. Google to release a WebM plugin for Safari and IE9
    135. A simpler CSS3 Gradient syntax
    136. After Hours
    137. Dyluni for Wordpress
    138. Eric Meyer: Reset Revisited
    139. RSS is not dying, it's being ignored
    140. Kod app is now open source
    141. "A note to people that hire ... "
    142. The road to the 37signals homepage redesign
    143. Trickle: another kind of Twitter client
    144. Native retweets to Tweetie for Mac with ReTweetie
    145. Yet Another Site Redesign
    146. What Matters
    147. Old hardware still rocks
    148. Rolling Stones' "Gimme Shelter" deconstructed
    149. Make the invisible visible – a clever campaign from Amnesty
    150. iOS Fonts
    151. Andy Clarke's Hardboiled Web Design talk from DIBI
    152. Retro airline bags
    153. Regular people and web standards
    154. A Simple Icon
    155. Why Google can't build Instagram
    156. Yet another mobile HTML5 framework ... by 37signals
    157. Five record breaking torrent files
    158. Minimal Skype 5 message style
    159. Tower – an upcoming Git client for Mac
    160. Jeremy Keith: The Design of HTML5
    161. Paris vs. New York – a graphic comparison
    162. Autocomplete in TextEdit
    163. Linked List style posts in Wordpress
    164. Formalize CSS – consistent forms
    165. Start a Facetime call from URI in browser
    166. Windows Phone 7 needs activation for Live
    167. Firesheep – why HTTPS is important
    168. A typographic poster
    169. Panic talks about the future: Coda 2
    170. Apple’s Java in OS X 10.6 is now deprecated
    171. Anatomy of a Rails Rumble project
    172. The Beatles’ album covers redesigned
    173. Vertical Rhythm Wordpress themes
    174. Out with the old
    175. Comparison between a plumber and a freelancing designer
    176. Who's suing whom?
    177. Bjarne Stroustrup on C++'s 25th anniversary
    178. Old book illustrations
    179. Interview with David Heinemeier Hansson
    180. A Markdown teleprompter
    181. Unofficial version of Notational Velocity adds goodies
    \ No newline at end of file diff --git a/writings/interview-with-david-heinemeier-hansson/index.html b/writings/interview-with-david-heinemeier-hansson/index.html index 9e5777d23..3428efbb9 100644 --- a/writings/interview-with-david-heinemeier-hansson/index.html +++ b/writings/interview-with-david-heinemeier-hansson/index.html @@ -1 +1 @@ -Interview with David Heinemeier Hansson / Johan Brook

    Interview with David Heinemeier Hansson

    About 1 min reading time

    Follow link to bigthink.com →

    A Big Think interview with the creator of Ruby on Rails. A lot about Ruby and the framework, and also some about the future. It’s from way back in July, but this is good Instapaper material.

    \ No newline at end of file +Interview with David Heinemeier Hansson / Johan Brook

    Interview with David Heinemeier Hansson

    About 1 min reading time

    Follow link to bigthink.com →

    A Big Think interview with the creator of Ruby on Rails. A lot about Ruby and the framework, and also some about the future. It’s from way back in July, but this is good Instapaper material.

    \ No newline at end of file diff --git a/writings/intimate-remote-work/index.html b/writings/intimate-remote-work/index.html index dd42f1339..51155b9d0 100644 --- a/writings/intimate-remote-work/index.html +++ b/writings/intimate-remote-work/index.html @@ -1 +1 @@ -Intimate remote work / Johan Brook

    Intimate remote work

    About 4 min reading time

    In Lookback, we’ve had the notion of being able to work remote as a baseline since day one. Here are some of my thoughts on the deeper end of working remote, on personal levels.

    This is from our jobs page:

    We’ve chosen to build a distributed team. We don’t want anyone to move because of us. On the contrary, we want to empower people.

    Where in the world are you the most productive and creative? That’s where you should work from.

    Working remote is a thing many (often smaller to medium sized) software companies pick up these days – Basecamp (formerly 37signals) are huge fans, so huge they wrote a book on it. Companies sort of realise that all talent necessarily don’t want to live in San Francisco, New York, Stockholm, or some other tech hub. At Lookback, we often call it distributed work, since it implies that there should be no centralized office where everything is orchestrated from (even though half of the team resides in San Francisco at the moment).

    Some friends of mine often ask how we maintain personal relationships and keep a great workflow in order to churn out high quality work together. I think these two things are tremendously important:

    • Put in the energy, tolerance, and love, as in any relationship
    • Realise it’s a neverending process
     ![](/assets/posts/lookback-cooking.jpg)  ![](/assets/posts/lookback-cooking-names.jpg)

    From my own experience, relationships demands a lot of energy. Not in a bad way, just a lot of dedication, will, and determination. Even non-romantical ones, such as friendships, needs some love once in a while in order to maintain that friendly bond you have with a person.

    The same is with job relationships when working remote. If a successful company is to be built, where the employees create great products, they need to be closer to each other than just a chat avatar in Slack. Your mileage may vary of course; some people don’t have this need. I’ve realised these things have worked well for us in Lookback:

    Have physical meetups

    Obvious but easily forgotten. So much fun, and can be really productive! Eat food, hang out, talk about high level things as company culture, long term goals, “soft subjects”. Last meetup, we had a typical team building activity involving cooking food together at a restaurant (we actually got to make our own sausages completely how we wanted them). Then we discussed really deep personal subjects, such as priorities, workflows, and assumptions. This was so fruitful, and brought us closer on a new level.

    Have an Emotions chat room

    One day, our CEO Jonatan created an Emotions chat channel in Slack. It was for “venting stuff”, which we had seen a pattern of people doing in various other channels. So this channel’s purpose would solely be for expressing things like you would often have at a physical office, perhaps 1-on-1 with a co-worker. Again, some people are in more need of this than others, but even if you’re not writing in there yourself, just being able to tune in others’ mood is really helpful in day to day work. For instance, if a co-worker has a hard time at home with the kids, he or she might be really drained on energy. That wouldn’t be exposed anywhere else in a team wide way if it’s not clearly communicated in an Emotions channel.

    Having this room has given us the notion of that it’s okay to feel and express yourself to your co-workers even if you’re remote. It’s a safe zone for good and bad moods. People around me can automatically adjust to me if I ventilate that I’ve had a really bad week due to X, and have that in the back of their heads when they’re discussing product features and planning on Trello or whatever.

    Constantly tweak it

    Remote workflows are complex. Async communication is great for some and hard for others. It demands understanding, tolerance, and over-communication.

    We need to understand each other’s way of working, and one another’s needs. One person might need more coaching and 1-on-1s, while another person communicates like a natural born remote worker on Trello/Slack/forums.

    This needs to a constant circle of always-be-tweaking mindset, where we never settly. Everybody should be able to voice their opinions about the remote workflow in order to make it better, even by saying this thing X isn’t working out for me.

    Example: we used Flowdock for chatting in the beginning. It’s a great chat platform: it has got everything Slack has with slightly different UX. Our main thing was the use of threads. Instead of having everything in the same bucket (a channel) people could start new threads to discuss a single topic within a channel (this might come to Slack soon, a bird tweeted in my ear). Anyhow, this was getting more complex to maintain as the company grew to twelve people, and we moved over to Slack just to ease the communication for everybody in the team. We moved over to Discourse from GitHub Issues for our internal forum, since GitHub worked well in theory but wasn’t meant to be a forum in the first place.

    Over-communicate

    So easy to reason about but hard to pull off! It’s an art, practiced in many contexts: on Trello, in Slack, in the forum. A rule of thumb I’ve got is to really voice all relevant information I have in a certain situation. That is, bring up stuff like future blockers, opportunities, future steps, and so on. If you work in different timezones, as we do, this is even more important, since a day’s work might be slightly blocked or boosted just by your ability to share information before you go to bed and your co-workers continues the joint work.

    Repetitions are fine, since they prevent future misassumptions. Have a single source of truth, whether it’s a document, Trello card, or forum thread. And to me, few things beat face-to-face, synchronous voice chats. Talking with each other in voice brings out another layer of subtle communication patterns, rather than speaking with each other in a text chat.

    Have personal retrospectives

    We’ve got weekly retrospectives, where we rate these topics on a scale 1-10:

    • Happiness. Our general happiness level during the week. Are we happy with life? Why/why not?
    • Restedness. Are we drained or tired? Why?
    • Productivity. Did we feel we achieved a lot during the week?
    • Team spirit. Did we have fruitful 1-on-1s, or some other breakthrough feeling of being close to the team? Or just a general notion of hell yeah we’re the best?

    We keep this in a Google Docs spreadsheet, and it’s completely open to read each other’s ratings and comments for anybody in the team. This is another, recurring layer on top of the more impulsive Emotions chat channel discussed above.

    I think much boils down to the notion of that individuals that are close to each other can build better products (beware, totally un-scientific theory). Yes, remote work demands energy. Yes, remote work needs constant love, tinkering, and individual adjustments. It might not be for everybody. But when you achieve this cool equilibrium remote work in different time zones can bring, it’s pure bliss.

    \ No newline at end of file +Intimate remote work / Johan Brook

    Intimate remote work

    About 4 min reading time

    In Lookback, we’ve had the notion of being able to work remote as a baseline since day one. Here are some of my thoughts on the deeper end of working remote, on personal levels.

    This is from our jobs page:

    We’ve chosen to build a distributed team. We don’t want anyone to move because of us. On the contrary, we want to empower people.

    Where in the world are you the most productive and creative? That’s where you should work from.

    Working remote is a thing many (often smaller to medium sized) software companies pick up these days – Basecamp (formerly 37signals) are huge fans, so huge they wrote a book on it. Companies sort of realise that all talent necessarily don’t want to live in San Francisco, New York, Stockholm, or some other tech hub. At Lookback, we often call it distributed work, since it implies that there should be no centralized office where everything is orchestrated from (even though half of the team resides in San Francisco at the moment).

    Some friends of mine often ask how we maintain personal relationships and keep a great workflow in order to churn out high quality work together. I think these two things are tremendously important:

    • Put in the energy, tolerance, and love, as in any relationship
    • Realise it’s a neverending process
     ![](/assets/posts/lookback-cooking.jpg)  ![](/assets/posts/lookback-cooking-names.jpg)

    From my own experience, relationships demands a lot of energy. Not in a bad way, just a lot of dedication, will, and determination. Even non-romantical ones, such as friendships, needs some love once in a while in order to maintain that friendly bond you have with a person.

    The same is with job relationships when working remote. If a successful company is to be built, where the employees create great products, they need to be closer to each other than just a chat avatar in Slack. Your mileage may vary of course; some people don’t have this need. I’ve realised these things have worked well for us in Lookback:

    Have physical meetups

    Obvious but easily forgotten. So much fun, and can be really productive! Eat food, hang out, talk about high level things as company culture, long term goals, “soft subjects”. Last meetup, we had a typical team building activity involving cooking food together at a restaurant (we actually got to make our own sausages completely how we wanted them). Then we discussed really deep personal subjects, such as priorities, workflows, and assumptions. This was so fruitful, and brought us closer on a new level.

    Have an Emotions chat room

    One day, our CEO Jonatan created an Emotions chat channel in Slack. It was for “venting stuff”, which we had seen a pattern of people doing in various other channels. So this channel’s purpose would solely be for expressing things like you would often have at a physical office, perhaps 1-on-1 with a co-worker. Again, some people are in more need of this than others, but even if you’re not writing in there yourself, just being able to tune in others’ mood is really helpful in day to day work. For instance, if a co-worker has a hard time at home with the kids, he or she might be really drained on energy. That wouldn’t be exposed anywhere else in a team wide way if it’s not clearly communicated in an Emotions channel.

    Having this room has given us the notion of that it’s okay to feel and express yourself to your co-workers even if you’re remote. It’s a safe zone for good and bad moods. People around me can automatically adjust to me if I ventilate that I’ve had a really bad week due to X, and have that in the back of their heads when they’re discussing product features and planning on Trello or whatever.

    Constantly tweak it

    Remote workflows are complex. Async communication is great for some and hard for others. It demands understanding, tolerance, and over-communication.

    We need to understand each other’s way of working, and one another’s needs. One person might need more coaching and 1-on-1s, while another person communicates like a natural born remote worker on Trello/Slack/forums.

    This needs to a constant circle of always-be-tweaking mindset, where we never settly. Everybody should be able to voice their opinions about the remote workflow in order to make it better, even by saying this thing X isn’t working out for me.

    Example: we used Flowdock for chatting in the beginning. It’s a great chat platform: it has got everything Slack has with slightly different UX. Our main thing was the use of threads. Instead of having everything in the same bucket (a channel) people could start new threads to discuss a single topic within a channel (this might come to Slack soon, a bird tweeted in my ear). Anyhow, this was getting more complex to maintain as the company grew to twelve people, and we moved over to Slack just to ease the communication for everybody in the team. We moved over to Discourse from GitHub Issues for our internal forum, since GitHub worked well in theory but wasn’t meant to be a forum in the first place.

    Over-communicate

    So easy to reason about but hard to pull off! It’s an art, practiced in many contexts: on Trello, in Slack, in the forum. A rule of thumb I’ve got is to really voice all relevant information I have in a certain situation. That is, bring up stuff like future blockers, opportunities, future steps, and so on. If you work in different timezones, as we do, this is even more important, since a day’s work might be slightly blocked or boosted just by your ability to share information before you go to bed and your co-workers continues the joint work.

    Repetitions are fine, since they prevent future misassumptions. Have a single source of truth, whether it’s a document, Trello card, or forum thread. And to me, few things beat face-to-face, synchronous voice chats. Talking with each other in voice brings out another layer of subtle communication patterns, rather than speaking with each other in a text chat.

    Have personal retrospectives

    We’ve got weekly retrospectives, where we rate these topics on a scale 1-10:

    • Happiness. Our general happiness level during the week. Are we happy with life? Why/why not?
    • Restedness. Are we drained or tired? Why?
    • Productivity. Did we feel we achieved a lot during the week?
    • Team spirit. Did we have fruitful 1-on-1s, or some other breakthrough feeling of being close to the team? Or just a general notion of hell yeah we’re the best?

    We keep this in a Google Docs spreadsheet, and it’s completely open to read each other’s ratings and comments for anybody in the team. This is another, recurring layer on top of the more impulsive Emotions chat channel discussed above.

    I think much boils down to the notion of that individuals that are close to each other can build better products (beware, totally un-scientific theory). Yes, remote work demands energy. Yes, remote work needs constant love, tinkering, and individual adjustments. It might not be for everybody. But when you achieve this cool equilibrium remote work in different time zones can bring, it’s pure bliss.

    \ No newline at end of file diff --git a/writings/ios-fonts/index.html b/writings/ios-fonts/index.html index 6fb7cd5aa..27fa6a894 100644 --- a/writings/ios-fonts/index.html +++ b/writings/ios-fonts/index.html @@ -1 +1 @@ -iOS Fonts / Johan Brook

    iOS Fonts

    About 1 min reading time

    Follow link to iosfonts.com →

    Comprehensive list of all built-it fonts in iOS 4.2 on both iPhone and iPad. I’m really impressed of the selection (Bodoni Ornaments somebody?). Good to know.

    \ No newline at end of file +iOS Fonts / Johan Brook

    iOS Fonts

    About 1 min reading time

    Follow link to iosfonts.com →

    Comprehensive list of all built-it fonts in iOS 4.2 on both iPhone and iPad. I’m really impressed of the selection (Bodoni Ornaments somebody?). Good to know.

    \ No newline at end of file diff --git a/writings/ios-homescreen-web-app/index.html b/writings/ios-homescreen-web-app/index.html index dc2b839b0..8ff0213ba 100644 --- a/writings/ios-homescreen-web-app/index.html +++ b/writings/ios-homescreen-web-app/index.html @@ -168,4 +168,4 @@ new File([JSON.stringify(appConf, null, 4)], 'runloop.json', { type: 'application/json', }); -

    The user now gets the choice of saving the file somewhere, or sending it with the native UI controls.

    Epilogue

    The irony is that my running tracker app didn’t work at all out in the wild… Turns out that the system turns off any background geolocation services when the screen is locked — which totally is the case when I’m running. And there’s no Geolocation in Service Workers or similar background magic place. Argh.

    See it in action here: runloop.pages.dev.

    \ No newline at end of file +

    The user now gets the choice of saving the file somewhere, or sending it with the native UI controls.

    Epilogue

    The irony is that my running tracker app didn’t work at all out in the wild… Turns out that the system turns off any background geolocation services when the screen is locked — which totally is the case when I’m running. And there’s no Geolocation in Service Workers or similar background magic place. Argh.

    See it in action here: runloop.pages.dev.

    \ No newline at end of file diff --git a/writings/java-and-beginner-programming-courses-at-universities/index.html b/writings/java-and-beginner-programming-courses-at-universities/index.html index 25100b289..a8c49788c 100644 --- a/writings/java-and-beginner-programming-courses-at-universities/index.html +++ b/writings/java-and-beginner-programming-courses-at-universities/index.html @@ -1 +1 @@ -Java and beginner programming courses at universities / Johan Brook

    Java and beginner programming courses at universities

    About 4 min reading time

    I’ve been interested in programming since beginning of high school, and have freelanced in web design and development during the past years. This fall I went to university for a major in software engineering. Of course we were going to learn to program, but in the beginning it was a huge turnoff for me — we were doing it in Java. Why?

    Disclaimer: I’m by no means an experienced software engineer or programmer. I focus on front-end web development, and this is only my opinions on learning to program from a student’s perspective.

    How do you really learn to program? Not just in a specific language, but the general idea — the logic, the ability to think in abstractions, algorithms, to see the flows of a program? There are freshmen at software engineering and computer science university programs who have never programmed before, and it’s not a simple and quick task to teach these students the idioms and thoughts behind programming. What’s the most efficient, student friendly, and most pedagogical way of teaching how to think in code?

    As mentioned, I went to university this fall. I considered myself lucky, since I had programmed before. I.e., I had taken a couple of courses in high school and after that worked with web technologies as a freelancer. I had been exposed to both the academical and practical side of programming.

    The three courses I took in high school taught us Java. We were first supposed to study C++ during the first two courses, and take Java last, but the school decided to go for Java for all three, in a way to let us get a firm grasp of programming and general OO principles. Java was hence the first real programming language I actively used. During the senior year I began studying other languages lightly. PHP seemed like heaven with dynamic typing in all its glory, and Javascript was a nice buddy I could see myself hang out with. Later Ruby and Python lured (but I haven’t to this day begun learning them seriously).

    I had heard from other students that Java was the language tutored at this university program I was to apply for. My heart sank a bit since I had begun to grasp code minimalism, “beautiful code”, and DRY. According to me, Java isn’t really embracing those teachings.

    I had a couple of theories about why, oh why, the university chose Java to teach new students:

    • It’s cross-platform. Students run OS X, Linux, or Windows, and you can get Java up and running effortlessly on these platforms.
    • It’s object oriented. The two programming courses we had during the past fall were actually titles Object Oriented Development (beginner and intermediate). Java was built with many solid object oriented ideologies in regard: inheritance, interfaces, polymorphism, dynamic binding, etc. If you have a solid understanding of the OO in Java, there’s a good change you’ll grasp any other OO language in very short time.
    • It’s widely used in the enterprise sector (or my “Who’s waiting for the fresh students after they graduate?” theory).
    • It’s quite versatile. The university can use Java to teach full blown desktop applications, database programming, GUI design, web server programming, and in recent years mobile app development (Android).

    But what about the cons of teaching Java to new students?

    • Its bloated syntax might be an obstacle when learning how to program. Why should a beginner care about curly braces? Why should he or she even have to ponder over what static is? As soon as the teacher states: Don’t worry about , we’ll get to that in course X and leaves the students dumb-founded, there’s something rotten going on.
    • The lack of simplicity, and need for boilerplate code. Tasks you pull off in Ruby in a line of code can take up several lines in Java. The question is: should the students be forced to write a lot of code by themselves, or should the language serve convenience methods for even the simplest tasks? Or both?
    • Overly complicated and sometimes utterly useless design patterns. AbstractModelFactory , I’m looking at you.

    I think it all boils down to: Is the possible pain and frustration associated with Java worth getting a solid foundation in object orientation, scanning through documentation, diving deep into Swing, and worrying about semicolons? Perhaps.

    What’s the focus? Learn to program in general, or learn a single language? Sometimes I think my university focus a bit too much on Java. They should branch out and bring in examples from other languages once in a while. In the end, I think universities often use Java since it’s the shotgun solution: You can squeeze in quite a large curriculum with Java, it’s widely used in the industry, it teaches basic OO concepts.

    If it was up to me, I’d teach Ruby to new students. Just to get a hang of basic program flows, printing and reading data to a console (I/O), calculations, string manipulations, and then move on to methods, classes, objects, et al. It would only serve as a intro tool to programming. Sure, you can’t create an Android app with Ruby, but I think it would be godsent for the totally new students. The downside? These students would have to learn Java later on instead.

    One could debate wether it’s good or bad for new students to learn two programming languages in a short period of time. But when I see students struggling with why they can’t call methods on an int in Java — like they can on a String — and other things, I wonder if Java is the right choice to start out with.

    \ No newline at end of file +Java and beginner programming courses at universities / Johan Brook

    Java and beginner programming courses at universities

    About 4 min reading time

    I’ve been interested in programming since beginning of high school, and have freelanced in web design and development during the past years. This fall I went to university for a major in software engineering. Of course we were going to learn to program, but in the beginning it was a huge turnoff for me — we were doing it in Java. Why?

    Disclaimer: I’m by no means an experienced software engineer or programmer. I focus on front-end web development, and this is only my opinions on learning to program from a student’s perspective.

    How do you really learn to program? Not just in a specific language, but the general idea — the logic, the ability to think in abstractions, algorithms, to see the flows of a program? There are freshmen at software engineering and computer science university programs who have never programmed before, and it’s not a simple and quick task to teach these students the idioms and thoughts behind programming. What’s the most efficient, student friendly, and most pedagogical way of teaching how to think in code?

    As mentioned, I went to university this fall. I considered myself lucky, since I had programmed before. I.e., I had taken a couple of courses in high school and after that worked with web technologies as a freelancer. I had been exposed to both the academical and practical side of programming.

    The three courses I took in high school taught us Java. We were first supposed to study C++ during the first two courses, and take Java last, but the school decided to go for Java for all three, in a way to let us get a firm grasp of programming and general OO principles. Java was hence the first real programming language I actively used. During the senior year I began studying other languages lightly. PHP seemed like heaven with dynamic typing in all its glory, and Javascript was a nice buddy I could see myself hang out with. Later Ruby and Python lured (but I haven’t to this day begun learning them seriously).

    I had heard from other students that Java was the language tutored at this university program I was to apply for. My heart sank a bit since I had begun to grasp code minimalism, “beautiful code”, and DRY. According to me, Java isn’t really embracing those teachings.

    I had a couple of theories about why, oh why, the university chose Java to teach new students:

    • It’s cross-platform. Students run OS X, Linux, or Windows, and you can get Java up and running effortlessly on these platforms.
    • It’s object oriented. The two programming courses we had during the past fall were actually titles Object Oriented Development (beginner and intermediate). Java was built with many solid object oriented ideologies in regard: inheritance, interfaces, polymorphism, dynamic binding, etc. If you have a solid understanding of the OO in Java, there’s a good change you’ll grasp any other OO language in very short time.
    • It’s widely used in the enterprise sector (or my “Who’s waiting for the fresh students after they graduate?” theory).
    • It’s quite versatile. The university can use Java to teach full blown desktop applications, database programming, GUI design, web server programming, and in recent years mobile app development (Android).

    But what about the cons of teaching Java to new students?

    • Its bloated syntax might be an obstacle when learning how to program. Why should a beginner care about curly braces? Why should he or she even have to ponder over what static is? As soon as the teacher states: Don’t worry about , we’ll get to that in course X and leaves the students dumb-founded, there’s something rotten going on.
    • The lack of simplicity, and need for boilerplate code. Tasks you pull off in Ruby in a line of code can take up several lines in Java. The question is: should the students be forced to write a lot of code by themselves, or should the language serve convenience methods for even the simplest tasks? Or both?
    • Overly complicated and sometimes utterly useless design patterns. AbstractModelFactory , I’m looking at you.

    I think it all boils down to: Is the possible pain and frustration associated with Java worth getting a solid foundation in object orientation, scanning through documentation, diving deep into Swing, and worrying about semicolons? Perhaps.

    What’s the focus? Learn to program in general, or learn a single language? Sometimes I think my university focus a bit too much on Java. They should branch out and bring in examples from other languages once in a while. In the end, I think universities often use Java since it’s the shotgun solution: You can squeeze in quite a large curriculum with Java, it’s widely used in the industry, it teaches basic OO concepts.

    If it was up to me, I’d teach Ruby to new students. Just to get a hang of basic program flows, printing and reading data to a console (I/O), calculations, string manipulations, and then move on to methods, classes, objects, et al. It would only serve as a intro tool to programming. Sure, you can’t create an Android app with Ruby, but I think it would be godsent for the totally new students. The downside? These students would have to learn Java later on instead.

    One could debate wether it’s good or bad for new students to learn two programming languages in a short period of time. But when I see students struggling with why they can’t call methods on an int in Java — like they can on a String — and other things, I wonder if Java is the right choice to start out with.

    \ No newline at end of file diff --git a/writings/javascript-is-dead-long-live-javascript/index.html b/writings/javascript-is-dead-long-live-javascript/index.html index 8e2049295..4bfb5bc30 100644 --- a/writings/javascript-is-dead-long-live-javascript/index.html +++ b/writings/javascript-is-dead-long-live-javascript/index.html @@ -1 +1 @@ -"Javascript is Dead. Long Live Javascript!" / Johan Brook

    "Javascript is Dead. Long Live Javascript!"

    About 1 min reading time

    Follow link to peter.michaux.ca →

    Peter Michaux on Javascript: > One of the most obvious deficiencies in JavaScript is with its user interface: its syntax. The inability to quickly improve its syntax has lead to the language’s downfall. If you have to read a single article on Javascript this month; make it this one. Insightful, nitty-gritty computer science-y stuff is promised (don’t worry about the overly dramatic title). Lots of great musings, code samples, history, and suggestions on improvements of Javascript, and also about the state of compilers such as CoffeeScript. > Since CoffeeScript compilers are in the hands of developers rather than the visitors to sites, you control which version of CoffeeScript you are using. You can upgrade at will. This also means CoffeeScript does not need to be standardized and go through the subsequent painfully slow growth of a standardized language. CoffeeScript can grow at the rate of its community’s imagination and desire. JavaScript standardization was essential to the success of the web but the same constraints do not apply to CoffeeScript. (I also recommend checking out more of Peter’s articles. Some really good stuff in there).

    \ No newline at end of file +"Javascript is Dead. Long Live Javascript!" / Johan Brook

    "Javascript is Dead. Long Live Javascript!"

    About 1 min reading time

    Follow link to peter.michaux.ca →

    Peter Michaux on Javascript: > One of the most obvious deficiencies in JavaScript is with its user interface: its syntax. The inability to quickly improve its syntax has lead to the language’s downfall. If you have to read a single article on Javascript this month; make it this one. Insightful, nitty-gritty computer science-y stuff is promised (don’t worry about the overly dramatic title). Lots of great musings, code samples, history, and suggestions on improvements of Javascript, and also about the state of compilers such as CoffeeScript. > Since CoffeeScript compilers are in the hands of developers rather than the visitors to sites, you control which version of CoffeeScript you are using. You can upgrade at will. This also means CoffeeScript does not need to be standardized and go through the subsequent painfully slow growth of a standardized language. CoffeeScript can grow at the rate of its community’s imagination and desire. JavaScript standardization was essential to the success of the web but the same constraints do not apply to CoffeeScript. (I also recommend checking out more of Peter’s articles. Some really good stuff in there).

    \ No newline at end of file diff --git a/writings/jawbones-jambox/index.html b/writings/jawbones-jambox/index.html index a31ec777b..ebc500930 100644 --- a/writings/jawbones-jambox/index.html +++ b/writings/jawbones-jambox/index.html @@ -1 +1 @@ -Jawbone's Jambox / Johan Brook

    Jawbone's Jambox

    About 4 min reading time

    Since my first iPod I’ve felt the need for some great portable speakers. Friends and family owned a pair, but I always managed to find some minor pet-peeve with them. The iPhone came and thus wireless playing was possible with Bluetooth (later also AirPlay). I wanted something wireless with great sound and design, and now I have Jawbone’s Jambox speaker.

    Jawbone is a company who makes wireless gadgets for phones. I own the Icon Bluetooth headset made by them, which I’m pretty satisfied with. Overall I like the company’s style and taste (the packaging is wicked cool). They went into the portable speakers market in late 2010 with Jambox.

    General

    The Jambox basically looks like a brick of Lego. It’s small, elegant and minimal — it has clean surfaces and lines, and has only three buttons (two for volume control, a third for status messages, taking calls, and more).

    • Measures 57x40x150 mm
    • Jambox comes in the colours red, silver, black and blue
    • Around 10 hours of battery time (chargable)
    • Connects wirelessly with Bluetooth or via 3.5 mm audio cord
    • Ports include mini USB and 3.5 mm audio
    • Package includes 3.5 mm audio cord, two USB cables (different lengths), charging adapter, and a carrying case

    Setup

    Setting up the Jambox is a matter of pairing it wirelessly over Bluetooth with the device you want to stream audio from. For instance, on my iPhone I look for my Jambox in the Bluetooth settings after I’ve activated pairing mode on the Jambox by holding the power button for a second or two.

    You’re of course able to use the included audio cord instead of going with wireless audio. The cord is a (nicely designed) flat, gold plated piece of work, which makes the Jambox work with devices without Bluetooth (it would suck otherwise, wouldn’t it?).

    Jawbone also has this service called MyTalk where you can register and install a small helper application on your computer and from the website update the device’s firmware, personalise settings, and more. I actually recommend it: firmware updates great, and I’ll talk about it more further below.

    Audio

    So how about the actual audio? “It’s so small! The sound must suck!”, “It’s just Bluetooth — of course the resulting music must sound awful!”, etc. Actually, no. The Jambox is not by any means comparable to regular speakers and amplifiers, BUT as a portable speaker for phones and laptops, it’s great.

    I was surprised by the audio quality when I heard it the first time, and amazed how a gadget so small could produce this quality sound. It’s all relative. Since the device itself is the speaker (the grill goes all way around) you have the illusion of 360 degrees audio, although Jambox has one front side (where the main speakers sit, I believe).

    The bass is impressive. Play some bass heavy songs and feel the device vibrate a bit and fill the space with a solid wall of sound. Compared to other portable speakers I’ve heard, I think Jambox’s audio is the best — hands down. It easily manages to fill up a smaller room.

    Design

    Jawbone makes well designed products, and Jambox is not an exception. It’s like a solid coloured brick. The industrial design focus on one thing, and that’s the speakers. No visible screws or joints. There’s no cheap, plastic feel, but a solid quality feel to the device. Thanks to its form and colour offers you’ll be able to put it almost anywhere in your home and it’ll just fit in. Or, use it as paper weight, support for the books in your shelf, or actual building brick (joke).

    Jambox comes in the colours red, blue, silver and black. I’ve got the red one, which goes great with details in my apartment (and incidentally, the accent colours of this site’s design).

    Nowadays I’m a bit picky with what products I get for myself. Clothes, tools, utils, gadgets — I want them well designed, functional, and made with quality. If they do one thing and do it well, that’s great. I believe in few, minimalistic physical things in my home. Jambox fulfills those things very well.

    Feature: Speaker phone

    It’s also possible to use Jambox as speaker phone. Works as you’d expect it to: when paired with a phone, you’re able to take calls from the Jambox by pressing the top round button.

    Feature: LiveAudio

    Jawbone has (in a previous firmware update) introduced “LiveAudio”, which is a technique that creates the illusion of “3D sound”. Just hold the two volume buttons in order to activate or deactivate the feature. For many songs, it actually sounds better: it’s a more solid, immensed and full bodied sound. The downside is that the maximum output volume gets slightly lowered.

    Other

    I mentioned firmware updates. When you purchase the Jambox, it’s not just like a closed brick. By hooking it up to Jawbone’s MyTalk, you’ll be able to download and update the device with new firmware. I did that as soon as I got it out of the box and installed the 2.2 update. Pretty neat. Keep an eye out for new stuff, that is.

    From the MyTalk web site you can download additional voices for the different status messages Jambox emitts. Nice touch.

    In the box there’s a carrying case for the Jambox included. It’s a black, slim cover for the device and it works okay (perhaps a bit slim and tight).

    Summary

    I love my Jambox. It’ll fit perfectly in my small, one room apartment — both design and audio wise. I like the connectivity options — I’m able to stream audio from any Bluetooth device, but with a cord fallback. It’s portable and slick — just bring it in the bag and carry great audio wherever you go.

    If I could wish for one more thing I would put my vote for “Previous” and “Next” buttons on the device. When I put my phone somewhere in the room and having the Jambox in another location near me, it’s tiresome to go to the source device (the phone) in order to skip songs. I think I read that Jawbone’s larger version of Jambox — the Big Jambox — has this feature.

    Links

    \ No newline at end of file +Jawbone's Jambox / Johan Brook

    Jawbone's Jambox

    About 4 min reading time

    Since my first iPod I’ve felt the need for some great portable speakers. Friends and family owned a pair, but I always managed to find some minor pet-peeve with them. The iPhone came and thus wireless playing was possible with Bluetooth (later also AirPlay). I wanted something wireless with great sound and design, and now I have Jawbone’s Jambox speaker.

    Jawbone is a company who makes wireless gadgets for phones. I own the Icon Bluetooth headset made by them, which I’m pretty satisfied with. Overall I like the company’s style and taste (the packaging is wicked cool). They went into the portable speakers market in late 2010 with Jambox.

    General

    The Jambox basically looks like a brick of Lego. It’s small, elegant and minimal — it has clean surfaces and lines, and has only three buttons (two for volume control, a third for status messages, taking calls, and more).

    • Measures 57x40x150 mm
    • Jambox comes in the colours red, silver, black and blue
    • Around 10 hours of battery time (chargable)
    • Connects wirelessly with Bluetooth or via 3.5 mm audio cord
    • Ports include mini USB and 3.5 mm audio
    • Package includes 3.5 mm audio cord, two USB cables (different lengths), charging adapter, and a carrying case

    Setup

    Setting up the Jambox is a matter of pairing it wirelessly over Bluetooth with the device you want to stream audio from. For instance, on my iPhone I look for my Jambox in the Bluetooth settings after I’ve activated pairing mode on the Jambox by holding the power button for a second or two.

    You’re of course able to use the included audio cord instead of going with wireless audio. The cord is a (nicely designed) flat, gold plated piece of work, which makes the Jambox work with devices without Bluetooth (it would suck otherwise, wouldn’t it?).

    Jawbone also has this service called MyTalk where you can register and install a small helper application on your computer and from the website update the device’s firmware, personalise settings, and more. I actually recommend it: firmware updates great, and I’ll talk about it more further below.

    Audio

    So how about the actual audio? “It’s so small! The sound must suck!”, “It’s just Bluetooth — of course the resulting music must sound awful!”, etc. Actually, no. The Jambox is not by any means comparable to regular speakers and amplifiers, BUT as a portable speaker for phones and laptops, it’s great.

    I was surprised by the audio quality when I heard it the first time, and amazed how a gadget so small could produce this quality sound. It’s all relative. Since the device itself is the speaker (the grill goes all way around) you have the illusion of 360 degrees audio, although Jambox has one front side (where the main speakers sit, I believe).

    The bass is impressive. Play some bass heavy songs and feel the device vibrate a bit and fill the space with a solid wall of sound. Compared to other portable speakers I’ve heard, I think Jambox’s audio is the best — hands down. It easily manages to fill up a smaller room.

    Design

    Jawbone makes well designed products, and Jambox is not an exception. It’s like a solid coloured brick. The industrial design focus on one thing, and that’s the speakers. No visible screws or joints. There’s no cheap, plastic feel, but a solid quality feel to the device. Thanks to its form and colour offers you’ll be able to put it almost anywhere in your home and it’ll just fit in. Or, use it as paper weight, support for the books in your shelf, or actual building brick (joke).

    Jambox comes in the colours red, blue, silver and black. I’ve got the red one, which goes great with details in my apartment (and incidentally, the accent colours of this site’s design).

    Nowadays I’m a bit picky with what products I get for myself. Clothes, tools, utils, gadgets — I want them well designed, functional, and made with quality. If they do one thing and do it well, that’s great. I believe in few, minimalistic physical things in my home. Jambox fulfills those things very well.

    Feature: Speaker phone

    It’s also possible to use Jambox as speaker phone. Works as you’d expect it to: when paired with a phone, you’re able to take calls from the Jambox by pressing the top round button.

    Feature: LiveAudio

    Jawbone has (in a previous firmware update) introduced “LiveAudio”, which is a technique that creates the illusion of “3D sound”. Just hold the two volume buttons in order to activate or deactivate the feature. For many songs, it actually sounds better: it’s a more solid, immensed and full bodied sound. The downside is that the maximum output volume gets slightly lowered.

    Other

    I mentioned firmware updates. When you purchase the Jambox, it’s not just like a closed brick. By hooking it up to Jawbone’s MyTalk, you’ll be able to download and update the device with new firmware. I did that as soon as I got it out of the box and installed the 2.2 update. Pretty neat. Keep an eye out for new stuff, that is.

    From the MyTalk web site you can download additional voices for the different status messages Jambox emitts. Nice touch.

    In the box there’s a carrying case for the Jambox included. It’s a black, slim cover for the device and it works okay (perhaps a bit slim and tight).

    Summary

    I love my Jambox. It’ll fit perfectly in my small, one room apartment — both design and audio wise. I like the connectivity options — I’m able to stream audio from any Bluetooth device, but with a cord fallback. It’s portable and slick — just bring it in the bag and carry great audio wherever you go.

    If I could wish for one more thing I would put my vote for “Previous” and “Next” buttons on the device. When I put my phone somewhere in the room and having the Jambox in another location near me, it’s tiresome to go to the source device (the phone) in order to skip songs. I think I read that Jawbone’s larger version of Jambox — the Big Jambox — has this feature.

    Links

    \ No newline at end of file diff --git a/writings/jeremy-keith-the-design-of-html5/index.html b/writings/jeremy-keith-the-design-of-html5/index.html index add40dfa1..8af3ff6ba 100644 --- a/writings/jeremy-keith-the-design-of-html5/index.html +++ b/writings/jeremy-keith-the-design-of-html5/index.html @@ -1 +1 @@ -Jeremy Keith: The Design of HTML5 / Johan Brook

    Jeremy Keith: The Design of HTML5

    About 1 min reading time

    Follow link to adactio.com →

    This is kind of a long read, but definitely Instapaper material. It’s a transcript from Keith’s speech from the Fronteers conference 2010. If you’re going to read just a couple of pieces about HTML5, make sure you get this one. He brings up history of HTML and XHTML — a story about agony, betrayal and markup. He talks about the simplicity in HTML5 (the doctype!) and how we can solve the common problems we had in XHTML 1.0 with the new spec. If you’re into details and nitty-gritty stuff like I am, go read this.

    \ No newline at end of file +Jeremy Keith: The Design of HTML5 / Johan Brook

    Jeremy Keith: The Design of HTML5

    About 1 min reading time

    Follow link to adactio.com →

    This is kind of a long read, but definitely Instapaper material. It’s a transcript from Keith’s speech from the Fronteers conference 2010. If you’re going to read just a couple of pieces about HTML5, make sure you get this one. He brings up history of HTML and XHTML — a story about agony, betrayal and markup. He talks about the simplicity in HTML5 (the doctype!) and how we can solve the common problems we had in XHTML 1.0 with the new spec. If you’re into details and nitty-gritty stuff like I am, go read this.

    \ No newline at end of file diff --git a/writings/kod-app-is-now-open-source/index.html b/writings/kod-app-is-now-open-source/index.html index d9891519a..fc3b734d9 100644 --- a/writings/kod-app-is-now-open-source/index.html +++ b/writings/kod-app-is-now-open-source/index.html @@ -1 +1 @@ -Kod app is now open source / Johan Brook

    Kod app is now open source

    About 1 min reading time

    Follow link to groups.google.com →

    Kod app is a promising code editor for OS X, created by the Swede (wohoo!) Rasmus Andersson. A bunch of features are promised, and the big news is that Rasmus today announced the project  open sourced at Github. Great stuff. There’s also a beta out if you want to try it out. I think it’s awesome with a new simple, light-weight editor that’s actually maintained. If Kod gets versatile, flexible, great features and highly customizable, I think we’ve got a player.

    \ No newline at end of file +Kod app is now open source / Johan Brook

    Kod app is now open source

    About 1 min reading time

    Follow link to groups.google.com →

    Kod app is a promising code editor for OS X, created by the Swede (wohoo!) Rasmus Andersson. A bunch of features are promised, and the big news is that Rasmus today announced the project  open sourced at Github. Great stuff. There’s also a beta out if you want to try it out. I think it’s awesome with a new simple, light-weight editor that’s actually maintained. If Kod gets versatile, flexible, great features and highly customizable, I think we’ve got a player.

    \ No newline at end of file diff --git a/writings/learnable-programming/index.html b/writings/learnable-programming/index.html index c4145c40c..9ac8792fd 100644 --- a/writings/learnable-programming/index.html +++ b/writings/learnable-programming/index.html @@ -1 +1 @@ -"Learnable Programming" / Johan Brook

    "Learnable Programming"

    About 1 min reading time

    Follow link to worrydream.com →

    Programming is a way of thinking, not a rote skill. Learning about “for” loops is not learning to program, any more than learning about pencils is learning to draw. Bret Victor’s essay on “Learnable Programming” is a really solid piece on how improvements can be made when creating tools and techniques to learn how to program. I love the amount of detail and work he’s put down in the article. It’s not a secret that Victor has huge insights in this area — I’m especially fond of his Tangle Javascript library and the article “Ladder of Abstraction”.

    During the past month at university, I’ve acted as a help teacher in the beginner programming course (“Object Oriented Programming using Java”). I’ve tried to push for a more wider understanding for programming: that the students should learn how to think programming — not just how to create a while-loop in Java. Far too many times I’ve seen the students get stuck on petty concepts in Java which isn’t relevant at all in the big plan. The tools to learn are often embarrassingly outdated and weak, and many fail the course. Programming and computer science is a new branch in education – it’s time to start developing modern techniques for teaching it more efficiently.

    \ No newline at end of file +"Learnable Programming" / Johan Brook

    "Learnable Programming"

    About 1 min reading time

    Follow link to worrydream.com →

    Programming is a way of thinking, not a rote skill. Learning about “for” loops is not learning to program, any more than learning about pencils is learning to draw. Bret Victor’s essay on “Learnable Programming” is a really solid piece on how improvements can be made when creating tools and techniques to learn how to program. I love the amount of detail and work he’s put down in the article. It’s not a secret that Victor has huge insights in this area — I’m especially fond of his Tangle Javascript library and the article “Ladder of Abstraction”.

    During the past month at university, I’ve acted as a help teacher in the beginner programming course (“Object Oriented Programming using Java”). I’ve tried to push for a more wider understanding for programming: that the students should learn how to think programming — not just how to create a while-loop in Java. Far too many times I’ve seen the students get stuck on petty concepts in Java which isn’t relevant at all in the big plan. The tools to learn are often embarrassingly outdated and weak, and many fail the course. Programming and computer science is a new branch in education – it’s time to start developing modern techniques for teaching it more efficiently.

    \ No newline at end of file diff --git a/writings/linked-list-style-posts-in-wordpress/index.html b/writings/linked-list-style-posts-in-wordpress/index.html index 4d352fe1b..208acedf4 100644 --- a/writings/linked-list-style-posts-in-wordpress/index.html +++ b/writings/linked-list-style-posts-in-wordpress/index.html @@ -23,4 +23,4 @@ } add_filter('the_permalink_rss', 'johan_permalink_rss'); -

    As you can see it creates a function with the original content in the parameter. It finds the current post’s id and the attached link. If it’s a feed and if it’s a link attached, go ahead and make the RSS permalink ( $content ) the value of the custom link. Return the value and add a filter for the the_permalink_rss used in Wordpress’ RSS parsing file.

    Not that hard, right?

    \ No newline at end of file +

    As you can see it creates a function with the original content in the parameter. It finds the current post’s id and the attached link. If it’s a feed and if it’s a link attached, go ahead and make the RSS permalink ( $content ) the value of the custom link. Return the value and add a filter for the the_permalink_rss used in Wordpress’ RSS parsing file.

    Not that hard, right?

    \ No newline at end of file diff --git a/writings/linus-torvalds-on-good-programmers/index.html b/writings/linus-torvalds-on-good-programmers/index.html index 9c1fb6b42..ba65e4bb4 100644 --- a/writings/linus-torvalds-on-good-programmers/index.html +++ b/writings/linus-torvalds-on-good-programmers/index.html @@ -1 +1 @@ -Linus Torvalds on good programmers / Johan Brook

    Linus Torvalds on good programmers

    About 1 min reading time

    Follow link to programmers.stackexchange.com →

    Bad programmers worry about the code. Good programmers worry about data structures and their relationships.

    In the design world, content is everything. Design without context and content is just noise. In the programming world, code is (usually) nothing without data and the structuring of that data. Fail to manage the content and you fail to build a stable and extendable system.

    \ No newline at end of file +Linus Torvalds on good programmers / Johan Brook

    Linus Torvalds on good programmers

    About 1 min reading time

    Follow link to programmers.stackexchange.com →

    Bad programmers worry about the code. Good programmers worry about data structures and their relationships.

    In the design world, content is everything. Design without context and content is just noise. In the programming world, code is (usually) nothing without data and the structuring of that data. Fail to manage the content and you fail to build a stable and extendable system.

    \ No newline at end of file diff --git a/writings/make-the-invisible-visible-a-clever-campaign-from-amnesty/index.html b/writings/make-the-invisible-visible-a-clever-campaign-from-amnesty/index.html index 77eac2c7e..d417c4d5c 100644 --- a/writings/make-the-invisible-visible-a-clever-campaign-from-amnesty/index.html +++ b/writings/make-the-invisible-visible-a-clever-campaign-from-amnesty/index.html @@ -1 +1 @@ -Make the invisible visible – a clever campaign from Amnesty / Johan Brook

    Make the invisible visible – a clever campaign from Amnesty

    About 1 min reading time

    Follow link to creativereview.co.uk →

    Amnesty usually pulls off pretty cool campaigns in the public, and this one is not an exception. To raise awareness of Troy Davis, a man who has been on the death row for nineteen years and always pledged not guilty, the agency created a concept similar to those small cards you made when you were little. Thin stripes are attached to regular bars, and viewed from the right angle, Davis’ face becomes visible. It makes the invisible visible.

    \ No newline at end of file +Make the invisible visible – a clever campaign from Amnesty / Johan Brook

    Make the invisible visible – a clever campaign from Amnesty

    About 1 min reading time

    Follow link to creativereview.co.uk →

    Amnesty usually pulls off pretty cool campaigns in the public, and this one is not an exception. To raise awareness of Troy Davis, a man who has been on the death row for nineteen years and always pledged not guilty, the agency created a concept similar to those small cards you made when you were little. Thin stripes are attached to regular bars, and viewed from the right angle, Davis’ face becomes visible. It makes the invisible visible.

    \ No newline at end of file diff --git a/writings/master-of-many-trades/index.html b/writings/master-of-many-trades/index.html index e3717c96a..7dda90844 100644 --- a/writings/master-of-many-trades/index.html +++ b/writings/master-of-many-trades/index.html @@ -1 +1 @@ -"Master of many trades" / Johan Brook

    "Master of many trades"

    About 1 min reading time

    Follow link to aeonmagazine.com →

    We hear the descriptive words psychopath and sociopath all the time, but here’s a new one: monopath. It means a person with a narrow mind, a one-track brain, a bore, a super-specialist, an expert with no other interests — in other words, the role-model of choice in the Western world. Great text about things I’ve written or linked to before: how being wide in your interests and learning really is a great way of living. Personally, I am able to connect things that I previously thought were separate, building bridges between areas, and seeing things in a larger perspective, giving me a deeper understanding of the subject and thus a unique satisfaction with what I am currently doing.

    People often say you have to put in 10 000 hours in a subject in order to ultimately master it. Is it worth it? Perhaps. If your fire burns for a single track, go for it. I prefer to stimulate my mind with impressions from a larger set of areas.

    Further reading

    \ No newline at end of file +"Master of many trades" / Johan Brook

    "Master of many trades"

    About 1 min reading time

    Follow link to aeonmagazine.com →

    We hear the descriptive words psychopath and sociopath all the time, but here’s a new one: monopath. It means a person with a narrow mind, a one-track brain, a bore, a super-specialist, an expert with no other interests — in other words, the role-model of choice in the Western world. Great text about things I’ve written or linked to before: how being wide in your interests and learning really is a great way of living. Personally, I am able to connect things that I previously thought were separate, building bridges between areas, and seeing things in a larger perspective, giving me a deeper understanding of the subject and thus a unique satisfaction with what I am currently doing.

    People often say you have to put in 10 000 hours in a subject in order to ultimately master it. Is it worth it? Perhaps. If your fire burns for a single track, go for it. I prefer to stimulate my mind with impressions from a larger set of areas.

    Further reading

    \ No newline at end of file diff --git a/writings/mastodon/index.html b/writings/mastodon/index.html index 9f041f9c1..3c4af0ac9 100644 --- a/writings/mastodon/index.html +++ b/writings/mastodon/index.html @@ -1 +1 @@ -Mastodon / Johan Brook

    Mastodon

    About 4 min reading time

    During November this year, Elon Musk took over as acting CEO of Twitter. It was a horrible event: it felt like the end of the world, and ideological users left or set up alternative social media accounts for themselves. It became totally normal to tweet your contact details with “Find me at X” (as I’ve would go through all those tweets and follow people on Instagram/Tumblr/what-have-you) like the service would shut down at any given time.

    Now, the (Twitter) apocalypse didn’t come. It might still do, because Elon either kicked or caused thousands of employees to leave. But I think a non-trivial blow was caused against the OG social media giant, since people like me actually got off of their asses and created Mastodon accounts. I recommend skimming through the Wikipedia page for Mastodon (huh, it was started as recently as 2016, I didn’t know that).

    I’ve loved Twitter from all the way since I joined in 2008. I recall my “final exam” project in high school was a Twitter client built in Java and Swing. Twitter has enriched my digital life with knowledge, joy, random banter, news, and true sense of “we” during major events. Sentimentally, like a big ol’ family. However, I’m totally aware of the problems of the platform when it comes to harassment and the likes. Also, I’ve heard the product itself (the web UI and mobile apps) isn’t among people’s favourite things to interact with. Non-linear timeline, suggestions, seeing tweets from people you don’t follow, ads, etc. etc. I’ve had non of that, since I’ve used the Tweetbot clients for Mac and iOS for years. That’s how I’ve kept sane during all this time. I urge you to try out a 3rd party client too.

    Speaking of 3rd party clients leads me into this interesting topic: openness and ownership. At certain points in time, Twitter took measures in severely limiting their 3rd party APIs so that app developers couldn’t provide all the features you’d get with Twitter’s own apps. This sucks for us users, obviously, but from a bUsIneSs pErSpEctIvE it makes sense: Twitter is a public company with obligations to their shareholders. I get that. (Even though they still don’t do well financially.) In Mastodon world (“the fediverse” — Federated Universe), this could never happen, because there’s not a single entity in control over the APIs. For an “internet enthusiast” as myself, steeped in 90s/00s open software culture and with a gradual dissatisfaction with centralised companies in Silicon Valley owning my shit, Mastodon is really lovely.

    Mastodon is:

    • open source, so you can fork the source code and run it on your on server
    • maintained by a German non-profit (not an American organisation for once! *tears of joy)
    • ad-free, backed by supporters
    • Supporting W3C’s ActivityPub protocol for talking with other services
    • decentralised, anybody can boot up their own Mastodon instance and connect to the “federation”

    The last point is of course not something regular users will do. This quote comes to mind:

    People don’t want to run their own servers, and never will.

    Moxie Marlinspike

    This is just an implementation detail, but I like that you can do this. But I won’t. Instead, I trust the instance I’m registered to at the moment. But if I wanted to, I could just take my stuff and migrate to another instance. This is really important, since it lowers the anxiety of picking an instance when you sign up (they should front this more in the onboarding).

    The “how to pick an instance” part of Mastodon is probably their biggest UX challenge at the moment. I’m at Hachyderm, which is run by a great engineer at GitHub. The instance is well maintained and has sane server rules. How did I find it? Via @mislav on Twitter, in his good intro thread to Mastodon.

    I’m kind of torn on the subject of “Twitter vs Mastodon”. One one hand, I love the hacker ethics of Mastodon. On the other hand, I love the original attitudes of Twitter and my timeline. I don’t want Twitter to fail per se, but at the same time, I’m happy that Mastodon got an influx of users during the Elon Musk takeover. But the takeover was, to me, completely unnecessary. They did not have to sell to Musk. Now, a month later, a bunch of great engineers — some of the best in the world — have left the company. Twitter may have suffered from the ordinary big-co Silicon Valley bullshit when it comes to policies, investors, management, and so on, but I’ve heard their engineering team is really, really great. So I’m sad for them having to leave their work and code due to the rich asshole barging in.

    Now when the dust has settled a bit after the Twitter doomsday frenzy, I appreciate Mastodon a lot. It’s so cosy checking out my timeline there, since it feels like Twitter felt in the beginning, before the harsh reality of profit making got on them. The hacker feel of the system also brings out nostalgia. Even though I’ve been guarded from most of Twitter’s bad product decisions thanks to the aforementioned choice of 3rd party clients, the feel of Mastodon is something special. Maybe it’s just a feel of starting over. But it creates a fuzzy feeling knowing that the project is based on attitudes and philosophies I can get behind. Does it have the same reach and scale as Twitter? Of course not, that’s not the goal. Most Twitter users whose tweets I enjoy the most are on Mastodon anyway. Is it annoying checking two apps? A bit, yes, but the content also vary in that Mastodon posts (“toots”) feels more well written and have higher quality.

    Mastodon certainly isn’t perfect. It surely has or will have its problems and scandals or whatnot. We’ll see. For now though, I’m just happy to have discovered a new project and technology I like for myself.

    Now I’m just waiting for Tapbot’s Ivory client to land…

    (I’m @brookie@johan.im on Mastodon by the way!)

    \ No newline at end of file +Mastodon / Johan Brook

    Mastodon

    About 4 min reading time

    During November this year, Elon Musk took over as acting CEO of Twitter. It was a horrible event: it felt like the end of the world, and ideological users left or set up alternative social media accounts for themselves. It became totally normal to tweet your contact details with “Find me at X” (as I’ve would go through all those tweets and follow people on Instagram/Tumblr/what-have-you) like the service would shut down at any given time.

    Now, the (Twitter) apocalypse didn’t come. It might still do, because Elon either kicked or caused thousands of employees to leave. But I think a non-trivial blow was caused against the OG social media giant, since people like me actually got off of their asses and created Mastodon accounts. I recommend skimming through the Wikipedia page for Mastodon (huh, it was started as recently as 2016, I didn’t know that).

    I’ve loved Twitter from all the way since I joined in 2008. I recall my “final exam” project in high school was a Twitter client built in Java and Swing. Twitter has enriched my digital life with knowledge, joy, random banter, news, and true sense of “we” during major events. Sentimentally, like a big ol’ family. However, I’m totally aware of the problems of the platform when it comes to harassment and the likes. Also, I’ve heard the product itself (the web UI and mobile apps) isn’t among people’s favourite things to interact with. Non-linear timeline, suggestions, seeing tweets from people you don’t follow, ads, etc. etc. I’ve had non of that, since I’ve used the Tweetbot clients for Mac and iOS for years. That’s how I’ve kept sane during all this time. I urge you to try out a 3rd party client too.

    Speaking of 3rd party clients leads me into this interesting topic: openness and ownership. At certain points in time, Twitter took measures in severely limiting their 3rd party APIs so that app developers couldn’t provide all the features you’d get with Twitter’s own apps. This sucks for us users, obviously, but from a bUsIneSs pErSpEctIvE it makes sense: Twitter is a public company with obligations to their shareholders. I get that. (Even though they still don’t do well financially.) In Mastodon world (“the fediverse” — Federated Universe), this could never happen, because there’s not a single entity in control over the APIs. For an “internet enthusiast” as myself, steeped in 90s/00s open software culture and with a gradual dissatisfaction with centralised companies in Silicon Valley owning my shit, Mastodon is really lovely.

    Mastodon is:

    • open source, so you can fork the source code and run it on your on server
    • maintained by a German non-profit (not an American organisation for once! *tears of joy)
    • ad-free, backed by supporters
    • Supporting W3C’s ActivityPub protocol for talking with other services
    • decentralised, anybody can boot up their own Mastodon instance and connect to the “federation”

    The last point is of course not something regular users will do. This quote comes to mind:

    People don’t want to run their own servers, and never will.

    Moxie Marlinspike

    This is just an implementation detail, but I like that you can do this. But I won’t. Instead, I trust the instance I’m registered to at the moment. But if I wanted to, I could just take my stuff and migrate to another instance. This is really important, since it lowers the anxiety of picking an instance when you sign up (they should front this more in the onboarding).

    The “how to pick an instance” part of Mastodon is probably their biggest UX challenge at the moment. I’m at Hachyderm, which is run by a great engineer at GitHub. The instance is well maintained and has sane server rules. How did I find it? Via @mislav on Twitter, in his good intro thread to Mastodon.

    I’m kind of torn on the subject of “Twitter vs Mastodon”. One one hand, I love the hacker ethics of Mastodon. On the other hand, I love the original attitudes of Twitter and my timeline. I don’t want Twitter to fail per se, but at the same time, I’m happy that Mastodon got an influx of users during the Elon Musk takeover. But the takeover was, to me, completely unnecessary. They did not have to sell to Musk. Now, a month later, a bunch of great engineers — some of the best in the world — have left the company. Twitter may have suffered from the ordinary big-co Silicon Valley bullshit when it comes to policies, investors, management, and so on, but I’ve heard their engineering team is really, really great. So I’m sad for them having to leave their work and code due to the rich asshole barging in.

    Now when the dust has settled a bit after the Twitter doomsday frenzy, I appreciate Mastodon a lot. It’s so cosy checking out my timeline there, since it feels like Twitter felt in the beginning, before the harsh reality of profit making got on them. The hacker feel of the system also brings out nostalgia. Even though I’ve been guarded from most of Twitter’s bad product decisions thanks to the aforementioned choice of 3rd party clients, the feel of Mastodon is something special. Maybe it’s just a feel of starting over. But it creates a fuzzy feeling knowing that the project is based on attitudes and philosophies I can get behind. Does it have the same reach and scale as Twitter? Of course not, that’s not the goal. Most Twitter users whose tweets I enjoy the most are on Mastodon anyway. Is it annoying checking two apps? A bit, yes, but the content also vary in that Mastodon posts (“toots”) feels more well written and have higher quality.

    Mastodon certainly isn’t perfect. It surely has or will have its problems and scandals or whatnot. We’ll see. For now though, I’m just happy to have discovered a new project and technology I like for myself.

    Now I’m just waiting for Tapbot’s Ivory client to land…

    (I’m @brookie@johan.im on Mastodon by the way!)

    \ No newline at end of file diff --git a/writings/maven-pro-a-free-sans-serif-font/index.html b/writings/maven-pro-a-free-sans-serif-font/index.html index 3a08ff5eb..63fc8242b 100644 --- a/writings/maven-pro-a-free-sans-serif-font/index.html +++ b/writings/maven-pro-a-free-sans-serif-font/index.html @@ -1 +1 @@ -Maven Pro – a free sans serif font / Johan Brook

    Maven Pro – a free sans serif font

    About 1 min reading time

    Follow link to vissol.co.uk →

    Maven Pro is a free sans serif font designed by Joe Prince. It currently consists of a single weight, but the creators promises more to come. I think it looks incredibly slick and fine tuned. You’re free to donate: all proceeds go to charity. (However, the site doesn’t say wether the font is okay to use in web design as a @font-face_)_ Update: After reading the ReadMe it clearly states it’s okay to embed the font with @font-face: > This font CAN be used with @font-face and the web font files are included, enjoy! EOT, SVG, WOFF and TTF are included, as well as the regular OTF font file. Awesomeness.

    \ No newline at end of file +Maven Pro – a free sans serif font / Johan Brook

    Maven Pro – a free sans serif font

    About 1 min reading time

    Follow link to vissol.co.uk →

    Maven Pro is a free sans serif font designed by Joe Prince. It currently consists of a single weight, but the creators promises more to come. I think it looks incredibly slick and fine tuned. You’re free to donate: all proceeds go to charity. (However, the site doesn’t say wether the font is okay to use in web design as a @font-face_)_ Update: After reading the ReadMe it clearly states it’s okay to embed the font with @font-face: > This font CAN be used with @font-face and the web font files are included, enjoy! EOT, SVG, WOFF and TTF are included, as well as the regular OTF font file. Awesomeness.

    \ No newline at end of file diff --git a/writings/measuring-and-sizing-uis-2011-style/index.html b/writings/measuring-and-sizing-uis-2011-style/index.html index 72df2db48..5d4f44055 100644 --- a/writings/measuring-and-sizing-uis-2011-style/index.html +++ b/writings/measuring-and-sizing-uis-2011-style/index.html @@ -1 +1 @@ -Measuring and sizing UIs, 2011-style / Johan Brook

    Measuring and sizing UIs, 2011-style

    About 1 min reading time

    Follow link to csswizardry.com →

    Harry Roberts (“CSS Wizardry”) wraps up the current state of measuring on the web, which I personally enjoyed reading about. I often dabble between doctrines when setting measures and sizes of type, margins, paddings, widths, etc. etc., and a concluding write-up was welcomed.

    \ No newline at end of file +Measuring and sizing UIs, 2011-style / Johan Brook

    Measuring and sizing UIs, 2011-style

    About 1 min reading time

    Follow link to csswizardry.com →

    Harry Roberts (“CSS Wizardry”) wraps up the current state of measuring on the web, which I personally enjoyed reading about. I often dabble between doctrines when setting measures and sizes of type, margins, paddings, widths, etc. etc., and a concluding write-up was welcomed.

    \ No newline at end of file diff --git a/writings/minimal-skype-5-message-style/index.html b/writings/minimal-skype-5-message-style/index.html index ed5c5724a..7797c40d0 100644 --- a/writings/minimal-skype-5-message-style/index.html +++ b/writings/minimal-skype-5-message-style/index.html @@ -1 +1 @@ -Minimal Skype 5 message style / Johan Brook

    Minimal Skype 5 message style

    About 1 min reading time

    Follow link to pongsocket.com →

    Skype 5 Beta for Mac arrived earlier today. I like the unified one-window concept and group video calls. But I and almost the rest of my Twitter stream think there’s too much whitespace in certain areas, the instant messaging chat, for example. The thing is, the messaging area uses Webkit and therefore CSS to style the messages. You can change style by going to the Skype preferences > Messaging > Style. Custom styles live in ~/Library/Application Support/Skype/ChatStyles , and are in the .SkypeChatStyle format (basically a package consisting of CSS, HTML and JS files). To the point of this post: Andy Graulund has created a minimal style for Skype 5 beta, Panamerica Mini. Download and put in the folder I mentioned above, and chose the style from the Preferences.

    \ No newline at end of file +Minimal Skype 5 message style / Johan Brook

    Minimal Skype 5 message style

    About 1 min reading time

    Follow link to pongsocket.com →

    Skype 5 Beta for Mac arrived earlier today. I like the unified one-window concept and group video calls. But I and almost the rest of my Twitter stream think there’s too much whitespace in certain areas, the instant messaging chat, for example. The thing is, the messaging area uses Webkit and therefore CSS to style the messages. You can change style by going to the Skype preferences > Messaging > Style. Custom styles live in ~/Library/Application Support/Skype/ChatStyles , and are in the .SkypeChatStyle format (basically a package consisting of CSS, HTML and JS files). To the point of this post: Andy Graulund has created a minimal style for Skype 5 beta, Panamerica Mini. Download and put in the folder I mentioned above, and chose the style from the Preferences.

    \ No newline at end of file diff --git a/writings/minimalistic-oscar-posters/index.html b/writings/minimalistic-oscar-posters/index.html index 50220a605..29f83c28c 100644 --- a/writings/minimalistic-oscar-posters/index.html +++ b/writings/minimalistic-oscar-posters/index.html @@ -1 +1 @@ -Minimalistic Oscar posters / Johan Brook

    Minimalistic Oscar posters

    About 1 min reading time

    Follow link to behance.net →

    David Lopez has created some great-looking movie posters of this year’s Academy Award winning films. These kind of posters are easy to screw up, and hard to get “just right” where they are instantly recognized. Lopez’s style is similar to the master Olly Moss.

    \ No newline at end of file +Minimalistic Oscar posters / Johan Brook

    Minimalistic Oscar posters

    About 1 min reading time

    Follow link to behance.net →

    David Lopez has created some great-looking movie posters of this year’s Academy Award winning films. These kind of posters are easy to screw up, and hard to get “just right” where they are instantly recognized. Lopez’s style is similar to the master Olly Moss.

    \ No newline at end of file diff --git a/writings/my-favourite-software/index.html b/writings/my-favourite-software/index.html index cf335984b..e36d01d97 100644 --- a/writings/my-favourite-software/index.html +++ b/writings/my-favourite-software/index.html @@ -1,4 +1,4 @@ My favourite software / Johan Brook

    My favourite software

    About 3 min reading time

    1. Typescript

    I started programming in Java and PHP. Those two worlds were vastly different. PHP stood for freedom, fun, and anything-is-possible. Java was rigid, hard, and verbose — much because of the need for types everywhere. However, when I got the Java code to compile, it was usually okay in runtime (as okay it can be for a 15 year old). Java was heavily used in university, and I grew to hate it even more. The interpreted languages like PHP, Ruby, and Javascript felt much nicer.

    Fast forward to around 2018, and I got the chance to play around with Typescript (and GraphQL) at work. This was a turning point in my journey as programmer: the types actually helped me. The type system — although not as “correct” as in Haskell et al — was expressive, flexible, and quite easy to understand. And the language itself resembled Javascript so much I didn’t think about it.

    What I love about Typescript is:

    • the no-nonsense setup:
      npm i --save-dev typescript
 touch script.ts
 npx tsc script.ts
-
    • the backwards compatibility with Javascript: one can gradually add types if that suits the project.
    • I’m not annoyed over any particular syntax of the language.
    • that it’s actively maintained, and the community is growing and full of tools.

    Typescript is probably the single piece of software that has made me write better code over the last few years. I need less automatic tests, less or no linting. It has opened a new world (of types) to me, and has made me never wanting to go back.

    2. Deno

    Deno is what NodeJS was supposed to be. I think. It’s a new Javascript runtime which does a lot of things right. Peruse the Manual and if you’ve written a bit of NodeJS, you’ll probably find yourself nod along as you read through the Deno docs.

    There are a lot of built-in things, and the ecosystem is spreading. Typescript is a first class citizen. Testing, formatting, and linting are included. Web APIs are available on the server.

    Deno fixes so many things in Node which I’d either get annoyed with or work around.

    3. cUrl

    The curl command just works. There are wrappers and replacements which are “simpler” and more intuitive. But this is one of these cases where I think it’s good to learn the low level tools, since curl is available on a lot of machines.

    I for one appreciate elegant CLI tools which doesn’t make me figure out their fantasy world of options and arguments. But curl is such a fundamental way to interact with remote data (I use it for HTTP 100% of the cases).

    4. Lume

    Lume is a static site generator (using Deno and Typescript). I recently moved to it from Eleventy, and before that from Jekyll -> Wintersmith -> Metalsmith. Lume is the first one which is close to 100% intuitive, and the first one that I’m not annoyed over when using. I’ve read some of the Lume source code, and it’s lovely: succinct and readable.

    Lume does what it does, and does it really well.

    5. Numi

    Numi is a calculator app, like Soulver, which I use a couple of times per day. I’ve bound it to be visible when I press cmd+shift+x for quick calculations. I use it for everything from credit card bills to protein intake calculations. It’s declarative in the sense that it “does what I think it does”. If I type 5% of 100g it’ll output 5 g. It has nice documentation.

    Numi doesn’t just to maths: it can deal with unit, timezone, and currency conversions too, and many other things.

    This tech isn’t novel, but Numi pulls it off in a minimal packaging, and I love it.

    6. Tweetbot

    I honestly don’t understand why people are using the regular Twitter.com or Twitter clients for iOS/Android. People complain daily about “The Algorithm”, non-chronological timelines, ads, etc. etc. Just start using a 3rd party client already!

    I’ve used a ton of clients since I joined Twitter. Many of them are now dead because of Twitter’s big purge (they killed a lot of API functionality and tweaked some legal agreement I think). But Tweetbot is still standing, and are actively pushing new features. I’m a happy subscriber.

    The team has always produced super slick designs, and their work is still cool in a world which doesn’t really do skeumorphism any longer.

    Tweetbot for Mac and iOS have all the features I need. It makes intelligent use of gestures on respective platform, and I can customise things. No ads. No weird sorting or algorithm. It’s literally how Twitter used to be.

    \ No newline at end of file +
  • the backwards compatibility with Javascript: one can gradually add types if that suits the project.
  • I’m not annoyed over any particular syntax of the language.
  • that it’s actively maintained, and the community is growing and full of tools.

    Typescript is probably the single piece of software that has made me write better code over the last few years. I need less automatic tests, less or no linting. It has opened a new world (of types) to me, and has made me never wanting to go back.

    2. Deno

    Deno is what NodeJS was supposed to be. I think. It’s a new Javascript runtime which does a lot of things right. Peruse the Manual and if you’ve written a bit of NodeJS, you’ll probably find yourself nod along as you read through the Deno docs.

    There are a lot of built-in things, and the ecosystem is spreading. Typescript is a first class citizen. Testing, formatting, and linting are included. Web APIs are available on the server.

    Deno fixes so many things in Node which I’d either get annoyed with or work around.

    3. cUrl

    The curl command just works. There are wrappers and replacements which are “simpler” and more intuitive. But this is one of these cases where I think it’s good to learn the low level tools, since curl is available on a lot of machines.

    I for one appreciate elegant CLI tools which doesn’t make me figure out their fantasy world of options and arguments. But curl is such a fundamental way to interact with remote data (I use it for HTTP 100% of the cases).

    4. Lume

    Lume is a static site generator (using Deno and Typescript). I recently moved to it from Eleventy, and before that from Jekyll -> Wintersmith -> Metalsmith. Lume is the first one which is close to 100% intuitive, and the first one that I’m not annoyed over when using. I’ve read some of the Lume source code, and it’s lovely: succinct and readable.

    Lume does what it does, and does it really well.

    5. Numi

    Numi is a calculator app, like Soulver, which I use a couple of times per day. I’ve bound it to be visible when I press cmd+shift+x for quick calculations. I use it for everything from credit card bills to protein intake calculations. It’s declarative in the sense that it “does what I think it does”. If I type 5% of 100g it’ll output 5 g. It has nice documentation.

    Numi doesn’t just to maths: it can deal with unit, timezone, and currency conversions too, and many other things.

    This tech isn’t novel, but Numi pulls it off in a minimal packaging, and I love it.

    6. Tweetbot

    I honestly don’t understand why people are using the regular Twitter.com or Twitter clients for iOS/Android. People complain daily about “The Algorithm”, non-chronological timelines, ads, etc. etc. Just start using a 3rd party client already!

    I’ve used a ton of clients since I joined Twitter. Many of them are now dead because of Twitter’s big purge (they killed a lot of API functionality and tweaked some legal agreement I think). But Tweetbot is still standing, and are actively pushing new features. I’m a happy subscriber.

    The team has always produced super slick designs, and their work is still cool in a world which doesn’t really do skeumorphism any longer.

    Tweetbot for Mac and iOS have all the features I need. It makes intelligent use of gestures on respective platform, and I can customise things. No ads. No weird sorting or algorithm. It’s literally how Twitter used to be.

    \ No newline at end of file diff --git a/writings/my-personal-gym-faq/index.html b/writings/my-personal-gym-faq/index.html index 548bfd63e..1aa063016 100644 --- a/writings/my-personal-gym-faq/index.html +++ b/writings/my-personal-gym-faq/index.html @@ -1 +1 @@ -My Personal Gym FAQ / Johan Brook

    My Personal Gym FAQ

    About 4 min reading time

    Hey man, you don’t exactly look like a dude that has ever hit the gym before?

    Nope, hence it was a good time to start. Outer appearance never defines the inner, as well as future, prospects. Even though the process is similar, going to the gym isn’t like learning how to bicycle or how to swim: it’s not something you expect everyone to just know by heart.

    Do you really expect to notice any difference on your skinny, skeleton like, Kenyan marathon runner body?

    I think so. I’ve got pretty good genes for building muscle (mum’s side are farmers 💪), and I’m still young enough to have the potential of rapid muscle growth (“sick gains”). As long as you stick to your protein plan (mine’s 146 g per day) and don’t stop challenging yourself with the weights, you’ll notice a minor change after just some two weeks, like I did.

    You know you need to go all nerdy into protein powder, creatine, eating healthy and a lot, taking pills, buying equipment and that, right?

    Actually not. A water bottle, some indoor clothes, and a gym card will take you far. It’s pure simplicity and minimalism in its essence. Some protein powder is pretty cool if you need a safety line at the end of the day and you realise you didn’t get your protein dosage for the day (a single protein shake contains ~30 grams of protein, give or take).

    Eating healthy isn’t that big of a deal either. A story from the wild: yours truly is a self proclaimed pasta fanatic, who usually indulge in all sorts of dishes that include gnocchi, spaghetti, penne, and the others. I’ve practically built this body from 21 to 26 years of age to rely on carbonara and spaghetti bolognese (I blame university and an outspoken love for the Italian cuisine).

    Anyhow, going to the gym has made me decrease the intake of those fast carbs in my daily diet, since there are other alternatives that are just as quick and easy, but healthier. Pasta used to be my quick fix — “just to fill me up for now” — but ended up being the salvation (jesus, does it sound like I’m talking about heroin here? ’Cause I’m not). Pasta just made me full for a while, then the stomach was back at it, whining about more food.

    Ever since me and my friend Henrik started working out that fateful day four weeks ago, we’ve been on a semi-strict protein focused diet. That means, you really need to fight to get your 146 grams or whatever protein dosage during a day, and man, it’s not a fucking game. If you don’t meet your protein goal, risk is that you’ll decrease muscle instead of building it. We all know that nothing sucks more than to do work in vain and not get paid for it. This motivation (read fear) is a huge drive for eating better.

    I’m currently eating more:

    • chicken
    • tuna
    • beans
    • broccoli
    • nuts

    than before, and seldom feel hungry in the same way like I used to.

    I bet you look kinda weak and silly when you can’t go for the heavyweight dumbbells, haha.

    Nah, the gym atmosphere is incredibly welcoming and inclusive. Everybody are minding their own business. You’ll discover after a few weeks how homey you feel in the gym, and that you get into another zone: like it’s your living room you’re using.

    Everybody warms up on lighter weights in the beginning of a session, and nobody will think you’re a weakling for not taking more than 12 kg in a biceps curl. On the contrary, people would probably think you’re an idiot for coming in and trying to take on more kilograms than you can muster.

    Would you admit you actually just work out to look good naked, or impress on individuals of the opposite sex?

    Yes and no. I decided to start build some muscle in order to

    • keep my body in shape before the upcoming 30s kicks in, and it begins to gradually go in a downwards spiral if you’re not being careful
    • feel generally stronger and better in my body during a normal day
    • improve my posture and back muscles (I sit a lot in work)
    • of course I want to look good naked and impress on individuals of the opposite sex, goddammit. Let’s be real here.

    These personal lighthouses of mine are cool and all, but the real cool thing is when you realise you’ve got the power to tweak and shape your body. Sure, it’s claiming the obvious, but for real: the moment you actually are getting and noticing results is an uber cool feeling, which is worth it all alone.

    Isn’t it annoying and hard to keep up the habit of going to the gym three times a week? I don’t think you’ll last.

    Nah, it’s pretty doable — especially if you’re not going alone. Having a friend at your side is priceless, and you trigger each other all the time. Some smart person once said “It takes 21 days to form a habit”, and that’s pretty true. It feels like a nice routine now, and feels very good to having something to plan my life around.

    I work remote with the computer, and it’s very easy to just let time slip by, since you can work almost at any time. There’s no traditional barriers for when you can work and not. So I always encourage remote workers and freelancers to get routines, otherwise risk is you’ll go insane and just sit home and forget to shower and how to walk and talk.

    The Buddhist koan which says

    You should meditate twenty minutes per day.
    If you’re busy, meditate for an hour.

    also holds. If you’re super busy and stressed about daily life stuff, you should probably hit the gym or do some other exercise for a long while, pay a visit to the sauna, and then attack your business with recharged physical and mental energies.

    This was a lame post, buddy. Why would you write a silly ass text in FAQ format about your first experiences with going to the gym? It’s kind of weird and attention seeking to be honest. Go and program some robot, or whatever it is you’re doing.

    So voices like you might have your questions answered and shut up for once. Thanks for reading!

    Footnotes & sources

    • I’ve been basing a huge chunk of knowledge on this guide by Julian Shapiro: “How To Build Muscle”. It’s well written, funny, pragmatic, authentic, and just “a regular dude’s advice on building muscle”.
    • My friend Robin has contributed a lot of nutrition tips during and outside of gym sessions.
    \ No newline at end of file +My Personal Gym FAQ / Johan Brook

    My Personal Gym FAQ

    About 4 min reading time

    Hey man, you don’t exactly look like a dude that has ever hit the gym before?

    Nope, hence it was a good time to start. Outer appearance never defines the inner, as well as future, prospects. Even though the process is similar, going to the gym isn’t like learning how to bicycle or how to swim: it’s not something you expect everyone to just know by heart.

    Do you really expect to notice any difference on your skinny, skeleton like, Kenyan marathon runner body?

    I think so. I’ve got pretty good genes for building muscle (mum’s side are farmers 💪), and I’m still young enough to have the potential of rapid muscle growth (“sick gains”). As long as you stick to your protein plan (mine’s 146 g per day) and don’t stop challenging yourself with the weights, you’ll notice a minor change after just some two weeks, like I did.

    You know you need to go all nerdy into protein powder, creatine, eating healthy and a lot, taking pills, buying equipment and that, right?

    Actually not. A water bottle, some indoor clothes, and a gym card will take you far. It’s pure simplicity and minimalism in its essence. Some protein powder is pretty cool if you need a safety line at the end of the day and you realise you didn’t get your protein dosage for the day (a single protein shake contains ~30 grams of protein, give or take).

    Eating healthy isn’t that big of a deal either. A story from the wild: yours truly is a self proclaimed pasta fanatic, who usually indulge in all sorts of dishes that include gnocchi, spaghetti, penne, and the others. I’ve practically built this body from 21 to 26 years of age to rely on carbonara and spaghetti bolognese (I blame university and an outspoken love for the Italian cuisine).

    Anyhow, going to the gym has made me decrease the intake of those fast carbs in my daily diet, since there are other alternatives that are just as quick and easy, but healthier. Pasta used to be my quick fix — “just to fill me up for now” — but ended up being the salvation (jesus, does it sound like I’m talking about heroin here? ’Cause I’m not). Pasta just made me full for a while, then the stomach was back at it, whining about more food.

    Ever since me and my friend Henrik started working out that fateful day four weeks ago, we’ve been on a semi-strict protein focused diet. That means, you really need to fight to get your 146 grams or whatever protein dosage during a day, and man, it’s not a fucking game. If you don’t meet your protein goal, risk is that you’ll decrease muscle instead of building it. We all know that nothing sucks more than to do work in vain and not get paid for it. This motivation (read fear) is a huge drive for eating better.

    I’m currently eating more:

    • chicken
    • tuna
    • beans
    • broccoli
    • nuts

    than before, and seldom feel hungry in the same way like I used to.

    I bet you look kinda weak and silly when you can’t go for the heavyweight dumbbells, haha.

    Nah, the gym atmosphere is incredibly welcoming and inclusive. Everybody are minding their own business. You’ll discover after a few weeks how homey you feel in the gym, and that you get into another zone: like it’s your living room you’re using.

    Everybody warms up on lighter weights in the beginning of a session, and nobody will think you’re a weakling for not taking more than 12 kg in a biceps curl. On the contrary, people would probably think you’re an idiot for coming in and trying to take on more kilograms than you can muster.

    Would you admit you actually just work out to look good naked, or impress on individuals of the opposite sex?

    Yes and no. I decided to start build some muscle in order to

    • keep my body in shape before the upcoming 30s kicks in, and it begins to gradually go in a downwards spiral if you’re not being careful
    • feel generally stronger and better in my body during a normal day
    • improve my posture and back muscles (I sit a lot in work)
    • of course I want to look good naked and impress on individuals of the opposite sex, goddammit. Let’s be real here.

    These personal lighthouses of mine are cool and all, but the real cool thing is when you realise you’ve got the power to tweak and shape your body. Sure, it’s claiming the obvious, but for real: the moment you actually are getting and noticing results is an uber cool feeling, which is worth it all alone.

    Isn’t it annoying and hard to keep up the habit of going to the gym three times a week? I don’t think you’ll last.

    Nah, it’s pretty doable — especially if you’re not going alone. Having a friend at your side is priceless, and you trigger each other all the time. Some smart person once said “It takes 21 days to form a habit”, and that’s pretty true. It feels like a nice routine now, and feels very good to having something to plan my life around.

    I work remote with the computer, and it’s very easy to just let time slip by, since you can work almost at any time. There’s no traditional barriers for when you can work and not. So I always encourage remote workers and freelancers to get routines, otherwise risk is you’ll go insane and just sit home and forget to shower and how to walk and talk.

    The Buddhist koan which says

    You should meditate twenty minutes per day.
    If you’re busy, meditate for an hour.

    also holds. If you’re super busy and stressed about daily life stuff, you should probably hit the gym or do some other exercise for a long while, pay a visit to the sauna, and then attack your business with recharged physical and mental energies.

    This was a lame post, buddy. Why would you write a silly ass text in FAQ format about your first experiences with going to the gym? It’s kind of weird and attention seeking to be honest. Go and program some robot, or whatever it is you’re doing.

    So voices like you might have your questions answered and shut up for once. Thanks for reading!

    Footnotes & sources

    • I’ve been basing a huge chunk of knowledge on this guide by Julian Shapiro: “How To Build Muscle”. It’s well written, funny, pragmatic, authentic, and just “a regular dude’s advice on building muscle”.
    • My friend Robin has contributed a lot of nutrition tips during and outside of gym sessions.
    \ No newline at end of file diff --git a/writings/my-spaghetti-bolognese/index.html b/writings/my-spaghetti-bolognese/index.html index 0d8976792..7f666529f 100644 --- a/writings/my-spaghetti-bolognese/index.html +++ b/writings/my-spaghetti-bolognese/index.html @@ -1 +1 @@ -My Spaghetti Bolognese / Johan Brook

    My Spaghetti Bolognese

    About 5 min reading time

    I had a free Sunday today, and I’d planned on making spaghetti bolognese for dinner. Then I thought I’d write a bit about it.

    Update, November 2021: read an improved version of the spaghetti bolognese recipe. It’s easier and tastes better, I think, and isn’t as pretentiously written.

    Introduction

    You’ve probably heard of the dish “Spaghetti bolognese”, and have had it countless of times, served in schools, restaurants, and at home as an everyday dinner across Europe and America. There are equally countless variations of the recipe, with ingredients varying from celery and bacon to milk and soy. I’m not actually sure there’s a “true” spaghetti bolognese, as the dish actually doesn’t exist, traditionally in Italy, in the shape we non-Italians are used to. According to a Wikipedia article, the tomato fueled bolognese we’re used to is actually closest to the ragù served in the Naples area (ragù alla napoletana). The traditional ragù in the Bologna area is much more basic: meatier and less sauce-y than what you’re probably used to.

    The Guardian’s article aptly named How To Make the Perfect Bolognese includes the paragraph

    The fact is that there is no definitive recipe for a bolognese meat sauce, but to be worthy of the name, it should respect the traditions of the area. There’s nothing wrong with a tomato-based beef ragu, rich with garlic and olive oil, except that it’s not what, traditionally at least, they’d eat in Emilia Romagna, which is dairy country. As for serving such a hearty meat sauce with delicate spaghetti — well, that is wrong. But it still tastes pretty good.

    In summary: you do you. Cooking food is (loosely) like sex: if it feels [tastes] good, it’s probably fine.

    The Dish

    What I’ve done here is to accumulate stuff I’ve picked up from others during the years, as well as extensive research online for more tips and tricks, in order to boil everything down to a process that fits me (I’ve ordered the light version of “The Silver Spoon” but it hasn’t arrived at the time of writing).

    What I love about bolognese is that it’s so very versatile. It can be boiled down to a very basic recipe you can make in 40 minutes, or make it a Sunday meal activity where you long cook it for 4 hours with homemade tomato passata. Up to you (our mantra here, if you didn’t pick that up).

    The Ingredients

    All ingredients are stuff you can find at the local super market, of course, but as usual, try to find good quality groceries as it’ll taste richer. I usually go with 100% beef meat (eco), but I guess a pork mix is fine too. I have to confess that I’ve cut out the celery part when I make it myself, since I hate celery beyond reason.

    I usually make bolognese on 800g of meat. But that’s for Sunday dinner, and then me and the girlfriend has lunch boxes for the week at work. The bolognese tastes wonderful the day after in the microwave, so it’s the perfect dish for making a large batch of. And, it’s quite satisfying to make huge fucking batches of food too. Just a tip. Feel free to double all measures in the recipe below if so.

    You can put in tons of fun stuff: everything from mushrooms to bacon. The latter will make it a more smokey flavour. I honestly think the mushroom taste is disappearing in the tomato sauce, but that’s just me.

    Some recipes, mostly the traditional ragù ones, calls for white wine. But as I’m making a “tomato ragù” here, I go with red wine since I think it marries with the tomato better.

    The tomato sauce

    The essence of what we associate a good bolognese with! Juicy, sweet, rich tomato sauce. I learned a lot researching this. In recipes I’ve encountered online, they use something called “passata” or “passato”. What’s passata? It’s “just” tomato puree: it’s not pasta sauce and it’s not tomato paste. It’s versatile (you can use it for all kinds of tomato stuff in cooking) and dead easy to find (I swear your grocery store has it, just not named “passata”). This site has further explanations, and Mutti has the coolest page ever, describing their passata product. Recommended read.

    I bought the Mutti one in a glass bottle from my grocery store, as well as one passata package from a local Swedish brand called ICA — just to compare the two to each other, since I was making a large batch of bolognese. I tasted the two beforehand: Mutti’s passata was slightly thicker and sweeter (it includes 99.5% tomatoes!). ICA’s was a bit watery and not as intense after taste. But both had a near equal richness in flavour to me. Mutti’s is also a tad more pricey.

    The Recipe

    Or “Jesus finally he gets to the actually cooking, that nerd”.

    These are the things I use:

    • 400g of minced beef meat
    • Olive oil
    • 1/2 large onion, finely chopped
    • 1 carrot, finely chopped
    • 1/2 celery stalk, finely chopped
    • 2-3 garlic gloves
    • 200 ml (a small drinking glass) of red wine
    • 1 tablespoon of tomato paste
    • 400 ml of passata
    • a couple of fresh basil leaves
    • salt and pepper
    • fresh parmesan or pecorino cheese for serving

    Ok, lets go!

    Total time: Around 1 hour and 30 minutes. If you’d like to long cook it, around 4 hours. Preparations: if you’d like to use the oven for long cooking, start preheating it to around 175˚C now.

    1. Open the bottle of wine and pour yourself a glass. You’ve probably earned it. Let the meat warm up a bit in room temperature if you’ve had it in the fridge or just bought it. This will make it sear rather than stew when it goes into the pan.
    2. Peel the garlic gloves, cut them in halves. Finely chop the onion, carrot, and celery.
    3. Heat up the olive oil in a deep pan or pot (I use one of these). Use low to medium temperature.
    4. Add the garlic gloves and stir them around to flavour the oil for a few minutes. Don’t burn them or let them get too brown. I usually leave the garlic gloves in, but some people remove it at this stage.
    5. Add the onion, celery, and carrot. Increase the heat some. Keep stirring! Do this for around 5-8 minutes.
    6. Season the meat with salt and pepper. Add to the pan. Let the meat cover the whole base of the pan, rather than stirring it around too much. The idea is to sear the meat rather than boil it, due to the protein and liquids in the meat. So make sure it stays still for 5-6 minutes until it heats through completely. Check on the vegetables so they don’t burn. Poke in the garlic gloves into the meat if you want to. When the meat looks brown enough on the top surface, stir it around and mix with the vegetables for around 10-12 minutes.
    7. When the meat starts to stick to the pan, we can bring out the wine. Add the red wine and let it reduce into the meat.
    8. No sight of wine left? Good. Then we can put in the table spoon of tomato paste. Stir around and mix it out and let cook for a couple of minutes.
    9. Add the passata! Bring everything up to a boil. Add water if you’d like a more liquid sauce. Add a handful of basil leaves for the cooking.
    10. Here you can either long cook it for around 4 hours — either on the stove or in the oven — or let it simmer covered on the stove on low heat for around 1 hour. Stir it occasionally during this time and enjoy the nice smell. If you have a lazy Sunday, try going for the long cook variant to see how it turns out! Chances are you’ll like it.

    Serving

    1. Bring up a lot of water to a boil, with lots of salt (more than you think — at least the double).
    2. Add a pasta you like. Regular spaghetti is nice, as well as tagliatelle.
    3. Boil until al dente and serve immediately. Let the eaters put parmesan or pecorino on the pasta and bolognese if they’d like. Some table fling salt isn’t bad either. Serve with the same wine as you had in the bolognese.

    Done.

    \ No newline at end of file +My Spaghetti Bolognese / Johan Brook

    My Spaghetti Bolognese

    About 5 min reading time

    I had a free Sunday today, and I’d planned on making spaghetti bolognese for dinner. Then I thought I’d write a bit about it.

    Update, November 2021: read an improved version of the spaghetti bolognese recipe. It’s easier and tastes better, I think, and isn’t as pretentiously written.

    Introduction

    You’ve probably heard of the dish “Spaghetti bolognese”, and have had it countless of times, served in schools, restaurants, and at home as an everyday dinner across Europe and America. There are equally countless variations of the recipe, with ingredients varying from celery and bacon to milk and soy. I’m not actually sure there’s a “true” spaghetti bolognese, as the dish actually doesn’t exist, traditionally in Italy, in the shape we non-Italians are used to. According to a Wikipedia article, the tomato fueled bolognese we’re used to is actually closest to the ragù served in the Naples area (ragù alla napoletana). The traditional ragù in the Bologna area is much more basic: meatier and less sauce-y than what you’re probably used to.

    The Guardian’s article aptly named How To Make the Perfect Bolognese includes the paragraph

    The fact is that there is no definitive recipe for a bolognese meat sauce, but to be worthy of the name, it should respect the traditions of the area. There’s nothing wrong with a tomato-based beef ragu, rich with garlic and olive oil, except that it’s not what, traditionally at least, they’d eat in Emilia Romagna, which is dairy country. As for serving such a hearty meat sauce with delicate spaghetti — well, that is wrong. But it still tastes pretty good.

    In summary: you do you. Cooking food is (loosely) like sex: if it feels [tastes] good, it’s probably fine.

    The Dish

    What I’ve done here is to accumulate stuff I’ve picked up from others during the years, as well as extensive research online for more tips and tricks, in order to boil everything down to a process that fits me (I’ve ordered the light version of “The Silver Spoon” but it hasn’t arrived at the time of writing).

    What I love about bolognese is that it’s so very versatile. It can be boiled down to a very basic recipe you can make in 40 minutes, or make it a Sunday meal activity where you long cook it for 4 hours with homemade tomato passata. Up to you (our mantra here, if you didn’t pick that up).

    The Ingredients

    All ingredients are stuff you can find at the local super market, of course, but as usual, try to find good quality groceries as it’ll taste richer. I usually go with 100% beef meat (eco), but I guess a pork mix is fine too. I have to confess that I’ve cut out the celery part when I make it myself, since I hate celery beyond reason.

    I usually make bolognese on 800g of meat. But that’s for Sunday dinner, and then me and the girlfriend has lunch boxes for the week at work. The bolognese tastes wonderful the day after in the microwave, so it’s the perfect dish for making a large batch of. And, it’s quite satisfying to make huge fucking batches of food too. Just a tip. Feel free to double all measures in the recipe below if so.

    You can put in tons of fun stuff: everything from mushrooms to bacon. The latter will make it a more smokey flavour. I honestly think the mushroom taste is disappearing in the tomato sauce, but that’s just me.

    Some recipes, mostly the traditional ragù ones, calls for white wine. But as I’m making a “tomato ragù” here, I go with red wine since I think it marries with the tomato better.

    The tomato sauce

    The essence of what we associate a good bolognese with! Juicy, sweet, rich tomato sauce. I learned a lot researching this. In recipes I’ve encountered online, they use something called “passata” or “passato”. What’s passata? It’s “just” tomato puree: it’s not pasta sauce and it’s not tomato paste. It’s versatile (you can use it for all kinds of tomato stuff in cooking) and dead easy to find (I swear your grocery store has it, just not named “passata”). This site has further explanations, and Mutti has the coolest page ever, describing their passata product. Recommended read.

    I bought the Mutti one in a glass bottle from my grocery store, as well as one passata package from a local Swedish brand called ICA — just to compare the two to each other, since I was making a large batch of bolognese. I tasted the two beforehand: Mutti’s passata was slightly thicker and sweeter (it includes 99.5% tomatoes!). ICA’s was a bit watery and not as intense after taste. But both had a near equal richness in flavour to me. Mutti’s is also a tad more pricey.

    The Recipe

    Or “Jesus finally he gets to the actually cooking, that nerd”.

    These are the things I use:

    • 400g of minced beef meat
    • Olive oil
    • 1/2 large onion, finely chopped
    • 1 carrot, finely chopped
    • 1/2 celery stalk, finely chopped
    • 2-3 garlic gloves
    • 200 ml (a small drinking glass) of red wine
    • 1 tablespoon of tomato paste
    • 400 ml of passata
    • a couple of fresh basil leaves
    • salt and pepper
    • fresh parmesan or pecorino cheese for serving

    Ok, lets go!

    Total time: Around 1 hour and 30 minutes. If you’d like to long cook it, around 4 hours. Preparations: if you’d like to use the oven for long cooking, start preheating it to around 175˚C now.

    1. Open the bottle of wine and pour yourself a glass. You’ve probably earned it. Let the meat warm up a bit in room temperature if you’ve had it in the fridge or just bought it. This will make it sear rather than stew when it goes into the pan.
    2. Peel the garlic gloves, cut them in halves. Finely chop the onion, carrot, and celery.
    3. Heat up the olive oil in a deep pan or pot (I use one of these). Use low to medium temperature.
    4. Add the garlic gloves and stir them around to flavour the oil for a few minutes. Don’t burn them or let them get too brown. I usually leave the garlic gloves in, but some people remove it at this stage.
    5. Add the onion, celery, and carrot. Increase the heat some. Keep stirring! Do this for around 5-8 minutes.
    6. Season the meat with salt and pepper. Add to the pan. Let the meat cover the whole base of the pan, rather than stirring it around too much. The idea is to sear the meat rather than boil it, due to the protein and liquids in the meat. So make sure it stays still for 5-6 minutes until it heats through completely. Check on the vegetables so they don’t burn. Poke in the garlic gloves into the meat if you want to. When the meat looks brown enough on the top surface, stir it around and mix with the vegetables for around 10-12 minutes.
    7. When the meat starts to stick to the pan, we can bring out the wine. Add the red wine and let it reduce into the meat.
    8. No sight of wine left? Good. Then we can put in the table spoon of tomato paste. Stir around and mix it out and let cook for a couple of minutes.
    9. Add the passata! Bring everything up to a boil. Add water if you’d like a more liquid sauce. Add a handful of basil leaves for the cooking.
    10. Here you can either long cook it for around 4 hours — either on the stove or in the oven — or let it simmer covered on the stove on low heat for around 1 hour. Stir it occasionally during this time and enjoy the nice smell. If you have a lazy Sunday, try going for the long cook variant to see how it turns out! Chances are you’ll like it.

    Serving

    1. Bring up a lot of water to a boil, with lots of salt (more than you think — at least the double).
    2. Add a pasta you like. Regular spaghetti is nice, as well as tagliatelle.
    3. Boil until al dente and serve immediately. Let the eaters put parmesan or pecorino on the pasta and bolognese if they’d like. Some table fling salt isn’t bad either. Serve with the same wine as you had in the bolognese.

    Done.

    \ No newline at end of file diff --git a/writings/native-retweets-to-tweetie-for-mac-with-retweetie/index.html b/writings/native-retweets-to-tweetie-for-mac-with-retweetie/index.html index f059989aa..14c7e8802 100644 --- a/writings/native-retweets-to-tweetie-for-mac-with-retweetie/index.html +++ b/writings/native-retweets-to-tweetie-for-mac-with-retweetie/index.html @@ -1 +1 @@ -Native retweets to Tweetie for Mac with ReTweetie / Johan Brook

    Native retweets to Tweetie for Mac with ReTweetie

    About 1 min reading time

    Follow link to nickpaulson.com →

    That Tweetie for Mac is getting behind in the desktop Twitter clients for Mac race is a fact nowadays. Its UI is however phenomenal and I truly hope that Tweetie 2 will be released sometime soon. In the meantime, check out ReTweetie — a SIMBL plugin which adds Twitter’s retweeting functionality to Tweetie. Great initiative (“if nobody do it, do it yourself”).

    \ No newline at end of file +Native retweets to Tweetie for Mac with ReTweetie / Johan Brook

    Native retweets to Tweetie for Mac with ReTweetie

    About 1 min reading time

    Follow link to nickpaulson.com →

    That Tweetie for Mac is getting behind in the desktop Twitter clients for Mac race is a fact nowadays. Its UI is however phenomenal and I truly hope that Tweetie 2 will be released sometime soon. In the meantime, check out ReTweetie — a SIMBL plugin which adds Twitter’s retweeting functionality to Tweetie. Great initiative (“if nobody do it, do it yourself”).

    \ No newline at end of file diff --git a/writings/native-style-momentum-scrolling-to-arrive-in-ios-5/index.html b/writings/native-style-momentum-scrolling-to-arrive-in-ios-5/index.html index b4e6a46c5..c0b4ff122 100644 --- a/writings/native-style-momentum-scrolling-to-arrive-in-ios-5/index.html +++ b/writings/native-style-momentum-scrolling-to-arrive-in-ios-5/index.html @@ -1,3 +1,3 @@ Native style momentum scrolling to arrive in iOS 5 / Johan Brook

    Native style momentum scrolling to arrive in iOS 5

    About 1 min reading time

    One of the biggest gripes of web apps in Mobile Safari comes to an end. In iOS 5 Beta 2, you are able to do this on an element with CSS:

    overflow: scroll;
 -webkit-overflow-scrolling: touch;
-

    Quick demo requires iOS 5.0

    And the content inside that element should get native style momentum scroll. Just like any other app in iOS.

    This is huge for web apps. No more custom Javascript to fake the native behavior, like iScroll and lately Scrollability from Joe Hewitt. Even Apple has written their own internal web framework (“PastryKit”) to patch up things like scrolling and fixed positioned elements. Scrollability is the best fake-native scrolling I’ve seen so far, and the one in apps built with Sencha Touch is pretty sharp as well, but I don’t think they can beat this alternative provided by Apple.

    There’s indeed a noticeable difference in momentum between scrolling in native apps and in web pages. It’s maybe the one single thing that makes you think: “Oh right, this is a web app”. I guess iOS has a different scrolling behavior in web pages since it’s actually helpful when there’s a lot of tiny information on screen — a fast moving scroll would have been quite tricky to handle when precision-scrolling through long news articles. But for those who really want to create apps for the mobile browser with that native look-and-feel, this behavior is an obstacle.

    Together with the previously revealed properties in Mobile Safari in iOS5, position: fixed and overflow: scroll , this is great news for web apps. Can’t wait to test this.

    Note: this is the second beta, and it’s never dead certain that these features actually will arrive in the final version of the OS.

    \ No newline at end of file +

    Quick demo requires iOS 5.0

    And the content inside that element should get native style momentum scroll. Just like any other app in iOS.

    This is huge for web apps. No more custom Javascript to fake the native behavior, like iScroll and lately Scrollability from Joe Hewitt. Even Apple has written their own internal web framework (“PastryKit”) to patch up things like scrolling and fixed positioned elements. Scrollability is the best fake-native scrolling I’ve seen so far, and the one in apps built with Sencha Touch is pretty sharp as well, but I don’t think they can beat this alternative provided by Apple.

    There’s indeed a noticeable difference in momentum between scrolling in native apps and in web pages. It’s maybe the one single thing that makes you think: “Oh right, this is a web app”. I guess iOS has a different scrolling behavior in web pages since it’s actually helpful when there’s a lot of tiny information on screen — a fast moving scroll would have been quite tricky to handle when precision-scrolling through long news articles. But for those who really want to create apps for the mobile browser with that native look-and-feel, this behavior is an obstacle.

    Together with the previously revealed properties in Mobile Safari in iOS5, position: fixed and overflow: scroll , this is great news for web apps. Can’t wait to test this.

    Note: this is the second beta, and it’s never dead certain that these features actually will arrive in the final version of the OS.

    \ No newline at end of file diff --git a/writings/new-safari-downloads-ui-in-lion/index.html b/writings/new-safari-downloads-ui-in-lion/index.html index 0dda1cf3e..ff1044d99 100644 --- a/writings/new-safari-downloads-ui-in-lion/index.html +++ b/writings/new-safari-downloads-ui-in-lion/index.html @@ -1 +1 @@ -New Safari downloads UI in Lion / Johan Brook

    New Safari downloads UI in Lion

    About 1 min reading time

    Follow link to blog.dustincurtis.com →

    Looks like we’re getting a new downloads UI in Safari. In the latest OS X Lion build there’s a popover revealing current and finished downloads, activated with a button just right of the search engine field in the toolbar. I like it.

    The upcoming downloads popover

    All major browsers implements some kind of download manager: either a separate window (Safari, Firefox) or a separate tab (Chrome, Opera). I’m not a huge fan of either of them:

    • The separate window model makes me want to close the window after the download finishes. It’s just clutter anyway. I want it out of my way. This was automatically done for me in Firefox, but not in Safari until quite late. However, I don’t like having a completely separate window layer for downloads — if you ask me, their level of importance can’t justify a new window.
    • A new tab for downloads? No, no, no. You don’t think I’ve got tons of tabs open already? I don’t want to lose another one … This is too far away in the opposite direction of the point above – downloads are more important than regular web pages, but less important than a new browser window.

    This download UI is a great start: it’s unobstrusive, doesn’t get in my way, and it’s always accessible. I won’t have to navigate to a specific tab, or find this special window.

    As Alexander Limi of the Firefox UX team writes ( http://limi.net/articles/safari-downloads/), he and the rest of the team proposed this kind of behavior some time ago, exploring the concept in an in-depth article (I really recommend it — great usability and problem solving discussion).

    I truly hope this UI widget will make it to the final version of Lion.

    \ No newline at end of file +New Safari downloads UI in Lion / Johan Brook

    New Safari downloads UI in Lion

    About 1 min reading time

    Follow link to blog.dustincurtis.com →

    Looks like we’re getting a new downloads UI in Safari. In the latest OS X Lion build there’s a popover revealing current and finished downloads, activated with a button just right of the search engine field in the toolbar. I like it.

    The upcoming downloads popover

    All major browsers implements some kind of download manager: either a separate window (Safari, Firefox) or a separate tab (Chrome, Opera). I’m not a huge fan of either of them:

    • The separate window model makes me want to close the window after the download finishes. It’s just clutter anyway. I want it out of my way. This was automatically done for me in Firefox, but not in Safari until quite late. However, I don’t like having a completely separate window layer for downloads — if you ask me, their level of importance can’t justify a new window.
    • A new tab for downloads? No, no, no. You don’t think I’ve got tons of tabs open already? I don’t want to lose another one … This is too far away in the opposite direction of the point above – downloads are more important than regular web pages, but less important than a new browser window.

    This download UI is a great start: it’s unobstrusive, doesn’t get in my way, and it’s always accessible. I won’t have to navigate to a specific tab, or find this special window.

    As Alexander Limi of the Firefox UX team writes ( http://limi.net/articles/safari-downloads/), he and the rest of the team proposed this kind of behavior some time ago, exploring the concept in an in-depth article (I really recommend it — great usability and problem solving discussion).

    I truly hope this UI widget will make it to the final version of Lion.

    \ No newline at end of file diff --git a/writings/new-watch/index.html b/writings/new-watch/index.html index df986aff0..72b513004 100644 --- a/writings/new-watch/index.html +++ b/writings/new-watch/index.html @@ -1 +1 @@ -New watch / Johan Brook

    New watch

    About 1 min reading time

    I got myself a new wrist watch today. It’s from Timex — a brand I hadn’t heard about before — and it’s beautiful.

    The model is called “MK1 Caliber”. Here’s why I like this watch:

    • It’s super light. Almost feels like a toy!
    • It has legible typography. The glass it also functioning as a magnifying glass which enlargens the details even further.
    • It shines in the dark. The hands and numbers, that is. If you press the crown at the side, the whole dial lightens up too — a feature I didn’t even know until randomly pressing the crown!
    • It’s not pricey. I payed around $100 for this. So much value, for being such an old watch company making this.
    • It feels like an everyday watch. This is no Patek Philippe or some Rolex crap. This is a thing I’ll use even in rough weather, while skiing or sailing.

    The last point might be the most important one: it’s bound to be used thanks to its low price and no-nonsense design. And that’s the best feature of it all.

    \ No newline at end of file +New watch / Johan Brook

    New watch

    About 1 min reading time

    I got myself a new wrist watch today. It’s from Timex — a brand I hadn’t heard about before — and it’s beautiful.

    The model is called “MK1 Caliber”. Here’s why I like this watch:

    • It’s super light. Almost feels like a toy!
    • It has legible typography. The glass it also functioning as a magnifying glass which enlargens the details even further.
    • It shines in the dark. The hands and numbers, that is. If you press the crown at the side, the whole dial lightens up too — a feature I didn’t even know until randomly pressing the crown!
    • It’s not pricey. I payed around $100 for this. So much value, for being such an old watch company making this.
    • It feels like an everyday watch. This is no Patek Philippe or some Rolex crap. This is a thing I’ll use even in rough weather, while skiing or sailing.

    The last point might be the most important one: it’s bound to be used thanks to its low price and no-nonsense design. And that’s the best feature of it all.

    \ No newline at end of file diff --git a/writings/object-oriented-programming-and-modeling-the-real-world/index.html b/writings/object-oriented-programming-and-modeling-the-real-world/index.html index 8d7c4610e..495be539c 100644 --- a/writings/object-oriented-programming-and-modeling-the-real-world/index.html +++ b/writings/object-oriented-programming-and-modeling-the-real-world/index.html @@ -1 +1 @@ -Object-oriented Programming and Modeling the Real World / Johan Brook

    Object-oriented Programming and Modeling the Real World

    About 2 min reading time

    Follow link to news.ycombinator.com →

    Almost everybody begins OOP with this misconception - objects in real world directly map to OOP objects. Its maybe a good place to start but how many grow up from the initial simplistic rule - map nouns in requirements to classes. So, you end up with objects that don’t really mean anything and don’t do much. Naive use of UML diagrams also leads to this. Discovering abstractions is tricky. One needs to really live with requirements inside out before they present themselves. From a Hacker News comment on  this story about Clojure programming. I’ve seen this myself in school, where we’ve gone through endless examples of OOP where the classes were a Ball, a Car, a Zebra, or other overused objects in the real world. The thing is, most programming isn’t about modeling the real world, our world. When writing code you’re free to do things your way, not being tied to the constraints of the real world thinking.

    When we were doing our first large programming project (which was an awesome 2D game:  “Frank the Tank”), we went straight ahead with a semi-naïve approach when doing the initial domain model. As we went on, more models were thrown in in order to accomodate all possible requirements we had set up. All models were real world things a regular person could understand (“Player, Enemy, MachineGun”, etc.). Later on in the modeling stage we started to realize things weren’t right. We had represented reality in too fine grained detail, and started to rethink our model from a computational perspective. Thinking in high-level abstractions, working with sensible inheritance and interfaces, we started to re-implement everything the way it should be done in a computer game. It worked very well.

    Don’t adhere to everything the professors in university says. Then you’ll hit a brick wall later on, when you realize the computer’s reality isn’t a mirror of your own.

    \ No newline at end of file +Object-oriented Programming and Modeling the Real World / Johan Brook

    Object-oriented Programming and Modeling the Real World

    About 2 min reading time

    Follow link to news.ycombinator.com →

    Almost everybody begins OOP with this misconception - objects in real world directly map to OOP objects. Its maybe a good place to start but how many grow up from the initial simplistic rule - map nouns in requirements to classes. So, you end up with objects that don’t really mean anything and don’t do much. Naive use of UML diagrams also leads to this. Discovering abstractions is tricky. One needs to really live with requirements inside out before they present themselves. From a Hacker News comment on  this story about Clojure programming. I’ve seen this myself in school, where we’ve gone through endless examples of OOP where the classes were a Ball, a Car, a Zebra, or other overused objects in the real world. The thing is, most programming isn’t about modeling the real world, our world. When writing code you’re free to do things your way, not being tied to the constraints of the real world thinking.

    When we were doing our first large programming project (which was an awesome 2D game:  “Frank the Tank”), we went straight ahead with a semi-naïve approach when doing the initial domain model. As we went on, more models were thrown in in order to accomodate all possible requirements we had set up. All models were real world things a regular person could understand (“Player, Enemy, MachineGun”, etc.). Later on in the modeling stage we started to realize things weren’t right. We had represented reality in too fine grained detail, and started to rethink our model from a computational perspective. Thinking in high-level abstractions, working with sensible inheritance and interfaces, we started to re-implement everything the way it should be done in a computer game. It worked very well.

    Don’t adhere to everything the professors in university says. Then you’ll hit a brick wall later on, when you realize the computer’s reality isn’t a mirror of your own.

    \ No newline at end of file diff --git a/writings/old-book-illustrations/index.html b/writings/old-book-illustrations/index.html index 219e929f1..a72844f0c 100644 --- a/writings/old-book-illustrations/index.html +++ b/writings/old-book-illustrations/index.html @@ -1 +1 @@ -Old book illustrations / Johan Brook

    Old book illustrations

    About 1 min reading time

    Follow link to oldbookillustrations.com →

    I’ve really got a thing for clean typographic blogs with seemingly custom illustrations in them. Above is a great collection of vintage woodcuts and engravings, scanned and released for public use. That is, you can download them and use completely free in both personal and commercial projects. I think that’s wonderful, and if your more interested there’s a Terms of Service provided:

    You may use our pictures in your school projects, to make CD sleeves, posters, banners or any part of a website, in animations, etc - anything where you have added your own artistic effort, be that for educational, personal or commercial use. No credit is required in this case. This is how it’s done.

    \ No newline at end of file +Old book illustrations / Johan Brook

    Old book illustrations

    About 1 min reading time

    Follow link to oldbookillustrations.com →

    I’ve really got a thing for clean typographic blogs with seemingly custom illustrations in them. Above is a great collection of vintage woodcuts and engravings, scanned and released for public use. That is, you can download them and use completely free in both personal and commercial projects. I think that’s wonderful, and if your more interested there’s a Terms of Service provided:

    You may use our pictures in your school projects, to make CD sleeves, posters, banners or any part of a website, in animations, etc - anything where you have added your own artistic effort, be that for educational, personal or commercial use. No credit is required in this case. This is how it’s done.

    \ No newline at end of file diff --git a/writings/old-hardware-still-rocks/index.html b/writings/old-hardware-still-rocks/index.html index e3732fa22..277c29f28 100644 --- a/writings/old-hardware-still-rocks/index.html +++ b/writings/old-hardware-still-rocks/index.html @@ -1 +1 @@ -Old hardware still rocks / Johan Brook

    Old hardware still rocks

    About 1 min reading time

    Follow link to smokingapples.com →

    Great piece by Milind Alvares about using older Apple hardware (in his case an iBook G4). I think it’s a very interesting discussion: you don’t always need the latest and greatest, even though Apple’s products have that effect on you. Sometimes it’s about a sentimental bond to an object (I had a hard time giving up my old iPhone 3G) and other times it’s just not necessary to get a new one. The idea of using a “lesser” machine where I have constraints is quite thrilling, to be honest. It’s a minimalist computer where I maybe can’t runt all these fancy, heavy, Snow Leopard-y applications — instead I have to use simpler software and make the most of it. I know David Heinemeier Hansson said something similar, but I think that I work better with constraints. That’s the reason I’m currently looking for an original iPod (preferably the one with touch wheel). Wouldn’t it be nice to play plain, simple music without having a big-ass multitouch screen, cameras, Twitter apps and stuff on it? Give me a shout if you see one!

    \ No newline at end of file +Old hardware still rocks / Johan Brook

    Old hardware still rocks

    About 1 min reading time

    Follow link to smokingapples.com →

    Great piece by Milind Alvares about using older Apple hardware (in his case an iBook G4). I think it’s a very interesting discussion: you don’t always need the latest and greatest, even though Apple’s products have that effect on you. Sometimes it’s about a sentimental bond to an object (I had a hard time giving up my old iPhone 3G) and other times it’s just not necessary to get a new one. The idea of using a “lesser” machine where I have constraints is quite thrilling, to be honest. It’s a minimalist computer where I maybe can’t runt all these fancy, heavy, Snow Leopard-y applications — instead I have to use simpler software and make the most of it. I know David Heinemeier Hansson said something similar, but I think that I work better with constraints. That’s the reason I’m currently looking for an original iPod (preferably the one with touch wheel). Wouldn’t it be nice to play plain, simple music without having a big-ass multitouch screen, cameras, Twitter apps and stuff on it? Give me a shout if you see one!

    \ No newline at end of file diff --git a/writings/on-scala/index.html b/writings/on-scala/index.html index ef9a87b62..c3c8ba3ca 100644 --- a/writings/on-scala/index.html +++ b/writings/on-scala/index.html @@ -1 +1 @@ -On Scala / Johan Brook

    On Scala

    About 1 min reading time

    Follow link to dehora.net →

    A friend and colleague of mine is boasting a lot about Clojure and it’s productive capabilities. But I really can’t wrap my head around the LISP syntax. Perhaps it’s a matter of putting in time.

    If one want to stay on the awesome JVM with its performance, Scala is worth checking out. It’s the language which is said to fuse functional and object-oriented programming in a great package. Read the linked article, “On Scala”, for a nice walkthrough.

    \ No newline at end of file +On Scala / Johan Brook

    On Scala

    About 1 min reading time

    Follow link to dehora.net →

    A friend and colleague of mine is boasting a lot about Clojure and it’s productive capabilities. But I really can’t wrap my head around the LISP syntax. Perhaps it’s a matter of putting in time.

    If one want to stay on the awesome JVM with its performance, Scala is worth checking out. It’s the language which is said to fuse functional and object-oriented programming in a great package. Read the linked article, “On Scala”, for a nice walkthrough.

    \ No newline at end of file diff --git a/writings/on-socialising/index.html b/writings/on-socialising/index.html index 004a6ccd7..75dbcc793 100644 --- a/writings/on-socialising/index.html +++ b/writings/on-socialising/index.html @@ -1 +1 @@ -On Socialising / Johan Brook

    On Socialising

    About 5 min reading time

    One thing I’ve noticed during my past half ish year of traveling outside of Europe is the difference in how young people interact and socialise with each other, compared to the customs in my native country Sweden.

    The “Problem”

    People seem to have more fun in South America, with less alcohol.

    The “Explanations”

    (or “Observations I’ve made, and what follows is a rambling mess I’ve tried to tie together into something that could resemble a coherent opinion on the matter”).

    Work hard, since that shit will pay off  — Don’t be flamboyant and too happy all the time, people will think you’re a crazy person — Having a glass of wine for lunch on a Tuesday?! What are you, an alcoholic? — Jesus, are you dressed like that little thing for the beach? — Um, we can’t go to the club yet, I’m not drunk yet. We won’t have fun sober, you know?

    Those are common things you hear here and there in Sweden.

    One time in Brazil, north of Rio de Janeiro, me and my group of friends was at a bar with live music. We noticed a larger number of families with small children around. The clock was around perhaps around 21-22 in the evening. I could see the Moral Police of Sweden going Rambo on their asses with “This is not a suitable environment for a child! There’s alcohol around!”. Oh really, you don’t say? My friend elegantly put it something like:

    The parents here aren’t shit drunk, of course. They bring their kids to this social gathering to be with them — just to hang out with their kids. To teach them the subtle ways of communicating in groups and socialising with strangers. Simply treat them as people.

    Nordic people aren’t renowned for their extrovert flamboyance and openness – more for their unwillingness to talk with strangers, not making too much noise for themselves, and foremost the inability to handle the prices on alcohol in warmer countries during vacation. Even though the word “lagom” in Swedish means “just right — not more, not less” we have a terrible habit of doing the opposite: either be the stiff person who doesn’t let loose on a samba party, or be that shit drunk person who goes way too far. Not that lagom.

    This kind of hypocritical thinking in social environments is more rare in South America. Alcohol isn’t a central stimulant, even though you of course can buy it anywhere at almost any time of the day. It feels like people of all ages and genders are having fun when they’re together. Why wouldn’t they?

    Is it because we don’t invite our kids to the party earlier on? Teaching, no, showing them “social manners” and how to have super fun without alcohol? They won’t do as you tell them anyway — they’ll do as you do.

    Politics, Social Dictatorship, and Bullshittery

    A friend linked me a piece on YouTube about various facets of Swedish mentality and culture throughout the years. It sharply highlights the sad destiny of our social life on “beer cafés” — institutions similar to the British pubs. The narrator points to the fact that Swedes often has a need of “being somebody, somewhere”. We have few social institutions in Sweden where you just can be as you are, and not feel like you’re being put in a box.

    An elderly man (back in the 1960s) in the video above puts it:

    Well, we need a place to go to. Where else are we supposed to meet people? We can’t invite everybody home all the time.

    In the land of Equality, Lagom, and Jante, people have had the need to set themselves aside in some subtle way. In this case, it’s about going to that specific club, or hanging out at this obscure subcultural bar. There are few “regular fucking bars and cafés” around, with decently priced drinks and food. The levels of pretentiousness are soon becoming unbearable.

    Some back story: in Sweden, the government controls all sales of alcohol. All stores are government owned, with quite rigid opening hours and quite high prices on especially hard liquor (I can rant on about this godforsaken monopoly, but let’s not go into that). There are also strict food and alcohol laws for restaurants, clubs, and bars, which in itself is good but to a limit.

    Zoom back to South America. Or Rio, where I currently am located, where I seldom notice a “branded bar” or something out of the ordinary. Everything is what it is. You drink beer on wooden (or on authentic plastic) chairs on the curb, where the bar is a hole-in-the-wall institution. I doubt the bar in question needs to apply for some silly warrant from the city to have that. The tab seldom goes above $6 per person if you’re two people splitting a few large beers (that’s the minimum price for a small single beer in Sweden …).

    Does Sweden have too strict alcohol and food laws, which hinder small business to grow and let people eat and drink out more often, in order to socialise and get out of their houses? Yes, I believe so.

    Insecurities

    Feminism should be a baseline everywhere, since the world is currently skewed between the genders. Violence, abuse, unbalanced working conditions, harassment, slurs, attitudes. All that crap that a huge part of women need to put up with every day. That’s one thing Swedes do better than South America: the macho attitude and conservative lines here are strong.

    A lot of nice but awkward young men are opting out of approaching women because there is no opportunity for them to make mistakes without suffering worse embarrassment than ever.

    The Sexodus: Part 1

    I read an article from 2014 called The Sexodus: Men giving up on women and checking out of society. I highly recommend it, even though I think the article is a bit from a single point of view and downplays rape culture.

    It brings up on how young, white males are so extremely filled with instructions on how they should behave in society. They’re constantly being told to “check their privileges”, even though they might come from a not-so-easy-going, struggling lower class background — but still being white guys.

    This is also discussed in the slightly irrelevant piece Democracies end when they are too democratic – on how the current situation in the US with Donald Trump might be due to our obsessiveness with democracy and “political correctness”, which has now been turned against us.

    On white, male privilege:

    Even if you agree that the privilege exists, it’s hard not to empathize with the object of this disdain. These working-class communities, already alienated, hear — how can they not? — the glib and easy dismissals of “white straight men” as the ultimate source of all our woes.

    Young men are confused. “The old ways” of interacting with the other sex simply don’t hold up any longer, since you’re not sure if you’re offending the other person or not. And now the radical feminists say

    “Buu-fucking-huu, you dick, are you comparing that with the shit us women been through for the last hundreds of years? #mantears”

    Nope. Not comparing. Just putting it out there that society is affecting men in ways you might not think about. I’m not saying we should adhere to traditional gender roles. Things need to change. Men and women are equal.

    This lack of firm foundation is something I haven’t experienced in Brazil, where young people seem so secure in themselves and how they are when socialising. It’s so fluid, so normal, no fussing around, no tension. Again: focus on the fun.

    I find it sad that the Swedish society as a whole isn’t opening up its eyes and see how it’s not so dangerous to lower the guard on letting restaurants and bars pop up here and there, doing their thing. It’s sad that young people have to end up in the ditch every time they go out, since it’s the only world they know. It’s sad that we don’t have a society where no member of the sexes need to feel frightened, threatened, insecure, or embarrassed when they interact with the opposite.

    When I’m out in Brazil, I know it’s gonna be fun – regardless of the people involved. Not so in Sweden. Even though I prefer meeting new people all the time, the safe bet often is to hang out with people you know. Since others are often too drunk, or too boring to talk to while having your overpriced beer in a bar that probably will change style from “Eco Hipster” to “Bulgarian Iranian Fusion” in a few years.

    \ No newline at end of file +On Socialising / Johan Brook

    On Socialising

    About 5 min reading time

    One thing I’ve noticed during my past half ish year of traveling outside of Europe is the difference in how young people interact and socialise with each other, compared to the customs in my native country Sweden.

    The “Problem”

    People seem to have more fun in South America, with less alcohol.

    The “Explanations”

    (or “Observations I’ve made, and what follows is a rambling mess I’ve tried to tie together into something that could resemble a coherent opinion on the matter”).

    Work hard, since that shit will pay off  — Don’t be flamboyant and too happy all the time, people will think you’re a crazy person — Having a glass of wine for lunch on a Tuesday?! What are you, an alcoholic? — Jesus, are you dressed like that little thing for the beach? — Um, we can’t go to the club yet, I’m not drunk yet. We won’t have fun sober, you know?

    Those are common things you hear here and there in Sweden.

    One time in Brazil, north of Rio de Janeiro, me and my group of friends was at a bar with live music. We noticed a larger number of families with small children around. The clock was around perhaps around 21-22 in the evening. I could see the Moral Police of Sweden going Rambo on their asses with “This is not a suitable environment for a child! There’s alcohol around!”. Oh really, you don’t say? My friend elegantly put it something like:

    The parents here aren’t shit drunk, of course. They bring their kids to this social gathering to be with them — just to hang out with their kids. To teach them the subtle ways of communicating in groups and socialising with strangers. Simply treat them as people.

    Nordic people aren’t renowned for their extrovert flamboyance and openness – more for their unwillingness to talk with strangers, not making too much noise for themselves, and foremost the inability to handle the prices on alcohol in warmer countries during vacation. Even though the word “lagom” in Swedish means “just right — not more, not less” we have a terrible habit of doing the opposite: either be the stiff person who doesn’t let loose on a samba party, or be that shit drunk person who goes way too far. Not that lagom.

    This kind of hypocritical thinking in social environments is more rare in South America. Alcohol isn’t a central stimulant, even though you of course can buy it anywhere at almost any time of the day. It feels like people of all ages and genders are having fun when they’re together. Why wouldn’t they?

    Is it because we don’t invite our kids to the party earlier on? Teaching, no, showing them “social manners” and how to have super fun without alcohol? They won’t do as you tell them anyway — they’ll do as you do.

    Politics, Social Dictatorship, and Bullshittery

    A friend linked me a piece on YouTube about various facets of Swedish mentality and culture throughout the years. It sharply highlights the sad destiny of our social life on “beer cafés” — institutions similar to the British pubs. The narrator points to the fact that Swedes often has a need of “being somebody, somewhere”. We have few social institutions in Sweden where you just can be as you are, and not feel like you’re being put in a box.

    An elderly man (back in the 1960s) in the video above puts it:

    Well, we need a place to go to. Where else are we supposed to meet people? We can’t invite everybody home all the time.

    In the land of Equality, Lagom, and Jante, people have had the need to set themselves aside in some subtle way. In this case, it’s about going to that specific club, or hanging out at this obscure subcultural bar. There are few “regular fucking bars and cafés” around, with decently priced drinks and food. The levels of pretentiousness are soon becoming unbearable.

    Some back story: in Sweden, the government controls all sales of alcohol. All stores are government owned, with quite rigid opening hours and quite high prices on especially hard liquor (I can rant on about this godforsaken monopoly, but let’s not go into that). There are also strict food and alcohol laws for restaurants, clubs, and bars, which in itself is good but to a limit.

    Zoom back to South America. Or Rio, where I currently am located, where I seldom notice a “branded bar” or something out of the ordinary. Everything is what it is. You drink beer on wooden (or on authentic plastic) chairs on the curb, where the bar is a hole-in-the-wall institution. I doubt the bar in question needs to apply for some silly warrant from the city to have that. The tab seldom goes above $6 per person if you’re two people splitting a few large beers (that’s the minimum price for a small single beer in Sweden …).

    Does Sweden have too strict alcohol and food laws, which hinder small business to grow and let people eat and drink out more often, in order to socialise and get out of their houses? Yes, I believe so.

    Insecurities

    Feminism should be a baseline everywhere, since the world is currently skewed between the genders. Violence, abuse, unbalanced working conditions, harassment, slurs, attitudes. All that crap that a huge part of women need to put up with every day. That’s one thing Swedes do better than South America: the macho attitude and conservative lines here are strong.

    A lot of nice but awkward young men are opting out of approaching women because there is no opportunity for them to make mistakes without suffering worse embarrassment than ever.

    The Sexodus: Part 1

    I read an article from 2014 called The Sexodus: Men giving up on women and checking out of society. I highly recommend it, even though I think the article is a bit from a single point of view and downplays rape culture.

    It brings up on how young, white males are so extremely filled with instructions on how they should behave in society. They’re constantly being told to “check their privileges”, even though they might come from a not-so-easy-going, struggling lower class background — but still being white guys.

    This is also discussed in the slightly irrelevant piece Democracies end when they are too democratic – on how the current situation in the US with Donald Trump might be due to our obsessiveness with democracy and “political correctness”, which has now been turned against us.

    On white, male privilege:

    Even if you agree that the privilege exists, it’s hard not to empathize with the object of this disdain. These working-class communities, already alienated, hear — how can they not? — the glib and easy dismissals of “white straight men” as the ultimate source of all our woes.

    Young men are confused. “The old ways” of interacting with the other sex simply don’t hold up any longer, since you’re not sure if you’re offending the other person or not. And now the radical feminists say

    “Buu-fucking-huu, you dick, are you comparing that with the shit us women been through for the last hundreds of years? #mantears”

    Nope. Not comparing. Just putting it out there that society is affecting men in ways you might not think about. I’m not saying we should adhere to traditional gender roles. Things need to change. Men and women are equal.

    This lack of firm foundation is something I haven’t experienced in Brazil, where young people seem so secure in themselves and how they are when socialising. It’s so fluid, so normal, no fussing around, no tension. Again: focus on the fun.

    I find it sad that the Swedish society as a whole isn’t opening up its eyes and see how it’s not so dangerous to lower the guard on letting restaurants and bars pop up here and there, doing their thing. It’s sad that young people have to end up in the ditch every time they go out, since it’s the only world they know. It’s sad that we don’t have a society where no member of the sexes need to feel frightened, threatened, insecure, or embarrassed when they interact with the opposite.

    When I’m out in Brazil, I know it’s gonna be fun – regardless of the people involved. Not so in Sweden. Even though I prefer meeting new people all the time, the safe bet often is to hang out with people you know. Since others are often too drunk, or too boring to talk to while having your overpriced beer in a bar that probably will change style from “Eco Hipster” to “Bulgarian Iranian Fusion” in a few years.

    \ No newline at end of file diff --git a/writings/on-the-evolution-of-languages-and-frameworks/index.html b/writings/on-the-evolution-of-languages-and-frameworks/index.html index e7c33bc15..88bf70952 100644 --- a/writings/on-the-evolution-of-languages-and-frameworks/index.html +++ b/writings/on-the-evolution-of-languages-and-frameworks/index.html @@ -1 +1 @@ -On the evolution of languages and frameworks / Johan Brook

    On the evolution of languages and frameworks

    About 1 min reading time

    Follow link to news.ycombinator.com →

    Props to the people who worked hard on Java frameworks who make tons of people happy in the heavy infrastructure enterprise realm, props to the people behind PHP and associated frameworks, props to Rails dev for pushing the envelope and making me enjoy programming again and props to Ryan Dahl, Google and Joyent for making Node happen and shaking the bottle once again. The perfect framework or language will never be created, and that’s why this industry is so exhilarating and fun to watch and be a part of.

    (from the HN News thread about Tower.js).

    \ No newline at end of file +On the evolution of languages and frameworks / Johan Brook

    On the evolution of languages and frameworks

    About 1 min reading time

    Follow link to news.ycombinator.com →

    Props to the people who worked hard on Java frameworks who make tons of people happy in the heavy infrastructure enterprise realm, props to the people behind PHP and associated frameworks, props to Rails dev for pushing the envelope and making me enjoy programming again and props to Ryan Dahl, Google and Joyent for making Node happen and shaking the bottle once again. The perfect framework or language will never be created, and that’s why this industry is so exhilarating and fun to watch and be a part of.

    (from the HN News thread about Tower.js).

    \ No newline at end of file diff --git a/writings/on-the-importance-of-knowing-how-to-program/index.html b/writings/on-the-importance-of-knowing-how-to-program/index.html index 355dcea98..ee6841614 100644 --- a/writings/on-the-importance-of-knowing-how-to-program/index.html +++ b/writings/on-the-importance-of-knowing-how-to-program/index.html @@ -1 +1 @@ -On the importance of knowing how to program / Johan Brook

    On the importance of knowing how to program

    About 1 min reading time

    Follow link to sivers.org →

    Derek Sivers writes about how great it is to know the basics of an area (here, it’s programming) in order to get basic stuff done yourself, instead of relying on your colleagues/employees/contractors.

    I think everybody in this business hears this now and then:

    The most common thing I hear from aspiring entrepreneurs is, “I have this idea for an app or site. But I’m not technical, so I need to find someone who can make it for me.” These “idea people” can’t create the actual product themselves, and are dependent on others in order to make their idea come true. To me, that would be really fragile and messy.

    It works in the other direction as well: programmers should really read up on basic design techniques, such as colour theory, typography, layout and more. The workflow gets so much smoother if the developer himself/herself is skilled enough to do some basic design adjustments for a feature, and then ship it.

    The underlying meaning of what I’m saying is basically: be wide in your knowledge. Specialize, but don’t miss out on the other areas in the business. Learning new things is a part of life, isn’t it?

    Sivers has this great quote from his old guitar teacher, saying:

    “You need to learn to sing. Because if you don’t, you’re always going to be at the mercy of some asshole singer.” See also my post on “Unicorns” (designer/developer hybrids).

    \ No newline at end of file +On the importance of knowing how to program / Johan Brook

    On the importance of knowing how to program

    About 1 min reading time

    Follow link to sivers.org →

    Derek Sivers writes about how great it is to know the basics of an area (here, it’s programming) in order to get basic stuff done yourself, instead of relying on your colleagues/employees/contractors.

    I think everybody in this business hears this now and then:

    The most common thing I hear from aspiring entrepreneurs is, “I have this idea for an app or site. But I’m not technical, so I need to find someone who can make it for me.” These “idea people” can’t create the actual product themselves, and are dependent on others in order to make their idea come true. To me, that would be really fragile and messy.

    It works in the other direction as well: programmers should really read up on basic design techniques, such as colour theory, typography, layout and more. The workflow gets so much smoother if the developer himself/herself is skilled enough to do some basic design adjustments for a feature, and then ship it.

    The underlying meaning of what I’m saying is basically: be wide in your knowledge. Specialize, but don’t miss out on the other areas in the business. Learning new things is a part of life, isn’t it?

    Sivers has this great quote from his old guitar teacher, saying:

    “You need to learn to sing. Because if you don’t, you’re always going to be at the mercy of some asshole singer.” See also my post on “Unicorns” (designer/developer hybrids).

    \ No newline at end of file diff --git a/writings/on-using-your-time/index.html b/writings/on-using-your-time/index.html index 463609700..1f824c0bd 100644 --- a/writings/on-using-your-time/index.html +++ b/writings/on-using-your-time/index.html @@ -1 +1 @@ -On using your time / Johan Brook

    On using your time

    About 1 min reading time

    Follow link to gsb.stanford.edu →

    Interesting and important article about why we should consider the time we are spending on different people and activities. I’ve tried myself to be more thorough with choosing the tasks and things I spend time on, in order to be more productive, producing better results, and of course feeling good afterwards.

    From the Hacker News comment thread:

    I cut my working hours down to one or sometimes two days a week, sometimes more when they need me more. I don’t need more money than that — and I live in Manhattan (no kids).

    […]

    The more valuable question is how low are my expenses. I’ve found much more freedom in needing less than in having more. Cutting out what doesn’t add joy to my life creates freedom and joy. That’s what I meant by nothing special about me. Anyone can cut waste. Not many seem to.

    Joshua Spodek ( Permalink) When you focus and decide what’s really worth the time doing, I believe you feel better in a way. With that said, it’s important to spend time on not doing anything at all sometimes:

    Time you enjoy wasting, was not wasted.

    John Lennon

    \ No newline at end of file +On using your time / Johan Brook

    On using your time

    About 1 min reading time

    Follow link to gsb.stanford.edu →

    Interesting and important article about why we should consider the time we are spending on different people and activities. I’ve tried myself to be more thorough with choosing the tasks and things I spend time on, in order to be more productive, producing better results, and of course feeling good afterwards.

    From the Hacker News comment thread:

    I cut my working hours down to one or sometimes two days a week, sometimes more when they need me more. I don’t need more money than that — and I live in Manhattan (no kids).

    […]

    The more valuable question is how low are my expenses. I’ve found much more freedom in needing less than in having more. Cutting out what doesn’t add joy to my life creates freedom and joy. That’s what I meant by nothing special about me. Anyone can cut waste. Not many seem to.

    Joshua Spodek ( Permalink) When you focus and decide what’s really worth the time doing, I believe you feel better in a way. With that said, it’s important to spend time on not doing anything at all sometimes:

    Time you enjoy wasting, was not wasted.

    John Lennon

    \ No newline at end of file diff --git a/writings/os-x-lion-mountain-lion-wallpapers/index.html b/writings/os-x-lion-mountain-lion-wallpapers/index.html index d535f7614..3c3d502aa 100644 --- a/writings/os-x-lion-mountain-lion-wallpapers/index.html +++ b/writings/os-x-lion-mountain-lion-wallpapers/index.html @@ -1 +1 @@ -OS X Lion-Mountain Lion wallpapers / Johan Brook

    OS X Lion-Mountain Lion wallpapers

    About 2 min reading time

    • OS X Lion Developer Preview 1
    • OS X Lion Developer Preview 2
    • OS X Lion Developer Preview 4
    • OS X Mountain Lion Developer Preview

    OS X Lion Developer Preview 1

    Yesterday Apple updated us with some info about the next version of the Mac operating system, OS X Lion. Lots of UI polishes, with a new default wallpaper amongst others (as usual with every major OS update). It’s a photo of Fuji in shades of pink and purple and it looks pretty slick.

    If anybody would like to use it now, it’s available below.

    The Mac OS X Lion Developer Preview wallpaper

    OS X Lion Developer Preview 2

    In the Developer Preview 2 of OS X Lion there’s a new version of the Fuji wallpaper. Same colours, but from another perspective with another kind of lighting [Source]. Available below:

    The Mac OS X Lion Developer Preview 2 wallpaper

    I also took the liberty of creating versions for the iPad and iPhone 4:

    OS X Lion Developer Preview 4

    On June 6th, the Mac OS X Lion Developer Preview 4 was released to developers, with a brand new wallpaper. See below. I would personally guess this is the final version, since it sports the space theme (now the Andromeda galaxy).

    The Mac OS X Lion Developer Preview 4 wallpaper

    OS X Mountain Lion Developer Preview

    On 16 February 2012 Apple released info about the next major update to OS X – Mountain Lion. It’ll arrive as early as the summer of 2012(!), and will bring a number of iOS-esque features to the desktop.

    It sports the same space theme as before. Is it the final version already? Naah ..

    Mountain Lion wallpaperThe Mountain Lion wallpaper

    \ No newline at end of file +OS X Lion-Mountain Lion wallpapers / Johan Brook

    OS X Lion-Mountain Lion wallpapers

    About 2 min reading time

    • OS X Lion Developer Preview 1
    • OS X Lion Developer Preview 2
    • OS X Lion Developer Preview 4
    • OS X Mountain Lion Developer Preview

    OS X Lion Developer Preview 1

    Yesterday Apple updated us with some info about the next version of the Mac operating system, OS X Lion. Lots of UI polishes, with a new default wallpaper amongst others (as usual with every major OS update). It’s a photo of Fuji in shades of pink and purple and it looks pretty slick.

    If anybody would like to use it now, it’s available below.

    The Mac OS X Lion Developer Preview wallpaper

    OS X Lion Developer Preview 2

    In the Developer Preview 2 of OS X Lion there’s a new version of the Fuji wallpaper. Same colours, but from another perspective with another kind of lighting [Source]. Available below:

    The Mac OS X Lion Developer Preview 2 wallpaper

    I also took the liberty of creating versions for the iPad and iPhone 4:

    OS X Lion Developer Preview 4

    On June 6th, the Mac OS X Lion Developer Preview 4 was released to developers, with a brand new wallpaper. See below. I would personally guess this is the final version, since it sports the space theme (now the Andromeda galaxy).

    The Mac OS X Lion Developer Preview 4 wallpaper

    OS X Mountain Lion Developer Preview

    On 16 February 2012 Apple released info about the next major update to OS X – Mountain Lion. It’ll arrive as early as the summer of 2012(!), and will bring a number of iOS-esque features to the desktop.

    It sports the same space theme as before. Is it the final version already? Naah ..

    Mountain Lion wallpaperThe Mountain Lion wallpaper

    \ No newline at end of file diff --git a/writings/out-with-the-old/index.html b/writings/out-with-the-old/index.html index dc63f5288..5d3925bf8 100644 --- a/writings/out-with-the-old/index.html +++ b/writings/out-with-the-old/index.html @@ -1 +1 @@ -Out with the old / Johan Brook

    Out with the old

    About 3 min reading time

    Hi and welcome to my new personal site. I’ve finally been able to get out of the six months long swamp known as “creative block”, “problems deciding” and “lack of time”. I’m a boy man of perfection and innovation and we all know that we are our own’s worst client. This new site features a journal (with posts and quickies), a work sample page, an about page with services and contact info. The previous designs were quite ambitious, and were sort of “too big” for me. It took a couple of iterations for me to realize that I didn’t need an XXL site. Just a place for writing, showing off my work and contact info would be fine. I’m quite embarrassed sitting here in October with  a site I planned to launch in March, but I’ve learnt a lot during the process.

    Previous versions

    I neither want nor can show the first version for you, so we’ll begin with the second one.

    May — Dyluni

    As you can see I was sort of hooked on lining everything up in a grid. The cool cork board is something I’m pretty proud of. There are some advanced CSS3 stuff in there and no unnecessary markup (it’s one section with border-image and multiple background, including an unordered list with work samples that scroll horizontally).

    But alas, I changed my mind with the design when I was close to launch. It just didn’t work out. It was dull, boring, empty and not focused enough.

    April — Contrast

    I worked quite a lot with this version as well. More colours and the serif typeface Palatino (which I’m still using) made it into the design. After I’ve marked everything up and used it for a while, it still didn’t feel right. Wasn’t that streamlined and included a bunch of wannabe things. Also still quite empty and white. Where’s the contrast?!

    June — Brave New World

    This was a wireframe of another version. I was going to put portfolio thumbnails in those black boxes. It was more of a frontpage design that transported you to my portfolio page than the other designs. I also built this cool CSS3 media query thing which switched layout of the boxes when viewed on an iPad or iPhone. I was quite keen to keep the logotype for future versions. It featured different textures everywhere you saw it. I even animated it to slide new background patterns in behind it. Also implemented a PHP script that extracted colours from the portfolio thumbnails and used them in the logo. That didn’t work out good however. It was nothing really wrong with this design. I stopped working on it just after I had marked up the frontpage and blog page.

    June — Experience

    This design was really the foundation for the current one. I used a different colour scheme (lots of purple) and I worked with the fonts in another way. “Content” was the keyword for this iteration. I wanted contrast and no more empty spaces. In the end of the markup process I felt that this one would be “too big” for me. I moved on. The current design owes a lot to Experience — both technology and appearance wise. Especially the journal pages are the same (to the left. Don’t worry about the float bug on one of the articles).

    August — Grid

    I started out fresh with a less colourful scheme. You can spot the underlying twelve column grid better as well as the baseline. Clear typography and readability is apparent. Written in semantic HTML5 and modern CSS3 this site may not look that crazy, but boy it’s much under the hood. Go ahead and check the source — it’s quite beautiful. The theme features ARIA roles, custom shortlinks in the head, send to Instapaper and Twitter instantly from the journal posts or quickies and more. You can of course resize the browser window and see layouts for iPad and iPhone. I think I’ll go with this one.

    Looking back

    I’ve learnt a lot during the process. In the end, it wasn’t that bad to be dissatisfied with the previous versions. For every iteration I fine tuned the HTML and CSS, and found more techniques and ways of doing things. My CSS framework, Dyluni, was the outcome of my work in SASS. I’ve written and reused many PHP functions in the theme during the iterations as well. You have to go through hell to appreciate heaven, I guess.

    What’s next?

    I will of course create a portfolio page with work samples. After that I’m thinking of making a digital resume on a designated page, optimized for printing. I’ll also add a social page with my Twitter, Flickr and Last.fm streams. For now, check out the posts and quickies pages for a steady flow of articles and shorter pieces, and feel free to read more about me on the about pages. And just to make it clear: I’m available for freelance work. Thanks for reading!

    \ No newline at end of file +Out with the old / Johan Brook

    Out with the old

    About 3 min reading time

    Hi and welcome to my new personal site. I’ve finally been able to get out of the six months long swamp known as “creative block”, “problems deciding” and “lack of time”. I’m a boy man of perfection and innovation and we all know that we are our own’s worst client. This new site features a journal (with posts and quickies), a work sample page, an about page with services and contact info. The previous designs were quite ambitious, and were sort of “too big” for me. It took a couple of iterations for me to realize that I didn’t need an XXL site. Just a place for writing, showing off my work and contact info would be fine. I’m quite embarrassed sitting here in October with  a site I planned to launch in March, but I’ve learnt a lot during the process.

    Previous versions

    I neither want nor can show the first version for you, so we’ll begin with the second one.

    May — Dyluni

    As you can see I was sort of hooked on lining everything up in a grid. The cool cork board is something I’m pretty proud of. There are some advanced CSS3 stuff in there and no unnecessary markup (it’s one section with border-image and multiple background, including an unordered list with work samples that scroll horizontally).

    But alas, I changed my mind with the design when I was close to launch. It just didn’t work out. It was dull, boring, empty and not focused enough.

    April — Contrast

    I worked quite a lot with this version as well. More colours and the serif typeface Palatino (which I’m still using) made it into the design. After I’ve marked everything up and used it for a while, it still didn’t feel right. Wasn’t that streamlined and included a bunch of wannabe things. Also still quite empty and white. Where’s the contrast?!

    June — Brave New World

    This was a wireframe of another version. I was going to put portfolio thumbnails in those black boxes. It was more of a frontpage design that transported you to my portfolio page than the other designs. I also built this cool CSS3 media query thing which switched layout of the boxes when viewed on an iPad or iPhone. I was quite keen to keep the logotype for future versions. It featured different textures everywhere you saw it. I even animated it to slide new background patterns in behind it. Also implemented a PHP script that extracted colours from the portfolio thumbnails and used them in the logo. That didn’t work out good however. It was nothing really wrong with this design. I stopped working on it just after I had marked up the frontpage and blog page.

    June — Experience

    This design was really the foundation for the current one. I used a different colour scheme (lots of purple) and I worked with the fonts in another way. “Content” was the keyword for this iteration. I wanted contrast and no more empty spaces. In the end of the markup process I felt that this one would be “too big” for me. I moved on. The current design owes a lot to Experience — both technology and appearance wise. Especially the journal pages are the same (to the left. Don’t worry about the float bug on one of the articles).

    August — Grid

    I started out fresh with a less colourful scheme. You can spot the underlying twelve column grid better as well as the baseline. Clear typography and readability is apparent. Written in semantic HTML5 and modern CSS3 this site may not look that crazy, but boy it’s much under the hood. Go ahead and check the source — it’s quite beautiful. The theme features ARIA roles, custom shortlinks in the head, send to Instapaper and Twitter instantly from the journal posts or quickies and more. You can of course resize the browser window and see layouts for iPad and iPhone. I think I’ll go with this one.

    Looking back

    I’ve learnt a lot during the process. In the end, it wasn’t that bad to be dissatisfied with the previous versions. For every iteration I fine tuned the HTML and CSS, and found more techniques and ways of doing things. My CSS framework, Dyluni, was the outcome of my work in SASS. I’ve written and reused many PHP functions in the theme during the iterations as well. You have to go through hell to appreciate heaven, I guess.

    What’s next?

    I will of course create a portfolio page with work samples. After that I’m thinking of making a digital resume on a designated page, optimized for printing. I’ll also add a social page with my Twitter, Flickr and Last.fm streams. For now, check out the posts and quickies pages for a steady flow of articles and shorter pieces, and feel free to read more about me on the about pages. And just to make it clear: I’m available for freelance work. Thanks for reading!

    \ No newline at end of file diff --git a/writings/pain-points-and-incentives/index.html b/writings/pain-points-and-incentives/index.html index c0e69e9f3..d49b7a4d7 100644 --- a/writings/pain-points-and-incentives/index.html +++ b/writings/pain-points-and-incentives/index.html @@ -1 +1 @@ -Pain points & Incentives / Johan Brook

    Pain points & Incentives

    About 2 min reading time

    When working with building features in a product, I usually need some emotional attachment to them. You can’t make them good unless you believe in them and really understand the problem you’re trying to solve. This is of course Johan-stating-the-obvious, but I experienced this the other day.

    Our CEO at Lookback, Jonatan, once said that he had heard from Slack that their success largely depended on that everyone in their team really understood the product. By understanding the product, I refer to the problems it tries to solve. By “problems”, I mean real pain points.

    It’s easy to mindlessly build features by taking cards out of the backlog — rinse and repeat. But they’ll only be so good — in order for features to achieve their fullest potential, its creators must be given the freedom to explore different routes, but also they need empathy.

    Two stories:

    Feeling the users

    Me and Jonatan visited some Silicon Valley companies the other day, where we did some lightweight user testing and interviews centering around Lookback’s new player. The player is the creation of our awesome designer Tobias and myself. Tobias had taken part of customer meetings beforehand, so he had witnessed their pain points up front with his eyes. I was sitting around on the west coast of Sweden, always taking on the newest design mocks from Tobias. When I visited the before mentioned customers in the valley, it was the first time I’d seen a customer interacting with our product — with the player I built. It was an enlightening experience, since I felt: “Wow, we really need to fix [this]” or “Shit, we should totally go in [this] direction!”.

    It reminded me of what’s important with our product, and that’s a thing a remote chat never can express. I felt empathy when we met our contacts at the company, when they described their workflow and mentioned things like “Yeah, it would be cool to do [this] in the player” or described a bug. I instantly wanted to make it up do them somehow, since I was emotionally invested in their workflow now.

    Making it your feature

    When you’re solving a thing for yourself — your own sake — it’ll probably be a good creation. You know what you want, and create it: a one-to-one relationship between incentive and outcome.

    A user experience researcher from Quora — who’s an avid Lookback user – requested a way to transcribe comments from a Lookback recording. That is, somehow export comments made while watching a user test. When I heard about it, I thought “Yeah, that’d be cool, but …” and then I put it on a mental to do somewhere and forgot about it. When I last week experienced that very need for the feature, it was another scenario: I immediately started to think of the implementation, interface, and usage of exporting comments to Markdown or similar. I immediately created a card in Trello. See the difference? I had made it my feature since it filled my need.

    This is of course common knowledge, but I nevertheless think it’s something that’s easy to forget. Building products for people involves actually interacting and understanding them and their needs, before you decide what to build.

    \ No newline at end of file +Pain points & Incentives / Johan Brook

    Pain points & Incentives

    About 2 min reading time

    When working with building features in a product, I usually need some emotional attachment to them. You can’t make them good unless you believe in them and really understand the problem you’re trying to solve. This is of course Johan-stating-the-obvious, but I experienced this the other day.

    Our CEO at Lookback, Jonatan, once said that he had heard from Slack that their success largely depended on that everyone in their team really understood the product. By understanding the product, I refer to the problems it tries to solve. By “problems”, I mean real pain points.

    It’s easy to mindlessly build features by taking cards out of the backlog — rinse and repeat. But they’ll only be so good — in order for features to achieve their fullest potential, its creators must be given the freedom to explore different routes, but also they need empathy.

    Two stories:

    Feeling the users

    Me and Jonatan visited some Silicon Valley companies the other day, where we did some lightweight user testing and interviews centering around Lookback’s new player. The player is the creation of our awesome designer Tobias and myself. Tobias had taken part of customer meetings beforehand, so he had witnessed their pain points up front with his eyes. I was sitting around on the west coast of Sweden, always taking on the newest design mocks from Tobias. When I visited the before mentioned customers in the valley, it was the first time I’d seen a customer interacting with our product — with the player I built. It was an enlightening experience, since I felt: “Wow, we really need to fix [this]” or “Shit, we should totally go in [this] direction!”.

    It reminded me of what’s important with our product, and that’s a thing a remote chat never can express. I felt empathy when we met our contacts at the company, when they described their workflow and mentioned things like “Yeah, it would be cool to do [this] in the player” or described a bug. I instantly wanted to make it up do them somehow, since I was emotionally invested in their workflow now.

    Making it your feature

    When you’re solving a thing for yourself — your own sake — it’ll probably be a good creation. You know what you want, and create it: a one-to-one relationship between incentive and outcome.

    A user experience researcher from Quora — who’s an avid Lookback user – requested a way to transcribe comments from a Lookback recording. That is, somehow export comments made while watching a user test. When I heard about it, I thought “Yeah, that’d be cool, but …” and then I put it on a mental to do somewhere and forgot about it. When I last week experienced that very need for the feature, it was another scenario: I immediately started to think of the implementation, interface, and usage of exporting comments to Markdown or similar. I immediately created a card in Trello. See the difference? I had made it my feature since it filled my need.

    This is of course common knowledge, but I nevertheless think it’s something that’s easy to forget. Building products for people involves actually interacting and understanding them and their needs, before you decide what to build.

    \ No newline at end of file diff --git a/writings/panic-talks-about-the-future-coda-2/index.html b/writings/panic-talks-about-the-future-coda-2/index.html index 7c44b9c08..ca7b3be70 100644 --- a/writings/panic-talks-about-the-future-coda-2/index.html +++ b/writings/panic-talks-about-the-future-coda-2/index.html @@ -1 +1 @@ -Panic talks about the future: Coda 2 / Johan Brook

    Panic talks about the future: Coda 2

    About 1 min reading time

    Follow link to panic.com →

    Cabel Sasser from Panic posted about Panic’s future doings. I was most pleased about their mention of Coda 2, which they’re working hard on: “For the most part, though, it’s all hands on the next Coda. That’s what we’re living and breathing. Awesomeness. I think the next major release of my daily code editor will be really great. He also brought up the upcoming 1.7 release of Coda. Extended support for HTML5 dictionaries and Javascript events, and more CSS goodness. Update, October 26th 2011: Again, Sasser has posted on the Panic Blog about Coda 2. Panic has apparently been working with the application for 1,5 years, and has now initiated the private beta tests to hammer out some bugs. The beta signup form is now closed, but there were 4 000 signups all together (!).

    \ No newline at end of file +Panic talks about the future: Coda 2 / Johan Brook

    Panic talks about the future: Coda 2

    About 1 min reading time

    Follow link to panic.com →

    Cabel Sasser from Panic posted about Panic’s future doings. I was most pleased about their mention of Coda 2, which they’re working hard on: “For the most part, though, it’s all hands on the next Coda. That’s what we’re living and breathing. Awesomeness. I think the next major release of my daily code editor will be really great. He also brought up the upcoming 1.7 release of Coda. Extended support for HTML5 dictionaries and Javascript events, and more CSS goodness. Update, October 26th 2011: Again, Sasser has posted on the Panic Blog about Coda 2. Panic has apparently been working with the application for 1,5 years, and has now initiated the private beta tests to hammer out some bugs. The beta signup form is now closed, but there were 4 000 signups all together (!).

    \ No newline at end of file diff --git a/writings/paris-vs-new-york-a-graphic-comparison/index.html b/writings/paris-vs-new-york-a-graphic-comparison/index.html index 563a5a52b..470bfc95a 100644 --- a/writings/paris-vs-new-york-a-graphic-comparison/index.html +++ b/writings/paris-vs-new-york-a-graphic-comparison/index.html @@ -1 +1 @@ -Paris vs. New York – a graphic comparison / Johan Brook

    Paris vs. New York – a graphic comparison

    About 1 min reading time

    Follow link to parisvsnyc.blogspot.com →

    Vahram Muratyan of the Parisian graphic design studio ViiiZ has created some posters with distinct motives from Paris and New York — comparisons. All of the are really clever and straight to the point. It kind of makes me prefer Paris over New York even more …

    \ No newline at end of file +Paris vs. New York – a graphic comparison / Johan Brook

    Paris vs. New York – a graphic comparison

    About 1 min reading time

    Follow link to parisvsnyc.blogspot.com →

    Vahram Muratyan of the Parisian graphic design studio ViiiZ has created some posters with distinct motives from Paris and New York — comparisons. All of the are really clever and straight to the point. It kind of makes me prefer Paris over New York even more …

    \ No newline at end of file diff --git a/writings/perfection-doesnt-exist/index.html b/writings/perfection-doesnt-exist/index.html index 8ffc52d72..82c13ba28 100644 --- a/writings/perfection-doesnt-exist/index.html +++ b/writings/perfection-doesnt-exist/index.html @@ -1 +1 @@ -Perfection doesn't exist / Johan Brook

    Perfection doesn't exist

    About 3 min reading time

    What is perfection? Who decides what is perfect, and when does one know when perfection is achieved? Is it even possible to achieve? Questions, questions. This post is a bit abstract and blurry, but I find the subject interesting and worth discussing.

    If you do creative arts, may it be graphic design, web design, or UI design, it’s easy to strive for perfection. You tweak them pixels and sacrifice sleep in order to achieve the glorious word perfection. If you are like me, you value the details and want things done thoroughly and polished. You want to get it “just right”.

    But does perfection exist? It’s a bit abstract and perhaps read as a whimsy and irrelevant discussion, but yet I’m still pondering over the idea that perfection isn’t achievable by humans.

    Perfection is subjective and not permanent

    Take code as an example. There are many snippets which are said to be “perfect” and “beautiful”. They are regarded as prime examples of the genius features of <insert hipster programming language here> . But what about my idea of a perfect piece of code? We may not share the same idea of perfection.

    Say the language designers add a nifty feature which makes this code snippet ugly and outdated. It’s not perfect anymore. Perfection, like fame, is transient and isn’t loyal to its host.

    The eye of the beholder and creator

    I mentioned different notions of perfection before. As with everything related to artsy subjects, perfection is subjective. It’s my opinion that it’s plain wrong to proclaim a piece of work perfect, since it’s only from your point of view (which however should be the only view that matters, but we’ll not getting into that now).

    Should the author ever acknowledge his work’s perfection? Isn’t one suppose to always strive for further excellence and not stop at any limits?

    “Heaven is not a place, and it is not a time. Heaven is being perfect. And that isn’t flying a thousand miles an hour, or a million, or flying at the speed of light. Because any number is a limit, and perfection doesn’t have limits. Perfect speed, my son, is being there.”

    – Richard Bach, Jonathan Livingston Seagull (great book, I strongly recommend it)

    The quote above says Heaven is being perfect. It also mentions limits, which is exactly what an author creates when he or she states that “My work is perfect. I’m done”. Do you hear how dangerous that sounds? A piece of handcrafter art shouldn’t have limits.

    Ego

    I put too much pride and, inadvertently, too much ego into my work. Things took too long to create, and because of the amount of effort put into the work, significant changes, based on client feedback for example, were more difficult to stomach.

    Greg Wood, Designing for perfection

    I want to highlight the “ego” part, which may diminish one’s judgement and neutrality. When you go for ultimate perfection it’s easy to take every critique … personally. As the quote says, every change (and there’s always going to be changes) could get bulky, cumbersome, and perhaps associated with a certain bitterness of the creator, since in his or her eyes the work is “perfect”.

    An example. Some time ago I used “pixel perfect” grids and layouts for every web design mockup I created. Everything was perfectly aligned to the columns and baseline, and when the eventual changes came, it was a bit tricky to align everything correctly again. Of course it depends on the rigidity of the layout framework of your choice as well. But in my case I’ve started to work with more rough proportions and relative measures instead of column grids. It allows me to create more flexible and maintainable designs. But as always, it depends on the nature of the design.

    We are all humans. Humans change their minds about things, and nothing is set in stone. If you constantly are changing your mind, how could perfection every be achieved if it’s altered regurarly? In that case, you’ve probably fooled yourself.

    Everything above can be applied to human behaviour as well. We often hear “nobody is perfect”, which is indeed true. If nobody is perfect, how can anyone create works of perfection? Shouldn’t only perfect people be able to create perfection? Weird questions, but actually interesting.

    Outro

    Perfection can be looked upon as a state of mind — an ecosystem, a favourable turn of events, or simply a glass of water — pure, simple and humble. I like the idea of perfection as something that just is — something that I can’t put words on, but just exists (perhaps without any purpose at all).

    In the end I think it’s important to always remember that perfection is just an abstract concept or synonym for something that’s stopped evolving — reached its limits.

    Therefore, I don’t strive for perfection — I strive for excellence.

    \ No newline at end of file +Perfection doesn't exist / Johan Brook

    Perfection doesn't exist

    About 3 min reading time

    What is perfection? Who decides what is perfect, and when does one know when perfection is achieved? Is it even possible to achieve? Questions, questions. This post is a bit abstract and blurry, but I find the subject interesting and worth discussing.

    If you do creative arts, may it be graphic design, web design, or UI design, it’s easy to strive for perfection. You tweak them pixels and sacrifice sleep in order to achieve the glorious word perfection. If you are like me, you value the details and want things done thoroughly and polished. You want to get it “just right”.

    But does perfection exist? It’s a bit abstract and perhaps read as a whimsy and irrelevant discussion, but yet I’m still pondering over the idea that perfection isn’t achievable by humans.

    Perfection is subjective and not permanent

    Take code as an example. There are many snippets which are said to be “perfect” and “beautiful”. They are regarded as prime examples of the genius features of <insert hipster programming language here> . But what about my idea of a perfect piece of code? We may not share the same idea of perfection.

    Say the language designers add a nifty feature which makes this code snippet ugly and outdated. It’s not perfect anymore. Perfection, like fame, is transient and isn’t loyal to its host.

    The eye of the beholder and creator

    I mentioned different notions of perfection before. As with everything related to artsy subjects, perfection is subjective. It’s my opinion that it’s plain wrong to proclaim a piece of work perfect, since it’s only from your point of view (which however should be the only view that matters, but we’ll not getting into that now).

    Should the author ever acknowledge his work’s perfection? Isn’t one suppose to always strive for further excellence and not stop at any limits?

    “Heaven is not a place, and it is not a time. Heaven is being perfect. And that isn’t flying a thousand miles an hour, or a million, or flying at the speed of light. Because any number is a limit, and perfection doesn’t have limits. Perfect speed, my son, is being there.”

    – Richard Bach, Jonathan Livingston Seagull (great book, I strongly recommend it)

    The quote above says Heaven is being perfect. It also mentions limits, which is exactly what an author creates when he or she states that “My work is perfect. I’m done”. Do you hear how dangerous that sounds? A piece of handcrafter art shouldn’t have limits.

    Ego

    I put too much pride and, inadvertently, too much ego into my work. Things took too long to create, and because of the amount of effort put into the work, significant changes, based on client feedback for example, were more difficult to stomach.

    Greg Wood, Designing for perfection

    I want to highlight the “ego” part, which may diminish one’s judgement and neutrality. When you go for ultimate perfection it’s easy to take every critique … personally. As the quote says, every change (and there’s always going to be changes) could get bulky, cumbersome, and perhaps associated with a certain bitterness of the creator, since in his or her eyes the work is “perfect”.

    An example. Some time ago I used “pixel perfect” grids and layouts for every web design mockup I created. Everything was perfectly aligned to the columns and baseline, and when the eventual changes came, it was a bit tricky to align everything correctly again. Of course it depends on the rigidity of the layout framework of your choice as well. But in my case I’ve started to work with more rough proportions and relative measures instead of column grids. It allows me to create more flexible and maintainable designs. But as always, it depends on the nature of the design.

    We are all humans. Humans change their minds about things, and nothing is set in stone. If you constantly are changing your mind, how could perfection every be achieved if it’s altered regurarly? In that case, you’ve probably fooled yourself.

    Everything above can be applied to human behaviour as well. We often hear “nobody is perfect”, which is indeed true. If nobody is perfect, how can anyone create works of perfection? Shouldn’t only perfect people be able to create perfection? Weird questions, but actually interesting.

    Outro

    Perfection can be looked upon as a state of mind — an ecosystem, a favourable turn of events, or simply a glass of water — pure, simple and humble. I like the idea of perfection as something that just is — something that I can’t put words on, but just exists (perhaps without any purpose at all).

    In the end I think it’s important to always remember that perfection is just an abstract concept or synonym for something that’s stopped evolving — reached its limits.

    Therefore, I don’t strive for perfection — I strive for excellence.

    \ No newline at end of file diff --git a/writings/photos-of-national-geographic/index.html b/writings/photos-of-national-geographic/index.html index 873130563..f567f3519 100644 --- a/writings/photos-of-national-geographic/index.html +++ b/writings/photos-of-national-geographic/index.html @@ -1 +1 @@ -Photos of National Geographic / Johan Brook

    Photos of National Geographic

    About 1 min reading time

    I’ve had National Geographic’s “Photo of the Day” in my RSS stream for quite a while by now, and I’ll never stop being marveled by those shots. Simply stunning photographs. For the past twenty minutes I’ve looked through many of them, and got hooked on the Big Cats section of photos. Really fantastic creatures. Beautiful and full of grace. I’m fond of the Siberian Tiger (especially the white species). Check out this section with photos of tigers (they’re downloadable as wallpapers as well). You’ll find all kinds of wallpapers in the wallpaper section too.

    \ No newline at end of file +Photos of National Geographic / Johan Brook

    Photos of National Geographic

    About 1 min reading time

    I’ve had National Geographic’s “Photo of the Day” in my RSS stream for quite a while by now, and I’ll never stop being marveled by those shots. Simply stunning photographs. For the past twenty minutes I’ve looked through many of them, and got hooked on the Big Cats section of photos. Really fantastic creatures. Beautiful and full of grace. I’m fond of the Siberian Tiger (especially the white species). Check out this section with photos of tigers (they’re downloadable as wallpapers as well). You’ll find all kinds of wallpapers in the wallpaper section too.

    \ No newline at end of file diff --git a/writings/php-needs-to-die/index.html b/writings/php-needs-to-die/index.html index bc9ea2a99..e5c870acf 100644 --- a/writings/php-needs-to-die/index.html +++ b/writings/php-needs-to-die/index.html @@ -1 +1 @@ -PHP needs to die / Johan Brook

    PHP needs to die

    About 2 min reading time

    Follow link to seldo.com →

    Great article on why PHP must go, and what the alternatives are — if there are any at all. PHP is a pretty neat language. It’s available on almost every web host around the world. It’s really easy for beginners to setup, write code, and publish it. Still, PHP is starting to become dreaded, unwanted and hated among serious new-era web developers. The familiar C style syntax is becoming old, there’s a lot of noise in the code, and a lot more pet peeves which are forcing developers to other languages, such as Ruby, Python, and in recent days Javascript.

    I can knock out a good website in an hour in PHP, and an excellent one in a day or two. Its performance characteristics are well-known and understood, so I can make it scale pretty much indefinitely. Every developer we’d want to hire knows it, and every system we’d integrate with has a wrapper library written in it. I am trapped by the convenience of PHP in a language that is losing its suitability for the task.

    What’s happened with PHP is that we’ve become too convenient and lazy. Everybody uses it — why change? It’s an evil spiral I don’t want to go down with. “PHP needs to die” is perhaps a bit harsh, but I definitely think it shouldn’t be the first choice of web server language when beginners grow out of HTML and CSS (it is actually very much a de facto language). In a perfect world, web hosts (even shared hosting providers) would offer Ruby and Python out-of-the-box without any addon fees.

    I want a language that assumes everything I will be building is an MVC web app, and builds that right into the core language, not just a library.

    To become the Number One Web Language, it has to look on what made PHP big: drop in functionality, straight forward documentation, simple hosting, and a not too steep learning curve.

    \ No newline at end of file +PHP needs to die / Johan Brook

    PHP needs to die

    About 2 min reading time

    Follow link to seldo.com →

    Great article on why PHP must go, and what the alternatives are — if there are any at all. PHP is a pretty neat language. It’s available on almost every web host around the world. It’s really easy for beginners to setup, write code, and publish it. Still, PHP is starting to become dreaded, unwanted and hated among serious new-era web developers. The familiar C style syntax is becoming old, there’s a lot of noise in the code, and a lot more pet peeves which are forcing developers to other languages, such as Ruby, Python, and in recent days Javascript.

    I can knock out a good website in an hour in PHP, and an excellent one in a day or two. Its performance characteristics are well-known and understood, so I can make it scale pretty much indefinitely. Every developer we’d want to hire knows it, and every system we’d integrate with has a wrapper library written in it. I am trapped by the convenience of PHP in a language that is losing its suitability for the task.

    What’s happened with PHP is that we’ve become too convenient and lazy. Everybody uses it — why change? It’s an evil spiral I don’t want to go down with. “PHP needs to die” is perhaps a bit harsh, but I definitely think it shouldn’t be the first choice of web server language when beginners grow out of HTML and CSS (it is actually very much a de facto language). In a perfect world, web hosts (even shared hosting providers) would offer Ruby and Python out-of-the-box without any addon fees.

    I want a language that assumes everything I will be building is an MVC web app, and builds that right into the core language, not just a library.

    To become the Number One Web Language, it has to look on what made PHP big: drop in functionality, straight forward documentation, simple hosting, and a not too steep learning curve.

    \ No newline at end of file diff --git a/writings/posters-by-avraham-cornfeld/index.html b/writings/posters-by-avraham-cornfeld/index.html index b24b26850..a951843ff 100644 --- a/writings/posters-by-avraham-cornfeld/index.html +++ b/writings/posters-by-avraham-cornfeld/index.html @@ -1 +1 @@ -Posters by Avraham Cornfeld / Johan Brook

    Posters by Avraham Cornfeld

    About 1 min reading time

    Follow link to avraham.me →

    Great looking posters by Avraham Cornfeld (which also has created the grid system I use in website designs: The Square Grid).

    \ No newline at end of file +Posters by Avraham Cornfeld / Johan Brook

    Posters by Avraham Cornfeld

    About 1 min reading time

    Follow link to avraham.me →

    Great looking posters by Avraham Cornfeld (which also has created the grid system I use in website designs: The Square Grid).

    \ No newline at end of file diff --git a/writings/programming-and-communication/index.html b/writings/programming-and-communication/index.html index 7a037a135..9bb5024c7 100644 --- a/writings/programming-and-communication/index.html +++ b/writings/programming-and-communication/index.html @@ -1 +1 @@ -Programming and communication / Johan Brook

    Programming and communication

    About 1 min reading time

    The difference between a tolerable programmer and a great programmer is not how many programming languages they know, and it’s not whether they prefer Python or Java. It’s whether they can communicate their ideas. By writing clear comments and technical specs, they let other programmers understand their code, which means other programmers can use and work with their code instead of rewriting it. Absent this, their code is worthless. By writing clear technical documentation for end users, they allow people to figure out what their code is supposed to do, which is the only way those users can see the value in their code. Joel Spolsky

    \ No newline at end of file +Programming and communication / Johan Brook

    Programming and communication

    About 1 min reading time

    The difference between a tolerable programmer and a great programmer is not how many programming languages they know, and it’s not whether they prefer Python or Java. It’s whether they can communicate their ideas. By writing clear comments and technical specs, they let other programmers understand their code, which means other programmers can use and work with their code instead of rewriting it. Absent this, their code is worthless. By writing clear technical documentation for end users, they allow people to figure out what their code is supposed to do, which is the only way those users can see the value in their code. Joel Spolsky

    \ No newline at end of file diff --git a/writings/quick-internal-linking-tag-in-wordpress/index.html b/writings/quick-internal-linking-tag-in-wordpress/index.html index 4ea416525..2b7454c13 100644 --- a/writings/quick-internal-linking-tag-in-wordpress/index.html +++ b/writings/quick-internal-linking-tag-in-wordpress/index.html @@ -35,4 +35,4 @@ else return $link; } - \ No newline at end of file + \ No newline at end of file diff --git a/writings/rasmus-andersson-on-kod/index.html b/writings/rasmus-andersson-on-kod/index.html index d7323a760..eb16ece3b 100644 --- a/writings/rasmus-andersson-on-kod/index.html +++ b/writings/rasmus-andersson-on-kod/index.html @@ -1 +1 @@ -Rasmus Andersson on Kod / Johan Brook

    Rasmus Andersson on Kod

    About 1 min reading time

    Follow link to blog.hunch.se →

    Rasmus Andersson who’s currently developing the code editor Kod is telling us a little bit about how he came up with the idea, and why. I really like the spirit and goals of the project. The upcoming syntax highlighting and plugin features appeals a lot to me, as well as the clever address field in the app, which lets you edit any text file you know the URL for — local or remote. Textmate is great, but it’s not that maintained and up-to-date. A lightweight, customizable, community developed code editor like Kod would help a lot. Go check out Kod’s Github page and see if there’s anything you can do.

    \ No newline at end of file +Rasmus Andersson on Kod / Johan Brook

    Rasmus Andersson on Kod

    About 1 min reading time

    Follow link to blog.hunch.se →

    Rasmus Andersson who’s currently developing the code editor Kod is telling us a little bit about how he came up with the idea, and why. I really like the spirit and goals of the project. The upcoming syntax highlighting and plugin features appeals a lot to me, as well as the clever address field in the app, which lets you edit any text file you know the URL for — local or remote. Textmate is great, but it’s not that maintained and up-to-date. A lightweight, customizable, community developed code editor like Kod would help a lot. Go check out Kod’s Github page and see if there’s anything you can do.

    \ No newline at end of file diff --git a/writings/react-hooks-streams/index.html b/writings/react-hooks-streams/index.html index 8ac76ac4a..23836c52b 100644 --- a/writings/react-hooks-streams/index.html +++ b/writings/react-hooks-streams/index.html @@ -113,4 +113,4 @@ return <time>{formatDuration(currentTime)}</time>; }; -

    And at last, there is beauty.

    \ No newline at end of file +

    And at last, there is beauty.

    \ No newline at end of file diff --git a/writings/realigning-johanbrookcom/index.html b/writings/realigning-johanbrookcom/index.html index 8ec364dae..78b0e0a20 100644 --- a/writings/realigning-johanbrookcom/index.html +++ b/writings/realigning-johanbrookcom/index.html @@ -1 +1 @@ -Realigning Johanbrook.com / Johan Brook

    Realigning Johanbrook.com

    About 2 min reading time

    Today I pushed a new theme to this site. It’s a lot cleaner and to me more readable than the previous one. Some points to bring up:

    Layout

    I still go with the two-column layout. This time, I fully ditched any 12 or 16 column grids, and went fluid all the way, i.e. I’ve made all measures relative to each other, and the Golden Ratio. I’ve used a 6pt baseline grid, and a modular scale. It was actually quite relaxing ‘letting go’ of the old grids and start fresh.

    Grid Frontpage with Golden Ratio, module, and baseline overlay

    Try adding ?dev=1 to any URL on the site, and press and hold G on your keyboard to view the baseline grid.

    Typography and Colours

    Switched the somewhat boring Georgia for PT Serif, and Helvetica for Lato. Both are served via Google Webfonts Directory. The goal with the realignment was to create more whitespace to focus on the typography, and for that great typefaces were needed.

    This is also the first time I use the new-ish rem unit (with a fallback). There are almost no pixel values as far as the eyes can see.

    The colour palette is quite sparse: just plain white, kinda-black, and cerise red.

    Under the Hood

    I have for once not used Compass for this project. Don’t know why, just felt for a change — trying out something new. That ‘new’ is Bourbon by Thoughtbot. A lightweight collection of Sass mixins. Might as well, right?

    The very small amount of Javascript I’ve included is written in CoffeeScript, which I’ve been dabbling with recently.

    Responsiveness

    No need to explain anything here. I believe every web designer and developer with self-respect should create responsive websites for themselves and clients these days. For this one I have two breakpoints set in ems. There is no max-width of the container.

    Javascript?

    Nope, almost none. I don’t need jQuery for anything, so it felt good getting rid of all that fat.

    More writing?

    Hopefully this will encourage me to blog more often :) (as I and many before me have said — all the time).

    Thanks for reading.

    \ No newline at end of file +Realigning Johanbrook.com / Johan Brook

    Realigning Johanbrook.com

    About 2 min reading time

    Today I pushed a new theme to this site. It’s a lot cleaner and to me more readable than the previous one. Some points to bring up:

    Layout

    I still go with the two-column layout. This time, I fully ditched any 12 or 16 column grids, and went fluid all the way, i.e. I’ve made all measures relative to each other, and the Golden Ratio. I’ve used a 6pt baseline grid, and a modular scale. It was actually quite relaxing ‘letting go’ of the old grids and start fresh.

    Grid Frontpage with Golden Ratio, module, and baseline overlay

    Try adding ?dev=1 to any URL on the site, and press and hold G on your keyboard to view the baseline grid.

    Typography and Colours

    Switched the somewhat boring Georgia for PT Serif, and Helvetica for Lato. Both are served via Google Webfonts Directory. The goal with the realignment was to create more whitespace to focus on the typography, and for that great typefaces were needed.

    This is also the first time I use the new-ish rem unit (with a fallback). There are almost no pixel values as far as the eyes can see.

    The colour palette is quite sparse: just plain white, kinda-black, and cerise red.

    Under the Hood

    I have for once not used Compass for this project. Don’t know why, just felt for a change — trying out something new. That ‘new’ is Bourbon by Thoughtbot. A lightweight collection of Sass mixins. Might as well, right?

    The very small amount of Javascript I’ve included is written in CoffeeScript, which I’ve been dabbling with recently.

    Responsiveness

    No need to explain anything here. I believe every web designer and developer with self-respect should create responsive websites for themselves and clients these days. For this one I have two breakpoints set in ems. There is no max-width of the container.

    Javascript?

    Nope, almost none. I don’t need jQuery for anything, so it felt good getting rid of all that fat.

    More writing?

    Hopefully this will encourage me to blog more often :) (as I and many before me have said — all the time).

    Thanks for reading.

    \ No newline at end of file diff --git a/writings/recently-in-books-ii/index.html b/writings/recently-in-books-ii/index.html index 07abef322..ef5d0a865 100644 --- a/writings/recently-in-books-ii/index.html +++ b/writings/recently-in-books-ii/index.html @@ -1 +1 @@ -Recently in books II / Johan Brook

    Recently in books II

    About 6 min reading time

    This is a long overdue post on some books I’ve read since the last update.

    “Ishmael” by Daniel Quinn

    My father in law borrowed me this one, not without a glimpse in his eye. It’s hard to describe this novel. It’s not what it seems to be in the first few pages, which is about a man who starts talking with a gorilla via telepathy. The bulk of the novel is the philosophical conversation between the odd couple, where the gorilla acts as the teacher for the man, who acts as narrator.

    My immediate thoughts about this book are these:

    1. It’s really “on topic” right now (year 2020).
    2. It’s eye opening, challenging, provoking, and story telling.

    For the first point: one of the book’s core themes is around planet Earth – the environment and how we humans are ruining it. Whereas other books in the climate genre is a lot of numbers and facts, “Ishmael” tells a different, more philosophical, story.

    The second point: the book does exactly what (I think) a philosophical novel should do. It taught me things and how to see myself, my culture, and whole of humanity and its history in a different light. I knew already that our modern culture — capitalist and infinte-growth aspiring — isn’t viable and sustainable. “Ishmael” confirms those thoughts by anchoring them in a spiritual and cultural arguments, using terms as Myths, Stories, and Cultures.

    The book affected me in the sense of reiterating that Balance is everything. Humans have messed up that ecological balance in nature, by telling ourselves we’re above the laws of nature, and that we possess the power of deciding over “who’s to die, and who’s to survive”.

    If you can bare with the kind of long introductory part, I’d really recommend getting through it. Pair it up with the popular science piece “Sapiens” for a full picture.

    “Cosa Nostra” by John Dickie

    A non-fiction book about the Sicilian mafia - the Cosa Nostra.

    I had a real “mobster Spring” where I went through a couple of mafia movies and books (this and the next one I write about below). Am I getting this old already?! I like good non-fiction books, and this one was good. It’s essentially about how the mafia grew from local gangs in Sicily in the 1800s, into a loose but worldwide organisation in the 1900s.

    It’s a fascinating read if you’re that kind of person. Note that the author focuses mostly on the Sicilian mafia, and not the American offspring that was born in the early 1900s. Perfect vacation paperback read, I’d say.

    “The Godfather” by Mario Puzo

    Here we go. The absolute number one piece of mafia literature.

    I’ve seen the movie(s) countless of times, but still enjoyed the book a lot. That’s because Puzo’s language and skill in writing a captivating plot is outstanding. Everything is intense: the dialogue, the characters, the situations.

    It, naturally, does a better job telling the backstories of the characters of the Corleone crime family than the movies. I’m usually a sucker for the fates of “anti heroes”, such as Michael Corleone: about their early innocence, ascent to something they did not anticipate, and final fall from their throne (this is not pictured in “The Godfather”).

    In the end, what fascinates me with Puzo’s work is his way of creating emotional bonds between the reader and the characters (while you know they’re bad!) but in an ice cold way describe horrible fates and acts.

    “Herakles” by Theodor Kallifatides

    The author is born in Greece but now lives and works in Sweden. The book is a fiction novel about the Greek hero Hercules (“Herakles” in Swedish). I think everybody knows the core story, from the Disney movie or from the origin myth, in one way or another. This book is more detailed, dramatised version of the original story about the hero’s adventures.

    I’ve always loved reading about religion and myths. I recall revisiting a factbook about Greek mythology my parents had when I was little, so all the names are stuck with me.

    The book focuses on Hercules’ birth, upbringing, adventures, and death — an all the sorrow and tragedies therein. Greek mythology is full of tragedy! So when you read about our hero, there are a couple of moments of “Goddammit Hercules, now you really screwed up!”. And he screwed up a lot.

    I liked the personal tone the author writes in. The style is modern but serious. Howver, it still contains that sterile prose in the way that these old myths should be told in. “Oh, Hercules beat somebody to death with his bare hands. No big deal, carry on”. But “Herakles” manages to go beyond the regular death and violence in the myth, and add some everyday empathy for our hero. And that, I appreciate: some nuance.

    In the end, it’s a good story.

    “Normal People” by Sally Rooney

    A book praised by critics, winner of great awards, made into television series. “Normal People” is about a guy (Connell) and a girl (Marianne) in a high school in Ireland. They develop a non-trivial romantic and physical relationship, and we get to follow them over the years they’re together and apart.

    I like the very boiled down stories in these kinds of plots. The variations are usually infinite, and the quality of the work is determined by the prose and flow in the text. Sally Rooney writes wonderfully. The core plot of “boy and girl like each other but it’s complicated” is taken care of very delicately. As mentioned, everything is very boiled down, and the text follows both Connell and Marianne in their thoughts. The pacing is good, as a new chapter might bring a jump over a few years in their lives.

    The author manages to capture That Feeling that occurs in romantic relationships in the ages 18-30. On the inside, you’re ready to explode by a broken heart, but on the outside it’s “Oh god, why do you kids make it so complated?! Just talk to her/him!”. Stuff in “Normal People” is complicated. Rooney brings that forward, drags it out, and makes sure that the characters themselves don’t know what they want over the course of the novel.

    There’s also darkness in the shapes of abusive relationships, tragic family history, social class issues, depression, jealousy, drugs, and alcohol. The whole buffet of adolescent troubles, that is. The text treats these subjects in a very cold and objective manner. They are slowly appearing throughout the storyline, like bad mold spots in a cheese.

    I enjoyed this book. It doesn’t bring anything new to the table, but it doesn’t have to. The prose and the strong characters in Connell and Marianne do enough.

    (I actually watched the TV series before reading the book, and the former does a pretty good job capturing the bleakness and desperation from the book. The acting and camera in the series are terrific.)

    “About A Boy” by Nick Hornby

    I think most people have seen the film, but now I got around reading the book.

    It’s good. It’s fun. It’ll entertain you for some days. It’s got darkness coupled with absurdity, all tied together in weird conversations and thought patterns of the main characters. The Britishisms in Nick Hornby’s language are everywhere.

    I don’t think I have anything more to say.

    (Hugh Grant literally is Will Freeman to me.)

    “Jag Kan Ha Fel” by Björn Natthiko Lindeblad

    (This is a Swedish book 🇸🇪.)

    Björn dropped out of a brilliant career in economics in his mid-twenties and became a Buddhist monk in the jungles of Thailand. He stayed a monk for 17 years. This book is about his time as a monk, and what happened afterwards. Like raisins in the cake, he mixes in quotes, conversations, and thoughts from himself and Buddhist friends. To be honest, I came for “the wisdom”, but was touched by the author’s story.

    Björn received some help in writing the book, and the text is very tender, personal, and humorous. Björn has a lot of humour! This is also my first real look into a Buddhist monastery environment, and it’s very enlightening (pun intended). Björn’s story gave me a human insight into the Buddhist monk lifestyle and daily life. He attended both Western and Thai monasteries while in Thailand, and later moved to British and Swiss monasteries. It was really interesting to hear about the mix of different people in the Thai monasteries: they are very diverse. Both culture wise, but also in personalities, as some people really aren’t doing the hardcore, stereotypical monk thing. They’re just there because they had nothing else to do.

    The story is also personal, as it describes how Björn and his family dealt with the passing of his dad (by euthanasia). It continues with Björn finding love, and ultimately about his own fate in getting the diagnose of the ALS disease.

    Everything in this book is so human. It touches upon a lot of stages in life, and thanks to that concerns us all. Like a universal book in a very light hearted but well put language. The author isn’t out for doing some self-help Buddhist thing aimed at Western readers. It’s his own life where he shares his thoughts, fears, and experiences. It is what it is.

    (For Swedes, I recommend Björn’s talk in “P1 Sommar” from June, 2020.)

    \ No newline at end of file +Recently in books II / Johan Brook

    Recently in books II

    About 6 min reading time

    This is a long overdue post on some books I’ve read since the last update.

    “Ishmael” by Daniel Quinn

    My father in law borrowed me this one, not without a glimpse in his eye. It’s hard to describe this novel. It’s not what it seems to be in the first few pages, which is about a man who starts talking with a gorilla via telepathy. The bulk of the novel is the philosophical conversation between the odd couple, where the gorilla acts as the teacher for the man, who acts as narrator.

    My immediate thoughts about this book are these:

    1. It’s really “on topic” right now (year 2020).
    2. It’s eye opening, challenging, provoking, and story telling.

    For the first point: one of the book’s core themes is around planet Earth – the environment and how we humans are ruining it. Whereas other books in the climate genre is a lot of numbers and facts, “Ishmael” tells a different, more philosophical, story.

    The second point: the book does exactly what (I think) a philosophical novel should do. It taught me things and how to see myself, my culture, and whole of humanity and its history in a different light. I knew already that our modern culture — capitalist and infinte-growth aspiring — isn’t viable and sustainable. “Ishmael” confirms those thoughts by anchoring them in a spiritual and cultural arguments, using terms as Myths, Stories, and Cultures.

    The book affected me in the sense of reiterating that Balance is everything. Humans have messed up that ecological balance in nature, by telling ourselves we’re above the laws of nature, and that we possess the power of deciding over “who’s to die, and who’s to survive”.

    If you can bare with the kind of long introductory part, I’d really recommend getting through it. Pair it up with the popular science piece “Sapiens” for a full picture.

    “Cosa Nostra” by John Dickie

    A non-fiction book about the Sicilian mafia - the Cosa Nostra.

    I had a real “mobster Spring” where I went through a couple of mafia movies and books (this and the next one I write about below). Am I getting this old already?! I like good non-fiction books, and this one was good. It’s essentially about how the mafia grew from local gangs in Sicily in the 1800s, into a loose but worldwide organisation in the 1900s.

    It’s a fascinating read if you’re that kind of person. Note that the author focuses mostly on the Sicilian mafia, and not the American offspring that was born in the early 1900s. Perfect vacation paperback read, I’d say.

    “The Godfather” by Mario Puzo

    Here we go. The absolute number one piece of mafia literature.

    I’ve seen the movie(s) countless of times, but still enjoyed the book a lot. That’s because Puzo’s language and skill in writing a captivating plot is outstanding. Everything is intense: the dialogue, the characters, the situations.

    It, naturally, does a better job telling the backstories of the characters of the Corleone crime family than the movies. I’m usually a sucker for the fates of “anti heroes”, such as Michael Corleone: about their early innocence, ascent to something they did not anticipate, and final fall from their throne (this is not pictured in “The Godfather”).

    In the end, what fascinates me with Puzo’s work is his way of creating emotional bonds between the reader and the characters (while you know they’re bad!) but in an ice cold way describe horrible fates and acts.

    “Herakles” by Theodor Kallifatides

    The author is born in Greece but now lives and works in Sweden. The book is a fiction novel about the Greek hero Hercules (“Herakles” in Swedish). I think everybody knows the core story, from the Disney movie or from the origin myth, in one way or another. This book is more detailed, dramatised version of the original story about the hero’s adventures.

    I’ve always loved reading about religion and myths. I recall revisiting a factbook about Greek mythology my parents had when I was little, so all the names are stuck with me.

    The book focuses on Hercules’ birth, upbringing, adventures, and death — an all the sorrow and tragedies therein. Greek mythology is full of tragedy! So when you read about our hero, there are a couple of moments of “Goddammit Hercules, now you really screwed up!”. And he screwed up a lot.

    I liked the personal tone the author writes in. The style is modern but serious. Howver, it still contains that sterile prose in the way that these old myths should be told in. “Oh, Hercules beat somebody to death with his bare hands. No big deal, carry on”. But “Herakles” manages to go beyond the regular death and violence in the myth, and add some everyday empathy for our hero. And that, I appreciate: some nuance.

    In the end, it’s a good story.

    “Normal People” by Sally Rooney

    A book praised by critics, winner of great awards, made into television series. “Normal People” is about a guy (Connell) and a girl (Marianne) in a high school in Ireland. They develop a non-trivial romantic and physical relationship, and we get to follow them over the years they’re together and apart.

    I like the very boiled down stories in these kinds of plots. The variations are usually infinite, and the quality of the work is determined by the prose and flow in the text. Sally Rooney writes wonderfully. The core plot of “boy and girl like each other but it’s complicated” is taken care of very delicately. As mentioned, everything is very boiled down, and the text follows both Connell and Marianne in their thoughts. The pacing is good, as a new chapter might bring a jump over a few years in their lives.

    The author manages to capture That Feeling that occurs in romantic relationships in the ages 18-30. On the inside, you’re ready to explode by a broken heart, but on the outside it’s “Oh god, why do you kids make it so complated?! Just talk to her/him!”. Stuff in “Normal People” is complicated. Rooney brings that forward, drags it out, and makes sure that the characters themselves don’t know what they want over the course of the novel.

    There’s also darkness in the shapes of abusive relationships, tragic family history, social class issues, depression, jealousy, drugs, and alcohol. The whole buffet of adolescent troubles, that is. The text treats these subjects in a very cold and objective manner. They are slowly appearing throughout the storyline, like bad mold spots in a cheese.

    I enjoyed this book. It doesn’t bring anything new to the table, but it doesn’t have to. The prose and the strong characters in Connell and Marianne do enough.

    (I actually watched the TV series before reading the book, and the former does a pretty good job capturing the bleakness and desperation from the book. The acting and camera in the series are terrific.)

    “About A Boy” by Nick Hornby

    I think most people have seen the film, but now I got around reading the book.

    It’s good. It’s fun. It’ll entertain you for some days. It’s got darkness coupled with absurdity, all tied together in weird conversations and thought patterns of the main characters. The Britishisms in Nick Hornby’s language are everywhere.

    I don’t think I have anything more to say.

    (Hugh Grant literally is Will Freeman to me.)

    “Jag Kan Ha Fel” by Björn Natthiko Lindeblad

    (This is a Swedish book 🇸🇪.)

    Björn dropped out of a brilliant career in economics in his mid-twenties and became a Buddhist monk in the jungles of Thailand. He stayed a monk for 17 years. This book is about his time as a monk, and what happened afterwards. Like raisins in the cake, he mixes in quotes, conversations, and thoughts from himself and Buddhist friends. To be honest, I came for “the wisdom”, but was touched by the author’s story.

    Björn received some help in writing the book, and the text is very tender, personal, and humorous. Björn has a lot of humour! This is also my first real look into a Buddhist monastery environment, and it’s very enlightening (pun intended). Björn’s story gave me a human insight into the Buddhist monk lifestyle and daily life. He attended both Western and Thai monasteries while in Thailand, and later moved to British and Swiss monasteries. It was really interesting to hear about the mix of different people in the Thai monasteries: they are very diverse. Both culture wise, but also in personalities, as some people really aren’t doing the hardcore, stereotypical monk thing. They’re just there because they had nothing else to do.

    The story is also personal, as it describes how Björn and his family dealt with the passing of his dad (by euthanasia). It continues with Björn finding love, and ultimately about his own fate in getting the diagnose of the ALS disease.

    Everything in this book is so human. It touches upon a lot of stages in life, and thanks to that concerns us all. Like a universal book in a very light hearted but well put language. The author isn’t out for doing some self-help Buddhist thing aimed at Western readers. It’s his own life where he shares his thoughts, fears, and experiences. It is what it is.

    (For Swedes, I recommend Björn’s talk in “P1 Sommar” from June, 2020.)

    \ No newline at end of file diff --git a/writings/recently-in-books/index.html b/writings/recently-in-books/index.html index 2f2b7703d..bcd0060fc 100644 --- a/writings/recently-in-books/index.html +++ b/writings/recently-in-books/index.html @@ -1 +1 @@ -Recently in books / Johan Brook

    Recently in books

    About 4 min reading time

    The year started off with three weeks in Sri Lanka, where I naturally didn’t bring my laptop. I also only had phone internet while on wi-fi (didn’t buy a data plan), which was lovely. This, combined with early evenings, led me to read much more than during whole 2019.

    Here are the ones I worked through:

    “The Alchemist” — Paolo Coelho

    ★★★☆☆

    Summary: It’s nice to have read it, but once is enough.

    The modern classic. The one “everybody” have read. The book is very short and succinct. Coelho uses the story arc of a fable about a young herd boy, who sets out to find a treasure and follow his dreams, while being challenged with delays, hinders, and personal developments.

    I liked it a lot as a travel book. It suited me well while I stepped away from my everyday life in Stockholm. However, once I realised the meaning and aim with the book (which is pretty obvious), it became less interesting. It has a lot of “lessons” which the protagonist learns along the way, but after a while, it just felt very repetitive and flat. Everything is an allegory. Everything is a symbol for something else. I didn’t see how some global Force, which is mentioned throughout the book, could help me in everyday life.

    “The Zahir” — Paolo Coelho

    ★★☆☆☆

    Summary: Alright in the beginning, but becomes repetitive and flat.

    Another one by mr. Coelho. This one, I found in a “Free Books” box a long time ago, and decided to bring on the Sri Lanka trip. After The Alchemist above, it felt nice to continue with the same author in the same writing style. Again, this is an okay book to have while travelling. It’s about how a man deals with the sudden disappearance of his wife; about finding clues and explanations of her behaviour. Then it becomes, like The Alchemist, a pilgrimage.

    The Zahir in the beginning started out alright. Then it escalated in the same New Age style Coelho had in his other books, about “the power of love” which I thought never had any substance and backing by the author. On top of that, it became obvious that the books is very autobiographical. The main protagonist’s story strongly resembles the career of the author, which makes the whole book seem egoistical and self centered. The text isn’t that shy with sharing details about the finances, luxury life, and sexual conquests of the protagonist/Coelho. It just shines through very much, which makes the book less likable.

    “The Snow Leopard” — Peter Matthiessen

    ★★★★☆

    Summary: Long sentences aside, I thought The Snow Leopard is a beautiful book about nature – both human and the one surrounding us.

    The subjects this book has in common with the two previous ones are spirituality and pilgrimage (a funny coincidence, actually). Whereas Coelho’s writing is based in an “idea world”, Matthiessen’s style is more tangible — more based in our physical world.

    The Snow Leopard is a non-fiction account of a 1973 expedition the author and naturalist George Schaller made to Nepal, with the objective of studying the Himalayan “blue sheep” in their natural habitat. For Matthiessen, the journey was a spiritual one, driven by the deep interest Buddhism and Zen, in the aftermaths of his wife’s death in cancer some year before. As the title prescribes, a “side quest” of the expidition is to get a glimpse of the mythical Snow Leopard, which becomes a symbol of the inner journey of the author.

    We get to follow the hardships of the two month long trip through the Himalayan mountains in western Nepal. The language is old fashioned but elegant, and the author describes the mountains with great skill (I say, without having been there!). The two Americans travel with porters, carrying the equipment, and Sherpas: the local people of the mountains, often hired as guides. The myriad of villages they pass through is described in detail by Matthiessen, as well as the surrounding landscapes. Once in a while, he goes off in a flashback to the last months of his wife’s suffering. More often, he describes Buddhist history of the country, and his Zen practices of meditation and quest for tranquility.

    For me, many topics in the book landed on the subject of acceptance. Total acceptance of the state of things and all beings. Total acceptance of the various mishaps during their trip, as well as keeping zero expectations around seeing the shy Snow Leopard. I feel this “expectation management” can be applied to modern life by anybody.

    Peter Matthiessen is not afraid to describe himself in bad manner: the frustration, the pettiness, the eagerness, the anxiety over his wife’s death. He’s open about all these things. I appreciate honesty and writing about things that are true. It’s not hard to note the Zen undertones everywhere (Matthiessen went off becoming a Zen priest himself), which creates a larger-than-life feel to the text. After finishing the book, it really felt like having been on an adventure.

    It could be a slow read though. It’s not a “page turner”, but doesn’t try to be either. There are long sentences and descriptions which might scare people off. Don’t be in a hurry. Hopefully, it’ll open one’s eyes more to Zen literature (it did for me).

    Men Without Women — Haruki Murakami

    ★★★★★

    Summary: A beautiful short story collection with a shared theme. It’s full of great story telling, repressed emotions, and ultimately void.

    Haruki Murakami has written this short story collection which shares its name with Hemingway’s second collection of stories around a similar theme. I picked it out in the pocket shop before the trip by two reasons:

    1. I had a faint memory of reading good reviews about this Murakami.
    2. I like short stories — nicer to invest time in a few pages rather than a full novel. Short stories are often succinct and to the point. Great short stories often are incredibly sharp but still subtle.

    The last sentence is so very true in Men Without Women. Murakami’s writing is full of wit, build-ups, and intense story telling. It’s obviously hard to describe the plot in a collection like this, but as mentioned, they all share a common theme around male protagonists. They all have lost, are on the look for, or have rejected women in their lives.

    The main thing is Murakami’s great skill in describing these fates, as well as his great source of fantasy. There are some weird twists and turns of the stories, and all in all it’s great writing. For me, I felt once more that human beings are so damned interesting.

    \ No newline at end of file +Recently in books / Johan Brook

    Recently in books

    About 4 min reading time

    The year started off with three weeks in Sri Lanka, where I naturally didn’t bring my laptop. I also only had phone internet while on wi-fi (didn’t buy a data plan), which was lovely. This, combined with early evenings, led me to read much more than during whole 2019.

    Here are the ones I worked through:

    “The Alchemist” — Paolo Coelho

    ★★★☆☆

    Summary: It’s nice to have read it, but once is enough.

    The modern classic. The one “everybody” have read. The book is very short and succinct. Coelho uses the story arc of a fable about a young herd boy, who sets out to find a treasure and follow his dreams, while being challenged with delays, hinders, and personal developments.

    I liked it a lot as a travel book. It suited me well while I stepped away from my everyday life in Stockholm. However, once I realised the meaning and aim with the book (which is pretty obvious), it became less interesting. It has a lot of “lessons” which the protagonist learns along the way, but after a while, it just felt very repetitive and flat. Everything is an allegory. Everything is a symbol for something else. I didn’t see how some global Force, which is mentioned throughout the book, could help me in everyday life.

    “The Zahir” — Paolo Coelho

    ★★☆☆☆

    Summary: Alright in the beginning, but becomes repetitive and flat.

    Another one by mr. Coelho. This one, I found in a “Free Books” box a long time ago, and decided to bring on the Sri Lanka trip. After The Alchemist above, it felt nice to continue with the same author in the same writing style. Again, this is an okay book to have while travelling. It’s about how a man deals with the sudden disappearance of his wife; about finding clues and explanations of her behaviour. Then it becomes, like The Alchemist, a pilgrimage.

    The Zahir in the beginning started out alright. Then it escalated in the same New Age style Coelho had in his other books, about “the power of love” which I thought never had any substance and backing by the author. On top of that, it became obvious that the books is very autobiographical. The main protagonist’s story strongly resembles the career of the author, which makes the whole book seem egoistical and self centered. The text isn’t that shy with sharing details about the finances, luxury life, and sexual conquests of the protagonist/Coelho. It just shines through very much, which makes the book less likable.

    “The Snow Leopard” — Peter Matthiessen

    ★★★★☆

    Summary: Long sentences aside, I thought The Snow Leopard is a beautiful book about nature – both human and the one surrounding us.

    The subjects this book has in common with the two previous ones are spirituality and pilgrimage (a funny coincidence, actually). Whereas Coelho’s writing is based in an “idea world”, Matthiessen’s style is more tangible — more based in our physical world.

    The Snow Leopard is a non-fiction account of a 1973 expedition the author and naturalist George Schaller made to Nepal, with the objective of studying the Himalayan “blue sheep” in their natural habitat. For Matthiessen, the journey was a spiritual one, driven by the deep interest Buddhism and Zen, in the aftermaths of his wife’s death in cancer some year before. As the title prescribes, a “side quest” of the expidition is to get a glimpse of the mythical Snow Leopard, which becomes a symbol of the inner journey of the author.

    We get to follow the hardships of the two month long trip through the Himalayan mountains in western Nepal. The language is old fashioned but elegant, and the author describes the mountains with great skill (I say, without having been there!). The two Americans travel with porters, carrying the equipment, and Sherpas: the local people of the mountains, often hired as guides. The myriad of villages they pass through is described in detail by Matthiessen, as well as the surrounding landscapes. Once in a while, he goes off in a flashback to the last months of his wife’s suffering. More often, he describes Buddhist history of the country, and his Zen practices of meditation and quest for tranquility.

    For me, many topics in the book landed on the subject of acceptance. Total acceptance of the state of things and all beings. Total acceptance of the various mishaps during their trip, as well as keeping zero expectations around seeing the shy Snow Leopard. I feel this “expectation management” can be applied to modern life by anybody.

    Peter Matthiessen is not afraid to describe himself in bad manner: the frustration, the pettiness, the eagerness, the anxiety over his wife’s death. He’s open about all these things. I appreciate honesty and writing about things that are true. It’s not hard to note the Zen undertones everywhere (Matthiessen went off becoming a Zen priest himself), which creates a larger-than-life feel to the text. After finishing the book, it really felt like having been on an adventure.

    It could be a slow read though. It’s not a “page turner”, but doesn’t try to be either. There are long sentences and descriptions which might scare people off. Don’t be in a hurry. Hopefully, it’ll open one’s eyes more to Zen literature (it did for me).

    Men Without Women — Haruki Murakami

    ★★★★★

    Summary: A beautiful short story collection with a shared theme. It’s full of great story telling, repressed emotions, and ultimately void.

    Haruki Murakami has written this short story collection which shares its name with Hemingway’s second collection of stories around a similar theme. I picked it out in the pocket shop before the trip by two reasons:

    1. I had a faint memory of reading good reviews about this Murakami.
    2. I like short stories — nicer to invest time in a few pages rather than a full novel. Short stories are often succinct and to the point. Great short stories often are incredibly sharp but still subtle.

    The last sentence is so very true in Men Without Women. Murakami’s writing is full of wit, build-ups, and intense story telling. It’s obviously hard to describe the plot in a collection like this, but as mentioned, they all share a common theme around male protagonists. They all have lost, are on the look for, or have rejected women in their lives.

    The main thing is Murakami’s great skill in describing these fates, as well as his great source of fantasy. There are some weird twists and turns of the stories, and all in all it’s great writing. For me, I felt once more that human beings are so damned interesting.

    \ No newline at end of file diff --git a/writings/redesigned-and-reimagined/index.html b/writings/redesigned-and-reimagined/index.html index 05cb88485..07f5ad841 100644 --- a/writings/redesigned-and-reimagined/index.html +++ b/writings/redesigned-and-reimagined/index.html @@ -1 +1 @@ -Redesigned & Reimagined / Johan Brook

    Redesigned & Reimagined

    About 1 min reading time

    So I redesigned my site. It’s close to one year since my last post, and I actually feel itchy to write things again (mostly for my own sake).

    I wanted a small place online which could act as my “home”. A thing I want to take care of, update, and iterate on. Much has happened in my life, and that wasn’t reflected in the past site.

    I’ve “worked” on this site since last August (“And all you could do was this?!”), and built it with Metalsmith. The source is at GitHub if you’re interested. I also managed to fix one of these RSS feeds if you wanna subscribe.

    Cheerio!

    \ No newline at end of file +Redesigned & Reimagined / Johan Brook

    Redesigned & Reimagined

    About 1 min reading time

    So I redesigned my site. It’s close to one year since my last post, and I actually feel itchy to write things again (mostly for my own sake).

    I wanted a small place online which could act as my “home”. A thing I want to take care of, update, and iterate on. Much has happened in my life, and that wasn’t reflected in the past site.

    I’ve “worked” on this site since last August (“And all you could do was this?!”), and built it with Metalsmith. The source is at GitHub if you’re interested. I also managed to fix one of these RSS feeds if you wanna subscribe.

    Cheerio!

    \ No newline at end of file diff --git a/writings/redesigned/index.html b/writings/redesigned/index.html index 839a1593b..1953aaf19 100644 --- a/writings/redesigned/index.html +++ b/writings/redesigned/index.html @@ -1 +1 @@ -Redesigned / Johan Brook

    Redesigned

    About 5 min reading time

    You know how it is with redesigns — they’re like drugs to a designer. Some last longer than others, but soon enough you’ll need your fix. My site is always in constant redesign mode, with a goal to not have to make another redesign. Actually when it comes to site redesigns, I think it’s quite incorrect to call it a redesign. Quite blurry, to be honest. To realign the elements sounds better to me — to take a look at the old site and ask yourself: “What’s working in this design, and what’s not?”. It’s a constant iteration thing, and I’ve tried to bring the elements and concepts I liked the most from the old design into this one.

    Anyway, time for the nitty gritty. Why a new design? I could actually only find one single answer: I had grown tired of the old, quite inflexible, design, and new I could create a better one. The new one (I’ll call it ‘Fluid’ from now on) is more conventional (centered, a real sidebar), and is held together a bit more with the help from the body wrapper. I’ve got more space for stuff (like Topics in the sidebar) but am still keeping the minimalism to some extent.

    History

    I was initially planning to move my whole site over to GitHub Pages and publish everything as static files with the help from the stunningly cool Jekyll. I’ve always used Wordpress for this site, since it was (still is) the only CMS that was easy and straight-forward enough to use for a personal site and on a cheap shared host, but during the years I’ve started to grown tired of Wordpress and all it’s quirky annoyances. It’s bloated, poorly written, and it’s PHP. Every year I promise myself to get a freaking VPS already and get started with Ruby, Python or some other nice language or platform … Anyway: Jekyll along with GitHub Pages worked really good. Believe me, you’ll get turned on handling your whole site in static files. No database dabbling whatsoever. Everything managed with git. Writing every new post in Markdown and storing it on your own harddrive is such a cool thing, and we haven’t even got into all the hacky things you can do with a couple of scripts.

    However, after playing with Jekyll for a while, I realized I needed more. I’m still a Ruby newbie, and I had to write some stuff on my own to get Jekyll to behave as I wanted, but there were even more stuff to do. Stuff I didn’t have the skills or time to solve when working with my personal site. I also realized I had to do tons of redirection work to avoid having Google get all confused over the new structure and permalinks. When moving around things in Wordpress, the backend automatically does these redirections for you. I decided to go back to Wordpress (for now).

    The beta site I made with Jekyll before moving on to Wordpress may be viewed at http://beta.johanbrook.com/ (Source: https://github.com/johanbrook/johanbrook.github.com).

    Now the site runs Wordpress 3.1.1 with lots of finetuned performance optimizations to make it lightning fast.

    Site structure

    A big difference from the old design is that I now show all the latest posts on the frontpage. I couldn’t see why not, so why not? Makes everything a bit more dynamic and inviting. My portfolio is at the Work page.

    Posts

    I’ve removed the custom post type ‘Quickies’. I used Quickies for posting short, often linked, posts about stuff that interested me. The regular Posts were meant for longer pieces. I built that back when Post Formats had yet to arrive in Wordpress, and there were no other way to separate the different types of posts. But the Custom Post Types functionality is quite harsh on separating things — the line between Posts and Quickies became too thick. Now all posts are in a single feed like they should be.

    Topics

    Topics weren’t that prioritized in the old design. In Fluid I use them more extensively — they are even in the permalinks.

    Typography

    For the last two designs I’ve used Droid Serif as my main serif body font, and Helvetica Neue for the sans-serif (never really liked Helvetica for main body font — hard on the eyes to read longer paragraphs). In Fluid I wanted change, and am using PT Sans for main copy, and Droid Serif for smaller serif variations. However, there’s still Helvetica Neue for the H1 headings. Just couldn’t get rid of my darling Helvetica Neue Medium ( font-weight: 500 ). Visit any page to view the beautiful heading font (if you don’t have Helvetica Neue Medium, the regular weight will be used instead).

    Responsive

    The old left-aligned design wasn’t that flexible when building responsive styles. Looking at my Google Analytics stats (and the web in general) it’s clear that mobile devices are the future, and refusing to adapt to that equals doom. This site is completely fluid and responsive, try resize the browser window, and I’m quite happy with the result. The most important part is to completely switch over to percentage values in the CSS. Pixels are non-fluid and too absolute. If you think it’s tedious calculating percentage values for all elements, use a CSS preprocessing tool instead (like Sass — it’ll help you with some more dynamic CSS).

    The design accomodates sizes for desktops, tablets, and mobiles (both in landscape and portrait mode). Go try it out.

    Markup, CSS, Javascript and more

    The markup is HTML5 (“sort of valid”, with the exception for the OpenGraph meta tags I’m using in the header: Validation results for Johanbrook.com). CSS3 is used for styling, and I’ve embedded hCards and used ARIA roles for accessibility. Looks good in Chrome, Safari, Firefox, Opera (I have yet to test in IE — not that much of priority for this site).

    A quite fun thing are the CSS animations on the homepage and About page. Nice, subtly and degrades gracefully. The fade-in on the About page only runs once per session with the help from sessionStorage, so you won’t be annoyed with having to see the animation every time you view the About page.

    I’ve also created a Humans.txt file for the site. Check it out here.

    Feeds

    For anyone who wants to subscribe to this site, please visit http://johanbrook.com/feed for all posts. Feeds per topic are available by appending ‘/feed’ to the topic permalink ( http://johanbrook.com/topic/minimalism/feed/ for instance).

    Javascript

    There are not too many things going on here — just some small pieces of script doing this and that, in fluid.js. I’m using the superb Hashgrid for showing different grids as overlays on the site. Press and hold the G key on your keyboard to view the basic six column grid. Pin it with the H key and cycle through more grids with the J key. Pretty neat.

    Apart from that, there’s just this Ajax thing I’m doing in the sidebar to show the latest song I’ve listened to. I’m pulling the data from Last.fm with a PHP proxy, formatting it as nice JSON, and put it in the page with a Mustache template (with ICanHaz.js). You can also tell when I’m listening to a song with the pulsating (CSS3 animation) speaker icon just below.

    As a matter of fact, there’s a quite cool thing I’m doing in a single post view when reading on an iPad. Swiping left or right on an article will slide the text out and take you to the next or previous article. How awesome is that? Check it out. I’ll probably write about it in a post soon.

    All Javascript is concatenated into a single file with Sprockets and minified with Uglify.js. I do this with a Rake task.

    Challenges

    I hate designing for myself. I’m never happy. I hate to balance between showing off crazy web design skills or going minimal. I hate to kill my darlings in the pursuit of perfection. I hate to look at other web designers’ personal sites and be depressed over their beauty. So I stopped doing all that. I went my own way, promising myself that nothing is set in stone — I’ll do another redesign when I’m inspired. There’s no need for perfection (I’m not even sure perfection is achieveable by us) — just creating great things is what matters.

    I like this design though. It’ll be flexible enough to evolve nicely. If you got down this far; thank for reading this! I appreciate it. Don’t hesitate to contact me with issues or questions.

    \ No newline at end of file +Redesigned / Johan Brook

    Redesigned

    About 5 min reading time

    You know how it is with redesigns — they’re like drugs to a designer. Some last longer than others, but soon enough you’ll need your fix. My site is always in constant redesign mode, with a goal to not have to make another redesign. Actually when it comes to site redesigns, I think it’s quite incorrect to call it a redesign. Quite blurry, to be honest. To realign the elements sounds better to me — to take a look at the old site and ask yourself: “What’s working in this design, and what’s not?”. It’s a constant iteration thing, and I’ve tried to bring the elements and concepts I liked the most from the old design into this one.

    Anyway, time for the nitty gritty. Why a new design? I could actually only find one single answer: I had grown tired of the old, quite inflexible, design, and new I could create a better one. The new one (I’ll call it ‘Fluid’ from now on) is more conventional (centered, a real sidebar), and is held together a bit more with the help from the body wrapper. I’ve got more space for stuff (like Topics in the sidebar) but am still keeping the minimalism to some extent.

    History

    I was initially planning to move my whole site over to GitHub Pages and publish everything as static files with the help from the stunningly cool Jekyll. I’ve always used Wordpress for this site, since it was (still is) the only CMS that was easy and straight-forward enough to use for a personal site and on a cheap shared host, but during the years I’ve started to grown tired of Wordpress and all it’s quirky annoyances. It’s bloated, poorly written, and it’s PHP. Every year I promise myself to get a freaking VPS already and get started with Ruby, Python or some other nice language or platform … Anyway: Jekyll along with GitHub Pages worked really good. Believe me, you’ll get turned on handling your whole site in static files. No database dabbling whatsoever. Everything managed with git. Writing every new post in Markdown and storing it on your own harddrive is such a cool thing, and we haven’t even got into all the hacky things you can do with a couple of scripts.

    However, after playing with Jekyll for a while, I realized I needed more. I’m still a Ruby newbie, and I had to write some stuff on my own to get Jekyll to behave as I wanted, but there were even more stuff to do. Stuff I didn’t have the skills or time to solve when working with my personal site. I also realized I had to do tons of redirection work to avoid having Google get all confused over the new structure and permalinks. When moving around things in Wordpress, the backend automatically does these redirections for you. I decided to go back to Wordpress (for now).

    The beta site I made with Jekyll before moving on to Wordpress may be viewed at http://beta.johanbrook.com/ (Source: https://github.com/johanbrook/johanbrook.github.com).

    Now the site runs Wordpress 3.1.1 with lots of finetuned performance optimizations to make it lightning fast.

    Site structure

    A big difference from the old design is that I now show all the latest posts on the frontpage. I couldn’t see why not, so why not? Makes everything a bit more dynamic and inviting. My portfolio is at the Work page.

    Posts

    I’ve removed the custom post type ‘Quickies’. I used Quickies for posting short, often linked, posts about stuff that interested me. The regular Posts were meant for longer pieces. I built that back when Post Formats had yet to arrive in Wordpress, and there were no other way to separate the different types of posts. But the Custom Post Types functionality is quite harsh on separating things — the line between Posts and Quickies became too thick. Now all posts are in a single feed like they should be.

    Topics

    Topics weren’t that prioritized in the old design. In Fluid I use them more extensively — they are even in the permalinks.

    Typography

    For the last two designs I’ve used Droid Serif as my main serif body font, and Helvetica Neue for the sans-serif (never really liked Helvetica for main body font — hard on the eyes to read longer paragraphs). In Fluid I wanted change, and am using PT Sans for main copy, and Droid Serif for smaller serif variations. However, there’s still Helvetica Neue for the H1 headings. Just couldn’t get rid of my darling Helvetica Neue Medium ( font-weight: 500 ). Visit any page to view the beautiful heading font (if you don’t have Helvetica Neue Medium, the regular weight will be used instead).

    Responsive

    The old left-aligned design wasn’t that flexible when building responsive styles. Looking at my Google Analytics stats (and the web in general) it’s clear that mobile devices are the future, and refusing to adapt to that equals doom. This site is completely fluid and responsive, try resize the browser window, and I’m quite happy with the result. The most important part is to completely switch over to percentage values in the CSS. Pixels are non-fluid and too absolute. If you think it’s tedious calculating percentage values for all elements, use a CSS preprocessing tool instead (like Sass — it’ll help you with some more dynamic CSS).

    The design accomodates sizes for desktops, tablets, and mobiles (both in landscape and portrait mode). Go try it out.

    Markup, CSS, Javascript and more

    The markup is HTML5 (“sort of valid”, with the exception for the OpenGraph meta tags I’m using in the header: Validation results for Johanbrook.com). CSS3 is used for styling, and I’ve embedded hCards and used ARIA roles for accessibility. Looks good in Chrome, Safari, Firefox, Opera (I have yet to test in IE — not that much of priority for this site).

    A quite fun thing are the CSS animations on the homepage and About page. Nice, subtly and degrades gracefully. The fade-in on the About page only runs once per session with the help from sessionStorage, so you won’t be annoyed with having to see the animation every time you view the About page.

    I’ve also created a Humans.txt file for the site. Check it out here.

    Feeds

    For anyone who wants to subscribe to this site, please visit http://johanbrook.com/feed for all posts. Feeds per topic are available by appending ‘/feed’ to the topic permalink ( http://johanbrook.com/topic/minimalism/feed/ for instance).

    Javascript

    There are not too many things going on here — just some small pieces of script doing this and that, in fluid.js. I’m using the superb Hashgrid for showing different grids as overlays on the site. Press and hold the G key on your keyboard to view the basic six column grid. Pin it with the H key and cycle through more grids with the J key. Pretty neat.

    Apart from that, there’s just this Ajax thing I’m doing in the sidebar to show the latest song I’ve listened to. I’m pulling the data from Last.fm with a PHP proxy, formatting it as nice JSON, and put it in the page with a Mustache template (with ICanHaz.js). You can also tell when I’m listening to a song with the pulsating (CSS3 animation) speaker icon just below.

    As a matter of fact, there’s a quite cool thing I’m doing in a single post view when reading on an iPad. Swiping left or right on an article will slide the text out and take you to the next or previous article. How awesome is that? Check it out. I’ll probably write about it in a post soon.

    All Javascript is concatenated into a single file with Sprockets and minified with Uglify.js. I do this with a Rake task.

    Challenges

    I hate designing for myself. I’m never happy. I hate to balance between showing off crazy web design skills or going minimal. I hate to kill my darlings in the pursuit of perfection. I hate to look at other web designers’ personal sites and be depressed over their beauty. So I stopped doing all that. I went my own way, promising myself that nothing is set in stone — I’ll do another redesign when I’m inspired. There’s no need for perfection (I’m not even sure perfection is achieveable by us) — just creating great things is what matters.

    I like this design though. It’ll be flexible enough to evolve nicely. If you got down this far; thank for reading this! I appreciate it. Don’t hesitate to contact me with issues or questions.

    \ No newline at end of file diff --git a/writings/regular-people-and-web-standards/index.html b/writings/regular-people-and-web-standards/index.html index 9990ec4ed..b49282433 100644 --- a/writings/regular-people-and-web-standards/index.html +++ b/writings/regular-people-and-web-standards/index.html @@ -1 +1 @@ -Regular people and web standards / Johan Brook

    Regular people and web standards

    About 1 min reading time

    Follow link to webdesignerdepot.com →

    But the ugly truth is that the average Joe Client simply doesn’t care. Joe is looking not for a compliant website, but for an effective website. Good post on why web designers shouldn’t get too excited about their beloved web standards and semantics. Clients want great looking web sites that accomplish their goals. We should however use standards in order to achieve that — a well written, compatible, usable, accessible, future-proof web site. The post brings up exactly that: how we need to explain to the client how the underlying code and the designer’s excessive relationship to semantics can help the client and in the end save more money (which is almost always the single biggest factor).

    \ No newline at end of file +Regular people and web standards / Johan Brook

    Regular people and web standards

    About 1 min reading time

    Follow link to webdesignerdepot.com →

    But the ugly truth is that the average Joe Client simply doesn’t care. Joe is looking not for a compliant website, but for an effective website. Good post on why web designers shouldn’t get too excited about their beloved web standards and semantics. Clients want great looking web sites that accomplish their goals. We should however use standards in order to achieve that — a well written, compatible, usable, accessible, future-proof web site. The post brings up exactly that: how we need to explain to the client how the underlying code and the designer’s excessive relationship to semantics can help the client and in the end save more money (which is almost always the single biggest factor).

    \ No newline at end of file diff --git a/writings/relative-positioning-and-css-columns/index.html b/writings/relative-positioning-and-css-columns/index.html index 913fae614..549a9ae56 100644 --- a/writings/relative-positioning-and-css-columns/index.html +++ b/writings/relative-positioning-and-css-columns/index.html @@ -6,4 +6,4 @@ .columns * { position: static; } -

    .. solves the problems, if you still have position: relative declared globally. I won’t.

    \ No newline at end of file +

    .. solves the problems, if you still have position: relative declared globally. I won’t.

    \ No newline at end of file diff --git a/writings/remote-pair-programming/index.html b/writings/remote-pair-programming/index.html index 60a38341e..794109aa9 100644 --- a/writings/remote-pair-programming/index.html +++ b/writings/remote-pair-programming/index.html @@ -1 +1 @@ -Better Remote Pair Programming / Johan Brook

    Better Remote Pair Programming

    About 4 min reading time

    Pair programming is the concept of two developers working together, in real-time, on the same code base on the same device. There are some variations and techniques that vary from organisation to organisation around pair programming, but to me, it boils down to the concept of “Two brains are better than one, depending on the problem”. A spin-off is mob programming, where the whole team works on the same thing.

    Pair programming is ideal when onboarding a new developer into a code base by solving a problem, like building a new feature or fixing a bug. In day-to-day work, pair programming is helpful in capturing bugs that a single developer wouldn’t had noticed. It’s also great for reasoning about high level strategic parts of the code together with another developer.

    This post isn’t about the pros and cons of pair programming (there are a ton of material to digest about that online).

    But what about remote work and pair programming? Since the physical aspect of traditional pairing is one of the main pros, it has been hard to replicate when all developers are working remote.

    Background

    At work, we started a project where we needed to start off with a whole new code base. The task at hand involved rewriting an existing web frontend in React views, built on a functional reactive software pattern. We also had to integrate it against our existing Meteor backend, for data loading and user authentication. Finally, it needed to talk with an in-house WebRTC service.

    So we had a few unknowns:

    1. How do we handle TypeScript compilation in the existing code base?
    2. How to intergrate new React views in the Meteor frontend?
    3. How to drive the frontend state from the Meteor backend?
    4. How to manage frontend state and WebRTC connections with the functional reactive pattern?

    I had an inkling on how to solve 1) and 2). I had very little experience in 3) and 4). A colleague, who was a big driver behind the functional reactive pattern, had expertise in 3) and 4). But due to our remote setup at the company, we couldn’t sit down for a hack day and flesh things out together.

    The problems

    The problems with remote and pair programming are thus:

    1. Not being in the same physical space — tricker to have high bandwidth communication.
    2. Cannot work on the same computer.
    3. Cannot with ease see what the other developer is seeing.

    “Okay, Johan”, you say. “You can remedy at least 2) and 3) in that list with remote control applications and screensharing”. Yes you can! That’s precisely what this post is about ✨

    The solutions

    What if I told you that you can pair program like you’re pair writing on a Google Doc, right from inside your code editor?

    Well, you can.

    Me and my colleague landed on these two tools:

    • VS Code
    • Slack voice call

    Co-operating on the code

    This was the deal breaker for us: how to co-operate on the code base without introducing old school solutions like remote control software? We wanted this to feel like your own editor, even you were remote.

    Luckily, the developers behind the popular editors Atom and VS Code have worked on this.

    We’ve only used VS Code, so I’m going to cover that only in this post.

    VS Code’s Live Share works like this:

    1. One developer hosts a session on their computer, by installing the extension.
    2. The developer hits “Share” in the editor’s bottom status bar. VS Code will ask them to auth with GitHub or Windows Live (yea, right…).
    3. Once that’s done, VS Code puts a link in the clipboard, and the developer can send it to co-workers. Hitting the “Share” button again brings up a menu to manage the sharing session.
    VS Code

    You can now:

    • Co-edit
    • Co-debug
    • Share a server
    • Share a terminal

    When your co-developer joins, they can navigate your workspace right from within their own editor.

    Talking along the way

    The solution here is to set up a voice or video call on the side of VS Code or Atom. It’s really great to be able to talk alongside working with the code with your colleague.

    Conclusion

    Just because you’re working remote doesn’t have to mean that you’re “on your own” with tricky code problems. It’s totally doable to pair program when you’re stuck, or need guidance in a new system or programming language. Existing solutions include screen sharing and remote control and all kinds of boring setups. Having code sharing right from within your editor is really great, which makes it easier to focus on the code and collaboration. The fact that you are working remote won’t matter when your colleague is just a link away from your editor.

    Some features are still lacking in the VS Code extension to make it feel “just like my own editor”. The most annoying one is that the guest isn’t able to jump between files. And I’d love a nicer way to highlight “Here I am!” from within the editor, since you’re probably gonna jump around in the project structure.

    Appendix

    • On the tech side, I’m not sure exactly how VS Code has built the code sharing architecture. There’s no open source repository for the project, except for a documentation repo. That’s too bad… The Atom folks have built their system in WebRTC, where the initial handshake goes to their servers, but the actual code sharing goes over Peer-to-peer connect to avoid any middle men.
    • We experienced some weird bug in VS Code at the time of writing where the text editor would freak out when one of us hit cmd+z to undo a text input. The editor would go haywire and delete most of the code written to that point. But then it was magically restored.
    \ No newline at end of file +Better Remote Pair Programming / Johan Brook

    Better Remote Pair Programming

    About 4 min reading time

    Pair programming is the concept of two developers working together, in real-time, on the same code base on the same device. There are some variations and techniques that vary from organisation to organisation around pair programming, but to me, it boils down to the concept of “Two brains are better than one, depending on the problem”. A spin-off is mob programming, where the whole team works on the same thing.

    Pair programming is ideal when onboarding a new developer into a code base by solving a problem, like building a new feature or fixing a bug. In day-to-day work, pair programming is helpful in capturing bugs that a single developer wouldn’t had noticed. It’s also great for reasoning about high level strategic parts of the code together with another developer.

    This post isn’t about the pros and cons of pair programming (there are a ton of material to digest about that online).

    But what about remote work and pair programming? Since the physical aspect of traditional pairing is one of the main pros, it has been hard to replicate when all developers are working remote.

    Background

    At work, we started a project where we needed to start off with a whole new code base. The task at hand involved rewriting an existing web frontend in React views, built on a functional reactive software pattern. We also had to integrate it against our existing Meteor backend, for data loading and user authentication. Finally, it needed to talk with an in-house WebRTC service.

    So we had a few unknowns:

    1. How do we handle TypeScript compilation in the existing code base?
    2. How to intergrate new React views in the Meteor frontend?
    3. How to drive the frontend state from the Meteor backend?
    4. How to manage frontend state and WebRTC connections with the functional reactive pattern?

    I had an inkling on how to solve 1) and 2). I had very little experience in 3) and 4). A colleague, who was a big driver behind the functional reactive pattern, had expertise in 3) and 4). But due to our remote setup at the company, we couldn’t sit down for a hack day and flesh things out together.

    The problems

    The problems with remote and pair programming are thus:

    1. Not being in the same physical space — tricker to have high bandwidth communication.
    2. Cannot work on the same computer.
    3. Cannot with ease see what the other developer is seeing.

    “Okay, Johan”, you say. “You can remedy at least 2) and 3) in that list with remote control applications and screensharing”. Yes you can! That’s precisely what this post is about ✨

    The solutions

    What if I told you that you can pair program like you’re pair writing on a Google Doc, right from inside your code editor?

    Well, you can.

    Me and my colleague landed on these two tools:

    • VS Code
    • Slack voice call

    Co-operating on the code

    This was the deal breaker for us: how to co-operate on the code base without introducing old school solutions like remote control software? We wanted this to feel like your own editor, even you were remote.

    Luckily, the developers behind the popular editors Atom and VS Code have worked on this.

    We’ve only used VS Code, so I’m going to cover that only in this post.

    VS Code’s Live Share works like this:

    1. One developer hosts a session on their computer, by installing the extension.
    2. The developer hits “Share” in the editor’s bottom status bar. VS Code will ask them to auth with GitHub or Windows Live (yea, right…).
    3. Once that’s done, VS Code puts a link in the clipboard, and the developer can send it to co-workers. Hitting the “Share” button again brings up a menu to manage the sharing session.
    VS Code

    You can now:

    • Co-edit
    • Co-debug
    • Share a server
    • Share a terminal

    When your co-developer joins, they can navigate your workspace right from within their own editor.

    Talking along the way

    The solution here is to set up a voice or video call on the side of VS Code or Atom. It’s really great to be able to talk alongside working with the code with your colleague.

    Conclusion

    Just because you’re working remote doesn’t have to mean that you’re “on your own” with tricky code problems. It’s totally doable to pair program when you’re stuck, or need guidance in a new system or programming language. Existing solutions include screen sharing and remote control and all kinds of boring setups. Having code sharing right from within your editor is really great, which makes it easier to focus on the code and collaboration. The fact that you are working remote won’t matter when your colleague is just a link away from your editor.

    Some features are still lacking in the VS Code extension to make it feel “just like my own editor”. The most annoying one is that the guest isn’t able to jump between files. And I’d love a nicer way to highlight “Here I am!” from within the editor, since you’re probably gonna jump around in the project structure.

    Appendix

    • On the tech side, I’m not sure exactly how VS Code has built the code sharing architecture. There’s no open source repository for the project, except for a documentation repo. That’s too bad… The Atom folks have built their system in WebRTC, where the initial handshake goes to their servers, but the actual code sharing goes over Peer-to-peer connect to avoid any middle men.
    • We experienced some weird bug in VS Code at the time of writing where the text editor would freak out when one of us hit cmd+z to undo a text input. The editor would go haywire and delete most of the code written to that point. But then it was magically restored.
    \ No newline at end of file diff --git a/writings/responsive-web-design-the-infinite-grid-and-water/index.html b/writings/responsive-web-design-the-infinite-grid-and-water/index.html index cbd08c6f1..085133d75 100644 --- a/writings/responsive-web-design-the-infinite-grid-and-water/index.html +++ b/writings/responsive-web-design-the-infinite-grid-and-water/index.html @@ -1 +1 @@ -Responsive web design – the infinite grid and water / Johan Brook

    Responsive web design – the infinite grid and water

    About 1 min reading time

    Follow link to alistapart.com →

    Water’s state change is caused by the rearrangement of its molecules. When an infinite grid changes state, we rearrange its components.

    Chris Armstrong Great comparison.

    \ No newline at end of file +Responsive web design – the infinite grid and water / Johan Brook

    Responsive web design – the infinite grid and water

    About 1 min reading time

    Follow link to alistapart.com →

    Water’s state change is caused by the rearrangement of its molecules. When an infinite grid changes state, we rearrange its components.

    Chris Armstrong Great comparison.

    \ No newline at end of file diff --git a/writings/retro-airline-bags/index.html b/writings/retro-airline-bags/index.html index 5a636fe3e..a8b4713e9 100644 --- a/writings/retro-airline-bags/index.html +++ b/writings/retro-airline-bags/index.html @@ -1 +1 @@ -Retro airline bags / Johan Brook

    Retro airline bags

    About 1 min reading time

    Follow link to airlinesoriginals.com →

    Swiss Air retro bag I like these retro bags with different airline logos on them. Really stylish designs, but the question is: do you choose with your head (the nicest airline) or by heart (the nicest design) — or both?

    \ No newline at end of file +Retro airline bags / Johan Brook

    Retro airline bags

    About 1 min reading time

    Follow link to airlinesoriginals.com →

    Swiss Air retro bag I like these retro bags with different airline logos on them. Really stylish designs, but the question is: do you choose with your head (the nicest airline) or by heart (the nicest design) — or both?

    \ No newline at end of file diff --git a/writings/rolling-stones-gimme-shelter-deconstructed/index.html b/writings/rolling-stones-gimme-shelter-deconstructed/index.html index 26c05cd7a..8997161e7 100644 --- a/writings/rolling-stones-gimme-shelter-deconstructed/index.html +++ b/writings/rolling-stones-gimme-shelter-deconstructed/index.html @@ -1 +1 @@ -Rolling Stones' "Gimme Shelter" deconstructed / Johan Brook

    Rolling Stones' "Gimme Shelter" deconstructed

    About 1 min reading time

    Follow link to dangerousminds.net →

    I think “Gimme Shelter” is a great song. It’s sort of apocalyptic and majestic, and got that unique rhythm and a great lead guitar. But we’re not even talking about Jagger and Merry Clayton’s performances. God, especially the latter’s when her voice cracks around 3:00 into the song. I’ve always been fascinated with the different parts of the song — the individual instruments. Now somebody has deconstructed “Gimme Shelter” — isolated the different studio tracks, i.e. the vocals, the bass, the drums, the guitars etc. It’s really cool and interesting to see what makes a song. Below is the vocals and Keith Richards’ rhythm guitar. Follow the link for more. Update: Are they kidding me? The clips are removed due to copyright infringement. So very bad.

    \ No newline at end of file +Rolling Stones' "Gimme Shelter" deconstructed / Johan Brook

    Rolling Stones' "Gimme Shelter" deconstructed

    About 1 min reading time

    Follow link to dangerousminds.net →

    I think “Gimme Shelter” is a great song. It’s sort of apocalyptic and majestic, and got that unique rhythm and a great lead guitar. But we’re not even talking about Jagger and Merry Clayton’s performances. God, especially the latter’s when her voice cracks around 3:00 into the song. I’ve always been fascinated with the different parts of the song — the individual instruments. Now somebody has deconstructed “Gimme Shelter” — isolated the different studio tracks, i.e. the vocals, the bass, the drums, the guitars etc. It’s really cool and interesting to see what makes a song. Below is the vocals and Keith Richards’ rhythm guitar. Follow the link for more. Update: Are they kidding me? The clips are removed due to copyright infringement. So very bad.

    \ No newline at end of file diff --git a/writings/rss-is-not-dying-its-being-ignored/index.html b/writings/rss-is-not-dying-its-being-ignored/index.html index bd6f56737..a78e0bcaf 100644 --- a/writings/rss-is-not-dying-its-being-ignored/index.html +++ b/writings/rss-is-not-dying-its-being-ignored/index.html @@ -1 +1 @@ -RSS is not dying, it's being ignored / Johan Brook

    RSS is not dying, it's being ignored

    About 1 min reading time

    Follow link to camendesign.com →

    Really great article on the state of RSS. I’ve seen many posts claiming “RSS is dead”, but to me it’s absolutely not dead — the technology is everywhere on the web! It’s built in inside every major blog system, CMS, web framework and web app. That’s not a dead technology. The problem is, as the article puts it, that RSS hasn’t received the widespread user base it deserves. It’s being ignored, and failed by browser vendors and others.

    We lose the ability for websites to push updates to us on their own terms and infrastructure, rather than through closed APIs and flavour-of-the-month platforms. Read the article. I especially love the author’s brainstorming about possible browser features built with RSS. I’ve had a post about RSS in this article’s style in my head since last summer (was gonna name it “RSS Is Not Dead”) but this one nails it.

    \ No newline at end of file +RSS is not dying, it's being ignored / Johan Brook

    RSS is not dying, it's being ignored

    About 1 min reading time

    Follow link to camendesign.com →

    Really great article on the state of RSS. I’ve seen many posts claiming “RSS is dead”, but to me it’s absolutely not dead — the technology is everywhere on the web! It’s built in inside every major blog system, CMS, web framework and web app. That’s not a dead technology. The problem is, as the article puts it, that RSS hasn’t received the widespread user base it deserves. It’s being ignored, and failed by browser vendors and others.

    We lose the ability for websites to push updates to us on their own terms and infrastructure, rather than through closed APIs and flavour-of-the-month platforms. Read the article. I especially love the author’s brainstorming about possible browser features built with RSS. I’ve had a post about RSS in this article’s style in my head since last summer (was gonna name it “RSS Is Not Dead”) but this one nails it.

    \ No newline at end of file diff --git a/writings/sass-32-placeholders-and-object-oriented-css/index.html b/writings/sass-32-placeholders-and-object-oriented-css/index.html index 7b6beb07f..995eef70a 100644 --- a/writings/sass-32-placeholders-and-object-oriented-css/index.html +++ b/writings/sass-32-placeholders-and-object-oriented-css/index.html @@ -1 +1 @@ -Sass 3.2 Placeholders and Object-Oriented CSS / Johan Brook

    Sass 3.2 Placeholders and Object-Oriented CSS

    About 1 min reading time

    Follow link to ianstormtaylor.com →

    Ian Storm Taylor on how to use Sass 3.2′s Placeholder feature together with Object-Oriented CSS (OOCSS), in order to create a clutter-free HTML presentation as well as semantic CSS classes. I immediately thought of Placeholders as the abstract classes in object-oriented programming languages, such as Java — they’re only used to inherit from.

    I also like the shift from clinically clean HTML — stripped from all classes — to a more semantic thinking which tells us that a bunch of classes in our HTML aren’t that bad if they’re semantic and makes sense (boy aren’t I just tossing the word semantic around?). You can always rely on classes. HTML elements might change, but their styling will stay the same if you apply the same class on the new element, for instance.

    Thanks to Sass and some planning, I think you’re able to pull off some pretty sweet reusable CSS in the end.

    \ No newline at end of file +Sass 3.2 Placeholders and Object-Oriented CSS / Johan Brook

    Sass 3.2 Placeholders and Object-Oriented CSS

    About 1 min reading time

    Follow link to ianstormtaylor.com →

    Ian Storm Taylor on how to use Sass 3.2′s Placeholder feature together with Object-Oriented CSS (OOCSS), in order to create a clutter-free HTML presentation as well as semantic CSS classes. I immediately thought of Placeholders as the abstract classes in object-oriented programming languages, such as Java — they’re only used to inherit from.

    I also like the shift from clinically clean HTML — stripped from all classes — to a more semantic thinking which tells us that a bunch of classes in our HTML aren’t that bad if they’re semantic and makes sense (boy aren’t I just tossing the word semantic around?). You can always rely on classes. HTML elements might change, but their styling will stay the same if you apply the same class on the new element, for instance.

    Thanks to Sass and some planning, I think you’re able to pull off some pretty sweet reusable CSS in the end.

    \ No newline at end of file diff --git a/writings/send-urls-from-ios-to-desktop-browser/index.html b/writings/send-urls-from-ios-to-desktop-browser/index.html index 055136d1c..897aeb39a 100644 --- a/writings/send-urls-from-ios-to-desktop-browser/index.html +++ b/writings/send-urls-from-ios-to-desktop-browser/index.html @@ -7,4 +7,4 @@ file.close end -

    It’s minimal, hacky and lovely. I’ll never stop being amazed over the power of Dropbox and Automator.

    \ No newline at end of file +

    It’s minimal, hacky and lovely. I’ll never stop being amazed over the power of Dropbox and Automator.

    \ No newline at end of file diff --git a/writings/shipped-with-fear/index.html b/writings/shipped-with-fear/index.html index 597041388..4f32d4f74 100644 --- a/writings/shipped-with-fear/index.html +++ b/writings/shipped-with-fear/index.html @@ -1 +1 @@ -Shipped with fear / Johan Brook

    Shipped with fear

    About 3 min reading time

    There is a thing that every developer has to do at some point — ship. By ship I refer to the act of deploying, pushing the button, publishing your work for a wide mass. This act is central in our industry: blog posts like this one have been written, there have been talks on the subjects, and methodologies (like Continous Delivery, Continous Integration) invented to deal with the pain points associated with shipping. Hell, there are even roles (devops, sysops) for easening the burden of moving code from one system to another. Why, oh why are we conscious and sometimes afraid of shipping our work?

    Environments of success

    At Lookback, we try to continously ship stuff to production. We’ve got three environments: testing, staging, and production. Nothing unusual. We use feature branches that we independently deploy to any of these environments. We merge to master, which is considered stable, when we’ve confirmed the bug or feature. This means we can comfortably try out things in testing and staging and be somewhat sure of that it’ll work in production, as long as things like environment variables and database migrations have run (note how I casually mentioned those potentially big factors?). We’ve got a script for rolling back to the version before the deployed bundle, in case hell breaks loose and we need to quickly restore.

    That’s the background.

    An anecdote

    The thing is: everybody screw up sometime. It might be a premature deploy before thorough QA, poorly written code which crash in other environments than your own. There are many reasons. But the important thing is not to let it get to you.

    Don’t tell my team mates, but some nights ago I deployed code that broke the emoji feature in our production web app. It was a regular expression that went haywire for some production data I had neglected, and I quickly rolled back, branched off (this was already merged to master), and continued to push code to the testing environment (with real data this time).

    This has happened many times before, and every time I feel kind of slapped in the face. Brought down to earth again. It’s like somebody’s saying “Hey, sonny boy! Don’t walk around thinkin’ you can casually push to production without something going wrong! It’s bound to happen, ya know”. And after every time I tend to be much less liberal in my deploys to production (until I forget about the incident).

    I often compare this with how it was when I was a kid, and went skiing downhill (who am I kidding, I still feel like this at grown age). I would be cocky and go down this huge hill and get totally pounded. “Hey kid! Don’t fucking think you’re gonna be able to go down here ten times without falling once! It’s bound to happen, ya know”. I’d then have deep respect for the hill, and be afraid to go up there, since I was burned once.

    See the similarity?

    What to do

    I must never, ever become afraid to deploy. The best medicin is to do it often: small, atomical fixes and features that will get your spirit up again — to confirm that you’re still okay. The worst thing that can happen (engineering wise) in a fast moving startup is loss of momentum — that we stop deploying to our customers. That we collect these balls of code mud which we push after testing them internally for some weeks or months. Especially for the web, which is ideal for continously dark deploying to (transparent changes, no need to update any native app code).

    But of course: my aim as a developer is to be able to write such solid systems that don’t causes major breakage when deployed. I want to be able to trust myself and the workflow well enough to be sure and confident when deploying. Some good recipes for that is the aforementioned environment setup (“test first — confirm on staging — deploy to production”), solid QA, code reviews, and so on.

    Developers fear change, new things, refactoring, deploying. But we must constantly expose ourselves to this in order to grow and win over those fears, and learn how to make the wise decision when the day comes to make a really big, important decision.

    \ No newline at end of file +Shipped with fear / Johan Brook

    Shipped with fear

    About 3 min reading time

    There is a thing that every developer has to do at some point — ship. By ship I refer to the act of deploying, pushing the button, publishing your work for a wide mass. This act is central in our industry: blog posts like this one have been written, there have been talks on the subjects, and methodologies (like Continous Delivery, Continous Integration) invented to deal with the pain points associated with shipping. Hell, there are even roles (devops, sysops) for easening the burden of moving code from one system to another. Why, oh why are we conscious and sometimes afraid of shipping our work?

    Environments of success

    At Lookback, we try to continously ship stuff to production. We’ve got three environments: testing, staging, and production. Nothing unusual. We use feature branches that we independently deploy to any of these environments. We merge to master, which is considered stable, when we’ve confirmed the bug or feature. This means we can comfortably try out things in testing and staging and be somewhat sure of that it’ll work in production, as long as things like environment variables and database migrations have run (note how I casually mentioned those potentially big factors?). We’ve got a script for rolling back to the version before the deployed bundle, in case hell breaks loose and we need to quickly restore.

    That’s the background.

    An anecdote

    The thing is: everybody screw up sometime. It might be a premature deploy before thorough QA, poorly written code which crash in other environments than your own. There are many reasons. But the important thing is not to let it get to you.

    Don’t tell my team mates, but some nights ago I deployed code that broke the emoji feature in our production web app. It was a regular expression that went haywire for some production data I had neglected, and I quickly rolled back, branched off (this was already merged to master), and continued to push code to the testing environment (with real data this time).

    This has happened many times before, and every time I feel kind of slapped in the face. Brought down to earth again. It’s like somebody’s saying “Hey, sonny boy! Don’t walk around thinkin’ you can casually push to production without something going wrong! It’s bound to happen, ya know”. And after every time I tend to be much less liberal in my deploys to production (until I forget about the incident).

    I often compare this with how it was when I was a kid, and went skiing downhill (who am I kidding, I still feel like this at grown age). I would be cocky and go down this huge hill and get totally pounded. “Hey kid! Don’t fucking think you’re gonna be able to go down here ten times without falling once! It’s bound to happen, ya know”. I’d then have deep respect for the hill, and be afraid to go up there, since I was burned once.

    See the similarity?

    What to do

    I must never, ever become afraid to deploy. The best medicin is to do it often: small, atomical fixes and features that will get your spirit up again — to confirm that you’re still okay. The worst thing that can happen (engineering wise) in a fast moving startup is loss of momentum — that we stop deploying to our customers. That we collect these balls of code mud which we push after testing them internally for some weeks or months. Especially for the web, which is ideal for continously dark deploying to (transparent changes, no need to update any native app code).

    But of course: my aim as a developer is to be able to write such solid systems that don’t causes major breakage when deployed. I want to be able to trust myself and the workflow well enough to be sure and confident when deploying. Some good recipes for that is the aforementioned environment setup (“test first — confirm on staging — deploy to production”), solid QA, code reviews, and so on.

    Developers fear change, new things, refactoring, deploying. But we must constantly expose ourselves to this in order to grow and win over those fears, and learn how to make the wise decision when the day comes to make a really big, important decision.

    \ No newline at end of file diff --git a/writings/signal-vs-noise/index.html b/writings/signal-vs-noise/index.html index 7ae8acb20..20f8b5db6 100644 --- a/writings/signal-vs-noise/index.html +++ b/writings/signal-vs-noise/index.html @@ -1 +1 @@ -Signal vs. Noise / Johan Brook

    Signal vs. Noise

    About 1 min reading time

    Follow link to 37signals.com →

    37signals is really on fire with their blog, “Signal vs. Noise”. Lots of insightful and interesting posts about mixed subjects recently. Don’t miss it.

    \ No newline at end of file +Signal vs. Noise / Johan Brook

    Signal vs. Noise

    About 1 min reading time

    Follow link to 37signals.com →

    37signals is really on fire with their blog, “Signal vs. Noise”. Lots of insightful and interesting posts about mixed subjects recently. Don’t miss it.

    \ No newline at end of file diff --git a/writings/software-is-handcrafted/index.html b/writings/software-is-handcrafted/index.html index 9d0a9ec5e..f252c5391 100644 --- a/writings/software-is-handcrafted/index.html +++ b/writings/software-is-handcrafted/index.html @@ -1 +1 @@ -Software is handcrafted / Johan Brook

    Software is handcrafted

    About 1 min reading time

    Follow link to scottporad.com →

    First, name one other thing in the world, he said, that is used by so many people and which is created entirely by hand? Stuff that is made by hand is hard to make, and even more hard to make well, and tends to be less sturdy than things made by machines. I hadn’t thought of this either – how all code in the software we build is handcrafted. Read the post, its arguments are true and insightful.

    \ No newline at end of file +Software is handcrafted / Johan Brook

    Software is handcrafted

    About 1 min reading time

    Follow link to scottporad.com →

    First, name one other thing in the world, he said, that is used by so many people and which is created entirely by hand? Stuff that is made by hand is hard to make, and even more hard to make well, and tends to be less sturdy than things made by machines. I hadn’t thought of this either – how all code in the software we build is handcrafted. Read the post, its arguments are true and insightful.

    \ No newline at end of file diff --git a/writings/some-things-ive-learnt-about-programming/index.html b/writings/some-things-ive-learnt-about-programming/index.html index bcd0886c0..48915e8bc 100644 --- a/writings/some-things-ive-learnt-about-programming/index.html +++ b/writings/some-things-ive-learnt-about-programming/index.html @@ -1 +1 @@ -"Some things I've learnt about programming" / Johan Brook

    "Some things I've learnt about programming"

    About 1 min reading time

    Follow link to blog.jgc.org →

    To my mind that’s a craft. I think the best programmers are closer to watchmakers than bridge builders or physicists. Sure, it looks like it’s science or engineering because of the application of logic and mathematics, but at its core it’s taking tools in your hands (almost) and crafting something. So many gems in there.

    \ No newline at end of file +"Some things I've learnt about programming" / Johan Brook

    "Some things I've learnt about programming"

    About 1 min reading time

    Follow link to blog.jgc.org →

    To my mind that’s a craft. I think the best programmers are closer to watchmakers than bridge builders or physicists. Sure, it looks like it’s science or engineering because of the application of logic and mathematics, but at its core it’s taking tools in your hands (almost) and crafting something. So many gems in there.

    \ No newline at end of file diff --git a/writings/songs-to-code-by/index.html b/writings/songs-to-code-by/index.html index 7e93071c2..9b5585cde 100644 --- a/writings/songs-to-code-by/index.html +++ b/writings/songs-to-code-by/index.html @@ -1 +1 @@ -Songs to code by / Johan Brook

    Songs to code by

    About 1 min reading time

    Music has a strong influence on a myriad of things. Art, writing, exercise, studying. It might help you focus, relax, cheer up. And most important: it could help you write badass code.

    Music I program to

    I’ve set up a Spotify playlist where I collect great programming tunes. Mostly techno and other computer related genres.

    Programming playlist by Johan Opens Spotify

    I especially like the Tron soundtrack (who doesn’t), Nine Inch Nails and Daft Punk. It’s hard not to feel the kick when these epic melodies are doing their thing.

    Also check out the site who inspired this post: Musicforprogramming();. Free MP3 downloads. The official Portal soundtrack is also really, really cool.

    Other notable playlists to check out:

    More suggestions on great programming songs are welcomed!

    \ No newline at end of file +Songs to code by / Johan Brook

    Songs to code by

    About 1 min reading time

    Music has a strong influence on a myriad of things. Art, writing, exercise, studying. It might help you focus, relax, cheer up. And most important: it could help you write badass code.

    Music I program to

    I’ve set up a Spotify playlist where I collect great programming tunes. Mostly techno and other computer related genres.

    Programming playlist by Johan Opens Spotify

    I especially like the Tron soundtrack (who doesn’t), Nine Inch Nails and Daft Punk. It’s hard not to feel the kick when these epic melodies are doing their thing.

    Also check out the site who inspired this post: Musicforprogramming();. Free MP3 downloads. The official Portal soundtrack is also really, really cool.

    Other notable playlists to check out:

    More suggestions on great programming songs are welcomed!

    \ No newline at end of file diff --git a/writings/spotify-revamps-the-free-and-open-options/index.html b/writings/spotify-revamps-the-free-and-open-options/index.html index bdf988820..dcfb14d33 100644 --- a/writings/spotify-revamps-the-free-and-open-options/index.html +++ b/writings/spotify-revamps-the-free-and-open-options/index.html @@ -1 +1 @@ -Spotify revamps the Free and Open options / Johan Brook

    Spotify revamps the Free and Open options

    About 1 min reading time

    Follow link to spotify.com →

    Spotify is a revolutionary service which has done most things right. A great native, desktop application and a companion iPhone/Android/other smartphones app makes it the most tasteful music streaming service from my point of view. It’s been quite controversial offering users free and unlimited streaming of almost all music in the world, if you were willing to put up with a few ads. Up until now. One of the co-founders, Daniel Ek, posted on the Spotify blog that the Free and Open options will see some changes effective May 1st. These changes doesn’t affect new users – the ones who has set up their accounts on or after November 1st – for another six months. Free or Open accounts created before November 1st will be able to play each track in the catalogue for free up to 5 times, and the total listening time per month will be 10 hours. Sounds shocking in the sense that Spotify has always been completely free with the Free options since it launched, but I completely understand and encourage Spotify’s decision. They need income, as every other company. Sure, you get lots of goodwill and good karma from regular people who just wants to listen to music for free, but where’s the profit in that? Ads can’t pay everything. They’re still keeping the Free option, of course, but a little bit stripped down to lead people into the Unlimited or Premium options. Seriously: 50-100 SEK per month isn’t a big deal for unlimited music. Today’s news certainly pushed me to upgrade.

    \ No newline at end of file +Spotify revamps the Free and Open options / Johan Brook

    Spotify revamps the Free and Open options

    About 1 min reading time

    Follow link to spotify.com →

    Spotify is a revolutionary service which has done most things right. A great native, desktop application and a companion iPhone/Android/other smartphones app makes it the most tasteful music streaming service from my point of view. It’s been quite controversial offering users free and unlimited streaming of almost all music in the world, if you were willing to put up with a few ads. Up until now. One of the co-founders, Daniel Ek, posted on the Spotify blog that the Free and Open options will see some changes effective May 1st. These changes doesn’t affect new users – the ones who has set up their accounts on or after November 1st – for another six months. Free or Open accounts created before November 1st will be able to play each track in the catalogue for free up to 5 times, and the total listening time per month will be 10 hours. Sounds shocking in the sense that Spotify has always been completely free with the Free options since it launched, but I completely understand and encourage Spotify’s decision. They need income, as every other company. Sure, you get lots of goodwill and good karma from regular people who just wants to listen to music for free, but where’s the profit in that? Ads can’t pay everything. They’re still keeping the Free option, of course, but a little bit stripped down to lead people into the Unlimited or Premium options. Seriously: 50-100 SEK per month isn’t a big deal for unlimited music. Today’s news certainly pushed me to upgrade.

    \ No newline at end of file diff --git a/writings/spotimood/index.html b/writings/spotimood/index.html index 95edc1b54..6b585a3e4 100644 --- a/writings/spotimood/index.html +++ b/writings/spotimood/index.html @@ -1 +1 @@ -Spotimood / Johan Brook

    Spotimood

    About 1 min reading time

    Spotimood

    As with most of us, I love music. It’s around me all day long, in different situations and moods. Spotify has changed the way I consume music — I think it’s a wonderful and cool service. Almost all of the world’s music served for me in an application for desktop, mobile and tablets. And what’s cool with Spotify is the fun things you can do with it, if you’re a developer.

    I’ve created Spotimood (spotimood.johanbrook.com), which is a simple crowd-sourced web app for collecting different types of music into “activities”.

    I have playlists for different situations, moods and activities, such as cooking, studying, partying, and more. It’s great just being able to kick off a playlist with suitable songs for a given situation. But discovering new music is tricky, and especially music for a certain mood. Instead, Spotimood lets you suggest songs for an activity for everybody to see (and hear).

    Technically, it’s really simple. It’s a small Rails app with some tables. Nothing fancy. I didn’t even have to build a bridge to Spotify’s web API, since I’m using their Play Button for showing the list of songs in an activity. It’s a really cool technology, since whenever a visitor plays a song from Spotimood, it’ll play locally in the Spotify client. Really seamless and nice.

    So please go ahead and use Spotimood. Suggest and discover new songs. And give me a shout with any app suggestions or bugs.

    \ No newline at end of file +Spotimood / Johan Brook

    Spotimood

    About 1 min reading time

    Spotimood

    As with most of us, I love music. It’s around me all day long, in different situations and moods. Spotify has changed the way I consume music — I think it’s a wonderful and cool service. Almost all of the world’s music served for me in an application for desktop, mobile and tablets. And what’s cool with Spotify is the fun things you can do with it, if you’re a developer.

    I’ve created Spotimood (spotimood.johanbrook.com), which is a simple crowd-sourced web app for collecting different types of music into “activities”.

    I have playlists for different situations, moods and activities, such as cooking, studying, partying, and more. It’s great just being able to kick off a playlist with suitable songs for a given situation. But discovering new music is tricky, and especially music for a certain mood. Instead, Spotimood lets you suggest songs for an activity for everybody to see (and hear).

    Technically, it’s really simple. It’s a small Rails app with some tables. Nothing fancy. I didn’t even have to build a bridge to Spotify’s web API, since I’m using their Play Button for showing the list of songs in an activity. It’s a really cool technology, since whenever a visitor plays a song from Spotimood, it’ll play locally in the Spotify client. Really seamless and nice.

    So please go ahead and use Spotimood. Suggest and discover new songs. And give me a shout with any app suggestions or bugs.

    \ No newline at end of file diff --git a/writings/start-a-facetime-call-from-uri-in-browser/index.html b/writings/start-a-facetime-call-from-uri-in-browser/index.html index fe1bca9b9..b684a4fcd 100644 --- a/writings/start-a-facetime-call-from-uri-in-browser/index.html +++ b/writings/start-a-facetime-call-from-uri-in-browser/index.html @@ -1 +1 @@ -Start a Facetime call from URI in browser / Johan Brook

    Start a Facetime call from URI in browser

    About 1 min reading time

    Facetime in both OS X and iOS responds to the URI scheme facetime://appleid or facetime://emailaddress or facetime://phonenumber.

    \ No newline at end of file +Start a Facetime call from URI in browser / Johan Brook

    Start a Facetime call from URI in browser

    About 1 min reading time

    Facetime in both OS X and iOS responds to the URI scheme facetime://appleid or facetime://emailaddress or facetime://phonenumber.

    \ No newline at end of file diff --git a/writings/staying-hungry-and-evolving-with-new-technologies/index.html b/writings/staying-hungry-and-evolving-with-new-technologies/index.html index 2640f31c4..2789b4dc7 100644 --- a/writings/staying-hungry-and-evolving-with-new-technologies/index.html +++ b/writings/staying-hungry-and-evolving-with-new-technologies/index.html @@ -55,4 +55,4 @@

    And run the :build task from the command line:

    $ rake build

    … and all of the above are executed. Actually, it’s not even required to have a :build task: instead specify a default task like this:

    task :default => [:concat, :minify, :sass]

    Now those three tasks will be executed whenever you run rake (without anything else) in the command prompt.

    I learned the basics of Rake from googling around for tutorials, and I encourage you to do the same. This is an excellent walkthrough of the features you most likely will use on an everyday basis.

    RubyGems and Node Package Manager

    Remembered when code libraries where distributed in zip files? Download, unzip, place in a library directory, keep track of new versions. Nah, things could work better. RubyGems is a command line utility which makes this a breeze. Each library (or package of code) is a gem. You install gems by typing

    $ gem install <name>
-

    Simple, simple, simple. Wanna install the latest Rails? Run gem install rails ( RubyGem page). The Twitter gem? gem install twitter ( RubyGem page). It’s a superb way of distributing code. Those libraries might be used on the command line (like Sass and Compass) or in code (or both).

    Node Package Manager (or “NPM”) is similar to RubyGems, but for Javascript libraries (built with Node.js). Haven’t dealt a whole lot with NPM so far, but it gets the job done.

    Outro

    Expose yourself to new technologies. They might help you and the way you work, and not the least: expanding your knowledge, experience, and flexibility. Don’t be intimidated by unknown concepts and tools — experiment a bit.

    You’ll be more attractive as well: a designer knowing his/her way around Sass, Git, and Rails templates? A godsend gift for any developer! It works the other way around too: a developer appreciating typography, colour theory, and more.

    Ignorance is a sin. Stay hungry.

    \ No newline at end of file +

    Simple, simple, simple. Wanna install the latest Rails? Run gem install rails ( RubyGem page). The Twitter gem? gem install twitter ( RubyGem page). It’s a superb way of distributing code. Those libraries might be used on the command line (like Sass and Compass) or in code (or both).

    Node Package Manager (or “NPM”) is similar to RubyGems, but for Javascript libraries (built with Node.js). Haven’t dealt a whole lot with NPM so far, but it gets the job done.

    Outro

    Expose yourself to new technologies. They might help you and the way you work, and not the least: expanding your knowledge, experience, and flexibility. Don’t be intimidated by unknown concepts and tools — experiment a bit.

    You’ll be more attractive as well: a designer knowing his/her way around Sass, Git, and Rails templates? A godsend gift for any developer! It works the other way around too: a developer appreciating typography, colour theory, and more.

    Ignorance is a sin. Stay hungry.

    \ No newline at end of file diff --git a/writings/stop-solving-problems-you-dont-have/index.html b/writings/stop-solving-problems-you-dont-have/index.html index bd0c2bb7e..e547e587f 100644 --- a/writings/stop-solving-problems-you-dont-have/index.html +++ b/writings/stop-solving-problems-you-dont-have/index.html @@ -1 +1 @@ -"Stop solving problems you don't have" / Johan Brook

    "Stop solving problems you don't have"

    About 1 min reading time

    Follow link to rachelandrew.co.uk →

    Rachel Andrew on adding bloat and more code in the very beginning of a project, since you might need it. Got to the post via Roger Johansson’s link titled Use only what you need, which I recommend.

    I’m indeed interested in reading about new techniques and ways of setting up new web projects as smooth as possible, but as I’ve “grown older” I haven’t tried out every obscure boilerplate out there. They say Hell is other people’s code, and it’s indeed true with HTML and CSS. Those technologies are a huge part of what I do, and some frameworks and boilerplates feels awkward to use. It’s a different case with backend code libraries, which act like black boxes where you use to interface with something.

    To me, a boilerplate for a project should be personal and tailored. I’ve before made the mistake of using my own huge boilerplate which included the latest and greatest HTML5 templates, CSS framework written in SCSS, and some custom Javascript fixes. Everytime I started off a new project I had to change, remove or add stuff. No project is thus the same.

    Nowadays I add stuff (polyfills, shims, fixes, Javascript) as I go — when I need it.

    I actually don’t like Twitter’s Bootstrap at all

    \ No newline at end of file +"Stop solving problems you don't have" / Johan Brook

    "Stop solving problems you don't have"

    About 1 min reading time

    Follow link to rachelandrew.co.uk →

    Rachel Andrew on adding bloat and more code in the very beginning of a project, since you might need it. Got to the post via Roger Johansson’s link titled Use only what you need, which I recommend.

    I’m indeed interested in reading about new techniques and ways of setting up new web projects as smooth as possible, but as I’ve “grown older” I haven’t tried out every obscure boilerplate out there. They say Hell is other people’s code, and it’s indeed true with HTML and CSS. Those technologies are a huge part of what I do, and some frameworks and boilerplates feels awkward to use. It’s a different case with backend code libraries, which act like black boxes where you use to interface with something.

    To me, a boilerplate for a project should be personal and tailored. I’ve before made the mistake of using my own huge boilerplate which included the latest and greatest HTML5 templates, CSS framework written in SCSS, and some custom Javascript fixes. Everytime I started off a new project I had to change, remove or add stuff. No project is thus the same.

    Nowadays I add stuff (polyfills, shims, fixes, Javascript) as I go — when I need it.

    I actually don’t like Twitter’s Bootstrap at all

    \ No newline at end of file diff --git a/writings/streamlines-another-kind-of-twitter-client/index.html b/writings/streamlines-another-kind-of-twitter-client/index.html index a77daee7a..f74a13533 100644 --- a/writings/streamlines-another-kind-of-twitter-client/index.html +++ b/writings/streamlines-another-kind-of-twitter-client/index.html @@ -1 +1 @@ -Streamlines – another kind of Twitter client / Johan Brook

    Streamlines – another kind of Twitter client

    About 1 min reading time

    Follow link to stevestreza.com →

    Developer Steve Streza shows us the Twitter client for iOS he’s been building for the last two years (!), but now announces dead. It’s got quite an innovative UI, and mind he began working on it before the real flood of Twitter clients for iPhone came along, and maybe most important: before Tweetie for iPhone became Twitter for iPhone. Streamlines does not only show you your Twitter stream: you’re able to incorporate Facebook friends as well, and even merge them together into one. The UI sounds really interesting as Streza chose to avoid the common tab bars and instead use a “card interface with a horizontal swipe, similar to the iPhone’s Weather app or WebOS’ multitasking UI”.

    \ No newline at end of file +Streamlines – another kind of Twitter client / Johan Brook

    Streamlines – another kind of Twitter client

    About 1 min reading time

    Follow link to stevestreza.com →

    Developer Steve Streza shows us the Twitter client for iOS he’s been building for the last two years (!), but now announces dead. It’s got quite an innovative UI, and mind he began working on it before the real flood of Twitter clients for iPhone came along, and maybe most important: before Tweetie for iPhone became Twitter for iPhone. Streamlines does not only show you your Twitter stream: you’re able to incorporate Facebook friends as well, and even merge them together into one. The UI sounds really interesting as Streza chose to avoid the common tab bars and instead use a “card interface with a horizontal swipe, similar to the iPhone’s Weather app or WebOS’ multitasking UI”.

    \ No newline at end of file diff --git a/writings/styled-components-vdom/index.html b/writings/styled-components-vdom/index.html index ef3dca1ca..87498882b 100644 --- a/writings/styled-components-vdom/index.html +++ b/writings/styled-components-vdom/index.html @@ -181,4 +181,4 @@ return domTag(...tagArgsToPass); }; -

    Conclusion

    What I like with this approach is the simplicity: many people understand the concept of composition. I’m sure this kind of enhancement functions exist for React and other virtual DOMs, but this really is something you can hack together on your own, since it’s “just” functions!

    What we’ve achieved is:

    Thanks for reading!

    \ No newline at end of file +

    Conclusion

    What I like with this approach is the simplicity: many people understand the concept of composition. I’m sure this kind of enhancement functions exist for React and other virtual DOMs, but this really is something you can hack together on your own, since it’s “just” functions!

    What we’ve achieved is:

    Thanks for reading!

    \ No newline at end of file diff --git a/writings/sublime-text-deno/index.html b/writings/sublime-text-deno/index.html index 39998f5d2..071473fd6 100644 --- a/writings/sublime-text-deno/index.html +++ b/writings/sublime-text-deno/index.html @@ -80,4 +80,4 @@ ] } } -

    I guess one has to update the versions in there manually, but the package wouldn’t follow the URL linked from Deno’s documentation page, probably since it redirects: https://deno.land/x/deno/cli/schemas/config-file.v1.json.

    That’s it! Let me know if you’ve got more tricks for working with Deno in Sublime.

    \ No newline at end of file +

    I guess one has to update the versions in there manually, but the package wouldn’t follow the URL linked from Deno’s documentation page, probably since it redirects: https://deno.land/x/deno/cli/schemas/config-file.v1.json.

    That’s it! Let me know if you’ve got more tricks for working with Deno in Sublime.

    \ No newline at end of file diff --git a/writings/subtle-updates-to-chrome-14s-web-inspector/index.html b/writings/subtle-updates-to-chrome-14s-web-inspector/index.html index 4ec1351bc..517e523bc 100644 --- a/writings/subtle-updates-to-chrome-14s-web-inspector/index.html +++ b/writings/subtle-updates-to-chrome-14s-web-inspector/index.html @@ -1 +1 @@ -Subtle updates to Chrome 14's Web Inspector / Johan Brook

    Subtle updates to Chrome 14's Web Inspector

    About 1 min reading time

    Chrome 14 landed in the stable channel some days ago, and brings some better OS X Lion support, as well as a Web Audio API and “Native Client” (run C/C++ code in the browser). I also noticed a difference in the Web Inspector. I don’t think this have been here in previous stable builds. In the Elements tab, to the right, two new buttons are added:

    • A plus sign for adding a new style rule (previously in the cog wheel menu)
    • A “Toggle Element State” button

    Web Inspector Web Inspector The “Toggle Element State” button is interesting, and useful: it lets you activate different states for an element, such as :hover , :active , :active , :visited and :focus . Before, it was nearly impossible to view the styles when hovering over an element, for instance. Now we can activate the different states and debug easily. Neat and subtle addition.

    \ No newline at end of file +Subtle updates to Chrome 14's Web Inspector / Johan Brook

    Subtle updates to Chrome 14's Web Inspector

    About 1 min reading time

    Chrome 14 landed in the stable channel some days ago, and brings some better OS X Lion support, as well as a Web Audio API and “Native Client” (run C/C++ code in the browser). I also noticed a difference in the Web Inspector. I don’t think this have been here in previous stable builds. In the Elements tab, to the right, two new buttons are added:

    • A plus sign for adding a new style rule (previously in the cog wheel menu)
    • A “Toggle Element State” button

    Web Inspector Web Inspector The “Toggle Element State” button is interesting, and useful: it lets you activate different states for an element, such as :hover , :active , :active , :visited and :focus . Before, it was nearly impossible to view the styles when hovering over an element, for instance. Now we can activate the different states and debug easily. Neat and subtle addition.

    \ No newline at end of file diff --git a/writings/support/index.html b/writings/support/index.html index cc8638d18..bd1c1ab4f 100644 --- a/writings/support/index.html +++ b/writings/support/index.html @@ -1 +1 @@ -On interacting and learning from users in support / Johan Brook

    On interacting and learning from users in support

    About 5 min reading time

    For every creator, publishing your work for the masses is both exhilarating and mortifying. For a startup, you’re dying for feedback and usage, in order to boost your metrics, and if you’re charging money, it even becomes more serious. In one way or another, you’re in for interacting with users/customers (I’ll use the former term in this post).

    How I work

    In my early work in Lookback, I remember the tingling doubt and fear involved in talking to users through our support system (we use Intercom). We were just four, including me, when I came on, so there were no designated support person whatsoever (still isn’t in Lookback). That meant all of us dealt with customer support tickets by either by assigning to others or solving them.

    While I was and still am very confident in written and oral communication, I felt I’d mess things up with users by

    • promising too much
    • making them disappointed
    • providing them with false information
    • or somehow making an ass out of myself in front of a stranger (we all know how that is on the internet, right?)

    This was the first time I was engaged with real people using stuff that I was directly or indirectly responsible for.

    Two and a half years later, I’ve learnt so much in doing support — talking to our users — that I’d recommend it to anyone — whether you’re an engineer or designer or product manager.

    It’s easy to associate support with endless hours of troubleshooting, explaining, guiding, and turning people down. These are all signs that somewhere, somehow, your product is flawed. That’s the harshest truth, which is why you actually have customer support — to remind you of not being so goddammned cocky and to stay humble. Nothing’s ever finished. Not you, and nor your work.

    There is always room for improvement, you just haven’t experienced it yet, since you don’t have the fresh, unsoiled eyes of a first-time user.

    View every confused user in support as an opportunity to improve, whether it is in your copywriting, value proposition, marketing material, guides or FAQ, or any other facet of your product’s arsenal. Every user writing in to you — with either positive or negative words — has actually taken time to do so, which to me is worth appreciating and honouring.

    You can form very valuable bonds with key users through doing great support, by finding hard core fans or important companies worth targeting. By using features like Intercom’s tagging system, you can triage bugs of feature requests in order to make well informed decisions at your standup meeting, or when planning long term roadmaps.

    Support will also yield the fruits of your hard work: user appreciation. It’s one of the channels where you see the joy from real people trickle through, and it reminds you of why you’re building products at all — to (hopefully) help people. I swear that talking with users on the front lines will give you a fuzzy feeling when they tell you things like:

    Oh, I understand — that’s okay! I love your product so much, keep it up!

    or

    Thanks for the heads up! This is so dope, can’t wait to begin using it.

    Support is a priceless asset in giving you a morale boost when the going gets tough (which often is the case in a startup). Don’t throw this chance away.

    Another thing I’ve developed in since starting doing support is the fluidity and level of formality of my conversations. In the beginning, I used to be as formal as one can be online (I didn’t call people “sir” or “madame” though). Now, I use a professional but casual tone, which strengthens the bonds with the user on the other side of the wire, since they gets reminded of that I too is a human being (this is helpful in both positive and negative support convos).

    By giving a damn, putting in energy explaining and educating users, and having a polite but playful language, I’ve started enjoying doing product support.

    How Lookback works

    Today in Lookback, we’ve landed on a support setup which I think is pretty sweet. Roughly, we are in our third iteration of our support flow:

    1. The first one was a bit wild west: it was up to any team member to pick tickets from the unassigned inbox in Intercom, and take on themselves or re-assign.
    2. The second form was based on us having a designated support person that dealt with the low hanging fruits, or assigned and followed up on tickets he needed an engineer’s assistance with.
    3. The third iteration was based upon that each team member had one or two days of support, meaning they dealt with all incoming tickets during that day — whatever the subject of them was.
    4. Our fourth and current iteration is based upon areas and teams (more below).

    As with most anarchies, 1) fell through as the range and load of tickets increased.

    1. was every engineer’s dream, since they could write code without having to deal with pesky users complaining about their already perfect software, except for the support person shooting them a question once in a while, and perhaps doing some troubleshooting.

    When our support person quit, we quickly mobilised the team to take on the support together, with 3). This was like communism, polygamy, and hover boards: nice in theory but pretty unpractical in reality. It was divided equally, but day-to-day work was, for me, severely bogged down by the burden of doing all support during a full day. The core stress moment was having to take care of tickets outside my area of expertise, and thus having to consult others about those issues all the time.

    Our current system resolves around teams. This is another article, but in short: all eleven members of Lookback are belonging to a team. Only one. We’ve got three teams: Find Product Market Fit, Increase Revenue, and Reliability & Performance (I’m in Product..). All our work is done in these teams. So why not divide the incoming support tickets around these areas?

    • All things product, like feature requests, guidance, roadmap questions, and more are taken on by the PMF team.
    • Sales, account, security and privacy, and “big customers” are assigned to Revenue.
    • Processing errors, obvious backend bugs, crashes, and performance issues are in Reliability’s area.

    Throughout the day, some of us goes through the Intercom inbox and assigns to suitable team. We’re fortunate enough to be a distributed team, so we’ve got U.S. west, U.S. east, and Europe covered in terms of timezones.

    Support is very much about empathy. Being able to empathise with your users’ needs and woes is something I think everybody agrees upon being important.

    When I as a developer hear or see a user struggle with my new, shiny feature, it might hit me hard at first, before I realise “Right, this is a great chance of providing nice support for her, and thus creating a strong brand, as well as improving the feature for the future.”. We’re not perfect, and products are never finished.

    Empathy and care in product development is very interesting to me: how we with language, interaction design, and new technologies can create products people love. But still don’t understand fully.

    \ No newline at end of file +On interacting and learning from users in support / Johan Brook

    On interacting and learning from users in support

    About 5 min reading time

    For every creator, publishing your work for the masses is both exhilarating and mortifying. For a startup, you’re dying for feedback and usage, in order to boost your metrics, and if you’re charging money, it even becomes more serious. In one way or another, you’re in for interacting with users/customers (I’ll use the former term in this post).

    How I work

    In my early work in Lookback, I remember the tingling doubt and fear involved in talking to users through our support system (we use Intercom). We were just four, including me, when I came on, so there were no designated support person whatsoever (still isn’t in Lookback). That meant all of us dealt with customer support tickets by either by assigning to others or solving them.

    While I was and still am very confident in written and oral communication, I felt I’d mess things up with users by

    • promising too much
    • making them disappointed
    • providing them with false information
    • or somehow making an ass out of myself in front of a stranger (we all know how that is on the internet, right?)

    This was the first time I was engaged with real people using stuff that I was directly or indirectly responsible for.

    Two and a half years later, I’ve learnt so much in doing support — talking to our users — that I’d recommend it to anyone — whether you’re an engineer or designer or product manager.

    It’s easy to associate support with endless hours of troubleshooting, explaining, guiding, and turning people down. These are all signs that somewhere, somehow, your product is flawed. That’s the harshest truth, which is why you actually have customer support — to remind you of not being so goddammned cocky and to stay humble. Nothing’s ever finished. Not you, and nor your work.

    There is always room for improvement, you just haven’t experienced it yet, since you don’t have the fresh, unsoiled eyes of a first-time user.

    View every confused user in support as an opportunity to improve, whether it is in your copywriting, value proposition, marketing material, guides or FAQ, or any other facet of your product’s arsenal. Every user writing in to you — with either positive or negative words — has actually taken time to do so, which to me is worth appreciating and honouring.

    You can form very valuable bonds with key users through doing great support, by finding hard core fans or important companies worth targeting. By using features like Intercom’s tagging system, you can triage bugs of feature requests in order to make well informed decisions at your standup meeting, or when planning long term roadmaps.

    Support will also yield the fruits of your hard work: user appreciation. It’s one of the channels where you see the joy from real people trickle through, and it reminds you of why you’re building products at all — to (hopefully) help people. I swear that talking with users on the front lines will give you a fuzzy feeling when they tell you things like:

    Oh, I understand — that’s okay! I love your product so much, keep it up!

    or

    Thanks for the heads up! This is so dope, can’t wait to begin using it.

    Support is a priceless asset in giving you a morale boost when the going gets tough (which often is the case in a startup). Don’t throw this chance away.

    Another thing I’ve developed in since starting doing support is the fluidity and level of formality of my conversations. In the beginning, I used to be as formal as one can be online (I didn’t call people “sir” or “madame” though). Now, I use a professional but casual tone, which strengthens the bonds with the user on the other side of the wire, since they gets reminded of that I too is a human being (this is helpful in both positive and negative support convos).

    By giving a damn, putting in energy explaining and educating users, and having a polite but playful language, I’ve started enjoying doing product support.

    How Lookback works

    Today in Lookback, we’ve landed on a support setup which I think is pretty sweet. Roughly, we are in our third iteration of our support flow:

    1. The first one was a bit wild west: it was up to any team member to pick tickets from the unassigned inbox in Intercom, and take on themselves or re-assign.
    2. The second form was based on us having a designated support person that dealt with the low hanging fruits, or assigned and followed up on tickets he needed an engineer’s assistance with.
    3. The third iteration was based upon that each team member had one or two days of support, meaning they dealt with all incoming tickets during that day — whatever the subject of them was.
    4. Our fourth and current iteration is based upon areas and teams (more below).

    As with most anarchies, 1) fell through as the range and load of tickets increased.

    1. was every engineer’s dream, since they could write code without having to deal with pesky users complaining about their already perfect software, except for the support person shooting them a question once in a while, and perhaps doing some troubleshooting.

    When our support person quit, we quickly mobilised the team to take on the support together, with 3). This was like communism, polygamy, and hover boards: nice in theory but pretty unpractical in reality. It was divided equally, but day-to-day work was, for me, severely bogged down by the burden of doing all support during a full day. The core stress moment was having to take care of tickets outside my area of expertise, and thus having to consult others about those issues all the time.

    Our current system resolves around teams. This is another article, but in short: all eleven members of Lookback are belonging to a team. Only one. We’ve got three teams: Find Product Market Fit, Increase Revenue, and Reliability & Performance (I’m in Product..). All our work is done in these teams. So why not divide the incoming support tickets around these areas?

    • All things product, like feature requests, guidance, roadmap questions, and more are taken on by the PMF team.
    • Sales, account, security and privacy, and “big customers” are assigned to Revenue.
    • Processing errors, obvious backend bugs, crashes, and performance issues are in Reliability’s area.

    Throughout the day, some of us goes through the Intercom inbox and assigns to suitable team. We’re fortunate enough to be a distributed team, so we’ve got U.S. west, U.S. east, and Europe covered in terms of timezones.

    Support is very much about empathy. Being able to empathise with your users’ needs and woes is something I think everybody agrees upon being important.

    When I as a developer hear or see a user struggle with my new, shiny feature, it might hit me hard at first, before I realise “Right, this is a great chance of providing nice support for her, and thus creating a strong brand, as well as improving the feature for the future.”. We’re not perfect, and products are never finished.

    Empathy and care in product development is very interesting to me: how we with language, interaction design, and new technologies can create products people love. But still don’t understand fully.

    \ No newline at end of file diff --git a/writings/sync-is-about-safety/index.html b/writings/sync-is-about-safety/index.html index 16b2e3aba..9ff27d53f 100644 --- a/writings/sync-is-about-safety/index.html +++ b/writings/sync-is-about-safety/index.html @@ -1 +1 @@ -Sync is about safety / Johan Brook

    Sync is about safety

    About 2 min reading time

    It seems cloud sync is the next thing these days. Having everything available anywhere is almost expected of respected apps and services. Remember a few years ago when we had to manually plugin in and out the phones out of the computer in order to sync the contacts? Or, when we couldn’t sync contacts to the computer at all?

    The cloud is getting more mature. Dropbox was for me the first service which gave me a “Whoa” moment. Having files around on your harddrive, and visible in a web interface, and automatically synced to any other computers (there were no devices back then) was huge. Apple’s iCloud is becoming an invisible way of syncing user data and files. MobileMe was quite a misstep, but it’s clear that Apple is going for iCloud at full speed now. With iCloud, files “just exist” - you don’t even have to “sync” them (however, I prefer the use of the term for now). Google is okay at syncing stuff, but Apple’s way of syncing contacts and calendar events feels better to use with Apple’s eco system. Sure, Google’s stuff is widely supported by other services, but I remember things have always felt a bit hacky to perform (once I had to switch language to English in order to sync multiple Google calendars to my iPhone).

    My view on “syncing” and “cloud computing” is all about safety, in the sense of that “I can put this file here and be sure of that I’ll be able to access it from any other device”. That was what Dropbox did: I was in a hurry and put a document in my Dropbox, and could safely continue with it from another computer. With iCloud, I’m able to write text in one app (currently iA Writer) and trust iCloud to make it show up on my iPad and iPhone 1. In my daily life, manually syncing everything would be a huge pain. I gather a lot of information every day in lectures, meetings, and group projects. Making everything available to me and everybody else just wouldn’t work without Dropbox, Google Docs, Basecamp, GitHub, et al.

    In a way this is how the web really should work. Up until now, the devices of the internet have been big, clunky computers. Same kind of input, interaction and display ratios. Now, the member of the web includes tablets and smartphones: why shouldn’t my data be available for them to access? This is in line with the philosphy of responsive web design. It’s interesting to watch the web make computers and devices barely “consumers” of data. They’re not thin clients, but heavy clients in the sense that more work is done on the client and the server just syncs everything.

    The cloud is a buzz word, sure, but perhaps because it’s important. Over the air sync has moved from being a gimmick, a “feature”, to something you would expect from a service. Don’t lock my data in if you don’t have to! Let me access it from whatever screen I want to! Let me know it’s safe to just throw in my stuff in this bucket, and have it showing up when I open the bucket next time.

    1. There’s no web interface for iCloud stuff (yet), but the upcoming OS X Mountain Lion will have a deep iCloud intergration. Screenshots from the developer preview show an iCloud file manager à la Finder.
    \ No newline at end of file +Sync is about safety / Johan Brook

    Sync is about safety

    About 2 min reading time

    It seems cloud sync is the next thing these days. Having everything available anywhere is almost expected of respected apps and services. Remember a few years ago when we had to manually plugin in and out the phones out of the computer in order to sync the contacts? Or, when we couldn’t sync contacts to the computer at all?

    The cloud is getting more mature. Dropbox was for me the first service which gave me a “Whoa” moment. Having files around on your harddrive, and visible in a web interface, and automatically synced to any other computers (there were no devices back then) was huge. Apple’s iCloud is becoming an invisible way of syncing user data and files. MobileMe was quite a misstep, but it’s clear that Apple is going for iCloud at full speed now. With iCloud, files “just exist” - you don’t even have to “sync” them (however, I prefer the use of the term for now). Google is okay at syncing stuff, but Apple’s way of syncing contacts and calendar events feels better to use with Apple’s eco system. Sure, Google’s stuff is widely supported by other services, but I remember things have always felt a bit hacky to perform (once I had to switch language to English in order to sync multiple Google calendars to my iPhone).

    My view on “syncing” and “cloud computing” is all about safety, in the sense of that “I can put this file here and be sure of that I’ll be able to access it from any other device”. That was what Dropbox did: I was in a hurry and put a document in my Dropbox, and could safely continue with it from another computer. With iCloud, I’m able to write text in one app (currently iA Writer) and trust iCloud to make it show up on my iPad and iPhone 1. In my daily life, manually syncing everything would be a huge pain. I gather a lot of information every day in lectures, meetings, and group projects. Making everything available to me and everybody else just wouldn’t work without Dropbox, Google Docs, Basecamp, GitHub, et al.

    In a way this is how the web really should work. Up until now, the devices of the internet have been big, clunky computers. Same kind of input, interaction and display ratios. Now, the member of the web includes tablets and smartphones: why shouldn’t my data be available for them to access? This is in line with the philosphy of responsive web design. It’s interesting to watch the web make computers and devices barely “consumers” of data. They’re not thin clients, but heavy clients in the sense that more work is done on the client and the server just syncs everything.

    The cloud is a buzz word, sure, but perhaps because it’s important. Over the air sync has moved from being a gimmick, a “feature”, to something you would expect from a service. Don’t lock my data in if you don’t have to! Let me access it from whatever screen I want to! Let me know it’s safe to just throw in my stuff in this bucket, and have it showing up when I open the bucket next time.

    1. There’s no web interface for iCloud stuff (yet), but the upcoming OS X Mountain Lion will have a deep iCloud intergration. Screenshots from the developer preview show an iCloud file manager à la Finder.
    \ No newline at end of file diff --git a/writings/systemet-a-liquor-store-status-web-app/index.html b/writings/systemet-a-liquor-store-status-web-app/index.html index 738d3903e..7ecee1beb 100644 --- a/writings/systemet-a-liquor-store-status-web-app/index.html +++ b/writings/systemet-a-liquor-store-status-web-app/index.html @@ -1,3 +1,3 @@ 'Systemet' – A liquor store status web app / Johan Brook

    'Systemet' – A liquor store status web app

    About 3 min reading time

    In Sweden the state has monopoly on all sales of alcohol. It sucks sometimes, especially when it comes to competition and opening hours. More than once I’ve discovered in panic that the liquor store closes 15.00 on a Saturday (!). I’ve felt a need for a small utility which tracks down the closest store and gives an answer to the question “Is the liquor store open?”. So I built one.

    Visit the app on systemet.johanbrook.com oppet.systmt.se. The source is on GitHub. I built it with mobiles in mind, but it’s of course usable on all other web devices. If you’re on iOS, feel free to add it to your homescreen for quick access and the full experience (I said that because I’ve made an icon and adjusted the app for native mode …).

    Thanks to Niklas Jakobsen for the awesome subdomain! (“Öppet” is Swedish for “open”).

    The “why”

    1. I wanted to build it
    2. I wanted to learn more about Node.js, MongoDB, CoffeeScript, and web APIs and services

    The process

    I started to research ways of getting a list of all stores along with their coordinates and opening hours. Seemed rare at first: 3rd party APIs only offered the product index. But it turned out Systembolaget has official, open API resources for this on this page. They are served in XML (uhh ..) and XLS (argh!) format, and are quite badly formatted.

    On top of that, the coordinates for the store XML file are in RT90 format – not the “standard” WGS coordinate system. Since the app gets regular coordinates from the built-in GeoLocation sensor, I had to convert them from the XML file. My father is a surveyor, and along with some research I found neat formulas for converting RT90 to regular coordinates. The Gauss-Krüger method is common, and I also found existing Javascript code for the conversion.

    After a lot of testing I could start doing the real thing. I began with getting to know Node.js, Express.js better along with basic conventions. Everything went quite fast since the language (Javascript) itself wasn’t a problem, but instead the Node way of doing things were new to me. I separated the code in two parts:

    1. The main app which should serve a start page where client side JS would get the device’s coordinates, send them as parameters via XHR to my Express app route which should find the closest store and send the data back as JSON.
    2. The import script which should get the XML from Systembolaget’s website, parse it as JSON, and insert it into a MongoDB database.

    I of course didn’t want to get the whole XML file from the API on every app request, as it would be the only way of doing it. Systembolaget’s “API” isn’t that sophisticated. Instead I put it all into a Mongo database, which meant I could use all the very useful geospatial indexing features of MongoDB:

    collection.ensureIndex loc: "2d"
 collection.find(loc: $near: [50, 50])
-

    Where [50,50] are the coordinates I would get from the client. Neat.

    Hosting

    I began glueing everything together, and it worked quite well locally. Win! The closest liquor store showed up with the correct dates and hours. But I of course wanted to host it online for me and everybody. I instantly thought on Heroku since they offer Node.js hosting nowadays. They also have free MongoDB instances which would serve my purposes well enough. Since I needed to parse XML from Systembolaget’s service when it’s updated, a cronjob service was required. Heroku offers that (for free!) as well.

    Node.js deployments on Heroku was something I had never done before — I’ve only worked with Ruby stacks. Turned out everything went smooth. After fiddling with the MongoDB connection for a while I got everything to work almost painlessly. Kudos to Heroku.

    Conclusion

    The user base of my web app is limited to Swedish readers, but it was fun hack nevertheless. I learned a lot about Node.js and asynchronous programming, which wasn’t that easy to wrap my head around at first. Node.js was more low level web server stuff than I had previously done before.

    Check out the source code in the GitHub repo and give feedback.

    \ No newline at end of file +

    Where [50,50] are the coordinates I would get from the client. Neat.

    Hosting

    I began glueing everything together, and it worked quite well locally. Win! The closest liquor store showed up with the correct dates and hours. But I of course wanted to host it online for me and everybody. I instantly thought on Heroku since they offer Node.js hosting nowadays. They also have free MongoDB instances which would serve my purposes well enough. Since I needed to parse XML from Systembolaget’s service when it’s updated, a cronjob service was required. Heroku offers that (for free!) as well.

    Node.js deployments on Heroku was something I had never done before — I’ve only worked with Ruby stacks. Turned out everything went smooth. After fiddling with the MongoDB connection for a while I got everything to work almost painlessly. Kudos to Heroku.

    Conclusion

    The user base of my web app is limited to Swedish readers, but it was fun hack nevertheless. I learned a lot about Node.js and asynchronous programming, which wasn’t that easy to wrap my head around at first. Node.js was more low level web server stuff than I had previously done before.

    Check out the source code in the GitHub repo and give feedback.

    \ No newline at end of file diff --git a/writings/tags-and-class-names-on-building-flexible-markup/index.html b/writings/tags-and-class-names-on-building-flexible-markup/index.html index 8242f8817..188c25cfb 100644 --- a/writings/tags-and-class-names-on-building-flexible-markup/index.html +++ b/writings/tags-and-class-names-on-building-flexible-markup/index.html @@ -24,4 +24,4 @@ </p> </div> </footer> -

    Above you see the markup I would write. Notice the additional class attributes and the div element wrapper.

    But why, oh why?

    Because it lets me write more robust, flexible and portable HTML. In my CSS, I don’t rely on element tags (which may change during time). As long as I don’t nest the styling too far, my markup will stay the same if I decide to alter the HTML structure (which as you know always happens).

    In a way, this is what the idea about the roles of HTML and CSS is all about. Remember the markup is for presentation, structure? And CSS is for styling? So why would the presentation and styling be dependent on each other? With class hooks, the CSS is able to keep a reference to the elements in the markup in a much more reliable way than only doing element hooks. It’s tricky to write super clean HTML for small sites, and close to impossible for larger sites, with content and HTML spitted out from a CMS or whatever. It’s your task as a web developer to make your markup and styling go nice together, living in harmony, and using each others’ strengths. I usually keep the mantras modular, re-usable, generalized close to mind.

    Classes in your markup is fine. Just don’t abuse it, keep a sane balance. It’s like in sex: if it feels good, it’s probably totally okay to do.

    \ No newline at end of file +

    Above you see the markup I would write. Notice the additional class attributes and the div element wrapper.

    But why, oh why?

    Because it lets me write more robust, flexible and portable HTML. In my CSS, I don’t rely on element tags (which may change during time). As long as I don’t nest the styling too far, my markup will stay the same if I decide to alter the HTML structure (which as you know always happens).

    In a way, this is what the idea about the roles of HTML and CSS is all about. Remember the markup is for presentation, structure? And CSS is for styling? So why would the presentation and styling be dependent on each other? With class hooks, the CSS is able to keep a reference to the elements in the markup in a much more reliable way than only doing element hooks. It’s tricky to write super clean HTML for small sites, and close to impossible for larger sites, with content and HTML spitted out from a CMS or whatever. It’s your task as a web developer to make your markup and styling go nice together, living in harmony, and using each others’ strengths. I usually keep the mantras modular, re-usable, generalized close to mind.

    Classes in your markup is fine. Just don’t abuse it, keep a sane balance. It’s like in sex: if it feels good, it’s probably totally okay to do.

    \ No newline at end of file diff --git a/writings/take-a-step-back/index.html b/writings/take-a-step-back/index.html index 12676485c..4c06f57d7 100644 --- a/writings/take-a-step-back/index.html +++ b/writings/take-a-step-back/index.html @@ -1 +1 @@ -Take a step back / Johan Brook

    Take a step back

    About 2 min reading time

    A while ago I was visiting a relative/client regarding some counseling about her brand new Wordpress site. While being there she mentioned some flyers she and her husband had made for the business (garden services). Since spring is coming along you’ve got to ramp up quickly now because of the huge demand later on, therefore the need for a flyer just to “get it out there”. I have to say I had loved to design it myself — no doubt — but then I saw the flyer they had created. I really liked it and was impressed. It was an elegant gallery of garden photos on portrait piece of paper, with the logotype in the middle. I think it was 3x6 small photos ordered in a grid. To be honest, I couldn’t have made it better myself. I believe the moral of the story is that everybody can design. It just has to be simple enough. If I was to design that flyer, I had started to decide on typography, grids, hierarchy, colour scheme, what kind of photos to use, etc. I had given it too much thought and bypassed the really simple, straight-forward and plain beautiful solution. It’s important to take a step back as a designer (and developer as well) and think of what you’re doing. Is it really crucial and vital that the text lines up perfectly to the horizontal grid? Is it worth it to rewrite a large part of the application just to make use of that cool library? “Regular” people (if I may say so) aren’t always dumb users who have no idea of what they want. When I was young and foolish I used to be so very eager to build stuff that I didn’t care too much about asking people (and myself) what really mattered the most with this application/design. I ended up feeling like I had missed something. Of course there are boundaries where you actually shouldn’t consult end-users, focus groups and so on. But what I mean is that it’s quite good to step away from the designer/developer role and get back to the roots sometimes. Everybody will gain from it.

    \ No newline at end of file +Take a step back / Johan Brook

    Take a step back

    About 2 min reading time

    A while ago I was visiting a relative/client regarding some counseling about her brand new Wordpress site. While being there she mentioned some flyers she and her husband had made for the business (garden services). Since spring is coming along you’ve got to ramp up quickly now because of the huge demand later on, therefore the need for a flyer just to “get it out there”. I have to say I had loved to design it myself — no doubt — but then I saw the flyer they had created. I really liked it and was impressed. It was an elegant gallery of garden photos on portrait piece of paper, with the logotype in the middle. I think it was 3x6 small photos ordered in a grid. To be honest, I couldn’t have made it better myself. I believe the moral of the story is that everybody can design. It just has to be simple enough. If I was to design that flyer, I had started to decide on typography, grids, hierarchy, colour scheme, what kind of photos to use, etc. I had given it too much thought and bypassed the really simple, straight-forward and plain beautiful solution. It’s important to take a step back as a designer (and developer as well) and think of what you’re doing. Is it really crucial and vital that the text lines up perfectly to the horizontal grid? Is it worth it to rewrite a large part of the application just to make use of that cool library? “Regular” people (if I may say so) aren’t always dumb users who have no idea of what they want. When I was young and foolish I used to be so very eager to build stuff that I didn’t care too much about asking people (and myself) what really mattered the most with this application/design. I ended up feeling like I had missed something. Of course there are boundaries where you actually shouldn’t consult end-users, focus groups and so on. But what I mean is that it’s quite good to step away from the designer/developer role and get back to the roots sometimes. Everybody will gain from it.

    \ No newline at end of file diff --git a/writings/the-anatomy-of-a-perfect-web-site/index.html b/writings/the-anatomy-of-a-perfect-web-site/index.html index d639826ce..a58737464 100644 --- a/writings/the-anatomy-of-a-perfect-web-site/index.html +++ b/writings/the-anatomy-of-a-perfect-web-site/index.html @@ -1 +1 @@ -The Anatomy of a Perfect Web Site / Johan Brook

    The Anatomy of a Perfect Web Site

    About 4 min reading time

    Many sites on the web are good. They are well-designed, clear, have great information architecture and are easy to navigate. Often, web designers emphasize the “design” part too much, and neglect the other equally important things. However, there are sites which aren’t that aesthetically pleasing, but still are the best sites in the world. They may look like a big, sad bag of wrestling underwear on the outside, but their underlying user experience is really, really refined, and thus makes the appearance part fade away while visiting the site. How and why?

    A case study: “Introduction to Computer Science using Java”

    I’m studying Software Engineering at Chalmers University of Technology in Gothenburg. We took this introductory course in object oriented programming with Java earlier this fall, and as the exam approached I browser around the web for better studying resources than the course literature we had. I stumbled upon this site:

    “Introduction to Computer Science using Java” → http://chortle.ccsu.edu/CS151/cs151java.html

    Mirror: http://programmedlessons.org/java5/index.html

    It’s apparently an intro course to Java, given by a Bradley Kjell at Central Connecticut University.

    How do you feel about the index page? It’s rather dull and “undesigned”, right? We’ll dig deeper, and I’ll show you why this site is so awesome.

    Information structure

    If you scroll down you’ll see the different parts of the course listed, and each sub-chapter is named so you’re instantly able to distinguish the type of information given in the chapter. I really like the way all the chapters are listed: no complex menus or navigation. Instead, information is presented in a simple and consise way. Simplicity. That’s what the whole web site screams.

    Choosing a chapter takes you to a page where the chapter overview is presented: what’s to be covered. Also note the questions at the bottom of each page in every chapter. Those are great for learning; not showing you the answer right away, but instead let’s you ponder over the solution and then check the next page for the seeked solution.

    The pages includes body text, tables, figures and code boxes ( sample). I want to highlight the recursion section as a great example on how you should construct educational tools.

    Features and interaction

    • On some pages you’re asked to fill in blanks with expressions.
    • Other pages includes interactive diagrams (!) where you click on the image to advance through the steps of the code. If you want to wrap your head around recursion, that method is great for visualizing.
    • Choosing the “Home” button at the top and bottom of each chapter page not only takes you to the index, but also to the correct position on the page. I.e. if you’re reading about “Exceptions and IO Streams” and decide to go back and check out next chapter, you won’t end up at the top of the index page. Great user experience.

    I especially like the clickable diagrams; I absolutely did not expect a site like this to include that kind of “features”.

    Quiz, Reviews, and Exercises

    The site also offers quiz, reviews and exercises as ways for the visitor to test his or her skills in the subject. There’s something with how these parts of the web site are built. Try out a few Reviews and note how the interaction works. It’s a cool concept (good use of Javascript). Stripped to the barebones.

    Style of writing

    Writing for the web is difficult. You shouldn’t write novels for your visitors, nor write texts with small or no substance. It’s an art form actually: to be able to analyse the context, mood, target group(s), aim, and other scenarios.

    I believe our case study outperforms other tutorials or educational sites in writing. There are no long paragraphs of theoretical explanations. I always hate tech articles that have these Wall of Text style paragraphs where just a couple of sentences are truly relevant. That’s not the case here, since all chapters are divided into pages, which each treats a single topic.

    Do one thing, and do it well. Even though I think this technique leads to many mouse clicks on the “Next” button on each page, it helps you focus on a single topic.

    The writing is concise and pedagogical. It explains the concepts in images and real world concepts (that actually works). Some stuff that could be tricky for a beginner to wrap his or her head around (as recursion, for instance) are described with sketches, diagrams, and imagery.

    Noticed how the author’s personality shines through in the text? There are jokes, analogies, and other things which makes it fun to read. It’s not a dull, grey Java tutorial — it’s a guy tutoring you how to use a tool in the best way possible.

    Conclusion

    What is my goal with this article? To give an example that surface is not sufficient to make a web site extraordinary. Go watch “Shrek” and it’ll tell you it’s what’s underneath that really counts.

    Is our Case Study another sparse, un-designed educational site, or is it a minimalistic, functional, beautifully architectured learning tool?

    Mark Boulton and many other industry profiles keep repeating this: design content out, not canvas in.

    Note that this site wouldn’t demand that much work writing media queries for mobile devices, making it responsive, either.

    Perhaps web designers and developers should look beyond what’s currently trendy and focus on the message — the content — the cause — the reason. It works for a decade-old computer science course, right?

    Design without context is not design. It’s noise.

    By Someone-I’ve-forgot

    \ No newline at end of file +The Anatomy of a Perfect Web Site / Johan Brook

    The Anatomy of a Perfect Web Site

    About 4 min reading time

    Many sites on the web are good. They are well-designed, clear, have great information architecture and are easy to navigate. Often, web designers emphasize the “design” part too much, and neglect the other equally important things. However, there are sites which aren’t that aesthetically pleasing, but still are the best sites in the world. They may look like a big, sad bag of wrestling underwear on the outside, but their underlying user experience is really, really refined, and thus makes the appearance part fade away while visiting the site. How and why?

    A case study: “Introduction to Computer Science using Java”

    I’m studying Software Engineering at Chalmers University of Technology in Gothenburg. We took this introductory course in object oriented programming with Java earlier this fall, and as the exam approached I browser around the web for better studying resources than the course literature we had. I stumbled upon this site:

    “Introduction to Computer Science using Java” → http://chortle.ccsu.edu/CS151/cs151java.html

    Mirror: http://programmedlessons.org/java5/index.html

    It’s apparently an intro course to Java, given by a Bradley Kjell at Central Connecticut University.

    How do you feel about the index page? It’s rather dull and “undesigned”, right? We’ll dig deeper, and I’ll show you why this site is so awesome.

    Information structure

    If you scroll down you’ll see the different parts of the course listed, and each sub-chapter is named so you’re instantly able to distinguish the type of information given in the chapter. I really like the way all the chapters are listed: no complex menus or navigation. Instead, information is presented in a simple and consise way. Simplicity. That’s what the whole web site screams.

    Choosing a chapter takes you to a page where the chapter overview is presented: what’s to be covered. Also note the questions at the bottom of each page in every chapter. Those are great for learning; not showing you the answer right away, but instead let’s you ponder over the solution and then check the next page for the seeked solution.

    The pages includes body text, tables, figures and code boxes ( sample). I want to highlight the recursion section as a great example on how you should construct educational tools.

    Features and interaction

    • On some pages you’re asked to fill in blanks with expressions.
    • Other pages includes interactive diagrams (!) where you click on the image to advance through the steps of the code. If you want to wrap your head around recursion, that method is great for visualizing.
    • Choosing the “Home” button at the top and bottom of each chapter page not only takes you to the index, but also to the correct position on the page. I.e. if you’re reading about “Exceptions and IO Streams” and decide to go back and check out next chapter, you won’t end up at the top of the index page. Great user experience.

    I especially like the clickable diagrams; I absolutely did not expect a site like this to include that kind of “features”.

    Quiz, Reviews, and Exercises

    The site also offers quiz, reviews and exercises as ways for the visitor to test his or her skills in the subject. There’s something with how these parts of the web site are built. Try out a few Reviews and note how the interaction works. It’s a cool concept (good use of Javascript). Stripped to the barebones.

    Style of writing

    Writing for the web is difficult. You shouldn’t write novels for your visitors, nor write texts with small or no substance. It’s an art form actually: to be able to analyse the context, mood, target group(s), aim, and other scenarios.

    I believe our case study outperforms other tutorials or educational sites in writing. There are no long paragraphs of theoretical explanations. I always hate tech articles that have these Wall of Text style paragraphs where just a couple of sentences are truly relevant. That’s not the case here, since all chapters are divided into pages, which each treats a single topic.

    Do one thing, and do it well. Even though I think this technique leads to many mouse clicks on the “Next” button on each page, it helps you focus on a single topic.

    The writing is concise and pedagogical. It explains the concepts in images and real world concepts (that actually works). Some stuff that could be tricky for a beginner to wrap his or her head around (as recursion, for instance) are described with sketches, diagrams, and imagery.

    Noticed how the author’s personality shines through in the text? There are jokes, analogies, and other things which makes it fun to read. It’s not a dull, grey Java tutorial — it’s a guy tutoring you how to use a tool in the best way possible.

    Conclusion

    What is my goal with this article? To give an example that surface is not sufficient to make a web site extraordinary. Go watch “Shrek” and it’ll tell you it’s what’s underneath that really counts.

    Is our Case Study another sparse, un-designed educational site, or is it a minimalistic, functional, beautifully architectured learning tool?

    Mark Boulton and many other industry profiles keep repeating this: design content out, not canvas in.

    Note that this site wouldn’t demand that much work writing media queries for mobile devices, making it responsive, either.

    Perhaps web designers and developers should look beyond what’s currently trendy and focus on the message — the content — the cause — the reason. It works for a decade-old computer science course, right?

    Design without context is not design. It’s noise.

    By Someone-I’ve-forgot

    \ No newline at end of file diff --git a/writings/the-art-of-quality/index.html b/writings/the-art-of-quality/index.html index 0240c8f7a..41150468f 100644 --- a/writings/the-art-of-quality/index.html +++ b/writings/the-art-of-quality/index.html @@ -1 +1 @@ -"The Art of Quality" / Johan Brook

    "The Art of Quality"

    About 1 min reading time

    Follow link to blog.14islands.com →

    Quality should not be confused with perfection though. A good example is the Japanese “Ensō”, a form of minimalist expressionist art in the shape of a circle. Some artists paint ensō with an opening in the circle to symbolize that imperfection is an essential and inherent aspect of existence.

    \ No newline at end of file +"The Art of Quality" / Johan Brook

    "The Art of Quality"

    About 1 min reading time

    Follow link to blog.14islands.com →

    Quality should not be confused with perfection though. A good example is the Japanese “Ensō”, a form of minimalist expressionist art in the shape of a circle. Some artists paint ensō with an opening in the circle to symbolize that imperfection is an essential and inherent aspect of existence.

    \ No newline at end of file diff --git a/writings/the-beatles-album-covers-redesigned/index.html b/writings/the-beatles-album-covers-redesigned/index.html index 84e92f125..ff74761bb 100644 --- a/writings/the-beatles-album-covers-redesigned/index.html +++ b/writings/the-beatles-album-covers-redesigned/index.html @@ -1 +1 @@ -The Beatles’ album covers redesigned / Johan Brook

    The Beatles’ album covers redesigned

    About 1 min reading time

    Follow link to flickr.com →


    Just for fun, Louie Mantia (Iconfactory, now Apple), has redesigned some of Beatles’ album covers. They are really slick, every one of them. I especially like the “Let It Be” and “With The Beatles” versions.

    \ No newline at end of file +The Beatles’ album covers redesigned / Johan Brook

    The Beatles’ album covers redesigned

    About 1 min reading time

    Follow link to flickr.com →


    Just for fun, Louie Mantia (Iconfactory, now Apple), has redesigned some of Beatles’ album covers. They are really slick, every one of them. I especially like the “Let It Be” and “With The Beatles” versions.

    \ No newline at end of file diff --git a/writings/the-hawk-catches-the-sparrow/index.html b/writings/the-hawk-catches-the-sparrow/index.html index 7485ff15a..3c60b79df 100644 --- a/writings/the-hawk-catches-the-sparrow/index.html +++ b/writings/the-hawk-catches-the-sparrow/index.html @@ -1 +1 @@ -The Hawk catches the Sparrow / Johan Brook

    The Hawk catches the Sparrow

    About 2 min reading time

    Follow link to mattgemmell.com →

    This is a blow to indie developers!

    No. No it’s fucking not. It isn’t as if there’s a limited supply of indie devs, and Google has just whittled another critical few into the bosom of corporate employment. We’re not an endangered species. In the time it took you to read this paragraph, another fifteen kids launched Xcode for the first time.

    Matt Gemmell, “Entitlement and Acquisition” Matt Gemmell on Google’s acquisition of (the team behind) Sparrow. He’s making a lot of thoughtful and sensible comments.

    Since the news went out, I’ve seen tons of, mostly negative, comments on Twitter about the deal. There are overly dramatic and pure hateful words coming out, and even though they are the honest thoughts and feelings of customers, I feel that people should relax about everything.

    Yes, it’s controversial because it’s Google and all this David-and-Goliath thing all over again (except for this time, Goliath didn’t challenge David, but gave him a shitload of gold coins and talked him over to the Philistine side instead). But please have some distance and perspective — the developers behind Sparrow have all the rights in the world to sell their creation to Google and join the company. Sure — it’s too bad – but it’s business. If you feel “betrayed” or “tricked on upcoming features/iPad version/etc” you should perhaps not base all your e-mail habits on one app, or buy apps solely on the developers’ “promises” of fancy new features in the future.

    Another side of the coin, by Rian van der Merwe:

    This is the core of the disappointment that many of us feel with the Sparrow acquisition. It’s not about the $15 or less we spent on the apps. It’s not about the team’s well-deserved payout. It’s about the loss of faith in a philosophy that we thought was a sustainable way to ensure a healthy future for independent software development, where most innovation happens.

    Rian van der Merwe, “The real reason we’re upset about Sparrow’s acquisition” What the author of the quote above means with his post is basically the ideological failure involved with the acquisition (how’s that for being overly dramatic?). Perhaps he’s right — it’s an interesting take. Go read the post.

    I for one got tired of Sparrow a couple of months ago and switched to Apple’s Mail. For me Sparrow felt sluggish, unpolished and was holding me back (it doesn’t support Exchange accounts). The iPhone version is really slick UI-wise, as well as interaction wise with all its touch gestures and whatnot. Still, it felt slow and over-designed after a while. I returned to Apples spartan but clean Mail.

    It’s not personal. It’s strictly business.

    Michael Corleone

    \ No newline at end of file +The Hawk catches the Sparrow / Johan Brook

    The Hawk catches the Sparrow

    About 2 min reading time

    Follow link to mattgemmell.com →

    This is a blow to indie developers!

    No. No it’s fucking not. It isn’t as if there’s a limited supply of indie devs, and Google has just whittled another critical few into the bosom of corporate employment. We’re not an endangered species. In the time it took you to read this paragraph, another fifteen kids launched Xcode for the first time.

    Matt Gemmell, “Entitlement and Acquisition” Matt Gemmell on Google’s acquisition of (the team behind) Sparrow. He’s making a lot of thoughtful and sensible comments.

    Since the news went out, I’ve seen tons of, mostly negative, comments on Twitter about the deal. There are overly dramatic and pure hateful words coming out, and even though they are the honest thoughts and feelings of customers, I feel that people should relax about everything.

    Yes, it’s controversial because it’s Google and all this David-and-Goliath thing all over again (except for this time, Goliath didn’t challenge David, but gave him a shitload of gold coins and talked him over to the Philistine side instead). But please have some distance and perspective — the developers behind Sparrow have all the rights in the world to sell their creation to Google and join the company. Sure — it’s too bad – but it’s business. If you feel “betrayed” or “tricked on upcoming features/iPad version/etc” you should perhaps not base all your e-mail habits on one app, or buy apps solely on the developers’ “promises” of fancy new features in the future.

    Another side of the coin, by Rian van der Merwe:

    This is the core of the disappointment that many of us feel with the Sparrow acquisition. It’s not about the $15 or less we spent on the apps. It’s not about the team’s well-deserved payout. It’s about the loss of faith in a philosophy that we thought was a sustainable way to ensure a healthy future for independent software development, where most innovation happens.

    Rian van der Merwe, “The real reason we’re upset about Sparrow’s acquisition” What the author of the quote above means with his post is basically the ideological failure involved with the acquisition (how’s that for being overly dramatic?). Perhaps he’s right — it’s an interesting take. Go read the post.

    I for one got tired of Sparrow a couple of months ago and switched to Apple’s Mail. For me Sparrow felt sluggish, unpolished and was holding me back (it doesn’t support Exchange accounts). The iPhone version is really slick UI-wise, as well as interaction wise with all its touch gestures and whatnot. Still, it felt slow and over-designed after a while. I returned to Apples spartan but clean Mail.

    It’s not personal. It’s strictly business.

    Michael Corleone

    \ No newline at end of file diff --git a/writings/the-ocean/index.html b/writings/the-ocean/index.html index 785f2e68f..64f64c94f 100644 --- a/writings/the-ocean/index.html +++ b/writings/the-ocean/index.html @@ -1 +1 @@ -The Ocean / Johan Brook

    The Ocean

    About 4 min reading time

    To see a World in a Grain of Sand
    And a Heaven in a Wild Flower,
    Hold Infinity in the palm of your hand
    And Eternity in an hour.

    Auguries of Innocence, William Blake

    I approach the water. The first, smooth, clinging stretch of a wave reaches me and feels like liquid air, since the water has no temperature. It’s just there. It’s always been there. Like the beach I’m at, like the green mountains rising around us. Honest and eternal. The ocean begs for a visit.

    The sound of the waves drenches my thoughts, tightens my guard.

    I respect the ocean, I’ve always has. I love it, but respect it. Love without respect is just carelessness. Respect without love is cowardness. You can kill a bird by loving it too much you’ll never set it free. You can live a life never speaking with the girl next door, just to witness the moment when it’s too late. It’s so easy feeling cocky when in the ocean. You’re free, you’re in control, you can feel the sandy bottom comfortly beneath your feet. But as with most natural things, you’re never ever in complete control.

    A medium sized wave is coming in. The physics of it is excellent: I can see it building up from afar, collecting power. Power from all the oceans behind it. The ridge starts appearing, like a sand dune. I’m far away from where I really wanna be — in the ridge area — so I’ll need to tackle this one from the front. The ridge continues to roll and build and roll and build up to a graceful, merciless gap of water with white foam like teeth at the top.

    The wall approaches. Depending on the size of the wave, you can do two things. If it’s a small to medium one, just stand where you are, refuse to curl up to a ball in front of the wave. Stand up resilient, like a Greek warrior, with your arm stretched forward like an arrow through the water. Turn sideways, not exposing the width of your torso for the wave. Steady, like an arrow, you will pierce the wall of water and appear unhurt on the other side. The other technique, when the wave is large, is to dive through it. Again, like an arrow, aim for the roots of the wave with your hands above your head and thrust through it. Some people aim for the body — the center area — of the mass of water, but that’ll be like jumping straight into a wall. The wave is incredibly powerful, with all its momentum, precisely in the center. You don’t wanna face that energy of a thousands oceans behind it. Remember to account of the aftermaths of the wave — the backwaters.

    I come up behind the wave, feeling the currents that came with it. The main current beneath the water surface is strong today. One thing I learnt from the ocean is that it always takes back things belonging to it. And other things too. Objects from the ocean often return to the ocean whether they like it or not. I’m farther out now, not feeling the sea bottom anymore. No safety line, just depending on my body’s stamina. Another wave approaches and I lay on my back, letting the rolling motion of the ocean gently take me in for a bit, until it’s slowly fading and crashes in foam on the beach nearby. I swim out a bit farther out in order to catch the potential big waves I know will come.

    It’s much about waiting, as every surfer would know. I don’t claim to be one, but I think I understand the art of waiting for the right moment. I don’t want to tire myself out for the wrong wave. While waiting, there are lots of things to do: think of that thing you’ll need to do tomorrow, about that you need to work out more, about how the sun is so nice and strong today, or just think of nothing but yourself and the ocean.

    A huge wave comes in. Builds up. I can feel that tingling feeling of that I need to get myself in order fast fast fast. I swim out to get in position; right before it peaks I’m in the center of momentum and swim with it, towards the beach. It’s too fast, I should’ve been farther out, but nothing I can do about that now, is it. This is just about damage control now. The wave doesn’t care, it marches on, taking my legs with it from behind, and everything around me becomes a blurry green-blueish sheet. Now the wave is close to the sea bottom, and I will go from being in the laundry machine to be smacked like a shirt on the rocks. The sand bottom comes from nowhere, and I got the pleasent surprise of meeting it upfront. Scratches my back, and I know that’s gonna hurt for a day. The wave drags me all the way to knee deep water, just do die out. I love this: not to be in control, to be in a natural chaos, and realise that to win the fight you shouldn’t fight at all.

    I was hammered. Crushed. Since I didn’t took the right decisions when I needed to. Since I decided to try to take on the wave where I wasn’t ready. But I’m happy, like a little bird that just made its way out in the world, and got a bit roughed up. “Next time”. I walk out in the water, and swim out.

    Now what if you exchange the “waves” above with “people”?

    \ No newline at end of file +The Ocean / Johan Brook

    The Ocean

    About 4 min reading time

    To see a World in a Grain of Sand
    And a Heaven in a Wild Flower,
    Hold Infinity in the palm of your hand
    And Eternity in an hour.

    Auguries of Innocence, William Blake

    I approach the water. The first, smooth, clinging stretch of a wave reaches me and feels like liquid air, since the water has no temperature. It’s just there. It’s always been there. Like the beach I’m at, like the green mountains rising around us. Honest and eternal. The ocean begs for a visit.

    The sound of the waves drenches my thoughts, tightens my guard.

    I respect the ocean, I’ve always has. I love it, but respect it. Love without respect is just carelessness. Respect without love is cowardness. You can kill a bird by loving it too much you’ll never set it free. You can live a life never speaking with the girl next door, just to witness the moment when it’s too late. It’s so easy feeling cocky when in the ocean. You’re free, you’re in control, you can feel the sandy bottom comfortly beneath your feet. But as with most natural things, you’re never ever in complete control.

    A medium sized wave is coming in. The physics of it is excellent: I can see it building up from afar, collecting power. Power from all the oceans behind it. The ridge starts appearing, like a sand dune. I’m far away from where I really wanna be — in the ridge area — so I’ll need to tackle this one from the front. The ridge continues to roll and build and roll and build up to a graceful, merciless gap of water with white foam like teeth at the top.

    The wall approaches. Depending on the size of the wave, you can do two things. If it’s a small to medium one, just stand where you are, refuse to curl up to a ball in front of the wave. Stand up resilient, like a Greek warrior, with your arm stretched forward like an arrow through the water. Turn sideways, not exposing the width of your torso for the wave. Steady, like an arrow, you will pierce the wall of water and appear unhurt on the other side. The other technique, when the wave is large, is to dive through it. Again, like an arrow, aim for the roots of the wave with your hands above your head and thrust through it. Some people aim for the body — the center area — of the mass of water, but that’ll be like jumping straight into a wall. The wave is incredibly powerful, with all its momentum, precisely in the center. You don’t wanna face that energy of a thousands oceans behind it. Remember to account of the aftermaths of the wave — the backwaters.

    I come up behind the wave, feeling the currents that came with it. The main current beneath the water surface is strong today. One thing I learnt from the ocean is that it always takes back things belonging to it. And other things too. Objects from the ocean often return to the ocean whether they like it or not. I’m farther out now, not feeling the sea bottom anymore. No safety line, just depending on my body’s stamina. Another wave approaches and I lay on my back, letting the rolling motion of the ocean gently take me in for a bit, until it’s slowly fading and crashes in foam on the beach nearby. I swim out a bit farther out in order to catch the potential big waves I know will come.

    It’s much about waiting, as every surfer would know. I don’t claim to be one, but I think I understand the art of waiting for the right moment. I don’t want to tire myself out for the wrong wave. While waiting, there are lots of things to do: think of that thing you’ll need to do tomorrow, about that you need to work out more, about how the sun is so nice and strong today, or just think of nothing but yourself and the ocean.

    A huge wave comes in. Builds up. I can feel that tingling feeling of that I need to get myself in order fast fast fast. I swim out to get in position; right before it peaks I’m in the center of momentum and swim with it, towards the beach. It’s too fast, I should’ve been farther out, but nothing I can do about that now, is it. This is just about damage control now. The wave doesn’t care, it marches on, taking my legs with it from behind, and everything around me becomes a blurry green-blueish sheet. Now the wave is close to the sea bottom, and I will go from being in the laundry machine to be smacked like a shirt on the rocks. The sand bottom comes from nowhere, and I got the pleasent surprise of meeting it upfront. Scratches my back, and I know that’s gonna hurt for a day. The wave drags me all the way to knee deep water, just do die out. I love this: not to be in control, to be in a natural chaos, and realise that to win the fight you shouldn’t fight at all.

    I was hammered. Crushed. Since I didn’t took the right decisions when I needed to. Since I decided to try to take on the wave where I wasn’t ready. But I’m happy, like a little bird that just made its way out in the world, and got a bit roughed up. “Next time”. I walk out in the water, and swim out.

    Now what if you exchange the “waves” above with “people”?

    \ No newline at end of file diff --git a/writings/the-road-to-the-37signals-homepage-redesign/index.html b/writings/the-road-to-the-37signals-homepage-redesign/index.html index 13c1c3a11..7d4a65eaa 100644 --- a/writings/the-road-to-the-37signals-homepage-redesign/index.html +++ b/writings/the-road-to-the-37signals-homepage-redesign/index.html @@ -1 +1 @@ -The road to the 37signals homepage redesign / Johan Brook

    The road to the 37signals homepage redesign

    About 1 min reading time

    Follow link to 37signals.com →

    Jamie of 37signals talk about the process behind the realigning of 37signals.com. Cool to read about the several iterations.

    \ No newline at end of file +The road to the 37signals homepage redesign / Johan Brook

    The road to the 37signals homepage redesign

    About 1 min reading time

    Follow link to 37signals.com →

    Jamie of 37signals talk about the process behind the realigning of 37signals.com. Cool to read about the several iterations.

    \ No newline at end of file diff --git a/writings/the-shape-of-design/index.html b/writings/the-shape-of-design/index.html index 483ae8e89..84ea62b8e 100644 --- a/writings/the-shape-of-design/index.html +++ b/writings/the-shape-of-design/index.html @@ -1 +1 @@ -"The Shape of Design" / Johan Brook

    "The Shape of Design"

    About 1 min reading time

    Follow link to kickstarter.com →

    Frank Chimero is thinking of writing a book about design. Huge. That’s the same as if Steve Jobs would write a book about consumer products, or if Jimmy Page would write about guitars. Man I look forward to this one. Check out the cute video he made as well.

    \ No newline at end of file +"The Shape of Design" / Johan Brook

    "The Shape of Design"

    About 1 min reading time

    Follow link to kickstarter.com →

    Frank Chimero is thinking of writing a book about design. Huge. That’s the same as if Steve Jobs would write a book about consumer products, or if Jimmy Page would write about guitars. Man I look forward to this one. Check out the cute video he made as well.

    \ No newline at end of file diff --git a/writings/the-slow-web-movement/index.html b/writings/the-slow-web-movement/index.html index bb0186664..bbe8cf703 100644 --- a/writings/the-slow-web-movement/index.html +++ b/writings/the-slow-web-movement/index.html @@ -1 +1 @@ -The Slow Web Movement / Johan Brook

    The Slow Web Movement

    About 2 min reading time

    Follow link to blog.jackcheng.com →

    First time I’ve thought of a “Slow Web” movement: related to the Slow Food equivalent.

    What is the Fast Web? It’s the out of control web. The oh my god there’s so much stuff and I can’t possibly keep up web. It’s the spend two dozen times a day checking web. The in one end out the other web. The web designed to appeal to the basest of our intellectual palettes, the salt, sugar and fat of online content web. It’s the scale hard and fast web. The create a destination for billions of people web. The you have two hundred twenty six new updates web. Keep up or be lost. Click me. Like me. Tweet me. Share me. The Fast Web demands that you do things and do them now. The author brings up Instapaper as an example of a Slow Web product: I may be stretching my analogy a bit here, but it’s kind of like boxing up a meal and putting it away in the fridge for when you’re hungry, except in this case, it doesn’t lose as much of its taste. I’ve actually thought of this during the past weeks. During the summer I work as web developer and designer at an consultancy firm, and am responsible for some things. That means there’s lot of communication. E-mail, todos, documenting, and more. The thing is with digital communication is that it’s always there, slipping through my mental blocks which are set up to protect my “creative working mode”. Of course notifications may be turned off, but that’s not fixing the core problem.

    I found the author’s thoughts on “Rhythm vs. Random” interesting. That’s something you could do yourself: instead of dropping everything you do and answering that e-mail, prepare some time twice a day to check and answer all the e-mails.

    I understand that you lose the instant communication that e-mail involves — but everything isn’t urgent. Some things can wait, like some tweets. Or good food.

    \ No newline at end of file +The Slow Web Movement / Johan Brook

    The Slow Web Movement

    About 2 min reading time

    Follow link to blog.jackcheng.com →

    First time I’ve thought of a “Slow Web” movement: related to the Slow Food equivalent.

    What is the Fast Web? It’s the out of control web. The oh my god there’s so much stuff and I can’t possibly keep up web. It’s the spend two dozen times a day checking web. The in one end out the other web. The web designed to appeal to the basest of our intellectual palettes, the salt, sugar and fat of online content web. It’s the scale hard and fast web. The create a destination for billions of people web. The you have two hundred twenty six new updates web. Keep up or be lost. Click me. Like me. Tweet me. Share me. The Fast Web demands that you do things and do them now. The author brings up Instapaper as an example of a Slow Web product: I may be stretching my analogy a bit here, but it’s kind of like boxing up a meal and putting it away in the fridge for when you’re hungry, except in this case, it doesn’t lose as much of its taste. I’ve actually thought of this during the past weeks. During the summer I work as web developer and designer at an consultancy firm, and am responsible for some things. That means there’s lot of communication. E-mail, todos, documenting, and more. The thing is with digital communication is that it’s always there, slipping through my mental blocks which are set up to protect my “creative working mode”. Of course notifications may be turned off, but that’s not fixing the core problem.

    I found the author’s thoughts on “Rhythm vs. Random” interesting. That’s something you could do yourself: instead of dropping everything you do and answering that e-mail, prepare some time twice a day to check and answer all the e-mails.

    I understand that you lose the instant communication that e-mail involves — but everything isn’t urgent. Some things can wait, like some tweets. Or good food.

    \ No newline at end of file diff --git a/writings/the-white-duck/index.html b/writings/the-white-duck/index.html index b2dd9f6ca..1f7eff222 100644 --- a/writings/the-white-duck/index.html +++ b/writings/the-white-duck/index.html @@ -1 +1 @@ -The White Duck / Johan Brook

    The White Duck

    About 5 min reading time

    The White Duck was, on the surface, lonely. She was not vicious, stupid, or bad in any way. She was just different from the rest of the ducks. It is not known whether it was the colour of her feathers, or lack thereof, who set her apart. Even though I am skeptical to that, it surely didn’t strengthen her case.

    The others would initially tease her about the white feathers, since they assumed she thought she was special and better than them with their murky, brown patterned shrouds. “She’ll surely not last long out there”, they would say. “Any hawk would take her first, she shines like a piece of glass! Good riddance”.

    Ducks are, by the Good Nature, living together with other ducks. You seldom see them walk around lonely on a yard — if you see one scouting with a tall neck, you can be sure the other is close by in the bushes. I am not sure how a duck would behave if it was being the sole duck on a farm. I do not think anybody knows that, since it has never happened. “We’ve always been together, that’s the way it should be”, said Richard.

    Richard — who was the leader duck at the time — was, as most male ducks are, grand, beautiful, and had a blueish hue on his neck. His main duties did not include too much except for scaring off intruders and predators (the last task was, as you can imagine, something no duck had ever succeeded in). He was however a clever duck (also very unique), and even though he had never travelled outside the borders of the farm, he thought he knew how the world and universe worked, as Good Nature itself had told him. He respected Good Nature very much. But above all, he respected and treasured the “duckumity” – a community of ducks living together on a farm.

    A duckumity was to its core consisting of warmth, friendship, routine, sharing, cooperation, and ultimately love between its member ducks. All ducks had forever lived in duckumities — even if there were just ducks in pair or a group of eight. It was said that in the beginning, ducks were actually roaming the earth alone or with a partner — not in groups at all. Modern ducks of course found that silly and unrealistic. They could actually not begin to think of how it would be to break away from a duckumity. It was like trying to imagine a new feather colour.

    The White Duck roamed on the farm: explored its borders, stayed out late in the evenings, befriended the shady magpies and mice. They had in the passing mentioned the existence of other lands, outside the boundaries of the farm, and even beyond the farm next to this. Even though the White Duck was a very forward thinking and open minded duck, she had initially troubles understanding how there could be other lands, where the animals would not look like they did here. They even spoke another language! But after a while, a seed in her heart was growing. A seed with a promise of exploring and experiencing something beyond the farm.

    When the White Duck spoke her mind about these things with the duckumity, Richard would get so upset that he would scare her away from the group in that silly way only ducks can do (put the beak down and charge towards the target like a bull. It is not known if the ducks truly believes they are bulls by doing this). But the White Duck was special in this case: she would not get disheartened or put down by the treatment of the others. She was alone, but she found a certain … calm in the solitude created for her. She would toil on in the bushes and grass, never complain, and come home every night with her white feathers soiled by the dirt splashed up from the rain.

    One day, the duckumity confronted the White Duck, since her behaviour had become extremely obnoxious and repulsive. She spoke about a “constant life on the road, not having a home, meeting new ducks every day”. Richard, who was by all means not evil or vicious in any way, decided to take up the argument with her once and for all:

    “My dear White Duck. Nobody of us in the duckumity can comprehend why you would possibly want to leave this lovely living arrangement we have here on the farm. We have everything we need. When you’re alone, you can quack with a fellow duck. When you’re sad, you can seek advice of a fellow duck. We’re all in this together, don’t you see? Whenever your soul is weary, when you can’t waddle another waddle more, don’t you wish to seek the comfort of your friends?”

    “Well, Richard. Foremost, I haven’t had the pleasure of experiencing the things you describe, just because I’m different from you. In fact, you have alienated me even more with your behaviour, leading you to hate me even more. You despise me and what I stand for, and I pity you for that. I absolutely see the positive aspects of a duckumity. I too see potential for love and family, and what good that may bring to my soul. But I just can’t stand staying here knowing that something else is out there. And that is where you and me differ: you can live with that, I cannot”.

    “But why are you so desperately seeking this ‘something else’?! What’s wrong with this farm? What’s wrong with us? Who are you going to talk to when the going gets tough? It might be exhilarating in the beginning on the road, but mind that you have no duck apart from yourself out there. No duck to share your happiness or sorrow with. No duck to share the burdens of life with. Here, you can do that. Don’t you see that it’s not reality unless it’s shared? The reality you think exist out there accounts for nothing”.

    “Because I will be able to contribute to the duckumity so much more if I seek the unknown now, while I’m young and strong. I don’t want to sink into the safe cradle of age, with my thoughts being set in stone, without challenged my way of thinking. Without exposed myself of thoughts from other ducks out there – ducks who’ve seen things I have not, or perhaps even look like me! I’m not different because I want to, I am different because I need to. It’s not about leaving this duckumity — it’s about arriving in my own inner duckumity. It’s my own responsibility to to everything I can to get as many perspectives on life as I can, before I do something evil, like making decisions without context, judging a fellow dock without empathy, or carrying malice towards sparrows without even talking to one”.

    Richard, who as previously mentioned was quite clever, did in this moment get a glimpse of a beak of how the White Duck reasoned. There were no black and white feathers here. Richard and the others could not judge the White Duck because of her angst to see more of the world. “Quack and let quack”, as it was said amongst ducks. He felt somewhere that she understood what Richard meant and loved with the duckumity, but that she actively chose something else right now.

    “Right, White Duck”. I cannot say I share your world view, perhaps I never will, but my sincere opinion is that you should go away from here, instead of being miserable at the farm. If you’re away long enough, I have the chance of preparing the others for hearing your stories when or if you return.

    The White Duck understood the hidden blessing and “Good luck” in Richard’s statement.

    She set off in the morning the next day.

    White duck
    The real White Duck, who still roams on our farm (she hasn’t left. Yet).
    \ No newline at end of file +The White Duck / Johan Brook

    The White Duck

    About 5 min reading time

    The White Duck was, on the surface, lonely. She was not vicious, stupid, or bad in any way. She was just different from the rest of the ducks. It is not known whether it was the colour of her feathers, or lack thereof, who set her apart. Even though I am skeptical to that, it surely didn’t strengthen her case.

    The others would initially tease her about the white feathers, since they assumed she thought she was special and better than them with their murky, brown patterned shrouds. “She’ll surely not last long out there”, they would say. “Any hawk would take her first, she shines like a piece of glass! Good riddance”.

    Ducks are, by the Good Nature, living together with other ducks. You seldom see them walk around lonely on a yard — if you see one scouting with a tall neck, you can be sure the other is close by in the bushes. I am not sure how a duck would behave if it was being the sole duck on a farm. I do not think anybody knows that, since it has never happened. “We’ve always been together, that’s the way it should be”, said Richard.

    Richard — who was the leader duck at the time — was, as most male ducks are, grand, beautiful, and had a blueish hue on his neck. His main duties did not include too much except for scaring off intruders and predators (the last task was, as you can imagine, something no duck had ever succeeded in). He was however a clever duck (also very unique), and even though he had never travelled outside the borders of the farm, he thought he knew how the world and universe worked, as Good Nature itself had told him. He respected Good Nature very much. But above all, he respected and treasured the “duckumity” – a community of ducks living together on a farm.

    A duckumity was to its core consisting of warmth, friendship, routine, sharing, cooperation, and ultimately love between its member ducks. All ducks had forever lived in duckumities — even if there were just ducks in pair or a group of eight. It was said that in the beginning, ducks were actually roaming the earth alone or with a partner — not in groups at all. Modern ducks of course found that silly and unrealistic. They could actually not begin to think of how it would be to break away from a duckumity. It was like trying to imagine a new feather colour.

    The White Duck roamed on the farm: explored its borders, stayed out late in the evenings, befriended the shady magpies and mice. They had in the passing mentioned the existence of other lands, outside the boundaries of the farm, and even beyond the farm next to this. Even though the White Duck was a very forward thinking and open minded duck, she had initially troubles understanding how there could be other lands, where the animals would not look like they did here. They even spoke another language! But after a while, a seed in her heart was growing. A seed with a promise of exploring and experiencing something beyond the farm.

    When the White Duck spoke her mind about these things with the duckumity, Richard would get so upset that he would scare her away from the group in that silly way only ducks can do (put the beak down and charge towards the target like a bull. It is not known if the ducks truly believes they are bulls by doing this). But the White Duck was special in this case: she would not get disheartened or put down by the treatment of the others. She was alone, but she found a certain … calm in the solitude created for her. She would toil on in the bushes and grass, never complain, and come home every night with her white feathers soiled by the dirt splashed up from the rain.

    One day, the duckumity confronted the White Duck, since her behaviour had become extremely obnoxious and repulsive. She spoke about a “constant life on the road, not having a home, meeting new ducks every day”. Richard, who was by all means not evil or vicious in any way, decided to take up the argument with her once and for all:

    “My dear White Duck. Nobody of us in the duckumity can comprehend why you would possibly want to leave this lovely living arrangement we have here on the farm. We have everything we need. When you’re alone, you can quack with a fellow duck. When you’re sad, you can seek advice of a fellow duck. We’re all in this together, don’t you see? Whenever your soul is weary, when you can’t waddle another waddle more, don’t you wish to seek the comfort of your friends?”

    “Well, Richard. Foremost, I haven’t had the pleasure of experiencing the things you describe, just because I’m different from you. In fact, you have alienated me even more with your behaviour, leading you to hate me even more. You despise me and what I stand for, and I pity you for that. I absolutely see the positive aspects of a duckumity. I too see potential for love and family, and what good that may bring to my soul. But I just can’t stand staying here knowing that something else is out there. And that is where you and me differ: you can live with that, I cannot”.

    “But why are you so desperately seeking this ‘something else’?! What’s wrong with this farm? What’s wrong with us? Who are you going to talk to when the going gets tough? It might be exhilarating in the beginning on the road, but mind that you have no duck apart from yourself out there. No duck to share your happiness or sorrow with. No duck to share the burdens of life with. Here, you can do that. Don’t you see that it’s not reality unless it’s shared? The reality you think exist out there accounts for nothing”.

    “Because I will be able to contribute to the duckumity so much more if I seek the unknown now, while I’m young and strong. I don’t want to sink into the safe cradle of age, with my thoughts being set in stone, without challenged my way of thinking. Without exposed myself of thoughts from other ducks out there – ducks who’ve seen things I have not, or perhaps even look like me! I’m not different because I want to, I am different because I need to. It’s not about leaving this duckumity — it’s about arriving in my own inner duckumity. It’s my own responsibility to to everything I can to get as many perspectives on life as I can, before I do something evil, like making decisions without context, judging a fellow dock without empathy, or carrying malice towards sparrows without even talking to one”.

    Richard, who as previously mentioned was quite clever, did in this moment get a glimpse of a beak of how the White Duck reasoned. There were no black and white feathers here. Richard and the others could not judge the White Duck because of her angst to see more of the world. “Quack and let quack”, as it was said amongst ducks. He felt somewhere that she understood what Richard meant and loved with the duckumity, but that she actively chose something else right now.

    “Right, White Duck”. I cannot say I share your world view, perhaps I never will, but my sincere opinion is that you should go away from here, instead of being miserable at the farm. If you’re away long enough, I have the chance of preparing the others for hearing your stories when or if you return.

    The White Duck understood the hidden blessing and “Good luck” in Richard’s statement.

    She set off in the morning the next day.

    White duck
    The real White Duck, who still roams on our farm (she hasn’t left. Yet).
    \ No newline at end of file diff --git a/writings/thomas-fuchs-web-dev-tools/index.html b/writings/thomas-fuchs-web-dev-tools/index.html index 95745d709..91185b876 100644 --- a/writings/thomas-fuchs-web-dev-tools/index.html +++ b/writings/thomas-fuchs-web-dev-tools/index.html @@ -1 +1 @@ -Thomas Fuchs' web dev tools / Johan Brook

    Thomas Fuchs' web dev tools

    About 1 min reading time

    Follow link to mir.aculo.us →

    IDEs are not my kind of idea of how software should be developed. If your programming language, toolkit or library is so extensive and complicated that you need an IDE to develop, something is wrong. Small is beautiful. A plain old text editor is enough to make the world’s most amazing web applications.

    \ No newline at end of file +Thomas Fuchs' web dev tools / Johan Brook

    Thomas Fuchs' web dev tools

    About 1 min reading time

    Follow link to mir.aculo.us →

    IDEs are not my kind of idea of how software should be developed. If your programming language, toolkit or library is so extensive and complicated that you need an IDE to develop, something is wrong. Small is beautiful. A plain old text editor is enough to make the world’s most amazing web applications.

    \ No newline at end of file diff --git a/writings/thoughts-on-freedom-creativity-and-the-internet/index.html b/writings/thoughts-on-freedom-creativity-and-the-internet/index.html index 330e5b490..b5f66fb3f 100644 --- a/writings/thoughts-on-freedom-creativity-and-the-internet/index.html +++ b/writings/thoughts-on-freedom-creativity-and-the-internet/index.html @@ -1 +1 @@ -Thoughts on freedom, creativity and the internet / Johan Brook

    Thoughts on freedom, creativity and the internet

    About 2 min reading time

    The internet is awesome. This is an impulse post I felt I just had to write, since the subject hit me: how truly wonderful the internet is, and how code and freedom are so tightly linked.

    We have the wonderful philosophy of Open Source. It’s regulated by several licenses, but no true committee of some sort. Sure it’s anarchy, but a wonderful anarchy. To me Open Source is in its essence a unique creation by us humans, and reflects what I think is vital to many things (unrelated to software) — sharing. Sharing stuff is awesome. Sharing discoveries, code, insights, assets, techniques — knowledge in all kinds of ways. I wouldn’t be able to do what I love without that phenomenon.

    Linked to Open Source there’s sites like GitHub which brings web creators together. Never before has it been easier to start hacking on a project (even large-scale ones). I’ve gained so much knowledge from browsing around other people’s code on GitHub. Pulling down projects, fixing issues, discussing decisions, adding features — it’s all so easy with today’s tools and communities. It’s intoxicating.

    During the past couple of years the idea of open data and APIs has been growing stronger. It’s wicked cool watching all kinds of services and apps being created on top of free for all data.

    When I finally started to get my eyes off PHP and checked out other languages for web development, I was blown off by the huge pain of deploying the resulting hacks. Sure — Ruby and Python was beautiful, cool and hipster, but how could I put them online? I had no idea (even to this day, I have very vague knowledge about deploying Ruby code on a custom server). Then came Heroku and other app platform services. And they are awesome. The time it takes to setup and deploy a simple Rails app on Heroku is almost shorter than what it takes to make my morning coffee. And the basic plan for quick hacks is free! Crazy cool.

    All the paragraphs above describes what I absolutely love about the internet and our technologies.

    Anyone is able to create anything from anywhere

    With some willpower, a computer, ideas, and an eagerness to learn, anyone can create and publish on the internet.

    And it’s all built and driven by humans with a passion for creating things

    Sometimes I love the internet so much it hurts.

    \ No newline at end of file +Thoughts on freedom, creativity and the internet / Johan Brook

    Thoughts on freedom, creativity and the internet

    About 2 min reading time

    The internet is awesome. This is an impulse post I felt I just had to write, since the subject hit me: how truly wonderful the internet is, and how code and freedom are so tightly linked.

    We have the wonderful philosophy of Open Source. It’s regulated by several licenses, but no true committee of some sort. Sure it’s anarchy, but a wonderful anarchy. To me Open Source is in its essence a unique creation by us humans, and reflects what I think is vital to many things (unrelated to software) — sharing. Sharing stuff is awesome. Sharing discoveries, code, insights, assets, techniques — knowledge in all kinds of ways. I wouldn’t be able to do what I love without that phenomenon.

    Linked to Open Source there’s sites like GitHub which brings web creators together. Never before has it been easier to start hacking on a project (even large-scale ones). I’ve gained so much knowledge from browsing around other people’s code on GitHub. Pulling down projects, fixing issues, discussing decisions, adding features — it’s all so easy with today’s tools and communities. It’s intoxicating.

    During the past couple of years the idea of open data and APIs has been growing stronger. It’s wicked cool watching all kinds of services and apps being created on top of free for all data.

    When I finally started to get my eyes off PHP and checked out other languages for web development, I was blown off by the huge pain of deploying the resulting hacks. Sure — Ruby and Python was beautiful, cool and hipster, but how could I put them online? I had no idea (even to this day, I have very vague knowledge about deploying Ruby code on a custom server). Then came Heroku and other app platform services. And they are awesome. The time it takes to setup and deploy a simple Rails app on Heroku is almost shorter than what it takes to make my morning coffee. And the basic plan for quick hacks is free! Crazy cool.

    All the paragraphs above describes what I absolutely love about the internet and our technologies.

    Anyone is able to create anything from anywhere

    With some willpower, a computer, ideas, and an eagerness to learn, anyone can create and publish on the internet.

    And it’s all built and driven by humans with a passion for creating things

    Sometimes I love the internet so much it hurts.

    \ No newline at end of file diff --git a/writings/timeless-fashion/index.html b/writings/timeless-fashion/index.html index 7e86bad26..cada12c6d 100644 --- a/writings/timeless-fashion/index.html +++ b/writings/timeless-fashion/index.html @@ -1 +1 @@ -Timeless fashion / Johan Brook

    Timeless fashion

    About 1 min reading time

    Follow link to usabilitypost.com →

    Dmitry Fadeyev:

    His [Ive’s] latest designs are a tribute to Dieter Rams, who sought to produce the timeless through ruthless, methodical elimination. Rams approach produced work that was clean, simple and could stand the test of time because it was not a work of style but his best solution to the given problem. Call me a boring northern European, but I like the clean, simple, functional industrial designs of Braun, Apple, IKEA, et al.

    \ No newline at end of file +Timeless fashion / Johan Brook

    Timeless fashion

    About 1 min reading time

    Follow link to usabilitypost.com →

    Dmitry Fadeyev:

    His [Ive’s] latest designs are a tribute to Dieter Rams, who sought to produce the timeless through ruthless, methodical elimination. Rams approach produced work that was clean, simple and could stand the test of time because it was not a work of style but his best solution to the given problem. Call me a boring northern European, but I like the clean, simple, functional industrial designs of Braun, Apple, IKEA, et al.

    \ No newline at end of file diff --git a/writings/tower-an-upcoming-git-client-for-mac/index.html b/writings/tower-an-upcoming-git-client-for-mac/index.html index 357c5b517..a37f9d2e1 100644 --- a/writings/tower-an-upcoming-git-client-for-mac/index.html +++ b/writings/tower-an-upcoming-git-client-for-mac/index.html @@ -1 +1 @@ -Tower – an upcoming Git client for Mac / Johan Brook

    Tower – an upcoming Git client for Mac

    About 1 min reading time

    Follow link to git-tower.com →

    Git Tower Tower is an upcoming Mac client for the Git versioning system, and it looks good. I’m still a noob on Git, so I guess I would find it very useful, and maybe even power users in large projects would too. Anyhow I think it’s great that it exists a native client for Mac — like Sequel Pro for MySQL databases. Choice is good. The command line doesn’t always cut it, and web based is … yeah, web based. It doesn’t say if it’s paid or free, but the developers are on Twitter ( @gittower), and Tower is coming this November.

    \ No newline at end of file +Tower – an upcoming Git client for Mac / Johan Brook

    Tower – an upcoming Git client for Mac

    About 1 min reading time

    Follow link to git-tower.com →

    Git Tower Tower is an upcoming Mac client for the Git versioning system, and it looks good. I’m still a noob on Git, so I guess I would find it very useful, and maybe even power users in large projects would too. Anyhow I think it’s great that it exists a native client for Mac — like Sequel Pro for MySQL databases. Choice is good. The command line doesn’t always cut it, and web based is … yeah, web based. It doesn’t say if it’s paid or free, but the developers are on Twitter ( @gittower), and Tower is coming this November.

    \ No newline at end of file diff --git a/writings/trickle-another-kind-of-twitter-client/index.html b/writings/trickle-another-kind-of-twitter-client/index.html index 325be328c..fac92aadf 100644 --- a/writings/trickle-another-kind-of-twitter-client/index.html +++ b/writings/trickle-another-kind-of-twitter-client/index.html @@ -1 +1 @@ -Trickle: another kind of Twitter client / Johan Brook

    Trickle: another kind of Twitter client

    About 1 min reading time

    Follow link to trickleapp.com →

    Twitter clients come and go, but this one had me at “Helvetica”. Trickle is a client which doesn’t have all features you’re used to. Tweets from your timeline is “trickling” in white Helvetica on the dark screen from the right while the device quietly sits on your desk (preferably in a dock). It does three things: shows tweets, retweets and favorites. Very simple. No profiles, links, replies, DMs, etc. Just plain and raw tweets. I think it’s quite perfect. To have your Twitter stream on the side makes it subtle and non-disturbing. I don’t like tabbing to a designated Twitter client/Twitter.com to check stuff. Now I can just throw a glance at the iPhone. It’s universal and therefore works with the iPad, and I can only imagine how nice Trickle would look on a larger iPad display on your desk.

    \ No newline at end of file +Trickle: another kind of Twitter client / Johan Brook

    Trickle: another kind of Twitter client

    About 1 min reading time

    Follow link to trickleapp.com →

    Twitter clients come and go, but this one had me at “Helvetica”. Trickle is a client which doesn’t have all features you’re used to. Tweets from your timeline is “trickling” in white Helvetica on the dark screen from the right while the device quietly sits on your desk (preferably in a dock). It does three things: shows tweets, retweets and favorites. Very simple. No profiles, links, replies, DMs, etc. Just plain and raw tweets. I think it’s quite perfect. To have your Twitter stream on the side makes it subtle and non-disturbing. I don’t like tabbing to a designated Twitter client/Twitter.com to check stuff. Now I can just throw a glance at the iPhone. It’s universal and therefore works with the iPad, and I can only imagine how nice Trickle would look on a larger iPad display on your desk.

    \ No newline at end of file diff --git a/writings/twitter-is-the-benjamin-button-of-startups/index.html b/writings/twitter-is-the-benjamin-button-of-startups/index.html index df555eb05..fabc926f3 100644 --- a/writings/twitter-is-the-benjamin-button-of-startups/index.html +++ b/writings/twitter-is-the-benjamin-button-of-startups/index.html @@ -1 +1 @@ -"Twitter is the Benjamin Button of startups" / Johan Brook

    "Twitter is the Benjamin Button of startups"

    About 1 min reading time

    Follow link to plus.google.com →

    Andrey Petrov:

    Twitter is the Benjamin Button of startups.

    Born out of wisdom and insight in our daily social behaviour, completely changing the way we communicate. Soon grown into a heroic Atlas, holding up the world of third-party developers on its shoulders, thriving as the platform rises along with thousands of apps and services transforming the experience. Dusk approaches when Twitter sheds its desire to leave a mark on humanity and finds itself destined to die as a single-feature web-based MVP. A sparkle in a developer’s eye.

    Interesting thought. I find it sad that Twitter has become the thing it’s become. Anti 3rd party, strict API rules, sell-out ads business model, etc. etc. Not the small, fun and loving startup it once was.

    I guess it’s “You either die as a hero, or you live long enough to see yourself become the villain”.

    \ No newline at end of file +"Twitter is the Benjamin Button of startups" / Johan Brook

    "Twitter is the Benjamin Button of startups"

    About 1 min reading time

    Follow link to plus.google.com →

    Andrey Petrov:

    Twitter is the Benjamin Button of startups.

    Born out of wisdom and insight in our daily social behaviour, completely changing the way we communicate. Soon grown into a heroic Atlas, holding up the world of third-party developers on its shoulders, thriving as the platform rises along with thousands of apps and services transforming the experience. Dusk approaches when Twitter sheds its desire to leave a mark on humanity and finds itself destined to die as a single-feature web-based MVP. A sparkle in a developer’s eye.

    Interesting thought. I find it sad that Twitter has become the thing it’s become. Anti 3rd party, strict API rules, sell-out ads business model, etc. etc. Not the small, fun and loving startup it once was.

    I guess it’s “You either die as a hero, or you live long enough to see yourself become the villain”.

    \ No newline at end of file diff --git a/writings/universal-wrapping-paper/index.html b/writings/universal-wrapping-paper/index.html index 99ca3e913..e31730862 100644 --- a/writings/universal-wrapping-paper/index.html +++ b/writings/universal-wrapping-paper/index.html @@ -1 +1 @@ -Universal wrapping paper / Johan Brook

    Universal wrapping paper

    About 1 min reading time

    Follow link to davidairey.com →

    Clever idea: use this universal wrapping paper for all occasions. Just mark a special greeting (follow the link for more photos and a map of all greetings). It’s a smart and fun idea, but I could argue over the personal feel to it.

    \ No newline at end of file +Universal wrapping paper / Johan Brook

    Universal wrapping paper

    About 1 min reading time

    Follow link to davidairey.com →

    Clever idea: use this universal wrapping paper for all occasions. Just mark a special greeting (follow the link for more photos and a map of all greetings). It’s a smart and fun idea, but I could argue over the personal feel to it.

    \ No newline at end of file diff --git a/writings/unofficial-version-of-notational-velocity-adds-goodies/index.html b/writings/unofficial-version-of-notational-velocity-adds-goodies/index.html index 2668e5bf8..454222302 100644 --- a/writings/unofficial-version-of-notational-velocity-adds-goodies/index.html +++ b/writings/unofficial-version-of-notational-velocity-adds-goodies/index.html @@ -1 +1 @@ -Unofficial version of Notational Velocity adds goodies / Johan Brook

    Unofficial version of Notational Velocity adds goodies

    About 1 min reading time

    Follow link to elasticthreads.tumblr.com →

    Notational Velocity is a simple yet powerful writing app for OS X. It’s focusing on speed and just bare-bone note taking — with no frills. I’ve fallen in love with the app, since it also supports syncing with Simplenote. It’s the perfect triquetra: I’ve got my notes in the cloud, on my iPhone and in my Mac. Notational Velocity also saves the notes as plain text files on the hard drive — another layer of backup. The application doesn’t look that bad, but it’s no slick Apple Design Award stuff either. The unofficial release above, the fork, includes some changes to the layout. It brings an iPad like interface, with all notes to the left of the writing area instead of above. That could give more of an overview of all notes (I think it’s better since computer screens today of course are more wide than tall). Other tweaks include full screen mode and a way to hide the notes list. On of the best features of the fork is the option to hide the dock icon all together and use a menu bar icon instead. That’s really slick. I believe that a note taking app like Notational Velocity should be “in the background”, and not some designated app you switch to. You drop in — write the note — and drop out. That’s the reason for my affection for the post it notes in Dashboard. I press one keyboard shortcut and I’m in taking notes. So go ahead and download the fork from the link above and use it as the regular Notational Velocity. However, I don’t like the default dock icon for the app, so here’s a zip with a slick moleskine icon.

    \ No newline at end of file +Unofficial version of Notational Velocity adds goodies / Johan Brook

    Unofficial version of Notational Velocity adds goodies

    About 1 min reading time

    Follow link to elasticthreads.tumblr.com →

    Notational Velocity is a simple yet powerful writing app for OS X. It’s focusing on speed and just bare-bone note taking — with no frills. I’ve fallen in love with the app, since it also supports syncing with Simplenote. It’s the perfect triquetra: I’ve got my notes in the cloud, on my iPhone and in my Mac. Notational Velocity also saves the notes as plain text files on the hard drive — another layer of backup. The application doesn’t look that bad, but it’s no slick Apple Design Award stuff either. The unofficial release above, the fork, includes some changes to the layout. It brings an iPad like interface, with all notes to the left of the writing area instead of above. That could give more of an overview of all notes (I think it’s better since computer screens today of course are more wide than tall). Other tweaks include full screen mode and a way to hide the notes list. On of the best features of the fork is the option to hide the dock icon all together and use a menu bar icon instead. That’s really slick. I believe that a note taking app like Notational Velocity should be “in the background”, and not some designated app you switch to. You drop in — write the note — and drop out. That’s the reason for my affection for the post it notes in Dashboard. I press one keyboard shortcut and I’m in taking notes. So go ahead and download the fork from the link above and use it as the regular Notational Velocity. However, I don’t like the default dock icon for the app, so here’s a zip with a slick moleskine icon.

    \ No newline at end of file diff --git a/writings/use-the-current-color-in-css-with-the-currentcolor-keyword/index.html b/writings/use-the-current-color-in-css-with-the-currentcolor-keyword/index.html index c5420de3b..1decd9714 100644 --- a/writings/use-the-current-color-in-css-with-the-currentcolor-keyword/index.html +++ b/writings/use-the-current-color-in-css-with-the-currentcolor-keyword/index.html @@ -5,4 +5,4 @@ p span{ background: currentcolor; } -

    Firefox, Safari, Chrome and Opera supports the keyword but alas, not IE9 yet.

    \ No newline at end of file +

    Firefox, Safari, Chrome and Opera supports the keyword but alas, not IE9 yet.

    \ No newline at end of file diff --git a/writings/valve-the-truly-flat-hierarchy-company/index.html b/writings/valve-the-truly-flat-hierarchy-company/index.html index a43874a86..944b9c05b 100644 --- a/writings/valve-the-truly-flat-hierarchy-company/index.html +++ b/writings/valve-the-truly-flat-hierarchy-company/index.html @@ -1 +1 @@ -Valve – the truly flat hierarchy company / Johan Brook

    Valve – the truly flat hierarchy company

    About 1 min reading time

    Follow link to online.wsj.com →

    One study, by researchers at the University of Iowa and Texas A&M University, found that teams of factory workers who supervised themselves tended to outperform workers in more traditional hierarchies, so long as team members got along well. Interesting story about how flat company Valve really is. I’ve heard about it’s modern thinking about management, but didn’t think it was this flat. It could either go super good or really bad (as we know, it’s the former) — it feels like an experiment similar to “The Animal Farm” or something.

    \ No newline at end of file +Valve – the truly flat hierarchy company / Johan Brook

    Valve – the truly flat hierarchy company

    About 1 min reading time

    Follow link to online.wsj.com →

    One study, by researchers at the University of Iowa and Texas A&M University, found that teams of factory workers who supervised themselves tended to outperform workers in more traditional hierarchies, so long as team members got along well. Interesting story about how flat company Valve really is. I’ve heard about it’s modern thinking about management, but didn’t think it was this flat. It could either go super good or really bad (as we know, it’s the former) — it feels like an experiment similar to “The Animal Farm” or something.

    \ No newline at end of file diff --git a/writings/vertical-rhythm-wordpress-themes/index.html b/writings/vertical-rhythm-wordpress-themes/index.html index 386f2f6ba..8173ba234 100644 --- a/writings/vertical-rhythm-wordpress-themes/index.html +++ b/writings/vertical-rhythm-wordpress-themes/index.html @@ -1 +1 @@ -Vertical Rhythm Wordpress themes / Johan Brook

    Vertical Rhythm Wordpress themes

    About 1 min reading time

    Follow link to verticalrhythm.org →


    A site with two Wordpress themes heavily inspired (copied) from Swiss designer Müller-Brockmann. They are looking really good, I haven’t had the chance to try them though. I imagine this is something I would want to create myself as well.

    \ No newline at end of file +Vertical Rhythm Wordpress themes / Johan Brook

    Vertical Rhythm Wordpress themes

    About 1 min reading time

    Follow link to verticalrhythm.org →


    A site with two Wordpress themes heavily inspired (copied) from Swiss designer Müller-Brockmann. They are looking really good, I haven’t had the chance to try them though. I imagine this is something I would want to create myself as well.

    \ No newline at end of file diff --git a/writings/visualizing-webkits-hardware-acceleration/index.html b/writings/visualizing-webkits-hardware-acceleration/index.html index d06db63e0..65cff2c05 100644 --- a/writings/visualizing-webkits-hardware-acceleration/index.html +++ b/writings/visualizing-webkits-hardware-acceleration/index.html @@ -1,2 +1,2 @@ Visualizing WebKit's hardware acceleration / Johan Brook

    Visualizing WebKit's hardware acceleration

    About 1 min reading time

    Follow link to mir.aculo.us →

    Thomas Fuchs gives us a tip about viewing which elements of a website are powered by the device’s hardware. I’ve never ever heard of this before, but I’d bet it’s useful. The hardware accelerated areas show up in semi-transparent red. To use the feature, simply open up a Terminal prompt and write:

    $ CA_COLOR_OPAQUE=1 /Applications/Safari.app/Contents/MacOS/Safari
-

    Also possible to achieve in the iPhone Simulator.

    \ No newline at end of file +

    Also possible to achieve in the iPhone Simulator.

    \ No newline at end of file diff --git a/writings/webkit-to-get-css-variables-mixins-nesting/index.html b/writings/webkit-to-get-css-variables-mixins-nesting/index.html index b7b50bfe5..bd4e83a5a 100644 --- a/writings/webkit-to-get-css-variables-mixins-nesting/index.html +++ b/writings/webkit-to-get-css-variables-mixins-nesting/index.html @@ -43,4 +43,4 @@ } } } -

    This feels more natural and flexible. Changing the id attribute of the header? No problem, just change at one place in the code. The syntax in Sass and Less isn’t too far away from this one either.

    Outro

    I’ve been using Sass since last summer, and I always make use of it for every project by now. Since you compile to regular CSS, there are no compability issues whatsoever. The question is: if these fancy features would make into Safari and Chrome sometime in the future, how would we handle the stylesheets for Firefox, Internet Explorer and Opera? Separate ones? Nope, I wouldn’t think so. It has to be a standard to work out, and we all know that the working groups are slooow to decide things.

    For now Sass works great for me, but I think it’s time to make a serious attempt to push the features “into the broad mass”. To see some cleaner stylesheets out on the interwebz would be a godsend gift.

    \ No newline at end of file +

    This feels more natural and flexible. Changing the id attribute of the header? No problem, just change at one place in the code. The syntax in Sass and Less isn’t too far away from this one either.

    Outro

    I’ve been using Sass since last summer, and I always make use of it for every project by now. Since you compile to regular CSS, there are no compability issues whatsoever. The question is: if these fancy features would make into Safari and Chrome sometime in the future, how would we handle the stylesheets for Firefox, Internet Explorer and Opera? Separate ones? Nope, I wouldn’t think so. It has to be a standard to work out, and we all know that the working groups are slooow to decide things.

    For now Sass works great for me, but I think it’s time to make a serious attempt to push the features “into the broad mass”. To see some cleaner stylesheets out on the interwebz would be a godsend gift.

    \ No newline at end of file diff --git a/writings/what-matters/index.html b/writings/what-matters/index.html index 3e7f45da5..b720fa5eb 100644 --- a/writings/what-matters/index.html +++ b/writings/what-matters/index.html @@ -1 +1 @@ -What Matters / Johan Brook

    What Matters

    About 1 min reading time

    Follow link to 37signals.com →

    37signals posted a job ad on their blog today, and they’re looking for an interface designer. It’s a superb post. It describes the position in detail — by reading it I know exactly what the position is all about, and what’s expected from me. I get an insight in their work process and understand what they are looking for. But the most beautiful thing was near the bottom. Jason Fried put it: > It doesn’t matter where you went to school, or if you even graduated. It doesn’t matter if this is your first job or your fifth. Doing great work and being driven to improve yourself and everything you touch is what matters. That’s what’s all about. When employers demand experience and/or education, they put up hinders for the applicant. Energy is drained on polishing (lying in) your resume (at least early in your career), and that energy could be used for doing work to put together a great portfolio instead. That paragraph made it totally clear to me.

    \ No newline at end of file +What Matters / Johan Brook

    What Matters

    About 1 min reading time

    Follow link to 37signals.com →

    37signals posted a job ad on their blog today, and they’re looking for an interface designer. It’s a superb post. It describes the position in detail — by reading it I know exactly what the position is all about, and what’s expected from me. I get an insight in their work process and understand what they are looking for. But the most beautiful thing was near the bottom. Jason Fried put it: > It doesn’t matter where you went to school, or if you even graduated. It doesn’t matter if this is your first job or your fifth. Doing great work and being driven to improve yourself and everything you touch is what matters. That’s what’s all about. When employers demand experience and/or education, they put up hinders for the applicant. Energy is drained on polishing (lying in) your resume (at least early in your career), and that energy could be used for doing work to put together a great portfolio instead. That paragraph made it totally clear to me.

    \ No newline at end of file diff --git a/writings/whats-happened-so-far/index.html b/writings/whats-happened-so-far/index.html index ae5963c88..d5d71919b 100644 --- a/writings/whats-happened-so-far/index.html +++ b/writings/whats-happened-so-far/index.html @@ -1 +1 @@ -What's happened so far / Johan Brook

    What's happened so far

    About 6 min reading time

     ![Lookback team](/assets/posts/team-lookback.jpg)

    I haven’t written here for almost a year now, and some things have happened since.

    I’m happy with myself and my life, but I’ve missed writing: it feels like I’ve been silent or whatever for a long while. A blog is a great outlet, even if you don’t have anything in particular to say. My personal blog, log.johanbrook.com has been the mind dump since I started it, and it’s really awesome to just post things there.

    Getting a degree

    Last year, I did my Bachelor’s Thesis at my university: Chalmers University of Technology. It was great — I loved our project and my group members. The project was called RymdJS (“rymd” is Swedish for “space”), and is a modular, distributed system for peer-to-peer based encrypted storage. Basically, it enables you to send files to another person with P2P technology with web technologies in your browser. Pretty cool. Involves fancy tech like WebRTC, IndexedDB, and the HTML5 Crypto API. So much fun to work on. Here’s the final paper.

    I haven’t “had time” to formally request my Bachelor’s degree papers yet though.

    Lookback

    During the spring last year, I was contemplating what to do during summer. I had freelanced since 2010, and even though it’s kinda lucrative and connected with being free, I wasn’t too stoked about it. I wanted to work with and be passionate about a product in a team in which I could learn from. I was sick and tired of clients, and building things where the time of life was close to none. The chance would come when I contacted Jonatan Littke, whose startup, Lookback, had me impressed so much that I was so ready to apply for some kind of summer work.

    The original product of Lookback was based on a “quick hack” created by iOS wizard Nevyn Bengtsson while working at Spotify (Nevyn built the original Spotify app for iPhone and later iPad). He found a technique to record the screen, voice, face and touches of a user while using an iOS app — in super nice framerate. It was so good it could revolutionize how we collect feedback from consumers, do bug reporting, and UX research — basically in order to better understand people using digital products. Nevyn, Jonatan and Jonatan’s brother Carl started Lookback in 2013, and they were still the team when I emailed them in 2014.

    I emailed Jonatan with a (probably generic and polite) text, asking for the before mentioned consultancy work during the summer. Jonatan trolled around with me for a bit (it’s a “love language”) but we ended up getting along and decided that I’d join them for the summer before the beginning of my Master’s in Interaction Design at Chalmers.

    Working at Lookback during the summer was so awesome. I loved it. I could use my (pretty well developed) skills in building a product people used, I learned more about Meteor, I learned more about remote working (which is practiced at Lookback). They gave this long-haired guy (me) the freedom to potentially fuck up their code base. I shipped features and fixed bugs.

    I didn’t feel like a junior in the sense of the technology used — I was and still am perfectly aware of my skills in front-end web development, and I’ve used much tech (both back-end and front-end) during my days in school and during freelancing. This sounds cocky, but I never ever doubted my technical skills. However, what I learned was how little I knew about product development and building a large scale web app. I was taught how to:

    Communicate and work remotely

    The guys were in the same office, but communicated over chat with Flowdock. They had some consultants working remotely, and it’s been in Lookback’s ethos since its beginnings that remote work should be a baseline. I learned how to over communicate and explicitly ask for help and give status updates more than ever before. More on Lookback’s way of working in another post (I recommend Lookback’s blog in the meantime).

    Receive reviews

    Moving fast and breaking things is bullshit.

    Everyone in Lookback are concerned with design — product, UX, and UI. Especially Jonatan is a blood hound when reviewing features in the product (which of course is a good thing). Nothing beats manual QA. But I learned to hold my horses and go through my proposed solution or bug fix one more time. Moving fast and breaking things is bullshit. Jonatan taught me how to take a step back and see further than the checklist on the Trello card. How to ask “What if .. ?” questions regarding the usage of the product. “Does this create value? Can it be improved further?”. Tasks and features weren’t simply mine to take to just code up and release like a mindless zombie. I had “creative responsibility” for them, which means I had to care for them through the whole process: researching, planning, creating, releasing, monitoring, maintaining (common stuff).

    How freaking fun a startup is

    It’s like night and day compared to client work. Sure, it might be more pressure involved depending on things like funding, runway, and user engagement, but gosh it’s more fun caring for a long-lived product that coding on a promotional website for some weeks and deliver it - never to care for it again. It’s an incredible feeling building a product together with few other people, and have those magic moments of cheer, laughter, and joy with each other. I will always treasure that.

    Going for it

     ![](/assets/posts/lookback-working.jpg)  ![](/assets/posts/lookback-working-names.jpg)

    The end of the summer came, and the guys at Lookback asked me if I shouldn’t start working for them full time. I was really flattered, but responded robotically with something like: “I’m going to start my Master’s degree, and I really wanna finish it, so no thank you”. I held on to that thought for a long while, repeating it my head like a mantra. I had gone to university in the first place, much in order to attend that Master program.

    But I changed my mind. I’m in the IT industry, for god’s sake. What would I do with a Master’s degree? Create better web apps? Perhaps. Perhaps not. One thing was for sure: I didn’t want to “waste” the prime of my twenties attending school for another two years. To waste this chance to join in early in a tremendously promising startup, working with a product I loved, with people I loved, and miss out on all the learnings the courses at school couldn’t give me.

    Working in a startup is real. School is not. Academia might be interesting for a while, but no longer. I was done. I was tired of writing papers I didn’t care about, and the overall feel of not doing anything of value to me. Everybody are different. Some think they need more time in school in order to gain more knowledge, improve hard skills, network, and generally boost their resume in some way to land that sweet job after the Master’s thesis. I thought I needed some of those things. But then I realized many others had dropped out of school when they where younger and/or less skilled than me — why wouldn’t I?

    So I filed for “taking a sabbatical” (code for “I’m gonna start working and won’t probably come back”) and phoned Jonatan to say I accepted their offer. So then I became employee #1 at Lookback, and it felt so right.

    Now

     ![](/assets/posts/lookback-computers.jpg)

    Right now, Lookback has grown into a twelve people strong team, and we’ve moved our HQ to San Fransisco. The team consists of developers on two more platforms: Mac and Android, thanks to the acquisition of Quickcast from the UK, and the hire of the most clean-coding Java developer I’ve seen — Marcin from Poland. We also have Tobias (previously Spotify, GitHub) on design, Karim (previously Automattic) on QA/Support, Mai-Li (co-founder of Mutewatch) on Sales/Marketing, and Heidi (Geek Girls founder) on UX research. We’ve shipped a redesign. We’ve upped our growth and web dev game with Francis, whose opinions and conversations I deeply appreciate.

    We still do remote though. It’s in our DNA (we’re still learning new things with remote work at this team scale every day). It feels things have gone really fast since last summer, but I’m so proud and happy of my decision, and of the things I’ve created in Lookback. This is the best first full time job I’ll ever have :)

    What I love most about this way of working is the freedom. Freedom to work how I want, when I want, with (almost) what I want. It’s freedom with responsibility, and it has always suited me. By allowing full remote work, you’ll reach the best individuals — those who won’t go into an office, but instead creating miracles from their laptops in a café somewhere in south France.

    It’s the freedom to wake up when you want. It’s the freedom to work from wherever you want.

    It’s the freedom to form the environment around you, instead of the other way around.

    \ No newline at end of file +What's happened so far / Johan Brook

    What's happened so far

    About 6 min reading time

     ![Lookback team](/assets/posts/team-lookback.jpg)

    I haven’t written here for almost a year now, and some things have happened since.

    I’m happy with myself and my life, but I’ve missed writing: it feels like I’ve been silent or whatever for a long while. A blog is a great outlet, even if you don’t have anything in particular to say. My personal blog, log.johanbrook.com has been the mind dump since I started it, and it’s really awesome to just post things there.

    Getting a degree

    Last year, I did my Bachelor’s Thesis at my university: Chalmers University of Technology. It was great — I loved our project and my group members. The project was called RymdJS (“rymd” is Swedish for “space”), and is a modular, distributed system for peer-to-peer based encrypted storage. Basically, it enables you to send files to another person with P2P technology with web technologies in your browser. Pretty cool. Involves fancy tech like WebRTC, IndexedDB, and the HTML5 Crypto API. So much fun to work on. Here’s the final paper.

    I haven’t “had time” to formally request my Bachelor’s degree papers yet though.

    Lookback

    During the spring last year, I was contemplating what to do during summer. I had freelanced since 2010, and even though it’s kinda lucrative and connected with being free, I wasn’t too stoked about it. I wanted to work with and be passionate about a product in a team in which I could learn from. I was sick and tired of clients, and building things where the time of life was close to none. The chance would come when I contacted Jonatan Littke, whose startup, Lookback, had me impressed so much that I was so ready to apply for some kind of summer work.

    The original product of Lookback was based on a “quick hack” created by iOS wizard Nevyn Bengtsson while working at Spotify (Nevyn built the original Spotify app for iPhone and later iPad). He found a technique to record the screen, voice, face and touches of a user while using an iOS app — in super nice framerate. It was so good it could revolutionize how we collect feedback from consumers, do bug reporting, and UX research — basically in order to better understand people using digital products. Nevyn, Jonatan and Jonatan’s brother Carl started Lookback in 2013, and they were still the team when I emailed them in 2014.

    I emailed Jonatan with a (probably generic and polite) text, asking for the before mentioned consultancy work during the summer. Jonatan trolled around with me for a bit (it’s a “love language”) but we ended up getting along and decided that I’d join them for the summer before the beginning of my Master’s in Interaction Design at Chalmers.

    Working at Lookback during the summer was so awesome. I loved it. I could use my (pretty well developed) skills in building a product people used, I learned more about Meteor, I learned more about remote working (which is practiced at Lookback). They gave this long-haired guy (me) the freedom to potentially fuck up their code base. I shipped features and fixed bugs.

    I didn’t feel like a junior in the sense of the technology used — I was and still am perfectly aware of my skills in front-end web development, and I’ve used much tech (both back-end and front-end) during my days in school and during freelancing. This sounds cocky, but I never ever doubted my technical skills. However, what I learned was how little I knew about product development and building a large scale web app. I was taught how to:

    Communicate and work remotely

    The guys were in the same office, but communicated over chat with Flowdock. They had some consultants working remotely, and it’s been in Lookback’s ethos since its beginnings that remote work should be a baseline. I learned how to over communicate and explicitly ask for help and give status updates more than ever before. More on Lookback’s way of working in another post (I recommend Lookback’s blog in the meantime).

    Receive reviews

    Moving fast and breaking things is bullshit.

    Everyone in Lookback are concerned with design — product, UX, and UI. Especially Jonatan is a blood hound when reviewing features in the product (which of course is a good thing). Nothing beats manual QA. But I learned to hold my horses and go through my proposed solution or bug fix one more time. Moving fast and breaking things is bullshit. Jonatan taught me how to take a step back and see further than the checklist on the Trello card. How to ask “What if .. ?” questions regarding the usage of the product. “Does this create value? Can it be improved further?”. Tasks and features weren’t simply mine to take to just code up and release like a mindless zombie. I had “creative responsibility” for them, which means I had to care for them through the whole process: researching, planning, creating, releasing, monitoring, maintaining (common stuff).

    How freaking fun a startup is

    It’s like night and day compared to client work. Sure, it might be more pressure involved depending on things like funding, runway, and user engagement, but gosh it’s more fun caring for a long-lived product that coding on a promotional website for some weeks and deliver it - never to care for it again. It’s an incredible feeling building a product together with few other people, and have those magic moments of cheer, laughter, and joy with each other. I will always treasure that.

    Going for it

     ![](/assets/posts/lookback-working.jpg)  ![](/assets/posts/lookback-working-names.jpg)

    The end of the summer came, and the guys at Lookback asked me if I shouldn’t start working for them full time. I was really flattered, but responded robotically with something like: “I’m going to start my Master’s degree, and I really wanna finish it, so no thank you”. I held on to that thought for a long while, repeating it my head like a mantra. I had gone to university in the first place, much in order to attend that Master program.

    But I changed my mind. I’m in the IT industry, for god’s sake. What would I do with a Master’s degree? Create better web apps? Perhaps. Perhaps not. One thing was for sure: I didn’t want to “waste” the prime of my twenties attending school for another two years. To waste this chance to join in early in a tremendously promising startup, working with a product I loved, with people I loved, and miss out on all the learnings the courses at school couldn’t give me.

    Working in a startup is real. School is not. Academia might be interesting for a while, but no longer. I was done. I was tired of writing papers I didn’t care about, and the overall feel of not doing anything of value to me. Everybody are different. Some think they need more time in school in order to gain more knowledge, improve hard skills, network, and generally boost their resume in some way to land that sweet job after the Master’s thesis. I thought I needed some of those things. But then I realized many others had dropped out of school when they where younger and/or less skilled than me — why wouldn’t I?

    So I filed for “taking a sabbatical” (code for “I’m gonna start working and won’t probably come back”) and phoned Jonatan to say I accepted their offer. So then I became employee #1 at Lookback, and it felt so right.

    Now

     ![](/assets/posts/lookback-computers.jpg)

    Right now, Lookback has grown into a twelve people strong team, and we’ve moved our HQ to San Fransisco. The team consists of developers on two more platforms: Mac and Android, thanks to the acquisition of Quickcast from the UK, and the hire of the most clean-coding Java developer I’ve seen — Marcin from Poland. We also have Tobias (previously Spotify, GitHub) on design, Karim (previously Automattic) on QA/Support, Mai-Li (co-founder of Mutewatch) on Sales/Marketing, and Heidi (Geek Girls founder) on UX research. We’ve shipped a redesign. We’ve upped our growth and web dev game with Francis, whose opinions and conversations I deeply appreciate.

    We still do remote though. It’s in our DNA (we’re still learning new things with remote work at this team scale every day). It feels things have gone really fast since last summer, but I’m so proud and happy of my decision, and of the things I’ve created in Lookback. This is the best first full time job I’ll ever have :)

    What I love most about this way of working is the freedom. Freedom to work how I want, when I want, with (almost) what I want. It’s freedom with responsibility, and it has always suited me. By allowing full remote work, you’ll reach the best individuals — those who won’t go into an office, but instead creating miracles from their laptops in a café somewhere in south France.

    It’s the freedom to wake up when you want. It’s the freedom to work from wherever you want.

    It’s the freedom to form the environment around you, instead of the other way around.

    \ No newline at end of file diff --git a/writings/whats-new-in-safari-9/index.html b/writings/whats-new-in-safari-9/index.html index f07e8b386..513c041e5 100644 --- a/writings/whats-new-in-safari-9/index.html +++ b/writings/whats-new-in-safari-9/index.html @@ -46,4 +46,4 @@ }

    This groups all the denoted children of .default together.

    Force Touch API

    Apple’s also added a Javascript API for the Force Touch technology introduced in their latest Macbook.

    Firstly, the webkitForce property is availabel on all Mouse Events. This is a number, which is the force of the current press on the track pad.

    There are also events on a DOM element for listening to force touch events, which behaves like mouseup/mousedown:

    The constants MouseEvent.WEBKIT_FORCE_AT_MOUSE_DOWN and MouseEvent.WEBKIT_FORCE_AT_FORCE_MOUSE_DOWN represents the amount of force required for a regular and force click, respectively.

    See example app for a sample implementation.

    Javascript updates

    And lastly, we’ve got some new ES6 features:

    Pinned tabs icon

    Last but not least. Remember the Safari pinned tabs introduced at the WWDC keynote? You can use a custom icon shown when you site is pinned:

    <link rel="icon" sizes="any" mask href="icon.svg">

    The SVG icon should, according to Apple, have 100% black shapes and transparent background.

    You can however set the color of the icon with:

    <meta name="theme-color" content="red">
-

    I really like the snap and backdrop CSS support. I’ve missed the former for a while, but didn’t see the latter coming. Hope they land in Chrome and the others soon.

    Complete release notes and links to sample code.

    \ No newline at end of file +

    I really like the snap and backdrop CSS support. I’ve missed the former for a while, but didn’t see the latter coming. Hope they land in Chrome and the others soon.

    Complete release notes and links to sample code.

    \ No newline at end of file diff --git a/writings/whiteboard-accounting-or-how-to-say-no-to-yourself/index.html b/writings/whiteboard-accounting-or-how-to-say-no-to-yourself/index.html index c0fc2d65b..f556e8ac2 100644 --- a/writings/whiteboard-accounting-or-how-to-say-no-to-yourself/index.html +++ b/writings/whiteboard-accounting-or-how-to-say-no-to-yourself/index.html @@ -1 +1 @@ -Whiteboard accounting, or how to say no to yourself / Johan Brook

    Whiteboard accounting, or how to say no to yourself

    About 1 min reading time

    Follow link to blog.frankchimero.com →

    Frank Chimero shares a quite cool idea about how to get an overview of your income as a freelancer, which could help you realize you actually can say no to certain projects. I really think the visual is most important — when you have it written on a huge whiteboard you see it from another perspective. It becomes sort of a way of restraining yourself from getting too money-hungry and accept boring jobs. Go read the post, it’s a bright idea.

    \ No newline at end of file +Whiteboard accounting, or how to say no to yourself / Johan Brook

    Whiteboard accounting, or how to say no to yourself

    About 1 min reading time

    Follow link to blog.frankchimero.com →

    Frank Chimero shares a quite cool idea about how to get an overview of your income as a freelancer, which could help you realize you actually can say no to certain projects. I really think the visual is most important — when you have it written on a huge whiteboard you see it from another perspective. It becomes sort of a way of restraining yourself from getting too money-hungry and accept boring jobs. Go read the post, it’s a bright idea.

    \ No newline at end of file diff --git a/writings/whiteboard-theme-for-wordpress/index.html b/writings/whiteboard-theme-for-wordpress/index.html index 4817e2e5d..9e43e7b7b 100644 --- a/writings/whiteboard-theme-for-wordpress/index.html +++ b/writings/whiteboard-theme-for-wordpress/index.html @@ -1 +1 @@ -Whiteboard theme for Wordpress / Johan Brook

    Whiteboard theme for Wordpress

    About 1 min reading time

    Follow link to github.com →

    After a complete rewrite during the weekend, my barebones starter theme for Wordpress is up at GitHub. It provides a basic HTML5 structure with partials, lots of handy helper functions, and a couple of setup configurations. Check out the ReadMe and try it out. It evolved from my own habits when creating Wordpress sites, so the GitHub repo also serves as a great location to store the files and access them from anywhere. It’s only a skeleton, so no styling is included (check out my Sass framework for that). Frequently used Javascript libraries are included though, as well as a suggestion on a .htaccess file.

    \ No newline at end of file +Whiteboard theme for Wordpress / Johan Brook

    Whiteboard theme for Wordpress

    About 1 min reading time

    Follow link to github.com →

    After a complete rewrite during the weekend, my barebones starter theme for Wordpress is up at GitHub. It provides a basic HTML5 structure with partials, lots of handy helper functions, and a couple of setup configurations. Check out the ReadMe and try it out. It evolved from my own habits when creating Wordpress sites, so the GitHub repo also serves as a great location to store the files and access them from anywhere. It’s only a skeleton, so no styling is included (check out my Sass framework for that). Frequently used Javascript libraries are included though, as well as a suggestion on a .htaccess file.

    \ No newline at end of file diff --git a/writings/whos-suing-whom/index.html b/writings/whos-suing-whom/index.html index 8d1d930a8..5aa9323de 100644 --- a/writings/whos-suing-whom/index.html +++ b/writings/whos-suing-whom/index.html @@ -1 +1 @@ -Who's suing whom? / Johan Brook

    Who's suing whom?

    About 1 min reading time

    Follow link to informationisbeautiful.net →

    It’s not easy to keep track of every tech company that’s in legal actions with others nowadays. Luckily Information Is Beautiful has assembled this chart with help of charts from The Guardian and NY Times.

    \ No newline at end of file +Who's suing whom? / Johan Brook

    Who's suing whom?

    About 1 min reading time

    Follow link to informationisbeautiful.net →

    It’s not easy to keep track of every tech company that’s in legal actions with others nowadays. Luckily Information Is Beautiful has assembled this chart with help of charts from The Guardian and NY Times.

    \ No newline at end of file diff --git a/writings/why-google-cant-build-instagram/index.html b/writings/why-google-cant-build-instagram/index.html index 7cb27be04..73552a276 100644 --- a/writings/why-google-cant-build-instagram/index.html +++ b/writings/why-google-cant-build-instagram/index.html @@ -1 +1 @@ -Why Google can't build Instagram / Johan Brook

    Why Google can't build Instagram

    About 1 min reading time

    Follow link to scobleizer.com →

    Google can’t reduce scope like Instagram did. Instagram started out as being a far different product than actually shipped […] It actually started out as a service that did a lot more than just photographs. But, they learned they couldn’t complete such a grand vision and do it well. So they kept throwing out features. Instagram can do that. Robert Scoble on why it would be difficult for a Google team to built a product like Instagram. It’s all about simplicity.

    \ No newline at end of file +Why Google can't build Instagram / Johan Brook

    Why Google can't build Instagram

    About 1 min reading time

    Follow link to scobleizer.com →

    Google can’t reduce scope like Instagram did. Instagram started out as being a far different product than actually shipped […] It actually started out as a service that did a lot more than just photographs. But, they learned they couldn’t complete such a grand vision and do it well. So they kept throwing out features. Instagram can do that. Robert Scoble on why it would be difficult for a Google team to built a product like Instagram. It’s all about simplicity.

    \ No newline at end of file diff --git a/writings/windows-phone-7-needs-activation-for-live/index.html b/writings/windows-phone-7-needs-activation-for-live/index.html index 1320a36c5..bb4fa56b5 100644 --- a/writings/windows-phone-7-needs-activation-for-live/index.html +++ b/writings/windows-phone-7-needs-activation-for-live/index.html @@ -1 +1 @@ -Windows Phone 7 needs activation for Live / Johan Brook

    Windows Phone 7 needs activation for Live

    About 1 min reading time

    Follow link to neowin.net →

    This is great: newly released Windows Phone 7 in some cases needs you to manually fill in an activation code in order to hook the phone up with your Windows Live account. The problem is you’re supposed to receive the code from Microsoft’s support, which in the UK isn’t working on weekends. Nice one.

    \ No newline at end of file +Windows Phone 7 needs activation for Live / Johan Brook

    Windows Phone 7 needs activation for Live

    About 1 min reading time

    Follow link to neowin.net →

    This is great: newly released Windows Phone 7 in some cases needs you to manually fill in an activation code in order to hook the phone up with your Windows Live account. The problem is you’re supposed to receive the code from Microsoft’s support, which in the UK isn’t working on weekends. Nice one.

    \ No newline at end of file diff --git a/writings/writing-contextual-css/index.html b/writings/writing-contextual-css/index.html index a929607c4..4c062ddac 100644 --- a/writings/writing-contextual-css/index.html +++ b/writings/writing-contextual-css/index.html @@ -24,4 +24,4 @@ font-size: 1.5em; } } -

    So instead of having the declaration of the h1 font site in a separate _small.scss partial, we can write it beside the original definition (if that position is suitable).

    I’ve started to fall in love in this solution and have used it in a couple of smaller live projects. My workflow becomes much efficient when I can tweak the different media queries at one place.

    Performance of repeated media query blocks

    “That’s not DRY!”, you might say. Well, it really doesn’t matter, others have concluded.

    The post Sass and Media Queries on SassCast comes to the conclusion that for performance, it really doesn’t matter if you’re having repeated media query blocks inlined in your SCSS code, unless it’s a huge number (around 2000+ blocks).

    There’s a thread on this subject in the CSS Tricks forums (“SCSS: Inline media queries vs separate media query blocks”). A commenter mentioned a Ruby gem for merging repeated media query blocks together: Sass Media Query Combiner.

    Conclusion

    This might seem like a small detail, not worthy of a post, but try it out: I find it really awesome. Life’s too short for premature optimization of CSS files: Gzip will have your back.

    \ No newline at end of file +

    So instead of having the declaration of the h1 font site in a separate _small.scss partial, we can write it beside the original definition (if that position is suitable).

    I’ve started to fall in love in this solution and have used it in a couple of smaller live projects. My workflow becomes much efficient when I can tweak the different media queries at one place.

    Performance of repeated media query blocks

    “That’s not DRY!”, you might say. Well, it really doesn’t matter, others have concluded.

    The post Sass and Media Queries on SassCast comes to the conclusion that for performance, it really doesn’t matter if you’re having repeated media query blocks inlined in your SCSS code, unless it’s a huge number (around 2000+ blocks).

    There’s a thread on this subject in the CSS Tricks forums (“SCSS: Inline media queries vs separate media query blocks”). A commenter mentioned a Ruby gem for merging repeated media query blocks together: Sass Media Query Combiner.

    Conclusion

    This might seem like a small detail, not worthy of a post, but try it out: I find it really awesome. Life’s too short for premature optimization of CSS files: Gzip will have your back.

    \ No newline at end of file diff --git a/writings/writing-documentation-for-css-knyle-style-sheets/index.html b/writings/writing-documentation-for-css-knyle-style-sheets/index.html index 5e70fc99a..53087b75e 100644 --- a/writings/writing-documentation-for-css-knyle-style-sheets/index.html +++ b/writings/writing-documentation-for-css-knyle-style-sheets/index.html @@ -1 +1 @@ -Writing documentation for CSS – Knyle Style Sheets / Johan Brook

    Writing documentation for CSS – Knyle Style Sheets

    About 1 min reading time

    Follow link to warpspire.com →

    CSS has long been the “language” of terror for more sophisticated developers. CSS can be messy, ugly, illogical, and utterly wonderful to work with sometimes. Recently, tools like SCSS and LESS have emerged which let us write more structured CSS in a DRY way (I’ve written about it before).

    But we still have the problem with the actual “content” of the CSS. All the classes, IDs, and tag names. Hell is other people’s CSS it’s said, and it’s true. Really bloody true. Trying to comprehend a semi-large CSS code base is like putting your feet into wet socks. If it’s one person writing the CSS, it’s he who’s got the structure in his head. He models it according to his views and sense of organization).

    Hence, Knyle Style Sheets, is an interesting idea. It’s basically like a style guide — documentation — for a site or app’s CSS. Go ahead and read about it, and check out the project on GitHub. I really like the thinking behind this, and would consider it a necessity for larger projects.

    \ No newline at end of file +Writing documentation for CSS – Knyle Style Sheets / Johan Brook

    Writing documentation for CSS – Knyle Style Sheets

    About 1 min reading time

    Follow link to warpspire.com →

    CSS has long been the “language” of terror for more sophisticated developers. CSS can be messy, ugly, illogical, and utterly wonderful to work with sometimes. Recently, tools like SCSS and LESS have emerged which let us write more structured CSS in a DRY way (I’ve written about it before).

    But we still have the problem with the actual “content” of the CSS. All the classes, IDs, and tag names. Hell is other people’s CSS it’s said, and it’s true. Really bloody true. Trying to comprehend a semi-large CSS code base is like putting your feet into wet socks. If it’s one person writing the CSS, it’s he who’s got the structure in his head. He models it according to his views and sense of organization).

    Hence, Knyle Style Sheets, is an interesting idea. It’s basically like a style guide — documentation — for a site or app’s CSS. Go ahead and read about it, and check out the project on GitHub. I really like the thinking behind this, and would consider it a necessity for larger projects.

    \ No newline at end of file diff --git a/writings/yet-another-mobile-html5-framework-by-37signals/index.html b/writings/yet-another-mobile-html5-framework-by-37signals/index.html index 93affcb86..0c74ea7e2 100644 --- a/writings/yet-another-mobile-html5-framework-by-37signals/index.html +++ b/writings/yet-another-mobile-html5-framework-by-37signals/index.html @@ -1 +1 @@ -Yet another mobile HTML5 framework ... by 37signals / Johan Brook

    Yet another mobile HTML5 framework ... by 37signals

    About 2 min reading time

    Follow link to thinkvitamin.com →

    Gruber just posted a link to an interview of Ryan Singer from 37signals, where Singer mentioned a mobile HTML5 framework. That’s pretty big stuff — Ruby on Rails is doing pretty good, and a mobile framework in the same style would be quite awesome, since it according to Singer uses Coffeescript – a way more human friendly, Ruby like style of writing Javascript (a programmer friend of mine is totally in love with it). We’ve got a lot of Javascript frameworks for mobile devices these days. The first one I got in touch with (no pun intended, promise) was jQTouch — a simple and stylish jQuery framework mainly for iOS. That one evolved into Sencha Touch (now based on Ext.js), and the jQuery group themselves recently released jQuery Mobile with support for a lot of phones and operating systems. Two more heavy-weight guys are Sproutcore and Cappuccino. Isn’t the market over-saturated soon? Will this mobile framework by 37signals become just one in a million, or might it be “the one”? Before everybody go nuts, it’s worth noting that Sam Stephenson (37signals, creator of Prototype.js) stated this in a comment on the interview:

    Hey folks, there’s nothing to see here right now. We spent three weeks experimenting with some new tech to see what we could build, and ended up with something that looks a bit like Rails, but entirely client-side and written in CoffeeScript. The project driving the framework—an HTML5 mobile UI for Basecamp—has been on hold for about a month now, and we’re still a ways off from having anything to show. It just isn’t a priority for us right now. When (or if) we do have something we’ll be sure to post about it on our blog. That is, it’s not a silver bullet from 37signals for writing mobile apps (yet). It’s very, very interesting — yes — but nothing to start drooling over (yet). Personally, I’m in agony, since I’ve got another framework to put on my “Learn/Have A Closer Look At” list. Update, April 15th 2011: turned out the framework 37signals was experimenting with was indeed Backbone.js — an open source Javascript library which helps you structure your code in JS-heavy applications according to the MVC pattern ( source).

    \ No newline at end of file +Yet another mobile HTML5 framework ... by 37signals / Johan Brook

    Yet another mobile HTML5 framework ... by 37signals

    About 2 min reading time

    Follow link to thinkvitamin.com →

    Gruber just posted a link to an interview of Ryan Singer from 37signals, where Singer mentioned a mobile HTML5 framework. That’s pretty big stuff — Ruby on Rails is doing pretty good, and a mobile framework in the same style would be quite awesome, since it according to Singer uses Coffeescript – a way more human friendly, Ruby like style of writing Javascript (a programmer friend of mine is totally in love with it). We’ve got a lot of Javascript frameworks for mobile devices these days. The first one I got in touch with (no pun intended, promise) was jQTouch — a simple and stylish jQuery framework mainly for iOS. That one evolved into Sencha Touch (now based on Ext.js), and the jQuery group themselves recently released jQuery Mobile with support for a lot of phones and operating systems. Two more heavy-weight guys are Sproutcore and Cappuccino. Isn’t the market over-saturated soon? Will this mobile framework by 37signals become just one in a million, or might it be “the one”? Before everybody go nuts, it’s worth noting that Sam Stephenson (37signals, creator of Prototype.js) stated this in a comment on the interview:

    Hey folks, there’s nothing to see here right now. We spent three weeks experimenting with some new tech to see what we could build, and ended up with something that looks a bit like Rails, but entirely client-side and written in CoffeeScript. The project driving the framework—an HTML5 mobile UI for Basecamp—has been on hold for about a month now, and we’re still a ways off from having anything to show. It just isn’t a priority for us right now. When (or if) we do have something we’ll be sure to post about it on our blog. That is, it’s not a silver bullet from 37signals for writing mobile apps (yet). It’s very, very interesting — yes — but nothing to start drooling over (yet). Personally, I’m in agony, since I’ve got another framework to put on my “Learn/Have A Closer Look At” list. Update, April 15th 2011: turned out the framework 37signals was experimenting with was indeed Backbone.js — an open source Javascript library which helps you structure your code in JS-heavy applications according to the MVC pattern ( source).

    \ No newline at end of file diff --git a/writings/yet-another-site-redesign/index.html b/writings/yet-another-site-redesign/index.html index 2430990d2..46506e1c4 100644 --- a/writings/yet-another-site-redesign/index.html +++ b/writings/yet-another-site-redesign/index.html @@ -1 +1 @@ -Yet Another Site Redesign / Johan Brook

    Yet Another Site Redesign

    About 1 min reading time

    Sigh. I wasn’t happy with the last one. Overly complex and not straight to the point. So I sat down one evening, pretty casual, and I created something. I continued to experiment and in two days I had created a completely new look, and I liked it. This one features a more cleaner layout (responsive, of course) and clearer typography. I’ve put more attention to quickies I post and made some improvements to the HTML markup. But, the breaking news is the work page. I’ve finally put together something similar to a portfolio, although it’s pretty humble. You’re welcomed to have a look. For Swedish readers I’ve created a micro-site promoting me and my skills. It’s in Swedish, but the design is pretty slick (the markup is sexy). Thanks for dropping by, and enjoy the new appearance. I hope I get some more motivation to write some more journal posts now …

    \ No newline at end of file +Yet Another Site Redesign / Johan Brook

    Yet Another Site Redesign

    About 1 min reading time

    Sigh. I wasn’t happy with the last one. Overly complex and not straight to the point. So I sat down one evening, pretty casual, and I created something. I continued to experiment and in two days I had created a completely new look, and I liked it. This one features a more cleaner layout (responsive, of course) and clearer typography. I’ve put more attention to quickies I post and made some improvements to the HTML markup. But, the breaking news is the work page. I’ve finally put together something similar to a portfolio, although it’s pretty humble. You’re welcomed to have a look. For Swedish readers I’ve created a micro-site promoting me and my skills. It’s in Swedish, but the design is pretty slick (the markup is sexy). Thanks for dropping by, and enjoy the new appearance. I hope I get some more motivation to write some more journal posts now …

    \ No newline at end of file diff --git a/writings/zach-holman-on-code-documentation/index.html b/writings/zach-holman-on-code-documentation/index.html index db36d1b49..62da065ce 100644 --- a/writings/zach-holman-on-code-documentation/index.html +++ b/writings/zach-holman-on-code-documentation/index.html @@ -1 +1 @@ -Zach Holman on code documentation / Johan Brook

    Zach Holman on code documentation

    About 1 min reading time

    Follow link to zachholman.com →

    Documenting code is important, and I think Zach successfully explains why and how in his post. I often find documenting code quite tricky, since it forces you to make it really clear and concise. It challenges you to write good code, since another guy is supposed to understand how everything works from reading the docs. “Can I scrap this method? Do I have to refactor? Is this too tightly coupled?”. When you’re documenting, you might see the obvious flaws in the code flow, and it’s a win-win.

    \ No newline at end of file +Zach Holman on code documentation / Johan Brook

    Zach Holman on code documentation

    About 1 min reading time

    Follow link to zachholman.com →

    Documenting code is important, and I think Zach successfully explains why and how in his post. I often find documenting code quite tricky, since it forces you to make it really clear and concise. It challenges you to write good code, since another guy is supposed to understand how everything works from reading the docs. “Can I scrap this method? Do I have to refactor? Is this too tightly coupled?”. When you’re documenting, you might see the obvious flaws in the code flow, and it’s a win-win.

    \ No newline at end of file