Upload starter template
This commit is contained in:
Timothy Lin
38
data/blog/code-sample.md
Normal file
38
data/blog/code-sample.md
Normal file
@ -0,0 +1,38 @@
|
||||
---
|
||||
title: Sample .md file
|
||||
date: '2016-03-08'
|
||||
tags: ['markdown', 'code', 'features']
|
||||
draft: false
|
||||
summary: Example of a markdown file with code blocks and syntax highlighting
|
||||
---
|
||||
|
||||
A sample post with markdown.
|
||||
|
||||
## Inline Highlighting
|
||||
|
||||
Sample of inline highlighting `sum = parseInt(num1) + parseInt(num2)`
|
||||
|
||||
## Code Blocks
|
||||
|
||||
Some Javascript code
|
||||
|
||||
```javascript
|
||||
var num1, num2, sum
|
||||
num1 = prompt("Enter first number")
|
||||
num2 = prompt("Enter second number")
|
||||
sum = parseInt(num1) + parseInt(num2) // "+" means "add"
|
||||
alert("Sum = " + sum) // "+" means combine into a string
|
||||
```
|
||||
|
||||
Some Python code 🐍
|
||||
|
||||
```python
|
||||
def fib():
|
||||
a, b = 0, 1
|
||||
while True: # First iteration:
|
||||
yield a # yield 0 to start with and then
|
||||
a, b = b, a + b # a will now be 1, and b will also be 1, (0 + 1)
|
||||
|
||||
for index, fibonacci_number in zip(range(10), fib()):
|
||||
print('{i:3}: {f:3}'.format(i=index, f=fibonacci_number))
|
||||
```
|
||||
141
data/blog/deriving-ols-estimator.mdx
Normal file
141
data/blog/deriving-ols-estimator.mdx
Normal file
@ -0,0 +1,141 @@
|
||||
---
|
||||
title: Deriving the OLS Estimator
|
||||
date: '2019-11-16'
|
||||
tags: ['next js', 'math', 'ols']
|
||||
draft: false
|
||||
summary: 'How to derive the OLS Estimator with matrix notation and a tour of math typesetting using markdown with the help of KaTeX.'
|
||||
---
|
||||
|
||||
# Introduction
|
||||
|
||||
Parsing and display of math equations is included in this blog template. Parsing of math is enabled by `remark-math` and `rehype-katex`.
|
||||
KaTeX and its associated font is included in `_document.js` so feel free to use it in any pages.
|
||||
^[For the full list of supported TeX functions, check out the [KaTeX documentation](https://katex.org/docs/supported.html)]
|
||||
|
||||
Inline math symbols can be included by enclosing the term between the `$` symbol.
|
||||
|
||||
Math code blocks is denoted by `$$`.
|
||||
|
||||
The dollar signal displays without issue since only text without space and between two `$` signs are considered as math symbols.[^2]
|
||||
|
||||
Inline or manually enumerated footnotes are also supported. Click on the links above to see them in action.
|
||||
|
||||
[^2]: Here's $10 and $20.
|
||||
|
||||
# Deriving the OLS Estimator
|
||||
|
||||
Using matrix notation, let $n$ denote the number of observations and $k$ denote the number of regressors.
|
||||
|
||||
The vector of outcome variables $\mathbf{Y}$ is a $n \times 1$ matrix,
|
||||
|
||||
```tex
|
||||
\mathbf{Y} = \left[\begin{array}
|
||||
{c}
|
||||
y_1 \\
|
||||
. \\
|
||||
. \\
|
||||
. \\
|
||||
y_n
|
||||
\end{array}\right]
|
||||
```
|
||||
|
||||
$$
|
||||
\mathbf{Y} = \left[\begin{array}
|
||||
{c}
|
||||
y_1 \\
|
||||
. \\
|
||||
. \\
|
||||
. \\
|
||||
y_n
|
||||
\end{array}\right]
|
||||
$$
|
||||
|
||||
The matrix of regressors $\mathbf{X}$ is a $n \times k$ matrix (or each row is a $k \times 1$ vector),
|
||||
|
||||
```latex
|
||||
\mathbf{X} = \left[\begin{array}
|
||||
{ccccc}
|
||||
x_{11} & . & . & . & x_{1k} \\
|
||||
. & . & . & . & . \\
|
||||
. & . & . & . & . \\
|
||||
. & . & . & . & . \\
|
||||
x_{n1} & . & . & . & x_{nn}
|
||||
\end{array}\right] =
|
||||
\left[\begin{array}
|
||||
{c}
|
||||
\mathbf{x}'_1 \\
|
||||
. \\
|
||||
. \\
|
||||
. \\
|
||||
\mathbf{x}'_n
|
||||
\end{array}\right]
|
||||
```
|
||||
|
||||
$$
|
||||
\mathbf{X} = \left[\begin{array}
|
||||
{ccccc}
|
||||
x_{11} & . & . & . & x_{1k} \\
|
||||
. & . & . & . & . \\
|
||||
. & . & . & . & . \\
|
||||
. & . & . & . & . \\
|
||||
x_{n1} & . & . & . & x_{nn}
|
||||
\end{array}\right] =
|
||||
\left[\begin{array}
|
||||
{c}
|
||||
\mathbf{x}'_1 \\
|
||||
. \\
|
||||
. \\
|
||||
. \\
|
||||
\mathbf{x}'_n
|
||||
\end{array}\right]
|
||||
$$
|
||||
|
||||
The vector of error terms $\mathbf{U}$ is also a $n \times 1$ matrix.
|
||||
|
||||
At times it might be easier to use vector notation. For consistency I will use the bold small x to denote a vector and capital letters to denote a matrix. Single observations are denoted by the subscript.
|
||||
|
||||
## Least Squares
|
||||
|
||||
**Start**:
|
||||
$$y_i = \mathbf{x}'_i \beta + u_i$$
|
||||
|
||||
**Assumptions**:
|
||||
|
||||
1. Linearity (given above)
|
||||
2. $E(\mathbf{U}|\mathbf{X}) = 0$ (conditional independence)
|
||||
3. rank($\mathbf{X}$) = $k$ (no multi-collinearity i.e. full rank)
|
||||
4. $Var(\mathbf{U}|\mathbf{X}) = \sigma^2 I_n$ (Homoskedascity)
|
||||
|
||||
**Aim**:
|
||||
Find $\beta$ that minimises sum of squared errors:
|
||||
|
||||
$$
|
||||
Q = \sum_{i=1}^{n}{u_i^2} = \sum_{i=1}^{n}{(y_i - \mathbf{x}'_i\beta)^2} = (Y-X\beta)'(Y-X\beta)
|
||||
$$
|
||||
|
||||
**Solution**:
|
||||
Hints: $Q$ is a $1 \times 1$ scalar, by symmetry $\frac{\partial b'Ab}{\partial b} = 2Ab$.
|
||||
|
||||
Take matrix derivative w.r.t $\beta$:
|
||||
|
||||
```tex
|
||||
\begin{aligned}
|
||||
\min Q & = \min_{\beta} \mathbf{Y}'\mathbf{Y} - 2\beta'\mathbf{X}'\mathbf{Y} +
|
||||
\beta'\mathbf{X}'\mathbf{X}\beta \\
|
||||
& = \min_{\beta} - 2\beta'\mathbf{X}'\mathbf{Y} + \beta'\mathbf{X}'\mathbf{X}\beta \\
|
||||
\text{[FOC]}~~~0 & = - 2\mathbf{X}'\mathbf{Y} + 2\mathbf{X}'\mathbf{X}\hat{\beta} \\
|
||||
\hat{\beta} & = (\mathbf{X}'\mathbf{X})^{-1}\mathbf{X}'\mathbf{Y} \\
|
||||
& = (\sum^{n} \mathbf{x}_i \mathbf{x}'_i)^{-1} \sum^{n} \mathbf{x}_i y_i
|
||||
\end{aligned}
|
||||
```
|
||||
|
||||
$$
|
||||
\begin{aligned}
|
||||
\min Q & = \min_{\beta} \mathbf{Y}'\mathbf{Y} - 2\beta'\mathbf{X}'\mathbf{Y} +
|
||||
\beta'\mathbf{X}'\mathbf{X}\beta \\
|
||||
& = \min_{\beta} - 2\beta'\mathbf{X}'\mathbf{Y} + \beta'\mathbf{X}'\mathbf{X}\beta \\
|
||||
\text{[FOC]}~~~0 & = - 2\mathbf{X}'\mathbf{Y} + 2\mathbf{X}'\mathbf{X}\hat{\beta} \\
|
||||
\hat{\beta} & = (\mathbf{X}'\mathbf{X})^{-1}\mathbf{X}'\mathbf{Y} \\
|
||||
& = (\sum^{n} \mathbf{x}_i \mathbf{x}'_i)^{-1} \sum^{n} \mathbf{x}_i y_i
|
||||
\end{aligned}
|
||||
$$
|
||||
185
data/blog/github-markdown-guide.mdx
Normal file
185
data/blog/github-markdown-guide.mdx
Normal file
@ -0,0 +1,185 @@
|
||||
---
|
||||
title: 'Markdown Guide'
|
||||
date: '2019-10-11'
|
||||
tags: ['github', 'guide']
|
||||
draft: false
|
||||
summary: 'Markdown cheatsheet for all your blogging needs - headers, lists, images, tables and more! An illustrated guide based on Github Flavored Markdown.'
|
||||
---
|
||||
|
||||
# Introduction
|
||||
|
||||
Markdown and Mdx parsing is supported via `unified`, and other remark and rehype packages. `next-mdx-remote` allows us to parse `.mdx` and `.md` files in a more flexible manner without touching webpack.
|
||||
|
||||
Github flavored markdown is used. `mdx-prism` provides syntax highlighting capabilities for code blocks. Here's a demo of how everything looks.
|
||||
|
||||
The following markdown cheatsheet is adapted from: https://guides.github.com/features/mastering-markdown/
|
||||
|
||||
# What is Markdown?
|
||||
|
||||
Markdown is a way to style text on the web. You control the display of the document; formatting words as bold or italic, adding images, and creating lists are just a few of the things we can do with Markdown. Mostly, Markdown is just regular text with a few non-alphabetic characters thrown in, like `#` or `*`.
|
||||
|
||||
# Syntax guide
|
||||
|
||||
Here’s an overview of Markdown syntax that you can use anywhere on GitHub.com or in your own text files.
|
||||
|
||||
## Headers
|
||||
|
||||
```
|
||||
# This is a h1 tag
|
||||
|
||||
## This is a h2 tag
|
||||
|
||||
#### This is a h4 tag
|
||||
```
|
||||
|
||||
# This is a h1 tag
|
||||
|
||||
## This is a h2 tag
|
||||
|
||||
#### This is a h4 tag
|
||||
|
||||
## Emphasis
|
||||
|
||||
```
|
||||
_This text will be italic_
|
||||
|
||||
**This text will be bold**
|
||||
|
||||
_You **can** combine them_
|
||||
```
|
||||
|
||||
_This text will be italic_
|
||||
|
||||
**This text will be bold**
|
||||
|
||||
_You **can** combine them_
|
||||
|
||||
## Lists
|
||||
|
||||
### Unordered
|
||||
|
||||
```
|
||||
- Item 1
|
||||
- Item 2
|
||||
- Item 2a
|
||||
- Item 2b
|
||||
```
|
||||
|
||||
- Item 1
|
||||
- Item 2
|
||||
- Item 2a
|
||||
- Item 2b
|
||||
|
||||
### Ordered
|
||||
|
||||
```
|
||||
1. Item 1
|
||||
1. Item 2
|
||||
1. Item 3
|
||||
1. Item 3a
|
||||
1. Item 3b
|
||||
```
|
||||
|
||||
1. Item 1
|
||||
1. Item 2
|
||||
1. Item 3
|
||||
1. Item 3a
|
||||
1. Item 3b
|
||||
|
||||
## Images
|
||||
|
||||
```
|
||||
|
||||
Format: 
|
||||
```
|
||||
|
||||
|
||||
|
||||
## Links
|
||||
|
||||
```
|
||||
http://github.com - automatic!
|
||||
[GitHub](http://github.com)
|
||||
```
|
||||
|
||||
http://github.com - automatic!
|
||||
[GitHub](http://github.com)
|
||||
|
||||
## Blockquotes
|
||||
|
||||
```
|
||||
As Kanye West said:
|
||||
|
||||
> We're living the future so
|
||||
> the present is our past.
|
||||
```
|
||||
|
||||
As Kanye West said:
|
||||
|
||||
> We're living the future so
|
||||
> the present is our past.
|
||||
|
||||
## Inline code
|
||||
|
||||
```
|
||||
I think you should use an
|
||||
`<addr>` element here instead.
|
||||
```
|
||||
|
||||
I think you should use an
|
||||
`<addr>` element here instead.
|
||||
|
||||
## Syntax highlighting
|
||||
|
||||
Here’s an example of how you can use syntax highlighting with [GitHub Flavored Markdown](https://help.github.com/articles/basic-writing-and-formatting-syntax/):
|
||||
|
||||
````
|
||||
```js:fancyAlert.js
|
||||
function fancyAlert(arg) {
|
||||
if (arg) {
|
||||
$.facebox({ div: '#foo' })
|
||||
}
|
||||
}
|
||||
````
|
||||
|
||||
And here's how it looks - nicely colored with styled code titles!
|
||||
|
||||
```js:fancyAlert.js
|
||||
function fancyAlert(arg) {
|
||||
if (arg) {
|
||||
$.facebox({ div: '#foo' })
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## Task Lists
|
||||
|
||||
```
|
||||
- [x] list syntax required (any unordered or ordered list supported)
|
||||
- [x] this is a complete item
|
||||
- [ ] this is an incomplete item
|
||||
```
|
||||
|
||||
- [x] list syntax required (any unordered or ordered list supported)
|
||||
- [x] this is a complete item
|
||||
- [ ] this is an incomplete item
|
||||
|
||||
## Tables
|
||||
|
||||
You can create tables by assembling a list of words and dividing them with hyphens `-` (for the first row), and then separating each column with a pipe `|`:
|
||||
|
||||
```
|
||||
| First Header | Second Header |
|
||||
| --------------------------- | ---------------------------- |
|
||||
| Content from cell 1 | Content from cell 2 |
|
||||
| Content in the first column | Content in the second column |
|
||||
```
|
||||
|
||||
| First Header | Second Header |
|
||||
| --------------------------- | ---------------------------- |
|
||||
| Content from cell 1 | Content from cell 2 |
|
||||
| Content in the first column | Content in the second column |
|
||||
|
||||
## Strikethrough
|
||||
|
||||
Any word wrapped with two tildes (like `~~this~~`) will appear ~~crossed out~~.
|
||||
79
data/blog/guide-to-using-images-in-nextjs.mdx
Normal file
79
data/blog/guide-to-using-images-in-nextjs.mdx
Normal file
@ -0,0 +1,79 @@
|
||||
---
|
||||
title: Images in Next.js
|
||||
date: '2020-11-11'
|
||||
tags: ['next js', 'guide']
|
||||
draft: false
|
||||
summary: 'In this article we introduce adding images in the tailwind starter blog and the benefits and limitations of the next/image component.'
|
||||
---
|
||||
|
||||
# Introduction
|
||||
|
||||
The tailwind starter blog has out of the box support for [Next.js's built-in image component](https://nextjs.org/docs/api-reference/next/image) and automatically swaps out default image tags in markdown or mdx documents to use the Image component provided.
|
||||
|
||||
# Usage
|
||||
|
||||
To use in a new page route / javascript file, simply import the image component and call it e.g.
|
||||
|
||||
```js
|
||||
import Image from 'next/image'
|
||||
|
||||
function Home() {
|
||||
return (
|
||||
<>
|
||||
<h1>My Homepage</h1>
|
||||
<Image src="/me.png" alt="Picture of the author" width={500} height={500} />
|
||||
<p>Welcome to my homepage!</p>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default Home
|
||||
```
|
||||
|
||||
For a markdown file, the default image tag can be used and the default `img` tag gets replaced by the `Image` component in the build process.
|
||||
|
||||
Assuming we have a file called `ocean.jpg` in `data/img/ocean.jpg`, the following line of code would generate the optimized image.
|
||||
|
||||
```
|
||||
|
||||
```
|
||||
|
||||
Alternatively, since we are using mdx, we can just use the image component directly! Note, that you would have to provide a fixed width and height. The `img` tag method parses the dimension automatically.
|
||||
|
||||
```js
|
||||
<Image alt="ocean" src="/static/images/ocean.jpg" width={256} height={128} />
|
||||
```
|
||||
|
||||
_Note_: If you try to save the image, it is in webp format, if your browser supports it!
|
||||
|
||||
|
||||
|
||||
<p>
|
||||
Photo by{' '}
|
||||
<a href="https://unsplash.com/@yucar?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">
|
||||
YUCAR FotoGrafik
|
||||
</a>{' '}
|
||||
on{' '}
|
||||
<a href="https://unsplash.com/s/photos/sea?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">
|
||||
Unsplash
|
||||
</a>
|
||||
</p>
|
||||
|
||||
# Benefits
|
||||
|
||||
- Smaller image size with Webp (~30% smaller than jpeg)
|
||||
- Responsive images - the correct image size is served based on the user's viewport
|
||||
- Lazy loading - images load as they are scrolled to the viewport
|
||||
- Avoids [Cumulative Layout Shift](https://web.dev/cls/)
|
||||
- Optimization on demand instead of build-time - no increase in build time!
|
||||
|
||||
# Limitations
|
||||
|
||||
- Due to the reliance of `next/image`, unless you are using an external image CDN like Cloudinary or Imgix, it is practically required to use Vercel for hosting. This is because the component acts like a serverless function that calls a highly optimized image CDN.
|
||||
|
||||
If you do not want to be tied to Vercel, you can remove `imgToJsx` in `remarkPlugins` in `lib/mdx.js`. This would avoid substituting the default `img` tag.
|
||||
|
||||
Alternatively, one could wait for image optimization at build time to be supported. A different library, [next-optimized-images](https://github.com/cyrilwanner/next-optimized-images) does that, although it requires transforming the images through webpack which is not done here.
|
||||
|
||||
- Images from external links are not passed through `next/image`
|
||||
- All images have to be stored in the `public` folder e.g `/static/images/ocean.jpeg`
|
||||
100
data/blog/pictures-of-canada.mdx
Normal file
100
data/blog/pictures-of-canada.mdx
Normal file
@ -0,0 +1,100 @@
|
||||
---
|
||||
title: O Canada
|
||||
date: '2017-07-15'
|
||||
tags: ['holiday', 'canada', 'images']
|
||||
draft: false
|
||||
summary: The scenic lands of Canada featuring maple leaves, snow-capped mountains, turquoise lakes and Toronto. Take in the sights in this photo gallery exhibition and see how easy it is to replicate with some MDX magic and tailwind classes.
|
||||
---
|
||||
|
||||
# O Canada
|
||||
|
||||
The scenic lands of Canada featuring maple leaves, snow-capped mountains, turquoise lakes and Toronto. Take in the sights in this photo gallery exhibition and see how easy it is to replicate with some MDX magic and tailwind classes.
|
||||
|
||||
Features images served using `next/image` component. The locally stored images are located in a folder with the following path: `/static/images/canada/[filename].jpg`
|
||||
|
||||
Since we are using mdx, we can create a simple responsive flexbox grid to display our images with a few tailwind css classes.
|
||||
|
||||
---
|
||||
|
||||
# Gallery
|
||||
|
||||
<div className="flex flex-wrap -mx-2 overflow-hidden xl:-mx-2">
|
||||
<div className="my-1 px-2 w-full overflow-hidden xl:my-1 xl:px-2 xl:w-1/2">
|
||||
<Image alt="Maple" src="/static/images/canada/maple.jpg" width={640} height={427} />
|
||||
</div>
|
||||
<div className="my-1 px-2 w-full overflow-hidden xl:my-1 xl:px-2 xl:w-1/2">
|
||||
<Image alt="Lake" src="/static/images/canada/lake.jpg" width={640} height={427} />
|
||||
</div>
|
||||
<div className="my-1 px-2 w-full overflow-hidden xl:my-1 xl:px-2 xl:w-1/2">
|
||||
<Image alt="Mountains" src="/static/images/canada/mountains.jpg" width={640} height={427} />
|
||||
</div>
|
||||
<div className="my-1 px-2 w-full overflow-hidden xl:my-1 xl:px-2 xl:w-1/2">
|
||||
<Image alt="Toronto" src="/static/images/canada/toronto.jpg" width={640} height={427} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
# Implementation
|
||||
|
||||
```js
|
||||
<div className="flex flex-wrap -mx-2 overflow-hidden xl:-mx-2">
|
||||
<div className="my-1 px-2 w-full overflow-hidden xl:my-1 xl:px-2 xl:w-1/2">
|
||||
<Image alt="Maple" src="/static/images/canada/maple.jpg" width={640} height={427} />
|
||||
</div>
|
||||
<div className="my-1 px-2 w-full overflow-hidden xl:my-1 xl:px-2 xl:w-1/2">
|
||||
<Image alt="Lake" src="/static/images/canada/lake.jpg" width={640} height={427} />
|
||||
</div>
|
||||
<div className="my-1 px-2 w-full overflow-hidden xl:my-1 xl:px-2 xl:w-1/2">
|
||||
<Image alt="Mountains" src="/static/images/canada/mountains.jpg" width={640} height={427} />
|
||||
</div>
|
||||
<div className="my-1 px-2 w-full overflow-hidden xl:my-1 xl:px-2 xl:w-1/2">
|
||||
<Image alt="Toronto" src="/static/images/canada/toronto.jpg" width={640} height={427} />
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
_Note_: Currently, one has to use the `Image` component instead of the markdown syntax between jsx. Thankfully, it's one of the default components passed to the MDX Provider and can be used directly.
|
||||
|
||||
When MDX v2 is ready, one could potentially interleave markdown in jsx directly! Follow [MDX v2 issues](https://github.com/mdx-js/mdx/issues/1041) for updates.
|
||||
|
||||
### Photo Credits
|
||||
|
||||
<div>
|
||||
Maple photo by{' '}
|
||||
<a href="https://unsplash.com/@i_am_g?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">
|
||||
Guillaume Jaillet
|
||||
</a>{' '}
|
||||
on{' '}
|
||||
<a href="https://unsplash.com/s/photos/canada?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">
|
||||
Unsplash
|
||||
</a>
|
||||
</div>
|
||||
<div>
|
||||
Mountains photo by{' '}
|
||||
<a href="https://unsplash.com/@john_artifexfilms?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">
|
||||
John Lee
|
||||
</a>{' '}
|
||||
on{' '}
|
||||
<a href="https://unsplash.com/s/photos/canada?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">
|
||||
Unsplash
|
||||
</a>
|
||||
</div>
|
||||
<div>
|
||||
Lake photo by{' '}
|
||||
<a href="https://unsplash.com/@tjholowaychuk?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">
|
||||
Tj Holowaychuk
|
||||
</a>{' '}
|
||||
on{' '}
|
||||
<a href="https://unsplash.com/s/photos/canada?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">
|
||||
Unsplash
|
||||
</a>
|
||||
</div>
|
||||
<div>
|
||||
Toronto photo by{' '}
|
||||
<a href="https://unsplash.com/@matthewhenry?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">
|
||||
Matthew Henry
|
||||
</a>{' '}
|
||||
on{' '}
|
||||
<a href="https://unsplash.com/s/photos/canada?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">
|
||||
Unsplash
|
||||
</a>
|
||||
</div>
|
||||
238
data/blog/the-time-machine.mdx
Normal file
238
data/blog/the-time-machine.mdx
Normal file
@ -0,0 +1,238 @@
|
||||
---
|
||||
title: 'The Time Machine'
|
||||
date: '2018-08-15'
|
||||
tags: ['writings', 'book', 'reflection']
|
||||
draft: false
|
||||
summary: 'The Time Traveller (for so it will be convenient to speak of him) was
|
||||
expounding a recondite matter to us. His pale grey eyes shone and
|
||||
twinkled, and his usually pale face was flushed and animated...'
|
||||
---
|
||||
|
||||
# The Time Machine by H. G. Wells
|
||||
|
||||
_Title_: The Time Machine
|
||||
|
||||
_Author_: H. G. Wells
|
||||
|
||||
_Subject_: Science Fiction
|
||||
|
||||
_Language_: English
|
||||
|
||||
_Source_: [Project Gutenberg](https://www.gutenberg.org/ebooks/35)
|
||||
|
||||
## Introduction
|
||||
|
||||
The Time Traveller (for so it will be convenient to speak of him) was
|
||||
expounding a recondite matter to us. His pale grey eyes shone and
|
||||
twinkled, and his usually pale face was flushed and animated. The fire
|
||||
burnt brightly, and the soft radiance of the incandescent lights in the
|
||||
lilies of silver caught the bubbles that flashed and passed in our
|
||||
glasses. Our chairs, being his patents, embraced and caressed us rather
|
||||
than submitted to be sat upon, and there was that luxurious
|
||||
after-dinner atmosphere, when thought runs gracefully free of the
|
||||
trammels of precision. And he put it to us in this way—marking the
|
||||
points with a lean forefinger—as we sat and lazily admired his
|
||||
earnestness over this new paradox (as we thought it) and his fecundity.
|
||||
|
||||
“You must follow me carefully. I shall have to controvert one or two
|
||||
ideas that are almost universally accepted. The geometry, for instance,
|
||||
they taught you at school is founded on a misconception.”
|
||||
|
||||
“Is not that rather a large thing to expect us to begin upon?” said
|
||||
Filby, an argumentative person with red hair.
|
||||
|
||||
“I do not mean to ask you to accept anything without reasonable ground
|
||||
for it. You will soon admit as much as I need from you. You know of
|
||||
course that a mathematical line, a line of thickness _nil_, has no real
|
||||
existence. They taught you that? Neither has a mathematical plane.
|
||||
These things are mere abstractions.”
|
||||
|
||||
“That is all right,” said the Psychologist.
|
||||
|
||||
“Nor, having only length, breadth, and thickness, can a cube have a
|
||||
real existence.”
|
||||
|
||||
“There I object,” said Filby. “Of course a solid body may exist. All
|
||||
real things—”
|
||||
|
||||
“So most people think. But wait a moment. Can an _instantaneous_ cube
|
||||
exist?”
|
||||
|
||||
“Don’t follow you,” said Filby.
|
||||
|
||||
“Can a cube that does not last for any time at all, have a real
|
||||
existence?”
|
||||
|
||||
Filby became pensive. “Clearly,” the Time Traveller proceeded, “any
|
||||
real body must have extension in _four_ directions: it must have
|
||||
Length, Breadth, Thickness, and—Duration. But through a natural
|
||||
infirmity of the flesh, which I will explain to you in a moment, we
|
||||
incline to overlook this fact. There are really four dimensions, three
|
||||
which we call the three planes of Space, and a fourth, Time. There is,
|
||||
however, a tendency to draw an unreal distinction between the former
|
||||
three dimensions and the latter, because it happens that our
|
||||
consciousness moves intermittently in one direction along the latter
|
||||
from the beginning to the end of our lives.”
|
||||
|
||||
“That,” said a very young man, making spasmodic efforts to relight his
|
||||
cigar over the lamp; “that . . . very clear indeed.”
|
||||
|
||||
“Now, it is very remarkable that this is so extensively overlooked,”
|
||||
continued the Time Traveller, with a slight accession of cheerfulness.
|
||||
“Really this is what is meant by the Fourth Dimension, though some
|
||||
people who talk about the Fourth Dimension do not know they mean it. It
|
||||
is only another way of looking at Time. _There is no difference between
|
||||
Time and any of the three dimensions of Space except that our
|
||||
consciousness moves along it_. But some foolish people have got hold of
|
||||
the wrong side of that idea. You have all heard what they have to say
|
||||
about this Fourth Dimension?”
|
||||
|
||||
“_I_ have not,” said the Provincial Mayor.
|
||||
|
||||
“It is simply this. That Space, as our mathematicians have it, is
|
||||
spoken of as having three dimensions, which one may call Length,
|
||||
Breadth, and Thickness, and is always definable by reference to three
|
||||
planes, each at right angles to the others. But some philosophical
|
||||
people have been asking why _three_ dimensions particularly—why not
|
||||
another direction at right angles to the other three?—and have even
|
||||
tried to construct a Four-Dimensional geometry. Professor Simon Newcomb
|
||||
was expounding this to the New York Mathematical Society only a month
|
||||
or so ago. You know how on a flat surface, which has only two
|
||||
dimensions, we can represent a figure of a three-dimensional solid, and
|
||||
similarly they think that by models of three dimensions they could
|
||||
represent one of four—if they could master the perspective of the
|
||||
thing. See?”
|
||||
|
||||
“I think so,” murmured the Provincial Mayor; and, knitting his brows,
|
||||
he lapsed into an introspective state, his lips moving as one who
|
||||
repeats mystic words. “Yes, I think I see it now,” he said after some
|
||||
time, brightening in a quite transitory manner.
|
||||
|
||||
“Well, I do not mind telling you I have been at work upon this geometry
|
||||
of Four Dimensions for some time. Some of my results are curious. For
|
||||
instance, here is a portrait of a man at eight years old, another at
|
||||
fifteen, another at seventeen, another at twenty-three, and so on. All
|
||||
these are evidently sections, as it were, Three-Dimensional
|
||||
representations of his Four-Dimensioned being, which is a fixed and
|
||||
unalterable thing.
|
||||
|
||||
“Scientific people,” proceeded the Time Traveller, after the pause
|
||||
required for the proper assimilation of this, “know very well that Time
|
||||
is only a kind of Space. Here is a popular scientific diagram, a
|
||||
weather record. This line I trace with my finger shows the movement of
|
||||
the barometer. Yesterday it was so high, yesterday night it fell, then
|
||||
this morning it rose again, and so gently upward to here. Surely the
|
||||
mercury did not trace this line in any of the dimensions of Space
|
||||
generally recognised? But certainly it traced such a line, and that
|
||||
line, therefore, we must conclude, was along the Time-Dimension.”
|
||||
|
||||
“But,” said the Medical Man, staring hard at a coal in the fire, “if
|
||||
Time is really only a fourth dimension of Space, why is it, and why has
|
||||
it always been, regarded as something different? And why cannot we move
|
||||
in Time as we move about in the other dimensions of Space?”
|
||||
|
||||
The Time Traveller smiled. “Are you so sure we can move freely in
|
||||
Space? Right and left we can go, backward and forward freely enough,
|
||||
and men always have done so. I admit we move freely in two dimensions.
|
||||
But how about up and down? Gravitation limits us there.”
|
||||
|
||||
“Not exactly,” said the Medical Man. “There are balloons.”
|
||||
|
||||
“But before the balloons, save for spasmodic jumping and the
|
||||
inequalities of the surface, man had no freedom of vertical movement.”
|
||||
|
||||
“Still they could move a little up and down,” said the Medical Man.
|
||||
|
||||
“Easier, far easier down than up.”
|
||||
|
||||
“And you cannot move at all in Time, you cannot get away from the
|
||||
present moment.”
|
||||
|
||||
“My dear sir, that is just where you are wrong. That is just where the
|
||||
whole world has gone wrong. We are always getting away from the present
|
||||
moment. Our mental existences, which are immaterial and have no
|
||||
dimensions, are passing along the Time-Dimension with a uniform
|
||||
velocity from the cradle to the grave. Just as we should travel _down_
|
||||
if we began our existence fifty miles above the earth’s surface.”
|
||||
|
||||
“But the great difficulty is this,” interrupted the Psychologist. ’You
|
||||
_can_ move about in all directions of Space, but you cannot move about
|
||||
in Time.”
|
||||
|
||||
“That is the germ of my great discovery. But you are wrong to say that
|
||||
we cannot move about in Time. For instance, if I am recalling an
|
||||
incident very vividly I go back to the instant of its occurrence: I
|
||||
become absent-minded, as you say. I jump back for a moment. Of course
|
||||
we have no means of staying back for any length of Time, any more than
|
||||
a savage or an animal has of staying six feet above the ground. But a
|
||||
civilised man is better off than the savage in this respect. He can go
|
||||
up against gravitation in a balloon, and why should he not hope that
|
||||
ultimately he may be able to stop or accelerate his drift along the
|
||||
Time-Dimension, or even turn about and travel the other way?”
|
||||
|
||||
“Oh, _this_,” began Filby, “is all—”
|
||||
|
||||
“Why not?” said the Time Traveller.
|
||||
|
||||
“It’s against reason,” said Filby.
|
||||
|
||||
“What reason?” said the Time Traveller.
|
||||
|
||||
“You can show black is white by argument,” said Filby, “but you will
|
||||
never convince me.”
|
||||
|
||||
“Possibly not,” said the Time Traveller. “But now you begin to see the
|
||||
object of my investigations into the geometry of Four Dimensions. Long
|
||||
ago I had a vague inkling of a machine—”
|
||||
|
||||
“To travel through Time!” exclaimed the Very Young Man.
|
||||
|
||||
“That shall travel indifferently in any direction of Space and Time, as
|
||||
the driver determines.”
|
||||
|
||||
Filby contented himself with laughter.
|
||||
|
||||
“But I have experimental verification,” said the Time Traveller.
|
||||
|
||||
“It would be remarkably convenient for the historian,” the Psychologist
|
||||
suggested. “One might travel back and verify the accepted account of
|
||||
the Battle of Hastings, for instance!”
|
||||
|
||||
“Don’t you think you would attract attention?” said the Medical Man.
|
||||
“Our ancestors had no great tolerance for anachronisms.”
|
||||
|
||||
“One might get one’s Greek from the very lips of Homer and Plato,” the
|
||||
Very Young Man thought.
|
||||
|
||||
“In which case they would certainly plough you for the Little-go. The
|
||||
German scholars have improved Greek so much.”
|
||||
|
||||
“Then there is the future,” said the Very Young Man. “Just think! One
|
||||
might invest all one’s money, leave it to accumulate at interest, and
|
||||
hurry on ahead!”
|
||||
|
||||
“To discover a society,” said I, “erected on a strictly communistic
|
||||
basis.”
|
||||
|
||||
“Of all the wild extravagant theories!” began the Psychologist.
|
||||
|
||||
“Yes, so it seemed to me, and so I never talked of it until—”
|
||||
|
||||
“Experimental verification!” cried I. “You are going to verify _that_?”
|
||||
|
||||
“The experiment!” cried Filby, who was getting brain-weary.
|
||||
|
||||
“Let’s see your experiment anyhow,” said the Psychologist, “though it’s
|
||||
all humbug, you know.”
|
||||
|
||||
The Time Traveller smiled round at us. Then, still smiling faintly, and
|
||||
with his hands deep in his trousers pockets, he walked slowly out of
|
||||
the room, and we heard his slippers shuffling down the long passage to
|
||||
his laboratory.
|
||||
|
||||
The Psychologist looked at us. “I wonder what he’s got?”
|
||||
|
||||
“Some sleight-of-hand trick or other,” said the Medical Man, and Filby
|
||||
tried to tell us about a conjuror he had seen at Burslem, but before he
|
||||
had finished his preface the Time Traveller came back, and Filby’s
|
||||
anecdote collapsed.
|
||||
Reference in New Issue
Block a user