administration mode
Pssst...Ferdy is the creator of JungleDragon, an awesome wildlife community. Visit JungleDragon

 

Calumma update 1: development workflow »

FERDY CHRISTANT - JUL 23, 2015 (11:03:34 PM)

It's been almost 2 months since I first announced my side project named Calumma. Despite the radio silence, I've been steadily progressing at it. This update is one of many to come.

First, a step back to summarize what the project is about: With project Calumma, I'm trying to kill two birds with one stone. By experimenting with new web technology, frameworks and more, I will further strengthen my web skills, which is my bread and butter. At the same time, I will do so in a way that will also benefit JungleDragon. If project Calumma succeeds, I will learn lots of new stuff whilst also designing solutions for the next version of JungleDragon. It's simply an efficient use of my time.

A rough outline of the steps and goals of this project would be:

  • Set up a development workflow
  • Create a new web front-end architecture:
    • Styleguide
    • Javascript
  • Test pages and demonstration for the front-end framework
  • Design pages: concept designs for JungleDragon V5 based on the new front-end framework

The steps are not entirely sequential. As I learn new stuff along the way, I may go back and improve previous steps. 

Anyway, it's time for the first post. The first several posts, even the majority of them, will all be about web development. If you're into that, it will be like looking over my shoulder as I learn new things and explain what worked and what didn't. I will also openly share solutions and things that may help you. I hope you find that interesting.

The topic of the first post is the development environment. It's not a terribly exciting topic, but we have to start somewhere, so let's go.

Development setup

Calumma is pretty much a static, stand-alone project where I'm the only developer. I have placed it on my LAMP server which runs on a VM, but it could have been local development, as I will not be using a lot of PHP for this one, it's a front-end project mostly. 

As a note to myself, longer term I want to try out Vagrant, which promises a very portable development setup. Or, I may finally launch my first Amazon EC2 instance. There is a free tier available, and after that reserved instances (where you pay upfront instead of per hour) look quite affordable. 

You see, one of the key points of this project is to try out new things. Regarding development, I think cloud-based development is the future. 

Folder setup

There's not much to tell about my folder setup, yet here it is:

 

It follows a pretty classic web project structure. A key point is that there is a SRC directory and an ASSETS directory. I do my editing in the SRC directory, and only there. A build process will "compile" the result into the assets directory, and only those files will actually be served.

Some web developers still have to get used to the idea of "building" a project, especially for a static project like this.  Believe me though, once you are comfortable with some of the tools, you will experience the advantage of doing so, and never look back. Let's discuss some of those tools.

SASS/Compass

I'm already quite comfortable with SASS, and had no reason to change my CSS approach for this project. So what I do is that I edit SCSS files in the SRC/SCSS directory, and then an automatic watch process detects the change, compiles it into CSS, and live reloads my browser. All the power of SASS combined with the convenience of quick direct CSS authoring, it works for me. 

There is a recent trend towards post-processing of CSS instead of pre-processing it, but it hasn't convinced me yet to switch. 

Bower: nah

One of the things I had on my list of things to learn is Bower. It's quite popular. Basically, it easily allows you to install a 3rd party dependency, for example jQuery. You can do so using a single command, and Bower will figure out where to download it, and install it in a special directory in your project. You can also easily update your dependencies with a single command.

I have given Bower a try, but it does not work for me. The thing is, Bower only installs things. Next, it is still up to you to figure out how to include those installed things in your project. But wait, there's build plugins to help with that! I tried those as well, and had very mixed results. For example, I installed an icon font using Bower, but could not automatically include it on my page, because the package definition did not support a required attribute needed for my build plugin. So now I have installed a plugin to support a tool which fails due to an incompatible package.

At this point, you start to wonder: why the hell am I going through this pain again? Just so that I do not have to go to a website, download some code and place it in my project? The tool that supposedly automates this is not taking away this "pain", it only adds more headaches. 

Or so it did for me. I may work for you if you need to manage dozens of dependencies, but in this case, Bower tries to solve a problem that actually isn't a problem, at least not in this context. So I dropped it. Lesson learned.

LiveReload

Another new thing I wanted to try was LiveReload, which is a web browser plugin that detects file changes, and will then automatically reload you open browser, Chrome in my case, where I have the extension installed. In addition to having the extension installed, you need to include it in your build process, which is based on Gulp in my case.

Auto prefixing

Another new experiment was to add auto prefixing to my development workflow. The idea is that you can write a single unprefixed CSS statement (for example border-radius), after which this plugin as part of the build process will automatically add required vendor prefixes (for example -moz-border-radius) to the CSS output. You can configure it, for example "last 2 browsers" and it will base the prefixing on that policy.

It works well, so I'm keeping it. It's easy to forget that it is running in the background though, you start to blindly rely on it, and in case it goes wrong, you may a hard time finding the problem. So far so good though, it makes my SCSS just a little more clean.

Gulp

There's a few tasks part of the build process not explained yet, but the tool binding all this together is Gulp. Less than 3 months ago I wrote about it here, and I haven't looked back since. It's now a new default in any project as it just so damn easy and powerful. Here's my entire development workflow for this project:

 

A summary of what this does:

  • The clean task clears the assets dir, since the build process will generate fresh files
  • The styles task will look for changes in the SCSS dir, compiles it into CSS, autoprefixes it, sends it to the assets dir and then reloads my browser. Note that I'm not too concerned about minification and gzipping at this point in time.
  • The scripts task looks for changes in my JS dir, next it will concatenate all JS files into a single main.js file, which is moved to the assets dir. Note that the concatenation has some order logic to it, since we want to have some files listed first, for example jQuery.
  • The default task is what happens if you would simply type "gulp" in the command line in the main project directory, in this case it will process both the styles and scripts, but only after first running "clean".
  • I never run the default task though. What I do is to start the watch task. It does the same thing as the default task, yet it does it continuously, in the background.

That's it. To start a development session, I run "gulp watch", and without a care in the world I author the SCSS and JS that I need. It's a simple, yet effective development workflow.

This concludes the part about the development setup. My main takeaways are that Gulp is still awesome, Bower isn't for me, and LiveReload and Auto prefixing are useful additions to my belt of tools. In the next post, we'll move beyond the development setup and make a start with discussing the front-end framework.

Quick check: do you enjoy behind-the-scenes posts like these?

Sri Lanka photos online »

FERDY CHRISTANT - JUL 5, 2015 (08:39:15 AM)

Each year Henriette and I try to travel to a remote country to experience and photograph wildlife. By tradition, I never share such photos at once in a giant set, instead I share them slowly, a few each day, at JungleDragon.

I share them so slowly because that way I describe them very well, but also because these photos are my "winter stock" to keep sharing on JungleDragon when I am not out there photographing.

Anyways, hereby the Sri Lanka set is complete:

Some general links regarding Sri Lanka on JungleDragon:

Finally, for the interested some sets from previous travels:

May the tradition continue :)

Introducing project Calumma »

FERDY CHRISTANT - MAY 30, 2015 (09:42:35 PM)

Hereby I am announcing a new side project, code-named "Calumma", after the chameleon genus. It is a vaguely defined project of an uncertain length and outcome, yet I still want to share its existence with you.

Project Calumma combines two goals that I am constantly after:

  • To improve myself as a web developer
  • To improve JungleDragon

Let's go into those goals a bit deeper...

Personal development

Web development, with an emphasis on front-end engineering, has been one of my passions for a long time. But it's more than that, it's also my bread. I earn a living with it. As the world of front-end engineering is facing one technological revolution after the other, I must keep up. 

The way I keep up, other than working on challenging projects at work, is to devote spare time on experimenting with new technology. Therefore, in this new side project, I will freely experiment with such technologies. I will specifically focus on development workflows, frameworks and new design techniques.

This part of the project is all about learning and personal development in my field. However, I intend to do it in a way that will also benefit JungleDragon, as well as anybody reading this blog with a technical interest.

JungleDragon

This is the part where I am trying to kill two birds with one stone. From JungleDragon V2 until V4 right now, the platform has seen an avalanche of new features. Although there is always more to wish for, I believe we have arrived at a state where we have the major parts in place.

I am happy with the result. I think it is a great site. It works quite well, is fast, has a good usability (despite a few small flaws), and looks good. I am proud of it.

Yet pride should never get in the way of further improvement. The idea I have for project Calumma is to take the learnings from experimenting with new ways (phase 1), to see if I can raise the bar for JungleDragon from good to world-class. 

There are definitely things in JungleDragon that I would have coded differently, as well as designed differently in hindsight. With project Calumma, I will freely experiment with technology and design to see what is possible.

In order to not be constrained by current choices, all of this will be developed completely separate from JungleDragon V4. JungleDragon V4 for now is going nowhere. I will obviously keep running it, managing the community, running contests and fixing bugs. Meanwhile, however, I am researching the next-gen JungleDragon in project Calumma.

The reason why I combine these two goals is because it maximizes both the efficient use of my time, as well as the output of that time, which will benefit both me and JungleDragon. Two birds, one stone.

What this will actually mean for JungleDragon is uncertain. It may mean nothing. It may mean small tweaks to current JungleDragon, it may mean JungleDragon V5. All of this depends on phase 1. The project is in a too early phase to tell.

The plan

Although some vagueness still surrounds the project, I do have a plan in place. It may be subject to change, but here's the outline of some of the steps I have in mind:

Development workflow

Recently I have been experimenting with optimizing the development workflow, using tools like gulp, bower, and more. I will further invest time in learning these tools, as it will benefit both my personal development as well as my productivity. Better tools means better output.

Front-end framework

In project Calumma, I am piecing many best practices together to arrive at a robust and powerful front-end framework. This consists of many components, for example for layout, responsive design, typography, feature detection, the list goes on and on.

This is a crucial phase of the project, as it will the base to build anything on. I will tune this framework to the point where it is very robust and flexible. 

Why? If I have an ultra powerful front-end framework, I can build almost anything. The time from idea to execution becomes shorter, and its implementation more reliable and consistent. This phase of the project will take a lot of time, and lies at the core of both my learning goal and my JungleDragon goal.

Test pages

To test my front-end framework, I will have a series of test pages, which showcase and test specific aspects of the framework. For example, there will be a page to test the grid, the typography, etc. In addition, there will be a styleguide showing all common styles and UI components in the framework. 

JungleDragon pages

After all of the previous steps, I'm going to put both my learnings and new framework to the real test. In this step I will design some crucial JungleDragon pages from scratch, such as the homepage, species page, country page, etc. This will not be on the live site, they will be static pages, using sample content.

As said, the goal is to go from good to world-class, so this one challenges both my skills and my framework. If I find the framework to be lacking, I will go back to the previous step. If I find my skills to be lacking, I will focus on learning. 

That, in a nutshell, is the goal of Calumma: to challenge myself as well as  JungleDragon's current design.

Follow-up

In this last phase of the project, I'm going to decide what to do with the results of the previous steps, and draw some conclusions. They are yet unknown. It could mean all of it was simply a good learning exercise. Or, it could mean the newly designed pages are so awesome that JungleDragon V4's front-end will be redesigned. Or anything in between those conclusions. I will obviously involve the community in getting feedback.

Status

Work on Calumma has already started, and I am progressing quite well. I am working on multiple steps in parallel. I have a basic development workflow going, I have a base version of my framework (which still needs lots of work). I also have some test pages in place, and am currently working on the styleguide. The coming weeks I expect to be absorbed by these 3 steps. They require a hefty investment in time.

As for further timing, I don't have any hard targets, other than as fast as possible within my time constraints. This is a research project with an uncertain outcome and timing. It needs time for exploration, creativity, learning and quality. It very much is a long term engagement.

Wrapping up

I'm sorry if the above sounds vague or too technical. This is only the first announcement, things will become more clear as I progress in this ambitious new side project. I am quite excited about it :)

JungleDragon 4 - Update 23 »

FERDY CHRISTANT - MAY 15, 2015 (10:40:51 AM)

JungleDragon update 23 of V4 is now live. This update brings a few small improvements at species records. We'll be using the "Red fox" species page to show the improvements:

The improvements are in the right column. First, the distribution map:

This image is automatically parsed from the corresponding Wikipedia page for the species. Not all species records have them. Usually, such an image is aided by a legend text below it. Occassionally JungleDragon has trouble in accurately parsing that legend text from the Wikipedia page, as it can come in many formats. Therefore, if there's any issue or weird characters in the legend text, it can now directly be edited by moderators on the species edit form:

A small but welcome improvement. Before, I had to directly hack this in the database, without any user interface. Up next is the taxonomy block;

The change here is that the values are now links, where before they were just text. In a way, they are the same links as shown in the breadcrumb. Here's what happens when clicking "Canidae":

All canids directly in the species browser. Nice.

The next block is the "Photographed in" block:

This lists the countries in which this particular species was photographed. Before, when clicking such a country, it would take you to the species tab of that country, showing all species of the country. A nice starting point, but maybe not what you expect. This is now changed, when clicking the country in this list, it will show you all photos of that species in that country. Here's all photos of the Red Fox taken in the Netherlands:

Finally, on the moderator panel, both total lists of species are now divided across pages. Instead of loading thousands, it now loads 240 per page. 

That's it, hope you like these improvements.

JungleDragon 4 - Update 22 »

FERDY CHRISTANT - MAY 9, 2015 (01:38:49 PM)

JungleDragon update 22 is now live. This is a small maintenance update, with the following improvements:

  • Before, there was a maximum of 3 nested comment replies, this has now been raised to 10. In addition, when you get to level 5 in the nesting or higher, it becomes more complicated to see to which comment somebody replied, this is solved by showing thin dotted lines to connect a main comment to a reply comment.
  • JungleDragon is now slightly faster due to a series of small performance improvements, mostly made possible by better compression and caching of some resources.
  • I solved a bug in the process that automatically tweets videos to JungleDragon's Twitter account.
  • Users who are inactive (not activated, suspended, banned) could still upload photos if they still had a login session. This is now fixed.

 

Continue reading...