Develop Reference

Can I use php-cgi to serve an HTML which refers to CSS/JS files from the parent directory?

tl;dr
My understanding is that php -S localhost:1234 -t some-dir serves the page some-dir/index.html at localhost:1234, expecting that CSS and JavaScript (and other files) that the page requires are in some-dir/., not in some-dir/../..
How can I start a server that serves some-dir/index.html and looks for the required files in some-dir/../..
Long version
I have a directory structure like this:
index.html
css
├── some.css
├── style.css
└── sheets.css
docs
├── index.html
└── a lot of other stuff.html
js
├── some.js
├── javascript.js
└── files.js
And obviously anything referred to from within the main index.html is referred via a path containing no ../.
On the other hand, docs/index.html is automatically generated by KSS, a library for documenting CSS modules, and given it position in the tree, when it refers to the very same files as the main index.html, it does so by prepending ../ to the paths. For instance, if the main index.html has
<script type="text/javascript" src="js/some-script.js"></script>
docs/index.html has
<script src="../js/some-script.js"></script>
Now, for the purpose of debugging JavaScript code launched upon user interactions with docs/index.html, I start the server like this
php -S localhost:1234 -t docs
because docs is the directory where the index.html is, that I want the server to present; but the problem is that the server looks for the files (referenced by the HTML) in the wrong directory, kind of like it strips off ../, so I get errors like the following:
GET http://localhost:1234/css/main.css net::ERR_ABORTED 404 (Not Found) section-containers.html:12
GET http://localhost:1234/js/swipeable-container.js net::ERR_ABORTED 404 (Not Found) section-containers.html:412
How can I serve an index.html which uses scripts and stylesheets (are they all together called assets?) from a parent directory?

How do next.js applications optimize for mobile screens?

I just figured out that since I built my app with Next.js, I can't use CRA's folder structure framework to build or diagnose my application.
Unfortunately, I'm completely at a loss at the moment with respect to how Next.js applications are supposed to properly scale a website for mobile devices. I've always been under the impression that it was the job of index.html to do that (which I've written, but my app can't seem to bother to find it or use it). I've looked at the default folder structure for a Next.js app:
├── README.md
├── components
│ ├── head.js
│ └── nav.js
├── next.config.js
├── node_modules
│ ├── [...]
├── package.json
├── pages
│ └── index.js
├── static
│ └── favicon.ico
└── yarn.lock
source
but there doesn't seem to be a place for index.html.
My question is simply, how do Next.js apps optimize for mobile screens? Are they even supposed to have an index.html, and if so where? And how do favicons work, because I've created the static folder and put the favicon inside, but I'm pretty sure to have the favicon do anything, it has to be referenced by a file (conventionally index.html).
repo

Next has this Document component which you can customize to your own likings.
As their official docs say:
Is used to change the initial server side rendered document markup
You can use it to customize your head tag content as you would do anyway in your index.html.
Don't forget to add <meta name="viewport"content="width=device-width, initial-scale=1.0" /> in head tag if you want your app to use media queries.
Next project is not supposed to have a particular index.html file. Instead, the initial page is supposed to be a component located specifically in pages/index.js.

Lists all Blobs inside Azure Container with directory-level support using web front-end

I'm currently working on developing some set of codes to display all blobs inside specified Azure Container using web front-end. I'm expecting the final output to be something like this:
I started by creating a dummy storage account and populates it with some dummy files for me to play around with.
https://alicebob.blob.core.windows.net/documents
├── docx
│   ├── 201801_Discussion.docx
│   ├── 201802_Discussion.docx
├── xlsx
│   ├── 201801_Summary.xlsx
│   ├── 201802_Summary.xlsx
│   ├── 201803_Summary.xlsx
├── 201801_Review.pdf
├── 201802_Review.pdf
├── 201803_Review.pdf
To develop file listing function, I'm using Azure Storage JavaScript client library from here and put all the necessary codes (.html and .js files) in Azure Static website $web container and set index.html as Index document name and Error document path in the Static website configuration.
https://alicebob.z23.web.core.windows.net/
├── azure-storage.blob.min.js
├── azure-storage.common.min.js
├── index.html
The problem is that the function to do the listing is only either listBlobsSegmentedWithPrefix or listBlobDirectoriesSegmentedWithPrefix. So, in my case, I assume it wouldn't work straightforwardly to list all the blobs and directories in a well-structured / tree format.
My current approach is that I trick the code to keep using listBlobDirectoriesSegmentedWithPrefix until there is no more directory to list inside, then continue to list using listBlobsSegmentedWithPrefix
So far I'm quite satisfied that my code can list all the Blobs at the leaf-level and also list all the directories if it isn't on the leaf-level. You can take a look at the blob listing here and feel free to go for 'View Source' to see the codes I built so far.
The only problem that I face is that this set of code fails to list the Blobs if it wasn't on the leaf-level. For example, it fails to list these blobs on alicebob storage account:
├── 201801_Review.pdf
├── 201802_Review.pdf
├── 201803_Review.pdf
This is an expected issue as I'm not running listBlobsSegmentedWithPrefix if it isn't on the leaf-level. The reason is that it will produces the output with something like this which isn't what I want:
├── docx/201801_Discussion.docx
├── docx/201802_Discussion.docx
├── xlsx/201801_Summary.xlsx
├── xlsx/201802_Summary.xlsx
├── xlsx/201803_Summary.xlsx
├── 201801_Review.pdf
├── 201802_Review.pdf
├── 201803_Review.pdf
Any suggestion on how to overcome this issue? The real implementation would involves a huge amount of data so I think a simple if-then-else wouldn't be efficient on this case.
sorry for the long description but I just want to describe my problem as clear as possible :)

There's an option called delimiter when listing blobs. Let's get down to code.
blobService.listBlobsSegmentedWithPrefix('documents',null,null,{delimiter:'/'},(error,result,response)=>{
console.log(result);
console.log(response.body.EnumerationResults.Blobs.BlobPrefix);
})
With delimiter /, listing operation returns results of two parts.
result, contains info of blobs under the root directory of container, e.g. 201801_Review.pdf, etc. in your case.
BlobPrefix in response body, contains directory names of single level with delimiter.
[ { Name: 'docx/' }, { Name: 'xlsx/' } ]
Use BlobPrefix as prefix, we can continue listing content of current subdirectory.
blobService.listBlobsSegmentedWithPrefix('documents','docx/',null,{delimiter:'/'},(error,result,response)=>{
console.log(result);
console.log(response.body.EnumerationResults.Blobs.BlobPrefix);
})
Basically point 1 result is enough, you don't necessarily have to use BlobPrefix to refactor your code. See more info in section Using a Delimiter to Traverse the Blob Namespace of list blobs.

You can also do this with out the overhead of the whole storage api using a fetch request as follows.
fetch("https://cvworkshop.blob.core.windows.net/telaviv-bw/?restype=container&comp=list")
.then(response => response.text())
.then(str => new window.DOMParser().parseFromString(str, "text/xml"))
.then(data => console.log(data));

Website on server is treating file paths differently than local version

using Localhost, my HTML/CSS/JQuery stack website works perfectly fine, however, when uploading to a server, things break. Specifically, the src paths from within the JavaScript files. After being uploaded, the index HTML can find the appropriate JS files through the script tags. However, from things go wrong from within those JS files that are linked...
Keeping things big picture, I have JS files that use paths to certain imgs, or other files. And those JS files are stored from within folders. So you have
.
├── index.html
|
├── js
│ └── components
│ └── functions.js
└── img
└── circle.jpg
In index.html, functions.js is called. From within functions.js I have a path to a circle.jpg for example. On localhost the path is "../../img/circle.jpg" because it treats components folder as the current working directory (cwd) "you are in components folder working in the functions.js file, now go out and into img folder"
However, on the server, cwd is the root folder. I guess that is because function.js is called from index.html and because index.html is in the root so it says "to get to circle.jpg you have to go "img/circle.jpg"
WHY? This doesn't make sense, to have it work on the server I now have to change all my file paths from within the JS files. This apparently isn't an issue on the src paths in the HTML, because it recognizes the tags and runs the Javascript. It breaks when trying to find the imgs based on the paths you give them. And it can't find the images in the JS based on those paths because of the above reasons. Instead of changing all the paths in the javascript how can I fix the imminent issue of the server treating the paths differently than the local version?

Add a <base href=""> tag in the head section of index.html
<head>
<base href="/">
<!-- other head items -->
</head>
If your index.html is the root path of the domain (like http://someurl.com/index.html), above should work. Or if the index.html is in a subfolder, provide the subfolder path as the href value. like,
<base href="/subfolder/">

Copy NPM module/library to distribution folder using Gulp

Most web applications these days include various prebuilt libraries e.g. Backbone.js.
I want, when I compile my web application with Gulp, to output a single compressed JavaScript file of the library/module I installed using NPM e.g. backbone-min.js.
For example, when you install Backbone.js from NPM the following is installed into the node_modules folder:
.
├── backbone
│   ├── LICENSE
│   ├── README.md
│   ├── backbone-min.js
│   ├── backbone-min.map
│   ├── backbone.js
│   └── package.json
I want to be able to run gulp compile and get the following result in my web application distribution folder:
.
├── index.html
├── scripts
│   ├── backbone-min.js // this is the file I want to copy or generate
│   ├── main.min.js
The way I see it Gulp either needs to either:
compile and minify the library/module and write it to a file called backbone-min.js to the scripts folder, or
copy the backbone-min.js in the backbone module folder to the scripts folder.
What is the best way of doing this?

Short Answer
gulp-useref concatenates all the file references in your main .html file encapsulated by <!--build:js /lib.js--> for javascript files and <!--build:css /lib.css--> followed by <!--endbuild-->
The result will be:
index.html
├── scripts
│ ├── backbone-min.js // this is the file I want to copy or generate
│ ├── main.min.js
as you and every good developer wants it to be.
Long Answer
My recommendation would be to use Bower as your app dependencies manager and npm as your development dependencies manager.
Use gulp-wiredep to automatically inject dependencies as you install/uninstall them and that way you don't have to maintain library css and js files in your index.html.
Uset gulp-inject to automatically inject your own css and js files as your add/remove them. This will result in never ever having to maintain application dependencies manually.
With wiredep, inject and useref you never have to touch your dependencies again.
This is what my index header and end of body look like:
<!---------------------------- Bower Managed Styles ----------------------------->
<!--build:css css/lib.css-->
<!--bower:css-->
<link rel="stylesheet" href="../bower_components/..."
<!--endbower -->
<!--endbuild -->
<!---------------------------- Application Styles ------------------------------->
<!--build:css css/app.css-->
<!--inject:css-->
<link rel="stylesheet" href="content/css/bootstrap ..."
<!--endinject-->
<!--endbuild-->
<!--------------------------- Bower Managed Javascript ------------------------->
<!--build:js js/lib.js-->
<!--bower:js -->
<script src="../bower_components/ ..."> </script>
<!--endbower -->
<!--endbuild -->
<!-------------------------- Application Javascript --------------------------->
<!--build:js js/app.js-->
<!--inject:js-->
<script src="app/ ..."> </script>
<!--endinject-->
<!--inject:templates:js-->
<!--endinject-->
<!--endbuild-->
The comments are tags used by the tools I just mention in order for them to know where to insert the dependencies of interest.
My application entry is a single template reference. Needless to say I never visit index.html. I never have a reference to a file that does not exist. I never have a file that does not have a reference.