- 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
- Frequently Asked Questions
- Light Reading
- Education and References
- Tools
- Frameworks
- Content Management Systems (CMS)
- Design Principles and Theory
- Freelancing Advice
Oh My Science fucked around with this message at 00:28 on Jun 18, 2013
|
#
¿
Jun 15, 2013 03:44
|
|
- Adbot
-
ADBOT LOVES YOU
|
|
|
#
¿
Apr 27, 2024 16:10
|
|
- 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.
- I have a [complicated problem], how do I begin?
Post for help and list the following:
- Your Skill Level
- Any necessary project requirements ( languages / frameworks )
- Include source code whenever possible ( JSFiddle )
- When in doubt, shop it out - Goons for Hire - Work For Hire
- 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.
- 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.
- 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
- 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.
- 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.
- 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.
- I need freelancing advice...
Please goto the Freelance section. You may also want to check out The Business of Art thread over is CC.
- I need help with hosting.
If you have any questions about web hosting please refer to the Hosting / Web Hosting MEGATHREAD.
- 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.
- 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
- 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>.
- 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
|
|
#
¿
Jun 15, 2013 03:44
|
|
- Oh My Science
- Dec 29, 2008
-
|
Light Reading
Cross Browser Fundamentals
- 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.
- 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.
- 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.
- 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.
- 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.
- 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
- 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.
- 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.
- 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.
- 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.
- 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.
- 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.
- 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
- 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.
- 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.
- 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.
- 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
- 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.
- 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.
- 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.
- 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
|
|
#
¿
Jun 15, 2013 03:44
|
|
- 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
- Can I use...
Compatibility tables for support of HTML5, CSS3, SVG and more in desktop and mobile browsers.
- 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.
- 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
- StackOverflow
A question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
Education
- Team Treehouse
Learn to build websites, create iPhone and Android apps, code with Ruby on Rails and PHP, or start a business.
- 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.
- Code Learn
Rails Tutorials - Learn by Creating An App Right In Your Browser.
- Code School
Code School teaches web technologies in the comfort of your browser with video lessons, coding challenges, and screencasts.
- 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.
- CSS Tricks
A collection of articles that cover CSS and common web design tools & techniques.
- 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
- hack Design
An easy to follow design course for hackers who do amazing things. Highly recommended.
- 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.
- Typography Quick Tips
A selection of short typography tips from Harry Roberts
- Grids Are Good
Right?
- Massimo Vingelli’s Design Canon
Mailing Lists
- CSS Weekly
Weekly email roundup of css articles, tutorials, experiments and tools.
- Javascript Weekly
A free, once–weekly email roundup of JavaScript news and articles.
- HTML5 Weekly
A free, once–weekly roundup of HTML5 and browser technology news and links. CSS3, Canvas, WebSockets, WebGL, Native Client, and more.
- Responsive Design Weekly
A free, once–weekly round-up of responsive design articles, tools, tips, tutorials and inspirational links.
- Sidebar.io
The best design links, every day.
- 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
- A list Apart
Explores the design, development, and meaning of web content, with a special focus on web standards and best practices.
- Smashing Magazine
A vast collection of web design & development articles.
- CoDrops
Use them more for their collectives, but they tend to showcase some fairly interesting stuff on the main blog.
- 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
|
|
#
¿
Jun 15, 2013 03:44
|
|
- 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
- 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
- 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 +)
- 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:
- 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:
- 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
- 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:
Browser Dev Tools
- Chrome Dev Tools
Bundled in Chrome, they provide web developers deep access into the internals of the browser and their web application.
- Firebug
The most popular and powerful web development tool. Primarily used in Firefox you can find lite version for other browsers.
- 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
- Visual Website Optimizer
- Usability testing
- Optimize Mobile & Tablet Websites
- Heatmaps & Clickmaps
- Behavioral & Geo Targeting
- Split URL Testing
- Powerful Multivariate Testing
User Testing
- 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
- Google Analytics
Considered the bare minimum for analytics these days. Install it on every site you create.
CSS
- CSS3 Please
The Cross-Browser CSS3 Rule Generator
- 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.
- 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
- Transmit
- Cyberduck
- FileZilla
- WinSCP
Data Visualization
- 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.
- 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
- 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
|
|
#
¿
Jun 15, 2013 03:44
|
|
- 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
- Twitter Bootstrap
Bootstrap is a sleek, intuitive, and powerful front-end framework for faster and easier web development.
- 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.
- Zurb Foundation
The most advanced responsive front-end framework in the world.
- Gumby
A flexible, responsive CSS framework, powered by SASS.
- Pure CSS
A set of small, responsive CSS modules that you can use in every web project.
CSS / SASS / LESS Frameworks
- Bourbon
A simple and lightweight mixin library for Sass.
- Compass
Compass is an open-source CSS Authoring Framework.
Grid Frameworks
- Neat
A lightweight semantic grid framework for Sass and Bourbon.
- 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.
- 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.
- 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
- 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.
- Maria
The MVC framework for javascript applications.
- 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.
- 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.
- 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
- jQuery UI
A curated set of user interface interactions, effects, widgets, and themes built on top of the jQuery JavaScript Library.
- 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
- 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.
- Code Ignitor
A proven, agile & open PHP web application framework with a small footprint.
- Cake PHP
Makes building web applications simpler, faster and require less code.
- Kohana
An elegant HMVC PHP5 framework that provides a rich set of components for building web applications.
Ruby Frameworks
- Ruby on Rails
An open-source web framework that favors convention over configuration. - Ruby on Rails Thread
- Sinatra
Sinatra is a DSL for quickly creating web applications in Ruby with minimal effort.
Python Frameworks
- Django
A high-level Python Web framework that encourages rapid development and clean, pragmatic design.
- Flask
A micro framework for Python based on Werkzeug, Jinja 2 and good intentions.
- 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
|
|
#
¿
Jun 15, 2013 03:45
|
|
- 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.
- 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.
- 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.
- 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
|
|
#
¿
Jun 15, 2013 03:45
|
|
- 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
|
|
#
¿
Jun 15, 2013 03:45
|
|
- Oh My Science
- Dec 29, 2008
-
|
Freelancing - coming soon!
Oh My Science fucked around with this message at 03:56 on Jun 15, 2013
|
|
#
¿
Jun 15, 2013 03:45
|
|
- 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
|
|
#
¿
Jun 15, 2013 03:45
|
|
- Oh My Science
- Dec 29, 2008
-
|
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.
|
|
#
¿
Jun 15, 2013 18:12
|
|
- 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
|
|
#
¿
Jun 15, 2013 18:40
|
|
- Oh My Science
- Dec 29, 2008
-
|
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.
|
|
#
¿
Jun 17, 2013 05:44
|
|
- Oh My Science
- Dec 29, 2008
-
|
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.
|
|
#
¿
Jun 18, 2013 00:33
|
|
- Oh My Science
- Dec 29, 2008
-
|
Can anyone recommend a good mobile UI framework? As in, something better/faster/smaller than jQuery-mobile?
If you do not require the native app look & feel try bootstrap / gumby / foundation.
Are there any specific features you want?
|
|
#
¿
Jun 24, 2013 07:06
|
|
- Oh My Science
- Dec 29, 2008
-
|
It strikes me as a really nice visual element someone else might have solved though. Does anybody have any ideas?
Check out http://mixitup.io/
specifically this demo http://mixitup.io/demos/template
Oh My Science fucked around with this message at 01:54 on Jul 4, 2013
|
|
#
¿
Jul 4, 2013 01:46
|
|
- Oh My Science
- Dec 29, 2008
-
|
Any general advice, guidelines or guides for how to make your web api not suck over long stretches of time?
Not specific advice, but the Ruby Rogues talked about API's in one of their podcast's. May be worth a listen if you're looking for general resources.
http://rubyrogues.com/073-rr-apis/
|
|
#
¿
Jul 6, 2013 00:44
|
|
- Oh My Science
- Dec 29, 2008
-
|
Google Maps seems like an obvious choice? Does anyone have a good tutorial or something they could share?
The Google API docs are fairly decent, unless you're looking for framework specific tutorials. They provide code samples for every feature in V3 of the API.
https://developers.google.com/maps/documentation/javascript/
|
|
#
¿
Jul 6, 2013 00:46
|
|
- Oh My Science
- Dec 29, 2008
-
|
I asked this in the recommend me a tablet thread a while ago and wanted to ask here as well:
Tablets (iOS, preferably Android) still aren't suited for web development are they?
No, get a MacBook Air, maybe a Chrome Book if you can live with the Chrome OS.
|
|
#
¿
Jul 7, 2013 21:48
|
|
- Oh My Science
- Dec 29, 2008
-
|
Has anyone used Zepto.js in production? I'm hesitant because it doesn't support anything older than IE10 but I could provide a fall back to jquery like they suggest.
|
|
#
¿
Jul 7, 2013 22:10
|
|
- Oh My Science
- Dec 29, 2008
-
|
I'm going to post the brand spanking new Freelance / Finding Work section in a few days but I am looking for input from those that freelance, are in charge of hiring, or outsource their work.
What I am looking for:
- Portfolio Examples
If you're involved in the hiring process and review portfolios please (if you can) provide examples of good portfolio sites. A small write up of why they are good, and what they could improve would be nice if you have time. Common mistakes.
- Interview Tips
Again, those that are in charge of interviews or hiring a small write up about your companies hiring process. I realize this may be different for everyone but general tips and advice is what I'm after. I know we have a Newbie Programming Interviews thread, should I just link to that?
- Where to find jobs / contracts
I find that most of my work comes from referrals, has anyone had luck with places like odesk?
- Random things I may not think about
General freelancing advice, horror stories, success stories, etc...
Thanks in advance if you can contribute.
Oh My Science fucked around with this message at 09:19 on Jul 9, 2013
|
|
#
¿
Jul 9, 2013 09:16
|
|
- Oh My Science
- Dec 29, 2008
-
|
My problem is that I would like the background image in headerContainer to be 'on top' of the background color in headerContent, but z-index and !IMPORTANT don't seem to do anything to the sorting.
If Kedo and I read this correctly it is impossible. Please provide a sketch or rough outline of what you want to achieve and we can probably make a suggestion or two.
I just looked at kedo's jsfiddle, is that what you want?
Oh My Science fucked around with this message at 03:58 on Jul 10, 2013
|
|
#
¿
Jul 10, 2013 03:53
|
|
- Oh My Science
- Dec 29, 2008
-
|
I'm currently rewriting how Awful (for Android) creates the HTML of the parsed forum threads and since it's gonna rely a lot more on CSS this time I'm looking for web-developers to tell me that my HTML/CSS/JS is bad, my choices in layout/styling are bad and how to improve them.
If you want to help please send me a PM. Having access to an Android phone is not really necessary since it's all HTML though I guess it might help.
Quoting this to get it a little more exposure. I don't have time to help and people that actually use android might care to help a little more than I would (iPhone for life).
|
|
#
¿
Jul 11, 2013 20:10
|
|
- Oh My Science
- Dec 29, 2008
-
|
... and then in the html, I have, outside the container div a div with that class, yet it won't fill up the edges of the screen. It's like it's still obeying the grid, even though it's outside of the container class. Any ideas?
Two possibilities.
1. Are you using a CSS reset or normalize? If not the default padding and margin settings may be messing with your design.
2. Check out http://neat.bourbon.io/examples/ and inspect the first example. You will notice a div with the class 'zero' which, I think, does exactly what you want.
Unless you can provide more code it's hard to be more specific.
Oh My Science fucked around with this message at 04:20 on Jul 12, 2013
|
|
#
¿
Jul 12, 2013 04:17
|
|
- Oh My Science
- Dec 29, 2008
-
|
Has anyone else pissed off family before? My brother wants to to make his website for free because "It would be good for your portfolio" and I told him to gently caress off.
He just bought a giant 55" TV too.
|
|
#
¿
Jul 17, 2013 04:45
|
|
- Oh My Science
- Dec 29, 2008
-
|
My policy is to never work for family unless the project meets all of the following requirements:
He has begun live streaming the games he plays with twitch and would like to have a dedicated website. Before we reached the payment discussion I tried to evaluate the scope of the project and what he was expecting. Let's just say it would require a decent amount of time and resources on my end.
So, if we use your requirements:
A. He could possibly make money, but doesn't have the viewers yet.
B. Although he has no idea what he actually wants it to look like, my rough ideas were not to his liking.
C. He wants it done within 4 weeks.
He fails every one of them.
Before he left the discussion I was pretty blunt. If he was serious about this project and it is what he wanted / needed to make his streaming more successful, he would have to invest more than his vague ideas. Without a monetary commitment on his part he could very well abandon the project at anytime without loss.
|
|
#
¿
Jul 17, 2013 19:19
|
|
- Oh My Science
- Dec 29, 2008
-
|
Looks like I get to work with a restaurant to replace their old site, and they want some kind of reservation system. I could make it myself, but I would prefer to use an existing service in order to save time and potential headaches on my end. Anyone have a suggestion? Ideally it would have some sort of API.
If you know of an amazing restaurant website feel free to share, I have a lot of creative freedom on this project. If it helps, it's a traditional indian / tandoori restaurant.
Oh My Science fucked around with this message at 20:20 on Jul 22, 2013
|
|
#
¿
Jul 22, 2013 20:12
|
|
- Oh My Science
- Dec 29, 2008
-
|
OpenTable and CityEats are the two most popular/widely used reservation systems. Sadly, as far as I'm aware neither have APIs. You just have to embed their little widgets.
I just found seatme.com, looks like a compelling option after reading about their services. Check it out, let me know what you think.
|
|
#
¿
Jul 22, 2013 21:02
|
|
- Oh My Science
- Dec 29, 2008
-
|
I'm pretty sure the offending element is the img, try setting its width to a percentage when viewing in portrait or landscape mode.
I even made a thing, http://mobilelanding.herokuapp.com/, which I think does exactly what you want minus any fancy styling. It uses the portrait and landscape media queries to target mobile devices. Note that it doesn't do anything when using your desktop browser.
|
|
#
¿
Jul 23, 2013 05:39
|
|
- Oh My Science
- Dec 29, 2008
-
|
OpenTable is pretty much the industry standard ...
Yup, I spent my day researching reservation services and OpenTable's prices are indeed insane. I'll for sure bring them up as an option but after reviewing seatme.com I think they are the better choice. $99 flat fee, no charge per confirmed registration, and their website / product doesn't look like poo poo.
|
|
#
¿
Jul 23, 2013 06:59
|
|
- Oh My Science
- Dec 29, 2008
-
|
Sorry to have so many stupid/annoying questions. I'm still pretty new to all this.
I threw the source code for my example up on github here. You will notice that I used text-align:center; and removed those extra divs which are unnecessary for such a simple design.
I didn't notice any problems with the layout upon first load on a mobile device but you could always wrap the desktop styles in a separate media query.
|
|
#
¿
Jul 23, 2013 17:41
|
|
- Oh My Science
- Dec 29, 2008
-
|
I'm more looking for some ideas on how to organize some information and less looking for critiques...
I think there are two things that stand out most to me.
1. You cant click on the entire row to expand the content, I found myself being stupid on an iPad having to click the link.
2. The expanded content looks out of place inside the .well, having a different color background than the title looks awkward. You also need more white space.
I played around with bootstrap on codepen and came up with http://cdpn.io/rfgdJ. It addresses both issues. Please note the mock up is incredibly rough and that you may want to refine how I nested the rows if you choose to do something similar.
Oh My Science fucked around with this message at 05:28 on Jul 24, 2013
|
|
#
¿
Jul 24, 2013 04:59
|
|
- Oh My Science
- Dec 29, 2008
-
|
This is what Adobe is moving towards, buying everything month to month and not being able to pay just one price for software. I hate it.
I've been a creative cloud user for about a year now and it's the bee's knees. I no longer have to worry about out dated adobe software, and I was able to use my old product key for a discount.
Plus I have access to everything, and some of the preview apps they are working on are cool. Once they release typekit functionality on the desktop it will be even better.
|
|
#
¿
Jul 24, 2013 18:46
|
|
- Oh My Science
- Dec 29, 2008
-
|
It's time to talk about email campaign services! I have used Mailchimp in the past and really liked it, why would I pick someone else?
vv That's what I thought. I was looking into SendGrid but unless someone can outright tell me they are better I'll stick with mailchimp.
Oh My Science fucked around with this message at 21:34 on Jul 25, 2013
|
|
#
¿
Jul 25, 2013 21:24
|
|
- Oh My Science
- Dec 29, 2008
-
|
SEO question.
A local print ship I frequent has asked me about SEO companies and I have no good recommendations. They tossed around the name Annzo Corporation and my initial research shows that they may not be very reputable. Can someone with more experience in this area give me advice? I have made some recommendations after reviewing their website but these are all simple changes like adding proper alt tags, they are interested in more I think.
|
|
#
¿
Jul 26, 2013 21:55
|
|
- Oh My Science
- Dec 29, 2008
-
|
... I don't think there's really as much to it as some people want everyone else to believe.
So it turns out they were asking if they should renew their contract with Annzo for $300 a month... yeah.
After reviewing their site the HTML structure is a mess, they are missing essential tags, and the only optimization I can see are the meta tags. Oh, and the reason they asked is because an Annzo rep called while I was in the store trying to get them to sign up for another 6 months.
|
|
#
¿
Jul 26, 2013 23:03
|
|
- Oh My Science
- Dec 29, 2008
-
|
Ask them how they found Annzo.  says they contacted your client out of the blue saying things like, "Did you know your Google site ranks lowly in Bing results?"
Nailed it.
|
|
#
¿
Jul 27, 2013 03:48
|
|
- Oh My Science
- Dec 29, 2008
-
|
I just noticed this as well, I'm sad that they still use LESS. drat those js users.
|
|
#
¿
Jul 29, 2013 22:07
|
|
- Adbot
-
ADBOT LOVES YOU
|
|
|
#
¿
Apr 27, 2024 16:10
|
|
- Oh My Science
- Dec 29, 2008
-
|
So uh, anyone just dropped in RC3 on a live project to see how much is broken yet?
Assuming you're talking about Bootstrap 3 RC1 it's not possible. The grid has changed completely.
|
|
#
¿
Jul 29, 2013 22:42
|
|
#
¿
Jun 15, 2013 03:44
