How to be a Web Developer: A Complete Beginner's

Guide on What to Know and Where to Start 1st

Edition Radu Nicoara install download

https://ebookmeta.com/product/how-to-be-a-web-developer-a-
complete-beginners-guide-on-what-to-know-and-where-to-start-1st-
edition-radu-nicoara-2/

Download more ebook from https://ebookmeta.com

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

How to be a Web Developer: A Complete Beginner's Guide

on What to Know and Where to Start 1st Edition
Radu Nicoara

https://ebookmeta.com/product/how-to-be-a-web-developer-a-
complete-beginners-guide-on-what-to-know-and-where-to-start-1st-
edition-radu-nicoara/

How to Win Client Business When You Don't Know Where to

Start: A Rainmaking Guide for Consulting and
Professional Services 1st Edition Fletcher

https://ebookmeta.com/product/how-to-win-client-business-when-
you-dont-know-where-to-start-a-rainmaking-guide-for-consulting-
and-professional-services-1st-edition-fletcher/

How to be a complete bastard Edmondson

https://ebookmeta.com/product/how-to-be-a-complete-bastard-
edmondson/

NKJV Study Bible Full Color Thomas Nelson

https://ebookmeta.com/product/nkjv-study-bible-full-color-thomas-
nelson/
A Fractured Infinity 1st Edition Nathan Tavares

https://ebookmeta.com/product/a-fractured-infinity-1st-edition-
nathan-tavares-4/

Sensors and Probes for Bioimaging 1st Edition Young-Tae

Chang

https://ebookmeta.com/product/sensors-and-probes-for-
bioimaging-1st-edition-young-tae-chang/

Companion to the AISC steel construction manual vol 2

Design Tables 15th Edition American Institute Of Steel
Construction

https://ebookmeta.com/product/companion-to-the-aisc-steel-
construction-manual-vol-2-design-tables-15th-edition-american-
institute-of-steel-construction/

Teacher of the Year Teachers in Love 1 1st Edition M A

Wardell

https://ebookmeta.com/product/teacher-of-the-year-teachers-in-
love-1-1st-edition-m-a-wardell/

Deterministic Numerical Modeling of Soil Structure

Interaction 1st Edition Stephane Grange

https://ebookmeta.com/product/deterministic-numerical-modeling-
of-soil-structure-interaction-1st-edition-stephane-grange/
Research Methods The Basics 3rd Edition Nicholas
Walliman

https://ebookmeta.com/product/research-methods-the-basics-3rd-
edition-nicholas-walliman/
Radu Nicoara

How to be a Web Developer

A Complete Beginner’s Guide on What to Know and
Where to Start
Radu Nicoara
Berlin, Germany

ISBN 978-1-4842-9662-2 e-ISBN 978-1-4842-9663-9

https://doi.org/10.1007/978-1-4842-9663-9

© Radu Nicoara 2023

This work is subject to copyright. All rights are solely and exclusively
licensed 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.

The use of general descriptive names, registered names, trademarks,

service marks, etc. in this publication does not imply, even in the
absence of a specific statement, that such names are exempt from the
relevant protective laws and regulations and therefore free for general
use.

The publisher, the authors, and the editors are safe to assume that the
advice and information in this book are believed to be true and accurate
at the date of publication. Neither the publisher nor the authors or the
editors give a warranty, expressed or implied, with respect to the
material contained herein or for any errors or omissions that may have
been made. The publisher remains neutral with regard to jurisdictional
claims in published maps and institutional affiliations.

This Apress imprint is published by the registered company APress

Media, LLC, part of Springer Nature.
The registered company address is: 1 New York Plaza, New York, NY
10004, U.S.A.
Any source code or other supplementary material referenced by the
author in this book is available to readers on GitHub
(https://github.com/Apress). For more detailed information, please
visit https://www.apress.com/gp/services/source-code.
Table of Contents
Part I: Getting Started
Chapter 1:​Introduction
The Purpose of the Book
Why Would You Want to Code?​
Common Misconceptions
The Downsides
Why Listen to Me?​
What Will You Need?​
What Is Web Development?​
What You Will Do at Work
What Is the Proper Attitude?​Impostor Syndrome
How to Find the Things That You Need
How Does a Web Application Work?​
Frontend, Backend, and the Cloud
Classic Websites vs Single Page Applications
The Talk About Programming Languages
Summary
Part II: The Tech Stack
Chapter 2:​SQL Basics
Installing MySQL
Database Structure and Creation
SQL Selects
Homework
SQL Functions
SQL Joins
 Indexes
Homework (5-15 Mins)
Summary
Chapter 3:​HTML and CSS
HTML
CSS
Bootstrap
Homework
Summary
Chapter 4:​GraphQL and JavaScript
GraphQL
JavaScript
Functional Programming
Constants and Variables
Functions
Shorthand if Statements
Arrays
Destructuring and Spread
Promises
Summary
Chapter 5:​The Backend
The Setup (Optional)
Homework
Your First Query
Setting Up the ORM
Homework
 Your First Mutation
Homework
Summary
Chapter 6:​The Frontend
The Figma UX/​UI
The Setup
The Static Page
Creating the Popup
Homework (30-40 Min)
Creating React Components
Homework (10 Min)
Linking the Backend and the Frontend Using Apollo
Using Mutations to Create a Customer
Homework
Summary
Chapter 7:​Going Fullstack
The Design Ticket
The New Feature Ticket
Homework
Summary
Chapter 8:​Automated Testing
Testing Concepts
Unit Testing
Test Driven Development
Integration Tests
End-to-End Testing
 Homework
Summary
Chapter 9:​Other Frameworks and Technologies
Creating a Login System
Login Systems
Cookies
MD5
Other Technologies You Should Know About
Open Source
GIT
Azure/​Amazon Cloud Providers
Docker
NoSQL
JIRA
WordPress
Summary
Part III: Landing Your First Role
Chapter 10:​Your First Job
Creating a Portfolio
Networking and Volunteering
Freelancing
Writing a Good Resume
Finding and Applying for a Job
Interviews
Summary
Chapter 11:​Working on a Team
 Team Structure
The Lifecycle of a Feature
How You Develop
Summary
Chapter 12:​Project Management Methods
The Agile Methodology
Summary
Part IV: In Summary
Chapter 13:​Conclusions
References
Index
About the Author
Radu Nicoara
has worked in web development for
more than ten years. Being self-taught,
he knows how difficult it is to know what
to study and what practical knowledge
you need to get started. Because of this,
he has spent the past five years
organizing and teaching programming
courses in Berlin, where he lives and
works as a senior web engineer.
About the Technical Reviewer
Kenneth Fukizi
is a software engineer, architect, and
consultant with experience in coding on
different platforms internationally. Prior
to dedicated software development, he
worked as a lecturer for a year and was
the head of IT at different organizations.
He has domain experience working with
technology for companies in a wide
variety of sectors. When he’s not
working, he likes reading up on
emerging technologies and strives to be
an active member of the software
community.
Part I
Getting Started
© The Author(s), under exclusive license to APress Media, LLC, part of Springer
Nature 2023
R. Nicoara, How to be a Web Developer
https://doi.org/10.1007/978-1-4842-9663-9_1

1. Introduction
Radu Nicoara1
(1) Berlin, Germany

Welcome to your journey into the world of web development! Since you
picked up this book, you must have some interest in the domain. That
means that you most likely have what it takes to take your first steps in
the fascinating world of programming. This chapter starts with an
exploration of what web development is, how it works, and how you
can be a part of it.
I wrote this book to explain all the things that I wished I knew
before I started along the path of changing my career to web
development. There were a lot of ups and downs and hiccups along the
way, but to this day I enjoy the process and am constantly learning
something new. And I sincerely hope you will as well.

The Purpose of the Book

This book is written for absolute beginners in the realm of web
development. I plan to teach you about all the essential skills needed
for modern-day web development, the way that it is set up in the
largest and most established companies. What I want to do in this book
is take you from a full beginner and teach you the skills needed to begin
your first week as a newly hired web developer. That means showing
you the ins and outs of the various skills needed for software
developers to be good at their jobs. These skills are, of course, how to
code, where to start, and how to think, but also what to do when you
are stuck, the way that development teams work, and the various
terminologies and technologies used in modern-day web development.
The main plan is that you’ll learn to build a Customer Relationship
Manager (CRM) application using a modern technology stack. This is an
application in which you store contact data about your customers, and
some data about the contracts that you have with them.
Building this app will enable you to learn about the topics in
context, so that you can avoid having to learn abstract concepts, which
are difficult to understand without a concrete example. Going into web
development myself, I often found the topics confusing and honestly a
bit boring, just to have it all cleared up when I started actually
implementing them. Therefore, this book takes a bit of a reverse
approach, where you’ll implement concepts while you learn them.
But of course, feel free to adapt the project to whatever you feel like
doing. Hopefully, by the end of the book, you will have a fully working
program, and enough knowledge to be able to start some other
personal projects that you have, or even start applying for jobs.

Why Would You Want to Code?

Coding is a tool that can be used as is, or it can help you get better
results at whatever else you have a passion for. Imagine programming
as a life skill. Similar, for example, to knowing a foreign language or
knowing how to drive. You can continue doing other things in life, but a
lot more doors open along the way when you have the right skillset.
Plus, coding has the added benefit of always being able to offer you a
well-paying job. Most of the time it is enough to leave your CV privacy
set to public in order to start receiving job offers.
The most important part for me is the following: I wrote this book
as an overview about what web development is, and as an introduction
to the career that I chose. It is a guided tour into what coding is and
what it requires. The main purpose of the book, however, is for you to
have fun and learn some new things.
I condense three years of computer science courses into a single
book, so I do skip a number of steps. Feel free to research them on your
own time while reading this book, if they spark your curiosity. What I
aim to do by the end of our time together is bring you to a level where
you are good enough to start developing web applications on your own.
 I started the same way. Just with an overview, and then slowly I got
deeper and deeper into various topics. That helped me take my first
steps and build my first websites. But one thing I noticed in the
beginning was that I had a lot of misconceptions about what a
programming job actually entailed. The next section takes a brief look
at these misconceptions.

Common Misconceptions
There are a lot of things that people get wrong about programming in
general, and they revolve mostly around what a programming career
actually means. That is, what you actually do at work.
You must be a whiz at math. In fact, you do not need to be good at
math in order to be a good programmer. I myself was pretty terrible at
math, especially the more complex parts of mathematics, like calculus.
You do not need those things. The only important part is that you can
think logically.
Then, despite what many might say, programming is not boring and
it does not require you to sit in front of a screen all day. In order to be a
good programmer, maybe you just need to code. But to be a great
programmer, you need to build systems that people actually enjoy using
and find valuable. That by definition involves a lot of discussions with
user focus groups, collaboration, and generally being open and talking
to other people. Only this way can you be of great value to your project
and your company. If you do not enjoy talking to people, a programming
career will still fit you, but the extent of how far it can go, and how
productive you can become in it, will unfortunately be limited. You can’t
hide in the backroom and ignore everyone. You need your team’s help,
and they need yours.
That being said, of course, you will spend a lot of time with your
headphones on, focusing on your task, as well as a lot of time working
from home and doing your job. But in order to be great, you need a
decent amount of soft skills and a healthy inclination toward human
interaction.
On another note, you also do not need to memorize all the
commands, and you definitely don’t need to know everything by heart.
Nobody does. The main characteristic that makes you a developer is
being able to split complex tasks into simple structures, which you then
put into if/else statements and for loops. An example of such a logic
structure, written in plain English, is: If the user’s account is disabled,
reject the login process. Or: To each user in the database, send an email.
Imagine programming a piece of code that instructs a car to drive.
You have access to a machine that can only understand left, right,
accelerate, and break. With those four simple commands, you can take a
round-the-world trip. It is the same with when an app. You just need to
know the basic commands.
You are too old/young for this. There is no age that makes you any
better or any worse at programming. This is not sports. As long as you
have some soft skills, and you can learn a bit of coding, you are needed
in the market. That is regardless of your age, sex, religion, or anything
else. I would argue that programming is one of the most inclusive
career paths, because at the end of the day, all that matters is how good
your code is, and how much it helps your end users do the things that
they want to do.
You need a degree in computer science. There is also a great need for
people who have studied other fields. You don’t need to get another
degree. Programming in itself is only a means to an end. At the end of
the day, you will build software that some people will need to perform
their jobs and hopefully will also find useful and intuitive. If you have
knowledge and experience in the field that you are building software
for, you will be almost irreplaceable. I once worked with a young lady
who, before switching to IT, worked in Human Resources. Since we
were building software exactly for this purpose, she quickly became the
go-to person on the project, and the most knowledgeable among us all.
So the more diverse your experience is, the more you can help.

The Downsides
Since I have talked about the interesting parts of the job, and the
common misconceptions, it’s only right to discuss the potential
negative sides of a programming career as well.
You will always have to learn. Programming is one of those jobs
where it is very easy to get stuck out of the loop. There are always new
languages, new frameworks, and new ways of doing things. I would say
that every two-three years you will change one of the ways in which
you are working. Whether that is the frontend, the backend, the
architecture of your app, or where and how you are deploying,
programming means always staying on top of the wave. That might get
tiring at times and can have the potential to erode your self-confidence.
This also means that you will always find somebody who is better
than you. This comparison applies to everyone in the field. IT is such a
large domain, that there cannot be a single person who knows
everything.
You most likely still need some degree. Although it is not absolutely
required, web development is one of those jobs where having a degree
will open many doors for you. But the up side is, as mentioned, you do
not necessarily need to have one in computer science in order to be a
top candidate. A degree in any STEM (Science, Technology, Engineering,
Mathematics) field is usually just as good, and a degree in a more
humanistic domain will still be an advantage. And yes, it is true that you
can still be successful even without a degree. But having one will make
things significantly easier.
Staying on the topic of hiring, although there is a large amount of
open positions in the field, there is also a lot of competition. Maybe not
as much as in other fields, like music or HR, but you definitely won’t be
able to simply march into an interview from your first job application.
You will still need a bit of patience to find a nice job. This, however,
tends to be less of a problem as you progress throughout your career.
After having six-seven years of experience, you will find that you don’t
even need to apply, as you will get unsolicited job offers on a regular
basis.
There are no guarantees. Just because you get into a domain like IT,
or no matter the specialty that you choose, there is no guarantee that
you will automatically earn a good salary, or that you will always find a
remote job. It might be significantly easier, but you will still have to
fight for it. There is also no certification, no degree, and no credentials
that will guarantee a job. You need to be prepared to send about 100
job applications, and go through at least 10 interviews, before you get
an offer. If this happens, just know that you are not doing anything
wrong. You are simply competing against a large number of people. And
the better the job, the bigger the competition. Including the
international one.
You will probably need to start small. Whether that is working in a
startup, or starting from the first level, you will be a junior for a few
years. That might be a bit frustrating, especially if you are switching
careers from a domain where you are already relatively established. I
discuss this a bit more in the later chapters, but you will most likely not
be starting directly into a well-paid job.
I do not want to discourage you in any way by saying this. I just
want to set realistic expectations about the current state of affairs in
the IT job market. If you manage to get through the rough part, you will
find that at the end you will have a fun, well paid career, with good
prospects into the future. This book is written to guide you along the
way.

Why Listen to Me?

I was first exposed to programming in college, out of a curiosity that I
had. I wanted to know how passwords were stored, so that when I
come back to a website, they remembered me. I started learning more
and more about it on YouTube and created some fun websites. This lead
later to an offer to work as a web developer full time. It was the first
time that it had crossed my mind that such a job existed. At that job is
where I learned all the programming concepts in a more serious
manner.
However, the one thing that I lacked was structure. As a result, I
ended up learning a lot more things than were necessary in order to do
my job. This of course, over time, helped me become a better and more
knowledgeable developer. But I wished that I had somebody to show
me what was worth learning and what not, so that I could get to where I
wanted to go faster.
In the meantime, I have gathered more than 12 years of experience
in the domain of web development, and as a result, I decided to write
this book. It’s a guide about what is worth your while learning, and
what you can skip until you get more experience. You might end up
loving programming, or you just might not understand what the fuss is
all about. All that I want from you is that you give it an honest try. The
best thing you can do in life is explore new things.

What Will You Need?

The most important thing that you need in order to start developing is
your curiosity. Since you decided to pick up this book, you already have
crossed this particular milestone. Along the years, you will keep
encountering new technologies, new ways of doing things, and new
frameworks. Curiosity about them will keep you motivated to stay up to
speed.
There is a saying that development is about slowly failing at your
task until it finally works. So besides curiosity, patience to not give up is
another important virtue.
Other than that, don’t be afraid to try new things. We are all
beginners in something, when it comes to life in general, and
programming is no different. Every couple of years, technologies tend
to change, and better ways of doing things emerge. Therefore, all of us,
no matter how senior we are, have to learn new concepts and new
languages. What makes things easy is that all of these languages are
made by humans, for humans. So if they did a good job on their side, it
is pretty easy to get the hang of things.
Other than the right attitude, to follow this book, you need:
A computer with Internet access. It does not have to be a good
computer—an old laptop will do just fine. But the Internet
connection is a must.
Install VSCode. This is a free text editor that you can download from
code.visualstudio.com.
Install Node.js from nodejs.org. This will be your main way of
interacting with the code.
Install XAMPP from apachefriends.org. You need this for the
database layer.
That is pretty much it. For most of these installations, just follow the
Next ➤ Next pattern, but if you hit any snags, a quick text search on
your favorite engine will solve most of your issues.
What Is Web Development?
This section looks at what exactly web development is. It covers the
parts of a web application and explains how it is set up and developed.
That means how everything works, as well as what you need to do as a
developer to get there. In addition to this, this section discusses what a
web developer job involves.

What You Will Do at Work

This section starts by covering what exactly a programmer does at
work, so that you have a better idea what to expect if you choose to go
down this path.
As the name suggests, web development means creating web
applications. The most difficult part of this process is the initial setup. I
estimate that 60 percent of the hard work goes into a project even
before you have your first response on a web page. After that, you have
a working example of a feature, which you generally can just copy from.
The initial setup is also sometimes called POC (proof of concept),
meaning that you get everything to work just enough so that you can
have a small demo. From this point, you start setting up your entire
web application. Because of this, the initial setup is usually done by
people with a bit more experience, since it is a relatively difficult step.
I will, of course, go through setting up everything in the book’s
project and explain how all the pieces fit together. But in a corporate
environment, in the vast majority of the cases, these parts will already
be set up. This means that the most common requests that reach your
team look like this:
We need to create a way for our users to leave comments.
We need additional fields in our online form.
Just as we save data on page X about our customers, we need a Y
page to save data about our suppliers.
When I click this, I want this other thing to pop up.
After I save my data, I want to get a notification that lets me know if
the operation was successful.
Write a test that checks if this user has access to this part of the app.
 I do not mean to trivialize the type of requests that you will receive,
but these examples show you the types of tasks to expect at work. Of
course, the more experience you gain, the more you will be included in
the business discussions.
The purpose of this book is simply to familiarize you with the
various building blocks that will enable you to build what you need.

What Is the Proper Attitude? Impostor Syndrome

Programming is at the same time a relatively easy endeavor and a
relatively difficult task. I know this sounds contradictory, but it is true.
This means that, on the one hand, you can easily get into programming
and start building things on your own, but on the other hand, nobody is
an expert at anything.
You will begin a project, figure out that you don’t even know where
to start with a certain thing, begin searching for solutions, try a couple
until it works, and then 15 minutes later, you will have to start Googling
all over again.
Even after all of these years, I still would have significant difficulties
doing any work without searching for even the most trivial of examples
every five minutes.
For that reason, I want to convince you of the following points:
Trust yourself. Just like long distance running, the key is not to give
up, but to go at your own pace. As long as you are ambitious enough
to go through a page of search results and continue searching, you
are more than half the way through to becoming a programmer.
Don’t compare your speed with other people’s. We all are good at
different things, and it is exactly this diversity that makes our teams
strong and resilient. Everyone will feel like an impostor sometimes.
From beginners working in a startup, to senior engineers working at
well established companies, we all sometimes doubt ourselves. Just
keep on going and have fun doing it.

How to Find the Things That You Need

Searching for what you need is the most important part of being a
programmer. There is no one person who knows everything by heart,
for the simple fact that languages and frameworks keep changing and
evolving. That is why a good searching ability is an integral part of your
day-to-day job. Although most of it involves simply searching around
the web, here are some tips on how to do it better:
If your questions are about a certain programming language, or how
to correctly use any type of operation within it, try
W3Schools.com. I personally use it relatively often, and I have to
say that it is one of the best refreshers or crash courses into any
language, be it PHP, HTML, JavaScript, or React. In fact, I advise you to
look at this website either way, as it is a great resource for learning.
If you have general questions about how to implement a feature, how
the setup should be done, where to put your files, or how to start
your project, try reading the documentation of the language or the
framework that you chose. Out of all the technologies that you’ll use
in this book, React’s documentation is pretty much on point, easy to
follow, and also easy to understand.
If you have a specific question or find a specific error, simply Google
the error that you receive. Searches like: “Error: cannot cast string to
integer” or “How to parse an array in JavaScript” will most likely take
you to Stack Overflow, probably the world’s biggest online
programming community. In my day-to-day job, I perform searches
like these at least ten times a day.
About once or twice a year I stumble upon an error that I cannot
find on Stack Overflow. This leaves me with two options: either I try to
fix it myself, or I post a question on Stack Overflow and wait for
someone to help me. But bumping into a new error is highly unlikely,
especially at the beginning of your career. Feel absolutely free to search
away. The best programmers are also the best online searchers.

How Does a Web Application Work?

There is a certain procedure that each web page needs to follow, in
order for the data to be transferred from the server to your device and
displayed properly. Figure 1-1 shows a small schematic on how a
normal web page loads.
Figure 1-1 A general web application architecture
Basically, every time that you want to access a web page, you open
your browser and type in the address that you want to visit. This will
make your browser access the server registered for that web address
and perform a so-called handshake. Then the server will take your
request, bundle all the data being sent together by your computer (such
as the full URL path, form data, your cookies, etc.) and decide based on
all of these, what needs to be done with your request.
Once the request is in the hands of the server, it will usually be
handled by the so-called backend. This is the service that is built in
order to interact with the user, usually written in a programming
language like PHP, Java, Python, and so on. If it is the case, this service
will then access the database to retrieve or store additional data
(usernames and passwords) or will try to communicate with other
backend services like Google or PayPal using the APIs provided by the
vendors.
Once the backend service has finished processing your request, it
will pack everything up, usually inside an HTML response, and serve it
back to your browser. This includes the data that was requested, as well
as the data needed for display, such as styles, images, and scripts, which
your browser needs to run on your device in order to interact with you.
These scripts are almost exclusively written in JavaScript, and they
contain logic. For example, when a user clicks the Messages button,
they open a popup window and ask the server to display the latest
messages for this user.

Frontend, Backend, and the Cloud

The frontend is the entire bundle of processes that happen in your
browser once the data has been provided by the server. The first layer
being served is HTML (HyperText Markup Language), which contains
the unformatted data inside your web page, and additionally all the
links to the scripts that are required for proper rendering. Imagine this
layer as the data included inside a Word document. It mostly contains
paragraphs, headers, lists, and various links to images, scripts, and
other pages. An example of HTML website code is the following:

<html>
<head>
<title>CRM Website</title>
<link rel="stylesheet" type="text/css"
href="style.css" />
</head>
<body>
<h1>My Website Header</h1>
</body>
</html>

Once your system loads the HTML, it will execute the next layer,
which is CSS (Cascading Style Sheets), and which holds data about how
the web page should look. This contains properties such as distances
between elements, colors, backgrounds, and so on. For example, the
following code affects all elements with the custom_element class,
but you will learn more about this in the next chapter.

.custom_element {
background-color: black;
}

However, arguably the most important layer is the logic layer itself,
which is JavaScript. It was initially built in plain JavaScript, and it was
later extended by a library called jQuery, which quickly took over as the
preferred way to develop frontend logic. The jQuery library contained a
number of prewritten functions such as hiding and showing elements,
and sending forms. Now, the most commonly used library is React,
which was initially developed by the Facebook team, and which you will
learn in this book. This framework uses JavaScript to monitor the
current state of the page being displayed, and once a certain trigger is
activated (such as a new notification, clicking a button, or new data
coming from the server), it calculates the easiest way to display the
changes, without modifying the entire web page.
The logic layer is responsible for all of the logic inside your page.
For example, going behind the scenes to the server and gathering data
in such a manner that your page does not need to refresh in order to
show the latest data.
The most important part of the JavaScript layer is that it can
generate the other two layers (HTML and CSS) dynamically. That means
that within the execution of your web page on your browser, different
parts of the web page being displayed by your browser will change,
appear, or disappear. Having these abilities led to the one-page
applications (also known as single-page applications or SPAs) that we
currently see all over the Internet. The following code combines HTML
and JavaScript:

// this button will be hidden once you click it

<input type="button" onclick="this.hidden=true"
value="Click to hide"/>

The backend is everything that happens within the server. Once

your browser reaches out to the server, it will start to compile the data
that you want to send back to the browser. This mostly means fetching
some HTML and JS (JavaScript) pages and serving them, or providing
plain data that it has taken from the database and processed
accordingly. This book uses Node.js as the backend language, but, as I
will discuss later, any other option is just as good. This short code
example allows you to connect to the database:

// Connect to the database and pull all customers

import DataBaseConnection from "settings";
const connection = new DataBaseConnection();
const customers = await
connection.manager.find(Customer);
connection.close();
return customers;
Now the question arises: once you finish building your backend,
how do you make it available to other people? Where do you deploy it?
And what is the cloud? In order to answer that, you need to take a trip
20 years into the past, where if you wanted to host a web page, you
would either do it directly on your computer, or if you could afford it,
you would buy a dedicated computer (server) and keep it somewhere
in your basement. However, with time, it became clear that because of
economies of scale, it made a lot more sense to pay somebody a few
bucks a month to go through this hassle for you. We now have vendors
that group thousands of computers into a single building (called a data
center) and sell access to this gigantic network. This is called the cloud.
It’s just basically somebody else’s computer.

Classic Websites vs Single Page Applications

Until about 2010, a web application worked in the following way: you
would go to the landing page of a website, and your browser would
reach the server. The server would then generate a custom web page
already filled in with all of your data and provide it to you (see Figure 1-
2). If you, for example, clicked a link to see your customer’s details, your
browser would navigate away into a new page and the process would
repeat itself.

Figure 1-2 A classic web request

The disadvantage of this approach is that you always had to

navigate away from your web page in order to load data. This could
become a problem, for example, if you were already filling in a data
form to submit to a different department, but you were just missing just
one piece of data. In such an architecture, your best bet was to open a
new tab and start searching for what you needed.
Now you can use the single page application. You now send an initial
browser request to the server, but will receive an empty page. This page
contains the basic skeleton of your web application, which will start to
get rendered. The major difference is where the data comes from. It is
loaded into separate AJAX (Asynchronous JavaScript and XML) calls,
which load your data one by one. Once the data comes back from the
server, the HTML code being rendered by your web page changes
dynamically. This, of course, means that you can have pseudo-separate
pages of your application working in parallel in the same web browser.
Figure 1-3 contains a small schematic of such an application.

Figure 1-3 The schematic of a single page application

The most relevant part of this type of architecture was easy to see
when Facebook changed the messaging system. Before, you needed to
go to a separate tab in order to access Messenger as a standalone
application. But around 2010 they started building Messenger as an
integral part of the experience, so that you could read posts and write
comments while still having the Messenger open inside the same page.
This was all possible because, behind the scenes, your browser can talk
to the Facebook servers without the need for you to refresh the page in
order to see the latest messages.

The Talk About Programming Languages

You will rarely find people to be more opinionated than developers
when they talk about programming languages. This section discusses
them as well, to see what all the fuss is about.
First of all, how different are all these languages? Well, not very
different at all. The most difficult part of programing is learning your
first language, because that is when you learn about data structures,
classes, algorithms, loops, and so on. After that point, switching to a
new programming language is pretty easy and can reasonably be
achieved within a few days.
For the frontend, you do not have a choice in languages, but you do
have a choice in frameworks. HTML, CSS, and JavaScript are the only
standardized way to interact with all of the possible browsers, so you’ll
use these languages as they are. However, for CSS one of the most used
frameworks is Bootstrap, which offers you a set of prebuilt components
and styles, like menus, image formatting, alerts, and so on.
For JavaScript, up until a few years ago, jQuery was the most
commonly used framework, being very well attuned to creating static
pages with some internal functionality. However, because of its lacking
support for single page applications, its popularity has waned. Most
new websites are built in React, a framework used by companies like
Facebook, Netflix, Dropbox, and Reddit, to name a few. The advantage of
React is that it is a powerful framework that enables you to easily build
and reuse big chunks of your code. The downside however is that it is
notoriously difficult to learn. Alternatives are Vue.js and Angular, but
they all use similar logic. See Figure 1-4.

Figure 1-4 Current use of frontend frameworks [1]

As you can see in Figure 1-5, the backend is where everything

changes. Because the server is completely under control of the
developer, the programming languages that you can use are endless.
However, the most commonly used languages for the backend are PHP,
JavaScript, Java, and Python.

Figure 1-5 Current backend language use. Some projects contain multiple
languages [2]
The most popular backend language at the moment is JavaScript,
and you have to use JavaScript for the frontend either way. Since you
already have to know it, why not use it for your backend as well?
That being said, you will use JavaScript for this project of creating a
Customer Relationship Management system, both for the frontend and
the backend. For the frontend, you will use React, as it is the most
popular platform by far, and for backend, you will use Node.js, which is
the server-side framework for JavaScript, for the same reason.

Summary
A web application is made up of multiple components. The “frontend”
represents everything that runs on the visitor’s device. That is the text
being displayed, and the way the user interacts with the data being sent
back and forth. The “backend” is represented by everything that
happens on the server. That is data manipulation and storage,
authentication, and processing.
As for the languages, they do not matter that much, but you will
stick with JavaScript in this book for the sake of simplicity and of
learning languages that are valuable in the market.
Part II
The Tech Stack
© The Author(s), under exclusive license to APress Media, LLC, part of Springer
Nature 2023
R. Nicoara, How to be a Web Developer
https://doi.org/10.1007/978-1-4842-9663-9_2

2. SQL Basics
Radu Nicoara1
(1) Berlin, Germany

SQL is one of the most important languages when it comes to finding a

job. I have had multiple jobs where my day-to-day work involved
writing complex SQL scripts. So learning SQL means acquiring one of
those skills that takes time to master, but opens a large number of
doors.
This chapter teaches you most of what you need to know about SQL.
It takes approximately 2-3 hours in total, but it should take you from a
full beginner to a mid-user level. I have been in charge of interviewing
potential candidates for SQL positions, and I will show you all that you
need to know in order to pass the technical tests.
Imagine you are building a new web app. When it comes to storing
data on your website long-term, you have to use a database. Imagine
the database as an Excel file, where you can use language to interact
with the data. SQL stands for Structured Query Language, and it is a
standardized way of manipulating and interacting with data. There are
many types of databases on the market, including MySQL, Oracle, and
Microsoft’s SQL Server. The difference between all of the offers is
minimal in terms of day-to-day use. In this project, you will use MySQL,
as it is easy to install and free to use.
SQL is a standard language, so anything that you learn about MySQL
will usually apply to any other database that you might use. MySQL
enables you to create tables, insert, update, and retrieve data, and
delete entries.
 Note There are also non-SQL solutions that enable you to store
non-structured data. That means that the data being stored does not
need to adhere to a predefined structure, but instead it can hold all
types of objects, containing all types of fields. However, only 16
percent of applications use this approach, as opposed to the 79
percent that use SQL. This chapter focuses on the majority of use
cases.

One powerful resource for this module that I recommend is

w3schools.com/sql, where you can find the vast majority of the
resources that I talk about here, in a simple and condensed form. I have
already mentioned this website, and it is for a good reason. It is an
excellent resource for brushing up on your skills in any language.

Installing MySQL
MySQL comes in a bundle called XAMPP. You can download it from
apachefriends.org, and then you have to install the package. Once
you install it, the command interface will appear, where you need to
start the Apache and MySQL services, as shown in Figure 2-1.
Figure 2-1 Admin command interface of XAMPP
Let’s look at what you see in the command interface, and what every
process that you start up does:
Apache is a web server that enables you to interact with the
database using a user interface (UI). It basically compiles HTML and
PHP code and provides it to the web browser. If you were to learn
PHP, you would do it using the Apache service as well.
MySQL is a service that runs in the background. It listens on port
3306 on your computer (this will matter later), and you can normally
interact with it using the command line. But since that is really
cumbersome, you will be using the UI in these examples.
Once the services start, access the following URL from your
browser: http://localhost/phpmyadmin. This will bring up the
UI, and from this moment on, you can start learning SQL (see Figure 2-
2).

Figure 2-2 UI of phpMyAdmin tool

Database Structure and Creation

First start with the concept of a database itself. What is a database? In a
fundamental way, a database is simply a collection of tables. The reason
that people organize tables in databases, and not just lay them around,
is the same reason they put files into folders. It brings structure to the
entire project, enables hosting multiple apps on a single server,
facilitates the split of access, and it also avoids issues with conflicting
names.
Now create a new database called CRM. In order to do that, just go to
the Database tab, as shown in Figure 2-3, and create a new one.

Figure 2-3 Location of the Database tab in the phpMyAmin UI

After saving the database, the system will prompt you to start
creating tables. But before you do that, you need to create a logical data
scheme for your application. Based on that, you can create the database
layer as well, and then build the backend on top of it, and finally, the
frontend.
With that in mind, this section starts with a general overview of the
types of fields you can choose for a table column. Here are the most
commonly-used ones:
Integer. This holds whole numbers like 1,2,3… It is also the default
used for the ID that each entity receives, as it can be auto-
incremented.
 Varchar. A variable character is the data type you use for short
strings like email addresses, passwords, and names.
Text. You use this for long text data, like comments or paragraphs.
The upside of this type is that it can hold a large amount of data, but
the downside is that it is difficult to search through, and as a result it
should only be used for storage.
Date and DateTime. This is data that you use for events, like
creation date, last login, and so on.
Boolean. This holds data of type true or false, and is mostly used
for status checks, such as whether a user was deleted.
Now that you have seen the most used data types, you have to adapt
them into your structure. Which begs the question—what kind of data
exactly do you want to save into your CRM system? This is exactly the
point where building the web application starts—by sketching the
database and the relationships.
I suggest that you start by having some customers—the companies
that you have contracts with. Then a few contacts will be linked to your
customers, to know exactly who to call if you need anything from one of
your customers. And finally, a place to store the users who will log into
the system, together with their data and their passwords.
This data scheme will look something like Figure 2-4.

Figure 2-4 Tables in the database

You will have a list of users that can log in, then a list of customers,
and for each customer, a list of contacts. Also, a single contact can be
assigned to multiple customers, so this relationship goes both ways.
One user will be assigned one customer, but they will have access to see
all of the customers. Then you create a list of contacts, and then a page
where you can assign a customer to a contact.
Before you start, consider the following standards. These are highly-
used in the industry, and will make things clearer for other people
using your database. Those are as follows:
 Table names should always be singular. So use customer instead of
customers.
Do not use spaces or dots in names. Either use underscores _ to
reference other tables or simply camelCase.
Every table should have a column that is an ID, auto-incremented, to
be used as the unique identifier.
Every column that links from the current entity into another one
should have a name that follows this pattern:
TableName_ColumnName
The length of the column should be as small as you can reasonably
expect it to be.
That brings you to the structure defined in Figure 2-5.

Figure 2-5 Table structure and content

Relationships in data structures are of two types: one-to-many

(1:M), or many-to-many (M:M). This is also called cardinality. In this
case, you have a 1:M relationship between customers (1) and users (M),
so that means that each user is assigned only one customer, but each
customer has multiple users. Therefore, in the user table, you write
the ID of the customer that it belongs to by using the customer_id
column as a foreign key to note the ID of the customer that it is
attributed to.
However, a many-to-many relationship cannot be saved into the
database directly by using a foreign key, as that can only store one
relationship. A many-to-many relationship can only be achieved
through a secondary table, also called a pivot table. This table only
holds the data regarding the relationship between the two tables, which
is customer and contact in this example. Note how the tables are
named with singular nouns.
Now you can create the tables. Go to
http://localhost/phpmyadmin again and open the crm
database to create the first table. Your screen should now look similar
to what you see in Figure 2-6.

Figure 2-6 Creating a table in phpMyAdmin

You need to add the additional columns manually, as initially you

only have space for four of them. Or you can add them at a later point,
from the Structure tab.
Pay attention to the first column, where you need to select the
checkbox for A_I through which the column is identified as a primary
(unique) key, which also means it will auto increment. This will enable
the database to take care of the ID of each entity by auto-generating it
and checking that it is unique.
Note that the join table does not have a primary key, as it is defined
by the relationship between the two sets of data.
By the end of it, if you click the crm name on the left side of the
navigation, you should have a database looking like in Figure 2-7.

Figure 2-7 Result of table creation

SQL Selects
You will first insert some data into the tables. In order to do that, just
select your tables and go to the Insert tab for each of them.
You need to leave the id column empty, but feel free to populate the
rest of the data. You will see that this will populate the data and
generate the SQL code that the app executes in order to insert the data
into the tables.

INSERT INTO `customer` (`id`, `name`, `address`,

`dateCreated`) VALUES
(NULL, 'Volkswagen', 'Germany', '2022-02-07
21:29:20),
(NULL, 'Volvo', 'Sweden', '2022-02-07 21:29:20);

This is a good time to talk about quotes inside SQL. Note the ``
back quotes, which are used for table names and column names, and
the '' single straight quotes, which are used to represent string values.
There are also sometimes "" double quotes, which are used to assign
aliases to tables. You will learn about their functions a bit later.
 Now examine the syntax of the previous script. It follows the
general syntax of an SQL query. You have an action that needs to be
done, then the table where this needs to be executed, and then the
additional conditions or values.
Now go to the SQL tab. From there, you can run your queries
directly in text format. Try this:

SELECT * FROM customer WHERE id=1

As you can see in Figure 2-8, the customer with the ID 1 will be
retrieved. That is the nice part about SQL. When you read a query, it is
relatively easy to understand what is happening.

Figure 2-8 Result of a SELECT statement

But this brings us neatly to a question that might have already

popped into your mind. Is SQL case-sensitive? The answer is no. The
code would work in all caps, or all lowercase, and with or without the
back quotes around the table names.
However, the convention is to use CAPS for anything that has to do
with the SQL language, and use lowercase for anything that has to do
with your data. This just makes thing easier to understand.
 In addition, the * (star) part tells the engine to select all columns.
For now, it wouldn’t make much of a difference if you only selected a
limited number of columns, but imagine that you have a table with 200
columns, out of which you extract 10,000 rows. The data transfer would
get overwhelming pretty quick.
Therefore, you can select only the columns you’re interested in with
this command:

SELECT id, name FROM customer WHERE id<5

As you can see in Figure 2-9, only the columns that you want have
been pulled out of the table.

Figure 2-9 Result of a SELECT with a WHERE clause

Another skill you need to understand is how search within strings.

You can always write an SQL query like this, and it will work without
any issues:

SELECT id, name FROM customer WHERE name='Seat'

This will perform an exact match search, which in some cases might
be what you are looking for (such as when you’re searching for an email
address). However, an issue appears when you want to search for text
within the data of a column. For that, you need to use the syntax LIKE
instead of the = operator. It provides you with access to the % wildcard,
as follows.

SELECT id, name FROM customer WHERE name LIKE 'V%'

This SELECT only pull out the customers whose names begin with
the letter V, as shown in Figure 2-10.

Figure 2-10 Result of the SELECT with a wildcard

Similarly, you could write the following query, which searches the
customers for an address containing the country, Spain. You do not
need to select the column in order to query based on it.
This query

SELECT id, name FROM customer WHERE address LIKE

'%Spain%'

will return all of the customers whose addresses contain the word
Spain, at the beginning, the end, or in the middle of the string.

Homework
As homework, try to determine what the following queries will return:

SELECT * FROM customer WHERE id BETWEEN 1 AND 10;

SELECT * FROM customer WHERE id = 1 OR id > 10;
SELECT * FROM customer WHERE name LIKE 'BMW%' AND
(id = 1 OR id > 10);
Note that when using the AND and OR conditions in the same query,
you should use parentheses, in order to avoid unexpected behavior.

SQL Functions
Inside of an SQL query, you can operate different functions, in order to
retrieve more complex data. For example, imagine that your boss asks
you how many customers you have in the database. The following
query will return the number of rows from the table, shown in Figure 2-
11.

SELECT COUNT(*) FROM customer

Figure 2-11 Result of a count function

As you can see, the name of the column is COUNT(*), which would
not help you a lot if you exported this data and give it to your boss.
Therefore, you can use an alias for the extracted column (see Figure 2-
12):

SELECT COUNT(*) AS "Total Customers" FROM customer

Figure 2-12 Result of a count with an alias

 This is indeed the place where you must use double quotes. Using
an alias simply makes your column easier to understand and a bit more
user-friendly. You don’t do this only for your users, but also for other
developers, if in a few years you (or someone else) have to go back over
the code and change something.
You can also use functions that sum up data, calculate an average
difference, and so on. For example, suppose you also stored the age of
your users inside the database. You could run the following query in
order to determine their median age:

SELECT AVG(age) AS "Average Age" FROM user

Or, if you have a table with contracts, you could run this query to
retrieve all of your sales for 2022:

SELECT SUM(total_billed) AS "Annual Sales" FROM

contracts WHERE date BETWEEN '01-Jan-2022' AND
'31-Dec-2022'

As you can see, writing SQL queries is not difficult at all. It takes a
bit of getting used to, that is true. But you will quickly be able to pull
out data that you need without even thinking twice about the code.
That is the beauty of SQL. If you can articulate it, you can put it in code
just as easy.

SQL Joins
This might be the most complicated problem of SQL, and the part that
most people have issues understanding. Imagine you have the following
problem: You have a number of users, and each user is assigned to a
certain customer. Holidays are coming, so you ask user to send a letter
to the customer to whom they are assigned. This means that you need
to pull a list of all the users, together with the addresses of their
assigned customers.
In order to do that, you need to do a JOIN operation. This is a way
in which you can pull related data from two different tables at the same
time. First of all, you need to understand the types of joins, which are
illustrated in Figure 2-13.
Figure 2-13 Different types of joins
The type of join basically represents the relationship between data
that is getting get pulled, and also explains which data should get
excluded in the selection. The large majority of joins are LEFT JOINS,
so if you ever don’t know which one to use, try a LEFT JOIN first.
Now for the syntax. You start with a simple SELECT statement from
the base table, and then you join into the second table, by explaining
the condition between the two tables. Therefore, the join will look like
this:

SELECT * FROM
TABLE_1 LEFT JOIN TABLE_2
ON TABLE_2.COLUMN = TABLE_2.ANOTHER_COLUMN

Pay attention here. You always have a table on the left side of the
JOIN keyword, and always a table on the right side of the keyword.
This also means that one column of first table needs to be left of the =
operation, and one column of the second table needs to be on the right
of the = operation.
That makes the query, based on the database, look like this:

SELECT * FROM
user LEFT JOIN customer
ON user.customer_id = customer.id
Random documents with unrelated
content Scribd suggests to you:
The Project Gutenberg eBook of Tales from
the Gesta Romanorum
 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.

Title: Tales from the Gesta Romanorum

Translator: Charles Swan

Release date: January 8, 2019 [eBook #58655]

Language: English

Credits: Produced by Richard Tonsing, Turgut Dincer and the

Online
Distributed Proofreading Team at http://www.pgdp.net
(This
file was produced from images generously made
available
by The Internet Archive)

*** START OF THE PROJECT GUTENBERG EBOOK TALES FROM THE

GESTA ROMANORUM ***
TALES FROM THE GESTA
ROMANORUM

Translated by Rev. C. Swan

New York and London

G. P. Putnam’s Sons
The Knickerbocker Press, New Rochelle, N. Y.
 PREFACE
TO THE FIRST AMERICAN EDITION
(PUBLISHED BY WILEY & PUTNAM IN
1845).

You have here, my good friends, sundry moral and entertaining

stories, invented by the monks of old, and used by them for
amusement, as well as for instruction; from which the most
celebrated poets, of our own and other lands, have condescended to
draw their plots.
The improvements and refinements of this age will naturally lead
you to condemn as absurdities, many of the incidents with which
these tales abound. Considering the knowledge of the present day,
you are justified in so doing. But I pray you to bear in mind that few
qualities are more dependent on time, than probability and
improbability. When you read these tales, you must, for the time,
retrace your steps to the age in which they were written; and though
the tale may seem absurd to us of this day, yet if it was calculated to
impress the minds of those for whom it was invented, and to whom it
was told, its merit was great, and therefore deserving of due praise. A
giant or a magician was as probable to the people of the middle ages,
as electricity to us. I pray you bear this in mind whilst you judge of
these tales.
Romantic fiction pleases all minds, both old and young: the reason
is this, says an old Platonist, “that here things are set down as they
should be; but in the true history of the world, things are recorded
indeed as they are, but it is but a testimony that they have not been
as they should be. Wherefore, in the upshot of all, when we shall see
that come to pass, that so mightily pleases us in the reading the most
ingenious plays and heroic poems, that long afflicted Virtue at last
comes to the crown, the mouth of all unbelievers must be stopped.”
To the work of the ingenious Mr. Swan, the only translator of these
stories that I know of in this country, I am indebted for my first
introduction to these old tales; and I cannot conclude these few
words without thanking him for having often lightened my labors by
his close and admirable versions.
G. B.

December, 1844.
 CONTENTS.

I.—The Gesta Romanorum—Its Origin—Tale of the Ungrateful Man—

Sources of Didactic Fiction—Jovinian the Proud Emperor—Morals of
the Tales 1

II.—Discussion on the Source of Fiction Renewed—The King and the

Glutton—Guido, the Perfect Servant—The Middle-Age Allegories
—Pliny and Mandeville’s Wonders Allegorized 31

III.—Progress of Fiction from the East to the West—The Early Christians—

The Monks—The Spanish Arabians—The Crusades—The Knight and
the King of Hungary—The English Gesta 46

IV.—Modern Conversions of the Old Tales—The Three Black Crows—

King Lear—The Emperor of Rome and his Three Daughters—The
Merchant of Venice—The Three Caskets 58

V.—The Probable Author of the Gesta—Modern Conversions—Parnell and

Schiller—The Angel and the Hermit—The Poet’s Improvements—
Fulgentius and the Wicked Steward—Irving’s Vision in the
Museum—The Claims of the Old Writers on the New 74
VI.—Curiosities of the Gesta—The Wicked Priest—The Qualities of the
Dog—The Emperor’s Daughter—Curious Application—The Emperor
Leo and the Three Images—An Enigma 90

VII.—Curiosities of the Gesta—Byrkes’ Epitaph—The Lay of the Little

Bird—Of the Burdens of this Life—Ancient Fairs—Winchester—
Modern Continental Fairs—Russia—Nischnei-Novgorod 104

VIII.—Southey’s Thalaba—The Suggestions of the Evil One—

Cotonolapes, the Magician—The Garden of Aloaddin—The Old
Man of the Mountain—The Assassins—Their Rise and Fall—Gay’s
Conjurer—Sir Guido, the Crusader—Guy, Earl of Warwick 120
IX.—Illustrations of Early Manners—Sorcery—The Knight and the
Necromancer—Waxen Figures—Degeneracy of Witches—The Clerk
and the Image—Gerbert and Natural Magic—Elfin Chivalry—The
Demon Knight of the Vandal Camp—Scott’s Marmion—Assumption
of Human Forms by Spirits—The Seductions of the Evil One—
Religious Origin of Charges of Witchcraft 149

X.—The Three Maxims—The Monk’s Errors in History—The Trials of

Eustace—Sources of its Incidents—Colonel Gardiner—St. Herbert—
Early English Romance of Sir Isumbras 174

XI.—Another Chat about Witches and Witchcraft—Late Period of the

Existence of Belief in Witches—Queen Semiramis—Elfin Armorers—
The Sword of the Scandinavian King—Mystical Meaning of Tales of
Magic—Anglo-Saxon Enigmas—Celestinus and the Miller’s Horse
—The Emperor Conrad and the Count’s Son—Legend of “The Giant
with the Golden Hairs” 203

XII.—Love and Marriage—The Knight and the Three Questions—Racing

for a Wife—Jonathan and the Three Talismans—Tale of the Dwarf
and the Three Soldiers—Conclusion 233
THE GESTA ROMANORUM
 CHAPTER I.

The Gesta Romanorum—Its Origin—Tale of the Ungrateful Man—Sources of

Didactic Fiction—Jovinian the Proud Emperor—Morals of the Tales.

I t was a dull, cold Christmas evening; the snow fell fast and small, and the
cutting northeast wind blew its white shower into heaps and ridges in every
corner of St. John’s quadrangle, and piled its clear flakes against every projecting
part of the old building. No one was moving in college, at least out-of-doors; but
the rude laugh from the buttery, and the dull-red gleam through the closely drawn
curtains of one of the upper rooms in the outer quadrangle, proved that in two
portions of the college Christmas was being kept with plenty and with gayety.
The change from the white cold of the quadrangle to the ruddy blaze of that
upper room was inspiriting. The fire burnt bright; the small table, drawn
immediately in front of its merry blaze, glittered with after-dinner good cheer; and
three young and happy faces sat by that little table, and compared their former
Christmases at home, with this one, during which they were determined to remain
up in Oxford and read for the ensuing examination.
“Morrison is always in good luck,” said Henry Herbert, the youngest of the party.
“Whatever it is, whether drawing lots for a Newham party, or cramming for an
examination, he always succeeds; and now he is the last man that got away from
Oxford before the roads were blocked up by this snow-drift.”
“Fortunate fellow!” said Lathom. “We are shut up now—fifteen feet of snow at
Dorchester, and Stokenchurch bottom quite impassable.”
“Ay, and Oxford streets equally so,” said Frederick Thompson, the last of the
triumvirate, “and we shut up here with the pleasant prospect of taking our
constitutional, for some days to come, under the old Archbishop’s cloisters.”
“By the by,” said Herbert, “what were you after in the old library last week,
Lathom?”
“Looking for a copy of the Gesta Romanorum, with the idea of reading some of
its amusing stories during our after-dinner sittings.”
“Any thing but those Romans: it is bad enough to have read and believed all that
Livy wrote, from his Sucking Wolf to his Capitol Goose, and then to have a shrewd
German prove that kings were not kings, and consuls not consuls, just when you
are beginning to think that you really do know something about your Roman
history.”
“You will have but little of Roman history, Thompson; the title of the book but ill
agrees with its contents: fables of all climes contribute their share in the formation
of this singular composition. The majority of the tales are entirely unconnected
with the history of Rome, though the writer, in order to, in some manner, cover
this deviation from his title, has taken care to preface almost every story with the
name of some emperor, who in most cases never existed, and sometimes has little
to do with the incidents of the narrative.”
“To whom, most learned antiquary, are we indebted for this very stout volume?”
“To the imagination, knowledge, and literary labor of the monks of the middle
ages. In the refectory, whilst the monks ate their meals, one, the youngest
generally, of the society, read from some such collection as this, a tale at once
amusing and instructive. Nor was the use of these fables confined to the refectory.
The success which has always attended instruction by fables, and the popularity
ever consequent on this form of teaching, led the monks to use this medium to
illustrate their public discourses, as well as for their own daily relaxation.”
“Few things are more certain,” said Herbert, “than that an argument, however
clear,—a deduction, however logical,—operates but faintly except on trained
intellects; but an apposite story at once arouses the attention, and makes a more
durable impression on illiterate auditors. Knowledge in the garb of verse is soonest
appreciated by an uneducated mind, and remains there far longer than in any
other form. A ballad will descend from generation to generation without a fault or
an interpolation.”
“Yes,” rejoined Lathom, “and next to poetry comes poetic prose, at the head of
which class stands didactic fiction. Many a clever man has confessed that he was
more indebted to Shakspeare and Scott for his English and Scottish history, than to
the standard historians of either land.”
“And as far as the general belief goes,” said Thompson, “the popular dramatist or
poet will always outweigh the learned historian. Let Walpole or Turner write what
they will about Richard the Third; to the majority—ay, to more than four fifths of
the people—he is still Shakspeare’s Richard, the Humpbacked Murderer.”
“One of the best of the old monks’ stories,” said Lathom, “was translated in
Blackwood’s Magazine some years since. It well illustrates the popular method by
which the writers of these tales inculcated Christian duties on their brethren of the
convent, or on their hearers in the Church. If you like, I will read it.”
The following was the tale of
 THE UNGRATEFUL MAN.
Vitalis, a noble Venetian, one day, at a hunting party, fell into a pit,
which had been dug to catch wild animals. He passed a whole night
and day there, and I will leave you to imagine his dread and his
agony. The pit was dark. Vitalis ran from the one side of it to the
other, in the hope of finding some branch or root by which he might
climb its sides and get out of his dungeon; but he heard such
confused and extraordinary noises, growlings, hissings, and plaintive
cries, that he became half-dead with terror, and crouched in a corner
motionless, awaiting death with the most horrid dismay. On the
morning of the second day he heard some one passing near the pit,
and then raising his voice he cried out with the most dolorous accent:
“Help, help! draw me out of this; I am perishing!”
A peasant crossing the forest heard his cry. At first he was
frightened; but after a moment or two, taking courage, be
approached the pit, and asked who had called.
“A poor huntsman,” answered Vitalis, “who has passed a long
night and day here. Help me out, for the love of God. Help me out,
and I will recompense you handsomely.”
“I will do what I can,” replied the peasant.
Then Massaccio (such was the name of the peasant) took a hedge-
bill which hung at his girdle, and cutting a branch of a tree strong
enough to bear a man,—“Listen, huntsman,” said he, “to what I am
going to say to you. I will let down this branch into the pit. I will
fasten it against the sides, and hold it with my hands; and by pulling
yourself out by it, you may get free from your prison.”
“Good,” answered Vitalis; “ask me anything you will, and it shall
be granted.”
“I ask for nothing,” said the peasant, “but I am going to get
married, and you may give what you like to my bride.”
So saying, Massaccio let down the branch—he soon felt it heavy,
and the moment after a monkey leapt out of the pit. He had fallen
like Vitalis, and had seized quickly on the branch of Massaccio. “It
was the devil surely which spoke to me from the pit,” said Massaccio,
running away in affright.
“Do you abandon me, then?” cried Vitalis, in a lamentable accent;
“my friend, my dear friend, for the love of the Lord, for the love of
your mistress, draw me out of this; I beg, I implore you; I will give
her wedding gifts, I will enrich you. I am the Lord Vitalis, a rich
Venetian; do not let me die of hunger in this horrible pit.”
Massaccio was touched by these prayers. He returned to the pit—
let down another branch, and a lion jumped out, making the woods
echo with a roar of delight.
“Oh certainly, certainly, it was the devil I heard,” said Massaccio,
and fled away again; but stopping short, after a few paces, he heard
again the piercing cries of Vitalis.
“O God, O God,” cried he, “to die of hunger in a pit! Will no one
then come to my help? Whoever you may be, I implore you return;
let me not die, when you can save me. I will give you a house and
field, and cows and gold, all that you can ask for; save me, save me
only.”
Massaccio, thus implored, could not help returning. He let down
the branch, and a serpent, hissing joyously, sprang out of the pit.
Massaccio fell on his knees, half-dead with fear, and repeated all the
prayers he could think of to drive away the demon. He was only
brought to himself by hearing the cries of despair which Vitalis
uttered.
“Will no one help me?” said he. “Ah, then, must I die? O God, O
God!” and he wept and sobbed in a heart-breaking manner.
“It is certainly the voice of a man for all that,” said Massaccio.
“Oh, if you are still there,” said Vitalis, “in the name of all that is
dear to you, save me, that I may die at least at home, and not in this
horrible pit. I can say no more; my voice is exhausted. Shall I give
you my palace at Venice, my possessions, my honors? I give them all;
and may I die if I forfeit my word. Life, life only; save only my life.”
Massaccio could not resist such prayers, and mingled with such
promises. He let down the branch again.
“Ah, here you are at last,” said he, seeing Vitalis come up.
 “Yes,” said he, and uttering a cry of joy he fainted in the arms of
Massaccio.
Massaccio sustained, assisted him, and brought him to himself;
then, giving him his arm,—“Let us,” said he, “quit this forest”; but
Vitalis could hardly walk,—he was exhausted with hunger.
“Eat this piece of bread,” said Massaccio, and he gave him some
which he took out of his wallet.
“My benefactor, my savior, my good angel,” said Vitalis, “how can I
ever sufficiently recompense you!”
“You have promised me a marriage portion for my bride, and your
palace at Venice for myself,” said Massaccio. But Vitalis now began to
regain his strength.
“Yes, certainly, I will give a portion to your wife, my dear
Massaccio, and I will make you the richest peasant of your village.
Where do you live?”
“At Capalatta in the forest; but I would willingly quit my village to
establish myself at Venice in the palace you have promised me.”
“Here we are out of the forest,” said Vitalis; “I know my road now;
thank you, Massaccio.”
“But when shall I come for my palace and the portion for my
intended?” returned the peasant.
“When you will,” said the other, and they separated.
Vitalis went to Venice, and Massaccio to Capalatta, where he
related his adventure to his mistress, telling her what a rich portion
she was to have, and what a fine palace she was to live in.
The next day early he set out for Venice, and asked for the palace
of the Signor Vitalis,—went straight to it, and told the domestics that
he should come shortly with his mistress, in a fine carriage, to take
possession of the palace which the Signor Vitalis had promised to
give him. Massaccio appeared to those who heard him mad, and
Vitalis was told that there was a peasant in his hall, who asked for a
marriage portion, and said the palace belonged to him.
“Let him be turned out immediately,” said Vitalis, “I know him
not.”
The valets accordingly drove him away with insults, and Massaccio
returned to his cottage in despair, without daring to see his mistress.
At one corner of his fireplace was seated the monkey, at the other
corner the lion, and the serpent had twisted itself in spiral circles
upon the hearth. Massaccio was seized with fear. “The man has
driven me from his door,” thought he; “the lion will certainly devour
me, the serpent sting me, and the monkey laugh at me; and this will
be my reward for saving them from the pit.” But the monkey turned
to him with a most amicable grimace; the lion, vibrating gently his
tail, came and licked his hand, like a dog caressing his master; and
the serpent, unrolling its ringy body, moved about the room with a
contented and grateful air, which gave courage to Massaccio.
“Poor animals!” said he, “they are better than the Signor Vitalis; he
drove me like a beggar from the door. Ah! with what pleasure I would
pitch him again into the pit! And my bride! whom I thought to marry
so magnificently! I have not a stick of wood in my wood-house, not a
morsel of meat for a meal, and no money to buy any. The ungrateful
wretch, with his portion and his palace!”
Thus did Massaccio complain. Meanwhile the monkey began to
make significant faces, the lion to agitate his tail with great
uneasiness, and the serpent to roll and unroll its circles with great
rapidity. Then the monkey, approaching his benefactor, made him a
sign to follow, and led him into the wood-house, where was regularly
piled up a quantity of wood sufficient for the whole year. It was the
monkey who had collected this wood in the forest, and brought it to
the cottage of Massaccio. Massaccio embraced the grateful ape. The
lion then uttering a delicate roar, led him to a corner of the cottage,
where he saw an enormous provision of game, two sheep, three kids,
hares and rabbits in abundance, and a fine wild boar, all covered
with the branches of trees to keep them fresh. It was the lion who
had hunted for his benefactor. Massaccio patted kindly his mane.
“And you, then,” said he to the serpent, “have you brought me
nothing? Art thou a Vitalis, or a good and honest animal like the
monkey and the lion?” The serpent glided rapidly under a heap of
dried leaves, and reappeared immediately, rearing itself superbly on
its tail, when Massaccio saw with surprise a beautiful diamond in its
mouth. “A diamond!” cried Massaccio, and stretched forth his hand
to stroke caressingly the serpent and take its offering.
Massaccio then set out immediately for Venice to turn his diamond
into money. He addressed himself to a jeweller. The jeweller