SlideShare a Scribd company logo
5 年後還是新手
WordPress Plugin 開發大冒險
The Levels - Agenda
- 故事背景
Background
- 新手村
Why, and how to start your own plugin?
- 打怪
Here comes the users
- 打大佬
Gutenberg, Modern Admin UI, Security
Background - About me
Fullstack developer; Game Developer
Tech lead, Liker Land
Be open source!
Background - Our plugin and products
LikeCoin:
blockchain for content creators and
publishing
LikerLand:
Writing NFTs and bookstore
Web3Press:
Web3 plugin for WordPress users
Introduction - Why make a plugin?
Site owners:
- Enable and disable plugin easily
- Track the actual changes all in one place
- WordPress upgrade doesn’t break your change
Developer:
- Share your code and functionalities
Business:
- Sell your product!
Overview - How to make a plugin?
Plugin Handbook - 新手指南
https://developer.wordpress.org/plugins/
- Hooks
- Change the post content on publish “content”
- Add a Google Analyics in your site header “hook_header”
- APIs
- Post your post to https://matters.town as a draft
- Send your url to Internet Archive for snapshot
Overview - Code Setup
WordPress runs on:
Basic (oldschool) setup
- PHP - Pages, Logic, where hook happen
- Javascript - Browser interactions, update UI and calls
API
- CSS - Style your UI
Protip: Start with a boiler plate
- wp scaffold plugin
- https://github.com/devinvinson/WordPress-Plugin-Boil
erplate
Overview - Code best pratices
https://developer.wordpress.org/plugins/plugin-basics/best-practices/
e.g. WordPress PHP codes are all in one global namespace
If you function has a 公廁名 then it will either overwrite someone else’s stuff,
or get overwritten.
Prefix your functions (likecoin_foo) vs Objects (still has to be unique in class
name)
Overview - License
- WordPress is GPLv2
- Infective open source license
- Pick anything GPLv2 compatible, say
GPLv2
- Remember to add file headers!
- https://developer.wordpress.org/plugin
s/plugin-basics/including-a-software-lic
ense/
Overview - Done? Ship it!
- GPLv2 compatible
- Code must be human
readable, or come with
source map/source code
- Plugin slug approved by
wordpress.org
- Push version to SVN
- Profit!
You can always view code of
any plugin on wordpress.org
SVN
Now the true adventure begins
Hey I use PHP 5.2 and your
site breaks
https://github.com/likecoin/likecoin-wordpress/pull/28
Hey I use PHP (insert legacy version here)
- WordPress can run on PHP 5.2 - 8.0
- https://make.wordpress.org/core/handboo
k/references/php-compatibility-and-wordp
ress-versions/
- Newer syntax won’t work on sites with
newer PHP
- Dev: Always prefer older syntax
- Define minimum support PHP version in
your plugin
- Site owner: Try to upgrade PHP!
Hey can it also be in
Spanish
This one is from discord
Hey can it also has a (insert language here) version?
Internationalization problem - i18n
Meet translate.wordpress.org
Meet translate.wordpress.org
Keys are the original string
Anyone can propose translation for any string and locale
How do I make sure my strings show up?
PHP:
__( 'Hello, dear user!', 'plugin-slug’ );
Javascript:
Legacy: wp_localize_script() and pass string from PHP
Modern: @wordpress/i18n
https://codex.wordpress.org/I18n_for_WordPress_Developers
Polyglot team, i.e. You don’t own your i18n!
- Making the plugin does not automatically makes you a approved translator
- Try get approved as PTE for your plugin, per locale basis
https://make.wordpress.org/polyglots/handbook/plugin-theme-authors-guide/pte-re
quest/
How You can help
- Help translate WordPress Core
- Help translate any plugin you use/like
Q: Hey I use AMP, your
iframe broken
https://github.com/likecoin/likecoin-wordpress/pull/51
Hey I use AMP, …
- Many sites enable AMP for SEO
- AMP plugin https://wordpress.org/plugins/amp/
- When AMP is active, not only style get simplified, e.g.
iframe get sandboxed
- In our case, add attribute we need from
https://developer.mozilla.org/en-US/docs/Web/HTML/
Element/iframe#sandbox
- In PHP, test for AMP mode using
is_amp_endpoint() / amp_is_request()
- Always test the AMP version!
Hey I want to use
shortcode!
https://github.com/likecoin/likecoin-wordpress/pull/54
Hey I want to use shortcode!
What is shortcode?
[likecoin]
In fact easy to support parameter too
[likecoin liker-id=ckxpress]
Turns out it is simple to implement in “content” filter with
add_shortcode()
Hard to document though!
Hey your plugin throw JS
error after upgrade!
https://github.com/likecoin/likecoin-wordpress/pull/140
Hey your plugin upgrade does not upgrade
- Generally a hard to debug issue
- In this particular case, Javascript was cached
- Most sites has some kind of CDN cache for all js, css files
- Oldschool way
$ver = plugin version in wp_enqueue_script() and wp_enqueue_style()
- Modern way:
@wordpress/script build and index.asset.php
Here are only two hard things in Computer Science: cache invalidation and
naming things
Hey your stuff doesn’t show
properly in my theme
https://github.com/likecoin/likecoin-wordpress/pull/88
Hey your stuff doesn’t show properly in my theme
- Normally this one is very hard
- All the themes with different DOM and
CSS => can’t fit all
- Turns out just wrapping our iframe in
<figure> does wonder
- This is due to blocks are mostly
wrapped with <p> or <figure>, modern
themes are designed to handle them
properly
Did we just mention blocks?
The Bosses
Gutenberg
Modern block editor
Gutenberg
- Block based editor
- Full site editing
- Released as default in WordPress 5.0
- Now the old editor is a plugin called
“Classic Editor”
What does that mean for plugin?
- Editor sidebar support
- Block support
Editor Sidebar - metabox is now outdated
Editor Sidebar - metabox is now outdated
Editor Sidebar - metabox is now outdated
Metabox in its simplest form, is just extra fields in HTML <form>
- Submit post => Submit fields in metabox => Updates data with post
Sidebar is a complex web app
- On publish, Gutenberg does a XHR instead of refresh
- Your sidebar is expected to listen to events and does XHR too
- Maybe also multitab JavaScript based navigation, like a full blown SPA
- In fact it is a React SPA!
Blocks - shortcode is now outdated
Remember shortcode [likecoin liker-id=ckxpress]?
How about a UI to list all shortcodes, configure their parameters, and maybe also
a preview?
Blocks - shortcode is now outdated
- Add your own blocks for site
- block.json defines all the metadata
- edit.js and save.js defines different behaviour, in
editor vs in actual post view
- Make variants for blocks that has common attributes
https://developer.wordpress.org/block-editor/
@wordpress/data
Modern admin UI and its data
- PHP renders HTML
- PHP GET => Fill data with HTML
- What about JavaScript? Write another AJAX API in PHP
- Write AJAX API => Need to check admin yourself
- So two set of codes for same thing
PHP: data are written directly into HTML (We call that SSR nowadays)
Javascript + AJAX API: data are fetched with XHR and updated by
JavaScript (Hydration!)
- This sound suspiciously like “reinventing my own next.js/nuxt.js for every form
input”...
Before @wordpress/data
After @wordpress/data
Redux-like syntax abstract all the API calls and authentication behind a selector
const isCurrentPostPublished = select('core/editor').isCurrentPostPublished()
const postDate = select('core/editor').getEditedPostAttribute('modified_gmt')
Cool!
But… in no where are the available data fields clearly documented!
Security!
How many CVE are from plugin instead of core?
Why a plugin breach affect the whole site?
- WordPress code runs in a global space
- No effective isolation between plugins, or actually, everything
- Horrible in security sense
i.e.
You can write a plugin to change any user/admin data
You can write a plugin to change data used by other plugin
- Actually thats how plugin for plugins work
e.g. woocommence, woocommence plugins, woocommence plugins pro
version, which is a paid plugin for woocommence plugin
How can plugin developer prevent this?
- Sanitize all input and output
Why both? Don’t trust any data to be safe
sanitize_*, esacpe_*
洗手洗手洗手
- Use WordPress provided function instead of PHP or writing
your own
wp_remote_get()
- Wordpress coding standard linter warns all unsantized output
https://developer.wordpress.org/plugins/security/
How can site owner prevent this?
Disable unneeded plugin
- Disabling plugin disable many of its hook and API, reducing attack surfaces
Uninstall unneeded plugin
- Plugin can hook on install, uninstall and upgrade
Try to understand what data and option are created by your plugin, and does it
clean them up after uninstall?
- WordPress does not record these on install, devs can be lazy or don’t even
know they should clean up data
There’s more…
Like 200 more things about
- Really silly APIs
- Subtle non-documented functions
- Stupid mistakes we made (mostly this)
… that I can talk about, but let’s not dig too
deep into this here.
Hey it’s Q&A
Now it’s your chance to contribute content to this slide!

More Related Content

Similar to 5 年後還是新手 - WordPress Plugin 開發大冒險 - GOTY

Modern Web Application Development Workflow - EclipseCon France 2014
Modern Web Application Development Workflow - EclipseCon France 2014Modern Web Application Development Workflow - EclipseCon France 2014
Modern Web Application Development Workflow - EclipseCon France 2014
Stéphane Bégaudeau
 
Faster WordPress Workflows
Faster WordPress WorkflowsFaster WordPress Workflows
Faster WordPress Workflows
Eladio Jose Abquina
 
Plugin development demystified 2017
Plugin development demystified 2017Plugin development demystified 2017
Plugin development demystified 2017
ylefebvre
 
Using the new WordPress REST API
Using the new WordPress REST APIUsing the new WordPress REST API
Using the new WordPress REST API
Caldera Labs
 
Developers, Be a Bada$$ with WP-CLI
Developers, Be a Bada$$ with WP-CLIDevelopers, Be a Bada$$ with WP-CLI
Developers, Be a Bada$$ with WP-CLI
WP Engine
 
Vue micro frontend implementation patterns
Vue micro frontend implementation patternsVue micro frontend implementation patterns
Vue micro frontend implementation patterns
Albert Brand
 
Webpack: from 0 to 2
Webpack: from 0 to 2Webpack: from 0 to 2
Webpack: from 0 to 2
Alessandro Bellini
 
Profiling PHP with Xdebug / Webgrind
Profiling PHP with Xdebug / WebgrindProfiling PHP with Xdebug / Webgrind
Profiling PHP with Xdebug / Webgrind
Sam Keen
 
PHP on Windows
PHP on WindowsPHP on Windows
PHP on Windows
Maarten Balliauw
 
PHP on Windows
PHP on WindowsPHP on Windows
PHP on Windows
guest60c7659
 
Effizientere WordPress-Plugin-Entwicklung mit Softwaretests
Effizientere WordPress-Plugin-Entwicklung mit SoftwaretestsEffizientere WordPress-Plugin-Entwicklung mit Softwaretests
Effizientere WordPress-Plugin-Entwicklung mit Softwaretests
DECK36
 
Modern Web Application Development Workflow - EclipseCon Europe 2014
Modern Web Application Development Workflow - EclipseCon Europe 2014Modern Web Application Development Workflow - EclipseCon Europe 2014
Modern Web Application Development Workflow - EclipseCon Europe 2014
Stéphane Bégaudeau
 
1 pluginable laravel cms
1 pluginable laravel cms1 pluginable laravel cms
1 pluginable laravel cms
Nareerat Chan
 
Building Mobile Friendly APIs in Rails
Building Mobile Friendly APIs in RailsBuilding Mobile Friendly APIs in Rails
Building Mobile Friendly APIs in Rails
Jim Jeffers
 
Setting up the hyperledger composer in ubuntu
Setting up the hyperledger composer in ubuntuSetting up the hyperledger composer in ubuntu
Setting up the hyperledger composer in ubuntu
kesavan N B
 
WordPress Optimization & Security - LAC 2013, London
WordPress Optimization & Security - LAC 2013, LondonWordPress Optimization & Security - LAC 2013, London
WordPress Optimization & Security - LAC 2013, London
Bastian Grimm
 
AD113 Speed Up Your Applications w/ Nginx and PageSpeed
AD113  Speed Up Your Applications w/ Nginx and PageSpeedAD113  Speed Up Your Applications w/ Nginx and PageSpeed
AD113 Speed Up Your Applications w/ Nginx and PageSpeed
edm00se
 
A glance at the Rust SWC
A glance at the Rust SWCA glance at the Rust SWC
A glance at the Rust SWC
Thien Ly
 
unit1 part 1 sem4 php.docx
unit1 part 1 sem4 php.docxunit1 part 1 sem4 php.docx
unit1 part 1 sem4 php.docx
charvi parth Lastpatel
 

Similar to 5 年後還是新手 - WordPress Plugin 開發大冒險 - GOTY (20)

Modern Web Application Development Workflow - EclipseCon France 2014
Modern Web Application Development Workflow - EclipseCon France 2014Modern Web Application Development Workflow - EclipseCon France 2014
Modern Web Application Development Workflow - EclipseCon France 2014
 
Faster WordPress Workflows
Faster WordPress WorkflowsFaster WordPress Workflows
Faster WordPress Workflows
 
Plugin development demystified 2017
Plugin development demystified 2017Plugin development demystified 2017
Plugin development demystified 2017
 
Using the new WordPress REST API
Using the new WordPress REST APIUsing the new WordPress REST API
Using the new WordPress REST API
 
Developers, Be a Bada$$ with WP-CLI
Developers, Be a Bada$$ with WP-CLIDevelopers, Be a Bada$$ with WP-CLI
Developers, Be a Bada$$ with WP-CLI
 
Vue micro frontend implementation patterns
Vue micro frontend implementation patternsVue micro frontend implementation patterns
Vue micro frontend implementation patterns
 
Webpack: from 0 to 2
Webpack: from 0 to 2Webpack: from 0 to 2
Webpack: from 0 to 2
 
Profiling PHP with Xdebug / Webgrind
Profiling PHP with Xdebug / WebgrindProfiling PHP with Xdebug / Webgrind
Profiling PHP with Xdebug / Webgrind
 
PHP on Windows
PHP on WindowsPHP on Windows
PHP on Windows
 
PHP on Windows
PHP on WindowsPHP on Windows
PHP on Windows
 
Effizientere WordPress-Plugin-Entwicklung mit Softwaretests
Effizientere WordPress-Plugin-Entwicklung mit SoftwaretestsEffizientere WordPress-Plugin-Entwicklung mit Softwaretests
Effizientere WordPress-Plugin-Entwicklung mit Softwaretests
 
WPDay Bologna 2013
WPDay Bologna 2013WPDay Bologna 2013
WPDay Bologna 2013
 
Modern Web Application Development Workflow - EclipseCon Europe 2014
Modern Web Application Development Workflow - EclipseCon Europe 2014Modern Web Application Development Workflow - EclipseCon Europe 2014
Modern Web Application Development Workflow - EclipseCon Europe 2014
 
1 pluginable laravel cms
1 pluginable laravel cms1 pluginable laravel cms
1 pluginable laravel cms
 
Building Mobile Friendly APIs in Rails
Building Mobile Friendly APIs in RailsBuilding Mobile Friendly APIs in Rails
Building Mobile Friendly APIs in Rails
 
Setting up the hyperledger composer in ubuntu
Setting up the hyperledger composer in ubuntuSetting up the hyperledger composer in ubuntu
Setting up the hyperledger composer in ubuntu
 
WordPress Optimization & Security - LAC 2013, London
WordPress Optimization & Security - LAC 2013, LondonWordPress Optimization & Security - LAC 2013, London
WordPress Optimization & Security - LAC 2013, London
 
AD113 Speed Up Your Applications w/ Nginx and PageSpeed
AD113  Speed Up Your Applications w/ Nginx and PageSpeedAD113  Speed Up Your Applications w/ Nginx and PageSpeed
AD113 Speed Up Your Applications w/ Nginx and PageSpeed
 
A glance at the Rust SWC
A glance at the Rust SWCA glance at the Rust SWC
A glance at the Rust SWC
 
unit1 part 1 sem4 php.docx
unit1 part 1 sem4 php.docxunit1 part 1 sem4 php.docx
unit1 part 1 sem4 php.docx
 

More from William Chong

SEO 門外漢入門
SEO 門外漢入門SEO 門外漢入門
SEO 門外漢入門
William Chong
 
Disneyland: details in imagineering
Disneyland: details in imagineeringDisneyland: details in imagineering
Disneyland: details in imagineering
William Chong
 
Writing NFT - POAP for Content
Writing NFT - POAP for ContentWriting NFT - POAP for Content
Writing NFT - POAP for Content
William Chong
 
Game Design 9up
Game Design 9upGame Design 9up
Game Design 9up
William Chong
 
Expecto Patronum! Stable Diffusion!
Expecto Patronum! Stable Diffusion!Expecto Patronum! Stable Diffusion!
Expecto Patronum! Stable Diffusion!
William Chong
 
Introduction to data visualization
Introduction to data visualizationIntroduction to data visualization
Introduction to data visualization
William Chong
 
Introducing Vtuber LikeCoin chan - Vtuber culture and how to
Introducing Vtuber LikeCoin chan - Vtuber culture and how toIntroducing Vtuber LikeCoin chan - Vtuber culture and how to
Introducing Vtuber LikeCoin chan - Vtuber culture and how to
William Chong
 
Road to cloud hero
Road to cloud heroRoad to cloud hero
Road to cloud hero
William Chong
 
HKOSCON 2020 - Open by default
HKOSCON 2020 - Open by defaultHKOSCON 2020 - Open by default
HKOSCON 2020 - Open by default
William Chong
 
LikeCoin SDK and API sharing
LikeCoin SDK and API sharingLikeCoin SDK and API sharing
LikeCoin SDK and API sharing
William Chong
 
LikeCoin SDK 及 API 分享
LikeCoin SDK 及 API 分享LikeCoin SDK 及 API 分享
LikeCoin SDK 及 API 分享
William Chong
 
Intro to Github Actions @likecoin
Intro to Github Actions @likecoinIntro to Github Actions @likecoin
Intro to Github Actions @likecoin
William Chong
 

More from William Chong (12)

SEO 門外漢入門
SEO 門外漢入門SEO 門外漢入門
SEO 門外漢入門
 
Disneyland: details in imagineering
Disneyland: details in imagineeringDisneyland: details in imagineering
Disneyland: details in imagineering
 
Writing NFT - POAP for Content
Writing NFT - POAP for ContentWriting NFT - POAP for Content
Writing NFT - POAP for Content
 
Game Design 9up
Game Design 9upGame Design 9up
Game Design 9up
 
Expecto Patronum! Stable Diffusion!
Expecto Patronum! Stable Diffusion!Expecto Patronum! Stable Diffusion!
Expecto Patronum! Stable Diffusion!
 
Introduction to data visualization
Introduction to data visualizationIntroduction to data visualization
Introduction to data visualization
 
Introducing Vtuber LikeCoin chan - Vtuber culture and how to
Introducing Vtuber LikeCoin chan - Vtuber culture and how toIntroducing Vtuber LikeCoin chan - Vtuber culture and how to
Introducing Vtuber LikeCoin chan - Vtuber culture and how to
 
Road to cloud hero
Road to cloud heroRoad to cloud hero
Road to cloud hero
 
HKOSCON 2020 - Open by default
HKOSCON 2020 - Open by defaultHKOSCON 2020 - Open by default
HKOSCON 2020 - Open by default
 
LikeCoin SDK and API sharing
LikeCoin SDK and API sharingLikeCoin SDK and API sharing
LikeCoin SDK and API sharing
 
LikeCoin SDK 及 API 分享
LikeCoin SDK 及 API 分享LikeCoin SDK 及 API 分享
LikeCoin SDK 及 API 分享
 
Intro to Github Actions @likecoin
Intro to Github Actions @likecoinIntro to Github Actions @likecoin
Intro to Github Actions @likecoin
 

Recently uploaded

The Art of the Pitch: WordPress Relationships and Sales
The Art of the Pitch: WordPress Relationships and SalesThe Art of the Pitch: WordPress Relationships and Sales
The Art of the Pitch: WordPress Relationships and Sales
Laura Byrne
 
UiPath Test Automation using UiPath Test Suite series, part 3
UiPath Test Automation using UiPath Test Suite series, part 3UiPath Test Automation using UiPath Test Suite series, part 3
UiPath Test Automation using UiPath Test Suite series, part 3
DianaGray10
 
Accelerate your Kubernetes clusters with Varnish Caching
Accelerate your Kubernetes clusters with Varnish CachingAccelerate your Kubernetes clusters with Varnish Caching
Accelerate your Kubernetes clusters with Varnish Caching
Thijs Feryn
 
FIDO Alliance Osaka Seminar: Passkeys and the Road Ahead.pdf
FIDO Alliance Osaka Seminar: Passkeys and the Road Ahead.pdfFIDO Alliance Osaka Seminar: Passkeys and the Road Ahead.pdf
FIDO Alliance Osaka Seminar: Passkeys and the Road Ahead.pdf
FIDO Alliance
 
PCI PIN Basics Webinar from the Controlcase Team
PCI PIN Basics Webinar from the Controlcase TeamPCI PIN Basics Webinar from the Controlcase Team
PCI PIN Basics Webinar from the Controlcase Team
ControlCase
 
Bits & Pixels using AI for Good.........
Bits & Pixels using AI for Good.........Bits & Pixels using AI for Good.........
Bits & Pixels using AI for Good.........
Alison B. Lowndes
 
Leading Change strategies and insights for effective change management pdf 1.pdf
Leading Change strategies and insights for effective change management pdf 1.pdfLeading Change strategies and insights for effective change management pdf 1.pdf
Leading Change strategies and insights for effective change management pdf 1.pdf
OnBoard
 
GraphRAG is All You need? LLM & Knowledge Graph
GraphRAG is All You need? LLM & Knowledge GraphGraphRAG is All You need? LLM & Knowledge Graph
GraphRAG is All You need? LLM & Knowledge Graph
Guy Korland
 
FIDO Alliance Osaka Seminar: Overview.pdf
FIDO Alliance Osaka Seminar: Overview.pdfFIDO Alliance Osaka Seminar: Overview.pdf
FIDO Alliance Osaka Seminar: Overview.pdf
FIDO Alliance
 
Unsubscribed: Combat Subscription Fatigue With a Membership Mentality by Head...
Unsubscribed: Combat Subscription Fatigue With a Membership Mentality by Head...Unsubscribed: Combat Subscription Fatigue With a Membership Mentality by Head...
Unsubscribed: Combat Subscription Fatigue With a Membership Mentality by Head...
Product School
 
FIDO Alliance Osaka Seminar: Passkeys at Amazon.pdf
FIDO Alliance Osaka Seminar: Passkeys at Amazon.pdfFIDO Alliance Osaka Seminar: Passkeys at Amazon.pdf
FIDO Alliance Osaka Seminar: Passkeys at Amazon.pdf
FIDO Alliance
 
Neuro-symbolic is not enough, we need neuro-*semantic*
Neuro-symbolic is not enough, we need neuro-*semantic*Neuro-symbolic is not enough, we need neuro-*semantic*
Neuro-symbolic is not enough, we need neuro-*semantic*
Frank van Harmelen
 
AI for Every Business: Unlocking Your Product's Universal Potential by VP of ...
AI for Every Business: Unlocking Your Product's Universal Potential by VP of ...AI for Every Business: Unlocking Your Product's Universal Potential by VP of ...
AI for Every Business: Unlocking Your Product's Universal Potential by VP of ...
Product School
 
DevOps and Testing slides at DASA Connect
DevOps and Testing slides at DASA ConnectDevOps and Testing slides at DASA Connect
DevOps and Testing slides at DASA Connect
Kari Kakkonen
 
FIDO Alliance Osaka Seminar: FIDO Security Aspects.pdf
FIDO Alliance Osaka Seminar: FIDO Security Aspects.pdfFIDO Alliance Osaka Seminar: FIDO Security Aspects.pdf
FIDO Alliance Osaka Seminar: FIDO Security Aspects.pdf
FIDO Alliance
 
GenAISummit 2024 May 28 Sri Ambati Keynote: AGI Belongs to The Community in O...
GenAISummit 2024 May 28 Sri Ambati Keynote: AGI Belongs to The Community in O...GenAISummit 2024 May 28 Sri Ambati Keynote: AGI Belongs to The Community in O...
GenAISummit 2024 May 28 Sri Ambati Keynote: AGI Belongs to The Community in O...
Sri Ambati
 
Builder.ai Founder Sachin Dev Duggal's Strategic Approach to Create an Innova...
Builder.ai Founder Sachin Dev Duggal's Strategic Approach to Create an Innova...Builder.ai Founder Sachin Dev Duggal's Strategic Approach to Create an Innova...
Builder.ai Founder Sachin Dev Duggal's Strategic Approach to Create an Innova...
Ramesh Iyer
 
Dev Dives: Train smarter, not harder – active learning and UiPath LLMs for do...
Dev Dives: Train smarter, not harder – active learning and UiPath LLMs for do...Dev Dives: Train smarter, not harder – active learning and UiPath LLMs for do...
Dev Dives: Train smarter, not harder – active learning and UiPath LLMs for do...
UiPathCommunity
 
FIDO Alliance Osaka Seminar: The WebAuthn API and Discoverable Credentials.pdf
FIDO Alliance Osaka Seminar: The WebAuthn API and Discoverable Credentials.pdfFIDO Alliance Osaka Seminar: The WebAuthn API and Discoverable Credentials.pdf
FIDO Alliance Osaka Seminar: The WebAuthn API and Discoverable Credentials.pdf
FIDO Alliance
 
GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using Deplo...
GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using Deplo...GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using Deplo...
GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using Deplo...
James Anderson
 

Recently uploaded (20)

The Art of the Pitch: WordPress Relationships and Sales
The Art of the Pitch: WordPress Relationships and SalesThe Art of the Pitch: WordPress Relationships and Sales
The Art of the Pitch: WordPress Relationships and Sales
 
UiPath Test Automation using UiPath Test Suite series, part 3
UiPath Test Automation using UiPath Test Suite series, part 3UiPath Test Automation using UiPath Test Suite series, part 3
UiPath Test Automation using UiPath Test Suite series, part 3
 
Accelerate your Kubernetes clusters with Varnish Caching
Accelerate your Kubernetes clusters with Varnish CachingAccelerate your Kubernetes clusters with Varnish Caching
Accelerate your Kubernetes clusters with Varnish Caching
 
FIDO Alliance Osaka Seminar: Passkeys and the Road Ahead.pdf
FIDO Alliance Osaka Seminar: Passkeys and the Road Ahead.pdfFIDO Alliance Osaka Seminar: Passkeys and the Road Ahead.pdf
FIDO Alliance Osaka Seminar: Passkeys and the Road Ahead.pdf
 
PCI PIN Basics Webinar from the Controlcase Team
PCI PIN Basics Webinar from the Controlcase TeamPCI PIN Basics Webinar from the Controlcase Team
PCI PIN Basics Webinar from the Controlcase Team
 
Bits & Pixels using AI for Good.........
Bits & Pixels using AI for Good.........Bits & Pixels using AI for Good.........
Bits & Pixels using AI for Good.........
 
Leading Change strategies and insights for effective change management pdf 1.pdf
Leading Change strategies and insights for effective change management pdf 1.pdfLeading Change strategies and insights for effective change management pdf 1.pdf
Leading Change strategies and insights for effective change management pdf 1.pdf
 
GraphRAG is All You need? LLM & Knowledge Graph
GraphRAG is All You need? LLM & Knowledge GraphGraphRAG is All You need? LLM & Knowledge Graph
GraphRAG is All You need? LLM & Knowledge Graph
 
FIDO Alliance Osaka Seminar: Overview.pdf
FIDO Alliance Osaka Seminar: Overview.pdfFIDO Alliance Osaka Seminar: Overview.pdf
FIDO Alliance Osaka Seminar: Overview.pdf
 
Unsubscribed: Combat Subscription Fatigue With a Membership Mentality by Head...
Unsubscribed: Combat Subscription Fatigue With a Membership Mentality by Head...Unsubscribed: Combat Subscription Fatigue With a Membership Mentality by Head...
Unsubscribed: Combat Subscription Fatigue With a Membership Mentality by Head...
 
FIDO Alliance Osaka Seminar: Passkeys at Amazon.pdf
FIDO Alliance Osaka Seminar: Passkeys at Amazon.pdfFIDO Alliance Osaka Seminar: Passkeys at Amazon.pdf
FIDO Alliance Osaka Seminar: Passkeys at Amazon.pdf
 
Neuro-symbolic is not enough, we need neuro-*semantic*
Neuro-symbolic is not enough, we need neuro-*semantic*Neuro-symbolic is not enough, we need neuro-*semantic*
Neuro-symbolic is not enough, we need neuro-*semantic*
 
AI for Every Business: Unlocking Your Product's Universal Potential by VP of ...
AI for Every Business: Unlocking Your Product's Universal Potential by VP of ...AI for Every Business: Unlocking Your Product's Universal Potential by VP of ...
AI for Every Business: Unlocking Your Product's Universal Potential by VP of ...
 
DevOps and Testing slides at DASA Connect
DevOps and Testing slides at DASA ConnectDevOps and Testing slides at DASA Connect
DevOps and Testing slides at DASA Connect
 
FIDO Alliance Osaka Seminar: FIDO Security Aspects.pdf
FIDO Alliance Osaka Seminar: FIDO Security Aspects.pdfFIDO Alliance Osaka Seminar: FIDO Security Aspects.pdf
FIDO Alliance Osaka Seminar: FIDO Security Aspects.pdf
 
GenAISummit 2024 May 28 Sri Ambati Keynote: AGI Belongs to The Community in O...
GenAISummit 2024 May 28 Sri Ambati Keynote: AGI Belongs to The Community in O...GenAISummit 2024 May 28 Sri Ambati Keynote: AGI Belongs to The Community in O...
GenAISummit 2024 May 28 Sri Ambati Keynote: AGI Belongs to The Community in O...
 
Builder.ai Founder Sachin Dev Duggal's Strategic Approach to Create an Innova...
Builder.ai Founder Sachin Dev Duggal's Strategic Approach to Create an Innova...Builder.ai Founder Sachin Dev Duggal's Strategic Approach to Create an Innova...
Builder.ai Founder Sachin Dev Duggal's Strategic Approach to Create an Innova...
 
Dev Dives: Train smarter, not harder – active learning and UiPath LLMs for do...
Dev Dives: Train smarter, not harder – active learning and UiPath LLMs for do...Dev Dives: Train smarter, not harder – active learning and UiPath LLMs for do...
Dev Dives: Train smarter, not harder – active learning and UiPath LLMs for do...
 
FIDO Alliance Osaka Seminar: The WebAuthn API and Discoverable Credentials.pdf
FIDO Alliance Osaka Seminar: The WebAuthn API and Discoverable Credentials.pdfFIDO Alliance Osaka Seminar: The WebAuthn API and Discoverable Credentials.pdf
FIDO Alliance Osaka Seminar: The WebAuthn API and Discoverable Credentials.pdf
 
GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using Deplo...
GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using Deplo...GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using Deplo...
GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using Deplo...
 

5 年後還是新手 - WordPress Plugin 開發大冒險 - GOTY

  • 2. The Levels - Agenda - 故事背景 Background - 新手村 Why, and how to start your own plugin? - 打怪 Here comes the users - 打大佬 Gutenberg, Modern Admin UI, Security
  • 3. Background - About me Fullstack developer; Game Developer Tech lead, Liker Land Be open source!
  • 4. Background - Our plugin and products LikeCoin: blockchain for content creators and publishing LikerLand: Writing NFTs and bookstore Web3Press: Web3 plugin for WordPress users
  • 5. Introduction - Why make a plugin? Site owners: - Enable and disable plugin easily - Track the actual changes all in one place - WordPress upgrade doesn’t break your change Developer: - Share your code and functionalities Business: - Sell your product!
  • 6. Overview - How to make a plugin? Plugin Handbook - 新手指南 https://developer.wordpress.org/plugins/ - Hooks - Change the post content on publish “content” - Add a Google Analyics in your site header “hook_header” - APIs - Post your post to https://matters.town as a draft - Send your url to Internet Archive for snapshot
  • 7. Overview - Code Setup WordPress runs on: Basic (oldschool) setup - PHP - Pages, Logic, where hook happen - Javascript - Browser interactions, update UI and calls API - CSS - Style your UI Protip: Start with a boiler plate - wp scaffold plugin - https://github.com/devinvinson/WordPress-Plugin-Boil erplate
  • 8. Overview - Code best pratices https://developer.wordpress.org/plugins/plugin-basics/best-practices/ e.g. WordPress PHP codes are all in one global namespace If you function has a 公廁名 then it will either overwrite someone else’s stuff, or get overwritten. Prefix your functions (likecoin_foo) vs Objects (still has to be unique in class name)
  • 9. Overview - License - WordPress is GPLv2 - Infective open source license - Pick anything GPLv2 compatible, say GPLv2 - Remember to add file headers! - https://developer.wordpress.org/plugin s/plugin-basics/including-a-software-lic ense/
  • 10. Overview - Done? Ship it! - GPLv2 compatible - Code must be human readable, or come with source map/source code - Plugin slug approved by wordpress.org - Push version to SVN - Profit! You can always view code of any plugin on wordpress.org SVN
  • 11. Now the true adventure begins
  • 12. Hey I use PHP 5.2 and your site breaks https://github.com/likecoin/likecoin-wordpress/pull/28
  • 13. Hey I use PHP (insert legacy version here) - WordPress can run on PHP 5.2 - 8.0 - https://make.wordpress.org/core/handboo k/references/php-compatibility-and-wordp ress-versions/ - Newer syntax won’t work on sites with newer PHP - Dev: Always prefer older syntax - Define minimum support PHP version in your plugin - Site owner: Try to upgrade PHP!
  • 14. Hey can it also be in Spanish This one is from discord
  • 15. Hey can it also has a (insert language here) version? Internationalization problem - i18n Meet translate.wordpress.org
  • 16. Meet translate.wordpress.org Keys are the original string Anyone can propose translation for any string and locale
  • 17. How do I make sure my strings show up? PHP: __( 'Hello, dear user!', 'plugin-slug’ ); Javascript: Legacy: wp_localize_script() and pass string from PHP Modern: @wordpress/i18n https://codex.wordpress.org/I18n_for_WordPress_Developers
  • 18. Polyglot team, i.e. You don’t own your i18n! - Making the plugin does not automatically makes you a approved translator - Try get approved as PTE for your plugin, per locale basis https://make.wordpress.org/polyglots/handbook/plugin-theme-authors-guide/pte-re quest/
  • 19. How You can help - Help translate WordPress Core - Help translate any plugin you use/like
  • 20. Q: Hey I use AMP, your iframe broken https://github.com/likecoin/likecoin-wordpress/pull/51
  • 21. Hey I use AMP, … - Many sites enable AMP for SEO - AMP plugin https://wordpress.org/plugins/amp/ - When AMP is active, not only style get simplified, e.g. iframe get sandboxed - In our case, add attribute we need from https://developer.mozilla.org/en-US/docs/Web/HTML/ Element/iframe#sandbox - In PHP, test for AMP mode using is_amp_endpoint() / amp_is_request() - Always test the AMP version!
  • 22. Hey I want to use shortcode! https://github.com/likecoin/likecoin-wordpress/pull/54
  • 23. Hey I want to use shortcode! What is shortcode? [likecoin] In fact easy to support parameter too [likecoin liker-id=ckxpress] Turns out it is simple to implement in “content” filter with add_shortcode() Hard to document though!
  • 24. Hey your plugin throw JS error after upgrade! https://github.com/likecoin/likecoin-wordpress/pull/140
  • 25. Hey your plugin upgrade does not upgrade - Generally a hard to debug issue - In this particular case, Javascript was cached - Most sites has some kind of CDN cache for all js, css files - Oldschool way $ver = plugin version in wp_enqueue_script() and wp_enqueue_style() - Modern way: @wordpress/script build and index.asset.php Here are only two hard things in Computer Science: cache invalidation and naming things
  • 26. Hey your stuff doesn’t show properly in my theme https://github.com/likecoin/likecoin-wordpress/pull/88
  • 27. Hey your stuff doesn’t show properly in my theme - Normally this one is very hard - All the themes with different DOM and CSS => can’t fit all - Turns out just wrapping our iframe in <figure> does wonder - This is due to blocks are mostly wrapped with <p> or <figure>, modern themes are designed to handle them properly
  • 28. Did we just mention blocks?
  • 31. Gutenberg - Block based editor - Full site editing - Released as default in WordPress 5.0 - Now the old editor is a plugin called “Classic Editor” What does that mean for plugin? - Editor sidebar support - Block support
  • 32. Editor Sidebar - metabox is now outdated
  • 33. Editor Sidebar - metabox is now outdated
  • 34. Editor Sidebar - metabox is now outdated Metabox in its simplest form, is just extra fields in HTML <form> - Submit post => Submit fields in metabox => Updates data with post Sidebar is a complex web app - On publish, Gutenberg does a XHR instead of refresh - Your sidebar is expected to listen to events and does XHR too - Maybe also multitab JavaScript based navigation, like a full blown SPA - In fact it is a React SPA!
  • 35. Blocks - shortcode is now outdated Remember shortcode [likecoin liker-id=ckxpress]? How about a UI to list all shortcodes, configure their parameters, and maybe also a preview?
  • 36. Blocks - shortcode is now outdated - Add your own blocks for site - block.json defines all the metadata - edit.js and save.js defines different behaviour, in editor vs in actual post view - Make variants for blocks that has common attributes https://developer.wordpress.org/block-editor/
  • 38. - PHP renders HTML - PHP GET => Fill data with HTML - What about JavaScript? Write another AJAX API in PHP - Write AJAX API => Need to check admin yourself - So two set of codes for same thing PHP: data are written directly into HTML (We call that SSR nowadays) Javascript + AJAX API: data are fetched with XHR and updated by JavaScript (Hydration!) - This sound suspiciously like “reinventing my own next.js/nuxt.js for every form input”... Before @wordpress/data
  • 39. After @wordpress/data Redux-like syntax abstract all the API calls and authentication behind a selector const isCurrentPostPublished = select('core/editor').isCurrentPostPublished() const postDate = select('core/editor').getEditedPostAttribute('modified_gmt') Cool! But… in no where are the available data fields clearly documented!
  • 40. Security! How many CVE are from plugin instead of core?
  • 41. Why a plugin breach affect the whole site? - WordPress code runs in a global space - No effective isolation between plugins, or actually, everything - Horrible in security sense i.e. You can write a plugin to change any user/admin data You can write a plugin to change data used by other plugin - Actually thats how plugin for plugins work e.g. woocommence, woocommence plugins, woocommence plugins pro version, which is a paid plugin for woocommence plugin
  • 42. How can plugin developer prevent this? - Sanitize all input and output Why both? Don’t trust any data to be safe sanitize_*, esacpe_* 洗手洗手洗手 - Use WordPress provided function instead of PHP or writing your own wp_remote_get() - Wordpress coding standard linter warns all unsantized output https://developer.wordpress.org/plugins/security/
  • 43. How can site owner prevent this? Disable unneeded plugin - Disabling plugin disable many of its hook and API, reducing attack surfaces Uninstall unneeded plugin - Plugin can hook on install, uninstall and upgrade Try to understand what data and option are created by your plugin, and does it clean them up after uninstall? - WordPress does not record these on install, devs can be lazy or don’t even know they should clean up data
  • 44. There’s more… Like 200 more things about - Really silly APIs - Subtle non-documented functions - Stupid mistakes we made (mostly this) … that I can talk about, but let’s not dig too deep into this here.
  • 45. Hey it’s Q&A Now it’s your chance to contribute content to this slide!