Gabo Esquivel - Javascript Developer Software Developer and Technical Consultant

In-Place Editing With Contenteditable and AngularJS

In-place editing provides an easy way to let the user edit parts of a page without having to be redirected to an edit page. Instead, the user can just click around on a page an edit the elements he or she wishes to change – without reloading the page. This post shows how you can accomplish this using AngularJS and contenteditable html attribute.

This chart shows the current browser support for contenteditable. source: http://caniuse.com/#feat=contenteditable

The following directive uses contenteditable attribute and ng-model for data binding.

See the Pen Editing Page Elements with contenteditable by Gabo Esquivel (@gaboesquivel) on CodePen.

 

Node.js HTTPS and SSL Certificate for Development

HTTPS is the HTTP protocol over TLS/SSL and HTTPS is required to protect your data. It is the most popular network protocol for establishiing secure connections for exchanging documents on the internet. It is basically HTTP carried over a TCP socket, which has been secured using SSL. Transport Layer Security (TLS) and Secure Sockets Layer (SSL) are cryptographic protocols designed to provide communication security. In this post I’ll show how to create a self-signed SSL certificate and set up an express 4.0 project that uses it for local development purposes.

Self-Signed SSL Certificate

There are two kinds of certificates: those signed by a ‘Certificate Authority’, or CA, and ‘self-signed certificates’. A Certificate Authority is a trusted source for an SSL certificate, and using a certificate from a CA allows your users to be trust the identity of your website. In most cases, you would want to use a CA-signed certificate in a production environment – for testing purposes, however, a self-signed certicate will do just fine.

Reasons to Use AngularJS in Web Applications

 

 

First, a quick introduction. AngularJS is an open-source web application framework for creating single page web apps. It was created by Miško Hevery and Adam Abrons back in 2009 and it’s now maintained by Google and community.

AngularJS is built around the belief that declarative programming should be used for building user interfaces and wiring software components, while imperative programming is excellent for expressing business logic. The framework adapts and extends traditional HTML to better serve dynamic content through two-way data-binding that allows for the automatic synchronization of models and views. As a result, AngularJS de-emphasizes DOM manipulation and improves testability & performance.

AngularJS is winning the frontend framework war. There are other high quality alternatives out there, but few have gained so much developer support, they love developing with it. Even conservative companies now see Angular as an investment and they are paying for AngularJS trainings and tools. This graph of Google Search Trends shows the interest over time:

Differences Between TDD, ATDD and BDD

Test-driven development (TDD) is a technique of using automated unit tests to drive the design of software and force decoupling of dependencies. The result of using this practice is a comprehensive suite of unit tests that can be run at any time to provide feedback that the software is still working.

The concept is to “get something working now and perfect it later.” After each test, refactoring is done and then the same or a similar test is performed again. The process is iterated as many times as necessary until each unit is functioning according to the desired specifications. Test-driven development is part of a larger software design paradigm known as Extreme Programming (XP).

more on TDD

ATDD stands for Acceptance Test Driven Development, it is also less commonly designated as Storytest Driven Development (STDD). It is a technique used to bring customers into the test design process before coding has begun. It is a collaborative practice where users, testers, and developers define automated acceptance criteria. ATDD helps to ensure that all project members understand precisely what needs to be done and implemented. Failing tests provide quick feedback that the requirements are not being met. The tests are specified in business domain terms. Each feature must deliver real and measurable business value: indeed, if your feature doesn’t trace back to at least one business goal, then you should be wondering why you are implementing it in the first place.

more on ATDD

Behavior-Driven Development (BDD) combines the general techniques and principles of TDD with ideas from domain-driven design. BDD is a design activity where you build pieces of functionality incrementally guided by the expected behavior. The focus of BDD is the language and interactions used in the process of software development. Behavior-driven developers use their native language in combination with the language of Domain Driven Design to describe the purpose and benefit of their code.

A team using BDD should be able to provide a significant portion of “functional documentation” in the form of User Stories augmented with executable scenarios or examples. BDD is usually done in very English-like language helps the Domain experts to understand the implementation rather than exposing the code level tests. Its defined in a GWT format, GIVEN WHEN & THEN.

more on BDD

Differences

TDD is rather a paradigm than a process. It describes the cycle of writing a test first, and application code afterwards – followed by an optional refactoring. But it doesn’t make any statements about: Where do I begin to develop? What exactly should I test? How should tests be structured and named? .When your development is Behavior-Driven, you always start with the piece of functionality that’s most important to your user.

TDD and BDD have language differences, BDD tests are written in an english-like language.

BDD focuses on the behavioural aspect of the system unlike TDD that focuses on the implementation aspect of the system.

ATDD focuses on capturing requirements in acceptance tests and uses them to drive the development. (Does the system do what it is required to do?)

BDD is customer-focused while ATDD leans towards the developer-focused side of things like [Unit]TDD does. This allows much easier collaboration with non-techie stakeholders, than TDD.

TDD tools and techniques are usually much more techie in nature, requiring that you become familiar with the detailed object model (or in fact create the object model in the process, if doing true test-first canonical TDD). The typical non-programming executive stakeholder would be utterly lost trying to follow along with TDD.

BDD gives a clearer understanding as to what the system should do from the perspective of the developer and the customer.

TDD allows a good and robust design, still, your tests can be very far away of the users requirements. BDD is a way to ensure consistency between requirements and the developer tests.

FullStack Development Plugins for Sublime Text

Have You Sharpened Your Axe? Your text editor is the most important tool you have for software development. It is important that you take the time known it well, learn how to use the features available and customize it with extensions and snippets. Mastering your text editor pays off, it will save you a lot of time.

Here’s a list of useful plugins you may want to install if you are using Sublime Text.

Package Control

The Sublime Text package manager that makes it exceedingly simple to find, install and keep packages up-to-date. This should be the first plugin to install.

It helps discovering, installing, updating and removing packages. It features an automatic upgrader and supports GitHub, BitBucket and a full channel/repository system. It’s like apt-get for Ubuntu, pip for Python and npm for node.js.

https://sublime.wbond.net/

SublimeCodeIntel

A is a full-featured code intelligence and smart autocomplete engine for JavaScript, Mason, XBL, XUL, RHTML, SCSS, Python, HTML, Ruby, Python3, XML, XSLT, Django, HTML5, Perl, CSS, Twig, Less, Smarty, Node.js, Tcl, TemplateToolkit, PHP.

Provides the following features:

Jump to Symbol Definition – Jump to the file and line of the definition of a symbol. Imports autocomplete – Shows autocomplete with the available modules/symbols in real time. Function Call tooltips – Displays information in the status bar about the working function.

http://sublimecodeintel.github.io/SublimeCodeIntel/

Node.js Application Frameworks

Speed in software development is key for building a successful product and one of the tools that helps to deliver faster is an application framework. The app development framework provides an structure, handles repetitive tasks and alleviates the overhead associated with common activities allowing you to focus on feature development. Good frameworks will enforce good practices and code reuse (modules).

In this post I’ll list some of the most popular NodeJS frameworks and their characteristics.

Sails – Realtime MVC Framework for Node.js

An MVC web framework with a modern twist, supporting WebSockets, streams, and a data-driven API.

Sails.js is designed to mimic the MVC pattern of frameworks like Ruby on Rails, but with support for the requirements of modern apps: data-driven APIs with scalable, service-oriented architecture. It’s especially good for building chat, realtime dashboards, or multiplayer games.

Sails.js is database agnostic. Its ORM, Waterline, provides a simple data access layer that works, no matter what database you’re using. It automatically generates a RESTful JSON API for your app and provides basic security and role-based access control by default, and you can add as many custom policies as you like.

It is built on Express (for routing), EJS (for templating) and Socket.io (for cross-platform WebSockets with graceful degredation) with a convention-over-configuration philosophy, just like Ruby on Rails.

Express – Sinatra Inspired Web Development Framework for Node.js.

Express.js is minimal and flexible web application framework, providing a robust set of features for building single and multi page, and hybrid web applications.

It has a myriad of HTTP utility methods and Connect middleware at your disposal for creating a robust user-friendly API quick and easy. It also has a thin layer of features fundamental to any web application, without obscuring features that you know and love in node.js. The pluggable middleware in the framework provides a great way to add elements, such as passport.js, as you need them.

Hapi – A Rich Framework for Building Applications and Services

Hapi enables developers to focus on writing reusable application logic instead of spending time building infrastructure.

It shines with essential built-in features that your API server or webpage mostly needs. Hapi was built by Walmart labs (Spumko, Eran Hammer) and it is configuration-centric, more declarative. Pretty well battle tested by their mobile app customers.

Koa – Next Generation Framework for Node.js

Koa.js is new web framework designed by the team behind Express, which aims to be a smaller, more expressive, and more robust foundation for web applications and APIs.

Through leveraging generators Koa allows you to ditch callbacks and greatly increase error-handling. Koa does not bundle any middleware within core, and provides an elegant suite of methods that make writing servers fast and enjoyable.

There are many other NodeJS frameworks, you can find a categorized list at nodeframework.com

Get Started With Command Line and Z Shell

A quick introduction… To develop a web application tooling and workflow are very important. Taking the time to learn and master command line is not only highly recommended but it is required to make use of tools that will help you develop faster and gain more control of your workflow.

This post summarizes what you need to know to get going with command line as well sharing some personal recommendations on the setup of the command prompt on MAC OS X, but it applies to *nix as well.

What is a Shell?

The Shell is an application that offers interactive console or terminal access to a computer system. It lets you interact with applications on your computer through command line. A command-line interface (CLI) is a mechanism for interacting with a computer operating system or software by typing commands to perform specific tasks, a command-line interpreter then receives, parses, and executes the requested user command.

Most operating systems offer a command line interface, but that doesn’t mean the built-in version is best. MAC OS X comes with Terminal, however there’s a terminal emulator for Mac OS X that is more customizable and does amazing things out-of-the-box, it’s called iTerm. If you are using a windows machine I’d recommend you installing cygwin.

In order to use the command line prompt you will need to memorize commands. Start with the basic system commands, once you mastered that you’ll catch up quickly with other tools such as gulp.js.

Introduction to Gulp.js – Code Over Configuration

Automation of repetitive and critical tasks is key to develop a successful software product. Automated tasks will minimize software cost, reduce software delivery time as well as improving the product quality and reduce human error. Investing time in automating tasks will allow you to focus on developing features.

“War is of vital importance to the state; hence it is a subject of inquiry which can on no account be neglected”
– Sun Tzu, Art of War

In this post I will introduce you to Gulp.js, a javascript task runner that helps you automate your development process.

Setting Up your Web App Build System

When developing modern web applications there are critical tasks you want to automate:

  • testing: code linting, unit testing, e2e tests
  • css preprocessing ( sass, less, …)
  • optimization: concatenating and minifying css and scripts, compressing new or modified images, …
  • deploying updates to a staging or production server

There are many tools that will help you automate these tasks. Which one to choose? Grunt, Gulp, Brunch, Broccoli,…

Back in 2012 Grunt.js came out and it was quickly adopted by the community, plugins started to proliferate and it became king for task automation on the client side, playing well with Bower and Yeoman. Like many other developers I’ve been using Grunt on my projects and it gets the job done but recently I started to use Gulp, another open source project with faster build times and a Unix/Node philosophical approach to solve problems.

Gulp.js focuses on code over configuration. By harnessing the power of Node streams, it enables faster build times by avoiding the need to write temporary files to disk. This is one of the main differences with Grunt. Stream instances are basically Unix pipes. They can be readable, writable or both and are easy to reason about — you can pipe a readable stream to a writable stream by doing readableStream.pipe(writableStream).

“Streams come to us from the earliest days of unix and have proven themselves over the decades as a dependable way to compose large systems out of small components that do one thing well.
You can then plug the output of one stream to the input of another and use libraries that operate abstractly on streams to institute higher-level flow control.”

– substack

Overview of Angular Generators – April 2014

This is a short and opinionated review of the AngularJS generators on npm as of April 19th, 2014.

There are a lot of generators on npm and it’s a little hard to decide which one to use or fork, since we don’t want to reinvent the wheel. Currently the only way to compare them is to try them one by one and that’s a very time consuming task. In this post I’ll try to give you an overview of some generators I’ve explored recently hoping it will save you some time. I’ll follow Cliff Meyer’s Code Organization Categorization to describe their code structure.

Most generators still use the “Sock Drawer” directory organization, an approach that I personally avoid, it doesn’t scale well but it works for small projects. I prefer a modular structure as suggested on latest Google’s Best Practice Recommendations for Angular App Structure.

Some of the benefits of modularization are:

Encapsulation: Code, styles and tests related to specific feature will be contained on the same directory.
Context: Code lives in given context by feature. This is specially important to developers new to the application, who will find it easier to connect the dots.
Code Reusabilty: You would be able to reuse modules across projects and clients, Eg mobile and web-client could share autentication modules or resources ( models ).

Here’s a list of Angular generators and their characteristics (some of them are fullstack generators):

Developing Software in Paradise, Aka Costa Rica

Coming back to Costa Rica and enjoy my country while working on software applications is one of the best decisions I ever made. Check out these pictures I took with my phone at Playa Manzanillo, near to Santa Teresa – Mal País, a natural paradise with world class surfing that ranks among the most beautiful beaches of Costa Rica and you’ll agree is the best place to live or invest in the country.

playa-manazanillo-sunset vacas-playa-manzanillo playa-manzanillo-reef rocks-playa-manzanillo

Santa Teresa was recently awarded by Trip Advisor as the #1 highest-rated travel location in all of both Central and South America. Malpais and Montezuma both have many of the best restaurants in the entire country, since many international chefs have moved to the area. The area is also a major center of Costa Rica Yoga with over a dozen places to learn/practice and many yoga retreats and surf+yoga retreat combinations.

Elion Chin, co-founder of MoodLogic – one of the first online music recommendation systems, is leading Silicon Beach a forum for entrepreneurs & people looking to invest in, work at, advise or network with startups in Costa Rica to promote the technology talent of Costa Rica and drive the start-up culture in a fulfilling and healthy environment to deliver the best.

Silicon Beach Costa Rica