Schema for handling duplicate filenames on user import? - javascript

I am developing a presentation style app (e.g. Powerpoint, Keynote) in Electron where the user can import their image files into a project folder and I am wondering how to handle the issue of potential file name conflicts.
I don't want to be reinventing wheels: are there schema, design patterns or frameworks for this sort of thing? For example on OSX, iPhoto uses date, time of import plus seemingly random(?) ids to organize imported images.
I will be implementing this is Javascript but am interested primarily in how to approach the problem so language doesn't matter.
iPhoto Library:

There are two approaches I am aware of:
Unique folder names
By placing each file in a folder with a unique name, you can preserve the original file name and avoid any clashes. This method will make things much easier for you if you want to store associated files (e.g. image thumbnails) with the original.
You can generate unique folder names using a UUID, which is a string that is virtually guaranteed not to clash. There are plenty of Node.js libraries to generate a UUID, such as uuid. Or just use any random string and check if the folder already exists to be sure.
Alternatively, as in the example you gave, the folder names could be generated according to date and time, but you have to be sure that you will only add one item at one point in time, or add random folders under the date as in the iPhoto example. The dated folders in iPhoto are probably not necessary when they are also using random-strings as folder names, but they would make it friendly for a user who is manually browsing through the folders, and there may be performance benefits if iPhoto needs a directory listing for a specific date.
You need to store a reference to both the folder name and the file name in order to load the file, but of course this could be one string e.g. "6c84fb90-12c4-11e1-840d-7b25c5ee775a/image.jpg".
Unique file names
Another technique is to rename files to have a unique name whenever there is a clash. This is the approach used by the macOS Finder when you create new folders or duplicate a file. This approach is usually best if the user may interact directly with the files, as they will not have to navigate through folders with meaningless names.
As a simple example, let's say I am adding photos of penguins, and I've already added a photo called penguin.jpg.
Now I add a second photo which also happens to be called penguin.jpg.
Check if penguin.jpg exists. It does, so...
Generate a new name for the file, penguin-2.jpg
Check if penguin-2.jpg exists. It doesn't, so...
Save the new file as penguin-2.jpg
If I add more files also called penguin.jpg, the program needs to keep incrementing the name until I find one which does not exist (e.g. penguin-3.jpg). This should not cause any performance issues unless adding thousands of files with the same name (which seems unlikely).
I found a Node.js module which can handle this approach for you: uniquefilename

Related

Why is there multiple period in file names?

This is a really basic question ig, but why do people name their files with multiple periods in them, i.e., "blogs.models.js"
Because is not recommended to have white spaces in file names, some people also use "-" or "_" to separate the words of the file name.
https://developers.google.com/style/filenames
https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/Dealing_with_files
Primarily, and generally: To make it clear what type of data is in the file.
(Sometimes a tool might use the format of the filename for other purposes, e.g. a build tool might look for all the *.models.js files to collect all the models together without them having to be specified explicitly in an index file).
I don’t think its any different than using “-” or “_”.
You can categorise files of same type but with different format neatly.
Generally you’ll see files like
*.config.js
*.controller.js

NextJS GetStaticPath create heavy static data?

I have a page that display hotel information by id, so I use getStaticPath to create thing like /hotel-info/542711, 542711 is hotel-id
Problem is There are thousands of hotels, And NextJS will pre-build all that thousands page???? (Increment Static Generation)
Is there problem with memory due to store too much pre-built page like that? ...
GetStaticPaths() pre-renders all the paths only at build time.
And depending if you choose or not to pre build all of them, then yes, you could have a thousand pages pre built in your build folder.
So unless perfomances are very very important to you and you have you own a data center to store all of that, I wouldn't recommand doing that.
You don't have to use GetStaticPath() and you if you do, you should use it wisely.
A good use case for this would be to generate only your most popular pages and leave your less popular ones to be generated once they are actually visited for the first time.

i18n in React with .properties files

I am in the middle of (large)app rewrite into Reactjs-redux and internalization is next problem.
Ive been looking at some currently available libraries (redux-react-i18n , 18n-react) but none of them seems to fit.
Why ? Because my localized strings are stored in separate .properties files and this cannot be changed. But there is a possibility generate whatever format from this in compile time
Example en_US.properties:
key1=This is a constant string
key2=This is a string with {parameter}
....
and similar with de_de.properties file and so on
Also language can be change only on page refresh so this is making it little bit easier
My question is how to approach this problem. My first naive approach is generate some static constant js object available in app globaly but im feeling thats against javascript best practises also no idea how to deal with parametrized strings
As im fairly new to javascript id like to hear any ideas
In case somebody has same problem
I ended up writing script converting .properties files into json files
Then in React code i created HOC component wich gets keys(or namespaces depends on how you organize your json files) as parameter and fetches values from server
These keys are usually for whole page but sometimes also for single component if it makes sense
All it takes is one more HTTP request you can also cache result
Hop it helps

How do I swap my array file in my restartless firefox extension? Kind of updating the array elements not the entire extension?

I have a restartless firefox extension in which I have an array which is used for some decision making. The elements of this array can change overtime.
Currently I have my bootstrap.js file which calls various functions present in another .js files. And within one of these functions is this array.
I am trying to figure out how can I restructure my code in such a way that I can update this array (not entire extension) after installation.
What I have thought of is; to pull this array out into a separate .js file and plan to swap this when I make the array 'update' after installation.
However, I still don't understand how to do it. The way I understand is, I bundle my add-on as an .xpi it gets installed and then is it possible to do a partial upgrade?
I don't want to push another .xpi for this. And I assume that will also make the user aware that the extension has updated. Since, the array updates can be frequent this can look really weird for the user updates happening every week or so.
Can I do this over an API that will fetch the updated array and swap it in the code ( Do .push to existing array ) ? Basically, I want this to be invisible to the user and lightweight as well.
How can I do it in a better/correct way? If I am asking for something not presently possible let me know.
Anything that you include in xpi, will be updated when there is a new install of that xpi.
As you mentioned that the updates would be frequent, you could possibly fetch the array from a remote end-point. This could be a json file or rest call whatever you think is more suitable. To improve performace, you can fetch array from remote end-point, store it in user profile directory and only fetch it again based on some expiry period (e.g. every week or fortnight).
Be aware in that case, if your extension needs to be distributed through AMO, the review process may require some additional steps e.g. including a privacy policy, barring use of eval on array contents.

individual variables versus objects

I'm re-developing a very simplistic javascript include I made a while back to be used in several similar html sites. We use a lot of footers on our pages but they tend to be the same copy used over and over but with different dates and other small variations. So, on each page I create an array of variables. These match up with variables found in an external .js file containing a for loop to match up the requested variables that contain paragraphs of footer copy. This eventually is put together to make a div full of footer copy.
My question is this, is it better to send in the specific dates and other variable changes within the copy along with the variable array as one object or should i continue to just send in the variable array alone, create the footer in the html and then insert the dates/changing data in a separate .js file (this is how I've been doing it till now). One way keeps all the data together and seems pretty clean, but the other separates out the different steps (ie step one is creating the footer, the second step puts in the varying info like a date or bonus amount, etc).
sorry if this is confusing, hope i got the basic idea across. Just trying to explore my options since I have the unique opportunity of previous usage of this script and getting a clean slate to make a fresh version.
I think the best way to do this is on the server-side code.IF you are using php use could include the file directly like this.What include does is it pull code from other files and shows it on the page where the include is written.
include('name of file');
Since you have different pages with different footers you could edit this footer file to show different results for different pages.This is a standard way to doing things.Popular frameworks like Wordpress do something similar to this to display the footer

Categories