Categories: "Web"

My Latest Project

04/19/12 | by Comp615 [mail] | Categories: Web, Travel

Check out my latest project, Yale Travelogue! A site that let's Yalies old and new alike coordinate travel and connect across the globe. We won 1st in the YCC app challenge yesterday and are excited to continue to improve upon it.

Enjoy!

Numbered Markers in Leaflet

04/02/12 | by Comp615 [mail] | Categories: Web, Technology

UPDATE: A Gist with the code is available here. You will still need to download the image I mention below.

One of the projects I'm currently working on deals heavily with mapping locations. Although Google Maps is great, I decided to go with a newer and more flexible solution, Leaflet. This little utility allows you to hook into CloudMade's huge database of tilesets to completely change how the maps look, in addition, Leaflet is just generally a super solid and fast mapping library.

After playing around with Leaflet, I really needed a way to label markers 1,2,3,etc. and wasn't able to find any easy way of doing this. So here's a quick little trick that should get anyone else looking for this functionality started.

First, make sure you are using the 4.0+ version of Leaflet, that's what I modeled this after, although you could probably use a similar approach for 3.0 as well.

The default marker wasn't quite the right size for fitting text inside, so I took it and distorted it a bit in photoshop. It's by no means perfect, but should do in a pinch. Download my custom marker here.

Next, we need to create our own icon class. Add the following code to a javascript file in your project, editing the path to the image as appropriate (Mine is ERB js):


L.NumberedDivIcon = L.Icon.extend({
options: {
iconUrl: '<%= image_path("leaflet/marker_hole.png") %>',
number: '',
shadowUrl: null,
iconSize: new L.Point(25, 41),
iconAnchor: new L.Point(13, 41),
popupAnchor: new L.Point(0, -33),
/*
iconAnchor: (Point)
popupAnchor: (Point)
*/
className: 'leaflet-div-icon'
},

createIcon: function () {
var div = document.createElement('div');
var img = this._createImg(this.options['iconUrl']);
var numdiv = document.createElement('div');
numdiv.setAttribute ( "class", "number" );
numdiv.innerHTML = this.options['number'] || '';
div.appendChild ( img );
div.appendChild ( numdiv );
this._setIconStyles(div, 'icon');
return div;
},

//you could change this to add a shadow like in the normal marker if you really wanted
createShadow: function () {
return null;
}
});

Now we need to unstyle the disgusting default div, and a little bit of styling will line up our number nicely. This goes in your CSS somewhere:


.leaflet-div-icon {
background: transparent;
border: none;
}
.leaflet-marker-icon .number{
position: relative;
top: -37px;
font-size: 12px;
width: 25px;
text-align: center;
}

And that's it! Now we have a nice new class we can use to number things, for instance:


var marker = new L.Marker(new L.LatLng(0, 0), {
icon: new L.NumberedDivIcon({number: '1'})
});

Hopefully someone finds this useful! I'd love to see a better implementation of this make it into Leaflet master, but till then this should do nicely. Enjoy and happy mapping!

The Open-Source Experience (Pt. 4)

08/23/10 | by Comp615 [mail] | Categories: Web, Technology

My Involvement

Thus far I’ve only talked about my work with CKEditor, however back in high school I was involved with another project called ALP (Autonomous LAN Party). I found it when I was searching for LAN party software and became interested in it. When I discovered it, a first version had been developed but had since fallen into disrepair. I made a few modifications and found another guy who had made a few modifications and together we took over the project and developed it for awhile. To this day, it still (more or less) works, although the last version was released about 4 years ago.

We got to the point where we had outgrown the original slopped together version and needed to do a total rewrite. Unfortunately, the prospect of so much work and the lack of people to do it caused the project to fall apart in the planning phase. Nevertheless, all our work is publicly available and maybe someday I or someone else will pick it up and keep going.

CKEditor, just finished a rewrite and is much better off for it. Although this means it’s not totally mature yet and has a few bugs still lurking around. I encountered some of these and they were easy enough problems that I could hop right in and fix them. Thus it was quite easy for me to get involved in the project.

The hard part, however, was running the support forums (I just tried to answer a lot of posts). I ended up fielding about 7 posts a day. Some of the problems were legitimate or valid debugging things. I helped people work out their configurations and do things I had been through when I first setup the editor. On the other hand, some were face palmingly stupid questions which could have been solved by 2 minutes of effort or simply using google. I often had very little patience in these topics.

My feeling is that you should at least be able to understand the software you are using and how it works before asking questions. There were people who simply needed to find a configuration option (Which is all given on a single page on the site’s support area). They just hadn’t looked around before asking. While those cases are stressful, it’s also nice to see the people who say “oh thanks!” when they solve their problem. Those are the people who have actually worked through their problem before asking.

In any case, working on this project has given me a better understanding of the software, a better understanding of javascript, and made me feel like I’ve contributed to the project. Sure in a week I probably will never touch the project again, but that’s how it goes. Next month some new developer will have to use the software and will begin stomping bugs right where I left off.

The whole process is really an art though. There’s open-source software to manage open-source software, I.E. Trac. It’s the program almost everyone uses to “trac” bugs and manage source code. Most interestingly though is the fact that everything has to be so well thought out. Since none of the developers ever really see each other, there’s a remote code review process, standards have to be employed, and the whole project has to be well documented so that at a moments notice someone new can step in and start contributing.

It’s a fantastic process and one that I really support. If anything, it’s made me want to assemble a team to redevelop ALP. In summary I guess the open-source ideal, to me, seems to define a certain type of social norm. The tragedy of the commons doesn’t apply because even by being selfish, people will still help the project; It's impossible to use up all the open-source resources. Rather than not supporting the project, people will use the software for free and, when they themselves find bugs or make changes, will send their changes back into the commons helping future users.

Nevertheless, there are things that cost money in these projects. There is also the matter of incentive to develop. So next time you find one of these projects useful, consider sending $10 to help support it's development. After all isn't that better than having to pay hundreds of dollars for some commercial software? Support community development, choose open-source!

The Open-Source Experience (Pt. 3)

08/20/10 | by Comp615 [mail] | Categories: Web, Technology

Pros/Cons

In case you haven’t caught on to how open-source software works, we’re in the middle of a lengthy discussion about how it all works. Next stop, pros and cons. Let’s get the biggest pro out of the way. IT’S FREE. Horray. But there are, of course, some downsides too.

With commercial software, support and follow-through must be exemplary in order to maintain your customer base for future releases. However with open-source, because the software is free, the developers have very little incentive to provide technical support. The support for CKEditor was a little lackluster (non-existent), it’s also quite poorly documented. This made it very hard to figure out what I was doing wrong without digging around and debugging the code. A lot of people will opt for commercial software because it’s already been extensively tested and will (usually) function very well out-of-the-box.

CKEditor might be an exception in this regard however, since normally open source projects will document every single function. Why spend all that time writing wikis and APIs? Because the hope is that if the program is well documented, it will be easier for people to alter the software on their own and thus more contributions will come back to the program. Still, support is often the blind leading the blind.

The upside to glitches in open-source software is that they are usually fixed quickly and the software tends to have more releases than its commercial counterparts. In addition, customers usually have the option of three different types of releases. Stable, Beta, and Nightly. Stable is the equivalent of a commercial release. It's supposed to be extremely stable and polished. If, however, you want to have the newest features and bug-fixes sooner, you can opt for a beta version. These versions tend to have some kinks that still need working out, but generally function quite well. Finally, there's nightly. This is basically a copy of the source code (From the SVN, remember?) which is built automatically every night.

Even though nightly builds are supposed to be quite unstable, CKEditor usually has very good nightly packages. This is because all code changes are reviewed before they are committed, thus changes tend to work with 95% certainty as soon as they are in the code base.

Features can be another huge factor in choosing. Again though, it’s a two part problem. While commercial software might have more features initally, it’s usually easier to request new features in open-source software and to have those changes made. (Try asking Microsoft to add 16-bit support to 64-bit OS’s, I dare you).

Here’s the sticky part though. Remember way back when we talked about licensing? Well that means that any part of an open-source program can be reused (Under certain licenses). Thus Microsoft could, in theory, use some part of CKEditor for it’s own nefarious purposes, however the same is not true in reverse. Commercial companies can use these things called patents to exclude anyone else from using the software. Despite the short 10-year lifespan, this is an eternity in computer terms and effectively means that commercial applications can have features that no one else does.

In fact, this problem is most present in video codecs right now. Remember when I said that linux was 100% open-source? Well that is except for one video codec. The problem is that it’s commercial and thus doesn’t have to include its source code. This is also a problem for HTML5 video tags (New way of playing videos in browsers more or less), people cannot decide on a standard codec to use because one is commercial (and a bit better?) but one is open source. Thus, due to asymmetric information…this round goes to commercial. Nevertheless, more and more companies are starting to give back to the open-source community in various ways. So keep an eye on this tussle in the future.

I think now you can see why not everyone is using open-source software. It sometimes isn’t available, especially in niche areas where there wouldn’t be enough developers and sometimes it just doesn’t get the job done as well as commercial products. I still HIGHLY encourage you to give it a try! Take the OpenOffice challenge and try to use the free program for 6 months instead of Microsoft Office. You'll see that OpenOffice is really really good, but probably be so used to Microsoft that it will be hard to use.

Anyways, next time, we’ll get into my involvement and experiences with open-source projects.

The Open-Source Experience (Pt. 1)

08/14/10 | by Comp615 [mail] | Categories: Current Events, Web

So this week version 3.4 of CKEditor was released. CKEditor is a very popular WYSIWYG editor written in javascript. Since we use this program at our office, I spent most of the last release cycle working with CKEditor. I decided to go one step further though and fill the void of support on the forums.

Over the past month I've contributed about 10 bug findings, 15 bug patches, 2 plugins, and lots of support hours. Not all of my contributions made it into this release (Some will be in 3.5), but I wanted to take some time to reflect on my second major open-source project involvement. Especially in light of the open-source movement which is constantly growing and becoming more of a debate in the technological community as various companies "embrace" open-source practices, buy open-source companies, or use open-source software.

This will be a multi-part series about Open-Source software, its pros and cons, project life-cycle, and more! So let’s start with a bit of background.

For the uninitiated, one of the biggest trends in software development right now is the open source model. Source code is the raw programming code which produces the programs and sites you use. For example, when you look at my blog, you see HTML, you cannot however see the source code (PHP) which was used to generate this HTML. Also, when you run Word or any other program, you will not find the code which powers that program. Just the EXE.

Open-Source programs on the other hand, usually require that the program be distributed with its source code, and that the source code be kept in a publicly accessible place. So when you use CKEditor on a website, it’s shrunken down, translated and basically unreadable…but it’s easy to get the source code to make changes.

Since the raw-code is available, open-source programs are usually free to use under certain conditions. These include: 1) The source code must always be distributed, 2) The license may not be altered (It’s at the top of every file), 3) Attribution must remain, 4) It may not be used in commercial products. Since this doesn’t fit everyone, many people will offer a second type of license for commercial applications. This allows companies to pay a certain amount of money for a different license which lets them remove references to the original product and to use it in a commercial program.

For example, if I were to use CKEditor to allow you to comment on my site, that’s fine. But if I used it in the same was (for editing comments) in a Content Management System which I sold to companies, I would need a different license. Anyways, there are some core CKEditor developers who presumably use this money as their salary (Including the guy who the editor is named after).

One of the biggest sites for Open-Source software is http://www.sourceforge.net where all projects are open source (or are supposed to be). Projects here include Filezilla, eMule, Azureus, Bittorrent, 7-Zip, Audacity and more. Did you know Firefox is open source? As is the entire Linux operating system. Anyways, it’s kind of a big deal.

Well now you know a little bit of backround about what exactly an open-source project is. There is, of course, a catch which is, it’s all distributed free…and who would work for free? Well that’s something for next time.

Pages: 1 3

A collection of musings from my time at Yale along with some thoughts about my "Freshman year of life" in San Francisco.

Search

  XML Feeds

multiblog