We Keep Coding

Tailwindcss background image not showing on deploy

Both the background image and navbar background don't render. I'm using Vercel and Netlify to deploy and have used the build command as well as the publish directory setup on both sites. Tried checking my code since I'm using Tailwind for the first time, but I still can't figure out what went wrong?
The repo: https://github.com/d4nky/Tailwindcss-Portfolio
The site: https://inspiring-carson-2c8f1d.netlify.app
Any piece of information would be appreciated :)

You have to put img directory in your dist too, because for now, you are using path /img/background.jpg which refers to repo /dist/img/background.jpg file, that doesn't exist.
You can check that in the console, which says:
GET https://inspiring-carson-2c8f1d.netlify.app/img/background.jpg [HTTP/1.1 404 Not Found]
And the same for logo_size.jpg.
You could put those directories directly to dist directory by hand, or use some bundling tool like webpack to automate things.

Because the site can't find the resources.
The links you specified in index.html are relative ones, the absolute path of which are path/to/index/ + value/of/src. For example your page will actually look for the main.js in repo-root/dist/dist/.
So you should either properly store and link your resources, or learn to use bundle tech, e.g. webpack.

Symfony 3.3 - where should I put CSS and JS files?

THIS link suggests that /app directory contains all configuration, templates (.html.twig files) and translations, and the /src directory contains PHP code.
However, HERE we can see that .css and .js files are loaded from /src/AppBundle/Resources/public directory and not /app/Resources/public directory. What is the best practice? How should I professionaly approach this problem, and where should I keep all the templates, .js and .css files?

I like to put css and javascript that serve for general purposes in /app/Resources/public and the ones specific to the concerned bundle in /src/YourBundleNameBundle/Resources/public. Like that when I want to see a code specific for a bundle I will just go to that bundle , when it's a general purpose code I would be sure that it's in the root. I have seen expert people doing it and it makes sense for me.
It's a matter of choice and there is no right and wrong answer.

the best practice is to put your css and js files in your bundle particularly in folder that you called "public" (yourBundle/Ressources/public/css/yourStyle.css)
and make sure to run this command before
php bin/console assets:install
and To avoid typing this command each time, I recommend you make a link (a kind of shortcut), by adding the active parameter:
assets:install --symlink
So, the web /bundles/folderBundle actually points to src/yourBundle/Resources/public
On Windows, you must run the command prompt in administrator mode

Is there a way to link an external library from outside the project directory?

I have a jquery library in my project but need to put it in linux /usr/share/js directory and not inside of my project directory.
Is there a way to do a linking in the index.html?
Including in the index.html:
<script src="/usr/share/js/jquery.min.js"></script>
doesn't help, as it looks into my working dir and I don't have a 'usr' dir
/usr/share is in the root directory and not in my working one. I don't use any php or the stuff, is there a simple way to solve this?

You need to back out of the file you are currently in by using the ../ command which goes back one directory. Depending on how many files deep the index.html file is in your project, you may need more then one like so:
<script src="../../../../usr/share/js/jquery.min.js"></script>
This will direct you 4 files out of where your index.html file is located, you may need more or less depending just do some searching through your directories and adjust accordingly.

You can create symlinks for files like this, to allow access to serve from not your document root.
The web server is also needs to be configured to follow symlinks when serving.
More info for Apache:
http://httpd.apache.org/docs/2.4/urlmapping.html

How would I refer to a javascript file in a c# library project from an ASP.NET MVC project?

normally I would go
<script src="~/Scripts/Controls/SomeScript.js"></script>
and this finds SomeScript.js in the "Scripts/Controls" folder of the same project that the ASP.NET .cshtml page is in.
The time has come however to share the javascript file between two projects. I need to move it to a library project.
What would the value of the src attribute have to be to locate the javascript file in a completely different project in the same solution? Do I have to do something else? How is this problem usually solved?
I have tried "Copy to output directory" on the "SomeScript.js" properties page and this copies the script and its containing folder to the 'bin' directory. However chrome reports "Not allowed to load local resource" when trying to access .js files in the bin folder.

The folder which your scripts exist must be within the project tree, especially if you are planning on publishing the app to a remote server. Visual Studio provides an option to Add Existing Items as a link, which would allow you to symlink items stored outside your project tree into a folder within your project tree. Any changes to the original file will be reflected in your project; however if the file is deleted, the link will remain, broken.
You must also add the following to the end of the project .csproj file before the Project close tag.
<Target Name="CopyLinkedContentFiles" BeforeTargets="Build">
<Copy SourceFiles="%(Content.Identity)" DestinationFiles="%(Content.Link)" SkipUnchangedFiles="true" OverwriteReadOnlyFiles="true" Condition="'%(Content.Link)' != ''" />
</Target>
This edit to the .csproj file will cause visual studio to actually copy the linked file to the location of the link at the end of the build.
In this way, you can still reference ~/Scripts/Controls/SomeScript.js in your project.

use this reference to resolve your issue: Server.MapPath("."), Server.MapPath("~"), Server.MapPath(#"\"), Server.MapPath("/"). What is the difference?
seems that the best way would be to use / at the beginning - that is the root directory.. you can manage your way down from there

Deployment Strategy for Require JS Optimized/Concatenated Website Files

My question is partly technical and partly about deployment strategies and workflow. I built a project using Require JS. It includes a number of distinct js modules, and is built upon Kirby CMS. The directory structure of the project is something like this:
project
assets
styles
style.css
js
scripts
script1.js
script2.js
script3.js
vendor
app.js
images
fonts
content
...
kirby folders
....
The file app.js is called in the footer of my site's page like so:
<script data-main="/assets/js/app" src="/assets/js/vendor/require.js"></script>
It configures RequireJS by calling the requirejs.config() function and then calls the main script file that loads everything else using RequireJS's requirejs() function.
I've used RequireJS' s optimization tool to compile the project in such a way that the optimized files are all dumpted into a directory called dist (a name I just picked up from this tutorial). So in the end dist contains a replication of every directory and file under assets, only optimized, and the file app.js is a concatenated and optimized version of all the js modules that I have in the project. So far so good.
What I am unsure about, however, is how I'm the supposed to make use of this new secondary version of all the code. What for instance if I want to deploy a version of the site to the production server without all the source js files? Each time I deploy the site, I would need to go through my code and in every place that I referred to files under the assets directory, I would need to replace that with dist. I deploy using git and beanstalk. One way to do this would be to manage different branches for staging, production, and development, in which the production and perhaps staging branches have references to the files under dist, but this seems awkward.
So my question is given this kind of optimization set up, which if you look at the tutorial linked above is one way to do this, how then do you manage the switch to the optmized version of everything seemlessly, without having to go back into your code and change everything up? Is there some key part of the process that I'm missing here?

Each time I deploy the site, I would need to go through my code and in every place that I referred to files under the assets directory, I would need to replace that with dist.
I've looked at the tutorial you've linked to and do not see how it is true for the tutorial. The tutorial does not use absolute paths, so should be deployable from dist just as well as from the directory that contains the pre-optimization sources. If you cannot do this for your application, that's because you've done something different from the tutorial. Your script tag, for instance, shows absolute paths.
So the solution is to design your application to avoid absolute paths. This way, you won't have to change paths when you deploy from dist. I'm using this very method to deploy optimized and non-optimized versions of one of my apps.