Starting Writing Regularly
My comments to people who say they want to try out blogging. It’s worth it, but a steep learning curve. And my workflow.
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.
What should I write about?
People always ask me “what should I write about?” Some of the wrong answers I have encountered (for myself) are:
- What I think people want to read (unsustainable)
- What I am an expert in (sometimes overlaps)
- What other people write about
Some of the correct reasons I have found are:
- What do I want to learn about
- What do I have to distill my ideas about
- What is complicated to explain in a stream of thoughts
Most of my ideas end up being from points of conversations I think could be interesting to explore further.
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 better). 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:
- Write in markdown in the Ulysses app.
- Export header + post + footer to html. Move the file to my git repository for the webpage.
- Update share links and page title in
index.html
file. - Delete pre-generated header from Ulysses when using scripts and stuff in the article
- Change file name. Add
</html>
,</table>
,</body>
on last line of file (for perfectionist, and makes sure some elements have the right width). - Update the archive and recent posts on my website.
- Git add, commit, and push.
- Sometimes Tweet. It takes a minute or two for Github pages to update.
For posts on Democratizing Automation, it is much simpler:
- Write in my template with headings, share text, and logos.
- Copy text to the Substack editor.
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"> -->
<link rel="icon" type="image/png" href="../../assets/img/icon.png">
<!-- 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> -->
 / 
<a href="../../work.html">Work</a>  / 
<a href="../../writing.html">Writing</a>  / 
<a href="../../learning.html">Learning</a>  / 
<a href="../../life.html"> Life </a>  / 
<!-- 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