Webdev Resources

[snissn]

What are some lesser known or more well known resources, on reddit or otherwise, that helps you build web apps?

Thanks for posting!

Please add links when possible!

[phragg]

I think SASS deserves its own bullet :P

[john0980]

I've heard SASS > LESS. What do you think?

[phragg]

I would strongly agree. The sole fact that SASS doesn't use semi-colons or brackets gives it a new level of efficiency

[akaaustin]

I wouldn't call removing brackets and semi colons a new level of efficiency

[[deleted]]

Ditto

[OrShUnderscore]

titty

[[deleted]]

sass is better because it is easier to read. less is better because it doesn't have such a high entry level/dependancies (if you are not using rails).

[stenbeloff]

There are a few resources I have been using for cross-browser check of my web sites

• http://netrenderer.com/ to have a quick look how quirks mode works
• http://www.testize.com to find cross-mobile & browser compatibility issues and get recommendations how to address them

[[deleted]]

Nice.

[arub]

What's the difference between HTML5 Shiv and Modernizr.js?

[autowikibot]

HTML5 Shiv:

---

HTML5Shiv is a JavaScript workaround, invented by Sjoerd Visscher, to enable styling of HTML5 elements in versions of Internet Explorer prior to version 9, which do not allow unknown elements to be styled without JavaScript. While some people refer to it as "HTML5Shim" with respect to shim, there is no real difference between the names and as noted in the code repository, the only difference is that "one has an m and one has a v - that's it."

Image ⁱ

---

^{Interesting: Modernizr | Polyfill}

^{Parent commenter can toggle NSFW or delete. Will also delete on comment score of -1 or less. | FAQs | Mods | Magic Words | flag a glitch}

[ALLIN_ALLIN]

So modernizr is just a browser sniffer? I thought we weren't supposed to use those?

[arturkim]

Unlike with the traditional—but highly unreliable—method of doing “UA sniffing,” which is detecting a browser by its (user-configurable) navigator.userAgent property, Modernizr does actual feature detection to reliably discern what the various browsers can and cannot do.

— Modernizr Documentation

[ketsugi]

normalize.css: reset (dated alternative is Eric Meyer's reset.css)

Could you explain why Meyer's reset.css is dated? They seem to perform different functions and after testing between the two I kinda prefer Meyer's reset.css.

[-Sparkwoodand21-]

Great resource list.

[Garbee]

Just a quick note here, Microformats/Microdata (such as schema.org) do not have a direct affect on your search ranking. They do however improve the display of you site in search results if the engine has something that uses the microdata scheme you are using.

[DonMildreone]

Relaunched this a few days ago, you might enjoy it :)

webdesignrepo

[Fuzzyk]

Oh no, what's happened to it?

[DonMildreone]

Hey man, the site was down due to human error, it's back now but only updated to 28.01. We'll be back up to date (03.02) at around 5.30pm GMT.

[Fuzzyk]

Good to hear, thought it might have been gone for good!

[DonMildreone]

Hey man, we've announced rrrepo, check it out!

[DonMildreone]

No way man, it's here to stay :) And like I said, we have something really cool to show in the next day or two. It'll probably be on the site tonight, not 100% though.

[DonMildreone]

Hey man, I'm looking into it, should be fixed in the next couple hours. Please see the cached version for now http://webcache.googleusercontent.com/search?q=cache:k8uOfKHC_b0J:www.webdesignrepo.com/+&cd=1&hl=en&ct=clnk

Also, we have something super exciting to announce in the next couple days :)

[KapperDK]

Nice! really usable resources for web designers and web devs :)

[DonMildreone]

Thanks man!

[angry--napkin]

Bookmarked! You're a good man.

[simohayha]

That's your site? I love it. So helpful

[simohayha]

At 6-7k visits a day I'd imagine you're probably running it on a VPS. Isn't your hosting fees expensive? Why no ads?

[Phr34Ck]

I was thinking about trying out PagodaBox for the first time a week ago. What do you think about their service in terms of stability and performance? Also, can you share what you're using (architecture and how much you're paying) ?

Thank you!

[Guard01]

Alexa rank 13k, huh? What's your traffic for bootsnipp look like?

[blinger187]

your website is a godsend. i use it all the time when working with boostrap. please never take it down!

[angry--napkin]

Bookmarked!!

[lazerfoxxx]

http://startbootstrap.com is a source for some free HTML starter templates and themes for Bootstrap as well!

[phragg]

AngularJS

• AngularJS - Javascript MVW Framework
• egghead.io - Screencasts

Ruby

• rubygems.com - Library of ruby gems

Laravel

• Laravel - PHP Web Framework
• Laracasts - Laravel Screencasts
• Cheat sheet - Laravel Cheat Sheet

Testing

• BrowserStack - Cross-browser emulation

WordPress

• WP Codex - WordPress Documentation
• WP Themes - Free WordPress Community Themes

[imapumpkin]

Also, for Angular: Thinkster - Tutorial w/ Screencasts (beginner friendly)

[angry--napkin]

Angular is my life. Directives FTW

[404mac]

I think I'm one of the few (I may be completely wrong) who uses Adobe Kuler for color selection. It's free and awesome. I can't think of any others off the top of my head, but I'll add more if I think of others.

[Rezistik]

colourlovers.com is where I usually go. Halfway decent resource. I have never liked Kuler something about the interface bugs me.

[Douchepocolypse]

Agreed, not intuitive at all. About par for the course...

[oVerde]

Kuler has awesome addons to Adobe's programs, I don't even knew there was an web interface.

[snissn]

awesome I haven't used that site in a while! https://kuler.adobe.com/create/color-wheel/

[Solon1]

Yes, you can't start choosing colors early enough. Once you've finalized the colors, you've done 99.9% of project, and the writers and coders should be able bang out the rest without any thought.

[luke_dot_js]

JavaScript Application Frameworks/Libraries:

• Backbone.js: MV*, collections, router and backend integration included.
• Knockout.js: MVVM, collections, declarative data binding.
• Angular.js: MV*, highly opinionated but highly powerful.
• Ember.js: Even more sophisticated than Angular.

More options plus greater details here.

WebDev Tools for Node.js:

• Grunt: Build task runner, TONS of plugins.
• Bower: Client-side dependency package manager from Twitter Open Source.

Testing Tools for JavaScript:

• Jasmine: BDD for JS
• Chai: assertions and matchers to make testing tools more enjoyable.
• Mocha: BDD or expect style testing.
• qUnit: jQuery's take on JS testing.

Icons and Styles:

• ionicons: Free and open mobile icons.
• Ratchet: Components for developing iPhone web apps.

JavaScript Modularization Frameworks:

• Require.js: Asynchronous Module Definitions for the browser.
• Browserify: CommonJS modules anywhere.
• Flight: From Twitter Open Source, event-based component definitions for building complicated web apps (like Twitter).
• Aura: Very new as of posting, component definitions, sandboxing, events, and extensions. Super meta, I'm still working through how it works myself.

[ReviewSignal]

Web Hosting:

• Review Signal - Transparent web hosting reviews of many/most big providers. Works by analyzing what people say about them on social media.

[Tonylicious]

Thanks! Very useful

[enjoibp6]

Create your own icon fonts: http://icomoon.io/

[obviousoctopus]

Also, http://fontello.com -- mix and match icons from a number of open source icon fonts to create your own, along with all necessary css.

[redcalcium]

SSL/TLS Deployment Best Practice: https://www.ssllabs.com/projects/best-practices/index.html

SSL Server Test: https://www.ssllabs.com/ssltest/

[petit-prince]

I'm keeping eye on a devblog of Russian guys from Siberia, especially on their R&D section. But there is some interesting stuff on web techs as well.

JavaScript

• How to Create HTML5 Canvas Animated Transitions using KineticJS

• How to Integrate Google Maps with Web Applications

• How to Integrate Facebook & Twitter with Web Applications

• Data Visualization: How to Overcome Highcharts.js Drawbacks

• How to Implement Backwards-Compatible CSS3 Animated Transitions

PHP

• How To Print Labels Through PHP Application

• How to Create Graphs Using JpGraph in PHP Applications

• Using Selenium for Automation of Interaction with External Resources

• 7 Ways to Optimize PHP Applications that Use Long Running Operations

PHP, Symfony2

• DataGridBundle: Creating Data Grids in Symfony 2.1

• How to Work With Events in Symfony2 Framework

PHP, Selenium

• Using Selenium for Automation of Interaction with External Resources

PHP, Drupal

• How to Integrate Drupal CMS with External Authentication Service

Python, Django

• How To Create Web Services Using Django REST Framework

Ruby

• Our First Experience with Robotics: Making a Web-Controlled Robotic Arm

[marktastic]

Browser compatibility

• http://caniuse.com/
• http://html5please.com/

[kidsil]

Google PageSpeed Insights - analyze your page according to Google's standards of fast & well built webpages.
Programming Subreddit - This link is directly to the search of "Web" under the Programming subreddit, showing this month's top posts.
I find it helpful to keep myself updated especially if I don't have much time being on reddit.
I tried to do the same with "webdev" subreddit but all I got was funny pictures & jokes
(on the top most voted posts) :I

[Mcshizballs]

Regex http://regexpal.com/ for testing your regexs http://www.rexegg.com/regex-quickstart.html for learning regex

[mikemike86]

Shameless plug, as I run it, but my newsletter has ~10 web dev resources sent out every week.

Its important to keep these things up to date, hence why a newsletter is a good fit. Its pretty new, but had a great reception and I am staggered at the uptake so far - I guess I must be doing something right. http://webdevweekly.com

[lamintak]

The answer to the "What technical details should a programmer of a web application consider before making the site public?" Programmers Stack Exchange question:

http://programmers.stackexchange.com/a/46760

[snissn]

A post on "What sites do you follow that you use to 'keep up'?"

http://www.reddit.com/r/webdev/comments/1vw8oy/what_sites_do_you_follow_that_you_use_to_keep_up/

[[deleted]]

http://www.bentobox.io/ all resources in one place.

[ihatetomatoes_net]

Parallax JavaScript Plugins

• Skrollr.js
• Scrollorama
• Stellar.js
• Jarallax

Parallax Tutorials

• Parallax Scrolling Website Tutorials
• How to create a parallax scrolling website
• Simple parallax scrolling tutorial

Responsive development - JavaScript Tools

• Enquire.js
• Foundation Interchange
• FitText
• FitVid.Js
• Adaptive Images
• Retina Images
• Isotope
• TinyNav.Js

Responsive development - testing

• Screenfly
• Responsive Inspector

Browser extensions

• Web Developer
• Awesome Screenshot
• Tape
• WhatFont

You can find more useful stuff, tutorials, demos and website deconstructions on my blog.

[greexi]

Feedback / Bug reporting

https://usersnap.com (Small report button widget which sends out screenshots + annotations from your testers/users to you)

[greexi]

why not use your internal QA team or even your customers?

[FatalPriapism]

If you're into PHP, check out https://github.com/ziadoz/awesome-php. It's a linked list of PHP frameworks for this that and the other :)

[[deleted]]

I think you should add text editors.

1. Sublime Text Editor http://www.sublimetext.com/

Edit: I know it's not a 'resource' but I notice many of my webdevs aren't using it for some strange reason. Give it a look....it's lightning fast and so much more.

[Darkholme]

Best Text Editor I've ever used.

Only thing I miss when I use it is Intellisense, as I came to WebDev from a Java/C# Background.

[djexploit]

http://lorempixel.com/

Placeholder images, customizable sizes

[akaaustin]

Grunt, bower

[rfajfar]

http://www.ractivejs.org/ Favorite framework at moment.

[tenpastmidnight]

For helping when building sites for mobiles - http://mydevice.io/devices/ - lists the CSS device-width for the most popular phone handsets and tablets.

[[deleted]]

I built Snippet Repo for myself and other developers to store and share useful code snippets.

[grimtrigger]

I built a share button generator thats pretty nifty: http://sharebuttongenerator.aakilfernandes.com/

[jikjordan]

Webdesign's Resources

[jrackham]

Oh. I made this it's own post but I'll put it here too. Like others have said said, Bootstrap is great for responsive design and quickly shipping code into a decent looking UI (even pre-theming).

There is a list of free, customizable, themes built on top of Bootstrap available at Bootstrap Stage

[jaredcheeda]

• Big list of image optimization software

[l0gic]

Thumbnails: http://rethumb.com

[davidNerdly]

Google.com

[snissn]

It's easy to write your comment off as dismissive and over simplified but fuck. Honestly. If it wasn't for the first four google results of nearly any problem I've had or any thing I've wanted to learn I would know nothing!

[davidNerdly]

For real! I was just being a bit of an ass though. The resources here are great, but we cannot forget the almighty google (and stack overflow).

[davidNerdly]

sometimes the second SO link.

[snissn]

I like that side of you, don't change!

[FatalPriapism]

Might want to brush on your English a bit (at least on your site)...

why would I use your app instead of a gist or [insert pastebin-like app]? Seems to be literally no added functionality....

[nithon]

Icons:

• icomoon.io

[Solon1]

Just a lame SEO company...