Where It All Started.

Where It All Started.

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

Tag: rich content

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. ↩︎

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.