{"id":25469,"date":"2019-01-14T23:18:57","date_gmt":"2019-01-14T15:18:57","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=25469"},"modified":"2022-08-10T00:16:02","modified_gmt":"2022-08-09T16:16:02","slug":"postcss-plugins","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/postcss-plugins\/","title":{"rendered":"10 Awesome PostCSS Plugins to Make You a CSS Wizard"},"content":{"rendered":"

PostCSS<\/a> is an incredibly versatile tool that makes it possible to transform CSS styles with JavaScript plugins<\/strong>. Its flexibility lies in the way it\u2019s built.<\/p>\n

The core part of PostCSS is a Node.js module<\/a> that you can install with npm<\/a>, and it has an ecosystem of more than 200 plugins you can choose to use in your project.<\/p>\n

PostCSS is neither a preprocessor nor a postprocessor, as different PostCSS plugins may fall into either of these categories or both of them; it depends entirely on you what you make of it. With PostCSS, you don\u2019t need to learn a different syntax<\/strong> like in the case of Sass<\/a> or LESS<\/a>; you can immediately start to use it.<\/p>\n

PostCSS takes your existing CSS file and turns it into JavaScript-readable data, then the JavaScript plugins perform the modifications, and PostCSS returns the altered version of the original file. Sounds cool, doesn\u2019t it?<\/p>\n

In this post, we will take a look at 10 PostCSS plugins to give you an insight into some of the great things you can achieve<\/strong> with this awesome tool.<\/p>\n

1. Autoprefixer<\/a><\/h2>\n

Autoprefixer<\/strong> is probably the most well-known PostCss plugin, as it\u2019s used by notable tech companies such as Google, Twitter, and Shopify. It adds vendor prefixes to CSS rules where it\u2019s necessary<\/strong>.<\/p>\n

Autoprefixer uses data from Can I Use<\/a>. This way, it doesn\u2019t get dated and can always apply the most recent rules. You can check out how it works on its interactive demo site<\/a>.<\/p>\n

\"Autoprefixer<\/figure>\n

2. CSSnext<\/a><\/h2>\n

CSSnext<\/strong> is a CSS transpiler that allows you to use future CSS syntax on current sites<\/strong>. W3C has many new CSS rules that aren\u2019t currently implemented by browsers but could enable developers to write more sophisticated CSS faster and easier. CSSnext<\/a> has been made to bridge this gap.<\/p>\n

It\u2019s worth to take a look at its features<\/a> to see what you can accomplish with it, for example you can use custom media queries, custom selectors, colour modifiers, SVG filters, and new pseudoclasses<\/strong> in your designs.<\/p>\n

\"CSSnext<\/figure>\n

3. PreCSS<\/a><\/h2>\n

PreCSS<\/strong> is one of the PstCSS plugins that work like a CSS preprocessor. It makes it possible to take advantage of a Sass-like markup in your stylesheet files<\/strong>.<\/p>\n

By introducing PreCSS into your workflow you can use variables, if-else<\/code> statements, for<\/code> loops, mixins, @extend<\/code> and @import<\/code> rules, nesting, and many other handy features in your CSS code. PreCSS\u2019s Github documentation<\/a> gives you detailed instructions on how to make the most of it.<\/p>\n

\"PreCSS<\/figure>\n

4. StyleLint<\/a><\/h2>\n

StyleLint<\/strong> is a modern CSS linter that proofreads and validates your CSS code.<\/strong> It makes it easy to avoid errors and pushes you to follow consistent coding conventions.<\/p>\n

StyleLint understands the latest CSS syntax, so it can be used along with the previously mentioned PreCSS plugin. It also allows you to make your own configuration and even checks if your settings are valid.<\/p>\n

5. PostCSS Assets<\/a><\/h2>\n

The PostCSS Assets plugin is a handy asset manager for your CSS files<\/strong>. It can be a great choice if you tend to have trouble with URL paths, as PostCSS Assets isolates your stylesheet files from environmental changes.<\/p>\n

You need to define load paths, relative paths, and a base path, and the plugin will automatically look up the assets you need. For example you can write the following code if you need the proper URL of the foobar.jpg<\/code> image:<\/p>\n

\r\nbody {\r\n background: resolve('foobar.jpg');\r\n}<\/pre>\n
PostCSS Assets also takes care of the assets cache<\/strong>, as you can set the cachebuster<\/code> variable to true if you want URL paths to be automatically changed in case an asset is modified. This smart plugin also calculates the dimensions (width and height) of image files or even resizes them using a preset ratio.<\/p>\n
6. CSSNano<\/a><\/h2>\n
If you need optimized and minified CSS files for a production site, it\u2019s worth to check out CSSNano<\/strong>. It\u2019s a modular plugin that consists of many smaller, single-responsibility PostCSS plugins. It doesn\u2019t only perform basic minification techniques such as removing whitespaces but also has advanced options that make focused optimizations possible.<\/p>\n
Among many other features, CSSNano is capable of rebasing z-index values, reducing custom identifiers, converting length, time, and colour values, and removing outdated vendor prefixes.<\/p>\n
\"CSSNano<\/figure>\n
7. Font Magician<\/a><\/h2>\n
If you are a fan of sophisticated typography, you will surely like the Font Magician<\/strong> PostCSS plugin. The magic of Font Magician relies in its capability of automatically generating all the necessary @font-face<\/code> rules<\/strong>.<\/p>\n
How it works is pretty straightforward, you only need to add the font-family: \"My Fav Font\";<\/code> CSS rule to an HTML element, and Font Magician does the rest of the work. It can add Google Fonts, the local copy of a font, Bootstrap typography, and can also load fonts asynchronously. Here\u2019s its interactive demo site<\/a>.<\/p>\n
\"Font<\/figure>\n
8. Write SVG<\/a><\/h2>\n
Have you ever wondered about how cool it would be to write SVG right into your CSS files? With the help of the Write SVG PostCSS plugin<\/a> you can easily achieve this goal.<\/p>\n
This handy plugin, for example, makes it possible to store your SVG backgrounds and icons in your CSS file<\/strong>, and later add them to the relevant HTML element<\/strong> in the following way:<\/p>\n
\r\n@svg square {\r\n @rect {\r\n  fill: var(--color, black);\r\n  width: 100%;\r\n  height: 100%;\r\n }\r\n}\r\n\r\n.example {\r\n background: white svg(square param(--color #00b1ff)) cover;\r\n}<\/pre>\n
9. Lost Grid<\/a><\/h2>\n
Lost Grid<\/strong> is a great PostCSS plugin that provides you with an impressive CSS grid system<\/strong> that doesn\u2019t only works with plain CSS <\/strong>but also with preprocessor languages<\/strong> (Sass, LESS, Stylus). It uses the calc()<\/a><\/code> CSS function to create beautiful grids<\/a> that you can easily use without spending too much time with customization.<\/p>\n
Lost Grid has pretty much straightforward rules, for example defining a column with 25% width doesn\u2019t takes more than this little code snippet:<\/p>\n
\r\ndiv {\r\n lost-column: 1\/4;\r\n}<\/pre>\n
\"Lost<\/figure>\n
10. PostCSS Sprites<\/a><\/h2>\n
The PostCSS Sprite<\/strong> plugin makes it easy to generate image sprites<\/strong>, i.e. collections of images placed into a single file. After setting a few options, the plugin takes the images from your stylesheet file, merges them into a sprite, then updates the image references wherever it\u2019s necessary.<\/p>\n
You can use different filters and groupers to determine which images you want to put into the sprite, and you can set the dimensions of the output image as well.<\/p>","protected":false},"excerpt":{"rendered":"
PostCSS is an incredibly versatile tool that makes it possible to transform CSS styles with JavaScript plugins. Its flexibility lies in the way it\u2019s built. The core part of PostCSS is a Node.js module that you can install with npm, and it has an ecosystem of more than 200 plugins you can choose to use…<\/p>\n","protected":false},"author":146,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[3392],"tags":[507,2902],"topic":[4520],"class_list":["entry-content","is-maxi"],"acf":[],"yoast_head":"\n10 Awesome PostCSS Plugins to Make You a CSS Wizard - Hongkiat<\/title>\n<meta name=\"description\" content=\"PostCSS is an incredibly versatile tool that makes it possible to transform CSS styles with JavaScript plugins. Its flexibility lies in the way it's\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.hongkiat.com\/blog\/postcss-plugins\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"10 Awesome PostCSS Plugins to Make You a CSS Wizard\" \/>\n<meta property=\"og:description\" content=\"PostCSS is an incredibly versatile tool that makes it possible to transform CSS styles with JavaScript plugins. Its flexibility lies in the way it's\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/postcss-plugins\/\" \/>\n<meta property=\"og:site_name\" content=\"Hongkiat\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/hongkiatcom\" \/>\n<meta property=\"article:published_time\" content=\"2019-01-14T15:18:57+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-08-09T16:16:02+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/postcss-plugins\/autoprefixer.jpg\" \/>\n<meta name=\"author\" content=\"Anna Monus\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:site\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Anna Monus\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/postcss-plugins\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/postcss-plugins\\\/\"},\"author\":{\"name\":\"Anna Monus\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/a601053a0ab457901e00cdc83bd5359e\"},\"headline\":\"10 Awesome PostCSS Plugins to Make You a CSS Wizard\",\"datePublished\":\"2019-01-14T15:18:57+00:00\",\"dateModified\":\"2022-08-09T16:16:02+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/postcss-plugins\\\/\"},\"wordCount\":1007,\"commentCount\":3,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/postcss-plugins\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/postcss-plugins\\\/autoprefixer.jpg\",\"keywords\":[\"CSS\",\"CSS Tools\"],\"articleSection\":[\"Coding\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/postcss-plugins\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/postcss-plugins\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/postcss-plugins\\\/\",\"name\":\"10 Awesome PostCSS Plugins to Make You a CSS Wizard - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/postcss-plugins\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/postcss-plugins\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/postcss-plugins\\\/autoprefixer.jpg\",\"datePublished\":\"2019-01-14T15:18:57+00:00\",\"dateModified\":\"2022-08-09T16:16:02+00:00\",\"description\":\"PostCSS is an incredibly versatile tool that makes it possible to transform CSS styles with JavaScript plugins. Its flexibility lies in the way it's\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/postcss-plugins\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/postcss-plugins\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/postcss-plugins\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/postcss-plugins\\\/autoprefixer.jpg\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/postcss-plugins\\\/autoprefixer.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/postcss-plugins\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"10 Awesome PostCSS Plugins to Make You a CSS Wizard\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"name\":\"Hongkiat\",\"description\":\"Tech and Design Tips\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\",\"name\":\"Hongkiat.com\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"contentUrl\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"width\":1200,\"height\":799,\"caption\":\"Hongkiat.com\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/hongkiatcom\",\"https:\\\/\\\/x.com\\\/hongkiat\",\"https:\\\/\\\/www.pinterest.com\\\/hongkiat\\\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/a601053a0ab457901e00cdc83bd5359e\",\"name\":\"Anna Monus\",\"description\":\"Anna is Technical Editor and Writer for Hongkiat.com. She mainly covers front-end frameworks, web standards, accessibility, WordPress development, and UX design.\",\"sameAs\":[\"https:\\\/\\\/www.annalytic.com\\\/\"],\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/author\\\/anna_monus\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"10 Awesome PostCSS Plugins to Make You a CSS Wizard - Hongkiat","description":"PostCSS is an incredibly versatile tool that makes it possible to transform CSS styles with JavaScript plugins. Its flexibility lies in the way it's","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.hongkiat.com\/blog\/postcss-plugins\/","og_locale":"en_US","og_type":"article","og_title":"10 Awesome PostCSS Plugins to Make You a CSS Wizard","og_description":"PostCSS is an incredibly versatile tool that makes it possible to transform CSS styles with JavaScript plugins. Its flexibility lies in the way it's","og_url":"https:\/\/www.hongkiat.com\/blog\/postcss-plugins\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2019-01-14T15:18:57+00:00","article_modified_time":"2022-08-09T16:16:02+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/postcss-plugins\/autoprefixer.jpg","type":"","width":"","height":""}],"author":"Anna Monus","twitter_card":"summary_large_image","twitter_creator":"@hongkiat","twitter_site":"@hongkiat","twitter_misc":{"Written by":"Anna Monus","Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/postcss-plugins\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/postcss-plugins\/"},"author":{"name":"Anna Monus","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/a601053a0ab457901e00cdc83bd5359e"},"headline":"10 Awesome PostCSS Plugins to Make You a CSS Wizard","datePublished":"2019-01-14T15:18:57+00:00","dateModified":"2022-08-09T16:16:02+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/postcss-plugins\/"},"wordCount":1007,"commentCount":3,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/postcss-plugins\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/postcss-plugins\/autoprefixer.jpg","keywords":["CSS","CSS Tools"],"articleSection":["Coding"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hongkiat.com\/blog\/postcss-plugins\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/postcss-plugins\/","url":"https:\/\/www.hongkiat.com\/blog\/postcss-plugins\/","name":"10 Awesome PostCSS Plugins to Make You a CSS Wizard - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/postcss-plugins\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/postcss-plugins\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/postcss-plugins\/autoprefixer.jpg","datePublished":"2019-01-14T15:18:57+00:00","dateModified":"2022-08-09T16:16:02+00:00","description":"PostCSS is an incredibly versatile tool that makes it possible to transform CSS styles with JavaScript plugins. Its flexibility lies in the way it's","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/postcss-plugins\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/postcss-plugins\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/postcss-plugins\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/postcss-plugins\/autoprefixer.jpg","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/postcss-plugins\/autoprefixer.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/postcss-plugins\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"10 Awesome PostCSS Plugins to Make You a CSS Wizard"}]},{"@type":"WebSite","@id":"https:\/\/www.hongkiat.com\/blog\/#website","url":"https:\/\/www.hongkiat.com\/blog\/","name":"Hongkiat","description":"Tech and Design Tips","publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.hongkiat.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.hongkiat.com\/blog\/#organization","name":"Hongkiat.com","url":"https:\/\/www.hongkiat.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","contentUrl":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","width":1200,"height":799,"caption":"Hongkiat.com"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/hongkiatcom","https:\/\/x.com\/hongkiat","https:\/\/www.pinterest.com\/hongkiat\/"]},{"@type":"Person","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/a601053a0ab457901e00cdc83bd5359e","name":"Anna Monus","description":"Anna is Technical Editor and Writer for Hongkiat.com. She mainly covers front-end frameworks, web standards, accessibility, WordPress development, and UX design.","sameAs":["https:\/\/www.annalytic.com\/"],"url":"https:\/\/www.hongkiat.com\/blog\/author\/anna_monus\/"}]}},"jetpack_featured_media_url":"https:\/\/","jetpack_shortlink":"https:\/\/wp.me\/p4uxU-6CN","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/25469","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/users\/146"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/comments?post=25469"}],"version-history":[{"count":3,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/25469\/revisions"}],"predecessor-version":[{"id":61459,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/25469\/revisions\/61459"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=25469"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=25469"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=25469"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=25469"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}