Google Chrome DevTools Source Maps

Google Chrome DevTools is getting better and better everyday, ridiculously fast performance with their Blink and V8, and they just got better with their DevTools. What I just found out recently was, editing source code right on the Chrome DevTools using source mapping.

Source Maps

To verify is source maps is turn on, go to the setting gear icon on DevTools, and then verify the Source Maps option are checked.

Continue reading “Google Chrome DevTools Source Maps”

Simple Workflow Improvement with Sublime Text 2

Sublime Text 2 is a simple looking yet it is a very powerful editor, with the package system and keyboard shortcut, it mades writing codes fast and simpler. Here are some tips and tricks to improve our daily workflow a bit, I’m using Sublime Text 2 here because I found some plugin is not working properly on Sublime Text 3.

Install Package Control

First thing first when using Sublime Text is, install the package control. Head over to https://sublime.wbond.net/installation#st2, copy the long string and paste it into the Sublime Text console.

Continue reading “Simple Workflow Improvement with Sublime Text 2”

Creating Snippet in Visual Studio

There are times where we need to type out some skeleton codes, and if we smart enough, we copy it from existing one and change some variable, what if we can use shortcut to insert that skeleton codes, and using tab to change all the variable we needed to change?

To do this in Visual Studio (I’m using Visual Studio 2012)

Creating Snippet File

[cc lang=”xml” escaped=”true”]

<CodeSnippet Format=”1.1.0″ xmlns=”http://schemas.microsoft.com/VisualStudio/2005/CodeSnippet”&gt;

<Header>
<Title>test</Title>
<Author>Stephen Saw</Author>
<Description>Code snippet QUnit test</Description>
<SnippetTypes>
<SnippetType>Expansion</SnippetType>
</SnippetTypes>
</Header>
<Snippet>
<Declarations>
<Literal>
<ID>ClassName</ID>
<ToolTip>Class name for the testing class</ToolTip>
<Default>ClassName</Default>
</Literal>
<Literal>
<ID>FunctionName</ID>
<ToolTip>Function name for the testing funciton</ToolTip>
<Default>FunctionName</Default>
</Literal>
<Literal>
<ID>TestDescription</ID>
<ToolTip>Description for the current test</ToolTip>
<Default>TestDescription</Default>
</Literal>
<Literal>
<ID>setup</ID>
<ToolTip>Setup statement</ToolTip>
<Default>setup</Default>
</Literal>
<Literal>
<ID>execute</ID>
<ToolTip>Call the function</ToolTip>
<Default>execute</Default>
</Literal>
<Literal>
<ID>assert</ID>
<ToolTip>Assert for the test</ToolTip>
<Default>assert</Default>
</Literal>
</Declarations>
<Code Language=”JavaScript”>
test(“$ClassName$_$FunctionName$___$TestDescription$”, function () {
expect(1);

//setup
$setup$

//execute
$execute$

//assert
$assert$
});
</Code>
</Snippet>
</CodeSnippet>
[/cc]

This is the snippet for QUnit test. The key here is the Literal, we can define ‘token’ that we want Visual Studio to tab into, so that we can quick change those ‘token’.

The ID in the Literal should be matched with the one we define in the <Code>, by wrapping the text with $ sign, e.g. $ClassName$. Visual Studio will pick this up and allow us to use tab to jump into the token.

Save the xml file as *.snippet in Visual Studio’s snippet folder. E.g. C:UsersStephenDocumentsVisual Studio 2012Code SnippetsJavaScriptMy Code Snippets

On Visual Studio, the default shortcut to call the snippet is Ctrl+K, Ctrl+X, then you can select from there:Snippet Selector

Then after select the snippet:

Snippet

Then we can use tab to jump through those highlighted text and do modification, no mouse or arrow key required, we can press Esc to cancel off this anytime.

 

Installing SharePoint 2013 on Windows Server 2012 – Part 3

After installed SQL Server 2012 from part 2, is time to install SharePoint Server 2013.

Download SharePoint Server 2013 Prerequisites PowerShell Scripts

Even though SharePoint installer will install all the prerequisites via online, but I sometimes prefer that I have a copy offline, because I don’t like to waste my bandwidth to redownload the installers when I want to reinstall my SharePoint for some reason.

There are some PowerShell scripts available in TechNet download, which help us to achieve that. So, get the scripts from there and extract the zip file.

Continue reading “Installing SharePoint 2013 on Windows Server 2012 – Part 3”

Installing SharePoint 2013 on Windows Server 2012 – Part 2

After installed and configured Windows Server 2012 from part 1, is time to install SQL Server 2012.

Install SQL Server 2012

Insert the installer disc, mount the iso file or whatever, and wait for the auto run. On the SQL Server Installation Center screen, click Installation on the left side, and click New SQL Server stand-alone installation or add features to and existing installation

Continue reading “Installing SharePoint 2013 on Windows Server 2012 – Part 2”

Installing SharePoint 2013 on Windows Server 2012 – Part 1

Been working on SharePoint (not extensively) for some times now, and it’s kind of interesting and frustrating when come to setting things up properly, and I finally have chance to trial out the latest and greatest of Windows Server and SharePoint.

Prerequisites

  • Windows Server 2012
  • SQL Server 2012
  • SharePoint Server 2013 Preview

Install Windows Server 2012

This one would be the simplest of them all, boot the installer and install like Windows 7 or 8.

Continue reading “Installing SharePoint 2013 on Windows Server 2012 – Part 1”

Creating jQuery Plugin for RTE Intellisense

Was doing some proof of concept with RTE plugin like CKEditor or TinyMCE, and ended up with an interest to incorporate a text hints or intellisense for the editor.

At first I was trying to use the jQuery Autocomplete, but it tie to a input box, and RTE does not use input box, they use contenteditable DOM element like <body> inside an iframe. And I came across the amazing code editor CodeMirror that came with the amazing autocomplete feature that I was looking for, it pops up nicely where it meant to be, and performance was terrific, but I don’t want dependencies from any of CodeMirror’s code base, and reverse engineering isn’t my strength.

Continue reading “Creating jQuery Plugin for RTE Intellisense”