"The Latina who Learned To Code"

Software Developer, Peruvian-Ohioan girl

[bubblebubb]

[yeezauss]

YEEZAUSS.

[lamoama-deactivated20201124]

✖️  C O A C H E L L A N A  ✖️

[thelatinawholearntocode]

Visuals for UX and Branding

I have been working with a client who is a journalist and wants me to design her website.  I started from a sense of her own branding, what its values are, what its personalities are, so I used some detail questions that help me to articulate that.  Things like personality map, engagement methods to get some sense about what her brand is and what she is about before I even went to visual design.  

From there I created an inspiration board which help me to turn materials in a digital format to capture colors, photography to visualize how the website will look like and through that develop which I call it the "Profile".   To built this I follow these steps:

Photos:  Collect different photos that you want to use based on what you have learn about the clients expectations, inspiration, etc

Colors:  Collect colors that might be appropriate for the brand

Typography: Collect typography that speaks in similar tones to the brand

The following picture is the profile that I come up with:

A great tool for designers to create the inspiration board is call Dropmark.  

[thelatinawholearntocode]

2016: New beginning work plan

This year was literally a new beginning.  I left my job at Thoughtworks where I worked for almost 2 years as a Software Engineer.  The process for my decision is a whole other conversation.  What I would like to share in this post is about how I am developing a plan to continue to growth, to learn and moving forward.  I hope this plan can also inspire others, specially if they are going through similar circumstances.

Distributing the time

I got the number of hours I have available during the week (ex. 40hr week)

I assigned a percentage for each category.  This percentage represents the percentage of time that I want to allocate to each category

I made the  calculations and got a number of hours per week per category

To make it visible, I marked my calendar with this information (which I plan every Sunday)

I measure my progress every Sunday in a time called “Retro time” using an excel doc where I keep track on my progress, lessons learn and weekly goals

        2. The Plan

Areas where I want to focus on:

Work – Passion – Add Value:  

Job Search:  I added this item starting in middle of February

Wellness

Spirituality

Relationships

January:

February:

March:

In summary this past months I have been:

I took classes to get better in Photoshop, Illustrator and InDesign

Learning about areas that I enjoyed while I was working at Thoughtworks: Design, UX, UI development, Product Design

LearningLearning more in deep about Sass and Compass

Started learning about Wordpress and how customization of  themes works

Developing a simple wordpress site for a friend

Started learning PHP

Putting together the mix of skills I learned during Thoughtworks to update my resume

Host a co-working time, space with a group of women at my place

Brainstorm ideas about how I can add value to others

Continue learning about PHP and designed/developed a custom responsive theme that can be upload to wordpress

Refresh my skills on Angular.js, responsive design

Learn how to design using Sketch

Design my personal blog website

Volunteered to provide consulting services to entrepreneurs

Diving deeper on developing or mastering the skills that I enjoyed doing during my job

Learning skills that fill the gap between my job and what I want to do next

Exploring projects and skills that I was curious to learn about

Giving (helping, supporting and working on empowering other people, specially under represented women)

Updating resume

Searching about roles, companies, teams, etc

Applying to one company that I really would love to work for but its hard to get in

Connecting with friends and mentors

Training for a half marathon

Getting super serious about weight training and hiring a personal training so I can learn a sustainable way to workout

Learning to eat better

I have been meditating every day (literally) and I have seen how this makes a huge impact on my life

Reading a lot about how consciousness, being present, connecting with my inner self

Journaling

This includes reconnecting with friends, mentors, mentees

Giving quality time to people I love

Summary:

I hope this could be helpful for others and if there are any questions or doubts, please send me a message.

[thelatinawholearntocode]

Product Visioning Workshop

In the end of last year, I was invited to co-facilitate a workshop at the Latinity Conference in Chile,  where I share about what is product visioning and guide them through a process that touched the following:

Researching

Ideation

Identifying Customer and building a persona

Identify design challenges from a customer

Prototyping

Here is the link of the presentation in case is useful for anyone who is reading this blog

[thelatinawholearntocode]

CSS: Box Sizing

Here I want to show you the possibilities of the CSS attribute 'box-sizing'. I will show you, the magic with box-sizing is that will allow your code to not break, if you are adding padding or borders to your elements.

With this box sizing attribute you can easily fit HTML elements like <div> containers in one row.  Let’s walk through an example:

Goal:  Align 4 boxes with its respective padding or border and you want all to be in one single line.

First instinct solution: Create 4 <div> container with width of 25%, float left

Problem:  When you tried to add padding or border, it breaks the line and push the 4th box to the next line which will require you to add some code to fix it. 

Solution using box border: Add box-sizing attribute: border-box.  This attribute magic the browser is calculating for you where is subtracting the border on its own. and even if we add padding, it will not break your code because it will also subtract it from the whole box. However, if you add margin, this is not subtracted so it will break.  

Conclusion:

Therefore, border boxing is calculating for you the width of the box with the percentage and its subtracting its padding and border for you.  

I hope I share something new for you and let’s now practice what we learned and apply it to our code so we don’t forget. 

Great resource that explains this:

http://adamschwartz.co/magic-of-css/chapters/1-the-box/

[thelatinawholearntocode]

Java: Servlet basic (Notes)

Basic Concepts:

Java Servlet: Is a Java class that serves HTML to a browser so the idea is that you start a servlet and somewhere in the world the user go the url in your wesbsite and that causes the http get request to your java servlet(java class). That class, runs continuously in your application server and then that will send some httml to the browser which the browser will display to the user 

JSP:  This page will actually be compile into a servlet by your application server engine so Tomcat is the one that is going to compile this page into a servlet before running it

War file: This is like a jar file which basically archives your entirely application in a format that can be deploy to the server 

How to create a new project with servlet:

Open New Project

     File->New->Dynamic Web Project

     Choose Project Name->Next->Next->Finish

Create Servlet:

     Highlight the Java Resources folder

     Click on New 

     Name the package (ex. gui)

     Name class name ->NExt

     Choose the methods to use (so far in tutorial left as default)

How to print something from Servlet:

    on the method doGet type:

                    PrintWriter out = response.getWriter();

                  out.println("Hello Gaby from Deployment2");

      How to publish on browser:

     highlight the servlet class (java class)

     Click on run server 

     it should open a browser with the input that you type on doGet method

How to publish from an index.html or index.jsp file:

Under webcontent, create a new file and call it (index.html or index.jsp) 

Type and input

Where is web.xml located:

WebContent -> Web-Ind -> web.xml

Why is web.xml important:

It has the servlet mapping stuff

this servlet mapping controls what url your servlet is going to run on 

So if i change the default name in the url-pattern tag to have a custom name such as /gaby-example then when i run my servlet or jsp/html file it will point to that url

This mappings tag must be there win the web.xml because if not then when we deploy to an app service on the internet, it will not work unless we have this xml stuff correct 

So that point of this xml is to deploy correctly

What if I add a new jsp file and I want to add it to the web.xml mapping tags:

You need to copy and paste the tags :

Original snip to copy: 

<servlet>     <servlet-name>example</servlet-name>     <servlet-class>gui.example</servlet-class>   </servlet>   <servlet-mapping>     <servlet-name>example</servlet-name>     <url-pattern>/gaby-example</url-pattern>   </servlet-mapping>

Modified pasted snip:

<servlet>     <servlet-name>example</servlet-name>    <jsp-file>/login.jsp</jsp-file>   # this is the asp file that I want to map   </servlet>   <servlet-mapping>     <servlet-name>example</servlet-name>     <url-pattern>/gaby-example</url-pattern>   </servlet-mapping>

[thelatinawholearntocode]

2015!

This is a kind of late post about this new year but better late than never. 

I wish a blessed 2015 and for this year to don’t be afraid to dream a little bigger, to be passionate about what I do, to be more adventurous, to love unconditionally, to take risks, to listen more, to give back, to be a better person, to support those that I love, be healthier, to never lose my hunger for more and to be genuinely happy with yourself.

[thelatinawholearntocode]

Bootstrap vs Bourbon

I was asked to give an advice about how to approach the development and design of a work in progress project/website and for first time I heard about Bourbon.  

My first reaction was to suggest just to keep whatever they were using such as bootstrap due to the issue of sustainability and maintainability within the team because there are many hands touching this part of the code but I also decided to take my time to research about Bourbon and I was really surprise of my findings so here I want to share some key highlights:

Goal: Write code which is efficient, easy to read and maintain (SIMPLE, MAINTAINABLE, SUSTAINABLE)

Key concept about Bourbon:

Bunch of mixins and functions which allow you to write Dry-er browser-independant code

Encouraged to only include the pieces you need (you could do this in bootstrap but in WWC we don’t know up-front all the dependencies of our app)

Good example: their official website (shows common use of their mixing which is easily outputting valid vendor-prefixed properties)

features the positionmixin which expands into several positioning-related properties

golden-ratio function (which is deprecated in favour of modular-scale).

NEAT:

Helps you write your own grids (just by using a few mixins you can create your own more-semantic grid)

BITTERS:

Skeleton for Bourbon apps

Includes some variables and sane defaults for your HTML elements.

REFILLS:

Depend on Bitters and is basically a collection of elaborated HTML + SASS + JS components you can copy and paste into your projects right from the website.

Example:

Bootstrap:

<div class="container">

  <div class="row">

    <div class="col-md-6">/* some content */</div>

    <div class="col-md-6">/* some content */</div>

  </div>

</div>

Bourbon:

<div class=“my-Main-Container">

  <div class=“my-Content-One">

    <div class=“my-Content-two">

</div>

  CSS:

.my-Main-Container { @include outer-container; }

.my-Content-One,

.my-Content-two { @include span(6); }

  How to start?:

How would we do it in Bootstrap? Go to Bootstrap website, copy the code, customize. In Bourbon? Same! Go to Refills website, copy the code and customize. Similar process, but we keep all the advantages!

  Bootstrap 

(-)

Bootstrap usually introduces a pretty large/heavy maintenance burden

The markup gets unwieldy very quickly and new devs coming in without any boostrap experience end up feeling very lost, and worse, afraid to change any of the markup (is this class important? is this a control or something formatting related? etc etc)

might seem simple at first ends up being not-so-simple in the end!

you are including a bunch of stuff you don’t know you’ll ever use 

Bootstrap makes you specify some style logic in your HTML which I’d rather keep as separated as possible. 

Defines the way your markup must look, so writing semantic HTML can get quite ugly as elements end up with a bunch of classes.

    Bourbon 

(+)

Gives you more power, and makes things simpler.

I find it easier to use Bourbon, because it helps you write more semantic code overall and it provides some nice utils if you are using SASS.

it gives you the choice to just bundle everything but it encourages you to be efficient and only include what you need, as you need it.

It’s also less obtrusive as you can only use Bourbon or Neat without Bitters and Refills, or just using parts of them. 

Makes thing simple by giving you mixins and functions so you can build your own simple and more-semantic elements

Helps you separate your concerns better by allowing you to especify all the style logic in the CSS

Allows you to easily add the functionality that you need, as you need it by using Neat, Bitters and Refills.

[thelatinawholearntocode]

Angular.js: Understanding Parent/Child Scopes

This past week at work, I have been working in the Angular part of the project and understanding how the scopes of Parent/children work help to manage shipping code that works and that its clean and tested (We work use TDD- Test Driven Development). 

Key concepts to understand:

Variables defined on the parent's scope are copied to the child's scope.

If the child gets a property with the same name as the parent's then the child scope hides/shadows the parent property of the same name.

The parent scope is directly accessible by the children scope so children can modify it but the parent can not access to it's children's scope

Useful Links: Here I wanted to share some links that were useful and really easy to understand:

https://rclayton.silvrback.com/parent-child-controller-communication

https://github.com/angular/angular.js/wiki/Understanding-Scopes

[dsgn-me]

Vodafone Squirrel Stickers 

(by Claire Stamper)

DESIGN STORY:  | Tumblr | Twitter | Facebook | Google+ |

[thelatinawholearntocode]

Outline of resources to learn Java

Couple weeks ago during our Women Who Code leadership meeting, one of our organizers  volunteered to run a meetup for people who want to learn Java and I committed on helping her by providing an outline of topics and resources useful to prepare for this event.  

Here is the outline for the java curriculum that I sent her, I also included some links for resources where you can reference the topics. I hope this is helpful for anyone who is trying to learn Java (please read below if you are curious to know about my relationship with Java) 

Basics - Programming 

Variable and types: Although Java is object oriented, not all types are objects. It is built on top of basic variable types called primitives.

Conditionals

Arrays

Loops

Functions

Objects

Compiling and Running with Arguments

Java focus: 

What is java and how it works (talk about what is Java virtual machine and the java development kit)

Inheritance 

Try and Catch

Abstract classes

Interfaces

Using Generics

Collections

Wrappers and Autoboxing

Exceptions

Generic Types

IO Streams

From book HeadFirst

Chapter 1, Breaking the Surface

Chapter 2, A Trip to Objectville

Chapter 3, Know Your Variables

Chapter 4, How Objects Behave

Chapter 5, Extra-Strength Methods

Chapter 6, Using the Java Library

Chapter 7, Better Living in Objectville

Chapter 8, Serious Polymorphism

Chapter 9, Life and Death of an Object

Chapter 10, Numbers Matter

Chapter 11, Risky Behavior

Chapter 12, A Very Graphic Story

Chapter 13, Work on Your Swing

Chapter 14, Saving Objects

Chapter 15, Make a Connection

Chapter 16, Data Structures

Chapter 18, Distributed Computing

Resources:

https://docs.oracle.com/javase/tutorial/java/nutsandbolts/index.html

http://www.tutorialspoint.com/java/

https://www.udemy.com/java-tutorial/

http://www.learnjavaonline.org/en/Variables_and_Types

http://www.headfirstlabs.com/books/hfjava/

How I got into Java:

When I got a job in Thoughtworks, I was required to prepare for the upcoming training in Java.  To be honest, it was hard to switch from Ruby on Rails and its magic to Java, and I am still having some hard time sometimes but its teaching a lot specially its helping me to understand better what I am doing and how things are connected.  

During the training, I had to deal with Java and also Spring MVC which is a framework with Model-View-Controller kind of similar to Rails but with a lot more confirmation that has to be done.  

"The Spring web MVC framework provides model-view-controller architecture and ready components that can be used to develop flexible and loosely coupled web applications. The MVC pattern results in separating the different aspects of the application (input logic, business logic, and UI logic), while providing a loose coupling between these elements" 

[thelatinawholearntocode]

Life Updates: New Job, Learning new Programming Languages

I have not been writing in my blog for a few months so here I go with my life and professional updates and also a summary about my life before and after SF:

Before SF:

  Work a ton in different jobs to pay my living and help my family in Peru while getting stable in USA, work in JPMorgan Chase while finishing school at Ohio State University, travel for a study program in France, Europe backpacking, work at Unilever for an internship in a global team, work for a few months in a logistic company as a supervisor and then realizing that what really matters is to do what you love to do) 

March 2012 - July 2013: 

Welcome to San Francisco!

Job Hunting:  Since I got the chance to move to SF and start fresh.  I decided to take a break and dedicate my time to learn, explore the city and find what I really want to do next. 

About volunteer activities:  I got involved with different organizations to work towards my goal on inspiring and empowering other women to unleash their best potential.  Since I moved to SF from Ohio, I was able to get more involved in the tech sector so I was participating with organizations such as Girl Develop It where I started the PairUp session meetup), Women Who Code where I started the Algorithm's meetup session) and also started and organize the women initiative program at Dev Bootcamp. 

End of October 2013:  

Dev Bootcamp: Finish a 9 weeks program in a coding school where I learn more about coding through Ruby on Rails and pair programming (I will write another post about my experience, lessons learn and advices)

Nov - February 2014:

About Coding: After finishing DevBootcamp, I spent most of my time working in a ruby on rails project with couple friends while continue learning to code in other languages such as more javascript, ember.js.  Every day, all day.  I need to confess that I didn't feel ready to apply for jobs and call myself a software engineer.  I don't know if it was my impostor syndrome but I couldn't see myself trying to convince to companies that I was ready to be one of their developers unless I feel more confident about my code ( I will write a post dedicated to this topic)

About volunteer activities:  Got back to focus on helping Women Who Code, Girl Develop it and attended as a volunteer to different workshops, conferences and activities to help other women who are learning to code. 

About Job Application:  The couple friends who join me in a personal project after Dev Bootcamp encourage me to apply to Thoughtworks and couple startups (confession:  I thought it was not even a chance that I will get through Thoughtworks hiring process) but I was willing to put the effort and work to prepare for it while being honest about who I was, where in my coding skills I was and show all my potential as a coder.  

February - April 2014:

About Coding:  Java, java, java, java, java, java, java, java, java, java  and design on the site (did I said Java?)

About volunteer activities: Same as before

About Job Application:  During the month of February, I got couple offers for a developer role from couple startups and Thoughtworks (yes! Thoughtworks).  Maybe I should also write a post about my experience interviewing... 

It was a hard decision because one of the startups was offering a role for a more front end/design role which I love and Thoughtworks was offering a Software developer consulting role with a whole training program involved which it was ideal for me.   In the end, I decided to go for Thoughtworks and start my new adventure as a developer. 

April 2014 - August 2014: 

About Coding: Thoughtworks has a whole training program in place and I was even able to travel to India for the TWU program which is a 5 intense weeks of work in a simulation client project where I was able to learn to code with TDD, Java and javascript.  The best part besides learning a ton, it was to be surrounded with other developers from different parts of the world (the picture above is my favorite, it was taking during my training in India with one of my closes friend Ashwati who is from India Thoughtworks office).  

About volunteer activities: Thoughtworks is a company who cares about social and economy justice.  As part of the training, we also got a chance to spend a day in a women and kids refugee center in India and learn more about their reality.  It was not my typical volunteer work but I thin we were able to bring some smiles to them.  

September 2014 - Present

About Coding: I am now working for one of the biggest clients of Thoughtworks in SF.  My coding stack is Angular js andJava (of course TDD).  So far, it has been a bunch of learning and a lot of emotional ups and downs ( maybe its about dealing with impostor syndrome).

About volunteer activities:

Got back involved with Women Who Code, still running the Algorithm's and interview prep meetup and some designs for good causes.

Looking forward:

Keep learning, do some design work on the site,  start writing more about my experiences so hopefully others can learn from them and developing an MVP for a project that allows women in tech to connect with each other. 

[thelatinawholearntocode]

Unit Test with Mockito (JAVA)

The first time I heard the name mockito, I thought it was such a cute name to be an open source testing framework for Java.  However, during my Java learning process I have learned to appreciate what mockito can do for me and how important is to understand it, specially if I have to work using TDD.  

The JUnit testing framework, makes the testing of an independent, non-void method simple.  But how do we test a method with no return value? How do we test a method that interacts with other domain objects?.  Well here is when mockito is useful. 

Here are basic concepts of this framework that hope it helps to anyone who is new with it:

What is it?

It's a framework that allows the creation of test double objects (mock objects) in automated unit tests for the purpose of Test-driven Development (TDD) or Behavior Driven Development (BDD).

A mock object is an objet that:

Is created by the mock framework

Implements the same interface as the original dependent object.  Otherwise, the compiler won't let us pass it to the tested object. 

Supplies the tested code with everything it expects from the dependent object.

Allows us to check that the tested code is using the dependent object (the Mock) correctly

Why Mockito?

Use mockito to get smart "fake" implementation of classes or interfaces out of your reach (p.s.  My rule of thumb is to use mockito to mock all "other" classes that are being touch when testing a class )

What we should do to use a Mock Object?

Create instance of the Mock

Define behavior during test

Invoke the tested code while passing the Mock as parameter

Verify the Mock has been used correctly

How to create mock objects?

ClassToMock mockObject = mock(ClassToMock.class);

Mockito.mock(ClassToMock.class);

or

@Mock

ClassToMock mockObjectl

@Before 

public void setUp(){

MockitoAnnotations.initMocks(this);

}

How to verify Invocation on Mocks?

//simple "equals"

verify(properties).get("property");

//matchers

verify(properties).get(eq("property"));

What does when(...) and then (...) means?

when(methodIsCalled).thenReturn(aValue);

when(methodIsCalled).thenThrown(anException);

Example of a classical test in JUnit:

@Test

public void test(){

UnitToTest testee = new UnitToTest();

Helper helper = new Helper();

testee.doSomething(helper);

assertTrue(helper.somethingHappened());

}

Example of test using mockito:

@Test

public void test(){

Helper myMock = mock(Helper.class);

when(myMock.isCalled()).thenReturn(true);

testee.doSomething(myMock);

verify(myMock).isCalled();

}

Real Code Example:

Properties properties = mock(Properties.class);

when(properties.get("shoeSize").thenReturn("42");

String result = properties.get(shoeSize");

assertEquals("42", result);

//optional:

verify(properties).get("shoeSize");

[aquaticsparkles]

[waltdisneyconfessions]

"‘La Luna’ was so beautiful to me. As a a fourth generation woman whose mother and grandmother and great grandmother all had the same job, the idea I can still be different and they’ll accept me is incredibly inspiring."

[felinatral-deactivated20190907]

[buromarks]