TikTok Loves Valeria @ LatinaGeeks
We also explore Garbage Waste Trackers for humans who create 4.5 pounds of trash per day, contemplate our story arc, team up with new talent, and deconstruct our Frankenstein website's JavaScripts.
Welcome back to the FACTory. I’m Dr. Nutmeg, your hostess, and this is the last newsletter for July. Believe it or not, I’m taking a break from publishing in August. It’s a mini-vacation. A hiatus. A GenZ-style sabbatical. [laugh track because I heard this is happening but how can you take a break from a life you’ve barely had time to live???]
It’s also my birthday month AND Mercury Retrograde Aug 2-24, so it’s a good time to go into hibernation mode and stop all production at the FACTory. It’s just like…the law of physics. Gotta rest, relax, and reflect if I ever expect to mash all the ideas together into one cohesive mofongo for consumption by others besides myself. [laugh track]
Before we peace out of your inbox for a month, check out Valeria [at] LatinaGeeks.com “auditioning” for our animation below. She pitched our Flying Car app Pegasus to the TikTok addicts of the world, and they didn’t hate it.
Valeria’s audition got 1,581 views on TikTok this past Friday!
Valeria’s performance gives us more hope that there is indeed an audience for our animation about Latinas working in tech.
How the heck will we animate this story on less than $5,000?
We thought we could use AI, but we haven’t found anything yet that will accomplish what we want. Instead, our secret weapon is the talented Tic Bowen, who has agreed to help animate Season 3 with his stop motion skills. This is huge. He has done some really cool stop motion animations featuring his characters on Instagram, check it out:
As for the story itself and making it funnier?
We teamed up with our American University alum Birgitta Sunderland to workshop the re-written script, woot! Birgitta and I were in the same script writing class at AU and we always used to make each other laugh with our ideas. We’ll be meeting during August to be sure ALL the jokes are actually FUNNY.
But I’m also going to ensure the story arc works, which has always been a difficult task for me as a fiction writer, perhaps because of my undiagnosed ADHD. My hypothesis: Using Scrivener instead of Celtx.com will help.
In film school, I always used Celtx for script writing, which allows you to create storyboards, budgeting spreadsheets, and more. It seemed like the best tool for writing, editing, and producing Seasons 1 and 2 of The Femmebots, but I kept getting lost, which of course resulted in a lost audience.
The same thing happened while I was drafting my novel about Maria La Gata in Microsoft Word.
Everything changed, however, while taking fiction writing classes at UCLA in 2022. My professors used Scrivener for organizing a novel. Unlike the cloud-based Celtx, I downloaded Scrivner as a desktop app. Once I transferred Maria La Gata from Word to Scrivener, I could see all the chapters organized into an outline on the left side of the screen. I could also drag and drop those chapters into different places if I needed to.
As a result, I was able to manage my undiagnosed ADHD brain and all the parts of my novel into a clear story arc and log line that always piques everyone’s attention:
Maria La Gata: A single mother transforms from dancer to gangster in 1920s Harlem and Puerto Rico.
Who wouldn’t want to read that story? I already know from this newsletter’s open rates that YOU want to read that story.
After discovering Scrivener includes a screen writing template, I moved The Femmebots script from Celtx, and now I can see the beginning and ending without getting lost:
Dr. Nutmeg: A broke and lonely Latina scientist uploads her memories into 3 Femmebots who create a Flying car app, but after testing it in a simulation and crashing into a penthouse, they pivot and create a garbage tracker instead, which is the bigger and more amazing goal because they will save the planet from becoming a huge garbage waste dump.
Not as sexy as Maria La Gata’s story arc from dancer to gangster, right? It’s also too wordy and too convoluted!
Perhaps you can help?
But seriously. What if you became aware of how much trash you generate in a single day?
This person at the Nurture Nature Center did, check it out:
The average American generates about 4.5 pounds of municipal solid waste per day…the largest components of this are paper and paperboard, food, plastics, and yard trimmings. From people’s houses, about 25% of that waste is sent to be recycled and 10% composted. 13% is incinerated with energy recovery, and the remaining 52% is landfilled. That’s about 140 million tons of waste sent to landfills each year in the U.S. alone.
Even better: Did you know there are robots who can sort recycling?
There’s also this story, “Year of No Garbage,” about a family that tried to create ZERO waste for a year (during the pandemic):
Maybe “Year of No Garbage” will be required reading during Mercury Retrograde!
While we’re on hiatus in August, we hope you’ll check out some events we curated below. We also added some fall tech events in case you wanna plan ahead:
Calendar Events for Latinas in Tech
Aug. 1: Power to the People: Women in Tech and their Power to Create Political Change
Come learn about how people of all experience levels are using their technical skills to advocate for what they believe in. Be inspired to take charge and get involved in political advocacy and community organizing efforts that matter to you.Aug 9: Lean in Latinas Take Charge Conference in Mountain View, CA
"Until you #TakeCharge of your own life, things don't happen! Get ready to unleash your potential, rewrite your story, and embrace the limitless possibilities that await. You'll be inspired, motivated and ready to make that next move! We got you!"
Anna Dapelo-Garcia, Lean In Latinas | Founder & PresidentOct. 6 – Oct. 12 and Oct. 8-9, 11am-2pm: Latiné Heritage Month: Techqueria Tech Week 2024
Events happening across 10 chapters including: Atlanta, Austin, Boston, New York City, Chicago, Los Angeles, Milwaukee, Albuquerque, San Diego, and San Francisco.Oct 8-11: 2024 Grace Hopper Celebration for Women in Tech
America Ferrera is one of the main speakers this year!
And now, JavaScript Workshop #4!
For paid subscribers…
How to Deconstruct Your Frankenstein Website
This workshop will be fun for all you Latina Geeks and engineers who love to deconstruct cars, computers, architecture, the human body – and any material object – to understand how it works.
Our Frankenstein guinea pig for this experiment will be un-named, but we’re specifically going to look at a theme I created called MEL (named after my alter ego in the real world, of course!).
The theme consists of:
A header file
A body file that is linked to 3 folders for images, scripts (JavaScript, specifically!), and styles
A footer file
Hey! Those are the same parts for a Femmebot! Cool.
So, let’s open the header file first. The first 13 lines look like this:
<%@ Control Language="C#" AutoEventWireup="true" CodeFile="MELHeader.ascx.cs" Inherits="CustomSkinObjects_Header_MELHeader" %>
<%@ Register TagPrefix="dnn" TagName="MOBILEMENU" Src="~/DesktopModules/DNNGo_xPlugin/Skin_Menus.ascx" %>
<%@ Register TagPrefix="dnn" TagName="MEGAMENU" Src="~/DesktopModules/DNNGo_xPlugin/Skin_Megamenu.ascx" %>
<%@ Register TagPrefix="dnn" TagName="Meta" Src="~/Admin/Skins/Meta.ascx" %>
<dnn:Meta runat="server" Name="viewport" Content="user-scalable=yes, initial-scale=1.0, maximum-scale=4.0, width=device-width" />
<link href="/Portals/_default/Skins/MEL/styles/reset.css" type="text/css" rel="stylesheet">
<link href="/Portals/_default/Skins/MEL/styles/bootstrap.min.css" type="text/css" rel="stylesheet">
<link href="/Portals/_default/Skins/MEL/styles/default.css?v=4" type="text/css" rel="stylesheet">
<link href="/Portals/_default/Skins/MEL/styles/dvc-accessibility.css" type="text/css" rel="stylesheet">
<link href="/Portals/_default/Skins/MEL/styles/dvc-older-styles.css" type="text/css" rel="stylesheet">
<link href="/Portals/_default/Skins/MEL/styles/font-awesome.css" type="text/css" rel="stylesheet">
<link href="/Portals/_default/Skins/OC_FLSites/occom-sitewide-styles.css" rel="stylesheet">The first line of programming is written in the C# (pronounced C Sharp) language, which we’re not going to worry about at this moment because we’re focusing on Javascript. I mean, we don’t want to try to learn TWO languages simultaneously! Can you imagine trying to learn Russian AND Swahili at the SAME TIME???
The second line links to a module in DotNetNuke (the content management system on which this website is built) called DNNGo.
<%@ Register TagPrefix="dnn" TagName="MOBILEMENU" Src="~/DesktopModules/DNNGo_xPlugin/Skin_Menus.ascx" %>
I know from seeing it and using it on the back-end that this module allows a developer to build a scrolling slider on the front-end. You can upload photos with an easy-to-use interface. However, if you look at the rest of the line, it refers to “Skin_Menus.ascx.” What’s that?
A file with the ASCX file extension is an ASP.NET Web User Control file that stands for Active Server Control Extension. Basically, ASCX files make it easy to use the same code across multiple ASP.NET web pages, saving time and energy when building a website.
So, in addition to C# and Javascript, the other main programming language on this website is ASP.NET: a free, open-source web framework from Microsoft for building dynamic websites, web applications, and services. It's cross-platform and runs on Linux, Windows, macOS, and Docker.
Yikes. That’s a lot of languages on one single website.
Frankenstein on the outside; Frankenstein on the inside!
If I built Femmebots like this, they would have ADHD. [laugh track] Or indigestion. [laugh track]
What if we delete some of these lines? I don’t think the page I’m building will break because I used an existing theme to create this new one. And even if we do break the page, no biggie – it’s fun to break things during the deconstruction process!
Hahah. We broke the page! Quick, put those 3 lines of code back!
OK, so I think it’s safe to say that we can’t delete the next 8 lines. Let’s move on to line 15, which looks like this:
<script runat="server">
public string Home
{
get { return DotNetNuke.Entities.Portals.PortalController.GetCurrentPortalSettings().PortalAlias.HTTPAlias; }
}
</script>This is NOT JavaScript, so let’s keep going down to lucky line #22:
<script type="text/javascript" src="/js/mp.js"></script>Finally! It’s JavaScript! (flashing word with gameshow style song).
It’s linked to “/js/mp.js.” What’s that? Is it a library? Or a framework? If we look at the navigation structure, there is a folder called “js” and inside that folder is a file called mp.js. Let’s try to open it in Visual Studio Code, which we downloaded last week. Ah, it’s a string of JavaScript commands that control the language toggle at the top of the page. We want our page to speak both English and Spanish, so when people click this button, it will switch the whole page from English to Spanish. Why do we need Javascript for that, especially when looking at this file, it looks like it’s just referring to the domain: espanol.orangecountyfl.net?
Alert! Alert! Alert! We’re treading into unknown coding language here! Should we go back to the JavaScript tutorial we started yesterday so we can understand what these commands do?
getCookie:
setCookie:
switchLanguage:
switchToLang:Let’s close this document. Maybe it doesn’t change the language at all. Maybe it’s just a way to set a cookie on a user’s computer so the page automatically defaults to English or Spanish…?
Moving forward to line 24:
<script language="javascript">
function ocswitchlang()
{
return switchLanguage('es');
}
function switchLanguage(lang) {
MP.SrcUrl=unescape('mp_js_orgin_url');
MP.UrlLang='mp_js_current_lang';
MP.init();
MP.switchLanguage(MP.UrlLang==lang?'en':lang);
return false;
}
</script> It’s another JavaScript query! Woot! (flashing game show style on screen).
But why is this JavaScript written directly on the page and not referring to a separate .js file like the previous query???
Ugh!! The inconsistencies! Is this “bad code” or “dirty code” or “not clean code???” I guess we’ll only know if we go back to the Fundamentals of JavaScript workshop at Udemy, which tells us in Lesson 8: Linking a JavaScript File, “The ideal is to separate the website content from the JS logic.” Ahh! Glad my instincts are correct. “This also makes it easier to maintain code in the long run.” Fabulous.
How to link a JS File:
Open up an index.html file that is on Github with pre-populated code.
Add the same code we tried in the Chrome Console in the last lesson.
Console.log builds a bridge between our script and the browser.
The only advantage of inline script is that we don’t have to load another file (similar to inline CSS).
However, the ideal is to separate the website content from the JS logic. This makes it easier to maintain code in the long run.
If you think of Javascript as a sentence:
HTML = nouns
CSS = adjectives
JavaScript = verbs
The rest of the page is a combination of HTML5 and CSS to create a place for the logo and a main navigation bar. The style sheet that controls it is default.css so I’m playing with the styles for the Español toggle. I can successfully add a border around the link so it looks like a button, however, we lose the small space above it and it’s no longer aligned with the logo. I added a <br> tag before it and this solves that issue but is that bad code??? Probably. LoL
Now what?
I think now that I know how JavaScript files are linked, I can do two things:
Understand the way accordions have been created by other developers with JavaScript;
Implement navigation menus into my MEL theme. No doubt, I’ll have to add some nice CSS to be sure it looks good because JavaScript is just the thing that makes it function correctly.
Ok everyone, see you in a month, BYE!