Announcing New Open Source Libraries: Cronus and Hermes

cronus-hermes
We are pleased to announce that we have open-sourced two additional AddThis libraries. Cronus is a lightweight cron Java library. Hermes is a programmable page speed measurement tool. The libraries have been released under the Apache License 2.0.

Cronus

Cronus accepts Vixie Cron syntax and schedules actions for execution. The cronus implementation is relatively small at under 5,000 lines of code. Much of its functionality relies on the excellent JSR 310 library in Java 8 to perform date/time calculations.

One feature of Cronus that distinguishes it from other Java scheduling libraries is its ability to compute both the next and previous times for an action. To compute the next or previous time for an action, the date and time are first calculated in a LocalDateTime environment, which is a calendar system that ignores time zones. Then the calculated local date time is translated into ZonedDateTime environment. Vixie Cron semantics are applied for handling daylight savings times in the pre-processing conversion of the input time from a zoned date time to a local date time and the post-processing conversion from a zoned date time to a local date time.
Computing the next time in a local date time environment is relatively straightforward. We begin with a case analysis: either the cron pattern is potentially a match to the current date or it is definitely not a match. If the current date is a potential match then we compute the minutes and hours in O(1) time (see CronPattern#nextSameDay() for details). If either the current date is definitely not a match or if no matching minutes and hours could be found in our first step, then minute and hours are set to their earliest matches values. To compute a matching day, we fall back to iterating through the days. The brute force approach was simpler than devising an algorithm to account for both the [Month, Day of Month] and [Day of Week] constraints and the cost of iterating through days is acceptable. Computing the previous matching time uses the same approach as the next matching time.
Here is a contrived example of using the Cronus library. Uninterruptibles is from the Google Guava library.
public static void main(String[] args) throws Exception {
  CronScheduler scheduler = new CronScheduler.Builder(1).build();
  Future<?> future = scheduler.schedule(CronPattern.build("* * * * *"),
    () -> System.out.println("hello world"), false);
  scheduler.start();
  for(int i = 0; i < 70; i++) {
    Uninterruptibles.sleepUninterruptibly(1, TimeUnit.SECONDS);
    System.out.print(i + " ");
  }
  future.cancel(false);
  for(int i = 0; i < 50; i++) {
    Uninterruptibles.sleepUninterruptibly(1, TimeUnit.SECONDS);
    System.out.print(i + " ");
  }
  System.out.println();
  scheduler.stop();
}

Hermes

Hermes PageSpeed is a library and application for performance measuring of website load time. Its distinguishing features are twofold: it is programmable using the Selenium framework and it conducts repeated experiments to determine statistically significant results.
There are many good performance measurement tools available online. Several popular sites include Google’s PageSpeed Insights, Yahoo’s YSlow, and WebPageTest. Hermes allows you to measure site performance if you need to perform some kind of action in order to get to the page you want to measure, such as providing a username and password. The application performs multiple iterations of the experiment so that summary statistics for each measurement are generated.
Hermes uses the Selenium browser automation framework to allow actions to be scripted prior to recording page loading times. A default class is provided to simply load a webpage if no complex actions are required. Hermes also relies on the Chrome browser Navigation Timing and Resource Timing APIs to record page load statistics. The current Hermes implementation only has support for the Chrome browser and uses the ChromeDriver library to control the browser.
What is generated is a series of observations on page load timings with repeated identical experiments so that the statistical significance of the measurements can be determined. A simple python script has been included in the git repository for converting the json output into a series of graphs. You can either run the main application directly or use the Main class as a starting point for writing your own custom workflow. Here are some sample graphs generated for the Space Jam homepage.
The startTime of page resources.
Start Time
The responseEnd of page resources.
End Time
The elapsed time of resource loads as calculated by (responseEnd – startTime).
Duration
The legend for previous three graphs.
Legend
Measurements from the Navigation Timing API.
Navigation Timing API
Unknown

Posted in

Share the post

Understand your audience

Understand your audience better than they understand themselves. It takes a lot of upfront research, and often means being a member of the very tribe you’re trying to lead – but it pays off.
Brian Clark, founder and CEO, Copyblogger
Understanding your audience better means you’ll have a better idea of what blog content will resonate with them, which is a good start when you get to writing blog posts.
A great technique for doing this is to simply ask your readers first on Twitter, Facebook or LinkedIn with an engaging quote. If people respond well to it, than this is probably a great topic to write about. An example for this comes from Andrew Chen who famously “tests” his blogpost ideas on Twitter first.
And so does Joel here at Buffer. Take this example from a recent Twitter post of his, where he simply tweeted one quote to see how well people liked a topic before he blogged about it:
blogging advice - tweet
Unknown

Posted in

Share the post

Cool CSS3 Social Icons with Font Awesome

Font Awesome Icons Blogger
Heyya Friends ! It has been too long since I have not posted (Due to my exams). So this time I have brought something really cool for all All Blogger Tricks reader. Many of you would know about Font Awesome. It gives you vector icons which can be further edited just like letters using the same CSS.

Here in this widget I have used Font Awesome to create pretty social icons. With integration of font awesome you can add numerous icons as per your convenience.

A live demo of the widget can be seen below.






Once you have seen the demo, to add this widget to your blog follow the steps below.

Adding the Widget


You can add this widget by pasting the below code in the desired location or if you want to show these icons after the post then go to Blog Title → Template → Edit HTML. Press Ctrl + F and search for <data:post.body/> code and paste the below given code just below <data:post.body/>.

NOTE : There maybe more than one <data:post.body/> so make sure that you have selected the right code.

<div class="social social_intro">
<span class="title-ico">
Follow Us On :
</span>
<a href="#"><i class="fa-facebook"></i></a>
<a href="#"><i class="fa-twitter"></i></a>
<a href="#"><i class="fa-rss"></i></a>
<a href="#"><i class="fa-pinterest"></i></a>
<a href="#"><i class="fa-github"></i></a>
<a href="#"><i class="fa-cloud"></i></a>
</div>
<link href="http://theme20.com/demo/valeo/styles/icons.css" rel="stylesheet" type="text/css"></link>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/3.2.1/css/font-awesome.min.css" media="all" rel="stylesheet" type="text/css"></link>
<link href="http://files.allbloggertricks.com/abt-icons.css" media="all" rel="stylesheet" type="text/css"></link>
<style>
.social a {color: #fff !important;}
</style>

After adding the code follow the below given instruction.

How to Customize


First of all you have to replace # with the desired profile link you want to add. Secondly you can add, remove or edit the <a.... </a> as per your wish. To change or add new icon you may add a new <a..</a> or edit the existing one. You just have to remember to change the class name i.e. from fa-cloud to fa-instagram, fa-stackexchange, fa-skype, fa-dribble or anything as per your wish. Most of the major icons have been covered in the above given code. You may also change the color of the icons according to your blog's skin color. To do so scroll to the bottom of the given code and change it as you want. By default it is White

Thats it. Save the template and you are finished. Now you can see awesome icons on your blog and with a greater possibility of editing them as per your need.
Unknown

Posted in

Share the post

Open Sans vs Lato : A head to head Comparison

Open Sans vs Lato
Can't decide what to choose between Open Sans and Lato just like many other designers and developers ? Here is a brief article which would help you to pick up a font for your next web project.
Fonts were and are integral part of a website designs. In today's modern web designing world, there are thousands of font available and two of the most used ones are - Open Sans and Lato. Both these fonts are sans serif typeface and extensively used worldwide. Both of these fonts are free and resemble to each other in a lot of features, which pushes the designer in a state of dilemma. So here is a quick review so sort this problem out.


Direct Comparison


First of all we would see the two fonts together for almost same font weights. The sole purpose of fonts are to make text look good so lets see side by side comparison of these fonts.

Font Weight - 100 Hairline/Thin

Lato - Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Open Sans - Not Available

Font Weight - 300 Light

Lato - Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Open Sans - Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Font Weight - 400 Normal/Regular

Lato - Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Open Sans - Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Font Weight - 600 Semi Bold

Lato - Not Available
Open Sans - Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Font Weight - 700 Bold

Lato - Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Open Sans - Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Font Weight - 800/900  Ultra Bold / Extra Bold

Lato - Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Open Sans - Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Different people have different taste and opinion of one would surely not be what the other thinks. So I would try my best to judge it in an unbiased way. In the above comparison I think that Lato provides a bit more variety in look eliminating the need of other fonts. Moreover it include Hairline font weight which is not commonly found in fonts. No doubt Open Sans looks good but due to the above mentioned advantage. The winner of this stage is Lato.

Speed Optimization


When it comes to font, the second thing we look at is its speed. Today's websites need to be fast loading and one would never want to load tons of fonts for making a site look good. Sacrificing speed for fonts is not always a good idea.
Unknown

Posted in

Share the post

Clean Social Subscribe Widget for Blogger

Hello Readers, I am again back after a long break. This time I present you the extremely elegant social subscribe widget which you can add in the footer of your blogger blog posts. This widget showcased Facebook, Twitter and Feedburner integration.

This widget has been optimized for blogs with smaller width too and looks perfect on all blogs. The widget uses Jquery, CSS and HTML for its working.

You can see the live demo of this widget below itself. Make sure to check the like button if it works and give us some likes for our Facebook Page.





Once you have seen the demo, to add this widget in your blogger blog you need to follow these simple steps -

Adding the code


First and foremost you need to add the code. First go to Blog Title → Template → Edit HTML. Press Ctrl. + F and search for <data:post.body/> code in your template and paste the below given code just below <data:post.body/>.

NOTE : There maybe more than one (usually 2-4) <data:post.body/> so make sure that you have selected the right one. If the widget does not appear try changing the location of code.

<section class="newsletter">
<h2>
Tired of checking for new posts ?
</h2>
<div id="form-newsletter">
<div class="social facebook">
<a href="https://www.facebook.com/AllBloggerTricks" target="_blank">
      <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKu9GLa_AT7k6N4lMqgsHXaMdPGLNw_A57kWqhnDe0epMYLfNPUjwU_nVywDlpfm7xxKjgaw5kyQ6klBjoQiG3TbMjAi8jPE4qwVDCW5-NQSGat7gNpKva4mP4bqidnJldz_BmHBRSQoiX/s1600/nl-facebook@2x.png" />
    </a>
    <iframe allowtransparency="true" class="social-box fb-like" frameborder="0" scrolling="no" src="//www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.facebook.com%2FAllBloggerTricks&amp;width=90&amp;height=21&amp;colorscheme=light&amp;layout=button_count&amp;action=like&amp;show_faces=false&amp;send=false&amp;appId=519648428126767&amp;locale=en_US" style="border: none; height: 21px; overflow: hidden; width: 90px;">
    </iframe>
  </div>
<div class="social twitter">
<a href="https://twitter.com/AllBloggerTrick" target="_blank">
      <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwE5QkFz29oSY-VEbNHMeVFfmeJgJzssarq3q3uDSl4-UdbVG0ak0pDomi3lXXvRBOl2RpKN0kq4HvdJa8jSUPdfy0Lbiu1ZyIPzqvQHV1OleaJeCE-E9hiUdjTmFco85fjXawnERzbaDz/s1600/nl-twitter@2x.png" />
    </a>
    <iframe allowtransparency="true" class="social-box twitter-follow-button twitter-follow-button" data-twttr-rendered="true" frameborder="0" id="twitter-widget-0" scrolling="no" src="http://platform.twitter.com/widgets/follow_button.1399599786.html#_=1399785529920&amp;id=twitter-widget-0&amp;lang=en&amp;screen_name=AllBloggerTrick&amp;show_count=false&amp;show_screen_name=false&amp;size=m" style="height: 20px; width: 60px;" title="Twitter Follow Button">
    </iframe>
    <script>
      !function(d,s,id){
        var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?&#39;http&#39;:&#39;https&#39;;
        if(!d.getElementById(id)){
          js=d.createElement(s);
          js.id=id;
          js.src=p+&#39;://platform.twitter.com/widgets.js&#39;;fjs.parentNode.insertBefore(js,fjs);}}(document, &#39;script&#39;, &#39;twitter-wjs&#39;);
    </script>
  </div>
<div class="newsletter-form">
<fieldset>
<h2>
       Get all posts directly in your mail.
      </h2>
<div class="fields">
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.openundefined'http://feedburner.google.com/fb/a/mailverify?uri=AllBloggerTricks', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow">
<input class="email" id="email" name="email" onblur="ifundefinedthis.value=='')this.value=this.defaultValue;" onfocus="ifundefinedthis.value==this.defaultValue)this.value='';" type="text" value="Enter Your Email here.." />
          <input name="uri" type="hidden" value="AllBloggerTricks" />
          <input name="loc" type="hidden" value="en_US" />
          <input class="subscribe" name="commit" type="submit" value="Subscribe" />
        </form>
</div>
</fieldset>
</div>
</div>
</section>
<style>
.newsletter{text-align:center;margin:20px 0;}
.newsletter .social.facebook{background:none repeat scroll 0 0 #3661A0}
.newsletter .social{padding-top:20%;width:20%;float:left;position:relative}
.newsletter #form-newsletter{display:block;width:90%;max-width:900px;min-width:500px;margin:0 auto}
.newsletter:before,.newsletter:after{content:&quot; &quot;;display:table}
.newsletter:after{clear:both}
.newsletter h2{color:#3B434D;font-family:Open Sans,sans-serif;font-size:1.5em;font-weight:300;width:65%;margin:1em auto}
.newsletter .social.twitter{background:none repeat scroll 0 0 #00ACED}
.newsletter .social a{display:block;left:30%;position:absolute;top:20%;width:40%}
.newsletter .social a img{max-width:100%;width:100%;transition: transform 0.3s ease-out 0s}
.newsletter .social a:hover img{transform:scale(1.1)}
.newsletter .social .social-box{bottom:20px;left:50%;position:absolute}
.newsletter .social .social-box.fb-like{margin-left:-45px}
.newsletter .social .social-box.twitter-follow-button{margin-left:-30px}
.newsletter .newsletter-form{background:none repeat scroll 0 0 #1E293B;float:left;padding-top:20%;position:relative;width:60%}
.newsletter .newsletter-form fieldset{height:38px;left:10%;position:absolute;top:10%;width:80%;border:none}
.newsletter .newsletter-form fieldset h2{color:#FFF;font-family:Open Sans, sans-serif;font-weight:300;width:100%;margin:0 0 1.5625em;font-size:16px;}
.newsletter .newsletter-form fieldset .fields{position:relative}
.fields .email{border-radius:10px 0 0 10px;outline:0 none;width:84%;border:0;left:0;position:absolute;padding:10.5px}
.fields .subscribe{background:none repeat scroll 0 0 #F0553B;border:medium none;border-radius:0 10px 10px 0;color:#FFF;right:0;position:absolute;padding:10px;transition:all ease 0.6s;}
.fields .subscribe:hover {background: none repeat scroll 0 0 #161616;}
</style>
<script type="text/JavaScript">
fontsize = function () {
    var abtSubs = $(".newsletter #form-newsletter").width() * 0.025; // 10% of container width
    $(".newsletter .newsletter-form fieldset h2").css('font-size', abtSubs);
};
$(window).resize(fontsize);
$(document).ready(fontsize);
</script>

Editing the Code


After adding the above given code, you need to make some necessary changes for changing the user IDs. In the above code I have made 6 words in bold and blue, you need to change them as required.
The first two are for Facebook Username, the third and fourth for Twitter handle and the last two are for Feedburner ID. After making these changes you just need to Save your Template.

Thats it, the clean social subscribe widget on your blogger blog is live and ready to attract your users. Cheers!
Unknown

Posted in

Share the post