I have an old project built years ago with spaghetti jQuery code, which I'd like to update to use a JS framework (mostly for the usual reasons: better scaleability, better state management, cleaner/more maintainable code, etc.). I find Vue.js especially intriguing.
The project allows the user to load any of a large selection of .svg files from a directory on the server into the DOM dynamically, then interact with them (mostly clicking to change fill/line colors of individual path elements, handled by jQuery plus a plugin).
After some research and experimentation, I haven't found a simple way to do this with Vue--as best I can tell, I would need to manually edit each .svg file to put the (many) bindings in place to allow for discrete parts of the .svg to have interactivity. This is a dealbreaker due to the large number of files and the need to quickly add new ones.
My vague question (sorry) is: can anyone point me toward a better solution? (A framework better suited to this? A way in Vue to replicate this kind of interactivity with a plain .svg? A way to automate modifying the .svg files to have Vue bindings on their arbitrary numbers/types of svg elements?)
Thanks--
The easiest way in Vue to add interactivity is to convert them to components
but this won't work in your situation because the svg's are uploaded by users.
So you'll need to find or write a component that adds this feature to your app.
Take a look at https://github.com/seiyable/vue-simple-svg for inspiration.
Related
I am creating a web page using html,css and js and I am not following any framework so I have only page (that was the requirement). So I have lot of javascript in my page and I want to move my javascript to another script file. So I have two quesions:
1) What's the best way to do that?
2) Is there any way to call my functions as a property like we can do with node_modules.
var printMsg = require('printModule');
printMsg.print();
or in jquery ($.whatever())
The currently best way to organize your project is through using Webpack. It's allow you to module your js code easily and they a have plugins for almost everything. Take a look at their guide as knowing webpack will make your life easier. Using their guide, It might take you 5-6 hours depend on your dedication.
That's ES6 and knowing webpack will solve like 99% of your problems.
Here's my webpack-simple-template. You can take a look at how I set thing up.
I am going to create a postal card (i don't know which one is better photoshop, After effects or ...). i want it to be dynamic. I mean using some config file(text or json or ...) next to it, provide the value of the dynamic layers and properties. then apply the config file to the postal card file from outside of the application, using a script. is it possible?
1- which one is better photoshop, After effects or illustrator or ...?
2- how should be the main script that applies the configuration file to the postal card file? javascript? C#? or sth else?
thank you very much
I would use InDesign: itcan be scripted and has useful custom "templates" through Master Pages. It is also the Adobe product best suited for creating pdf files which is ideal for print. Photoshop is more for image manipulation, Illustrator is for vectors (often logos), and After Effects is for intense movie editing (special effects) -- so that won't help you very much.
Create your main script in javascript (because it is cross platform and well-known which means more people to answer your questions). Using javascript also helps to deal with transferring your data. You can use JSON to inject your data into the InDesign file.
This is possible, it just requires attention to detail.
Good luck!
I am creating a site that uses Java Script and CSS from jQuery and jQuery Mobile. Right now I am not hosting any of the files but rather referencing URLs on the jQuery site. This has the disadvantage that I have to load resources from jQuery every time the page loads and I cannot alter the files myself. I want to switch to hosting this stuff locally and would like to go about it in an organized and scalalable fashion. Is there any better way to do this than just copying the code from the links and pasting it into my own local .css and .js files?
Modifying the jQuery source is not ideal as you would be required to maintain it with every new release. If there is additional functionality you would like to add, it is better to create jQuery plugins. As for managing your project with respect to CSS and JavaScript files, most IDEs will generate a series of folders following the convention of JavaScript and CSS files being placed in a scripts and styles directory, respectively, under your project root. On top of this, it is wise to catalog your changes with some form of source control, such as git. There is plenty of documentation on the web on how to use this tool, and explaining how to use any form of source control is far too broad for an answer on StackOverflow. There is a certain level of mental discipline you must maintain, however, especially if you are manually managing the structure of your web project. This will come with time and experience as to what works best for you.
I have a fairly large web app and am using JQuery with JQuery UI, a couple JQuery plugins, a couple other javascript widgets. And DataTables. These pieces have been piling on throughout development and what I now have is a substantial mess of files and folders. Some are duped, some I cannot tell if they belong at at all, but the biggest problem seems that some of these pieces rely of certain assets and folders having specific relative paths to one another.
So my question: What is a folder/file structure that will work. DataTables in particular seems most picky and easily breaks when I move stuff around. I expected to be able to find this in the JQuery docs, and if not that then via some googling, but neither have panned out.
Thanks in advance.
With big JS applications, I would recommend using JS MVC framework like backbone: http://documentcloud.github.com/backbone/
I am developing a extjs application, and I am just a starter.
It's quite different develop mode for me, and I feel puzzled.
My first question is about client-end architecture, I'm developing a little app now, so I wrote all js codes in only one html file, what if I need to develop a huge app?
like this: [Article Manage(leaf in tree)] -> [CURD List(Data Grid)] -> [Edit Article(Dialog Box)]
There will be lot of leaf in my tree, so there are many XXX Manage.
What should I manage my client-end js files(file structure or something else), and how to load these files dynamically? Is there any exists demo?
um.. maybe what I really want to ask is:
How to put my code for every module into different js files and 'include' the dynamically?
I've got the answer, just use loader property of a container component, this method fit me well. Thanks to all of you.
There are no patterns set in stone, but here's one way to Write a Big Application in Ext 3.x.
Another good resource for ideas, generic to JavaScript, is Nicholas Zakas's video on Scalable JavaScript Application Architecture on YUI Theater.
In my mind the big things to do are:
Write standalone components (think: UI container, data structure, etc) with no dependencies to other components on the page.
When you want to two components to interact, have their parent container wire them together.
Have some kind of logical directory structure for development (doesn't matter what exactly), splitting out each of your "components" into its own file -- even if you plan on combining them into a single file for deployment.
Not sure if I correctly understood your question, but I'll try to answer. For bigger applications use MVC pattern which allows you to split your application to components such as Stores, Controllers, Views etc. Then you can easily send data from server in JSON for example (using server-side technologies - php, java,...) and read it by Stores proxy. If you look into Samples & Demos they're also loading some bigger structures using php script which returns JSON.