As it currently stands, this question is not a good fit for our Q&A format. We expect answers to be supported by facts, references, or expertise, but this question will likely solicit debate, arguments, polling, or extended discussion. If you feel that this question can be improved and possibly reopened, visit the help center for guidance.
Closed 10 years ago.
I'm making a site, it's software is based off of the 960gs system. Being a web developer for years this is actually my first run in with it. It comes from the world of typography and is great for designers, supposedly.
But I wanted to know how people felt about it in the frontend web development community as I find it very hard to work with and without the freedom to create elements how I choose, stylings how I choose, and javascript how I choose I cringe at how long it will take to make some of these advanced javascript animations with alpha overlays and rounded corners and so much more if I'm stuck in some grid system's philosophy. I only see it as getting in my way but ripping everything out takes time too. And I've already got a finished render of the photoshop document. And I've already started ripping out the grid system. But my client wanted to know more reasons why I was doing it this way. In a similiar position what would you people do? I really don't like working with the grid system but I'm not blind and can see both it's benefits and detriments. So I'm stuck with what would be the best choice and wondered what other people might think given the same problem.
If not not talking about doing responsive design/development I would suggest going that route, on a grid system as well, kill two birds with one stone. Its a bit tricky at first being somewhat constrained by design, but overall you will catch on and still learn ways to create very unique looks even though its based on a grid system.
I would just look up "responsive web designs" on google for some inspiration. I have gone fully to the responsive side of things, overall your making very clean designs that look amazing across all browsers and devices.
Again I personally think 960px is a bit narrow, but thats my own opinion I generally go 1024-1200px but also design things to still look good (with the fold, and width) on a iphone then on a 24" monitor. If your going responsive dont get hung up on the width, I keep my content always within the 1024px width but always extend elements even out to 1600-2560px wide (for those on 24" monitors). That way if your on a lower resolution display you see everything you need to and nothing more but on a larger monitor you see everything.
Related
As it currently stands, this question is not a good fit for our Q&A format. We expect answers to be supported by facts, references, or expertise, but this question will likely solicit debate, arguments, polling, or extended discussion. If you feel that this question can be improved and possibly reopened, visit the help center for guidance.
Closed 10 years ago.
It seems with HTML5/CSS3, there is a larger push towards CSS-only animations, effects, navigations, etc.
Is this purely because of the tendency of C/Java/etc developers to use JavaScript 'incorrectly' (mostly in a semantic sense, I guess)?
Or is there an advantage of CSS over JavaScript? If so, why would CSS be better? Is it faster?
Also, semantically-speaking, shouldn't CSS only be used for styling/positioning? So is CSS starting to go outside the bounds of what it was designed for?
Is this purely because of the tendency of C/Java/etc developers to use JavaScript 'incorrectly' (mostly in a semantic sense, I guess)?
No, you've just about missed the point by a mile. The main reason people use JavaScript is because they want to support as many browsers as possible. CSS3 is a new technology, which only the latest and greatest browsers understand, whereas JavaScript has been around for decades.
Or is there an advantage of CSS over JavaScript? If so, why would CSS be better? Is it faster?
Yes, because the browser knows best how to make use of system resources to perform animations, and it can do that job best when implementing them natively using CSS (e.g. hardware acceleration). With JavaScript, you're relying on a browser's scripting engine to calculate animations for you, which can get very expensive.
But as mentioned above, the greatest drawback is lackluster support.
Also, semantically-speaking, shouldn't CSS only be used for styling/positioning? So is CSS starting to go outside the bounds of what it was designed for?
Broadly speaking, it has always been meant for presentation — separating that as a concern from content and structure, when HTML was riddled with presentational attributes munged all over the place, spelling development hell for any frontend developer of their time.
All these fancy effects you describe can easily be categorized under presentation (i.e. they don't have anything to do with application logic, business logic, content, data, etc), so it would seem apt that they should be done with CSS. And that brings us where we are today.
So, to summarize:
JavaScript is used when browser support is a foremost priority (and in business applications it almost always is). It is also often maintained as is if it's too costly to convert or migrate to another technology.
Otherwise, CSS is used. Of course, a JavaScript fallback is often provided. You'll often see this in experiments or new/startup projects.
I can't see a VS here. Actually I think a great web app should be made mixing both of them!
I like to think about JavaScript for user interactions and CSS for design. That's how I decide which one I should use for a specific purpose.
Now days you have a lot of great works from brilliant people in order to solve the compatibility issues. E.g.: http://modernizr.com/
One major issue is that not everyone's browser has Javascript enabled. So if you can achieve the same effects with HTML5/CSS3 it has the advantage that it will work on all modern browsers regardless of whether or not they have Javascript enabled.
Yes, css is faster than javascript.
In addition, javascript require additional http request, while you can avoid that if you'll use only css.
As it currently stands, this question is not a good fit for our Q&A format. We expect answers to be supported by facts, references, or expertise, but this question will likely solicit debate, arguments, polling, or extended discussion. If you feel that this question can be improved and possibly reopened, visit the help center for guidance.
Closed 10 years ago.
Hello cool so I think I have a good question for a bit of a debate. I am currently looking for a good method for displaying something important - terms and conditions for a product - so when a client comes to a page in order for them to access to any functionality they need to agree with the terms and conditions. now I know there are some disadvantages with pop-ups like:
If scripting is disabled, or if the browser does not support JavaScript, the pop-up will not work
Search engines cannot follow links to pop-up windows (scripted elements are always ignored)
Pop-ups present accessibility problems
Site management tools (e.g. DreamWeaver) cannot update links to pop-ups if you move the destination page to another section of your site
Many people have pop-up killers running that close the window the moment it’s opened
In Mozilla, there is an option to stop pop-ups opening in the first place
Not the thing I am worried about is that lightbox might not be compatible withsome of the older browsers. here in africa people are not super up-to date I have seen people using ie-4 (shivers down the spine). but we are only really concerned from ie-7 up. has anyone used lightbox before? or have any suggestions for something of this nature? I am use there must be a lot of use case for a feature like this.
What do you think?
as a webdeveloper myself i suggest you to use lightbox over popup anytime.
Your concern are right but i would rather focus on a couple:
rarely javascript is disabled nowaday, if it is often it's becouse of
company firewall and they wouldn't let the employers access
your site in first place. Yes, some people is still using old browser but it's diminishing overtime, if you are really concerned about it you can, with some more work, create both a popup and a lightbox and drive it trough the meta user agent check.
popup are incredibly annoying for the people becouse:
a) you have to click or to "tab-dance" on a different window that the one currently
active. b) as you stated most of the browser now block popup as a
default feature, so there are high chance that people won't even go
through the step of allowing the popup of www.mycoolsite.org to
work. c)it can kill any google analytics tracement (if you want any)
while lightboxes it's a normal html element in the page and thus
traceable via javascript event bind.
lightbox is amazingly easy to use and customize, offering you the
chance to develop your idea without compromise.
In your situation and technical requirements (IE4, no-javascript), you shouldn't use either.
Put a page in front of product access where the user needs to agree to terms.
That is the most pragmatic approach, business value before eye candy.
In fact, I would even go as far as to say that for required terms agreements, both lightbox and popup are anti-patterns, they just needlessly complicate matters for both developers and end users.
As it currently stands, this question is not a good fit for our Q&A format. We expect answers to be supported by facts, references, or expertise, but this question will likely solicit debate, arguments, polling, or extended discussion. If you feel that this question can be improved and possibly reopened, visit the help center for guidance.
Closed 9 years ago.
Hey everyone — HTML5 Boilerplate and HTML5 Reset are two HTML, CSS, and JavaScript templates with a lot of modern best practices built-in. Their goals are largely the same:
Fast, robust, modern Web development
HTML5 (duh!)
Cross-browser normalization (including support for IE6 and mobile browsers)
Progressive enhancement and graceful degradation
Performance optimizations
Not a framework, but the starting point for your next project
Obviously, they're very similar in function. In what ways are their implementations different (for example, perhaps IE-specific CSS fixes are achieved using different techniques)? Are they at all different in scope? It seems like HTML5 Boilerplate is a bit larger (build tools, server configuration, etc.), but it's hard to know where it goes beyond HTML5 Reset when it comes to the actual site that people will see.
In general, both projects set out to provide a solid starting point for developers working on web projects. They both get rid of a lot of the tedious, some-what error-prone boilerplate that many developers find themselves re-creating for each project. The details in how they go about it are slightly different, but for the most part, they achieve the same results.
HTML5Boilerplate has, as you noted, added in some build-script pieces to help developers follow best practices to speed up their pages in terms of server-side items, such as far-future expires headers, etc. where-as the HTML5Reset project is more focused on the semantics, content, and styling. For example, HTML5Reset has more example structure for the content of the page in HTML5 (to help show people how to use some of the new elements), whereas HTML5Boilerplate does not.
The response-time and page speed parts that HTML5Boilerplate includes get more and more important as more users find themselves on mobile platforms, and as Google increases the effect page response times have on page rank. There are lots of papers that show a small increase in the page response time has a measurable negative impact on how your site is used and perceived (especially in an eCommerce setting...often a 100ms slower page will get percentage less things sold).
On the CSS front, the majority of the reset style section for both projects is very much the same, with some minor differences in what the baseline is set to. The IE specific fixes, however, are largely the same, with HTML5Boilerplate asserting a bit more control than HTML5Reset over how IE styles some things like form elements (ie. check box / radio buttons and valid / invalid states)
Two major CSS areas that HTML5Boilerplate covers that HTML5Reset does not are common helper classes to assist with making sites more accessible, such as .hidden and .visuallyhidden, as well as some substantial adjustments to the print styles that serve to both make printing more similar across browsers, as well as some cost-savings and accessibility things like making background images transparent (to not waste toner), and adding the actual URL to links and the title to abbreviations.
I would highly suggest reading through both projects' info and how they do things in a side-by-side comparison because the similarities, and also the differences (and the reasoning behind them) is quite informative and has helped me to better decide what parts of each I wanted to use.
Ultimately, just like any "library" sort of project, you as the developer need to understand what you are doing and probably should tweak your baseline to meet the particular needs of the project.
You can use either one...
Like #murtaugh said (http://5by5.tv/bigwebshow/45) you don't need to learn anything when u first start with Reset. In my experience, working in an R&D department, when you need to demo or do quick iterations you can use the Reset (or Boiler if u already know it). When I need to build the product for deployment I turn to Boiler just because has more stuff.
Works for me but now because I know both I can easily use either one.
I actually almost want to say using the traditional reset.css is the best... I find no problems with compatibility in my mobile apps. However, I am developing these apps using the jQuery mobile framework.
So I guess it's really conditional as to what kind of tools you are using. Phonegap doesn't seem to have any problems compiling my code into all OS. And viewing my source code in emulators looks perfectly fine...
So I really don't see the point of a boilerplate unless you are trying to achieve polyfills.
I work in an environment where previous developers roped the company into using both JQuery and Prototype...and it's a mess. Not only do we have to work out of compatibility mode, but just think of the extra overhead that it causes. When debugging, Prototype "hijacks" debug messages in Firebug, which leads to even more work. And the maddening part is that I've been undoing this mess for months and am just starting to get close to being done with it....and just when I'm about to pull the plug on Prototype I always seem to find another section that relies on it...
It's for this reason that I argue every time against combinations of frameworks that have similar purposes. For example, no matter how cool you might think YUI Grids is, if you load the entire YUI Framework you best not be doing Jquery, Moo, or Prototype. You'd be just needlessly bogging yourself down. It kills the load time (which wrecks the user experience) and just gives developers headaches and needless work.
Look at this phase of your site like building the foundation. You have the opportunity to use anything you want to use, but you have to be careful not to "paint yourself into a corner" so to speak. So, use purpose-built and best in class tools that are available based on your resources. Don't just use something to be cute! We're lucky in that many very high quality tools are free, so we have a choice. But know that you're steering the direction of your site for the future, and you might be the person like me who has to deal with the consequences if your decisions are hastily made.
So, unless you're NEVER going to use another framework, I endorse Reset...or even just doing top quality standards compliant CSS.
As it currently stands, this question is not a good fit for our Q&A format. We expect answers to be supported by facts, references, or expertise, but this question will likely solicit debate, arguments, polling, or extended discussion. If you feel that this question can be improved and possibly reopened, visit the help center for guidance.
Closed 10 years ago.
Any decent visualization of a couple different sort algorithms? I'm looking for something I can use in a demo, and willing to write my own (can't be that hard) but would prefer to use someone else's if I can.
NO applets though, the majority I'm finding are applets... Lightweight flash or canvas. I would like the following sorts:
Bubble
Selection
Insertion
O/E
Nice but not needed:
Merge
Quick
Heap
Raidix
Considering the lack of available ones, I wrote my own to answer this question.
I didn't like any of the ones available, so I wrote my own with a not-so-brief explanation to go along with it.
Sorts implemented:
Bubble
Selection
Insertion
Comb (with two alternate endings)
Shell
Quick
Heap
O/E
Radix
Options
Random
Partially sorted
Reversed
Few values
Data sets:
Large (~250 elements)
Small (~50 elements, works well for slower browsers and excellent on mobile devices such as an iPhone or iPod touch)
I've tried to make sure the time differences are as accurate as possible, please let me know if you have any suggestions for improvement.
The visualizations here are pretty good, they seem to be just gifs
http://www.sorting-algorithms.com/
This is a great video. More than just a visualization:
http://www.youtube.com/watch?v=t8g-iYGHpEA
I thought this site was fantastic, there's a few different plot types showing how the different algorithms work. A python implementation of each sorting algorithm is included as well.
Sorting Out Sorting is the classic work on the subject; if you Google the phrase, one of the first hits will be a full-length video. The quality looks a little fuzzy, since the computer video looks like it was made off a video copy of a 16mm print rather than the master (I have no idea if the master still exists) but it's probably a good introduction anyway. I'm glad to see it's available.
The classic visualization is the movie Sorting out sorting.
I just wrote exactly what you were looking for (I think), and was directed to this question. You can find it at: http://visualsort.appspot.com/. It allows you to write code (in CoffeeScript) and then shows what happens. There are a few built-in sorts, and I would be willing to add more if people send me code or make specific requests
As it currently stands, this question is not a good fit for our Q&A format. We expect answers to be supported by facts, references, or expertise, but this question will likely solicit debate, arguments, polling, or extended discussion. If you feel that this question can be improved and possibly reopened, visit the help center for guidance.
Closed 12 years ago.
When we make a website with some interactivity (not whole flash site). should we always find a way JavaScript way before to use Flash? Should we consider Flash a last resort, if possible?
It is true Flash will not be indexed by Search engine. and it will not run on apple devices.
Will javascript also perform better than flash, in terms of speed?
Edit:
And how to know , the effect which we want to achieve and possible in Flash , can be possible in javascript?
Flash has it's advantages. I personally love JavaScript and are always surprised what is possible without Flash. But on todays browsers you can do a lot more with Flash and it ill perform a lot faster.
In the bright future, you might be able to do almost everything you can do with Flash using JavaScript and the canvas element. But until the majority of all browsers will support that, there are some things you can only do with Flash.
I don't use flash on any of my projects anymore and I also have a lot of fance stuff on them. But I also have a fallback for non-JS users and you should also have that for non-Flash users. and because a JavaScript application/widget is build using HTML and CSS, such a fallback is much easier to realize than doing it with flash.
I don't say, that you should not use flash at all, but you should make yourself a list of things you want to have on your website and than search for JavaScript libraries or plugins that can do that.
Isn't anyone bored with this question yet? There are tons of answers/non answers on the internet. One could write a book about Flash advantages & disadvantages, actually many books :) I personally don't think there's a rule you can apply to every project that will let you know if you should or shouldn't use Flash. This is a personal choice , based on the type of project you're dealing with , the languages you're comfortable with and the objective you're trying to achieve.
Some clients won't care about not being able to be accessible on Ipads, some others will. You don't tackle a business site the way you would tackle an artist portfolio. Keep your options opened and , more to the point, master as many languages as you can and when you do, I have no doubt you won't bother with this question again.
so:
should we always find a JavaScript way before to use Flash?
why not? if JS can do it with similar quality & performance, why go Flash?
It is true Flash will not be indexed by Search engine.
Google has made a lot of progress in indexing Flash content so it's not entirely true
and it will not run on apple devices.
False. It will run on most apple devices, of course not the Ipad!
Will javascript also perform better than flash, in terms of speed?
that would depend on what you're trying to do
And how to know , the effect which we want to achieve and possible in Flash , can be possible in javascript?
Some level of understanding of both languages would help
I'd say no, but then again I might be bias.
Flash is good for its own certain points and needs. I think that it has received bad press as it has been misused a lot, it is not a replacement to other languages but has been used that way for quite a while. It should be used when needed, rather than an instant fix to make things look "cool" or "modern".
Flash is good for application based design, multimedia and complex animations. This admittedly is rather fuzzy, but it's hard to define nowadays closer than that. Javascript on the whole is a very powerful tool, and the new HTML <canvas> tags allow a great flexibility on what can be accomplished with JS, CSS and HTML, but requires specific support that isn't guaranteed on all browsers (10% of people still use IE6 supposedly) so it's very much a gamble on who your target market is to what you should be doing.
On the whole if you know what you are doing it is possible to do nearly all that flash does in javascript/css/back end technologies, but it is less encapsulated than a flash example, and as far as I know flash is more efficient in its resource allocation and can take advantage of CPU enhancement, where javascript can't as of yet. It all depends on specifically what you are trying to put together and how complex/portable you want the code to be. If you are putting together a 3d shooter, use flash, if you are trying to move a <div> 5 pix to the right, use javascript.
Flash in itself will run on "apple devices" except for the iPhone and offshoots of this technology (iPad for example) but will still run in safari etc. on macs. and is constantly getting better at being indexed on search browsers, and there are get-arounds for that anyway, so that shouldn't be the reason for stopping you.
Have a look at jquery examples like this page to see some of the fun things you can do, and maybe some inspiration.