I am using Github pages to deploy a static website built using jekyll.
The porject was forked from https://academicpages.github.io/ (I am a beginner in all of this)
For some reason, the "local" (on my machine) behavior of jekyll and the "remote" (i.e. using Github Actions) behavior are different :
Remotely, the built HTML files are 1-liners.
This is quite annoying since Javascript comments (starting with \ and ending at the end of the line) are all over the place.
This undesirable behavior is not present locally.
How can I make configure the jekyll from github pages to behave the same locally and remotely ?
Cheers,
Gabriel
This is due to the compress_html plugin in the production config. The dev config doesn't have this so it doesn't minify locally. You could remove the plugin entirely or experiment with options to fit your needs.
Related
so I know this is very specific, but since I am mostly new to programming on websites, I hope you can help me :)
I am trying to integrate the jekyll-lunr-js-search (https://github.com/slashdotdash/jekyll-lunr-js-search) into the minimal-mistakes theme and having a few problems with it.
I followed the instructions for the search but already had problems there, since it seems mmistakes is already prepped to be on github-pages:
There are just gh-pages conform plugins in the Gemfile.
There is no _plugins folder
The plugins used are in the /assets/js/plugins folder and just called via package.json where they are uglifyjs(ed)
So since I do not know much about the technology, I guess I would have to uglifyjs the jekyll-lunr-js-search js files too, but I am did not find a way to get this to work. There has no index.json been created.
Thanks for the help!
Okay, so what I found was this link which makes the search easy in Jekyll on Github Pages.
It does not really solve the problem at hand but it gives me the beginning I can improve.
Wrong file location
The README.md file at jekyll-lunr-js-search mentions that you must place your build/jekyll_lunr_js_search.rb inside the _plugins folder in the root of your Jekyll site.
Plugins on GitHub Pages
However, all GitHub Pages sites are generated using the --safe option to disable custom plugins for security reasons. Unfortunately, this means Jekyll plugins won’t work if you’re deploying to GitHub Pages.
(You can still use GitHub Pages to publish your site, but you’ll need to convert the site locally and push the generated static files to your GitHub repository instead of the Jekyll source files.)
You can only use these plugins on GitHub Pages.
Helpful resources
https://jekyllrb.com/docs/plugins/
https://pages.github.com/versions/
http://rayhightower.com/blog/2016/01/04/how-to-make-lunrjs-jekyll-work-together/
I'm new to both openFrameworks and this compiler called Emscripten.
After struggling for a few days, I was able to compile my openFrameworks/C++ code into js but Emscripten gives me an html file with a lot of junk included (For example, there is a header and footer -
http://openframeworks.cc/setup/emscripten/)
I'm trying to host the video/animation itself like it is on this page (http://www.syedrezaali.com/#/great-scott/) but I have no idea how to go about it. Can anyone help me out?
Thank you
If you follow OF's guidelines Emscripten generates not only the html file but also some other files (I think it's 4 files in total). You need to copy all of those into your site, then link to the html file.
Notice that while developing you can use
emrun --browser chrome bin/yourSample.html
To open the file, but you cannot just open the .html file (not sure why). See this guidelines as well, which are linked in the OF tutorial.
Update
I haven't tested this, but it looks like OF loads a site template. See this makefile for emscripten, you may specify your own via PROJECT_EMSCRIPTEN_TEMPLATE or you could just change the template OF uses.
I am working on a website which is based on angularjs and rails in the backend.
The site is currently in production/live
The issue which I am having is that after the assets have been precompiled with the help of rake assets:precompile,The overall js file size goes above 1Mb.Hence it takes time for the site to load.
This is a major issue and since the site is fully ajax based,I cannot implement page caching.
Also have tried gzip on my nginx server but this is not helping.
This is hampering the performance of the site and would welcome any sort of help or suggestions if possible.
Thanks
I don't know about RoR or the rake assets you mentioned but here is a few leads and how I proceed (Lately, I've been starting to use Grunt) :
Concat your js files into 1 js file. It's easier to process one request rather than many little ones.
Minify your js files and make sure to use minified lib version.
Try to adopt a smart approach to load your libraries and your own files. For instance, if you only need graphics in your admin dashboard, make sure not to load d3.js on your front page. I know the Jquery ecosystem is full of useful plugins but I've seen way too many developers taking shortcuts and claiming they need Jquery when others viable alternatives exist.
Serving file using gzip is a good idea. This should reduces the size of your files significantly.
Also, Could you provide a link to your website ?
I came across a strange issue in my recent project.
I was using Trent Richardson's Timepicker control to avail time picker functionality in my MVC 4 application. I had relevant JQuery file bundled using MVC bundling feature. I found this working quite well in development environment (Visual Studio 2012).
But when I deployed the website on IIS, I started facing a strange issue, and there was a javascript error "function expected" in that particular bundle. I could see the bundle got loaded because developer tool was showing javascript code when that bundle was selected in "scripts" tab.
Finally, when I referenced the JQuery file directly instead of bundle, it started working fine on IIS. Though the problem got solved, I am now curious to know what was wrong with that particular file if bundled, and if MVC bundling was actually an issue, then why it was working well in development environment, but not in IIS?
Any lights on this much appreciated.
Minification is a complex process by making scripts/styles smaller using techniques such variable name shortening, white space elimination, comments removal, etc... It uses ASP.NET Web Optimization that depends on WebGrease for minification. Of course, there can have issues but I personnaly never noticed that.
Here are some situations, where you should not use bundling
There is only one file in your bundle. Why bundling ?
You are using only famous frameworks such as JQuery or jQuery UI. Do not redistribute scripts that are already served by someone else. Google/Microsoft/Amazon/... already provide CDN for the most popular, open-source JavaScript libraries.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
Your bundle takes only a few Bytes. Web performance Optimization suggests to limit the number of web requests. Everything has a cost. Not very optimal, but sometimes it's better to put inline scripts in your page.
In some architectures. Bundles requests contains a unique identifier used for caching. If any file in the bundle changes, the ASP.NET optimization framework will generate a new token, guaranteeing that browser requests for the bundle will get the latest bundle. When working with some architectures, JS updates can be frequent and will invalidate all your bundles.
On Dev Environment. It's is really really painful to debug a bundle.
Along with Cybermaxs' reply, I have also received following response while posted on ASP.NET Forum In case, if that helps the visitors.
What bundling suppose to do is to put together the script/stylesheet files in a single bundle into a single request and send it to the client so that the browser has to make less calls to get those required script files.
In a development environment, when you do debugging in visual studio. It doesn't do the above process unless you specify it to do so. But in a production environment, when the debug is set to false in the web.config file. it will start to do the above process.
There can be some other reasons as well. such as the script might have two versions. one for debugging and one for production. I came across such a situation with knockout. in my development enviornment I had referenced the debug version of the script. But when I put it into the production enviornment, everything came to a hault. There was a release version for the knockout script file and I had to reference that to make everything work again.
On a recent project I have been working on in C#/ASP.NET I have some fairly complicated JavaScript files and some nifty Style Sheets. As these script resources grow in size it is advisable to minify the resources and keep your web pages as light as possible, of course. I know many developers who hand-feed their JavaScript resources into compressors after debugging and then deploy their applications.
When it comes to source control and automated builds in the satisfying world of continuous integration (thank you CruiseControl.NET); hand compression will simply not do. The only way to maintain source control and offer compressed resources is to keep JS/CSS source & their minified brethren in a separate directory structure. Then register only one set of resources or the other in code-behind. However, if a developer makes a change to JS/CSS source and then fails to re-compact it and check in both versions, then you’re code-line is now out of sync. Not to mention inelegant.
I am thinking that it would be nice to write a custom executable (if one does not exist yet) for the CC.NET task block which would find and compress all JavaScript and CSS resources in the target directory after the build action but before the asp.net publish to target. This way, developers would only work on JS and CSS source and users would only get the minified resources.
Is there an application that already performs this task and if not, what kind of resource(s) should I look to install on the build server to have CC.NET execute?
(The closest question I could find here to this one required NAnt, which is not an option in my case.)
EDIT:
Dave Ward now has a great article on how to automatically minify in Visual Studio at his site.
The MSBuildCommunityTasks Project has a few MSBuild tasks that may do what you are looking for including Merge and JSCompress.
You could add these into your MSBuild project in the AfterBuild target to allow the project to perform this action every time the project is built and nothing would ever be out of sync. Your web application could then reference the compacted version for run but the developers would edit the full versions.
Nothing else would be needed on the server except the MSBuild community tasks assembly. You can put this assembly in your own source tree and reference from there and your CI build should get that assembly and everything it needs when it builds.
Another JS (and CSS!) compression library for MSBuild:
http://www.codeplex.com/YUICompressor
This is a .NET port of the java-based Yahoo! compressor.
Not a perfect answer, but if you're using MVC4 they've built this in as a new feature. When running a Debug configuration, it outputs individual files with comments and such but when you switch to Release, it will automatically bundle, minify, and change in page references to the minified files. You can setup separate bundles for, say, jquery and your own js. This works with CSS and JS files.
http://www.asp.net/mvc/tutorials/mvc-4/bundling-and-minification
If MVC4 doesn't work for you, you can also find packages on Nuget that can help such as this:
https://www.nuget.org/packages?q=minify