#JavaScript #Node #Docker

Setting up Express and Redis with Docker compose

Redis and Express are tools that provide a simple and clean approach to their problem domains. The repo is available at: https://github.com/HugoDF/express-redis-docker. Redis is “an open source, in-memory data structure store, used as a database, cache and message broker”. It’s as simple and unopinionated as a database as it gets, it’s known for its performance and simplicity as a key-value store. It has great flexibility and can also be used as a message queue, circular buffer (and pretty much anything else a developer can come up with short of a relational database). ...

#VueJS #testing #JavaScript

From AngularJS to Vue.js, CommonJS and Jest

The trials and tribulations of kicking off an AngularJS -> Vue.js migration AngularJS was pretty groundbreaking. It’s still impressive to this day, packed with a router, an HTTP client, a dependency injection system and a bunch of other things I haven’t necessarily had the pleasure of dealing with. It also wraps most browser APIs as injectable services, that’s pretty cool. The downside is that it’s complicated: services, filters, injectors, directives, controllers, apps, components. ...

#git #web development #productivity

Split an existing git commit

One of git’s main differences when compared to other version control systems is that it lets the user rewrite the history. The main way to do this is to use git rebase, usually followed by a git push --force to overwrite history the remote with the local history. Here’s a look at how to split existing commits using rebase, reset and commit. Say you have two files edited in a commit (A and B) and you would like to get the changes from one of those files (A) into your current branch but not those from the other (B). ...

#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. ...