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

#dev-decoded #git #programming #Productivity

Learn git even if you don’t code

The tools we wield define us, git is the one tool all developers use Git is a ubiquitous version control tool. The way it works tightly correlates with software engineering and the mindsets of developers. It was purpose-built and designed to be used for the development of the Linux Kernel, one of the largest software projects that’s depended on by millions of developers. Your editing workflow is painful because it’s not version-controlled As part of a team, your editing workflow probably consists of sending a file back and forth for review, comment and amendments. ...

#dev-decoded #Web development #Productivity

In simple terms: code on the backend, frontend and how they interact

A look at the shifting boundaries of the web development stack This was originally posted as an answer on Quora: How do frontend code and backend code interact with each other? Let’s start with quick definitions: Frontend All things the browser can read, display and/or run. This means HTML, CSS and JavaScript. HTML (Hypertext Markup Language) tells the browser “what” content is, eg. “heading”, “paragraph”, “list”, “list item”. CSS (Cascading Style Sheets) tells the browser how to display elements eg. ...