{"id":26548,"date":"2016-06-02T21:01:37","date_gmt":"2016-06-02T13:01:37","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=26548"},"modified":"2025-04-21T18:21:44","modified_gmt":"2025-04-21T10:21:44","slug":"designers-developers-monthly-06-2016","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-06-2016\/","title":{"rendered":"Fresh Resources for Web Designers and Developers (June 2016)"},"content":{"rendered":"<p>As we move through 2016, 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-26548-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-26548-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:\/\/certbot.eff.org\/\">CertBot<\/a><\/h2>\n<p><strong>CertBot<\/strong> provides a more handy way to deploy certificates from <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/letsencrypt.org\/\">Let\u2019s Encrypt<\/a>. It provides a set of command lines with support for numerous server configuration like <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.apache.org\/\">Apache<\/a>, <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.nginx.com\/\">NGINX<\/a>, and Plesk. Speaking of which, Let\u2019s Encrypt is a communal effort to make the Web more secure by providing a free SSL Certificate. It is currently used in more than 3 million websites.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"CertBot Robot Mascot\" height=\"450\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-06-2016\/certbot.jpg\" width=\"700\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/madmalik.github.io\/mononoki\/\">Mononoki<\/a><\/h2>\n<p><strong>Mononoki<\/strong> is a font designed specifically for displaying code. Mononoki is available as an installable desktop font (<code>.ttf<\/code>) and web font (<code>.eot<\/code>, and <code>.woff<\/code>). It is a fresh alternative to classic <em>monotypes<\/em> like Monaco, Menlo and Courier.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"Mononoki Typeface\" height=\"450\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-06-2016\/mononoki.jpg\" width=\"700\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.github.com\/rishabhp\/bideo.js\">BideoJS<\/a><\/h2>\n<p>Showing a full-page autoplay video on the homepage seems to be a rising trend. <strong>BideoJS<\/strong> is a JavaScript library that allows you to do exactly that with fewer hurdles. It is lightweight, responsive, and can be configured to fit your needs.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"BideoJS Homepage\" height=\"450\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-06-2016\/bideo.jpg\" width=\"700\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.csspurge.com\/\">CSS Purge<\/a><\/h2>\n<p><strong>CSS Purge<\/strong> is a collection of references, articles, and statistics for CSS. A piece of resourceful information like this can help you make well-informed decisions about which CSS methodologies, tools, and frameworks you would like to adopt in your project.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"CSS Purge Homepage\" height=\"450\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-06-2016\/csspurge.jpg\" width=\"700\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.github.com\/eladnava\/mailgen\">Mailgen<\/a><\/h2>\n<p><strong>Mailgen<\/strong> is a Node module to generate a nice, simple  responsive HTML email. A handful of options is provided, allowing you to customize almost every area of the email. You can set the email \u201ctheme\u201d, the email header, and the \u201cCall-to-action\u201d button. It can also be integrated into your Node-based desktop or web application.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"Mailgen Examples\" height=\"450\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-06-2016\/mailgen.jpg\" width=\"700\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.decosoftware.com\/\">Deco<\/a><\/h2>\n<p><strong>Deco<\/strong> is an IDE to build a mobile app using the Facebook initiative <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/facebook.github.io\/react-native\/\">React Native<\/a>. Think of Deco like XCode or Visual Studio, where you can build an app with a user-friendly UI using drag-and-drop, sliders, and color pickers.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"Deco App Interface\" height=\"450\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-06-2016\/deco.jpg\" width=\"700\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.github.com\/israelidanny\/ie8linter\">IE8 Linter<\/a><\/h2>\n<p>Internet Explorer 8 (IE8)  is an antique browser that does not support modern Web technologies like CSS3 Animations, Transforms, Transitions, and most HTML5 elements without a <em>polyfill<\/em>. DRY principle is a tool that we can use to scan websites for IE8 compatibility. It provides the report and solutions.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"IE8 Linter Error Reports\" height=\"450\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-06-2016\/ie8linter.jpg\" width=\"700\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.github.com\/sindresorhus\/caprine\">Caprine<\/a><\/h2>\n<p><strong>Caprine<\/strong> is an  unofficial  Facebook Messenger desktop app. It is built on top of Node.js and Electron which allows it to be a cross-platform application; it is available in OS X, Windows, and Linux. In also comes in two colors, Dark and Light.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"Caprine Dark Interface\" height=\"450\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-06-2016\/caprine.jpg\" width=\"700\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"http:\/\/photonkit.com\/\">Photon Kit<\/a><\/h2>\n<p><strong>Photon Kit<\/strong> is a framework to start off a new app with Electron. Much like Bootstrap, Foundation and the likes, Photon comes with a number Components that allows you to build common UI elements in an app like the buttons, toolbar and sidebar.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"Photon App UI\" height=\"450\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-06-2016\/photon.jpg\" width=\"700\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.github.com\/yeoman\/yeoman-app\">Yeoman App<\/a><\/h2>\n<p><strong>Yeoman App<\/strong> is a desktop application that generates project boilerplates, framework, and scaffolds from Yeoman. It is a good alternative for those who are not comfortable working through Terminal and command lines.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"Yeoman App UI\" height=\"450\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-06-2016\/yeoman-app.jpg\" width=\"700\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/sqlectron.github.io\/\">SQLectron<\/a><\/h2>\n<p><strong>SQLectron<\/strong> is an SQL desktop client that lets you view and perform several SQL operations more conveniently. It supports MySQL, PostgreSQL, and Microsoft SQL Server. SQLectron is available for OS X, Windows and Linux.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"SQLectron GUI App\" height=\"450\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-06-2016\/sqlectron.jpg\" width=\"700\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/lukyvj.github.io\/family.scss\/\">Family SCSS<\/a><\/h2>\n<p><strong>FamilySCSS<\/strong> is a collection of mixins that makes selecting elements with <code>:nth-child<\/code> more intuitive. The mixins are declarative. For instance, you can write <code>@include first(3)<\/code> to select the first three child elements and write <code>@include between(2, 4)<\/code> to select the 2nd to the 4th child elements.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"Family SCSS Logo\" height=\"450\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-06-2016\/familyscss.jpg\" width=\"700\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/easyengine.io\/\">EasyEngine<\/a><\/h2>\n<p>EasyEngine is a collection of command lines that allow you to configure your WordPress with tools and modules such as Redis, Caching plugin, and PageSpeed. It makes setting up a WordPress server for speed a breeze.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"EasyEngine Setup\" height=\"450\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-06-2016\/easy-engine.jpg\" width=\"700\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/phinx.org\/\">Phinx<\/a><\/h2>\n<p><strong>Phinx<\/strong> is a PHP module for database management and migration. It comes with Classes and Command Lines that allow you to run almost any database operation such as Writing, Downloading and Uploading. <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/book.cakephp.org\/phinx\/0\/en\/index.html\">Phinx Docs<\/a> is a resourceful reference to help you get started.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"Phinx Homepage\" height=\"450\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-06-2016\/phinx.jpg\" width=\"700\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.github.com\/RichCSS\">RichCSS<\/a><\/h2>\n<p><strong>RichCSS<\/strong> is a CSS framework that provides a sane structure. The framework neatly organizes folders, directories and classes in a pro-DRY  way that allows it to be reusable. On top of buttons, lists and forms, RichCSS also comes with its own CLI that you can use to start off a new Rich project like <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/bower.io\/docs\/creating-packages\/#bowerjson\">Bower<\/a>, Git, and NPM.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"RichCSS Homepage\" height=\"450\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-06-2016\/richcss.jpg\" width=\"700\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.github.com\/frend\/frend.co\">Frend<\/a><\/h2>\n<p><strong>Frend<\/strong> is a collection of common web components. The collection currently consists of Accordion, Dialog Modal, Offcanvas, Tooltip, Tabs, with a few more to come in the next release. Frend could be a good alternative to jQuery UI.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"Frend Accordion UI\" height=\"450\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-06-2016\/frend.jpg\" width=\"700\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/progressivered.com\/fla\/\">FLA<\/a><\/h2>\n<p>This is a comprehensive framework to build a responsive grid layout with Flexbox.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"FLA Syntax Example\" height=\"450\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-06-2016\/fla.jpg\" width=\"700\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/phptherightway.com\/\">PHP The Right Way<\/a><\/h2>\n<p>PHP is a programming language that is easy to learn, but you could also easily go wrong with the codes and this might eventually compromise your website security and performance. <strong>PHP the Right Way<\/strong> is an extensive reference to learn the best practices in PHP.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"PHP The Right Way Homepage\" height=\"450\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-06-2016\/phptherightway.jpg\" width=\"700\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/lunarlogic.github.io\/starability\/\">Starability<\/a><\/h2>\n<p><strong>Starability<\/strong> is a CSS library to build a star rating system with fancy animated feedback. The star rating is built with accessibility in mind; you can navigate through and assign stars via keyboard.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"Starability Ratings\" height=\"450\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-06-2016\/starability.jpg\" width=\"700\"><\/figure>\n<hr>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/waitanimate.wstone.uk\/\">WaitAnimate<\/a><\/h2>\n<p><strong>WaitAnimate<\/strong> is a handy web tool to calculate a \u201cpause\u201d timing in a single CSS animation <code>@keyframe<\/code>. The \u201cpause\u201d, when done right, could turn the animation more engaging \u2014 <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/waitanimate.wstone.uk\/\">here are  some examples<\/a>.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"WaitAnimate Homepage\" height=\"450\" src=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-06-2016\/wait-animate.jpg\" width=\"700\"><\/figure>\n<hr>","protected":false},"excerpt":{"rendered":"<p>As we move through 2016, 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":[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 (June 2016) - Hongkiat<\/title>\n<meta name=\"description\" content=\"As we move through 2016, 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-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 (June 2016)\" \/>\n<meta property=\"og:description\" content=\"As we move through 2016, 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-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-06-02T13:01:37+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-04-21T10:21:44+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-06-2016\/certbot.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-2016\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designers-developers-monthly-06-2016\\\/\"},\"author\":{\"name\":\"Thoriq Firdaus\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/e7948c7a175d211496331e4b6ce55807\"},\"headline\":\"Fresh Resources for Web Designers and Developers (June 2016)\",\"datePublished\":\"2016-06-02T13:01:37+00:00\",\"dateModified\":\"2025-04-21T10:21:44+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designers-developers-monthly-06-2016\\\/\"},\"wordCount\":959,\"commentCount\":6,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designers-developers-monthly-06-2016\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/designers-developers-monthly-06-2016\\\/certbot.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-2016\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designers-developers-monthly-06-2016\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designers-developers-monthly-06-2016\\\/\",\"name\":\"Fresh Resources for Web Designers and Developers (June 2016) - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designers-developers-monthly-06-2016\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designers-developers-monthly-06-2016\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/designers-developers-monthly-06-2016\\\/certbot.jpg\",\"datePublished\":\"2016-06-02T13:01:37+00:00\",\"dateModified\":\"2025-04-21T10:21:44+00:00\",\"description\":\"As we move through 2016, 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-2016\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designers-developers-monthly-06-2016\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designers-developers-monthly-06-2016\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/designers-developers-monthly-06-2016\\\/certbot.jpg\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/designers-developers-monthly-06-2016\\\/certbot.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designers-developers-monthly-06-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 (June 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 (June 2016) - Hongkiat","description":"As we move through 2016, 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-2016\/","og_locale":"en_US","og_type":"article","og_title":"Fresh Resources for Web Designers and Developers (June 2016)","og_description":"As we move through 2016, 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-2016\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2016-06-02T13:01:37+00:00","article_modified_time":"2025-04-21T10:21:44+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-06-2016\/certbot.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-2016\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-06-2016\/"},"author":{"name":"Thoriq Firdaus","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/e7948c7a175d211496331e4b6ce55807"},"headline":"Fresh Resources for Web Designers and Developers (June 2016)","datePublished":"2016-06-02T13:01:37+00:00","dateModified":"2025-04-21T10:21:44+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-06-2016\/"},"wordCount":959,"commentCount":6,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-06-2016\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-06-2016\/certbot.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-2016\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-06-2016\/","url":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-06-2016\/","name":"Fresh Resources for Web Designers and Developers (June 2016) - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-06-2016\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-06-2016\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-06-2016\/certbot.jpg","datePublished":"2016-06-02T13:01:37+00:00","dateModified":"2025-04-21T10:21:44+00:00","description":"As we move through 2016, 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-2016\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-06-2016\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-06-2016\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-06-2016\/certbot.jpg","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/designers-developers-monthly-06-2016\/certbot.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/designers-developers-monthly-06-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 (June 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-6Uc","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/26548","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=26548"}],"version-history":[{"count":4,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/26548\/revisions"}],"predecessor-version":[{"id":73917,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/26548\/revisions\/73917"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=26548"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=26548"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=26548"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=26548"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}