Calendario: Another JS calendar library

Calendario is a lightweight calendar library that I happen to find on the net. Their approach to calendaring solution is rather unique : it’s not a full-blown library like jQuery FullCalendar where everthing is ready to be used. With Calendario, calling init function simply generates plains html source code. The styling part is completely up to user.

Another plus is it’s lightweight (350 lines of code more or less). It’s easy to dive into the source and make advanced adaptations to specific use-case.

But what’s really remarkable is their examples. As I said the styling is out-sourcing to user, and they provide stunning examples that demonstrate how to do it. For me (a developer “designing” stuffs), readily beautiful examples are a crucial selling point.

But (there’s always a but..), Calendario is very poorly documented. A pointer to the same blog post all over again is not enough ! I was very confusing about how things work at first, especially about the data model. This blog contains what I found out (rather painfully) about Calendario library :

Initialization

<div id="calendar_id"></div>
<script>
	$('#calendar_id').calendario(options);
</script>

Available options

Option Purpose* Default
weeks weekday labels [‘Sunday’, ‘Monday’, ‘Tuesday’, ‘Wednesday’, ‘Thursday’, ‘Friday’, ‘Saturday’]
weekabbrs weekday short labels [‘Sun’, ‘Mon’, ‘Tue’, ‘Wed’, ‘Thu’, ‘Fri’, ‘Sat’]
months month label [‘January’, ‘February’, ‘March’, ‘April’, ‘May’, ‘June’, ‘July’, ‘August’, ‘September’, ‘October’, ‘November’, ‘December’]
monthabbrs monday short labels [‘Jan’, ‘Feb’, ‘Mar’, ‘Apr’, ‘May’, ‘Jun’, ‘Jul’, ‘Aug’, ‘Sep’, ‘Oct’, ‘Nov’, ‘Dec’]
displayWeekAbbr display week short labels false
displayMonthAbbr display month short labels false
startIn 1
fillEmpty true
zone ‘00:00’
events [[‘click’], [focus’]]
checkupdate true
weekdays ‘MON, TUE, WED, THU, FRI’
weekends ‘SAT, SUN’
feed http://calendario.t15.org/sync/
month
year
caldata calendar events data

Most of them you can safely ignore, I enlisted them all for the sake of completeness. Checkout the next section for interesting ones.

Option format

caldata

A list of json objects. The list’s keys and values contain following information :

  • key : the event date in MM-DD-YYYY format
  • value : an array of event values that occured on the given date. Each case of the array can have following fields :
Option Purpose Value type
content title of the event string
url Link to event page string
note added note for the event, will be included in the html as inside tag string
startday string, in MM-DD-YYYY format
endday string, in MM-DD-YYYY format
allDay true for all day event boolean

Examples

var events = {
	'06-06-2015' : [{content: 'Important Meeting at 4', startTime: '04:00', endTime: '06:00', note : 'Everyone please gather at Markketing Department'}],
	'06-07-2015' : [{content : 'First event of July 7', allDay : true}, 
	                {content : 'Second event of July 7', allDay : true}
	               ],
	'07-01-2015' : [{content: 'All day event', allDay: true, note : 'So loongg !'}]
}

Wrap-up : Pros and cons of Calendario

  • Pros :
    • lightweight
    • fully customizable design
    • beautiful examples
  • Cons
    • poor documentation
    • lots of work undone, not recommended for those who want a powerful library that just work

That’s about it ! Found something wrong, or just want to help completing this unofficial calendario documentation ? Send me a PR here

*NOTE : this documentation is based on Calendario v4.0.0 https://github.com/deviprsd21/Calendario

References :

Continue ReadingCalendario: Another JS calendar library

Knitting Web App FrontEnd with Pattern Editor Knitting Simulator

Hi everyone, I am Sameera Gunarathne and I am a computer science undergraduate of University of Moratuwa, Sri Lanka. This is the first time I have applied for the GSoC and FossAsia and I am quite excited to  give my contribution to FashionTec as it’s a whole nice new experience that programming is applied with real world applications in fashion and technology paradigm. I have selected for developing a Graphical User Interface which runs as a web application which is intended to provide a common platform to give input for the knitting machine firmware.

As the first step I had to research on the existing knitting applications that are available online commercially and what they provide as features that still need to be included in open source knitting applications. I have looked into both knitting pattern design softwares and knitting machine embedded softwares including knitbird, EnvisioKnit ,Stoll knitting software, ShimaSeiki SDS One Knit. The most significant feature I have noticed is the feature rich pattern editor provided with the software. They provide features like loading patterns from different formats(jpeg, png,gif,pdf), transform patterns(crop,replicate etc) to create new patterns, drawing tools to create a pattern from scratch, Provide colour palette with available yarn carrier colours, Saving and loading the work done by the user in the application storage etc.

Therefore in this GSoC period I am developing the assigned Web User Interface with consisting of following components.

Web App FrontEnd

  • Work Space + Pattern Editor
  • Knitting Simulator
  • Project Manager

Web App Back End

  • Web Client Server component(REST Api to communicate with knitlib interface)
  • Request Handler for back end logic
Screenshot from 2015-06-02 09:37:09
Logical Architecture Diagram

Knitting Simulator is used to simulate the knitting process through the user interface while the knitting is going on. It will display the carriage details, current knitting progress and a graphical simulation of the current knitting position of the pattern with row details. Project Manager component is to save knitting works as projects and load them later as the user preference.

The selected technologies for the project implementations are mainly JavaScript(node js for back end and angular js for front end implementations), HTML & CSS (render static content). REST Api for communicating with knit lib interface will be implemented in node js. The offline usage of the app will be implemented using Electron Framework.

This project consists of 4 milestones and under the first milestone I am working on the pattern editor features. Currently I have implemented loading different types of patterns into the workspace and pixelate them according to the number of rows and stitches allowed for the knitting. Following tasks will completed end of this week.

  • Identifying individual pixel in the grid as a stitch and add operations such as change colour, size etc.
  • Adding pattern editor tools for selecting pattern area, colour picker, crop-cut-paste tools for pattern replicating.
Screenshot from 2015-06-05 11:41:15
Current Implementation of Pattern Editor

I hope this GSoC will be a fruitful one to spend with a successful implementation of the knit web app and looking forward to provide a competitive open source knitting software at the end of the development :).

 

 

 

Continue ReadingKnitting Web App FrontEnd with Pattern Editor Knitting Simulator

Simpler Control of Knitting Machines with knitting machine abstraction library and JSON based knitting file format

Hello everyone, my name is Sebastian Oliva. I am a developer from Guatemala and part of the team of students currently in Google Summer of Code ’15 working on Fashiontec. During last year’s GSoC I built a GUI interface for the AYAB project, allowing for easier control for knitting machines supported by AYAB (Brother KH-930, KH-910).

When I started getting involved with Fashiontec and FOSSASIA last year I was not aware of the large community related to textile and open fabrication projects. Since then, I have found many projects that have focused on different techniques and have had different approaches to fabrication and in particular the operation of knitting machines. Such as projects that emulate existing functionality of an existing machine, projects that entirely replace or enhance the machine’s inner workings, and projects that build machines from scratch.

Currently I am working on developing a knitting machine abstraction library and JSON based knitting file format that can enable the use of a single API to control a varied number of knitting machines. A knitting machine library allows us to create even more advanced software to control and operate machines, while a standardized and open format for knitting patterns allows us to create pattern collections such as the common pattern books usually shared by knitting communities, as well as enabling pattern editors and ecosystem.

Currently I am:

  • Working on designing and implementing Knitlib’s API design.
  • Writing tests for Knitlib’s desired behaviour.
  • Starting work on defining Knitpat, the open knitting file format.

I hope that this year’s GSoC brings a lot of advances to the machine knitting community, and I am happy to be a part of it.

Continue ReadingSimpler Control of Knitting Machines with knitting machine abstraction library and JSON based knitting file format

Optimize React-Redux App

React is advertised as quite fast out of the box. In extreme cases when your app hits performance problem, you just have to optimize the re-rendering process by shallow comparing React props and state inside shouldComponentUpdatelifecycle function. The strategy for optimizing seems quite straight-forward.

However I found that this strategy is less clear in a React/Redux environment. Here are some advices that you should considering when dealing with your app performance:

Use Immutable data

This one should be a no-brainer with any React app. shouldComponentUpdate can only be useful when all the props can be shallow-compared. So as a rule of thumb, your components props can only be of 3 types:

  • Immutable
  • Primitive type (number, boolean, etc.)
  • Function type (e.g. callback event)

I didn’t mention how you should handle React state. That is because Redux uses a separate store as application state. But sometimes, you need to use both React’s state and Redux’s store. In that case, both props and state are shallow-compared so state elements should follow mentioned rules as well.

Do not use ownProps

When you create stateful components (containers) using connect function from react-redux library, shouldComponentUpdate is declared implicitly, so you normally don’t have to implement it yourself.

However the implementation of shouldComponentUpdate is such that if you uses ownProps in your mapStateToProps or mergeProps function, it will always return false, so the component will always be updated.

This means that if you want your component to be optimized, you can’t use information from passed props to get other information from the store. Why the implementation has to be this way is still unclear to me.

Avoid connect on frequently-called elements

connect function wraps the component inside another component with lots of decorated elements. These heavy overheads should be avoided on components that are called a lot in your application, for e.g. an element of a list.

Use Performance Tools

Finally, here are some excellent tools from the React team. Use them to identify the bottleneck in your React application:

Continue ReadingOptimize React-Redux App

FOSSASIA API calendar service

ICalendar is a file format residing under RFC 5445, to represent and exchange calendaring and scheduling information. The file extension is generally .ics, and .iCal for Apple software. The aim was to define a standard format that could be understood everywhere, independent of calendar vendors : Google Calendar, Apple iCal, Yahoo! Calendar, Mozilla Lightning, Microsoft Outlook… Nevertheless, true interoperability doesn’t seem to be the reality. My next task at FOSSASIA is to this circumvent this situation and create a calendar service / vizualisation from ICalendar sources provided by different open-source communities, hence probably from different vendors and format deviations.

To have an idea of the problem I’m dealing with, I gathered a bunch of ics files, mostly provided by freifunk communities, using these little node scripts, and try to spot a not-so-standard implementation. To have a less mechanical approach, I developed a visual tool to debug my ics. Here are some screenshots of the app:

Ics debugging tool screenshot 1Screenshot 1

Screenshot 2

Ics debugging tool screenshot 1

The tool is fairly simple : you copy the ics text into the text area (or choose between example files), press Feed me !, the system will get running and provide some outputs. There is a general info panel, a yearly heatmap, and a calendar. It is a great help for me since I can just switch between ics files, see all the events counts in the heatmap, and event detailed information in the calendar.

Source code & demo version coming soon ! Built with ics parser library https://github.com/johngrogg/ics-parser, CalHeatmap https://kamisama.github.io/cal-heatmap/ and jquery plugin FullCalendar.io.

Update :

Source : https://github.com/zyzo/ics-tools

Demo : http://fossasia-api.herokuapp.com/

References :

Continue ReadingFOSSASIA API calendar service

How to join the FOSSASIA Community

We often get the question, how can I join the community. There is no official membership form to fill out in order to participate in the Open Tech Community. You simply start to contribute to our projects on GitHub and you are already a member. So, let’s work together to develop to develop social software for everyone!

The FOSSASIA team welcomes contributors and supporters to Free and Open Source Software. Become a developer, a documentation writer, packaging maintainer, tester, user supporter, blogger or organize events and meetups about our projects.

Women in IT discussion in the community

Here are some ideas how we can collaborate

Download our Open Source applications, install them and use them

The first step of joining a project is always to download the software and try it out. The best motivation to support a project is, if the project is useful for yourself. Check out our many projects on github.com/fossasia and our project social media Open Source search engine on github.com/loklak.

Show your support and ★star FOSSASIA projects

Help to motivate existing contributors and show your support of FOSSASIA projects on GitHub. Star projects and fork them. Doing something that people like and that helps people is a great motivation for many.

Learn about best practices

We have formulated best practices for contributing to Open Source to help new contributors to get started. Please read them carefully. Understanding our best practices will help you to collaborate with the community and ensure your code gets merged more quickly.

Subscribe to news

Subscribe to the FOSSASIA Newsletter to stay up to date on new software releases, events and coding programs here on the main page.

Read the blogs and support users on the mailing list

Learn from Open Tech articles on our blog that are written by developers, contributors, volunteers, and staff of companies supporting the FOSSASIA network. Sign up for the FOSSASIA Mailing List and keep reading our blog at blog.fossasia.org.

Follow us on Social Media

Show us you interest in FOSSASIA’s Open Technology and keep up to date on new developments by following us on Twitter and retweeting important updates: twitter.com/fossasia

And, become a member on social networks like Google+ and Facebook and connect with other contributors:
* Facebook www.facebook.com/fossasia/
* Google+ plus.google.com/108920596016838318216

Join and support the FOSSASIA network at community events

Set up a booth or a table about FOSSASIA at Open Source community events! There are many events of the open source community all over the world. The core team of FOSSASIA is simply not able to attend all events. You can support the cause by making the project visible. Register as a member of the FOSSASIA community at events, set up an info point and showcase Free and Open Source projects. Check out for example FOSSASIA event calendar calendar.fossasia.org or our meetup group in Singapore: meetup.com/FOSSASIA-Singapore-Open-Technology-Meetup

Translate our projects and their documentation

Do you speak more than one language? Most Open Tech projects are 100% volunteer translated, which means you can be part of a translation team translating software and documentation thousands of people will use. Start now and check out our GitHub repository.

Mini Debconf Participants in Saigon

Continue ReadingHow to join the FOSSASIA Community

Scrum journey

Exception, perception, and knowledge are things that fade away. The truth is that your memory betrays you all the time by erasing (without asking you a word !) all your experience about things that you used to know. If you are old enough to forget how awesome your childhood was, and are frustrating because you do, you’ll understand what I mean.

The problem is, experience is often very valuable, even if it is about how you felt being ignorant. For instance, as a teacher, you want to know what it’s like to know nothing about a subject, so you can deliver it to your students, in a less boring or overwhelming way. As a framework designer, if you want to strive for easy integration and small learning curve, you should at first know what small learning curve and easy integration look like for newbies.

I’m not going off topic any further. The reason I’m saying all this is because I’m learning a whole new concept that I have absolutely zero idea about: scrum mehodology. This framework is applied in my gsoc project at FOSSASIA. I don’t have all the data yet, but my first impression is that this is a hell of a subject that would deeply impact me in my work life.

Therefore I’ll use this blog as a diary to log all my experience in my scrum’s discovery journey, so when I’m skillful enough, I can look back at this and remember what it’s like to be ignorant again. I’ll also post useful links and stuffs that help me, so I hope this blog will benifits others as well.

As consequence, this blog will likely be updated in the future. I don’t know when, but it will be. Unless I (am very unlikely to) become a scrum master with no more stuff to learn.

Image broken
Image credit : http://www.agilelearninglabs.com/2012/02/what-does-a-scrum-master-do/

Outline

Day 1 : What the heck is scrum, and scrum questions ?

Scrum is a version of agile programming, as opposed to “waterfall” programming where all specifications are planned in the beginning and all deliverables in the end. My first impression about scrum is, it doesn’t bring anything new to the table. Smaller release cycle ? Daily team communication ? Sprint-based/task-based development ? More client interaction ? These are useful tips/guidelines for sure, but for a developer, this sounds quite trivial and just like common sense. Maybe from a manager’s point of view, it might looks more like a fresh idea. But if that’s all agile programming is about, then it might not worth the hassle.

My mentors first asked me what my scrum questions are. I was like, questions about scrum ? Yes please, I have tons of them, because I know nothing yet ! But, what scrums questions really mean is simple questions that each member of the team has to answer in each daily standup meeting. It is intended to keep the meeting short (< 15 min) and concise. The most basic line of scrum questions is these three :

  1. What did you do yesterday?
  2. What will you do today?
  3. What obstacle did you find in your way?

The meeting is intended to help team members to know about others’ work, and to (eventually) help them . Most importantly, it’s about making commitments (“I intend to complete this task today, but if I don’t, please don’t look down on me!”). That way the next day others developers will certainly know if the developper did or did not achieve what they intended, and why.

Image broken

So far so good. The way I see it, the daily standup idea has good faith in itself : it encourages just enough amount of team communication. When I was at OnePoint, where waterfall methodology is used, and no team interaction protocol is enforced, I feel like this is exactly the thing we needed.

In my next update that I don’t know when, I’ll probably talk about scrum in my one-man-land situation, that is, a single developer in the development team.

References :

Continue ReadingScrum journey

GSoC 2015 with FOSSASIA : the beginning

I was choosen as a student participant to Google Summer of Code 2015.

It’s a program organized by Google that offers students stipends to write code for open source projects. Being selected is a big deal for me since GSoC is a vey selective program, and a meaningful way to spend my summer, by doing what I very much enjoy : coding. What’s more, students get paid doing it. I’m not denying that the $5500 stipend per student is really sexy (at least for me). It’s way more than most software interns in France get for a three months period.

I just knew about GSoC two months ago thanks to a teacher. Before that, I have very little notion about open-source software, and none about GSoC. I cure my ignorance since then with a lot of interesting blogs and definitions. Based on the information I’ve been fed with, I could now say open-source is great. From the company’s point at view, it’s a great form of advertising. For the project, open-source often means better code and documentation. The developers knows the whole world has access to the source code, so they’ll probably take better care of it. Also, open-sourcing is a must if you want to create a vibrant community and ecosystem.

Open-source is great, getting involved, even better. With GSoC you have the opportunity to work on an open-source project with mentoring support from the core developers who are maintaining it themselves. Awesome ! To get into the program as a student, you have to choose betweens accepted mentoring organizations and propose a project idea suited to them. I was particularly attracted to FOSSASIA, an open-source event community in Asia, and their project idea Extend toolbox for FOSSASIA and Freifunk API. The Freifunk/FOSSASIA API is designed to solve the problem of collecting data from different communities in a decentralized way. It makes some interesting parts of the FOSSASIA community site possible, e.g. the Common Map.

Image broken FOSSASIA logo

I think the toolbox has a great potential to create a strong network between different communities at different locations, by providing attractive statistics visualization. With that spirit in mind, my project’s proposal aims to add new components and improve old ones. Here are some of them :

  • Improve the json generator page
  • Calendar service
  • Community news / events panel
  • Common Map filters :
    • by country
    • by technical area
  • Statistic service / charts :
    • communities counts
    • active period panel based on news/events date (like the contribution panel on github)
  • API Documentation web app
  • etc.

In my gsoc blog series, I’ll cherry-pick sutffs that I find valuable from my GSoC project to show to the world. So if you’re interested on what I’ll do, stick around for upcoming updates !

References :

Continue ReadingGSoC 2015 with FOSSASIA : the beginning

Embed Leaflet map as coordinates picker

As a warm up task for my GSoC project, I want to embed a map to the FOSSASIA API generator form as a convenient way for users to provide their location coordinates. When the user clicks on a location on the map, two input fields Latitudeand Longitude will be automatically updated with fresh values. Here’s how.

For this task you need jquery and leaflet – an openstreetmap library. You also want to prepare an empty div for the embed map :

<html>
<head>
    <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css"/>
</head>
<body>
    <label for="latInput">Latitude</label>
    <input id="latInput"/>
    <label for="lngInput">Longitude</label>
    <input id="lngInput"/>
    <div id="map" style="height : 200px"></div>
    <script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
    <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<body>
</html>

Now, let’s instanciate the div using the leaflet API. A tile layer must be provided, in this example I’m using mapbox but there are other tile providers as well :

var mapCenter = [22, 87];
var map = L.map('map', {center : mapCenter, zoom : 3});
L.tileLayer('https://{s}.tiles.mapbox.com/v3/{id}/{z}/{x}/{y}.png', {
    maxZoom: 18,
    attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' +
    '<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
    'Imagery © <a href="http://mapbox.com">Mapbox</a>',
    id: 'examples.map-i875mjb7',
    noWrap : true
}).addTo(map);

When the user clicks on the map, I want to point a marker to their choice and display a popup with choosen coordinates. That’s what updateMarker function is good for :

var marker = L.marker(mapCenter).addTo(map);
var updateMarker = function(lat, lng) {
    marker
        .setLatLng([lat, lng])
        .bindPopup("Your location :  " + marker.getLatLng().toString())
        .openPopup();
    return false;
};

The last missing piece is, on map click event, updating the lat and lng inputs :

map.on('click', function(e) {
    $('#latInput').val(e.latlng.lat);
    $('#lngInput').val(e.latlng.lng);
    updateMarker(e.latlng.lat, e.latlng.lng);
});

Now if you need the other way around – enter manually the input fields to update the marker, it could be easily done as well, by capturing a useful event associated with HTML input tag – the… input event :

var updateMarkerByInputs = function() {
	return updateMarker( $('#latInput').val() , $('#lngInput').val());
}
$('#latInput').on('input', updateMarkerByInputs);
$('#lngInput').on('input', updateMarkerByInputs);

That’s about it ! Check out this tutorial on Gist and JSFiddle.

References :

Continue ReadingEmbed Leaflet map as coordinates picker

Explore PHP pthreads bugs

I’m developing a utility library called meteor-ddp-php, which makes heavy use of PHP pthreads. Once in a while, I encounters weird, unexplainable bugs that contradicts all my knowledge about computer & programming languages. They just really get me on my nerves. I want to share with you that experience in this post.

Suppose I have a class B extending Thread and a class A which initiates and starts B:

test.php

<?php
class B extends Thread {
    public function run() {
        $i = 100000000;
        while($i--);
        echo 'I\'m feeling lucky' . PHP_EOL;
    }
}

class A {
    public function startB() {
        $b = new B();
        $b->start();
    }
}

$a = new A();
$a->startB();
echo 'Be what\'s next' . PHP_EOL;

Logically, the log I expected is (notice I put a considerable delay in B::run() – I didn’t use sleep because it is not thread-safe) :

Be what's next
I'm feeling lucky

Instead, this is what I got by running php test.php :

I'm feeling lucky
Be what's next

That’s just weird ! Apparently my child thread is blocking my parent thread, until it terminated. But wait for it. If I move the the echo line to the end of startB() method :

class A {
    public function startB() {
        $b = new B();
        $b->start();
        echo 'Be what\'s next' . PHP_EOL;
    }
}

it works just fine. Seems like the problem is not that $b->start() is blocking, but the blocking point is rather at the return of startB() function !

Now, just for fun, how about I changed the variable $b in startB() from function-scope to object-scope instead ? It shouldn’t make any difference right ?

...
class A {
    private $b;
    public function startB() {
        $this->b = new B();
        $this->b->start();
    }
}
$a = new A();
$a->startB();
echo 'Be what\'s next' . PHP_EOL;

Well, it did. The example works as expected, with this little fix. That’s just crazy ! The scope of the variable shoudn’t have anything to do with the blocking thread problem.

Using the second fix between these two, I dodged the bullet and go on with my application.

I must admit I didn’t go over 300+ issues on the github page, and in one of them may lie the answer for all this madness. But still, these problems just demonstrate the myth of multithreading in PHP. PHP isn’t anywhere near thread-safe yet, even at basic language blocs like function call or variable scope it seems. Working with pthreads requires extreme care and patience. Visit here for real-life example.

Continue ReadingExplore PHP pthreads bugs