#JavaScript #VueJS #web development

A simple, real-world Vue.js directive

Vue.js is “The Progressive JavaScript Framework”. It takes inspiration from all prior art in the view library and frontend framework world, including AngularJS, React, Angular, Ember, Knockout and Polymer. In Vue (and Angular/AngularJS), a directive is a way to wrap functionality that usually applies to DOM elements. The example in Vue’s documentation is a focus directive. When running Vue.js inside of AngularJS, an issue occured whereby the AngularJS router would try to resolve normal anchors’ href on click. ...

#JavaScript #Node #productivity #web development

Using ES6 classes for Sequelize 4 models

The ES2015 or ES6 specification introduced class to JavaScript. Libraries like React went from React.createClass to class MyComponent extends React.Component, ie went from rolling their own constructor to leveraging a language built-in to convey the programmer’s intent. For a Node.js web application’s persistence layer, a few databases come to mind like MongoDB (possibly paired with mongoose), or a key-value store like Redis. To run a relational database with a Node application, Sequelize, “An easy-to-use multi SQL dialect ORM for Node. ...

#JavaScript #TypeScript #web development #developer tools

Writing an npm module with TypeScript and microbundle

For those looking to write a package and publish it to npm, TypeScript + microbundle is a low-friction way to build a high-quality library. Why TypeScript? TypeScript is a JavaScript superset that adds static types to it. Its other features also follow the ECMAScript specification (current and future) quite closely. For library authors this means you provide the consumers of your library, even those who don’t use TypeScript with more details around expected types and for some editors/IDEs that integrate with TypeScript (like Visual Studio Code) nicer auto-complete. ...

#JavaScript #design #web development

How components won the “framework wars”

React vs Angular vs Vue: Why it doesn’t matter. 2018 marks the end of JavaScript fatigue and the “framework wars” A typical frontend/JavaScript developer career usually involves some jQuery and associated plugins before moving on to React, Angular or Vue. Having experienced React, Vue and Angular, it seems they solve similar problems in a similar way. Where they differ is the setup experience and best-practices. In more ways than one, the mental model of these frameworks/libraries have converged to the component model. ...

#CSS #JavaScript #animation #web development

Animations: CSS vs JavaScript

When should you use JavaScript when you can use CSS? This post was sparked by a question I answered on Quora: Which is better to use, CSS or JS? The web frontend is built with the triumvirate of HTML, CSS and JavaScript (see “Backend code, frontend code and how they interact” for more details): HTML says what things are, CSS how they look and JavaScript does all the things the other two can’t. ...

#JavaScript #Functional Programming #Productivity

First-class and Higher Order Functions: Effective Functional JavaScript

Functions: the killer JavaScript feature we never talk about. JavaScript is a very in-demand language today. It runs in a lot of places from the browser to embedded systems and it brings a non-blocking I/O model that is faster than others for some types of applications. What really sets JavaScript apart from the rest of scripting languages is its highly functional nature. JavaScript has more in common with functional languages like Lisp or Scheme than with C or Java. ...

#JavaScript #Functional Programming #Productivity

Closures, Partial Application and Currying: Effective Functional JavaScript

Spices and other ingredients of a great curry To use JavaScript to its full potential you have to embrace its strong functional programming base. We’re going to explore some crucial and powerful functional constructs: closures, partial application and currying that make JavaScript terse yet understandable. The basics Functional programming is a programming paradigm that follows a more mathematical computation model. Let’s go through some basics to make your JavaScript more functional. ...

#Productivity #JavaScript

10 minute JavaScript: Library development in ES6 with Babel, Mocha and npm scripts

JavaScript has a thriving ecosystem of libraries delivered as packages on npm. Node has a high degree of compatibility with ES6 but it doesn’t have some features yet, namely import. This means that if we want to distribute useable packages over npm and we want to be writing ES6, we have to transpile back to ES5. We’ll be setting up a project that allows us to write ES6, and distribute it in ES5 (with Babel) and to test it with Mocha, all through npm scripts. ...