~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ updated by JMH on August 28, 2023 at 8:41 AM Feedback on MASTERING BOOTSTRAP 4 by Jakobus and Marah Jesse M. Heines, Professor Emeritus Richard A. Miner School of Information and Computer Sciences University of Massachusetts Lowell Jesse_Heines@uml.edu 978-821-9626 mobile ================ General Problems ================ 1. The font size of the figure captions is far too small. 2. There are many instances in the code listings where lines are broken at hyphens. This is simply not acceptable. In class and id names and other tag attributes, a hyphen is simply another character. Breaking the line at the hyphen will result in a syntax error when the code is run. 3. To make the code usable in a class discussion, the code must have line numbers. 4. There are only a few references to the specific example HTML file for code presented in the book. That is, one usually has to use trial and error to figure out which HTML file contains the code discussed on specific pages in the book. In addition, see the note below regarding errors in the tags of code files, further complicating this issue. 5. There are several instances in which the example code printed in the book does not match the code in the supplied HTML files. 6. There are several instances in which either the example code printed in the book or the actual code supplied in the HTML files does not produce the output shown in the corresponding book figure. 7. Several book figures are so severely reduced in size that it is impossible to see the output properly, particularly where text is involved. 8. There is considerable extraneous code in many of the example HTML files that obfuscates the point of the example. 9. The code examples in MasteringBootstrap4_CodeExamples.zip have inconsistent folder names. 10. The HTML files provided in the code examples should not use tabs for indentation. They should use spaces so that the indentation is correct regardless of the editor that one uses to view them. 11. Those HTML files should also include documentation. It is appallingly unprofessional to write code without any documentation at all, which is the case in these code examples. In addition, it is unreasonable to expect anyone but the most determined student to be able to decipher the code without documentation. This is especially true because there are so many instances where the code in the book does not match the code in the corresponding HTML file. 12. Another issue involving the mismatch between the code in the book and the supplied HTML files is that it is often difficult to see where code snippets in the book go in the larger program. That is, the snippets are sometimes presented without their full context. One has to look at the corresponding HTML file to understand just where the new code should be inserted, and when the code in the book doesn't match that in the HTML file, the task is considerably more difficult. =========================== Specific Errata in the Text =========================== --------- Chapter 2 --------- page 51, line 2: "prepend" should be "append". In addition, the words below in square brackets should be added. If we do not wish our columns to take on equal width but wish to specify a viewport size-independent width, we simply append the col class with a [hyphen followed by a] number ranging from 1 to 12 (just as in the case with the viewport-sensitive col classes). page 54, first paragraph under "What are wrappers?": The first sentence has typos and the second sentence is a fragment. I believe that this should read: In computer programming, wrappers refer to pieces of code that encapsulate or contain another piece of code without exposing the encapsulated code or modifying the encapsulated code’s functionality. --------- Chapter 3 --------- page 75, first line of code: The line that reads "ormatted HTML:" is obviously not intended to be there. page 93, code at the top of the page: The <button> code here should not be a child of the <div ... id="navigation"> element. As stated on page 91, the <button> code should come right after the <a class="navebar-brand" ...> tag. page 93, line 4 in first code block: "navbar-toggle" must be "navbar-toggler". The "r" is missing in this class name. page 95, first code section: This code simply shouldn't be there. This is the same code that is at the top of page 93 (including the midding "r" on "navbar-toggler".) It simply doesn't belong here and should be deleted. The first part of the code at the bottom of page 95 -- starting with the <li ...> tag and ending with the closing </li> tag but without the <div> section -- should be in its place. page 95, second code section: What's being discussed here is the section of code at the bottom of page 95 that starts with <div class="dropdown-menu dropdown-menu-right"> and continues through the closing </div> on page 96. page 95, second line of last text paragraph: There is spurious text here: ";;2". This text should be deleted. pages 99-100, missing code: The following lines are missing from the code on pages 99 and page 100. <div class="modal-footer"> <button type="button" class="btn btn-success">Save changes</button> <button type="button" class="btn btn-secondary" data-dismiss="modal"> Cancel</button> </div> They need to go after the closing </div> that matches the opening <div class="modal-body">. Without these lines the "Save changes" and "Cancel" buttons shown in Figure 3.20 on page 100 will not appear. page 101: There are two major issues here. (1) Nowhere in the discussion of Styling do the authors make it clear that class navbar-myphoto must replace class navbar-light in the <nav> tag: Previous version: <nav class="navbar navbar-expand-lg navbar-light"> New version: <nav class="navbar navbar-expand-lg navbar-myphoto"> (2) The CSS on pages 101-102 includes a .nav-pills selector, but there is no element in the code for Example 16 that has a class named nav-pills. Thus, the rules specified for the following selectors never get applied. .navbar-myphoto .nav-pills > li.active > a { background-color: #504747; color: gray; } .nav-pills > .active > a, .nav-pills > .active > a:hover { background-color: grey; } .nav-pills .nav-link.active, .nav-pills .nav-link.active:focus, .nav-pills .nav-link.active:hover, .nav-pills .nav-item.open .nav-link, .nav-pills .nav-item.open .nav-link:focus, .nav-pills .nav-item.open .nav-link:hover { background-color: grey; } Pills are not introduced until page 111. --------- Chapter 4 --------- page 106, first paragraph under Fixating the navbar, last line: "navbar-fixed-top" should be "fixed-top". page 117: (1) "fontawesome.min.css" at the end of the last <link> in the code cannot be hyphenated and wrapped to two lines. It must be one word. (2) "fa-user" at the end of the next-to-the-last line in the first full paragraph cannot contain a space ("fa- user"). page 121: "aria-label" at the bottom of the page cannot be broken at the hyphen and wrapped to two lines. It must be one word all on the same line. page 123: Sentence 5 in the first paragraph says: "Go ahead and remove the inline styles..." However, in the code that immediately follows this paragraph the inline styles are still there. The truth is that only the position: fixed; rule should be removed from the style attribute value. page 135: (1) The label tag at the top of page 135 reads: <label for="name">Your message</label> This is incorrect. The value of the for attriute should be the value of the ID of the element to which it applies. Thus, this line should read: <label for="message">Your message</label> because the textarea has id="message". (2) The last <div> at the top of page 135 shouldn't be there. This code isn't discussed until the next section, and then this block of code is repeated on page 136. ==================================== Problems with Specific Code Examples ==================================== --------- Chapter 2 --------- The <title> tag in Example 9 says that it is Example 8. --------- Chapter 3 --------- Starting with Example 5, many of the files have the wrong file name in the <title> tag. For example, file example05.html contains: <title>ch03-example04 File example11.html contains: ch03-example09 This obviously makes associating the actual HTML files with the code printed in the book more difficult. styles/myphoto.css: This CSS file contains multiple instances of the class selectors .nav-pills, but there are no elements in any of the HTML files that apply this class. It should therefore be deleted from the CSS file. --------- Chapter 4 --------- As in Chapter 3, starting with Example 5 all of the files have the wrong file name in the tag. File example05.html contains: <title>ch03-example07 File example06.html contains: ch03-example08 etc. The "fixating" of the navigation bar in Example 2 causes a problem: the navigation bar now hides the section titles. This should be fixed by adding 56 pixels of padding to all elements with class "myphoto-section", like this: .myphoto-section { padding-top: 56px; /* to provide space for the fixated navbar */ } page 123: position: fixed; should not be in the second line of code. This CSS rule is replaced by the fixed-top class in the first line of code. page 126: (1) In the first line of code, I don't think that "text" should be there. This appears to be an artifact of text-center, which appears on the next page. (2) In the third line of code on this page, there has to be a space between "&" and "Conditions". page 133: Note that the input type in the last div on page 132 is "email", which is what it should be. However, on page 133, 134, and 136 the corresponding input type reverts to "text". This is wrong. All instances of this input type should be "email". page 136: The statement: is incorrect. There is no Font Awesome icon named "send-o". None of the examples in the authors' Chapter 4 examples folder produce the output shown on page 137. ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~