HTML Tutorial: Telling Stories With Typescript
In this tutorial, we will explore how to tell stories using Typescript. Typescript is a powerful scripting language that allows us to create dynamic and interactive web pages. By combining Typescript with HTML tags, we can create engaging and compelling stories that captivate our audience.
Step 1: Setting Up Our HTML Document
To start telling our story with Typescript, we first need to set up our HTML document. Below is a basic template that you can use to get started:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Typescript Story</title>
</head>
<body>
<h1>Welcome to My Typescript Story</h1>
<div id="story-container">
<p id="story-text">Once upon a time...</p>
</div>
<script src="script.js"></script>
</body>
</html>In this template, we have a basic HTML structure that includes a heading for our story, a container to hold the story text, and a script tag that links to our Typescript file (script.js).
Step 2: Writing Our Typescript Code
Now that we have set up our HTML document, we can start writing our Typescript code. Below is an example of how we can use Typescript to manipulate our story text:
let storyText = document.getElementById('story-text');
let storyIndex = 0;
const story = [
"Once upon a time, in a faraway land...",
"There lived a brave knight who...",
"One day, the knight stumbled upon a hidden cave...",
"Inside the cave, the knight found a magical sword...",
"With the sword in hand, the knight set out on a quest to...",
];
function showNextStory() {
if (storyIndex < story.length) {
storyText.innerText = story[storyIndex];
storyIndex++;
} else {
storyText.innerText = "The end.";
}
}
storyText.addEventListener('click', showNextStory);In this code snippet, we first select the story text element using its ID and set an initial index for our story array. We then define an array of strings that represent different parts of our story. We create a function called showNextStory that updates the story text each time the user clicks on it.
Step 3: Bringing Our Story to Life
With our Typescript code written, we can now see our story come to life on our web page. When we click on the story text element, it will display the next part of the story until it reaches the end.
By using Typescript in conjunction with HTML tags, we can create interactive and engaging stories that capture the imagination of our audience. Experiment with different storytelling techniques and elements to make your story truly unique and memorable.
I hope this tutorial has inspired you to explore the possibilities of telling stories with Typescript. Happy storytelling!
MPJ – I am soo excited you are back! One of my favorite segments or themes of videos were the musings. They really spoke to me; especially when weaving in the mental health aspect and general health activity too. I hope you bring those back but just honestly whatever you do is so wonderful. 🙏🙏
MPJ. Was this video just a brain dump? Sound quality wasn't good BTW
can you tell a story how to handle your ADHD during work in IT industry?
Vite is supposed to be pronounced ”veeet”! It’s how you say fast in french 🙂
Would love to see your note taking work flow
I think it's pronounced like in French "veet"
Love that you added keywords in Russian though 😀
My son … I know something like your struggle with guilt and self destruction by mind-slide to depression and below. If I may be so bold, I have some ideas which helped me, and they may speak to you.
Trust your state. Your own internal systems have generated this state for neutral reasons, not evil. Your state is telling you a static story of what you need and to fight against it is a clear anti-pattern. If you need to pause and relax with no goals, do it fully with a gentle understanding that that pause is productive. To fight it draws energy from your naturally cyclic journey to other states, like becoming what is easier for you to bless, prodigious outward production of vid and code. Like nightly sleep, sometimes we need extended periods of repose, days not hours, to repair psychic tears and heal bruised soul.
Don't feel as th0ugh you owe us anything because you don't. Do not fall under the western practice of self flagellation and demand so much of yourself that you work yourself into psychic paini as you can easily see what a crass liar guilt is. Enjoy to the fullest doing nothing for a spell, and do that to the best o your abilities.
It really quite grand to kick your heels up and just … be … free.
instead of coffee breaks should we expect meditation breaks?
The bit where you mentioned using typescript as a replacement for task management + doco systems is super interesting to me. Really hoping to hear more on this topic in coming videos.
I've gone quite far into this lately. I've built a heap of text-based-interface tools that have basically replaced things like spreadsheets, onenote, task management tools, other markdown notes etc for me.
Everything is displayed with lots of ANSI colors in fzf, lots of menus where I only need to tap a single consistent key, which very quickly just becomes unconscious muscle memory… hyper efficient.
Most data is actually edited and browsed in a giant Freeplane mindmap. And I have code that extracts everything from it into a postgres DB. And absolutely everything is searchable via my global desktop keyboard launcher, which is a part of this whole cohesive system too.
The primary keyboard launcher using fzf not only shows all my "documents" to then launch them when I hit Enter, before that, it literally displays every possible piece of content from any depth down the mindmap / other content source too. If I just want glance at some small piece of info, I don't need to actually to need Enter to launch + goto the document/mindmap/program… it's already displayed on my keyboard launcher screen as I type each letter to filter down. Then I can just hit ALT+SPACE again to hide the launcher window, and never even needed to open whatever program the content is actually in.
I never need to remember what system/program some info is stored in, it's all available at any time by just hitting ALT+SPACE on my desktop. Doesn't matter if it's opening a program, searching my main dirs/files, any piece of doco/notes at any depth, looking up definitions of all my SQL tables+views etc, trigger a web search on specific websites (without having to open browser first), or finding any code symbol in my source code (because the vscode search features are so bad they're useless to me).
I guess a bit like Notion is many tools built into one, so is my TUI stuff. Difference is, I can search + find anything using fzf in less than 1 second. Good luck doing anything that quickly in a web-based system.
And I'm even trying out some stuff where I use typescript's typing system to store notes/data that isn't even consumed at all at runtime. I'm simply using the typing system as a way to structurally store + present data to myself inside vscode alone, while enforcing certain things that can't be done on a simple 2D plane like a spreadsheet.
I've never really seen anyone else doing anything along these lines before. I can't imagine going back to dealing with separate note taking programs etc all with their own different + inefficient search interfaces etc. Nor anything that involves 2 steps of searching (i.e. searching for note/document/file title, and then opening that and searching for text inside it).
Spent at least 20 years trying to find perfect systems for all this type of stuff. Turns out it was better to just built my own in the end. Even if it incorporates some other software like Freeplane, I can merge it all together with this.
One giant revelation I had way too late (only last year) was that being a webdev since the 90s… I had pretty much always built my own systems as web-based. That is super slow, even with decades of experience + reusing things. The amount of stuff I've built over the last year has been insane, because the interfaces are simply all made up from the simple TUI elements of: single-key-tap menus + fzf + ANSI colors + space paddings to display tables in terminals. Once the tooling is built up and re-usable, there's basically zero effort needed to build custom layouts as you would on websites.
Oh, and also… for anything that involves editing text, like writing git commit messages etc integrates with both neovim + vscode. Also does stuff like opening JSON logs in vscode etc too. So much easier than having to view/edit this type of stuff in some special limited interface of where ever it came from. Parts of it are GUI or TUI or SQL… which ever is best for the specific feature. This is also the kind of integration you can't easily do with web-based stuff. And I can run as many instances of the TUI parts of my system as I want, very efficiently , as it's just another terminal window.
Hard to explain in text like this though. But I've made way more progress on all my systems/control panels on the interface side in the last year than I did in the previous 10.
Even if your job is making websites for your clients/work. Don't assume that's the best way to build all the stuff you just use yourself too. For my own personal system interfaces, the only reason I'd go back to making them web-based was if I need to do a lot of stuff with images/video. But even basic display/management of images can be done in terminals, assuming you don't need a complex layout.
I started watching you when I enrolled in bootcamp. I am so
Happy you’re back ❤
Would be great to see your process of creating typescript scripts and transforming them into animation.
Nature is healing, FFF is back.
Your videos are so interesting that I cannot miss a second mate 🫡
It would be interesting if you could generate the audio from the script with AI in your own voice, when it gets to the point that it really can get your mannerisms and affectations down. Though it would probably be terrible any time before then
Just fail together sometimes with someone with camera ON. Forget the schedule. The flow is your horse.
It goes a bit all over the place. But ok, good to show vulnerable sides. Just trust on the past of hurdles taken. Curious where this goes to.
Yeah!!!! YOU'RE BACK!!!!
So much echo
You have a magnificent collection of pots and pans! You should do a cooking episode!