📘 A Book About Hype (2021 Digital Edition) [Now Available]

Photics · April 25, 2021, 9:15pm

https://photics.com/books/a-book-about-hype/

TL;DR — Many of you asked for it, so here it is. A digital version of A Book About Hype is now available.

The Story

Widgets is still the flagship app for Photics, but what if not? In the near 23 year history of Photics, the most successful project was The Unofficial GameSalad Textbook. It was an app book on the Mac App Store. Historically, the books do the best. Maybe it's the writing style, which makes it easier to understand complex topics.

What changed your mind?

There are four main reasons why...

A lot of people wanted, and are waiting for, a digital version of the book.
Apple launched the Small Business Program, making Apple's app stores more competitive.
Apple actually approved the changes to Revisions — SHOCKING!
I'm a bit burned out on Widgets. Working on this book should distract me while I recharge.

There was an attempt to convert the book to an ePub, but there were issues. It didn't feel good enough. Instead, I'm thinking it will be very cool to say...

A BOOK ABOUT HYPE IS MADE WITH HYPE!

The Plan

Convert the book from its printed form to an app.
Nothing too crazy, this is just a "Spring Cleaning" project.
Instead of $49.50 for the printed book, the target price is $24.99 for a copy of the app.
Target release date — May 31, 2021.

NOTE: The plan is to remove the printed version of the book from Lulu on June 30, 2021.

Which version of the book do you like better?

App Version
ePub Version

0 voters

Photics · April 25, 2021, 9:16pm

If you would like to be notified when A Book About Hype (App Edition) is available, like this post.

petester · May 1, 2021, 10:27pm

Long time coming, though you made me buy the book when I was asking for a digital option Im wondering what made you want to go digital? Reason why im asking, It seemed like there was no way talking you into doing digital version other than the reason you've mentioned.

Photics · May 1, 2021, 11:37pm

Apple approving the update to Revisions is the big reason. I wasn't sure if that was going to happen. For years that app was listed on my App Store Connect developer page with the warning icon attached to it.

...and yeah, I'm tired of having the same debate. A lot of people say they want a digital version. Look at all the likes!

(Thanks to everyone that liked the second post in this thread. That's very encouraging!)

It certainly wasn't an impossibility...

That was last November.

You asking for a digital version might have been the turning point. Not long after our conversation is when I tried relaunching Revisions. It worked! After that, I started working on this project. That was April. I'll be working on this project through May. While there's still a lot of work to do, being able to use the "Photics Book Engine" does make the job a lot easier.

Today I've been mainly working on improvements to the way the "Photics Book Engine" works. I think it's nice!

Saeta · May 2, 2021, 8:50am

I think it's a brilliant idea to do the book with Hype.
One question, as it is a digital book made with Hype, will it be interactive with examples that we can inspect? It would be an incentive for those of us who already have the paper book to have something like this, more interactive and "practical".

Photics · May 2, 2021, 11:24am

I still have to figure out how interactive examples will work in this new format. The general idea is to have interactive examples. Almost all of the examples have templates already available...

https://photics.com/tag/template/

...but I think I'm going to include those templates in the app too. I'm not sure if there's enough time, but I am thinking about adding a few exclusive templates to the book app.

However, your question reminds me of something that I added to the Widgets app...

    #if DEBUG
        self.wv.configuration.preferences.setValue(true, forKey: "developerExtrasEnabled")
    #endif

Three simple lines of code has made it so much easier to develop the Swift portion of the Widgets app. Do you see the part where it says "DEBUG"? This is something I added to make the project easier for me to work with. It lets me inspect the WKWebView in the app. I suppose I could add that setting to the app version of A Book About Hype. I'm not sure if I will do that, but this is something that I can investigate later.

Saeta · May 2, 2021, 2:40pm

Thank you very much for the answer. As with any creative project you have to take the space and time to feel what you need. Courage with it and I'm sure it will be a good app.

Photics · May 10, 2021, 9:24pm

Progress Report (May 10, 2021)

Wow, I haven't felt this excited about a project in a long time. Here's a preview of some of the features that I've been working on...

Columns

If there's available space, columns are automatically added. It's wild. LOVE IT!

It really shows off the power of HTML / CSS.

Interactive Examples / Templates

Oh wow, the "Wavy" template — Amazing. The transition is just so cool...

...that's an animated GIF. But in the book, I even added a wave crashing sound effect. So nice!

wavy

I'm still figuring out how to best manage the rest of the templates. I'm thinking most will simply be embedded on the page. This shows what's possible with Hype though.

Code Formatting

It's not syntax highlighting, but @MaxZieb mentioned that he thought that the code formatting in the printed version could be improved.

So, the digital version has better code formatting — with line numbers!

I didn't consider CSS real programming, but wow, that opinion changed while working on this project. CSS is powerful. There are a lot of amazing features, especially for this project. Scroll Snapping... with columns... MAGNIFICENT!

I've decided to breakup the project into three parts...

Copying the text
Copying the images
Copying the templates

I'm a little behind schedule for the first week of the project, but I added a lot of the features I was looking to add. As an example, now there's an "Auto" theme for automatic switching between light and dark modes.

auto-theme

There is still a degree of uncertainty about hitting the deadline. If I feel more time is necessary, I'll delay the launch. Fortunately, I think meeting the deadline is still in the realm of possibility. I don't want to rush this one, but so far it's turning out better than expected.

...and I've been sending lots of feedback to Tumult, so they can make the app even better.

Paradise · May 10, 2021, 10:14pm

I certainly agree about the power of CSS. One of the best resources on CSS, and from which I “borrowed” several ideas for my site, is Lea Verou’s CSS Secrets. On top of that, her entire book is set out in CSS — not a page layout program, but good ol’ CSS.

Saeta · May 11, 2021, 9:16am

That looks wonderful! That's great news.
I'm always excited to see other people's projects moving forward. It's motivating.

I would like to project my new website with Hype doing something more narrative. Something like this: https://tigertells.fun

It has everything you can do with Hype: Clip Path, scrolling timeline control, interaction, dynamic navigation and more.

Photics · May 14, 2021, 1:07am

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...

https://developer.mozilla.org/en-US/docs/Web/MathML/Authoring#using_mathml

The browser support is atrocious...

https://caniuse.com/?search=MathML

...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.
Eh, one app at a time.

Photics · May 24, 2021, 8:47am

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.

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.

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.
Oh yeah, just add water...

hype-book-app-icon

Do You Like The App Icon?

Yes
No

0 voters

Saeta · May 24, 2021, 3:25pm

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

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

BookApp_Hype-logo

Photics · May 24, 2021, 8:52pm

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.

Widgets – A Replacement for the macOS Dashboard 🎛 - Share your Work - Tumult Forums

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!

I think I'll just leave it.

Saeta · May 24, 2021, 10:21pm

It's good to have people's feedback, so go for it!

Photics · May 25, 2021, 11:05am

Still the best Tumult Hype fish... What's New in Tumult Hype 2.0 - YouTube

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!

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.

Saeta · May 25, 2021, 9:09pm

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.

Photics · May 29, 2021, 2:24pm

Everyone having a nice weekend?

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

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.

MarkHunte · May 29, 2021, 4:50pm

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

Photics · May 29, 2021, 4:55pm

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...

...much better with Hype 4.