{"id":47864,"date":"2019-05-28T11:04:05","date_gmt":"2019-05-28T03:04:05","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=47864"},"modified":"2025-04-21T18:35:18","modified_gmt":"2025-04-21T10:35:18","slug":"designers-developers-monthly-05-2019","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-05-2019\/","title":{"rendered":"Fresh Resources for Web Designers and Developers (May 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-47864-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-47864-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:\/\/cssfx.dev\">CSSFX<\/a><\/h2>\n<p>A collection of special visual effects that apply to button, input, and a loader. These effects are built purely with CSS with very minimal CSS and HTML, and you can apply the effect by simply copying and pasting the code.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"CSSFX\" height=\"500\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-05-2019\/cssfx.jpg\" width=\"800\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.github.com\/hiroppy\/fusuma\">Fusuma<\/a><\/h2>\n<p><strong>Fusuma<\/strong> is a tool that allows you to create presentation using Markdown file and syntax. It\u2019s connected to the native browser <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Presentation_API\">Presentation API<\/a> so it can deliver the similar experience as the presentation tool like PowerPoint and Keynote.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"Fusuma\" height=\"500\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-05-2019\/fusuma.jpg\" width=\"800\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/svelte.dev\">Svelte<\/a><\/h2>\n<p>Svelte is a tool that allows you to build web apps. Unlike React.js and Vue.js that will enforce you to write your web apps in a special or proprietary sytanx and use so called Virtual DOM, it will do just with HTML, CSS, and JavaScript sytax. It\u2019s a quite interesting approach of building web app.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"Svelte\" height=\"500\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-05-2019\/svelte.jpg\" width=\"800\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/frontity.org\">Frontity<\/a><\/h2>\n<p>As React.js is included in WordPress 5.0 to empower Gutenberg, we can also immediately use it to power up our plugin or theme front-end. Frontity is a tool that will allows us to do just that; building a modern WordPress theme with React.js. The project is currently in early stage. You can follow the progress <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/frontity.org\">in their Github repository<\/a>.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"Frontity\" height=\"500\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-05-2019\/frontify.jpg\" width=\"800\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.github.com\/GoogleChromeLabs\/quicklink\">Quicklnk<\/a><\/h2>\n<p>This tool is Google Chrome team initiative to make website loads as fast as possible by prefetching links within the viewport. Quick link is designed as a drop-in library with very minimal configuration. You can simply add the library to your page and execute the link, and that\u2019s all.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"Quicklink\" height=\"500\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-05-2019\/quicklink.jpg\" width=\"800\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/lit-element.polymer-project.org\/\">Lit Element<\/a><\/h2>\n<p>A JavaScript library from Polymer to create custom native Web Component. It enables creating the custom component easily and provide polyfill for the browsers that does not support custom components yet.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"Lit Element\" height=\"500\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-05-2019\/lit-element.jpg\" width=\"800\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/getbrevis.com\">Brevis<\/a><\/h2>\n<p>A CSS framework designed for scalable applications. Unlike a framework like Bootstrap which comes with some opiniated UI components, Brevis simply set \u201cspecification\u201d which rule out the CSS reference, naming convention, some patterns, and palletes. It does not assumes the UI you\u2019re going to build.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"Brevis\" height=\"500\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-05-2019\/brevis.jpg\" width=\"800\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/css-transform.moro.es\">CSS Transform Playground<\/a><\/h2>\n<p>A handy tool to visualize CSS Transform. The tool support 2D and 3D transformations including Rotation, Scale, Perspective, and Skew. It\u2019s a great tool to learn how CSS Transform works.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"CSS Transform Playground\" height=\"500\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-05-2019\/css-transform-playground.jpg\" width=\"800\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/chromewebstore.google.com\/detail\/fontanello\/jdlhfjlpaijjhklfadlhbbmpjfddkglc?hl=en\">Fontanello<\/a><\/h2>\n<p>A browser extension for Google Chrome and Firefox to get the typographic information of selected text. The information includes the <code>font-family<\/code>, <code>font-weight<\/code>, <code>font-size<\/code>, and <code>color<\/code>.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"Fontanello\" height=\"500\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-05-2019\/fontanello.jpg\" width=\"800\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"http:\/\/ourownthing.co.uk\/gradpad.html\">GradPad<\/a><\/h2>\n<p>A pretty tool to generate CSS gradients. It provides some controllers that allow you to customize the gradient output such as adding gradient composition, change their color and opacity, and drag their position.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"GradPad\" height=\"500\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-05-2019\/gradpad.jpg\" width=\"800\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/react95.io\">React95<\/a><\/h2>\n<p>A collection of React.js UI components that resembles the Windows 95 UI. You can find the Buttons, Date Picker, Table, Tabs, and Tooltips. Feeling nostalgic?<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"React95\" height=\"500\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-05-2019\/react95.jpg\" width=\"800\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/medium-zoom.francoischalifour.com\">Medium Zoom<\/a><\/h2>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"Medium Zoom\" height=\"500\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-05-2019\/medium-zoom.jpg\" width=\"800\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.flexulator.com\">Flexulator<\/a><\/h2>\n<p>Flexbox is one of powerful module in CSS3 to create page layout, but it could sometimes be confusing. This tool would help by visualizing it in real time as you change the Flex properties configuration.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"Flexulator\" height=\"500\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-05-2019\/flexulator.jpg\" width=\"800\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/micromodal.now.sh\">Micromodal<\/a><\/h2>\n<p>A lightweight JavaScript library to create a popup modal. Built with Accesibility in mind, <strong>Micromodal<\/strong> complies with the WAI-ARIA standard guideline for a modal interface. It\u2019s an overall small JavaScript library with a powerful features.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"Micromodal\" height=\"500\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-05-2019\/micromodal.jpg\" width=\"800\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.github.com\/malchata\/yall.js\">Yall.js<\/a><\/h2>\n<p>Yall.js is a JavaScript library to enable \u201clazy\u201d loading on your images, videos, and iframe. It\u2019s also able to <em>lazy-load<\/em> image attached a background through CSS. Despite these powerful features, Yall.js supports many modern browser, surprisingly, including the Internet Explorer 11.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"Yall Js\" height=\"500\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-05-2019\/yall-js.jpg\" width=\"800\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"http:\/\/autonumeric.org\">Autonumeric<\/a><\/h2>\n<p>As the name implies, AutoNumeric.js, is a JavaScript library that allows you to format numerical data automatically as you type in the input. It does not require any dependencies which help it maintains fast performance and easy to integrate into a framework. AutoNumeric.js is available in an official <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.github.com\/autoNumeric\/vue-autoNumeric\">Vue.js module<\/a>, as well as <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.github.com\/autoNumeric\/autoNumeric\/#related-projects\">other frameworks<\/a>.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"Autonumeric\" height=\"500\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-05-2019\/autonumeric.jpg\" width=\"800\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/textblock.io\">TextBlock<\/a><\/h2>\n<p>An advanced JavaScript library that allows you adjust typographical features like size, leading, and grades for a continuously responsive typography on your website.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"TextBlock\" height=\"500\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-05-2019\/textblock.jpg\" width=\"800\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/uppy.io\">Uppy<\/a><\/h2>\n<p>Uppy is an advanced file uploader library which allows you to upload files from many different sources including Dropbox, Instagram, Google Drive and of course your computer. On top of that it also supports multiple upload destinations. You transfer the upload to an <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/aws.amazon.com\/s3\/\">Amazon S3 bucket<\/a>, <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/tus.io\/\">Tus<\/a>, aside of uploading to your own server.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"Uppy\" height=\"500\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-05-2019\/uppy.jpg\" width=\"800\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.github.com\/minamarkham\/formation\">Formation<\/a><\/h2>\n<p>Formation is a Shell script to run on your new macOS to streamline installation to some of the most common tools and apps that you will need works and digital needs, including browser (Chrome and Firefox), package and version manager like NVM and Yarn, and many other things.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"Formation\" height=\"500\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-05-2019\/formation.jpg\" width=\"800\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/nerdfonts.com\">NerdsFont<\/a><\/h2>\n<p>A collection of fonts for your <em>nerd<\/em> soul. The collection aggragates from some popular fonts with nerdy characters such FontAwesome, Powerlines, Devicons, Octicons, Font Linux to name a few. NerdsFont also patched these fonts to be compatible with Windows, Linux, and macOS.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"NerdsFont\" height=\"500\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-05-2019\/nerdfonts.jpg\" width=\"800\"><\/figure>\n<hr>","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 (May 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-05-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 (May 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-05-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-05-28T03:04:05+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-04-21T10:35:18+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-05-2019\/cssfx.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=\"5 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-05-2019\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designers-developers-monthly-05-2019\\\/\"},\"author\":{\"name\":\"Thoriq Firdaus\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/e7948c7a175d211496331e4b6ce55807\"},\"headline\":\"Fresh Resources for Web Designers and Developers (May 2019)\",\"datePublished\":\"2019-05-28T03:04:05+00:00\",\"dateModified\":\"2025-04-21T10:35:18+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designers-developers-monthly-05-2019\\\/\"},\"wordCount\":908,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designers-developers-monthly-05-2019\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/designers-developers-monthly-05-2019\\\/cssfx.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-05-2019\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designers-developers-monthly-05-2019\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designers-developers-monthly-05-2019\\\/\",\"name\":\"Fresh Resources for Web Designers and Developers (May 2019) - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designers-developers-monthly-05-2019\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designers-developers-monthly-05-2019\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/designers-developers-monthly-05-2019\\\/cssfx.jpg\",\"datePublished\":\"2019-05-28T03:04:05+00:00\",\"dateModified\":\"2025-04-21T10:35:18+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-05-2019\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designers-developers-monthly-05-2019\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designers-developers-monthly-05-2019\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/designers-developers-monthly-05-2019\\\/cssfx.jpg\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/designers-developers-monthly-05-2019\\\/cssfx.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designers-developers-monthly-05-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 (May 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 (May 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-05-2019\/","og_locale":"en_US","og_type":"article","og_title":"Fresh Resources for Web Designers and Developers (May 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-05-2019\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2019-05-28T03:04:05+00:00","article_modified_time":"2025-04-21T10:35:18+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-05-2019\/cssfx.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":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-05-2019\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-05-2019\/"},"author":{"name":"Thoriq Firdaus","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/e7948c7a175d211496331e4b6ce55807"},"headline":"Fresh Resources for Web Designers and Developers (May 2019)","datePublished":"2019-05-28T03:04:05+00:00","dateModified":"2025-04-21T10:35:18+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-05-2019\/"},"wordCount":908,"commentCount":0,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-05-2019\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-05-2019\/cssfx.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-05-2019\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-05-2019\/","url":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-05-2019\/","name":"Fresh Resources for Web Designers and Developers (May 2019) - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-05-2019\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-05-2019\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-05-2019\/cssfx.jpg","datePublished":"2019-05-28T03:04:05+00:00","dateModified":"2025-04-21T10:35:18+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-05-2019\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-05-2019\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-05-2019\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-05-2019\/cssfx.jpg","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-05-2019\/cssfx.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-05-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 (May 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-cs0","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/47864","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=47864"}],"version-history":[{"count":3,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/47864\/revisions"}],"predecessor-version":[{"id":73935,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/47864\/revisions\/73935"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=47864"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=47864"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=47864"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=47864"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}