Developing Responsive Web Applications With Ajax

And Jquery 1st Edition Sandeep Kumar Patel

download

https://ebookbell.com/product/developing-responsive-web-
applications-with-ajax-and-jquery-1st-edition-sandeep-kumar-
patel-50200482

Explore and download more ebooks at ebookbell.com

Here are some recommended products that we believe you will be
interested in. You can click the link to download.

Developing Responsive Web Applications With Ajax And Jquery Sandeep

Kumar Patel Patel

https://ebookbell.com/product/developing-responsive-web-applications-
with-ajax-and-jquery-sandeep-kumar-patel-patel-36703680

Developing Responsive Web Applications With Ajax And Jquery Sandeep

Kumar Patel

https://ebookbell.com/product/developing-responsive-web-applications-
with-ajax-and-jquery-sandeep-kumar-patel-6808874

Reactjs By Example Building Modern Web Applications With React Get Up

And Running With Reactjs By Developing Five Cuttingedge And Responsive
Projects Vipul A M

https://ebookbell.com/product/reactjs-by-example-building-modern-web-
applications-with-react-get-up-and-running-with-reactjs-by-developing-
five-cuttingedge-and-responsive-projects-vipul-a-m-5475444

Zk Developers Guide Developing Responsive User Interfaces For Web

Applications Using Ajax Xul And The Open Source Zk Rich Web Client
Development Framework Markus Staeuble

https://ebookbell.com/product/zk-developers-guide-developing-
responsive-user-interfaces-for-web-applications-using-ajax-xul-and-
the-open-source-zk-rich-web-client-development-framework-markus-
staeuble-1373932
Html Css Quickstart Guide The Simplified Beginners Guide To Developing
A Strong Coding Foundation Building Responsive Websites And Mastering
The Fundamentals Of Modern Web Design David Durocher

https://ebookbell.com/product/html-css-quickstart-guide-the-
simplified-beginners-guide-to-developing-a-strong-coding-foundation-
building-responsive-websites-and-mastering-the-fundamentals-of-modern-
web-design-david-durocher-24194176

Html And Css Quickstart Guide The Simplified Beginners Guide To

Developing A Strong Coding Foundation Building Responsive Websites And
Mastering Of Modern Web Design Quickstart Guides David Durocher

https://ebookbell.com/product/html-and-css-quickstart-guide-the-
simplified-beginners-guide-to-developing-a-strong-coding-foundation-
building-responsive-websites-and-mastering-of-modern-web-design-
quickstart-guides-david-durocher-29886468

Developing Traumaresponsive Approaches To Student Discipline A Guide

To Traumainformed Practice In Prek12 Schools 1st Edition Kirk
Eggleston

https://ebookbell.com/product/developing-traumaresponsive-approaches-
to-student-discipline-a-guide-to-traumainformed-practice-in-
prek12-schools-1st-edition-kirk-eggleston-34773782

Developing A Robust And Responsive Esociety Janice Burn Sue Stoney

https://ebookbell.com/product/developing-a-robust-and-responsive-
esociety-janice-burn-sue-stoney-51335498

Developing Conversational Interfaces For Ios Add Responsive Voice

Control To Your Apps 1st Edition Martin Mitrevski

https://ebookbell.com/product/developing-conversational-interfaces-
for-ios-add-responsive-voice-control-to-your-apps-1st-edition-martin-
mitrevski-6840642
Table of Contents
Developing Responsive Web Applications with AJAX and jQuery
Credits
About the Author
About the Reviewers
www.PacktPub.com
Support files, eBooks, discount offers, and more
Why subscribe?
Free access for Packt account holders
Preface
What this book covers
What you need for this book
Who this book is for
Conventions
Reader feedback
Customer support
Downloading the example code
Errata
Piracy
Questions
1. Introduction to a Responsive Web Application
Benefits of a responsive design
Server-versus client-side detection
The technology stack
HTML5
CSS3 and media queries
JavaScript
Measuring responsiveness
Devices and screens
Media types
Media queries
Role of media queries
Responsive frameworks
Bootstrap
 The Foundation framework
The Cascade framework
The Pure CSS framework
The Gumby framework
Bootstrap 3 for a responsive design
What are we building?
Summary
2. Creating a Responsive Layout for a Web Application
Required software and tools
Setting up a Java-based web project
Configuring Bootstrap 3
Creating a wireframe for a web application
Responsive layouts
Creating a layout for large and small devices
Developing the layout
Bootstrap 3 containers
Developing a row
Developing the menu section
Developing the hero section
Developing the list of products section
The combined layout
Verifying the layout
The Opera Mobile emulator
Summary
3. Adding Dynamic Visuals to a Web Application
Building a JSON servlet
Creating a POJO class
Creating a product store
Converting from POJO to JSON
Creating the servlet
Building a jQuery AJAX method
jQuery promises
The jQuery templating mechanism
The combined jQuery code
The combined HTML markup
Modifying the style of the product
Building an image carousel
 Summary
4. Twitter Integration
Introduction to Twitter4J
Configuring Twitter4J in a web application
Posting a tweet
Creating a Twitter button
Setting up a new Twitter application
The Twitter Permissions tab
The Twitter Details tab
The Twitter Settings tab
The Twitter API Keys tab
Developing a Twitter servlet
Request token
Developing a Twitter callback servlet
Access token
Combining all the pieces
Posting a tweet with an image
Product store with an image
Markup changes
Changes in app.js
Twitter servlet changes
Changes in the Twitter callback servlet
User Twitter timeline
Summary
5. Facebook Integration
Introduction to the Facebook SDK for JavaScript
Creating a Facebook application
Configuring the Facebook SDK
The Settings tab
The Basic configuration
The Advanced configuration
The Migrations configuration
Configuring a Facebook login
Configuring the Facebook Like and Share buttons
Configuring Facebook comments
The combined code
Summary
6. Google+ Integration
Introduction to the Google+ API
Configuring Google+
Creating a client ID
Including the Google script
Log in using Google+
Integrating +1 recommendations
Summary
7. Linking Dynamic Content from External Websites
Introduction to the YouTube API
Configuring a YouTube API
Searching for a YouTube video
The part parameter
The fields parameter
The YouTube button markup
Asynchronous search in YouTube
Rendering the YouTube search results
Embedding a YouTube video
Summary
8. Integrating E-Commerce or Shopping Applications with Your Website
Creating a shopping cart
Adding a product to the cart
Displaying the minimal view of the cart
Displaying the cart details in a table
Configuring the PayPal Developer API
Integrating the PayPal Developer API
Configuring the Shopify API
Integrating the Shopify API
Summary
9. Integrating the Google Currency Converter with Your Web Application
The Google Currency Converter API
Configuring the Google Currency Converter API
Integrating the Currency Converter API
Developing our currency converter
Building the currency list dropdown
Processing the conversion request
Exceptions
 Summary
10. Debugging and Testing
Implementing the debugging mechanism
Dimensions Toolkit
The Designmodo Responsive Test tool
The Opera Mobile emulator tool
The Responsinator tool
The Viewport Resizer tool
The L-Square Responsive Design Inspector tool
The FireBreak add-on
The More Display Resolutions 1.0 add-on
The BrowserStack Responsive tool
The MobileTest tool
The TestSize tool
The Am I Responsive tool
The Responsive Design Checker tool
The RUIT tool
The Responsive Test online tool
Testing the app as a whole
Summary
Index
Developing Responsive Web
Applications with AJAX and
jQuery
Developing Responsive Web
Applications with AJAX and
jQuery
Copyright © 2014 Packt Publishing All rights reserved. No part of this
book may be reproduced, stored in a retrieval system, or transmitted in
any form or by any means, without the prior written permission of the
publisher, except in the case of brief quotations embedded in critical
articles or reviews.

Every effort has been made in the preparation of this book to ensure the
accuracy of the information presented. However, the information
contained in this book is sold without warranty, either express or implied.
Neither the author, nor Packt Publishing, and its dealers and distributors
will be held liable for any damages caused or alleged to be caused
directly or indirectly by this book.

Packt Publishing has endeavored to provide trademark information about

all of the companies and products mentioned in this book by the
appropriate use of capitals. However, Packt Publishing cannot guarantee
the accuracy of this information.

First published: July 2014

Production reference: 1180714

Published by Packt Publishing Ltd.

Livery Place

35 Livery Street

Birmingham B3 2PB, UK.

ISBN 978-1-78328-637-9
www.packtpub.com

Cover image by Abhishek Pandey (<[email protected]>)

Credits
Author

Sandeep Kumar Patel

Reviewers

Fernando Doglio

Md. Zahid Hasan

Mohammad Amzad Hossain

Jake Kronika

Commissioning Editor

Julian Ursell

Acquisition Editor

Mohammad Rizvi

Content Development Editor

Balaji Naidu

Technical Editors

Venu Manthena

Mrunmayee Patil

Copy Editors

Roshni Banerjee

Sarang Chari
Janbal Dharmaraj

Gladson Monteiro

Deepa Nambiar

Karuna Narayanan

Adithi Shetty

Project Coordinator

Aaron S. Lazar

Proofreaders

Simran Bhogal

Paul Hindle

Indexers

Hemangini Bari

Rekha Nair

Priya Subramani

Graphics

Abhinash Sahu

Production Coordinator

Shantanu Zagade

Cover Work

Shantanu Zagade
About the Author
Sandeep Kumar Patel is a senior web developer and the founder of
www.tutorialsavvy.com, a widely-read programming blog since 2012. He
has more than 4 years of experience in object-oriented JavaScript and
JSON-based web application development. He is GATE 2005 Information
Technology (IT) qualified and has a Master's degree from VIT University,
Vellore. At present, he holds the position of Web Developer in SAP Labs,
India. You can find out more about him from his LinkedIn profile
(http://www.linkedin.com/in/techblogger). He has received the DZone
Most Valuable Blogger (MVB) award for technical publications related to
web technologies. His article can be viewed at
http://www.dzone.com/users/sandeepgiet. He has also received the Java
Code Geek (JCG) badge for a technical article published in JCG. His
article can be viewed at http://www.javacodegeeks.com/author/sandeep-
kumar-patel/.
About the Reviewers
Fernando Doglio has been working as a web developer for the past 10
years. During that time, he fell in love with the Web and has had the
opportunity of working with most of the leading technologies such as
PHP, Ruby on Rails, MySQL, Node.js, AngularJS, AJAX, REST APIs,
and others.

In his spare time, he likes to tinker and learn new things, which is why his
GitHub account keeps getting new repos every month. He's also a big
open source supporter and tries to win the support of new people with the
help of his site: http://www.lookingforpullrequests.com/. He can be
contacted on Twitter at @deleteman123.

When not programming, he can be seen spending time with his family.

Md. Zahid Hasan is a professional web developer. He got his BSc and
MSc in Information and Communication Engineering from University of
Rajshahi (RU), Rajshahi. Now, he is working as a Lecturer in the
department of Computer Science and Engineering at Green University of
Bangladesh. He previously worked as a Software Developer at SEleven
IT Limited for 2 years in Bangladesh.

He has a wide range of technical skills, Internet knowledge, and

experience across the spectrum of online development in the service of
building and improving online properties for multiple clients. He enjoys
creating site architecture and infrastructure, backend development using
open source tools such as Linux, Apache, MySQL, and PHP (LAMP),
and frontend development with CSS and HTML/XHTML.

Mohammad Amzad Hossain has 7 years of experience building large-

scale complex websites and web applications. He works as a Branch
Manager in Sourcetop Inc. where he leads an offshore team in Dhaka,
Bangladesh. His day-to-day life requires him to plan, analyze, guide, and
provide solutions for complex requirements. In his free time, he digs into
recent trends in web development and follows hundreds of RSS that help
him to keep up in the fast-track world of development. He has a BSc
degree in Computer Science Engineering.

Jake Kronika, a software developer and UI architect with over 20 years

of experience, brings to bear extensive proficiency implementing both
server-side and user interface (UI) solutions including multiple responsive
web applications to date.

He began his career early in life using online tools for static content and
rapidly progressed to building dynamic applications incorporating
databases and server-side scripting languages. He has been a Senior
User Interface Software Engineer at ADP Dealer Services in Seattle, WA,
USA from 2011. Prior to this, he occupied numerous senior-level
positions in the UI space in Chicago, IL. He has also balanced
considerable freelance work under a sole proprietorship named Gridline
Design & Development, accessible at http://gridlined.com/, online since
1999.

Over the past several years, particularly as the HTML, CSS, and
JavaScript portions of websites have experienced rapid evolution, he has
continually sought out and digested new technological knowledge
through reading, personal and client projects, and other means. Some of
his favorite current tools include Node.js and AngularJS, Less/Sass, and
Git VCS.

Prior to this book, he was a technical reviewer for the following Packt
Publishing titles:

Django JavaScript Integration: AJAX and jQuery, Jonathan Hayward,

in January 2011
jQuery UI 1.8: The User Interface Library for jQuery, Dan Wellman,
in August 2011
jQuery Tools UI Library, Alex Libby, in February 2012
www.PacktPub.com
Support files, eBooks, discount offers, and more
You might want to visit www.PacktPub.com for support files and
downloads related to your book.

Did you know that Packt offers eBook versions of every book published,
with PDF and ePub files available? You can upgrade to the eBook
version at www.PacktPub.com and as a print book customer, you are
entitled to a discount on the eBook copy. Get in touch with us at
<[email protected]> for more details.

At www.PacktPub.com, you can also read a collection of free technical

articles, sign up for a range of free newsletters and receive exclusive
discounts and offers on Packt books and eBooks.

http://PacktLib.PacktPub.com

Do you need instant solutions to your IT questions? PacktLib is Packt's

online digital book library. Here, you can access, read and search across
Packt's entire library of books.

Why subscribe?
Fully searchable across every book published by Packt
Copy and paste, print and bookmark content
On demand and accessible via web browser
Free access for Packt account holders
If you have an account with Packt at www.PacktPub.com, you can use
this to access PacktLib today and view nine entirely free books. Simply
use your login credentials for immediate access.
Preface
Welcome to Developing Responsive Web Applications with AJAX and
jQuery. If you want to learn and understand responsive layout
development or social application integration using AJAX and jQuery,
then this book is for you. It covers a systematic approach for building a
responsive web application.

All the key features of a responsive application are explained with the
detailed code. It also explains how to debug and test a responsive web
application during development.
What this book covers
Chapter 1, Introduction to a Responsive Web Application, introduces you
to the responsiveness of an application and lists the key benefits of a
responsive application for a commercial site.

Chapter 2, Creating a Responsive Layout for a Web Application, explains

how to develop a layout that will support different screen sizes to render
using Bootstrap 3.

Chapter 3, Adding Dynamic Visuals to a Web Application, explains how

to make a jQuery AJAX call for JSON data and render content in different
parts of the web application.

Chapter 4, Twitter Integration, demonstrates how to integrate the

Twitter4J library to incorporate different features such as tweets and
posts from the web application.

Chapter 5, Facebook Integration, demonstrates how to integrate the

Facebook SDK to add the Facebook login and Like features in the web
application.

Chapter 6, Google+ Integration, shows how to integrate the Google+

login and +1 feature into the web application.

Chapter 7, Linking Dynamic Content from External Websites, explains

how to integrate the YouTube API to embed a recommended video into a
web application.

Chapter 8, Integrating E-Commerce or Shopping Applications with Your

Website, illustrates the integration of the PayPal payment API into the
application. Also, it introduces the integration of the Shopify API into the
application.

Chapter 9, Integrating the Google Currency Converter with Your Web

Application, explains how to integrate the Google Currency API to help a
user see the amount in a different currency.
Chapter 10, Debugging and Testing, introduces the different available
online and offline tools to test a responsive application during
development.
What you need for this book
The following list of tools and libraries are required for this book:

Eclipse IDE for Java EE Developers

Apache Tomcat 7.0
Bootstrap 3.0
jQuery 2.1.0
Who this book is for
This book is for Java web developers who want to create responsive web
applications. This book is also helpful for those who want to learn about
the integration of social applications into existing web applications.
Finally, the book is for everyone interested in better understanding AJAX-
based responsive web application development.
Conventions
In this book, you will find a number of styles of text that distinguish
between different kinds of information. Here are some examples of these
styles, and an explanation of their meaning.

Code words in text, database table names, folder names, filenames, file
extensions, pathnames, dummy URLs, user input, and Twitter handles
are shown as follows: "The data-toggle attribute has the value for the
effect property such as collapse."

A block of code is set as follows:

<div class="navbar-collapse collapse" id="ts-top-

menu">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Category 1</a></li>
<li><a href="#">Category 2</a></li>
<li><a href="#">Category 3</a></li>
</ul>
</div>

When we wish to draw your attention to a particular part of a code block,

the relevant lines or items are set in bold:

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet"
href="asset/css/bootstrap.min.css">
<title>Responsive product Store</title>
</head>
<body>
<div class="container-fluid"></div>
</body>
</html>

New terms and important words are shown in bold. Words that you see
on the screen, in menus or dialog boxes for example, appear in the text
like this: "The Arguments option is for passing additional arguments."
Note
Warnings or important notes appear in a box like this.

Tip
Tips and tricks appear like this.
Reader feedback
Feedback from our readers is always welcome. Let us know what you
think about this book—what you liked or may have disliked. Reader
feedback is important for us to develop titles that you really get the most
out of.

To send us general feedback, simply send an e-mail to

<[email protected]>, and mention the book title via the subject of
your message.

If there is a topic that you have expertise in and you are interested in
either writing or contributing to a book, see our author guide on
www.packtpub.com/authors.
Customer support
Now that you are the proud owner of a Packt book, we have a number of
things to help you to get the most from your purchase.

Downloading the example code

You can download the example code files for all Packt books you have
purchased from your account at http://www.packtpub.com. If you
purchased this book elsewhere, you can visit
http://www.packtpub.com/support and register to have the files emailed
directly to you.

Errata
Although we have taken every care to ensure the accuracy of our
content, mistakes do happen. If you find a mistake in one of our books—
maybe a mistake in the text or the code—we would be grateful if you
would report this to us. By doing so, you can save other readers from
frustration and help us improve subsequent versions of this book. If you
find any errata, please report them by visiting
http://www.packtpub.com/submit-errata, selecting your book, clicking on
the errata submission form link, and entering the details of your errata.
Once your errata are verified, your submission will be accepted and the
errata will be uploaded on our website, or added to any list of existing
errata, under the Errata section of that title. Any existing errata can be
viewed by selecting your title from http://www.packtpub.com/support.

Piracy
Piracy of copyright material on the Internet is an ongoing problem across
all media. At Packt, we take the protection of our copyright and licenses
very seriously. If you come across any illegal copies of our works, in any
form, on the Internet, please provide us with the location address or
website name immediately so that we can pursue a remedy.
Please contact us at <[email protected]> with a link to the
suspected pirated material.

We appreciate your help in protecting our authors, and our ability to bring
you valuable content.

Questions
You can contact us at <[email protected]> if you are having a
problem with any aspect of the book, and we will do our best to address
it.
Chapter 1. Introduction to a
Responsive Web Application
In this chapter, we be introduced to responsive web design followed by
an understanding of technology stack that made responsive web
application development possible.

The current trend of technology revolution has led us to a point where we

can see many wireless devices with different screen size, resolution, and
processing capabilities. It is really challenging and difficult to create
different versions of web applications for each and every device type. To
address this challenge, it needs a design solution that can address these
problems. Responsive web design provides the platform and flexibility
where we can write code once and publish the application everywhere.

Designing a website to look good at one particular resolution was the

standard and that standard was adequate for almost all purposes. Now,
more and more people are viewing web content on smartphones and
tablets. The most successful websites must have content designed to fit
on any size screen or any type of device. Designing content in this
manner is also known as responsive web design. We need to give all
users, regardless of their access platform, a seamless experience, and
responsive web design offers a cost-efficient way of achieving that.
Responsive web content can dynamically change size, fonts, and colors
to match whatever device your customers might be using.

The most important dimensions of a responsive design are as follows:

An adaptive grid-based layout that must be responsive enough to the

client-side environment. There are two different approaches for an
adaptive layout: the first one is a fixed layout and the other one is a
fluid layout. Fluid layouts are always proportional to the screen size.
Fluid images must maintain the aspect ratio. To maintain the aspect
ratio, we can go for two approaches, either setting the max-height to
100 percent or max-width of 100 percent. This makes the images
overflow in either direction. The other way of handling the images is
 to clip a portion of the image, though it is not recommended.
The new CSS3 media queries make the browser more intelligent.
Now, browsers can make the decision to load the appropriate CSS
at runtime. This makes them adaptable to the client environment.

Note
Responsive design is made possible through the use of three core
ingredients: a flexible grid-based layout, flexible images and media,
and CSS media queries.

Benefits of a responsive design

The most important benefits of responsive web application are as follows:

Pleasant user experience in each type of device

Reduced development cost compared to developing different
applications for each device type
Reduced cost on advertising and marketing compared to maintaining
campaigns for every application for each device
Better indexing in search engines and improved search engine
optimization (SEO)
Increased conversion rates and lead generation as SEO is increased
(visibility of a web application in search engines)

Responsive web design uses a single code base, but in reality, different
devices have to be accounted for. While a desktop version can display a
lot of content at once, for smaller screens, you need to know exactly what
content truly matters. To create a great experience for all users, you need
to consider that people will use different devices in different
circumstances and with different goals. With a responsive web design,
more effort and time will be involved to get the right user experience for
your target audience.

If you look into different applications present online such as blogs and
sports applications, then you will notice that the end user behaviors are
sports applications, then you will notice that the end user behaviors are
similar and follow a common pattern. To provide the same experience for
the end users, the layout and other elements in the application must be
designed for customization. This needs more effort and time in
developing the layout and the code.
Server-versus client-side
detection
Addressing the issue of developing applications for different media types
and devices can be solved in two ways. The first one is the server-side
detection where middleware is responsible for reading the request
header sent by the browser and redirects the request to the appropriate
version of the application. This requires you to develop a different version
of the application. It means an e-commerce site must have a separate
code base for each type of device.

The second one is the client-side detection. It should be done by the

browser and apply relative CSS based on the device or screen type. With
this idea, the responsive design is born. The real benefit is that one has
to maintain a single code base for this.
The technology stack
The following diagram shows the building blocks for responsive web
application development. Each block in the diagram represents a
technology that enables responsive web application development.

HTML5
HTML5 is the latest version of HTML, released by the W3C foundation
with more modern features included such as more semantics and
usability features. This helps in responsive web application development
with more ease and less effort. Some of the key points that highlight why
HTML5 is a better candidate than other versions of HTML are as follows:

Inclusion of new HTML5 elements such as video and audio as native

reduces the use of an additional third-party plugin
Enhanced existing elements such as form element reduce the need
for an additional amount of code to be written
 Inclusion of Canvas and SVG for graphic rendering and drawing
adds additional capabilities

CSS3 and media queries

Features such as media type detection and layout manipulation of media
queries are useful to build a responsive layout. Some of the key points of
CSS3 are as follows:

CSS3 animations and transitions reduce the need for JavaScript

processing, favoring, instead, a native implementation that can vastly
improve performance on mobile devices where processing power
can be quite limited, while falling back gracefully to immediate
changes in browsers that do not support them.
Support of new measuring units such as rem helps in building a
logical relationship among elements' dimensions present inside a
page.
Ultimately, the vw and vh units will greatly enhance the ability of a
developer to size elements relative to the viewport.
FlexBox provides numerous benefits with direction-based alignment
and element ordering inside a layout. For a responsive design, this
means that a default ideal order can be established via the
document order to provide greater SEO benefits, while different
ordering can be provided based on viewport size, device orientation
type, and so on, to display content in the best format for a given use
case.

JavaScript
JavaScript brings the capability of feature detection for the browser. It
helps in choosing the right component for the end user and makes the
browser responsive to its environment.

Some of the key points about JavaScript are as follows:

Browser feature detection helps you to find features that are

supported by the browser. This helps in helps you to execute the
appropriate code in the application.
Rendering behavior of the site can be altered using JavaScript.
Measuring responsiveness
There are many parameters for measuring the responsiveness of an
application. Layout, content, and navigation are the three most important
parameters for a responsive web application development. The following
diagram shows the three different building blocks of a responsive web
application:

Layout: While developing a responsive web application for all kinds

of devices, the layout should be developed based on the available
size. Based on the breakpoints for each device size, the layout gets
altered. This includes show and hide of a section in the layout.
Content: For small screens, the available viewing space is very
small. While developing a responsive web application, the text
content must be responsive. It includes the typography, images, and
other media elements present inside the page.
Navigation: For touch-enabled devices, the navigational elements
will be different to those on medium devices. How these navigational
items are to be presented to the end user is really a design
challenge. It should be rendered seamless to the end user while
navigating in any devices.
Devices and screens
If you look at the gadget market for handheld devices, you can find a
wide range of devices with different screen sizes. If you ask me what the
optimal size for a device screen is, I probably could not answer you
without knowing the purpose. Each and every device is good for a
specific use. So, the optimal size of a screen is directly dependent on the
end user.

A wide screen with good graphics and pixel density may be the best fit for
a gaming end user. For a regular end user, a small device is a good fit.
The web application design must support all these screen sizes. The
usability and the user experience must be equivalent to all types of
screens. Also, it is much more important when it comes to an e-
commerce site. If the end user is browsing the site on a mobile device
and the e-commerce device is only designed for a desktop, then it does
not generate the same pleasant experience that will lose the leads.

The soul of an e-commerce site is lead generation and it is only possible

when the application will provide seamless access to the end user
irrespective of the browsing device. This clearly requires the application
to be responsive to its environment or adapt itself based on the screen or
device.
device.
Media types
All these devices (desktops, tablets, mobiles, and laptops) fall in one of
the following media types. The following figure shows all the media types
listed in the W3C specification:

Braille: This is used for braille tactile feedback devices.

Embossed: This is used for paged braille printers.
Handheld: This is used for handheld devices. Smartphones and
tablets do not fall to this.
Print: This is used for paged material and for documents viewed on
screen in the print preview mode.
Projection: This is used for projected presentations, for example,
projectors.
Screen: This is used primarily for color computer screens and
smartphones.
Speech: This is used for speech synthesizers.
TTY: This is used for media using a fixed-pitch character grid. It
includes teletypes, terminals, or portable devices with limited display
 capabilities.
TV: This is used for television type devices. It includes low
resolution, color, limited-scrollability screens, and audio.
Grid: This is used for visual and tactile media types.

Available expressions for media queries to filter the CSS rules are as
follows:

width: This is the width of the current window

height: This is the height of the current window
device-width: This is the width of the device
device-height: This is the height of the device
orientation: This should be either landscape or portrait
aspect-ratio: This is the aspect ratio of the current window
device-aspect-ratio: This is the aspect ratio of the device
color: This is the number of color bits per color component
color-index: This is the number of available colors on the device
monochrome: This is the number of bits per pixel in a monochrome
frame buffer
resolution: This is the resolution of the device
scan: This should be either progressive or interlace
Media queries
Media queries are one of the best features of CSS3. Using this feature,
we can decide which style sheet should be applied on the web page at
runtime.

Media queries can be used as external or internal style sheets. An

external style sheet is easier to organize; it is not downloaded by
browsers that don't support it, but it uses an extra HTTP request. An
internal style sheet, on the other hand, does not require an extra HTTP
request, but the whole style sheet is downloaded for browsers even if
they do not support media queries, and it can be harder to organize.

The following code is an example of an external media queries call:

<link rel="stylesheet" type="text/CSS" media="screen

and (max-device-width: 480px) " href="abc.css" />

The following code is an example of internal media queries:

body {
background: gray;
}
@media all and (max-width: 480px){
body{
background: blue;
}
}

Tip
Downloading the example code

You can download the example code files for all Packt books you
have purchased from your account at http://www.packtpub.com. If
you purchased this book elsewhere, you can visit
http://www.packtpub.com/support and register to have the files e-
mailed directly to you.
Role of media queries
CSS3 provides a new set of features called media queries for responsive
web application development. These media queries are helpful for
conditional CSS3 used on a page based on the media type, device width,
and other parameters. Generally, the following parameters help in
applying the correct CSS3 to the web page:

Height and width of the device refers to the size of the device
Height and width of the browser refers to the viewable area
Screen resolution refers to the pixel and color depth of the screen
Orientation of the device refers to the portrait or landscape mode

Using media queries, the layout can be designed in the following two
ways:

The adaptive layout: This is based on a pretty simple idea: instead

of using percentage, we will give our layout fixed sizes. The layout
will adapt those sizes depending of the width of the
browser/viewport, thus creating a layout with different breakpoints.
The responsive layout: This is a mix between fluid and adaptive
layouts. It will use the relative units of the fluid layout and the
breakpoints of the adaptive one.
Responsive frameworks
There are many frameworks available from different vendors for
responsive web application development. Some of the popular libraries
are explored in the following sections.

Bootstrap
Some of the key points about the Bootstrap framework are as follows:

Twitter's Bootstrap library is the most popular responsive framework.

It is based on mobile-first design strategy. The source code of the
projects is available in the SASS and LESS format.
Bootstrap 3, SASS, and LESS really helps in customizing modules
needed for the project.
There are many resources and plugins available on the Internet for
the Bootstrap framework.
You can get more information from http://getbootstrap.com/.

The Foundation framework

Some of the key points about the Foundation framework are as follows:

Foundation framework is yet another popular responsive framework

by ZURB foundation
Foundation Version 5 follows mobile-first design strategy (designing
your site or app for the small device first, and then expanding that to
include larger displays and more full-featured devices)
The major benefit of Foundation framework is that the rem unit is
used for its sizing of fonts and positioning
You can get more information from http://foundation.zurb.com/

The Cascade framework

Some of the key points about the Cascade framework are as follows:
 The Cascade framework is lightweight and modular.
The code packages in the Cascade framework are done based on
their features.
For example, for coloring purpose, there is a color module to be
invoked and used. All features of Cascade framework support
Internet Explorer from IE6 upwards or degrade gracefully.
The whole library comes under four different modules: grid,
typography, icons, and components. It has also some reusable web
page templates in a different section.
You can get more information from http://www.cascade-
framework.com/.

The Pure CSS framework

Some of the key points about the Pure CSS framework are as follows:

Pure CSS is a lightweight responsive framework by Yahoo Inc.

The Pure CSS library is very tiny in size, and is about 4.4 KB
minified and compressed version. This library targets mobile
devices.
The core of this library is Normalize.css. The Normalize library
provides layout and styling of the HTML elements.
You can get more information from http://purecss.io/.

The Gumby framework

Some of the key points about the Gumby framework are as follows:

The Gumby framework is incredibly customizable

It's as easy as download, tweak, and deploy
Gumby is built on the SASS authoring framework
Most eye-catching features in Grid modules such as Basic Grid,
Hybrid Grid, Nested Grid, Sematic Grids, Tiles, and Fancy tiles are
part of the Gumby framework
You can get more information from http://gumbyframework.com/
Bootstrap 3 for a responsive
design
There are many components and utilities available for responsive web
application development in Bootstrap. Bootstrap features are available in
the following three different modules:

CSS: This module has a lot of standard classes to use and is easily
extendable for customization
Component: This module has all the reusable built-in components
JavaScript: This module has the jQuery plugin in Bootstrap style

Some important features that we are going to use in our web application
development are presented in the following diagram:

Grid layout: This module has different grid classes for xs, sm, md,
and lg type devices. The details of these grid classes are listed as
follows:

xs stands for extra small devices. For example, a phone's

screen resolution is less than 768 pixels.
xm stands for small devices. For example, a tablet's screen
resolution is greater than or equal to 768 pixels.
md stands for medium devices. For example, a desktop's
screen resolution is greater than or equal to 992 pixels.
lg stands for large devices. For example, a desktop's screen
resolution is greater than or equal to 1200 pixels.

Typography: This module has different classes based on the font size
requirements.
 Responsive utilities: This module contains classes for conditional
classes based on the types of devices.
HTML5 elements: This module has default style classes for all HTML5
elements.
Helper classes: This module has classes for frequently used
alignment and positioning issues.
JS components: This module has additional components such as
carousel, tooltip, popover, and so on.
What are we building?
We are going to use the Bootstrap 3 framework for responsive web
application development. In the following chapters, we will build an e-
commerce web application that will be responsive in design.

The plan is as follows:

Building the layout for the application

Populating the content in the layout
Integrating the application with social media sites
Integrating a payment system with the Add to Cart feature
Building a currency converter
Debugging and testing the web application for responsiveness
Summary
In this chapter, we have learned about the need for a responsive web
application and what challenges it brings to a web developer. We have
also learned about the latest responsive libraries available for
development. We have understood how a responsive layout can increase
the user experience. In the following chapter, we will learn to develop a
responsive layout using CSS3.
Chapter 2. Creating a Responsive
Layout for a Web Application
In this chapter, we will set up our Java-based web project and develop
the layout required to create our responsive web application. The process
of developing the layout follows a step-wise approach. Initially, we will
draw a wireframe for the layout, and then, we will prepare code for each
section using Bootstrap 3 classes. Later on in this chapter, we will verify
the layout with different screen sizes using some tools.

Required software and tools

We need the following software to be installed to develop the responsive
web application:

An Eclipse Java EE IDE of Juno/Kepler version for web developers

(http://www.eclipse.org)
Apache Tomcat 7
Opera Mobile emulator
The draw.io online tool
The Mozilla Firefox browser
The Google Chrome browser
Setting up a Java-based web
project
In this section, we will set up a Java-based web project in Eclipse. To do
this, we have to create a new dynamic web project. The following
screenshot shows the window to create a new web project. In Eclipse,
click on the File button and choose New to list the different project types
present in Eclipse.

The different available project types present are shown in the following
screenshot. When this window appears, choose the Dynamic Web
Project option.
When you have chosen the Dynamic Web Project option, a New
Dynamic Web Project window will open asking for Project name, as
shown in the following screenshot:
Random documents with unrelated
content Scribd suggests to you:
The Project Gutenberg eBook of The Invaders,
and Other Stories
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: The Invaders, and Other Stories

Author: graf Leo Tolstoy

Translator: Nathan Haskell Dole

Release date: March 20, 2018 [eBook #56797]

Language: English

Credits: Produced by Clare Graham & Marc D'Hooghe at Free

Literature
(Images generously made available by the Internet
Archive.)

*** START OF THE PROJECT GUTENBERG EBOOK THE INVADERS,

AND OTHER STORIES ***
THE INVADERS
AND

OTHER STORIES

BY
COUNT LYOF N. TOLSTOI
TRANSLATED FROM THE RUSSIAN

BY

NATHAN HASKELL DOLE

NEW YORK

THOMAS Y. CROWELL & CO.

13 ASTOR PLACE

1887

CONTENTS.

THE INVADERS.
THE WOOD-CUTTING EXPEDITION.
AN OLD ACQUAINTANCE.
LOST ON THE STEPPE; OR, THE SNOWSTORM.
POLIKUSHKA.
KHOLSTOMÍR.

THE INVADERS.[1]

A VOLUNTEER'S NARRATIVE.
 I.
On the 24th of July, Captain Khlopof in epaulets and cap—a style of
dress in which I had not seen him since my arrival in the Caucasus—
entered the low door of my earth-hut.
"I'm just from the colonel's," he said in reply to my questioning look;
"to-morrow our battalion is to move."
"Where?" I asked.
"To N——. The troops have been ordered to muster at that place."
"And probably some expedition will be made from there?"
"Of course."
"In what direction, think you?"
"I don't think. I tell you all I know. Last night a Tatar from the
general came galloping up,—brought orders for the battalion to
march, taking two days' rations. But whither, why, how long, isn't for
them to ask. Orders are to go—that's enough."
"Still, if they are going to take only two days' rations, it's likely the
army will not stay longer."
"That's no argument at all."
"And how is that?" I asked with astonishment.
"This is the way of it: When they went against Dargi they took a
week's rations, but they spent almost a month."
"And can I go with you?" I asked, after a short silence.
"Yes, you can go; but my advice is—better not. Why run the risk?"
"No, allow me to disregard your advice. I have been spending a
whole month here for this very purpose,—of having a chance to see
action,—and you want me to let it have the go-by!"
"All right, come with us; only isn't it true that it would be better for
you to stay behind? You could wait for us here, you could go
hunting. But as to us,—God knows what will become of us!... And
that would be first-rate," he said in such a convincing tone that it
seemed to me at the first moment that it would actually be first-rate.
Nevertheless, I said resolutely that I wouldn't stay behind for any
thing.
"And what have you to see there?" said the captain, still trying to
dissuade me. "If you want to learn how battles are fought, read
Mikhaïlovski Danilevski's 'Description of War,' a charming book; there
it's all admirably described,—where every corps stands, and how
battles are fought."
"On the contrary, that does not interest me," I replied.
"Well, now, how is this? It simply means that you want to see how
men kill each other, doesn't it?... Here in 1832 there was a man like
yourself, not in the regular service,—a Spaniard, I think he was. He
went on two expeditions with us,... in a blue mantle or something of
the sort, and so the young fellow was killed. Here, bátiushka, one is
not surprised at any thing."
Ashamed as I was at the captain's manifest disapprobation of my
project, I did not attempt to argue him down.
"Well, he was brave, wasn't he?"
"God knows as to that. He always used to ride at the front.
Wherever there was firing, there he was."
"So he must have been brave, then," said I.
"No, that doesn't signify bravery,—his putting himself where he
wasn't called."
"What do you call bravery, then?"
"Bravery, bravery?" repeated the captain with the expression of a
man to whom such a question presents itself for the first time. "A
brave man is one who conducts himself as he ought," said he after a
brief consideration.
I remembered that Plato defined bravery as the knowledge of what
one ought and what one ought not to fear; and in spite of the
triteness and obscurity in the terminology of the captain's definition,
I thought that the fundamental conception of both was not so unlike
as might at first sight appear, and that the captain's definition was
even more correct than the Greek philosopher's, for the reason, that,
if he could have expressed himself as Plato did, he would in all
probability have said that that man is brave who fears only what he
ought to fear and not what there is no need of fearing.
I was anxious to explain my thought to the captain.
"Yes," I said, "it seems to me that in every peril there is an
alternative, and the alternative adopted under the influence of, say,
the sentiment of duty, is bravery, but the alternative adopted under
the influence of a lower sentiment is cowardice; therefore it is
impossible to call a man brave who risks his life out of vanity or
curiosity or greediness, and, vice versa, the man who under the
influence of the virtuous sentiment of family obligation, or simply
from conviction, avoids peril, cannot be called a coward."
The captain looked at me with a queer sort of expression while I was
talking.
"Well, now, I don't know how to reason this out with you," said he,
filling his pipe, "but we have with us a junker, and he likes to
philosophize. You talk with him. He also writes poetry."
I had only become intimate with the captain in the Caucasus, but I
had known him before in Russia. His mother, Marya Ivanovna
Khlopova, the owner of a small landed estate, lives about two
versts[2] from my home. Before I went to the Caucasus I visited her.
The old lady was greatly delighted that I was going to see her
Páshenka[3] (thus she called the old gray-haired captain), and, like a
living letter, could tell him about her circumstances and give him a
little message. Having made me eat my fill of a glorious pie and
roast chicken, Marya Ivanovna went to her sleeping-room and came
back with a rather large black relic-bag,[4] to which was attached
some kind of silken ribbon.
"Here is this image of our Mother-Intercessor from the September
festival," she said, kissing the picture of the divine Mother attached
to the cross, and putting it into my hand. "Please give it to him,
bátiushka. You see, when he went to the Kaikaz, I had a Te Deum
sung, and made a vow, that if he should be safe and sound, I would
order this image of the divine Mother. And here it is seventeen years
that the Mátushka and the saints have had him in their keeping; not
once has he been wounded, and what battles he has been in, as it
seems!... When Mikhailo, who was with him, told me about it, my
hair actually stood on end. You see, all that I know about him I have
to hear from others; he never writes me any thing about his doings,
my dove,[5]—he is afraid of frightening me."
(I had already heard in the Caucasus, but not from the captain
himself, that he had been severely wounded four times; and, as was
to be expected, he had not written his mother about his wounds any
more than about his campaigns.)
"Now let him wear this holy image," she continued. "I bless him with
it. The most holy Intercessor protect him, especially in battle may
she always look after him! And so tell him, my dear, friend,[6] that
thy mother gave thee this message."
I promised faithfully to fulfil her commission.
"I know you will be fond of him, of my Páshenka," the old lady
continued,—"he is such a splendid fellow! Would you believe me, not
a year goes by without his sending me money, and he also helps
Annushka my daughter, and all from his wages alone. Truly I shall
always thank God," she concluded with tears in her eyes, "that he
has given me such a child."
"Does he write you often?" I asked.
"Rarely, bátiushka,—not more than once a year; and sometimes
when he sends money he writes a little word, and sometimes he
doesn't. 'If I don't write you, mámenka,' he says, 'it means that I'm
alive and well; but if any thing should happen,—which God forbid,—
then they will write you for me.'"
When I gave the captain his mother's gift (it was in my room), he
asked me for some wrapping-paper, carefully tied it up, and put it
away. I gave him many details of his mother's life: the captain was
silent. When I had finished, he went into a corner, and took a very
long time in filling his pipe.
"Yes, she's a fine old lady," said he from the corner, in a rather
choked voice: "God grant that we may meet again!"
Great love and grief were expressed in these simple words.
"Why do you serve here?" I asked.
"Have to serve," he replied with decision. "And double pay means a
good deal for our brother, who is a poor man."
The captain lived economically; he did not play cards, he rarely
drank to excess, and he smoked ordinary tobacco, which from some
inexplicable reason he did not call by its usual name,[7] but
sambrotalicheski tabák. The captain had pleased me even before
this. He had one of those simple, calm Russian faces, and looked
you straight in the eye agreeably and easily. But after this
conversation I felt a genuine respect for him.
[1] Nabég (pronounced Na-be-ukh), the Invasion or Raid.
[2] One and a third miles.
[3] An affectionate diminished diminutive: Pavel (Paul), Pasha,
Pashenka.
[4] ládanka, the bag containing sacred things worn by the pious,
together with the baptismal cross.
[5] golubchik.
[6] moï bátiushka.
[7] tiutiún.
 II.
At four o'clock on the morning of the next day, the captain came
riding up to my door. He had on an old well-worn coat without
epaulets, wide Lesghian trousers, a round white Circassian cap, with
drooping lambskin dyed yellow, and an ugly-looking Asiatic sabre
across his shoulder. The little white horse[8] on which he rode came
with head down, and mincing gait, and kept switching his slender
tail. In spite of the fact that the good captain's figure was neither
very warlike nor very handsome, yet there was in it such an
expression of good-will toward every one around him, that it inspired
involuntary respect.
I did not keep him waiting a minute, but immediately mounted, and
we rode off together from the gate of the fortress.
The battalion was already two hundred sazhens[9] ahead of us, and
had the appearance of some black, solid body in motion. It was
possible to make out that it was infantry, only from the circumstance
that while the bayonets appeared like long, dense needles,
occasionally there came to the ear the sounds of a soldier's song,
the drum, and a charming tenor, the leader of the sixth company,—a
song which I had more than once enjoyed at the fort.
The road ran through the midst of a deep, wide ravine, or balka as it
is called in the Caucasian dialect, along the banks of a small river,
which at this time was playing, that is, was having a freshet. Flocks
of wild pigeons hovered around it, now settling on the rocky shore,
now wheeling about in mid-air in swift circles and disappearing from
sight.
The sun was not yet visible, but the summit of the balka on the right
began to grow luminous. The gray and white colored crags, the
greenish-yellow moss wet with dew, the clumps of different kinds of
wild thorn,[10] stood out extraordinarily distinct and rotund in the
pellucid golden light of the sunrise.
On the other hand, the ravine, hidden in thick mist which rolled up
like smoke in varying volumes, was damp, and dark, and gave the
impression of an indistinguishable mixture of colors—pale lilac,
almost purple, dark green, and white.
Directly in front of us, against the dark blue of the horizon, with
startling distinctness appeared the dazzling white, silent masses of
the snow-capped mountains with their marvellous shadows and
outlines exquisite even in the smallest details. Crickets,
grasshoppers, and a thousand other insects, were awake in the tall
grass, and filled the air with their sharp, incessant clatter: it seemed
as though a numberless multitude of tiny bells were jingling in our
very ears. The atmosphere was alive with waters, with foliage, with
mist; in a word, had all the life of a beautiful early summer morning.
The captain struck a light, and began to puff at his pipe; the
fragrance of sambrotalicheski tabák and of the punk struck me as
extremely pleasant.
We rode along the side of the road so as to overtake the infantry as
quickly as possible. The captain seemed more serious than usual; he
did not take his Daghestan pipe from his mouth, and at every step
he dug his heels into his horse's legs as the little beast, capering
from one side to the other, laid out a scarcely noticeable dark green
track through the damp, tall grass. Up from under his very feet, with
its shrill cry,[11] and that drumming of the wings that is so sure to
startle the huntsman in spite of himself, flew the pheasant, and
slowly winged its flight on high. The captain paid him not the
slightest attention.
"We had almost overtaken the battalion, when behind us was heard
the sound of a galloping horse, and in an instant there rode by us a
very handsome young fellow in an officer's coat, and a tall white
Circassian cap.[12] As he caught up with us he smiled, bowed to the
captain, and waved his whip.... I only had time to notice that he sat
in the saddle and held the bridle with peculiar grace, and that he
had beautiful dark eyes, a finely cut nose, and a mustache just
beginning to grow. I was particularly attracted by the way in which
he could not help smiling, as if to impress it upon us that we were
friends of his. If by nothing else than his smile, one would have
known that he was still very young.
"And now where is he going?" grumbled the captain with a look of
dissatisfaction, not taking his pipe from his mouth.
"Who is that?" I asked.
"Ensign Alánin, a subaltern officer of my company.... Only last month
he came from the School of Cadets."
"This is the first time that he is going into action, I suppose?" said I.
"And so he is overjoyed," replied the captain thoughtfully, shaking
his head; "it's youth."
"And why shouldn't he be glad? I can see that for a young officer
this must be very interesting."
The captain said nothing for two minutes.
"And that's why I say 'it's youth,'" he continued in a deep tone.
"What is there to rejoice in, when there's nothing to see? Here when
one goes often, one doesn't find any pleasure in it. Here, let us
suppose there are twenty of us officers going: some of us will be
either killed or wounded; that's likely. To-day my turn, to-morrow
his, the next day somebody else's. So what is there to rejoice in?"
[8] mashtak in the Caucasian dialect.
[9] Fourteen hundred feet.
[10] Paliurus, box-thorn, and karachag.
[11] tordoka'yé.
[12] papákha.

III.
Scarcely had the bright sun risen above the mountains, and begun
to shine into the valley where we were riding, when the undulating
clouds of mist scattered, and it grew warm. The soldiers with guns
and knapsacks on their backs marched slowly along the dusty road.
In the ranks were frequently heard Malo-Russian dialogues and
laughter. A few old soldiers in white linen coats—for the most part
non-commissioned officers—marched along the roadside with their
pipes, engaged in earnest conversation. The triple rows of heavily
laden wagons advanced step by step, and raised a thick dust, which
hung motionless.
The mounted officers rode in advance; a few jiggited, as they say in
the Caucasus;[13] that is, applying the whip to their horses, they
spurred them on to make four or five leaps, and then reined them in
suddenly, pulling the head back. Others listened to the song-singers,
who notwithstanding the heat and the oppressive air indefatigably
tuned up one song after another.
A hundred sazhens in advance of the infantry, on a great white
horse, surrounded by mounted Tatars, rode a tall, handsome officer
in Asiatic costume, known to the regiment as a man of reckless
valor, one who cuts any one straight in the eyes![14] He wore a black
Tatar half-coat or beshmét trimmed with silver braid, similar
trousers, new leggings[15] closely laced with chirazui as they call
galloons in the Caucasus, and a tall, yellow Cherkessian cap worn
jauntily on the back of his head. On his breast and back were silver
lacings. His powder-flask and pistol were hung at his back; another
pistol, and a dagger in a silver sheath, depended from his belt.
Besides all this was buckled on a sabre in a red morocco sheath
adorned with silver; and over the shoulder hung his musket in a
black case.
By his garb, his carriage, his manner, and indeed by every motion, it
was manifest that his ambition was to ape the Tatars. He was just
saying something, in a language that I did not understand, to the
Tatars who rode with him; but from the doubtful, mocking glances
which these latter gave each other, I came to the conclusion that
they did not understand him either.
This was one of our young officers of the dare-devil, jigit order, who
get themselves up à la Marlinski and Lermontof. These men look
upon the Caucasus, as it were, through the prism of the "Heroes of
our Time," Mulla-Nurof[16] and others, and in all their activities are I
directed not by their own inclinations but by the example of these
models.
This lieutenant, for instance, was very likely fond of the society of
well-bred women and men of importance, generals, colonels,
adjutants,—I may even go so far as to believe that he was very fond
of this society, because he was in the highest degree vainglorious,—
but he considered it his unfailing duty to show his rough side to all
important people, although he offended them always more or less;
and when any lady made her appearance at the fortress, then he
considered it his duty to ride by her windows with his cronies, or
kunaki as they are called in the dialect of the Caucasus, dressed in a
red shirt and nothing but chuviaki on his bare legs, and shouting and
swearing at the top of his voice—but all this not only with the desire
to insult her, but also to show her what handsome white legs he
had, and how easy it would be to fall in love with him if only he
himself were willing. Or he often went by at night with two or three
friendly Tatars to the mountains into ambush by the road so as to
take by surprise and kill hostile Tatars coming along; and though
more than once his heart told him that there was nothing brave in
such a deed, yet he felt himself under obligations to inflict suffering
upon people in whom he thought that he was disappointed, and
whom he affected to hate and despise. He always carried two
things,—an immense holy image around his neck, and a dagger
above his shirt. He never took them off, but even went to bed with
them. He firmly believed that enemies surrounded him. It was his
greatest delight to argue that he was under obligations to wreak
vengeance on some one and wash out insults in blood. He was
persuaded that spite, vengeance, and hatred of the human race
were the highest and most poetical of feelings. But his mistress,—a
Circassian girl course,—whom I happened afterwards to meet, said
that he was the mildest and gentlest of men, and that every evening
he wrote in his gloomy diary, cast up his accounts on ruled paper,
and got on his knees to say his prayers. And how much suffering he
endured, to seem to himself only what he desired to be, because his
comrades and the soldiers could not comprehend him as he desired!
Once, in one of his nocturnal expeditions with his Tatar friends, it
happened that he put a bullet into the leg of a hostile Tchetchenets,
and took him prisoner. This Tchetchenets for seven weeks thereafter
lived with the lieutenant; the lieutenant dressed his wound, waited
on him as though he were his nearest friend, and when he was
cured sent him home with gifts. Afterwards, during an expedition
when the lieutenant was retreating from the post, having been
repulsed by the enemy, he heard some one call him by name, and
his wounded kunák strode out from among the hostile Tatars, and
by signs asked him to do the same. The lieutenant went to meet his
kunák, and shook hands with him. The mountaineers stood at some
little distance, and refrained from firing; but, as soon as the
lieutenant turned his horse to go back, several shot at him, and one
bullet grazed the small of his back.
Another time I myself saw a fire break out by night in the fortress,
and two companies of soldiers were detailed to put it out. Amid the
crowd, lighted up by the ruddy glare of the fire, suddenly appeared
the tall form of the man on a coal-black horse. He forced his way
through the crowd, and rode straight to the fire. As soon as he came
near, the lieutenant leaped from his horse, and hastened into the
house, which was all in flames on one side. At the end of five
minutes he emerged with singed hair and burned sleeves, carrying
in his arms two doves which he had rescued from the flames.
His name was Rosenkranz; but he often spoke of his ancestry, traced
it back to the Varangians, and clearly showed that he and his
forefathers were genuine Russians.
[13] jigit or djigit in the Kumuits dialect signifies valiant. The
Russians make from it the verb jigitovat.
[14] That is, known for telling the plain truth.
[15] chuviaki.
 [16] The name of a character In one of Marlinski's novels.

IV.
The sun had travelled half its course, and was pouring down through
the glowing atmosphere its fierce rays upon the parched earth. The
dark blue sky was absolutely clear; only the bases of the snow-
capped mountains began to clothe themselves in pale lilac clouds.
The motionless atmosphere seemed to be full of some impalpable
dust; it became intolerably hot.
When the army came to a small brook that had overflowed half the
road, a halt was called. The soldiers, stacking their arms, plunged
into the stream. The commander of the battalion sat down in the
shade, on a drum, and, showing by his broad countenance the
degree of his rank, made ready, in company with a few officers, to
take lunch. The captain lay on the grass under the company's
transport-wagon; the gallant lieutenant Rosenkranz and some other
young officers, spreading out their Caucasian mantles, or burki,
threw themselves down, and began to carouse as was manifest by
the flasks and bottles scattered around them and by the
extraordinary liveliness of their singers, who, standing in a half-circle
behind them, gave an accompaniment to the Caucasian dance-song
sung by a Lesghian girl:—
Shamyl resolved to make a league
In the years gone by,
Traï-raï, rattat-taï,
In the years gone by.
Among these officers was also the young ensign who had passed us
in the morning. He was very entertaining: his eyes gleamed, his
tongue never grew weary. He wanted to greet every one, and show
his good-will to them all. Poor lad! he did not know that in acting
this way he might be ridiculous, that his frankness and the
gentleness which he showed to every one might win for him, not the
love which he so much desired, but ridicule; he did not know this
either, that when at last, thoroughly heated, he threw himself down
on his burka, and leaned his head on his hand, letting his thick black
curls fall over, he was a very picture of beauty.
Two officers crouched under a wagon, and were playing cards on a
hamper.
I listened with curiosity to the talk of the soldiers and officers, and
attentively watched the expression of their faces; but, to tell the
truth, in not one could I discover a shadow of that anxiety which I
myself felt; jokes, laughter, anecdotes, expressed the universal
carelessness, and indifference to the coming peril. How impossible to
suppose that it was not fated for some never again to pass that
road!

V.
At seven o'clock in the evening, dusty and weary, we entered the
wide, fortified gate of Fort N——. The sun was setting, and shed
oblique rosy rays over the picturesque batteries and lofty-walled
gardens that surrounded the fortress, over the fields yellow for the
harvest, and over the white clouds which, gathering around the
snow-capped mountains, simulated their shapes, and formed a chain
no less wonderful and beauteous. A young half moon, like a
translucent cloud, shone above the horizon. In the native village or
aul, situated near the gate, a Tatar on the roof of a hut was calling
the faithful to prayer. The singers broke out with new zeal and
energy.
After resting and making my toilet I set out to call upon an adjutant
who was an acquaintance of mine, to ask him to make my intention
known to the general. On the way from the suburb where I was
quartered, I chanced to see a most unexpected spectacle in the
fortress of N——. I was overtaken by a handsome two-seated
vehicle in which I saw a stylish bonnet, and heard French spoken.
From the open window of the commandant's house came floating
the sounds of some "Lízanka" or "Kátenka" polka played upon a
wretched piano, out of tune. In the tavern which I was passing were
sitting a number of clerks over their glasses of wine, with cigarettes
in their hands, and I overheard one saying to another,—
"Excuse me, but taking politics into consideration, Márya
Grigór'yevna is our first lady."
A humpbacked Jew of sickly countenance, dressed in a dilapidated
coat, was creeping along with a shrill, broken-down hand-organ; and
over the whole suburb echoed the sounds of the finale of "Lucia."
Two women in rustling dresses, with silk kerchiefs around their necks
and bright-colored sun-shades in their hands, hastened past me on
the plank sidewalk. Two girls, one in pink, the other in a blue dress,
with uncovered heads, were standing on the terrace of a small
house, and affectedly laughing with the obvious intention of
attracting the notice of some passing officers. Officers in new coats,
white gloves, and glistening epaulets, were parading up and down
the streets and boulevards.
I found my acquaintance on the lower floor of the general's house. I
had scarcely had time to explain to him my desire, and have his
assurance that it could most likely be gratified, when the handsome
carriage, which I had before seen, rattled past the window where I
was sitting. From the carriage descended a tall, slender man, in
uniform of the infantry service and major's epaulets, and came up to
the general's rooms.
"Akh! pardon me, I beg of you," said the adjutant, rising from his
place: "it's absolutely necessary that I tell the general."
"Who is it that just came?" I asked.
"The countess," he replied, and donning his uniform coat hastened
up-stairs.
In the course of a few minutes there appeared on the steps a short
but very handsome man in a coat without epaulets, and a white
cross in his button-hole. Behind him came the major, the adjutant,
and two other officers.
In his carriage, his voice, in all his motions, the general showed that
he had a very keen appreciation of his high importance.
"Bon soir, Madame la Comtesse," he said, extending his hand
through the carriage window.
A dainty little hand in dog-skin glove took his hand, and a pretty,
smiling little visage under a yellow bonnet appeared in the window.
From the conversation which lasted several minutes, I only heard, as
I went by, the general saying in French with a smile,—
"You know that I have vowed to fight the infidels; beware of
becoming one!"
A laugh rang from the carriage.
"Adieu donc, cher général."
"Non, au revoir," said the general, returning to the steps of the
staircase; "don't forget that I have invited myself for to-morrow
evening.".
The carriage drove away.
"Here is a man," said I to myself as I went home, "who has every
thing that Russians strive after,—rank, wealth, society,—and this
man, before a battle the outcome of which God only knows, jests
with a pretty little woman, and promises to drink tea with her on the
next day, just as though he had met her at a ball!"
There at that adjutant's I became acquainted with a man who still
more surprised me; it was the young lieutenant of the K. regiment,
who was distinguished for his almost feminine mildness and
cowardice. He came to the adjutant to pour out his peevishness and
ill humor against those men who, he thought, were intriguing
against him to keep him from taking part in the matter in hand.
He declared that it was hateful to be treated so, that it was not
doing as comrades ought, that he would remember him, and so
forth.
As soon as I saw the expression of his face, as soon as I heard the
sound of his voice, I could not escape the conviction that he was not
only not putting it on, but was deeply stirred and hurt because he
was not allowed to go against the Cherkess, and expose himself to
their fire: he was as much hurt as a child is hurt who is unjustly
punished. I could not understand it at all.

VI.
At ten o'clock in the evening the troops were ordered to march. At
half-past nine I mounted my horse, and started off to find the
general; but on reflecting that he and his adjutant must be busy, I
remained in the street, and, tying my horse to a fence, sat down on
the terrace to wait until the general should come.
The heat and glare of the day had already vanished in the fresh
night air; and the obscure light of the young moon, which, infolding
around itself a pale gleaming halo against the dark blue of the starry
sky, was beginning to decline. Lights shone in the windows of the
houses and in the chinks of the earth huts. The gracefully
proportioned poplars in the gardens, standing out against the
horizon from behind the earth huts, whose reed-thatched roofs
gleamed pale in the moonlight, seemed still taller and blacker.
The long shadows of the houses, of the trees, of the fences, lay
beautifully across the white dusty road. In the river rang incessantly
the voice of the frogs;[17] in the streets were heard hurrying steps,
and sounds of voices, and the galloping of horses. From the suburb
came floating, now and again, the strains of the hand-organ; now
the popular Russian air, "The winds are blowing," now one of the
Aurora waltzes.
I will not tell what my thoughts were: in the first place, because I
should be ashamed to confess to the melancholy ideas which
without cessation arose in my mind, while all around me I perceived
only gayety and mirth; and, in the second place, because they have
nothing to do with my story.
I was so deeply engrossed in thought, that I did not notice that the
bell was ringing for eleven o'clock, and the general was riding past
me with his suite.
The rearguard was just at the fortress gate. I galloped at full speed
across the bridge, amid a crush of cannon, caissons, military
wagons, and commanding officers shouting at the top of their
voices. After reaching the gate, I rode at a brisk trot for almost a
verst, past the army stretched out and silently moving through the
darkness, and overtook the general. As I made my way past the
mounted artillery dragging their ordnance, amid the cannon and
officers, a German voice, like a disagreeable dissonance interrupting
soft and majestic harmony, struck my ear. It screamed,
"Agkhtingkhist,[18] bring a linstock."
And a soldier's voice replied, quick as a flash, "Chevchenko! the
lieutenant asks for a light!"
The greater part of the sky had become enveloped in long steel-gray
clouds: here and there gleamed from between them the lustreless
stars. The moon was now sinking behind the near horizon of dark
mountains which were on the right; and it shed on their summits a
feeble, waning, half light, which contrasted sharply with the
impenetrable darkness that marked their bases.
The air was mild, and so still, that not a single grass-blade, not a
single mist-wreath, moved. It became so dark, that it was impossible
to distinguish objects, even though very near at hand. On the side of
the road, there seemed to me sometimes to be rocks, sometimes
animals, sometimes strange men; and I knew that they were bushes
only when I heard them rustle, and felt the coolness of the dew with
which they were covered. In front of me I saw a dense, waving
black shadow, behind which followed a few moving spots; this was
the van-guard of cavalry, and the general with his suite. Between us
moved another similar black mass, but this was not as high as the
first; this was the infantry.
Such silence reigned in the whole detachment, that there could be
plainly distinguished all the harmonious voices of the night, full of
mysterious charm. The distant melancholy howls of jackals,
sometimes like the wails of despair, sometimes like laughter; the
monotonous ringing song of the cricket, the frog, the quail; a
gradually approaching murmur, the cause of which I could not make
clear to my own mind; and all those nocturnal, almost audible
motions of nature, which it is so impossible either to comprehend or
define,—unite into one complete, beautiful harmony which we call
silent night.
This silence was broken, or rather was unified, by the dull thud of
the hoofs, and the rustling of the tall grass through which the
division was slowly moving.
Occasionally, however, was heard in the ranks the ring of a heavy
cannon, the sound of clashing bayonets, stifled conversation, and
the snorting of a horse.
Nature breathed peacefully in beauty and power.
Is it possible that people find no room to live together in this
beautiful world, under this boundless starry heaven? Is it possible
that amid this bewitching nature, the soul of man can harbor the
sentiments of hatred and revenge, or the passion for inflicting
destruction upon his kind? All ugly feelings in the heart of man
ought, it would seem, to vanish away in this intercourse with nature,
—with this immediate expression of beauty and goodness!
[17] The frogs in the Caucasus make a sound entirely different
from the Kvakan'yé of the Russian frogs.
[18] German mispronunciation for Antichrist, the accent of which
in Russian falls on the penult.

VII.
We had now been marching more than two hours. I began to feel
chilly, and to be overcome with drowsiness. In the darkness the
same indistinct objects dimly appeared: at a little distance, the same
black shadow, the same moving spots. Beside me was the crupper of
a white horse, which switched his tail and swung his hind-legs in
wide curves. I could see a back in a white Circassian shirt, against
which was outlined a carbine in its black case, and the handle of a
pistol in an embroidered holster: the glow of a cigarette casting a
gleam on a reddish mustache, a fur collar, and a hand in a chamois-
skin glove.
I leaned over my horse's neck, closed my eyes, and lost myself for a
few minutes: then suddenly the regular hoof-beat[19] and rustling
came into my consciousness again. I looked around, and it seemed
to me as though I were standing still in one spot, and that the black
shadow in front of me was moving down upon me; or else that the
shadow stood still, and I was rapidly riding down upon it.
At one such moment I was more strongly than ever impressed by
that incessantly approaching sound, the cause of which I could not
fathom: it was the roar of water. We were passing though a deep
gulch, and coming close to a mountain river, which at that season
was in full flood.[20] The roaring became louder, the damp grass
grew taller and thicker, bushes were encountered in denser clumps,
and the horizon narrowed itself down to closer limits. Now and then,
in different places in the dark hollows of the mountains, bright fires
flashed out and were immediately extinguished.
"Tell me, please, what are those fires," I asked in a whisper of the
Tatar riding at my side.
"Don't you really know?" was his reply.
"No," said I.
"That is mountain straw tied to a pole,[21] and the light is waved."
"What for?"
"So that every man may know the Russian is coming. Now in the
Auls," he added with a smile, "aï, aï the tomásha[22] are flying
about; every sort of khurda-murda[23] will be hurried into the
ravines."
"How do they know so soon in the mountains that the expedition is
coming?" I asked.
"Eï! How can they help knowing? It's known everywhere: that's the
kind of people we are."
"And so Shamyl is now getting ready to march out?" I asked.
"Yok (no)," he replied, shaking his head as a sign of negation,
"Shamyl will not march out. Shamyl will send his naïbs[24] and he
himself will look down from up yonder through his glass."
"But doesn't he live a long way off?"
"Not a long way off. Here, at your left, about ten versts he will be."
"How do you know that?" I inquired. "Have you been there?"
"I've been there. All of us in the mountains have."
"And you have seen Shamyl?"
"Pikh! Shamyl is not to be seen by us. A hundred, three hundred, a
thousand murids[25] surround him. Shamyl will be in the midst of
them," he said with an expression of fawning servility.
Looking up in the air, it was possible to make out that the sky which
had become clear again was lighter in the east, and the Pleiades
were sinking down into the horizon. But in the gulch through which
we were passing, it was humid and dark.
Suddenly, a little in advance of us, from out the darkness flashed a
number of lights; at the same instant, with a ping some bullets
whizzed by, and from out the silence that surrounded us from afar
arose the heavy, overmastering roar of the guns. This was the
vanguard of the enemy's pickets. The Tatars, of which it was
composed, set up their war-cry, shot at random, and fled in all
directions.
Every thing became silent again. The general summoned his
interpreter. The Tatar in a white Circassian dress hastened up to him,
and the two held a rather long conversation in a sort of whisper and
with many gestures.
"Colonel Khasánof! give orders to scatter the enemy," said the
general in a low, deliberate, but distinct tone of voice.
The division went down to the river. The black mountains stood back
from the pass; it was beginning to grow light. The arch of heaven, in
which the pale, lustreless stars were barely visible, seemed to come
closer; the dawn began to glow brightly in the east; a cool,
penetrating breeze sprang up from the west, and a bright mist like
steam arose from the foaming river.
[19] topot.
[20] In the Caucasus the freshets take place in the mouth of July.
[21] tayak in the Caucasian dialect.
[22] tomásha means slaves in the ordinary dialect invented for
intercourse between Russians and Tatars. There are many words
in this strange dialect, the roots of which are not to be found
either in Russian or Tatar.—AUTHOR'S NOTE.
[23] Goods and chattels in the same dialect.
[24] naïb ordinarily means a Mohammedan judge or high religious
officer, in Turkey and the Caucasus; hero it means an officer
whom the great Circassian chieftain Shamyl endowed with special
authority.
[25] The word murid has many significations, but in the sense
here employed it means something between adjutant and body-
guard.—AUTHOR'S NOTE.

VIII.
The guide pointed out the ford; and the vanguard of cavalry, with
the general and his suite immediately in its rear, began to cross the
river. The water, which reached the horses' breasts, rushed with
extraordinary violence among the white bowlders which in some
places came to the top, and formed foaming, gurgling whirlpools
Welcome to our website – the perfect destination for book lovers and
knowledge seekers. We believe that every book holds a new world,
offering opportunities for learning, discovery, and personal growth.
That’s why we are dedicated to bringing you a diverse collection of
books, ranging from classic literature and specialized publications to
self-development guides and children's books.

More than just a book-buying platform, we strive to be a bridge

connecting you with timeless cultural and intellectual values. With an
elegant, user-friendly interface and a smart search system, you can
quickly find the books that best suit your interests. Additionally,
our special promotions and home delivery services help you save time
and fully enjoy the joy of reading.

Join us on a journey of knowledge exploration, passion nurturing, and

personal growth every day!

ebookbell.com