Discover some of the best new web design resources including tools, libraries, freebies, fonts, UI kits and many other goodies that we curated during August 2018.
🔥 Check out the best resources for web developers from August 2018 #web #resources Click To Tweet
1. Tools
![CodeZen - With CodeZen you can generate beautiful and customizable previews of your code snippets and share them with your friends or social media.]( https://dgc2qnsehk7ta.cloudfront.net/uploads/rfwdaug18_codezen.jpeg)
CodeZen
With CodeZen you can generate beautiful and customizable previews of your code snippets and share them with your friends or social media.
![Moceen - Moceen is an open-source app that allows you to create beautiful screenshots with device mockups.]( https://dgc2qnsehk7ta.cloudfront.net/uploads/rfwdaug18_moceen.jpeg)
Moceen
Moceen is an open-source app that allows you to create beautiful screenshots with device mockups.
2. Libraries
![Between.js - Between.js is a lightweight and highly performant ES6 tweening engine.]( https://dgc2qnsehk7ta.cloudfront.net/uploads/rfwdaug18_between.js.jpeg)
Between.js
Between.js is a lightweight and highly performant ES6 tweening engine.
![Mauerwerk - A masonry grid with enter and exit transitions for React.]( https://dgc2qnsehk7ta.cloudfront.net/uploads/rfwdaug18_mauerwerk.jpeg)
Mauerwerk
A masonry grid with enter and exit transitions for React.
![Apex Charts - A free and beautiful JavaScript charting library.]( https://dgc2qnsehk7ta.cloudfront.net/uploads/rfwdaug18_apex-charts.jpeg)
Apex Charts
A free and beautiful JavaScript charting library.
![Undux - A dead-simple state management library for React that is meant to be an alternative to Flux or Redux.]( https://dgc2qnsehk7ta.cloudfront.net/uploads/rfwdaug18_undux.jpeg)
Undux
A dead-simple state management library for React that is meant to be an alternative to Flux or Redux.
![Nano ID - A library for generating random IDs with a very small probability of an ID being duplicated.]( https://dgc2qnsehk7ta.cloudfront.net/uploads/rfwdaug18_nano-id.jpeg)
Nano ID
A library for generating random IDs with a very small probability of an ID being duplicated.
![Tiptap - A renderless rich-text editor for Vue.js based on Prosemirror that is highly extendable.]( https://dgc2qnsehk7ta.cloudfront.net/uploads/rfwdaug18_tiptap.jpeg)
Tiptap
A renderless rich-text editor for Vue.js based on Prosemirror that is highly extendable.
![Lazyestload - A lightweight (400 bytes) library that loads images only when they are in viewport.]( https://dgc2qnsehk7ta.cloudfront.net/uploads/rfwdaug18_lazyestload.jpeg)
Lazyestload
A lightweight (400 bytes) library that loads images only when they are in viewport.
![Vue Storefront - Vue Storefront is a PWA storefront powered by Vue that is ultra-fast, offline ready web app that is licensed under the MIT license.]( https://dgc2qnsehk7ta.cloudfront.net/uploads/rfwdaug18_vue-storefront.jpeg)
Vue Storefront
Vue Storefront is a PWA storefront powered by Vue that is ultra-fast, offline ready web app that is licensed under the MIT license.
![Razzle - Razzle is a tool that abstracts all the complex configuration needed for server-side rendering into a single dependency.]( https://dgc2qnsehk7ta.cloudfront.net/uploads/rfwdaug18_razzle.jpeg)
Razzle
Razzle is a tool that abstracts all the complex configuration needed for server-side rendering into a single dependency.
3. UI Kits & Templates
![Libre - A free responsive single-page template created using Tailwind perfect for any management-like projects.]( https://dgc2qnsehk7ta.cloudfront.net/uploads/rfwdaug18_libre.jpeg)
Libre
A free responsive single-page template created using Tailwind perfect for any management-like projects.
![Creation Shop - A free and beautiful UI kit designed for online stores.]( https://dgc2qnsehk7ta.cloudfront.net/uploads/rfwdaug18_creation-shop.jpeg)
Creation Shop
A free and beautiful UI kit designed for online stores.
4. Icons
![Gradient Icons - A free collection of 100 beautiful, gradient icons.]( https://dgc2qnsehk7ta.cloudfront.net/uploads/rfwdaug18_gradient-icons.jpeg)
Gradient Icons
A free collection of 100 beautiful, gradient icons.
![Capitalist Icons - A free collection of 60 food & drink icons.]( https://dgc2qnsehk7ta.cloudfront.net/uploads/rfwdaug18_capitalist-icons.jpeg)
Capitalist Icons
A free collection of 60 food & drink icons.
5. Tutorials
![Diagonal Slideshow - A beautiful slideshow with a]( https://dgc2qnsehk7ta.cloudfront.net/uploads/rfwdaug18_diagonal-slideshow.jpeg)
Diagonal Slideshow
A beautiful slideshow with a “diagonal” look and three visible slides.
![Sticky, Smooth, Active Nav - A short tutorial from Chris Coyier detailing how to create a sidebar nav that scrolls smoothly to the sections you link to, stays on the screen but doesn't overlap the header/footer or make the links in-accessible.]( https://dgc2qnsehk7ta.cloudfront.net/uploads/rfwdaug18_sticky-smooth-active-nav.jpeg)
Sticky, Smooth, Active Nav
A short tutorial from Chris Coyier detailing how to create a sidebar nav that scrolls smoothly to the sections you link to, stays on the screen but doesn’t overlap the header/footer or make the links in-accessible
![Slide Out Box Menu - A really great tutorial detailing how you can create a details menu with boxes that slide in an irregular grid with delays and beautiful transitions.]( https://dgc2qnsehk7ta.cloudfront.net/uploads/rfwdaug18_slide-out-box-menu.jpeg)
Slide Out Box Menu
A really great tutorial detailing how you can create a details menu with boxes that slide in an irregular grid with delays and beautiful transitions
![Animated SVG Neon Effect - A full-tutorial from Illustrator, to Sketch to SVG in which you learn how to create an animated, flashy SVG neon-light effect.]( https://dgc2qnsehk7ta.cloudfront.net/uploads/rfwdaug18_animated-svg-neon-effect.jpeg)
Animated SVG Neon Effect
A full-tutorial from Illustrator, to Sketch to SVG in which you learn how to create an animated, flashy SVG neon-light effect.
6. Fonts
![Space Grotesk - A free and beautiful typeface that supports the Latin Extended-A character set and several OpenType features.]( https://dgc2qnsehk7ta.cloudfront.net/uploads/rfwdaug18_space-grotesk.jpeg)
Space Grotesk
A free and beautiful typeface that supports the Latin Extended-A character set and several OpenType features.
![UStroke - A free, scribble-style font designed by Tikhon Reztcov.]( https://dgc2qnsehk7ta.cloudfront.net/uploads/rfwdaug18_ustroke.jpeg)
Ustroke
A free, scribble-style font designed by Tikhon Reztcov.
![Sanos - A free brush font designed by Krišjānis Mežulis.]( https://dgc2qnsehk7ta.cloudfront.net/uploads/rfwdaug18_sanos.jpeg)
Sanos
A free brush font designed by Krišjānis Mežulis.
![Travelers - A free grid-based, mono-width font designed by Arek Zajac.]( https://dgc2qnsehk7ta.cloudfront.net/uploads/rfwdaug18_travelers.jpeg)
Travelers
A free grid-based, mono-width font designed by Arek Zajac.
7. Great Reads
- 📄[CSS Tricks] VS Code extensions for the discerning developer palate
- 📄[Signal vs. Noise] Real Work vs. Imaginary Work
- 📄[Smashing Magazine] What Happens When You Create A Flexbox Flex Container?
- 📄[Meg Robichaud – Medium] Designing Illustrations for Small Screens
- 📄[Silo Creativo] Progressive Disclosure with CSS
What are your favorite tools or resources? Did we miss anything? If you liked this roundup make sure you share it! 😁
🔥 Check out the best resources for web developers from August 2018 #web #resources Click To Tweet
Check out the other monthly roundups for 2018:
- Resources for web designers and developers – January 2018
- Resources for web designers and developers – February 2018
- Resources for web designers and developers – March 2018
- Resources for web designers and developers – April 2018
- 30+ New resources for web developers and designers – May 2018
- 43+ Best new web design resources – June 2018
- 23+ Best new resources for web developers – July 2018
🤔 What do you think?