sounak98's Blog

Embed Google Calendar like a Pro

sounak98
Published: 07/25/2019

Have you ever tried to embed a Google Calendar in your site only to find it's not responsive for mobiles and you need to scroll left and right? Well, I'm gonna share a simple solution which will work.

There's an agenda mode in google calendar which seems to fit properly in a mobile screen, so how about changing it to the agenda mode when the screen size is smaller? Simple HTML and CSS will be enough for this.

<style type="text/css">@media (max-width: 550px) {
     .big-container {
         display: none;
     }
 }
 @media (min-width: 550px) {
     .small-container {
         display: none;
     }
 }
 /* Responsive iFrame */
 .responsive-iframe-container {
     position: relative;
     padding-bottom: 56.25%;
     padding-top: 30px;
     height: 0;
     overflow: hidden;
 }
 .responsive-iframe-container iframe,   
 .vresponsive-iframe-container object,  
 .vresponsive-iframe-container embed {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
 }</style>
<iframe height="600" src="null" style="border-width: 0;" width="800"></iframe>
<iframe height="600" src="null" style="border-width: 0;" width="800"></iframe>

This is be good enough for a responsive calendar. Want another pro tip? How about changing timezones of the calendar according to the client timezone?

Well we will need a bit of js for getting the client's timezone.

var offset = new Date().getTimezoneOffset();

This line of code gets the offset integer in minutes, so -330 for +05:30 timezone and so on. Then we somehow need to convert this to the region name as google calendar link takes an argument named ctz for that. Include the moment.min.js and the moment-timezone-with-data-10-year-range.min.js. These libraries will help us get the region name.

String.prototype.replaceAll = function(search, replacement) {
    var target = this;
    return target.split(search).join(replacement);
};
var timezone = moment.tz.guess(offset).replaceAll('/', '%2F')

Now you just need to add a new argument to the url.

newUrl = `${oldUrl}?ctz=${timezone}`
document.getElementById('calendar').src = newUrl;

That's it guys and you will be good to go.

Reference: https://answers.squarespace.com/questions/54774/how-to-embed-a-google-calendar-in-a-responsive-way.html

View Blog Post

SEO 101: Creating custom sitemap using django

sounak98
Published: 07/25/2019

I must agree I was pretty impatient to use the codesnippet plugin on this editor.

print("tada!")

Well, a couple of days back I was trying to find a way to create sitemaps in django. One way is to use a crawler to crawl all your pages and generate the sitemap. But that's a bad solution as you need to manually update it everytime. We are looking for something more dynamic. Thanks to django, it already has a base class which helps in generation of sitemaps.

Let's start with the urls.py. We add the url for sitemap.xml and add the sitemaps object specifying which sitemap class to use. We can add multiple sitemaps together, and django will render it together for you.

from myblog import sitemaps

urlpatterns = [
    url(r'^sitemap.xml', sitemap, {
      'sitemaps': {
        'blogs': sitemaps.BlogSitemap
      }
    }
]

Then let's go on to sitemaps.py

import urllib.parse

from django.contrib.sitemaps import Sitemap
from django.conf import settings

from aldryn_newsblog.cms_appconfig import NewsBlogConfig
from aldryn_newsblog.models import Article

from cms.models import Page


class BlogSitemap(Sitemap):
    priority = 0.5

    def items(self):
        urls = ['/']
        blogs = NewsBlogConfig.objects.all()
        for blog in blogs:
            p = Page.objects.get(application_namespace=blog.namespace, publisher_is_draft=False)
            urls.append(p.get_absolute_url())
            articles = Article.objects.filter(app_config=blog).all()
            for i in range(len(articles) // 5):
                urls.append(f'{p.get_absolute_url()}?page={i + 2}')
            for article in articles:
                urls.append(f'{p.get_absolute_url()}{article.slug}/')
        return urls

    def location(self, obj):
        return obj

Generally items() should return an iterable of objects which will have a method called get_absolute_url() which will give the url, but django gives you the option to specify their locations too using the loaction(item) method. We are using this cleverly to just return a list of urls in the items method and then returning the item in the location method as the item is nothing but a string which is the url. In this way we can include pages like /blog-name/?page=2 which aren't returned by any object's get_absolute_url() method.

View Blog Post

Weekly Check-In #8

sounak98
Published: 07/25/2019

A lot of fixes and new features came up this week. It was kind of a busy week.

We mostly worked on Search Engine Optimization (yes, SEO). We didn't really change any content but added appropriate meta description tags, created a uniform title format for both python-gsoc.org and blogs.python-gsoc.org. Also, we used services from search engines (yes, Google) to analyze our site for both PC and mobile performance. Some content was weird for mobiles, so we fixed that. We also created proper sitemaps for both the sites.

Except this, we also created a Send Email admin panel to send customized emails. It's like a small email client which can be used to sent emails. This will be used for sending emails to mentors and suborg admins or maybe some students when needed. It also has the feature of sending emails to groups like students, mentors, etc. The blog editor now also has options to upload image and attachments just by dragging and dropping. Yes, pretty useful and a cool feature right? :p

I'm gonna finish the leftover issues as fast as possible and get to testing!

View Blog Post

We are almost there now!

sounak98
Published: 07/25/2019

Yes, we have almost finished implementing all the functionalities! It feels kinda sad that GSoC is going to end in a matter of weeks now. But nevertheless, this experience has been an enriching one for me. I am grateful to my mentor for his wonderful support throughout this. He has guided me through the whole development phase and helped me to be focused on the timeline and to keep a track of the bugs that come up.

What have I learnt from this till now? Well, the fact that software engineering is not an easy job! Especially when a couple of developers build a software it's easy to miss out a lot of cases which will surely come up as bugs. And even this has happened in our case, a new bug comes up while trying to fix an older one. So yeah, we need to keep an eye out for bugs, it's not always possible to build everything perfectly from the beginning.

Also, there has been times when I had a vision of building something (maybe implementing a feature) with utmost perfection and I was not being able to do that. Thanks to my mentor for pointing out that the vision I had was not something feasible and that we need to approach it in a different way. This was an important lesson for me as to what might seem to be perfect might not be perfect at all because it is not feasible.

And also a full testing is coming up now! I have never done this before and thus am looking forward to it very much. It will be a totally new experience and I hope it will be enjoyable. I guess more bugs will come up now :p.

View Blog Post

Weekly Check-In #7

sounak98
Published: 07/25/2019

We have come to almost the end of the second phase. We are now spending time on the last few features that needs to be implemented and also the bugs that have come up in the recent past.

First of all we fixed bugs as usual. One of them was giving permissions to the users for adding notification blocks to their pages. We had implemented before GSoC even started but forgot to give permissions to any new user. Also, we were having issues tracking different types of blogs that the students were supposed to post. The system considered all the blog posts to be of the same type, whereas there are two of them. We implemented this into the system so that the students are notified accordingly.

Our system now automatically archives the Github Pages at the end of every GSoC, yaay for the maintainers! Oh and finally, I added the support for codeblock in the blogs (this was really necessary :p). The suborg forms also have been improved now as some of the fields get disabled conditionally, so overall a better UX for users filling out the form.

Will be doing more stuff like this in the next week too!

View Blog Post