Easy To Learn
`fastn` is designed to be easy to learn for people who have very little to no
prior frontend development experience. Backend developers, designers can easily
learn it for building their web projects.
-- import: fastn-community.github.io/bling/quote
-- quote.charcoal: Amit Upadhyay
label: Creator of `fastn`
avatar: $fastn-assets.files.images.amitu.jpg
logo: $fastn-assets.files.images.logo-fifthtry.svg
The web has lost some of the exuberance from the
early 2000s, and it makes me a little sad.
The language to author content and the language to build the components is the
same and one can gradually learn `fastn` by first only using ready made
components, and then slowly learning to build components.
-- component toggle-text:
boolean $current: false
caption title:
-- ftd.text: $toggle-text.title
align-self: center
text-align: center
color if { toggle-text.current }: #D42D42
color: $inherited.colors.cta-primary.text
background.solid: $inherited.colors.cta-primary.base
$on-click$: $ftd.toggle($a = $toggle-text.current)
border-radius.px: 5
-- end: toggle-text
Easy To Author - Great For Content Sites
`fastn` is optimised for people to author web content using the same language
in which the reusable web components are built. If you are using React etc, you
would want to use `mdx` for this. The `mdx` is a mix of, very easy to author
markdown,
Semantic Content
Markdown has concepts like headings and paragraphs. Everything in markdown is
just headings of different levels. There is no semantic to headings. With `ftd`
you use components by name, with rich type system etc, eg if you want to
talk about your team, in markdown you will say:
# Team
## Jack Smith
Jack is our lead designer. He joined us on 20th Feb 2022. He loves to cook and
swim, and is often found walking his husky.
![Jack Smith's Mugshot](/images/team/jack.jpg)
Where as with `fastn` you say something like.
-- lib.team:
-- lib.member: Jack Smith
joined-on: 20th Feb 2022
title: Lead Designer
mugshot: $assets.files.team.jack.jpg
Jack loves to cook and swim, and is often found walking his husky.
-- end: lib.team
The information content is captured in fields. The fields have types, so there
is no invalid data. There is a separation of markup from content, as in this
case of markdown the image will always come after the paragraph, but in the
case of `fastn`, the image can be placed anywhere, decided by the `lib.member`
component.
Data Driven
The data in the `fastn` files can be trivially extracted, converted to JSON,
whereas in case of markdown you have to write fragile parser to extract the
data locked in markdown text blobs.
Rust Code To Extract Data
#[derive(serde::Deserialize)]
struct Member {
name: String,
#[rename("joined-on")]
joined_on: String,
title: Option<String>,
mugshot: Option<String>,
bio: String,
}
let doc = fastn::Document::from("some/id", source)?;
let members: Vec<Member> = doc.invocations("lib.member")?;
Soon we will support json conversion on `fastn` CLI as well, `fastn json-dump
team.ftd --invocations=lib.member` will return:
json returned by `fastn json-dump`
[
{
"name": "Jack Smith",
"joined-on": "20th Feb 2022",
"title": "Lead Designer",
"mugshot": "/team/jack.jpg",
"bio": "Jack loves to cook and swim, and is often found walking his husky."
}
]
Good Design System
`fastn` comes with integrated design system. Instead of specifying font sizes or
colors, you specify typography and color roles to UI elements. The roles are
well defined, so within the `fastn` ecosystem they are well known, and a lot of
color scheme and typography packages available, which you can install and you
can then change entire typography or color scheme in a few lines of change.
Learn more about [fastn design system](/design-system/).
Responsive
`fastn` has built in supprot for reponsive, every where you specify a length,
you can specify a "responsive length", and fastn will automatically use the
right length based on mobile or desktop devices.