Frontend Engineer

Code smith, Gamer and a Runner who loves frontend development

A "Call, apply and bind" to arms

For any Frontend developer it is very important to know these methods well. I had an interview recently where the developer who applied for the lead senior role did not know what the call(), apply() and bind() methods were, nor the differences between them. I felt bad after asking these questions since it felt like it was the dude's bane, because he probably got by without using or knowing about them. I didn't see it as a mandatory thing by knowing these, though. If there is anything I have learned doing frontend development is that you learn something new every

Continue Reading

Using Vanilla JavaScript?

If you are using Native JavaScript and doing a lot of DOM querying (which is not exactly best practice anymore). But let's say you really have to touch the dom for any reason. Here is a quick shorthand for your DOM querying. function $(element, context) { context = context ? context : document; var target = context.querySelectorAll(element); return Array.prototype.slice.call(target); } $(yourElement).yourMethod() Will simplify your code by querying the DOM intelligently. You will have a similar jQuery API. But you do not have to type a lot if you are using querySelectors often.

Continue Reading

Todo nonMVC

It's good to create things with the syntax you love. Publishing it and telling people that they should use it or get left behind is questionable, though. Addy Osmani's todoMVC is a great example to get a short taste of how each relevant framework works and performs (some are not optimised for these todo examples as well as others). This taste will allow you to sample which philosophy you believe in most if you happen to bite into the MVC cake. MVC's are a dime a dozen these days, tons with their own pro's and cons regarding how big or

Continue Reading

React example in ES2015

The thinking in React found on the react website. I have created the example files using ES2015 in combination with webpack. It's a good example to see how to program react.js using ES2015 (es6). Github repo

Continue Reading

Publish and subscribe AKA pubsub

This idea has been around for a long time in frontend development and it follows a pretty nice reactive way/style of programming by attaching/detaching listeners to a specific event. There are some word play that comes into view with the naming conventions of this pattern. Basically the concept is broken down by these keywords if I may. Think of it as a broadcasting channel being a radio or tv station(broadcasts the topic) and the modules who are viewing or listening to a specific channel will change accordingly (subscribe/view or unsubscribe). Subscribe - Once a topic has

Continue Reading

Barcelona here I come!

Some of you JavaScript peeps know that there is an awesome event that happens every year in Barcelona, called FutureJS. They still have tickets and hopefully see you there! The event will take place on September, 1–5. For more info, check out their site fullstack fest.

Continue Reading

Immutable data structures in JavaScript

First let's ask ourselves. What is immutable and why is it so important? Immutable data or objects are not mutable. They lack the ability to have their default state changed after it has been created. Ok but what does that mean really? Massive performance gains Having data or objects being immutable deliveres crazy amount of performance to any large or small data sets you are working on. By just tracking changeable elements inside of your JavaScript for instance is far less expensive to tracking everything and watching to see if anything has changed. Sharing saved data They also have the

Continue Reading

Huh? Is that even valid syntax?!

The importance of staying up to date as a Frontend engineer/developer is crucial. It is often that we encounter a piece of code and say: 'huh?', is that even valid syntax? I have found myself on that path a lot in my career because I tend to push myself to work with as many developers as possible and this has granted me a lot of knowledge on both the frontend and backend. This is a double edged sword of course since I always found myself either teaching or learning of how things can be done differently. There are

Continue Reading

Stateless functions for reusability

It's beneficial to promote code reuse in any language. Let's focus on how to do it in JavaScript and minimize the chance for bugs. The example shown below is an example of what might go wrong if we assume too much what the responsibilities from functions who are interacting with the same established objects. To improve our code and make sure that our functions create is to decouple their memory mutations to their own copy of the data instead of mutating the original. Below a demo to demonstrate. Notice in the createClassRoom "class" I have made use of the Object.

Continue Reading
JavaScript

Partial applications

It's beneficial to promote code reuse in any language. Let's focus on how to do it in JavaScript and minimize the chance for bugs. The example shown below is an example of what might go wrong if we assume too much what the responsibilities from functions who are interacting with the same established objects. To improve our code and make sure that our functions create is to decouple their memory mutations to their own copy of the data instead of mutating the original. Below a demo to demonstrate. Notice in the createClassRoom "class" I have made use of the Object.

Continue Reading