Jekyll Minimal Mistakes theme - Add plugin - javascript

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/

Related

PWA not finding javascript files in directories

I'm trying for a while now to create a PWA in Oracle APEX by following some instructions on http://vmorneau.me/apex-pwa-part4/, but I'm having no luck in certain parts.
I've installed the demo to test it and see what's wrong, but I'm having the same issues with the demo app, namely some important files not being detected/found when I run it. I thought I had configured something wrong previously, but this time it was supposed to work properly.
Example, I have the app.js inside the js directory in Apex:
When I run the app, I get these messages:
I tried checking the file path the same way I tried to see if the manifest.json file was in the proper root folder, and it couldn't be found:
This looks like a common problem I see on the forums, that doesn't relate to the PWA concept. You'll probably find the same thing if you tried to refer to static files loaded into the workspace.
See Morten's example regarding a fixing the configuration
https://ora-00001.blogspot.com/2016/12/apex-plugin-files-and-404-not-found-in-ords.html
Or placed your files in the middle tier, using /i/ (or preferrably a custom location /c/)

Can I host a custom site using html, css, and js through git hub pages without using a Jekyll theme?

So I'm trying to setup a portfolio page through Github pages, but want to use custom code instead of a Jekyll theme. My page is HTML, CSS, and JS and haven't found a solid solution yet. Is this possible and, if so, how do I go about this? Thanks!
Yes you can.
All you have to do is name your html file as index.html and publish it to the appropriate repository.
You have 2 options:
You either push your files in a gh-pages branch of the repository of your choice, if you have already setup your username.github.io or
You can go ahead and create a new reportsitory named username.github.io and push the code to the master branch.
Here's a link to a github help article
EDIT :
Specifically THIS 5-step tutorial describes exactly what you want to accomplish.

Webstorm JavaScript External Libraries vs Project Directories

In IIS and therefore VS, there are virtual directories which allow simplified, virtual, relative referencing in script tags. They are handy. In WebStorm you can get the same effect with Project Directories and then marking your project root as a Resource Root. If you do this, you also get coding assistance in the text editor.
WebStorm also has External Libraries, what is the point of these?
Is this for when you have a link to a CDN in your script tag and you want to get coding assistance? If you already have Project Directories, what is the point of External Libraries?
I've seen this answer and I kind of get the different modes of referencing/inclusion, but I don't get the big picture. What is the core reason for the External Libraries vs the Project Directories?
Is this for when you have a link to a CDN in your script tag and you want to get coding assistance?
Yes, this is the most common case - WebStorm can't use online resources for code assistance, it needs to have the corresponding javascript files available locally. So, if you don't like to pollute your project folder with all these library files, you can have them stored outside of your project and set up as libraries.
What is the core reason for the External Libraries vs the Project Directories?
See above - external libraries allow storing library files in an arbitrary location outside your project folder and still get code completion/highlighting/etc. Please also see the answer you refer to:
Note also that libraries are 'light-weight' as compared to .js files in your project - they are treated read-only, have the inspections turned off. Plus, you can assign documentation URLs to them, enabling external documentation for library code. So, even if you have your library files in your project, it might make sense to add them as libraries
see also this blog post

Developing Backbone.js Applications textbook: base.css and bg.png

I am following along a textbook ("Developing Backbone.js Applications" by Addy Osmani, who runs his own GitHub account) to build my first Backbone.js app, and it seems that I can't download two of the files that I need for the app, base.css and bg.png, from his repositories. Like, when I even try to type up the repository that has base.css, I am bought to a GitHub themed page indicating a 404 error.
Could you please help me find the files I need for this app?
You may have come across an older version of the book, as it seems that the links have been fixed now. These links will work:
base.css
bg.png
These are common styles from a site called TodoMVC, so any copy of the CSS or bg.png you might have found should work fine.

Performance:-How to reduce precompiled js file size in angularjs and rails

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 ?

Categories