Categories
AMP AMP WP

Signed Exchange to retain publisher brand in AMP

Signed Exchange to retain publisher brand identity in Google AMP.

Searching for results in Google is now mostly showing AMP pages. Clicking on these results/amp pages are opening quite instantly. It’s due to the AMP Cache that Google uses to deliver preloaded content. The downside of this was, it was not keeping the brand identity in the browser URL or the address bar.

Thanks to the signed exchange, we can put a stop to the loss of brand identity.

Here is an example of the same:

There are some tools you can use to have for your site as well as explained here. But the easiest way to do it would be to use CloudFlare AMP Real URL on click option.

Categories
Random

Google AMP Ads and standard webpages

Have you ever tried using amp ads on non-amp/standard webpages? Sounds weird given that amp components are supposed to be used on amp pages only. However, the way amp is evolving, there is a possibility that we could use amp as a Framework also.

At first, I did an experiment of using amp-ad component on a standard html (non-amp) page. For which I used amp runtime script which also adds amp-ad under the hood, and ultimately uses gpt JS library for ads.

Why I did this? So basically I wanted to get coding simplified for myself. Whenever we want to use ads on website, we have to use gpt JS and write a bunch of code with size mapping for responsive ads, check for visibility of ads, element’s presence in DOM etc. I figured if amp-ad is already doing it, and amp is made for optimized page rendering and no content blocking.

My team and I worked on this idea and made a WordPress plugin that people can use and integrate amp ads on on-amp pages also, obviously it will work on AMP without any code changes. Basically same code base for both and Non-AMP. You can give it a try in WordPress with this plugin AMP Admanager. Currently greaterkashmir.com is showing ads using this plugin.

On the similar lines, AMP pages team is working on Bento AMP which basically make AMP a framework to use on Non-AMP pages.

Categories
AMP AMP WP

Optimization of videos for AMP Stories

Quick Summary –

  • AMP Plugin 1.2 and latest has AMP Stories feature for WordPress Ecosystem.
  • Transcoder Plugin is available for Video Optimization in both free and premium plans.
  • Optimize videos up to 90% smaller in file size than original using Transcoder.
  • The Transcoder 1.3 plugin will be available for people in next week.

A few days back I wrote about the Possibilities with AMP Stories. While looking at many AMP Video Stories, it occurred to me that people with slower internet will have problems loading videos on AMP Stories. According to AMP Stories Best Practices, if videos in AMP Stories are less than 4MB, then it will perform well. However, not all people can optimize videos always.

I came to know that AMP Team is already working on integrating Jetpack VideoPress (https://github.com/ampproject/amp-wp/issues/3045) but it’s a paid service and requires premium plan to use it. I knew that at rtCamp have already built Transcoder plugin which transcodes / optimizes video as soon as its uploaded in WordPress and stores the optimized video (mp4) back to it’s attachment meta. Good thing is it can be used in Normal WordPress setup also and it is not dependent on any other plugin.

Transcoder development team and I discussed on how we can use transcoder with AMP Stories after AMP Plugin v1.2 release with AMP Stories that has Gutenberg Editor for adding AMP Story pages.
I came to know that transcoder plugin has ability to optimize video for up-to 90%.

As mentioned here – https://rtmedia.io/blog/transcoder-for-amp-video-stories/ this transcoder is available in beta for everyone to test. In the next week I believe we will have both AMP v1.3 plugin (currently has RC release) and Transcoder 1.3 plugin (currently in beta) released for people.

Categories
AMP WP

Possibilities with AMP Stories in WordPress

After Snapchat, WhatsApp, Facebook, Instagram and now Youtube stories, we have a way to use “stories” or “status” feature in WordPress also.

For this, we will need:

  1. Latest official AMP 1.2.0 plugin which has this AMP Stories (beta) feature
  2. Latest Gutenberg plugin (The one merged into WP 5.0 is old.)

Here are some AMP Stories examples:

  1. https://www.washingtonpost.com/graphics/2018/business/amp-stories/self-driving-car-waymo-robo-taxi/
  2. https://time.com/amp-stories/time-100-2019/
  3. https://storiestests.netlify.com/traveltips2
  4. https://vacayholics.com/8impressive-attractions-of-the-river-nile
  5. https://tappable.co/s/tokyo/story.html
  6. https://foodaciously.com/amp/recipe/black-beans-and-sweet-potatoes-falafels/story
  7. https://www.nationalgeographic.com/amp-stories/amp-maori-new-year-story/

Although currently, large videos take time to load hence AMP best practices mention keeping video less than 4MB size.

I think the news sites can make great use of this, as they keep on adding new photos to a story, and give a status update. Like we are used to seeing the Whatsapp status updates, the news stories can also be used in such a way to keep people updated on the news story.

Categories
AMP AMP WP

Amplify WordPress Site

Some quick tips for WordPress developers to do “WP to AMP” conversion.

Follow these steps:

  1. Install Official AMP plugin
  2. Use AMP in Transitional mode (formerly Paired mode)
  3. Check “Disable Admin Bar on AMP pages” checkbox.

This should give you amp site at /?amp page. You can also choose which pages to make AMP ready.

1. Custom Javascript

Custom Javascript will be removed so any code that relies on this custom javascript needs to created separately in AMP.

Refer Gravity Form AMP Support Script.

Use a wrapper function to add AMP related markup which doesn’t work in AMP page.

Ref – https://gist.github.com/pradeep910/b25525034289ab0bc2b7fa0896f4ac90#file-rt-amp-gravity-form-fix-php-L13-L24

Google Analytics can be added from backend option.
Ref – https://amp-wp.org/documentation/playbooks/analytics/

2. CSS limit (< 50kb)

In case if front end breaks on AMP page, check if CSS limit is exhausting. If CSS limit is reached 50kb then next files will not be loaded.

To handle this, create chunks of CSS like homepage, archive, single, etc. and load them only on the pages which require these CSS using wp_enqueue_style()

Note: Admin bar css is of 17KB, so cross check if you have disabled Admin bar on AMP pages.

3. Some of the known problems

If popups are not working
> use https://amp.dev/documentation/examples/components/amp-lightbox/

If external sources/embeds are not working like Vuukle, Outbrain, etc.
> use their amp valid code conditionally for AMP pages. In case of iframes, need to use <amp-iframe>, however, it can’t use self domain iframe and gives error that you can see in console, so it can be used as bitly url.


You must have seen this slide from Google AMP Roadshow 2018 that shows how to configure AMP Plugin.

However, AMP Plugin has changed a little. You can see/read resources and documentation here – https://amp-wp.org/.


Categories
AMP Roadshow

Experiencing Google AMP Roadshow Mumbai 2018

Google AMP Roadshow Mumbai 2018 happened at ITC Maratha hotel. There was a small meet-and-greet before the main event for Partners / Speakers and an opportunity to solve queries before the event. Here’s what happened.

Oct 26th, Partners event

This was one day before the main AMP Roadshow event. Google team asked us to meet with AMP queries to make meeting fruitful and productive. After the quick introduction, we had a discussion about our queries.

I discussed Bing’s announcement of AMP Support but not having any sign of AMP results in bing.com searches. After a long discussion, we came to the conclusion that Bing only supports news related AMP pages.

While discussing the infinite scroll, I got to know about <amp-next-page>, however, it’s still in beta so not ready for production.

I discussed some CSS related issue with AMP images and how we can solve and contribute to the AMPhtml project itself.

About paywall support, I pointed out problem with amp laterpay paywall implementation, Google Team (Sohani Rao) mentioned about <amp-subscriptions> which is another AMP component built on top of <amp-access> just like <amp-access-laterpay>. However, <amp-subscriptions> is experimental and only supports Google service.
Also discussed on how it can be a possible alternative to <amp-access-laterpay>.

After the meeting, I had better insights into AMP.

Oct 27th, AMP Roadshow (Main Event)

After registration, all the people who were mostly developers started to come in.

Here is the summary of what Google AMP team shared in the event.

  • Raghu Simha started with Introduction & Keynote – covering AMP basics and general working of AMP.
  • Matt Ludwig talked about “AMP: A library for beautiful responsive sites” – how people can start using https://www.ampstart.com/ to create AMP Pages with prebuilt templates of blog, ecommerce, art & food.
  • Cathy talked about “Advanced interactivity with AMP” – covering new components for interactivity like flying carpet, fx examples.
  • Sohani Rao talked about “AMP in production” – a journey of AMP page development to Shipping AMP page.
  • After lunch Avneet Singh delivered a talk about  “Advertising & AMP” – in which he explained what kind of ad networks are supported along with header bidding.
  • Yuxuan Zhou talked about “Progressive Web AMPs” and some cool implementations that my team felt was very simple and efficient way.
  • Dipak Parikh talked about “What’s next in AMP?” explaining new components and possibilities with AMP.

About my talk, it started with a question “how many of you know WordPress?”. Surprisingly more than 50% people raised their hands! As I was talking about AMP Plugin and how it was collaboratively built by Google, Automattic, and XWP team, followed by the live demo of the plugin on my laptop.

I showed people how they can use AMP plugin’s 3 template modes (classic, paired and native). Since plugin generates required CSS for the page using CSS tree shaking, I showed a demo of CSS extraction and its informative log in the ‘view-source’ of the page with weight/size of each CSS files and how much CSS in total got included on AMP page.

Apart from this, I showed people how they can see the network panel to see the timing part of page and AMP sanitization/tag replacement process. Network’s timeline panel is very helpful for the developer I believe for the optimization of the page.
Showed a little example of <amp-sidebar> and how it can be added just for AMP pages in WordPress theme code.
Closed my presentation by showing how many sites use classic, paired and native mode.
In the Q&A Panel Discussion, Google AMP team & I got to hear some basic and some advanced level questions. Some of them included support for CMSes other than WordPress, basic analytics questions, etc.

Followed by Q&A session, began the CodeLab where Google AMP team shared some examples to start AMP customization on. While doing so, developers were getting their queries solved by Google AMP team.

The day ended with this Group picture. This was a nice experience for me.  🙂

Categories
Random

Something for IT depressed guys

Most IT freshers, IT graduates and postgraduates I have seen are NOT getting jobs quickly after they pass out or even after 5 years of passing out, as a result, it causes depression!
I am adding some ways to deal with this depression and bounce back from Depression.

What to do when free?

If you are still looking for a job and getting no offers, you can try learning something new that you can add to your profile.

  1. Start creating your own site -Most people look for applicants work or skills. Having your own site and showcasing your talent would help you get there fast.
    Keep one page where you show your projects list that you have done already. Possibly with the live web links to see a demo.
  2. Create small projects on Github -Whatever your interest is, work on that and create some projects like frontend work, backend work, small web apps. It can be a simple one-page project.
  3. Keep your work online using free hosting services -Chances of getting a call from Companies will increase if you have put your work online.
    Show demos of your work on some free tier services like glitch.com, firebase.io. For WordPress dev sites/demos, you can use pantheon.io
    You can free tier services to host sites for demos here – https://github.com/ripienaar/free-for-dev#paas

Your knowledge and expertise will improve as you try to create demos of your work. The more the merrier.

Above things will give you enough confidence and knowledge to get into any start-up companies. Company doesn’t have to be big!

Remember – Life is not to get sad on what you couldn’t get. Learn to live life naturally. Keep working towards your goal, someday you will achieve it. Never Give Up!

Categories
Random

Regardless of who does what, only poor has to pay the price!

Random thoughts…

I have seen many examples where someone does mistake or crime or bad things intentionally or unintentionally, only poor had to pay the price.

Consider these examples –

  • A small girl felt ashamed of being poor after seeing her mother borrowing money from some people for her School bus pass. She commits suicide!
  • A poor farmer, overloaded with loans already, couldn’t earn enough money to do marriage of his own daughter. He commits suicide!
  • Any protests or any political activity directly affects poor people. In the protest about reservation for particular caste, protesters destroy public transport. Only poor gets affected as public transport is largely used by the poor.

Above are normal examples we see almost daily in TV news. But I wanted to point out the fact that no matter what, the “Rich” people won’t get hurt or won’t have to pay the price.

90% of the bad things that happen, happen to poor people.

A road built by someone, gets potholes in a few days, due to cheap construction. But people who die in the accidents or people who get hurt because of potholes will mostly be poor ones.