08 Mar 2018, 16:38

i18n - vanilla javascript

I am getting tired of all this javascript frameworks.

Some years ago it was almost impossible to maintain a webapp compatible to all relevant browsers without some framework like jquery.

Now browsers have evolved enough to make it optional. And given the choice, I prefer the lightweight simpler approach of using vanilla js.

It is amazing how some simple features are usually done with plugins. One of them is translation. Ok, if you need more extensive support, it might be a good idea to use something but for the basics there is no need for anything more than a json file and one command

Example:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
var i18n_en = {
	weekdays: ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"],
  
	short_weekdays: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
	months: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"],
}
var i18n_pt = {
	weekdays: ["Segunda", "Terça", "Quarta", "Quinta", "Sexta", "Sábado", "Domingo"],
	short_weekdays: ["Seg", "Ter", "Qua", "Qui", "Sex", "Sáb", "Dom"],
	months: ["Janeiro", "Fevereiro", "Março", "Abril", "Maio", "Junho", "Julho", "Agosto", "Setembro", "Outubro", "Novembro", "Dezembro"],
}

1
<button id="butLoginCancel" class="mdc-button translate">but_cancel</button>
1
2
3
4
5
6
7
for(var el of document.querySelectorAll(".translate")){

    if(i18n[el.innerText])

      el.innerHTML = i18n[el.innerText.toLowerCase()];

}

So here you have it, it will replace all the elements with the .translate class and a content matching your translation json

Ah, and to use the i18n, you just have to load that variable with the selected version:

1
var i18n = lang=="pt" ? i18n_pt : i18n_en

that is it for now

20 May 2017, 07:30

Tinkerboard

Finally my Asus tinkerboard arrived.

Thinkerboard

Is it awesome? not sure yet…

Yes, it packs more power than raspberry pi, but it falls behind in so many things

The software is basically inexistent You get a standar linux and nothing more With no further ado, lets get it going.

step 1: ssh to it

1
2
	ssh linaro@your_ip
	

pwd: linaro

step 2: install go

1
2
3
4
	wget https://storage.googleapis.com/golang/go1.8.1.linux-armv6l.tar.gz
	tar -C /usr/local -xzf go1.8.1.linux-armv6l.tar.gz
	export PATH=$PATH:/usr/local/go/bin
	

… aaaaaaannnd I am out of space :'(

something is not right here, I have a 32gb sd card, I run fdisk and check that indeed my partition is 29gb but somehow my /root is locked to 2gb

well, anyway, lost a day playing around with that, in the end formatted my sd card before loading the image and it works.

22 Apr 2015, 16:19

did I run my migrations?

Today I had an error message driving me crazy:

1
 `method_missing': undefined method `export_format' for XXX model

You see, our model is a gem itself, because it is shared by several projects. When we have something in the schema that is not in the database, that is the error we get.

Now, I knew this error from previous executions, but my model was in synch with the DB.

I tried to comment out all my changes, without luck.

Until I realized. This error was in my specs.

I had run the rake db:migrate, but not RACK_ENG=test

In this situation I was happy I fixed the issue, but at the same time extremely angry I wasted 1h with that

Mental note: run both friggin migrations together in the future!

This might help:

1
alias migrate='rake db:migrate; rake db:migrate RAILS_ENV=test'

thanks to Eumir for this post

02 Oct 2014, 11:16

Go

Go logo

C is fast, but boring, Ruby is slow, but fun. Go is right in between

Let’s start with the fun bits:

  • You don’t import just a file, you import a repository. Reading import “github.com/tiagodll/golib” is beautiful, that alone gets me excited about go.

  • Returning multiple values. Yes, finally! You can set resp, err := MyFunction()

  • Ditching the ;. I never got the reason for it, maybe it is because I learned programming with VB, but to me it just doesn’t make sense.

Now to the boring

  • The name. Seems like nothing, but having a language called go makes google searches useless unless you use golang.
  • Not having try/catch. It sucks. Although returning value, error makes up for it quite well.
  • Having any not used lib/variable as an error instead of warning. It is ok when you have a final version, but that is really annoying while development phase. And the worst of all:
  • the insane amount of extra lines to assign a variable such as
    1
    2
    3
    4
    5
    
    temp := MyType{id:123}
    GetValueFromMongo(&temp)
    Printf("%v", temp)
    Instead of a simple
    puts get_value_from_mongo(123).to_s

and the grey area

  • Not having classes. I like the idea of having all static methods (unless it is really about the object they are in), but not having classes could have some issues, specially because of inheritance.

Regardless, this is my current language of choice. But this is just the beginning. Let’s see next what go is all about.

10 Aug 2014, 17:06

Dart + start + polymer = ?

So as I said in my Dart, what do we think about it? post, it is an interesting language to look into. It is lacking good libraries, but a problem can also be seen as an opportunity: it is a great time build your own.

Back to the topic, because of the pub system it is very easy to have dart + start or dart + polymer, but not as easy to have both.

There is a teeny-tiny detail it took me a couple of days to realize, but let me save this to the end of the post.

Start is simple, lets begin with that. first, the pubspec

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
<code file="pubspec.yaml">
name: onemore
description: A sample Polymer application
dependencies:
  polymer: '>=0.11.0'
  start: any
transformers:
- polymer:
    entry_points: web/index.html
</code>

Then all you need to do is to import the package and create a server side dart file to start it. In this example I am only serving static files, it would be just as easy to handle dynamic content with the get(url).

1
2
3
4
5
6
7
<code file="app.dart">
import 'package:start/start.dart';

main(args) {
  start(port: 3000).then((Server app) { app.static('build/web', jail: false); });
}
</code>

Done, you have a web server running in http://localhost:3000 as soon as you run this code.

Now, the polymer part to have a custom element we need 3 files: the dart, the html and the hosting html file. this custom element expects a String list, and publish (sends to the client) both lst and plist.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
<code file="elementlist.dart">
import 'package:polymer/polymer.dart';
import 'dart:convert';

@CustomTag('element-list')
class ElementsList extends PolymerElement {
  @published String list;
  @published List plist;

  ElementsList.created() : super.created(){
    try{
      plist = JSON.decode(list);
      plist.add({"id":"test"});
    }catch(e){
      print(e.toString());
    }
    polymerCreated();
  }
}
</code>

Here in the html we can use mustache style expressions

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
<code file="elementlist.html">
<link rel="import" href="packages/polymer/polymer.html">
<polymer-element name="element-list" attributes="list">
  <template>
    <div>the list: {{ list }}</div>
    <ul>
      <template repeat="{{elmt in plist}}">
        <li>{{elmt["id"]}}</li>
      </template>
      </ul>
  </template>
  <script type="application/dart" src="elementlist.dart"></script>
</polymer-element>
</code>

and then your index file you just have to add some references and include the custom element element-list.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
<code file="index.html">
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sample app</title>
    <script src="packages/web_components/platform.js"></script>
    <script src="packages/web_components/dart_support.js"></script>
    <!-- import the click-counter -->
    <link rel="import" href="elementlist.html">
    <script type="application/dart">export 'package:polymer/init.dart';</script>
    <script src="packages/browser/dart.js"></script>
  </head>
  <body unresolved touch-action="auto">
    before list<br>
    ---------------------<br>
    <element-list id="the_list" list='[{"id":1},{"id":2},{"id":3}]'></element-list>
    ---------------------<br>
  </body>
</html>
</code>

Now, let me explain the little detail that made me lose so much time: start is just serving the folder specified above. The problem is that all the polymer javascript is generated in the build, and stored there. So our start must serve that folder instead. to do that, all we have to do is to change the web to build/web in the start method:

1
app.static('build/web', jail: false);

That is all folks, hope you enjoy it.

24 Jul 2014, 17:04

Dart, what do we think about it?

yeah, about that…

Google’s attempt to improve on Javascript and get a server-side language at the same time. I have always wanted something else to thrive over javascript, and tried many good options like coffeescript or opal. Most of them are really good and easy to use as long as everything is correct. Sadly that is not what happens. The bug fixing is a vital phase of software development, and in this is the problem with all the languages that compile to javascript. Fixing the code is already hard enough as it is, imagine if you have to debug an auto-generated code in a language you possibly don’t master. For this reason I never adopted any of those for my development projects, and that is why dart quickly got my attention when they announced the dart VM embedded in chrome (ok, it is dartium, a branch of chromium but still counts).

Not just that, it is also a very flexible language where types are recommended but not enforced. syntax is a bit outdated, they opted for the java style to make developers feel comfortable. With languages like ruby and python getting more and more users everyday I am not sure it was the best decision. Although I have to agree, every developer feels familiar to a language with all the semi colons, curly brackets shenanigans that resembles java.

They have also done a good job in their package system, the pub. It feels just the same as using ruby gems.

Dart start is quite close to Sinatra, it is still lacking the template rendering, but it s a good start (pun unintended)

IDE. Ah, the IDE… why always Eclipse google? It is so bad, rebuilds workspace every other minute, hangs all the time. In fact, it hangs so much, my most used terminal command is “killall dart”. Seriously, why Eclipse again?

Overall it is good and I hope it works out. Being a google product, I believe it will be forced upon us like google+ anyway, so why not to make the best of it and enjoy all the benefits?

24 Jul 2014, 11:19

Dart

Dart logo

yeah, about that…

Google’s attempt to improve on Javascript and get a server-side language at the same time. I have always wanted something else to thrive over javascript, and tried many good options like coffeescript or opal. Most of them are really good and easy to use as long as everything is correct. Sadly that is not what happens. The bug fixing is a vital phase of software development, and in this is the problem with all the languages that compile to javascript. Fixing the code is already hard enough as it is, imagine if you have to debug an auto-generated code in a language you possibly don’t master. For this reason I never adopted any of those for my development projects, and that is why dart quickly got my attention when they announced the dart VM embedded in chrome (ok, it is dartium, a branch of chromium but still counts).

Not just that, it is also a very flexible language where types are recommended but not enforced. syntax is a bit outdated, they opted for the java style to make developers feel comfortable. With languages like ruby and python getting more and more users everyday I am not sure it was the best decision. Although I have to agree, every developer feels familiar to a language with all the semi colons, curly brackets shenanigans that resembles java.

They have also done a good job in their package system, the pub. It feels just the same as using ruby gems.

Dart start is quite close to Sinatra, it is still lacking the template rendering, but it s a good start (pun unintended)

IDE. Ah, the IDE… why always Eclipse google? It is so bad, rebuilds workspace every other minute, hangs all the time. In fact, it hangs so much, my most used terminal command is “killall dart”. Seriously, why Eclipse again?

Overall it is good and I hope it works out. Being a google product, I believe it will be forced upon us like google+ anyway, so why not to make the best of it and enjoy all the benefits?

09 Jan 2014, 11:25

Release It!

Someday your little database will grow up. When it hits the teenage years - about two in human years - it will get moody, sullen, and resentful. In the worst case, it will start undermining the whole system (and it will probably complain that nobody understands it, too).

Release It - Michael T. Nygard

15 Oct 2013, 13:20

Sharepoint full page little trick

For those of you with a very specific task to create a hotsite in sharepoint(MOSS) and can’t (or dont want to) create a new template just for that, here it goes: https://gist.github.com/tiagodll/6990155 with this simple snippet your div is the new body of your page so go ahead and put the whole html code you need in there. Loading ….

15 Aug 2013, 22:21

Css expandabox

Those of you following my posts for a while might know that I like javascript. I like javascript as much as I like not using javascript when I can use css instead.

So trying to make an expandable box I realised its behaviour is very similar to a checkbox. you have the small excerpt and when you click it you get the full text.

That being said, it is possible not only to change the label properties according to its state, but to set its state by clicking the label.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
<style>
  input[type="checkbox"].expand-content{ display:none; }

  input[type="checkbox"].expand-content + label .collapsed { display:block; }
  input[type="checkbox"].expand-content + label .expanded { display:none; }

  input[type="checkbox"].expand-content:checked + label .collapsed { display:none; }
  input[type="checkbox"].expand-content:checked + label .expanded { display:block; }
</style>

<input class="expand-content" id="theradio" type="checkbox" />
<label for="theradio">
    <div class="collapsed">
this is the small content</div>
<div class="expanded">
this is the big content</div>
</label>

This is also available on my gist profile