I have currently started trying my hand at client side development with bootstrap and angularjs. I've been given a task to make a more or less isolated feature of our website (an angularjs application) and have been working on it but noticed that the bootstrap functions I learned were not working.
Upon inspection I found that our app is using bootstrap 2.3.x and I want to use features of bootstrap 3.0
Because bootstrap has made quite a huge change in its new version, the main web app coders do not want to switch over so that is not an option. (at least not yet).
My question: is there a way I could have my isolated view use bootstrap 3 while the rest of the app uses bootstrap 2? I really don't want to take the time to learn deprecated technology so any advice would be greatly appreciated.
If you are creating an isolated feature on your site, will it be embed in one of the pages or is it a section in its own right? Your app pages can use bootstrap 3.x without it causing problems on other pages if the script links are only in the header of your app pages and not added to other pages in the site. The link will not leak bootstrap 3.x to previous code that does not have these script tags in the header. If that is the case, you can go ahead and use bootstrap 3.x and angular.js and should have no issues.
I would stick your app in a separate folder on the website and design away with the more up-to-date tools.
I'll use some buzzwords here:
Shadow DOM
Web Components
Polymer
Scoped styling is one of the many features of Shadow DOM. Styles defined inside the shadow tree don’t leak out and page styles don’t bleed in.
https://www.polymer-project.org/articles/styling-elements.html
http://plnkr.co/edit/hypZyjc4yFxIubfOn31N?p=preview
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/0.5.2/webcomponents.min.js"></script>
<link rel="import" href="your-component.html">
</head>
<body>
<h1>Bootstrap 3.3.1</h1>
<your-component></your-component>
</body>
</html>
your-component.html
<link rel="import" href="http://www.polymer-project.org/components/polymer/polymer.html">
<polymer-element name="your-component">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/2.3.2/css/bootstrap.min.css">
<template>
<h1>Bootstrap 2.3.2</h1>
</template>
<script>
Polymer({});
</script>
</polymer-element>
Related
I am struggling with a requirement of adding react app embed code in one of the WordPress pages, it is working smoothly and showing what it is meant to show.
The embed code consists of a js file and a CSS file, with a class and ID.
<script defer="defer" src="scriptlocation.js"></script>
<link href="stylelocation.css" rel="stylesheet"/>
<div id="assignid"></div>
Now the requirement is to make it load serverside, its text should be inserted into view source HTML.
Is there a way to achieve this in WordPress? or it needs to be done on react app part and then generate some special embed code for this requirement?
Any plugin or suggestion is highly appreciated.
I want to crawl my SPA built by the Vue framework (Relatively same as React framework). However, I see that the content is not rendered while crawling. The result is:
<!doctype html>
<HTML>
<body>
<div id=app>
</div>
<script type=text/javascript src=/static/js/manifest.2ae2e69a05c33dfc65f8.js></script>
<script type=text/javascript src=/static/js/vendor.60c471696de493d48a1c.js></script>
<script type=text/javascript src=/static/js/app.335a9e9866cb7dc6a517.js></script>
</body>
</html>
Are the component-based javascript frameworks anti crawling? How can I make the component to be rendered by the crawler?
I'm using Abot framework for crawling propose
All Abot does is send a request to the target website, parse the data, and pass it back to you. As you probably know, frameworks like React or Vue are 100% JavaScript based, meaning no data will be rendered unless you run the JavaScript. So the solution here is to launch a headless browser or another DOM engine and scrape the data.
Several engines you could use are Selenium (browser automation framework available in Python and some other languages), Puppeteer (Chromium-based web-scraper in NodeJS), or a DOM engine like JSDOM.
Moral of the story is: if you want to see result rendered by JavaScript you must execute the JavaScript inside a DOM.
I would like to migrate my app to Onsen2 .
Currently my app us in onsen UI1.
What is the best way / process to migrate the app?
Taken from here: https://onsen.io/2/index.html
Migration from Onsen UI 1.x
Although Onsen UI 2.0 is no longer AngularJS dependent, we provide AngularJS binding to supplement AnuglarJS cool features. To include ng-* bindings, please include “angular-onsenui.js" after loading onsenui.js.
<script src="onsenui.js"></script>
<script src="angular.js"></script>
<script src="angular-onsenui.js"></script>
I've developed an AngularJS SPA application, I'm seeing issues with my js files being mixed with the older versions because of cache even after the new deployment. Anyone know how to clear the cache through the angular code or some js code or through html every time the app loads for the first time, so that it won't mix both the new and old code.
I think this is typically done by having version numbers in the tags:
<script type='text/javascript' src='/jsfile.js?v=1'></script>
<link rel="stylesheet" href="/cssfile.css?v=1">
Then you just increment the versions every time you want to force an update.
I would like to know if it is possible to nest/tunnel javascript rendered sites.
What I mean concrete:
I got a site bugs.example.org which serves a bug tracker application built on Backbone Routers, Views and Models.
over bugs.example.org/#/mybugs we can list all our bugs.
Now I have for example a second project worksuite.example.org.
This project serves roadmaps, presentations, etc. unfortunately this worksuite app doesn't serve an independent bug tracker. Instead it has a joint venture with bugs.example.org.
Now worksuite.example.org want to include/nest the bugtracker views in its own application.
This could look like:
worksuite client calls worksuite.example.org/#/bugs now the worksuite app calls a GET to bugs.example.org/#/mybugs and does a $el.html(requestedContent).
Does this work?
Another application which could work similar, which I know is the google captcha service which you nest with some js
Is there a keyword for such behavior?
Depending on how well the backbone app is architected, you can have worksuite.example.org just pull all of bugs.example.org's JS files, but use its own base html/css:
<!-- on bugs.example.org -->
<script src="mybackbonestuff.js"></script>
<link href="mycss.css"></link>
<!-- on worksuite.example.org -->
<script src="http://bugs.example.org/mybackbonestuff.js"></script>
<link href="worksuite.css"></link>