Angular 2 Upcoming Features and SemVer

WRITTEN BY GARETH DUNNE @JSDIARIES

Whats New?

January has been a fairly quiet month regarding big notable Angular news. This is partly because a lot of revelations were revealed in November and December, highlighting the version changes of Angular 3, and 4. Or more sensibly now called just plain Angular.

http://angularjs.blogspot.ie/2016/12/ok-let-me-explain-its-going-to-be.html

MIT License

As of January 11th, Angular 2 switched back to an MIT open source license framework. While this has no bearing on any technical aspect of Angular, it does reassure developers how they can extend and modify Angular without any worries.

The Google Angular team actually prefers the Apache 2 license for scaffolding the legality of an Angular 2 project, but it was understood that the wider community has a better understanding of the MIT license.

While hardly a major cause for celebration, this is still a nice example of Angular reacting to community feedback. In short, a better recognized certification says you can happily publish your Angular applications without restrictions.

You can see this license here.

Material IO

The Angular Material 2 beta has started, using the Angular CLI to install it. The beta provides high quality UI components using Angular 2 and TypeScript. These UI components are customizable within the Material Design specification. They also do not put a strain on the application by having low performance costs.

While Material Design definitely isn’t suited for everyone’s taste, its certainly nice to have the option as its neat, clean and has high usability Although, I think it limits creativity for UI designs to some extent.

In the context of an Angular 2 applications, functional design is incredibly important. If you value quick functional design over a design that has more visual fluidity and better creative processes, then you can’t go to far wrong implementing material design into it.

Heres some nice examples from the referenced sample application from the git.

material-design-sample
material-design-sample light
material-design-sample-2
material-design-sample-2
material-design-loading bars
material-design-loading bars

https://www.npmjs.com/~angular2-material

https://github.com/angular/material2

SemVer

Towards the end of December, Angular 2.4.0 became available. This was a stability injection that coincided with Angular’s new semantic versioning.

In case you missed this check it out here.

A major release cycle schedule was announced, pinpointing the exact times where Angular are planning its forthcoming major releases.

Also you can check out a video detailing Angular 4 and version plans here.

A deprecation policy was also introduced so that any major releases that contain breaking changes to the API will automatically be notified well ahead of time.

If one had to guess of what a deprecation issue would look in the next major versions, then we could probably look back to when packages such as uibootstrap or ng-dialog from Angular 1 etc weren’t fully compatible with Angular 2. Similar forthcoming breakages might be comparable to these kind of previous issues.

It will be interesting to see how this effects the Angular job market, as there is plenty of Angular 1.x roles still available and probably will be for a very long time.  In terms of maintaining projects and applications, many will still be developing on that version.

However,  more Angular 2 positions are being listed everyday so it is likely that some previous features might be deprecated. This might accelerate the process of some companies adapting some of the latter versions.

One of our goals at JSdiaries is to bring Angular 2 developers together and provide them with valuable information and news from the JavaScript world.

As we grow, we hope to implement a job board that will have listings of some open Angular positions. Hopefully, this will connect potential employers with some of the developers from the JSdiaries community.

Angular 2 – Module and Route Structures

WRITTEN BY GARETH DUNNE @JSDIARIES

In simple terms, modules are the basic building blocks of our Angular 2 application, whereas routes provide us with paths to point to specific parts of our application. These are both core to an Angular 2 application. It is important to create both with good, clean separation of concerns in mind.

Routes

A standard application has different layers of components (or functionality) that the user can navigate to. This is where our routes come into play. These routes provide url paths to direct us to these different parts of the apps functionality.

Say we are creating an application that displays a list whiskeys. When the user clicks on a whiskey in the list, we want to display a page showing the detailed information about that whiskey. That’s just one piece of the application.

How about the user wants to search for a whiskey he has previously purchased? That’s another piece of similar functionality. Because these components are closely associated with each other in terms of purpose,  it makes sense to create relevant routes in the same folder.

As a project of reference, I will be referring to my Whiskey shop application for example of the structure of its project directory. I hope to fully publish this within the next few weeks.

So for a basic application, we can just declare all these routes in our app.module.ts file (Our entry point for the application) . But what about more expansive applications with many different components to be directed to? We can then create a routing TypeScript file specific to a folder of similar components. This creates a routing system that is compartmentalized rather than declared in the one place.

For instance, say we have an actions folder containing a login, register and profile component. We can then create an  actions.routing.ts file which contains the relevant route paths.

Actions Folder Example
Action Folder Declared Roots
Actions Routing File Declared Roots

From here, we can export this routing file and include it in our App modules component.

For more detailed information on the Angular 2 router check it out here.

https://angular.io/docs/ts/latest/guide/router.html

Modules

A module provides meta data for a particular section of your application. It is then exported and can be accessed by another component by importing it. This imports/exports system is made possible through TypeScript syntax.

The process of importing classes/components into other classes and components closely resembles something from Object Oriented languages Java, C# etc.

./ in an angular import means current directory. This is obviously something you’d be aware of while making an Angular 2 application but its nice to be reminded due to the amount of time you can waste trying to get the correct directory path.
By declaring similar components in the same module you get to have a cleaner components and separated logic. You can declare all imports that are relevant to those modules.

 

So as you can see we have consolidated some of our modules into groups. Our LayoutModule and ActionsModule contains more than one referenced component.

For example our LayoutModule contains all of the following modules from our layout folder. Just to note the layout folder is just name I gave the folder in this instance and is not an Angular 2 specific structure recommendation.

Layout Folder Structure
Layout Folder Structure

The components from this layout folder (FooterComponent, HeaderComponent, NavigationComponent) were declared and exported here:

This enables our app.module.ts file to be significantly cleaner because we don’t have to declare each individual component that we have in our application.

Another advantage of these components segmented by similar functionality  is the ability to remove one from declarations if the developer wants to stop the use of certain piece of that particular functionality.

So just to reiterate we should assort all our module providers routes in RouterModule Object specific to that group.

We also no longer have to declare our routes here as we have our routes declared in our specific group components.

It is also regarded as good practice to separate your routes specific to what folders they are grouped in.

This allows you to have an Angular 2 application’s app.module file to not be overloaded with path references linking to different areas of your application. Instead, these routes will be located in a location thats relevant to the components it links to.

Our application is now nearly completely compartmentalized through the grouping of our modules and routes. Different types of functionality can now be targeted and contained within these groups.

Resources

I highly recommend this YouTube Angular Series by Lyrad Digital. The series provides some very useful information step by step, with the early videos in the series covering the best practices of routes and multiple modules.
https://www.youtube.com/watch?v=33ADKstmXqQ&t=2351s

You can also check my resources page here:

Visual Studio Code Features Part 2

WRITTEN BY GARETH DUNNE @JSDIARIES

Rich Features 

We will continue to look at more features of this wonderful text editor that is Visual Studio Code. If you missed part 1, for any god forsaken reason you can catch up here.

We will focus on some more of the nooks and crannies hidden in this source code editor

Keyboard Shortcuts

You may want have identical keybinds for indenting code as well as commenting and uncommenting etc. On Windows highlighting the desired code block to be formatted and holding the keys  Shift + Alt + F  will format your code by default.

Format Code Segment

However, if you have previous experience working in the Visual Studio IDE you may wish to change this to  Ctrl + K +. In order to do this, we can navigate to File – > Preferences -> Keyboard Shortcuts from here we can create a custom keybinding to override the default settings.

JSON Keybindings

Commenting Code Segment

Ctrl + K + C 

Uncommenting Code Segment

Ctrl + K + U 

These are just some of the most common ones that I use most often. Here is a detailed cheat sheet by Donovan Brown for many more useful shortcuts.

http://donovanbrown.com/post/visual-studio-code-keyboard-shortcut-cheat-sheet

Custom Settings

VSC allows us to change the default settings by navigating to File – > Preferences -> User Settings. This will give us a window like so:

VSC JSON Settings
VSC JSON Settings

Any changes we make in the right Window will override the default settings in the left. If we use the command Ctrl + Space  we get a full list of possible properties we can edit. This is extremely useful as this one key command provides a full list of customisable options for our text editor.

For example a useful change would be to change the property files.autoSave to “on” so that all our files are saved automatically. Simply apply this in the right window in the split editor and your files will no longer have to be manually saved.

File Auto Save

You can siphon through the intellisense options to get a feel of what you would like to change. For some handy tricks and tips there is a nice tech talk that covers all this here:

Extensions

Chrome Debug

https://github.com/Microsoft/vscode-chrome-debug

The breakpoints will be used in VS Code and you won’t have to switch back to chrome to debug. This proves quite useful as you don’t have to switch environment/context when initializes a debugging session.

In order to utilise this extension,  start Chrome with remote debugging enabled.

CSS Peek

https://marketplace.visualstudio.com/items?itemName=pranaygp.vscode-css-peek

An absolutely invaluable extension for your VSC environment. It basically allows you to go to definitions of your CSS classes from the ID’s in your HTML and vice versa. For example, if I hover over a class in my HTML file, it will display all the css that pertains to that class in a popup window.

Git History

https://marketplace.visualstudio.com/items?itemName=donjayamanne.githistory

Another useful extension to install after you’ve initialized your git repository. You can view all your previous commits in a detailed window. In VSC press F1 followed by the command

This will give an overview like so:

GIT-History Extension
Zen Mode

As of version 1.8 Microsoft introduced Zen Mode. This hides all of the UI for a more focused experience. To enable Zen mode press Ctrl + K + Z

If the full screen inhibits your ability to channel your inner Zen you can also turn that off by setting window.fullScreenZenMode like so:

VSC Zen-Mode
VSCode-Icons

https://marketplace.visualstudio.com/items?itemName=robertohuertasm.vscode-icons

Icons Extension

More of an aesthetic extension then anything else, this extension assigns each file an relevant icons beside it the file directory and in the editor top bar. It is frequently updated and the icons are of high quality.  Definitely worth your while if you wanted to add some more visual fidelity to your work space.

Color Theme

https://code.visualstudio.com/Docs/customization/themes

Color Theme Example

Not so much of an extension but its still nice to see that VSC has a live theme view enabled with some nicely polished themes already integrated.

Snippets

 VSC comes with a fully supported snippet implementation system. This will appear in the Intellisense as your typing or you can you type  F1 followed by Insert Snippet. VSC will then display various snippets relevant to language of this file that you currently have open.

Inserting Snippet
Inserting Snippet

I hope this highlighted some of the more attractive aspects of VSC as a text editor, practically and aesthetically. It is robust with options and tweaks that you can fine-tune to your own personal taste. Never have I used a text editor that had so much going for it, even without any extensions, by a country mile, it is still my text editor of choice.

Meteor.js – Meteor and Reactivity

WRITTEN BY GARETH DUNNE @JSDIARIES

Real-time Features

A lot of Meteor’s strengths hail from its reactivity and real-time capabilities. We will look in to how these work while explaining how these real-time features can integrated with an API.

Reactive Templating

Reactive or declarative templating is a style of UI construction that contrasts the imperative approach in other words declarative templating communicates to and tells the computer how to do something and as a result what you want to happen will happen. The declarative approach however tells the computer what you want to happen and lets the computer figure out how to do it. Declarative templating separates the UI state, the underlying logical situation of what the user can see, from the layout being viewed (DOM). The user declares how the rendering technology should translate the state into the visual elements of the DOM. The state is then updated and the DOM adjusts accordingly.

Declarative Template Diagram
Declarative Template Diagram

A declarative rendering framework manages its complexity with an internal model of the core state of the page and this automatically changes the UI to reflect this model. To simplify this, what you see in your user interface or HTML markup will update itself automatically when our data is changed or edited.

Instead of waiting for a hard refresh our UI will reflect what has changed. The endless possibilities and ideas for real-time applications really become apparent once the functionality of declarative template is understood. Imagine all the possible data that we can extract from from an API. For example the Twitter Stream API.

Twitter Stream API

To install this open up your cmd window with Node.js installed

The Twitter Stream API returns a JSON object full of various different components of specified user’s Twitter timeline. Each different entity is stored in its own separate array.

Each additional object key in an entity is also stored in a nested array. The application has to iterate through various layers of nested arrays to retrieve the specified key of information that is to be displayed.

Twitter Stream API JSON object
Twitter Stream API JSON object

This depicts a sample Twitter Object that would typically contain keys holding different variables of a tweet own. In the next post I will be covering more detailed methods showing how to use the Twitter Stream API.

Asynchronous Tasks

A typical Meteor.js application’s sync design is based on a singular JavaScript framework. JavaScript is usually single threaded and can only handle one event handler at a time. In a single-threaded environment, only one section of code can be running at any one time.

Single threading incurs blocking or synchronous tasks which means the system has to await a particular task to be finished and is unable to perform other tasks while waiting for it.

An asynchronous task can be initiated and then put aside while another task is executed. This is the concept behind Meteor’s synchronizing and event design.

In an application the Twitter Stream API can be used to retrieve information from Twitter timelines.

For a typical JavaScript framework the request would be made to the API and then the system would have to wait until it made a callback. This is not the case with Meteor, due to asynchronous use of the event loops. When the API makes a callback , that task can be concentrated on again. In order for this to happen JavaScript generates an additional background thread which takes care of managing the tasks of the event loop in order to prioritize the API tasks only when it has made a callback to the server.

Here is sample diagram of a the realtime sync by Toptal

Toptal sync diagram
Toptal sync diagram
Live refresh

Since Meteor is based on the Node.js framework , the server at runtime is single threaded. As a whole,  Node.js usually has more asynchronous operations, calling APIs and reading and writing files. So a basic callback can consist of up to three nested functions while more complicated operations can contain even more levels and sub-levels of other callbacks.

This may initially sound complicated., However, Meteor simplifies this by using a fiber package to deal with the way callbacks are made in this regard. The fiber package solves the issue of excess callback functions by abstracting away the asynchronicity using the Fiber sub-library called Future.

Meteor’s server automatically detects changes to any applications codebase, so pushing the new code to the clients prompts the client to reload. Even after an application has been deployed changes can occur and automatically update the applications client via hot-code pushes.

Conclusion

This post contains key fundamentals that will be used in the implementation of a typical Meteor.js application. Its good to know some of these concepts about reactivity that work under the hood of the Meteor.js architecture.

This post also reflects how a typical application will be implemented using Meteor.js and its unique isomorphic API.  It is used to structure the code and provide a dynamic reactive coding environment, giving any application that you make fluid real-time capabilities.

It will also make it easier to maintain and enhance in any future phases of an application that you have created where additional functionality might be considered. The Mongo vs Minimongo relationship that a typical Meteor.js application contains, provides a foundation to easily store any retrieved object or entity from an API. While the reactive environment allows any changes to these objects to be reflected back into the user interface instantaneously.

In the next post we will look at a more detailed implementation of the Twitter Stream API.

Angular 2 – The future of component based JavaScript Frameworks

WRITTEN BY GARETH DUNNE @JSDIARIES

What is Angular 2?

Angular 2 is the latest in the growing trend of JavaScript frameworks for creating web applications. It is not an MVC framework but rather a component based framework that has been completely re hauled and revived from Angular 1. The key differences between Angular 1 and 2 are that Angular 2 is built with mobile support, heavy use of TypeScript and the $scope to glue the view and controller has now been totally removed.

The fact that Angular 2 is mobile-orientated allows Truly Native Mobile Apps to be built with technologies usch as NativeScript or Ionic.

Am I ready to learn it?

If you are eager to learn Angular 2 and have no previous experience with Angular 1 you are in luck! These frameworks differ greatly from each other so don’t be afraid to delve straight into it. There are, of course some prerequisite knowledge that I would recommend to have.

Backend

In order to create a practical application that would simulate one already in production, it is recommended to use a database instead of simulating data. You could use Node.js and MongoDB to accomplish this. By having a backend set up and ready to interact with you are enabling yourself to work on a application that is “true to life” or so to speak.

This isn’t totally necessary if you want to play around with Angular and create an application quickly. However, you will have to do this at some point as the scope of your application gets more complex so its best to establish what you will use at the beginning.

JavaScript

A good grasp of JavaScript fundamentals will obviously put you in a good position for starting an Angular 2 application. However, the real benefit of this is for the inevitable debugging sessions you will have to endure. In this case, knowing Vanilla JavaScript is extremely beneficial as the ability to trace and understand errors from the compiled TypeScript will allow you to solve problems much quicker.

I can’t recommend this JavaScript course any more:

https://javascript30.com/

Wes Bos builds 30 practical JavaScript things and with some latest ES6 practices. All these small applications built contain no additional frameworks or boiler plate code and they really indicate how much you can do without other libraries. Extremely useful down the line when debugging/implementing an Angular 2 application.

TypeScript

And who can forgot the beautiful TypeScript. Ah, bread and butter of an Angular 2 application. TypeScript is a superset of JavaScript and it allows you to write JavaScript in a class based or object oriented style. This code is then compiled to clean JavaScript output. This is why its important to know pure JS for debugging. Its hard to find a better introduction to TypeScript than this video by .NET Interview Preparation Videos

Similarly, if you were trying to find a more cohesive way to learn the basics of Angular 2 + TypeScript I would highly recommend checking this Angular 2 development book below by Yakov Fain.

You can also find Yakov’s blog here:

https://yakovfain.com/

You can checkout his training workshop here:

http://myflex.org/courseware/Angular_training_outline.pdf

MV* or Modular Architecture

If you have ever used a Modal-View-Controller or MV* system, then you will know the importance of separation of concerns . This basically means dividing your application’s business logic, data and visual markup into separate sections that are easy to navigate .  Angular 2 uses a component based architecture that would be comparable but not identical to this.

To create an Angular 2 component in your project directory run the command

or

You will now have folder called my-new-component or whatever name you specified.  

Generating New Angular 2 Component
Generating New Angular 2 Component

This folder containers the relevant typescript and styles files created in this folder. In order for us to link this new component into our app component we have to specify it in app.module.ts directives array in the @Component meta-data. We then need to put the selector of our new components into the first-apps template property in its meta data section.

App-Module Component Declaration
App-Module Component Declaration

Getting Started

Angular CLI

In order to use npm to download the Angular CLI package and install it globally on our local machine we need to install the latest version of Node.js .

You can install from their download page here.

https://nodejs.org/en/

Once installed we can type the command:

Installing this CLI allows scaffolding for our Angular 2 applications. You can see all the various scaffolding items you can create for the CLI here.

https://github.com/angular/angular-cli

Using the command:

Your project will be created in your specified directory. It takes all configuration and prerequisite steps such as:

  • Creating our app files
  • Configuring TypeScript and Typings
  • Adding script tags for
    • Angular2
    • Rx.js
    • System.js
  • Configuring System.js
  • Creating our Angular 2 component

Using the command line interface we must also install TypeScript globally on our local machine.

We will use typescript as a subset of JavaScript in order to the define the type of member variables and class method parameters used in our application. TypeScript supports new ECMAScript standards and compiles them to older targets of your choosing (such as ES3 or ES5 . This means that you can use features of ES2015 and forthcoming  versions with our Angular 2 application.

Other Versions?

So something to really try and get your head around are these will new Angular versions.  Google has stated that all forthcoming  Angular versions will be backwards compatible with Angular 2. Will Angular 2 be irrelevant in 6 months because of forthcoming versions in Angular 3 and 4? Well this depends. Angular 4 is the next major version released, not 3. The difference between Angular 2 and 3 will not be another full core change. These new versions will now be subsequently released twice a year. So with this backwards compatibility in theory, no version will be get left deprecated from Angular 2 but we’ll just have to see how this pans out.

So while these incremented versions do cause some differences in the architecture itself. What are we supposed to call Angular as its base name if it keeps getting incremented every 6 months? This is an ongoing discussion in r/Angular2

The future of /r/Angular2 — With Angular 4 now in beta and the adoption of semver, let’s revisit the unpopular decision to name this project Angular to begin with and where to locate our future reddit home. from Angular2

 

Meteor.js Getting Started & Basic Principles

WRITTEN BY GARETH DUNNE @JSDIARIES

Previous Encounters

I first encountered Meteor.js before it had reached version 1.0. It’s site at the time looked like this.

Meteor website look before 1.0
Meteor before 1.0

Its growth in the last 2 years has been staggering. After the release of version 1.0 the site got a complete overhaul and turned into the red colored behemoth that it looks like now.

Metoer.js Installer Homepage
Metoer.js Installer Homepage
Meteor.js Community
Meteor.js Community
Why use Meteor.js
Why Meteor.js?

As jsdiaries is a similar red colored behemoth (not really) I thought I’d take time to look at Meteor.js now and highlight its key principles and foundations that it still adheres to. I hope to follow this post with a look at current state of Meteor and some of its newly added features.

Meteor.js’s seven principles

Data on the wire

Meteor doesn’t send HTML over the network. The server sends data and lets the client render it.

One Language

Only one language is used throughout the API so throughout the client and server side only

JavaScript is used everywhere. Even HTML and CSS files are translated into JavaScript for the client and server to read. This is significant when it comes to debugging an application.

Databases Everywhere

The same methods to access a database are used on the client and server side. This results in instantaneous call-backs to the data base from the client.

Latency Compensation

On the client Meteor preemptively fetches data and simulates models to appear that the server methods call return instantly.

Full Stack Reactivity

Real-time is the default in Meteor.js. All layers from the database to the template update themselves automatically when necessary.

Embrace the Ecosystem

Meteor is open source and integrates with existing open sources tools and frameworks. Additionally anything Meteor lacks can be a installed using Node.js. So instead of replacing tools and frameworks it integrates them.

Simplicity Equals Productivity

Meteor’s main functionality has clean, classically beautiful APIs. In other words the Client, Server and Database run on the one JavaScript API.

These seven principles give an element of structure to the Meteor platform. Its implementation of reactive programming enables the use of less code used overall. The platform itself is also a very initiative paradigm to create user interfaces due to its simplicity of its reactive update features.

So what exactly can we take from these principles? Well the most important thing to know is that Meteor reacts in real time because the Client and Server are in the same state and that they both only use JavaScript.

Installing Meteor.js

For Mac users open up your terminal and type:

This command single-handedly installs all of the following on a Meteor platform.

Node.js

Neccesary NPM packages

MongoDB

For Windows users simply navigate to

 https://www.meteor.com/install

And download the installer.

Among these features Meteor’s own reactive virtual DOM engine , Blaze, gets installed too. All these features being installed as well as a reactive template system already give the project some initial structure. Meteor adheres to no official files structure system. However a general consensus from Meteor users is to separate your JavaScript files into client and
server folders where each folder contains specific operations that should occur on the client or server side. At the time I began development using Meteor was not available to use on Windows machines. As of time of this writing Meteor 1.1 now fully supports Windows and MongoDB 3.0.

Nitrous

When I first started developing with Meteor.js I used a third party IDE called Nitrous. It was used for a project in order to work in an envi-environment that supports Meteor through a deployment box.  At the time Meteor did not support Windows and Nitrous was a cloud-based back end development platform. It contained an environment that replicates a Meteor directory running off a machine. It also has a web IDE and its own CMD alongside its directory.

At the time Nitrous proved to be a beneficial tool for building a Meteor.js application as it allowed the use of the applications directory across multiple platforms. However, Nitrous is now discontinued so your better off just downloading and install Meteor.js yourself through the command window or by downloading the installer for Windows but if you want to subscribe to any of their future open source projects they allow you to do so here:

https://www.nitrous.io/

Text Editors and IDE’s

There are also quite a few text editors that support Meteor.js intellisense. A developer looking for a development environment like this would be recommended to use some of the following.

 

It also comes down to personal taste such as styles of syntax highlighting, using the navigation, supported plugins etc. If you looking for an even more detailed introduction to this exciting framework you could check out either of these starter books.


In my next post we will dive into some of the more interesting parts of this framework.

Excellent Overviews of Meteor.js

Back in May of this year a post was realeased that informed of a compatibility update for Meteor 1.3 and associated study plan has been linked in one of Sascha Greif’s latest posts:

https://www.discovermeteor.com/blog/study-plan-meteor-1-3/

Latest blog updates

https://blog.meteor.com/announcing-meteor-1-4-2-rebuild-performance-a-look-ahead-5c5fab513094#.cd1j5ni0y

Bluehost and Webhosting

WRITTEN BY GARETH DUNNE @JSDIARIES

Deciding on a web host?

One of the first steps in setting up jsdiaries was to decide which web hosting service I should use. This took quite a bit of consideration and I would recommend every blog or business to choose carefully.

I had to think about current requirements as well as the future potential features of the blog. I tried using Blacknight, which I found to be too basic. Contacting their customer service proved overly complicated.

By contrast, Bluehost has a rich feature set and a great customer service team. I evaluated Bluehost critically to make sure it was the best choice for me and hopefully for you too.

Bluehost has been around for donkeys’ years, as far back as 1996. They provide an estimated 2 million domains. The accessible setup process is largely responsible for this success.

The main features offered by the budget-friendly Bluehost include:

  • Unlimited Hosting Space, File Transfer, E-mail accounts

      • cPanel Account Control Panel
      • Customizable Error Pages
      • Free Domain (for 1 year)
      • Free Site Builder with templates
      • Secure Shell, SSL, FTP, Stats
      • Web hosting PHP5
      • CGI, Ruby (RoR), Perl, PHP, MySQL
      • 99.9% Network Uptime Guarantee

With Bluehost’s package pricing you get what you pay for. I’m going to link you to the quickest way to the lowest prices package that they have here:

This low price reels you in initially, and chances are you will have to pay extra for some features down the line. But if you’re okay with that you could do a lot worse. You’re getting reasonable stability with a nice dashboard to navigate through.

Its cPanel holds all the webmaster tools, so plenty of options are available (although some of them are premium). As I said, it is easy to browse through and it is used on many different hosting services. Once you familiarise yourself with it, you can easily transfer to other web hosts later on if you decide to change.

One pitfall of Bluehost is that it does not allow you to host video-
sharing sites on a shared hosting account. You must buy a VPS or dedicated server account. So do be aware of this if you decide to take a basic package.

The one-click WordPress install is certainly a very user-friendly option. This is what a lot of people will be looking for, a simple, clean installation of WordPress. You really can’t go too far wrong here, just navigate to the control panel. Click “install wordpress” and then choose the domain to install it to.

Packages

This can be quite confusing so what are the key differences between Shared Hosting Basic Plus or Pro?

If your website really relies on some of the features offered by the Plus or Pro packages you might want to look elsewhere. More expansive features may cost you an unjust amount compared to sites like Digital Ocean or HostGator.
If you think your going to host more than one website  the Plus package is ideal for you. However, keep in mind that the Pro plan cost outweighs its competitors (who offer better deals).

Email Domains

Setting up various email domains is also well implemented into the user interface and multiple email addressed hosted on a few different webmail types are offered on even the basic packages. Horde, Squirrel, Roundcube are all offered as webmail clients on the Shared hosting package.
To access these options in Bluehost go to your cPanel

BlueHost Cpanel
BlueHost Cpanel

Then navigate to the email section.

Select “Email Manager” and you will be brought to a section where you can customize your webmail type, view your inbox and add spam protection.

Bluehost webmail client types - horde
Web mail client types

Each of these are fairly basic webmail types but they offer everything you need for your domain specific email addresses. For more advanced options, simply look for the navigation bar on the left hand side.

email-dashboard bluehost cPanel
email-dashboard
Security

Bluehost comes with half decent security tools and settings even on the most basic package. In your WordPress dashboard, you can install a free version of Jetpack. This will provide you with an overview of visitors of your site, as well as a display of malicious security threats and how many of these have been blocked.

You can also prevent spam with tools like SpamAssassin and Spam Hammer. They also support CloudFlare. This helps prevent DDoS attacks that can completely bring a site to its knees with an overwhelming amount of generated traffic from various different sources.

The wordpress plugin Jetpack offers an overview on malicious attacks on your website. You can also update to a full backup of your website as well as whitelisting your own IP address in case you get too many failed log in attempts.

Jetpack Security Tracking Overview

Bluehost does go down for maintenance on the occasion this is worth noting as it could affect you when you least expect it.

Overall

Listen, while I was doing the research for this post there seemed to be a lot of unhappy users nitpicking bluehost and insinuating that they are a bunch of web-hosting cowboys.

The reality is that they aren’t the best in many aspects but they are a decent, affordable provider and it opens up possibilities for the future of your business or blog.

When getting started with a business or blog. the main thing that you should be concerned with is  getting your website or content out there for immediate effect.

Bluehost allows you to do this incredibly quickly, which in itself is quite valuable. Despite some limitations, there is always the option to upgrade a feature down the line. And in terms of value, simply put – get what you pay for.

Resources

D3.js – Data Visualization Goodness Part 1

WRITTEN BY GARETH DUNNE @JSDIARIES

D3.js– Data Driven Documents

I started using D3.js over two years ago now. At the time it didn’t really seem all that interesting but it actually captivated me by depicting how statistics and charts don’t have to be static but actually dynamic and visually pleasing.

D3.js is a library that allows you to do just that.

Please note if your looking for libraries with more 3d based capabilities please check out

Three.js

or

WebGL

 If you wanted a quick summary of what it helps you do.  Well, it allows you to customize your own graphs and make switches between data sets dynamically using animations or transitions.

Dynamically changing graphs will allow the user to see the data changing without having to refresh the page (A cornerstone of nearly all JS libraries at this stage) . The developer can use these data visualization techniques  to highlight a particular section of information.

The first learning resource that I used for D3.js was Scott Murray’s series of chunk sized tutorials to pull you in gradually into the foundations of the library .

I found them quite useful and gave me an insightful when I started to learn D3.js. It is a very good simple analysis and breakdown of the fundamentals.

They focus on creating charts such as scatterplots, bar charts, scales and axes’s and also teaching how to transition between datasets in these graphs. The tutorial is broken down into understandable segments so that each section is very manageable for someone to learn.

And if you found them useful then I’d also recommended getting his book if you wanted to show him support.

Learning D3.js Data Structures and Syntax

The syntax of D3.js is very similar to JQuery however arbitrary sets of nodes called selections can be used to rewrite loops. The adaptability of these selections mean that D3.js can iterate through JSON arrays for further manipulation of that data for forming its graphs.

Scott Murray’s D3 tutorials are used to give a steady introduction to D3.js. These tutorials allowed a basic grasp on all D3 concepts and serve as a more than adequate insight on how some of the fundamentals of d3 could be applied to a project.

Similar to JQuery to select an element from the DOM we use a .select accessor rather than the $ sign. From here we then create a paragraph element and append it to our initial selection

This will select the body element from the DOM. From here we then create a paragraph element and append it to our initial selection. 

Each dot in-between each d3 selection represents D3’s chain syntax. The dot just concatenates each selection or property to the next.

D3 allows iteration through arrays and data sets with ease. It will accept any form of data in an array and allows for multiple types of external data. 

Out of the many different external data types JSON is the preferable type to meet the aims of a typical application.

The svg.selectAll(”rect”) selects all rectangle objects on the screen. At this point the rectangles do not exist; instead the selection is of rectangle placeholder elements.

This is a key fundamental of D3 that confuses initial learners. The array dataset is then placed inside the d3 .data() function in order to apply the dataset to the rectangle selection.

However while the data is now specified no rectangles have been created yet. The .enter() selection takes our data set specified in the .data() function and passes to the placeholder rectangle elements that were created upon the initial selection.

This tutorial enables the user to come to terms with D3 syntax in an accessible and simplified way.
From a dataset depicted like so each index can be accessed individually.

For example:

This would access the first index value of population returning 20000. Using this information it is clear how adaptable this would when implementing JSON into a graph.

To iterate through our data array and return every population value we must use return it using D3.’s . data() function.

This is due to d3 auto incrementing the value of i without the user having to specify it themselves. Although this is very common using for each loops in Razor, PHP etc its good to remind those we are just getting to terms with D3.js and aren’t coming from any other programming backgrounds.

This is a very basic overview of D3.js and what value it can provide to those wanting to create zestful, dynamic and most of all non-monotonous depictions of statistics. Unlike other Data Visualization libraries D3.js is not laborious or a chore to configure. And while it isn’t exactly new it still provides a powerful niche for data visualization. I’ll be sure to cover it more in depth in another post very soon.

Creating a blog and building a brand as a software developer.

WRITTEN BY GARETH DUNNE @JSDIARIES

Software Developer’s Identity

In order to build a reputation as a software developer consistent blog posts are essential to build an identity. This is the main reason I have started jsdiaries.

Although I have to admit, this is something that I originally couldn’t comprehend. How will building a blog boost my career in software development?  Well providing useful information not only benefits readers of your blog but also gives the blogger the opportunity to learn by teaching.  The more content researched the more likely it is that you have learned more and built a stronger brand in the process.

This is my intention with this blog – to provide consistent content on the latest technologies focused on but not limited to JavaScript frontend libraries. I hope to bring the reader’s attention to some useful tools and news along the way and to also publish development updates from my own personal projects.

This plan I have created for jsdiaries came from following John Somez’s How to Create a Blog to Boost Your Career course.

His email course provides the stepping stones for a developer to create a blog like this. His course takes place over 3 weeks and an email with information on how to create a blog for software development is sent every Monday and Thursday. If you want to sign up just click below.

How to Create a Blog That Boosts Your Career

The emails are very direct and concise on how to create a platform like this to build a brand and identity. The most impressive byproduct of this course is that software developers that are in the exact same position with their blog can network together and support the growth of each other. John has enabled this by featuring all the bloggers that finish his email course on his website Simple Programmer linked below.

Home

Its a simple but effective way of boosting his own reputation while simultaneously helping to grow the careers of other developers.

I also hope to bring on guest bloggers to collaborate and create guest posts. I would hope this would broaden the perspective on some topics and get some more in depth technical and practical posts on latest JS technologies. I hope to feature Angular 2 and Vue.js in my upcoming content. Although this is a Javascript focused blog sometimes a JS library will be combined and featured with other languages such as C#.  This is to create a broader focus on how some JS libraries are used with some other Object Oriented languages.  New content will be featured every Sunday/Monday so be sure to check it out and comment and the blog will be sure to expand with features such as email subscriptions.

Visual Studio Code Features Part 1

WRITTEN BY GARETH DUNNE @JSDIARIES

Visual Studio Code

In the last year Visual Studio Code has been constantly improving and its becoming more renown in the software development community. Coming from someone who originally used Sublime I now only use Visual Studio Code ,this is mainly because of a more diverse implementation of its own Intellisense features for languages such as TypeScript (which is is also what Visual Studio Code is written in) .

By pressing Ctrl+Space we are able to we access a huge list of member accessors/methods that you would otherwise not be aware of or that you might have to look up.

Intellisense Visual Studio
Visual Studio Code Intellisense

This saves you time and shows you description/explanation of the parameters or method accessers without disengaging you from your work environment. Some Intellisense features are not included in Visual Studio by default.

Although Visual Studio Code supports most languages out of the box you can usually find your desired language by searching for it in the extensions tab and then finding the support link on their detail page.

In comparison to other text editors such as Sublime, Brackets and Atom, Visual Studio Code has brought some core functionality from its full IDE counterpart. It brings much of this useful functionality and removes some of the more obscure features that would go unused by most day to day developers.

It is also available on Mac and Linux so non Windows users are now able incorporate a stripped down version of Visual Studio in their operating system. Lets run through some of these features included in the most recent version as of the publishing date of this post. The Microsoft devs are also kind enough to give us new monthly versions of Visual Studio Code with new features every month or so.


Syntax and Appearance

If you are looking for a font with a bit more pop in Visual Studio Code you could do worse than:

https://github.com/tonsky/FiraCode#terminal-support.

fira-code symbols
fira-code symbols

 

This add on gives your dev environment some pretty nice icons and symbols which enable your attractive code to be more attractive. It’s a winwin situation.

On a more serious note this may in fact actually increase your productivity, if your eyes are scanning across a code base, symbols and operators might stand out as more defined if they are in contrast to everything else beside it so this one is definitely worth a shot. On a more personal note I prefer the default VSC syntax highlighting over other editors such as Sublime.

I just think that every function, parameter, data annotation, keywords etc are suitably highlighted with an appropriate color, especially the dark theme. In contrast to this I thought the sublime color schemes were quite bright, neon and flashy although I was a big fan of the material design theme for it.

Check it out here.

https://github.com/equinusocio/material-theme

Material Design
Material Design Theme Sublime

 

Debugging

Visual Studio Code comes with full debugging support to view your code being compiled step by step or at certain specified breakpoints if you so choose. Go to the extensions tab and search for any debugging type extensions. These extensions can be specific to languages such as C# or Node.js.

VIsual Studio Code Debugging
debugging-extensions

When an extension like this installed VSC is given an debug adapter which defines a debug type. When debugging begins VSC looks up that adapter based on its type and launches the exe as a separate process. This is how the debugging begins.

To start the process we should navigate to the debugging tools by clicking the fourth option in our Visual Studio Code sidebar. This will bring you the debug screen like so:

By assigning a configuration and launch the debugging you should see your launch.json file. This contains all the attributes for your debugging session. You can also view which properties are available by using VSC Intellisense ctrl + space.

Intellisense debug json properties
Intellisense debug json properties

VSC has implemented a extensive but user friendly debugging interface. If you have any experience of debugging in its big brother IDE or have even just debugged with Java, C# in other environments they aren’t world apart. VSC debugging features highlight its rich array of options in comparison to other text editors.

At the moment I use VSC debugging capabilities to debug Typescript through VSC and Chrome for an Angular 2 application. For more information on debugging TypeScript check out this blog post from one of the Microsoft devs.

Jaime Tarquino https://blogs.msdn.microsoft.com/jtarquino/2016/01/24/debugging-typescript-in-visual-studio-code-and-chrome/

The ability to debug in a IDE like environment opens up a lot of opportunities for developers as previously using languages like C# in a text editor was unheard of because of the lack of debugging options. For more detailed instructions on debugging in Visual Studio Code check out the official documentation here: https://code.visualstudio.com/Docs/editor/debugging

Git

Visual Studio Code allows you to link your Git repository with relative ease. It is the 3rd option in the user friendly navigation bar on the left hand side of the editor.

 

Initialize Git Repository
Initialize Git Repository

The button initializes the init () function Git command It will add all your files into your repository. As someone who is more used to using Visual Studio IDE’s team sharing services, having GIT implemented seamlessly into the user interface is incredibly useful and appreciated.

The notifications on what files are available to check in/commit to your local repository is an insightful tool-tip. You can later full push your changes to your GIT account from your local repository. By clicking the icon with the 3 small circle in a horizontal line we get access to full list of Git commands

 

Visual Studio Git Commands
git-available-commands

 

Sidenote

If you have ever tried to use the snipping tools to capture a internal menu but it kept disappearing every time you clicked new than fear not. When you are trying to make some sort of documentation and have the snipping tool open just press CTRL + Fn + PrntScrn. This will activate the snipping tool and you capture your snip from there with the menu in screen. This is an old but relevant tip for the creation of any documentation or blog post. Kudos to Micheal Greene for reminding of this :

https://blogs.technet.microsoft.com/migreene/2007/05/12/how-to-use-the-snipping-tool-to-capture-context-menus/

Context menu in Visual Studio Code with a snipping tool.
Contextual menu in VSC

 

So these are some of the main points of Visual Studio Code that I thought I should share. I’ll be sure to cover each subsequent version released to see what new features are being implemented. But it is a fine looking editor both practically and aesthetically and I find my self more accustomed to this dev environment as I siphon through my code (Angular 2 / TypeScript at the moment). If you have any thoughts or contradictions where VSC falls compared to another editor be sure to mention it down below.