The way scoping of index variables work in Python might surprise a few! This article is all about dealing with them by considering few scenarios and understanding the behavior.
Thanks to Eli Bendersky for bringing this to my attention by writing about it on his blog. Let’s
take a few scenarios and you’re job is to guess the output,
Since, there is no element in the list, the for loop simply doesn’t run leaving i as an undefined variable in the current
scope. Hence, you’ll get,
You might think this would produce the same error as above. This is where things become different. In Python, the scoping rules
are fairly simple and elegant: a block is either a module, a function body or a class body. Within a function body, names are
visible from the point of their definition to the end of the block (including nested blocks such as nested functions). Hence, you’ll get,
The for-loop makes assignments to the variables(s) in the target list. […] Names in the target list are not deleted when
the loop is finished, but if the sequence is empty, they will not have been assigned to at all by the loop.
The UX Launchpad team has done an in-depth analysis and a comprehensive
review of comparing the mapping experience on iOS and Android. The article uses a bunch of parameters
to evaluate the user experience on both the apps with no clear winner.
The idea behind this article is to teach rather than judge, with just a bunch of design lessons inspired from studying two
similar products. Do not complain if you find the article too long for your liking!
Few would argue that Codepen has been an indispensable tool for the Frontend developer community. Although, I have been using Codepen for a long time, only recently, I realised that it can also be used to beautify your compressed CSS code.
Recently, I tweeted about using
Codepen to beautify your CSS code. I got few reactions in response asking me to explain the
process. The idea is simple —
Copy-paste your compressed code in the CSS section.
Select a pre-processor of your choice that allows you to write native CSS code.
Switch to the compiled version and extract the output.
I’ve also got a GIF version of the above steps,
Currently, this approach would work with LESS, Stylus and Scss. It obviously wouldn’t work with the indented syntax
version of Sass, simply because it doesn’t consider the CSS syntax as valid. Unfortunately, this approach doesn’t work
Although, Markdown supports HTML tags, the compiled version does not beautify the HTML tags.
This hidden feature can take Codepen a notch higher and bring it very close to fully functional code editor.
Not-so long ago I remember writing about CSS Selectors Level 3. Fast-forward 14 months, I'm now writing about the next specification of CSS that aims to improve and enhance CSS3 by introducing wide-range of new selectors and pseudo-classes.
There’s no such thing as CSS4, as pointed out by Tab Atkins on his blog.
CSS3 is the current evolution of CSS, in which the recommendations are split into modules that
can be progressed independently. Instead of there being a CSS4, the modules have levels, like Level 3, Level 4 etc.
The complete specification has a lot of new selectors, but a few of them run the risk of getting dropped before the
specification reaches candidate recommendation.
Following is the list of new selectors that I think, are going to be the most useful ones,
The relational pseudo class :has() accepts a list of selectors as an argument to target those elements that contain
atleast one element from the list.
/** * Match <a> elements that contain an <img> tag as * the direct child **/a:has(>img)/** * Match <dt> elements that are immediately followed * by another <dt> element **/dt:has(+dt)/** * Match <section> elements that don’t contain any * header elements **/section:not(:has(h1,h2,h3,h4,h5,h6))/** * Match <section> elements that contains anything that's * not a header element **/section:has(:not(h1,h2,h3,h4,h5,h6))
Multiple attribute selectors
Multiple attribute selectors can be used to represent several attributes of an element, or several conditions on
the same attribute.
/* Here, the selector represents a span element whose hello attribute has exactly the value 'Cleveland' and whose goodbye attribute has exactly the value 'Columbus' */span[hello="Cleveland"][goodbye="Columbus"]
:dir() and :lang()
The :dir() pseudo-class allows the author to write selectors that represent an element based on its
directionality as determined by the document language. The :lang() pseudo-class represents an element
that is in one of the languages listed in its argument. It accepts a comma-separated list of one or more
language ranges as its argument.
:dir(ltr)#Matchesallelementswith'dir'as'ltr'/** * Match elements with `lang` attribute defined either * as French or German **/:lang(fr,de)
The :empty pseudo-class represents an element that has no children at all.
/** * For instance, to target a paragragh tag that has no children * at all [<p></p>], we could use **/p:empty
The :only-child pseudo-class represents an element that has no siblings at all. It is exactly same as
:first-child:last-child or :nth-child(1):nth-last-child(1), but with a lower specificity.
/** * Match if the element is the only child of its parent, * like [<div><p></p></div>] **/p:only-child
The introduction of these selectors, gives us a lot more flexiblity while writing CSS, reduces dependencies
eye on the progress of CSS Selectors Level 4 specification, then I would strongly recommend you to bookmark this link,
Google, Yahoo and others for long have been strongly recommending to serve your static assets from a cookieless domain for a
faster site. Jonathan Klein, however, questions this notion with the help of a comprehensive article supporting his claim that
serving CSS files from the same domain as the base page might be a performance win.
This case study was the result of a recent experimentation done at Etsy and is accompanied by detailed analysis of the top 5 most
visited websites in the world. The conclusions are rather surprising given the benefits of serving from a cookieless domain.