Can i use Bootstrapping to style single pages within a web-app? - javascript

I'm developing a web application, and I recently discovered the need of a basic input form. The rest of my application does not have much of this, mostly single input-fields. I figured I would try to use a javascript library for validation, and ended up choosing parsley.js.
in this youtube tutorial, the tutor uses bootstrapping, a term I have come across a lot lately, but have no experience with. I figured I'd try it out in the single page of my web app.
However I get errors on the first character of the css I try to import, stating that < is an illegal token. This is of course the start of the file <!DOCTYPE html>. So in other words, the .css is found and included, it is just not accepted. This error has been repeated with a couple of different import sources now.
I've tried to look a little outside the box, to figure out why. I read posts like these:
What is bootstrapping?
Setup bootstrup file in java web application
These have led me to suspect that bootstrapping might not be meant for importing a style sheet, for a single page which is only a part of a web app, like I am trying to do.
So, is it wrong to think that I can use bootstrapping as I would import a .css file, for a single page? If not, what else might my problem be?
EDIT:
I forgot to tell that I am importing the css and js libraries through their online url's. If i copy them to my workspace, and import them from there, I get this error:
PWC6199: Generated servlet error:
The code of method _jspService(HttpServletRequest, HttpServletResponse) is
exceeding the 65535 bytes limit

Related

How to import Javascript package in browser via script tag or similar

I know I'm a bit behind the times here, but how can I import from this library (uirouter/react-hybrid) for an existing Angularjs site using only tags to include libraries? I have tried a few things, including including from CDN via jsdelivr, also building from node locally and attempting to include the dependencies via webpack. I have also tried loading through require.js but not sure I did it correctly. No matter what, I either get an error for the import or I fail to see the library once imported. I am just not getting it, I feel like I'm missing something. Could someone please help me with a detailed process for how I can get this library to work in place of the existing angular ui-router loaded via tag?
I could definitely go into the reasons why I'm doing this in the first place if necessary, but I feel like this should be pretty simple and I'm just struggling.
Thanks.

Getting Custom Widgets, Static Javascript, and Voilà to all play nicely with each other in Jupyter Notebook

I’ve been working on a Jupyter Notebook for the last month and put together a very nice toolkit for my DevOps team out of it. I want to be able to containerize this tool, or at least host it on our own intranet, so that the rest of the team can use it without having to go through a long install/configuration sequence on their own machines. Voilà seems to be the best tool for doing that, as my tool uses the Python kernel extensively and this seems to be a way to host it on a remote machine while still retaining the ability to use the kernel.
My tool involves a couple of custom widgets. They’re very simple and there to communicate information better through the UI - they’re an image object and a label object that can slowly fade out over the course of several seconds to indicate that an operation (such as saving) was either recently completed or done so long ago that the information is likely no longer relevant. (I don’t want the user to see a ‘Data saved!’ message from 15 minutes ago, for example.) I managed to put these custom widgets together just fine - but like all custom widgets, they needed additional Javascript code to display on the Notebook.
Putting the relevant javascript in a cell with the ‘%%javascript’ magic tag causes the custom widgets to work perfectly - however, I do not want to rely on this as a long-term solution for two reasons. One reason is that I want the javascript to be able to be easily rewritten, stored to a repository, and viewed on tools outside the notebook itself - I don’t want to commit a new version of the notebook every time I need to change the Javascript, and I certainly don’t want to go digging through the .ipynb file when I want to read the code itself.
The other problem is that Voilà does not seem to support the ‘magic %%Javascript’ tag, at least at the moment. Putting the javascript code inside a cell before the cell containing the application and then running the entire notebook through Voilà does not seem to execute the Javascript code, only injecting it into the HTML - errors pop up throughout the Javascript console, and all of my custom widgets fail to render.
Is there some accepted way to create a Javascript file, one that would be kept in a /static folder or something like that to match up with images and HTML files, and then configure some Python code so that the Javascript file is imported and executed at the very least before my application’s widgets are created? I’ve looked at the custom.js option inside the root Jupyter settings, and would like something more local to the project if at all possible. I’ve also tried to move the files I created into an existing /static folder inside Voila and import them in the template with the following lines of code:
<script type=“text/javascript” src="{{resources.base_url}}voila/static/image_extra_features.js"></script>
<script type=“text/javascript” src="{{resources.base_url}}voila/static/label_extra_features.js"></script>
But this seems to just include, but never actually execute, the relevant code.
I’m sure I must be missing something. (I thought I found something promising when I chased the ’ _view_module_version’ section of the Python model of the custom widget down, as the version of the custom widget isn’t specified anywhere in the Javascript file, but that seemed to be a dead end- where is the module version supposed to be listed? Is it only in the Python file?)
Does anyone have any idea as to what could be the issue?

ReactJS is there any way of looping through a github pages directory?

I am developing a single paged website which displays the contents of several JSON files in ReactJS. I need to loop through /json which contains the files and display these as a list. These files may change so this needs to be dynamic.
I was able to get this working using a nodeJS back end server. However my spec has changed and now this site has to be hosted on github pages, therefore the back end approach will not work. Does anyone know of any way I can access the directory in React, I have looked and cannot seem to find any way of doing this.
Thanks for any help in advance.
You cannot access any filesystem without a proxy (like Node.js) from a browser. React is just a series of literal definitions, interpreted by browsers.
You can do whatever you want with React and Github API
You can also dig in SO with [github-api] react

Running Multiple ng-app containers on the same page

I'm building out an angular app and I'd really like to use a single file to handle certain things like nav, meta data etc. Partially for my OCD, but mostly because it will make managing that functionality a lot easier down the road.
I had it all set up and running, but it appears that only my nav app is running (it looks like this)
<nav ng-app="nav">
And has it's own file
<script src="js/nav.js">
Then, I tried adding in some content in another app
<div ng-app="content">
But I'm getting an angular load issue on the controllers in that app saying that they are not functions
Error: [ng:areq] Argument 'chartCtrl' is not a function, got undefined
Even though ng-app content script is loading fine and the "didload" console log I have INSIDE of chartCtrl is working fine...
Just wondering if anyone has seen anything like this before. Thanks!
This is not good idea. By this crumbling, you are dropping most of features that makes Angularjs usefull. One website = one app is what you want. If you worry about organizing files, it is not related to Angularjs, but build process. Time when there was one huge file is long gone.. You can organize files as you wish (into folder structure), then concat/import them via build engine (npm, grunt, gulp, webpack etc..) into one file. Angularjs app then handle loading dependencies in right order... Just read some articles like this and ofc documentation..

Translating minicart and other javascript related strings in magento 2.1.3

I am learning magento 2, i have started with basics like creating module, then a theme.
Since magento does not come with slovak language i want to do some translation on frontend and later on backend.
I have succeed translating frontend where no javascript / knockout template is used, by placing sk_SK.csv into company/themename/i18n.
I have read about issue on github that in magento 2.0 translation of javascript strings does not work using this method, so i have upgraded to latest version (2.1.3), and its still not working.
I have checked vendor/magento-checkout/i18n/ where the ex. string "Go to Checkout" is defined. So I have tried the override method used also for overriding templates (created company/themename/Magento_Checkout/i18n/sk_SK.csv) and placed the translation here. it does not worked also.
Note: After each change i delete the static folder and run the command to generate static content for sk_SK then i clean the cache and flush the cache, in browser i do hard reload with cleaning cache.
Yes there are lot of topics on github, stackoverflow, docs... but i do not understand them, these answers are written i thing for super professionals.
Note 2: Theoretically i can hard-code slovak language into web/minicart/content.html (not sure if path is right) by overriding this file. But this is not solution for possible multi-language website.
Note 3:
I have did also an export using i18n, but the output is messed up. like "Hello "World"!","something" same quotes in quotes without escape.its pain to open in any excel kind of app (partly succeed with libreoffice calc) because it has long string and too much strings not friendly for developers or people who will do the translation.
What kind of answer i want to receive is like this:
1. Copy this file here, because..[explanation]
2. Edit/Add/Whatever here, because....
3. etc...
Why? I want to learn and not just copy paste.
Thank you

Categories

Resources