We Keep Coding

Deploy web application

I am new in web deploying. Now I have to manage windows server and every month I need to deploy new version of applications.
I have trouble with javascript. In almost every version of web applications is changed some javascript file (all javascript files are bundled in one minify javascript file).
Most of users use google chrome. Trouble is browser cacheds styles a javascript files. After deploy new version is loaded in browser old version of javascript file.
Does exists any solution how to resolve this problem programmatically in application or some solution after deploy? In best case withou user colaboration (for example refresh cache by CTRL+R)? What is the best practice?
Our application is developed as .NET CORE 2 Razor Pages web application.
Thanks for advice

Use the tag helpers for script and style files, which take an additional attribute append-version, which appends a new query string value each time there are changes in the files.
<link href="/styles/site.css" append-version="true" />
<script src="/scripts/site.js" append-version="true"></script>

If you are using normal html, css, js project then you can add versioning in your js and css libraries and update your index.html with updated version.
Or if you are using node js, react js, angular js then you can use index.ejs instead of index.html and you can add hash code with your js and css libraries like
script1.1ebecec8538d52c8f844.js
script2.2e765bd6680f0c925e8a.js
style1.1ebecec8538d52c8f844.css
style2.2e765bd6680f0c925e8a.css
Or you can also use CI/CD for npm project.

you can make sure that any updates you’ve made to your bundle files will take place immediately for all users with using versioned names like:
<link rel="stylesheet" href="style.css?v=1.1">
The browser will view a file name of style.css as different from a file name of style.css?v=1.1. It also works for script files as well:
<script src="main.bundle.js?version=1.0.1"></script>
But then If you have one giant file, and change one line of code, the user must download that entire file again. Think of a solution, to creating more smaller files, like with splitting out npm packages used in your solution from your own code, to have better release-flow.

If this is about .css and .js changes, one way is to to "cache busting" is by appending something like "_versionNo" to the file name for each release. For example:
script_1.0.css // This is the URL for release 1.0
script_1.1.css // This is the URL for release 1.1
script_1.2.css // etc.
Or alternatively do it after the file name:
script.css?v=1.0 // This is the URL for release 1.0
script.css?v=1.1 // This is the URL for release 1.1
script.css?v=1.2 // etc.
Please check link
Link

How and where to include CSS and JS file in NETTE framework?

I came across a problem to add external files to template in Nette when I used a traditional way of adding external files. Either I added those links to incorrect file (template is not the place where they should be added) or the format used is incorrect.
I tried to implement css and js internally to template (latte) which worked well. However I need them to be added externally.
{block script}
<link rel="stylesheet" type="text/css" href="..\sass\components\file.scss">
<script src="..www\assets\js\file.js"></script>
{/block script}

You should understand that paths on the server’s file system are independent from the URLs you will send to the browser in templates and which the browser will use for further HTTP requests.
For example, in the common scenario with Nette applications, files in / will be searched under something /path/to/your/project/directory/www; some file system paths like everything outside the www directory do not even have a corresponding URL.
By default, Latte does not know which file matches to what URL so it keeps the src and href attributes exactly as written. This means you need to make sure you use correct URLs yourself.
For your convenience, Nette automagically sets the $basePath variable in Latte templates:
{block script}
<link rel="stylesheet" type="text/x-scss" href="{$basePath}/sass/components/file.scss">
<script src="{$basePath}/assets/js/file.js"></script>
{/block script}
The variable will point to your application public root (www/ directory), making coming up with the URLs a little easier.
Also note that you should use forward slashes in URLs and you will probably want to link to the built stylesheet instead of the SASS components.

priv/static/js/app.js updates randomly when changes Vue files - Phoenix/Elixir/Vue.js

I have a vue.js/Phoenix app. I'm trying to understand how to properly configure the frontend assets. I'm having trouble understanding why my priv/static/js/app.js file keeps updating whenever I Change something in other files. I'm trying to research this behavior but I can't seem to find out any information.
app.html.eex
<body>
<%= render #view_module, #view_template, assigns %>
<script src="<%= static_path(#conn, "/js/app.js") %>"></script>
</body>
My basic question is how to structure a vue.js app? The fact that I change something in asset/src dynamically changes something in static/js/app.js seems really strange. Does anybody have resources or answers on what might be happening here or places I can go to learn more?

In addition to what Pawel said, this behaviour might be intentionally configured. There is the watcher specified in config/dev.exs:
watchers: [
node: ["node_modules/brunch/bin/brunch", "watch", "--stdin",
cd: Path.expand("../assets", __DIR__)]]
That would be used in development mode to allow so-called “hot reload”: one does not need to reload the application when some changes in assets are made, app.js will be rebuilt and reloaded automagically.
There is also assets/brunch-config.js file, where one might specify rules of how the resulting app.js is being produced. By default is just compiles everything found in assets to the single javascript file, but this behaviour might be easily changed (e.g. one might exclude anything from being built into app.js and specify their own rules to provide an access to these excluded files.)

As contrary as this might sound, this is exactly the behaviour Phoenix (with Brunch) provides.
The main idea is to implement your JS functionality in assets/js/app.js, then Brunch (http://brunch.io/) as a build tool will take the content, compile/transpile and output to priv/static/js/app.js.
This means, with default configuration that comes with Phoenix, you can use ES6 in your code in assets/js/app.js, but this will be "translated" to executable form (that's understood by browsers), and located in priv/. priv/static is exposed publicly, and this will be the content available by:
<script src="<%= static_path(#conn, "/js/app.js") %>"></script>
To wrap up.
Code in priv/static is not meant to be changed by code, it gets there automatically by changes you put under your source control in assets/.
If that's any help, you can take a look at one of old blog posts about assets in Phoenix here.
Good luck!

I have been happy using webpack with Vue as of now. It uses a similar, configurable, watcher as the one mentioned by mudasobwa. In Webpack if you touch a file that is in part of the bundle it will recompile the needed files only (which can still be many depending on the dependency graph), probably brunch recompiles all.
I also use Yarn to manage npm, and I always include vuex unless it's really something just basic (although not related to file organisation it does help a lot organising vue on any non-trivial apps). Then
/assets
js
entry point files that I use for webpack output into its own individual bundles/apps
folders to organise these, usually /components-views-related, /store-related, /shared-utilities
css
.scss files, divided so that they can be split into "global" styles and individual styles that then are required in each "entry point". Then I use a "general" scss stylesheet on "all pages" and each page the corresponding css bundle where they're needed.
Then on the templates side, I wrote a small, overly complex, brittle, system to just automate the "bundle" that gets loaded on the template (in the html document head) but you can just load each bundle/s where you need them.

Combine and Minify Multiple CSS / JS Files

I am trying to optimize a site performance by consolidating and compressing the CSS and JS files. My question is more about the (concrete) steps on how to achieve this, given a real situation I was facing (should be typical among other developers too, though).
My page references several CSS and JS files like the following:
<!--
It's easier to work on smaller files during development.
Hence, the multiple CSS and JS files.
-->
<link type="text/css" rel="stylesheet" href="/css/main.css" />
<link type="text/css" rel="stylesheet" href="/css/secondary-1.css" />
<link type="text/css" rel="stylesheet" href="/css/secondary-2.css" />
<script type="text/javascript" src="/scripts/js/main.js"></script>
<script type="text/javascript" src="/scripts/js/adapter/adapter.js"></script>
<script type="text/javascript" src="/scripts/js/adapter/title-adapter.js"></script>
For the production release, I'd like to combine the 3 CSS files into one and minify it using e.g. YUI Compressor. But then, I'd need to update all pages that needs these 3 files to reference to the newly-minified CSS. This seems error-prone (e.g. you're removing and adding some lines in many files). Any other less-risky approach? The same issue for the JS files.

Check out minify - it allows you combine multiple js, css files into one just by stacking them into a url, e.g.
<script src="/scripts/js/main.js,/scripts/js/adapter/adapter.js"></script>
We've used it for years and it does a great job and does it on the fly (no need to edit files).

I think the YUI Compressor is the best there is. It minifies JS and CSS and it even strips those console.log statements people use for low-level JavaScript debugging.
Check out how easy it is.
You can start it in an ant task and therefore include it into your post/pre-commit hooks if you use svn/git.
UPDATE: Nowadays I use grunt with the concat, minify & uglify contributions. You can use it with a watcher so it creates new minified files in the background whenever you change your source.
The uglify contrib not only strips console logs, but it also strips unused functions and properties.
See this tutorial for a brief insight.
UPDATE:
Nowadays people step back from grunt und its predecessor "gulp" and use npm as a build tool. Read up on it here.
UPDATE:
So now people use yarn to run npm. No wonder; yarns icon is a cat.
Most current frameworks use webpack to bundle the resources into packages, which then also takes care of minification.

I'd need to update all pages that needs these 3 files to reference to the newly-minified CSS.
Firstly I would say you should have common header. So it will needn't to change all headers at all time whenever necessary. It's good practice to have single header or 2-3. So as your page need you can change your header. So whenever you want to extend your web-app it will be less risky and tedious.
You havn't mentioned your development environments. You can see there are many compressing tools listed for different environments. And you are using good tool i.e.YUI Compressor.

Quick tip for windows users, if you only want to concat files:
Open a cmd at the desired place, and just pipe your files to a file using "type"
ex:
type .\scripts\*.js >> .\combined.js
If the order of your scripts is important, you have to explicitly type the files, in the desired order.
I use this in a bat file for my angular/bootstrap projects
del combos.js
type .\lib\jquery.min.js >> .\combos.js
type .\lib\bootstrap.min.js >> .\combos.js
type .\lib\Angular\angular.min.js >> .\combos.js
type .\lib\Angular\angular-route.min.js >> .\combos.js
type .\lib\Angular\angular-sanitize.min.js >> .\combos.js
type .\app.js >> .\combos.js
type .\services\*.js >> .\combos.js
type .\controllers\*.js >> .\combos.js

I ended up using CodeKit to concatenate my CSS and JS files. The feature that I find really useful is the ability to do the concatenation upon file save; because it monitors the respective CSS / JS assets. Once I got them properly combined e.g. to 1 CSS and 1 JS files, all other files simply can refer to these 2.
You can even ask CodeKit to do on-the-fly minification / compression.
Disclaimer: I am not affiliated in any way with CodeKit. I randomly found it on the web and it has served as a great tool in my development process. It also comes with good updates since I first used it more than a year ago.

It's 2015 year in the street and the easiest way imo is using gulp - http://gulpjs.com/.
Minifying code using gulp-uglify for js scripts and gulp-minify-css for css is very simple.
Gulp is definitely worth of trying

I dont see you mention a content management system (Wordpress, Joomla, Drupal, etc) but if you are using any popular CMS they all have plugins/modules available (free options as well) that will minify and cache your css and js.
Using a plugin gives you the ability to keep the uncompressed versions available for editing, then when changes are made the plugin automatically includes your changes and re compresses the file. Just make sure you choose a plugin that will let you exclude files (such as a custom js file) incase it breaks anything.
I have tried in the past to keep these files up manually and it always turns into a maintenance nightmare. Good luck, hope this helped.

For people who want something a little more lightweight and flexible, I created js.sh today to address this problem. It's a simple command line tool targeted toward JS files that could easily be modified to take care of CSS files too. Benefits:
Easily configurable for use by multiple developers on a project
Combines JS files in the order specified in script_order.txt
Compresses them with Google's Closure Compiler
Splits JS into <25kb chunks where possible since the iPhone won't cache anything greater than 25kb
Generates a small PHP file with <script> tags that you can include where appropriate
Usage: js.sh -u yourname
It could use some improvements, but it's better for my use case than all of the other solutions I've seen so far.

First step of optimization is file minimization. (I strongly recommend GULP for minimization and optimization. Its simple watch solution, installation and all files are compressed at once.Supports all CSS, JS,less, sass, etc...)
OR Old school solution:
1) In general, as a process of optimization, to optimize a site performance, try merging all CSS in one file and compress file by using Compass. That way your multiple requests to static CSS will be replaced with single one.
2) Problem of multiple JS you can resolve by using CDN (or Google Hosted Libraries) so requests go to other server not yours. That way server doesn't wait for previous request to complete before sending next.
3) If you have your own locally stored JavaScript minimize each file by using Brackets plugin "Compress JavaScript". It's basically one click to compress JavsScript.Brackets is free editor made for CSS and JS but can be used for PHP and other languages. There is plenty of plugins to choose made for both front-end and back-end developers. In general "one click" to do all these (so far multiple) commands. Btw, Brackets replaced my very expensive Dreamweaver ;)
3) Try using tools like Sass, Compass, less to minimize you CSS.
Note: Even without using SASS mixing or variables your CSS will be compressed (just simple use pure CSS and Compass "watch" command will compress it for you).
I hope this helps!

If you're doing any pre-processing on the files you serve, you probably want to set up a proper build system (eg a Makefile). That way, you have some source files with no duplication, and whenever you make a change, you run 'make' and it brings all the automatically-generated files up to date. If there is already a build system in place, learn how it works and use it. If not, you'll need to add one.
So first, figure out how to combine and minify your files from the command line (the YUICompressor documentation covers this). Designate a directory for automatically-generated stuff, separate from the stuff you work on but accessible to the web server, and output to there, eg gen/scripts/combined.js. Put the commands you used into a Makefile, and rerun 'make' every time you've made a change and want it to take effect. Then update the headers in other files to point to the combined and minified files.

In my symfony project I do something like this
{# layout.html.twig #}
{% block styles %}
{% if app.environment == 'prod' %}
<link href="{{ asset('bundles/appmain/min.css') }}" rel="stylesheet" type="text/css" />
{% else %}
<link href="{{ asset('bundles/appmain/hello.css') }}" rel="stylesheet" type="text/css" />
<link href="{{ asset('bundles/appmain/world.css') }}" rel="stylesheet" type="text/css" />
{% endif %}
{% endblock %}
{# some-view.html.twig #}
{% extends 'AppMainBundle::layout.html.twig' %}
{% block styles %}
{{ parent() }}
{% if app.environment != 'prod' %}
<link href="{{ asset('bundles/appsecond/styles.css') }}" rel="stylesheet" type="text/css" />
{% else %}
{% endblock %}
When the dev version is ready for production, I use this script to combine all css files and replace the contents of min.css.
But this solution works only if the same css files are included in all pages.

You can use the cssmin node module which is built from the famous YUI compressor
$ npm -g i cosmic # install
# Usage
var puts = require('util').puts,
fs = require('fs'),
cssmin = require('./cssmin');
var css = fs.readFileSync("/Any/Random/CSS/File.css", encoding='utf8');
var min = cssmin(css);
puts(min);

JavaScript Interfaces, Imports - When? (I want to port something from AS3)

). I was eagerly waiting for JavaScript 1.8.5 only to find out it brings very little to the table. ActionScript 3 is ECMAScript 5 compliant, but apparently Interfaces aren't?
When will JS have some decent OO support? I consider Interfaces to be very important for type safety.
I also have another question, regarding the ability to "import" folders/classes in a file, which is done in AS3 using the "import" statement. Now, I'm aware that this is all related to the AS3 compiler, but I got a rather large project (a game) which I want to port to HTML 5 using JS and I am worried about how my code will be organizable.
It's rather hard to include 50 classes in a web page (supposedly, the page where the HTML5 version of the game will be located), don't you think?
What would you do?

Regarding the part about handling multiple javascript files. You could use a web resource optimizer like wro4j.
Using it you would specify groups like this:
<group name="group1">
<js>file1.js</js>
<js>file2.js</js>
<js>file3.js</js>
<js>file4.js</js>
<css>file1.css</css>
<css>file2.css</css>
<group-ref>some-other-group</group-ref>
</group>
And inside the html page you would import a group like this:
<link rel="stylesheet" type="text/css" href="/wro/group1.css" />
<script type="text/javascript" src="/wro/group1.js"></script>
Beside just grouping and joining multiple files like this it can also minify the code, gzip and handle caching.