Quick basic introduction to Ethereum Development

Wednesday, 20 July, 2022 by Juan Lebrijo about blockchain, Ethereum

You need to install Metamask as an extension in your Chrome browser. After that, create a wallet address and change to Ropsten Test Network.

Now go to buy ETH and get it from a Test faucet. Then you can play with it by creating another account and sending ETH between them.

Here the big thing is the TRANSACTION SIGNATURE, how knows the Network that you are really the owner of this transaction? Because of Asymmetric signature, you will sign the transaction with your Private Key, so the node knows you are, because it decrypt with your Public Key. Metamask do all of it for you, also saves your private key.

Now you have ETH to test your wallet, you will code with SOLIDITY.

It is a language based on JavaScript designed to target Ethereum Virtual Machine (EVM).
Statically typed, supports inheritance, libraries and complex user-defined types. And compiled in Bytecode.
You can create SMART CONTRACTS with it.
You can find whole guide to this language at https://docs.soliditylang.org/
You can use Remix as web editor in your browser, or Truffle installed locally.
In order to test your contracts you have several options:
- Injected Web3: testing over Ropsten Network directly.
- JavascriptVM: more agile, but it is a Network simulation.
- Web3 Provider: which mounts an ETH Blockchain in your Laptop, from Genesis Block. Ganache, which belongs to TruffleSuite, can do it really clean.

Enjoy your learning!!

Hotwire: Turbo Frames

Tuesday, 19 July, 2022 by Juan Lebrijo about Hotwire, rails, Turbo

Tubo Frames decompose your page in parts using tag <turbo-frame>, which can be replaced by copies received by the server, just locating and replacing them thanks to identifiers. For example we can manage a message in your list of messages annotating with this tag “_message.html.erb”:

<%= turbo_frame_tag @message do %>
......
  <%= link_to @messages, data: { turbo_frame: "_top" } %>
......
<% end %>

In this ERB code frame would be replaced inside the tags, but the link to all messages will be replaced in full body of HTML page. Here is the translation to HTML code:

<turbo-frame id="message_1">
......
  <a href="/messages" data-turbo-frame="_top" />
......
</turbo-frame>

In controller we send only “_message.html.erb” rendered

def show
  @message = Message.find(params[:id])
  render @message
end

Eager-loaded frame: Replaced when “/messages” are loaded. Adding “src: @messages” to your ERB file.

Lazy-loaded frame: Content will be replaced when frame is visible. Add [loading: “lazy”]to ERB tag

Frame targets: manage where to be replaced

[target: “_top”]: All links/forms within replace full window.
[target: “main”]: All links/forms within replace “main” frame.
[data: {turbo_frame: “_seld”}]: In a “_top” frame resets the link to self replacement.

Advance/replace on browser history: By default takes replace strategy, but you can create copies: <turbo-frame data-turbo-action=”advance”>

Anti-forgery support (CSFF):

Auto managed by Rails, adds a <meta> in header with “csrf-token” name attribute.
Then all submissions send “X-CSRF-TOKEN” in HTTP header. Except when: data-turbo=”false”; which disables turbo in this element.

Several Frame attributes and JavaScript properties:

src (Frame.src in JS): path to control the navigation URL.
loading (Frame.loading): navigation eager or lazy.
disabled (Frame.disabled): Frame disabled for navigating.
autoscroll (Frame.autoscroll): Scroll after loading. Values are: end|start|center|nearest.

Check reference, they are very useful on development.

Turbo Drive

Saturday, 16 July, 2022 by Juan Lebrijo about Hotwire, rails, Turbo

Is the most important part of Turbo, despite it seems the simplest, I think it’s because frames and streams seems more spectacular. It basically avoids full-reloading of HTML page, just replacing the <body>, giving a clean sense of navigation. Intercepting usual HTTP requests and use fetch for server calls. It also manages full browser history with advance/replace/restore actions.

We can decompose its main features in 15 points:

Page navigation basics:
- Visit (def.): Entire navigation lifecycle is: change browser history -> fetch request -> restoring a copy from cache -> rendering response -> updating scroll position.
- Types of visits are: Application (as an action of advance/replace) and restoration (as an action of restore cache page)
- You can also delete all cache with: Turbo.clearCache()
Application Visits
- Turbo.visit(location) tries to render a preview, if exists, of the actual view. Then replaces it and add to history with history.pushState.
- If you want to replace the state of the browser-history, you can manage it by a tag <a href=”/edit” data-turbo-action=”replace”/>. Or by JavaScript: Turbo.visit(“/edit”,{action: “replace”}).
Restoration visits: These are fired when you click on back/forward buttons in your browser or mouse.
Canceling visits before they start: You can do it by listening the event “turbo:before-visit”. Preventing default behavior with event.preventDefault(). And finally you can check location in event.detail.url.
Pausing rendering: You can do it by listening the event “turbo:before-render”. Preventing default behavior with event.preventDefault(). Do things you want to do. And resume rendering with event.detail.resume() function.
Pausing requests: The same as before point but listening “turbo:before-fetch-request”.
Links with different methods: Method fired by a link by default is GET. You can replace it: <a href=”/article/64″ turbo-data-method=”delete”>Delete article</a>.
Disable Turbo on specific links or forms: It can be disabled for links <a href=”/articles” data-turbo=”false”>Disabled Turbo</a>. Or directly importing Turbo in JavaScript: Turbo.session.drive=false.
Displaying progress: Drive installs a CSS Turbo progress bar by default:
- Appears when action takes longer than 500ms (you can change this time with Turbo.setProgressBarDelay()).
- To manipulate CSS appearance with class: .turbo-progress-bar.
- Also puts to true “aria-busy” attribute, and false when all action is done.
Reloading when assets change: When an asset changes in <head> full page is reloaded. For that purpose you have to put [data-turbo-track=”reload”] and version ID in all header assets.
Force full reload for certain pages: Include in <head> the tag: <meta name=”turbo-visit-control” content=”reload”>
Setting root location: You can have a concrete path for your app like “/app” and all others are completely different apps. Include in <head> this: <meta name=”turbo-root” content=”/app”/>. And Turbo will be disabled in other roots.
Form submissions:
- Form lifecycle can be manipulated through events (see Reference/Events)
- Turbo also sends a “disable” attribute to submitter (submit button)
- Events like: “turbo:submit-start”, “turbo:before-fetch-request”,…
Redirecting after form submission: Turbo waits for 3xx redirect responses to fetch content. Except on 4xx (wrong inputs) or 5xx errors.
Streaming after form submission:”Content-Type: text/vnd.turbo-stream.html” with content of several <turbo-stream> elements, so you can replace all of the in one action.