πŸ“˜ A Book About Hype (2021 Digital Edition) [Now Available]

Just a minor update. I didn't know that MathML is native HTML.

I was trying to add this formula, for calculating distances between two points...

...I'm probably not going to keep the bird graphic, but I am interested in keeping the formula. Apparently, that's possible...

The browser support is atrocious...

...but that should be OK for this project. This is a WKWebView app.

I'm getting tired, needs to be more mathy, but I was able to recreate the look of the formula...

<h2>distance = 
     <math>
          <msqrt>
             <mn>(x2 - x1)<sup>2</sup> + (y2 - y1)<sup>2</sup></mn>
          </msqrt>
     </math>
</h2>

This feels like it could be its own app... a MathML to HTML converter. :thinking:
Eh, one app at a time. :blush:

4 Likes

Progress Report (May 24, 2021)

I wanted to do weekly progress updates, but I've been so busy that I didn't notice when seven days had passed. So, 14 days later, here's what's new.

Table of Contents

There are 86 scenes in the project.

0 "Cover"
1 "Intro"
2 "Foreword"
3 "Section I β€” Getting Started"
4 "Chapter #1 β€” Installation"
5 "Chapter #2 β€” Introduction"
6 "Chapter #3 β€” Elements"
7 "Chapter #4 β€” File Types"
8 "Chapter #5 β€” Planning"
9 "Chapter #6 β€” Inspector: Document"
10 "Chapter #7 β€” Inspector: Scene"
11 "Chapter #8 β€” Inspector: Metrics"
12 "Chapter #9 β€” Inspector: Element"
13 "Chapter #10 β€” Inspector: Typography"
14 "Chapter #11 β€” Inspector: Actions"
15 "Chapter #12 β€” Inspector: Physics"
16 "Chapter #13 β€” Inspector: Identity"
17 "Section II β€” Animation"
18 "Chapter #14 β€” Timelines"
19 "Chapter #15 β€” Layers"
20 "Chapter #16 β€” Properties and Keyframes"
21 "Chapter #17 β€” Timing Functions"
22 "Chapter #18 β€” Capo"
23 "Chapter #19 β€” Timeline Actions"
24 "Chapter #20 β€” Multiple Timelines"
25 "Section III β€” Hype Pro"
26 "Chapter #21 β€” Going Pro"
27 "Chapter #22 β€” Grid System"
28 "Chapter #23 β€” Symbols"
29 "Chapter #24 β€” Persistent Symbols"
30 "Chapter #25 β€” Responsive Layouts"
31 "Chapter #26 β€” Physics"
32 "Section IV β€” JavaScript"
33 "JavaScript Basics"
34 "Comments on Semicolons"
35 "Chapter #27 β€” Adding Code"
36 "Don’t Panic"
37 "External Editors"
38 "Chapter #28 β€” Parameters"
39 "Chapter #29 β€” Get & Set"
40 "Bouncing Explained"
41 "Saving"
42 "Chapter #30 β€” Scees"
43 "Chapter #31 β€” Timelines"
44 "Chapter #32 β€” Symbols"
45 "Chapter #33 β€” Drag Events"
46 "Section V β€” Examples"
47 "Chapter #34 β€” Coloring"
48 "Grinding"
49 "Chapter #35 β€” Sliding"
50 "Shuffling"
51 "Chapter #36 β€” Picturing"
52 "Indexing"
53 "Chapter #37 β€” Timing"
54 "Chapter #38 β€” Navigating"
55 "Arraying"
56 "Section VI β€” Publishing"
57 "Chapter #39 β€” Testing"
58 "Chapter #40 β€” Browser Support"
59 "Chapter #41 β€” Export"
60 "Chapter #42 β€” Advanced Export"
61 "Chapter #43 β€” Export Scripts"
62 "Chapter #44 β€” Widgets"
63 "OAM Widget / WordPress"
64 "Chapter #45 β€” Hype-To-App"
65 "Chapter #46 β€” Hype-To-Home"
66 "Section VII β€” Advanced Design"
67 "Chapter #47 β€” Dark Mode"
68 "CSS Variables"
69 "Chapter #48 β€” Accessibility"
70 "Chapter #49 β€” Presentation Mode"
71 "Keyboard Controls"
72 "Fullscreen Mode"
73 "Section VIII β€” Games"
74 "Chapter #50 β€” Jigsaw"
75 "Chapter #51 β€” Physics API"
76 "Chapter #52 β€” Circles with Grandma"
77 "Artificial Intelligence"
78 "Chapter #53 β€” Game Data"
79 "Chapter #54 β€” Jump"
80 "Collision Detection"
81 "Section IX β€” Hype Website"
82 "Chapter #55 β€” Building A Hype Website"
83 "Menu"
84 "Extra Bits"
85 "Conclusion"

I put a little extra work into making the Table of Contents swoosh in from the side.

If you're going to do something crazy like make a book with Hype, then it's important to plan ahead. I had to do a lot of clicking on those 86 scenes to position the Table of Contents properly. :grinning_face_with_smiling_eyes:

The reason this so difficult is that the book is highly responsive. There's been testing at various screen sizes. So much so, that I'm not sure what would be the optimal viewing size. As an example, I've been testing at 320 pixels wide. Heh, I thought that was a dead screen size, but Apple still sells the iPod Touch... https://www.apple.com/ipod-touch/specs/ ...and split-screen sizes on the iPad are cool.


Dynamic Controls

With the Automatic Columns feature, the scrollbar changes location from vertical to horizontal. That makes the left/right controls awkward. To solve this problem, the controls now adjust.

up-and-down-arrows

I'm not sure if swiping controls will be added, as this can interfere with cut-and-paste select. But wow, the keyboard controls are great... so lazy... especially with wide-screen columns.


What's Left?

There's still more testing to do. The book also needs a good read through, to find miscellaneous typos or errors.

The interactive elements still need to be added. I don't want to rush this part, since it's a big reason for the book's existence. I thought I would have been done by now, so it's going to be a busy week.

It still needs an App Icon too. A first attempt was made...

It was close. I'm liking the symbolism. Photics means the science of light, particularly in areas of water that is affected by sunlight. So, I like the watery coloring. Also, this matches the blueprint theme. The fishy animation is one of the best effects in the book. The swooshy animation trail kinda looks like a scripted lowercase letter "h". That's short for "Hype"... and this is a book about Hype 4.

Something's not sitting right though. Something's missing. :thinking:
Oh yeah, just add water...

hype-book-app-icon

Do You Like The App Icon?
  • Yes
  • No

0 voters

1 Like

I think it would be better to synthesize everything a little more.
You know that in design, less is more :wink:

I like constructive criticism, so I've allowed myself to make a version of your logo to support my idea.
Starting from your idea, I see that the 4 is shaped like a fish and the lowercase h is already shaped like a wave. The blue color with a fish is already identified as water. On the other hand, the upward direction of the fish shows joy and momentum For projects? learning? Hype 5? what's next?

I find it interesting to play with typography. I didn't look too hard, just enough to include a ; as a gesture on the fish's face.

It's just an idea that tries to add up :wink:

BookApp_Hype-logo

4 Likes

I did consider that. Should the fish jump upward? Ultimately, I decided that I wanted to keep the blue line as-is, since it's similar to what's shown in the Hype app.

The poll is currently at 83%. That's better than the original icon for widgets. :blush:

I've been asking around and some of the comments (most roughly paraphrased) were...

  • That's it! Don't change it and mess it up like you usually do.
  • Looks amazing!
  • Now you have to finish the app. The icon is too cool to waste.

I don't like it as much as the current Widgets icon, but the overall reaction is way better than I expected. Apparently, the fish makes it more appealing. It's more like an emoji than an abstract illustration, so it might help the book to be more attractive to a new audience.

I was tempted to simply use a book shape, which is quite common for book-like apps. But the general feedback is correct. The current design style is to simplify icons. I think they are a little too simple though. Looking at my dock, it was tough to pick out my favorite app icon. I liked HandBrake, and that doesn't conform to Apple's new design recommendations.

I think the icons on Apple TV look better, since there's more space. Crossy Road... so simple, so iconic, so easy to point out in a crowd. It's a blocky chicken. HA HA! :laughing:

I think I'll just leave it.

2 Likes

It's good to have people's feedback, so go for it! :wink: :+1:

2 Likes

Still the best Tumult Hype fish... https://youtu.be/RnckD7Auy-Y?t=168

Anyway, here's another quick update. Ever hear the saying virtue is its own reward? I woke up today and I figured I'd try to be helpful over here...

...and I was like... hmm, "Wheel" events?! Maybe I should add that feature to the book. I have a Logitech mouse. At first I thought it was broken or loose. I'm like, it clicks when I move it side-to-side. That's not a problem. It's a feature! It's a button making that clicking sound.

Apparently, that counts as a "Wheel" event. So, I added the four-way dynamic movement to the scroll wheel too. NICE! :slightly_smiling_face:


UPDATE β€” Mouse wheel based navigation is causing trouble in widescreen mode. Sadly, this feature was removed. I realized that people might accidentally move the mouse wheel, might be worse on the magic mouse, and then they could lose their place in the book. Even if it's easy to get back, that's a frustrating experience.

2 Likes

It is a good idea. I use the mouse wheel a lot to scroll the web and activating animated effects with it really looks great.

1 Like

Everyone having a nice weekend?

Here's what I'm doing, about 90 times :laughing:

The book is almost done. I had a rough night of testing, but I surprisingly solved the major issues by the next morning. Hype is actually a really good alternative to iBooks Author. While this is not exactly an ePub, I'm pleased with the way this project is turning out. There's still some more refinement to do, which is why I'm adding swiping controls. Scene management is probably the biggest obstacle in using Hype for creating book-like apps.

3 Likes

I was hoping it was. I still support it on a site I run. Pain in the arse..

A lot of the examples simply don't look great smooshed down at that size. But if you turn the phone sideways... eh... it kinda works. It's still one of the remaining issues to tackle and it's not going to be perfect. It's one of the points mentioned in the book... the modern web doesn't seem as fun as it was in the 90s or early 2000s. That's because making it work in ULTRA SUPER AWESOME HD, and on some kid's old iPod Touch (that is mainly used for playing Crossy Road) is extremely challenging.

At least I updated the Looking template...

looking

...much better with Hype 4.

3 Likes

Side ways, you are probably jumping up a layout to one of the larger one.

When I am testing I add a text box on the layouts telling me its name. Then use a debug js (trur/false) to show it or not.

(Actually just thinking about that I may add that as a hash location check in a js function. So I can check from anywhere. )

App Rejected

Now we dance, emails back-and-forth until Apple either approves the app, or I activate my contingency plan.

It got hit with minimum functionality, which is false. If I simply took the "Abacus" template β€” which is only one interactive example in the book β€” that would likely be approved as a standalone app.

A whole interactive book is minimal functionality?! :angry:

2 Likes

A Book About Hype 4 (Digital Edition) Is Now Available

After a devastating rejection from Apple, the contingency plan was activated. The idea was to find another place to sell the app. This was always a longterm plan for Photics, but now something was needed quick. After careful consideration, Etsy was chosen as the place to go

Why Etsy?

  • Wow, so friendly β€” It was really refreshing to feel like I had an ally in e-commerce. Their customer service was helpful.
  • Downloads β€” This was a big one. If you have an account at Etsy, you can download the files from previous orders. That's so nice! (This was one of the biggest issues with previous books from Photics.)
  • Not too expensive β€” Their listing fee thing was a little confusing to me, but overall it's not bad. Very good actually.
  • Nice Website β€” It's a lot to absorb at first, but the quality is quite apparent. They did the work!

Two Versions β€” App & ePub

While I like the App version, with the cool interactivity and the fact it was built with Hype, I realized that people would want search or to use their traditional e-readers. That's why I put in the extra work to create an ePub version. The ePub doesn't have interactivity, but I do enjoy those page curls in Apple's β€œBooks” app.

The "Vertical Scrolling" mode is cool too, great for speed reading. However, I learned something while converting the book to ePub. The β€œcalibre” app is phenomenal! If you need to make your own ePub, it's outstanding!

It's also a good e-reader, that's available on macOS, Windows, and Linux. The included editor provided some interesting stats about the book...

If this was just an ePub alone, Lulu would have been good enough, but Etsy allows the .zip extension as downloadable files. I also liked that they let me add a promo video. The plan is to retire the printed book at the end of the month. It might come back one day, but right now it's a little out-of-date. There's not much difference between the digital and printed versions of the book, but there are a lot of minor changes to the text.

Now What?

There is a downside to Etsy. The upload limit is 20 MB per file. (The app version is really close to that cap.) That means there isn't enough space for video. The plan is to start a YouTube channel. It's a good book, so it needs marketing. Tutorial videos about Hype seems like a great way to promote the book.

One of the main reasons for the existence of "A Book About Hype" is how it can it can make the modern web more interesting. With Flash dead, Hype is the most likely successor. But to unleash that power, training and experience is needed. Hype starts off easy, but wow there is a lot to learn.

Also, I'll be following the feedback on the book. It's off to a great start! I like the comments that people can put in the orders... and thanks Patrick for the nice review on Etsy.

The plan for the rest of today is to update Photics.com. In the short-term, the links and description for the book need updating. I just wanted to share the good news with you first.

7 Likes

First, congrats on finishing the digital version. Second, thanks for making both ePub and app versions available. I was one of those holding out for digital, so time to show the money.

Small item: typos are inevitable; maybe consider an errata page on your site. Easy fix with digital.

Kudos, Michael.

3 Likes

What great news! Congratulations
I think you forgot to put the link. Here it is ( it can be done, right?). :roll_eyes:

2 Likes

Congratulations Michael! Honking Horn left

2 Likes

Immediately purchased and downloaded. Let the reading commence!

3 Likes

@Photics .

4 Likes

That's more copies than I have. :grinning_face_with_smiling_eyes:

Very nice!

Looks like the print version should return at some point... maybe for Hype 5 or perhaps later this fall. I'm still planning to take the printed version offline at the end of the month.