Future News! Flying Car Crashes into Penthouse Sliding Doors
Testing ChatGPT jokes for our 11-minute animation for the Enzian Brouhaha Film Festival and exploring Javascript for improving a website's navigation.
Hola, eM-powered FeMMebots! Welcome back to the FACTory. I’m Dr. Nutmeg, your hostess, and tonight we have another Javascript workshop (scroll down if you wanna skip this intro), but I gotta confess — after last week’s heavy mental health download, Kamala’s big news, and the Microsoft debacle — I accidentally crashed my flying car prototype into a future penthouse in Downtown Orlando. [laugh track]
Don’t worry. No humans were harmed since most residential penthouses are empty during hurricane season in Florida. [laugh track]
What had happened was, I had too many tabs open on my Dumbphone (and at happy hour).
[laugh track]
When I looked up, I saw the silver building glistening in the sunset. A beautiful penthouse was directly in front of me. There was no way I could pull up and land on the roof like I normally do.
¡Hijole! Before I knew it, my flying car had crashed into a luxury penthouse.
I know, I know — I shouldn’t be swiping and flying [laugh track], but autoFemmebot 4.0 was activated and I thought I could do some multitasking. [crickets soundtrack]
Wait, wait! Before I lose you, it turns out ChatGPT is funnier than humans!
According to this article, ChatGPT is no joke for professional clowns and late night wannabe talk show hosts like me. [laugh track?]
So, anyways, if we can’t beat AI, let’s try it out, especially since that’s what our story is all about, verdad? Besides, I obviously need a whole new team after this crash, so I interviewed ChatGPT for the following roles:
Hey, ChatGPT, are you a better autoPilot than Femmebot 4.0?
Answer: I can’t drive or operate any vehicles, including flying cars, whether manually or on autopilot. However, I can help you understand how these technologies work…uhhh, ok. I guess we’ll ask the Chingonaneers to implement that solution into Femmebot 4.0’s code. And maybe we can hack into the Waymo driverless car network.Hey, ChatGPT, can you convert the 11 tabs that were open on my Safari browser into 11 jokes for our 11-minute animation-in-progress?
Answer: Yes! Scroll down!Hey, ChatGPT, can you write a satire about a Latina scientist named Dr. Nutmeg flying a car in the future but she gets distracted by her smart phone and crashes into a penthouse?
Answer: Yes, I can write satire or dark comedy (scroll down further if your email inbox can stand it!).Hey, ChatGPT, how do I schedule time to animate and edit 10 minutes of video?
Answer: Yawn. Scroll down. This was the unofficial Table of Contents of this newsletter, if you haven’t guessed.
11 Jokes for Our 11-Minute Animation
To be clear, these jokes are based on the tabs I was peeping in my browser when I accidentally flew my car into the penthouse.
Joke 1: Why did the clock get promoted? Because it was great at agile timeboxing! It always knew when to punch in and when to punch out! [laugh track]
Joke 2: Why did the newsletter bring a ladder to the party? Because it heard the engagement was through the roof!
Joke 3: Why did the ADHD squirrel start a podcast? Because she couldn’t decide whether to store nutz, chase her tail, or narrate her life adventures…so she did all three at once!
Dr. Nutz: Are you saying I’m a squirrel or that the squirrel recorded these three things for her podcast? Either way…I didn’t laugh, ChatGPT!!!
Joke 4: Why did the JavaScript developer go broke? Because she kept trying to “null” her debts! [crickets soundtrack]
Joke 5: The therapist won’t have any ADHD test appointments available until April 2025…what??? Does EVERYONE have ADHD??? [laugh track] Now, that’s just organically funny, didn’t need ChatGPT for that one.
Joke 6: Why did the virtual reality headset start a dream interpretation service? Because it wanted to turn our REM cycles into VR cycles! [this isn’t funny so what if I change “VR cycles” into “Dreamcicles” or “economic cycles” or “bicycles?”] Crickets, ya, I know.
Joke 7: A PBS clip on YouTube about the attempted assissination which made me feel a little worried about the future until I heard this joke from several sources (didn’t need ChatGPT):
“How did he miss?” [laugh track]
Joke 8: Why did the Bossa nova musician bring a ladder to the gig? Because he heard the set list had a lot of high notes! [uhh — wasn’t this a variation on joke 2??]
Joke 9: Wattpad novel Model Ricans is still ranking at #2 in the futurism category. Is that funny? Yeah. That’s funny, LoL.
Joke 10: The Femmebots one-pager for potential sponsors or advertisers or grants…uh…this is not one page. [laugh track]
Joke 11: Orlando Traffic is so bad even Mickey thinks it’s Goofy. That wasn’t ChatGPT, folks. Thanks to new subscriber Cayla for submitting that joke!
Ok, TBH, we want humanoid jokes, so please, porfa, send us your originals without the help of AI! If we end up using it in the animation, we’ll put your name in the credits:
Hey, ChatGPT, can you write a satire about a Latina scientist named Dr. Nutmeg flying a car in the future but she gets distracted by her smart phone and crashes into a penthouse? Yes:
Breaking News: Flying Car Crash in Skyrise City!
Written by: ChatGPT
Skyrise City, 2054 – In a shocking turn of events, renowned Latina scientist Dr. Nutmeg made headlines today after her flying car collided with a penthouse apartment in the heart of the city. The cause of the crash? A distraction that has plagued humanity since the dawn of the smartphone.
Dr. Nutmeg, known for her groundbreaking research in quantum physics and her recent invention of the carbon-neutral flying car, seemed to have finally met her match – her own smartphone. Witnesses say that Dr. Nutmeg was seen laughing at memes and scrolling through her social media feeds moments before the crash.
“I was just finishing my morning coffee when I saw this flying car zigzagging through the air,” said penthouse resident, Ms. Opulence. “Next thing I knew, it came crashing through my living room window. When I looked up, I saw Dr. Nutmeg holding her phone with a look of pure horror on her face. I can’t believe she was texting and flying!”
Emergency services arrived promptly, and fortunately, no one was injured. Dr. Nutmeg emerged from the wreckage unscathed, albeit with a sheepish grin and a slightly bruised ego.
In a statement to the press, Dr. Nutmeg admitted, “I was just checking my browser tabs, and I saw this hilarious cat video. You know how it is. One second you’re laughing at a cat wearing a sombrero, and the next, you’re crashing into a penthouse.”
The incident has sparked a wave of discussions about the dangers of distracted flying. Skyrise City's mayor, Mr. Highflier, has promised stricter regulations and increased awareness campaigns. “We’ve always known texting and driving was dangerous, but now we see that texting and flying is even worse. We need to ensure that our skies are as safe as our roads,” he said.
Social media, ironically, has been abuzz with memes and jokes about the incident. One popular meme features a flying car with the caption, “When you’re so smart you invent a flying car, but too distracted to fly it.” Another shows a picture of Dr. Nutmeg with the text, “Quantum physics? No problem. Texting and flying? Total disaster.”
Despite the humorous aftermath, the incident serves as a serious reminder of the potential dangers of technology distractions. Dr. Nutmeg has vowed to lead by example, saying, “From now on, I’m putting my phone on airplane mode while flying. Lesson learned!”
[that was definitely an LOL laugh track]
As Dr. Nutmeg's flying car is towed away for repairs, the city can only hope that this will be the last of such incidents. Until then, residents are advised to keep their eyes on the skies – and their phones out of the cockpit.
Uhh. That wasn’t bad…let’s use AI to create a storyboard, too:
Mootion AI Storyboard: A Latina Scientist Crashes into Penthouse Sliding Doors!
ChatGPT as Producer
Hey, ChatGPT, how do I schedule time to animate and edit 11 minutes of video?
Answer below:
Scheduling your time effectively for animating and editing an 11-minute video requires careful planning and organization. Here's a suggested breakdown:
Pre-Production (1-2 days):
Scripting: Write a script for your video if necessary.
Storyboarding: Create a visual outline of your video to plan out scenes and transitions.
Gathering Assets (1-2 days):
Collect all necessary assets such as audio files, images, videos, and any other elements you'll need in your video.
Animation (5-7 days):
Divide the animation process into smaller tasks, such as character animation, background animation, and special effects.
Allocate time for each task based on its complexity and prioritize accordingly.
Remember to take breaks to avoid burnout and maintain creativity (too late???🤣)
Editing (3-4 days):
Import all your animated sequences and assets into your video editing software.
Arrange the sequences according to your storyboard and script.
Add transitions, effects, and any additional audio elements.
Fine-tune the pacing and timing to ensure a smooth flow.
Review and Revisions (1-2 days):
Watch the entire video and note any areas that need improvement or adjustments.
Make necessary revisions based on feedback or personal review.
Finalization (1 day):
Render the final video in the desired format and quality.
Review it one last time to catch any errors or glitches.
Once satisfied, upload or distribute the video as needed.
Remember to be flexible with your schedule and allow extra time for unexpected delays or revisions. Additionally, it's essential to maintain a healthy work-life balance and avoid overworking yourself during the process.
Zap. Crash. Boom. Light visuals. It would be so lovely if an undiagnosed ADHD brain like mine could follow these steps, in an agile sequence…
If you’ve missed any of the previous issues this month, take a peek:
July 22 (today): Flying Car Crashes into Penthouse Sliding Doors
July 29 (next week): Animated Valeria Reads Lines for Femmebots Season 3. Plus, we introduce The Garbage Waste Tracker!
The second part of this newsletter is our Javascript workshop — for paid subscribers.
Javascript Workshop #3
What are your website visitors looking for and how can Javascript help?
After getting some feedback last week that we shouldn’t use our employer as our guinea pig for this experiment (even if it’s behind the paywall), we’re going to talk generally about navigation menus using all kinds of websites for visual learning.
Option 1: Add a Responsive Navigation bar (ie, hamburger menu) in the header.
On MelFeliciano.com you’ll see the navigation in the header transforms when you click on the horizontal lines (nicknamed “hamburger”) or if you view the site on mobile. This type of navigation employs a combination of HTML5, CSS, and Javascript, as in this example: https://www.geeksforgeeks.org/navigation-bar-using-javascript/.
It’s also really cool that the Search bar is included in the navigation, AND there are drop-down submenus underneath “About Me” and “Portfolios.” Can I create a similar navigation for my employer? Hmmm.
The problem with this hamburger navigation is that it’s built into the theme files, which means the navigation for a specific page wouldn’t be the same for another one. This makes me wonder if there is another solution.
Option 2: Add breadcrumb menus with JavaScript.
A breadcrumb menu is an element that displays the visitor's journey on a website or application. It is usually placed at the top of a page, just below the main navigation bar, and looks like this:
Home / Components / Navigations/ Breadcrumb
This type of menu helps to identify or highlight the current location within the hierarchical structure of a website. This tutorial about creating breadcrumbs with JavaScript is interesting because it features a slider, and the navigation below it freezes when scrolling down — which brings us to option 3.
Option 3: Add a sub-menu in the body of the page to help users jump to lower parts of the page.
Many websites feature sub-menus in a left or right sidebar. But many responsive websites are getting rid of sidebars in favor of a single column. For example, check out the menu below the slider, like this:
It’s important that this menu is NOT part of the theme template because the menu will more than likely be different for each page.
And so now the question remains: Can you use all three of these types of navigation on a single page? Is that too much JavaScript? If you recall from last week’s workshop, even before Javascript runs and affects the user experience, it needs to be parsed and compiled.
The ideal reality would be to use code-splitting and route-based chunking to produce one shared bundle that is required by all/most parts of the website, and one bundle per route/part of the website that covers functionality of that part only. Huh?
Using bundlers like: Webpack, parceljs, fusebox + ES6 modules you’ll be able to run less JavaScript. By removing a lot of dead code…uh, what is dead code? And can I turn that into a joke???
What did the JavaScript say to the dead code? Do you need a cuppa java to wake up? [laugh track]
The term dead code has multiple definitions. Some use the term to refer to code which can never be executed at run-time. In some areas of computer programming, dead code is a section in the source code of a program which is executed but whose result is never used in any other computation.
You can reduce the time to run Javascripts by removing a lot of dead code and splitting it into chunks based on entry points and shared dependencies. Huh? How do I do that? Dang. So much to learn!
There is a new CacheAPI available for caching request/response objects, which can be eagerly populated. Progressive web apps use this API to provide offline experiences and to improve reliability under uncertain network conditions – perfect for when there is a hurricane!
Including third-party scripts can be highly detrimental to overall performance. Examples: Google Analytics, Social Media integrations, iframes (YouTube, Vimeo) can block your main thread and delay the startup time, degrading user experience. Uh-oh.
Frameworks can reduce time to load JavaScript. Are frameworks the same as bundles? No. They are a collection of Javascript code libraries with pre-witten code for routine programming tasks. Examples:
Angular 1
Angular 5
React +
ReactDOM
Ember
Vue (runtime)
Preact (+ compat)
jQuery
jQuery UI
Knockout
Oh lordy. There is so much to learn. Good thing I just signed up for this Udemy JavaScript course!
Tune in next week July 29 when we explore this question: Now that you know Javascript do you know how to deconstruct your Frankenstein?
Obviously, we won’t really “know” JavaScript by next week, pero together we are learning how to deconstruct all websites as we keep exploring all the elements of a website controlled by JavaScript!