{"id":44919,"date":"2018-07-24T23:01:08","date_gmt":"2018-07-24T15:01:08","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=44919"},"modified":"2025-04-21T19:48:13","modified_gmt":"2025-04-21T11:48:13","slug":"designers-developers-monthly-07-2018","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-07-2018\/","title":{"rendered":"Fresh Resources for Web Designers and Developers (July 2018)"},"content":{"rendered":"<p>As we reach the peak of summer in July, we\u2019re excited to share some fresh and innovative tools that have caught our attention. This month\u2019s collection features a diverse mix of resources from both seasoned developers and newcomers to the scene.<\/p>\n<div class=\"ref-block ref-block--tax noLinks\" id=\"ref-block-tax-44919-1\">\n\t\t<a href=\"https:\/\/www.hongkiat.com\/blog\/tag\/fresh-resources-developers\/\" target=\"_blank\" class=\"ref-block__link\" title=\"Read More: Click Here for More Resources\" rel=\"bookmark\"><span class=\"screen-reader-text\">Click Here for More Resources<\/span><\/a>\n<div class=\"ref-block__thumbnail img-thumb img-thumb--jumbo\" data-img='{ \"src\" : \"https:\/\/assets.hongkiat.com\/uploads\/thumbs\/related\/tag-fresh-resources-developers.jpg\" }'>\n\t\t\t<noscript>\n<style>.no-js #ref-block-tax-44919-1 .ref-block__thumbnail {\n\t\t\t\t\tbackground-image: url( \"https:\/\/assets.hongkiat.com\/uploads\/thumbs\/related\/tag-fresh-resources-developers.jpg\" );\n\t\t\t\t}<\/style>\n<p>\t\t\t<\/p><\/noscript>\n\t\t<\/div>\n<div class=\"ref-block__summary\">\n<h4 class=\"ref-title\">Click Here for More Resources<\/h4>\n<div class=\"ref-description\">\n<p>Check out our complete collection of hand-picked tools for designers and developers.<\/p>\n<\/div><\/div>\n<\/div>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/wprig.io\/\">WPRIG<\/a><\/h2>\n<p>An all-in-one starter WordPress theme created by <strong>Morten Rand-Hendriksen<\/strong> and is equipped with a <strong>build process preset using modern tools<\/strong> like Gulp, Babel, ESLint, and Visual Studio Code integration. It will help you create a great WP theme without the hassle of configuring the surrounding development tools.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"WPRig Homepage with code example and some description text\" height=\"470\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-07-2018\/wprig.jpg\" width=\"750\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/vue-native.io\/\">VueNative<\/a><\/h2>\n<p>A framework based on Vue.js to build a cross-platform mobile application that allows you to write your code with Vue.js specifications. The tool will <strong>compile it to the React Native<\/strong> and do the magic work for you behind the scene with the <code>vue-native<\/code> CLI. If you\u2019re already familiar with Vue.js, this could be a <strong>suitable framework to build a mobile application<\/strong>.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"Vue Native Homepage with code example and iPhone X mockup\" height=\"470\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-07-2018\/vue-native.jpg\" width=\"750\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.github.com\/10up\/SketchPress\">SketchPress<\/a><\/h2>\n<p>The folks at 10up have just released SketchPress, which is a <strong>Sketch template for quickly creating WordPress admin interface mockups and designs<\/strong>. It is packed with common admin UI like the Primary Button, Menu Bar, Dashicons, Metabox, etc. SketchPress is a great companion tool for WordPress developers to align the plugin and theme Settings or Options page with WordPress admin UI.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"SketchPress\" height=\"470\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-07-2018\/sketchpress.jpg\" width=\"750\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.docz.site\/\">Docz<\/a><\/h2>\n<p>Docz is a <strong>documentation generator based on MDX<\/strong> which was featured in the last round of this series. This tool will allow you to import and include a JSX custom component into the mix with Markdown syntax, just like writing a JSX document.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"Docz Homepage with Video Player\" height=\"470\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-07-2018\/docz.jpg\" width=\"750\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/animista.net\/\">Animista<\/a><\/h2>\n<p>CSS Animation brings the web to life. However, it\u2019s not always easy to compose CSS Animation considering the browser prefixes for compatibility, parameters, and animation timeframe. Animista makes this stuff easier by generating the code for you. You can <strong>configure animation in a user-friendly interface from where you can simply copy the code<\/strong>.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"Animation Buttons and Controller\" height=\"470\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-07-2018\/animista.jpg\" width=\"750\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.gridtoflex.com\/\">GridToFlex<\/a><\/h2>\n<p>A couple of examples of common web layout built using the native CSS Grid and using Flexbox as a fallback for browser that does not support it yet. Check out our post: <a href=\"https:\/\/www.hongkiat.com\/blog\/css-grid-layout-module\/\">Introduction to the CSS Grid Layout Module<\/a>.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"Grid To Flex Tool\" height=\"470\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-07-2018\/grid-to-flex.jpg\" width=\"750\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/ratiobuddy.com\/\">RatioBuddy<\/a><\/h2>\n<p>A nice tool to <strong>generate a box with CSS with a defined ratio<\/strong>, for example, <code>1:1<\/code>, <code>3:4<\/code>, etc. The tool will generate the code in <a href=\"https:\/\/www.hongkiat.com\/blog\/convert-css-to-sass\/\">SCSS format<\/a> to copy.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"RatioBuddy\" height=\"470\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-07-2018\/ratio-buddy.jpg\" width=\"750\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.howtographql.com\/\">How to GraphQL<\/a><\/h2>\n<p>GraphQL is an alternative to REST data structure and How to GraphQL is a <strong>comprehensive resource to learn it<\/strong>. It is far more efficient than REST since it will only pull the data requested, reducing the amount of load and data transfer.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"How to GraphQL\" height=\"470\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-07-2018\/how-to-graphql.jpg\" width=\"750\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/wordpress.org\/plugins\/simple-history\/\">Sample History<\/a><\/h2>\n<p>A simple WordPress plugin to show the history of activity done in the WordPress dashboard. It supports WordPress native activity, such as when a user creates posts and pages, logs in, and activates or deactivates other plugins. It can also <strong>track other plugins activity<\/strong> including Advanced Custom Fields (ACF) and User Switching. This is a great plugin to keep track of your site\u2019s internal activity.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"Sample History WordPress Plugin\" height=\"470\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-07-2018\/simple-history.jpg\" width=\"750\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.github.com\/dutchcoders\/transfer.sh\">Transfer.sh<\/a><\/h2>\n<p>it is a <strong>handy utility to share files through the Shell command<\/strong>. You can upload any type of file for up to 10 Gb. It also supports file encryption. And did I mention that it is totally Free?<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"Transfer.sh File Sharing\" height=\"470\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-07-2018\/transfersh.jpg\" width=\"750\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/fbsonar.com\/\">FB Sonar<\/a><\/h2>\n<p>A tool to debug mobile apps for iOS and Android. The app is equipped with some tools for a <strong>convenient debugging experience<\/strong> such as a log viewer, interactive layout inspector, and network inspector. If that\u2019s not enough, you can create a plugin to extend the app with the functionality you need.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"FB Sonar\" height=\"470\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-07-2018\/sonar.jpg\" width=\"750\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.github.com\/kapenike\/JSUI\">JSUI<\/a><\/h2>\n<p>This app is packed with a bunch of tools to provide a better way to organize your projects. You can <strong>create a group, generate a new project using some popular projects<\/strong> like React, Vue, and Angular, install a project dependency, run a Node.js server, and a lot more. A great app for those who manage dozen of projects.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"JSUI\" height=\"470\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-07-2018\/jsui.jpg\" width=\"750\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.github.com\/Brain-WP\/BrainMonkey\">BrainMonkey<\/a><\/h2>\n<p>A PHP unit testing utility designed with some specific tools for WordPress. It provides tools that allow to <strong><em>mock<\/em> PHP functions<\/strong>. It also provides a set of tools out of the box to deal with some WordPress functions like <code>add_action<\/code> <code>remove_action<\/code> to name a few, which are generally <code>tricky<\/code> to test.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"Brain Monkey\" height=\"470\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-07-2018\/brain-monkey.jpg\" width=\"750\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/fractal.build\/\">Fractal<\/a><\/h2>\n<p>Fractal has been designed to be a central documentation tool for developers within a team to refer to when there\u2019s a need to integrate a component into a project. It allows you to <strong>integrate code snippets, displaying previews, documentation, notes,<\/strong> etc. of each component.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"Fractal Documentation Tool\" height=\"470\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-07-2018\/fractal.jpg\" width=\"750\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/lumin.rocks\/\">LuminJS<\/a><\/h2>\n<p>A super tiny <strong>JavaScript library to highlight text on your website<\/strong>. It works seamlessly with a complex DOM structure, and it\u2019s programmable in that you can set the speed, styling, and animation.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"LuminJS Library\" height=\"470\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-07-2018\/lumin.jpg\" width=\"750\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.github.com\/terkelg\/prompts\">Prompts<\/a><\/h2>\n<p>A handy <strong>NPM package to build interactive CLI using Node.js<\/strong>. It supports basic prompts, multiple choices, dynamic prompts, and many types of inputs like a password, text, number, email, etc.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"Prompts NPM Package\" height=\"470\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-07-2018\/prompts.jpg\" width=\"750\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.github.com\/amirandalibi\/perception\">Perception<\/a><\/h2>\n<p>A cool WordPress plugin that would <strong>improve WordPress Media Library search<\/strong> by classifying images using <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/cloud.google.com\/vision\/\">Google Cloud Vision API<\/a>. For example, if you have uploaded a \u201cbird\u201d image, you can search the image using the keyword \u201cbird\u201d whether or not the keyword is included to the image name, file name, or the metadata.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"Perception WordPress Plugin\" height=\"470\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-07-2018\/perception.gif\" width=\"750\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/dev.tube\/\">DevTube<\/a><\/h2>\n<p>A collection of <strong>videos, pulled from Youtube, of several developer conferences<\/strong> like JSConf, Google TechTalk, and O\u2019Reilly. Now get your popcorn and level up your Dev skills.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"DevTube\" height=\"480\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-07-2018\/devtube.jpg\" width=\"750\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/reactive.how\/\">Reactive.how<\/a><\/h2>\n<p>Reactive programming is on the rise; a new paradigm in programming, especially around the web, where the data stream is abundant and continuously flowing every millisecond. This resource is an initiative from C\u00e8dric Soulas to <strong>teach you the principles of <em>reactive<\/em> programming<\/strong>.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"Reactive.how Learning Resource\" height=\"470\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-07-2018\/reactive-how.jpg\" width=\"750\"><\/figure>\n<hr>","protected":false},"excerpt":{"rendered":"<p>An interesting mix of tools including Sketch library by WordPress, React.js and Vue.js tools and resources to learn development skills.<\/p>\n","protected":false},"author":113,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[352],"tags":[2539],"topic":[4520],"class_list":["entry-content","is-maxi"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v22.8 (Yoast SEO v27.6) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Fresh Resources for Web Designers and Developers (July 2018) - Hongkiat<\/title>\n<meta name=\"description\" content=\"An interesting mix of tools including Sketch library by WordPress, React.js and Vue.js tools and resources to learn development skills.\" \/>\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\/designers-developers-monthly-07-2018\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Fresh Resources for Web Designers and Developers (July 2018)\" \/>\n<meta property=\"og:description\" content=\"An interesting mix of tools including Sketch library by WordPress, React.js and Vue.js tools and resources to learn development skills.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-07-2018\/\" \/>\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=\"2018-07-24T15:01:08+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-04-21T11:48:13+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-07-2018\/wprig.jpg\" \/>\n<meta name=\"author\" content=\"Thoriq Firdaus\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@tfirdaus\" \/>\n<meta name=\"twitter:site\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Thoriq Firdaus\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"9 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designers-developers-monthly-07-2018\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designers-developers-monthly-07-2018\\\/\"},\"author\":{\"name\":\"Thoriq Firdaus\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/e7948c7a175d211496331e4b6ce55807\"},\"headline\":\"Fresh Resources for Web Designers and Developers (July 2018)\",\"datePublished\":\"2018-07-24T15:01:08+00:00\",\"dateModified\":\"2025-04-21T11:48:13+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designers-developers-monthly-07-2018\\\/\"},\"wordCount\":975,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designers-developers-monthly-07-2018\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/designers-developers-monthly-07-2018\\\/wprig.jpg\",\"keywords\":[\"Tools for Designers &amp; Developers\"],\"articleSection\":[\"Web Design\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designers-developers-monthly-07-2018\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designers-developers-monthly-07-2018\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designers-developers-monthly-07-2018\\\/\",\"name\":\"Fresh Resources for Web Designers and Developers (July 2018) - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designers-developers-monthly-07-2018\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designers-developers-monthly-07-2018\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/designers-developers-monthly-07-2018\\\/wprig.jpg\",\"datePublished\":\"2018-07-24T15:01:08+00:00\",\"dateModified\":\"2025-04-21T11:48:13+00:00\",\"description\":\"An interesting mix of tools including Sketch library by WordPress, React.js and Vue.js tools and resources to learn development skills.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designers-developers-monthly-07-2018\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designers-developers-monthly-07-2018\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designers-developers-monthly-07-2018\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/designers-developers-monthly-07-2018\\\/wprig.jpg\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/designers-developers-monthly-07-2018\\\/wprig.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designers-developers-monthly-07-2018\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Fresh Resources for Web Designers and Developers (July 2018)\"}]},{\"@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\\\/e7948c7a175d211496331e4b6ce55807\",\"name\":\"Thoriq Firdaus\",\"description\":\"Thoriq is a writer for Hongkiat.com with a passion for web design and development. He is the author of Responsive Web Design by Examples, where he covered his best approaches in developing responsive websites quickly with a framework.\",\"sameAs\":[\"https:\\\/\\\/thoriq.com\",\"https:\\\/\\\/x.com\\\/tfirdaus\"],\"jobTitle\":\"Web Developer\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/author\\\/thoriq\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Fresh Resources for Web Designers and Developers (July 2018) - Hongkiat","description":"An interesting mix of tools including Sketch library by WordPress, React.js and Vue.js tools and resources to learn development skills.","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\/designers-developers-monthly-07-2018\/","og_locale":"en_US","og_type":"article","og_title":"Fresh Resources for Web Designers and Developers (July 2018)","og_description":"An interesting mix of tools including Sketch library by WordPress, React.js and Vue.js tools and resources to learn development skills.","og_url":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-07-2018\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2018-07-24T15:01:08+00:00","article_modified_time":"2025-04-21T11:48:13+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-07-2018\/wprig.jpg","type":"","width":"","height":""}],"author":"Thoriq Firdaus","twitter_card":"summary_large_image","twitter_creator":"@tfirdaus","twitter_site":"@hongkiat","twitter_misc":{"Written by":"Thoriq Firdaus","Est. reading time":"9 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-07-2018\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-07-2018\/"},"author":{"name":"Thoriq Firdaus","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/e7948c7a175d211496331e4b6ce55807"},"headline":"Fresh Resources for Web Designers and Developers (July 2018)","datePublished":"2018-07-24T15:01:08+00:00","dateModified":"2025-04-21T11:48:13+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-07-2018\/"},"wordCount":975,"commentCount":0,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-07-2018\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-07-2018\/wprig.jpg","keywords":["Tools for Designers &amp; Developers"],"articleSection":["Web Design"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-07-2018\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-07-2018\/","url":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-07-2018\/","name":"Fresh Resources for Web Designers and Developers (July 2018) - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-07-2018\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-07-2018\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-07-2018\/wprig.jpg","datePublished":"2018-07-24T15:01:08+00:00","dateModified":"2025-04-21T11:48:13+00:00","description":"An interesting mix of tools including Sketch library by WordPress, React.js and Vue.js tools and resources to learn development skills.","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-07-2018\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-07-2018\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-07-2018\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-07-2018\/wprig.jpg","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-07-2018\/wprig.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-07-2018\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Fresh Resources for Web Designers and Developers (July 2018)"}]},{"@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\/e7948c7a175d211496331e4b6ce55807","name":"Thoriq Firdaus","description":"Thoriq is a writer for Hongkiat.com with a passion for web design and development. He is the author of Responsive Web Design by Examples, where he covered his best approaches in developing responsive websites quickly with a framework.","sameAs":["https:\/\/thoriq.com","https:\/\/x.com\/tfirdaus"],"jobTitle":"Web Developer","url":"https:\/\/www.hongkiat.com\/blog\/author\/thoriq\/"}]}},"jetpack_featured_media_url":"https:\/\/","jetpack_shortlink":"https:\/\/wp.me\/p4uxU-bGv","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/44919","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\/113"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/comments?post=44919"}],"version-history":[{"count":4,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/44919\/revisions"}],"predecessor-version":[{"id":73999,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/44919\/revisions\/73999"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=44919"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=44919"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=44919"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=44919"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}