{"id":1406,"date":"2017-09-05T08:52:50","date_gmt":"2017-09-05T00:52:50","guid":{"rendered":"https:\/\/www.strongd.net\/?p=1406"},"modified":"2017-09-05T08:52:50","modified_gmt":"2017-09-05T00:52:50","slug":"15-interesting-javascript-and-css-libraries-for-august-2017","status":"publish","type":"post","link":"https:\/\/www.strongd.net\/?p=1406","title":{"rendered":"15 Interesting JavaScript and CSS Libraries for August 2017"},"content":{"rendered":"

\"https:\/\/tutorialzine.com\/\/media\/2017\/08\/interesting-libraries-august-2017.png\"<\/p>\n

Our mission at Tutorialzine is to keep you up to date with the latest and coolest trends in web development. That\u2019s why every month we release a handpicked collection of some of the best resources that we\u2019ve stumbled upon and deemed worthy of your attention.<\/p>\n

\n

\"titanic.gif\"<\/a><\/p>\n

Titanic<\/a><\/h2>\n

A set of beautiful SVG icons with very detailed on-hover animations. Unlike most other web icon fonts, this one is actually JavaScript-powered and requires the\u00a0bodymovin<\/a>\u00a0library for exporting After Effects animations to SVG format.<\/p>\n

\n

\"rebass.jpg\"<\/a><\/p>\n

Rebass<\/a><\/h2>\n

Rebass is a React UI kit for building responsive web apps. It is made up of over 60 styled-components which are customizable via\u00a0styled-system<\/a>-based properties. This keeps styles isolated and reduces the need to write custom CSS.<\/p>\n

\n

\"bootstrap-4.jpg\"<\/a><\/p>\n

Bootstrap 4 (Beta)<\/a><\/h2>\n

Bootstrap 4 is now officially in Beta! The new version of the framework brings forth a lot of great changes, including a flexbox-based grid system, new and restyled components, faster ES6 JavaScript plugins, improved documentation, and much more.<\/p>\n

\n

\"hover-buttons.jpg\"<\/a><\/p>\n

Hover Buttons<\/a><\/h2>\n

A cool set of HTML buttons with animated on-hover effects. The buttons come in all shapes and sizes and there are a lot of great animations to choose from. The library is made with SCSS so you can easily remove the buttons you don’t need or change the styles to your liking.<\/p>\n

\n

\"react-simple-maps.jpg\"<\/a><\/p>\n

React Simple Maps<\/a><\/h2>\n

React components library for creating maps made out of SVG. There are components for adding all kinds of map details like text annotations, markers, and custom colors for each region. Since the maps are SVG based they can be zoomed in and out with great efficiency.<\/p>\n

\n

\"gpu.jpg\"<\/a><\/p>\n

Gpu.js<\/a><\/h2>\n

Library for running browser JavaScript code in the GPU. It allows you to execute complex calculations much quicker by compiling specially written JS into shader language that can run on the GPU via WebGL. If WebGL isn’t available the functions fallback to regular JavaScript.<\/p>\n

\n

\"pell-.jpg\"<\/a><\/p>\n

Pell<\/a><\/h2>\n

Pell is a super lightweight WYSIWYG text editor for the web. It weights only 1kB, has absolutely no dependencies, and is made up of less than 200 lines of ES6 code. It supports all the needed actions for formatting markdown text, including inserting images and links.<\/p>\n

\n

\"chromeless.png\"<\/a><\/p>\n

Chromeless<\/a><\/h2>\n

Web automation framework based on the\u00a0Headless Chrome<\/a>\u00a0platform. Its API and features are very similar to those of other popular tools like\u00a0PhantomJS<\/a>\u00a0and\u00a0NightmareJS<\/a>, with the main difference that it runs all test in Chrome’s headless-mode. Work locally or on AWS Lambda.<\/p>\n

\n

\"fitty.png\"<\/a><\/p>\n

Fitty<\/a><\/h2>\n

Fitty is a vanilla JavaScript library that changes the font size of text to make it fit into a fixed-width container. It works with all standard web fonts, scaling their size up or down so that they optimally take the available space without line breaks – perfect for titles and other headings.<\/p>\n

\n

\"notifme.jpg\"<\/a><\/p>\n

Notif.me<\/a><\/h2>\n

A Node.js library for sending notifications. It works as an all-in-one solution for handling emails, SMS, and push notifications. Each service has multiple providers you can choose from (e.g. SMPT or Sendmail for email, Neximo or Twilio for SMS).<\/p>\n

\n

\"shoelace.png\"<\/a><\/p>\n

Shoelace<\/a><\/h2>\n

Shoelace is a super lightweight CSS starter kit that aims to provide a tinier alternative to frameworks like Bootstrap. It doesn’t have too many styles and features, just a solid CSS reset with some helpful UI components. The library’s code is built with CSS variables, making it easy to customize without the need of a preprocessor.<\/p>\n

\n

\"tenserflow.jpg\"<\/a><\/p>\n

TensorFire<\/a><\/h2>\n

Framework for running neural networks in the browser. TensorFire is GPU-accelerated via WebGL, which makes it possible to run bigger machine learning models without a problem. The project is still in its early stages but there are already some very promising demos made with it (Gesture Detection Rock Paper Scissors<\/a>).<\/p>\n

\n

\"vali.jpg\"<\/a><\/p>\n

Vali<\/a><\/h2>\n

Admin dashboard template built with Bootstrap, PugJS, Sass, and other modern technologies. Because the project is created with easy customization in mind, all the styles are organized into many independent SASS modules. The template offers many components and widgets, you can check them out in this\u00a0demo<\/a>.<\/p>\n

\n

\"botui.jpg\"<\/a><\/p>\n

BotUI<\/a><\/h2>\n

A JavaScript framework for building conversational bot interfaces. It has a super simple API that lets you configure the flow of conversations by adding messages, questions, and even form inputs fields for the user to fill in.<\/p>\n

If you want to learn more about interactive conversational UI, check out our article\u00a0Developer’s Introduction To Chatbots<\/a>.<\/p>\n

\n

\"nanoid.png\"<\/a><\/p>\n

Nano ID<\/a><\/h2>\n

Tiny JavaScript library for generating unique IDs. It uses only URL-friendly symbols for the generated strings but there is an option to provide your own alphabet. On the project’s\u00a0GitHub page<\/a>\u00a0you can find some interesting info about the way the library works and the algorithms it uses.<\/p>\n","protected":false},"excerpt":{"rendered":"

Our mission at Tutorialzine is to keep you up to date with the latest and coolest trends in web development. That\u2019s why every month we release a handpicked collection of some of the best resources that we\u2019ve stumbled upon and deemed worthy of your attention. Titanic A set of beautiful SVG icons with very detailed … Continue reading 15 Interesting JavaScript and CSS Libraries for August 2017<\/span><\/a><\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[31],"tags":[218,217],"class_list":["post-1406","post","type-post","status-publish","format-standard","hentry","category-javascript","tag-css","tag-javascript"],"_links":{"self":[{"href":"https:\/\/www.strongd.net\/index.php?rest_route=\/wp\/v2\/posts\/1406","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.strongd.net\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.strongd.net\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.strongd.net\/index.php?rest_route=\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.strongd.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1406"}],"version-history":[{"count":1,"href":"https:\/\/www.strongd.net\/index.php?rest_route=\/wp\/v2\/posts\/1406\/revisions"}],"predecessor-version":[{"id":1407,"href":"https:\/\/www.strongd.net\/index.php?rest_route=\/wp\/v2\/posts\/1406\/revisions\/1407"}],"wp:attachment":[{"href":"https:\/\/www.strongd.net\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1406"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.strongd.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1406"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.strongd.net\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1406"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}