{"id":26377,"date":"2016-04-25T23:01:33","date_gmt":"2016-04-25T15:01:33","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=26377"},"modified":"2022-09-21T17:45:16","modified_gmt":"2022-09-21T09:45:16","slug":"manage-dependencies-tools-webdev","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/manage-dependencies-tools-webdev\/","title":{"rendered":"11 Dependency Management Tools for Web Developers"},"content":{"rendered":"

Editor\u2019s note: <\/strong>This article is part of our Code Optimization series<\/a>, where we take a look at how to optimize coding for better efficiency in a bid to be better coders.<\/p>\n

Dependencies are a cornerstone of modern web development. These are the required tools, plugins, libraries, and frameworks necessary to build high-level web applications<\/strong>.<\/p>\n

The sheer number of dependencies has skyrocketed in the last few years. Over time developers have adopted dependency management tools which alleviate the stress of keeping dependencies organized and up-to-date<\/strong>. These tools lead to an optimized workflow for developers and project managers.<\/p>\n

I\u2019ve cataloged the best dependency tools here, including both well-established and newly-emerging platforms. Professional web development requires continuous learning, and I\u2019d argue dependency management is a skillset worth learning.<\/p>\n

1. NPM<\/h2>\n

I couldn\u2019t write this guide without giving credit to the Node Package Manager<\/a>. Built on Node.js, this system powers a tremendous repository of 100,000+ packages and modules<\/strong>.<\/p>\n

\"npm<\/a><\/figure>\n

Each project can use a package.json file<\/a> setup through NPM and even managed with Gulp<\/a>(on Node). Dependencies can be updated and optimized<\/a> right from the terminal. And you can build new projects with dependency files and version numbers automatically pulled from the package.json file.<\/p>\n

NPM is valuable for more than just dependency management, and it\u2019s practically a must-know tool for modern web development. If you\u2019re confused please check out this Reddit thread<\/a> for a beginner\u2019s explanation.<\/p>\n

2. Bower<\/h2>\n

The package management system Bower<\/a> runs on NPM which seems a little redundant but there is a difference between the two, notably that NPM offers more features while Bower<\/a> aims for a reduction in filesize and load times<\/strong> for frontend dependencies.<\/p>\n

Check out this Stack question<\/a> to learn more about the subtle differences.<\/p>\n

\"bower<\/a><\/figure>\n

Some devs argue that Bower is basically obsolete since it runs on NPM, a service that can do almost everything Bower can do. Generally speaking, this isn\u2019t wrong.<\/p>\n

But devs should realize Bower can optimize the workflow specifically with frontend dependencies<\/strong>. I recommend Ben McCormick\u2019s article Is Bower Useful<\/a> to learn more about the value offered from both package management tools.<\/p>\n

3. RubyGems<\/h2>\n

RubyGems<\/a> is a package manager for Ruby with a high popularity among web developers. The project is open source<\/a> and inclusive of all free Ruby gems.<\/p>\n

To give a brief overview<\/a> for beginners, a \u201cgem\u201d is just some code that runs on a Ruby environment<\/strong>. This can lead to programs like Bundler<\/a> which manage gem versions and keep everything updated.<\/p>\n

\"RubyGems<\/a><\/figure>\n

Rails developers will love this feature, but what about frontend packages? Since Ruby is open source, developers can build projects like Bower for Rails<\/a>. This brings frontend package management to the Ruby platform with a small learning curve.<\/p>\n

4. RequireJS<\/h2>\n

There\u2019s something special about RequireJS<\/a> in that it\u2019s primarily a JS toolset. It can be used for loading JS modules quickly including Node modules<\/strong>.<\/p>\n

RequireJS can automatically detect required dependencies<\/strong> based on what you\u2019re using so this might be akin to classic software programming in C\/C++ where libraries are included with further libraries.<\/p>\n

\"requirejs<\/a><\/figure>\n

You\u2019ll find an interesting GitHub discussion<\/a> on this topic and the value it offers modern web developers. Granted other JS management tools like webpack<\/a> have popped up, RequireJS still works in production environments. And if it works for you that\u2019s all that matters.<\/p>\n

5. Jam<\/h2>\n

Browser-based package management comes in a new form with JamJS<\/a>. This is a JavaScript package manager with automatic management similar to RequireJS.<\/p>\n

All your dependencies are pulled into a single JS file which lets you add and remove<\/strong> items quickly. Plus these can be updated in the browser regardless of other tools you\u2019re using (like RequireJS).<\/p>\n

\"jamjs<\/a><\/figure>\n

Libraries are updated based on the latest versions through the terminal. Each project can be created automatically with optimized components<\/strong> based on your needs<\/strong>. Jam is free on GitHub<\/a> and worth a look if you have the time.<\/p>\n

6. Browserify<\/h2>\n

Most developers know of Browserify<\/a> even if it\u2019s not part of their typical workflow. This is another dependency management tool which optimizes required modules and libraries by bundling them together.<\/p>\n

These bundles are supported in the browser<\/strong> which means you can include and merge modules with plain JavaScript<\/strong>. All you need is NPM to get started and then Browserify to get moving.<\/p>\n

\"browserify<\/a><\/figure>\n

7. Mantri<\/h2>\n

Still in its early stages of growth, MantriJS<\/a> is a dependency system for mid-to-high level web applications. Dependencies are managed through namespaces<\/a> and organized functionally to avoid collisions and reduce clutter<\/strong>.<\/p>\n

\"mantri<\/a><\/figure>\n

Mantri is currently at v0.2.2 at the time of writing. It\u2019s completely open source<\/strong> and built for more complex web applications that require large bundles of dependencies<\/strong>. Mantri aims to follow modular programming practices<\/a> and hopes to encourage developers onto the same path.<\/p>\n

8. Volo<\/h2>\n

The project management tool volo<\/a> is an open source NPM repo that can create projects, add libraries, and automate workflows.<\/p>\n

Volo runs inside Node and relies on JavaScript for project management<\/strong>. A brief intro guide can be found on GitHub<\/a> explaining the installation process and common usage. For example if you run the command volo create<\/code> you can affix any library like HTML5 Boilerplate.<\/p>\n

\"volo<\/a><\/figure>\n

But aside from creating new projects you can also add\/update libraries for older projects<\/strong>. Volo ties into everything you would need for frontend development. Check out volo\u2019s design goals<\/a> to see how it operates in a real-world project.<\/p>\n

9. Ender<\/h2>\n

Ender<\/a> is the \u201cno-library library\u201d and is one of the lightest package managers you\u2019ll find online. It allows devs to search through JS packages and install\/compile them right from the command line<\/strong>. Ender is thought of as \u201cNPM\u2019s little sister\u201d by the dev team.<\/p>\n

\"ender<\/a><\/figure>\n

Naturally the whole Ender framework is available for free on GitHub<\/a>. It\u2019s simply a tool that you install to help manage consumption of frontend JavaScript frameworks for local projects<\/strong>. Everything is meant to run with ease to the fullest potential for a front-end developer\u2019s workflow.<\/p>\n

The main Ender website has quality documentation<\/a> so it\u2019s worth a glance if you\u2019re interested.<\/p>\n

10. pip<\/h2>\n

The recommended method for installing Python dependencies is through pip<\/a>. This tool was created by the Python Packaging Authority<\/a> and it\u2019s completely open source just like Python itself.<\/p>\n

\"pip<\/a><\/figure>\n

The majority of Python developers recommend pip for dependencies<\/a> including the Django team<\/a>. Whether you\u2019re just getting started with Python or already use it consistently with backend development, this is a package manager you\u2019ll be glad to have in your toolbox.<\/p>\n

11. Composer<\/h2>\n

Composer<\/a> is a package manager very similar to NPM, but it\u2019s focused solely on PHP libraries. You can find a list of dependencies on Packagist<\/a> which includes large PHP frameworks such as Laravel<\/a>.<\/p>\n

If you\u2019re a PHP developer<\/strong> of any kind I seriously recommend looking into Composer. It\u2019s easy to get started but difficult to fit<\/strong> into your workflow. However with practice it\u2019ll become a staple for PHP dev projects.<\/p>\n

\"composer<\/a><\/figure>\n

This is a versatile tool with the potential to grow even larger in time. Plus NPM can mix with Composer<\/a> to create a frontend + backend dependency management system for all your PHP\/JS projects.<\/p>\n

Wrapping Up<\/h2>\n

It\u2019s clear many of these dependency managers have similar traits with similar qualities. Some are built to solve alternate problems<\/strong> and can even run in tandem with each other (ie. Composer and NPM).<\/p>\n

The subject of dependency management can be tough for new developers. I recommend picking one of these tools and researching in-depth to learn as much as possible. Try building small webapps and learn why dependency management is useful.<\/p>\n

Once you learn how to apply these tools into your workflow you\u2019ll never consider going back.<\/p>","protected":false},"excerpt":{"rendered":"

Editor\u2019s note: This article is part of our Code Optimization series, where we take a look at how to optimize coding for better efficiency in a bid to be better coders. Dependencies are a cornerstone of modern web development. These are the required tools, plugins, libraries, and frameworks necessary to build high-level web applications. The…<\/p>\n","protected":false},"author":18,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[3393],"tags":[511],"topic":[4520],"class_list":["entry-content","is-maxi"],"acf":[],"yoast_head":"\n11 Dependency Management Tools for Web Developers - Hongkiat<\/title>\n<meta name=\"description\" content=\"Editor's note: This article is part of our Code Optimization series, where we take a look at how to optimize coding for better efficiency in a bid to be\" \/>\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\/manage-dependencies-tools-webdev\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"11 Dependency Management Tools for Web Developers\" \/>\n<meta property=\"og:description\" content=\"Editor's note: This article is part of our Code Optimization series, where we take a look at how to optimize coding for better efficiency in a bid to be\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/manage-dependencies-tools-webdev\/\" \/>\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=\"2016-04-25T15:01:33+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-09-21T09:45:16+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/manage-dependencies-tools-webdev\/01-npm-js-website.jpg\" \/>\n<meta name=\"author\" content=\"Jake Rocheleau\" \/>\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=\"Jake Rocheleau\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"8 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/manage-dependencies-tools-webdev\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/manage-dependencies-tools-webdev\\\/\"},\"author\":{\"name\":\"Jake Rocheleau\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/966b2daea15283b4145e71aa98a82c2a\"},\"headline\":\"11 Dependency Management Tools for Web Developers\",\"datePublished\":\"2016-04-25T15:01:33+00:00\",\"dateModified\":\"2022-09-21T09:45:16+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/manage-dependencies-tools-webdev\\\/\"},\"wordCount\":1255,\"commentCount\":6,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/manage-dependencies-tools-webdev\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/manage-dependencies-tools-webdev\\\/01-npm-js-website.jpg\",\"keywords\":[\"Web Developers\"],\"articleSection\":[\"Toolkit\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/manage-dependencies-tools-webdev\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/manage-dependencies-tools-webdev\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/manage-dependencies-tools-webdev\\\/\",\"name\":\"11 Dependency Management Tools for Web Developers - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/manage-dependencies-tools-webdev\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/manage-dependencies-tools-webdev\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/manage-dependencies-tools-webdev\\\/01-npm-js-website.jpg\",\"datePublished\":\"2016-04-25T15:01:33+00:00\",\"dateModified\":\"2022-09-21T09:45:16+00:00\",\"description\":\"Editor's note: This article is part of our Code Optimization series, where we take a look at how to optimize coding for better efficiency in a bid to be\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/manage-dependencies-tools-webdev\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/manage-dependencies-tools-webdev\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/manage-dependencies-tools-webdev\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/manage-dependencies-tools-webdev\\\/01-npm-js-website.jpg\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/manage-dependencies-tools-webdev\\\/01-npm-js-website.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/manage-dependencies-tools-webdev\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"11 Dependency Management Tools for Web Developers\"}]},{\"@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\\\/966b2daea15283b4145e71aa98a82c2a\",\"name\":\"Jake Rocheleau\",\"description\":\"Jake is a writer and designer with over 10 years experience working on the web. He writes about user experience design and cool resources for designers\",\"sameAs\":[\"https:\\\/\\\/www.hongkiat.com\"],\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/author\\\/jake\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"11 Dependency Management Tools for Web Developers - Hongkiat","description":"Editor's note: This article is part of our Code Optimization series, where we take a look at how to optimize coding for better efficiency in a bid to be","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\/manage-dependencies-tools-webdev\/","og_locale":"en_US","og_type":"article","og_title":"11 Dependency Management Tools for Web Developers","og_description":"Editor's note: This article is part of our Code Optimization series, where we take a look at how to optimize coding for better efficiency in a bid to be","og_url":"https:\/\/www.hongkiat.com\/blog\/manage-dependencies-tools-webdev\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2016-04-25T15:01:33+00:00","article_modified_time":"2022-09-21T09:45:16+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/manage-dependencies-tools-webdev\/01-npm-js-website.jpg","type":"","width":"","height":""}],"author":"Jake Rocheleau","twitter_card":"summary_large_image","twitter_creator":"@hongkiat","twitter_site":"@hongkiat","twitter_misc":{"Written by":"Jake Rocheleau","Est. reading time":"8 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/manage-dependencies-tools-webdev\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/manage-dependencies-tools-webdev\/"},"author":{"name":"Jake Rocheleau","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/966b2daea15283b4145e71aa98a82c2a"},"headline":"11 Dependency Management Tools for Web Developers","datePublished":"2016-04-25T15:01:33+00:00","dateModified":"2022-09-21T09:45:16+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/manage-dependencies-tools-webdev\/"},"wordCount":1255,"commentCount":6,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/manage-dependencies-tools-webdev\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/manage-dependencies-tools-webdev\/01-npm-js-website.jpg","keywords":["Web Developers"],"articleSection":["Toolkit"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hongkiat.com\/blog\/manage-dependencies-tools-webdev\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/manage-dependencies-tools-webdev\/","url":"https:\/\/www.hongkiat.com\/blog\/manage-dependencies-tools-webdev\/","name":"11 Dependency Management Tools for Web Developers - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/manage-dependencies-tools-webdev\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/manage-dependencies-tools-webdev\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/manage-dependencies-tools-webdev\/01-npm-js-website.jpg","datePublished":"2016-04-25T15:01:33+00:00","dateModified":"2022-09-21T09:45:16+00:00","description":"Editor's note: This article is part of our Code Optimization series, where we take a look at how to optimize coding for better efficiency in a bid to be","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/manage-dependencies-tools-webdev\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/manage-dependencies-tools-webdev\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/manage-dependencies-tools-webdev\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/manage-dependencies-tools-webdev\/01-npm-js-website.jpg","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/manage-dependencies-tools-webdev\/01-npm-js-website.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/manage-dependencies-tools-webdev\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"11 Dependency Management Tools for Web Developers"}]},{"@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\/966b2daea15283b4145e71aa98a82c2a","name":"Jake Rocheleau","description":"Jake is a writer and designer with over 10 years experience working on the web. He writes about user experience design and cool resources for designers","sameAs":["https:\/\/www.hongkiat.com"],"url":"https:\/\/www.hongkiat.com\/blog\/author\/jake\/"}]}},"jetpack_featured_media_url":"https:\/\/","jetpack_shortlink":"https:\/\/wp.me\/p4uxU-6Rr","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/26377","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\/18"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/comments?post=26377"}],"version-history":[{"count":3,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/26377\/revisions"}],"predecessor-version":[{"id":62419,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/26377\/revisions\/62419"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=26377"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=26377"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=26377"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=26377"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}