DEV Community: Micah Gilbert

Python's enumerate function

Micah Gilbert — Wed, 18 Sep 2019 19:11:06 +0000

This is just a quick post because I've seen some python beginners make some functions that are really in need of enumerate, but they don't know it and turn to odd solutions.

What does it do?

Put simply, enumerate is a function that takes in an iterable (typically an array) and, for each item, gives both its index in the array and the item itself.

When should I use it?

I've seen this:

array = ["a","b","c","b"]
for index in range(len(array)):
    item = array[i]
    # code continues using both `index` and `item`

This really doesn't hurt too much but enumerate can make this a bit cleaner.

In my early days of Python I created a monstrosity like this:

array = ["a","b","c","b"]
for item in array:
    index = array.index(item)
    # code continues using both `index` and `item`

This is actively bad code, and my thinking "There must be a better way to do this" finally led me to enumerate.
The main issue with this, other than possible performance issues if the array is quite long, is that array.index only returns the first index of the item. That means that the second "b" in the array will never get its index (3) run in the rest of the for loop. Instead, array.index will return 1 for both "b"s.

How should I use it?

enumerate is incredible easy. All that is needed is:

array = ["a","b","c","b"]
for index, item in enumerate(array)
    # code continues using both `index` and `item`

Look at how clean that is. That uses fewer lines than both code blocks above, and is arguably the most explicit and easiest to understand.

List comprehensions can also be used for filtering lists.

Let's say that we want all odd-indexed items that are vowels.

test_letters = ["a", "e", "i", "q", "c"]
vowels = ('a','e','i','o','u')

# Not using `enumerate`, just plain old logic
# This ca be confusing, especially if it wasn't documented.

new_arr = []
for i in range(len(test_letters)):
    if i % 2 == 0 and test_letters[i] in vowels:
        new_arr.append(test_letters[i])


# With enumerate
# It's only one line and still makes a ton of sense.

new_arr = [letter for index,letter in test_letters if index % 2 == 0 and letter in enumerate(vowels)]

enumerate is an incredibly useful function, and anyone learning Python should be using it.

What has been your worst "How did I forget that!?" moment?

Micah Gilbert — Wed, 03 Jul 2019 18:51:07 +0000

Any time where you made some mistake or forgot some crucial and obvious thing you should have done.

Some of the (slightly) lesser known CSS features

Micah Gilbert — Wed, 19 Jun 2019 18:05:40 +0000

The features listed here are from The State of CSS 2019.

Scroll Snap

Scroll snap is just what the name says. It makes the user scrolling "snap" to certain points on the page.

More info here.

overscroll-behavior

Normally, when an element with a scrollbar is scrolled all the way down or up, then a parent element will begin to scroll as well. overscroll-behavior can prevent this by not allowing the parent element to scroll.

(The demo here is somewhat finnicky. You have to be scrolling on an area without text, and stop scrolling when you hit the bottom, then start again.)

More info here

will-change

will-change is a strange one. It is a way to tell browsers that a property of an element will change. The Mozilla documentation states that it should only be used when performance problems are seen, and not in anticipation of a performance issue.

This is probably a useless demo, but it shows that sometimes rapid changes could require a will-change tag.

@supports

@supports is a query that checks if a browser supports a certain feature.

@supports (display: grid) {
  /* code here that gives the grid display instructions */
}

@supports not (overscroll-behavior) {
  /* If it doesn't support overscroll-behavior */
}

More info here

Writing modes

This is simply used to change the direction of the text in an element. It's an alternative to rotation of a <p> tag.

More info here

Wrapping up

I hope you learned a new thing or two with some of the newer CSS features that are out there. If there were any I missed or that you want to add, put them in the comments!