Category Archives: Uncategorized

Lets Docker up!: Chapter 1

I havent been really gotten into dockering much. Although I used on my wordpress development stuff using docker-compose. I get the idea behind it. But right now , I just wanna go at it from the beginning. To refresh my memory.

Chapter 1:

We know so far, docker containers are created from an image. You either create your container from a dockerfile inside a folder or create it via command line. First we need to familiar ourselves with  some commands. Also refer to this site for the list of commands

https://docs.docker.com/engine/reference/commandline/docker/

docker build -t [image_name:any_tag] [context_path or path_to your_dockerfile] – build the image based on a docker file. -t option is to name your image.

docker run -p 8084:80 [image_name] – this is to run the image that were created. -p is the port we need to expose to access the container port. 8084 is the port of the host pc and 80 port of the containers. -v mounting a volume so you can change the files inside the container folder. -v [absolute_path:container_path]. Important note: relative path for host doesnt work and must be an absolute path for the host. Funnily enough relative volumes on docker-compose works.

docker ps – basically list all running containers running so far. You can use -a to also shows non-running containers.

docker image ls – list all your images currently available.

docker rm [container_id] – remove the container

docker image rm [image name:latest or image_id] – remove the image. -f force image to be deleted.

docker stop [container_id] – stop the container from running.

CSS Cheatsheet for responsive-ness

Old school! We have lots of libraries now to make frond-end development easier especially making our layout responsive.

Sometimes we need to step back and really see how CSS queries  are structured for this feat. Found a really nice CSS cheat sheet to ponder upon or maybe used for our projects or just reference.

https://gist.github.com/bartholomej/8415655

And whats the go with “ONLY” query. Apparently old browsers ignores this.

https://stackoverflow.com/questions/8549529/what-is-the-difference-between-screen-and-only-screen-in-media-queries

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” },]

Understanding Sorting Algorithm

I was once asked years ago if I know any sorting algorithm and I terribly failed to answer. As a self taught coder I never encounter having to sort records manually. Because most programming languages have a function already built-in to do this ‘sort’ of thing (pun intended).

So what is it? You my future self should already know the gist of it. Its basically a way to sort set of records based on from lowest or highest to lowest. There are bunch of sorting algorithm listed in this below link:

Different types of sorting algorithms

The most common one is Bubble sorting, you take the first value in the collection or array and compare to the second, if second value is lower, you swap the second to the first. Then we take the second value and compare to the third. Every swap you flip a flag that a swap has happen. You just keep repeating until the swap flag remain false and then everything should be sorted.

For more detailed videos of known sorting algorithm whenever you need it below are full explanations.

Algorithms Playlist

Windows: Do everything with shortcuts!

When working on your chosen OS, we tend to do repetitive work using our mouse. The time to move the mouse to the direction of the icon you wanna click is more effort than pressing 2 to 3 keystroke on the keyboard. So what do someone like us lazy people do to make this effortless and hopefully avoid injury to our hands in the future? Shortcuts! Here I will list my most used chores on windows that I often find doing.

Changing Explorer View
CTRL + SHIFT + 1 Extra Large
CTRL + SHIFT + 2 Large Icons
CTRL + SHIFT + 3 Medium Icons
CTRL + SHIFT + 4 Small Icons
CTRL + SHIFT + 5 List
CTRL + SHIFT + 6 Details
CTRL + SHIFT + 7 Tiles
CTRL + SHIFT + 8 Content

Using RUN command with WIN + R key:
cmd  To open cmd line.
start + . Type this comment to open current working folder in windows explorer
Press win key , type cmd press ctrl + shift + enter Run as administrator.
services.msc  Open services window
control  Open control panel
ncpa.cpl  Open network connections
regedit Registry Editor
shift + F10 To display right click on any object selected
appwiz.cpl Very handy to open Add/Remove program

Open CMD on any window explorer open:
alt + d and type cmd This will open command line in that folder

Editing Text
shift + up or down – To select whole line or below line.
shift + home or end – to select from cursor left and right, very useful

Navigating Windows Explorer
F6 Very handy to navigate to different elements of the window like the left panel to get the drive you want
alt + D Move focus to the address bar and select current path.
ctrl + N Open new window on the same folder
Alt + Right Arrow Go forward.
Alt + Left Arrow Go back.
Alt + Up Arrow  Go to parent level