18 changed files with 1831 additions and 654 deletions
+ 8
- 7
cache.py
View File
| @@ -17,7 +17,8 @@ from minicli import cli, run, wrap | |||
| from readability.readability import Document | |||
| HERE = Path(".") | |||
| CACHE_PATH = HERE / "cache" | |||
| CACHE_PATH = HERE / "cache" / "2020" | |||
| LOCAL_DOMAIN = "http://larlet.test:3579" | |||
| environment = Env(loader=FileSystemLoader(str(HERE / "templates"))) | |||
| @@ -89,23 +90,23 @@ def create(hash_url): | |||
| if not os.path.exists(cache_target): | |||
| os.makedirs(cache_target) | |||
| open(cache_target / "index.html", "w").write(page) | |||
| print(f"Done: http://larlet.test:8001/david/cache/{hash_url}/") | |||
| print(f"Done: {LOCAL_DOMAIN}/david/cache/2020/{hash_url}/") | |||
| @cli | |||
| def generate(): | |||
| """Generate caches MD files into HTML files.""" | |||
| caches = [] | |||
| cache_list = [] | |||
| template = environment.get_template("cache_article.html") | |||
| for cache in Cache.all(): | |||
| page = template.render(cache=cache) | |||
| open(CACHE_PATH / cache.hash_url / "index.html", "w").write(page) | |||
| caches.append(cache) | |||
| cache_list.append(cache) | |||
| template = environment.get_template("cache_archives.html") | |||
| page = template.render(caches=caches) | |||
| page = template.render(cache_list=cache_list) | |||
| open(CACHE_PATH / "index.html", "w").write(page) | |||
| print("Done: http://larlet.test:8001/david/cache/") | |||
| print(f"Done: {LOCAL_DOMAIN}/david/cache/2020/") | |||
| @cli | |||
| @@ -115,7 +116,7 @@ def new(url): | |||
| :url: The URL of the page to put into cache. | |||
| """ | |||
| hash_url = hashlib.md5(url.encode("utf-8")).hexdigest() | |||
| url_cache = f"/david/cache/{hash_url}/" | |||
| url_cache = f"/david/cache/2020/{hash_url}/" | |||
| link_line = f"]({url}) ([cache]({url_cache}))" | |||
| print(link_line) | |||
| try: | |||
+ 132
- 0
cache/2020/17aa5580eb34f39f214e4a72458c535e/index.html
View File
| @@ -0,0 +1,132 @@ | |||
| <!doctype html><!-- This is a valid HTML5 document. --> | |||
| <!-- Screen readers, SEO, extensions and so on. --> | |||
| <html lang="fr"> | |||
| <!-- Has to be within the first 1024 bytes, hence before the <title> | |||
| See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset --> | |||
| <meta charset="utf-8"> | |||
| <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 --> | |||
| <!-- The viewport meta is quite crowded and we are responsible for that. | |||
| See: https://codepen.io/tigt/post/meta-viewport-for-2015 --> | |||
| <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1,shrink-to-fit=no"> | |||
| <!-- Required to make a valid HTML5 document. --> | |||
| <title>Thinking about the past, present, and future of web development (archive) — David Larlet</title> | |||
| <!-- Lightest blank gif, avoids an extra query to the server. --> | |||
| <link rel="icon" href="data:;base64,iVBORw0KGgo="> | |||
| <!-- Thank you Florens! --> | |||
| <link rel="stylesheet" href="/static/david/css/style_2020-01-06.css"> | |||
| <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. --> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_regular.woff2" as="font" type="font/woff2" crossorigin> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_bold.woff2" as="font" type="font/woff2" crossorigin> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_italic.woff2" as="font" type="font/woff2" crossorigin> | |||
| <meta name="robots" content="noindex, nofollow"> | |||
| <meta content="origin-when-cross-origin" name="referrer"> | |||
| <!-- Canonical URL for SEO purposes --> | |||
| <link rel="canonical" href="https://www.baldurbjarnason.com/past-present-future-web/"> | |||
| <body class="remarkdown h1-underline h2-underline hr-center ul-star pre-tick"> | |||
| <article> | |||
| <h1>Thinking about the past, present, and future of web development</h1> | |||
| <h2><a href="https://www.baldurbjarnason.com/past-present-future-web/">Source originale du contenu</a></h2> | |||
| <p class="decking">You're supposed to talk about the past, present, and future in the new year, right?</p> | |||
| <p>Here is a disconnected, rambling list of thoughts spurred by reviewing the passing year.</p> | |||
| <ul> | |||
| <li><p>Charitable or social benefit startups are screwed up in a special kind of way. Most of them target a specific industry from the outset—hoping to fix it in some way, even though the reasons for systemic dysfunction tend to be, well… systemic and not something a startup or charity can fix.</p></li> | |||
| <li><p>Organisations of this kind—like Rebus, my employer—are effectively prevented from using the most powerful tool available to entrepreneurs: picking your market based on research; guided by what you know to be your organisation’s strengths and capabilities. We’ve already picked our market; we’ve already picked our tools; and building a sustainable business <strong>without</strong> the ability to revisit those choices is an enormous handicap.</p></li> | |||
| <li><p>That handicap increases our dependance on grants and outside financing, which in turn makes us—and every organisation like us—dependent on the whims, agendas, and politics of America’s wealthiest. And that class is <em>never</em> interested in addressing systemic issues: they always choosing to patch up the cracks with ‘innovative’ software or ‘disruptive’ business models.</p></li> | |||
| <li><p>Any sensible business that chose its focus based on what <em>sustainable</em> good they could do, would likely leave the education industry proper.</p></li> | |||
| <li><p>The education industry is kind of screwed no matter what happens. Their options for tech and software are: idealists burning money on ideas that will never be sustainable, greybeards raking in money for maintaining clunky, outdated, legacy tech, sociopaths looking to extract value from the system (stripmining) through ‘innovation’ and ‘disruption’, or entrepreneurs seeking to ‘fix’ education by establishing monopoly dominance over some vital cornerstone that everybody relies on (because they know better than everybody else).</p></li> | |||
| <li><p>That the fastest path to sustainability for an education startup is often to stop being an education startup tells us something. Not sure what, but it’s definitely telling us something.</p></li> | |||
| <li><p>The web developer community, in social media at least, seems to have hit a transition point last year. Most of it has become full of intolerable nonsense where the plans and ideas of an advertising company (and its employees) dominate the social media discourse. The discourse itself has completely ceased to reflect what most people are actually doing, both end users and web developers.</p></li> | |||
| <li><p>Once you step outside of the social media bubble, however, vanilla JS and more ‘modest’ approaches like Svelte or Stimulus/TurboLinks seem to have reached critical mass in terms of sustainability. Irrespective of those newer trends, jQuery and PHP-driven, un-hydrated, old-fashioned server-side rendering still utterly dominate the web that people use.</p></li> | |||
| <li><p>Web dev driven by npm packages, frameworks, and bundling is to the field of web design what Java and C# in 2010s was to web servers. If you work in enterprise software it’s all you can see. Web developers working on CMS themes (or on Rails-based projects) using jQuery and plain old JS—maybe with a couple of libraries imported directly via a script tag—are the unseen dark matter of the web dev community.</p></li> | |||
| <li><p>What should worry you is that npm- and framework-driven web development <em>feels</em> just as painful as enterprise software dev because it <em>is</em> enterprise development.</p> | |||
| <ul> | |||
| <li>TypeScript smells like Java.</li> | |||
| <li>The complexity of npm packages harkens back to painful Java packaging monstrosities.</li> | |||
| <li>JavaScript build systems are about as much fun as Java build systems, even though they are doing very different things.</li> | |||
| <li>Deployment, as implemented in the Kubernetes and Docker ecosystems, is exactly as hard to understand and use as its Java predecessors because those <em>are</em> their predecessors.</li> | |||
| </ul></li> | |||
| <li><p>Some of use work exclusively with SMBs (Small-/Medium-sized Businesses) and shouldn’t need to run the enterprise anti-productivity gauntlet. Our needs in terms of frameworks, bundling, and packages are very different from those working in enterprises with hundreds or thousands of employees.</p></li> | |||
| <li><p>It is not rational to expect us to be using enterprise-oriented tools and environments or to demand that we be happy about being saddled with your need for complexity.</p></li> | |||
| <li><p>The divide between what you read in developer social media and what you see on web dev websites, blogs, and actual practice has never in my recollection been this wide. I’ve never before seen web dev social media and forum discourse so dominated by the US west coast enterprise tech company bubble, and I’ve been doing this for a couple of decades now. The pre-2000 dot-com bubble comes close although that one came attached to an actual financial bubble and happened before social media had evolved into its current form.</p></li> | |||
| <li><p>I’m more and more leaning towards the idea that the future of digital publishing is the web.</p></li> | |||
| <li><p>As much as people keep harping on the death of the web, it has matured enormously as a medium and is at a point now were a massive flowering of artistic and creative expression is possible.</p></li> | |||
| <li><p>Whether that bloom happens or not is no longer a question of technological capacity but of social and cultural factors that are hard to predict or anticipate. (This wasn’t, in my opinion, a realistic possibility even as recently as a couple of years go.)</p></li> | |||
| <li><p>Most of the criticisms web developers throw at Safari concern its usefulness as an <strong>app platform</strong> while the browser itself has become fully-featured and powerful as a medium for design and storytelling.</p></li> | |||
| <li><p>This means that ebooks will fall further and further behind and continue to be limited to being a modern replacement of the mass market paperback, with largely the same design limitations.</p></li> | |||
| <li><p>This creative expression might be distributed as web sites, apps, web apps, web publications, packages, or all of the above. I don’t know how it will pan out.</p></li> | |||
| <li><p>All current modes of digital distribution are unsustainable and are likely to change over the coming ten years.</p> | |||
| <ul> | |||
| <li>App stores don’t scale and can’t reflect cultural and social variation. We do not have a unified global culture and never will.</li> | |||
| <li>The web is being hit hard by the world’s swing towards authoritarianism.</li> | |||
| <li>On the other end, it’s also being strip-mined by unregulated and uncontrolled tech companies—most of the ballooning download sizes and biggest performance monstrosities are entirely down to advertising and privacy-violating tracking.</li> | |||
| <li>Many of these things are coming under increased government scrutiny for both sensible (anti-trust, pro-competition) and for scary (authoritarianism, nationalism) reasons.</li> | |||
| <li>Some of these things will swing back. Some of them won’t. We can’t tell which way things will go from our current vantage point. We’ll have to wait and see as most of these changes are taking place at such a high level that it’s well beyond the ability of any one of us to meaningfully affect. But it’s safe to say that things will change.</li> | |||
| </ul></li> | |||
| <li><p>If you’re personally invested in the dominance of the browser over all other forms of digital media (<strong>cough</strong><em>Google</em><strong>cough</strong>) then the uncertainty regarding distribution is likely to terrify you.</p></li> | |||
| <li><p>But the rest of us will probably (hopefully?) be able to adapt to whatever happens. However it gets packaged and distributed, it’ll either be made using some variation of HTML, HTTP, CSS, and JS or something substantially better (like a mature SwiftUI).</p></li> | |||
| <li><p>I’m excited about the web as a creative and narrative medium—we might be in for great things in that regard. I’m less excited about the web as an app platform because, from a purely utilitarian perspective, most productivity apps should be native apps. A native app platform is capable of providing much greater privacy assurances without compromising functionality than the web ever can.</p></li> | |||
| <li><p>Conversely, a native app platform that has been captured by an advertising company, like Android has, is much much worse for privacy than the web will ever be. At least on the web you can usually add content and privacy blockers. That said, even on Android, you can still go against the grain of the platform and create a client-side only app that is more powerful and more <strong>private</strong> than anything the web can realistically offer.</p></li> | |||
| <li><p>Native Mac, Windows, or even Desktop Linux apps (whether they’re Electron-based or ‘proper’ native) are still unbeatable when it comes to delivering a pragmatic balance of productivity, privacy, and value.</p></li> | |||
| <li><p>I have a hunch that as Chrome’s dominance over the web increases, the web’s association with Android and Google will strengthen in people’s minds. The web on other platforms like iOS and Windows will be seen by end users as a ‘Google compatibility thing’ instead of an independent and open platform. Whether that perception will be a correct one is an entirely different thing.</p></li> | |||
| <li><p>I have very complicated and conflicted feelings about all of the things in tech and education that are labelled ‘open’. Too often its a label used to manipulate people into working for free, or as cover for extracting profit from community effort. Communities dedicated to ‘open’ causes all too easily veer into manipulation and abuse while <em>still</em> funnelling most of the value into the hands of the few.</p></li> | |||
| <li><p>In other words: ‘open’ is a labour management strategy; not a wealth redistribution strategy</p></li> | |||
| <li><p>Most mature open platforms are dominated by a profit-taking enterprise of some sort, for example the web is dominated by Google and Amazon. Whenever you do anything to strengthen the web as a platform, the majority of the value and benefit will end up in their pockets, no matter what you do. If the buck stops on the web, it stops at either Google or Amazon.</p></li> | |||
| <li><p>Most of the time, when a system is truly open, it’s open to being taken over by the powerful and the rich. The rest of us will never have the resources to protect the commons so any time the playing field is even, the rich will win.</p></li> | |||
| <li><p>The Free Software movement distinguishes itself a bit from the rest of the ‘open’ crowd in that they do care about, and take steps to protect, developer freedoms.</p></li> | |||
| <li><p>They still throw the non-coding end user under the bus <strong>by design</strong>. Implicit in their manifestos is the idea that you are only free if you code.</p></li> | |||
| <li><p>The US and UK are screwed. <strong><em>So</em></strong> screwed.</p></li> | |||
| </ul> | |||
| </article> | |||
| <hr> | |||
| <nav> | |||
| <a href="/david/" title="Aller à l’accueil">🏠</a> • | |||
| <a href="/david/log/" title="Accès au flux RSS">🤖</a> • | |||
| <a href="http://larlet.com" title="Go to my English profile">🇨🇦</a> • | |||
| <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">📮</a> • | |||
| <abbr title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340">🧚</abbr> | |||
| </nav> | |||
| </body> | |||
| </html> | |||
+ 90
- 0
cache/2020/17aa5580eb34f39f214e4a72458c535e/index.md
View File
| @@ -0,0 +1,90 @@ | |||
| title: Thinking about the past, present, and future of web development | |||
| url: https://www.baldurbjarnason.com/past-present-future-web/ | |||
| hash_url: 17aa5580eb34f39f214e4a72458c535e | |||
| <p class="decking">You're supposed to talk about the past, present, and future in the new year, right?</p> | |||
| <p>Here is a disconnected, rambling list of thoughts spurred by reviewing the passing year.</p> | |||
| <ul> | |||
| <li><p>Charitable or social benefit startups are screwed up in a special kind of way. Most of them target a specific industry from the outset—hoping to fix it in some way, even though the reasons for systemic dysfunction tend to be, well… systemic and not something a startup or charity can fix.</p></li> | |||
| <li><p>Organisations of this kind—like Rebus, my employer—are effectively prevented from using the most powerful tool available to entrepreneurs: picking your market based on research; guided by what you know to be your organisation’s strengths and capabilities. We’ve already picked our market; we’ve already picked our tools; and building a sustainable business <strong>without</strong> the ability to revisit those choices is an enormous handicap.</p></li> | |||
| <li><p>That handicap increases our dependance on grants and outside financing, which in turn makes us—and every organisation like us—dependent on the whims, agendas, and politics of America’s wealthiest. And that class is <em>never</em> interested in addressing systemic issues: they always choosing to patch up the cracks with ‘innovative’ software or ‘disruptive’ business models.</p></li> | |||
| <li><p>Any sensible business that chose its focus based on what <em>sustainable</em> good they could do, would likely leave the education industry proper.</p></li> | |||
| <li><p>The education industry is kind of screwed no matter what happens. Their options for tech and software are: idealists burning money on ideas that will never be sustainable, greybeards raking in money for maintaining clunky, outdated, legacy tech, sociopaths looking to extract value from the system (stripmining) through ‘innovation’ and ‘disruption’, or entrepreneurs seeking to ‘fix’ education by establishing monopoly dominance over some vital cornerstone that everybody relies on (because they know better than everybody else).</p></li> | |||
| <li><p>That the fastest path to sustainability for an education startup is often to stop being an education startup tells us something. Not sure what, but it’s definitely telling us something.</p></li> | |||
| <li><p>The web developer community, in social media at least, seems to have hit a transition point last year. Most of it has become full of intolerable nonsense where the plans and ideas of an advertising company (and its employees) dominate the social media discourse. The discourse itself has completely ceased to reflect what most people are actually doing, both end users and web developers.</p></li> | |||
| <li><p>Once you step outside of the social media bubble, however, vanilla JS and more ‘modest’ approaches like Svelte or Stimulus/TurboLinks seem to have reached critical mass in terms of sustainability. Irrespective of those newer trends, jQuery and PHP-driven, un-hydrated, old-fashioned server-side rendering still utterly dominate the web that people use.</p></li> | |||
| <li><p>Web dev driven by npm packages, frameworks, and bundling is to the field of web design what Java and C# in 2010s was to web servers. If you work in enterprise software it’s all you can see. Web developers working on CMS themes (or on Rails-based projects) using jQuery and plain old JS—maybe with a couple of libraries imported directly via a script tag—are the unseen dark matter of the web dev community.</p></li> | |||
| <li><p>What should worry you is that npm- and framework-driven web development <em>feels</em> just as painful as enterprise software dev because it <em>is</em> enterprise development.</p> | |||
| <ul> | |||
| <li>TypeScript smells like Java.</li> | |||
| <li>The complexity of npm packages harkens back to painful Java packaging monstrosities.</li> | |||
| <li>JavaScript build systems are about as much fun as Java build systems, even though they are doing very different things.</li> | |||
| <li>Deployment, as implemented in the Kubernetes and Docker ecosystems, is exactly as hard to understand and use as its Java predecessors because those <em>are</em> their predecessors.</li> | |||
| </ul></li> | |||
| <li><p>Some of use work exclusively with SMBs (Small-/Medium-sized Businesses) and shouldn’t need to run the enterprise anti-productivity gauntlet. Our needs in terms of frameworks, bundling, and packages are very different from those working in enterprises with hundreds or thousands of employees.</p></li> | |||
| <li><p>It is not rational to expect us to be using enterprise-oriented tools and environments or to demand that we be happy about being saddled with your need for complexity.</p></li> | |||
| <li><p>The divide between what you read in developer social media and what you see on web dev websites, blogs, and actual practice has never in my recollection been this wide. I’ve never before seen web dev social media and forum discourse so dominated by the US west coast enterprise tech company bubble, and I’ve been doing this for a couple of decades now. The pre-2000 dot-com bubble comes close although that one came attached to an actual financial bubble and happened before social media had evolved into its current form.</p></li> | |||
| <li><p>I’m more and more leaning towards the idea that the future of digital publishing is the web.</p></li> | |||
| <li><p>As much as people keep harping on the death of the web, it has matured enormously as a medium and is at a point now were a massive flowering of artistic and creative expression is possible.</p></li> | |||
| <li><p>Whether that bloom happens or not is no longer a question of technological capacity but of social and cultural factors that are hard to predict or anticipate. (This wasn’t, in my opinion, a realistic possibility even as recently as a couple of years go.)</p></li> | |||
| <li><p>Most of the criticisms web developers throw at Safari concern its usefulness as an <strong>app platform</strong> while the browser itself has become fully-featured and powerful as a medium for design and storytelling.</p></li> | |||
| <li><p>This means that ebooks will fall further and further behind and continue to be limited to being a modern replacement of the mass market paperback, with largely the same design limitations.</p></li> | |||
| <li><p>This creative expression might be distributed as web sites, apps, web apps, web publications, packages, or all of the above. I don’t know how it will pan out.</p></li> | |||
| <li><p>All current modes of digital distribution are unsustainable and are likely to change over the coming ten years.</p> | |||
| <ul> | |||
| <li>App stores don’t scale and can’t reflect cultural and social variation. We do not have a unified global culture and never will.</li> | |||
| <li>The web is being hit hard by the world’s swing towards authoritarianism.</li> | |||
| <li>On the other end, it’s also being strip-mined by unregulated and uncontrolled tech companies—most of the ballooning download sizes and biggest performance monstrosities are entirely down to advertising and privacy-violating tracking.</li> | |||
| <li>Many of these things are coming under increased government scrutiny for both sensible (anti-trust, pro-competition) and for scary (authoritarianism, nationalism) reasons.</li> | |||
| <li>Some of these things will swing back. Some of them won’t. We can’t tell which way things will go from our current vantage point. We’ll have to wait and see as most of these changes are taking place at such a high level that it’s well beyond the ability of any one of us to meaningfully affect. But it’s safe to say that things will change.</li> | |||
| </ul></li> | |||
| <li><p>If you’re personally invested in the dominance of the browser over all other forms of digital media (<strong>cough</strong><em>Google</em><strong>cough</strong>) then the uncertainty regarding distribution is likely to terrify you.</p></li> | |||
| <li><p>But the rest of us will probably (hopefully?) be able to adapt to whatever happens. However it gets packaged and distributed, it’ll either be made using some variation of HTML, HTTP, CSS, and JS or something substantially better (like a mature SwiftUI).</p></li> | |||
| <li><p>I’m excited about the web as a creative and narrative medium—we might be in for great things in that regard. I’m less excited about the web as an app platform because, from a purely utilitarian perspective, most productivity apps should be native apps. A native app platform is capable of providing much greater privacy assurances without compromising functionality than the web ever can.</p></li> | |||
| <li><p>Conversely, a native app platform that has been captured by an advertising company, like Android has, is much much worse for privacy than the web will ever be. At least on the web you can usually add content and privacy blockers. That said, even on Android, you can still go against the grain of the platform and create a client-side only app that is more powerful and more <strong>private</strong> than anything the web can realistically offer.</p></li> | |||
| <li><p>Native Mac, Windows, or even Desktop Linux apps (whether they’re Electron-based or ‘proper’ native) are still unbeatable when it comes to delivering a pragmatic balance of productivity, privacy, and value.</p></li> | |||
| <li><p>I have a hunch that as Chrome’s dominance over the web increases, the web’s association with Android and Google will strengthen in people’s minds. The web on other platforms like iOS and Windows will be seen by end users as a ‘Google compatibility thing’ instead of an independent and open platform. Whether that perception will be a correct one is an entirely different thing.</p></li> | |||
| <li><p>I have very complicated and conflicted feelings about all of the things in tech and education that are labelled ‘open’. Too often its a label used to manipulate people into working for free, or as cover for extracting profit from community effort. Communities dedicated to ‘open’ causes all too easily veer into manipulation and abuse while <em>still</em> funnelling most of the value into the hands of the few.</p></li> | |||
| <li><p>In other words: ‘open’ is a labour management strategy; not a wealth redistribution strategy</p></li> | |||
| <li><p>Most mature open platforms are dominated by a profit-taking enterprise of some sort, for example the web is dominated by Google and Amazon. Whenever you do anything to strengthen the web as a platform, the majority of the value and benefit will end up in their pockets, no matter what you do. If the buck stops on the web, it stops at either Google or Amazon.</p></li> | |||
| <li><p>Most of the time, when a system is truly open, it’s open to being taken over by the powerful and the rich. The rest of us will never have the resources to protect the commons so any time the playing field is even, the rich will win.</p></li> | |||
| <li><p>The Free Software movement distinguishes itself a bit from the rest of the ‘open’ crowd in that they do care about, and take steps to protect, developer freedoms.</p></li> | |||
| <li><p>They still throw the non-coding end user under the bus <strong>by design</strong>. Implicit in their manifestos is the idea that you are only free if you code.</p></li> | |||
| <li><p>The US and UK are screwed. <strong><em>So</em></strong> screwed.</p></li> | |||
| </ul> | |||
+ 142
- 0
cache/2020/322e7a8997c732a5fdca0baaea7b9ede/index.html
View File
| @@ -0,0 +1,142 @@ | |||
| <!doctype html><!-- This is a valid HTML5 document. --> | |||
| <!-- Screen readers, SEO, extensions and so on. --> | |||
| <html lang="fr"> | |||
| <!-- Has to be within the first 1024 bytes, hence before the <title> | |||
| See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset --> | |||
| <meta charset="utf-8"> | |||
| <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 --> | |||
| <!-- The viewport meta is quite crowded and we are responsible for that. | |||
| See: https://codepen.io/tigt/post/meta-viewport-for-2015 --> | |||
| <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1,shrink-to-fit=no"> | |||
| <!-- Required to make a valid HTML5 document. --> | |||
| <title>Guide to Internal Communication, the Basecamp Way (archive) — David Larlet</title> | |||
| <!-- Lightest blank gif, avoids an extra query to the server. --> | |||
| <link rel="icon" href="data:;base64,iVBORw0KGgo="> | |||
| <!-- Thank you Florens! --> | |||
| <link rel="stylesheet" href="/static/david/css/style_2020-01-06.css"> | |||
| <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. --> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_regular.woff2" as="font" type="font/woff2" crossorigin> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_bold.woff2" as="font" type="font/woff2" crossorigin> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_italic.woff2" as="font" type="font/woff2" crossorigin> | |||
| <meta name="robots" content="noindex, nofollow"> | |||
| <meta content="origin-when-cross-origin" name="referrer"> | |||
| <!-- Canonical URL for SEO purposes --> | |||
| <link rel="canonical" href="https://basecamp.com/guides/how-we-communicate"> | |||
| <body class="remarkdown h1-underline h2-underline hr-center ul-star pre-tick"> | |||
| <article> | |||
| <h1>Guide to Internal Communication, the Basecamp Way</h1> | |||
| <h2><a href="https://basecamp.com/guides/how-we-communicate">Source originale du contenu</a></h2> | |||
| <h2>Rules of thumb, and general philosophy</h2> | |||
| <p>Below you'll find a collection of general principles we try to keep in mind at Basecamp when communicating with teammates, within departments, across the company, and with the public. They aren't requirements, but they serve to create boundaries and shared practices to draw upon when we do the one thing that affects everything else we do: communicate.</p> | |||
| <ol class="stacked-list"> | |||
| <li>You can not not communicate. Not discussing the elephant in the room is communicating. Few things are as important to study, practice, and perfect as clear communication.</li> | |||
| <li>Real-time sometimes, asynchronous most of the time.</li> | |||
| <li>Internal communication based on long-form writing, rather than a verbal tradition of meetings, speaking, and chatting, leads to a welcomed reduction in meetings, video conferences, calls, or other real-time opportunities to interrupt and be interrupted.</li> | |||
| <li>Give meaningful discussions a meaningful amount of time to develop and unfold. Rushing to judgement, or demanding immediate responses, only serves to increase the odds of poor decision making.</li> | |||
| <li>Meetings are the last resort, not the first option.</li> | |||
| <li>Writing solidifies, chat dissolves. Substantial decisions start and end with an exchange of complete thoughts, not one-line-at-a-time jousts. If it's important, critical, or fundamental, write it up, don't chat it down.</li> | |||
| <li>Speaking only helps whoâs in the room, writing helps everyone. This includes people who's couldn't make it, or future employees who join years from now.</li> | |||
| <li>If your words can be perceived in different ways, they'll be understood in the way which does the most harm.</li> | |||
| <li>Never expect or require someone to get back to you immediately unless itâs a true emergency. The expectation of immediate response is toxic.</li> | |||
| <li>If you have to repeat yourself, you werenât clear enough the first time. However, if you're talking about something brand new, you may have to repeat yourself for years before you're heard. Pick your repeats wisely.</li> | |||
| <li>Poor communication creates more work.</li> | |||
| <li>Companies don't have communication problems, they have miscommunication problems. The smaller the company, group, or team, the fewer opportunities for miscommunication.</li> | |||
| <li>Five people in a room for an hour isn't a one hour meeting, it's a five hour meeting. Be mindful of the tradeoffs.</li> | |||
| <li>Be proactive about "wait, what?" questions by providing factual context and spacial context. Factual are the things people also need to know. Spacial is where the communication happens (for example, if it's about a specific to-do, discuss it right under the to-do, not somewhere else).</li> | |||
| <li>Communication shouldn't require schedule synchronization. Calendars have nothing to do with communication. Writing, rather than speaking or meeting, is independent of schedule and far more direct.</li> | |||
| <li>"Now" is often the wrong time to say what just popped into your head. It's better to let it filter it through the sieve of time. What's left is the part worth saying.</li> | |||
| <li>Ask yourself if others will feel compelled to rush their response if you rush your approach.</li> | |||
| <li>The end of the day has a way of convincing you what youâve done is good, but the next morning has a way of telling the you truth. If you aren't sure, sleep on it before saying it.</li> | |||
| <li>If you want an answer, you have to ask a question. People typically have a lot to say, but they'll volunteer little. Automatic questions on a regular schedule help people practice sharing, writing, and communicating.</li> | |||
| <li>Occasionally pick random words, sentences, or paragraphs and hit delete. Did it matter?</li> | |||
| <li>Urgency is overrated, ASAP is poison.</li> | |||
| <li>If something's going to be difficult to hear or share, invite questions at the end. Ending without the invitation will lead to public silence but private conjecture. This is where rumors breed.</li> | |||
| <li>Where you put something, and what you call it, matters. When titling something, lead with the most important information. Keep in mind that many technical systems truncate long text or titles.</li> | |||
| <li>Write at the right time. Sharing something at 5pm may keep someone at work longer. You may have some spare time on a Sunday afternoon to write something, but putting it out there on Sunday may pull people back into work on the weekends. Early Monday morning communication may be buried by other things. There may not be a perfect time, but there's certainly a wrong time. Keep that in mind when you hit send.</li> | |||
| <li>Great news delivered on the heels of bad news makes both bits worse. The bad news feels like it's being buried, the good news feels like it's being injected to change the mood. Be honest with each by giving them adequate space.</li> | |||
| <li>Time is on your side, rushing makes conversations worse.</li> | |||
| <li>Communication is lossy, especially verbal communication. Every hearsay hop adds static and chips at fidelity. Whenever possible, communicate directly with those you're addressing rather than passing the message through intermediaries.</li> | |||
| <li>Ask if things are clear. Ask what you left out. Ask if there was anything someone was expecting that you didn't cover. Address the gaps before they widen with time.</li> | |||
| <li>Consider where you put things. The right communication in the wrong place might as well not exist at all. When someone relies on search to find something itâs often because it wasnât where they expected something to be.</li> | |||
| <li>Communication often interrupts, so good communication is often about saying the right thing at the right time in the right way with the fewest side effects.</li> | |||
| </ol> | |||
| <hr/> | |||
| <h2>Communicating day-to-day</h2> | |||
| <p>This section includes specific examples of how we apply our philosophy day-to-day across the company. Since communication often interrupts, valuing each other's time and attention is a critical considersation. Keeping people in the loop is important, but asking them to follow along with everything is a distraction. That's why we follow reliable, predictable methods to share the right kind of information at the right time in the right place.</p> | |||
| <h3>Basic toolset</h3> | |||
| <p>98% of our internal communication happens inside Basecamp. That means all company-wide discussions, all social chatter, all project-related work, all sharing of ideas, all internal debates, all policy updates, and all official decisions and announcements all happen in Basecamp. A single centralized tool keeps everything together and creates a single source of truth for everyone across the company. We don't use email internally (we do externally), we don't use separate chat tools like Slack or Teams, and we rarely have in-person meetings. We do use Zoom or Skype for the occasional video conference between two or three people. And we occasionally discuss a pull request in Github.</p> | |||
| <h3>Automatic daily: "What did you work on today?</h3> | |||
| <p>Every workday at 16:30, Basecamp (the product) automatically asks every employee âWhat did you work on today?â Whatever people write up is shared with everyone in the company. Everyoneâs responses are displayed on a single page, grouped by date, so anyone whoâs curious about whatâs happening across the company can simply read from top to bottom. And if you have a question about anything, you can comment on anyoneâs âwhat did you work on today?â check-in to keep the conversation in context.</p> | |||
| <p>This routine is about loose accountability and strong reflection. Writing up what you did every day is a great way to think back about what you accomplished and how you spent your time.</p> | |||
| <p>Some people just jot down a few bullets. Others write multi-paragraph stories to share - and document - the thinking behind their work. There are no requirements here. We just ask everyone to write in their own style.</p> | |||
| <h3>Automatic weekly: "What will you be working on this week?"</h3> | |||
| <p>Every Monday morning, Basecamp automatically asks everyone âWhat will you be working on this week?â This is a chance for everyone to lay out the big picture of their week. Itâs not about regurgitating individual tasks, or diving headlong into the minutia of the week. Itâs generally just your 10,000 foot view of the week ahead. The big picture items, the general themes. It sets your mind up for the work ahead, and, collectively, it gives everyone a good sense of what happening across the company this week.</p> | |||
| <h3>Automatic occasionally: "Social questions"</h3> | |||
| <p>Every few weeks, or once a month, Basecamp will automatically ask everyone a social-style question. âWhat books are you reading?â Or âTry anything new lately?â Or âAnything inspire you lately?â Or âSeen any great design recently?â Or âWhat did you do this weekend?â These entirely options questions are meant to shake loose some stuff that youâd love to share with everyone else, but you hadnât had an opportunity to do so. This kind of internal communication helps grease the social gears. This is especially useful for remote teams, like ours. When we know each other a little better, we work a little better together.</p> | |||
| <h3>← Reflect every 6 weeks: Heartbeats</h3> | |||
| <p>Heartbeats summarize the last ~6-weeks of work for a given team, department, or individual (if that person is a department of one). They're written by the lead of the group, and they're meant for everyone in the company to read. They summarize the big picture accomplishments, they detail the little things that mattered, and they generally highlight the importance of the work. They'll also shine a light on challenges and difficulties along the way. They're a good reminder that it's not all sunshine all the time. On balance, Heartbeats are wonderful to write, fun to read, and they help everyone - including those not directly involved with the work - reflect on jobs well done and progress well made.</p> | |||
| <h3>→ Project every 6 weeks: Kickoffs</h3> | |||
| <p>Kickoffs are essentially the opposites of Heartbeats. Rather than reflect, they project. They're all about what the team plans on taking on over the next 6 weeks. Projects, initiatives, revamps, whatever it might be, if it's on the slate, it gets summarized in the Kickoff. While Kickoffs detail specific work for a specific group, they're also meant for full-company consumption. Like Heartbeats, they're written by the team lead. Kickoffs are broad in scope, so they don't cover all the details in the work ahead - the teams doing the work are the ones that wade into those weeds. We don't want to overwhelm everyone with details that don't matter. If anyone's curious about something included in a Kickoff, they're free to post a comment and ask a question.</p> | |||
| <h3>Whenever relevant: Announcements</h3> | |||
| <p>Occasionally we update an internal policy. Something about vacation time, or a new benefit, or reiterating that 40 hour weeks means 40 hour weeks. When we have something to announce company-wide, we don't send an email. Email is decentralized and there's no permanent record in a permanent place everyone can see. Instead, we post it either to the Basecamp HQ message board or as a comment on an existing policy document stored in Basecamp. This means everyone sees the same thing, everyone hears the same thing, and everyone knows the same thing - including future employees who are yet to join Basecamp. We now have a shared truth.</p> | |||
| <h3>Day-to-day project work: In context</h3> | |||
| <p>Efective communication requires context. Saying the right thing in the wrong place, or without proper detail, leads to double work and messages being missed. That's why we spin up a separate Basecamp project for every project we work on. Everything related to that project is communicated inside that project. All the tasks, all the discussions, all the documents, all the debates, and all the decisions happen inside those walls. Everyone who needs access, has access. Every Basecamp project is a capsule of everything someone needs to know about that work project.</p> | |||
| <p>Further, we take spacial context seriously. If we're discussing a specific task, we discuss it in the comment section below the task itself. If we're talking about a specific document, we discuss it in the comments attached to the document. Communications stay attached to the thing we're discussing. This provides the full story in one reliable place. The alternative is terrible - communication detached from the original source material, discussions all over the place, fragmented conversations missing entire chunks of time and detail, etc. Basecamp's "everything is commentable" feature is what makes this possible for us.</p> | |||
| <hr/> | |||
| <h2>Other resources</h2> | |||
| <p>We've detailed the pros and cons of chat vs. long form writing in our infamous "<a href="https://basecamp.com/guides/group-chat-problems">Group Chat: Group Stress</a>" guide. We definitely recommend checking it out.</p> | |||
| <p>You'll also find a detailed explanation of how our teams work day-to-day on software projects in "<a href="http://basecamp.com./shapeup">Shape Up: Stop Running in Circles and Ship Work that Matters</a>".</p> | |||
| <p>The <a href="https://basecamp.com/handbook">Basecamp Company Handbook</a> is also worth checking out. It explaines how we're structured, how we define titles and roles, our full benefits package, our company values, the responsibilities of individual contributors, managers, and executives, and other essential bits.</p> | |||
| <hr/> | |||
| <h3>Anything else?</h3> | |||
| <p>We hope this guide was useful, but we're sure we're missing something. What questions do you still have? What did you hope to learn that you didn't? Was anything more confusing than clarifying? What would have made this guide more helpful? It's a work in progress, and we'll update as necessary based on your feedback. Please send questions, suggestions, and thoughts directly to the author, Jason Fried, at <a href="mailto:jason@basecamp.com">jason@basecamp.com</a>. Thanks!</p> | |||
| </article> | |||
| <hr> | |||
| <nav> | |||
| <a href="/david/" title="Aller à l’accueil">🏠</a> • | |||
| <a href="/david/log/" title="Accès au flux RSS">🤖</a> • | |||
| <a href="http://larlet.com" title="Go to my English profile">🇨🇦</a> • | |||
| <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">📮</a> • | |||
| <abbr title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340">🧚</abbr> | |||
| </nav> | |||
| </body> | |||
| </html> | |||
+ 91
- 0
cache/2020/322e7a8997c732a5fdca0baaea7b9ede/index.md
View File
| @@ -0,0 +1,91 @@ | |||
| title: Guide to Internal Communication, the Basecamp Way | |||
| url: https://basecamp.com/guides/how-we-communicate | |||
| hash_url: 322e7a8997c732a5fdca0baaea7b9ede | |||
| <h2>Rules of thumb, and general philosophy</h2> | |||
| <p>Below you'll find a collection of general principles we try to keep in mind at Basecamp when communicating with teammates, within departments, across the company, and with the public. They aren't requirements, but they serve to create boundaries and shared practices to draw upon when we do the one thing that affects everything else we do: communicate.</p> | |||
| <ol class="stacked-list"> | |||
| <li>You can not not communicate. Not discussing the elephant in the room is communicating. Few things are as important to study, practice, and perfect as clear communication.</li> | |||
| <li>Real-time sometimes, asynchronous most of the time.</li> | |||
| <li>Internal communication based on long-form writing, rather than a verbal tradition of meetings, speaking, and chatting, leads to a welcomed reduction in meetings, video conferences, calls, or other real-time opportunities to interrupt and be interrupted.</li> | |||
| <li>Give meaningful discussions a meaningful amount of time to develop and unfold. Rushing to judgement, or demanding immediate responses, only serves to increase the odds of poor decision making.</li> | |||
| <li>Meetings are the last resort, not the first option.</li> | |||
| <li>Writing solidifies, chat dissolves. Substantial decisions start and end with an exchange of complete thoughts, not one-line-at-a-time jousts. If it's important, critical, or fundamental, write it up, don't chat it down.</li> | |||
| <li>Speaking only helps whoâs in the room, writing helps everyone. This includes people who's couldn't make it, or future employees who join years from now.</li> | |||
| <li>If your words can be perceived in different ways, they'll be understood in the way which does the most harm.</li> | |||
| <li>Never expect or require someone to get back to you immediately unless itâs a true emergency. The expectation of immediate response is toxic.</li> | |||
| <li>If you have to repeat yourself, you werenât clear enough the first time. However, if you're talking about something brand new, you may have to repeat yourself for years before you're heard. Pick your repeats wisely.</li> | |||
| <li>Poor communication creates more work.</li> | |||
| <li>Companies don't have communication problems, they have miscommunication problems. The smaller the company, group, or team, the fewer opportunities for miscommunication.</li> | |||
| <li>Five people in a room for an hour isn't a one hour meeting, it's a five hour meeting. Be mindful of the tradeoffs.</li> | |||
| <li>Be proactive about "wait, what?" questions by providing factual context and spacial context. Factual are the things people also need to know. Spacial is where the communication happens (for example, if it's about a specific to-do, discuss it right under the to-do, not somewhere else).</li> | |||
| <li>Communication shouldn't require schedule synchronization. Calendars have nothing to do with communication. Writing, rather than speaking or meeting, is independent of schedule and far more direct.</li> | |||
| <li>"Now" is often the wrong time to say what just popped into your head. It's better to let it filter it through the sieve of time. What's left is the part worth saying.</li> | |||
| <li>Ask yourself if others will feel compelled to rush their response if you rush your approach.</li> | |||
| <li>The end of the day has a way of convincing you what youâve done is good, but the next morning has a way of telling the you truth. If you aren't sure, sleep on it before saying it.</li> | |||
| <li>If you want an answer, you have to ask a question. People typically have a lot to say, but they'll volunteer little. Automatic questions on a regular schedule help people practice sharing, writing, and communicating.</li> | |||
| <li>Occasionally pick random words, sentences, or paragraphs and hit delete. Did it matter?</li> | |||
| <li>Urgency is overrated, ASAP is poison.</li> | |||
| <li>If something's going to be difficult to hear or share, invite questions at the end. Ending without the invitation will lead to public silence but private conjecture. This is where rumors breed.</li> | |||
| <li>Where you put something, and what you call it, matters. When titling something, lead with the most important information. Keep in mind that many technical systems truncate long text or titles.</li> | |||
| <li>Write at the right time. Sharing something at 5pm may keep someone at work longer. You may have some spare time on a Sunday afternoon to write something, but putting it out there on Sunday may pull people back into work on the weekends. Early Monday morning communication may be buried by other things. There may not be a perfect time, but there's certainly a wrong time. Keep that in mind when you hit send.</li> | |||
| <li>Great news delivered on the heels of bad news makes both bits worse. The bad news feels like it's being buried, the good news feels like it's being injected to change the mood. Be honest with each by giving them adequate space.</li> | |||
| <li>Time is on your side, rushing makes conversations worse.</li> | |||
| <li>Communication is lossy, especially verbal communication. Every hearsay hop adds static and chips at fidelity. Whenever possible, communicate directly with those you're addressing rather than passing the message through intermediaries.</li> | |||
| <li>Ask if things are clear. Ask what you left out. Ask if there was anything someone was expecting that you didn't cover. Address the gaps before they widen with time.</li> | |||
| <li>Consider where you put things. The right communication in the wrong place might as well not exist at all. When someone relies on search to find something itâs often because it wasnât where they expected something to be.</li> | |||
| <li>Communication often interrupts, so good communication is often about saying the right thing at the right time in the right way with the fewest side effects.</li> | |||
| </ol> | |||
| <hr/> | |||
| <h2>Communicating day-to-day</h2> | |||
| <p>This section includes specific examples of how we apply our philosophy day-to-day across the company. Since communication often interrupts, valuing each other's time and attention is a critical considersation. Keeping people in the loop is important, but asking them to follow along with everything is a distraction. That's why we follow reliable, predictable methods to share the right kind of information at the right time in the right place.</p> | |||
| <h3>Basic toolset</h3> | |||
| <p>98% of our internal communication happens inside Basecamp. That means all company-wide discussions, all social chatter, all project-related work, all sharing of ideas, all internal debates, all policy updates, and all official decisions and announcements all happen in Basecamp. A single centralized tool keeps everything together and creates a single source of truth for everyone across the company. We don't use email internally (we do externally), we don't use separate chat tools like Slack or Teams, and we rarely have in-person meetings. We do use Zoom or Skype for the occasional video conference between two or three people. And we occasionally discuss a pull request in Github.</p> | |||
| <h3>Automatic daily: "What did you work on today?</h3> | |||
| <p>Every workday at 16:30, Basecamp (the product) automatically asks every employee âWhat did you work on today?â Whatever people write up is shared with everyone in the company. Everyoneâs responses are displayed on a single page, grouped by date, so anyone whoâs curious about whatâs happening across the company can simply read from top to bottom. And if you have a question about anything, you can comment on anyoneâs âwhat did you work on today?â check-in to keep the conversation in context.</p> | |||
| <p>This routine is about loose accountability and strong reflection. Writing up what you did every day is a great way to think back about what you accomplished and how you spent your time.</p> | |||
| <p>Some people just jot down a few bullets. Others write multi-paragraph stories to share - and document - the thinking behind their work. There are no requirements here. We just ask everyone to write in their own style.</p> | |||
| <h3>Automatic weekly: "What will you be working on this week?"</h3> | |||
| <p>Every Monday morning, Basecamp automatically asks everyone âWhat will you be working on this week?â This is a chance for everyone to lay out the big picture of their week. Itâs not about regurgitating individual tasks, or diving headlong into the minutia of the week. Itâs generally just your 10,000 foot view of the week ahead. The big picture items, the general themes. It sets your mind up for the work ahead, and, collectively, it gives everyone a good sense of what happening across the company this week.</p> | |||
| <h3>Automatic occasionally: "Social questions"</h3> | |||
| <p>Every few weeks, or once a month, Basecamp will automatically ask everyone a social-style question. âWhat books are you reading?â Or âTry anything new lately?â Or âAnything inspire you lately?â Or âSeen any great design recently?â Or âWhat did you do this weekend?â These entirely options questions are meant to shake loose some stuff that youâd love to share with everyone else, but you hadnât had an opportunity to do so. This kind of internal communication helps grease the social gears. This is especially useful for remote teams, like ours. When we know each other a little better, we work a little better together.</p> | |||
| <h3>← Reflect every 6 weeks: Heartbeats</h3> | |||
| <p>Heartbeats summarize the last ~6-weeks of work for a given team, department, or individual (if that person is a department of one). They're written by the lead of the group, and they're meant for everyone in the company to read. They summarize the big picture accomplishments, they detail the little things that mattered, and they generally highlight the importance of the work. They'll also shine a light on challenges and difficulties along the way. They're a good reminder that it's not all sunshine all the time. On balance, Heartbeats are wonderful to write, fun to read, and they help everyone - including those not directly involved with the work - reflect on jobs well done and progress well made.</p> | |||
| <h3>→ Project every 6 weeks: Kickoffs</h3> | |||
| <p>Kickoffs are essentially the opposites of Heartbeats. Rather than reflect, they project. They're all about what the team plans on taking on over the next 6 weeks. Projects, initiatives, revamps, whatever it might be, if it's on the slate, it gets summarized in the Kickoff. While Kickoffs detail specific work for a specific group, they're also meant for full-company consumption. Like Heartbeats, they're written by the team lead. Kickoffs are broad in scope, so they don't cover all the details in the work ahead - the teams doing the work are the ones that wade into those weeds. We don't want to overwhelm everyone with details that don't matter. If anyone's curious about something included in a Kickoff, they're free to post a comment and ask a question.</p> | |||
| <h3>Whenever relevant: Announcements</h3> | |||
| <p>Occasionally we update an internal policy. Something about vacation time, or a new benefit, or reiterating that 40 hour weeks means 40 hour weeks. When we have something to announce company-wide, we don't send an email. Email is decentralized and there's no permanent record in a permanent place everyone can see. Instead, we post it either to the Basecamp HQ message board or as a comment on an existing policy document stored in Basecamp. This means everyone sees the same thing, everyone hears the same thing, and everyone knows the same thing - including future employees who are yet to join Basecamp. We now have a shared truth.</p> | |||
| <h3>Day-to-day project work: In context</h3> | |||
| <p>Efective communication requires context. Saying the right thing in the wrong place, or without proper detail, leads to double work and messages being missed. That's why we spin up a separate Basecamp project for every project we work on. Everything related to that project is communicated inside that project. All the tasks, all the discussions, all the documents, all the debates, and all the decisions happen inside those walls. Everyone who needs access, has access. Every Basecamp project is a capsule of everything someone needs to know about that work project.</p> | |||
| <p>Further, we take spacial context seriously. If we're discussing a specific task, we discuss it in the comment section below the task itself. If we're talking about a specific document, we discuss it in the comments attached to the document. Communications stay attached to the thing we're discussing. This provides the full story in one reliable place. The alternative is terrible - communication detached from the original source material, discussions all over the place, fragmented conversations missing entire chunks of time and detail, etc. Basecamp's "everything is commentable" feature is what makes this possible for us.</p> | |||
| <hr/> | |||
| <h2>Other resources</h2> | |||
| <p>We've detailed the pros and cons of chat vs. long form writing in our infamous "<a href="https://basecamp.com/guides/group-chat-problems">Group Chat: Group Stress</a>" guide. We definitely recommend checking it out.</p> | |||
| <p>You'll also find a detailed explanation of how our teams work day-to-day on software projects in "<a href="http://basecamp.com./shapeup">Shape Up: Stop Running in Circles and Ship Work that Matters</a>".</p> | |||
| <p>The <a href="https://basecamp.com/handbook">Basecamp Company Handbook</a> is also worth checking out. It explaines how we're structured, how we define titles and roles, our full benefits package, our company values, the responsibilities of individual contributors, managers, and executives, and other essential bits.</p> | |||
| <hr/> | |||
| <h3>Anything else?</h3> | |||
| <p>We hope this guide was useful, but we're sure we're missing something. What questions do you still have? What did you hope to learn that you didn't? Was anything more confusing than clarifying? What would have made this guide more helpful? It's a work in progress, and we'll update as necessary based on your feedback. Please send questions, suggestions, and thoughts directly to the author, Jason Fried, at <a href="mailto:jason@basecamp.com">jason@basecamp.com</a>. Thanks!</p> | |||
+ 167
- 0
cache/2020/685842ac9d1a3206af33dbd51d08cbf0/index.html
View File
| @@ -0,0 +1,167 @@ | |||
| <!doctype html><!-- This is a valid HTML5 document. --> | |||
| <!-- Screen readers, SEO, extensions and so on. --> | |||
| <html lang="fr"> | |||
| <!-- Has to be within the first 1024 bytes, hence before the <title> | |||
| See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset --> | |||
| <meta charset="utf-8"> | |||
| <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 --> | |||
| <!-- The viewport meta is quite crowded and we are responsible for that. | |||
| See: https://codepen.io/tigt/post/meta-viewport-for-2015 --> | |||
| <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1,shrink-to-fit=no"> | |||
| <!-- Required to make a valid HTML5 document. --> | |||
| <title>The modern web is becoming an unusable, user-hostile wasteland (archive) — David Larlet</title> | |||
| <!-- Lightest blank gif, avoids an extra query to the server. --> | |||
| <link rel="icon" href="data:;base64,iVBORw0KGgo="> | |||
| <!-- Thank you Florens! --> | |||
| <link rel="stylesheet" href="/static/david/css/style_2020-01-06.css"> | |||
| <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. --> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_regular.woff2" as="font" type="font/woff2" crossorigin> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_bold.woff2" as="font" type="font/woff2" crossorigin> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_italic.woff2" as="font" type="font/woff2" crossorigin> | |||
| <meta name="robots" content="noindex, nofollow"> | |||
| <meta content="origin-when-cross-origin" name="referrer"> | |||
| <!-- Canonical URL for SEO purposes --> | |||
| <link rel="canonical" href="https://omarabid.com/the-modern-web"> | |||
| <body class="remarkdown h1-underline h2-underline hr-center ul-star pre-tick"> | |||
| <article> | |||
| <h1>The modern web is becoming an unusable, user-hostile wasteland</h1> | |||
| <h2><a href="https://omarabid.com/the-modern-web">Source originale du contenu</a></h2> | |||
| <blockquote> | |||
| <p>In one of Gerald Weinberg’s books, probably The Secrets of Consulting, there’s the apocryphal story of the giant multinational hamburger chain where some bright MBA figured out that eliminating just three sesame seeds from a sesame-seed bun would be completely unnoticeable by anyone yet would save the company $126,000 per year. So they do it, and time passes, and another bushy-tailed MBA comes along, and does another study, and concludes that removing another five sesame seeds wouldn’t hurt either, and would save even more money, and so on and so forth, every year or two, the new management trainee looking for ways to save money proposes removing a sesame seed or two, until eventually, they’re shipping hamburger buns with exactly three sesame seeds artfully arranged in a triangle, and nobody buys their hamburgers any more.</p> | |||
| </blockquote> | |||
| <p><em>Joel Spolsky from <a href="https://www.joelonsoftware.com/2007/09/11/theres-no-place-like-127001/">There’s no place like 127.0.0.1</a></em></p> | |||
| <p>As I keep browsing today’s internet, I keep recalling this extract. It’s the same thing happening with the modern web: If you add another advertisement to your pages, you generate more revenue. If you track your users better, now you can deliver tailored ads and your conversion rates are higher. If you restrict users from leaving your walled garden ecosystem, now you get all the juice from whatever attention they have.</p> | |||
| <p>The question is: At which point do we reach the breaking point?</p> | |||
| <p>And I think the answer is: <em>We are very close</em>.</p> | |||
| <p>Here are some of these websites, who have managed over time to turn the user experience almost unusable for anyone who doesn’t have an account.</p> | |||
| <h2 id="facebook_2">Facebook <a class="head_anchor" href="#facebook_2">#</a> | |||
| </h2> | |||
| <p>If you try to open a Facebook page without an account, this is what you get.</p> | |||
| <p><a href="https://svbtleusercontent.com/dJwcwmJQW8QkFHeMQBKnTC0xspap.png"><img src="https://svbtleusercontent.com/dJwcwmJQW8QkFHeMQBKnTC0xspap.png" alt="Screen Shot 2019-11-11 at 6.34.32 PM.png"/></a></p> | |||
| <p>There is a blue header at the top that has the login form. But in case you missed it, Facebook has made another big white one at the bottom. Have you signed up yet?</p> | |||
| <p>Let’s try to scroll a little bit more.</p> | |||
| <p><a href="https://svbtleusercontent.com/gNR1XozEXRGq8TxxBbtSK60xspap.png"><img src="https://svbtleusercontent.com/gNR1XozEXRGq8TxxBbtSK60xspap.png" alt="Screen Shot 2019-11-11 at 6.34.55 PM.png"/></a></p> | |||
| <p>Wooha! Looks like you didn’t login, or you haven’t signed up yet! But there is a small “Not Now” button; because we know <em>you’ll have to create an account later</em>.</p> | |||
| <p>In case you think this experience is garbage; wait until you see the mobile version.</p> | |||
| <p><a href="https://svbtleusercontent.com/GkQ5zG4SoV2yZDFPZCn1a0xspap.png"><img src="https://svbtleusercontent.com/GkQ5zG4SoV2yZDFPZCn1a0xspap.png" alt="IMG_3528.PNG"/></a></p> | |||
| <p>It’s not even clear, at this point, what the actual page is about. Let’s try to scroll a bit more.</p> | |||
| <p><a href="https://svbtleusercontent.com/iwrmnvSWCCZ6LWkp1V3SRH0xspap.png"><img src="https://svbtleusercontent.com/iwrmnvSWCCZ6LWkp1V3SRH0xspap.png" alt="IMG_3530.PNG"/></a></p> | |||
| <p>There isn’t even any content in this page. Who designed and approved this mess?</p> | |||
| <p>Think you are a smart-ass? You can create a fake account. But after a while, Facebook will think you are dodgy and ask for more identifiable information.</p> | |||
| <p><a href="https://svbtleusercontent.com/5xyZiwADWPEziRppRmEvSM0xspap.png"><img src="https://svbtleusercontent.com/5xyZiwADWPEziRppRmEvSM0xspap.png" alt="Screen Shot 2019-11-20 at 11.58.45 AM.png"/></a></p> | |||
| <p>There is a solution: To buy a disposable phone number and use it to complete the verification. But this was the breaking point. At this point, I no longer bother.</p> | |||
| <p>Is Twitter any better? Well, it looks like they are trying to strike a balance between giving you free data and their craving for your identity. You can still read the president tweets from his main page.</p> | |||
| <p><a href="https://svbtleusercontent.com/vfk2SLog4xoJR693CHSUaX0xspap.png"><img src="https://svbtleusercontent.com/vfk2SLog4xoJR693CHSUaX0xspap.png" alt="Screen Shot 2019-12-20 at 1.07.06 PM.png"/></a></p> | |||
| <p>Trying to read his “Tweets & replies” is less fruitful though.</p> | |||
| <p><a href="https://svbtleusercontent.com/8eBsgGd149ankeY2dh9qj80xspap.png"><img src="https://svbtleusercontent.com/8eBsgGd149ankeY2dh9qj80xspap.png" alt="Screen Shot 2019-12-20 at 1.07.44 PM.png"/></a></p> | |||
| <p>Actually, all of these buttons are inaccessible as for right now.</p> | |||
| <p><a href="https://svbtleusercontent.com/iN7M3MxngAUo8bX8F2JCA80xspap.png"><img src="https://svbtleusercontent.com/iN7M3MxngAUo8bX8F2JCA80xspap.png" alt="Screen Shot 2019-12-20 at 1.07.06 PM.png"/></a></p> | |||
| <p>Extrapolating on the progress these websites have been making, it’s only a matter of time before <em>nothing</em> on Twitter is readable without an account. Maybe, you’ll get a spoiler in the future; but that’s it.</p> | |||
| <h2 id="medium_2">Medium <a class="head_anchor" href="#medium_2">#</a> | |||
| </h2> | |||
| <p>Everyone is complaining about these tech-giants these days, but are the new incumbents doing any better? Medium is one these <em>dudes</em> and they claim to be the good guys.</p> | |||
| <blockquote class="short"> | |||
| <p>Keep it ad-free<br/> | |||
| Medium doesn’t accept advertising. Please don’t market yourself or other products, feature advertisements, or include requests for claps or donations.</p> | |||
| </blockquote> | |||
| <p><a href="https://svbtleusercontent.com/9VdU6n8fbQbksQwSnKp6Nx0xspap.png"><img src="https://svbtleusercontent.com/9VdU6n8fbQbksQwSnKp6Nx0xspap.png" alt="Screen Shot 2019-11-11 at 7.26.25 PM.png"/></a></p> | |||
| <p>No ads? Time to check the terms of service.</p> | |||
| <blockquote> | |||
| <p>In consideration for Medium granting you access to and use of the Services, you agree that Medium may enable advertising on the Services, including in connection with the display <em>of your content</em> or other information. We may also <em>use your content</em> to promote Medium, including its products and content. We will never sell your content to third parties without your explicit permission.</p> | |||
| </blockquote> | |||
| <p>So they are advertising, but <em>you are not</em>. But hey! at least they are not selling your content without your permission. Don’t hold your breath, though. The terms can change at a moment notice.</p> | |||
| <p>And in case you wondered what the experience of browsing medium is, here it is:</p> | |||
| <p><a href="https://svbtleusercontent.com/wyvY4QLnCK9RFwxDG7CSDc0xspap.png"><img src="https://svbtleusercontent.com/wyvY4QLnCK9RFwxDG7CSDc0xspap.png" alt="Screen Shot 2019-11-11 at 7.20.10 PM.png"/></a></p> | |||
| <p><a href="https://svbtleusercontent.com/wcxC522McDBrpK98NQyK4f0xspap.png"><img src="https://svbtleusercontent.com/wcxC522McDBrpK98NQyK4f0xspap.png" alt="Screen Shot 2019-11-11 at 7.22.33 PM.png"/></a></p> | |||
| <p><a href="https://svbtleusercontent.com/rFMbk9Nh775qzsV2Lx3FLn0xspap.png"><img src="https://svbtleusercontent.com/rFMbk9Nh775qzsV2Lx3FLn0xspap.png" alt="Screen Shot 2019-11-11 at 7.23.44 PM.png"/></a></p> | |||
| <p>But what if you pay? That is you are not the product like they said. Let’s say you check a supposedly reputable company (i.e. Bloomberg) and think of opting for a digital subscription.</p> | |||
| <p><a href="https://svbtleusercontent.com/uZ3k94FgmD61DTUb4m1bqd0xspap.png"><img src="https://svbtleusercontent.com/uZ3k94FgmD61DTUb4m1bqd0xspap.png" alt="Screen Shot 2019-11-23 at 9.33.01 PM.png"/></a></p> | |||
| <p>I mean it’s only $2/month. Less than what you’d pay for a cup of coffee. Or $<strong>340</strong>/year; here hoping you are very bad at math.</p> | |||
| <p>In a nutshell, if I can describe my browsing experience in 2019.</p> | |||
| <ul> | |||
| <li>Websites asking to login, register or enter an email.</li> | |||
| <li>Websites asking for your phone number after you gave up your email.</li> | |||
| <li>Websites asking to allow HTML5 notifications.</li> | |||
| <li>Websites downloading 50Mb of data and making hundreds of requests to serve 6Kb worth of text.</li> | |||
| <li>Websites that are not functioning because they have too much JavaScript.</li> | |||
| <li>Websites that are not functioning because some of the JavaScript was caught by uBlock Origin.</li> | |||
| <li>Websites asking to turn off the Ad Blocker.</li> | |||
| <li>Websites asking to accept the cookies in 41,484 different ways.</li> | |||
| <li>Websites asking to download their mobile app which is non-native and requires around 200Mb of storage.</li> | |||
| <li>Popups to buy a deal or download some random crap.</li> | |||
| <li>reCaptcha with random street images; that are sometimes impossible to solve.</li> | |||
| <li>CloudFlare DDoS protection thinking I’m a bot.</li> | |||
| <li>Youtube running a 2:30 minutes ad for a 3:30 minutes music video.</li> | |||
| <li>Video or Website not showing up because I’m not in said country.</li> | |||
| <li>Linkedin that keeps sending dozens of emails despite unsubscribing multiple times; and somehow evades the Spam filter</li> | |||
| </ul> | |||
| <h1 id="the-breaking-point_1">The breaking point <a class="head_anchor" href="#the-breaking-point_1">#</a> | |||
| </h1> | |||
| <p>I used to have a bank account with a local branch of BNP Paribas. When I signed up, I opted for various services like Online Banking, a “Platinum” debit card and other services. It made sense at the time to pay for online banking since it was long ago, but does it make sense now?</p> | |||
| <p>Worse, in the last few years, I have seen the bill for these services increase three fold in the last 3 years. And they started charging for small crap: Deposit money? There is a small fee. Deposit a check? There is a small fee. Withdraw from another bank ATM? The fee now is so high I have to think twice. <em>Inconvenient</em>.</p> | |||
| <p>Changing banks is annoying but not impossible. It’d be better if I can avoid such a thing but there is a point where the system breaks. And at some point, you look at the bill and decide: That’s the <strong>breaking point</strong>.</p> | |||
| </article> | |||
| <hr> | |||
| <nav> | |||
| <a href="/david/" title="Aller à l’accueil">🏠</a> • | |||
| <a href="/david/log/" title="Accès au flux RSS">🤖</a> • | |||
| <a href="http://larlet.com" title="Go to my English profile">🇨🇦</a> • | |||
| <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">📮</a> • | |||
| <abbr title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340">🧚</abbr> | |||
| </nav> | |||
| </body> | |||
| </html> | |||
+ 114
- 0
cache/2020/685842ac9d1a3206af33dbd51d08cbf0/index.md
View File
| @@ -0,0 +1,114 @@ | |||
| title: The modern web is becoming an unusable, user-hostile wasteland | |||
| url: https://omarabid.com/the-modern-web | |||
| hash_url: 685842ac9d1a3206af33dbd51d08cbf0 | |||
| <blockquote> | |||
| <p>In one of Gerald Weinberg’s books, probably The Secrets of Consulting, there’s the apocryphal story of the giant multinational hamburger chain where some bright MBA figured out that eliminating just three sesame seeds from a sesame-seed bun would be completely unnoticeable by anyone yet would save the company $126,000 per year. So they do it, and time passes, and another bushy-tailed MBA comes along, and does another study, and concludes that removing another five sesame seeds wouldn’t hurt either, and would save even more money, and so on and so forth, every year or two, the new management trainee looking for ways to save money proposes removing a sesame seed or two, until eventually, they’re shipping hamburger buns with exactly three sesame seeds artfully arranged in a triangle, and nobody buys their hamburgers any more.</p> | |||
| </blockquote> | |||
| <p><em>Joel Spolsky from <a href="https://www.joelonsoftware.com/2007/09/11/theres-no-place-like-127001/">There’s no place like 127.0.0.1</a></em></p> | |||
| <p>As I keep browsing today’s internet, I keep recalling this extract. It’s the same thing happening with the modern web: If you add another advertisement to your pages, you generate more revenue. If you track your users better, now you can deliver tailored ads and your conversion rates are higher. If you restrict users from leaving your walled garden ecosystem, now you get all the juice from whatever attention they have.</p> | |||
| <p>The question is: At which point do we reach the breaking point?</p> | |||
| <p>And I think the answer is: <em>We are very close</em>.</p> | |||
| <p>Here are some of these websites, who have managed over time to turn the user experience almost unusable for anyone who doesn’t have an account.</p> | |||
| <h2 id="facebook_2">Facebook <a class="head_anchor" href="#facebook_2">#</a> | |||
| </h2> | |||
| <p>If you try to open a Facebook page without an account, this is what you get.</p> | |||
| <p><a href="https://svbtleusercontent.com/dJwcwmJQW8QkFHeMQBKnTC0xspap.png"><img src="https://svbtleusercontent.com/dJwcwmJQW8QkFHeMQBKnTC0xspap.png" alt="Screen Shot 2019-11-11 at 6.34.32 PM.png"/></a></p> | |||
| <p>There is a blue header at the top that has the login form. But in case you missed it, Facebook has made another big white one at the bottom. Have you signed up yet?</p> | |||
| <p>Let’s try to scroll a little bit more.</p> | |||
| <p><a href="https://svbtleusercontent.com/gNR1XozEXRGq8TxxBbtSK60xspap.png"><img src="https://svbtleusercontent.com/gNR1XozEXRGq8TxxBbtSK60xspap.png" alt="Screen Shot 2019-11-11 at 6.34.55 PM.png"/></a></p> | |||
| <p>Wooha! Looks like you didn’t login, or you haven’t signed up yet! But there is a small “Not Now” button; because we know <em>you’ll have to create an account later</em>.</p> | |||
| <p>In case you think this experience is garbage; wait until you see the mobile version.</p> | |||
| <p><a href="https://svbtleusercontent.com/GkQ5zG4SoV2yZDFPZCn1a0xspap.png"><img src="https://svbtleusercontent.com/GkQ5zG4SoV2yZDFPZCn1a0xspap.png" alt="IMG_3528.PNG"/></a></p> | |||
| <p>It’s not even clear, at this point, what the actual page is about. Let’s try to scroll a bit more.</p> | |||
| <p><a href="https://svbtleusercontent.com/iwrmnvSWCCZ6LWkp1V3SRH0xspap.png"><img src="https://svbtleusercontent.com/iwrmnvSWCCZ6LWkp1V3SRH0xspap.png" alt="IMG_3530.PNG"/></a></p> | |||
| <p>There isn’t even any content in this page. Who designed and approved this mess?</p> | |||
| <p>Think you are a smart-ass? You can create a fake account. But after a while, Facebook will think you are dodgy and ask for more identifiable information.</p> | |||
| <p><a href="https://svbtleusercontent.com/5xyZiwADWPEziRppRmEvSM0xspap.png"><img src="https://svbtleusercontent.com/5xyZiwADWPEziRppRmEvSM0xspap.png" alt="Screen Shot 2019-11-20 at 11.58.45 AM.png"/></a></p> | |||
| <p>There is a solution: To buy a disposable phone number and use it to complete the verification. But this was the breaking point. At this point, I no longer bother.</p> | |||
| <p>Is Twitter any better? Well, it looks like they are trying to strike a balance between giving you free data and their craving for your identity. You can still read the president tweets from his main page.</p> | |||
| <p><a href="https://svbtleusercontent.com/vfk2SLog4xoJR693CHSUaX0xspap.png"><img src="https://svbtleusercontent.com/vfk2SLog4xoJR693CHSUaX0xspap.png" alt="Screen Shot 2019-12-20 at 1.07.06 PM.png"/></a></p> | |||
| <p>Trying to read his “Tweets & replies” is less fruitful though.</p> | |||
| <p><a href="https://svbtleusercontent.com/8eBsgGd149ankeY2dh9qj80xspap.png"><img src="https://svbtleusercontent.com/8eBsgGd149ankeY2dh9qj80xspap.png" alt="Screen Shot 2019-12-20 at 1.07.44 PM.png"/></a></p> | |||
| <p>Actually, all of these buttons are inaccessible as for right now.</p> | |||
| <p><a href="https://svbtleusercontent.com/iN7M3MxngAUo8bX8F2JCA80xspap.png"><img src="https://svbtleusercontent.com/iN7M3MxngAUo8bX8F2JCA80xspap.png" alt="Screen Shot 2019-12-20 at 1.07.06 PM.png"/></a></p> | |||
| <p>Extrapolating on the progress these websites have been making, it’s only a matter of time before <em>nothing</em> on Twitter is readable without an account. Maybe, you’ll get a spoiler in the future; but that’s it.</p> | |||
| <h2 id="medium_2">Medium <a class="head_anchor" href="#medium_2">#</a> | |||
| </h2> | |||
| <p>Everyone is complaining about these tech-giants these days, but are the new incumbents doing any better? Medium is one these <em>dudes</em> and they claim to be the good guys.</p> | |||
| <blockquote class="short"> | |||
| <p>Keep it ad-free<br/> | |||
| Medium doesn’t accept advertising. Please don’t market yourself or other products, feature advertisements, or include requests for claps or donations.</p> | |||
| </blockquote> | |||
| <p><a href="https://svbtleusercontent.com/9VdU6n8fbQbksQwSnKp6Nx0xspap.png"><img src="https://svbtleusercontent.com/9VdU6n8fbQbksQwSnKp6Nx0xspap.png" alt="Screen Shot 2019-11-11 at 7.26.25 PM.png"/></a></p> | |||
| <p>No ads? Time to check the terms of service.</p> | |||
| <blockquote> | |||
| <p>In consideration for Medium granting you access to and use of the Services, you agree that Medium may enable advertising on the Services, including in connection with the display <em>of your content</em> or other information. We may also <em>use your content</em> to promote Medium, including its products and content. We will never sell your content to third parties without your explicit permission.</p> | |||
| </blockquote> | |||
| <p>So they are advertising, but <em>you are not</em>. But hey! at least they are not selling your content without your permission. Don’t hold your breath, though. The terms can change at a moment notice.</p> | |||
| <p>And in case you wondered what the experience of browsing medium is, here it is:</p> | |||
| <p><a href="https://svbtleusercontent.com/wyvY4QLnCK9RFwxDG7CSDc0xspap.png"><img src="https://svbtleusercontent.com/wyvY4QLnCK9RFwxDG7CSDc0xspap.png" alt="Screen Shot 2019-11-11 at 7.20.10 PM.png"/></a></p> | |||
| <p><a href="https://svbtleusercontent.com/wcxC522McDBrpK98NQyK4f0xspap.png"><img src="https://svbtleusercontent.com/wcxC522McDBrpK98NQyK4f0xspap.png" alt="Screen Shot 2019-11-11 at 7.22.33 PM.png"/></a></p> | |||
| <p><a href="https://svbtleusercontent.com/rFMbk9Nh775qzsV2Lx3FLn0xspap.png"><img src="https://svbtleusercontent.com/rFMbk9Nh775qzsV2Lx3FLn0xspap.png" alt="Screen Shot 2019-11-11 at 7.23.44 PM.png"/></a></p> | |||
| <p>But what if you pay? That is you are not the product like they said. Let’s say you check a supposedly reputable company (i.e. Bloomberg) and think of opting for a digital subscription.</p> | |||
| <p><a href="https://svbtleusercontent.com/uZ3k94FgmD61DTUb4m1bqd0xspap.png"><img src="https://svbtleusercontent.com/uZ3k94FgmD61DTUb4m1bqd0xspap.png" alt="Screen Shot 2019-11-23 at 9.33.01 PM.png"/></a></p> | |||
| <p>I mean it’s only $2/month. Less than what you’d pay for a cup of coffee. Or $<strong>340</strong>/year; here hoping you are very bad at math.</p> | |||
| <p>In a nutshell, if I can describe my browsing experience in 2019.</p> | |||
| <ul> | |||
| <li>Websites asking to login, register or enter an email.</li> | |||
| <li>Websites asking for your phone number after you gave up your email.</li> | |||
| <li>Websites asking to allow HTML5 notifications.</li> | |||
| <li>Websites downloading 50Mb of data and making hundreds of requests to serve 6Kb worth of text.</li> | |||
| <li>Websites that are not functioning because they have too much JavaScript.</li> | |||
| <li>Websites that are not functioning because some of the JavaScript was caught by uBlock Origin.</li> | |||
| <li>Websites asking to turn off the Ad Blocker.</li> | |||
| <li>Websites asking to accept the cookies in 41,484 different ways.</li> | |||
| <li>Websites asking to download their mobile app which is non-native and requires around 200Mb of storage.</li> | |||
| <li>Popups to buy a deal or download some random crap.</li> | |||
| <li>reCaptcha with random street images; that are sometimes impossible to solve.</li> | |||
| <li>CloudFlare DDoS protection thinking I’m a bot.</li> | |||
| <li>Youtube running a 2:30 minutes ad for a 3:30 minutes music video.</li> | |||
| <li>Video or Website not showing up because I’m not in said country.</li> | |||
| <li>Linkedin that keeps sending dozens of emails despite unsubscribing multiple times; and somehow evades the Spam filter</li> | |||
| </ul> | |||
| <h1 id="the-breaking-point_1">The breaking point <a class="head_anchor" href="#the-breaking-point_1">#</a> | |||
| </h1> | |||
| <p>I used to have a bank account with a local branch of BNP Paribas. When I signed up, I opted for various services like Online Banking, a “Platinum” debit card and other services. It made sense at the time to pay for online banking since it was long ago, but does it make sense now?</p> | |||
| <p>Worse, in the last few years, I have seen the bill for these services increase three fold in the last 3 years. And they started charging for small crap: Deposit money? There is a small fee. Deposit a check? There is a small fee. Withdraw from another bank ATM? The fee now is so high I have to think twice. <em>Inconvenient</em>.</p> | |||
| <p>Changing banks is annoying but not impossible. It’d be better if I can avoid such a thing but there is a point where the system breaks. And at some point, you look at the bill and decide: That’s the <strong>breaking point</strong>.</p> | |||
+ 81
- 0
cache/2020/ceecad22409cbd161b85bf5f18b09413/index.html
View File
| @@ -0,0 +1,81 @@ | |||
| <!doctype html><!-- This is a valid HTML5 document. --> | |||
| <!-- Screen readers, SEO, extensions and so on. --> | |||
| <html lang="fr"> | |||
| <!-- Has to be within the first 1024 bytes, hence before the <title> | |||
| See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset --> | |||
| <meta charset="utf-8"> | |||
| <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 --> | |||
| <!-- The viewport meta is quite crowded and we are responsible for that. | |||
| See: https://codepen.io/tigt/post/meta-viewport-for-2015 --> | |||
| <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1,shrink-to-fit=no"> | |||
| <!-- Required to make a valid HTML5 document. --> | |||
| <title>Estimating NetNewsWire for iOS Demand (archive) — David Larlet</title> | |||
| <!-- Lightest blank gif, avoids an extra query to the server. --> | |||
| <link rel="icon" href="data:;base64,iVBORw0KGgo="> | |||
| <!-- Thank you Florens! --> | |||
| <link rel="stylesheet" href="/static/david/css/style_2020-01-06.css"> | |||
| <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. --> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_regular.woff2" as="font" type="font/woff2" crossorigin> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_bold.woff2" as="font" type="font/woff2" crossorigin> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_italic.woff2" as="font" type="font/woff2" crossorigin> | |||
| <meta name="robots" content="noindex, nofollow"> | |||
| <meta content="origin-when-cross-origin" name="referrer"> | |||
| <!-- Canonical URL for SEO purposes --> | |||
| <link rel="canonical" href="https://inessential.com/2020/01/03/estimating_netnewswire_for_ios_demand"> | |||
| <body class="remarkdown h1-underline h2-underline hr-center ul-star pre-tick"> | |||
| <article> | |||
| <h1>Estimating NetNewsWire for iOS Demand</h1> | |||
| <h2><a href="https://inessential.com/2020/01/03/estimating_netnewswire_for_ios_demand">Source originale du contenu</a></h2> | |||
| <p>As we get closer and closer to shipping NetNewsWire for iOS, I’m starting to realize that the iOS version could be quite a bit more popular than the Mac app.</p> | |||
| <p>Here are a few numbers:</p> | |||
| <ul> | |||
| <li>NetNewsWire 5.0 for Mac was downloaded 24,789 times.</li> | |||
| <li>The NetNewsWire for Mac beta builds are downloaded anywhere from around 630 to around 1,360 times.</li> | |||
| <li>Number of people who signed up for the public test of NetNewsWire for iOS: 5,263.</li> | |||
| </ul> | |||
| <h4 id="five-times-more">Five times more?</h4> | |||
| <p>The number of testers tells me — <em>very</em> roughly — that there’s about five times more interest in the iOS app than in the Mac app.</p> | |||
| <p>If that holds true, then NetNewsWire 5 for iOS, once it ships, will get downloaded about 124,000 times.</p> | |||
| <p>Let’s round down — call it 100,000 downloads in the first two weeks. I would be <em>amazed</em> if we got that that many downloads. I’m really expecting a number much closer to the Mac app. But I could be very wrong — I admit to thinking like a Mac developer and not really feeling the greater size of the iOS market.</p> | |||
| <p>It’s quite possible that 100,000 might be too low.</p> | |||
| <p>At any rate, I’ll be sure to report the actual numbers on this blog. 🐣</p> | |||
| <h4 id="what-does-this-mean-for-interest-in-rss-readers-in-general">What does this mean for interest in RSS readers in general?</h4> | |||
| <p>Remember that NetNewsWire is just one of many RSS readers on Mac and iOS. There are readers for Android and Windows — and a whole bunch of browser-based readers, such as <a href="https://feedbin.com/">Feedbin</a>, <a href="https://feedly.com/">Feedly</a>, <a href="https://www.inoreader.com/">Inoreader</a>, and others.</p> | |||
| <p>You can’t just multiply my NetNewsWire estimate by the number of apps and come up with something meaningful.</p> | |||
| <p>But you can look at some things and get an idea. For instance: on Feedly, one of the most popular browser-based readers, there are 1.6 million people subscribed to Engadget. No, I have no idea if those are all <em>active</em> readers, but still.</p> | |||
| <p>I think it would be reasonable to guess that the number of people who use an RSS reader is probably greater than a million, and could be several million people.</p> | |||
| <p>Those aren’t Twitter user numbers, obviously, not even close — but I’m betting it’s more than what most people assume it is.</p> | |||
| <p>PS This blog has 16K followers just on Feedly. If it were possible to add up my subscriber counts from each RSS reader, it would be quite a bit more than the 18K Twitter followers I have. Which is as it should be.</p> | |||
| </article> | |||
| <hr> | |||
| <nav> | |||
| <a href="/david/" title="Aller à l’accueil">🏠</a> • | |||
| <a href="/david/log/" title="Accès au flux RSS">🤖</a> • | |||
| <a href="http://larlet.com" title="Go to my English profile">🇨🇦</a> • | |||
| <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">📮</a> • | |||
| <abbr title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340">🧚</abbr> | |||
| </nav> | |||
| </body> | |||
| </html> | |||
+ 39
- 0
cache/2020/ceecad22409cbd161b85bf5f18b09413/index.md
View File
| @@ -0,0 +1,39 @@ | |||
| title: Estimating NetNewsWire for iOS Demand | |||
| url: https://inessential.com/2020/01/03/estimating_netnewswire_for_ios_demand | |||
| hash_url: ceecad22409cbd161b85bf5f18b09413 | |||
| <p>As we get closer and closer to shipping NetNewsWire for iOS, I’m starting to realize that the iOS version could be quite a bit more popular than the Mac app.</p> | |||
| <p>Here are a few numbers:</p> | |||
| <ul> | |||
| <li>NetNewsWire 5.0 for Mac was downloaded 24,789 times.</li> | |||
| <li>The NetNewsWire for Mac beta builds are downloaded anywhere from around 630 to around 1,360 times.</li> | |||
| <li>Number of people who signed up for the public test of NetNewsWire for iOS: 5,263.</li> | |||
| </ul> | |||
| <h4 id="five-times-more">Five times more?</h4> | |||
| <p>The number of testers tells me — <em>very</em> roughly — that there’s about five times more interest in the iOS app than in the Mac app.</p> | |||
| <p>If that holds true, then NetNewsWire 5 for iOS, once it ships, will get downloaded about 124,000 times.</p> | |||
| <p>Let’s round down — call it 100,000 downloads in the first two weeks. I would be <em>amazed</em> if we got that that many downloads. I’m really expecting a number much closer to the Mac app. But I could be very wrong — I admit to thinking like a Mac developer and not really feeling the greater size of the iOS market.</p> | |||
| <p>It’s quite possible that 100,000 might be too low.</p> | |||
| <p>At any rate, I’ll be sure to report the actual numbers on this blog. 🐣</p> | |||
| <h4 id="what-does-this-mean-for-interest-in-rss-readers-in-general">What does this mean for interest in RSS readers in general?</h4> | |||
| <p>Remember that NetNewsWire is just one of many RSS readers on Mac and iOS. There are readers for Android and Windows — and a whole bunch of browser-based readers, such as <a href="https://feedbin.com/">Feedbin</a>, <a href="https://feedly.com/">Feedly</a>, <a href="https://www.inoreader.com/">Inoreader</a>, and others.</p> | |||
| <p>You can’t just multiply my NetNewsWire estimate by the number of apps and come up with something meaningful.</p> | |||
| <p>But you can look at some things and get an idea. For instance: on Feedly, one of the most popular browser-based readers, there are 1.6 million people subscribed to Engadget. No, I have no idea if those are all <em>active</em> readers, but still.</p> | |||
| <p>I think it would be reasonable to guess that the number of people who use an RSS reader is probably greater than a million, and could be several million people.</p> | |||
| <p>Those aren’t Twitter user numbers, obviously, not even close — but I’m betting it’s more than what most people assume it is.</p> | |||
| <p>PS This blog has 16K followers just on Feedly. If it were possible to add up my subscriber counts from each RSS reader, it would be quite a bit more than the 18K Twitter followers I have. Which is as it should be.</p> | |||
+ 237
- 0
cache/2020/fb2849b42586654e0c899bf1a31fa5a5/index.html
View File
| @@ -0,0 +1,237 @@ | |||
| <!doctype html><!-- This is a valid HTML5 document. --> | |||
| <!-- Screen readers, SEO, extensions and so on. --> | |||
| <html lang="fr"> | |||
| <!-- Has to be within the first 1024 bytes, hence before the <title> | |||
| See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset --> | |||
| <meta charset="utf-8"> | |||
| <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 --> | |||
| <!-- The viewport meta is quite crowded and we are responsible for that. | |||
| See: https://codepen.io/tigt/post/meta-viewport-for-2015 --> | |||
| <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1,shrink-to-fit=no"> | |||
| <!-- Required to make a valid HTML5 document. --> | |||
| <title>Sparrow’s Guide To Meditation (archive) — David Larlet</title> | |||
| <!-- Lightest blank gif, avoids an extra query to the server. --> | |||
| <link rel="icon" href="data:;base64,iVBORw0KGgo="> | |||
| <!-- Thank you Florens! --> | |||
| <link rel="stylesheet" href="/static/david/css/style_2020-01-06.css"> | |||
| <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. --> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_regular.woff2" as="font" type="font/woff2" crossorigin> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_bold.woff2" as="font" type="font/woff2" crossorigin> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_italic.woff2" as="font" type="font/woff2" crossorigin> | |||
| <meta name="robots" content="noindex, nofollow"> | |||
| <meta content="origin-when-cross-origin" name="referrer"> | |||
| <!-- Canonical URL for SEO purposes --> | |||
| <link rel="canonical" href="https://www.thesunmagazine.org/issues/529/sparrows-guide-to-meditation"> | |||
| <body class="remarkdown h1-underline h2-underline hr-center ul-star pre-tick"> | |||
| <article> | |||
| <h1>Sparrow’s Guide To Meditation</h1> | |||
| <h2><a href="https://www.thesunmagazine.org/issues/529/sparrows-guide-to-meditation">Source originale du contenu</a></h2> | |||
| <p><span class="smallcaps"><strong>I have meditated</strong></span> twice a day virtually every day since 1974. That means I have spent approximately twenty-two solid months of my life in meditation. This alone qualifies me to write this guide.</p> | |||
| <p><span class="smallcaps"><strong>Early in my</strong></span> meditation career, I scrupulously filled out a daily chart supplied by my meditation group, the Ananda Marga Society. For some reason I vividly remember these charts. In the late 1970s I would sometimes miss an evening meditation, I am ashamed to say. I would go to a party, get home at two in the morning, and fall asleep. But since 1980 I have meditated twice a day without fail. If I leave a party at two in the morning now, I meditate on the subway or force myself to sit for fifteen minutes before sleep. (Though I always meditate before bed, I procrastinate my morning sitting as long as possible — sometimes until 6 <span class="smallcaps">PM</span>.)</p> | |||
| <p><span class="smallcaps"><strong>I am proud</strong></span> of my consistent meditation practice, but <em>you</em> need not be so obsessive. You may meditate for three minutes, skip a week, then meditate on a Thursday for five minutes. Be a rebel! Consistency is a virtue of bureaucrats, not mystics.</p> | |||
| <p><span class="smallcaps"><strong>I find meditation</strong></span> slightly excruciating, to be honest. It’s boring, frustrating — humiliating, actually. And even after forty-five years I can’t seem to “still” my mind.</p> | |||
| <p>So why pursue this treacherous path? For one thing, I’d be too embarrassed to stop. For another, I’m addicted to it. If I put off my first meditation until evening, I get a strange sensation in my brain, as if it were filled with styrofoam; as if all the images I’ve seen that day have cluttered up my head. After I finally do my meditation, I open my eyes and feel . . . normal. This is quite similar to how junkies describe heroin addiction. At first you feel an extraordinary high, but after two years you take the drug just to stop feeling awful.</p> | |||
| <p><span class="smallcaps"><strong>My goal for</strong></span> this guide is not to offer detailed, step-by-step instructions. (Luckily, <em>Meditation for Dummies</em> and <em>The Complete Idiot’s Guide to Meditation</em> both exist.) But here are the basics:</p> | |||
| <p>Sit comfortably, either in a chair or cross-legged on the floor. (You may wish to use a firm cushion.) Try to keep your spine as straight as possible, without being rigid. Close your eyes. Pay attention to your breathing, noticing the breath entering and leaving your nostrils (or your mouth, if that’s how you breathe). You’re not trying to breathe slowly — or quickly, for that matter — just noticing the flow of air in and out. After three or four minutes, stop. Unless you’re desperate to keep meditating; then go for as long as you like.</p> | |||
| <p>How was it? Sometimes the first sitting is extremely powerful. Most of the time it’s about as memorable as using an <span class="smallcaps">ATM</span>.</p> | |||
| <p><span class="smallcaps"><strong>Quite possibly you</strong></span> <em>shouldn’t</em> meditate. But if you’re determined to try, it’s not terribly difficult. Just expect to waste time twice a day, and you’ll do fine.</p> | |||
| <p><span class="smallcaps"><strong>Meditation teaches that</strong></span> change is constant. You fool yourself into believing that you are a fixed entity, but you are not. You are a river of transforming whims. This sounds like some Buddhist abstraction, but if you actually try to meditate, even for three minutes, you’ll discover that it’s true.</p> | |||
| <p><span class="smallcaps"><strong>While your eyes</strong></span> are closed in meditation, you don’t actually exist. Your body has disappeared. Your social identity is gone. What’s left? Not much. Just a puddle of anxieties and a vague sense of continuity. You believe these disparate thoughts are coming from your “self,” but are they? Maybe they are somehow being placed in your mind by a creepy professor with a mind-control machine! Try not to think about this. It may lead to insanity. (There is a small danger of going insane from meditating too much, but your constant inability to concentrate will modulate that threat.)</p> | |||
| <p><span class="smallcaps"><strong>Meditation teaches humility</strong></span> and patience, because you must constantly confront that most disappointing person: yourself.</p> | |||
| <p><span class="smallcaps"><strong>The inevitability of</strong></span> failure is the main lesson of meditation. It is preparation for all the other failures in your life.</p> | |||
| <p><span class="smallcaps"><strong>I sit much</strong></span> more today than I did in 1974, but I don’t feel that I’m making progress. If anything, I seem to be slightly more distracted. The only difference is in how I react to a crisis: If a subway train stops in a tunnel, I just pull out a book and read. If a fight breaks out in a bar, I don’t panic — or, at least, everyone around me panics more. Perhaps meditation teaches us to differentiate between problems we can solve and problems we can’t.</p> | |||
| <p><span class="smallcaps"><strong>In the early</strong></span> 1990s I met the poet Thaddeus Rutkowski in the East Village of Manhattan. We discovered that we had both attended Cornell University at the same time. In fact, we’d lived in the same dorm, Sperry Hall. Thaddeus, who has a remarkable memory, began naming residents of the hall, most of whom I’d forgotten.</p> | |||
| <p>“Did you know Mike Motel?” he inquired.</p> | |||
| <p>“I <em>was</em> Mike Motel,” I replied. That was the name I went by in college.</p> | |||
| <p>“But you’re nothing like him!” Thaddeus remarked. “He was a nervous, hyper guy, and you’re very calm and relaxed.”</p> | |||
| <p>This is the one piece of evidence I have that meditation works.</p> | |||
| <p><span class="smallcaps"><strong>Some books on</strong></span> meditation imply that you’ll quickly stumble upon inner peacefulness. Actually the precise opposite is true. You may think you’re a fairly calm, centered person, but the minute you cross your legs and attempt to count your breaths, you’ll discover there’s an out-of-control 2 <span class="smallcaps">AM</span> disco inside you — in fact, <em>two</em> discos, each playing separate songs at ear-splitting volume, each filled with frantic dancers in mismatched polyester.</p> | |||
| <p><span class="smallcaps"><strong>Meditation is slow</strong></span> — as slow as the moon crossing the sky. If you want to change quickly, use drugs.</p> | |||
| <p><span class="smallcaps"><strong>Thirty years ago</strong></span> I went to the beach with my parents, my sister, and my brother-in-law. At one point I sat in the sand and meditated. Afterward my brother-in-law said, “That was amazing! A volleyball player ran into you, and you didn’t even notice.”</p> | |||
| <p>“I felt someone brush by me,” I replied.</p> | |||
| <p>“No, that guy ran right into you!”</p> | |||
| <p>Maybe I actually <em>am</em> good at meditation, I thought.</p> | |||
| <p><span class="smallcaps"><strong>After we reach</strong></span> our forties, we begin to notice how swiftly time passes. We can’t slow its relentless pace, but with meditation we can come close. When you sit in silence with eyes closed, an hour can become seven, or occasionally open into a spacious eternity.</p> | |||
| <p><span class="smallcaps"><strong>There is a</strong></span> deep and hideous truth that we all spend our lives avoiding. That’s why we constantly chatter with friends, go to Lakers games, and spend hours on Facebook: we’re desperate to distract ourselves from this one heartless fact.</p> | |||
| <p>Meditation asks: Suppose we stop running from the nameless demon. Suppose we turn and behold its twisted, ugly face. What will happen?</p> | |||
| <p><span class="smallcaps"><strong>Of those who</strong></span> practice meditation, some give up, because trying to still the mind is futile and absurd. Others continue meditating, because trying to still the mind is futile and absurd, but they have a taste for absurdity.</p> | |||
| <p><span class="smallcaps"><strong>In 1984 my</strong></span> girlfriend broke up with me. Devastated, I went to a Benedictine monastery near Elmira, New York, and meditated almost continually for two days. Was it better than weeping? I don’t know. I’m not very good at weeping. If I’m really miserable, I may cry two tears. This is the problem with being an American male.</p> | |||
| <p><span class="smallcaps"><strong>My wife and</strong></span> I met at a poetry workshop in the East Village in 1985. The group met every Saturday from September until May. One day Violet and I both arrived early. We were the only ones in the room and sat on opposite sides of the table. For no apparent reason, we stared wordlessly into each other’s eyes, descending into infinite silence. This is a type of meditation called <em>traspaso</em>, because it “trespasses” the ego boundaries. Violet and I were not particularly friendly before that, but we’ve now been married twenty-eight years. This is the sort of bond wordless concentration can create.</p> | |||
| <p><span class="smallcaps"><strong>Meditation is a</strong></span> lot like marriage: You begin in pursuit of ecstasy and eventually settle for mild contentment. After twenty years you realize that contentment itself is a kind of ecstasy.</p> | |||
| <p><span class="smallcaps"><strong>Once you commit</strong></span> yourself to a meditation session, the room’s temperature suddenly becomes evident. You notice that you’re uncomfortably chilly or hot. But is it so unpleasant that you should stop meditating and get a sweater, or remove a sweater? A dialogue begins between the part of you that’s meditating and the part of you that’s <em>never</em> meditating:</p> | |||
| <blockquote> | |||
| <p><span class="interviewee-er">Meditator:</span> I’ll be all right.</p> | |||
| <p><span class="interviewee-er">Nonmeditator:</span> You’ll catch a cold! You’ll regret this for two weeks!</p> | |||
| <p><span class="interviewee-er">Meditator:</span> You worry about everything.</p> | |||
| <p><span class="interviewee-er">Nonmeditator:</span> You worry about nothing.</p> | |||
| <p><span class="interviewee-er">Meditator:</span> I’m not supposed to be worrying. I’m supposed to be meditating. [<em>Grows silent.</em>]</p> | |||
| <p><span class="interviewee-er">Nonmeditator:</span> You’ll catch a cold.</p> | |||
| <p><span class="interviewee-er">Meditator:</span> Shut up!</p> | |||
| </blockquote> | |||
| <p><strong><span class="smallcaps">In meditation you</span></strong> become vividly aware of breathing. The rest of the time we don’t notice our inhalations and exhalations, but closing the eyes brings this mostly involuntary action to the forefront of awareness. Breathing is a quiet internal labor that never ceases. We are completely dependent on an invisible ocean of air to sustain us. Air is much like God: an unseeable, omnipresent entity that gives us life.</p> | |||
| <p><span class="smallcaps"><strong>Meditation may be</strong></span> viewed as an action or as an abstention from action. In the first case, its merits are debatable. In the second, they are indisputable. Quite possibly meditation will get you nowhere, but most of us have a desperate need to be nowhere. Modern existence is a constant contemplation of brightly lit screens. We live our lives on the edge of a headache, with no escape from ubiquitous stimuli. It’s highly salubrious to sit twice a day and search for the Absolute, if only because it forces us to turn off the fucking <span class="smallcaps">TV</span>.</p> | |||
| <p><span class="smallcaps"><strong>We live in</strong></span> a visual culture. When a young woman wants to know how to tile a floor, she searches for a video on YouTube. To entertain ourselves, we stream a movie on the laptop or binge-watch <span class="smallcaps">TV</span> shows. In such a culture meditation is radical, because it removes our field of vision. When you close your eyes, the world becomes limited to the sounds of passing cars, workers hammering in the distance, and muffled voices. Sound-reality is much more fluid than visual-reality. A mooing cow can become a laughing man.</p> | |||
| <p><span class="smallcaps"><strong>Is it possible</strong></span> that everyone who possesses wisdom does some form of meditation? Yes. You can almost see in people’s faces how many hours they’ve sat in silence.</p> | |||
| <p><span class="smallcaps"><strong>“Struggle is the</strong></span> essence of life,” my guru used to say. And meditation is certainly a struggle. For eight years I was a substitute teacher. Meditating is a lot like forcing a class of unruly thirteen-year-olds to study irregular verbs.</p> | |||
| <p><span class="smallcaps"><strong>Around fifteen years</strong></span> ago trees began speaking to me. I don’t usually hear words — I just have a sense of consolation and guidance — but sometimes there is a distinct message. A tree in Brooklyn said to me today: <em>Most of the time we seek what we don’t have, but sometimes we seek what we already have.</em> This tree is describing meditation.</p> | |||
| <p><span class="smallcaps"><strong>As I stumbled</strong></span> into the Church of the Most Holy Redeemer on East 3rd Street in Manhattan, the priest was giving a sermon. “Put Christ first,” he said. “If you put yourself first, your life will be troubled. If you put Christ first, your life will be full of blessings.” You can have all the pleasures of the world, he explained, so long as Christ still comes first. (What a deal!)</p> | |||
| <p>I’m saying the same thing: Put meditation first. Meditate twice a day, if only for three minutes. Don’t give up anything else in your life. Don’t change your diet. Just put meditation first, for six minutes a day.</p> | |||
| <p><span class="smallcaps"><strong>Never try to</strong></span> “live in the moment.” It’s like attempting to shrink your body down to the size of a molecule.</p> | |||
| <p><span class="smallcaps"><strong>Meditation is an</strong></span> optimistic practice. The theory is that, by closing your eyes (or leaving them half open) and doing nothing, you can change your consciousness. Most people are too pragmatic to accept this harebrained notion, but scientific studies suggest that it’s true.</p> | |||
| <p><span class="smallcaps"><strong>You don’t have</strong></span> to meditate upon waking each morning. You can wait till you’re in a doctor’s waiting room filled with frayed copies of <em>Family Circle</em> magazine. Or stay in the car while your husband goes into Best Buy. Close your eyes; count your breaths. Don’t expect inner awakening. Don’t expect happiness. Prepare yourself for boredom and mild exasperation. After a few minutes you’re free to return to the manifold distractions of earthly life.</p> | |||
| <p><span class="smallcaps"><strong>Meditation is an</strong></span> elusive subject to describe. It’s like writing about the color blue.</p> | |||
| <p><span class="smallcaps"><strong>In the early</strong></span> 1970s, there were numerous slogans to summarize the spiritual life: “Be here now.” “Love, serve, remember.” “The universe is perfect.” “Everything is everything” was probably my favorite. They all seem archaic now, like Coca-Cola ads from the 1920s. In this apocalyptic era of hurricanes, mass shootings, Donald Trump, <span class="smallcaps">ISIS</span>, and millions of refugees, no one wants to “be here now.” Everyone wants to watch <em>Game of Thrones</em> while simultaneously texting on a cell phone.</p> | |||
| <p><span class="smallcaps"><strong>Meditation is like</strong></span> practicing the guitar, but without the guitar.</p> | |||
| <p><span class="smallcaps"><strong>There aren’t many</strong></span> synonyms for meditation in English. Ananda Marga uses the term <em>sādhanā</em>, which derives from the Sanskrit for “effort.” I’ve invented other phrases to describe meditating: “brain-cleansing,” “cross-legged nonthinking,” “silence-chewing,” “mind-yoga.” Sometimes I refer to meditation as “self-kidnapping”: you stick a revolver in your own ribs, throw a bag over your head, and drive yourself to a warehouse where you sit in silence, awaiting ransom.</p> | |||
| <p><span class="smallcaps"><strong>It’s a big</strong></span> mistake to expect joy and happiness from meditation. That’s like expecting bliss from a bag of pinto beans. It’s much more logical to expect bafflement: Why am I meditating? What can this possibly achieve? These questions recur throughout the decades.</p> | |||
| <p><span class="smallcaps"><strong>I don’t meditate</strong></span> to achieve mystical heights, but rather to appreciate the rest of my life. I want to wash the dishes with gratitude, like a slow-motion dance.</p> | |||
| <p>Mostly, though, I meditate to “kill time.” (I like this violent, somewhat outdated phrase.) Once you have murdered time, you can continue with the rest of your day nonviolently.</p> | |||
| <p><span class="smallcaps"><strong>Meditation is largely</strong></span> a pretense. Sitting with eyes closed and legs elegantly folded, you resemble an ancient sage. Inside, you’re still the same idiot you always were.</p> | |||
| <p><span class="smallcaps"><strong>One virtue of</strong></span> meditating is that you learn to forgive yourself: each day you fail at pure concentration, and each day you compassionately accept your failure. Ideally this self-forgiveness will lead to friend-forgiveness, spouse-forgiveness, even world-forgiveness.</p> | |||
| <p><span class="smallcaps"><strong>My parents were</strong></span> Communists, and my father used to tell this joke: A Communist is giving a speech. At a climactic moment he shouts, “Come the revolution, we’ll all have strawberries and sour cream!” A voice from the back of the crowd replies, “But I don’t like strawberries and sour cream!” The orator pauses, then announces, “Come the revolution, you’ll <em>like</em> strawberries and sour cream!”</p> | |||
| <p>This joke conveys a great paradox of political transformation: Just jailing all the capitalists and setting up an equal distribution system is insufficient. Individuals must evolve somehow. We need personal transmutation, what the Soviets called a “new man.” But how do we create this new self? The best tool for self-transformation I’ve found is conscious breath-awareness. Crystals are worthless. Incense is annoying. New-age music is awful. Most “spiritual” books are nonsense. What’s helpful is to sit still and observe the fretful mind.</p> | |||
| <p><span class="smallcaps"><strong>We all lie</strong></span> to ourselves every day, especially about our emotions. We tell ourselves we’re happy when we’re actually anxious, dismayed, resentful. When you close your eyes and listen to your breathing, you discover what a liar you are.</p> | |||
| <p><span class="smallcaps"><strong>The biggest surprise</strong></span> about meditating — and it remains a surprise after four decades — is how ineffective I am at controlling my own thoughts. In normal life my mind seems to work fine: I choose words and say them. I tell my hand to move, and it does. But closing my eyes and attempting to quiet my thoughts is almost impossible. The mind is a formidable adversary! You try to shut out the world, and the world pours in. You go to a quiet room and close your eyes, and suddenly you remember your fourth-grade teacher, or a friend you haven’t seen in thirty-seven years, or a visit to Puerto Rico. The riches of this earth arrive, in disarray.</p> | |||
| <p>Sometimes, though, you can undress the mind — remove, one by one, the mind’s habitual garments. Afterwards the mind stands momentarily naked.</p> | |||
| <p><span class="smallcaps"><strong>Each of us</strong></span> feels that we are separate from our environment, an island of ego looking out through eyeholes. In fact, our lungs are in constant dialogue with the atmosphere, and with all the earthly plants and animals producing that atmosphere. This dialogue literally gives us life. Separation is illusory; atmospheric unity is truth.</p> | |||
| <p><span class="smallcaps"><strong>Joan of Arc</strong></span> heard celestial voices in church bells. Dr. Seuss wrote his first book, <em>And to Think That I Saw It on Mulberry Street</em>, after taking a trip to Europe and hearing the ship’s engines say the title over and over.</p> | |||
| <p>I suspect that invisible beings are constantly speaking to us: through a stream, or the wind, or the subway. Meditation may open our ears to these benevolent voices.</p> | |||
| <p><span class="smallcaps"><strong>There are many</strong></span> arguments against meditation. One is that it shields us from the passions and grime of the world. It creates a manufactured bliss, immune to the oscillations of human emotion. Is it really better to stay in a middle range of emotion than to have highs and lows? Don’t we occasionally want to fall into a rage, burst out weeping, or scream at traffic?</p> | |||
| <p>As a prospective meditator — or a current one — you should consider this problem.</p> | |||
| <p><span class="smallcaps"><strong>Has meditation improved</strong></span> my life? I can’t tell. There’s only one of me. If I had an identical twin who’d never meditated, scientists could examine the two of us and analyze the differences. As it is, I can only guess. I do suspect that, had I never performed <em>sādhanā</em>, trees would not speak to me.</p> | |||
| <p><span class="smallcaps"><strong>If meditation is</strong></span> addictive, is it any better for us than drugs? Undoubtedly. Old stoners ruin their lungs. Speed freaks die young. Cokeheads inflate their egos and eventually go bankrupt. Meditation makes one younger, not older. It “strengthens the immune system,” as we say nowadays.</p> | |||
| <p><span class="smallcaps"><strong>Incremental progress appeals</strong></span> to me. I apply this method to books and records. I just finished the opera <em>Gianni Schicchi</em>, which I listened to in two-minute increments over the course of five months. Meanwhile I was nibbling away at Jane Austen’s <em>Persuasion</em>. Each day I tootle a brief improvisation on my plastic flutophone.</p> | |||
| <p>I enjoy the idea of slowly achieving mastery.</p> | |||
| <p><span class="smallcaps"><strong>The most painful</strong></span> place to meditate is in a quiet room with a ticking clock. I would rather do my sitting practice in the midst of the Russo-Japanese War than next to <em>tick-tock, tick-tock</em>.</p> | |||
| <p><span class="smallcaps"><strong>Meditation is supposed</strong></span> to empty the mind the way a pump empties water from the bilge of a ship. To be honest, I never quite feel empty after I’ve meditated. But I do feel <em>emptier</em>.</p> | |||
| <p><span class="smallcaps"><strong>Actually once in</strong></span> my life I did feel empty. In 1975, the day after attending a retreat with Swami Muktananda in Ocala, Florida, I was walking down a sidewalk and saw an azalea bush. Suddenly I had no thoughts! I could <em>see</em> the azaleas lucidly, without any interference from ideas, concepts, memories. I felt fulfilled, timeless — and a little scared: What if I never had another thought again?</p> | |||
| <p>Since then, I haven’t stopped thinking.</p> | |||
| <p><span class="smallcaps"><strong>One danger of</strong></span> meditation is the “rubber-band effect.” My old friend Satyamundi coined this term in 1979 for the tendency to “snap back” after long periods of virtuous and selfless action. Satyamundi would be scrupulous in his spiritual practices for months, then suddenly run off to visit a prostitute. So don’t try to be perfect.</p> | |||
| <p><span class="smallcaps"><strong>My friend Barium</strong></span> was telling me he had started to write a book about his sex life. “Then I realized,” he said, “I don’t have a very interesting sex life.”</p> | |||
| <p>“How do you know?” I replied. “You can’t see what anyone else is doing in the bedroom. And porn is no help — those people are just acting.”</p> | |||
| <p>Meditation is the same way. I have no idea whether my meditation life is exemplary or lousy. There’s even a meditational equivalent to porn: videos of swamis entering <em>samādhi</em> (union with the divine). But, just like porn actors, these swamis may be pretending. It’s as easy to fake spiritual bliss as it is to fake sexual ecstasy.</p> | |||
| <p><span class="smallcaps"><strong>I’m cat-sitting for</strong></span> a phlegmatic tabby named Baby. Last night was the first time I meditated in the house, and Baby playfully rubbed her muzzle on my folded hands. Perhaps cats are drawn to a meditator because they sense it’s a person aspiring to be catlike.</p> | |||
| <p><span class="smallcaps"><strong>Meditation is the</strong></span> closest humans come to purring.</p> | |||
| <p><span class="smallcaps"><strong>At some point</strong></span> your practice will be threatened — by a sudden emergency, a family crisis, a crucial deadline. Feel free to stop meditating or, conversely, to charge into the face of the enemy and meditate twice as long.</p> | |||
| <p><span class="smallcaps"><strong>Wisdom is found</strong></span> not in books or intellectual lectures but in the struggle to hear silence.</p> | |||
| <p><span class="smallcaps"><strong>I project an</strong></span> unnecessary piety on my meditation practice. Meditating should be the same as taking a shower: an act of renewal without “spiritual” connotations.</p> | |||
| <p><span class="smallcaps"><strong>If you offer</strong></span> your meditation to God, it becomes a prayer. If you offer your meditation to the universe, it becomes an affirmation. If you offer your meditation to humanity, it becomes activism.</p> | |||
| <p><span class="smallcaps"><strong>Don’t be afraid</strong></span> of the word <em>God</em>, but don’t get too excited about it either.</p> | |||
| <p><span class="smallcaps"><strong>Bob Jacobson was</strong></span> an artist who lived in a trailer near me in the Catskills. The outside of his home was an art gallery of sorts, bedecked with paintings he’d made on aluminum panels. He also carved abstract wooden sculptures in his front yard.</p> | |||
| <p>“No one knows how to look at art anymore,” Bob once told me. “You should be able to gaze at a painting for an hour.”</p> | |||
| <p>A few months later he elaborated: “You can look at <em>anything</em> as if it’s a painting. Sometimes I’ll go into the woods and just stare at the scene in front of me as if it were a Cézanne canvas.”</p> | |||
| <p>Bob Jacobson died a few weeks ago. I just realized he was teaching me meditation.</p> | |||
| <p><span class="smallcaps"><strong>You recharge your</strong></span> cell phone by plugging it into an electric current. You recharge your mind by plugging it into the Vast Oceanic Current of the Universe.</p> | |||
| <p><span class="smallcaps"><strong>The message of</strong></span> meditation is: “You already have everything you need — if not forever, at least for the next ten minutes.”</p> | |||
| </article> | |||
| <hr> | |||
| <nav> | |||
| <a href="/david/" title="Aller à l’accueil">🏠</a> • | |||
| <a href="/david/log/" title="Accès au flux RSS">🤖</a> • | |||
| <a href="http://larlet.com" title="Go to my English profile">🇨🇦</a> • | |||
| <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">📮</a> • | |||
| <abbr title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340">🧚</abbr> | |||
| </nav> | |||
| </body> | |||
| </html> | |||
+ 195
- 0
cache/2020/fb2849b42586654e0c899bf1a31fa5a5/index.md
View File
| @@ -0,0 +1,195 @@ | |||
| title: Sparrow’s Guide To Meditation | |||
| url: https://www.thesunmagazine.org/issues/529/sparrows-guide-to-meditation | |||
| hash_url: fb2849b42586654e0c899bf1a31fa5a5 | |||
| <p><span class="smallcaps"><strong>I have meditated</strong></span> twice a day virtually every day since 1974. That means I have spent approximately twenty-two solid months of my life in meditation. This alone qualifies me to write this guide.</p> | |||
| <p><span class="smallcaps"><strong>Early in my</strong></span> meditation career, I scrupulously filled out a daily chart supplied by my meditation group, the Ananda Marga Society. For some reason I vividly remember these charts. In the late 1970s I would sometimes miss an evening meditation, I am ashamed to say. I would go to a party, get home at two in the morning, and fall asleep. But since 1980 I have meditated twice a day without fail. If I leave a party at two in the morning now, I meditate on the subway or force myself to sit for fifteen minutes before sleep. (Though I always meditate before bed, I procrastinate my morning sitting as long as possible — sometimes until 6 <span class="smallcaps">PM</span>.)</p> | |||
| <p><span class="smallcaps"><strong>I am proud</strong></span> of my consistent meditation practice, but <em>you</em> need not be so obsessive. You may meditate for three minutes, skip a week, then meditate on a Thursday for five minutes. Be a rebel! Consistency is a virtue of bureaucrats, not mystics.</p> | |||
| <p><span class="smallcaps"><strong>I find meditation</strong></span> slightly excruciating, to be honest. It’s boring, frustrating — humiliating, actually. And even after forty-five years I can’t seem to “still” my mind.</p> | |||
| <p>So why pursue this treacherous path? For one thing, I’d be too embarrassed to stop. For another, I’m addicted to it. If I put off my first meditation until evening, I get a strange sensation in my brain, as if it were filled with styrofoam; as if all the images I’ve seen that day have cluttered up my head. After I finally do my meditation, I open my eyes and feel . . . normal. This is quite similar to how junkies describe heroin addiction. At first you feel an extraordinary high, but after two years you take the drug just to stop feeling awful.</p> | |||
| <p><span class="smallcaps"><strong>My goal for</strong></span> this guide is not to offer detailed, step-by-step instructions. (Luckily, <em>Meditation for Dummies</em> and <em>The Complete Idiot’s Guide to Meditation</em> both exist.) But here are the basics:</p> | |||
| <p>Sit comfortably, either in a chair or cross-legged on the floor. (You may wish to use a firm cushion.) Try to keep your spine as straight as possible, without being rigid. Close your eyes. Pay attention to your breathing, noticing the breath entering and leaving your nostrils (or your mouth, if that’s how you breathe). You’re not trying to breathe slowly — or quickly, for that matter — just noticing the flow of air in and out. After three or four minutes, stop. Unless you’re desperate to keep meditating; then go for as long as you like.</p> | |||
| <p>How was it? Sometimes the first sitting is extremely powerful. Most of the time it’s about as memorable as using an <span class="smallcaps">ATM</span>.</p> | |||
| <p><span class="smallcaps"><strong>Quite possibly you</strong></span> <em>shouldn’t</em> meditate. But if you’re determined to try, it’s not terribly difficult. Just expect to waste time twice a day, and you’ll do fine.</p> | |||
| <p><span class="smallcaps"><strong>Meditation teaches that</strong></span> change is constant. You fool yourself into believing that you are a fixed entity, but you are not. You are a river of transforming whims. This sounds like some Buddhist abstraction, but if you actually try to meditate, even for three minutes, you’ll discover that it’s true.</p> | |||
| <p><span class="smallcaps"><strong>While your eyes</strong></span> are closed in meditation, you don’t actually exist. Your body has disappeared. Your social identity is gone. What’s left? Not much. Just a puddle of anxieties and a vague sense of continuity. You believe these disparate thoughts are coming from your “self,” but are they? Maybe they are somehow being placed in your mind by a creepy professor with a mind-control machine! Try not to think about this. It may lead to insanity. (There is a small danger of going insane from meditating too much, but your constant inability to concentrate will modulate that threat.)</p> | |||
| <p><span class="smallcaps"><strong>Meditation teaches humility</strong></span> and patience, because you must constantly confront that most disappointing person: yourself.</p> | |||
| <p><span class="smallcaps"><strong>The inevitability of</strong></span> failure is the main lesson of meditation. It is preparation for all the other failures in your life.</p> | |||
| <p><span class="smallcaps"><strong>I sit much</strong></span> more today than I did in 1974, but I don’t feel that I’m making progress. If anything, I seem to be slightly more distracted. The only difference is in how I react to a crisis: If a subway train stops in a tunnel, I just pull out a book and read. If a fight breaks out in a bar, I don’t panic — or, at least, everyone around me panics more. Perhaps meditation teaches us to differentiate between problems we can solve and problems we can’t.</p> | |||
| <p><span class="smallcaps"><strong>In the early</strong></span> 1990s I met the poet Thaddeus Rutkowski in the East Village of Manhattan. We discovered that we had both attended Cornell University at the same time. In fact, we’d lived in the same dorm, Sperry Hall. Thaddeus, who has a remarkable memory, began naming residents of the hall, most of whom I’d forgotten.</p> | |||
| <p>“Did you know Mike Motel?” he inquired.</p> | |||
| <p>“I <em>was</em> Mike Motel,” I replied. That was the name I went by in college.</p> | |||
| <p>“But you’re nothing like him!” Thaddeus remarked. “He was a nervous, hyper guy, and you’re very calm and relaxed.”</p> | |||
| <p>This is the one piece of evidence I have that meditation works.</p> | |||
| <p><span class="smallcaps"><strong>Some books on</strong></span> meditation imply that you’ll quickly stumble upon inner peacefulness. Actually the precise opposite is true. You may think you’re a fairly calm, centered person, but the minute you cross your legs and attempt to count your breaths, you’ll discover there’s an out-of-control 2 <span class="smallcaps">AM</span> disco inside you — in fact, <em>two</em> discos, each playing separate songs at ear-splitting volume, each filled with frantic dancers in mismatched polyester.</p> | |||
| <p><span class="smallcaps"><strong>Meditation is slow</strong></span> — as slow as the moon crossing the sky. If you want to change quickly, use drugs.</p> | |||
| <p><span class="smallcaps"><strong>Thirty years ago</strong></span> I went to the beach with my parents, my sister, and my brother-in-law. At one point I sat in the sand and meditated. Afterward my brother-in-law said, “That was amazing! A volleyball player ran into you, and you didn’t even notice.”</p> | |||
| <p>“I felt someone brush by me,” I replied.</p> | |||
| <p>“No, that guy ran right into you!”</p> | |||
| <p>Maybe I actually <em>am</em> good at meditation, I thought.</p> | |||
| <p><span class="smallcaps"><strong>After we reach</strong></span> our forties, we begin to notice how swiftly time passes. We can’t slow its relentless pace, but with meditation we can come close. When you sit in silence with eyes closed, an hour can become seven, or occasionally open into a spacious eternity.</p> | |||
| <p><span class="smallcaps"><strong>There is a</strong></span> deep and hideous truth that we all spend our lives avoiding. That’s why we constantly chatter with friends, go to Lakers games, and spend hours on Facebook: we’re desperate to distract ourselves from this one heartless fact.</p> | |||
| <p>Meditation asks: Suppose we stop running from the nameless demon. Suppose we turn and behold its twisted, ugly face. What will happen?</p> | |||
| <p><span class="smallcaps"><strong>Of those who</strong></span> practice meditation, some give up, because trying to still the mind is futile and absurd. Others continue meditating, because trying to still the mind is futile and absurd, but they have a taste for absurdity.</p> | |||
| <p><span class="smallcaps"><strong>In 1984 my</strong></span> girlfriend broke up with me. Devastated, I went to a Benedictine monastery near Elmira, New York, and meditated almost continually for two days. Was it better than weeping? I don’t know. I’m not very good at weeping. If I’m really miserable, I may cry two tears. This is the problem with being an American male.</p> | |||
| <p><span class="smallcaps"><strong>My wife and</strong></span> I met at a poetry workshop in the East Village in 1985. The group met every Saturday from September until May. One day Violet and I both arrived early. We were the only ones in the room and sat on opposite sides of the table. For no apparent reason, we stared wordlessly into each other’s eyes, descending into infinite silence. This is a type of meditation called <em>traspaso</em>, because it “trespasses” the ego boundaries. Violet and I were not particularly friendly before that, but we’ve now been married twenty-eight years. This is the sort of bond wordless concentration can create.</p> | |||
| <p><span class="smallcaps"><strong>Meditation is a</strong></span> lot like marriage: You begin in pursuit of ecstasy and eventually settle for mild contentment. After twenty years you realize that contentment itself is a kind of ecstasy.</p> | |||
| <p><span class="smallcaps"><strong>Once you commit</strong></span> yourself to a meditation session, the room’s temperature suddenly becomes evident. You notice that you’re uncomfortably chilly or hot. But is it so unpleasant that you should stop meditating and get a sweater, or remove a sweater? A dialogue begins between the part of you that’s meditating and the part of you that’s <em>never</em> meditating:</p> | |||
| <blockquote> | |||
| <p><span class="interviewee-er">Meditator:</span> I’ll be all right.</p> | |||
| <p><span class="interviewee-er">Nonmeditator:</span> You’ll catch a cold! You’ll regret this for two weeks!</p> | |||
| <p><span class="interviewee-er">Meditator:</span> You worry about everything.</p> | |||
| <p><span class="interviewee-er">Nonmeditator:</span> You worry about nothing.</p> | |||
| <p><span class="interviewee-er">Meditator:</span> I’m not supposed to be worrying. I’m supposed to be meditating. [<em>Grows silent.</em>]</p> | |||
| <p><span class="interviewee-er">Nonmeditator:</span> You’ll catch a cold.</p> | |||
| <p><span class="interviewee-er">Meditator:</span> Shut up!</p> | |||
| </blockquote> | |||
| <p><strong><span class="smallcaps">In meditation you</span></strong> become vividly aware of breathing. The rest of the time we don’t notice our inhalations and exhalations, but closing the eyes brings this mostly involuntary action to the forefront of awareness. Breathing is a quiet internal labor that never ceases. We are completely dependent on an invisible ocean of air to sustain us. Air is much like God: an unseeable, omnipresent entity that gives us life.</p> | |||
| <p><span class="smallcaps"><strong>Meditation may be</strong></span> viewed as an action or as an abstention from action. In the first case, its merits are debatable. In the second, they are indisputable. Quite possibly meditation will get you nowhere, but most of us have a desperate need to be nowhere. Modern existence is a constant contemplation of brightly lit screens. We live our lives on the edge of a headache, with no escape from ubiquitous stimuli. It’s highly salubrious to sit twice a day and search for the Absolute, if only because it forces us to turn off the fucking <span class="smallcaps">TV</span>.</p> | |||
| <p><span class="smallcaps"><strong>We live in</strong></span> a visual culture. When a young woman wants to know how to tile a floor, she searches for a video on YouTube. To entertain ourselves, we stream a movie on the laptop or binge-watch <span class="smallcaps">TV</span> shows. In such a culture meditation is radical, because it removes our field of vision. When you close your eyes, the world becomes limited to the sounds of passing cars, workers hammering in the distance, and muffled voices. Sound-reality is much more fluid than visual-reality. A mooing cow can become a laughing man.</p> | |||
| <p><span class="smallcaps"><strong>Is it possible</strong></span> that everyone who possesses wisdom does some form of meditation? Yes. You can almost see in people’s faces how many hours they’ve sat in silence.</p> | |||
| <p><span class="smallcaps"><strong>“Struggle is the</strong></span> essence of life,” my guru used to say. And meditation is certainly a struggle. For eight years I was a substitute teacher. Meditating is a lot like forcing a class of unruly thirteen-year-olds to study irregular verbs.</p> | |||
| <p><span class="smallcaps"><strong>Around fifteen years</strong></span> ago trees began speaking to me. I don’t usually hear words — I just have a sense of consolation and guidance — but sometimes there is a distinct message. A tree in Brooklyn said to me today: <em>Most of the time we seek what we don’t have, but sometimes we seek what we already have.</em> This tree is describing meditation.</p> | |||
| <p><span class="smallcaps"><strong>As I stumbled</strong></span> into the Church of the Most Holy Redeemer on East 3rd Street in Manhattan, the priest was giving a sermon. “Put Christ first,” he said. “If you put yourself first, your life will be troubled. If you put Christ first, your life will be full of blessings.” You can have all the pleasures of the world, he explained, so long as Christ still comes first. (What a deal!)</p> | |||
| <p>I’m saying the same thing: Put meditation first. Meditate twice a day, if only for three minutes. Don’t give up anything else in your life. Don’t change your diet. Just put meditation first, for six minutes a day.</p> | |||
| <p><span class="smallcaps"><strong>Never try to</strong></span> “live in the moment.” It’s like attempting to shrink your body down to the size of a molecule.</p> | |||
| <p><span class="smallcaps"><strong>Meditation is an</strong></span> optimistic practice. The theory is that, by closing your eyes (or leaving them half open) and doing nothing, you can change your consciousness. Most people are too pragmatic to accept this harebrained notion, but scientific studies suggest that it’s true.</p> | |||
| <p><span class="smallcaps"><strong>You don’t have</strong></span> to meditate upon waking each morning. You can wait till you’re in a doctor’s waiting room filled with frayed copies of <em>Family Circle</em> magazine. Or stay in the car while your husband goes into Best Buy. Close your eyes; count your breaths. Don’t expect inner awakening. Don’t expect happiness. Prepare yourself for boredom and mild exasperation. After a few minutes you’re free to return to the manifold distractions of earthly life.</p> | |||
| <p><span class="smallcaps"><strong>Meditation is an</strong></span> elusive subject to describe. It’s like writing about the color blue.</p> | |||
| <p><span class="smallcaps"><strong>In the early</strong></span> 1970s, there were numerous slogans to summarize the spiritual life: “Be here now.” “Love, serve, remember.” “The universe is perfect.” “Everything is everything” was probably my favorite. They all seem archaic now, like Coca-Cola ads from the 1920s. In this apocalyptic era of hurricanes, mass shootings, Donald Trump, <span class="smallcaps">ISIS</span>, and millions of refugees, no one wants to “be here now.” Everyone wants to watch <em>Game of Thrones</em> while simultaneously texting on a cell phone.</p> | |||
| <p><span class="smallcaps"><strong>Meditation is like</strong></span> practicing the guitar, but without the guitar.</p> | |||
| <p><span class="smallcaps"><strong>There aren’t many</strong></span> synonyms for meditation in English. Ananda Marga uses the term <em>sādhanā</em>, which derives from the Sanskrit for “effort.” I’ve invented other phrases to describe meditating: “brain-cleansing,” “cross-legged nonthinking,” “silence-chewing,” “mind-yoga.” Sometimes I refer to meditation as “self-kidnapping”: you stick a revolver in your own ribs, throw a bag over your head, and drive yourself to a warehouse where you sit in silence, awaiting ransom.</p> | |||
| <p><span class="smallcaps"><strong>It’s a big</strong></span> mistake to expect joy and happiness from meditation. That’s like expecting bliss from a bag of pinto beans. It’s much more logical to expect bafflement: Why am I meditating? What can this possibly achieve? These questions recur throughout the decades.</p> | |||
| <p><span class="smallcaps"><strong>I don’t meditate</strong></span> to achieve mystical heights, but rather to appreciate the rest of my life. I want to wash the dishes with gratitude, like a slow-motion dance.</p> | |||
| <p>Mostly, though, I meditate to “kill time.” (I like this violent, somewhat outdated phrase.) Once you have murdered time, you can continue with the rest of your day nonviolently.</p> | |||
| <p><span class="smallcaps"><strong>Meditation is largely</strong></span> a pretense. Sitting with eyes closed and legs elegantly folded, you resemble an ancient sage. Inside, you’re still the same idiot you always were.</p> | |||
| <p><span class="smallcaps"><strong>One virtue of</strong></span> meditating is that you learn to forgive yourself: each day you fail at pure concentration, and each day you compassionately accept your failure. Ideally this self-forgiveness will lead to friend-forgiveness, spouse-forgiveness, even world-forgiveness.</p> | |||
| <p><span class="smallcaps"><strong>My parents were</strong></span> Communists, and my father used to tell this joke: A Communist is giving a speech. At a climactic moment he shouts, “Come the revolution, we’ll all have strawberries and sour cream!” A voice from the back of the crowd replies, “But I don’t like strawberries and sour cream!” The orator pauses, then announces, “Come the revolution, you’ll <em>like</em> strawberries and sour cream!”</p> | |||
| <p>This joke conveys a great paradox of political transformation: Just jailing all the capitalists and setting up an equal distribution system is insufficient. Individuals must evolve somehow. We need personal transmutation, what the Soviets called a “new man.” But how do we create this new self? The best tool for self-transformation I’ve found is conscious breath-awareness. Crystals are worthless. Incense is annoying. New-age music is awful. Most “spiritual” books are nonsense. What’s helpful is to sit still and observe the fretful mind.</p> | |||
| <p><span class="smallcaps"><strong>We all lie</strong></span> to ourselves every day, especially about our emotions. We tell ourselves we’re happy when we’re actually anxious, dismayed, resentful. When you close your eyes and listen to your breathing, you discover what a liar you are.</p> | |||
| <p><span class="smallcaps"><strong>The biggest surprise</strong></span> about meditating — and it remains a surprise after four decades — is how ineffective I am at controlling my own thoughts. In normal life my mind seems to work fine: I choose words and say them. I tell my hand to move, and it does. But closing my eyes and attempting to quiet my thoughts is almost impossible. The mind is a formidable adversary! You try to shut out the world, and the world pours in. You go to a quiet room and close your eyes, and suddenly you remember your fourth-grade teacher, or a friend you haven’t seen in thirty-seven years, or a visit to Puerto Rico. The riches of this earth arrive, in disarray.</p> | |||
| <p>Sometimes, though, you can undress the mind — remove, one by one, the mind’s habitual garments. Afterwards the mind stands momentarily naked.</p> | |||
| <p><span class="smallcaps"><strong>Each of us</strong></span> feels that we are separate from our environment, an island of ego looking out through eyeholes. In fact, our lungs are in constant dialogue with the atmosphere, and with all the earthly plants and animals producing that atmosphere. This dialogue literally gives us life. Separation is illusory; atmospheric unity is truth.</p> | |||
| <p><span class="smallcaps"><strong>Joan of Arc</strong></span> heard celestial voices in church bells. Dr. Seuss wrote his first book, <em>And to Think That I Saw It on Mulberry Street</em>, after taking a trip to Europe and hearing the ship’s engines say the title over and over.</p> | |||
| <p>I suspect that invisible beings are constantly speaking to us: through a stream, or the wind, or the subway. Meditation may open our ears to these benevolent voices.</p> | |||
| <p><span class="smallcaps"><strong>There are many</strong></span> arguments against meditation. One is that it shields us from the passions and grime of the world. It creates a manufactured bliss, immune to the oscillations of human emotion. Is it really better to stay in a middle range of emotion than to have highs and lows? Don’t we occasionally want to fall into a rage, burst out weeping, or scream at traffic?</p> | |||
| <p>As a prospective meditator — or a current one — you should consider this problem.</p> | |||
| <p><span class="smallcaps"><strong>Has meditation improved</strong></span> my life? I can’t tell. There’s only one of me. If I had an identical twin who’d never meditated, scientists could examine the two of us and analyze the differences. As it is, I can only guess. I do suspect that, had I never performed <em>sādhanā</em>, trees would not speak to me.</p> | |||
| <p><span class="smallcaps"><strong>If meditation is</strong></span> addictive, is it any better for us than drugs? Undoubtedly. Old stoners ruin their lungs. Speed freaks die young. Cokeheads inflate their egos and eventually go bankrupt. Meditation makes one younger, not older. It “strengthens the immune system,” as we say nowadays.</p> | |||
| <p><span class="smallcaps"><strong>Incremental progress appeals</strong></span> to me. I apply this method to books and records. I just finished the opera <em>Gianni Schicchi</em>, which I listened to in two-minute increments over the course of five months. Meanwhile I was nibbling away at Jane Austen’s <em>Persuasion</em>. Each day I tootle a brief improvisation on my plastic flutophone.</p> | |||
| <p>I enjoy the idea of slowly achieving mastery.</p> | |||
| <p><span class="smallcaps"><strong>The most painful</strong></span> place to meditate is in a quiet room with a ticking clock. I would rather do my sitting practice in the midst of the Russo-Japanese War than next to <em>tick-tock, tick-tock</em>.</p> | |||
| <p><span class="smallcaps"><strong>Meditation is supposed</strong></span> to empty the mind the way a pump empties water from the bilge of a ship. To be honest, I never quite feel empty after I’ve meditated. But I do feel <em>emptier</em>.</p> | |||
| <p><span class="smallcaps"><strong>Actually once in</strong></span> my life I did feel empty. In 1975, the day after attending a retreat with Swami Muktananda in Ocala, Florida, I was walking down a sidewalk and saw an azalea bush. Suddenly I had no thoughts! I could <em>see</em> the azaleas lucidly, without any interference from ideas, concepts, memories. I felt fulfilled, timeless — and a little scared: What if I never had another thought again?</p> | |||
| <p>Since then, I haven’t stopped thinking.</p> | |||
| <p><span class="smallcaps"><strong>One danger of</strong></span> meditation is the “rubber-band effect.” My old friend Satyamundi coined this term in 1979 for the tendency to “snap back” after long periods of virtuous and selfless action. Satyamundi would be scrupulous in his spiritual practices for months, then suddenly run off to visit a prostitute. So don’t try to be perfect.</p> | |||
| <p><span class="smallcaps"><strong>My friend Barium</strong></span> was telling me he had started to write a book about his sex life. “Then I realized,” he said, “I don’t have a very interesting sex life.”</p> | |||
| <p>“How do you know?” I replied. “You can’t see what anyone else is doing in the bedroom. And porn is no help — those people are just acting.”</p> | |||
| <p>Meditation is the same way. I have no idea whether my meditation life is exemplary or lousy. There’s even a meditational equivalent to porn: videos of swamis entering <em>samādhi</em> (union with the divine). But, just like porn actors, these swamis may be pretending. It’s as easy to fake spiritual bliss as it is to fake sexual ecstasy.</p> | |||
| <p><span class="smallcaps"><strong>I’m cat-sitting for</strong></span> a phlegmatic tabby named Baby. Last night was the first time I meditated in the house, and Baby playfully rubbed her muzzle on my folded hands. Perhaps cats are drawn to a meditator because they sense it’s a person aspiring to be catlike.</p> | |||
| <p><span class="smallcaps"><strong>Meditation is the</strong></span> closest humans come to purring.</p> | |||
| <p><span class="smallcaps"><strong>At some point</strong></span> your practice will be threatened — by a sudden emergency, a family crisis, a crucial deadline. Feel free to stop meditating or, conversely, to charge into the face of the enemy and meditate twice as long.</p> | |||
| <p><span class="smallcaps"><strong>Wisdom is found</strong></span> not in books or intellectual lectures but in the struggle to hear silence.</p> | |||
| <p><span class="smallcaps"><strong>I project an</strong></span> unnecessary piety on my meditation practice. Meditating should be the same as taking a shower: an act of renewal without “spiritual” connotations.</p> | |||
| <p><span class="smallcaps"><strong>If you offer</strong></span> your meditation to God, it becomes a prayer. If you offer your meditation to the universe, it becomes an affirmation. If you offer your meditation to humanity, it becomes activism.</p> | |||
| <p><span class="smallcaps"><strong>Don’t be afraid</strong></span> of the word <em>God</em>, but don’t get too excited about it either.</p> | |||
| <p><span class="smallcaps"><strong>Bob Jacobson was</strong></span> an artist who lived in a trailer near me in the Catskills. The outside of his home was an art gallery of sorts, bedecked with paintings he’d made on aluminum panels. He also carved abstract wooden sculptures in his front yard.</p> | |||
| <p>“No one knows how to look at art anymore,” Bob once told me. “You should be able to gaze at a painting for an hour.”</p> | |||
| <p>A few months later he elaborated: “You can look at <em>anything</em> as if it’s a painting. Sometimes I’ll go into the woods and just stare at the scene in front of me as if it were a Cézanne canvas.”</p> | |||
| <p>Bob Jacobson died a few weeks ago. I just realized he was teaching me meditation.</p> | |||
| <p><span class="smallcaps"><strong>You recharge your</strong></span> cell phone by plugging it into an electric current. You recharge your mind by plugging it into the Vast Oceanic Current of the Universe.</p> | |||
| <p><span class="smallcaps"><strong>The message of</strong></span> meditation is: “You already have everything you need — if not forever, at least for the next ten minutes.”</p> | |||
+ 282
- 0
cache/2020/ff864f1890f6eb967b3f9645554708e0/index.html
View File
| @@ -0,0 +1,282 @@ | |||
| <!doctype html><!-- This is a valid HTML5 document. --> | |||
| <!-- Screen readers, SEO, extensions and so on. --> | |||
| <html lang="fr"> | |||
| <!-- Has to be within the first 1024 bytes, hence before the <title> | |||
| See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset --> | |||
| <meta charset="utf-8"> | |||
| <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 --> | |||
| <!-- The viewport meta is quite crowded and we are responsible for that. | |||
| See: https://codepen.io/tigt/post/meta-viewport-for-2015 --> | |||
| <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1,shrink-to-fit=no"> | |||
| <!-- Required to make a valid HTML5 document. --> | |||
| <title>About static site generators (archive) — David Larlet</title> | |||
| <!-- Lightest blank gif, avoids an extra query to the server. --> | |||
| <link rel="icon" href="data:;base64,iVBORw0KGgo="> | |||
| <!-- Thank you Florens! --> | |||
| <link rel="stylesheet" href="/static/david/css/style_2020-01-06.css"> | |||
| <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. --> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_regular.woff2" as="font" type="font/woff2" crossorigin> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_bold.woff2" as="font" type="font/woff2" crossorigin> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_italic.woff2" as="font" type="font/woff2" crossorigin> | |||
| <meta name="robots" content="noindex, nofollow"> | |||
| <meta content="origin-when-cross-origin" name="referrer"> | |||
| <!-- Canonical URL for SEO purposes --> | |||
| <link rel="canonical" href="https://fvsch.com/static-site-generators/"> | |||
| <body class="remarkdown h1-underline h2-underline hr-center ul-star pre-tick"> | |||
| <article> | |||
| <h1>About static site generators</h1> | |||
| <h2><a href="https://fvsch.com/static-site-generators/">Source originale du contenu</a></h2> | |||
| <p>I’ve been looking for a decent static site generator to build a simple, 10-page-or-so documentation site, and I’m failing. Here are some notes on my journey, to serve as a warning sign to future travellers, and thoughts on what static site generators could do better.</p> | |||
| <h2>What is a static site generator, really?</h2> | |||
| <p>I’d like to try and describe static site generators as if we hadn’t encountered this class of software yet. Please do not skip this section, even if you already (think you) know the answer.</p> | |||
| <p>Static site generators (SSG) are a class of software programs that help with creating websites. They’re often written by developers — professionals or hobbyists — to power their own small website or blog, and as such they tend to have a limited feature set.</p> | |||
| <p>SSG are close parents to <em>scripts</em>: short programs (a few hundred lines of code), which can be used from a command prompt to achieve specific tasks. They’re often built as a hobby by one developer, sometimes getting help from a few others months or years later. They almost never offer a graphical user interface.</p> | |||
| <p>One core principle of those scripts is that they work with a source collection of plain text files (aka “content”), process those files to transform them to the HTML format, and wrap them in more HTML. This is often called a “build” step. Before running the build command, you would have a file tree that looks like this:</p> | |||
| <pre><code class="language-txt">My Cool Website | |||
| └── content | |||
| ├── 2018-09-07-cool-blog-post.txt | |||
| └── 2018-10-01-other-blog-post.txt</code></pre> | |||
| <p>And after typing some text to run a command in a “terminal” or “command prompt” application, you would get something like:</p> | |||
| <pre><code class="language-txt">My Cool Website | |||
| ├── content | |||
| │ ├── 2018-09-07-cool-blog-post.txt | |||
| │ └── 2018-10-01-other-blog-post.txt | |||
| └── output | |||
| ├── cool-blog-post.html | |||
| ├── index.html | |||
| ├── other-blog-post.html | |||
| └── rss.xml</code></pre> | |||
| <p>With that setup, you get a simple blog with one HTML page for each blog post, an index (or home) page that lists published posts, and a RSS feed. You can write your own styles if you know CSS, or — with some SSG, but not all — use a “theme” or an example project as a starting point.</p> | |||
| <p>Users of static site generators do this work on their own computer, and after the “output” folder has been generated they are expected to know how to put those files online to publish them. This can require software such as a FTP client, or more complex setups involving one or two additional command line tools.</p> | |||
| <p>There are hundreds of static site generators, with many <a href="https://www.staticgen.com/">listed on StaticGen.com</a>. Some of the most popular ones are <a href="https://jekyllrb.com/">Jekyll</a>, <a href="https://gohugo.io/">Hugo</a> and <a href="https://hexo.io/">Hexo</a>.</p> | |||
| <p>When it comes to editing features, there are not many to speak of. Users are expected to know what formats like <a href="https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/HTML_basics">HTML</a> and <a href="https://commonmark.org/help/">Markdown</a> are, how to prepare images themselves (in Photoshop, Gimp or similar software), how to insert images inside a page’s content by using code that may look like this:</p> | |||
| <pre><code class="language-md"></code></pre> | |||
| <p>Or even something more complex:</p> | |||
| <pre><code class="language-md">![My cat at 4 months]({{< imgproc sniffles-4months.jpg Resize "600x" />}})</code></pre> | |||
| <p>At this point we must recognize that static site generators are tools made by developers <em>for developers</em>. They require a ton of previous knowledge: HTML, Markdown, command line interfaces, FTP or some other way to publish HTML files online, and of course you would need some kind of web hosting to put those files. Users will also need to dive into technical documentation for their tool of choice when they want to customize their site’s pages, work in “templates”, learn a templating language, and probably write some CSS.</p> | |||
| <p>The most popular static site generator, Jekyll, may have the best documentation pages of the lot. And yet, it still puts a bunch of technical language front-and-center, on the project’s home page:</p> | |||
| <figure class="border"><img src="jekyll-quick-start.png" alt="A series of 4 terminal commands, starting with: gem install bundler jekyll…"/><figcaption>Jekyll’s core message, “Get up and running in seconds”</figcaption></figure> | |||
| <p>This is developer-talk, <em>because static site generators are tools made by developers for themselves and their peers</em>.</p> | |||
| <p>On the other hand, “content management” software such as WordPress, Drupal or <a href="https://getkirby.com/">my personal favorite, Kirby</a>, target a dual audience: content editors (who write and manage content), and developers (who set up the CMS and implement the site’s design and features).</p> | |||
| <p>I’m making this point because, if we own up to who our software’s audience is, then we can consider what we can do for that audience and hopefully design less terrible software.</p> | |||
| <h2>A developer’s idea of elegance</h2> | |||
| <p>I sometimes talk with developers who praise static site generators as <em>simple</em>, which is hogwash. I’ve seen a few projects where content editors were handed off a site based on a SSG (especially in startups where devs may dominate the conversation), and could not manage any change without a lot of training and assistance. Nothing simple about that.</p> | |||
| <p>What those developers probably mean is that they find static site generators <em>elegant</em>. A programmer thinks that a solution is elegant when it uses their current knowledge to achieve something with:</p> | |||
| <ul> | |||
| <li>few steps,</li> | |||
| <li>no repetition, and</li> | |||
| <li>not too much indirection.</li> | |||
| </ul> | |||
| <p>Static site generators are an elegant solution for developers because:</p> | |||
| <ol> | |||
| <li>It rests on our previous knowledge of: file and code formats, the command line, the plain-files-and-scripts philosophy, <code>git</code> and <code>ssh</code> or <code>scp</code> and other deployment strategies, etc.</li> | |||
| <li>Using this base knowledge, it offers solutions to boring, repetitive tasks. For example, Markdown syntax lets us avoid repeating <code><p>…</p></code> tags in our content; templates let us avoid tasks like manually repeating HTML structure and updating menus and content lists.</li> | |||
| <li>Finally, using the filesystem to store content lets us work in a single place (avoiding database software and languages, which would be overkill for limited datasets).</li> | |||
| </ol> | |||
| <p>I’m all for elegant solutions that fit my mindset (aka just “elegant solutions”), and I’ve used static site generators in the past, including Pelican, Hyde, Jekyll and Metalsmith.</p> | |||
| <p>Here’s the thing, though: it’s been a terrible experience. It turns out that <strong>static site generators are terrible at handling content</strong>. Which is too bad, because that’s one of their very few features to begin with.</p> | |||
| <p>Static site generators are elegant on principle, but are not designed to deal with content more complex than a handful of pages and a list of blog posts. And I’m not talking about the speed of building hundreds of pages or more (Jekyll is notoriously slow, Hugo is fast), but the sheer ability to <em>use content however you want</em>.</p> | |||
| <h2>Static site generators are bad at content</h2> | |||
| <p>Let’s back up a bit. Most static site generators were built — or at least are advertised — as alternatives to database-driven CMS software. We’ve already shown that they may only be a valid alternative for developers and technical users with a lot of prior knowledge. But they are missing another core capability of CMS software.</p> | |||
| <p>In your average PHP or Python CMS, as in many Web frameworks, querying content from a relational database is always possible (and more or less straightforward). Linked objects and/or hierarchical content structures are built in features. Building home pages, landing pages, lists, modular pages, product pages with many sections, etc., out of content hierarchies or relations is standard practice; CMS software that was too limited to do that either evolved or was replaced by their competition.</p> | |||
| <p>When I’ve used static site generators in the past ten years, there were a few pain points like lacking documentation and strange and incompatible conventions. But the nail in the coffin was always that it’s either impossible or way too hard to <strong>build a single page from several pieces of content</strong>.</p> | |||
| <p>Recently, I’ve looked at static site generators again, because I wanted to convert Kaliop’s <a href="https://kaliop.github.io/frontend-style-guide/2.0/">Frontend Style Guide</a>, originally built with Kirby CMS, to something that could be built to static HTML in fewer steps <em>by developers</em> (e.g. <code>npm install && npm run build</code>).</p> | |||
| <p>This site is made of a handful of long “chapter” pages, with a top-level table of contents which lists all chapters and their sections:</p> | |||
| <figure class="border"><img alt="Screenshot showing a full table of contents with 3 levels of titles" src="style-guide.png" srcset="style-guide.png 1x, style-guide@2x.png 2x"/></figure> | |||
| <p>For easier <em>content management</em> and reordering of sections, I had broken each chapter into different section files, so that the index page is generated from three levels of content. Looking at the “General Rules” branch only, the content hierarchy looks like:</p> | |||
| <pre><code class="language-txt">2.0 | |||
| └─ general | |||
| ├─ 1-readme | |||
| ├─ 2-editorconfig | |||
| ├─ 3-dry | |||
| └─ 4-clean</code></pre> | |||
| <p>When generating the full table of contents, I expect to be able to write (in pseudo-code):</p> | |||
| <pre><code class="language-txt">for chapter in page.children: | |||
| print chapter.title | |||
| for section in chapter.children: | |||
| print section.title</code></pre> | |||
| <p>Similarly, when generating a chapter page, I expect that I can easily print the full chapter content:</p> | |||
| <pre><code class="language-txt">for section in page.children: | |||
| print section.title | |||
| print section.content</code></pre> | |||
| <p>Actual templates would be a bit more complex, since we need to wrap this content in HTML tags, and maybe pass it to template partials or components. But retrieving content from a hierarchy of local files should be straightforward.</p> | |||
| <p><strong>I haven’t found a single static site generator that handles this use case gracefully.</strong> Instead, after reviewing the documentation of three dozens tools (listed on <a href="https://www.staticgen.com/">StaticGen</a>), and actively trying to build my use case with a handful of them, I’ve seen a range of limitations and awkward workarounds:</p> | |||
| <ol> | |||
| <li>Sometimes it’s just not possible to work with content hierarchies and partial content. (Most JavaScript static site generators fall into that category.)</li> | |||
| <li>Or you have to write some configuration code that populates “Collections” ahead of build time. (Too indirect, and breaks if you change your information architecture a bit. We need something a bit closer to direct manipulation!)</li> | |||
| <li>Finally, a short list of tools allow listing a page’s children or “resources”, but have bugs when dealing with more than one level (<a href="https://www.getgutenberg.io/">Gutenberg</a>) or impose arbitrary restrictions on what page “types” can list different types of content (<a href="https://gohugo.io/">Hugo</a>).</li> | |||
| </ol> | |||
| <p>When you <em>can</em> list content from children, grandchildren or other locations, it’s often not possible to <em>process</em> this content as Markdown or access its metadata.</p> | |||
| <h2>A few words of warning about Hugo</h2> | |||
| <p>The <a href="https://gohugo.io/">Hugo</a> static site generator, praised by many for its speed, is more capable than most. There are surely many good things to say about Hugo, but in the spirit of warning folks about the terribleness of software: I wouldn’t recommend it for anyone who wants a smooth learning experience.</p> | |||
| <p>For one thing, it requires learning about way too many specific concepts: Sections, Lists, Taxonomies, Page Bundles, Leaf Bundles, Template lookup order, and the perfectly unintuitive differences between a <code>index.md</code> page and a <code>_index.md</code> page. (Or are those Sections, or Bundles? Is one a Section and the other a Page? Are Sections and Bundles “pages” too? I have no idea.)</p> | |||
| <p>I particularly dislike the way Hugo <a href="https://gohugo.io/templates/lookup-order/">matches a page to a dozen possible template files</a> or more — taking a page from Drupal’s book of idiosyncratic awfulness. Now, I understand that this is meant to make it possible to use different “themes”, and at worst your pages will still render with the theme’s <code>layouts/_default/list.html</code> or <code>layouts/_default/single.html</code> templates. But if you want to write your own HTML and CSS, the template lookup stuff is a nuisance (much like it is in the Drupal world when you want any kind of control over the HTML output).</p> | |||
| <p>On top of the complexity of Hugo’s design, its documentation is often subpar. For instance, the <a href="https://gohugo.io/content-management/page-resources/">“Content Management > Page Resources” page</a> does not explain much about, well, content, or content management. I expected a description showing content examples (some markdown or a file structure maybe), then information about how to use it in templates and other contexts. Instead, it’s a kind of API documentation listing “Properties” and “Methods”.</p> | |||
| <p>The second issue is that while Hugo builds pages <em>fast</em>, it often <em>builds the wrong thing fast</em>. For instance, if I rename a <code>index.md</code> file to <code>_index.md</code>, I need to run the <code>hugo</code> command two or three times to get it to render with the correct template. Using <code>hugo server</code> seems even less reliable.</p> | |||
| <p>Hugo is also unhelpful when a source Markdown file doesn’t render anything (there is no log or warning) or outputs a cryptic <code><pre></pre></code>. This doesn’t help the learning curve.</p> | |||
| <p>That being said, I heard that Hugo is an interesting choice if you’re building hundreds or thousands of pages (because it builds these pages really quickly), in which case it might be worth spending a couple weeks learning to use it.</p> | |||
| <h2>What could we do differently?</h2> | |||
| <p>There are thousands of static site generators out there (counting a bunch of scripts with 5 stars on GitHub) because thousands of developers looked at existing solutions and said “eh, I’ll just build my own”.</p> | |||
| <p>As a thought experiment, here are the core topics I would look at if I wanted to build my own tool from scratch.</p> | |||
| <h3>1. Content naming conventions</h3> | |||
| <p>Conventions for naming content files are necessary to allow users to create content files quickly and get predictable results. Those conventions must be short, clearly defined, clearly explained (you need great docs here), and intuitive (when possible, follow existing conventions rather than roll your own).</p> | |||
| <p>Major issues to solve regarding source content:</p> | |||
| <ul> | |||
| <li>What will translate to a web page?</li> | |||
| <li>What will be ignored?</li> | |||
| <li>How may users control the transformations that are applied to content (processing of Markdown or other formats, templates, image transformations)? Should this be defined in the content or elsewhere?</li> | |||
| <li>How do you generate alternative views for the same page, e.g. a HTML page and a RSS or Atom feed?</li> | |||
| <li>How can you generate category and tag pages? More generally, how do you generate any limited set of pages based on querying information from other content, without having to manually create a new (probably empty) content file?</li> | |||
| </ul> | |||
| <p>Some of those concerns can be addressed in templates or in configuration or other code, but there’s value in using elegant conventions to let users directly manipulate or tweak content to get a desired result.</p> | |||
| <h3>2. Give feedback on content-to-output mapping</h3> | |||
| <p>The generator should provide, by default, feedback on which files are picked up, which are ignored, and why. When a file is picked up and processed in some way, it should say so too.</p> | |||
| <p>To surface this information efficiently, the generator may need to come with a GUI (a web UI could work). I would be looking at tools like <a href="https://fractal.build/">Fractal</a> for inspiration.</p> | |||
| <h3>3. More code should happen in templates</h3> | |||
| <p>Most generators use restrictive template engines, and feed a restricted context (aka a set of data and functions) to those templates. This seems to come from a misguided need to keep templates “simple”, “logic-less”, and other kinds of baloney. Look, in a big MVC application built by people with different roles and technical knowledge, it might be useful to have your very responsible backend developers write controllers and let designers or frontend developers write HTML in a sandbox. Well, that’s a questionable approach too.</p> | |||
| <p>Anyway, as we said we’re making a tool for technically-minded people, and should give them power to actually do stuff. And since we’re talking about websites built ahead-of-time, the risks of logic in templates don’t apply as much.</p> | |||
| <p>Another consequence of restricted templates is that SSG documentation will then tell you to work in a third place: not in content, not in templates, but in “config code”. This is a problem because A) it’s probably one place too many and B) it’s often unclear at what time this config code is running or how often: once for every page generation or template run, or just once at the start of a build?</p> | |||
| <p>So, do more work in templates. We’re making somewhat simple websites here, it’s going to be okay. It’s cool if you can refactor your code to avoid duplication or separate concerns or whatever, but this shouldn’t be a requirement; users will only jump through hoops if they’re working on a big enough project to justify it.</p> | |||
| <h3>4. A full content API</h3> | |||
| <p>There should be a full content traversal API, which could be modelled after <a href="https://getkirby.com/docs/templates/api">Kirby’s API</a> (itself inspired by jQuery). Other sources of inspiration:</p> | |||
| <ul> | |||
| <li>Globbing, e.g. <code>find('posts/*.md')</code>.</li> | |||
| <li>DOM traversal (there’s no reason why your content tree cannot be a tree of nodes).</li> | |||
| </ul> | |||
| <p>One concern with offering a full content API in templates is that if you run a template for a thousand pages, and do the same work (including querying the filesystem) every time, you’re going to have performance issues. I have a few possible optimizations in mind (fragmenting content queries and memoization), but I’ll admit that as a UI developer this is not my forte.</p> | |||
| <p>On top of traversing and retrieving content, templates should be able to transform formats (Markdown to HTML, parsing JSON and maybe YAML) and process images.</p> | |||
| <h3>5. Markdown plus front-matter is too limiting</h3> | |||
| <p>Originating in simple blog engines, static site generators treat pages as a single content chunk (often in Markdown) with some metadata sprinkled on top. If you need several long chunks of content (say, a product short description, long description, technical specs, and a list of vendors), you’re out of luck.</p> | |||
| <p>Theoretically, you can put any kind of text content in YAML “front-matter”, but editing that content without breaking the YAML syntax is a pain.</p> | |||
| <p>One workaround is using separate files in the same folder or in subfolder, than use the content API to retrieve them. Each such “resource” can have a body and metadata.</p> | |||
| <p>Kirby does things a bit differently (though it’s always possible to use a page’s files or child pages too), using a custom format with arbitrary fields:</p> | |||
| <pre><code>Title: My Title | |||
| ---- | |||
| Date: 2018-12-25 | |||
| ---- | |||
| Desc: Short description for list views and SEO. | |||
| ---- | |||
| Body: | |||
| ## A field contains arbitrary text | |||
| So we can use a field value and parse it as Markdown or whatever. | |||
| … | |||
| ---- | |||
| Notes: … | |||
| ---- | |||
| References: …</code></pre> | |||
| <p>Other sources of inspiration:</p> | |||
| <ul> | |||
| <li>Vue single-file components, and, well, XML</li> | |||
| <li>Inside the page’s body: shortcodes (WordPress, Hugo), Web Components, Vue components (Vuepress)</li> | |||
| <li>Separators using HTML comment syntax, like <code><!--more--></code></li> | |||
| </ul> | |||
| <p>I’m not sure what would be the “best” solution, but it should be possible to unlock more power without completely breaking with convention.</p> | |||
| <h3>6. No theming system</h3> | |||
| <p>A theming infrastructure imposes a lot of technical restrictions and indirection, such as template lookup orders (see: Hugo), having to specify a handful of default template names (Hugo, again), and having to specify strange content conventions for mapping content to those default template names (still Hugo). Frankly, if a user really wants a template inheritance and theme inheritance mechanism, they’ll probably bite the bullet and work with WordPress or Drupal.</p> | |||
| <p>In the lightweight CMS world, having a theming system is the main reason why <a href="https://getgrav.org/">Grav</a> is less straightforward than <a href="https://getkirby.com/">Kirby</a> (which inspired it): themes and plugins rely on metadata in pages, so you have to put detailed config-as-metadata in every page to enable and configure theme and plugin features, which often feels like randomly pressing buttons and hoping to get a result.</p> | |||
| </article> | |||
| <hr> | |||
| <nav> | |||
| <a href="/david/" title="Aller à l’accueil">🏠</a> • | |||
| <a href="/david/log/" title="Accès au flux RSS">🤖</a> • | |||
| <a href="http://larlet.com" title="Go to my English profile">🇨🇦</a> • | |||
| <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">📮</a> • | |||
| <abbr title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340">🧚</abbr> | |||
| </nav> | |||
| </body> | |||
| </html> | |||
+ 152
- 0
cache/2020/ff864f1890f6eb967b3f9645554708e0/index.md
View File
| @@ -0,0 +1,152 @@ | |||
| title: About static site generators | |||
| url: https://fvsch.com/static-site-generators/ | |||
| hash_url: ff864f1890f6eb967b3f9645554708e0 | |||
| <p>I’ve been looking for a decent static site generator to build a simple, 10-page-or-so documentation site, and I’m failing. Here are some notes on my journey, to serve as a warning sign to future travellers, and thoughts on what static site generators could do better.</p> | |||
| <h2>What is a static site generator, really?</h2> | |||
| <p>I’d like to try and describe static site generators as if we hadn’t encountered this class of software yet. Please do not skip this section, even if you already (think you) know the answer.</p> | |||
| <p>Static site generators (SSG) are a class of software programs that help with creating websites. They’re often written by developers — professionals or hobbyists — to power their own small website or blog, and as such they tend to have a limited feature set.</p> | |||
| <p>SSG are close parents to <em>scripts</em>: short programs (a few hundred lines of code), which can be used from a command prompt to achieve specific tasks. They’re often built as a hobby by one developer, sometimes getting help from a few others months or years later. They almost never offer a graphical user interface.</p> | |||
| <p>One core principle of those scripts is that they work with a source collection of plain text files (aka “content”), process those files to transform them to the HTML format, and wrap them in more HTML. This is often called a “build” step. Before running the build command, you would have a file tree that looks like this:</p> | |||
| <pre><code class="language-txt">My Cool Website | |||
| └── content | |||
| ├── 2018-09-07-cool-blog-post.txt | |||
| └── 2018-10-01-other-blog-post.txt</code></pre> | |||
| <p>And after typing some text to run a command in a “terminal” or “command prompt” application, you would get something like:</p> | |||
| <pre><code class="language-txt">My Cool Website | |||
| ├── content | |||
| │ ├── 2018-09-07-cool-blog-post.txt | |||
| │ └── 2018-10-01-other-blog-post.txt | |||
| └── output | |||
| ├── cool-blog-post.html | |||
| ├── index.html | |||
| ├── other-blog-post.html | |||
| └── rss.xml</code></pre> | |||
| <p>With that setup, you get a simple blog with one HTML page for each blog post, an index (or home) page that lists published posts, and a RSS feed. You can write your own styles if you know CSS, or — with some SSG, but not all — use a “theme” or an example project as a starting point.</p> | |||
| <p>Users of static site generators do this work on their own computer, and after the “output” folder has been generated they are expected to know how to put those files online to publish them. This can require software such as a FTP client, or more complex setups involving one or two additional command line tools.</p> | |||
| <p>There are hundreds of static site generators, with many <a href="https://www.staticgen.com/">listed on StaticGen.com</a>. Some of the most popular ones are <a href="https://jekyllrb.com/">Jekyll</a>, <a href="https://gohugo.io/">Hugo</a> and <a href="https://hexo.io/">Hexo</a>.</p> | |||
| <p>When it comes to editing features, there are not many to speak of. Users are expected to know what formats like <a href="https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/HTML_basics">HTML</a> and <a href="https://commonmark.org/help/">Markdown</a> are, how to prepare images themselves (in Photoshop, Gimp or similar software), how to insert images inside a page’s content by using code that may look like this:</p> | |||
| <pre><code class="language-md"></code></pre> | |||
| <p>Or even something more complex:</p> | |||
| <pre><code class="language-md">![My cat at 4 months]({{< imgproc sniffles-4months.jpg Resize "600x" />}})</code></pre> | |||
| <p>At this point we must recognize that static site generators are tools made by developers <em>for developers</em>. They require a ton of previous knowledge: HTML, Markdown, command line interfaces, FTP or some other way to publish HTML files online, and of course you would need some kind of web hosting to put those files. Users will also need to dive into technical documentation for their tool of choice when they want to customize their site’s pages, work in “templates”, learn a templating language, and probably write some CSS.</p> | |||
| <p>The most popular static site generator, Jekyll, may have the best documentation pages of the lot. And yet, it still puts a bunch of technical language front-and-center, on the project’s home page:</p> | |||
| <figure class="border"><img src="jekyll-quick-start.png" alt="A series of 4 terminal commands, starting with: gem install bundler jekyll…"/><figcaption>Jekyll’s core message, “Get up and running in seconds”</figcaption></figure> | |||
| <p>This is developer-talk, <em>because static site generators are tools made by developers for themselves and their peers</em>.</p> | |||
| <p>On the other hand, “content management” software such as WordPress, Drupal or <a href="https://getkirby.com/">my personal favorite, Kirby</a>, target a dual audience: content editors (who write and manage content), and developers (who set up the CMS and implement the site’s design and features).</p> | |||
| <p>I’m making this point because, if we own up to who our software’s audience is, then we can consider what we can do for that audience and hopefully design less terrible software.</p> | |||
| <h2>A developer’s idea of elegance</h2> | |||
| <p>I sometimes talk with developers who praise static site generators as <em>simple</em>, which is hogwash. I’ve seen a few projects where content editors were handed off a site based on a SSG (especially in startups where devs may dominate the conversation), and could not manage any change without a lot of training and assistance. Nothing simple about that.</p> | |||
| <p>What those developers probably mean is that they find static site generators <em>elegant</em>. A programmer thinks that a solution is elegant when it uses their current knowledge to achieve something with:</p> | |||
| <ul> | |||
| <li>few steps,</li> | |||
| <li>no repetition, and</li> | |||
| <li>not too much indirection.</li> | |||
| </ul> | |||
| <p>Static site generators are an elegant solution for developers because:</p> | |||
| <ol> | |||
| <li>It rests on our previous knowledge of: file and code formats, the command line, the plain-files-and-scripts philosophy, <code>git</code> and <code>ssh</code> or <code>scp</code> and other deployment strategies, etc.</li> | |||
| <li>Using this base knowledge, it offers solutions to boring, repetitive tasks. For example, Markdown syntax lets us avoid repeating <code><p>…</p></code> tags in our content; templates let us avoid tasks like manually repeating HTML structure and updating menus and content lists.</li> | |||
| <li>Finally, using the filesystem to store content lets us work in a single place (avoiding database software and languages, which would be overkill for limited datasets).</li> | |||
| </ol> | |||
| <p>I’m all for elegant solutions that fit my mindset (aka just “elegant solutions”), and I’ve used static site generators in the past, including Pelican, Hyde, Jekyll and Metalsmith.</p> | |||
| <p>Here’s the thing, though: it’s been a terrible experience. It turns out that <strong>static site generators are terrible at handling content</strong>. Which is too bad, because that’s one of their very few features to begin with.</p> | |||
| <p>Static site generators are elegant on principle, but are not designed to deal with content more complex than a handful of pages and a list of blog posts. And I’m not talking about the speed of building hundreds of pages or more (Jekyll is notoriously slow, Hugo is fast), but the sheer ability to <em>use content however you want</em>.</p> | |||
| <h2>Static site generators are bad at content</h2> | |||
| <p>Let’s back up a bit. Most static site generators were built — or at least are advertised — as alternatives to database-driven CMS software. We’ve already shown that they may only be a valid alternative for developers and technical users with a lot of prior knowledge. But they are missing another core capability of CMS software.</p> | |||
| <p>In your average PHP or Python CMS, as in many Web frameworks, querying content from a relational database is always possible (and more or less straightforward). Linked objects and/or hierarchical content structures are built in features. Building home pages, landing pages, lists, modular pages, product pages with many sections, etc., out of content hierarchies or relations is standard practice; CMS software that was too limited to do that either evolved or was replaced by their competition.</p> | |||
| <p>When I’ve used static site generators in the past ten years, there were a few pain points like lacking documentation and strange and incompatible conventions. But the nail in the coffin was always that it’s either impossible or way too hard to <strong>build a single page from several pieces of content</strong>.</p> | |||
| <p>Recently, I’ve looked at static site generators again, because I wanted to convert Kaliop’s <a href="https://kaliop.github.io/frontend-style-guide/2.0/">Frontend Style Guide</a>, originally built with Kirby CMS, to something that could be built to static HTML in fewer steps <em>by developers</em> (e.g. <code>npm install && npm run build</code>).</p> | |||
| <p>This site is made of a handful of long “chapter” pages, with a top-level table of contents which lists all chapters and their sections:</p> | |||
| <figure class="border"><img alt="Screenshot showing a full table of contents with 3 levels of titles" src="style-guide.png" srcset="style-guide.png 1x, style-guide@2x.png 2x"/></figure> | |||
| <p>For easier <em>content management</em> and reordering of sections, I had broken each chapter into different section files, so that the index page is generated from three levels of content. Looking at the “General Rules” branch only, the content hierarchy looks like:</p> | |||
| <pre><code class="language-txt">2.0 | |||
| └─ general | |||
| ├─ 1-readme | |||
| ├─ 2-editorconfig | |||
| ├─ 3-dry | |||
| └─ 4-clean</code></pre> | |||
| <p>When generating the full table of contents, I expect to be able to write (in pseudo-code):</p> | |||
| <pre><code class="language-txt">for chapter in page.children: | |||
| print chapter.title | |||
| for section in chapter.children: | |||
| print section.title</code></pre> | |||
| <p>Similarly, when generating a chapter page, I expect that I can easily print the full chapter content:</p> | |||
| <pre><code class="language-txt">for section in page.children: | |||
| print section.title | |||
| print section.content</code></pre> | |||
| <p>Actual templates would be a bit more complex, since we need to wrap this content in HTML tags, and maybe pass it to template partials or components. But retrieving content from a hierarchy of local files should be straightforward.</p> | |||
| <p><strong>I haven’t found a single static site generator that handles this use case gracefully.</strong> Instead, after reviewing the documentation of three dozens tools (listed on <a href="https://www.staticgen.com/">StaticGen</a>), and actively trying to build my use case with a handful of them, I’ve seen a range of limitations and awkward workarounds:</p> | |||
| <ol> | |||
| <li>Sometimes it’s just not possible to work with content hierarchies and partial content. (Most JavaScript static site generators fall into that category.)</li> | |||
| <li>Or you have to write some configuration code that populates “Collections” ahead of build time. (Too indirect, and breaks if you change your information architecture a bit. We need something a bit closer to direct manipulation!)</li> | |||
| <li>Finally, a short list of tools allow listing a page’s children or “resources”, but have bugs when dealing with more than one level (<a href="https://www.getgutenberg.io/">Gutenberg</a>) or impose arbitrary restrictions on what page “types” can list different types of content (<a href="https://gohugo.io/">Hugo</a>).</li> | |||
| </ol> | |||
| <p>When you <em>can</em> list content from children, grandchildren or other locations, it’s often not possible to <em>process</em> this content as Markdown or access its metadata.</p> | |||
| <h2>A few words of warning about Hugo</h2> | |||
| <p>The <a href="https://gohugo.io/">Hugo</a> static site generator, praised by many for its speed, is more capable than most. There are surely many good things to say about Hugo, but in the spirit of warning folks about the terribleness of software: I wouldn’t recommend it for anyone who wants a smooth learning experience.</p> | |||
| <p>For one thing, it requires learning about way too many specific concepts: Sections, Lists, Taxonomies, Page Bundles, Leaf Bundles, Template lookup order, and the perfectly unintuitive differences between a <code>index.md</code> page and a <code>_index.md</code> page. (Or are those Sections, or Bundles? Is one a Section and the other a Page? Are Sections and Bundles “pages” too? I have no idea.)</p> | |||
| <p>I particularly dislike the way Hugo <a href="https://gohugo.io/templates/lookup-order/">matches a page to a dozen possible template files</a> or more — taking a page from Drupal’s book of idiosyncratic awfulness. Now, I understand that this is meant to make it possible to use different “themes”, and at worst your pages will still render with the theme’s <code>layouts/_default/list.html</code> or <code>layouts/_default/single.html</code> templates. But if you want to write your own HTML and CSS, the template lookup stuff is a nuisance (much like it is in the Drupal world when you want any kind of control over the HTML output).</p> | |||
| <p>On top of the complexity of Hugo’s design, its documentation is often subpar. For instance, the <a href="https://gohugo.io/content-management/page-resources/">“Content Management > Page Resources” page</a> does not explain much about, well, content, or content management. I expected a description showing content examples (some markdown or a file structure maybe), then information about how to use it in templates and other contexts. Instead, it’s a kind of API documentation listing “Properties” and “Methods”.</p> | |||
| <p>The second issue is that while Hugo builds pages <em>fast</em>, it often <em>builds the wrong thing fast</em>. For instance, if I rename a <code>index.md</code> file to <code>_index.md</code>, I need to run the <code>hugo</code> command two or three times to get it to render with the correct template. Using <code>hugo server</code> seems even less reliable.</p> | |||
| <p>Hugo is also unhelpful when a source Markdown file doesn’t render anything (there is no log or warning) or outputs a cryptic <code><pre></pre></code>. This doesn’t help the learning curve.</p> | |||
| <p>That being said, I heard that Hugo is an interesting choice if you’re building hundreds or thousands of pages (because it builds these pages really quickly), in which case it might be worth spending a couple weeks learning to use it.</p> | |||
| <h2>What could we do differently?</h2> | |||
| <p>There are thousands of static site generators out there (counting a bunch of scripts with 5 stars on GitHub) because thousands of developers looked at existing solutions and said “eh, I’ll just build my own”.</p> | |||
| <p>As a thought experiment, here are the core topics I would look at if I wanted to build my own tool from scratch.</p> | |||
| <h3>1. Content naming conventions</h3> | |||
| <p>Conventions for naming content files are necessary to allow users to create content files quickly and get predictable results. Those conventions must be short, clearly defined, clearly explained (you need great docs here), and intuitive (when possible, follow existing conventions rather than roll your own).</p> | |||
| <p>Major issues to solve regarding source content:</p> | |||
| <ul> | |||
| <li>What will translate to a web page?</li> | |||
| <li>What will be ignored?</li> | |||
| <li>How may users control the transformations that are applied to content (processing of Markdown or other formats, templates, image transformations)? Should this be defined in the content or elsewhere?</li> | |||
| <li>How do you generate alternative views for the same page, e.g. a HTML page and a RSS or Atom feed?</li> | |||
| <li>How can you generate category and tag pages? More generally, how do you generate any limited set of pages based on querying information from other content, without having to manually create a new (probably empty) content file?</li> | |||
| </ul> | |||
| <p>Some of those concerns can be addressed in templates or in configuration or other code, but there’s value in using elegant conventions to let users directly manipulate or tweak content to get a desired result.</p> | |||
| <h3>2. Give feedback on content-to-output mapping</h3> | |||
| <p>The generator should provide, by default, feedback on which files are picked up, which are ignored, and why. When a file is picked up and processed in some way, it should say so too.</p> | |||
| <p>To surface this information efficiently, the generator may need to come with a GUI (a web UI could work). I would be looking at tools like <a href="https://fractal.build/">Fractal</a> for inspiration.</p> | |||
| <h3>3. More code should happen in templates</h3> | |||
| <p>Most generators use restrictive template engines, and feed a restricted context (aka a set of data and functions) to those templates. This seems to come from a misguided need to keep templates “simple”, “logic-less”, and other kinds of baloney. Look, in a big MVC application built by people with different roles and technical knowledge, it might be useful to have your very responsible backend developers write controllers and let designers or frontend developers write HTML in a sandbox. Well, that’s a questionable approach too.</p> | |||
| <p>Anyway, as we said we’re making a tool for technically-minded people, and should give them power to actually do stuff. And since we’re talking about websites built ahead-of-time, the risks of logic in templates don’t apply as much.</p> | |||
| <p>Another consequence of restricted templates is that SSG documentation will then tell you to work in a third place: not in content, not in templates, but in “config code”. This is a problem because A) it’s probably one place too many and B) it’s often unclear at what time this config code is running or how often: once for every page generation or template run, or just once at the start of a build?</p> | |||
| <p>So, do more work in templates. We’re making somewhat simple websites here, it’s going to be okay. It’s cool if you can refactor your code to avoid duplication or separate concerns or whatever, but this shouldn’t be a requirement; users will only jump through hoops if they’re working on a big enough project to justify it.</p> | |||
| <h3>4. A full content API</h3> | |||
| <p>There should be a full content traversal API, which could be modelled after <a href="https://getkirby.com/docs/templates/api">Kirby’s API</a> (itself inspired by jQuery). Other sources of inspiration:</p> | |||
| <ul> | |||
| <li>Globbing, e.g. <code>find('posts/*.md')</code>.</li> | |||
| <li>DOM traversal (there’s no reason why your content tree cannot be a tree of nodes).</li> | |||
| </ul> | |||
| <p>One concern with offering a full content API in templates is that if you run a template for a thousand pages, and do the same work (including querying the filesystem) every time, you’re going to have performance issues. I have a few possible optimizations in mind (fragmenting content queries and memoization), but I’ll admit that as a UI developer this is not my forte.</p> | |||
| <p>On top of traversing and retrieving content, templates should be able to transform formats (Markdown to HTML, parsing JSON and maybe YAML) and process images.</p> | |||
| <h3>5. Markdown plus front-matter is too limiting</h3> | |||
| <p>Originating in simple blog engines, static site generators treat pages as a single content chunk (often in Markdown) with some metadata sprinkled on top. If you need several long chunks of content (say, a product short description, long description, technical specs, and a list of vendors), you’re out of luck.</p> | |||
| <p>Theoretically, you can put any kind of text content in YAML “front-matter”, but editing that content without breaking the YAML syntax is a pain.</p> | |||
| <p>One workaround is using separate files in the same folder or in subfolder, than use the content API to retrieve them. Each such “resource” can have a body and metadata.</p> | |||
| <p>Kirby does things a bit differently (though it’s always possible to use a page’s files or child pages too), using a custom format with arbitrary fields:</p> | |||
| <pre><code>Title: My Title | |||
| ---- | |||
| Date: 2018-12-25 | |||
| ---- | |||
| Desc: Short description for list views and SEO. | |||
| ---- | |||
| Body: | |||
| ## A field contains arbitrary text | |||
| So we can use a field value and parse it as Markdown or whatever. | |||
| … | |||
| ---- | |||
| Notes: … | |||
| ---- | |||
| References: …</code></pre> | |||
| <p>Other sources of inspiration:</p> | |||
| <ul> | |||
| <li>Vue single-file components, and, well, XML</li> | |||
| <li>Inside the page’s body: shortcodes (WordPress, Hugo), Web Components, Vue components (Vuepress)</li> | |||
| <li>Separators using HTML comment syntax, like <code><!--more--></code></li> | |||
| </ul> | |||
| <p>I’m not sure what would be the “best” solution, but it should be possible to unlock more power without completely breaking with convention.</p> | |||
| <h3>6. No theming system</h3> | |||
| <p>A theming infrastructure imposes a lot of technical restrictions and indirection, such as template lookup orders (see: Hugo), having to specify a handful of default template names (Hugo, again), and having to specify strange content conventions for mapping content to those default template names (still Hugo). Frankly, if a user really wants a template inheritance and theme inheritance mechanism, they’ll probably bite the bullet and work with WordPress or Drupal.</p> | |||
| <p>In the lightweight CMS world, having a theming system is the main reason why <a href="https://getgrav.org/">Grav</a> is less straightforward than <a href="https://getkirby.com/">Kirby</a> (which inspired it): themes and plugins rely on metadata in pages, so you have to put detailed config-as-metadata in every page to enable and configure theme and plugin features, which often feels like randomly pressing buttons and hoping to get a result.</p> | |||
+ 55
- 0
cache/2020/index.html
View File
| @@ -0,0 +1,55 @@ | |||
| <!doctype html><!-- This is a valid HTML5 document. --> | |||
| <!-- Screen readers, SEO, extensions and so on. --> | |||
| <html lang="fr"> | |||
| <!-- Has to be within the first 1024 bytes, hence before the <title> | |||
| See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset --> | |||
| <meta charset="utf-8"> | |||
| <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 --> | |||
| <!-- The viewport meta is quite crowded and we are responsible for that. | |||
| See: https://codepen.io/tigt/post/meta-viewport-for-2015 --> | |||
| <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1,shrink-to-fit=no"> | |||
| <!-- Required to make a valid HTML5 document. --> | |||
| <title>Articles archivés — David Larlet</title> | |||
| <!-- Lightest blank gif, avoids an extra query to the server. --> | |||
| <link rel="icon" href="data:;base64,iVBORw0KGgo="> | |||
| <!-- Thank you Florens! --> | |||
| <link rel="stylesheet" href="/static/david/css/style_2020-01-06.css"> | |||
| <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. --> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_regular.woff2" as="font" type="font/woff2" crossorigin> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_bold.woff2" as="font" type="font/woff2" crossorigin> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_italic.woff2" as="font" type="font/woff2" crossorigin> | |||
| <body class="remarkdown h1-underline h2-underline hr-center ul-star pre-tick"> | |||
| <h1>Articles archivés</h1> | |||
| <article> | |||
| <ul> | |||
| <li><a href="/david/cache/2020/fb2849b42586654e0c899bf1a31fa5a5/" title="Accès à l'article caché">Sparrow’s Guide To Meditation</a> (<a href="https://www.thesunmagazine.org/issues/529/sparrows-guide-to-meditation" title="Accès à l'article original">original</a>)</li> | |||
| <li><a href="/david/cache/2020/17aa5580eb34f39f214e4a72458c535e/" title="Accès à l'article caché">Thinking about the past, present, and future of web development</a> (<a href="https://www.baldurbjarnason.com/past-present-future-web/" title="Accès à l'article original">original</a>)</li> | |||
| <li><a href="/david/cache/2020/322e7a8997c732a5fdca0baaea7b9ede/" title="Accès à l'article caché">Guide to Internal Communication, the Basecamp Way</a> (<a href="https://basecamp.com/guides/how-we-communicate" title="Accès à l'article original">original</a>)</li> | |||
| <li><a href="/david/cache/2020/ff864f1890f6eb967b3f9645554708e0/" title="Accès à l'article caché">About static site generators</a> (<a href="https://fvsch.com/static-site-generators/" title="Accès à l'article original">original</a>)</li> | |||
| <li><a href="/david/cache/2020/685842ac9d1a3206af33dbd51d08cbf0/" title="Accès à l'article caché">The modern web is becoming an unusable, user-hostile wasteland</a> (<a href="https://omarabid.com/the-modern-web" title="Accès à l'article original">original</a>)</li> | |||
| <li><a href="/david/cache/2020/ceecad22409cbd161b85bf5f18b09413/" title="Accès à l'article caché">Estimating NetNewsWire for iOS Demand</a> (<a href="https://inessential.com/2020/01/03/estimating_netnewswire_for_ios_demand" title="Accès à l'article original">original</a>)</li> | |||
| </ul> | |||
| </article> | |||
| <hr> | |||
| <nav> | |||
| <a href="/david/" title="Aller à l’accueil">🏠</a> • | |||
| <a href="/david/log/" title="Accès au flux RSS">🤖</a> • | |||
| <a href="http://larlet.com" title="Go to my English profile">🇨🇦</a> • | |||
| <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">📮</a> • | |||
| <abbr title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340">🧚</abbr> | |||
| </nav> | |||
| </body> | |||
| </html> | |||
+ 0
- 603
templates/base_2019.html
View File
| @@ -1,603 +0,0 @@ | |||
| <!doctype html><!-- This is a valid HTML5 document. --> | |||
| <!-- Screen readers, SEO, extensions and so on. --> | |||
| <html lang={% block lang %}fr{% endblock lang %}> | |||
| <!-- Has to be within the first 1024 bytes, hence before the <title> | |||
| See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset --> | |||
| <meta charset=utf-8> | |||
| <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 --> | |||
| <!-- The viewport meta is quite crowded and we are responsible for that. | |||
| See: https://codepen.io/tigt/post/meta-viewport-for-2015 --> | |||
| <meta name=viewport content="width=device-width,minimum-scale=1,initial-scale=1,shrink-to-fit=no"> | |||
| <!-- Required to make a valid HTML5 document. --> | |||
| <title>{% block title %}{% endblock %} — David Larlet</title> | |||
| <!-- Generated from https://realfavicongenerator.net/ such a mess. --> | |||
| <link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons/apple-touch-icon.png"> | |||
| <link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons/favicon-32x32.png"> | |||
| <link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons/favicon-16x16.png"> | |||
| <link rel="manifest" href="/manifest.json"> | |||
| <link rel="mask-icon" href="/static/david/icons/safari-pinned-tab.svg" color="#5bbad5"> | |||
| <link rel="shortcut icon" href="/static/david/icons/favicon.ico"> | |||
| <meta name="apple-mobile-web-app-title" content="David Larlet"> | |||
| <meta name="application-name" content="David Larlet"> | |||
| <meta name="msapplication-TileColor" content="#da532c"> | |||
| <meta name="msapplication-config" content="/static/david/icons/browserconfig.xml"> | |||
| <meta name="theme-color" content="#f0f0ea"> | |||
| <!-- That good ol' feed, subscribe :p. --> | |||
| <link rel=alternate type="application/atom+xml" title=Feed href="/david/log/"> | |||
| {% block extra_head %}{% endblock extra_head %} | |||
| <style> | |||
| /* http://meyerweb.com/eric/tools/css/reset/ */ | |||
| html, body, div, span, | |||
| h1, h2, h3, h4, h5, h6, p, blockquote, pre, | |||
| a, abbr, address, big, cite, code, | |||
| del, dfn, em, img, ins, | |||
| small, strike, strong, tt, var, | |||
| dl, dt, dd, ol, ul, li, | |||
| fieldset, form, label, legend, | |||
| table, caption, tbody, tfoot, thead, tr, th, td, | |||
| article, aside, canvas, details, embed, | |||
| figure, figcaption, footer, header, hgroup, | |||
| menu, nav, output, ruby, section, summary, | |||
| time, mark, audio, video { | |||
| margin: 0; | |||
| padding: 0; | |||
| border: 0; | |||
| font-size: 100%; | |||
| font: inherit; | |||
| vertical-align: baseline; | |||
| } | |||
| /* HTML5 display-role reset for older browsers */ | |||
| article, aside, details, figcaption, figure, | |||
| footer, header, hgroup, menu, nav, section { display: block; } | |||
| body { line-height: 1; } | |||
| blockquote, q { quotes: none; } | |||
| blockquote:before, blockquote:after, | |||
| q:before, q:after { | |||
| content: ''; | |||
| content: none; | |||
| } | |||
| table { | |||
| border-collapse: collapse; | |||
| border-spacing: 0; | |||
| } | |||
| /* http://practicaltypography.com/equity.html */ | |||
| /* https://calendar.perfplanet.com/2016/no-font-face-bulletproof-syntax/ */ | |||
| /* https://www.filamentgroup.com/lab/js-web-fonts.html */ | |||
| @font-face { | |||
| font-family: 'EquityTextB'; | |||
| src: url('/static/david/css/fonts/Equity-Text-B-Regular-webfont.woff2') format('woff2'), | |||
| url('/static/david/css/fonts/Equity-Text-B-Regular-webfont.woff') format('woff'); | |||
| font-weight: 300; | |||
| font-style: normal; | |||
| font-display: swap; | |||
| } | |||
| @font-face { | |||
| font-family: 'EquityTextB'; | |||
| src: url('/static/david/css/fonts/Equity-Text-B-Italic-webfont.woff2') format('woff2'), | |||
| url('/static/david/css/fonts/Equity-Text-B-Italic-webfont.woff') format('woff'); | |||
| font-weight: 300; | |||
| font-style: italic; | |||
| font-display: swap; | |||
| } | |||
| @font-face { | |||
| font-family: 'EquityTextB'; | |||
| src: url('/static/david/css/fonts/Equity-Text-B-Bold-webfont.woff2') format('woff2'), | |||
| url('/static/david/css/fonts/Equity-Text-B-Bold-webfont.woff') format('woff'); | |||
| font-weight: 700; | |||
| font-style: normal; | |||
| font-display: swap; | |||
| } | |||
| {# Restricted to characters: | |||
| https://www.fontsquirrel.com/tools/webfont-generator | |||
| Protection: Web only | |||
| Custom subsetting: ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyzéàè!?().:,…«» œôêû-—0123456789ÉÀÊÈÔ’/·% | |||
| Em Square Value : 1000 | |||
| #} | |||
| @font-face { | |||
| font-family: 'ConcourseT3'; | |||
| src: url('/static/david/css/fonts/concourse_t3_regular-webfont-20190806.woff2') format('woff2'), | |||
| url('/static/david/css/fonts/concourse_t3_regular-webfont-20190806.woff') format('woff'); | |||
| font-weight: 300; | |||
| font-style: normal; | |||
| font-display: swap; | |||
| } | |||
| {% if has_code %} | |||
| @font-face { | |||
| font-family: 'TriplicateT4c'; | |||
| src: url('/static/david/css/fonts/Triplicate-T4-Code-Regular-webfont.woff2') format('woff2'), | |||
| url('/static/david/css/fonts/Triplicate-T4-Code-Regular-webfont.woff') format('woff'); | |||
| font-weight: 300; | |||
| font-style: normal; | |||
| font-display: swap; | |||
| } | |||
| {% endif %} | |||
| /* http://practice.typekit.com/lesson/caring-about-opentype-features/ */ | |||
| body { | |||
| /* http://www.cssfontstack.com/ Palatino 99% Win 86% Mac */ | |||
| font-family: "EquityTextB", Palatino, serif; | |||
| background-color: #f0f0ea; | |||
| color: #07486c; | |||
| font-kerning: normal; | |||
| -moz-osx-font-smoothing: grayscale; | |||
| -webkit-font-smoothing: subpixel-antialiased; | |||
| text-rendering: optimizeLegibility; | |||
| font-variant-ligatures: common-ligatures contextual; | |||
| font-feature-settings: "kern", "liga", "clig", "calt"; | |||
| } | |||
| pre, code, kbd, samp, var, tt { | |||
| font-family: 'TriplicateT4c', monospace; | |||
| } | |||
| em { | |||
| font-style: italic; | |||
| color: #323a45; | |||
| } | |||
| strong { | |||
| font-weight: bold; | |||
| color: black; | |||
| } | |||
| nav { | |||
| background-color: #323a45; | |||
| color: #f0f0ea; | |||
| display: flex; | |||
| justify-content: space-around; | |||
| padding: 1rem .5rem; | |||
| } | |||
| nav:last-child { | |||
| border-bottom: 1vh solid #2d7474; | |||
| } | |||
| nav a { | |||
| color: #f0f0ea; | |||
| } | |||
| nav abbr { | |||
| border-bottom: 1px dotted white; | |||
| } | |||
| h1 { | |||
| border-top: 1vh solid #2d7474; | |||
| border-bottom: .2vh dotted #2d7474; | |||
| background-color: #e3e1e1; | |||
| color: #323a45; | |||
| text-align: center; | |||
| padding: 5rem 0 4rem 0; | |||
| width: 100%; | |||
| font-family: 'ConcourseT3'; | |||
| display: flex; | |||
| flex-direction: column; | |||
| } | |||
| h1.single { | |||
| padding-bottom: 10rem; | |||
| } | |||
| h1 span { | |||
| position: absolute; | |||
| top: 1vh; | |||
| left: 20%; | |||
| line-height: 0; | |||
| } | |||
| h1 span a { | |||
| line-height: 1.7; | |||
| padding: 1rem 1.2rem .6rem 1.2rem; | |||
| border-radius: 0 0 6% 6%; | |||
| background: #2d7474; | |||
| font-size: 1.3rem; | |||
| color: white; | |||
| text-decoration: none; | |||
| } | |||
| h2 { | |||
| margin: 4rem 0 1rem; | |||
| border-top: .2vh solid #2d7474; | |||
| padding-top: 1vh; | |||
| } | |||
| h3 { | |||
| text-align: center; | |||
| margin: 3rem 0 .75em; | |||
| } | |||
| hr { | |||
| height: .4rem; | |||
| width: .4rem; | |||
| border-radius: .4rem; | |||
| background: #07486c; | |||
| margin: 2.5rem auto; | |||
| } | |||
| time { | |||
| display: bloc; | |||
| margin-left: 0 !important; | |||
| } | |||
| ul, ol { | |||
| margin: 2rem; | |||
| } | |||
| ul { | |||
| list-style-type: square; | |||
| } | |||
| a { | |||
| text-decoration-skip-ink: auto; | |||
| text-decoration-thickness: 0.05em; | |||
| text-underline-offset: 0.09em; | |||
| } | |||
| article { | |||
| max-width: 50rem; | |||
| display: flex; | |||
| flex-direction: column; | |||
| margin: 2rem auto; | |||
| } | |||
| article.single { | |||
| border-top: .2vh dotted #2d7474; | |||
| margin: -6rem auto 1rem auto; | |||
| background: #f0f0ea; | |||
| padding: 2rem; | |||
| } | |||
| article p:last-child { | |||
| margin-bottom: 1rem; | |||
| } | |||
| p { | |||
| padding: 0 .5rem; | |||
| margin-left: 3rem; | |||
| } | |||
| p + p, | |||
| figure + p { | |||
| margin-top: 2rem; | |||
| } | |||
| blockquote { | |||
| background-color: #e3e1e1; | |||
| border-left: .5vw solid #2d7474; | |||
| display: flex; | |||
| flex-direction: column; | |||
| align-items: center; | |||
| padding: 1rem; | |||
| margin: 1.5rem; | |||
| } | |||
| blockquote cite { | |||
| font-style: italic; | |||
| } | |||
| blockquote p { | |||
| margin-left: 0; | |||
| } | |||
| figure { | |||
| border-top: .2vh solid #2d7474; | |||
| background-color: #e3e1e1; | |||
| text-align: center; | |||
| padding: 1.5rem 0; | |||
| margin: 1rem 0 0; | |||
| font-size: 1.5rem; | |||
| width: 100%; | |||
| } | |||
| figure img { | |||
| max-width: 250px; | |||
| max-height: 250px; | |||
| border: .5vw solid #323a45; | |||
| padding: 1px; | |||
| } | |||
| figcaption { | |||
| padding: 1rem; | |||
| line-height: 1.4; | |||
| } | |||
| aside { | |||
| display: flex; | |||
| flex-direction: column; | |||
| background-color: #e3e1e1; | |||
| padding: 1rem 0; | |||
| border-bottom: .2vh solid #07486c; | |||
| } | |||
| aside p { | |||
| max-width: 50rem; | |||
| margin: 0 auto; | |||
| } | |||
| /* https://fvsch.com/code/css-locks/ */ | |||
| p, li, pre, code, kbd, samp, var, tt, time, details, figcaption { | |||
| font-size: 1rem; | |||
| line-height: calc( 1.5em + 0.2 * 1rem ); | |||
| } | |||
| h1 { | |||
| font-size: 1.9rem; | |||
| line-height: calc( 1.2em + 0.2 * 1rem ); | |||
| } | |||
| h2 { | |||
| font-size: 1.6rem; | |||
| line-height: calc( 1.3em + 0.2 * 1rem ); | |||
| } | |||
| h3 { | |||
| font-size: 1.35rem; | |||
| line-height: calc( 1.4em + 0.2 * 1rem ); | |||
| } | |||
| @media (min-width: 20em) { | |||
| /* The (100vw - 20rem) / (50 - 20) part | |||
| resolves to 0-1rem, depending on the | |||
| viewport width (between 20em and 50em). */ | |||
| p, li, pre, code, kbd, samp, var, tt, time, details, figcaption { | |||
| font-size: calc( 1rem + .6 * (100vw - 20rem) / (50 - 20) ); | |||
| line-height: calc( 1.5em + 0.2 * (100vw - 50rem) / (20 - 50) ); | |||
| margin-left: 0; | |||
| } | |||
| h1 { | |||
| font-size: calc( 1.9rem + 1.5 * (100vw - 20rem) / (50 - 20) ); | |||
| line-height: calc( 1.2em + 0.2 * (100vw - 50rem) / (20 - 50) ); | |||
| } | |||
| h2 { | |||
| font-size: calc( 1.5rem + 1.5 * (100vw - 20rem) / (50 - 20) ); | |||
| line-height: calc( 1.3em + 0.2 * (100vw - 50rem) / (20 - 50) ); | |||
| } | |||
| h3 { | |||
| font-size: calc( 1.35rem + 1.5 * (100vw - 20rem) / (50 - 20) ); | |||
| line-height: calc( 1.4em + 0.2 * (100vw - 50rem) / (20 - 50) ); | |||
| } | |||
| } | |||
| @media (min-width: 50em) { | |||
| /* The right part of the addition *must* be a | |||
| rem value. In this example we *could* change | |||
| the whole declaration to font-size:2.5rem, | |||
| but if our baseline value was not expressed | |||
| in rem we would have to use calc. */ | |||
| p, li, pre, code, kbd, samp, var, tt, time, details, figcaption { | |||
| font-size: calc( 1rem + .6 * 1rem ); | |||
| line-height: 1.5em; | |||
| } | |||
| p, li, pre, details { | |||
| margin-left: 3rem; | |||
| } | |||
| h1 { | |||
| font-size: calc( 1.9rem + 1.5 * 1rem ); | |||
| line-height: 1.2em; | |||
| } | |||
| h2 { | |||
| font-size: calc( 1.5rem + 1.5 * 1rem ); | |||
| line-height: 1.3em; | |||
| } | |||
| h3 { | |||
| font-size: calc( 1.35rem + 1.5 * 1rem ); | |||
| line-height: 1.4em; | |||
| } | |||
| figure img { | |||
| max-width: 500px; | |||
| max-height: 500px; | |||
| } | |||
| } | |||
| figure.unsquared { | |||
| margin-bottom: 1.5rem; | |||
| } | |||
| figure.unsquared img { | |||
| height: inherit; | |||
| } | |||
| {% if has_code %} | |||
| /* https://github.com/richleland/pygments-css */ | |||
| .codehilite{ | |||
| background-color: #fdf6e3; | |||
| margin: 1rem auto; | |||
| padding: 1rem; | |||
| overflow-x:auto; | |||
| box-shadow:inset 0 0 2px rgba(0,0,0,0.2) | |||
| } | |||
| .codehilite .t{color:#586e75} | |||
| .codehilite .w{color:#073642} | |||
| .codehilite .err{color:#cb4b16} | |||
| .codehilite .k{color:#859900} | |||
| .codehilite .kc{color:#2aa198} | |||
| .codehilite .kd{color:#268bd2} | |||
| .codehilite .kn{color:#b58900} | |||
| .codehilite .kp{color:#859900} | |||
| .codehilite .kr{color:#073642} | |||
| .codehilite .kt{color:#b58900} | |||
| .codehilite .n{color:#586e75} | |||
| .codehilite .na{color:#2aa198} | |||
| .codehilite .nb{color:#268bd2} | |||
| .codehilite .nc{color:#268bd2} | |||
| .codehilite .ne{color:#cb4b16} | |||
| .codehilite .no{color:#2aa198} | |||
| .codehilite .nd{color:#2aa198} | |||
| .codehilite .ni{color:#2aa198;font-weight:bold} | |||
| .codehilite .nf{color:#268bd2} | |||
| .codehilite .nn{color:#586e75} | |||
| .codehilite .nt{color:#2aa198;font-weight:bold} | |||
| .codehilite .nv{color:#cb4b16} | |||
| .codehilite .b{color:#859900} | |||
| .codehilite .bp{color:#586e75} | |||
| .codehilite .v{color:#586e75} | |||
| .codehilite .vc{color:#586e75} | |||
| .codehilite .vg{color:#268bd2} | |||
| .codehilite .vi{color:#268bd2} | |||
| .codehilite .m{color:#268bd2} | |||
| .codehilite .mf{color:#268bd2} | |||
| .codehilite .mh{color:#268bd2} | |||
| .codehilite .mi{color:#268bd2} | |||
| .codehilite .mo{color:#268bd2} | |||
| .codehilite .s{color:#2aa198} | |||
| .codehilite .sb{color:#2aa198} | |||
| .codehilite .sc{color:#2aa198} | |||
| .codehilite .sd{color:#2aa198} | |||
| .codehilite .s2{color:#2aa198} | |||
| .codehilite .se{color:#cb4b16} | |||
| .codehilite .sh{color:#2aa198} | |||
| .codehilite .si{color:#cb4b16} | |||
| .codehilite .sx{color:#2aa198} | |||
| .codehilite .sr{color:#cb4b16} | |||
| .codehilite .s1{color:#2aa198} | |||
| .codehilite .ss{color:#cb4b16} | |||
| .codehilite .il{color:#268bd2} | |||
| .codehilite .o{color:#586e75} | |||
| .codehilite .ow{color:#859900} | |||
| .codehilite .p{color:#586e75} | |||
| .codehilite .c{color:#93a1a1;font-style:italic} | |||
| .codehilite .cm{color:#93a1a1} | |||
| .codehilite .cp{color:#93a1a1} | |||
| .codehilite .c1{color:#93a1a1} | |||
| .codehilite .cs{color:#93a1a1} | |||
| .codehilite .hll{background-color:#dc322f} | |||
| .codehilite .g{color:#586e75} | |||
| .codehilite .gd{color:#586e75} | |||
| .codehilite .ge{font-style:italic} | |||
| .codehilite .gr{color:#586e75} | |||
| .codehilite .gh{color:#586e75;font-weight:bold} | |||
| .codehilite .gi{color:#586e75} | |||
| .codehilite .go{color:#586e75} | |||
| .codehilite .gp{color:#586e75} | |||
| .codehilite .gs{font-weight:bold} | |||
| .codehilite .gu{color:#586e75;font-weight:bold} | |||
| .codehilite .gt{color:#586e75} | |||
| {% endif %} | |||
| @media print { | |||
| body { font-size: 100%; } | |||
| a:after { content: " (" attr(href) ")"; } | |||
| a, a:link, a:visited, a:after { | |||
| text-decoration: underline; | |||
| text-shadow: none !important; | |||
| background-image: none !important; | |||
| background: white; | |||
| color: black; | |||
| } | |||
| abbr[title] { border-bottom: 0; } | |||
| abbr[title]:after { content: " (" attr(title) ")"; } | |||
| img { page-break-inside: avoid; } | |||
| @page { margin: 2cm .5cm; } | |||
| h1, h2, h3 { page-break-after: avoid; } | |||
| p3 { orphans: 3; widows: 3; } | |||
| img { | |||
| max-width: 250px !important; | |||
| max-height: 250px !important; | |||
| } | |||
| nav, aside { display: none; } | |||
| } | |||
| ul.with_columns { | |||
| column-count: 1; | |||
| } | |||
| @media (min-width: 20em) { | |||
| ul.with_columns { | |||
| column-count: 2; | |||
| } | |||
| } | |||
| @media (min-width: 50em) { | |||
| ul.with_columns { | |||
| column-count: 3; | |||
| } | |||
| } | |||
| ul.with_two_columns { | |||
| column-count: 1; | |||
| } | |||
| @media (min-width: 20em) { | |||
| ul.with_two_columns { | |||
| column-count: 1; | |||
| } | |||
| } | |||
| @media (min-width: 50em) { | |||
| ul.with_two_columns { | |||
| column-count: 2; | |||
| } | |||
| } | |||
| .gallery { | |||
| display: flex; | |||
| flex-wrap: wrap; | |||
| justify-content: space-around; | |||
| } | |||
| .gallery figure img { | |||
| margin-left: 1rem; | |||
| margin-right: 1rem; | |||
| } | |||
| .gallery figure figcaption { | |||
| font-family: 'ConcourseT3' | |||
| } | |||
| footer { | |||
| font-family: 'ConcourseT3'; | |||
| display: flex; | |||
| flex-direction: column; | |||
| border-top: 3px solid white; | |||
| padding: 4rem 0; | |||
| background-color: #07486c; | |||
| color: white; | |||
| } | |||
| footer > * { | |||
| max-width: 50rem; | |||
| margin: 0 auto; | |||
| } | |||
| footer a { | |||
| color: #f1c40f; | |||
| } | |||
| footer .avatar { | |||
| width: 200px; | |||
| height: 200px; | |||
| border-radius: 50%; | |||
| float: left; | |||
| -webkit-shape-outside: circle(); | |||
| shape-outside: circle(); | |||
| margin-right: 2rem; | |||
| padding: 2px 5px 5px 2px; | |||
| background: white; | |||
| border-left: 1px solid #f1c40f; | |||
| border-top: 1px solid #f1c40f; | |||
| border-right: 5px solid #f1c40f; | |||
| border-bottom: 5px solid #f1c40f; | |||
| } | |||
| </style> | |||
| {% block content %}{% endblock content %} | |||
| {% block nav %}{% endblock nav %} | |||
| <footer> | |||
| <div> | |||
| <img src="/static/david/david-larlet-avatar.jpg" loading="lazy" class="avatar" width="200" height="200"> | |||
| <p> | |||
| Bonjour/Hi! | |||
| Je suis <a href="/david/" title="Profil public">David Larlet</a>, je vis actuellement à Montréal et j’alimente cet espace depuis 15 ans. <br> | |||
| Si tu as apprécié cette lecture, n’hésite pas à poursuivre ton exploration. Par exemple via les <a href="/david/blog/" title="Expériences bienveillantes">réflexions bimestrielles</a>, la <a href="/david/stream/2019/" title="Pensées (dés)articulées">veille hebdomadaire</a> ou en t’abonnant au <a href="/david/log/" title="S’abonner aux publications via RSS">flux RSS</a> (<a href="/david/blog/2019/flux-rss/" title="Tiens c’est quoi un flux RSS ?">so 2005</a>). | |||
| </p> | |||
| <p> | |||
| Je m’intéresse à la place que je peux avoir dans ce monde. En tant qu’humain, en tant que membre d’une famille et en tant qu’associé d’une coopérative. De temps en temps, je fais aussi des <a href="https://github.com/davidbgk" title="Principalement sur Github mais aussi ailleurs">trucs techniques</a>. Et encore plus rarement, <a href="/david/talks/" title="En ce moment je laisse plutôt la place aux autres">j’en parle</a>. | |||
| </p> | |||
| {% if note_list %} | |||
| <p> | |||
| Les dernières publications hebdomadaires sont : | |||
| </p> | |||
| <ul class="with_columns"> | |||
| {% for note in note_list %} | |||
| <li> | |||
| <a href="{{ note.url }}">{{ note.title }}</a> | |||
| </li> | |||
| {% endfor %} | |||
| </ul> | |||
| {% endif %} | |||
| <p> | |||
| Voici quelques articles choisis : | |||
| <a href="/david/blog/2019/faire-equipe/" title="Accéder à l’article complet">Faire équipe</a>, | |||
| <a href="/david/blog/2018/bivouac-automnal/" title="Accéder à l’article complet">Bivouac automnal</a>, | |||
| <a href="/david/blog/2018/commodite-effondrement/" title="Accéder à l’article complet">Commodité et effondrement</a>, | |||
| <a href="/david/blog/2017/donnees-communs/" title="Accéder à l’article complet">Des données aux communs</a>, | |||
| <a href="/david/blog/2016/accompagner-enfant/" title="Accéder à l’article complet">Accompagner un enfant</a>, | |||
| <a href="/david/blog/2016/senior-developer/" title="Accéder à l’article complet">Senior developer</a>, | |||
| <a href="/david/blog/2016/illusion-sociale/" title="Accéder à l’article complet">L’illusion sociale</a>, | |||
| <a href="/david/blog/2016/instantane-scopyleft/" title="Accéder à l’article complet">Instantané Scopyleft</a>, | |||
| <a href="/david/blog/2016/enseigner-web/" title="Accéder à l’article complet">Enseigner le Web</a>, | |||
| <a href="/david/blog/2016/simplicite-defaut/" title="Accéder à l’article complet">Simplicité par défaut</a>, | |||
| <a href="/david/blog/2016/minimalisme-esthetique/" title="Accéder à l’article complet">Minimalisme et esthétique</a>, | |||
| <a href="/david/blog/2014/un-web-omni-present/" title="Accéder à l’article complet">Un web omni-présent</a>, | |||
| <a href="/david/blog/2014/manifeste-developpeur/" title="Accéder à l’article complet">Manifeste de développeur</a>, | |||
| <a href="/david/blog/2013/confort-convivialite/" title="Accéder à l’article complet">Confort et convivialité</a>, | |||
| <a href="/david/blog/2013/testament-numerique/" title="Accéder à l’article complet">Testament numérique</a>, | |||
| et <a href="/david/blog/" title="Accéder aux archives">bien d’autres…</a> | |||
| </p> | |||
| <p> | |||
| On peut <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">échanger par courriel</a>. Si éventuellement tu souhaites que l’on travaille ensemble, tu devrais commencer par consulter le <a href="http://larlet.com">profil dédié à mon activité professionnelle</a> et/ou contacter directement <a href="http://scopyleft.fr/">scopyleft</a>, la <abbr title="Société coopérative et participative">SCOP</abbr> dont je fais partie depuis six ans. Je recommande au préalable de lire <a href="/david/blog/2018/cout-site/" title="Attention ce qui va suivre peut vous choquer">combien coûte un site</a> et pourquoi je suis plutôt favorable à une <a href="/david/pro/devis/" title="Discutons-en !">non-demande de devis</a>. | |||
| </p> | |||
| <p> | |||
| Je ne traque pas ta navigation mais mon | |||
| <abbr title="Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33.184162340">hébergeur</abbr> | |||
| conserve des logs d’accès. | |||
| </p> | |||
| </div> | |||
| </footer> | |||
| <script type="text/javascript"> | |||
| ;(_ => { | |||
| const jumper = document.getElementById('jumper') | |||
| jumper.addEventListener('click', e => { | |||
| e.preventDefault() | |||
| const anchor = e.target.getAttribute('href') | |||
| const targetEl = document.getElementById(anchor.substring(1)) | |||
| targetEl.scrollIntoView({behavior: 'smooth'}) | |||
| }) | |||
| })() | |||
| </script> | |||
| {% block extrajs %}{% endblock %} | |||
+ 36
- 0
templates/base_2020.html
View File
| @@ -0,0 +1,36 @@ | |||
| <!doctype html><!-- This is a valid HTML5 document. --> | |||
| <!-- Screen readers, SEO, extensions and so on. --> | |||
| <html lang="{% block lang %}fr{% endblock lang %}"> | |||
| <!-- Has to be within the first 1024 bytes, hence before the <title> | |||
| See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset --> | |||
| <meta charset="utf-8"> | |||
| <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 --> | |||
| <!-- The viewport meta is quite crowded and we are responsible for that. | |||
| See: https://codepen.io/tigt/post/meta-viewport-for-2015 --> | |||
| <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1,shrink-to-fit=no"> | |||
| <!-- Required to make a valid HTML5 document. --> | |||
| <title>{% block title %}{% endblock %} — David Larlet</title> | |||
| <!-- Lightest blank gif, avoids an extra query to the server. --> | |||
| <link rel="icon" href="data:;base64,iVBORw0KGgo="> | |||
| <!-- Thank you Florens! --> | |||
| <link rel="stylesheet" href="/static/david/css/style_2020-01-06.css"> | |||
| <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. --> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_regular.woff2" as="font" type="font/woff2" crossorigin> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_bold.woff2" as="font" type="font/woff2" crossorigin> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_italic.woff2" as="font" type="font/woff2" crossorigin> | |||
| {% block extra_head %}{% endblock %} | |||
| <body class="remarkdown h1-underline h2-underline hr-center ul-star pre-tick"> | |||
| {% block content %}{% endblock content %} | |||
| <hr> | |||
| <nav> | |||
| <a href="/david/" title="Aller à l’accueil">🏠</a> • | |||
| <a href="/david/log/" title="Accès au flux RSS">🤖</a> • | |||
| <a href="http://larlet.com" title="Go to my English profile">🇨🇦</a> • | |||
| <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">📮</a> • | |||
| <abbr title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340">🧚</abbr> | |||
| </nav> | |||
| </body> | |||
| </html> | |||
+ 4
- 23
templates/cache_archives.html
View File
| @@ -1,31 +1,12 @@ | |||
| {% extends "base_2019.html" %} | |||
| {% extends "base_2020.html" %} | |||
| {% block title %}Articles archivés{% endblock %} | |||
| {% block extra_head %} | |||
| <meta name="robots" content="noindex, nofollow"> | |||
| <!-- Canonical URL for SEO purposes --> | |||
| <link rel="canonical" href="https://larlet.fr/david/cache/"> | |||
| {% endblock %} | |||
| {% block content %} | |||
| <h1> | |||
| <span><a id="jumper" href="#jumpto" title="Un peu perdu ?">?</a></span> | |||
| Articles archivés | |||
| <time>Pour la pérennité des contenus liés. Non-indexé, retrait sur simple email.</time> | |||
| </h1> | |||
| <section> | |||
| <h1>Articles archivés</h1> | |||
| <article> | |||
| <ul> | |||
| {% for cache in caches %} | |||
| <li><a href="/david/cache/{{ cache.hash_url }}/" title="Accès à l'article caché">{{ cache.title }}</a> (<a href="{{ cache.url }}" title="Accès à l'article original">original</a>)</li> | |||
| {% for cache in cache_list %} | |||
| <li><a href="/david/cache/2020/{{ cache.hash_url }}/" title="Accès à l'article caché">{{ cache.title }}</a> (<a href="{{ cache.url }}" title="Accès à l'article original">original</a>)</li> | |||
| {% endfor %} | |||
| </ul> | |||
| </article> | |||
| </section> | |||
| {% endblock content %} | |||
| {% block nav %} | |||
| <nav id="jumpto"> | |||
| <p> | |||
| <a href="/david/blog/">Accueil du blog</a> | | |||
| <a href="/david/stream/2019/">Accueil du flux</a> | |||
| </p> | |||
| </nav> | |||
| {% endblock nav %} | |||
+ 6
- 21
templates/cache_article.html
View File
| @@ -1,4 +1,4 @@ | |||
| {% extends "base_2019.html" %} | |||
| {% extends "base_2020.html" %} | |||
| {% block title %}{{ cache.title }} (archive){% endblock %} | |||
| {% block extra_head %} | |||
| <meta name="robots" content="noindex, nofollow"> | |||
| @@ -7,24 +7,9 @@ | |||
| <link rel="canonical" href="{{ cache.url }}"> | |||
| {% endblock %} | |||
| {% block content %} | |||
| <h1> | |||
| <span><a id="jumper" href="#jumpto" title="Un peu perdu ?">?</a></span> | |||
| {{ cache.title }} (archive) | |||
| <time>Pour la pérennité des contenus liés. Non-indexé, retrait sur simple email.</time> | |||
| </h1> | |||
| <section> | |||
| <article> | |||
| <h3><a href="{{ cache.url }}">Source originale du contenu</a></h3> | |||
| {{ cache.content }} | |||
| </article> | |||
| </section> | |||
| <article> | |||
| <h1>{{ cache.title }}</h1> | |||
| <h2><a href="{{ cache.url }}">Source originale du contenu</a></h2> | |||
| {{ cache.content }} | |||
| </article> | |||
| {% endblock content %} | |||
| {% block nav %} | |||
| <nav id="jumpto"> | |||
| <p> | |||
| <a href="/david/blog/">Accueil du blog</a> | | |||
| <a href="{{ cache.url }}">Source originale</a> | | |||
| <a href="/david/stream/2019/">Accueil du flux</a> | |||
| </p> | |||
| </nav> | |||
| {% endblock nav %} | |||
Loading…