Forem: Ana María Díaz

What I learned during September 05-09 Week

Ana María Díaz — Tue, 13 Sep 2022 02:44:23 +0000

During this week I started to develop a full-stack application built with JavaScript : React JS for the Frontend and Java Spring-boot for the Backend.
I’ve learned a lot about how things work with Spring, the project is more structured and complex than Express and Node js technologies. The way Spring handle services, controllers and building API’s is secure and complete.
On the other side connecting the backend server to React js help me to understand how things are connected and depend on each other. The main task was to build a CRUD as a To-Do list, this project help me to learn a lot and implementing it with two different technologies was a good idea.
While I was working on the UI, React made things so much easier because as a component based library allowed me to recycle components that appeared more than one time at the interface. Also I passed the data on props to make everything dynamic. Working on the Backend building my endpoints with Spring was kind of difficult because returning status code responses isn’t as easy as returning it on Node js.

I want to learn more about the Spring Framework and I’ll finish my To-Do app to practice my knowledge.

What I've learned during August 22-26 Week and 29-02 September Week

Ana María Díaz — Tue, 06 Sep 2022 04:58:05 +0000

During this two weeks I've been learning a lot about Java more specifically about collections, Spring and Spring-boot framework.

What are colllections in Java?

A collection is defined as a group of individual objects which are represented as a single unit is known as the collection of the objects. In Java, collections are a framework that includes data structures and methods using them will help us to reduce effort on designing and implementing it.

Types of collections

List: ArrayList, LinkedList, Vector, Stack.
Map: HashMap and TreeMap
Set: HashSet and LinkedHashSet

What is Spring?

Spring is the most popular java framework and allows us to build scalable projects faster and easier. Some of the spring applications are: build microservices, create web apps and serverless applications.
It's friendly and easy to learn.

Some advantages of using Spring are:

Predefined Templates
Easy to test
Lightweight
Declarative Support
Fast development

Now that we have the knowledge of how Spring works let's take a look to Spring-boot

Spring-boot and Java

Spring-boot is a tool that simplifies the development of web applications and microservices. It offers a dependency injection that allows us to define our own dependencies in objects. It also works as MVC (Model View COntroller) and makes easier integration with other technologies like React js.

Blogpost What I learned during August 15-19 Week

Ana María Díaz — Tue, 23 Aug 2022 03:58:46 +0000

During this week I’ve been focused on learning Java Fundamentals, many Full-stack job opportunities are based on React for working with the Frontend and Java for the Backend. It’s important to have the knowledge of both languages to build a better profile.

I’ve been working on the Java fundamentals training and been practicing some topics one of the most important ones is to understand the project structure, how classes works, packages and methods. Java is an OOP language this allows us to recycle a lot of code when we are working with similar things ore features. On the other side we have Javascript as an event oriented language it allows us to have a better knowledge of the user requirements. When we are using JavaScript we can include React Js as a UI Library and this will help us to build faster UIs.

On this week I’ll continue working on the React Js Training to understand more how Redux works and what are the differences with the useContext hook, also I’ll be practicing builiding APIS with Java and get to know Spring.

React + Redux the perfect combo

Ana María Díaz — Tue, 16 Aug 2022 03:26:30 +0000

During this week I started to learn more about how React js works at low level, including how it manage the state. Redux is a state management library that will help us to store and manage all the application states.
It also provides some APIs using which we can make changes to the existing state as weel as fetch the current state of the application.

How does Redux works?

There’s something called Redux store this is the main central bucket which stores all the states of an application. The store has to be provided to the App.js wrapping it with a provider tag, with this all its children can access the state of the application from store allowing it to act as a global state.

Actions inside Redux must have at least a type associated with it and extra details is optional depending on the type of action.

Reducers inside Redux are uses to specify how the state three is transformed by actions, taking 2 things: Previous State and an action. Then they reduce it to one entity known as the new updated instance of state.

Understanding Redux is complex, on the next weeks I’ll be completely focused on learning more about this library.

Interview preparation month

Ana María Díaz — Wed, 03 Aug 2022 05:07:35 +0000

This week , I been preparing for my technical interview it’s been hard because at this phase we need to focus on how to solve problems and also implement that solution including optimization with time complexity. I’ve been learning a lot of Big O Notation and TDD

About Big O notation

Big O notation is a mathematical notation used to classify the complexity of your algorithm. This complexity includes the running time and the space that allocates in memory, O(1) has the least complexity let’s say that you’re working with a sort algorithm and you get constant complexity this algorithms is very optimized. Otherwise if you got a O(2^n) your algorithm is horrible optimized. As developers it is important to have knowledge of Big O Notation to implement on code an optimized solution.

Test Driven Development

TDD (Test driven development) is a style of programming following three main activities: coding, testing and design it specifies and validate how code should works and what will do . In this case when we’re talking about the testing part we refer to unit testing and at design includes refactoring elements.

Unit testing vs Integration testing

Unit testing is a method in which a single component of code is tested, including the expected behavior and taking on mind the edge cases. The purpose of unit testing is validate if the unit works correctly this type of testing is considered the first level of sofware testing

Integration testing, on the other hand, is a method in which a group of units are tested in a group in this case normally components depend on other components and both work together. Integration testing is used to check the functionality, performance and expected behavior of the system.

On the next weeks I’ll continue working on solving hacker rank challenges and practicing some CS fundamentals in order to be prepared for my technical interview.

What I learned this Week 18-22 July

Ana María Díaz — Tue, 26 Jul 2022 03:13:36 +0000

During this week I focused on practicing for my performance interview and the first interviewmania round. Both interviews were theoric and about CS fundamentals, I learned a lot about things you need to take care of when you are being interviewed and also when you’re the interviewer.

The most important thing to take care of is not being nervous, because if you feel this way it can be a blocker, you can get confused and forget about the concepts. Also the interviewer can notice that you don’t know what are you talking about. Always focus on giving an example of what are you explaining and how and where you can implement that concept.

As an interviewer it is important to make clear questions and also have all the concepts clear, in case you need to give a hand to the person you’re interviewing.

This week, I’ll focus on improving my explanations about some concepts and practicing algorithms and data structures a lot because there’s always a technical interview. Also I’ll be learning more about OOP.

How to prepare for your first tech interview?

Ana María Díaz — Tue, 19 Jul 2022 04:14:31 +0000

In tech industry a requirement to get a job is to pass successfully the tech interview, there are many guides outside but based on my persona l experience I’m gonna give you some advices.

Get back to fundamentals

Sometimes, when we’re preparing for a tech interview we only focus on algorithms and data structures and coding challenges but we don’t practice the theory. It is also important to focus on practicing CS fundamentals here’s a list of topics that I’ve been studying for my interview:

Object Oriented Programming
Software Engineering
Programing paradigms
Testing
Sorting algorithms
Optimization
Big O Notation

Of course there are a lot of subtopics inside that topics, for example: Polymorphism, Abstraction, Encapsulation and Inheritance are related to OOP.

Practicing the for the coding challenge

There are many sites where you can study algorithms and data structures for free including video tutorials explaining more specifically how it works. This week I’ve been practicing arrays and strings on Hackerrank. Also Leetcode have a lot of problems and you can filter them by the most popular ones.
I’ll recommend you to solve at least 20-30 problems from different difficulty and data structures to crack the coding interview.
Books: Cracking the coding interview is like the bible of technical challenges, it explains a lot of topics and it’s going to be your best friend for practicing exercises for the coding challenge.

Always try to practice with someone mocking interviews and relax, rest enough days before your interview. This point is very important because sometimes being nervous can be a big blocker. On the next weeks I’m going to be practicing more for my technical interviews.

Open Source projects that I’ve been contributing

Ana María Díaz — Tue, 12 Jul 2022 03:10:13 +0000

On the last two weeks I’ve learned a lot about contributing in open source projects.
Two of the projects that I’ve been contributing is the largest UI library and Fig an autocomplete extension used for terminal.

Material UI Library (MUI)

As an open source project Material UI, recently developed their new version Material UI 5, they include a lot of new features but also currently have a lot of bugs specially related to Typescript. One of the bugs I’ve tried to solve is related to customize FormHelperTextProps component, on this issue I’ve been learning a lot of how Customization works on Material UI components and Typescript, still haven’t found the solution but I think is related to a type. After reading a lot of similar issues and documentation I have a better idea of what’s going on, hope I’ll fix it soon.

Fig MacOS terminal extension

Fig is an open source extension developed to autocomplete cli commands, currently it supports Git, Npm, Yarn, Brew, Docker, etc. I’ve been working with this extensions for 4 months and it helps me a lot. The last project I’ve worked on used Java and while I was using Fig I noticed that it doesn’t support Spring, so I decided to start working on the Spring CLI autocomplete.

It’s hard to contribute on open source projects, specially when you don’t take your time to understand the issue.

Using open source libraries/frameworks with Real Clients.

Ana María Díaz — Tue, 05 Jul 2022 02:45:55 +0000

On the previous weeks we’ve been working on a project developed for a real client, one of the most important things that I’ve learned on my first experience with a client was time management. On this project we worked with React js which is an open source library as Material UI.

Challenges when you contribute to an Open source project

The first time I tried to contribute to an open source project I didn’t know they have guidelines, there you can find how to start contributing. Open source projects are managed by big communities, but there’s also people who works full time as open source contributor this people usually are the ones who approve the pull requests.

Normally you have to look at the open issues, try to reproduce it on your computer and start working on a solution. But also you have to communicate on the github thread issue that you are currently working on a solution or that you’re interested on solving it. This is how you’re going to be assigned to that issue, and let everyone know that you’re currently solving it.

In case you decided to skip the thread conversation, what can happen is that anyone else solve it first and then you found out that the issue is closed. That’s why it is important to have communication when you’re working on a open source project.

On this week, I’ll be working on open source projects and learning more about solving issues, develop new features. This week I decided to start solving a Material UI issue related to style component and margins I’ll update you if I find a solution.

Real Users, Real clients and MVP project development.

Ana María Díaz — Tue, 28 Jun 2022 04:42:13 +0000

The most important thing I learned about this phase is how important is to have a good communication, teamwork and time management.

The role of communication when building a project

When I started working on my first project that includes a real client we scheduled a weekly meeting to show a demo of what we’ve been working on the week. We started asking questions and the client ask us for more features, on our firsts times we can get scared and started saying yes to all.

But it is important to identify how many time we have and how to manage it, as developers we now that a bug can takes us hours to solve. But working on teams show me that it’s important to communicate, talk about the progress of the tasks, identify any blockers and ask for help.

What it’s possible and what isn’t

From the beginning of the project we knew that all has to be done in 4 weeks, set goals and deadlines is going to help us identify what tasks are possible to achieve and which not.

When we are working with a client knowing that our project is going to be used by real users we have to discuss about deliverables and negotiate deadlines in order to build a good project.

Building V 1.0 of our project and making the deploy.

Ana María Díaz — Tue, 28 Jun 2022 04:23:33 +0000

On the previous weeks we’ve been working on building a project from scratch in 4 weeks implementing agile methodologies and working with weekly sprints. In this week we’re going to be working on the deployment and de V 1.0 of the project.

What we need to know is that the first version of a project also known as MVP is designed to be working with the basic features and it’s not designed to be implemented in real life there are many filters to pass by before using it on real life.

What is a deployment?

When setting up a project you will always have your live project, which is called the development environment or production environment. The deploy is a version of our project build for production refers to the process of running our application on a server or a device.

Before we work on making a deploy we need to test and verify if the project is functional and check if has no errors.

Free sites to deploy our app

Heroku
- Heroku is a cloud application platform that supports most programming languages, including the likes of Go, Node.js, Clojure, and more.
Vercel
- Vercel is a revolutionary serverless deployment service designed for React, Angular, Vue, and other JavaScript libraries.
Netlify
- Netlify is one of the most popular services out there for web deployment. It easily imports projects from GitHub, GitLab, and Bitbucket, and is widely used with Jamstack applications.
Github pages
- GitHub Pages is one of the fastest and most widely-used methods for beginners to deploy websites. With GitHub Actions you can trigger automatic deployments, configure CI/CD and much more.

What I’ve learn in this 4 Weeks of development

It’s important to identify the basics steps when you start a new project. We can take this 4 weeks as a path to follow and continue developing our project, implementing this will help us to identify client needs on a better and easiest way.

Keep tracking our progress and working with weekly sprints isgoing to help us achieve goals and work faster.

Building the backend: APIs with Express and implementing security with Node js on our project

Ana María Díaz — Tue, 21 Jun 2022 04:39:20 +0000

At this point, on the previews weeks we’ve been working on the views built with React and Material UI, now it’s time to make it functional. In order to do that we need to build our backend this time we’re gonna be using Node js and Express.

How Express works?

Express is a minimal and flexible Node.js web application framework that provides a robust set of features for web and mobile applications. It’s designed to build easy APIs this makes easy to organize the application functionality with middleware and routing it also improves the performance.

How node js implements security

If you’re starting a project always from the beginning you should consider the security at every phase of the development such as architecture, design, code, and finally the deployment.

One of the most important things you should check is Data validation, you must always validate or sanitize the data coming from the user or other entity of the system. The bad validation or no validation at all is a threat to the working system and can lead to a security exploit. With node js you can use the module validator to perform the data verification.

Other important thing is the application authorization and authentication, including hashing the passwords you can use bcyrpt node module to perform the hashing.

When we start building our backend there’s many things we have to consider building APIs, connecting the database and most important security. In the final week of building our first project in 4 weeks we’re gonna be learning about testing and deployment.