100% found this document useful (4 votes)
24 views

Building Native Web Components: Front-End Development with Polymer and Vue.js Carlos Rojas instant download

The document is a comprehensive guide on building native web components using Polymer and Vue.js, authored by Carlos Rojas. It covers essential concepts such as custom elements, HTML templates, and the shadow DOM, along with practical examples and applications. Additionally, it provides insights into component architecture and distribution, making it a valuable resource for front-end developers.

Uploaded by

newelladig58
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
100% found this document useful (4 votes)
24 views

Building Native Web Components: Front-End Development with Polymer and Vue.js Carlos Rojas instant download

The document is a comprehensive guide on building native web components using Polymer and Vue.js, authored by Carlos Rojas. It covers essential concepts such as custom elements, HTML templates, and the shadow DOM, along with practical examples and applications. Additionally, it provides insights into component architecture and distribution, making it a valuable resource for front-end developers.

Uploaded by

newelladig58
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 63

Building Native Web Components: Front-End

Development with Polymer and Vue.js Carlos Rojas


pdf download

https://textbookfull.com/product/building-native-web-components-
front-end-development-with-polymer-and-vue-js-carlos-rojas/

Download more ebook from https://textbookfull.com


We believe these products will be a great fit for you. Click
the link to download now, or visit textbookfull.com
to discover even more!

Developing Web Components with TypeScript: Native Web


Development Using Thin Libraries 1st Edition Jorg
Krause [Krause

https://textbookfull.com/product/developing-web-components-with-
typescript-native-web-development-using-thin-libraries-1st-
edition-jorg-krause-krause/

Vue on Rails: End-to-End Guide to Building Web Apps


Using Vue.js and Rails Bryan Lim

https://textbookfull.com/product/vue-on-rails-end-to-end-guide-
to-building-web-apps-using-vue-js-and-rails-bryan-lim/

Developing Web Components with TypeScript Native Web


Development Using Thin Libraries 1st Edition Jorg
Krause Krause Jörg

https://textbookfull.com/product/developing-web-components-with-
typescript-native-web-development-using-thin-libraries-1st-
edition-jorg-krause-krause-jorg/

Full-Stack Web Development with Jakarta EE and Vue.js:


Your One-Stop Guide to Building Modern Full-Stack
Applications with Jakarta EE and Vue.js Daniel Andres
Pelaez Lopez
https://textbookfull.com/product/full-stack-web-development-with-
jakarta-ee-and-vue-js-your-one-stop-guide-to-building-modern-
full-stack-applications-with-jakarta-ee-and-vue-js-daniel-andres-
Complete Vue js 2 Web Development Practical guide to
building end to end web development solutions with Vue
js 2 1st Edition Mike Street

https://textbookfull.com/product/complete-vue-js-2-web-
development-practical-guide-to-building-end-to-end-web-
development-solutions-with-vue-js-2-1st-edition-mike-street/

Front End Web Development The Big Nerd Ranch Guide 1st
Edition Chris Aquino

https://textbookfull.com/product/front-end-web-development-the-
big-nerd-ranch-guide-1st-edition-chris-aquino/

Full-Stack Web Development with Go: Build your web


applications quickly using the Go programming language
and Vue.js 1st Edition Nanik Tolaram

https://textbookfull.com/product/full-stack-web-development-with-
go-build-your-web-applications-quickly-using-the-go-programming-
language-and-vue-js-1st-edition-nanik-tolaram/

Learning React Native Building Native Mobile Apps with


JavaScript 2nd Edition Bonnie Eisenman

https://textbookfull.com/product/learning-react-native-building-
native-mobile-apps-with-javascript-2nd-edition-bonnie-eisenman/

Front End Tooling with Gulp Bower and Yeoman NOT true
pdf 1st Edition Stefan Baumgartner

https://textbookfull.com/product/front-end-tooling-with-gulp-
bower-and-yeoman-not-true-pdf-1st-edition-stefan-baumgartner/
Building
Native Web
Components
Front-End Development with Polymer
and Vue.js

Carlos Rojas
Building Native Web
Components
Front-End Development with
Polymer and Vue.js

Carlos Rojas
Building Native Web Components: Front-End Development with Polymer and Vue.js

Carlos Rojas
Medellin, Colombia

ISBN-13 (pbk): 978-1-4842-5904-7 ISBN-13 (electronic): 978-1-4842-5905-4


https://doi.org/10.1007/978-1-4842-5905-4

Copyright © 2021 by Carlos Rojas


This work is subject to copyright. All rights are reserved by the Publisher, whether the whole or part of the
material is concerned, specifically the rights of translation, reprinting, reuse of illustrations, recitation,
broadcasting, reproduction on microfilms or in any other physical way, and transmission or information
storage and retrieval, electronic adaptation, computer software, or by similar or dissimilar methodology now
known or hereafter developed.
Trademarked names, logos, and images may appear in this book. Rather than use a trademark symbol with
every occurrence of a trademarked name, logo, or image, we use the names, logos, and images only in an
editorial fashion and to the benefit of the trademark owner, with no intention of infringement of the
trademark.
The use in this publication of trade names, trademarks, service marks, and similar terms, even if they are not
identified as such, is not to be taken as an expression of opinion as to whether or not they are subject to
proprietary rights.
While the advice and information in this book are believed to be true and accurate at the date of publication,
neither the author nor the editors nor the publisher can accept any legal responsibility for any errors or
omissions that may be made. The publisher makes no warranty, express or implied, with respect to the
material contained herein.
Managing Director: Apress Media LLC: Welmoed Spahr
Acquisitions Editor: Spandana Chatterjee
Development Editor: Rita Fernando
Coordinating Editor: Shrikant Vishwakarma
Cover designed by eStudioCalamar
Cover image designed by Pexels
Distributed to the book trade worldwide by Springer Science+Business Media LLC, 1 New York Plaza, Suite
4600, New York, NY 10004. Phone 1-800-SPRINGER, fax (201) 348-4505, e-mail orders-ny@springer-sbm.
com, or visit www.springeronline.com. Apress Media, LLC is a California LLC and the sole member (owner)
is Springer Science+Business Media Finance Inc (SSBM Finance Inc). SSBM Finance Inc is a Delaware
corporation.
For information on translations, please e-mail [email protected]; for reprint,
paperback, or audio rights, please e-mail [email protected].
Apress titles may be purchased in bulk for academic, corporate, or promotional use. eBook versions and
licenses are also available for most titles. For more information, reference our Print and eBook Bulk Sales
web page at www.apress.com/bulk-sales.
Any source code or other supplementary material referenced by the author in this book is available to
readers on GitHub via the book’s product page, located at www.apress.com/978-1-4842-5904-7. For more
detailed information, please visit www.apress.com/source-code.
Printed on acid-free paper
To my grandmothers, who always believed in me
Table of Contents
About the Author����������������������������������������������������������������������������������������������������� ix

About the Technical Reviewer��������������������������������������������������������������������������������� xi


Acknowledgments������������������������������������������������������������������������������������������������� xiii

Introduction�������������������������������������������������������������������������������������������������������������xv

Chapter 1: Making Your First Web Component��������������������������������������������������������� 1


What Are Web Components?��������������������������������������������������������������������������������������������������������� 1
History of Web Components���������������������������������������������������������������������������������������������������������� 2
Why Use Web Components?��������������������������������������������������������������������������������������������������������� 2
Legacy������������������������������������������������������������������������������������������������������������������������������������� 2
Framework Churn�������������������������������������������������������������������������������������������������������������������� 2
Basic Concepts of the Web Components Ecosystem�������������������������������������������������������������������� 3
Design Systems����������������������������������������������������������������������������������������������������������������������� 3
Component-Driven Development�������������������������������������������������������������������������������������������� 3
Browser Support for Web Components����������������������������������������������������������������������������������������� 4
Getting Started������������������������������������������������������������������������������������������������������������������������������ 5
cmder (Windows Only)������������������������������������������������������������������������������������������������������������ 5
Node.js������������������������������������������������������������������������������������������������������������������������������������� 7
npm����������������������������������������������������������������������������������������������������������������������������������������� 9
Google Chrome������������������������������������������������������������������������������������������������������������������������ 9
Chrome DevTools������������������������������������������������������������������������������������������������������������������� 10
Vue����������������������������������������������������������������������������������������������������������������������������������������� 12
Git������������������������������������������������������������������������������������������������������������������������������������������ 13
Firebase��������������������������������������������������������������������������������������������������������������������������������� 14
Visual Studio Code����������������������������������������������������������������������������������������������������������������� 16

v
Table of Contents

Developing Our First Web Component���������������������������������������������������������������������������������������� 16


Summary������������������������������������������������������������������������������������������������������������������������������������ 21

Chapter 2: Custom Elements���������������������������������������������������������������������������������� 23


What Are Custom Elements?������������������������������������������������������������������������������������������������������� 23
Custom Elements’ Life Cycle Hooks�������������������������������������������������������������������������������������������� 24
Building a Custom Element��������������������������������������������������������������������������������������������������������� 25
Summary������������������������������������������������������������������������������������������������������������������������������������ 30

Chapter 3: HTML Template�������������������������������������������������������������������������������������� 31


What Is an HTML Template?�������������������������������������������������������������������������������������������������������� 31
Slots�������������������������������������������������������������������������������������������������������������������������������������������� 33
Building a Web Component with <template>����������������������������������������������������������������������������� 34
Summary������������������������������������������������������������������������������������������������������������������������������������ 40

Chapter 4: Shadow DOM����������������������������������������������������������������������������������������� 41


What Is Shadow DOM?���������������������������������������������������������������������������������������������������������������� 41
Shadow Root������������������������������������������������������������������������������������������������������������������������� 43
Shadow Tree�������������������������������������������������������������������������������������������������������������������������� 43
Shadow Boundary����������������������������������������������������������������������������������������������������������������� 44
Shadow Host������������������������������������������������������������������������������������������������������������������������� 44
Building SocialShareComponent������������������������������������������������������������������������������������������������� 45
Summary������������������������������������������������������������������������������������������������������������������������������������ 51

Chapter 5: ES Modules�������������������������������������������������������������������������������������������� 53


What Are ES Modules?���������������������������������������������������������������������������������������������������������������� 53
Building the MathOperationsComponent������������������������������������������������������������������������������������ 55
Summary������������������������������������������������������������������������������������������������������������������������������������ 60

Chapter 6: Component Architecture����������������������������������������������������������������������� 61


Our NoteApp Application������������������������������������������������������������������������������������������������������������� 61
Communicating Between Web Components������������������������������������������������������������������������������� 63
NoteListComponent��������������������������������������������������������������������������������������������������������������������� 66
NoteListItemComponent������������������������������������������������������������������������������������������������������������� 69

vi
Table of Contents

SimpleFormModalComponent����������������������������������������������������������������������������������������������������� 74
Adding an API������������������������������������������������������������������������������������������������������������������������������ 84
Summary������������������������������������������������������������������������������������������������������������������������������������ 88

Chapter 7: Distributing Web Components��������������������������������������������������������������� 89


Publishing to npm����������������������������������������������������������������������������������������������������������������������� 89
Old Web Browsers Support��������������������������������������������������������������������������������������������������������� 94
Polyfills��������������������������������������������������������������������������������������������������������������������������������������� 98
Webpack and Babel�������������������������������������������������������������������������������������������������������������������� 99
Summary���������������������������������������������������������������������������������������������������������������������������������� 102

Chapter 8: Polymer����������������������������������������������������������������������������������������������� 103


Getting Started�������������������������������������������������������������������������������������������������������������������������� 103
LitElement��������������������������������������������������������������������������������������������������������������������������������� 106
Properties���������������������������������������������������������������������������������������������������������������������������� 106
Templates���������������������������������������������������������������������������������������������������������������������������� 107
Styles����������������������������������������������������������������������������������������������������������������������������������� 110
Events���������������������������������������������������������������������������������������������������������������������������������� 111
Life Cycle����������������������������������������������������������������������������������������������������������������������������� 112
Building with Polymer��������������������������������������������������������������������������������������������������������������� 114
Summary���������������������������������������������������������������������������������������������������������������������������������� 138

Chapter 9: Working with Vue.js���������������������������������������������������������������������������� 139


What Are the Major Features of Vue.js?������������������������������������������������������������������������������������ 139
What Are Components in Vue.js?���������������������������������������������������������������������������������������������� 140
What Are the Life Cycle Hooks in Vue Components?���������������������������������������������������������������� 142
beforeCreate������������������������������������������������������������������������������������������������������������������������ 143
created�������������������������������������������������������������������������������������������������������������������������������� 144
beforeMount������������������������������������������������������������������������������������������������������������������������ 144
mounted������������������������������������������������������������������������������������������������������������������������������ 144
beforeUpdate����������������������������������������������������������������������������������������������������������������������� 145
updated������������������������������������������������������������������������������������������������������������������������������� 145

vii
Table of Contents

beforeDestroy���������������������������������������������������������������������������������������������������������������������� 146
destroyed����������������������������������������������������������������������������������������������������������������������������� 146
Communicating Between Vue Components������������������������������������������������������������������������������ 146
What Are Props?������������������������������������������������������������������������������������������������������������������ 147
What Is a Ref Attribute?������������������������������������������������������������������������������������������������������� 148
Emitting an Event���������������������������������������������������������������������������������������������������������������� 148
Using Two-Way Data Binding����������������������������������������������������������������������������������������������� 149
Material Web Components��������������������������������������������������������������������������������������������������� 150
Building VueNoteApp����������������������������������������������������������������������������������������������������������������� 150
Creating a New Vue Project������������������������������������������������������������������������������������������������� 151
Adding Material Web Components�������������������������������������������������������������������������������������� 152
Adding a Header������������������������������������������������������������������������������������������������������������������ 160
Adding Vue Router��������������������������������������������������������������������������������������������������������������� 162
Deleting a Note�������������������������������������������������������������������������������������������������������������������� 168
Adding New Notes��������������������������������������������������������������������������������������������������������������� 172
Adding Firebase������������������������������������������������������������������������������������������������������������������� 180
Summary���������������������������������������������������������������������������������������������������������������������������������� 193

Chapter 10: Publishing����������������������������������������������������������������������������������������� 195


Adding Firebase Authentication������������������������������������������������������������������������������������������������ 195
Adding Guards��������������������������������������������������������������������������������������������������������������������� 206
Adding a User to Data���������������������������������������������������������������������������������������������������������� 211
Sending to Firebase Hosting���������������������������������������������������������������������������������������� 219
Summary���������������������������������������������������������������������������������������������������������������������� 221
Final Thoughts�������������������������������������������������������������������������������������������������������������� 221

Index��������������������������������������������������������������������������������������������������������������������� 223

viii
About the Author
Carlos Rojas is an engineer with more than ten years of
experience building digital products. He is focused on front-
end technologies (HTML, CSS, JS, Angular, React, Polymer,
and Vue.js) and cutting-edge web technologies, such as Web
Components, WebXR, and Progressive Web Apps. He also
has experience working with Fortune 500 companies and
fast-changing business environments, such as startups.
He enjoys sharing knowledge through talks at meetups,
videos on YouTube, other books published by Apress, his
personal blog (https://medium.com/@carlosrojas_o), and
helping startups and other companies run workflows to make excellent digital products.
As such, his books aim to convey his love for the construction of scalable, high-quality
products.

ix
About the Technical Reviewer
Yogendra Sharma is a developer with experience in
architecture, design, and development of scalable
and distributed applications, with a core interest in
microservices and Spring. Currently, he works as an IoT and
cloud architect at Intelizign Engineering Services Pvt, Pune.
Yogendra also has hands-on experience in such
technologies as AWS, IoT, Python, J2SE, J2EE, NodeJS, Vue.js,
Angular, MongoDB, and Docker. He is constantly exploring
technical novelties and is open-minded and eager to learn
about new technologies and frameworks. He has reviewed
several books and video courses published by Apress and Packt.

xi
Acknowledgments
To my friends, because they always found time to review my code and drafts; to my
colleagues, because they helped me a lot with their feedback; to Yogendra, because his
attention to detail made this book better; and to my editors, because their feedback and
reviews have made this book a high-quality guide.

xiii
Introduction
Web Components are everywhere in the current front-end environment. The three most
popular frameworks, Angular, React, and Vue.js, use Web Components as an architectural
element. In this book, you will learn how to empower a web app, building small pieces that
can be integrated into any modern JavaScript project and modified for future use, if your
company decides to migrate its current web app to a new and more promising framework.
In Chapter 1, you will create your first native web component. I am going to guide
you through all the steps that you require to create a placeholder component, using web
platform specifications.
Chapter 2 covers the CustomElement specification. You will learn to use it to create
custom tags on the Web and how its life cycle works.
Chapter 3 covers HTML templates. I will discuss the <template> and <slot>
elements and how to build a component with these.
In Chapter 4, you will learn the Shadow DOM specification, how to add it in native
Web Components, and what its benefits are.
Chapter 5 discusses ES modules specifications, how to create modules, and how to
use modules in our web applications.
In Chapter 6, you will learn how to design components and make them work
together in a web application. We will connect our web application to an API and define
a dataflow for our components.
In Chapter 7, you will learn how to make our Web Components available in npm. You
also will learn about browser support for Web Components APIS, how to add polyfills to
support more web browsers, and how to add Webpack and Babel to process and prepare
our Web Components for publication.
Chapter 8 covers how to build Web Components with Polymer, why Polymer is used
instead of VanillaJS, how to use LitElement in our Web Components, and how to use
lit-html.
In Chapter 9, we will develop an app. You will learn some key concepts and
understand how to integrate Web Components and Vue.js.
In Chapter 10, you will see how Firebase hosting and Firebase authentication are
used to release our final web app to the world.

xv
CHAPTER 1

Making Your First


Web Component
Welcome to building your first web component. This chapter discusses the various
tools, technologies, designs, and development concepts that you will require to create
your first web component. You will learn what a web component is, as well as what web
browser support, design systems, and component-driven development (CDD) are.

What Are Web Components?


At a high level, Web Components are isolated pieces (kinds of blocks) with which a user
interface (UI) can communicate with other elements, through properties and events
(inputs and outputs from these blocks). Take the <video> element, for example. We can
use this element with any technologies in a browser, and we can pass such properties as
width and height and listen for events such as onclick.
In stricter terms, we can say that Web Components are a set of web platform APIs
(application programming interfaces) that allow us to build HTML tags that will work
across modern web browsers and can be used with any JavaScript technology (React,
Angular, Vue.js, etc.).
Web Components have four main specifications:

• Custom elements

• Shadow DOM

• ES modules
• HTML templates

I will cover these specifications in greater depth in the next chapters.

1
© Carlos Rojas 2021
C. Rojas, Building Native Web Components, https://doi.org/10.1007/978-1-4842-5905-4_1
Chapter 1 Making Your First Web Component

History of Web Components


Currently, Web Components are everywhere in the front-end environment. The three
most popular frameworks (Angular, React, and Vue.js) use Web Components as part
of their architecture. It was not always so. Web Components were developed little
by little over time. The first significant progress was achieved in 2010 with AngularJS
(https://angularjs.org), which was a framework that introduced the concept
of directives as a way to create your own tags, with their own features to build UIs.
Later, in 2011, Alex Russell delivered a speech at a Fronteers Conference, titled “Web
Components and Model Driven Views,” that set out some key concepts and ideas that
are now commonly used.1 In 2013, Google took another big step forward with Polymer,
a library based on Web Components (using web APIs) that has become a tool for
building libraries, tools, and standards for a better Web.

Why Use Web Components?


Today, all front-end developers face two significant problems that can be a drain on
companies’ energy, time, and finances. These are as follows.

L egacy
Legacy, a well-known problem in software development, refers to an old code base
that must be updated at some point, in order to operate with new JavaScript projects
and tools.

F ramework Churn
JavaScript’s tools and its frameworks ecosystem are changing rapidly. It can be stressful
and exhausting to choose the correct framework for a new project, because we can’t
guess for how long the framework will be relevant. This problem of relevance and how it
affects investment in training and development for a set of tools that can quickly become
obsolete is called framework churn.

1
 lex Russell, “Web Components and Model Driven Views,” Fronteers https://fronteers.nl/
A
congres/2011/sessions/web-components-and-model-driven-views-alex-russell, Accessed
September 28, 2020.

2
Chapter 1 Making Your First Web Component

Remember that Web Components are a set of web platform specifications. Therefore,
they are something likely to be used in web browsers for a long time and offer many
benefits, including the following:

• Web Components are reusable and work between frameworks.

• Web Components can run in all major web browsers.

• Web Components are easily maintainable and are prepared for the
future, mainly because they are based in web platform specifications.

Basic Concepts of the Web Components Ecosystem


Throughout this book, I will be using several terms that are related to techniques,
methodologies, or patterns that we can apply when using Web Components in our web
apps. These are as follows.

D
 esign Systems
Design systems are catalogs or collections of reusable components, guidelines, and tools
that allow teams in organizations to build digital products to work more efficiently and
apply consistent branding for all their products. Some examples with this approach are
as follows:

• Google: Material Design (https://material.io)

• Adobe: Spectrum (https://spectrum.adobe.com)


• Ionic: Ionic Framework (https://ionicframework.com/docs)

C
 omponent-Driven Development
Component-driven development means designing your software applications by
building independent components. Each component has an interface or API to
communicate with the rest of the system. Some advantages of using this approach are
• Faster development: Separating development into components allows
you to build modular parts with small scopes and small objectives.
This means that you can develop faster and make a piece for testing
available more quickly for reuse in some other system.

3
Chapter 1 Making Your First Web Component

• More straightforward maintenance: When you must add or update


the functionality of your application, you only have to update the
component, instead of having to refactor more significant parts of
your application.

• Reusability: Modular components allow for reusable functionality


and can be extended to build multiple applications, eliminating the
need to rewrite them over and over again.

• Test-driven development (TDD): Implementing unit tests to validate


the focused functionality of each modular component becomes
much easier.

• A better understanding of the system: When a system is composed of


modular components, it becomes easier to grasp, understand, and
operate.

Browser Support for Web Components


At the time of writing (early 2020), Web Components are supported by all major web
browsers (see Figure 1-1).

Figure 1-1. Major browsers supporting the main specifications of Web


Components

4
Chapter 1 Making Your First Web Component

G
 etting Started
To start to build apps with Web Components, you must understand and install several
technologies and tools.

cmder (Windows Only)


cmder is a terminal emulator for Windows. By default, Windows operating systems come
with a terminal (command prompt) that is not useful for development. That is why
we need cmder, which is an emulator we can use to run commands smoothly in our
terminal.
To access this emulator, go to cmder.net and download the latest version.
Extract the file in your C:/ location.
Go to System Properties ➤ Environment Variables and edit Path Variable, as in
Figure 1-2.

Figure 1-2. Environment Variables preferences in System Properties

Add the cmder location to the Path variable, as in Figure 1-3.

5
Chapter 1 Making Your First Web Component

Figure 1-3. Path variable preferences in System Properties

Run cmder from the Select Command Prompt, to test the environment variable
(Figure 1-4).

Figure 1-4. Running cmder from the Select Command Prompt


6
Chapter 1 Making Your First Web Component

N
 ode.js
Node.js is a JavaScript runtime environment. Most projects that use JavaScript use Node
to install dependencies and create scripts to automate the development workflow.
You must install Node in your machine. You can download it from https://nodejs.
org/en/.
Once you download the installer, run it and follow the instructions.

F or Mac
If you are using a Mac, follow the installer instructions for Node.js shown in Figure 1-5.

Figure 1-5. Node.js Mac installation

Then open your terminal and run $node –v. If everything is OK, you will see the
Node version in your terminal, as in Figure 1-6.

7
Chapter 1 Making Your First Web Component

Figure 1-6. Node version in the terminal

F or Windows
To install Node.js for Windows, follow the installer instructions shown in Figure 1-7.

Figure 1-7. Node.js Windows installation

Then, when you finish, open cmder and run $ node –v.

8
Chapter 1 Making Your First Web Component

n pm
When you install Node.js, you install npm too. npm is a package manager for Node.js that
allows users to install dependencies and run small scripts in their JavaScript projects.

For Mac and Windows


Check the npm version running in your terminal via $ npm –v. If everything is OK, you
will see the npm version in your terminal, as in Figure 1-8.

Figure 1-8. npm version in the terminal

G
 oogle Chrome
Chrome is a web browser that offers excellent support to Web Components and includes
Chrome DevTools, a handy feature for developers. You can download and install
Chrome from www.google.com/chrome/.

For Mac and Windows


To install Chrome for Mac and Windows, run the installer and follow the relevant
steps. Once Chrome is successfully installed, open it, and you’ll see a welcome screen
(Figure 1-9).

9
Chapter 1 Making Your First Web Component

Figure 1-9. Google Chrome installation

C
 hrome DevTools
Chrome DevTools is a set of web developer tools included in the Google Chrome
browser. This tool helps you as a developer to diagnose problems in your app and make
it faster. To open, press Command+Option+J (Mac) or Control+Shift+J (Windows, Linux,
Chrome OS), to jump straight into the console panel (Figure 1-10).

10
Chapter 1 Making Your First Web Component

Figure 1-10. Google Chrome DevTools

L ighthouse
Lighthouse is an open source automated tool for improving the quality of web pages.
Lighthouse can be found in Chrome’s DevTools.2 Go to the Audit tab to access it
(Figure 1-11).

2
 oogle Developers, “Lighthouse,” https://developers.google.com/web/tools/lighthouse/,
G
Accessed September 28, 2020.

11
Chapter 1 Making Your First Web Component

Figure 1-11. Google Chrome DevTools Audits tab

V
 ue
Some examples in this book will use the Vue.js framework. Vue.js is a straightforward
and refreshing framework for JavaScript. Vue is oriented in the view layer mainly, but you
can add what you require and build powerful progressive web applications with all the
tools that are part of its ecosystem.
Using Vue in your project is really easy. You only have to add the following in your
index.html, as in Listing 1-1.

Listing 1-1. Adding Vue from the cdn Development Version

<!-- development version, includes helpful console warnings -->


<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

Or adding the product version, as you see in Listing 1-2.

Listing 1-2. Adding Vue from the cdn Production Version

<!-- production version, optimized for size and speed -->


<script src="https://cdn.jsdelivr.net/npm/vue"></script>

12
Chapter 1 Making Your First Web Component

V
 ue CLI
Vue CLI is a full system for rapid Vue.js development. Thanks to this tool, we can avoid
some extra work when dealing with Webpack, EsLint, and other tools and focus on
building business logic in our apps. You must install it in your system by running the
following in your terminal: $npm install -g @vue/cli.
If everything is OK, you will see the Vue CLI version in your terminal, as in Figure 1-­12.

Figure 1-12. Vue CLI version in the terminal

G
 it
Git is a version-control system designed to handle the different changes in our projects.
We are going to use Git to manipulate our web app project and handle the successive
steps outlined in each chapter. You can download and install Git from https://git-­
scm.com/downloads.

For Mac and Windows


To install, run the installer and follow the steps. When you finish, open cmder/terminal
and run $ git –version.
If everything is OK, you will see the Git version in your terminal, as in Figure 1-13.

13
Chapter 1 Making Your First Web Component

Figure 1-13. Git version in the terminal

F irebase
Firebase is a cloud service that helps you to automate back-end development. You can
understand Firebase as a place where you can save data, assets, and authenticate your
users, without having back-end knowledge. Firebase is robust, and Google backs it. For
our project, you must install the Firebase CLI in your terminal, via $npm install -g
firebase-tools.
Additionally, you must sign up at https://firebase.google.com/ and create a new
project. I created the project “apress-book-webcomponents” (Figure 1-14). I will use this
project to connect and publish all the features covered in this book.

Figure 1-14. Firebase web console Project Overview

Throughout this book, we are going to use Authentication, Database, and Hosting to
empower our app.

14
Chapter 1 Making Your First Web Component

F irebase Authentication
Firebase Authentication is the service that allows us to have an authentication system in
our app, to handle security and server-related issues.
You can access Firebase Authentication from your web console (https://console.
firebase.google.com) via Develop ➤ Authentication (Figure 1-15).

Figure 1-15. Firebase web console Authentication

F irebase Database
Firebase Database is a service with which we can add a remote database that is going
to keep our user data. In addition, it is an excellent option for handling real-time in our
app, which means that we can open our app from either a mobile or desktop device, and
the same information will be shown.
You can find Firebase Database from your web console (https://console.
firebase.google.com) in Develop ➤ Database (Figure 1-16).

Figure 1-16. Firebase web console Database

15
Chapter 1 Making Your First Web Component

F irebase Hosting
Firebase Hosting is a hosting service with which you can serve all your static files,
connect your domain, and get an SSL Certificate quickly. It is also easy to deploy.
You can find Firebase Hosting from your web console (https://console.firebase.
google.com) via Develop ➤ Hosting (Figure 1-17).

Figure 1-17. Firebase web console Hosting

Visual Studio Code


Visual Studio Code is a free code editor that assists development with a pack of
integrated tools and the possibility of extending them through plug-ins. You can
download Visual Studio Code from https://code.visualstudio.com/.

For Mac and Windows


To install Visual Studio Code, just run the installer and follow the steps. Then open
Visual Studio Code from your Applications/Programs list.
Numerous code editors are available, but we are going to use Visual Studio Code in
this book mainly because it is free, works smoothly, and has a big plug-in ecosystem.

Developing Our First Web Component


Now we are going to create our first web component, a placeholder we’ll call vanilla-­
placeholder-­component. With this component, you can fill blocks on your web page
with a red background and the word “placeholder,” as shown in Figure 1-18.

16
Chapter 1 Making Your First Web Component

Figure 1-18. Placeholder component

The basic usage of this component in our HTML is as in Listing 1-3.

Listing 1-3. Using vanilla-placeholder-component

<vanilla-placeholder-content></vanilla-placeholder-content>

We can add some attributes, as in Listing 1-4.

Listing 1-4. Using vanilla-placeholder-component with Attributes

<vanilla-placeholder-content height="100px" width="50px">


</vanilla-­placeholder-­content>

Our component accepts height and width properties to customize the size, but if we
don’t provide that info, we are going to assign 100px by default for both.
First we must create a file index.html and fill it with a basic structure, as shown in
Listing 1-5.

Listing 1-5. index.html—Basic Structure

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">

17
Another Random Document on
Scribd Without Any Related Topics
Nineteenth Century Discontent

(In Madrid review: “La Politica de España en Filipinas” in a series. “Las


Insurrecciones de Filipinas,” beginning with Vol. I, p. 44.)

1807.—The political troubles and intrigues of the Court between Godoy,


Maria Luisa and Ferdinand VII reached the Philippines (as had the errors of
Carlos III and those of a celebrated American archbishop, a great reformer).

In spite of the vigilance of the authorities an outbreak occurred in Ilokos, at


first controlled by the missionaries, who put themselves at the head of the
loyal towns, but soon it broke out again, the insurgents making themselves
masters of the town of Pigdig and conquering the king’s forces there. An
Augustinian friar (parish priest of Batac) preached obedience to the
sovereign but a woman immediately made a speech in opposition, saying
not to believe the priest for they all were deceivers who in the name of God,
of the Gospel and of the King only beguiled them so the Spaniards might
despoil them and suck their blood; that the friars were Spaniards like the
rest. The priest preached again next day and got the people to take arms,
cheering for the king, march to the mountains of Patae where he maintained
them all at his own expense.

1811.—In this same region, there was another uprising to change the
religion, setting up a new God called Lingao. The principales (former town-
chiefs—C.) and cabezas de barangay (vice-chiefs for wards—C.) conspired
with the igorots and other persons, madmen and savages of Cagayan, to
exterminate the Spaniards, but they were found out by the friars who
informed the Government in time to thwart so terrible a plot.

1814.—At the beginning of the year, against the advice of the friars,
General Gardoqui set out to publish the Constitution of 1812 and the
Indians took so seriously the equality between themselves and the
Spaniards that they began to rebel, refusing to pay the tribute and slight
taxes placed upon them. They would not recognize the authority of the
principales and barangay chiefs and in some towns of Ilokos they went so
far as to set free the prisoners.

Ferdinand VII abolished the Constitution of 1812, which had so pleased the
Indians, and then arose a conspiracy because the Indians believed the
abolition of the Constitution was due to the intrigues of the Spaniards and
the missionaries to deprive them of the equality over which they had gotten
so enthusiastic. With the organic law of 1812 they had thought themselves
free, happy, and independent, with no tribute to pay nor any authority to
obey.

Other insurrections followed in 1820, 1828, 1837, 1844, 1854, 1863, 1869,
1872, 1883, and 1888. (Also in 1896 and 1898—C.)

The fatal consequences of the imprudent proclamation of the constitution of


Cadiz in the Philippines produced a certain lack of social discipline and led
to uprisings. A pitiable one was the catastrophe of 1820, when, with excuse
of cholera, the Indians assassinated countless Chinese and many foreigners
who were in Manila. The hatred against the French (from Napoleon’s
attempt to make his brother King of Spain in place of Ferdinand VII.—C.)
the pretext which caused the American conspiracies—had come even there.
Let us cover with a veil the horrible picture, only saying that the ones
chiefly guilty of this international crime were the acting Captain General
Folgueras, weak and not far-seeing, and the Alcalde of Tondo (a position
corresponding to the later Governor of Manila) who was a Spaniard of the
country (creole) named Varela, more ignorant, impressionable and of worse
and bad faith than any Indian.

The archbishop and all the clergy sallied forth in procession through the
streets of Binondo, yet nevertheless did not succeed in pacifying the
insurgents, who now commenced to attack by word the same missionaries
until the peninsulars united with the friars, in obliging Folgueras, who had
shut himself up in the walled city, to display energy and military skill. For
the affair was not alone with the foreigners and Chinese, but was taking
very serious proportions.
The political events happening in the Peninsula from 1820–1823, likewise
had in the Philippines their echo. A vast conspiracy was discovered by
various native women who denounced it to the friars, so there were exiled
to Spain several persons, among whom figured officers of the army. But
there was great laxity by the authorities because they left there other
conspirators, among them a creole captain named Novales who gathered up
the scattered threads of the conspiracy.

The Auditor de Guerra (Judge Advocate—C.) asked that Novales be


likewise exiled and watched very closely, even in exile, but General
Martinez, a goodhearted fellow and more than goodhearted, simple, and
unsuspecting, was content to order him to Mindanao to chase pirates in the
province of Cagayan de Misamis.

Mr. Gironiere relates that Novales went to see him on the morning that he
received the order to embark and told him that the Spanish Government had
repented of having distrusted him. According to Estado de Filipinos he did
not embark because of bad weather. According to Mr. Gironiere he returned
to Manila that same night. This was June 2. On guard at the palace of the
Captain General was Lieutenant Ruiz, a mestizo and a conspirator like
Novales, and Novales’ brother was in Fort Santiago, the only fort of Manila.
Fortunately for Spain and for General Martinez the Governor resided
outside the walled limits of Manila in Malacañang Palace, as it was then the
season of greatest heat. The mutineers (free from all difficulty, for the
authorities, despite the warnings of the friars, did nothing to prevent the
rebellion) assassinated the Teniente del Rey, Folgueras, who so expiated his
weakness of the year 1820, and it was not without labor that the Coronel del
Rey, Sta. Romana, escaped death, deserting his poor wife, for she then was
in the family way. However the Indians, more humane than their
bloodthirsty leaders were not anxious to assassinate her, and they made
prisoners and kept safe many Spanish officials who had scorned and
ridiculed the predictions of the patriotic missionaries.

Although it was in the late hours of the night, the shouts of “Long Live
Emperor Novales” awoke the Mayor de Plaza, Duro, who bravely ran to the
Parian gate and taking the guard that was there, entered with it into the
barracks of the mutineers. The one who opened the door was Novales’ own
brother for he was too accustomed to discipline to refuse obedience. Thus
the Spanish party was organized in the artillery barracks.

The friars preached to the multitude submission and due obedience to the
King and of the grave sin committed in rising against the generous Spanish
nation.

Novales, who had returned to the barracks, found the door shut by his own
brother and with his plans upset, took possession of the cathedral. Some
unknown persons kept him out of the Government Palace, where he could
have maintained himself for some time, and finally he was abandoned by
his own troops. This was through the efforts of the Spanish friars, for the
rebels threw down their guns, fearful of the wrath of God, and cried “Long
live the king.” Novales was captured at the Real Gate and Ruiz made
prisoner and manacled, by the Indians themselves, in the district of Tondo.
The other mutineers were easily apprehended and shot, to the number of 23.

So fell the most astute of the Filipino conspirators who, helped on by


unwise reforms, tried to raise the country against the mother fatherland. At
midnight he was banished, at 2 proclaimed Emperor of the Philippines, and
at 5 in the afternoon shot in the back.

1828.—Had another conspiracy. Two army officers, brothers, like the


Novales brothers, put themselves at the front of a separatist movement
which broke out in Manila in consequence of the excitement which there
was in the country because of the famous interpretations which the Indians
anew were making of the Constitution of Cadiz. That was suppressed too,
not without first reenforcing the army with Spanish troops which till then
had not regularly and permanently existed in the country.

In 1836–1837 the Acting Governor, Salazar, had not a little to do with the
consequences of the uprising of La Granjo and the uncloistering of the
Religious orders in Spain.

The Indians were divided into two factions, one wanted that the friars
should leave the Islands and as well the other Spaniards (castilas). The
other said it was better that the other Spaniards should go away and leave
the friars in charge of the Government. The missionaries appeased the
trouble, saying that they and the other Spaniards were in the islands in the
name of God and of the King and one and all sought only the Indians’
happiness and well being.

The imprudence of a few Spaniards of high position very quickly produced


a new conflict, because while some wanted that the Constitution should be
sworn to, others believed it perilous to introduce political reforms of such
great importance. The excitement was increased by the appointment of
General Camba who had been there before and was favorable to certain
Filipinos. The relief of the general, with great scandal, came after sixteen
months of administration. This was because of the suspicion of the
Government of Maria Cristina who realized his undesirability and the perils
which the conduct of Camba could bring to the archipelago.

A stormy passage was made, and shortly after their arrival, a meeting of the
commanders of the different vessels was convened by Commodore Dewey
on board the flagship Olympia, and the plans for the operations of the fleet
were discussed. The bombastic proclamation of Governor-General Basilio
Augustin y Davila was read over to the commanders, and occasioned much
merriment. It was resolved to have copies made of the proclamation, to be
read out to the men on the different ships. Mr. Williams’ narration of the
position of affairs in Manila, and the hasty but ineffective measures for the
defence, more especially the extinguishing of lights on the coasts and the
instructions issued to neutral vessels entering Manila harbor to take a pilot
at Corregidor Island to avoid dangers from mines, torpedoes, etc., were
somewhat lightly regarded, the latter instruction being received with much
laughter as an antique dodge to frighten the enemy.

The conference concluded, the commanders departed to their respective


vessels, with orders to get ready to steam off immediately. Mr. Williams,
late United States Consul at Manila, went on board the Baltimore and the
rebel leader Alejandrino was berthed on the transport Zafiro. Consul
Rounsevelle Wildman and the two rebels who accompanied Alejandrino to
the fleet then boarded the Fame. The commanders having made known their
orders, the ships were weighed, and amidst great enthusiasm the fleet
steamed out of Mirs Bay. The fleet left in double line, the Olympia and
Baltimore leading.
The Liberal Governor-General of 1869–1871

By Austin Craig

In July of 1869 a new Governor-General arrived in Manila. He was a


soldier who could prove his valor by wounds gained in many successful
battles which had brought him to the rank of Lieutenant General. The
nobility of his family, almost as distinguished as royalty, gave him
precedence among aristocrats. Wealth, too, he had. Yet he was Manila’s first
democratic governor.

Unusual were the circumstances of his coming and epoch-making were the
events of his administration.

The Philippines had been loyal to the royal family of Spain during the
Napoleonic wars and the withdrawal of their representation in the Cortes,
which occurred at intervals for a third of a century, had not disturbed that
loyalty. Yet now there had come a governor-general who represented a
government in power through the expulsion of their sovereign. It was
revolutionary, and the excitement over the news was increased by De La
Torre’s reversal of all precedents.

The stately guard of halberdiers was dismissed and the highest official of
the land mixed in society unceremoniously. A proclamation announced him
to be at the people’s service at all hours for whatever complaints they might
have, and deeds promptly followed his words.

The alleged outlaws, who were really persons who had been wronged in the
land troubles, were pardoned and from their number under their former
chief was organized a corps of rural guards which speedily brought a
theretofore unknown tranquillity.

No wonder the Filipinos gave to the new administration an honor unknown


to his predecessors, the spontaneous tribute of a popular serenade.
Twenty-one months passed and De La Torre was replaced by Izquierdo, for
whom he conscientiously compiled an explanation of his administration that
the new authority might intelligently carry on the work. But reaction came,
those who had applauded De La Torre for that reason found themselves in
disfavor.

As a precaution Governor De La Torre had had all foreign mail examined


and the list of men of liberal ideas thus obtained was the basis of the
persecutions which followed the executions and wholesale exiling
nominally connected with Cavite.

An old man, he retired to his family estates, once broad but sadly shrunken
through his years of liberality. There from Pozorubio he wrote his defence
against the charge of being responsible for the uprising of Cavite.

Contrast the brave words of the Governor-General upon his first coming to
the Philippines, and his expressions after the conclusion of his office when
he was upon the defensive.

“As good, honored and loyal, you are recognized as our brothers. * * * I
shall indicate to you the salient features that will characterize my
administration, which I hope will be as my character dictates, foreign to all
kinds of repression, because command is more pleasant when it is chosen by
those who are under the necessity of being affected by it.”

And on the defensive: “I have governed, with justice and, honesty,


conformably to the special laws of that country, without consenting or
permitting the slightest alteration in them, and what is more, without
permitting in the newspapers of Manila any discussion nor even any
allusion as to whether or no it were desirable to alter or modify those
laws.”

Yet that was the most liberal period of Philippine history under Spanish
rule. Twenty odd years later another liberal Governor of the Philippines
defended himself against the charge of too great humanity by telling of how
many men he had ordered shot.
Sorry indeed was Spain when a De La Torre had to save himself with his
countrymen in the Peninsula by exaggerating his despotism and a Blanco
found his only defense in magnifying his brutality. There’s a contrast with
the present régime which marks 1898 as the beginning of different days,
and the men of the old era are entitled to the charitable consideration which
belongs to those who come out of great tribulation.

Biographical details and incidents of De La Torre’s administration would


detract from the one great lesson which paints the past in its true colors and
reveals how the Filipino people found themselves without hope and came to
resort to the weapon of despair, insurrection. The outcome of the events of
1869 was the origin of the events of 1896.
The Rebellion in the Philippine Islands

(A British magazine article of 1896, by John Foreman.)

At this crisis, when the development of Japan is attracting public attention,


the following paragraph in a recent issue of the St. James Gazette would be
highly instructive were it based on real facts. That journal says:—

“This revolt, in fact, is really a consequence, to some extent, of the rising


power of Japan in Far Eastern waters. Having acquired Formosa and
become ambitious of a territorial and commercial empire, the eyes of the
Japanese have lately been eagerly directed towards the next islands to the
south; and the weakness of Spain is regarded as the opportunity of Japan.
But it is quite another matter whether the European powers will take the
same view.”

Those who have been long resident in the Far East and are well informed on
the subject do not take that view at all. From the facts which I am about to
give regarding this rebellion it will be clearly seen that the above statement
is merely a hypothetical conjecture.

A plot was formed, at the instance of rich Chinese half-breeds, to murder all
the Europeans. The priests choose to call this secret society “freemasonry,”
whilst the conspirators themselves style their body the “Katipunan,” which
simply means the “League.” Each member, on being sworn in, made the
“blood compact,” which consists of an incision in the arm or leg whence the
blood was taken to inscribe the roll of brotherhood. The general massacre of
whites was to have taken place on the night of the 20th of August last, but at
almost the last hour a woman came to Father Mariano Gil, the parish priest
of Tondo—a suburb of Manila—and paved the way for a repentant member
of the League to make his full confession of the plot under a promise of
immunity from punishment. The promise was given and the confession
made. An hour afterwards the civil guard was on the track of the principal
leaders of the movement. Three hundred known malcontents were arrested
in a few hours in the capital and adjacent provinces of Bulacan and
Pampanga and further arrests having since been effected daily, the Manila
prisons are overcrowded with suspects and proved delinquents. Room for
more is being made by the periodical shipping off of batches of prisoners to
the Caroline Islands, Mindanao Island, Fernando Po, and other distant
possessions. I have just learnt from the secretary of the military court that at
this moment there are 4,377 individuals awaiting trial by court-martial.
Many of the richest men in the colony, the leaders of Manila society, such
as it is, figure amongst the promoters of this conspiracy. Pedro Rojas, a
wealthy Chinese half-caste and popularly supposed to be the prime mover
of the rebellion, accepted the hospitality of the Governor-General in his
palace only forty-eight hours before the hour destined to witness the general
massacre. The most curious fact—which no one dares to discuss in public—
is that this man, denounced by all, was allowed to quietly leave the colony.
He embarked in a steamer, ostensibly for Spain, but left it at Singapore and
is supposed to be residing in some Asiatic port to watch events. The arch-
agitator, José Rizal, who had been purging himself of his former
misdemeanors by a two years’ banishment to the south, was sent as a
prisoner to Spain, where he was confined in the Catalunian fortress of
Montjuich for a few days and then shipped back to Manila for trial.

It appears that some months ago a deputation of Philippine natives went to


Japan and presented a petition to the Mikado, praying his Majesty to annex
these Islands. The petition was signed, it is said, by 5,000 natives and half-
breeds. The Japanese Government, far from regarding the troubled
condition of Spanish affairs as their opportunity, forwarded the petition to
the Spanish Government, thus the names of 5,000 disaffected persons
became known to the authorities here and were inscribed in their Black
Book. No measures, however, were taken until the storm was about to burst.
Intense excitement prevailed amongst the Europeans as the names of the
300 arrested were disclosed, for they were not mostly individuals known to
us personally or by repute. But since then three months have lingered on,
with the daily arrests of so many men of position that we are prepared to
meet the most startling event with perfect equanimity.
On the 23rd of August the leading newspaper of Manila published a stirring
article, ringing with high patriotism, which concluded with an appeal to the
Spaniards to go en masse to Government House the next day to discuss a
proposal for extraordinary measures. They closed their offices and shops
and went. It looked like a Sunday or a three-cross saint day. The Governor-
General refused to receive them, and fined the newspaper $500, which was
raised at once by public subscription. Indignation was openly expressed. A
cablegram was sent to the Home Government asking for one thousand
troops, etc. The reply came advising the immediate dispatch of 2,000 men,
two millions of cartridges, 6,000 Remington rifles, and the gunboats Isla de
Luzon and Isla de Cuba. Every fortnight, indeed, has brought fresh supplies
of troops, which now make a total in the colony of about 10,000 Spanish
regulars under arms.

On the 26th of August one thousand rebels appeared at Caloocan, four miles
from Manila. They murdered some Chinese and took others prisoners. They
were held back by the gendarmerie until reinforcements of cavalry came
from the capital, but just before the squadron of troops arrived the rebels
fled. The cavalry scoured the district and returned to Manila the next day. I
saw them pass over the Bridge of Spain. There was tremendous excitement.
Groups formed about the Escolta—the principal business street—discussing
the situation. For days no one met another without having some news, real
or imaginary, to disclose. Business was, and still is, much interrupted.
Market people, washmen, traders of all sorts from outside, were afraid to
venture along the approaches to the city. Two days passed—three days
passed, there was really no fresh event. The nervous tension of the amazed
population began to slacken. A reaction set in, and whilst precautions were
discussed and everybody was prepared to say what he should do, the
Caloocan onslaught began to be talked of as a mere filibustering expedition
which would break up at the first smell of powder, and simply go to swell
the ranks of the ever-existing brigand bands. The Governor-General refused
to proclaim martial law. The circumstances were declared to be not
sufficiently grave to warrant that measure being taken, and the public were
settling down into a state of acquiescence with that view when, like a
bombshell, the news of a far more serious raid fell upon Manila. On
Sunday, 30th of August, before daybreak, the rebels again concentrated at
San Juan del Monte, four miles from the city walls. An artilleryman was
murdered, and an attempt was made to seize the powder-magazine, whilst
several of the loyalists were wounded.
Filipinos with Dewey’s Squadron

(Hongkong Telegraph, April 28, 1898.)

The United States Asiatic Squadron left Mirs Bay yesterday afternoon for
the Philippines. It was previously arranged that the fleet should have left on
Tuesday, but the departure was delayed to await the arrival of Mr. O. F.
Williams and several officers who had stayed behind for dispatches. As we
have already intimated, Mr. Williams and the officers were stormstayed on
Tuesday and had to return to Hongkong. * * * * * * Meanwhile Mr.
Rounsevelle Wildman, United States Consul at Hongkong, and Mr.
Williams had had interviews with several of the Philippine rebel chiefs who
were deported to Hongkong, and arrangements were made that one of their
number, J. Alejandrino, should accompany the squadron, and act as the
intermediary between the Americans and rebels. Yesterday morning, about
eight o’clock, Mr. Wildman, Mr. Williams, the United States officers,
newspaper representatives, and J. Alejandrino, accompanied by two rebel
friends, started in the Fame to make their way to the fleet.
A Prediction of 1872

(From the London and China Telegraph of March 22, 1872, retranslated.)
Reviewing the Cavite uprising, it concludes:

“The magnificent resources of these Islands have been neglected too long,
whatever has been done toward their development is due to Anglo-Saxons
whose efforts have been impeded by every possible means through the
indifferent and indolent ideas of the Spanish government. As to the future
government of the Philippines, could our government, or the American, be
induced to accept any responsibility no one would benefit more than they
from a change in affairs so necessary to the due development of the rich and
magnificent products of that soil. Therefore the best thing that the
inhabitants there could do would be to establish their independence under a
republican form of government, making use in this of some of the Anglo-
Saxons who now reside among them.

“The local government would be acting with practical wisdom did it not
oppose a peaceable revolution. That a separation has to take place is
inevitable. The power of Spain to govern distant colonies has disappeared,
never to return.

“We cannot, however, end this article without paying a merited tribute of
respect to the gallant Governor and Captain-General. His proclamation,
which we published in the last issue of the London and China Telegraph, is
worthy of the most exalted patriotism. He had the duty of stifling the
revolution, but now it will be found that its spirit is like the fabled seven-
headed serpent.”
Colophon
Availability

This eBook is for the use of anyone anywhere at no cost and with
almost no restrictions whatsoever. You may copy it, give it away or
re-use it under the terms of the Project Gutenberg License included
with this eBook or online at www.gutenberg.org .

This eBook is produced by the Online Distributed Proofreading Team


at www.pgdp.net .

Scans for this work are available from the Internet Archive (copy 1 ,
2 ).

Since none of the available scan sets include the maps at the end of
this work in sufficient quality, they have been left out of this ebook
edition.

Related Library of Congress catalog page: 17031047 .

Related Open Library catalog page (for source): OL24150481M .

Related Open Library catalog page (for work): OL148709W .

Related WorldCat catalog page: 7424095 .

Encoding

Revision History

2012-12-15 Started.

External References
This Project Gutenberg eBook contains external references. These
links may not work for you.

Corrections

The following corrections have been applied to the text:

Page Source Correction


1, 78, 95,
102 [Not in source] )
2 ecomomic economic
N.A. “( ”(
N.A., 27 ” [Deleted]
13, 72 [Not in source] (
13, N.A.,
29, 70,
70, 117 [Not in source] .
14 ) [Deleted]
21 , [Deleted]
23 thet that
26, 27, 42 [Not in source] “
N.A. Filipipinos Filipinos
29 Pigaffetta Pigafetta
N.A. [Not in source] ’
37 ’ [Deleted]
41 excesssive excessive
42 thereasons the reasons
45 Gorvoran Gorvaran
54 cinammon cinnamon
N.A. manufacfacture manufacture
N.A. ( [Deleted]
82 “ [Deleted]
86 atime a time
88 Ms. MS.
94, 111 [Not in source] ,
95 2.4 foot-shadow 2.4-foot shadow
99 Filippinos Filipinos
103 nealy nearly
103 are are are
108 Schadenburg Schadenberg
108 ] .
110 n in
111 in habit inhabit
112 by in
112 adn and
113 Humangi Humanchi
114 Blumentrit Blumentritt
128 Recolect Recollect
136 Sates States
136 proclmation proclamation
*** END OF THE PROJECT GUTENBERG EBOOK PHILIPPINE
PROGRESS PRIOR TO 1898 ***

Updated editions will replace the previous one—the old editions


will be renamed.

Creating the works from print editions not protected by U.S.


copyright law means that no one owns a United States
copyright in these works, so the Foundation (and you!) can copy
and distribute it in the United States without permission and
without paying copyright royalties. Special rules, set forth in the
General Terms of Use part of this license, apply to copying and
distributing Project Gutenberg™ electronic works to protect the
PROJECT GUTENBERG™ concept and trademark. Project
Gutenberg is a registered trademark, and may not be used if
you charge for an eBook, except by following the terms of the
trademark license, including paying royalties for use of the
Project Gutenberg trademark. If you do not charge anything for
copies of this eBook, complying with the trademark license is
very easy. You may use this eBook for nearly any purpose such
as creation of derivative works, reports, performances and
research. Project Gutenberg eBooks may be modified and
printed and given away—you may do practically ANYTHING in
the United States with eBooks not protected by U.S. copyright
law. Redistribution is subject to the trademark license, especially
commercial redistribution.

START: FULL LICENSE


THE FULL PROJECT GUTENBERG LICENSE
PLEASE READ THIS BEFORE YOU DISTRIBUTE OR USE THIS WORK

To protect the Project Gutenberg™ mission of promoting the


free distribution of electronic works, by using or distributing this
work (or any other work associated in any way with the phrase
“Project Gutenberg”), you agree to comply with all the terms of
the Full Project Gutenberg™ License available with this file or
online at www.gutenberg.org/license.

Section 1. General Terms of Use and


Redistributing Project Gutenberg™
electronic works
1.A. By reading or using any part of this Project Gutenberg™
electronic work, you indicate that you have read, understand,
agree to and accept all the terms of this license and intellectual
property (trademark/copyright) agreement. If you do not agree
to abide by all the terms of this agreement, you must cease
using and return or destroy all copies of Project Gutenberg™
electronic works in your possession. If you paid a fee for
obtaining a copy of or access to a Project Gutenberg™
electronic work and you do not agree to be bound by the terms
of this agreement, you may obtain a refund from the person or
entity to whom you paid the fee as set forth in paragraph 1.E.8.

1.B. “Project Gutenberg” is a registered trademark. It may only


be used on or associated in any way with an electronic work by
people who agree to be bound by the terms of this agreement.
There are a few things that you can do with most Project
Gutenberg™ electronic works even without complying with the
full terms of this agreement. See paragraph 1.C below. There
are a lot of things you can do with Project Gutenberg™
electronic works if you follow the terms of this agreement and
help preserve free future access to Project Gutenberg™
electronic works. See paragraph 1.E below.
1.C. The Project Gutenberg Literary Archive Foundation (“the
Foundation” or PGLAF), owns a compilation copyright in the
collection of Project Gutenberg™ electronic works. Nearly all the
individual works in the collection are in the public domain in the
United States. If an individual work is unprotected by copyright
law in the United States and you are located in the United
States, we do not claim a right to prevent you from copying,
distributing, performing, displaying or creating derivative works
based on the work as long as all references to Project
Gutenberg are removed. Of course, we hope that you will
support the Project Gutenberg™ mission of promoting free
access to electronic works by freely sharing Project Gutenberg™
works in compliance with the terms of this agreement for
keeping the Project Gutenberg™ name associated with the
work. You can easily comply with the terms of this agreement
by keeping this work in the same format with its attached full
Project Gutenberg™ License when you share it without charge
with others.

1.D. The copyright laws of the place where you are located also
govern what you can do with this work. Copyright laws in most
countries are in a constant state of change. If you are outside
the United States, check the laws of your country in addition to
the terms of this agreement before downloading, copying,
displaying, performing, distributing or creating derivative works
based on this work or any other Project Gutenberg™ work. The
Foundation makes no representations concerning the copyright
status of any work in any country other than the United States.

1.E. Unless you have removed all references to Project


Gutenberg:

1.E.1. The following sentence, with active links to, or other


immediate access to, the full Project Gutenberg™ License must
appear prominently whenever any copy of a Project
Gutenberg™ work (any work on which the phrase “Project
Gutenberg” appears, or with which the phrase “Project
Gutenberg” is associated) is accessed, displayed, performed,
viewed, copied or distributed:

This eBook is for the use of anyone anywhere in the United


States and most other parts of the world at no cost and
with almost no restrictions whatsoever. You may copy it,
give it away or re-use it under the terms of the Project
Gutenberg License included with this eBook or online at
www.gutenberg.org. If you are not located in the United
States, you will have to check the laws of the country
where you are located before using this eBook.

1.E.2. If an individual Project Gutenberg™ electronic work is


derived from texts not protected by U.S. copyright law (does not
contain a notice indicating that it is posted with permission of
the copyright holder), the work can be copied and distributed to
anyone in the United States without paying any fees or charges.
If you are redistributing or providing access to a work with the
phrase “Project Gutenberg” associated with or appearing on the
work, you must comply either with the requirements of
paragraphs 1.E.1 through 1.E.7 or obtain permission for the use
of the work and the Project Gutenberg™ trademark as set forth
in paragraphs 1.E.8 or 1.E.9.

1.E.3. If an individual Project Gutenberg™ electronic work is


posted with the permission of the copyright holder, your use and
distribution must comply with both paragraphs 1.E.1 through
1.E.7 and any additional terms imposed by the copyright holder.
Additional terms will be linked to the Project Gutenberg™
License for all works posted with the permission of the copyright
holder found at the beginning of this work.

1.E.4. Do not unlink or detach or remove the full Project


Gutenberg™ License terms from this work, or any files
containing a part of this work or any other work associated with
Project Gutenberg™.

1.E.5. Do not copy, display, perform, distribute or redistribute


this electronic work, or any part of this electronic work, without
prominently displaying the sentence set forth in paragraph 1.E.1
with active links or immediate access to the full terms of the
Project Gutenberg™ License.

1.E.6. You may convert to and distribute this work in any binary,
compressed, marked up, nonproprietary or proprietary form,
including any word processing or hypertext form. However, if
you provide access to or distribute copies of a Project
Gutenberg™ work in a format other than “Plain Vanilla ASCII” or
other format used in the official version posted on the official
Project Gutenberg™ website (www.gutenberg.org), you must,
at no additional cost, fee or expense to the user, provide a copy,
a means of exporting a copy, or a means of obtaining a copy
upon request, of the work in its original “Plain Vanilla ASCII” or
other form. Any alternate format must include the full Project
Gutenberg™ License as specified in paragraph 1.E.1.

1.E.7. Do not charge a fee for access to, viewing, displaying,


performing, copying or distributing any Project Gutenberg™
works unless you comply with paragraph 1.E.8 or 1.E.9.

1.E.8. You may charge a reasonable fee for copies of or


providing access to or distributing Project Gutenberg™
electronic works provided that:

• You pay a royalty fee of 20% of the gross profits you derive
from the use of Project Gutenberg™ works calculated using the
method you already use to calculate your applicable taxes. The
fee is owed to the owner of the Project Gutenberg™ trademark,
but he has agreed to donate royalties under this paragraph to
the Project Gutenberg Literary Archive Foundation. Royalty
payments must be paid within 60 days following each date on
which you prepare (or are legally required to prepare) your
periodic tax returns. Royalty payments should be clearly marked
as such and sent to the Project Gutenberg Literary Archive
Foundation at the address specified in Section 4, “Information
about donations to the Project Gutenberg Literary Archive
Foundation.”

• You provide a full refund of any money paid by a user who


notifies you in writing (or by e-mail) within 30 days of receipt
that s/he does not agree to the terms of the full Project
Gutenberg™ License. You must require such a user to return or
destroy all copies of the works possessed in a physical medium
and discontinue all use of and all access to other copies of
Project Gutenberg™ works.

• You provide, in accordance with paragraph 1.F.3, a full refund of


any money paid for a work or a replacement copy, if a defect in
the electronic work is discovered and reported to you within 90
days of receipt of the work.

• You comply with all other terms of this agreement for free
distribution of Project Gutenberg™ works.

1.E.9. If you wish to charge a fee or distribute a Project


Gutenberg™ electronic work or group of works on different
terms than are set forth in this agreement, you must obtain
permission in writing from the Project Gutenberg Literary
Archive Foundation, the manager of the Project Gutenberg™
trademark. Contact the Foundation as set forth in Section 3
below.

1.F.

1.F.1. Project Gutenberg volunteers and employees expend


considerable effort to identify, do copyright research on,
transcribe and proofread works not protected by U.S. copyright
law in creating the Project Gutenberg™ collection. Despite these
efforts, Project Gutenberg™ electronic works, and the medium
on which they may be stored, may contain “Defects,” such as,
but not limited to, incomplete, inaccurate or corrupt data,
transcription errors, a copyright or other intellectual property
infringement, a defective or damaged disk or other medium, a
computer virus, or computer codes that damage or cannot be
read by your equipment.

1.F.2. LIMITED WARRANTY, DISCLAIMER OF DAMAGES - Except


for the “Right of Replacement or Refund” described in
paragraph 1.F.3, the Project Gutenberg Literary Archive
Foundation, the owner of the Project Gutenberg™ trademark,
and any other party distributing a Project Gutenberg™ electronic
work under this agreement, disclaim all liability to you for
damages, costs and expenses, including legal fees. YOU AGREE
THAT YOU HAVE NO REMEDIES FOR NEGLIGENCE, STRICT
LIABILITY, BREACH OF WARRANTY OR BREACH OF CONTRACT
EXCEPT THOSE PROVIDED IN PARAGRAPH 1.F.3. YOU AGREE
THAT THE FOUNDATION, THE TRADEMARK OWNER, AND ANY
DISTRIBUTOR UNDER THIS AGREEMENT WILL NOT BE LIABLE
TO YOU FOR ACTUAL, DIRECT, INDIRECT, CONSEQUENTIAL,
PUNITIVE OR INCIDENTAL DAMAGES EVEN IF YOU GIVE
NOTICE OF THE POSSIBILITY OF SUCH DAMAGE.

1.F.3. LIMITED RIGHT OF REPLACEMENT OR REFUND - If you


discover a defect in this electronic work within 90 days of
receiving it, you can receive a refund of the money (if any) you
paid for it by sending a written explanation to the person you
received the work from. If you received the work on a physical
medium, you must return the medium with your written
explanation. The person or entity that provided you with the
defective work may elect to provide a replacement copy in lieu
of a refund. If you received the work electronically, the person
or entity providing it to you may choose to give you a second
opportunity to receive the work electronically in lieu of a refund.
If the second copy is also defective, you may demand a refund
in writing without further opportunities to fix the problem.

1.F.4. Except for the limited right of replacement or refund set


forth in paragraph 1.F.3, this work is provided to you ‘AS-IS’,
WITH NO OTHER WARRANTIES OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO WARRANTIES OF
MERCHANTABILITY OR FITNESS FOR ANY PURPOSE.

1.F.5. Some states do not allow disclaimers of certain implied


warranties or the exclusion or limitation of certain types of
damages. If any disclaimer or limitation set forth in this
agreement violates the law of the state applicable to this
agreement, the agreement shall be interpreted to make the
maximum disclaimer or limitation permitted by the applicable
state law. The invalidity or unenforceability of any provision of
this agreement shall not void the remaining provisions.

1.F.6. INDEMNITY - You agree to indemnify and hold the


Foundation, the trademark owner, any agent or employee of the
Foundation, anyone providing copies of Project Gutenberg™
electronic works in accordance with this agreement, and any
volunteers associated with the production, promotion and
distribution of Project Gutenberg™ electronic works, harmless
from all liability, costs and expenses, including legal fees, that
arise directly or indirectly from any of the following which you
do or cause to occur: (a) distribution of this or any Project
Gutenberg™ work, (b) alteration, modification, or additions or
deletions to any Project Gutenberg™ work, and (c) any Defect
you cause.

Section 2. Information about the Mission


of Project Gutenberg™
Project Gutenberg™ is synonymous with the free distribution of
electronic works in formats readable by the widest variety of
computers including obsolete, old, middle-aged and new
computers. It exists because of the efforts of hundreds of
volunteers and donations from people in all walks of life.

Volunteers and financial support to provide volunteers with the


assistance they need are critical to reaching Project
Gutenberg™’s goals and ensuring that the Project Gutenberg™
collection will remain freely available for generations to come. In
2001, the Project Gutenberg Literary Archive Foundation was
created to provide a secure and permanent future for Project
Gutenberg™ and future generations. To learn more about the
Project Gutenberg Literary Archive Foundation and how your
efforts and donations can help, see Sections 3 and 4 and the
Foundation information page at www.gutenberg.org.

Section 3. Information about the Project


Gutenberg Literary Archive Foundation
The Project Gutenberg Literary Archive Foundation is a non-
profit 501(c)(3) educational corporation organized under the
laws of the state of Mississippi and granted tax exempt status
by the Internal Revenue Service. The Foundation’s EIN or
federal tax identification number is 64-6221541. Contributions
to the Project Gutenberg Literary Archive Foundation are tax
deductible to the full extent permitted by U.S. federal laws and
your state’s laws.

The Foundation’s business office is located at 809 North 1500


West, Salt Lake City, UT 84116, (801) 596-1887. Email contact
links and up to date contact information can be found at the
Foundation’s website and official page at
www.gutenberg.org/contact
Welcome to our website – the ideal destination for book lovers and
knowledge seekers. With a mission to inspire endlessly, we offer a
vast collection of books, ranging from classic literary works to
specialized publications, self-development books, and children's
literature. Each book is a new journey of discovery, expanding
knowledge and enriching the soul of the reade

Our website is not just a platform for buying books, but a bridge
connecting readers to the timeless values of culture and wisdom. With
an elegant, user-friendly interface and an intelligent search system,
we are committed to providing a quick and convenient shopping
experience. Additionally, our special promotions and home delivery
services ensure that you save time and fully enjoy the joy of reading.

Let us accompany you on the journey of exploring knowledge and


personal growth!

textbookfull.com

You might also like