Belighted

Platypus - Belighted developers' playground

Platypus

Belighted developers' playground

Belighted Dev’s Insider #7

Here is our last Belighted dev chat room summary proudly provided on Platypus !

See you soon !

Comments

Belighted Dev’s Insider #6 - Front-end Edition

This week, it’s a special edition of the Belighted dev chat room summary with a focus on front-end development!

CSS, Dev, HTML, JS, Web
Comments

Belighted Dev’s Insider #5

Last news in live from Belighted dev chat room !

See you next week !

Comments

WTF: Beloved JS - Javascript … What Else ?

Here are the latest trending Javascript libraries we had a look at in the last few weeks ! We just can’t wait to use them in one of our future projects !

js
Comments

Belighted Dev’s Insider #4

Here is our last Belighted dev chat room summary proudly provided on Platypus !

And finally, here is what happens on the internet while you were reading our blog !

https://s3-eu-west-1.amazonaws.com/uploads-eu.hipchat.com/34861/246507/ZTEe4cO0qcJMoHz/Internet-minute.jpg

See you soon !

Comments

WTF: MapReduce and Columnar DB’s

At Belighted, we stay in touch with the latest technologies! Even more if they relate to huge amount of data, such as companies like Facebook, Google and Amazon are used to handle.

Here is a small introduction of key points of interest if you need to enter this new world of huge, distributed, and replicated databases.

This presentation introduces two fundamental topics: MapReduce and Columnar DB’s.

Comments

Gulp & Grunt: How to Automate the Work of Front-end Developer?

http://i.imgur.com/frWoyic.jpg

This article will be split in two distinct parts: the first will be more “theoretical” and will explain the main principles of Gulp and Grunt, as well as what I prefer to use; in the second, we will show you how to build a boilerplate for your project (in both way).

As front-end developers, we are often faced in our daily work with recurring and time consuming tasks. For the sake of efficiency and comfort of work, we have listed a few things that could improve the workflow of our team:

  • Fast and automated creation of a common working environment.
  • Automation of tasks such as image compression, JS files concatenation or SASS files compilation.

To meet these needs, two tools are in competition: Grunt and Gulp.

Grunt and Gulp are two task runners that automate most tasks (compilation, test creation,…), saving time and helping us to focus on the essential: development.

Ultimately, Grunt and Gulp do exactly the same job. The communities around the two systems are quite large and modules can be found fairly easily for each of the two systems. What differentiates the two is their mode of operation.

Grunt

Grunt works on the principle of “per plugins” configuration. This means that each plugin must be independently configured and used in tasks. Here’s how a plugin is configured, with options, a source and sometimes a destination file:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
sass: {
  dist: {
    options: {
      style: 'expanded'
    },
    files: {
      'dist/assets/css/main.css': 'src/styles/main.scss',
    }
  }
},

autoprefixer: {
  dist: {
    options: {
      browsers: [
        'last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4'
      ]
    },
    src: 'dist/assets/css/main.css',
    dest: 'dist/assets/css/main.css'
  }
},

grunt.registerTask('styles', ['sass', 'autoprefixer']);

This methodology allows to configure plugins, then inject them into tasks.

  • The advantage is that each plug-in is independent of the others.

  • The downside is manipulating files between tasks. If you plan a series of tasks via plug-ins, this means that the files will be handled as many times as the number of defined tasks.

Gulp

Gulp, meanwhile, works on the principle of “per tasks” configuration. The big difference is that here we will configure and inject all the plugins we need within the task configuration:

1
2
3
4
5
6
gulp.task('sass', function() {
  return gulp.src('src/styles/main.scss')
    .pipe(sass({ style: 'compressed' }))
    .pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4'))
    .pipe(gulp.dest('dist/assets/css'))
});

The situation here is quite different: the different desired plugins are injected into the “pipe”.

  • The advantage of Gulp is that the file does not pass from one task to another, but is transformed once. This prevents handling the final files multiple times. It also use the powerful NodeJS Stream (see at the end of this article for Stream)

  • The disadvantage is that the same configuration for a task can be repeated multiple times. (If we take care of the HTML files in a different way, it is possible to have re-write the same code in multiple places)

Conclusion

Both technologies meet our needs, with the same result. The big difference is their functional approach. You may prefer to configure the entire plugins and add tasks or conversely, create jobs and inject plugins.

Next week we will dive deeper in these two technologies, with more specific examples. So stay tuned!

Here are some good articles about streams:

Thanks to @zedissime, Dominique and Gregory for the review

Comments

Belighted Dev’s Insider #3 - Front-end Edition

This week, it’s a special edition of the Belighted dev chat room summary with a focus on front-end development!

CSS, Dev, HTML, JS, Web
Comments

Belighted Dev’s Insider #2

Let’s introduce this second Belighted dev chat room summary by a touch of humour !

http://i.imgur.com/VOe71EA.png

See you soon !

Comments

Belighted Dev’s Insider

We are proud to introduce a new series of posts on this blog ! As you’ve maybe already read in a previous article, we use Hipchat internaly as communication tool on a daily basis within our team.

One of the most interesting and animated chat rooms is clearly the dev one, filled with tips and tricks, news of the latest technologies provided by our ongoing readings, … such quality information that from now on, we have decided to share these pieces of information with all of you.

And here is this first Belighted dev chat room summary:

Enjoy reading our blog and see you soon !

Comments