{"id":26726,"date":"2016-07-01T23:01:35","date_gmt":"2016-07-01T15:01:35","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=26726"},"modified":"2022-09-18T18:24:33","modified_gmt":"2022-09-18T10:24:33","slug":"designers-developers-monthly-07-2016","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-07-2016\/","title":{"rendered":"Fresh Resources for Web Designers and Developers (July 2016)"},"content":{"rendered":"<p>This installment comes with a wide variety of resources yet again. We have sources to inspire your next landing page design, two ways for coders to dim the effects of a glaring screen, a plugin for building web layouts with drag and drop, a jQuery plugin for sprucing up your date-pickers, and plenty of JavaScript libraries to help out developers.<\/p>\n<p>Also included are resources on HTTP2, typographic terminologies, building accessibility-ready sites, and a search engine for programming language syntax. Let\u2019s check them out.<\/p>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.landingfolio.com\/\">Landing Folio<\/a><\/h2>\n<p>Landing folio is a central place where you can find examples of landing page designs. There are hundreds of examples on the site, and you can finetune the list based on their category. This is definitely worth bookmarking for web designers.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-07-2016\/landingfolio.jpg\" height=\"405\" width=\"700\" alt=\"Landing Folio Homepage\"><\/figure>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/elementqueries.com\/\">Element Queries<\/a><\/h2>\n<p>A JavaScript that allows you to perform <em>Element Query<\/em>. Element query is denoted by <code>@element<\/code> and unlike, <code>@media<\/code>, <code>@element<\/code> is aware of numerous conditions beyond \u201cheight\u201d and \u201cwidth\u201d. You can, for example, apply styles based on the number of characters contained in the element.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-07-2016\/elementquery.jpg\" height=\"480\" width=\"700\" alt=\"Element Query logo and snippet in the homepage.\"><\/figure>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/kinsta.com\/learn\/what-is-http2\/\">HTTP2<\/a><\/h2>\n<p><strong>HTTP2<\/strong> is the latest specification of HTTP with significant changes. It promises for better performance and efficient data transfer. In this resource, you can find these changes (in great detail), their impact on security, speed, and user experience.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-07-2016\/http2.jpg\" height=\"480\" width=\"700\" alt=\"HTTP2 Rocket Illustration\"><\/figure>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/wordpress.org\/plugins\/elementor\/\">Elementor<\/a><\/h2>\n<p><strong>Elementor<\/strong> is a WordPress plugin that allows you to build web layouts with drag-n-drop. With Elementor, you can build a more compelling layout. It is responsive, fully customizable, and user-friendly.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-07-2016\/elementor.jpg\" height=\"480\" width=\"700\" alt=\"Elementor user interface in WordPress admin.\"><\/figure>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"http:\/\/felicegattuso.com\/\">TimeDropper<\/a><\/h2>\n<p>This plugin is equipped with a few animations that make selecting dates on the web more engaging. In addition, options are available for changing the UI appearance. It is a jQuery plugin for fancier date-pickers.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-07-2016\/timedropper.jpg\" height=\"480\" width=\"700\" alt=\"Illustration of clock mechanic and gears.\"><\/figure>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/syntaxdb.com\/\">SyntaxDB<\/a><\/h2>\n<p>A search engine to search for programming language syntax. It currently supports a number of languages, including Java, C, Ruby, JavaScript, and Python. This could be the ultimate search engine for developers as the database and language support grows.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-07-2016\/syntax-db.jpg\" height=\"480\" width=\"700\" alt=\"Syntax DB search form and search suggestion.\"><\/figure>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/cquanu.github.io\/github-dark\/\">Github Dark UI<\/a><\/h2>\n<p><strong>Github Dark UI<\/strong> is a darker color theme for Github.com. This could be a good alternative color scheme if you work in dimmed environments or have to stare at the screen for long periods of time.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-07-2016\/dark-github.jpg\" height=\"480\" width=\"700\" alt=\"Github repository page with dark color scheme.\"><\/figure>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/asvd.github.io\/microlight\/\">Microlight<\/a><\/h2>\n<p>Instead of highlighting the code with different colors, as you can see below, Microlight makes the code \u201cglow\u201d. A JavaScript library that highlights code \u2013 literally.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-07-2016\/microlightjs.jpg\" height=\"400\" width=\"700\" alt=\"A code snippet highlighted with Microlight.\"><\/figure>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/barbajs.org\/\">BarbaJS<\/a><\/h2>\n<p>BarbaJS is a JavaScript library that enables smooth page transition through JavaScript History API \/ pushState. This plugin comes with Methods, Custom Events, and a handful of APIs to deliver a smoother experience for pages on your website. <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/barbajs.org\/examples.html\">Here are some examples<\/a>.<\/p>\n<figure style=\"text-align:center\"> <img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-07-2016\/barbajs02.gif\" height=\"400\" width=\"381\" alt=\"BarbaJS logo.\"><\/figure>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.supremo.tv\/typeterms\/\">TypeTerms<\/a><\/h2>\n<p>Ever wonder what the difference between \u201cletter-spacing\u201d and \u201ckerning\u201d is? <strong>TypeTerms<\/strong> is an interactive presentation where you can learn these confusing typographic terminologies.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-07-2016\/typeterms.jpg\" height=\"365\" width=\"700\" alt=\"Illustration and annotations of typographic terms.\"><\/figure>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/github.com\/justintadlock\/butterbean\">ButterBean<\/a><\/h2>\n<p><strong>ButterBean<\/strong> is a new and sophisticated plugin <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/developer.wordpress.org\/reference\/functions\/add_meta_box\/\">to build Meta Box in WordPress<\/a>. It is developed following the modern WordPress Customizer API architecture. It makes building this particular WordPress admin UI more elegant.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-07-2016\/butterbean.jpg\" height=\"420\" width=\"700\" alt=\"ButterBean Github repository page\"><\/figure>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/wordpress.org\/plugins\/child-theme-check\/\">Child Theme Check<\/a><\/h2>\n<p>A WordPress plugin to check your Child Theme against the parent theme; it will check whether the files the Child Theme relies on are updated.<\/p>\n<p class=\"note\"><strong>Check out:<\/strong> <a href=\"https:\/\/www.hongkiat.com\/blog\/wordpress-child-themes-dev\/\">A Guide to WordPress child themes development<\/a><\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-07-2016\/child-theme-test.jpg\" height=\"380\" width=\"700\" alt=\"Child Theme Check UI in WordPress Admin.\"><\/figure>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/cloudflare.github.io\/cf-ui\/\">CloudFlare UI<\/a><\/h2>\n<p><strong>CloudFlare UI<\/strong> is a collection UI components built on top of React. Considering React\u2019s popularity is on the rise, there might be a number of similar UI frameworks out there.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-07-2016\/cfui.jpg\" height=\"380\" width=\"700\" alt=\"CloudFalre Documentation Page\"><\/figure>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/github.com\/polygonplanet\/chillout\">Chillout<\/a><\/h2>\n<p><strong>Chillout<\/strong> is a JavaScript library to help reduce CPU usage. It provides a set of functions that can be used in place of JavaScript native functions. It can be deployed on a regular website or on a Node.js-based application.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-07-2016\/chillout.jpg\" height=\"398\" width=\"700\" alt=\"Windows 10 CPU Usage chart\"><\/figure>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.bbc.co.uk\/gel\/guidelines\/typography\">GEL Typography<\/a><\/h2>\n<p><strong>GEL Typography<\/strong> is the typographic style guide of BBC. A great resource and inspiration on how you can standardize your typographic styles.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-07-2016\/bel-typography.jpg\" height=\"398\" width=\"700\" alt=\"Heading sizes in GEL Typography\"><\/figure>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/ebay.gitbooks.io\/mindpatterns\/content\/\">MIND Patterns<\/a><\/h2>\n<p>MIND Patterns is a practical guide to build an <a href=\"https:\/\/www.hongkiat.com\/blog\/accessibility-tools-for-designers\/\">accessible<\/a> e-Commerce website. It provides guides in terms of constructing HTML, using the <a href=\"https:\/\/www.hongkiat.com\/blog\/aria-web-standards\/\">ARIA<\/a> label, and composing CSS styles that are user-friendly for users with disabilities.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-07-2016\/mind-patterns.jpg\" height=\"398\" width=\"700\" alt=\"Mind Patterns Documentation\"><\/figure>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.w3schools.com\/css\/css_specificity.asp\">CSS Specificity<\/a><\/h2>\n<p>A collection of illustrations that describe how CSS Specificity works.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-07-2016\/css-specificity.jpg\" height=\"420\" width=\"700\" alt=\"Illustrations in CSS Specificity Homepage\"><\/figure>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.cssdig.com\/\">CSS Dig<\/a><\/h2>\n<p>A Chrome extension that helps you to optimize CSS. It will scrap your page and provide with the report, the list of used properties like colors.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-07-2016\/cssdig.jpg\" height=\"420\" width=\"700\" alt=\"CSS Dig table report Chrome\"><\/figure>\n<h2>Template Stash<\/h2>\n<p>A collection of hand-picked templates where you can find a wide range type of templates including HTML5, WordPress, Ghost, Bootstrap and <a href=\"https:\/\/www.hongkiat.com\/blog\/free-wordpress-ecommerce-themes\/\">e-Commerce templates<\/a>.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-07-2016\/template-stash.jpg\" height=\"420\" width=\"700\" alt=\"Template Statsh Homepage\"><\/figure>","protected":false},"excerpt":{"rendered":"<p>This installment comes with a wide variety of resources yet again. We have sources to inspire your next landing page design, two ways for coders to dim the effects of a glaring screen, a plugin for building web layouts with drag and drop, a jQuery plugin for sprucing up your date-pickers, and plenty of JavaScript&hellip;<\/p>\n","protected":false},"author":113,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[352],"tags":[2539],"topic":[4520],"class_list":["entry-content","is-maxi"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v22.8 (Yoast SEO v27.6) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Fresh Resources for Web Designers and Developers (July 2016) - Hongkiat<\/title>\n<meta name=\"description\" content=\"This installment comes with a wide variety of resources yet again. We have sources to inspire your next landing page design, two ways for coders to dim\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-07-2016\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Fresh Resources for Web Designers and Developers (July 2016)\" \/>\n<meta property=\"og:description\" content=\"This installment comes with a wide variety of resources yet again. We have sources to inspire your next landing page design, two ways for coders to dim\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-07-2016\/\" \/>\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=\"2016-07-01T15:01:35+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-09-18T10:24:33+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-07-2016\/landingfolio.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=\"7 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designers-developers-monthly-07-2016\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designers-developers-monthly-07-2016\\\/\"},\"author\":{\"name\":\"Thoriq Firdaus\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/e7948c7a175d211496331e4b6ce55807\"},\"headline\":\"Fresh Resources for Web Designers and Developers (July 2016)\",\"datePublished\":\"2016-07-01T15:01:35+00:00\",\"dateModified\":\"2022-09-18T10:24:33+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designers-developers-monthly-07-2016\\\/\"},\"wordCount\":728,\"commentCount\":3,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designers-developers-monthly-07-2016\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/designers-developers-monthly-07-2016\\\/landingfolio.jpg\",\"keywords\":[\"Tools for Designers &amp; Developers\"],\"articleSection\":[\"Web Design\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designers-developers-monthly-07-2016\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designers-developers-monthly-07-2016\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designers-developers-monthly-07-2016\\\/\",\"name\":\"Fresh Resources for Web Designers and Developers (July 2016) - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designers-developers-monthly-07-2016\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designers-developers-monthly-07-2016\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/designers-developers-monthly-07-2016\\\/landingfolio.jpg\",\"datePublished\":\"2016-07-01T15:01:35+00:00\",\"dateModified\":\"2022-09-18T10:24:33+00:00\",\"description\":\"This installment comes with a wide variety of resources yet again. We have sources to inspire your next landing page design, two ways for coders to dim\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designers-developers-monthly-07-2016\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designers-developers-monthly-07-2016\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designers-developers-monthly-07-2016\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/designers-developers-monthly-07-2016\\\/landingfolio.jpg\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/designers-developers-monthly-07-2016\\\/landingfolio.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designers-developers-monthly-07-2016\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Fresh Resources for Web Designers and Developers (July 2016)\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"name\":\"Hongkiat\",\"description\":\"Tech and Design Tips\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\",\"name\":\"Hongkiat.com\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"contentUrl\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"width\":1200,\"height\":799,\"caption\":\"Hongkiat.com\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/hongkiatcom\",\"https:\\\/\\\/x.com\\\/hongkiat\",\"https:\\\/\\\/www.pinterest.com\\\/hongkiat\\\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/e7948c7a175d211496331e4b6ce55807\",\"name\":\"Thoriq Firdaus\",\"description\":\"Thoriq is a writer for Hongkiat.com with a passion for web design and development. He is the author of Responsive Web Design by Examples, where he covered his best approaches in developing responsive websites quickly with a framework.\",\"sameAs\":[\"https:\\\/\\\/thoriq.com\",\"https:\\\/\\\/x.com\\\/tfirdaus\"],\"jobTitle\":\"Web Developer\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/author\\\/thoriq\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Fresh Resources for Web Designers and Developers (July 2016) - Hongkiat","description":"This installment comes with a wide variety of resources yet again. We have sources to inspire your next landing page design, two ways for coders to dim","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-07-2016\/","og_locale":"en_US","og_type":"article","og_title":"Fresh Resources for Web Designers and Developers (July 2016)","og_description":"This installment comes with a wide variety of resources yet again. We have sources to inspire your next landing page design, two ways for coders to dim","og_url":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-07-2016\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2016-07-01T15:01:35+00:00","article_modified_time":"2022-09-18T10:24:33+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-07-2016\/landingfolio.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":"7 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-07-2016\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-07-2016\/"},"author":{"name":"Thoriq Firdaus","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/e7948c7a175d211496331e4b6ce55807"},"headline":"Fresh Resources for Web Designers and Developers (July 2016)","datePublished":"2016-07-01T15:01:35+00:00","dateModified":"2022-09-18T10:24:33+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-07-2016\/"},"wordCount":728,"commentCount":3,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-07-2016\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-07-2016\/landingfolio.jpg","keywords":["Tools for Designers &amp; Developers"],"articleSection":["Web Design"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-07-2016\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-07-2016\/","url":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-07-2016\/","name":"Fresh Resources for Web Designers and Developers (July 2016) - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-07-2016\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-07-2016\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-07-2016\/landingfolio.jpg","datePublished":"2016-07-01T15:01:35+00:00","dateModified":"2022-09-18T10:24:33+00:00","description":"This installment comes with a wide variety of resources yet again. We have sources to inspire your next landing page design, two ways for coders to dim","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-07-2016\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-07-2016\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-07-2016\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-07-2016\/landingfolio.jpg","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-07-2016\/landingfolio.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-07-2016\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Fresh Resources for Web Designers and Developers (July 2016)"}]},{"@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-6X4","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/26726","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=26726"}],"version-history":[{"count":3,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/26726\/revisions"}],"predecessor-version":[{"id":62242,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/26726\/revisions\/62242"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=26726"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=26726"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=26726"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=26726"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}