We're growing into something new. Read More
fabricio

Fabricio Zuardi


Discussion

Circular Sector (pizza slices) in SVG

As part of our work for the Node Knockout competition this past weekend, I had to learn a little bit of SVG, and although you have some shortcut elements like rect and circle, there is no easy / intuitive way for creating pizza slices without calculating the arc points and writing the whole path. So I've made this little tool to help me next time I need to build one :) Please let me know of any bugs and what you guys think of my code.

Snaps Grid (Forrst UI remix)

Here is another Forrst UI mod :) This one tweaks the Snaps page to present the snaps on a big grid. Clicking on a snap opens the post info in a lightbox, clicking on the "Next Page" button will load the next page snaps in an ajaxy maner. To try this out, go to this install page, and copy one of the bookmarklet codes to an existing bookmark of your browser. Please leave your comments and suggestions on how to improve the idea or the code. Let me know what you think. Thanks!

javascript:(function() {
  var css_url,js_url,new_link,new_script;
  css_url = "data:text/css,
/* General tweaks */
/* ============== */

/* Send Forrst footer to bottom*/
#footer.sticky{ position:relative; }

/* space between items */
.activity{ margin-bottom:4px; }

/* modify the user avatar to be wider in order to fit the activity type icon */
.activity-user{
  position:absolute;
  margin-top:6px;
  margin-left:6px;
  z-index:1;
  background: url(http://forrst.com/assets/images/home/home-takeapeek-icons.png);
  background-position:80px 50px;
  background-size: auto 60px;
  background-repeat: no-repeat;
  width:88px;
  height:48px;
}

/* different icons use the same sprite but at different positions */
.activity.link .activity-user{background-position:-18px -5px;}
.activity.snap .activity-user{background-position:-97px -5px;}
.activity.code .activity-user{background-position:-174px -5px; }
.activity.question .activity-user{background-position:-255px -5px;}

/* push the avatar and title to the right */
.activity-user a{ margin-left:40px; }
.activity-inner h1.title{ padding-left:87px; }

/* larger items since the avatar is now inside the baloon */
.activity-inner{
  width:635px;
  overflow:hidden;
}


/* Collapsed item */
/* ============== */

/* no line breaks for the snippet or title */
.activity.closed *{
  white-space:nowrap !important;
  text-overflow:ellipsis !important;
  overflow:hidden;
}

/* set the height of a collapsed item */
.activity.closed .activity-inner{ height:30px; }

/* make the title and snippet fill the whole width since the heart button is not visible */
.activity.closed .activity-inner .left{ width:100%; }

/* hide the author and time when item collapsed */
.activity.closed .activity-meta{ display:none; }

/* hide images links and subtitles when collapsed */
.activity.closed .activity-inner .snap,
.activity.closed .activity-inner .code,
.activity.closed .activity-inner img,
.activity.closed .activity-inner h2,
.activity.closed .activity-inner .right{ display:none; }

/* bring the description up to serve as a snippet */
.activity.closed .activity-inner .description,
.activity.closed .activity-inner .question{
  position:absolute;
  top:22px;
  margin-left:90px;
  width:550px;
}

/* remove linebreaks to fit more text and change color */
.activity.closed .activity-inner .post .description p,
.activity.closed .activity-inner .post .question p{
  display:inline;
  font-size:13px;
  color:#aaa;
}


/* Expanded item */
/* ============= */
.activity.open .activity-inner .activity-meta{
  margin-bottom:0px;
  margin-left:87px;  
}
.activity.open .activity-inner .right{ float:right; }";
  js_url = "data:text/javascript,function tweakUpdates(){"
 + "  $('.activity').each(function(i){"
 + "    if (! $(this).hasClass('tweaked')) { "
 + "      $(this).addClass('tweaked');"
 + "      var classname = '';"
 + "      try{"
 + "        classname = $(this).children('.activity-inner').children('.activity-meta').children().last().html().substring(2);"
 + "      } catch(e){}"
 + "      $(this).addClass(classname);"
 + "      $(this).addClass('closed');"
 + "      $(this).click(function(e) {"
 + "        $(this).toggleClass('open closed');"
 + "      });"
 + "    }"
 + "  });"
 + "}"
 + "function init(){"
 + "  /* Forrst.applyLibs is the function that the page call when the DOM is ready*/"
 + "  /* and after every new pagination is loaded, so we extend it and use as the*/"
 + "  /* hook to run the custom modifications (tweakUpdates).*/"
 + "  /* If the Forrst object is not present, it means that the Forrst javascript */"
 + "  /*is not loaded yet, so we wait for 2 secconds before trying again.*/"
 + "  if (typeof Forrst != 'undefined') {"
 + "    applyLibsCopy = Forrst.applyLibs;"
 + "    extendedApplyLibs = function(){"
 + "      applyLibsCopy();"
 + "      tweakUpdates();"
 + "    };"
 + "    Forrst.applyLibs = extendedApplyLibs;"
 + "    tweakUpdates();"
 + "  }else{"
 + "    setTimeout(init, 1000 * 2);"
 + "  }"
 + "}"
 + "init();";
  new_link = document.createElement('link');
  new_link.rel = 'stylesheet';
  new_link.href = css_url;
  document.getElementsByTagName('head')[0].appendChild(new_link);
  new_script = document.createElement('script');
  new_script.type = 'text/javascript';
  new_script.src = js_url;
  document.body.appendChild(new_script);
})();

Collapsible Forrst for iOS (now with text snippets)

I've updated my mobile Safari bookmarklet that applies modifications on Forrst main timelines (Latest Posts, Popular Posts, Promoted Posts) in order to make the items collapsible. Check my previous post to see a screenshot of the previous version. Changelog The main change on this version is that collapsed items now display a small snippet of the post description, so you can have a better preview of what that item is about before clicking on it to expand. I've also commented the userscripts to make the bookmarklet more readable (people should read and understand what it does before installing it). Usage Steps to add this functionallity on your browser: create a new bookmark on your mobile safari and Save it (it can be of any page) open this page, choose a collumn, select all code and Copy it click on your bookmarks icon and Edit the bookmark you just added Paste the code on the URL field. While there, edit the name as well Known bugs clicking on the like heart button collapses an expanded item Feedback Please leave feedback about the mod, the bookmarklet code and even about the build system if you will (I plan to do a new post about the build system later when it becomes more mature, it is pretty alpha at the moment).

javascript:void(document.getElementById('footer').className='')

Bookmarklet to make Forrst better on the iPad (Mobile Safari)

Since mobile browsers don't support CSS position fixed and Forrst use this to keep the footer always visible, navigating on iOS devices is kinda of annoying sometimes (see forrst.uservoice.com/forums/48191-general/suggestions/… ) So I made this quick hack to send the footer to bottom using a bookmarklet. How to instal copy the code above to your clipboard bookmark any page on your mobile safari open your bookmarks and edit the bookmark you just added paste the code on the URL field. While there, edit the name as well :) There you have it, now you only have to click on this bookmark every time you need to read the text that is hidden underneath the footer that is in the middle of your screen. Future I understand that this is a hack, and Forrst developers will soon fix this simple bug, but this hack made me think that we can further improve the readability of the website on mobile devices by means of javascript hacking (Greasemonkey style). I might add more tweaks in this bookmarklet in the future if I feel like, any suggestions of what to tweak is welcome :)