Forem: Ankit

Using BunnyCDN To Make Gatsby Faster

Ankit — Thu, 13 Aug 2020 05:11:45 +0000

GastbyJS is fast and great. Though I can't make it greater but surely can make it faster, want to see how? Join me and see how I use BunnyCDN to make Gatsby super fast.

In 2020 I moved Devxify to Gatsby. As most of people do, I too used Netlify for it. Though Netlify worked fine but as I was on free tier so the performance of CDN wasn't great for me and the paid plan started from 19USD per month, too high for a single project.

I looked for ways to improve the infrastructure. The best option which I found was bringing my own CDN into the game. I had been using BunnyCDN from it's early days so I knew the team, they are great and specially the founder Dejan is very helpful and committed to add new updates. Also with BunnyCDN I get the guarantee that my site is being served by comparatively expensive zone like Asia and Oceania (whenever required), I can't assure that in Netlify or Cloudflare. Now the intro is done and let's begin with the context.

So if you are too willing to switch to BunnyCDN↗ then just to be clear you can't switch completely, you still will need to use Netlify as you backed build engine. Let's start with all the steps you need to follow.

1. Configure BunnyCDN

Go to BunnyCDN and create a new pull zone. It would ask for name and origin URL, in name choose anything you like; for example site-cdn then in origin URL enter the URL given by Netlify. It should look like site-hash.netlify.app, keep rest settings as it is.

Then add these cdn.site.com, site.com & www.site.com to BunnyCDN. It's completely your choice to use www or no-www, I would still suggest you to use www for your website. In our setup Netlify will not serve any of your domain so you need not add any domain there, we will use the site-hash.netlify.app for the whole setup.

2. Add CDN to Gatsby

Now the first and most basic step to integrate a CDN into Gastby is to use it as asset prefix↗. What this does is, it changes all the asset path from site.com to cdn.site.com , by doing this all of your assets will start routing from BunnyCDN instead of Netlify. To do this you need to follow 2 simple steps.

First, add asset prefix to Gatsby config file

module.exports = {
  assetPrefix: `https://cdn.site.com`,
}

Second, go to Netlify setting and find menu called build & deploy. Then simply change the build command.

# Old Build Command
gatsby build
# New Build Command
gatsby build --prefix-paths

Once done, do a test build and see if everything work fine.

Issue: If you use .svg type images in your in your website markdown then this might break it. Issue↗ has been opened. Temporary solution can be to offload then to an external provider like BunnyCDN storage.

3. Enable Perma-Cache

Perma cache is a new technology implemented by BunnyCDN↗. According to my knowledge, they are the first one to do so. You won't find much about it but I will try to explain. When you enable perma cache, BunnyCDN collects all your resources (upon requested) and store it into a Geo-replicated storage. The main benefit of this is that even if CDN cache misses, you'll still get the benefit of asset being served from nearby location. Though it's hard for me to explain but you'll understand when you setup it yourself. Also BunnyCDN will soon add a blog post explaining this, keep an eye. Follow these steps to enable perma cache.

First, go to BunnyCDN dashboard and add a storage zone.

There it would ask you for name of storage zone, main storage region and geo replicated zones. To make your task easier, I have added an image of things you need to enable here, have a look.

Second, enable perma cache for pull zone.

Now go to the pull zone you created, on the left hand side you would find a menu mentioning perma cache. Click on it and choose the storage zone you just created. I have added an image again for making it easier.

Now most of the part is done, your site has already become faster but still there is one last change we need to do. When you enable perma cache, then it by defaults set's cache-control header to max. We now need to tell the browser to not cache our .json and .html files. This is essential for of our content to be fresh on updates. Gatsby official documentation↗ on caching.

4. Set Cache-Control Headers

Setting this up is very necessary if you don't wish to server stale content to your visitors. BunnyCDN provides a neat tool for this, it's called edge rules. You will find this option in the same menu where you found perma cache. Once you are there, click on the button which says "add edge rule".

The there would be an dropdown option named as "action", choose "override cache time" in the menu. In description you can write anything for your understanding. Then there would be another input box named with title "cache time in seconds", ideally you should put 0 seconds but I would suggest you to put 3600 seconds there. So your mentioned resources will be cached for only 5 minutes in your browser.

Then scroll down choose "match any" in condition matching section. Next in the condition part choose if > File Extension > Match Any, then add json, html, manifest and {{empty}}. Look at images below to have clear understanding. Just to let you know {{empty}} is to tell browser to not cache resources with no extension, this is generally your html file.

Another thing you might want to do is, adding CORS header. To do this simply go to headers section in the menu for the pull zone and add the below values.

eot, ttf, woff, woff2, css, json, js, svg, jpg, png, ico

Conclusion

Though I have tried and tested this solution but Netlify doesn't suggest this. They say so because they because they don't want you to add a proxy between Netlify and your user but this setup only uses Netlify as a build engine nothing else.

If you really liked the article then do share it with your friends and colleagues. If you find a error or just want to do addition to this post then feel free to drop a message on Twitter↗, also do follow us for quick updates. For weekly updates on web performance and optimization do subscribe to our newsletter. If you wish to support my work (which I do here for free) then you can do so by buying me a coffee↗ or two, I'll be thankful.

Disclosure: Some link might be affiliate link but those don't make the post biased.

Showcase Of Privacy Friendly Analytics

Ankit — Mon, 27 Jul 2020 06:46:37 +0000

In this article we are going to compare 3 privacy friendly analytics, namely Simple Analytics, Fathom and Plausible, so let's begin the journey.

In recent years we have seen a drastic rise in awareness for user privacy. Also the new law like GDPR↗ have forced businesses across the globe to take privacy in a serious way. It was something we all needed; don't you hate seeing a repetitive ad about the product you searched for?

There were (and still) are some excessive tracking and privacy violation on the web. Companies like G##gle and Faceb##k had created their whole business model over selling and mishandling of user data. Analytics played a key role there. Most part of user tracking and tracing were done by analytics tools owned by large giants like them. With the increase in awareness there came demand of privacy first products. One such domain was privacy friendly web analytics. Privacy has become one key decision making point in choosing analytics for a website.

Another great reason to use them is that you get free performance boost. GA makes your site lag with tons of JavaScript, choosing one of them ensures that your analytics doesn't make your site slow.

Here’s the brief overview of script sizes:

Simple Analytics- 5.4 kB
Fathom Analytics- 4.8 kB
Plausible Analytics- 1.3 kB

Want to know where Google Analytics stand?

45.7 kB, about 10x the average size. It includes the size of actual Google Analytics and Google Tag Manager.

In past few years we have seen how the demand made multiple players enter the ground to compete. As of now there are 3 well known "Cookie-Free & Privacy Friendly" web analytics service, namely Simple Analytics, Fathom and Plausible. All three are made by owned and well managed by a small team of Indie Hackers who are aggressively bootstrapping their business. Also, a very important point is that by using any of these service you get the option to skip the cookie pop-up and it does makes the UI cleaner. Let's take a quick dive and see what are they offering and how different they are from each other.

Note: All three come with basic features like tracking no. of visits and visitors, they all also provide geographical data which is mostly accurate (not 100% though). Along with this they also give you a brief of top referrers and top pages. These three also give you an easy way to share your dashboard to the public for visibility to all (only if you wish). As these are common among three so I won't be mentioning these, among others.

Simple Analytics

Now this is the product that I have known since the days it was just a beta (as the product was built in open) product and a one-person lead company. They started in the year 2018 (I guess so) and since then they have been pushing improvements regularly. As the name suggests their service is based upon simplicity, if you will look at their dashboard then you will be quickly able to understand this. Though it doesn't look the most intuitive among the others but they really have some great stuff under their belt.

One their unique feature which I love the most is that you can track all the tweets on Twitter linking back to your webpage's, that means no more seeing confusing links from t.co, this alone cloud be a separate offering but it's good to have. Simple Analytics↗ also lets you have custom domain/sub-domain for you tracking script. It's very useful, trust me when I say that. Using this simple method, you will be able to bypass most of the blockers around the web. Though you will find this same feature in others too, but they were the first one to implement this (Ahem! Ahem!).

Simple Analytics also supports event tracking like Google Analytics but in a cookie less way, though it's still in beta as of now but you can still try it. I also want to disclose that I have been using their service personally and I do plan to continue along with them in the future too. Another benefit you will find that reaching the team is extremely easy (benefits of working with startups), once I had an issue in tracking in my region and I mailed them, Adriaan↗ (Maker of Simply Analytics) quickly got in touch with me and helped me solve it. Though I couldn't find any cons but I did had some feature requests (Feature such as Time On Page is in progress and Bounce Rate is planned). Really wish that these two get implemented soon, if you are a Simple Analytics customer then please go and give a like to the issue on GitHub to increase priority.

Price of Simple Analytics start from 19$ per month or 108$ per year for 100k pageviews and unlimited sites. Though the monthly price is bit high, but the yearly plan is very well priced. For just over a 100 bucks you will be contributing to make the web privacy friendly and also will be able to own the data. If you wish to try their product first then you can opt for a free trial↗ too.

Fathom Analytics

Correct me if I'm wrong but Fathom Analytics is the oldest among the three. Fathom Analytics↗ was started Jack & Paul in 2018 and since then they have been bootstrapping. One of the non-functional thing that I love about them is their color palette which looks so tempting to your eyes. Now let's back to their core offerings. As much as I experienced it looks like a much closer privacy friendly competitor of Google Analytics. Apart from just telling you about number of visits and visitors they also tell you the average time on page (dwell time) and they even calculate bounce rate for you. These two features alone are enough to help marketers help optimize content on page and improve low performing pages.

Fathom Analytics have some other cool and unique features too like they offer free uptime monitoring. This makes their offering super tempting as you will be able to save few bucks which were supposed to be spent on a uptime monitoring tool. They use PingPing to monitor and notify you about any downtime, you can choose to get notified with a wide array of method including mail, slack, text-message, and telegram. They also support unlimited email reports to unlimited people, this comes really handy when your business has multiple people operating it. I really wished Simple Analytics had this option, the only way around is to take the higher plan but that still has a different way implementation most of you won't want.

Just like Simple Analytics, Fathom↗ also supports event tracking in form of goals (it's named goals actually). Using this you can easily track actions like number of clicks on a particular link or number of signups. It's pretty cool and handy. Recently they have also implemented support for custom domains so that you can bypass ad-blockers and you are using a privacy friendly tool and don't deserve such harsh blockade. Apart from all these, they also let you automatically mail stats of a particular website in your account to multiple mail addresses. Super useful for agencies.

Fathom Analytics is priced at 14$ per month and 140$ per year for 100k pageviews and unlimited sites. They are among the most expensive one but it ok by European and US standards (I'm from India where the value of dollars is a bit high). For 140$ a year you get a privacy friendly analytics tool, an uptime monitor and ownership of you data. They too have a trial if you wish to have it.

Plausible

Plausible is the youngest among the three. Uku Täht↗ first started it and then Marko Saric↗ joined him soon. It was launched in 2019 by Uku as a budget friendly and privacy focused & cookie free analytical tool. (BTW, I love how their dashboard looks. Your views might defer.)

Plausible is a fairly new to the market so I can't expect much of unique and advanced features but there are still some worthy of mention. One of them is that you can connect Plausible↗ to your Google Search Console and pull some of the data from there, by doing this you can easily check your top pages and traffics by Google search. Though you can easily see the same data on Google Search Console dashboard by having all at one place does makes it handy. Also, they have recently added support for time on page too. Just like the other two, Plausible too has support for goals & conversions tracking. The trigger can be either a pageviews in a certain page or a custom event. Also just like Simple Analytics it also shows all the tweets mentioning your website in them, it's good to have it but I sincerely think that there is a scope of improvement in the UI (Would be great if the team works on it after reading this).

Though Plausible is not the tool with the most number of features but it does have one major benefit over others, that's pricing. It's the cheapest among its competitors, for reference it would cost you 12$per month or 96$ annually for 100k pageviews and unlimited sites. The magical part is that, they have a smaller plan too. So if you have a personal blog or portfolio with few thousand views then you need not spend 100 dollars on analytics. Their smallest plan with 10k pageviews cost only 6$ per month or 48$ annually and that's what help them reach a larger number of small sites. It's always good to have players like these as not all site owners are able to pay larger sum of amount. I do think that others must also come up with smaller plans.

Which One Is For You?

Now this is the question most of you might have. I know and understand this, and I think that I can help you choose one based upon your use case and other factors. Check the below list for all conditions and find your perfect partner.

Does your budget allows you to go as high as triple digit dollar figures? If yes then you can Fathom (Great UI, uptime monitoring plus few extra stuff). If no then blindly go with Simple Analytics or Plausible (Simple Analytics monthly plan is priced a bit high, prefer the yearly plan. Plausible is the cheapest one though).
Do you wish to track tweets in a proper way? If yes then Simple Analytics (implementation is just perfect) is the one to go. You can also track tweets with Plausible too.
Do you have an agency and wish to automatically share logs/reports with you clients? If yes then Fathom is the only one supporting it as of now.
Do you wish to have a nice support team? If yes, then the answer would be all three of them. Most bootstrapped business care their customers in a proper way.
Need to monitor uptime too along with analytics? If yes, then the only one is Fathom.
Last but not the least, do you love privacy? If yes, then go with any of the three mentioned above (Simple Analytics, Fathom & Plausible). If no, then go with the one whose name is forbidden in my books.

Now that you have a good idea of all the three, which one are you going with? Also if you still have doubts the the comment section is open for you and I'm pretty active there. Another note worthy thing to mention is that Simple Analytics let's me gift you a free month of their service and I'm an existing user, simply click on this link↗. If the founders of Fathom and Plausible wish to distribute a coupon or extended trial, then do drop a text and I'll add it here.

Note: I didn't talked about server side analytics because they limit users to a particular infrastructure, I believe you should be free to use whatever you want and not what the provider wants.

Do visit Devxify for more such awesome content.

Disclosure: Some link might be affiliate link but those don't make the post biased.

How To Add Comments On Static Site

Ankit — Thu, 23 Jul 2020 23:46:37 +0000

Are you travelling in the new bandwagon of static JAMstack website? If yes the you must be missing some of the ways to add the lost dynamic features like blog comments. Some of you might have even thought of completely removing it but let me ask you a question first, is a blog worth it if readers can’t share their feelings? I’ll share an example, few days back I wrote an article on Dev.to↗ about web accessibility. It looked great to be but later I got to know I messed up with Markdown and some words were just completely omitted in during HTML generation, thanks to the readers and the comment section that I got to know about that very soon. Now ask yourself, does your blog needs a comment system?

Benefits Of Comments

Better Interaction
Easy Feedback Collection
Increased Time On-Page
Increased Trust

So after all these I too was looking for a comment system for my site, earlier I did had comments on my website provided by Just-Comments but they planned to shut down their service due to low revenue & traction and I was now left with no comment system. Also I didn’t want to miss the awesome but occasional constructive feedback some of you guys leave in the comment section.

Now I had a tough decision to choose a comment system among different offering in the market, to do this I made a list of all viable and well known provider. My list compromised of :

Disqus
Hyvor Talk
Commento
Utteranc.es

Now even though I had created a small list but I still had few requirements in back of my mind. The first and foremost was that the UI shouldn’t suck and I do believe ads make the UI suck unless implemented in an extremely user friendly way. My second requirement was that the comment system must be light-weight and should load in a breeze (I’m a lover of webperf). The third and the last one was to be privacy friendly, if you guys have followed me then you much know how much value I give to user privacy accessibility.

( P.S. Spoiler Alert, I went with Utterances)

Why I Didn’t Choose Disqus

As much as I know, Disqus↗ is the largest by all terms among this list. They are a pretty matured business and as a comment system they have everything you wish but they also have somethings you don’t wish for. First and foremost is that they come with ads in their free plan also apart from ads they also collect user data which means its very unfriendly to your privacy. Apart from privacy issue, they have performance issue too. If you implement their widget then that makes your webpage load slower than usual.

Though comments are important to me but I won’t have them at the price of user privacy and web performance. So this was the reason to keep myself away from Disqus.

Why I Didn’t Choose Hyvor Talk

Hyvor Talks↗ looks great works great. It’s just like a Disqus but with better privacy and faster load time. Hyvor Talk even has a generous free plan for upto 40,000 pageviews, when I had a look, it did felt awesome.

Though I didn’t have any issues regarding privacy, UI or performance but had some different kind of issue. The first issue I faced is in the way they charge users. The thing I found that though they based in Sri Lanka but still collect nation specific taxes like GST & VAT. I even had a chat with its maker and after few mails he told me that he would be getting back to me soon after discussing with their payment provider (It’s Paddle Payment Gateway if you wish to know). I later got a response and after all that I believe that their whole tax thing is managed by Paddle and I personally am a very big fan of their service.

Apart from this the another issue was my past experience with Just-Comments, though I wish Hyvor Talk a great success but still startups do work on the swords edge and didn’t want my comment system provider to vanish soon. Also a lack of annual plan was a bummer for me as annual plan generally have a discounted price compared to monthly. Though it’s completely my feeling, you are free to take a trial and share your experience in the comment system, I have seen some people who are pretty happy and satisfied with Hyvor Talk.

Why I Didn’t Choose Commento

Commento is a privacy focused commenting tool. They too have most of the features you wish from a comment system but they require a minimum payment of 5$ per month which is on a higher side for small blogs and portfolio sites. Apart from this they have everything you wish for.

If your wallet allows then you will have access to automatic moderation tool, API access, shadow banning, single sign-on, sticky comments and much more. Even though I didn’t went with them but they are indeed worth a try. Also Commento has a self-host version too where you can skip paying them and directly host them, I didn’t self-host it because I believe in static and JAMstack↗ sites and avoid managing servers.

Why I Chose Utterances

If you visit my site you will see that I have already implemented Utterances↗ there to manage comments. Also among all others Utterances is the most unique one in terms of managing comments. They use GitHub issues to store and display comments on to your webpage and each webpage is identified as a different issues.

I went with Utterances because it free to use as long as you stay under the limits of GitHub issues API. Also as my site is more focused to developers so everyone generally has a GitHub account and it makes the sign-in process ease. I believe that Utterances is the most basic offering here but sometimes basic is what you.

Though I have been using them for a while but they still have some cons, the biggest is lack of moderation of comments. It’s practically impossible to moderate comments and GitHub doesn’t has such feature as of now, the only way around is to personally block/delete comments which you find useless or spam. Also as it uses GitHub issues API so you also get to use reactions on others comments. If you are like me who gets few comments on your webpage then this not an issue. Last but not the least, Utterances implements comments on your webpage within a rendered <iframe> which mean that Utterances has no SEO benefit, on the brighter site the spam (if any) won’t affect your SEO in a negative way too.

Utterances Implementation

Create a GitHub repo to store your comments.
Install Utterances Bot to the repo.
Go to Utterances site and generate script based on repo name and style.
Simple paste the script after the end of the content.

<!--Here's the sample code for Utteranc.es-->
<script src="https://utteranc.es/client.js"
        data-repo="owner/repo-name"
        data-issue-term="pathname"
        data-theme="github-light"
        crossorigin="anonymous"
        async>
</script>

Phew! It’s done go and write your first comment. Also just to let you know that as Utterances is based upon GitHub issues so it does support markdown natively which is a great plus if your audience is mostly web developers. Now that it’s done you can play with it or me and the Utterances community to make it better. Currently I am working on a way to cache GitHub API calls on client side so that I can reduce number of API lookups in case of multiple refreshes (If you refresh multiple time GitHub blocks API request for few minutes), I am trying to use service workers to solve this and if I am able to do so then I’ll surely update this article (In-case you feel you can help me the do let me know in the comment section or mail me).

Conclusion

Utterances is a great option for anyone whose audience comprises of mostly developers/coders. Using GitHub login makes it easier for all developers to comment and interact. Other features like reaction and markdown support comes handy too and make the system efficient.

Please don’t test the comment system here, visit utteranc.es↗ to test.

Proven Ways To Optimize Your Design For Better Conversion

Ankit — Mon, 20 Jul 2020 23:46:37 +0000

The web has evolved so is the competition. In present days you have few seconds to engage you visitor otherwise it’s a lost business. Though people says look doesn’t matter, but it does in the digital space. The experience your website or app provides the plays a key role in conversion. A website with an average product but great design/experience can see higher conversion compared to website with great product with a average design/experience. Whether or not a visitor converts into a customer completely depends upon the type of experience you provide.

If you are a marketing guy and reading then make sure your business has a great website as that will work 7 days a week and 365 days a year for you and won’t even take salary for that. Rather than hiring multiple sales executive, it’s better to invest on a great web experience↗ first. Make sure you correctly identify your target audience and design accordingly, for example don’t create a webpage with super small font size if your target audience are senior citizen. Small font size might look great to teenager and young adults but it’s a pain for the elders. These small things will go a long way in building an subconscious relation between your brand and customers. Now that you know all these, let’s see some great ways to optimize your site for user satisfaction.

Clutter Free UI

No one likes a mess, be it physical or digital. It’s always better and safe to keep your design and user interface as simple as possible unless are a design guru. Most people compare simple to boring white and black webpages but that’s not the case. Look at Google’s homepage↗ elegant, simple and get’s the job done. I believe the minimalistic approach is the best. Try to provide some free space and play with colors. This white space is also known as negative space.

Another thing to note, if you are animating vectors or images on your webpage then you better do that is a right way. Keep in mind that not all of your visitors will have a great device, some would be on low-end devices and I’m pretty sure you don’t want to mess with that. Always test your user interface on the campiest device you could found. When I design something then I ensure to check it once on Internet Explorer and once on a cheap Android device. If your site works well on low-end devices then it would work great in general mid level devices.

Clear & Focused CTA

Call to Action↗ or better known as CTA is the key link to conversion and it’s your job to ensure it’s visibility. Always ensure that you CTA is of proper size and appealing color which compliments the aesthetic of the webpage. Also as I mentioned above minimalism is the key and most of the times rest is more. Refrain from using long phrase on you CTA buttons like “proceed to checkout page” or “sign up for free trial” instead use phrases like “checkout” and “get started”. If you still need to share something use <small> tag with very small font and place it below your CTA. This will give you a much cleaner look.

The placement and color also plays an important role in how effective of ineffective you CTA is, always ensure that the CTA compliments the background and attracts user’s focus towards it. Also if possible place them on different location on your webpage in an (un)obstructive manner.

Faster Speed, Better Conversion

If you have followed me over past years then you would surely know I’m a sucker of web performance and I believe you don’t want to frustrate your visitor by taking 10-12sec to load your page. Website’s that load faster have proven to see better conversion↗. If you are able to make your webpage load under 3sec then kudos, you rocked it.

Though I have seen lots of websites suck at it but you shouldn’t. If you wish to know in-depth ways to optimize your webpage then we have already wrote about it. One of the most easiest ways to make your webpage load faster is by optimizing images on your website and switching to a hosting provider with better infrastructure.

Provide Point Of Interaction

Just imagine you are at a product page and you have just a small but critical query about it. You try hard to find a way to get in touch but you couldn’t, what will you do? Most of us will look for a different place to buy it and enquire. This the reason why you need to have a point of interaction between your support team and user.

Point of interaction can be in form of chat box (stay away from chat bots, please), mailto and tel links. Adding any of them would ensure you are able to get in touch with a confused user and convert better.

Efficient Copywriting

A website without a appealing text is like a pizza with no cheese. Boring and undesirable. Having efficient copy ensures that user’s understands what message you want to convey. Copywriting converts your boring website into a conversion machine by using words that hits the bullseye of user attraction. Learn more about copywriting at Kopywriting↗.

As far as I have seen, this is the most neglected part in most of the digital business. Most of the people don’t even know the meaning of it. Don’t be that guy please. Copywriting is the best way to convey the message your product/service is trying to pass. This will affect your conversion rate significantly. If you wish to have a helping hand then we are just a mail↗ away.

Wise Use Of Colors

Colors create the first impression in your users mind regarding your brand. Having a color which suites your brand niche is very important for branding as well as marketing. It’s a very powerful tool and using it wisely is a skill. Did you know the color you choose affects the behavior of you user on the webpage? Colors give you the power to tap into the mindset of the user without letting them know about it.

Illustration by Cindy Chung, Verywell(Original Owner)

Let’s understand this with few examples. Have you seen the RedBull logo? The most prominent color there is red↗. It signifies the aggressiveness and energetic nature of the brand. Another great example would be Apple’s website. Black is the predominant color with pinch of complimenting white. The black of their website signifies the sophistication and exclusivity in their product which is very important for a brand like Apple which is sought of a premium brand.

Conclusion

Even though these might look a lot to implement but it’s just the tip of the iceberg. Consider them to be just the basics of UX modification for better conversion. There is still a whole ocean to cover like use of whitespace (aka negative space), color composition, behavior analytics and much more. If you are a very interested into it then there are lot’s of such guide available on the web.

JAMstack- The New Web Stack

Ankit — Sat, 18 Jul 2020 23:46:37 +0000

The world of technology is changing faster than one could ever imagine. In fact, the past is repeating itself. The revival of static sites is here but they have evolved with lots of superpowers. The full form of JAMstack is JavaScript, API, Markup stack. Just like MEAN stack↗, MERN stack it is also a stack. Also, the whole site code lives on CDN so cheaper and faster hosting.

JAMstack: Modern web development architecture based on client-side JavaScript, reusable APIs, and prebuilt Markup. - Mathias Biilmann, Netlify co-founder.

It is a new way of developing and serving web application with better performance, security, and scalability. JAMstack is not a tool, it is a composition of JavaScript, Markdown and API.

JavaScript is used to build the whole site and manage and respond to requests.

API is used to do multiple tasks which makes them equal to full-fledged dynamic sites. These API can be used to perform dynamic tasks like search, form-handling, and others similar tasks.

Markdown↗ is an upgraded Markup language just like HTML. This is widely used by static site generators and headless CMS for content on site.

Just like maple syrup goes complimentary with pancakes, JAMstack also has some technologies which compliments its existence.

SSG (bridge between hard coded html and CMS)
PWA (client-side caching, offline capability & installable)
Serverless (easy backend with use-as required model)

Though they got developed individually but these are got combined together upon maturity and development. All these together contributed to similar vison of faster browsing, easy development control and reduced vulnerability.

Why JAMstack Came Into Existence?

Before JAMstack the web was pretty much dominant by the LAMP and MEAN stack. As the usage of mobile devices increase so did the demand for light weight web technologies. The people surfing the web wanted things to load in a breeze. Big brands like Google and Facebook heard it and started to develop something or the other.

In 2016, Google started testing its AMP project rigorously. AMP project↗ was meant to create AMP pages instead of normal web pages, its major components were AMP-HTML, AMP-Cache and AMP-JS. The key thought process behind this was to create a static version of a page and then serve it rapidly using Google’s globally distributed AMP CDN.

Facebook even started testing a same thing is 2015 known as Instant Articles↗, it too came with the same goal of making web pages load faster on a every device irrespective of network or computing limits.

The only answer to these needs were to build a completely new stack which required little to no computing. That is when static became the new need of market. With all the progressive enhancements we got the stack which we now call JAMstack↗.

Advantages of JAMstack

Better Performance - As the whole site lives on global CDN network hence the content is delivered at a faster pace.

Secure - As JAMstack sites are more of a static site, which means they lack databases. This makes them very less vulnerable to cyber-attacks.

Cheap or Free Hosting - JAMstack site require no computing and the only resources they consume are bandwidth and storage. You can easily get free hosting for your JAMstack site from Vercel and Render.

Easy Version Control - Developers tend to often break something or other while pushing new features or upgrades. The beauty of JAMstack is that it is based-on Git and every change can be reversed with click of a button.

Thin Border Between Frontend & Backend

As Christian Nwamba↗ once said that the line between frontend and backend is shrinking is due to the continuous progressive development in JAMstack. Developers need not manage the backend and frontend separately. JavaScript is the only programming language they need to manage bits of their application. Most of the heavy lifting and dynamic features are manged by wide number of APIs and SaaS providers.

Here is a shot list of things that can be easily offloaded:

Form Handling
Full Site Search
Image Delivery
Comment System
Custom Functions
User Authentication
Backend Functionality

These are just a few, there are plenty more. You can easily Google them as find ones that suits your need the best.

JAMstack Workflow

The whole concept of JMAstack is to serve static webpages. For the same reason JAMStack has a pretty easy workflow to understand, we tried to illustrate it using the graphic below. Do have a look on it.

JAMstack Edge’s Over Traditional Stack

JAMstack is a way different than traditional stack. JAMstack’s build and hosting are two different processes and has different architecture. While the build process is done via standard build engine while hosting is managed via a globally distributed CDN nodes. While in a traditional stack the build and hosting are coupled into one backend server.

JAMstack	MERN/MEAN stack
Build & Hosting decoupled	Build & Hosting Coupled
Whole application served via CDN	Only static assets served via CDN
Content managed by GIT or Headless CMS	Content Managed by traditional CMS

Benefit Of Headless CMS Over Traditional CMS

Since existence JAMstack site have always been running parallel to headless CMS. Unlike traditional CMS like WordPress where backend and frontend are tied into one single unit, in headless CMS the frontend and backend are completely different units. Headless CMS↗ only builds the page when changes are pushed and same is served until new changes are received whereas traditional CMS builds page on every request. This gives JAMstack’s headless CMS and performance edge over traditional CMS.

Why JAMstack Could Be The Next Big Thing

Well I say so because of the great hidden potential I see in it. JAMstack has revolutionised they way we use to develop sites, from managing servers to pushing changes on git and from handling security issues regularly to near to nil security issues.

JAMstack has proved its effectiveness to developers and big brands by providing better performance, higher security, and low operational cost. As we all know that performance is the key conversion metric↗, so this technology is leveraged to get the maximum out of it. JAMstack has made managing and collaborating to any project way more easier using Git.

Conclusion

JAMstack is still a new kid in the block. You can call it a work in progress thing too. Though its still not able to completely replace every other web development technology but we see a great future ahead. Make sure to keep your eyes on this and use wherever possible to develop performance-oriented web application.

Proper Use Of HTML For SEO

Ankit — Fri, 17 Jul 2020 23:46:37 +0000

Now SEO is very important for website owners like us, we do a lot of hard work to create content and we do desire to have a good reachability. Over years Google has become the largest search engine and it contributes to large number of traffic to every site. SEO optimization is very important if we wish to rank well on searched terms on Google.

Personally, I do not like inorganic ways like link building to improve my SEO score, but I do all I can in an organic way. Well that includes writing your HTML is best possible way. Always remember, this is secondary, writing high quality content is primary.

Benefits:

Better Visibility
Improved Traffic
Increase in Revenue
Higher Conversion
Google Loves You

Now let us start with the steps with write the best SEO friendly HTML.

Title Tag

What’s a man without a name and what’s a webpage without a title? Title tag is very important for a webpage, it is the tag which gives brief about the page content. One must always add title properly and refrain from using terms like homepage, blog, and others. Try to be descriptive using minimal words.

<!-- ❌ Poor description using title -->
<title>Homepage</title>
<title>Blog</title>

<!-- ✅ Proper description using title -->
<title>Devxify - Level Up Your Web Skills</title>
<title>Web Development Guides and Articles by Devxify</title>

Use Of Rel Canonical & Icon

These two might sound like small bits but they are very important. The rel canonical states the original link of the webpage. Here is an example, for example you webpage is accessible by multiple URLs like:

But we only want the first to be indexed on Google, this is where we use rel=‘canonical’, it also helps us with reducing the chances of internal content duplicity.

<link rel="canonical" href="https://www.devxify.com">

Similarly, rel=‘icon’ is also very important, it hold the destination of your favicon which is nothing but a small brand icon which in show in browser window. This help users remember your site even by the icon. Who does not want to build a brand after all?

<link rel="icon" type="image/x-icon" href="favicon.ico">

Proper Use Of Meta Tags

I believe that meta tags are the most important tags when giving basic description of your site to any search engine. Meta tags contain wide array of data like site title, description, social image, social title, and social description.

Meta tags even make your site look the way you wish on web results and social media sites. Below are few essential meta tags one must have, if you are a bit lazy then you use any generator like metatags.io↗ and your job will be done.

<!-- Basic Meta Tags -->
<meta name="title" content="Awesome Title Here">
<meta name="description" content="Awesome Description Here">
<!-- Facebook Meta Tags -->
<meta property="og:url" content="https://www.devxify.com">
<meta property="og:logo" content="images/brand-logo.png">
<meta property="og:type" content="website">
<meta property="og:title" content="Awesome Title Here">
<meta property="og:description" content="Awesome Description Here">
<meta property="og:image" content="images/brand-social-image.png">
<!-- Twitter Meta Tags -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Awesome Title Here">
<meta name="twitter:description" content="Awesome Description Here">
<meta name="twitter:image" content="images/brand-social-image.png">
<!-- Chrome Theme (URL Bar Color) -->
<meta name="theme-color" content="#1a62f2" />

Use Of Schema Markup

Schema Markup↗ has a similar job compared to meta tags but it is in much descriptive way. You can go as deep as you wish like sharing details about product, pricing and much more. I will share a very basic example, but you are free to visit the official Schema documentation for in-depth study and implementation. Below is an example of schema of our homepage.

<script type='application/ld+json'>
    {
            "@context": "http://www.schema.org",
            "@type": "WebSite",
            "name": "Devxify",
            "alternateName": "Devxify.com",
            "description": "Helping you be a pro in web development, want to?",
            "image": "http://www.devxify.com/images/logo.jpg",
            "url": "https://www.devxify.com",
            "creator": {
                "@type": "Person",
                "name": "Ankit Ghosh",
                "email": "hi@devxify.com"
            }
    }
</script>

Semantic Use Of Heading Tags

I have seen plenty of website owners mess up here. Most of the time search engine bots interpret even non-semantic HTML but you do not need to pay extra tax to write proper HTML? So why not do it in the correct way? Here is an example of wrong and correct uses of heading tags.

<!-- ❌ Page should have single H1 tag -->
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h2>Heading 2</h2>
<h1>Heading 1</h1>

<!-- ❌ Heading should be structured -->
<!-- Like H3 cannot be placed under H2 -->
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h2>Heading 2</h2>

<!-- ✅ Structured heading tags with hierarchy hy -->            
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<section>
 <h3>Heading 3</h3>
</section>
<h2>Heading 2</h2>

Use of Alt Attribute in Images

Not all people are physically privileged like us, some people use screen reader and won’t be able to see the images you add so to tell them about the image we need to add a small text to describe the image.

<!-- ❌ Alt attribute not used -->
<img src="/funny-cat.png">

<!-- ✅ Alt attribute used -->
<img src="/funny-cat.png" alt="funny cat">

Friendly URLs

So, whenever you write and are about to publish it, ensure that you write well formatted URL. I share the correct and incorrect example below, have a look.

<!-- ❌ Poor sub-directory naming -->
https://example.com/29-07-2020/abc-book-review.html
<!-- ✅ Proper sub directory naming -->
https://example.com/book-review/abc.html

<!-- ❌ Poor naming &lack of desc -->
https://example.com/holiday.html                                   
<!-- ✅ Proper naming with desc -->       
https://example.com/how-i-spent-my-holiday.html

Valid Robots.txt File

Robots.txt is essential file which is used be bots to see what all pages are allowed by them to crawl and index. There are small chances that you might mess up and block them from crawling and indexing of your pages. Here is a sample of a valid robots.txt, you can simply copy this and add for your use

<!-- ❌ Blocks Every Path (This is a comment & not part of Robots.txt) -->              
User-Agent: *
Disallow: /
Allow: /index.html
Sitemap: https://example.com/sitemap.xml                

<!-- ✅ Allows Every Path Except Admin & Dashboard (This is a comment & not part of Robots.txt) --> 
User-Agent: *
Disallow: /admin.html
Disallow: /dashboard.html
Allow: /
Sitemap: https://example.com/sitemap.xml

For better understanding check the code below which has been written with proper comments. Also when copying from below remember to remove comments from your robots.txt as it does not support comments, I added to make you understand in a easy way.

<!-- Allow full access -->
User-agent: *
Disallow:

<!-- Block all access -->
User-agent: *
Disallow: /

<!-- Blocks a folder -->             
User-agent: *
Disallow: /folder/

<!-- Block a file -->       
User-agent: *
Disallow: /demo.html

Descriptive Link Tags

This is a very common issue I found among bloggers, I found that they tend to use terms like here, go, buy, and add links to them. The problem is they are meaningless. Always add links to text which have a meaning. See below to understand more.

<!-- ❌ Link with non descriptive text -->
<a href="/funny-cat.png">more</a>

<!-- ✅ Link with descriptive text -->
<a href="/funny-cat.png">more funny cat pic</a>

Conclusion

These were some extremely basic guidelines one must follow for better HTML and SEO, though their are much more but these basics are important too. If you are already following these then kudos to you.

I am planning to move my blog to Dev.to

Ankit — Sun, 05 Jul 2020 04:09:57 +0000

Hi Mates,

I am planning to move blog to Dev.to platform and solely write here as I plan to work on my newsletter and Dev.to is less hassle even for a non-techie.

Though I write mostly tech content but I sometimes plan to write about off topics like analyzing user feedback to create better products (focused on solo developers and product owners who do are on Dev.to) also sometimes I might write review products/service I use like email marketing tool or services for developers to monetize their content like BuyMeACoffee. Sometimes there might be one or two affiliate like which I will give brief disclosure of, are these allowed? I want to know thins be I don't want unintentionally abuse this platform.

If you all could acknowledge me then it would be very greatful.

Wrote A JS Script To Validate Email

Ankit — Fri, 05 Jun 2020 05:21:20 +0000

Hie mates, I am Ankit from Devxify. Few days back I was try to build a custom signup form where the user could enter the email and I could validate and tell him about the action(output) on the same page itself in a non-obstructive way.

It had 3 different messages:

Enter your email (Default Message)
Kindly check your email format (Error Message)
Done! Please check your email to confirm (Success Message)

Also, need a small suggestion. Do you think I should build a separate page (on Github or Devxify) for this script for others with very elaborate documentation. It would be free though. Do have a look and let me know.

Now let's start from seeing the output first. In the below live sample try to with try to enter correct mail and incorrect mail format.

Note: This does not collect any email so you will not be receiving any confirmation email to check. Also we ❤ privacy.

Now that we have seen the demo, let's start with the code itself. Also in this example we would be using Bulma CSS framework for the styling purpose.

Step 1: Creating HTML Skeleton

In the HTML skeleton we are going to define the structure of our subscription form. Also we would be adding the messages (in sleek format). Some of them will be hidden by using inline CSS.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.8.2/css/bulma.min.css">
<!--Subscription Form Begins-->
<br>
<p class="has-text-centered">
  On-page email validation by <a target="_blank" href="https://www.devxify.com"><b>Devxify</b></a>.
</p>
<br>
<!-- Iframe used to ensure page doesn't gets redirected on submission -->
<iframe name="hidden_iframe" id="hidden_iframe" style="display:none;"></iframe>
<div id="subscribe" style="display: block" class="has-text-centered">
  <p class="menu-label">Can I please help you too stay updated with latest posts?</p>
  <form name="sform" method="POST" id="zcampaignOptinForm" action="" target="hidden_iframe">
    <div class="field has-addons has-addons-centered">
      <p class="control">
        <input class="input" type="email" placeholder="awesome@email.com" name="CONTACT_EMAIL" id="EMBED_FORM_EMAIL_LABEL" aria-label="email" required>
      </p>
      <p class="control">
        <button onclick="formHandle(document.sform.CONTACT_EMAIL);" class="button is-link" type="submit" name="SIGNUP_SUBMIT_BUTTON" id="zcWebOptin">
          Subscribe
        </button>
      </p>
    </div>
    <div>
      <!-- User Output Messages Below -->
      <span id="normal" class="tag is-light" style="display: inline-flex">Awesome Content Ahead</span>
      <span id="success" class="tag is-link is-light" style="display: none">Check Confirmation Mail</span>
      <span id="error" class="tag is-danger is-light" style="display: none">Check Your Email Format</span>
    </div>

  </form>
</div>
<!--Subscription Form Ends-->

If you simply paste this code, then you will notice that the form is looking in the exact way of the sample. Do remember that this code is not semantic. The stylesheet should be placed in the head section or at the end of page. Also the form must be inside the body.

Step 2: Use JavaScript To Handle Input

Now this is the main part. Here we would be using to create a syntax of the acceptable email. Also we would be using this script to manipulate the CSS of the elements. Use script tag to add this onto your page.

function formHandle(inputText) {
//The mail format would be accepting extensions to 2-6 units only, you can modify the part {2,6}
  var mailformat = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,6})+$/;
  if (inputText.value.match(mailformat)) {
    document.getElementById("normal").style.display = "none";
    document.getElementById("success").style.display = "inline-flex";
    document.getElementById("error").style.display = "none";
    return true;
  } else {
    document.getElementById("normal").style.display = "none";
    document.getElementById("success").style.display = "none";
    document.getElementById("error").style.display = "inline-flex";
    return false;
  }
}

Done? Bang on. It's done. Now you have created an awesome subscription form for you visitors. Do feel proud and share this article.

Hope you like this article, if you have any other thoughts then feel free to tweet Devxify on twitter. Also, for more freshly brewed content subscribe to our newsletter.

🤓🔥How To Make Websites Accessible To All 💯

Ankit — Thu, 04 Jun 2020 19:00:12 +0000

Hey, I'm Ankit a lover of "Accessible & Fast Web". Have you ever thought that how blessed we are to be normal ?
If not, then you better start.

As a part of the web developer community its our job to ensure that the web is accessible to all. The W3 even has a separate guidelines for web content accessibility . After all the web should be a better place to be even if the world isn't.

Today let's talk about the basics and let's see if I can help you be at-least semi-compliant with WCAG 2.1. In this article I would be guiding you through the steps to make you webpage accessible with devices like screen reader. Let's begin.

Pages Must Have Proper Title

This the most basic tip you will ever read or listen regarding web accessibility. Having a proper title ensure that the specially-abled visitor gets a quick info of what the page is about. I request you to use terms like page 1, blog. It's horrible, instead use phrases like Continuation of Abc article or Dev.to Blog, One stop for all developers.

<!-- ❌ Homepage? Does that even has proper meaning? -->
<title>Homepage</title>

<!-- ✅ Descriptive -->
<title>Devxify - Level Up Your Web Development Skills</tile>

Though its easy to understand but still there are few things to remember when writing a title.

Must be descriptive
Must not be used to fool visitors
Title should be unique from page to page

Proper Labelling of Elements

Not all of your visitors would be reading your text, some might be using tools like screen reader. As a developer you must ensure that all of the required elements are marked properly for screen readers. In an article about HTML form design , I too talked about form labeling. Labeling ensures that your visitor is given information in a way you want. Coming back to topic, labeling and giving role can be easily done using aria-label, aria-labelledby, role and others.

<!-- Example 1: The role tells that it's is a separator for section/page -->
<span class="has-text-centered is-size-4 has-text-grey-light" role="separator">• • •</span>

<!-- Example 2: Aria Label tells page reader about external page -->
<p>Hie I am <a target="_blank" href="https://twitter.com/devxify" aria-label="Devxify Website">Devxify</a>, wbu</p>

<!-- Example 3: Telling Screen Reader About Navigation -->
<nav role="navigation">

</nav>

Links Must Have Descriptive Name

Whenever using an anchor tag to add links to your website, remember that the linked text should give a brief hint of the following linked page. Don’t use texts like more, go, see to link to other pages/articles on or outside your site. It is bad.

<!-- ❌ Link with non descriptive text -->
<a href="/funny-cat.png">more</a>

<!-- ✅ Link with descriptive text -->
<a href="/funny-cat.png">more funny cat pic</a>

Semantic Use of Heading

Headings partly define the structure of the webpage. When you mess up with it then you mess up with your content structure too. Heading tags should always be using according to their hierarchy and a page must contain only a single H1 tag, below is an example of correct and wrong use of heading structure.

<!-- ❌ Page should have single H1 tag -->
<h1>Heading 1</h1>
    <h2>Heading 2</h2>
    <h2>Heading 2</h2>
<h1>Heading 1</h1>

<!-- ❌ Heading should be structured -->
<!-- Like H3 cannot be placed under H2 -->
<h1>Heading 1</h1>
    <h2>Heading 2</h2>
    <h2>Heading 2</h2>
        <h3>Heading 3</h3>
    <h2>Heading 2</h2> 

<!-- ✅ Structured heading tags with hiearchy -->            
<h1>Heading 1</h1>
    <h2>Heading 2</h2>
    <section>
        <h3>Heading 3</h3>
    </section>
    <h2>Heading 2</h2>

Making Font Size Readable

Does your webpage have proper font size? You might have written an awesome blog or guide but is that of any use when people can’t even read that?

There is a suggested size of min 11px for text on page but that might not be the number you should stick too. As a webmaster you should know your audience, are your audience elderly people or people with poor eyesight? If that’s the case, then you better have a higher number than said 11px.

Apart from sticking with px as a unit for your font-size, try dynamic units like rem and em which change font-size according to the viewport.

Elaborating Text In HTML

Sometime use shortforms of text which aren't known by everybody like BBC (British Broadcasting Channel? Confusion). For this we have abbreviation tags at our service.

The <abbr title="British Broadcasting Corporation">BBC</abbr> is a great platform.

Semantic Use Of HTML Tags

HTML has few tags which visually do the same thing but are actually different and very few developers know this.

For example <strong> and <b> tag visually do the same thing which is making text bold. Semantically they are different, <strong> tag is to bold the text and also mark this as important part of the text whereas <b> tag is just a visual element to show text in bold format.

<strong> I am really important</strong>

<b>I am just a bold text</b>

This also means that you need to use the correct tags for the correct purpose. For example buttons must be enclosed between <button> tag and not <a> tag. Similarly on-page functions like onClick JavaScript functions should use <button> and not <a>.

<!-- ✅ Using Button tag for buttons -->
<button>Click Me</button>

<!-- ❌ Using Anchor Tag for buttons is semantically wrong -->
<a>Click Me</a>

<!-- ✅ Using Button tag for JS function -->
<button onClick="demo()">Click Me</button>

<!-- ❌ Using Anchor Tag for for same is wrong -->
<a onClick="demo()">Click Me</a>

Conclusion

Did you like what I wrote? Feel free to share your views in the comment section. Also if you wish to check how much accessible your website is then the best tools would be Google LightHouse and Accessibe's Ace. These tools will provide you with a comprehensive list of tests your webpage passed and one's failed.

Hope you like this article, if you have any other thoughts then feel free to tweet Devxify on twitter. Also, for more freshly brewed content subscribe to our newsletter.

Also feel free to visit Devxify.