Python Lesson 32: Intro to Python NLP (NLP pt. 1)

Hello everybody,

Michael here, and today I thought I’d get back into some Python lessons-particularly, I wanted to start a new series of Python lessons on a topic I’ve been wanting to cover, NLP (or natural language processing).

See, Python isn’t just good for mathematical operations-there’s so much more you can do with it (computer vision, natural language processing, graphic design, etc.). Heck, if I really wanted to, I could post only Python content on this blog and still have enough content to keep this blog running for another 6-10 years.

In the context of Python, what is natural language processing? It’s basically a concept that encompasses how computers process natural language. Natural language is basic, conversational language (whether English, Spanish, or any other language on the planet), much like what you’d use when talking to your buddies or writing a job resume.

See, when you’re writing a Python program (or any program really) you’re not feeding natual language to the computer for processing. Rather, what you feed to the computer are programming instructions (loops, conditions, print statements-they all count as programming instruction). Humans don’t speak in code, and computers don’t process instructions in “people-talk”, if you will. This is where natural language processing comes in, as developers (depending on the program being created) sometimes want to process natural language in their programs for a variety of purposes, such as data anaylsis, finding certain parts-of-speech, etc.

Now that I’ve given you a basic NLP intro, let’s dive into some coding! To start exploring natural language processing with Python, let’s first pip install the NLTK package by running this line on our command prompts (the regular command prompt, not the Anaconda prompt-if you happen to have that)-pip install nltk.

  • Remember to run the pip list command to see if you already have the nltk package installed on your device.

Once you get the NLTK package installed on your device, let’s start coding!

Take a look at this code below-I’ll dicuss it after I show you the example:

import nltk
nltk.download('punkt')

test = input('Please type in a string: ')

nltk.word_tokenize(test)

Please type in a string: Don't worry I won't be going anywhere.
['Do', "n't", 'worry', 'I', 'wo', "n't", 'be', 'going', 'anywhere', '.']

In this example, I was demonstrating one of the most basic concepts of NLP-tokenization. Tokenization is simply the process of splitting up text strings-either by word or by sentence (and more on the sentence thing later).

For this example to work, I imported the nltk package and downloaded NLTK’s punkt module-reasons for doing this are that punkt is a good pre-trained tokenizer model and in order for the tokenization process to work, you’ll need to install a pre-trained model (which doesn’t come with the NLTK package’s pip installation, sadly).

After importing the NLTK package and installing the pre-trained model, I then typed in a sentence that I wanted to toeknize and then ran the NLTK package’s word_tokenize method on the sentence. The last line of code in the example contains the output after the text is tokenized-as you can see, the tokenized output is displayed as a list of the words in the input sentence (denoted by the test variable).

Pay attention to the list of words that was generated. With words like be, going, and worry-nothing too remarkable, right? However, pay attention to the way the two contractions in the test sentence were tokenized. Don’t was tokenized as do and n't while won’t was tokenized as wo and n't. Why might that be? Well, the pre-trained NLTK model we downloaded earlier (punkt) is really good at recognizing common English contractions as two separate words-don’t is shorthand for “do not” and won’t is shorthand for “will not”. However, just because a word in the string has an apostrophe doesn’t mean it will automatically be split in two-for instance the word “Cote D’Ivore” (the Ivory Coast nation in Africa) wouldn’t be split as it’s not a common English contraction.

Pretty neat stuff right? Now, let’s take a look at sentence-based tokenization:

import nltk
nltk.download('punkt')

test = input('Please type in a string: ')

nltk.sent_tokenize(test)

Please type in a string: How was your Memorial Day weekend? Mine was fun. Lots of sun!

['How was your Memorial Day weekend?', 'Mine was fun.', 'Lots of sun!']

In order to perform sentence-based tokenization, you’d need to utilize NLTK’s sent_tokenize model (just as you would utilize word_tokenize for word-based tokenization). Just like the word_tokenize module, the sent_tokenize module returns a list of strings that were derived from the larger string but in this case, sent_tokenize splits the string based on sentences rather than individual words. Notice how sent_tokenize perfectly notices where the punctuation is located in order to split the string based on sentences.

Thanks for reading,

Michael

CSS Lesson 5: Webpage Margins and Padding

Hello everybody,

Michael here, and today’s post will discuss how to incorporate CSS margins and padding into your webpage.

What do margins and padding do, exactly? Well, in the context of CSS development, margins are used to create space around webpage elements outside of predefined borders. In other words, if there are some elements that you’d like to surround with some whitespace, using a margin would be perfect.

Let’s explore how margins work by first taking a look at the HTML form code we’ve used for every CSS lesson in this series thus far (the CSS stylings not including the borders from the previous lesson will remain intact here):

<!DOCTYPE html>
<html lang="es-US" dir="ltr">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="Form.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Press+Start+2P">
    <title></title>
  </head>
  <body>
    <h1>Flight finder:</h1>
    <form action="Submitted.html" method="POST">
      <label for="datepicker1">Pick the date you want to depart for your vacation</label><br>
      <input type="date" id="datepicker1" name="datepicker1" min="2021-03-25" max="2022-03-25"><br>
      <br>
      <label for="datepicker2">Pick the date you want to return from your vacation</label><br>
      <input type="date" id="datepicker2" name="datepicker2" min="2021-03-25" max="2022-03-25"><br>
      <br>
      <label for="time1">What time would you like to depart? (flights shown within 90 minutes of selected time)</label><br>
      <input type="time" id="time1" name="time1"><br>
      <br>
      <label for="time2">What time would you like to return? (flights shown within 90 minutes of selected time)</label><br>
      <input type="time" id="time2" name="time2"><br>
      <br>
      <label for="layover">How many layovers do you want?</label><br>
      <input type="number" id="layover" name="layover" min="0" max="3"><br>
      <br>
      <input type="submit" value="Submit">
    </form>
    <div class="container">
     <p>Thank you for booking your next trip with XYZ Airlines!!</p>
     <p>Can't wait to see you on your travels!!</p>
   </div>
  </body>
</html>

Great. Now let’s say we wanted to add a little margin to the Flight finder: header. Take a look at the highlighted line of CSS code to see how you can accomplish this:

h1{
  color: green;
  font-family: "Comic Sans MS";
  font-size: 40px;
  text-align: center;
  margin: 30px;
}

.container{
  color: red;
  font-family: "Press Start 2P";
  font-size: 30px;
  text-align: center;
}

input{
  background-color: #00FFFF
}

To add a margin to the Flight finder: header, I added a styling call to the h1 declaration that uses the margin property and sets the value to 30px-this adds a 30px margin around all sides of the Flight finder: header.

Look, I know margins aren’t as obvious to detect as borders but trust me, they’re there. If it helps, think of margins as a sort of invisible border around a certain HTML element(s).

  • Margins are always measured in px (pixels). Always append the px suffix to whatever you want to use for the margin measurement.
  • Also, even though I mentioned that you could think of margins as “invisible borders”, you can’t set colors or line styles for margins (after all, margins are invisible, so therefore you won’t even see any colors/line styles). However, margins, like borders, have four sides-you can have four different margin sizes if you so choose (just like you can have four different border line stylings). More on this point later.

So, know how I mentioned that similar to how you can have up to four different border line stylings, you can also have up to four different margin sizes. Let’s see an example of this in the highlighted line of CSS code below:

h1{
  color: green;
  font-family: "Comic Sans MS";
  font-size: 40px;
  text-align: center;
  margin: 30px 10px 20px 40px;
}

.container{
  color: red;
  font-family: "Press Start 2P";
  font-size: 30px;
  text-align: center;
}

input{
  background-color: #00FFFF
}

In this example, I used four different margin lengths-30px 10px 20px 40px-to denote the four different margin sizes I’d like to use. Notice anything familiar about the highlighted styling call? The way I listed the margin lengths is the same way I used to list different border stylings in the previous lesson (CSS Lesson 4: Webpage Borders)

Just to reiterate the logic I used in the previous post (but in the context of margins):

  • If margin has four values:
    • Example: margin: 10px 50px 20px 40px
    • How it would work: top margin of 10px, right margin of 50px, bottom margin of 20px, left margin of 40px
  • If margin has three values:
    • Example: margin: 10px 50px 20px
    • How it would work: top margin 10px, right and left margins 50px, bottom margin 75px
  • If margin has two values:
    • Example: margin: 10px 50px
    • How it would work: top and bottom margins 10px, right and left margins 50px
  • If margin has one value:
    • Example: margin: 10px
    • How it would work: all margins 10px
  • Ideally, try to maintain even margins for your elements. Having all margins the same length is fantastic, but the 2-2 rule (which I made up) works just as well-top and bottom margins set to the same length, and left and right margins set to the same length but different than the length of the top and bottom margins.
  • If you want to set margin lengths for each side of a margin around an element, using the margin-top, margin-bottom, margin-left and margin-right properties would work too; however, this is less efficient than utilzing the multiple margin lengths logic I discussed above.

Sounds pretty easy, right? However, keep in mind that there’s another possible value for margins-auto. Using the auto value on an element will horizontally center it. Take a look at how it’s used (through the highlighted line of code):

h1{
  color: green;
  font-family: "Comic Sans MS";
  font-size: 40px;
  text-align: center;
  margin: auto;
}

.container{
  color: red;
  font-family: "Press Start 2P";
  font-size: 30px;
  text-align: center;
}

input{
  background-color: #00FFFF
}

In this example, I set the value of the h1 element’s margins property to auto, which automatically horizonatally centers the h1 element in the webpage.

  • Personally, if you want the webpage looking as neat as possible, auto would be the way to go when working with your margins. Also, unlike with prespecified margin lengths (e.g. 10px, 50px), you can’t repeat auto several times. So a styling call like margins: auto auto auto auto won’t work.

Now that we’ve explored margins, let’s take a look at padding. Padding and margins are conceptually similar since both features are meant to create space around an element (or elements) in your webpage. However, margins create space around an element outside of a defined border, while padding creates space around an element INSIDE of a defined border. Let’s take a look at a basic example of padding (using the highlighted line of code below):

h1{
  color: green;
  font-family: "Comic Sans MS";
  font-size: 40px;
  text-align: center;
  margin: auto;
}

.container{
  color: red;
  font-family: "Press Start 2P";
  font-size: 30px;
  text-align: center;
  border-style: solid;
  border-color: green;
  border-width: 6px;
  padding: 30px
}

input{
  background-color: #00FFFF
}

In this example, I applied a padding of 30px (like margins, padding values are also specified in px or pixels) to the elements in the .container class-the last two lines of text on the webpage. This creates whitespace of 30px between the elements and each side of the border.

Now, can you specify multiple padding lengths similar to how you can specify multiple border stylings or margin lengths? Yes. Does the logic for specifying mutliple padding lengths work the same as it would for specifying multiple border stylings or margin lengths? Also yes. Let me explain below:

  • If padding has four values:
    • Example: padding: 25px 30px 10px 50px
    • How it would work: top padding 25px, right padding 50px, bottom padding 10px, left padding 50px
  • If padding has three values:
    • Example: padding: 25px 30px 10px
    • How it would work: top padding 25px, right and left paddings 30px, bottom padding 10px
  • If padding has two values:
    • Example: padding: 25px 30px
    • How it would work: top and bottom paddings 25px, right and left paddings 30px
  • If padding has one value:
    • Example: padding: 25px
    • How it would work: all paddings 25px

While discussing CSS margins, I did mention another approach to setting multiple margin lengths-using the margin-top, margin-left, margin-bottom, and margin-right properties to set the top, left, bottom, and right margin lengths, respectively. You can do something similar with padding lengths using the padding-top, padding-left, padding-bottom, and padding-right properties, respectively, but it would be much more efficient to use the multiple-padding-lengths-in-a-single-line approach that I discussed above.

  • Just like with margin lengths, I don’t recommend setting four (or even three) different padding lengths, as this would make the element spacing look really uneven. One or two padding lengths would work just fine (preferably a single padding length).
    • You may be able to hide uneven margin lengths better than you can hide uneven padding lengths, as margins are utilized outside of defined borders while padding is utilized inside of defined borders. Therefore, uneven padding is more obvious to see to visitors of your website.
  • Lo and behold, you can utilize the auto property on padding too in order to horizontally center your element withing a border. Same rules from applying the auto property to margins are in place here (e.g. the styling call padding: auto auto auto auto) won’t work. Here’s how utilizing the auto property for padding would work here (pay attention to the highlighted line of code):
h1{
  color: green;
  font-family: "Comic Sans MS";
  font-size: 40px;
  text-align: center;
  margin: auto;
}

.container{
  color: red;
  font-family: "Press Start 2P";
  font-size: 30px;
  text-align: center;
  border-style: solid;
  border-color: green;
  border-width: 6px;
  padding: auto
}

input{
  background-color: #00FFFF
}

Thanks for reading,

Michael

CSS Lesson 4: Webpage Borders

Hello everybody,

Michael here, and today’s lesson will cover how to use CSS borders on your webpage.

When you are designing your HTML website, borders are crucial design elements.

First off, let’s start by exploring CSS borders. To do that, let’s use the form we’ve been using for my CSS lessons (minus the background image from the previous lesson):

<!DOCTYPE html>
<html lang="es-US" dir="ltr">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="Form.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Press+Start+2P">
    <title></title>
  </head>
  <body>
    <h1>Flight finder:</h1>
    <form action="Submitted.html" method="POST">
      <label for="datepicker1">Pick the date you want to depart for your vacation</label><br>
      <input type="date" id="datepicker1" name="datepicker1" min="2021-03-25" max="2022-03-25"><br>
      <br>
      <label for="datepicker2">Pick the date you want to return from your vacation</label><br>
      <input type="date" id="datepicker2" name="datepicker2" min="2021-03-25" max="2022-03-25"><br>
      <br>
      <label for="time1">What time would you like to depart? (flights shown within 90 minutes of selected time)</label><br>
      <input type="time" id="time1" name="time1"><br>
      <br>
      <label for="time2">What time would you like to return? (flights shown within 90 minutes of selected time)</label><br>
      <input type="time" id="time2" name="time2"><br>
      <br>
      <label for="layover">How many layovers do you want?</label><br>
      <input type="number" id="layover" name="layover" min="0" max="3"><br>
      <br>
      <input type="submit" value="Submit">
    </form>
    <div class="container">
     <p>Thank you for booking your next trip with XYZ Airlines!!</p>
     <p>Can't wait to see you on your travels!!</p>
   </div>
  </body>
</html>

Great, so we have the form webpage (along with the corresponding code) here. Now, let’s say we wanted to add a simple CSS border to the last two lines of text (the ones in red). How would we do so? Take a look at the highlighted line of CSS code below:

h1{
  color: green;
  font-family: "Comic Sans MS";
  font-size: 40px;
  text-align: center
}

.container{
  color: red;
  font-family: "Press Start 2P";
  font-size: 30px;
  text-align: center;
  border-style: solid
}

input{
  background-color: #00FFFF
}

To add a CSS border to an element on the form, simply add a border-style styling call and set any of the following values for border-style:

  • dotted-creates a dotted line border
  • dashed-creates a dashed line border
  • solid-creates a solid line border
  • double-creates a double border
  • groove-creates a 3D grooved border
  • ridge-creates a 3D ridged border
  • inset-creates a 3D inset border
  • outset-creates a 3D outset border
  • none-creates no border
  • hidden-creates a hidden line border

In this example, I set the value of the border-style property to solid, which creates a solid red border on the last two lines of text on this webpage.

Now, what if you wanted a thicker or thinner border? Let’s see how we can change border thickness (look at the highlighted section of code below):

h1{
  color: green;
  font-family: "Comic Sans MS";
  font-size: 40px;
  text-align: center
}

.container{
  color: red;
  font-family: "Press Start 2P";
  font-size: 30px;
  text-align: center;
  border-style: solid;
  border-width: 6px
}

input{
  background-color: #00FFFF
}

As you can see, I managed to make the border slightly thicker than it was before. How did I manage to do this? I added another styling call to the .container declaration that contains the property border-width and has a value of 6px (border thickness in CSS is always measured in px or pixels).

  • Remember that the value of the border-width property must always contain px at the end and a number at the beginning (e.g. 6px in this example). And don’t wrap this value in quotes-it’s not a string!

Now, as you may have noticed from the previous two examples, the border around the last two lines of text is red-this is because the border color will default to the color of the elements it contains, and since the text inside the border is red, the border itself will also be red.

Let’s say we wanted to change the aforementioned border’s color from red to green. How would we accomplish this? Take a look at the highlighted line of code below:

h1{
  color: green;
  font-family: "Comic Sans MS";
  font-size: 40px;
  text-align: center
}

.container{
  color: red;
  font-family: "Press Start 2P";
  font-size: 30px;
  text-align: center;
  border-style: solid;
  border-width: 6px;
  border-color: green
}

input{
  background-color: #00FFFF
}

To change the border’s color, I simply added another styling call to the .container declaration; in this call, I used the border-color property and set this property’s value to green to change the border from red to green.

  • Using a HEX code, RGB code, HSL code, or the keyword transparent would have worked here too. However, using simple color names (e.g. red, blue, orange) always works with the border-color property, especially if you want a basic color.

So, having fun exploring the several different ways we can play with CSS borders? If so, great, but we’ve got one more thing to explore.

In case you weren’t aware, you can apply more than one styling to a border. Curious? Well check out the highlighted line of code below to see how you can apply multiple different stylings to a CSS border:

h1{
  color: green;
  font-family: "Comic Sans MS";
  font-size: 40px;
  text-align: center
}

.container{
  color: red;
  font-family: "Press Start 2P";
  font-size: 30px;
  text-align: center;
  border-style: solid dashed;
  border-width: 6px
}

input{
  background-color: #00FFFF
}

As you can see here, I created a border with two different stylings (solid on the top and bottom and dashed on the left and right). How did I accomplish this? I set the value of the border-style property to solid dashed, which will tell CSS to create a border that is dashed on two sides and solid on the other two sides. To set multiple different stylings for the border, simply list the styles you want for the border and separate the names of each style with a space. That’s it-and you can have between one and four styles for your border. Here’s how the multiple border stylings trick works in CSS:

  • Four border stylings:
    • example: border-style: dotted dashed solid ridge
    • how it works: top border dotted, right border dashed, bottom border solid, left border ridge
  • Three border stylings:
    • example: border-style: dotted solid groove
    • how it works: top border dotted, right and left borders solid, bottom border groove
  • Two border stylings:
    • example: border-style: solid dashed
    • how it works: top and bottom borders solid, left and right borders dashed
  • One border styling:
    • example: border-style: solid
    • how it works: all borders solid

Pretty neat stuff right? Just wait until you see that similar logic for the multiple border stylings trick also works to apply multiple border colors. Check out the highlighted line of code below:

h1{
  color: green;
  font-family: "Comic Sans MS";
  font-size: 40px;
  text-align: center
}

.container{
  color: red;
  font-family: "Press Start 2P";
  font-size: 30px;
  text-align: center;
  border-style: solid dashed;
  border-color: red green;
  border-width: 6px
}

input{
  background-color: #00FFFF
}

And here’s what the webpage looks like with the multiple border colors applied:

How did I generate a red and green border? I simply added another styling call to the .container declaration that used the border-color property along with two color values separated by a space-red green (similar to what I did with the multiple values for the border-style property). The highlighted line of code above tells CSS to make the top and bottom borders red and the left and right borders green.

  • You’ll notice that I used both the border-color and color properties in the .container declaration. Note that you can’t use these properties interchangeably-color sets the color of the elements in the .container declaration (the last two lines of text on this webpage) while border-color sets the color of the border around the aforementioned elements.

Also, just as with multiple CSS borders, you can apply between one and four different border colors to your border. Here’s how the multiple border colors trick would work in CSS:

  • Four border colors:
    • example: border-color: red orange green blue
    • how it works: top border red, right border orange, bottom border green, left border blue
  • Three border colors:
    • example: border-color: red orange green
    • how it works: top border red, right and left borders orange, bottom border green
  • Two border colors:
    • example: border-color: red orange
    • how it works: top and bottom borders red, left and right borders orange
  • One border color:
    • example: border-color: red
    • how it works: all borders red

Thanks for reading,

Michael