WebAppers

/ best free open source web resources /

Shopify

How to Do Parallax Properly with Great Performance

Posted · Category: Information

Parallax has become, for better or worse, an increasingly popular web trend. The problem is, a vast majority of sites using parallax suffer from terrible scroll performance. It’s especially bad on devices with high pixel density like retina MacBook Pro’s.

Dave Gamache has published an article: Parallax Done Right. He played quite a bit with parallax sites and has come up with a non-comprehensive list of Do’s and Don’ts that will hopefully keep you on track to get killer performance.

parallax-demo

Requirements: JavaScript / jQuery Framework
Demo: http://davegamache.com/parallax/
License: License Free

Best Node.js Tutorials and Resources for Beginners

Posted · Category: Best Collections, Information

Node.js is increasingly gaining popularity among web developers. Due to all hosting companies Node.js remains the prerogative of dedicated servers and VPS. Actually VPS is a solution that even a small startup can afford.

For more details refer to the documentation on nodejs.org. As you know, Node.js supports modules. You can find the folder for global modules here: \winginx\nodejs\node_modules\. Modules installed in this folder will be available in all scripts. You can use them, or create a copy in the home directory of your site.

  • Winginx includes module manager NPM, popular framework Express.js, and template engine Jade.
  • For debugging Node-Inspector module is connected. It’s ran as a Node.js server, to access it hit http://localhost:8080/ (please note that it works only in the webkit-compatible browser – Google Chrome).
  • What’s more, to ease your work with database modules and MySQL are also connected.

In brief we can say that Node.js, in contrast to PHP, is not interpreted but is compiled into a single server, and therefore occupies separate port. In conjunction with nginx it works as a backend-server, practicing dynamic queries, and nginx is engaged in statics. Read the rest of this entry »

Deal of the Week: The Ultimate Logo Design Kit

Posted · Category: Information

If you’re looking for a little logo inspiration, this Mighty Deal has your name on it. The ultimate Logo Mockup & Design Kit includes 70 retro logo templates, as well as 50+ photo-realistic logo mockups. These high-quality vector files, from Cruizine Design, are fully customizable and a snap to use.

In no time at all, you can change up the color, size, shape or details and have yourself a professional logo, banner, sign or promotional piece for your latest project. Normally, this Logo Mockup & Design Kit sells for $100, but for a limited time only, you can get the entire kit and kaboodle for just $24. That’s more than 75% off the regular price.

logo-design

How to Make Cool Animated GIFs for Your Design

Posted · Category: Information

You may have seen really cool animated GIFs that design professionals are using to present UI design on Behance, Dribble and other design communities platforms and wondered how did they created them. What is fast becoming one of the best ways of illustrating gestures and animations in mobile apps, animated GIFs offer a little more over traditional storyboards and static sceenshots.

Calvinpedzaihas shared a tutorial: How to create animated GIFs for UI design presentations, shows us how to create the animated GIF. And it will explain how to export your files properly and optimize into a GIF. Download of project file is also available.

weather-app-animated

Source: How to create animated GIFs for UI design presentations

25 Principles of Mobile Site Design from Google

Posted · Category: Information

Consumers increasingly rely on the mobile web to research and make purchases, which makes it more important than ever for companies to have an effective mobile presence. But what makes a good mobile site?

To answer this question, Google partnered with AnswerLab to research how a range of users interacted with a diverse group of mobile sites. From this research: Principles of Mobile Site Design: Delight Users and Drive Conversions, Google established 25 principles of mobile site design to help companies build mobile sites that delight customers and drive conversions.

mobile-design

Source: http://www.google.com/think/multiscreen/whitepaper-sitedesign.html

Deal of the Week: Typo-Painter for Photoshop

Posted · Category: Information

Using text to create images is a really unique and entertaining approach to creating graphics. The really neat thing is that you can do it yourself with minimal effort.

Typo-Painter for Adobe Photoshop will quickly become your absolute favorite plugin in your artistic toolbox! This plugin lets you create a typographic painting from any image, using any text you’d like.

Since your word-filled photo is saved in an EPS format, you can edit, scale, and customize the results. Using a vector tool software like Adobe Illustrator or CorelDraw, you can easily edit the final results any way you’d like. Typo-Painter normally sells for $10, but for a limited time only, you can get this incredibly fun and useful tool for just $5. That’s a 50% savings off the regular price.

typo-painter

Twitter Headers for New Responsive Profile Page

Posted · Category: Information

Twitter has launched a new profile page design few days ago, and now it is available for all users on the Web version. The new web profile lets you use a larger profile photo, customize your header, show off your best Tweets and more. The new profile makes everything big, from the profile picture to the full-width header to the tweets themselves.

TwitrCovers is the best place to find some of the most beautiful Twitter Covers and Backgrounds for your new Twitter Profile. Simply choose the image and then Click “Make This My Twitter Cover”. And then it will automatically change the image to your twitter image for you. You can also see a preview of the cover when hovering on the picture.

twitter-backgrounds

Source: http://www.twitrcovers.com/

Building Beautiful Books and Exercises with GitBook

Posted · Category: Information

GitBook is a command line tool (and Node.js library) for building beautiful programming books and exercises using GitHub/Git and Markdown. A book can contain interactive exercises. An exercise is a code challenge provided to the reader, which is given a code editor to write a solution which is checked against the book author’s validation code.

GitBook supports building books written in multiple languages. Each language should be a sub-directory following the normal GitBook format, and a file named LANGS.md should be present at the root of the repository.

learn-javascript

Requirements: Node.js framework
Demo: http://www.gitbook.io/
License: Apache License

Create Special Effects with Magic CSS3 Animations

Posted · Category: Information, License Free

Magic CSS3 Animations is a package of CSS3 animations with special effects that you can freely use for your web projects. Simple include the CSS style: magic.css or include the mynified version: magic.min.css. The project is now hosted on GitHub. There are special effects like bling, perspective, rotate, slide, tin, bomb and etc.

css-animations-effects

Requirements: CSS
Demo: http://www.minimamente.com/example/magic_animations/
License: License Free

Advanced Visual Animations with CSS Keyframes

Posted · Category: Information, License Free

Designmodo is has shared with us an article: Playing with CSS3 Animations, which is a personal experience he had while trying to build advanced visual animations with CSS keyframes. We will create a simple fluid menu based on four squares. Clicking on one of them will display an overlay showing related content, closing the overlay will reverse the process showing the default menu. All delays will be managed directly with CSS — no javascript timeout().

All demos have been tested on Chrome, Safari, Firefox, Opera, IE11 and IE10 (also on iOS). They are not intended for production; they are simply provided as tangible case studies. Additionally, you may have to implement some fallbacks for users (especially those using old IE browsers), something beyond the scope of this article.

css-animations

Requirements: CSS3
Demo: http://designmodo.com/demo/css3animations/
License: License Free

Page 6 of 37«2345678910»...
Supported By

Deals

Web Browsers Icon Set
Food Icon Set
Flat Icon Set

Flat Icon Set

100 icons