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