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
210
WordPress REST API - Writing Custom Endpoints
mattheu
0
84
Intro to I18N in code
mattheu
0
77
Tips for writing secure code in WordPress
mattheu
1
120
Other Decks in Programming
See All in Programming
さいきょうのレイヤードアーキテクチャについて考えてみた
yahiru
3
750
ARA Ansible for the teams
kksat
0
150
CDK開発におけるコーディング規約の運用
yamanashi_ren01
2
120
Amazon ECS とマイクロサービスから考えるシステム構成
hiyanger
2
560
ペアーズでの、Langfuseを中心とした評価ドリブンなリリースサイクルのご紹介
fukubaka0825
2
320
技術を根付かせる / How to make technology take root
kubode
1
250
コミュニティ駆動 AWS CDK ライブラリ「Open Constructs Library」 / community-cdk-library
gotok365
2
120
苦しいTiDBへの移行を乗り越えて快適な運用を目指す
leveragestech
0
600
Pythonでもちょっとリッチな見た目のアプリを設計してみる
ueponx
1
570
Boost Performance and Developer Productivity with Jakarta EE 11
ivargrimstad
0
280
お前もAI鬼にならないか?👹Bolt & Cursor & Supabase & Vercelで人間をやめるぞ、ジョジョー!👺
taishiyade
6
4k
楽しく向き合う例外対応
okutsu
0
120
Featured
See All Featured
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
114
50k
GitHub's CSS Performance
jonrohan
1030
460k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
59k
Intergalactic Javascript Robots from Outer Space
tanoku
270
27k
Build your cross-platform service in a week with App Engine
jlugia
229
18k
Visualization
eitanlees
146
15k
Designing for Performance
lara
604
68k
Mobile First: as difficult as doing things right
swwweet
223
9.3k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
9
440
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Fontdeck: Realign not Redesign
paulrobertlloyd
83
5.4k
Making the Leap to Tech Lead
cromwellryan
133
9.1k
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