Collective #77
Inspirational Website of the Week
Abby Putinski's website is our pick this week. It is beautifully designed and it let's you explore San Francisco through the eyes of an illustrator.
Get inspiredIntroducing Jelly Navigation Menu: When Canvas Meets PaperJS
See how to apply PaperJS for canvas graphics and TweenJS for animations to create this great jelly-like navigation menu.
Check it outRandom User Generator
Need an "ipsum" user? This great API will provide you with a randomly generated user that can be used as a placeholder in web mockups. Designed by Arron Hunt and developed by Keith Armstrong.
Check it outBrick
Brick by Mozilla is a bundle of reusable UI components created with x-tags to enable rapid development of cross-browser and mobile-friendly HTML5 web applications.
Check it outMedium.js
Inspired by Medium's beautiful content editor, Medium.js keeps HTML code within contenteditable semantic, simple, and clean. Made by Jacob Kelley.
Check it outSlide-Out Footer
Martin Angelov shows how to use a smart CSS trick for creating a nice slide-out effect for a footer.
Check it outGhostlab: Synchronized testing for web and mobile
Ghostlab is a powerful testing tool for web and mobile apps.
Check it outBabbit
A fun and beautifully designed browser game by Hover Studio.
Check it outWeb Performance Crash Course
Ilya Grigorik's crash course on web performance optimization will teach you everything from network bottlenecks to JavaScript performance.
Watch itSingle element CSS-only camera
This amazing camera was created by styling the body element only!
Check it outjQuery Flat Shadow
This jQuery plugin by Pete R. will automatically cast a shadow on elements, creating the trendy long flat shadow look.
Check it outHTML5 Device mockups
With Pixelsign you can create live HTML5 mockups of popular devices to showcase your work.
Check it outFree Font: Braxton
Braxton is an elegant script font designed by Evgeny Tkhorzhevsky.
Get itFree Icon Set (Ai, EPS, PDF, PNG)
A fantastic free set of pixel-perfect icons in the formats Ai, EPS, PDF and PNG.
Get itPineapple.io
Pineapple.io is a central hub of tutorials, tools and assets for developers and designers.
Check it outSVG and <image> tag tricks
Alexey Ten shows this smart trick for graceful degradation of SVG images for older browsers using the <image> tag.
Tipue Search
Tipue Search is an interesting site search engine jQuery plugin. It doesn't need MySQL, PHP, Perl or Python.
Check it outClank
Clank is an open source HTML/CSS prototyping framework for mobile apps. Think of it as Twitter Bootstrap but for prototyping native apps.
Check it outMap Icons
Map Icons by Scott de Jonge is an icon font for use with Google Maps API and Google Places API using SVG markers and icon labels.
Get itFlat UI Kit (PSD)
The Flat UI Kit by Jan Dvořák is a collection of clean, resizable web components, all wrapped up in a well organized PSD file.
Get itKoding
Koding is an online development environment where developers can program and collaborate online in the browser without having to download the software development kits. The platform supports many popular programming languages, like Python, Java, Perl, Node.js, Ruby, C, C++ and Go.
Check it outFancySelect
FancySelect by Octopus Creative transforms a <select> element into a stylish UI component.
Nutcache
Nutcache is a free multilingual online application for invoicing and time management.
Check it outWebflow
Webflow is a visual website editor for responsive designs. It has a great interface and it generates clean production-ready code.
Check it outExtractCSS
With extractCSS you can get a generated CSS file from IDs, classes and inline styles of a HTML file.
Check it out