Contact

Subscribe via Email

Subscribe via RSS/JSON

Categories

Recent Posts

Creative Commons Attribution 4.0 International License
© Rakhesh Sasidharan

Elsewhere

Add Readability and Instapaper ‘Read Now’ links to your posts

Yesterday I went back and read one of my older posts from my tablet. That made me realize my blog doesn’t have a mobile friendly view. Sure, it doesn’t have any ads or widgets, and the posts appear clean on a browser as my emphasis is on the text/ code, but that doesn’t translate well to a mobile device as the fonts are small and a bit of zooming and scrolling is required to hide the left sidebar and other bits. 

Eventually I read the post using a Readability bookmarklet I had on the mobile browser so that got me thinking I must add quick links to do this for each post so any visitors can take advantage of the same. 

I use Instapaper for most of my reading. For some posts that Instapaper has difficulty rendering (mostly posts with a lot of code, pictures) I use Pocket. I prefer Readability over Pocket as its iOS app is terrific, but Readability’s Android app sucks (poor UI, syncing issues, doesn’t keep track of my last read location) and so I use Pocket rather than Readability. 

For publishers Readability offers an embed code. This is good in that it allows one to read the page in a Readability view without adding to Readability (similar to what I did yesterday using the bookmarklet). It also lets you add the page to Readability, print it, send to Kindle, or email – useful stuff. What I don’t like about the embed code, though, is that it pulls in JavaScript from their website and adds a block of buttons to my posts. I don’t want a block of buttons – in my case, all I want is to offer users a link they can click to get the page in a Readability view. 

For readers Readability offers the bookmarklets I mentioned earlier. I wrapped the “Read Now” bookmarklet as a link for my purpose (as I’ll show in a bit). 

Instapaper too gives bookmarklets for readers – the “Instapaper Text” bookmarklet one is what I am interested in. For publishers Instapaper gives an URL that will add the page to the reader’s Instapaper queue. Unfortunately, there’s no similar URL to simply show the page in an Instapaper view without adding to queue. 

Pocket too gives bookmarklets and tools for publishers. However, both options only allow the page to be added to the Pocket queue, there’s no way to just get a Pocket view display of the page. 

So Readability and Instapaper are what I can use. I added the following text to each of my posts (I use the Atahualpa theme so it was just a matter of adding this text to the “Byline” section of each post and applying some formatting):

All this does is that it wraps the Javascript code from the Readability Read Now and the Instapaper Text bookmarklets within an a block like thus:

When a user clicks the text the JavaScript is executed as though they had clicked on the bookmarklet. (Hat tip to this page where I picked up the syntax from. I haven’t programmed with JavaScript so had to search around for how to invoke JavaScript from a link). 

Hope this helps someone! I have put links to both Instapaper and Readability because I prefer Instapaper but it is lousy with code blocks while Readability handles code blocks better. I feel Instapaper is better for text – it has more fonts, background colors, etc.

CSS2 selectors

Was working with CSS2 selectors today, thought I’d write a post about that.

Consider the following HTML code:

CSS selectors come into play when you want to select specific elements. For instance, suppose I had a CSS declaration such P { color: red; } it will apply to all P elements in the HTML – which may not be what I want. What if I wanted to target only the first P element instead? Or P elements following an H2 element? That’s when you’d use a selector. Selectors make use of relationships between elements.

Relationships

Every element in a given HTML code has a relationship to other elements in the code. It could be a child to another element, an adjacent sibling, the first child of an element, a grand child to an element, and so on. Below I have enumerated the elements from the HTML code above into a form that shows the elements and their relationships. Some elements have a + instead of | – this simply indicates the element is the first child of that type.

Child selectors

Child selectors are used to match elements that are children of another element. The > symbol is used to indicate a “child” relationship. Some examples:

  • LI > P { color: blue; } will target only those P elements that are children of an LI element.
  • OL > LI { color: blue; } will target only those LI elements that are children to OL elements but not UL elements.

Descendant selectors

Descendant selectors are used to match elements that are descendants of another elements. An element is a descendant of another element if it is a child of that element or if its parent is a descendant of that element (pretty obvious usage of the word, actually). A space between elements is used to indicate “descendancy”. Some examples:

  • P STRONG { color: blue; } will target only those STRONG elements that are descendant to a P element. This will not pick the STRONG element that is a child to H1 for instance.

While the child selector is for the immediate children – and does not select grand-children – the descendant selector includes children and grand-children. That’s the difference between these two operators.

Thus BODY > H1 will select all H1 elements that are a direct child of the BODY element – skipping the H1 element that is a child of DIV (hence a grand-child) – while BODY H1 will select the latter too.

If you want to select all descendants except the child – i.e. only the grand-children and further – the * symbol can be used instead of a space. Thus in the HTML code above, BODY * H1 { color: blue; } will skip the H1 elements that are children to the BODY element but target H1 elements that are children to the DIV element (as these are grand-children and descendants).

First child

Notice how I had marked many elements as the first children in my tree of HTML elements above. The reason I did that is because there’s a selector to target just the first children of an element. This is a pseudo-class actually – like how to add a :hover to match A elements when the mouse is hovering over it – so you add a :first-child to the element. Some examples:

  • P:first-child { color: blue; } will target only those P elements that are the first children of any element. In the HTML code above, this will match the P elements with the text “Hello and welcome to my page!” (first P element child of the BODY element) and “I love Batman!” (first P element child of the LI element).
  • Similarly, LI:first-child { color: blue; } will target only those LI elements that are the first children of any element.
  • It is possible to combine selectors too. BODY > P:first-child { color: red; } targets the first child from all the P element children of the BODY element while LI P:first-child { color: red; } targets the first child from all the P elements descendants of the LI element.

Adjacent sibling selectors

Adjacent sibling selectors are used to target siblings that are adjacent to each other. Two elements are siblings if they have the same parent (again, an obvious use of the word). Further, for this element to target such siblings, they must be adjacent to each other. Bear in mind the target is the second sibling, not the first. Some examples:

  • P + P { color: red; } will target all adjacent sibling P elements.
  • P:first-child + P { color: red; } will target all adjacent sibling P elements only if the first sibling is also the first-child. In the HTML code above only the “Here are some of the Batman villains” line matches this criteria.
  • LI:first-child + LI { color: red; } will target the second LI element of every first list.

See also

These are the main selectors. There are some more selectors – based on attributes of the elements and/ or language – best to refer to the W3 CSS2 selectors page for that.