March 25, 2017

Looping in successive order with Async calls

Let’s first define an example problem to better understand the issue we have with normal looping: For example, we have an array of post IDs that we would fetch and then print it out on the console const ids = [1, 2, 3, 4]; for (var id of ids) { fetch(`${API_URL}/${id}`).then(() => { console.log(id, response.results); }); } The output of the above code would be different results with the same id, wherein the id printed would be the last number Read more

March 18, 2017

Easily turn your app to Progressive Web Apps through webpack plugins

If ever we wanted our WebApp available even if the user does not have any internet connection, we would need to use service workers. But the thing with service workers is that they’re not “easy” to implement. It’s a good thing though that the GoogleChrome team released a node module that would generate the service worker code for your project: sw-precache. You can use that node module in your gulp file when building/bundling your app. Read more

March 4, 2017

Responsive web designs through EQCSS

EQCSS allows us to style elements based on the element’s state. It is similar to CSS’ media queries, but with the added feature to style elements based on the element’s dimension and contents, and not just based on the browser’s width and height. This got me interested since my previous project’s longstanding issue was with how the app should look like based on a combination of two factors: The window’s size and the number of elements inside the container. Read more

February 25, 2017

Using JSON parse and stringify to clone objects

Immutability is important. The stackoverflow article that I just linked would explain why immutability is important. I am accustomed to using Immutable.js at work, but when I came across an ancient project that didn’t make sense to add a new library just for using immutable objects, I had to resort to Object.assign. But the problem with Object.assign though is that you cannot use it to modify deep properties. Take this for example: Read more

February 18, 2017

Using datasets to avoid inline arrow functions

Adding an inline anonymous/arrow function in React is not recommended due to the nature of how react behaves. The render method would always be called each time a state or property is updated, which would then create a new function if we are using inline arrow functions, and then this would force the GC (garbage collector) to clean the previous arrow function. render() { // Not good :\ return <div onClick={e => console. Read more

© Daniel Cefram 2018