Category Archives: Experiments

Playing with ES6 (and React)

Experiments, ,

logo-reactjs

UPDATES:

For the last two years, I’ve heard a lot about ES6 : on blog posts, videos, attending at meetups … It was like I knew it already but never really used it … I felt that it was time to get my hands dirty and get on board with this new version of JavaScript – which will be the one we’ll be using in the next years – as some of you will point out : “are already using …”.

As I also wanted to try React (same : heard a lot about it just as if I knew it, but never really wrote any line of code with it). My POC’s endgoal is to do an isomorphic app (server-side rendering, same code running on client and server), for the moment, I finished the client-side part.

Checkout the demo

Using Webpack

Webpack takes your modules (and all their dependencies) then creates a bundle out of them. Since you can run multiple transformers, it will be able to handle ES6 modules, jsx, sass/scss … More infos on Webpack.

Setting up .js and .jsx transpiling (turning ES6 to ES5) using Babel was the easy part. But I also wanted sass stylesheets, with sourceMaps support and not having to require them via js (but in a regular link tag). This part of the Webpack documentation lacks informations (I don’t even know if I did it right, though, it works – as well in dev as in build prod …).

Coding in ES6

At first, it feels like you’re coding in a whole new language (at least, not in JavaScript) 😉 . Using import, export, class, extends … But after all, this is only syntactic sugar, which you would have added by yourself with your own tools or a third party library. Now it’s built-in (this may let JavaScript more accessible to Java/C like devs 😉 ).

Using React

I’ve been using Angular for a long time now. We all know its drawbacks … Some devs are even switching to React for its performances. This is why I was interested in the library (that and the server-side rendering part).

One of the good things in React is it forces you to think “Component” (not the first library to do that – a lot of them are converging towards this concept). You need to know where you’ll keep your state, which part of your app will be mutable, which one will be immutable.

Conclusion

I achieved my goal as I finished this part of my project : coding a POC in ES6, using React. You can see more of the steps on the github repository of topheman/react-es6. The next step will be to use this project to make some server-side rendering (since I used npm packages available for front and back such as superagent, I should be able to take the project “as is”).

You should try ES6, it’s fun to code with and we are seeing it more and more in libraries source code – why not in yours ?

Tophe

PS : The backend of topheman/react-es6 is based on topheman-apis-proxy, a project I made to handle my public APIs. Check it out on github if you’re interested in. I hosted it on heroku, so the VM takes about 3s to warm up when it’s asleep …

topheman-apis-proxy – access your public APIs on the same server

Experiments, , ,

As a frontend developer, when I want to try a new framework, I want to do something a little more elaborate than the todo-list that everybody has already done hundreds of times … What’s missing about that is data.

This is what topheman-apis-proxy is about : it gives you access to public APIs to get data to feed on and not have to bother about the server-side, focus on the client-side – install once, configure your credentials and you’re good to go.

You can currently access to the public APIs of Twitter and Github. I’ll add more and you’re welcome to get involved. You can configure things like CORS, access by token …

It is based on expressJS, I already use it for one of my projects.

TLDR;

If you’re a developer I assume you’ll jump right to the readme on github 😉

Tophe

topheman-apis-proxy

twitter-stream-channels

Experiments,

twitter-stream-channels

With the Twitter Stream API, you can only open one stream at a time, so if you want to track different kinds of keywords (aka channels), all the tweets in result will be mixed up and you’ll need to do some post-processing to identify which tweet belongs to which channels.

I needed that kind of feature for my next project, so I decided to make a module out of it. Feel free to use it. Some infos you might be interested in :

  • The API documentation (generated from source code with yuidoc)
  • The github repo (with the README)
  • twitter-stream-channels on npm – npm install twitter-stream-channels
  • The module has a complete built-in mock version accessible via .getMockedClass() that will let you use it without connecting to Twitter (usefull because of their connexion limit)
  • It also is unit-tested, if you want to contribute (first time I made unit-tests on node with mocked data dispatched by events – by the way, I improved test’s speed using process.nextTick instead of setTimeout in mocked mode).

I’m currently working on a project based on twitter-stream-channels that I wil release in a few weeks.

Tophe

edit : I just released the project I was talking about. More about it on this post.

Take a tour of the campuses of the International University of Paris with Topheman Street View

Experiments,

About six months ago, I released Topheman Street View, a site that will let you browse the Google streetview panoramas with your smartphone/tablet like you were inside it, just by moving your phone like a window to the world – more on this post.

Two days ago, I saw this tweet by @GautierBarbe on my timeline about the International University Campus of Paris opening their buildings to Google streetview.

@GautierBarbe - tweet

It drew my attention and tickled me … This was a perfect use case to demonstrate the benefits of PanoramaSensorsViewer (the library I made on which Topheman Street View is based).

So, you can take a tour of the different campuses on Topheman Street View by following those links :

I simply used the bookmarklet I made that is available on the home page of the Topheman Street View site in desktop mode that you can use when you’re on google maps and will let you generate a link as well as a QRCode to the panorama …

Tophe

Cone.js – my first steps on BabylonJS

Experiments,

babylonjs-first-steps-cone

It’s been a while since I wanted to try BabylonJS, but as all of you, I had some projects on the run that I wanted to finish AND release ;).

So finally, two months ago, I took the time to start a little project, only to discover the framework, with the usual tutorials like creating spheres, cubes, adding lights and camera. I even installed blender to do some 3d modelling in order to get an export (nothing extraordinary – it’s a pity, I used to be good at that, but it was ten years ago on 3dsMax …).

After the tutorials, I needed an idea to start with. About two years ago, I made a little ThreeJS project presenting one of the roller skating slalom cones I used to draw on my comic strips.

I started the project without any clue of where I was heading (the goal was to discover BabylonJS), I had in mind to make some kind of game out of it, but that was all …

I ended up making Cone.js, a class that lets you manage those 3d cones I told you about, but I did much more than I thought at the beginning :

  • extension possibilities of the Class (like the jQuery.fn)
  • methods not only available on cone instances but also on cone lists
  • animation queue management (even custom user queues)
  • tried both jsdoc and yuidoc documention generators (finally kept yuidoc)

TRY IT

Continue reading →