Where It All Started.

Where It All Started.

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

Month: November 2018

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.

Automating HTML5 Generation With AsciiDoctor

If you’re a documentation nerd or somewhat planning to create content for publishing, surely you will encounter ASCII Doc. ASCII Doc is being use by different publishing giants like O’Reilly to create books and content.

One problem I encountered is generating HTML documents from asciidoc format. So how do I automate it?


Better to die fighting for freedom then be a prisoner all the days of your life.

— Bob Marley.

Prerequisites

  • Ruby 2.5 and above

So how do we render HTML5 from ASCII Doc?

We proceed by getting all the required gems. The first step is get the file watcher to watch for changes.

gem install asciidoctor guard guard-shell guard-livereload yajl-ruby

The livereload gem watch changes in the file system. Also, you may need to install companion browser extension.

After the installation of Chrome Extension, you need to check “Allow access to file URLs” checkbox in More Tools > Extensions > Live Reload Details in order for it to work with local file URLs.

Then we create a Guardfile with the contents below.

require "asciidoctor"
guard "shell" do
	watch(/^solidity\.adoc$/) {|m|
		Asciidoctor.convert_file m[0]
	}
end
guard "livereload" do
	watch(%r{^.+\.(css|js|html)$})
end

The first guard block converts file to HTML5. Then after that the second guard block watches for file changes and reloads browser.

When all is done start the guard process to monitor and serve files.

guard start

That’s it guys we created our workflow for generating HTML5 using the asciidoctor format. Hit like if you like, subs if you love and as always live life. Hope you guys, enjoyed this article!

Creating A Browse-able Virtual File Archive In Linux

In Linux, there are many ways to create a virtual file archive. A virtual file archive is a storage file which immitates an inode storage device, meaning its similar to what a physical drive can do but contained in a single archive. So how do we create this virtual file archive? What we will be using is the most primitive way to create a virtual file archive using Linux built in tool set.


The secret to happiness is freedom…​ And the secret to freedom is courage.

— Thucydides.

Prerequisites

The tooling that we will be using is already built in Linux. To be transparent what I’m currently using is Arch Linux.

  • dd
  • losetup
  • mount

So what do we do now?

Create the file that will be using as file archive.

dd if=/dev/zero of=gem.bin bs=1024 count=0 seek=1G

Setup a loop block device to handle input/output (emulating physical drives).

losetup /dev/loop0 gem.bin

Create the mountable directory.

mkdir -p /mnt/vfa

Mount the loop block device to the mountable directory.

mount -t ext3 /dev/loop0 /mnt/vfa

So guys, if you like this article hit like and subscribe.
Hope you guys, enjoyed this article and as always live life!