What is the best way to make any kind of article/blog content to make available offline or make it readable more like pocket using node.js ?
How do I perform downloading whole page including it's resources for offline use.
the link https://nodejs.org/api/ has all the child pages
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title> Node.js v5.3.0 Manual & Documentation</title>
<link rel="stylesheet" href="https://fonts.googleapis.com /css?family=Lato:400,700,400italic">
<link rel="stylesheet" href="assets/style.css">
<link rel="stylesheet" href="assets/sh.css">
<link rel="canonical" href="https://nodejs.org/api/index.html">
</head>
<body class="alt apidoc" id="api-section-index">
<div id="content" class="clearfix">
<div id="column2" class="interior">
<div id="intro" class="interior">
<a href="/" title="Go back to the home page">
Node.js (1)
</a>
</div>
<ul>
<li><a class="nav-documentation" href="documentation.html">About these Docs</a></li>
<li><a class="nav-synopsis" href="synopsis.html">Synopsis</a> </li>
<li><a class="nav-assert" href="assert.html">Assertion Testing</a></li>
<li><a class="nav-buffer" href="buffer.html">Buffer</a></li>
<li><a class="nav-addons" href="addons.html">C/C++ Addons</a></li>
<li><a class="nav-child_process" href="child_process.html">Child Processes</a></li>
<li><a class="nav-cluster" href="cluster.html">Cluster</a></li>
<li><a class="nav-console" href="console.html">Console</a></li>
<li><a class="nav-crypto" href="crypto.html">Crypto</a></li>
<li><a class="nav-debugger" href="debugger.html">Debugger</a> </li>
<li><a class="nav-dns" href="dns.html">DNS</a></li>
<li><a class="nav-domain" href="domain.html">Domain</a></li>
<li><a class="nav-errors" href="errors.html">Errors</a></li>
<li><a class="nav-events" href="events.html">Events</a></li>
<li><a class="nav-fs" href="fs.html">File System</a></li>
<li><a class="nav-globals" href="globals.html">Globals</a></li>
<li><a class="nav-http" href="http.html">HTTP</a></li>
<li><a class="nav-https" href="https.html">HTTPS</a></li>
<li><a class="nav-modules" href="modules.html">Modules</a></li>
<li><a class="nav-net" href="net.html">Net</a></li>
<li><a class="nav-os" href="os.html">OS</a></li>
<li><a class="nav-path" href="path.html">Path</a></li>
<li><a class="nav-process" href="process.html">Process</a></li>
<li><a class="nav-punycode" href="punycode.html">Punycode</a></li>
<li><a class="nav-querystring" href="querystring.html">Query Strings</a></li>
<li><a class="nav-readline" href="readline.html">Readline</a></li>
<li><a class="nav-repl" href="repl.html">REPL</a></li>
<li><a class="nav-stream" href="stream.html">Stream</a></li>
<li><a class="nav-string_decoder" href="string_decoder.html">String Decoder</a></li>
<li><a class="nav-timers" href="timers.html">Timers</a></li>
<li><a class="nav-tls" href="tls.html">TLS/SSL</a></li>
<li><a class="nav-tty" href="tty.html">TTY</a></li>
<li><a class="nav-dgram" href="dgram.html">UDP/Datagram</a></li>
<li><a class="nav-url" href="url.html">URL</a></li>
<li><a class="nav-util" href="util.html">Utilities</a></li>
<li><a class="nav-v8" href="v8.html">V8</a></li>
<li><a class="nav-vm" href="vm.html">VM</a></li>
<li><a class="nav-zlib" href="zlib.html">ZLIB</a></li>
now call these pages by node.js
var Client = require('node-rest-client').Client;
client = new Client();
var fs = require('fs')
client.get("https://nodejs.org/api/buffer.html",
function(data, response){
console.log(data.toString());
});
now use fs to save the file
Related
how do I have to configure the "Wayfinder" in MODx to get a Bootstrap 5 output. specifically for the "Dropdown Submenue".
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav me-auto mb-2 mb-md-0">
<li class="nav-item active">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" role="button" data-bs-toggle="dropdown" aria-expanded="false" href="#">Project</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href="#">How-To</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</div>
I think it has to be the innerTpl and the innerRowTpl. The normal (level 1 menu) works. Just not the submenu.
How do I have to configure that?
The Wayfinder call:
[[Wayfinder? &startId=`0` &level=`2` &outerClass=`navbar-nav me-auto mb-2 mb-md-0` &rowTpl=`tpl_navigation-menu` &rowClass=`nav-item` &innerTpl=`innerTpl` &innerRowTpl=`innerRowTpl`]]
&rowTpl:
<li[[+wf.id]][[+wf.classes]]><a href="[[+wf.link]]" class="nav-link" title="[[+wf.title]]" [[+wf.attributes]]>[[+wf.linktext]]</a>[[+wf.wrapper]]</li>
&innerTpl and innerRowTpl is still blank.
Did someone have an Idea?
Wayfinder often confusing here unfortunately, please take a look at snippet documentation diagram, it will help you to understand which chunks are used to form menu child elements.
OK,
here is the final solution. (For those who struggels with the Wayfinder-Stuff as me)
[[Wayfinder?
&startId=`0`
&level=`2`
&outerClass=`navbar-nav me-auto mb-2 mb-md-0`
&innerClass=`dropdown-menu`
&rowTpl=`tpl_row`
&parentRowTpl=`tpl_parentrow`
&innerRowTpl=`tpl_innerrow`
]]
Chunk for tpl_row:
<li class="nav-item [[+wf.classnames]]">
<a class="nav-link" href="[[+wf.link]]">[[+wf.linktext]]</a>
[[+wf.wrapper]]
</li>
Chunk for tpl_parentrow:
<li class="nav-item dropdown [[+wf.classnames]]">
<a class="nav-link dropdown-toggle" role="button" data-bs-toggle="dropdown" aria-expanded="false" href="[[+wf.link]]">[[+wf.linktext]]</a>
[[+wf.wrapper]]
</li>
Chunk for tpl_innerrow:
<li class="[[+wf.classnames]]">
<a class="dropdown-item" href="[[+wf.link]]">[[+wf.linktext]]</a>
[[+wf.wrapper]]
</li>
the bootstrap can't show style right use those code:
<!DOCTYPE html>
<html class='no-js' lang='en'>
<head>
<meta charset='utf-8'>
<meta content='IE=edge,chrome=1' http-equiv='X-UA-Compatible'>
<title>登陆</title>
<link rel="stylesheet" href="/css/bootstrap.css">
</head>
<body class='main page'>
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">Link <span class="sr-only">(current)</span></li>
<li>Link</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
<li role="separator" class="divider"></li>
<li>One more separated link</li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li>Link</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<script type="text/javascript" src="/js/jquery.min.js"></script>
<script type="text/javascript" src="/js/bootstrap.js"></script>
</body>
</html>
it's so ugly.
i run it on vscode with node.js windows11, chrome.
this result is so ugly ,the net show is so pretty, what' wrong with my code which all are copied from the bootstrap net.
what's wrong with my code? it's all from the bootstrap.com
I want to get <a href> from this dataframe, but instead I get:
ValueError: Length of values does not match length of index.
This is what the DataFrame looks like
df.head(7)
0 <ul class="toc"> <li class="first"><a href="#d...
1 <ul class="toc"> <li><a href="#d17e906">1. LEE...
2 <ul class="toc"> <li><a href="#d17e974">2.1 Be...
3 <ul class="toc"> <li><a href="#d17e6333">3.1. ...
4 <ul class="toc"> <li><a href="#d17e23490">4.1 ...
5 <ul class="toc"> <li><a href="#d17e27196">5.1 ...
6 <ul class="toc"> <li><a href="#d17e54643">Bijl...
7 <ul class="toc"> <li><a href="#d17e55852">31. ...
This is the code I am using.
df = pd.read_html(url)[0]
response = requests.get(url)
soup = BeautifulSoup(response.text, 'html.parser')
ul_toc = soup.find_all('ul', class_= 'toc')
links = []
for a_tag in ul_toc:
extract= a_tag.find_all('li')
for each in extract:
try:
link = each.find('a')['href']
links.append(link)
except:
pass
df['Link'] = links
I am not sure what I am missing with the above code.
I can find it myself.
toc_class= soup.find_all('ul', class_='toc')
df= pd.DataFrame(data= toc_class)
links = []
for a_tag in toc_class:
extract= a_tag.find('li')
for each in extract:
try:
link = each.get('href')
links.append(link)
except:
pass
df['Link'] = links
df
and this is the output:
0 Link
0 <ul class="toc"> <li class="first"><a href="#d... #d17e58
1 <ul class="toc"> <li><a href="#d17e906">1. LEE... #d17e906
2 <ul class="toc"> <li><a href="#d17e974">2.1 Be... #d17e974
3 <ul class="toc"> <li><a href="#d17e6333">3.1. ... #d17e6333
4 <ul class="toc"> <li><a href="#d17e23490">4.1 ... #d17e23490
5 <ul class="toc"> <li><a href="#d17e27196">5.1 ... #d17e27196
6 <ul class="toc"> <li><a href="#d17e54643">Bijl... #d17e54643
7 <ul class="toc"> <li><a href="#d17e55852">31. ... #d17e55852
I'm wondering how to automate with watir the clicks on a on-screen keypad. I'm trying to automate the login on this web, but I don't know how to recognize the numbers and click on them:
https://bancaelectronica.evobanco.com/
If you look at the HTML of the keyboard, each key is simply a link:
<div class="virtual_keyboard active">
<ul>
<li><a data-target=".activeInput" class="keypad-btn value-key" href="javascript:void(0);">3</a></li>
<li><a data-target=".activeInput" class="keypad-btn value-key" href="javascript:void(0);">7</a></li>
<li><a data-target=".activeInput" class="keypad-btn value-key" href="javascript:void(0);">1</a></li>
<li><a data-target=".activeInput" class="keypad-btn value-key" href="javascript:void(0);">0</a></li>
<li><a data-target=".activeInput" class="keypad-btn value-key" href="javascript:void(0);">4</a></li>
<li><a data-target=".activeInput" class="keypad-btn value-key" href="javascript:void(0);">5</a></li>
<li><a data-target=".activeInput" class="keypad-btn value-key" href="javascript:void(0);">6</a></li>
<li><a data-target=".activeInput" class="keypad-btn value-key" href="javascript:void(0);">2</a></li>
<li><a data-target=".activeInput" class="keypad-btn value-key" href="javascript:void(0);">8</a></li>
<li class="correction">
<a id="btCorrect" href="javascript:void(0);" data-target=".activeInput" class="keypad-btn delete-key">Corregir</a>
</li>
<li>
<a data-target=".activeInput" class="keypad-btn value-key" href="javascript:void(0);">9</a>
</li>
</ul>
Cerrar
</div>
You simply need to:
Activate the keyboard by clicking on the password field
Clicking the key links by text (since they are randomly sorted)
An example of typing a password of "123":
browser = Watir::Browser.new :chrome
browser.goto('https://bancaelectronica.evobanco.com/')
# Activate the keyboard
browser.text_field(id: 'cFDMTuKLOsuyeXQ').click
# Wait until the keyboard appears
virtual_keyboard = browser.div(class: 'virtual_keyboard')
virtual_keyboard.wait_until_present
# Enter the password by clicking the number links
virtual_keyboard.link(text: '1').click
virtual_keyboard.link(text: '2').click
virtual_keyboard.link(text: '3').click
The same approach can be taken for other on-screen keyboards. However, the exact elements to interact with will depend on the page's implementation of the keyboard.
I am trying to implement a YUI2 Menu component into a JSF. I coded it in a normal HTML file and it works.
(source: alvinsim.com)
But when i ported the code to JSF, it didn't show properly. I think it is because JSF couldn't find the YUI2 skin.
(source: alvinsim.com)
I am using Netbeans 7.2, Java JDK6, and Glassfish3. My project structure is like this.
(source: alvinsim.com)
Below is my JSF code.
<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html">
<h:head>
<title>YUI2 Menu</title>
<h:outputStylesheet name="styles.css" library="css" />
<!-- ===== YUI Library Implementation ===== -->
<!-- Fonts CSS - Recommended but not required -->
<link rel="stylesheet" type="text/css"
href="#{facesContext.externalContext.requestContextPath}/resources/yui/fonts/fonts-min.css" />
<!-- <h:outputStylesheet name="yui/fonts/fonts-min.css" /> -->
<!-- Core + Skin CSS -->
<link rel="stylesheet" type="text/css"
href="#{facesContext.externalContext.requestContextPath}/resources/yui/menu/assets/skins/sam/menu.css" />
<!-- <h:outputStylesheet name="yui/menu/assets/skins/sam/menu.css" /> -->
<!-- Dependencies -->
<script src="#{facesContext.externalContext.requestContextPath}/resources/yui/yahoo-dom-event/yahoo-dom-event.js"></script>
<script src="#{facesContext.externalContext.requestContextPath}/resources/yui/container/container_core-min.js">
</script>
<!-- <h:outputScript name="yui/yahoo-dom-event/yahoo-dom-event.js" />
<h:outputScript name="yui/container/container_core-min.js" /> -->
<!-- Source File -->
<!-- <script src="#{facesContext.externalContext.requestContextPath}/resources/yui/menu/menu-min.js"></script> -->
<h:outputScript name="yui/menu/menu-min.js" />
<!-- ===== END ===== -->
</h:head>
<h:body>
<div id="mymenubar" class="yuimenubar yuimenubarnav">
<div class="bd">
<ul class="first-of-type">
<li class="yuimenubaritem first-of-type">
<a class="yuimenubaritemlabel" href="#file">File</a>
<div id="file" class="yuimenu">
<div class="bd">
<ul>
<li class="yuimenuitem">
<a class="yuimenuitemlabel" href="#">
New File <em class="helptext">Ctrl + N</em>
</a>
</li>
<li class="yuimenuitem">
<a class="yuimenuitemlabel" href="#">New Folder</a>
</li>
<li class="yuimenuitem">
<a class="yuimenuitemlabel" href="#open">Open <em class="helptext">
Ctrl + O</em>
</a>
<div id="open" class="yuimenu">
<div class="bd">
<ul class="first-of-type">
<li class="yuimenuitem">
<a class="yuimenuitemlabel" href="#">Application 1</a>
</li>
<li class="yuimenuitem">
<a class="yuimenuitemlabel" href="#">Application 2</a>
</li>
<li class="yuimenuitem">
<a class="yuimenuitemlabel" href="#">Application 3</a>
</li>
<li class="yuimenuitem">
<a class="yuimenuitemlabel" href="#">Application 4</a>
</li>
</ul>
</div>
</div>
</li>
<li class="yuimenuitem">
<a class="yuimenuitemlabel" href="#">
Print <em class="helptext">Ctrl + P</em>
</a>
</li>
</ul>
</div>
</div>
</li>
<li class="yuimenubaritem first-of-type">
<a class="yuimenubaritemlabel" href="#">Edit</a>
<div id="pim" class="yuimenu">
<div class="bd">
<ul class="first-of-type">
<li class="yuimenuitem">
<a class="yuimenuitemlabel" href="#"> Undo<em class="helptext">Ctrl + Z</em></a>
</li>
<li class="yuimenuitem">
<a class="yuimenuitemlabel" href="#"> Redo<em class="helptext">Ctrl + Y</em></a>
</li>
</ul>
<ul>
<li class="yuimenuitem">
<a class="yuimenuitemlabel" href="#"> Cut<em class="helptext">Ctrl + X</em></a>
</li>
<li class="yuimenuitem">
<a class="yuimenuitemlabel" href="#"> Copy<em class="helptext">Ctrl + C</em></a>
</li>
<li class="yuimenuitem">
<a class="yuimenuitemlabel" href="#">
Paste<em class="helptext">Ctrl + V</em>
</a>
</li>
<li class="yuimenuitem">
<a class="yuimenuitemlabel" href="#"> Delete<em class="helptext">Del</em></a>
</li>
</ul>
<ul>
<li class="yuimenuitem">
<a class="yuimenuitemlabel" href="#">
Select All<em class="helptext">Ctrl + A</em>
</a>
</li>
</ul>
<ul>
<li class="yuimenuitem">
<a class="yuimenuitemlabel" href="#"> Find<em class="helptext">Ctrl + F</em></a>
</li>
<li class="yuimenuitem">
<a class="yuimenuitemlabel" href="#">
Find Again<em class="helptext">Ctrl + G</em>
</a>
</li>
</ul>
</div>
</div>
</li>
<li class="yuimenubaritem first-of-type">
<a class="yuimenubaritemlabel" href="#">Very Long Menu</a>
<div id="longMenu" class="yuimenu">
<div class="bd">
<ul>
<li class="yuimenuitem">
<a class="yuimenuitemlabel" href="#">Very, very long Item 1</a>
</li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="#">Item 2</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="#">Item 3</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="#">Item 4</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="#">Item 5</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="#">Item 6</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="#">Item 7</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="#">Item 8</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="#">Item 9</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="#">Item 10</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="#">Item 11</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="#">Item 12</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="#">Item 13</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="#">Item 14</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="#">Item 15</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="#">Item 16</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="#">Item 17</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="#">Item 18</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="#">Item 19</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="#">Item 20</a></li>
</ul>
</div>
</div>
</li>
</ul>
</div>
</div>
<script>
YAHOO.util.Event.onDOMReady(function () {
// Instantiate a MenuBar, passing in the id of the HTML element
// representing the MenuBar.
var oMenuBar = new YAHOO.widget.MenuBar("mymenubar", {
autosubmenudisplay: true,
maxheight: 300
});
// Render the MenuBar instance
oMenuBar.render();
});
</script>
</h:body>
In my code, I did change from using the <link /> tag to <h:outputStylesheet /> tag (and same for the JavaScript), and it still doesn't work.
Can someone point me where I am doing it wrong?
After several rounds of debugging using firebug and IE9's own debugging tool, and code switching, I finally realized why it didn't work. It was a simple mistaken which was overlooked when porting my code from HTML to JSF.
The reason it didn't work is because I left out the code to load the YUI skin in the <h:body /> or parent element. So the <h:body /> tag should look like <h:body styleClass="yui-skin-sam">.
And the end result is below
(source: alvinsim.com)