ftd: Programming Language For Human Beings by @amitu
Previous
Next
FTD: Programming Language For Human Beings
Amit Upadhyay, Founder: FifthTry.com - @amitu
Markdown Is Great!
Soon every text input will support markdown.
… but!
Let’s Look At MDX
import {Chart} from './snowfall.js'
export const year = 2018

# Last year’s snowfall

In {year}, the snowfall was above average.
It was followed by a warm spring which caused
flood conditions in many of the nearby rivers.

<Chart year={year} color="#fcb32c" />
Let’s Look At MDX
import {Chart} from './snowfall.js'
export const year = 2018

# Last year’s snowfall

In {year}, the snowfall was above average.
It was followed by a warm spring which caused
flood conditions in many of the nearby rivers.

<Chart year={year} color="#fcb32c" />
How to show year in yellow?
Let’s Look At MDX
import {Chart} from './snowfall.js'
export const year = 2018

# Last year’s snowfall

In {year}, the snowfall was above average.
It was followed by a warm spring which caused
flood conditions in many of the nearby rivers.

<Chart year={year} color="#fcb32c"
title="This supports *markdown*?"
description="Can you write multi-line description? Can it contain MDX?"
/>
What If Chart Needed A title And description?
FTD
-- hello:
who: World!
JSX
<hello who="World!" />
FTD
-- hello:
who: World!
hello
-- ftd.row hello:
string who: Everyone!
spacing: 10

--- ftd.text: Hello,

--- ftd.text: $who
background-color: $fpm.color.main.background.base
Hello, World!
Using caption for even better syntax!
-- hello: World!
Notice we changed string to caption
-- ftd.row hello:
caption who: Everyone!
spacing: 10

--- ftd.text: Hello,

--- ftd.text: $who
background-color: $fpm.color.main.background.base
Hello, World!
Defining Variables
-- integer size: 42

-- string message: Hello React Bangalore!
$ only comes in value position
-- ftd.text: $message
size: $size
Hello React Bangalore!
Defining Records
-- record person:
caption name:
string company:
optional body bio:
Instantiating Records
-- person amitu: Amit Upadhyay
company: FifthTry, Inc.

Amit is the founder and CEO of FifthTry, Inc. He loves open source
and has created FTD and FPM.
Using Record
-- ftd.text: $amitu.name

-- ftd.text: Company

-- ftd.text: $amitu.company
Defining A List
-- person list people:
Added Data To List
-- people: Amit Upadhyay
company: FifthTry, Inc.


-- people: Arpita Jaiswal
company: FifthTry, Inc.

Arpita is a software developer at FifthTry and is the lead contributor
of FTD and FPM.
$loop$ing over a list
-- show-person: $o.name
$loop$: people as o
company: $o.company
bio: $o.bio

-- ftd.column show-person:
caption name:
string company:
optional body bio:

--- .. rest of the body ..
Conditional Elements if
-- show-person: $o.name
if: $o.bio is not null
$loop$: people as o
company: $o.company
bio: $o.bio
if and $on-*$ handling
-- boolean open: true

-- ftd.text: You can see me!
if: $open

-- ftd.text: Toggle
$on-click$: toggle $open
Or you can change colors
-- boolean funky: false

-- ftd.text: Some Text
color if $funky: $fpm.color.main.text
background-color if $funky: $fpm.color.main.background.base

-- ftd.text: Toggle
$on-click$: toggle $funky

-- import: fifthtry.github.io/Forest-Theme as ft
-- import: ftd-dev.vercel.app/config
-- import: fpm

-- ft.page:
toc: $config.empty-toc

-- ft.create-section:

-- ft.bread-crumb:

--- ft.crumb: Create a book
link: /

--- ft.crumb: Pick a theme

-- ft.template-list:

--- ft.theme: Forest
if: not $ftd.dark-mode
link: https://github.com/FifthTry/Forest-Template/generate
image: images/forest.png
live_preview: https://fifthtry.github.io/Forest-Template/

--- ft.theme: Forest
if: $ftd.dark-mode
link: https://github.com/FifthTry/Forest-Template/generate
image: images/dark-forest.png
live_preview: https://fifthtry.github.io/Forest-Template/
Clear
Thank You!

Amit Upadhyay

Twitter: amitu

Github: amitu

Email: amitu@fifthtry.com

FTD Site: ftd.dev

FPM (FTD Static Site Generator): fpm.dev