Blog - Thamara Alves

Publishing my app on Google Play Store for the fist time

2017-01-02T00:00:00+00:00

Happiness after achieving a goal, that was learning how to launch/publish an app built with ionic on play.google.com.

Below a screen showing my success:

Reminder it was just the beginning, a beta test. I am going to improve and launch a real and interesting app. (*Promise)

Using vagrant with Asp .Net Core

2016-12-19T00:00:00+00:00

Basically install vagrant Vagrant, but what’s vagrant?
Vagrant allow you to create and configure lightweight, reproducible, and portable development environments.

To make vagrant works you need a virtual machine, I usually use Virtual Box VirtualBox

Create an ASP.NET core project in Visual Studio

Or just clone or download my project from gitlab Gitlab project: Gitlab project

… download the vagrant file vagrant file directly.

After you install vagrant, and virtualbox, create an asp core project, insert the vagrant file you’ve downloaded on the project root, open the prompt, and run the commands:

vagrant plugin install vagrant-hostmanager You should see something like this:
vagrant up You should see something like this:

Vagrant up will install the windows server 2012, and build up everything, will take time, be patience, wait, and enjoy.

Merci * – *

Using your development environment, in the cloud as sample my website

2016-12-18T00:00:00+00:00

Since I discovered c9: c9, I am using it as my development environment to my blog.

I created my blog using jekyll (https://jekyllrb.com/) with github pages github pages: github pages, and my repository is on thamaraaalves: thamaraaalves

Create an c9 account. I created with github to transfer my repositories easily.

When I push on c9 instantaneously update on github

Creating post using rake

Additional information - To compress images I use TinyPNG tinypng: tinypng

Below step by step to run Jekyll on c9.cloud:

Commands:

gem install jekyll
jekyll new my-awesome-site
cd my-awesome-site
jekyll serve –host $IP –port $PORT –baseurl ‘’

DOING UPDATES AND POSTING:

Create a Post Create posts easily via rake task: $ rake post title=”Hello World”

The rake task automatically creates a file with properly formatted filename and YAML Front Matter. Make sure to specify your own title. By default, the date is the current date. The rake task will never overwrite existing posts unless you tell it to.

Create a Page Create pages easily via rake task: $ rake page name=”about.md” Create a nested page: $ rake page name=”pages/about.md” Create a page with a “pretty” path: $ rake page name=”pages/about”# this will create the file: ./pages/about/index.html The rake task automatically creates a page file with properly formatted filename and YAML Front Matter as well as includes the Jekyll Bootstrap “setup” file.

Publish After you’ve added posts or made changes to your theme or other files, simply commit them to your git repo and push the commits up to GitHub. $ git add .$ git commit -m “Add new content”$ git push origin master

Referrences jekyllrb: jekyllrb

Learning french listening good french music - 2

2016-02-04T00:00:00+00:00

As these days, here is another good one french music… Cause, I like to discovery new musics everyday.

I didn’t know this singer, also the music, I just liked, sounds amazing. :)

Take a look!

To listen:

Merci! Avoir une belle journée :)

Simple way to create and use Shadow DOM

2016-02-03T00:00:00+00:00

Reporting working life

I’ve been studying, learning and working as a web developer. Yeahh, at the same time. This experience is amazing, you learn things to put in a real project.

I met shadow DOM when I was studying web components. Bellow, is a simple code to start creating a simple shadow DOM content (in this case ready document could be call more than once). Take a look! Later, I’m gonna explain with details, and with better documentation.

var numberHosts = $('#host').data('numberHosts');

//1. create the shadow dom of the container
var host = document.querySelectorAll('#host'); 

if (host[numberHosts]) {
    var root = host[numberHosts].createShadowRoot();               
    var template = document.querySelectorAll('#template');
    var clone = document.importNode(template[numberHosts].content, true);
    kendo.ui.progress($(root.getElementById('Content')) , true);
    root.appendChild(clone);
    //2. create variables
    var DeleteButtonID= $(root.getElementById('DeleteButton'));  
    
 if ($('#host').data('numberHosts')==0 || $('#host').data('numberHosts')>0) 
    $('#host').data('numberHosts', $('#host').data('numberHosts')+1);
}

One important thing is when you create a shadow DOM, your ROOT will be encapsulate, to customize, for example if you are using KENDO UI framework, you have to import the stylesheet putting the code bellow inside the tags < style > < /style >:

/* to use external style sheets inside shadow dom */
@import url('<%= Page.ResolveUrl("~/Content/kendo/kendo.common.min.css") %>')

Anyway, we can’t forget the HTML structure with the tags(template, content), below a simple code:

    <template id="template">
      
         <%--css style--%>
         < style >
            /* to use external style sheets inside shadow dom */
            @import url('<%= Page.ResolveUrl("~/Content/kendo/kendo.common.min.css") %>');
         < / style >
                  
        <%-- structure DOM elements   --%>
        <%--  content --%>
            <div id="Content">
                <div id="grid" ></div>  
                <content> </content>
            </div>
    </template>

References and some fonts:

W3 Shadow DOM

HTML5 Rocks

Merci! :)

Learning french listening good french music - 1

2016-02-03T00:00:00+00:00

I love music, really may consider me a ‘person addicted to music’

So, I’ve been studying french some weeks ago, bellow is a good music in french. Today, I am listening and repeating this music since I started to work OnRepeat

To listen:

Bonne journée!

Using Selector Gadget

2016-02-01T00:00:00+00:00

SelectorGadget is an open source bookmarklet that makes CSS selector generation and discovery on complicated sites a breeze. Just drag the bookmarklet to your bookmark bar, then go to any page and press it. A box will open in the bottom right of the website. Click on a page element that you would like your selector to match (it will turn green). SelectorGadget will then generate a minimal CSS selector for that element, and will highlight (yellow) everything that is matched by the selector. Now click on a highlighted element to remove it from the selector (red), or click on an unhighlighted element to add it to the selector. Through this process of selection and rejection, SelectorGadget helps you come up with the perfect CSS selector for your needs. SelectorGadget has been tested to work in current versions of Firefox and Safari. At the moment it is quite buggy in IE7. How could I use this?

for webpage scraping with tools such as Hpricot and Beautiful Soup
to generate jQuery selectors for dynamic sites
as a tool to examine JavaScript-generated DOM structures
as a tool to help you style only particular elements on the page with your stylesheets
for selenium testing

Source: Source

Create an asp .net project with MVC 7, EF6, Visual Studio 2015.

2016-01-29T00:00:00+00:00

I created a tutorial video in youtube explainning how to create a project using MVC 7, Entity framework 6, with Visual Studio 2015.

So, take a look, below is the video.

(Unfortunately, there is no audio, and I didn’t finish the edition. Pardon me! =/)

Merci! :)

Installing polymer in a WebForm project

2016-01-28T00:00:00+00:00

After long time I am back. This is my second post since I created this personal site.

This is a technical post. I started to learn polymer, webcomponents, to create a reusable module using webform with c# this month.

Anyway, the question is “How to install polymer in the project”?

First of all, make sure you have nodejs, and git installed in your computer. If not, install them:

Nodejs: Nodejs
Github: Github

Step-by-step:

1- create a webform/mvc project

2- in node js (with bower, polymer, and git installed)

3- inside the project folder execute the comand: bower init > after set the settings

4- after execute the command: bower install Polymer/polymer –save

Others comands options:

comand: bower info polymer

comand: bower info polymer/polymer

If you have some trouble with git command in node.js prompt, try this below:

execute the comand: set PATH=%PATH%;C:\Users\Thamara Alves\AppData\Local\Programs\Git\bin

but, change the

set PATH=%PATH%;;

So, like this:

set PATH=%PATH%;C:\Program Files\Git\bin;

Or this: (Notice the (x86) )

set PATH=%PATH%;C:\Program Files (x86)\Git\bin;

Comands to install new elements:

inside the path: Scripts\bower_components\webcomponentsjs>

execute the comand: bower install –save PolymerElements

Hello world from Thamara Silva Alves

2014-07-23T00:00:00+00:00

Hello, guys! This is my first post here. I intend to write just in English. I arrived from Canada a week. Now, I will keep practicing English in my life.

So, I’m gonna use this blog to write things I did in Canada, my experience, my intentions, and what I’m learning, my doubts, anyway keep two or one posts a week.

“If you don’t like something, change it. If you can’t change it, change your attitude.” M.A.