Meteor Blaze Templates done right!

I often hear amazing and simple people find Meteors Blaze render engine, but in the same sentence mention how its difficult to manage large templates or create re-useable components. In my last two+ years working with Meteor I came across the same hurdles, but also found great solutions. So I thought its time to share my best practices in a blog post. Though this post is for advanced user, I want to give new comers a short intro into Meteors. If you’re looking for something specific you can jump right there: Using template-var Passing data around Accessing template vars from inside callbacks Reacting on data context changes Passing data in …

Add better modals to ethereum:elements

ethereum:elements gives you useful elements to make building a dapp more fun. One element, which was there since a while has now got a better API. Instead of realing on iron:router, it uses now a global object called EthElements.Modal to show and hide modals, read below to see how you can make use of them. Note that when you use the modals in combination with the dapp-styles, they look even more awesome! To start just place a modal placeholder before the closing body tag. {{> dapp_modalPlaceholder}} Render without route To render the modal simply call: EthElements.Modal.show(‘myContentTemplate’); // Or with data for the template EthElements.Modal.show({ template: ‘myContentTemplate’, data: { myData: ‘some …

Improved ethereum:tools and ethereum:elements

Right when kraken.com starts trading I’ve add a new EthTools.formatBalance() method to the ethereum:tools package, which allows you to display an ethereum wei value in any ether unit or supported currency from kraken (BTC, USD, EUR, CAD, GBP and JPY). Simply use: // HTML/Blaze {{dapp_formatBalance “1000000000000000000” “0,0.00[0000] UNIT” “btc”}} // JS EthTools.formatBalance(“1000000000000000000”, “0,0.00[0000] UNIT”, “btc”) // “0.012345 BTC” I’ve also add a special EthTools.toWei() method, which allows you to convert e.g. BTC to to wei: var wei = EthTools.toWei(23, ‘btc’); // wei = “80000000000000000000” There are many more helpful methods (EthTools.formatNumber(), EthTools.setUnit(), EthTools.getUnit, EthTools.ticker, EthTools.setLocale()) in that package take a look its readme for more. Note that the ethereum:tools package …

Ethereum Meteor package updates

I add a new element to the ethereum:elements package, which gives you a simple account select with identicon: Additionally I improved the {{> dapp_addressInput}} to it now removes whitespaces and adds the 0x to any address. Also take a look at the new improved ethereum:tools, ethereum:accounts and ethereum:blocks package. https://atmospherejs.com/ethereum (ethereum:tools works also without meteor, by simply linking the ethtools.js) If you wonder how to get the static files of your meteor dapp check out meteor-build-client.

Ethereum launches!

The real Ethereum network will launch 3h from no, when every user generates the new genesis block based on the blocks hash of block number 1 028 201 of the Ethereum testnet. Prepare for the next level of block chain applications! The following video is a SAP advertisement, but it describes very good what ethereum can/will do in a not to distant future:

Meteor Build Client

Since more to than 2 years I’ve build Meteor applications. Interestingly I’ve build most of them only using the client part. Working with TunedIn we used a LAMPP stack API, and in my current work I use Meteor to build Ðapps, which don’t have a server in the traditional sense, instead they only talk to the blockchain and get delivered over swarm, a decentralised filesystem. I wrote a while back about using Meteor as frontend library and wrote a little grunt script, which did this. My blog post got more than 3000 hits in just two days, so there seems to be a great interest in that use case. A …

Template-Var update

I am very busy improving the ethereum platform API and therefore i’m not writing to much updates here. One improvement i did to a package of mine today i want to share, though. Template-Var the package, which allows you to set template specific reactive variables has now two new methods: TemplateVar.getFrom(selector, propertyName) – which allows you to get receive vars from other templates by simply passing a selector of one of its elements. TemplateVat.setTo(selector, propertyName, value) – which does the same for setting reactive vars to other templates. Inside this other templates instances you can still use TemplateVar.set()/.get to alter the reactive variables as well. Hope you like and use …

Meteor-platform packages and loading screens

Most people are confused about Meteor and what it consists of, its like a black box with confusing packages and dependencies. To bring a little light in this I will drop here a list of all the packages, which make up the meteor-platform package. If you remove it from you app, you have a plain app, without any meteor in it:

mycoindesk.com, an altcoin profit tracking tool

A while ago I made mycoindesk.com an altcoin profit/loos tracking tool. I planned to charge a few bits when I get thousands of users and become super rich… though they didn’t seem to come I actually forgot to post it here, so I’m now doing this. Its quite useful for myself and saves me the roundtrip from coinmarketcap.com to cryptsy.com to poloniex.com. I don’t plan to charge anything for it now, but you can always give me a bittip

On Angular.js

Probably everyone who want to built modern web applications stood once before the choice of the framework, so did i a 2 years back. At the time angular.js became popular and i stood before the decision to either use backbone, ember.js or angular. What i didn’t like about angular was its very specific HTML attribute syntax. I wanted to write clean HTML not some custom attribute mess. Luckily i stumbled over Meteor! At the time Meteor was not quite ready yet and single page apps were not the standard, so it was quite a risk. I went that road and build a Meteor app, which only used its frontend part …

Meteor Book and updated packages

Its a while since wrote something here, so i will post an update of whats going on in the background. My book Over the last 9 months or so i wrote a book called “Building Single page Web Apps with Meteor” and i’m finally almost done. I’m currently writing on the last chapter titled “Testing in Meteor”, which drags a little as velocity – meteors official testing framework is quite not ready just yet. The book writing experience was long, though it was a very fluid process until the last few months were i basically ran behind every change in the API to keep all chapters updated But i finally …

Updated Meteor template animation helper

UPDATE 04.06.2015 Better use the new template animation helper, which uses ui_hooks to start animations: https://atmospherejs.com/frozeman/animation-helper Its a bit since i posted something. I’m actually busy building http://tunedin.de/featured I just wanted to post something about a package i wrote a while ago and, which serves me well since then. template-animation-helper i just released a fixed version, which works well with Blaze, Meteor’s new template render engine. So if you didn’t try it yet, go here http://templateanimationhelperdemo.meteor.com And grab the package at https://atmospherejs.com/package/template-animation-helper. Thats it! PS. if you’re into crypto currencies like i am, take a look at NXT, it looks very promising http://nxtra.org/nxt-wallet/

Bitcoin Browser Wallet

Quick links Github Chrome Web-Store (automatic updates) I follow bitcoin since march 2012 and i’m very much convinced by its superiority to other payment systems and currencies. Bitcoin rose 2012 from 20 to 1200 USD and we will probably see more heights this year. One of the biggest stoppers for bitcoin, in my opinion right now, is the missing of easy tools. Tools which make payments in every day life as simple or simpler than credit cards or paypal. I was surprised that i couldn’t find any simple browser based plugin, as the browser would be for me the most natural place to put a wallet. Because your can use …

Meteor View Manager

Update This package just got mentioned in Meteor weekly meteorhacks.com/meteor-weekly-meteor-new-version-10000-github-stars-dynamic-templates.html Update This package is now BLAZE ready, the new render engine of meteor, therefor there are some syntax changes. The view-manager package works like the Session object in meteor, but has some handy features. To place a template somewhere, just add the {{DynamicTemplate placeholder=”myKey” context=myData}} helper somewhere and then call: View.set(‘myKey’,’myTemplateName’); This will render template in its place. You can call View.set(‘myKey’,false); to remove it. Additionally you can pass an object to give it data context e.g: This context will then be merged with the context passed in template (dynamic content overwrites template set context) View.set(‘myKey’,{ template: ‘myTemplateName’ context: { …

Meteor template animation helper

UPDATE 04.06.2015 Better use the new template animation helper, which uses ui_hooks to start animations: https://atmospherejs.com/frozeman/animation-helper UPDATE 23.10.2013 You can now also pass a template name to the {{AnimateTemplate “…”}} helper, this will render the template in place, switching a hidden class to animate on the element(s) with the class animate. Additionally the data context of this template gets the _templateAnimationKey, so you can manually fade the template out. To do that call the following inside a helper or event of that template: Update made BLAZE ready, the new render engine of meteor View/Session.set(this._templateAnimationKey, false); If you’re inpatient check out atmosphere. I love meteor for its simplicity, but there is …