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

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

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

17 Likes

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

17 Likes

Long time coming, though you made me buy the book when I was asking for a digital option :frowning: 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.

1 Like

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! :heart_eyes_cat:

(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! :slightly_smiling_face:

2 Likes

I think it's a brilliant idea to do the book with Hype. :ok_hand:
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".

1 Like

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.

2 Likes

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.

1 Like

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! :smiling_face_with_three_hearts:

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

6 Likes

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.

1 Like

That looks wonderful! That's great news. :ok_hand:
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.

1 Like

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