Register a SA Forums Account here!
JOINING THE SA FORUMS WILL REMOVE THIS BIG AD, THE ANNOYING UNDERLINED ADS, AND STUPID INTERSTITIAL ADS!!!

You can: log in, read the tech support FAQ, or request your lost password. This dumb message (and those ads) will appear on every screen until you register! Get rid of this crap by registering your own SA Forums Account and joining roughly 150,000 Goons, for the one-time price of $9.95! We charge money because it costs us money per month for bills, and since we don't believe in showing ads to our users, we try to make the money back through forum registrations.
 
  • Post
  • Reply
Oh My Science
Dec 29, 2008
Latest Updates: Updated tools section with data visualization libraries and modified existing FAQs. (06/15/2013)

about : This thread covers anything related to webdesign & development coding & tools. If you want a critique please goto the Web Critique thread in CC.

Index
  1. Frequently Asked Questions
  2. Light Reading
  3. Education and References
  4. Tools
  5. Frameworks
  6. Content Management Systems (CMS)
  7. Design Principles and Theory
  8. Freelancing Advice

Oh My Science fucked around with this message at 00:28 on Jun 18, 2013

Adbot
ADBOT LOVES YOU

Oh My Science
Dec 29, 2008
Frequently Asked Questions

A list of frequently asked questions designed to help new designers & developers. If something gets asked a lot in the thread it will end up here.

  1. I have a [complicated problem], how do I begin?
    Post for help and list the following:
    1. Your Skill Level
    2. Any necessary project requirements ( languages / frameworks )
    3. Include source code whenever possible ( JSFiddle )
    4. When in doubt, shop it out - Goons for Hire - Work For Hire

  2. Why does IE sometimes not display or behave properly?
    It's because IE is a piece of poo poo. Check out Modern IE for testing or to download VM's.

  3. Should I use a framework?
    Yes. While it is highly recommended to know the underpinnings of the language you are working with lest they seem like magic, frameworks will save you invaluable time and energy.

  4. What HTML version should I use / should I use XHTML?
    There is no reason not to use the HTML5 doctype. It is backwards compatible with most major and supported browsers, and usually will degrade gracefully. You should not use XHTML, as it is rarely served with the correct MIME type, essentially making it HTML with extra forward slashes and superfluous attributes.

    HTML5 Shim

  5. Which browsers / devices should I test for?
    The answer to this question depends heavily on your audience. The best way to determine what browsers you should test for is to get information on your target audience (eg. if you’re coding a site for X industry that will be viewed by users in Y country, look up stats for similar sites)

    Use analytics from your previous projects or ask goons

    GoonApproved™ best practice list:
    • Internet Explorer: 8 - current
    • Firefox: Last 2 - 4 versions
    • Safari
    • Chrome
    • iOS
    • Android

    When in doubt, encourage users on old browsers to use Google Chrome Frame.

    Note - Google Chrome Frame is being retired in 2014.

  6. What is A/B testing?
    A/B testing (sometimes called split testing) is comparing two versions of a web page to see which one performs better. You compare two web pages by showing the two variants (let's call them A and B) to similar visitors at the same time.

  7. I have a design I want critiqued, where should I post links / screenshots?
    Please goto the Web Critique thread in CC. If you have a question about how to code your design please ask here.

  8. I need freelancing advice...
    Please goto the Freelance section. You may also want to check out The Business of Art thread over is CC.

  9. I need help with hosting.
    If you have any questions about web hosting please refer to the Hosting / Web Hosting MEGATHREAD.

  10. My page looks like X in Firefox but Y in IE, why is that?
    It's because all the browsers have some 'default' values for each kind of elements, when you wrote your stylesheet it took into account the default values for your development browser of choice. Use Eric Meyers CSS Reset Reloaded to get all your browsers to the same starting point.

  11. Why doesn't my page display properly at all?
    If you think you wrote your page with proper markup and/or proper CSS it could be because you didn't declare a document type. This is very important. I cannot stress how important it is to declare a proper document type. If you fail to do so most every browser will poo poo itself and your page will become a bunch of garbled poo poo. So please declare your doctype

  12. I've put in the right code, my stylesheet looks right but things aren't looking like they should. Why?
    Because you didn't declare your DOCTYPE properly and so the browser doesn't know exactly how to handle the html you're giving it. Use the HTML5 doctype <!DOCTYPE html>.

  13. What is version control, and why should you care?
    Version control is a system that records changes to a file or set of files over time so that you can recall specific versions later.

    If you are a graphic or web designer and want to keep every version of an image or layout (which you certainly would), it is very wise to use a Version Control System (VCS). A VCS allows you to: revert files back to a previous state, revert the entire project back to a previous state, review changes made over time, see who last modified something that might be causing a problem, who introduced an issue and when, and more. Using a VCS also means that if you screw things up or lose files, you can generally recover easily. In addition, you get all this for very little overhead.

Oh My Science fucked around with this message at 00:24 on Jun 18, 2013

Oh My Science
Dec 29, 2008
Light Reading


Cross Browser Fundamentals
  1. Sites don’t need to render the same across all browsers.
    A common concern among developers is ensuring that their sites render the same across all browsers, including non-modern ones. That’s not always necessary. A better route is to consider progressively enhancing your site by offering a solid working baseline experience to users with non-modern browsers while providing a richer UI to those users with modern browsers.

  2. Start with a solid template to simplify development.
    Many of these tips are already built into a project template like HTML5 Boilerplate to save you some time. Those rules work equally well for projects targeted at modern browsers and ones that need older browser support all the way back to IE6.

  3. Focus on stable standards.
    It’s easy to get excited every time a new and cool feature comes out but some of these may still be experimental with the specification still under development. It’s important to remember that features that are in the early stages of specification development are very likely to change, which could impact your site’s stability and your customer’s experience. By focusing on stable standards, you're ensuring that your customers will be able to have the experience they're expecting and your site will be more maintainable.

  4. Use polyfills and shims sparingly.
    If you absolutely need to provide the same experience across all browsers, polyfills and shims offer code and markup that can help mimic standards-based APIs and functionality. The key thing to remember is that you need to properly vet the code to ensure it meets your use-case and that you can support it going forward.

  5. Test in multiple browsers while developing.
    Although modern browsers are much closer to a single standard than ever before, differences still exist. An occasional multi-browser sanity check point during development can ensure that serious cross-browser issues don't crop up at the last minute – or worse yet, after it's all public. Use a cross-browser hosted testing solution like BrowserStack.

  6. Use a build process with tools to check for errors and minify files.
    A good set of build tools such as HTML validators, CSS validators, Uglify, and JSHint, or GruntJS can find latent problems, enforce project code standards, and reduce file size to improve performance. These steps don't have to be a roadblock if your IDE or code-editor supports them.

HTML
  1. Always use a standards-based doctype to avoid Quirks Mode.
    Start with <!DOCTYPE html>. The modern web has no place for Quirks Mode, which was designed so that mid-1990s web pages would be usable in turn-of-the-century "modern" browsers like IE6 and Firefox 2. Most web pages today end up in Quirks Mode accidentally because of an invalid doctype or extraneous text before the doctype. This can cause strange layout issues that are hard to debug.

  2. Understand the backward-compatibility limits of HTML5 tags.
    New HTML5 tags like <section>, <header>, and <footer> improve the semantics of markup, but require a special "shiv" script to run in Internet Explorer 6, 7, and 8 or they won't be recognized. Pages that need to work with these legacy browsers even when scripts are disabled cannot use the new HTML5 tags. Using plain <div> elements and classes is often a safer course of action for those cases.

  3. Put CSS file references at the top of the HTML file.
    Putting CSS files in the body can result in the browser showing a blank page until the CSS has loaded. CSS files should go into the head of the HTML document to allow the browser to start fetching them as early as possible.

  4. Put JavaScript file references at the bottom of the HTML file.
    The browser must retrieve, parse, and execute a script file in the HTML markup before it can continue parsing the rest of the file, just in case the JavaScript writes new markup into the page. With scripts at the bottom, the browser can often render the page even before the scripts are completed, so that the user perceives the page as loading faster.

  5. Avoid inline JavaScript tags in HTML markup.
    As with external script references, an inline script requires the browser to stop parsing HTML and can also prevent parallel downloading of other resources on the page. This can seriously slow the initial load of the page and give the user a dreaded "blank-page" experience. Script sprinkled around the markup is also more difficult to maintain.

  6. Do not use inline JavaScript events inside HTML markup.
    An example would be <button onclick="validate()">Validate</button>. This practice breaks the clean separation that should exist between markup, presentation, and behavior. Also, if scripts load at the bottom of the file, it is possible for a user to interact with the page and trigger an event that attempts to call a script that isn't loaded yet – causing an error.

  7. Write clean, semantic markup. Avoid using wysiwyg editors.
    If you have a block element whose only child is a single block element, you are probably doing something wrong. HTML describes the content of your content, it's not for layout (mostly =) Most folks have 300% or more markup than they need in pages, which makes changes, debugging, and styling harder and take longer than it should.

CSS
  1. Know and use the CSS cascade rules.
    Simple id and class selectors are useful, but using them exclusively means the markup gets messier and less reusable with unnecessary ids and classes. Using tag, descendant, child, sibling, and attribute selectors in combination with a small number of ids and classes can keep both the markup and CSS simpler and more general. Avoid the use of the "!important" rule at all costs.

  2. Fully prefix vendor-specific CSS properties to future-proof them.
    As new draft standards progress, browser vendors sometimes get a jump on the standard by adding support via prefixed properties. To ensure that the CSS continues to work in the future, use all the vendor-prefixed names and the non-prefixed name as well. This blog post provides a plain-JavaScript alternative.

  3. Solve compatibility problems with valid CSS rules, not CSS parser hacks.
    CSS parser hacks are unreliable because browsers can be updated causing these hacks to fail. Instead try adding version-specific classes to the html or body tag that can be used in stylesheet rules. Conditional comments can also be used to include a browser-specific CSS file only in the versions that need it.

  4. Once you are comfortable with CSS move onto something better.
    Sass is an extension of CSS3, adding nested rules, variables, mixins, selector inheritance, and more. It’s translated to well-formatted, standard CSS using the command line tool or a web-framework plugin.

    LESS extends CSS with dynamic behavior such as variables, mixins, operations and functions.

JavaScript
  1. Always prefer feature detection over browser (navigator.userAgent) detection.
    The userAgent string is a poor indicator of whether a particular feature (or bug) is present. To compound the problem, much of the code that interprets userAgent does so incorrectly. For example, one browser-sniffing library expected the major version to be only a single digit, so it reported Firefox 15 as Firefox 1 and IE 10 as IE 1! It is more reliable to detect the feature or problem directly, and use that as the decision criteria for code branches. We recommend Modernizr as the easiest way to implement feature detection.

  2. Run as little script as possible when the document is ready.
    Techniques such as jQuery's $(document).ready() make it easy to run script as soon as the HTML on the page is loaded, which is usually the earliest possible moment it can be safely run. However, running a lot of complex script at this point can make the page appear sluggish and prevent the user from interacting with it immediately. Often the initialization for things like a tooltip or dialog can be delayed until the item actually needs to be displayed, with no noticeable stutter.

  3. Start AJAX requests as early as possible if they're critical for user interaction with the page.
    Since an AJAX request can take a long time, there's no need to wait for the HTML page to be ready before starting it. Instead, place the $(document).ready() call inside the AJAX completion function.

  4. Delay-load non-essential scripts (e.g., Facebook Like, Google +1, Twitter).
    Everyone wants their page to be popular on social networks, but social network scripts tend to be large and can cause sluggish response for the user. Waiting until the page has loaded before requesting these scripts can make the page responsive sooner. Even better, rethink whether these buttons are necessary at all, and whether they improve your page's overall experience.

Oh My Science fucked around with this message at 03:54 on Jun 15, 2013

Oh My Science
Dec 29, 2008
Education and References

Here you can find links to useful web design & development blogs, websites, articles, mailing lists, and more. This section will change often as things fall out of date or new resources are found. If you find anything useful during your research or web travels please let us know.

General Reference
  1. Can I use...
    Compatibility tables for support of HTML5, CSS3, SVG and more in desktop and mobile browsers.

  2. Quirks Mode
    Home of the Browser Compatibility Tables, where you’ll find hype-free assessments of the major browsers’ CSS and JavaScript capabilities, as well as their adherence to the W3C standards.

  3. Javascript Garden
    A growing collection of documentation about the most quirky parts of the JavaScript programming language. It gives advice to avoid common mistakes and subtle bugs, as well as performance issues and bad practices, that non-expert JavaScript programmers may encounter on their endeavours into the depths of the language.

Help
  1. StackOverflow
    A question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.

Education
  1. Team Treehouse
    Learn to build websites, create iPhone and Android apps, code with Ruby on Rails and PHP, or start a business.

  2. Code Academy
    Codecademy is an education company. But not one in the way you might think. We're committed to building the best learning experience inside and out, making Code Academy the best place for our team to learn, teach, and create the online learning experience of the future.

  3. Code Learn
    Rails Tutorials - Learn by Creating An App Right In Your Browser.

  4. Code School
    Code School teaches web technologies in the comfort of your browser with video lessons, coding challenges, and screencasts.

  5. net Tuts+
    A site aimed at web developers and designers offering tutorials and articles on technologies, skills and techniques to improve how you design and build websites. We cover HTML, CSS, Javascript, CMS’s, PHP and Ruby on Rails.

  6. CSS Tricks
    A collection of articles that cover CSS and common web design tools & techniques.

  7. Lynda
    Helps anyone learn software, technology, creative, and business skills to achieve their personal and professional goals. With a lynda.com subscription, members receive unlimited access to a vast library of high-quality, current, and engaging video tutorials taught by recognized industry experts.

Design Principles and Theory
  1. hack Design
    An easy to follow design course for hackers who do amazing things. Highly recommended.

  2. The Web Is All About Typography Period.
    95% of the information on the web is written language. It is only logical to say that a web designer should get good training in the main discipline of shaping written information, in other words: Typography.

  3. Typography Quick Tips
    A selection of short typography tips from Harry Roberts

  4. Grids Are Good
    Right?

  5. Massimo Vingelli’s Design Canon

Mailing Lists
  1. CSS Weekly
    Weekly email roundup of css articles, tutorials, experiments and tools.

  2. Javascript Weekly
    A free, once–weekly email roundup of JavaScript news and articles.

  3. HTML5 Weekly
    A free, once–weekly roundup of HTML5 and browser technology news and links. CSS3, Canvas, WebSockets, WebGL, Native Client, and more.

  4. Responsive Design Weekly
    A free, once–weekly round-up of responsive design articles, tools, tips, tutorials and inspirational links.

  5. Sidebar.io
    The best design links, every day.

  6. Web Design Weekly
    A once a week email with no spam, no rambling. Just pure awesome links to the best news and articles to hit the interweb during the week.

Blogs
  1. A list Apart
    Explores the design, development, and meaning of web content, with a special focus on web standards and best practices.

  2. Smashing Magazine
    A vast collection of web design & development articles.

  3. CoDrops
    Use them more for their collectives, but they tend to showcase some fairly interesting stuff on the main blog.

  4. Noupe
    Quite similar to smashing magazine, and updates more frequently than Web Designer Wall. Has decent freebies every now and then as well.

Oh My Science fucked around with this message at 03:48 on Jun 15, 2013

Oh My Science
Dec 29, 2008
Tools

This is not a comprehensive list and we expect you to choose the best tool for your needs. We will update the list as new tools are found or suggested.

Code Editors
  1. Sublime Text
    Sublime Text is a sophisticated text editor for code, markup and prose. You'll love the slick user interface, extraordinary features and amazing performance. If you like it, buy it. Support the devs!

    Suggested plugins:

    Operating Systems:
    • OS X (OS X 10.6 or 10.7 is required)
    • Windows 32/64bit
    • Linux 32/64bit

  2. Textmate 1 & 2
    TextMate brings Apple's approach to operating systems into the world of text editors. By bridging UNIX underpinnings and GUI, TextMate cherry-picks the best of both worlds to the benefit of expert scripters and novice users alike. If you like it, buy it. Support the devs!

    Operating Systems:
    • OS X (OS X 10.7 is required for 2.0 alpha +)

  3. Notepad ++
    Notepad++ is a free (as in "free speech" and also as in "free beer") source code editor and Notepad replacement that supports several languages. Running in the MS Windows environment, its use is governed by GPL License.

    Operating Systems:
    • Windows 32/64bit

  4. Notepad2
    A fast and light-weight Notepad-like text editor with syntax highlighting. This program can be run out of the box without installation, and does not touch your system's registry.

    Operating Systems:
    • Windows 32/64bit

  5. VIM
    An advanced text editor that seeks to provide the power of the de-facto Unix editor 'Vi', with a more complete feature set. It's useful whether you're already using vi or using a different editor.

    Use Pathogen or Vundle to install plugins.

    Suggested plugins:
    • NerdTRee
    • Snipmate
    • minbuffexplore
    • syntastic, and sparkup

    Operating Systems:
    • OS X
    • Unix
    • MS-DOS
    • Windows 32/64bit
    • Amiga
    • OS/2

  6. Emacs
    GNU Emacs is an extensible, customizable text editor—and more. At its core is an interpreter for Emacs Lisp, a dialect of the Lisp programming language with extensions to support text editing.

    Operating Systems:
    • Windows 32/64bit
    • Unix

Browser Dev Tools
  1. Chrome Dev Tools
    Bundled in Chrome, they provide web developers deep access into the internals of the browser and their web application.

  2. Firebug
    The most popular and powerful web development tool. Primarily used in Firefox you can find lite version for other browsers.

  3. Safari Web Dev Tools
    Apple has brought its expertise in OS X and iOS development tools to the web. Safari includes a powerful set of tools that make it easy to modify, debug, and optimize a website for peak performance and compatibility. To access these tools, enable the Develop menu in Safari’s Advanced preferences.

A/B Testing
  1. Visual Website Optimizer

    • Usability testing
    • Optimize Mobile & Tablet Websites
    • Heatmaps & Clickmaps
    • Behavioral & Geo Targeting
    • Split URL Testing
    • Powerful Multivariate Testing

User Testing
  1. Silverback
    Makes it easy, quick and cheap for everyone to perform guerrilla usability tests with no setup and no expense, using hardware already in your Mac.

Analytics
  1. Google Analytics
    Considered the bare minimum for analytics these days. Install it on every site you create.

CSS
  1. CSS3 Please
    The Cross-Browser CSS3 Rule Generator

  2. Sass
    Sass is an extension of CSS3, adding nested rules, variables,mixins, selector inheritance, and more. It’s translated to well-formatted, standard CSS using the command line tool or a web-framework plugin.

  3. LESS
    LESS extends CSS with dynamic behavior such as variables, mixins, operations and functions. It’s translated to well-formatted, standard CSS using the command line tool or a web-framework plugin.

FTP Clients
  1. Transmit

  2. Cyberduck

  3. FileZilla

  4. WinSCP

Data Visualization
  1. D3JS
    A JavaScript library for manipulating documents based on data. D3 helps you bring data to life using HTML, SVG and CSS. D3’s emphasis on web standards gives you the full capabilities of modern browsers without tying yourself to a proprietary framework, combining powerful visualization components and a data-driven approach to DOM manipulation.

  2. HighCharts
    a charting library written in pure HTML5/JavaScript, offering intuitive, interactive charts to your web site or web application. Highcharts currently supports line, spline, area, areaspline, column, bar, pie, scatter, angular gauges, arearange, areasplinerange, columnrange, bubble, box plot, error bars, funnel, waterfall and polar chart types.

Web Debugging
  1. Fiddler
    The free web debugging proxy for any browser, system or platform.

More coming tomorrow.

Oh My Science fucked around with this message at 00:30 on Jun 18, 2013

Oh My Science
Dec 29, 2008
Frameworks

This is not a comprehensive list and we expect you to choose the best framework for your needs. That being said they have their own pro's and cons, feel free to discuss them or ask for advice when choosing one. SA has other threads that cover some of the more popular frameworks, a link will be provided in the description. If you find a new exciting framework let us know!

Complete Front End Frameworks
  1. Twitter Bootstrap
    Bootstrap is a sleek, intuitive, and powerful front-end framework for faster and easier web development.

  2. HTML5 Boilerplate
    Helps you build fast, robust, and adaptable web apps or sites. Kick-start your project with the combined knowledge and effort of 100s of developers, all in one little package.

  3. Zurb Foundation
    The most advanced responsive front-end framework in the world.

  4. Gumby
    A flexible, responsive CSS framework, powered by SASS.

  5. Pure CSS
    A set of small, responsive CSS modules that you can use in every web project.

CSS / SASS / LESS Frameworks
  1. Bourbon
    A simple and lightweight mixin library for Sass.

  2. Compass
    Compass is an open-source CSS Authoring Framework.

Grid Frameworks
  1. Neat
    A lightweight semantic grid framework for Sass and Bourbon.

  2. 960.gs
    The 960 Grid System is an effort to streamline web development workflow by providing commonly used dimensions, based on a width of 960 pixels. There are two variants: 12 and 16 columns, which can be used separately or in tandem.

  3. Variable Grid System
    A quick way to generate an underlying CSS grid for your site. The CSS generated file is based on the 960 Grid System.

  4. Unsemantic
    Unsemantic is a fluid grid system that is the successor to the 960 Grid System. It works in a similar way, but instead of being a set number of columns, it's entirely based on percentages.

Javascript Frameworks - Javascript Questions Thread
  1. Ember
    A JavaScript framework that does all of the heavy lifting that you'd normally have to do by hand. There are tasks that are common to every web app; Ember.js does those things for you, so you can focus on building killer features and UI.

  2. Maria
    The MVC framework for javascript applications.

  3. Backbone
    Supplies structure to JavaScript-heavy applications by providing models key-value binding and custom events, collections with a rich API of enumerable functions, views with declarative event handling, and connects it all to your existing application over a RESTful JSON interface.

  4. Angular
    Lets you write client-side web applications as if you had a smarter browser. It lets you use good old HTML (or HAML, Jade and friends!) as your template language and lets you extend HTML’s syntax to express your application’s components clearly and succinctly.

  5. jQuery
    A fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. - jQuery Megathread

  6. jQuery UI
    A curated set of user interface interactions, effects, widgets, and themes built on top of the jQuery JavaScript Library.

  7. jQuery Mobile
    A unified, HTML5-based user interface system for all popular mobile device platforms, built on the rock-solid jQuery and jQuery UI foundation.

PHP Frameworks - PHP Questions Thread
  1. Laravel
    A web application framework with expressive, elegant syntax. Laravel attempts to take the pain out of development by easing common tasks used in the majority of web projects, such as authentication, routing, sessions, and caching.

  2. Code Ignitor
    A proven, agile & open PHP web application framework with a small footprint.

  3. Cake PHP
    Makes building web applications simpler, faster and require less code.

  4. Kohana
    An elegant HMVC PHP5 framework that provides a rich set of components for building web applications.

Ruby Frameworks
  1. Ruby on Rails
    An open-source web framework that favors convention over configuration. - Ruby on Rails Thread

  2. Sinatra
    Sinatra is a DSL for quickly creating web applications in Ruby with minimal effort.

Python Frameworks
  1. Django
    A high-level Python Web framework that encourages rapid development and clean, pragmatic design.

  2. Flask
    A micro framework for Python based on Werkzeug, Jinja 2 and good intentions.

  3. Pyramid
    Rather than focusing on a single web framework, the Pylons Project will develop a collection of related technologies. The first package is the Pyramid web framework.

Oh My Science fucked around with this message at 03:51 on Jun 15, 2013

Oh My Science
Dec 29, 2008
Content Management Systems

This is not a comprehensive list and we expect you to choose the best CMS for your needs. That being said they have their own pro's and cons, feel free to discuss them or ask for advice when choosing one. SA has other threads that cover some of the more popular CMS's, a link will be provided in the description.

  1. WordPress - WordPress Thread
    WordPress is web software you can use to create a beautiful website or blog. We like to say that WordPress is both free and priceless at the same time.

  2. Drupal
    An open source content management platform powering millions of websites and applications. It’s built, used, and supported by an active and diverse community of people around the world.

  3. Expression Engine
    A powerful Content Delivery Platform, and CodeIgniter, an agile, open-source framework. Using these tools, web professionals can build nearly any type of dynamic website or application they can dream up.

Oh My Science fucked around with this message at 03:54 on Jun 15, 2013

Oh My Science
Dec 29, 2008
Design Principles and Theory - coming soon!

Oh My Science fucked around with this message at 03:56 on Jun 15, 2013

Oh My Science
Dec 29, 2008
Freelancing - coming soon!

Oh My Science fucked around with this message at 03:56 on Jun 15, 2013

Oh My Science
Dec 29, 2008
Reserved for anything I may have missed.

Go ahead and post if you want. I'm done writing bbcode for the night, I'll finish off the remaining sections tomorrow and complete the tools section.

Oh My Science fucked around with this message at 05:08 on Jun 15, 2013

manero
Jan 30, 2006

On the topic of freelancing, the Ruby Freelancer's Podcast is a great resource, and is applicable even if you're not a ruby developer.

Mister Chief
Jun 6, 2011

Is IE tester reliable? A page of a site I'm testing is crashing it using IE9 even though it works in 6,7,8 and 10 as well as chrome and firefox.

Oh My Science
Dec 29, 2008

Mister Chief posted:

Is IE tester reliable? A page of a site I'm testing is crashing it using IE9 even though it works in 6,7,8 and 10 as well as chrome and firefox.

Try Modern IE, link in the FAQ. It has an online tool for quick tests and you can download VMs if you need the real thing.

TheresNoThyme
Nov 23, 2012
Not sure if this deserves being in the OP's frameworks section, but shout-out to d3.js for being an amazing data visualization js library that has made one of my recent freelance projects much easier and more enjoyable. Once you get used to d3's concepts, esp. the idea of entry sets and exit sets, the code is easy to write and really powerful. And thanks to the OP for all the links, will definitely check out the ones I haven't seen before.

Blinkz0rz
May 27, 2001

MY CONTEMPT FOR MY OWN EMPLOYEES IS ONLY MATCHED BY MY LOVE FOR TOM BRADY'S SWEATY MAGA BALLS

TheresNoThyme posted:

Not sure if this deserves being in the OP's frameworks section, but shout-out to d3.js for being an amazing data visualization js library that has made one of my recent freelance projects much easier and more enjoyable. Once you get used to d3's concepts, esp. the idea of entry sets and exit sets, the code is easy to write and really powerful. And thanks to the OP for all the links, will definitely check out the ones I haven't seen before.

Highcharts too!

edit: You should probably mention Underscore if you're going to mention jQuery and Backbone.

Blinkz0rz fucked around with this message at 18:48 on Jun 15, 2013

Oh My Science
Dec 29, 2008
Looks like we need a data visualization section in the tools area.

Done.

Oh My Science fucked around with this message at 18:42 on Jun 15, 2013

hayden.
Sep 11, 2007

here's a goat on a pig or something
I know JavaScript and PHP somewhat well, enough to make some simple AJAX web apps. I want to add an ability for people to log in, though, and instead of building it from the ground up I figured there exists a framework out there already to make it easier. I looked at CodeIgniter and Laravel and didn't see any obvious mentions of having a login module or something. Do I need to use Django or Rails for this kind of thing?

Depressing Box
Jun 27, 2010

Half-price sideshow.
Laravel has a login system, they just list it under "Security" in the docs.

Lumpy
Apr 26, 2002

La! La! La! Laaaa!



College Slice

hayden. posted:

I know JavaScript and PHP somewhat well, enough to make some simple AJAX web apps. I want to add an ability for people to log in, though, and instead of building it from the ground up I figured there exists a framework out there already to make it easier. I looked at CodeIgniter and Laravel and didn't see any obvious mentions of having a login module or something. Do I need to use Django or Rails for this kind of thing?

There are also many Auth libraries for CodeIgniter as well. This was the first result for googling 'CodeIgnier authentication library 2013': https://github.com/gilbitron/CodeIgniter-Authme

(please insert your own joke about PHP and security here)

hayden.
Sep 11, 2007

here's a goat on a pig or something
Thanks guys. I feel so primitive doing everything by hand and some jQuery. I have a lot to learn.

DreadCthulhu
Sep 17, 2008

What the fuck is up, Denny's?!
Speaking of web development, I've spent the past few days trying to automate the deployment of our upcoming EC2 three-box setup of site, api and database nodes. The first step is a fat shell script to get everything ready for git-based puppet, and the next phase is puppet turning the machine into whatever type of node it is.

Interesting experience if you haven't done much unix administration before, you get to appreciate it much more. It's pretty magical to see a generic instance turn into something of actual use with a single command.

duck monster
Dec 15, 2004

Depressing Box posted:

Laravel has a login system, they just list it under "Security" in the docs.

*swings dead cat around head 3 times*

It definately has a login system, but gently caress me if it aint poorly documented in laravel 4. I STILL dont know how to register a custom hash provider in the loving thing :(

karms
Jan 22, 2006

by Nyc_Tattoo
Yam Slacker

duck monster posted:

*swings dead cat around head 3 times*

It definately has a login system, but gently caress me if it aint poorly documented in laravel 4. I STILL dont know how to register a custom hash provider in the loving thing :(

Laravel's documentation is really... curt. I don't know about 4, but 3's source code was readable enough.

Depressing Box
Jun 27, 2010

Half-price sideshow.

KARMA! posted:

Laravel's documentation is really... curt. I don't know about 4, but 3's source code was readable enough.

That's really been the saving grace for me. Laravel's implementation of its different systems is usually well-commented and straightforward (until you run into the Symfony bits, which get more convoluted/verbose). I've been able to figure out most things by using the comments and tests as supplements to the documentation.

I guess I can understand the docs being light, given that there's only one primary developer, but I hope they get more fleshed out now that 4.0 is out.

The Insect Court
Nov 22, 2012

by FactsAreUseless
Can somebody recommend a "just enough design for developers" sort of book/site/whatever? I've checked out hackdesign, but it's more an aggregration of design-related blogs and articles.

Oh My Science
Dec 29, 2008

The Insect Court posted:

Can somebody recommend a "just enough design for developers" sort of book/site/whatever? I've checked out hackdesign, but it's more an aggregration of design-related blogs and articles.

If you're developing a web app check out this book. It focuses more so on how a web app should look and behave but it's quite easy to understand since it offers great examples. If you can be more specific in terms of what "design" means to you I may be able to point you towards a few other resources.

Hack Design is really great, if you complete each "lesson" you'll come out knowing quite a bit.

DreadCthulhu
Sep 17, 2008

What the fuck is up, Denny's?!
Design for Hackers is at the very least an interesting read if you're just starting out.

I've personally got quite a bit of mileage by replicating someone else's theme by hand. You learn a lot by seeing the tricks that people in the know use.

pokeyman
Nov 26, 2006

That elephant ate my entire platoon.
Re "encourage users on old browsers to use Google Chrome Frame" in an OP, Chrome Frame is done as of January 2014. Might make sense to suggest users update their browsers.

kedo
Nov 27, 2007

A good OP.

pokeyman posted:

Re "encourage users on old browsers to use Google Chrome Frame" in an OP, Chrome Frame is done as of January 2014. Might make sense to suggest users update their browsers.

That's too bad, however by January 2014 it'll probably be unnecessary anyways. Currently on most of the sites whose analytics I track .004% of total users are on a version of IE that would necessitate Chrome Frame. So really, who cares anymore? I'm a hair's breadth from dropping IE 8 support as well.

Speaking of browser stats, that might be something good to add to the OP. I can never decide which reporting agency to believe, though Wikipedia's page is a good place to start. I wish Google would just publish aggregated stats again like they used to in the old zeitgeists. :smith:

Munkeymon
Aug 14, 2003

Motherfucker's got an
armor-piercing crowbar! Rigoddamndicu𝜆ous.



I'd like to recommend two additions to the tools post:

http://winscp.net/ WinScp's interface sucks a lot less than FileZilla's and it does FTP just as well (since it uses FZ's FTP library in the background last I checked). The main selling point for me is that it'll download a file from the server, tell my configured editor about it and then watch the file for changes and send them to the server without my having to do any fiddling with the UI, unlike FZ.

http://fiddler2.com/ is incredibly useful for me at work because our stuff is usually included on someone else's page that I can't change at all - unless I have a proxy that will serve edited responses to my browser :) If anything as good exists for Nix/OSX, I'd like to know.

Video Nasty
Jun 17, 2003

This thread loving owns; so thank you everyone for all the hard work that went into it!

DreadCthulhu
Sep 17, 2008

What the fuck is up, Denny's?!
I love how 25% of the Internet is still on IE8, which in the market we're in is more like 80%. Gotta go through our fancy backbone app with 30 plugins and make sure they're all working as intended, which they really aren't right now. I even put up one of those "update your 5 year old browser, for gently caress's sake" banners on the site, but it doesn't help if it doesn't load in the first place, oops.

Oh My Science
Dec 29, 2008

Munkeymon posted:

I'd like to recommend two additions to the tools post:

http://winscp.net/

http://fiddler2.com/

Thanks for these, WinSCP is now under FTP Tools and Fiddler deserved a new tool category all together.

Keep the suggestions coming! I'm taking a few days to work on the freelance and design section a bit more so stay tuned if that's all you want.

cbirdsong
Sep 8, 2004

Commodore of the Apocalypso
Lipstick Apathy

Oh My Science posted:

Keep the suggestions coming! I'm taking a few days to work on the freelance and design section a bit more so stay tuned if that's all you want.

I would probably add Coda to the code editors section, and remove Textmate 1, since it's unlikely to even get bugfixes now that 2 is open source.

duck monster
Dec 15, 2004

KARMA! posted:

Laravel's documentation is really... curt. I don't know about 4, but 3's source code was readable enough.

In general the source is pretty good, for php, but 4 uses a few design patterns that are not immediately self evident and the hash provider stuff doesn't seem to provide any easy clues how to use a custom provider. I ended up writing my own provider (Its for an old database that sadly uses unsalted MD5s. Unfortunately with salts its never quite straightforward to update the schema because it isn't simply a case of "decoding" the hash and replacing it with a new hash coding, because hash's dont actually work like that, especially since the million+ records in the DB dont lend themselves well to rainbow tables or brute force reversing in any sane amount of computational time.

Nebulon Gate
Feb 23, 2013
I'm very close to writing a book on Laravel myself. I am not pleased with Code Bright.

Fuoco
Jan 3, 2009
Without having access to the actual devices, what would be the best way to test a website on mobile devices (Android, iPhone iPad etc..)?

Edit: Actually, I can see now that BrowserStack covers mobile as well. That may do the trick.

Fuoco fucked around with this message at 12:03 on Jun 18, 2013

Sereri
Sep 30, 2008

awwwrigami

Fuoco posted:

Without having access to the actual devices, what would be the best way to test a website on mobile devices (Android, iPhone iPad etc..)?

I guess using a webkit browser like Chrome or Safari might go in the right direction though there might still be differences. If that isn't enough, Android has an emulator in it's sdk, an iPhone Simulator comes with xCode (though that's OSX only I guess).

duck monster
Dec 15, 2004

Winter is Cuming posted:

I'm very close to writing a book on Laravel myself. I am not pleased with Code Bright.

I'll hold off on my opinion of code bright till he finishes it. Its clearly unfinished (and says as much)

But yeah, write a book dude. Laravel owns, but its documentation leaves a lot to be desired. Theres a lot of 'assumed knowledge' problems where it seems to assume you already know things you couldn't possibly know if you don't hang out on the forums and/or irc.

Adbot
ADBOT LOVES YOU

kedo
Nov 27, 2007

Sereri posted:

If that isn't enough, Android has an emulator in it's sdk, an iPhone Simulator comes with xCode (though that's OSX only I guess).

This is what you want to do for device testing. Xcode is super simple to install and use, though the Android emulator takes a bit more setting up and doing poo poo via the command line. Here's some setup instructions I saved from a random website (wish I could remember which) with instructions:

quote:

Because it’s painful, here’s how I did it on OSX :

1) Download Android SDK

2) Install it
code:
/Android/android-sdk-mac_86
cd /Android/android-sdk-mac_86/tools
3) Setup the Emulator
code:
./android
• A Java app opens
• Click SDK Platform Android 2.1 and download Archive for MacOS X
• Click Virtual Devices and New
• Give a name (AndroidTest), set the target to the SDK you downloaded
• Set Size to 512
• Create the AVD (Android Virtual Device)

4) Run the Emulator
code:
./emulator -avd AndroidTest -partition-size 128
5) Setup the Hosts file
Set the device to read-write
code:
./adb remount
./adb pull /etc/hosts
Edit the hosts with the following
code:
nano hosts
10.0.2.2 localhost
./adb remount
./adb push hosts /system/etc
Congratulations you should now be able to browse the hosts

However I think you can skip 5.

  • 1
  • 2
  • 3
  • 4
  • 5
  • Post
  • Reply