Milan Aryal's Latest Posts

Monday, November 21, 2016

How to not understand life and be okay with it

  1. If you don’t like your name don’t use it.
  2. Scream at the sky, whisper secrets to the ocean, hold hands with clouds. The world is yours if you want it to be.
  3. Do things that make you nervous and let the feeling consume you until you feel scared and alive and want to throw up.
  4. Don’t worry about falling in love.
  5. Pick flowers whenever you see them and leave them wherever you go.
  6. Kiss all the things that make you happy and all the things that make you sad, kiss everything that makes you feel anything.
  7. Weave stars into your clothes and always remember that you came from them and will go back to them again someday.
  8. Never empty your pockets.
  9. Light dead flowers on fire when you’re feeling sad, let their smell fill your lungs and make you forget about life.
  10. Diet coca cola will make your head spin and your throat burn, drink it when you’re feeling like things are going to get bad.
  11. If a boy with pretty eyes asks you who you are, show him your scars and your freckles and your bruises and let him know that you are alive.
  12. The best people have electricity running through their veins and around their hearts, let them shock you.
  13. Forget how old you are, it does not matter.
  14. If something or someone makes you want to run then do it, run until your legs go numb and your heart is about to explode and you forget how to breathe.
  15. When the world is asleep make the night your friend and you will become invincible.
  16. Get lost in another city and don’t ask for directions.
  17. Cry if you want to, but try not to drown in your tears.
  18. Do not be afraid of the sight of blood or the sound of bones snapping or the smell of hospital beds.
  19. Race the moon while you’re driving until you’re going faster than the speed of light.
  20. Never sit still.

— Alina Guevara

Tuesday, January 6, 2015

Why you should switch to GitHub's Atom text editor over Sublime text

Sublime is binary compiled for the platform. Its core is written in C/C++ and a number of its features are implemented in Python, which is also the language used for extending it. Atom is written in Node.js/Coffeescript and runs under webkit, with Coffeescript being the extension language. Though similar in UI and UX, Sublime performs significantly better than Atom especially in “heavy lifting” like working with large files, complex SnR or plugins that do heavy processing on files/buffers. Though I expect improvements in Atom as it matures, design & platform choices limit performance.

The “closed” part of Sublime includes the API and UI. Apart from skins/themes and colourisers, the API currently makes it difficult to modify other aspects of the UI. For example, Sublime plugins can’t interact with the sidebar, control or draw on the editing area (except in some limited ways eg. in the gutter) or manipulate the statusbar beyond basic text. Atom’s “closed” part is unknown at the moment, but I get the sense it’s smaller. Atom has a richer API (though poorly documented at present) with the design goal of allowing greater control of its UI. Being closely coupled with webkit offers numerous capabilities for UI feature enhancements not presently possible with Sublime. However, Sublime’s extensions perform closer to native, so those that perform compute-intensive, highly repetitive or complex text manipulations in large buffers are feasible in Sublime.

Since more of Atom will be open, Github open-sourced Atom on May 6th, 2014. (Atom is MIT licensed and the source is freely available from the atom/atom repository.) As a result it’s likely that support and pace of development will be rapid. By contrast, Sublime’s development has slowed significantly of late - but it’s not dead. In particular there are a number of bugs, many quite trivial, that haven’t been fixed by the developer. None are showstopping imo, but if you want something in rapid development with regular bugfixing and enhancements, Sublime will frustrate. That said, installable Atom packages for Windows and Linux are yet to be released and activity on the codebase seems to have cooled in the weeks before and since the announcement, according to Github’s stats. Now prebuilt versions of Atom are available for OS X 10.8 or later, Windows 7 & 8, RedHat Linux, and Ubuntu Linux.

In terms of IDE functions, from a webdev perspective Atom will allow extensions to the point of approaching products like Webstorm, though none have appeared yet. It remains to be seen how Atom will perform with such “heavy” extensions, since the editor natively feels sluggish. Due to restrictions in the API and lack of underlying webkit, Sublime won’t allow this level of UI customisation although the developer may extend the API to support such features in future. Again, Sublime’s underlying performance allows for things that involve computational grunt; ST3’s symbol indexing being an example that performs well even with big projects. And though Atom’s UI is certainly modelled upon Sublime, some refinements are noticeably missing, such as Sublime’s learning panels and tab-complete popups which weight the defaults in accordance with those you most use.

I see these products as complementary. The fact that they share similar visuals and keystrokes just adds to the fact. There will be situations where the use of either has advantages. Presently, Sublime is a mature product with feature parity across all three platforms, and a rich set of plugins. Atom is the new kid whose features will rapidly grow; it doesn’t feel production ready just yet and there are concerns in the area of performance.


READ MORE: Using GitHub's Atom text editor

Wednesday, December 3, 2014

How photography actually works

This infographic goes into detail about how photography actually works.

How photography actually works

Further published by Milan Aryal, here.

Thursday, November 27, 2014

Integrating social meta tags into WordPress, Tumblr and Blogger

Integrating social meta tags into WordPress, Tumblr and Blogger

Social media meta tags make your content look better on social media. You can control how your post or update shows up in news feeds. And handsome social media updates make your content more appealing.

Meta data allows you to tell social media platforms how titles, images, and more should show up in the newsfeeds on those sites. The rel=publisher and rel=author also are on this list because those two tell Google+ to link your site to your company page and your posts to your profile, respectively. Using meta data on social media (which also shows up in searches) shows potential readers more information such as author byline, description, and images so they are more apt to click on your content.

You may have heard about the Open Graph protocol which enables any web page to become a rich object in a social graph. Facebook, Pinterest, LinkedIn, Google+, and most social websites use these Open Graph meta tags. Twitter has its own Twitter card property to get rich snippet. Google+ and Pinterest also support Schema.org meta tags but Open Graph is fine.

Following tips will help you for integrating social meta tags into popular CMS systems like WordPress, Tumblr and Blogger.

WordPress site, self-hosted or third-party hosted

The WordPress publishing platform is one of the most popular and widely used CMS systems in the world. It provides rich plugin support for additional functionality, including various plugins for social media.

Popular plugins in particular like Jetpack and WordPress SEO by Yoast make it easy to integrate your WordPress site with social meta tags.

Install WordPress SEO by Yoast, this plugin made everything easier:

Installing WordPress SEO by Yoast
  1. Go to the left navigation and click on SEO and then Social under that.
  2. In the Facebook tab, check the checkbox “Add Open Graph meta data.”
  3. Select Save Changes.
  4. Now move on to the Twitter tab and check the checkbox “Add Twitter card meta data” and save changes.
  5. Similarly add meta data for other social media.

WordPress site, hosted on WordPress.com

Automattic/WordPress supports hosting of WordPress sites on their WordPress.com domain, with over 72M sites and counting.

By default, WordPress-hosted blogs are enabled with social meta tags. WordPress automatically scans the contents of your post and determines the best meta data. Additionally, WordPress allows for easy-posting of your blog entries directly to social media via the “New Post” interface.

Tumblr

Tumblr has quickly become one of the most popular blogging platforms for content and photos, with nearly 145M sites and counting.

By default, Tumblr has social meta tags enabled, and “smart suggests” the meta data based on your post type. However, if you want to further customize the social meta tags, you can follow following process.

First add following code in the <head> tag:

<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# blog: http://ogp.me/ns/blog#">

And place the following code before </head> section:

<!-- BEGIN TUMBLR FACEBOOK OPENGRAPH TAGS -->
        
<meta name="text:Facebook ID" content="YOUR_FB_ID_HERE">
{block:IfFacebookID}
<meta property="fb:admins" content="{text:Facebook ID}">
        
    <meta property="og:site_name" content="{Title}"/>

{block:PermalinkPage}

    <meta property="og:url" content="{Permalink}"/>
    <meta property="og:type" content="article"/>

        {block:Posts}
            {block:Text}
                {block:Title}<meta property="og:title" content="{PlaintextTitle}"/>{/block:Title}
                <meta property="og:description" content="{PlaintextBody}"/>
            {/block:Text}

            {block:Photo}
                <meta property="og:image" content="{PhotoURL-500}"/>
                {block:Caption}<meta property="og:description" content="{PlaintextCaption}"/>{/block:Caption}
            {/block:Photo}

            {block:Photoset}
                {block:Photos}
                <meta property="og:image" content="{PhotoURL-500}"/>
                {/block:Photos}
                {block:Caption}<meta property="og:description" content="{PlaintextCaption}"/>{/block:Caption}
            {/block:Photoset}

            {block:Quote}
                <meta property="og:title" content="{PlaintextQuote}"/>
                <meta property="og:description" content="{PlaintextSource}"/>
                <meta property="og:image" content="{PortraitURL-64}"/>
            {/block:Quote}

            {block:Link}
                <meta property="og:title" content="{PlaintextName}"/>
                <meta property="og:description" content="{PlaintextDescription}"/>
                <meta property="og:image" content="{PortraitURL-64}"/>
            {/block:Link}

            {block:Chat}
                <meta property="og:title" content="{PlaintextTitle}"/>
                <meta property="og:description" content="{block:Lines}{block:Label}{Label}: {/block:Label}{Line} • {/block:Lines}"/>
                <meta property="og:image" content="{PortraitURL-64}"/>
            {/block:Chat}

            {block:Audio}
                <meta property="og:title" content="{block:Artist}{Artist} - {/block:Artist}{block:TrackName}{TrackName}{/block:TrackName}"/>
                <meta property="og:description" content="{PlaintextCaption}"/>
                {block:AlbumArt}<meta property="og:image" content="{AlbumArtURL}"/>{/block:AlbumArt}
            {/block:Audio}

            {block:Video}
                {block:Caption}<meta property="og:description" content="{PlaintextCaption}"/>{/block:Caption}
            {/block:Video}

            {block:Answer}
                <meta property="og:title" content="{PlaintextQuestion}"/>
                <meta property="og:description" content="{PlaintextAnswer}"/>
                <meta property="og:image" content="{PortraitURL-64}"/>
            {/block:Answer}

        {/block:Posts}

{/block:PermalinkPage}

{block:IndexPage}
        <meta property="og:title" content="{Title}"/>
        <meta property="og:type" content="blog"/>
        <meta property="og:description" content="{MetaDescription}"/>
        <meta property="og:image" content="{PortraitURL-64}"/>
{/block:IndexPage}
        <!-- END TUMBLR FACEBOOK OPENGRAPH TAGS -->

For Twitter card property also place the following code before </head> section:

<!-- BEGIN TWITTER TAGS -->
        {block:PermalinkPage}

<meta name="twitter:url" content="{Permalink}"/>
<meta name="twitter:site" content="@YOUR_BLOG_TWITTER_USERNAME_HERE">
<meta name="twitter:creator" content="@YOUR_TWITTER_USERNAME_HERE">

        {block:Posts}
            {block:Text}
                <meta name="twitter:card" content="summary">
                {block:Title}<meta name="twitter:title" content="{PlaintextTitle}"/>{/block:Title}
                <meta name="twitter:description" content="{PlaintextBody}"/>
                <meta name="twitter:image" content="{PortraitURL-64}"/>
            {/block:Text}

            {block:Photo}
                <meta name="twitter:card" content="photo">
                <meta name="twitter:image" content="{PhotoURL-500}"/>
                {block:Caption}<meta name="twitter:description" content="{PlaintextCaption}"/>{/block:Caption}
            {/block:Photo}

            {block:Photoset}
                <meta name="twitter:card" content="photo">
                {block:Photos}<meta name="twitter:image" content="{PhotoURL-500}"/>{/block:Photos}
                {block:Caption}<meta name="twitter:description" content="{PlaintextCaption}"/>{/block:Caption}
            {/block:Photoset}

            {block:Quote}
                <meta name="twitter:card" content="summary">
                <meta name="twitter:title" content="{PlaintextQuote}"/>
                <meta name="twitter:description" content="{PlaintextSource}"/>
                <meta name="twitter:image" content="{PortraitURL-64}"/>
            {/block:Quote}

            {block:Link}
                <meta name="twitter:card" content="summary">
                <meta name="twitter:title" content="{PlaintextName}"/>
                <meta name="twitter:description" content="{PlaintextDescription}"/>
                <meta name="twitter:image" content="{PortraitURL-64}"/>
            {/block:Link}

            {block:Chat}
                <meta name="twitter:card" content="summary">
                <meta name="twitter:title" content="{PlaintextTitle}"/>
                <meta name="twitter:description" content="{block:Lines}{block:Label}{Label}: {/block:Label}{Line} • {/block:Lines}"/>
                <meta name="twitter:image" content="{PortraitURL-64}"/>
            {/block:Chat}

            {block:Audio}
                <meta name="twitter:card" content="summary">
                <meta name="twitter:title" content="{block:Artist}{Artist} - {/block:Artist}{block:TrackName}{TrackName}{/block:TrackName}"/>
                <meta name="twitter:description" content="{PlaintextCaption}"/>
                {block:AlbumArt}<meta name="twitter:image" content="{AlbumArtURL}"/>{/block:AlbumArt}
            {/block:Audio}

            {block:Video}
                <meta name="twitter:card" content="summary">
                <meta name="twitter:title" content="{PlaintextTitle}"/>
                {block:Caption}<meta name="twitter:description" content="{PlaintextCaption}"/>{/block:Caption}
            {/block:Video}

            {block:Answer}
                <meta name="twitter:card" content="summary">
                <meta name="twitter:title" content="{PlaintextQuestion}"/>
                <meta name="twitter:description" content="{PlaintextAnswer}"/>
                <meta name="twitter:image" content="{PortraitURL-64}"/>
            {/block:Answer}

        {/block:Posts}

{/block:PermalinkPage}
        <!-- END TWITTER TAGS -->

Blogger

Google’s Blogger is a great platform for publishing rich content. To add some social meta tags follow the following process.

First add xmlns:og='http://ogp.me/ns#' in the <HTML> tag. Note that there may already exist some code.

<HTML xmlns:og='http://ogp.me/ns#'>

And place the following code before </head> section:

<!-- Open Graph metatags -->
<b:if cond='data:blog.pageType == "item"'>
<meta content='article' property='og:type'/>
<meta content='YOUR_NAME_HERE' name='author' property='article:author'/>
<meta expr:content='data:blog.title' property='og:site_name'/>
<meta expr:content='data:blog.pageName' name='title' property='og:title'/>
<meta expr:content='data:blog.canonicalUrl' property='og:url'/>

 <b:if cond='data:blog.postImageUrl'>
     <meta expr:content='data:blog.postImageUrl' property='og:image'/>
     <b:else/>
     <meta content='YOUR_LOGO_URL_HERE' property='og:image'/>
 </b:if>
 <b:if cond='data:blog.metaDescription'>
     <meta expr:content='data:blog.metaDescription' name='description' property='og:description'/>
     <b:else/>
     <meta expr:content='data:blog.pageTitle' name='description' property='og:description'/>
 </b:if> 

<b:else/>
<meta content='blog' property='og:type'/>
<meta expr:content='data:blog.title' property='og:site_name'/>
<meta expr:content='data:blog.canonicalHomepageUrl' property='og:url'/>
<meta content='YOUR_LOGO_URL_HERE' property='og:image'/>

 <b:if cond='data:blog.metaDescription'>
  <meta content='data:blog.metaDescription' name='description' property='og:description'/>
  <meta content='YOUR_BLOG_KERYWORDS_HERE' name='keywords'/>
 </b:if>
 </b:if>

<!-- You can replace following locale “British English” (en_GB) or Nepali (ne_NP) alternative with your own --> 
<meta content='en_US' property='og:locale'/>
<meta content='en_GB' property='og:locale:alternate'/>
<meta content='ne_NP' property='og:locale:alternate'/>
<!-- /Open Graph metatags -->

For Twitter card property also place the following before </head> section:

<!-- Twitter card metatags -->
 <meta content='@YOUR_BLOG_TWITTER_USERNAME_HERE' name='twitter:site'/>

 <b:if cond='data:blog.pageType == "item"'>
 <meta content='@YOUR_TWITTER_USERNAME_HERE' name='twitter:creator'/>
 <meta expr:content='data:blog.pageName' name='twitter:title'/>
 <meta expr:content='data:blog.canonicalUrl' name='twitter:url'/>
  <b:if cond='data:blog.postImageUrl'>
   <meta content='summary_large_image' name='twitter:card'/>
      <meta expr:content='data:blog.postImageUrl' name='twitter:image:src'/>
   <meta content='560' name='twitter:image:width'/>
   <meta content='750' name='twitter:image:height'/>
      <b:else/>
   <meta content='summary' name='twitter:card'/>
      <meta content='YOUR_LOGO_URL_HERE' name='twitter:image'/>
  </b:if>
  <b:if cond='data:blog.metaDescription'>
      <meta expr:content='data:blog.metaDescription' name='twitter:description'/>
      <b:else/>
      <meta expr:content='data:blog.pageTitle' name='twitter:description'/>
  </b:if> 

 <b:else/>
 <meta content='summary' name='twitter:card'/>
 <meta expr:content='data:blog.title' name='twitter:title'/>
 <meta expr:content='data:blog.canonicalHomepageUrl' name='twitter:url'/>
 <meta content='YOUR_LOGO_URL_HERE' name='twitter:image'/>
 <meta expr:content='data:blog.metaDescription' name='twitter:description'/>
 </b:if>

For Google+ and Facebook authorship include the following code before </head> section:

<!-- Facebook admins and app ID -->
<meta content='YOUR_FB_ID_HERE' property='fb:admins'/>
<meta content='YOUR_FB_APP_ID_HERE' property='fb:app_id'/>

<!-- Google authorship and publisher markup -->
<link href='https://plus.google.com/YOUR_PAGE_ID_HERE/posts' rel='author'/>
<link href='https://plus.google.com/YOUR_PAGE_ID_HERE' rel='publisher'/>

Validating

Be sure to check one of your example posts via the different social media metadata validator.