Where It All Started.

Where It All Started.

Life, Stock Trading, Investments, Business and Startup. Most are programming stuff.

Year: 2018

As We Roam Hong-Kong

I decided to fly through the air and live in the sunlight and enjoy life as much as I could.

— Evel Knievel.

I never knew traveling was something I would really want, but here I am craving for it.

This is a continuation of my travel to Hong Kong this December, check out the first article here.

We stayed in a place called Li Cheng Guesthouse in the district of Tsim Sham Tsui. I must say the place is clean and well organized, the room was a bit small but for me its good enough. After resting for a bit, me and my girlfriend went to a nearby exchange then roamed few districts riding MTR. The ride was a breeze compared to when riding railways in Philippines.

Our first destination was Sham Shui Po, what we did check is the Golden Computer Arcade to check game consoles. I was tempted to buy a Nintendo Switch there as prices is much more cheap compared to large retailers.

Next, we traveled in Central to ride trams (quick fact: trams in hong kong first operated in 1904). The cost of the ride is $2 HKD end to end. It was like going back in time riding those trams. We also went to several establishments and that ends our first day in HK.

To be continued…

❌ Originally posted on December 12, 2018.

DevOps Series – Multiple AWS CLI Accounts

Lack of direction, not lack of time, is the problem. We all have twenty-four hour days.

— Zig Ziglar.

As a Dev Ops, I handle multiple project all at once. One problem I encountered is managing multiple AWS accounts for different startups. So how to handle multiple AWS account?

Prerequisites

Before you start doing this I assume you already know basic command line interface whether its for Windows or from *Nix (Linux, macOS, Unix) derivatives. And also you must have a python interpreter with at least version 3 above.

Multiple, Multiple to the Nth

First, if you haven’t got the AWS CLI (Command Line Interface) install it using the command pip install --upgrade --user awscli. The command will install the awscli package in your local python dist directory.

And now we begin.

You’ll need to generate first your AWS keys and secret access key. Here are the steps.

  • Go to IAM Console
  • Go to Users in the navigation pane and select your IAM username.
  • Select Security credentials and choose Create access key.

Then, after that we will need to configure our AWS using aws configure --profile <your-profile-name>.

aws configure --profile my-profile-name

This command will need some more input from you like your AWS Key, AWS Secret, AWS Account Region and the default output format which would be JSON or TEXT.

If everything is setup properly, we will proceed with running a some sample commands. Also in order for you to use the configured AWS profile, you must always append at the end of your AWS command the --profile <your-profile-name>.

aws configure --profile my-profile-name

Or if you can and will be using it always, export an environment variable AWS_PROFILE containing the profile name like export AWS_PROFILE=<your-profile-name>.

export AWS_PROFILE=my-profile-name

And cheers, you can now use multiple credentials through AWS CLI.

Conclusion

Hi guys a quick tip from me: sometimes, having multiple projects can cause headaches. So as a reminder, always focus and finish one project first before you move to other projects. Stay tuned for more blog updates and series.

Going Out Of Town

Once you have tasted flight, you will forever walk the earth with your eyes turned skyward, for there you have been, and there you will always long to return.

— Leonardo da Vinci.

Hi guys, this log is more of a personal blog diary about my life. So here’s what happened, I left my daughter in my relatives place as I was going out of town…​

I slept around 2-3am yesterday and woke up by my dog around 10am, as she started licking my face. By the way my dog’s name was Lexus, named after a luxurious car brand. For me Lexus is like my own child, she’s the type of dog that is always lively and sometimes I think she has ADHD — always in constant need of attention. Its the first time I’m not gonna be around her for around a week. Actually I’m quite a bit concerned on what her situation, even though she’s staying at my relatives house.

At 11am, I feed her with food and also took my meal. After that, I started packing my things going back to my place. I tried to take a nap after but instead I fell asleep for almost 4 hours. Actually, I’m planning to create content with that amount of time :|.

When I woke up, I rush to the bus station and message my wifey about what happened. An hour and half pass, got to my place and went to mall to buy some things. I also had other reason why I went to the mall, it is to buy some shoes but didn’t happen.

We (me and my wife-y) strolled for a bit in the mall and tried to catch some legendary Pokemon, but my phone died 😐 so really unfortunate. After that went home, and at some point we felt its a bit lonely because our daughter (Lexus) is not around.

We missed you Lexus, we will fetch you up after a week. We’re still thinking about you.

Travelling To Hong-Kong

Dare to live the life you’ve always wanted.

— Anonymous.

I’ve recently visited Hong Kong, and it always feels like the first time. I’m always amaze on how fast things change and to new places I’ve never been to.

Me and my girlfriend planned this trip for almost 2 months, as this is her first air flight.

On the 4th of December, we book a grab car around 4AM straight to Manila International Airport. As we got off the departure bay, we see a long queued line going in the airport terminal entrance. Hahaha always Manila… facepalm an hour and half has passed then got through security checkpoint to check-in lounge, another queue line to get our boarding pass. This is not a rant but rather a straight face story telling.

Even though after that long tiresome waiting, we didn’t let that event affect our mood and excitement flying to Hong Kong. We got our boarding pass wew, and set of to immigration counter. I’m kinda worried that time, if my girlfriend would pass the immigration counter. As here in the Philippines, its like you’re not allowed to leave the country type of scenario. I know for a fact that their doing it to stop some of our countrymen immigrate illegally to another country.

I went first in the immigration counter showing my renewed passport, following me is my girlfriend on where she only showed her company ID. And then off we go to the boarding gates to the airplane. Never seen the look of my girlfriends face like its her first birthday, glad she was happy that day.

After 2 hours, we finally landed in Hong Kong. So so happy 😀

To be continued…​

Editor Series – Configuring Emacs To Fit The Needs Part 2

The world as we have created it is a process of our thinking. It cannot be changed without changing our thinking.

— Albert Einstein.

As the title says, to fit the needs. Currently, I’m looking into handling multiple projects but vast differ in programming paradigm and language. Some of the language that I’ll probably tackling are Go, Rust, Ruby, Perl, C++, JavaScript, Typescript, and etc.

Prerequisites

First of all, you need Emacs 26 and up as this is the main topic of this article that we need to configure. There are many ways to install it on your system, kindly check your GNU/Linux distribution for specific ways to install it.

Packages, Oh For The Brave

If its your first time configuring Emacs, then head out first to my first article here. After that, we will establish all the needed packages.

Diminish, Bind and Org

The package diminish will remove any mode in status bar, while the bind will map the keys to a specific lisp function. And not to forgot org-mode, it can be your to-do / agenda list. Actually there are many things you could do with org, you could even write a book with it.

(use-package diminish)
(use-package bind-key)
(use-package org
  :ensure org-plus-contrib
  :defer 7)

Uniquify

The uniquify package will change buffer name instead of file.txt|<1> to something like file.txt|project. A good change specially if you’re constantly using buffers.

(require 'uniquify)
(setq uniquify-buffer-name-style 'forward)

Flycheck

The de facto package for linting, validating, and checking is flycheck. Almost any Emacs config you can find on the internet contains flycheck to handle checking.

(use-package flycheck
  :defer 5
  :diminish flycheck-mode
  :hook (after-init . global-flycheck-mode)
  :config
  (flycheck-define-checker proselint
    "A linter for prose."
    :command ("proselint" source-inplace)
    :error-patterns
    ((warning line-start (file-name) ":" line ":" column ": "
              (id (one-or-more (not (any " "))))
              (message) line-end))
    :modes (text-mode markdown-mode adoc-mode gfm-mode org-mode))

  (add-to-list 'flycheck-checkers 'proselint))

Magit

The magit package handles diff from head state and it supports many git vcs command. It can query the status of the project directory and see file changes.

(use-package magit
  :pin melpa-stable
  :defer 1
  :init (diminish 'magit-auto-revert-mode)
  :hook (magit-status-sections . magit-insert-worktrees)
  :config (progn
            (setq magit-commit-show-diff nil
                  magit-last-seen-setup-instructions "1.4.0")))

Multiple Cursors

Multiple cursor mode is to handle selection of all similar words and its also capable of setting multiple cursor at point. This can be very useful when you want to modify a set of words, and in different line / column concurrently.

(use-package multiple-cursors
  :bind ("C-S-c C-S-c" . mc/edit-lines))

Helm

The helm package, super extendable and has many use case. But in short, its more of selection narrowing package. The package can configured to handle several task, using additional extension packages.

(use-package helm
  :bind (("M-x" . helm-M-x)
         ("C-x C-f" . helm-find-files))
  :diminish helm-mode
  :config (progn
            (setq helm-buffers-fuzzy-matching t)
            (setq helm-grep-ag-command "rg --color=always --colors 'match:fg:black' --colors 'match:bg:yellow' --smart-case --no-heading --line-number %s %s %s")
            (setq helm-grep-ag-pipe-cmd-switches '("--colors 'match:fg:black'" "--colors 'matcnh:bg:yellow'"))
            (helm-mode 1)))

Expand Region

The expand-region package is useful if you want to expand into similar brackets or tags.
Checkout its GitHub repository to know more.

(use-package expand-region
  :bind ("C-=" . er/expand-region))

Projectile

If you have many projects then projectile is for you. It can fuzzy find project and switch to another project easily. I always install this package, as for me its so necessary for project management.

(use-package projectile
  :diminish projectile-mode
  :config (progn
            (projectile-mode +1)
            (setq projectile-enable-caching nil)
            (setq projectile-completion-system 'helm)))

(use-package helm-projectile
  :bind ("M-t" . helm-projectile-find-file)
  :config
  (helm-projectile-on))

Yasnippet

The yasnippet is a great tool to make an abbreviated shortcut to insert a specific snippet. Its similar to snippetmate in vim.

(use-package yasnippet
  :ensure t
  :diminish yas-minor-mode
  :init (yas-global-mode 1))

(use-package yasnippet-snippets
  :defer 1
  :after (yasnippet))

Which Key

Forgot the keys you want to press? which-key provides a list of key binds you can press after a specific key map. This makes learning Emacs easy for novice.

(use-package which-key
  :defer 1
  :diminish which-key-mode
  :config
  (which-key-mode))

Editor Helpers

These are package that can make editor happy. The yaml-mode handles yaml type files, while markdown-mode for markdown files. The editorconfig respects the bundled editor config in project root.

(use-package yaml-mode)

(use-package markdown-mode
  :hook (markdown-mode . visual-line-mode))

(use-package editorconfig
  :config
  (editorconfig-mode 1))

Undo Tree

Want to undo into a specific state? undo-tree can easily backtrack changes and jump into a specific state. Its more powerful when combined with Emacs backup.

(use-package undo-tree
  :ensure t
  :init
  (global-undo-tree-mode))

Rainbow Delimiters

Want to have rainbow delimiters, then install this package. It will adjust pair bracket color base on its hierarchical level. Very handy if your programming lisp and Clojure.

(use-package rainbow-delimiters
  :hook (prog-mode . rainbow-delimiters-mode))

Avy

The avy package can be use to jump to a specific character inside the buffer and easily move line to line. Its set to M-g then c to jump to a character.

(use-package avy
  :ensure t
  :bind
  ("H-SPC" . avy-goto-char-timer)
  ("H-w"   . avy-goto-word-1)
  ("H-c"   . avy-goto-char-2)
  ("H-l"   . avy-goto-line)
  ("H-d"   . avy-goto-word-0)
  ("<f9> SPC" . avy-goto-char-timer)
  ("C-c g" . avy-goto-word-1)
  ("M-g l" . avy-goto-line)
  ("M-g c" . avy-goto-char-2)
  ("M-g w" . avy-goto-word-0))

Smartparens

The smartparens automatically inserts pair bracket or quote. Also can traverse between beginning and end of pair symbol. Works out of the box with html-mode traversing tags.

(use-package smartparens
  :ensure t
  :diminish smartparens-mode
  :config
  (progn
    (use-package smartparens-config)
    (smartparens-global-mode 1)))

Miscellaneous

These are miscellaneous packages on which sometimes much better than pre-package tools.

  • fill-column-indicator– instantly puts a line indicator specifying an 80th column (can configured to be different).
  • gist– can put a buffer or region into the github gist instantly.
  • ag– much more faster than grep.
  • fzf– a fast fuzzy finder.
(use-package fill-column-indicator
  :ensure t
  :defer 5)

(use-package gist
  :ensure t)

(use-package ag
  :ensure t)

(use-package fzf
  :ensure t)

Rust

The rust package is still an early version and can’t considered be complete. But we will include it, as such its useful for syntax highlight and minor auto completion.

(use-package rust-mode
  :defer 1)

(use-package racer
  :diminish racer-mode
  :after (rust-mode company eldoc)
  :init
  (setq racer-rust-src-path
        (concat (getenv "HOME")
                "/.rustup/toolchains/nightly-x86_64-unknown-linux-gnu/lib/rustlib/src/rust/src"))
  (setq racer-cmd (concat (getenv "HOME") "/.cargo/bin/racer"))
  :hook ((rust-mode . racer-mode)
         (racer-mode . company-mode)
         (racer-mode . eldoc-mode)))

(use-package flycheck-rust
  :ensure t
  :after (rust-mode flycheck)
  :hook (flycheck-mode . flycheck-rust-setup))

(use-package cargo
  :ensure t
  :after (rust-mode)
  :hook (rust-mode . cargo-minor-mode))

Typescript

The typescript-mode is for syntax highlighting while tide is for LSP1 type analysis and auto completion. Its a good package.

(use-package typescript-mode
  :defer 1)

(use-package tide
  :ensure t
  :diminish tide-mode
  :after (typescript-mode company flycheck)
  :hook ((typescript-mode . tide-setup)
         (typescript-mode . tide-hl-identifier-mode)
         (before-save . tide-format-before-save)))

Elixir

The alchemist package along with elixir-mode completes Emacs. With its auto-completion to keyword suggestion. I’m just in awe with it, if you’re in elixir programming no one can beat alchemist in it.

(use-package elixir-mode
  :defer 1
  :hook (before-save . whitespace-cleanup))

(use-package alchemist
  :defer 1
  :after (elixir-mode))

(use-package web-mode
  :defer 1
  :mode ("\\.eex\\'" . web-mode)
  :config
  (setq web-mode-markup-indent-offset 2
        web-mode-css-indent-offset 2
        web-mode-code-indent-offset 2))

Emmet

The emmet package similar to other implementaion in other text editor, will auto expand abbreviated tags. Its more combination to web-mode, css-mode and html-mode.

(use-package emmet-mode
  :defer 1
  :hook ((sgml-mode . emmet-mode)
         (web-mode . emmet-mode)
         (css-mode . emmet-mode))
  :config (progn
            (setq emmet-move-cursor-between-quotes t)))

Dart

The dart-mode handles linting and sometimes connected to dart-analyzer. For me its still not complete but usable. Can configure to auto completion.

(setq js-indent-level 2)

(use-package js2-mode
  :ensure t)

(use-package dart-mode
  :defer 1
  :config
  (progn
    (setq dart-sdk-path "/opt/flutter/bin/cache/dart-sdk/")
    (setq dart-enable-analysis-server t)))

ASCIIDoctor

The adoc-mode and writegood-mode, the former is for syntax highlight and formatting while the latter is for checking complexity and grammar of paragraphs.

(use-package adoc-mode
  :ensure t
  :mode "\\.adoc\\'")

(use-package writegood-mode
  :ensure t
  :diminish writegood-mode
  :after (adoc-mode)
  :hook (text-mode . writegood-mode)
  :bind
  ("C-c g"     . writegood-mode)
  ("C-c C-g g" . writegood-grade-level)
  ("C-c C-g e" . writegood-reading-ease))

Full source

You know its not that hard. Here is the full source with commentary:

;;; init.el --- Initialization file for Emacs 24
;;; Commentary:
;;;   ffimnsr <[email protected]>

;; -*- lexical-binding: t; -*-

(unless (>= emacs-major-version 24)
  (error "Emacs version 24 or higher is required"))

;;; Code: Emacs 24 or higher only

;; Hasten up startup
(setq gc-cons-threshold (* 24 1024 1024))
(add-hook 'after-init-hook (lambda ()
                             (setq gc-cons-threshold (* 8 1024))))

;; Default to UTF-8
(prefer-coding-system 'utf-8)
(set-default-coding-systems 'utf-8)
(set-terminal-coding-system 'utf-8)
(set-keyboard-coding-system 'utf-8)
(setq-default buffer-file-coding-system 'utf-8)
(set-frame-font "-SRC-Hack-normal-normal-normal-*-11-*-*-*-m-0-iso10646-1")

;; Unset C-z that freezes emacs gui
(global-unset-key (kbd "C-z"))

;; Buffers reflect external file chanes
(global-auto-revert-mode t)

;; Load emacs in full screen mode and set the title
(when (display-graphic-p)
  (add-to-list 'default-frame-alist '(fullscreen . maximized))
  (setq frame-title-format "Equivalent Exchange"))

;; Turn off interface early
(if (fboundp 'menu-bar-mode)
    (menu-bar-mode -1))
(if (fboundp 'tool-bar-mode)
    (tool-bar-mode -1))
(if (fboundp 'scroll-bar-mode)
    (scroll-bar-mode -1))

(setq inhibit-startup-screen t                  ; Disable startup screen with graphics
      inhibit-startup-echo-area-message t       ; Disable startup echo messages
      visible-bell nil                          ; Disable visual bell graphics
      load-prefer-newer t                       ; Load newer files
      ring-bell-function 'ignore)               ; Disable audio bell

(when (eq system-type 'darwin)
  (add-to-list 'exec-path "/usr/local/bin")
  (setq mac-option-modifier 'super
        mac-command-modifier 'meta
        mac-function-modifer 'control)
  (global-set-key "\M-`" 'other-frame))

(setq ns-function-modifier 'control)

(require 'package)
(setq package-enable-at-startup nil)
(setq package-archives
      '(("gnu" . "http://elpa.gnu.org/packages/")
        ("melpa" . "http://melpa.org/packages/")
        ("melpa-stable" . "http://stable.melpa.org/packages/")
        ("org" . "https://orgmode.org/elpa/")
        ("marmalade" . "http://marmalade-repo.org/packages/")))
(package-initialize)

;; Bootstrap packages
(unless (package-installed-p 'use-package)
  (package-refresh-contents)
  (package-install 'use-package))

(eval-when-compile
  (require 'use-package))

(use-package diminish)
(use-package bind-key)
(use-package org
  :ensure org-plus-contrib
  :defer 7)

(global-set-key (kbd "C-6") 'mode-line-other-buffer)

(setq-default use-package-always-defer t
              use-package-always-ensure t
              indent-tabs-mode nil         ; Use spaces instead of tabs
              tab-width 2)                 ; Set tab width as four spaces is a tab

;; Highlight paired parenthesis
(show-paren-mode t)

;; Enable moving to different windows using meta
(windmove-default-keybindings 'meta)

;; Disable yes-or-no
(fset 'yes-or-no-p 'y-or-n-p)

;; Enable window undo and redo using C-c <left>
(when (fboundp 'winner-mode)
  (winner-mode 1))

(setq make-backup-files nil                   ; Disable backup files
      auto-save-default nil
      confirm-nonexistent-file-or-buffer nil  ; Disable annoying confirmation for not exist
      confirm-kill-emacs 'yes-or-no-p         ; Confirm before ending emacs session
      compile-command "make"                  ; Set the default compile command
      history-delete-duplicates t             ; Delete duplicates in minibuffer history
      compilation-read-command nil            ; Disable confirmation of compile command
      epg-gpg-program "/usr/local/bin/gpg")   ; Set GPG binary


;; Flatten the mode-line so it would not look like a button
(set-face-attribute 'mode-line nil :box nil)
(set-face-attribute 'mode-line-inactive nil :box nil)
(set-face-attribute 'mode-line-highlight nil :box nil)

;; Configure dired
(setq dired-dwim-target t
      dired-recursive-deletes t
      dired-use-ls-dired nil
      delete-by-moving-to-trash t)

;; Load monokai theme
(when (display-graphic-p)
  (load-theme 'monokai t))

;; Make buffer names unique
(require 'uniquify)
(setq uniquify-buffer-name-style 'forward)

(use-package exec-path-from-shell)

(when (memq window-system '(mac ns))
  (exec-path-from-shell-initialize)
  (exec-path-from-shell-copy-env "GOPATH"))

(use-package flycheck
  :defer 5
  :diminish flycheck-mode
  :hook (after-init . global-flycheck-mode)
  :config
  (flycheck-define-checker proselint
    "A linter for prose."
    :command ("proselint" source-inplace)
    :error-patterns
    ((warning line-start (file-name) ":" line ":" column ": "
              (id (one-or-more (not (any " "))))
              (message) line-end))
    :modes (text-mode markdown-mode adoc-mode gfm-mode org-mode))

  (add-to-list 'flycheck-checkers 'proselint))


(use-package magit
  :pin melpa-stable
  :defer 1
  :init (diminish 'magit-auto-revert-mode)
  :hook (magit-status-sections . magit-insert-worktrees)
  :config (progn
            (setq magit-commit-show-diff nil
                  magit-last-seen-setup-instructions "1.4.0")))

(use-package multiple-cursors
  :bind ("C-S-c C-S-c" . mc/edit-lines))

(use-package eldoc
  :init (diminish 'eldoc-mode))

(use-package expand-region
  :bind ("C-=" . er/expand-region))

(use-package helm
  :bind (("M-x" . helm-M-x)
         ("C-x C-f" . helm-find-files))
  :diminish helm-mode
  :config (progn
            (setq helm-buffers-fuzzy-matching t)
            (setq helm-grep-ag-command "rg --color=always --colors 'match:fg:black' --colors 'match:bg:yellow' --smart-case --no-heading --line-number %s %s %s")
            (setq helm-grep-ag-pipe-cmd-switches '("--colors 'match:fg:black'" "--colors 'matcnh:bg:yellow'"))
            (helm-mode 1)))

(use-package projectile
  :diminish projectile-mode
  :config (progn
            (projectile-mode +1)
            (setq projectile-enable-caching nil)
            (setq projectile-completion-system 'helm)))

(use-package helm-projectile
  :bind ("M-t" . helm-projectile-find-file)
  :config
  (helm-projectile-on))

(use-package company
  :defer 1
  :diminish company-mode
  :init (global-company-mode)
  :config
  (progn
    (global-set-key "\M-n" 'company-select-next)
    (global-set-key "\M-p" 'company-select-previous)))

(use-package yasnippet
  :ensure t
  :diminish yas-minor-mode
  :init (yas-global-mode 1))

(use-package yasnippet-snippets
  :defer 1
  :after (yasnippet))

(use-package which-key
  :defer 1
  :diminish which-key-mode
  :config
  (which-key-mode))

(use-package reveal-in-osx-finder)

(use-package ansi-color
  :init
  (defun m/colorize-compilation-buffer ()
    (when (eq major-mode 'compilation-mode)
      (ansi-color-apply-on-region compilation-filter-start (point-max))))
  :hook (compilation-filter . m/colorize-compilation-buffer))

(use-package yaml-mode)

(use-package markdown-mode
  :hook (markdown-mode . visual-line-mode))

(use-package editorconfig
  :config
  (editorconfig-mode 1))

(use-package rainbow-delimiters
  :hook (prog-mode . rainbow-delimiters-mode))

(use-package vlf)

(use-package rust-mode
  :defer 1)

(use-package racer
  :diminish racer-mode
  :after (rust-mode company eldoc)
  :init
  (setq racer-rust-src-path
        (concat (getenv "HOME")
                "/.rustup/toolchains/nightly-x86_64-unknown-linux-gnu/lib/rustlib/src/rust/src"))
  (setq racer-cmd (concat (getenv "HOME") "/.cargo/bin/racer"))
  :hook ((rust-mode . racer-mode)
         (racer-mode . company-mode)
         (racer-mode . eldoc-mode)))

(use-package flycheck-rust
  :ensure t
  :after (rust-mode flycheck)
  :hook (flycheck-mode . flycheck-rust-setup))

(use-package cargo
  :ensure t
  :after (rust-mode)
  :hook (rust-mode . cargo-minor-mode))

(use-package typescript-mode
  :defer 1)

(use-package tide
  :ensure t
  :diminish tide-mode
  :after (typescript-mode company flycheck)
  :hook ((typescript-mode . tide-setup)
         (typescript-mode . tide-hl-identifier-mode)
         (before-save . tide-format-before-save)))

(use-package toml-mode
  :defer 1)

(use-package solidity-mode
  :ensure t
  :no-require t)

(use-package company-solidity
  :ensure t
  :no-require t
  :config (add-hook 'solidity-mode-hook
                    (lambda ()
                      (my-company-add-backend-locally 'company-solidity))))

(use-package elixir-mode
  :defer 1
  :hook (before-save . whitespace-cleanup))

(use-package alchemist
  :defer 1
  :after (elixir-mode))

(use-package web-mode
  :defer 1
  :mode ("\\.eex\\'" . web-mode)
  :config
  (setq web-mode-markup-indent-offset 2
        web-mode-css-indent-offset 2
        web-mode-code-indent-offset 2))

(use-package emmet-mode
  :defer 1
  :hook ((sgml-mode . emmet-mode)
         (web-mode . emmet-mode)
         (css-mode . emmet-mode))
  :config (progn
            (setq emmet-move-cursor-between-quotes t)))

(use-package cc-mode
  :hook ((c-mode . (lambda () (c-set-style "bsd")))
         (java-mode . (lambda () (c-set-style "bsd"))))
  :config
  (progn
    (setq tab-width 2)
    (setq c-basic-offset 2)))

(setq js-indent-level 2)

(use-package js2-mode
  :ensure t)

(use-package dart-mode
  :defer 1
  :config
  (progn
    (setq dart-sdk-path "/opt/flutter/bin/cache/dart-sdk/")
    (setq dart-enable-analysis-server t)))

(use-package undo-tree
  :ensure t
  :init
  (global-undo-tree-mode))

(use-package adoc-mode
  :ensure t
  :mode "\\.adoc\\'")

(use-package writegood-mode
  :ensure t
  :diminish writegood-mode
  :after (adoc-mode)
  :hook (text-mode . writegood-mode)
  :bind
  ("C-c g"     . writegood-mode)
  ("C-c C-g g" . writegood-grade-level)
  ("C-c C-g e" . writegood-reading-ease))

(use-package avy
  :ensure t
  :bind
  ("H-SPC" . avy-goto-char-timer)
  ("H-w"   . avy-goto-word-1)
  ("H-c"   . avy-goto-char-2)
  ("H-l"   . avy-goto-line)
  ("H-d"   . avy-goto-word-0)
  ("<f9> SPC" . avy-goto-char-timer)
  ("C-c g" . avy-goto-word-1)
  ("M-g l" . avy-goto-line)
  ("M-g c" . avy-goto-char-2)
  ("M-g w" . avy-goto-word-0))

(use-package smartparens
  :ensure t
  :diminish smartparens-mode
  :config
  (progn
    (use-package smartparens-config)
    (smartparens-global-mode 1)))

(use-package fill-column-indicator
  :ensure t
  :defer 5)

(use-package gist
  :ensure t)

(use-package ag
  :ensure t)

(use-package fzf
  :ensure t)

(garbage-collect)

(custom-set-variables
 ;; custom-set-variables was added by Custom.
 ;; If you edit it by hand, you could mess it up, so be careful.
 ;; Your init file should contain only one such instance.
 ;; If there is more than one, they won't work right.
 '(custom-safe-themes
   (quote
    ("c3d4af771cbe0501d5a865656802788a9a0ff9cf10a7df704ec8b8ef69017c68" default)))
 '(org-latex-caption-above nil)
 '(package-selected-packages
   (quote
    (gist avy writegood-mode adoc-mode solidity-mode htmlize alchemist web-mode org-plus-contrib typescript-mode racer magit fill-column-indicator markdown-mode vlf monokai-theme diminish emmet-mode rainbow-delimiters reveal-in-osx-finder which-key company helm-config helm-projectile helm projectile flycheck use-package))))
(custom-set-faces
 ;; custom-set-faces was added by Custom.
 ;; If you edit it by hand, you could mess it up, so be careful.
 ;; Your init file should contain only one such instance.
 ;; If there is more than one, they won't work right.
 )
(put 'erase-buffer 'disabled nil)

;;; init.el ends here

Conclusion

We are just exploring the tip of the ice berg. You can add and configure Emacs to your likeness, checkout full configurations like Spacemacs2 if you want a pre-built config. Follow me at @ffimnsr and at @vastorigins to get new articles and tips.


  1. The Language Server Protocol is an open, JSON-RPC-based protocol for use between source code editors or integrated development environments and servers that provide programming language-specific features. Wikipedia ↩︎
  2. Spacemacs is a configuration framework for GNU Emacs. It can take advantage of all of GNU Emacs’ features, including both graphical and command-line user interfaces, and being executable under X Window System and within a Unix shell terminal. Wikipedia ↩︎

Editor Series – Configuring Emacs To Fit The Needs Part 1

Doing what needs to be done may not make you happy, but it will make you great.

— George Bernard Shaw.

Hi guys in this blog post, I’ll let you take a peek into my daily driver in terms of software development. Before I was an avid Vim1 user and configured Vim to its full potential, creating plugins and custom configuration but there are things which Vim couldn’t handle still. Things like handling long lines, on which when I transferred to Emacs2 didn’t occur. Been waiting for it to get implemented in Vim and Neovim3, but still none.

Prerequisites

First of all, you need Emacs 26 and up as this is the main topic of this article that we need to configure. There are many ways to install it on your system, kindly check your GNU/Linux distribution for specific ways to install it.

Configuring the beast

As a software developer, I’ve spent on average an entire day to configure my text editor. Because its the life and blood of software development, without text editors we can’t create superfluous and wonderful things.

The first thing I’ll always do is open ~/.emacs.d/init.el* and set its required version and garbage collection threshold. I put versioning first, as most of the time I clone the config in a remote working environment and garbage collector threshold so it could boot up fast.

(unless (>= emacs-major-version 24)
  (error "Emacs version 24 or higher is required"))

;;; Code: Emacs 24 or higher only

;; Hasten up startup
(setq gc-cons-threshold (* 24 1024 1024))
(add-hook 'after-init-hook (lambda ()
                             (setq gc-cons-threshold (* 8 1024))))

Then set to accept Unicode and utf-8. Come on guys where in the age of internalization where there are font face with emojis and cryptic languages.

;; Default to UTF-8
(prefer-coding-system 'utf-8)
(set-default-coding-systems 'utf-8)
(set-terminal-coding-system 'utf-8)
(set-keyboard-coding-system 'utf-8)
(setq-default buffer-file-coding-system 'utf-8)

Set external changes to load up in Emacs and unset Ctrl + z. As sometimes Ctrl + z could be problematic in-case your running Emacs in terminal mode, which will background the current process.

;; Unset C-z that freezes emacs gui
(global-unset-key (kbd "C-z"))

;; Buffers reflect external file chanes
(global-auto-revert-mode t)

Then we disable uncanny Emacs toolbar and menus. The menus for me is not necessary, as I could always call M + x to launch certain commands. I’m not fan of point and click when using text editor.

;; Turn off interface early
(if (fboundp 'menu-bar-mode)
    (menu-bar-mode -1))
(if (fboundp 'tool-bar-mode)
    (tool-bar-mode -1))
(if (fboundp 'scroll-bar-mode)
    (scroll-bar-mode -1))

After that we will disable Emacs startup screen, as I like to have empty screen when opening my editor. The setup will also disable screen flashing alerts and sounds when there is an error.

(setq inhibit-startup-screen t                  ; Disable startup screen with graphics
      inhibit-startup-echo-area-message t       ; Disable startup echo messages
      visible-bell nil                          ; Disable visual bell graphics
      load-prefer-newer t                       ; Load newer files
      ring-bell-function 'ignore)               ; Disable audio bell

Here on we start getting our favorite packages, but before that we must configure our package repository as well run helpers to install packages easily during runtime.

(require 'package)
(setq package-enable-at-startup nil)
(setq package-archives
      '(("gnu" . "http://elpa.gnu.org/packages/")
        ("melpa" . "http://melpa.org/packages/")
        ("melpa-stable" . "http://stable.melpa.org/packages/")
        ("org" . "https://orgmode.org/elpa/")
        ("marmalade" . "http://marmalade-repo.org/packages/")))
(package-initialize)

;; Bootstrap packages
(unless (package-installed-p 'use-package)
  (package-refresh-contents)
  (package-install 'use-package))

(eval-when-compile
  (require 'use-package))

The next configuration, as I like vim quick buffer switch. The C-6 or in vim C-^, either way it would work out in Emacs.

(global-set-key (kbd "C-6") 'mode-line-other-buffer)

Also we will be configuration the infamous yes-or-no dialog in Emacs. The configuration will accept shorten yes or no, y or n.

;; Disable yes-or-no
(fset 'yes-or-no-p 'y-or-n-p)

This configurations are partially the basics in configuring Emacs. Stay tuned in the next chapter as we’ll configure necessary packages to run.


  1. Vim is a clone, with additions, of Bill Joy’s vi text editor program for Unix. Vim’s author, Bram Moolenaar, based it upon the source code for a port of the Stevie editor to the Amiga and released a version to the public in 1991. Wikipedia ↩︎
  2. Emacs or EMACS is a family of text editors that are characterized by their extensibility. The manual for the most widely used variant, GNU Emacs, describes it as “the extensible, customizable, self-documenting, real-time display editor”. Wikipedia ↩︎
  3. Neovim is Vim-fork focused on extensibility and usability. ↩︎

Solidity Series – Building Your First Hello World

Knowing others is wisdom, knowing yourself is enlightenment.

— Lao Tzu.

It’s the start of decentralization age but how to start programming on decentralize environment?

Ethereum1, considered as second wave of blockchain innovation. The pioneer and first blockchain ecosystem to implement and handle smart contracts. So how do you start developing system and application DApps (Decentralize Apps) in it?

The answer is “Solidity” — a programming language that interface EVM (Ethereum Virtual Machine) and your app.

Prerequisites

In this tutorial we assume you have some basic knowledge in programming.

The main requirements in developing a blockchain app is first its compiler then the secondary requirements but optional are the bootstrap framework like truffle.

  • Node 10 and above

Building Hello World

To start the development, we must get the required dependency in developing a structured smart contract project. The tool and framework that we will be using is truffle, which handles all the bootstrapping procedure and creates the base of your project. Installing it is just breeze, all you have to do is type npm install -g truffle.

Also install ganache which is the old ethereum-test-rpc project. To install ganache you have an option whether to install it on a desktop or a CLI (Command Line Interface) build. For this project I’ll be using the CLI build, so to start we install ganache using the command npm install -g ganache-cli. Both truffle and ganache is under the truffle software development platform.

And now we start building the project, after all dependencies installed we need to create an empty project directory with the command truffle init. As a note, the init sub-command only works on an empty directory. This sub-command will create a base structure for our project.

Project Structure

Below is a structure that I recommend to bootstrap your project.

  • contracts: Storage of smart contracts source.
  • migrations: Migration script to deploy smart contract.
  • test: Test directory for smart contract.
  • truffle-config.js: Truffle configuration for Windows users (for backward compatibility).
  • truffle.js: Truffle configuration for *nix system.

To test if everything’s okay we must run truffle compile.

Running a test RPC for Ethereum

So in order to start, we first need to generate test accounts and run a test environment. Start by typing ganache-cli in a separate non-occupied terminal window. The tool ganache will generates 10 ETH addresses with an initial balance of 100 ether.

Coding your first hello

With ganache-cli running at background, we continue building our hello world project. To start, we must create a new contract using truffle create contract Hello on which this command will create a new file under contracts ⇒ Hello.sol. Edit the newly created file and add a new function that will return the string Hello in EVM.

pragma solidity ^0.4.24;

contract Hello {
	function greeter() public pure returns (string) {
		return "Hello World";
	}
}

In the next step, will be creating and editing the migration file. To create the file execute touch migrations/2_deploy_contracts.js, then edit the new file and link that to the file we created earlier Hello.sol. This is a very crucial step in order to deploy our Hello solidity file on test blockchain environment.

Here are the changes we need in migrations/2_deploy_contracts.js.

var hello = artifacts.require("./Hello.sol");
module.exports = function(deployer) {
	deployer.deploy(hello);
}

After we edit the migration file, we can now connect the truffle project to ganache test blockchain RPC environment. To do that we’ll be editing truffle.js and point it to ganache host and port which is localhost:8545.

module.exports = {
	networks: {
		development: {
			host: "localhost",
			port: 8545,
		},
	},
};

When everything’s done, execute truffle migrate. This command will automatically compile and deploy the smart contract into ganache test blockchain RPC environment. Remember and copy the Hello function address in the output console, we will be using this later.

To test the function if its already deployed in the test environment, we will execute a REPL console using truffle console. Then inside the console, we type Hello.at(address).greeter() (note the address here is the one we copy earlier).

If everything is correct it should output Hello World. That’s it, now you’re on your way to become a blockchain developer.
This is the link to the whole source code.

Conclusion

Hey guys, now that you’ve finish the setup you are now on the path of becoming a blockchain software developer. Follow us on our next adventure developing deep into the blockchain ecosystem. Stay tuned for the next follow up series for solidity.


  1. Ethereum is an open source, public, blockchain-based distributed computing platform and operating system featuring smart contract functionality. It supports a modified version of Nakamoto consensus via transaction-based state transitions. Wikipedia ↩︎

Flutter Series – Custom Icons

Everyone thinks of changing the world, but no one thinks of changing himself.

— Leo Tolstoy.

Hi guys, we have custom free icons for everyone! Just joking I’m not the one giving.

Joking aside, as I began learning Flutter to develop new apps. I began to wonder, how can I beautify it to almost match the wire frame I’m copying.

There are several things to consider, getting exact dimensions and well crafted image and icons. For today’s TIL (Today I Learned), we will get deeper on how to add custom icons to flutter development environment as well use it in app.

To icon or not to icon?

Manually creating icons from scratch, seems to be a bit daunting. But do not worry as there are tools to create this automatically already.

Meet fluttericon!
Just like a father introducing his son to everyone.

Anyways, to create your first set of icons follow the steps below.

  1. First is go to FlutterIcon site.
  2. Create your own set of icons from the different sources or upload a custom one.
  3. You make a suitable name like (e.g. SuperSimpleLineIcons) then download your own custom font.
  4. Extract the downloaded files.
  5. Move the font folder in your flutter project, better if you create an assets folder.
  6. Copy the generated dart file to your flutter lib directory.
  7. View the contents of the generated dart file. You’ll see the header part’s instruction and apply it to your pubspec.yaml file.
  8. Import the generated dart to your flutter source on where you want to include the custom icons.
  9. To use the icons inside your flutter project, call it like this Icon(CustomIcons.copyright).

Also check this GitHub repository to know more info and get help PolyIcon.

Conclusion

As for developers tooling, one of the several factors a developer may consider before diving in to a new language. And flutter, has many of those tooling compared to react native. Currently, dart has native first class auto completion and analyzer integrated to VS tools and several other editors.

Its up to you now to decide which programming language you would choose. Be it react native or flutter in developing modern production grade app. See you on the next flutter series.

Hope you guys, enjoyed this article! 🧡❤

Flutter Series – Creating Your First Hello World

When you can’t find the sunshine, be the sunshine!

— Anonymous.

Hi guys, have you ever dream of building your own app, but think its too hard. Why don’t you try flutter…​

Flutter is a new way to build multi-platform app which is currently backed and develop by Google. Its often compared to react native, but the difference is performance. React Native runs on JavaScript bridge while Flutter on dart bridge. What dart bridge does best is AOT (ahead of time) compiling to native ARM code.

Prerequisites

First of all you need flutter, just follow the steps below in order to run install it.

  • Flutter 1.0

Building Hello World

First we will install flutter, depending on your operating system you could find the details on how to install flutter here. On arch Linux you could find it on AUR repository.

After installing the flutter package. Run flutter doctor to check for any dependency error.

And now we begin, to start a flutter project you need to type in flutter create <project-name>. For example I’m building a hello world project named stocks.

flutter create stocks

The command will create a directory named stocks which contains minimal running app template. What we do first is open the file lib/main.dart using your favorite text editor and rename the app title Flutter Demo to Hello World. Then remove the whole Scaffold block as we will create our own scaffold. After the changes your _MyHomePageState class would look like this.

// ....
class _MyHomePageState extends State<MyHomePage> {
	int _counter = 0;
	
	void _incrementCounter() {
		setState(() {
			_counter++;
		});
	}

	@override
	Widget build(BuildContext context) {
		return Scaffold();
	}
}
// ....

Clean up the unused functions and variable like _counter and _incrementCounter. If your editor has integrated linter and dart analyzer it would complain regarding unused variable. Once cleanup’s done, implement now a centered hello world text by adding body to the scaffold.

class _MyHomePageState extends State<MyHomePage> {
	@override
	Widget build(BuildContext context) {
		return Scaffold(
			body: Center(
				child: Text('Hello World!'),
			),
		);
	}
}

Now run your code using the command flutter run. If a device’s connected it will show an app displaying a centered hello world. You could also use an emulator by running flutter launch before running flutter run.

So what’s next?

Now after everything’s done, we will continue building our stocks monitor app on the next chapter. Stay tuned. Hit like if you like, subs if you love and as always live life.

Beautifully Design PDF Using CSS3 and AsciiDoctor

The future belongs to those who believe in the beauty of their dreams.

— Eleanor Roosevelt.

Planning to create e-book but don’t know what tools you’ll be using?

In this day of age, no one will stop you building your own e-book not even publishing house. With the increasing tool set that will make publishing easy, you can now with open source tools.

In this article we will be discussing on how to make a beautifully designed PDF using CSS3 and ASCII Doctor. So how do we do that?

Creating the Workflow

After searching through all the internet, we found multiple clues on how big publishing house produces ebooks using AsciiDoctor and HTML5. Unfortunately, most of them are using proprietary tools like PrinceXML and Antenna House to create beautiful and well design PDF outputs. But don’t lose hope, as we got you covered in this how to.

First, you may need to setup your workstation in order to produce beautiful rich PDF. You need of course asciidoctor.

gem install asciidoctor

After asciidoctor you need to install weasyprint.

pip install weasyprint

If you’re curious why I would pick weasyprint, it’s because there are no good tool set in ruby. Most of the HTML5 to PDF in ruby gems relies on wkhtmltopdf binary, not including prawn which relies purely on hard-coded design which your probably not that familiar with compared to CSS3.

Now it’s time to get your hands dirty, create a simple ASCII Doctor document:

:doctype: book
:author: Some Author
:doctitle: Some Title
:description: Some Description
:keywords: some keywords
:toc:
:toclevels: 2
:sectnumlevels: 2
:icons: font
:icon-set: fa
:stem:
:hide-uri-scheme:
:source-highlighter: pygments
:pygments-style: xcode
:imagesdir: assets/images
:chapter-label: Chapter
:appendix-caption: Appendix
:creator: {author}
:uuid: e9a22dcf-2d0a-4237-addd-527fb847d816
:front-cover-image: image:cover.png[cover,1050,1600]
:title-logo-image: image:logo.svg[pdfwidth=4.25in,align=center]
:copyright: (c) {docyear} Some Press
:lang: en
:sourcedir: {docdir}/samples/code
:datadir: {docdir}/samples/data
:nofooter:
ifdef::backend-html5[]
:data-uri:
:stylesdir: {docdir}/assets/styles/html/themes
:stylesheet: asciidoctor.css
:linkcss:
:mathematical-format: svg
:mathematical-ppi: 300
endif::[]

= {doctitle}

// And more...

As you can see in line 39-40 the word stylesdir and stylesheets which you need to create and modify. This stylesdir will be the path on which you will be storing your custom CSS3 stylesheet.

Assuming your working in the root directory of your ASCII Doc project. Create a themes folder on which will hold your CSS files. After that clone the asciidoctor-stylesheet-factory repository on which you’ll be spending time to customize the design of your PDF.

mkdir -p $PWD/assets/vendor
git clone https://github.com/asciidoctor/asciidoctor-stylesheet-factory $PWD/assets/vendor/asciidoctor-stylesheet-factory

Then change the stylesdir in your asciidoc document to point to /assets/vendor/asciidoctor-stylesheet-factory/stylesheets. It’s not yet finish as we need to generate required CSS files.

cd $PWD/assets/vendor/asciidoctor-stylesheet-factory
bundle install
npm install cssshrinkwrap
./build-stylesheets.sh

The commands above if deconstructed would be.

  1. Change directory to the cloned repository path.
  2. Install all the gems required by the repository.
  3. Install node dependency to minify the CSS needed in build-styleheet script.

Alternatively, you could run compass compile which skips the whole process of minification inside the build-stylesheet script. As a side note, always study all the command before executing it on your own workstation.

Now this where the fun begins, modify the theme (SASS file) you want to use inside the repository that we cloned. Compile the file and generate your PDF.

asciidoctor --backend=html5 -a max-width=55em --out-file=sample.html my-sample.adoc
weasyprint sample.html sample.pdf

What this will do is create an HTML5 compatible document from asciidoc source. Then from the sample.html generated from last command, use it to generate PDF file.

Voila! A generated PDF with CSS design.

So here’s a recap of what you’ve learned so far.

  • Get to know the tools needed to create a beautifully designed PDF.
  • Modify stylesheets intended to create PDFs.
  • Generate HTML5 from asciidoc source.
  • Create PDF from HTML5.

Also I’d recommend this book if you want to learn more about CSS3.

Where to go now?

Now, that you know how to style and generate PDF with CSS + HTML5. On next chapter we will go in depth on how to make an e-book. Stay tuned.

If you haven’t subscribe yet… Check out the companion YouTube channel Where It All Started. Also don’t forget to click subscribe and tick the notification bell.