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.

Angular Talks Meetup #6

Written by Gareth Dunne @jsdiaries

The Foundry, Google

Angular Meetup is the first conference to be featured on this blog. It was a 2 hr Angular conference with four speakers. They discussed different features of Angular 2, highlighting the advancements from Angular 1, as well as some of its architectural patterns.

Angular Talks Meetup #6

Thursday, Nov 17, 2016, 6:15 PM

The Foundry, Google
Barrow St Dublin, IE

271 ng-members Went

On the 17th of November, we would like to welcome you back at the Foundry in Google Headquarters for another great lineup of Angular talks.Join us for the latest Angular 2 news, tips and tricks from fellow industry experts, plenty of networking opportunities, plus the chance to win a free ticket for dotJS Conference, or a license for a JetBrains p…

Check out this Meetup →


Introduction to Angular 2
Simona Cotin – Senior Software Engineer & Co-Organizer of AngularJS Dublin @simona_cotin

Simona, an ambassador of the group Women Who Code, she discussed the components of Angular 2. She focused on Input and Output decorators, used for emitting signals in Angular 2 applications to detect changes. Because Angular 2 is a reactive framework, change detection is of huge importance.

The flow of data from top to bottom is another important characteristic of Angular 2. What I found most interesting is that an Angular 2 application will have a faster initial render because it is compiled at run time. Another word for this is “ahead-of time” compilation.

She also mentioned other helpful tools such as the Angular CLI. This helps to scaffold the application by generating components, directives etc. I am currently using this CLI in my Whiskey shop application. I find it incredibly useful that I can generate 3 or 4 files in one component from just one command “ng generate component_name”.

There are many other cool commands that help with boiler plating some other aspects of the application.
To finish, she recommended using Protractor for end-to-end testing in Angular 2. You can find that here. http://www.protractortest.org/#/ 

MVC is dead!
Fabrizio Fortunato – Lead Frontend Developer at Ryanair@izifortune

Fabrizo addressed the differences in default two-way data-binding in Angular 1 and Angular 2.

It is inefficient to have constant callbacks from parent to child elements if no data needs to be reciprocated from parent to child elements. Instead, the child node can update a function that invokes methods based on the changed information.

The value of this is evident because the constant unnecessary callbacks in Angular 1 to parent elements hinder the application. This is because a one child element can be linked to multiple, ambiguous parent elements. Fabrizio also talked about how MVC is now on its way out regarding new emerging frameworks such as Angular 2.

The windowing technique  
Danilo Castro – Software Engineer at Rapid7– @daniloster

Danilo’s talk was my personal favorite, maybe because I found the content most relatable.

He focused on a window technique where the window only displays data that is inside the constrains of a specified container size. He put the question to the audience – why would you bother rendering data in a window that is not being viewed?

I found this technique intriguing and seems like such a simple way to improve performance in an Angular 2 application. The view gets restricted and recycled. Danielo showed the math formula required to calculate the limited windows that are displaying this changing information. These calculations are invoked on a scroll event in Angular 2.
See his presentation on the windowing technique here.

Building Angular 2 (from MB’s to KB’s)

Thomas Horvath – Lead Frontend Developer at Xplosion Media –@criticalpix

Thomas presented how webpack can compile our Angular 2 files and compress them into a size suitable for a production environment. In his example, his output for the Angular 2 application was reduced from 2.5mb (an unsuitable size for a typical production environment) to 150kb.

This is a significant change in the webpack module file. Possibly the most important aspect of this was webpack taking our common JavaScript code and putting it in commonJS.

This compression alone led to a significant reduction in the size of the application to be loaded in the network. Webpack also treeshakes your application to compress the size of the output. Thomas said that this is not fully functional for production environments. However when it does work, the reduction in size can reach as low as 150kb.

This event had the highest attendance of all the previous Dublin Angular events so far. I found it was very insightful to have four different perspectives on this new framework that is only really two months old.

While some of the techniques were more advanced than my current knowledge, I can see the advantages of implementing them in my Whiskey shop application, currently under development. I will be sure to feature this Whiskey shop on here soon, with the end-goal of making it open source.  Please feel free to be critical of anything I post, factually or technically. It will help getting this blog off the ground  long-term.

So feel free to  level your criticisms at me akin to folks on webdev subreddit. 🙂