|
by via FrontEnd Focus
Wednesday, April 12, 2017
This Week's HTML5, CSS and Browser Tech News #285
by via FrontEnd Focus
2017 Design Trends
by Rob Hope via One Page Love
This Week in Mobile Web Development (#153)
|
Holly Schinsky recommends
Peter Cooper recommends
Chris Brandrick recommends
Brian Rinaldi recommends
by via Mobile Web Weekly
List Comprehensions in Python
List comprehensions provide you a way of writing for loops more concisely. They can be useful when you want to create new lists from existing lists or iterables. For example, you can use list comprehensions to create a list of squares from a list of numbers. Similarly, you could also use some conditions on a list of numbers so that the new list you create is a subset of the original list.
Keep in mind that you cannot write every for loop as a list comprehension. One more thing: the name "list comprehensions" can be a bit confusing because it seems to suggest that the comprehensions are only meant for working with lists. In reality, the word "list" in list comprehensions is used to indicate that you can loop over any iterable in Python and the end product would be a list.
Loops and List Comprehensions
Basic list comprehensions that don't use any conditions have the following form:
[<the_expression> for <the_element> in <the_iterable>]
Let's begin by writing a very basic for loop to list the first 15 multiples of 5. First, you need to create an empty list. Then, you have to iterate over a range of numbers and multiply them by 5. The new sequence of numbers that you get will consist of multiples of 5.
multiples = []
for n in range(1,16):
multiples.append(n*5)
print(multiples)
# [5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 55, 60, 65, 70, 75]
The above for loop basically has the following structure:
for <the_element> in <the_iterable>:
<the_expression>
If you compare it with the list comprehension form that you read earlier, you can see that <the_element> is n, <the_iterable> is range(1,16), and <the_expression> is n*5. Putting these values in the list comprehension will give us the following result:
multiples = [n*5 for n in range(1,15)] multiples # [5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 55, 60, 65, 70]
Similarly, you can also get a list with the cube of given numbers like this:
cubes = [n**3 for n in range(1,16)] print(cubes) #[1, 8, 27, 64, 125, 216, 343, 512, 729, 1000, 1331, 1728, 2197, 2744, 3375]
Conditions in List Comprehensions
You can also use an if condition to filter out certain values from the final list. In this case, the list comprehension takes the following form:
[<the_expression> for <the_element> in <the_iterable> if <the_condition>]
A basic example of this type of comprehension would be to get all the even numbers in a given range. A for loop to do this task will look like this:
evens = []
for n in range(1,21):
if n%2 == 0:
evens.append(n)
print(evens)
# [2, 4, 6, 8, 10, 12, 14, 16, 18, 20]
The same thing could also be accomplished by using the following list comprehension:
evens = [n for n in range(1,21) if n%2 == 0] print(evens) # [2, 4, 6, 8, 10, 12, 14, 16, 18, 20]
A more complex example of using list comprehensions would be adding .. if .. else .. conditional expressions inside them.
In this case, the order in which you lay out the statements inside the list comprehension will be different from usual if conditions. When you only have an if condition, the condition goes to the end of the comprehension. However, in the case of an .. if .. else .. expression, the positions of the for loop and the conditional expression are interchanged. The new order is:
[<the_expression> if <the_condition> else <other_expression> for <the_element> in <the_iterable>]
Let's begin by writing the verbose .. if .. else .. conditional expression to get squares of even numbers and cubes of odd numbers in a given range.
squares_cubes = []
for n in range(1,16):
if n%2 == 0:
squares_cubes.append(n**2)
else:
squares_cubes.append(n**3)
print(squares_cubes)
# [1, 4, 27, 16, 125, 36, 343, 64, 729, 100, 1331, 144, 2197, 196, 3375]
The above conditional expression has the following structure:
for <the_element> in <the_iterable>:
if <the_condition>:
<the_expression>
else:
<other_expression>
Putting the corresponding values in the right places will give you the following list comprehension:
squares_cubes = [n**2 if n%2 == 0 else n**3 for n in range(1,16)] print(squares_cubes) # [1, 4, 27, 16, 125, 36, 343, 64, 729, 100, 1331, 144, 2197, 196, 3375]
List Comprehensions for Nested Loops
You can also use nested loops within a list comprehension. There is no limit on the number of for loops that you can put inside a list comprehension. However, you have to keep in mind that the order of the loops should be the same in both the original code and the list comprehension. You can also add an optional if condition after each for loop. A list comprehension with nested for loops will have the following structure:
[ <the_expression> for <element_a> in <iterable_a> (optional if <condition_a>)
for <element_b> in <iterable_b> (optional if <condition_b>)
for <element_c> in <iterable_c> (optional if <condition_c>)
... and so on ...]
The following examples should make everything clearer. There are two nested loops, and multiplying them together gives us multiplication tables.
multiplications = []
for i in range(1, 4):
for n in range(1, 11):
multiplications.append(i*n)
print(multiplications)
# [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 2, 4, 6, 8, 10, 12, 14, 16, 18, 20, 3, 6, 9, 12, 15, 18, 21, 24, 27, 30]
These nested for loops can be rewritten as:
for <element_a> in <iterable_a>:
for <element_b> in <iterable_b>:
<the_expression>
Once you have written the loop in this form, converting it to a list comprehension is easy:
multiplications = [i*n for i in range(1,4) for n in range(1,11)] print(multiplications) # [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 2, 4, 6, 8, 10, 12, 14, 16, 18, 20, 3, 6, 9, 12, 15, 18, 21, 24, 27, 30]
You can also use a similarly written list comprehension to flatten a list of lists. The outer for loop iterates through individual lists and stores them in the variable row. The inner for loop will then iterate through all the elements in the current row. During the first iteration, the variable row has the value [1, 2, 3, 4]. The second loop iterates through this list or row and appends all those values to the final list.
matrix = [
[1, 2, 3, 4],
[5, 6, 7, 8],
[9, 10, 11, 12],
]
flatten = [n for row in matrix for n in row]
print(flatten)
#[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]
Nested List Comprehensions
Nested list comprehensions may sound similar to list comprehensions with nested loops, but they are very different. In the first case, you were dealing with loops within loops. In this case, you will be dealing with list comprehensions within list comprehensions. A good example of using nested list comprehensions would be creating a transpose of the matrix for the previous section.
Without a list comprehension expression, you will need to use two for loops to create the transpose.
matrix = [
[1, 2, 3, 4],
[5, 6, 7, 8],
[9, 10, 11, 12],
]
transpose = []
for i in range(4):
temp = []
for row in matrix:
temp.append(row[i])
transpose.append(temp)
print(transpose)
# [[1, 5, 9], [2, 6, 10], [3, 7, 11], [4, 8, 12]]
The outer loop iterates through the matrix four times because there are four columns in it. The inner loop iterates through the elements inside the current row one index at a time and appends it to a temporary list called temp. The temp list is then appended as a row to the transposed matrix. In the case of nested list comprehensions, the outermost loop comes at the end and the innermost loop comes at the beginning.
Here is the above code in the form of a list comprehension:
matrix = [
[1, 2, 3, 4],
[5, 6, 7, 8],
[9, 10, 11, 12],
]
transpose = [[row[n] for row in matrix] for n in range(4)]
print(transpose)
# [[1, 5, 9], [2, 6, 10], [3, 7, 11], [4, 8, 12]]
Another way to look at this is by considering the structure of list comprehensions that replace the basic for loops that you learned about at the beginning of the article.
[<the_expression> for <the_element> in <the_iterable>]
If you compare it with the nested list comprehension above, you will see that <the_expression> in this case is actually another list comprehension: [row[n] for row in matrix]. This nested list comprehension itself is in the form of a basic for loop.
Final Thoughts
I hope this tutorial helped you understand what list comprehensions are and how to use them in place of basic for loops to write concise and slightly faster code while creating lists.
Another thing that you should keep in mind is the readability of your code. Creating list comprehensions for nested loops will probably make the code less readable. In such cases, you can break down the list comprehension into multiple lines to improve readability.
Additionally, don’t hesitate to see what we have available for sale and for study on Envato Market, and don't hesitate to ask any questions and provide your valuable feedback using the feed below.
by Monty Shokeen via Envato Tuts+ Code
Ivan Aivazovsky
by via Awwwards - Sites of the day
The “Most Loved” One Page Websites from March 2017
March’s “Most Loved” One Page website round-up is brought to you by hosting provider, Bluehost.
Bluehost is the most affordable hosting option to host your One Page websites. They have an incredible $2.95/month deal exclusive to One Page Readers where you can host your website with 50GB diskspace and unlimited bandwidth. They also throw in a free domain!
If you want to get notified about the “Most Loved” awards each month, subscribe to our Inspiration Newsletter.
Below are the 5 One Page websites awarded “Most Loved” in March – hope you enjoy!
Nike – 15 Years of SB Dunk (Competition, Long-Form Journalism)
Brilliant One Pager by Nike celebrating 15 Years of their SB Dunks. The campaign Landing Page is visually stunning including hover sensitive parallax effects, slick load transitions and beautiful big imagery of the products.
Holbein (Competition, Long-Form Journalism)
Unique multi-scrolling and zooming One Pager for London-based financial advisers, Holbein. The Single Page site features a big, colorful background image/canvas with the content arranged in neat blocks. The design really fills a big screen well and adapts gracefully to mobile.
Perspective (Competition, Long-Form Journalism)
Slick One Pager announcing Perspective, a new machine learning API project by the Google Jigsaw team. The Single Page site features a gorgeous interactive slider demonstrating exactly how the API filters and moderates content. Further down is another interactive blank document that rates your inputted text in real time. Interactive content, as shown here, really is the future of of Landing Page design.
Zest (Competition, Long-Form Journalism)
Beautiful landing page for Zest – a Chrome Extension that fills your new tabs with quality curated marketing content. The colorful One Pager features fancy hover-sensitive parallax effects that even integrates with the gyro on your mobile. There are loads more lovely touches and slick transitions throughout the page, my favorite being the light effect on the moon.
Inbox of Forgotten Emails (Competition, Long-Form Journalism)
‘Inbox of Forgotten Emails’ is a hilarious One Pager collecting funny or embarrassing emails we didn’t have the guts to send. The UI is naturally similar to an email inbox, with an AJAX loading category filter and a smart compose email (submission) form. Neat touch with the color scheme switcher too. Cheers CreativeMornings and MailChimp for this awesome collaboration ☕️
ComicKult (Competition, Long-Form Journalism)
Incredibly slick launching soon page for ‘ComicKult’ – an upcoming portal for the comic community. The unique One Pager features an impressive comic book cover “tiled waterfall” background. There is so much attention to detail from cover Retina optimization to sign up form button animations. Make sure once signed up to enter in the Konami Code, sit back and be blown away. What an incredible first impression I’m sure the comic community is going to be drooling about. Cheers for the awesome build notes!
Read my interview with the ComicKult team.
Hope you enjoyed these beautiful One Pagers from March! Big love to hosting provider Bluehost for sponsoring the round up:)
by Rob Hope via One Page Love