JSFiller, um sumário de informações e dicas sobre o utilitário

Eu já tinha visitado a página do jsfiddle (jsfiddle.net) algumas vezes,  nada a mais. A minha definição deste excelente utilitário era que eu poderia colocar meus códigos html, javascript et ccs e verificar o que iria aparecer, porém uma visão bem básica e generalista do produto. 

Tudo isto mudou a partir do momento em que eu estava procurando um utilitário para criar um gráfico sunburst e durante as minhas pesquisas do google encontrei um página do jsfiddle criada por duarteleao onde você poderia criar o seu gráfico sunburst conforme eu desejava.

Importante mencionar que "duarteleao" em sua página http://jsfiddle.net/user/duarteleao/fiddles/ tem exclentes opções de gráficos disponiveis. Logo gostaria de deixar os meus sinceros agradecimentos pelo trabalho realizado e a utilidade dos mesmos. 

Neste momento acabei aprendendo que eu poderia pegar o código do duarteleao e criar um fork  (cópia) para o meu usuário e fazer os ajustes que eu gostaria.  E foi o que fiz, conforme você pode ver na minha página http://jsfiddle.net/user/mtaribeiro/fiddles/ . Só para se ter uma idéia ele desenvolveu mais de 80 tipos de gráficos diferentes, vale uma visita.  

Gostando da brincadeira comecei a fazer alguns testes para ver como funcionava. Uma das minhas necessidades era criar o gráfico em vários níveis. Fazendo alguns ajustes na váriável cdaData do código javaScript e consegui o resultado desejado. Porém, vi que o texto não era apresentado dentro do gráfico. Outro ajuste na variáveis  width: 800 e  height: 800, e mais outro problema resolvido. 

Agora eu queria fazer um printScreen da tela para colocar na minha documentação e o gráfico não aparecia todo na tela, eu tinha que utilizar a barra de rolagem. E foi neste momento que comecei a procurar  mais informações sobre o produto e onde tive uma certa dificuldade de encontrar.

Sendo assim, criei esta página para colocar as informações encontradas e compartilhar o conhecimento também. ;) 

Vou pegar como exemplo o meu caso: Fiz um fork da pagina do duarteleao do gráfico e comecei a utilizar, todavia deseja algumas informações á mais.

Tendo como base a minha página http://jsfiddle.net/mtaribeiro/drv819f3/ evocê pode adicionar estes parâmetros e terá resultados interessantes.

• embedded = Os códigos JavaScript, HTML, CCS e o résultado são apresentado em abas (Tabs)
• embedded/result = Ver o resultado em uma página HTML
• show = igual ao commando embedded/result
• fiddles = abra a página de todos os fiddles de um usuário http://jsfiddle.net/user/<nomedo_usuario>/fiddles/ . Exemplo minha página http://jsfiddle.net/user/mtaribeiro/fiddles/

Links: 

• documentação = http://doc.jsfiddle.net/index.html# 

Uma informação que procurei e não encontrei é saber se tem uma lista de usuários ou utilitários no JSfille. Se souber, me informe para atualizar a documentação.

Bem, espero que tenha ajudado a esclarecer algumas dúvida e eu continuo a aprender como utilizar este excelente utilitário. 

Web responsive design e Advanced javascript debugging slides e dicas

Montreal, 25/1/2016

Participei de uma palestra sobre web responsive design, organizado pelo grupo MSDEVMTL e a Microsoft oferece o local.

O conferencista foi Frédéric Harpere (web site http://outofcomfortzone.net/ )o link dos slides da palestra encontra-se neste endereço:

http://www.slideshare.net/fredericharper/responsive-web-design-the-secret-sauce-msdevmtl-20160125

Links de aplicativos apresentados na palestra:

• http://www.alistapart.com/articles/responsive-web-design/ 
• https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills 
• http://stunningcss3.com/code/bakery/ http://www.lukew.com/ff/entry.asp?1514 
• http://mediaqueri.es/ 
• http://getbootstrap.com/
• http://www.abookapart.com/products/responsive-web-design www

O outro palestrante foi Rami Sayar sobre Advanced JavaScript Debugging 

slide: http://www.slideshare.net/ramisayar

Shell Linux em uma máquina Windows, simples, fácil e versátil.

As vezes, temos necessidade de rodar alguns comandos ou aplicativos linux em uma máquina windows e ai as coisas começam a complicar.

Um software muito conhecido, bom e grátis é o Cygwin, onde você instala os software que deseja sob demanda.

Porém, um colega de trabalho descobriu o babun . Ele é gratis, utiliza o Cygwin e tem uma interface muito user friendly.

Porque não testar?

Fica a dica

Linux simples e fácil - Para iniciantes também :)

Hoje no trabalho me apresentaram uma versão do linux que eu não conhecia, digo ouvi falar. Não sou nenhuma refêrencia nesta área :)

O nome da versão é Manjaro, muito simples de usar e user friendly.

http://sourceforge.net/projects/manjarolinux/?source=typ_redirect

Não precisa nem perguntar se é gratuito, pois é com certeza.

Para testar, installei tambem um software de virtualização muito conhecido e grátis, o Virtual Box  .

Após a instalação, fiz alguns testes e funcionam muito bem.

Pronto,m agora vc pode continuar com a sua versão windows e quando quiser brincar um pouquinho em um novo ambiente/conceito, seja bem vindo ao Manjaro ;)

MongoDb - Replication - Passo a passo

Resumo de como criar uma replicação utilizando Mongodb em uma máquina MAC

Conceitos gerais:

• asynchronous com Slave
• Master (Primary) - slave (Secondary)
• RF=Replication Factor
• Majority é eleito por consenso
• Escrita é sempre no primario
• Statement-base vs binary (similar crash on recovery journal)
• normalmente o oplog é 5% do tamanho do disco
• o diretório journal é onde guarda os dados
• "Write is truly when committed upon application @ a majority of the set" and "we can get knowledge of this"
• uma coleção no Slave pode haver ordem diferente do primary

Replication:

• Automatic Failover
• Automatic node recovery
• 
  

// Creating Recovery Set (RS)
levar em consideração portas, dbpath et nome do RS

// Criar diretórios para guardar os arquivos do RS
Ex. para criar 3 diretórios sobre o diretório corrente para guardar os RS
mkdir 1 2 3

mongod --port 27001 --replSet abc --dbpath /user/NomeUser/dba/1
--logpath /user/NomeUser/dba/log.1 --logappend -- oplogSize 50
-- smallfiles --fork

Este comando deve ser repetido para cada RS, trocando com certeza o nome do diretório e o nome do arquivo de log

// como inicializar o RS

1. criar uma variáve com os dados de configuração
2. Inicializar o RS
1. Mongo --port 27001
2. config

//exemplo de arquivo de configuração de RS

cfg = {

_id : "abc",

members : [

{ _id:0, host: 10gen.local:27001"},

{ _id:1, host: 10gen.local:27002"},

{ _id:2, host: 10gen.local:27003"}

]

}

// ajuda do help no RS

rs.help()

rs.initiate (cfg)

// status do RS

rs.status()

// para saber o config

rs.config()

// master? 

db.isMaster()

// dica

db.system.replset.find().pretty()

//Secondary Reads (para autorizar os slaves a poderem acessar os dados)

rs.slaveOk()

//Restart replicaset

Mongod igual a todos os parametros

//read preferencias -= rs.slaveOk()

//geograpy, seprate workload separete load, availability

// Opções de configuração de leitura

1. Primary (default)
2. Primary prefered
3. Secondary
4. Secondary prefered
5. Newest (mais próximo)

// reconfiguração de opções

rs.reconfig()

// arbiter não tem dados, só vota ( arbiterOnly: true) e é configurado no config do RS

// priority = 1  default, 0=never  - parametro também inserido no arquivo de configuração

// parametros hidden: true (nenhum cliente pode enxerga-lo, somente o primary

// slaveDelay: <seconds> ( 8 * 3600) équivale a 8 horas

// hidden true é automático quando esta configurado como slaveDelay

// arquivo hidden não aparece no hosts

//votes: <n> .Não é recomendável utilizar esta opção. ele pode ser 0 (zero)

// dica para atualizar o arquivo de configuração já existente

cfg.members[2]= lkjsdfjklsdfjkldsfljkdfjkl (parametros)

// oplog guarda as atualizações a serem feitas (normalmente qdo tem slaveDelay)

// na maiorira das vezes, ou quando algo é importante o w deve ser majority ({ w : "majority"}) .

// w=1 para coisas não muito críticas (not super critical)

// dica: é uma boa ter o arbiter um DC diferente como Amazon

Set deve ter < =12 members and < = 7 votes

// para verificar quantos rs estão funcionando (mongod)

1. ps -A | grep mongod
2. 
   

Fonte: Estas informações foram retiradas do curso online do website MongoDb University para DBA (M102)

CSS/JavaScript to crop image - apresentar somente uma parte da imagem

Se você deseja carregar uma foto e trabalhar com várias partes dela, este é o caminho.

Eu estava querendo carregar uma image e trabalhar com pedaços dela, assim não precisaria carregar a imagem toda vez.

Ex. Estava querendo pegar pedaços do arquivo abaixo, e de acordo com o resultado eu mudaria a imagem e por consequente iria mostart verde, amarelo ou vermelho. As image foi retirada do site http://pixabay.com/static/uploads/photo/2012/04/24/17/57/tick-40678_640.png?attachment e após reduzi o tamanho para as minhas necessidades

encontrei neste site http://stackoverflow.com/questions/12789818/css-javascript-to-crop-image os passos para como fazer.

HTML

<div id='crop-the-cats'>

    <img src='http://pixabay.com/static/uploads/photo/2012/04/24/17/57/tick-40678_640.png'> < /div>

CSS

#crop-the-cats {

    width: 19px;

    height: 18px;

    overflow:hidden;   

    position:relative;

}

#crop-the-cats img {

    position: absolute;

    top: -0px;

    left: -38px;

}

Assim vou automatizar, de acordo com o resultado da minha pesquisa mudo somente o left da imagem para apresentar a imagem correspondente.

Outra fonte de referência bem interessante: http://www.w3schools.com/css/css_image_sprites.asp

Fica a dica!

Agile - Scrum - videos tutoriais

Se você tem interesse em saber mais sobre scrum, tenho uma boa dica para vc.

Acesse o site http://scrumtrainingseries.com/ onde você vai encontrar 6 pequenos vídeos de aproximadamente 13 minutos cada, Eles conten instruções realmente básicas e interessante.

Infelizmente esta em inglês.

Boa sorte!