Require css files with require-css.js in specific order - javascript

I have the following structure:
components/
----requirejs
----require-css
----flatUi
--------/css
------------flat.css
menuJSlib/
----js/
--------menu.js
----css/
--------menu.css
samples
----demo/
--------js/
------------main.js
--------css/
------------main.css
--------index.html
I try to load all content stuff in folder menuJSlib with requirejs and require-css in my demo project.
In my index.html in my demo I include requirejs library.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<script data-main="js/main" src="../../components/requirejs/require.js"></script>
</body>
</html>
In main.js file in my demo project I have the following code:
require.config({
baseUrl: './../../',
map: {
'*': {
'css': 'components/require-css/css'
}
},
paths: {
GameMenu: 'lib/js/menu',
'layout': 'samples/requirejs_demo/css/main'
}
});
require(['GameMenu', 'css!layout'], function(GameMenu) {
}
And the code in menu.js in my menuJSlib folder is:
define('GameMenu', ['css!components/flat-ui/dist/css/flat-ui.min.css',
'css!lib/css/main.css'], function() {
return GameMenu;
});
How you can see the menu.js have dependencies to css files. Ok all that stuffs works fine, but the problem is that I can find a way to order the css files currectly in this case on dependencies.
As you can see, I try to make order, which get the all depends in menu.js, and next load the main.css in demo folder. In that way main.css in demo will owveride some css rules, which I needed. But the order aways follows:
demo/css/main.css
flatui/css/flat.css
menuJslib/css/main.css
I wont to make this order, without remove the css dependencies in menu.js
flatui/css/flat.css
menuJslib/css/main.css
demo/css/main.css
Is this is posible in that case?

Related

How to properly load jQuery alongside Stimulus in Rails 7

I am learning Rails 7 with the new default Importmap jsmp syntax. I have tried to follow what few tutorials are out there, but am still unable to get either jQuery or Stimulus to respond to a simple alert function on page load.
I started over with a bare-bones Rails 7 application, ran bundle install, followed by rails turbo:install, rails stimulus:install and created a Static controller to route to a Landing page at Static#Landing.
My `landing.html.erb' file contains:
<h2>Landing</h2>
<p>
<script>
document.write("Vanilla JS is working...");
</script>
</p>
I get the expected string output, so I know Javascript is enabled in the Browser.
My importmap.rb file contains:
# Pin npm packages by running ./bin/importmap
pin "application", preload: true
pin "#hotwired/turbo-rails", to: "turbo.min.js", preload: true
pin "#hotwired/stimulus", to: "stimulus.min.js", preload: true
pin "#hotwired/stimulus-loading", to: "stimulus-loading.js", preload: true
pin "jquery", to: "library/jquery.js" #"https://ga.jspm.io/npm:jquery#3.6.0/dist/jquery.js"
pin "jquery-ui-dist", to: "library/jquery.js" #"https://ga.jspm.io/npm:jquery-ui-dist#1.13.1/jquery-ui.js"
pin "jqtree", to: "https://ga.jspm.io/npm:jqtree#1.6.2/lib/tree.jquery.js"
pin_all_from "app/javascript/controllers", under: "controllers"
The only lines I added were the 3 invoking a form of jQuery.
I next added the 3 import statements for jQuery, jQuery-ui-dist, and jqtree to the application.js file. The complete file contains:
// Javascript document
// Document Name: application.js
// Configure your import map in config/importmap.rb. Read more: https://github.com/rails/importmap-rails
import "#hotwired/turbo-rails"
import "jQuery"
import "jquery-ui-dist"
import "jqtree"
import "controllers"
// Configure Stimulus development experience
application.debug = false
window.Stimulus = application
// NOTE: make jquery global
window.$ = window.jQuery = jQuery;
$(function(){
window.alert("It looks like jQuery is too.");
});
export { application }
I next edited my app/assets/config/manifest.js file to include the following:
//= link_tree ../images
//= link_tree ../icons
//= link_directory ../stylesheets .css
//= link_tree ../../javascript .js
//= link_tree ../../javascript/library .js
//= link_tree ../../../vendor/javascript .js
However, even though inline <script>s work as outlined above, I get no response from either jQuery or Stimulus to the alert function in application.js. When I check my source code, I see the following:
<!DOCTYPE html>
<html>
<head>
<title>Testingjquery</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta name="csrf-param" content="authenticity_token" />
<meta name="csrf-token" content="LkQZA1mB-KU38K8S1lg_BMJWPx4HLonSyQ0s8W2vCotmw3aHIXZNDnPcJCtbgeXSTWrEuWJBZWlkOZcLe7Ru9w" />
<link rel="stylesheet" href="/assets/application-e0cf9d8fcb18bf7f909d8d91a5e78499f82ac29523d475bf3a9ab265d5e2b451.css" data-turbo-track="reload" />
<script type="importmap" data-turbo-track="reload">{
"imports": {
"application": "/assets/application-79a33b4392f09ada2a09f9c0b7de4d6479378090d98fa671caaef897dcec0de9.js",
"#hotwired/turbo-rails": "/assets/turbo.min-e5023178542f05fc063cd1dc5865457259cc01f3fba76a28454060d33de6f429.js",
"#hotwired/stimulus": "/assets/stimulus.min-b8a9738499c7a8362910cd545375417370d72a9776fb4e766df7671484e2beb7.js",
"#hotwired/stimulus-loading": "/assets/stimulus-loading-1fc59770fb1654500044afd3f5f6d7d00800e5be36746d55b94a2963a7a228aa.js",
"jquery": "/assets/library/jquery-58fa327d47526faff06ea7057a0022e9c42b2ca3a9aeea413f0e18176a63cd9f.js",
"jquery-ui-dist": "/assets/library/jquery-58fa327d47526faff06ea7057a0022e9c42b2ca3a9aeea413f0e18176a63cd9f.js",
"jqtree": "https://ga.jspm.io/npm:jqtree#1.6.2/lib/tree.jquery.js",
"controllers/application": "/assets/controllers/application-368d98631bccbf2349e0d4f8269afb3fe9625118341966de054759d96ea86c7e.js",
"controllers/hello_controller": "/assets/controllers/hello_controller-549135e8e7c683a538c3d6d517339ba470fcfb79d62f738a0a089ba41851a554.js",
"controllers": "/assets/controllers/index-2db729dddcc5b979110e98de4b6720f83f91a123172e87281d5a58410fc43806.js"
}
}</script>
<link rel="modulepreload" href="/assets/application-79a33b4392f09ada2a09f9c0b7de4d6479378090d98fa671caaef897dcec0de9.js">
<link rel="modulepreload" href="/assets/turbo.min-e5023178542f05fc063cd1dc5865457259cc01f3fba76a28454060d33de6f429.js">
<link rel="modulepreload" href="/assets/stimulus.min-b8a9738499c7a8362910cd545375417370d72a9776fb4e766df7671484e2beb7.js">
<link rel="modulepreload" href="/assets/stimulus-loading-1fc59770fb1654500044afd3f5f6d7d00800e5be36746d55b94a2963a7a228aa.js">
<script src="/assets/es-module-shims.min-d89e73202ec09dede55fb74115af9c5f9f2bb965433de1c2446e1faa6dac2470.js" async="async" data-turbo-track="reload"></script>
<script type="module">import "application"</script>
</head>
<body>
<h2>Landing</h2>
<p>
<script>
document.write("Vanilla JS is working...");
</script>
</p>
</body>
</html>
As you can see, jQuery is not being loaded at all and Stimulus is being loaded, but is unresponsive to any code references. I am new to Stimulus, intermediate with Javascript/jQuery and new to Rails 7. From what I have read, I like the conceptualization behind these radical shifts in Rails methodology, but so far, haven't been able to get it to work.
The files are all in their appropriate places according to the references to them. For illustration, this is my file tree:
-app
-assets
-config
-manifest.js
-javascript
-controllers
-application.js
...
-library
-jquery.js
-jquery-ui.js
-application.js
...
-config
-importmap.js
...
The final application.js file contains no code that I changed and is as follows:
import { Application } from "#hotwired/stimulus"
const application = Application.start()
// Configure Stimulus development experience
application.debug = false
window.Stimulus = application
// NOTE: make jquery global
window.$ = window.jQuery = jQuery;
export { application }
Granted, there are two application.js files that Importmaps/Stimulus/Turbo seem to rely upon, and perhaps I inserted some code into the wrong application.js file. If so, it was because the tutorials that I was following didn't specify or clarify which file to insert certain code into.
Does anyone see a fundamental error in my code or can suggest another approach? Thanks in advance.

How to import or use external JS files and functions in my angular web application

I want to integration external code (html, js and css files) into my angular web application.
in this external code, the HTML files is just like this:
index.html
<html>
<header>
</header>
<body>
</body>
<script src="app/components/landing-page/js/bootstrap.min.js"></script>
<script src="app/components/landing-page/js/owl.carousel.min.js"></script>
<script src="app/components/landing-page/js/cbpAnimatedHeader.js"></script>
<script src="app/components/landing-page/js/theme-scripts.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="app/components/landing-page/js/ie10-viewport-bug-workaround.js"></script>
<script type="text/javascript" src="app/components/landing-page/js/imageComparisonSlider.js"></script>
<script>
/*Execute a function that will execute an image compare function for each element with the img-comp-overlay class:*/
initComparisons();
</script>
<html>
as you see, there are several javascript files, and a funciton initComparisons() will be called.
If I only double click index.html, everything works fine. But I copy this html code in one component.html, that was not working. I can not see any animation.
I have googled some solutions,
and I have change my angular.json file just like this:
"scripts": [
"src/app/components/landing-page/js/imageComparisonSlider.js",
"src/app/components/landing-page/js/owl.carousel.min.js",
"src/app/components/landing-page/js/cbpAnimatedHeader.js",
"src/app/components/landing-page/js/theme-scripts.js"
]
and also import all js files in index.html in my angular web application
<script src="app/components/landing-page/js/imageComparisonSlider.js"></script>
<script src="app/components/landing-page/js/owl.carousel.min.js"></script>
<script src="app/components/landing-page/js/theme-scripts.js"></script>
<script src="app/components/landing-page/js/cbpAnimatedHeader.js"></script>
and in the component.ts, I also do this:
import initComparisons from './js/imageComparisonSlider.js';
ngOnInit() {
this.isLoggedIn = this.authService.isLoggedIn;
initComparisons();
}
I added some code in stackblitz;
https://stackblitz.com/edit/angular-qowfwy?file=angular.json
but it was not working.
can somebody help me and give me some suggestion.
Best Regards,
Leo
If you want to use external js in your angular project you have to import in your angular.json in the "scripts": [] area that will be allow you to bring the js and make the build after without problem.
After putting the external scripts in angular.json (paths correct and everything), in component you should
declare const initComparisons;
// ...
ngOnInit() {
initComparisons();
}

Can't understand laravel Mix works on my custom js/css files

I'm new to Laravel and whole framework stuff.
I do (may) understand a part of how the page rendered via laravel, but even after extensive search, I do not understand how laravel mix works.
Suppose that there is a page requires a global js and css library (lets specify jQuery and bootstrap)
Also the page requires custom js file like someJsTools.js.
Elementary speaking, in the past, those files referenced via <script src="blah"></script> and <link rel="blah" /> inside head tag and I used to it. In this env, all I have to do is specify those tags page by page.
// pageA requires jQuery.js, bootstrap.css and one CUSTOM JS file imatrouble.js
<head>
<link rel="stylesheet" herf="bootstrap.css"/>
<script src="jquery.js"></script>
<script src="imatrouble.js"></script>
</head>
//pageB requires jQuery.js, bootstrap.css and two custom js files.
<head>
<link rel="stylesheet" herf="bootstrap.css"/>
<script src="jquery.js"></script>
<script src="imatrouble.js"></script>
<script src="withimatroubleimadisasterlikewhateveryoucanimagine.js"></script>
</head>
PageA and PageB both requires common jQuery.js and bootstrap.css file. From what I learn, laravel Mix combine all js files into one and I don't get it here.
Problem 1 - One file do everything?
If it is true that "mix" things all together as one file, then how this one file could handle all of this different requirements seperatelly? I believe that my knowledge is wrong and its from my incorrect understanding of laravel mix and perhaps webpack mechanism.
Problem 2 - How can I manage all different page and every different situation?
Whether the problem above is originated from my missunderstanding or not, I cannot figure out what part of I (will) do could cause differences between pages. If mix only works for common global library, then all I have to do is just load custom js/css files manually. I currently assume that it is highly unlikely.
Please, someone help me to escape this chaos.
Have a good day.
It is purely based on your requirements. It depends on how you are customising your assets file.
For example :
Jquery, Angular,Bootstrap,Font Awesome is common for all your pages. So what I usually do is. I combine all css files to one file and all js files to one. Like below..
CSS mix
elixir(function(mix) {
mix.styles([
"libraries/bootstrap.css",
"libraries/font-awesome.min.css",
"custom/default.css",
], 'public/assets/css/common.css');
});
JS mix
elixir(function(mix) {
mix.scripts([
"libraries/jquery-1.10.2.js",
"libraries/bootstap.js"
"libraries/angular.js",
"libraries/angular-animate.js",
"custom/defaut.js"
], 'public/assets/js/common.js');
});
Suppose some pages need specific dependency[product, orders...etc]. For instance if product page needs wow.js, product.js and wow.css,product.css
CSS mix
elixir(function(mix) {
mix.styles([
"libraries/wow.css",
"custom/product.css",
], 'public/assets/css/product.css');
});
JS mix
elixir(function(mix) {
mix.scripts([
"libraries/wow.js",
"custom/product.js"
], 'public/assets/js/product.js');
});
So final laravel mix file looks like below
gulpfile.js
var elixir = require('laravel-elixir');
elixir.config.sourcemaps = true;
/**
* Global CSS MIX
*/
elixir(function(mix) {
mix.styles([
"libraries/bootstrap.css",
"libraries/font-awesome.min.css",
"custom/default.css",
], 'public/assets/css/common.css');
});
/**
* Global JS MIX
*/
elixir(function(mix) {
mix.scripts([
"libraries/jquery-1.10.2.js",
"libraries/bootstap.js"
"libraries/angular.js",
"libraries/angular-animate.js",
"custom/defaut.js"
], 'public/assets/js/common.js');
});
/**
* Product CSS MIX
*/
elixir(function(mix) {
mix.styles([
"libraries/wow.css",
"custom/product.css",
], 'public/assets/css/product.css');
});
/**
* Product JS MIX
*/
elixir(function(mix) {
mix.scripts([
"libraries/wow.js",
"custom/product.js"
], 'public/assets/js/product.js');
});
Now all your assets files are ready. Now you need to include wherever you want.
Suppose on your homepage you only requires common.js and common.css files.
homepage.blade.php
<head>
<link rel="stylesheet" href="{{ asset('assets/css/common.css') }}"/>
<script type="text/javascript" src="{{ asset('assets/css/common.js') }}"></script>
</head>
On the product page, you require both common and product assets file dependency. Include like below
product.blade.php
<head>
<link rel="stylesheet" href="{{ asset('assets/css/common.css') }}"/>
<link rel="stylesheet" href="{{ asset('assets/css/product.css') }}"/>
<script type="text/javascript" src="{{ asset('assets/js/common.js') }}"></script>
<script type="text/javascript" src="{{ asset('assets/js/product.js') }}"></script>
</head>

How do you run mocha tests in the browser?

Is it just me, or does their documentation not explain how to run the tests in the browser at all?
Do I have to create that HTML file that they show in the example? How do I make it run my specific set of test cases for my project then?
I want the same output as running mocha from project root. All subdirectories inside the test folder need to be included
If we need to run our tests in a browser, we need to set up a simple HTML page to be our test runner page. The page loads Mocha, the testing libraries and our actual test files. To run the tests, we’ll simply open the runner in a browser.
example html code :
<!DOCTYPE html>
<html>
<head>
<title>Mocha Tests</title>
<link rel="stylesheet" href="node_modules/mocha/mocha.css">
</head>
<body>
<div id="mocha"></div>
<script src="node_modules/mocha/mocha.js"></script>
<script src="node_modules/chai/chai.js"></script>
<script>mocha.setup('bdd')</script>
<!-- load code you want to test here -->
<!-- load your test files here -->
<script>
mocha.run();
</script>
</body>
</html>
Setting up a Directory Structure
You should put your tests in a separate directory from your main code files. This makes it easier to structure them, for example if you want to add other types of tests in the future (such as integration tests or functional tests).
The most popular practice with JavaScript code is to have a directory called test/ in your project’s root directory. Then, each test file is placed under test/someModuleTest.js.
Important things :
We load Mocha’s CSS styles to give our test results nice formatting.
We create a div with the ID mocha. This is where the test results are
inserted.
We load Mocha and Chai. They are located in subfolders of the
node_modules folder since we installed them via npm.
By calling mocha.setup, we make Mocha’s testing helpers available.
Then, we load the code we want to test and the test files. We don’t
have anything here just yet.
Last, we call mocha.run to run the tests. Make sure you call this
after loading the source and test files
I thought the documentation wasn't entirely clear too, but I figured it out eventually and got it set up. Here's how:
Include the Mocha script and CSS in Index.html. Also include a div with id "Mocha" for the output to be inserted into. Include the test script you'd like to execute.
<link href="lib/mocha/mocha.css" rel="stylesheet" />
<script src="lib/mocha/mocha.js"></script>
<script src="test/my_mocha_test.js"></script>
<div id="mocha"></div>
In your test file (my_mocha_test.js in this example) include this setup line at the top:
// 'bdd' stands for "behavior driven development"
mocha.setup('bdd');
Now with the test and the Mocha content all loaded, you can run the tests with this command:
mocha.run();
You can add that to an event listener and trigger it on a button push or other event, or you can just run it from the console, but it should put the test output in the div with the "mocha" id. Here's a page with all this set up with code viewable on GitHub for you to
https://captainstack.github.io/public-stackhouse/
My way to do it with:
ES6, import, export, chai
Used mocha 6.1.4 and chai 4.2.0.
src/MyClass.js:
export default class MyClass { }
test/MyClass.js:
import MyClass from "../src/MyClass.js";
let assert = chai.assert;
describe('MyClass tests', function () {
describe('The class', function () {
it('can be instantiated', function () {
assert.isObject(new MyClass());
});
});
});
test/index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Mocha</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="mocha.css">
<script src="mocha.js"></script>
<script src="../node_modules/chai/chai.js"></script>
<script type="module" class="mocha-init">
mocha.setup('bdd');
</script>
<!-- ------------------------------------ -->
<script type="module" src="test.js"></script>
<!-- ------------------------------------ -->
<script type="module">
mocha.run();
</script>
</head>
<body>
<div id="mocha"></div>
</body>
</html>
The mocha.js and mocha.css files were created via mocha init test, but can also be found in node_modules/mocha.
If this is improvable, let me know. The answer is insprired by this post.
Here's the most basic chai/mocha test in the browser.
mocha.setup('bdd');
describe('test', () => {
it('passes', () => {
chai.expect(1).to.eql(1);
});
it('fails', () => {
chai.expect(1).to.eql(2);
});
});
mocha.run();
<div id="mocha" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/mocha/8.0.1/mocha.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chai/4.2.0/chai.min.js"></script>

Minify HTML, but don't touch PHP with Gulp

The problem
I have a lot of .php files, mostly containing HTML, but also some PHP lines on top (e.g. form trigger code or similar). So they look like
<?php
if($someValue){
//doSth
}
//more content
?>
<!DOCTYPE html>
<html lang="de">
<head>
<title>My Website</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<!-- Content and scripts here -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
</body>
</html>
The goal
My goal is to minify the HTML (and maybe even the inline javascript, but that's just a little extra), without touching the PHP on top.
I'm using Gulp as automated build tool and would like to see a solution using this tool and any extra packages as they are needed.
The gulp-htmlmin module uses the html-minifier module, which has plenty of options (displayed on both its npmjs.com and github pages) that can be used. The option we will focus on is ignoreCustomFragments.
var gulp = require(gulp),
htmlmin = require(gulp-htmlmin);
gulp.task('htmltask', function(){
return gulp.src(['./dev/*.html','./dev/*.php'])
.pipe(htmlmin({
collapseWhitespace: true,
ignoreCustomFragments: [ /<%[\s\S]*?%>/, /<\?[=|php]?[\s\S]*?\?>/ ]
}))
.pipe(gulp.dest('./site'));
});
In the above code, you see we are using ignoreCustomFragments with the regex /<\?[=|php]?[\s\S]*?\?>/ to ignore code starting with <? and <?php and ending with ?>.
By default, html-minifier ignores php, so you don't have to worry about setting ignoreCustomFragments.
EDIT
Thanks amersk
Some php files you work with may not have closing tags, for example many WordPress files do not. An alternative would be to use the following instead:
ignoreCustomFragments: [/<\?[\s\S]*?(?:\?>|$)/]
This works for me !
// Gulp.js configuration
var
// modules
gulp = require('gulp'),
newer = require('gulp-newer'),
htmlmin = require('gulp-htmlmin')
// development mode?
devBuild = (process.env.NODE_ENV !== 'production'),
// folders
folder = {
src: 'src/',
build: 'build/'
}
gulp.task('minify', () => {
return gulp.src('src/*.html')
.pipe(htmlmin({ collapseWhitespace: true }))
.pipe(gulp.dest('dist'));
});
;

Categories