DEV Community: Edward Ezekiel

Live Stellar Wallet for Testing Smart Contracts

Edward Ezekiel — Tue, 23 Jul 2019 21:04:51 +0000

I am very happy to announce the Live version of my open-source Stellar testnet wallet. Here is the code on Github.

This is for Stellar enthusiasts and anyone working on stellar smart contracts. Below, I’ll (1) explain why this tool is useful, (2) discuss some background information about Stellar smart contracts, (3) provide short answers to some of the most challenging questions I faced during development, (4) give brief instructions on how to use this tool, and (5) list some resources that I found helpful.

Disclaimer : I built this as an educational experiment and the program has not been thoroughly tested.

1. Why Build this Stellar Tool?

I work at a blockchain development company called web3devs. We’re probably most well known for our work on Ethereum smart contracts, but we also work with Stellar smart contracts!

Although Stellar.org explains the concepts behind Mutisignature Escrow Account with Time Lock & Recovery, and provides example codefor creating a multi-sig account, they do not show how to implement the time lock or recovery methods. With this post, I am releasing that code and a live demonstration of how it works.

2. Background Information

Most applications interact with the Stellar network through Horizon, a RESTful HTTP API server. See Stellar.org. You use a SDK to interact with Horizon. I used the Javascript SDK.

There are significant differences between Ethereum and Stellar smart contracts. For one thing, Ethereum smart contracts are written in Solidity, which is a Turing-complete language.

In contrast, stellar smart contracts can only accomplish a limited set of tasks. You use a common programming language like JavaScript or Go to You interact with Horizon, which is an interface between Stellar Core and applications that want to access the Stellar network.

3. Pernicious Bugs and Tricky Questions

Why Does My Transaction Keep Failing (Getting 400 Response from Horizon)?

You didn’t set the base fee:

const baseFee = await server.fetchBaseFee();

const transaction = new StellarSdk.TransactionBuilder(account, {
 fee: baseFee })

You didn’t load the account before building the transaction:

const account = await server.loadAccount(sourceKeys.publicKey());

const transaction = new StellarSdk.TransactionBuilder(account, { fee: baseFee })

Why can’t I submit the Unlock XDR to Horizon?

You may be trying to submit the XDR too early. The unlock XDR can only be submitted after the lock-up period is over. This is a little confusing, because you have to create the unlock transaction before the lock-up period is over.

The solution is signing the unlock transaction, and saving that transaction somewhere publicly. Only submit the unlock xdr to Horizon once the lock up period is over.

try {
 // Save as an XDR string
 const transactionXDR = transaction
 .toEnvelope()
 .toXDR()
 .toString("base64");
 console.log("FN: unlock", "Success! Results:", transactionXDR);
 return transactionXDR;

How do I set Timebounds?

It was not easy to figure out the syntax for setting timebounds. Here is what finally worked for me:

// The unlock date (D+T) is the first date that the unlock transaction can be
 // submitted. If Transaction 3 (this transaction) is submitted before the
 // unlock date, the transaction will not be valid.

const transaction = new StellarSdk.TransactionBuilder(escrowAccount, {
 fee: baseFee,
 timebounds: {
 minTime: (
 Math.floor(Date.now() / 1000) + parseInt(unlockTx.unlockDate)
 ).toString(),
 // The maximum time is set to 0, to denote that the transaction does not have
 // an expiration date.
 maxTime: (0).toString()
 },
 sequence: (parseInt(escrowAccount.sequence) + 1).toString()
 })

4. Instructions

In order to use this tool you’ll need to create at least two testnet accounts. You can make new accounts within the tool by clicking the “Create Stellar Account” button. Just take note of the public and private keys that pop up in the header. You can also use these pre-made test accounts:

Seller/Destination

Public Key: GCHVXWBLCPWRMAF7QNKPB22JJX6VYTMX2JQ5XAVMEM6PD5HRHF42EZIC SecretKey: SAI2UOI47OBALUI4YAUVPZ3QN3LTYM5CXP3MEKGQR64OWVSLT6M7Q2VK

Buyer

Public Key: GDEJU3BKAPMDP3SAXEE5C5T2IE6363ZSZMR7SS3YZTOQJZ3L24YJSZ4G Secret Key: SDCS7UCINHWVEWFUNHRXZRUU5WQ7ZAIPHXQNED4IBQ2U6Y45W72U22ST

Note: these are test accounts so no real money is involved. You should never post a secret key to an account on the public stellar server.

You can image one account as a “seller” (the Destination), and another as a “buyer”. The buyer creates the escrow account and adds the seller (Destination) as a signer. When the lockout period expires the seller can use the XDR to “unlock” funds in the escrow account.

5. Resources:

Here are some of the resources I found helpful:

Stellar Laboratory:I constantly had this tab open to test various operations, transactions, etc.
Michiel Mulders Article: Helps you get a little more familiar with the concept of account signers.
Sylvain Faucherand Article: Covers a basic escrow account, but doesn’t address how to make it time-locked.
Robert Durst Article: If you’re still scratching your head about account signatures.

Coding Tips For New Web Developers

Edward Ezekiel — Wed, 26 Jun 2019 16:01:42 +0000

If you follow my blog you know that I recently graduated from a coding bootcamp and started work as a web developer.

I can’t believe I’ve been on the job about a month already! Here are some of the tips and pitfalls I’ve come across during my first month.

React Hooks are Amazing

The first project I worked at at web3devs used React Hooks extensively. Before working at web3devs I had been putting off learning hooks. I didn’t see the point of adding Hooks when React already seemed to work fine.

After using hooks for a few weeks, I intend on using them in every React project moving forward. I love being able to forget about class components. My favorite part about JavaScript is the emphasis on functional programming. React hooks do a great job of building on top of this programming style.

I find that my components are more composable, flexible, and fun to use.

HTML5 has a Built-in API for Form Validation, But Use Cases Are Limited.

If you’ve ever added required to an input field, then you've used HTML5's built-in api for form validation. required is a simple way to prevent a user from submitting a form if they, e.g., forgot to enter their email in the form. If the use clicks submit, a standard message will pop up telling the user that the field is required.

However, using the native HTML5 form validation causes some issues when you’re working in a react project. Specifically, it gives the browser’s DOM control over input fields (making it an uncontrolled component), whereas most react forms should use the virtual DOM (making it a controlled component).

One of my favorite bloggers, Flavio Copes, eloquently explains the importance of controlled components:

There are two main ways of handling forms in React, which differ on a fundamental level: how data is managed.

if the data is handled by the DOM, we call them uncontrolled components
if the data is handled by the components we call them controlled components

As you can imagine, controlled components is what you will use most of the time.

Sonny Recio explains that “[w]e’re potentially violating React’s design patterns while doing so as we’re accessing the DOM properties using native javascript.”

My personal approach is to add required to a form input, then use the .checkValidity() api in the handleSubmit function.

Use git mv To Rename and Move Files

The toughest bug I’ve ran into so far was a git merge issue caused because I didn't use git mv. Using git mv to rename and move files lets you be explicit about your intention and helps to avoid some errors.

Here is a fantastic article on git mv explaining this issue. And no I didn’t find this article until after I resolved the bug. 😞.

Git projects are case-insensitive by Default.

When you initialize git in a project directory it automatically creates a config file. In that config file, you will see a line that says ignorecase = true. This means that if you rename a folder from "Components" to "components", on GitHub the folder will still be called "Components."

This issue came up simultaneously with my git mv bug, which lead to some very interesting behavior.

̶T̶O̶D̶O̶:̶ Become a Web Developer

Edward Ezekiel — Sat, 01 Jun 2019 16:50:06 +0000

̶T̶O̶D̶O̶:̶ Become a Web Developer

One year ago I was employed as an attorney in Atlanta, GA. Since then I’ve quit my job, completed an immersive software engineering bootcamp, moved to Memphis, TN, become a father, and signed a contract to work as a software engineer at an amazing Blockchain Development firm in Memphis, TN.

I’ve already written about why I transitioned from law to software engineering. This post is my chance to thank everyone who supported me, share a few lessons I learned along the way, and dream about what comes next.

I Couldn’t Have Done It Alone

I am incredibly grateful to my family, friends, and colleagues who supported me throughout this transition. I could not have done it without them.

First, I want to thank my wife Farley Ezekiel. She was supportive every step of the way. Changing careers is a scary move, especially with a newborn on the way, but Farley believed in me and encouraged me to follow my dreams.

On top of that Farley gave me the most incredible gift I could ask for, the gift of fatherhood (just in time for Father’s Day):

Second, thank you to my mom and to parents-in-law. Farley and I could not have made the move to Memphis when we did without their support.

Third, thank you to all the amazing instructors and staff at Flatiron ( Tammy, Brit, Rob, Emily, Ronny, Tez, Garry, …), my cohort (Kwam, Andy, Kaeland, Will, Cory, Blair, Paris), and my career advisory Mitzi. Each of you inspired me to do better and gave me the skills to accomplish my goals.

Finally, thank you web3devs, for taking the chance on a bootcamp grad without a CS degree.

Lessons Learned

Try Before You Buy: before I enrolled in a software development bootcamp, I tried out Udemy courses, learning material from other bootcamps, Free Code Camp, and other (mostly) free sources. Ultimately I felt like I learned best using Flatiron’s platform so I went with them.
Invest in Relationships: The job I start on Monday was never posted. I got it because I developed meaningful relationships with software developers in my job market.
Don’t Be Afraid: there are lots of scary parts about starting a bootcamp or a career in software development. Will I be good at it? Will I fit in with the community? Will I like it? If you are really curious about programming and want to learn more, don’t let these doubts stop you.
Post Up: I think this is true no matter what field you are in — if you want to be successful you have to put in the work. This also applies to your personal relationships. Make time for your friends and family, especially when things get tough.

Looking Ahead

There are so many things I want to learn going forward. I am particularly interested in developing static sites, using serverless features like AWS lamda, and learning the Express framework.

I also hope to give back to the programming community and to Memphis. If you are just starting your journey in software development I would be happy to talk. Just reach out using one of the social media icons on this site.

Building a Blazing Fast JAMstack App

Edward Ezekiel — Fri, 24 May 2019 16:58:24 +0000

I recently attended a meetup in Memphis hosted by Bryan Robinson. He is an accomplished web developer with a focus on creating static sites.

This got me excited to finally build my own static site using JAMstack architecture! So, I built this blog template (live) using GatsbyJS and Netlify. Here is the Github Repo.

Lighthouse Audit

I am very pleased with how the site turned out. I used the Lighthouse tool to audit the gatsby site and my blog. Lighthouse is built into the chrome browser. It is a great automated tool for performing webpage audits.

Here are the results:

Lighthouse scores for my React/Rails blog:

The scores are not terrible, but there is definitely room for improvement.

Lighthouse scores for the JAMstack site:

The JAMstack site almost scores perfectly across the Lighthouse metrics. Navigating through the site reflects these scores: pages loading blazingly fast and it generally feels crisp.

Resources

If you are interesting in exploring JAMstack further, here are some of resources I used while learning about this topic:

WTF is JAMstack? a straightforward primer on the JAMstack architecture.
Gatsby Tutorial: This will walk you through your first Gatsby app. There are plenty of “starters” on the site to help you get your first site up and running. I personally used the gatsby default starter.
Netlify
Tania Rascia: aka my web dev hero.

Looping Using ES6 Syntax (JavaScript)

Edward Ezekiel — Fri, 17 May 2019 21:49:35 +0000

JavaScript Loops Using for...of and for...in.

Earlier this week I was working on a coding problem that involved looping through characters in strings. I wanted to loop over all the characters in two strings to determine whether they were anagrams. This kind of task is common in technical interview situations.

This made me take a closer look at Javascript for loops. I was especially interested in the for...of and for...in loops, so I wrote this post to share what I found out.

Looping Through Elements in a String using for...of

So, what’s a good way to loop through characters in a string? One approach is to use a traditional for loop:

for (let i = 0; i < string.length; i++) {console.log(string.charAt(i))}

This kind of for loop has been around in Javascript since its inception twenty years ago. However, ES6 introduced some spiffy new syntax.

Since the introduction of ES6, you can use a for...of loop:

for (character of string) {console.log(character)}

Isn’t the for...of statement much easier to read than the traditional for loop! It also requires less typing, which means less room for error.

Are for...of and for...in Interchangeable?

TLDR: No, they iterate over different things.

Per MDN:

The for...of statement iterates over values that the iterable object defines to be iterated over.

The for...in statement iterates over the enumerable properties of an object, in an arbitrary order.

What is an iterable object?

An object is iterable if it defines its iteration behavior, such as what values are looped over in a for...of construct.

An object defines its iteration behavior when the object (or one of its prototypes up its prototype chain) has a property with a Symbol.iterator key.

Here are Javascript’s built-in Iterables:

String
Array
TypedArray
Map
Set

What are enumerable properties of an object?

According to MDN, enumerable properties are those properties whose internal enumerable flag is set to true.

This was a little cryptic to me at first glance. How can you tell whether an internal enumerable flag is set to true for a property?

Well, it turns out that there is a method baked right into the Object.prototype that answers this question. The method is called propertyIsEnumerable().

Once again MDN has a great example demonstrating how to use this method to check whether a specified property is enumerable. Here is a link to MDN’s example.

Back to My Example

Let’s take a look back at our example to confirm whether for...of and/or for...in works:

let myString = "valar morghulis"

"hello world"Symbol.iterator

// StringIterator {}

console.log(myString.propertyIsEnumerable([1]))

// true

As demonstrated above, strings have the Symbol.iterator method. In addition, strings are also indexed by character. Thus, you can usefor...of orfor...in to iterate over characters in string.

Javascript Testing With Mocha

Edward Ezekiel — Sat, 04 May 2019 20:47:10 +0000

Javascript Testing

One of my favorite parts about going to a coding bootcamp was all the automated tests. It was incredibly helpful to see whether my code contained errors, and to get hints about what might be causing those errors.

Now that I’ve graduated it’s up to me to write those tests for my own projects!

I had written some Ruby tests using Capybara, so now I wanted to try my hand at writing Javascript tests.

Mocha

In honor of “May the 4th Be With You” my alternative title for this post is “May the Mocha Be With You.” I found that Mocha was easy to get up and running and a pleasure to use.

Mocha is a Javascript testing framework. It works for testing JS in the browser, as well as JS that is executed in a node JS environment.

My First Mocha Test

I decided to write a Mocha test that would be executed in the node JS environment.

Here is the code:

// Require the built in 'assertion' library
 var assert = require('assert');

describe('Compare', function() {
 describe('Star Wars Quotes', function() {
 it('should test whether two data types are equivalent ', function() {
 assert.equal(true, typeof "May the Fourth Be With You" === typeof "Help me Obi Wan Kenobi, you're my only hope")
 })
 })
 })

This test passes, because both operands are strings, so function will return the expected output of true.

Lessons Learned

The Getting Started guide on mochajs.org has very basic instructions on how to get your first Mocha test running.

However, I kept getting an error message about my package.json file whenever I tried to run “npm test.” The error message claimed “no such file or directory” existed. Eventually I ran the command “npm init” from within the project directory. That created a package.json file within my project directory and that fixed the problem.

Resources

There are a lot of great resources out there to learn Mocha if you are interested. Of course, there is the official documentation at mochajs.org.

There is also a more in-depth tutorial on medium by codeburst

Agile Software Development

Edward Ezekiel — Sat, 27 Apr 2019 22:16:47 +0000

I had a great time attending the Agile Memphis meetup this past week. It was presented by Robert Newman, Lean Agile Coach and IT Leader at FedEx. Robert focused his presentation on tips for becoming a better agile SAFe coach. SAFe stands for the Scaled Agile Framework. More on that later.

My Experience With Agile

Agile development was the way we built software at Flatiron. We implemented Test Driven Development, Kanban Boards, Standup Meetings, and wireframing throughout the program. I used these methods to build each of my major projects.

What is Agile Development?

I recently listened to a podcast by Javascript Jabber on this topic. Here is a link to the episode. The episode guest stars James Shore, agile developer extraordinaire.

James Shore spent a fair amount of time discussing the evolution of Agile development. It was created in 2001 with the publication of the Agile Manifesto. I definitely recommend this podcast if you are interested in the topic.

SAFe Coaching

Back to the meetup and SAFe, Robert described coaching frameworks and shared stories from his work as a SAFe coach. I especially enjoyed hearing about the distinction between a manager and a coach.

Final Thoughts

Agile software development is a practice that I will continue to practice throughout my dev journey. I am especially interested in getting practice writing more tests for React programs.

CSS-Only Responsive Navigation Menu

Edward Ezekiel — Sat, 30 Mar 2019 23:24:04 +0000

This week I focused on my CSS skills by building a responsive navigation bar without using Javascript.

I’m really happy with how this project turned out! Here is a link to the codepen. It’s obviously not a full-fledged website, but I’ve wanted to build this kind of navbar ever since I started this blog.

The full desktop view displays a standard navbar links to various pages. If you view the site on a mobile device or if you shrink your browser window, you’ll see that the navbar shrinks to the “hamburger” button style.

Why This Project? Why No Javascript?

At Flatiron, we mostly used CSS frameworks like semantic UI or Bulma for navigation menu bars. I wanted to see what it would be like to implement a responsive navbar from scratch.

I decided not to use Javascript as a bit of a challenge. I just thought it would be fun to see what kind of advanced features I could build with CSS and HTML.

Flexbox

Flexbox does a lot of the heavy lifting for this project. If you haven’t used Flexbox before, or just need a refresher, I definitely recommend this game and this site to get started.

How does the “Hamburger” Menu Work Without JS?

The trick here has a few parts. First, add checkbox and label tags to the HTML. For the label I used the HTML unicode #9776. This is technically called the “Trigram for Heaven” glyph, but people generally recognize it as the “hamburger icon.”

Next, set the display for these elements to “none” in the stylesheet. After that, create a CSS media query for smaller screens, e.g., when the client is a mobile phone. On smaller screens the media query hides the navlinks and reveals the hamburger icon.

Clicking the hamburger icon toggles the navlinks back to flexbox display. However, the nav’s position is fixed, and the navlinks flex-direction is set to “column.” Taken together, this results in a hamburger menu that pops out navigation links.

Memphis Smart City Hackathon

Edward Ezekiel — Fri, 22 Mar 2019 17:34:41 +0000

Attending a Hackathon

I participated in my first Hackathon last weekend! It was Memphis’ “Smart City” Hackathon. I coded with a group of blockchain developers from web3devs on project we called “BlockSaver.” Here is the Github link.

The Hackathon theme was transportation and mobility, with a special focus on pedestrian safety. There are dozens of pedestrian deaths each year in Memphis.

I was blown away by what the groups came up with. One team designed a video surveillance system so that buses can “see” and record potholes in the road. Another group developed a system to to light up crosswalks automatically whenever a person walks by.

BlockSaver

My team created a web app called BlockSaver, which lets users geotag and report pedestrian safety issues like broken sidewalks. I built a substantial part of the frontend using React and basic CSS. That’s right, we did not use a CSS framework for the app. I thought this would be a great opportunity to improve some of my basic CSS skills. I wound up using Flexbox a lot and I really enjoyed the experience.

BlockChain

As I mentioned above, I worked on the project with a group of blockchain developers. So, of course our app had some awesome blockchain integration. They created an ERC20 smart contract on the Ethereum network that is tied to our app. Whenever someone submits a pedestrian safety report, the smart contract creates a transaction on the blockchain system, and gives the user a token.