Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Making shortcodes a piece of cake
Search
Matthew Haines-Young
March 10, 2015
Programming
0
24k
Making shortcodes a piece of cake
How we manage complex page elements
in WordPress with Shortcake on Fusion.net
Matthew Haines-Young
March 10, 2015
Tweet
Share
More Decks by Matthew Haines-Young
See All by Matthew Haines-Young
Building Sites with Gutenberg
mattheu
1
200
WordPress REST API - Writing Custom Endpoints
mattheu
0
81
Intro to I18N in code
mattheu
0
73
Tips for writing secure code in WordPress
mattheu
1
120
Other Decks in Programming
See All in Programming
Boost Performance and Developer Productivity with Jakarta EE 11
ivargrimstad
0
550
僕が思い描くTypeScriptの未来を勝手に先取りする
yukukotani
9
2.4k
Amazon BedrockでサーバレスなAIお料理ボットを作成する!!
tosuri13
0
230
事業フェーズの変化に対応する 開発生産性向上のゼロイチ
masaygggg
0
220
マルチモジュールにおけるテスト最適化
fxwx23
0
210
LangChainでWebサイトの内容取得やGitHubソースコード取得
shukob
0
160
Architecture Decision Record (ADR)
nearme_tech
PRO
1
700
The Sequel to a Dream of Ruby Parser's Grammar
ydah
1
220
いつか使える ObjectSpace / Maybe useful ObjectSpace
euglena1215
2
140
大公開!iOS開発の悩みトップ5 〜iOSDC Japan 2024〜
ryunakayama
0
190
[DroidKaigi 2024] Android ViewからJetpack Composeへ 〜Jetpack Compose移行のすゝめ〜 / From Android View to Jetpack Compose: A Guide to Migration
syarihu
1
690
実践!難読化ガイド
mitchan
0
250
Featured
See All Featured
YesSQL, Process and Tooling at Scale
rocio
167
14k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
38
9.2k
A Philosophy of Restraint
colly
202
16k
GraphQLとの向き合い方2022年版
quramy
43
13k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
36
1.7k
Mobile First: as difficult as doing things right
swwweet
221
8.8k
Product Roadmaps are Hard
iamctodd
PRO
48
10k
GitHub's CSS Performance
jonrohan
1030
450k
Building Applications with DynamoDB
mza
90
6k
Clear Off the Table
cherdarchuk
91
320k
Become a Pro
speakerdeck
PRO
22
4.9k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
89
16k
Transcript
MAKING SHORTCODES A PIECE OF CAKE Manage complex page elements
in WordPress with Shortcake https://github.com/fusioneng/Shortcake
None
• US-based, multi-platform media company • Expanding their web presence
• Migrated Fusion.net to WordPress (end 2014) • Launched a big redesign (early 2015) • Want to publish great content on the web
AUTHORS NEED TO BUILD INTERESTING PAGES THEMSELVES ON A DAILY
BASIS
EXAMPLE: BLOCKQUOTE
GOALS • Simple and easy to use tool • No
code • WYSIWYG • Flexible, reusable modules • Simple for developers to add new modules • Make use of existing tools
None
None
None
None
None
None
HOW DO WE DO IT?
• Available in WordPress since 2.5 • WordPress uses them
for galleries, audio and video • Simple code: [name attr="value"] • Converted to HTML when output SHORTCODES
BUT EVERYBODY HATES SHORTCODES!
• Terrible user experience • Users still have to write
code • No discoverability • Poor documentation • Often don’t have previews WHY ARE SHORTCODES BAD?
SHORTCODE PREVIEWS • It is possible to get previews in
the editor • Easier now than it once was • MCE Views • Simple JavaScript API to register a preview for a shortcode
SHORTCAKE = SHORTCODES + MCE VIEWS + INTERFACE
• Mostly JavaScript - Backbone.js • Modules - Grunt +
Browserify • Jasmine for unit testing (Grunt, TravisCI) • PHP to generate preview - output exactly as on the front end TECHNICAL INFO
EXAMPLES FROM FUSION.NET
GALLERY
IMAGE COMPARISON
EMBEDDED PDF
• Interactives. JS apps & games • Liveblogs (WordPress VIP
Liveblogs) • Social Streams. Curated grid of content from Twitter, Instagram etc • Embedding third party content. (Quiz from Playbuzz) OTHER EXAMPLES
SHORTCAKE MAKES USING SHORTCODES A PIECE OF CAKE!
BUT ITS NOT REALLY ABOUT SHORTCODES
IF A USER EVER SEES A SHORTCODE, THEN
WE’VE FAILED
SHORTCAKE MAKES IT EASY TO ADD COMPLEX BLOCKS OF CONTENT