{"id":45669,"date":"2018-10-16T23:01:04","date_gmt":"2018-10-16T15:01:04","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=45669"},"modified":"2025-04-21T17:36:07","modified_gmt":"2025-04-21T09:36:07","slug":"designers-developers-monthly-10-2018","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-10-2018\/","title":{"rendered":"Fresh Resources for Web Designers and Developers (October 2018)"},"content":{"rendered":"<p>Unlike any other industry, web development is changing by leaps and bounds. There are new tools, methods, and frameworks developed almost every day to cater to <strong>newer trends and technological advancements<\/strong> in the web industry.<\/p>\n<p>So here is a list of the latest tools and resources, including a PHP framework to easily perform <strong>E2E testing for your PHP application<\/strong>, a tool to generate colors that comply with W3C Accessibility standards, and a handful of Vue.js extensions. Let\u2019s jump in to see the full list.<\/p>\n<div class=\"ref-block ref-block--tax noLinks\" id=\"ref-block-tax-45669-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-45669-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:\/\/keyframes.app\/\">Keyframes App<\/a><\/h2>\n<p>A web-based application <strong>providing a nice GUI to compose CSS animation<\/strong> and visualize the animation with a timeline. The app also allows you to download the CSS output once you\u2019re satisfied. CSS keyframes is not the easiest spec in CSS, so having an app like this would definitely be a timesaver.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"Keyframes App\" height=\"450\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-10-2018\/keyframe-app.jpg\" width=\"720\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/github.com\/symfony\/panther\">Symfony Panther<\/a><\/h2>\n<p>\u201cSymfony Panther\u201d is an amazing PHP framework from Symfony to perform E2E (End-to-end) test. It comes with its <strong>built-in web server<\/strong> and could leverage Chrome installed in your computer to perform the E2E test.<\/p>\n<p>Moreover, it supports <strong>JavaScript executions, screenshot capture, custom Selenium driver<\/strong>, Chrome, and Firefox client. Being a standalone framework, you can include Panther in any PHP projects like, for example, WordPress, Joomla, etc.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"Symfony Panther\" height=\"450\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-10-2018\/symfony-panther.jpg\" width=\"720\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/trendypalettes.com\/\">TrendyPalettes<\/a><\/h2>\n<p>A collection of beautiful color palettes. The collection offers thousands of <strong>hand-picked color palettes<\/strong>. Users can submit a new color palette, so there\u2019s always be new palettes added ever yday. TrendyPalettes is also available as <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/chrome.google.com\/webstore\/detail\/palettes-tab\/monbbbemnbnemmglimfodaomdonmjihp?hl=en\">a Chrome extension<\/a>.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"Trendy Palettes\" height=\"450\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-10-2018\/trendypalettes.com.jpg\" width=\"720\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/zulko.github.io\/eaglejs-demo\/#\/\">Eagle.js<\/a><\/h2>\n<p>Eagle.js is a framework to create slides built on top of Vue.js so you can easily re-use custom Vue.js components within the slides. The slide also supports <strong>keyboard and mouse navigation, custom styling or theming<\/strong>, interactive widgets, and provides a boilerplate to help set up and present the slide quickly. It can be a great <strong>alternative to Reveal.js<\/strong>, especially if you\u2019re already familiar with Vue.js.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"Eagle Js\" height=\"450\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-10-2018\/eagle-js.jpg\" width=\"720\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/grapesjs.com\/\">Grape.js<\/a><\/h2>\n<p>GrapeJS is an open-source web builder that allows you to build web pages simply by <strong>dragging and dropping components<\/strong>. It provides some common components like Text, Image, Vidoe, Columns, Map, Quote, etc. You can export it into HTML and CSS and the output is amazingly neat, unlike some similar tools that I tried before. <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/grapesjs.com\/demo.html\">Check out the demo<\/a>.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"Grape Js\" height=\"450\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-10-2018\/grapejs.jpg\" width=\"720\"><\/figure>\n<hr>\n<h2>Vapid<\/h2>\n<p>Vapid is a new CMS built with Node.js with an interesting and unique approach. Most CMS, assuming you\u2019d like to include a new type of data, will require to first define the custom input in the Dashboard\/Admin area.<\/p>\n<p>With Vapid, it\u2019s the opposite as you can define the template, and Vapid will automatically generate the input in the Dashboard\/Admin area. It\u2019s available as <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.npmjs.com\/package\/vapid-cli\">an NPM package.<\/a><\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"Vapid\" height=\"450\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-10-2018\/vapid.jpg\" width=\"720\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/github.com\/abhijitrakas\/wp-cli-notification\">WP CLI Notification<\/a><\/h2>\n<p>The name says it all. It\u2019s a custom WP-CLI package to display OS notifications when WP-CLI is already done executing. Quite fancy.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"WP CLI Notification\" height=\"450\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-10-2018\/wp-cli-notification.jpg\" width=\"720\"><\/figure>\n<hr>\n<h2>CSSGr.id<\/h2>\n<p>A web-based application to compose CSS Grid. You can configure the number of items, columns, the gap between each item, as well as each item span and then generate the HTML and CSS code. CSS Grid is one of those CSS specifications that\u2019s not quite easy to understand. But this tool makes it so much easier to deal with it.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"CSS Grid\" height=\"450\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-10-2018\/cssgrid.jpg\" width=\"720\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/appleple.github.io\/scroll-hint\/\">Scroll Hint<\/a><\/h2>\n<p>ScrollHint is a JavaScript library that allows you to create an element over the top to show that a section on your webpage is scrollable. This is particularly useful if you have a horizontal scroll element on your web page as most people are not naturally scroll left to right (or vice versa) when consuming the web.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"Scroll Hint\" height=\"450\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-10-2018\/scroll-hint.jpg\" width=\"720\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/pristine.js.org\/\">PristineJS<\/a><\/h2>\n<p>A JavaScript library to add validation to an input. HTML5 comes with some type validation already with the \u201ctype=email\u201d, and \u201ctype=number\u201d for example. But if you need a <strong>custom validator that\u2019s not implemented in HTML5<\/strong>, this JavaScript library will come in handy.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"Pristine Js\" height=\"450\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-10-2018\/pristinejs.jpg\" width=\"720\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/gist.github.com\/simonwep\/b0c25725a4715c1c5aab501d6a782a71\">SelectionJS<\/a><\/h2>\n<p>Most people probably already familiar on how to select multiple folders or files in their computer; they\u2019ll typically hold their mouse-click and drag it around the files or folders they\u2019d like to select. If you want to apply the same UX on your website, SelectionJS will come in handy.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"Selection Js\" height=\"450\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-10-2018\/selectionjs.jpg\" width=\"720\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/webdash.xyz\/\">Webdash<\/a><\/h2>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"Webdash\" height=\"450\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-10-2018\/webdash.jpg\" width=\"720\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/canjs.com\/\">CanJS<\/a><\/h2>\n<p>A JavaScript framework to build web interface. It\u2019s similar to <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/reactjs.org\/\">React.js<\/a> with some additional features and comes with the <strong>router, DOM Utilities, and AJAX function right out of the box<\/strong>. It also has a quite active community support provides some extensions.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"Can Js\" height=\"450\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-10-2018\/canjs.jpg\" width=\"720\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/cheerio.js.org\/\">CheerioJS<\/a><\/h2>\n<p>A JavaScript library that implements jQuery Core specification for <a href=\"https:\/\/www.hongkiat.com\/blog\/understanding-document-object-model\/\">DOM (Document Object Model)<\/a> and is designed to be used on the server-side. If you\u2019re <strong>working with Node.js while also enjoy jQuery syntax<\/strong> like <code>addClass()<\/code>, <code>attr()<\/code>, and <code>find()<\/code>, this is the JavaScript you\u2019re looking for.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"Cheerio Js\" height=\"450\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-10-2018\/cheerio.jpg\" width=\"720\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.colorbox.io\/\">Colorbox<\/a><\/h2>\n<p>Colorbox is <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.lyft.com\/\">Lyft<\/a> initiative to generate a color composition that complies with <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/webaim.org\/resources\/contrastchecker\/\">the color Accessiblity standard<\/a>. The tool is powered with a clever algorithm that allows you to simply <strong>move around the knob, change the configuration<\/strong>, and it will generate the proper colors for you. It\u2019s just amazing.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"Colorbox\" height=\"450\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-10-2018\/colorbox.jpg\" width=\"720\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/wiki.php.net\/rfc\/typed_properties_v2\">Typed Properties in PHP 7.4<\/a><\/h2>\n<p>PHP7.3 is just around the corner, as we\u2019ve mentioned in the previous installment. But PHP7.4 is already on the Plan. One of the plans is Typed Property. This means you will soon be able to <strong>write something like <code>public int ;<\/code> in your PHP class<\/strong>. It\u2019s a huge change that could considerably help to reduce your PHP application bugs.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"Typed Properties in PHP 7.4\" height=\"450\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-10-2018\/php-typed-properties.jpg\" width=\"720\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/stenciljs.com\/\">Stencil<\/a><\/h2>\n<p>A JavaScript compiler that makes it easy to create Web Components with the latest standard. On top of it, StencilJS is also adding some modern web development approach into the mix including <strong>JSX support, reactivity, router, and State Management<\/strong> using a plugin.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"Stencil\" height=\"450\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-10-2018\/stencil.jpg\" width=\"720\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/github.com\/PeachScript\/vue-infinite-loading\">Vue Infinite Loading<\/a><\/h2>\n<p>A Vue extension to create an infinite scroll page. It\u2019s mobile-friendly and <strong>compatible with any scrollable element<\/strong>. It also supports two scroll direction, and best of all, it saves a lot of time.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"Vue Infinite Loading\" height=\"450\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-10-2018\/vue-infinite-loading.jpg\" width=\"720\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/github.com\/euvl\/v-clipboard\">V Clipboard<\/a><\/h2>\n<p>A custom Vue.js extension that makes it so <strong>easy to create a \u201cCopy\u201d button<\/strong>. You can simply add a <code>v-clipboard<\/code> attribute to a button and you\u2019re all set. This Vue.js extension works for every modern browser as well as IE11 and the latest.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"V Clipboard\" height=\"450\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-10-2018\/v-clipboard.jpg\" width=\"720\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/sagalbot.github.io\/vue-select\/\">Vue Select<\/a><\/h2>\n<p>A Vue.js component that provides similar functionality to <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/select2.org\/\">Select2<\/a>. It is designed for Vue.js that it allows to be <strong>compatible with <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/vuex.vuejs.org\/\">Vuex<\/a>, Custom Templating<\/strong>, and a <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/vuejs.org\/v2\/guide\/#What-is-Vue-js\">bunch of other Vue.js goodness<\/a>.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"Vue Select\" height=\"450\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-10-2018\/vue-select.jpg\" width=\"720\"><\/figure>\n<hr>","protected":false},"excerpt":{"rendered":"<p>A list of latest tools, CMS, libraries, and extensions of the web development industry.<\/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,510,511],"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.6) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Fresh Resources for Web Designers and Developers (October 2018) - Hongkiat<\/title>\n<meta name=\"description\" content=\"A list of latest tools, CMS, libraries, and extensions of the web development industry.\" \/>\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-10-2018\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Fresh Resources for Web Designers and Developers (October 2018)\" \/>\n<meta property=\"og:description\" content=\"A list of latest tools, CMS, libraries, and extensions of the web development industry.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-10-2018\/\" \/>\n<meta property=\"og:site_name\" content=\"Hongkiat\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/hongkiatcom\" \/>\n<meta property=\"article:published_time\" content=\"2018-10-16T15:01:04+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-04-21T09:36:07+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-10-2018\/keyframe-app.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-10-2018\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designers-developers-monthly-10-2018\\\/\"},\"author\":{\"name\":\"Thoriq Firdaus\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/e7948c7a175d211496331e4b6ce55807\"},\"headline\":\"Fresh Resources for Web Designers and Developers (October 2018)\",\"datePublished\":\"2018-10-16T15:01:04+00:00\",\"dateModified\":\"2025-04-21T09:36:07+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designers-developers-monthly-10-2018\\\/\"},\"wordCount\":1104,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designers-developers-monthly-10-2018\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/designers-developers-monthly-10-2018\\\/keyframe-app.jpg\",\"keywords\":[\"Tools for Designers &amp; Developers\",\"Web Designers\",\"Web Developers\"],\"articleSection\":[\"Web Design\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designers-developers-monthly-10-2018\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designers-developers-monthly-10-2018\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designers-developers-monthly-10-2018\\\/\",\"name\":\"Fresh Resources for Web Designers and Developers (October 2018) - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designers-developers-monthly-10-2018\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designers-developers-monthly-10-2018\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/designers-developers-monthly-10-2018\\\/keyframe-app.jpg\",\"datePublished\":\"2018-10-16T15:01:04+00:00\",\"dateModified\":\"2025-04-21T09:36:07+00:00\",\"description\":\"A list of latest tools, CMS, libraries, and extensions of the web development industry.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designers-developers-monthly-10-2018\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designers-developers-monthly-10-2018\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designers-developers-monthly-10-2018\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/designers-developers-monthly-10-2018\\\/keyframe-app.jpg\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/designers-developers-monthly-10-2018\\\/keyframe-app.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designers-developers-monthly-10-2018\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Fresh Resources for Web Designers and Developers (October 2018)\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"name\":\"Hongkiat\",\"description\":\"Tech and Design Tips\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\",\"name\":\"Hongkiat.com\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"contentUrl\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"width\":1200,\"height\":799,\"caption\":\"Hongkiat.com\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/hongkiatcom\",\"https:\\\/\\\/x.com\\\/hongkiat\",\"https:\\\/\\\/www.pinterest.com\\\/hongkiat\\\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/e7948c7a175d211496331e4b6ce55807\",\"name\":\"Thoriq Firdaus\",\"description\":\"Thoriq is a writer for Hongkiat.com with a passion for web design and development. He is the author of Responsive Web Design by Examples, where he covered his best approaches in developing responsive websites quickly with a framework.\",\"sameAs\":[\"https:\\\/\\\/thoriq.com\",\"https:\\\/\\\/x.com\\\/tfirdaus\"],\"jobTitle\":\"Web Developer\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/author\\\/thoriq\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Fresh Resources for Web Designers and Developers (October 2018) - Hongkiat","description":"A list of latest tools, CMS, libraries, and extensions of the web development industry.","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-10-2018\/","og_locale":"en_US","og_type":"article","og_title":"Fresh Resources for Web Designers and Developers (October 2018)","og_description":"A list of latest tools, CMS, libraries, and extensions of the web development industry.","og_url":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-10-2018\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2018-10-16T15:01:04+00:00","article_modified_time":"2025-04-21T09:36:07+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-10-2018\/keyframe-app.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-10-2018\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-10-2018\/"},"author":{"name":"Thoriq Firdaus","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/e7948c7a175d211496331e4b6ce55807"},"headline":"Fresh Resources for Web Designers and Developers (October 2018)","datePublished":"2018-10-16T15:01:04+00:00","dateModified":"2025-04-21T09:36:07+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-10-2018\/"},"wordCount":1104,"commentCount":0,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-10-2018\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-10-2018\/keyframe-app.jpg","keywords":["Tools for Designers &amp; Developers","Web Designers","Web Developers"],"articleSection":["Web Design"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-10-2018\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-10-2018\/","url":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-10-2018\/","name":"Fresh Resources for Web Designers and Developers (October 2018) - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-10-2018\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-10-2018\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-10-2018\/keyframe-app.jpg","datePublished":"2018-10-16T15:01:04+00:00","dateModified":"2025-04-21T09:36:07+00:00","description":"A list of latest tools, CMS, libraries, and extensions of the web development industry.","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-10-2018\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-10-2018\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-10-2018\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-10-2018\/keyframe-app.jpg","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-10-2018\/keyframe-app.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-10-2018\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Fresh Resources for Web Designers and Developers (October 2018)"}]},{"@type":"WebSite","@id":"https:\/\/www.hongkiat.com\/blog\/#website","url":"https:\/\/www.hongkiat.com\/blog\/","name":"Hongkiat","description":"Tech and Design Tips","publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.hongkiat.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.hongkiat.com\/blog\/#organization","name":"Hongkiat.com","url":"https:\/\/www.hongkiat.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","contentUrl":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","width":1200,"height":799,"caption":"Hongkiat.com"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/hongkiatcom","https:\/\/x.com\/hongkiat","https:\/\/www.pinterest.com\/hongkiat\/"]},{"@type":"Person","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/e7948c7a175d211496331e4b6ce55807","name":"Thoriq Firdaus","description":"Thoriq is a writer for Hongkiat.com with a passion for web design and development. He is the author of Responsive Web Design by Examples, where he covered his best approaches in developing responsive websites quickly with a framework.","sameAs":["https:\/\/thoriq.com","https:\/\/x.com\/tfirdaus"],"jobTitle":"Web Developer","url":"https:\/\/www.hongkiat.com\/blog\/author\/thoriq\/"}]}},"jetpack_featured_media_url":"https:\/\/","jetpack_shortlink":"https:\/\/wp.me\/p4uxU-bSB","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/45669","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=45669"}],"version-history":[{"count":3,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/45669\/revisions"}],"predecessor-version":[{"id":73813,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/45669\/revisions\/73813"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=45669"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=45669"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=45669"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=45669"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}