DEV Community: Janice Alecha

My Journey After Software Engineering Bootcamp: Finding My Dream Role in the Oil and Energy Industry

Janice Alecha — Wed, 22 May 2024 18:44:56 +0000

The Beginning: A Passion for Backend Development

When I first enrolled in the Software Engineering Bootcamp at Flatiron School, I was captivated by the intricacies of backend development. The thrill of designing robust databases, implementing secure authentication systems, and ensuring smooth authorization processes fascinated me. I relished every moment spent diving into these technical realms, honing skills that I hoped would define my future career.

Leveraging Past Experience: A Strategic Job Search
Before joining Flatiron School, I spent five years as a Data Administrator for the Catalog team within the Materials Management group. This role gave me a solid foundation in data handling, analysis, and management. As I neared the end of my bootcamp journey, I decided to capitalize on this experience. My goal was to find a position that merged my newfound backend skills with my data expertise.

The job market was tumultuous, with many tech professionals facing layoffs. However, I remained optimistic and strategic. I targeted roles that aligned with my strengths—database management, deployment, and data analysis. After six months of relentless searching, networking, and refining my applications, I finally landed a role that felt like a perfect fit.

The Opportunity: Product Specialist in one of the leading North American providers of midstream energy services to producers and consumers of natural gas, natural gas liquids (NGLs), crude oil, refined products, and petrochemicals.

I was thrilled to accept a position as a Product Specialist within the Corrosion Prevention team of the Asset Integrity Engineering group. This role was everything I had envisioned for myself, combining technical challenges with meaningful impact. The job description resonated deeply with my skills and aspirations:

Developing and Deploying a Product Stream Quality Monitoring Program

My primary responsibility was to develop and deploy a comprehensive product stream quality monitoring (PSQM) program. This involved defining monitoring methods, establishing frequency, and managing data for gas transmission pipeline systems. The task allowed me to apply my backend development skills in a real-world setting, ensuring the integrity and safety of critical infrastructure.

Collaborating with Cross-Functional Teams

One of the most rewarding aspects of my role was collaborating with cross-functional teams. Together, we analyzed product stream conditions and identified potential threats to pipeline integrity. I provided technical support and recommendations, drawing on both my technical and interpersonal skills to facilitate effective communication and problem-solving.

Integrating New Assets and Maintaining Databases

As new assets are integrated into the PSQM Program, I will conduct thorough system reviews and maintain databases for tracking and analysis. This task is a perfect blend of my previous experience as a Data Administrator and the technical prowess I gained from Flatiron School. Additionally, I have used ArcGIS and Google Earth to identify pipelines and other critical infrastructure. I enjoy the meticulous nature of this work and find satisfaction in ensuring data accuracy and reliability. This role allows me to leverage my diverse skills and contribute meaningfully to the team's success.

Improving Industry-Standard Processes

Another key aspect of my job was improving industry-standard processes to identify and mitigate internal corrosion risks. I worked on establishing optimal flow conditions and tolerable contaminant levels, using data analysis to drive decisions that enhanced pipeline safety and efficiency.

Creating Intuitive Data Visualization Tools

As I continue to learn Python and data analytics with SQL, I am excited to delve deeper into data science and analytics. In my new role, I will have the opportunity to create intuitive Tibco Spotfire dashboards and analysis tools for the Corrosion Prevention teams. These tools will enable efficient data visualization and ensure compliance with gas transmission regulations. Designing these dashboards will be a fulfilling challenge, allowing me to apply my backend development skills while developing a keen eye for user-friendly interfaces. This opportunity has further fueled my passion for data science and analytics, and I am eager to expand my expertise in this dynamic field.

Reflecting on the Journey

Looking back, my journey from Flatiron School to my current role has been both challenging and rewarding. The skills I developed during the Software Engineering Bootcamp, coupled with my prior experience, positioned me well for this role. Despite the competitive job market, persistence and a clear strategy helped me find a job that I am passionate about and that leverages my full skill set.

This experience has taught me the value of perseverance and the importance of aligning your career with your passions and strengths. I am excited to continue growing in this field, contributing to vital projects that ensure the safety and integrity of our infrastructure.

For anyone embarking on a similar journey, my advice is simple: stay focused on your goals, leverage your unique skills, and never underestimate the power of strategic job searching. Your dream role might be just around the corner.

Capstone Project Update: Utilizing Active Storage with AWS S3 Service in Rails

Janice Alecha — Thu, 13 Jul 2023 02:43:54 +0000

Welcome back to the update of my capstone project, where I share the highs and lows of my journey at Flatiron School. Today, I bring you a tale of perseverance, determination, and ultimately, success. After facing numerous challenges and moments of frustration, I am happy to share that I have finally been able to incorporate Active Storage with AWS S3 Service in my project.

When I first embarked on this venture, I had high hopes for incorporating Active Storage—a powerful file uploading system—into my Capstone Project. My intention was to leverage the benefits of AWS S3 Service, a scalable and reliable cloud storage solution, to enhance the functionality and user experience of my application. However, little did I know that this seemingly straightforward integration would push me to the limits of my programming knowledge.

Join me as I recount the steps I took, the resources I utilized, and the key insights I gained along the way. I hope that by sharing my experience, I can provide guidance and inspiration to fellow developers who may find themselves in a similar predicament.

CREATE an AWS ACCOUNT

If you don't have already sign up for AWS and explore Free Tier products here and fill in your information to get started.

To initiate the process of creating an S3 bucket, navigate to the AWS console and conduct a search for "S3". Once you have accessed the S3 Management Console, locate and click on the "Create Bucket" button. This action will promptly lead you to where you can define the specific details of your bucket. Choose a distinctive and easy-to-remember name, and for now, it is advisable to retain the default region setting.

To ensure the security of your bucket and prevent unauthorized access, it is recommended to keep the "Block All Public Access" option selected. This ensures that your bucket remains inaccessible to individuals who should not have permission to use it. Also suggested to leave the "ACLs" option set to "Disable" and "Bucket Versioning" since it's for personal use and will not be utilized.

Once you have configured the above settings, click on the "Create" button, and your S3 bucket will be successfully created. However, it is important to note that configuring permissions on the bucket is still necessary. To do this, proceed to the AWS console and navigate to the Identity Access Management (IAM) section. From the side panel, select "Users".

Click on "Add User" and assign a suitable name to the new user, like example "active-storage-file". It is recommended to grant this user only programmatic access. On the subsequent screen, you will need to set permissions. Choose the "Attach Existing Policies Directly" tab and search for "S3". Then, select the checkbox beside "AmazonS3FullAccess".

Next, locate and click on your User name in the AWS console, and then navigate to the Security credentials section. Scroll down the page and find the option to Generate credentials. By clicking on it, you will create a unique key ID and secret key ID. It is crucial to take note of these credentials as they will not be accessible once you exit the page.

Install and Set Up the AWS SDK Gem

In your Rails application's Gemfile, add the aws-sdk-s3 gem:
```
gem "aws-sdk-s3", require: false
```
Run bundle install to install the gem.

Configure Active Storage

Open config/storage.yml file in your Rails application.
Add an S3 service configuration under the amazon key, specifying your S3 credentials and bucket name. For example:

amazon:
  service: S3
  access_key_id: <%= ENV['AWS_ACCESS_KEY_ID'] %>
  secret_access_key: <%= ENV['AWS_SECRET_ACCESS_KEY'] %>
  region: 'your-aws-region'
  bucket: 'your-bucket-name'

Set Environment Variables

To effectively manage all my credentials, I have installed the Dotenv gem, which allows me to store and access environment variables securely. Dotenv ensures that my sensitive information, including the AWS key ID and secret key ID, remains protected and separate from my application's source code.

Create ".env" file in the root directory of your project. This file will house the API key required for your development environment. It is crucial to add the ".env" file to your ".gitignore" file, preventing it from being pushed to your repository. This way, you can keep your API key confidential and avoid any unauthorized access or exposure.

Enable Active Storage

Open config/environments/production.rb and config/environments/development.rb in your Rails application.
Uncomment or add the following line to enable Active Storage for production:

config.active_storage.service = :amazon

Migrate the Database

Run the following command to create the necessary database tables for Active Storage:

rails active_storage:install
rails db:migrate

Use Active Storage in Your Models

In the model where you want to use Active Storage, add the has_one_attached or has_many_attached method. For example, in my UserAdmin model:

class UserAdmin < ApplicationRecord
  has_one_attached :profile_pic

validate :profile_pic_validation

  def profile_pic_validation
    if profile_pic.attached?
      if profile_pic.blob.byte_size > 8.megabyte
        errors.add(:profile_pic, "file is too big")
      end

      acceptable_types = ["image/jpeg", "image/png"]
      unless acceptable_types.include?(profile_pic.blob.content_type)
        errors.add(:profile_pic, "must be a JPEG or PNG")
      end
    else
      errors.add(:profile_pic, "must be attached")
    end
  end
end

You can add additional custom validations such as file size, content type, and provide appropriate error messages if the validation fails.

This serializer method generates the URL for the profile picture only if it is attached to the object. If the profile picture is attached, it returns the URL path generated by rails_blob_path. Otherwise, it returns nil. This allows you to include the profile picture URL in the serialized representation of the object, if it is available.

class UserAdminSerializer < ActiveModel::Serializer
  include Rails.application.routes.url_helpers

  attributes :id, :first_name, :last_name, :email, :profile_pic

  def profile_pic
    rails_blob_path(object.profile_pic, only_path: true) if object.profile_pic.attached?
  end

end

Seeding With Existing Database

This is the point at which I encountered a challenge because I had already seeded my database with an existing userAdmin. To proceed, start by creating a folder within the db directory to store the images that you intend to attach to your seeds. Then run rails db:seed

RESOURCES

Check out my previous blog post about my Capstone Project here.

Creating AWS Account HERE

Installing Dotenv HERE

Active Storage Setup HERE

MORE Active Storage Blogs HERE

Celebrating a Milestone: Capstone Project Unveiled

Janice Alecha — Wed, 28 Jun 2023 04:57:23 +0000

I am delighted to announce that I have successfully reached the final phase of the Software Engineering bootcamp at Flatiron. This journey has been filled with both triumphs and challenges, including moments of imposter syndrome. However, I have persevered through it all, allowing me to experience significant personal growth. As the pinnacle of this remarkable journey, I take great pride in presenting my capstone project: hey-Destination. This project demonstrates the culmination of my skills in front-end development utilizing JavaScript, React, CSS, and HTML, complemented by the robustness of backend built with Ruby on Rails.

hey-Destination provides users with a seamless browsing experience, enabling them to explore a diverse collection of exquisite villas and discover exciting activities in each location. Users can also conveniently send inquiries about a villa. Additionally, hey-Destination places a strong emphasis on security and efficiency by integrating robust authentication and authorization mechanisms, powered by Rails. This empowers Admin Users with efficient rental management capabilities, streamlining the entire process for enhanced convenience.

In my application, I have meticulously planned and implemented six models to ensure smooth data management and associations. UserAdmin, utilizes has_secure_password to ensure secure user authentication. It establishes a one-to-many relationship with the Villa model, allowing each UserAdmin to manage multiple villas. Additionally, UserAdmin has a through association with Inquiry. Location model represents various destinations available for villa rentals. It establishes associations with multiple models, including Villa, Inquiry, ActivityLocation, and Activity. Each location can have multiple villas, inquiries, and activity locations, and it can also be associated with activities through the ActivityLocation - the joined table model.

The Inquiry model is linked to the Villa model through a belongs-to association, allowing each inquiry to be associated with a specific villa. It has a has-one-through association with UserAdmin, providing convenient access to the user admin associated with the villa.

Lastly, the Activity model represents different activities available at each location. It establishes a one-to-many association with the ActivityLocation model, allowing multiple activity locations to be associated with an activity. The ActivityLocation model acts as a join table, representing a many-to-many relationship between the Activity and Location models.

Creating this project has been an enjoyable, although it did come with its fair share of challenges and bugs. As we entered the final phase, we were tasked with implementing a tech stack that hadn't been covered in our coursework. Initially, I had planned to incorporate Active Storage with Cloudinary as the cloud service provider. While searching for solutions, I came across a helpful and insightful blog post from Nemwel Boniface "From Theory to Practice: Using Active Storage for File Management in Rails" that provided valuable insights on this topic. However, due to subscription issues, I couldn't proceed with that approach, and time was running out. As a workaround, I decided to leverage the React Carousel library instead.

I discovered a variety of React Carousel libraries that are ideal for e-commerce platforms and apps like Instagram or personal portfolios. Ultimately, I opted for the React Responsive Carousel as I find it visually appealing and interactive.

First step run command:

npm install react-responsive-carousel

Then import it to your Component:

import { Carousel } from "react-responsive-carousel";
 import "react-responsive-carousel/lib/styles/carousel.min.css";

Here, I have the state declaration using the useState hook. I define two state variables: currentIndex and setCurrentIndex. The currentIndex holds the index of the current villa being displayed in the carousel, while setCurrentIndex is a function to update the value of currentIndex.

const [currentIndex, setCurrentIndex] = useState(0);

Next, define two functions: nextVilla and prevVilla. The nextVilla function is responsible for navigating to the next villa in the carousel. It checks if the current index is at the end of the villas array. If it is, an alert is displayed to indicate that the user has reached the end. Otherwise, the setCurrentIndex function is called with the previous index plus one, effectively moving to the next villa.

const nextVilla = () => {
    if (currentIndex === villas.length - 1) {
      alert("You have reached the end.");
    } else {
      setCurrentIndex((prevIndex) => prevIndex + 1);
    }
  };

Similarly, the prevVilla function handles navigation to the previous villa. It checks if the current index is at the beginning (0) of the villas array. If it is, an alert is displayed to indicate that the user is on the first page. Otherwise, the setCurrentIndex function is called with the previous index minus one, allowing the user to move to the previous villa.

const prevVilla = () => {
    if (currentIndex === 0) {
      alert("You are on the first page.");
    } else {
      setCurrentIndex((prevIndex) => prevIndex - 1);
    }
  };

Finally, the JSX code that renders the carousel and its contents. The Carousel component is used to create a container for displaying the villa images. Within the Carousel, we use the spread syntax [...Array(10)] to create an array of length 10 --you can change the value-depending on your project. Each element in this array is mapped to a div element with a unique key set to the index value. Inside the div, an img tag is used to display the image of the current villa, retrieved using the template expression currentVilla[image${index + 1}].

And with that, I proudly conclude this chapter of my journey. It is a privilege to share this exciting endeavor with all of you, and I am filled with gratitude for the invaluable experience I gained during my time at Flatiron School. The friendships formed and the support received from my cohorts have been instrumental in shaping my growth as a software engineer. Now, equipped with newfound knowledge and skills, I stand ready to soar to new heights and pursue my end goal. With unwavering determination and a passion for innovation, I am prepared to embrace the challenges that lie ahead and turn them into stepping stones towards success. I am eager to seize every opportunity that comes my way. So, join me as we embark on this next chapter together, fueled by ambition, resilience, and the belief that dreams are meant to be realized. Let's inspire, create, and make a lasting impact in the world of technology.

Simplify Your Rails API Development with AMS

Janice Alecha — Wed, 03 May 2023 15:29:20 +0000

INTRODUCTION

In this post, I will share my experience using AMS in my fourth project for Flatiron School Software Engineering program. "Crime-Sleuths" is web blog application specially designed for individuals who have a keen interest in comprehending the truth and deciphering criminal behavior. It is also relevant for online crime detectives like me. I'll explain how I implemented Active Model Serializer in this project and demonstrate how it simplified the data serialization process, allowing me to focus on developing other features of the application. So, keep reading to discover the benefits of using AMS in your own projects.

Define ActiveModel: :Serializer

Let's start by discussing Active Model Serializers or AMS, a powerful gem for Ruby on Rails that allows you to customize and simplify the formatting of our JSON output by allowing us to easily select the data we need and access relationships with just single request. With Active Model Serializers, you can create custom JSON output in an object-oriented way, giving you more control over the formatting and structure of your data.

To use Active Model Serializers, you first need to install the gem and create a serializer for your model. This serializer is a Ruby class that inherits from ActiveModel::Serializer and specifies which attributes should be included in the JSON output.

In your #Gemfile make sure to add:

gem 'active_model_serializers'

then Run bundle install

Next, you'll need to generate an ActiveModel::Serializer for your models, which can be easily done using the provided generator within the gem. To do so, simply open your console and run the following command:

rails g serializer <model name>

After running the command, a serializer file for the specified model will be created in the app/serializers directory. Active Model Serializers (AMS) offers a convention-based solution for serializing resources. MEANING that if we have a Post model, we can also have a corresponding PostSerializer serializer, and Rails will automatically use this serializer if we use the command render json: post in our controller.

Initially, in my #app/controllers/post_controller.rb:

This appears to be straightforward but what if we wished to display nested data involving users who own this posts. In such a case, we may need to incorporate a nested resource. For instance, in my blogging application as an example where users are the owners of posts. In this scenario, we may want to exhibit something like this:
#app/controllers/post_controller.rb:

Creating JSON strings can be a tedious and error-prone process. Additionally, this method does not adhere to the principle of separation of concerns, which is crucial in typical Rails applications. In such apps, the controller retrieves data from the model and passes it to the view layer, which is responsible for presenting the data to users. Similarly, in this case, it is not the controller's responsibility to determine how the data is returned. This is where ActiveModel::Serializer comes in handy.

Serializing Associated Data

My blog app represents many-to-many relationship between three models: Post, User, and Channel.

In addition to the attributes, two associations are defined using the belongs_to macro: :user and :channel. These associations specify that the Post model has a foreign key relationship with both the User and Channel models.

When the PostSerializer is used to serialize a Post object, the serializer will automatically include the associated User and Channel objects in the serialized output. This means that the serialized JSON response will include the User and Channel objects in addition to the Post attributes.

This allows for easy retrieval of associated data without needing to make additional API calls or construct complex JSON objects manually.
#app/controllers/post_serializer.rb:

Now in my #app/controllers/post_controller.rb I can revert to its initial state:

How to Implement Custom Serializers

When working with deeply nested models in Rails, it may be necessary to explicitly customize the serialization of the data to ensure that only the necessary information is returned. In the example I provided, I customize serializer for the UserPostSerializer to render users and their posts in my Channel route. Additionally, I defined a short_content instance method to limit the content of the posts returned to the first 100 characters.

To include the custom serialization, the UserPostSerializer is specified in the has_many association for the posts in the ChannelSerializer. This guarantees that the serialized channel data includes the custom serialization defined in the UserPostSerializer for the post data. By explicitly setting the serializer for the association, developers can ensure that only the required data is returned in the desired format.

Now when you run the server rails s and open browser to http://localhost:3000/channels, it should return:

CONCLUSION

I've found ActiveModel::Serializer to be a valuable tool for customizing the JSON data returned in my blog app project. It gave me the control to create serializers for specific resources and include only the data I need. AMS also follows Rails naming conventions made it intuitive to use.

Using the belongs_to and has_many macros in serializers, I was able to render associated data with ease. However, it's important to use these macros sparingly to avoid overwhelming the JSON data with excessive nesting.

It's worth noting that by default, AMS only nests associations one level deep in the serialized JSON. To go deeper, I used the include option to specify which associations to include.

Overall, ActiveModel::Serializer has helped me to customize the JSON data in my Rails application, ensuring that it's presented in the desired format.

RESOURCES:

Including Nested Association

ActiveModel: :Serialization

"Reflections On My Journey as a Software Engineering Student"

Janice Alecha — Sun, 30 Apr 2023 21:05:26 +0000

Denzel Washington's quote highlights the inevitability of challenges and difficulties that come with pursuing our goals. It reminds us that, just as we pray for rain, we must also be prepared to deal with the mud that comes with it. Challenges are an integral part of the journey, and without them, we may lack the motivation needed to achieve our goals. Instead, we should embrace the obstacles we face and use them as opportunities for growth and development. Only by setting ambitious and challenging goals can we truly realize our full potential and live a fulfilling life.

As I near the end of my journey as a Flatiron student in
Software Engineering, I am filled with a sense of pride and accomplishment. This program has been challenging, but it has also been incredibly rewarding. Through it all, I have learned a great deal about myself and my capabilities.

Managing the demands of school, work, and family can be overwhelming, while being a 40-something with limited mental bandwidth has been a significant challenge. There were times when exhaustion set in, and I struggled to keep up. Despite these challenges, I persevered and discovered that my strength and resilience far exceeded my expectations.

I have learned a crucial lesson that I can steer my thoughts and emotions in the direction I want. During the program's initial stages, I faced anxiety, particularly when going through each phase's review, live coding, and interview questions. However, I chose not to succumb to pessimism and instead, I was able to maintain a positive outlook.

I believe that joining this bootcamp was a divine intervention, and I am grateful for the path that has been set for me. I trust that HE has always guided me and put the right people in my life to help me achieve my goals. My loved ones have been a constant source of support and inspiration, always there to offer me words of encouragement and motivation when I needed them the most. Their unwavering belief in me has been instrumental in propelling me towards success.

'My First Full Stack Project-Elite Residency'

Janice Alecha — Wed, 15 Feb 2023 03:24:19 +0000

I'm wrapping up my first full stack project utilizing Sinatra framework. This project has proven to be extremely challenging and difficult, leaving me feeling unsure and struggling to find solutions at times. However, it helped me enhance my problem-solving abilities and allowed me to be the detective of my own puzzle. So here's a snippet of my project, highlighting Active Record in Ruby.

PROJECT IDEA

I developed a real estate application that enables potential buyers, sellers, and investors to search for information based on specific filters like location, price, square footage, number of bedrooms/bathrooms, etc. Additionally, users can manage listings by adding new properties, tracking availability, and deleting inactive listings. They can also adjust listing prices to reflect market value changes.

BASIC REQUIREMENTS

WHAT IS ACTIVE RECORD

Active Record is an architectural pattern used in software engineering to provide an object-relational mapping (ORM) between database tables and the classes that represent them in an application. It is a design pattern commonly used in the development of database-backed web applications.

For example, instead of writing raw SQL statements to perform database operations, you can use the Active Record library to perform these operations using the methods and properties of objects representing the data. This can lead to more maintainable code and can help reduce the risk of errors or security vulnerabilities in the application.

Active Record Associations

Association is a feature that enables us to define connections between different models. In my real estate app, I have established a one-to-many relationship between the "Listing" model and the "Subdivision" model. This relationship demonstrates that a single subdivision can have multiple listings, and each listing belongs to only one subdivision.

Active Record Association makes it so much easier to work with your database, and keeps code more organized and maintainable.

This is how my Entity Relationship Diagram (ERD)look like:

Active Record Migrations

Another feature that is useful in Ruby with Sinatra is Migrations. It provides us a way to manage database schema and allows developers to define set of transformations like example creating tables, adding and removing columns, add details, modify index and more.

In the world of coding, we are fortunate to have a useful tool in Ruby that can automate tasks and simplify our lives as developers. This tool is called Rake, and it performs tasks that we define for it. By executing tasks from the command line, we can use Rake to perform jobs such as running migrations using "rake db:migrate" and seeding our database with "rake db:seed".

Creating Migrations Using a Rake Task
I use this command line to create my table for my 2 models:

` $ bundle exec rake db:create_migration NAME=create_model_name`

Note that : The id column is generated automatically for every table! So there is no need to specify it in the db/migrations file.

Thanks to the flexibility provided by rake tasks and migrations, I have been able to make modifications to my table at any time of day, even as I changed my mind quite a few times during the project build.

This is how I add another column in one of my models:

$ bundle exec rake db:create_migration NAME=add_active_to_listings

To remove simply state remove instead of add:

$ bundle exec rake db:create_migration NAME=remove_status_to_listings

For full lists of methods click the link here:
Active Record Migrations

Seeding Data

In Ruby, you can seed data by using faker gem or creating a seed file that populates your database with built-in 'db/seeds.rb' file. With Active Record you can create new records in your database like:

# db/seeds.rb
User.create(name: 'Jane Doe', email: 'jane.doe@example.com')

Then run the seed file by using this command:

 $ bundle exec rake db:seed

How I created my Subdivision model:

Now, what is the reason for adding...

`puts "🌱 Seeding spices..."

puts "Deleting old data..."

and why use Listing.destroy_all and Subdivision.destroy_all before seeding? This is to prevent duplicates and ensure that the database is empty before creating new records. If there are existing records that match the new records in some way, such as having the same primary key or unique constraint, then the new records will fail to save and an error will be raised. Therefore, it is good practice to use the destroy_all method.

C R U D Operations

CRUD Operations is a term used to describe the basic functionalities that an application must provide to its users to interact with the system's data. The acronym stands for Create, Read, Update, and Delete. In my real estate app, I made sure to include these four operations. Users can create new subdivisions and listings via a form, update the list price, and delete specific listings when they are no longer active. Additionally, users can read or retrieve information about a listing or subdivision.

You can define a route using the get, post, put, delete, or patch methods of the Sinatra::Base class. Showing you examples of how you can define a route in an application controller:

This code defines a route handler for a GET request to the /subdivisions path in a Sinatra application. When a user accesses this path using their browser or a client, the code will be executed and a response will be returned to the user.

After fetching the Subdivision records, the code calls to_json on the resulting ActiveRecord relation. This method converts the ActiveRecord relation to a JSON string, which can be sent back as the response body to the user. The include: :listings option passed will result in a nested JSON object that contains the Subdivision records as well as their associated Listing records.

Using the create method on the Subdivision model.

The attributes of the new record are set based on the values of the image_url, name, and overview parameters in the request. These parameters are obtained using the params hash, which is automatically populated by Sinatra based on the contents of the request body.

I have implemented the functionality for updating and deleting Listing records here:

Both of these methods utilize HTTP methods to perform specific actions on the Listing records. The PATCH method is used for updating, while the DELETE method is used for deleting. These methods are commonly used in RESTful API design and allow for a clear and consistent interface for interacting with resources in a web application.

Implementing Controlled Vs Uncontrolled Component in React

Janice Alecha — Sat, 01 Oct 2022 23:04:13 +0000

In this article, I will demonstrate how I build my Upload Form in my React project using Controlled Components and Sign Up Form with Uncontrolled Component.

First, let's illustrate the difference between the two methods to create Forms: the HTML way, with Uncontrolled Components and the best practice there is for React with Controlled Components.

Uncontrolled Components

Uncontrolled Components are the form data that is handled by the DOM itself. These components are not controlled by React state.

The values of the form elements are traditionally controlled by and stored on the DOM. Here is an example of a Sign Up form from my project:

import React from "react";



function Home() {

  function handleSignUp(event) {
    event.preventDefault()
  }

  return (
    <form onSubmit={handleSignUp}>
      <h1>Create an Account</h1>
      <label htmlFor="username">Username</label>
      <input type="text" id="username" />

      <label htmlFor="password">Password</label>
      <input type="password" id="password" />

      <label htmlFor="type">Account Type</label>
      <select id="type">
        <option value="free">Free</option>
        <option value="pro">VIP</option>
      </select>

      <input type="submit" value="Sign Up" />
    </form>
  );
}


export default Home;

Notice that we assigned ID attributes to the username and password input elements with values username and password, respectively. To retrieve it, you will need to "pull" the value of the field from the DOM, and this is usually done only once when the user hits the submit button. This type of form is called "uncontrolled" because it relies on the DOM to manage the input data.

Uncontrolled components are the easiest way to build forms if you don't need to do much validation but since we don't have control over the internal state of the input we will have to roll the input back to its previous value, which is kind of tedious to do.

Controlled Components

Form elements in HTML such as:

 <input>, <select>, <textarea> and <form>

usually maintain their own states and update them according to the user input. Whereas in React, mutable states are kept in the component’s state property and can only be updated by the setState() method.

Using a controlled component is the preferred way to build your Forms in React. It lets you store the state in the component that renders the input and each input field accepts its current value as a prop and has a callback function which is called when the state of the input changes.

So here is how I created my Controlled Component in my React project:

import React, {useState} from "react";
import { useHistory } from "react-router-dom"



function PostcardForm({onAddPostcards}) {
  const history = useHistory();

  const [caption, setCaption] = useState("")
  const [image, setImage] = useState("")
  const [city, setCity] = useState ("")
  const [country, setCountry] = useState("")
  const [category, setCategory] = useState("")
  const [trivia, setTrivia] = useState ("")
  const [language, setLanguage] = useState ("")


  function handleSubmit(event) {
    event.preventDefault()

    const formData = {
      caption: caption,
      image: image,
      city: city,
      country: country,
      category: category,
      trivia: trivia,
      language: language
    }
    fetch("http://localhost:3001/postcards", {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body:
        JSON.stringify(formData)
      })
      .then(response => response.json())
      .then(finalForm => {
        onAddPostcards(finalForm)
      })
      history.push("/postcards")
      setCaption('')
      setImage('')
      setCity('')
      setCountry('')
      setCategory('')
      setTrivia('')
      setLanguage('')
  }

  return (
    <div className="newPostcard">
      <h4>Upload New PostCard</h4>
      <form onSubmit= {handleSubmit}>
        <br></br>
<label>
    Caption:
        <input type="text" name="caption" placeholder="Caption" value = {caption} 
        onChange={e => setCaption(e.target.value)} />
</label>
<br></br>
<label>
  Image URL:
        <input type="text" name="image" placeholder="Image URL" value = {image} 
        onChange={e => setImage(e.target.value)} />
</label>
<br></br>
<label>
    City:
        <input type="text" name="city" placeholder="City" value = {city} 
        onChange={e => setCity(e.target.value)} />
</label>
<br></br>
<label>
    Country:
        <input type="text" name="country" placeholder="Country" value = {country} 
        onChange={e => setCountry(e.target.value)} />
</label>
<br></br>
<label>
    Category:
        <input type="text" name="category" placeholder="Category" value = {category} 
        onChange={e => setCategory(e.target.value)} />
</label>
<br></br>
<label>
    Trivia:
        <input type="text" name="trivia" placeholder="Trivia" value = {trivia} 
        onChange={e => setTrivia(e.target.value)} />
</label>
<br></br>
<label>
    Language:
        <input type="text" name="language" placeholder="Language" value = {language} 
        onChange={e => setLanguage(e.target.value)} />
</label>
<br></br>
        <button type="submit"><h3>Upload</h3></button>
      </form>
    </div>
  );
}

export default PostcardForm;

Since the value of the input field changes whenever you type a new character, so the state changes continuously. The state does not need to be stored in same component, these can passed down as props or can be stored in a parent component.

This may sound bad but it’s actually useful, as the Form component is always “aware” of the state and the value of the input. Thus, if you want to validate something, you don’t need to “pull” the state value on submit and then display error messages.

For example, if you want to only take numbers 0 through 8, you can display a validation message in real-time, and this contributes to a better user experience.

In Conclusion

I found this helpful tip from Alex Ritzcovan

Hopefully, this will help you decide which to use in your next project.

The Beginners Approach to Algorithm.

Janice Alecha — Fri, 24 Jun 2022 04:30:32 +0000

In computer programming terms, an algorithm is a set of well-defined instructions to solve a particular problem.

Why are Algorithms Important to Understand?

Algorithmic thinking, or the ability to define clear steps to solve a problem, is crucial in many different fields. Even if we’re not conscious of it, we use algorithms and algorithmic thinking all the time. Algorithmic thinking allows students to break down problems and conceptualize solutions in terms of discrete steps. Being able to understand and implement an algorithm requires students to practice structured thinking and reasoning abilities.
This article originally appeared on junilearning.com

What better way to practice algorithmic problem solving than to find solutions to check Palindrome in JavaScript.

First off, what is a Palindrome?
A palindrome is a word, number, phrase, or another sequence of characters that can be read backward and forwards, like a kayak or racecar.

Instruction:

Write a function isPalindrome that will receive one argument, a string. Your function should return true if the string is a palindrome (that is, if it reads the same forwards and backwards, like "kayak" or "racecar"), and return false if it is not a palindrome.

In our exercises, we were given recommended steps as follows:

Rewrite The Problem in Your Own Words

I love this part since we're able to write the problem the way we understand it.
/I need to make an isPalindrome function() that returns either true or false. When the input string is the same forwards and backwards, I should return true. That means that if the input string is the same after I reverse it, I should return true. For instance, "kayak" in reverse is also "kayak", and "racecar" in reverse is also "racecar", so my solution should return true for these cases. "hello" in reverse is "olleh", so my solution should return false for this case./

Write Your Own Test Cases

In software engineering, creating your own test cases involves specifying the input values that your code should handle and the expected output it should produce. This iterative process helps develop a model to effectively solve the problem at hand.

Examples From Our Lecture:

Pseudocode

How do you effectively write a Pseudocode and What are its advantages? So many questions.

Defining Pseudocode

Pseudocode is a simple way of writing programming code in English. Pseudocode is not an actual programming language. It uses short phrases to write code for programs before you create them in a specific language. Once you know what the program is about and how it will function, then you can use pseudocode to create statements to achieve the required results for your program.-Alisa Perry

It is like writing your code on your terms and rules in short statements. I'm learning slowly but surely.

CODE

Using Built-In JavaScript Methods:

The split() method is a built-in method provided by JavaScript. This method splits the string into a list of substrings.

The reverse() method on the other hand is a built-in method provided by JavaScript. This method reverses an original array instead.

Lastly, The join() method is a built-in method provided by JavaScript. This method creates and returns a new string by concatenating all the elements in an array (or array-like object), separated by commas or a specified delimiter string.

Make It Clean And Readable

It's important to ensure your code is well-structured and readable. Avoid redundancy and strive for simplicity by following the DRY principle - Don't Repeat Yourself. Establish a clear and organized structure to improve readability.

OPTIMIZE

This means to find a more efficient solution to a problem, such as reducing the number of steps required to reverse a string, or exploring alternative approaches like using a for loop instead.

Conclusion:

I still have a lot to learn and a long way to go. To improve my skills, I need to focus on understanding the basics of data structures and algorithms. I plan to do this by reading books and watching tutorials. I will also practice by using websites such as Coderbyte and HackerRank or writing down algorithms on my notepad. It's important to remember that this is a learning process and to take it one step at a time.

How Do You Overcome Imposter Syndrome?

Janice Alecha — Thu, 23 Jun 2022 01:19:11 +0000

"There is only one thing that makes a dream impossible to achieve: the fear of failure".-Paulo Coelho

I am just a few weeks away from finishing the first phase of my Software Engineering Bootcamp at Flatiron School. Surprisingly, I recently became aware of the term "Imposter Syndrome" and can confirm that I am experiencing all the related symptoms.

What is Imposter Syndrome? Imposter syndrome is a psychological phenomenon where individuals doubt their abilities and feel like a fraud. It disproportionately affects high-achieving people, who find it difficult to accept their accomplishments. Many questions whether they're deserving of accolades. Conquering Imposter Syndrome can be daunting, but it's crucial to acknowledge that these negative thoughts and emotions don't mirror your skills. Let's explore the ways to tackle it head-on.

In my current role, I am accustomed to receiving accolades for consistently delivering and always meeting deadlines with efficiency.

However, with only a month into my Bootcamp journey, I've already experienced moments of self-doubt and a lack of motivation that make it tempting to throw in the towel. It's all too easy to fall into a negative headspace instead of maintaining a positive and focused mindset.

So How Do You Combat Imposter Syndrome? I found this article online https://blog.hubspot.com/marketing/impostor-syndrome-tips which I have found to be very useful and have started using it as a guide.

Know The Signs.

The initial phase of this endeavor requires a mindset that acknowledges the challenges ahead, and accepts that the journey will be a demanding one. However, the outcome promises to be well worth the effort. In coding, failure serves as an invaluable tool, aside from Google. When feelings of inadequacy or impostor syndrome begin to surface, taking a step back and reflecting on past struggles and triumphs can help build resilience and inspire a winning attitude.

Know You're Not Alone.

-Whenever I lack motivation to study, I turn to my favorite Software Engineer YouTubers for inspiration. I highly recommend subscribing to their channels if you enjoy their content:

Livie the developer //

BABE ENGINEER

Livie's words in one of her videos really resonated with me: "Yes! Your feelings are completely valid and coding is undeniably challenging. I experienced the same struggles, but I persevered and became the first to receive a job offer. You can do it too." Since then, I've been a dedicated follower of hers. I recommend seeking out a community of like-minded individuals for support, or joining a group such as https://dev.to/. There's a wealth of valuable information on this platform for beginners that is definitely worth exploring.

Distinguish Humility And Fear.

Humility is a sign of Strength. Accepting Fear is part of being alive. Recognizing and accepting fear is a natural part of the human experience, and humility is a sign of true strength. For those new to coding, building confidence requires developing a personalized learning plan that takes into account individual learning styles. It's crucial to avoid comparing oneself to others and instead focus on consistency, dedicating several hours each day to coding. Adjusting to the pace of learning can be a challenge, so it's important to be patient and keep in mind that programming is a difficult undertaking.

Let Go Of Your Inner Perfectionist.

To succeed in programming, it's essential to become comfortable with stepping out of your comfort zone. It's simply not possible to know everything about this constantly evolving discipline, and even seasoned developers are challenged to keep pace with new developments. Mastery of every programming language is neither expected nor required. Success in programming comes down to having the passion, desire, and dedication to pursue it, and with these traits, one can overcome any obstacle.

Be Kind To Yourself.

It's crucial to prioritize rest and exercise to maintain one's well-being. Equally important is spending quality time with loved ones whenever possible. For those juggling the demands of being a student, working full-time, and managing a household, it's essential to keep one's purpose in mind. In my case, I dream of a better life and strive to inspire others, particularly women in similar situations. These aspirations provide me with the motivation to keep going, knowing that I have much to offer and am driven by pure intentions.

Track Your Success.

Learning to code is undoubtedly challenging, so it's important to celebrate every achievement, no matter how small. I was overjoyed when I created my first task-lister, even though it took me hours to complete. Afterwards, I would often pour myself a glass of wine to mark the occasion. Cheers!

Talk With Your Mentor.

I feel incredibly fortunate to have a cohort that is both kind and supportive. Within this community, I've been able to freely express my emotions without any fear of judgement. It's essential to establish a strong connection with your mentor. My advice to anyone starting out in a similar program is to be open and never hesitate to ask questions, even if you worry they may be perceived as "dumb."

Say Yes To Opportunities.

If an opportunity arises, I'm eager to seize it with open arms. When I first began my current job, I had no prior experience with SAP systems and my proficiency in Microsoft Excel was limited. However, less than a year later, I've become one of the top performers on our team. This is because I was willing to put in the effort to learn and improve.

And Lastly...

Embrace The Feeling.

DO NOT allow feelings of 'Imposter Syndrome' to hinder your progress in achieving your goals. Remember that self-doubt is a common experience among many individuals, including those who are highly skilled in their respective fields. Instead of letting these negative thoughts consume you, try to acknowledge them, and focus on the progress you've made so far. It's also helpful to surround yourself with a supportive community of individuals who can relate to your experience and provide guidance when needed. With dedication, perseverance, and the right mindset, you can overcome any obstacle and reach your aspirations and as for me to one day become Software Engineer.