DEV Community: NathanWelliver

Transitioning from Javascript to Python: A Beginner's Journey

NathanWelliver — Fri, 09 Aug 2024 18:02:25 +0000

My Path to Full-Stack Development

As part of my journey to become a full-stack developer, I started with JavaScript and React. After successfully completing projects in these technologies, I transitioned to learning Python, SQL, and creating my own CLI menu. This change was both exciting and challenging, as Python's simplicity initially made me question whether it could really be that easy.

Embracing Python's Simplicity

Moving from JavaScript and React to Python was a significant shift. I often found myself thinking, "It can't be that simple," when writing or figuring out Python functions. But that’s the beauty of Python: it’s designed to be straightforward. The language’s creator, Guido van Rossum, focused on readability and simplicity, which made learning Python feel almost intuitive once I got used to it. This allowed me to move quickly through the labs and code-alongs during this phase.

Here’s a simple Python example that highlights this simplicity:

# Python: Filtering even numbers from a list
numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
even_numbers = [num for num in numbers if num % 2 == 0]
print(even_numbers)

# Output:
[2, 4, 6, 8, 10]

Now, let's see how you mmight do the same thing in JavaScript:


// JavaScript: Filtering even numbers from an array
let numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
let evenNumbers = numbers.filter(function(num) {
    return num % 2 === 0;
});
console.log(evenNumbers);

// Output:
[2, 4, 6, 8, 10]

In Python, list comprehensions provide a concise way to filter and transform lists. The JavaScript example, while still straightforward, requires more syntax, such as defining an anonymous function within the 'filter' method.

Overcoming Challenges with a Fresh Perspective

Even with Python’s simplicity, I faced challenges. One strategy that consistently helped me was stepping away when I felt stuck. By taking a break and returning to the problem later, I could approach it with a fresh perspective. I would talk through how the code should work, consider what it needed to accomplish, and walk through the function as if I were explaining it to someone else. This approach often led to those "Aha!" moments where everything clicked.

Advice for Fellow Beginners

For anyone starting out with Python, especially if it’s your second language, my advice is to take it slow. Python is different from many other languages, with a strong focus on object orientation. The syntax may be simple, but understanding how everything fits together takes time and practice.

If Python is your first programming language, the same advice applies. Practice regularly, and don’t be afraid to seek out videos and other reliable resources when you encounter challenges. Sometimes, a different perspective can change your entire understanding of a concept.

Final Thoughts

Learning Python has been a rewarding experience, and its simplicity is one of its greatest strengths. Whether you’re new to programming or adding it to your skill set, take the time to appreciate Python’s design. It’s a powerful tool that can open up many opportunities in your development journey.

My intro to React

NathanWelliver — Thu, 04 Jul 2024 18:43:12 +0000

Introduction
In the second phase of my journey at Flatiron School, I dove deep into the world of React, a powerful JavaScript library for building user interfaces. This phase was packed with learning experiences, from understanding components and state management to handling side effects and client-side routing. In this blog post, I'll share some of the key technical aspects I learned, the challenges I faced, and the rewarding moments that made this phase truly impactful.

Understanding Components and State in React
One of the core concepts in React is the idea of components. Components allow you to break down your UI into reusable pieces, making your code more modular and maintainable. Alongside components, state management plays a crucial role.

Setting Up State
Before setting up state in a component, it's important to determine whether the component actually needs state. If it does, you can set it up using the 'useState' hook. Here's a simple example:

import { useState } from "react";

const [allPies, setAllPies] = useState([]);

In this snippet, 'allPies' is the state variable, and 'setAllPies' is the function used to update the state. This setup allows you to manage the state within your component efficiently.

Managing State with Functions and Effects
You can set the state either through a function or using the 'useEffect' hook. The 'useEffect' hook is particularly useful for handling side effects, such as data fetching.

Here's an example of both approaches:

import { useEffect, useState } from "react";

const MyComponent = () => {
  const [allPies, setAllPies] = useState([]);

  useEffect(() => {
    fetch("http://localhost:3001/pizzas")
      .then(response => response.json())
      .then(data => setAllPies(data))
      .catch(error => console.log(error));
  }, []);

  const handleClick = (pizza) => {
    setEditPie(pizza);
  };

  return (
    <div>
      {/* Render your component UI here */}
    </div>
  );
};

Overcoming Challenges with Side Effects
Understanding side effects and using the same child component for different parent components were some of the toughest challenges I faced. The concept of side effects, especially, took a while to grasp. Initially, I struggled to understand when and how to use the useEffect hook. Through numerous discussions with Peer Technical Coaches (PTCs) and a lot of trial and error, I finally understood how to manage side effects and reuse components effectively.

One practical example was fetching data from an API. I needed to ensure that the data was fetched every time the component was mounted or when specific dependencies changed. The 'useEffect' hook helped manage this efficiently, as shown in the earlier code snippet. Another challenge was reusing a child component in different parent components without breaking the state or functionality. This required a solid understanding of props and how to pass data effectively between components.

Building My Project: A Rewarding Experience
The most rewarding part of this phase was building my own website for the project. I was amazed at how quickly I could put together the functionalities I needed. In less than a day, I had most of my project completed. This experience not only boosted my confidence but also reinforced the skills I had learned throughout the phase.

Creating a dynamic and responsive website required me to apply everything I had learned about React. I had to think critically about how to structure my components, manage state, and handle user interactions. For instance, implementing client-side routing with React Router allowed me to create a seamless navigation experience for users without reloading the entire page. Here's a basic example of setting up React Router:

import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';

const App = () => (
  <Router>
    <Switch>
      <Route path="/" exact component={HomePage} />
      <Route path="/about" component={AboutPage} />
      <Route path="/contact" component={ContactPage} />
    </Switch>
  </Router>
);

const HomePage = () => <div>Home</div>;
const AboutPage = () => <div>About</div>;
const ContactPage = () => <div>Contact</div>;

export default App;

Key Takeaways
Start Your Projects: No matter how daunting a project or task may seem, the hardest part is getting started. Once you begin, you'll often find it easier to make progress than you anticipated.

State Management: Properly managing state is crucial for creating dynamic and interactive UIs. Understanding when and how to use state can greatly enhance your development process.

Side Effects: Handling side effects, such as data fetching, requires a good grasp of the 'useEffect' hook. This knowledge is essential for working with external data sources in React.

Component Reusability: Learning to reuse components across different parts of your application can save you time and effort, making your codebase more efficient and maintainable.

Conclusion
Phase 2 at Flatiron School has been a transformative experience. From grappling with complex concepts to building a functional website, I've grown significantly as a web developer. The skills and knowledge I've gained will undoubtedly help me in my future career. If there's one piece of advice I'd give to fellow learners, it's to start on your projects—because the journey of a thousand miles begins with a single step.

My experience learnig JavaScript.

NathanWelliver — Wed, 27 Sep 2023 23:31:44 +0000

How I got into coding

I got my first taste of coding when I went to my community college for an IT Certificate. While there, I learned a little bit of Python, but only a couple of assignments and one little project. In that short time that I worked with Python I realized that I wanted to continue to work with code.

Finding my school

After I found what interested me in my IT course, I began to look for schools that would teach me while I continued to work my job. One day I was talking to my neighbor about jobs and career paths and he said he worked with code for a large company. He and his wife both went to Flatiron school for software engineering, about a week or two after they graduated from Flatiron they already had found jobs. With some research and some help from their support team, I was able to decide to go to school at Flatiron. One of the best things about them is that they can give me a superb education and working experience while in class. If you ever get stuck on an assignment you have the ability to call on a Tech coach that can help you through the assignment. They also provide an AI assistant that can help you find coding errors or help provide an in-depth explanation of the code you are working on and how it works. The counselors that you work with are amazingly friendly and are there whenever you need them. The systems that they have in place for contacting and finding help are super simple. The tech coaches also are usually always available unless it is past midnight. I find that amazing to have access to all the time while coding. Everything that they have set in place to help you learn and grow your knowledge about coding is amazing!

What I have learned so far

I started my coding journey learning JavaScript with Flatiron. The layout and form of learning that they provide you with is incredible. You have lectures happening all the time that you can go back to, if recorded, to relearn or remember. Labs that test you on the ability to apply the recently learned topic in a way that makes you think. One of my favorite labs to do was the Toy Tale lab. This is where I learned to use fetch(). Fetch() is used to make a "GET", "POST", and "PATCH" request to modify the DOM(document object model). For example, if you want to display/update the toy card you would have to fetch them from the server.

// Function to fetch toys and display them
  function fetchToysAndDisplay() {
    fetch("http://localhost:3000/toys")
      .then(response => response.json())
      .then(toys => {
        toys.forEach(toy => {
          const card = createToyCard(toy);
          toyCollection.appendChild(card);
        });
      });
  }

Now if you wanted to post a new toy to the website you'd need to add a button and section on the page to input the information needed to create a new toy. Then you would code in the button's functionality into the project like so:

// Function to create a toy card
  function createToyCard(toy) {
    const card = document.createElement("div");
    card.className = "card";

    const h2 = document.createElement("h2");
    h2.textContent = toy.name;

    const img = document.createElement("img");
    img.src = toy.image;
    img.className = "toy-avatar";

    const p = document.createElement("p");
    p.textContent = `${toy.likes} Likes`;

    const button = document.createElement("button");
    button.className = "like-btn";
    button.textContent = "Like";
    button.dataset.id = toy.id;

    button.addEventListener("click", () => {
      toy.likes++;
      p.textContent = `${toy.likes} Likes`;
      updateToyLikes(toy);
    });

    card.appendChild(h2);
    card.appendChild(img);
    card.appendChild(p);
    card.appendChild(button);

    return card;
  }

I have had a ton of fun with this project not just by creating/writing the code to make the project work. But also being able to create the toy card on the website just with a little bit of coding experience. I have improved so much in a short amount of time with Flatiron. They have helped me to push myself to continue on the career path that I have chosen. That is why I would recommend working with FlatIron if you are looking to get into software.