Posts

Javascript Generators -> Practical use case

Image
Hi Guys, it's been a while since I didn't write anything, but today I want to share with you something I faced today, while I was reviewing the code of one of my teammates did, I saw a "good" implementation of how to deal with a paginated endpoint. Basically he used recursion in order to iterate the pages, something like this: function handlePages(response) { const res = { data : response.data } if (response.pages.next_page) { res.next = async () => { const nextResponse = await request(response.pages.next_page) return handlePages(nextResponse) } } return res } It works! but I don't like the recursion part, because if we need to iterate it we need some extra logic: const response = await request(firstPageUrl) let page = handlePages(response) while (response.next) { // Complex logic here response = await response.next() } So far, this logic looks great, bu...

Big O Notation, explained step by step

Image
What the heck is the Big O? do we really need it? is it really helpful? Well since I started working in Unosquare, I've heard a lot of Big O and its importance so I decided to see what's the big deal about it. //It's Important Well you know that there're 2 things that can tell us how efficient a program is: Performance: This depends on the machine it is executed: memory, disk space, etc. Complexity: How many resources your program needs to run: requirements, algorithm scale, etc. Complexity of course affects the performance, but performance cannot affect the complexity, so let's create the less complex code we can, but how can we determine the complexity of our code? easy, using the Big O notation. But there are multiple types of Big O, depending on what sentence or statement you are evaluating, it could be a simple if/else block or a function , depending on that we can say it is either linear or quadratic or maybe one of the following: No...

Moving to Preact

Image
Hi Guys, It's been a while since I don't share with you cool stuff, so this is why I decided to take some time to introduce you to Preact. Basically Preact it's the same as React, it's a library which help us to manipulate the virtual DOM in the same way React does, but most important thing is that it's under the MIT license. Why is this so important? Well I don't want to make a big deal about it, but some time Ago the Apache Software Foundation made some changes to the the BSD + Patents license which is the React's license (more over is the License Facebook uses for all its projects) basically that change implies that if you compete with facebook your React (or any other facebook framework you use) your license will be terminated. You can read more about this change in this thread or this post (and this is the official announcement from Facebook which tell us that they're going to stick with their current lincense), because I don't want to ...

Use the conditionals properly in JS

Hi Guys, I know I haven't been writting too much (none I guess) I'm sorry for that, but I've been learning new stuff :D Today I want to share with you how to take advantage of the conditionals in JS, but first we need to understand how they work: //OR You might know that in JS the OR operator is represented by double pipes: || but, is it really returning a boolean value? well, the answer to that question is...NO, JS uses type conversion, it converts a type to boolean but just in certain contexts, take the following code snippet as example: Basically the OR operator seeks for a truly value from left to right, once it found it, it returns that value, if the conditional is used on a loop/conditional context, then JS will evaluate its truly value, if not, it will evaluate the real value. //AND The AND operator ( && ) it's used to evalue a truly condition, but I guess you already know that, and knowing how JS evaluates the conditionals depending on th...

TECH-COFFEE - React the right way - Theory

Hi guys, I've been working with React lately and I found it very interesting, but, what's the right way to use React? Well, I read a lot of blogs, posts, tweets, etc. and I decided to share with you my experience. But first, we need to understand React, its lifecycle, the best architectural pattern to use, etc. Understand the theory first: If you have any question or concern, please let me know :) See you guys ^_^/

Currying Nowadays - Inheritance - Javascript

//English Hi Guys! sorry I've been too busy at work. I will do my best to keep writing about how cool JS is and the things you can do ;) Now, as you could see on my previous post , currying has evolved due to Function.prototype.bind . The purpose of this post is to see another example that's practical: "Inheritance" using currying! Imagine this scenario: The world has countries, a country has people. people could either be female or male and each person has a name, in JS, you could write a function like the following: function person(country,sex, name){ return 'Hello my Name is ' + name + ', I am a ' + sex + ' and I am from ' + country; } It looks easy but It will be hard to read and to maintain: function person(country,sex, name){ return 'Hello my Name is ' + name + ', I am a ' + sex + ' and I am from ' + country; } var pedro = person( 'Mexico' , '...

Currying Nowadays - Javascript

Image
//Currying is evolving! <!-- English --> Hi guys, It's been a while since the last time I wrote, sorry  for that, anyways, today's post is about currying, if you don't know what is currying about, don't worry, take a look of my previous post (I strongly recommend you to read it if you don't know what currying is about), if you do, you can continue reading. Well it looks like you want to go on...so let´s start; When we say currying in js, you usually think in something like this: function Parent(){ return function Child(){ //Your code } } Well that´s how we used to do currying, now there´s a different way to do it, thanks to Function.prototype.bind() , let´s see how the function we have above can be easily replaced for the following code: function Parent(){ //Your code } var Child = Parent.bind( null ); NOTE: Maybe you'll be curious about the null we passed, well basically we're going to tell to th...

TECH-COFFEE - Webpack - How to set up a Dev Server

//English Hi guys, this will be my third Tech Coffee! Yay! and I want to share with you something really amazing: How to set up a Dev Server using Webpack...I really like this feature, because now, I don't need some tool like Gulp or Grunt to set up a Server with Livereload, because Webpack give us that feature too! I'm pretty excited with this, so, give it a look... //Español Hola chavos, este es mi tercer Tech Coffee! Si! y hoy quiero compartirles algo que para mi es realmente impresionante: Como setear un Sev Server usando Webpack...Yo en serio adoro esta funcionalidad, porque asi ya no necesito una herramienta como Gulp o Grunt para lanzar un servidor con el Livereload o algo asi, solo necesito Webpack...asi que, por favor chequenlo:

How to mock properly the services in AngularJS

Image
//English As you may know, there's a lot of posts about how to create unit tests in AngularJS, you can find a lot of results in Google, but after a long time working with Angular I found that those posts are incomplete! why? simple, they tell you how to test controllers but each post I read tell you to inject the needed services, this is wrong because what happen if the service is incomplete or maybe someone introduce a bug on the latest commit? then that unit test will fail and it will fail not because the functionality to test is failing, it will fail because a dependency that we can mock... Let's take this controller as example: Loading... https://gist.github.com/3672831a21169e9deac9.git As you can see, the controler will fetch the new values from the server, following the good practices that Ajax call will be stored in a factory or service, so the controller will do what a controller should do: just be the "glue" between the view and the model :) N...

NICE NODE MODULES! - Rest Facade

//English Hi guys, yesterday I was playing a little bit with a module that I saw on Twitter : Rest Facade ! Basically this module abstracts the process of consuming REST endpoints! I don't need to explain you too much about it, because its documentation is pretty much straight forward, please see below the code of the examples that I did: Loading... https://gist.github.com/92db9047ca5d8d07ae44.git As you can see, even if you don't read the documentation, you can understand pretty well the code. To see this example working, you can go to my c9 , the same code is there, you just need to run it as we normally do on node =D. NOTE : You can check the same code on my Github Well guys, if you have doubts, please let me know, I'm going to do my best to answer :) //Español Hola! ayer estuve jugando un poco con un nuevo modulo que vi en Twitter : Rest Facade ! Basicamente este modulo encapsula el proceso de consumir REST APIs La verdad es que no necesito e...

Webpack Overview

Image
//English Hi guys, since the last weeks I've been trying something different than the usual, you may know that I love gulpJS, but I found a new "task-runner": Webpack! <!-- WTF is Webpack? --> To be honest, Webpack isn't a "task-runner", It's a module bundler. What this means is that Webpack takes your src code and transforms it into one single file which has all your src code organized as you have but improving the repeating calls, requires, imports, etc. Why is this important? well the heavier your files are, the more time it takes to download and render your website. Webpack is meant to be a single module bundler for all your Web Apps. This means that you only need Webpack, not anything else, for instance: You have an SPA that needs Angular to work but instead of using purely JS, you decide to use coffeescript, then you can use gulp and create a task called: bundle-js and add the proper pipes, right? Well with Webpack, this process i...

Node JS - Error Handling

Image
//English Hi Guys, today I want to talk about the Error Handling on NodeJS, so far there's no way to handle the errors properly on Node. There are certain techniques, I'm going to touch on a couple of them in this post, but these techniques are unstable for now. But they still work, maybe in future releases Joyent will change these specifications or at least some of them. <!-- Bad way or the way we used to do it... --> Usually we catch the error on the process of our application, we do something like this: 1 2 3 process . on ( 'uncaughtException' , function ( err ){ //Let's handle the error... }) But, what are we doing wrong? We are following what Joyent says, If something unexpected happens, we should catch it and handle the error properly...The problem here is that we are catching the error at the process level, so if you have some async process running in background and one of them throws an error, it will break the entire applicati...