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
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.
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.
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.
What kind of a tool would you recommend for JavaScript compression and/or obfuscation? A google search comes back with a lot of online tools, but I am not sure how to gauge their effectiveness/usefulness.
Is there a tool that you would recommend for this?
Thanks,
There are many tools that transform Javascript in something different. I currently classify these tools in the following objectives:
Minify: make the code smaller by removing comments, renaming variables...
Compress: Compress using non destructive compression of javascript
Optimize: Make the code run faster (ex: Closure)
Obfuscate: Protect the code
My order has some meaning behind it. Because generally the higher level includes all be features below.
So a good Javascript Obfuscator is able to minify, compress, optimize...
Many tools do some of these levels well individually. They can be combined making them more effective but my experience has shown that combining several such tools make it a nightmare to try and pin point a problem.
My suggestion for a good overall Javascript obfuscator would be to use jscrambler.com
For optimization and minification google closure (has sugested by aepheus) is a excellent solution.
Closure Complier: http://code.google.com/closure/compiler/
YUI Compressor: http://developer.yahoo.com/yui/compressor/
Come to mind. You'll want to take them for a spin with your own code, as a lot of factors come into play with minifying. Basically, see which one makes the smallest file (and verify that your code works as it should).
UglifyJS: https://github.com/mishoo/UglifyJS
The page contains a comparison with other minifiers if you scroll down a bit. One of the most notable parts is this:
UglifyJS is the fastest to run. On my laptop UglifyJS takes 1.35s for
DynarchLIB, while YUI takes 2.7s and GCL takes 6.5s.
It written in JavaScript, so no need for separate runtimes etc. It plays nicely with both node.js and npm.
you can also try http://openwaf-js-mini.appspot.com ,slightly better than YUI Compressor
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 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.