Periodic Table Speller Setup

[00:00:00]
>> In the slides, which you should all have access to, as we go along, there'll be links to GitHub repositories, that we'll be going over with our exercises. So you'll see those links and it'll say repo down in the bottom right corner. They'll come to repos like this.

[00:00:16]
This will be the first one we're actually gonna go through. And I just wanna to point out real quickly the mechanics of these repos. The main branch on the repo has the readme that describes the project so it's got all your instructions on kind of how to orient and that kind of thing.

[00:00:34]
And then we've got you can do this from the command line you can do it from the UI and whatever your is your favorite way of interacting with it I like to just get clone and do it from the command line. But there are branches in here and there's a start here branch and that's where you wanna start, when you're gonna work on the workshop.

[00:00:54]
So the start here branch will have the basic files already created for you. And then for each of these workshops, you'll see option one, option two, three, four, etc., for each of the different workshops. Those are progressively more and more or different ways of doing the solution to the problem.

[00:01:11]
The reason I did them as branches is it's real easy in the UI to do a diff between two branches you can also do that from the command line. So you can check and see I missed something or something he did didn't work quite the same way. Just diff the, if we're on option two diff one to option two or start here to option one or whatever and you can see anything that you might have missed.

[00:01:32]
So hopefully those diffs are helpful for you just as you're keeping up. I'd also mentioned that if for whatever reason we're gonna be doing a lot of live coding in the workshop, but if for whatever reason you get behind or something isn't working for you exactly, quite right.

[00:01:47]
You're welcome to ask questions and we can try to do a little troubleshooting or tips or whatever. But if for some reason you are behind, you don't have to stay behind just simply stash your work and switch to the new to the branch. So again, if we're getting ready to do the option two solution you switch to the option one branch which is the base.

[00:02:08]
Just, stash your changes, switch to option one, and then you're good to go for the next portion. One other little note is that each one of the exercises that we're gonna work on are designed to be run in a web context. Which means from the root directory of that repo checkout, you wanna run some sort of a web server.

[00:02:26]
Some people like to do that from inside of their code editor or IDE. Some people like to do it from the command line. I always do like NPX, HTTP server, but whatever your favorite way of running just a local host web server, you don't need anything else fancy than that.

[00:02:40]
But we make fetch for a JSON file and you can't do that on the file system so. You wanna make sure you run a local web server so that you can run it in the browser. So I'm gonna pull up for example, I've got a web server running for localhost, localhost port 8080 is what I choose.

[00:03:00]
And here's that first exercise pull up in a browser, nothing fancy, but that's what you wanna be able to see. In a browser, when you go to localhost and whatever port you choose, we're ready for our first laboratory exercise our first official exercise, you notice the link there to the workshop repository.

[00:03:22]
This is periodic table speller is the name of this problem. So we're gonna dive into the periodic table speller. Go ahead and make sure you have that repository cloned in your local system. You're gonna want to be on the Start Here branch, you're gonna want to have your local web server running, so that you can pull up the index html file in a web page, Port 8080 or whatever.

[00:03:45]
What is this exercise all about? Well, don't be scared if you're not like me, not one of the science folks. When I look at a periodic table, I'm like, I know, like, oxygen. That's about it. I don't know what all this stuff is my kids actually have more than half of this periodic table memorized.

[00:04:05]
I'm we didn't do that when I was a kid they didn't ask us to learn the periodic table. My kids have a song that they sing all the periodic table elements it's incredible. Anyway, I got inspired because my daughter had a little assignment. Where they asked her to spell out some words that were meaningful to her using only the symbols from the periodic table.

[00:04:29]
And I thought that was a cool little assignment. And so she had come up with a couple of different words. And I was trying to think of words to help her with and then of course, my programmer brain went to, this got to be a thing that solved or a thing that can be written.

[00:04:42]
And it turns out there is a website that does this you can find that website you can type it in. But it was a little bit annoying to me that they use not only the periodic table elements which was her assignment. But they also use like a Physics characters, like epsilon and stuff like that from other parts of science, not just the periodic table.

[00:05:01]
And that wasn't part of her assignment, so I got annoyed by that and I was I'm gonna write the code to do this just from the periodic table. And so that's the little code the tool that we're gonna build a periodic table speller. So the word because can be spelled out with these I don't even have to pronounce it as a beryllium anybody know calcium uranium and selenium.

[00:05:23]
It spells outwards so you can't spell all words but many words that you can spell out. And we're gonna write the code do that immediately I want your brains is you're listening to this, to go to, how am I gonna do that? Where would I start? What is the first questions that we need to ask about this?

[00:05:41]
Remember, I'm trying to help you learn the discipline of approaching problems thinking as an algorithmic thinking in algorithms before you start to write the code for the algorithm. So as an algorithmic, what should you be thinking? What should you be asking yourself? Anyone have any suggestions for questions that we should be asked if given this assignment, given this task at work, for example.

[00:06:06]
What are the clarifying question that we ought to be asking? Yeah.
>> Are we allowed partial matches or are we required to spell the entire word?
>> Are we allowed to leave off letters or spell only part of the word? Great question I think we're gonna assume that you either spelled the whole word and nothing but the word.

[00:06:28]
But that's a great question. Maybe we ought to allow it to leave off the trailing characters, or the leading characters, or something. But for this exercise, we will either match the whole word or none of the word. Good question, what else? There's a real obvious one on the screen here.

[00:06:47]
I just wondered if anybody would pick up on it. Yeah.
>> It doesn't seem like capitalization matters.
>> See? Casing, right? Do we want to require the capitalization of the first letter? Do we want to allow any casing? Here we're gonna assume that we've got whatever we input.

[00:07:05]
We'll make sure that's all lowercase and we'll match the symbols case insensitive. That'll make our problems significantly easier. But you absolutely could identify that so you're already asking exactly the right kinds of questions is going to lead to a very different algorithmic outcome. These are not minor details afterwards these are very important things that we have to catch up front because they may take us on a very different path any other questions?

[00:07:31]
>> There's some from chat.
>> Yeah, what do we got?
>> Can we repeat using an element?
>> Very good question. Answer for this one definitely we want to allow repeating an element because the same series of characters might end up appearing multiple times in the word, absolutely

[00:07:49]
>> Do all the element names have one or two letters?
>> Very good question which leads to a question may not have yet been obvious to any of you all of the periodic table elements do have one or two characters. But how are we gonna decide whether we want words that are the longest possible meaning the most number of elements?

[00:08:11]
That would be one where we prefer single letter elements versus the two letter elements? Or do we wanna spell the words with the fewest number of symbols? So we're gonna prefer the two character. Those would lead to potentially very different outcomes. In some cases, the same outcome. But in some words, you would get a very different spelling of it if you optimized for more symbols or fewer symbols.

[00:08:36]
All very good questions, there's probably more to it. Here's one of the most practical ones that I started with. Where am I gonna get the data from? I don't know the periodic table. Where am I going to get it from? I Googled around, and I happened to find a JSON file that had the whole periodic table in it.

[00:08:54]
And I did a little bit of processing on it to filter out some of the data that I didn't care about and keep only the data that I did. And that's included with our project, so you don't need to go find that. But sometimes it's as simple as, where do I find my dataset to start with?

[00:09:09]
And in this case, thankfully, it wasn't that difficult. All right, let me switch over to the actual Speller here. I've got this loaded and running. I've got a web server again in the background. I've got this loaded and running. You'll notice that when I type in the word because and I click spell, it couldn't spell it because we haven't written the algorithm yet.

[00:09:31]
So that's what we get on the Start Here Branch is a functional but not complete project. I wanna orient you a little bit to the code, but this basically is the same as the instructions that are in the readme. So remember that there's a readme on the main branch that has these instructions and I'm just gonna kinda walk you through the same stuff here.

[00:09:51]
So if you need to refer back or miss any thing that's what we're going through so I'm gonna switch over to the code editor. And I'll just orient you and start here branch we start with index study HTML file pretty basic stuff. We're not gonna make any changes to the HTML in this project.

[00:10:13]
But just so you're aware of what it's doing, it's got an input box to enter in the word, it's got a button to spell it, and then there's a div for us to place the word spelling. We load up our app module which again all of this code is already written for you, you don't need to touch any of the code in app.js.

[00:10:32]
But just to familiarize ourselves with it we grab some references to those functions and we set up a couple of click handler and key down handlers. We do a little bit of validation here, which is that you have to have provided at least three characters. We could have allowed two characters, but it just doesn't seem that interesting to have a single one.

[00:10:56]
So you got to have at least three letters long. And then we invoke the speller.check that's in another module, and that's the code we're gonna write. And then to spell the word we, once we get back a list of symbols and array of symbols. If it matched to spell the word we need to be able to call the lookup method on that same module to pull out the elements.

[00:11:20]
So we have the symbol, but I want the whole elements I want its name, its atomic number and it's symbol back. So we need to have a lookup. So we see those two methods, we see the check and the lookup method. And if we switch over to the speller, module speller.js.

[00:11:37]
You'll note here that it automatically does the work of loading up our JSON for us. So that file is already in your project and already loads for us. And all we need to do is handle these to do comments. There's the check function and the lookup function should be fairly straightforward and self explanatory.

[00:11:57]
Again, refer to the readme if you're curious about it, but the check function should always return an array empty if it's got nothing. And full of the symbols as strings, if it was able to spell the input word. The lookup takes one of those strings and returns the object.

[00:12:16]
If open up our JSON file you'll note that each entry has a name, number, and symbol. So given the symbol in lowercase, we need to return this whole object. That's what the lookup function does.