DEV Community: Chuks Festus

static type JavaScript

Chuks Festus — Sat, 22 Jun 2019 19:40:48 +0000

Has anyone used both flow and typescript? After trying graphql I'm sold on this whole type system and don't know which to go for. Typescript has a lot of hype though but is it really just hype or is it as great as people make it seem.

PS: I don't use vscode so saying one has a great support for it doesn't do it for me, I'm a sublime person

Using Javascript Arrow Functions

Chuks Festus — Mon, 20 Mar 2017 19:44:47 +0000

Classical JavaScript function syntax doesn’t provide for any flexibility, be that a 1 statement function or an unfortunate multi-page function. Every time you need a function you have to type out the dreaded function () {}. To me it was a serious pain especially after working with coffeescript. But thank God!! the maintainers of Javascript decided to save the day and gave us the fat arrow

Arrow functions also called “fat arrow” functions are a more concise syntax for writing function expressions. They utilize a new token, =>, that looks like a fat arrow. Arrow functions are anonymous and change the way this binds in functions.

By using arrow function we avoid having to type the function keyword, return keyword (it’s implicit in arrow functions), and curly brackets.

Using Arrow Functions

Two factors influenced the introduction of arrow functions: shorter functions and non-binding of this.

Shorter functions

Let’s compare how ES5 code with function expressions can now be written in ES6 using arrow functions.

//ES5
add = function(x, y) {
    return x + y;
}
console.log(add(1,2)); // prints 3

//ES6
add = (x,y) => x + y
console.log(add(1,2)); // prints 3

Cool huh? The arrow function example above allows a developer to accomplish the same result with fewer lines of code and approximately half of the typing. The syntax for arrow functions comes in many flavors depending upon what you are trying to accomplish, that is both the arguments and the body can take different forms depending on usage. For example, the following arrow function takes a single argument and simply returns it:

// ES6:

let arrowFunc = value => value;

// ES5:

var reflect = function(value) {
    return value;
};

When there is only one argument for an arrow function, that one argument can be used directly without any further syntax. Similarly, a function without any named arguments must use empty parentheses to start the arrow function declaration:

// ES6:

let add = () => 1 + 2;

// ES5:

let add = function() {
    return 1 + 2;
};

Non-binding of this

Until arrow functions, every new function defined its own this value, This proved to be annoying with an object-oriented style of programming. Since the value of this can change inside of a single function depending on the context in which it’s called, it’s possible to mistakenly affect one object when you meant to affect another. Consider this example:

function Person() {
  // The Person() constructor defines `this` as an instance of itself.
  this.age = 0;

  setInterval(function growUp() {

    /\* In non-strict mode, the growUp() function defines `this` 
       as the global object, which is different from the `this`
       defined by the Person() constructor.\*/

    this.age++;
  }, 1000);
}

let p = new Person();

An arrow function does not create its own this context, so this has its original meaning from the enclosing context. Thus, the following code works as expected:

function Person(){
  this.age = 0;

  setInterval(() => {
    this.age++; // |this| properly refers to the person object
  }, 1000);
}

let p = new Person();

Pitfalls of Arrow Functions

The new arrow functions bring a helpful function syntax to ECMAScript, but as with any new feature, they come with their own pitfalls and gotchas. Here are a couple things you need to watch out for when using arrow functions.

More about this

Since this is not bound in arrow functions, the methods call() or apply() can only pass in parameters. this is ignored. The value of this inside of a function simply can’t be changed–it will be the same value as when the function was called. If you need to bind to a different value, you’ll need to use a function expression.

No binding of arguments

Arrow functions do not bind an arguments object. Thus, in this example, arguments is simply a reference to the same name in the enclosing scope:

let arguments = 42;
let arr = () => arguments;

arr(); // 42

function foo() {
  let f = (i) => arguments[0] + i; // foo's implicit arguments binding
  return f(2);
}

foo(1); // 3

However using rest parameters is a good alternative to using an arguments object.

function foo() { 
  let f = (...args) => args[0]; 
  return f(2); 
}

foo(1); // 2

Constructors

Arrow functions cannot be used as constructors as other functions can. Don’t use them to create similar objects as you would with other functions. If you attempt to use new with an arrow function, it will throw an error. Arrow functions, like built-in functions (aka methods), don’t have a prototype property or other internal methods. Because constructors are generally used to create classlike objects in JavaScript, you should use the new ES6 classes instead.

Conclusion

Arrow functions are an interesting new feature in ECMAScript 6, and one of the features that is pretty solidified at this point in time. As passing functions as arguments has become more popular, having a concise syntax for defining these functions is a welcome change to the way we’ve been doing this forever. The lexical this binding solves a major painpoint for developers and has the added bonus of improving performance through JavaScript engine optimizations.

Understanding ES6 Classes

Chuks Festus — Fri, 17 Mar 2017 11:28:42 +0000

Under the hood, es6 class are not something that is radically new: they are just syntactic sugar over the prototype-based behavior delegation capabilities we’ve had all along. This does make the code more readable and lays the path forward for new Object Oriented (OO) features in the upcoming spec releases.

Defining Classes

Let’s refresh our memory and look at a typical way of wiring OO code in ES5.

function person(name, dob) {
  Object.defineProperty(this, 'name', {
    get: function() { return name; }
  });

  Object.defineProperty(this, 'dob', {
    get: function() { return dob; }
  });
}

person.prototype.toString = function() {
  return this.name + ' ' + this.dob;
}

var person = new person('Chuks Festus', 2017);

console.log(person.name); // Chuks Festus
person.name = 'John Doe';
console.log(person.toString()) // Chuks Festus 2017

Pretty simple huh? we’ve defined a peron class with two read only properties and a custom toString method. Lets do the same thing in ES6.

class person{
  constructor(name,dob){
    this.\_name= name;
    this.\_year = year;
  }
  get make() {
    return this.\_name;
  }
  get year() {
    return this.\_dob;
  }
  toString() {
    return `${this.name}${thi.dob}`
  }
}
let person =new person('chuks festus',2017);

console.log(person.name); // Chuks Festus
person.name = 'John Doe';
console.log(person.toString()) // Chuks Festus 2017

So lets try breaking it down:

Defining Classes

Just like functions, there are two ways to define a class in javascript: Class expression and class declaration

Class Declaration

To declare a class, you use the classkeyword with the name of the class

class person {}

One important thing to note here is that unlike function declarations, class declarations can’t be hoisted. You first need to declare your class and then access it, otherwise you get a ReferenceError:

let chuks = new person(); // ReferenceError

class person {}

Class expressions

A class expression is another way to define a class. Class expressions can be named or unnamed. The name given to a named class expression is local to the class’s body.

//unnamed
let person = class {
    constructor() {
    } 
}

//named 
let person = class person {
    constructor () {
    }
}

Its important to note that Class expressions also suffer from the same hoisting issues mentioned for Class declarations.

Constructor

The constructor method is a special method for creating and initializing an object created with a class. There can only be one special method with the name "constructor" in a class.

class person {
    constructor (name, dob) {
        this.name = name;
        this.dob = dob;
    }
}

Static Methods

Static methods are often used to create utility functions for an application. In ES5 it looks like a basic property on a constructor function.

function person () {}

person.compare = function (a,b) {}

And the new shiny static syntax looks like this:

class person {
    static (a,b) {}
}

Static methods are called without instantiating their class and cannot be called through a class instance.

Under the covers, JavaScript is still just adding a property to the person constructor, it just ensures that the method is in fact static. Note that you can also add static value properties.

Extending Classes

The extends keyword is used in class declarations or class expressions to create a class as a child of another class.

class person{
  constructor(name,dob){
    this name= name;
    this year = year;
  }
  make() {
    return this.\_name;
  }
  year() {
    return this.\_dob;
  }
  toString() {
    return `${this.name}${thi.dob}`
  }
}

class gender extends person { 
    male(){
        console.log(this.name + " is a dude")
    }
}

let chuks = new gender("chuks", 2017)
chuks.male()

Super class

To call a parent constructor you simply use the super keyword as a function, eg super(name, dob). For all other functions, use super as an object, eg super.toString(). Here’s what the updated example looks like:

class Gender extends person {
    toString() {
        return 'male' + super.toString();
    }
}

At this time, there isn’t any advantage to using classes over prototypes other than better syntax. However, it’s good to start developing a better practice and getting used to the new syntax. The tooling around JavaScript gets better every day and with proper class syntax you will be helping the tools help you.

Getting Started With ES6 and Babel

Chuks Festus — Tue, 14 Mar 2017 13:20:07 +0000

ES6 (also known as ES2015) is an update of the javascript language which includes many new improvements.

Over the years the javascript community has been “hacking” the language writing libraries and utilities to add useful features to the language. Prototype, jQuery, angularJs, underscore, Lodash, backbone and a galaxy of others have all helped to extend javascript’s capabilities. ES6 has incorporated many of these extensions as native features, meaning by writing modern javascript you may reduce your dependency on extra utility libraries.

Let me show you how to get started!

Install Babel with ES2015 Addon

We will start by installing the Babel CLI and a preset available as a package from NPM so we can use the new syntax addition:

npm install --save-dev babel-cli babel-preset-env

Babel has many addons for a variety of language modifications (like JSX) but this one addon is all we need to get started.

Create a .babelrc File

The small file allows us to create a preset for babel usage:

{
  "presets": ["env"]
}

At this point we have Babel installed and preferences set!

Create Your JavaScript Files!

This is where the fun part starts, will be playing around with the new syntax! Here’s a very simple code snippet with arrow functions:

((con) => {
  ['yes', 'no'].forEach((item) => {
    con.log(item);
  })
})(console);

Cool huh?!

OK, sample is created, let’s transpile it into “traditional” JavaScript for browsers that don’t yet support ES2015!

Transpile the JavaScript

With Babel in place and our JavaScript code ready for treatment, we’ll trigger the process:

./node\_modules/.bin/babel src -d dest

That command transpiles every JavaScript file in the src directory and places it within the dest directory. Our sample JavaScript file becomes:

'use strict';

(function (con) {
  ['yes', 'no'].forEach(function (item) {
    con.log(item);
  });
})(console);

There you go….you can now start using ES6!!

Understanding How CSS Calc() Works

Chuks Festus — Mon, 13 Mar 2017 14:15:15 +0000

The css3 calc() function is a native CSS way to perform simple mathematical operations property values. Being able to do math in code is nice and a welcome addition to a language that is fairly number heavy.

But is it useful? Well Instead of declaring, for example, static pixel values for an element’s width, we can use calc() to specify that the width be the result of the addition of two or more numeric values.

.example {
    width: calc(100px + 50px);
}

Can’t I Just Use Preprocessors?

All CSS Preprocessors do have math functions and they are pretty useful. If you have used CSS pre-processors like SASS then you must have come across something like this

.example\_\_one {
    width: 100px + 50px;
}

// Or using SASS variables
$width-one: 100px;
$width-two: 50px;
.example\_\_two {
    width: $width-one + $width-two;
}

The above example seems pretty cool however, the calc() function provides a better solution for two reasons. First is it’s ability to mix units. We can combine relative units such as percentages with absolute units such as pixels. Preprocessors can’t do that because It is something that has to happen at render time.

.foo {
    width: calc(100% - 3em);
}

In this example, the .foo element will always have a width that is 3em less than 100% of it's parent width.

Second, when doing mathematical expressions with CSS pre-processors, the value given to the browser is the resulting value of the expression.

// Value specified in SCSS
.foo {
    width: 150px + 50px;
}

// Compiled CSS and computed value in browser
.foo {
    width: 200px;
}

However, with calc() the value parsed by the browser is the actual calc() expression.

// Value specified in CSS
.foo {
    width: calc(100% - 50px);
}

// Computed value in browser
.foo {
    width: calc(100% - 50px);
}

What this means is that the values in the browser can be more dynamic, and adapt as the viewport changes. We can have an element with a height of the viewport minus an absolute value, and it will adapt as the viewport changes.

Using Calc()

The calc() function has four simple math operators: add (+), subtract (-), multiply (*), and divide (/). Basically the calc() CSS function can be used anywhere a , , ,, , or is required.

The calc() function can also be nested like so:

.foo {
    width: calc( 100% / calc(25px \* 8) );
}

Providing Fallbacks

For browsers that don’t support calc(), the entire property-value expression is ignored. This means that we can easily provide a fallback static value that will be used by non-supporting browsers.

.thing {   
    width: 90%; /\* fallback if needed \*/   
    width: calc(100% - 3em); 
}

Tips to becoming a better developer

Chuks Festus — Thu, 09 Mar 2017 14:43:45 +0000

A few months ago i gave a talk at Django girls Minna event, and i keep getting questions like: How did you become such a badass developer? How do i go from being a Genin to becoming a Kage…?

So this is my attempt to answer those questions. Please not am not a “kage” yet but i think over the years i have learnt a thing or two.

Always Plan your projects

what’s the plan

The most common mistake you see developers making is falling to plan, some even think its not their job. The truth is good planing helps save lots of time, reduces stress and comfortably finish on time everyday.

There are lots of awesome planning tools like trello( create a project board and cards for each of your templates and elements), writemaps, oh and the good old paper and pencil

Never stop being curious

New tools, plugins, techniques and languages are being released almost everyday, its very important you stay open to all the new things and make an effort to explore and understand them

The bad and at the same time the beauty of front-end development is that it’s moving forward very fast. This means that you can quickly become an expert but also your skills can become very quickly outdated.

You don’t need to know everything, just having a rough overview about a topic or technique is fine. You can then dive deeper into it when the right project comes along.

Invest in your skills

But isn’t that the same as being curious? NO.

You will need to invest in yourself in order to grow. I don’t mean spending money on expensive courses, seminars or books, I am more thinking about investing your time. There is no short-cut to success and researches show that it takes around 10000 hours to master a skill , that’s around 4 years practicing 40 hours a week.

Be prepared to put up with late nights exploring other websites, experimenting with a new plugins and frameworks, reading web development blogs, listening to podcasts and chewing through thousands of tweets.

Find a mentor

And i don’t mean someone you just admire and will probably never meet till you die, Find someone with more experience than you, someone who is keen to help you to grow.

A good mentor will help you:

to get advice on your project approach
to get a sense of direction
to help you foresee any potential roadblocks

Keep it Simple

Planning for the unlikely makes code unnecessarily complex. Don’t try to foresee your project’s requirements in two years from now — too many things can (and will ) change! You would waste time on an overly complex solution for a problem that proves to be different than you thought.

Keep in mind: Keeping it simple shouldn’t be confused with “quick and dirty”. You still have to work thoroughly and carefully!

Unit Testing

Every programmer has experienced something like this: you change a bit of code in one corner, and in a (seemingly) unrelated corner, something breaks! The bitter truth is: both new and changed code will inevitably contain bugs. Use automated tests that help you keep old code stable.

That’s it fellas, let me know what you think or if you think i missed something… keep slaying that code tho mighty developer

The Difference Between Web Designers and Web Developers

Chuks Festus — Tue, 07 Mar 2017 11:50:32 +0000

If you’ve ever worked in, on, with, or around the Internet, you’ve undoubtedly heard the terms “Web Designer” and “Web Developer”. Oftentimes, the two phrases are used interchangeably by someone who is not familiar with the industry. I mean — designer and developer — they’re the same thing, right? Wrong!!.

The truth, is that the term reference two fundamentally different aspects of website development and require two different unique skill sets.

Let’s face it, if you have the word “Web” in your euphemism, you’ve probably been hammered with questions from both sides of the playing field. Designers will hear things like “how can we add a database to the website?”, while developers struggle to answer questions about layout, color selection, image placement, and font styles.

Take a Closer Look at Web Design

Before we continue, one important facet of a web designer is to understand the objective of the client’s website then everything else follows. The best Web Designers are of the creative type. They have a knack for getting inside of their clients’ heads and realizing their clients’ vision.

The biggest objective of the designer is to select the right color, layout, font and images which ultimately create the whole personality of the website. Besides the user-friendly web pages a designer works on the usability of the website. Web designers create pages that the target market can relate to.

For example, if you create a website for nursery children to be designed with the help of large fonts, bright colors, graphics, less text and images. This would make the website attractive and captures the attention of the target audience.

Hence, their work relies on information flow, graphic design and color scheming and their tools of work include using languages such as HTML, CSS and Javascript.

So what about web development…

Web Developers are usually more technical in nature.

They use the design created by the design team and work on the back end to create a fully functional website. These are the people behind the smooth functioning of every element on the web page when users interact with the website. They take care of all the behind the scene works of a website.

Most of these developers will use certain coding languages in creating a website for your use, for example, the use of HTML as the front end designing language while the use of a dynamic and potent server scripting language such as PHP and MySQL for the back end of the website.