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
520
Markdown, my friend – we have to talk
stefan judis
September 11, 2018
Tweet
Share
More Decks by stefan judis
See All by stefan judis
Things you should know about Frontend Development in 2022
stefanjudis
0
260
Throw yourself out there for fun and profit
stefanjudis
0
28
Back to Boring
stefanjudis
1
110
Wanna scale up? Make sure your CMS is ready for it!
stefanjudis
0
110
Did we(b development) lose the right direction?
stefanjudis
6
1.9k
Regular expressions – my secret love
stefanjudis
1
870
Write a Function
stefanjudis
0
380
React in a worker, worker, worker...
stefanjudis
2
340
HTTP headers for the responsible developer
stefanjudis
5
3.9k
Other Decks in Technology
See All in Technology
03_ユーザビリティテスト
kouzoukaikaku
0
430
AWS re:Invent 2022で発表された新機能を試してみた ~Cloud OperationとSecurity~ / New Cloud Operation and Security Features Announced at AWS reInvent 2022
yuj1osm
1
210
OPENLOGI Company Profile
hr01
0
12k
ChatGPT for Hacking
anugrahsr
0
4.4k
組織に対してSREを適用するとどうなるか
kuniim
7
2.7k
OpenShiftのリリースノートを整理してみた
loftkun
2
360
もし本番ネットワークをまるごと仮想環境に”コピー”できたらうれしいですか? / janog51
corestate55
0
380
S3とCloudWatch Logsの見直しから始めるコスト削減 / Cost saving S3 and CloudWatch Logs
shonansurvivors
0
240
地方自治体業務あるある ーアナログ最適化編-
y150saya
1
270
OCI技術資料 : ロード・バランサー 詳細 / Load Balancer 200
ocise
2
7.2k
MoT/コネヒト/Kanmu が語るプロダクト開発xデータ分析 - 分析から機械学習システムの開発まで一人で複数ロールを担う大変さ
masatakashiwagi
3
730
FlexScan HD2452Wの 後継を探して
tring
0
6.3k
Featured
See All Featured
Facilitating Awesome Meetings
lara
33
4.6k
Designing Experiences People Love
moore
130
22k
Learning to Love Humans: Emotional Interface Design
aarron
263
38k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
270
12k
Done Done
chrislema
178
14k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
182
15k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
10
1.3k
Statistics for Hackers
jakevdp
785
210k
Designing for humans not robots
tammielis
245
24k
ParisWeb 2013: Learning to Love: Crash Course in Emotional UX Design
dotmariusz
101
6.2k
Building Better People: How to give real-time feedback that sticks.
wjessup
346
17k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
217
21k
Transcript
@stefanjudis *Markdown, my friend* **We have to talk!**
STEFAN JUDIS @stefanjudis www.stefanjudis.com
[email protected]
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