{"id":48093,"date":"2019-06-21T21:11:04","date_gmt":"2019-06-21T13:11:04","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=48093"},"modified":"2025-04-21T19:46:59","modified_gmt":"2025-04-21T11:46:59","slug":"designers-developers-monthly-06-2019","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-06-2019\/","title":{"rendered":"Fresh Resources for Web Designers and Developers (June 2019)"},"content":{"rendered":"<p>As we move through 2019, 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-48093-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-48093-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:\/\/cssgrid-generator.netlify.app\/\">CSS Grid Generator<\/a><\/h2>\n<p>This tool, created by Sarah Drasner, will make creating a CSS grid more intuitive. It helps you to save time when creating complex layouts such as composing overlapping grid areas. The tool will generate the code that you can copy and paste to your website.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"CSS Grid Generator\" height=\"500\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-06-2019\/css-grid-generator.jpg\" width=\"800\"><\/figure>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/developer.chrome.com\/blog\/inside-browser-part1\/\">Inside Look at Modern Browser<\/a><\/h2>\n<p>A comprehensive insight from Google to explore how modern browsers work. This gives you a glimpse of the browser internals, such as how it utilizes CPU, GPU, and Memory. This resource may help in writing performant codes. The illustration from Mariko Kosaka makes it pleasant and easy to understand.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"Inside Look at Modern Browser\" height=\"500\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-06-2019\/inside-browser.jpg\" width=\"800\"><\/figure>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/zzz.dog\/\">Zdog<\/a><\/h2>\n<p>Another fantastic from <strong>Metafizzy<\/strong>. Zdog is JavaScript library that allows you to draw 3D polymorphic shapes through HTML Canvas which then can be composed into a meaningful figures like, for example, <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/codepen.io\/desandro\/pen\/qxjmKM\">Mario Bros<\/a>. Metafizzy is also known for his other fantastic JavaScript library such as <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/isotope.metafizzy.co\/\">Isotope<\/a>, <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/flickity.metafizzy.co\/\">Flickity<\/a>, and <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/packery.metafizzy.co\/\">Packery<\/a><\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"Zdog\" height=\"500\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-06-2019\/zzzdog.jpg\" width=\"800\"><\/figure>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.uibot.app\/\">UIBot App<\/a><\/h2>\n<p>UIBot is a tool to generate the user interface of an admin dashboard. Simply click on the button, and the tool will generate a new variant of layout and colors. It might not end up being the UI in your project, but it may still be a handy tool to drive inspiration from.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"UIBot App\" height=\"500\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-06-2019\/uibot.jpg\" width=\"800\"><\/figure>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/accessibilityinsights.io\/\">Accesibility Insights<\/a><\/h2>\n<p>A browser extension to evaluate your website for Accessibility issues (a11y) and provides guidelines on how to fix those issues. The extension is available as a Chrome and Microsoft Edge extension.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"Accessibility Insights\" height=\"500\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-06-2019\/accessibilityinsights.jpg\" width=\"800\"><\/figure>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/nightwatchjs.org\/\">NightwatchJS<\/a><\/h2>\n<p>A JavaScript library that simplifies end-to-end testing. NightwatchJS utilizes the standard W3C WebDriver API to connect and interact with the browsers to perform the test. It support numerous drivers including the WebDriver services including <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.github.com\/mozilla\/geckodriver\/releases\">GeckoDriver<\/a> to run test on Firefox browser, <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/chromedriver.chromium.org\/\">ChromeDriver<\/a>, and <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/developer.apple.com\/documentation\/webkit\/testing_with_webdriver_in_safari\">SafariDriver<\/a>.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"NightwatchJS\" height=\"500\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-06-2019\/nightwatchjs.jpg\" width=\"800\"><\/figure>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.github.com\/seek-oss\/playroom\">Playroom<\/a><\/h2>\n<p>Playroom is a unique tool. In a nutshell, it\u2019s something like the tool to lay out the design system or component library, but it also provides a preview section that emulates the component in various viewport sizes. It\u2019s a pretty handy tool to display how your component or layout changes at granular level.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"Playroom\" height=\"500\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-06-2019\/seek-playroom.jpg\" width=\"800\"><\/figure>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/almonk.github.io\/pylon\/\">Pylon<\/a><\/h2>\n<p>PylonCSS is unlike any other CSS library out there. Instead of a set of classes, it provides a set of custom components. This allows you to wrap your website in a more expressive way similar to iOS. For example, we can use <code>&lt;hstack&gt;<\/code> to create a horizontal stack of elements, or <code>&lt;vstack&gt;<\/code> to create vertical stack.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"Pylon\" height=\"500\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-06-2019\/pylon.jpg\" width=\"800\"><\/figure>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/youzan.github.io\/vant\/\">Vant<\/a><\/h2>\n<p><strong>Vant<\/strong> is a collection mobile UI component built on <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/vuejs.org\/\">Vue.js<\/a>. The collection is pretty vast, with 55+ components and growing. It supports TypeScript, SSR (Server Side Rendering), and i18n, which means you can translate the component to locale languages.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"Vant\" height=\"500\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-06-2019\/vant.jpg\" width=\"800\"><\/figure>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/robo.li\/\">Robo<\/a><\/h2>\n<p>Many of you might be familiar with setting up a task runner with Gulp and Grunt to automate workflows during development, such as concatenating files, minifying CSS and JavaScript, etc. These tools are built with Node.js. Now, what if I told you that you can do the same with PHP. Meet <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/robo.li\/\">Robo<\/a> a task runner for PHP<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"Robo\" height=\"500\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-06-2019\/robo.jpg\" width=\"800\"><\/figure>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.github.com\/kefranabg\/readme-md-generator\">Readme Generator<\/a><\/h2>\n<p>Having a <strong>README.md<\/strong> file is an integral part of an open-source project. But if you feel like creating a proper and beautiful readme file can be a daunting task, you can try using this tool to streamline the process on creating one.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"Readme Generator\" height=\"500\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-06-2019\/readme-md-generator.jpg\" width=\"800\"><\/figure>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.csswand.dev\">CSS Wand<\/a><\/h2>\n<p>CSSWand is a collection of beautiful effects built purely with HTML and CSS. It provides the code to copy and paste onto your website.<\/p>\n<figure><img decoding=\"async\" alt=\"CSS Wand\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-06-2019\/csswand.jpg\"><\/figure>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/gitmoji.carloscuesta.me\/\">Gitmoji<\/a><\/h2>\n<p>We\u2019re seeing an increasing trend of using emojis in a git commit message. Check this reference, Gitmoji, to see which proper emoji to use in your commit message.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"Gitmoji\" height=\"500\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-06-2019\/gitmoji.jpg\" width=\"800\"><\/figure>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.github.com\/imfunniee\/gitfolio\">Gitfolio<\/a><\/h2>\n<p>Gitfolio is a tool that allows you to build a portfolio site based on your Github profiles as well as create a blog. A great to create your site quickly.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"Gitfolio\" height=\"500\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-06-2019\/gitfolio.jpg\" width=\"800\"><\/figure>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.github.com\/nunomaduro\/phpinsights\">PHPInsights<\/a><\/h2>\n<p>PHPInsights is a tool to analyze your PHP code quality. It checks the use of Classes, Abstract, Interface, code complexity, and some code styling. You can run it during development or within your CI pipelines to keep your overall code quality in check. It\u2019s also compatible with popular PHP platforms such as Laravel, WordPress, and Magento out of the box.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"PHPInsights\" height=\"500\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-06-2019\/phpinsights.jpg\" width=\"800\"><\/figure>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.github.com\/rectorphp\/rector\">Rector<\/a><\/h2>\n<p>Rector stands for Reconstructor, and is a tool to automate code refactoring of your PHP codebase to more modern PHP practices. It can be installed through Composer or use <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/hub.docker.com\/_\/docker\">the Docker image<\/a> then it\u2019s as easy as typing the command <code>rector<\/code> and let it do the hard work for you.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"Rector\" height=\"500\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-06-2019\/rector.jpg\" width=\"800\"><\/figure>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/akveo.github.io\/ngx-admin\/\">Ngx Admin<\/a><\/h2>\n<p>Ngx Admin is a free admin dashboard built on top of Angular, Bootstrap and <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/akveo.github.io\/nebular\">Nebular<\/a>, one of popular Angular UI components. It comes with three theme designs out-of-the-box: light, dark, and corporate, but of course, you can extend the theme to your own taste. Ngx Admin is free both for personal and commercial projects.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"Ngx Admin\" height=\"500\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-06-2019\/ngx-admin.jpg\" width=\"800\"><\/figure>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/remixicon.com\/\">RemixIcon<\/a><\/h2>\n<p>A nice collection of icons. Each icon in the collection comes with several variants instead of just one or two, and it also comes with 2 styles: <code>lined<\/code> and <code>filled<\/code>. There are 1574 icons in total as of this writing. You can download the icons in SVG, icon fonts, as well as in PowerPoint and Keynote format.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"RemixIcon\" height=\"500\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-06-2019\/remixicon.jpg\" width=\"800\"><\/figure>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.github.com\/twbs\/rfs\">RFS (Responsive Font Size)<\/a><\/h2>\n<p>RFS is a CSS library that automatically scales font size appropriately based on the viewport size. The library is meant to use with a CSS processors, and so it\u2019s available in all the popular pre-processors, including Less, Sass, Stylus, as well as PostCSS.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"RFS\" height=\"500\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-06-2019\/rfs.jpg\" width=\"800\"><\/figure>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.npmjs.com\/package\/@wordpress\/scripts\">WP Scripts<\/a><\/h2>\n<p><strong>WP Scripts<\/strong> is a collection of reusable utility scripts to develop WordPress. It contains a pre-defined recommended configuration out of the box so you can start working on the project instead of tinkering with the configurations all-day. Once installed, you will have the access to <code>wp-scripts<\/code> command line which you can use to perform a <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.npmjs.com\/package\/@wordpress\/scripts#build\">build<\/a> command to compile codes, the <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.npmjs.com\/package\/@wordpress\/scripts#test-e2e\">test<\/a> command to perform end-to-end testing, and a few more commands.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"WP Scripts\" height=\"500\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-06-2019\/wp-scripts.jpg\" width=\"800\"><\/figure>","protected":false},"excerpt":{"rendered":"<p>As we move through 2019, 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 help enhance your&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":[],"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 (June 2019) - Hongkiat<\/title>\n<meta name=\"description\" content=\"As we move through 2019, the web development landscape continues to evolve with exciting new tools and resources. This month&#039;s collection features some\" \/>\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-06-2019\/\" \/>\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 (June 2019)\" \/>\n<meta property=\"og:description\" content=\"As we move through 2019, the web development landscape continues to evolve with exciting new tools and resources. This month&#039;s collection features some\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-06-2019\/\" \/>\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-06-21T13:11:04+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-04-21T11:46:59+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-06-2019\/css-grid-generator.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-06-2019\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designers-developers-monthly-06-2019\\\/\"},\"author\":{\"name\":\"Thoriq Firdaus\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/e7948c7a175d211496331e4b6ce55807\"},\"headline\":\"Fresh Resources for Web Designers and Developers (June 2019)\",\"datePublished\":\"2019-06-21T13:11:04+00:00\",\"dateModified\":\"2025-04-21T11:46:59+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designers-developers-monthly-06-2019\\\/\"},\"wordCount\":1085,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designers-developers-monthly-06-2019\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/designers-developers-monthly-06-2019\\\/css-grid-generator.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-06-2019\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designers-developers-monthly-06-2019\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designers-developers-monthly-06-2019\\\/\",\"name\":\"Fresh Resources for Web Designers and Developers (June 2019) - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designers-developers-monthly-06-2019\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designers-developers-monthly-06-2019\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/designers-developers-monthly-06-2019\\\/css-grid-generator.jpg\",\"datePublished\":\"2019-06-21T13:11:04+00:00\",\"dateModified\":\"2025-04-21T11:46:59+00:00\",\"description\":\"As we move through 2019, the web development landscape continues to evolve with exciting new tools and resources. This month's collection features some\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designers-developers-monthly-06-2019\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designers-developers-monthly-06-2019\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designers-developers-monthly-06-2019\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/designers-developers-monthly-06-2019\\\/css-grid-generator.jpg\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/designers-developers-monthly-06-2019\\\/css-grid-generator.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designers-developers-monthly-06-2019\\\/#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 (June 2019)\"}]},{\"@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 (June 2019) - Hongkiat","description":"As we move through 2019, the web development landscape continues to evolve with exciting new tools and resources. This month's collection features some","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-06-2019\/","og_locale":"en_US","og_type":"article","og_title":"Fresh Resources for Web Designers and Developers (June 2019)","og_description":"As we move through 2019, the web development landscape continues to evolve with exciting new tools and resources. This month's collection features some","og_url":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-06-2019\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2019-06-21T13:11:04+00:00","article_modified_time":"2025-04-21T11:46:59+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-06-2019\/css-grid-generator.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-06-2019\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-06-2019\/"},"author":{"name":"Thoriq Firdaus","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/e7948c7a175d211496331e4b6ce55807"},"headline":"Fresh Resources for Web Designers and Developers (June 2019)","datePublished":"2019-06-21T13:11:04+00:00","dateModified":"2025-04-21T11:46:59+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-06-2019\/"},"wordCount":1085,"commentCount":0,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-06-2019\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-06-2019\/css-grid-generator.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-06-2019\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-06-2019\/","url":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-06-2019\/","name":"Fresh Resources for Web Designers and Developers (June 2019) - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-06-2019\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-06-2019\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-06-2019\/css-grid-generator.jpg","datePublished":"2019-06-21T13:11:04+00:00","dateModified":"2025-04-21T11:46:59+00:00","description":"As we move through 2019, the web development landscape continues to evolve with exciting new tools and resources. This month's collection features some","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-06-2019\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-06-2019\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-06-2019\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-06-2019\/css-grid-generator.jpg","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-06-2019\/css-grid-generator.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-06-2019\/#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 (June 2019)"}]},{"@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-cvH","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/48093","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=48093"}],"version-history":[{"count":3,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/48093\/revisions"}],"predecessor-version":[{"id":73994,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/48093\/revisions\/73994"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=48093"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=48093"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=48093"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=48093"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}