Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
Markdown, my friend – we have to talk
stefan judis
September 11, 2018
Technology
2
470
Markdown, my friend – we have to talk
stefan judis
September 11, 2018
Tweet
Share
More Decks by stefan judis
See All by stefan judis
Wanna scale up? Make sure your CMS is ready for it!
stefanjudis
0
97
Did we(b development) lose the right direction?
stefanjudis
6
1.8k
Regular expressions – my secret love
stefanjudis
0
820
Write a Function
stefanjudis
0
370
React in a worker, worker, worker...
stefanjudis
1
300
HTTP headers for the responsible developer
stefanjudis
5
3.7k
I've got 99 problems the server ain't one
stefanjudis
1
170
When a CMS is not enough
stefanjudis
1
480
I didn't know that!
stefanjudis
1
660
Other Decks in Technology
See All in Technology
スタートアップ入社4日目までに考えたAWSのセキュリティ向上/ Startup AWS Security
shonansurvivors
3
2.4k
Power BI Premiumでデータ準備!
hanaseleb
1
170
Steps toward self-service operations in eureka
fukubaka0825
0
400
tfcon-2022-cpp
cpp
5
4.6k
インフラエンジニアBooks 30分でわかる「Dockerコンテナ開発・環境構築の基本」
cyberblack28
10
6.5k
Who owns the Service Level?
chaspy
5
680
実験!カオスエンジニアリング / How to Chaos Engineering
oracle4engineer
PRO
0
130
Salesforce女子部-権限についてまとめてみたその1
sfggjp
0
170
Deeplearning from almost scratch
hn410
0
580
目と耳を持った自然言語処理 - スタートアップにおける価値創出のために
yag_ays
PRO
0
510
~スタートアップの人たちに捧ぐ~ 監視再入門 in AWS
track3jyo
PRO
30
8.3k
エンタープライズにおけるSRE立ち上げとNew Relic選定に至った背景とは / SRE Startup and New Relic in the Enterprise
tomoyakitaura
2
120
Featured
See All Featured
Optimizing for Happiness
mojombo
365
63k
Testing 201, or: Great Expectations
jmmastey
21
5.4k
A designer walks into a library…
pauljervisheath
196
16k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_i
21
14k
StorybookのUI Testing Handbookを読んだ
zakiyama
4
2k
The MySQL Ecosystem @ GitHub 2015
samlambert
238
11k
Product Roadmaps are Hard
iamctodd
34
6.1k
Designing with Data
zakiwarfel
91
3.8k
Large-scale JavaScript Application Architecture
addyosmani
499
110k
Documentation Writing (for coders)
carmenhchung
48
2.5k
Creatively Recalculating Your Daily Design Routine
revolveconf
205
10k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
3
430
Transcript
@stefanjudis *Markdown, my friend* **We have to talk!**
STEFAN JUDIS @stefanjudis www.stefanjudis.com stefan.judis@contentful.com
None
What have these sites in common?
WYSIWYG
“ I don't want to and feel bad setting up
polluted WYSIWYG editors.
None
Everything is broken!
None
None
It's a mix of content and presentation
Html
Html
Too flexible Too easy to mess up Mixes content and
looks HTML is the goal
You want to limit the user!
Markdown
# Heading ## Sub-heading Text attributes _italic_, **bold**, `monospace`. Bullet
list: * apples * oranges * pears A [link](http://example.com).  Heading Sub-heading Text attributes italic, bold, monospace. Bullet list: - apple - oranges - pears A link.
Inline <abbr title="Hypertext Markup Language">HTML</abbr> is supported. Inline HTML is
supported.
“ The key design goal [of markdown] is readability.
None
None
Markdown is not "feature-complete" ("semantical correct" is not a thing)
# Heading And a paragraph...
# Heading And a paragraph... 
None
Responsive images
// my-markdown-renderer.js import marked from 'marked' export default (text) =>
marked(text);
// my-markdown-renderer.js import marked from 'marked' const renderer = new
marked.Renderer() export default (text) => marked(text, { renderer });
// my-markdown-renderer.js import marked from 'marked' const renderer = new
marked.Renderer() renderer.image = (href, title, text) => { return `<img src="${href}" srcset="https: //images.contentful.com/ .../duck.png?w=100 100w, https: //images.contentful.com/ .../duck.png?w=500 500w, https: //images.contentful.com/ .../duck.png?w1000 1000w" sizes="(min-width: 900px) 1000px, (max-width: 900px) and (min-width: 400px) 50em" alt="${text}">` } export default (text) => marked(text, { renderer });
// my-markdown-renderer.js import marked from 'marked' const renderer = new
marked.Renderer() renderer.image = (href, title, text) => { return `<img src="${href}" srcset="https: //images.contentful.com/ .../duck.png?w=100 100w, https: //images.contentful.com/ .../duck.png?w=500 500w, https: //images.contentful.com/ .../duck.png?w1000 1000w" sizes="(min-width: 900px) 1000px, (max-width: 900px) and (min-width: 400px) 50em" alt="${text}">` } export default (text) => marked(text, { renderer });
# Heading And a paragraph... 
# Heading And a paragraph...  And a paragraph... 
And a paragraph...
# Heading And a paragraph... ??? And a paragraph... 
And a paragraph...
"Video hack"
// my-markdown-renderer.js import marked from 'marked' const renderer = new
marked.Renderer() renderer.image = (href, title, text) => { return `<img src="${href}" srcset="https: //images.contentful.com/ .../duck.png?w=100 100w, https: //images.contentful.com/ .../duck.png?w=500 500w, https: //images.contentful.com/ .../duck.png?w1000 1000w" sizes="(min-width: 900px) 1000px, (max-width: 900px) and (min-width: 400px) 50em" alt="${text}">` } export default (text) => marked(text, { renderer });
// my-markdown-renderer.js import marked from 'marked' const renderer = new
marked.Renderer() renderer.image = (href, title, text) => { if (/\.mp4$/.test(href)) { return ` <video controls preload="metadata"> <source src="${href}" type="video/mp4"> </video> ` } return `<img src="${href}" srcset="https: //images.contentful.com/ .../duck.png?w=100 100w, https: //images.contentful.com/ .../duck.png?w=500 500w, https: //images.contentful.com/ .../duck.png?w1000 1000w" sizes="(min-width: 900px) 1000px, (max-width: 900px) and (min-width: 400px) 50em" alt="${text}">` } export default (text) => marked(text, { renderer });
// my-markdown-renderer.js import marked from 'marked' const renderer = new
marked.Renderer() renderer.image = (href, title, text) => { if (/\.mp4$/.test(href)) { return ` <video controls preload="metadata"> <source src="${href}" type="video/mp4"> </video> ` } return `<img src="${href}" srcset="https: //images.contentful.com/ .../duck.png?w=100 100w, https: //images.contentful.com/ .../duck.png?w=500 500w, https: //images.contentful.com/ .../duck.png?w1000 1000w" sizes="(min-width: 900px) 1000px, (max-width: 900px) and (min-width: 400px) 50em" alt="${text}">` } export default (text) => marked(text, { renderer });
// my-markdown-renderer.js import marked from 'marked' const renderer = new
marked.Renderer() renderer.image = (href, title, text) => { if (/\.mp4$/.test(href)) { return ` <video controls preload="metadata"> <source src="${href}" type="video/mp4"> </video> ` } return `<img src="${href}" srcset="https: //images.contentful.com/ .../duck.png?w=100 100w, https: //images.contentful.com/ .../duck.png?w=500 500w, https: //images.contentful.com/ .../duck.png?w1000 1000w" sizes="(min-width: 900px) 1000px, (max-width: 900px) and (min-width: 400px) 50em" alt="${text}">` } export default (text) => marked(text, { renderer }); Not pretty, but "works"
# Heading And a paragraph...  And a paragraph... 
And a paragraph...
# Heading And a paragraph...  And a paragraph... 
And a paragraph...
# Heading And a paragraph...  And a paragraph... ???
And a paragraph...
# Heading And a paragraph... ???  And a paragraph...
??? And a paragraph...
# Heading And a paragraph... ???  And a paragraph...
??? ??? !!! ??? Duck!
# Heading And a paragraph... ???  And a paragraph...
??? ??? !!! ??? Duck! Markdown is not made for "complex" use cases
Limited functionality Focuses on semantics Easy to grasp
Limited functionality Not powerful enough Editors don't like it HTML
is "allowed"
How can you solve this with Contentful?
www.contentful.com/r/knowledgebase/topics-and-assemblies/
None
Duck!
{ "sys": { "contentType": { "sys": { "id": "page" }
} }, "fields": { "title": "Page", "components": [ { "sys": { "contentType": { "sys": { "id": "chart" } } } } ] }, ... }
{ "sys": { "contentType": { "sys": { "id": "page" }
} }, "fields": { "title": "Page", "components": [ { "sys": { "contentType": { "sys": { "id": "chart" } } } } ] }, ... } <Page> <Chart /> ... </Page>
{ "sys": { "contentType": { "sys": { "id": "page" }
} }, "fields": { "title": "Page", "components": [ { "sys": { "contentType": { "sys": { "id": "chart" } } } } ] }, ... } <Page> <Chart /> ... </Page> Structured data is perfect for a component-driven approach!
www.contentful.com/blog/2017/10/11/love-letter-to-component-ready-cms/
www.youtube.com/watch?v=i17FKTtIifM&t=408s
MDX
“ MDX is Markdown + JSX, bringing the world of
components to Markdown.
import { Chart } from ' ../components/chart' # Here's a
chart The chart is rendered inside our MDX document. <Chart />
www.docz.site
revealjs.com
jxnblk.com/mdx-deck/
None
It's Reveal.js on steroids.
Are these slide made with mdx-deck?
Could this work in Contentful?
Demo
codesandbox.io
www.npmjs.com/package/smooshpack
None
Stefan, you're breaking portability!
Yeah, kinda...
None
Devs will love it Perfect for docs Component-based
Easy to mess up Not made for publishing Needs file
access Breaks portability easily
None
Love it! But it's not suited for our content editing
needs.
A [link](http://example.com).
A [link](http://example.com).
Duck!
Duck! Duck!
Duck! Duck! Duck!
Duck! Duck! Duck! Duck!
Alice! Alice! Alice! Alice!
Alice! Alice! Alice! Alice! That's not possible with hardcoded values.
Back to square one!
None
None
None
None
Structured Text
Demo
None
www.npmjs.com/package/@contentful/structured-text-html-serializer
www.npmjs.com/package/@contentful/structured-text-html-serializer Serializer will be available for common languages
It supports underline Visual interface Fewer content types
Incoming links support Connected editing flow Platform-portable
www.contentful.com/r/knowledgebase/topics-and-assemblies/
www.contentful.com/r/knowledgebase/topics-and-assemblies/ Topics & Assemblies will still be a thing
Proper content modelling stays important!
So, what about the hover-duck? Duck!
Inline references will be possible Duck!
You can sign up for the alpha today. Talk to
me!
THANKS FOR LISTENING @stefanjudis