Category Archives: Tools and Programs

Anything to do with using programs and tools for developing applications.

Enter VSCode on Windows

* Updated (04/09/2019)

Hi I have been a fan of sublime text for a while now. But also tried different IDE available in the community. Recently been trying ATOM, but it seems a little laggy at times. Anyways here are my top shortcuts I used for Visual Studio Code editor:

Most Used shortcuts (Default)
[ctrl + `] Opening terminal console
[ctrl + d] Select next occurence [ctrl + u] deselect back
[ctrl + f2] Select all occurence
[ctrl + k ctrl + c] Add line comment
[alt + shift + a ] Adds a multi-line comment
[ctrl + p] Open command palette and find files quick
[ctrl + shift + f ] Find text in files
[ctrl + shift + \ ] Go to matching bracket
[alt + shift + down or up] Duplicate line down or up
[alt + shift + left or right ] Shrink or grow selection on brackets

Extra
If you use the keybindings below and disabled the closing of windows shortcut ctrl+w and ctrl+shift+w , another extra shortcut I used are:

 alt +  [    – Jumps to matching bracket “{}”
 alt + ]     – Jumps to matching tag “<tag></tag>”
 ctrl + w  – Selection grow inside brackets
 ctrl + shift + w – Selection grow inside tags.

Secondary Shortcuts
[ ctrl + , ] Open settings for configurations
[ctrl +  “[” or “]” ] Moves your current line via tab
[ alt + arrow left or right ] Go back and forward
[ F12 or CTRL + F2  or ALT F12 ] Go to definition and implementation, peek definition
[ F8 ] Go to the next error
[ ctrl + alt + up or down ] Add a cursor for multiple editions
[ctrl + k + s ] Open keyboard shortcut

Tips:
* Disable ctrl + w and ctrl + shift + w – these closes the current window and application which is really annoying and we can really use the shortcut combination.

Life quality plugins
Auto Rename Tag: Lets you rename your opening and closing tag simultaneously.

Bracket Pair Colorizer: Makes it easy to see where those bracket ends in your code.

Highlight Matching Tag: You can visually see the highlighted tag both open and closing tag.

Beautify by hookyqr: Nothing like easily format your JS/HTML/CSS in one fell swoop of the keyboard.

Technology Helpers
ReactJS Code Snippets: Easily create React code snippet for eg: rcc, gives you building boy of a react component. Redux snippet is also included.

Cordova Tools: If you are developing with Apache Cordova , this one is a must have.

WordPress Snippet: When working on snippets theres nothing like having a code hinter, snippets and auto-completion at hand.

Configuration Settings

Use this in your settings.json file.

{ “files.autoSave”: “off”, “editor.tabSize”: 2, “editor.detectIndentation”: false, “breadcrumbs.enabled”: true, “explorer.confirmDragAndDrop”: false, “explorer.confirmDelete”: false, “emmet.triggerExpansionOnTab”: true, “emmet.includeLanguages”: { “php”: “html” }, “emmet.showSuggestionsAsSnippets”: true, “editor.snippetSuggestions”: “top”, “window.zoomLevel”: 0, “typescript.tsserver.log”: “verbose”, “javascript.updateImportsOnFileMove.enabled”: “always”}

Use this in your keybinding.json file

[ { “key”: “ctrl+shift+u”, “command”: “editor.action.transformToUppercase”, “when”: “editorTextFocus” }, { “key”: “ctrl+shift+l”, “command”: “editor.action.transformToLowercase”, “when”: “editorTextFocus” }, { “key”: “ctrl+shift+alt+l”, “command”: “editor.action.selectHighlights”, “when”: “editorFocus” }, { “key”: “ctrl+shift+l”, “command”: “-editor.action.selectHighlights”, “when”: “editorFocus” }, { “key”: “shift+alt+right”, “command”: “-editor.action.smartSelect.grow”, “when”: “editorTextFocus” }, { “key”: “ctrl+w”, “command”: “editor.action.smartSelect.grow”, “when”: “editorTextFocus” }, { “key”: “ctrl+shift+w”, “command”: “editor.emmet.action.balanceOut” }, { “key”: “alt+]”, “command”: “editor.emmet.action.matchTag” }, { “key”: “alt+[“, “command”: “editor.action.jumpToBracket”, “when”: “editorTextFocus” }, { “key”: “ctrl+shift+\\”, “command”: “-editor.action.jumpToBracket”, “when”: “editorTextFocus” },]

WebStorm/PHPStorm Useful Shortcuts

I have decided to try WebStorm and PhpStorm by JetBrains. I assumed these 2 editors have similar shortcut functionality. Here are my most used shortcuts when developing. This is for my reference only and of course anyone who would like to use this reference, feel free to do so.

Ctrl + click to go the function or variable definition.
Ctrl + Y – Deletes a line
Alt + F12 – Opens command line
Alt + J – Go through all same selected words
Alt + left and right – To go through opened documents left or right
Ctrl + W – selection grow and select inside tags and braces
Ctrl + Alt + Right | Navigate forward
Ctrl + Alt + Left | Navigate back
Ctrl + Shift + Backspace | Navigate to last edit location
Ctrl + Alt + T – on selected can be wrap with tag or anything.
Ctrl + ] / [   – Move to code block end/start
Ctrl + N | Go to class
Ctrl + Shift + N | Go to file
Alt + Drag to block select and put your caret or selection in multiple places.
Shift + Shift – looks for files, action and search everywhere, very useful

Visual Studio: Useful Shortcuts

General:
Ctrl+Shift+ B  | Build the project
Ctrl + Shift + ] – to select inside bracket you are currently on
Ctrl + – | Ctrl + Shift + – | Navigate backwards and forward
Ctrl+K then Ctrl+C | Comment selected or cursor
Ctrl+K then Ctrl+U | Uncomment selected or on the cursor
Ctrl+K then Ctrl+F | Format and beautify selected code
Ctrl+L | Delete a line or selected
Ctrl+U | Changes the selected text to lowercase characters
Ctrl+Shift+U | Changes the selected text to uppercase characters
Ctrl + W | Selects the word near the cursor or highlighted one
Ctrl+Tab | Change active document among the open ones.
Ctrl+Shift + Space | Show tool tip for parameter function.

Sublime Text 3 – shortcuts and tips!

Sublime Text Shortcuts

– Ctrl + Shift K , Deletes the current line
– Ctrl + C, copy the selected text or line if there is no selection.
– Ctrl K+B , Shows left side bar
– Ctrl + space, brings down list of variables, classes, resource name etc.
– Ctrl + P, brings command palette window to search for files and jump to lines using “:[line number]”
– Ctrl + Alt + J , from one matching brackets to the next
– Ctrl + [ or ] , to indent right and left
– Ctrl + Shift + D , duplicate line at the bottom
– Ctrl + / , to comment a line straight away
– Ctrl + shift + /, to select bits you want to block comment
———————————————————————————
Selection
– Ctrl + D , selects a word, ctrl + d again selects the next matching word
– Ctrl + L , selects the current line
– Ctrl + Shift M, selects content inside the bracket
– Ctrl + Shift A, selects content inside tag
– Ctrl + Shift + Arrow left or right while word is selected to select more selection in that direction
– Alt + f3 – while you have word selected,to highlight all matching word and edit all occurence
– Wrap selected content with a tag then press Alt + Shift + W

Additional Tips

Ctrl + shift + ‘ Selects a tag and change the opening and closing tag at once. Require: Emmet plug-in
Ctrl + shift + c ,open color picker
Open current file in browser preview: Go to Key bindings -> User
[{“keys”: [“f12” or any key surrounded by quotes], “command”: “open_in_browser”}]

Useful Plugins
Bracket Hilights – highlights selected open and close tag

Difference between Forward and Inverse Kinematics for dummies

Like me I always known what Inverse Kinematics is specially when doing 3d Rigging, so whats the opposite of that.The forward kinematics of course.

Lets go with Inverse kinematics, its something to do with joints, for example our arms and legs, they bend in one direction, it could be on any other direction for say a robotic arm. But what makes it bend? When you do push ups, a force is being applied on your hand, making the joints in your arm bends in a certain direction. Its called affectors , a force that affects certain part of an object. The whole idea of is called Inverse Kinematics in simple terms.

Forward kinematics is easy, think of 90 degree angle lines, think of yourself holding a 1kilo barbel, we normally just lifts it with our forearm, down and up. Also our legs when you kick a soccer ball, when you lift your whole arm up in the air. These movements is termed forward kinematics the force is being applied from the joint. Robotics make use of these terms, and while character rigging in 3ds max you can find them as well.

So just a little snippet so my little self dont forget.

XForm Modifier 3ds Max – for dumb dumb like me

Well Ive been trying to demistify the use of XForm I mean so what If the mesh scales, rotates, moves different in what it says in the parameter panel.

Actually XForm modifier is useful when you dont get the desired effect you want. Especially when it comes to scaling your object, a bunch of wacky result could show up for example a bend modifier when applied and when you try to scale the height. It will look wonky.