What is shortcode.dev?

Updated

shortcode.dev is a collection of code cheatsheets: short snippets and examples covering elements, attributes, and selectors across a range of web development technologies. It is aimed at developers who need a quick reference for a specific command, selector, or syntax pattern rather than a full tutorial or documentation set. The snippets are grouped by technology, so you can jump straight to the relevant category.

What it covers

The site organizes snippets into technology-specific categories. Based on the current listing, these include:

Category Example snippet topics
Artisan migrate fresh, artisan up, artisan down, make auth
Blade asset url, method field, ternary, yield, return data
CLI scp, directory detailed view, show directory disk space, restart MySQL server
CSS :empty pseudo-class, inset, clip path, style selection, bounce animation
Git soft reset, add SSH key to keychain, remove file from cache, git log, git config global
HTML details, datalist, autoplay video, DNS prefetch, block search engine crawlers
JavaScript sort array, get data attributes, defer, async, localStorage remove item
Laravel enable strict mode, prevent lazy loading, reverse, production-only install, clear cache route
Liquid variable default value, for loop last item, get tags, get posts, post excerpt
Markdown image, emoji, table, link, inline code
Node readdir, parse path, os module, module filename, module dirname
PHP sprintf, uppercase, class, copyrights, shell exec
Vue boilerplate Vue component, serve Vue project, create new Vue project, install Vue CLI, v-show
WordPress add shortcode, disable Gutenberg editor, add meta data fields to REST API, register script, add body class
WP-CLI list post types, list custom post type, list taxonomies, import to sub-site, export single page

Each category has an "All … code snippets" link that leads to the full set for that technology.

How to use it

  1. Pick the technology you are working in (for example, Git or CSS).
  2. Scan the snippet list for the task you need — the entries are named by the action or feature, such as "soft reset" or "clip path".
  3. Open the snippet to get the code example, then adapt it to your project.

The value here is speed: it is a lookup resource, not a learning path. If you already know what you want to do and just need the exact syntax, this format works well. If you need conceptual background or edge-case behavior, you will still want the official documentation for that technology.

What to keep in mind

  • The snippets are examples, not exhaustive references. A single snippet for a command or selector will not cover every flag or variation.
  • Coverage is broad but shallow by design. Categories like WordPress and WP-CLI mix core functions with tooling commands, so check that a snippet matches your version and setup.
  • The site describes itself as a collection of useful snippets and code examples, and notes a repository on GitHub — useful if you want to browse or contribute beyond what is listed on the page.

Who it is for

Developers who frequently switch between stacks and want one place to check syntax for Artisan, Blade, CSS, Git, Laravel, Vue, WordPress, and similar tools. It is most useful as a bookmark you consult mid-task, not as a primary source for learning a technology from scratch.