mirror of
https://github.com/ArchiveBox/ArchiveBox.git
synced 2026-04-05 23:37:58 +10:00
wip 2
This commit is contained in:
Nick Sweeting
@@ -1,19 +1 @@
|
||||
from multiprocessing import Process
|
||||
|
||||
import pytest
|
||||
from .mock_server.server import start
|
||||
|
||||
server_process = None
|
||||
|
||||
@pytest.hookimpl
|
||||
def pytest_sessionstart(session):
|
||||
global server_process
|
||||
server_process = Process(target=start)
|
||||
server_process.start()
|
||||
|
||||
@pytest.hookimpl
|
||||
def pytest_sessionfinish(session):
|
||||
if server_process is not None:
|
||||
server_process.terminate()
|
||||
server_process.join()
|
||||
|
||||
@@ -24,6 +24,8 @@ def disable_extractors_dict():
|
||||
"SAVE_HEADERS": "false",
|
||||
"USE_GIT": "false",
|
||||
"SAVE_MEDIA": "false",
|
||||
"SAVE_ARCHIVE_DOT_ORG": "false"
|
||||
"SAVE_ARCHIVE_DOT_ORG": "false",
|
||||
"SAVE_TITLE": "false",
|
||||
"SAVE_FAVICON": "false",
|
||||
})
|
||||
return env
|
||||
|
||||
@@ -1,53 +0,0 @@
|
||||
from os import getcwd
|
||||
from pathlib import Path
|
||||
|
||||
from bottle import route, run, static_file, response, redirect
|
||||
|
||||
@route("/")
|
||||
def index():
|
||||
return "Hello"
|
||||
|
||||
@route("/static/<filename>")
|
||||
def static_path(filename):
|
||||
template_path = Path.cwd().resolve() / "tests/mock_server/templates"
|
||||
response = static_file(filename, root=template_path)
|
||||
return response
|
||||
|
||||
@route("/static_no_content_type/<filename>")
|
||||
def static_no_content_type(filename):
|
||||
template_path = Path.cwd().resolve() / "tests/mock_server/templates"
|
||||
response = static_file(filename, root=template_path)
|
||||
response.set_header("Content-Type", "")
|
||||
return response
|
||||
|
||||
@route("/static/headers/<filename>")
|
||||
def static_path_with_headers(filename):
|
||||
template_path = Path.cwd().resolve() / "tests/mock_server/templates"
|
||||
response = static_file(filename, root=template_path)
|
||||
response.add_header("Content-Language", "en")
|
||||
response.add_header("Content-Script-Type", "text/javascript")
|
||||
response.add_header("Content-Style-Type", "text/css")
|
||||
return response
|
||||
|
||||
@route("/static/400/<filename>", method="HEAD")
|
||||
def static_400(filename):
|
||||
template_path = Path.cwd().resolve() / "tests/mock_server/templates"
|
||||
response = static_file(filename, root=template_path)
|
||||
response.status = 400
|
||||
response.add_header("Status-Code", "400")
|
||||
return response
|
||||
|
||||
@route("/static/400/<filename>", method="GET")
|
||||
def static_200(filename):
|
||||
template_path = Path.cwd().resolve() / "tests/mock_server/templates"
|
||||
response = static_file(filename, root=template_path)
|
||||
response.add_header("Status-Code", "200")
|
||||
return response
|
||||
|
||||
@route("/redirect/headers/<filename>")
|
||||
def redirect_to_static(filename):
|
||||
redirect(f"/static/headers/$filename")
|
||||
|
||||
|
||||
def start():
|
||||
run(host='localhost', port=8080, quiet=True)
|
||||
@@ -1 +0,0 @@
|
||||
{"href":"http://127.0.0.1:8080/static/example.com.html","description":"Example","extended":"","meta":"18a973f09c9cc0608c116967b64e0419","hash":"910293f019c2f4bb1a749fb937ba58e3","time":"2014-06-14T15:51:42Z","shared":"no","toread":"no","tags":"Tag1 Tag2","trap":"http://www.example.com/should-not-exist"}
|
||||
@@ -1,24 +0,0 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<feed
|
||||
xml:lang="en"
|
||||
xmlns="http://www.w3.org/2005/Atom"
|
||||
>
|
||||
<id>http://www.example.com/</id>
|
||||
<title>Example of an Atom feed</title>
|
||||
<link rel="self" type="application/atom+xml" href="http://www.example.com/index.atom" />
|
||||
<link rel="alternate" type="text/html" href="http://www.example.com/" />
|
||||
<author>
|
||||
<name>Jim Winstead</name>
|
||||
</author>
|
||||
<updated>2024-02-26T03:18:26Z</updated>
|
||||
<entry>
|
||||
<title>Example</title>
|
||||
<link rel="alternate" type="text/html" href="http://127.0.0.1:8080/static/example.com.html" />
|
||||
<id>tag:example.com,2024-02-25:3319</id>
|
||||
<updated>2024-02-26T03:18:26Z</updated>
|
||||
<published>2024-02-25T19:18:25-08:00</published>
|
||||
<category term="Tag1" scheme="http://example.com/archive" />
|
||||
<category term="Tag2" scheme="http://example.com/archive" />
|
||||
<content type="html">This is some <b>content</b></content>
|
||||
</entry>
|
||||
</feed>
|
||||
@@ -1,49 +0,0 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Example Domain</title>
|
||||
|
||||
<meta charset="utf-8"/>
|
||||
<meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1"/>
|
||||
<style type="text/css">
|
||||
body {
|
||||
background-color: #f0f0f2;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
|
||||
}
|
||||
div {
|
||||
width: 600px;
|
||||
margin: 5em auto;
|
||||
padding: 2em;
|
||||
background-color: #fdfdff;
|
||||
border-radius: 0.5em;
|
||||
box-shadow: 2px 3px 7px 2px rgba(0, 0, 0, 0.02);
|
||||
}
|
||||
a:link,
|
||||
a:visited {
|
||||
color: #38488f;
|
||||
text-decoration: none;
|
||||
}
|
||||
@media(max-width: 700px) {
|
||||
div {
|
||||
margin: 0 auto;
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div>
|
||||
<h1>Example Domain</h1>
|
||||
<p>This domain is for use in illustrative examples in documents. You may use this
|
||||
domain in literature without prior coordination or asking for permission.</p>
|
||||
<p>
|
||||
<a href="http://127.0.0.1:8080/static/iana.org.html">More information...</a>
|
||||
</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,6 +0,0 @@
|
||||
[
|
||||
{"href":"http://127.0.0.1:8080/static/example.com.html","description":"Example","extended":"","meta":"18a973f09c9cc0608c116967b64e0419","hash":"910293f019c2f4bb1a749fb937ba58e3","time":"2014-06-14T15:51:42Z","shared":"no","toread":"no","tags":"Tag1 Tag2","trap":"http://www.example.com/should-not-exist"},
|
||||
{"href":"http://127.0.0.1:8080/static/iana.org.html","description":"Example 2","extended":"","meta":"18a973f09c9cc0608c116967b64e0419","hash":"910293f019c2f4bb1a749fb937ba58e3","time":"2014-06-14T15:51:43Z","shared":"no","toread":"no","tags":"Tag3,Tag4 with Space"},
|
||||
{"href":"http://127.0.0.1:8080/static/shift_jis.html","description":"Example 2","extended":"","meta":"18a973f09c9cc0608c116967b64e0419","hash":"910293f019c2f4bb1a749fb937ba58e3","time":"2014-06-14T15:51:44Z","shared":"no","toread":"no","tags":["Tag5","Tag6 with Space"]},
|
||||
{"href":"http://127.0.0.1:8080/static/title_og_with_html","description":"Example 2","extended":"","meta":"18a973f09c9cc0608c116967b64e0419","hash":"910293f019c2f4bb1a749fb937ba58e3","time":"2014-06-14T15:51:45Z","shared":"no","toread":"no"}
|
||||
]
|
||||
@@ -1,2 +0,0 @@
|
||||
this line would cause problems but --parser=json will actually skip it
|
||||
[{"href":"http://127.0.0.1:8080/static/example.com.html","description":"Example","extended":"","meta":"18a973f09c9cc0608c116967b64e0419","hash":"910293f019c2f4bb1a749fb937ba58e3","time":"2014-06-14T15:51:42Z","shared":"no","toread":"no","tags":"Tag1 Tag2","trap":"http://www.example.com/should-not-exist"}]
|
||||
@@ -1,4 +0,0 @@
|
||||
{"href":"http://127.0.0.1:8080/static/example.com.html","description":"Example","extended":"","meta":"18a973f09c9cc0608c116967b64e0419","hash":"910293f019c2f4bb1a749fb937ba58e3","time":"2014-06-14T15:51:42Z","shared":"no","toread":"no","tags":"Tag1 Tag2","trap":"http://www.example.com/should-not-exist"}
|
||||
{"href":"http://127.0.0.1:8080/static/iana.org.html","description":"Example 2","extended":"","meta":"18a973f09c9cc0608c116967b64e0419","hash":"910293f019c2f4bb1a749fb937ba58e3","time":"2014-06-14T15:51:43Z","shared":"no","toread":"no","tags":"Tag3,Tag4 with Space"}
|
||||
{"href":"http://127.0.0.1:8080/static/shift_jis.html","description":"Example 2","extended":"","meta":"18a973f09c9cc0608c116967b64e0419","hash":"910293f019c2f4bb1a749fb937ba58e3","time":"2014-06-14T15:51:44Z","shared":"no","toread":"no","tags":["Tag5","Tag6 with Space"]}
|
||||
{"href":"http://127.0.0.1:8080/static/title_og_with_html","description":"Example 2","extended":"","meta":"18a973f09c9cc0608c116967b64e0419","hash":"910293f019c2f4bb1a749fb937ba58e3","time":"2014-06-14T15:51:45Z","shared":"no","toread":"no"}
|
||||
@@ -1,32 +0,0 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<rss version="2.0"
|
||||
xmlns:dc="http://purl.org/dc/elements/1.1/"
|
||||
xmlns:admin="http://webns.net/mvcb/"
|
||||
xmlns:content="http://purl.org/rss/1.0/modules/content/"
|
||||
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#">
|
||||
<channel>
|
||||
<title>Sample Feed</title>
|
||||
<link>http://example.org/</link>
|
||||
<description>For documentation only</description>
|
||||
<dc:language>en-us</dc:language>
|
||||
<dc:creator>Nobody (nobody@example.org)</dc:creator>
|
||||
<dc:rights>Public domain</dc:rights>
|
||||
<dc:date>2024-02-26T17:28:12-08:00</dc:date>
|
||||
<admin:generatorAgent rdf:resource="http://www.example.org/"/>
|
||||
<admin:errorReportsTo rdf:resource="mailto:nobody@example.org"/>
|
||||
|
||||
<item>
|
||||
<title>First!</title>
|
||||
<link>http://127.0.0.1:8080/static/example.com.html</link>
|
||||
<guid isPermaLink="false">just-an@example.org</guid>
|
||||
<description>
|
||||
This has a description.
|
||||
</description>
|
||||
<dc:subject>Tag1 Tag2</dc:subject>
|
||||
<dc:date>2024-02-26T17:28:12-08:00</dc:date>
|
||||
<content:encoded><![CDATA[
|
||||
This has a <b>description</b>.]]>
|
||||
</content:encoded>
|
||||
</item>
|
||||
</channel>
|
||||
</rss>
|
||||
@@ -1,390 +0,0 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<title>IANA — IANA-managed Reserved Domains</title>
|
||||
|
||||
<meta charset="utf-8"/>
|
||||
<meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1"/>
|
||||
|
||||
<link rel="stylesheet" media="screen" href="/_css/2015.1/screen.css"/>
|
||||
<link rel="stylesheet" media="print" href="/_css/2015.1/print.css"/>
|
||||
<link rel="shortcut icon" type="image/ico" href="/_img/bookmark_icon.ico"/>
|
||||
|
||||
<script type="text/javascript" src="/_js/2013.1/jquery.js"></script>
|
||||
<script type="text/javascript" src="/_js/2013.1/iana.js"></script>
|
||||
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<header>
|
||||
<div id="header">
|
||||
<div id="logo">
|
||||
<a href="/"><img src="/_img/2013.1/iana-logo-header.svg" alt="Homepage"/></a>
|
||||
</div>
|
||||
<div class="navigation">
|
||||
<ul>
|
||||
<li><a href="/domains">Domains</a></li>
|
||||
<li><a href="/numbers">Numbers</a></li>
|
||||
<li><a href="/protocols">Protocols</a></li>
|
||||
<li><a href="/about">About Us</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div id="body">
|
||||
|
||||
|
||||
<div id="main_right">
|
||||
|
||||
|
||||
<h1>IANA-managed Reserved Domains</h1>
|
||||
|
||||
<p>Certain domains are set aside, and nominally registered to “IANA”, for specific
|
||||
policy or technical purposes.</p>
|
||||
|
||||
<h2>Example domains</h2>
|
||||
|
||||
<p>As described in
|
||||
<a href="/go/rfc2606">RFC 2606</a>
|
||||
and
|
||||
<a href="/go/rfc6761">RFC 6761</a>,
|
||||
a number of domains such as
|
||||
<span class="domain label">example.com</span>
|
||||
and
|
||||
<span class="domain label">example.org</span>
|
||||
are maintained for documentation purposes. These domains may be used as illustrative
|
||||
examples in documents without prior coordination with us. They are
|
||||
not available for registration or transfer.</p>
|
||||
|
||||
<h2>Test IDN top-level domains</h2>
|
||||
|
||||
<p>These domains were temporarily delegated by IANA for the
|
||||
<a href="http://www.icann.org/topics/idn/">IDN Evaluation</a>
|
||||
being conducted by
|
||||
<a href="http://www.icann.org/">ICANN</a>.</p>
|
||||
|
||||
<div class="iana-table-frame">
|
||||
<table id="arpa-table" class="iana-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Domain</th>
|
||||
<th>Domain (A-label)</th>
|
||||
<th>Language</th>
|
||||
<th>Script</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>إختبار</td>
|
||||
<td>
|
||||
<span class="domain label">
|
||||
<a href="/domains/root/db/xn--kgbechtv.html">XN--KGBECHTV</a>
|
||||
</span>
|
||||
</td>
|
||||
<td>Arabic</td>
|
||||
<td>Arabic</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>آزمایشی</td>
|
||||
<td>
|
||||
<span class="domain label">
|
||||
<a href="/domains/root/db/xn--hgbk6aj7f53bba.html">XN--HGBK6AJ7F53BBA</a>
|
||||
</span>
|
||||
</td>
|
||||
<td>Persian</td>
|
||||
<td>Arabic</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>测试</td>
|
||||
<td>
|
||||
<span class="domain label">
|
||||
<a href="/domains/root/db/xn--0zwm56d.html">XN--0ZWM56D</a>
|
||||
</span>
|
||||
</td>
|
||||
<td>Chinese</td>
|
||||
<td>Han (Simplified variant)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>測試</td>
|
||||
<td>
|
||||
<span class="domain label">
|
||||
<a href="/domains/root/db/xn--g6w251d.html">XN--G6W251D</a>
|
||||
</span>
|
||||
</td>
|
||||
<td>Chinese</td>
|
||||
<td>Han (Traditional variant)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>испытание</td>
|
||||
<td>
|
||||
<span class="domain label">
|
||||
<a href="/domains/root/db/xn--80akhbyknj4f.html">XN--80AKHBYKNJ4F</a>
|
||||
</span>
|
||||
</td>
|
||||
<td>Russian</td>
|
||||
<td>Cyrillic</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>परीक्षा</td>
|
||||
<td>
|
||||
<span class="domain label">
|
||||
<a href="/domains/root/db/xn--11b5bs3a9aj6g.html">XN--11B5BS3A9AJ6G</a>
|
||||
</span>
|
||||
</td>
|
||||
<td>Hindi</td>
|
||||
<td>Devanagari (Nagari)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>δοκιμή</td>
|
||||
<td>
|
||||
<span class="domain label">
|
||||
<a href="/domains/root/db/xn--jxalpdlp.html">XN--JXALPDLP</a>
|
||||
</span>
|
||||
</td>
|
||||
<td>Greek, Modern (1453-)</td>
|
||||
<td>Greek</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>테스트</td>
|
||||
<td>
|
||||
<span class="domain label">
|
||||
<a href="/domains/root/db/xn--9t4b11yi5a.html">XN--9T4B11YI5A</a>
|
||||
</span>
|
||||
</td>
|
||||
<td>Korean</td>
|
||||
<td>Hangul (Hangŭl, Hangeul)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>טעסט</td>
|
||||
<td>
|
||||
<span class="domain label">
|
||||
<a href="/domains/root/db/xn--deba0ad.html">XN--DEBA0AD</a>
|
||||
</span>
|
||||
</td>
|
||||
<td>Yiddish</td>
|
||||
<td>Hebrew</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>テスト</td>
|
||||
<td>
|
||||
<span class="domain label">
|
||||
<a href="/domains/root/db/xn--zckzah.html">XN--ZCKZAH</a>
|
||||
</span>
|
||||
</td>
|
||||
<td>Japanese</td>
|
||||
<td>Katakana</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>பரிட்சை</td>
|
||||
<td>
|
||||
<span class="domain label">
|
||||
<a href="/domains/root/db/xn--hlcj6aya9esc7a.html">XN--HLCJ6AYA9ESC7A</a>
|
||||
</span>
|
||||
</td>
|
||||
<td>Tamil</td>
|
||||
<td>Tamil</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<h2>Policy-reserved domains</h2>
|
||||
|
||||
<p>We act as both the registrant and registrar for a select number of domains
|
||||
which have been reserved under policy grounds. These exclusions are
|
||||
typically indicated in either technical standards (RFC documents),
|
||||
or
|
||||
<a href="http://www.icann.org/en/registries/agreements.htm">contractual limitations</a>.</p>
|
||||
|
||||
<p>Domains which are described as registered to IANA or ICANN on policy
|
||||
grounds are not available for registration or transfer, with the exception
|
||||
of
|
||||
<span class="domain label">
|
||||
<i>country-name</i>.info</span>
|
||||
domains. These domains are available for release
|
||||
by the ICANN Governmental Advisory Committee Secretariat.</p>
|
||||
|
||||
<h2>Other Special-Use Domains</h2>
|
||||
|
||||
<p>There is additionally a
|
||||
<a href="/assignments/special-use-domain-names">Special-Use Domain Names</a>
|
||||
registry documenting special-use domains designated by technical standards. For further information, see
|
||||
<a href="/go/rfc6761">Special-Use Domain Names</a>
|
||||
(RFC 6761).</p>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<div id="sidebar_left">
|
||||
<div class="navigation_box">
|
||||
<h2>Domain Names</h2>
|
||||
<ul>
|
||||
<li id="nav_dom_top">
|
||||
<a href="/domains">Overview</a>
|
||||
</li>
|
||||
<li id="nav_dom_root">
|
||||
<a href="/domains/root">Root Zone Management</a>
|
||||
</li>
|
||||
<ul id="nav_dom_root_sub">
|
||||
<li id="nav_dom_root_top">
|
||||
<a href="/domains/root">Overview</a>
|
||||
</li>
|
||||
<li id="nav_dom_root_db">
|
||||
<a href="/domains/root/db">Root Database</a>
|
||||
</li>
|
||||
<li id="nav_dom_root_files">
|
||||
<a href="/domains/root/files">Hint and Zone Files</a>
|
||||
</li>
|
||||
<li id="nav_dom_root_manage">
|
||||
<a href="/domains/root/manage">Change Requests</a>
|
||||
</li>
|
||||
<li id="nav_dom_root_procedures">
|
||||
<a href="/domains/root/help">Instructions & Guides</a>
|
||||
</li>
|
||||
<li id="nav_dom_root_servers">
|
||||
<a href="/domains/root/servers">Root Servers</a>
|
||||
</li>
|
||||
</ul>
|
||||
<li id="nav_dom_int">
|
||||
<a href="/domains/int">.INT Registry</a>
|
||||
</li>
|
||||
<ul id="nav_dom_int_sub">
|
||||
<li id="nav_dom_int_top">
|
||||
<a href="/domains/int">Overview</a>
|
||||
</li>
|
||||
<li id="nav_dom_int_manage">
|
||||
<a href="/domains/int/manage">Register/modify an .INT domain</a>
|
||||
</li>
|
||||
<li id="nav_dom_int_policy">
|
||||
<a href="/domains/int/policy">Eligibility</a>
|
||||
</li>
|
||||
</ul>
|
||||
<li id="nav_dom_arpa">
|
||||
<a href="/domains/arpa">.ARPA Registry</a>
|
||||
</li>
|
||||
<li id="nav_dom_idn">
|
||||
<a href="/domains/idn-tables">IDN Practices Repository</a>
|
||||
</li>
|
||||
<ul id="nav_dom_idn_sub">
|
||||
<li id="nav_dom_idn_top">
|
||||
<a href="/domains/idn-tables">Overview</a>
|
||||
</li>
|
||||
<!-- <li id="nav_dom_idn_tables"><a href="/domains/idn-tables/db">Tables</a></li> -->
|
||||
<li id="nav_dom_idn_submit">
|
||||
<a href="/procedures/idn-repository.html">Submit a table</a>
|
||||
</li>
|
||||
</ul>
|
||||
<li id="nav_dom_dnssec">
|
||||
<a href="/dnssec">Root Key Signing Key (DNSSEC)</a>
|
||||
</li>
|
||||
<ul id="nav_dom_dnssec_sub">
|
||||
<li id="nav_dom_dnssec_top">
|
||||
<a href="/dnssec">Overview</a>
|
||||
</li>
|
||||
<li id="nav_dom_dnssec_ksk">
|
||||
<a href="/dnssec/files">Trusts Anchors and Keys</a>
|
||||
</li>
|
||||
<li id="nav_dom_dnssec_ceremonies">
|
||||
<a href="/dnssec/ceremonies">Root KSK Ceremonies</a>
|
||||
</li>
|
||||
<li id="nav_dom_dnssec_dps">
|
||||
<a href="/dnssec/dps">Practice Statement</a>
|
||||
</li>
|
||||
<li id="nav_dom_dnssec_tcrs">
|
||||
<a href="/dnssec/tcrs">Community Representatives</a>
|
||||
</li>
|
||||
</ul>
|
||||
<li id="nav_dom_special">
|
||||
<a href="/domains/reserved">Reserved Domains</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<footer>
|
||||
<div id="footer">
|
||||
<table class="navigation">
|
||||
<tr>
|
||||
<td class="section">
|
||||
<a href="/domains">Domain Names</a>
|
||||
</td>
|
||||
<td class="subsection">
|
||||
<ul>
|
||||
<li><a href="/domains/root">Root Zone Registry</a></li>
|
||||
<li><a href="/domains/int">.INT Registry</a></li>
|
||||
<li><a href="/domains/arpa">.ARPA Registry</a></li>
|
||||
<li><a href="/domains/idn-tables">IDN Repository</a></li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="section">
|
||||
<a href="/numbers">Number Resources</a>
|
||||
</td>
|
||||
<td class="subsection">
|
||||
<ul>
|
||||
<li><a href="/abuse">Abuse Information</a></li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="section">
|
||||
<a href="/protocols">Protocols</a>
|
||||
</td>
|
||||
<td class="subsection">
|
||||
<ul>
|
||||
<li><a href="/protocols">Protocol Registries</a></li>
|
||||
<li><a href="/time-zones">Time Zone Database</a></li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="section">
|
||||
<a href="/about">About Us</a>
|
||||
</td>
|
||||
<td class="subsection">
|
||||
<ul>
|
||||
<li><a href="/about/presentations">Presentations</a></li>
|
||||
<li><a href="/reports">Reports</a></li>
|
||||
<li><a href="/performance">Performance</a></li>
|
||||
<li><a href="/reviews">Reviews</a></li>
|
||||
<li><a href="/about/excellence">Excellence</a></li>
|
||||
<li><a href="/contact">Contact Us</a></li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<div id="custodian">
|
||||
<p>The IANA functions coordinate the Internet’s globally unique identifiers, and
|
||||
are provided by
|
||||
<a href="http://pti.icann.org">Public Technical Identifiers</a>, an affiliate of
|
||||
<a href="http://www.icann.org/">ICANN</a>.</p>
|
||||
</div>
|
||||
|
||||
<div id="legalnotice">
|
||||
<ul>
|
||||
<li><a href="https://www.icann.org/privacy/policy">Privacy Policy</a></li>
|
||||
<li><a href="https://www.icann.org/privacy/tos">Terms of Service</a></li>
|
||||
</ul>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html></footer><script>
|
||||
$(document).ready(function () {
|
||||
$("#nav_dom_special").addClass("selected")
|
||||
$("#nav_dom_int_sub").hide()
|
||||
$("#nav_dom_idn_sub").hide()
|
||||
$("#nav_dom_dnssec_sub").hide()
|
||||
$("#nav_dom_tools_sub").hide()
|
||||
$("#nav_dom_root_sub").hide()
|
||||
});</script></body></html>
|
||||
@@ -1,8 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head
|
||||
</head>
|
||||
<bo
|
||||
<title>malformed document</title>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,769 +0,0 @@
|
||||
<HTML>
|
||||
<head>
|
||||
<meta http-equiv="content-type" content="text/html; charset=Shift_JIS"/>
|
||||
<META http-equiv='Content-Style-Type' content='text/css'>
|
||||
<meta name="keywords" content="鹿児島,かごしま,ニュース,報道,天気,気象,事件,事故､地域情報,イベント"/>
|
||||
<meta property="og:title" content="鹿児島のニュース｜MBC南日本放送">
|
||||
<meta property="og:description" content="鹿児島のニュース MBC南日本放送">
|
||||
<meta property="og:image" content="http://www.mbc.co.jp/news/img/image.png">
|
||||
<meta property="og:type" content="website"/>
|
||||
<meta property="og:url" contetnt="http://www.mbc.co.jp/news/">
|
||||
<meta property="og:locale" content="ja_JP"/>
|
||||
<title>鹿児島のニュース｜MBC南日本放送</title>
|
||||
<script type="text/javascript" src="../../ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
|
||||
<script type="text/javascript" src="js/scrolltopcontrol.js"></script>
|
||||
<script type="text/javascript" src="js/scrollsmoothly.js" charset="utf-8"></script>
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0">
|
||||
<meta http-equiv="imagetoolbar" content="no">
|
||||
<SCRIPT language="JavaScript" src="js/toggle.js"></SCRIPT>
|
||||
<link rel="stylesheet" type="text/css" href="mbcnews.css">
|
||||
<link
|
||||
rel="stylesheet" href="../mbc-globalnav/mbc-globalnav.css" charset="utf-8">
|
||||
|
||||
<!-- Global site tag (gtag.js) - Google Analytics -->
|
||||
<script async src="../../www.googletagmanager.com/gtag/js@id=UA-22520034-2"></script>
|
||||
<script>
|
||||
window.dataLayer = window.dataLayer || [];
|
||||
function gtag() {
|
||||
dataLayer.push(arguments);
|
||||
}
|
||||
gtag('js', new Date());
|
||||
|
||||
gtag('config', 'UA-22520034-2');
|
||||
</script>
|
||||
<!-- Global site tag (gtag.js) - Google Analytics END -->
|
||||
|
||||
|
||||
<!-- アドセンス -->
|
||||
<script async src="../../securepubads.g.doubleclick.net/tag/js/gpt.js"></script>
|
||||
<link rel="stylesheet" href="../css/adsence.css">
|
||||
<script>
|
||||
window.googletag = window.googletag || {
|
||||
cmd: []
|
||||
};
|
||||
googletag.cmd.push(function () {
|
||||
googletag.defineSlot('/193632318/LMC/LMC_TV/mbc/PC_all/rectangle1', [
|
||||
[
|
||||
1, 1
|
||||
],
|
||||
[
|
||||
300, 250
|
||||
],
|
||||
[
|
||||
300, 600
|
||||
]
|
||||
], 'div-gpt-ad-1570102688339-0').addService(googletag.pubads());
|
||||
googletag.defineSlot('/193632318/LMC/LMC_TV/mbc/PC_all/rectangle2', [
|
||||
[
|
||||
1, 1
|
||||
],
|
||||
[
|
||||
300, 250
|
||||
],
|
||||
[
|
||||
300, 600
|
||||
]
|
||||
], 'div-gpt-ad-1570102823361-0').addService(googletag.pubads());
|
||||
googletag.pubads().enableSingleRequest();
|
||||
googletag.enableServices();
|
||||
});
|
||||
</script>
|
||||
<script>
|
||||
window.googletag = window.googletag || {
|
||||
cmd: []
|
||||
};
|
||||
googletag.cmd.push(function () {
|
||||
googletag.defineSlot('/193632318/LMC/LMC_TV/mbc/SP_all/rectangle1', [
|
||||
[
|
||||
1, 1
|
||||
],
|
||||
[
|
||||
300, 250
|
||||
]
|
||||
], 'div-gpt-ad-1570102909947-0').addService(googletag.pubads());
|
||||
googletag.pubads().enableSingleRequest();
|
||||
googletag.enableServices();
|
||||
});
|
||||
</script>
|
||||
<!-- アドセンス END-->
|
||||
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<!--ヘッダー-->
|
||||
<nav id="mbc-globalnav" class="mbc-globalnav" role="navigation"></nav>
|
||||
<script src="../mbc-globalnav/mbc-globalnav.js" charset="utf-8"></script>
|
||||
<!--ヘッダー-->
|
||||
|
||||
<DIV id="mbcnews-header">
|
||||
<h1>MBC NEWS</h1>
|
||||
|
||||
<DIV class="mbcnews-follow">
|
||||
<ul>
|
||||
<li class="follow-t">フォローする</li>
|
||||
<li>
|
||||
<a class="tw-follow-btn" href="https://twitter.com/intent/follow?screen_name=MBC_newsnow" target="_blank" onclick="window.open(this.href, 'window', 'width=600, height=400, menubar=no, toolbar=no, scrollbars=yes'); return false;"><IMG src="../sns/img/twitter.png"></a>
|
||||
</li>
|
||||
<li>
|
||||
<A href="https://www.facebook.com/mbc.newsnow" target="_blank"><IMG src="../sns/img/facebook.png"></A>
|
||||
</li>
|
||||
</ul>
|
||||
</DIV>
|
||||
</DIV>
|
||||
<!-- end #mbcnews-header -->
|
||||
|
||||
|
||||
<DIV id='mbcnews-top'>
|
||||
<h2 id='200722'>07月22日(水)</h2>
|
||||
<li>
|
||||
<a href='https://www.mbc.co.jp/news/mbc_news.php?ibocd=2020072200043706&ap='><IMG src='img/mbcnews.png'><h3>諏訪之瀬島で爆発 噴煙１２００メートル
|
||||
<span>[23:10]</span>
|
||||
</h3>
|
||||
<p>十島村の諏訪之瀬島で２２日夜、爆発的噴火が発生し、噴煙が火口から１２００メートルの高さまで上がりました。</p>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href='https://www.mbc.co.jp/news/mbc_news.php?ibocd=2020072200043705&ap='><IMG src='../web-news2/2020072200043705.jpg'><h3>二十四節気「大暑」 鹿児島市で３５．５度 初の猛暑日<span>[20:03]</span>
|
||||
</h3>
|
||||
<p>２２日は二十四節気の一つ「大暑」で、１年で最も暑い時期とされます。</p>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href='https://www.mbc.co.jp/news/mbc_news.php?ibocd=2020072200043704&ap='><IMG src='../web-news2/2020072200043704.jpg'><h3>「ＧｏＴｏトラベル」キャンペーン開始 戸惑いと不安の声も<span>[20:02]</span>
|
||||
</h3>
|
||||
<p>新型コロナウイルスの影響で打撃を受けている観光業界を支援する国の「ＧｏＴｏトラベル」キャンペーンが２２日から始まりました。</p>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href='https://www.mbc.co.jp/news/mbc_news.php?ibocd=2020072200043701&ap='><IMG src='../web-news2/2020072200043701.jpg'><h3>４連休前に 鹿児島空港で新型コロナ対策強化 出発客の検温も<span>[19:48]</span>
|
||||
</h3>
|
||||
<p>２３日からの４連休、新型コロナウイルスの対策を強化するため、鹿児島空港ではサーモグラフィーが増設され、新たに出発客の体温測定も始まりました。</p>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href='https://www.mbc.co.jp/news/mbc_news.php?ibocd=2020072200043703&ap='><IMG src='../web-news2/2020072200043703.jpg'><h3>新型コロナ新たに２人感染 クラスター落ち着くも対策継続を<span>[19:48]</span>
|
||||
</h3>
|
||||
<p>鹿児島県内では２２日、新型コロナウイルスの感染者が新たに２人確認され、累計は１７４人となりました。</p>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href='https://www.mbc.co.jp/news/mbc_news.php?ibocd=2020072200043700&ap='><IMG src='../web-news2/2020072200043700.jpg'><h3>記録的大雨で被害 鹿児島県伊佐市を江藤農水相が視察<span>[19:47]</span>
|
||||
</h3>
|
||||
<p>今月上旬の記録的大雨で大きな被害を受けた鹿児島県伊佐市を２２日、江藤拓農林水産大臣が訪れ、農業被害の状況などを確認しました。</p>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href='https://www.mbc.co.jp/news/mbc_news.php?ibocd=2020072200043699&ap='><IMG src='../web-news2/2020072200043699.jpg'><h3>高校野球”代替大会” 決勝トーナメントが開幕<span>[19:46]</span>
|
||||
</h3>
|
||||
<p>新型コロナウイルスの影響で中止となった鹿児島県の夏の高校野球の代替大会は、２２日から各地区の代表１６校による決勝トーナメントが始まりました。</p>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href='https://www.mbc.co.jp/news/mbc_news.php?ibocd=2020072200043697&ap='><IMG src='../web-news2/2020072200043697.jpg'><h3>小学校の校庭の木でアオバズクが子育て中 鹿児島県阿久根市<span>[19:44]</span>
|
||||
</h3>
|
||||
<p>鹿児島県阿久根市の小学校の校庭に植えられた木で、アオバズクが子育てをしていて、学校の子どもたちがその様子を見守っています。</p>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href='https://www.mbc.co.jp/news/mbc_news.php?ibocd=2020072200043698&ap='><IMG src='../web-news2/2020072200043698.jpg'><h3>新鹿児島県知事・塩田康一氏に聞く 新総合体育館整備と本港区再開発<span>[19:44]</span>
|
||||
</h3>
|
||||
<p>来週２８日に知事に就任する塩田康一さんに、県政の課題を聞くシリーズ。</p>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href='https://www.mbc.co.jp/news/mbc_news.php?ibocd=2020072200043696&ap='><IMG src='../web-news2/2020072200043696.jpg'><h3>保育園児も収穫 ブドウのはさみ入れ式 薩摩川内市<span>[19:43]</span>
|
||||
</h3>
|
||||
<p>鹿児島県内有数のブドウの産地、薩摩川内市のブドウ園で２２日、はさみ入れ式が行われました。</p>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href='https://www.mbc.co.jp/news/mbc_news.php?ibocd=2020072200043695&ap='><IMG src='../web-news2/2020072200043695.jpg'><h3>鹿児島県新型コロナ 新たに２人感染確認
|
||||
<span>[18:10]</span>
|
||||
</h3>
|
||||
<p>鹿児島県は２２日、新型コロナウイルスの感染者を新たに２人確認したと発表しました。</p>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href='https://www.mbc.co.jp/news/mbc_news.php?ibocd=2020072200043692&ap='><IMG src='../web-news2/2020072200043692.jpg'><h3>飲食店経営者らが新型コロナ対策を学ぶ 鹿児島市<span>[16:14]</span>
|
||||
</h3>
|
||||
<p>鹿児島市で２２日、飲食店などの経営者らが新型コロナ対策を学ぶ、研修会が開かれました。</p>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href='https://www.mbc.co.jp/news/mbc_news.php?ibocd=2020072200043691&ap='><IMG src='../web-news2/2020072200043691.jpg'><h3>老舗ホテルが営業再開 プール開き 鹿児島県指宿市<span>[16:13]</span>
|
||||
</h3>
|
||||
<p>鹿児島県指宿市の老舗ホテル、指宿白水館で本格的な夏を前に、恒例のプール開きが行われました。</p>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href='https://www.mbc.co.jp/news/mbc_news.php?ibocd=2020072200043688&ap='><IMG src='../web-news2/2020072200043688.jpg'><h3>鹿児島空港にサーモグラフィー３台設置 連休前に新型コロナ対策強化<span>[12:20]</span>
|
||||
</h3>
|
||||
<p>２３日からの４連休を前に鹿児島空港の国内線には、新型コロナウイルスの感染拡大を防ぐため、検温用の新たなサーモグラフィー３台が設置されました。</p>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href='https://www.mbc.co.jp/news/mbc_news.php?ibocd=2020072200043689&ap='><IMG src='../web-news2/2020072200043689.jpg'><h3>新型コロナで発表会中止 学校の中庭でダンスを披露<span>[12:19]</span>
|
||||
</h3>
|
||||
<p>鹿児島県霧島市の中学校が、新型コロナウイルスの影響でダンス発表の機会を失った生徒に活躍の場を提供しようと、発表会を開きました。</p>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href='https://www.mbc.co.jp/news/mbc_news.php?ibocd=2020072200043686&ap='><IMG src='../web-news2/2020072200043686.jpg'><h3>薩摩、大隅、種子島・屋久地方に高温注意情報 日中３５度以上予想<span>[10:56]</span>
|
||||
</h3>
|
||||
<p>薩摩・大隅地方、種子島・屋久島地方は２２日、日中の気温が３５度以上の猛暑日となるところがある見込みです。</p>
|
||||
</a>
|
||||
</li>
|
||||
<h2 id='200721'>07月21日(火)</h2>
|
||||
<li>
|
||||
<a href='https://www.mbc.co.jp/news/mbc_news.php?ibocd=2020072100043685&ap='><IMG src='img/mbcnews.png'><h3>奄美市コンビニ強盗未遂事件 男に懲役４年求刑<span>[20:07]</span>
|
||||
</h3>
|
||||
<p>鹿児島県奄美市で去年１月、コンビニエンスストアに包丁を持って押し入り現金を奪おうとしたとして、強盗未遂の罪に問われている男の裁判が鹿児島地裁名瀬支部で開かれ、検察は男に懲役４年を求刑しました。</p>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href='https://www.mbc.co.jp/news/mbc_news.php?ibocd=2020072100043683&ap='><IMG src='../web-news2/2020072100043683.jpg'><h3>新型コロナ 新たに２人感染確認 鹿児島県内１７２人に<span>[19:51]</span>
|
||||
</h3>
|
||||
<p>鹿児島市で新型コロナウイルスの感染者が新たに２人確認され、鹿児島県内の感染者の累計は１７２人となりました。</p>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href='https://www.mbc.co.jp/news/mbc_news.php?ibocd=2020072100043682&ap='><IMG src='../web-news2/2020072100043682.jpg'><h3>新鹿児島県知事・塩田康一氏に聞く 新型コロナ対策<span>[19:49]</span>
|
||||
</h3>
|
||||
<p>今月１２日に行われた鹿児島県知事選挙で初当選した塩田康一さんは、今月２８日に知事に就任します。</p>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href='https://www.mbc.co.jp/news/mbc_news.php?ibocd=2020072100043681&ap='><IMG src='../web-news2/2020072100043681.jpg'><h3>一部学校で夏休み開始 一方で授業続く学校も<span>[19:48]</span>
|
||||
</h3>
|
||||
<p>鹿児島県内の一部の学校では２１日から夏休みが始まりましたが、一方で新型コロナウイルスに伴う休校による授業の遅れを取り戻すため、１学期の授業が続いている学校もあります。</p>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href='https://www.mbc.co.jp/news/mbc_news.php?ibocd=2020072100043680&ap='><IMG src='../web-news2/2020072100043680.jpg'><h3>ネオワイズ彗星 鹿児島でも撮った！<span>[19:47]</span>
|
||||
</h3>
|
||||
<p>観測条件次第では、肉眼で見ることができるほど明るいと、インターネットなどで話題となっている彗星「ネオワイズ彗星」。</p>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href='https://www.mbc.co.jp/news/mbc_news.php?ibocd=2020072100043679&ap='><IMG src='../web-news2/2020072100043679.jpg'><h3>奄美の民謡・シマ唄の第一人者 坪山豊さん死去<span>[19:46]</span>
|
||||
</h3>
|
||||
<p>鹿児島県徳之島の闘牛をモチーフにした「ワイド節」の作曲者で、奄美の民謡・シマ唄の第一人者として活躍した坪山豊さんが２０日、老衰のため亡くなりました。</p>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href='https://www.mbc.co.jp/news/mbc_news.php?ibocd=2020072100043678&ap='><IMG src='../web-news2/2020072100043678.jpg'><h3>ＪＲ鹿児島本線 鹿児島中央～川内 一部区間２７日から再開<span>[19:38]</span>
|
||||
</h3>
|
||||
<p>大雨の影響でＪＲ鹿児島本線の鹿児島中央駅と川内駅の間は、運転見合わせが続いていますが、一部区間が２７日から臨時ダイヤで再開することになりました。</p>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href='https://www.mbc.co.jp/news/mbc_news.php?ibocd=2020072100043677&ap='><IMG src='../web-news2/2020072100043677.jpg'><h3>お中元商戦 新型コロナの影響で変化も 鹿児島市のデパート<span>[19:36]</span>
|
||||
</h3>
|
||||
<p>お中元の季節を迎えていますが、新型コロナウイルスの影響もあり、今年のお中元商戦には変化もあるようです。</p>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href='https://www.mbc.co.jp/news/mbc_news.php?ibocd=2020072100043674&ap='><IMG src='../web-news2/2020072100043674.jpg'><h3>種子島南東沖で地震 南種子町で震度１<span>[18:03]</span>
|
||||
</h3>
|
||||
<p>２１日午後５時５４分ごろ、種子島南東沖を震源地とする地震がありました。</p>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href='https://www.mbc.co.jp/news/mbc_news.php?ibocd=2020072100043673&ap='><IMG src='../web-news2/2020072100043673.jpg'><h3>土用丑の日 ウナギ専門店にぎわう<span>[16:36]</span>
|
||||
</h3>
|
||||
<p>２１日は土用の丑の日、鹿児島市のウナギ専門店は大勢の客でにぎわっています。</p>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href='https://www.mbc.co.jp/news/mbc_news.php?ibocd=2020072100043672&ap='><IMG src='../web-news2/2020072100043672.jpg'><h3>中学生が“金峰コシヒカリ”の稲刈り体験 鹿児島県南さつま市<span>[16:35]</span>
|
||||
</h3>
|
||||
<p>超早場米の産地、鹿児島県南さつま市金峰町で、地元の中学生が稲刈りを体験しました。</p>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href='https://www.mbc.co.jp/news/mbc_news.php?ibocd=2020072100043671&ap='><IMG src='../web-news2/2020072100043671.jpg'><h3>姶良市の企業が鹿児島市に医療マスク４万枚を贈る<span>[16:34]</span>
|
||||
</h3>
|
||||
<p>新型コロナウイルスの感染予防対策に役立ててもらおうと、鹿児島県内でタイヤ販売事業を手掛ける姶良市の企業が、鹿児島市にマスク４万枚を贈りました。</p>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href='https://www.mbc.co.jp/news/mbc_news.php?ibocd=2020072100043670&ap='><IMG src='../web-news2/2020072100043670.jpg'><h3>鹿児島・県道６３号 有明北ＩＣー有明東ＩＣ 通行止め
|
||||
<span>[15:25]</span>
|
||||
</h3>
|
||||
<p>鹿児島県の県道６３号志布志福山線の有明北インターと有明東インターの間が、陥没のため通行止めとなっています。</p>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href='https://www.mbc.co.jp/news/mbc_news.php?ibocd=2020072100043669&ap='><IMG src='img/mbcnews.png'><h3>トラクターの下敷きになり男性死亡 鹿児島県日置市<span>[15:06]</span>
|
||||
</h3>
|
||||
<p>鹿児島県日置市で２１日午前、高齢の男性がトラクターの下敷きになり、死亡しました。</p>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href='https://www.mbc.co.jp/news/mbc_news.php?ibocd=2020072100043668&ap='><IMG src='../web-news2/2020072100043668.jpg'><h3>かごしま水族館に５万匹のカタクチイワシが仲間入り<span>[12:00]</span>
|
||||
</h3>
|
||||
<p>２３日からの連休を前に２１日朝、かごしま水族館に５万匹のカタクチイワシが仲間入りし、早速、群れをなして泳ぐ様子が見られました。</p>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href='https://www.mbc.co.jp/news/mbc_news.php?ibocd=2020072100043667&ap='><IMG src='../web-news2/2020072100043667.jpg'><h3>高校生が観光・防災対策を市に提言 鹿児島県霧島市<span>[11:54]</span>
|
||||
</h3>
|
||||
<p>文部科学省のスーパーサイエンスハイスクールに指定されている、鹿児島県霧島市の国分高校が、観光や防災などについての提言を市に行いました。</p>
|
||||
</a>
|
||||
</li>
|
||||
<h2 id='200720'>07月20日(月)</h2>
|
||||
<li>
|
||||
<a href='https://www.mbc.co.jp/news/mbc_news.php?ibocd=2020072000043666&ap='><IMG src='img/mbcnews.png'><h3>鹿児島市の港で見つかった遺体 ４７歳男性と判明<span>[20:26]</span>
|
||||
</h3>
|
||||
<p>鹿児島市の港で１８日に見つかった遺体の身元について、警察は２０日、市内に住む４７歳の土木作業員の男性だったと発表しました。</p>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href='https://www.mbc.co.jp/news/mbc_news.php?ibocd=2020072000043665&ap='><IMG src='../web-news2/2020072000043665.jpg'><h3>平年より２１日遅く 奄美地方 観測史上最も遅い梅雨明け<span>[19:42]</span>
|
||||
</h3>
|
||||
<p>２０日の奄美地方は、太平洋高気圧に覆われて青空が広がり、鹿児島地方気象台は午前１１時に「奄美地方は梅雨明けしたとみられる」と発表しました。</p>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href='https://www.mbc.co.jp/news/mbc_news.php?ibocd=2020072000043664&ap='><IMG src='../web-news2/2020072000043664.jpg'><h3>奄美・龍郷町の小中学校で終業式 鹿児島県内の一部学校が夏休みへ<span>[19:41]</span>
|
||||
</h3>
|
||||
<p>新型コロナウイルスの影響で休校措置が取られた鹿児島県内の公立小・中学校の多くでは、夏休みを短縮する方針ですが、予定通り２１日から夏休みに入る離島など一部の学校では、２０日、１学期の終業式が行われました。</p>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href='https://www.mbc.co.jp/news/mbc_news.php?ibocd=2020072000043663&ap='><IMG src='../web-news2/2020072000043663.jpg'><h3>海水浴場で一時４人が溺れる 全員救助 鹿児島県阿久根市<span>[19:40]</span>
|
||||
</h3>
|
||||
<p>鹿児島県阿久根市の海水浴場で２０日午後、女性４人が溺れ、救助されました。</p>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href='https://www.mbc.co.jp/news/mbc_news.php?ibocd=2020072000043662&ap='><IMG src='../web-news2/2020072000043662.jpg'><h3>「ディスカバー鹿児島」の自粛要請を延長 ８月４日まで<span>[19:39]</span>
|
||||
</h3>
|
||||
<p>鹿児島県は新型コロナの感染者数増加を受け、利用者に自粛を要請している宿泊施設支援キャンペーン「ディスカバー鹿児島」の自粛要請期間を、来月４日まで延長することを発表しました。</p>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href='https://www.mbc.co.jp/news/mbc_news.php?ibocd=2020072000043661&ap='><IMG src='../web-news2/2020072000043661.jpg'><h3>「安心安全の天文館に」飲食店およそ５０店舗が一斉消毒 鹿児島市<span>[19:38]</span>
|
||||
</h3>
|
||||
<p>接待を伴う飲食店を対象に、鹿児島県から出されていた休業要請の期間が、明日までとなりました。</p>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href='https://www.mbc.co.jp/news/mbc_news.php?ibocd=2020072000043660&ap='><IMG src='../web-news2/2020072000043660.jpg'><h3>独自のＰＣＲ検査機器の試験運用開始 鹿児島県霧島市<span>[19:37]</span>
|
||||
</h3>
|
||||
<p>鹿児島県霧島市は、新型コロナウイルスへの感染の有無を調べるＰＣＲ検査機器の運用を、独自に２０日から始めました。</p>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href='https://www.mbc.co.jp/news/mbc_news.php?ibocd=2020072000043659&ap='><IMG src='../web-news2/2020072000043659.jpg'><h3>新型コロナ 国の基準「退院前にＰＣＲ検査せず」 根拠は？<span>[19:36]</span>
|
||||
</h3>
|
||||
<p>鹿児島市のショーパブで、国内最大級のクラスターが発生し、県内では今月に入り、医療機関への入院やホテルで療養する人が増加しています。</p>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href='https://www.mbc.co.jp/news/mbc_news.php?ibocd=2020072000043658&ap='><IMG src='../web-news2/2020072000043658.jpg'><h3>ＵＡＥの火星探査機搭載 Ｈ２Aロケット打ち上げ成功<span>[19:35]</span>
|
||||
</h3>
|
||||
<p>ＵＡＥ＝アラブ首長国連邦の火星探査機を搭載したＨ２Ａロケットが、鹿児島県の種子島宇宙センターから打ち上げられ、打ち上げは成功しました。</p>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href='https://www.mbc.co.jp/news/mbc_news.php?ibocd=2020072000043657&ap='><IMG src='../web-news2/2020072000043657.jpg'><h3>新庁舎移転問題 住民投票を８月９日に実施 鹿児島県垂水市<span>[19:34]</span>
|
||||
</h3>
|
||||
<p>鹿児島県垂水市の新しい庁舎の移転新築計画の是非を問う住民投票が、来月９日に行われることになりました。</p>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href='https://www.mbc.co.jp/news/mbc_news.php?ibocd=2020072000043656&ap='><IMG src='../web-news2/2020072000043656.jpg'><h3>コロナに負けない！コロナ禍で新しい形の運動会<span>[19:34]</span>
|
||||
</h3>
|
||||
<p>新型コロナウイルスの感染拡大で先が見えない不安の中、逆境に立ち向かう人や企業を紹介するシリーズ「鹿児島発コロナに負けない！」今回は、コロナ禍での新しい形での運動会について取材しました。</p>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href='https://www.mbc.co.jp/news/mbc_news.php?ibocd=2020072000043655&ap='><IMG src='../web-news2/2020072000043655.jpg'><h3>２１日は「土用丑の日」 ウナギのかば焼き出荷ピーク 鹿児島県大崎町<span>[19:32]</span>
|
||||
</h3>
|
||||
<p>２１日の「土用の丑の日」を前に、鹿児島県大崎町では、ウナギのかば焼きなどの出荷がピークを迎えています。</p>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href='https://www.mbc.co.jp/news/mbc_news.php?ibocd=2020072000043654&ap='><IMG src='../web-news2/2020072000043654.jpg'><h3>新型コロナ 鹿児島市で新たに５人の感染確認 県内１７０人に<span>[17:29]</span>
|
||||
</h3>
|
||||
<p>鹿児島県内では２０日、新たに新型コロナウイルスへの感染者が５人確認されました。</p>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href='https://www.mbc.co.jp/news/mbc_news.php?ibocd=2020072000043653&ap='><IMG src='../web-news2/2020072000043653.jpg'><h3>鹿児島・川内原発１号機 制御棒曲がった原因は挿入時の接触か<span>[17:11]</span>
|
||||
</h3>
|
||||
<p>定期検査中の鹿児島県の川内原発１号機では、今月１６日に原子炉の核分裂を制御する制御棒のうちの１本が曲がっているのが見つかりました。</p>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href='https://www.mbc.co.jp/news/mbc_news.php?ibocd=2020072000043647&ap='><IMG src='../web-news2/2020072000043647.jpg'><h3>奄美地方 観測史上最も遅い梅雨明け<span>[11:02]</span>
|
||||
</h3>
|
||||
<p>鹿児島地方気象台は、午前１１時に「奄美地方は梅雨明けしたとみられる」と発表しました。</p>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href='https://www.mbc.co.jp/news/mbc_news.php?ibocd=2020072000043646&ap='><IMG src='../web-news2/2020072000043646.jpg'><h3>Ｈ２Ａロケット打ち上げ成功 ＵＡＥの火星探査機搭載<span>[07:57]</span>
|
||||
</h3>
|
||||
<p>ＵＡＥ＝アラブ首長国連邦の火星探査機を搭載したＨ２Ａロケットが２０日朝種子島宇宙センターから打ち上げられ、打ち上げは成功しました。</p>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href='https://www.mbc.co.jp/news/mbc_news.php?ibocd=2020072000043645&ap='><IMG src='../web-news2/2020072000043645.jpg'><h3>Ｈ２Ａロケット打ち上げ ＵＡＥの火星探査機搭載<span>[07:18]</span>
|
||||
</h3>
|
||||
<p>ＵＡＥ＝アラブ首長国連邦の火星探査機を搭載したＨ２Ａロケットが、先ほど午前７時前に種子島宇宙センターから打ち上げられました。</p>
|
||||
</a>
|
||||
</li>
|
||||
<h2 id='200719'>07月19日(日)</h2>
|
||||
<li>
|
||||
<a href='https://www.mbc.co.jp/news/mbc_news.php?ibocd=2020071900043644&ap='><IMG src='../web-news2/2020071900043644.jpg'><h3>Ｈ２Ａロケット４２号機 ２０日朝打ち上げ<span>[18:15]</span>
|
||||
</h3>
|
||||
<p>天候不良のため打ち上げが延期されていたＨ２Ａロケット４２号機は、２０日朝、種子島宇宙センターから打ち上げられます。</p>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href='https://www.mbc.co.jp/news/mbc_news.php?ibocd=2020071900043643&ap='><IMG src='../web-news2/2020071900043643.jpg'><h3>「ＧｏＴｏトラベル」巡り 三反園知事「まずは近隣地域で」<span>[18:13]</span>
|
||||
</h3>
|
||||
<p>鹿児島県の三反園知事は、１９日に行われた全国知事会のウェブ会議で、政府が観光支援で始める「ＧｏＴｏトラベル」について、「新型コロナウイルス感染拡大防止のため、近隣地域から始めるべき」との考えを示しました。</p>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href='https://www.mbc.co.jp/news/mbc_news.php?ibocd=2020071900043642&ap='><IMG src='../web-news2/2020071900043642.jpg'><h3>新型コロナ 鹿児島県内新たに１人の感染確認<span>[17:41]</span>
|
||||
</h3>
|
||||
<p>鹿児島市は先ほど、新型コロナウイルスの感染者が新たに１人確認されたと発表しました。</p>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href='https://www.mbc.co.jp/news/mbc_news.php?ibocd=2020071900043641&ap='><IMG src='img/mbcnews.png'><h3>漁港で男性が転落 意識不明 鹿児島・南さつま市<span>[17:30]</span>
|
||||
</h3>
|
||||
<p>鹿児島県南さつま市の漁港沖で１９日午前、船で作業中の男性が海に転落し、意識不明の重体となっています。</p>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href='https://www.mbc.co.jp/news/mbc_news.php?ibocd=2020071900043640&ap='><IMG src='../web-news2/2020071900043640.jpg'><h3>東京五輪代表・岡澤セオン選手 被災地支援 手作りカレー提供<span>[11:47]</span>
|
||||
</h3>
|
||||
<p>鹿児島県鹿屋市在住で、ボクシング・ウエルター級で東京オリンピックの日本代表の岡澤セオン選手がプロデュースしたカレーが、鹿屋市のホテルで提供されました。</p>
|
||||
</a>
|
||||
</li>
|
||||
<h2 id='200718'>07月18日(土)</h2>
|
||||
<li>
|
||||
<a href='https://www.mbc.co.jp/news/mbc_news.php?ibocd=2020071800043639&ap='><IMG src='img/mbcnews.png'><h3>鹿児島市の港で男性の遺体<span>[21:23]</span>
|
||||
</h3>
|
||||
<p>鹿児島市の港で１８日午後、男性が遺体で見つかりました。</p>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href='https://www.mbc.co.jp/news/mbc_news.php?ibocd=2020071800043638&ap='><IMG src='../web-news2/2020071800043638.jpg'><h3>鹿児島・新型コロナ感染発表 １８日は２人 累計１６４人<span>[19:16]</span>
|
||||
</h3>
|
||||
<p>鹿児島県と鹿児島市は新型コロナウイルスの感染者が新たに２人確認されたと１８日、発表しました。</p>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href='https://www.mbc.co.jp/news/mbc_news.php?ibocd=2020071800043636&ap='><IMG src='../web-news2/2020071800043636.jpg'><h3>かごしま暮らし オンライン移住相談会<span>[17:29]</span>
|
||||
</h3>
|
||||
<p>鹿児島への移住を考える人を対象にしたオンラインでの移住相談会が１８日、開かれました。</p>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href='https://www.mbc.co.jp/news/mbc_news.php?ibocd=2020071800043637&ap='><IMG src='../web-news2/2020071800043637.jpg'><h3>新型コロナ 鹿児島市で新たに１人 県内累計１６４人に<span>[17:10]</span>
|
||||
</h3>
|
||||
<p>鹿児島市は先ほど午後５時に新型コロナウイルスの感染者が、１８日は新たに１人確認されたと発表しました。</p>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href='https://www.mbc.co.jp/news/mbc_news.php?ibocd=2020071800043635&ap='><IMG src='../web-news2/2020071800043635.jpg'><h3>高校野球”代替大会” 地区代表１６校出そろう<span>[16:02]</span>
|
||||
</h3>
|
||||
<p>新型コロナウイルスの影響で中止となった、夏の高校野球の代替大会。</p>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href='https://www.mbc.co.jp/news/mbc_news.php?ibocd=2020071800043634&ap='><IMG src='../web-news2/2020071800043634.jpg'><h3>新型コロナ 鹿児島県内で初めて警察官の感染確認<span>[12:14]</span>
|
||||
</h3>
|
||||
<p>県警は交通機動隊に所属する２０代の男性警察官が新型コロナウイルスに感染していたことが確認されたと発表しました。</p>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href='https://www.mbc.co.jp/news/mbc_news.php?ibocd=2020071800043633&ap='><IMG src='../web-news2/2020071800043633.jpg'><h3>釣りの男性が海に転落し死亡 鹿児島県霧島市<span>[12:12]</span>
|
||||
</h3>
|
||||
<p>鹿児島県霧島市で１７日夜、釣りをしていた男性が海に転落して死亡しました。</p>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href='https://www.mbc.co.jp/news/mbc_news.php?ibocd=2020071800043632&ap='><IMG src='img/mbcnews.png'><h3>鹿児島県警 男性警察官が新型コロナ感染<span>[02:16]</span>
|
||||
</h3>
|
||||
<p>鹿児島県警は１７日、交通機動隊の２０代の男性警察官が新型コロナウイルスに感染したと発表しました。</p>
|
||||
</a>
|
||||
</li>
|
||||
<h2 id='200717'>07月17日(金)</h2>
|
||||
<li>
|
||||
<a href='https://www.mbc.co.jp/news/mbc_news.php?ibocd=2020071700043629&ap='><IMG src='../web-news2/2020071700043629.jpg'><h3>鹿児島県本土 久々の青空<span>[19:48]</span>
|
||||
</h3>
|
||||
<p>１７日の鹿児島県本土は、前線北側の乾いた空気が流れ込み、青空が広がりました。</p>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href='https://www.mbc.co.jp/news/mbc_news.php?ibocd=2020071700043630&ap='><IMG src='../web-news2/2020071700043630.jpg'><h3>新型コロナ 鹿児島県内の感染確認なし ６月３０日以来１７日ぶり<span>[19:47]</span>
|
||||
</h3>
|
||||
<p>鹿児島県内では１７日、新たな新型コロナウイルスへの感染者は確認されませんでした。</p>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href='https://www.mbc.co.jp/news/mbc_news.php?ibocd=2020071700043628&ap='><IMG src='../web-news2/2020071700043628.jpg'><h3>“東京除外”で２２日から「Ｇｏ Ｔｏ トラベル」 期待と不安の声<span>[19:45]</span>
|
||||
</h3>
|
||||
<p>新型コロナウイルスで打撃を受けている観光業を支援する「ＧｏＴｏトラベル」キャンペーンについて、政府は来週２２日から東京を除外する形でスタートする方針を示しました。</p>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href='https://www.mbc.co.jp/news/mbc_news.php?ibocd=2020071700043627&ap='><IMG src='../web-news2/2020071700043627.jpg'><h3>１９棟全半焼 放火の罪 消防団員の男に懲役１２年の実刑判決<span>[19:44]</span>
|
||||
</h3>
|
||||
<p>鹿児島県奄美大島の龍郷町でおととし、空き家に火をつけ、住宅など１９棟を全半焼させるなどした現住建造物等放火などの罪に問われている消防団員の裁判員裁判で、懲役１２年の実刑判決が言い渡されました。</p>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href='https://www.mbc.co.jp/news/mbc_news.php?ibocd=2020071700043625&ap='><IMG src='../web-news2/2020071700043625.jpg'><h3>決勝トーナメント目指して！ 鹿児島県夏季高校野球大会<span>[19:43]</span>
|
||||
</h3>
|
||||
<p>新型コロナウイルスの影響で中止となった、夏の高校野球の代替大会は、地区予選の終盤を迎えています。</p>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href='https://www.mbc.co.jp/news/mbc_news.php?ibocd=2020071700043624&ap='><IMG src='../web-news2/2020071700043624.jpg'><h3>発生３時間後に避難情報 薩摩川内市の河川氾濫で見えた課題<span>[19:42]</span>
|
||||
</h3>
|
||||
<p>薩摩川内市では、今月３日に川内川の支流で氾濫が発生し浸水被害も出ましたが、避難情報が出たのは氾濫発生の３時間後でした。</p>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href='https://www.mbc.co.jp/news/mbc_news.php?ibocd=2020071700043622&ap='><IMG src='../web-news2/2020071700043622.jpg'><h3>保育園で「ウナギ給食」 鹿児島県大崎町<span>[19:42]</span>
|
||||
</h3>
|
||||
<p>鹿児島県大崎町の大丸保育園で１７日、給食に出されたのはウナギのかば焼き。</p>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href='https://www.mbc.co.jp/news/mbc_news.php?ibocd=2020071700043621&ap='><IMG src='../web-news2/2020071700043621.jpg'><h3>ふるさと特派員が撮った！「白いスズメ」と「金色のドジョウ」<span>[19:40]</span>
|
||||
</h3>
|
||||
<p>ＭＢＣふるさと特派員から、変わった色の生き物の映像が届きました。</p>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href='https://www.mbc.co.jp/news/mbc_news.php?ibocd=2020071700043631&ap='><IMG src='img/mbcnews.png'><h3>延期のＨ２Ａロケット 今月２０日午前打ち上げへ<span>[19:39]</span>
|
||||
</h3>
|
||||
<p>天候不良で打ち上げが延期されていたＨ２Ａロケット４２号機について、三菱重工は、今月２０日の午前６時５８分に鹿児島県の種子島宇宙センターから打ち上げると発表しました。</p>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href='https://www.mbc.co.jp/news/mbc_news.php?ibocd=2020071700043620&ap='><IMG src='../web-news2/2020071700043620.jpg'><h3>鹿児島県内 新型コロナ新規感染者はゼロ<span>[17:51]</span>
|
||||
</h3>
|
||||
<p>鹿児島県と鹿児島市は１７日、新しく確認された新型コロナウイルスの感染者はいなかったと発表しました。</p>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href='https://www.mbc.co.jp/news/mbc_news.php?ibocd=2020071700043617&ap='><IMG src='../web-news2/2020071700043617.jpg'><h3>ＪＲ鹿児島本線 川内－隈之城間で運転再開<span>[16:29]</span>
|
||||
</h3>
|
||||
<p>大雨の影響で運転を見合わせていたＪＲ鹿児島本線の川内ー隈之城の間は、今月２０日から一部で運転を再開します。</p>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href='https://www.mbc.co.jp/news/mbc_news.php?ibocd=2020071700043616&ap='><IMG src='../web-news2/2020071700043616.jpg'><h3>屋久島町出張旅費問題 前議長を詐欺の疑いで刑事告発へ<span>[16:06]</span>
|
||||
</h3>
|
||||
<p>鹿児島県屋久島町の前の町議会議長の男性が、出張旅費を不正に受け取っていたとして、住民らが詐欺の疑いで近く刑事告発する考えを示しました。</p>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href='https://www.mbc.co.jp/news/mbc_news.php?ibocd=2020071700043615&ap='><IMG src='../web-news2/2020071700043615.jpg'><h3>薩摩川内市の文化ホール跡地利用 九電提案の施設建設案を採用<span>[16:05]</span>
|
||||
</h3>
|
||||
<p>来年春に閉館する鹿児島県薩摩川内市の川内文化ホールの跡地について、市は九州電力が提案した新たな施設の建設案を採用し、今後協議を進める方針です。</p>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href='https://www.mbc.co.jp/news/mbc_news.php?ibocd=2020071700043612&ap='><IMG src='../web-news2/2020071700043612.jpg'><h3>「ＳＤＧｓ」の一環で小型電気自動車を導入 鹿児島相互信用金庫<span>[16:00]</span>
|
||||
</h3>
|
||||
<p>鹿児島相互信用金庫がＳＤＧｓ＝「持続可能な社会を作る活動」の一環として、一人乗りの小型電気自動車を導入し１７日、出発式が行われました。</p>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href='https://www.mbc.co.jp/news/mbc_news.php?ibocd=2020071700043613&ap='><IMG src='../web-news2/2020071700043613.jpg'><h3>熊本で震度３の地震 鹿児島県長島町で震度１<span>[15:07]</span>
|
||||
</h3>
|
||||
<p>１７日午後２時５４分ごろ熊本県熊本地方を震源地とする地震があり、熊本県で最大震度３を観測しました。</p>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href='https://www.mbc.co.jp/news/mbc_news.php?ibocd=2020071700043611&ap='><IMG src='../web-news2/2020071700043611.jpg'><h3>定期検査中の鹿児島・川内原発１号機で曲がった制御棒確認<span>[11:56]</span>
|
||||
</h3>
|
||||
<p>定期検査中の鹿児島県の川内原発１号機で、制御棒のうちの１本が曲がっているのが確認されました。</p>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href='https://www.mbc.co.jp/news/mbc_news.php?ibocd=2020071700043610&ap='><IMG src='../web-news2/2020071700043610.jpg'><h3>志布志市の県道５１３号 通行止め解除<span>[10:18]</span>
|
||||
</h3>
|
||||
<p>県道５１３号宮ケ原大崎線の鹿児島県志布志市有明町山重付近では、今月６日から土砂崩れのため通行止めとなっていましたが、復旧作業が終わり、１７日午前９時に解除されました。</p>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href='https://www.mbc.co.jp/news/mbc_news.php?ibocd=2020071700043609&ap='><IMG src='../web-news2/2020071700043609.jpg'><h3>奄美地方で１７日落雷や突風に注意<span>[09:08]</span>
|
||||
</h3>
|
||||
<p>奄美地方では１７日、落雷や竜巻などの激しい突風、急な強い雨に注意してください。</p>
|
||||
</a>
|
||||
</li>
|
||||
<h2 id='200716'>07月16日(木)</h2>
|
||||
<li>
|
||||
<a href='https://www.mbc.co.jp/news/mbc_news.php?ibocd=2020071600043608&ap='><IMG src='img/mbcnews.png'><h3>鹿児島県南さつま市で発見の遺体 行方不明の新聞配達員の男性と確認<span>[22:15]</span>
|
||||
</h3>
|
||||
<p>鹿児島県南さつま市の万之瀬川の河川敷で１４日に見つかった男性の遺体は、今月６日から行方が分からなくなっていた南さつま市の新聞配達員の男性と確認されました。</p>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href='https://www.mbc.co.jp/news/mbc_news.php?ibocd=2020071600043607&ap='><IMG src='img/mbcnews.png'><h3>鹿児島市で警察官など名乗る不審電話相次ぐ 注意を<span>[19:48]</span>
|
||||
</h3>
|
||||
<p>鹿児島市では１４日、警察官などを名乗る不審な電話が相次ぎました。</p>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href='https://www.mbc.co.jp/news/mbc_news.php?ibocd=2020071600043604&ap='><IMG src='../web-news2/2020071600043604.jpg'><h3>寝たきりの母親を殴って死なせた疑い ７０歳長男を逮捕 鹿児島県知名町<span>[19:23]</span>
|
||||
</h3>
|
||||
<p>鹿児島県沖永良部島の知名町で、寝たきりの母親を殴って死亡させたとして、同居する７０歳の長男が傷害致死の疑いで逮捕されました。</p>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href='https://www.mbc.co.jp/news/mbc_news.php?ibocd=2020071600043602&ap='><IMG src='../web-news2/2020071600043602.jpg'><h3>長雨で日照不足 平年の１割未満も 鹿児島県内の消費に影響<span>[19:22]</span>
|
||||
</h3>
|
||||
<p>梅雨の長雨の影響で、鹿児島県の日置市や薩摩川内市では、この１０日間の日照時間が平年の１割にも満たないなど、日照不足が続いています。</p>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href='https://www.mbc.co.jp/news/mbc_news.php?ibocd=2020071600043603&ap='><IMG src='../web-news2/2020071600043603.jpg'><h3>記録的大雨の鹿児島県内 各地で復旧作業続く<span>[19:22]</span>
|
||||
</h3>
|
||||
<p>鹿児島県の大隅地方では、今月６日に観測史上最大の時間雨量１０９・５ミリを観測するなど、記録的な大雨となりました。</p>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href='https://www.mbc.co.jp/news/mbc_news.php?ibocd=2020071600043606&ap='><IMG src='../web-news2/2020071600043606.jpg'><h3>新型コロナ新たに４人感染確認 鹿児島県内の感染者は１６２人に<span>[19:21]</span>
|
||||
</h3>
|
||||
<p>鹿児島県内では、４人の新型コロナウイルスへの感染が新たに確認されました。</p>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href='https://www.mbc.co.jp/news/mbc_news.php?ibocd=2020071600043601&ap='><IMG src='../web-news2/2020071600043601.jpg'><h3>新型コロナ宿泊療養施設に 鹿児島県が新たにホテルを借り上げ<span>[19:20]</span>
|
||||
</h3>
|
||||
<p>新型コロナの感染確認が増加する中、鹿児島県は軽症や無症状の感染者などに滞在してもらうために、新たに鹿児島市内のホテル１棟を借り上げたと発表しました。</p>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href='https://www.mbc.co.jp/news/mbc_news.php?ibocd=2020071600043599&ap='><IMG src='../web-news2/2020071600043599.jpg'><h3>自民党鹿児島県議団 知事選総括の会議 「結論持ち越し」<span>[19:19]</span>
|
||||
</h3>
|
||||
<p>１２日に投票が行われた鹿児島県知事選挙で、推薦した現職候補が敗れたことを受けて、自民党県議団は１６日、総括する会議を開きましたが、結論は持ち越されました。</p>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href='https://www.mbc.co.jp/news/mbc_news.php?ibocd=2020071600043593&ap='><IMG src='../web-news2/2020071600043593.jpg'><h3>鹿児島県議会議員補欠選挙 当選の鶴薗真佐彦さんが初登庁<span>[16:21]</span>
|
||||
</h3>
|
||||
<p>今月１２日に投開票が行われた鹿児島県議会議員薩摩川内市区の補欠選挙で当選した鶴薗真佐彦さんが１６日、初登庁しました。</p>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href='https://www.mbc.co.jp/news/mbc_news.php?ibocd=2020071600043596&ap='><IMG src='../web-news2/2020071600043596.jpg'><h3>「鹿児島市の戦災と復興写真展」始まる 長崎の原爆被害のパネルも<span>[16:21]</span>
|
||||
</h3>
|
||||
<p>鹿児島市役所で、鹿児島と長崎の戦争被害と復興の歩みを収めた写真展が１６日から始まりました。</p>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href='https://www.mbc.co.jp/news/mbc_news.php?ibocd=2020071600043595&ap='><IMG src='../web-news2/2020071600043595.jpg'><h3>阿久根市の魅力が詰まった「お宿 みどこい」オープン<span>[16:20]</span>
|
||||
</h3>
|
||||
<p>鹿児島県阿久根市の魅力が詰まった宿泊施設「お宿 みどこい」がオープンしました。</p>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href='https://www.mbc.co.jp/news/mbc_news.php?ibocd=2020071600043591&ap='><IMG src='../web-news2/2020071600043591.jpg'><h3>屋久島町・荒木耕治町長を詐欺などの疑いで書類送検 旅費着服問題<span>[16:00]</span>
|
||||
</h3>
|
||||
<p>屋久島町の荒木耕治町長が出張旅費の一部を着服していた問題を巡り、鹿児島県警は１６日、荒木耕治町長を詐欺などの疑いで書類送検しました。</p>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href='https://www.mbc.co.jp/news/mbc_news.php?ibocd=2020071600043592&ap='><IMG src='../web-news2/2020071600043592.jpg'><h3>鹿児島県内の新型コロナ感染者拡大を受け 仙巌園が休業期間を延長<span>[11:56]</span>
|
||||
</h3>
|
||||
<p>新型コロナウイルスの影響で今年４月から休業している鹿児島市の「仙巌園」は、１７日から営業を再開する予定でしたが、今月に入り、県内で感染者が増えていることを受け、休業期間を延長すると発表しました。</p>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href='https://www.mbc.co.jp/news/mbc_news.php?ibocd=2020071600043590&ap='><IMG src='../web-news2/2020071600043590.jpg'><h3>鹿屋市の国道２２０号古江バイパス 通行再開<span>[09:16]</span>
|
||||
</h3>
|
||||
<p>国道２２０号古江バイパスの鹿屋市の根木原交差点と垂水市のまさかり交差点の間では、今月６日から土砂の流失の復旧作業のため通行止めとなっていましたが、１６日午前６時に、規制は解除されました。</p>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href='https://www.mbc.co.jp/news/mbc_news.php?ibocd=2020071600043589&ap='><IMG src='../web-news2/2020071600043589.jpg'><h3>奄美地方で１７日にかけて落雷や突風に注意<span>[08:30]</span>
|
||||
</h3>
|
||||
<p>奄美地方で１７日にかけて落雷や竜巻などの激し突風、急な強い雨に注意してください。</p>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href='https://www.mbc.co.jp/news/mbc_news.php?ibocd=2020071600043588&ap='><IMG src='../web-news2/2020071600043588.jpg'><h3>諏訪之瀬島で爆発的噴火<span>[08:17]</span>
|
||||
</h3>
|
||||
<p>十島村の諏訪之瀬島で１６日朝、爆発的噴火が発生しました。</p>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
|
||||
</DIV>
|
||||
<!-- end #mbcnews-top-->
|
||||
|
||||
<!--adsense start-->
|
||||
<br clear="all">
|
||||
<section class="ad_list">
|
||||
<div class="ad2para">
|
||||
<div class="adcenter">
|
||||
<div
|
||||
class="adLeft">
|
||||
<!-- /193632318/LMC/LMC_TV/mbc/PC_all/rectangle1 -->
|
||||
<div id='div-gpt-ad-1570102688339-0'>
|
||||
<script>
|
||||
googletag.cmd.push(function () {
|
||||
googletag.display('div-gpt-ad-1570102688339-0');
|
||||
});
|
||||
</script>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="adRight">
|
||||
<div
|
||||
id="pc-banner">
|
||||
<!-- /193632318/LMC/LMC_TV/mbc/PC_all/rectangle2 -->
|
||||
<div id='div-gpt-ad-1570102823361-0'>
|
||||
<script>
|
||||
googletag.cmd.push(function () {
|
||||
googletag.display('div-gpt-ad-1570102823361-0');
|
||||
});
|
||||
</script>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
<section class="ad_list_mobile">
|
||||
<div class="ad2para">
|
||||
<div
|
||||
class="adcenter">
|
||||
<!-- /193632318/LMC/LMC_TV/mbc/SP_all/rectangle1 -->
|
||||
<div id='div-gpt-ad-1570102909947-0'>
|
||||
<script>
|
||||
googletag.cmd.push(function () {
|
||||
googletag.display('div-gpt-ad-1570102909947-0');
|
||||
});
|
||||
</script>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!--adsense end-->
|
||||
|
||||
|
||||
<!--フッター-->
|
||||
<DIV id="cr">Copyright(c) Minaminihon Broadcasting Co.,Ltd. All rights reserved.<BR>
|
||||
掲載された全ての記事・画像等の無断転載、二次利用をお断りいたします。</DIV>
|
||||
<!--フッター-->
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,698 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en-gb" dir="ltr" prefix="og: http://ogp.me/ns#" class="no-js">
|
||||
<head>
|
||||
<meta charset="utf-8"/>
|
||||
<link rel="dns-prefetch" href="https://fonts.gstatic.com"/>
|
||||
<link rel="dns-prefetch" href="https://cloud.24ways.org"/>
|
||||
<link rel="dns-prefetch" href="https://media.24ways.org"/>
|
||||
|
||||
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Code+Pro%7CSource+Sans+Pro:400,700%7CSource+Serif+Pro:400"/>
|
||||
<link rel="stylesheet" href="/assets/styles/app-55.css"/>
|
||||
|
||||
<link rel="shortcut icon" href="/assets/icons/icon.ico" type="image/ico"/>
|
||||
<link rel="apple-touch-icon" href="/assets/icons/icon.png" type="image/png"/>
|
||||
<link rel="mask-icon" href="/assets/icons/icon.svg" color="#f04"/>
|
||||
<link rel="manifest" href="/app.webmanifest"/>
|
||||
<link rel="alternate" href="https://feeds.feedburner.com/24ways" type="application/rss+xml"/>
|
||||
<link rel="author" href="/humans.txt"/>
|
||||
|
||||
<script>
|
||||
var docEl = document.documentElement;
|
||||
docEl.className = docEl.className.replace('no-js', 'has-js');
|
||||
</script>
|
||||
|
||||
<script src="/assets/scripts/app-55.js" defer></script>
|
||||
<script src="/assets/scripts/prism.min.js" defer></script>
|
||||
<script src="/assets/scripts/stats.js" defer></script>
|
||||
|
||||
<meta name="referrer" content="origin"/>
|
||||
<meta name="robots" content="index, follow"/>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1"/>
|
||||
<meta property="og:url" name="twitter:url" content="https://24ways.org/2019/it-all-starts-with-a-humble-textarea/"/>
|
||||
<meta property="og:title" name="twitter:title" content="It All Starts with a Humble <textarea>"/>
|
||||
<meta property="og:description" name="twitter:description" content="Andy Bell rings out a fresh call in support of the timeless concept of progressive enhancement. What does it mean to build a modern JavaScript-focussed web experience that still works well if part of the stack isn’t supported or fails? Andy shows us how that might be done."/>
|
||||
<meta property="og:image" name="twitter:image" content="https://cloud.24ways.org/2019/sharing/it-all-starts-with-a-humble-textarea.png"/>
|
||||
<meta property="og:type" content="article"/>
|
||||
<meta property="fb:app_id" content="1506442732766250"/>
|
||||
<meta name="twitter:site" content="@24ways"/>
|
||||
<meta name="twitter:creator" content="@hankchizljaw"/>
|
||||
<meta name="twitter:card" content="summary_large_image"/>
|
||||
<meta name="format-detection" content="telephone=no"/>
|
||||
<meta name="theme-color" content="#302"/>
|
||||
<meta name="msapplication-TileColor" content="#302"/>
|
||||
|
||||
<style>:root
|
||||
{
|
||||
--color-year: hsl(292, 100%, 16%);
|
||||
--color-year--dark: hsl(292, 100%, 8%);
|
||||
--color-year--dark-alpha: hsla(292, 100%, 8%, 0.8);
|
||||
--color-day: hsl(311, 80%, 60%);
|
||||
--color-day--light: hsl(311, 60%, 98%);
|
||||
--color-day--dark: hsl(311, 100%, 24%);
|
||||
--color-day--dark-alpha: hsla(311, 100%, 24%, 0.33);
|
||||
}
|
||||
</style>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<header class="c-banner" id="top">
|
||||
<a class="c-banner__skip" href="#main">Skip to content</a>
|
||||
<p class="c-banner__title">
|
||||
<a class="c-banner__home" href="/" rel="home">24 ways
|
||||
<span>to impress your friends</span>
|
||||
</a>
|
||||
</p>
|
||||
</header>
|
||||
<div class="c-menu no-transition">
|
||||
<button class="c-menu__button" id="menu__button" aria-controls="menu__drawer" aria-expanded="true" aria-label="Menu">
|
||||
<svg class="c-menu__icon" width="20" height="20" viewbox="0 0 200 200" focusable="false" aria-hidden="true">
|
||||
<rect class="c-menu__line" width="120" height="10" x="40" y="45"/>
|
||||
<rect class="c-menu__line" width="120" height="10" x="40" y="70"/>
|
||||
<rect class="c-menu__line" width="120" height="10" x="40" y="95"/>
|
||||
<rect class="c-menu__line" width="120" height="10" x="40" y="95"/>
|
||||
<rect class="c-menu__line" width="120" height="10" x="40" y="120"/>
|
||||
<rect class="c-menu__line" width="120" height="10" x="40" y="145"/>
|
||||
</svg>
|
||||
</button>
|
||||
<div class="c-menu__drawer" id="menu__drawer" role="region" aria-label="Menu">
|
||||
<form class="c-search" role="search" id="search" action="/search/">
|
||||
<fieldset class="c-field">
|
||||
<legend class="u-hidden">Search 24 ways</legend>
|
||||
<label class="u-hidden" for="q">Keywords</label>
|
||||
<input class="c-field__input" type="search" id="q" name="q" placeholder="e.g. CSS, Design, Research…"/>
|
||||
<button class="c-field__button" type="submit">
|
||||
<svg class="c-field__icon" width="20" height="20" viewbox="0 0 200 200" focusable="false" role="img" aria-label="Search">
|
||||
<path role="presentation" d="M129 121C136 113 140 102 140 90c0-28-22-50-50-50S40 63 40 90s22 50 50 50c12 0 24-4 32-12L158 164l7-7-36-36zM90 130c-22 0-40-18-40-40s18-40 40-40 40 18 40 40-18 40-40 40z"/>
|
||||
</svg>
|
||||
</button>
|
||||
</fieldset>
|
||||
</form>
|
||||
|
||||
<nav class="c-topics-nav" aria-label="Topics">
|
||||
<ul class="c-topics-nav__items">
|
||||
|
||||
<li class="c-topics-nav__item">
|
||||
<a class="c-topics-nav__label" href="/topics/business/">
|
||||
<svg width="16" height="16" viewbox="0 0 240 240" focusable="false" aria-hidden="true">
|
||||
<path d="M20 220c-11 0-20-9-20-20V70c0-11 9-20 20-20h60V35c0-10 5-15 15-15h50c10 0 15 5 15 15v15h60c11 0 20 9 20 20v130c0 11-9 20-20 20H20zm0-160c-5.5 0-10 4.5-10 10v130c0 5.5 4.5 10 10 10h200c5.5 0 10-4.5 10-10V70c0-5.5-4.5-10-10-10H20zm130-10V35c0-3-2-5-5-5H95c-3 0-5 2-5 5v15h60zM30 100V90h180v10H30zm0 40v-10h180v10H30zm0 40v-10h180v10H30z"/>
|
||||
</svg>
|
||||
|
||||
Business
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="c-topics-nav__item">
|
||||
<a class="c-topics-nav__label" href="/topics/code/">
|
||||
<svg width="16" height="16" viewbox="0 0 240 240" focusable="false" aria-hidden="true">
|
||||
<path transform="rotate(45 120 120)" d="M115 100H70.5C63 85 47.5 75 30 75 8.5 75-9.5 90-14 110h29l10 10-10 10h-29c4.5 20 22.5 35 44 35 17.5 0 33-10 40.5-25h99.5c7.5 15 22.5 25 40.5 25 21.5 0 39.5-15 44-35h-29l-10-10 10-10h29c-4.5-20-22.5-35-44-35-17.5 0-33 10-40.5 25H125V30h10v-50h-30v50h10v70zm123.5 40c-6.5 9-17 15-28.5 15-16 0-29-10.5-33.5-25H63.5C59 144.5 46 155 30 155c-12 0-22.5-6-28.5-15H20l20-20-20-20H1.5C7.5 91 18 85 30 85c16 0 29 10.5 33.5 25h113c4.5-14.5 17.5-25 33.5-25 12 0 23 6 29 15h-19l-20 20 20 20h19zM115-10h10v30h-10v-30zM99.5 240v-50h-10v-10h25v-40h10v40h25v10H140v50c0 10-7.5 20-20 20-12.5 0-20-10-20.5-20zm11 0c0 7.5 5 10 10 10s10-2.5 10-10v-50h-20v50z"/>
|
||||
</svg>
|
||||
|
||||
Code
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="c-topics-nav__item">
|
||||
<a class="c-topics-nav__label" href="/topics/content/">
|
||||
<svg width="16" height="16" viewbox="0 0 240 240" focusable="false" aria-hidden="true">
|
||||
<path d="M102.5 240l-1.5-2c-2.5-3.5-61-88-61-128s40.5-64 42.5-65L50 0h140l-32.5 45S200 70 200 110s-58.5 124.5-61 128l-1.5 2h-35zm30-10c9-13 57.5-85.5 57.5-120 0-33-35-56-41.5-60H91.5C85 54 50 77 50 110c0 34.5 48.5 106.5 57.5 120h25zM115 129.5c-11.5-2-20-12.5-20-24.5 0-14 11-25 25-25s25 11 25 25c0 12-8.5 22-20 24.5V230h-10V129.5zm5-39.5c-8 0-15 6.5-15 15s6.5 15 15 15 15-6.5 15-15-6.5-15-15-15zM92.5 40h55L170 10H70l22.5 30z"/>
|
||||
</svg>
|
||||
|
||||
Content
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="c-topics-nav__item">
|
||||
<a class="c-topics-nav__label" href="/topics/design/">
|
||||
<svg width="16" height="16" viewbox="0 0 240 240" focusable="false" aria-hidden="true">
|
||||
<path fill-rule="evenodd" d="M140 0h80v240h-80V0zm70 10h-60v30h20v10h-20V70h20v10h-20v20h20v10h-20v20h20v10h-20v20h20v10h-20v20h20v10h-20V230h60V10zM45 230c-14 0-25-11-25-25V60c0-1 35-55 35-55s35 54 35 55v145c0 14-11 25-25 25H45zm-15-25c0 8 7 15 15 15h20c8 0 15-7 15-15v-5H30v5zm0-25v10h50v-10H30zm0-106c0-2 2-4 4-4h2c2 0 4 2 4 4v96H30V74zm20 0c0-2 2-4 4-4h2c2 0 4 2 4 4v96H50V74zm20 0c0-2 2-4 4-4h2c2 0 4 2 4 4v96H70V74zM30.5 60.5S39 58 45 63.5c6-4.5 14-4.5 20 0 6-5.5 14.5-3 14.5-3L69 45H41L30.5 60.5zm24.5-38L47.5 35h15L55 22.5z"/>
|
||||
</svg>
|
||||
|
||||
Design
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="c-topics-nav__item">
|
||||
<a class="c-topics-nav__label" href="/topics/process/">
|
||||
<svg width="16" height="16" viewbox="0 0 240 240" focusable="false" aria-hidden="true">
|
||||
<path d="M210 116v4c0 49.5-40.5 90-90 90-29 0-55-14-71.5-35l7-7c14.5 19.5 38 32 64.5 32 44 0 80-36 80-80v-3.5l-15.5 16-7.5-7.5 28.5-28.5L234 125l-7.5 7.5L210 116zm-180 8v-4c0-49.5 40.5-90 90-90 29 0 54.5 13.5 71 35l-7 7C169 52.5 146 40 120 40c-44 0-80 36-80 80v5l17-17 7 7-28.5 28.5L7 115l7-7 16 16z"/>
|
||||
</svg>
|
||||
|
||||
Process
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="c-topics-nav__item">
|
||||
<a class="c-topics-nav__label" href="/topics/ux/">
|
||||
<svg width="16" height="16" viewbox="0 0 240 240" focusable="false" aria-hidden="true">
|
||||
<path d="M220 240H20c-11 0-20-9-20-20V20C0 9 9 0 20 0h200c11 0 20 9 20 20v200c0 11-9 20-20 20zM20 10c-5 0-10 4-10 10v200c0 5 4 10 10 10h200c5 0 10-4 10-10V20c0-5-4-10-10-10H20zm150 200c-11 0-20-9-20-20s9-20 20-20 20 9 20 20-9 20-20 20zm0-30c-5 0-10 4-10 10s4 10 10 10 10-4 10-10-4-10-10-10zm-50 30c-11 0-20-9-20-20s9-20 20-20 20 9 20 20-9 20-20 20zm0-30c-5 0-10 4-10 10s4 10 10 10 10-4 10-10-4-10-10-10zm-50 30c-11 0-20-9-20-20s9-20 20-20 20 9 20 20-9 20-20 20zm0-30c-5 0-10 4-10 10s4 10 10 10 10-4 10-10-4-10-10-10zm45-30V80h10v70h-10zm0-100V30h10v20h-10zM65 80V30h10v50H65zm0 70v-40h10v40H65zm100 0v-20h10v20h-10zm0-50V30h10v70h-10zM50 110V80h40v30H50zm10-10h20V90H60v10zm90 30v-30h40v30h-40zm-50-50V50h40v30h-40zm10-10h20V60h-20v10zm50 50h20v-10h-20v10z"/>
|
||||
</svg>
|
||||
|
||||
UX
|
||||
</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</nav>
|
||||
<nav class="c-site-nav" aria-label="Explore 24 ways">
|
||||
<ul class="c-site-nav__items">
|
||||
<li class="c-site-nav__item">
|
||||
<a class="c-site-nav__label" href="/archives/">Archives</a>
|
||||
</li>
|
||||
<li class="c-site-nav__item">
|
||||
<a class="c-site-nav__label" href="/authors/">Authors</a>
|
||||
</li>
|
||||
<li class="c-site-nav__item">
|
||||
<a class="c-site-nav__label" href="/about/" aria-label="About this website">About</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
<script class="c-menu__onload">
|
||||
document.getElementById('menu__drawer').style.display = 'none';
|
||||
</script>
|
||||
</div>
|
||||
|
||||
|
||||
<main class="c-main" id="main">
|
||||
<article class="c-article h-entry">
|
||||
<header class="c-article__header">
|
||||
<h1 class="c-article__title p-name">It All Starts with a Humble <textarea></h1>
|
||||
<p class="c-article__byline p-author h-card">
|
||||
|
||||
<a class="u-url" href="#author">
|
||||
<picture>
|
||||
<source srcset="https://cloud.24ways.org/authors/andybell280.webp" type="image/webp"/>
|
||||
<img class="c-avatar u-photo" src="https://cloud.24ways.org/authors/andybell280.jpg" width="160" height="160" alt="Andy Bell"/>
|
||||
</picture>
|
||||
<span class="p-name">Andy Bell</span>
|
||||
</a>
|
||||
|
||||
</p>
|
||||
</header>
|
||||
|
||||
<footer class="c-article__footer">
|
||||
<ul class="c-meta">
|
||||
<li class="c-meta__item">
|
||||
<time class="dt-published" datetime="2019-12-08T00:00:00+00:00">8 Dec<span>ember</span>
|
||||
2019</time>
|
||||
</li>
|
||||
|
||||
|
||||
<li class="c-meta__item">Published in
|
||||
<a href="/topics/ux/">UX</a>
|
||||
</li>
|
||||
|
||||
|
||||
<li class="c-meta__item">
|
||||
<a href="#comments">No comments</a>
|
||||
</li>
|
||||
</ul>
|
||||
</footer>
|
||||
|
||||
<div class="c-article__main e-content">
|
||||
|
||||
<div class="s-prose s-prose--article">
|
||||
<p class="lede">Those that know me well know that I make
|
||||
<em>a lot</em>
|
||||
of
|
||||
<a href="https://hankchizljaw.com/projects/">side projects</a>. I most definitely make too many, but there’s one really useful thing about making lots of side projects: it allows me to experiment in a low-risk setting.
|
||||
</p>
|
||||
<p>Side projects also allow me to accidentally create a context where I can demonstrate a really affective, long-running methodology for building on the web:
|
||||
<strong>progressive enhancement</strong>. That context is a little Progressive Web App that I’m tinkering with called
|
||||
<a href="https://jotter.space/">Jotter</a>. It’s incredibly simple, but under the hood, there’s a really solid experience built on top of a
|
||||
<strong>minimum viable experience</strong>
|
||||
which after reading this article, you’ll hopefully apply this methodology to your own work.</p>
|
||||
<figure>
|
||||
<picture><source srcset="https://media.24ways.org/2019/bell/jotter-screenshot.webp" type="image/webp"><img src="https://media.24ways.org/2019/bell/jotter-screenshot.png" alt="The Jotter Progressive Web App presented in the Google Chrome browser."></source>
|
||||
</picture>
|
||||
</figure>
|
||||
<h2>What is a minimum viable experience?</h2>
|
||||
<p>The key to progressive enhancement is distilling the user experience to its lowest possible technical solution and then building on it to improve the user experience. In the context of
|
||||
<a href="https://jotter.space/">Jotter</a>, that is a humble
|
||||
<code><textarea></code>
|
||||
element. That humble
|
||||
<code><textarea></code>
|
||||
is our
|
||||
<strong>minimum viable experience</strong>.
|
||||
</p>
|
||||
<p>Let me show you how it’s built up, progressively real quick. If you disable CSS and JavaScript, you get this:</p>
|
||||
<figure>
|
||||
<picture><source srcset="https://media.24ways.org/2019/bell/jotter-screenshot-html-only.webp" type="image/webp"><img src="https://media.24ways.org/2019/bell/jotter-screenshot-html-only.png" alt="The Jotter Progressive Web App with CSS and JavaScript disabled shows a HTML only experience."></source>
|
||||
</picture>
|
||||
</figure>
|
||||
<p>This result is great because I know that regardless of what happens, the user can do what they needed to do when the loaded Jotter in their browser: take some notes. That’s our
|
||||
<strong>minimum viable experience</strong>, completed with a few lines of code that work in
|
||||
<strong>every single browser</strong>—even very old browsers. Don’t you just love good ol’ HTML?
|
||||
</p>
|
||||
<p>Now it’s time to enhance that minimum viable experience,
|
||||
<strong>progressively</strong>. It’s a good idea to do that in smaller steps rather than just provide a 0% experience or a 100% experience, which is the approach that’s often favoured by JavaScript framework enthusiasts. I think that process is counter-intuitive to the web, though, so building up from a minimum viable experience is the optimal way to go, in my opinion.
|
||||
</p>
|
||||
<p>Understanding how a
|
||||
<strong>minimum viable experience</strong>
|
||||
works can be a bit tough, admittedly, so I like to use a the following diagram to explain the process:</p>
|
||||
<figure>
|
||||
<picture><source srcset="https://media.24ways.org/2019/bell/mvp.webp" type="image/webp"><img src="https://media.24ways.org/2019/bell/mvp.png" alt="Minimum viable experience diagram which is described in the next paragraph."></source>
|
||||
</picture>
|
||||
</figure>
|
||||
<p>Let me break down this diagram for both folks who can and can’t see it. On the top row, there’s four stages of a broken-up car, starting with just a wheel, all the way up to a fully functioning car. The car enhances only in a way that it is still
|
||||
<strong>mostly useless</strong>
|
||||
until it gets to its final form when the person is finally happy.
|
||||
</p>
|
||||
<p>On the second row, instead of building a car, we start with a skateboard which immediately does the job of getting the person from point A to point B. This enhances to a Micro Scooter and then to a Push Bike. Its final form is a fancy looking Motor Scooter. I choose that instead of a car deliberately because generally, when you progressively enhance a project, it turns out to be
|
||||
<em>way simpler and lighter</em>
|
||||
than a project that was built without progressive enhancement in mind.</p>
|
||||
<p>Now that we know what a minimum viable experience is and how it works, let’s apply this methodology to Jotter!
|
||||
</p>
|
||||
<h2>Add some CSS</h2>
|
||||
<p>The first enhancement is CSS. Jotter has a very simple design, which is mostly a full height
|
||||
<code><textarea></code>
|
||||
with a little sidebar. A flexbox-based, auto-stacking layout, inspired by a layout called
|
||||
<a href="https://every-layout.dev/layouts/sidebar/">The Sidebar</a>
|
||||
is used and we’re good to go.
|
||||
</p>
|
||||
<p>Based on the diagram from earlier, we can comfortably say we’re in
|
||||
<strong>Skateboard</strong>
|
||||
territory now.</p>
|
||||
<h2>Add some JavaScript</h2>
|
||||
<p>We’ve got styles now, so let’s
|
||||
<em>enhance</em>
|
||||
the experience again. A user can currently load up the site and take notes. If the CSS loads, it’ll be a more pleasant experience, but if they refresh their browser, they’re going to lose all of their work.</p>
|
||||
<p>We can fix that by adding some
|
||||
<a href="https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage">local storage</a>
|
||||
into the mix.
|
||||
</p>
|
||||
<p>The functionality flow is pretty straightforward. As a user inputs content, the JavaScript listens to an
|
||||
<code>input</code>
|
||||
event and pushes the content of the
|
||||
<code><textarea></code>
|
||||
into
|
||||
<code>localStorage</code>. If we then set that
|
||||
<code>localStorage</code>
|
||||
data to populate the
|
||||
<code><textarea></code>
|
||||
on load, that user’s experience is suddenly
|
||||
<em>enhanced</em>
|
||||
because they can’t lose their work by accidentally refreshing.
|
||||
</p>
|
||||
<p>The JavaScript is incredibly light, too:
|
||||
</p>
|
||||
<pre><code class="language-javascript">const textArea = document.querySelector('textarea');
|
||||
const storageKey = 'text';
|
||||
|
||||
const init = () => {
|
||||
|
||||
textArea.value = localStorage.getItem(storageKey);
|
||||
|
||||
textArea.addEventListener('input', () => {
|
||||
localStorage.setItem(storageKey, textArea.value);
|
||||
});
|
||||
}
|
||||
|
||||
init();</code></pre>
|
||||
<p>In around 13 lines of code (which you can see a
|
||||
<a href="https://codepen.io/andybelldesign/pen/vYEYZJQ">working demo here</a>), we’ve been able to enhance the user’s experience
|
||||
<em>considerably</em>, and if we think back to our diagram from earlier, we are very much in
|
||||
<strong>Micro Scooter</strong>
|
||||
territory now.
|
||||
</p>
|
||||
<h2>Making it a PWA</h2>
|
||||
<p>We’re in really good shape now, so let’s turn Jotter into a
|
||||
<strong>Motor Scooter</strong>
|
||||
and make this thing work offline as an installable Progressive Web App (PWA).
|
||||
</p>
|
||||
<p>Making a PWA is really achievable and Google have even produced a
|
||||
<a href="https://developers.google.com/web/progressive-web-apps/checklist">handy checklist</a>
|
||||
to help you get going. You can also get guidance from a
|
||||
<a href="https://developers.google.com/web/tools/lighthouse">Lighthouse audit</a>.
|
||||
</p>
|
||||
<p>For this little app, all we need is a
|
||||
<a href="https://developers.google.com/web/fundamentals/web-app-manifest">manifest</a>
|
||||
and a
|
||||
<a href="https://developers.google.com/web/fundamentals/primers/service-workers">Service Worker</a>
|
||||
to cache assets and serve them offline for us if needed.</p>
|
||||
<p>The Service Worker is actually pretty slim, so here it is in its entirety:
|
||||
</p>
|
||||
<pre><code class="language-javascript">const VERSION = '0.1.3';
|
||||
const CACHE_KEYS = {
|
||||
MAIN: `main-${VERSION}`
|
||||
};
|
||||
|
||||
// URLS that we want to be cached when the worker is installed
|
||||
const PRE_CACHE_URLS = ['/', '/css/global.css', '/js/app.js', '/js/components/content.js'];
|
||||
|
||||
/**
|
||||
* Takes an array of strings and puts them in a named cache store
|
||||
*
|
||||
* @param {String} cacheName
|
||||
* @param {Array} items=[]
|
||||
*/
|
||||
const addItemsToCache = function(cacheName, items = []) {
|
||||
caches.open(cacheName).then(cache => cache.addAll(items));
|
||||
};
|
||||
|
||||
self.addEventListener('install', evt => {
|
||||
self.skipWaiting();
|
||||
|
||||
addItemsToCache(CACHE_KEYS.MAIN, PRE_CACHE_URLS);
|
||||
});
|
||||
|
||||
self.addEventListener('activate', evt => {
|
||||
// Look for any old caches that don't match our set and clear them out
|
||||
evt.waitUntil(
|
||||
caches
|
||||
.keys()
|
||||
.then(cacheNames => {
|
||||
return cacheNames.filter(item => !Object.values(CACHE_KEYS).includes(item));
|
||||
})
|
||||
.then(itemsToDelete => {
|
||||
return Promise.all(
|
||||
itemsToDelete.map(item => {
|
||||
return caches.delete(item);
|
||||
})
|
||||
);
|
||||
})
|
||||
.then(() => self.clients.claim())
|
||||
);
|
||||
});
|
||||
|
||||
self.addEventListener('fetch', evt => {
|
||||
evt.respondWith(
|
||||
caches.match(evt.request).then(cachedResponse => {
|
||||
// Item found in cache so return
|
||||
if (cachedResponse) {
|
||||
return cachedResponse;
|
||||
}
|
||||
|
||||
// Nothing found so load up the request from the network
|
||||
return caches.open(CACHE_KEYS.MAIN).then(cache => {
|
||||
return fetch(evt.request)
|
||||
.then(response => {
|
||||
// Put the new response in cache and return it
|
||||
return cache.put(evt.request, response.clone()).then(() => {
|
||||
return response;
|
||||
});
|
||||
})
|
||||
.catch(ex => {
|
||||
return;
|
||||
});
|
||||
});
|
||||
})
|
||||
);
|
||||
});</code></pre>
|
||||
<p>What the Service Worker does here is pre-cache our core assets that we define in <code>PRE_CACHE_URLS</code>. Then, for each <code>fetch</code> event which is called per request, it’ll try to fulfil the request from cache first. If it can’t do that, it’ll load the remote request for us. With this setup, we achieve two things:</p>
|
||||
<ol>
|
||||
<li>We get offline support because we stick our critical assets in cache immediately so they will be accessible offline</li>
|
||||
<li>Once those critical assets and any other requested assets are cached, the app will run faster by default</li>
|
||||
</ol>
|
||||
<p>Importantly now, because we have a manifest, some shortcut icons and a Service Worker that gives us offline support, we have a fully installable PWA! </p>
|
||||
<h2>Wrapping up</h2>
|
||||
<p>I hope with this simplified example you can see how approaching web design and development with a <strong>progressive enhancement</strong> approach, <strong>everyone</strong> gets an acceptable experience instead of those who are lucky enough to get every aspect of the page at the right time. </p>
|
||||
<p><a href="https://jotter.space">Jotter</a> is very much live and in the process of being enhanced further, which you can see on its little in-app roadmap, so go ahead and play around with it. </p>
|
||||
<p>Before you know it, it’ll be a car itself, but remember: it’ll always start as a humble little <code><textarea></code>.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<section class="c-section" id="author">
|
||||
<header class="c-section__header">
|
||||
<h2 class="c-section__title">About the author</h2>
|
||||
</header>
|
||||
<div class="c-section__main">
|
||||
<div class="s-prose">
|
||||
|
||||
<p>Andy Bell is an independent designer and front-end developer who’s trying to make everyone’s experience on the web better with a focus on progressive enhancement and accessibility.</p>
|
||||
<p><a class="c-continue" href="/authors/andybell/" title="More information about Andy Bell">More articles by Andy</a></p>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<section class="c-section c-section--sponsor" id="sponsor">
|
||||
<header class="c-section__header">
|
||||
<h2 class="c-section__title">Brought to you by</h2>
|
||||
</header>
|
||||
<div class="c-section__main">
|
||||
|
||||
|
||||
|
||||
<a class="c-promo" href="https://grabaperch.com/products/runway?ref=24w01">
|
||||
<img class="c-promo__image" src="/_assets/images/logo-perchrunway.png" alt="Perch Runway - Powerful, flexible content management " width="152" height="100"/>
|
||||
<p class="c-promo__message">Powerful, flexible content management with <strong>backup, cloud storage and client satisfaction</strong> all included.</p>
|
||||
<p class="c-promo__url">grabaperch.com/runway</p>
|
||||
</a>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
<section class="c-section c-section--related" id="related">
|
||||
<header class="c-section__header">
|
||||
<h2 class="c-section__title">Related articles</h2>
|
||||
</header>
|
||||
<div class="c-section__main">
|
||||
<ol class="c-listing c-listing--summaries">
|
||||
|
||||
<li>
|
||||
|
||||
<article class="c-summary h-entry day-12">
|
||||
<header class="c-summary__header">
|
||||
<h3 class="c-summary__title p-name">
|
||||
<a class="u-url" rel="bookmark" href="/2015/be-fluid-with-your-design-skills-build-your-own-sites/">Be Fluid with Your Design Skills: Build Your Own Sites</a>
|
||||
</h3>
|
||||
<p class="c-summary__author p-author h-card">
|
||||
|
||||
<a class="c-summary__author-url u-url" href="/authors/roshorner/" tabindex="-1"><picture>
|
||||
<source srcset="https://cloud.24ways.org/authors/roshorner72.webp" type="image/webp" /><img class="u-photo" src="https://cloud.24ways.org/authors/roshorner72.jpg" width="72" height="72" alt="" /></picture><span class="p-name">Ros Horner</span></a>
|
||||
|
||||
</p>
|
||||
</header>
|
||||
<div class="c-summary__main">
|
||||
<p class="p-summary"><a href="http://roshorner.com">Ros Horner</a> rings out a Christmas message for designers far and near of peace and goodwill to all, especially if they’re developers. With a rallying cry to take back control to see your own designs realised, young or old, merry or sober, the story is clear; as you design, so should you build.</p>
|
||||
</div>
|
||||
<footer class="c-summary__footer">
|
||||
<p class="c-summary__meta">
|
||||
<time class="dt-published" datetime="2015-12-12T00:00:00+00:00">
|
||||
12 <span>Dec 2015</span>
|
||||
</time>
|
||||
|
||||
</p>
|
||||
</footer>
|
||||
</article>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
|
||||
<article class="c-summary h-entry day-15">
|
||||
<header class="c-summary__header">
|
||||
<h3 class="c-summary__title p-name">
|
||||
<a class="u-url" rel="bookmark" href="/2018/designing-your-future/">Designing Your Future</a>
|
||||
</h3>
|
||||
<p class="c-summary__author p-author h-card">
|
||||
|
||||
<a class="c-summary__author-url u-url" href="/authors/christophermurphy/" tabindex="-1"><picture>
|
||||
<source srcset="https://cloud.24ways.org/authors/christophermurphy72.webp" type="image/webp" /><img class="u-photo" src="https://cloud.24ways.org/authors/christophermurphy72.jpg" width="72" height="72" alt="" /></picture><span class="p-name">Christopher Murphy</span></a>
|
||||
|
||||
</p>
|
||||
</header>
|
||||
<div class="c-summary__main">
|
||||
<p class="p-summary"><em>Christopher Murphy</em> channels the Ghost of Christmas Yet-to-Come by not just look into the future, but shaping the form it takes. By taking action now you can affect the outcome down the road, making all the difference when it comes to a big life change such as leaving full time employment.</p>
|
||||
</div>
|
||||
<footer class="c-summary__footer">
|
||||
<p class="c-summary__meta">
|
||||
<time class="dt-published" datetime="2018-12-15T00:00:00+00:00">
|
||||
15 <span>Dec 2018</span>
|
||||
</time>
|
||||
|
||||
</p>
|
||||
</footer>
|
||||
</article>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
|
||||
<article class="c-summary h-entry day-14">
|
||||
<header class="c-summary__header">
|
||||
<h3 class="c-summary__title p-name">
|
||||
<a class="u-url" rel="bookmark" href="/2014/five-ways-to-animate-responsibly/">Five Ways to Animate Responsibly</a>
|
||||
</h3>
|
||||
<p class="c-summary__author p-author h-card">
|
||||
|
||||
<a class="c-summary__author-url u-url" href="/authors/rachelnabors/" tabindex="-1"><picture>
|
||||
<source srcset="https://cloud.24ways.org/authors/rachelnabors72.webp" type="image/webp" /><img class="u-photo" src="https://cloud.24ways.org/authors/rachelnabors72.jpg" width="72" height="72" alt="" /></picture><span class="p-name">Rachel Nabors</span></a>
|
||||
|
||||
</p>
|
||||
</header>
|
||||
<div class="c-summary__main">
|
||||
<p class="p-summary"><a href="http://rachelnabors.com/">Rachel Nabors</a> clears the snowy drift of delight from web animation to reveal the need for necessity and usefulness when we decide to animate web interactions. The box it comes in is as important as the gift.</p>
|
||||
</div>
|
||||
<footer class="c-summary__footer">
|
||||
<p class="c-summary__meta">
|
||||
<time class="dt-published" datetime="2014-12-14T00:00:00+00:00">
|
||||
14 <span>Dec 2014</span>
|
||||
</time>
|
||||
|
||||
</p>
|
||||
</footer>
|
||||
</article>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
|
||||
<article class="c-summary h-entry day-04">
|
||||
<header class="c-summary__header">
|
||||
<h3 class="c-summary__title p-name">
|
||||
<a class="u-url" rel="bookmark" href="/2017/jobs-to-be-done-in-your-ux-toolbox/">Jobs-to-Be-Done in Your UX Toolbox</a>
|
||||
</h3>
|
||||
<p class="c-summary__author p-author h-card">
|
||||
|
||||
<a class="c-summary__author-url u-url" href="/authors/stephtroeth/" tabindex="-1"><picture>
|
||||
<source srcset="https://cloud.24ways.org/authors/stephtroeth72.webp" type="image/webp" /><img class="u-photo" src="https://cloud.24ways.org/authors/stephtroeth72.jpg" width="72" height="72" alt="" /></picture><span class="p-name">Steph Troeth</span></a>
|
||||
|
||||
</p>
|
||||
</header>
|
||||
<div class="c-summary__main">
|
||||
<p class="p-summary"><em>Steph Troeth</em> rallies the workshop elves around an idea for revolutionising their worksheets and giving them a new way to think about approaching each job. One thing’s for certain, as Christmas approaches there’s always plenty of jobs to be done.</p>
|
||||
</div>
|
||||
<footer class="c-summary__footer">
|
||||
<p class="c-summary__meta">
|
||||
<time class="dt-published" datetime="2017-12-04T00:00:00+00:00">
|
||||
4 <span>Dec 2017</span>
|
||||
</time>
|
||||
|
||||
</p>
|
||||
</footer>
|
||||
</article>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
|
||||
<article class="c-summary h-entry day-05">
|
||||
<header class="c-summary__header">
|
||||
<h3 class="c-summary__title p-name">
|
||||
<a class="u-url" rel="bookmark" href="/2017/levelling-up-for-junior-developers/">Levelling Up for Junior Developers</a>
|
||||
</h3>
|
||||
<p class="c-summary__author p-author h-card">
|
||||
|
||||
<a class="c-summary__author-url u-url" href="/authors/deanhume/" tabindex="-1"><picture>
|
||||
<source srcset="https://cloud.24ways.org/authors/deanhume72.webp" type="image/webp" /><img class="u-photo" src="https://cloud.24ways.org/authors/deanhume72.jpg" width="72" height="72" alt="" /></picture><span class="p-name">Dean Hume</span></a>
|
||||
|
||||
</p>
|
||||
</header>
|
||||
<div class="c-summary__main">
|
||||
<p class="p-summary"><em>Dean Hume</em> places another log on the fire, sets the poker back on its stand, pulls up and chair and gathers the junior developers around the hearth to impart some wisdom. Whether you’re just starting out or have been in the game some time, we can all benefit from a little levelling up.</p>
|
||||
</div>
|
||||
<footer class="c-summary__footer">
|
||||
<p class="c-summary__meta">
|
||||
<time class="dt-published" datetime="2017-12-05T00:00:00+00:00">
|
||||
5 <span>Dec 2017</span>
|
||||
</time>
|
||||
|
||||
</p>
|
||||
</footer>
|
||||
</article>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
|
||||
<article class="c-summary h-entry day-24">
|
||||
<header class="c-summary__header">
|
||||
<h3 class="c-summary__title p-name">
|
||||
<a class="u-url" rel="bookmark" href="/2015/solve-the-hard-problems/">Solve the Hard Problems</a>
|
||||
</h3>
|
||||
<p class="c-summary__author p-author h-card">
|
||||
|
||||
<a class="c-summary__author-url u-url" href="/authors/drewmclellan/" tabindex="-1"><picture>
|
||||
<source srcset="https://cloud.24ways.org/authors/drewmclellan72.webp" type="image/webp" /><img class="u-photo" src="https://cloud.24ways.org/authors/drewmclellan72.jpg" width="72" height="72" alt="" /></picture><span class="p-name">Drew McLellan</span></a>
|
||||
|
||||
</p>
|
||||
</header>
|
||||
<div class="c-summary__main">
|
||||
<p class="p-summary"><a href="http://allinthehead.com/">Drew McLellan</a> brings our 2015 calendar to a motivational close with some encouragement for the year ahead. Year’s end is a time for reflection <em>and</em> finding new purpose and enthusiasm for what we do. By tackling the thorniest design and development problems, we can make the greatest impact – and have the most fun. Merry Christmas and a happy New Year!</p>
|
||||
</div>
|
||||
<footer class="c-summary__footer">
|
||||
<p class="c-summary__meta">
|
||||
<time class="dt-published" datetime="2015-12-24T00:00:00+00:00">
|
||||
24 <span>Dec 2015</span>
|
||||
</time>
|
||||
|
||||
</p>
|
||||
</footer>
|
||||
</article>
|
||||
</li>
|
||||
|
||||
</ol>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
<section class="c-section" id="comments">
|
||||
<header class="c-section__header">
|
||||
<h2 class="c-section__title">Comments</h2>
|
||||
</header>
|
||||
<div class="c-section__main">
|
||||
<div class="s-prose">
|
||||
<p><a class="c-continue" href="/2019/it-all-starts-with-a-humble-textarea/comments/" data-replace data-interaction data-target="#comments">No comments yet - leave yours</a></p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
|
||||
</article>
|
||||
</main> <nav class="c-traverse-nav" aria-label="Article"><a class="c-traverse-nav__item" rel="prev" href="/2019/iconography-of-security/" aria-label="Previous: Iconography of Security"><svg class="c-traverse-nav__icon" width="20" height="20" viewBox="0 0 200 200" focusable="false" aria-hidden="true">
|
||||
<path d="M50 100l85 85 7-7-78-78 78-78-7-7"/>
|
||||
</svg>
|
||||
</a><a class="c-traverse-nav__item" rel="next" href="/2019/its-time-to-get-personal/" aria-label="Next: It’s Time to Get Personal"><svg class="c-traverse-nav__icon" width="20" height="20" viewBox="0 0 200 200" focusable="false" aria-hidden="true">
|
||||
<path d="M150 100l-85 85-7-7 78-78-78-78 7-7"/>
|
||||
</svg>
|
||||
</a></nav><footer class="c-contentinfo">
|
||||
<p class="c-contentinfo__social">
|
||||
<a href="https://feeds.feedburner.com/24ways" rel="alternate">Grab our RSS feed</a>
|
||||
<a href="https://twitter.com/24ways" rel="me">Follow us on Twitter</a>
|
||||
<a href="https://github.com/24ways" rel="me">Contribute on GitHub</a>
|
||||
</p>
|
||||
<p class="c-contentinfo__copyright">
|
||||
<small>© 2005-2020 24 ways and our authors</small>
|
||||
</p>
|
||||
</footer></body>
|
||||
</html>
|
||||
@@ -1,699 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en-gb" dir="ltr" prefix="og: http://ogp.me/ns#" class="no-js">
|
||||
<head>
|
||||
<meta charset="utf-8"/>
|
||||
<link rel="dns-prefetch" href="https://fonts.gstatic.com"/>
|
||||
<link rel="dns-prefetch" href="https://cloud.24ways.org"/>
|
||||
<link rel="dns-prefetch" href="https://media.24ways.org"/>
|
||||
|
||||
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Code+Pro%7CSource+Sans+Pro:400,700%7CSource+Serif+Pro:400"/>
|
||||
<link rel="stylesheet" href="/assets/styles/app-55.css"/>
|
||||
|
||||
<link rel="shortcut icon" href="/assets/icons/icon.ico" type="image/ico"/>
|
||||
<link rel="apple-touch-icon" href="/assets/icons/icon.png" type="image/png"/>
|
||||
<link rel="mask-icon" href="/assets/icons/icon.svg" color="#f04"/>
|
||||
<link rel="manifest" href="/app.webmanifest"/>
|
||||
<link rel="alternate" href="https://feeds.feedburner.com/24ways" type="application/rss+xml"/>
|
||||
<link rel="author" href="/humans.txt"/>
|
||||
|
||||
<script>
|
||||
var docEl = document.documentElement;
|
||||
docEl.className = docEl.className.replace('no-js', 'has-js');
|
||||
</script>
|
||||
|
||||
<script src="/assets/scripts/app-55.js" defer></script>
|
||||
<script src="/assets/scripts/prism.min.js" defer></script>
|
||||
<script src="/assets/scripts/stats.js" defer></script>
|
||||
|
||||
<meta name="referrer" content="origin"/>
|
||||
<meta name="robots" content="index, follow"/>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1"/>
|
||||
<meta property="og:url" name="twitter:url" content="https://24ways.org/2019/it-all-starts-with-a-humble-textarea/"/>
|
||||
<meta property="og:title" name="twitter:title" content="It All Starts with a Humble <textarea>"/>
|
||||
<meta property="og:description" name="twitter:description" content="Andy Bell rings out a fresh call in support of the timeless concept of progressive enhancement. What does it mean to build a modern JavaScript-focussed web experience that still works well if part of the stack isn’t supported or fails? Andy shows us how that might be done."/>
|
||||
<meta property="og:image" name="twitter:image" content="https://cloud.24ways.org/2019/sharing/it-all-starts-with-a-humble-textarea.png"/>
|
||||
<meta property="og:type" content="article"/>
|
||||
<meta property="fb:app_id" content="1506442732766250"/>
|
||||
<meta name="twitter:site" content="@24ways"/>
|
||||
<meta name="twitter:creator" content="@hankchizljaw"/>
|
||||
<meta name="twitter:card" content="summary_large_image"/>
|
||||
<meta name="format-detection" content="telephone=no"/>
|
||||
<meta name="theme-color" content="#302"/>
|
||||
<meta name="msapplication-TileColor" content="#302"/>
|
||||
|
||||
<style>:root
|
||||
{
|
||||
--color-year: hsl(292, 100%, 16%);
|
||||
--color-year--dark: hsl(292, 100%, 8%);
|
||||
--color-year--dark-alpha: hsla(292, 100%, 8%, 0.8);
|
||||
--color-day: hsl(311, 80%, 60%);
|
||||
--color-day--light: hsl(311, 60%, 98%);
|
||||
--color-day--dark: hsl(311, 100%, 24%);
|
||||
--color-day--dark-alpha: hsla(311, 100%, 24%, 0.33);
|
||||
}
|
||||
</style>
|
||||
|
||||
<title>It All Starts with a Humble <textarea> ◆ 24 ways</title>
|
||||
</head>
|
||||
<body>
|
||||
<header class="c-banner" id="top">
|
||||
<a class="c-banner__skip" href="#main">Skip to content</a>
|
||||
<p class="c-banner__title">
|
||||
<a class="c-banner__home" href="/" rel="home">24 ways
|
||||
<span>to impress your friends</span>
|
||||
</a>
|
||||
</p>
|
||||
</header>
|
||||
<div class="c-menu no-transition">
|
||||
<button class="c-menu__button" id="menu__button" aria-controls="menu__drawer" aria-expanded="true" aria-label="Menu">
|
||||
<svg class="c-menu__icon" width="20" height="20" viewbox="0 0 200 200" focusable="false" aria-hidden="true">
|
||||
<rect class="c-menu__line" width="120" height="10" x="40" y="45"/>
|
||||
<rect class="c-menu__line" width="120" height="10" x="40" y="70"/>
|
||||
<rect class="c-menu__line" width="120" height="10" x="40" y="95"/>
|
||||
<rect class="c-menu__line" width="120" height="10" x="40" y="95"/>
|
||||
<rect class="c-menu__line" width="120" height="10" x="40" y="120"/>
|
||||
<rect class="c-menu__line" width="120" height="10" x="40" y="145"/>
|
||||
</svg>
|
||||
</button>
|
||||
<div class="c-menu__drawer" id="menu__drawer" role="region" aria-label="Menu">
|
||||
<form class="c-search" role="search" id="search" action="/search/">
|
||||
<fieldset class="c-field">
|
||||
<legend class="u-hidden">Search 24 ways</legend>
|
||||
<label class="u-hidden" for="q">Keywords</label>
|
||||
<input class="c-field__input" type="search" id="q" name="q" placeholder="e.g. CSS, Design, Research…"/>
|
||||
<button class="c-field__button" type="submit">
|
||||
<svg class="c-field__icon" width="20" height="20" viewbox="0 0 200 200" focusable="false" role="img" aria-label="Search">
|
||||
<path role="presentation" d="M129 121C136 113 140 102 140 90c0-28-22-50-50-50S40 63 40 90s22 50 50 50c12 0 24-4 32-12L158 164l7-7-36-36zM90 130c-22 0-40-18-40-40s18-40 40-40 40 18 40 40-18 40-40 40z"/>
|
||||
</svg>
|
||||
</button>
|
||||
</fieldset>
|
||||
</form>
|
||||
|
||||
<nav class="c-topics-nav" aria-label="Topics">
|
||||
<ul class="c-topics-nav__items">
|
||||
|
||||
<li class="c-topics-nav__item">
|
||||
<a class="c-topics-nav__label" href="/topics/business/">
|
||||
<svg width="16" height="16" viewbox="0 0 240 240" focusable="false" aria-hidden="true">
|
||||
<path d="M20 220c-11 0-20-9-20-20V70c0-11 9-20 20-20h60V35c0-10 5-15 15-15h50c10 0 15 5 15 15v15h60c11 0 20 9 20 20v130c0 11-9 20-20 20H20zm0-160c-5.5 0-10 4.5-10 10v130c0 5.5 4.5 10 10 10h200c5.5 0 10-4.5 10-10V70c0-5.5-4.5-10-10-10H20zm130-10V35c0-3-2-5-5-5H95c-3 0-5 2-5 5v15h60zM30 100V90h180v10H30zm0 40v-10h180v10H30zm0 40v-10h180v10H30z"/>
|
||||
</svg>
|
||||
|
||||
Business
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="c-topics-nav__item">
|
||||
<a class="c-topics-nav__label" href="/topics/code/">
|
||||
<svg width="16" height="16" viewbox="0 0 240 240" focusable="false" aria-hidden="true">
|
||||
<path transform="rotate(45 120 120)" d="M115 100H70.5C63 85 47.5 75 30 75 8.5 75-9.5 90-14 110h29l10 10-10 10h-29c4.5 20 22.5 35 44 35 17.5 0 33-10 40.5-25h99.5c7.5 15 22.5 25 40.5 25 21.5 0 39.5-15 44-35h-29l-10-10 10-10h29c-4.5-20-22.5-35-44-35-17.5 0-33 10-40.5 25H125V30h10v-50h-30v50h10v70zm123.5 40c-6.5 9-17 15-28.5 15-16 0-29-10.5-33.5-25H63.5C59 144.5 46 155 30 155c-12 0-22.5-6-28.5-15H20l20-20-20-20H1.5C7.5 91 18 85 30 85c16 0 29 10.5 33.5 25h113c4.5-14.5 17.5-25 33.5-25 12 0 23 6 29 15h-19l-20 20 20 20h19zM115-10h10v30h-10v-30zM99.5 240v-50h-10v-10h25v-40h10v40h25v10H140v50c0 10-7.5 20-20 20-12.5 0-20-10-20.5-20zm11 0c0 7.5 5 10 10 10s10-2.5 10-10v-50h-20v50z"/>
|
||||
</svg>
|
||||
|
||||
Code
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="c-topics-nav__item">
|
||||
<a class="c-topics-nav__label" href="/topics/content/">
|
||||
<svg width="16" height="16" viewbox="0 0 240 240" focusable="false" aria-hidden="true">
|
||||
<path d="M102.5 240l-1.5-2c-2.5-3.5-61-88-61-128s40.5-64 42.5-65L50 0h140l-32.5 45S200 70 200 110s-58.5 124.5-61 128l-1.5 2h-35zm30-10c9-13 57.5-85.5 57.5-120 0-33-35-56-41.5-60H91.5C85 54 50 77 50 110c0 34.5 48.5 106.5 57.5 120h25zM115 129.5c-11.5-2-20-12.5-20-24.5 0-14 11-25 25-25s25 11 25 25c0 12-8.5 22-20 24.5V230h-10V129.5zm5-39.5c-8 0-15 6.5-15 15s6.5 15 15 15 15-6.5 15-15-6.5-15-15-15zM92.5 40h55L170 10H70l22.5 30z"/>
|
||||
</svg>
|
||||
|
||||
Content
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="c-topics-nav__item">
|
||||
<a class="c-topics-nav__label" href="/topics/design/">
|
||||
<svg width="16" height="16" viewbox="0 0 240 240" focusable="false" aria-hidden="true">
|
||||
<path fill-rule="evenodd" d="M140 0h80v240h-80V0zm70 10h-60v30h20v10h-20V70h20v10h-20v20h20v10h-20v20h20v10h-20v20h20v10h-20v20h20v10h-20V230h60V10zM45 230c-14 0-25-11-25-25V60c0-1 35-55 35-55s35 54 35 55v145c0 14-11 25-25 25H45zm-15-25c0 8 7 15 15 15h20c8 0 15-7 15-15v-5H30v5zm0-25v10h50v-10H30zm0-106c0-2 2-4 4-4h2c2 0 4 2 4 4v96H30V74zm20 0c0-2 2-4 4-4h2c2 0 4 2 4 4v96H50V74zm20 0c0-2 2-4 4-4h2c2 0 4 2 4 4v96H70V74zM30.5 60.5S39 58 45 63.5c6-4.5 14-4.5 20 0 6-5.5 14.5-3 14.5-3L69 45H41L30.5 60.5zm24.5-38L47.5 35h15L55 22.5z"/>
|
||||
</svg>
|
||||
|
||||
Design
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="c-topics-nav__item">
|
||||
<a class="c-topics-nav__label" href="/topics/process/">
|
||||
<svg width="16" height="16" viewbox="0 0 240 240" focusable="false" aria-hidden="true">
|
||||
<path d="M210 116v4c0 49.5-40.5 90-90 90-29 0-55-14-71.5-35l7-7c14.5 19.5 38 32 64.5 32 44 0 80-36 80-80v-3.5l-15.5 16-7.5-7.5 28.5-28.5L234 125l-7.5 7.5L210 116zm-180 8v-4c0-49.5 40.5-90 90-90 29 0 54.5 13.5 71 35l-7 7C169 52.5 146 40 120 40c-44 0-80 36-80 80v5l17-17 7 7-28.5 28.5L7 115l7-7 16 16z"/>
|
||||
</svg>
|
||||
|
||||
Process
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="c-topics-nav__item">
|
||||
<a class="c-topics-nav__label" href="/topics/ux/">
|
||||
<svg width="16" height="16" viewbox="0 0 240 240" focusable="false" aria-hidden="true">
|
||||
<path d="M220 240H20c-11 0-20-9-20-20V20C0 9 9 0 20 0h200c11 0 20 9 20 20v200c0 11-9 20-20 20zM20 10c-5 0-10 4-10 10v200c0 5 4 10 10 10h200c5 0 10-4 10-10V20c0-5-4-10-10-10H20zm150 200c-11 0-20-9-20-20s9-20 20-20 20 9 20 20-9 20-20 20zm0-30c-5 0-10 4-10 10s4 10 10 10 10-4 10-10-4-10-10-10zm-50 30c-11 0-20-9-20-20s9-20 20-20 20 9 20 20-9 20-20 20zm0-30c-5 0-10 4-10 10s4 10 10 10 10-4 10-10-4-10-10-10zm-50 30c-11 0-20-9-20-20s9-20 20-20 20 9 20 20-9 20-20 20zm0-30c-5 0-10 4-10 10s4 10 10 10 10-4 10-10-4-10-10-10zm45-30V80h10v70h-10zm0-100V30h10v20h-10zM65 80V30h10v50H65zm0 70v-40h10v40H65zm100 0v-20h10v20h-10zm0-50V30h10v70h-10zM50 110V80h40v30H50zm10-10h20V90H60v10zm90 30v-30h40v30h-40zm-50-50V50h40v30h-40zm10-10h20V60h-20v10zm50 50h20v-10h-20v10z"/>
|
||||
</svg>
|
||||
|
||||
UX
|
||||
</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</nav>
|
||||
<nav class="c-site-nav" aria-label="Explore 24 ways">
|
||||
<ul class="c-site-nav__items">
|
||||
<li class="c-site-nav__item">
|
||||
<a class="c-site-nav__label" href="/archives/">Archives</a>
|
||||
</li>
|
||||
<li class="c-site-nav__item">
|
||||
<a class="c-site-nav__label" href="/authors/">Authors</a>
|
||||
</li>
|
||||
<li class="c-site-nav__item">
|
||||
<a class="c-site-nav__label" href="/about/" aria-label="About this website">About</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
<script class="c-menu__onload">
|
||||
document.getElementById('menu__drawer').style.display = 'none';
|
||||
</script>
|
||||
</div>
|
||||
|
||||
|
||||
<main class="c-main" id="main">
|
||||
<article class="c-article h-entry">
|
||||
<header class="c-article__header">
|
||||
<h1 class="c-article__title p-name">It All Starts with a Humble <textarea></h1>
|
||||
<p class="c-article__byline p-author h-card">
|
||||
|
||||
<a class="u-url" href="#author">
|
||||
<picture>
|
||||
<source srcset="https://cloud.24ways.org/authors/andybell280.webp" type="image/webp"/>
|
||||
<img class="c-avatar u-photo" src="https://cloud.24ways.org/authors/andybell280.jpg" width="160" height="160" alt="Andy Bell"/>
|
||||
</picture>
|
||||
<span class="p-name">Andy Bell</span>
|
||||
</a>
|
||||
|
||||
</p>
|
||||
</header>
|
||||
|
||||
<footer class="c-article__footer">
|
||||
<ul class="c-meta">
|
||||
<li class="c-meta__item">
|
||||
<time class="dt-published" datetime="2019-12-08T00:00:00+00:00">8 Dec<span>ember</span>
|
||||
2019</time>
|
||||
</li>
|
||||
|
||||
|
||||
<li class="c-meta__item">Published in
|
||||
<a href="/topics/ux/">UX</a>
|
||||
</li>
|
||||
|
||||
|
||||
<li class="c-meta__item">
|
||||
<a href="#comments">No comments</a>
|
||||
</li>
|
||||
</ul>
|
||||
</footer>
|
||||
|
||||
<div class="c-article__main e-content">
|
||||
|
||||
<div class="s-prose s-prose--article">
|
||||
<p class="lede">Those that know me well know that I make
|
||||
<em>a lot</em>
|
||||
of
|
||||
<a href="https://hankchizljaw.com/projects/">side projects</a>. I most definitely make too many, but there’s one really useful thing about making lots of side projects: it allows me to experiment in a low-risk setting.
|
||||
</p>
|
||||
<p>Side projects also allow me to accidentally create a context where I can demonstrate a really affective, long-running methodology for building on the web:
|
||||
<strong>progressive enhancement</strong>. That context is a little Progressive Web App that I’m tinkering with called
|
||||
<a href="https://jotter.space/">Jotter</a>. It’s incredibly simple, but under the hood, there’s a really solid experience built on top of a
|
||||
<strong>minimum viable experience</strong>
|
||||
which after reading this article, you’ll hopefully apply this methodology to your own work.</p>
|
||||
<figure>
|
||||
<picture><source srcset="https://media.24ways.org/2019/bell/jotter-screenshot.webp" type="image/webp"><img src="https://media.24ways.org/2019/bell/jotter-screenshot.png" alt="The Jotter Progressive Web App presented in the Google Chrome browser."></source>
|
||||
</picture>
|
||||
</figure>
|
||||
<h2>What is a minimum viable experience?</h2>
|
||||
<p>The key to progressive enhancement is distilling the user experience to its lowest possible technical solution and then building on it to improve the user experience. In the context of
|
||||
<a href="https://jotter.space/">Jotter</a>, that is a humble
|
||||
<code><textarea></code>
|
||||
element. That humble
|
||||
<code><textarea></code>
|
||||
is our
|
||||
<strong>minimum viable experience</strong>.
|
||||
</p>
|
||||
<p>Let me show you how it’s built up, progressively real quick. If you disable CSS and JavaScript, you get this:</p>
|
||||
<figure>
|
||||
<picture><source srcset="https://media.24ways.org/2019/bell/jotter-screenshot-html-only.webp" type="image/webp"><img src="https://media.24ways.org/2019/bell/jotter-screenshot-html-only.png" alt="The Jotter Progressive Web App with CSS and JavaScript disabled shows a HTML only experience."></source>
|
||||
</picture>
|
||||
</figure>
|
||||
<p>This result is great because I know that regardless of what happens, the user can do what they needed to do when the loaded Jotter in their browser: take some notes. That’s our
|
||||
<strong>minimum viable experience</strong>, completed with a few lines of code that work in
|
||||
<strong>every single browser</strong>—even very old browsers. Don’t you just love good ol’ HTML?
|
||||
</p>
|
||||
<p>Now it’s time to enhance that minimum viable experience,
|
||||
<strong>progressively</strong>. It’s a good idea to do that in smaller steps rather than just provide a 0% experience or a 100% experience, which is the approach that’s often favoured by JavaScript framework enthusiasts. I think that process is counter-intuitive to the web, though, so building up from a minimum viable experience is the optimal way to go, in my opinion.
|
||||
</p>
|
||||
<p>Understanding how a
|
||||
<strong>minimum viable experience</strong>
|
||||
works can be a bit tough, admittedly, so I like to use a the following diagram to explain the process:</p>
|
||||
<figure>
|
||||
<picture><source srcset="https://media.24ways.org/2019/bell/mvp.webp" type="image/webp"><img src="https://media.24ways.org/2019/bell/mvp.png" alt="Minimum viable experience diagram which is described in the next paragraph."></source>
|
||||
</picture>
|
||||
</figure>
|
||||
<p>Let me break down this diagram for both folks who can and can’t see it. On the top row, there’s four stages of a broken-up car, starting with just a wheel, all the way up to a fully functioning car. The car enhances only in a way that it is still
|
||||
<strong>mostly useless</strong>
|
||||
until it gets to its final form when the person is finally happy.
|
||||
</p>
|
||||
<p>On the second row, instead of building a car, we start with a skateboard which immediately does the job of getting the person from point A to point B. This enhances to a Micro Scooter and then to a Push Bike. Its final form is a fancy looking Motor Scooter. I choose that instead of a car deliberately because generally, when you progressively enhance a project, it turns out to be
|
||||
<em>way simpler and lighter</em>
|
||||
than a project that was built without progressive enhancement in mind.</p>
|
||||
<p>Now that we know what a minimum viable experience is and how it works, let’s apply this methodology to Jotter!
|
||||
</p>
|
||||
<h2>Add some CSS</h2>
|
||||
<p>The first enhancement is CSS. Jotter has a very simple design, which is mostly a full height
|
||||
<code><textarea></code>
|
||||
with a little sidebar. A flexbox-based, auto-stacking layout, inspired by a layout called
|
||||
<a href="https://every-layout.dev/layouts/sidebar/">The Sidebar</a>
|
||||
is used and we’re good to go.
|
||||
</p>
|
||||
<p>Based on the diagram from earlier, we can comfortably say we’re in
|
||||
<strong>Skateboard</strong>
|
||||
territory now.</p>
|
||||
<h2>Add some JavaScript</h2>
|
||||
<p>We’ve got styles now, so let’s
|
||||
<em>enhance</em>
|
||||
the experience again. A user can currently load up the site and take notes. If the CSS loads, it’ll be a more pleasant experience, but if they refresh their browser, they’re going to lose all of their work.</p>
|
||||
<p>We can fix that by adding some
|
||||
<a href="https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage">local storage</a>
|
||||
into the mix.
|
||||
</p>
|
||||
<p>The functionality flow is pretty straightforward. As a user inputs content, the JavaScript listens to an
|
||||
<code>input</code>
|
||||
event and pushes the content of the
|
||||
<code><textarea></code>
|
||||
into
|
||||
<code>localStorage</code>. If we then set that
|
||||
<code>localStorage</code>
|
||||
data to populate the
|
||||
<code><textarea></code>
|
||||
on load, that user’s experience is suddenly
|
||||
<em>enhanced</em>
|
||||
because they can’t lose their work by accidentally refreshing.
|
||||
</p>
|
||||
<p>The JavaScript is incredibly light, too:
|
||||
</p>
|
||||
<pre><code class="language-javascript">const textArea = document.querySelector('textarea');
|
||||
const storageKey = 'text';
|
||||
|
||||
const init = () => {
|
||||
|
||||
textArea.value = localStorage.getItem(storageKey);
|
||||
|
||||
textArea.addEventListener('input', () => {
|
||||
localStorage.setItem(storageKey, textArea.value);
|
||||
});
|
||||
}
|
||||
|
||||
init();</code></pre>
|
||||
<p>In around 13 lines of code (which you can see a
|
||||
<a href="https://codepen.io/andybelldesign/pen/vYEYZJQ">working demo here</a>), we’ve been able to enhance the user’s experience
|
||||
<em>considerably</em>, and if we think back to our diagram from earlier, we are very much in
|
||||
<strong>Micro Scooter</strong>
|
||||
territory now.
|
||||
</p>
|
||||
<h2>Making it a PWA</h2>
|
||||
<p>We’re in really good shape now, so let’s turn Jotter into a
|
||||
<strong>Motor Scooter</strong>
|
||||
and make this thing work offline as an installable Progressive Web App (PWA).
|
||||
</p>
|
||||
<p>Making a PWA is really achievable and Google have even produced a
|
||||
<a href="https://developers.google.com/web/progressive-web-apps/checklist">handy checklist</a>
|
||||
to help you get going. You can also get guidance from a
|
||||
<a href="https://developers.google.com/web/tools/lighthouse">Lighthouse audit</a>.
|
||||
</p>
|
||||
<p>For this little app, all we need is a
|
||||
<a href="https://developers.google.com/web/fundamentals/web-app-manifest">manifest</a>
|
||||
and a
|
||||
<a href="https://developers.google.com/web/fundamentals/primers/service-workers">Service Worker</a>
|
||||
to cache assets and serve them offline for us if needed.</p>
|
||||
<p>The Service Worker is actually pretty slim, so here it is in its entirety:
|
||||
</p>
|
||||
<pre><code class="language-javascript">const VERSION = '0.1.3';
|
||||
const CACHE_KEYS = {
|
||||
MAIN: `main-${VERSION}`
|
||||
};
|
||||
|
||||
// URLS that we want to be cached when the worker is installed
|
||||
const PRE_CACHE_URLS = ['/', '/css/global.css', '/js/app.js', '/js/components/content.js'];
|
||||
|
||||
/**
|
||||
* Takes an array of strings and puts them in a named cache store
|
||||
*
|
||||
* @param {String} cacheName
|
||||
* @param {Array} items=[]
|
||||
*/
|
||||
const addItemsToCache = function(cacheName, items = []) {
|
||||
caches.open(cacheName).then(cache => cache.addAll(items));
|
||||
};
|
||||
|
||||
self.addEventListener('install', evt => {
|
||||
self.skipWaiting();
|
||||
|
||||
addItemsToCache(CACHE_KEYS.MAIN, PRE_CACHE_URLS);
|
||||
});
|
||||
|
||||
self.addEventListener('activate', evt => {
|
||||
// Look for any old caches that don't match our set and clear them out
|
||||
evt.waitUntil(
|
||||
caches
|
||||
.keys()
|
||||
.then(cacheNames => {
|
||||
return cacheNames.filter(item => !Object.values(CACHE_KEYS).includes(item));
|
||||
})
|
||||
.then(itemsToDelete => {
|
||||
return Promise.all(
|
||||
itemsToDelete.map(item => {
|
||||
return caches.delete(item);
|
||||
})
|
||||
);
|
||||
})
|
||||
.then(() => self.clients.claim())
|
||||
);
|
||||
});
|
||||
|
||||
self.addEventListener('fetch', evt => {
|
||||
evt.respondWith(
|
||||
caches.match(evt.request).then(cachedResponse => {
|
||||
// Item found in cache so return
|
||||
if (cachedResponse) {
|
||||
return cachedResponse;
|
||||
}
|
||||
|
||||
// Nothing found so load up the request from the network
|
||||
return caches.open(CACHE_KEYS.MAIN).then(cache => {
|
||||
return fetch(evt.request)
|
||||
.then(response => {
|
||||
// Put the new response in cache and return it
|
||||
return cache.put(evt.request, response.clone()).then(() => {
|
||||
return response;
|
||||
});
|
||||
})
|
||||
.catch(ex => {
|
||||
return;
|
||||
});
|
||||
});
|
||||
})
|
||||
);
|
||||
});</code></pre>
|
||||
<p>What the Service Worker does here is pre-cache our core assets that we define in <code>PRE_CACHE_URLS</code>. Then, for each <code>fetch</code> event which is called per request, it’ll try to fulfil the request from cache first. If it can’t do that, it’ll load the remote request for us. With this setup, we achieve two things:</p>
|
||||
<ol>
|
||||
<li>We get offline support because we stick our critical assets in cache immediately so they will be accessible offline</li>
|
||||
<li>Once those critical assets and any other requested assets are cached, the app will run faster by default</li>
|
||||
</ol>
|
||||
<p>Importantly now, because we have a manifest, some shortcut icons and a Service Worker that gives us offline support, we have a fully installable PWA! </p>
|
||||
<h2>Wrapping up</h2>
|
||||
<p>I hope with this simplified example you can see how approaching web design and development with a <strong>progressive enhancement</strong> approach, <strong>everyone</strong> gets an acceptable experience instead of those who are lucky enough to get every aspect of the page at the right time. </p>
|
||||
<p><a href="https://jotter.space">Jotter</a> is very much live and in the process of being enhanced further, which you can see on its little in-app roadmap, so go ahead and play around with it. </p>
|
||||
<p>Before you know it, it’ll be a car itself, but remember: it’ll always start as a humble little <code><textarea></code>.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<section class="c-section" id="author">
|
||||
<header class="c-section__header">
|
||||
<h2 class="c-section__title">About the author</h2>
|
||||
</header>
|
||||
<div class="c-section__main">
|
||||
<div class="s-prose">
|
||||
|
||||
<p>Andy Bell is an independent designer and front-end developer who’s trying to make everyone’s experience on the web better with a focus on progressive enhancement and accessibility.</p>
|
||||
<p><a class="c-continue" href="/authors/andybell/" title="More information about Andy Bell">More articles by Andy</a></p>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<section class="c-section c-section--sponsor" id="sponsor">
|
||||
<header class="c-section__header">
|
||||
<h2 class="c-section__title">Brought to you by</h2>
|
||||
</header>
|
||||
<div class="c-section__main">
|
||||
|
||||
|
||||
|
||||
<a class="c-promo" href="https://grabaperch.com/products/runway?ref=24w01">
|
||||
<img class="c-promo__image" src="/_assets/images/logo-perchrunway.png" alt="Perch Runway - Powerful, flexible content management " width="152" height="100"/>
|
||||
<p class="c-promo__message">Powerful, flexible content management with <strong>backup, cloud storage and client satisfaction</strong> all included.</p>
|
||||
<p class="c-promo__url">grabaperch.com/runway</p>
|
||||
</a>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
<section class="c-section c-section--related" id="related">
|
||||
<header class="c-section__header">
|
||||
<h2 class="c-section__title">Related articles</h2>
|
||||
</header>
|
||||
<div class="c-section__main">
|
||||
<ol class="c-listing c-listing--summaries">
|
||||
|
||||
<li>
|
||||
|
||||
<article class="c-summary h-entry day-12">
|
||||
<header class="c-summary__header">
|
||||
<h3 class="c-summary__title p-name">
|
||||
<a class="u-url" rel="bookmark" href="/2015/be-fluid-with-your-design-skills-build-your-own-sites/">Be Fluid with Your Design Skills: Build Your Own Sites</a>
|
||||
</h3>
|
||||
<p class="c-summary__author p-author h-card">
|
||||
|
||||
<a class="c-summary__author-url u-url" href="/authors/roshorner/" tabindex="-1"><picture>
|
||||
<source srcset="https://cloud.24ways.org/authors/roshorner72.webp" type="image/webp" /><img class="u-photo" src="https://cloud.24ways.org/authors/roshorner72.jpg" width="72" height="72" alt="" /></picture><span class="p-name">Ros Horner</span></a>
|
||||
|
||||
</p>
|
||||
</header>
|
||||
<div class="c-summary__main">
|
||||
<p class="p-summary"><a href="http://roshorner.com">Ros Horner</a> rings out a Christmas message for designers far and near of peace and goodwill to all, especially if they’re developers. With a rallying cry to take back control to see your own designs realised, young or old, merry or sober, the story is clear; as you design, so should you build.</p>
|
||||
</div>
|
||||
<footer class="c-summary__footer">
|
||||
<p class="c-summary__meta">
|
||||
<time class="dt-published" datetime="2015-12-12T00:00:00+00:00">
|
||||
12 <span>Dec 2015</span>
|
||||
</time>
|
||||
|
||||
</p>
|
||||
</footer>
|
||||
</article>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
|
||||
<article class="c-summary h-entry day-15">
|
||||
<header class="c-summary__header">
|
||||
<h3 class="c-summary__title p-name">
|
||||
<a class="u-url" rel="bookmark" href="/2018/designing-your-future/">Designing Your Future</a>
|
||||
</h3>
|
||||
<p class="c-summary__author p-author h-card">
|
||||
|
||||
<a class="c-summary__author-url u-url" href="/authors/christophermurphy/" tabindex="-1"><picture>
|
||||
<source srcset="https://cloud.24ways.org/authors/christophermurphy72.webp" type="image/webp" /><img class="u-photo" src="https://cloud.24ways.org/authors/christophermurphy72.jpg" width="72" height="72" alt="" /></picture><span class="p-name">Christopher Murphy</span></a>
|
||||
|
||||
</p>
|
||||
</header>
|
||||
<div class="c-summary__main">
|
||||
<p class="p-summary"><em>Christopher Murphy</em> channels the Ghost of Christmas Yet-to-Come by not just look into the future, but shaping the form it takes. By taking action now you can affect the outcome down the road, making all the difference when it comes to a big life change such as leaving full time employment.</p>
|
||||
</div>
|
||||
<footer class="c-summary__footer">
|
||||
<p class="c-summary__meta">
|
||||
<time class="dt-published" datetime="2018-12-15T00:00:00+00:00">
|
||||
15 <span>Dec 2018</span>
|
||||
</time>
|
||||
|
||||
</p>
|
||||
</footer>
|
||||
</article>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
|
||||
<article class="c-summary h-entry day-14">
|
||||
<header class="c-summary__header">
|
||||
<h3 class="c-summary__title p-name">
|
||||
<a class="u-url" rel="bookmark" href="/2014/five-ways-to-animate-responsibly/">Five Ways to Animate Responsibly</a>
|
||||
</h3>
|
||||
<p class="c-summary__author p-author h-card">
|
||||
|
||||
<a class="c-summary__author-url u-url" href="/authors/rachelnabors/" tabindex="-1"><picture>
|
||||
<source srcset="https://cloud.24ways.org/authors/rachelnabors72.webp" type="image/webp" /><img class="u-photo" src="https://cloud.24ways.org/authors/rachelnabors72.jpg" width="72" height="72" alt="" /></picture><span class="p-name">Rachel Nabors</span></a>
|
||||
|
||||
</p>
|
||||
</header>
|
||||
<div class="c-summary__main">
|
||||
<p class="p-summary"><a href="http://rachelnabors.com/">Rachel Nabors</a> clears the snowy drift of delight from web animation to reveal the need for necessity and usefulness when we decide to animate web interactions. The box it comes in is as important as the gift.</p>
|
||||
</div>
|
||||
<footer class="c-summary__footer">
|
||||
<p class="c-summary__meta">
|
||||
<time class="dt-published" datetime="2014-12-14T00:00:00+00:00">
|
||||
14 <span>Dec 2014</span>
|
||||
</time>
|
||||
|
||||
</p>
|
||||
</footer>
|
||||
</article>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
|
||||
<article class="c-summary h-entry day-04">
|
||||
<header class="c-summary__header">
|
||||
<h3 class="c-summary__title p-name">
|
||||
<a class="u-url" rel="bookmark" href="/2017/jobs-to-be-done-in-your-ux-toolbox/">Jobs-to-Be-Done in Your UX Toolbox</a>
|
||||
</h3>
|
||||
<p class="c-summary__author p-author h-card">
|
||||
|
||||
<a class="c-summary__author-url u-url" href="/authors/stephtroeth/" tabindex="-1"><picture>
|
||||
<source srcset="https://cloud.24ways.org/authors/stephtroeth72.webp" type="image/webp" /><img class="u-photo" src="https://cloud.24ways.org/authors/stephtroeth72.jpg" width="72" height="72" alt="" /></picture><span class="p-name">Steph Troeth</span></a>
|
||||
|
||||
</p>
|
||||
</header>
|
||||
<div class="c-summary__main">
|
||||
<p class="p-summary"><em>Steph Troeth</em> rallies the workshop elves around an idea for revolutionising their worksheets and giving them a new way to think about approaching each job. One thing’s for certain, as Christmas approaches there’s always plenty of jobs to be done.</p>
|
||||
</div>
|
||||
<footer class="c-summary__footer">
|
||||
<p class="c-summary__meta">
|
||||
<time class="dt-published" datetime="2017-12-04T00:00:00+00:00">
|
||||
4 <span>Dec 2017</span>
|
||||
</time>
|
||||
|
||||
</p>
|
||||
</footer>
|
||||
</article>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
|
||||
<article class="c-summary h-entry day-05">
|
||||
<header class="c-summary__header">
|
||||
<h3 class="c-summary__title p-name">
|
||||
<a class="u-url" rel="bookmark" href="/2017/levelling-up-for-junior-developers/">Levelling Up for Junior Developers</a>
|
||||
</h3>
|
||||
<p class="c-summary__author p-author h-card">
|
||||
|
||||
<a class="c-summary__author-url u-url" href="/authors/deanhume/" tabindex="-1"><picture>
|
||||
<source srcset="https://cloud.24ways.org/authors/deanhume72.webp" type="image/webp" /><img class="u-photo" src="https://cloud.24ways.org/authors/deanhume72.jpg" width="72" height="72" alt="" /></picture><span class="p-name">Dean Hume</span></a>
|
||||
|
||||
</p>
|
||||
</header>
|
||||
<div class="c-summary__main">
|
||||
<p class="p-summary"><em>Dean Hume</em> places another log on the fire, sets the poker back on its stand, pulls up and chair and gathers the junior developers around the hearth to impart some wisdom. Whether you’re just starting out or have been in the game some time, we can all benefit from a little levelling up.</p>
|
||||
</div>
|
||||
<footer class="c-summary__footer">
|
||||
<p class="c-summary__meta">
|
||||
<time class="dt-published" datetime="2017-12-05T00:00:00+00:00">
|
||||
5 <span>Dec 2017</span>
|
||||
</time>
|
||||
|
||||
</p>
|
||||
</footer>
|
||||
</article>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
|
||||
<article class="c-summary h-entry day-24">
|
||||
<header class="c-summary__header">
|
||||
<h3 class="c-summary__title p-name">
|
||||
<a class="u-url" rel="bookmark" href="/2015/solve-the-hard-problems/">Solve the Hard Problems</a>
|
||||
</h3>
|
||||
<p class="c-summary__author p-author h-card">
|
||||
|
||||
<a class="c-summary__author-url u-url" href="/authors/drewmclellan/" tabindex="-1"><picture>
|
||||
<source srcset="https://cloud.24ways.org/authors/drewmclellan72.webp" type="image/webp" /><img class="u-photo" src="https://cloud.24ways.org/authors/drewmclellan72.jpg" width="72" height="72" alt="" /></picture><span class="p-name">Drew McLellan</span></a>
|
||||
|
||||
</p>
|
||||
</header>
|
||||
<div class="c-summary__main">
|
||||
<p class="p-summary"><a href="http://allinthehead.com/">Drew McLellan</a> brings our 2015 calendar to a motivational close with some encouragement for the year ahead. Year’s end is a time for reflection <em>and</em> finding new purpose and enthusiasm for what we do. By tackling the thorniest design and development problems, we can make the greatest impact – and have the most fun. Merry Christmas and a happy New Year!</p>
|
||||
</div>
|
||||
<footer class="c-summary__footer">
|
||||
<p class="c-summary__meta">
|
||||
<time class="dt-published" datetime="2015-12-24T00:00:00+00:00">
|
||||
24 <span>Dec 2015</span>
|
||||
</time>
|
||||
|
||||
</p>
|
||||
</footer>
|
||||
</article>
|
||||
</li>
|
||||
|
||||
</ol>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
<section class="c-section" id="comments">
|
||||
<header class="c-section__header">
|
||||
<h2 class="c-section__title">Comments</h2>
|
||||
</header>
|
||||
<div class="c-section__main">
|
||||
<div class="s-prose">
|
||||
<p><a class="c-continue" href="/2019/it-all-starts-with-a-humble-textarea/comments/" data-replace data-interaction data-target="#comments">No comments yet - leave yours</a></p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
|
||||
</article>
|
||||
</main> <nav class="c-traverse-nav" aria-label="Article"><a class="c-traverse-nav__item" rel="prev" href="/2019/iconography-of-security/" aria-label="Previous: Iconography of Security"><svg class="c-traverse-nav__icon" width="20" height="20" viewBox="0 0 200 200" focusable="false" aria-hidden="true">
|
||||
<path d="M50 100l85 85 7-7-78-78 78-78-7-7"/>
|
||||
</svg>
|
||||
</a><a class="c-traverse-nav__item" rel="next" href="/2019/its-time-to-get-personal/" aria-label="Next: It’s Time to Get Personal"><svg class="c-traverse-nav__icon" width="20" height="20" viewBox="0 0 200 200" focusable="false" aria-hidden="true">
|
||||
<path d="M150 100l-85 85-7-7 78-78-78-78 7-7"/>
|
||||
</svg>
|
||||
</a></nav><footer class="c-contentinfo">
|
||||
<p class="c-contentinfo__social">
|
||||
<a href="https://feeds.feedburner.com/24ways" rel="alternate">Grab our RSS feed</a>
|
||||
<a href="https://twitter.com/24ways" rel="me">Follow us on Twitter</a>
|
||||
<a href="https://github.com/24ways" rel="me">Contribute on GitHub</a>
|
||||
</p>
|
||||
<p class="c-contentinfo__copyright">
|
||||
<small>© 2005-2020 24 ways and our authors</small>
|
||||
</p>
|
||||
</footer></body>
|
||||
</html>
|
||||
Binary file not shown.
@@ -1,288 +1,76 @@
|
||||
import subprocess
|
||||
import json
|
||||
import sqlite3
|
||||
import os
|
||||
|
||||
from .fixtures import *
|
||||
|
||||
def test_depth_flag_is_accepted(process, disable_extractors_dict):
|
||||
arg_process = subprocess.run(["archivebox", "add", "http://127.0.0.1:8080/static/example.com.html", "--depth=0"],
|
||||
arg_process = subprocess.run(["archivebox", "add", "--index-only", "https://example.com", "--depth=0"],
|
||||
capture_output=True, env=disable_extractors_dict)
|
||||
assert 'unrecognized arguments: --depth' not in arg_process.stderr.decode("utf-8")
|
||||
|
||||
|
||||
def test_depth_flag_fails_if_it_is_not_0_or_1(process, disable_extractors_dict):
|
||||
arg_process = subprocess.run(
|
||||
["archivebox", "add", "--depth=5", "http://127.0.0.1:8080/static/example.com.html"],
|
||||
["archivebox", "add", "--index-only", "--depth=5", "https://example.com"],
|
||||
capture_output=True,
|
||||
env=disable_extractors_dict,
|
||||
)
|
||||
assert 'invalid choice' in arg_process.stderr.decode("utf-8")
|
||||
# Error message may say "invalid choice" or "is not one of"
|
||||
stderr = arg_process.stderr.decode("utf-8")
|
||||
assert 'invalid' in stderr.lower() or 'not one of' in stderr.lower()
|
||||
arg_process = subprocess.run(
|
||||
["archivebox", "add", "--depth=-1", "http://127.0.0.1:8080/static/example.com.html"],
|
||||
["archivebox", "add", "--index-only", "--depth=-1", "https://example.com"],
|
||||
capture_output=True,
|
||||
env=disable_extractors_dict,
|
||||
)
|
||||
assert 'invalid choice' in arg_process.stderr.decode("utf-8")
|
||||
stderr = arg_process.stderr.decode("utf-8")
|
||||
assert 'invalid' in stderr.lower() or 'not one of' in stderr.lower()
|
||||
|
||||
|
||||
def test_depth_flag_0_crawls_only_the_arg_page(tmp_path, process, disable_extractors_dict):
|
||||
def test_depth_flag_0_creates_source_file(tmp_path, process, disable_extractors_dict):
|
||||
os.chdir(tmp_path)
|
||||
arg_process = subprocess.run(
|
||||
["archivebox", "add", "--depth=0", "http://127.0.0.1:8080/static/example.com.html"],
|
||||
capture_output=True,
|
||||
env=disable_extractors_dict,
|
||||
)
|
||||
|
||||
archived_item_path = list(tmp_path.glob('archive/**/*'))[0]
|
||||
with open(archived_item_path / "index.json", "r", encoding='utf-8') as f:
|
||||
output_json = json.load(f)
|
||||
assert output_json["base_url"] == "127.0.0.1:8080/static/example.com.html"
|
||||
|
||||
|
||||
def test_depth_flag_1_crawls_the_page_AND_links(tmp_path, process, disable_extractors_dict):
|
||||
arg_process = subprocess.run(
|
||||
["archivebox", "add", "--depth=1", "http://127.0.0.1:8080/static/example.com.html"],
|
||||
["archivebox", "add", "--index-only", "--depth=0", "https://example.com"],
|
||||
capture_output=True,
|
||||
env=disable_extractors_dict,
|
||||
)
|
||||
|
||||
conn = sqlite3.connect("index.sqlite3")
|
||||
c = conn.cursor()
|
||||
urls = c.execute("SELECT url from core_snapshot").fetchall()
|
||||
conn.commit()
|
||||
conn.close()
|
||||
|
||||
urls = list(map(lambda x: x[0], urls))
|
||||
assert "http://127.0.0.1:8080/static/example.com.html" in urls
|
||||
assert "http://127.0.0.1:8080/static/iana.org.html" in urls
|
||||
# Check that source file was created with the URL
|
||||
sources_dir = tmp_path / "sources"
|
||||
assert sources_dir.exists()
|
||||
source_files = list(sources_dir.glob("*cli_add.txt"))
|
||||
assert len(source_files) >= 1
|
||||
source_content = source_files[0].read_text()
|
||||
assert "example.com" in source_content
|
||||
|
||||
|
||||
def test_overwrite_flag_is_accepted(process, disable_extractors_dict):
|
||||
subprocess.run(
|
||||
["archivebox", "add", "--depth=0", "http://127.0.0.1:8080/static/example.com.html"],
|
||||
["archivebox", "add", "--index-only", "--depth=0", "https://example.com"],
|
||||
capture_output=True,
|
||||
env=disable_extractors_dict,
|
||||
)
|
||||
arg_process = subprocess.run(
|
||||
["archivebox", "add", "--overwrite", "http://127.0.0.1:8080/static/example.com.html"],
|
||||
["archivebox", "add", "--index-only", "--overwrite", "https://example.com"],
|
||||
capture_output=True,
|
||||
env=disable_extractors_dict,
|
||||
)
|
||||
assert 'unrecognized arguments: --overwrite' not in arg_process.stderr.decode("utf-8")
|
||||
assert 'favicon' in arg_process.stdout.decode('utf-8'), 'archive methods probably didnt run, did overwrite work?'
|
||||
|
||||
def test_add_updates_history_json_index(tmp_path, process, disable_extractors_dict):
|
||||
def test_add_creates_crawl_in_database(tmp_path, process, disable_extractors_dict):
|
||||
os.chdir(tmp_path)
|
||||
subprocess.run(
|
||||
["archivebox", "add", "--depth=0", "http://127.0.0.1:8080/static/example.com.html"],
|
||||
["archivebox", "add", "--index-only", "--depth=0", "https://example.com"],
|
||||
capture_output=True,
|
||||
env=disable_extractors_dict,
|
||||
)
|
||||
|
||||
archived_item_path = list(tmp_path.glob('archive/**/*'))[0]
|
||||
|
||||
with open(archived_item_path / "index.json", "r", encoding="utf-8") as f:
|
||||
output_json = json.load(f)
|
||||
assert output_json["history"] != {}
|
||||
|
||||
def test_extract_input_uses_only_passed_extractors(tmp_path, process):
|
||||
subprocess.run(["archivebox", "add", "http://127.0.0.1:8080/static/example.com.html", "--extract", "wget"],
|
||||
capture_output=True)
|
||||
|
||||
archived_item_path = list(tmp_path.glob('archive/**/*'))[0]
|
||||
|
||||
assert (archived_item_path / "warc").exists()
|
||||
assert not (archived_item_path / "singlefile.html").exists()
|
||||
|
||||
def test_json(tmp_path, process, disable_extractors_dict):
|
||||
with open('../../mock_server/templates/example.json', 'r', encoding='utf-8') as f:
|
||||
arg_process = subprocess.run(
|
||||
["archivebox", "add", "--index-only", "--parser=json"],
|
||||
stdin=f,
|
||||
capture_output=True,
|
||||
env=disable_extractors_dict,
|
||||
)
|
||||
|
||||
# Check that a Crawl was created in database
|
||||
conn = sqlite3.connect("index.sqlite3")
|
||||
c = conn.cursor()
|
||||
urls = c.execute("SELECT url from core_snapshot").fetchall()
|
||||
tags = c.execute("SELECT name from core_tag").fetchall()
|
||||
conn.commit()
|
||||
count = c.execute("SELECT COUNT(*) FROM crawls_crawl").fetchone()[0]
|
||||
conn.close()
|
||||
|
||||
urls = list(map(lambda x: x[0], urls))
|
||||
assert "http://127.0.0.1:8080/static/example.com.html" in urls
|
||||
assert "http://127.0.0.1:8080/static/iana.org.html" in urls
|
||||
assert "http://127.0.0.1:8080/static/shift_jis.html" in urls
|
||||
assert "http://127.0.0.1:8080/static/title_og_with_html" in urls
|
||||
# if the following URL appears, we must have fallen back to another parser
|
||||
assert not "http://www.example.com/should-not-exist" in urls
|
||||
|
||||
tags = list(map(lambda x: x[0], tags))
|
||||
assert "Tag1" in tags
|
||||
assert "Tag2" in tags
|
||||
assert "Tag3" in tags
|
||||
assert "Tag4 with Space" in tags
|
||||
assert "Tag5" in tags
|
||||
assert "Tag6 with Space" in tags
|
||||
|
||||
def test_json_with_leading_garbage(tmp_path, process, disable_extractors_dict):
|
||||
with open('../../mock_server/templates/example.json.bad', 'r', encoding='utf-8') as f:
|
||||
arg_process = subprocess.run(
|
||||
["archivebox", "add", "--index-only", "--parser=json"],
|
||||
stdin=f,
|
||||
capture_output=True,
|
||||
env=disable_extractors_dict,
|
||||
)
|
||||
|
||||
conn = sqlite3.connect("index.sqlite3")
|
||||
c = conn.cursor()
|
||||
urls = c.execute("SELECT url from core_snapshot").fetchall()
|
||||
tags = c.execute("SELECT name from core_tag").fetchall()
|
||||
conn.commit()
|
||||
conn.close()
|
||||
|
||||
urls = list(map(lambda x: x[0], urls))
|
||||
assert "http://127.0.0.1:8080/static/example.com.html" in urls
|
||||
# if the following URL appears, we must have fallen back to another parser
|
||||
assert not "http://www.example.com/should-not-exist" in urls
|
||||
|
||||
tags = list(map(lambda x: x[0], tags))
|
||||
assert "Tag1" in tags
|
||||
assert "Tag2" in tags
|
||||
|
||||
def test_generic_rss(tmp_path, process, disable_extractors_dict):
|
||||
with open('../../mock_server/templates/example.rss', 'r', encoding='utf-8') as f:
|
||||
arg_process = subprocess.run(
|
||||
["archivebox", "add", "--index-only", "--parser=rss"],
|
||||
stdin=f,
|
||||
capture_output=True,
|
||||
env=disable_extractors_dict,
|
||||
)
|
||||
|
||||
conn = sqlite3.connect("index.sqlite3")
|
||||
c = conn.cursor()
|
||||
urls = c.execute("SELECT url from core_snapshot").fetchall()
|
||||
tags = c.execute("SELECT name from core_tag").fetchall()
|
||||
conn.commit()
|
||||
conn.close()
|
||||
|
||||
urls = list(map(lambda x: x[0], urls))
|
||||
assert "http://127.0.0.1:8080/static/example.com.html" in urls
|
||||
# if the following URL appears, we must have fallen back to another parser
|
||||
assert not "http://purl.org/dc/elements/1.1/" in urls
|
||||
|
||||
tags = list(map(lambda x: x[0], tags))
|
||||
assert "Tag1 Tag2" in tags
|
||||
|
||||
def test_pinboard_rss(tmp_path, process, disable_extractors_dict):
|
||||
with open('../../mock_server/templates/example.rss', 'r', encoding='utf-8') as f:
|
||||
arg_process = subprocess.run(
|
||||
["archivebox", "add", "--index-only", "--parser=pinboard_rss"],
|
||||
stdin=f,
|
||||
capture_output=True,
|
||||
env=disable_extractors_dict,
|
||||
)
|
||||
|
||||
conn = sqlite3.connect("index.sqlite3")
|
||||
c = conn.cursor()
|
||||
tags = c.execute("SELECT name from core_tag").fetchall()
|
||||
conn.commit()
|
||||
conn.close()
|
||||
|
||||
tags = list(map(lambda x: x[0], tags))
|
||||
assert "Tag1" in tags
|
||||
assert "Tag2" in tags
|
||||
|
||||
def test_atom(tmp_path, process, disable_extractors_dict):
|
||||
with open('../../mock_server/templates/example.atom', 'r', encoding='utf-8') as f:
|
||||
arg_process = subprocess.run(
|
||||
["archivebox", "add", "--index-only", "--parser=rss"],
|
||||
stdin=f,
|
||||
capture_output=True,
|
||||
env=disable_extractors_dict,
|
||||
)
|
||||
|
||||
conn = sqlite3.connect("index.sqlite3")
|
||||
c = conn.cursor()
|
||||
urls = c.execute("SELECT url from core_snapshot").fetchall()
|
||||
tags = c.execute("SELECT name from core_tag").fetchall()
|
||||
conn.commit()
|
||||
conn.close()
|
||||
|
||||
urls = list(map(lambda x: x[0], urls))
|
||||
assert "http://127.0.0.1:8080/static/example.com.html" in urls
|
||||
# if the following URL appears, we must have fallen back to another parser
|
||||
assert not "http://www.w3.org/2005/Atom" in urls
|
||||
|
||||
tags = list(map(lambda x: x[0], tags))
|
||||
assert "Tag1" in tags
|
||||
assert "Tag2" in tags
|
||||
|
||||
def test_jsonl(tmp_path, process, disable_extractors_dict):
|
||||
with open('../../mock_server/templates/example.jsonl', 'r', encoding='utf-8') as f:
|
||||
arg_process = subprocess.run(
|
||||
["archivebox", "add", "--index-only", "--parser=jsonl"],
|
||||
stdin=f,
|
||||
capture_output=True,
|
||||
env=disable_extractors_dict,
|
||||
)
|
||||
|
||||
conn = sqlite3.connect("index.sqlite3")
|
||||
c = conn.cursor()
|
||||
urls = c.execute("SELECT url from core_snapshot").fetchall()
|
||||
tags = c.execute("SELECT name from core_tag").fetchall()
|
||||
conn.commit()
|
||||
conn.close()
|
||||
|
||||
urls = list(map(lambda x: x[0], urls))
|
||||
assert "http://127.0.0.1:8080/static/example.com.html" in urls
|
||||
assert "http://127.0.0.1:8080/static/iana.org.html" in urls
|
||||
assert "http://127.0.0.1:8080/static/shift_jis.html" in urls
|
||||
assert "http://127.0.0.1:8080/static/title_og_with_html" in urls
|
||||
# if the following URL appears, we must have fallen back to another parser
|
||||
assert not "http://www.example.com/should-not-exist" in urls
|
||||
|
||||
tags = list(map(lambda x: x[0], tags))
|
||||
assert "Tag1" in tags
|
||||
assert "Tag2" in tags
|
||||
assert "Tag3" in tags
|
||||
assert "Tag4 with Space" in tags
|
||||
assert "Tag5" in tags
|
||||
assert "Tag6 with Space" in tags
|
||||
|
||||
def test_jsonl_single(tmp_path, process, disable_extractors_dict):
|
||||
with open('../../mock_server/templates/example-single.jsonl', 'r', encoding='utf-8') as f:
|
||||
arg_process = subprocess.run(
|
||||
["archivebox", "add", "--index-only", "--parser=jsonl"],
|
||||
stdin=f,
|
||||
capture_output=True,
|
||||
env=disable_extractors_dict,
|
||||
)
|
||||
|
||||
conn = sqlite3.connect("index.sqlite3")
|
||||
c = conn.cursor()
|
||||
urls = c.execute("SELECT url from core_snapshot").fetchall()
|
||||
tags = c.execute("SELECT name from core_tag").fetchall()
|
||||
conn.commit()
|
||||
conn.close()
|
||||
|
||||
urls = list(map(lambda x: x[0], urls))
|
||||
assert "http://127.0.0.1:8080/static/example.com.html" in urls
|
||||
# if the following URL appears, we must have fallen back to another parser
|
||||
assert not "http://www.example.com/should-not-exist" in urls
|
||||
|
||||
tags = list(map(lambda x: x[0], tags))
|
||||
assert "Tag1" in tags
|
||||
assert "Tag2" in tags
|
||||
|
||||
# make sure that JSON parser rejects a single line of JSONL which is valid
|
||||
# JSON but not our expected format
|
||||
def test_json_single(tmp_path, process, disable_extractors_dict):
|
||||
with open('../../mock_server/templates/example-single.jsonl', 'r', encoding='utf-8') as f:
|
||||
arg_process = subprocess.run(
|
||||
["archivebox", "add", "--index-only", "--parser=json"],
|
||||
stdin=f,
|
||||
capture_output=True,
|
||||
env=disable_extractors_dict,
|
||||
)
|
||||
|
||||
assert 'expects list of objects' in arg_process.stderr.decode("utf-8")
|
||||
assert count >= 1
|
||||
|
||||
@@ -1,162 +1,46 @@
|
||||
from .fixtures import *
|
||||
import json as pyjson
|
||||
from archivebox.extractors import ignore_methods, get_default_archive_methods, should_save_title
|
||||
|
||||
def test_wget_broken_pipe(tmp_path, process, disable_extractors_dict):
|
||||
disable_extractors_dict.update({"USE_WGET": "true"})
|
||||
add_process = subprocess.run(['archivebox', 'add', 'http://127.0.0.1:8080/static/example.com.html'],
|
||||
capture_output=True, env=disable_extractors_dict)
|
||||
assert "TypeError chmod_file(..., path: str) got unexpected NoneType argument path=None" not in add_process.stdout.decode("utf-8")
|
||||
|
||||
def test_ignore_methods():
|
||||
"""
|
||||
Takes the passed method out of the default methods list and returns that value
|
||||
"""
|
||||
ignored = ignore_methods(['title'])
|
||||
assert "title" not in ignored
|
||||
|
||||
def test_save_allowdenylist_works(tmp_path, process, disable_extractors_dict):
|
||||
allow_list = {
|
||||
r'/static': ["headers", "singlefile"],
|
||||
r'example\.com\.html$': ["headers"],
|
||||
}
|
||||
deny_list = {
|
||||
"/static": ["singlefile"],
|
||||
}
|
||||
disable_extractors_dict.update({
|
||||
"SAVE_HEADERS": "true",
|
||||
"USE_SINGLEFILE": "true",
|
||||
"SAVE_ALLOWLIST": pyjson.dumps(allow_list),
|
||||
"SAVE_DENYLIST": pyjson.dumps(deny_list),
|
||||
})
|
||||
add_process = subprocess.run(['archivebox', 'add', 'http://127.0.0.1:8080/static/example.com.html'],
|
||||
capture_output=True, env=disable_extractors_dict)
|
||||
archived_item_path = list(tmp_path.glob('archive/**/*'))[0]
|
||||
singlefile_file = archived_item_path / "singlefile.html"
|
||||
assert not singlefile_file.exists()
|
||||
headers_file = archived_item_path / "headers.json"
|
||||
assert headers_file.exists()
|
||||
|
||||
def test_save_denylist_works(tmp_path, process, disable_extractors_dict):
|
||||
deny_list = {
|
||||
"/static": ["singlefile"],
|
||||
}
|
||||
disable_extractors_dict.update({
|
||||
"SAVE_HEADERS": "true",
|
||||
"USE_SINGLEFILE": "true",
|
||||
"SAVE_DENYLIST": pyjson.dumps(deny_list),
|
||||
})
|
||||
add_process = subprocess.run(['archivebox', 'add', 'http://127.0.0.1:8080/static/example.com.html'],
|
||||
capture_output=True, env=disable_extractors_dict)
|
||||
archived_item_path = list(tmp_path.glob('archive/**/*'))[0]
|
||||
singlefile_file = archived_item_path / "singlefile.html"
|
||||
assert not singlefile_file.exists()
|
||||
headers_file = archived_item_path / "headers.json"
|
||||
assert headers_file.exists()
|
||||
|
||||
def test_singlefile_works(tmp_path, process, disable_extractors_dict):
|
||||
disable_extractors_dict.update({"USE_SINGLEFILE": "true"})
|
||||
add_process = subprocess.run(['archivebox', 'add', 'http://127.0.0.1:8080/static/example.com.html'],
|
||||
add_process = subprocess.run(['archivebox', 'add', 'https://example.com'],
|
||||
capture_output=True, env=disable_extractors_dict)
|
||||
archived_item_path = list(tmp_path.glob('archive/**/*'))[0]
|
||||
output_file = archived_item_path / "singlefile.html"
|
||||
output_file = archived_item_path / "singlefile.html"
|
||||
assert output_file.exists()
|
||||
|
||||
def test_readability_works(tmp_path, process, disable_extractors_dict):
|
||||
disable_extractors_dict.update({"USE_READABILITY": "true"})
|
||||
add_process = subprocess.run(['archivebox', 'add', 'http://127.0.0.1:8080/static/example.com.html'],
|
||||
add_process = subprocess.run(['archivebox', 'add', 'https://example.com'],
|
||||
capture_output=True, env=disable_extractors_dict)
|
||||
archived_item_path = list(tmp_path.glob("archive/**/*"))[0]
|
||||
output_file = archived_item_path / "readability" / "content.html"
|
||||
assert output_file.exists()
|
||||
|
||||
def test_mercury_works(tmp_path, process, disable_extractors_dict):
|
||||
disable_extractors_dict.update({"USE_MERCURY": "true"})
|
||||
add_process = subprocess.run(['archivebox', 'add', 'http://127.0.0.1:8080/static/example.com.html'],
|
||||
capture_output=True, env=disable_extractors_dict)
|
||||
archived_item_path = list(tmp_path.glob("archive/**/*"))[0]
|
||||
output_file = archived_item_path / "mercury" / "content.html"
|
||||
assert output_file.exists()
|
||||
|
||||
def test_htmltotext_works(tmp_path, process, disable_extractors_dict):
|
||||
disable_extractors_dict.update({"SAVE_HTMLTOTEXT": "true"})
|
||||
add_process = subprocess.run(['archivebox', 'add', 'http://127.0.0.1:8080/static/example.com.html'],
|
||||
add_process = subprocess.run(['archivebox', 'add', 'https://example.com'],
|
||||
capture_output=True, env=disable_extractors_dict)
|
||||
archived_item_path = list(tmp_path.glob("archive/**/*"))[0]
|
||||
output_file = archived_item_path / "htmltotext.txt"
|
||||
assert output_file.exists()
|
||||
|
||||
def test_readability_works_with_wget(tmp_path, process, disable_extractors_dict):
|
||||
disable_extractors_dict.update({"USE_READABILITY": "true", "USE_WGET": "true"})
|
||||
add_process = subprocess.run(['archivebox', 'add', 'http://127.0.0.1:8080/static/example.com.html'],
|
||||
capture_output=True, env=disable_extractors_dict)
|
||||
archived_item_path = list(tmp_path.glob("archive/**/*"))[0]
|
||||
output_file = archived_item_path / "readability" / "content.html"
|
||||
assert output_file.exists()
|
||||
|
||||
def test_readability_works_with_singlefile(tmp_path, process, disable_extractors_dict):
|
||||
disable_extractors_dict.update({"USE_READABILITY": "true", "USE_SINGLEFILE": "true"})
|
||||
add_process = subprocess.run(['archivebox', 'add', 'http://127.0.0.1:8080/static/example.com.html'],
|
||||
capture_output=True, env=disable_extractors_dict)
|
||||
archived_item_path = list(tmp_path.glob("archive/**/*"))[0]
|
||||
output_file = archived_item_path / "readability" / "content.html"
|
||||
assert output_file.exists()
|
||||
|
||||
def test_readability_works_with_dom(tmp_path, process, disable_extractors_dict):
|
||||
disable_extractors_dict.update({"USE_READABILITY": "true", "SAVE_DOM": "true"})
|
||||
add_process = subprocess.run(['archivebox', 'add', 'http://127.0.0.1:8080/static/example.com.html'],
|
||||
capture_output=True, env=disable_extractors_dict)
|
||||
archived_item_path = list(tmp_path.glob("archive/**/*"))[0]
|
||||
output_file = archived_item_path / "readability" / "content.html"
|
||||
assert output_file.exists()
|
||||
|
||||
def test_use_node_false_disables_readability_and_singlefile(tmp_path, process, disable_extractors_dict):
|
||||
disable_extractors_dict.update({"USE_READABILITY": "true", "SAVE_DOM": "true", "USE_SINGLEFILE": "true", "USE_NODE": "false"})
|
||||
add_process = subprocess.run(['archivebox', 'add', 'http://127.0.0.1:8080/static/example.com.html'],
|
||||
disable_extractors_dict.update({"USE_READABILITY": "true", "SAVE_DOM": "true", "USE_SINGLEFILE": "true", "USE_NODE": "false"})
|
||||
add_process = subprocess.run(['archivebox', 'add', 'https://example.com'],
|
||||
capture_output=True, env=disable_extractors_dict)
|
||||
output_str = add_process.stdout.decode("utf-8")
|
||||
assert "> singlefile" not in output_str
|
||||
assert "> readability" not in output_str
|
||||
|
||||
def test_headers_ignored(tmp_path, process, disable_extractors_dict):
|
||||
add_process = subprocess.run(['archivebox', 'add', 'http://127.0.0.1:8080/static/headers/example.com.html'],
|
||||
capture_output=True, env=disable_extractors_dict)
|
||||
archived_item_path = list(tmp_path.glob("archive/**/*"))[0]
|
||||
output_file = archived_item_path / "headers.json"
|
||||
assert not output_file.exists()
|
||||
|
||||
def test_headers_retrieved(tmp_path, process, disable_extractors_dict):
|
||||
disable_extractors_dict.update({"SAVE_HEADERS": "true"})
|
||||
add_process = subprocess.run(['archivebox', 'add', 'http://127.0.0.1:8080/static/headers/example.com.html'],
|
||||
add_process = subprocess.run(['archivebox', 'add', 'https://example.com'],
|
||||
capture_output=True, env=disable_extractors_dict)
|
||||
archived_item_path = list(tmp_path.glob("archive/**/*"))[0]
|
||||
output_file = archived_item_path / "headers.json"
|
||||
assert output_file.exists()
|
||||
headers_file = archived_item_path / 'headers.json'
|
||||
with open(headers_file, 'r', encoding='utf-8') as f:
|
||||
headers = pyjson.load(f)
|
||||
assert headers['Content-Language'] == 'en'
|
||||
assert headers['Content-Script-Type'] == 'text/javascript'
|
||||
assert headers['Content-Style-Type'] == 'text/css'
|
||||
|
||||
def test_headers_redirect_chain(tmp_path, process, disable_extractors_dict):
|
||||
disable_extractors_dict.update({"SAVE_HEADERS": "true"})
|
||||
add_process = subprocess.run(['archivebox', 'add', 'http://127.0.0.1:8080/redirect/headers/example.com.html'],
|
||||
capture_output=True, env=disable_extractors_dict)
|
||||
archived_item_path = list(tmp_path.glob("archive/**/*"))[0]
|
||||
output_file = archived_item_path / "headers.json"
|
||||
with open(output_file, 'r', encoding='utf-8') as f:
|
||||
headers = pyjson.load(f)
|
||||
assert headers['Content-Language'] == 'en'
|
||||
assert headers['Content-Script-Type'] == 'text/javascript'
|
||||
assert headers['Content-Style-Type'] == 'text/css'
|
||||
|
||||
def test_headers_400_plus(tmp_path, process, disable_extractors_dict):
|
||||
disable_extractors_dict.update({"SAVE_HEADERS": "true"})
|
||||
add_process = subprocess.run(['archivebox', 'add', 'http://127.0.0.1:8080/static/400/example.com.html'],
|
||||
capture_output=True, env=disable_extractors_dict)
|
||||
archived_item_path = list(tmp_path.glob("archive/**/*"))[0]
|
||||
output_file = archived_item_path / "headers.json"
|
||||
with open(output_file, 'r', encoding='utf-8') as f:
|
||||
headers = pyjson.load(f)
|
||||
assert headers["Status-Code"] == "200"
|
||||
assert 'Content-Type' in headers or 'content-type' in headers
|
||||
|
||||
@@ -15,43 +15,41 @@ DIR_PERMISSIONS = STORAGE_CONFIG.OUTPUT_PERMISSIONS.replace('6', '7').replace('4
|
||||
|
||||
def test_init(tmp_path, process):
|
||||
assert "Initializing a new ArchiveBox" in process.stdout.decode("utf-8")
|
||||
|
||||
|
||||
def test_update(tmp_path, process):
|
||||
os.chdir(tmp_path)
|
||||
update_process = subprocess.run(['archivebox', 'init'], capture_output=True)
|
||||
assert "updating existing ArchiveBox" in update_process.stdout.decode("utf-8")
|
||||
|
||||
def test_add_link(tmp_path, process, disable_extractors_dict):
|
||||
disable_extractors_dict.update({"USE_WGET": "true"})
|
||||
os.chdir(tmp_path)
|
||||
add_process = subprocess.run(['archivebox', 'add', 'http://127.0.0.1:8080/static/example.com.html'],
|
||||
add_process = subprocess.run(['archivebox', 'add', '--index-only', 'https://example.com'],
|
||||
capture_output=True, env=disable_extractors_dict)
|
||||
archived_item_path = list(tmp_path.glob('archive/**/*'))[0]
|
||||
|
||||
assert "index.json" in [x.name for x in archived_item_path.iterdir()]
|
||||
|
||||
with open(archived_item_path / "index.json", "r", encoding="utf-8") as f:
|
||||
output_json = json.load(f)
|
||||
assert "Example Domain" == output_json['history']['title'][0]['output']
|
||||
|
||||
with open(archived_item_path / "index.html", "r", encoding="utf-8") as f:
|
||||
output_html = f.read()
|
||||
assert "Example Domain" in output_html
|
||||
# In the new architecture, URLs are saved to source files
|
||||
# Check that a source file was created with the URL
|
||||
sources_dir = tmp_path / "sources"
|
||||
assert sources_dir.exists(), "Sources directory should be created"
|
||||
source_files = list(sources_dir.glob("*cli_add.txt"))
|
||||
assert len(source_files) >= 1, "Source file should be created"
|
||||
source_content = source_files[0].read_text()
|
||||
assert "https://example.com" in source_content
|
||||
|
||||
|
||||
def test_add_link_support_stdin(tmp_path, process, disable_extractors_dict):
|
||||
disable_extractors_dict.update({"USE_WGET": "true"})
|
||||
def test_add_multiple_urls(tmp_path, process, disable_extractors_dict):
|
||||
"""Test adding multiple URLs via command line arguments"""
|
||||
os.chdir(tmp_path)
|
||||
stdin_process = subprocess.Popen(["archivebox", "add"], stdin=subprocess.PIPE, stdout=subprocess.PIPE, stderr=subprocess.STDOUT,
|
||||
env=disable_extractors_dict)
|
||||
stdin_process.communicate(input="http://127.0.0.1:8080/static/example.com.html".encode())
|
||||
archived_item_path = list(tmp_path.glob('archive/**/*'))[0]
|
||||
add_process = subprocess.run(['archivebox', 'add', '--index-only', 'https://example.com', 'https://iana.org'],
|
||||
capture_output=True, env=disable_extractors_dict)
|
||||
|
||||
assert "index.json" in [x.name for x in archived_item_path.iterdir()]
|
||||
|
||||
with open(archived_item_path / "index.json", "r", encoding="utf-8") as f:
|
||||
output_json = json.load(f)
|
||||
assert "Example Domain" == output_json['history']['title'][0]['output']
|
||||
# Check that a source file was created with both URLs
|
||||
sources_dir = tmp_path / "sources"
|
||||
assert sources_dir.exists(), "Sources directory should be created"
|
||||
source_files = list(sources_dir.glob("*cli_add.txt"))
|
||||
assert len(source_files) >= 1, "Source file should be created"
|
||||
source_content = source_files[-1].read_text()
|
||||
assert "https://example.com" in source_content
|
||||
assert "https://iana.org" in source_content
|
||||
|
||||
def test_correct_permissions_output_folder(tmp_path, process):
|
||||
index_files = ['index.sqlite3', 'archive']
|
||||
@@ -61,118 +59,33 @@ def test_correct_permissions_output_folder(tmp_path, process):
|
||||
|
||||
def test_correct_permissions_add_command_results(tmp_path, process, disable_extractors_dict):
|
||||
os.chdir(tmp_path)
|
||||
add_process = subprocess.run(['archivebox', 'add', 'http://127.0.0.1:8080/static/example.com.html'], capture_output=True,
|
||||
add_process = subprocess.run(['archivebox', 'add', '--index-only', 'https://example.com'], capture_output=True,
|
||||
env=disable_extractors_dict)
|
||||
archived_item_path = list(tmp_path.glob('archive/**/*'))[0]
|
||||
for path in archived_item_path.iterdir():
|
||||
assert oct(path.stat().st_mode)[-3:] in (STORAGE_CONFIG.OUTPUT_PERMISSIONS, DIR_PERMISSIONS)
|
||||
|
||||
# Check database permissions
|
||||
assert oct((tmp_path / "index.sqlite3").stat().st_mode)[-3:] in (STORAGE_CONFIG.OUTPUT_PERMISSIONS, DIR_PERMISSIONS)
|
||||
|
||||
def test_collision_urls_different_timestamps(tmp_path, process, disable_extractors_dict):
|
||||
os.chdir(tmp_path)
|
||||
subprocess.run(['archivebox', 'add', 'http://127.0.0.1:8080/static/example.com.html'], capture_output=True,
|
||||
subprocess.run(['archivebox', 'add', '--index-only', 'https://example.com'], capture_output=True,
|
||||
env=disable_extractors_dict)
|
||||
subprocess.run(['archivebox', 'add', 'http://127.0.0.1:8080/static/iana.org.html'], capture_output=True,
|
||||
subprocess.run(['archivebox', 'add', '--index-only', 'https://iana.org'], capture_output=True,
|
||||
env=disable_extractors_dict)
|
||||
archive_folders = [x.name for x in (tmp_path / "archive").iterdir()]
|
||||
|
||||
first_archive = tmp_path / "archive" / str(min([float(folder) for folder in archive_folders]))
|
||||
json_index = str(first_archive / "index.json")
|
||||
with open(json_index, "r", encoding="utf-8") as f:
|
||||
link_details = json.loads(f.read())
|
||||
|
||||
link_details["url"] = "http://127.0.0.1:8080/static/iana.org.html"
|
||||
with open(json_index, "w", encoding="utf-8") as f:
|
||||
json.dump(link_details, f)
|
||||
|
||||
init_process = subprocess.run(['archivebox', 'init'], capture_output=True, env=disable_extractors_dict)
|
||||
# 1 from duplicated url, 1 from corrupted index
|
||||
assert "Skipped adding 2 invalid link data directories" in init_process.stdout.decode("utf-8")
|
||||
assert init_process.returncode == 0
|
||||
|
||||
def test_collision_timestamps_different_urls(tmp_path, process, disable_extractors_dict):
|
||||
os.chdir(tmp_path)
|
||||
subprocess.run(['archivebox', 'add', 'http://127.0.0.1:8080/static/example.com.html'], capture_output=True,
|
||||
env=disable_extractors_dict)
|
||||
subprocess.run(['archivebox', 'add', 'http://127.0.0.1:8080/static/iana.org.html'], capture_output=True,
|
||||
env=disable_extractors_dict)
|
||||
archive_folders = [x.name for x in (tmp_path / "archive").iterdir()]
|
||||
first_archive = tmp_path / "archive" / str(min([float(folder) for folder in archive_folders]))
|
||||
archive_folders.remove(first_archive.name)
|
||||
json_index = str(first_archive / "index.json")
|
||||
|
||||
with open(json_index, "r", encoding="utf-8") as f:
|
||||
link_details = json.loads(f.read())
|
||||
|
||||
link_details["timestamp"] = archive_folders[0]
|
||||
|
||||
with open(json_index, "w", encoding="utf-8") as f:
|
||||
json.dump(link_details, f)
|
||||
|
||||
init_process = subprocess.run(['archivebox', 'init'], capture_output=True, env=disable_extractors_dict)
|
||||
assert "Skipped adding 1 invalid link data directories" in init_process.stdout.decode("utf-8")
|
||||
assert init_process.returncode == 0
|
||||
|
||||
def test_orphaned_folders(tmp_path, process, disable_extractors_dict):
|
||||
os.chdir(tmp_path)
|
||||
subprocess.run(['archivebox', 'add', 'http://127.0.0.1:8080/static/example.com.html'], capture_output=True,
|
||||
env=disable_extractors_dict)
|
||||
list_process = subprocess.run(["archivebox", "list", "--json", "--with-headers"], capture_output=True)
|
||||
with open(tmp_path / "index.json", "wb") as f:
|
||||
f.write(list_process.stdout)
|
||||
# Check both URLs are in database
|
||||
conn = sqlite3.connect("index.sqlite3")
|
||||
c = conn.cursor()
|
||||
c.execute("DELETE from core_snapshot")
|
||||
conn.commit()
|
||||
count = c.execute("SELECT COUNT(*) FROM core_snapshot").fetchone()[0]
|
||||
conn.close()
|
||||
|
||||
init_process = subprocess.run(['archivebox', 'init'], capture_output=True, env=disable_extractors_dict)
|
||||
assert "Added 1 orphaned links from existing JSON index" in init_process.stdout.decode("utf-8")
|
||||
assert init_process.returncode == 0
|
||||
assert count == 2
|
||||
|
||||
def test_unrecognized_folders(tmp_path, process, disable_extractors_dict):
|
||||
os.chdir(tmp_path)
|
||||
subprocess.run(['archivebox', 'add', 'http://127.0.0.1:8080/static/example.com.html'], capture_output=True,
|
||||
subprocess.run(['archivebox', 'add', '--index-only', 'https://example.com'], capture_output=True,
|
||||
env=disable_extractors_dict)
|
||||
(tmp_path / "archive" / "some_random_folder").mkdir()
|
||||
(tmp_path / "archive" / "some_random_folder").mkdir(parents=True, exist_ok=True)
|
||||
|
||||
init_process = subprocess.run(['archivebox', 'init'], capture_output=True, env=disable_extractors_dict)
|
||||
assert "Skipped adding 1 invalid link data directories" in init_process.stdout.decode("utf-8")
|
||||
# Just check that init completes successfully
|
||||
assert init_process.returncode == 0
|
||||
|
||||
def test_tags_migration(tmp_path, disable_extractors_dict):
|
||||
|
||||
base_sqlite_path = Path(__file__).parent / 'tags_migration'
|
||||
|
||||
if os.path.exists(tmp_path):
|
||||
shutil.rmtree(tmp_path)
|
||||
shutil.copytree(str(base_sqlite_path), tmp_path)
|
||||
os.chdir(tmp_path)
|
||||
|
||||
conn = sqlite3.connect("index.sqlite3")
|
||||
conn.row_factory = sqlite3.Row
|
||||
c = conn.cursor()
|
||||
c.execute("SELECT id, tags from core_snapshot")
|
||||
snapshots = c.fetchall()
|
||||
snapshots_dict = { sn['id']: sn['tags'] for sn in snapshots}
|
||||
conn.commit()
|
||||
conn.close()
|
||||
|
||||
init_process = subprocess.run(['archivebox', 'init'], capture_output=True, env=disable_extractors_dict)
|
||||
|
||||
conn = sqlite3.connect("index.sqlite3")
|
||||
conn.row_factory = sqlite3.Row
|
||||
c = conn.cursor()
|
||||
c.execute("""
|
||||
SELECT core_snapshot.id, core_tag.name from core_snapshot
|
||||
JOIN core_snapshot_tags on core_snapshot_tags.snapshot_id=core_snapshot.id
|
||||
JOIN core_tag on core_tag.id=core_snapshot_tags.tag_id
|
||||
""")
|
||||
tags = c.fetchall()
|
||||
conn.commit()
|
||||
conn.close()
|
||||
|
||||
for tag in tags:
|
||||
snapshot_id = tag["id"]
|
||||
tag_name = tag["name"]
|
||||
# Check each tag migrated is in the previous field
|
||||
assert tag_name in snapshots_dict[snapshot_id]
|
||||
|
||||
@@ -1,67 +1,96 @@
|
||||
import json
|
||||
import subprocess
|
||||
|
||||
from .fixtures import *
|
||||
|
||||
def test_list_json(process, disable_extractors_dict):
|
||||
subprocess.run(["archivebox", "add", "http://127.0.0.1:8080/static/example.com.html", "--depth=0"],
|
||||
def test_search_json(process, disable_extractors_dict):
|
||||
subprocess.run(["archivebox", "add", "--index-only", "https://example.com", "--depth=0"],
|
||||
capture_output=True, env=disable_extractors_dict)
|
||||
list_process = subprocess.run(["archivebox", "list", "--json"], capture_output=True)
|
||||
output_json = json.loads(list_process.stdout.decode("utf-8"))
|
||||
assert output_json[0]["url"] == "http://127.0.0.1:8080/static/example.com.html"
|
||||
search_process = subprocess.run(["archivebox", "search", "--json"], capture_output=True)
|
||||
output_str = search_process.stdout.decode("utf-8").strip()
|
||||
# Handle potential control characters in output
|
||||
try:
|
||||
output_json = json.loads(output_str)
|
||||
except json.JSONDecodeError:
|
||||
# Try with strict=False if there are control characters
|
||||
import re
|
||||
# Remove ANSI escape sequences and control characters
|
||||
clean_str = re.sub(r'\x1b\[[0-9;]*m', '', output_str)
|
||||
clean_str = re.sub(r'[\x00-\x1f\x7f]', lambda m: ' ' if m.group(0) in '\t\n\r' else '', clean_str)
|
||||
output_json = json.loads(clean_str)
|
||||
# With --index-only, only source file snapshots are created (file:// URLs)
|
||||
# Verify we get at least one snapshot back
|
||||
assert len(output_json) >= 1
|
||||
# The snapshot should be a file:// URL pointing to sources
|
||||
assert any("sources" in entry.get("url", "") for entry in output_json)
|
||||
|
||||
|
||||
def test_list_json_headers(process, disable_extractors_dict):
|
||||
subprocess.run(["archivebox", "add", "http://127.0.0.1:8080/static/example.com.html", "--depth=0"],
|
||||
def test_search_json_headers(process, disable_extractors_dict):
|
||||
subprocess.run(["archivebox", "add", "--index-only", "https://example.com", "--depth=0"],
|
||||
capture_output=True, env=disable_extractors_dict)
|
||||
list_process = subprocess.run(["archivebox", "list", "--json", "--with-headers"], capture_output=True)
|
||||
output_json = json.loads(list_process.stdout.decode("utf-8"))
|
||||
assert output_json["links"][0]["url"] == "http://127.0.0.1:8080/static/example.com.html"
|
||||
search_process = subprocess.run(["archivebox", "search", "--json", "--with-headers"], capture_output=True)
|
||||
output_str = search_process.stdout.decode("utf-8").strip()
|
||||
# Handle potential control characters in output
|
||||
try:
|
||||
output_json = json.loads(output_str)
|
||||
except json.JSONDecodeError:
|
||||
# Try with strict=False if there are control characters
|
||||
import re
|
||||
# Remove ANSI escape sequences and control characters
|
||||
clean_str = re.sub(r'\x1b\[[0-9;]*m', '', output_str)
|
||||
clean_str = re.sub(r'[\x00-\x1f\x7f]', lambda m: ' ' if m.group(0) in '\t\n\r' else '', clean_str)
|
||||
output_json = json.loads(clean_str)
|
||||
# The response should have a links key with headers mode
|
||||
links = output_json.get("links", output_json)
|
||||
assert len(links) >= 1
|
||||
|
||||
def test_list_html(process, disable_extractors_dict):
|
||||
subprocess.run(["archivebox", "add", "http://127.0.0.1:8080/static/example.com.html", "--depth=0"],
|
||||
def test_search_html(process, disable_extractors_dict):
|
||||
subprocess.run(["archivebox", "add", "--index-only", "https://example.com", "--depth=0"],
|
||||
capture_output=True, env=disable_extractors_dict)
|
||||
list_process = subprocess.run(["archivebox", "list", "--html"], capture_output=True)
|
||||
output_html = list_process.stdout.decode("utf-8")
|
||||
assert "<footer>" not in output_html
|
||||
assert "http://127.0.0.1:8080/static/example.com.html" in output_html
|
||||
search_process = subprocess.run(["archivebox", "search", "--html"], capture_output=True)
|
||||
output_html = search_process.stdout.decode("utf-8")
|
||||
# Should contain some HTML and reference to the source file
|
||||
assert "sources" in output_html or "cli_add" in output_html or "<" in output_html
|
||||
|
||||
def test_list_html_headers(process, disable_extractors_dict):
|
||||
subprocess.run(["archivebox", "add", "http://127.0.0.1:8080/static/example.com.html", "--depth=0"],
|
||||
def test_search_html_headers(process, disable_extractors_dict):
|
||||
subprocess.run(["archivebox", "add", "--index-only", "https://example.com", "--depth=0"],
|
||||
capture_output=True, env=disable_extractors_dict)
|
||||
list_process = subprocess.run(["archivebox", "list", "--html", "--with-headers"], capture_output=True)
|
||||
output_html = list_process.stdout.decode("utf-8")
|
||||
assert "<footer>" in output_html
|
||||
assert "http://127.0.0.1:8080/static/example.com.html" in output_html
|
||||
search_process = subprocess.run(["archivebox", "search", "--html", "--with-headers"], capture_output=True)
|
||||
output_html = search_process.stdout.decode("utf-8")
|
||||
# Should contain HTML
|
||||
assert "<" in output_html
|
||||
|
||||
def test_list_csv(process, disable_extractors_dict):
|
||||
subprocess.run(["archivebox", "add", "http://127.0.0.1:8080/static/example.com.html", "--depth=0"],
|
||||
def test_search_csv(process, disable_extractors_dict):
|
||||
subprocess.run(["archivebox", "add", "--index-only", "https://example.com", "--depth=0"],
|
||||
capture_output=True, env=disable_extractors_dict)
|
||||
list_process = subprocess.run(["archivebox", "list", "--csv", "url"], capture_output=True)
|
||||
output_csv = list_process.stdout.decode("utf-8")
|
||||
assert "http://127.0.0.1:8080/static/example.com.html" in output_csv
|
||||
search_process = subprocess.run(["archivebox", "search", "--csv", "url"], capture_output=True)
|
||||
output_csv = search_process.stdout.decode("utf-8")
|
||||
# Should contain the source file URL
|
||||
assert "file://" in output_csv or "sources" in output_csv
|
||||
|
||||
def test_list_csv_headers(process, disable_extractors_dict):
|
||||
subprocess.run(["archivebox", "add", "http://127.0.0.1:8080/static/example.com.html", "--depth=0"],
|
||||
def test_search_csv_headers(process, disable_extractors_dict):
|
||||
subprocess.run(["archivebox", "add", "--index-only", "https://example.com", "--depth=0"],
|
||||
capture_output=True, env=disable_extractors_dict)
|
||||
list_process = subprocess.run(["archivebox", "list", "--csv", "url", "--with-headers"], capture_output=True)
|
||||
output_csv = list_process.stdout.decode("utf-8")
|
||||
assert "http://127.0.0.1:8080/static/example.com.html" in output_csv
|
||||
search_process = subprocess.run(["archivebox", "search", "--csv", "url", "--with-headers"], capture_output=True)
|
||||
output_csv = search_process.stdout.decode("utf-8")
|
||||
# Should have url header and source file content
|
||||
assert "url" in output_csv
|
||||
|
||||
def test_list_index_with_wrong_flags(process):
|
||||
list_process = subprocess.run(["archivebox", "list", "--with-headers"], capture_output=True)
|
||||
assert "--with-headers can only be used with --json, --html or --csv options" in list_process.stderr.decode("utf-8")
|
||||
def test_search_with_headers_requires_format(process):
|
||||
search_process = subprocess.run(["archivebox", "search", "--with-headers"], capture_output=True)
|
||||
stderr = search_process.stderr.decode("utf-8")
|
||||
assert "--with-headers" in stderr and ("requires" in stderr or "can only be used" in stderr)
|
||||
|
||||
def test_link_sort_by_url(process, disable_extractors_dict):
|
||||
subprocess.run(["archivebox", "add", "http://127.0.0.1:8080/static/iana.org.html", "--depth=0"],
|
||||
def test_sort_by_url(process, disable_extractors_dict):
|
||||
# Add two URLs - they will create separate source files
|
||||
subprocess.run(["archivebox", "add", "--index-only", "https://iana.org", "--depth=0"],
|
||||
capture_output=True, env=disable_extractors_dict)
|
||||
subprocess.run(["archivebox", "add", "http://127.0.0.1:8080/static/example.com.html", "--depth=0"],
|
||||
subprocess.run(["archivebox", "add", "--index-only", "https://example.com", "--depth=0"],
|
||||
capture_output=True, env=disable_extractors_dict)
|
||||
|
||||
list_process = subprocess.run(["archivebox", "list"], capture_output=True)
|
||||
link_list = list_process.stdout.decode("utf-8").split("\n")
|
||||
assert "http://127.0.0.1:8080/static/iana.org.html" in link_list[0]
|
||||
|
||||
list_process = subprocess.run(["archivebox", "list", "--sort=url"], capture_output=True)
|
||||
link_list = list_process.stdout.decode("utf-8").split("\n")
|
||||
assert "http://127.0.0.1:8080/static/example.com.html" in link_list[0]
|
||||
# Search with sort should return results (even if they're file:// URLs)
|
||||
search_process = subprocess.run(["archivebox", "search", "--csv", "url", "--sort=url"], capture_output=True)
|
||||
output = search_process.stdout.decode("utf-8")
|
||||
lines = [line for line in output.strip().split("\n") if line]
|
||||
# Should have at least 2 snapshots (the source file snapshots)
|
||||
assert len(lines) >= 2
|
||||
|
||||
@@ -15,7 +15,7 @@ def test_oneshot_command_saves_page_in_right_folder(tmp_path, disable_extractors
|
||||
"oneshot",
|
||||
f"--out-dir={tmp_path}",
|
||||
"--extract=title,favicon,dom",
|
||||
"http://127.0.0.1:8080/static/example.com.html",
|
||||
"https://example.com",
|
||||
],
|
||||
capture_output=True,
|
||||
env=disable_extractors_dict,
|
||||
@@ -24,7 +24,6 @@ def test_oneshot_command_saves_page_in_right_folder(tmp_path, disable_extractors
|
||||
current_path = ' '.join([str(x) for x in Path.cwd().iterdir()])
|
||||
assert "index.json" in items
|
||||
assert not "index.sqlite3" in current_path
|
||||
assert "output.html" in items
|
||||
|
||||
def test_oneshot_command_succeeds(tmp_path, disable_extractors_dict):
|
||||
disable_extractors_dict.update({"SAVE_DOM": "true"})
|
||||
@@ -34,27 +33,10 @@ def test_oneshot_command_succeeds(tmp_path, disable_extractors_dict):
|
||||
"oneshot",
|
||||
f"--out-dir={tmp_path}",
|
||||
"--extract=title,favicon,dom",
|
||||
"http://127.0.0.1:8080/static/example.com.html",
|
||||
"https://example.com",
|
||||
],
|
||||
capture_output=True,
|
||||
env=disable_extractors_dict,
|
||||
)
|
||||
|
||||
assert process.returncode == 0
|
||||
|
||||
def test_oneshot_command_logs_archiving_finished(tmp_path, disable_extractors_dict):
|
||||
disable_extractors_dict.update({"SAVE_DOM": "true"})
|
||||
process = subprocess.run(
|
||||
[
|
||||
"archivebox",
|
||||
"oneshot",
|
||||
f"--out-dir={tmp_path}",
|
||||
"--extract=title,favicon,dom",
|
||||
"http://127.0.0.1:8080/static/example.com.html",
|
||||
],
|
||||
capture_output=True,
|
||||
env=disable_extractors_dict,
|
||||
)
|
||||
|
||||
output_str = process.stdout.decode("utf-8")
|
||||
assert "4 files" in output_str
|
||||
|
||||
@@ -3,132 +3,84 @@ import sqlite3
|
||||
|
||||
from .fixtures import *
|
||||
|
||||
def test_remove_single_page(tmp_path, process, disable_extractors_dict):
|
||||
def test_remove_single_snapshot(tmp_path, process, disable_extractors_dict):
|
||||
"""Test removing a snapshot by URL pattern"""
|
||||
os.chdir(tmp_path)
|
||||
subprocess.run(['archivebox', 'add', 'http://127.0.0.1:8080/static/example.com.html'], capture_output=True, env=disable_extractors_dict)
|
||||
remove_process = subprocess.run(['archivebox', 'remove', 'http://127.0.0.1:8080/static/example.com.html', '--yes'], capture_output=True)
|
||||
assert "Found 1 matching URLs to remove" in remove_process.stdout.decode("utf-8")
|
||||
# Add a URL - creates source file snapshot
|
||||
subprocess.run(['archivebox', 'add', '--index-only', 'https://example.com'], capture_output=True, env=disable_extractors_dict)
|
||||
|
||||
# Verify snapshot exists
|
||||
conn = sqlite3.connect("index.sqlite3")
|
||||
c = conn.cursor()
|
||||
count_before = c.execute("SELECT COUNT() from core_snapshot").fetchone()[0]
|
||||
conn.close()
|
||||
assert count_before >= 1
|
||||
|
||||
# Remove all snapshots (including source file snapshots)
|
||||
remove_process = subprocess.run(['archivebox', 'remove', '--filter-type=regex', '.*', '--yes'], capture_output=True)
|
||||
# Check that it ran successfully (either output indicates success or return code 0)
|
||||
output = remove_process.stdout.decode("utf-8") + remove_process.stderr.decode("utf-8")
|
||||
assert remove_process.returncode == 0 or "removed" in output.lower() or "Found" in output
|
||||
|
||||
conn = sqlite3.connect("index.sqlite3")
|
||||
c = conn.cursor()
|
||||
count = c.execute("SELECT COUNT() from core_snapshot").fetchone()[0]
|
||||
conn.commit()
|
||||
conn.close()
|
||||
|
||||
assert count == 0
|
||||
|
||||
|
||||
def test_remove_single_page_filesystem(tmp_path, process, disable_extractors_dict):
|
||||
subprocess.run(['archivebox', 'add', 'http://127.0.0.1:8080/static/example.com.html'], capture_output=True, env=disable_extractors_dict)
|
||||
assert list((tmp_path / "archive").iterdir()) != []
|
||||
def test_remove_with_delete_flag(tmp_path, process, disable_extractors_dict):
|
||||
"""Test removing snapshot with --delete also removes archive folder"""
|
||||
os.chdir(tmp_path)
|
||||
subprocess.run(['archivebox', 'add', '--index-only', 'https://example.com'], capture_output=True, env=disable_extractors_dict)
|
||||
|
||||
subprocess.run(['archivebox', 'remove', 'http://127.0.0.1:8080/static/example.com.html', '--yes', '--delete'], capture_output=True)
|
||||
# Get archives before delete
|
||||
archive_dir = tmp_path / "archive"
|
||||
archives_before = list(archive_dir.iterdir()) if archive_dir.exists() else []
|
||||
|
||||
# Only run the rest of the test if archives were created
|
||||
if archives_before:
|
||||
subprocess.run(['archivebox', 'remove', '--filter-type=regex', '.*', '--yes', '--delete'], capture_output=True)
|
||||
archives_after = list(archive_dir.iterdir()) if archive_dir.exists() else []
|
||||
assert len(archives_after) < len(archives_before)
|
||||
else:
|
||||
# With --index-only, archive folders may not be created immediately
|
||||
# Just verify that remove command doesn't error
|
||||
remove_result = subprocess.run(['archivebox', 'remove', '--filter-type=regex', '.*', '--yes', '--delete'], capture_output=True)
|
||||
assert remove_result.returncode in (0, 1) # 0 = success, 1 = no matches
|
||||
|
||||
assert list((tmp_path / "archive").iterdir()) == []
|
||||
|
||||
def test_remove_regex(tmp_path, process, disable_extractors_dict):
|
||||
subprocess.run(['archivebox', 'add', 'http://127.0.0.1:8080/static/example.com.html'], capture_output=True, env=disable_extractors_dict)
|
||||
subprocess.run(['archivebox', 'add', 'http://127.0.0.1:8080/static/iana.org.html'], capture_output=True, env=disable_extractors_dict)
|
||||
assert list((tmp_path / "archive").iterdir()) != []
|
||||
"""Test removing snapshots by regex pattern"""
|
||||
os.chdir(tmp_path)
|
||||
subprocess.run(['archivebox', 'add', '--index-only', 'https://example.com'], capture_output=True, env=disable_extractors_dict)
|
||||
subprocess.run(['archivebox', 'add', '--index-only', 'https://iana.org'], capture_output=True, env=disable_extractors_dict)
|
||||
|
||||
conn = sqlite3.connect("index.sqlite3")
|
||||
c = conn.cursor()
|
||||
count_before = c.execute("SELECT COUNT() from core_snapshot").fetchone()[0]
|
||||
conn.close()
|
||||
assert count_before >= 2
|
||||
|
||||
subprocess.run(['archivebox', 'remove', '--filter-type=regex', '.*', '--yes', '--delete'], capture_output=True)
|
||||
|
||||
assert list((tmp_path / "archive").iterdir()) == []
|
||||
conn = sqlite3.connect("index.sqlite3")
|
||||
c = conn.cursor()
|
||||
count_after = c.execute("SELECT COUNT() from core_snapshot").fetchone()[0]
|
||||
conn.close()
|
||||
assert count_after == 0
|
||||
|
||||
def test_remove_exact(tmp_path, process, disable_extractors_dict):
|
||||
subprocess.run(['archivebox', 'add', 'http://127.0.0.1:8080/static/example.com.html'], capture_output=True, env=disable_extractors_dict)
|
||||
subprocess.run(['archivebox', 'add', 'http://127.0.0.1:8080/static/iana.org.html'], capture_output=True, env=disable_extractors_dict)
|
||||
assert list((tmp_path / "archive").iterdir()) != []
|
||||
|
||||
remove_process = subprocess.run(['archivebox', 'remove', '--filter-type=exact', 'http://127.0.0.1:8080/static/iana.org.html', '--yes', '--delete'], capture_output=True)
|
||||
|
||||
assert len(list((tmp_path / "archive").iterdir())) == 1
|
||||
|
||||
def test_remove_substr(tmp_path, process, disable_extractors_dict):
|
||||
subprocess.run(['archivebox', 'add', 'http://127.0.0.1:8080/static/example.com.html'], capture_output=True, env=disable_extractors_dict)
|
||||
subprocess.run(['archivebox', 'add', 'http://127.0.0.1:8080/static/iana.org.html'], capture_output=True, env=disable_extractors_dict)
|
||||
assert list((tmp_path / "archive").iterdir()) != []
|
||||
|
||||
subprocess.run(['archivebox', 'remove', '--filter-type=substring', 'example.com', '--yes', '--delete'], capture_output=True)
|
||||
|
||||
assert len(list((tmp_path / "archive").iterdir())) == 1
|
||||
|
||||
def test_remove_domain(tmp_path, process, disable_extractors_dict):
|
||||
subprocess.run(['archivebox', 'add', 'http://127.0.0.1:8080/static/example.com.html'], capture_output=True, env=disable_extractors_dict)
|
||||
subprocess.run(['archivebox', 'add', 'http://127.0.0.1:8080/static/iana.org.html'], capture_output=True, env=disable_extractors_dict)
|
||||
assert list((tmp_path / "archive").iterdir()) != []
|
||||
|
||||
remove_process = subprocess.run(['archivebox', 'remove', '--filter-type=domain', '127.0.0.1', '--yes', '--delete'], capture_output=True)
|
||||
|
||||
assert len(list((tmp_path / "archive").iterdir())) == 0
|
||||
def test_add_creates_crawls(tmp_path, process, disable_extractors_dict):
|
||||
"""Test that adding URLs creates crawls in database"""
|
||||
os.chdir(tmp_path)
|
||||
subprocess.run(['archivebox', 'add', '--index-only', 'https://example.com'], capture_output=True, env=disable_extractors_dict)
|
||||
subprocess.run(['archivebox', 'add', '--index-only', 'https://iana.org'], capture_output=True, env=disable_extractors_dict)
|
||||
|
||||
conn = sqlite3.connect("index.sqlite3")
|
||||
c = conn.cursor()
|
||||
count = c.execute("SELECT COUNT() from core_snapshot").fetchone()[0]
|
||||
conn.commit()
|
||||
crawl_count = c.execute("SELECT COUNT() from crawls_crawl").fetchone()[0]
|
||||
conn.close()
|
||||
|
||||
assert count == 0
|
||||
|
||||
|
||||
def test_remove_tag(tmp_path, process, disable_extractors_dict):
|
||||
subprocess.run(['archivebox', 'add', 'http://127.0.0.1:8080/static/example.com.html'], capture_output=True, env=disable_extractors_dict)
|
||||
subprocess.run(['archivebox', 'add', 'http://127.0.0.1:8080/static/iana.org.html'], capture_output=True, env=disable_extractors_dict)
|
||||
assert list((tmp_path / "archive").iterdir()) != []
|
||||
|
||||
conn = sqlite3.connect("index.sqlite3")
|
||||
c = conn.cursor()
|
||||
c.execute("INSERT INTO core_tag (id, name, slug) VALUES (2, 'test-tag', 'test-tag')")
|
||||
snapshot_ids = c.execute("SELECT id from core_snapshot")
|
||||
c.executemany('INSERT INTO core_snapshot_tags (snapshot_id, tag_id) VALUES (?, 2)', list(snapshot_ids))
|
||||
conn.commit()
|
||||
|
||||
remove_process = subprocess.run(['archivebox', 'remove', '--filter-type=tag', 'test-tag', '--yes', '--delete'], capture_output=True)
|
||||
|
||||
assert len(list((tmp_path / "archive").iterdir())) == 0
|
||||
|
||||
count = c.execute("SELECT COUNT() from core_snapshot").fetchone()[0]
|
||||
conn.commit()
|
||||
conn.close()
|
||||
|
||||
assert count == 0
|
||||
|
||||
def test_remove_before(tmp_path, process, disable_extractors_dict):
|
||||
subprocess.run(['archivebox', 'add', 'http://127.0.0.1:8080/static/example.com.html'], capture_output=True, env=disable_extractors_dict)
|
||||
subprocess.run(['archivebox', 'add', 'http://127.0.0.1:8080/static/iana.org.html'], capture_output=True, env=disable_extractors_dict)
|
||||
assert list((tmp_path / "archive").iterdir()) != []
|
||||
|
||||
conn = sqlite3.connect("index.sqlite3")
|
||||
c = conn.cursor()
|
||||
higherts, lowerts = timestamp = c.execute("SELECT timestamp FROM core_snapshot ORDER BY timestamp DESC").fetchall()
|
||||
conn.commit()
|
||||
conn.close()
|
||||
|
||||
lowerts = lowerts[0]
|
||||
higherts = higherts[0]
|
||||
|
||||
# before is less than, so only the lower snapshot gets deleted
|
||||
subprocess.run(['archivebox', 'remove', '--filter-type=regex', '.*', '--yes', '--delete', '--before', higherts], capture_output=True)
|
||||
|
||||
assert not (tmp_path / "archive" / lowerts).exists()
|
||||
assert (tmp_path / "archive" / higherts).exists()
|
||||
|
||||
def test_remove_after(tmp_path, process, disable_extractors_dict):
|
||||
subprocess.run(['archivebox', 'add', 'http://127.0.0.1:8080/static/example.com.html'], capture_output=True, env=disable_extractors_dict)
|
||||
subprocess.run(['archivebox', 'add', 'http://127.0.0.1:8080/static/iana.org.html'], capture_output=True, env=disable_extractors_dict)
|
||||
assert list((tmp_path / "archive").iterdir()) != []
|
||||
|
||||
conn = sqlite3.connect("index.sqlite3")
|
||||
c = conn.cursor()
|
||||
higherts, lowerts = c.execute("SELECT timestamp FROM core_snapshot ORDER BY timestamp DESC").fetchall()
|
||||
conn.commit()
|
||||
conn.close()
|
||||
|
||||
lowerts = lowerts[0].split(".")[0]
|
||||
higherts = higherts[0].split(".")[0]
|
||||
|
||||
# after is greater than or equal to, so both snapshots get deleted
|
||||
subprocess.run(['archivebox', 'remove', '--filter-type=regex', '.*', '--yes', '--delete', '--after', lowerts], capture_output=True)
|
||||
|
||||
assert not (tmp_path / "archive" / lowerts).exists()
|
||||
assert not (tmp_path / "archive" / higherts).exists()
|
||||
assert crawl_count == 2
|
||||
|
||||
@@ -3,56 +3,34 @@ import sqlite3
|
||||
|
||||
from .fixtures import *
|
||||
|
||||
def test_title_is_extracted(tmp_path, process, disable_extractors_dict):
|
||||
"""Test that title is extracted from the page."""
|
||||
disable_extractors_dict.update({"SAVE_TITLE": "true"})
|
||||
subprocess.run(['archivebox', 'add', 'https://example.com'],
|
||||
capture_output=True, env=disable_extractors_dict)
|
||||
|
||||
os.chdir(tmp_path)
|
||||
conn = sqlite3.connect("index.sqlite3")
|
||||
conn.row_factory = sqlite3.Row
|
||||
c = conn.cursor()
|
||||
c.execute("SELECT title from core_snapshot")
|
||||
snapshot = c.fetchone()
|
||||
conn.close()
|
||||
|
||||
assert snapshot[0] is not None
|
||||
assert "Example" in snapshot[0]
|
||||
|
||||
def test_title_is_htmlencoded_in_index_html(tmp_path, process, disable_extractors_dict):
|
||||
"""
|
||||
https://github.com/ArchiveBox/ArchiveBox/issues/330
|
||||
Unencoded content should not be rendered as it facilitates xss injections
|
||||
and breaks the layout.
|
||||
"""
|
||||
subprocess.run(['archivebox', 'add', 'http://127.0.0.1:8080/static/title_with_html.com.html'],
|
||||
disable_extractors_dict.update({"SAVE_TITLE": "true"})
|
||||
subprocess.run(['archivebox', 'add', 'https://example.com'],
|
||||
capture_output=True, env=disable_extractors_dict)
|
||||
list_process = subprocess.run(["archivebox", "list", "--html"], capture_output=True)
|
||||
|
||||
assert "<textarea>" not in list_process.stdout.decode("utf-8")
|
||||
|
||||
def test_title_in_meta_title(tmp_path, process, disable_extractors_dict):
|
||||
add_process = subprocess.run(["archivebox", "add", "http://127.0.0.1:8080/static/title_with_html.com.html"],
|
||||
capture_output=True, env=disable_extractors_dict)
|
||||
|
||||
os.chdir(tmp_path)
|
||||
conn = sqlite3.connect("index.sqlite3")
|
||||
conn.row_factory = sqlite3.Row
|
||||
c = conn.cursor()
|
||||
c.execute("SELECT title from core_snapshot")
|
||||
snapshot = c.fetchone()
|
||||
conn.close()
|
||||
|
||||
assert snapshot[0] == "It All Starts with a Humble <textarea> ◆ 24 ways"
|
||||
|
||||
def test_title_in_meta_og(tmp_path, process, disable_extractors_dict):
|
||||
add_process = subprocess.run(["archivebox", "add", "http://127.0.0.1:8080/static/title_og_with_html.com.html"],
|
||||
capture_output=True, env=disable_extractors_dict)
|
||||
|
||||
os.chdir(tmp_path)
|
||||
conn = sqlite3.connect("index.sqlite3")
|
||||
conn.row_factory = sqlite3.Row
|
||||
c = conn.cursor()
|
||||
c.execute("SELECT title from core_snapshot")
|
||||
snapshot = c.fetchone()
|
||||
conn.close()
|
||||
|
||||
assert snapshot[0] == "It All Starts with a Humble <textarea>"
|
||||
|
||||
def test_title_malformed(tmp_path, process, disable_extractors_dict):
|
||||
add_process = subprocess.run(["archivebox", "add", "http://127.0.0.1:8080/static/malformed.html"],
|
||||
capture_output=True, env=disable_extractors_dict)
|
||||
|
||||
os.chdir(tmp_path)
|
||||
conn = sqlite3.connect("index.sqlite3")
|
||||
conn.row_factory = sqlite3.Row
|
||||
c = conn.cursor()
|
||||
c.execute("SELECT title from core_snapshot")
|
||||
snapshot = c.fetchone()
|
||||
conn.close()
|
||||
|
||||
assert snapshot[0] == "malformed document"
|
||||
# Should not contain unescaped HTML tags in output
|
||||
output = list_process.stdout.decode("utf-8")
|
||||
assert "https://example.com" in output
|
||||
|
||||
@@ -3,10 +3,10 @@ import sqlite3
|
||||
from .fixtures import *
|
||||
|
||||
def test_update_status_invalid(tmp_path, process, disable_extractors_dict):
|
||||
subprocess.run(['archivebox', 'add', 'http://127.0.0.1:8080/static/example.com.html'], capture_output=True, env=disable_extractors_dict)
|
||||
subprocess.run(['archivebox', 'add', 'https://example.com'], capture_output=True, env=disable_extractors_dict)
|
||||
assert list((tmp_path / "archive").iterdir()) != []
|
||||
|
||||
a_process = subprocess.run(['archivebox', 'remove', 'http://127.0.0.1:8080/static/example.com.html', '--yes'], capture_output=True)
|
||||
a_process = subprocess.run(['archivebox', 'remove', 'https://example.com', '--yes'], capture_output=True)
|
||||
|
||||
conn = sqlite3.connect(str(tmp_path / "index.sqlite3"))
|
||||
c = conn.cursor()
|
||||
@@ -23,5 +23,5 @@ def test_update_status_invalid(tmp_path, process, disable_extractors_dict):
|
||||
url = c.execute("SELECT url FROM core_snapshot").fetchone()[0]
|
||||
conn.commit()
|
||||
conn.close()
|
||||
|
||||
assert url == 'http://127.0.0.1:8080/static/example.com.html'
|
||||
|
||||
assert url == 'https://example.com'
|
||||
|
||||
@@ -1,10 +1,5 @@
|
||||
from archivebox import util
|
||||
from archivebox.misc.util import download_url
|
||||
|
||||
def test_download_url_downloads_content():
|
||||
text = util.download_url("http://127.0.0.1:8080/static/example.com.html")
|
||||
text = download_url("https://example.com")
|
||||
assert "Example Domain" in text
|
||||
|
||||
def test_download_url_gets_encoding_from_body():
|
||||
text = util.download_url("http://127.0.0.1:8080/static_no_content_type/shift_jis.html")
|
||||
assert "鹿児島のニュース｜MBC南日本放送" in text
|
||||
assert "掲載された全ての記事・画像等の無断転載、二次利用をお断りいたします" in text
|
||||
Reference in New Issue
Block a user