Jobs: Ember.JS Frontend Contract Developer for Open Event Project (Freelance)

STATUS: OPEN

Contract Basis | Location: Remote

As a frontend contractor you will collaborate with our team to bring the Open Event project hosted on eventyay.com to the next level. We define the scope through a list of dedicated issues that are postedon our repository and which you need to solve as part of this project. Most issues in this list only require changes on the Ember.JS frontend, for some issues minor changes in the Python/Flask backend might be required where you need to align with the responsible developer.

We use Ember.js as a frontend technology and Flask as a backend. The team follows best practices, uses scrum emails for the daily standup and Gitter chat for chat communication. 

After successful completion of the project options are to take on a follow up freelance project or to be hired. Future opportunities are to work from our bases in Singapore or Germany.

[Apply Here]

Responsibilities

  • Fix bugs and develop features for Open Event frontend as outlined in issue
  • Write unit tests for all portions of your code and add missing tests where applicable in the features handled
  • Work according to FOSSASIA Best Practices
  • Provide scrums and communicate on chat
  • Participate in developer meeting where necessary

Requirements

  • Strong expertise with Ember.js
  • Experience developing HTML, CSS, and Javascript
  • Experience with Continuous Integration tests
  • Understanding of best practices for web development and software design
  • Good spoken/written English

About the team

  • We are a team working with a community of FOSS developers working remotely in different timezones
  • We have an informal and collaborative environment
  • You can talk to us on our Gitter chat

Code

Please check out the project on GitHub before applying. Resolve some relevant issues to showcase your ability.

Issue overview: Google Doc 

Continue Reading Jobs: Ember.JS Frontend Contract Developer for Open Event Project (Freelance)

Jobs: Update Ruby on Rails, Transition Storage and Fix Open Bugs on Voicerepublic.com

STATUS: CLAIMED

We are looking for a remote freelance developer with the ability to fix issues and update the open source code base of Voicerepublic.com using Ruby on Rails, storage and other web technologies. Goals: To ensure security through updating to latest versions, to fix issues impacting functionality, to ensure a working transition from S3 to Backblaze and to enable the automatic deployment of the project from GitHub to a Debian server. 

This freelance project would include a serious functionality check after the updates. Changes and deployment should be documented following best practices.

[Apply Here]

The Github pages are

Ruby is already updated to 2.4 and working on Debian Buster (See the “buster” branch in the project repository). Other technologies include: Capistrano, Websocket, AWS S3 (on Backblaze), ClojureScript (Clojure), CoffeeScript, ActiveAdmin, AngularJS, Cdist. The website should be deployed (again) to VoiceRepublic (voicerepublic.com).

The following needs to be taken care of as part of the project.

1. Updates and Dependencies

Please update to well-supported Ruby and Rails versions to ensure the system can run smoothly. Desired versions:

  • Update Ruby 2.4.N to Ruby 2.7.1 
  • Update Rails 4.2.0 to Rails 6.1.x.
  • Bump dependencies to latest version (also see automatic Dependabot PRs)

2. Data Sources and Deployment

  • Switch to Backblaze’s S3 as storage engine (data is already transferred)
  • Do changes in uploading code needed for compatibility with B2, also see https://github.com/voicerepublic/voicerepublic_dev/issues/891 
  • Rename “Integration” branch to “development” branch. Deploy development and master branch automatically with Travis to run the system including admin app (backend). For settings use environment variables on Travis.
  • Automatically create docker images
  • Add (semi)automatic tests to ensure Upload and Streaming functionality works on Backblaze (start with manual tests)
  • Set up Vercel or another suitable service to create a test installation for each PR

3. Office Backend

  • Solve issues – batch actions, enable delete and show “public page link” – in back office to re-enable administration tasks
  • Add system config settings, e.g. Backblaze S3 keys, Mailgun, other config options into the backoffice settings UI

4. Voicerepublic User System

  • Fix missing images and ensure all media files come from internal resources (not external)
  • Unlink Streamboxx page https://voicerepublic.com/pages/streamboxx. We currently don’t provide this feature but might come back to it later again.
  • Update dead/outdated links to blog, help, etc. e.g. to Twitter it should be https://twitter.com/VoiceRepublic_
  • Delete tawk.to box service
  • Fix links to public pages
  • Take out Facebook Login (comment out the code in case we come back later)
  • Fix RSS issue resulting in a lot of resource usage
  • Add a privacy respecting captcha for user sign up
  • Check validity of https://github.com/voicerepublic/voicerepublic_dev/blob/integration/CONFERENCE.md and move any still relevant content to Readme.md. Then delete file.
  • Move deployment info to folder /docs, delete any outdated content and update deployment info. Current file at https://github.com/voicerepublic/voicerepublic_dev/blob/integration/DEPLOYMENT.md 
Continue Reading Jobs: Update Ruby on Rails, Transition Storage and Fix Open Bugs on Voicerepublic.com

How to ask questions to solve a setup or development problem as a Newcomer in Open Source

We see a lot of new users coming up and asking questions, which is great. But a lot of people ask “Can I ask a question?” which leads to an unnecessary indirection that “Yes, you can”. Or they say “Can anyone help me?”, “I’m having a problem” without mentioning their problem or even if they mention the problem “I cannot setup the project. It throws an error”, then they don’t mention the error. This leads to a loop of repeated question answers.

  • Please ask the question in the message itself
  • Mention what is the problem
  • Mention what you tried
  • Mention what failed
  • Mention the error with the exact error message/screenshot of the failure

To save both your and maintainer’s time in solving your issue.
Please read this: https://jvns.ca/blog/good-questions/

Also, respect time zones, people’s personal space, and time and realize that most people help others voluntarily. They are in different timezone than you and may take hours before replying. Use public channels so that even others may answer your questions, don’t spam and be patient, they may reply in their own time when they feel comfortable.

And also answer other’s questions if you know the solution.

“Now that you’ve read all the issues and pull requests, start to watch for questions that you can answer. It won’t take too long before you notice that someone is asking a question that’s been answered before, or that’s answered in the docs that you just read. Answer the questions you know how to answer.”

Andre Arko.net

Please join us to ask your question or answer a question of contributor on our channel at https://gitter.im/fossasia/fossasia

Continue Reading How to ask questions to solve a setup or development problem as a Newcomer in Open Source

FOSSASIA Summit 2020 Takes Places as Online and Offline Event

Due to the Corona crisis it is clear that events like the FOSSASIA Summit cannot be run in the usual way with large crowds. Therefore this year the FOSSASIA Summit will only be possible as a smaller gathering with social distancing in Singapore and online interactions from Thursday, March 19 – Saturday, March 21. 

Even with travel restrictions in place a number of speakers are in Singapore and expressed their wish sharing their knowledge and the FOSSASIA team is working hard to facilitate this in a safe space offline and online. Due to ongoing changes we will conduct the event with both unscheduled and scheduled sessions. The program will be updated continuously here.

The Lifelong Learning Institute, our host and co-organizer, adjusted the venue to ensure the safety and health of all. To participate on-premise you need to pass a screening test and follow directions for hygiene measures. The sign up is here

Singapore has an outstanding record seen internationally as a gold standard when it comes to cleanliness, hygiene and health. Additional measures in the LLI include providing entrance screening tests, social distancing, using open spaces, reducing the use of mics and mic disinfection, avoiding close group photos. Please find a list of measures here.

The events of our time show more than ever that we need to collaborate to solve the world’s problems such as climate change, global health issues, poverty and economic challenges. The FOSS/Open Source community has proven that we are able to overcome differences and work together across countries and cultures. It is important that we stay connected and continue our work be it offline or online. To connect virtually during the FOSSASIA Summit you can join us on these channels:

We will share more details about sessions in the upcoming days. Furthermore, we are planning additional online events at a later time this year. Let’s continue and build a better world through learning and sharing where-ever and however we can!

We would like to thank everyone who supported us throughout these challenges around the event – our speakers, friends, supporters, and partners like Google, Facebook, Arm, and Elastic.

We hope to stay connected. All the best and stay healthy!

FOSSASIA Presentations
FOSSASIA Videographers
Continue Reading FOSSASIA Summit 2020 Takes Places as Online and Offline Event

Python / EmberJS Full Stack Developer for Open Event Project

STATUS: ACTIVE

As a Full Stack Engineer at FOSSASIA, you’ll work together with a global community to develop the Open Event project and to maintain our web service at eventyay.com. Our services are entirely Free/Open Source. We use Flask as a backend and  Ember.js as a frontend technology. The system is deployed on a Hetzner cloud server. You’ll own what you build, making technical decisions and applying our best practices to every piece of code. The team uses scrum emails for the daily standup and Gitter for continuous chat communication.

Candidates who have started contributing code to one of our projects and to the Open Event backend and frontend specifically will have an advantage.

Number of Positions: Several

[Apply Here]

About the team

  • We are a team working with a community of FOSS developers
  • We work remotely in different timezones
  • Our system is built using Ember (frontend) and Flask/Python (backend)
  • We have an informal and collaborative environment
  • We embrace Continuous Integration

Responsibilities

  • Assume leadership and responsibility for the technical tasks and deliverables
  • Become project owner of Open Event development and provide daily code commits
  • Deploy project on the server using Docker
  • Write unit tests for all portions of our applications
  • Automate the software deployment process
  • Support community developers and review PRs
  • Work according to FOSSASIA Best Practices
  • Provide daily scrums, code contributions and communicate on chat
  • Participate and lead weekly developer meeting
  • Ensure related apps (Android/iOS) work with APIs and review PRs
  • Take on responsibilities in other FOSSASIA projects as needed

Requirements

  • Experience working in a remote setting, or with a remote team and across multiple time zones
  • Professional experience using HTML, CSS, and Javascript
  • Experience with Flask/Python
  • Experience with Ember.js (or the desire to learn it)
  • Experience with Continuous Integration and Docker
  • Understanding of best practices for web development and software design
  • Not afraid of going deep on backend code to understand features
  • Enjoy writing tested and modular code
  • Working time overlaps with European and Singapore time
  • You have good spoken/written English
  • Self-motivated and independent

Code

Please check out the project on GitHub before applying.

Open Event Server: https://github.com/fossasia/open-event-server

Open Event Frontend: https://github.com/fossasia/open-event-frontend/

Salary

10,000 – 15,000 SGD p.A. 

Benefits

  • Visit Singapore and participate in annual FOSSASIA Summit
  • Participate in local Open Source meetups and conferences
  • Work with a community of enthusiastic software developers

Location

Worldwide

Contact

Please apply through our online form.

[Submit Application Here]

Links

Continue Reading Python / EmberJS Full Stack Developer for Open Event Project

How to implement JSONP to download XML resource

According to the same-origin security policy, web page can freely share images, stylesheets, scripts… but web fonts and AJAX requests are only accessible from the same domain.

Sometimes this is not desired behaviour, such as when getting a json / xml file from a different domain, using AJAX. In such cases, it all comes down to two solutions :

1- The source sets its header to allow specific domain cross-origin resource sharing (CORS). In PHP, this is done with header function :

<?php
header('Access-Control-Allow-Origin: *');

2- Use JSONP.

JSONP is short for JSON padding, a well-known “workaround” to solve CORS. It only works with GET.

To send AJAX requests using JSONP, the server must first knows how to respond to JSONP requests. It usually detects JSONP requests using callback parameter.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<?php
// compute result
[...]

// output result
JsonpHelper::outputXML($result);

// json helper class - credits : @andibraeu
class JsonpHelper {
	private static function is_valid_callback($subject)
	{
	    $identifier_syntax
	      = '/^[$_\p{L}][$_\p{L}\p{Mn}\p{Mc}\p{Nd}\p{Pc}\x{200C}\x{200D}]*+$/u';
	    $reserved_words = array('break', 'do', 'instanceof', 'typeof', 'case',
	      'else', 'new', 'var', 'catch', 'finally', 'return', 'void', 'continue', 
	      'for', 'switch', 'while', 'debugger', 'function', 'this', 'with', 
	      'default', 'if', 'throw', 'delete', 'in', 'try', 'class', 'enum', 
	      'extends', 'super', 'const', 'export', 'import', 'implements', 'let', 
	      'private', 'public', 'yield', 'interface', 'package', 'protected', 
	      'static', 'null', 'true', 'false');
	    return preg_match($identifier_syntax, $subject)
	        && ! in_array(mb_strtolower($subject, 'UTF-8'), $reserved_words);
	}

	public static function outputXML($string) {
		# JSON if no callback
		if( ! isset($_GET['callback']) )
		    exit($string);
		$string = str_replace("\n", " ", str_replace("'", '"', $string));
		# JSONP if valid callback
		if(JsonpHelper::is_valid_callback($_GET['callback']))
		    exit("{$_GET['callback']}('$string')");
		# Otherwise, bad request
		header('status: 400 Bad Request', true, 400);
	}
}

Line 29 is dedicated to replace all single-quote characters to double-quote, and new lines to simple space. This is to be able to pass xml document as valid javasript string parameter.

Then, the client can use jQuery to get the document from a different domain (it works on same domain as well, which is convenient for testing & development) :

1
2
3
4
5
6
7
8
9
$.ajax({
	url : source_url,
	dataType : 'jsonp',  // if dataType is set to 'jsonp' 
			    // a 'callback' parameter will be appended to the request url
	success: function(data) {
		$data = $($.parseXML(data));
		items = $data.find('item');
	}
});

Something worth noticing on the client side is on line 5 : the data needs to be converted to xml first, with $.parseXMLbefore converting to jQuery object. Converting the result string directly to jQuery won’t work : $data = $(data);.

That’s about it ! To know more about JSONP, please refer to its wiki https://en.wikipedia.org/wiki/JSONP.

References :

Continue Reading How to implement JSONP to download XML resource

API Integration

My FOSSASIA project is taking a big transitioning step from the starting plan. In milestone 3 and 4, rather than focusing on statistical retrieval and API documentation wepapp, my mentors – Mario (@mario) and Andreas (@andibraeu) are guiding me towards integrating fossasia api data in other services. The main goal remains the same though : getting more people to use and to know about the API.

Integrating our set of data into external services can be tricky, but this is also what makes the task so exciting. Currently, we’re already started the integration process into loklak, a distributed searching & harvesting server. You can find out more about loklak via their well detailed about page. But the plan doesn’t stop there. We’re targeting popular web platforms : WordPress, Drupal, Github Pages.. so that users can access our data with ease, and use our services / plugins in their websites within simple steps. That would be a big win for us, so I’m very impatient to get going with the code to brings these ideas to life.

References :

Continue Reading API Integration

Get Facebook comments with large user pictures

On the /user edge, user pictures url are not returned by default, and when users ask for it, the response image is not in biggest format. This query should get the largest user pictures associated with post :

	/user{picture.type(large)}

There are other use cases where this syntax applies as well

  • get comments of a feed
	/feed?fields='from{picture.type(large)}'
  • get feeds of an user
	/userid/feed?fields={from{picture.type(large)}}

Examples tested with Facebook Graph API > v2.0, using Graph Explorer and PHP SDK.

Continue Reading Get Facebook comments with large user pictures

A glance at FOSSASIA Calendar API

I am a frequent user of popular social platforms API : Facebook, Twitter, Instagram.. Among others, Facebook Graph API is the API I’m most familiarized with, and despite its lack of documentation, Graph API makes me from time to time admire the engineering mind of those who built it. It’s simple, has a clear design, and communicates a consistent philosophy. I inspired a lot from it to implement Calendar API, a simple web service at FOSSASIA.

Why naming it API, and not web service ? I don’t know, I was always confused about the two, and as far as I concerns, they are the same. The only difference might be the word ‘web’ that tights web service to HTTP, and the scenario involving two distant machines, while API is somewhat more general (an API call of an in-app library for example).

This is my first time building a web service, and so far there wasn’t any technical challenge : it’s just simple & straightforward PHP script with echo $results; in the end. Mainly because the hard part is still ahead : getting people to know about it, and maintaining it while there are (hopefully) enough clients who care to yell at API developers when they do something wrong. The API I built supposed to parse the merged ics file of all communities event feeds, and expose it to users, in various formats, with filters and options.

Don’t worry if the last sentence doesn’t make sense. We’ll dive in the details right away.

There are currently two possible formats : .ics and .json. Users set the format with format parameter, for e.g. format=icsics format is suited for developers who want to import events to their calendar app / wordpress plugin. json format is for front-end developers who want to build a web / mobile web without the hassle of parsing ics feed.

A few filter parameters are possible to refine search results : source to filter by community, fromto to filter by events time, limit to limit number of events returned, and fields to custom select event fields. Finally, sort parameter is to order the results by certain criteria. Currently only datetime ordering (ascending or descending) are available.

As I said, the Calendar API is inspired a lot from Facebook API. Those are the ideas I pickpocketed from their design :

  • multiple values parameter. With source and fields, multiple values can be provided, separated using comma.
  • fields parameter. The motivation for event field filter is because the event has lots of different fields, and different users are interested in different information.

There is also the “linked edge” characteristic of Graph API that I find very interesting : connection between related data make them more useful. It is done that way mainly because the API reflects Facebook own data model, but there is nothing thats prevents unconnected data to be presented in a connected way. So I’ll hope to implement something similar for FOSSASIA Calendar API in the futur.

(Right now the API serves events from Freifunk community, not FOSSASIA, mostly because there are not enough event feeds from FOSSASIA community to collect. So if you want to help us, you can add ics feed of your open-source community to FOSSASIA API. Here’s how).

References :

Continue Reading A glance at FOSSASIA Calendar API

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 Reading Optimize React-Redux App