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.
Related
I would like to ask if there are any examples related to Polymer's animated pages ( http://www.polymer-project.org/docs/elements/core-elements.html#core-animated-pages ) and how we can build a similar demo using the resources provided in the Angular/material repo (https://github.com/angular/material).
I would like to achieve http://www.polymer-project.org/components/core-animated-pages/demos/music.html but I don't want to use Polymer since I would like to use Angular.
Can you please provide me some directions in order to start?
What they typically do with Polymer is have two connected elements which shows only one and when you perform some action, the other gets shown (from display: none) and animates from certain dimentions to its final form. Sometimes elements also shift but it depends on whether the content is able to move to its new position or not.
You have to work with css transition, transform and display. Sometimes even custom animations. And you are mostly changing multiple divs to their final form. I think the most difficult would be animating colors (from white to pink or from yellow to green for example) as those are most difficult to do (performance-wise).
If you look at the example you've set (final link) you see there's a list of items with a detail div and once you click the item you show the detail and transform the contents to its final dimentions.
Just know that these things are pretty hard if you aren't very much into Angular or HTML/CSS/Javascript.
The framework of Polymer for Web is very much a work in progress and i wouldn't be surprised if it took a few months to get similar results for both native and web.
You can take example from things like this: https://medium.com/tictail-makers/giving-animations-life-8b20165224c5 or https://www.polymer-project.org/apps/topeka/ or http://codepen.io/collection/amheq/ . And don't forget to speed it up by using some bootstrap theme like this http://fezvrasta.github.io/bootstrap-material-design/ or something.
I've been struggling with the same problem as there isn't much to go from right now. You stated the Angular project but that will take time. If you want to do it now, you have to do quite some work (if you do, share it with us), but you might be better of with postponing this until most of the bugs and problems have been solved.
Thats what i'm doing now.
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).
ive seen the plugins etc to create a carousel of images etc, but what i want to achieve is having a content slider.
The content would be approx 500x400px, i was hoping to just give the content a div with unique id, and have it show for, say 6 seconds but if your mouse enters then for animation to hold.
I was thinkin along the lines of using:
$(#id).fadeOut(*time*);
Im on my mobile so its not the best example of code. Id be using set Interval for timeouts, however, do you think i should opt for a plugin? I already use many on my site, so would prefer just this page to use some simple jQuery.
This can be done in jQuery without too much work. You already know about setInterval() and the jQuery animation functions. All you'll need to do is implement mouseenter() and mouseleave() to properly pause and continue the animations. Perhaps a setInterval() every time mouseleave() and a clearInterval() every time mouseenter().
I agree with marcosfromero that plug-ins are great so you don't have to develop the whole thing again, but you stated that you have a lot of plug-ins already, so it could be better to write it yourself so that you gain more experience and have more control over it. I would say the choice to go with a plug-in depends on whether you find one that fits your needs and the size of it (even with minify, size does matter and one must consider blocking while JS files load).
If a plugin works for you, I don't see the point in developing the whole thing again.
Recall that most plugins offer a minified version so size wouldn't be a matter.
You can also use some automatic tool to minify code and join several JavaScript source files to prevent lots of requests.
If you still think the plugin is too big for your needs, consider inspiring yourself with the plugin's source code.
I have been using nagios + pnp4nagios for a while and am happy with the images rrdtool creates. My current task is to create a panel that has some statistics generated by nagios and after a while the statistics change. I'm looking for something like that:
But also able to switch screens automatically. I do know that I can make a timed javascript function that switches the layout after a determined time, but I also want to add effects and other stuff to the picture. Any good javascript library that has it?
such effects can be achieved easily with most javascript libraries. I like jQuery quite well. See the examples in link text for inspiration
I'm wring a custom jQuery plugin based on the awesome jGrowl plugin. I just need it to do a few more things than it already does.
Basically everything is working as I need it to (only tested in Firefox so far) except that if you call the plugin too many times too fast it stops and breaks everything
http://jsbin.com/ofejo/edit
Any ideas about what might cause this?
sounds like you need to implement a callback feature and put the additional calls into callbacks to ensure that the plugin processes before other executions occur.
It's rendering and trying to calculate where to place the block but failing because there's an animation already taking place. (often an animation changes the type of display style being used in order to create the effect and this causes oddities with calculations such as these)
You need to queue the effect, but I'm not precisely sure how you would go about it because you're creating new elements, and there's more source code than I am willing to look through at the moment. Let me know if this helps.
http://docs.jquery.com/Effects/queue