Automate exporting images from Dynamic image file - javascript

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!

Related

What is a Scratch File?

I am currently trying to figure out all the functions that my IDE has, and I have come across a predefined folder when I create a project that is called 'scratches and consoles'.
The IDE only allows me to create Scratch Files but I donĀ“t know what that kind of file is and what Is its purpose. Could someone give me a hand with this?
It's something like temporary notes with ability to highlight/format your code.
Sometimes you may need to create temporary notes or draft up some code outside of the project context. Instead of switching to a different application for this purpose, you can use scratch files and scratch buffers.
You can read more about it at JetBrains - Scratch files.

Dynamically loading interactive SVGs into Vue.js project

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.

Send Information inside a .png image then extract it through javascript?

After searching around in Google for a while I have not had any luck or guidance in my question.
I want to be able to load up a website using javascript, ajax, in order to reduce the amount of requests needed by the server from the client. My goal is to embed/encode data within an image such that only the client needs to request this image through ajax call, and then be decoded to find the js, css, and other files needed. Then the js, css and other files will be inserted into the DOM.
If I can get the above to work then I could have a lot of flexibility on how my webapp is loaded and be able to notify the user how close the webapp is to being ready for viewing.
Currently my problem is that I cannot find how I would encode the data within an image.
Even if this is not the way to be going about serving up a webapp my curiosity is getting the best of me and I would just really like to do this.
Any guidance or pointers would be greatly appreciated!
Also: I am learning Python so if you know of a python module that I could play with that would be cool. Currently i'm playing with the pypng module to see if this could be done.
To be frank. Don't do that.
The brightest minds on earth use other methods to keep the number of requests and response time down. The most common technique for minimizing the number of requests is called Bundling. In short, you just copy'n paste all js files after each other into one big js file and all the css files into one big css file. This way you need to download two files, one js and one css. Better than that is usually not worth the trouble.
To further keep response times down you usually minify your js and css files. This is a process where all white space, comments, etc are removed and internal variable names are made as short as possible.
Finally you can serve both js and css files as gziped files to further reduce the file size to transfer.
There are many tools out there that does both bundling and minification for you. Google and pick one that suits your other tooling support.

jquery structure - one function per file

I am primarily a c# programmer. I have recently been getting into some jquery development. when I am working on applications in c#, I create a new class file (.cs) for every new class that I create.
How do people generally structure their jquery/javascript applications. I would like to reuse some functionality across pages, so do I put each function in it's own .js file? or is it best practice to group like functions into files? I can't see putting each on in it's own file as that would create many calls to import individual file into a page....
How are other people handling these types of situations.
Thanks for any thoughts.
EDIT - I should have mentioned that I am beginning to look at unit testing with QUnit and figured it would be good to have proper structure of my project to better facilitate unit testing.
If you DO put them all in separate files, you would want to have a build script that combines and minimizes them into a single one (or just a few) so you do not have 500 Javascript files to download to your browser.
I would suggest putting your common functionalities to a util.js file and then arrange your javascript codes according to functionality.
However it is not a good practice to have lots of js files included in every page, thus you might consider combinin the files into a single file and minifying that final js file. this way you would have optimized your final product while being able to unit test functionalities separately.
I generally keep all plugins into their perspective files but functions I create I tend to place into a "global.js" file that the entire site will pull from. Then I don't have to worry about pulling in specific files when a need a specific function. It will all be in the global.
Put it all in one file. Multiple HTTP requests are more expensive than big files, plus you're assured that the file containing the function you need is already loaded.

how do I share configuration data between Javascript, Python, and CSS in my Django app?

I have Javascript, Django templates, Python code, and CSS which all work with the same configuration data. Where's the best place to configure it?
Specifically, I have a browser-side entry widget in Javascript which controls an embedded Java app. When the user is done, the Javascript asks the Java applet for an image of the result, which will be embeded in the HTML. The user can specify if the image should be small, medium, or large. That image and the choice are sent via an AJAX call to my Django app, which does some input validation. When the HTML is displayed it includes my CSS, which has special a[href^=http://internal.server] markup to show those images in a different way than other images.
While someone asked a similar question, the answers were either: "use a DSL" or "use a format like XML or JSON." Neither of which work with CSS.
The two solutions I came up with are:
put the data in Python and have it generate the HTML through a Django form/template. Also have Django dynamically generate the Javascript configuration and generate that CSS.
I don't like this because I would rather serve all my Javascript and CSS statically.
Introduce a build step where configuration data gets applied to a template to build the respective Javascript, HTML, CSS, and Python files.
Which makes things more complicated because I'll have special "*.in" or such files which build the actual files, and everyone will have to watch out that they know which files are the ones to edit.
What do you do?
Use JSON. Generate the CSS dynamically, using caching to reduce load.
I think an really good approach would be to effectively have a DSL expressed indirectly via JSON data structures laid out using some sort of coding convention, coupled with a separate build step that used that to create the configuration files needed. If the tool(s) for this build step were written in Python, creating, maintaining, and enhancing it or them ought to be relatively easy.

Categories