{"id":37007,"date":"2017-07-13T23:01:31","date_gmt":"2017-07-13T15:01:31","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=37007"},"modified":"2025-04-21T17:55:18","modified_gmt":"2025-04-21T09:55:18","slug":"designers-developers-monthly-07-2017","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-07-2017\/","title":{"rendered":"Fresh Resources for Web Designers and Developers (July 2017)"},"content":{"rendered":"<p>As we enter the second half of 2017, the web development landscape continues to evolve with exciting new tools and resources. This month\u2019s collection features some truly innovative solutions that have caught our attention.<\/p>\n<p>From powerful JavaScript frameworks to cutting-edge CSS utilities and innovative development tools, we\u2019ve curated a diverse selection of resources that can help enhance your workflow and elevate your projects. Whether you\u2019re working on frontend interfaces, backend systems, or full-stack applications, there\u2019s something here to inspire and assist you. Let\u2019s explore what\u2019s new!<\/p>\n<div class=\"ref-block ref-block--tax noLinks\" id=\"ref-block-tax-37007-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-37007-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:\/\/heropatterns.com\/\">HeroPatterns<\/a><\/h2>\n<p>A collection of <strong>repeatable pattern made with SVG<\/strong> that you can use as a background in your website. The site is equipped with a handy setting to <strong>customize the color and opacity of the pattern<\/strong> and lets you simply copy and paste the code to add in your CSS.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"HeroPatterns\" height=\"460\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-07-2017\/heropatterns.jpg\" width=\"750\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/testcafe.io\/\">TestCafe<\/a><\/h2>\n<p>TestCafe is an <strong>end-to-end (e2e) testing tool<\/strong> that allows you to test your websites and web apps as if it is being used by real users. It will automate several things when performing the test, including <strong>starting the browsers, running specified test unit, generating reports<\/strong>, screenshots as well as sourcemap to troubleshoot errors easily.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"TestCafe\" height=\"460\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-07-2017\/testcafe.jpg\" width=\"750\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/sugarjs.com\/\">SugarJS<\/a><\/h2>\n<p>SugarJS is a JavaScript library to <strong>manipulate Objects, Arrays, and Dates<\/strong> with a nicer and more readable syntax. The library also comes with a handful of utility functions, for example, <code>.escapeHTML()<\/code> which will <strong>convert HTML elements into their Entity format<\/strong>.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"SugarJS\" height=\"460\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-07-2017\/sugar.jpg\" width=\"750\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.github.com\/vercel\/ms\">MS<\/a><\/h2>\n<p>A handy JavaScript library to <strong>turn time, number and regular string to milliseconds<\/strong>. <code>ms('2 days')<\/code>, for example, will be converted to <code>172800000<\/code>.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"MS\" height=\"460\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-07-2017\/ms.jpg\" width=\"750\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/pa11y.org\/\">pa11y<\/a><\/h2>\n<p>A great collection of tools to help <strong>improve accessibility on your website<\/strong> and web apps. pa11y consists of a CLI for testing any web pages for any accessibility issues, a <strong>Dashboard to show generated reports of errors and warnings<\/strong>, and a CLI that is specifically designed for a CI tool like Codeship or Travis.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"Pa11y\" height=\"460\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-07-2017\/pa11y.jpg\" width=\"750\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/feathericons.com\/\">Feather Icons<\/a><\/h2>\n<p>A <strong>collection of icons with modern vibe<\/strong>. These icons are a perfect fit for websites and apps designed for any platform (iOS, Windows, or Ubuntu). The icons come in <strong>SVG as well as in React and Angular components<\/strong>.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"Feather Icons\" height=\"460\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-07-2017\/feathericons.jpg\" width=\"750\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.github.com\/jondot\/react-flight\">React Flight<\/a><\/h2>\n<p>A React module to <strong>build animation composition in your application<\/strong>. The library is inspired by Principle for Sketch, in which you can <strong>add interactivity to a UI component<\/strong> quickly and easily.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"React Flight\" height=\"460\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-07-2017\/react-flight.jpg\" width=\"750\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/bouncejs.com\/\">BounceJS<\/a><\/h2>\n<p>A library to <strong>create animations with bounce effect<\/strong>. The animation is powered by CSS3 and a number of preset animations. You can install the JavaScript library through npm, bower, or <strong>simply copy the CSS animation<\/strong> generated <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/bouncejs.com\/\">in the website<\/a>.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"BounceJS\" height=\"460\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-07-2017\/bounce.jpg\" width=\"750\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/devicon.dev\/\">Devicon<\/a><\/h2>\n<p>A collection of <strong>icons of programming languages, designing, and development tools<\/strong>. The icons are available in SVG and Font format. Some particular <strong>icons such as Firefox, AWS, and HTML5 also come with their detailed variants<\/strong>. Pretty cool right?<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"Devicon\" height=\"460\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-07-2017\/devicon.jpg\" width=\"750\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.github.com\/creativetimofficial\/now-ui-kit\">Now UI Kit<\/a><\/h2>\n<p>A responsive collection interface based on Bootstrap 4. It <strong>features 50 elements and 3 custom templates<\/strong>. Aside from the HTML version, the UI is also provided in PSD and Sketch formats.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"Now UI Kit\" height=\"460\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-07-2017\/now-ui-kit.jpg\" width=\"750\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/t-scroll.com\/\">T-Scroll<\/a><\/h2>\n<p>T-Scroll is a <strong>JavaScript library for applying animation<\/strong> when an element is visible in the viewport. It is equipped with a handful of options and preset animations.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"T Scroll\" height=\"460\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-07-2017\/tscroll.jpg\" width=\"750\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/ory.gitbooks.io\/editor\/content\/\">Ory Editor<\/a><\/h2>\n<p>ORY is a modern and more accessible web editor on the web. The ORY Editor is <strong>built on top of React and Flux<\/strong>. It makes editing easy by allowing users to edit content and see the result immediately <strong>without having to know special syntaxes like HTML or Markdown<\/strong>.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"Ory Editor\" height=\"460\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-07-2017\/ory-editor.jpg\" width=\"750\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.tadviewer.com\/\">TadViewer<\/a><\/h2>\n<p>TadViewer is a handy <strong>desktop app to view CSV<\/strong> and it works on large data and files. The app is available on macOS, Windows, and Linux.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"TadViewer\" height=\"460\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-07-2017\/tad.jpg\" width=\"750\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"http:\/\/iamdustan.com\/smoothscroll\/\">Smooth Scroll Polyfill<\/a><\/h2>\n<p>Smooth Scrolling has proven to serve a more pleasing user experience. It is now proposed and <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/drafts.csswg.org\/cssom-view\/#extensions-to-the-window-interface\">drafted officially in W3C<\/a>. At the moment, it is only working in Chrome, Firefox, and Opera. Use this library to <strong>emulate the smooth scrolling behavior in Internet Explorer and Safari<\/strong>.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"Smooth Scroll Polyfill\" height=\"460\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-07-2017\/smooth-scroll.jpg\" width=\"750\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/ned.im\/noty\/\">Noty<\/a><\/h2>\n<p>A JavaScript library <strong>for displaying notifications<\/strong>, Noty makes it easy to show an Alart, Success, Error, Warning, Information or a dialog message. It can be used along with an animation library like mo.js and bounce.js <strong>to make the notification slides in and out gracefully<\/strong>.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"Noty\" height=\"460\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-07-2017\/noty.jpg\" width=\"750\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.github.com\/LinkedInAttic\/hopscotch\">HopScotch<\/a><\/h2>\n<p>Hopscotch is an <strong>open-source project instantiated by LinkedIn<\/strong>. It is a framework to make it easy for developers to add product tours. Check out the <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.github.com\/LinkedInAttic\/hopscotch\">demo for a live example<\/a> and the API.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"HopScotch\" height=\"460\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-07-2017\/hopscotch.jpg\" width=\"750\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/surveyjs.io\/\">SurveyJS<\/a><\/h2>\n<p>SurveyJS is another awesome JavaScript library. As the name implies, it is <strong>designed to create survey inputs<\/strong>. It features various input types to fill in the survey answers and <strong>has also been ported to several popular JavaScript frameworks<\/strong> including AngularJS, VueJS, and React.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"SurveyJS\" height=\"460\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-07-2017\/surveyjs.jpg\" width=\"750\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.github.com\/wp-graphql\/wp-graphql\">WP GraphQL<\/a><\/h2>\n<p>GraphQL is on the rise and might be a <strong>strong contender to replace REST architecture<\/strong> that powers nearly all the web APIs. This is a plugin that will allow you to <strong>retrieve your WordPress content with GraphQL<\/strong>. Here is a great reference on how REST and GraphQL differ to each other.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"WP GraphQL\" height=\"460\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-07-2017\/graphql.jpg\" width=\"750\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/microsoft.github.io\/monaco-editor\/\">Monaco Editor<\/a><\/h2>\n<p>Monaco Editor is the editor that <strong>powers Visual Code Editor<\/strong>. It is built by Microsoft and supports several languages out of the box including HTML, CSS, LESS, CoffeeScript, and PHP along with the <strong>Intellisense that helps you write code faster<\/strong>.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"Monaco Editor\" height=\"460\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-07-2017\/monaco-editor.jpg\" width=\"750\"><\/figure>\n<hr>\n<p class=\"recommended_top\">\n\t\t\t\t\t<strong>Read Also:<\/strong>\u00a0\n\t\t\t\t\t<a target=\"_blank\" href=\"https:\/\/www.hongkiat.com\/blog\/web-developer-resources-compilation\/\">Web Developer Resources: A Mega-Compilation<\/a>\n\t\t\t\t<\/p>","protected":false},"excerpt":{"rendered":"<p>As we enter the second half of 2017, the web development landscape continues to evolve with exciting new tools and resources. This month\u2019s collection features some truly innovative solutions that have caught our attention. From powerful JavaScript frameworks to cutting-edge CSS utilities and innovative development tools, we\u2019ve curated a diverse selection of resources that can&hellip;<\/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.5) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Fresh Resources for Web Designers and Developers (July 2017) - Hongkiat<\/title>\n<meta name=\"description\" content=\"As we enter the second half of 2017, the web development landscape continues to evolve with exciting new tools and resources. This month&#039;s collection\" \/>\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-2017\/\" \/>\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 2017)\" \/>\n<meta property=\"og:description\" content=\"As we enter the second half of 2017, the web development landscape continues to evolve with exciting new tools and resources. This month&#039;s collection\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-07-2017\/\" \/>\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=\"2017-07-13T15:01:31+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-04-21T09:55:18+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-07-2017\/heropatterns.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=\"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\\\/designers-developers-monthly-07-2017\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designers-developers-monthly-07-2017\\\/\"},\"author\":{\"name\":\"Thoriq Firdaus\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/e7948c7a175d211496331e4b6ce55807\"},\"headline\":\"Fresh Resources for Web Designers and Developers (July 2017)\",\"datePublished\":\"2017-07-13T15:01:31+00:00\",\"dateModified\":\"2025-04-21T09:55:18+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designers-developers-monthly-07-2017\\\/\"},\"wordCount\":904,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designers-developers-monthly-07-2017\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/designers-developers-monthly-07-2017\\\/heropatterns.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-2017\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designers-developers-monthly-07-2017\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designers-developers-monthly-07-2017\\\/\",\"name\":\"Fresh Resources for Web Designers and Developers (July 2017) - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designers-developers-monthly-07-2017\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designers-developers-monthly-07-2017\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/designers-developers-monthly-07-2017\\\/heropatterns.jpg\",\"datePublished\":\"2017-07-13T15:01:31+00:00\",\"dateModified\":\"2025-04-21T09:55:18+00:00\",\"description\":\"As we enter the second half of 2017, the web development landscape continues to evolve with exciting new tools and resources. This month's collection\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designers-developers-monthly-07-2017\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designers-developers-monthly-07-2017\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designers-developers-monthly-07-2017\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/designers-developers-monthly-07-2017\\\/heropatterns.jpg\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/designers-developers-monthly-07-2017\\\/heropatterns.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designers-developers-monthly-07-2017\\\/#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 2017)\"}]},{\"@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 2017) - Hongkiat","description":"As we enter the second half of 2017, the web development landscape continues to evolve with exciting new tools and resources. This month's collection","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-2017\/","og_locale":"en_US","og_type":"article","og_title":"Fresh Resources for Web Designers and Developers (July 2017)","og_description":"As we enter the second half of 2017, the web development landscape continues to evolve with exciting new tools and resources. This month's collection","og_url":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-07-2017\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2017-07-13T15:01:31+00:00","article_modified_time":"2025-04-21T09:55:18+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-07-2017\/heropatterns.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":"8 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-07-2017\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-07-2017\/"},"author":{"name":"Thoriq Firdaus","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/e7948c7a175d211496331e4b6ce55807"},"headline":"Fresh Resources for Web Designers and Developers (July 2017)","datePublished":"2017-07-13T15:01:31+00:00","dateModified":"2025-04-21T09:55:18+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-07-2017\/"},"wordCount":904,"commentCount":0,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-07-2017\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-07-2017\/heropatterns.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-2017\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-07-2017\/","url":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-07-2017\/","name":"Fresh Resources for Web Designers and Developers (July 2017) - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-07-2017\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-07-2017\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-07-2017\/heropatterns.jpg","datePublished":"2017-07-13T15:01:31+00:00","dateModified":"2025-04-21T09:55:18+00:00","description":"As we enter the second half of 2017, the web development landscape continues to evolve with exciting new tools and resources. This month's collection","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-07-2017\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-07-2017\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-07-2017\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-07-2017\/heropatterns.jpg","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-07-2017\/heropatterns.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-07-2017\/#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 2017)"}]},{"@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-9CT","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/37007","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=37007"}],"version-history":[{"count":4,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/37007\/revisions"}],"predecessor-version":[{"id":73872,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/37007\/revisions\/73872"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=37007"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=37007"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=37007"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=37007"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}