VSCode Extensions for React

Recently I’ve been learning how to develop user interfaces using React on VSCode. And one of the things I liked about it are the available extensions that makes development easier. Now this list contains an extension that is specific to React but the others are mostly extensions that, in my opinion, enhances the overall experience while using VSCode.

So far, here’s the list of extensions that I found very useful:

ES7 React/Redux/GraphQL/React-Native snippets

As the (lengthy) name suggests, this is a collection of ES7-compliant code snippets for React, Redux, GraphQL and React Native. Yes, I just re-stated what the name said. It basically saves a whole bunch of keystrokes which is why this is helpful when developing React UIs.

Instead of typing out import React from 'react';, I would just need to type imr then hit tab.

Instead of typing out import PropTypes from 'prop-types';, I just type in impt then hit tab.

For importing other modules like custom ones or from third-parties, instead of typing out import customModuleName from 'customModule';, I just type imp then hit tab, type in whatever is the actual name of customModule is then hit tab again to type in the corresponding customModuleNamethen another tab which brings me to the end of the line for the ;

You call it lazy, I call it productive! Potayto, potahto.

 

ESLint

This extension integrates ECMAScript (ES) standards and code linting (Lint) into VSCode. It checks your code as you type it and generates suggestions if it finds some patterns of code that does not follow the (coding) standards set.

Without being technical about it and its origin, ECMAScript is a standard that is followed by scripting languages which includes JavaScript.

Code Linting on the other hand is a type of static code analysis that finds pieces of code that does not adhere to the standards and/or is problematic from the point of view of certain coding guidelines.

There’s a wide range of configurable settings that can be fine-tuned to fit your coding style or just follow the default. What I like about this is that it give suggestions on how to fix your code and is also non-obtrusive.

eslint-href

 

Prettier – Code Formatter

This extension re-writes your code based on a specific set of (configurable) rules which then forces a consistent coding style. This actually works hand-in-hand with ESLint – at least with how I configured my VSCode settings.

Are you using tabs or spaces? What tab size are you using for JS? How about your brackets, are they inline or next line? When will we start wrapping code when a one-liner is too long?

The code re-write can be triggered manually for the whole file or for a code selection via key bindings. It can also be triggered for the whole file before committing code in your repository using pre-commit hooks or automatically upon saving the changes you made in VSCode.

 

IntelliSense for CSS Class Names in HTML

When you have bootstrap, material design, font awesome, themes and other custom styles for your UI, CSS class names can sometimes be hard to remember. With the IntelliSense for CSS Class Names in HTML extension, you get an auto-suggested class name once you start typing on the class or className attribute. It also throws in auto-completion for added laziness productivity. It caches the CSS class definitions on your workspace and on files referenced through the link element in the html header.

 

Bracket Pair Colorizer

Have you ever wasted time looking for that missing closing bracket because of your elegantly copy-pasted written code? Fear no more as Bracket Pair Colorizer …erm… colorizes your bracket pairs!

Angle brackets/chevrons requires a bit of tinkering as well as custom character brackets but works well with square brackets and round brackets/parenthesis and curly brackets/braces/handlebars/mustache. Unless of course if you are color blind… wait, I think this can be configured for that too.

 

Honorable Mentions

JavaScript Console Utils

CTRL+SHIFT+L gives you console.log();

Select a variable then CTRL+SHIFT+L gives you console.log('variable_name: ', variable_name);

CTRL+SHIFT+D removes all console.log statements in the current document.

Code Spell Checker

Because who wants to read code AND comments with wrong spelling, right? Yeah right, comments on your code. Haha.

 

 

CKEditor.Net Does Not Work Inside Multiview

I’ve written in a post a few months ago about a javascript-based lightweight WYSIWYG rich-text editor that can be used in web pages called FCKEditor. The developers have upgraded it and called it CKEditor. I tried to use it two days ago and up until now, I still cannot use it for my specific purpose. I am near the end of a project with this WYSIWYG editor as the second-to-the-last-module. I am convinced that I have encountered a bug and have yet to find a solution. I will blog about this for documentation purposes.

CKEditor + AJAX + UpdatePanel + Multiview = Problem

The bug I am encountering now appears only on when the conditions are right. I created a new AJAX-enabled website project in Visual Studio 2008 with C# as my code-behind. I downloaded the latest (as of time of writing) version of CKEditor 3.5.2 and CKEditor.Net 3.5.2 control from their website.

From Solution Explorer in VS2008, I added a BIN folder and placed the `CKEditor.NET.dll` (from CKEditor.Net 3.5.2) there. The ckeditor folder that contains the core files (from CKEditor 3.5.2) was also placed in the root of the website. I opened the Web.Config file and added the following line to the node:

<add tagPrefix="CKEditor" namespace="CKEditor.NET" assembly="CKEditor.NET" />

Then, I opened Default.aspx and add the following line:

<CKEditor:CKEditorControl runat="server" ID="tbContent1" />

So that the whole Default.aspx would look like this:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Untitled Page</title>
</head>
<body>
    <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server" />
    
</form> </body> </html>

If you try to view it by debugging it (hit CTRL+F5 while on VS2008), you should see the CKEditor.Net Control working as intended.

Now if we put the CKEditor.Net control inside an update panel, it would still work. If the update panel contains a multiview control with only one view panel and the CKEditor.Net control is inside the only view panel, it would still also work. But once the multiview control has two or more view panels and the CKEditor.Net control is on the second view panel (or any panel for that matter, as long as it is not on the default active view index of the multiview) that’s where things start to get ugly.

We can change the code of Default.aspx to:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Untitled Page</title>
</head>
<body>
    <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server" />
    
</form> </body> </html>

Notice the button on the first view panel. We’ll be using that to switch the active view index of the multiview control to the second view panel. We need to handle the OnClick event of that button so we do the whole code-behind (Default.aspx.cs) file like so:

using System;
using System.Data;
using System.Configuration;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;

public partial class _Default : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {

    }

    protected void btn_Click(object sender, EventArgs e)
    {
        //MultiView1.ActiveViewIndex = 1;
    }
}

Once we debug it again (CTRL+F5 while on VS2008), we get a button on the initial page load since the multiview’s active view index property is set to zero (ActiveViewIndex=”0″). If we click on the button, the OnClick event of the button sets the multiview’s active view index to 1 (where the CKEditor.Net contol is at). This produces a javascript error and the CKEditor.Net control is rendered as a plain textbox.

 

Line: 5
Error: Sys.ScriptLoadFailedException: The script '/CKEditorMultiview/ckeditor/ckeditor.js?t=B1GG4Z6' could not be loaded.

 

It happens on Internet Explorer 8.0.7601.17514, Google Chrome 10.0.648.151, FireFox 3.6.13 (although the javascript error does not show on GC and FF – might be a in-browser error config thing – the CKEditor.Net being rendered as a plain textbox is present on all three major browsers).

As I’ve said at the start of this post, I have not yet found a solution to this problem. If you have any information on how to fix this particular problem, kindly drop me a line at the comments. Thanks!

Loaded with projects

So I’ve been busy

Time passes by real quick these days. Being directly involved in three IT projects under my current employer which deals a lot with the Philippine Government is what’s really eating up my time. Fortunately, the first project that is a nationwide statistical performance reporting system is in the final stages of the knowledge transfer phase via trainings on the technologies used. We have conducted the .Net training and we will be doing the database training next week for maintenance purposes.

Projects that matter

That first project gave me a lot of insight as to how our clients expect their contractor (us) to handle each and every idea/suggestion/improvement that they want to see in their new system. I also learned that emphasizing the “must-haves” versus the “nice-to-haves” is a very important concept if you want to finish on time. It is essential that some nice-to-haves be pushed back and be implemented after the system’s deployment to production just to hit the deadlines. Even after the UAT and during the roll-out/training in regional offices, changes in the UI and processes have cropped up due to new business policies or the lack thereof. I can’t wait to see all of their suggestions and recommendations for the years to come due to the more-than-enough warranty period which is longer than what most multi-national software development companies are offering.

The second project is an enhancement of a system that was started by my current employer ten years ago at about the time when I was still in high school. This project was originally created using a portal development toolkit created by a software giant whose strength was in a relational database management system. In the decade that this system was up and running, its source code and database schema went through the hands of a couple of software development houses who never bothered to update the documentation or to document even only the changes that they introduced. I know this because when I asked for the latest user’s manual, I was given a copy of the manual that my employer gave a decade ago. Now that we have been contracted to fix the system up, we did more than what was needed to be done. Instead of just fixing bugs and/or customizing reports and/or normalizing tables and/or updating affected modules, we re-wrote the whole thing and at the same time upgraded it to a more relevant technology platform. We are now in the process of creating the necessary reports for departmental use before conducting the UAT. If there won’t be much changes, then the project will soon be ready for the public.

The third project is a bridge between the first and the second. The statistical performance data from the second system will be fed automatically to the first system so that the bureaus, departments, field and regional offices can focus on data analysis rather than waste their time waiting for the field reports to come in and consolidate those reports for submission to the higher management.

Startups left and right

I am also busy trying to create a company that is composed of my closest friends. This company will be used for a lot of things and not only for IT-related business ventures. It is always good to diversify your portfolio and to keep an eye out in different industries that is why this new company will be venturing in the stock market, financing, trade of goods and merchandise and as well as food and beverage. We have started to pool our resources and I have acquired the necessary documents from the SEC. We just have to finalize some details and we’ll be good to go.

A former non-IT boss has also invited me to help him start up a new business venture that primarily caters to the thriving tourism industry in the country. We have been on meetings for a number of times now and during those conceptualization meetings, the provisioning of the back-end system will be on me.

On my personal free time (yes, surprisingly I can call it that), I am slowly developing a system that utilizes the publicly available developer’s API in each different web categories such as social networks, entertainment, games, news, photo management and productivity. This system is not yet affiliated with or owned by any company and it will be a mash up of features and functionality from different popular websites which should make it a bit more interesting to see from a regular user’s point of view.

Deadlines, deadlines, deadlines

I hope to finish all projects from my employer before he first half of this year is over and to be able to establish the company with my friends before the first quarter is over because I really need to focus more on the thing that is really important to me – getting married. But I guess that would be for another blog post.

Using FCKeditor with Asp.Net

FCKeditor (now known as CKEditor) is a javascript-based lightweight WYSIWYG (What You See Is What You Get) rich-text editor that can be used in web pages. It is an open-source project created by Frederico Caldeira Knabben way back in 2003. It is designed to make the text being edited to look more-or-less the same with how it will look like when published. A good example of a WYSIWYG text editor is what you get when you compose a new email message in GMail or when you try to create a new blog post in WordPressBlogEngine. 😀

It enables the web user to experience common text editing features (that were found only on desktops once upon a time) such as changing the font colors and highlights, find and replace, spell check, set text/paragraph justification, basic styling like bold, italics and underline. 😉

Before we get started, we need to download the necessary files:

  1. Main code – actual codes for the FCKeditor
  2. Assembly for .Net – Asp.Net control for easier integration

The FCKeditor is hosted at Sourceforge.

Click on the link and download the latest version of the FCKeditor main code (fig. 1) and FCKeditor.Net control (fig. 2.). Each has their own sub folder so you may have to browse through them to get to the actual .zip file. For this example, the versions that we got are 2.6.6 for the main code and 2.6.3 for the ASP.NET control.

fig. 1. FCKeditor main code

fig. 2. FCKeditor Control for .NET

Extract/uncompress these .zip files and remember where the uncompressed files are located. For this example, let’s put them in c:FCK so that the main code will be at c:FCKFCKeditor_2.6.6 and the FCKeditor Control for .NET will be at c:FCKFCKeditor.Net_2.6.3

Integrating it with a new project

  • Create a new web site project in Visual Studio 2008. We’ll call the sample project FCKeditorSample. (Creative names as always  :)) )
  • Right-click on the web site project and add the ASP.NET folder “Bin” (fig. 3.).

fig. 3. Adding the Bin folder

  • Right-click on the Bin folder and click “Add Existing Item” then browse to where you extracted the FCKeditor Control for .NET (c:FCKFCKeditor.Net_2.6.3binRelease2.0). Select the FredCK.FCKeditorV2.dll assembly file and click the Add button (fig. 4).

fig. 4. FredCK.FCKeditorV2.dll assembly file added to Bin folder

  • Go to where you extracted the FCKeditor main code (c:FCKFCKeditor_2.6.6) then right-click and copy the “fckeditor” folder. Go back to Visual Studio and right-click on the web site project and click paste (your Solution Explorer should look something like in fig. 5.).

fig. 5. Files of the main code added (click to enlarge)

  • Before we can use the FCKeditor control, we must register it in our application. We have two options to do this: a.) per page via register directive (see listing 1) or b.) per application via Web.Config file (see listing 2). 
<%@ Register TagPrefix="FredCK.FCKeditorV2" Assembly="FredCK.FCKeditorV2" tagPrefix="FCKeditorV2" %>

listing 1. Register directive per page

 

If we are to use the per page method of registering the control, we must do so for every page the will use the FCKeditor in our application. While this works fine, maintenance becomes a problem especially if we have a lot of custom user controls. x_x

<pages>
 <controls>
  <add tagPrefix="asp" namespace="System.Web.UI" assembly="System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35"/>
  <add tagPrefix="asp" namespace="System.Web.UI.WebControls" assembly="System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35"/>
<add namespace="FredCK.FCKeditorV2" assembly="FredCK.FCKeditorV2" tagPrefix="FCKeditorV2"/>
 </controls>
</pages>

listing 2. Registering the  control in the Web.Config file

 

If we use the second option, open the Web.Config file and locate the “controls” node under configuration <system.web> pages then create the “add” node similar to line 5 in listing 2. I prefer to use this method because you only need to do it once and every page in our application can use the FCKeditor. 🙂 or any other control for that matter.

  • After registering, we can now use the FCKeditor control like any other ASP.NET control. Open Default.aspx and modify it such that the form tag looks like this:
<form id="form1" runat="server">
 
</form>

listing 3. Using the FCKeditor control

 

We also need to specify the BasePath so that we know where the main code of the FCKeditor is located. The ~ (tilde) means that we resolve the path starting from the web application’s root path. It is a much easier way of handling paths instead of “..” all over our web application. 😉

  • Hit Run and after the web browser has launched, you’ll be greeted with the default FCKeditor tool set (fig. 6). 😀

fig. 6.Using the FCKeditor in ASP.NET

8. You can access the user’s input text with formatting by using the Value property of the control (listing 4).

lbDisplayLabel.Text = FCKeditor1.Value;

listing 4. Accessing the user’s formatted input

 

I hope this helps!

And my laptop of choice is…

From two laptops to choose from, now its down to one. After much thinking and research I finally came to a conclusion as to which laptop I’ll be using for the next 2-3 years. I considered the following criteria which led me to my decision:

  • Upgrade Options
  • Purpose/Usage
  • Track Record/Reliability
  • Weight

Let me share with you my thoughts on each laptop for every criteria. 🙂

Continue reading