Nathan Lambert  /  Work  /  Writing  /  Learning  /  Life  / 

22 August 2020

Writing Regularly

Philosophy of writing

I like to write about my ideas to learn, document, and explore. Writing is a slow progress of permanently distilling one's self and work in a semi-permanent manner. I like to write about artificial intelligence broadly, with a focus on robotics and a theme of understanding trends that'll help make robotics accessible and equitable.

Also, I am passionate about human optimization, more pure math, technology, and more. This will all come in eventually. Writing is a process of defining yourself and your vision for the future.

Public science

My writing is also greatly motivated by my desire for public science. I think the world has so much to gain by seeing into what the world’s best scientists are thinking about. While I may not be the best scientist, I think what I work on is valuable and of high quality.

My plan is to publish summaries of particularly impactful conversations, conference proceedings, course notes, research directions, and more. You get the point — it helps me to write, and I know people are learning about the area.

Getting going with writing

Now that I have a workflow, I expect to be writing multiple times a week. It is meditative and productive, what more do you need?

The app I found

The primary reason I wanted a dedicated writing app was to not write in the Sub-stack editor (and second order, the Medium editor, which I actually think is better1). Some other things that can help with an app:

  • automatic cloud storage.
  • cross device support.
  • fun tools (that I ended up making use of), such as spell-check that is missing when making a website.

I have signed up for Ulysses (student discount!) and don’t regret it at all.

Static Site Mayhem

In wanting to get my content online, I was floating around the options of pure html static sites, maybe an RSS feed, something like Jekyll — there really are too many options. In the end, having a twitter feed + static pages is all you need.

It turns out Ulysses can take active code blocks (useful for when I want to use mathjax to write LateX in HTML code) and stitch them together for a function HTML export.

My specific workflow

Yes, this is for my reference too. For new static posts:

  1. Write in markdown in the Ulysses app.
  2. Export header + post + footer to html. Move the file to my git repository for the webpage.
  3. Update share links / page title in index.html file.
  4. Change file name. Add /html, /table, /body at end.
  5. Update the archive and recent posts on my website.
  6. Git add, commit, and push.
  7. Sometimes Tweet. It takes a minute or two for Github pages to update.

For posts on Democratizing Automation, it is much simpler:

  1. Write in my template with headings, share text, and logos.
  2. Copy text to the Substack editor2.

Some resources

These are files that I use along the way.

My header

References my css style for a writing folder, a couple other links you would need to change.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
	<meta name=viewport content=“width=900>
	<meta name="generator" content="HTML Tidy for Linux/x86 (vers 11 February 2007), see www.w3.org">
	<link rel="stylesheet" href="../../assets/css/style.css">
	<!-- <style type="text/css"> -->
	<!-- UPDATE THE TITLE-->
	<title>Nathan Lambert's Blog</title>
	<!-- UPDATE THE TITLE-->

</head>

<body>
<table width="800" border="0" align="center" cellspacing="0" cellpadding="0">
    <tr>
        <td>
            <table width="100%" align="center" border="0" cellspacing="0" cellpadding="00">
                <tr>
                    <td width="100%" valign="middle">
                        <a href="../../index.html">Nathan's </a>
                        <!-- <h1> Nathan Lambert</h1> -->

                        &nbsp/&nbsp
                        <a href="../../work.html">Work</a> &nbsp/&nbsp
                        <a href="../../writing.html">Writing</a> &nbsp/&nbsp
                        <a href="../../learning.html">Learning</a> &nbsp/&nbsp
                        <a href="../../life.html"> Life </a> &nbsp/&nbsp
                        <!-- UPDATE THE DATE-->
                        <!-- UPDATE THE DATE-->

            </table>

            <hr>

My footer

Simple share buttons, insert some text: <INSERT_TITLE>, <INSERT_URL>, <INSERT_SUBTITLE>.

<hr>
<center>
	<a href="https://twitter.com/share?url=<INSERT_URL>&text=<INSERT_TITLE>via=<@natolambert>" class="share-btn twitter">Twitter</a>
	<a href="https://www.facebook.com/sharer/sharer.php?u=<INSERT_URL>" class="share-btn facebook">Facebook</a>
	<a href="https://reddit.com/submit?url=<INSERT_URL>&title=<INSERT_TITLE>" class="share-btn reddit">Reddit</a>
	<a href="https://news.ycombinator.com/submitlink?u=<INSERT_URL>&t=<INSERT_TITLE>" class="share-btn hackernews">Hacker News</a>
	<a href="https://www.linkedin.com/shareArticle?url=<INSERT_URL>&title=<INSERT_TITLE>&summary=<INSERT_SUBTITLE>&source=<INSERT_URL>" class="share-btn linkedin">LinkedIn</a>
	<a href="mailto:you?subject=New%20from%20natolambert&body=<INSERT_URL>%0D%0A%0D%0A" class="share-btn email">Email</a>
<br>
<h4>Like this? </h4>
</center>

</body>

Create a table of contents

Put this at the top of a page to create a table of contents below it from markdown, for HTML (doesn’t work perfect with PDF).

### Table of Contents
 <div id="toc" class="toc">
 </div>
----
 <div class="contents" id="contents">
%%
%% This TOC sheet can be added just after frontmatter as it is.
%% It can also be inserted anywhere in the  document structure,
%% but then make sure that the <div id="contents"> tag is inserted above first heading to be included in the TOC.
%% Works with any of Ulysses HTML-styles and preview, but not with Rich Text-styles.
%%
%% If you want heading links without decoration (underlined),
%% add following section to your UL style sheet of choice,
%% or just uncomment this block: (remove <!--  and -->)

 <style type="text/css">
 h1 a, h2 a, h3 a, h4 a, h5 a, h6 a  {
 	text-decoration: none;
 	 color:black; }
 </style>

%%
%% If you need valid XHTML, a </div> closing tag should be put at the end of last sheet.
%% But this script works also fine without it.
%%
%% Variables: maxLevel;  listType "ul" or "ol"; tocTag "li" or "p";
%% can be changed to modify look and feel of the TOC (See in script below)
%% You can also add styles for: ul.toc, ol.toc, li.toc, and p.toc in CSS style sheet.
%%
%% Added style for multi level numbering of <ol><li> tags
%% Also CSS for auto numbering of headings corresponding to TOC
%%
%% If you want multilevel numbering of TOC, this can be added to your CSS-style sheet.
%% It is included here for quick demo purpose only, and will not work with all browsers:
 <!-- CSS for auto multi level TOC numbering : -->
 <style type="text/css">
 /* hide original list counter */
 ol li {display:block;}
 /* OR */
 /* ol {list-style:none;}  */

 ol > li:first-child {counter-reset: item;} /* reset counter */
 ol > li {counter-increment: item;} /* increment counter */
 ol > li:before {content:counters(item, ".") ". "; font-weight:normal;} /* print counter */
 /* From: http://stackoverflow.com/questions/7791071 */
 </style>
%%
%% If you want nubered headings, this can be added to your CSS-style sheet.
%% It is included here for quick demo purpose only, and will not work with all browsers:
 <!-- CSS for auto numbering of headings:
 <style type="text/css">
 div.contents {counter-reset: h1c;}
   h1 {counter-reset: h2c;}
   h2 {counter-reset: h3c;}
   h3 {counter-reset: h4c;}
   h4 {counter-reset: h5c;}

   div.contents h1:before {counter-increment: h1c; content: counter(h1c) ". ";}
   div.contents h2:before {counter-increment: h2c; content: counter(h1c) "." counter(h2c) ". ";}
   div.contents h3:before {counter-increment: h3c; content: counter(h1c) "." counter(h2c) "." counter(h3c) ". ";}
   div.contents h4:before {counter-increment: h4c; content: counter(h1c) "." counter(h2c) "." counter(h3c) "." counter(h4c) ". ";}

   /* From: http://philarcher.org/diary/2013/headingnumbers, and slightly modified. */
 </style>  -->
%%
%% JavaScript generating TOC "on the fly":
 <script type="text/javascript" language="javascript">
 <!-- // JavaScript-code in XML comment block, to parse as valid XML.
      // </div>-tag is then also needed at the end of last sheet!
 window.onload = function () {
     var maxLevel = 3;  // Max Header level in TOC
     var listType = "ol";  // Use: "ul" or "ol" only! (ul = bullets, ol = numbers)
     var tocTag ="li";   // Use: "li" or "p" only! (p = plain TOC, no bullets or numbers)
     var toc = "";
     var level = 0;
     var tocId = 0;
     document.getElementById("contents").innerHTML =
         document.getElementById("contents").innerHTML.replace(
         /<h(\d)>(.+?)<\/h(\d)>/gi,
         function (str, openLevel, titleText, closeLevel) {
             if (openLevel != closeLevel) {
                 return str;
             }

 	if (openLevel > maxLevel) {
                   return str;
              }

             if (openLevel > level) {
                 toc += (new Array(openLevel - level + 1)).join("<"+ listType +" class='toc'>");
             }
             else if (openLevel < level) {
                 toc += (new Array(level - openLevel + 1)).join("</"+ listType +">");
             }

             level = parseInt(openLevel);
             tocId++;
             var anchor = "h-id-" + tocId;
             var tocAnchor = "toc-" + tocId;

             toc += "<"+tocTag+" class='toc'><a href=\"#" + anchor
                    + "\" id='" + tocAnchor + "'>"
                    + titleText + "</a></"+tocTag+">";

             return "<h" + openLevel + ">"
                 + "<a id=\"" + anchor + "\" href='#" + tocAnchor + "'>"
                 + titleText + "</a></h" + closeLevel + ">";
         }
     );

     if (level) {
         toc += (new Array(level + 1)).join("</ul>");
     }

     document.getElementById("toc").innerHTML += toc;
 };
 //-->
 </script>
%% Script copied from:
%% http://stackoverflow.com/questions/187619
%% answer at Oct 9 2008 at 15:59 by:
%% http://stackoverflow.com/users/23501/ates-goral
%% Modified by RoyRogers56, 2014-05-19


Like this?

  1. Does anyone know how medium gets nice embedded links? I am guessing it is some front end web dev. ↩︎
  2. The Substack editor lets you copy in markdown, but you can only copy out plain text. Medium is similar, but slightly better (and you can export all your Medium posts as html which you can convert to markdown). ↩︎