CS 1100: Web Development: Client-Side Coding

Opening

In the last two weeks, we have studied web forms:

• how to create them in HTML,
• how to style them in CSS, and
• how to process them in JavaScript.

This sequence of topics followed the sequence of topics we had followed in the the course before the break: HTML, CSS, JavaScript.

Two things are true: We have learned much about all three. We have much yet to learn about all three.

Let's close the course the same way we conducted the course, the same way we conducted the last two weeks: HTML, CSS, JavaScript. We can take a glimpse of some of what remains for us to learn.

New HTML: Text Fragments and Dialogs

We have covered all of the essential HTML elements. There are always new things being added. Here are two.

Text Fragments

A text fragment is a way to link to, and highlight, specific text on a page that link to using an href attribute. We link to a text fragment by appending #:~:text= to the URL.

This page links to text deep in Session 29's notes which does not have an idea or name. Notice the %20 characters: they are encoded spaces! (Why must we encode the characters?)

Text fragments are only a few years old but now implemented widely enough to make them a useful tool for linking to information on the web.

Dialog Elements

The dialog element lets us create dialog boxes that display dismissible alerts and other temporary information. They can be modal, interrupting interaction with the rest of the page until dismissed, or non-modal. Typically, the page will use JavaScript to display the dialog element, though the browser provides basic behavior out of the box.

This page demonstrates a simple modal dialog box with buttons that open and close the window.

The script uses a couple of features we have used much or at all in the course:

• anonymous function written in one-line shorthand
• the sibling selector +

Notice that when dialog box is up, the rest of the page is inactive and the background is a light gray color. We can control the dialog's backdrop using another new bit of CSS, the ::backdrop pseudo-element:

::backdrop {
  background-color: lightblue;
  opacity: 0.75;
}

Or, if you want something really groovy, try yet another new bit of CSS, a linear-gradient:

::backdrop {
  background-image: linear-gradient(
    45deg,
    magenta,
    rebeccapurple,
    dodgerblue,
    green
  );
  opacity: 0.75;
}

That really is groovy, man.

New CSS: Adding Custom Banners to Images

Often see images with "NEW" banners draped across on of the corners. We don't need Photoshop to add such banners to our images. We know CSS.

Let's add a "NEW" banner to Caitlin Clark's image on this page.

Version 0: an image with p before and after

Version 1: add HTML for the banner, using divs so that we can style the different elements

<div class="wrapper">
  <div class="banner">NEW!</div>
  <img
    src="caitlin-clark.png"
    width="500"
  >
</div>

Version 2: add basic styling for the banner and the wrapper

.wrapper {
  width: 500px;
}

.banner {
  width: 500px;
  font-family: Arial, Helvetica, sans-serif;
  background: red;
  color: white;
  padding: 5px 0;
  text-align: center;
}

Version 3: add styling to rotate the banner and place it relative to the wrapper

.wrapper {
  position: relative;
}

.banner {
  ...
  position: absolute;
  transform: rotate(45deg);
}

Version 4: add styling to place the banner on the image

.banner {
  ...
  top: 50px;
  left: 300px;
}

Work through a sequence of guesses
* 50-300
* 50-200
* 45-200
* 30-200

Version 5: clip overflow on the wrapper

.wrapper {
  ...
  overflow: hidden;
}

Version 6: if we would like for the banner overrun the image a bit, add a little padding to the wrapper

.wrapper {
  ...
  padding: 5px;
}  

Voilé!

I got the idea for this from a post by Alex Chan. Even they acknowledge that there is no easy principle for determining the margin, padding, and offsets:

I don't fully understand the margin/padding values yet, and I get what I want by tweaking them until I get something that looks right.

Trial-and-error is sometimes necessary.

The final result: HTML | CSS

New JavaScript: Images and Pasting Text

We didn't do much with third-party CSS or JavaScript libraries this year. We could build an entire course around libraries such as Bootstrap (CSS) or React (JS). But first we needed to learn HTML, CSS, and JavaScript at a deeper level before using someone else's pre-packaged code.

We did use libraries for icons and fonts, both Font Awesome and Google Material Icons.

JavaScript libraries like React are big and complex, intended for solving big problems. But a JS library can also solve a smaller problem elegantly, or perhaps for fun.

          +----+
input --->| fn |---> output
          +----+

Turning Paste Behavior Back On

Some companies and web developers have, in their infinite wisdom, disabled the ability for users to paste values into text fields and boxes on their pages. In the old days of the web, this was often motivated by security. Nowadays, though, it is widely considered bad practice, even for password fields. Besides, many users really dislike not being able to paste text into text fields!

Never fear. You know JavaScript.

Suppose you happen upon this page, with paste events disabled. The Glum Wizard is not amused.

We can define a paste event listener right in the browser, using the console:

const dontTreadOnMe = (e) => e.stopImmediatePropagation();
document.addEventListener('paste', dontTreadOnMe, true);

Sometimes, the simplest powers are the greatest.

Closing

The final project is live and due at the end of this week.

The final exam is one week from today. I post more information in final specification on the course home page.