What should be the best thing to do with Twitter's bootstrap css/javascript library?
link (online), clone, fork or download it?
I would like to always have the latest updates on my website but I would like to customize small things like width size of a the tabbed navigation feature, some colors, etc.
Fork it. You will be able later to easily update to the new version, and merge in case you changed something. I suppose you are using github, so also push watch button, so you will always be aware of issues, updates, fixes of this project on your dashboard. Also you will be able to contribute to that awesome project.
Don't link directly, because one day they will change something, and this could break your app.
Also I suggest to look at LESS, and not compiled CSS version of library, in my opinion it's easier to customize everything there.
Update:
Probably easily update was too strong expression, and was referred only to bug fixes and minor updates. In a case of major version updates with breaking backwards compatibility there couldn't be easy and perfect solution. In this case, only if you really think you need this update, you can create new branch, update twitter bootstrap there, and than start a painful process of fixing your code. With branches you will be able work on your main app with old and working bootstrap, while part of your team will refactor code to become compatible with the new version of the bootstap(even if you only one person on the project, it's also good idea to test new solutions in the test branches, to not mess up working code).
Related
I am using a javascript library called marked. I made a few small changes to the code to customize something (I wanted __this__ to underline stuff instead of bolding it).
What is the best way to deal with the issue of keeping the library up-to-date in my project over time? It may be a hassle to manually add my change every time I update.
I would make a branch of marked for your changes. this would be where you could put your customizations. then when the marked library is updated and you are ready to integrate their changes into yours you would migrate their changes into your branch and merge their code into yours. if they ever manage to fix the thing that you made you changes for, then you can always switch to the main branch.
I am trying to use a bootstrap theme (Worthy) as the base for a website. The theme works very well, however I am having problems adding this scrolling timeline feature to it.
Here's what I know:
I can get the demo of the timeline working
I can get the template working
I can get the timeline implemented in the template w/ the .css working
I CANNOT get the animations of the timeline working in the template
I have traced the issue to one of the timeline's required files, namely a customized version of modernizr. (The template uses the standard version of modernizr). When I remove the the reference to the custom modernizr, the site generally works, but the timeline animations do not. When I add the reference to the custom modernizr back in, all of the site's content disappears.
Does anybody have any suggestions of how I can go about diagnosing and debugging the problem? I know that I have not posted any code, as I'm not sure what is and is not relevant. If somebody can please point me in the right direction, then I can follow up with more targeted questions.
UPDATE: I have also tried removing the template's version of modernizr and only using the one from the timeline, but that also results in all of the site's content disappearing.
Thanks a lot!
Modernizr has an build tool that you can customize to be exactly what you need it to be. What you would want to do is get a list of all of the detects that you need, then build a new custom one that contains everything.
Let me start by saying I have read plenty of questions and blog posts relating to the use of combinations of backbone/jQuery mobile and comparisons of backbone/Sencha, and have actually had my head in this space for some time but still haven't found quite what I'm looking for.
I'm very familiar with Sencha and have used it for wrapped (phonegap etc.) apps in the past, and I really like it. However for a smaller code base for web projects and more control over browser compatibility and various other reasons it's not quite appropriate for certain tasks.
When I start trying to engineer mobile (but also desktop and tablet) backbone webapps from scratch I find I miss three key things
General mobile 'init', filling the screen etc. (although this is the easiest to replicate)
Tabbed, iOS-style, navigation (of course I can roll my own, but it seems silly)
Scrolling - both scrolling a piece of content, but especially the carousel and how the carousel is linked to the tabbed interface
I'm not massively bothered about mimicking each device's native OS style throughout the app, and in fact would prefer to (whilst following some sensible conventions) make them look a bit different.
Ember has flame and I've used that before, that's kind of the thing I'm looking for.
I know I can build up a toolkit of jQuery mobile, custom script, jQ plugins/iSroll, CSS libraries, backbone UI etc. and do like the idea of compiling my own 'stack' but for some reason it just doesn't feel right.
So, to bring this back around to more of an actual question. I guess I'm looking for ideally a single project that isn't specifically linked to a library - and in theory could run on it's own on a statically coded page if needs be (even though that wouldn't be the case for me now). Or perhaps some words from others who have been on a similar journey and perhaps ended up on the mix of libraries I mentioned earlier with why they decided this was the best solution.
I'm not looking to do anything too crazy, say something a bit like the old sencha oreilly example but using some carousels, and I'd cover the multiple devices and browsers with a mix of Responsive CSS and a bit of JS.
I'm going to continue looking at this myself too and report back if I find anything interesting
Cheers
EDIT
While looking into this, I realised its only really the carousel and scrolling that I really wanted from Sencha. I noticed that Cubiq has a nice slideview component that handles the carousel very neatly and with a small footprint. I found a stackoverflow answer about using this with the original iscroll for vertical scrolling. See my answer below for successfully using the two together
How to use iScroll4 with SwipeView?
This would need some tweaking to work appropriately on desktop. and I'd like to control it from a tabbed UI too. Anyway, I'm not near answering my own question but given this has had a couple of upvotes I'd post some of my thinking.
Quick edit
You can attach events for tabs to the slideview https://dl.dropbox.com/u/81328343/scroll/1.html but at the moment, it only animates for next/prev and not direct page (tab) access
Webix
Very big library of components.
I've used Twitter Boostrap with Backbone...
http://twitter.github.com/bootstrap/
My team is in the process of prototyping an application with a rather complex UI. One common feature of the application is a number of tools which pop up above the main app and allow users to perform some complex operations.
Currently a consultant has wrote some custom code that displays the dialog and blocks the background UI. It works fairly well however we have hit bugs which have taken time to fix. Since we have had some down time we have investigated "better" ways of achieving our desired functionality. I have investigated Jquery UI and was able to establish the same functionality in about an hour. One issue I have had with Jquery UI is constraining tabbing to the dialog box displayed in IE. In IE the the tab index jumps to the background UI and I believe this issue is recognized in Jquery UI. http://bugs.jqueryui.com/ticket/3768
I was able to find a small plugin that fixed this issue for IE, however it broke the tab constraining in Firefox. I was able to make this work by putting a conditional IE check in my JS and only applying the plugin when the browser is IE. Under our current approach we do not handle tab constraining, however our consultant believes we can easily accomplish this.
My question is, which is the better approach, create our own custom solution or use Jquery UI + the plugin + the hack? When are IE hacks acceptable?
I'd go with jQuery UI because at least they'll maintain the library for you, and perhaps eventually release a fix for the issue you're talking about, and then you can remove the hack. Sometimes hacks are necessary. It beats having to maintain an unthoroughly tested custom library.
Writing a framework from scratch is always more difficult and time consuming than hoped because you will run into many issues that you simply cannot account for ahead of time.
That said, I would suggest creating a custom facade over the Jquery UI + the plug in + the hack. This would give you consistent API that meets your project's needs, the use of an established and well-maintained framework and hide some of the peculiarities between browsers. (IE hacks are unavoidable.)
by simple I mean, having buttons:
bold,
italic,
numbered list
bullet point list
indent left
indent right
spell check (obviously supported by ready made js component)
by custom I mean: having custom icons - so really just custom design
no frameworks, written from scratch, lightweight, compatible with major browsers
this is one of the main components of the webapp, so it has to be super lightweight, that's why I don't want frameworks
Unless you are targeting one browser, editors are immensely complicated components to get to work cross browser. There's no reason to do it yourself, unless you want to learn.
Use one of the many available that allow customization:
tinymce,
fckeditor,
wysihat,
others
Writing an editor that works cross-platform can be difficult, but, you should create your own framework as you do it, as it is a large project.
If you just want custom icons, that will depend on how long it takes you to make them, but, to get some basic functionality isn't that hard, probably less than 40 hrs of work if you know what you are doing.
In Unix writing your own shell used to be a rite of passage, in javascript it may be writing your own editor. :)
Where it gets tricky is if I have
<b>some text</b><i>more text</i>
and I decide to remove the tags from this text, then how to fix it will get tricky.
If you want to use only css then it gets to be more of a problem as you are grouping text from span tags, and fixing css classes, while the user is continuing to make changes.
I am dealing with this currently as I want an editor that works in XHTML2.0, and it is not a trivial issue, much harder than it is to do in a desktop application.
I would suggest getting it to work on Firefox 3 and Safari first, then, once it is working, go back and add in the code to get it to work on IE8, and if you want IE7, since MS is pushing IE8 out as a critical update now.
Don't.
Go get something else (any of those Jason mentioned, or e.g. what SO itself uses, WMD). Swap out its images. The end.
Seriously you don't want to write your own editor unless you have a very good reason for it functionally, not just what it looks like.
Read through the first chapters of the emacs tutorial, and you will see that there is not anything like a "simple" editor. But google will give you lots of easy customizable editors.